working on it ...

Filters

Explore Public Snippets

Sort by

Found 25 snippets

    public by JKCPR modified Apr 25, 2018  729  0  5  1

    unit testing - mocking server responses with sinonjs

    {
        setUp: function () {
            this.server = sinon.fakeServer.create();
        },
    
        tearDown: function () {
            this.server.restore();
        },
    
        "test should fetch comments from server" : function () {
            this.server.respondWith("GET", "/some/article/comments.json",
                                    [200, { "Content-Type": "application/json" },
                                     '[{ "id": 12, "comment": "Hey there" }]']);
    
            var callback = sinon.spy();
            myLib.getCommentsFor("/some/article", callback);
            this.server.respond();
    
            sinon.assert.calledWith(callback, [{ id: 12, comment: "Hey there" }]));
        }
    }		

    public by JKCPR modified Mar 31, 2018  485  0  4  0

    Fibonacci meh

    Loops over the Fibonnaci sequence...might be useful in an interview.
     
    function fibonacci(num, memo) {
      memo = memo || {};
    
      return memo[num]? memo[num]: num < 2? 1: memo[num] = fibonacci(num - 1, memo) + fibonacci(num - 2, memo);
    }
        for(var i=0;i<100;i=i+1){
            this.console.log(fibonacci(i));
        }

    public by JKCPR modified May 12, 2017  419  1  5  1

    is your DOM classy? Wouldn't your console like to know...

    Intended as Dev Tool to be utilised in the browser console so that refactoring your messy CSS can be less hurty.
    ;( 
      function (){
      "use strict";
    
      //get ALL DOM elements => BODY > *, BODY *
      var elms = document.body.getElementsByTagName("*"),
          i = elms.length,
          arr = [],
          classArray;
      
      //iterate, isolate, finally indicate
      while( i-- ) {
          classArray = elms[i].className.split(/\s+/);
          if (classArray.length > 1) {
              arr.push( classArray[1] );
          }
      }
      
      console.log( arr.join(',') );
      return arr;
      
    })();

    public by JKCPR modified Oct 31, 2016  2152  2  5  1

    Matching Height - using CSS @element query

    A simple elegant solution to matching element heights using the @element query.
    //  Some html setup required
    /*
        <div id=thing1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, temporibus consequuntur velit dolor! Eos animi molestias  found here <a href="http://codepen.io/tomhodgins/pen/yadeXV"> thanks Tommy </a>aliquid eum error officiis vel et saepe a facilis, voluptate dignissimos nam assumenda, deleniti.</div>
        <div id=thing2>This one doesn't have as much text as id=thing1… so it's set to 100eh, or 100 element height units for #thing1, which makes it the same height.</div>
    */
    
    div {
      margin: 1em 0;
      width: 50%;
      float: left;
      color: black;
      background: lime;
    }
    #thing2 {
      background: red;
    }
    @element '#thing1' {
      #thing2 {
        height: 100eh;
      }
    }

    public by JKCPR modified Sep 20, 2016  8727  1  5  1

    AngularJS 'Ctrl as vm' pattern

    Within controller use 'var varname' if it is only needed internally, anything which needs to be bound to the ViewModel uses 'vm.varname' because in 'Controller as vm' pattern you forego using $scope to bind to the ViewModel and instead use the vm.object instead. Sometimes $scope is necessary but less so using this pattern....vm is readable and conv
    // AngularJS 'Controller As vm' pattern
    <script>
    (function(){
      "use strict";
    
      var app = angular.module('app')
        .controller('Customers', [function() {
          var vm = this; //this is implicitly bound to controller's scope
      
          vm.title = 'Customers';
          vm.customers = [
            {name: 'Haley'}, {name: 'Ella'}, {name: 'Landon'}, {name: 'John'}
            ];
        }])
        .controller('Shells', [function() {
          var vm = this; //this need not be named identically as in HTML
      
          vm.title = 'Shells';
          vm.shells = [
            {name: 'Main Shells'}, {name:'Half Shells'},{name: 'Quarter Shells'}
          ];
        }]);
    })();
    </script>
    
    <div ng-controller="Shell as shellVm">
      <h1>{{  shellVm.title }}</h1>
      <article ng-controller="Customers as customersVm">
        <h2> {{ customersVm.title }} in </h2>
        <ul ng-repeat="c in customersVm.customers">
          <li>{{ c.name }}</li>
        </ul>
      </article>
    </div>

    public by JKCPR modified May 31, 2016  2901  1  5  1

    @each Sass Directive - processing icons

    A nice DRY approach to writing your huge icon collection into stylesheets
    // @each Sass Directive
    $icon-names: (twitter '\e004' ), (facebook '\e005' ), (gplus '\e006' );
    
    %ico-font-base {
        font-family: 'ico-fonts';
        speak: none;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        text-transform: none;
        
        //Better Font Rendering
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    
    @each $icon-name in $icon-names {
        .icon-#{nth($icon-name, 1)}:after {
            @extend %ico-font-base;
            content: nth($icon-name, 2);
        }
    }        

    public by JKCPR modified May 27, 2016  2897  1  5  1

    Sass a:pseudo state @mixin

    =linx ($link, $visit, $hover, $active) 
      a 
        color: $link
        font-weight: bolder
        &:visited 
          color: $visit
        
        &:hover 
          color: $hover
        
        &:active 
          color: $active
    $a-tags: 'a, a:link, a:visited'
    $a-tags-hover: 'a:active, a:hover'
     
    #{$a-tags} #{$a-tags-hover} 
      text-decoration: none
      
    ul li
      +linx(#E4EAEA, #0cc, #c0c, #cc0)

    public by JKCPR modified May 27, 2016  3002  5  5  1

    SCSS button power @mixin

    one $color variable generates all buttons by @mixin and color @functions also leverages %placeholders and %placeholder-selectors
    //core values
    $font-size:16;
    $primary: #0085B7;
    $success: adjust_hue($primary, 260);
    $warning: saturate(adjust_hue($primary, 188), 43);
    $alert: lighten(saturate(adjust_hue($primary, 162), 12), 1);
    
    // function
    @function em($target, $context:$font-size){
      @return ($target/$context) * 1em;
    }
    
    //!default values
    $button-colour: $primary !default;
    $button-text-color: white !default;
    $button-line-height: 32 !default;
    $button-border-radius: 3 !default;
    $button-padding: 30 !default;
    $button-font-size: 24 !default;
    $button-weight: bold !default;
    
    //the btn mixin
    @mixin default-button($color: $button-text-color,
      $line-height: $button-line-height,
      $radius: $button-border-radius,
      $padding: $button-padding,
      $font-size: $button-font-size,
      $weight: $button-weight){
      
      color: $color;
      line-height: em($line-height);
      border-radius: em($radius);
      padding: 0 em($padding);
      font-size: em($font-size);
      font-weight: $weight;
    }
    
    @mixin flat-button($color: $button-color){
      $highlight-color: lighten($color, 50%);
      $shadow-color: grayscale(transparentize($color, 0.1));
    
      background-color: $color;
      border: 1px solid darken($color, 10%);
      text-shadow: 0px 1px 1px darken($color, 20%);
      box-shadow: 0 em(2) em(6) 0 $shadow-color;
      &:hover{
        background-color: darken($color, 5%);
        text-shadow: 1px 1px 1px darken($highlight-color, 5%);
      }
    }
    
    //placeholder selector
    %default-button{
      @include default-button;
    }
    .primary{
      @extend %default-button;
      @include flat-button($primary);  
    }
    .success{
      @extend %default-button;
      @include flat-button($success);
    }
    .warning{
      @extend %default-button;
      @include flat-button($warning);
    }
    .alert{
      @extend %default-button;
      @include flat-button($alert);
    }

    public by JKCPR modified Apr 12, 2016  2247  0  5  0

    Relational Operators

    These are primarily used to compare numeric and date/time types.
    // < less than
    // <= less than or equal to
    // > greater than
    // >= greater than or equal to
    
    SELECT <columns> FROM <table> WHERE <column name> < <value>;
    
    SELECT <columns> FROM <table> WHERE <column name> <= <value>;
    
    SELECT <columns> FROM <table> WHERE <column name> > <value>;
    
    SELECT <columns> FROM <table> WHERE <column name> >= <value>;

    public by JKCPR modified Apr 12, 2016  2345  0  5  1

    SQL query SELECT * WHERE clause AND / OR compare conditionally

    Compare multiple values in a WHERE condition. Test that both conditions are true using the AND keyword, alternatively whether either conditions are true using the OR keyword.
    SELECT <columns> FROM <table> WHERE <condition 1> AND <condition 2> ...;
    SELECT <columns> FROM <table> WHERE <condition 1> OR <condition 2> ...;
    
    //Examples:
    SELECT username FROM users WHERE last_name = "Kong" AND first_name = "King";
    
    SELECT * FROM products WHERE category = "Insects" AND price < 100;
    
    SELECT * FROM movies WHERE title = "The Matrix" OR title = "The Blues Brothers" OR title = "2 IDs 1 Row";
    
    SELECT country FROM countries WHERE population < 3 OR population > 1;
    • Public Snippets
    • Channels Snippets