Skip to content

Instantly share code, notes, and snippets.

Avatar

Scott Jehl scottjehl

View GitHub Profile
@scottjehl
scottjehl / notes.md
Last active Aug 9, 2022
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 / hideaddrbar.js
Created Aug 31, 2011
Normalized hide address bar for iOS & Android
View hideaddrbar.js
/*
* Normalized hide address bar for iOS & Android
* (c) Scott Jehl, scottjehl.com
* MIT License
*/
(function( win ){
var doc = win.document;
// If there's a hash, or addEventListener is undefined, stop here
if( !location.hash && win.addEventListener ){
@scottjehl
scottjehl / noncritcss.md
Last active Jan 27, 2022
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 / getViewportSize.js
Created Mar 16, 2012
Reliably get viewport dimensions in JS
View getViewportSize.js
/*!
An experiment in getting accurate visible viewport dimensions across devices
(c) 2012 Scott Jehl.
MIT/GPLv2 Licence
*/
function viewportSize(){
var test = document.createElement( "div" );
test.style.cssText = "position: fixed;top: 0;left: 0;bottom: 0;right: 0;";
@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;
}
@scottjehl
scottjehl / whichones.js
Created Aug 21, 2020
which elements are wider than the viewport?
View whichones.js
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") )
View Vectron.txt
/'
//
. //
|\//7
/' " \
. . .
| ( \
| '._ '
/ \'-'
____[\`---'/]____
@scottjehl
scottjehl / delayedEnter, delayedLeave, and delayedHover.js
Created Mar 2, 2011
Hoverintent-like events using special events pattern so they can be used via bind and live
View delayedEnter, delayedLeave, and delayedHover.js
/*
* jQuery special events for delayedEnter, delayedLeave, and delayedHover
* Author: Scott Jehl, scott@filamentgroup.com
* Copyright (c) 2011 Filament Group
* licensed under MIT
* note: Each event can be used with bind or live event handling as you would use mouseenter,mouseleave, and hover
* events fire after 200ms timeout
*/
(function($){
//delayedEnter event
@scottjehl
scottjehl / masks.txt
Last active Feb 27, 2021
Go away coronavirus
View masks.txt
| ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄|
| WEARING A MASK |
| IS THE EASIEST |
| WAY TO SHOW YOU |
| WANT THINGS TO |
| RETURN TO NORMAL |
|____________|
||
(\__/) ||
@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" );