n1k0

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

patkujawa-wf

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

kdzwinel

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

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

davatron5000

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

arlodesign

1. Download this gist into a csscompare folder

2. npm install

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

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

|- package.json

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

jdsteinbach

node_modules

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

ryanflorence

Turning Off Github Issues

My friend Michael Jackson turned off github issues on one of his smaller projects. It got me thinking...

Maintainers getting burned out is a problem. Not just for the users of a project but the mental health of the maintainer. It's a big deal for both parties. Consumers want great tools, maintainers want to create them, but maintainers don't want to be L1 tech support, that's why they