Explore Public Snippets

{
    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" }]));
    }
}		

 
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));
    }

;( 
  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;
  
})();

//  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;
  }
}

// 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>

// @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);
    }
}        

=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)

//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);
}

// < 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>;

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;