Skip to content

Instantly share code, notes, and snippets.

View boldfacedesign's full-sized avatar

David Parker boldfacedesign

View GitHub Profile
@ebidel
ebidel / imports_timing.js
Last active March 24, 2016 19:21
HTML Imports Resource Timing performance
// Know how fast your HTML Imports are.
// crbug.com/505279 - doesn't show sub-import resources.
var imports = document.querySelectorAll('link[rel="import"]');
[].forEach.call(imports, function(link) {
var entries = performance.getEntriesByName(link.href);
console.info('=== HTML Imports perf ===');
entries.forEach(function(e) {
console.log(e.name, 'took', e.duration, 'ms');
});
});
@chantastic
chantastic / on-jsx.markdown
Last active November 10, 2024 13:39
JSX, a year in

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

@boldfacedesign
boldfacedesign / .exe symlink
Created June 4, 2014 10:46
Create symlink to executable files
// sprite mixin that can be used to include a sprite into media queries
// @include get-sprite($map, $sprite, $height, $width, $offset-x, $offset-y, $repeat);
// $map is the name of the sprite map, this is auto-generated as a global
// sass var when you do a (for instance) @import "sprites-x2/*.png"
// ----------
// Example: @include get-sprite($sprites-x2-sprites, logo, false, false);
//
@mixin get-sprite($map, $sprite, $height: true, $width: true, $offset-x: 0, $offset-y: 0, $repeat: no-repeat) {
//http://compass-style.org/reference/compass/helpers/sprites/#sprite-file