paulirish

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

1. Launch quicktime player
2. do Screen recording

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

ryanflorence

var Dialog = React.createClass({
  render: function() {
    // 1) render nothing, this way the DOM diff will never try to do
    //    anything to it again, and we get a node to mess with
    return React.DOM.div();
  },

  componentDidMount: function() {
    // 2) do DOM lib stuff
    this.node = this.getDOMNode();

kangax

console.highlight = function(text, sample) {
  var escapedSample = sample.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
  var reSample = new RegExp(escapedSample, 'g');
  var args = [''];
  var highlightedText = text.replace(reSample, function(match) {
    args.push('background-color: #ffc', 'background-color: none');
    return '%c' + match + '%c';
  });
  args[0] = highlightedText;
  console.log.apply(console, args);

xem

codegolf JS

Mini projects by Maxime Euzière (xem), subzey, Martin Kleppe (aemkei), Mathieu Henri (p01), Litterallylara, Tommy Hodgins (innovati), Veu(beke), Anders Kaare, Keith Clark, Addy Osmani, bburky, rlauck, cmoreau, maettig, thiemowmde, ilesinge, adlq, solinca, xen_the,...

(For more info and other projects, visit http://xem.github.io)

(Official Slack room: http://jsgolf.club / join us on http://register.jsgolf.club)

xem

Introduction

Every single component of the Web handles strings, and especially Unicode characters encoding, differently.

This document aims to gather all the important information about character encodings on the Web.

File charsets

callumacrae

List of JavaScript Build Tools

Yet another framework syndrome

Name	Date	URL	Stars
Jake	April 2010	https://github.com/mde/jake	1000
Brunch	January 2011	http://brunch.io/	3882
smoosh	March 2011	https://github.com/fat/smoosh	329
anvil.js	February 2012	https://github.com/anviljs/anvil.js	161

tj

/**
 * POST to create a new user.
 */

exports.create = function *(){
  var body = yield parse(this);

  // password
  var pass = body.password;
  assert(pass, 400, 'password is required');

rauschma

function newOperator(Constr, args) {
    var inst = Object.create(Constr.prototype);
    var result = Constr.apply(inst, args);
    if (typeof result === 'object' && result !== null) {
        return result;
    }
    return inst;
}

rauschma

/**
 * Create an array with `len` elements.
 * 
 * @param [initFunc] Optional: a function that returns
 * the elements with which to fill the array.
 * If the function is omitted, all elements are `undefined`.
 * `initFunc` receives a single parameter: the index of an element.
 */
function initArray(len, initFunc) {
    if (typeof initFunc !== 'function') {