adamnorwood

/*
    Gruntfile for Pattern Lab + Compass + Live Reload via grunt-browser-sync

    Set up to use browser-sync because for the life of me I can't get
    the grunt-contrib-watch livereload to *inject* the compiled CSS changes
    to the browser (as opposed to livereload doing a full page refresh)...
    
    (To be clear, the CSS injection I'm talking about is where changes to
    the CSS file are slipped in to the browser very quickly with no
    full page reload, and without losing your place if you've scrolled

bollwyvl

Timeline for reveal

---

Basic use case

• make a timeline (video)
  • save it someplace reveal.js can find it (maybe next to your presentation, or on Google Docs)
• in reveal.js/index.html
• add reveal-timeline.js as a dependency

adamnorwood

/*
    Gruntfile for Pattern Lab + Compass + LiveReload

    This is a sample Gruntfile for integrating Pattern Lab's template
    regeneration with Compass and LiveReload.

    I've found that using the Chrome LiveReload extension is slow as it
    forces a full-page browser reload instead of using CSS injection. This
    Gruntfile setup seems to work great, though, if you use the LiveReload
    JS snippet instead. Just add this script right before the closing

funzeye

<figure>
  <?php 
  $image = get_field('your_image_field_name');
  $atts = array(
    'imageid' => $image, 
    'size1' => '0', 
    'size2' =>'600', 
    'size3' =>'1000'
  );  
  echo tevkori_responsive_shortcode($atts) ; ?>              

staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

addyosmani

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

ericelliott

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

xPaw

// ==UserScript==
// @name           Ignore whitespace button on GitHub
// @description    Adds a button in GitHub UI to ignore whitespace changes in commits
// @author         xPaw
// @namespace      https://gist.github.com/xPaw/de6ee132a2e267ef6960
// @updateURL      https://gist.github.com/xPaw/de6ee132a2e267ef6960/raw/github_whitespace_button.user.js
// @match          https://github.com/*
// @version        1.6.1
// @run-at         document-end
// @grant          none

johnbillion

INITIALISATION
==============

load wp-config.php
set up default constants
load wp-content/advanced-cache.php if it exists
load wp-content/db.php if it exists
connect to mysql, select db
load object cache (object-cache.php if it exists, or wp-include/cache.php if not)
load wp-content/sunrise.php if it exists (multisite only)

paulirish

/* bling.js */
window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
NodeList.prototype.__proto__ = Array.prototype;
NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };