JKCPR
JKCPR
Reputation Top 1%
Jake Cooper
25 Snippets  (20th place)
Published
1 Channel
Created
21 Channels
Following
May 12, 2017
Last Visit
Jul 26, 2014
Registered
845 points  (24th place)
Reputation
Top 5% Publisher
Junior Code Generator
Serious Code Generator
Senior Code Generator
Junior Publisher
Serious Publisher
Senior Publisher
Junior Topic Hub
Junior Trend Maker
Serious Trend Maker
Junior Judge
Serious Judge
Senior Judge
Senior Popular Coder
Junior Autobiographer
Master Autobiographer

Recent Snippets See all snippets by JKCPR

public by JKCPR created May 12, 2017  69  0  4  2

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 created Oct 31, 2016  151  1  4  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 created Sep 20, 2016  746  1  4  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 created May 31, 2016  204  1  4  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 created May 27, 2016  244  1  4  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)
;