Skip to content

Instantly share code, notes, and snippets.

Avatar

Scott Jehl scottjehl

View GitHub Profile
@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") )
@scottjehl
scottjehl / inert-unert.js
Created Aug 5, 2020
inert-unert.js: a quick utility for applying or removing the inert property
View inert-unert.js
// 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 ){
@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 / notes.md
Last active Feb 27, 2021
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 Apr 24, 2021
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" );