Skip to content

Instantly share code, notes, and snippets.

View azmym's full-sized avatar

Mahmoud Azmy azmym

View GitHub Profile
{
"id": "3c274643-d76e-48ab-b949-ad8080d00fb4",
"key": "5b595f90-11b6-42b3-adc0-b599aa53ab14",
"time": "2022-02-18T14:07:36Z",
"type": "article-updated",
"payload": {
"id": "5b595f90-11b6-42b3-adc0-b599aa53ab14",
"title": "La Grange Terroir Syrah 0,75l",
"description": "901265",
@azmym
azmym / System Design.md
Created June 27, 2020 19:49 — forked from vasanthk/System Design.md
System Design Cheatsheet

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

Basic Steps

  1. Clarify and agree on the scope of the system
  • User cases (description of sequences of events that, taken together, lead to a system doing something useful)
    • Who is going to use it?
    • How are they going to use it?
@azmym
azmym / async-defer-module.md
Created June 27, 2020 19:48 — forked from vasanthk/async-defer-module.md
async scripts, defer scripts, module scripts: explainer, comparison, and gotchas

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

@azmym
azmym / async-defer-module.md
Created June 27, 2020 19:48 — forked from vasanthk/async-defer-module.md
async scripts, defer scripts, module scripts: explainer, comparison, and gotchas

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