AllThingsSmitty

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding-top: 250px;
}
header {
  padding-top: 50px;
  height: 300px;

AllThingsSmitty

html,
body {
  height: 100%;
  line-height: 1.5;
}
.wrap {
  display: box;
  display: flex;
  height: 100vh;
}

AllThingsSmitty

// Get a simple array of objects
var drinks = [
  { 'name': 'Coke', 'quantity': 2 },
  { 'name': 'Red Bull', 'quantity': 6 }
];
 
// Get all the drink names using the _.pluck() function
var currentDrinks = _.pluck(drinks, 'name');
console.log(currentDrinks);
// → ['Coke', 'Red Bull']

AllThingsSmitty

(function () {
  'use strict';
  
  var Λ_Λ = console.log,
    ಠ_ಠ = "feeling happy",
    ↂ = "look mom no hands",
    iǃ = Infinity,
    Θ_Θ = "hey buddy",
    Ψ = function(e){throw e;};
  

AllThingsSmitty

var runSequence = require('run-sequence'); // https://www.npmjs.com/package/run-sequence
 
//Each successive argument waits for the previous task(s) to finish
gulp.task('some-task', function () {
  runSequence(
   ['task-1', 'task-2', 'task-3'], // These 3 can be done in parallel
   'task-4', // ...then just do this
   ['task-5', 'task-5'], // ...then do these things in parallel
   'task-6', // ...then do this
   // ...

AllThingsSmitty

/*
@supports(test condition) {
  apply rules
}
@supports not(test condition) {
  apply rules
}
*/
/* use CSS variable */
@supports (background-color: var(--bg-color)) { /* support: http://caniuse.com/#feat=css-variables */

AllThingsSmitty

/* old Sass 3.3 */
/* nest keyframe rules inside their modules with `@at-root` */
.bunny {
  animation: hop 2s ease-in-out infinite, 
    move 6s ease-out forwards;

  @at-root {
    @keyframes hop { 
      50%  { transform: translateY(40px); }
    }

AllThingsSmitty

// localStorage example
var hasStorage = (function () {
  try {
    localStorage.setItem(mod, mod);
    localStorage.removeItem(mod);
    return true;
  } catch (exception) {
    return false;
  }
}());

AllThingsSmitty

var getAbsoluteUrl = (function () {
  var a;

  return function (url) {
    if(!a) a = document.createElement('a');
    a.href = url;
    
    return a.href;
  };
})();

AllThingsSmitty

// Using the unique-id() function with a simple mixin you only have to provide keyframe values, not names
@mixin animation-keyframes {
  $animation-name: unique-id();
  animation-name: $animation-name;
  @keyframes #{$animation-name} {
    @content;
  }
}
.some-element {
  animation: 10s linear infinite;