Instantly share code, notes, and snippets.
- San Francisco
- https://www.vasanthk.com/
- @vasanth_k
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 - seeDeep dive into the murky waters of script loading by Jake Archibald (2013)
Testing double-fetching ofmodule/nomodule JS code (includingthe Safari hack)
<script type="module" src="module.js"></script><script nomodule src="nomodule.js"></script>Test page:https://jg-testpage.github.io/es-modules/module-nomodule/
|IE/Edge|Firefox|Chrome|Safari |fetches module|fetches nomodule|executes| |
| {"lastUpload":"2020-02-07T20:02:55.438Z","extensionVersion":"v3.4.3"} |
Building reusable UI components is a non trivial task, as we need to anticipate a number of things when planing for reuseability. On the one end of the spectrum we want to enable customization and on the other side we want to avoid developers doing the wrong thing, like breaking the component or displaying invalid states.
To get a better understanding of what we need to think about and consider upfront, we will build a non-trivial UI component, that displays tags. OurTags component will take care of managing and displaying tags.
The following examples are all built withTachyons andReact, but these ideas apply to any UI component and any general styling approach.