Wilto

/* Column Styles */
.col {
	margin: 0 auto;
	clear: both;
	padding: 5.55555555% 3.7037037%;
}
.col-condensed {
	clear: both;
	padding: 7.4074074%;
}

ryanflorence

Hi Zach :D

Modals are funny beasts, usually they are a design cop-out, but that's okay, designers have to make trade-offs too, give 'em a break.

First things first, I'm not sure there is such thing as a "simple" modal that is production ready. Certainly there have been times in my career I tossed out other people's "overly complex solutions" because I simply didn't understand the scope of the problem, and I have always loved it when people who have a branch of experience that I don't take the time

WickyNilliams

So you want to publish a react component?!

This is a quick guide of what you need to do to publish a react component for use by others. This guide is distilled from a conversation [0] on twitter. I will reference individual tweets, where appropriate (thereby shifting blame for incorrect advice from me to the authors :D)

Assumptions

1. You are using some sort of module system in your source
2. You have a build step
3. You want broad support for your component (browser-ready, npm compatible, consumable by bower)

nathansmith

CSS Pre-Processing

When it comes to languages that power the web, CSS is a double-edged sword. Often heralded for being quick to learn, like chess it takes awhile to master. Due to its simplicity, it is easy to get to a point where CSS files become unruly, mired by code repetition and lack of consistency.

Enter CSS pre-processors (and post-processors). Of all the CSS pre-processing approaches, Sass (Syntactically Awesome Style Sheets) is the clear front-runner.

http://sass-lang.com

Metaphorically, Sass is to CSS what jQuery is to JavaScript. Not only that, Sass gives CSS a seat at the table of first-class programming languages.

mpiotrowicz

A messy intro into VoiceOver - OS X's built-in screen reader

Browsers

• works best with Safari!

Getting Started

• cmd+f5 to turn on
• Remember the "VoiceOver Key" (VO) opt + control
• To navigate into a page, VO + shift + down arrow
• To navigate all page links, hit tab throughout

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

maximilianschmitt

Compiling your ES6 command line apps to work with node.js

This post has moved to my personal blog: http://maximilianschmitt.me/posts/compile-es6-command-line-apps/

davidhund

NOTE I'm trying to find the most optimal fav/touch icon setup for my use-cases. Nothing new here. Read Mathias Bynens' articles on re-shortcut-icon and touch icons, a FAQ or a Cheat Sheet for all the details.

I'd like to hear how you approach this: @valuedstandards or comment on this gist.

The issue

You have to include a boatload of link elements pointing to many different images to provide (mobile) devices with a 'favicon' or 'touch icon':

![Touch Icon Links](https://o.twimg.com/2/proxy.jpg?t=HBj6AWh0dHBzOi8vcGhvdG9zLTYuZHJvcGJveC5jb20vdC8yL0FBRGFGY1VRN1dfSExnT3cwR1VhUmtaUWRFcWhxSDVGRjNMdXFfbHRJWG1GNFEvMTIvMjI3OTE2L3BuZy8xMDI0eDc2OC8yL18vMC80L1NjcmVlbnNob3QlMjAyMDE1LTA0LTE0JTIwMTYuNTYuMjYucG5nL0NNejBEU0FCSUFJZ0F5Z0JLQUkvNGR1eDZnMzZmYnlzYWI3

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)); };

imjasonh

* {
    font-size: 12pt;
    font-family: monospace;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    color: black;
    cursor: default;
}