Skip to content

Instantly share code, notes, and snippets.

Scott Jehl scottjehl

Block or report user

Report or block scottjehl

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@scottjehl
scottjehl / notes.md
Last active Oct 17, 2016
Notes from Wes Bos's talk on web tooling
View notes.md

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:

@scottjehl
scottjehl / noncritcss.md
Last active Jul 22, 2019
Comparing two ways to load non-critical CSS
View noncritcss.md

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:

@scottjehl
scottjehl / gist:9834615
Created Mar 28, 2014
wrap snippets in slack (add to a chrome Stylish userstyle)
View gist:9834615
.snippet_meta {
overflow-x: visible;
}
.snippet_preview pre {
line-height: 1.5;
white-space: pre-wrap;
}
View making-the-grumpicon.md

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

@scottjehl
scottjehl / fonts.js
Created Apr 17, 2013
current font loading snippet
View fonts.js
...
// 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;
}
@scottjehl
scottjehl / head.html
Created Feb 20, 2013
simple & qualified async script load
View head.html
<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" );
@scottjehl
scottjehl / tmplmeta.md
Created Jan 25, 2013
Template meta tag pattern for template-based decisions
View tmplmeta.md

I've been finding this little meta[name='tmpl'] pattern useful lately when making template-based decisions in JS, such as when loading a particular file or set of files that are needed only on a particular page of a site.

First, in the HTML of a particular template, like say, a search result page:

<head>
  ...
  <meta name="tmpl" content="searchresult">
</head>
@scottjehl
scottjehl / appcache.md
Created Dec 10, 2012
HTML5 Appcache Feature Request
View appcache.md

In response to @jaffathecake's tweet

One feature that would be extremely helpful when building with HTML5 appcache would be to request that an HTML document that references an offline cache always fetches content from the server (per ordinary caching header rules) when the network connection is available, and only "offline" when the server cannot be reached.

An example use case would be simple HTML document that refreshes regularly, yet should be available to browse offline, should the connection drop upon refreshing the page.

Here's a use case we had when building an app on BostonGlobe.com: Our app's homepage began as a simple list of a user's bookmarked links to articles, which were available to any device (JS or no JS). That list of articles would change constantly as a user bookmarked and removed bookmarks throughout the site. In modern browsers, that same list page would be enhanced into an application in which all of the bookmarked artic

View Vectron.txt
/'
//
. //
|\//7
/' " \
. . .
| ( \
| '._ '
/ \'-'
____[\`---'/]____
You can’t perform that action at this time.