Scott Jehl scottjehl

d

Notes from @wesbos's talk:

Our frontend workflow is changing quickly and for good reasons. Tooling for tooling sake is a waste, but don't overlook the utility of modern dev tooling workflows - these are great, useful tools that are letting us improve our workflows in standards-based, forward-looking ways.

Trend: Frontend developers are moving to using package managers (npm) for client-side code (CSS and JS), much like we have been for managing our build tooling itself. I can attest to this being hugely helpful at Filament Group on client-side code, especially now that so many of our projects are on npm (https://www.npmjs.com/~filamentgroup ).

Yay, another talk that recommends loadCSS for performance. Nice to hear :)

Gulp tasks to use:

I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.

TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/

For async JavaScript file requests, we have the async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).

Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:

First, a note from Filament Group: We recently released Grumpicon, a web app for easy use of our command-line SVG workflow, Grunticon. You can read more about Grumpicon in our release post here: Introducing Grumpicon. We'd been wanting to build this application for a while and had yet to find the time to do so. Since this was a tool designed strictly for web developers and we wanted it to be portable enough to easily run anywhere – locally or on a remote server – we decided that the first pass at the app could be built in JavaScript alone, without any reliance on server-side technology. We posted the following requirements for the proposed app in an issue in the Grunticon repo, and posted a link to it for help on Twitter:

It'd be cool if we could drop a folder of svgs on the browser and get a zip file of [typical Grunticon

	var list = [];
	document.querySelectorAll("body *")
	.forEach(function(elem){
	if(elem.getBoundingClientRect().width > document.body.getBoundingClientRect().width){
	list.push(elem.outerHTML.split('>')[0] + '>');
	}
	});
	confirm( "these elements are wider than the viewport:\n\n " + list.join("\n") )

	// inert-unert.js: a quick utility for applying or removing the inert property
	// - @scottjehl, @filamentgroup
	// (note: inert support polyfill is still needed in some browsers)
	// usage:
	// when a modal element such as a dialog is active,
	// this function will make unrelated elements inert, aiming to affect as few as possible
	// example: inert( document.querySelector(".modal-open") );
	function inert( allButThisElement ){
	function inertSiblings( node ){
	if( node.parentNode ){


	\|￣￣￣￣￣￣￣￣￣￣￣￣\|
	\| WEARING A MASK \|
	\| IS THE EASIEST \|
	\| WAY TO SHOW YOU \|
	\| WANT THINGS TO \|
	\| RETURN TO NORMAL \|
	\|＿＿＿＿＿＿＿＿＿＿＿＿\|
	\|\|
	(\__/) \|\|

	.snippet_meta {
	overflow-x: visible;
	}
	.snippet_preview pre {
	line-height: 1.5;
	white-space: pre-wrap;
	}

	...
	// test for font-face version to load via Data URI'd CSS
	// Basically, load WOFF unless it's android's default browser, which needs TTF, or ie8-, which needs eot
	var fonts = ns.files.css.fontsWOFF,
	ua = win.navigator.userAgent;

	// android webkit browser, non-chrome
	if( ua.indexOf( "Android" ) > -1 && ua.indexOf( "like Gecko" ) > -1 && ua.indexOf( "Chrome" ) === -1 ){
	fonts = ns.files.css.fontsTTF;
	}

	<head>
	....
	</head>
	<script>
	(function( w ){
	var doc = w.document,
	// quick async script inject
	ref = doc.getElementsByTagName( "script" )[0],
	loadJS = function( src ){
	var elem = doc.createElement( "script" );