chantastic

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

paulirish

/* bling.js */

window.$ = document.querySelectorAll.bind(document);

Node.prototype.on = window.on = function (name, fn) {
  this.addEventListener(name, fn);
}

NodeList.prototype.__proto__ = Array.prototype;

getify

// please comment if you know of other BOOKS (not considering blogs just yet) on ES6 that are out or coming out

• Understanding ECMAScript 6 -- Nicholas Zakas
• Exploring ES6 -- Axel Rauschmayer
• YDKJS: ES6 & Beyond -- Kyle Simpson
• JS.next: A Manager's Guide -- Aaron Frost
• Expert JavaScript -- Mark E. Daggett
• JavaScript Allongé, The "Six" Edition -- Reginald Braithwaite
• Learning ECMAScript 6 -- Narayan Prusty

ivolivares

// Generates a URL-friendly "slug" from a provided string.
// For example: "This Is Great!!!" transforms into "this-is-great"
function generateSlug (value) {
  // 1) convert to lowercase
  // 2) remove dashes and pluses
  // 3) replace spaces with dashes
  // 4) remove everything but alphanumeric characters and dashes
  return value.toLowerCase().replace(/-+/g, '').replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
};

koistya

File and folder naming convention for React.js components

Directory Layout #1

/actions/...
/components/common/Link.js
/components/common/...
/components/forms/TextBox.js
/components/forms/TextBox.res/style.css

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

incompl

var $ = function(selector, context) {
  if (context === undefined) {
    context = document;
  }
  var nl = context.querySelectorAll(selector);
  return Array.prototype.slice.call(nl);
};

incompl

<meta name="viewport" content="width=device-width">

bradfrost

module.exports = function(grunt) {

    // Configuration 
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        concat: {
            dist: {
				src: [
					'source/js/libs/*.js', // All JS in the libs folder

Basemm

/**
 * Read file line by line "synchronous"
 * 
 * require nodejs ~0.11, run with "node --harmony"
 *
 * Example: 
 *
 * var readLineSync = require('./readLineSync');
 * 
 *