jakub-g

<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)

funmia

Design Systems

Getting Started:

• http://bradfrost.com/blog/post/conducting-an-interface-inventory/
• http://bradfrost.com/blog/post/interface-inventory/
• https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969

Resources:

regexyl

# ***** FILE SYSTEM *****

# Find paths of all files beginning with a regex in the current directory
find . -regex '.*/learn.*' -maxdepth 1

# Move all files matching the regex to a folder ./learn
# Warning: An error will appear but it's ok, all files except for ./learn itself are moved
# mv: rename ./learn to learn/learn: Invalid argument
mv $(find . -regex '.*/learn.*' -maxdepth 1) learn

regexyl

Regex Cheatsheet

The JavaScript version.

Frequent Examples

Search for: [^moz-eg]

1. "/example/": /\/example\/[a-z]+/i
2. Switch words in a string

let re = /(\w+)\s(\w+)/;
let str = 'John Smith';