Skip to content

Instantly share code, notes, and snippets.

Avatar

jakub-g jakub-g

View GitHub Profile
@jakub-g
jakub-g / _1_"script async defer" blocks "load" event.md
Last active May 6, 2021
Beware of "script async defer" blocking HTML "load" event
View _1_"script async defer" blocks "load" event.md

Beware of <script async defer> blocking HTML "load" event

2015.10.07 t

On the importance of simulated latency testing, and bulletproofing your page from the third-party JS load failures

TL;DR

@jakub-g
jakub-g / 1-unicode-js-regex.md
Last active May 3, 2021
Unicode-aware JavaScript regex cheat sheet
View 1-unicode-js-regex.md

Unicode-aware JavaScript regex (Unicode property escapes /\p{..}\P{..}/u) cheat sheet

Browser support MDN

@jakub-g
jakub-g / double-fetch-triple-fetch.md
Last active Apr 30, 2021
Will it double-fetch? Browser behavior with `module` / `nomodule` scripts
View double-fetch-triple-fetch.md
@jakub-g
jakub-g / safari-release-notes-history+stable-technical-preview-mapping.md
Last active Apr 28, 2021
Mapping Safari releases to Safari TP versions
View safari-release-notes-history+stable-technical-preview-mapping.md
@jakub-g
jakub-g / async-defer-module.md
Last active Apr 23, 2021
async scripts, defer scripts, module scripts: explainer, comparison, and gotchas
View async-defer-module.md

<script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.

This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.

If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!

Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)

@jakub-g
jakub-g / wpt_wishlist.md
Last active Mar 24, 2021
WebPageTest wishlist 2021
View wpt_wishlist.md

0. Filmstrip page

  • There's no link back to waterfall page
  • Custom end time URL param is not validated. I can put -e:99 and will have 99s worth of filmstrip images (while the test was shorter than that)

1. Re-run the test equivalent which allows changing config

Sometimes I have very elaborate test config which I want to reuse, but slightly change one thing (e.g. add one param to URL). I can easily re-run the test with exact same config, but it's not easy to slightly change config and re-run. You need to re-create the config from scratch by checking multiple checkboxes, and hoping you come up with same exact set of params as before

@jakub-g
jakub-g / perf_observer_support.md
Last active Mar 22, 2021
PerformanceObserver.supportedEntryTypes
View perf_observer_support.md

Test query

({a: window.PerformanceObserver.supportedEntryTypes, b: window.PerformancePaintTiming, c: navigator.userAgent})

Safari

A TP blog says shipped in TP75 which would mean 12.1 stable but I tested in 12.1 and it's not true. It returns undefined. So I asssume 13.0 (I don't have 13.0 to test).

@jakub-g
jakub-g / cleanEmptyFoldersRecursively.js
Created Apr 3, 2015
nodejs: remove empty directories recursively
View cleanEmptyFoldersRecursively.js
function cleanEmptyFoldersRecursively(folder) {
var fs = require('fs');
var path = require('path');
var isDir = fs.statSync(folder).isDirectory();
if (!isDir) {
return;
}
var files = fs.readdirSync(folder);
@jakub-g
jakub-g / intro.md
Last active Mar 11, 2021
preact-redux: where can `props` come from
View intro.md
import { compose } from 'redux'
import { connect } from 'react-redux'

compose

compose(func1, func2, func3, func4) === func1(func2(func3(func4))))
@jakub-g
jakub-g / es-modules-tooling-config.md
Last active Mar 2, 2021
Configure popular tools to work with ES modules
View es-modules-tooling-config.md

Things to do before you start using ES modules and put "type": "module" in package.json

The correct behavior of all tools is to assume that .js files are in ES modules format. Hence you must convert existing .js files (including config files) to ESM format, or rename them to .cjs if you want to keep them intact.

eslint, prettier

You should rename .eslintrc.js/.prettierrc.js to .cjs extension, or make them a valid JSON with .json extension

doc: eslint prettier