working on it ...
Explore Public Snippets
Found 27 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" }])); } }
public by JKCPR 536 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 465 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 2207 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 8770 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 2948 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); } }
=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 3053 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 2305 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 2391 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;