Cristiano Rastelli didoo

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

Download this gist into a csscompare folder
npm install

Create before and after folders. Your folder should now look like this:

 - /csscompare
 |- /after
 |- /before
 |- /npm_modules
 |- index.js

|- package.json

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

If you want to get the difference between two branches, say master and branch-name, use the following command: git diff master..branch-name

If you want that same diff in a patch, because patches are handy, just add the output redirect: git diff master..branch-name > branch-name.patch

If you need to import that patch into something like Crucible then you'll need to get rid of the a and b prefixes that git adds: git diff --no-prefix master..branch-name > branch-name.patch

Put test1.js and test2.js into a tests/ directory, then run the suite:

$ casperjs test tests/ --pre=pre.js --includes=inc.js --post=post.js
Test file: /Users/nperriault/tmp/pre-inc/pre.js                                 
Hey, I'm executed before the suite.
Test file: /Users/nperriault/tmp/pre-inc/tests/test1.js                         
# this is test 1
Hi, I've been included.
PASS Subject is strictly true

	<div id="styleguide-icon-grid"></div>
	<object data="/assets/icons.svg" id="svgembed" height=0; width=0></object>

	<script>
	var grid = document.querySelector('#styleguide-icon-grid');
	var tmpl = '<div class="item"><svg class="icon"><use xlink:href="/assets/icons.svg#{id}"></use></svg><span>#{id}</span></div>';

	function svgloaded() {
	var svgEmbed = document.querySelector("#svgembed");
	var svg = svgEmbed.getSVGDocument();

	function reloadCSS() {
	const links = document.getElementsByTagName('link');

	Array.from(links)
	.filter(link => link.rel.toLowerCase() === 'stylesheet' && link.href)
	.forEach(link => {
	const url = new URL(link.href, location.href);
	url.searchParams.set('forceReload', Date.now());
	link.href = url.href;
	});