Skip to content

Instantly share code, notes, and snippets.

View scottjehl's full-sized avatar

Scott Jehl scottjehl

2.4k followers · 36 following
View GitHub Profile
@scottjehl
scottjehl / whichones.js
Created August 21, 2020 15:40
which elements are wider than the viewport?
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 August 5, 2020 21:28
inert-unert.js: a quick utility for applying or removing the inert property
// 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 February 27, 2021 23:40
Go away coronavirus
|￣￣￣￣￣￣￣￣￣￣￣￣|
| WEARING A MASK |
| IS THE EASIEST |
| WAY TO SHOW YOU |
| WANT THINGS TO |
| RETURN TO NORMAL |
|＿＿＿＿＿＿＿＿＿＿＿＿|
||
(\__/) ||
@scottjehl
scottjehl / test.md
Created February 28, 2017 19:31
test

d

@scottjehl
scottjehl / notes.md
Last active August 9, 2022 09:31
Notes from Wes Bos's talk on web tooling

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 August 12, 2023 16:57
Comparing two ways to load non-critical CSS

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 March 28, 2014 14:50
wrap snippets in slack (add to a chrome Stylish userstyle)
.snippet_meta {
overflow-x: visible;
}
.snippet_preview pre {
line-height: 1.5;
white-space: pre-wrap;
}
@scottjehl
scottjehl / making-the-grumpicon.md
Last active December 19, 2015 06:18 — forked from ericponto/making-the-grumpicon
Making the Grumpicon

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 April 17, 2013 19:04
current font loading snippet
...
// 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 February 20, 2013 17:18
simple & qualified async script load
<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" );