diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index eb61a6fef..276ebcbf6 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -40,11 +40,3 @@ In order to create a new snippet, you should follow the steps below:
 - Always use soft tabs (2 spaces), never hard tabs.
 - Leave a single space after a comma (`,`) character (both in the description and code).
 - Define multiple variables on the same line, if possible. Use meaningful names (e.g. `letter` instead of `lt`) and follow existing conventions as seen in other snippets. Do not use trailing or leading underscores in variable names.
-- Use ES6 notation to define your snippet's function. For example `const myFunction = ( arg1, arg2 ) => { }`. Format your code based on [Semi-Standard Style](https://github.com/Flet/semistandard)'s format guidelines.
-- Always use single quotes for string literals. Use template literals, instead, if necessary.
-- Use strict equality checking (`===` and `!==` instead of `==` and `!=`).
-- When describing snippets, refer to methods, using their full name. For example, use `Array.prototype.reduce()`, instead of `reduce()`.
-- Do not include arguments in method references. For example, use `String.prototype.split()` instead of `String.prototype.split('\n')`.
-- When referring to constructors, use the prototype's name. For example, use `Array` instead of `new Array()`.
-- Use variables only when necessary. Prefer `const` when the values are not altered after assignment, otherwise, use `let`. Do not use `var`.
-- Never use `eval()`. Your snippet will be disqualified immediately.
diff --git a/README.md b/README.md
index d3c5cc65a..148cde6a1 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@
 
 * Visit [our website](https://30secondsofcode.org) to view our snippet collection.
 * Use the [Search page](https://30secondsofcode.org/search) to find snippets that suit your needs. You can search by name, tag, language or using a snippet's description. Just start typing a term and see what comes up.
-* Browse the [JavaScript Snippet collection](https://30secondsofcode.org/js/p/1) to see all the snippets in this project or click individual tags at the top of the same page to narrow down your search to a specific tag.
+* Browse the [Snippet collection](https://30secondsofcode.org/list/p/1) to see all the snippets in this project or click individual tags at the top of the same page to narrow down your search to a specific tag.
 * Click on each snippet card to view the whole snippet, including code, explanation and examples.
 * You can use the button at the bottom of a snippet card to copy the code to clipboard.
 * If you like the project, give it a star. It means a lot to the people maintaining it.
@@ -14,7 +14,7 @@
 ## Want to contribute?
 
 * If you want to help us improve, take a minute to read the [Contribution Guidelines](/CONTRIBUTING.md) first.
-* Use the [Snippet Template](/snippet-template.md) to add new snippets to the collection.
+* Use the relevant `snippet-template.md` to add new snippets to each collection.
 * If you find a problem with a specific snippet, please [open an issue](https://github.com/30-seconds/30-seconds-of-code/issues/new).
 * If you find a problem with the website, please [report it in the web repository](https://github.com/30-seconds/30-seconds-web/issues/new).
 
@@ -23,4 +23,4 @@
 * This repository is maintained by the [30 seconds of code organization on GitHub](https://github.com/30-seconds).
 * All snippets are licensed under the CC-BY-4.0 License, unless explicitly stated otherwise.
 * Logos, names and trademarks are not to be used without the explicit consent of the owners of the 30 seconds of code GitHub organization.
-* Our website is powered by [Netlify](https://www.netlify.com/), [Next.js](https://nextjs.org/) & [GitHub](https://github.com/).
+* Our website is powered by [Netlify](https://www.netlify.com/), [Astro](https://astro.build/) & [GitHub](https://github.com/).
diff --git a/assets/cover/accessibility.jpg b/assets/cover/accessibility.jpg
new file mode 100644
index 000000000..5f5129208
Binary files /dev/null and b/assets/cover/accessibility.jpg differ
diff --git a/assets/cover/aerial-view-port.jpg b/assets/cover/aerial-view-port.jpg
new file mode 100644
index 000000000..d7f9979c1
Binary files /dev/null and b/assets/cover/aerial-view-port.jpg differ
diff --git a/assets/cover/alfama.jpg b/assets/cover/alfama.jpg
new file mode 100644
index 000000000..376785ee8
Binary files /dev/null and b/assets/cover/alfama.jpg differ
diff --git a/assets/cover/ancient-greek-building.jpg b/assets/cover/ancient-greek-building.jpg
new file mode 100644
index 000000000..4b73067b1
Binary files /dev/null and b/assets/cover/ancient-greek-building.jpg differ
diff --git a/assets/cover/antelope.jpg b/assets/cover/antelope.jpg
new file mode 100644
index 000000000..ba22bc908
Binary files /dev/null and b/assets/cover/antelope.jpg differ
diff --git a/assets/cover/apples.jpg b/assets/cover/apples.jpg
new file mode 100644
index 000000000..631419e3d
Binary files /dev/null and b/assets/cover/apples.jpg differ
diff --git a/assets/cover/architectural.jpg b/assets/cover/architectural.jpg
new file mode 100644
index 000000000..7b1ff4500
Binary files /dev/null and b/assets/cover/architectural.jpg differ
diff --git a/assets/cover/armchair-in-yellow.jpg b/assets/cover/armchair-in-yellow.jpg
new file mode 100644
index 000000000..999d253b2
Binary files /dev/null and b/assets/cover/armchair-in-yellow.jpg differ
diff --git a/assets/cover/armchair.jpg b/assets/cover/armchair.jpg
new file mode 100644
index 000000000..2451ecadb
Binary files /dev/null and b/assets/cover/armchair.jpg differ
diff --git a/assets/cover/arrays.jpg b/assets/cover/arrays.jpg
new file mode 100644
index 000000000..dd31966df
Binary files /dev/null and b/assets/cover/arrays.jpg differ
diff --git a/assets/cover/arrow-functions.jpg b/assets/cover/arrow-functions.jpg
new file mode 100644
index 000000000..e716b15bb
Binary files /dev/null and b/assets/cover/arrow-functions.jpg differ
diff --git a/assets/cover/automaton.jpg b/assets/cover/automaton.jpg
new file mode 100644
index 000000000..38601c5d0
Binary files /dev/null and b/assets/cover/automaton.jpg differ
diff --git a/assets/cover/avocado-slices.jpg b/assets/cover/avocado-slices.jpg
new file mode 100644
index 000000000..3d87a2d7f
Binary files /dev/null and b/assets/cover/avocado-slices.jpg differ
diff --git a/assets/cover/bag-waiting.jpg b/assets/cover/bag-waiting.jpg
new file mode 100644
index 000000000..ad78d965a
Binary files /dev/null and b/assets/cover/bag-waiting.jpg differ
diff --git a/assets/cover/balloons.jpg b/assets/cover/balloons.jpg
new file mode 100644
index 000000000..aaea3d050
Binary files /dev/null and b/assets/cover/balloons.jpg differ
diff --git a/assets/cover/baloons-field.jpg b/assets/cover/baloons-field.jpg
new file mode 100644
index 000000000..ce15d3a97
Binary files /dev/null and b/assets/cover/baloons-field.jpg differ
diff --git a/assets/cover/bamboo-lamp.jpg b/assets/cover/bamboo-lamp.jpg
new file mode 100644
index 000000000..e1d7d5804
Binary files /dev/null and b/assets/cover/bamboo-lamp.jpg differ
diff --git a/assets/cover/basket-paper.jpg b/assets/cover/basket-paper.jpg
new file mode 100644
index 000000000..59a9d94ab
Binary files /dev/null and b/assets/cover/basket-paper.jpg differ
diff --git a/assets/cover/beach-from-above.jpg b/assets/cover/beach-from-above.jpg
new file mode 100644
index 000000000..bb659e545
Binary files /dev/null and b/assets/cover/beach-from-above.jpg differ
diff --git a/assets/cover/beach-pineapple.jpg b/assets/cover/beach-pineapple.jpg
new file mode 100644
index 000000000..62e3802ac
Binary files /dev/null and b/assets/cover/beach-pineapple.jpg differ
diff --git a/assets/cover/beach-riders.jpg b/assets/cover/beach-riders.jpg
new file mode 100644
index 000000000..300aa115a
Binary files /dev/null and b/assets/cover/beach-riders.jpg differ
diff --git a/assets/cover/birds.jpg b/assets/cover/birds.jpg
new file mode 100644
index 000000000..2e9f303c8
Binary files /dev/null and b/assets/cover/birds.jpg differ
diff --git a/assets/cover/blank-card.jpg b/assets/cover/blank-card.jpg
new file mode 100644
index 000000000..9f6bbd33d
Binary files /dev/null and b/assets/cover/blank-card.jpg differ
diff --git a/assets/cover/blue-bench.jpg b/assets/cover/blue-bench.jpg
new file mode 100644
index 000000000..0bd568a57
Binary files /dev/null and b/assets/cover/blue-bench.jpg differ
diff --git a/assets/cover/blue-bird.jpg b/assets/cover/blue-bird.jpg
new file mode 100644
index 000000000..ec9d313f7
Binary files /dev/null and b/assets/cover/blue-bird.jpg differ
diff --git a/assets/cover/blue-computer.jpg b/assets/cover/blue-computer.jpg
new file mode 100644
index 000000000..91218ae87
Binary files /dev/null and b/assets/cover/blue-computer.jpg differ
diff --git a/assets/cover/blue-flower.jpg b/assets/cover/blue-flower.jpg
new file mode 100644
index 000000000..0c56696e5
Binary files /dev/null and b/assets/cover/blue-flower.jpg differ
diff --git a/assets/cover/blue-lake.jpg b/assets/cover/blue-lake.jpg
new file mode 100644
index 000000000..0ff9db2e7
Binary files /dev/null and b/assets/cover/blue-lake.jpg differ
diff --git a/assets/cover/blue-red-mountain.jpg b/assets/cover/blue-red-mountain.jpg
new file mode 100644
index 000000000..1cfe2d99e
Binary files /dev/null and b/assets/cover/blue-red-mountain.jpg differ
diff --git a/assets/cover/blue-sunrise.jpg b/assets/cover/blue-sunrise.jpg
new file mode 100644
index 000000000..efd982305
Binary files /dev/null and b/assets/cover/blue-sunrise.jpg differ
diff --git a/assets/cover/boat-port.jpg b/assets/cover/boat-port.jpg
new file mode 100644
index 000000000..675ce6746
Binary files /dev/null and b/assets/cover/boat-port.jpg differ
diff --git a/assets/cover/boats.jpg b/assets/cover/boats.jpg
new file mode 100644
index 000000000..6b324d323
Binary files /dev/null and b/assets/cover/boats.jpg differ
diff --git a/assets/cover/body-of-water.jpg b/assets/cover/body-of-water.jpg
new file mode 100644
index 000000000..795316c29
Binary files /dev/null and b/assets/cover/body-of-water.jpg differ
diff --git a/assets/cover/book-chair.jpg b/assets/cover/book-chair.jpg
new file mode 100644
index 000000000..f6f864fb7
Binary files /dev/null and b/assets/cover/book-chair.jpg differ
diff --git a/assets/cover/book-stopper.jpg b/assets/cover/book-stopper.jpg
new file mode 100644
index 000000000..b4bfec8ed
Binary files /dev/null and b/assets/cover/book-stopper.jpg differ
diff --git a/assets/cover/boulder-beach.jpg b/assets/cover/boulder-beach.jpg
new file mode 100644
index 000000000..ced51b8b4
Binary files /dev/null and b/assets/cover/boulder-beach.jpg differ
diff --git a/assets/cover/boutique-home-office-1.jpg b/assets/cover/boutique-home-office-1.jpg
new file mode 100644
index 000000000..ac6e5a58d
Binary files /dev/null and b/assets/cover/boutique-home-office-1.jpg differ
diff --git a/assets/cover/boutique-home-office-2.jpg b/assets/cover/boutique-home-office-2.jpg
new file mode 100644
index 000000000..abf216d7d
Binary files /dev/null and b/assets/cover/boutique-home-office-2.jpg differ
diff --git a/assets/cover/boutique-home-office-3.jpg b/assets/cover/boutique-home-office-3.jpg
new file mode 100644
index 000000000..dc307a056
Binary files /dev/null and b/assets/cover/boutique-home-office-3.jpg differ
diff --git a/assets/cover/boutique-home-office-4.jpg b/assets/cover/boutique-home-office-4.jpg
new file mode 100644
index 000000000..d21b0bb89
Binary files /dev/null and b/assets/cover/boutique-home-office-4.jpg differ
diff --git a/assets/cover/bridge-drop.jpg b/assets/cover/bridge-drop.jpg
new file mode 100644
index 000000000..aac3073f6
Binary files /dev/null and b/assets/cover/bridge-drop.jpg differ
diff --git a/assets/cover/bridge.jpg b/assets/cover/bridge.jpg
new file mode 100644
index 000000000..c39d28d39
Binary files /dev/null and b/assets/cover/bridge.jpg differ
diff --git a/assets/cover/broken-screen.jpg b/assets/cover/broken-screen.jpg
new file mode 100644
index 000000000..405b58081
Binary files /dev/null and b/assets/cover/broken-screen.jpg differ
diff --git a/assets/cover/brown-bird.jpg b/assets/cover/brown-bird.jpg
new file mode 100644
index 000000000..c3c17609a
Binary files /dev/null and b/assets/cover/brown-bird.jpg differ
diff --git a/assets/cover/budapest-palace.jpg b/assets/cover/budapest-palace.jpg
new file mode 100644
index 000000000..c5b3ff3bb
Binary files /dev/null and b/assets/cover/budapest-palace.jpg differ
diff --git a/assets/cover/bug.jpg b/assets/cover/bug.jpg
new file mode 100644
index 000000000..81126fdec
Binary files /dev/null and b/assets/cover/bug.jpg differ
diff --git a/assets/cover/building-blocks.jpg b/assets/cover/building-blocks.jpg
new file mode 100644
index 000000000..b2e551e3d
Binary files /dev/null and b/assets/cover/building-blocks.jpg differ
diff --git a/assets/cover/building-facade.jpg b/assets/cover/building-facade.jpg
new file mode 100644
index 000000000..b1e4ebc49
Binary files /dev/null and b/assets/cover/building-facade.jpg differ
diff --git a/assets/cover/bunny-poster.jpg b/assets/cover/bunny-poster.jpg
new file mode 100644
index 000000000..ce44eea2d
Binary files /dev/null and b/assets/cover/bunny-poster.jpg differ
diff --git a/assets/cover/by-the-lighthouse.jpg b/assets/cover/by-the-lighthouse.jpg
new file mode 100644
index 000000000..e228228ed
Binary files /dev/null and b/assets/cover/by-the-lighthouse.jpg differ
diff --git a/assets/cover/camera-zoom.jpg b/assets/cover/camera-zoom.jpg
new file mode 100644
index 000000000..303384a4a
Binary files /dev/null and b/assets/cover/camera-zoom.jpg differ
diff --git a/assets/cover/campfire.jpg b/assets/cover/campfire.jpg
new file mode 100644
index 000000000..b3ad405ca
Binary files /dev/null and b/assets/cover/campfire.jpg differ
diff --git a/assets/cover/cancel-typographer.jpg b/assets/cover/cancel-typographer.jpg
new file mode 100644
index 000000000..de2ea4c1d
Binary files /dev/null and b/assets/cover/cancel-typographer.jpg differ
diff --git a/assets/cover/canoe.jpg b/assets/cover/canoe.jpg
new file mode 100644
index 000000000..58556a170
Binary files /dev/null and b/assets/cover/canoe.jpg differ
diff --git a/assets/cover/capsule-coffee.jpg b/assets/cover/capsule-coffee.jpg
new file mode 100644
index 000000000..2e30ead72
Binary files /dev/null and b/assets/cover/capsule-coffee.jpg differ
diff --git a/assets/cover/carrots.jpg b/assets/cover/carrots.jpg
new file mode 100644
index 000000000..11ce3d64a
Binary files /dev/null and b/assets/cover/carrots.jpg differ
diff --git a/assets/cover/case-study.jpg b/assets/cover/case-study.jpg
new file mode 100644
index 000000000..2260d1b41
Binary files /dev/null and b/assets/cover/case-study.jpg differ
diff --git a/assets/cover/cave-view.jpg b/assets/cover/cave-view.jpg
new file mode 100644
index 000000000..3f3c61e36
Binary files /dev/null and b/assets/cover/cave-view.jpg differ
diff --git a/assets/cover/cherry-trees.jpg b/assets/cover/cherry-trees.jpg
new file mode 100644
index 000000000..f724b2f5d
Binary files /dev/null and b/assets/cover/cherry-trees.jpg differ
diff --git a/assets/cover/chess-pawns.jpg b/assets/cover/chess-pawns.jpg
new file mode 100644
index 000000000..301496100
Binary files /dev/null and b/assets/cover/chess-pawns.jpg differ
diff --git a/assets/cover/chill-surfing.jpg b/assets/cover/chill-surfing.jpg
new file mode 100644
index 000000000..6ccb98b1e
Binary files /dev/null and b/assets/cover/chill-surfing.jpg differ
diff --git a/assets/cover/citrus-drink.jpg b/assets/cover/citrus-drink.jpg
new file mode 100644
index 000000000..40c11575b
Binary files /dev/null and b/assets/cover/citrus-drink.jpg differ
diff --git a/assets/cover/city-view.jpg b/assets/cover/city-view.jpg
new file mode 100644
index 000000000..bae59854d
Binary files /dev/null and b/assets/cover/city-view.jpg differ
diff --git a/assets/cover/clay-pot-horizon.jpg b/assets/cover/clay-pot-horizon.jpg
new file mode 100644
index 000000000..81f0fe274
Binary files /dev/null and b/assets/cover/clay-pot-horizon.jpg differ
diff --git a/assets/cover/clock.jpg b/assets/cover/clock.jpg
new file mode 100644
index 000000000..ce1fc88ab
Binary files /dev/null and b/assets/cover/clock.jpg differ
diff --git a/assets/cover/clouds-n-mountains.jpg b/assets/cover/clouds-n-mountains.jpg
new file mode 100644
index 000000000..4b881ff81
Binary files /dev/null and b/assets/cover/clouds-n-mountains.jpg differ
diff --git a/assets/cover/clouds-over-mountains.jpg b/assets/cover/clouds-over-mountains.jpg
new file mode 100644
index 000000000..451325f3a
Binary files /dev/null and b/assets/cover/clouds-over-mountains.jpg differ
diff --git a/assets/cover/cloudy-mountaintop-2.jpg b/assets/cover/cloudy-mountaintop-2.jpg
new file mode 100644
index 000000000..8b7129584
Binary files /dev/null and b/assets/cover/cloudy-mountaintop-2.jpg differ
diff --git a/assets/cover/cloudy-mountaintop.jpg b/assets/cover/cloudy-mountaintop.jpg
new file mode 100644
index 000000000..a856610d3
Binary files /dev/null and b/assets/cover/cloudy-mountaintop.jpg differ
diff --git a/assets/cover/cloudy-rock-formation.jpg b/assets/cover/cloudy-rock-formation.jpg
new file mode 100644
index 000000000..db28daf21
Binary files /dev/null and b/assets/cover/cloudy-rock-formation.jpg differ
diff --git a/assets/cover/clutter-2.jpg b/assets/cover/clutter-2.jpg
new file mode 100644
index 000000000..b6633a79f
Binary files /dev/null and b/assets/cover/clutter-2.jpg differ
diff --git a/assets/cover/clutter.jpg b/assets/cover/clutter.jpg
new file mode 100644
index 000000000..7c96c26da
Binary files /dev/null and b/assets/cover/clutter.jpg differ
diff --git a/assets/cover/cobbled-street.jpg b/assets/cover/cobbled-street.jpg
new file mode 100644
index 000000000..4296a8b94
Binary files /dev/null and b/assets/cover/cobbled-street.jpg differ
diff --git a/assets/cover/coconuts.jpg b/assets/cover/coconuts.jpg
new file mode 100644
index 000000000..cec1b66a7
Binary files /dev/null and b/assets/cover/coconuts.jpg differ
diff --git a/assets/cover/coffee-drip.jpg b/assets/cover/coffee-drip.jpg
new file mode 100644
index 000000000..5636ccdf9
Binary files /dev/null and b/assets/cover/coffee-drip.jpg differ
diff --git a/assets/cover/coffee-float.jpg b/assets/cover/coffee-float.jpg
new file mode 100644
index 000000000..51ed14272
Binary files /dev/null and b/assets/cover/coffee-float.jpg differ
diff --git a/assets/cover/coffee-phone-tray-2.jpg b/assets/cover/coffee-phone-tray-2.jpg
new file mode 100644
index 000000000..bed3364c3
Binary files /dev/null and b/assets/cover/coffee-phone-tray-2.jpg differ
diff --git a/assets/cover/coffee-phone-tray-3.jpg b/assets/cover/coffee-phone-tray-3.jpg
new file mode 100644
index 000000000..d65df1d5c
Binary files /dev/null and b/assets/cover/coffee-phone-tray-3.jpg differ
diff --git a/assets/cover/coffee-phone-tray.jpg b/assets/cover/coffee-phone-tray.jpg
new file mode 100644
index 000000000..f1bd788bf
Binary files /dev/null and b/assets/cover/coffee-phone-tray.jpg differ
diff --git a/assets/cover/cold-mountains.jpg b/assets/cover/cold-mountains.jpg
new file mode 100644
index 000000000..7065cf8c8
Binary files /dev/null and b/assets/cover/cold-mountains.jpg differ
diff --git a/assets/cover/colorful-lounge.jpg b/assets/cover/colorful-lounge.jpg
new file mode 100644
index 000000000..000f4e14e
Binary files /dev/null and b/assets/cover/colorful-lounge.jpg differ
diff --git a/assets/cover/colorful-plastic.jpg b/assets/cover/colorful-plastic.jpg
new file mode 100644
index 000000000..bf42bac6d
Binary files /dev/null and b/assets/cover/colorful-plastic.jpg differ
diff --git a/assets/cover/colorful-pots.jpg b/assets/cover/colorful-pots.jpg
new file mode 100644
index 000000000..0ca2bd986
Binary files /dev/null and b/assets/cover/colorful-pots.jpg differ
diff --git a/assets/cover/colorful-rocks.jpg b/assets/cover/colorful-rocks.jpg
new file mode 100644
index 000000000..c2a954597
Binary files /dev/null and b/assets/cover/colorful-rocks.jpg differ
diff --git a/assets/cover/colors-mural.jpg b/assets/cover/colors-mural.jpg
new file mode 100644
index 000000000..7a49ff11a
Binary files /dev/null and b/assets/cover/colors-mural.jpg differ
diff --git a/assets/cover/comic-glasses.jpg b/assets/cover/comic-glasses.jpg
new file mode 100644
index 000000000..c670509f4
Binary files /dev/null and b/assets/cover/comic-glasses.jpg differ
diff --git a/assets/cover/compass.jpg b/assets/cover/compass.jpg
new file mode 100644
index 000000000..1970d4c40
Binary files /dev/null and b/assets/cover/compass.jpg differ
diff --git a/assets/cover/computer-screens.jpg b/assets/cover/computer-screens.jpg
new file mode 100644
index 000000000..5436b56f4
Binary files /dev/null and b/assets/cover/computer-screens.jpg differ
diff --git a/assets/cover/contemporary-desk.jpg b/assets/cover/contemporary-desk.jpg
new file mode 100644
index 000000000..595aa4e50
Binary files /dev/null and b/assets/cover/contemporary-desk.jpg differ
diff --git a/assets/cover/couch-laptop.jpg b/assets/cover/couch-laptop.jpg
new file mode 100644
index 000000000..1ed34c9d1
Binary files /dev/null and b/assets/cover/couch-laptop.jpg differ
diff --git a/assets/cover/coworking-space.jpg b/assets/cover/coworking-space.jpg
new file mode 100644
index 000000000..d00f6f28a
Binary files /dev/null and b/assets/cover/coworking-space.jpg differ
diff --git a/assets/cover/cows.jpg b/assets/cover/cows.jpg
new file mode 100644
index 000000000..d6e89e2f8
Binary files /dev/null and b/assets/cover/cows.jpg differ
diff --git a/assets/cover/cozy-desk-setup.jpg b/assets/cover/cozy-desk-setup.jpg
new file mode 100644
index 000000000..d454a0e14
Binary files /dev/null and b/assets/cover/cozy-desk-setup.jpg differ
diff --git a/assets/cover/css-variables.jpg b/assets/cover/css-variables.jpg
new file mode 100644
index 000000000..2f6ae2acd
Binary files /dev/null and b/assets/cover/css-variables.jpg differ
diff --git a/assets/cover/cup-of-orange.jpg b/assets/cover/cup-of-orange.jpg
new file mode 100644
index 000000000..33acc88d3
Binary files /dev/null and b/assets/cover/cup-of-orange.jpg differ
diff --git a/assets/cover/curve.jpg b/assets/cover/curve.jpg
new file mode 100644
index 000000000..694a89121
Binary files /dev/null and b/assets/cover/curve.jpg differ
diff --git a/assets/cover/customs.jpg b/assets/cover/customs.jpg
new file mode 100644
index 000000000..38be54ba1
Binary files /dev/null and b/assets/cover/customs.jpg differ
diff --git a/assets/cover/dark-city.jpg b/assets/cover/dark-city.jpg
new file mode 100644
index 000000000..acc24e7ee
Binary files /dev/null and b/assets/cover/dark-city.jpg differ
diff --git a/assets/cover/dark-cloud.jpg b/assets/cover/dark-cloud.jpg
new file mode 100644
index 000000000..a9521a05a
Binary files /dev/null and b/assets/cover/dark-cloud.jpg differ
diff --git a/assets/cover/dark-leaves-2.jpg b/assets/cover/dark-leaves-2.jpg
new file mode 100644
index 000000000..e6b450c3d
Binary files /dev/null and b/assets/cover/dark-leaves-2.jpg differ
diff --git a/assets/cover/dark-leaves-3.jpg b/assets/cover/dark-leaves-3.jpg
new file mode 100644
index 000000000..c01bd5709
Binary files /dev/null and b/assets/cover/dark-leaves-3.jpg differ
diff --git a/assets/cover/dark-leaves-4.jpg b/assets/cover/dark-leaves-4.jpg
new file mode 100644
index 000000000..d4ce22b7d
Binary files /dev/null and b/assets/cover/dark-leaves-4.jpg differ
diff --git a/assets/cover/dark-leaves-5.jpg b/assets/cover/dark-leaves-5.jpg
new file mode 100644
index 000000000..05cecdee8
Binary files /dev/null and b/assets/cover/dark-leaves-5.jpg differ
diff --git a/assets/cover/dark-leaves-6.jpg b/assets/cover/dark-leaves-6.jpg
new file mode 100644
index 000000000..6768c98dc
Binary files /dev/null and b/assets/cover/dark-leaves-6.jpg differ
diff --git a/assets/cover/dark-leaves.jpg b/assets/cover/dark-leaves.jpg
new file mode 100644
index 000000000..82aa2cef9
Binary files /dev/null and b/assets/cover/dark-leaves.jpg differ
diff --git a/assets/cover/dark-mode.jpg b/assets/cover/dark-mode.jpg
new file mode 100644
index 000000000..7e220e552
Binary files /dev/null and b/assets/cover/dark-mode.jpg differ
diff --git a/assets/cover/digital-nomad-10.jpg b/assets/cover/digital-nomad-10.jpg
new file mode 100644
index 000000000..6be24d206
Binary files /dev/null and b/assets/cover/digital-nomad-10.jpg differ
diff --git a/assets/cover/digital-nomad-11.jpg b/assets/cover/digital-nomad-11.jpg
new file mode 100644
index 000000000..28c126ce4
Binary files /dev/null and b/assets/cover/digital-nomad-11.jpg differ
diff --git a/assets/cover/digital-nomad-12.jpg b/assets/cover/digital-nomad-12.jpg
new file mode 100644
index 000000000..e1ecc045a
Binary files /dev/null and b/assets/cover/digital-nomad-12.jpg differ
diff --git a/assets/cover/digital-nomad-13.jpg b/assets/cover/digital-nomad-13.jpg
new file mode 100644
index 000000000..54517abb8
Binary files /dev/null and b/assets/cover/digital-nomad-13.jpg differ
diff --git a/assets/cover/digital-nomad-14.jpg b/assets/cover/digital-nomad-14.jpg
new file mode 100644
index 000000000..617e39f11
Binary files /dev/null and b/assets/cover/digital-nomad-14.jpg differ
diff --git a/assets/cover/digital-nomad-15.jpg b/assets/cover/digital-nomad-15.jpg
new file mode 100644
index 000000000..6a82a2581
Binary files /dev/null and b/assets/cover/digital-nomad-15.jpg differ
diff --git a/assets/cover/digital-nomad-16.jpg b/assets/cover/digital-nomad-16.jpg
new file mode 100644
index 000000000..fd22f1951
Binary files /dev/null and b/assets/cover/digital-nomad-16.jpg differ
diff --git a/assets/cover/digital-nomad-2.jpg b/assets/cover/digital-nomad-2.jpg
new file mode 100644
index 000000000..8410f3e74
Binary files /dev/null and b/assets/cover/digital-nomad-2.jpg differ
diff --git a/assets/cover/digital-nomad-3.jpg b/assets/cover/digital-nomad-3.jpg
new file mode 100644
index 000000000..d3bacb55a
Binary files /dev/null and b/assets/cover/digital-nomad-3.jpg differ
diff --git a/assets/cover/digital-nomad-4.jpg b/assets/cover/digital-nomad-4.jpg
new file mode 100644
index 000000000..1fe1e604c
Binary files /dev/null and b/assets/cover/digital-nomad-4.jpg differ
diff --git a/assets/cover/digital-nomad-5.jpg b/assets/cover/digital-nomad-5.jpg
new file mode 100644
index 000000000..2b9cb50d3
Binary files /dev/null and b/assets/cover/digital-nomad-5.jpg differ
diff --git a/assets/cover/digital-nomad-6.jpg b/assets/cover/digital-nomad-6.jpg
new file mode 100644
index 000000000..b35085235
Binary files /dev/null and b/assets/cover/digital-nomad-6.jpg differ
diff --git a/assets/cover/digital-nomad-7.jpg b/assets/cover/digital-nomad-7.jpg
new file mode 100644
index 000000000..d1ec9e9e0
Binary files /dev/null and b/assets/cover/digital-nomad-7.jpg differ
diff --git a/assets/cover/digital-nomad-8.jpg b/assets/cover/digital-nomad-8.jpg
new file mode 100644
index 000000000..5a14b810f
Binary files /dev/null and b/assets/cover/digital-nomad-8.jpg differ
diff --git a/assets/cover/digital-nomad-9.jpg b/assets/cover/digital-nomad-9.jpg
new file mode 100644
index 000000000..2b73ed6a7
Binary files /dev/null and b/assets/cover/digital-nomad-9.jpg differ
diff --git a/assets/cover/digital-nomad.jpg b/assets/cover/digital-nomad.jpg
new file mode 100644
index 000000000..c3e5d930d
Binary files /dev/null and b/assets/cover/digital-nomad.jpg differ
diff --git a/assets/cover/do-more-computer.jpg b/assets/cover/do-more-computer.jpg
new file mode 100644
index 000000000..a800f46a1
Binary files /dev/null and b/assets/cover/do-more-computer.jpg differ
diff --git a/assets/cover/dog-waiting.jpg b/assets/cover/dog-waiting.jpg
new file mode 100644
index 000000000..8648564c6
Binary files /dev/null and b/assets/cover/dog-waiting.jpg differ
diff --git a/assets/cover/down-the-stream.jpg b/assets/cover/down-the-stream.jpg
new file mode 100644
index 000000000..a0c4eac65
Binary files /dev/null and b/assets/cover/down-the-stream.jpg differ
diff --git a/assets/cover/dreamy-flowers.jpg b/assets/cover/dreamy-flowers.jpg
new file mode 100644
index 000000000..beed9a1bf
Binary files /dev/null and b/assets/cover/dreamy-flowers.jpg differ
diff --git a/assets/cover/duck-plants.jpg b/assets/cover/duck-plants.jpg
new file mode 100644
index 000000000..36eeb2184
Binary files /dev/null and b/assets/cover/duck-plants.jpg differ
diff --git a/assets/cover/dying-flowers.jpg b/assets/cover/dying-flowers.jpg
new file mode 100644
index 000000000..ac5935a59
Binary files /dev/null and b/assets/cover/dying-flowers.jpg differ
diff --git a/assets/cover/eagle.jpg b/assets/cover/eagle.jpg
new file mode 100644
index 000000000..01380d79e
Binary files /dev/null and b/assets/cover/eagle.jpg differ
diff --git a/assets/cover/engine.jpg b/assets/cover/engine.jpg
new file mode 100644
index 000000000..bb7a38614
Binary files /dev/null and b/assets/cover/engine.jpg differ
diff --git a/assets/cover/fallen-leaves.jpg b/assets/cover/fallen-leaves.jpg
new file mode 100644
index 000000000..2de535dfb
Binary files /dev/null and b/assets/cover/fallen-leaves.jpg differ
diff --git a/assets/cover/feathers.jpg b/assets/cover/feathers.jpg
new file mode 100644
index 000000000..06ca2857d
Binary files /dev/null and b/assets/cover/feathers.jpg differ
diff --git a/assets/cover/filter-coffee-pot.jpg b/assets/cover/filter-coffee-pot.jpg
new file mode 100644
index 000000000..a60774fa3
Binary files /dev/null and b/assets/cover/filter-coffee-pot.jpg differ
diff --git a/assets/cover/fishermen.jpg b/assets/cover/fishermen.jpg
new file mode 100644
index 000000000..af217b6e5
Binary files /dev/null and b/assets/cover/fishermen.jpg differ
diff --git a/assets/cover/flower-camera.jpg b/assets/cover/flower-camera.jpg
new file mode 100644
index 000000000..799d9a695
Binary files /dev/null and b/assets/cover/flower-camera.jpg differ
diff --git a/assets/cover/flower-pond.jpg b/assets/cover/flower-pond.jpg
new file mode 100644
index 000000000..95df15ccc
Binary files /dev/null and b/assets/cover/flower-pond.jpg differ
diff --git a/assets/cover/flower-portrait-1.jpg b/assets/cover/flower-portrait-1.jpg
new file mode 100644
index 000000000..ebb366802
Binary files /dev/null and b/assets/cover/flower-portrait-1.jpg differ
diff --git a/assets/cover/flower-portrait-10.jpg b/assets/cover/flower-portrait-10.jpg
new file mode 100644
index 000000000..576381ecd
Binary files /dev/null and b/assets/cover/flower-portrait-10.jpg differ
diff --git a/assets/cover/flower-portrait-2.jpg b/assets/cover/flower-portrait-2.jpg
new file mode 100644
index 000000000..eb29e5b97
Binary files /dev/null and b/assets/cover/flower-portrait-2.jpg differ
diff --git a/assets/cover/flower-portrait-3.jpg b/assets/cover/flower-portrait-3.jpg
new file mode 100644
index 000000000..fabda383c
Binary files /dev/null and b/assets/cover/flower-portrait-3.jpg differ
diff --git a/assets/cover/flower-portrait-4.jpg b/assets/cover/flower-portrait-4.jpg
new file mode 100644
index 000000000..12f7ba6d3
Binary files /dev/null and b/assets/cover/flower-portrait-4.jpg differ
diff --git a/assets/cover/flower-portrait-5.jpg b/assets/cover/flower-portrait-5.jpg
new file mode 100644
index 000000000..1b98e2c7a
Binary files /dev/null and b/assets/cover/flower-portrait-5.jpg differ
diff --git a/assets/cover/flower-portrait-6.jpg b/assets/cover/flower-portrait-6.jpg
new file mode 100644
index 000000000..3969c5fb3
Binary files /dev/null and b/assets/cover/flower-portrait-6.jpg differ
diff --git a/assets/cover/flower-portrait-7.jpg b/assets/cover/flower-portrait-7.jpg
new file mode 100644
index 000000000..d35be687d
Binary files /dev/null and b/assets/cover/flower-portrait-7.jpg differ
diff --git a/assets/cover/flower-portrait-8.jpg b/assets/cover/flower-portrait-8.jpg
new file mode 100644
index 000000000..351138911
Binary files /dev/null and b/assets/cover/flower-portrait-8.jpg differ
diff --git a/assets/cover/flower-portrait-9.jpg b/assets/cover/flower-portrait-9.jpg
new file mode 100644
index 000000000..25e44a6c7
Binary files /dev/null and b/assets/cover/flower-portrait-9.jpg differ
diff --git a/assets/cover/flower-shape-sunset.jpg b/assets/cover/flower-shape-sunset.jpg
new file mode 100644
index 000000000..820803304
Binary files /dev/null and b/assets/cover/flower-shape-sunset.jpg differ
diff --git a/assets/cover/flower-vase.jpg b/assets/cover/flower-vase.jpg
new file mode 100644
index 000000000..8443421f9
Binary files /dev/null and b/assets/cover/flower-vase.jpg differ
diff --git a/assets/cover/flowering-hills.jpg b/assets/cover/flowering-hills.jpg
new file mode 100644
index 000000000..4545643a3
Binary files /dev/null and b/assets/cover/flowering-hills.jpg differ
diff --git a/assets/cover/folded-map.jpg b/assets/cover/folded-map.jpg
new file mode 100644
index 000000000..b10127cc9
Binary files /dev/null and b/assets/cover/folded-map.jpg differ
diff --git a/assets/cover/forest-balcony.jpg b/assets/cover/forest-balcony.jpg
new file mode 100644
index 000000000..5dbc3861f
Binary files /dev/null and b/assets/cover/forest-balcony.jpg differ
diff --git a/assets/cover/fort-lamp.jpg b/assets/cover/fort-lamp.jpg
new file mode 100644
index 000000000..1701d39b5
Binary files /dev/null and b/assets/cover/fort-lamp.jpg differ
diff --git a/assets/cover/frames.jpg b/assets/cover/frames.jpg
new file mode 100644
index 000000000..1ac3f6443
Binary files /dev/null and b/assets/cover/frames.jpg differ
diff --git a/assets/cover/frog-blue-flower.jpg b/assets/cover/frog-blue-flower.jpg
new file mode 100644
index 000000000..bc9540d8b
Binary files /dev/null and b/assets/cover/frog-blue-flower.jpg differ
diff --git a/assets/cover/frozen-globe.jpg b/assets/cover/frozen-globe.jpg
new file mode 100644
index 000000000..1b78b3f28
Binary files /dev/null and b/assets/cover/frozen-globe.jpg differ
diff --git a/assets/cover/fruit-feast.jpg b/assets/cover/fruit-feast.jpg
new file mode 100644
index 000000000..812e582b0
Binary files /dev/null and b/assets/cover/fruit-feast.jpg differ
diff --git a/assets/cover/generator.jpg b/assets/cover/generator.jpg
new file mode 100644
index 000000000..03f7d7266
Binary files /dev/null and b/assets/cover/generator.jpg differ
diff --git a/assets/cover/glass-blowing.jpg b/assets/cover/glass-blowing.jpg
new file mode 100644
index 000000000..d032e6b85
Binary files /dev/null and b/assets/cover/glass-blowing.jpg differ
diff --git a/assets/cover/goat-wooden-cottage.jpg b/assets/cover/goat-wooden-cottage.jpg
new file mode 100644
index 000000000..8a6ef9c97
Binary files /dev/null and b/assets/cover/goat-wooden-cottage.jpg differ
diff --git a/assets/cover/godray-computer-mug.jpg b/assets/cover/godray-computer-mug.jpg
new file mode 100644
index 000000000..baab370cb
Binary files /dev/null and b/assets/cover/godray-computer-mug.jpg differ
diff --git a/assets/cover/gold-typewriter.jpg b/assets/cover/gold-typewriter.jpg
new file mode 100644
index 000000000..5d0d59aac
Binary files /dev/null and b/assets/cover/gold-typewriter.jpg differ
diff --git a/assets/cover/golden-gate-bridge.jpg b/assets/cover/golden-gate-bridge.jpg
new file mode 100644
index 000000000..b553e5c94
Binary files /dev/null and b/assets/cover/golden-gate-bridge.jpg differ
diff --git a/assets/cover/greek-coffee.jpg b/assets/cover/greek-coffee.jpg
new file mode 100644
index 000000000..e883ef828
Binary files /dev/null and b/assets/cover/greek-coffee.jpg differ
diff --git a/assets/cover/green-cabin-cow.jpg b/assets/cover/green-cabin-cow.jpg
new file mode 100644
index 000000000..02664555b
Binary files /dev/null and b/assets/cover/green-cabin-cow.jpg differ
diff --git a/assets/cover/green-css.jpg b/assets/cover/green-css.jpg
new file mode 100644
index 000000000..c4a69f4b9
Binary files /dev/null and b/assets/cover/green-css.jpg differ
diff --git a/assets/cover/green-plant.jpg b/assets/cover/green-plant.jpg
new file mode 100644
index 000000000..a999e8d9b
Binary files /dev/null and b/assets/cover/green-plant.jpg differ
diff --git a/assets/cover/guitar-living-room.jpg b/assets/cover/guitar-living-room.jpg
new file mode 100644
index 000000000..53ef71321
Binary files /dev/null and b/assets/cover/guitar-living-room.jpg differ
diff --git a/assets/cover/half-trees.jpg b/assets/cover/half-trees.jpg
new file mode 100644
index 000000000..07f9a5c77
Binary files /dev/null and b/assets/cover/half-trees.jpg differ
diff --git a/assets/cover/hard-disk.jpg b/assets/cover/hard-disk.jpg
new file mode 100644
index 000000000..f17dab868
Binary files /dev/null and b/assets/cover/hard-disk.jpg differ
diff --git a/assets/cover/highlands.jpg b/assets/cover/highlands.jpg
new file mode 100644
index 000000000..88b3a5852
Binary files /dev/null and b/assets/cover/highlands.jpg differ
diff --git a/assets/cover/horse-sunset.jpg b/assets/cover/horse-sunset.jpg
new file mode 100644
index 000000000..c71422d0e
Binary files /dev/null and b/assets/cover/horse-sunset.jpg differ
diff --git a/assets/cover/houses-rock-sea.jpg b/assets/cover/houses-rock-sea.jpg
new file mode 100644
index 000000000..ec1fa2f85
Binary files /dev/null and b/assets/cover/houses-rock-sea.jpg differ
diff --git a/assets/cover/ice.jpg b/assets/cover/ice.jpg
new file mode 100644
index 000000000..e48f779cd
Binary files /dev/null and b/assets/cover/ice.jpg differ
diff --git a/assets/cover/icebreaker.jpg b/assets/cover/icebreaker.jpg
new file mode 100644
index 000000000..80fd1cb4b
Binary files /dev/null and b/assets/cover/icebreaker.jpg differ
diff --git a/assets/cover/industrial-tokyo.jpg b/assets/cover/industrial-tokyo.jpg
new file mode 100644
index 000000000..302ed47b7
Binary files /dev/null and b/assets/cover/industrial-tokyo.jpg differ
diff --git a/assets/cover/inside-weather.jpg b/assets/cover/inside-weather.jpg
new file mode 100644
index 000000000..76de59b1d
Binary files /dev/null and b/assets/cover/inside-weather.jpg differ
diff --git a/assets/cover/interior-10.jpg b/assets/cover/interior-10.jpg
new file mode 100644
index 000000000..3e566c1e6
Binary files /dev/null and b/assets/cover/interior-10.jpg differ
diff --git a/assets/cover/interior-11.jpg b/assets/cover/interior-11.jpg
new file mode 100644
index 000000000..68baa9d7a
Binary files /dev/null and b/assets/cover/interior-11.jpg differ
diff --git a/assets/cover/interior-12.jpg b/assets/cover/interior-12.jpg
new file mode 100644
index 000000000..7b7082259
Binary files /dev/null and b/assets/cover/interior-12.jpg differ
diff --git a/assets/cover/interior-13.jpg b/assets/cover/interior-13.jpg
new file mode 100644
index 000000000..48772d1db
Binary files /dev/null and b/assets/cover/interior-13.jpg differ
diff --git a/assets/cover/interior-14.jpg b/assets/cover/interior-14.jpg
new file mode 100644
index 000000000..f3876edc5
Binary files /dev/null and b/assets/cover/interior-14.jpg differ
diff --git a/assets/cover/interior-15.jpg b/assets/cover/interior-15.jpg
new file mode 100644
index 000000000..7dbe4681c
Binary files /dev/null and b/assets/cover/interior-15.jpg differ
diff --git a/assets/cover/interior-16.jpg b/assets/cover/interior-16.jpg
new file mode 100644
index 000000000..18f2c3ef9
Binary files /dev/null and b/assets/cover/interior-16.jpg differ
diff --git a/assets/cover/interior-2.jpg b/assets/cover/interior-2.jpg
new file mode 100644
index 000000000..66c16ef37
Binary files /dev/null and b/assets/cover/interior-2.jpg differ
diff --git a/assets/cover/interior-3.jpg b/assets/cover/interior-3.jpg
new file mode 100644
index 000000000..6a5d00bb2
Binary files /dev/null and b/assets/cover/interior-3.jpg differ
diff --git a/assets/cover/interior-4.jpg b/assets/cover/interior-4.jpg
new file mode 100644
index 000000000..fcd9af8f2
Binary files /dev/null and b/assets/cover/interior-4.jpg differ
diff --git a/assets/cover/interior-5.jpg b/assets/cover/interior-5.jpg
new file mode 100644
index 000000000..4b15361f8
Binary files /dev/null and b/assets/cover/interior-5.jpg differ
diff --git a/assets/cover/interior-6.jpg b/assets/cover/interior-6.jpg
new file mode 100644
index 000000000..00e025d82
Binary files /dev/null and b/assets/cover/interior-6.jpg differ
diff --git a/assets/cover/interior-7.jpg b/assets/cover/interior-7.jpg
new file mode 100644
index 000000000..a312c0191
Binary files /dev/null and b/assets/cover/interior-7.jpg differ
diff --git a/assets/cover/interior-8.jpg b/assets/cover/interior-8.jpg
new file mode 100644
index 000000000..d0eba7018
Binary files /dev/null and b/assets/cover/interior-8.jpg differ
diff --git a/assets/cover/interior-9.jpg b/assets/cover/interior-9.jpg
new file mode 100644
index 000000000..78b9a953c
Binary files /dev/null and b/assets/cover/interior-9.jpg differ
diff --git a/assets/cover/interior.jpg b/assets/cover/interior.jpg
new file mode 100644
index 000000000..13aee2335
Binary files /dev/null and b/assets/cover/interior.jpg differ
diff --git a/assets/cover/island-corridor.jpg b/assets/cover/island-corridor.jpg
new file mode 100644
index 000000000..f2969425d
Binary files /dev/null and b/assets/cover/island-corridor.jpg differ
diff --git a/assets/cover/italian-horizon.jpg b/assets/cover/italian-horizon.jpg
new file mode 100644
index 000000000..81f3c7a86
Binary files /dev/null and b/assets/cover/italian-horizon.jpg differ
diff --git a/assets/cover/jars-on-shelf-2.jpg b/assets/cover/jars-on-shelf-2.jpg
new file mode 100644
index 000000000..573693b29
Binary files /dev/null and b/assets/cover/jars-on-shelf-2.jpg differ
diff --git a/assets/cover/jars-on-shelf.jpg b/assets/cover/jars-on-shelf.jpg
new file mode 100644
index 000000000..702adaa6e
Binary files /dev/null and b/assets/cover/jars-on-shelf.jpg differ
diff --git a/assets/cover/kettle-laptop.jpg b/assets/cover/kettle-laptop.jpg
new file mode 100644
index 000000000..fa93f4fca
Binary files /dev/null and b/assets/cover/kettle-laptop.jpg differ
diff --git a/assets/cover/keyboard-tea.jpg b/assets/cover/keyboard-tea.jpg
new file mode 100644
index 000000000..60b4ee48d
Binary files /dev/null and b/assets/cover/keyboard-tea.jpg differ
diff --git a/assets/cover/keyboard.jpg b/assets/cover/keyboard.jpg
new file mode 100644
index 000000000..0c0335bdb
Binary files /dev/null and b/assets/cover/keyboard.jpg differ
diff --git a/assets/cover/lake-bench.jpg b/assets/cover/lake-bench.jpg
new file mode 100644
index 000000000..5528ded9d
Binary files /dev/null and b/assets/cover/lake-bench.jpg differ
diff --git a/assets/cover/lake-church.jpg b/assets/cover/lake-church.jpg
new file mode 100644
index 000000000..33a0d6363
Binary files /dev/null and b/assets/cover/lake-church.jpg differ
diff --git a/assets/cover/lake-loop.jpg b/assets/cover/lake-loop.jpg
new file mode 100644
index 000000000..4079baf37
Binary files /dev/null and b/assets/cover/lake-loop.jpg differ
diff --git a/assets/cover/lake-runner.jpg b/assets/cover/lake-runner.jpg
new file mode 100644
index 000000000..d5b604599
Binary files /dev/null and b/assets/cover/lake-runner.jpg differ
diff --git a/assets/cover/lake-trees.jpg b/assets/cover/lake-trees.jpg
new file mode 100644
index 000000000..46575d02b
Binary files /dev/null and b/assets/cover/lake-trees.jpg differ
diff --git a/assets/cover/laptop-journey.jpg b/assets/cover/laptop-journey.jpg
new file mode 100644
index 000000000..b9ffe7936
Binary files /dev/null and b/assets/cover/laptop-journey.jpg differ
diff --git a/assets/cover/laptop-plants-2.jpg b/assets/cover/laptop-plants-2.jpg
new file mode 100644
index 000000000..6f49948f4
Binary files /dev/null and b/assets/cover/laptop-plants-2.jpg differ
diff --git a/assets/cover/laptop-plants.jpg b/assets/cover/laptop-plants.jpg
new file mode 100644
index 000000000..083951e80
Binary files /dev/null and b/assets/cover/laptop-plants.jpg differ
diff --git a/assets/cover/laptop-view.jpg b/assets/cover/laptop-view.jpg
new file mode 100644
index 000000000..fdc93f679
Binary files /dev/null and b/assets/cover/laptop-view.jpg differ
diff --git a/assets/cover/laptop-with-code.jpg b/assets/cover/laptop-with-code.jpg
new file mode 100644
index 000000000..aa1007878
Binary files /dev/null and b/assets/cover/laptop-with-code.jpg differ
diff --git a/assets/cover/last-light.jpg b/assets/cover/last-light.jpg
new file mode 100644
index 000000000..0e347990a
Binary files /dev/null and b/assets/cover/last-light.jpg differ
diff --git a/assets/cover/lavender-shelf.jpg b/assets/cover/lavender-shelf.jpg
new file mode 100644
index 000000000..e67722e1a
Binary files /dev/null and b/assets/cover/lavender-shelf.jpg differ
diff --git a/assets/cover/leafy-screens.jpg b/assets/cover/leafy-screens.jpg
new file mode 100644
index 000000000..8eef4caaa
Binary files /dev/null and b/assets/cover/leafy-screens.jpg differ
diff --git a/assets/cover/leaves-read.jpg b/assets/cover/leaves-read.jpg
new file mode 100644
index 000000000..38eb857e2
Binary files /dev/null and b/assets/cover/leaves-read.jpg differ
diff --git a/assets/cover/light-leaves.jpg b/assets/cover/light-leaves.jpg
new file mode 100644
index 000000000..47ef5e6a8
Binary files /dev/null and b/assets/cover/light-leaves.jpg differ
diff --git a/assets/cover/light-ring.jpg b/assets/cover/light-ring.jpg
new file mode 100644
index 000000000..58481f006
Binary files /dev/null and b/assets/cover/light-ring.jpg differ
diff --git a/assets/cover/lighthouse.jpg b/assets/cover/lighthouse.jpg
new file mode 100644
index 000000000..02aa7fb29
Binary files /dev/null and b/assets/cover/lighthouse.jpg differ
diff --git a/assets/cover/little-bird.jpg b/assets/cover/little-bird.jpg
new file mode 100644
index 000000000..0fbf1845b
Binary files /dev/null and b/assets/cover/little-bird.jpg differ
diff --git a/assets/cover/little-tree.jpg b/assets/cover/little-tree.jpg
new file mode 100644
index 000000000..988844298
Binary files /dev/null and b/assets/cover/little-tree.jpg differ
diff --git a/assets/cover/little-white-flowers.jpg b/assets/cover/little-white-flowers.jpg
new file mode 100644
index 000000000..56c8a2491
Binary files /dev/null and b/assets/cover/little-white-flowers.jpg differ
diff --git a/assets/cover/locked-tablet.jpg b/assets/cover/locked-tablet.jpg
new file mode 100644
index 000000000..73b5e3b7c
Binary files /dev/null and b/assets/cover/locked-tablet.jpg differ
diff --git a/assets/cover/mac-and-coffee.jpg b/assets/cover/mac-and-coffee.jpg
new file mode 100644
index 000000000..ace3c94f8
Binary files /dev/null and b/assets/cover/mac-and-coffee.jpg differ
diff --git a/assets/cover/malibu.jpg b/assets/cover/malibu.jpg
new file mode 100644
index 000000000..163939815
Binary files /dev/null and b/assets/cover/malibu.jpg differ
diff --git a/assets/cover/man-cup-laptop.jpg b/assets/cover/man-cup-laptop.jpg
new file mode 100644
index 000000000..90a302498
Binary files /dev/null and b/assets/cover/man-cup-laptop.jpg differ
diff --git a/assets/cover/man-red-sunset.jpg b/assets/cover/man-red-sunset.jpg
new file mode 100644
index 000000000..a342ab292
Binary files /dev/null and b/assets/cover/man-red-sunset.jpg differ
diff --git a/assets/cover/maple-leaf-palette.jpg b/assets/cover/maple-leaf-palette.jpg
new file mode 100644
index 000000000..c48194878
Binary files /dev/null and b/assets/cover/maple-leaf-palette.jpg differ
diff --git a/assets/cover/mask-quiet.jpg b/assets/cover/mask-quiet.jpg
new file mode 100644
index 000000000..49bf5d6e7
Binary files /dev/null and b/assets/cover/mask-quiet.jpg differ
diff --git a/assets/cover/matrix-flow.jpg b/assets/cover/matrix-flow.jpg
new file mode 100644
index 000000000..cac6612c6
Binary files /dev/null and b/assets/cover/matrix-flow.jpg differ
diff --git a/assets/cover/measuring.jpg b/assets/cover/measuring.jpg
new file mode 100644
index 000000000..cb88c9279
Binary files /dev/null and b/assets/cover/measuring.jpg differ
diff --git a/assets/cover/memories-of-pineapple-1.jpg b/assets/cover/memories-of-pineapple-1.jpg
new file mode 100644
index 000000000..937aa5536
Binary files /dev/null and b/assets/cover/memories-of-pineapple-1.jpg differ
diff --git a/assets/cover/memories-of-pineapple-2.jpg b/assets/cover/memories-of-pineapple-2.jpg
new file mode 100644
index 000000000..970ebae04
Binary files /dev/null and b/assets/cover/memories-of-pineapple-2.jpg differ
diff --git a/assets/cover/memories-of-pineapple-3.jpg b/assets/cover/memories-of-pineapple-3.jpg
new file mode 100644
index 000000000..92bcb48fd
Binary files /dev/null and b/assets/cover/memories-of-pineapple-3.jpg differ
diff --git a/assets/cover/messy-computer.jpg b/assets/cover/messy-computer.jpg
new file mode 100644
index 000000000..7735a588c
Binary files /dev/null and b/assets/cover/messy-computer.jpg differ
diff --git a/assets/cover/messy-papers.jpg b/assets/cover/messy-papers.jpg
new file mode 100644
index 000000000..aaada0e01
Binary files /dev/null and b/assets/cover/messy-papers.jpg differ
diff --git a/assets/cover/meteora.jpg b/assets/cover/meteora.jpg
new file mode 100644
index 000000000..cbbb5a0cf
Binary files /dev/null and b/assets/cover/meteora.jpg differ
diff --git a/assets/cover/metro-arrival.jpg b/assets/cover/metro-arrival.jpg
new file mode 100644
index 000000000..fc1b4f275
Binary files /dev/null and b/assets/cover/metro-arrival.jpg differ
diff --git a/assets/cover/metro-tunnel.jpg b/assets/cover/metro-tunnel.jpg
new file mode 100644
index 000000000..1803f6aa1
Binary files /dev/null and b/assets/cover/metro-tunnel.jpg differ
diff --git a/assets/cover/misty-mountains.jpg b/assets/cover/misty-mountains.jpg
new file mode 100644
index 000000000..0d5724325
Binary files /dev/null and b/assets/cover/misty-mountains.jpg differ
diff --git a/assets/cover/mountain-lake-2.jpg b/assets/cover/mountain-lake-2.jpg
new file mode 100644
index 000000000..1ae53aff5
Binary files /dev/null and b/assets/cover/mountain-lake-2.jpg differ
diff --git a/assets/cover/mountain-lake-cottage-2.jpg b/assets/cover/mountain-lake-cottage-2.jpg
new file mode 100644
index 000000000..7045268e1
Binary files /dev/null and b/assets/cover/mountain-lake-cottage-2.jpg differ
diff --git a/assets/cover/mountain-lake-cottage.jpg b/assets/cover/mountain-lake-cottage.jpg
new file mode 100644
index 000000000..a56a86975
Binary files /dev/null and b/assets/cover/mountain-lake-cottage.jpg differ
diff --git a/assets/cover/mountain-lake.jpg b/assets/cover/mountain-lake.jpg
new file mode 100644
index 000000000..8181791fc
Binary files /dev/null and b/assets/cover/mountain-lake.jpg differ
diff --git a/assets/cover/mug-flower-book.jpg b/assets/cover/mug-flower-book.jpg
new file mode 100644
index 000000000..631769b2a
Binary files /dev/null and b/assets/cover/mug-flower-book.jpg differ
diff --git a/assets/cover/naming-conventions.jpg b/assets/cover/naming-conventions.jpg
new file mode 100644
index 000000000..2d41f9b28
Binary files /dev/null and b/assets/cover/naming-conventions.jpg differ
diff --git a/assets/cover/neon-desk-1.jpg b/assets/cover/neon-desk-1.jpg
new file mode 100644
index 000000000..c59dbd845
Binary files /dev/null and b/assets/cover/neon-desk-1.jpg differ
diff --git a/assets/cover/neon-desk-2.jpg b/assets/cover/neon-desk-2.jpg
new file mode 100644
index 000000000..7ab4eda85
Binary files /dev/null and b/assets/cover/neon-desk-2.jpg differ
diff --git a/assets/cover/new-plant.jpg b/assets/cover/new-plant.jpg
new file mode 100644
index 000000000..028a9e93f
Binary files /dev/null and b/assets/cover/new-plant.jpg differ
diff --git a/assets/cover/new-york-skyline.jpg b/assets/cover/new-york-skyline.jpg
new file mode 100644
index 000000000..cb6113a1e
Binary files /dev/null and b/assets/cover/new-york-skyline.jpg differ
diff --git a/assets/cover/new-york.jpg b/assets/cover/new-york.jpg
new file mode 100644
index 000000000..29ee23246
Binary files /dev/null and b/assets/cover/new-york.jpg differ
diff --git a/assets/cover/night-tram.jpg b/assets/cover/night-tram.jpg
new file mode 100644
index 000000000..508087f76
Binary files /dev/null and b/assets/cover/night-tram.jpg differ
diff --git a/assets/cover/number-2.jpg b/assets/cover/number-2.jpg
new file mode 100644
index 000000000..64f4849f4
Binary files /dev/null and b/assets/cover/number-2.jpg differ
diff --git a/assets/cover/obelisk.jpg b/assets/cover/obelisk.jpg
new file mode 100644
index 000000000..38c0b2c5b
Binary files /dev/null and b/assets/cover/obelisk.jpg differ
diff --git a/assets/cover/old-consoles.jpg b/assets/cover/old-consoles.jpg
new file mode 100644
index 000000000..d4bfbfa3e
Binary files /dev/null and b/assets/cover/old-consoles.jpg differ
diff --git a/assets/cover/orange-coffee-2.jpg b/assets/cover/orange-coffee-2.jpg
new file mode 100644
index 000000000..f6f679a09
Binary files /dev/null and b/assets/cover/orange-coffee-2.jpg differ
diff --git a/assets/cover/orange-coffee-3.jpg b/assets/cover/orange-coffee-3.jpg
new file mode 100644
index 000000000..da4ff8e07
Binary files /dev/null and b/assets/cover/orange-coffee-3.jpg differ
diff --git a/assets/cover/orange-coffee-4.jpg b/assets/cover/orange-coffee-4.jpg
new file mode 100644
index 000000000..c7ed0931e
Binary files /dev/null and b/assets/cover/orange-coffee-4.jpg differ
diff --git a/assets/cover/orange-coffee.jpg b/assets/cover/orange-coffee.jpg
new file mode 100644
index 000000000..7d5b7328b
Binary files /dev/null and b/assets/cover/orange-coffee.jpg differ
diff --git a/assets/cover/orange-flower.jpg b/assets/cover/orange-flower.jpg
new file mode 100644
index 000000000..1946cf757
Binary files /dev/null and b/assets/cover/orange-flower.jpg differ
diff --git a/assets/cover/organizer.jpg b/assets/cover/organizer.jpg
new file mode 100644
index 000000000..f4d8f53b3
Binary files /dev/null and b/assets/cover/organizer.jpg differ
diff --git a/assets/cover/oven-paddle.jpg b/assets/cover/oven-paddle.jpg
new file mode 100644
index 000000000..950bac26e
Binary files /dev/null and b/assets/cover/oven-paddle.jpg differ
diff --git a/assets/cover/overgrown.jpg b/assets/cover/overgrown.jpg
new file mode 100644
index 000000000..2c463bc8c
Binary files /dev/null and b/assets/cover/overgrown.jpg differ
diff --git a/assets/cover/padlocks.jpg b/assets/cover/padlocks.jpg
new file mode 100644
index 000000000..7363a8aec
Binary files /dev/null and b/assets/cover/padlocks.jpg differ
diff --git a/assets/cover/pagodas.jpg b/assets/cover/pagodas.jpg
new file mode 100644
index 000000000..e1df48b28
Binary files /dev/null and b/assets/cover/pagodas.jpg differ
diff --git a/assets/cover/painters-desk.jpg b/assets/cover/painters-desk.jpg
new file mode 100644
index 000000000..b71cf74f5
Binary files /dev/null and b/assets/cover/painters-desk.jpg differ
diff --git a/assets/cover/palm-tree-house.jpg b/assets/cover/palm-tree-house.jpg
new file mode 100644
index 000000000..57e7da476
Binary files /dev/null and b/assets/cover/palm-tree-house.jpg differ
diff --git a/assets/cover/paper-card.jpg b/assets/cover/paper-card.jpg
new file mode 100644
index 000000000..d150b52e0
Binary files /dev/null and b/assets/cover/paper-card.jpg differ
diff --git a/assets/cover/peaches.jpg b/assets/cover/peaches.jpg
new file mode 100644
index 000000000..fb0567f35
Binary files /dev/null and b/assets/cover/peaches.jpg differ
diff --git a/assets/cover/people-on-beach.jpg b/assets/cover/people-on-beach.jpg
new file mode 100644
index 000000000..540f21c4f
Binary files /dev/null and b/assets/cover/people-on-beach.jpg differ
diff --git a/assets/cover/perfect-timing.jpg b/assets/cover/perfect-timing.jpg
new file mode 100644
index 000000000..6930da7bb
Binary files /dev/null and b/assets/cover/perfect-timing.jpg differ
diff --git a/assets/cover/periscope.jpg b/assets/cover/periscope.jpg
new file mode 100644
index 000000000..ef6f3de29
Binary files /dev/null and b/assets/cover/periscope.jpg differ
diff --git a/assets/cover/picking-berries.jpg b/assets/cover/picking-berries.jpg
new file mode 100644
index 000000000..37330084d
Binary files /dev/null and b/assets/cover/picking-berries.jpg differ
diff --git a/assets/cover/pineapple-at-work.jpg b/assets/cover/pineapple-at-work.jpg
new file mode 100644
index 000000000..f5406ce65
Binary files /dev/null and b/assets/cover/pineapple-at-work.jpg differ
diff --git a/assets/cover/pineapple-laptop.jpg b/assets/cover/pineapple-laptop.jpg
new file mode 100644
index 000000000..56668c962
Binary files /dev/null and b/assets/cover/pineapple-laptop.jpg differ
diff --git a/assets/cover/pineapple-on-green.jpg b/assets/cover/pineapple-on-green.jpg
new file mode 100644
index 000000000..2ed13ba9c
Binary files /dev/null and b/assets/cover/pineapple-on-green.jpg differ
diff --git a/assets/cover/pineapple-on-the-rocks.jpg b/assets/cover/pineapple-on-the-rocks.jpg
new file mode 100644
index 000000000..18cddefa8
Binary files /dev/null and b/assets/cover/pineapple-on-the-rocks.jpg differ
diff --git a/assets/cover/pink-flower-tree.jpg b/assets/cover/pink-flower-tree.jpg
new file mode 100644
index 000000000..98fd0df41
Binary files /dev/null and b/assets/cover/pink-flower-tree.jpg differ
diff --git a/assets/cover/pink-flower.jpg b/assets/cover/pink-flower.jpg
new file mode 100644
index 000000000..3557ef161
Binary files /dev/null and b/assets/cover/pink-flower.jpg differ
diff --git a/assets/cover/pink-flowers.jpg b/assets/cover/pink-flowers.jpg
new file mode 100644
index 000000000..f8d0129b7
Binary files /dev/null and b/assets/cover/pink-flowers.jpg differ
diff --git a/assets/cover/planning.jpg b/assets/cover/planning.jpg
new file mode 100644
index 000000000..0a93b7e73
Binary files /dev/null and b/assets/cover/planning.jpg differ
diff --git a/assets/cover/plant-candle.jpg b/assets/cover/plant-candle.jpg
new file mode 100644
index 000000000..adf19bee2
Binary files /dev/null and b/assets/cover/plant-candle.jpg differ
diff --git a/assets/cover/plant-corner.jpg b/assets/cover/plant-corner.jpg
new file mode 100644
index 000000000..f0f29ff6e
Binary files /dev/null and b/assets/cover/plant-corner.jpg differ
diff --git a/assets/cover/playing-fetch.jpg b/assets/cover/playing-fetch.jpg
new file mode 100644
index 000000000..1be56b9fb
Binary files /dev/null and b/assets/cover/playing-fetch.jpg differ
diff --git a/assets/cover/polar-bear.jpg b/assets/cover/polar-bear.jpg
new file mode 100644
index 000000000..47a1b0275
Binary files /dev/null and b/assets/cover/polar-bear.jpg differ
diff --git a/assets/cover/pop-of-green.jpg b/assets/cover/pop-of-green.jpg
new file mode 100644
index 000000000..4004cd423
Binary files /dev/null and b/assets/cover/pop-of-green.jpg differ
diff --git a/assets/cover/portal-timelapse.jpg b/assets/cover/portal-timelapse.jpg
new file mode 100644
index 000000000..98aa39526
Binary files /dev/null and b/assets/cover/portal-timelapse.jpg differ
diff --git a/assets/cover/purple-flower-bunch.jpg b/assets/cover/purple-flower-bunch.jpg
new file mode 100644
index 000000000..ecd466f12
Binary files /dev/null and b/assets/cover/purple-flower-bunch.jpg differ
diff --git a/assets/cover/purple-flower-field.jpg b/assets/cover/purple-flower-field.jpg
new file mode 100644
index 000000000..7456d73b4
Binary files /dev/null and b/assets/cover/purple-flower-field.jpg differ
diff --git a/assets/cover/purple-flower-macro-1.jpg b/assets/cover/purple-flower-macro-1.jpg
new file mode 100644
index 000000000..1a49e9fe8
Binary files /dev/null and b/assets/cover/purple-flower-macro-1.jpg differ
diff --git a/assets/cover/purple-flower-macro-2.jpg b/assets/cover/purple-flower-macro-2.jpg
new file mode 100644
index 000000000..c89ea0a7e
Binary files /dev/null and b/assets/cover/purple-flower-macro-2.jpg differ
diff --git a/assets/cover/purple-flower-macro-3.jpg b/assets/cover/purple-flower-macro-3.jpg
new file mode 100644
index 000000000..93f264d5f
Binary files /dev/null and b/assets/cover/purple-flower-macro-3.jpg differ
diff --git a/assets/cover/purple-flower-macro-4.jpg b/assets/cover/purple-flower-macro-4.jpg
new file mode 100644
index 000000000..2de29273f
Binary files /dev/null and b/assets/cover/purple-flower-macro-4.jpg differ
diff --git a/assets/cover/purple-laptop.jpg b/assets/cover/purple-laptop.jpg
new file mode 100644
index 000000000..c5de817ea
Binary files /dev/null and b/assets/cover/purple-laptop.jpg differ
diff --git a/assets/cover/purple-leaves.jpg b/assets/cover/purple-leaves.jpg
new file mode 100644
index 000000000..eb11f029c
Binary files /dev/null and b/assets/cover/purple-leaves.jpg differ
diff --git a/assets/cover/purple-sunset-beach.jpg b/assets/cover/purple-sunset-beach.jpg
new file mode 100644
index 000000000..7369c27c3
Binary files /dev/null and b/assets/cover/purple-sunset-beach.jpg differ
diff --git a/assets/cover/purple-sunset.jpg b/assets/cover/purple-sunset.jpg
new file mode 100644
index 000000000..64402b3e0
Binary files /dev/null and b/assets/cover/purple-sunset.jpg differ
diff --git a/assets/cover/rabbit-call.jpg b/assets/cover/rabbit-call.jpg
new file mode 100644
index 000000000..216f669b9
Binary files /dev/null and b/assets/cover/rabbit-call.jpg differ
diff --git a/assets/cover/racoon.jpg b/assets/cover/racoon.jpg
new file mode 100644
index 000000000..610e7bf56
Binary files /dev/null and b/assets/cover/racoon.jpg differ
diff --git a/assets/cover/radio-monstera.jpg b/assets/cover/radio-monstera.jpg
new file mode 100644
index 000000000..3ce934beb
Binary files /dev/null and b/assets/cover/radio-monstera.jpg differ
diff --git a/assets/cover/rain-shopping.jpg b/assets/cover/rain-shopping.jpg
new file mode 100644
index 000000000..935c9a8a9
Binary files /dev/null and b/assets/cover/rain-shopping.jpg differ
diff --git a/assets/cover/red-berries.jpg b/assets/cover/red-berries.jpg
new file mode 100644
index 000000000..488392141
Binary files /dev/null and b/assets/cover/red-berries.jpg differ
diff --git a/assets/cover/red-light.jpg b/assets/cover/red-light.jpg
new file mode 100644
index 000000000..21e01c24d
Binary files /dev/null and b/assets/cover/red-light.jpg differ
diff --git a/assets/cover/red-mountain-range.jpg b/assets/cover/red-mountain-range.jpg
new file mode 100644
index 000000000..e8d7d4c4e
Binary files /dev/null and b/assets/cover/red-mountain-range.jpg differ
diff --git a/assets/cover/red-mountain.jpg b/assets/cover/red-mountain.jpg
new file mode 100644
index 000000000..70c1f53f9
Binary files /dev/null and b/assets/cover/red-mountain.jpg differ
diff --git a/assets/cover/red-petals.jpg b/assets/cover/red-petals.jpg
new file mode 100644
index 000000000..4d6d123cf
Binary files /dev/null and b/assets/cover/red-petals.jpg differ
diff --git a/assets/cover/red-succulent.jpg b/assets/cover/red-succulent.jpg
new file mode 100644
index 000000000..f75590a25
Binary files /dev/null and b/assets/cover/red-succulent.jpg differ
diff --git a/assets/cover/reflection-on-lake.jpg b/assets/cover/reflection-on-lake.jpg
new file mode 100644
index 000000000..bea1f66ce
Binary files /dev/null and b/assets/cover/reflection-on-lake.jpg differ
diff --git a/assets/cover/river-flow.jpg b/assets/cover/river-flow.jpg
new file mode 100644
index 000000000..2bc1ab5cf
Binary files /dev/null and b/assets/cover/river-flow.jpg differ
diff --git a/assets/cover/river-house-lights.jpg b/assets/cover/river-house-lights.jpg
new file mode 100644
index 000000000..bd8f6ac6a
Binary files /dev/null and b/assets/cover/river-house-lights.jpg differ
diff --git a/assets/cover/river-houses.jpg b/assets/cover/river-houses.jpg
new file mode 100644
index 000000000..e26028450
Binary files /dev/null and b/assets/cover/river-houses.jpg differ
diff --git a/assets/cover/rock-climbing.jpg b/assets/cover/rock-climbing.jpg
new file mode 100644
index 000000000..1165f3568
Binary files /dev/null and b/assets/cover/rock-climbing.jpg differ
diff --git a/assets/cover/rocky-beach-2.jpg b/assets/cover/rocky-beach-2.jpg
new file mode 100644
index 000000000..cca08a808
Binary files /dev/null and b/assets/cover/rocky-beach-2.jpg differ
diff --git a/assets/cover/rocky-beach-3.jpg b/assets/cover/rocky-beach-3.jpg
new file mode 100644
index 000000000..0afa40000
Binary files /dev/null and b/assets/cover/rocky-beach-3.jpg differ
diff --git a/assets/cover/rocky-beach-waves.jpg b/assets/cover/rocky-beach-waves.jpg
new file mode 100644
index 000000000..9cfce107a
Binary files /dev/null and b/assets/cover/rocky-beach-waves.jpg differ
diff --git a/assets/cover/rocky-beach.jpg b/assets/cover/rocky-beach.jpg
new file mode 100644
index 000000000..667f5f069
Binary files /dev/null and b/assets/cover/rocky-beach.jpg differ
diff --git a/assets/cover/rocky-lake.jpg b/assets/cover/rocky-lake.jpg
new file mode 100644
index 000000000..462bdefb5
Binary files /dev/null and b/assets/cover/rocky-lake.jpg differ
diff --git a/assets/cover/rocky-mountains-2.jpg b/assets/cover/rocky-mountains-2.jpg
new file mode 100644
index 000000000..b447ae07e
Binary files /dev/null and b/assets/cover/rocky-mountains-2.jpg differ
diff --git a/assets/cover/rocky-mountains.jpg b/assets/cover/rocky-mountains.jpg
new file mode 100644
index 000000000..2f856a812
Binary files /dev/null and b/assets/cover/rocky-mountains.jpg differ
diff --git a/assets/cover/round-leaves.jpg b/assets/cover/round-leaves.jpg
new file mode 100644
index 000000000..9fb586d7e
Binary files /dev/null and b/assets/cover/round-leaves.jpg differ
diff --git a/assets/cover/rustic-cup.jpg b/assets/cover/rustic-cup.jpg
new file mode 100644
index 000000000..24513ac37
Binary files /dev/null and b/assets/cover/rustic-cup.jpg differ
diff --git a/assets/cover/sail-away-2.jpg b/assets/cover/sail-away-2.jpg
new file mode 100644
index 000000000..da87dddf2
Binary files /dev/null and b/assets/cover/sail-away-2.jpg differ
diff --git a/assets/cover/sail-away.jpg b/assets/cover/sail-away.jpg
new file mode 100644
index 000000000..a9cc583c1
Binary files /dev/null and b/assets/cover/sail-away.jpg differ
diff --git a/assets/cover/sailing-alone.jpg b/assets/cover/sailing-alone.jpg
new file mode 100644
index 000000000..7f2018d12
Binary files /dev/null and b/assets/cover/sailing-alone.jpg differ
diff --git a/assets/cover/salad-1.jpg b/assets/cover/salad-1.jpg
new file mode 100644
index 000000000..24de74119
Binary files /dev/null and b/assets/cover/salad-1.jpg differ
diff --git a/assets/cover/salad-2.jpg b/assets/cover/salad-2.jpg
new file mode 100644
index 000000000..8d6ac8d72
Binary files /dev/null and b/assets/cover/salad-2.jpg differ
diff --git a/assets/cover/san-francisco-skyline.jpg b/assets/cover/san-francisco-skyline.jpg
new file mode 100644
index 000000000..5a3018725
Binary files /dev/null and b/assets/cover/san-francisco-skyline.jpg differ
diff --git a/assets/cover/sea-view-2.jpg b/assets/cover/sea-view-2.jpg
new file mode 100644
index 000000000..f64025c78
Binary files /dev/null and b/assets/cover/sea-view-2.jpg differ
diff --git a/assets/cover/sea-view.jpg b/assets/cover/sea-view.jpg
new file mode 100644
index 000000000..f826d16a5
Binary files /dev/null and b/assets/cover/sea-view.jpg differ
diff --git a/assets/cover/secret-tree.jpg b/assets/cover/secret-tree.jpg
new file mode 100644
index 000000000..48baf9f23
Binary files /dev/null and b/assets/cover/secret-tree.jpg differ
diff --git a/assets/cover/shapes.jpg b/assets/cover/shapes.jpg
new file mode 100644
index 000000000..0ce9f0d7b
Binary files /dev/null and b/assets/cover/shapes.jpg differ
diff --git a/assets/cover/shelf-plant.jpg b/assets/cover/shelf-plant.jpg
new file mode 100644
index 000000000..35f757b25
Binary files /dev/null and b/assets/cover/shelf-plant.jpg differ
diff --git a/assets/cover/shell-focus.jpg b/assets/cover/shell-focus.jpg
new file mode 100644
index 000000000..9b5bdeb7f
Binary files /dev/null and b/assets/cover/shell-focus.jpg differ
diff --git a/assets/cover/silver-flat-screen.jpg b/assets/cover/silver-flat-screen.jpg
new file mode 100644
index 000000000..612b84d81
Binary files /dev/null and b/assets/cover/silver-flat-screen.jpg differ
diff --git a/assets/cover/sleepy-cat.jpg b/assets/cover/sleepy-cat.jpg
new file mode 100644
index 000000000..0949809e4
Binary files /dev/null and b/assets/cover/sleepy-cat.jpg differ
diff --git a/assets/cover/sliced-fruits.jpg b/assets/cover/sliced-fruits.jpg
new file mode 100644
index 000000000..391563233
Binary files /dev/null and b/assets/cover/sliced-fruits.jpg differ
diff --git a/assets/cover/snowy-mountains.jpg b/assets/cover/snowy-mountains.jpg
new file mode 100644
index 000000000..b79095357
Binary files /dev/null and b/assets/cover/snowy-mountains.jpg differ
diff --git a/assets/cover/sofia-tram.jpg b/assets/cover/sofia-tram.jpg
new file mode 100644
index 000000000..361a554a0
Binary files /dev/null and b/assets/cover/sofia-tram.jpg differ
diff --git a/assets/cover/solitude-beach.jpg b/assets/cover/solitude-beach.jpg
new file mode 100644
index 000000000..437cc4879
Binary files /dev/null and b/assets/cover/solitude-beach.jpg differ
diff --git a/assets/cover/spanish-resort.jpg b/assets/cover/spanish-resort.jpg
new file mode 100644
index 000000000..5b68a0f8b
Binary files /dev/null and b/assets/cover/spanish-resort.jpg differ
diff --git a/assets/cover/sparkles.jpg b/assets/cover/sparkles.jpg
new file mode 100644
index 000000000..0030999ec
Binary files /dev/null and b/assets/cover/sparkles.jpg differ
diff --git a/assets/cover/standing-stones.jpg b/assets/cover/standing-stones.jpg
new file mode 100644
index 000000000..66f242abb
Binary files /dev/null and b/assets/cover/standing-stones.jpg differ
diff --git a/assets/cover/stars-n-snow.jpg b/assets/cover/stars-n-snow.jpg
new file mode 100644
index 000000000..78799f470
Binary files /dev/null and b/assets/cover/stars-n-snow.jpg differ
diff --git a/assets/cover/strawberries.jpg b/assets/cover/strawberries.jpg
new file mode 100644
index 000000000..5b8aefeae
Binary files /dev/null and b/assets/cover/strawberries.jpg differ
diff --git a/assets/cover/succulent-1.jpg b/assets/cover/succulent-1.jpg
new file mode 100644
index 000000000..35fea789d
Binary files /dev/null and b/assets/cover/succulent-1.jpg differ
diff --git a/assets/cover/succulent-10.jpg b/assets/cover/succulent-10.jpg
new file mode 100644
index 000000000..7d4305f1e
Binary files /dev/null and b/assets/cover/succulent-10.jpg differ
diff --git a/assets/cover/succulent-11.jpg b/assets/cover/succulent-11.jpg
new file mode 100644
index 000000000..6a1e62684
Binary files /dev/null and b/assets/cover/succulent-11.jpg differ
diff --git a/assets/cover/succulent-2.jpg b/assets/cover/succulent-2.jpg
new file mode 100644
index 000000000..8433a032a
Binary files /dev/null and b/assets/cover/succulent-2.jpg differ
diff --git a/assets/cover/succulent-3.jpg b/assets/cover/succulent-3.jpg
new file mode 100644
index 000000000..054491f57
Binary files /dev/null and b/assets/cover/succulent-3.jpg differ
diff --git a/assets/cover/succulent-4.jpg b/assets/cover/succulent-4.jpg
new file mode 100644
index 000000000..b114b5e4c
Binary files /dev/null and b/assets/cover/succulent-4.jpg differ
diff --git a/assets/cover/succulent-5.jpg b/assets/cover/succulent-5.jpg
new file mode 100644
index 000000000..0ff47602e
Binary files /dev/null and b/assets/cover/succulent-5.jpg differ
diff --git a/assets/cover/succulent-6.jpg b/assets/cover/succulent-6.jpg
new file mode 100644
index 000000000..665f7dfd1
Binary files /dev/null and b/assets/cover/succulent-6.jpg differ
diff --git a/assets/cover/succulent-7.jpg b/assets/cover/succulent-7.jpg
new file mode 100644
index 000000000..b67f2202c
Binary files /dev/null and b/assets/cover/succulent-7.jpg differ
diff --git a/assets/cover/succulent-8.jpg b/assets/cover/succulent-8.jpg
new file mode 100644
index 000000000..c7c3c3779
Binary files /dev/null and b/assets/cover/succulent-8.jpg differ
diff --git a/assets/cover/succulent-9.jpg b/assets/cover/succulent-9.jpg
new file mode 100644
index 000000000..6e2502a51
Binary files /dev/null and b/assets/cover/succulent-9.jpg differ
diff --git a/assets/cover/succulent-crowd.jpg b/assets/cover/succulent-crowd.jpg
new file mode 100644
index 000000000..51899ef43
Binary files /dev/null and b/assets/cover/succulent-crowd.jpg differ
diff --git a/assets/cover/succulent-red-light.jpg b/assets/cover/succulent-red-light.jpg
new file mode 100644
index 000000000..07cea47fd
Binary files /dev/null and b/assets/cover/succulent-red-light.jpg differ
diff --git a/assets/cover/sunflowers.jpg b/assets/cover/sunflowers.jpg
new file mode 100644
index 000000000..b76f5a6c7
Binary files /dev/null and b/assets/cover/sunflowers.jpg differ
diff --git a/assets/cover/sunrise-over-city.jpg b/assets/cover/sunrise-over-city.jpg
new file mode 100644
index 000000000..7cff74ee4
Binary files /dev/null and b/assets/cover/sunrise-over-city.jpg differ
diff --git a/assets/cover/sunrise-over-mountains.jpg b/assets/cover/sunrise-over-mountains.jpg
new file mode 100644
index 000000000..e4eb91811
Binary files /dev/null and b/assets/cover/sunrise-over-mountains.jpg differ
diff --git a/assets/cover/switzerland-night.jpg b/assets/cover/switzerland-night.jpg
new file mode 100644
index 000000000..f06a1ac87
Binary files /dev/null and b/assets/cover/switzerland-night.jpg differ
diff --git a/assets/cover/symmetry-cloudy-mountain.jpg b/assets/cover/symmetry-cloudy-mountain.jpg
new file mode 100644
index 000000000..e5e7847ed
Binary files /dev/null and b/assets/cover/symmetry-cloudy-mountain.jpg differ
diff --git a/assets/cover/taking-photos.jpg b/assets/cover/taking-photos.jpg
new file mode 100644
index 000000000..5eb646f17
Binary files /dev/null and b/assets/cover/taking-photos.jpg differ
diff --git a/assets/cover/tea-laptop-table.jpg b/assets/cover/tea-laptop-table.jpg
new file mode 100644
index 000000000..183537f06
Binary files /dev/null and b/assets/cover/tea-laptop-table.jpg differ
diff --git a/assets/cover/tent-stars.jpg b/assets/cover/tent-stars.jpg
new file mode 100644
index 000000000..a879f7a38
Binary files /dev/null and b/assets/cover/tent-stars.jpg differ
diff --git a/assets/cover/terminal.jpg b/assets/cover/terminal.jpg
new file mode 100644
index 000000000..4e00c0f95
Binary files /dev/null and b/assets/cover/terminal.jpg differ
diff --git a/assets/cover/thread.jpg b/assets/cover/thread.jpg
new file mode 100644
index 000000000..65d3b894d
Binary files /dev/null and b/assets/cover/thread.jpg differ
diff --git a/assets/cover/three-vases.jpg b/assets/cover/three-vases.jpg
new file mode 100644
index 000000000..9032e89e2
Binary files /dev/null and b/assets/cover/three-vases.jpg differ
diff --git a/assets/cover/tomatoes.jpg b/assets/cover/tomatoes.jpg
new file mode 100644
index 000000000..68b893676
Binary files /dev/null and b/assets/cover/tomatoes.jpg differ
diff --git a/assets/cover/tools.jpg b/assets/cover/tools.jpg
new file mode 100644
index 000000000..f764a41ee
Binary files /dev/null and b/assets/cover/tools.jpg differ
diff --git a/assets/cover/touch-flower.jpg b/assets/cover/touch-flower.jpg
new file mode 100644
index 000000000..57ab4d978
Binary files /dev/null and b/assets/cover/touch-flower.jpg differ
diff --git a/assets/cover/tram-car-2.jpg b/assets/cover/tram-car-2.jpg
new file mode 100644
index 000000000..473359988
Binary files /dev/null and b/assets/cover/tram-car-2.jpg differ
diff --git a/assets/cover/tram-car.jpg b/assets/cover/tram-car.jpg
new file mode 100644
index 000000000..9a5df981a
Binary files /dev/null and b/assets/cover/tram-car.jpg differ
diff --git a/assets/cover/tranquil-lake.jpg b/assets/cover/tranquil-lake.jpg
new file mode 100644
index 000000000..2d06437c9
Binary files /dev/null and b/assets/cover/tranquil-lake.jpg differ
diff --git a/assets/cover/tranquility.jpg b/assets/cover/tranquility.jpg
new file mode 100644
index 000000000..c1e9566aa
Binary files /dev/null and b/assets/cover/tranquility.jpg differ
diff --git a/assets/cover/travel-mug-1.jpg b/assets/cover/travel-mug-1.jpg
new file mode 100644
index 000000000..46eaee191
Binary files /dev/null and b/assets/cover/travel-mug-1.jpg differ
diff --git a/assets/cover/travel-mug-2.jpg b/assets/cover/travel-mug-2.jpg
new file mode 100644
index 000000000..32bc12e78
Binary files /dev/null and b/assets/cover/travel-mug-2.jpg differ
diff --git a/assets/cover/travel-mug-3.jpg b/assets/cover/travel-mug-3.jpg
new file mode 100644
index 000000000..d5215b785
Binary files /dev/null and b/assets/cover/travel-mug-3.jpg differ
diff --git a/assets/cover/tree-roots.jpg b/assets/cover/tree-roots.jpg
new file mode 100644
index 000000000..97ca8dc09
Binary files /dev/null and b/assets/cover/tree-roots.jpg differ
diff --git a/assets/cover/trippy-chemicals.jpg b/assets/cover/trippy-chemicals.jpg
new file mode 100644
index 000000000..318fc3b79
Binary files /dev/null and b/assets/cover/trippy-chemicals.jpg differ
diff --git a/assets/cover/tropical-bike.jpg b/assets/cover/tropical-bike.jpg
new file mode 100644
index 000000000..4957e3fae
Binary files /dev/null and b/assets/cover/tropical-bike.jpg differ
diff --git a/assets/cover/tropical-waterfall-2.jpg b/assets/cover/tropical-waterfall-2.jpg
new file mode 100644
index 000000000..5266b662b
Binary files /dev/null and b/assets/cover/tropical-waterfall-2.jpg differ
diff --git a/assets/cover/tropical-waterfall.jpg b/assets/cover/tropical-waterfall.jpg
new file mode 100644
index 000000000..0f9ed24d5
Binary files /dev/null and b/assets/cover/tropical-waterfall.jpg differ
diff --git a/assets/cover/tulips-and-reeds.jpg b/assets/cover/tulips-and-reeds.jpg
new file mode 100644
index 000000000..125971651
Binary files /dev/null and b/assets/cover/tulips-and-reeds.jpg differ
diff --git a/assets/cover/two-cities.jpg b/assets/cover/two-cities.jpg
new file mode 100644
index 000000000..01c057a6a
Binary files /dev/null and b/assets/cover/two-cities.jpg differ
diff --git a/assets/cover/two-doors.jpg b/assets/cover/two-doors.jpg
new file mode 100644
index 000000000..d83f38033
Binary files /dev/null and b/assets/cover/two-doors.jpg differ
diff --git a/assets/cover/two-flower-vases.jpg b/assets/cover/two-flower-vases.jpg
new file mode 100644
index 000000000..53c58125f
Binary files /dev/null and b/assets/cover/two-flower-vases.jpg differ
diff --git a/assets/cover/two-lighthouses.jpg b/assets/cover/two-lighthouses.jpg
new file mode 100644
index 000000000..a41890c75
Binary files /dev/null and b/assets/cover/two-lighthouses.jpg differ
diff --git a/assets/cover/type-stamps.jpg b/assets/cover/type-stamps.jpg
new file mode 100644
index 000000000..1ade24dd0
Binary files /dev/null and b/assets/cover/type-stamps.jpg differ
diff --git a/assets/cover/typewriter.jpg b/assets/cover/typewriter.jpg
new file mode 100644
index 000000000..2994bf25f
Binary files /dev/null and b/assets/cover/typewriter.jpg differ
diff --git a/assets/cover/typing.jpg b/assets/cover/typing.jpg
new file mode 100644
index 000000000..db80745b9
Binary files /dev/null and b/assets/cover/typing.jpg differ
diff --git a/assets/cover/typography.jpg b/assets/cover/typography.jpg
new file mode 100644
index 000000000..385063faf
Binary files /dev/null and b/assets/cover/typography.jpg differ
diff --git a/assets/cover/u-got-this.jpg b/assets/cover/u-got-this.jpg
new file mode 100644
index 000000000..d5abe939f
Binary files /dev/null and b/assets/cover/u-got-this.jpg differ
diff --git a/assets/cover/umbrellas.jpg b/assets/cover/umbrellas.jpg
new file mode 100644
index 000000000..071e05498
Binary files /dev/null and b/assets/cover/umbrellas.jpg differ
diff --git a/assets/cover/violin.jpg b/assets/cover/violin.jpg
new file mode 100644
index 000000000..e6978636f
Binary files /dev/null and b/assets/cover/violin.jpg differ
diff --git a/assets/cover/volcano-sunset.jpg b/assets/cover/volcano-sunset.jpg
new file mode 100644
index 000000000..58558e4a9
Binary files /dev/null and b/assets/cover/volcano-sunset.jpg differ
diff --git a/assets/cover/walking-on-top.jpg b/assets/cover/walking-on-top.jpg
new file mode 100644
index 000000000..cc2b18895
Binary files /dev/null and b/assets/cover/walking-on-top.jpg differ
diff --git a/assets/cover/walking.jpg b/assets/cover/walking.jpg
new file mode 100644
index 000000000..1014e73db
Binary files /dev/null and b/assets/cover/walking.jpg differ
diff --git a/assets/cover/washed-ashore.jpg b/assets/cover/washed-ashore.jpg
new file mode 100644
index 000000000..bafe143e2
Binary files /dev/null and b/assets/cover/washed-ashore.jpg differ
diff --git a/assets/cover/watermelon-bike.jpg b/assets/cover/watermelon-bike.jpg
new file mode 100644
index 000000000..afc020a3e
Binary files /dev/null and b/assets/cover/watermelon-bike.jpg differ
diff --git a/assets/cover/waves-from-above-2.jpg b/assets/cover/waves-from-above-2.jpg
new file mode 100644
index 000000000..7a440cf3d
Binary files /dev/null and b/assets/cover/waves-from-above-2.jpg differ
diff --git a/assets/cover/waves-from-above.jpg b/assets/cover/waves-from-above.jpg
new file mode 100644
index 000000000..9de55b5b6
Binary files /dev/null and b/assets/cover/waves-from-above.jpg differ
diff --git a/assets/cover/waves.jpg b/assets/cover/waves.jpg
new file mode 100644
index 000000000..64974c595
Binary files /dev/null and b/assets/cover/waves.jpg differ
diff --git a/assets/cover/waving-over-lake.jpg b/assets/cover/waving-over-lake.jpg
new file mode 100644
index 000000000..4bbbe07f1
Binary files /dev/null and b/assets/cover/waving-over-lake.jpg differ
diff --git a/assets/cover/wet-lowland-golden-hour.jpg b/assets/cover/wet-lowland-golden-hour.jpg
new file mode 100644
index 000000000..9ccd713b3
Binary files /dev/null and b/assets/cover/wet-lowland-golden-hour.jpg differ
diff --git a/assets/cover/white-flower.jpg b/assets/cover/white-flower.jpg
new file mode 100644
index 000000000..3c8f6d785
Binary files /dev/null and b/assets/cover/white-flower.jpg differ
diff --git a/assets/cover/white-laptop.jpg b/assets/cover/white-laptop.jpg
new file mode 100644
index 000000000..ebb612b4b
Binary files /dev/null and b/assets/cover/white-laptop.jpg differ
diff --git a/assets/cover/white-tablet-2.jpg b/assets/cover/white-tablet-2.jpg
new file mode 100644
index 000000000..18f46518b
Binary files /dev/null and b/assets/cover/white-tablet-2.jpg differ
diff --git a/assets/cover/white-tablet.jpg b/assets/cover/white-tablet.jpg
new file mode 100644
index 000000000..f836199ab
Binary files /dev/null and b/assets/cover/white-tablet.jpg differ
diff --git a/assets/cover/wooden-bowl.jpg b/assets/cover/wooden-bowl.jpg
new file mode 100644
index 000000000..41c35c9b8
Binary files /dev/null and b/assets/cover/wooden-bowl.jpg differ
diff --git a/assets/cover/work-hard-computer.jpg b/assets/cover/work-hard-computer.jpg
new file mode 100644
index 000000000..c53056107
Binary files /dev/null and b/assets/cover/work-hard-computer.jpg differ
diff --git a/assets/cover/working-bee.jpg b/assets/cover/working-bee.jpg
new file mode 100644
index 000000000..16d3ab9a1
Binary files /dev/null and b/assets/cover/working-bee.jpg differ
diff --git a/assets/cover/workspace-with-speaker.jpg b/assets/cover/workspace-with-speaker.jpg
new file mode 100644
index 000000000..0ef7c8401
Binary files /dev/null and b/assets/cover/workspace-with-speaker.jpg differ
diff --git a/assets/cover/yellow-sofa.jpg b/assets/cover/yellow-sofa.jpg
new file mode 100644
index 000000000..bbffce454
Binary files /dev/null and b/assets/cover/yellow-sofa.jpg differ
diff --git a/assets/cover/yellow-white-mug-1.jpg b/assets/cover/yellow-white-mug-1.jpg
new file mode 100644
index 000000000..1b5255676
Binary files /dev/null and b/assets/cover/yellow-white-mug-1.jpg differ
diff --git a/assets/cover/yellow-white-mug-2.jpg b/assets/cover/yellow-white-mug-2.jpg
new file mode 100644
index 000000000..ef3536600
Binary files /dev/null and b/assets/cover/yellow-white-mug-2.jpg differ
diff --git a/assets/cover/zen-indoors.jpg b/assets/cover/zen-indoors.jpg
new file mode 100644
index 000000000..80f2a9f85
Binary files /dev/null and b/assets/cover/zen-indoors.jpg differ
diff --git a/assets/illustrations/async-defer.png b/assets/illustrations/async-defer.png
new file mode 100644
index 000000000..f63c7e875
Binary files /dev/null and b/assets/illustrations/async-defer.png differ
diff --git a/assets/illustrations/big-o-complexity.png b/assets/illustrations/big-o-complexity.png
new file mode 100644
index 000000000..503f9c0aa
Binary files /dev/null and b/assets/illustrations/big-o-complexity.png differ
diff --git a/assets/illustrations/border-radius.png b/assets/illustrations/border-radius.png
new file mode 100644
index 000000000..420dd345b
Binary files /dev/null and b/assets/illustrations/border-radius.png differ
diff --git a/assets/illustrations/chrome-debug-node.png b/assets/illustrations/chrome-debug-node.png
new file mode 100644
index 000000000..400059987
Binary files /dev/null and b/assets/illustrations/chrome-debug-node.png differ
diff --git a/assets/illustrations/ds-binary-search-tree.png b/assets/illustrations/ds-binary-search-tree.png
new file mode 100644
index 000000000..752471316
Binary files /dev/null and b/assets/illustrations/ds-binary-search-tree.png differ
diff --git a/assets/illustrations/ds-binary-tree.png b/assets/illustrations/ds-binary-tree.png
new file mode 100644
index 000000000..6cfaf917b
Binary files /dev/null and b/assets/illustrations/ds-binary-tree.png differ
diff --git a/assets/illustrations/ds-doubly-linked-list.png b/assets/illustrations/ds-doubly-linked-list.png
new file mode 100644
index 000000000..777786e03
Binary files /dev/null and b/assets/illustrations/ds-doubly-linked-list.png differ
diff --git a/assets/illustrations/ds-graph.png b/assets/illustrations/ds-graph.png
new file mode 100644
index 000000000..c2067e7e6
Binary files /dev/null and b/assets/illustrations/ds-graph.png differ
diff --git a/assets/illustrations/ds-linked-list.png b/assets/illustrations/ds-linked-list.png
new file mode 100644
index 000000000..6dc17ab00
Binary files /dev/null and b/assets/illustrations/ds-linked-list.png differ
diff --git a/assets/illustrations/ds-queue.png b/assets/illustrations/ds-queue.png
new file mode 100644
index 000000000..cae020588
Binary files /dev/null and b/assets/illustrations/ds-queue.png differ
diff --git a/assets/illustrations/ds-stack.png b/assets/illustrations/ds-stack.png
new file mode 100644
index 000000000..c32d78ed3
Binary files /dev/null and b/assets/illustrations/ds-stack.png differ
diff --git a/assets/illustrations/ds-tree.png b/assets/illustrations/ds-tree.png
new file mode 100644
index 000000000..9e4d17850
Binary files /dev/null and b/assets/illustrations/ds-tree.png differ
diff --git a/assets/illustrations/flexbox-diagram.png b/assets/illustrations/flexbox-diagram.png
new file mode 100644
index 000000000..43f91f7e5
Binary files /dev/null and b/assets/illustrations/flexbox-diagram.png differ
diff --git a/assets/illustrations/git-fast-forward.png b/assets/illustrations/git-fast-forward.png
new file mode 100644
index 000000000..eadec68e0
Binary files /dev/null and b/assets/illustrations/git-fast-forward.png differ
diff --git a/assets/illustrations/js-array-methods.png b/assets/illustrations/js-array-methods.png
new file mode 100644
index 000000000..a001c6944
Binary files /dev/null and b/assets/illustrations/js-array-methods.png differ
diff --git a/assets/illustrations/js-variable-scope.png b/assets/illustrations/js-variable-scope.png
new file mode 100644
index 000000000..cdb5fc877
Binary files /dev/null and b/assets/illustrations/js-variable-scope.png differ
diff --git a/assets/illustrations/typography-example.png b/assets/illustrations/typography-example.png
new file mode 100644
index 000000000..85e86ba69
Binary files /dev/null and b/assets/illustrations/typography-example.png differ
diff --git a/assets/splash/basics.png b/assets/splash/basics.png
new file mode 100644
index 000000000..3d1ca7166
Binary files /dev/null and b/assets/splash/basics.png differ
diff --git a/assets/splash/blue-computer.png b/assets/splash/blue-computer.png
new file mode 100644
index 000000000..b9a0869ab
Binary files /dev/null and b/assets/splash/blue-computer.png differ
diff --git a/assets/splash/camera.png b/assets/splash/camera.png
new file mode 100644
index 000000000..ae175b5a2
Binary files /dev/null and b/assets/splash/camera.png differ
diff --git a/assets/splash/chess-pawns.png b/assets/splash/chess-pawns.png
new file mode 100644
index 000000000..fbe0dbab1
Binary files /dev/null and b/assets/splash/chess-pawns.png differ
diff --git a/assets/splash/coffee-drip.png b/assets/splash/coffee-drip.png
new file mode 100644
index 000000000..9a1db0c0c
Binary files /dev/null and b/assets/splash/coffee-drip.png differ
diff --git a/assets/splash/coffee-float.png b/assets/splash/coffee-float.png
new file mode 100644
index 000000000..2571f2302
Binary files /dev/null and b/assets/splash/coffee-float.png differ
diff --git a/assets/splash/coffee-phone-tray.png b/assets/splash/coffee-phone-tray.png
new file mode 100644
index 000000000..b18b47454
Binary files /dev/null and b/assets/splash/coffee-phone-tray.png differ
diff --git a/assets/splash/colorful-rocks.png b/assets/splash/colorful-rocks.png
new file mode 100644
index 000000000..daa6d17aa
Binary files /dev/null and b/assets/splash/colorful-rocks.png differ
diff --git a/assets/splash/generator.png b/assets/splash/generator.png
new file mode 100644
index 000000000..20c984060
Binary files /dev/null and b/assets/splash/generator.png differ
diff --git a/assets/splash/glasses-comic.png b/assets/splash/glasses-comic.png
new file mode 100644
index 000000000..a1d5e1ec3
Binary files /dev/null and b/assets/splash/glasses-comic.png differ
diff --git a/assets/splash/hand-screen.png b/assets/splash/hand-screen.png
new file mode 100644
index 000000000..348ad4ed2
Binary files /dev/null and b/assets/splash/hand-screen.png differ
diff --git a/assets/splash/headphones.png b/assets/splash/headphones.png
new file mode 100644
index 000000000..dd542005a
Binary files /dev/null and b/assets/splash/headphones.png differ
diff --git a/assets/splash/hello-world.png b/assets/splash/hello-world.png
new file mode 100644
index 000000000..b8a8aff97
Binary files /dev/null and b/assets/splash/hello-world.png differ
diff --git a/assets/splash/interview.png b/assets/splash/interview.png
new file mode 100644
index 000000000..a47bd599f
Binary files /dev/null and b/assets/splash/interview.png differ
diff --git a/assets/splash/keyboard-coffee.png b/assets/splash/keyboard-coffee.png
new file mode 100644
index 000000000..3b9f6441e
Binary files /dev/null and b/assets/splash/keyboard-coffee.png differ
diff --git a/assets/splash/laptop-coffee.png b/assets/splash/laptop-coffee.png
new file mode 100644
index 000000000..326f9999c
Binary files /dev/null and b/assets/splash/laptop-coffee.png differ
diff --git a/assets/splash/laptop-lamp.png b/assets/splash/laptop-lamp.png
new file mode 100644
index 000000000..393c47e75
Binary files /dev/null and b/assets/splash/laptop-lamp.png differ
diff --git a/assets/splash/laptop-plant.png b/assets/splash/laptop-plant.png
new file mode 100644
index 000000000..05dcfb502
Binary files /dev/null and b/assets/splash/laptop-plant.png differ
diff --git a/assets/splash/laptop-view.png b/assets/splash/laptop-view.png
new file mode 100644
index 000000000..20b527223
Binary files /dev/null and b/assets/splash/laptop-view.png differ
diff --git a/assets/splash/lightbulb.png b/assets/splash/lightbulb.png
new file mode 100644
index 000000000..bf19a0516
Binary files /dev/null and b/assets/splash/lightbulb.png differ
diff --git a/assets/splash/magnifying-glass.png b/assets/splash/magnifying-glass.png
new file mode 100644
index 000000000..95ce0f3ec
Binary files /dev/null and b/assets/splash/magnifying-glass.png differ
diff --git a/assets/splash/matcha.png b/assets/splash/matcha.png
new file mode 100644
index 000000000..02af19adf
Binary files /dev/null and b/assets/splash/matcha.png differ
diff --git a/assets/splash/mobile.png b/assets/splash/mobile.png
new file mode 100644
index 000000000..ba34909e4
Binary files /dev/null and b/assets/splash/mobile.png differ
diff --git a/assets/splash/monsterra.png b/assets/splash/monsterra.png
new file mode 100644
index 000000000..b94f3cd29
Binary files /dev/null and b/assets/splash/monsterra.png differ
diff --git a/assets/splash/plane.png b/assets/splash/plane.png
new file mode 100644
index 000000000..2291795ab
Binary files /dev/null and b/assets/splash/plane.png differ
diff --git a/assets/splash/plant-screen.png b/assets/splash/plant-screen.png
new file mode 100644
index 000000000..5c4d1a5e1
Binary files /dev/null and b/assets/splash/plant-screen.png differ
diff --git a/assets/splash/plant-window.png b/assets/splash/plant-window.png
new file mode 100644
index 000000000..e71097c6c
Binary files /dev/null and b/assets/splash/plant-window.png differ
diff --git a/assets/splash/pots-and-plants.png b/assets/splash/pots-and-plants.png
new file mode 100644
index 000000000..49c3f1b72
Binary files /dev/null and b/assets/splash/pots-and-plants.png differ
diff --git a/assets/splash/purple-flower.png b/assets/splash/purple-flower.png
new file mode 100644
index 000000000..21d6436cf
Binary files /dev/null and b/assets/splash/purple-flower.png differ
diff --git a/assets/splash/succulent-cluster.png b/assets/splash/succulent-cluster.png
new file mode 100644
index 000000000..dee73c853
Binary files /dev/null and b/assets/splash/succulent-cluster.png differ
diff --git a/assets/splash/succulent.png b/assets/splash/succulent.png
new file mode 100644
index 000000000..5f8177fce
Binary files /dev/null and b/assets/splash/succulent.png differ
diff --git a/assets/splash/tablet.png b/assets/splash/tablet.png
new file mode 100644
index 000000000..8cdbf85e5
Binary files /dev/null and b/assets/splash/tablet.png differ
diff --git a/assets/splash/tea-pour.png b/assets/splash/tea-pour.png
new file mode 100644
index 000000000..116fc68eb
Binary files /dev/null and b/assets/splash/tea-pour.png differ
diff --git a/assets/splash/terrarium.png b/assets/splash/terrarium.png
new file mode 100644
index 000000000..f4475acf2
Binary files /dev/null and b/assets/splash/terrarium.png differ
diff --git a/assets/splash/touch-flower.png b/assets/splash/touch-flower.png
new file mode 100644
index 000000000..9c10a5e57
Binary files /dev/null and b/assets/splash/touch-flower.png differ
diff --git a/assets/splash/tranquility.png b/assets/splash/tranquility.png
new file mode 100644
index 000000000..fe1db34e8
Binary files /dev/null and b/assets/splash/tranquility.png differ
diff --git a/assets/splash/widescreen.png b/assets/splash/widescreen.png
new file mode 100644
index 000000000..693e7aec9
Binary files /dev/null and b/assets/splash/widescreen.png differ
diff --git a/assets/splash/work-sunrise.png b/assets/splash/work-sunrise.png
new file mode 100644
index 000000000..2b35f5c5b
Binary files /dev/null and b/assets/splash/work-sunrise.png differ
diff --git a/authors.yaml b/authors.yaml
new file mode 100644
index 000000000..c92fb5fa1
--- /dev/null
+++ b/authors.yaml
@@ -0,0 +1,7 @@
+chalarangelo:
+  name: Angelos Chalaris
+  profile: https://github.com/Chalarangelo
+  intro: I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece.
+    The best snippets from my coding adventures are published here to help others
+    learn to code.
+  github: https://github.com/Chalarangelo
diff --git a/collections/cheatsheets.yaml b/collections/cheatsheets.yaml
new file mode 100644
index 000000000..e10172eb2
--- /dev/null
+++ b/collections/cheatsheets.yaml
@@ -0,0 +1,12 @@
+slug: c/cheatsheets
+name: Cheatsheets
+featured: true
+typeMatcher: cheatsheet
+splash: plant-screen.png
+description: >-
+  Cheatsheets are one of the best ways to present a lot of information in a
+  concise manner. This collection includes cheatsheets for various topics, so
+  that you can look up anything you might need.
+shortDescription: >-
+  A collection of cheatsheets to bookmark and come back to whenever you need to
+  look up anything.
diff --git a/collections/css-background-patterns.yaml b/collections/css-background-patterns.yaml
new file mode 100644
index 000000000..26f04e8cf
--- /dev/null
+++ b/collections/css-background-patterns.yaml
@@ -0,0 +1,14 @@
+slug: c/css-background-patterns
+name: CSS Background Patterns
+featured: true
+snippetIds:
+  - css/s/stripes-pattern
+  - css/s/zig-zag-pattern
+  - css/s/polka-dot-pattern
+  - css/s/checkerboard-pattern
+splash: tea-pour.png
+description: >-
+  CSS can be used to create a variety of background patterns. In this
+  collection, you'll learn how to create a few simple background patterns, such
+  as stripes, zig-zags, polka dots, and checkerboards.
+shortDescription: Learn how to create a variety of background patterns using CSS.
diff --git a/collections/css-button-transitions.yaml b/collections/css-button-transitions.yaml
new file mode 100644
index 000000000..d4b584539
--- /dev/null
+++ b/collections/css-button-transitions.yaml
@@ -0,0 +1,15 @@
+slug: c/css-button-transitions
+name: CSS Button Transitions
+featured: true
+snippetIds:
+  - css/s/button-hover-grow-animation
+  - css/s/button-hover-shrink-animation
+  - css/s/button-hover-fill-animation
+  - css/s/button-focus-swing-animation
+  - css/s/button-border-animation
+splash: plant-window.png
+description: >-
+  CSS transitions are a great way to add some life to your buttons. This snippet
+  collection covers a handful of simple yet useful animations that you can use
+  to make your buttons more interactive.
+shortDescription: Add some life to your buttons with these simple CSS transitions.
diff --git a/collections/css-centering.yaml b/collections/css-centering.yaml
new file mode 100644
index 000000000..135a49825
--- /dev/null
+++ b/collections/css-centering.yaml
@@ -0,0 +1,17 @@
+slug: c/css-centering
+name: CSS Centering
+featured: true
+snippetIds:
+  - articles/s/css-centering
+  - css/s/flexbox-centering
+  - css/s/grid-centering
+  - css/s/transform-centering
+  - css/s/display-table-centering
+splash: keyboard-coffee.png
+description: >-
+  Centering content with CSS is not always straighforward. This snippet
+  collection contains a few handy tips and tricks to help you center anything
+  anywhere.
+shortDescription: >-
+  A collection of techniques for centering HTML elements in any situation using
+  CSS.
diff --git a/collections/css-hover-effects.yaml b/collections/css-hover-effects.yaml
new file mode 100644
index 000000000..cdf826310
--- /dev/null
+++ b/collections/css-hover-effects.yaml
@@ -0,0 +1,20 @@
+slug: c/css-hover-effects
+name: CSS Hover Effects
+featured: true
+snippetIds:
+  - css/s/image-overlay-hover
+  - css/s/image-hover-menu
+  - css/s/hover-additional-content
+  - css/s/image-hover-rotate
+  - css/s/rotating-card
+  - css/s/hover-perspective
+  - css/s/hover-underline-animation
+  - css/s/popout-menu
+  - css/s/navigation-list-item-hover-and-focus-effect
+  - css/s/mouse-cursor-gradient-tracking
+splash: hand-screen.png
+description: >-
+  You can use CSS to create some pretty cool hover effects. In this collection,
+  we'll look at some popular techniques for creating hover effects to spice up
+  your next web project.
+shortDescription: A collection of cool CSS hover effects to spice up your next web project.
diff --git a/collections/css/animation.yaml b/collections/css/animation.yaml
new file mode 100644
index 000000000..e79c0e3e4
--- /dev/null
+++ b/collections/css/animation.yaml
@@ -0,0 +1,16 @@
+slug: css/t/animation
+name: CSS Animations
+featured: true
+miniName: Animation
+parent: css
+languageMatcher: css
+tagMatcher: animation
+description: >-
+  The CSS snippet collection contains utilities and interactive examples for
+  CSS3. It includes modern techniques for creating commonly-used layouts,
+  styling and animating elements, as well as snippets for handling user
+  interactions.
+shortDescription: >-
+  A snippet collection of interactive CSS3 animation code snippets with
+  interactive examples.
+splash: camera.png
diff --git a/collections/css/index.yaml b/collections/css/index.yaml
new file mode 100644
index 000000000..1f8358d70
--- /dev/null
+++ b/collections/css/index.yaml
@@ -0,0 +1,15 @@
+slug: css
+name: CSS Snippets
+shortName: CSS
+topLevel: true
+languageMatcher: css
+featured: true
+description: >-
+  The CSS snippet collection contains utilities and interactive examples for
+  CSS3. It includes modern techniques for creating commonly-used layouts,
+  styling and animating elements, as well as snippets for handling user
+  interactions.
+shortDescription: >-
+  A snippet collection of interactive CSS3 examples, covering layouts, styling,
+  animation and user interactions.
+splash: camera.png
diff --git a/collections/css/interactivity.yaml b/collections/css/interactivity.yaml
new file mode 100644
index 000000000..67cc1c574
--- /dev/null
+++ b/collections/css/interactivity.yaml
@@ -0,0 +1,17 @@
+slug: css/t/interactivity
+name: CSS Interactivity Snippets
+shortName: CSS Interactivity
+miniName: Interactivity
+featured: true
+parent: css
+languageMatcher: css
+tagMatcher: interactivity
+description: >-
+  The CSS snippet collection contains utilities and interactive examples for
+  CSS3. It includes modern techniques for creating commonly-used layouts,
+  styling and animating elements, as well as snippets for handling user
+  interactions.
+shortDescription: >-
+  A snippet collection of CSS3 code snippets and examples covering common user
+  interactions.
+splash: camera.png
diff --git a/collections/css/layout.yaml b/collections/css/layout.yaml
new file mode 100644
index 000000000..35519eff6
--- /dev/null
+++ b/collections/css/layout.yaml
@@ -0,0 +1,16 @@
+slug: css/t/layout
+name: CSS Layouts
+miniName: Layout
+featured: true
+parent: css
+languageMatcher: css
+tagMatcher: layout
+description: >-
+  The CSS snippet collection contains utilities and interactive examples for
+  CSS3. It includes modern techniques for creating commonly-used layouts,
+  styling and animating elements, as well as snippets for handling user
+  interactions.
+shortDescription: >-
+  Learn how to create common layouts with CSS3, using modern techniques such as
+  flexbox and grid.
+splash: camera.png
diff --git a/collections/css/visual.yaml b/collections/css/visual.yaml
new file mode 100644
index 000000000..d4b9e0e3e
--- /dev/null
+++ b/collections/css/visual.yaml
@@ -0,0 +1,17 @@
+slug: css/t/visual
+name: CSS Visual Snippets
+shortName: CSS Visual
+miniName: Visual
+featured: true
+parent: css
+languageMatcher: css
+tagMatcher: visual
+description: >-
+  The CSS snippet collection contains utilities and interactive examples for
+  CSS3. It includes modern techniques for creating commonly-used layouts,
+  styling and animating elements, as well as snippets for handling user
+  interactions.
+shortDescription: >-
+  A snippet collection of interactive CSS3 visual code snippets with
+  interactive examples.
+splash: camera.png
diff --git a/collections/git/branch.yaml b/collections/git/branch.yaml
new file mode 100644
index 000000000..caf49bb56
--- /dev/null
+++ b/collections/git/branch.yaml
@@ -0,0 +1,17 @@
+slug: git/t/branch
+name: Git Branch Snippets
+shortName: Git Branches
+miniName: Branch
+featured: true
+parent: git
+languageMatcher: git
+tagMatcher: branch
+description: >-
+  The Git snippet collection contains a variety of short tips and tricks for all
+  currently maintained versions of git. It includes most commonly-used commands
+  and covers various use-cases in the form of simplified documentation, complete
+  with multiple examples.
+shortDescription: >-
+  Master git branch commands with this snippet collection of simplified git
+  documentation and tips.
+splash: keyboard-coffee.png
diff --git a/collections/git/commit.yaml b/collections/git/commit.yaml
new file mode 100644
index 000000000..3195ae3a9
--- /dev/null
+++ b/collections/git/commit.yaml
@@ -0,0 +1,17 @@
+slug: git/t/commit
+name: Git Commit Snippets
+shortName: Git Commits
+miniName: Commit
+featured: true
+parent: git
+languageMatcher: git
+tagMatcher: commit
+description: >-
+  The Git snippet collection contains a variety of short tips and tricks for all
+  currently maintained versions of git. It includes most commonly-used commands
+  and covers various use-cases in the form of simplified documentation, complete
+  with multiple examples.
+shortDescription: >-
+  A snippet collection of simplified git documentation and tips covering git
+  commit commands.
+splash: keyboard-coffee.png
diff --git a/collections/git/configuration.yaml b/collections/git/configuration.yaml
new file mode 100644
index 000000000..3cd30e9e5
--- /dev/null
+++ b/collections/git/configuration.yaml
@@ -0,0 +1,17 @@
+slug: git/t/configuration
+name: Git Configuration Snippets
+shortName: Git Configuration
+miniName: Configuration
+featured: true
+parent: git
+languageMatcher: git
+tagMatcher: configuration
+description: >-
+  The Git snippet collection contains a variety of short tips and tricks for all
+  currently maintained versions of git. It includes most commonly-used commands
+  and covers various use-cases in the form of simplified documentation, complete
+  with multiple examples.
+shortDescription: >-
+  Create and manage git configurations with this snippet collection of
+  simplified git documentation and tips.
+splash: keyboard-coffee.png
diff --git a/collections/git/index.yaml b/collections/git/index.yaml
new file mode 100644
index 000000000..045861483
--- /dev/null
+++ b/collections/git/index.yaml
@@ -0,0 +1,15 @@
+slug: git
+name: Git Snippets
+shortName: Git
+topLevel: true
+languageMatcher: git
+featured: true
+description: >-
+  The Git snippet collection contains a variety of short tips and tricks for all
+  currently maintained versions of git. It includes most commonly-used commands
+  and covers various use-cases in the form of simplified documentation, complete
+  with multiple examples.
+shortDescription: >-
+  A snippet collection of simplified git documentation and tips, covering most
+  commonly-used commands and covering various use-cases.
+splash: keyboard-coffee.png
diff --git a/collections/git/repository.yaml b/collections/git/repository.yaml
new file mode 100644
index 000000000..e59dd8209
--- /dev/null
+++ b/collections/git/repository.yaml
@@ -0,0 +1,17 @@
+slug: git/t/repository
+name: Git Repository Snippets
+shortName: Git Repositories
+miniName: Repository
+featured: true
+parent: git
+languageMatcher: git
+tagMatcher: repository
+description: >-
+  The Git snippet collection contains a variety of short tips and tricks for all
+  currently maintained versions of git. It includes most commonly-used commands
+  and covers various use-cases in the form of simplified documentation, complete
+  with multiple examples.
+shortDescription: >-
+  Organize your git repositories with this snippet collection of simplified git
+  documentation and tips.
+splash: keyboard-coffee.png
diff --git a/collections/html-head-basics.yaml b/collections/html-head-basics.yaml
new file mode 100644
index 000000000..2add3c849
--- /dev/null
+++ b/collections/html-head-basics.yaml
@@ -0,0 +1,17 @@
+slug: c/html-head-basics
+name: HTML Head Basics
+featured: true
+snippetIds:
+  - articles/s/html-recommended-minimum-head
+  - articles/s/html-head-social-tags
+  - articles/s/html-head-icons
+  - articles/s/html-head-links
+splash: basics.png
+description: >-
+  Learn how to use the HTML head element to improve your site's SEO, social
+  sharing, and user experience. This collection includes up to date
+  recommendations for a standard setup, including basic metadata, social tags,
+  icons, and links.
+shortDescription: >-
+  Learn how to use the HTML head element to improve your site's SEO, social
+  sharing, and user experience.
diff --git a/collections/js-array-methods.yaml b/collections/js-array-methods.yaml
new file mode 100644
index 000000000..7626f26b8
--- /dev/null
+++ b/collections/js-array-methods.yaml
@@ -0,0 +1,20 @@
+slug: c/js-array-methods
+name: JavaScript Array Methods
+featured: true
+snippetIds:
+  - articles/s/articles/s/js-array-map-vs-foreach
+  - articles/s/4-javascript-array-methods
+  - articles/s/javascript-array-comparison
+  - articles/s/javascript-index-for-of-loop
+  - articles/s/javascript-for-loop-early-break
+  - articles/s/code-anatomy-chaining-reduce-for-loop
+  - articles/s/javascript-async-array-loops
+  - articles/s/js-typecheck-array
+splash: laptop-lamp.png
+description: >-
+  JavaScript arrays offer a lot of data manipulation and transformation methods.
+  This collection will help you learn more about some of the most common ones,
+  as well as introduce you to some more advanced tricks.
+shortDescription: >-
+  Get acquainted with some common JavaScript array methods, as well as some more
+  advanced array tricks.
diff --git a/collections/js-array-set-operations.yaml b/collections/js-array-set-operations.yaml
new file mode 100644
index 000000000..f63fd0993
--- /dev/null
+++ b/collections/js-array-set-operations.yaml
@@ -0,0 +1,22 @@
+slug: c/js-array-set-operations
+name: JavaScript Array Set Operations
+featured: true
+snippetIds:
+  - js/s/union
+  - js/s/intersection
+  - js/s/difference
+  - js/s/symmetric-difference
+  - js/s/union-by
+  - js/s/intersection-by
+  - js/s/difference-by
+  - js/s/symmetric-difference-by
+  - js/s/union-with
+  - js/s/intersection-with
+  - js/s/difference-with
+  - js/s/symmetric-difference-with
+splash: touch-flower.png
+description: >-
+  Mathematical set operations can be easily applied to JavaScript arrays. Learn
+  how to use the union, intersection, difference, and symmetric difference
+  operations with this snippet collection.
+shortDescription: Learn how to apply mathematical set operations to JavaScript arrays.
diff --git a/collections/js-array-tricks.yaml b/collections/js-array-tricks.yaml
new file mode 100644
index 000000000..33a337247
--- /dev/null
+++ b/collections/js-array-tricks.yaml
@@ -0,0 +1,24 @@
+slug: c/js-array-tricks
+name: JavaScript Array Tricks
+featured: true
+snippetIds:
+  - js/s/unique-elements
+  - js/s/compact
+  - js/s/any
+  - js/s/all
+  - js/s/none
+  - js/s/difference
+  - js/s/union
+  - js/s/intersection
+  - js/s/head
+  - js/s/tail
+  - js/s/last
+  - js/s/flatten
+splash: terrarium.png
+description: >-
+  Arrays are one of the most common data types in JavaScript. While there are
+  many libraries that deal with them, here are some awesome tips and tricks you
+  can leverage in your code without adding any external dependencies.
+shortDescription: >-
+  Learn a handful of awesome tips and tricks that you can leverage in your code
+  to make array manipulation a breeze.
diff --git a/collections/js-arrow-functions.yaml b/collections/js-arrow-functions.yaml
new file mode 100644
index 000000000..d34180ae4
--- /dev/null
+++ b/collections/js-arrow-functions.yaml
@@ -0,0 +1,16 @@
+slug: c/js-arrow-functions
+name: JavaScript Arrow Functions
+featured: true
+snippetIds:
+  - articles/s/javascript-arrow-functions
+  - articles/s/javascript-arrow-regular-function-differences
+  - articles/s/javascript-arrow-function-event-listeners
+  - articles/s/javascript-this
+splash: coffee-float.png
+description: >-
+  Arrow functions are one of the most useful tools in a JavaScript developer's
+  arsenal. This collection of introductory articles can help you get started,
+  but can also serve as a reference to refresh your knowledge.
+shortDescription: >-
+  JavaScript arrow functions are a very useful tool to learn and master. Get
+  started with this collection of articles.
diff --git a/collections/js-colors.yaml b/collections/js-colors.yaml
new file mode 100644
index 000000000..86036abb3
--- /dev/null
+++ b/collections/js-colors.yaml
@@ -0,0 +1,27 @@
+slug: c/js-colors
+name: Colors in JavaScript
+featured: true
+snippetIds:
+  - js/s/random-hex-color-code
+  - js/s/rgb-to-hex
+  - js/s/extend-hex
+  - js/s/hex-to-rgb
+  - js/s/to-rgb-array
+  - js/s/to-rgb-object
+  - js/s/rgb-to-hsb
+  - js/s/hsb-to-rgb
+  - js/s/rgb-to-hsl
+  - js/s/hsl-to-rgb
+  - js/s/change-lightness
+  - js/s/to-hsl-array
+  - js/s/to-hsl-object
+splash: colorful-rocks.png
+description: >-
+  Working with color in JavaScript requires some understanding of color formats
+  and conversions. This snippet collection covers a lot of those needs from
+  generating random color hex codes to converting between hex and RGB values and
+  even some more advanced tricks like using the HSL format to alter the
+  lightness of a color.
+shortDescription: >-
+  Working with color requires understanding of color formats and conversions.
+  Luckily, this JavaScript snippet collection's got you covered.
diff --git a/collections/js-comparison.yaml b/collections/js-comparison.yaml
new file mode 100644
index 000000000..ad93e68cf
--- /dev/null
+++ b/collections/js-comparison.yaml
@@ -0,0 +1,24 @@
+slug: c/js-comparison
+name: JavaScript Comparison
+featured: true
+snippetIds:
+  - articles/s/javascript-equality
+  - articles/s/javascript-value-not-equal-to-itself
+  - articles/s/javascript-object-comparison
+  - articles/s/javascript-array-comparison
+  - articles/s/javascript-date-comparison
+  - articles/s/javascript-object-is-triple-equals
+  - js/s/equals
+  - js/s/matches
+  - js/s/matches-with
+  - js/s/have-same-contents
+  - js/s/is-same-date
+splash: succulent.png
+description: >-
+  Comparing values in JavaScript is one of the most common tasks. Yet, there are
+  a lot of different details to bear in mind when doing so. This collection
+  contains comprehensive explanations of the issues you may face and how to best
+  work around them in your code.
+shortDescription: >-
+  Comparing values in JavaScript is one of the most common tasks, yet it has a
+  lot of things you should bear in mind.
diff --git a/collections/js-data-structures.yaml b/collections/js-data-structures.yaml
new file mode 100644
index 000000000..012e2098d
--- /dev/null
+++ b/collections/js-data-structures.yaml
@@ -0,0 +1,26 @@
+slug: c/js-data-structures
+name: JavaScript Data Structures
+miniName: Data Structures
+parent: js
+featured: true
+snippetIds:
+  - articles/s/js-native-data-structures
+  - articles/s/js-data-structures-queue
+  - articles/s/js-data-structures-stack
+  - articles/s/js-data-structures-linked-list
+  - articles/s/js-data-structures-doubly-linked-list
+  - articles/s/js-data-structures-graph
+  - articles/s/js-data-structures-tree
+  - articles/s/js-data-structures-binary-tree
+  - articles/s/js-data-structures-binary-search-tree
+  - articles/s/js-frequency-map-data-structure
+  - articles/s/big-o-cheatsheet
+splash: purple-flower.png
+description: >-
+  The JavaScript data structures collection includes implementations and
+  examples of some of the most commonly-used data structures. Data structure
+  snippets are best used as a learning resource, as they might require
+  optimizations to run in production.
+shortDescription: >-
+  A guide to some of the most commonly-used data structures, along with
+  JavaScript implementations and examples.
diff --git a/collections/js-event-handling.yaml b/collections/js-event-handling.yaml
new file mode 100644
index 000000000..24b4540d8
--- /dev/null
+++ b/collections/js-event-handling.yaml
@@ -0,0 +1,28 @@
+slug: c/js-event-handling
+name: JavaScript Event Handling
+featured: true
+snippetIds:
+  - js/s/on
+  - js/s/off
+  - js/s/listen-once
+  - js/s/on-click-outside
+  - articles/s/javascript-event-bubbling-capturing-delegation
+  - js/s/add-event-listener-all
+  - js/s/remove-event-listener-all
+  - js/s/add-multiple-events
+  - articles/s/javascript-listen-once
+  - articles/s/passive-scroll-listener-performance
+  - js/s/on-scroll-stop
+  - articles/s/javascript-arrow-function-event-listeners
+  - articles/s/detect-caps-lock-is-on
+  - js/s/trigger-event
+  - js/s/on-user-input-change
+splash: monsterra.png
+description: >-
+  Handling events in the browser is a pretty common task with many nuances.
+  Getting it right can save you a lot of frustration and make the user
+  experience much more enjoyable. This collection will help you get started with
+  event handling using JavaScript.
+shortDescription: >-
+  Event handling needs to be done right in JavaScript. Pick up some tips and
+  tricks to create a better user experience.
diff --git a/collections/js-generators.yaml b/collections/js-generators.yaml
new file mode 100644
index 000000000..e0514b8ce
--- /dev/null
+++ b/collections/js-generators.yaml
@@ -0,0 +1,31 @@
+slug: c/js-generators
+name: JavaScript Generator Functions
+featured: true
+snippetIds:
+  - articles/s/javascript-range-generator
+  - js/s/range-generator
+  - js/s/repeat-generator
+  - js/s/cycle-generator
+  - js/s/generator-to-array
+  - js/s/is-generator-function
+  - js/s/chunkify
+  - js/s/date-range-generator
+  - js/s/index-of-substrings
+  - js/s/walk-through
+  - js/s/generate-while
+  - js/s/generate-until
+  - js/s/left-substr-generator
+  - js/s/right-substr-generator
+  - articles/s/javascript-make-iterable
+  - articles/s/javascript-enum
+  - articles/s/javascript-object-array-proxy
+splash: generator.png
+description: >-
+  JavaScript generator functions introduce a way to define an iterative
+  algorithm by writing a function with non-continuous execution. This
+  practically means they allow you to create a new generator every time you call
+  a generator function, which can then be iterated over just like any other
+  iterable.
+shortDescription: >-
+  JavaScript generator functions are an advanced yet very powerful ES6 feature,
+  which you can start using in your code right now.
diff --git a/collections/js-geometry.yaml b/collections/js-geometry.yaml
new file mode 100644
index 000000000..0fa71e375
--- /dev/null
+++ b/collections/js-geometry.yaml
@@ -0,0 +1,17 @@
+slug: c/js-geometry
+name: JavaScript Geometric Operations
+featured: true
+snippetIds:
+  - js/s/euclidean-distance
+  - js/s/midpoint
+  - js/s/vector-distance
+  - js/s/vector-angle
+splash: tea-pour.png
+description: >-
+  JavaScript can be used for many different tasks, including geometric
+  operations. This collection explains some fundamentals, such as calculating
+  the distance between two points, the midpoint of a line, the distance between
+  two vectors, and the angle between them.
+shortDescription: >-
+  Learn how to perform some basic geometric operations in JavaScript with this
+  collection of snippets.
diff --git a/collections/js-interviews.yaml b/collections/js-interviews.yaml
new file mode 100644
index 000000000..463a2a04e
--- /dev/null
+++ b/collections/js-interviews.yaml
@@ -0,0 +1,48 @@
+slug: c/js-interviews
+name: JavaScript Interview Questions
+miniName: Interview Questions
+featured: true
+parent: js
+snippetIds:
+  - articles/s/javascript-equality
+  - articles/s/javascript-truthy-falsy-values
+  - articles/s/javascript-expression-statement
+  - articles/s/javascript-undeclared-undefined-null
+  - articles/s/javascript-variable-hoisting
+  - articles/s/javascript-variable-scope
+  - articles/s/js-callbacks
+  - articles/s/javascript-pass-by-reference-or-pass-by-value
+  - articles/s/javascript-promises
+  - articles/s/javascript-sync-async
+  - articles/s/javascript-classical-vs-prototypal-inheritance
+  - articles/s/javascript-this
+  - articles/s/javascript-shallow-deep-clone
+  - articles/s/javascript-copy-array
+  - articles/s/javascript-object-comparison
+  - articles/s/javascript-array-comparison
+  - articles/s/javascript-array-includes-value
+  - articles/s/js-array-map-vs-foreach
+  - articles/s/javascript-event-bubbling-capturing-delegation
+  - articles/s/javascript-value-not-equal-to-itself
+  - articles/s/javascript-blank-value
+  - articles/s/javascript-string-immutability
+  - articles/s/js-static-instance-methods
+  - articles/s/javascript-arrow-functions
+  - articles/s/javascript-pure-functions
+  - articles/s/javascript-recursion
+  - articles/s/javascript-use-strict
+  - articles/s/js-async-defer
+  - articles/s/javascript-closures
+  - articles/s/javascript-iife
+  - articles/s/javascript-event-loop-explained
+  - articles/s/javascript-prefix-postfix-operators
+  - articles/s/cors-explained
+splash: interview.png
+description: >-
+  Preparing for a job interview requires studying to refresh your knowledge and
+  skills. This collection of JavaScript interview questions is designed to cover
+  some commonly-asked interview questions, using concise answers and simple
+  examples.
+shortDescription: >-
+  Prepare for your next JavaScript interview with this collection of interview
+  questions and answers.
diff --git a/collections/js-logical-operations.yaml b/collections/js-logical-operations.yaml
new file mode 100644
index 000000000..ae2c4b2b7
--- /dev/null
+++ b/collections/js-logical-operations.yaml
@@ -0,0 +1,21 @@
+slug: c/js-logical-operations
+name: JavaScript Logical Operations
+featured: true
+snippetIds:
+  - js/s/and
+  - js/s/or
+  - js/s/not
+  - js/s/xor
+  - js/s/nor
+  - js/s/when
+  - js/s/both
+  - js/s/either
+  - js/s/complement
+splash: chess-pawns.png
+description: >-
+  Boolean logic and logical operations might not come up that often in
+  JavaScript development, but when they do, you'll be glad you know how to use
+  them. This small collection of snippets can help you get started.
+shortDescription: >-
+  Get started with logical operations in JavaScript with this small snippet
+  collection.
diff --git a/collections/js-object-cloning.yaml b/collections/js-object-cloning.yaml
new file mode 100644
index 000000000..650272ee0
--- /dev/null
+++ b/collections/js-object-cloning.yaml
@@ -0,0 +1,14 @@
+slug: c/js-object-cloning
+name: JavaScript Object Cloning
+featured: true
+snippetIds:
+  - articles/s/javascript-shallow-deep-clone
+  - js/s/shallow-clone
+  - js/s/deep-clone
+  - articles/s/javascript-copy-array
+splash: coffee-phone-tray.png
+description: >-
+  JavaScript objects and arrays are a little tricky to clone. Luckily, this
+  collection teaches you all you need to know about different cloning types and
+  techniques.
+shortDescription: Easily clone JavaScript objects and arrays using various techniques.
diff --git a/collections/js-object-key-selection.yaml b/collections/js-object-key-selection.yaml
new file mode 100644
index 000000000..9f994c6b0
--- /dev/null
+++ b/collections/js-object-key-selection.yaml
@@ -0,0 +1,16 @@
+slug: c/js-object-key-selection
+name: JavaScript Object Key Selection
+featured: true
+snippetIds:
+  - js/s/pick
+  - js/s/omit
+  - js/s/pick-by
+  - js/s/omit-by
+splash: succulent-cluster.png
+description: >-
+  Sometimes, JavaScript objects come with a lot of keys and you only need a few
+  of them. Other times, you might want to remove certain keys, instead. Whatever
+  the case, we've got you covered with this snippet collection.
+shortDescription: >-
+  Pick and omit keys from JavaScript objects easily, using the snippets in this
+  collection.
diff --git a/collections/js-object-key-transformations.yaml b/collections/js-object-key-transformations.yaml
new file mode 100644
index 000000000..75b1f9b33
--- /dev/null
+++ b/collections/js-object-key-transformations.yaml
@@ -0,0 +1,16 @@
+slug: c/js-object-key-transformations
+name: JavaScript Object Key Transformations
+featured: true
+snippetIds:
+  - js/s/lowerize
+  - js/s/upperize
+  - js/s/map-keys
+  - js/s/rename-keys
+  - js/s/deep-map-keys
+  - js/s/symbolize-keys
+splash: plant-window.png
+description: >-
+  Sometimes, object keys aren't exactly what you want them to be. Luckily, this
+  snippet collection has you covered with a variety of functions that can help
+  you transform them to your liking.
+shortDescription: Easily transform object keys to your liking with this snippet collection.
diff --git a/collections/js-promises.yaml b/collections/js-promises.yaml
new file mode 100644
index 000000000..3bb228b2c
--- /dev/null
+++ b/collections/js-promises.yaml
@@ -0,0 +1,21 @@
+slug: c/js-promises
+name: JavaScript Promises
+featured: true
+snippetIds:
+  - articles/s/javascript-promises
+  - articles/s/async-javascript-cheatsheet
+  - articles/s/javascript-sync-async
+  - articles/s/javascript-promise-then-catch
+  - articles/s/javascript-promise-then-finally
+  - articles/s/javascript-await-timeout
+  - js/s/debounce-promise
+  - js/s/run-promises-in-series
+splash: blue-computer.png
+description: >-
+  Working with promises in JavaScript is a great way to handle asynchronous
+  operations, yet it can be confusing for many developers. This snippet
+  collection covers the basics of promises and how to use them to handle
+  everyday operations, as well as some more advanced topics.
+shortDescription: >-
+  This snippet collection covers the basics of JavaScript promises and how to
+  use them to handle asynchronous operations in your code.
diff --git a/collections/js-proxy.yaml b/collections/js-proxy.yaml
new file mode 100644
index 000000000..3dafd1217
--- /dev/null
+++ b/collections/js-proxy.yaml
@@ -0,0 +1,23 @@
+slug: c/js-proxy
+name: JavaScript Proxy
+featured: true
+snippetIds:
+  - articles/s/js-proxy-introduction
+  - articles/s/js-dynamic-getter-setter-proxy
+  - articles/s/js-immutable-object-proxy
+  - articles/s/javascript-singleton-proxy
+  - articles/s/js-dynamic-getter-chain-proxy
+  - articles/s/javascript-object-array-proxy
+  - articles/s/js-proxy-array-negative-index
+  - articles/s/js-cannot-extend-proxy-object
+  - articles/s/js-typecheck-proxy
+splash: laptop-coffee.png
+description: >-
+  The JavaScript Proxy object can be a very powerful tool to extend the
+  functionality of objects. In this collection, we will explore the basics of
+  the Proxy object and how to use it in your code. We will also look at a
+  handful of practical examples that show how you can think about using proxies
+  in your code.
+shortDescription: >-
+  The JavaScript Proxy object is a powerful tool you can use to extend the
+  functionality of objects in a variety of interesting ways.
diff --git a/collections/js-random-value-generators.yaml b/collections/js-random-value-generators.yaml
new file mode 100644
index 000000000..c384930b9
--- /dev/null
+++ b/collections/js-random-value-generators.yaml
@@ -0,0 +1,19 @@
+slug: c/js-random-value-generators
+name: JavaScript Random Value Generators
+featured: true
+snippetIds:
+  - js/s/random-number-in-range
+  - js/s/random-integer-in-range
+  - js/s/random-int-array-in-range
+  - js/s/random-alpha-numeric
+  - js/s/random-boolean
+  - js/s/random-hex-color-code
+  - js/s/random-gauss
+splash: matcha.png
+description: >-
+  Random value generators come up in a lot of different situations. This snippet
+  collection consists of a variety of JavaScript solutions, from generating
+  random numbers in a range to strings, booleans and hex color codes.
+shortDescription: >-
+  Quickly and easily generate random integers, strings, booleans, arrays and hex
+  color codes using JavaScript.
diff --git a/collections/js-string-casing.yaml b/collections/js-string-casing.yaml
new file mode 100644
index 000000000..54771dc4e
--- /dev/null
+++ b/collections/js-string-casing.yaml
@@ -0,0 +1,20 @@
+slug: c/js-string-casing
+name: JavaScript String Casing
+featured: true
+snippetIds:
+  - js/s/to-camel-case
+  - js/s/to-snake-case
+  - js/s/to-kebab-case
+  - js/s/to-title-case
+  - js/s/to-sentence-case
+  - js/s/to-pascal-case
+  - js/s/from-camel-case
+splash: tablet.png
+description: >-
+  Converting between string casing formats is common, yet tiresome to do by
+  hand. This collection of snippets will help you convert between the most
+  common string casing formats using JavaScript and a sprinkle of regular
+  expressions.
+shortDescription: >-
+  Convert between the most common string casing formats with pure JavaScript and
+  a sprinkle of regular expressions.
diff --git a/collections/js-unit-conversions.yaml b/collections/js-unit-conversions.yaml
new file mode 100644
index 000000000..33ba034c1
--- /dev/null
+++ b/collections/js-unit-conversions.yaml
@@ -0,0 +1,16 @@
+slug: c/js-unit-conversions
+name: JavaScript Unit Conversions
+featured: true
+snippetIds:
+  - js/s/degrees-to-rads
+  - js/s/rads-to-degrees
+  - js/s/celsius-to-fahrenheit
+  - js/s/fahrenheit-to-celsius
+  - js/s/km-to-miles
+  - js/s/miles-to-km
+splash: basics.png
+description: >-
+  Simple unit conversions come up in a lot of JavaScript applications. This
+  snippet collection covers some of the most common conversions you might need
+  to perform in your JavaScript code.
+shortDescription: Learn how to convert between different units of measurement in JavaScript.
diff --git a/collections/js-url.yaml b/collections/js-url.yaml
new file mode 100644
index 000000000..7f59bd902
--- /dev/null
+++ b/collections/js-url.yaml
@@ -0,0 +1,25 @@
+slug: c/js-url
+name: URLs in JavaScript
+featured: true
+snippetIds:
+  - articles/s/javascript-modify-url-without-reload
+  - articles/s/js-construct-url
+  - articles/s/js-edit-url-params
+  - articles/s/javascript-reload-page
+  - articles/s/js-window-location-cheatsheet
+  - js/s/current-url
+  - js/s/https-redirect
+  - js/s/get-url-parameters
+  - js/s/get-base-url
+  - js/s/redirect
+  - js/s/is-absolute-url
+  - js/s/is-same-origin
+  - js/s/url-join
+splash: pots-and-plants.png
+description: >-
+  URLs are an integral part of the web, which makes working with them an
+  essential skill to have. This snippet collection contains the necessary
+  resources to master URLs in JavaScript and level up your skills.
+shortDescription: >-
+  This snippet collection covers all the necessary resources to master working
+  with URLs in JavaScript.
diff --git a/collections/js/algorithm.yaml b/collections/js/algorithm.yaml
new file mode 100644
index 000000000..4efe8312b
--- /dev/null
+++ b/collections/js/algorithm.yaml
@@ -0,0 +1,15 @@
+slug: js/t/algorithm
+name: JavaScript Algorithms
+miniName: Algorithms
+featured: true
+parent: js
+languageMatcher: javascript
+tagMatcher: algorithm
+description: >-
+  The JavaScript algorithms collection includes implementations and examples
+  of popular algorithms in ES6. Algorithmic snippets are primarily a
+  learning resource, as they might already be implemented natively or
+  require optimizations to run in production.
+shortDescription: >-
+  Learn a handful of popular algorithms, implemented in JavaScript ES6.
+splash: widescreen.png
diff --git a/collections/js/array.yaml b/collections/js/array.yaml
new file mode 100644
index 000000000..014c1a822
--- /dev/null
+++ b/collections/js/array.yaml
@@ -0,0 +1,16 @@
+slug: js/t/array
+name: JavaScript Array Snippets
+shortName: JavaScript Arrays
+miniName: Array
+featured: true
+parent: js
+languageMatcher: javascript
+tagMatcher: array
+description: >-
+  The JavaScript snippet collection contains a wide variety of ES6 helper
+  functions. It includes helpers for dealing with primitives, arrays and
+  objects, as well as algorithms, DOM manipulation functions and Node.js
+  utilities.
+shortDescription: >-
+  Master array manipulation in JavaScript with this ES6 snippet collection.
+splash: plant-screen.png
diff --git a/collections/js/browser.yaml b/collections/js/browser.yaml
new file mode 100644
index 000000000..e4710a52e
--- /dev/null
+++ b/collections/js/browser.yaml
@@ -0,0 +1,17 @@
+slug: js/t/browser
+name: JavaScript Browser Snippets
+shortName: JavaScript Browser
+miniName: Browser
+featured: true
+parent: js
+languageMatcher: javascript
+tagMatcher: browser
+description: >-
+  The JavaScript snippet collection contains a wide variety of ES6 helper
+  functions. Browser snippets include helper functions for selecting,
+  traversing, and manipulating DOM elements, while general-purpose helpers
+  can be found in the JavaScript snippet collection.
+shortDescription: >-
+  Select, traverse and manipulate DOM elements with this collection of
+  JavaScript ES6 snippets.
+splash: laptop-plant.png
diff --git a/collections/js/date.yaml b/collections/js/date.yaml
new file mode 100644
index 000000000..157ad6ced
--- /dev/null
+++ b/collections/js/date.yaml
@@ -0,0 +1,17 @@
+slug: js/t/date
+name: JavaScript Date Snippets
+shortName: JavaScript Dates
+miniName: Date
+featured: true
+parent: js
+languageMatcher: javascript
+tagMatcher: date
+description: >-
+  The JavaScript snippet collection contains a wide variety of ES6 helper
+  functions. It includes helpers for dealing with primitives, arrays and
+  objects, as well as algorithms, DOM manipulation functions and Node.js
+  utilities.
+shortDescription: >-
+  An ES6 snippet collection for formatting and manipulating dates with native
+  JavaScript.
+splash: succulent.png
diff --git a/collections/js/function.yaml b/collections/js/function.yaml
new file mode 100644
index 000000000..d348a07b7
--- /dev/null
+++ b/collections/js/function.yaml
@@ -0,0 +1,15 @@
+slug: js/t/function
+name: JavaScript Function Snippets
+miniName: Function
+featured: true
+parent: js
+languageMatcher: javascript
+tagMatcher: function
+description: >-
+  The JavaScript snippet collection contains a wide variety of ES6 helper
+  functions. It includes helpers for dealing with primitives, arrays and
+  objects, as well as algorithms, DOM manipulation functions and Node.js
+  utilities.
+shortDescription: >-
+  Learn everything about JavaScript functions with this ES6 snippet collection.
+splash: tablet.png
diff --git a/collections/js/index.yaml b/collections/js/index.yaml
new file mode 100644
index 000000000..7667d37b0
--- /dev/null
+++ b/collections/js/index.yaml
@@ -0,0 +1,15 @@
+slug: js
+name: JavaScript Snippets
+shortName: JavaScript
+topLevel: true
+languageMatcher: javascript
+featured: true
+description: >-
+  The JavaScript snippet collection contains a wide variety of ES6 helper
+  functions. It includes helpers for dealing with primitives, arrays and
+  objects, as well as algorithms, DOM manipulation functions and Node.js
+  utilities.
+shortDescription: >-
+  Browse a wide variety of ES6 helper functions, including array operations, DOM
+  manipulation, algorithms and Node.js utilities.
+splash: laptop-plant.png
diff --git a/collections/js/math.yaml b/collections/js/math.yaml
new file mode 100644
index 000000000..c6f99e3bd
--- /dev/null
+++ b/collections/js/math.yaml
@@ -0,0 +1,16 @@
+slug: js/t/math
+name: JavaScript Math Snippets
+shortName: JavaScript Math
+miniName: Math
+featured: true
+parent: js
+languageMatcher: javascript
+tagMatcher: math
+description: >-
+  The JavaScript snippet collection contains a wide variety of ES6 helper
+  functions. It includes helpers for dealing with primitives, arrays and
+  objects, as well as algorithms, DOM manipulation functions and Node.js
+  utilities.
+shortDescription: >-
+  A snippet collection of math helpers and algorithms implemented in JavaScript.
+splash: mobile.png
diff --git a/collections/js/node.yaml b/collections/js/node.yaml
new file mode 100644
index 000000000..2033886cd
--- /dev/null
+++ b/collections/js/node.yaml
@@ -0,0 +1,17 @@
+slug: js/t/node
+name: Node.js Snippets
+shortName: Node.js
+miniName: Node
+featured: true
+parent: js
+languageMatcher: javascript
+tagMatcher: node
+description: >-
+  The Node.js snippet collection contains JavaScript utilities for Node.js
+  18.x. It includes helper functions related to server-side code and
+  filesystem operations, while general-purpose helpers can be found in the
+  JavaScript snippet collection.
+shortDescription: >-
+  Discover a collection of server-side JavaScript utility functions for
+  Node.js 18.x.
+splash: coffee-drip.png
diff --git a/collections/js/object.yaml b/collections/js/object.yaml
new file mode 100644
index 000000000..55d56754c
--- /dev/null
+++ b/collections/js/object.yaml
@@ -0,0 +1,17 @@
+slug: js/t/object
+name: JavaScript Object Snippets
+shortName: JavaScript Objects
+miniName: Object
+featured: true
+parent: js
+languageMatcher: javascript
+tagMatcher: object
+description: >-
+  The JavaScript snippet collection contains a wide variety of ES6 helper
+  functions. It includes helpers for dealing with primitives, arrays and
+  objects, as well as algorithms, DOM manipulation functions and Node.js
+  utilities.
+shortDescription: >-
+  Handle JavaScript objects with ease, using the snippets and tips in this ES6
+  collection.
+splash: tablet.png
diff --git a/collections/js/string.yaml b/collections/js/string.yaml
new file mode 100644
index 000000000..5a6b9de5a
--- /dev/null
+++ b/collections/js/string.yaml
@@ -0,0 +1,15 @@
+slug: js/t/string
+name: JavaScript String Snippets
+miniName: String
+featured: true
+parent: js
+languageMatcher: javascript
+tagMatcher: string
+description: >-
+  The JavaScript snippet collection contains a wide variety of ES6 helper
+  functions. It includes helpers for dealing with primitives, arrays and
+  objects, as well as algorithms, DOM manipulation functions and Node.js
+  utilities.
+shortDescription: >-
+  Master string manipulation in JavaScript with this ES6 snippet collection.
+splash: laptop-plant.png
diff --git a/collections/js/type.yaml b/collections/js/type.yaml
new file mode 100644
index 000000000..661e5b6db
--- /dev/null
+++ b/collections/js/type.yaml
@@ -0,0 +1,16 @@
+slug: js/t/type
+name: JavaScript Type Snippets
+shortName: JavaScript Types
+miniName: Type
+featured: true
+parent: js
+languageMatcher: javascript
+tagMatcher: type
+description: >-
+  The JavaScript snippet collection contains a wide variety of ES6 helper
+  functions. It includes helpers for dealing with primitives, arrays and
+  objects, as well as algorithms, DOM manipulation functions and Node.js
+  utilities.
+shortDescription: >-
+  A snippet collection of type helpers and explanations of JavaScript types.
+splash: laptop-plant.png
diff --git a/collections/main-listing.yaml b/collections/main-listing.yaml
new file mode 100644
index 000000000..a91630471
--- /dev/null
+++ b/collections/main-listing.yaml
@@ -0,0 +1,11 @@
+slug: list
+name: Code Snippets
+featured: false
+splash: laptop-plant.png
+description: >-
+  30 seconds of code provides a curated collection of short code snippets for
+  all your development needs. Our collection spans many topics, ranging from
+  simple coding problems to theoretical concepts and development techniques.
+shortDescription: >-
+  Browse thousands of short code snippets for all your development needs on
+  30 seconds of code.
diff --git a/collections/python/date.yaml b/collections/python/date.yaml
new file mode 100644
index 000000000..cb124ee3c
--- /dev/null
+++ b/collections/python/date.yaml
@@ -0,0 +1,15 @@
+slug: python/t/date
+name: Python Date Snippets
+shortName: Python Dates
+miniName: Date
+featured: true
+parent: python
+languageMatcher: python
+tagMatcher: date
+description: >-
+  The Python snippet collection contains helper functions for Python 3.6. It
+  includes utilities for most common data types, such as primitivies, lists,
+  dictionaries and date objects.
+shortDescription: >-
+  Easily manipulate dates in Python 3.6 with this snippet collection.
+splash: terrarium.png
diff --git a/collections/python/dictionary.yaml b/collections/python/dictionary.yaml
new file mode 100644
index 000000000..27fc96135
--- /dev/null
+++ b/collections/python/dictionary.yaml
@@ -0,0 +1,15 @@
+slug: python/t/dictionary
+name: Python Dictionary Snippets
+shortName: Python Dictionaries
+miniName: Dictionary
+featured: true
+parent: python
+languageMatcher: python
+tagMatcher: dictionary
+description: >-
+  The Python snippet collection contains helper functions for Python 3.6. It
+  includes utilities for most common data types, such as primitivies, lists,
+  dictionaries and date objects.
+shortDescription: >-
+  A snippet collection of dictionary helpers and tips for Python 3.6.
+splash: tea-pour.png
diff --git a/collections/python/function.yaml b/collections/python/function.yaml
new file mode 100644
index 000000000..e4d98dfa4
--- /dev/null
+++ b/collections/python/function.yaml
@@ -0,0 +1,15 @@
+slug: python/t/function
+name: Python Function Snippets
+shortName: Python Functions
+miniName: Function
+featured: true
+parent: python
+languageMatcher: python
+tagMatcher: function
+description: >-
+  The Python snippet collection contains helper functions for Python 3.6. It
+  includes utilities for most common data types, such as primitivies, lists,
+  dictionaries and date objects.
+shortDescription: >-
+  A snippet collection of function helpers and tips for Python 3.6.
+splash: terrarium.png
diff --git a/collections/python/index.yaml b/collections/python/index.yaml
new file mode 100644
index 000000000..ec364ae84
--- /dev/null
+++ b/collections/python/index.yaml
@@ -0,0 +1,14 @@
+slug: python
+name: Python Snippets
+shortName: Python
+topLevel: true
+languageMatcher: python
+featured: true
+description: >-
+  The Python snippet collection contains helper functions for Python 3.6. It
+  includes utilities for most common data types, such as primitivies, lists,
+  dictionaries and date objects.
+shortDescription: >-
+  Browse helper functions for Python 3.6, including utilities for primitives,
+  lists, dictionaries and date objects.
+splash: terrarium.png
diff --git a/collections/python/list.yaml b/collections/python/list.yaml
new file mode 100644
index 000000000..0abadd6dd
--- /dev/null
+++ b/collections/python/list.yaml
@@ -0,0 +1,15 @@
+slug: python/t/list
+name: Python List Snippets
+shortName: Python Lists
+miniName: List
+featured: true
+parent: python
+languageMatcher: python
+tagMatcher: list
+description: >-
+  The Python snippet collection contains helper functions for Python 3.6. It
+  includes utilities for most common data types, such as primitivies, lists,
+  dictionaries and date objects.
+shortDescription: >-
+  A snippet collection of list helpers and tips for Python 3.6.
+splash: widescreen.png
diff --git a/collections/python/math.yaml b/collections/python/math.yaml
new file mode 100644
index 000000000..b8eae4274
--- /dev/null
+++ b/collections/python/math.yaml
@@ -0,0 +1,16 @@
+slug: python/t/math
+name: Python Math Snippets
+shortName: Python Math
+miniName: Math
+featured: true
+parent: python
+languageMatcher: python
+tagMatcher: math
+description: >-
+  The Python snippet collection contains helper functions for Python 3.6. It
+  includes utilities for most common data types, such as primitivies, lists,
+  dictionaries and date objects.
+shortDescription: >-
+  Learn how to perform common mathematical operations in Python 3.6 with this
+  snippet collection.
+splash: plant-window.png
diff --git a/collections/python/string.yaml b/collections/python/string.yaml
new file mode 100644
index 000000000..b38f56d42
--- /dev/null
+++ b/collections/python/string.yaml
@@ -0,0 +1,16 @@
+slug: python/t/string
+name: Python String Snippets
+shortName: Python Strings
+miniName: String
+featured: true
+parent: python
+languageMatcher: python
+tagMatcher: string
+description: >-
+  The Python snippet collection contains helper functions for Python 3.6. It
+  includes utilities for most common data types, such as primitivies, lists,
+  dictionaries and date objects.
+shortDescription: >-
+  Learn how to format and manipulate strings in Python 3.6 with this snippet
+  collection.
+splash: terrarium.png
diff --git a/collections/react-rendering.yaml b/collections/react-rendering.yaml
new file mode 100644
index 000000000..8eea84b5f
--- /dev/null
+++ b/collections/react-rendering.yaml
@@ -0,0 +1,18 @@
+slug: c/react-rendering
+name: React Rendering
+shortName: Rendering
+parent: react
+featured: true
+snippetIds:
+  - articles/s/react-rendering-basics
+  - articles/s/react-rendering-optimization
+  - articles/s/react-rendering-state
+splash: glasses-comic.png
+description: >-
+  Understanding of the rendering process is a crucial piece of knowledge when
+  creating web applications with React. Take a deep dive into the fundamentals
+  and core concepts as well as more advanced techniques with this series of
+  articles.
+shortDescription: >-
+  Understand the fundamentals of React's rendering process as well as more
+  advanced techniques with this series of articles.
diff --git a/collections/react-testing.yaml b/collections/react-testing.yaml
new file mode 100644
index 000000000..5d220a594
--- /dev/null
+++ b/collections/react-testing.yaml
@@ -0,0 +1,19 @@
+slug: c/react-testing
+name: React Testing
+shortName: Testing
+parent: react
+featured: true
+snippetIds:
+  - articles/s/testing-stateful-ui-components
+  - articles/s/testing-async-react-components
+  - articles/s/testing-react-portals
+  - articles/s/testing-redux-connected-components
+splash: headphones.png
+description: >-
+  Testing React can be challenging, both in terms of figuring out the correct
+  mentality as well as understanding the mechanics of the tools you're working
+  with. This article collection aims to teach you the basics of testing React
+  components in various scenarios using React Testing Library.
+shortDescription: >-
+  Learn some of the basics of testing React components in various scenarios
+  using React Testing Library.
diff --git a/collections/react/components.yaml b/collections/react/components.yaml
new file mode 100644
index 000000000..4edeb2c39
--- /dev/null
+++ b/collections/react/components.yaml
@@ -0,0 +1,13 @@
+slug: react/t/components
+name: React Components
+miniName: Components
+featured: true
+parent: react
+languageMatcher: react
+tagMatcher: components
+description: >-
+  The React snippet collection contains function components and reusable hooks
+  for React 18.
+shortDescription: >-
+  Discover a collection of reusable function components for React 18.
+splash: succulent-cluster.png
diff --git a/collections/react/hooks.yaml b/collections/react/hooks.yaml
new file mode 100644
index 000000000..594f34282
--- /dev/null
+++ b/collections/react/hooks.yaml
@@ -0,0 +1,13 @@
+slug: react/t/hooks
+name: React Hooks
+miniName: Hooks
+featured: true
+parent: react
+languageMatcher: react
+tagMatcher: hooks
+description: >-
+  The React snippet collection contains function components and reusable hooks
+  for React 18.
+shortDescription: >-
+  Discover a collection of reusable hooks for React 18.
+splash: succulent-cluster.png
diff --git a/collections/react/index.yaml b/collections/react/index.yaml
new file mode 100644
index 000000000..57f8ddb74
--- /dev/null
+++ b/collections/react/index.yaml
@@ -0,0 +1,12 @@
+slug: react
+name: React Snippets
+shortName: React
+topLevel: true
+languageMatcher: react
+featured: true
+description: >-
+  The React snippet collection contains function components and reusable hooks
+  for React 18.
+shortDescription: >-
+  Discover function components and reusable hooks for React 18.
+splash: succulent-cluster.png
diff --git a/collections/tips.yaml b/collections/tips.yaml
new file mode 100644
index 000000000..6d80a1bd6
--- /dev/null
+++ b/collections/tips.yaml
@@ -0,0 +1,12 @@
+slug: c/tips
+name: Tips & Tricks
+featured: true
+typeMatcher: tip
+splash: lightbulb.png
+description: >-
+  Finding ways to improve and optimize your code takes a lot of time, research
+  and energy. Level up your coding skills one step at a time with this
+  collection of quick tips and tricks.
+shortDescription: >-
+  A collection of quick tips and tricks to level up your coding skills one step
+  at a time.
diff --git a/collections/webdev.yaml b/collections/webdev.yaml
new file mode 100644
index 000000000..2b549b363
--- /dev/null
+++ b/collections/webdev.yaml
@@ -0,0 +1,14 @@
+slug: c/web-development
+name: Web development Snippets
+shortName: Web development
+typeMatcher: article
+tagMatcher: webdev
+description: >-
+  The web development snippet collection contains curated stories, tips,
+  questions and answers on a wide variety of topics. The main focus is around
+  the languages and technologies presented in snippets, as well as career advice
+  and lessons.
+shortDescription: >-
+  Discover dozens of web development articles, covering a wide variety of topics
+  and technologies.
+splash: matcha.png
diff --git a/hub.yaml b/hub.yaml
new file mode 100644
index 000000000..9721f2f8c
--- /dev/null
+++ b/hub.yaml
@@ -0,0 +1,47 @@
+name: Snippet Collections
+splash: widescreen.png
+description: >-
+  30 seconds of code provides a wide variety of snippet and article
+  collections for all your development needs. Explore individual language
+  collections or browse through collections about specific topics and
+  programming concepts.
+shortDescription: >-
+  Browse through collections of snippets and articles about specific topics
+  and programming concepts.
+featuredListings:
+- js
+- css
+- react/t/hooks
+- js/t/algorithm
+- git
+- c/js-interviews
+- python
+- js/t/node
+- c/js-data-structures
+- c/js-promises
+- c/js-comparison
+- c/html-head-basics
+- c/css-centering
+- c/tips
+- c/js-url
+- c/js-proxy
+- c/js-event-handling
+- c/js-arrow-functions
+- c/react-rendering
+- c/js-colors
+- c/js-array-methods
+- c/js-array-tricks
+- c/js-object-key-transformations
+- c/react-testing
+- c/css-hover-effects
+- c/js-string-casing
+- c/js-generators
+- react/t/components
+- c/js-array-set-operations
+- c/css-button-transitions
+- c/js-random-value-generators
+- c/css-background-patterns
+- c/js-object-cloning
+- c/web-development
+- c/js-object-key-selection
+- c/cheatsheets
diff --git a/languages/css.yaml b/languages/css.yaml
new file mode 100644
index 000000000..f5d1d05c0
--- /dev/null
+++ b/languages/css.yaml
@@ -0,0 +1,3 @@
+short: css
+long: css
+name: CSS
diff --git a/languages/git.yaml b/languages/git.yaml
new file mode 100644
index 000000000..afa81d5b3
--- /dev/null
+++ b/languages/git.yaml
@@ -0,0 +1,3 @@
+short: shell
+long: git
+name: Git
diff --git a/languages/html.yaml b/languages/html.yaml
new file mode 100644
index 000000000..7ca201b4e
--- /dev/null
+++ b/languages/html.yaml
@@ -0,0 +1,3 @@
+short: html
+long: html
+name: HTML
diff --git a/languages/javascript.yaml b/languages/javascript.yaml
new file mode 100644
index 000000000..6f9d107e9
--- /dev/null
+++ b/languages/javascript.yaml
@@ -0,0 +1,743 @@
+short: js
+long: javascript
+name: JavaScript
+references:
+  ...: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
+  try...catch: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch
+  typeof: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof
+  yield: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield
+  yield*: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield*
+  this: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
+  for...of: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
+  for...in: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in
+  delete: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete
+  in: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in
+  setInterval(): https://developer.mozilla.org/en-US/docs/Web/API/setInterval
+  setTimeout(): https://developer.mozilla.org/en-US/docs/Web/API/setTimeout
+  clearInterval(): https://developer.mozilla.org/en-US/docs/Web/API/clearInterval
+  clearTimeout(): https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout
+  parseFloat(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat
+  parseInt(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt
+  Error: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error
+  TypeError: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError
+  ReferenceError: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError
+  Boolean: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+  Blob: https://developer.mozilla.org/en-US/docs/Web/API/Blob
+  console.assert(): https://developer.mozilla.org/en-US/docs/Web/API/console/assert
+  console.clear(): https://developer.mozilla.org/en-US/docs/Web/API/console/clear
+  console.count(): https://developer.mozilla.org/en-US/docs/Web/API/console/count
+  console.countReset(): https://developer.mozilla.org/en-US/docs/Web/API/console/countReset
+  console.debug(): https://developer.mozilla.org/en-US/docs/Web/API/console/debug
+  console.dir(): https://developer.mozilla.org/en-US/docs/Web/API/console/dir
+  console.dirxml(): https://developer.mozilla.org/en-US/docs/Web/API/console/dirxml
+  console.error(): https://developer.mozilla.org/en-US/docs/Web/API/console/error
+  console.group(): https://developer.mozilla.org/en-US/docs/Web/API/console/group
+  console.groupCollapsed(): https://developer.mozilla.org/en-US/docs/Web/API/console/groupCollapsed
+  console.groupEnd(): https://developer.mozilla.org/en-US/docs/Web/API/console/groupEnd
+  console.info(): https://developer.mozilla.org/en-US/docs/Web/API/console/info
+  console.log(): https://developer.mozilla.org/en-US/docs/Web/API/console/log
+  console.table(): https://developer.mozilla.org/en-US/docs/Web/API/console/table
+  console.time(): https://developer.mozilla.org/en-US/docs/Web/API/console/time
+  console.timeEnd(): https://developer.mozilla.org/en-US/docs/Web/API/console/timeEnd
+  console.timeLog(): https://developer.mozilla.org/en-US/docs/Web/API/console/timeLog
+  console.trace(): https://developer.mozilla.org/en-US/docs/Web/API/console/trace
+  console.warn(): https://developer.mozilla.org/en-US/docs/Web/API/console/warn
+  Array: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
+  Array.prototype.length: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length
+  Array.prototype.at(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at
+  Array.prototype.concat(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
+  Array.prototype.copyWithin(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin
+  Array.prototype.entries(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries
+  Array.prototype.every(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every
+  Array.prototype.fill(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill
+  Array.prototype.filter(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
+  Array.prototype.find(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
+  Array.prototype.findIndex(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
+  Array.prototype.findLast(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findLast
+  Array.prototype.findLastIndex(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findLastIndex
+  Array.prototype.flat(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat
+  Array.prototype.flatMap(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap
+  Array.prototype.forEach(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
+  Array.from(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from
+  Array.prototype.includes(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
+  Array.prototype.indexOf(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
+  Array.isArray(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray
+  Array.prototype.join(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join
+  Array.prototype.keys(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/keys
+  Array.prototype.lastIndexOf(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
+  Array.prototype.map(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
+  Array.of(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/of
+  Array.prototype.pop(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop
+  Array.prototype.push(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push
+  Array.prototype.reduce(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
+  Array.prototype.reduceRight(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight
+  Array.prototype.reverse(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse
+  Array.prototype.shift(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift
+  Array.prototype.slice(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
+  Array.prototype.some(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some
+  Array.prototype.sort(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
+  Array.prototype.splice(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
+  Array.prototype.toLocaleString(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString
+  Array.prototype.toString(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toString
+  Array.prototype.unshift(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift
+  Array.prototype.values(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/values
+  String: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
+  String.prototype.length: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length
+  String.prototype.at(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/at
+  String.prototype.charAt(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt
+  String.prototype.charCodeAt(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt
+  String.prototype.codePointAt(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/codePointAt
+  String.prototype.concat(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/concat
+  String.prototype.endsWith(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith
+  String.fromCharCode(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode
+  String.fromCodePoint(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCodePoint
+  String.prototype.includes(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes
+  String.prototype.indexOf(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf
+  String.prototype.lastIndexOf(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
+  String.prototype.localeCompare(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
+  String.prototype.match(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match
+  String.prototype.matchAll(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll
+  String.prototype.normalize(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize
+  String.prototype.padEnd(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd
+  String.prototype.padStart(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
+  String.raw(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw
+  String.prototype.repeat(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat
+  String.prototype.replace(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace
+  String.prototype.replaceAll(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll
+  String.prototype.search(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/search
+  String.prototype.slice(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice
+  String.prototype.split(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split
+  String.prototype.startsWith(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith
+  String.prototype.substring(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring
+  String.prototype.toLocaleLowerCase(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase
+  String.prototype.toLocaleUpperCase(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase
+  String.prototype.toLowerCase(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase
+  String.prototype.toString(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toString
+  String.prototype.toUpperCase(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase
+  String.prototype.trim(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
+  String.prototype.trimEnd(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd
+  String.prototype.trimStart(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart
+  String.prototype.valueOf(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/valueOf
+  Object: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
+  Object.prototype: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
+  Object.prototype.constructor: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor
+  Object.assign(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
+  Object.create(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create
+  Object.defineProperties(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties
+  Object.defineProperty(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
+  Object.entries(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
+  Object.freeze(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
+  Object.fromEntries(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries
+  Object.getOwnPropertyDescriptor(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor
+  Object.getOwnPropertyDescriptors(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors
+  Object.getOwnPropertyNames(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames
+  Object.getOwnPropertySymbols(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols
+  Object.getPrototypeOf(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf
+  Object.hasOwn(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn
+  Object.prototype.hasOwnProperty(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
+  Object.is(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+  Object.isExtensible(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isExtensible
+  Object.isFrozen(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isFrozen
+  Object.prototype.isPrototypeOf(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf
+  Object.isSealed(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isSealed
+  Object.keys(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
+  Object.preventExtensions(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions
+  Object.prototype.propertyIsEnumerable(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable
+  Object.seal(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal
+  Object.setPrototypeOf(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf
+  Object.prototype.toLocaleString(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toLocaleString
+  Object.prototype.toString(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString
+  Object.prototype.valueOf(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf
+  Object.values(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values
+  Math.E: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/E
+  Math.LN10: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/LN10
+  Math.LN2: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/LN2
+  Math.LOG10E: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/LOG10E
+  Math.LOG2E: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/LOG2E
+  Math.PI: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/PI
+  Math.SQRT1_2: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2
+  Math.SQRT2: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/SQRT2
+  Math.abs(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/abs
+  Math.acos(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/acos
+  Math.acosh(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/acosh
+  Math.asin(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/asin
+  Math.asinh(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/asinh
+  Math.atan(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan
+  Math.atan2(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2
+  Math.atanh(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atanh
+  Math.cbrt(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cbrt
+  Math.ceil(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil
+  Math.clz32(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/clz32
+  Math.cos(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cos
+  Math.cosh(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cosh
+  Math.exp(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/exp
+  Math.expm1(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/expm1
+  Math.floor(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor
+  Math.fround(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/fround
+  Math.hypot(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/hypot
+  Math.imul(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/imul
+  Math.log(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/log
+  Math.log10(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/log10
+  Math.log1p(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/log1p
+  Math.log2(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/log2
+  Math.max(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max
+  Math.min(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min
+  Math.pow(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow
+  Math.random(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
+  Math.round(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round
+  Math.sign(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sign
+  Math.sin(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin
+  Math.sinh(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sinh
+  Math.sqrt(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt
+  Math.tan(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/tan
+  Math.tanh(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/tanh
+  Math.trunc(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/trunc
+  Number: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
+  Number.EPSILON: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON
+  Number.MAX_SAFE_INTEGER: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER
+  Number.MAX_VALUE: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE
+  Number.MIN_SAFE_INTEGER: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER
+  Number.MIN_VALUE: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE
+  Number.NaN: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/NaN
+  Number.NEGATIVE_INFINITY: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY
+  Number.POSITIVE_INFINITY: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY
+  Number.isFinite(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isFinite
+  Number.isInteger(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger
+  Number.isNaN(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN
+  Number.isSafeInteger(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger
+  Number.parseFloat(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/parseFloat
+  Number.parseInt(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/parseInt
+  Number.prototype.toExponential(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toExponential
+  Number.prototype.toFixed(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed
+  Number.prototype.toLocaleString(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
+  Number.prototype.toPrecision(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toPrecision
+  Number.prototype.toString(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString
+  Number.prototype.valueOf(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/valueOf
+  Date: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
+  Date.prototype.getDate(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getDate
+  Date.prototype.getDay(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay
+  Date.prototype.getFullYear(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear
+  Date.prototype.getHours(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getHours
+  Date.prototype.getMilliseconds(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds
+  Date.prototype.getMinutes(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getMinutes
+  Date.prototype.getMonth(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getMonth
+  Date.prototype.getSeconds(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getSeconds
+  Date.prototype.getTime(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime
+  Date.prototype.getTimezoneOffset(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset
+  Date.prototype.getUTCDate(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCDate
+  Date.prototype.getUTCDay(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCDay
+  Date.prototype.getUTCFullYear(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear
+  Date.prototype.getUTCHours(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCHours
+  Date.prototype.getUTCMilliseconds(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds
+  Date.prototype.getUTCMinutes(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes
+  Date.prototype.getUTCMonth(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth
+  Date.prototype.getUTCSeconds(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds
+  Date.now(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now
+  Date.parse(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse
+  Date.prototype.setDate(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setDate
+  Date.prototype.setFullYear(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setFullYear
+  Date.prototype.setHours(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setHours
+  Date.prototype.setMilliseconds(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds
+  Date.prototype.setMinutes(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setMinutes
+  Date.prototype.setMonth(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setMonth
+  Date.prototype.setSeconds(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setSeconds
+  Date.prototype.setTime(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setTime
+  Date.prototype.setUTCDate(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCDate
+  Date.prototype.setUTCFullYear(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear
+  Date.prototype.setUTCHours(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCHours
+  Date.prototype.setUTCMilliseconds(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds
+  Date.prototype.setUTCMinutes(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes
+  Date.prototype.setUTCMonth(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth
+  Date.prototype.setUTCSeconds(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds
+  Date.prototype.toDateString(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toDateString
+  Date.prototype.toISOString(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString
+  Date.prototype.toJSON(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toJSON
+  Date.prototype.toLocaleDateString(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
+  Date.prototype.toLocaleString(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
+  Date.prototype.toLocaleTimeString(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
+  Date.prototype.toString(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toString
+  Date.prototype.toTimeString(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toTimeString
+  Date.prototype.toUTCString(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toUTCString
+  Date.UTC(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC
+  Date.prototype.valueOf(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/valueOf
+  Function.prototype.name: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name
+  Function.prototype.length: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/length
+  Function.prototype.apply(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
+  Function.prototype.call(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call
+  Function.prototype.bind(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
+  Function.prototype.toString(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString
+  Promise: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
+  Promise.prototype.then(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
+  Promise.prototype.catch(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch
+  Promise.prototype.finally(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally
+  Promise.all(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
+  Promise.allSettled(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled
+  Promise.any(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/any
+  Promise.race(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race
+  Promise.reject(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject
+  Promise.resolve(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve
+  JSON.parse(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
+  JSON.stringify(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
+  RegExp: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
+  RegExp.prototype.dotAll: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/dotAll
+  RegExp.prototype.flags: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/flags
+  RegExp.prototype.global: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/global
+  RegExp.prototype.hasIndices: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/hasIndices
+  RegExp.prototype.ignoreCase: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase
+  'RegExp: lastIndex': >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex
+  RegExp.prototype.multiline: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/multiline
+  RegExp.prototype.source: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/source
+  RegExp.prototype.sticky: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky
+  RegExp.prototype.unicode: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode
+  RegExp.prototype.exec(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec
+  RegExp.prototype.test(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test
+  RegExp.prototype.toString(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/toString
+  Set: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
+  Set.prototype.size: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/size
+  Set.prototype.add(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/add
+  Set.prototype.clear(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/clear
+  Set.prototype.delete(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/delete
+  Set.prototype.entries(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/entries
+  Set.prototype.forEach(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/forEach
+  Set.prototype.has(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/has
+  Set.prototype.keys(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/keys
+  Set.prototype.values(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/values
+  Map: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
+  Map.prototype.size: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/size
+  Map.prototype.clear(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/clear
+  Map.prototype.delete(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/delete
+  Map.prototype.entries(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/entries
+  Map.prototype.forEach(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/forEach
+  Map.prototype.get(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/get
+  Map.prototype.has(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/has
+  Map.prototype.keys(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/keys
+  Map.prototype.set(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/set
+  Map.prototype.values(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/values
+  WeakMap: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap
+  WeakMap.prototype.size: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/size
+  WeakMap.prototype.clear(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/clear
+  WeakMap.prototype.delete(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/delete
+  WeakMap.prototype.get(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/get
+  WeakMap.prototype.has(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/has
+  WeakMap.prototype.set(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/set
+  WeakSet: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet
+  WeakSet.prototype.size: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/size
+  WeakSet.prototype.add(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/add
+  WeakSet.prototype.clear(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/clear
+  WeakSet.prototype.delete(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/delete
+  WeakSet.prototype.has(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/has
+  Symbol: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol
+  Symbol.for(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/for
+  Symbol.iterator: >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator
+  Document: https://developer.mozilla.org/en-US/docs/Web/API/Document
+  Document.activeElement: https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement
+  Document.adoptedStyleSheets: https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets
+  Document.body: https://developer.mozilla.org/en-US/docs/Web/API/Document/body
+  Document.characterSet: https://developer.mozilla.org/en-US/docs/Web/API/Document/characterSet
+  Document.childElementCount: https://developer.mozilla.org/en-US/docs/Web/API/Document/childElementCount
+  Document.children: https://developer.mozilla.org/en-US/docs/Web/API/Document/children
+  Document.compatMode: https://developer.mozilla.org/en-US/docs/Web/API/Document/compatMode
+  Document.contentType: https://developer.mozilla.org/en-US/docs/Web/API/Document/contentType
+  Document.currentScript: https://developer.mozilla.org/en-US/docs/Web/API/Document/currentScript
+  Document.defaultView: https://developer.mozilla.org/en-US/docs/Web/API/Document/defaultView
+  Document.designMode: https://developer.mozilla.org/en-US/docs/Web/API/Document/designMode
+  Document.dir: https://developer.mozilla.org/en-US/docs/Web/API/Document/dir
+  Document.doctype: https://developer.mozilla.org/en-US/docs/Web/API/Document/doctype
+  Document.documentElement: https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement
+  Document.documentURI: https://developer.mozilla.org/en-US/docs/Web/API/Document/documentURI
+  Document.embeds: https://developer.mozilla.org/en-US/docs/Web/API/Document/embeds
+  Document.firstElementChild: https://developer.mozilla.org/en-US/docs/Web/API/Document/firstElementChild
+  Document.fonts: https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts
+  Document.forms: https://developer.mozilla.org/en-US/docs/Web/API/Document/forms
+  Document.fullscreenElement: https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenElement
+  Document.fullscreenEnabled: https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenEnabled
+  Document.head: https://developer.mozilla.org/en-US/docs/Web/API/Document/head
+  Document.hidden: https://developer.mozilla.org/en-US/docs/Web/API/Document/hidden
+  Document.images: https://developer.mozilla.org/en-US/docs/Web/API/Document/images
+  Document.implementation: https://developer.mozilla.org/en-US/docs/Web/API/Document/implementation
+  Document.lastElementChild: https://developer.mozilla.org/en-US/docs/Web/API/Document/lastElementChild
+  Document.lastModified: https://developer.mozilla.org/en-US/docs/Web/API/Document/lastModified
+  Document.links: https://developer.mozilla.org/en-US/docs/Web/API/Document/links
+  Document.location: https://developer.mozilla.org/en-US/docs/Web/API/Document/location
+  Document.pictureInPictureElement: >-
+    https://developer.mozilla.org/en-US/docs/Web/API/Document/pictureInPictureElement
+  Document.pictureInPictureEnabled: >-
+    https://developer.mozilla.org/en-US/docs/Web/API/Document/pictureInPictureEnabled
+  Document.plugins: https://developer.mozilla.org/en-US/docs/Web/API/Document/plugins
+  Document.pointerLockElement: https://developer.mozilla.org/en-US/docs/Web/API/Document/pointerLockElement
+  Document.readyState: https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState
+  Document.referrer: https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer
+  Document.scripts: https://developer.mozilla.org/en-US/docs/Web/API/Document/scripts
+  Document.scrollingElement: https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollingElement
+  Document.styleSheets: https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets
+  Document.timeline: https://developer.mozilla.org/en-US/docs/Web/API/Document/timeline
+  Document.title: https://developer.mozilla.org/en-US/docs/Web/API/Document/title
+  Document.URL: https://developer.mozilla.org/en-US/docs/Web/API/Document/URL
+  Document.visibilityState: https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState
+  Document.adoptNode(): https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptNode
+  Document.append(): https://developer.mozilla.org/en-US/docs/Web/API/Document/append
+  Document.caretPositionFromPoint(): >-
+    https://developer.mozilla.org/en-US/docs/Web/API/Document/caretPositionFromPoint
+  Document.close(): https://developer.mozilla.org/en-US/docs/Web/API/Document/close
+  Document.createAttribute(): https://developer.mozilla.org/en-US/docs/Web/API/Document/createAttribute
+  Document.createAttributeNS(): https://developer.mozilla.org/en-US/docs/Web/API/Document/createAttributeNS
+  Document.createCDATASection(): https://developer.mozilla.org/en-US/docs/Web/API/Document/createCDATASection
+  Document.createComment(): https://developer.mozilla.org/en-US/docs/Web/API/Document/createComment
+  Document.createDocumentFragment(): >-
+    https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment
+  Document.createElement(): https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
+  Document.createElementNS(): https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS
+  Document.createEvent(): https://developer.mozilla.org/en-US/docs/Web/API/Document/createEvent
+  Document.createExpression(): https://developer.mozilla.org/en-US/docs/Web/API/Document/createExpression
+  Document.createNodeIterator(): https://developer.mozilla.org/en-US/docs/Web/API/Document/createNodeIterator
+  Document.createNSResolver(): https://developer.mozilla.org/en-US/docs/Web/API/Document/createNSResolver
+  Document.createProcessingInstruction(): >-
+    https://developer.mozilla.org/en-US/docs/Web/API/Document/createProcessingInstruction
+  Document.createRange(): https://developer.mozilla.org/en-US/docs/Web/API/Document/createRange
+  Document.createTextNode(): https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode
+  Document.createTreeWalker(): https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker
+  Document.elementFromPoint(): https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint
+  Document.elementsFromPoint(): https://developer.mozilla.org/en-US/docs/Web/API/Document/elementsFromPoint
+  Document.evaluate(): https://developer.mozilla.org/en-US/docs/Web/API/Document/evaluate
+  Document.execCommand(): https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
+  Document.exitFullscreen(): https://developer.mozilla.org/en-US/docs/Web/API/Document/exitFullscreen
+  Document.exitPictureInPicture(): >-
+    https://developer.mozilla.org/en-US/docs/Web/API/Document/exitPictureInPicture
+  Document.exitPointerLock(): https://developer.mozilla.org/en-US/docs/Web/API/Document/exitPointerLock
+  Document.getAnimations(): https://developer.mozilla.org/en-US/docs/Web/API/Document/getAnimations
+  Document.getElementById(): https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
+  Document.getElementsByClassName(): >-
+    https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
+  Document.getElementsByName(): https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName
+  Document.getElementsByTagName(): >-
+    https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName
+  Document.getElementsByTagNameNS(): >-
+    https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagNameNS
+  Document.getSelection(): https://developer.mozilla.org/en-US/docs/Web/API/Document/getSelection
+  Document.hasFocus(): https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus
+  Document.hasStorageAccess(): https://developer.mozilla.org/en-US/docs/Web/API/Document/hasStorageAccess
+  Document.importNode(): https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode
+  Document.open(): https://developer.mozilla.org/en-US/docs/Web/API/Document/open
+  Document.prepend(): https://developer.mozilla.org/en-US/docs/Web/API/Document/prepend
+  Document.querySelector(): https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
+  Document.querySelectorAll(): https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
+  Document.replaceChildren(): https://developer.mozilla.org/en-US/docs/Web/API/Document/replaceChildren
+  Document.requestStorageAccess(): >-
+    https://developer.mozilla.org/en-US/docs/Web/API/Document/requestStorageAccess
+  Document.write(): https://developer.mozilla.org/en-US/docs/Web/API/Document/write
+  Document.writeln(): https://developer.mozilla.org/en-US/docs/Web/API/Document/writeln
+  Storage: https://developer.mozilla.org/en-US/docs/Web/API/Storage
+  Storage.clear(): https://developer.mozilla.org/en-US/docs/Web/API/Storage/clear
+  Storage.getItem(): https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem
+  Storage.key(): https://developer.mozilla.org/en-US/docs/Web/API/Storage/key
+  Storage.removeItem(): https://developer.mozilla.org/en-US/docs/Web/API/Storage/removeItem
+  Storage.setItem(): https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem
+  URLSearchParams: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
+  XMLHttpRequest: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
+  encodeURIComponent(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
+  decodeURIComponent(): >-
+    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent
diff --git a/languages/python.yaml b/languages/python.yaml
new file mode 100644
index 000000000..46b862dd1
--- /dev/null
+++ b/languages/python.yaml
@@ -0,0 +1,3 @@
+short: py
+long: python
+name: Python
diff --git a/languages/react.yaml b/languages/react.yaml
new file mode 100644
index 000000000..606a98485
--- /dev/null
+++ b/languages/react.yaml
@@ -0,0 +1,13 @@
+short: jsx
+long: react
+name: React
+references:
+  useCallback(): https://react.dev/reference/react/useCallback
+  useContext(): https://react.dev/reference/react/useContext
+  useDebugValue(): https://react.dev/reference/react/useDebugValue
+  useEffect(): https://react.dev/reference/react/useEffect
+  useLayoutEffect(): https://react.dev/reference/react/useLayoutEffect
+  useMemo(): https://react.dev/reference/react/useMemo
+  useReducer(): https://react.dev/reference/react/useReducer
+  useRef(): https://react.dev/reference/react/useRef
+  useState(): https://react.dev/reference/react/useState
diff --git a/rankingEngine.yaml b/rankingEngine.yaml
new file mode 100644
index 000000000..724d13354
--- /dev/null
+++ b/rankingEngine.yaml
@@ -0,0 +1,118 @@
+accessibility: 1
+algorithm: 4
+animation: 5
+array: 5
+arrow: 1
+async: 2
+await: 2
+background: 1
+bind: 2
+boolean: 1
+border: 2
+branch: 3
+browser: 3
+button: 1
+callback: 2
+cascade: 4
+center: 1
+cheatsheet: 2
+children: 1
+class: 1
+color: 1
+collection: 3
+commit: 2
+component: 2
+comprehension: 5
+configuration: 2
+constructor: 2
+copy: 3
+css: 4
+data: 1
+date: 4
+deep: 1
+delay: 2
+design: 2
+destructuring: 4
+devtools: 1
+dictionary: 4
+display: 1
+effect: 2
+event: 4
+filter: 5
+flex: 5
+foreach: 3
+format: 2
+fragment: 1
+function: 3
+generator: 2
+get: 2
+git: 4
+grid: 5
+group: 2
+hook: 2
+hover: 2
+html: 2
+index: 1
+input: 1
+interactivity: 2
+iterator: 3
+javascript: 5
+join: 4
+json: 3
+key: 2
+layout: 4
+lifecycle: 2
+list: 5
+loop: 3
+map: 5
+margin: 3
+math: 1
+memoization: 2
+merge: 4
+node: 3
+object: 4
+overflow: 2
+padding: 3
+pattern: 2
+performance: 2
+promise: 5
+props: 1
+push: 3
+python: 3
+query: 1
+question: 1
+random: 2
+range: 3
+react: 1
+recursion: 2
+reduce: 5
+redux: 3
+ref: 2
+reflection: 2
+regexp: 3
+render: 2
+replace: 3
+repository: 3
+scroll: 1
+selector: 1
+shadow: 3
+slice: 2
+sort: 3
+splice: 2
+spread: 4
+stash: 2
+state: 3
+string: 3
+style: 1
+substring: 3
+table: 1
+testing: 3
+timeout: 2
+transition: 2
+type: 1
+unique: 1
+url: 2
+variable: 1
+visual: 4
+webdev: 3
+whitespace: 1
diff --git a/snippets/articles/s/10-vs-code-extensions-for-js-developers.md b/snippets/articles/s/10-vs-code-extensions-for-js-developers.md
new file mode 100644
index 000000000..9d6c74bfa
--- /dev/null
+++ b/snippets/articles/s/10-vs-code-extensions-for-js-developers.md
@@ -0,0 +1,54 @@
+---
+title: 10 must-have VS Code extensions for JavaScript developers
+shortTitle: Essential VS Code extensions
+type: story
+language: javascript
+tags: [devtools,vscode]
+author: chalarangelo
+cover: computer-screens
+excerpt: Boost your productivity with these 10 essential VS Code extensions for JavaScript developers.
+unlisted: true
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Developers will most likely argue for the rest of eternity about the most productive code editor and the best extensions. Here are my personal extension preferences for VS Code as a JavaScript developer:
+
+### ESLint
+
+[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) turns the popular JavaScript linter into an extension of VS Code. It automatically reads your linting configuration, identifies problems and even fixes them for you, if you want.
+
+###  GitLens
+
+[GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) is a very powerful collaboration tool for VS Code. It provides many useful tools for git such as blame, code authorship, activity heatmaps, recent changes, file history and even commit search.
+
+### Debugger for Chrome
+
+[Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) allows you to debug your JavaScript code in Chrome or Chromium. Breakpoints, call stack inspection and stepping inside a function are only some of its features.
+
+### Bracket Pair Colorizer 2
+
+[Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) makes reading code faster as it makes matching brackets the same color. This extension for VS Code improves upon its predecessor by providing improved performance.
+
+### Bookmarks
+
+[Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) is one of those extensions that will significantly reduce your time jumping between different files, as it allows you to save important positions and navigate back to them easily and quickly.
+
+### TODO Highlight
+
+[TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) simplifies tracking leftover tasks by allowing you to list all of your TODO annotations, as well as adding a handy background highlight to them to make them pop out immediately.
+
+### Live Server
+
+[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) gives you an easy way to serve web pages from VS Code, making previewing and debugging a lot easier. One of the core features is the live reload support that many developers are used to.
+
+### REST Client
+
+[REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) allows you to send HTTP requests and view the responses directly in VS Code. This extension supports a wide range of formats and authorization and should work with most setups.
+
+### One Dark Pro
+
+[One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) is one of the most popular VS Code themes and with very good reason. It provides a clean theme with a nice palette that has great contrast and is very comfortable to use on a daily basis.
+
+### Fira Code
+
+[Fira Code](https://github.com/tonsky/FiraCode) is not a traditional VS Code extension and might take a couple more steps to set up, but it's a superb programming font with ligatures that will help you scan code faster once you get used to it.
diff --git a/snippets/articles/s/25-css-gradients.md b/snippets/articles/s/25-css-gradients.md
new file mode 100644
index 000000000..0beaad519
--- /dev/null
+++ b/snippets/articles/s/25-css-gradients.md
@@ -0,0 +1,303 @@
+---
+title: 25 CSS gradients for your next project
+shortTitle: CSS gradients
+type: cheatsheet
+language: css
+tags: [visual]
+author: chalarangelo
+cover: colors-mural
+excerpt: We hand picked 25 of our favorite CSS gradients from uiGradients for your next design. Get them now!
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+[uiGradients](https://uigradients.com/) has an amazing collection of ready-to-use CSS gradients for pretty much anything. I highly recommend checking out the full collection. Meantime, here are our top picks in case you're looking for some color:
+
+<style>
+.gradient-box {
+  width: 100%;
+  height: 64px;
+  border-radius: 8px 8px 0 0;
+  margin-bottom: -16px;
+  margin-top: 32px;
+}
+
+.gradient-box + .gatsby-highlight > pre.blog-code {
+  border-radius: 0 0 8px 8px;
+}
+
+.stripe {
+  background: linear-gradient(to right, #1fa2ff, #12d8fa, #a6ffcb);
+}
+.flare {
+  background: linear-gradient(to right, #f12711, #f5af19);
+}
+.vanusa {
+  background: linear-gradient(to right, #da4453, #89216b);
+}
+.sublime-light {
+  background: linear-gradient(to right, #fc5c7d, #6a82fb);
+}
+.bighead {
+  background: linear-gradient(to right, #c94b4b, #4b134f);
+}
+.velvet-sun {
+  background: linear-gradient(to right, #e1eec3, #f05053);
+}
+.relay {
+  background: linear-gradient(to right, #3a1c71, #d76d77, #ffaf7b);
+}
+.crystal-clear {
+  background: linear-gradient(to right, #159957, #155799);
+}
+.celestial {
+  background: linear-gradient(to right, #c33764, #1d2671);
+}
+.ibiza-sunset {
+  background: linear-gradient(to right, #ee0979, #ff6a00);
+}
+.fresh-turboscent {
+  background: linear-gradient(to right, #f1f2b5, #135058);
+}
+.cheer-up-emo-kid {
+  background: linear-gradient(to right, #556270, #ff6b6b);
+}
+.starfall {
+  background: linear-gradient(to right, #f0c27b, #4b1248);
+}
+.nelson {
+  background: linear-gradient(to right, #f2709c, #ff9472);
+}
+.forever-lost {
+  background: linear-gradient(to right, #5d4157, #a8caba);
+}
+.blurry-beach {
+  background: linear-gradient(to right, #d53369, #cbad6d);
+}
+.influenza {
+  background: linear-gradient(to right, #c04848, #480048);
+}
+.calm-darya {
+  background: linear-gradient(to right, #5f2c82, #49a09d);
+}
+.titanium {
+  background: linear-gradient(to right, #283048, #859398);
+}
+.pinky {
+  background: linear-gradient(to right, #dd5e89, #f7bb97);
+}
+.purple-paradise {
+  background: linear-gradient(to right, #1d2b64, #f8cdda);
+}
+.horizon {
+  background: linear-gradient(to right, #003973, #e5e5be);
+}
+.noon-to-dusk {
+  background: linear-gradient(to right, #ff6e7f, #bfe9ff);
+}
+.jshine {
+  background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
+}
+.argon {
+  background: linear-gradient(to right, #03001e, #7303c0, #ec38bc, #fdeff9);
+}
+</style>
+
+<div class="gradient-box stripe"></div>
+
+```css
+.stripe {
+  background: linear-gradient(to right, #1fa2ff, #12d8fa, #a6ffcb);
+}
+```
+
+<div class="gradient-box flare"></div>
+
+```css
+.flare {
+  background: linear-gradient(to right, #f12711, #f5af19);
+}
+```
+
+<div class="gradient-box vanusa"></div>
+
+```css
+.vanusa {
+  background: linear-gradient(to right, #da4453, #89216b);
+}
+```
+
+<div class="gradient-box sublime-light"></div>
+
+```css
+.sublime-light {
+  background: linear-gradient(to right, #fc5c7d, #6a82fb);
+}
+```
+
+<div class="gradient-box bighead"></div>
+
+```css
+.bighead {
+  background: linear-gradient(to right, #c94b4b, #4b134f);
+}
+```
+
+<div class="gradient-box velvet-sun"></div>
+
+```css
+.velvet-sun {
+  background: linear-gradient(to right, #e1eec3, #f05053);
+}
+```
+
+<div class="gradient-box argon"></div>
+
+```css
+.argon {
+  background: linear-gradient(to right, #03001e, #7303c0, #ec38bc, #fdeff9);
+}
+```
+
+<div class="gradient-box celestial"></div>
+
+```css
+.celestial {
+  background: linear-gradient(to right, #c33764, #1d2671);
+}
+```
+
+<div class="gradient-box relay"></div>
+
+```css
+.relay {
+  background: linear-gradient(to right, #3a1c71, #d76d77, #ffaf7b);
+}
+```
+
+<div class="gradient-box crystal-clear"></div>
+
+```css
+.crystal-clear {
+  background: linear-gradient(to right, #159957, #155799);
+}
+```
+
+<div class="gradient-box ibiza-sunset"></div>
+
+```css
+.ibiza-sunset {
+  background: linear-gradient(to right, #ee0979, #ff6a00);
+}
+```
+
+<div class="gradient-box fresh-turboscent"></div>
+
+```css
+.fresh-turboscent {
+  background: linear-gradient(to right, #f1f2b5, #135058);
+}
+```
+
+<div class="gradient-box cheer-up-emo-kid"></div>
+
+```css
+.cheer-up-emo-kid {
+  background: linear-gradient(to right, #556270, #ff6b6b);
+}
+```
+
+<div class="gradient-box starfall"></div>
+
+```css
+.starfall {
+  background: linear-gradient(to right, #f0c27b, #4b1248);
+}
+```
+
+<div class="gradient-box nelson"></div>
+
+```css
+.nelson {
+  background: linear-gradient(to right, #f2709c, #ff9472);
+}
+```
+
+<div class="gradient-box forever-lost"></div>
+
+```css
+.forever-lost {
+  background: linear-gradient(to right, #5d4157, #a8caba);
+}
+```
+
+<div class="gradient-box blurry-beach"></div>
+
+```css
+.blurry-beach {
+  background: linear-gradient(to right, #d53369, #cbad6d);
+}
+```
+
+<div class="gradient-box influenza"></div>
+
+```css
+.influenza {
+  background: linear-gradient(to right, #c04848, #480048);
+}
+```
+
+<div class="gradient-box jshine"></div>
+
+```css
+.jshine {
+  background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
+}
+```
+
+<div class="gradient-box calm-darya"></div>
+
+```css
+.calm-darya {
+  background: linear-gradient(to right, #5f2c82, #49a09d);
+}
+```
+
+<div class="gradient-box titanium"></div>
+
+```css
+.titanium {
+  background: linear-gradient(to right, #283048, #859398);
+}
+```
+
+<div class="gradient-box pinky"></div>
+
+```css
+.pinky {
+  background: linear-gradient(to right, #dd5e89, #f7bb97);
+}
+```
+
+<div class="gradient-box purple-paradise"></div>
+
+```css
+.purple-paradise {
+  background: linear-gradient(to right, #1d2b64, #f8cdda);
+}
+```
+
+<div class="gradient-box horizon"></div>
+
+```css
+.horizon {
+  background: linear-gradient(to right, #003973, #e5e5be);
+}
+```
+
+<div class="gradient-box noon-to-dusk"></div>
+
+```css
+.noon-to-dusk {
+  background: linear-gradient(to right, #ff6e7f, #bfe9ff);
+}
+```
diff --git a/snippets/articles/s/4-javascript-array-methods.md b/snippets/articles/s/4-javascript-array-methods.md
new file mode 100644
index 000000000..f7b9cf635
--- /dev/null
+++ b/snippets/articles/s/4-javascript-array-methods.md
@@ -0,0 +1,59 @@
+---
+title: 4 JavaScript Array methods you must know
+shortTitle: Useful array methods
+type: story
+language: javascript
+tags: [array,cheatsheet]
+author: chalarangelo
+cover: arrays
+excerpt: JavaScript arrays have a very robust API offering some amazing tools. Learn the 4 must-know JavaScript array methods in this quick guide.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+JavaScript arrays have a very robust API offering a plethora of amazing tools. Here are our top 4 JavaScript array methods every developer should know:
+
+### Array.prototype.map()
+
+[`Array.prototype.map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) creates a new array by applying the provided transformation to each element of the original array. The result is an array with the same length as the original array and elements transformed based on the provided function.
+
+```js
+const arr = [1, 2, 3];
+const double = x => x * 2;
+arr.map(double); // [2, 4, 6]
+```
+
+### Array.prototype.filter()
+
+[`Array.prototype.filter()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) creates a new array by using a filtering function to keep only elements that return `true` based on that function. The result is an array with equal or less than the original array's length, containing a subset of the same elements as the original array.
+
+```js
+const arr = [1, 2, 3];
+const isOdd = x => x % 2 === 1;
+arr.filter(isOdd); // [1, 3]
+```
+
+![JavaScript Array Methods](./illustrations/js-array-methods.png)
+
+### Array.prototype.reduce()
+
+[`Array.prototype.reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) creates an output value of any type depending on a reducer function and an initial value. The result can be of any type such as an integer, an object or an array, based on the reducer function provided.
+
+```js
+const arr = [1, 2, 3];
+
+const sum = (x, y) => x + y;
+arr.reduce(sum, 0); // 6
+
+const increment = (x, y) => [...x, x[x.length - 1] + y];
+arr.reduce(increment, [0]); // [0, 1, 3, 6]
+```
+
+### Array.prototype.find()
+
+[`Array.prototype.find()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find) returns the first element for which a matcher function returns `true`. The result is a single element from the original array.
+
+```js
+const arr = [1, 2, 3];
+const isOdd = x => x % 2 === 1;
+arr.find(isOdd); // 1
+```
diff --git a/snippets/articles/s/4-seo-tips-for-developers.md b/snippets/articles/s/4-seo-tips-for-developers.md
new file mode 100644
index 000000000..47c0aa007
--- /dev/null
+++ b/snippets/articles/s/4-seo-tips-for-developers.md
@@ -0,0 +1,27 @@
+---
+title: 4 SEO tips for developers
+shortTitle: SEO tips
+type: story
+tags: [webdev,seo]
+author: chalarangelo
+cover: sunrise-over-city
+excerpt: SEO is a very relevant topics that most developers are inexperienced in. Here are 4 actionable SEO tips you can implement today.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+SEO is becoming increasingly relevant as the internet keeps growing. While most web developers usually have little experience with SEO, it is not particularly difficult to handle some of the basics. Here are my top SEO tips for web developers:
+
+###  Craft user-friendly URLs and map the appropriately
+
+First and foremost, start at the very beginning, which is your **URL slugs**. For URL slugs the rule is that you want them to be human-readable, with words separated by dashes and with no random letters or digits added. Secondly, it's a good idea to make sure that parts of your URLs match to a **logical structure** in your website (e.g. `/blog/posts/awesome-list-of-seo-tips`). Finally, take the time to build a sitemap and redirect any broken or old URLs to new ones. This will help reduce 404 pages.
+
+### Use structured data to help Google understand your pages
+
+**Structured data** is what Google uses to power its **featured snippets**, those little cards that appear at the top of certain searches. It's a good idea to set up structured data for your pages, which will help you rank higher in search results and possibly even land a featured snippet every once in a while. Just make sure to find the appropriate structured data type and include it in your page and you should be good to go.
+### Set up Google Analytics and Google Search Console
+
+This is hardly a new tip, but I think it deserves a spot on the list, as both of these tools are extremely important. **Google Analytics** allows you to track user behavior and gather data that can help you identify problems and opportunities, while **Google Search Console** is helpful for figuring out what users are searching for before landing on your website.
+
+### Keep an eye on your markup, performance and accessibility
+
+Last but not least, something that is probably already on your list, is **optimizing your code**. This includes everything from writing semantic markup and keeping requests to a minimum to optimizing for all device types, making your website accessible and ensuring fast load times. Keep in mind that websites have many moving parts that evolve and change over time, so it's a good idea to audit your website often with a tool like Lighthouse.
diff --git a/snippets/articles/s/5-tips-for-better-pull-requests.md b/snippets/articles/s/5-tips-for-better-pull-requests.md
new file mode 100644
index 000000000..d7ade7348
--- /dev/null
+++ b/snippets/articles/s/5-tips-for-better-pull-requests.md
@@ -0,0 +1,33 @@
+---
+title: 5 tips for better Pull Requests
+type: story
+language: git
+tags: [github,programming,webdev]
+author: chalarangelo
+cover: keyboard-tea
+excerpt: Writing good code is only part of the job. Here are 5 tips to improve your pull requests and help people review them.
+unlisted: true
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Writing good code is only part of the job. Here are 5 tips to improve your pull requests and help people review them:
+
+### Small pull requests
+
+The pull requests that get reviewed more thoroughly and confidently and are most often prioritized by developers with limited time are the smallest ones. Make sure you separate concerns into different pull requests (e.g. refactoring and feature implementation), while also keeping commits atomic and well-documented to make the changes easier to understand and review.
+
+### Good descriptions
+
+Always take the time to describe your code and any related tasks in your pull request. Explain the feature you are implementing or the bug you are fixing and provide images and steps to reproduce, if applicable. Note decisions made during implementation, your approach, as well as any limitations, findings and points of interest that might help others better understand your code.
+
+### Rebase onto master
+
+Always rebase your pull requests onto the `master` branch of the repository. This way you can always test your code against the latest changes and resolve merge conflicts, minimizing issues that might arise later on. Apart from that, reviewers will not have to deal with missing features or bug fixes that might have been deployed already, which can considerably speed up review times.
+
+### Review it yourself
+
+Before submitting your pull request for review, always take the time to review it yourself. That way you can handle some low-hanging fruits (typos, easy optimizations, leftover code etc.) and check things you would in other people's pull requests. Self-reviewing has the added benefit of allowing you to reason about decisions and realize which ones might need clarification.
+
+### Respond to reviews
+
+Set some time aside to respond to reviews after submitting your pull request. Handle anything you can as soon as possible and start discussion whenever necessary to arrive to a solution. Use `--fixup` for changes suggested in review comments or add new commits to help reviewers parse new changes more easily. Finally, assume good intentions, be polite and thank your peers.
diff --git a/snippets/articles/s/6-javascript-regexp-tricks.md b/snippets/articles/s/6-javascript-regexp-tricks.md
new file mode 100644
index 000000000..2412a3632
--- /dev/null
+++ b/snippets/articles/s/6-javascript-regexp-tricks.md
@@ -0,0 +1,121 @@
+---
+title: 6 JavaScript Regular Expression features you can use today
+shortTitle: JavaScript Regular Expression tips
+type: story
+language: javascript
+tags: [string,regexp]
+author: chalarangelo
+cover: taking-photos
+excerpt: Regular expressions are very powerful, but hard to master. Understand these features and start using them in your JavaScript code.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Regular expressions, while very powerful, are notoriously hard to master. Here are 6 useful features that can help you start using them in your JavaScript projects:
+
+### Capturing groups
+
+Capturing groups allow you to get specific parts of the matched string, simply by wrapping part of the regular expression in parentheses `(...)`:
+
+```js
+const str = 'JavaScript is a programming language';
+/(JavaScript) is a (.*)/.exec(str);
+/*
+  [
+    0: 'JavaScript is a programming language',
+    1: 'JavaScript',
+    2: 'programming language'
+  ]
+*/
+```
+
+### Non-capturing groups
+
+Non-capturing groups are used for matching something without capturing it, like an either/or matching group that you do not really need. They are defined similarly to capturing groups, but prefixed with `?:`:
+
+```js
+const str = 'JavaScript is a programming language';
+/(?:JavaScript|Python) is a (.+)/.exec(str);
+/*
+  [
+    0: 'JavaScript is a programming language',
+    1: 'programming language'
+  ]
+*/
+```
+
+### Named capturing groups
+
+Named capturing groups allow you to name a capturing group, by prefixing it with `<name>`:
+
+```js
+const str = 'JavaScript is a programming language';
+/(?<subject>.+) is a (?<description>.+)/.exec(str);
+/*
+  [
+    0: 'JavaScript is a programming language',
+    1: 'JavaScript',
+    2: 'programming language',
+    groups: {
+      subject: 'JavaScript,
+      description: 'programming language'
+    }
+  ]
+*/
+```
+
+### Capturing group backreferences
+
+Backreferences help you write shorter regular expressions, by repeating an existing capturing group, using `\1`, `\2` etc. Similarly, you can also repeat named capturing groups using `\k<name>`:
+
+```js
+const str = 'JavaScript is a programming language - an awesome programming language JavaScript is';
+/(.+) is a (?<description>.+) - an awesome \k<description> \1 is/.exec(str);
+/*
+  [
+    0: 'JavaScript is a programming language - an awesome programming language JavaScript is',
+    1: 'JavaScript',
+    2: 'programming language',
+    groups: {
+      subject: 'JavaScript,
+      description: 'programming language'
+    }
+  ]
+*/
+```
+
+### Lookaheads
+
+Lookaheads allow you to check if something is followed by a certain pattern, without actually matching it. You can create positive lookaheads using `?=` and negative lookaheads using `?!`:
+
+```js
+const str = 'JavaScript is not the same as Java and you should remember that';
+/Java(?=Script)(.*)/.exec(str);
+/*
+  [
+    0: 'JavaScript is not the same as Java and you should remember that',
+    1: 'Script is not the same as Java and you should remember that'
+  ]
+*/
+
+/Java(?!Script)(.*)/.exec(str);
+/*
+  [
+    0: 'Java and you should remember that',
+    1: ' and you should remember that'
+  ]
+*/
+```
+
+### Unicode characters
+
+Finally, you can match unicode characters, using `/p{...}` and the `/u` flag. Examples include, but are not limited to `{Emoji}`, `{Math_Symbols}` and `{Script=Greek}`:
+
+```js
+const str = 'Greek looks like this: γεια';
+/\p{Script=Greek}+/u.exec(str);
+/*
+  [
+    0: 'γεια'
+  ]
+*/
+```
diff --git a/snippets/articles/s/6-python-f-strings-tips.md b/snippets/articles/s/6-python-f-strings-tips.md
new file mode 100644
index 000000000..20ced25b2
--- /dev/null
+++ b/snippets/articles/s/6-python-f-strings-tips.md
@@ -0,0 +1,80 @@
+---
+title: 6 Python f-strings tips and tricks
+type: story
+language: python
+tags: [string]
+author: chalarangelo
+cover: sea-view
+excerpt: Python's f-strings can do a lot more than you might expect. Learn a few useful tips and tricks in this quick guide.
+dateModified: 2021-07-20T05:00:00-04:00
+---
+
+Python's f-strings provide a more readable, concise and less error-prone way to format strings than traditional string formatting. They are packed with useful features that are sure to come in handy in day-to-day use. Let's take a look at some of them.
+
+### String Interpolation
+
+The most used f-string feature by far is string interpolation. All you need to do is wrap the value or variable in curly braces (`{}`) and you're good to go.
+
+```py
+str_val = 'apples'
+num_val = 42
+
+print(f'{num_val} {str_val}') # 42 apples
+```
+
+### Variable names
+
+Apart from getting a variable's value, you can also get its name alongside the value. This can be especially useful when debugging and can be easily accomplished by adding an equals sign (`=`) after the variable name inside the curly braces.
+
+Bear in mind that whitespace inside the curly braces is taken into account, so adding spaces around the equals sign can make for a more readable result.
+
+```py
+str_val = 'apples'
+num_val = 42
+
+print(f'{str_val=}, {num_val = }') # str_val='apples', num_val = 42
+```
+
+### Mathematical operations
+
+Not syntactically unlike variable names, you can also perform mathematical operations in f-strings. You can place the mathematical expression inside the curly braces and, if you add an equal sign, you'll get the expression and its result.
+
+```py
+num_val = 42
+
+print(f'{num_val % 2 = }') # num_val % 2 = 0
+```
+
+### Printable representation
+
+Apart from plain string interpolation, you might want to get the printable representation of a value. This is already easy to accomplish using the `repr()` function. f-strings provide a much shorter syntax by appending a `!r` inside the curly braces.
+
+```py
+str_val = 'apples'
+
+print(f'{str_val!r}') # 'apples'
+```
+
+### Number formatting
+
+Additionally, f-strings can also be used for formatting - hence the **f** in the name. To add formatting to a value you can add a colon (`:`) followed by a format specifier. This can also be combined with the equals sing from before, shall you want to print the name of the variable as well.
+
+Numbers are a great candidate for this. If, for example, you want to trim a numeric value to two digits after the decimal, you can use the `.2f` format specifier.
+
+```py
+price_val = 6.12658
+
+print(f'{price_val:.2f}') # 6.13
+```
+
+### Date formatting
+
+Finally, dates can also be formatted the same way as numbers, using format specifiers. As usual, `%Y` denotes the full year, `%m` is the month and `%d` is the day of the month.
+
+```py
+from datetime import datetime;
+
+date_val = datetime.utcnow()
+
+print(f'{date_val=:%Y-%m-%d}') # date_val=2021-07-09
+```
diff --git a/snippets/articles/s/7-chrome-extensions-for-web-developers.md b/snippets/articles/s/7-chrome-extensions-for-web-developers.md
new file mode 100644
index 000000000..37a93a22b
--- /dev/null
+++ b/snippets/articles/s/7-chrome-extensions-for-web-developers.md
@@ -0,0 +1,39 @@
+---
+title: 7 essential Chrome extensions for web developers
+shortTitle: Essential Chrome extensions
+type: story
+tags: [webdev,devtools]
+author: chalarangelo
+cover: computer-screens
+excerpt: Boost your productivity with 7 must-have Google Chrome developer tool extensions.
+unlisted: true
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Google Chrome's developer tools are nothing short of amazing, but there are a few missing tools that can increase your productivity even further. Here are my personal favorite extensions that I use everyday:
+
+### CSS Peeper
+[CSS Peeper](https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk?hl=en) is an all-in-one tool for CSS inspection that allows you to quickly peek at the styles, fonts, color palettes and assets of any website you want.
+
+### React Developer Tools
+[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) is the de facto extension when working with React, providing all the necessary inspection tools for your React applications.
+
+### LastPass
+
+[LastPass](https://chrome.google.com/webstore/detail/lastpass-free-password-ma/hdokiejnpimakedhajhdlcegeplioahd?hl=en) keeps your accounts and API keys secure, by providing a free password manager complete with password generation and password-protected notes.
+
+### uBlock Origin
+
+[uBlock Origin](https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm?hl=en) is a simple yet effective ad blocker extension that you can just install and forget about, as it keeps your browsing experience ad-free.
+
+### VisBug
+
+[VisBug](https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en) allows you to tweak website designs on the fly, using very intuitive controls and tools, without having to delve into any code at all.
+
+### JSON Viewer
+
+[JSON Viewer](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=en) provides some much needed syntax highlighting and style customization to JSON responses, which are nowadays very commonplace in most web APIs.
+
+### EditThisCookie
+
+[EditThisCookie](https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg?hl=en) is a powerful cookie manager extension, that allows you to add, delete, edit and even export and import cookies quickly and efficiently.
diff --git a/snippets/articles/s/8-tips-for-accessible-websites.md b/snippets/articles/s/8-tips-for-accessible-websites.md
new file mode 100644
index 000000000..74c291d3a
--- /dev/null
+++ b/snippets/articles/s/8-tips-for-accessible-websites.md
@@ -0,0 +1,43 @@
+---
+title: 8 tips for accessible websites
+shortTitle: Accessibility tips
+type: story
+language: javascript
+tags: [accessibility,webdev]
+author: chalarangelo
+cover: accessibility
+excerpt: Accessibility (a11y) can improve your website and attract new users. Learn how to get started with these 8 quick tips.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### Use semantic HTML
+
+HTML5 introduced a variety of new semantic HTML elements to help replace the much dreaded `<div>`, such as `<section>`, `<main>`, `<article>`, `<nav>` etc. When developing a website, you should understand what each part of your layout represents and try to use the appropriate element for it.
+
+### Use color correctly
+
+[WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) specifies a minimum contrast ratio of `4.5:1` between text and background (viewable in Chrome Developer Tools), so you should always design with that in mind. Additionally, remember that color should be used meaningfully and sparsely to avoid confusion and information overload.
+
+### Caption images and video
+
+Try to provide `alt` attributes for your `<img>` elements, so that screenreaders don't read the `src` attribute. You can use empty `alt` attributes for decorative images, which will inform screenreaders to skip them. Similarly, try to provide closed captions for any video content on your website.
+
+### Show and tell
+
+Using icons and colors to indicate state, highlight or provide context is very common and provides a nice user experience. However, icons and colors alone might not be accessible for everyone, so make sure to support them with the appropriate text literals, catering to all of your users in the process.
+
+### Be consistent
+
+Elements with similar meaning and/or functionality should look similar across your website. This is especially true for `<a>` and `<button>` elements and their respective states as users will have to be able to identify easily what elements they can interact with and anticipate their behavior.
+
+### Label your inputs
+
+Any kind of `<input>` element should be labelled appropriately, using either a `<label>` wrapper, the `for` attribute or an `aria-label` attribute. Do not rely on `placeholder` attributes to convey meaning about your `<input>` elements as this will cause problems for users on screenreaders.
+
+### Design responsively
+
+Responsiveness is often thought in terms of screen size or mobile vs desktop, but there are many different devices where a user could browse your website. Try catering to any and all of them by providing ways to navigate and use your application via mouse, keyboard, thumb or any combination of the three.
+
+### Organize your content
+
+A website's layout should be easy to scan, understand and find the content that is relevant to the user. Good organization with clear sections and properly grouped content provides a better user experience for all users, regardless of device or accessibility needs.
diff --git a/snippets/articles/s/8-tips-for-remote-work.md b/snippets/articles/s/8-tips-for-remote-work.md
new file mode 100644
index 000000000..76618d8f6
--- /dev/null
+++ b/snippets/articles/s/8-tips-for-remote-work.md
@@ -0,0 +1,43 @@
+---
+title: 8 tips for working from home
+type: story
+tags: [webdev,career,programming,jobs]
+author: chalarangelo
+cover: kettle-laptop
+excerpt: Working from home seems great compared to going to the office, but there are challenges that come with it that you need to overcome.
+unlisted: true
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Working from home (also known as remote work) seems like a great alternative to going to the office every morning, but it comes with its own set of challenges that you need to overcome in order to stay healthy and productive. Here are my tips for achieving just that:
+
+### Set up your work environment
+
+Working from home has its perks, but nothing beats a well-designed office space where everything is set up with only one purpose in mind: working. Figure out your home office, experiment with different settings and understand what works best for you as soon as possible. An ideal working space is comfortable, quiet and has the right equipment for you.
+
+### Establish ground rules
+
+Most likely you are not living alone, so you have to establish some ground rules with your roommate or significant other. It's up to you to drive the point home that during working hours you are, for the most part, not home. Sure, you can answer the door if you expect a delivery, but that's pretty much as far as you can go. People should not bother you during working hours, unless absolutely necessary, as small distractions pile up fast.
+
+### Inform others of your availability
+
+It's important to let people know that you are online and working or that you are taking a short break for lunch. Remember that you are still part of a team that requires coordination and others probably depend on your work to some extent. Remember to update your status as necessary to make collaboration easier.
+
+### Socialize with coworkers
+
+Working from home can lead to feelings of loneliness, disconnect, isolation which can quickly spin out of control and lead to depression. Communicate with people on your team as if you were in the same room. A healthy amount of communication will help you feel more like you are all working together rather than each one on their own.
+
+5. Be your best professional self
+Nobody might be watching you at home, so you can theoretically slack off as much as you like in your pajamas, but that's not very professional. Try to dress appropriately in case you join a video call and behave professionally, so no inappropriate websites or hours upon hours of checking social media. Ask yourself if someone in a shared office space would do whatever it is you are doing and, if the answer is no, stop doing it.
+
+### Plan your daily and weekly tasks
+
+Having a coherent working plan helps you organize your time and prioritize important tasks above trivial ones. It also helps to put things into perspective and have a general idea of what other people on the team are working on. Plan ahead of time together with your team and keep each other posted on the progress of each task. Short term plans help you get through the day, long term plans help everyone meet their deadlines.
+
+### Use the right collaboration tools
+
+Working from home has its own challenges and issues, so try to find the right tools for the job. Slack, Skype, Zoom, Hangouts are great for communication. Design tools such as Figma or Sketch cloud help you communicate designs quickly and effectively. GitHub is the perfect tool for code collaboration and VS Code has an extension (Live Share) for sharing your code editors. Communicate with your team, figure out your needs and pick tools that work for you.
+
+### Maintain regular hours
+
+It's as easy to forget about breaks as it is to start working late. Try to set a schedule that sits well with your team and stick to it. If you would work 9 to 5 in a regular office environment, do the same at home. Take regular breaks, do not forget to sign off when put in your daily hours and come back tomorrow. After all, it's business as usual.
diff --git a/snippets/articles/s/async-javascript-cheatsheet.md b/snippets/articles/s/async-javascript-cheatsheet.md
new file mode 100644
index 000000000..42748b311
--- /dev/null
+++ b/snippets/articles/s/async-javascript-cheatsheet.md
@@ -0,0 +1,113 @@
+---
+title: Asynchronous JavaScript Cheat Sheet
+type: cheatsheet
+language: javascript
+tags: [function,promise]
+author: chalarangelo
+cover: green-plant
+excerpt: Learn everything you need to know about promises and asynchronous JavaScript with this handy cheatsheet.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### Promise basics
+
+- **Promises** start in a **pending state**, neither fulfilled or rejected.
+- When the operation is completed, a promise will become **fulfilled with a value**.
+- If the operation fails, a promise will get **rejected with an error**.
+
+### Creating promises
+
+- The function passed to the `Promise` constructor will execute synchronously.
+- Use `resolve()` or `reject()` to create promises from values.
+- `Promise.resolve(val)` will fulfill the promise with `val`.
+- `Promise.reject(err)` will reject the promise with `err`.
+- If you put a fulfilled promise into a fulfilled promise, they will collapse into one.
+
+```js
+// Resolving with a value, rejecting with an error
+new Promise((resolve, reject) => {
+  performOperation((err, val) => {
+    if (err) reject(err);
+    else resolve(val);
+  });
+});
+
+// Resolving without value, no need for reject
+const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+```
+
+### Handling promises
+
+- `Promise.prototype.then()` accepts two optional arguments (`onFulfilled`, `onRejected`).
+- `Promise.prototype.then()` will call `onFulfilled` once the promise is fulfilled.
+- `Promise.prototype.then()` will call `onRejected` if the promise is rejected.
+- `Promise.prototype.then()` passes errors through if `onRejected` in undefined.
+
+- `Promise.prototype.catch()` accepts one argument (`onRejected`).
+- `Promise.prototype.catch()` behaves like `Promise.prototype.then()` when `onFulfilled` is omitted.
+- `Promise.prototype.catch()` passes fulfilled values through.
+
+- `Promise.prototype.finally()` accepts one argument (`onFinally`).
+- `Promise.prototype.finally()` calls `onFinally` with no arguments once any outcome is available.
+- `Promise.prototype.finally()` passes through input promise.
+
+```js
+promisedOperation()
+  .then(
+    val => value + 1,   // Called once the promise is fulfilled
+    err => {            // Called if the promise is rejected
+      if (err === someKnownErr) return defaultVal;
+      else throw err;
+    }
+  )
+  .catch(
+    err => console.log(err); // Called if the promise is rejected
+  )
+  .finally(
+    () => console.log('Done'); // Called once any outcome is available
+  );
+```
+
+- All three of the above methods will not be executed at least until the next tick, even for promises that already have an outcome.
+
+### Combining promises
+
+- `Promise.all()` turns an array of promises into a promise of an array.
+- If any promise is rejected, the error will pass through.
+- `Promise.race()` passes through the first settled promise.
+
+```js
+Promise
+  .all([ p1, p2, p3 ])
+  .then(([ v1, v2, v3 ]) => {
+    // Values always correspond to the order of promises,
+    // not the order they resolved in (i.e. v1 corresponds to p1)
+  });
+
+Promise
+  .race([ p1, p2, p3 ])
+  .then(val => {
+    // val will take the value of the first resolved promise
+  });
+```
+
+### async/await
+
+- Calling an `async` function always results in a promise.
+- `(async () => value)()` will resolve to `value`.
+- `(async () => throw err)()` will reject with an error.
+- `await` waits for a promise to be fulfilled and returns its value.
+- `await` can only be used in `async` functions.
+- `await` also accepts non-promise values.
+- `await` always waits at least until the next tick before resolving, even when waiting already fulfilled promises or non-promise values.
+
+```js
+async () => {
+  try {
+    let val = await promisedValue();
+    // Do stuff here
+  } catch (err) {
+    // Handle error
+  }
+}
+```
diff --git a/snippets/articles/s/bash-alias-dollar-sign.md b/snippets/articles/s/bash-alias-dollar-sign.md
new file mode 100644
index 000000000..a12c69db7
--- /dev/null
+++ b/snippets/articles/s/bash-alias-dollar-sign.md
@@ -0,0 +1,19 @@
+---
+title: "Tip: A bash alias for copying from the web"
+shortTitle: Bash alias for copying from the web
+type: tip
+language: git
+tags: [configuration]
+author: chalarangelo
+cover: capsule-coffee
+excerpt: Many online resources prefix their terminal commands with a dollar sign. Luckily, we've got a solution to this small annoyance.
+dateModified: 2023-03-05T05:00:00-04:00
+---
+
+If you've ever copied a terminal command from the web, chances are you've also copied the dollar sign (`$`) that precedes it. This is a small annoyance that many developers encounter almost daily, but it can be easily dealt with. All you need to do is add an `alias` for the dollar sign to your `.bashrc` or `.zshrc` file:
+
+```shell
+alias '$'=''
+```
+
+But what about variables? Aren't these prefixed with a dollar sign? This alias won't break your scripts, as aliases replace only the first word of each simple command. Simply put, the only dollar sign that will be replaced is the one at the beginning of the line.
diff --git a/snippets/articles/s/benefits-of-writing.md b/snippets/articles/s/benefits-of-writing.md
new file mode 100644
index 000000000..708eb05d5
--- /dev/null
+++ b/snippets/articles/s/benefits-of-writing.md
@@ -0,0 +1,29 @@
+---
+title: The benefits of writing
+type: story
+tags: [webdev,career,programming,jobs]
+author: chalarangelo
+cover: laptop-view
+excerpt: Writing about a topic can often sound boring or worthless. But there are significant benefits to doing it from time to time.
+dateModified: 2022-11-05T14:00:07+03:00
+---
+
+I was recently tasked with writing a design document at work. What first seemed like a tiresome chore I had to endure turned out to be both enlightening and beneficial both to me and my team. This isn't just a case of making the best of a bad situation, but rather a case of rediscovering the reason behind why writing down your thoughts isn't an exercise in futility. Instead of boring you with a long-winded story about the task, I'll just present the takeaways and hopefully do some storytelling in the process. So why should you write then?
+
+### You learn more about the topic at hand
+
+Presenting a topic requires meticulous **research** in order for you to be able to write down the most interesting and relevant findings. This process will uncover any **gaps in your knowledge** of said topic, gaps your research will in turn have to cover. I've seen this numerous times in the past while doing research both for this website as well as tasks at work and it always holds true. If nothing else, you will gain a **deeper understanding** of whatever it is you are presenting, which will be useful sometime in the future. In the case of my task, I understood more about the business logic, how premature optimizations got in the way of stability and why it was so hard to consistently reach the desired state, as I discovered a hidden layer of complexity I didn't know about before.
+
+### You discover the root of the problem
+
+Most of the time we assume to know the problem well enough to try and solve it. A lot of the time, I've found out, I know a lot less than I originally thought about the domain, the problem and, more importantly, the root cause of it. Again, **presenting the problem to a reader** will put you through the process of having to **explain it** and boil it down to the key details. This more often than not results in a concise description of whatever is at the **root of the problem**. Working on my design document, I figured out that the root of the problem was essentially a set of bad assumptions that kept piling up and had some mismatches between the backend and frontend code.
+
+### You understand past decisions
+
+This one applies to problems you aren't the first one to tackle, but might still be relevant in other situations. As you go you will come across whatever **implementation details** you didn't know about. If you take a closer look, you'll figure out how those came to be in the first place and **why those decisions were made** in the past. Understanding the reasons behind past decisions is crucial in figuring out if the original set of needs, restrictions and assumptions is still valid and how to amend them if necessary. As I was already knee-deep in this task, I realized that the decisions we made almost one year prior were valid at the time, decisions I didn't fully understand back then. A couple of them, however, didn't seem to stand the test of time as business needs changed and we'd have to update them accordingly.
+
+### You come up with more varied solutions
+
+Understanding past decisions, covering the gaps in your knowledge and boiling down the problem to a concise description you should already be a lot more informed about the topic you are researching than before. Hopefully at this stage, you will have an itch to try **a different solution** from the one you originally envisioned or you'll have come up with a solution where there was none. More varied solutions are always better because you can **compare tradeoffs** and get a better understanding of what's best. In my case, I ended up considering a solution I had mostly dismissed originally. And it was that solution which made the most sense to me in the end, even though it was more radical than the one I was planning to propose originally.
+
+As a closing thought, try writing even if nobody is going to read it. Write it for you. It will help you understand, explain, reason about and tackle the task all at once. It's not a waste of time, it's a powerful tool you could leverage from time to time.
diff --git a/snippets/articles/s/big-o-cheatsheet.md b/snippets/articles/s/big-o-cheatsheet.md
new file mode 100644
index 000000000..efc945464
--- /dev/null
+++ b/snippets/articles/s/big-o-cheatsheet.md
@@ -0,0 +1,64 @@
+---
+title: Big-O Cheat Sheet
+type: cheatsheet
+language: javascript
+tags: [algorithm]
+author: chalarangelo
+cover: light-ring
+excerpt: Learn everything you need to know about Big-O notation with this handy cheatsheet.
+dateModified: 2023-01-08T05:00:00-04:00
+---
+
+### Definition
+
+Big-O notation, represents an algorithm's **worst-case complexity**. It uses algebraic terms to describe the complexity of an algorithm, allowing you to measure its efficiency and performance. Below you can find a chart that illustrates Big-O complexity:
+
+![Big-O Complexity Chart](./illustrations/big-o-complexity.png)
+
+Simply put, `O(1)` stands for **constant time complexity**, which is the most efficient, while `O(n!)` stands for **factorial time complexity**, which is the least efficient. The `n` in the complexity represents the size of the input, so `O(n)` means that the algorithm's time complexity will grow linearly with the size of the input.
+
+Apart from Big-O notation, there are other notations that are used to describe the complexity of an algorithm, such as `Ω` (Omega) and `Θ` (Theta). `Ω` describes the **best-case complexity** of an algorithm, while `Θ` describes the **average-case complexity** of an algorithm.
+
+### Common Data Structure operations
+
+Different data structures have different time complexities for the same operations. For example, a linked list has `O(1)` time complexity for `insert` and `delete` operations, while an array has `O(n)` time complexity for the same operations. Below you can find average and worst time complexities for data structures used commonly in web development.
+
+#### Average time complexity
+
+| Data Structure | Access | Search | Insertion | Deletion |
+| --- | --- | --- | --- | --- |
+| [**Array**](/articles/s/js-native-data-structures) | Θ(1) | Θ(n) | Θ(n) | Θ(n) |
+| [**Queue**](/articles/s/js-data-structures-queue) | Θ(n) | Θ(n) | Θ(1) | Θ(1) |
+| [**Stack**](/articles/s/js-data-structures-stack) | Θ(n) | Θ(n) | Θ(1) | Θ(1) |
+| [**Linked List**](/articles/s/js-data-structures-linked-list) | Θ(n) | Θ(n) | Θ(1) | Θ(1) |
+| [**Doubly Linked List**](/articles/s/js-data-structures-doubly-linked-list) | Θ(n) | Θ(n) | Θ(1) | Θ(1) |
+| **Skip List** | Θ(log n) | Θ(log n) | Θ(log n) | Θ(log n) |
+| **Hash Table** | N/A | Θ(1) | Θ(1) | Θ(1) |
+| [**Binary Search Tree**](/articles/s/js-data-structures-binary-search-tree) | Θ(log n) | Θ(log n) | Θ(log n) | Θ(log n) |
+
+#### Worst time complexity
+
+| Data Structure | Access | Search | Insertion | Deletion |
+| --- | --- | --- | --- | --- |
+| [**Array**](/articles/s/js-native-data-structures) | O(1) | O(n) | O(n) | O(n) |
+| [**Queue**](/articles/s/js-data-structures-queue) | O(n) | O(n) | O(1) | O(1) |
+| [**Stack**](/articles/s/js-data-structures-stack) | O(n) | O(n) | O(1) | O(1) |
+| [**Linked List**](/articles/s/js-data-structures-linked-list) | O(n) | O(n) | O(1) | O(1) |
+| [**Doubly Linked List**](/articles/s/js-data-structures-doubly-linked-list) | O(n) | O(n) | O(1) | O(1) |
+| **Skip List** | O(n) | O(n) | O(n) | O(n) |
+| **Hash Table** | N/A | O(n) | O(n) | O(n) |
+| [**Binary Search Tree**](/articles/s/js-data-structures-binary-search-tree) | O(n) | O(n) | O(n) | O(n) |
+
+### Array sorting algorithms
+
+Similar to data structures, different array sorting algorithms have different time complexities. Below you can find the best, average and worst time complexities for the most common array sorting algorithms.
+
+| Algorithm | Best | Average | Worst |
+| --- | --- | --- | --- |
+| [**Quick sort**](/js/s/quick-sort) | Ω(n log n) | Θ(n log n) | O(n^2) |
+| [**Merge sort**](/js/s/merge-sort) | Ω(n log n) | Θ(n log n) | O(n log n) |
+| [**Heap sort**](/js/s/heapsort) | Ω(n log n) | Θ(n log n) | O(n log n) |
+| [**Bubble sort**](/js/s/bubble-sort) | Ω(n) | Θ(n^2) | O(n^2) |
+| [**Insertion sort**](/js/s/insertion-sort) | Ω(n) | Θ(n^2) | O(n^2) |
+| [**Selection sort**](/js/s/selection-sort) | Ω(n^2) | Θ(n^2) | O(n^2) |
+| [**Bucket sort**](/js/s/bucket-sort) | Ω(n+k) | Θ(n+k) | O(n^2) |
diff --git a/snippets/articles/s/breaking-react.md b/snippets/articles/s/breaking-react.md
new file mode 100644
index 000000000..6bd64ec49
--- /dev/null
+++ b/snippets/articles/s/breaking-react.md
@@ -0,0 +1,51 @@
+---
+title: Breaking React - a common pattern to avoid
+type: story
+language: react
+tags: [debugging]
+author: chalarangelo
+cover: broken-screen
+excerpt: As powerful as React is, it is also quite fragile at places. Did you know that a few lines can easily break your entire React application?
+dateModified: 2021-11-06T20:51:47+03:00
+---
+
+I am by no means an expert React engineer, but I have a couple years of experience under my belt. React is a powerful library for building user interfaces, but it's also quite fragile at places. A common bug I have encountered is caused by **direct DOM manipulation in combination with React**. This is sort of an anti-pattern, as it can break your entire React application under the right circumstances and it's hard to debug.
+
+Here's [a minimal example](https://codepen.io/chalarangelo/pen/jOEojVJ?editors=0010) of how to reproduce this bug, before we dive into explaining the problem and how to fix it:
+
+```jsx
+const destroyElement = () =>
+  document.getElementById('app').removeChild(document.getElementById('my-div'));
+
+const App = () => {
+  const [elementShown, updateElement] = React.useState(true);
+
+  return (
+    <div id='app'>
+      <button onClick={() => destroyElement()}>
+        Delete element via querySelector
+      </button>
+      <button onClick={() => updateElement(!elementShown)}>
+        Update element and state
+      </button>
+    { elementShown ? <div id="my-div">I am the element</div> : null }
+    </div>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
+```
+
+This is a pretty simple React application, with a container, two buttons and a state variable. The problem is it will crash if you click the button that calls `destroyElement()` and then click the other one. _Why?_ you might ask. The issue here might not be immediately obvious, but if you look at your browser console you will notice the following exception:
+
+```
+Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
+```
+
+This might still be cryptic, so let me explain what's going on. React uses its own representation of the DOM, called a **virtual DOM**, in order to figure out what to render. Usually, the virtual DOM will match the current DOM structure and React will process changes in props and state. It will then update the virtual DOM and then batch and send the necessary changes to the real DOM.
+
+However, in this case React's virtual DOM and the real DOM are different, because of `destroyElement()` removing the `#my-div` element. As a result, when React tries to update the real DOM with the changes from the virtual DOM, the element cannot be removed as it doesn't exist anymore. This results in the above exception being thrown and your application breaking.
+
+You can refactor `destroyElement()` to be part of the `App` component and interact with its state to fix the issue in this example. Regardless of the simplicity of the problem or the fix, it showcases how fragile React can be under circumstances. This is only compounded in a large codebase where many developers contribute code daily in different areas. In such a setting, issues like this can be easily introduced and tracking them down can be rather tricky. This is why I would advice you to be very careful when directly manipulating the DOM in combination with React.
diff --git a/snippets/articles/s/code-anatomy-chaining-reduce-for-loop.md b/snippets/articles/s/code-anatomy-chaining-reduce-for-loop.md
new file mode 100644
index 000000000..c05d10415
--- /dev/null
+++ b/snippets/articles/s/code-anatomy-chaining-reduce-for-loop.md
@@ -0,0 +1,77 @@
+---
+title: Code Anatomy - For loops, array reduce and method chaining
+shortTitle: For loops, array reduce and method chaining
+type: story
+language: javascript
+tags: [array,iterator]
+author: chalarangelo
+cover: case-study
+excerpt: There are many ways to iterate and transform array data in JavaScript. Learn how each one works and where you should use them.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### For loops
+
+```js
+const files = [ 'foo.txt ', '.bar', '   ', 'baz.foo' ];
+let filePaths = [];
+
+for (let file of files) {
+  const fileName = file.trim();
+  if(fileName) {
+    const filePath = `~/cool_app/${fileName}`;
+    filePaths.push(filePath);
+  }
+}
+
+// filePaths = [ '~/cool_app/foo.txt', '~/cool_app/.bar', '~/cool_app/baz.foo']
+```
+
+- Any `for` loop can be used - [read more about the different JavaScript loops](/blog/s/javascript-for-in-for-of-foreach/).
+- Less common nowadays, due to functional programming being more popular.
+- Control over the iteration, such as skipping over elements or early `return`s.
+- Resulting array needs to be declared beforehand, outside the loop.
+- Uses `Array.prototype.push()` or the spread (`...`) operator to add elements.
+- `O(N)` complexity, each element will be iterated over only once.
+
+### Array reduce
+
+```js
+const files = [ 'foo.txt ', '.bar', '   ', 'baz.foo' ];
+const filePaths = files.reduce((acc, file) => {
+  const fileName = file.trim();
+  if(fileName) {
+    const filePath = `~/cool_app/${fileName}`;
+    acc.push(filePath);
+  }
+  return acc;
+}, []);
+
+// filePaths = [ '~/cool_app/foo.txt', '~/cool_app/.bar', '~/cool_app/baz.foo']
+```
+
+- Uses `Array.prototype.reduce()` with an empty array as the initial value.
+- More common nowadays, due to functional programming being more popular.
+- Less control over the iteration, cannot skip elements or `return` early.
+- Can be chained with other methods, if necessary.
+- Uses `Array.prototype.push()` or the spread (`...`) operator to add elements.
+- `O(N)` complexity, each element will be iterated over only once.
+
+### Method chaining
+
+```js
+const files = [ 'foo.txt ', '.bar', '   ', 'baz.foo' ];
+const filePaths = files
+  .map(file => file.trim())
+  .filter(Boolean)
+  .map(fileName => `~/cool_app/${fileName}`);
+
+// filePaths = [ '~/cool_app/foo.txt', '~/cool_app/.bar', '~/cool_app/baz.foo']
+```
+
+- Uses `Array.prototype.map()` and `Array.prototype.filter()`.
+- More common nowadays, due to functional programming being more popular.
+- Less control over the iteration, cannot skip elements or `return` early.
+- Declarative, easier to read and refactor, chain can grow as necessary.
+- Does not use `Array.prototype.push()` or the spread (`...`) operator.
+- `O(cN)` complexity, `c` iterations per element, (`c`: length of the chain).
diff --git a/snippets/articles/s/code-anatomy-optimizing-recursion.md b/snippets/articles/s/code-anatomy-optimizing-recursion.md
new file mode 100644
index 000000000..2fc847056
--- /dev/null
+++ b/snippets/articles/s/code-anatomy-optimizing-recursion.md
@@ -0,0 +1,122 @@
+---
+title: Code Anatomy - Optimizing recursive functions
+shortTitle: Optimizing recursive functions
+type: story
+language: javascript
+tags: [recursion,performance]
+author: chalarangelo
+cover: case-study
+excerpt: Recursive code tends to be inefficient or in need of optimization. Learn a couple of tricks we use to speed up our recursive functions.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### Recursive functions
+
+Recursion is a programming technique where the final solution is computed by breaking down the problem into smaller instances of the same problem and computing the solution for each one. The most common implementation is a function that calls itself, reducing the problem every time until it reaches an instance of the problem whose solution is either trivial to compute or already known. Let's look at a very well-known example, calculating the `n`th term of the [Fibonacci sequence](https://en.wikipedia.org/wiki/Fibonacci_number), implemented using recursion in JavaScript:
+
+```js
+const fibonacciNumber = n =>
+  n < 2 ? fibonacciNumber(n - 1) + fibonacciNumber(n - 2) : n;
+```
+
+To understand recursion better, let's add a `console.log()` call before each `return` and figure out what exactly is happening:
+
+```js
+const fibonacciNumber = n => {
+  console.log(`[CALLED] fibonacciNumber(${n})`);
+  const r = n >= 2 ? fibonacciNumber(n - 1) + fibonacciNumber(n - 2) : n;
+  console.log(`[RETURN] ${r} for n=${n}`);
+  return r;
+}
+
+fibonacciNumber(4);
+// [CALLED] fibonacciNumber(4)
+// [CALLED] fibonacciNumber(3)
+// [CALLED] fibonacciNumber(2)
+// [CALLED] fibonacciNumber(1)
+// [RETURN] 1 for n=1
+// [CALLED] fibonacciNumber(0)
+// [RETURN] 0 for n=0
+// [RETURN] 1 for n=2
+// [CALLED] fibonacciNumber(1)
+// [RETURN] 1 for n=1
+// [RETURN] 2 for n=3
+// [CALLED] fibonacciNumber(2)
+// [CALLED] fibonacciNumber(1)
+// [RETURN] 1 for n=1
+// [CALLED] fibonacciNumber(0)
+// [RETURN] 0 for n=0
+// [RETURN] 1 for n=2
+// [RETURN] 3 for n=4
+```
+
+As you can see, for each value of `n`, `fibonacciNumber` will be called twice, once with `n - 1` and once with `n - 2` and this will continue until it's called with either `1` or `0`. While this is straightforward to write and understand, it is inefficient as it will have to calculate the same value more than once.
+
+### Calculation memoization
+
+The solution to this problem, and the first trick that you can use to speed up recursive functions, is to use memoization. We already published [a great blog post on memoization](/articles/s/javascript-memoization/) a little while back, so be sure to check it out to learn more about the subject. Here's our `fibonacciNumber` function, using memoization:
+
+```js
+const fibonacciCache = new Map();
+
+const fibonacciNumber = n => {
+  console.log(`[CALL] fibonacciNumber(${n})`);
+  const cacheKey = `${n}`;
+  let r;
+  if(fibonacciCache.has(cacheKey)) {
+    r = fibonacciCache.get(cacheKey);
+    console.log(`[MEMO] Cache hit for ${n}: ${r}`);
+  }
+  else {
+    r = n >= 2 ? fibonacciNumber(n - 1) + fibonacciNumber(n - 2) : n;
+    fibonacciCache.set(cacheKey, r);
+    console.log(`[CALC] Computed and stored value for ${n}: ${r}`);
+  }
+  return r;
+}
+
+fibonacciNumber(4);
+// [CALL] fibonacciNumber(4)
+// [CALL] fibonacciNumber(3)
+// [CALL] fibonacciNumber(2)
+// [CALL] fibonacciNumber(1)
+// [CALC] Computed and stored value for 1: 1
+// [CALL] fibonacciNumber(0)
+// [CALC] Computed and stored value for 0: 0
+// [CALC] Computed and stored value for 2: 1
+// [CALL] fibonacciNumber(1)
+// [MEMO] Cache hit for 1: 1
+// [CALC] Computed and stored value for 3: 2
+// [CALL] fibonacciNumber(2)
+// [MEMO] Cache hit for 2: 1
+// [CALC] Computed and stored value for 4: 3
+```
+
+As you can see in the example above, the value for each `n` is only computed once. While the Fibonacci sequence doesn't require any costly calculations, this could make a huge difference for a more computationally expensive problem. It will also be a lot more noticeable for higher values of `n` where the number of calculations will increase significantly.
+
+### Using iteration
+
+The second and final trick stems from the very definition of recursive programming turned on its head. If we can solve a smaller instance of the problem and use it for the solution of a larger instance of the problem, it should be possible to work iteratively from the smaller problem to the larger one, instead of recursively. Here's this idea in practice for our `fibonacciNumber` function:
+
+```js
+const fibonacciNumber = n => {
+  let r = 0, l = 1, s = 0;
+  for(let i = 0; i < n; i++) {
+    r = l;
+    l = s;
+    s = r + l;
+    console.log(`[CALC] i = ${i}: r = ${r}, l = ${l}, s = ${s}`);
+  }
+  return s;
+}
+
+fibonacciNumber(4);
+// [CALC] i = 0: r = 1, l = 0, s = 1
+// [CALC] i = 1: r = 0, l = 1, s = 1
+// [CALC] i = 2: r = 1, l = 1, s = 2
+// [CALC] i = 3: r = 1, l = 2, s = 3
+```
+
+The iterative solution above makes the same calculations as the memoized one, however it performs better due to two key reasons. First of all, there is no cache, which would take up space in memory, making the latter implementation require fewer resources. Similarly, as there are no recursive calls or checks for cache hits, the code performs better and requires fewer resources to execute.
+
+However, you have to bear in mind what the actual use cases of your recursive code are and be very careful how you optimize them. Memoization can be a more powerful tool if a recursive function is called multiple times with different arguments, as its cache persists between calls, while iteration can be faster for recursive computations that are used less frequently. Always pay attention to your code and optimize for the cases you know or anticipate to be more common.
diff --git a/snippets/articles/s/code-anatomy-performant-python.md b/snippets/articles/s/code-anatomy-performant-python.md
new file mode 100644
index 000000000..6b03e8828
--- /dev/null
+++ b/snippets/articles/s/code-anatomy-performant-python.md
@@ -0,0 +1,63 @@
+---
+title: Code Anatomy - Writing high performance Python code
+shortTitle: Performant Python code
+type: story
+language: python
+tags: [list,performance]
+cover: walking-on-top
+excerpt: Writing efficient Python code can be tricky. Read how we optimize our list snippets to increase performance using a couple of simple tricks.
+dateModified: 2021-11-07T16:34:37+03:00
+---
+
+Writing short and efficient Python code is not always easy or straightforward. However, it's often that we see a piece of code and we don't realize the thought process behind the way it was written. We will be taking a look at the [difference](/python/s/difference) snippet, which returns the difference between two iterables, in order to understand its structure.
+
+Based on the description of the snippet's functionality, we can naively write it like this:
+
+```py
+def difference(a, b):
+  return [item for item in a if item not in b]
+```
+
+This implementation may work well enough, but doesn't account for duplicates in `b`. This makes the code take more time than necessary in cases with many duplicates in the second list. To solve this issue, we can make use of the `set()` method, which will only keep the unique values in the list:
+
+```py
+def difference(a, b):
+  return [item for item in a if item not in set(b)]
+```
+
+This version, while it seems like an improvement, may actually be slower than the previous one. If you look closely, you will see that `set()` is called for every `item` in `a` causing the result of `set(b)` to be evaluated every time. Here's an example where we wrap `set()` with another method to better showcase the problem:
+
+```py
+def difference(a, b):
+  return [item for item in a if item not in make_set(b)]
+
+def make_set(itr):
+  print('Making set...')
+  return set(itr)
+
+print(difference([1, 2, 3], [1, 2, 4]))
+# Making set...
+# Making set...
+# Making set...
+# [3]
+```
+
+The solution to this issue is to call `set()` once before the list comprehension and store the result to speed up the process:
+
+```py
+def difference(a, b):
+  _b = set(b)
+  return [item for item in a if item not in _b]
+```
+
+Another option worth mentioning in terms of performance is the use of a list comprehension versus `filter()` and `list()`. Implementing the same code using the latter option would result in something like this:
+
+```py
+def difference(a, b):
+  _b = set(b)
+  return list(filter(lambda item: item not in _b, a))
+```
+
+Using `timeit` to analyze the performance of the last two code examples, it's pretty clear that using list comprehension can be up to ten times faster than the alternative. This is due to it being a native language feature that works very similar to a simple `for` loop without the overhead of the extra function calls. This explains why we prefer it, apart from readability.
+
+This pretty much applies to most mathematical list operation snippets, such as [difference](/python/s/difference), [symmetric_difference](/python/s/symmetric-difference) and [intersection](/python/s/intersection).
diff --git a/snippets/articles/s/common-regexp-cheatsheet.md b/snippets/articles/s/common-regexp-cheatsheet.md
new file mode 100644
index 000000000..764758592
--- /dev/null
+++ b/snippets/articles/s/common-regexp-cheatsheet.md
@@ -0,0 +1,133 @@
+---
+title: Common regular expressions
+type: cheatsheet
+language: javascript
+tags: [string,regexp]
+author: chalarangelo
+cover: rocky-beach
+excerpt: A collection of regular expressions that can be used to solve common problems.
+dateModified: 2022-11-09T05:00:00-04:00
+---
+
+### Exact string match
+
+- Use the `^` and `$` anchors to match the start and end of the string, respectively.
+- Add the string you want to match in-between the two anchors.
+
+```js
+const regexp = /^abc$/;
+// Where 'abc' is the exact string you want to match
+```
+
+### Match empty string
+
+- Use the `^` and `$` anchors to match the start and end of the string, respectively.
+- Do not add any characters in-between to match an empty string.
+
+```js
+const regexp = /^$/;
+```
+
+### Match whitespace sequences
+
+- Use the `\s` meta-sequence to match any whitespace character, including spaces, tabs, newlines, etc.
+- Use the `+` quantifier to match one or more occurrences of the previous character.
+- Add the global flag (`g`) to match all occurrences of the pattern in the string.
+
+```js
+const regexp = /\s+/g;
+```
+
+### Match line breaks
+
+- Depending on the environment, line breaks can be represented in different ways.
+- Use the `\r` character to match carriage returns, the `\n` character to match newlines, and the `\r\n` sequence to match carriage returns followed by newlines.
+- Add the global (`g`) and multiline (`m`) flags to match all occurrences of the pattern in the string.
+
+```js
+const regexp = /\r|\n|\r\n/gm;
+```
+
+### Match non-word characters
+
+- Use negation (`^`) to match any character that is not a word character (`\w`) or a whitespace character (`\s`).
+- Add the global flag (`g`) to match all occurrences of the pattern in the string.
+- Add the ignore case flag (`i`) to match both uppercase and lowercase characters.
+
+```js
+const regexp = /[^\w\s]/gi;
+```
+
+### Match alphanumeric, dashes and hyphens
+
+- Use the `^` and `$` anchors to match the start and end of the string, respectively.
+- Use the `a-zA-Z0-9-` pattern to match any alphanumeric character, dashes and hyphens.
+- Use the `+` quantifier to match one or more occurrences of the previous character.
+- Particularly useful when matching URL slugs.
+
+```js
+const regexp = /^[a-zA-Z0-9-_]+$/;
+```
+
+### Match letters and whitespaces
+
+- Use the `^` and `$` anchors to match the start and end of the string, respectively.
+- Use the `a-zA-Z\s` pattern to match any letter and whitespace character.
+- Use the `+` quantifier to match one or more occurrences of the previous pattern.
+
+```js
+const regexp = /^[A-Za-z\s]+$/;
+```
+
+### Pattern not included
+
+- Use the `^` and `$` anchors to match the start and end of the string, respectively.
+- Use a negative lookahead (`?!`) to match any character that is not followed by the pattern you want to exclude.
+- Add the global flag (`g`) to match all occurrences of the pattern in the string.
+- To ensure more than one pattern is not included, use the `|` character to separate them.
+
+```js
+const regexp = /^((?!(abc|bcd)).)*$/;
+// Where 'abc' and 'bcd' are pattern you want to exclude
+```
+
+### Text inside brackets
+
+- Use the `\(` and `\)` characters to match the opening and closing brackets, respectively.
+- Use a capturing group between the two and exclude the closing parenthesis character.
+- Use the `+` quantifier to match one or more characters, as needed.
+- Add the global flag (`g`) to match all occurrences of the pattern in the string.
+- Replace `\(` and `\)` with `\[` and `\]` to match square brackets and with `\{` and `\}` to match curly brackets.
+
+```js
+const regexp = /\(([^)]+)\)/g;
+```
+
+### Validate GUID/UUID
+
+- Use the `^` and `$` anchors to match the start and end of the string, respectively.
+- Validate each segment of the GUID/UUID separately using numeric character ranges and quantifiers.
+
+```js
+const regexp = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
+```
+
+### Validate date format (DD/MM/YYYY)
+
+- Use the `^` and `$` anchors to match the start and end of the string, respectively.
+- Validate each segment of the date separately using numeric character ranges and quantifiers.
+- Alter the order of the segments and separators to match different formats.
+
+```js
+const regexp = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
+```
+
+### Chunk string into n-size chunks
+
+- Use the `.{1,n}` quantifier to match any character between `1` and `n` times.
+- Add the global flag (`g`) to match all occurrences of the pattern in the string.
+
+```js
+const regexp = /.{1,2}/g;
+// Where '2' is the number of characters per chunk
+```
diff --git a/snippets/articles/s/console-log-cheatsheet.md b/snippets/articles/s/console-log-cheatsheet.md
new file mode 100644
index 000000000..d4e1ba804
--- /dev/null
+++ b/snippets/articles/s/console-log-cheatsheet.md
@@ -0,0 +1,119 @@
+---
+title: JavaScript console.log() tips & tricks
+type: story
+language: javascript
+tags: [browser,cheatsheet]
+author: chalarangelo
+cover: terminal
+excerpt: Level up your JavaScript logging with these `console.log()` tips and tricks.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Everyone uses the JavaScript console for logging or debugging every once in a while. But there is a lot more to the [console](https://developer.mozilla.org/en-US/docs/Web/API/Console) object than `console.log()`.
+
+### Computed property names
+
+ES6 computed property names are particularly useful, as they can help you identify logged variables by adding a pair of curly braces around them.
+
+```js
+const x = 1, y = 2, z = 3;
+
+console.log({x, y, z}); // {x: 1, y: 2, z: 3}
+```
+
+### console.trace()
+
+[`console.trace()`](https://developer.mozilla.org/en-US/docs/Web/API/Console/trace) works the exact same as `console.log()`, but it also outputs the entire stack trace so you know exactly what's going on.
+
+```js
+const outer = () => {
+  const inner = () => console.trace('Hello');
+  inner();
+};
+
+outer();
+/*
+  Hello
+  inner @ VM207:3
+  outer @ VM207:5
+  (anonymous) @ VM228:1
+*/
+```
+
+### console.group()
+
+[`console.group()`](https://developer.mozilla.org/en-US/docs/Web/API/Console/group) allows you to group logs into collapsable structures and is particularly useful when you have multiple logs.
+
+```js
+console.group('Outer');           // Create a group labelled 'Outer'
+console.log('Hello');             // Log inside 'Outer'
+console.groupCollapsed('Inner');  // Create a group labelled 'Inner', collapsed
+console.log('Hellooooo');         // Log inside 'Inner'
+console.groupEnd();               // End of current group, 'Inner'
+console.groupEnd();               // End of current group, 'Outer'
+console.log('Hi');                // Log outside of any groups
+```
+
+### Logging levels
+
+There are a few more logging levels apart from `console.log()`, such as [`console.debug()`](https://developer.mozilla.org/en-US/docs/Web/API/Console/debug), [`console.info()`](https://developer.mozilla.org/en-US/docs/Web/API/Console/info), [`console.warn()`](https://developer.mozilla.org/en-US/docs/Web/API/Console/warn) and [`console.error()`](https://developer.mozilla.org/en-US/docs/Web/API/Console/error).
+
+```js
+console.debug('Debug message');
+console.info('Useful information');
+console.warn('This is a warning');
+console.error('Something went wrong!');
+```
+
+### console.assert()
+
+[`console.assert()`](https://developer.mozilla.org/en-US/docs/Web/API/console/assert) provides a handy way to only log something as an error when an assertion fails (i.e. when the first argument is `false`), otherwise skip the log entirely.
+
+```js
+const value = 10;
+
+console.assert(value === 10, 'Value is not 10!'); // Nothing is logged
+console.assert(value === 20, 'Value is not 20!'); // Logs "Value is not 20!"
+```
+
+### console.count()
+
+You can use [`console.count()`](https://developer.mozilla.org/en-US/docs/Web/API/Console/count) to count how many times a piece of code has executed.
+
+```js
+Array.from({ length: 4 }).forEach(
+  () => console.count('items')  // Call the counter labelled 'items'
+);
+/*
+  items: 1
+  items: 2
+  items: 3
+  items: 4
+*/
+console.countReset('items');  // Reset the counter labelled 'items'
+```
+
+### console.time()
+
+[`console.time()`](https://developer.mozilla.org/en-US/docs/Web/API/Console/time) gives you a quick way to check the performance of your code, but should not be used for real benchmarking due to its low accuracy.
+
+```js
+console.time('slow comp');    // Start the 'slow comp' timer
+console.timeLog('slow comp'); // Log the value of the 'slow comp' timer
+console.timeEnd('slow comp'); // Stop and log the 'slow comp' timer
+```
+
+### CSS
+
+Last but not least, you can use the `%c` string substitution expression in `console.log()` to apply CSS to parts of a log.
+
+```js
+console.log(
+  'CSS can make %cyour console logs%c %cawesome%c!',  // String to format
+  // Each string is the CSS to apply for each consecutive %c
+  'color: #fff; background: #1e90ff; padding: 4px',   // Apply styles
+  '',                                                 // Clear any styles
+  'color: #f00; font-weight: bold',                   // Apply styles
+  ''                                                  // Clear any styles
+);
+```
diff --git a/snippets/articles/s/cookies-local-storage-session.md b/snippets/articles/s/cookies-local-storage-session.md
new file mode 100644
index 000000000..b30181258
--- /dev/null
+++ b/snippets/articles/s/cookies-local-storage-session.md
@@ -0,0 +1,57 @@
+---
+title: What is the difference between cookies, local storage, and session storage?
+shortTitle: Cookies, local storage, and session storage
+type: question
+language: javascript
+tags: [browser,webdev]
+author: chalarangelo
+cover: three-vases
+excerpt: Learn the difference between cookies, local storage and session storage and start using the correct option for your needs.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### Cookies
+
+Cookies store small amounts of data that has to be sent back to the server with subsequent requests and their expiration can be set from either server or client. They are primarily used for server-side reading.
+
+- Capacity: 4KB
+- Accessible from: Any window
+- Expiration: Manually set
+- Storage location: Browser and server
+- Sent with requests: Yes
+- Blockable by users: Yes
+- Editable by users: Yes
+
+### Local storage
+
+Local storage stores a larger amount of data on the client's computer in a key-value pair format and has no expiration date. Data is never transferred to the server and is accessible via JavaScript and HTML5.
+
+- Capacity: 10MB
+- Accessible from: Any window
+- Expiration: Never
+- Storage location: Browser only
+- Sent with requests: No
+- Blockable by users: Yes
+- Editable by users: Yes
+
+### Session storage
+
+Session storage stores a larger amount of data on the client's computer only for the current session, expiring the data on tab close. Data is never transferred to the server and is accessible client-side from the same tab.
+
+- Capacity: 5MB
+- Accessible from: Same tab
+- Expiration: On tab close
+- Storage location: Browser only
+- Sent with requests: No
+- Blockable by users: Yes
+- Editable by users: Yes
+
+|    | Cookies | Local storage | Session storage |
+| -- | -- | -- | -- |
+| Capacity | 4KB | 10MB | 5MB |
+| Accessible from | Any window | Any window | Same tab |
+| Expiration | Manually set | Never | On tab close |
+| Storage location | Browser and server | Browser only | Browser only |
+| Sent with requests | Yes | No | No |
+| Blockable by users | Yes | Yes | Yes |
+| Editable by users | Yes | Yes | Yes |
diff --git a/snippets/articles/s/copy-text-to-clipboard-with-javascript.md b/snippets/articles/s/copy-text-to-clipboard-with-javascript.md
new file mode 100644
index 000000000..d5280d5b6
--- /dev/null
+++ b/snippets/articles/s/copy-text-to-clipboard-with-javascript.md
@@ -0,0 +1,55 @@
+---
+title: How can I copy text to clipboard with JavaScript?
+shortTitle: Copy text to clipboard
+type: question
+language: javascript
+tags: [browser]
+author: chalarangelo
+cover: typing
+excerpt: Learn how to programmatically copy text to clipboard with a few lines of JavaScript and level up your web development skills.
+dateModified: 2022-01-11T09:47:54+03:00
+---
+
+### Asynchronous Clipboard API
+
+A very common need when building websites is the ability to copy text to clipboard with a single button click. If you only need to support modern browsers, it's highly recommended to use the asynchronous [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API). It's supported in all modern browsers and provides an easy and secure way to update the clipboard's contents.
+
+All you have to do is ensure `Navigator`, `Navigator.clipboard` and `Navigator.clipboard.writeText` are truthy and then call `Clipboard.writeText()` to copy the value to clipboard. In case anything goes wrong, you can use `Promise.reject()` to return a promise that rejects immediately and keep the return type consistent.
+
+```js
+const copyToClipboard = str => {
+  if (navigator && navigator.clipboard && navigator.clipboard.writeText)
+    return navigator.clipboard.writeText(str);
+  return Promise.reject('The Clipboard API is not available.');
+};
+```
+
+This is pretty much how the [copyToClipboardAsync snippet](/js/s/copy-to-clipboard-async) is implemented and should work across all modern browsers.
+
+### Document.execCommand('copy')
+
+While support for the Clipboard API is pretty high across the board, you might need a fallback if you have to support older browsers. If that's the case, you can use `Document.execCommand('copy')` to do so. Here's a quick step-by-step guide:
+
+1. Create a` <textarea>` element to be appended to the document. Set its value to the string you want to copy to the clipboard.
+2. Append the `<textarea>` element to the current HTML document and use CSS to hide it to prevent flashing.
+3. Use `HTMLInputElement.select()` to select the contents of the `<textarea>` element.
+4. Use `Document.execCommand('copy')` to copy the contents of the `<textarea>` to the clipboard.
+5. Remove the `<textarea>` element from the document.
+
+```js
+const copyToClipboard = str => {
+  const el = document.createElement('textarea');
+  el.value = str;
+  el.setAttribute('readonly', '');
+  el.style.position = 'absolute';
+  el.style.left = '-9999px';
+  document.body.appendChild(el);
+  el.select();
+  document.execCommand('copy');
+  document.body.removeChild(el);
+};
+```
+
+Bear in mind that this method will not work everywhere, but only as a result of a user action (e.g. inside a `click` event listener), due to the way `Document.execCommand()` works.
+
+There are a couple of other considerations, such as restoring the user's previous selection on the document, which can be easily handled with modern JavaScript. You can find the final code with these improvements implemented in the [copyToClipboard snippet](/js/s/copy-to-clipboard/).
diff --git a/snippets/articles/s/cors-explained.md b/snippets/articles/s/cors-explained.md
new file mode 100644
index 000000000..b6df95bbe
--- /dev/null
+++ b/snippets/articles/s/cors-explained.md
@@ -0,0 +1,29 @@
+---
+title: What is CORS?
+shortTitle: CORS explained
+type: question
+language: javascript
+tags: [browser,webdev]
+author: chalarangelo
+cover: chill-surfing
+excerpt: CORS (Cross-Origin Resource Sharing) trips up many developers, but it's pretty easy to wrap your head around.
+dateModified: 2023-05-07T05:00:00-04:00
+---
+
+When it comes to HTTP, an **origin** is defined by several different aspects of a URL. As mentioned in a [previous article](/articles/s/js-window-location-cheatsheet/), the origin is composed of the following:
+
+- The **protocol** (e.g. `http` or `https`)
+- The **hostname** (e.g. `30secondsofcode.org`)
+- The **port** (e.g. `80` or `3000`)
+
+As long as **all three** of these match, the browser considers the two URLs to be **same-origin**. If any of these aspects differ, the browser considers the two URLs to be **cross-origin**. It might be helpful to look at some examples of different origins to clarify:
+
+- `http://30secondsofcode.org` and `https://www.30secondsofcode.org` (different protocols)
+- `http://www.30secondsofcode.org` and `http://dev.30secondsofcode.org` (different hostnames)
+- `https://30secondsofcode.org` and `https://30secondsofcode.org:3000` (different ports)
+
+It's also important to note that the **path** (everything that comes after the hostname) is **not part of the origin**. This means that `https://30secondsofcode.org` and `https://30secondsofcode.org/articles` are considered to be the same origin.
+
+When **CORS** (Cross-Origin Resource Sharing) is mentioned, it's usually in the context of **Same-Origin Policy**, a security feature implemented by web browsers. It **blocks web pages from making cross-origin requests** with the purpose of preventing malicious websites from making unauthorized requests to sensitive resources on other domains.
+
+As this can be quite restrictive, CORS allows the server to specify which other domains are allowed to make requests to its resources. This is done through the use of **CORS headers**, `Origin` in the request and `Access-Control-Allow-Origin` in the response. This way, for example, API servers can allow requests from specific web pages, while still blocking requests from other domains.
diff --git a/snippets/articles/s/css-centering.md b/snippets/articles/s/css-centering.md
new file mode 100644
index 000000000..cb715bea2
--- /dev/null
+++ b/snippets/articles/s/css-centering.md
@@ -0,0 +1,27 @@
+---
+title: 4 ways to center content with CSS
+shortTitle: Centering content with CSS
+type: story
+language: css
+tags: [layout]
+author: chalarangelo
+cover: mountain-lake
+excerpt: Centering content with CSS might often feel tricky. Here are 4 easy tricks you can use in your code today.
+dateModified: 2021-09-28T19:35:49+03:00
+---
+
+### Flexbox
+
+Using flexbox to vertically and horizontally center content is usually the **preferred method**. All it takes is three lines of code in the container element to set `display: flex` and then center the child element vertically and horizontally using `align-items: center` and `justify-content: center` respectively. You can view the [Flexbox centering snippet](/css/s/flexbox-centering) for the code and examples.
+
+### Grid
+
+Using the grid module is very similar to flexbox and also a common technique, especially if you are **already using grid in your layout**. The only difference from the previous technique is the `display` which is set to `grid` instead. You can view the [Grid centering snippet](/css/s/grid-centering) for the code and examples.
+
+### Transform
+
+Transform centering uses, as the name implies, CSS transforms to center an element. It depends on the container element having a `position: relative`, allowing the child element to utilize `position: absolute` to position itself. Then `left: 50%` and `top: 50%` are used to offset the child element and `transform: translate(-50%, -50%)` to negate its position. You can view the [Transform centering snippet](/css/s/transform-centering) for the code and examples.
+
+### Table
+
+Last but not least, table centering is an older technique which you might favor when working with **older browsers**. It depends on the use of `display: table` in the container element. This allows the child element to use `display: table-cell` in combination with `text-align: center` and `vertical-align: middle` to center itself horizontally and vertically. You can view the [Display table centering snippet](/css/s/display-table-centering) for the code and examples.
diff --git a/snippets/articles/s/css-clamp.md b/snippets/articles/s/css-clamp.md
new file mode 100644
index 000000000..d8c08f597
--- /dev/null
+++ b/snippets/articles/s/css-clamp.md
@@ -0,0 +1,21 @@
+---
+title: "Tip: Use clamp() in CSS for responsive typography"
+shortTitle: CSS clamp()
+type: tip
+language: css
+tags: [visual]
+author: chalarangelo
+cover: strawberries
+excerpt: Implement responsive typography with the CSS clamp() function.
+dateModified: 2022-12-28T05:00:00-04:00
+---
+
+Responsive typography has been in fashion for a while now, but some developers find it hard to implement. This is usually due to confusing algebraic formulas or complex hacks. Luckily, CSS has introduced the `clamp()` function, which makes it easy to create responsive typography with a single line of code. All you need to do is set the minimum, maximum, and preferred value and the browser will do the rest.
+
+```css
+h2 {
+  font-size: clamp(1.5rem, 5vw, 3rem);
+}
+```
+
+For a more complex example, take a look at the [Fluid typography snippet](/css/s/fluid-typography).
diff --git a/snippets/articles/s/css-code-reviews.md b/snippets/articles/s/css-code-reviews.md
new file mode 100644
index 000000000..f6bd35d1a
--- /dev/null
+++ b/snippets/articles/s/css-code-reviews.md
@@ -0,0 +1,34 @@
+---
+title: How do you review CSS code in Pull Requests?
+shortTitle: CSS code reviews
+type: story
+language: css
+tags: [webdev]
+author: chalarangelo
+cover: green-css
+excerpt: Reviewing CSS code is a skill that takes time to master. Here are some tips from my personal experience to help you get started.
+dateModified: 2023-05-21T05:00:00-04:00
+---
+
+Reviewing CSS code is a bit different than reviewing JavaScript code. In fact, many developers pay little attention to CSS, which can lead to problems down the line. Yet, many developers don't know how to review CSS code properly. In this post, we'll go over some of the things you should look for when reviewing CSS code in Pull Requests.
+
+### Visual check
+
+The very first step when reviewing CSS is to check if the **result looks right**. This might mean comparing the end result to a **design mockup** or checking if every interaction behaves according to the animation principles the team has agreed upon. **Responsiveness** is also a key factor to consider, so you should check if the page looks right on **different screen sizes**. The visual check is probably the most straightforward and important step, but unfortunately many developers stop there.
+
+### Code style
+
+Your team should have set up a **linter and formatter** for CSS and, if you haven't, you should do it as soon as possible. This will help you enforce a consistent code style and make the code easier to read and maintain. Provided that's the case, you should check for **conventions** that the linter can't automatically enforce. These often include naming conventions, proper documentation or the use of CSS custom properties in place of hard-coded values.
+
+### Specificity
+
+CSS selectors can be easily abused, causing headaches later down the line. Having clear conventions usually resolves a lot of issues, but things can slip through the cracks. Ensuring specificity is **as low as possible** and that selectors are **not too generic or overly complex** will help increase the code's maintainability.
+
+### Leftovers
+
+In an ideal scenario, the Pull Request author has a clear vision of the CSS they are writing and everything works out perfectly the first time. As you know, that's rarely the case, meaning experimentation and changes will happen during development. As the code changes, some **old code** might hang around without contributing anything to the page. One of the most common examples I've stumbled upon are flexbox-related properties for non-flexbox elements. These take a bit of time to spot, but they can be easily removed, saving you problems in the future.
+
+### Performance
+
+CSS performance is very often overlooked. Simple rules, deduplication and minimum overrides are some of the things that can be done to improve performance. Understandably, this sort of opportunity is **hard to spot**, but it's worth keeping an eye out for. That being said, don't go overboard with performance optimizations. If you're not sure if something is worth it, you should probably leave it as is.
+
diff --git a/snippets/articles/s/css-current-color.md b/snippets/articles/s/css-current-color.md
new file mode 100644
index 000000000..29a799975
--- /dev/null
+++ b/snippets/articles/s/css-current-color.md
@@ -0,0 +1,36 @@
+---
+title: The currentColor CSS keyword
+type: tip
+language: css
+tags: [visual]
+author: chalarangelo
+cover: picking-berries
+excerpt: The `currentColor` CSS keyword is a nifty alternative to custom properties for simple use cases.
+dateModified: 2022-11-30T05:00:00-04:00
+---
+
+Modern CSS supports custom properties, yet the `currentColor` keyword precedes them by a few years. Thus, you might still find it in the wild and it is worth knowing what it does and how it works.
+
+```html
+<p>My <span>background</span> is the same color as my <a href="#">text</a>.</p>
+```
+
+```css
+p {
+  color: #101010;
+}
+
+p, p > * {
+  background-color: currentColor;
+}
+
+a {
+  color: #0077ff;
+}
+
+span {
+  color: #fd203a;
+}
+```
+
+`currentColor` contains the current value of the `color` property of the element. It is useful when you want to use the same color for multiple properties, such as `border-color` or `background-color`. It also respects the cascade, so if no value is provided for `color`, it will use the value of the `color` property of the parent element.
diff --git a/snippets/articles/s/css-easing-variables.md b/snippets/articles/s/css-easing-variables.md
new file mode 100644
index 000000000..2dd16da19
--- /dev/null
+++ b/snippets/articles/s/css-easing-variables.md
@@ -0,0 +1,43 @@
+---
+title: "Tip: CSS easing variables"
+shortTitle: CSS easing variables
+type: tip
+language: css
+tags: [animation]
+author: chalarangelo
+cover: curve
+excerpt: Learn how to use the `cubic-bezier()` class of easing functions and create beautiful animations that stand out.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Most web developers use the built-in `ease`, `ease-in`, `ease-out` or `ease-in-out` functions for most use-cases of `transition-timing-function` in their designs. While these are perfectly fine for everyday use, there's a far more powerful, yet intimidating option available, the [`bezier-curve()`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) function.
+
+Using the `bezier-curve()` we can easily define custom easing variables that can help our designs pop out. In fact the built-in functions mentioned above can also be written using the `bezier-curve()` function. Here's a handful of useful easing functions stored in CSS variables for ease of use:
+
+```css
+:root {
+  /* ease-in corresponds to cubic-bezier(0.42, 0, 1.0, 1.0) */
+  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+
+  /* ease-out corresponds to cubic-bezier(0, 0, 0.58, 1.0) */
+  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
+
+  /* ease-in-out corresponds to cubic-bezier(0.42, 0, 0.58, 1.0) */
+  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+}
+```
diff --git a/snippets/articles/s/css-footer-at-the-bottom.md b/snippets/articles/s/css-footer-at-the-bottom.md
new file mode 100644
index 000000000..a9954a4ae
--- /dev/null
+++ b/snippets/articles/s/css-footer-at-the-bottom.md
@@ -0,0 +1,53 @@
+---
+title: How can I ensure the footer is always at the bottom of the page?
+shortTitle: Footer at the bottom
+type: question
+language: css
+tags: [layout]
+author: chalarangelo
+cover: flower-shape-sunset
+excerpt: Make sure the footer stays at the bottom of the page, instead of floating up when the content is too short.
+dateModified: 2022-10-30T05:00:00-04:00
+---
+
+Preventing the footer from floating up the page is important when trying to create a polished website. Pages with **short content** can run into this issue, but it's easy to fix with a few lines of CSS. Assuming your HTML looks something like the snippet below, here are two modern ways to ensure the footer is always at the bottom of the page:
+
+```html
+<body>
+  <main><!-- Main content --></main>
+  <footer><!-- Footer content --></footer>
+</body>
+```
+
+### Using Flexbox
+
+You can use flexbox to ensure that the footer is always at the bottom of the page. This is done by setting the giving the `body` element `min-height: 100vh`, `display: flex` and `flex-direction: column`. Then, give the `footer` element a `margin-top: auto` to make its margin fill the remaining space between it and its previous sibling. Note that this technique will not stretch the previous sibling, but rather **push the footer to the bottom of the page**.
+
+
+```css
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+footer {
+  margin-top: auto;
+}
+```
+
+### Using Grid
+
+You can also use grid in a very similar fashion. Simply swap `display: flex` for `display: grid` and `flex-direction: column` for `grid-template-rows: 1fr auto` in the `body` element. No additional attributes are needed for the `footer` element. In this case, the `fr` unit is leveraged to stretch the `main` element to **fill the remaining space**.
+
+```css
+body {
+  min-height: 100vh;
+  display: grid;
+  grid-template-rows: 1fr auto;
+}
+```
+
+### Notes
+
+As you can see, both techniques are straightforward to implement. Depending on your needs one might be more suitable than the other. Generally speaking, grid is more flexible in most cases and can help if you have more complex layouts, which can include a header or sidebar.
diff --git a/snippets/articles/s/css-inherited-properties-cheatsheet.md b/snippets/articles/s/css-inherited-properties-cheatsheet.md
new file mode 100644
index 000000000..b3585e7fe
--- /dev/null
+++ b/snippets/articles/s/css-inherited-properties-cheatsheet.md
@@ -0,0 +1,51 @@
+---
+title: CSS inherited properties cheatsheet
+shortTitle: Inherited properties
+type: cheatsheet
+language: css
+tags: [layout]
+author: chalarangelo
+cover: half-trees
+excerpt: A quick reference for inherited CSS properties.
+dateModified: 2022-11-20T05:00:00-04:00
+---
+
+The [CSS specification](https://www.w3.org/TR/CSS21/propidx.html) clearly states which CSS properties are inherited but the related appendix is not the most user-friendly resource. Here's a quick reference of the inherited properties that you are most likely to run into:
+
+- `border-collapse`
+- `border-spacing`
+- `caption-side`
+- `color`
+- `cursor`
+- `direction`
+- `empty-cells`
+- `font-family`
+- `font-size`
+- `font-style`
+- `font-variant`
+- `font-weight`
+- `font-size-adjust`
+- `font-stretch`
+- `font`
+- `letter-spacing`
+- `line-height`
+- `list-style-image`
+- `list-style-position`
+- `list-style-type`
+- `list-style`
+- `orphans`
+- `quotes`
+- `tab-size`
+- `text-align`
+- `text-align-last`
+- `text-decoration-color`
+- `text-indent`
+- `text-justify`
+- `text-shadow`
+- `text-transform`
+- `visibility`
+- `white-space`
+- `widows`
+- `word-break`
+- `word-spacing`
+- `word-wrap`
diff --git a/snippets/articles/s/css-nested-border-radius.md b/snippets/articles/s/css-nested-border-radius.md
new file mode 100644
index 000000000..d4fd07980
--- /dev/null
+++ b/snippets/articles/s/css-nested-border-radius.md
@@ -0,0 +1,28 @@
+---
+title: "Tip: Perfect nested border radius in CSS"
+shortTitle: Perfect nested border radius in CSS
+type: tip
+language: css
+tags: [visual]
+author: chalarangelo
+cover: rocky-beach-waves
+excerpt: Nesting elements with rounded borders can look very wrong if not done correctly. Here's a quick tip on how to do it right.
+dateModified: 2022-04-03T05:00:00-04:00
+---
+
+Nesting elements with rounded borders can look very wrong if not done correctly. Luckily, there's a simple math trick to make it look right. All you need to do is **calculate the border radius of one of the elements and the distance between them**. The border radius of the outer element should be equal to the sum of the border radius of the inner element and the distance between the two elements. This can be mathematically expressed as `innerRadius + distance = outerRadius` or more tersely `R1 + D = R2`.
+
+![Nested border radius formula](./illustrations/border-radius.png)
+
+Let's take a look at a simple CSS example. Say we want to style two nested boxes with rounded borders. The outer box has a `border-radius` of `24px` and a `padding` of `8px`. Using the previous formula, we can deduce that the inner box should have a `border-radius` of `16px`.
+
+```css
+.outer {
+  border-radius: 24px;
+  padding: 8px;
+}
+
+.inner {
+  border-radius: 16px;
+}
+```
diff --git a/snippets/articles/s/css-pseudo-classes.md b/snippets/articles/s/css-pseudo-classes.md
new file mode 100644
index 000000000..65b3a7787
--- /dev/null
+++ b/snippets/articles/s/css-pseudo-classes.md
@@ -0,0 +1,25 @@
+---
+title: What are CSS pseudo-classes?
+shortTitle: CSS pseudo-classes
+type: question
+language: css
+tags: [webdev]
+author: chalarangelo
+cover: orange-flower
+excerpt: Learn how to use CSS pseudo-classes to style an element based on changes to its state.
+dateModified: 2021-11-07T16:34:37+03:00
+---
+
+CSS pseudo-classes provide a way to style elements, based on changes to their state. For example, `:hover` can be used to apply additional styles to an element when the user's pointer hovers over it.
+
+Pseudo-classes let you apply styles to elements in relation to the content of the document tree (e.g. `:first-child`), external factors such as the history of the navigator (e.g. `:visited`), the status of their content (e.g. `:checked`) or the position of the mouse (e.g. `:hover`).
+
+### Commonly used pseudo-classes
+
+Below is a list of the top 5 most commonly used pseudo-classes and their usage. This list is by no means complete. You should always refer to relevant documentation from authoritative sources, such as [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) for more information.
+
+- `:hover`, `:focus` and `:active` are used to provide feedback for user interaction (e.g. changing a button's color on hover)
+- `:link` and `:visited` are useful for styling links based on navigation history (e.g. changing the color of visited links)
+- `:first-child`, `:last-child`, `:nth-child()` and `nth-last-child()` are useful when working with collections of elements
+- `:not()` is used to match everything except the given selector and can be useful in styling hard to select elements
+- `:lang()` allows you to apply special styles based on the language of the document and is useful for multilingual websites
diff --git a/snippets/articles/s/css-reset.md b/snippets/articles/s/css-reset.md
new file mode 100644
index 000000000..2eef4a843
--- /dev/null
+++ b/snippets/articles/s/css-reset.md
@@ -0,0 +1,87 @@
+---
+title: CSS Reset
+type: story
+language: css
+tags: [visual]
+author: chalarangelo
+cover: pink-flower-tree
+excerpt: A short, opinionated CSS reset to make your websites look great everywhere.
+dateModified: 2022-10-16T05:00:00-04:00
+---
+
+Browsers nowadays are much better at presenting HTML in a consistent manner, making CSS resets of the past largely unnecessary. However, **default browser styles are not particularly great** in most cases, which is why there are tons of CSS resets out there. Drawing inspiration from some of them, here's my opinionated CSS reset, along with an explanation of why I chose to include each rule.
+
+```css
+html {
+  max-width: 70ch;
+  margin: auto;
+  padding: 3em 1em;
+  font-family: system-ui, 'Segoe UI', Roboto, Cantarell,
+    'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 1.25em;
+  line-height: 1.75;
+}
+
+body {
+  margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 3em 0 1em;
+}
+
+p, ul, ol {
+  margin-bottom: 2em;
+  color: #1d1d1d;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub, sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+pre, code, kbd {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+```
+
+- `html`:
+  - `max-width` - Use `ch` units to set the maximum width in the middle of the optimal readable range (60-80 characters).
+  - `margin` - Center content on the page.
+  - `padding` - Prevent edge-to-edge text on smaller viewports.
+  - `font-family` - Use the [system font stack](/css/s/system-font-stack) to ensure the best possible font rendering. `system-ui` is a new generic font family that replaces `-apple-system` and `BlinkMacSystemFont`.
+  - `font-size` - Use a larger font size for better readability and to keep up with recent design trends.
+  - `line-height` - Use a larger line height to increase visual clarity.
+- `body`:
+  `margin` - Remove the default margin in all browsers.
+- `h1`-`h6`:
+  - `margin` - Use larger margins for headers to improve visual hierarchy.
+- `p`, `ul`, `ol`:
+  - `margin-bottom` - Add spacing between textual elements.
+  - `color` - Soften text color to improve readability.
+- `small`:
+  - `font-size` - Correct font size discrepancies between browsers.
+- `sub`, `sup`:
+  - `font-size` - Correct font size discrepancies between browsers.
+  - `line-height` - Prevent elements from affecting line height.
+  - `position` - Position elements relative to parent.
+  - `vertical-align` - Align elements to the baseline.
+  - `bottom`, `top` - Correctly position elements.
+- `pre`, `code`, `kbd`:
+  - `font-family` - Use monospace fonts for code elements.
+  - `font-size` - Correct font size discrepancies between browsers.
diff --git a/snippets/articles/s/css-root-vs-html.md b/snippets/articles/s/css-root-vs-html.md
new file mode 100644
index 000000000..0272490b8
--- /dev/null
+++ b/snippets/articles/s/css-root-vs-html.md
@@ -0,0 +1,33 @@
+---
+title: What's the difference between :root and html in CSS?
+shortTitle: :root vs html
+type: story
+language: css
+tags: [layout,selector]
+author: chalarangelo
+cover: tree-roots
+excerpt: The CSS selectors used to target the root element of an HTML share some similarities, but they also have some differences.
+dateModified: 2022-05-22T05:00:00-04:00
+---
+
+CSS has two ways to target the root element of an HTML document - the `:root` pseudo-class and the `html` selector. While these are very similar to each other, they have a couple of differences you should know.
+
+### Selector specificity
+
+The `:root` selector has a higher specificity than the `html` selector. This is because `:root` is a pseudo-class selector, while `html` is a type selector.
+
+```css
+:root {
+  background-color: red;
+}
+
+html {
+  background-color: blue;
+}
+
+/* The HTML document's root element will have a red background-color.  */
+```
+
+### Targeting the root element
+
+CSS can be used to style other types of documents, apart from HTML. This is where the `:root` element comes in to play, allowing you to style the root element of a document. This can be especially important when styling SVG documents, where the `html` selector will not work.
diff --git a/snippets/articles/s/css-select-any-link.md b/snippets/articles/s/css-select-any-link.md
new file mode 100644
index 000000000..55ce10471
--- /dev/null
+++ b/snippets/articles/s/css-select-any-link.md
@@ -0,0 +1,21 @@
+---
+title: "Tip: Select any link with CSS"
+shortTitle: "CSS :any-link pseudo-class"
+type: tip
+language: css
+tags: [visual,interactivity]
+author: chalarangelo
+cover: round-leaves
+excerpt: You can use a CSS pseudo-class selector to style all links in a page, without worrying if they have been visited or not.
+dateModified: 2022-03-06T05:00:00-04:00
+---
+
+Styling links with CSS is considered straightforward, with most developers using the `:link` and `:visited` pseudo-classes. While this solution is very common, there's a less verbose alternative in the form of the [`:any-link`](https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link) pseudo-class. This pseudo-class selects all links, regardless of whether they have been visited or not. Thus, it acts as a catch-all for all links on the page.
+
+```css
+:any-link {
+  color: #0444f6;
+}
+```
+
+One important note is that using `:any-link` is different to using the `[href]` attribute selector. The `:any-link` pseudo-class does not select empty links, whereas the `[href]` attribute selector does.
diff --git a/snippets/articles/s/css-style-default-links.md b/snippets/articles/s/css-style-default-links.md
new file mode 100644
index 000000000..f7e4000dc
--- /dev/null
+++ b/snippets/articles/s/css-style-default-links.md
@@ -0,0 +1,22 @@
+---
+title: "Tip: Style links without a class"
+shortTitle: Style default links
+type: tip
+language: css
+tags: [visual,interactivity]
+author: chalarangelo
+cover: citrus-drink
+excerpt: A short summary of your story up to 180 characters long.
+dateModified: 2022-11-23T05:00:00-04:00
+---
+
+When styling injected or generated HTML content, you might not have access to the classes or IDs of the elements you want to style. This can become especially annoying when dealing with link elements. Luckily, you can use the `:not()` selector with an appropriate attribute selector to check for the absence of a class and style links accordingly.
+
+```css
+a[href]:not([class]) {
+  color: #0077ff;
+  text-decoration: underline;
+}
+```
+
+As a bonus tip, you can use [the previous tip about selecting any link](/articles/s/css-select-any-link) to further enhance this solution.
diff --git a/snippets/articles/s/css-unitless-line-height.md b/snippets/articles/s/css-unitless-line-height.md
new file mode 100644
index 000000000..10c71b2ce
--- /dev/null
+++ b/snippets/articles/s/css-unitless-line-height.md
@@ -0,0 +1,25 @@
+---
+title: Why should line-height be unitless in CSS?
+shortTitle: Unitless line height
+type: tip
+language: css
+tags: [layout,visual]
+author: chalarangelo
+cover: gold-typewriter
+excerpt: You might have heard that `line-height` should be unitless, but do you know why?
+dateModified: 2022-11-27T05:00:00-04:00
+---
+
+I've often heard that `line-height` should always be **unitless**. In my earlier coding years, I didn't question it much, but lately I've come to wonder why that is. In my mind `1.5` and `1.5em` should produce the same result, right? Turns out, they don't.
+
+There's a **subtle difference** between the two and it has to do with the fact that `line-height` is an inherited property. A unitless value will be inherited as-is, meaning the actual value will be recalculated for each element, accounting for the `font-size` of the element. However, a `line-height` with any unit will be calculated once and then inherited as a fixed value. This can cause vastly different results, especially if the declaration is in the `body` element or something similar.
+
+Speaking of the `body` element, it could be a good idea to define your base `line-height` as a unitless value there to minimize repetition:
+
+```css
+body {
+  line-height: 1.5;
+}
+```
+
+So, is `line-height` with units prohibited and should we always use unitless values? Not necessarily. Factors such as codebase conventions, design systems and personal preference play a role here. For example, maintaining an exact, perfect vertical rhythm with unitless `line-height` values can be a bit tricky. In such cases, using `line-height` with units can be a good idea, but remember to **be consistent** to avoid headaches.
diff --git a/snippets/articles/s/css-units-cheatsheet.md b/snippets/articles/s/css-units-cheatsheet.md
new file mode 100644
index 000000000..663442bac
--- /dev/null
+++ b/snippets/articles/s/css-units-cheatsheet.md
@@ -0,0 +1,25 @@
+---
+title: CSS units Cheat Sheet
+type: cheatsheet
+language: css
+tags: [layout,cheatsheet]
+author: chalarangelo
+cover: measuring
+excerpt: Learn everything you need to know about CSS units with this handy cheatsheet.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+- `px`: Absolute pixel value
+- `rem`: Relative to the `font-size` of the root element
+- `em`: Relative to the `font-size` of the element
+- `%`: Relative to the parent element
+- `vw`: Relative to the viewport's width, `1vw` = `1%` * viewport width
+- `vh`: Relative to the viewport's height, `1vh` = `1%` * viewport height
+- `vmin`: Relative to the viewport's smaller dimension, `1vmin` = min(`1vh`, `1vw`)
+- `vmax`: Relative to the viewport's larger dimension, `vmax` = max(`1vh`, `1vw`)
+- `ch`: Relative to the width of the glyph "0" of the element's font
+- `in`: Inches `1in` = `2.54cm` = `96px`
+- `pc`: Picas `1pc` = `1in` / `6` = `16px`
+- `pt`: Points `1pt` = `1in` / `72` = `1.333px` (approximately)
+- `cm`: Centimeters `1cm` = `96px` / `2.54` = `37.8px` (approximately)
+- `mm`: Millimeters `1mm` = `1cm` / `10` = `3.78px` (approximately)
diff --git a/snippets/articles/s/css-variables.md b/snippets/articles/s/css-variables.md
new file mode 100644
index 000000000..9428461d0
--- /dev/null
+++ b/snippets/articles/s/css-variables.md
@@ -0,0 +1,67 @@
+---
+title: What are CSS variables and where can I use them?
+shortTitle: CSS variables
+type: question
+language: css
+tags: [visual,layout]
+author: chalarangelo
+cover: css-variables
+excerpt: Learn how CSS custom properties (CSS variables) work and what you can use them for in your code and designs.
+dateModified: 2021-09-28T19:52:58+03:00
+---
+
+CSS variables (officially called CSS **custom properties**) behave much like variables in other programming languages. They allow you to define named variables that contain specific values that can be reused within the CSS document. As specified in the custom property notation, CSS variables are prefixed with two dashes (e.g. `--my-color: black`). To access them, you can use the `var()` function (e.g. `color: var(--my-color)`). CSS variables are exceptionally useful for **sharing styles** between different elements and components. Examples include but are not limited to vertical rhythm, typography variables and color palettes.
+
+One of their most common use-cases is **theming and dark mode**. CSS variables can be used to create a shared palette across the whole website and easily swap it for a different one. This is often accomplished by applying a class to a common ancestor (e.g. the `<body>` element). This example demonstrates global variables defined in the `:root` element and cascading, as elements inherit values from their parents:
+
+```css
+/* Global variables are defined in the :root element. */
+:root {
+  --bg-color: #fff;
+  --main-color: #000;
+  --secondary-color: #222;
+}
+/* Elements inherit variables from their parents. */
+body {
+  background-color: var(--bg-color);
+  color: var(--main-color);
+}
+small {
+  color: var(--secondary-color);
+}
+/* Elements can define their own values and variables, overriding inherited ones.*/
+body.dark {
+  --bg-color: #080808;
+  --main-color: #fff;
+  --secondary-color: #ccc;
+}
+```
+
+Another useful example is **defining shared customized styles** for certain variants of an element. This allows the customization of whole trees of components without having to repeat any styles. The following example demonstrates cascading even better than the previous one. It also introduces the idea of sharing styles between different elements:
+
+```css
+.btn {
+  --bg-color: #002299;
+  --text-color: #fff;
+  --highlight-color: #669900;
+
+  background-color: var(--bg-color);
+  color: var(--text-color);
+}
+/* --highlight-color is also available to the children of .btn */
+.btn .highlight {
+  color: var(--highlight-color);
+}
+/* .btn.danger .highlight will use the --highlight-color defined in .btn-danger */
+.btn-danger {
+  --bg-color: #dd4a68;
+  --text-color: #000;
+  --highlight-color: #990055;
+}
+```
+
+Finally, keep in mind the following useful tips for working with CSS variables:
+
+- You can define **fallback values**, by providing a second argument to the `var()` function (e.g. `var(--text-color, black)` will default to `black` if `--text-color` is not defined).
+- CSS variables are **case sensitive**, so mind your capitalization. They can also be inlined in HTML like any other style (e.g. `<div style="--text-color: red">`).
+- You can nest `var()` calls, using another variable as fallback (e.g. `var(--main-color, var(--other-color))`), pass them to other functions such as `calc()` or even assign one variable to another (e.g. `--text-color: var(--main-color)`).
diff --git a/snippets/articles/s/custom-file-download-names.md b/snippets/articles/s/custom-file-download-names.md
new file mode 100644
index 000000000..891e5b92a
--- /dev/null
+++ b/snippets/articles/s/custom-file-download-names.md
@@ -0,0 +1,18 @@
+---
+title: "Tip: Customize the names of downloadable files"
+shortTitle: Customize the names of downloadable files
+type: tip
+language: html
+tags: [webdev,browser]
+author: chalarangelo
+cover: hard-disk
+excerpt: Learn what HTML5 attribute you can use to customize the names of your downloadable files with this quick tip.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+HTML5 introduced a variety of convenient features that many of us use every day. As downloadable links aren't something I work with very often, I recently found out that you can use the `download` attribute on an `<a>` element for much more than just making it trigger a download. In fact, you can pass it a string value that will act as the name of the downloadable file, effectively allowing you to customize its name:
+
+```html
+<!-- The downloaded file will be named 'June-2020.csv' -->
+<a href="/data/2020/06/report.csv" download="June-2020.csv">June 2020</a>
+```
diff --git a/snippets/articles/s/detect-caps-lock-is-on.md b/snippets/articles/s/detect-caps-lock-is-on.md
new file mode 100644
index 000000000..c24793ee9
--- /dev/null
+++ b/snippets/articles/s/detect-caps-lock-is-on.md
@@ -0,0 +1,37 @@
+---
+title: How can I detect if Caps Lock is on with JavaScript?
+shortTitle: Detect Caps Lock
+type: question
+language: javascript
+tags: [browser,event]
+author: chalarangelo
+cover: keyboard
+excerpt: If you need to check if Caps Lock is on when the user is typing in the browser, JavaScript's got you covered.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Oftentimes, especially when creating password inputs, you need to check if the Caps Lock key is on and inform the user. You can do that using the [`KeyboardEvent.getModifierState()`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState) method with a value of `'CapsLock'`. This means that you have to listen for a keyboard event on an element in order to check the state of the Caps Lock key:
+
+```html
+<form>
+  <label for="username">Username:</label>
+  <input id="username" name="username">
+
+  <label for="password">Password:</label>
+  <input id="password" name="password" type="password">
+  <span id="password-message" style="display: none">Caps Lock is on</span>
+</form>
+```
+
+```js
+const el = document.getElementById('password');
+const msg = document.getElementById('password-message');
+
+el.addEventListener('keyup', e => {
+  msg.style = e.getModifierState('CapsLock')
+    ? 'display: block'
+    : 'display: none';
+});
+```
+
+As you can see from the above example, the `'keyup'` event is used on our element of choice to then call `KeyboardEvent.getModifierState()` and determine the state of the `'CapsLock'` key. `'keydown'` and `'keypress'` might also work. However, after testing on multiple devices, it seems that using `'keyup'` is the preferred method as it works better across different OSes and browsers.
diff --git a/snippets/articles/s/dns-record-basics.md b/snippets/articles/s/dns-record-basics.md
new file mode 100644
index 000000000..9a90407dc
--- /dev/null
+++ b/snippets/articles/s/dns-record-basics.md
@@ -0,0 +1,25 @@
+---
+title: DNS Record Basics
+type: cheatsheet
+tags: [webdev,dns,server,cheatsheet]
+author: chalarangelo
+cover: sparkles
+excerpt: DNS records may not be a thing you work too often with. Regardless, some basic knowledge can go a long way.
+dateModified: 2022-01-09T05:00:00-04:00
+---
+
+Most web developers go about their day-to-day without having to deal with DNS records most of the time. Regardless, knowing what DNS stands for and the types of DNS records are pretty useful.
+
+### DNS Definition
+
+The Domain Name System (abbreviated to DNS), translates human-readable domain names (e.g www.google.com to machine-readable IP addresses (e.g. 142.250.186.46).
+
+### DNS Records
+
+A DNS is made up of multiple records of different types, each one with its own purpose. Here's a breakdown of the most commonly-used ones:
+
+- **A record**: The address record. Used to map a domain name to an IPv4 address. Similarly, the **AAAA record** is used to map a domain name to an IPv6 address.
+- **CNAME records**: A canonical name record. Creates an alias that points to another domain or subdomain, but never an IP address.
+- **ANAME record**: Allows you to point the root of your domain to a hostname or a domain name.
+- **TXT records**: Allow the addition of limited text notes and is often used for ownership verification purposes, validation or security.
+- **MX record**: Specifies the mail server responsible for accepting the incoming and outgoing emails for a domain. Should point to a mail server name, not an IP address.
diff --git a/snippets/articles/s/escaping-tutorial-hell.md b/snippets/articles/s/escaping-tutorial-hell.md
new file mode 100644
index 000000000..02743e50a
--- /dev/null
+++ b/snippets/articles/s/escaping-tutorial-hell.md
@@ -0,0 +1,39 @@
+---
+title: Escaping tutorial hell
+type: story
+tags: [webdev,career,programming,jobs]
+author: chalarangelo
+cover: campfire
+excerpt: Many beginners get stuck in tutorial hell without even realizing. Here are 4 simple ways to escape tutorial hell and get back to learning.
+dateModified: 2022-05-26T05:00:00-04:00
+---
+
+Tutorial hell refers to the stage in your learning journey, where you are following along with tutorials, not truly learning that much. Tutorials are by nature a curated experience. While that's not definitively bad, it's **not always the best way** to explore the landscape and familiarize with concepts and tools. Neither is it the best way to learn how to think for yourself. So how can you escape it?
+
+### Debug
+
+The most common exit ramp comes up when you end up in debugging mode. Oftentimes a tutorial can be outdated or something in the setup can be just a tiny bit different. At this point, you have to figure out how to solve the issue to proceed.
+
+Entering debugging mode, you realize that **you know only a part of the big picture**. What you don't know might not be immediately obvious, but with perseverance you will be able to figure it out. At that point, you can start looking for answers to solve the issue.
+
+Debugging a problem offers a little bit of **exposure to the underlying technologies and concepts**. This way you can dip your toe into whatever it is you are working with, without getting overwhelmed.
+
+### Be curious
+
+Curiosity killed the cat, but not you. Stop every step of the way to ask what it is you are learning. Do you understand the concepts? Do you know what it is you are building? Is this tool your only option? What problem does it solve? Are there others?
+
+Questions are a valuable tool to help you explore the landscape. You don't necessarily need to answer them all, nor do you need to read tons of documentation or articles about a topic. Simply **taking a peek at the big picture** and **asking questions** is enough. You can always come back later and dive deeper.
+
+### Experiment
+
+The third and best way to escape tutorial hell is to experiment. After you finish a couple of tutorials, **put your skills to the test**. Try to build something from scratch, looking up anything you need to, as you go. It won't be as easy or as fast as the tutorial was, but you'll learn a lot more.
+
+After you build a project, **take another look**. Figure out what you could have done differently or what parts of it you don't understand well enough. Refine it, polish up parts of it, add new features. The more time you put into it, the better you will become.
+
+Then do it a few more times and experiment with a few more ideas. As soon as you start working on your own projects and get into a rhythm, it's a lot easier to learn new things. Some slopes will be steeper and others will be more gentle. But you will feel much **more confident in your skills** than blindly following tutorials.
+
+### Learn your own way
+
+As a closing suggestion, I want to urge you to **find your own learning style**. Tutorials might be right for some and I don't suggest you dismiss them entirely. After all, we all have to start somewhere. But if they don't work for you, **mix it up a bit**. Try reading the documentation, solving coding exercises or tinkering with an existing project. Everyone is different and there's no one size fits all when it comes to learning.
+
+For some, much like myself, teaching is the best learning experience. After all, if you can't explain something simply, you probably don't understand it well enough. Explaining, then, can lead you to researching, debugging, experimenting and being curious all at once. And teaching, much like learning, can be done in many many different ways.
diff --git a/snippets/articles/s/eslint-refactor-for-in.md b/snippets/articles/s/eslint-refactor-for-in.md
new file mode 100644
index 000000000..6dba7e185
--- /dev/null
+++ b/snippets/articles/s/eslint-refactor-for-in.md
@@ -0,0 +1,50 @@
+---
+title: "Tip: Refactoring your for...in loops to avoid ESLint warnings"
+shortTitle: Refactoring for...in loops to avoid ESLint warnings
+type: tip
+language: javascript
+tags: [array,iterator,eslint]
+author: chalarangelo
+cover: typing
+excerpt: ESLint is a really useful tool, but sometimes it gets in the way. Learn how to refactor code to get rid of a common warning.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+ESLint is one of my tools of choice, but oftentimes it gets in the way of work, due to the way it prefers me to do things. One of the warnings I have seen more times than I care to admit is the following:
+
+> for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array.eslint(no-restricted-syntax)
+
+And here are three refactoring options to deal with it:
+
+### Object.keys()
+
+`Object.keys()` has the exact same behavior as a `for...in` loop, so it can be used as a drop-in replacement:
+
+```js
+const data = [3, 4];
+// Same as for (let k in data) console.log(k)
+Object.keys(data).forEach(k => console.log(k));
+// 0 1
+```
+
+### Object.values()
+
+`Object.values()` is very similar to `Object.keys()`, but returns the values instead of the keys, which might be what you are really using the keys for:
+
+```js
+const data = [3, 4];
+// Iterate over the values
+Object.values(data).forEach(v => console.log(v));
+// 3 4
+```
+
+### Object.entries()
+
+Finally, if you need both key and value, `Object.entries()` has you covered:
+
+```js
+const data = [3, 4];
+// Iterate over the data, returning key-value pairs
+Object.entries(data).forEach(e => console.log(e[0], e[1]));
+// [0, 3] [1, 4]
+```
diff --git a/snippets/articles/s/flexbox-cheatsheet.md b/snippets/articles/s/flexbox-cheatsheet.md
new file mode 100644
index 000000000..2b89a43d4
--- /dev/null
+++ b/snippets/articles/s/flexbox-cheatsheet.md
@@ -0,0 +1,80 @@
+---
+title: Flexbox Cheat Sheet
+type: cheatsheet
+language: css
+tags: [layout,flexbox,cheatsheet]
+author: chalarangelo
+cover: frames
+excerpt: Flexbox allows you to create fluid layouts easily. If you are constantly looking up how it works, this handy cheatsheet is all you need.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### Container
+
+- `display: flex` or `display: inline-flex`: creates a flex context (or an inline flex context) for direct children of this element
+- `flex-direction` determines the main and cross axis for the container, valid values are:
+  - `row` (default): horizontal, in the direction of writing (left to right for English)
+  - `row-reverse`: horizontal, in the opposite direction of writing (right to left for English)
+  - `column`: vertical, top to bottom
+  - `column-reverse`: vertical, bottom to top
+- `flex-wrap` determines if flex items will try to fit in one line, valid values are:
+  - `nowrap` (default): all flex items will be on one line
+  - `wrap`: flex items will wrap onto multiple lines, top to bottom
+  - `wrap-reverse`: flex items will wrap onto multiple lines, bottom to top
+- `flex-flow`: shorthand combining `flex-direction` and `flex-wrap`
+  - Formal syntax: `flex-flow: <'flex-direction'> || <'flex-wrap'>`
+- `justify-content` defines the alignment along the main axis, valid values are:
+  - `flex-start` (default): pack flex items from the start
+  - `flex-end`: pack flex items from the end
+  - `start`: pack items from the start
+  - `end`: pack items from the end
+  - `left`: pack items from the left
+  - `right`: pack items from the right
+  - `center`: pack items around the center
+  - `space-around`: distribute items evenly with equal space around them
+  - `space-between`: distribute items evenly with equal space between them
+  - `space-evenly`: distribute items evenly, ensuring equal space between any two items
+  - `stretch`: distribute items evenly, stretching auto-sized items to fit the container
+- `align-items` defines the alignment along the cross axis, valid values are:
+  - `flex-start` (default): pack flex items from the start
+  - `flex-end`: pack flex items from the end
+  - `start`: pack items from the start
+  - `end`: pack items from the end
+  - `center`: pack items around the center
+  - `baseline`: align items based on their baselines
+  - `stretch`: stretch items to fill the container
+- `align-content` defines the alignment of extra space along the cross axis, valid values are:
+  - `flex-start` (default): pack flex items from the start
+  - `flex-end`: pack flex items from the end
+  - `start`: pack items from the start
+  - `end`: pack items from the end
+  - `center`: pack items around the center
+  - `space-around`: distribute items evenly with equal space around them
+  - `space-between`: distribute items evenly with equal space between them
+  - `space-evenly`: distribute items evenly, ensuring equal space between any two items
+  - `stretch`: distribute items evenly, stretching auto-sized items to fit the container
+
+![Diagram of Flexbox properties](./illustrations/flexbox-diagram.png)
+
+### Items
+
+- `flex-grow` determines how much the item can grow if necessary
+  - Accepts a single positive number (unitless), default value is `0`
+  - Specifies how much of the remaining space in the flex container should be assigned to the item
+  - The remaining space is the size of the flex container minus the size of all flex items' sizes together
+  - If all items have the same `flex-grow`, all items will receive an equal share of the remaining space
+  - If not all items have the same `flex-grow`, the remaining space is distributed according to the ratio defined by these values
+- `flex-shrink` determines how much the items can shrink if necessary
+  - Accepts a single positive number (unitless), default value is `1`
+  - If the size of all flex items is larger than the flex container, items shrink to fit according to `flex-shrink`
+- `flex-basis` determines the initial size of a flex item before the remaining space is distributed
+  - Can use any valid `width` value, intrinsic size values, `auto` (default) or `content`
+  - `auto` means "look at my `width` or `height` property", whereas `content` is used for automatic sizing
+- `flex`: shorthand combining `flex-grow`, `flex-shrink` and `flex-basis`
+  - Formal syntax: `flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]`
+- `align-self` allows the item to override the default `align-items` specified by the container
+  - Valid values are the same as those of the `align-items` property in the container
+- `order` determines the ordering of the item
+  - Accepts an integer value
+  - Items in a container are sorted by ascending `order` value and then by their source code order
+  - Might cause accessibility issues if used incorrectly
diff --git a/snippets/articles/s/git-aliases.md b/snippets/articles/s/git-aliases.md
new file mode 100644
index 000000000..fb88fc5ec
--- /dev/null
+++ b/snippets/articles/s/git-aliases.md
@@ -0,0 +1,52 @@
+---
+title: Git aliases
+type: cheatsheet
+language: git
+tags: [configuration,cheatsheet]
+author: chalarangelo
+cover: organizer
+excerpt: Increase your productivity by creating aliases for many common git operations.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### Creating aliases
+
+Use the command below to create aliases, replacing `<alias>` with the name of the alias and `<command>` with the command to be aliased:
+
+```shell
+git config --global alias.<alias> <command>
+```
+
+Additionally, you can use [edit the configuration file](/git/s/edit-config) and add many aliases all at once.
+
+### Useful aliases
+
+```editorconfig
+[alias]
+  co = checkout
+  cob = checkout -b
+  coo = !git fetch && git checkout
+  br = branch
+  brd = branch -d
+  st = status
+  aa = add -A .
+  unstage = reset --soft HEAD^
+  cm = commit -m
+  amend = commit --amend -m
+  fix = commit --fixup
+  undo = reset HEAD~1
+  rv = revert
+  cp = cherry-pick
+  pu = !git push origin `git branch --show-current`
+  fush = push -f
+  mg = merge --no-ff
+  rb = rebase
+  rbc = rebase --continue
+  rba = rebase --abort
+  rbs = rebase --skip
+  rom = !git fetch && git rebase -i origin/master --autosquash
+  save = stash push
+  pop = stash pop
+  apply = stash apply
+  rl = reflog
+```
diff --git a/snippets/articles/s/git-commit-different-date.md b/snippets/articles/s/git-commit-different-date.md
new file mode 100644
index 000000000..4c57b0e02
--- /dev/null
+++ b/snippets/articles/s/git-commit-different-date.md
@@ -0,0 +1,21 @@
+---
+title: "Tip: Create a commit with a different date"
+shortTitle: Create a commit with a different date
+type: tip
+language: git
+tags: [commit]
+author: chalarangelo
+cover: ice
+excerpt: Ever needed to create a git commit with a different date? Here's a quick and easy way to do it.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Sometimes, you might run into a situation where you need to create a commit with a different date than the current one. Luckily, you can handle this using `GIT_AUTHOR_DATE` and `GIT_COMMITTER_DATE`:
+
+```shell
+GIT_AUTHOR_DATE='Mon May 18 19:32:10 2020 -0400' \
+  GIT_COMMITTER_DATE='Mon May 18 19:32:10 2020 -0400'\
+  git commit -m 'Commit from the past'
+```
+
+As shown in the example above, you can set both values to any date you like and your code will be committed on that date. Note that the format for the values above is `'date +"%s %z"'`, also referred to as internal raw git format, but you can also use other formats, such as RFC 2822 (`'Mon, 18 May 2020 19:32:10 -0400'`), ISO 8601 (`'2020-05-18 19:32:10 -0400'`), local (`'Mon May 18 19:32:10 2020'`), short (`'2020-05-18'`) or relative (`5.seconds.ago`, `2.years.3.months.ago`, `'6am yesterday'`).
diff --git a/snippets/articles/s/git-fast-forward.md b/snippets/articles/s/git-fast-forward.md
new file mode 100644
index 000000000..bb51fc28a
--- /dev/null
+++ b/snippets/articles/s/git-fast-forward.md
@@ -0,0 +1,25 @@
+---
+title: How does Git's fast-forward mode work?
+shortTitle: Git fast-forward
+type: question
+language: git
+tags: [branch]
+author: chalarangelo
+cover: boats
+excerpt: Learn about Git's fast-forward mode works and its benefits when mergin branches, so you can decide if it's a good fit for you and your team.
+dateModified: 2021-07-15T05:00:00-04:00
+---
+
+Merging a branch is one of the most common operations when working with Git. Depending on your team and projects you've been a part of, you might have heard of or even used Git's **fast-forward** mode when merging. Fast-forward mode is the default in Git, however GitHub will essentially override this by default and create a merge commit instead.
+
+![Git fast forward explained](./illustrations/git-fast-forward.png)
+
+### Fast-forward merge
+
+As stated above, Git's default is to use fast-forward merge. It will take the commits from the branch being merged and place them at the tip of the branch you're merging into. This creates a **linear history**, which is also the main advantage of using fast-forward merge. If you want to emulate fast-forward merge on GitHub, you can use the "Rebase and merge" option.
+
+### Non fast-forward merge
+
+GitHub, on the other hand, uses non fast-forward merge by default. It will create a merge commit at the tip of the branch you're merging into, optionally referencing the branch being merged in the commit message. This has the advantage of **keeping track of branches** more explicitly than fast-forward merge. If you want to get the same behavior in a Git terminal, you can use the `--no-ff` flag.
+
+As a side note, you can configure the default Git merge behavior, using `git config`. To learn how to do so, you can take a look at the [relevant snippet](/git/s/disable-fast-forward).
diff --git a/snippets/articles/s/github-co-authors.md b/snippets/articles/s/github-co-authors.md
new file mode 100644
index 000000000..1d1e7aa4a
--- /dev/null
+++ b/snippets/articles/s/github-co-authors.md
@@ -0,0 +1,27 @@
+---
+title: "Tip: How to add multiple authors to a commit"
+shortTitle: Add multiple authors to a commit
+type: tip
+language: git
+tags: [github,programming,webdev]
+author: chalarangelo
+cover: book-chair
+excerpt: Learn how to add multiple authors to a git commit with this quick and easy tip.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+You can add multiple authors to a git commit, by adding one or more `Co-authored-by` trailers to the commit's message:
+
+```shellsession
+$ git commit -m "Refactor usability tests.
+>
+>
+Co-authored-by: name <name@example.com>
+Co-authored-by: another-name <another-name@example.com>"
+```
+
+### Notes:
+
+- To correctly attribute a commit to a co-author, you must use the email associated with their GitHub account.
+- If a person's email is private, you can use their GitHub-provided `no-reply` email.
+- Leave one or preferably two empty lines before any `Co-authored-by` trailers.
diff --git a/snippets/articles/s/html-head-icons.md b/snippets/articles/s/html-head-icons.md
new file mode 100644
index 000000000..b2a33b62b
--- /dev/null
+++ b/snippets/articles/s/html-head-icons.md
@@ -0,0 +1,23 @@
+---
+title: Recommended HTML head icon tags
+shortTitle: HTML favicons template
+type: story
+language: html
+tags: [webdev,browser]
+author: chalarangelo
+cover: boutique-home-office-3
+excerpt: Ensure your HTML documents have a proper favicon by including these lines in your `<head>` element.
+dateModified: 2023-01-24T05:00:00-04:00
+---
+
+Over the years, I've seen many different and often conflicting guidelines about favicons and which tags are essential. Nowadays, I think you can get away with a very **minimal set of meta tags** and tailor them to your needs as you go. Here's my recommendation for the bare minimum you should include in your `<head>` element:
+
+```html
+<head>
+  <link rel="icon" sizes="192x192" href="favicon.png">
+  <link rel="apple-touch-icon" href="favicon.png">
+  <link rel="mask-icon" href="favicon.svg" color="#000000">
+</head>
+```
+
+By creating a single 192x192 PNG asset, you can cover almost all modern devices and browsers, without too much hassle. If you want to go the extra mile, you can include a few more quite easily. Simply downscale the image and include more `rel="icon"` meta tags with different `sizes` attributes.
diff --git a/snippets/articles/s/html-head-links.md b/snippets/articles/s/html-head-links.md
new file mode 100644
index 000000000..8a4b58ab6
--- /dev/null
+++ b/snippets/articles/s/html-head-links.md
@@ -0,0 +1,27 @@
+---
+title: Recommended HTML head links
+shortTitle: HTML head links template
+type: story
+language: html
+tags: [webdev,browser]
+author: chalarangelo
+cover: boutique-home-office-4
+excerpt: Make your HTML documents more SEO-friendly by including these lines in your `<head>` element.
+dateModified: 2023-01-26T05:00:00-04:00
+---
+
+The `<head>` element of an HTML document is where you can include links to external resources such as CSS stylesheets and JavaScript files. Some `<link>` elements, however, are important for SEO and metadata purposes. Here's a list of a few really important ones I like to include:
+
+```html
+<head>
+  <link rel="canonical" href="https://samplesite.com/page.html">
+  <link rel="sitemap" type="application/xml" href="https://samplesite.com/sitemap.xml">
+  <link rel="alternate" type="application/rss+xml" title="RSS" href="https://samplesite.com/rss.xml">
+  <link rel="search" type="application/opensearchdescription+xml" title="Search" href="https://samplesite.com/search.xml">
+</head>
+```
+
+- The `canonical` link element tells search engines which URL is the **canonical version** of the page. This helps prevent duplicate content issues and ensures that the correct page is indexed.
+- The `sitemap` link element tells search engines where to find the **sitemap** for the website. Sitemaps are XML files that contain a list of all the pages on the website and their metadata. They are used by search engines to index the website and display it in search results.
+- The `alternate` link element tells search engines where to find the **RSS feed** for the website. RSS feeds are XML files that contain a list of the most recent posts on the website. They are used by search engines to display the website's content in search results, as well as by RSS readers to display the website's content in a more convenient format.
+- The `search` link element is used by browsers to display a **search box** in the browser's address bar. This allows users to search the website directly from the address bar, instead of having to navigate to the search page.
diff --git a/snippets/articles/s/html-head-social-tags.md b/snippets/articles/s/html-head-social-tags.md
new file mode 100644
index 000000000..3c9b65e9f
--- /dev/null
+++ b/snippets/articles/s/html-head-social-tags.md
@@ -0,0 +1,38 @@
+---
+title: Recommended social tags for HTML head
+shortTitle: HTML social tags template
+type: story
+language: html
+tags: [webdev,browser]
+author: chalarangelo
+cover: boutique-home-office-2
+excerpt: Ensure your HTML documents can be shared on social media by including these lines in your `<head>` element.
+dateModified: 2023-01-22T05:00:00-04:00
+---
+
+Social media play an important role to any content's success. To ensure your content is properly shared on social media, you should include some essential tags in your `<head>` element:
+
+```html
+<head>
+  <meta property="og:title" content="Page Title">
+  <meta property="og:description" content="Page description. No longer than 155 characters.">
+  <meta property="og:image" content="https://samplesite.com/image.jpg">
+  <meta property="og:site_name" content="Sample Site">
+  <meta property="og:url" content="https://samplesite.com/page.html">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Page Title">
+  <meta name="twitter:description" content="Page description. No longer than 155 characters.">
+  <meta name="twitter:image" content="https://samplesite.com/image.jpg">
+  <meta name="twitter:site" content="@samplesite">
+</head>
+```
+
+The above snippet contains OpenGraph and Twitter tags. **OpenGraph tags** are used by Facebook and other social media platforms to display a preview of the page when it's shared. Similarly, Twitter uses **Twitter tags** for the same information. Here's a breakdown of each one:
+
+- The `og:title` and `twitter:title` meta tags are used to display the page's title in the preview.
+- The `og:description` and `twitter:description` meta tags are used to display a short description of the page in the preview.
+- The `og:image` and `twitter:image` meta tags are used to display an image in the preview.
+- The `og:site_name` meta tag is used to display the name of the site in the preview.
+- The `og:url` meta tag is used to display the URL of the page in the preview.
+- The `twitter:card` meta tag is used to display a preview of the page when it's shared. Available values are `summary`, `summary_large_image`, `app` and `player`.
+- The `twitter:site` meta tag is used to display the Twitter handle of the site in the preview.
diff --git a/snippets/articles/s/html-recommended-minimum-head.md b/snippets/articles/s/html-recommended-minimum-head.md
new file mode 100644
index 000000000..1adf87622
--- /dev/null
+++ b/snippets/articles/s/html-recommended-minimum-head.md
@@ -0,0 +1,29 @@
+---
+title: Recommended minimum HTML head
+shortTitle: HTML head template
+type: story
+language: html
+tags: [webdev,browser]
+author: chalarangelo
+cover: boutique-home-office-1
+excerpt: Ensure your HTML documents are properly structured by including these lines in your `<head>` element.
+dateModified: 2023-01-18T05:00:00-04:00
+---
+
+An essential part of an HTML document is the `<head>` element, which contains metadata about the document. Some vital information, such as the document's title and character encoding are stored in the `<head>` element. It's also where you can include links to external resources such as CSS stylesheets and JavaScript files.
+
+More often than not, this sort of metadata can grow in complexity with time. However, there are a few important things that should never be omitted. Here's a list of the bare minimum you should include in your `<head>` element:
+
+```html
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Page Title</title>
+  <meta name="description" content="Page description. No longer than 155 characters.">
+</head>
+```
+
+- The `charset` meta tag tells the browser what **character encoding** to use when rendering the document.
+- The `viewport` meta tag tells the browser how to render the page on **mobile devices**.
+- The `title` element is used by search engines to display the page's **title** in search results.
+- The `description` meta tag is used by search engines to display a **short description** of the page in search results.
diff --git a/snippets/articles/s/http-status-codes-cheatsheet.md b/snippets/articles/s/http-status-codes-cheatsheet.md
new file mode 100644
index 000000000..e7bdd3120
--- /dev/null
+++ b/snippets/articles/s/http-status-codes-cheatsheet.md
@@ -0,0 +1,40 @@
+---
+title: Common HTTP status codes Cheat Sheet
+shortTitle: HTTP status codes
+type: cheatsheet
+tags: [webdev,http]
+author: chalarangelo
+cover: lake-runner
+excerpt: Familiarize yourself with the most common HTTP status codes with this handy cheatsheet.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### 1xx - Informational
+
+- **100**: Continue - Everything is ok so far
+- **102**: Processing - Request is being processed, no response available yet
+
+### 2xx - Success
+
+- **200**: OK - Request successful
+- **201**: Created - Request fulfilled, new resource has been created
+
+### 3xx - Redirection
+
+- **301**: Moved Permanently - Resource permanently moved to a new URL
+- **302**: Moved Temporarily - Resource temporarily moved to a new URL
+
+### 4xx - Client Error
+
+- **400**: Bad Request - Server cannot understand and process the request
+- **401**: Unauthorized - Authentication required, user not yet authenticated
+- **403**: Forbidden - Insufficient access permissions to the resource
+- **404**: Not Found - Requested resource not found
+- **410**: Gone - Request no longer available due to intentional removal
+
+### 5xx - Server Error
+
+- **500**: Internal Server Error - Generic unhandled server error
+- **502**: Bad Gateway - Gateway server got an invalid response
+- **503**: Service Unavailable - Server temporarily unable to handle request
+- **504**: Gateway Timeout - Gateway server didn't get a response in time
diff --git a/snippets/articles/s/javascript-add-key-value-pair-to-object.md b/snippets/articles/s/javascript-add-key-value-pair-to-object.md
new file mode 100644
index 000000000..0acf28bc1
--- /dev/null
+++ b/snippets/articles/s/javascript-add-key-value-pair-to-object.md
@@ -0,0 +1,78 @@
+---
+title: How can I add a key-value pair to a JavaScript object?
+shortTitle: Add key-value pair to object
+type: question
+language: javascript
+tags: [object]
+author: chalarangelo
+cover: pineapple-laptop
+excerpt: Adding a key-value pair to a JavaScript object is straightforward, yet there are multiple ways available to do so.
+dateModified: 2022-07-21T05:00:00-04:00
+---
+
+Adding a key-value pair to a JavaScript object is straightforward, yet there are multiple ways available to do so. While mostly similar, these approaches have some differences that you should be aware of.
+
+### Dot notation
+
+The most common and straightforward way to add a key-value pair to an object is to use the dot notation. You have probably already used this in the past, and it's sufficient in most situations you will encounter.
+
+```js
+const obj = { a: 1 };
+obj.b = 2;
+obj.c = 3;
+// obj = { a: 1, b: 2, c: 3 }
+```
+
+### Square bracket notation
+
+Similar to dot notation, square bracket notation comes in handy when dealing with **dynamic keys**, but can also work with static keys. Apart from that, it's exactly the same as dot notation both in functionality and performance.
+
+```js
+const obj = { a: 1 };
+const bKey = 'b';
+obj[bKey] = 2;
+obj['c'] = 3;
+// obj = { a: 1, b: 2, c: 3 }
+```
+
+### Object.assign()
+
+`Object.assign()` is slightly different than the previous two options. It can be used to add multiple properties to an object at once and it can also **shallow merge** two or more objects. It is not as performant, however, so it should only be used when necessary.
+
+```js
+const obj = { a: 1 };
+Object.assign(obj, { b: 2 }, { c: 3 });
+// obj = { a: 1, b: 2, c: 3 }
+```
+
+### Object.defineProperty()
+
+Another, less-common, way to add a key-value pair to an object is to use `Object.defineProperty()`. This is the lest performant way to add a key-value pair to an object, but it allows the new property to be **precisely defined**. This function accepts either a data or accessor descriptor as its second argument, allowing the behavior of the new property to be customized as desired. Bear in mind that you can add multiple properties at once, using `Object.defineProperties()`.
+
+```js
+const obj = { a: 1 };
+Object.defineProperty(obj, 'b', {
+  value: 2,
+  enumerable: true,
+  configurable: true,
+  writable: true
+});
+Object.defineProperty(obj, 'c', {
+  value: 3,
+  enumerable: true,
+  configurable: true,
+  writable: true
+});
+// obj = { a: 1, b: 2, c: 3 }
+```
+
+### Object spread operator
+
+Last but not least, there's the object spread operator (`...`). Contrary to previous methods, this one **doesn't mutate the original object**, but instead returns a new object with the added properties. As expected, the performance of this approach is significantly worse than previous ones, due to the need to create a new object.
+
+```js
+const obj = { a: 1 };
+const newObj = { ...obj, b: 2, c: 3 };
+// obj = { a: 1 }
+// newObj = { a: 1, b: 2, c: 3 }
+```
diff --git a/snippets/articles/s/javascript-array-comparison.md b/snippets/articles/s/javascript-array-comparison.md
new file mode 100644
index 000000000..a74d35345
--- /dev/null
+++ b/snippets/articles/s/javascript-array-comparison.md
@@ -0,0 +1,89 @@
+---
+title: How do I compare two arrays in JavaScript?
+shortTitle: JavaScript array comparison
+type: question
+language: javascript
+tags: [array,comparison]
+author: chalarangelo
+cover: coconuts
+excerpt: Learn how you can compare two arrays in JavaScript using various different techniques.
+dateModified: 2021-09-27T16:36:32+03:00
+---
+
+### Equality comparison
+
+Comparing two arrays in JavaScript using either the loose or strict equality operators (`==` or `===`) will most often result in `false`, even if the two arrays contain the same elements in the same order. This is due to the fact that arrays and objects are compared by reference and not by value in JavaScript, which means this solution does not produce the desired result:
+
+```js
+const a = [1, 2, 3];
+const b = [1, 2, 3];
+
+a === b; // false
+```
+
+### JSON.stringify
+
+A common solution that many people suggest is to use `JSON.stringify()`. This allows us to serialize each array and then compare the two serialized strings. A simple implementation of this might look something like this:
+
+```js
+const equals = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+
+const a = [1, 2, 3];
+const b = [1, 2, 3];
+
+equals(a, b); // true
+```
+
+While this seems like a great, short and easily understandable solution, it falls short on some edge cases where different values' serialized string is the same. For example:
+
+```js
+const str = 'a';
+const strObj = new String('a');
+str === strObj; // false
+equals([str], [strObj]); // true, should be false
+
+null === undefined; // false
+equals([null], [undefined]); // true, should be false
+```
+
+While these cases seem rather uncommon, they might cause some very annoying issues that are hard to track down and fix. This is the reason why this solution is not recommended for most use-cases.
+
+### A better way
+
+A better approach would be to compare the two arrays' `length`s and use `Array.prototype.every()` to compare the values of the two:
+
+```js
+const equals = (a, b) =>
+  a.length === b.length &&
+  a.every((v, i) => v === b[i]);
+
+const a = [1, 2, 3];
+const b = [1, 2, 3];
+const str = 'a';
+const strObj = new String('a');
+
+equals(a, b); // true
+equals([str], [strObj]); // false
+equals([null], [undefined]); // false
+```
+
+This approach safeguards against the serialization issue described above. However it does not take into account nested arrays or objects, which need to be checked recursively. For a robust solution that handles this and other issues, you should use the [equals snippet](/js/s/equals).
+
+### Comparing out of order
+
+Finally, there are cases where the order of the elements in each array is not important and we only care about the same values existing in both arrays. For these cases, you can use `Set` and `Array.prototype.filter()` in combination with a loop to iterate over unique values and check if each one appears the same amount of times in each array:
+
+```js
+const equalsIgnoreOrder = (a, b) => {
+  if (a.length !== b.length) return false;
+  const uniqueValues = new Set([...a, ...b]);
+  for (const v of uniqueValues) {
+    const aCount = a.filter(e => e === v).length;
+    const bCount = b.filter(e => e === v).length;
+    if (aCount !== bCount) return false;
+  }
+  return true;
+}
+```
+
+For a more detailed explanation, you should check out the [haveSameContents snippet](/js/s/have-same-contents).
diff --git a/snippets/articles/s/javascript-array-includes-value.md b/snippets/articles/s/javascript-array-includes-value.md
new file mode 100644
index 000000000..7ceb55ac4
--- /dev/null
+++ b/snippets/articles/s/javascript-array-includes-value.md
@@ -0,0 +1,38 @@
+---
+title: How can I check if a JavaScript array includes a specific value?
+shortTitle: JavaScript array includes value
+type: question
+language: javascript
+tags: [array]
+author: chalarangelo
+cover: bridge-drop
+excerpt: Checking if an array includes a specific value is pretty straightforward, except when it comes to objects.
+dateModified: 2022-09-18T05:00:00-04:00
+---
+
+### Primitive values
+
+You can use `Array.prototype.includes()` to check if an array contains a primitive value. This is the most convenient option when working with strings, numbers, booleans, symbols, `null` or `undefined`. You can even specify an index as a secondary parameter to start searching from.
+
+```js
+const array = [1, 2, 3, 4, 5];
+
+array.includes(3); // true
+array.includes(6); // false
+array.includes(3, 3); // false
+```
+
+### Objects
+
+Unlike primitive values, you can't use `Array.prototype.includes()` to check if an array includes an object. This comes down to how JavaScript compares values and the fact that [objects are reference types](/articles/s/javascript-pass-by-reference-or-pass-by-value). I highly recommend reading the previous article about [object comparison](/articles/s/javascript-object-comparison), as I won't be going into detail on how to compare objects here.
+
+Due to this difference between primitive values and objects, you can't use `Array.prototype.includes()` to check if an array includes an object. However, provided you implement a [deep equality function](/js/s/equals), you can use `Array.prototype.some()` to check if any object matches the shape of another object.
+
+```js
+const array = [{ a: 1 }, { a: 2 }, { a: 3 }];
+
+const equals = (a, b) => Object.keys(a).every(key => a[key] === b[key]);
+
+array.some(item => equals(item, { a: 2 })); // true
+array.some(item => equals(item, { a: 4 })); // false
+```
diff --git a/snippets/articles/s/javascript-arrow-function-event-listeners.md b/snippets/articles/s/javascript-arrow-function-event-listeners.md
new file mode 100644
index 000000000..379799b78
--- /dev/null
+++ b/snippets/articles/s/javascript-arrow-function-event-listeners.md
@@ -0,0 +1,59 @@
+---
+title: Can I use an arrow function as the callback for an event listener in JavaScript?
+shortTitle: Arrow function as callback for event listener
+type: question
+language: javascript
+tags: [browser,event,function]
+author: chalarangelo
+cover: coffee-float
+excerpt: Learn the differences between JavaScript ES6 arrow functions and regular functions and how they affect event listener callbacks.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### Arrow functions
+
+JavaScript ES6 introduced the concept of arrow functions, a new way to define and write functions. While they might seem like a syntactic sugar on top of regular functions, they have a key difference which lies in the way the `this` context is bound. I strongly suggest you read [Understanding the "this" keyword in JavaScript](/blog/s/javascript-this), as I will not go into detail about the topic in this article. To summarize:
+
+> Arrow functions do not have their own bindings for `this`, resulting in `this` retaining the value of the enclosing lexical context's `this`.
+
+### Event listener callbacks
+
+A common task when writing browser-side JavaScript is creating event listeners. For example:
+
+```js
+const toggleElements = document.querySelectorAll('.toggle');
+toggleElements.forEach(el => {
+  el.addEventListener('click', function() {
+    this.classList.toggle('active');
+  });
+});
+```
+
+In the example above, we use `NodeList.prototype.forEach()` to iterate over matching nodes and `EventTarget.addEventListener()` with a regular function as the callback for the `'click'` event to swap between an active and inactive state for the clicked element. We are using a regular function, so the `this` context inside the callback will be bound to the event target.
+
+### Arrow functions as callbacks
+
+As we have already explained, arrow functions do not have their own bindings for `this`. So what happens if we convert the previous code snippet's callback to an arrow function? Its `this` context refers to the global one, which in this case is the `Window` object.
+
+```js
+const toggleElements = document.querySelectorAll('.toggle');
+toggleElements.forEach(el => {
+  el.addEventListener('click', () => {
+    this.classList.toggle('active'); // `this` refers to `Window`
+    // Error: Cannot read property 'toggle' of undefined
+  });
+});
+```
+
+This code will fire the event listener and execute the callback anytime the matching element is clicked. It will, however, throw an error, due to the `Window` object not having a `classList` property. Oftentimes, the code could even fail silently. An example would be a condition that always evaluates to `false` for `Window`, but could evaluate to `true` for a given element. Issues like that result in many headaches and wasted hours until you can uncover and fix them.
+
+To deal with this, one could simply use the first argument of the callback function and `Event.target` or `Event.currentTarget` depending on their needs:
+
+```js
+const toggleElements = document.querySelectorAll('.toggle');
+toggleElements.forEach(el => {
+  el.addEventListener('click', (e) => {
+    e.currentTarget.classList.toggle('active'); // works correctly
+  });
+});
+```
diff --git a/snippets/articles/s/javascript-arrow-functions.md b/snippets/articles/s/javascript-arrow-functions.md
new file mode 100644
index 000000000..981c8adc7
--- /dev/null
+++ b/snippets/articles/s/javascript-arrow-functions.md
@@ -0,0 +1,109 @@
+---
+title: Introduction to arrow functions in JavaScript
+shortTitle: Arrow functions introduction
+type: story
+language: javascript
+tags: [function]
+author: chalarangelo
+cover: arrow-functions
+excerpt: JavaScript arrow functions are a very useful tool to learn and master. Here's a complete introduction to everything you need to know.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### Syntax
+
+In order to understand arrow function syntax, we should start by refactoring a regular function step by step:
+
+```js
+function square(a) {
+  return a * a;
+}
+```
+
+We can start by refactoring the function declaration to use a variable assignment:
+
+```js
+const square = function (a) {
+  return a * a;
+}
+```
+
+Then, we can refactor the regular `function` to an arrow function:
+
+```js
+const square = (a) => {
+  return a * a;
+}
+```
+
+If there's only one argument, we can omit the parentheses around it:
+
+```js
+const square = a => {
+  return a * a;
+}
+```
+
+If the function is a single expression, you can omit the curly braces and `return` statement and use an implicit return:
+
+```js
+const square = a => a * a;
+```
+
+### Execution context
+
+The main difference between arrow functions and regular functions is execution context (i.e. the value of `this`). Technically speaking, most other differences often mentioned either stem from this one or are side effects of it.
+
+In a regular function, `this` is dynamic and depends on how the function was invoked:
+
+```js
+function simple() { return this; }
+const object = {
+  method() { return this; }
+};
+class Class {
+  classMethod() { console.log(this); }
+}
+const instance = new Class();
+
+simple();                   // `this` refers to the global object
+new simple();               // `this` refers to the newly created instance
+
+object.method();            // `this` refers to `object`
+simple.call(object);        // `this` refers to `object`
+
+instance.classMethod();     // `this` refers to `instance`
+setTimeout(
+  instance.classMethod, 0   // `this` refers to the global object
+);
+```
+
+Arrow functions, unlike regular ones, don't define their own execution context therefore `this` inside an arrow function always refers to the lexical `this` (i.e. the scope in which the arrow function was defined).
+
+```js
+const simple = () => this;
+const object = {
+  method: () => this
+};
+class Class {
+  classMethod = () => { console.log(this); }
+}
+const instance = new Class();
+
+simple();                   // `this` refers to the global object
+new simple();               // Uncaught TypeError: simple is not a constructor
+
+object.method();            // `this` refers to the global object
+simple.call(object);        // `this` refers to the global object
+
+instance.classMethod();     // `this` refers to `instance`
+setTimeout(
+  instance.classMethod, 0   // `this` refers to `instance`
+);
+```
+
+As you can see from these examples, there's a difference in how constructors work due to the execution context and how it's resolved. Regular functions can be used as constructors in contrast to arrow functions which will throw a `TypeError` instead.
+
+Moreover, arrow functions and regular functions present some differences when used to define class methods. A regular function method will end up with a different execution context when passed as a callback. This can be handled using `Function.prototype.bind()` or by using an arrow function which doesn't have this issue.
+
+If you want to read more about the `this` keyword, you should check out our [previous article on the subject](/blog/s/javascript-this).
diff --git a/snippets/articles/s/javascript-arrow-regular-function-differences.md b/snippets/articles/s/javascript-arrow-regular-function-differences.md
new file mode 100644
index 000000000..afd0d85b4
--- /dev/null
+++ b/snippets/articles/s/javascript-arrow-regular-function-differences.md
@@ -0,0 +1,125 @@
+---
+title: What are the differences between arrow functions and regular functions in JavaScript?
+shortTitle: Arrow functions vs regular functions
+type: question
+language: javascript
+tags: [function]
+author: chalarangelo
+cover: fallen-leaves
+excerpt: JavaScript's arrow functions are seemingly the same as regular functions, but there are some important differences you need to know.
+dateModified: 2021-10-17T05:00:00-04:00
+---
+
+JavaScript's arrow functions might seem the same as regular functions on the surface, but they have some very important differences:
+
+- Syntactical differences
+- `this` value (execution context)
+- Usage as methods
+- Usage as constructors
+- `arguments` binding
+
+### Syntax
+
+The first and most obvious difference between arrow functions and regular functions is their syntax. Not only do they look different, but arrow functions also provide an implicit return shorthand and allow parenthesis around a single argument to be omitted.
+
+```js
+const square = a => a * a;
+
+// Equivalent regular function
+function square(a) {
+  return a * a;
+}
+```
+
+### Execution context
+
+Inside a regular function, execution context (i.e. the value of `this`) is dynamic. This means that the value of `this` depends on how the function was invoked (simple invocation, method invocation, indirect invocation or constructor invocation). On the other hand, an arrow function does not define its own execution context. This results in an arrow function's `this` being resolved lexically (i.e. the scope in which the arrow function was defined).
+
+```js
+function logThis() {
+  console.log(this);
+}
+document.addEventListener('click', logThis);
+// `this` refers to the document
+
+const logThisArrow = () => {
+  console.log(this);
+};
+document.addEventListener('click', logThisArrow);
+// `this` refers to the global object
+```
+
+`Function.prototype.call()`, `Function.prototype.bind()` and `Function.prototype.apply()` do not work correctly with arrow functions either. Their purpose is to allow methods to execute within different scopes, but the `this` value of an arrow function cannot be changed, as it's resolved lexically.
+
+```js
+function logThis() {
+  console.log(this);
+}
+logThis.call(42);       // Logs: 42
+
+const logThisArrow = () => {
+  console.log(this);
+};
+logThisArrow.call(42);  // Logs the global object
+```
+
+### Methods
+
+Due to arrow functions not defining their own execution context, they're not well-suited for usage as methods. However, thanks to the [Class fields proposal](https://github.com/tc39/proposal-class-fields), arrow functions can be used as methods inside classes, if your environment supports it.
+
+```js
+const obj = {
+  x: 42,
+  logThisX: function() {
+    console.log(this.x, this);
+  },
+  logThisXArrow: () => {
+    console.log(this.x, this);
+  }
+};
+
+obj.logThisX();       // Logs: 42, Object {...}
+obj.logThisXArrow();  // Logs: undefined, the global object
+```
+
+### Constructors
+
+Regular functions can be used as constructors, using the `new` keyword. Yet another consequence of the lexical resolution of `this` inside arrow functions is that they cannot be used as constructors. Using `new` with an arrow function results in a `TypeError`.
+
+```js
+function Foo(bar) {
+  this.bar = bar;
+}
+const a = new Foo(42);  // Foo {bar: 42}
+
+const Bar = foo => {
+  this.foo = foo;
+};
+const b = new Bar(42);  // TypeError: Bar is not a constructor
+```
+
+### Arguments
+
+Another difference is the binding of the `arguments` object. Unlike regular functions, arrow functions don't have their own `arguments` object. A modern alternative that circumvents this limitation is the usage of rest parameters.
+
+```js
+function sum() {
+  return arguments[0] + arguments[1];
+};
+sum(4, 6);        // 10
+
+const arguments = [1, 2, 3];
+const sumArrow = () => {
+  return arguments[0] + arguments[1];
+};
+sumArrow(4, 6);   // 3 (resolves to 1 + 2)
+
+const sumRest = (...arguments) => {
+  return arguments[0] + arguments[1];
+}
+sumRest(4, 6);    // 10
+```
+
+### Other differences
+
+Finally, there are a couple of other differences that are not as important, but worth mentioning. These include the lack of a `prototype` property in arrow functions, as well as the fact that the `yield` keyword may not be used in an arrow function's body. A consequence of the latter is that arrow functions cannot be used as generators.
diff --git a/snippets/articles/s/javascript-async-array-loops.md b/snippets/articles/s/javascript-async-array-loops.md
new file mode 100644
index 000000000..e66838ef6
--- /dev/null
+++ b/snippets/articles/s/javascript-async-array-loops.md
@@ -0,0 +1,94 @@
+---
+title: Asynchronous array loops in JavaScript
+shortTitle: Asynchronous array loops
+type: story
+language: javascript
+tags: [array,function,promise]
+author: chalarangelo
+cover: sunflowers
+excerpt: Asynchronously looping over arrays in JavaScript comes with a few caveats you should watch out for.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Asynchronous operations seem to trip up a lot of developers. This is especially true when combined with looping over arrays, as there are some caveats that come with each option available.
+
+### For loops
+
+Combining `async` with a `for` (or a `for...of`) loop is possibly the most straightforward option when performing asynchronous operations over array elements. Using `await` inside a `for` loop will cause the code to stop and wait for the asynchronous operation to complete before continuing. This means that all promises will be run sequentially.
+
+```js
+const asyncUppercase = item =>
+  new Promise(resolve =>
+    setTimeout(
+      () => resolve(item.toUpperCase()),
+      Math.floor(Math.random() * 1000)
+    )
+  );
+
+const uppercaseItems = async () => {
+  const items = ['a', 'b', 'c'];
+  for (item of items) {
+    const uppercaseItem = await asyncUppercase(item);
+    console.log(uppercaseItem);
+  }
+
+  console.log('Items processed');
+};
+
+uppercaseItems();
+// LOGS: 'A', 'B', 'C', 'Items processed'
+```
+
+### Promises
+
+`Promise.all()` provides another option for asynchronous loops over arrays. The main difference with the previous one is that `Promise.all()` executes all asynchronous operations in parallel. This means that promises will execute out of order, which might be an issue in some cases. Most often than not, this is my preferred solution as it's quite uncommon to want promises to execute sequentially.
+
+```js
+const asyncUppercase = item =>
+  new Promise(resolve =>
+    setTimeout(
+      () => resolve(item.toUpperCase()),
+      Math.floor(Math.random() * 1000)
+    )
+  );
+
+const uppercaseItems = () => {
+  const items = ['a', 'b', 'c'];
+  return Promise.all(
+    items.map(async item => {
+      const uppercaseItem = await asyncUppercase(item);
+      console.log(uppercaseItem);
+    })
+  ).then(() => {
+    console.log('Items processed');
+  });
+};
+// LOGS: 'A', 'C', 'B', 'Items processed'
+```
+
+### Array methods
+
+Unfortunately, array methods such as `Array.prototype.forEach()` do not work well with `async`/`await`. The only viable solution is to use `Promise.all()` as shown in the previous example. Using an `async` callback with `Array.prototype.forEach()` will result in the rest of the code executing and the asynchronous operations not being awaited for.
+
+```js
+const asyncUppercase = item =>
+  new Promise(resolve =>
+    setTimeout(
+      () => resolve(item.toUpperCase()),
+      Math.floor(Math.random() * 1000)
+    )
+  );
+
+const uppercaseItems = async () => {
+  const items = ['a', 'b', 'c'];
+  await items.forEach(async item => {
+    const uppercaseItem = await asyncUppercase(item);
+    console.log(uppercaseItem);
+  });
+
+  console.log('Items processed');
+};
+
+uppercaseItems();
+// LOGS: ''Items processed', 'B', 'A', 'C'
+```
diff --git a/snippets/articles/s/javascript-await-timeout.md b/snippets/articles/s/javascript-await-timeout.md
new file mode 100644
index 000000000..3965ad77c
--- /dev/null
+++ b/snippets/articles/s/javascript-await-timeout.md
@@ -0,0 +1,107 @@
+---
+title: How can I add a timeout to a promise in JavaScript?
+shortTitle: Promise timeout
+type: question
+language: javascript
+tags: [promise,timeout,class]
+author: chalarangelo
+cover: walking
+excerpt: Oftentimes you might need to add a timeout to a promise in JavaScript. Learn how to do this and more in this short guide.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Many times in the past I've found myself needing to add a timeout to a promise in JavaScript. `setTimeout()` is not exactly a perfect tool for the job, but it's easy enough to wrap it into a promise:
+
+```js
+const awaitTimeout = delay =>
+  new Promise(resolve => setTimeout(resolve, delay));
+
+awaitTimeout(300).then(() => console.log('Hi'));
+// Logs 'Hi' after 300ms
+
+const f = async () => {
+  await awaitTimeout(300);
+  console.log('Hi');  // Logs 'Hi' after 300ms
+};
+```
+
+There's nothing particularly complicated about this code sample, really. All it does is use the `Promise` constructor to wrap `setTimeout()` and resolve the promise after `delay` ms. This can be a useful tool when some code has to stall for a given amount of time.
+
+In order to add a timeout to another promise, however, there are two additional needs this utility has to satisfy. The first one is allowing the timeout promise to reject instead of resolving when provided a reason as a second argument. The other one is to create a wrapper function which will add the timeout to the promise:
+
+```js
+const awaitTimeout = (delay, reason) =>
+  new Promise((resolve, reject) =>
+    setTimeout(
+      () => (reason === undefined ? resolve() : reject(reason)),
+      delay
+    )
+  );
+
+const wrapPromise = (promise, delay, reason) =>
+  Promise.race([promise, awaitTimeout(delay, reason)]);
+
+wrapPromise(fetch('https://cool.api.io/data.json'), 3000, {
+  reason: 'Fetch timeout',
+})
+  .then(data => {
+    console.log(data.message);
+  })
+  .catch(data => console.log(`Failed with reason: ${data.reason}`));
+// Will either log the `message` if `fetch` completes in under 3000ms
+// or log an error message with the reason 'Fetch timeout' otherwise
+```
+
+As you can see in this example, `reason` is used to determine if the timeout promise will resolve or reject. `awaitTimeout()` is then used to create a new promise and passed to `Promise.race()` along with the other promise to create a timeout.
+
+This implementation definitely works, but we can take it a couple steps further. An obvious improvement is the addition of a way to clear a timeout, which requires storing the ids of any active timeouts. This, along with the need to make this utility self-contained both make a great case for using a `class`:
+
+```js
+class Timeout {
+  constructor() {
+    this.ids = [];
+  }
+
+  set = (delay, reason) =>
+    new Promise((resolve, reject) => {
+      const id = setTimeout(() => {
+        if (reason === undefined) resolve();
+        else reject(reason);
+        this.clear(id);
+      }, delay);
+      this.ids.push(id);
+    });
+
+  wrap = (promise, delay, reason) =>
+    Promise.race([promise, this.set(delay, reason)]);
+
+  clear = (...ids) => {
+    this.ids = this.ids.filter(id => {
+      if (ids.includes(id)) {
+        clearTimeout(id);
+        return false;
+      }
+      return true;
+    });
+  };
+}
+
+const myFunc = async () => {
+  const timeout = new Timeout();
+  const timeout2 = new Timeout();
+  timeout.set(6000).then(() => console.log('Hello'));
+  timeout2.set(4000).then(() => console.log('Hi'));
+  timeout
+    .wrap(fetch('https://cool.api.io/data.json'), 3000, {
+      reason: 'Fetch timeout',
+    })
+    .then(data => {
+      console.log(data.message);
+    })
+    .catch(data => console.log(`Failed with reason: ${data.reason}`))
+    .finally(() => timeout.clear(...timeout.ids));
+};
+// Will either log the `message` or log a 'Fetch timeout' error after 3000ms
+// The 6000ms timeout will be cleared before firing, so 'Hello' won't be logged
+// The 4000ms timeout will not be cleared, so 'Hi' will be logged
+```
diff --git a/snippets/articles/s/javascript-blank-value.md b/snippets/articles/s/javascript-blank-value.md
new file mode 100644
index 000000000..164b23e12
--- /dev/null
+++ b/snippets/articles/s/javascript-blank-value.md
@@ -0,0 +1,98 @@
+---
+title: How can I check for a blank value in JavaScript?
+shortTitle: Value is blank
+type: question
+language: javascript
+tags: [type]
+author: chalarangelo
+cover: workspace-with-speaker
+excerpt: JavaScript doesn't have a built-in way to check if a value is blank, but it's easy to create one.
+dateModified: 2022-09-25T05:00:00-04:00
+---
+
+JavaScript doesn't have a built-in way to check if a value is blank, but it's easy to create one. Before we do, however, we should define the behavior of such a method. The inspiration for this comes from Rails' `blank?` method, but modified to fit JavaScript's needs.
+
+First of all, any falsy values should be considered blank. These include `null`, `undefined`, `0`, `false`, `''`, and `NaN`.
+
+```js
+const isFalsy = value => !value;
+
+isFalsy(null); // true
+isFalsy(undefined); // true
+isFalsy(0); // true
+isFalsy(false); // true
+isFalsy(''); // true
+isFalsy(NaN); // true
+```
+
+Secondly, empty arrays and objects should also be considered blank. This can be easily checked by using `Object.keys()` for both types of values.
+
+```js
+const isEmptyCollection = value =>
+  (Array.isArray(value) || value === Object(value)) &&
+  !Object.keys(value).length;
+
+isEmptyCollection([]); // true
+isEmptyCollection({}); // true
+```
+
+In addition to the empty string (`''`), whitespace-only strings should be considered blank, too. A regular expression can be used to check for this.
+
+```js
+const isWhitespaceString = value =>
+  typeof value === 'string' && /^\s*$/.test(value);
+
+isWhitespaceString(' '); // true
+isWhitespaceString('\t\n\r'); // true
+```
+
+Finally, we can check for some commonly-used built-in objects. Invalid `Date` instances, as well as empty `Set` and `Map` instances should all be considered blank.
+
+```js
+const isInvalidDate = value =>
+  value instanceof Date && Number.isNaN(value.getTime());
+const isEmptySet = value => value instanceof Set && value.size === 0;
+const isEmptyMap = value => value instanceof Map && value.size === 0;
+
+isInvalidDate(new Date('hello')); // true
+isEmptySet(new Set()); // true
+isEmptyMap(new Map()); // true
+```
+
+Putting everything together, we can finally set up our `isBlank` method.
+
+```js
+const isFalsy = value => !value;
+const isWhitespaceString = value =>
+  typeof value === 'string' && /^\s*$/.test(value);
+const isEmptyCollection = value =>
+  (Array.isArray(value) || value === Object(value)) &&
+  !Object.keys(value).length;
+const isInvalidDate = value =>
+  value instanceof Date && Number.isNaN(value.getTime());
+const isEmptySet = value => value instanceof Set && value.size === 0;
+const isEmptyMap = value => value instanceof Map && value.size === 0;
+
+const isBlank = value => {
+  if (isFalsy(value)) return true;
+  if (isWhitespaceString(value)) return true;
+  if (isEmptyCollection(value)) return true;
+  if (isInvalidDate(value)) return true;
+  if (isEmptySet(value)) return true;
+  if (isEmptyMap(value)) return true;
+  return false;
+};
+
+isBlank(null); // true
+isBlank(undefined); // true
+isBlank(0); // true
+isBlank(false); // true
+isBlank(''); // true
+isBlank(' \r\n '); // true
+isBlank(NaN); // true
+isBlank([]); // true
+isBlank({}); // true
+isBlank(new Date('hello')); // true
+isBlank(new Set()); // true
+isBlank(new Map()); // true
+```
diff --git a/snippets/articles/s/javascript-boolean-function.md b/snippets/articles/s/javascript-boolean-function.md
new file mode 100644
index 000000000..20a6c038b
--- /dev/null
+++ b/snippets/articles/s/javascript-boolean-function.md
@@ -0,0 +1,55 @@
+---
+title: Where and how can I use the Boolean function in JavaScript?
+shortTitle: Boolean function use-cases
+type: question
+language: javascript
+tags: [function,type]
+author: chalarangelo
+cover: rocky-lake
+excerpt: JavaScript's Boolean function can be used for truth-checking data among other things. Learn how to use it and level up your code today.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+JavaScript's built-in [`Boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean) is one of those things I find myself suggesting in code reviews quite often as of late, so I thought I could share some tips about it with the world.
+
+### Using Boolean for truth-checking
+
+The `Boolean()` function is particularly useful when truth-checking data and probably significantly more readable than the double negation (`!!`) operation:
+
+```js
+let x = 'some-value';
+
+// This doesn't look too nice
+if (!!x) {
+  // ...
+}
+
+// This is a lot more readable
+if (Boolean(x)) {
+  // ...
+}
+```
+
+As you can see in the example above, it serves the exact same purpose and is pretty straightforward to use. Similarly, as `Boolean()` is itself a function returning a boolean value, you can use it for truth-checking collections, filtering arrays etc.:
+
+```js
+const values = [0, 0, 2, 0, 3];
+// Use as the callback for Array.prototype.some()
+const hasValidValue = values.some(Boolean);
+// Use as the callback for Array.prototype.filter()
+const nonEmptyValues = values.filter(Boolean);
+```
+
+### Handle Boolean objects with care
+
+While the `Boolean()` function is pretty useful, you might run into some issues with the `Boolean` object and the `Boolean` constructor. The `Boolean` object is an object wrapper for a boolean value, but the tricky part is that, as an object, it's always truthy even if the contained value is `false`!
+
+```js
+let x = new Boolean(false);
+
+if (x) {
+  // This code is executed
+}
+```
+
+For example, the above code will consider `x` truthy, even if it clearly contains `false` as its value. This might some confusing, but you can easily avoid it if you generally avoid using `Boolean` objects and the `Boolean` constructor, unless you are entirely certain that you need to use it for some reason. I cannot find any scenarios where I would need to use this, to be honest, so it might not be all that common to begin with.
diff --git a/snippets/articles/s/javascript-boolean-trap.md b/snippets/articles/s/javascript-boolean-trap.md
new file mode 100644
index 000000000..b573302ed
--- /dev/null
+++ b/snippets/articles/s/javascript-boolean-trap.md
@@ -0,0 +1,78 @@
+---
+title: Boolean traps and how to avoid them
+shortTitle: Boolean traps
+type: story
+language: javascript
+tags: [function,type,boolean]
+author: chalarangelo
+cover: lighthouse
+excerpt: Boolean traps can cause readability and maintainability issues in your code. Learn what they are, how to spot and fix them in this article.
+dateModified: 2021-07-11T05:00:00-04:00
+---
+
+I recently came across the concept of **Boolean traps** and it instantly resonated with me due to the volume of Google searches I've performed because of it. In this article, I'll try to explain what it is, why it's somewhat of an anti-pattern, how to spot it in your code and ways to refactor around it.
+
+### Boolean trap - What's in a name?
+
+While the name **Boolean trap** might be unfamiliar to some, I'm pretty certain the concept it represents isn't. The simplest form of a boolean trap is a function that takes a boolean argument.
+
+The **trap** in the name might throw you off if you stick to this definition, but it serves its purpose. Let's look at two simple examples to get a better grasp of things:
+
+```js
+// What does `false` stand for?
+results.reload(false);
+
+// What does `true` stand for?
+const user = new User(true);
+```
+
+The first example suffers in terms of readability due to an obvious contradiction. A function named `reload` expects a boolean argument. `false` in this context must surely mean that no reloading should happen. Except that might not be the case.  This argument might be anything from performing the operation immediately (i.e. `immediate`) to some side effect such as animation to even the no-op we suspected. I've stumbled upon similar cases of ambiguous arguments in many libraries in the past.
+
+The second example is also hard to decipher without looking at some documentation. Here, the constructor expects a boolean argument that might mean literally anything. Would you have guessed that it's a flag indicating if the user should have administrative privileges? Probably not. The point is there is no way to tell what this argument means without looking at the documentation.
+
+### Red flag or red herring?
+
+At this point, you might be asking yourself why this is actually bad. Reading through the documentation is expected. After all, that's what it's there for. Except this starts to become a waste of time on return visits. If you're working with a library and look up a boolean argument over and over because it's not obvious, it becomes a bit of a hassle.
+
+Moreover, code is read many times by many people. The author might be familiar with the library and API and have no need for documentation altogether. But the next person who comes along will have to visit the same documentation and figure it out for themselves. That harms readability and wastes tons of time in the long run, due to a single boolean argument.
+
+A bonus point here is the potential of further reducing readability by increasing cognitive load. There are valid use-cases for boolean arguments,  but there are situations where the name of the function, being in itself a negative, with a negative (i.e. falsy) value makes the reader stop and pause to parse what's happening. For example:
+
+```js
+// Real quick: Is this valid or invalid?
+input.setInvalid(false);
+```
+
+### Not all booleans will trap you
+
+As with most things, there is no universal best practice here. Even though I often find boolean arguments hard to read, I understand there are cases where you might want to use them.
+
+```js
+// It should be obvious that `true` makes the element disabled
+element.setProperty('disabled', true);
+// Could be equivalent to `element.disabled = true;`
+```
+
+In this example, it's pretty straightforward what `true` does. Notice that the double negative from before might still make this slightly hard to read, but it makes sense to use a boolean in this context. Why? Well, it's essentially a setter function and passing the actual value of the property isn't such a bad idea.
+
+### Mitigating the problem
+
+We've already established what a boolean trap is and why it's bad. But how do we fix it? Even if we can spot the anti-pattern, it might be hard to change it before it affects a lot of code and developers. Some languages support named arguments and that usually solves the problem quite easily. JavaScript on the other hand doesn't, but there's always the option to pass an options object.
+
+Let's take a look at the two examples from before and how that would work:
+
+```js
+// Ok, so reload but not immediately
+results.reload({ immediate: false });
+
+// Create a new user without administrator privileges
+const user = new User({ isAdministrator: false });
+```
+
+Without huge changes to the API, we could have avoided the boolean trap altogether. All we needed was a plain JavaScript object. This also has the added benefit of making the function more extensible in the future. Objects are quite flexible, so if we want to add a second boolean (e.g. `animate` for `reload` or `active` for `User`), we need only add a key to the object.
+
+On a side note, while comments seem an appropriate solution, they will inevitably become stale and out of touch with the API. It's best to leave this kind of information to the official documentation or source code, instead.
+
+### Conclusion
+
+To summarize, boolean arguments in functions can be the source of a lot of wasted time and the cause for low code readability if used incorrectly. They're sometimes considered an anti-pattern as they increase cognitive load and reduce maintainability of shared code. Luckily, they're very easy to spot and fix using plain JavaScript option objects.
diff --git a/snippets/articles/s/javascript-callbacks.md b/snippets/articles/s/javascript-callbacks.md
new file mode 100644
index 000000000..9088577f0
--- /dev/null
+++ b/snippets/articles/s/javascript-callbacks.md
@@ -0,0 +1,60 @@
+---
+title: A cautionary tale about JavaScript callbacks
+shortTitle: Callback pitfalls
+type: story
+language: javascript
+tags: [function]
+author: chalarangelo
+cover: rabbit-call
+excerpt: JavaScript callbacks are especially tricky when you're not careful. Take a deeper dive into potential issues and how to avoid them.
+dateModified: 2021-07-01T05:00:00-04:00
+---
+
+A piece of advice I've found myself repeating often as of late is this:
+
+> When working with callbacks in JavaScript, it's better to err on the side of caution and be more verbose.
+
+Mind you, I'm mostly repeating this to myself, but I thought it's pretty valuable to share it with the world. The reason is the myriads of issues I've stumbled upon due to seemingly harmless functions used as callbacks. And that's not even the worst part! They usually slip under the radar when you look at the code and might need a second or third look to identify as the culprit behind the issue.
+
+The most common bug I've encountered is one you might be familiar with: `parseInt()` used as a callback, especially in combination with `Array.prototype.map()`. Consider the following code:
+
+```js
+const nums = ['1', '5', '10', '21'];
+nums.map(parseInt); // [1, NaN, 2, 7]
+```
+
+Did you spot the problem? `parseInt()` takes up to two arguments: the `string` to be parsed and an optional `radix` parameter. `Array.prototype.map()` passes three parameters to the callback: the `value`, `index` and `array`. It should be obvious from this breakdown that the index of each element being passed as the radix parameter results in this strange problem.
+
+The solution is pretty straightforward, too. Creating a function to pass the arguments we want to `parseInt()` would fix this and remove a nasty bug somewhere down the line:
+
+```js
+const nums = ['1', '5', '10', '21'];
+nums.map(num => parseInt(num, 10)); // [1, 5, 10, 21]
+```
+
+A corollary to this is that when working with third-party libraries and APIs, it's always best to create a function to pass the data to whatever part of said API is being used rather than using it directly as a callback. The reason for this is that, even though the library or API might not expect any additional arguments now, this might change in a later version. Not accounting for this could be a major risk when updating to a new version of a library marked as having no breaking changes. Take a look at the following example:
+
+```js
+// third-party-lib@v1.0.0
+const parseData = path => {
+ const fileData = fs.readFileSync(path);
+ return fileData || '';
+};
+
+const importantFiles = ['id-card.txt', 'bank-number.txt'];
+importantFiles.map(parseData); // Works fine
+
+// third-party-lib@v1.1.0 - No breaking changes!
+const parseData = (path, purge) => {
+ const fileData = fs.readFileSync(path);
+ if (purge) fs.unlinkSync(path);
+ return fileData || '';
+};
+
+const importantFiles = ['id-card.txt', 'bank-number.txt'];
+importantFiles.map(parseData); // 'bank-number.txt'` has been deleted
+```
+
+The example above, while a bit unlikely, demonstrates a case where a simple index from `Array.prototype.map()` could wreak havoc on the entire filesystem due to a harmless version bump of an external dependency. This is the kind of bug that is hard to track down and causes a ton of headaches when debugging as you struggle to understand how a version bump without breaking changes could cause this.
+
+To summarize, be extra careful when working with callbacks. If a function is not explicitly designed to be a callback, if you are using third party code, even if you are uncertain just add a function to pass down the arguments. It will save you time in the long run at the cost of your code looking a tiny bit more verbose. I think it's a worthwhile tradeoff.
diff --git a/snippets/articles/s/javascript-classical-vs-prototypal-inheritance.md b/snippets/articles/s/javascript-classical-vs-prototypal-inheritance.md
new file mode 100644
index 000000000..50d2f94ad
--- /dev/null
+++ b/snippets/articles/s/javascript-classical-vs-prototypal-inheritance.md
@@ -0,0 +1,66 @@
+---
+title: How does JavaScript's prototypal inheritance differ from classical inheritance?
+shortTitle: Prototypal vs classical inheritance
+type: question
+language: javascript
+tags: [object,class]
+author: chalarangelo
+cover: last-light
+excerpt: Understanding the difference between these two object-oriented programming paradigms is key to taking your skills to the next level.
+dateModified: 2021-11-21T05:00:00-04:00
+---
+
+### Object-oriented programming
+
+Both classical and prototypal inheritance are **object-oriented programming paradigms**. Objects in object-oriented programming are abstractions that encapsulate the properties of an entity. This is known as abstraction.
+
+When dealing with multiple levels of abstraction, each level is more general or more specific. The more general abstraction of a more specific abstraction is called a generalization.
+
+As mentioned previously, objects are abstraction of entities. We use either classes (classical inheritance) or prototypes (prototypal inheritance) to create generalizations of these objects. Generalizations are created by inheritance.
+
+Consider an example:
+
+- We have two objects representing two pets: Max the dog and Claire the cat. Let's call them `max` and `claire` respectively.
+- All dogs have common characteristics. Therefore we can create an abstraction, `Dog`, which encapsulates their common characteristics. We can use inheritance to pass characteristics from `Dog` to `max`.
+- The same applies for cats, allowing us to create an abstraction, `Cat`. Similarly, `claire` will inherit characteristics from `Cat`.
+- Cats and dogs share some common characteristics. We can create a generalization, `Animal`, to encapsulate those characteristics. `Dog` and `Cat` inherit these common characteristics from `Animal`.
+
+### Classical inheritance
+
+In classical object-oriented programming, there are two types of abstractions: objects and classes. An object is an abstractions of an entity, while a class is either an abstraction of an object or another class.
+
+If we were to model the previous example using classical inheritance, it would look something like this:
+
+```js
+class Animal { }
+
+class Dog extends Animal { }
+class Cat extends Animal { }
+
+const max = new Dog();
+max.name = 'Max';
+
+const claire = new Cat();
+claire.name = 'Claire';
+```
+
+### Prototypal inheritance
+
+In prototypal object-oriented programming, there's only one type of abstraction: objects. Objects are either abstractions of entities or other objects, in which case they're called prototypes. Hence a prototype is a generalization.
+
+Objects can be created out of nothing or from another object, which in turn becomes the prototype of the newly created object.
+
+If we were to model the previous example using prototypal inheritance, it would look something like this:
+
+```js
+const animal = {};
+
+const dog = Object.create(animal);
+const cat = Object.create(animal);
+
+const max = Object.create(dog);
+max.name = 'Max';
+
+const claire = Object.create(cat);
+claire.name = 'Claire';
+```
diff --git a/snippets/articles/s/javascript-closures.md b/snippets/articles/s/javascript-closures.md
new file mode 100644
index 000000000..c176915eb
--- /dev/null
+++ b/snippets/articles/s/javascript-closures.md
@@ -0,0 +1,55 @@
+---
+title: What are JavaScript closures?
+shortTitle: Closures introduction
+type: question
+language: javascript
+tags: [function,closure]
+author: chalarangelo
+cover: cherry-trees
+excerpt: Learn and understand closures, a core concept in JavaScript programming, and level up your code.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Closures are a JavaScript concept that comes up quite a lot, especially during interviews. While they sound confusing, they are not all that complicated and you have probably already used them in your code regardless of your expertise level. Let's start with what a closure is:
+
+> You have a closure when a function accesses variables defined outside of it.
+
+That doesn't sound too complicated. Let's see an example:
+
+```js
+const items = [
+  { id: 1, title: 'First' },
+  { id: 2, title: 'Second' },
+  { id: 3, title: 'Final' }
+];
+const matcher = /^F/;
+const filteringFn = x => matcher.test(x.title);
+items.filter(filteringFn); // [{ id: 1, title: 'First' }, { id: 3, title: 'Final' }]
+```
+
+The above example defines some data to play around with, a regular expression to use for matching and a function, `filteringFn` that is then used in `Array.prototype.filter()` as the filtering function. If you look closely at `filteringFn`, you'll notice it uses a variable defined outside of, namely `matcher`. This is a closure.
+
+Let's look at another, more complex example:
+
+```js
+const initCounter = (start = 0) => {
+  let value = start;
+  return {
+    get: () => value,
+    increment: () => ++value,
+    decrement: () => --value,
+    reset: () => value = start
+  };
+}
+
+const counter = initCounter(5);
+counter.get(); // 5
+counter.increment(); // 6
+counter.increment(); // 7
+counter.decrement(); // 6
+counter.reset(); // 5
+```
+
+In this example, we define a function, `initCounter`, that returns an object, whose properties are functions. All of the returned object's properties use closures to manipulate `initCounter`'s `value` variable in some way. The obvious benefit of this approach is that if you want to define multiple counters via `initCounter`, you do not need to create multiple `value` instances all over the place, but they are safely encapsulated by the returned object, using closures.
+
+Using closures, as shown in the example above, can help make your code more usable and maintainable, while allowing you to separate concerns and create abstractions as necessary.
diff --git a/snippets/articles/s/javascript-copy-array.md b/snippets/articles/s/javascript-copy-array.md
new file mode 100644
index 000000000..f7bad403f
--- /dev/null
+++ b/snippets/articles/s/javascript-copy-array.md
@@ -0,0 +1,67 @@
+---
+title: How can I clone an array in JavaScript?
+shortTitle: Clone an array
+type: question
+language: javascript
+tags: [array]
+author: chalarangelo
+cover: colorful-plastic
+excerpt: Pick up a few new tricks which you can use to clone arrays in JavaScript.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+JavaScript provides quite a few ways to clone an array, most of which are pretty similar in terms of performance and results. Here's a quick rundown of some of the available options.
+
+#### The spread operator
+
+ES6 introduced the spread operator (`...`), which provides probably the easiest and most common way to create a shallow clone of an array.
+
+```js
+let x = [1, 2, 3, 4];
+let y = [...x];
+```
+
+#### Array.from()
+
+`Array.from()` has a very powerful API that can be used for many different things, including creating a copy of an array.
+
+```js
+let x = [1, 2, 3, 4];
+let y = Array.from(x);
+```
+
+#### Array.prototype.slice()
+
+Similarly to the spread operator, `Array.prototype.slice()` can be used to create a shallow copy of an array.
+
+```js
+let x = [1, 2, 3, 4];
+let y = x.slice();
+```
+
+#### Array.prototype.map()
+
+Looking into one of the more unorthodox options, `Array.prototype.map()` can be used to map each element of an array to itself to create a new array.
+
+```js
+let x = [1, 2, 3, 4];
+let y = x.map(i => i);
+```
+
+#### Array.prototype.filter()
+
+Similarly, `Array.prototype.filter()` can be used to return `true` for each and every element, resulting in a new array with all of the original array's elements.
+
+```js
+let x = [1, 2, 3, 4];
+let y = x.filter(() => true);
+```
+
+#### Object.assign()
+
+Finally, `Object.assign()` can be used in the exact same way as it's used to create a clone of an object, but for an array instead.
+
+```js
+let x = [1, 2, 3, 4];
+let y = Object.assign([], x);
+```
diff --git a/snippets/articles/s/javascript-date-comparison.md b/snippets/articles/s/javascript-date-comparison.md
new file mode 100644
index 000000000..bc02aae9b
--- /dev/null
+++ b/snippets/articles/s/javascript-date-comparison.md
@@ -0,0 +1,43 @@
+---
+title: How do I compare two dates in JavaScript?
+shortTitle: Date comparison
+type: question
+language: javascript
+tags: [date,comparison]
+author: chalarangelo
+cover: pineapple-at-work
+excerpt: Learn how you can compare two dates in JavaScript using various different techniques.
+dateModified: 2022-01-16T05:00:00-04:00
+---
+
+### Equality comparison
+
+Comparing two dates in JavaScript using the loose or strict equality operators (`==` or `===`) is not recommended for most cases. Equality operators compare the `Date` object references, resulting in `false`, even if the date values are the same:
+
+```js
+const a = new Date(2022, 01, 10);
+const b = new Date(2022, 01, 10);
+
+a === b; // false
+```
+
+### Date.prototype.getTime()
+
+One way to compare two `Date` values is using the `Date.prototype.getTime()` method. This method returns a number indicating the number of milliseconds elapsed since the Unix Epoch:
+
+```js
+const a = new Date(2022, 01, 10);
+const b = new Date(2022, 01, 10);
+
+a.getTime() === b.getTime(); // true
+```
+
+### Other methods
+
+As mentioned before, `Date.prototype.getTime()` is one way to compare two `Date` values. It's not the only one way to compare them. Other options are the following:
+
+- `Date.prototype.toISOString()`
+- `Date.prototype.toUTCString()`
+- `Date.prototype.toLocaleDateString()` provided you use the same locale
+
+All of these methods produce consistent results, but we still recommend `Date.prototype.getTime()` due to its simplicity.
diff --git a/snippets/articles/s/javascript-deep-freeze-object.md b/snippets/articles/s/javascript-deep-freeze-object.md
new file mode 100644
index 000000000..1409ee333
--- /dev/null
+++ b/snippets/articles/s/javascript-deep-freeze-object.md
@@ -0,0 +1,81 @@
+---
+title: How can I deep freeze an object in JavaScript?
+shortTitle: Deep freeze object
+type: question
+language: javascript
+tags: [object]
+author: chalarangelo
+cover: frozen-globe
+excerpt: Learn how mutability works in JavaScript, its applications to objects and how you can properly freeze them to make them constant.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Objects in JavaScript are mutable, regardless if you define them as `const` variables or not. In fact, using `const` when defining an object only prevents the variable from being reassigned. However, you can reassign the properties of a `const` object or array, like this:
+
+```js
+const myObj = { a: 10, b: 20, c: 30 };
+myObj.a = 12;     // { a: 12, b: 20, c: 30 };
+
+const myArr = [15, 25, 35];
+myArr[1] = 28;    // [15, 28, 35];
+```
+
+To make an object immutable, we can utilize `Object.freeze()`, which will prevent the addition of new properties and prevent deletion and changes to existing properties to some extent. However, while `Object.freeze()` provides somewhat of a solution, it only mitigates the problem to the next nesting level, as in reality it performs a shallow freeze. This means that properties that are objects or arrays can still be mutated:
+
+```js
+const myObj = {
+  a: 1,
+  b: 'hello',
+  c: [0, 1, 2],
+  d: { e: 1, f: 2 }
+};
+Object.freeze(myObj);
+
+myObj.a = 10;
+myObj.b = 'hi';
+myObj.c[1] = 4;
+myObj.d.e = 0;
+/*
+myObj = {
+  a: 1,
+  b: 'hello',
+  c: [0, 4, 2],
+  d: { e: 0, f: 2 }
+}
+*/
+```
+
+As you can see, `Object.freeze()` is a step in the right direction, but only shallow freezes the object. To solve the issue we can use recursion, checking if each property is itself an object and, if `Object.isFrozen()` is `false`, apply `Object.freeze()` to it:
+
+```js
+const myObj = {
+  a: 1,
+  b: 'hello',
+  c: [0, 1, 2],
+  d: { e: 1, f: 2 }
+};
+
+const deepFreeze = obj => {
+  Object.keys(obj).forEach(prop => {
+    if (typeof obj[prop] === 'object' && !Object.isFrozen(obj[prop])) deepFreeze(obj[prop]);
+  });
+  return Object.freeze(obj);
+};
+deepFreeze(myObj);
+
+myObj.a = 10;
+myObj.b = 'hi';
+myObj.c[1] = 4;
+myObj.d.e = 0;
+
+/*
+myObj = {
+  a: 1,
+  b: 'hello',
+  c: [0, 1, 2],
+  d: { e: 1, f: 2 }
+}
+*/
+```
+
+In the above example, we apply the techniques we described previously to ensure that the given object is deeply frozen. You can view the complete code, along with more examples in the [deepFreeze](/js/s/deep-freeze) snippet.
diff --git a/snippets/articles/s/javascript-destructuring-assignment.md b/snippets/articles/s/javascript-destructuring-assignment.md
new file mode 100644
index 000000000..fc0d94fe5
--- /dev/null
+++ b/snippets/articles/s/javascript-destructuring-assignment.md
@@ -0,0 +1,71 @@
+---
+title: Where and how can I use the destructuring assignment syntax in JavaScript?
+shortTitle: Destructuring assignment introduction
+type: question
+language: javascript
+tags: [array,object]
+author: chalarangelo
+cover: building-blocks
+excerpt: Learn the basics of the destructuring assignment syntax in JavaScript ES6 and improve your code with this easy guide.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+The destructuring assignment syntax, first introduced in JavaScript ES6, allows the **unpacking of values** from arrays and objects into distinct variables. While it might seem intimidating at first, it's actually quite easy to learn and use. Let's break it down into easier to understand cases.
+
+### Array destructuring
+
+Destructuring an array is very straightforward. All you have to do is declare a variable for each value in the sequence. You can define fewer variables than there are indexes in the array (i.e. if you only want to unpack the first few values), skip some indexes or even use the rest pattern to unpack any remaining values into a new array.
+
+```js
+const nums = [ 3, 6, 9, 12, 15 ];
+const [
+  k,              // k = 3
+  l,              // l = 6
+  ,               // Skip a value (9)
+  ...n            // n = [12, 15]
+] = nums;
+```
+
+### Object destructuring
+
+Object destructuring is pretty similar to array destructuring, the main difference being that you can reference each key in the object by name, creating a variable with the same name. Additionally, you can also unpack a key to a new variable name, unpack only the keys you need and use the rest pattern to unpack remaining keys into a new object.
+
+```js
+const obj = { a: 1, b: 2, c: 3, d: 4 };
+const {
+  a,              // a = 1
+  c: d,           // d = 3
+  ...rest         // rest = { b: 2, d: 4 }
+} = obj;
+```
+
+### Nested destructuring
+
+Nested objects and arrays can be unpacked by following the same rules. The difference here is that you can unpack nested keys or values directly to variables without having to store the parent object in a variable itself.
+
+```js
+const nested = { a: { b: 1, c: 2 }, d: [1, 2]};
+const {
+  a: {
+    b: f,         // f = 1
+    ...g          // g = { c: 2 }
+  },
+  ...h            // h = { d: [1, 2]}
+} = nested;
+```
+
+### Advanced destructuring
+
+As arrays act much like objects, it's possible to use the destructuring assignment syntax to get specific values from an array by using the index as a key in an object destructuring assignment. Additionally, using this method, you can get other properties of the array (e.g. its `length`). Finally, you can also define default values for variables in a destructuring assignment, in case the unpacked value is `undefined`.
+
+```js
+const arr = [ 5, 'b', 4, 'd', 'e', 'f', 2 ];
+const {
+  6: x,           // x = 2
+  0: y,           // y = 5
+  2: z,           // z = 4
+  length: count,  // count = 7
+  name = 'array', // name = 'array' (not present in arr)
+  ...restData     // restData = { '1': 'b', '3': 'd', '4': 'e', '5': 'f' }
+} = arr;
+```
diff --git a/snippets/articles/s/javascript-empty-array.md b/snippets/articles/s/javascript-empty-array.md
new file mode 100644
index 000000000..c1d2cf031
--- /dev/null
+++ b/snippets/articles/s/javascript-empty-array.md
@@ -0,0 +1,49 @@
+---
+title: How do I empty an array in JavaScript?
+shortTitle: Empty an array
+type: question
+language: javascript
+tags: [array]
+author: chalarangelo
+cover: coconuts
+excerpt: You can use a lot of different techniques to empty an array in JavaScript. See which ones best suits your needs with this quick guide.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+When working with JavaScript arrays, a pretty common question is how does one empty an array and remove all its elements. As it turns out, there are a few ways you can go about this, each one with its pros and cons.
+
+### Assign it to an empty array
+
+You can assign your variable to an empty array (`[]`) in order to clear it. While this option is rather fast, you should be mindful of references to the original array, as they will remain unchanged. Moreover, it doesn't work for arrays declared as `const`.
+
+```js
+let a = [1, 2, 3, 4];
+a = [];
+```
+
+### Set its length to 0
+
+A better option is to set the `length` of the array to `0`. This option is also pretty fast and has the additional benefit of working for `const` variables.
+
+```js
+let a = [1, 2, 3, 4];
+a.length = 0;
+```
+
+### Use Array.prototype.splice()
+
+`Array.prototype.splice()` can also be a useful alternative when trying to empty an array. While it has no other downsides compared to the previous method, it doesn't seem to perform as well, so that might be something to consider.
+
+```js
+let a = [1, 2, 3, 4];
+a.splice(0, a.length);
+```
+
+### Use Array.prototype.pop()
+
+Last but not least, using `Array.prototype.pop()` is another, more old-fashioned option. It's generally more verbose and less performant, so I'd rather use one of the previous methods instead.
+
+```js
+let a = [1, 2, 3, 4];
+while (a.length) a.pop();
+```
diff --git a/snippets/articles/s/javascript-encodeuri-encodeuricomponent.md b/snippets/articles/s/javascript-encodeuri-encodeuricomponent.md
new file mode 100644
index 000000000..cf0903618
--- /dev/null
+++ b/snippets/articles/s/javascript-encodeuri-encodeuricomponent.md
@@ -0,0 +1,41 @@
+---
+title: What is the difference between encodeURI() and encodeURIComponent() in JavaScript?
+shortTitle: encodeURI() vs encodeURIComponent()
+type: question
+language: javascript
+tags: [browser]
+author: chalarangelo
+cover: laptop-view
+excerpt: JavaScript provides two methods for encoding characters to URL-safe strings. Do you know when to use each one?
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### encodeURIComponent()
+
+The [`encodeURIComponent()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) function encodes everything in the given string, except `A-Z a-z 0-9 - _ . ! ~ * ' ( )`. You should use this function if the string you are encoding is only part of a URL.
+
+```js
+const partOfURL = 'my-page#with,speci@l&/"characters"?';
+const fullURL = 'https://my-website.com/my-page?query="a%b"&user=1';
+
+encodeURIComponent(partOfURL); // Good, escapes special characters
+// 'my-page%23with%2Cspeci%40l%26%2F%22characters%22%3F'
+
+encodeURIComponent(fullURL);  // Bad, encoded URL is not valid
+// 'https%3A%2F%2Fmy-website.com%2Fmy-page%3Fquery%3D%22a%25b%22%26user%3D1'
+```
+
+### encodeURI()
+
+The [`encodeURI()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI) function encodes everything in the given string, except `A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #`. You should use this function if the string you are encoding is a full URL.
+
+```js
+const partOfURL = 'my-page#with,speci@l&/"characters"?';
+const fullURL = 'https://my-website.com/my-page?query="a%b"&user=1';
+
+encodeURI(partOfURL); // Bad, does not escape all special characters
+// 'my-page#with,speci@l&/%22characters%22?'
+
+encodeURI(fullURL);  // Good, encoded URL is valid
+// 'https://my-website.com/my-page?query=%22this%25thing%22&user=1'
+```
diff --git a/snippets/articles/s/javascript-enum.md b/snippets/articles/s/javascript-enum.md
new file mode 100644
index 000000000..7246d6b34
--- /dev/null
+++ b/snippets/articles/s/javascript-enum.md
@@ -0,0 +1,60 @@
+---
+title: How can I define an enum in JavaScript?
+shortTitle: Enum implementation
+type: question
+language: javascript
+tags: [object,class,symbol,generator]
+author: chalarangelo
+cover: book-chair
+excerpt: Enums are part of TypeScript, but what about defining enums in plain old JavaScript? Here are a few way you can do that.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+TypeScript's enums are a very convenient feature present in many other languages. JavaScript, however, does not have a similar concept at this time. But what JavaScript lacks in syntactic sugar it makes up for in terms of flexibility.
+
+The easiest way to define an enum would be to use `Object.freeze()` in combination with a plain object. This will ensure that the enum object cannot be mutated.
+
+```js
+const daysEnum = Object.freeze({
+  monday: 0,
+  tuesday: 1,
+  wednesday: 2,
+  thursday: 3,
+  friday: 4,
+  saturday: 5,
+  sunday: 6
+});
+```
+
+Taking this one step further, one could extract the logic into a function with a variable number of arguments and producing a frozen object. There is very little benefit to this technique, so a better alternative would be to create a simple `class`. After all, enums are more common in object-oriented programming languages, so this sounds like a great fit.
+
+An `Enum` class would only require a `constructor` with a variable number of arguments. Its job is to add each key to the enum object and freeze the newly created instance. A potential enhancement would be to provide access to the enum values as strings. Obviously, this can be accomplished using `Object.keys()`, but a named method could result in a conflict with one of the enum's values, let alone the method polluting the result.
+
+Using an ES6 symbol is the obvious solution here, as it will not pollute the result of `Object.keys()` and it will never conflict with any values in the enum. Taking this one step further, `Symbol.iterator` would be a great choice as it would allow for the enum to be considered iterable and make it even more useful. Putting all of this together, here's my `Enum` class and how to use it:
+
+```js
+class Enum {
+  constructor(...keys) {
+    keys.forEach((key, i) => {
+      this[key] = i;
+    });
+    Object.freeze(this);
+  }
+
+  *[Symbol.iterator]() {
+    for (let key of Object.keys(this)) yield key;
+  }
+}
+
+const daysEnum = new Enum(
+  'monday',
+  'tuesday',
+  'wednesday',
+  'thursday',
+  'friday',
+  'saturday',
+  'sunday'
+);
+
+const days = [...daysEnum]; // Array of the enum values as strings
+```
diff --git a/snippets/articles/s/javascript-equality.md b/snippets/articles/s/javascript-equality.md
new file mode 100644
index 000000000..f3f076782
--- /dev/null
+++ b/snippets/articles/s/javascript-equality.md
@@ -0,0 +1,55 @@
+---
+title: What is the difference between JavaScript's equality operators?
+shortTitle: JavaScript equality operators
+type: question
+language: javascript
+tags: [type,comparison]
+author: chalarangelo
+cover: beach-pineapple
+excerpt: Learn all you need to know about the differences between JavaScript's double equals and triple equals operators.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+JavaScript provides two equality operators used for comparisons:
+
+- The double equals (`==`), also known as the loose equality operator
+- The triple equals (`===`), also known as the strict equality operator
+
+The key difference between the two is that the triple equals (`===`) operator compares both type and value, whereas the double equals (`==`) operator uses type coercion so that both operands are of the same type, then compares only the resulting values.
+
+Here are some examples to clear up any confusion:
+
+```js
+const num = 0;
+const str = '0';
+const obj = new String(0);
+const bool = false;
+const undef = undefined;
+const nil = null;
+
+console.dir([
+  num == str,     // 0 == 0, true
+  num == bool,    // 0 == 0, true
+  str == obj,     // '0' == '0', true
+  obj == num,     // 0 == 0, true
+  bool == str,    // 0 == 0, true
+  bool == obj,    // 0 == 0, true
+  bool == nil,    // false
+  undef == nil,   // true
+  undef == bool,  // false
+]);
+
+console.dir([
+  num === str,     // types don't match, false
+  num === bool,    // types don't match, false
+  str === obj,     // types don't match, false
+  obj === num,     // types don't match, false
+  bool === str,    // types don't match, false
+  bool === obj,    // types don't match, false
+  bool === nil,    // types don't match, false
+  undef === nil,   // types don't match, false
+  undef === bool,  // types don't match, false
+]);
+```
+
+As you can see from the examples above, using the triple equals (`===`) operator is far more predictable and intuitive than the double equals (`==`) operator. Therefore, we recommend you use the triple equals (`===`) operator for most cases, unless you are entirely certain you want type coercion to be applied to the comparison's operands.
diff --git a/snippets/articles/s/javascript-event-bubbling-capturing-delegation.md b/snippets/articles/s/javascript-event-bubbling-capturing-delegation.md
new file mode 100644
index 000000000..626f6bd62
--- /dev/null
+++ b/snippets/articles/s/javascript-event-bubbling-capturing-delegation.md
@@ -0,0 +1,89 @@
+---
+title: Understanding event bubbling, capturing and delegation in JavaScript
+shortTitle: Event bubbling, capturing and delegation
+type: story
+language: javascript
+tags: [browser,event]
+author: chalarangelo
+cover: fishermen
+excerpt: Understand how events work in JavaScript and learn when to use event bubbling, event capturing and event delegation with this short guide.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### Event bubbling
+
+Bubbling means that the event propagates from the target element (i.e. the `button` the user clicked) up through its ancestor tree, starting from the nearest one. By default, all events bubble.
+
+To better understand event bubbling, consider the following HTML example, which we will be referring to for most of this article:
+
+```html
+<html>
+  <body>
+    <div id="btn-container">
+      <button class="btn">Click me</button>
+    </div>
+  </body>
+</html>
+```
+
+```js
+const ancestors = [
+  window, document, document.documentElement,
+  document.body, document.getElementById('btn-container')
+];
+
+// Target phase
+document.querySelector('.btn').addEventListener('click', e => {
+  console.log(`Hello from ${e.target}`);
+});
+// Bubble phase
+ancestors.forEach(a => {
+  a.addEventListener('click', e => {
+    console.log(`Hello from ${e.currentTarget}`);
+  });
+});
+```
+
+If we add an event listener to each element in the tree, as shown above, we would see a listener fired by the `button` first, then each one of the others firing from the nearest ancestor all the way up to `Window`.
+
+### Event capturing
+
+Capturing is the exact opposite of bubbling, meaning that the outer event handlers are fired before the most specific handler (i.e. the one on the `button`). Note that all capturing event handlers are run first, then all the bubbling event handlers.
+
+You can use event capturing by applying a third argument to [`EventTarget.addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener), setting it to `true`. For example:
+
+```js
+// Capture phase
+ancestors.forEach(a => {
+  a.addEventListener('click', e => {
+    console.log(`Hello from ${e.currentTarget}`);
+  }, true);
+});
+```
+
+Given this code, we would see a listener fired for each ancestor of the `button` first and then the listener of the `button` would fire.
+
+### Event propagation
+
+Having explained event bubbling and capturing, we can now explain the three phases of event propagation:
+
+- During the **capture phase**, the event starts from `Window` and moves down to `Document`, the root element and through ancestors of the target element.
+- During the **target phase**, the event gets triggered on the event target (e.g. the `button` the user clicked).
+- During the **bubble phase**, the event bubbles up through ancestors of the target element until the root element, `Document` and, finally, `Window`.
+
+### Event delegation
+
+Event delegation refers to the idea of delegating event listening to parent elements instead of adding event listeners directly to the event targets. Using this technique, the parent can catch and handle the bubbling events as necessary.
+
+```js
+window.addEventListener('click', e => {
+  if (e.target.className === 'btn') console.log('Hello there!');
+});
+```
+
+In the above example, we delegate event handling from the `button` to `Window` and use `Event.target` to get the original event's target.
+
+Using the event delegation pattern is advantageous for two reasons:
+
+- By using event delegation, we can listen for events on a large amount of elements without having to attach event listeners individually, which can provide performance benefits.
+- By using event delegation, dynamic elements (i.e. added or removed from the DOM over the course of time) can have their events captured and handled without requiring listeners to be registered or removed.
diff --git a/snippets/articles/s/javascript-event-loop-explained.md b/snippets/articles/s/javascript-event-loop-explained.md
new file mode 100644
index 000000000..237d8c09a
--- /dev/null
+++ b/snippets/articles/s/javascript-event-loop-explained.md
@@ -0,0 +1,117 @@
+---
+title: What is the Event Loop in JavaScript?
+shortTitle: Event loop explained
+type: question
+language: javascript
+tags: [browser,event]
+author: chalarangelo
+cover: tranquility
+excerpt: The Event Loop is a source of confusion for many developers, but it's a fundamental piece of the JavaScript engine.
+dateModified: 2022-08-21T05:00:00-04:00
+---
+
+The Event Loop is a source of confusion for many developers, but it's a fundamental piece of the JavaScript engine. It's what allows JavaScript to be single-threaded, yet able to execute in a non-blocking fashion. To understand the Event Loop, we first need to explain a few things about the JavaScript engine, such as the Call Stack, Tasks, Microtasks and their respective Queues. Let's break them down one by one.
+
+### The Call Stack
+
+The **Call Stack** is a data structure that keeps track of the execution of JavaScript code. As the name suggests, it's a stack, thus a LIFO (Last In, First Out) data structure in memory. Each function that's executed is represented as a frame in the Call Stack and placed on top of the previous function.
+
+Let's look at a simple example, step by step:
+
+```js
+function foo() {
+  console.log('foo');
+  bar();
+}
+
+function bar() {
+  console.log('bar');
+}
+```
+
+1. The Call Stack is initially empty.
+2. The function `foo()` is pushed onto the Call Stack.
+3. The function `foo()` is executed and popped off the Call Stack.
+4. The function `console.log('foo')` is pushed onto the Call Stack.
+5. The function `console.log('foo')` is executed and popped off the Call Stack.
+6. The function `bar()` is pushed onto the Call Stack.
+7. The function `bar()` is executed and popped off the Call Stack.
+8. The function `console.log('bar')` is pushed onto the Call Stack.
+9. The function `console.log('bar')` is executed and popped off the Call Stack.
+10. The Call Stack is now empty.
+
+### Tasks and the Task Queue
+
+**Tasks** are scheduled, synchronous blocks of code. While executing, they have exclusive access to the Call Stack and can also enqueue other tasks. Between Tasks, the browser can perform rendering updates. Tasks are stored in the **Task Queue**, waiting to be executed by their associated functions. The Task Queue, in turn, is a FIFO (First In, First Out) data structure. Examples of Tasks include the callback function of an event listener associated with an event and the callback of `setTimeout()`.
+
+### Microtasks an the Microtask Queue
+
+**Microtasks** are similar to Tasks in that they're scheduled, synchronous blocks of code with exclusive access to the Call Stack while executing. Additionally, they are stored in their own FIFO (First In, First Out) data structure, the **Microtask Queue**. Microtasks differ from Tasks, however, in that the Microtask Queue must be emptied out after a Task completes and before re-rendering. Examples of Microtasks include `Promise` callbacks and `MutationObserver` callbacks.
+
+Microtasks and the Microtask Queue are also referred to as Jobs and the Job Queue.
+
+### The Event Loop
+
+Finally, the **Event Loop** is a loop that keeps running and checks if the Call Stack is empty. It processes Tasks and Microtasks, by placing them in the Call Stack one at a time and also controls the rendering process. It's made up of four key steps:
+
+1. **Script evaluation:** Synchronously executes the script until the Call Stack is empty.
+2. **Task processing:** Select the first Task in the Task Queue and run it until the Call Stack is empty.
+3. **Microtask processing:** Select the first Microtask in the Microtask Queue and run it until the Call Stack is empty, repeating until the Microtask Queue is empty.
+4. **Rendering:** Re-render the UI and loop back to step 2.
+
+### A practical example
+
+To better understand the Event Loop, let's look at a practical example, incorporating all of the above concepts:
+
+```js
+console.log('Script start');
+
+setTimeout(() => console.log('setTimeout()'), 0);
+
+Promise.resolve()
+  .then(() => console.log('Promise.then() #1'))
+  .then(() => console.log('Promise.then() #2'));
+
+console.log('Script end');
+
+// LOGS:
+//   Script start
+//   Script end
+//   Promise.then() #1
+//   Promise.then() #2
+//   setTimeout()
+```
+
+Does the output look like what you expected? Let's break down what's happening, step by step:
+
+1. The Call Stack is initially empty. The Event Loop begins evaluating the script.
+2. `console.log()` is pushed to the Call Stack and executed, logging `'Script start'`.
+3. `setTimeout()` is pushed to the Call Stack and executed. This creates a new Task for its callback function in the Task Queue.
+4. `Promise.prototype.resolve()` is pushed to the Call Stack and executed, calling in turn `Promise.prototype.then()`.
+5. `Promise.prototype.then()` is pushed to the Call Stack and executed. This creates a new Microtask for its callback function in the Microtask Queue.
+6. `console.log()` is pushed to the Call Stack and executed, logging `'Script end'`.
+7. The Event Loops has finished its current Task, evaluating the script. It then begins running the first Microtask in the Microtask Queue, which is the callback of `Promise.prototype.then()` that was queued in step 5.
+8. `console.log()` is pushed to the Call Stack and executed, logging `'Promise.then() #1'`.
+9. `Promise.prototype.then()` is pushed to the Call Stack and executed. This creates a new entry for its callback function in the Microtask Queue.
+10. The Event Loop checks the Microtask Queue. As it’s not empty, it executes the first Microtask, which is the callback of `Promise.prototype.then()` that was queued in step 10.
+11. `console.log()` is pushed to the Call Stack and executed, logging `'Promise.then() #2'`.
+12. Re-rendering would occur here, if there was any.
+13. The Microtask Queue is empty, so the Event Loop moves to the Task Queue and executes the first Task, which is the callback of `setTimeout()` that was queued in step 3.
+14. `console.log()` is pushed to the Call Stack and executed, logging `'setTimeout()'`.
+15. Re-rendering would occur here, if there was any.
+16. The Call Stack is now empty.
+
+### Summary
+
+- The **Event Loop** is responsible for executing the JavaScript code. It first evaluates and executes the script, then processes **Tasks** and **Microtasks**.
+- **Tasks** and **Microtasks** are scheduled, synchronous blocks of code. They are executed one at a time, and are placed in the **Task Queue** and **Microtask Queue**, respectively.
+- For all of these, the **Call Stack** is used to keep track of function calls.
+- Whenever **Microtasks** are executed, the **Microtask Queue** must be emptied out before the next **Task** can be executed.
+- **Rendering** occurs between **Tasks**, but not between **Microtasks**.
+
+### Notes
+
+- The script evaluation step of the Event Loop is in itself treated similarly to a Task.
+- The second argument of `setTimeout()` indicates a minimum time until execution, not a guaranteed time. This is due to the fact that Tasks execute in order and that Microtasks may be executed in-between.
+- The behavior of the event loop in Node.js is similar, but has some differences. Most notably, there is no rendering step.
+- Older browser versions did not completely respect the order of operations, so Tasks and Microtasks may execute in different orders.
diff --git a/snippets/articles/s/javascript-evil-closures.md b/snippets/articles/s/javascript-evil-closures.md
new file mode 100644
index 000000000..553c5a490
--- /dev/null
+++ b/snippets/articles/s/javascript-evil-closures.md
@@ -0,0 +1,69 @@
+---
+title: Are JavaScript closures inherently evil?
+shortTitle: Closures and hidden state
+type: story
+language: javascript
+tags: [function,closure]
+author: chalarangelo
+cover: silver-flat-screen
+excerpt: Closures are used frequently, yet often misunderstood. Understanding them in depth is crucial to be able to write clean, maintainable code.
+dateModified: 2022-05-18T05:00:00-04:00
+---
+
+JavaScript closures are used frequently, yet often misunderstood. Understanding them in depth is crucial to be able to write clean, maintainable and bug-free code. We previously discussed what they are and how they work.
+
+I strongly recommend you read the [previous article on closures](/articles/s/javascript-closures) if you haven't already. Instead of rehashing the same information, I would like to discuss the dangers of using closures and present my view on the topic.
+
+### Hidden state
+
+The main argument against closures is that of hidden state. Hidden state refers to obscuring the state of an object or, in this case, a function. The argument is that **internal mutable state** can create unpredictable behavior and unexpected results. Due to this, it's often said that hidden state is the root of all evil when it comes to programming.
+
+While the argument in itself has some merit, I don't much like the generalization. There are perfectly valid cases where hidden state is expected, even practically a necessity. However, it's true that hidden state can create bugs and unmaintainable code.
+
+An example of hidden state due to closures would be the one presented in my original introduction to the topic:
+
+```js
+const initCounter = (start = 0) => {
+  let value = start;
+  return {
+    get: () => value,
+    increment: () => ++value,
+    decrement: () => --value,
+    reset: () => value = start
+  };
+}
+
+const counter = initCounter(5);
+counter.get(); // 5
+counter.increment(); // 6
+counter.increment(); // 7
+counter.decrement(); // 6
+counter.reset(); // 5
+```
+
+In this scenario, the `initCounter` function returns an object that contains hidden mutable state in the form of the `value` variable. Obviously, this is a very simple example, but `counter.get()` or `counter.increment()` in isolation would be considered non-deterministic expressions. There is no way to know the result of a method call like that without analyzing the surrounding code.
+
+While this is not uncommon, it can get more complicated when shared state comes into play or many pieces of code are interacting with one another. The common remedy to this issue is to use **functional programming** and refactor the hidden mutable state into an argument or a shared global variable.
+
+### Access to context
+
+Not all closures are created equal. In fact, there are perfectly valid use-cases of closures that can make life a lot easier. For example, **accessing shared constants** should be considered pretty safe. After all, if you want truly pure functions you shouldn't even access globals and web APIs. This would be pretty impractical, as you would have to pass each global and API as an argument to the function.
+
+Although reasonably safe, it's important to ensure that constants are initialized before being used and explicitly throw an error, if not. Additionally, adequate documentation of such closures will minimize friction and make sure other developers understand what's going on. Finally, providing an escape hatch, usually in the form of **default arguments** that can be overridden, should be considered if possible.
+
+Here's an example of a simple random number generator, following these rules:
+
+```js
+const randomNumber = (limit = 100, random = Math.random) => random() * limit;
+
+randomNumber(10); // 4.0
+randomNumber(10, () => 0.2); // 2.0
+```
+
+Another benefit of these practices is that writing tests is a lot easier, as there's no confusion as to what needs to be mocked at any given time. In this example, we can easily replace `Math.random()` with any function that we want and know the resulting value.
+
+### Conclusion
+
+Closures in themselves are just another language feature that you have to wrap your head around. As a rule of thumb, use them sparingly, clarify your code's intent and provide escape hatches to reduce potential error surface.
+
+When used correctly, they can be another tool in your arsenal. Yet, if you use them poorly, they can create some really nasty bugs or unmaintainable code. It takes time to get used to them and be able to spot anti-patterns before they become a problem.
diff --git a/snippets/articles/s/javascript-expression-statement.md b/snippets/articles/s/javascript-expression-statement.md
new file mode 100644
index 000000000..67f69dc47
--- /dev/null
+++ b/snippets/articles/s/javascript-expression-statement.md
@@ -0,0 +1,27 @@
+---
+title: What is the difference between an expression and a statement in JavaScript?
+shortTitle: Expressions and statements
+type: question
+language: javascript
+tags: [type]
+author: chalarangelo
+cover: forest-balcony
+excerpt: JavaScript distinguishes expressions and statements. Learn their differences in this short article.
+dateModified: 2021-11-07T05:00:00-04:00
+---
+
+JavaScript distinguishes expressions and statements. An **expression** is any valid unit of code that resolves to a value. A **statement** is a unit of code that performs an action. Some examples:
+
+```js
+// Statements
+let x = 0;
+function add(a, b) { return a + b; }
+if (true) { console.log('Hi'); }
+
+// Expressions
+x;          // Resolves to 0
+3 + x;      // Resolves to 3
+add(1, 2);  // Resolves to 3
+```
+
+Anywhere JavaScript expects a statement, you can also write an expression. This kind of statement is called an **expression statement**. Conversely, you cannot write a statement where JavaScript expects an expression.
diff --git a/snippets/articles/s/javascript-for-in-for-of-foreach.md b/snippets/articles/s/javascript-for-in-for-of-foreach.md
new file mode 100644
index 000000000..37d85c415
--- /dev/null
+++ b/snippets/articles/s/javascript-for-in-for-of-foreach.md
@@ -0,0 +1,55 @@
+---
+title: What is the difference between JavaScript's for...in, for...of and forEach?
+shortTitle: JavaScript iteration methods comparison
+type: question
+language: javascript
+tags: [array,object,iterator]
+author: chalarangelo
+cover: lake-loop
+excerpt: Learn the differences between the three most commonly used iteration methods in JavaScript, that often confuse beginners and veterans alike.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+`for...in` is used to iterate over all enumerable properties of an object, including inherited enumerable properties. This iteration statement can be used with arrays strings or plain objects, but not with `Map` or `Set` objects.
+
+```js
+for (let prop in ['a', 'b', 'c'])
+  console.log(prop);            // 0, 1, 2 (array indexes)
+
+for (let prop in 'str')
+  console.log(prop);            // 0, 1, 2 (string indexes)
+
+for (let prop in {a: 1, b: 2, c: 3})
+  console.log(prop);            // a, b, c (object property names)
+
+for (let prop in new Set(['a', 'b', 'a', 'd']))
+  console.log(prop);            // undefined (no enumerable properties)
+```
+
+`for...of` is used to iterate over iterable objects, iterating over their values instead of their properties. This iteration statement can be used with arrays, strings, `Map` or `Set` objects, but not with plain objects.
+
+```js
+for (let val of ['a', 'b', 'c'])
+  console.log(val);            // a, b, c (array values)
+
+for (let val of 'str')
+  console.log(val);            // s, t, r (string characters)
+
+for (let val of {a: 1, b: 2, c: 3})
+  console.log(prop);           // TypeError (not iterable)
+
+for (let val of new Set(['a', 'b', 'a', 'd']))
+  console.log(val);            // a, b, d (Set values)
+```
+
+Finally, `forEach()` is a method of the `Array` prototype, which allows you to iterate over the elements of an array. While `forEach()` only iterates over arrays, it can access both the value and the index of each element while iterating.
+
+```js
+['a', 'b', 'c'].forEach(
+  val => console.log(val)     // a, b, c (array values)
+);
+
+['a', 'b', 'c'].forEach(
+  (val, i) => console.log(i)  // 0, 1, 2 (array indexes)
+);
+```
diff --git a/snippets/articles/s/javascript-for-loop-early-break.md b/snippets/articles/s/javascript-for-loop-early-break.md
new file mode 100644
index 000000000..66a7b4fd7
--- /dev/null
+++ b/snippets/articles/s/javascript-for-loop-early-break.md
@@ -0,0 +1,47 @@
+---
+title: "Tip: Use JavaScript for loops if you need to break out early"
+shortTitle: For loops for early breaking
+type: tip
+language: javascript
+tags: [array,loop]
+author: chalarangelo
+cover: armchair
+excerpt: Iteration in JavaScript can be done a handfuld of ways, most often using array methods, but sometimes a `for` loop is the best option.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+The usefulness of the humble `for` loop in modern JavaScript is rarely talked about. Apart from it being particularly useful in [asynchronous operation scenarios](/blog/s/javascript-async-array-loops), it can also make your code a lot more performant shall you need to break out of a loop early. Consider the following example:
+
+```js
+const smallArray = [0, 2];
+const largeArray = Array.from({ length: 1000 }, (_, i) => i);
+
+const areEqual = (a, b) => {
+  let result = true;
+  a.forEach((x, i) => {
+    if (!result) return;
+    if (b[i] === undefined || x !== b[i]) result = false;
+  });
+  return result;
+}
+
+areEqual(largeArray, smallArray); // false
+// Will loop over all items in `largeArray`
+```
+
+Obviously, the code isn't optimized, but it highlights the issue of array methods, such as `Array.prototype.forEach()` being unable to break out of the loop early. To counteract this, we could use a `for` loop and an early `return` instead:
+
+```js
+const smallArray = [0, 2];
+const largeArray = Array.from({ length: 1000 }, (_, i) => i);
+
+const areEqual = (a, b) => {
+  for (let i in a) {
+    if (b[i] === undefined || a[i] !== b[i]) return false;
+  }
+  return true;
+}
+
+areEqual(largeArray, smallArray); // false
+// Will only loop until the first mismatch is encountered
+```
diff --git a/snippets/articles/s/javascript-function-call-apply-bind.md b/snippets/articles/s/javascript-function-call-apply-bind.md
new file mode 100644
index 000000000..c811f2f81
--- /dev/null
+++ b/snippets/articles/s/javascript-function-call-apply-bind.md
@@ -0,0 +1,66 @@
+---
+title: JavaScript function methods - call(), apply() and bind()
+shortTitle: Function methods - call(), apply() and bind()
+type: story
+language: javascript
+tags: [function]
+author: chalarangelo
+cover: canoe
+excerpt: Learn everything you need to know about JavaScript's `call()`, `apply()` and `bind()` in this short guide.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### Function.prototype.call()
+
+`Function.prototype.call()` is used to call a function with a given `this` context and any arguments provided individually. For example:
+
+```js
+function printThisAndData(...data) {
+  console.log(this.data, ...data);
+}
+
+const obj = { data: 0 };
+const data = [1, 2, 3];
+
+printThisAndData.call(obj, data);       // logs: 0 [1, 2, 3]
+printThisAndData.call(obj, ...data);    // logs: 0 1 2 3
+```
+
+### Function.prototype.apply()
+
+`Function.prototype.apply()` is almost identical to `Function.prototype.call()` in the sense that it calls a function with a given `this` context, however it requires arguments to be provided as an array. For example:
+
+```js
+function printThisAndData(...data) {
+  console.log(this.data, ...data);
+}
+
+const obj = { data: 0 };
+const data = [1, 2, 3];
+
+printThisAndData.apply(obj, data);      // logs: 0 1 2 3
+printThisAndData.apply(obj, ...data);   // Throws a TypeError
+```
+
+### Function.prototype.bind()
+
+`Function.prototype.bind()` is slightly different from the previous two methods. Instead of calling a function with the given `this` context and returning the result, it returns a function with its `this` context bound and any arguments provided individually prepended to the arguments at the time of calling the returned function. For example:
+
+```js
+function printThisAndData(...data) {
+  console.log(this.data, ...data);
+}
+
+const obj = { data: 0 };
+const data = [1, 2, 3];
+
+const printObjAndData = printThisAndData.bind(obj);
+
+printObjAndData(data);                  // logs: 0 [1, 2, 3]
+printObjAndData(...data);               // logs: 0 1 2 3
+
+const printObjTwoAndData = printThisAndData.bind(obj, 2);
+
+printObjTwoAndData(data);               // logs: 0 2 [1, 2, 3]
+printObjTwoAndData(...data);            // logs: 0 2 1 2 3
+```
diff --git a/snippets/articles/s/javascript-higher-order-functions.md b/snippets/articles/s/javascript-higher-order-functions.md
new file mode 100644
index 000000000..09eaf8c79
--- /dev/null
+++ b/snippets/articles/s/javascript-higher-order-functions.md
@@ -0,0 +1,31 @@
+---
+title: Understanding higher-order functions in JavaScript
+shortTitle: Higher-order functions
+type: story
+language: javascript
+tags: [function]
+author: chalarangelo
+cover: rock-climbing
+excerpt: Learn everything you need to know about higher-order functions with this short guide and level up your programming skills.
+dateModified: 2021-11-07T16:34:37+03:00
+---
+
+Higher-order functions are **functions that operate on other functions**, either by accepting them as arguments or by returning them as their results. This allows us to create an abstraction layer over actions, not just values.
+
+The reason we can write higher-order functions in JavaScript is due to the fact that functions are values. This means they can be assigned to variables and passed as values. You might also often hear the term _callback_ when referring to a function that is passed as an argument. This is due to it being called by the higher-order function. Callbacks are particularly common in JavaScript, with event handling, asynchronous code and array operations relying heavily on them.
+
+The main advantages of this technique are abstraction, composition, code reusability and readability. Most of the 30 seconds of code snippets are built with higher-order functions in mind. They are small, easily digestible functions that are **highly reusable** and **can be composed** to create more complex logic.
+
+That being said, we can take a look at an example, utilizing some very simple functions:
+
+```js
+const add = (a, b) => a + b;
+const isEven = num => num % 2 === 0;
+
+const data = [2, 3, 1, 5, 4, 6];
+
+const evenValues = data.filter(isEven); // [2, 4, 6]
+const evenSum = data.filter(isEven).reduce(add); // 12
+```
+
+In this example, we define two simple functions that we then use as callbacks in `Array.prototype.reduce()` and `Array.prototype.filter()` to get the result we want. Both of these functions are higher-order functions. This allows us to create an **abstraction layer for any action** we might want to perform without having to rewrite how the filtering or reduction algorithm is to be applied every single time.
diff --git a/snippets/articles/s/javascript-iife.md b/snippets/articles/s/javascript-iife.md
new file mode 100644
index 000000000..1d485f511
--- /dev/null
+++ b/snippets/articles/s/javascript-iife.md
@@ -0,0 +1,47 @@
+---
+title: What is an IIFE in JavaScript?
+shortTitle: IIFE introduction
+type: question
+language: javascript
+tags: [function]
+author: chalarangelo
+cover: tropical-waterfall
+excerpt: An Immediately Invoked Function Expression (IIFE) is a JavaScript trick that trips up many developers. Here's what you need to know.
+dateModified: 2021-06-14T12:00:00+03:00
+---
+
+An **Immediately Invoked Function Expression** (IIFE for short) is a JavaScript function that is immediately invoked as soon as it's evaluated by the JavaScript runtime. Here's what it looks like alongside a roughly equivalent piece of code:
+
+```js
+// IIFE
+(function (message) {
+  console.log(message);
+})('Hello World');
+// LOGS: 'Hello World'
+
+// Equivalent code using named function
+function logMessage(message) {
+  console.log(message);
+}
+
+logMessage('Hello World'); // LOGS: 'Hello World'
+```
+
+Remember the "roughly equivalent" part? The only difference is the use of a named function instead of an anonymous one. From this example, it should be easy to deduce the anatomy of an IIFE, breaking it down into its parts:
+
+- Optional leading semicolon to avoid `TypeError`s in cases of minification etc.
+- An anonymous function, containing all the code that we want to invoke.
+- Opening and closing parentheses to wrap the anonymous function.
+- Parentheses to call the function and any arguments to invoke it with.
+
+Note that you can also use arrow functions for IIFEs, if you like. Just make sure to remember the differences between regular and arrow functions in that case. Our previous articles on [arrow functions](/blog/s/javascript-arrow-functions) and [the `this` keyword](/blog/s/javascript-this) should just about cover them.
+
+```js
+// All of these are equivalent, leading semicolon is optional
+;(() => console.log('Hello'))();
+;(function(){ console.log('Hello'); })();
+;(function(){ console.log('Hello'); })();
+;(function(){ console.log('Hello'); }());
+```
+
+IIFEs are often used to run some code, while keeping it and its variables out of the global scope. They are often criticized for lack of readability and how they are confusing to beginners. Additionally, they started going out of fashion with the rise of JavaScript modules and transpilers, so they might be less and less common as time goes by.
diff --git a/snippets/articles/s/javascript-index-for-of-loop.md b/snippets/articles/s/javascript-index-for-of-loop.md
new file mode 100644
index 000000000..5084d3966
--- /dev/null
+++ b/snippets/articles/s/javascript-index-for-of-loop.md
@@ -0,0 +1,26 @@
+---
+title: "Tip: Get the index of an array item in a JavaScript for...of loop"
+shortTitle: Array index in for...of loops
+type: tip
+language: javascript
+tags: [array,iterator]
+author: chalarangelo
+cover: cave-view
+excerpt: Did you know you can get the index of an array item in a JavaScript for...of loop? Learn how with this bite-sized tip.
+dateModified: 2021-07-25T05:00:00-04:00
+---
+
+JavaScript's `for...of` loops provide an easy way to iterate over all kinds of iterables from arrays and stings to `Map` and `Set` objects. One supposed limitation over other options (e.g. `Array.prototype.forEach()`) is that you only get the value of each item in the iterable. But that is not necessarily the case, as you can easily leverage `Array.prototype.entries()` to get both the index and value of each array item:
+
+```js
+const items = ['a', 'b', 'c'];
+
+for (let [index, item] of items.entries()) {
+  console.log(`${index}: ${item}`);
+}
+// LOGS: 0: a, 1: b, 2: c
+```
+
+Moreover, you can use the spread operator (`...`) to convert a string into an array and then use `Array.prototype.entries()` the same way. Finally, both `Map` and `Set` prototypes provide a similar method (`Map.prototype.entries()` and `Set.prototype.entries()` respectively), which can be used the exact same way.
+
+_If you're not familiar with `for...of` and its syntax, I highly recommending you take a look at [this article about the various iteration methods in JavaScript](/articles/s/javascript-for-in-for-of-foreach)._
diff --git a/snippets/articles/s/javascript-iterable-to-array.md b/snippets/articles/s/javascript-iterable-to-array.md
new file mode 100644
index 000000000..48799ae25
--- /dev/null
+++ b/snippets/articles/s/javascript-iterable-to-array.md
@@ -0,0 +1,47 @@
+---
+title: How do I convert an iterable to an array in JavaScript?
+shortTitle: Iterable to array
+type: question
+language: javascript
+tags: [object,array,string]
+author: chalarangelo
+cover: waves
+excerpt: Learn how to use the JavaScript ES6 spread syntax to converting iterables to arrays and level up your code today.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+JavaScript ES6 introduced, among many other things, the [spread operator (`...`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax), which allows an iterable to be expanded in places where zero or more arguments or elements are expected.
+
+We can use the spread operator to convert iterables or, as they are sometimes referred to, array-likes. Let's take a look at some examples:
+
+### String
+
+When the spread operator is applied to a string, the result is an array of strings each one representing a character of the original string:
+
+```js
+const name = 'Zelda';
+const letters = [...name]; // 'Z', 'e', 'l', 'd', 'a'
+```
+
+### Set
+
+A [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) is a collection of unique values. When the spread operator is applied to it, the result is an array of the stored values:
+
+```js
+const data = [1, 2, 3, 1, 2, 4]
+const values = new Set(data);
+const uniqueValues = [...values]; // [1, 2, 3, 4]
+```
+
+Note that the above example is the basis for the [uniqueElements snippet](/js/s/unique-elements).
+
+### NodeList
+
+A [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) is a collection of nodes, returned by methods such as `Document.childNodes()` or `Document.querySelectorAll()`. While it implements some methods that help manipulate it as an array (e.g. `NodeList.prototype.forEach()`), it's oftentimes desirable to convert it to an array. When the spread operator is applied to it, the result is an array of the contained nodes:
+
+```js
+const nodes = document.childNodes;
+const nodeArray = [...nodes]; // [ <!DOCTYPE html>, html ]
+```
+
+Note that the above example is the basis for the [nodeListToArray snippet](js/s/node-list-to-array).
diff --git a/snippets/articles/s/javascript-iterators.md b/snippets/articles/s/javascript-iterators.md
new file mode 100644
index 000000000..b8d5cd7a9
--- /dev/null
+++ b/snippets/articles/s/javascript-iterators.md
@@ -0,0 +1,96 @@
+---
+title: What are JavaScript Iterators and where can I use them?
+shortTitle: JavaScript iterators introduction
+type: question
+language: javascript
+tags: [array,object,iterator]
+author: chalarangelo
+cover: balloons
+excerpt: Learn how JavaScript's iterators work and how you can use them to level up your projects by understanding these short code examples.
+dateModified: 2021-09-26T13:20:57+03:00
+---
+
+JavaScript iterators were introduced in ES6 and they are used to loop over a sequence of values, usually some sort of collection. By definition, an iterator must implement a `next()` function, that returns an object in the form of `{ value, done }` where `value` is the next value in the iteration sequence and `done` is a boolean determining if the sequence has already been consumed.
+
+A very simple iterator with practical use in a real-world project could be as follows:
+
+```js
+class LinkedList {
+  constructor(data) {
+    this.data = data;
+  }
+
+  firstItem() {
+    return this.data.find(i => i.head);
+  }
+
+  findById(id) {
+    return this.data.find(i => i.id === id);
+  }
+
+  [Symbol.iterator]() {
+    let item = { next: this.firstItem().id };
+    return {
+      next: () => {
+        item = this.findById(item.next);
+        if (item) {
+          return { value: item.value, done: false };
+        }
+        return { value: undefined, done: true };
+      },
+    };
+  }
+}
+
+const myList = new LinkedList([
+  { id: 'a10', value: 'First', next: 'a13', head: true },
+  { id: 'a11', value: 'Last', next: null, head: false },
+  { id: 'a12', value: 'Third', next: 'a11', head: false },
+  { id: 'a13', value: 'Second', next: 'a12', head: false },
+]);
+
+for (let item of myList) {
+  console.log(item); // 'First', 'Second', 'Third', 'Last'
+}
+```
+
+In the above example, we implement a [`LinkedList` data structure](/articles/s/js-data-structures-linked-list), that internally uses a `data` array. Each item in it has a `value` and some implementation-specific properties used to determine its position in the sequence. Objects constructed from this class are not iterable by default. To define an iterator we use `Symbol.iterator` and set it up so that the returned sequence is in order based on the internal implementation of the class, while the returned items only return their `value`.
+
+On a related note, iterators are just functions, meaning they can be called like any other function (e.g. to delegate the iteration to an existing iterator), while also not being restricted to the `Symbol.iterator` name. This allows us to define multiple iterators for the same object. Here's an example of these concepts at play:
+
+```js
+class SpecialList {
+  constructor(data) {
+    this.data = data;
+  }
+
+  [Symbol.iterator]() {
+    return this.data[Symbol.iterator]();
+  }
+
+  values() {
+    return this.data
+      .filter(i => i.complete)
+      .map(i => i.value)
+      [Symbol.iterator]();
+  }
+}
+
+const myList = new SpecialList([
+  { complete: true, value: 'Lorem ipsum' },
+  { complete: true, value: 'dolor sit amet' },
+  { complete: false },
+  { complete: true, value: 'adipiscing elit' },
+]);
+
+for (let item of myList) {
+  console.log(item); // The exact data passed to the SpecialList constructor above
+}
+
+for (let item of myList.values()) {
+  console.log(item); // 'Lorem ipsum', 'dolor sit amet', 'adipiscing elit'
+}
+```
+
+In this example, we use the native array iterator of the `data` object to make our `SpecialList` iterable, returning the exact values of the `data` array. Meanwhile, we also define a `values` method, which is an iterator itself, using `Array.prototype.filter()` and `Array.prototype.map()` on the `data` array. Finally, we return the `Symbol.iterator` of the result, allowing iteration only over non-empty objects in the sequence and returning just the `value` for each one.
+
diff --git a/snippets/articles/s/javascript-json-stringify-pick-keys.md b/snippets/articles/s/javascript-json-stringify-pick-keys.md
new file mode 100644
index 000000000..65db724a3
--- /dev/null
+++ b/snippets/articles/s/javascript-json-stringify-pick-keys.md
@@ -0,0 +1,58 @@
+---
+title: "Tip: Serialize specific properties from a JSON object"
+shortTitle: Selective property serialization
+type: tip
+language: javascript
+tags: [object,json]
+author: chalarangelo
+cover: coffee-drip
+excerpt: Have you ever wanted to serialize an object but only include certain keys? Turns out JavaScript provides an easy way to do this!
+dateModified: 2021-07-06T05:00:00-04:00
+---
+
+The default behavior for `JSON.stringify()` is to pull all serializable properties from the given object. However, there are many scenarios where you might want to pick a specific subset of keys from an object. This problem is handled by the second argument of `JSON.stringify()` by passing it either an array of keys or a replacer function.
+
+### Array of keys
+
+An array of keys allows you to pick specific keys to be included in the stringified version of the object. This is particularly useful when you know the exact shape of the serialized object you want.
+
+```js
+const user = {
+  id: 1234,
+  username: 'johnsmith',
+  name: 'John Smith',
+  age: 39
+};
+
+JSON.stringify(user, ['username', 'name']);
+// '{ "username": "johnsmith", "name": "John Smith" }'
+```
+
+### Replacer function
+
+A replacer function is more versatile than an array of keys and takes both the key and value as its arguments. Apart from using it to include or exclude keys, it can also be useful in altering the value of each key in the stringified representation of the object. In order for a key to be included in the output, the replacer function must return a serializable value (string, number, boolean, null or object).
+
+```js
+class Point {
+  constructor (x, y) {
+    this.x = x;
+    this. y = y;
+  }
+}
+
+const target = {
+  id: 1234,
+  location: new Point(10, 20),
+  name: 'Delivery point',
+};
+
+JSON.stringify(target, (key, value) => {
+  // Exclude id
+  if (key === 'id') return undefined;
+  // Convert location to an array of coordinates
+  if (value instanceof Point) return [value.x, value.y];
+  // Return other properties (i.e. name) without modification
+  return value;
+});
+// '{ "location": [10, 20], "name": "Delivery point" }'
+```
diff --git a/snippets/articles/s/javascript-listen-once.md b/snippets/articles/s/javascript-listen-once.md
new file mode 100644
index 000000000..b3cf0588f
--- /dev/null
+++ b/snippets/articles/s/javascript-listen-once.md
@@ -0,0 +1,62 @@
+---
+title: How can I execute an event handler at most once?
+shortTitle: Execute event handler only once
+type: question
+language: javascript
+tags: [browser,event]
+cover: dog-waiting
+excerpt: Learn how to attach an event handler to events that is executed at most once in this JavaScript article.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### jQuery
+
+Back in the day when jQuery was all the rage, we would usually use [`$.one()`](https://api.jquery.com/one/) to create an event handler that would execute at most once for a given event per element. A simple example would be as follows:
+
+```html
+<button id="my-btn">Click me!</button>
+```
+
+```js
+$('#my-btn').one('click', () => {
+  console.log('Hello!');  // 'Hello!' will only be logged on the first click
+});
+```
+
+### Using a flag
+
+However, jQuery seems to have fallen out of favor lately and thus many developers have resorted to writing their version of `$.one()`. An implementation could look like this:
+
+```js
+const listenOnce = (el, evt, fn) => {
+  let fired = false;
+  el.addEventListener(evt, (e) => {
+    if (!fired) fn(e);
+    fired = true;
+  });
+};
+
+listenOnce(
+  document.getElementById('my-btn'),
+  'click',
+  () => console.log('Hello!')
+);  // 'Hello!' will only be logged on the first click
+```
+
+In this implementation, we use a flag, `fired`, to check if the event has been triggered before and only execute the passed callback, `fn`, the first time the event is triggered. There are some details that we might have omitted such as removing the listener, but overall this is a reasonably solid implementation.
+
+### Event listener options
+
+If you are targeting modern browsers (i.e. not IE), [`EventTarget.addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) has introduced the `options` object parameter, which allows us to pass a few different flags, one of which is `once`. Setting `once` to `true` results in the exact same behavior as the snippet above with minimal effort.
+
+Here's one way to write the previous snippet using `once`, which also happens to be how we implemented the latest version of the [listenOnce snippet](/js/s/listen-once):
+
+```js
+const listenOnce = (el, evt, fn) => el.addEventListener(evt, fn, { once: true });
+
+listenOnce(
+  document.getElementById('my-btn'),
+  'click',
+  () => console.log('Hello!')
+);  // 'Hello!' will only be logged on the first click
+```
diff --git a/snippets/articles/s/javascript-make-iterable.md b/snippets/articles/s/javascript-make-iterable.md
new file mode 100644
index 000000000..700c6fb26
--- /dev/null
+++ b/snippets/articles/s/javascript-make-iterable.md
@@ -0,0 +1,34 @@
+---
+title: "Tip: Make any JavaScript value iterable"
+shortTitle: Make any value iterable
+type: tip
+language: javascript
+tags: [array,iterator,generator]
+author: chalarangelo
+cover: colorful-plastic
+excerpt: Did you know you can define an iterator for any JavaScript value? This quick tip will show you how.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+JavaScript's `Symbol.iterator` is a very powerful tool that every web developer should learn how to use. It allows you to define and customize the way a value is iterated, effectively allowing you to make any value iterable. You can easily apply this knowledge to plain JavaScript objects and even classes.
+
+All you need to correctly define an iterator is a generator function `yield`ing each of the iteration values. This could be used to retrieve key-value pairs in an object, call specific getter functions from a class or split a number into an array of digits:
+
+```js
+const obj = { a: 1, b: 2, c: 3 };
+
+obj[Symbol.iterator] = function* () {
+  for (let key of Object.keys(obj)) yield { [key]: obj[key] };
+};
+
+[...obj]; // [ { a: 1 }, { b: 2 }, { c: 3 }]
+
+class IterableNumber extends Number {
+  *[Symbol.iterator]() {
+    for (let digit of [...`${this}`].map(d => Number.parseInt(d))) yield digit;
+  }
+}
+
+const num = new IterableNumber(1337);
+[...num]; // [ 1, 3, 3, 7]
+```
diff --git a/snippets/articles/s/javascript-memoization.md b/snippets/articles/s/javascript-memoization.md
new file mode 100644
index 000000000..2e96cadbd
--- /dev/null
+++ b/snippets/articles/s/javascript-memoization.md
@@ -0,0 +1,69 @@
+---
+title: Where and how can I use memoization in JavaScript?
+shortTitle: Memoization introduction
+type: question
+language: javascript
+tags: [function,memoization]
+author: chalarangelo
+cover: cherry-trees
+excerpt: Learn different ways to memoize function calls in JavaScript as well as when to use memoization to get the best performance results.
+dateModified: 2021-11-07T16:34:37+03:00
+---
+
+Memoization is a commonly used technique that can help speed up your code significantly. This technique relies on a **cache** to store results for previously completed units of work. The purpose of the cache is to **avoid performing the same work more than once**, speeding up subsequent calls of time-consuming functions. Based on this definition, we can easily extract some criteria that can help us decide when to use memoization in our code:
+
+- Memoization is useful mainly in speeding up slow-performing, costly or time-consuming function calls
+- Memoization speeds up subsequent calls, so it's best used when you anticipate multiple calls of the same function under the same circumstances
+- Memoization stores results in memory, so it should be avoided when the same function is called multiple times under very different circumstances
+
+A simple, object-oriented example of implementing memoization could be as follows:
+
+```js
+class MyObject {
+  constructor(data) {
+    this.data = data;
+    this.data[this.data.length - 2] = { value: 'Non-empty' };
+  }
+
+  firstNonEmptyItem() {
+    return this.data.find(v => !!v.value);
+  }
+
+  firstNonEmptyItemMemo() {
+    if (!this.firstNonEmpty)
+      this.firstNonEmpty = this.data.find(v => !!v.value);
+    return this.firstNonEmpty;
+  }
+}
+
+const myObject = new MyObject(Array(2000).fill({ value: null }));
+
+for (let i = 0; i < 100; i ++)
+  myObject.firstNonEmptyItem();       // ~4000ms
+for (let i = 0; i < 100; i ++)
+  myObject.firstNonEmptyItemMemo();   // ~70ms
+```
+
+This example showcases a way to implement memoization inside a class. However, it makes a couple of assumptions. First, it's assumed that the `data` structure will not be altered over the lifecycle of the object. Seconds, it's assumed that this is the only expensive function call we will make, so the code is not reusable. The example also doesn't account for arguments being passed to the function, which would alter the result. A functional approach would work with any given function and also account for arguments. Such an approach can be seen in the form of the [memoize snippet](/js/s/memoize/), which uses a `Map` to store different values.
+
+We still recommend using that snippet as the primary way to memoize a function, however JavaScript's [Proxy object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) provides an interesting alternative via the use of the `handler.apply()` trap, which can be used for this purpose as follows:
+
+```js
+const memoize = fn => new Proxy(fn, {
+  cache: new Map(),
+  apply (target, thisArg, argsList) {
+    let cacheKey = argsList.toString();
+    if(!this.cache.has(cacheKey))
+      this.cache.set(cacheKey, target.apply(thisArg, argsList));
+    return this.cache.get(cacheKey);
+  }
+});
+
+const fibonacci = n => (n <= 1 ? 1 : fibonacci(n - 1) + fibonacci(n - 2));
+const memoizedFibonacci = memoize(fibonacci);
+
+for (let i = 0; i < 100; i ++)
+  fibonacci(30);                      // ~5000ms
+for (let i = 0; i < 100; i ++)
+  memoizedFibonacci(30);              // ~50ms
+```
diff --git a/snippets/articles/s/javascript-merge-arrays.md b/snippets/articles/s/javascript-merge-arrays.md
new file mode 100644
index 000000000..f80f16022
--- /dev/null
+++ b/snippets/articles/s/javascript-merge-arrays.md
@@ -0,0 +1,58 @@
+---
+title: How do I merge two arrays in JavaScript?
+shortTitle: Merge arrays
+type: question
+language: javascript
+tags: [array]
+author: chalarangelo
+cover: arrays
+excerpt: Arrays are one of the most used data types in any programming language. Learn how to merge two arrays in JavaScript with this short guide.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### Spread operator
+
+The [spread operator (`...`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) was introduced in ES6 and can be used to merge two or more arrays, by spreading each one inside a new array:
+
+```js
+const a = [1, 2, 3];
+const b = [4, 5, 6];
+
+const merged = [...a, ...b]; // [1, 2, 3, 4, 5, 6]
+```
+
+### Array.prototype.concat()
+
+[`Array.prototype.concat()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) is a method on the `Array` prototype and can be used to create a new array, either by concatenating both arrays to a new array or one array to the other. Both methods result in a new array, without mutating the original:
+
+```js
+const a = [1, 2, 3];
+const b = [4, 5, 6];
+
+const merged = [].concat(a, b); // [1, 2, 3, 4, 5, 6]
+// -- OR --
+const alsoMerged = a.concat(b); // [1, 2, 3, 4, 5, 6]
+```
+
+### Comparing the two
+
+The spread operator version is definitely shorter and as readable as the `Array.prototype.concat()` one. Apart from that, the spread operator seems to be slightly faster based on [some benchmarks I have performed](https://jsben.ch/9txyg) (as of **Aug, 2020 on Google Chrome 84** - this might or might not be the case in the future, as new optimizations land in different browsers).
+
+However, `Array.prototype.concat()` can deal with non-array values better than the spread operator can, which might be something to consider when merging values that you are not certain are arrays:
+
+```js
+const a = [1, 2, 3];
+const b = true;
+const c = 'hi';
+
+const spreadAb = [...a, ...b]; // Error: b is not iterable
+const spreadAc = [...a, ...c]; // [1, 2, 3, 'h', 'i'], wrong result
+// You should use [...a, b] and [...a, c] instead
+
+const concatAb = [].concat(a, b); // [1, 2, 3, true]
+const concatAb = [].concat(a, c); // [1, 2, 3, 'hi']
+```
+
+As you can see in the above example, the spread operator either throws an error or doesn't output the correct result when passed a non-iterable object. `Array.prototype.concat()` on the other hand has no trouble being passed mixed input.
+
+So what's the verdict? Use the spread operator (`...`) whenever you know your inputs are arrays, as it performs better and is easy to read and understand. Favor `Array.prototype.concat()` when you are uncertain of one or more of the inputs and do not want to add additional checks, as it handles those cases more gracefully.
diff --git a/snippets/articles/s/javascript-modify-url-without-reload.md b/snippets/articles/s/javascript-modify-url-without-reload.md
new file mode 100644
index 000000000..dcf4ab061
--- /dev/null
+++ b/snippets/articles/s/javascript-modify-url-without-reload.md
@@ -0,0 +1,50 @@
+---
+title: How do I use JavaScript to modify the URL without reloading the page?
+shortTitle: Modify URL without reloading
+type: question
+language: javascript
+tags: [browser]
+author: chalarangelo
+cover: compass
+excerpt: Learn all of the options JavaScript provides for modifying the URL of the current page in the browser without reloading the page.
+dateModified: 2021-09-27T16:47:49+03:00
+---
+
+### Using the History API
+
+The HTML5 [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) is definitely the way to go for modern websites. It accomplishes the task at hand, while also providing additional functionality. You can use either `history.pushState()` or `history.replaceState()` to modify the URL in the browser, depending on your needs:
+
+```js
+// Current URL: https://my-website.com/page_a
+const nextURL = 'https://my-website.com/page_b';
+const nextTitle = 'My new page title';
+const nextState = { additionalInformation: 'Updated the URL with JS' };
+
+// This will create a new entry in the browser's history, without reloading
+window.history.pushState(nextState, nextTitle, nextURL);
+
+// This will replace the current entry in the browser's history, without reloading
+window.history.replaceState(nextState, nextTitle, nextURL);
+```
+
+The arguments for both methods are the same, allowing you to pass a customized serializable `state` object as the first argument, a customized `title` (although most browsers will ignore this parameter) and the `URL` you want to add/replace in the browser's history. Bear in mind that the History API only allows same-origin URLs, so you cannot navigate to an entirely different website.
+
+### Using the Location API
+
+The older [Location API](https://developer.mozilla.org/en-US/docs/Web/API/Location) is not the best tool for the job. It reloads the page, but still allows you to modify the current URL and might be useful when working with legacy browsers. You can modify the URL, using either `Window.location.href`, `location.assign()` or `location.replace()`:
+
+```js
+// Current URL: https://my-website.com/page_a
+const nextURL = 'https://my-website.com/page_b';
+
+// This will create a new entry in the browser's history, reloading afterwards
+window.location.href = nextURL;
+
+// This will replace the current entry in the browser's history, reloading afterwards
+window.location.assign(nextURL);
+
+// This will replace the current entry in the browser's history, reloading afterwards
+window.location.replace(nextURL);
+```
+
+As you can see, all three options will cause a page reload, which can be undesirable. Unlike the History API, you can only set the URL, without any additional arguments. Finally, the Location API doesn't restrict you to same-origin URLs, which can cause security issues if you are not careful.
diff --git a/snippets/articles/s/javascript-module-cheatsheet.md b/snippets/articles/s/javascript-module-cheatsheet.md
new file mode 100644
index 000000000..472afbebf
--- /dev/null
+++ b/snippets/articles/s/javascript-module-cheatsheet.md
@@ -0,0 +1,140 @@
+---
+title: JavaScript modules Cheat Sheet
+type: cheatsheet
+language: javascript
+tags: [cheatsheet]
+author: chalarangelo
+cover: mountain-lake-2
+excerpt: Learn everything you need to know about JavaScript modules with this handy cheatsheet.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### Named exports
+
+```js
+/* environment.js */
+export const key = 'this-is-a-secret';
+
+/* index.js */
+import { key } from 'environment';
+```
+
+- Named exports use a name.
+- A module can have any number of named exports.
+- Import and export name should be the same.
+- Importing requires `{}`.
+
+### Default exports
+
+```js
+/* environment.js */
+const environment = {
+  key: 'this-is-a-secret',
+  port: 8000
+};
+
+export default environment;
+/* index.js */
+import environment from 'environment';
+
+const { key, port } = environment;
+```
+
+- Default exports expose a default value, use the `default` keyword.
+- A module can only have one default export.
+- Import name can be anything.
+- Importing does not require `{}`.
+
+### Default + named
+
+```js
+/* environment.js */
+export const envType = 'DEV';
+
+const environment = {
+  key: 'this-is-a-secret',
+  port: 8000
+};
+
+export default environment;
+
+/* index.js */
+import { envType }, environment from 'environment';
+
+const { key, port } = environment;
+```
+
+- Default and named exports can be mixed.
+- Rules about number of exports and naming conventions apply as before.
+- Import rules apply as before, can be mixed if necessary.
+
+### Export list
+
+```js
+/* environment.js */
+const key = 'this-is-a-secret';
+const port = 8000;
+
+export {
+  key,
+  port
+};
+
+/* index.js */
+import { key, port } from 'environment';
+```
+
+- An export list is a compact way to write multiple named exports.
+- Rules about number of exports, naming conventions and import rules are the same as those of named exports.
+- Export lists are not objects.
+
+### Rename export
+
+```js
+/* environment.js */
+const key = 'this-is-a-secret';
+
+export { key as authKey };
+
+/* index.js */
+import { authKey } from 'environment';
+```
+
+- Named exports can make use of the `as` keyword to rename an export.
+- Import name should be the same as the renamed export.
+
+### Rename import
+
+```js
+/* environment.js */
+export const key = 'this-is-a-secret';
+
+/* index.js */
+import { key as authKey } from 'environment';
+```
+
+- Named imports can make use of the `as` keyword to rename an import.
+- Import name (before the `as` keyword) should be the same as the export.
+
+### Import all
+
+```js
+/* environment.js */
+export const envType = 'DEV';
+
+const environment = {
+  key: 'this-is-a-secret',
+  port: 8000
+};
+
+export default environment;
+
+/* index.js */
+import * as env from 'environment';
+
+const { default: { key, port}, envType } = environment;
+```
+
+- Use `*` to import everything a module exports.
+- Named exports will be available by their names on the imported object.
+- Default export will be available as the `default` key on the imported object.
diff --git a/snippets/articles/s/javascript-naming-conventions.md b/snippets/articles/s/javascript-naming-conventions.md
new file mode 100644
index 000000000..cba9aaf57
--- /dev/null
+++ b/snippets/articles/s/javascript-naming-conventions.md
@@ -0,0 +1,44 @@
+---
+title: JavaScript naming conventions
+shortTitle: Naming conventions
+type: story
+language: javascript
+tags: [variable,cheatsheet]
+author: chalarangelo
+cover: naming-conventions
+excerpt: Naming conventions make code easier to read and understand. Learn how to name your variables in JavaScript with this handy guide.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### Variables
+
+- Names are case-sensitive, lowercase and uppercase are different.
+- Start variable names with a letter, use `camelCase` for names.
+- Variable names should be self-descriptive, describing the stored value.
+- Boolean variables are usually prefixed with `is` or `has`.
+
+### Functions
+
+- Names are case-sensitive, lowercase and uppercase are different.
+- Start function names with a letter, use `camelCase` for names.
+- Use descriptive names, usually verbs in the imperative form.
+- Common prefixes are `get`, `make`, `apply` etc.
+- Class methods follow the same rules.
+
+### Constant
+
+- Names are case-sensitive, lowercase and uppercase are different.
+- Define constants at the top of your file, function or class.
+- Sometimes `UPPER_SNAKE_CASE` is used, while other times plain `camelCase`.
+
+### Classes
+
+- Names are case-sensitive, lowercase and uppercase are different.
+- Start class names with a capital letter, use `PascalCase` for names.
+- Use descriptive names, explaining the functionality of the class.
+- Components, which are used in frontend frameworks follow the same rules.
+
+### Private
+
+- Prefix any variable or function with `_` to show intention for it to be private.
+- As a convention, this will not prevent other parts of the code from accessing it.
diff --git a/snippets/articles/s/javascript-nullish-coalescing-optional-chaining.md b/snippets/articles/s/javascript-nullish-coalescing-optional-chaining.md
new file mode 100644
index 000000000..92b0869fe
--- /dev/null
+++ b/snippets/articles/s/javascript-nullish-coalescing-optional-chaining.md
@@ -0,0 +1,59 @@
+---
+title: How can I use optional chaining and nullish coalescing in my JavaScript project?
+shortTitle: Optional chaining and nullish coalescing
+type: question
+language: javascript
+tags: [type]
+author: chalarangelo
+cover: purple-leaves
+excerpt: JavaScript ES2020 introduced optional chaining and nullish coalescing. Learn everything you need to know with this quick guide.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+JavaScript ES2020 introduced some new features that help us write cleaner code. Let's take a quick look at two of them that aim to make working with objects and variables a lot easier.
+
+### Optional chaining
+
+The [optional chaining operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) (`?.`) allows us to access deeply nested object properties without having to validate each reference in the nesting chain. In case of a reference being nullish (`null` or `undefined`) the optional chaining operator will short-circuit, returning `undefined`. The optional chaining operator can also be used with function calls, returning `undefined` if the given function does not exist.
+
+The resulting code is shorter and simpler, as you can see below:
+
+```js
+const data = getDataFromMyAPI();
+
+// Without optional chaining
+const userName = data && data.user && data.user.name;
+const userType = data && data.user && data.user.type;
+data && data.showNotifications && data.showNotifications();
+
+// With optional chaining
+const userName = data?.user?.name;
+const userType = data?.user?.type;
+data.showNotifications?.();
+```
+
+### Nullish coalescing
+
+In the same spirit, the [nullish coalescing operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) (`??`) is a logical operator that allows us to check for nullish (`null` or `undefined`) values, returning the right-hand side operand when the value is non-nullish, otherwise returning the left-hand side operand.
+
+Apart from cleaner code, this operator might spare us some headaches related to falsy values:
+
+```js
+const config = getServerConfig();
+
+// Without nullish coalescing
+const port = config.server.port || 8888;
+// Oops! This will be true even if we pass it false
+const wrongkeepAlive = config.server.keepAlive || true;
+// We'll have to explicitly check for nullish values
+const keepAlive =
+  (config.server.keepAlive !== null & config.server.keepAlive !== undefined)
+  ? config.server.keepAlive : true;
+
+// With nullish coalescing
+const port = config.server.port ?? 8888;
+// This works correctly
+const keepAlive = config.server.keepAlive ?? true;
+```
+
+**Note:** Keep in mind that both features are quite new, so their support might not be great just yet (around 80% at the time of writing [[1]](https://caniuse.com/#feat=mdn-javascript_operators_optional_chaining)[[2]](https://caniuse.com/#feat=mdn-javascript_operators_nullish_coalescing)).
diff --git a/snippets/articles/s/javascript-numeric-separator.md b/snippets/articles/s/javascript-numeric-separator.md
new file mode 100644
index 000000000..0651f1ab2
--- /dev/null
+++ b/snippets/articles/s/javascript-numeric-separator.md
@@ -0,0 +1,31 @@
+---
+title: JavaScript's numeric separators explained
+shortTitle: Numeric separators explained
+type: story
+language: javascript
+tags: [math,type]
+author: chalarangelo
+cover: coffee-drip
+excerpt: Numeric separators are a somewhat lesser-known JavaScript syntactic sugar that can make working with large constants a lot easier.
+dateModified: 2021-06-27T05:00:00-04:00
+---
+
+Numeric separators are a lesser-known JavaScript syntactic sugar that can make working with numeric constants a lot easier. The long and short of it is that you can add underscores (`_`) to numeric values to make them more readable.
+
+The idea of separating large numeric values with a special character might sound familiar on account of it being a syntax present in multiple other languages, such as Java, Python, Ruby etc. From what I can tell, numeric separators are at their best when creating shared constants that will not change and are very large, have many repeated digits and/or can be ambiguous.
+
+Apart from readability, numeric separators don't really offer anything else. For the sceptics among us that don't really see a lot of readability value either, I'd like to show two rather convincing sample cases:
+
+```js
+// How many zeroes is that? Millions? Billions? Trillions?
+const msInOneYear = 31536000000;
+// Is this 4,200 or 42.00 (in cents)?
+const price = 4200;
+
+// Ok, this is approximately 31.5 billion
+const msInOneYear = 31_536_000_000;
+// Based on the separator, this should be 42.00 (cents)
+const price = 42_00;
+```
+
+Finally, as far as caveats go, you only need to remember that numbers cannot start or end with a numeric separator and that you can't have two or more numeric separators in a row.
diff --git a/snippets/articles/s/javascript-object-array-proxy.md b/snippets/articles/s/javascript-object-array-proxy.md
new file mode 100644
index 000000000..dd3bbb078
--- /dev/null
+++ b/snippets/articles/s/javascript-object-array-proxy.md
@@ -0,0 +1,125 @@
+---
+title: Can I use an object as an array without modifying it in JavaScript?
+shortTitle: Object as array
+type: question
+language: javascript
+tags: [object,array,proxy,iterator,pattern]
+author: chalarangelo
+cover: birds
+excerpt: Learn how you can leverage the Proxy object to use a JavaScript object the same way as you would use a regular array.
+dateModified: 2021-09-27T16:42:11+03:00
+---
+
+The other day, I stumbled upon some code where I needed to handle an object as a regular array a few times. This was, of course, achievable using `Object.keys()`, `Object.values()` or `Object.entries()`, but it started getting verbose real quick.
+
+So I thought I could create some kind of wrapper that would take an object and define some array-like behavior for it. I was mainly in need of `Array.prototype.map()`, `Array.prototype.find()`, `Array.prototype.includes()` and `Array.prototype.length`. All of this functionality was pretty straightforward to create using  `Object` methods. The only tricky part, so to speak, was getting the object to behave as an iterable, which required using the `Symbol.iterator` and a generator function.
+
+Injecting the new functionality into an object could be as simple as adding the methods to it. The downside of this approach is that they would be part of the actual object, which can be problematic. It also doesn't help that this is not very reusable if we want to apply this over a handful of objects.
+
+Enter the [Proxy object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), one of the lesser known tools in a JavaScript developer's tool belt, yet a very powerful one. It's used to intercept certain operations for an object, such as property lookup, assignment etc. In this scenario, it can neatly wrap the required functionality into a function that creates a proxy around the object.
+
+The final code, long as it may be, can be seen in the example below. It implements the functionality I needed, as well as a handful more `Array` methods for good measure:
+
+```js
+const toKeyedArray = obj => {
+  const methods = {
+    map(target) {
+      return callback =>
+        Object.keys(target).map(key => callback(target[key], key, target));
+    },
+    reduce(target) {
+      return (callback, accumulator) =>
+        Object.keys(target).reduce(
+          (acc, key) => callback(acc, target[key], key, target),
+          accumulator
+        );
+    },
+    forEach(target) {
+      return callback =>
+        Object.keys(target).forEach(key => callback(target[key], key, target));
+    },
+    filter(target) {
+      return callback =>
+        Object.keys(target).reduce((acc, key) => {
+          if (callback(target[key], key, target)) acc[key] = target[key];
+          return acc;
+        }, {});
+    },
+    slice(target) {
+      return (start, end) => Object.values(target).slice(start, end);
+    },
+    find(target) {
+      return callback => {
+        return (Object.entries(target).find(([key, value]) =>
+          callback(value, key, target)
+        ) || [])[0];
+      };
+    },
+    findKey(target) {
+      return callback =>
+        Object.keys(target).find(key => callback(target[key], key, target));
+    },
+    includes(target) {
+      return val => Object.values(target).includes(val);
+    },
+    keyOf(target) {
+      return value =>
+        Object.keys(target).find(key => target[key] === value) || null;
+    },
+    lastKeyOf(target) {
+      return value =>
+        Object.keys(target)
+          .reverse()
+          .find(key => target[key] === value) || null;
+    },
+  };
+  const methodKeys = Object.keys(methods);
+
+  const handler = {
+    get(target, prop, receiver) {
+      if (methodKeys.includes(prop)) return methods[prop](...arguments);
+      const [keys, values] = [Object.keys(target), Object.values(target)];
+      if (prop === 'length') return keys.length;
+      if (prop === 'keys') return keys;
+      if (prop === 'values') return values;
+      if (prop === Symbol.iterator)
+        return function* () {
+          for (value of values) yield value;
+          return;
+        };
+      else return Reflect.get(...arguments);
+    },
+  };
+
+  return new Proxy(obj, handler);
+};
+
+// Object creation
+const x = toKeyedArray({ a: 'A', b: 'B' });
+
+// Accessing properties and values
+x.a;          // 'A'
+x.keys;       // ['a', 'b']
+x.values;     // ['A', 'B']
+[...x];       // ['A', 'B']
+x.length;     // 2
+
+// Inserting values
+x.c = 'c';    // x = { a: 'A', b: 'B', c: 'c' }
+x.length;     // 3
+
+// Array methods
+x.forEach((v, i) => console.log(`${i}: ${v}`)); // LOGS: 'a: A', 'b: B', 'c: c'
+x.map((v, i) => i + v);                         // ['aA', 'bB, 'cc]
+x.filter((v, i) => v !== 'B');                  // { a: 'A', c: 'c' }
+x.reduce((a, v, i) => ({ ...a, [v]: i }), {}); 	// { A: 'a', B: 'b', c: 'c' }
+x.slice(0, 2);                                  // ['A', 'B']
+x.slice(-1);                                    // ['c']
+x.find((v, i) => v === i);                      // 'c'
+x.findKey((v, i) => v === 'B');                 // 'b'
+x.includes('c');                                // true
+x.includes('d');                                // false
+x.keyOf('B');                                   // 'b'
+x.keyOf('a');                                   // null
+x.lastKeyOf('c');                               // 'c'
+```
diff --git a/snippets/articles/s/javascript-object-comparison.md b/snippets/articles/s/javascript-object-comparison.md
new file mode 100644
index 000000000..187037bf4
--- /dev/null
+++ b/snippets/articles/s/javascript-object-comparison.md
@@ -0,0 +1,70 @@
+---
+title: How do I compare two objects in JavaScript?
+shortTitle: Object comparison
+type: question
+language: javascript
+tags: [object,comparison]
+author: chalarangelo
+cover: blue-lake
+excerpt: Learn how you can compare two objects in JavaScript using various different techniques.
+dateModified: 2021-09-26T05:00:00-04:00
+---
+
+### Equality comparison
+
+Even though two different objects can have the same properties with equal values, they are not considered equal when compared using either the loose or strict equality operators (`==` or `===`). This is because arrays and objects in JavaScript are compared by reference. This is unlike primitive values which are compared by value.
+
+```js
+const a = { name: 'John', age: 26 };
+const b = { name: 'John', age: 26 };
+
+a === b; // false
+```
+
+### JSON.stringify
+
+`JSON.stringify()` often comes up as the solution to this problem. While it can be useful in some situations, comparing the serialized strings can have its own pitfalls. The most common of these has to do with similar, but not equal, values that result in the same serialized string.
+
+```js
+const equals = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+
+const a = { name: 'John', age: 26 };
+const b = { name: 'John', age: 26 };
+
+equals(a, b); // true
+
+const c = { name: 'John' };
+const d = { name: 'John', age: undefined };
+
+equals(c, d); // true, should be false
+```
+
+### Deep equality comparison
+
+As it turns out, comparing two objects is not trivial. This is the reason why shallow or deep equality comparison helper functions are so common. These usually use recursion to deeply compare two objects, accounting for most scenarios such as empty values, special types and nesting.
+
+```js
+const equals = (a, b) => {
+  if (a === b) return true;
+  if (a instanceof Date && b instanceof Date)
+    return a.getTime() === b.getTime();
+  if (!a || !b || (typeof a !== 'object' && typeof b !== 'object'))
+    return a === b;
+  if (a.prototype !== b.prototype) return false;
+  const keys = Object.keys(a);
+  if (keys.length !== Object.keys(b).length) return false;
+  return keys.every(k => equals(a[k], b[k]));
+};
+
+const a = { name: 'John', age: 26 };
+const b = { name: 'John', age: 26 };
+
+equals(a, b); // true
+
+const c = { name: 'John' };
+const d = { name: 'John', age: undefined };
+
+equals(c, d); // false
+```
+
+The above helper function handles all of these issues and is explained in more depth in the [equals snippet](/js/s/equals).
diff --git a/snippets/articles/s/javascript-object-is-triple-equals.md b/snippets/articles/s/javascript-object-is-triple-equals.md
new file mode 100644
index 000000000..eb879bfa5
--- /dev/null
+++ b/snippets/articles/s/javascript-object-is-triple-equals.md
@@ -0,0 +1,31 @@
+---
+title: What's the difference between Object.is() and the triple equals operator in JavaScript?
+shortTitle: Object.is() vs triple equals operator
+type: question
+language: javascript
+tags: [object,type]
+author: chalarangelo
+cover: rocky-mountains
+excerpt: "`Object.is()` and the triple equals operator (`===`) can both be used for equality checking in JavaScript, but when should you use each one?"
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+If you want to check equality in JavaScript, there are two comparison operators, which are explained in depth in a previous [article](/blog/s/javascript-equality).
+
+Very briefly, the double equals operator (`==`) only compares value whereas the triple equals operator (`===`) compares both value and type. But there is also a third option, `Object.is()`, which behaves the same as the triple equals operator with the exception of `NaN` and `+0` and `-0`.
+
+Here are some examples for additional clarity:
+
+```js
+{} === {}; // false
+Object.is({}, {}); // false
+
+1 === 1; // true
+Object.is(1, 1); // true
+
++0 === -0; // true
+Object.is(+0, -0); // false
+
+NaN === NaN; // false
+Object.is(NaN, NaN); // true
+```
diff --git a/snippets/articles/s/javascript-pass-by-reference-or-pass-by-value.md b/snippets/articles/s/javascript-pass-by-reference-or-pass-by-value.md
new file mode 100644
index 000000000..a9a6de07c
--- /dev/null
+++ b/snippets/articles/s/javascript-pass-by-reference-or-pass-by-value.md
@@ -0,0 +1,40 @@
+---
+title: Is JavaScript pass-by-value or pass-by-reference?
+shortTitle: Pass-by-value or pass-by-reference
+type: question
+language: javascript
+tags: [function,object]
+author: chalarangelo
+cover: baloons-field
+excerpt: How JavaScript handles passing data is a source of confusion and bugs for many developers, especially when it comes to object types.
+dateModified: 2021-12-05T05:00:00-04:00
+---
+
+JavaScript is always **pass-by-value**. This means everything in JavaScript is a value type and function arguments are always passed by value. That being said, object types are a bit more confusing.
+
+The confusion lies in the fact that **object types are reference types** which are passed by value. As weird as this sounds, a reference to an object is passed to a function by value. The subtle difference here lies in the fact that an object reference passed by value is not the same as passing an object by reference.
+
+Simply put, changes to the object inside the function will affect the original object, as they both refer to the same object. However, reassigning the value of the variable holding the object originally will not affect the object referenced by the function. Let me demonstrate this with an example:
+
+```js
+let myObj = { a: 1 };
+const myFunc = obj => {
+  obj.a++;
+  return obj;
+}
+let otherObj = myFunc(myObj);
+
+myObj;                  // { a: 2 }
+otherObj;               // { a: 2 }
+myObj === otherObj;     // true
+
+myObj = { a: 4, b: 0 };
+
+myObj;                  // { a: 4, b: 0 }
+otherObj;               // { a: 2 }
+myObj === otherObj;     // false
+```
+
+In this example, `myObj` is a plain JavaScript object, passed as an argument to `myFunc`. The `obj` argument inside `myFunc` is a reference to the same object, `myObj`. Any changes made to `obj` affect `myObj`, as they are the exact same object. This means that assigning the result (`obj`) of the function call to another variable, `otherObj`, will pass the same reference to the variable. The result is that both `myObj` and `otherObj` reference the same object value.
+
+Reassigning `myObj` to a new object value does not affect `otherObj` at all. `otherObj` still references the original object. If JavaScript was pass-by-reference, reassigning `myObj` would affect `otherObj`, which is clearly not the case.
diff --git a/snippets/articles/s/javascript-prefix-postfix-operators.md b/snippets/articles/s/javascript-prefix-postfix-operators.md
new file mode 100644
index 000000000..2dfa92a20
--- /dev/null
+++ b/snippets/articles/s/javascript-prefix-postfix-operators.md
@@ -0,0 +1,29 @@
+---
+title: What is the difference between prefix and postfix operators?
+shortTitle: Prefix and postfix operators
+type: question
+language: javascript
+tags: [math]
+author: chalarangelo
+cover: plant-candle
+excerpt: While both the prefix and postfix operators increment a value, the resulting value of the expression is very different.
+dateModified: 2021-10-31T05:00:00-04:00
+---
+
+The increment operator (`++`) adds `1` to its operand and returns a value. Similarly, the decrement operator (`--`) subtracts `1` from its operand and returns a value. Both of these operators can be used either prefix (`++i`, `--i`) or postfix (`i++`, `i--`).
+
+If used prefix, the value is incremented/decremented, and the value of the expression is the updated value.
+
+```js
+let i = 0;    // i = 0
+let j = ++i;  // i = 1, j = 1
+let k = --i;  // i = 0, k = 0
+```
+
+If used postfix, the value is incremented/decremented, and the value of the expression is the original value.
+
+```js
+let i = 0;    // i = 0
+let j = i++;  // i = 1, j = 0
+let k = i--;  // i = 0, k = 1
+```
diff --git a/snippets/articles/s/javascript-pretty-print-json.md b/snippets/articles/s/javascript-pretty-print-json.md
new file mode 100644
index 000000000..7a5e44a9f
--- /dev/null
+++ b/snippets/articles/s/javascript-pretty-print-json.md
@@ -0,0 +1,59 @@
+---
+title: "Tip: Pretty-print a JSON object with JavaScript"
+shortTitle: Pretty-print JSON
+type: tip
+language: javascript
+tags: [object,json]
+author: chalarangelo
+cover: memories-of-pineapple-3
+excerpt: Pretty-printing JSON objects in pretty easy and customizable in JavaScript. Here's the gist of it.
+dateModified: 2022-07-30T05:00:00-04:00
+---
+
+Pretty-printing refers to the process of making some data more human-readable. In regards to JSON, it's primarily the process of indenting the data so that it is easier to read. This is pretty easy to accomplish, using `JSON.stringify()` with the appropriate arguments.
+
+```js
+const obj = {
+  id: 1182,
+  username: 'johnsmith',
+  active: true,
+  emails: ['johnsmith@mysite.com', 'contact@johnsmi.th'],
+};
+
+JSON.stringify(obj, null, 2);
+// {
+//   "id": 1182,
+//   "username": "johnsmith",
+//   "active": true,
+//   "emails": [
+//     "johnsmith@mysite.com"
+//     "contact@johnsmi.th"
+//   ]
+// }
+```
+
+As you can see in this example, the third argument of `JSON.stringify()` is the number of spaces to indent each level of the object. Additionally, you can use the second argument to specify a replacer function. This can come in handy if you want to provide custom formatting for certain types of values or specific key-value pairs.
+
+```js
+const obj = {
+  id: 1182,
+  username: 'johnsmith',
+  active: true,
+  emails: ['johnsmith@mysite.com', 'contact@johnsmi.th'],
+};
+
+const replacer = (key, value) => {
+  if (key === 'id') return value.toString(16);
+  if (key === 'username') return `@${value}`;
+  if (key === 'emails') return `${value[0]} +${value.length - 1} more`;
+  return value;
+};
+
+JSON.stringify(obj, replacer, 2);
+// {
+//   "id": "0x4e2",
+//   "username": "@johnsmith",
+//   "active": true,
+//   "emails": "johnsmith@mysite.com +1 more"
+// }
+```
diff --git a/snippets/articles/s/javascript-prevent-string-being-escaped.md b/snippets/articles/s/javascript-prevent-string-being-escaped.md
new file mode 100644
index 000000000..52fd60f16
--- /dev/null
+++ b/snippets/articles/s/javascript-prevent-string-being-escaped.md
@@ -0,0 +1,19 @@
+---
+title: "Tip: Prevent a string from being escaped in JavaScript"
+shortTitle: Prevent string escaping
+type: tip
+language: javascript
+tags: [string]
+author: chalarangelo
+cover: glass-blowing
+excerpt: Strings in JavaScript can be escaped in various ways. But how do you prevent a string from being escaped? Here's a handy trick for that.
+dateModified: 2021-06-17T12:00:00+03:00
+---
+
+By default, when JavaScript sees an escape character (`\`), it will escape the character after it. However, there are cases where you might not want this behavior (e.g. when you want to store a Windows path as a string). For these cases, you can use a template literal and the `String.raw()` tag function:
+
+```js
+const path = `C:\web\index.html`; // 'C:web.html'
+
+const unescapedPath = String.raw`C:\web\index.html`; // 'C:\web\index.html'
+```
diff --git a/snippets/articles/s/javascript-primitive-instanceof.md b/snippets/articles/s/javascript-primitive-instanceof.md
new file mode 100644
index 000000000..7cf2987e9
--- /dev/null
+++ b/snippets/articles/s/javascript-primitive-instanceof.md
@@ -0,0 +1,52 @@
+---
+title: Is there a way to use instanceof for primitive JavaScript values?
+shortTitle: Using instanceof for primitive values
+type: question
+language: javascript
+tags: [type]
+author: chalarangelo
+cover: wooden-bowl
+excerpt: JavaScript's `instanceof` operator can't be used with primitive values, but there are a some tricks that you can leverage to your advantage.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+JavaScript provides two operators for typechecking:
+
+- `typeof` is used to typecheck for primitive values
+- `instanceof` is used to typecheck for class instances
+
+Primitive values can't leverage the `instanceof` operator, which is a bit of a letdown. To make matters worse, JavaScript's built-in objects such as `Boolean`, `String` and `Number` can only be used with `instanceof` to check for instances created using the corresponding constructor. Moreover, `typeof` has a few quirks that further complicate matters, such as `typeof null` returning `'object'`.
+
+Yet, there's still hope to use `instanceof` for primitive values. [`Symbol.hasInstance`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance) allows us to customize the behavior of the `instanceof` operator. But, in order to do that, we need to define a `class` for each primitive type. Here's what this looks like:
+
+```js
+class PrimitiveNumber {
+  static [Symbol.hasInstance] = x  => typeof x === 'number';
+}
+123 instanceof PrimitiveNumber; // true
+
+class PrimitiveString {
+  static [Symbol.hasInstance] = x => typeof x === 'string';
+}
+'abc' instanceof PrimitiveString; // true
+
+class PrimitiveBoolean {
+  static [Symbol.hasInstance] = x => typeof x === 'boolean';
+}
+false instanceof PrimitiveBoolean; // true
+
+class PrimitiveSymbol {
+  static [Symbol.hasInstance] = x => typeof x === 'symbol';
+}
+Symbol.iterator instanceof PrimitiveSymbol; // true
+
+class PrimitiveNull {
+  static [Symbol.hasInstance] = x => x === null;
+}
+null instanceof PrimitiveNull; // true
+
+class PrimitiveUndefined {
+  static [Symbol.hasInstance] = x => x === undefined;
+}
+undefined instanceof PrimitiveUndefined; // true
+```
diff --git a/snippets/articles/s/javascript-promise-then-catch.md b/snippets/articles/s/javascript-promise-then-catch.md
new file mode 100644
index 000000000..925479055
--- /dev/null
+++ b/snippets/articles/s/javascript-promise-then-catch.md
@@ -0,0 +1,26 @@
+---
+title: "Tip: The order of then and catch matters"
+shortTitle: The order of then and catch matters
+type: tip
+language: javascript
+tags: [function,promise]
+author: chalarangelo
+cover: blue-sunrise
+excerpt: Messing up the order of chained `then` and `catch` methods in JavaScript promises can cause problems. Here's a short primer on the subject.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Many if not most promise-related headaches come from incorrectly ordered `Promise.prototype.then()` and `Promise.prototype.catch()` methods. The order in which these methods are chained to a promise can lead to very different behaviors. Let's take a look at a very simple example:
+
+```js
+const myPromise = () => Promise.reject('Oops!');
+const logger = data => console.log(data);
+const identity = data => data;
+
+myPromise().catch(identity).then(logger); // LOGS: Oops!
+myPromise().then(logger).catch(identity); // Nothing is logged
+```
+
+As you can see from this example, swapping the `catch()` and `then()` methods results in entirely different behavior, even though the promise has the same result. This is due to the fact that each chained method will result itself in a promise. This means that the first one will pass its result to the second, the second to the third and so on and so forth. While this might seem obvious when looking at an example like this one, many times it's overlooked and can result in hard to debug issues. This is especially true when the promise chain is long and complicated.
+
+So, next time you are working with promises, try to think of `then()` and `catch()` methods in terms of promise chaining and remember that order matters!
diff --git a/snippets/articles/s/javascript-promise-then-finally.md b/snippets/articles/s/javascript-promise-then-finally.md
new file mode 100644
index 000000000..59d85df9a
--- /dev/null
+++ b/snippets/articles/s/javascript-promise-then-finally.md
@@ -0,0 +1,47 @@
+---
+title: What is the difference between then and finally in a JavaScript promise?
+shortTitle: Promise then vs finally
+type: question
+language: javascript
+tags: [function,promise]
+author: chalarangelo
+cover: blue-sunrise
+excerpt: A JavaScript promise's `then` and `finally` methods seem very similar. But there are a few important differences you need to keep in mind.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+On the surface, `Promise.prototype.then()` and `Promise.prototype.finally()` seem very similar. But there are a few important differences you need to keep in mind.
+
+The first and most obvious one is that `finally()` doesn't receive the resulting value of the promise chain. On the same note, as no value is received by `finally()`, the resolved value of the promise can't be changed as well.
+
+```js
+new Promise((resolve, reject) => resolve(10))
+  .then(x => {
+    console.log(x); // 10
+    return x + 1;
+  })
+  .finally(x => {
+    console.log(x); // undefined
+    return x + 2;
+  });
+// Promise resolves to 11, the return value of then()
+```
+
+Another difference is related to error handling and how the promise chain is resolved. Sometimes, you might want to defer catching an error in the promise chain, allowing you to handle them elsewhere. In this case, a chained `then()` will not be executed, whereas `finally()` will. Moreover, if a previous `catch()` throws, you end up in the same situation.
+
+```js
+new Promise((resolve, reject) => reject(0))
+  .catch(x => {
+    console.log(x); // 0
+    throw x;
+  })
+  .then(x => {
+    console.log(x); // Will not run
+  })
+  .finally(() => {
+    console.log('clean up'); // 'clean up'
+  });
+// Uncaught (in promise) 0
+```
+
+The takeaway here is that you shouldn't substitute `then()` and `finally()` unless there is a very specific reason to do so. As a rule of thumb, `finally()` should be used for cleaning up (clearing timeouts, nulling references, resetting UI state etc.).
diff --git a/snippets/articles/s/javascript-promises.md b/snippets/articles/s/javascript-promises.md
new file mode 100644
index 000000000..19d98a8dc
--- /dev/null
+++ b/snippets/articles/s/javascript-promises.md
@@ -0,0 +1,30 @@
+---
+title: What are promises in JavaScript? In which states can a promise be?
+shortTitle: Promises introduction
+type: question
+language: javascript
+tags: [function,promise]
+author: chalarangelo
+cover: sail-away
+excerpt: JavaScript's promises represent the eventual completion (or failure) of asynchronous operations and their resulting value.
+dateModified: 2021-10-24T05:00:00-04:00
+---
+
+The `Promise` object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. A common example of using promises would be fetching data from a URL. This would create a `Promise` object that represents the data we expect to receive. For example:
+
+```js
+fetch('https://my.api.com/items/1')
+  .catch(err => console.log(`Failed with error: ${err}`))
+  .then(response => response.json())
+  .then(json => console.log(json));
+```
+
+The tricky part about promises is understanding that the resulting value may not initially be available. Instead, the promise can be in one of three states:
+
+- **Pending:** initial state, neither fulfilled nor rejected.
+- **Fulfilled:** meaning that the operation was completed successfully.
+- **Rejected:** meaning that the operation failed.
+
+A pending `Promise` can either be fulfilled with a value or rejected with a reason (error). When either of these happens, the associated handlers (`Promise.prototype.then()`, `Promise.prototype.catch()`) are called.
+
+In the previous example, the `Promise` starts in a pending state, until a response from the server is received. If anything goes wrong during that time, the `Promise` will be rejected and the `Promise.prototype.catch()` handler will log the error to the console. Otherwise, the `Promise` will be fulfilled and the first `Promise.prototype.then()` handler will execute, returning itself a new `Promise`. The new promise will be fulfilled and call the second `Promise.prototype.then()` handler to log the parsed JSON data to the console.
diff --git a/snippets/articles/s/javascript-property-enumerability.md b/snippets/articles/s/javascript-property-enumerability.md
new file mode 100644
index 000000000..018ada4f2
--- /dev/null
+++ b/snippets/articles/s/javascript-property-enumerability.md
@@ -0,0 +1,38 @@
+---
+title: JavaScript property enumerability
+shortTitle: Property enumerability
+type: story
+language: javascript
+tags: [object]
+author: chalarangelo
+cover: old-consoles
+excerpt: Property enumerability dictates how JavaScript object properties behave in different scenarios.
+dateModified: 2022-09-11T05:00:00-04:00
+---
+
+In most cases, object properties are enumerable by default, unless they are Symbols. This means that you can use the `for...in` loop to iterate over the properties of an object. Similarly, enumerable properties appear in object methods that enumerate the properties of an object. An example of this is the `Object.keys()` method, which will omit properties that are not enumerable. Finally, when using the object spread operator (`...`), only enumerable properties are copied to the new object.
+
+```js
+const person = {
+  name: 'John',
+  surname: 'Doe',
+  age: 30,
+  socialSecurityNumber: '123-45-6789',
+};
+
+Object.defineProperty(person, 'socialSecurityNumber', {
+  enumerable: false,
+});
+
+person.hasOwnProperty('socialSecurityNumber'); // true
+person.propertyIsEnumerable('socialSecurityNumber'); // false
+
+Object.keys(person); // ['name', 'surname', 'age']
+Object.getOwnPropertyNames(person);
+// ['name', 'surname', 'age', 'socialSecurityNumber']
+
+const clone = { ...person };
+clone.socialSecurityNumber; // undefined
+```
+
+To create a non-enumerable property, you can use `Object.defineProperty()` with the appropriate descriptor. You can check for the property's existence, using `Object.prototype.hasOwnProperty()` and for its enumerability, using `Object.prototype.propertyIsEnumerable()`. Additionally, in contrast to Symbols, non-enumerable properties will show up when using `Object.getOwnPropertyNames()`.
diff --git a/snippets/articles/s/javascript-pure-functions.md b/snippets/articles/s/javascript-pure-functions.md
new file mode 100644
index 000000000..43adb6218
--- /dev/null
+++ b/snippets/articles/s/javascript-pure-functions.md
@@ -0,0 +1,36 @@
+---
+title: What is a pure function?
+shortTitle: Pure function introduction
+type: question
+language: javascript
+tags: [function]
+author: chalarangelo
+cover: dark-leaves
+excerpt: Pure functions are a very important concept to know, especially if you're interested in functional programming.
+dateModified: 2021-12-19T05:00:00-04:00
+---
+
+Pure functions are one of the most important concepts to learn and understand, especially if you're interested in functional programming.
+
+A pure function is a function that satisfies the following two conditions:
+
+- Given the same input, it always returns the same output.
+- Causes no side effects outside the function's scope.
+
+Let's look at some examples of pure and impure functions:
+
+```js
+// Pure
+const add = (x, y) => x + y;
+const concat = (arr, value) => [...arr, value];
+const order = arr => [...arr].sort((a, b) => a - b);
+
+// Impure
+const addRandom = x => x + Math.random();
+const pushConcat = (arr, value) => { arr.push(value); return arr; }
+const reorder = arr => arr.sort((a, b) => a - b);
+```
+
+Understanding if a function is pure or impure is generally pretty easy. An easy trick to tell if a function is impure is if it makes sense to call it without using its return value or if it doesn't return any. These usually indicate that a function causes side effects.
+
+Pure functions are more reliable and reusable, which in turn makes them easier to reason about. It's usually preferable to use a pure function over an impure one if constraints allow it.
diff --git a/snippets/articles/s/javascript-query-selector-shorthand.md b/snippets/articles/s/javascript-query-selector-shorthand.md
new file mode 100644
index 000000000..de2ae6028
--- /dev/null
+++ b/snippets/articles/s/javascript-query-selector-shorthand.md
@@ -0,0 +1,21 @@
+---
+title: "Tip: Create your own query selector shorthand"
+shortTitle: Query selector shorthand
+type: tip
+language: javascript
+tags: [browser]
+author: chalarangelo
+cover: pineapple-at-work
+excerpt: Ever wanted to create your own jquery-like query selector shorthand? Here's how!
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Most of us are familiar with jquery and probably quite a few of us are familiar with the Chrome console's `$` and `$$` shorthands for query selectors. I recently figured out a way to replicate these shorthands in my code, using `Document.querySelector()`, `Document.querySelectorAll()` and `Function.prototype.bind()`. Here's how to do it, just make sure you don't mix them up with jquery if you are still using it:
+
+```js
+const $ = document.querySelector.bind(document);
+const $$ = document.querySelectorAll.bind(document);
+
+const mainContent = $('.main-content');
+const externalLinks = $$('a[target="_blank"]');
+```
diff --git a/snippets/articles/s/javascript-random-value-pure-functions.md b/snippets/articles/s/javascript-random-value-pure-functions.md
new file mode 100644
index 000000000..2964aa255
--- /dev/null
+++ b/snippets/articles/s/javascript-random-value-pure-functions.md
@@ -0,0 +1,33 @@
+---
+title: Using random values with pure functions
+shortTitle: Pure functions & randomness
+type: story
+language: javascript
+tags: [function,random,testing]
+author: chalarangelo
+cover: do-more-computer
+excerpt: Randomness and pure functions don't seem to go hand in hand. But where there's a will, there's a way.
+dateModified: 2022-06-19T05:00:00-04:00
+---
+
+Working with random values can create code that's hard to test. Usually, the remedy to such issues is to use [pure functions](/articles/javascript-pure-functions). A pure function is a function that always returns the same value given the same input. As they do not have side effects and their return value is predictable, testing pure functions is much easier.
+
+```js
+// An impure function that returns a random value
+const getNumber = (min = 0, max = 1) =>
+  Math.max(Math.min(Math.random(), max), min);
+```
+
+From the definition alone, pure functions and random values don't sound very compatible. After all, randomness inherently means unpredictability. The naive approach would be to move the randomness outside of the function and pass the generated value as an argument to it. This would only hide the issue without fixing it let alone require a lot of refactoring to work.
+
+The approach to use the function's arguments is on the right track, though. The key is that function arguments can be omitted, allowing us to specify default values for them. This allows us to pass a random value as an argument to the function, and the function will use the default value if the argument is omitted.
+
+But how can we actually pass a random value as a default argument to a function? Luckily for us, JavaScript defers evaluation of function arguments to the time of function invocation. This means that we can use `Math.random()` to generate a random value, and pass it as the default argument to the function.
+
+```js
+// A pure function that returns a random value
+const getNumber = (min = 0, max = 1, num = Math.random()) =>
+  Math.max(Math.min(num, max), min);
+```
+
+By making this simple change, you can avoid a lot of headaches for you and your team. Using a function such as `Math.random()` as the default argument will require minimal refactoring and make your code easier to test.
diff --git a/snippets/articles/s/javascript-range-generator.md b/snippets/articles/s/javascript-range-generator.md
new file mode 100644
index 000000000..a9e9f8711
--- /dev/null
+++ b/snippets/articles/s/javascript-range-generator.md
@@ -0,0 +1,68 @@
+---
+title: Using JavaScript generator functions for ranges
+shortTitle: Generator functions for ranges
+type: story
+language: javascript
+tags: [function,array]
+author: chalarangelo
+cover: generator
+excerpt: Learn how to use JavaScript ES6 generators and iterators to iterate over ranges of numbers.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### Generator functions
+
+[JavaScript ES6 generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*) allow you to define functions that can be exited and later re-entered, while retaining their context (variable bindings). They are defined using `function*` (`function` keyword followed by an asterisk) and use `yield` expressions to return their result. For example:
+
+```js
+function* generateRange(end, start = 0, step = 1) {
+  let x = start - step;
+  while(x < end - step) yield x += step;
+}
+
+const gen5 = generateRange(5);
+let x = gen5.next();
+
+while (!x.done) {
+  console.log(x.value);
+  x = gen5.next();
+} // Logs: 0, 1, 2, 3, 4
+```
+
+In the above example, we define a generator function, `generateRange`, which will return each value between `start` and `end`, incrementing by `step` each time. We use the [generator object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator) to call `Generator.prototype.next()` until it returns `{value: undefined, done: true}` to iterate over the values the generator produces.
+
+### Symbol.iterator
+
+[`Symbol.iterator`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator) specifies the default iterator for an object. Oftentimes, `Symbol.iterator` is implemented using a generator function. For example:
+
+```js
+const iterableXx = {
+  [Symbol.iterator]: function* () {
+    yield 1;
+    yield 2;
+  }
+};
+
+console.log([...iterableX]); // [1, 2]
+```
+
+As you can see in this example, the object is made iterable by assigning a generator function to its `Symbol.iterator` property. This can come especially handy, if you want to iterate over some arbitrary data or create an object that is iterable and uses a generator function under the hood.
+
+### Putting it all together
+
+Knowing how both concepts work, we can combine them to create a range generator, similar to Python or Ruby's ranges:
+
+```js
+const range = (end, start = 0, step = 1) => {
+  function* generateRange() {
+    let x = start - step;
+    while(x < end - step) yield x += step;
+  }
+  return {
+    [Symbol.iterator]: generateRange
+  };
+}
+
+console.log([...range(7)]); // [0, 1, 2, 3, 4, 5, 6]
+for (let i of range(8, 2, 2)) console.log(i); // Logs: 2, 4, 6
+```
diff --git a/snippets/articles/s/javascript-recursion.md b/snippets/articles/s/javascript-recursion.md
new file mode 100644
index 000000000..6a18caded
--- /dev/null
+++ b/snippets/articles/s/javascript-recursion.md
@@ -0,0 +1,28 @@
+---
+title: What is recursion and when is it useful?
+shortTitle: Recursion introduction
+type: question
+language: javascript
+tags: [function,recursion]
+author: chalarangelo
+cover: curve
+excerpt: Recursion is a very important programming concept all developers should be familiar with.
+dateModified: 2022-01-23T05:00:00-04:00
+---
+
+Recursion is the **repeated application of a process**. In JavaScript, recursion involves functions that call themselves repeatedly until they reach a base case. The base case breaks out of the recursion loop, thus allowing previous calls to the function to return a result. If no such case exists, the function will call itself indefinitely resulting in a stack overflow.
+
+Recursion is used to solve problems where the solution depends on solutions to smaller instances of the same problem. A commonly-used example of a problem that can be solved recursively is the Fibonacci sequence:
+
+```js
+const fibonacci = n => {
+  if (n <= 1) return n;
+  return fibonacci(n - 1) + fibonacci(n - 2);
+};
+
+fibonacci(6); // 8
+```
+
+The base case for this example is `n` being less than or equal to `1`, where the function returns the value of `n`. Any other value will call the `fibonacci` function twice to compute the values of `n - 1` and `n - 2`. These will in turn call the `fibonacci` function again until the base case is reached.
+
+While the Fibonacci sequence can be solved with recursion, it can be more efficient to solve it using iteration. However, the inverse is true for a lot of other problems where identifying and indexing the sub-problems is difficult or costly.
diff --git a/snippets/articles/s/javascript-reload-page.md b/snippets/articles/s/javascript-reload-page.md
new file mode 100644
index 000000000..09a0caceb
--- /dev/null
+++ b/snippets/articles/s/javascript-reload-page.md
@@ -0,0 +1,47 @@
+---
+title: How can I use JavaScript to reload the page?
+shortTitle: Reload page
+type: story
+language: javascript
+tags: [browser]
+author: chalarangelo
+cover: night-tram
+excerpt: Need to reload the current page using JavaScript? Here's the best way to do it, as well as some alternatives.
+dateModified: 2023-05-14T05:00:00-04:00
+---
+
+### The short answer
+
+Most often than not, `window.location.reload()` is all you need to reload the current page. This method behaves exactly like the **browser's reload button**, using the same cache rules and everything.
+
+```js
+// Reload the page
+window.location.reload();
+```
+
+### The slightly longer answer
+
+While `window.location.reload()` is the most common way to reload a page, there are some nuances that you might need to be aware of.
+
+As stated already, compatibility shouldn't be an issue, so we're not going to delve into that. However, there's a notable oddity concerning the method's arguments. As it turns out, **Firefox** used to support an optional `forceGet` boolean argument, which you might come across in older code. This means that passing a value of `true` to the method would bypass the **browser's cache**.
+
+```js
+// Bypass cache in Firefox
+window.location.reload(true);
+```
+
+Apart from that, `window.location.reload()` will reload the page **keeping POST data** in forms, which might not be desired. In those situations, you might want to assign `window.location.href` to itself to cause a reload. This will cause the page to reload, but will also clear the POST data.
+
+```js
+// Clear POST data
+window.location.href = window.location.href;
+```
+
+This technique also comes with some caveats. For example, if the current **URL contains a hash**, the page won't reload. In this case, you might want to use `String.prototype.split()` to remove the hash from the URL and then assign it to itself.
+
+```js
+// Reload the page, removing the hash from the URL
+window.location.href = window.location.href.split('#')[0];
+```
+
+As you can see, each technique has its pros and cons, so you should choose the one that best suits your needs. That being said, `window.location.reload()` is the most common and reliable way to reload a page, so it's the one you should use most of the time.
diff --git a/snippets/articles/s/javascript-remove-object-property.md b/snippets/articles/s/javascript-remove-object-property.md
new file mode 100644
index 000000000..3cb5badd9
--- /dev/null
+++ b/snippets/articles/s/javascript-remove-object-property.md
@@ -0,0 +1,62 @@
+---
+title: How do I remove a property from a JavaScript object?
+shortTitle: Remove property from object
+type: question
+language: javascript
+tags: [object]
+author: chalarangelo
+cover: brown-bird
+excerpt: Ever wanted to delete a property from a JavaScript object? Here are a few way you can accomplish that.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+When working with objects in JavaScript, you might come across situations where a property should be completely removed from an object. To accomplish that, there a few options you have at your disposal:
+
+### Set the property to undefined
+
+Setting a property to `undefined` isn't generally optimal, as the property itself will still be present in the object, albeit `undefined`. It also mutates the original object, which might be undesired. You might want to use this in cases where you check for the property's value or truthiness but not its presence.
+
+```js
+const pet = {
+  species: 'dog',
+  age: 3,
+  name: 'celeste',
+  gender: 'female'
+};
+
+pet.gender = undefined;
+Object.keys(pet); // ['species', 'age', 'name', 'gender']
+```
+
+### Use the delete operator
+
+The `delete` operator is technically the correct way to remove a property from a JavaScript object. Unlike the previous option, `delete` will completely remove the property from the object, but it will still cause a mutation.
+
+```js
+const pet = {
+  species: 'dog',
+  age: 3,
+  name: 'celeste',
+  gender: 'female'
+};
+
+delete pet.gender;
+Object.keys(pet); // ['species', 'age', 'name']
+```
+
+### Use object destructuring
+
+Using the spread syntax, (`...`), you can destructure and assign the object with specific properties omitted to a new object. This trick comes in handy especially if you want to remove a subset of properties instead of just one and has the added benefit of not mutating the original object.
+
+```js
+const pet = {
+  species: 'dog',
+  age: 3,
+  name: 'celeste',
+  gender: 'female'
+};
+
+const { gender, ...newPet } = pet;
+Object.keys(pet); // ['species', 'age', 'name', 'gender]
+Object.keys(newPet); // ['species', 'age', 'name']
+```
diff --git a/snippets/articles/s/javascript-return-constructor.md b/snippets/articles/s/javascript-return-constructor.md
new file mode 100644
index 000000000..df0f8cbf5
--- /dev/null
+++ b/snippets/articles/s/javascript-return-constructor.md
@@ -0,0 +1,59 @@
+---
+title: What does a JavaScript constructor return?
+shortTitle: Constructor return value
+type: question
+language: javascript
+tags: [function,class,object]
+author: chalarangelo
+cover: architectural
+excerpt: The constructor is a crucial part of any JavaScript class, which is why you might want to take a closer look at what they return.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+The `constructor` method is a special method of a class for creating and initializing an object of that class. However, there is a little bit of magic involved around it, especially when it comes to its return value. This magic is nothing really complicated, but it seems to often confuse developers.
+
+Typically, when your constructor is invoked with `new`, an object is created, its constructor is assigned to the invoked constructor and the object is then assigned to `this` before executing any operations specified in your constructor method. Once the code is executed, the constructor will return:
+
+- Any valid `return` value, valid being only `object` values.
+- The `this` object if there is no `return` statement executed with a valid value.
+
+Let's look at some examples to better understand what's going on:
+
+```js
+class SimpleClass {
+  constructor() {
+    this.val = 0;
+  }
+}
+new SimpleClass(); // { val: 0 }
+
+class MyClass {
+  constructor() {
+    this.val = 0;
+    return { a: 1, b: 2 };
+  }
+}
+new MyClass(); // { a: 1, b : 2 }
+```
+
+The first example above shows the default behavior of a constructor, returning its `this` object if nothing else is specified. And the second one shows how a constructor can return an object different from `this`, using `return`. Note here that the use-case for such a constructor is usually a class which is implemented as a singleton or manages the number of its instances or similar.
+
+```js
+class VerboseClass {
+  constructor() {
+    this.val = 0;
+    return this;
+  }
+}
+new VerboseClass(); // { val: 0 }
+
+class PrimClass {
+  constructor() {
+    this.val = 0;
+    return 20;
+  }
+}
+new PrimitiveClass();  // { val: 0 }
+```
+
+The two examples above are not optimal, each for a different reason. The first one is too verbose, as the `this` object is returned implicitly by the constructor anyways, so there is no reason to explicitly write `return this`. On the other hand, the second example doesn't return the `return` statement's value, as it isn't an `object`, therefore resulting in the constructor returning the `this` object instead. This might lead to a lot of confusion, so you should definitely avoid it.
diff --git a/snippets/articles/s/javascript-shallow-deep-clone.md b/snippets/articles/s/javascript-shallow-deep-clone.md
new file mode 100644
index 000000000..688dada85
--- /dev/null
+++ b/snippets/articles/s/javascript-shallow-deep-clone.md
@@ -0,0 +1,52 @@
+---
+title: How do I clone an object in JavaScript?
+shortTitle: Object cloning
+type: question
+language: javascript
+tags: [object]
+author: chalarangelo
+cover: pagodas
+excerpt: Learn how JavaScript handles mutable data, such as objects and arrays, and understand how shallow cloning and deep cloning work.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+JavaScript's primitive data types, such as numbers, strings, null, undefined and booleans are immutable, meaning their value cannot change once created. However, **objects and arrays are mutable**, allowing their value to be altered after creation. What this means in practice is that primitives are passed by value, whereas objects and arrays are **passed by reference**. Consider the following example:
+
+```js
+let str = 'Hello';
+let copy = str;
+copy = 'Hi';
+// str = 'Hello', copy = 'Hi'
+
+let obj = { a: 1, b: 2 };
+let objCopy = obj;
+objCopy.b = 4;
+// obj = { a: 1, b: 4}, objCopy = { a: 1, b: 4 }
+```
+
+What happens in the of `obj` is that the object is passed by reference to `objCopy`, therefore changing the value of one of the variables also affects the other one. `objCopy` is effectively an alias referencing the same object. We can remedy this issue by cloning the object, using a variety of techniques such as the spread operator (`...`) or `Object.assign()` with an empty object:
+
+```js
+let obj = { a: 1, b: 2};
+let clone = { ...obj };
+clone.b = 4;
+// obj = { a: 1, b: 2}, clone = { a: 1, b: 4 }
+
+let otherClone = Object.assign({}, obj);
+otherClone.b = 6;
+clone.b = 4;
+// obj = { a: 1, b: 2}, otherClone = { a: 1, b: 6 }
+```
+
+Both of these solutions showcase an example of **shallow cloning**, as they will work for the outer (shallow) object, but fail if we have nested (deep) objects which will ultimately be passed by reference. As usual, there are a few approaches to this problem, the simpler of which is using `JSON.stringify()` and `JSON.parse()` to deal with the situation:
+
+```js
+let obj = { a: 1, b: { c: 2 } };
+let clone = JSON.parse(JSON.stringify(obj));
+clone.b.c = 4;
+// obj = { a: 1, b: { c: 2 }}, clone = { a: 1, b: { c: 4 } }
+```
+
+While the above example works, it has to serialize and deserialize the whole object, which can significantly impact the performance of your code, so it might not be appropriate for larger objects or in projects where performance is important.
+
+Alternatively, you can use a recursive function that deep clones an object and is a lot faster, such as the one in the [deepClone snippet](/js/s/deep-clone). Similarly, if you want a ready-to-use shallow cloning function, you can find one in the [shallowClone snippet](/js/s/shallow-clone).
diff --git a/snippets/articles/s/javascript-singleton-proxy.md b/snippets/articles/s/javascript-singleton-proxy.md
new file mode 100644
index 000000000..fb2c4cfac
--- /dev/null
+++ b/snippets/articles/s/javascript-singleton-proxy.md
@@ -0,0 +1,55 @@
+---
+title: How can I implement a singleton in JavaScript?
+shortTitle: Singleton implementation
+type: question
+language: javascript
+tags: [object,proxy,pattern]
+author: chalarangelo
+cover: obelisk
+excerpt: Learn how to implement the singleton design pattern in JavaScript, using the Proxy object.
+dateModified: 2021-09-28T20:11:55+03:00
+---
+
+A singleton is an **object-oriented software design pattern** which ensures a given class is only ever instantiated once. It can be useful in many different situations, such as creating global objects shared across an application. While JavaScript supports object-oriented programming, it doesn't provide many simple options to implement this pattern.
+
+The most flexible, albeit somewhat advanced, approach involves using the [Proxy object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). The Proxy object is used to define so-called traps. Traps are methods that allow the definition of custom behavior for certain operations such as property lookup, assignment etc. The singleton pattern dictates that the given class can only have one instance. This means that the most useful trap is `handler.construct()`, the trap for the `new` operator.
+
+Turns out the `handler` is itself just an object. Apart from `handler.constructor()`, we can use the handler to store the unique instance of the class we want and if it has been instantiated. In doing so, we can create a handler object that can be reused for any class we want to convert into a singleton, while also allowing us to provide additional traps for any other operations we might want to customize.
+
+Here's the most basic version of a function that takes a `class` and converts it into a singleton, based on the above explanation:
+
+```js
+const singletonify = (className) => {
+  return new Proxy(className.prototype.constructor, {
+    instance: null,
+    construct: (target, argumentsList) => {
+      if (!this.instance)
+        this.instance = new target(...argumentsList);
+      return this.instance;
+    }
+  });
+}
+```
+
+And here is a simple practical example to better understand what it does:
+
+```js
+class MyClass {
+  constructor(msg) {
+    this.msg = msg;
+  }
+
+  printMsg() {
+    console.log(this.msg);
+  }
+}
+
+MySingletonClass = singletonify(MyClass);
+
+const myObj = new MySingletonClass('first');
+myObj.printMsg();           // 'first'
+const myObj2 = new MySingletonClass('second');
+myObj2.printMsg();           // 'first'
+```
+
+In the above example, you can see that the second time `MySingletonClass` is instantiated, nothing happens. This is due to the fact that an instance already exists, so it is returned instead of a new object being created. As mentioned, this is a bare-bones implementation of a `singletonify` function. It can be extended to modify the behavior further or use some of the data passed to the constructor in later calls to update the `instance` it holds.
diff --git a/snippets/articles/s/javascript-sleep.md b/snippets/articles/s/javascript-sleep.md
new file mode 100644
index 000000000..635fb44bc
--- /dev/null
+++ b/snippets/articles/s/javascript-sleep.md
@@ -0,0 +1,65 @@
+---
+title: How can I implement a sleep function in JavaScript?
+shortTitle: Sleep function
+type: question
+language: javascript
+tags: [date,promise]
+author: chalarangelo
+cover: sleepy-cat
+excerpt: Learn all the different ways you can implement a `sleep()` function in JavaScript.
+dateModified: 2021-11-06T20:51:47+03:00
+---
+
+JavaScript does not come with a `sleep()` function out of the box. That's probably a good idea considering the environments where it runs and the trouble it could cause if used incorrectly. The closest equivalent is the `setTimeout()` function, but there are other, less common ways to implement a function that will pause execution for a specified amount of time.
+
+### setTimeout
+
+JavaScript's `setTimeout()` sets a timer which executes some code once the timer expires. Only the code inside the `setTimeout()` callback will execute after the timer expires. This can lead to nesting issues, as well as code executing out of order if you are not careful.
+
+```js
+const printNums = () => {
+  console.log(1);
+  setTimeout(() => console.log(2), 500);
+  console.log(3);
+};
+
+printNums(); // Logs: 1, 3, 2 (2 logs after 500ms)
+```
+
+### Synchronous version
+
+While strongly discouraged, `Date.prototype.getTime()` can be used inside a `while` loop to pause execution for a set amount of time. You can easily define a synchronous `sleep()` function like this:
+
+```js
+const sleepSync = (ms) => {
+  const end = new Date().getTime() + ms;
+  while (new Date().getTime() < end) { /* do nothing */ }
+}
+
+const printNums = () => {
+  console.log(1);
+  sleepSync(500);
+  console.log(2);
+  console.log(3);
+};
+
+printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)
+```
+
+### Asynchronous version
+
+A less intrusive way to go about implementing a `sleep()` function is to utilize the `async` and `await` keywords added in JavaScript ES6, a `Promise` and `setTimeout()`. Note that the resulting function must be executed in an `async` function and has to be called with `await`:
+
+```js
+const sleep = (ms) =>
+  new Promise(resolve => setTimeout(resolve, ms));
+
+const printNums = async() => {
+  console.log(1);
+  await sleep(500);
+  console.log(2);
+  console.log(3);
+};
+
+printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)
+```
diff --git a/snippets/articles/s/javascript-spread-rest-syntax.md b/snippets/articles/s/javascript-spread-rest-syntax.md
new file mode 100644
index 000000000..87f60164d
--- /dev/null
+++ b/snippets/articles/s/javascript-spread-rest-syntax.md
@@ -0,0 +1,55 @@
+---
+title: Understanding the spread and rest syntax in Javascript
+shortTitle: Spread and rest syntax
+type: story
+language: javascript
+tags: [array,function]
+author: chalarangelo
+cover: antelope
+excerpt: JavaScript ES6 introduced us to powerful new features, such as the spread and rest syntax. Learn all you need to know in this quick guide.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### Spread syntax
+
+The spread operator (`...`) allows you to expand a single array into its values. Some common use-cases for the spread operator include:
+
+- Expanding an array's values to pass them as arguments to a function that does not accept an array.
+- Cloning an array by spreading its values into a new array (`[]`).
+- Concatenating arrays by spreading them into a new array (`[]`).
+- Flattening an array of arrays one level, by spreading nested arrays.
+- Converting a non-array iterable (e.g. a string or a `Set`) to an array.
+
+```js
+// Array's values as arguments
+const a = [1, 2, 3];
+Math.max(...a); // 3
+
+// Clone an array
+const b = [4, 5, 6];
+const c = [...b]; // c = [4, 5, 6], b !== c
+
+// Concatenate two arrays
+const d = [...a, ...b]; // d = [1, 2, 3, 4, 5, 6]
+
+// Flatten an array
+const e = [[1, 2], [3, 4]];
+const f = [...e[0], ...e[1]]; // f = [1, 2, 3, 4]
+
+// Convert iterable to array
+const g = [...'hello']; // g = ['h', 'e', 'l', 'l', 'o']
+```
+
+### Rest syntax
+
+The rest parameter syntax allows you to collapse any remaining arguments into an array. While it looks very similar to the spread operator, the rest parameter syntax is only used in function declarations (arrow or otherwise).
+
+```js
+// Rest parameter syntax, not to be confused with the spread operator
+const fn = (str, ...nums) => `${str}_${nums.join('')}`;
+fn('hi', 1, 2, 3); // 'hi_123', `nums` will be [1, 2, 3]
+
+const data = [4, 5, 6];
+// Spread operator, expanding the array
+fn('hey', ...data); // 'hey_456', `nums` will be [4, 5, 6]
+```
diff --git a/snippets/articles/s/javascript-store-dom-items.md b/snippets/articles/s/javascript-store-dom-items.md
new file mode 100644
index 000000000..01f50b672
--- /dev/null
+++ b/snippets/articles/s/javascript-store-dom-items.md
@@ -0,0 +1,28 @@
+---
+title: "Tip: Minimize DOM access"
+shortTitle: Minimize DOM access
+type: tip
+language: javascript
+tags: [browser]
+author: chalarangelo
+cover: armchair
+excerpt: Increase your JavaScript code's performance when working with the DOM by leveraging this simple trick.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+DOM operations, including accessing the DOM, are generally slow. This is usually not a problem until you have to perform many DOM operations and your JavaScript application's performance starts to suffer. A very quick trick to increase performance is to store DOM elements or their values in local variables if you plan to access them multiple times.
+
+```js
+// This is slow, it accesses the DOM element multiple times
+document.querySelector('#my-element').classList.add('my-class');
+document.querySelector('#my-element').textContent = 'hello';
+document.querySelector('#my-element').hidden = false;
+
+// This is faster, it stores the DOM element in a variable
+const myElement = document.querySelector('#my-element');
+myElement.classList.add('my-class');
+myElement.textContent = 'hello';
+myElement.hidden = false;
+```
+
+Note that, while this trick may come in handy, it comes with the caveat that if you later remove the DOM element and you still have it stored in a variable, the variable should be set to `null` to avoid potential memory leaks.
diff --git a/snippets/articles/s/javascript-string-contains-substring.md b/snippets/articles/s/javascript-string-contains-substring.md
new file mode 100644
index 000000000..e9ad28ad7
--- /dev/null
+++ b/snippets/articles/s/javascript-string-contains-substring.md
@@ -0,0 +1,41 @@
+---
+title: Check if a string contains a substring in JavaScript
+shortTitle: String contains substring
+type: story
+language: javascript
+tags: [string]
+author: chalarangelo
+cover: sea-view-2
+excerpt: Let's have a look at how to check if a string contains a substring in JavaScript.
+dateModified: 2022-07-27T05:00:00-04:00
+---
+
+### String.prototype.includes()
+
+The most straightforward substring search option is `String.prototype.includes()`, introduced in ES6. It's a simple method that returns a boolean value depending on whether the string contains the substring or not.
+
+```js
+const str = 'Hello world';
+str.includes('world'); // true
+str.includes('foo'); // false
+```
+
+### String.prototype.indexOf()
+
+Another option is `String.prototype.indexOf()`, which can be preferable if you need to support legacy browsers. As this methods returns the index of the first occurrence of the substring, you need to compare it to `-1` to know if the substring was found or not.
+
+```js
+const str = 'Hello world';
+str.indexOf('world') !== -1; // true
+str.indexOf('foo') !== -1; // false
+```
+
+### Case-insensitive substring search
+
+Both methods presented so far are case-sensitive. If you need to search for a substring that is case-insensitive, you can use `String.prototype.toLowerCase()` to convert both strings to lowercase. Then you can compare them, using any of the previous methods.
+
+```js
+const str = 'Hello world';
+const token = 'WORLD';
+str.toLowerCase().includes(token.toLowerCase()); // true
+```
diff --git a/snippets/articles/s/javascript-string-immutability.md b/snippets/articles/s/javascript-string-immutability.md
new file mode 100644
index 000000000..697742dcf
--- /dev/null
+++ b/snippets/articles/s/javascript-string-immutability.md
@@ -0,0 +1,21 @@
+---
+title: Are JavaScript strings immutable?
+shortTitle: String immutability
+type: question
+language: javascript
+tags: [string,type]
+author: chalarangelo
+cover: purple-sunset
+excerpt: When it comes to immutability, JavaScript strings are often a source of confusion. Yet they're not as complicated as you might expect.
+dateModified: 2021-10-10T05:00:00-04:00
+---
+
+String specifications among programming languages vary, however most languages treat them as reference types. But strings in JavaScript are different. They are **immutable primitives**. This means that the characters within them may not be changed and that any operations on strings actually create new strings.
+
+```js
+const x = 'type';
+x[1] = 'a';       // Nothing happens, doesn't throw an error
+console.log(x);   // LOGS: 'type'
+```
+
+It helps to think of strings in the way that we think of numbers, if we are to better understand how they work. Numeric values are also immutable primitives. If, for example, you could mutate numbers, you could change the meaning of the value `42` to be another number, say `13`. In the same sense, you cannot mutate a string with a value of `gem` to make it `gym`.
diff --git a/snippets/articles/s/javascript-string-to-boolean.md b/snippets/articles/s/javascript-string-to-boolean.md
new file mode 100644
index 000000000..d4c5d05fa
--- /dev/null
+++ b/snippets/articles/s/javascript-string-to-boolean.md
@@ -0,0 +1,35 @@
+---
+title: "Tip: Convert a string to a boolean"
+shortTitle: String to boolean
+type: tip
+language: javascript
+tags: [string,boolean,type]
+author: chalarangelo
+cover: two-cities
+excerpt: Have you ever tried to convert the string representation of a boolean to an actual boolean value? Here's a simple way to do it.
+dateModified: 2022-09-14T05:00:00-04:00
+---
+
+Sometimes, one might run into the problem of converting the string representation of a value into the value itself. This is often straightforward, such as with numeric values. However, string representations of boolean values can be a bit trickier.
+
+This issue arises due to the fact that any non-empty string is considered truthy in JavaScript. On top of that, strings can have different capitalization or whitespace, making it harder to compare them directly to a constant.
+
+To counteract this, it's often a good idea to use a couple of transformations, namely `String.prototype.toLowerCase()` and `String.prototype.trim()`, to make the string representation of the value more consistent. Additionally, an array of acceptable values might make it easier to perform the conversion in certain cases.
+
+```js
+const toBoolean = (value, truthyValues = ['true']) => {
+  const normalizedValue = String(value).toLowerCase().trim();
+  return truthyValues.includes(normalizedValue);
+};
+
+toBoolean('true'); // true
+toBoolean('TRUE'); // true
+toBoolean('True'); // true
+toBoolean('tRue '); // true
+toBoolean('false'); // false
+toBoolean('FALSE'); // false
+toBoolean('False'); // false
+toBoolean('fAlse '); // false
+toBoolean('YES', ['yes']); // true
+toBoolean('no', ['yes']); // false
+```
diff --git a/snippets/articles/s/javascript-swap-two-variables.md b/snippets/articles/s/javascript-swap-two-variables.md
new file mode 100644
index 000000000..cb499d707
--- /dev/null
+++ b/snippets/articles/s/javascript-swap-two-variables.md
@@ -0,0 +1,38 @@
+---
+title: "Tip: How to swap two variables in JavaScript"
+shortTitle: Swap two variables
+type: tip
+language: javascript
+tags: [variables]
+author: chalarangelo
+cover: mountain-lake-2
+excerpt: Learn how to swap the values of two variables in JavaScript using a single line of ES6 code.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+In the past, swapping the values of two variables in JavaScript required an intermediate variable to store one of the values while swapping, which would result in something similar to this:
+
+```js
+let a = 10;
+let b = 20;
+
+let tmp;
+tmp = a;
+a = b;
+b = tmp;
+```
+
+While this approach still works, there are more elegant and less verbose options available to us nowadays. For example, JavaScript ES6 introduced **destructuring assignments**, allowing individual array items to be assigned to variables in a single statement. Here's what that looks like:
+
+```js
+const [x, y] = [1, 2];
+```
+
+Destructuring assignments are extremely useful in a handful of situations, including swapping two variables. To accomplish this, we can create an array from the two variables, then use a destructuring assignment to reassign them to each other:
+
+```js
+let a = 10;
+let b = 20;
+
+[a , b] = [b, a];
+```
diff --git a/snippets/articles/s/javascript-switch-object.md b/snippets/articles/s/javascript-switch-object.md
new file mode 100644
index 000000000..4ddf70798
--- /dev/null
+++ b/snippets/articles/s/javascript-switch-object.md
@@ -0,0 +1,110 @@
+---
+title: Replacing JavaScript switch statement with object literals
+shortTitle: Switch with object literals
+type: story
+language: javascript
+tags: [object]
+author: chalarangelo
+cover: rocky-lake
+excerpt: JavaScript's `switch` statement often feels hard to remember and a little bit out of place. Maybe it's time to use object literals, instead.
+dateModified: 2021-11-07T16:34:37+03:00
+---
+
+JavaScript's `switch` statement is one of the few things I find hard to remember the syntax for (so glad VS Code has autocomplete). It also feels a little bit out of place syntactically, as it's the only thing that doesn't use curly braces and you need to remember to `break` for every `case`. Moreover, its performance is less than stellar as its control flow is procedural.
+
+Luckily, JavaScript's object literals are a pretty good alternative for most `switch` statement use-cases I can think of. The idea is to define an object with a key for each `case` you would have in a `switch` statement. Then you can access its value directly using the expression you would pass to the `switch` statement.
+
+```js
+let fruit = 'oranges';
+
+switch (fruit) {
+  case 'apples':
+    console.log('Apples');
+    break;
+  case 'oranges':
+    console.log('Oranges');
+    break;
+}
+// Logs: 'Oranges'
+
+const logFruit = {
+  'apples': () => console.log('Apples'),
+  'oranges': () => console.log('Oranges')
+};
+
+logFruit[fruit](); // Logs: 'Oranges'
+```
+
+While this is infinitely more readable and less verbose, it's also significantly faster. However, we haven't yet addressed the elephant in the room: the `default` case. To handle it, we can just add a `'default'` key and check if the expression's value exists in our object.
+
+```js
+let fruit = 'strawberries';
+
+switch (fruit) {
+  case 'apples':
+    console.log('Apples');
+    break;
+  case 'oranges':
+    console.log('Oranges');
+    break;
+  default:
+    console.log('Unknown fruit');
+}
+// Logs: 'Unknown fruit'
+
+const logFruit = {
+  'apples': () => console.log('Apples'),
+  'oranges': () => console.log('Oranges'),
+  'default': () => console.log('Unknown fruit')
+};
+
+(logFruit[fruit] || logFruit['default'])(); // Logs: 'Unknown fruit'
+```
+
+Finally, our object literal replacement should be able to handle falling through cases, similar to what happens when there's no `break` statement. This is a matter of simply extracting and reusing logic in the object literal.
+
+```js
+let fruit = 'oranges';
+
+switch (fruit) {
+  case 'apples':
+  case 'oranges':
+    console.log('Known fruit');
+    break;
+  default:
+    console.log('Unknown fruit');
+}
+// Logs: 'Known fruit'
+
+const knownFruit = () => console.log('Known fruit');
+const unknownFruit = () => console.log('Unknown fruit');
+
+const logFruit = {
+  'apples': knownFruit,
+  'oranges': knownFruit,
+  'default': unknownFruit
+};
+
+(logFruit[fruit] || logFruit['default'])(); // Logs: 'Known fruit'
+```
+
+To wrap this all up, we can generalize and extract this logic into a simple reusable function. We will supply it with the lookup object and an optional name for the default case (we'll default to `_default` to avoid any conflicts). This function will in turn return a function with the appropriate lookup logic and we can use it to replace any `switch` statement.
+
+```js
+const switchFn = (lookupObject, defaultCase = '_default') =>
+  expression => (lookupObject[expression] || lookupObject[defaultCase])();
+
+const knownFruit = () => console.log('Known fruit');
+const unknownFruit = () => console.log('Unknown fruit');
+
+const logFruit = {
+  'apples': knownFruit,
+  'oranges': knownFruit,
+  'default': unknownFruit
+};
+
+const fruitSwitch = switchFn(logFruit, 'default');
+
+fruitSwitch('apples'); // Logs: 'Known fruit'
+fruitSwitch('pineapples'); // Logs: 'Unknown fruit'
+```
diff --git a/snippets/articles/s/javascript-sync-async.md b/snippets/articles/s/javascript-sync-async.md
new file mode 100644
index 000000000..b850e4a2a
--- /dev/null
+++ b/snippets/articles/s/javascript-sync-async.md
@@ -0,0 +1,31 @@
+---
+title: What is the difference between synchronous and asynchronous code in JavaScript?
+shortTitle: Synchronous vs asynchronous code
+type: question
+language: javascript
+tags: [function,promise]
+author: chalarangelo
+cover: pineapple-on-green
+excerpt: Understanding the differences between synchronous and asynchronous code is a crucial piece of knowledge for every web developer.
+dateModified: 2021-11-14T05:00:00-04:00
+---
+
+Synchronous code runs in sequence. This means that each operation must wait for the previous one to complete before executing.
+
+```js
+console.log('One');
+console.log('Two');
+console.log('Three');
+// LOGS: 'One', 'Two', 'Three'
+```
+
+Asynchronous code runs in parallel. This means that an operation can occur while another one is still being processed.
+
+```js
+console.log('One');
+setTimeout(() => console.log('Two'), 100);
+console.log('Three');
+// LOGS: 'One', 'Three', 'Two'
+```
+
+Asynchronous code execution is often preferable in situations where execution can be blocked indefinitely. Some examples of this are network requests, long-running calculations, file system operations etc. Using asynchronous code in the browser ensures the page remains responsive and the user experience is mostly unaffected.
diff --git a/snippets/articles/s/javascript-target-blank.md b/snippets/articles/s/javascript-target-blank.md
new file mode 100644
index 000000000..3f47c42c9
--- /dev/null
+++ b/snippets/articles/s/javascript-target-blank.md
@@ -0,0 +1,33 @@
+---
+title: 'Tip: Protect your users from malicious websites when using target="_blank"'
+shortTitle: 'Safeguarding target="_blank"'
+type: tip
+language: javascript
+tags: [browser,security]
+author: chalarangelo
+cover: laptop-with-code
+excerpt: Opening a link in a new tab comes with a security vulnerability that you may not be aware of. Protect your users with this simple trick.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Oftentimes, when linking to an external resource from our websites, we use `target="_blank"` to open the linked page in a new tab or window. But there is a security risk we should be aware of. The new tab gains limited access to the linking page (i.e. our website) via `Window.opener`, which it can then use to alter the linking page's URL via `Window.opener.location` (this is known as tabnabbing).
+
+This might be a problem if the external resource is not trustworthy, might have been hacked, the domain has changed owners over the years etc. There is no guarantee that a third-party resource, no matter how trustworthy, can be actually trusted with our users' security and we, as developers, should always be aware of this risk.
+
+```html
+<!-- Bad: susceptible to tabnabbing -->
+<a href="https://externalresource.com/some-page" target="_blank">
+  External resource
+</a>
+
+<!-- Good: new tab cannot cause problems  -->
+<a
+  href="https://externalresource.com/some-page"
+  target="_blank"
+  rel="noopener noreferrer"
+>
+  External resource
+</a>
+```
+
+In order to prevent a link that is opened in a new tab from causing any trouble, we should always add the `rel="noopener noreferrer"` attribute to all of our `target="_blank"` links.
diff --git a/snippets/articles/s/javascript-ternary-operator.md b/snippets/articles/s/javascript-ternary-operator.md
new file mode 100644
index 000000000..6c95e6b2b
--- /dev/null
+++ b/snippets/articles/s/javascript-ternary-operator.md
@@ -0,0 +1,48 @@
+---
+title: What is the ternary operator and how do I use it?
+shortTitle: Ternary operation introduction
+type: question
+language: javascript
+tags: [condition]
+cover: red-succulent
+excerpt: Learn everything you need to know about the conditional (ternary) operator and how to use it in JavaScript.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+JavaScript's ternary operator (`?:`), also called the conditional operator, is used to replace a conditional statement, most commonly an assignment. For example:
+
+```js
+// Code using if...else
+let x;
+if (someCondition) {
+  x = 10;
+} else {
+  x = 20;
+}
+
+// Same result using the ternary operator
+const x = someCondition ? 10 : 20;
+```
+
+As you can tell from the above example, the ternary operator is shorter than using an `if...else` statement and allows us to assign the resulting value to a variable, provided the condition is pretty much a one-liner. A useful result of this is that we can use the ternary operator for arrow functions with implicit returns:
+
+```js
+// Code using if...else
+const conditionalX = (condition, x) => {
+  if (condition) return x;
+  else return x + 5;
+}
+
+// Same result using the ternary operator
+const conditionalX = (condition, x) => condition ? x : x + 5;
+```
+
+Note, however, that nesting ternary expressions is usually discouraged with ESLint even going as far as having a [dedicated rule](https://eslint.org/docs/rules/no-nested-ternary) for this kind of situation. Additionally, the ternary operator is a favorite of React developers, as it allows for easy conditional rendering in JSX code:
+
+```jsx
+const ItemListTitle = (count) => (
+  <h3>Item list{ count ? (<span> - {count} items</span>) : '(Empty)'}<h3>
+);
+```
+
+Finally, you might be wondering why it's called the "ternary" operator. The word "ternary" is based on the [n-ary word setup](https://en.wikipedia.org/wiki/Arity) and means an operator with three operands (condition, expression to execute if truthy, expression to execute if falsy).
diff --git a/snippets/articles/s/javascript-this.md b/snippets/articles/s/javascript-this.md
new file mode 100644
index 000000000..e2b1307ca
--- /dev/null
+++ b/snippets/articles/s/javascript-this.md
@@ -0,0 +1,143 @@
+---
+title: Understanding the "this" keyword in JavaScript
+shortTitle: The "this" keyword in JavaScript
+type: story
+language: javascript
+tags: [function,object]
+author: chalarangelo
+cover: u-got-this
+excerpt: JavaScript's `this` keyword can confuse beginners and veterans alike. Learn how it works in different scenarios and start using it correctly.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### What is `this`?
+
+In JavaScript, the `this` keyword refers to the object that is currently executing the code. The short version of what `this` evaluates to is as follows:
+
+- By default, `this` refers to the global object.
+- In a function, when not in strict mode, `this` refers to the global object.
+- In a function, when in strict mode, `this` is `undefined`.
+- In an arrow function, `this` retains the value of the enclosing lexical context's `this`.
+- In an object method, `this` refers to the object the method was called on.
+- In a constructor call, `this` is bound to the new object being constructed.
+- In an event handler, `this` is bound to the element on which the listener is placed.
+
+### Global context
+
+In the global execution context, `this` refers to the global object.
+
+```js
+console.log(this === window); // true
+```
+
+### Function context
+
+When not in strict mode, a function's `this` refers to the global object.
+
+```js
+function f() {
+  return this;
+}
+
+console.log(f() === window); // true
+```
+
+When in strict mode, a function's `this` will be `undefined` if not set when entering the execution context.
+
+```js
+'use strict';
+
+function f() {
+  return this;
+}
+
+console.log(f()); // undefined
+```
+
+### Object context
+
+When a function is called as a method of an object, `this` refers to the object the method is called on. This applies to methods defined anywhere in the object's prototype chain (i.e. own and inherited methods).
+
+```js
+const obj = {
+  f: function() {
+    return this;
+  }
+};
+
+const myObj = Object.create(obj);
+myObj.foo = 1;
+
+console.log(myObj.f()); // { foo: 1 }
+```
+
+Similarly, when used inside a constructor, `this` refers to the object being constructed.
+
+```js
+class C {
+  constructor() {
+    this.x = 10;
+  }
+}
+
+const obj = new C();
+console.log(obj.x); // 10
+```
+
+### Arrow function context
+
+In arrow functions, `this` retains the value of the enclosing lexical context's `this`.
+
+```js
+const f = () => this;
+
+console.log(f() === window); // true
+
+const obj = {
+  foo: function() {
+    const baz = () => this;
+    return baz();
+  },
+  bar: () => this
+};
+
+console.log(obj.foo()); // { foo, bar }
+console.log(obj.bar() === window); // true
+```
+
+Notice how in the second example, an arrow function's `this` refers to the global object unless wrapped inside a regular `function` call, whose `this` refers to the object it's called from and its lexical context is retained by the arrow function.
+
+### Event handler context
+
+When used in an event handler, `this` refers to the element on which the listener is placed.
+
+```js
+const el = document.getElementById('my-el');
+
+el.addEventListener('click', function() {
+  console.log(this === el); // true
+});
+```
+
+### Binding `this`
+
+Using `Function.prototype.bind()` returns a new function from an existing one, where `this` is permanently bound to the first argument of `bind()`.
+
+```js
+function f() {
+  return this.foo;
+}
+
+var x = f.bind({foo: 'hello'});
+console.log(x()); // 'hello'
+```
+
+Similarly, using `Function.prototype.call()` or `Function.prototype.apply()` will bind the called function's `this` to the first argument of either of these functions only for this call.
+
+```js
+function f() {
+  return this.foo;
+}
+
+console.log(f.call({foo: 'hi'})); // 'hi'
+```
diff --git a/snippets/articles/s/javascript-truthy-falsy-values.md b/snippets/articles/s/javascript-truthy-falsy-values.md
new file mode 100644
index 000000000..006793b3c
--- /dev/null
+++ b/snippets/articles/s/javascript-truthy-falsy-values.md
@@ -0,0 +1,46 @@
+---
+title: What are truthy and falsy values in JavaScript?
+shortTitle: Truthy and falsy values
+type: question
+language: javascript
+tags: [type,comparison]
+author: chalarangelo
+cover: little-bird
+excerpt: JavaScript uses type coercion in Boolean contexts, resulting in truthy or falsy values. Get a hang of how it all works in this quick guide.
+dateModified: 2021-09-12T05:00:00-04:00
+---
+
+JavaScript uses **type coercion** (implicit conversion of values from one data type to another) in Boolean contexts, such as conditionals. This means that values are considered either truthy (evaluate to `true`) or falsy (evaluate to `false`) depending on how they are evaluated in a Boolean context.
+
+There are 6 values that are considered **falsy** in JavaScript:
+
+- The keyword `false`
+- The primitive value `undefined`
+- The primitive value `null`
+- The empty string (`''`, `""`)
+- The global property `NaN`
+- A number or BigInt representing `0` (`0`, `-0`, `0.0`, `-0.0`, `0n`)
+
+Every other value is considered **truthy**. It's important to remember that this applies to all JavaScript values, even ones that might seem falsy, such as empty arrays (`[]`) or empty objects (`{}`).
+
+You can check a value's truthiness using either the `Boolean()` function or a double negation (`!!`).
+
+```js
+Boolean(false);         // false
+Boolean(undefined);     // false
+Boolean(null);          // false
+Boolean('');            // false
+Boolean(NaN);           // false
+Boolean(0);             // false
+Boolean(-0);            // false
+Boolean(0n);            // false
+
+Boolean(true);          // true
+Boolean('hi');          // true
+Boolean(1);             // true
+Boolean([]);            // true
+Boolean([0]);           // true
+Boolean([1]);           // true
+Boolean({});            // true
+Boolean({ a: 1 });      // true
+```
diff --git a/snippets/articles/s/javascript-undeclared-undefined-null.md b/snippets/articles/s/javascript-undeclared-undefined-null.md
new file mode 100644
index 000000000..98d34d532
--- /dev/null
+++ b/snippets/articles/s/javascript-undeclared-undefined-null.md
@@ -0,0 +1,41 @@
+---
+title: What's the difference between undeclared, undefined and null in JavaScript?
+shortTitle: Undeclared, undefined and null
+type: question
+language: javascript
+tags: [type]
+author: chalarangelo
+cover: river-houses
+excerpt: JavaScript has three different empty states for variables. Learn their differences and how you can check for each one.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### undeclared
+
+A variable is undeclared if it has not been declared with an appropriate keyword (i.e. `var`, `let` or `const`). Accessing an undeclared variable will throw a `ReferenceError`.
+
+```js
+console.log(x); // ReferenceError: x is not defined
+```
+
+### undefined
+
+A variable is `undefined` if it hasn't been assigned a value. `undefined` is a primitive data type in JavaScript and represents the absence of a value, intentional or otherwise.
+
+```js
+let x;
+console.log(x); // undefined
+```
+
+### null
+
+A variable is assigned a value of `null` like any other value. `null` is also primitive data type in JavaScript and always represents the intentional absence of a value.
+
+```js
+let x = null;
+console.log(x); // null
+```
+
+### Checking for empty states
+
+Undeclared variables will throw an error, which makes them easy to spot and are not very common anyways. `undefined` and `null` can be easily spotted with a conditional as they are both falsy values. Due to that, `null` and `undefined` are loosely equal (`==`), but not strictly equal (`===`).
diff --git a/snippets/articles/s/javascript-use-strict.md b/snippets/articles/s/javascript-use-strict.md
new file mode 100644
index 000000000..3c580f1bf
--- /dev/null
+++ b/snippets/articles/s/javascript-use-strict.md
@@ -0,0 +1,115 @@
+---
+title: What does 'use strict' do and what are some of the key benefits to using it?
+shortTitle: Strict mode introduction
+type: question
+language: javascript
+tags: [function,object]
+author: chalarangelo
+cover: palm-tree-house
+excerpt: JavaScript's strict mode can make your code faster, cleaner and more secure.
+dateModified: 2021-11-28T05:00:00-04:00
+---
+
+Strict mode can be applied to entire scripts or individual functions by including `'use strict'` before any other statements.
+
+```js
+// script.js
+'use strict';
+const x = "Hello from a strict mode script";
+
+// other.js
+function strict() {
+  'use strict';
+  const x = 'Hello from a strict mode function';
+}
+```
+
+This enforces more strict parsing and error handling of JavaScript code, as described below.
+
+### No accidental global variables
+
+Strict mode makes it impossible to accidentally create global variables due to mistyped variable names. Assignments, which would accidentally create global variables, instead throw an error in strict mode:
+
+```js
+'use strict';
+myVariable = 42;
+// The above line will throw a ReferenceError, assuming no global
+// variable named myVariable has been declared previously
+```
+
+### Elimination of silent errors
+
+Strict mode changes some previously-accepted mistakes into errors. These include:
+
+- Assignments which would otherwise silently fail
+- Deleting undeletable properties or plain names
+- Duplicated names in function arguments
+- 0-prefixed octal literals
+- Setting properties on primitives
+
+```js
+'use strict';
+
+let undefined = 5; // TypeError (non-writable global)
+let obj = {};
+Object.defineProperty(obj1, 'x', { value: 1, writable: false });
+obj.x = 2; // TypeError (non-writable property);
+
+delete Object.prototype; // TypeError (undeletable property)
+delete something; // SyntaxError (plain name)
+
+const sum (a, b, b) { // SyntaxError (duplicated argument name)
+  return a + b + b;
+}
+
+const x = 012; // SyntaxError (0-prefixed octal literal)
+
+false.true = 10; // TypeError (property on primitive)
+```
+
+### Simplified `eval`
+
+Strict mode makes `eval` more transparent by preventing the introduction of new variables in the surrounding scope. In strict mode, `eval` creates variables only for the code being evaluated.
+
+```js
+'use strict';
+let x = 1;
+eval('let x = 3; console.log(x);'); // LOGS: 3
+console.log(x); // LOGS: 1
+```
+
+### Simplified `arguments`
+
+Strict mode simplifies `arguments`, by removing some of their side effects. `arguments` aren't aliased, thus they always refer to the original arguments when the function was invoked. Moreover, `arguments.callee` and `arguments.caller` are no longer supported.
+
+```js
+'use strict';
+function f(x) {
+  x = 5;
+  return x === arguments[0];
+}
+
+f(10); // false
+```
+
+### No `this` boxing
+
+Strict mode makes JavaScript more secure, by restricting access the global object via `this`. In strict mode, `this` is not boxed (forced into being an object), meaning that if unspecified it will be `undefined` instead of the global object.
+
+```js
+'use strict';
+function f() {
+  return this;
+}
+
+f(); // undefined
+```
+
+### Other changes
+
+Strict mode implements a few more, less commonly-mentioned changes. These include:
+
+- `with` is prohibited, resulting in an error if used
+- `Function.prototype.arguments` and `Function.prototype.caller` are non-deletable properties which throw when set or retrieved
+- `implements`, `interface`, `let`, `package`, `private`, `protected`, `public`, `static`, and `yield` are reserved keywords
+- Function statements are only allowed at the top level of a script of function
diff --git a/snippets/articles/s/javascript-value-as-number.md b/snippets/articles/s/javascript-value-as-number.md
new file mode 100644
index 000000000..2b9400b18
--- /dev/null
+++ b/snippets/articles/s/javascript-value-as-number.md
@@ -0,0 +1,26 @@
+---
+title: "Tip: You can get the value of an input element as a number"
+shortTitle: Input element value as number
+type: tip
+language: javascript
+tags: [browser,input]
+author: chalarangelo
+cover: mac-and-coffee
+excerpt: Ever wanted to get the value of an HTML input element as a number? Learn an easy way to do it with this handy trick.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Most of the time, when accessing the value of an `HTMLInputElement` in an event listener, we use something along the lines of `e.target.value`. This is fine in most cases, but when we want the numeric value of an input field, we have to parse it and check if the value is actually valid etc. That can get very annoying, especially when working with larger forms that have many input fields.
+
+What if I told you there's an easier way to get the numeric value from an input field? Meet `HTMLInputElement.valueAsNumber`, a handy attribute that will return a numeric value if the input field's value can be converted to a number or `NaN` if the conversion is not possible.
+
+```js
+const quantityInput = document.getElementById('quantity-input');
+let quantity;
+// Bad: parseFloat() converts the string to a number
+quantity = parseFloat(quantityInput.value);
+// Good: returns a numeric value
+quantity = quantityInput.valueAsNumber;
+```
+
+As usual, this comes with a caveat which is that it only works for `type="number"` inputs (although that's probably where you need it the most). On a side note, you can also use `HTMLInputElement.valueAsDate` to get a `Date` object from a `type="date"` input, which might also come in handy in some cases.
diff --git a/snippets/articles/s/javascript-value-not-equal-to-itself.md b/snippets/articles/s/javascript-value-not-equal-to-itself.md
new file mode 100644
index 000000000..374e7d63f
--- /dev/null
+++ b/snippets/articles/s/javascript-value-not-equal-to-itself.md
@@ -0,0 +1,29 @@
+---
+title: What is the only value not equal to itself in JavaScript?
+shortTitle: The only value not equal to itself
+type: question
+language: javascript
+tags: [type,comparison]
+author: chalarangelo
+cover: eagle
+excerpt: Did you know there's a JavaScript value that's not equal to itself?
+dateModified: 2021-12-12T05:00:00-04:00
+---
+
+`NaN` (Not-a-Number) is the only JavaScript value not equal to itself when comparing with any of the comparison operators. `NaN` is often the result of meaningless or invalid math computations, so it doesn't make sense for two `NaN` values to be considered equal.
+
+```js
+const x = Math.sqrt(-1); // NaN
+const y = 0 / 0;         // NaN
+
+x === y;                 // false
+x === NaN;               // false
+
+Number.isNaN(x);         // true
+Number.isNaN(y);         // true
+
+isNaN(x);                // true
+isNan('hello');          // true
+```
+
+You can check for `NaN` values using the `Number.isNaN()` function. Note that this is different from the original , global `isNaN()`. Their difference lies in the fact that `isNaN()` forcefully converts its argument to a number, whereas `Number.isNaN()` doesn't. This is why `Number.isNaN()` is considered more robust and preferable in most cases.
diff --git a/snippets/articles/s/javascript-var-let-const.md b/snippets/articles/s/javascript-var-let-const.md
new file mode 100644
index 000000000..9d35ce24a
--- /dev/null
+++ b/snippets/articles/s/javascript-var-let-const.md
@@ -0,0 +1,81 @@
+---
+title: What are the differences between var, let and const in JavaScript?
+shortTitle: Var, let and const
+type: question
+language: javascript
+tags: [type,variable]
+author: chalarangelo
+cover: highlands
+excerpt: JavaScript variables can be declared a handful of ways. However, understanding their differences can drastically change the way you code.
+dateModified: 2021-12-02T09:50:42-04:00
+---
+
+JavaScript has three variable declaration statements: `var`, `let` and `const`. The latter two were added in ES6, whereas `var` existed since previous versions. One of the first things to notice is that `const` defines constants (i.e. values that will not be reassigned), whereas `var` and `let` define variables. Yet, `var` behaves differently from both `let` and `const` in various other ways.
+
+### Scope
+
+Variables declared with `var` are function scoped, in contrast to variables declared with `let` or `const` which are block scoped.
+
+```js
+const scopeExample = () => {
+  var a = 'var';
+  let b = 'let';
+  console.log(a, b); // 'var', 'let'
+
+  {
+    var c = 'var';
+    let d = 'let';
+    console.log(c, d); // 'var', 'let'
+  }
+
+  console.log(c); // 'var'
+  console.log(d); // Throws a ReferenceError
+};
+```
+
+If you want to learn more, we have [an article covering JavaScript variables and scopes in more depth](/articles/s/javascript-variable-scope).
+
+### Hoisting
+
+While variables declared with `var` are hoisted to the enclosing scope, variables declared with `let` or `const` are not initialized until their definition is evaluated.
+
+```js
+const hoistingExample = () => {
+  console.log(a); // undefined
+  var a = 'var';
+  console.log(a); // 'var'
+
+  console.log(b); // ReferenceError
+  let b = 'let';
+  console.log(b); // 'let'
+};
+```
+
+If you want to learn more, we have [an article covering JavaScript hoisting in more depth](/articles/s/javascript-variable-hoisting).
+
+### Global object property
+
+At the top level, variables declared with `var`, unlike ones declared with `let` or `const`, create a property on the global object.
+
+```js
+var a = 'var';
+let b = 'let';
+
+console.log(window.a); // 'var'
+console.log(window.b); // undefined
+```
+
+### Redeclaration
+
+In strict mode, variables declared with `var` can be re-declared in the same scope, whereas this is not allowed for variables declared with `let` or `const`.
+
+```js
+'use strict';
+var a = 'var1';
+var a = 'var2';
+
+let b = 'let1';
+let b = 'let2'; // SyntaxError
+```
+
+If you want to learn more, we have [an article covering JavaScript's strict mode in more depth](/articles/s/javascript-use-strict).
diff --git a/snippets/articles/s/javascript-variable-hoisting.md b/snippets/articles/s/javascript-variable-hoisting.md
new file mode 100644
index 000000000..d9b555f8b
--- /dev/null
+++ b/snippets/articles/s/javascript-variable-hoisting.md
@@ -0,0 +1,71 @@
+---
+title: What is hoisting in JavaScript?
+shortTitle: Hoisting introduction
+type: question
+language: javascript
+tags: [type,variable]
+author: chalarangelo
+cover: boat-port
+excerpt: Hoisting comes up a lot during JavaScript interviews. It's a concept that can require some getting used to, so read our guide to learn more.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Before your JavaScript code is executed, it is first parsed and compiled. During the _compile_ phase, variable and function declarations are put into memory, which is called **hoisting**.
+
+Note that only declarations are hoisted, not initializations, meaning that if a variable is declared and initialized after using it, its value will not be initialized. This is an oversimplification of the situation, so let's take a look at the different cases:
+
+### function
+
+When using `function` declarations, the function can be called before it's defined and it will work as expected. For example:
+
+```js
+hello(); // logs 'Hello world!'
+
+function hello() {
+  console.log('Hello world!');
+}
+
+hello(); // logs 'Hello world!'
+```
+
+In the example above the `function` declaration is hoisted to the top of its scope and, due to the nature of function declarations, it's available before it's declared. However, this is the only case that behaves this way.
+
+### var
+
+`var` declarations on the other hand behave differently, returning `undefined` when accessed before initialization. For example:
+
+```js
+console.log(x); // logs 'undefined'
+f(); // throws 'Uncaught TypeError: f is not a function'
+
+var x = 1;
+var f = () => 'Hi!';
+
+console.log(x); // logs '1'
+f(); // returns 'Hi!'
+```
+
+As you can see in this example, the `var` declarations are hoisted to the top of their scope, but their values are not initialized until the code that initializes them executes, thus being `undefined` up until that point.
+
+### const and let
+
+Finally, `const` and `let` declarations are hoisted, but they are not initialized to `undefined`. Instead, they will give you an error, which is also how `class` declarations behave. For example:
+
+```js
+console.log(y); // throws 'Uncaught ReferenceError: Cannot access "y" before initialization'
+g();  // throws 'Uncaught ReferenceError: Cannot access "g" before initialization'
+
+let y = 2;
+const g = () => 'Hey!';
+
+console.log(y); // logs '2'
+f(); // returns 'Hey!'
+```
+
+Generally, `const` and `let` provide more of a headache-free experience for a variety of reasons and this is no exception. Where accessing variables declared with `var` before initialization fails silently, doing the same for `const` or `let` results in a clear, easy to debug error.
+
+### Best practices
+
+- Always define variables, functions, objects and classes before using them. ESLint can probably help you with that.
+- If your environment/team allows it, prefer `const` and `let`over `var` to minimize headaches.
+- If possible, use only arrow functions or `function` declarations. Consistency can help reduce confusion.
diff --git a/snippets/articles/s/javascript-variable-scope.md b/snippets/articles/s/javascript-variable-scope.md
new file mode 100644
index 000000000..89f513ef5
--- /dev/null
+++ b/snippets/articles/s/javascript-variable-scope.md
@@ -0,0 +1,31 @@
+---
+title: Understanding JavaScript variables and scopes
+shortTitle: Variables and scopes
+type: story
+language: javascript
+tags: [type,variable]
+author: chalarangelo
+cover: periscope
+excerpt: JavaScript developers often get confused by JavaScript's variables and scope. Here's a quick guide to understanding these concepts.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+I have seen many developers - my younger self included - struggle with JavaScript's variables and scopes, even if they have some experience with coding and/or the language itself. While there are dozens of great articles on this subject, I found it somewhat difficult to memorize or understand the way these concepts work when I was starting out, so here's a short and simple breakdown that might help you as much as it helped me.
+
+### Variable definition
+
+JavaScript provides two ways to define a variable (`var` and `let`) and one way to define a constant value (`const`).
+
+`let` and `const` behave the same in terms of scope, both being block scoped (see below). On the other hand, `var` behaves differently by being function scoped (see below), meaning `var` declarations inside a block scope will also be available to the nearest outer function block.
+
+It is generally preferred to use `let` and `const` to avoid confusion when it comes to scoping. However, it is important to note that `var` can be a useful JavaScript feature when used in the correct circumstances.
+
+![Visualization of JavaScript variable scope](./illustrations/js-variable-scope.png)
+
+### Scope
+
+When we talk about scope, we mean the visibility of one or more entities (e.g variables) to certain parts of our code. There are two types of scopes: global and local. Local scope can in turn be separated into block, function and other types of more specific scopes.
+
+**Global scope**: Variables defined globally (i.e. not inside a block or function) are part of the global scope and can be accessed from anywhere in the code. When declared in the global scope, `var`, `let` and `const` behave the same in terms of scope.
+
+**Local scope**: Variables defined inside a block or function can only be accessed from the block or function where they were defined, as well as nested local scopes. When declared inside a block scope, `var` will be available but `undefined` in outer scopes, while `let` and `const` will not exist in outer scopes. When declared inside a function scope, `var`, `let` and `const` will all be non-existent in outer scopes.
diff --git a/snippets/articles/s/javascript-void-links.md b/snippets/articles/s/javascript-void-links.md
new file mode 100644
index 000000000..3a41a669f
--- /dev/null
+++ b/snippets/articles/s/javascript-void-links.md
@@ -0,0 +1,19 @@
+---
+title: "Tip: Avoid \"javascript:void(0)\" for empty links"
+shortTitle: Avoid "javascript:void(0)" for empty links
+type: tip
+language: javascript
+tags: [browser,accessibility]
+author: chalarangelo
+cover: white-flower
+excerpt: There are many ways to create empty links, some more appropriate than others. Learn how to best handle empty links with this quick tip.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+There are various ways to create an empty link, but some options are more appropriate than others. One of the most common debates about it is if one should use `href=""`, `href="#"` or `href="javascript:void(0)"`.
+
+Generally, you want to avoid `href="javascript:void(0)"`, as it will cause the browser to parse the value of the link URL, which is both costly and unnecessary. It also introduces a potential XSS security vulnerability, as `javascript:` URLs violate Content Security Policy (CSP).
+
+With that out of the way, it's clear that `href=""` or `href="#"` should be preferred in most cases. One key difference between the two is that `href="#"` points to the top of the page whereas `href=""` points to the current page. This can have unwanted side-effects, such as scrolling to the top of the page or issues with link styling respectively. To prevent either one of them from acting as links, you can use `Event.preventDefault()` and handle them appropriately using JavaScript.
+
+Finally, when creating an empty link, one should always consider more semantically appropriate alternatives, such as a `<button>`, `<div>` or `<span>` tag. After all, a link should always behave like a link and hijacking it with JavaScript or any other means is bound to run into some accessibility problems sooner or later.
diff --git a/snippets/articles/s/jest-mock-global-methods.md b/snippets/articles/s/jest-mock-global-methods.md
new file mode 100644
index 000000000..c0475088c
--- /dev/null
+++ b/snippets/articles/s/jest-mock-global-methods.md
@@ -0,0 +1,22 @@
+---
+title: Mocking global object methods in Jest
+type: story
+language: javascript
+tags: [testing]
+author: chalarangelo
+cover: trippy-chemicals
+excerpt: Testing your code is important, but mocking can be tricky at times. Here's a quick guide on how to mock global object methods in Jest.
+dateModified: 2022-03-27T05:00:00-04:00
+---
+
+Testing is a big part of the development process. It's also where a lot of mistakes can be overlooked, which can pile up and lead to hard-to-debug issues. A common problem is poorly-written mocks, especially regarding global objects and their methods. Let's take a look at how to mock global object methods in Jest.
+
+When mocking global object methods in Jest, the optimal way to do so is using the `jest.spyOn()` method. It takes the object and name of the method you want to mock, and returns a mock function. The resulting mock function can then be chained to a mocked implementation or a mocked return value. For example:
+
+```js
+jest.spyOn(Math, 'random').mockReturnValue(0.123456789);
+
+jest.spyOn(Date, 'now').mockReturnValue('123456789');
+```
+
+In this example, we mock two global object methods and return a fixed value. You could as easily mock their implementation using `mockFn.mockImplementation()`. Using either of these options allows you to get predictable values from the mocked methods. This comes in especially handy when working, for example, with `Math.random()` or `Date.now()`.
diff --git a/snippets/articles/s/js-abort-fetch.md b/snippets/articles/s/js-abort-fetch.md
new file mode 100644
index 000000000..ef205c9bd
--- /dev/null
+++ b/snippets/articles/s/js-abort-fetch.md
@@ -0,0 +1,27 @@
+---
+title: "Tip: Abort a fetch request in JavaScript"
+shortTitle: Abort a fetch request
+type: story
+language: javascript
+tags: [function]
+author: chalarangelo
+cover: cancel-typographer
+excerpt: Aborting a fetch request in JavaScript is a common problem. Here's how to handle it correctly.
+dateModified: 2022-05-15T05:00:00-04:00
+---
+
+The Fetch API is nowadays the de facto way to send asynchronous requests in JavaScript. This is in part due to the fact that the `fetch()` method accepts a multitude of useful options. One of these is the `signal` option, which can be used to abort a request. To create a valid value for this option, you can use `AbortController.signal` after creating a new instance of `AbortController`. Then, you can use `AbortController.abort()` to cancel the request at any time.
+
+```js
+// Create the AbortController
+const controller = new AbortController();
+const { signal } = controller;
+
+// Perform the request
+fetch('https://my.site.com/data', { signal }).then(res => console.log(res));
+
+// Abort the request
+controller.abort();
+```
+
+This is particularly useful in scenarios where a request takes too long or the response is no longer needed. You can see a common React use-case for this in the [useFetch hook](https://www.30secondsofcode.org/react/s/use-fetch).
diff --git a/snippets/articles/s/js-append-elements-to-array.md b/snippets/articles/s/js-append-elements-to-array.md
new file mode 100644
index 000000000..045de2d78
--- /dev/null
+++ b/snippets/articles/s/js-append-elements-to-array.md
@@ -0,0 +1,77 @@
+---
+title: Append elements to a JavaScript array
+shortTitle: Append elements to array
+type: story
+language: javascript
+tags: [array]
+author: chalarangelo
+cover: switzerland-night
+excerpt: Have you ever tried appending elements to an array in JavaScript? Here's a primer on all the available options.
+dateModified: 2022-07-10T05:00:00-04:00
+---
+
+Appending a value or values from an array in JavaScript is a pretty common task. While not hard to accomplish, there are a few approaches available, each with their own pros and cons. Choosing the correct one ultimately depends on the use case.
+
+### Array.prototype.push()
+
+The classical way to append elements to the end of an array is to use `Array.prototype.push()`. While versatile, you need to remember that it **mutates the original array**. On the flip side, it supports adding multiple elements at once. Finally, the return value of `Array.prototype.push()` is the new length of the array.
+
+```js
+const arr = ['a', 'b', 'c'];
+arr.push('d', 'e'); // Returns 5 (new length after appending 2 elements)
+// arr = ['a', 'b', 'c', 'd', 'e']
+```
+
+### Array.prototype.unshift()
+
+Similar to `Array.prototype.push()`, `Array.prototype.unshift()` appends elements to the start of an array. Furthermore, this method also **mutates the original array** and supports adding multiple elements at once.
+
+```js
+const arr = ['a', 'b', 'c'];
+arr.unshift('d', 'e'); // Returns 5 (new length after appending 2 elements)
+// arr = ['d', 'e', 'a', 'b', 'c']
+```
+
+### Array.prototype.splice()
+
+`Array.prototype.splice()` is more often used for removing elements from an array, but it can append elements, too. While it also **mutates the original array**, it can append elements anywhere in the array. Similar to previous methods, it supports adding more than one element at once. The return value of this method is practically meaningless in this use-case.
+
+```js
+const arr = ['a', 'b', 'c'];
+arr.splice(1, 0, 'd', 'e');
+// arr = ['a', 'd', 'e', 'b', 'c']
+```
+
+### Array.prototype.length
+
+Appending an element to the end of an array means setting a value for an index equal to its length. This is due to arrays in JavaScript being zero-indexed. Luckily, `Array.prototype.length` can be combined with array index notation to accomplish this. Same as previous methods, this approach **mutates the original array**. Additionally, it's limited to adding one element at a time and only at the end of the array.
+
+```js
+const arr = ['a', 'b', 'c'];
+arr[arr.length] = 'd';
+// arr = ['a', 'b', 'c', 'd']
+```
+
+### Array.prototype.concat()
+
+The first option that **doesn't mutate the original array** is `Array.prototype.concat()`. This method returns a new array with the elements of the original array and new elements concatenated to it. It can be used to append elements to either end of the array, while also supporting adding multiple elements at once.
+
+```js
+const arr = ['a', 'b', 'c'];
+const arr2 = arr.concat('d', 'e');
+// arr = ['a', 'b', 'c'], arr2 = ['a', 'b', 'c', 'd', 'e']
+const arr3 = ['d', 'e'].concat(...arr);
+// arr = ['a', 'b', 'c'], arr3 = ['d', 'e', 'a', 'b', 'c']
+```
+
+### Spread operator
+
+Finally, the last option that **doesn't mutate the original array** is the spread operator (`...`). The way that it works is essentially the same as `Array.prototype.concat()`, supporting appending one or more elements to either end of the array.
+
+```js
+const arr = ['a', 'b', 'c'];
+const arr2 = [...arr, 'd', 'e'];
+// arr = ['a', 'b', 'c'], arr2 = ['a', 'b', 'c', 'd', 'e']
+const arr3 = ['d', 'e', ...arr];
+// arr = ['a', 'b', 'c'], arr3 = ['d', 'e', 'a', 'b', 'c']
+```
diff --git a/snippets/articles/s/js-array-filtering-tips.md b/snippets/articles/s/js-array-filtering-tips.md
new file mode 100644
index 000000000..24d0eaf60
--- /dev/null
+++ b/snippets/articles/s/js-array-filtering-tips.md
@@ -0,0 +1,58 @@
+---
+title: JavaScript array filtering tips
+shortTitle: Array filtering tips
+type: story
+language: javascript
+tags: [array]
+author: chalarangelo
+cover: violin
+excerpt: A few tips and tricks to help you filter arrays in JavaScript more efficiently.
+dateModified: 2022-09-28T05:00:00-04:00
+---
+
+While `Array.prototype.filter()` is a very convenient method, its performance often leaves something to be desired. This is exaggerated due to the fact that it has become the go-to method for many operations that can be performed using different alternatives. Let's look at a couple of common scenarios and see how we can improve their performance.
+
+### Find a single value
+
+If you are looking for a single result in an array, you can use `Array.prototype.find()` instead. This will return the first element that satisfies the condition, or `undefined` if no such element exists. It's much faster than `Array.prototype.filter()`, as it will stop iterating as soon as it finds the first matching element.
+
+```js
+const arr = [1, 2, 3, 4, 5];
+
+arr.find(x => x > 3); // 4
+```
+
+Additionally, if the condition is a simple equality check, you can also use `Array.prototype.indexOf()`. While not as pretty as the other two, it can be significantly faster, as there's no overhead from using a comparator function.
+
+```js
+const arr = [1, 2, 3, 4, 5];
+
+arr.indexOf(3); // 2
+```
+
+### Remove a single value
+
+Similarly, if you want to remove a single value from an array, you can use `Array.prototype.findIndex()` to find the index of the element you want to remove. Then, use `Array.prototype.slice()` to remove it. While this is a little more verbose and seems to perform more operations, it can actually be faster than using `Array.prototype.filter()` in many cases.
+
+```js
+const arr = [1, 2, 3, 4, 5];
+
+const index = arr.findIndex(x => x === 3);
+const newArr = [...arr.slice(0, index), ...arr.slice(index + 1)];
+// [1, 2, 4, 5]
+```
+
+Similarly, if you don't mind mutating the original array, you can use `Array.prototype.splice()` to remove the element at the index you found. As this method doesn't have to create a new array, it can be significantly faster than the previous one.
+
+```js
+const arr = [1, 2, 3, 4, 5];
+
+const index = arr.findIndex(x => x === 3);
+arr.splice(index, 1); // [1, 2, 4, 5]
+```
+
+### Additional notes
+
+In many cases, such changes will not make a drastic difference in your application's performance. It never hurts, however, to be aware of all the options and use the best one for your specific use case. Changes such as these will make more sense when working with large datasets, as well as critical parts of your application.
+
+Additionally, depending on the data and its constraints, it might make more sense to use a different data structure altogether. For example, if unique values are a precondition, using a `Set` is more efficient and much easier to work with in many cases.
diff --git a/snippets/articles/s/js-array-map-vs-foreach.md b/snippets/articles/s/js-array-map-vs-foreach.md
new file mode 100644
index 000000000..dbe174048
--- /dev/null
+++ b/snippets/articles/s/js-array-map-vs-foreach.md
@@ -0,0 +1,31 @@
+---
+title: What is the difference between Array.prototype.map() and Array.prototype.forEach()?
+shortTitle: Array.prototype.map() vs Array.prototype.forEach()
+type: question
+language: javascript
+tags: [array]
+author: chalarangelo
+cover: fort-lamp
+excerpt: Which method do you reach for first? What are the differences between them? Let's find out!
+dateModified: 2023-03-26T05:00:00-04:00
+---
+
+`Array.prototype.map()` and `Array.prototype.forEach()` are two of the most commonly used methods in JavaScript. Both of them iterate over an array and perform some action on each element. Yet, they're not the same and they're not interchangeable.
+
+The key difference between the two lies in the **return value**. The return value of `Array.prototype.map()` is a new array with the results of the callback function. On the other hand, the return value of `Array.prototype.forEach()` is `undefined`.
+
+Simply put, `Array.prototype.forEach()` is used to perform some action on each element in an array, while `Array.prototype.map()` is used to create a new array based on the elements in the original array. Let's take a look at an example to clear up any confusion:
+
+```js
+const numbers = [1, 2, 3, 4, 5];
+
+numbers.forEach(num => console.log(num * 2));
+// No return value, output: 2, 4, 6, 8, 10
+
+const doubledNumbers = numbers.map(num => num * 2);
+// Returns a new array: [2, 4, 6, 8, 10]
+```
+
+The way I like to distinguish them is by remembering that `Array.prototype.map()` represents a **transformation**, whereas `Array.prototype.forEach()` represents an **iteration**. Hopefully, one of these explanations will click for you and help you remember the difference between the two.
+
+As a closing note, I would like to remind you that the humble `for` loop can be more efficient in some cases, such as [breaking out of a loop early](/articles/s/javascript-for-loop-early-break). Always pick the right tool for the job, as ES6 has a method for almost every use case.
diff --git a/snippets/articles/s/js-array-min-max.md b/snippets/articles/s/js-array-min-max.md
new file mode 100644
index 000000000..cc618c5f3
--- /dev/null
+++ b/snippets/articles/s/js-array-min-max.md
@@ -0,0 +1,22 @@
+---
+title: "Tip: Min and max value in a JavaScript array"
+shortTitle: Min and max value of an array
+type: tip
+language: javascript
+tags: [array,math]
+author: chalarangelo
+cover: little-tree
+excerpt: When working with numeric arrays in JavaScript, you might need to find the minimum or maximum value. Here's a quick and easy way to do it.
+dateModified: 2021-11-06T20:51:47+03:00
+---
+
+When working with numeric arrays in JavaScript, you might find yourself in need of finding the minimum or maximum value. Luckily, JavaScript's `Math` built-in object has got you covered. You can simply use `Math.min()` or `Math.max()` combined with the spread operator (`...`), as both functions accept any number of arguments.
+
+```js
+const nums = [2, 4, 6, 8, 1, 3, 5, 7];
+
+Math.max(...nums); // 8
+Math.min(...nums); // 1
+```
+
+For more complex cases, such as finding the min/max value in an array of objects, you might have to resort to `Array.prototype.map()` or `Array.prototype.reduce()`. On the other hand, our [minBy](/js/s/min-by) or [maxBy](/js/s/max-by) snippets might be all you need.
diff --git a/snippets/articles/s/js-array-sorting-shorthand.md b/snippets/articles/s/js-array-sorting-shorthand.md
new file mode 100644
index 000000000..b75757e5a
--- /dev/null
+++ b/snippets/articles/s/js-array-sorting-shorthand.md
@@ -0,0 +1,42 @@
+---
+title: "Tip: JavaScript array sorting shorthand"
+shortTitle: Array sorting shorthand
+type: tip
+language: javascript
+tags: [array]
+cover: apples
+excerpt: Learn how to quickly write code to sort JavaScript arrays with this handy one-liner.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+When sorting an array of primitive values (e.g. strings or numbers), you'll often see a lot of code that looks like this:
+
+```js
+const arr = [8, 2, 1, 4, 5, 0];
+// Sort in ascending order
+arr.sort((a, b) => {
+  if (a > b) return 1;
+  if (b > a) return -1
+  return 0;
+}); // [0, 1, 2, 4, 5, 8]
+```
+
+While this piece of code does the job, there is also a one-line alternative for it. The trick hinges on `Array.prototype.sort()` expecting either a positive or a negative value to perform a swap between two elements, thus allowing for more flexible values than `1` and `-1`. Subtracting the numeric values in an array is sufficient and can also be used to sort the array the other way around:
+
+```js
+const arr = [8, 2, 1, 4, 5, 0];
+// Sort in ascending order
+arr.sort((a, b) => a - b); // [0, 1, 2, 4, 5, 8]
+// Sort in descending order
+arr.sort((a, b) => b - a); // [8, 5, 4, 2, 1, 0]
+```
+
+If you are working with string arrays, you should instead use `String.prototype.localeCompare()`, as it provides far greater flexibility, by accounting for specific locales and their unique needs:
+
+```js
+const s = ['Hi', 'Hola', 'Hello'];
+// Sort in ascending order
+arr.sort((a, b) => a.localeCompare(b)); // ['Hello', 'Hi', 'Hola']
+// Sort in descending order
+arr.sort((a, b) => b.localeCompare(a)); // ['Hola', 'Hi', 'Hello']
+```
diff --git a/snippets/articles/s/js-async-defer.md b/snippets/articles/s/js-async-defer.md
new file mode 100644
index 000000000..eb5caa447
--- /dev/null
+++ b/snippets/articles/s/js-async-defer.md
@@ -0,0 +1,43 @@
+---
+title: What is the difference between async and defer in script loading?
+shortTitle: Async and defer
+type: question
+language: javascript
+tags: [html]
+author: chalarangelo
+cover: coworking-space
+excerpt: Understanding how to correctly load your JavaScript files can significantly improve your web application's performance.
+dateModified: 2022-09-04T05:00:00-04:00
+---
+
+When it comes to loading JavaScript files, there are a few different options available. Understanding exactly how scripts are loaded and executed is crucial for website performance, as well as for the overall quality of the user experience. Let's take a look at how the `<script>` tag works and how certain attributes affect its behavior.
+
+![Script loading visualization](./illustrations/async-defer.png)
+
+### No attributes
+
+More often than not, a plain `<script>` tag without attributes is what most people tend to start with. This implements the default browser behavior. The HTML will be parsed until the script tag is encountered. At this point, HTML parsing will be paused and the script will be loaded. The script will then be executed before HTML parsing can resume.
+
+```html
+<script src="script.js"></script>
+```
+
+As you can see, this method can cause a long pause in HTML parsing, resulting in a degraded user experience.
+
+### The async attribute
+
+To avoid a long pause in HTML parsing, the `async` attribute can be leveraged. This ensures that, when the script is encountered, parsing doesn't pause right away. Instead, the script is loaded in the background and only the HTML parsing is paused to execute it. HTML parsing resumes as usual after script execution is completed.
+
+```html
+<script src="script.js" async></script>
+```
+
+While the `async` attribute takes steps to mitigate the issue mentioned previously, it comes with an important caveat. Scripts loaded this way are not guaranteed to execute in the order specified, but rather as they become available when they are loaded.
+
+### The defer attribute
+
+Finally, the `defer` attribute builds on top of the previous behavior to guarantee order of execution for scripts. As previously, scripts are loaded in the background as they are encountered. When the HTML parsing finishes, they are then executed in order.
+
+```html
+<script src="script.js" defer></script>
+```
diff --git a/snippets/articles/s/js-callbacks.md b/snippets/articles/s/js-callbacks.md
new file mode 100644
index 000000000..5f2d329d9
--- /dev/null
+++ b/snippets/articles/s/js-callbacks.md
@@ -0,0 +1,35 @@
+---
+title: What is a callback function?
+shortTitle: Callback functions
+type: question
+language: javascript
+tags: [function]
+author: chalarangelo
+cover: rabbit-call
+excerpt: JavaScript uses callback functions quite a lot. From event listeners to asynchronous code, they're an invaluable tool you need to master.
+dateModified: 2021-10-03T05:00:00-04:00
+---
+
+A callback function is a function passed as an argument to another function, which is then invoked inside the outer function. Callback functions are often executed once an event has occurred or a task has completed.
+
+### Synchronous callbacks
+
+A synchronous callback is a callback function that is executed immediately. The function passed as the first argument to `Array.prototype.map()` is a great example of a synchronous callback:
+
+```js
+const nums = [1, 2, 3];
+const printDoublePlusOne = n => console.log(2 * n + 1);
+
+nums.map(printDoublePlusOne); // LOGS: 3, 5, 7
+```
+
+### Asynchronous callbacks
+
+An asynchronous callback is a callback function that is used to execute code after an asynchronous operation has completed. The function executed inside `Promise.prototype.then()` is a great example of an asynchronous callback:
+
+```js
+const nums = fetch('https://api.nums.org'); // Suppose the response is [1, 2, 3]
+const printDoublePlusOne = n => console.log(2 * n + 1);
+
+nums.then(printDoublePlusOne); // LOGS: 3, 5, 7
+```
diff --git a/snippets/articles/s/js-cannot-extend-proxy-object.md b/snippets/articles/s/js-cannot-extend-proxy-object.md
new file mode 100644
index 000000000..e2ef64362
--- /dev/null
+++ b/snippets/articles/s/js-cannot-extend-proxy-object.md
@@ -0,0 +1,33 @@
+---
+title: "Tip: You can't extend the Proxy object"
+shortTitle: Extending the Proxy object
+type: tip
+language: javascript
+tags: [object,proxy]
+author: chalarangelo
+cover: icebreaker
+excerpt: Turns out the Proxy object is not extensible, but there's a way around its limitations.
+dateModified: 2023-04-17T05:00:00-04:00
+---
+
+While the [`Proxy`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) object seems like it can be extended by any other class in JavaScript, that's not the case. This is due to proxy objects having very atypical semantics and being considered **exotic objects**. Simply put, this means they do not have a prototype and are not extensible.
+
+So how do you extend a proxy object? You don't. You can, however, create a class that returns a proxy by returning it from the constructor. After all, this is probably the sort of behavior you're after.
+
+```js
+class MyProxy {
+  constructor(value) {
+    Object.keys(value).forEach(key => (this[key] = value[key]));
+    return new Proxy(this, {
+      set(object, key, value) {
+        console.log(`Called with ${key} = ${value}`);
+        object[key] = value;
+        return true;
+      }
+    });
+  }
+}
+
+const myProxy = new MyProxy({ a: 1 });
+myProxy.b = 2; // LOGS: 'Called with b = 2'
+```
diff --git a/snippets/articles/s/js-compare-string-case-accent-insensitive.md b/snippets/articles/s/js-compare-string-case-accent-insensitive.md
new file mode 100644
index 000000000..d03c8ebb5
--- /dev/null
+++ b/snippets/articles/s/js-compare-string-case-accent-insensitive.md
@@ -0,0 +1,27 @@
+---
+title: "Tip: Compare strings regardless of case and accent"
+shortTitle: Case and accent-insensitive string comparison
+type: tip
+language: javascript
+tags: [string,comparison]
+author: chalarangelo
+cover: memories-of-pineapple-1
+excerpt: Here's a quick tip on how to compare and sort arrays of strings, ignoring case and accents.
+dateModified: 2022-07-17T05:00:00-04:00
+---
+
+Comparing and sorting JavaScript strings is rather common. Usually, the use of `String.prototype.localeCompare()` is sufficient for sorting arrays of strings in most scenarios. Dealing with accents and cases can get tricky, however, and lead to unexpected results. This is where `Intl.Collator` comes into play, an object used for language-sensitive string comparison. Using `Intl.Collator.prototype.compare()`, you can sort strings regardless of their case or accent and it can even accept a locale argument.
+
+```js
+const arr = ['ä', 'a', 'b', 'A', 'B', 'Å'];
+
+const localeCompare = (a, b) => a.localeCompare(b);
+const collator = new Intl.Collator();
+const deCollator = new Intl.Collator('de');
+const svCollator = new Intl.Collator('sv');
+
+arr.sort(localeCompare);      // ['a', 'A', 'Å', 'ä', 'b', 'B']
+arr.sort(collator.compare);   // ['a', 'A', 'Å', 'ä', 'b', 'B']
+arr.sort(deCollator.compare); // ['a', 'A', 'Å', 'ä', 'b', 'B']
+arr.sort(svCollator.compare); // ['a', 'A', 'b', 'B', 'Å', 'ä']
+```
diff --git a/snippets/articles/s/js-construct-url.md b/snippets/articles/s/js-construct-url.md
new file mode 100644
index 000000000..1ff3793fe
--- /dev/null
+++ b/snippets/articles/s/js-construct-url.md
@@ -0,0 +1,66 @@
+---
+title: How to construct a URL in JavaScript
+shortTitle: Construct a URL in JavaScript
+type: story
+language: javascript
+tags: [string,browser]
+author: chalarangelo
+cover: alfama
+excerpt: A short guide on how to correctly construct a URL in JavaScript.
+dateModified: 2023-02-26T05:00:00-04:00
+---
+
+Oftentimes, we need to **create a URL in JavaScript**, to request a resource or redirect the user. A seemingly simple task, yet URLs can be quite nuanced and complex, requiring a lot of attention to get right. This rings especially true if you've ever worked with different encodings and multiple **query parameters**.
+
+Naively, many developers reach for template literals to construct a URL. After all, URLs are simply strings and interpolation can be used to add parameters as needed. Except, this approach is error-prone and can lead to bugs. Let's take a look at an example:
+
+```js
+const query = "Where's Waldø?";
+const locale = "en-US";
+const campaign = "promo_email";
+
+const url = `https://examp.le?q=${query}&lang=${locale}&from=${campaign}`;
+// "https://examp.le?q=Where's Waldø?&lang=en-US&from=promo_email"
+```
+
+As you can see, template literals aren't well-suited for URLs, as they won't **encode special characters**. If you've worked with JavaScript for any amount of time, you might reach for `encodeURIComponent()` to fix this:
+
+```js
+const query = "Where's Waldø?";
+const locale = "en-US";
+const campaign = "promo_email";
+
+const url = `https://examp.le
+  ?q=${
+    encodeURIComponent(query)
+  }&lang=${
+    encodeURIComponent(locale)
+  }&from=${
+    encodeURIComponent(campaign)
+  }`;
+// "https://examp.le\n  ?q=Where's%20Wald%C3%B8%3F&lang=en-US&from=promo_email"
+```
+
+Surely, this dealt with encoding, but the multiline string has sneaked a newline character (`\n`) into the URL. This is because template literals preserve whitespace, leading to such issues. Breaking the string into multiple lines and concatenating them can help, but the code is starting to get ugly.
+
+Obviously, there are other issues that might come into play, making this a **non-trivial problem** to solve. Luckily, there's a better way to construct URLs in JavaScript, using the `URL` object. Let's see how we can use it to solve the problem above:
+
+```js
+const query = "Where's Waldø?";
+const locale = "en-US";
+const campaign = "promo_email";
+
+// Good
+const url = new URL('https://examp.le');
+
+url.searchParams.set('q', query);
+url.searchParams.set('lang', locale);
+url.searchParams.set('from', campaign);
+
+url.toString();
+// 'https://examp.le/?q=Where%27s+Wald%C3%B8%3F&lang=en-US&from=promo_email'
+```
+
+Admittedly, using the `URL` object can be a bit more verbose, but it's a worthwhile tradeoff. The code is much more readable and maintainable, and it's less prone to errors. Query parameters are now encoded properly, and delimiters are added automatically.
+
+While query parameters are the most common issue when dealing with URLs, the `URL` object can be useful in many other situations. For example, you can change the protocol, hostname, port, path, hash, etc. of a URL, or even parse an existing URL into its components. If you're interested, you should check out previous articles about how you can [edit URL parameters](/articles/s/js-edit-url-params) and the [`window.location` cheat sheet](/articles/s/js-window-location-cheatsheet).
diff --git a/snippets/articles/s/js-create-element.md b/snippets/articles/s/js-create-element.md
new file mode 100644
index 000000000..bc7e6e780
--- /dev/null
+++ b/snippets/articles/s/js-create-element.md
@@ -0,0 +1,59 @@
+---
+title: Creating HTML elements in JavaScript
+shortTitle: Creating HTML elements
+type: story
+language: javascript
+tags: [browser]
+author: chalarangelo
+cover: body-of-water
+excerpt: Learn how to create HTML elements in JavaScript, by abstracting the creation logic into a function.
+dateModified: 2022-05-29T05:00:00-04:00
+---
+
+JavaScript's `Document.createElement()` method is used to create new HTML elements. Here's what that looks like in action:
+
+```js
+const root = document.body;
+
+const newElement = document.createElement('div');
+newElement.textContent = 'Hello World';
+
+root.append(newElement);
+```
+
+As you can see, creating an element is easy. The tiresome part is having to set all of its attributes and then add it to the DOM. Worse even, creating multiple elements with the same set of attributes requires a lot of repetitive code.
+
+Luckily, we can abstract element creation into a function. In fact, we can use objects to pass attributes to the element. Using `Object.entries()` we can iterate over the object and set the attributes. Here's what that looks like:
+
+```js
+const root = document.body;
+
+const createElement = (el, parent, prepend = false) => {
+  const { nodeName = 'div', ...attrs } = el;
+  const element = document.createElement(nodeName);
+  Object.entries(attrs).forEach(([attr, value]) => {
+    element[attr] = value;
+  });
+  if (prepend) parent.prepend(element);
+  else parent.append(element);
+};
+
+createElement(
+  {
+    nodeName: 'div',
+    textContent: 'Hello world',
+  },
+  root
+);
+
+createElement(
+  {
+    nodeName: 'p',
+    textContent: 'Hi',
+  },
+  root,
+  true
+);
+```
+
+That's pretty useful, but what happens if we have an HTML string we want to create an element from, instead? We have a [createElement snippet](/js/s/create-element) that does something along those lines. The only part that's missing is appending it to the parent element.
diff --git a/snippets/articles/s/js-data-structures-binary-search-tree.md b/snippets/articles/s/js-data-structures-binary-search-tree.md
new file mode 100644
index 000000000..a574171f3
--- /dev/null
+++ b/snippets/articles/s/js-data-structures-binary-search-tree.md
@@ -0,0 +1,218 @@
+---
+title: JavaScript Data Structures - Binary Search Tree
+shortTitle: Binary Search Tree
+type: story
+language: javascript
+tags: [class]
+author: chalarangelo
+cover: purple-flower-macro-4
+excerpt: A binary search tree is a hierarchical data structure of ordered nodes with at most two children each.
+dateModified: 2021-08-31T05:00:00-04:00
+---
+
+### Definition
+
+A binary search tree is a data structure consisting of a set of ordered linked nodes that represent a hierarchical tree structure. Each node is linked to others via parent-children relationship. Any given node can have at most two children (left and right). The first node in the binary search tree is the root, whereas nodes without any children are the leaves. The binary search tree is organized in such a way that for any given node, all nodes in its left subtree have a key less than itself and all nodes in its right subtree have a key greater than itself.
+
+![JavaScript Binary Search Tree visualization](./illustrations/ds-binary-search-tree.png)
+
+Each node in a binary search tree data structure must have the following properties:
+
+- `key`: The key of the node
+- `value`: The value of the node
+- `parent`: The parent of the node (`null` if there is none)
+- `left`: A pointer to the node's left child (`null` if there is none)
+- `right`: A pointer to the node's right child (`null` if there is none)
+
+The main operations of a binary search tree data structure are:
+
+- `insert`: Inserts a node as a child of the given parent node
+- `remove`: Removes a node and its children from the binary search tree
+- `has`: Checks if a given node exists
+- `find`: Retrieves a given node
+- `preOrderTraversal`: Traverses the binary search tree by recursively traversing each node followed by its children
+- `postOrderTraversal`: Traverses the binary search tree by recursively traversing each node's children followed by the node
+- `inOrderTraversal`: Traverses the binary search tree by recursively traversing each node's left child, followed by the node, followed by its right child
+
+### Implementation
+
+```js
+class BinarySearchTreeNode {
+  constructor(key, value = key, parent = null) {
+    this.key = key;
+    this.value = value;
+    this.parent = parent;
+    this.left = null;
+    this.right = null;
+  }
+
+  get isLeaf() {
+    return this.left === null && this.right === null;
+  }
+
+  get hasChildren() {
+    return !this.isLeaf;
+  }
+}
+
+class BinarySearchTree {
+  constructor(key, value = key) {
+    this.root = new BinarySearchTreeNode(key, value);
+  }
+
+  *inOrderTraversal(node = this.root) {
+    if (node.left) yield* this.inOrderTraversal(node.left);
+    yield node;
+    if (node.right) yield* this.inOrderTraversal(node.right);
+  }
+
+  *postOrderTraversal(node = this.root) {
+    if (node.left) yield* this.postOrderTraversal(node.left);
+    if (node.right) yield* this.postOrderTraversal(node.right);
+    yield node;
+  }
+
+  *preOrderTraversal(node = this.root) {
+    yield node;
+    if (node.left) yield* this.preOrderTraversal(node.left);
+    if (node.right) yield* this.preOrderTraversal(node.right);
+  }
+
+  insert(key, value = key) {
+    let node = this.root;
+    while (true) {
+      if (node.key === key) return false;
+      if (node.key > key) {
+        if (node.left !== null) node = node.left;
+        else {
+          node.left = new BinarySearchTreeNode(key, value, node);
+          return true;
+        }
+      } else if (node.key < key) {
+        if (node.right !== null) node = node.right;
+        else {
+          node.right = new BinarySearchTreeNode(key, value, node);
+          return true;
+        }
+      }
+    }
+  }
+
+  has(key) {
+    for (let node of this.postOrderTraversal()) {
+      if (node.key === key) return true;
+    }
+    return false;
+  }
+
+  find(key) {
+    for (let node of this.postOrderTraversal()) {
+      if (node.key === key) return node;
+    }
+    return undefined;
+  }
+
+  remove(key) {
+    const node = this.find(key);
+    if (!node) return false;
+    const isRoot = node.parent === null;
+    const isLeftChild = !isRoot ? node.parent.left === node : false;
+    const hasBothChildren = node.left !== null && node.right !== null;
+
+    if (node.isLeaf) {
+      if (!isRoot) {
+        if (isLeftChild) node.parent.left = null;
+        else node.parent.right = null;
+      } else {
+        this.root = null;
+      }
+      return true;
+    } else if (!hasBothChildren) {
+      const child = node.left !== null ? node.left : node.right;
+      if (!isRoot) {
+        if (isLeftChild) node.parent.left = child;
+        else node.parent.right = child;
+      } else {
+        this.root = child;
+      }
+      child.parent = node.parent;
+      return true;
+    } else {
+      const rightmostLeft = [...this.inOrderTraversal(node.left)].slice(-1)[0];
+      rightmostLeft.parent = node.parent;
+      if (!isRoot) {
+        if (isLeftChild) node.parent.left = rightmostLeft;
+        else node.parent.right = rightmostLeft;
+      } else {
+        this.root = rightmostLeft;
+      }
+      rightmostLeft.right = node.right;
+      node.right.parent = rightmostLeft;
+      return true;
+    }
+  }
+}
+```
+
+- Create a `class` for the `BinarySearchTreeNode` with a `constructor` that initializes the appropriate `key`, `value`, `parent`, `left` and `right` properties.
+- Define an `isLeaf` getter, that uses `Array.prototype.length` to check if both `left` and `right` are empty.
+- Define a `hasChildren` getter, that is the reverse of the `isLeaf` getter.
+- Create a `class` for the `BinarySearchTree` with a `constructor` that initializes the `root` of the binary search tree.
+- Define a `preOrderTraversal()` generator method that traverses the binary search tree in pre-order, using the `yield*` syntax to recursively delegate traversal to itself.
+- Define a `postOrderTraversal()` generator method that traverses the binary search tree in post-order, using the `yield*` syntax to recursively delegate traversal to itself.
+- Define a `inOrderTraversal()` generator method that traverses the binary search tree in in-order, using the `yield*` syntax to recursively delegate traversal to itself.
+- Define an `insert()` method, that uses a `while` loop to search the binary search tree, moving through each node's children, until an appropriate position is found to insert a new child `BinarySearchTreeNode` either as the `left` or `right` child, depending on the given `key`.
+- Define a `has()` method, that uses the `preOrderTraversal()` method to check if the given node exists in the binary search tree.
+- Define a `find()` method, that uses the `preOrderTraversal()` method to retrieve the given node in the binary search tree.
+- Define a `remove()` method, that removes the given `BinarySearchTreeNode` from the binary search tree, deleting any links to it and updating the binary search tree to retain its order.
+
+```js
+const tree = new BinarySearchTree(30);
+
+tree.insert(10);
+tree.insert(15);
+tree.insert(12);
+tree.insert(40);
+tree.insert(35);
+tree.insert(50);
+
+[...tree.preOrderTraversal()].map(x => x.value);
+// [30, 10, 15, 12, 40, 35, 50]
+
+[...tree.inOrderTraversal()].map(x => x.value);
+// [10, 12, 15, 30, 35, 40, 50]
+
+[...tree.postOrderTraversal()].map(x => x.value);
+// [12, 15, 10, 35, 50, 40, 30]
+
+tree.root.value;                // 30
+tree.root.hasChildren;          // true
+
+tree.find(12).isLeaf;           // true
+tree.find(40).isLeaf;           // false
+tree.find(50).parent.value;     // 40
+tree.find(15).left.value;       // 12
+tree.find(12).right;            // null
+
+tree.remove(12);
+
+[...tree.preOrderTraversal()].map(x => x.value);
+// [30, 10, 15, 40, 35, 50]
+
+tree.remove(10);
+
+[...tree.preOrderTraversal()].map(v => ({
+  key: v.key,
+  parent: v.parent ? v.parent.key : null,
+})); // [30, 15, 40, 35, 50]
+
+tree.remove(40);
+
+[...tree.preOrderTraversal()].map(x => x.value);
+// [30, 15, 40, 35, 50]
+
+tree.remove(30);
+
+[...tree.preOrderTraversal()].map(x => x.value);
+// [15, 35, 50]
+```
diff --git a/snippets/articles/s/js-data-structures-binary-tree.md b/snippets/articles/s/js-data-structures-binary-tree.md
new file mode 100644
index 000000000..c7bf44f8c
--- /dev/null
+++ b/snippets/articles/s/js-data-structures-binary-tree.md
@@ -0,0 +1,164 @@
+---
+title: JavaScript Data Structures - Binary Tree
+shortTitle: Binary Tree
+type: story
+language: javascript
+tags: [class]
+author: chalarangelo
+cover: purple-flower-macro-3
+excerpt: A binary tree is a hierarchical data structure of linked nodes with at most two children each.
+dateModified: 2021-08-26T05:00:00-04:00
+---
+
+### Definition
+
+A binary tree is a data structure consisting of a set of linked nodes that represent a hierarchical tree structure. Each node is linked to others via parent-children relationship. Any given node can have at most two children (left and right). The first node in the binary tree is the root, whereas nodes without any children are the leaves.
+
+![JavaScript Binary Tree visualization](./illustrations/ds-binary-tree.png)
+
+Each node in a binary tree data structure must have the following properties:
+
+- `key`: The key of the node
+- `value`: The value of the node
+- `parent`: The parent of the node (`null` if there is none)
+- `left`: A pointer to the node's left child (`null` if there is none)
+- `right`: A pointer to the node's right child (`null` if there is none)
+
+The main operations of a binary tree data structure are:
+
+- `insert`: Inserts a node as a child of the given parent node
+- `remove`: Removes a node and its children from the binary tree
+- `find`: Retrieves a given node
+- `preOrderTraversal`: Traverses the binary tree by recursively traversing each node followed by its children
+- `postOrderTraversal`: Traverses the binary tree by recursively traversing each node's children followed by the node
+- `inOrderTraversal`: Traverses the binary tree by recursively traversing each node's left child, followed by the node, followed by its right child
+
+### Implementation
+
+```js
+class BinaryTreeNode {
+  constructor(key, value = key, parent = null) {
+    this.key = key;
+    this.value = value;
+    this.parent = parent;
+    this.left = null;
+    this.right = null;
+  }
+
+  get isLeaf() {
+    return this.left === null && this.right === null;
+  }
+
+  get hasChildren() {
+    return !this.isLeaf;
+  }
+}
+
+class BinaryTree {
+  constructor(key, value = key) {
+    this.root = new BinaryTreeNode(key, value);
+  }
+
+  *inOrderTraversal(node = this.root) {
+    if (node.left) yield* this.inOrderTraversal(node.left);
+    yield node;
+    if (node.right) yield* this.inOrderTraversal(node.right);
+  }
+
+  *postOrderTraversal(node = this.root) {
+    if (node.left) yield* this.postOrderTraversal(node.left);
+    if (node.right) yield* this.postOrderTraversal(node.right);
+    yield node;
+  }
+
+  *preOrderTraversal(node = this.root) {
+    yield node;
+    if (node.left) yield* this.preOrderTraversal(node.left);
+    if (node.right) yield* this.preOrderTraversal(node.right);
+  }
+
+  insert(
+    parentNodeKey,
+    key,
+    value = key,
+    { left, right } = { left: true, right: true }
+  ) {
+    for (let node of this.preOrderTraversal()) {
+      if (node.key === parentNodeKey) {
+        const canInsertLeft = left && node.left === null;
+        const canInsertRight = right && node.right === null;
+        if (!canInsertLeft && !canInsertRight) return false;
+        if (canInsertLeft) {
+          node.left = new BinaryTreeNode(key, value, node);
+          return true;
+        }
+        if (canInsertRight) {
+          node.right = new BinaryTreeNode(key, value, node);
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  remove(key) {
+    for (let node of this.preOrderTraversal()) {
+      if (node.left.key === key) {
+        node.left = null;
+        return true;
+      }
+      if (node.right.key === key) {
+        node.right = null;
+        return true;
+      }
+    }
+    return false;
+  }
+
+  find(key) {
+    for (let node of this.preOrderTraversal()) {
+      if (node.key === key) return node;
+    }
+    return undefined;
+  }
+}
+```
+
+- Create a `class` for the `BinaryTreeNode` with a `constructor` that initializes the appropriate `key`, `value`, `parent`, `left` and `right` properties.
+- Define an `isLeaf` getter, that uses `Array.prototype.length` to check if both `left` and `right` are empty.
+- Define a `hasChildren` getter, that is the reverse of the `isLeaf` getter.
+- Create a `class` for the `BinaryTree` with a `constructor` that initializes the `root` of the binary tree.
+- Define a `preOrderTraversal()` generator method that traverses the binary tree in pre-order, using the `yield*` syntax to recursively delegate traversal to itself.
+- Define a `postOrderTraversal()` generator method that traverses the binary tree in post-order, using the `yield*` syntax to recursively delegate traversal to itself.
+- Define a `inOrderTraversal()` generator method that traverses the binary tree in in-order, using the `yield*` syntax to recursively delegate traversal to itself.
+- Define an `insert()` method, that uses the `preOrderTraversal()` method to find the given parent node and insert a new child `BinaryTreeNode` either as the `left` or `right` child, depending on the passed options object.
+- Define a `remove()` method, that uses the `preOrderTraversal()` method and `Array.prototype.filter()` to remove a `BinaryTreeNode` from the binary tree.
+- Define a `find()` method, that uses the `preOrderTraversal()` method to retrieve the given node in the binary tree.
+
+```js
+const tree = new BinaryTree(1, 'AB');
+
+tree.insert(1, 11, 'AC');
+tree.insert(1, 12, 'BC');
+tree.insert(12, 121, 'BG', { right: true });
+
+[...tree.preOrderTraversal()].map(x => x.value);
+// ['AB', 'AC', 'BC', 'BCG']
+
+[...tree.inOrderTraversal()].map(x => x.value);
+// ['AC', 'AB', 'BC', 'BG']
+
+tree.root.value;                // 'AB'
+tree.root.hasChildren;          // true
+
+tree.find(12).isLeaf;           // false
+tree.find(121).isLeaf;          // true
+tree.find(121).parent.value;    // 'BC'
+tree.find(12).left;             // null
+tree.find(12).right.value;      // 'BG'
+
+tree.remove(12);
+
+[...tree.postOrderTraversal()].map(x => x.value);
+// ['AC', 'AB']
+```
diff --git a/snippets/articles/s/js-data-structures-doubly-linked-list.md b/snippets/articles/s/js-data-structures-doubly-linked-list.md
new file mode 100644
index 000000000..bf34066c9
--- /dev/null
+++ b/snippets/articles/s/js-data-structures-doubly-linked-list.md
@@ -0,0 +1,148 @@
+---
+title: JavaScript Data Structures - Doubly Linked List
+shortTitle: Doubly Linked List
+type: story
+language: javascript
+tags: [class]
+author: chalarangelo
+cover: purple-flower-macro-4
+excerpt: A doubly linked list is a linear data structure where each element points both to the next and the previous one.
+dateModified: 2021-08-12T05:00:00-04:00
+---
+
+### Definition
+
+A doubly linked list is a linear data structure that represents a collection of elements, where each element points both to the next and the previous one. The first element in the doubly linked list is the head and the last element is the tail.
+
+![JavaScript Doubly Linked List visualization](./illustrations/ds-doubly-linked-list.png)
+
+Each element of a doubly linked list data structure must have the following properties:
+
+- `value`: The value of the element
+- `next`: A pointer to the next element in the linked list (`null` if there is none)
+- `previous`: A pointer to the previous element in the linked list (`null` if there is none)
+
+The main properties of a doubly linked list data structure are:
+
+- `size`: The number of elements in the doubly linked list
+- `head`: The first element in the doubly linked list
+- `tail`: The last element in the doubly linked list
+
+The main operations of a doubly linked list data structure are:
+
+- `insertAt`: Inserts an element at the specific index
+- `removeAt`: Removes the element at the specific index
+- `getAt`: Retrieves the element at the specific index
+- `clear`: Empties the doubly linked list
+- `reverse`: Reverses the order of elements in the doubly linked list
+
+### Implementation
+
+```js
+class DoublyLinkedList {
+  constructor() {
+    this.nodes = [];
+  }
+
+  get size() {
+    return this.nodes.length;
+  }
+
+  get head() {
+    return this.size ? this.nodes[0] : null;
+  }
+
+  get tail() {
+    return this.size ? this.nodes[this.size - 1] : null;
+  }
+
+  insertAt(index, value) {
+    const previousNode = this.nodes[index - 1] || null;
+    const nextNode = this.nodes[index] || null;
+    const node = { value, next: nextNode, previous: previousNode };
+
+    if (previousNode) previousNode.next = node;
+    if (nextNode) nextNode.previous = node;
+    this.nodes.splice(index, 0, node);
+  }
+
+  insertFirst(value) {
+    this.insertAt(0, value);
+  }
+
+  insertLast(value) {
+    this.insertAt(this.size, value);
+  }
+
+  getAt(index) {
+    return this.nodes[index];
+  }
+
+  removeAt(index) {
+    const previousNode = this.nodes[index - 1] || null;
+    const nextNode = this.nodes[index + 1] || null;
+
+    if (previousNode) previousNode.next = nextNode;
+    if (nextNode) nextNode.previous = previousNode;
+
+    return this.nodes.splice(index, 1);
+  }
+
+  clear() {
+    this.nodes = [];
+  }
+
+  reverse() {
+    this.nodes = this.nodes.reduce((acc, { value }) => {
+      const nextNode = acc[0] || null;
+      const node = { value, next: nextNode, previous: null };
+      if (nextNode) nextNode.previous = node;
+      return [node, ...acc];
+    }, []);
+  }
+
+  *[Symbol.iterator]() {
+    yield* this.nodes;
+  }
+}
+```
+
+- Create a `class` with a `constructor` that initializes an empty array, `nodes`, for each instance.
+- Define a `size` getter, that returns that uses `Array.prototype.length` to return the number of elements in the `nodes` array.
+- Define a `head` getter, that returns the first element of the `nodes` array or `null` if empty.
+- Define a `tail` getter, that returns the last element of the `nodes` array or `null` if empty.
+- Define an `insertAt()` method, which uses `Array.prototype.splice()` to add a new object in the `nodes` array, updating the `next` and `previous` keys of the previous and next elements respectively.
+- Define two convenience methods, `insertFirst()` and `insertLast()` that use the `insertAt()` method to insert a new element at the start or end of the `nodes` array respectively.
+- Define a `getAt()` method, which retrieves the element in the given `index`.
+- Define a `removeAt()` method, which uses `Array.prototype.splice()` to remove an object in the `nodes` array, updating the `next` and `previous` keys of the previous and next elements respectively.
+- Define a `clear()` method, which empties the `nodes` array.
+- Define a `reverse()` method, which uses `Array.prototype.reduce()` and the spread operator (`...`) to reverse the order of the `nodes` array, updating the `next` and `previous` keys of each element appropriately.
+- Define a generator method for `Symbol.iterator`, which delegates to the `nodes` array's iterator using the `yield*` syntax.
+
+```js
+const list = new DoublyLinkedList();
+
+list.insertFirst(1);
+list.insertFirst(2);
+list.insertFirst(3);
+list.insertLast(4);
+list.insertAt(3, 5);
+
+list.size;                      // 5
+list.head.value;                // 3
+list.head.next.value;           // 2
+list.tail.value;                // 4
+list.tail.previous.value;       // 5
+[...list.map(e => e.value)];    // [3, 2, 1, 5, 4]
+
+list.removeAt(1);               // 2
+list.getAt(1).value;            // 1
+list.head.next.value;           // 1
+[...list.map(e => e.value)];    // [3, 1, 5, 4]
+
+list.reverse();
+[...list.map(e => e.value)];    // [4, 5, 1, 3]
+
+list.clear();
+list.size;                      // 0
+```
diff --git a/snippets/articles/s/js-data-structures-graph.md b/snippets/articles/s/js-data-structures-graph.md
new file mode 100644
index 000000000..384b1734c
--- /dev/null
+++ b/snippets/articles/s/js-data-structures-graph.md
@@ -0,0 +1,169 @@
+---
+title: JavaScript Data Structures - Graph
+shortTitle: Graph
+type: story
+language: javascript
+tags: [class]
+author: chalarangelo
+cover: purple-flower-macro-1
+excerpt: A graph is a data structure consisting of a set of vertices connected by a set of edges.
+dateModified: 2021-08-17T05:00:00-04:00
+---
+
+### Definition
+
+A graph is a data structure consisting of a set of nodes or vertices and a set of edges that represent connections between those nodes. Graphs can be directed or undirected, while their edges can be assigned numeric weights.
+
+![JavaScript Graph visualization](./illustrations/ds-graph.png)
+
+Each node in a graph data structure must have the following properties:
+
+- `key`: The key of the node
+- `value`: The value of the node
+
+Each edge in a graph data structure must have the following properties:
+
+- `a`: The starting node of the edge
+- `b`: The target node of the edge
+- `weight`: An optional numeric weight value for the edge
+
+The main operations of a graph data structure are:
+
+- `addNode`: Inserts a new node with the specific key and value
+- `addEdge`: Inserts a new edge between two given nodes, optionally setting its weight
+- `removeNode`: Removes the node with the specified key
+- `removeEdge`: Removes the edge between two given nodes
+- `findNode`: Retrieves the node with the given key
+- `hasEdge`: Checks if the graph has an edge between two given nodes
+- `setEdgeWeight`: Sets the weight of a given edge
+- `getEdgeWeight`: Gets the weight of a given edge
+- `adjacent`: Finds all nodes for which an edge exists from a given node
+- `indegree`: Calculates the total number of edges to a given node
+- `outdegree`: Calculates the total number of edges from a given node
+
+### Implementation
+
+```js
+class Graph {
+  constructor(directed = true) {
+    this.directed = directed;
+    this.nodes = [];
+    this.edges = new Map();
+  }
+
+  addNode(key, value = key) {
+    this.nodes.push({ key, value });
+  }
+
+  addEdge(a, b, weight) {
+    this.edges.set(JSON.stringify([a, b]), { a, b, weight });
+    if (!this.directed)
+      this.edges.set(JSON.stringify([b, a]), { a: b, b: a, weight });
+  }
+
+  removeNode(key) {
+    this.nodes = this.nodes.filter(n => n.key !== key);
+    [...this.edges.values()].forEach(({ a, b }) => {
+      if (a === key || b === key) this.edges.delete(JSON.stringify([a, b]));
+    });
+  }
+
+  removeEdge(a, b) {
+    this.edges.delete(JSON.stringify([a, b]));
+    if (!this.directed) this.edges.delete(JSON.stringify([b, a]));
+  }
+
+  findNode(key) {
+    return this.nodes.find(x => x.key === key);
+  }
+
+  hasEdge(a, b) {
+    return this.edges.has(JSON.stringify([a, b]));
+  }
+
+  setEdgeWeight(a, b, weight) {
+    this.edges.set(JSON.stringify([a, b]), { a, b, weight });
+    if (!this.directed)
+      this.edges.set(JSON.stringify([b, a]), { a: b, b: a, weight });
+  }
+
+  getEdgeWeight(a, b) {
+    return this.edges.get(JSON.stringify([a, b])).weight;
+  }
+
+  adjacent(key) {
+    return [...this.edges.values()].reduce((acc, { a, b }) => {
+      if (a === key) acc.push(b);
+      return acc;
+    }, []);
+  }
+
+  indegree(key) {
+    return [...this.edges.values()].reduce((acc, { a, b }) => {
+      if (b === key) acc++;
+      return acc;
+    }, 0);
+  }
+
+  outdegree(key) {
+    return [...this.edges.values()].reduce((acc, { a, b }) => {
+      if (a === key) acc++;
+      return acc;
+    }, 0);
+  }
+}
+```
+
+- Create a `class` with a `constructor` that initializes an empty array, `nodes`, and a `Map`, `edges`, for each instance. The optional argument, `directed`, specifies if the graph is directed or not.
+
+- Define an `addNode()` method, which uses `Array.prototype.push()` to add a new node in the `nodes` array.
+- Define an `addEdge()` method, which uses `Map.prototype.set()` to add a new edge to the `edges` Map, using `JSON.stringify()` to produce a unique key.
+- Define a `removeNode()` method, which uses `Array.prototype.filter()` and `Map.prototype.delete()` to remove the given node and any edges connected to it.
+- Define a `removeEdge()` method, which uses `Map.prototype.delete()` to remove the given edge.
+- Define a `findNode()` method, which uses `Array.prototype.find()` to return the given node, if any.
+- Define a `hasEdge()` method, which uses `Map.prototype.has()` and `JSON.stringify()` to check if the given edge exists in the `edges` Map.
+- Define a `setEdgeWeight()` method, which uses `Map.prototype.set()` to set the weight of the appropriate edge, whose key is produced by `JSON.stringify()`.
+- Define a `getEdgeWeight()` method, which uses `Map.prototype.get()` to get the eight of the appropriate edge, whose key is produced by `JSON.stringify()`.
+- Define an `adjacent()` method, which uses `Map.prototype.values()`, `Array.prototype.reduce()` and `Array.prototype.push()` to find all nodes connected to the given node.
+- Define an `indegree()` method, which uses `Map.prototype.values()` and `Array.prototype.reduce()` to count the number of edges to the given node.
+- Define an `outdegree()` method, which uses `Map.prototype.values()` and `Array.prototype.reduce()` to count the number of edges from the given node.
+
+```js
+const g = new Graph();
+
+g.addNode('a');
+g.addNode('b');
+g.addNode('c');
+g.addNode('d');
+
+g.addEdge('a', 'c');
+g.addEdge('b', 'c');
+g.addEdge('c', 'b');
+g.addEdge('d', 'a');
+
+g.nodes.map(x => x.value);  // ['a', 'b', 'c', 'd']
+[...g.edges.values()].map(({ a, b }) => `${a} => ${b}`);
+// ['a => c', 'b => c', 'c => b', 'd => a']
+
+g.adjacent('c');            // ['b']
+
+g.indegree('c');            // 2
+g.outdegree('c');           // 1
+
+g.hasEdge('d', 'a');        // true
+g.hasEdge('a', 'd');        // false
+
+g.removeEdge('c', 'b');
+
+[...g.edges.values()].map(({ a, b }) => `${a} => ${b}`);
+// ['a => c', 'b => c', 'd => a']
+
+g.removeNode('c');
+
+g.nodes.map(x => x.value);  // ['a', 'b', 'd']
+[...g.edges.values()].map(({ a, b }) => `${a} => ${b}`);
+// ['d => a']
+
+g.setEdgeWeight('d', 'a', 5);
+g.getEdgeWeight('d', 'a');  // 5
+```
diff --git a/snippets/articles/s/js-data-structures-linked-list.md b/snippets/articles/s/js-data-structures-linked-list.md
new file mode 100644
index 000000000..20dd9860f
--- /dev/null
+++ b/snippets/articles/s/js-data-structures-linked-list.md
@@ -0,0 +1,142 @@
+---
+title: JavaScript Data Structures - Linked List
+shortTitle: Linked List
+type: story
+language: javascript
+tags: [class]
+author: chalarangelo
+cover: purple-flower-macro-3
+excerpt: A linked list is a linear data structure where each element points to the next.
+dateModified: 2021-08-08T05:00:00-04:00
+---
+
+### Definition
+
+A linked list is a linear data structure that represents a collection of elements, where each element points to the next one. The first element in the linked list is the head and the last element is the tail.
+
+![JavaScript Linked List visualization](./illustrations/ds-linked-list.png)
+
+Each element of a linked list data structure must have the following properties:
+
+- `value`: The value of the element
+- `next`: A pointer to the next element in the linked list (`null` if there is none)
+
+The main properties of a linked list data structure are:
+
+- `size`: The number of elements in the linked list
+- `head`: The first element in the linked list
+- `tail`: The last element in the linked list
+
+The main operations of a linked list data structure are:
+
+- `insertAt`: Inserts an element at the specific index
+- `removeAt`: Removes the element at the specific index
+- `getAt`: Retrieves the element at the specific index
+- `clear`: Empties the linked list
+- `reverse`: Reverses the order of elements in the linked list
+
+### Implementation
+
+```js
+class LinkedList {
+  constructor() {
+    this.nodes = [];
+  }
+
+  get size() {
+    return this.nodes.length;
+  }
+
+  get head() {
+    return this.size ? this.nodes[0] : null;
+  }
+
+  get tail() {
+    return this.size ? this.nodes[this.size - 1] : null;
+  }
+
+  insertAt(index, value) {
+    const previousNode = this.nodes[index - 1] || null;
+    const nextNode = this.nodes[index] || null;
+    const node = { value, next: nextNode };
+
+    if (previousNode) previousNode.next = node;
+    this.nodes.splice(index, 0, node);
+  }
+
+  insertFirst(value) {
+    this.insertAt(0, value);
+  }
+
+  insertLast(value) {
+    this.insertAt(this.size, value);
+  }
+
+  getAt(index) {
+    return this.nodes[index];
+  }
+
+  removeAt(index) {
+    const previousNode = this.nodes[index - 1];
+    const nextNode = this.nodes[index + 1] || null;
+
+    if (previousNode) previousNode.next = nextNode;
+
+    return this.nodes.splice(index, 1);
+  }
+
+  clear() {
+    this.nodes = [];
+  }
+
+  reverse() {
+    this.nodes = this.nodes.reduce(
+      (acc, { value }) => [{ value, next: acc[0] || null }, ...acc],
+      []
+    );
+  }
+
+  *[Symbol.iterator]() {
+    yield* this.nodes;
+  }
+}
+```
+
+- Create a `class` with a `constructor` that initializes an empty array, `nodes`, for each instance.
+- Define a `size` getter, that returns that uses `Array.prototype.length` to return the number of elements in the `nodes` array.
+- Define a `head` getter, that returns the first element of the `nodes` array or `null` if empty.
+- Define a `tail` getter, that returns the last element of the `nodes` array or `null` if empty.
+- Define an `insertAt()` method, which uses `Array.prototype.splice()` to add a new object in the `nodes` array, updating the `next` key of the previous element.
+- Define two convenience methods, `insertFirst()` and `insertLast()` that use the `insertAt()` method to insert a new element at the start or end of the `nodes` array respectively.
+- Define a `getAt()` method, which retrieves the element in the given `index`.
+- Define a `removeAt()` method, which uses `Array.prototype.splice()` to remove an object in the `nodes` array, updating the `next` key of the previous element.
+- Define a `clear()` method, which empties the `nodes` array.
+- Define a `reverse()` method, which uses `Array.prototype.reduce()` and the spread operator (`...`) to reverse the order of the `nodes` array, updating the `next` key of each element appropriately.
+- Define a generator method for `Symbol.iterator`, which delegates to the `nodes` array's iterator using the `yield*` syntax.
+
+```js
+const list = new LinkedList();
+
+list.insertFirst(1);
+list.insertFirst(2);
+list.insertFirst(3);
+list.insertLast(4);
+list.insertAt(3, 5);
+
+list.size;                      // 5
+list.head.value;                // 3
+list.head.next.value;           // 2
+list.tail.value;                // 4
+[...list.map(e => e.value)];    // [3, 2, 1, 5, 4]
+
+list.removeAt(1);               // 2
+list.getAt(1).value;            // 1
+list.head.next.value;           // 1
+[...list.map(e => e.value)];    // [3, 1, 5, 4]
+
+list.reverse();
+[...list.map(e => e.value)];    // [4, 5, 1, 3]
+
+list.clear();
+list.size;                      // 0
+```
diff --git a/snippets/articles/s/js-data-structures-queue.md b/snippets/articles/s/js-data-structures-queue.md
new file mode 100644
index 000000000..85e107f2d
--- /dev/null
+++ b/snippets/articles/s/js-data-structures-queue.md
@@ -0,0 +1,76 @@
+---
+title: JavaScript Data Structures - Queue
+shortTitle: Queue
+type: story
+language: javascript
+tags: [class]
+author: chalarangelo
+cover: purple-flower-macro-2
+excerpt: A queue is a linear data structure which follows a first in, first out (FIFO) order of operations.
+dateModified: 2021-07-29T05:00:00-04:00
+---
+
+### Definition
+
+A queue is a linear data structure that behaves like a real-world queue. It follows a first in, first out (FIFO) order of operations, similar to its real-world counterpart. This means that new items are added to the end of the queue, whereas items are removed from the start of the queue.
+
+![JavaScript Queue visualization](./illustrations/ds-queue.png)
+
+The main operations of a queue data structure are:
+
+- `enqueue`: Adds an element to the end of the queue
+- `dequeue`: Removes an element from the start of the queue
+- `peek`: Retrieves the element at the start of the queue, without removing it
+- `isEmpty`: Checks if the queue is empty
+
+### Implementation
+
+```js
+class Queue {
+  constructor() {
+    this.items = [];
+  }
+
+  enqueue(item) {
+    this.items.push(item);
+  }
+
+  dequeue(item) {
+    return this.items.shift();
+  }
+
+  peek(item) {
+    return this.items[0];
+  }
+
+  isEmpty() {
+    return this.items.length === 0;
+  }
+}
+```
+
+- Create a `class` with a `constructor` that initializes an empty array, `items`, for each instance.
+- Define an `enqueue()` method, which uses `Array.prototype.push()` to add an element to the end of the `items` array.
+- Define a `dequeue()` method, which uses `Array.prototype.shift()` to remove an element from the start of the `items` array.
+- Define a `peek()` method, which retrieves the value of the first element in the `items` array, without removing it.
+- Define an `isEmpty()` method, which uses `Array.prototype.length` to determine if the `items` array is empty.
+
+```js
+const queue = new Queue();
+
+queue.isEmpty();    // true
+
+queue.enqueue('A');
+queue.enqueue('B');
+queue.enqueue('C');
+queue.enqueue('D');
+queue.enqueue('E');
+
+queue.isEmpty();    // false
+
+queue.peek();       // 'A'
+
+queue.dequeue();    // 'A'
+queue.dequeue();    // 'B'
+queue.dequeue();    // 'C'
+```
diff --git a/snippets/articles/s/js-data-structures-stack.md b/snippets/articles/s/js-data-structures-stack.md
new file mode 100644
index 000000000..7c8d80ee4
--- /dev/null
+++ b/snippets/articles/s/js-data-structures-stack.md
@@ -0,0 +1,74 @@
+---
+title: JavaScript Data Structures - Stack
+shortTitle: Stack
+type: story
+language: javascript
+tags: [class]
+author: chalarangelo
+cover: purple-flower-macro-1
+excerpt: A stack is a linear data structure which follows a last in, first out (LIFO) order of operations.
+dateModified: 2021-08-03T05:00:00-04:00
+---
+
+### Definition
+
+A stack is a linear data structure that behaves like a real-world stack of items. It follows a last in, first out (LIFO) order of operations, similar to its real-world counterpart. This means that new items are added to the top of the stack and items are removed from the top of the stack as well.
+
+![JavaScript Stack visualization](./illustrations/ds-stack.png)
+
+The main operations of a stack data structure are:
+
+- `push`: Adds an element to the top of the stack
+- `pop`: Removes an element from the top of the stack
+- `peek`: Retrieves the element at the top of the stack, without removing it
+- `isEmpty`: Checks if the stack is empty
+
+### Implementation
+
+```js
+class Stack {
+  constructor() {
+    this.items = [];
+  }
+
+  push(item) {
+    this.items.unshift(item);
+  }
+
+  pop(item) {
+    return this.items.shift();
+  }
+
+  peek(item) {
+    return this.items[0];
+  }
+
+  isEmpty() {
+    return this.items.length === 0;
+  }
+}
+```
+
+- Create a `class` with a `constructor` that initializes an empty array, `items`, for each instance.
+- Define a `push()` method, which uses `Array.prototype.unshift()` to add an element to the start of the `items` array.
+- Define a `pop()` method, which uses `Array.prototype.shift()` to remove an element from the start of the `items` array.
+- Define a `peek()` method, which retrieves the value of the first element in the `items` array, without removing it.
+- Define an `isEmpty()` method, which uses `Array.prototype.length` to determine if the `items` array is empty.
+
+```js
+const stack = new Stack();
+
+stack.push('apples');
+stack.push('oranges');
+stack.push('pears');
+
+stack.isEmpty();    // false
+
+stack.peek();       // 'pears'
+
+stack.pop();        // 'pears'
+stack.pop();        // 'oranges'
+stack.pop();        // 'apples'
+
+stack.isEmpty();    // true
+```
diff --git a/snippets/articles/s/js-data-structures-tree.md b/snippets/articles/s/js-data-structures-tree.md
new file mode 100644
index 000000000..ced6fd344
--- /dev/null
+++ b/snippets/articles/s/js-data-structures-tree.md
@@ -0,0 +1,138 @@
+---
+title: JavaScript Data Structures - Tree
+shortTitle: Tree
+type: story
+language: javascript
+tags: [class]
+author: chalarangelo
+cover: purple-flower-macro-2
+excerpt: A tree is a data structure consisting of a set of linked nodes representing a hierarchical tree structure.
+dateModified: 2021-08-22T05:00:00-04:00
+---
+
+### Definition
+
+A tree is a data structure consisting of a set of linked nodes that represent a hierarchical tree structure. Each node is linked to others via parent-children relationship. The first node in the tree is the root, whereas nodes without any children are the leaves.
+
+![JavaScript Tree visualization](./illustrations/ds-tree.png)
+
+Each node in a tree data structure must have the following properties:
+
+- `key`: The key of the node
+- `value`: The value of the node
+- `parent`: The parent of the node (`null` if there is none)
+- `children`: An array of pointers to the node's children
+
+The main operations of a tree data structure are:
+
+- `insert`: Inserts a node as a child of the given parent node
+- `remove`: Removes a node and its children from the tree
+- `find`: Retrieves a given node
+- `preOrderTraversal`: Traverses the tree by recursively traversing each node followed by its children
+- `postOrderTraversal`: Traverses the tree by recursively traversing each node's children followed by the node
+
+### Implementation
+
+```js
+class TreeNode {
+  constructor(key, value = key, parent = null) {
+    this.key = key;
+    this.value = value;
+    this.parent = parent;
+    this.children = [];
+  }
+
+  get isLeaf() {
+    return this.children.length === 0;
+  }
+
+  get hasChildren() {
+    return !this.isLeaf;
+  }
+}
+
+class Tree {
+  constructor(key, value = key) {
+    this.root = new TreeNode(key, value);
+  }
+
+  *preOrderTraversal(node = this.root) {
+    yield node;
+    if (node.children.length) {
+      for (let child of node.children) {
+        yield* this.preOrderTraversal(child);
+      }
+    }
+  }
+
+  *postOrderTraversal(node = this.root) {
+    if (node.children.length) {
+      for (let child of node.children) {
+        yield* this.postOrderTraversal(child);
+      }
+    }
+    yield node;
+  }
+
+  insert(parentNodeKey, key, value = key) {
+    for (let node of this.preOrderTraversal()) {
+      if (node.key === parentNodeKey) {
+        node.children.push(new TreeNode(key, value, node));
+        return true;
+      }
+    }
+    return false;
+  }
+
+  remove(key) {
+    for (let node of this.preOrderTraversal()) {
+      const filtered = node.children.filter(c => c.key !== key);
+      if (filtered.length !== node.children.length) {
+        node.children = filtered;
+        return true;
+      }
+    }
+    return false;
+  }
+
+  find(key) {
+    for (let node of this.preOrderTraversal()) {
+      if (node.key === key) return node;
+    }
+    return undefined;
+  }
+}
+```
+
+- Create a `class` for the `TreeNode` with a `constructor` that initializes the appropriate `key`, `value`, `parent` and `children` properties.
+- Define an `isLeaf` getter, that uses `Array.prototype.length` to check if `children` is empty.
+- Define a `hasChildren` getter, that is the reverse of the `isLeaf` getter.
+- Create a `class` for the `Tree` with a `constructor` that initializes the `root` of the tree.
+- Define a `preOrderTraversal()` generator method that traverses the tree in pre-order, using the `yield*` syntax to recursively delegate traversal to itself.
+- Define a `postOrderTraversal()` generator method that traverses the tree in post-order, using the `yield*` syntax to recursively delegate traversal to itself.
+- Define an `insert()` method, that uses the `preOrderTraversal()` method and `Array.prototype.push()` to add a new `TreeNode` to the tree.
+- Define a `remove()` method, that uses the `preOrderTraversal()` method and `Array.prototype.filter()` to remove a `TreeNode` from the tree.
+- Define a `find()` method, that uses the `preOrderTraversal()` method to retrieve the given node in the tree.
+
+```js
+const tree = new Tree(1, 'AB');
+
+tree.insert(1, 11, 'AC');
+tree.insert(1, 12, 'BC');
+tree.insert(12, 121, 'BG');
+
+[...tree.preOrderTraversal()].map(x => x.value);
+// ['AB', 'AC', 'BC', 'BCG']
+
+tree.root.value;              // 'AB'
+tree.root.hasChildren;        // true
+
+tree.find(12).isLeaf;         // false
+tree.find(121).isLeaf;        // true
+tree.find(121).parent.value;  // 'BC'
+
+tree.remove(12);
+
+[...tree.postOrderTraversal()].map(x => x.value);
+// ['AC', 'AB']
+```
diff --git a/snippets/articles/s/js-decimal-to-hex.md b/snippets/articles/s/js-decimal-to-hex.md
new file mode 100644
index 000000000..99d6f3696
--- /dev/null
+++ b/snippets/articles/s/js-decimal-to-hex.md
@@ -0,0 +1,29 @@
+---
+title: "Tip: Convert decimal number to hexadecimal"
+shortTitle: Decimal to hexadecimal
+type: tip
+language: javascript
+tags: [math]
+author: chalarangelo
+cover: waves-from-above
+excerpt: Ever needed to convert a decimal number to hexadecimal? Here's a quick and easy way to do it.
+dateModified: 2022-09-21T05:00:00-04:00
+---
+
+Numeric values are represented in decimal format by default, when converted to strings. If you want to display them in hexadecimal format, you can use `Number.prototype.toString()` and pass the base you want to use (`16`) as an argument.
+
+```js
+const decimalToHex = dec => dec.toString(16);
+
+decimalToHex(0); // '0'
+decimalToHex(255); // 'ff'
+```
+
+Conversely, the opposite might also be needed. You can use `parseInt()` to convert a string to a number in a given base. If you don't specify a base, it will default to `10`.
+
+```js
+const hexToDecimal = hex => parseInt(hex, 16);
+
+hexToDecimal('0'); // 0
+hexToDecimal('ff'); // 255
+```
diff --git a/snippets/articles/s/js-detect-undefined-object-property.md b/snippets/articles/s/js-detect-undefined-object-property.md
new file mode 100644
index 000000000..1a59353a2
--- /dev/null
+++ b/snippets/articles/s/js-detect-undefined-object-property.md
@@ -0,0 +1,34 @@
+---
+title: How can I detect an undefined object property in JavaScript?
+shortTitle: Detect undefined object property
+type: story
+language: javascript
+tags: [object]
+author: chalarangelo
+cover: pink-flower
+excerpt: Learn how to detect `undefined` object properties in JavaScript the correct way.
+dateModified: 2022-08-07T05:00:00-04:00
+---
+
+It’s not uncommon to want to detect object properties with a value of `undefined`. While this seems straightforward on the surface, `undefined` is a rather elusive value to check for.
+
+More often than not solutions point towards direct strict comparison with `undefined` or using `typeof`. Both of these methods have a hard time differentiating between present properties with a value of `undefined` and non-existent properties. This, in turn, makes them prone to silent errors, shall you misspell the property altogether.
+
+```js
+const obj = { prop : undefined };
+obj.prop === undefined; // true
+typeof obj.prop === 'undefined'; // true
+obj.porp === undefined; // true
+typeof obj.porp === 'undefined'; // true
+```
+
+To alleviate the issue, `Object.prototype.hasOwnProperty()` can be used in addition to the previous method to check for the property actually being present on the object. Moreover, it can also be used for the opposite, so you can also detect non-existent properties and handle them accordingly.
+
+```js
+const hasUndefinedProperty = (obj, prop) =>
+  obj.hasOwnProperty(prop) && obj[prop] === undefined;
+
+const obj = { prop: undefined };
+hasUndefinedProperty(obj, 'prop'); // true
+hasUndefinedProperty(obj, 'porp'); // false
+```
diff --git a/snippets/articles/s/js-double-negation-operator.md b/snippets/articles/s/js-double-negation-operator.md
new file mode 100644
index 000000000..56c5e0da5
--- /dev/null
+++ b/snippets/articles/s/js-double-negation-operator.md
@@ -0,0 +1,37 @@
+---
+title: What does the double negation operator do in JavaScript?
+shortTitle: Double negation operator
+type: question
+language: javascript
+tags: [type]
+author: chalarangelo
+cover: memories-of-pineapple-2
+excerpt: You've probably come across the double negation operator (`!!`) before, but do you know what it does?
+dateModified: 2022-07-26T05:00:00-04:00
+---
+
+JavaScript's negation operator (`!`) is a unary operator, used to invert the truth value of its operand. When used twice, known as the double negation operator (`!!`), it can be used to convert a value to a boolean.
+
+```js
+const x = 1;
+const y = null;
+
+!!x; // true
+!!y; // false
+```
+
+Using the double negation operator is functionally equivalent to using the `Boolean()` function, which we explored in depth in a [previous article](/articles/s/javascript-boolean-function). In terms of readability and usability, I would still suggest using the `Boolean()` function. It conveys the intent of the operation more clearly, and it's easier to understand at a glance.
+
+```js
+const x = 1;
+const y = null;
+
+Boolean(x); // true
+Boolean(y); // false
+
+const values = [0, 0, 2, 0, 3];
+// Kinda readable, but not great
+values.filter(x => !!x); // [2, 3]
+// Arguably more readable
+values.filter(Boolean); // [2, 3]
+```
diff --git a/snippets/articles/s/js-dynamic-getter-chain-proxy.md b/snippets/articles/s/js-dynamic-getter-chain-proxy.md
new file mode 100644
index 000000000..a6c8d4eca
--- /dev/null
+++ b/snippets/articles/s/js-dynamic-getter-chain-proxy.md
@@ -0,0 +1,49 @@
+---
+title: Chaining dynamic getters using the Proxy object
+shortTitle: Dynamic getter chaining
+type: story
+language: javascript
+tags: [object,proxy]
+author: chalarangelo
+cover: colorful-rocks
+excerpt: Using the Proxy object, we can create chainable dynamic getters for objects in JavaScript.
+dateModified: 2023-05-28T05:00:00-04:00
+---
+
+The dawn of ES6 brought about jQuery's fall from grace, as a lot of the conveniences it afforded developers were now available in the language itself. However, jQuery's API design was convenient in many ways that native JavaScript often isn't. One of the most practical things jQuery offered was its ability to chain methods together, minimizing duplication and making code more readable.
+
+Looking at the use case at hand, I thought that I could stitch together a general-purpose solution using JavaScript's `Proxy` object. In fact, I think that the concept of dynamic getters and setters that I described in [my previous post](/articles/s/js-dynamic-getter-setter-proxy) is a great place to start.
+
+To recap, intercepting the behavior of the `get` and `set` traps of a `Proxy` object allows us to create dynamic accessors for objects. This is particularly useful when the shape of the data is not known in advance, or when the value of a property needs to be manipulated before it is returned.
+
+In our scenario, we want each property to be accessed as a function. The function should do one of two things, depending on the argument it receives:
+
+- If the argument is `undefined`, then the property should be returned as-is.
+- If the argument is any other value, the property should be set to the value of the argument and a proxy of the object should be returned.
+
+Given these requirements, we can define the handler's behavior for the `get` trap. All we need to do is check if the argument is `undefined` and choose which behavior to perform. Here's what the code looks like:
+
+```js
+const getHandler = {
+  get: (target, prop) => {
+    return value => {
+      if (typeof value !== 'undefined') {
+        target[prop] = value;
+        return new Proxy(target, getHandler);
+      }
+      return target[prop];
+    };
+  }
+};
+
+const styles = {};
+const proxiedStyles = new Proxy(styles, getHandler);
+
+proxiedStyles.color('#101010').background('#fefefe').margin('4px 8px');
+
+proxiedStyles.color(); // #101010
+proxiedStyles.background(); // #fefefe
+proxiedStyles.margin(); // 4px 8px
+```
+
+As you can see the handler is pretty short and straightforward. The only confusing step is the creation of a new `Proxy` inside the trap. As we don't have a reference to the proxy object itself inside the trap, we need to create a new one. This is necessary because we want to return a new proxy to allow for chaining. If we didn't do this, the proxy would only be able to be used once.
diff --git a/snippets/articles/s/js-dynamic-getter-setter-proxy.md b/snippets/articles/s/js-dynamic-getter-setter-proxy.md
new file mode 100644
index 000000000..96df25688
--- /dev/null
+++ b/snippets/articles/s/js-dynamic-getter-setter-proxy.md
@@ -0,0 +1,76 @@
+---
+title: Can I create dynamic setters and getters in JavaScript?
+shortTitle: Dynamic getters and setters
+type: question
+language: javascript
+tags: [object,proxy]
+author: chalarangelo
+cover: green-cabin-cow
+excerpt: Using the Proxy object, we can create dynamic getters and setters for objects in JavaScript.
+dateModified: 2023-04-09T05:00:00-04:00
+---
+
+Sometimes, when working with objects, the shape of the data is not always known. It might also be inefficient to add special getters for each property of an object, especially if the object is very large. Moreover, if keys are expected to follow a pattern, there are infinite potential key names, the value of which is impossible to validate via the use of setters.
+
+These are only some use-cases where **dynamic setters and getters** could be useful. Luckily, JavaScript's `Proxy` object can be used for this purpose. Using the `get` and `set` traps, we can manipulate the object's behavior when a property is accessed or set. In this post, we will look at two simple examples to give you an idea of how this works.
+
+Note that, in contrast to these examples, a `Proxy` object can define multiple traps to intercept many different operations on the target object.
+
+### Dynamic getters
+
+A **dynamic getter** is a getter that is not explicitly defined for a property, but is instead created on the fly when the property is accessed. This is particularly useful when the shape of the data is not known in advance, or when the value of a property needs to be manipulated before it is returned.
+
+In this example, we will be creating a proxy that will manipulate string values in the target object. The proxy will trim any string values that are accessed, and return the value as-is for any other type of value. Finally, non-existent properties will return `undefined`, as expected.
+
+```js
+const obj = { foo: 'bar  ', baz: '  qux ', quux: 1 };
+
+const proxiedObj = new Proxy(obj, {
+  get(target, prop) {
+    if (prop in target && typeof target[prop] === 'string')
+      return target[prop].trim();
+    return target[prop];
+  }
+});
+
+proxiedObj.foo; // 'bar'
+proxiedObj.baz; // 'qux'
+proxiedObj.quux; // 1
+proxiedObj.quuz; // undefined
+```
+
+While this is a simple example, it highlights the power of the `Proxy` object. In this case, we are able to manipulate the behavior of the object without having to define a getter for each property. This will also apply to any new properties that are added to the object, as the proxy will be able to intercept the access and return the appropriate value.
+
+### Dynamic setters
+
+A **dynamic setter** is a setter that is not explicitly defined for a property, but is instead created on the fly when the property is set. This can be very useful if the object's keys follow a certain pattern or certain conditions apply to all values that are set.
+
+In this example, we will be creating a proxy that will only allow setting of properties that correspond to a date in the format `yyyy-mm-dd`. Additionally, if a property is already set, its value should be impossible to change. This could be useful if, for example, you were creating something akin to a read-only log.
+
+```js
+const obj = {};
+
+const proxiedObj = new Proxy(obj, {
+  set(target, prop, value) {
+    if (prop in target) return false;
+    if (typeof prop === 'string' && prop.match(/^\d{4}-\d{2}-\d{2}$/)) {
+      target[prop] = value;
+      return true;
+    }
+    return false;
+  }
+});
+
+proxiedObj['2023-01-01'] = 1;
+proxiedObj['2023-01-01'] = 2; // This will fail, the property is already set
+proxiedObj['2023-ab-cd'] = 1; // This will fail, the property name is not a date
+proxiedObj; // { '2023-01-01': 1 }
+```
+
+As shown in this example, the `Proxy` object can be used to validate keys as well as values when setting properties. In this case, we were able to prevent the value of a property from being changed, as well as prevent the setting of properties that do not follow the expected pattern.
+
+As a side note, remember that the regular expression used here is not a full date validation, but only checks for a simple pattern to demonstrate the concept. If you need to validate dates in a production environment, this is not the way to go.
+
+### Conclusion
+
+As shown in this post, the `Proxy` object provides a particularly powerful way to manipulate the behavior of objects. That being said, you might want to consider your specific use-case before reaching for this tool. Dynamic getters and setters can be very useful, but they can also cause a lot of headaches if used incorrectly.
diff --git a/snippets/articles/s/js-dynamic-properties-are-slow.md b/snippets/articles/s/js-dynamic-properties-are-slow.md
new file mode 100644
index 000000000..79da575ec
--- /dev/null
+++ b/snippets/articles/s/js-dynamic-properties-are-slow.md
@@ -0,0 +1,37 @@
+---
+title: "Tip: Optimize dynamically added object properties"
+shortTitle: Dynamically added property optimization
+type: tip
+language: javascript
+tags: [object,performance]
+author: chalarangelo
+cover: mountain-lake-cottage
+excerpt: Dynamically adding object properties can be pretty slow in some cases. Here's how to optimize it.
+dateModified: 2022-11-02T05:00:00-04:00
+---
+
+JavaScript is one of the most flexible languages out there, but sometimes this comes with performance costs attached. One such example is the use of dynamically added properties to objects. Oddly enough, this performance impact comes from JavaScript engines optimizing for static typing.
+
+The V8 engine, which powers Chrome and Node.js, uses **shapes** and **transition chains** to optimize object property access. When two objects have the same properties, they are considered to have the same shape. Adding new properties to an object, creates a transition chain to add the new property. Without getting into further detail, it's obvious that a simple shape is faster to access than a transition chain.
+
+```js
+// Create an object with a single property
+const obj = { a: 1 };
+// Add a new property to the object
+obj.b = 2;
+// Access a property of the object
+console.log(obj.a);
+```
+
+Circling back to dynamically added properties, the engine cannot know ahead of time what properties will be added to the object. Thus, it ends up creating a transition chain for each new property that is added. This is not a big deal for a few properties, but it can become a problem when adding a lot of properties to an object.
+
+Luckily, this is easy to fix. The easiest solution is to **define all possible properties of an object ahead of time** and give them an empty value (i.e. `null` or `undefined`). This way, the engine can create a shape for the object and optimize property access. This is not always possible, but it's a good practice to follow.
+
+```js
+// Create an object with all possible properties
+const obj = { a: 1, b: undefined };
+// Add a new property to the object
+obj.b = 2;
+// Access a property of the object
+console.log(obj.a);
+```
diff --git a/snippets/articles/s/js-edit-url-params.md b/snippets/articles/s/js-edit-url-params.md
new file mode 100644
index 000000000..74a72e873
--- /dev/null
+++ b/snippets/articles/s/js-edit-url-params.md
@@ -0,0 +1,41 @@
+---
+title: "Tip: Edit URL Parameters in JavaScript"
+shortTitle: Edit URL Parameters
+type: tip
+language: javascript
+tags: [string]
+author: chalarangelo
+cover: sofia-tram
+excerpt: Avoid the naive approach and use a more robust method to edit URL parameters in JavaScript.
+dateModified: 2022-12-07T05:00:00-04:00
+---
+
+Editing the query string of a URL in JavaScript is pretty common. While the naive approach of directly editing the URL as a string often works, it's a fragile solution that can break easily. This is especially true when working with encoding, hash fragments and other such intricacies.
+
+The most robust way to go about editing a URL is using the `URL` interface to parse the original URL string and edit it as necessary. This way, the browser will take care of all the complicated details and make the code easier to read and maintain.
+
+```js
+const urlString = 'https://mysite.com?p=42&from=home#details';
+const url = new URL(urlString);
+
+// Delete a parameter
+const removedParam = 'from';
+url.searchParams.delete(removedParam);
+
+// Edit/add parameters
+const newParams = {
+  p: 57,
+  track: 'none'
+};
+Object.keys(newParams).forEach(key => {
+  url.searchParams.set(key, newParams[key]);
+});
+
+// Edit the hash fragment
+const newHash = 'new';
+url.hash = newHash;
+
+console.log(`${url}`); // https://mysite.com?p=57&track=none#new
+```
+
+As you can see in the example, the `URL` interface provides a number of methods to edit the URL. The most commonly used ones are `URL.searchParams` and `URL.hash`. The former is a `URLSearchParams` object that provides methods to edit the query string of the URL, while the latter is a string that contains the hash fragment of the URL. Apart from these two, the `URL` interface also provides methods to edit the protocol, host, port, path, etc. of the URL.
diff --git a/snippets/articles/s/js-element-from-point.md b/snippets/articles/s/js-element-from-point.md
new file mode 100644
index 000000000..63b234cfe
--- /dev/null
+++ b/snippets/articles/s/js-element-from-point.md
@@ -0,0 +1,23 @@
+---
+title: "Tip: Element at a specific point on the page"
+shortTitle: Element at specific coordinates
+type: tip
+language: javascript
+tags: [browser]
+author: chalarangelo
+cover: armchair-in-yellow
+excerpt: Using `Document.elementFromPoint()` to easily get the element at a specific point on the page.
+dateModified: 2022-12-18T05:00:00-04:00
+---
+
+Figuring out where an element is located on the page with JavaScript can be tricky. Such needs often arise when working with pointer events or other forms of user input. As expected, such a common problem has many different viable solutions using well-established web APIs.
+
+As I recently discovered, `Document.elementFromPoint()` provides a pretty interesting and straightforward solution. It allows you to get the element at a specific point on the page and it also works quite well with `iframe`s, too. Additionally, `Document.elementsFromPoint()` provides similar functionality, but returns an array of all the elements at a specific point on the page, in order of their z-index.
+
+```js
+// Returns the topmost element at the specified coordinates
+const element = document.elementFromPoint(x, y);
+
+// Returns an array of all the elements at the specified coordinates
+const elements = document.elementsFromPoint(x, y);
+```
diff --git a/snippets/articles/s/js-email-validation.md b/snippets/articles/s/js-email-validation.md
new file mode 100644
index 000000000..a4417b9b3
--- /dev/null
+++ b/snippets/articles/s/js-email-validation.md
@@ -0,0 +1,42 @@
+---
+title: Can I validate an email address in JavaScript?
+shortTitle: Email address validation
+type: question
+language: javascript
+tags: [string,regexp]
+author: chalarangelo
+cover: blank-card
+excerpt: Email address validation can be much trickier than it sounds. Here's why and my advice on how to approach this problem.
+dateModified: 2022-10-05T05:00:00-04:00
+---
+
+One of the most frequent code snippet requests I get is about a function that can validate email addresses. While it sounds easy, I’ve been putting off writing about this topic for a while. The reason is that there are **no great solutions to this sort of problem**.
+
+Theoretically, email addresses can be validated using a regular expression. After all, there are a couple of simple rules, such as the presence of the at (`@`) symbol and an appropriate domain, right? Yes, but there are tons of valid email address that don’t look exactly like that. In fact, there’s a whole standard, [RFC 2822](https://www.rfc-editor.org/rfc/rfc2822#section-3.4.1), that defines what email addresses can look like. Then, there’s the issue of what different mail servers will allow. Gmail, for example, will not allow underscores (`_`) or more than one period (`.`) in a row.
+
+Additionally, even if you could validate an email address, there’s **no way of knowing if this address is in fact currently in use**. The only way to do so, is to send an email and check the response. This is why most websites and apps nowadays send you a confirmation email in the first place.
+
+Finally, even if you used a regular expression that is compliant with RFC 2822, it wouldn’t be without issues. Understanding how it works or figuring out if it works correctly for each and every case would be pretty difficult. More importantly, though, it could be prone to **regular expression denial of service (ReDoS) attacks**, if implemented incorrectly.
+
+By now, you should be starting to figure out why I’ve been hesitant to showcase a solution to the problem of email validation. While solutions do exist, the implications of each one must be considered carefully.
+
+My suggestion would be to **check for basic structural elements** on the frontend, then **send a confirmation email** from your server to check that the email address is in use. It’s easy to implement and gets the job done. Going back to the original idea, here’s a simple function that checks for the most common syntax errors.
+
+```js
+const isEmailValid = address => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(address);
+
+isEmailValid('abcd@site.com'); // true
+isEmailValid('ab_c@site.com'); // true
+isEmailValid('ab.c@site.com'); // true
+isEmailValid('a@my.site.com'); // true
+isEmailValid('ab c@site.com'); // false
+isEmailValid('ab@c@site.com'); // false
+isEmailValid('abcde@sitecom'); // false
+isEmailValid('abcdesite.com'); // false
+```
+
+This regular expression is pretty short, yet it validates the following conditions:
+
+- No whitespace characters anywhere in the email address
+- Presence of a single at (`@`) character before the domain part
+- At least one dot (`.`) character in the domain part
diff --git a/snippets/articles/s/js-fast-remove-array-element.md b/snippets/articles/s/js-fast-remove-array-element.md
new file mode 100644
index 000000000..9fd0caa97
--- /dev/null
+++ b/snippets/articles/s/js-fast-remove-array-element.md
@@ -0,0 +1,26 @@
+---
+title: Faster element removal in unordered JavaScript arrays
+shortTitle: Faster element removal in unordered arrays
+type: story
+language: javascript
+tags: [array]
+author: chalarangelo
+cover: purple-flower-bunch
+excerpt: Are you performing a lot of array operations? Maybe element removal is a performance bottleneck you can avoid.
+dateModified: 2022-03-20T05:00:00-04:00
+---
+
+`Array.prototype.splice()` is the most commonly-used way to remove elements from an array. Turns out that it’s not the fastest, though. This can be an especially important factor contributing to your code’s performance, if you are performing many operations with large arrays.
+
+There’s a pretty easy trick that you can use to speed up this operation, but the order of elements in the array must not play a role for it to work. Provided the latter is true, you can swap two elements in the array without any issues. This means you can swap any element with the last one, for example. But removing the last element is easy and fast, using `Array.prototype.pop()`, so you can use that to your advantage. For example:
+
+```js
+const arr = [3, 1, 5, 7, 9];  // Want to remove 5 (index: 2)
+
+arr[2] = arr[arr.length -1];  // Copy last element to 3rd place
+arr.pop();                    // Remove the last element
+```
+
+In this example, we want to remove an element which is in the middle of the array. We would start by performing a swap of the element we want to remove with the last one. However, we don’t need to actually swap them. All we need to do is ensure that the last element goes in the place of the one we want to remove. We can simply copy it to that position and then use `Array.prototype.pop()` to remove the last element.
+
+On a side note, one could think shortening this to `arr[i] = arr.pop()` would make it even terser. Turns out this isn’t the case, as this shorter version will fail if we try to remove the last element in the array.
diff --git a/snippets/articles/s/js-frequency-map-data-structure.md b/snippets/articles/s/js-frequency-map-data-structure.md
new file mode 100644
index 000000000..233f3de60
--- /dev/null
+++ b/snippets/articles/s/js-frequency-map-data-structure.md
@@ -0,0 +1,61 @@
+---
+title: Frequency Map Data Structure
+shortTitle: Frequency Map
+type: story
+language: javascript
+tags: [class]
+author: chalarangelo
+cover: radio-monstera
+excerpt: A custom data structure to keep track of value frequencies in an array.
+dateModified: 2022-11-13T05:00:00-04:00
+---
+
+Counting the frequency of unique values in an array is reasonably easy, as demonstrated in the [frequencies snippet](/js/s/frequencies). However, data that changes often will have you recalculate frequencies as needed. This can become tedious and inefficient, especially if you only need to keep track of the frequencies and have no need for the original array.
+
+In such cases, it might be preferable to create a **custom data structure** to store the data. This data structure will be able to **keep track of the frequencies of the values** it contains and update them as needed. Here's how you can implement such a data structure:
+
+```js
+class FrequencyMap extends Map {
+  constructor(iterable) {
+    super();
+    iterable.forEach(value => this.add(value));
+  }
+
+  set() {
+    throw new Error('Please use Map.prototype.add() instead.');
+  }
+
+  add(value) {
+    if (this.has(value)) super.set(value, this.get(value) + 1);
+    else super.set(value, 1);
+    return this;
+  }
+
+  delete(value) {
+    if (this.get(value) === 1) super.delete(value);
+    else super.set(value, this.get(value) - 1);
+    return this;
+  }
+
+  sorted(ascending = true) {
+    if (ascending) return [...this].sort((a, b) => a[1] - b[1]).map(v => v[0]);
+    else return [...this].sort((a, b) => b[1] - (1)[1]).map(v => v[0]);
+  }
+}
+```
+
+- Leverage the built-in `Map` class via the use of inheritance.
+- Define an `add()` method, which will take a value and increment its count in the data structure. Use `Map.prototype.has()` to check if the value already exists and act accordingly.
+- Extend `Map.prototype.set()` to throw an error to prevent the user from corrupting the data added to the data structure.
+- Extend `Map.prototype.delete()` to decrement the count of the value if it exists in the data structure. Use `Map.prototype.has()` to check if the value's frequency is `1` and delete it if necessary.
+- As the data structure operates more like a `Set`, after the `constructor` to accept an array of values. Use `Array.prototype.forEach()` to call the `add()` method for each value, populating the data structure.
+- Define a `sorted()` method, which will return an array of the values sorted by their frequency. Use `Array.prototype.sort()` to sort the values by their frequency and `Array.prototype.map()` to return only the values. The `ascending` argument determines the order of the returned array.
+
+```js
+const fMap = new FrequencyMap(['a', 'b', 'c', 'a', 'a', 'b']);
+
+fMap.delete('c');
+fMap.add('d');
+
+console.log(fMap.sorted(false)); // [ 'a', 'b' , 'd' ]
+```
diff --git a/snippets/articles/s/js-immutable-object-proxy.md b/snippets/articles/s/js-immutable-object-proxy.md
new file mode 100644
index 000000000..5d1fc22d5
--- /dev/null
+++ b/snippets/articles/s/js-immutable-object-proxy.md
@@ -0,0 +1,46 @@
+---
+title: Immutable JavaScript objects using the Proxy object
+shortTitle: Immutable objects using Proxy
+type: story
+language: javascript
+tags: [object,proxy]
+author: chalarangelo
+cover: frozen-globe
+excerpt: Freezing objects is not the only way to prevent mutations. Learn how you can leverage the Proxy object to your advantage.
+dateModified: 2022-04-10T05:00:00-04:00
+---
+
+Object mutability and its relation to the `const` keyword is a very common headache for developers. More often than not, when looking for ways to make an object immutable, `Object.freeze()` will pop up as a solution. We’ve explored this approach previously, elaborating on deep freezing solutions. You can read more about it in [this article](/articles/s/javascript-deep-freeze-object).
+
+While `Object.freeze()` is the more straightforward approach, it might not always be the best solution. This may be especially true when dealing with extensive object nesting or when objects have a very short life. For such cases, a different approach using the [Proxy object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) might make more sense. Here’s what that looks like:
+
+```js
+const term = {
+  id: 1,
+  value: 'hello',
+  properties: [{ type: 'usage', value: 'greeting' }],
+};
+
+const immutable = obj =>
+  new Proxy(obj, {
+    get(target, prop) {
+      return typeof target[prop] === 'object'
+        ? immutable(target[prop])
+        : target[prop];
+    },
+    set() {
+      throw new Error('This object is immutable.');
+    },
+  });
+
+const immutableTerm = immutable(term);
+const immutableProperty = immutableTerm.properties[0];
+
+immutableTerm.name = 'hi';            // Error: This object is immutable.
+immutableTerm.id = 2;                 // Error: This object is immutable.
+immutableProperty.value = 'pronoun';  // Error: This object is immutable.
+```
+
+Even though proxies are not all that common, this code shouldn’t be hard to understand. The gist of the idea is that you use a handler to prevent mutations to the object via the `set()` trap. Additionally, you use the `get()` trap to enforce immutability on all nested values. This is done by checking the type of the value and applying the proxy to nested objects.
+
+That’s pretty much all there is to it. With just a few lines of code, you now have a way to prevent mutation on an object, regardless of shape, nesting or complexity.
diff --git a/snippets/articles/s/js-last-element-of-array.md b/snippets/articles/s/js-last-element-of-array.md
new file mode 100644
index 000000000..5e5ce95d5
--- /dev/null
+++ b/snippets/articles/s/js-last-element-of-array.md
@@ -0,0 +1,25 @@
+---
+title: "Tip: Get the last element of a JavaScript array"
+shortTitle: Last element of array
+type: tip
+language: javascript
+tags: [array]
+author: chalarangelo
+cover: purple-laptop
+excerpt: Array destructuring can be leveraged in many different ways. Here's one of them.
+dateModified: 2022-08-28T05:00:00-04:00
+---
+
+If you have worked with JavaScript arrays before, you might know that they can be destructured much like objects. This is most commonly used to extract the first value of an array or the values of an array with a known length.
+
+But destructuring can go much further, as it allows you to extract the `length` property of an array. Add this to the fact that extracted variables can be used in the destructuring assignment itself and you can put together a one-liner to extract the last element of an array.
+
+```js
+const arr = [1, 2, 3];
+const { 0: first, length, [length - 1]: last } = arr;
+first; // 1
+last; // 3
+length; // 3
+```
+
+While this technique is interesting, it has a couple of caveats. First off, you have to extract the `length` property, which creates an additional variable for it. And secondly, it doesn't have any significant performance advantages over other options, such as using `Array.prototype.slice()`.
diff --git a/snippets/articles/s/js-locale-sensitive-string-truncation.md b/snippets/articles/s/js-locale-sensitive-string-truncation.md
new file mode 100644
index 000000000..601597180
--- /dev/null
+++ b/snippets/articles/s/js-locale-sensitive-string-truncation.md
@@ -0,0 +1,49 @@
+---
+title: How can I truncate a string accounting for locale?
+shortTitle: Locale-sensitive string truncation
+type: question
+language: javascript
+tags: [string]
+author: chalarangelo
+cover: reflection-on-lake
+excerpt: Locale-sensitive string splitting and truncation are finally possible in JavaScript.
+dateModified: 2022-12-04T05:00:00-04:00
+---
+
+Breaking a string into words is not the easiest, neither is finding a good place to add an ellipsis. Part of the problem is recognizing word boundaries and words themselves. Luckily `Intl.Segmenter` is a relatively new object that enables **locale-sensitive text segmentation**.
+
+`Intl.Segmenter` allows you to specify a locale and a `granularity` option to specify how a string should be segmented. The `granularity` option can be set to `'grapheme'`, `'word'` or `'sentence'` according to your needs. Using `Intl.Segmenter.prototype.segment()` on a string returns an iterable `Segments` object. This can then be used to find the correct index to split a string without being in the middle of a word or a sentence.
+
+```js
+const str =
+  'The quick brown fox jumps over the lazy dog. The jay, pig, fox, zebra and my wolves quack!';
+const cutOff = 50;
+
+const wordSegmenter = new Intl.Segmenter('en-US', { granularity: 'word' });
+const sentenceSegmenter = new Intl.Segmenter('en-US', {
+  granularity: 'sentence',
+});
+
+let lastWordBreak = -1;
+for (let word of wordSegmenter.segment(str)) {
+  if (word.isWordLike) continue;
+  if (word.index >= cutOff) break;
+  lastWordBreak = word.index;
+}
+str.slice(0, lastWordBreak) + '...';
+// 'The quick brown fox jumps over the lazy dog. The...'
+
+let lastSentenceBreak = -1;
+for (let sentence of sentenceSegmenter.segment(str)) {
+  if (
+    lastSentenceBreak !== -1 &&
+    sentence.index + sentence.segment.length >= cutOff
+  )
+    break;
+  lastSentenceBreak = sentence.index + sentence.segment.length;
+}
+str.slice(0, lastSentenceBreak).trim().slice(0, -1) + '...';
+// 'The quick brown fox jumps over the lazy dog...'
+```
+
+Note that the `Intl.Segmenter` object is not yet supported in all environments at the time of writing (December, 2022). Namely, Firefox has yet to implement it, while Node.js has only started supporting it since version 16.0.0.
diff --git a/snippets/articles/s/js-map-vs-object.md b/snippets/articles/s/js-map-vs-object.md
new file mode 100644
index 000000000..fdf900078
--- /dev/null
+++ b/snippets/articles/s/js-map-vs-object.md
@@ -0,0 +1,69 @@
+---
+title: What are the differences between Maps and objects in JavaScript?
+shortTitle: Maps vs objects
+type: question
+language: javascript
+tags: [object]
+author: chalarangelo
+cover: tent-stars
+excerpt: Maps and objects are very similar, but they have some differences that can help you decide which one better fits your use-case.
+dateModified: 2022-02-13T05:00:00-04:00
+---
+
+Most JavaScript developers are familiar with objects and probably use them every day. Maps, on the other hand, are not as common but are still very useful. While very similar to objects on the surface, they have some very important differences. Let's take a look at them.
+
+### Key types
+
+Object keys are limited to using only strings and symbols. Maps, on the other hand, can use values of any type as their keys, including functions and objects. This can come in handy in many different scenarios, such as memoization and data association.
+
+```js
+const people = [
+  { id: 1, name: 'John', surname: 'Doe', age: 30 },
+  { id: 2, name: 'Jane', surname: 'Doe', age: 28 },
+];
+
+const peopleIndex = people.reduce((index, person) => {
+  index[person.id] = `${person.name} ${person.surname}`;
+  return index;
+}, {});
+// peopleIndex = {
+//   '1': 'John Doe',
+//   '2': 'Jane Doe',
+// }
+
+const peopleIndexMap = new Map(
+  people.map(person => [person, `${person.name} ${person.surname}`])
+);
+
+// peopleIndexMap = Map {
+//   { id: 1, name: 'John', surname: 'Doe', age: 30 } => 'John Doe',
+//   { id: 2, name: 'Jane', surname: 'Doe', age: 28 } => 'Jane Doe',
+// }
+```
+
+### Iteration
+
+Object iteration is usually accomplished using `Object.keys()`, `Object.values()` or `Object.entries()`. All of these methods are available on Maps as part of their prototype, but they are significantly more efficient. The reason for this is that these Map methods return iterators, which are lazy and only iterate over the keys or values when they are needed. Additionally, Maps expose an iterator, which can be used with `for...of` loops.
+
+```js
+const obj = { a: 1, b: 2, c: 3 };
+const objEntries = Object.entries(obj);
+// ['a', 1], ['b', 2], ['c', 3]
+for (const [key, value] of objEntries)
+  console.log(`${key}: ${value}`);
+
+const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
+const mapEntries = [...map.entries()]; // Same as [...map]
+// [['a', 1], ['b', 2], ['c', 3]]
+for (const [key, value] of map)
+  console.log(`${key} => ${value}`);
+```
+
+### Other differences
+
+Apart from the two main differences mentioned already, there are some other, less noticeable, ones. These include the following:
+
+- Object size requires manual computation. Maps, on the other hand, have a built-in `size` property that can be used to track the number of key-value pairs.
+- You can check for a given key's presence in an object using the `in` operator or `Object.prototype.hasOwnProperty()`. `Map.prototype.has()` accomplishes the same thing for Maps.
+- Clearing an object requires manual operation and might be non-trivial in some cases. Maps solve this problem via the use of `Map.prototype.clear()`.
+- Objects inherit some keys from the prototype, whereas maps do not.
diff --git a/snippets/articles/s/js-native-data-structures.md b/snippets/articles/s/js-native-data-structures.md
new file mode 100644
index 000000000..4bf1f5324
--- /dev/null
+++ b/snippets/articles/s/js-native-data-structures.md
@@ -0,0 +1,88 @@
+---
+title: Native JavaScript Data Structures
+shortTitle: Native Data Structures
+type: story
+language: javascript
+tags: [array]
+author: chalarangelo
+cover: purple-flower-macro-2
+excerpt: JavaScript provides a handful of native data structures that you can start using in your code right now.
+dateModified: 2021-09-05T05:00:00-04:00
+---
+
+### Arrays
+
+An array is a linear data structure that represents a collection of elements. In JavaScript, arrays don't have a fixed size, while their contents can be of any valid type, even arrays themselves. Arrays are probably the most commonly used data structure and come with a plethora of methods that allow easy manipulation and transformation of their contents.
+
+```js
+const nums = [1, 2, 3];
+const strs = Array.from('est');
+
+nums.push(6);
+nums.push(4, 9);
+strs.unshift('t');
+
+nums.length;                     // 6
+nums[nums.length - 1];           // 9
+strs[0];                         // 't'
+strs[2];                         // 's'
+
+nums.slice(1, 3);                // [2, 3]
+nums.map(n => n * 2);            // [2, 4, 6, 12, 8, 18]
+nums.filter(n => n % 2 === 0);   // [2, 6, 4]
+nums.reduce((a, n) => a + n, 0); // 25
+
+strs.reverse();                  // ['t', 's', 'e', 't']
+strs.join('');                   // 'test'
+```
+
+### Sets
+
+A set is a linear data structure that represents an ordered collection of unique values. Sets in JavaScript can store any valid type of value, however each value can only occur once based on value equality checking.
+
+```js
+const nums = new Set([1, 2, 3]);
+
+nums.add(4);
+nums.add(1);
+nums.add(5);
+nums.add(4);
+
+nums.size;                       // 5
+nums.has(4);                     // true
+
+nums.delete(4);
+nums.has(4);                     // false
+
+[...nums];                       // [1, 2, 3, 5]
+
+nums.clear();
+nums.size;                       // 0
+```
+
+### Maps
+
+A map is an associative data structure that represents a keyed collection of elements. Each key in a JavaScript Map has to be unique and either a primitive value or an object, whereas the values of the map can be of any valid type.
+
+```js
+const items = new Map([
+  [1, { name: 'John' }],
+  [2, { name: 'Mary' }]
+]);
+
+items.set(4, { name: 'Alan' });
+items.set(2, { name: 'Jeff' });
+
+items.size;                      // 3
+items.has(4);                    // true
+items.get(2);                    // { name: 'Jeff' }
+
+items.delete(2);
+items.size;                      // 2
+
+[...items.keys()];               // [1, 4]
+[...items.values()];             // [{ name: 'John' }, { name: 'Alan' }]
+
+items.clear();
+items.size;                      // 0
+```
diff --git a/snippets/articles/s/js-object-freeze-vs-seal.md b/snippets/articles/s/js-object-freeze-vs-seal.md
new file mode 100644
index 000000000..94f295568
--- /dev/null
+++ b/snippets/articles/s/js-object-freeze-vs-seal.md
@@ -0,0 +1,36 @@
+---
+title: What is the difference between Object.freeze() and Object.seal() in JavaScript?
+shortTitle: Object.freeze() vs Object.seal()
+type: question
+language: javascript
+tags: [object]
+author: chalarangelo
+cover: frozen-globe
+excerpt: Both `Object.freeze()` and `Object.seal()` serve a similar purpose, but there's one key difference you need to remember.
+dateModified: 2022-02-06T05:00:00-04:00
+---
+
+Both `Object.freeze()` and `Object.seal()` serve as ways to prevent a JavaScript object from being altered. Although similar, they have a key difference that you need to remember.
+
+```js
+const frozen = Object.freeze({ username: 'johnsmith' });
+const sealed = Object.seal({ username: 'johnsmith' });
+
+frozen.name = 'John Smith';  // frozen = { username: 'johnsmith' }
+sealed.name = 'John Smith';  // sealed = { username: 'johnsmith' }
+
+delete frozen.username;      // frozen = { username: 'johnsmith' }
+delete sealed.username;      // sealed = { username: 'johnsmith' }
+
+frozen.username = 'jsmith';  // frozen = { username: 'johnsmith' }
+sealed.username = 'jsmith';  // sealed = { username: 'jsmith' }
+```
+
+If you want to prevent new properties from being added and existing properties from being removed, then both methods will suit your needs. If, however, you want to prevent existing properties from being altered, then you have to use `Object.freeze()`. The reason for that is that `Object.seal()` only marks existing properties as non-configurable, meaning their values can be changed as long as they are writable.
+
+|  | Create | Read | Update | Delete |
+| --- | --- | --- | --- | --- |
+| `Object.freeze()` | No | Yes | No | No |
+| `Object.seal()` | No | Yes | Yes | No |
+
+As a closing note, remember that both methods perform a shallow freeze/seal on the object. This means that nested objects and arrays are not frozen or sealed and can be mutated. To prevent this, you can deep freeze objects, as described in [this related article](/articles/s/javascript-deep-freeze-object).
diff --git a/snippets/articles/s/js-proxy-array-negative-index.md b/snippets/articles/s/js-proxy-array-negative-index.md
new file mode 100644
index 000000000..bd5e8f606
--- /dev/null
+++ b/snippets/articles/s/js-proxy-array-negative-index.md
@@ -0,0 +1,39 @@
+---
+title: Negative index in JavaScript array
+shortTitle: Negative index array proxy
+type: story
+language: javascript
+tags: [array,proxy]
+author: chalarangelo
+cover: budapest-palace
+excerpt: Ever wanted to use negative indices in JavaScript arrays? Here's a simple way to do it using a Proxy.
+dateModified: 2022-10-02T05:00:00-04:00
+---
+
+`Array.prototype.slice()` provides an easy way to access elements from the end of an array, using a negative `start` value. While this sounds convenient, the resulting value is an array, so it's necessary to use an index to get an individual element.
+
+This is usually not too bad, but it's interesting to explore other options to understand the language better. In this case, we can use a `Proxy` object to allow accessing data in an array using negative indexes. To do so, an appropriate handler needs to be defined for the `get` trap.
+
+The trap's second argument corresponds to the passed index, however it's a string, so it must first be converted to a number using `Number()`. Then, `Array.prototype.length` can be used to calculate the position of the actual element. Finally, `Reflect.get()` can be used to get the value at the specific index, but expects its second argument to be a string.
+
+Putting everything together, this is what this looks like:
+
+```js
+const handler = {
+  get(target, key, receiver) {
+    const index = Number(key);
+    const prop = index < 0 ? `${target.length + index}` : key;
+    return Reflect.get(target, prop, receiver);
+  },
+};
+
+const createArray = (...elements) => {
+  const arr = [...elements];
+  return new Proxy(arr, handler);
+};
+
+let arr = createArray('a', 'b', 'c');
+
+arr[-1]; // 'c'
+arr[-1]; // 'b'
+```
diff --git a/snippets/articles/s/js-proxy-introduction.md b/snippets/articles/s/js-proxy-introduction.md
new file mode 100644
index 000000000..8236d0e2c
--- /dev/null
+++ b/snippets/articles/s/js-proxy-introduction.md
@@ -0,0 +1,55 @@
+---
+title: An Introduction to JavaScript Proxy
+shortTitle: JavaScript Proxy Introduction
+type: story
+language: javascript
+tags: [object,proxy,pattern]
+author: chalarangelo
+cover: red-mountain-range
+excerpt: A quick introduction to the JavaScript Proxy object and where it can be used.
+dateModified: 2023-04-02T05:00:00-04:00
+---
+
+The JavaScript `Proxy` object is a relatively new addition to the language, having been introduced in ES6. It's based on the **software design pattern** of the same name, which creates a wrapper for another object, **intercepting** and **redefining** fundamental operations for that object.
+
+A `Proxy` object is defined as follows:
+
+```js
+const proxy = new Proxy(target, handler);
+```
+
+The `target` is the object that the proxy wraps around, while the `handler` is an object that contains one or more **"traps"** - functions that intercept operations performed on the target object.
+
+There are a variety of available traps that can be used to customize the behavior of the target object. Here's a brief overview of all available traps and what each one does:
+
+- `get(target, prop, receiver)` - Intercepts calls to `target[prop]`.
+- `set(target, prop, value, receiver)` - Intercepts calls to `target[prop] = value`.
+- `has(target, prop)` - Intercepts calls to `prop in target`.
+- `apply(target, thisArg, argumentsList)` - Intercepts calls to functions.
+- `construct(target, argumentsList, newTarget)` - Intercepts calls to the `new` operator.
+- `defineProperty(target, prop, descriptor)` - Intercepts calls to `Object.defineProperty()`.
+- `deleteProperty(target, prop)` - Intercepts calls to `delete target[prop]`.
+- `getOwnPropertyDescriptor(target, prop)` - Intercepts calls to `Object.getOwnPropertyDescriptor()`.
+- `ownKeys(target)` - Intercepts calls to `Object.getOwnPropertyNames()` and `Object.getOwnPropertySymbols()`.
+- `getPrototypeOf(target)` - Intercepts calls to `Object.getPrototypeOf()`.
+- `setPrototypeOf(target, prototype)` - Intercepts calls to `Object.setPrototypeOf()`.
+- `isExtensible(target)` - Intercepts calls to `Object.isExtensible()`.
+- `preventExtensions(target)` - Intercepts calls to `Object.preventExtensions()`.
+
+There are many common and novel use-cases for the `Proxy` object, utilizing one or more of these traps. Here's a simple example that intercepts a `get` call and returns `null` if the property doesn't exist in the target object:
+
+```js
+const targetObj = { name: 'John', age: 30 };
+
+const handler = {
+  get(target, property) {
+    return property in target ? target[property] : null;
+  }
+};
+
+const proxyObj = new Proxy(targetObj, handler);
+
+proxyObj.name; // 'John'
+proxyObj.age; // 30
+proxyObj.address; // null
+```
diff --git a/snippets/articles/s/js-remove-array-duplicates.md b/snippets/articles/s/js-remove-array-duplicates.md
new file mode 100644
index 000000000..d73bbeea4
--- /dev/null
+++ b/snippets/articles/s/js-remove-array-duplicates.md
@@ -0,0 +1,21 @@
+---
+title: "Tip: Remove duplicates from a JavaScript array"
+shortTitle: Remove duplicates from an array
+type: tip
+language: javascript
+tags: [array]
+author: chalarangelo
+cover: architectural
+excerpt: Easily remove duplicates from a JavaScript array using the built-in `Set` object.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Removing duplicates from an array in JavaScript can be done in a variety of ways, such as using `Array.prototype.reduce()`, `Array.prototype.filter()` or even a simple `for` loop. But there's an easier alternative. JavaScript's built-in [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) object is described as a collection of values, where each value may occur only once. A `Set` object is also iterable, making it easily convertible to an array using the spread (`...`) operator.
+
+```js
+const nums = [1, 2, 2, 3, 1, 2, 4, 5, 4, 2, 6];
+
+[...new Set(nums)] // [1, 2, 3, 4, 5, 6]
+```
+
+You can wrap this in a helper method, which is exactly what the [uniqueElements](/js/s/unique-elements) snippet does. For more complex cases, such as unique objects in an array based on a specific key, you might want to take a look at [uniqueElementsBy](/js/s/unique-elements-by).
diff --git a/snippets/articles/s/js-remove-element-from-array.md b/snippets/articles/s/js-remove-element-from-array.md
new file mode 100644
index 000000000..adf0c2b7d
--- /dev/null
+++ b/snippets/articles/s/js-remove-element-from-array.md
@@ -0,0 +1,44 @@
+---
+title: Remove an element from a JavaScript array
+shortTitle: Remove element from array
+type: story
+language: javascript
+tags: [array]
+author: chalarangelo
+cover: maple-leaf-palette
+excerpt: Did you know there are multiple ways to remove an element from an array? Let's take a look.
+dateModified: 2022-06-26T05:00:00-04:00
+---
+
+Removing a specific value or values from an array in JavaScript is a pretty common task. While not hard to accomplish, there are a few approaches available, each with their own pros and cons. Choosing the correct one ultimately depends on the use case.
+
+### Array.prototype.splice()
+
+This is probably the most common approach for removing elements from an array. While `Array.prototype.splice()` is a very versatile tool in your kit, you need to remember that it **mutates the original array**. On top of that, it returns the deleted elements instead of a new array.
+
+```js
+const arr = ['a', 'b', 'c'];
+const deleted = arr.splice(1, 1); // ['b']
+
+console.log(arr); // ['a', 'c']
+```
+
+If you're cool with mutating the array, `Array.prototype.splice()` might just be the solution you need.
+
+### Array.prototype.filter()
+
+Another option for removing elements from an array is `Array.prototype.filter()`. More versatile than `Array.prototype.splice()`, it **doesn't mutate the original array**, but instead returns a new one. However, there's a performance consideration to be made for larger arrays when the elements to be removed are only encountered once. `Array.prototype.filter()` will always iterate over all elements in the array, which might be impractical in some cases.
+
+```js
+const arr = ['a', 'b', 'c'];
+const filtered = arr.filter(el => el !== 'b'); // ['a', 'c']
+
+console.log(arr); // ['a', 'b', 'c']
+```
+
+Most of the time, `Array.prototype.filter()` is the best option for removing elements from an array.
+
+### Alternative options
+
+The previous two options should cover the vast majority of use cases. Yet, there are some other options available for removing elements from an array, which might be preferable in certain cases. For example, if you like the interface of `Array.prototype.splice()` but need immutability, the [shank snippet](/js/s/shank) might be the solution for you. Similarly, when working with large unsorted arrays, there's a [fast removal trick](/articles/s/js-fast-remove-array-element) that might be of interest to you.
+
diff --git a/snippets/articles/s/js-remove-trailing-zeros.md b/snippets/articles/s/js-remove-trailing-zeros.md
new file mode 100644
index 000000000..d2ca4c67a
--- /dev/null
+++ b/snippets/articles/s/js-remove-trailing-zeros.md
@@ -0,0 +1,51 @@
+---
+title: How can I remove trailing zeros from a number in JavaScript?
+shortTitle: Remove trailing zeros from number
+type: story
+language: javascript
+tags: [math]
+author: chalarangelo
+cover: island-corridor
+excerpt: When formatting decimal values in JavaScript, trailing zeros can be undesired. Here's how to deal with them.
+dateModified: 2022-05-08T05:00:00-04:00
+---
+
+JavaScript provides a couple of ways to format numeric values to a given precision. Namely, you can use `Number.prototype.toFixed()` and `Number.prototype.toPrecision()` to similar effect. However, neither of them deals with trailing zeros in the decimal part. Here's a few ways you can remove them:
+
+### Regular expression
+
+Provided that the number is converted to a fixed-point string, you can use a regular expression to remove trailing zeros. All you have to do is match the decimal point (`\.`) and replace any zeros after it (`0+`) until the end of the string (`$`).
+
+```js
+const toFixedWithoutZeros = (num, precision) =>
+  num.toFixed(precision).replace(/\.0+$/, '');
+
+toFixedWithoutZeros(1.001, 2); // '1'
+toFixedWithoutZeros(1.500, 2); // '1.50'
+```
+
+The main issue with this approach is that the regular expression will only remove trailing zeros if the decimal part has no other digits before them. Writing a regular expression to remove trailing zeros from any number is a bit more involved and gets harder to read. Thus, this approach is discouraged.
+
+### Multiply by 1
+
+A better way to remove trailing zeros is to multiply by `1`. This method will remove trailing zeros from the decimal part of the number, accounting for non-zero digits after the decimal point. The only downside is that the result is a numeric value, so it has to be converted back to a string.
+
+```js
+const toFixedWithoutZeros = (num, precision) =>
+  `${1 * num.toFixed(precision)}`;
+
+toFixedWithoutZeros(1.001, 2); // '1'
+toFixedWithoutZeros(1.500, 2); // '1.5'
+```
+
+### Number.parseFloat
+
+Similar to the previous approach, you can use `Number.parseFloat()` to remove trailing zeros from a number. This method also accounts for non-zero digits after the decimal point. We recommend this approach as it's the most readable.
+
+```js
+const toFixedWithoutZeros = (num, precision) =>
+  `${Number.parseFloat(num.toFixed(precision))}`;
+
+toFixedWithoutZeros(1.001, 2); // '1'
+toFixedWithoutZeros(1.500, 2); // '1.5'
+```
diff --git a/snippets/articles/s/js-replace-all-occurences-of-string.md b/snippets/articles/s/js-replace-all-occurences-of-string.md
new file mode 100644
index 000000000..653dccd36
--- /dev/null
+++ b/snippets/articles/s/js-replace-all-occurences-of-string.md
@@ -0,0 +1,39 @@
+---
+title: Replace all occurrences of a string in JavaScript
+shortTitle: Replace all occurrences of a string
+type: story
+language: javascript
+tags: [string,regexp]
+author: chalarangelo
+cover: blue-computer
+excerpt: If you need to replace all occurrences of a string in JavaScript, you have a couple of options.
+dateModified: 2022-07-03T05:00:00-04:00
+---
+
+### String.prototype.replaceAll()
+
+Modern JavaScript engines have a built-in method called `String.prototype.replaceAll()`. This method can be used to replace all occurrences of a string in another string with relative ease.
+
+```js
+const str = 'Hello World';
+
+str.replaceAll('o', 'x'); // 'Hellx Wxrld'
+```
+
+Using `String.prototype.replaceAll()` is the recommended approach, as it's straightforward. If, however, you need to support older browsers, consider the option below.
+
+### String.prototype.replace()
+
+Before the introduction of `String.prototype.replaceAll()`, `String.prototype.replace()` was the method of choice for this sort of task. It's supported by all JavaScript engines, old and new and is very similar to `String.prototype.replaceAll()`.
+
+While this method doesn't replace all occurrences of a string, it supports regular expressions. Knowing the string to be replaced, a regular expression can be created with the global (`'g'`) flag. Then, it can be passed to `String.prototype.replace()` to replace all occurrences of the string. The only issue here is that special characters need to be escaped, so that they are matched correctly. The [escapeRegExp snippet](/js/s/escape-reg-exp) comes in handy for this task.
+
+```js
+const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+const replaceAll = (str, subStr, newSubStr) =>
+  str.replace(new RegExp(escapeRegExp(subStr), 'g'), newSubStr);
+
+const str = 'Hello World';
+
+replaceAll(str, 'o', 'x'); // 'Hellx Wxrld'
+```
diff --git a/snippets/articles/s/js-spread-operator-tricks.md b/snippets/articles/s/js-spread-operator-tricks.md
new file mode 100644
index 000000000..f73bfee31
--- /dev/null
+++ b/snippets/articles/s/js-spread-operator-tricks.md
@@ -0,0 +1,42 @@
+---
+title: 3 ways to use the JavaScript spread operator with arrays
+shortTitle: Array tricks using the spread operator
+type: story
+language: javascript
+tags: [array]
+author: chalarangelo
+cover: succulent-crowd
+excerpt: JavaScript’s spread operator is a very versatile tool. Here are some simple ways to use it.
+dateModified: 2022-04-17T05:00:00-04:00
+---
+
+### Clone an array
+
+The spread operator can be used to clone an array into a new array. This trick can come in handy when working with arrays of primitives. However, it only shallow clones the array, meaning nested non-primitive values will not be cloned.
+
+```js
+const arr = [1, 2, 3];
+const arr2 = [...arr];
+// [1, 2, 3]
+```
+
+### Merge multiple arrays
+
+Using the spread operator, it’s possible to combine two or more arrays into one. You should think of this trick as cloning two arrays into a new one. Due to that, the shallow cloning limitation mentioned previously applies here, too.
+
+```js
+const arr1 = [1, 2, 3];
+const arr2 = [4, 5, 6];
+const combined = [...arr1, ...arr2];
+// [1, 2, 3, 4, 5, 6]
+```
+
+### Add items to an array
+
+Similarly to previous tricks, it’s possible to spread an array into a new one and add individual elements, too. This can also be combined with merging multiple arrays, if desired.
+
+```js
+const arr = [1, 2, 3];
+const arr2 = [0, ...arr, 4];
+// [0, 1, 2, 3, 4]
+```
diff --git a/snippets/articles/s/js-static-instance-methods.md b/snippets/articles/s/js-static-instance-methods.md
new file mode 100644
index 000000000..6b6327009
--- /dev/null
+++ b/snippets/articles/s/js-static-instance-methods.md
@@ -0,0 +1,24 @@
+---
+title: What is the difference between static and instance methods?
+shortTitle: Static  Instance Methods
+type: question
+language: javascript
+tags: [object,function,class]
+author: chalarangelo
+cover: lake-runner
+excerpt: Static and instance methods are pretty easy to distinguish and serve different purposes. Learn all about them in this article.
+dateModified: 2022-01-30T05:00:00-04:00
+---
+
+Static methods belong to a class and don’t act on its instances. This means that they can’t be called on instances of the class. Instead, they're called on the class itself. They are often utility functions, such as functions to create or clone objects.
+
+Instance methods belong to the class prototype, which is inherited by all instances of the class. As such, they act on class instances and can be called on them.
+
+```jsx
+const arr = [1, 2, 3];  // An Array instance
+
+Array.isArray(arr);     // Static method of Array
+arr.push(4);            // Instance method of Array
+```
+
+In the context of ES6 classes, the `static` keyword is used to define static methods for a class. Conversely, methods not defined as `static` are instance methods.
diff --git a/snippets/articles/s/js-textcontent-or-innertext.md b/snippets/articles/s/js-textcontent-or-innertext.md
new file mode 100644
index 000000000..0baa4443f
--- /dev/null
+++ b/snippets/articles/s/js-textcontent-or-innertext.md
@@ -0,0 +1,98 @@
+---
+title: How are HTMLElement.innerText and Node.textContent different?
+shortTitle: Differences between innerText and textContent
+type: question
+language: javascript
+tags: [browser]
+author: chalarangelo
+cover: dark-city
+excerpt: While these two properties are very similar, there are some key differences that you should be aware of.
+dateModified: 2023-03-19T05:00:00-04:00
+---
+
+JavaScript provides two properties you can use to **access the text content of an element**: `Node.textContent` and `HTMLElement.innerText`. For the most part, these two appear to be interchangeable. In fact, many developers use them interchangeably, not knowing that there are important differences between the two.
+
+### Similarities
+
+I think it's helpful to identify the similarities of these two properties before diving into the differences. This will also clarify how they're used in most cases.
+
+Suppose you have an HTML element, containing some text:
+
+```html
+<p id="greeting">Hi there! My name is <strong>Bubbles</strong>.</p>
+```
+
+Both of these properties will return the text content of the element, including the text content of any **child elements**. They will also **ignore any HTML tags** that may be present in the element's content. And, they can be used to **set the text content** of the element, too.
+
+```js
+const greeting = document.getElementById('greeting');
+
+greeting.innerText; // "Hi there! My name is Bubbles."
+greeting.textContent; // "Hi there! My name is Bubbles."
+
+greeting.innerText = 'Hello!'; // <p id="greeting">Hello!</p>
+greeting.textContent = 'Hi!'; // <p id="greeting">Hi!</p>
+```
+
+### Differences
+
+So far, these two properties appear to do the exact same thing. In fact, they both offer some convenient features that make them very useful. However, they start to exhibit some differences when the element's content is a little more complex.
+
+Take the following HTML element, for example:
+
+```html
+<div class="card">
+  <style>
+    p { color: red; }
+    strong { text-transform: uppercase; }
+    small { display: none; }
+  </style>
+  <p>Hi   there!<br />My name is <strong>Bubbles</strong>.</p>
+  <small>And I'm a <strong>dog</strong>.</small>
+</div>
+```
+
+Let's take a look at the output of each of these two properties and see how they differ.
+
+```js
+const card = document.querySelector('.card');
+
+card.innerText;
+/*
+"Hi there!
+My name is BUBBLES."
+*/
+
+card.textContent;
+/*
+"
+
+    p { color: red; }
+    strong { text-transform: uppercase; }
+    small { display: none; }
+
+  Hi   there!My name is Bubbles.
+  And I'm a dog.
+"
+*/
+```
+
+It's drastically different in this case, right? `HTMLElement.innerText` is supposed to roughly **match what the user sees** in the browser. Another way to think of this is that its output should closely resemble what the user would get if they were to select the element's content and copy it to their clipboard.
+
+The first thing to notice, based on this definition, is that **hidden elements are ignored**. This applies to elements that don't render, such as `<style>` and `<script>`, but also to elements that are hidden using CSS. In this example, the `<small>` element is hidden, so it's not included in the output of `HTMLElement.innerText`.
+
+Secondly, the output of `HTMLElement.innerText` is **normalized**. This means that all whitespace is collapsed into a single space, and all line breaks are replaced with a single line break. If present, `<br>` tags are also respected, so they're replaced with a line break.
+
+The final point I want to make is that `HTMLElement.innerText` applies **text transformations** to the element's content. In this case, the `<strong>` element is transformed to uppercase, so the output of `HTMLElement.innerText` reflects this.
+
+On the other hand, `Node.textContent` returns the **exact text content** of the element, including any whitespace and line breaks. Yet, `<br>` tags are stripped without any sort of replacement. It also includes the text content of any hidden elements, such as `<style>` and `<script>` and no text transformations are applied.
+
+### Performance
+
+But, wait! There's more! While `HTMLElement.innerText` seems like the sensible choice, it comes with a performance caveat. In order to figure out what the browser renders, CSS has to be considered, triggering a [reflow](https://developer.mozilla.org/en-US/docs/Glossary/Reflow). This can be **computationally expensive**, and can create inadvertent performance bottlenecks.
+
+In my opinion, a good rule of thumb is to prefer `Node.textContent` for plain text elements, if possible. For more complex elements, try identifying how they're affected by layout and user interactions. For example, a complex element that's rendered only once and never altered, would be a use case for `HTMLElement.innerText`, but you can store the output in a variable and reuse it.
+
+### Conclusion
+
+`HTMLElement.innerText` and `Node.textContent` are two very similar properties that can be used to access and manipulate the text content of an element. However, they differ in some important ways, and you should be aware of these differences to choose the one that best suits your needs. Always examine your use case and consider the performance implications of your choice.
diff --git a/snippets/articles/s/js-timeout-interval-delay.md b/snippets/articles/s/js-timeout-interval-delay.md
new file mode 100644
index 000000000..a9e3f924c
--- /dev/null
+++ b/snippets/articles/s/js-timeout-interval-delay.md
@@ -0,0 +1,27 @@
+---
+title: How delays work in JavaScript timing functions
+shortTitle: Delays in JavaScript timing functions
+type: story
+language: javascript
+tags: [browser,timeout]
+author: chalarangelo
+cover: river-house-lights
+excerpt: Did you know that the delay of `setTimeout()` and `setInterval()` is merely a suggestion?
+dateModified: 2022-10-26T05:00:00-04:00
+---
+
+JavaScript provides two widely used timing functions, `setTimeout()` and `setInterval()`. Both of these functions execute a specified function after a given amount of time either once or repeatedly. While this is straightforward, many people don't realize that **the delay is merely a suggestion** and can be altered by a number of factors.
+
+### Delays are not exact
+
+I went into detail about how JavaScript engines execute code in [the Event Loop explanation](/articles/s/javascript-event-loop-explained), but let me recap here. As JavaScript is single-threaded, tasks are queued to be executed in a loop. Thus, `setTimeout()` and `setInterval()` are tasks that will be executed after at least the given amount of time has elapsed. There is no guarantee, however, that the task will be executed exactly after the given amount of time has elapsed. The delay is a suggestion, signifying the **minimum amount of time** that must pass before the task is executed. The actual delay can be longer, depending on the current state of the JavaScript engine.
+
+### Browser factors
+
+Apart from engine-related delays, there are a few other factors that play a role in the actual delay of a task. Briefly, these are:
+
+- Browsers **throttle nested timeouts and intervals** with a delay of at least 4ms, but this can vary depending on the browser.
+- Timeouts and intervals in **inactive/background tabs are throttled** to a minimum of 1000ms to increase battery life.
+- **Known tracking scripts in background tabs** can be throttled even further after a certain amount of time.
+
+On a side note, some browsers store delays as a 32-bit signed integer, meaning that delays over 24.8 days will cause an overflow and execute immediately.
diff --git a/snippets/articles/s/js-typecheck-array.md b/snippets/articles/s/js-typecheck-array.md
new file mode 100644
index 000000000..bda0b390b
--- /dev/null
+++ b/snippets/articles/s/js-typecheck-array.md
@@ -0,0 +1,32 @@
+---
+title: "Tip: Typechecking arrays with Array.isArray()"
+shortTitle: Array typechecking
+type: tip
+language: javascript
+tags: [type,array]
+author: chalarangelo
+cover: purple-flower-field
+excerpt: Make sure to use the correct method when checking if a JavaScript object is an array.
+dateModified: 2022-11-06T05:00:00-04:00
+---
+
+To determine if a JavaScript object is an array, you can either use `Array.isArray()` or the `instanceof` operator. While both methods work for arrays created either using the array literal syntax or the `Array` constructor, there's a key difference. `Array.isArray()` is more reliable, as it works with cross-realm-objects, such as those created in an `iframe`.
+
+```js
+var iframeEl = document.createElement('iframe');
+document.body.appendChild(iframeEl);
+iframeArray = window.frames[window.frames.length - 1].Array;
+
+var array1 = new Array(1,1,1,1);
+var array2 = new iframeArray(1,1,1,1);
+
+console.log(array1 instanceof Array);   // true
+console.log(Array.isArray(array1));     // true
+
+console.log(array2 instanceof Array);   // false
+console.log(Array.isArray(array2));     // true
+```
+
+As illustrated in the previous example, `instanceof` breaks when working with an `iframe`. However, `Array.isArray()` produces the correct result regardless of the way the array was instantiated.
+
+If you are interested in knowing why `instanceof Array` doesn't work across different globals (i.e. `iframe` or `window`), you can read more about it [here](http://web.mit.edu/jwalden/www/isArray.html).
diff --git a/snippets/articles/s/js-typecheck-proxy.md b/snippets/articles/s/js-typecheck-proxy.md
new file mode 100644
index 000000000..289a432d3
--- /dev/null
+++ b/snippets/articles/s/js-typecheck-proxy.md
@@ -0,0 +1,94 @@
+---
+title: Typechecking objects with Proxy in JavaScript
+shortTitle: Object typechecking with Proxy
+type: story
+language: javascript
+tags: [object,type,proxy]
+author: chalarangelo
+cover: customs
+excerpt: A simple way to typecheck objects at runtime using the Proxy object.
+dateModified: 2023-04-23T05:00:00-04:00
+---
+
+A while back, I was working on a project where some objects had **rigid structure requirements**. As I was really not in the mood to use TypeScript, I decided to create a typechecking mechanism for objects using the `Proxy` object.
+
+Drawing inspiration from React's `PropTypes`, I created a handful of **type checking functions** for the most common types.
+
+```js
+const bool = v => typeof v === 'boolean';
+const num = v => typeof v === 'number' && v === v;
+const str = v => typeof v === 'string';
+const date = v => v instanceof Date;
+```
+
+The next step was to decide on how an **object's shape** would be defined. This proved an easy task, as I could simply use the names of the type checking functions as values for the keys of the object.
+
+```js
+const shape = { name: 'str', age: 'num', active: 'bool', birthday: 'date' };
+```
+
+Having decided how to define shapes, I needed to convert this shape definition into a function that would take an object and wrap it with a `Proxy`. The `Proxy` would in turn **intercept any attempts to set a property** and check if the value being set is of the correct type. If it is, the value is set as expected. If not, the trap returns `false`, which means the operation was not a success. Similarly, properties not in the shape definition should not be set, so the trap returns `false` for those as well.
+
+```js
+const createShapeCheckerProxy = (types, shape) => {
+  const validProps = Object.keys(shape);
+  const handler = {
+    set(target, prop, value) {
+      if (!validProps.includes(prop)) return false;
+      const validator = types[shape[prop]];
+      if (!validator || typeof validator !== 'function') return false;
+      if (!validator(value)) return false;
+      target[prop] = value;
+    }
+  };
+  return obj => new Proxy(obj, handler);
+};
+```
+
+Having set everything up, it was time to test it out. Here's an example of the whole thing put together:
+
+```js
+const createShapeCheckerProxy = shape => {
+  const types = {
+    bool: v => typeof v === 'boolean',
+    num: v => typeof v === 'number' && v === v,
+    str: v => typeof v === 'string',
+    date: v => v instanceof Date
+  };
+  const validProps = Object.keys(shape);
+
+  const handler = {
+    set(target, prop, value) {
+      if (!validProps.includes(prop)) return false;
+      const validator = types[shape[prop]];
+      if (!validator || typeof validator !== 'function') return false;
+      if (!validator(value)) return false;
+      target[prop] = value;
+    }
+  };
+
+  return obj => new Proxy(obj, handler);
+};
+
+const shapeCheckerProxy = createShapeCheckerProxy({
+  name: 'str', age: 'num', active: 'bool', birthday: 'date'
+});
+
+const obj = {};
+const proxiedObj = shapeCheckerProxy(obj);
+
+// These are valid
+proxiedObj.name = 'John';
+proxiedObj.age = 34;
+proxiedObj.active = false;
+proxiedObj.birthday = new Date('1989-04-01');
+
+// These will fail
+proxiedObj.name = 404;
+proxiedObj.age = false;
+proxiedObj.active = 'no';
+proxiedObj.birthday = null;
+proxiedObj.whatever = 'something';
+```
+
+As you can see, `createShapeCheckerProxy` can be used with a plain object to create a reusable function that wraps an object with a typechecking `Proxy`. The defined `types` are used to typecheck individual properties and could be extended to support more complex types and special rules. Overall, this can be a pretty useful tool for **typechecking objects at runtime**, without having to use TypeScript or similar tools.
diff --git a/snippets/articles/s/js-window-location-cheatsheet.md b/snippets/articles/s/js-window-location-cheatsheet.md
new file mode 100644
index 000000000..487fda979
--- /dev/null
+++ b/snippets/articles/s/js-window-location-cheatsheet.md
@@ -0,0 +1,63 @@
+---
+title: Window.location Cheat Sheet
+type: cheatsheet
+language: javascript
+tags: [browser]
+author: chalarangelo
+cover: yellow-sofa
+excerpt: A quick reference for the `window.location` object.
+dateModified: 2022-12-21T05:00:00-04:00
+---
+
+The `window.location` object is particularly useful when working with a page's URL information. Let's take a look at an example of a URL and what each property of the `window.location` object represents.
+
+```js
+const url = 'https://dev.30secondsofcode.org:8000/c/js?page=2&sort=asc#search';
+```
+
+Provide the above URL, here's a quick reference for the properties `window.location` object:
+
+### window.location.protocol
+
+- The protocol schema of the URL (usually `http:` or `https:`)
+- Sample value: `https:`
+
+### window.location.hostname
+
+- The domain name of the URL
+- Sample value: `dev.30secondsofcode.org`
+
+### window.location.port
+
+- The port number of the URL
+- Sample value: `8000`
+
+### window.location.host
+
+- The domain name and port number of the URL
+- Sample value: `dev.30secondsofcode.org:8000`
+
+### window.location.origin
+
+- The protocol schema, domain name and port number of the URL
+- Sample value: `https://dev.30secondsofcode.org:8000`
+
+### window.location.pathname
+
+- The path of the URL, including the leading slash
+- Sample value: `/c/js`
+
+### window.location.search
+
+- The query string of the URL, including the leading question mark
+- Sample value: `?page=2&sort=asc`
+
+### window.location.hash
+
+- The fragment identifier of the URL, including the leading hash
+- Sample value: `#search`
+
+### window.location.href
+
+- The full URL, including the protocol schema, domain name, port number, path, query string and fragment identifier
+- Sample value: `https://dev.30secondsofcode.org:8000/c/js?page=2&sort=asc#search`
diff --git a/snippets/articles/s/lazy-loading-images.md b/snippets/articles/s/lazy-loading-images.md
new file mode 100644
index 000000000..a35b29647
--- /dev/null
+++ b/snippets/articles/s/lazy-loading-images.md
@@ -0,0 +1,21 @@
+---
+title: "Tip: Lazy load images in HTML"
+shortTitle: Image lazy loading
+type: tip
+language: html
+tags: [webdev,image]
+author: chalarangelo
+cover: bridge
+excerpt: Did you know you can use a native HTML attribute to add lazy load to images? Learn all you need to know with this quick tip.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Images are nowadays a crucial part of any webpage, but, as with most things, they come at a cost. Images are usually a major percentage of a page's load, which is why they make for a great candidate for optimization. The most common technique is that of lazy loading, usually in the form of delaying loading images outside the initial viewport until they are close to being scrolled into view.
+
+This exact behavior is already part of the HTML standard in the form of the `loading` attribute. All you have to do to reap its benefits is add `loading="lazy"` to any images you want to add lazy loading to:
+
+```html
+<img src="/img/duck.png" alt="A rubber duck" loading="lazy" />
+```
+
+**Caveat:** At the time of writing, the `loading` attribute is supported in most modern browsers, except for Safari, but not in legacy browsers, such as IE. On that note, lazy loading can be seen as a progressive enhancement for browsers that support it, so it's still worth adding for any users that can benefit from it.
diff --git a/snippets/articles/s/nodejs-chrome-debugging.md b/snippets/articles/s/nodejs-chrome-debugging.md
new file mode 100644
index 000000000..e3915a3fa
--- /dev/null
+++ b/snippets/articles/s/nodejs-chrome-debugging.md
@@ -0,0 +1,21 @@
+---
+title: "Tip: Debugging Node.js using Chrome Developer Tools"
+shortTitle: Debug Node.js with Chrome Developer Tools
+type: tip
+language: javascript
+tags: [node,debugging]
+author: chalarangelo
+cover: bug
+excerpt: Did you know you can use Chrome Developer Tools to debug your Node.js code? Find out how in this short guide.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Node.js can be debugged using Chrome Developer Tools since `v6.3.0`. Here's a quick guide on how to do this:
+
+1. Download and install Node.js `v6.3.0` or newer, if you don't already have it installed on your machine.
+2. Run node with the `--inspect-brk` flag (e.g. `node --inspect-brk index.js`).
+3. Open `about:inspect` in a new tab in Chrome. You should see something like the screenshot below.
+4. Click `Open dedicated DevTools for Node` to open a new window connected to your Node.js instance.
+5. Use the Developer Tools to debug your Node.js application!
+
+![about:inspect page](./illustrations/chrome-debug-node.png)
diff --git a/snippets/articles/s/nodejs-static-file-server.md b/snippets/articles/s/nodejs-static-file-server.md
new file mode 100644
index 000000000..8ddd0f15d
--- /dev/null
+++ b/snippets/articles/s/nodejs-static-file-server.md
@@ -0,0 +1,195 @@
+---
+title: Create a static file server with Node.js
+shortTitle: Node.js static file server
+type: story
+language: javascript
+tags: [node,server]
+author: chalarangelo
+cover: man-cup-laptop
+excerpt: Create your own static file server with Node.js in just 70 lines of code.
+dateModified: 2022-06-05T05:00:00-04:00
+---
+
+### A simple static file server
+
+One of the simplest beginner backend projects you can create is a static file server. In its simplest form, a static file server will listen for requests and try to match the requested URL to a file on the local filesystem. Here's a minimal example of that in action:
+
+```js
+const fs = require('fs');
+const http = require('http');
+
+http.createServer((req, res) => {
+  fs.readFile(__dirname + req.url, (err, data) => {
+    if (err) {
+      res.writeHead(404, { 'Content-Type': 'text/html' });
+      res.end('404: File not found');
+    } else {
+      res.writeHead(200, { 'Content-Type': 'text/html' });
+      res.end(data);
+    }
+  });
+}).listen(8000);
+```
+
+In this code example, we're using the `fs` module to read the file at `__dirname + req.url`. If the file doesn't exist, we'll return a `404` error. Otherwise, we'll return the file. The `http` module is used to create the server that listens on port `8000`.
+
+In theory, one could stop here and have a very basic static file server. However, there are a few considerations that could be taken into account. Let's explore them one by one, and see how we can address them.
+
+### Modularity
+
+First and foremost, we don't necessarily want to serve files from the same directory as our Node.js server. To address this problem, we would have to change the directory `fs.readFile()` looks for the file in. To accomplish this, we can specify a directory to serve files from and use the `path` module to resolve files from that directory. This way, we can also better handle different operating systems and environments.
+
+Here's a short snippet on how to resolve a file path using the `path` module:
+
+```js
+const fs = require('fs');
+const path = require('path');
+
+const directoryName = './public';
+const requestUrl = 'index.html';
+
+const filePath = path.join(directoryName, requestUrl);
+
+fs.readFile(filePath, (err, data) => {
+  // ...
+});
+```
+
+### Security
+
+Our next concern is security. Obviously, we don't want users prying around our machine unauthorized. Currently, it's not impossible to get access to files outside of the specified root directory (e.g. `GET /../../../`). To address this, we can use the `path` module again to check if the requested file is inside the root directory.
+
+```js
+const path = require('path');
+
+const directoryName = './public';
+const root = path.normalize(path.resolve(directoryName));
+
+const requestUrl = 'index.html';
+
+const filePath = path.join(root, fileName);
+const isPathUnderRoot = path
+  .normalize(path.resolve(filePath))
+  .startsWith(root);
+```
+
+Similarly, we can ensure that users don't get access to sensitive files by checking the file type. For this to work, we can specify an array or object of supported file types and check the file's extension using the `path` module once again.
+
+```js
+const path = require('path');
+
+const types = ['html', 'css', 'js', 'json'];
+
+const requestUrl = 'index.html';
+const extension = path.extname(requestUrl).slice(1);
+
+const isTypeSupported = types.includes(extension);
+```
+
+### Omitting the HTML extension
+
+A staple of most websites is the ability to omit the file extension from the URL when requesting an HTML page. It's a small quality of life improvement that users expect and it would be really nice to add to our static file server.
+
+This is where things get a little tricky. To provide this functionality, we need to check for missing extensions and look up the appropriate HTML file. Bear in mind, though, that there are two possible matches for a URL such as `/my-page`. This path can either be matched by `/my-page.html` or `my-page/index.html`. To deal with this, we'll prioritize one over the other. In our case, we'll prioritize `/my-page.html` over `my-page/index.html`, but it's pretty easy to swap them the other way round.
+
+To implement this, we can use the `fs` module to check if one of them exists and handle things appropriately. A special case would also need to be added for the root url (`/`) to match it to the `index.html` file.
+
+```js
+const fs = require('fs');
+const path = require('path');
+
+const directoryName = './public';
+const root = path.normalize(path.resolve(directoryName));
+
+const extension = path.extname(req.url).slice(1);
+let fileName = requestUrl;
+
+if (requestUrl === '/') fileName = 'index.html';
+else if (!extension) {
+  try {
+    fs.accessSync(path.join(root, requestUrl + '.html'), fs.constants.F_OK);
+    fileName = requestUrl + '.html';
+  } catch (e) {
+    fileName = path.join(requestUrl, 'index.html');
+  }
+}
+```
+
+### Final touches
+
+After implementing all of the above, we can put everything together to create a static file server with all the functionality we need. I'll throw in a couple of finishing touches, such as logging requests to the console and handling a few more file types, and here's the final product:
+
+```js
+const fs = require('fs');
+const http = require('http');
+const path = require('path');
+
+const port = 8000;
+const directoryName = './public';
+
+const types = {
+  html: 'text/html',
+  css: 'text/css',
+  js: 'application/javascript',
+  png: 'image/png',
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  gif: 'image/gif',
+  json: 'application/json',
+  xml: 'application/xml',
+};
+
+const root = path.normalize(path.resolve(directoryName));
+
+const server = http.createServer((req, res) => {
+  console.log(`${req.method} ${req.url}`);
+
+  const extension = path.extname(req.url).slice(1);
+  const type = extension ? types[extension] : types.html;
+  const supportedExtension = Boolean(type);
+
+  if (!supportedExtension) {
+    res.writeHead(404, { 'Content-Type': 'text/html' });
+    res.end('404: File not found');
+    return;
+  }
+
+  let fileName = req.url;
+  if (req.url === '/') fileName = 'index.html';
+  else if (!extension) {
+    try {
+      fs.accessSync(path.join(root, req.url + '.html'), fs.constants.F_OK);
+      fileName = req.url + '.html';
+    } catch (e) {
+      fileName = path.join(req.url, 'index.html');
+    }
+  }
+
+  const filePath = path.join(root, fileName);
+  const isPathUnderRoot = path
+    .normalize(path.resolve(filePath))
+    .startsWith(root);
+
+  if (!isPathUnderRoot) {
+    res.writeHead(404, { 'Content-Type': 'text/html' });
+    res.end('404: File not found');
+    return;
+  }
+
+  fs.readFile(filePath, (err, data) => {
+    if (err) {
+      res.writeHead(404, { 'Content-Type': 'text/html' });
+      res.end('404: File not found');
+    } else {
+      res.writeHead(200, { 'Content-Type': type });
+      res.end(data);
+    }
+  });
+});
+
+server.listen(port, () => {
+  console.log(`Server is listening on port ${port}`);
+});
+```
+
+Not too bad, right? In just 70 lines of code, we managed to create a pretty decent static file server without using anything but core Node.js APIs.
diff --git a/snippets/articles/s/nodejs-test-module-introduction.md b/snippets/articles/s/nodejs-test-module-introduction.md
new file mode 100644
index 000000000..e67331c5f
--- /dev/null
+++ b/snippets/articles/s/nodejs-test-module-introduction.md
@@ -0,0 +1,136 @@
+---
+title: Introduction to the Node.js test module
+shortTitle: Node.js test module introduction
+type: story
+language: javascript
+tags: [node,testing]
+author: chalarangelo
+cover: contemporary-desk
+excerpt: The Node.js test module is a new testing tool that's still in its early stages. Learn more about it in this short introduction.
+dateModified: 2023-04-30T05:00:00-04:00
+---
+
+A little while back, I stumbled upon the [Node.js test module](https://nodejs.org/docs/latest-v18.x/api/test.html). Having tried various JavaScript testing tools in recent years, I decided to set some time aside to test it and see how it works.
+
+_Before you read any further, note that at the time of writing (April, 2023), this module is still **experimental** and is likely to change in future releases. While **not recommended for production use**, it's still worth learning about as it might come in handy later down the line._
+
+So, how does the Node.js test module compare to the likes of Jest and Vitest? As expected, it's less feature-rich than other tools, which is understandable given that it's still in its early stages. However, the core functionality is there and it's very easy to use and set up as it **doesn't require third-party dependencies**.
+
+Before you can use the module, you'll have to **import** it. You'll most likely have to import the **assertion module** as well. Here's how to import both:
+
+```js
+import test from 'node:test';
+import assert from 'node:assert/strict';
+```
+
+Additionally, if you want to use methods such as `describe` or `it` from the test module, you'll have to import them as well. For example:
+
+```js
+import { describe, it } from 'node:test';
+```
+
+Now that you have the module imported, you can **start writing tests**. The test module provides a `test` function that takes two arguments in its simplest form:
+
+- `name`: a string describing the test
+- `fn`: a function containing the test logic
+
+Let's look at an example:
+
+```js
+import test from 'node:test';
+import assert from 'node:assert/strict';
+
+test('my test', () => {
+  assert.strictEqual(1, 1);
+});
+```
+
+This is pretty simple, but how does one **run the tests from the command line**? Contrary to most other tools, you don't need to create a new entry under your `package.json`'s `scripts` object. Instead, you can simply run the `node --test` command:
+
+```shell
+node --test
+```
+
+Running this command will match certain **file patterns**, such as files ending in `.test.js` and files under the `test` directory. You can read more about this in the [documentation](https://nodejs.org/docs/latest-v18.x/api/test.html#test-runner-execution-model). Additionally, you can manually specify one or more space-separated file patterns to run tests from:
+
+```shell
+node --test my-example.test.js
+```
+
+These basic instructions might cover some simple tests, but no testing tool is complete without more advanced features. Two important testing staples are **setup and teardown functions**. The test module provides `beforeEach` and `afterEach` functions that run before and after each test, respectively.
+
+Note that you can import these functions and use them, but there's also another way. By making the test **asynchronous** and passing an argument to the test function, you can use the `beforeEach` and `afterEach` functions as methods of the test object. I've found this to be a bit more convenient, so I'll be using this method in the examples below. Here's what that looks like:
+
+```js
+import test from 'node:test';
+import assert from 'node:assert/strict';
+
+test('my test', async t => {
+  let a;
+
+  t.beforeEach(() => {
+    a = 1;
+  });
+
+  t.afterEach(() => {
+    a = 0;
+  });
+
+  await t.test('my subtest', () => {
+    assert.strictEqual(a, 1);
+  });
+});
+```
+
+While all of this sounds pretty good, you might be wondering what a **real-world example** looks like. I cooked up a little function that mutates an array of numbers and returns a value just to demonstrate. The logic is not particularly complex or interesting, but it's enough to take the module for a spin. Let's have a look:
+
+```js
+import test, { describe } from 'node:test';
+import assert from 'node:assert/strict';
+
+const doubleAndSum = (arr, mod = 0) => {
+  let sum = 0;
+  Object.entries(arr).forEach(([i, v]) => {
+    if (v % 2 === mod) arr[i] = v * 2;
+    else sum += v;
+  });
+  return sum;
+};
+
+describe('doubleAndSum', () => {
+  let arr, sum;
+
+  test('when mod is 0', async t => {
+    t.beforeEach(() => {
+      arr = [1, 2, 3];
+      sum = doubleAndSum(arr, 0);
+    });
+
+    await t.test('sums the even values', () => {
+      assert.equal(sum, 4);
+    });
+
+    await t.test('doubles the even values', () => {
+      assert.equal(arr[1], 4);
+    });
+  });
+
+  test('when mod is 1', async t => {
+    t.beforeEach(() => {
+      arr = [1, 2, 3];
+      sum = doubleAndSum(arr, 1);
+    });
+
+    await t.test('sums the even values', () => {
+      assert.equal(sum, 2);
+    });
+
+    await t.test('doubles the odd values', () => {
+      assert.equal(arr[0], 2);
+      assert.equal(arr[2], 6);
+    });
+  });
+});
+```
+
+And there you have it! Hopefully, by now you have a pretty good idea of what the Node.js test module is all about. There's a lot more to it, such as **coverage** reporting, **watch mode** and **mocking**, if you feel like digging deeper. You can find more information in the [documentation](https://nodejs.org/docs/latest-v18.x/api/test.html).
diff --git a/snippets/articles/s/passive-scroll-listener-performance.md b/snippets/articles/s/passive-scroll-listener-performance.md
new file mode 100644
index 000000000..e4d42717d
--- /dev/null
+++ b/snippets/articles/s/passive-scroll-listener-performance.md
@@ -0,0 +1,22 @@
+---
+title: "Tip: Improve scroll listener performance"
+shortTitle: Improve scroll listener performance
+type: tip
+language: javascript
+tags: [browser,event]
+author: chalarangelo
+cover: chill-surfing
+excerpt: Scroll listeners can easily become a performance bottleneck for your web application. Here's how to fix that.
+dateModified: 2023-03-07T05:00:00-04:00
+---
+
+When working with scroll listeners in JavaScript, one can often run into performance issues. This is because scroll listeners are triggered on **every single scroll event**, which can be quite frequent. Most of the time, such listeners are used for infinite scrolling and lazy loading, meaning that the scroll event won't be intercepted. As such, `Event.preventDefault()` will not be called, guving us an optimization opportunity.
+
+```js
+window.addEventListener('scroll', () => {
+  // Do something
+  // Can't use `preventDefault` here
+}, { passive: true });
+```
+
+As demonstrated in this code snippet, setting the `passive` option to `true` will enable certain **performance optimizations** in the browser. This way, the browser will know that it can safely skip the event queue and execute the scroll listener immediately. The result is a much smoother experience for the user, as the scroll event will be handled immediately, instead of being queued and handled later.
diff --git a/snippets/articles/s/password-autocomplete-suggestion.md b/snippets/articles/s/password-autocomplete-suggestion.md
new file mode 100644
index 000000000..3c7e0a634
--- /dev/null
+++ b/snippets/articles/s/password-autocomplete-suggestion.md
@@ -0,0 +1,23 @@
+---
+title: "Tip: Adding autocomplete to a password field"
+shortTitle: Password field autocomplete
+type: tip
+language: html
+tags: [webdev]
+author: chalarangelo
+cover: padlocks
+excerpt: Use the HTML `autocomplete` attribute to create more secure and accessible password fields.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+The HTML `autocomplete` attribute provides a wide variety of options for `<input>` fields. One of these is the `new-password` value, which can be used when the user is asked to create a new password (e.g. signup or reset password forms). This value ensures that the browser will not accidentally fill in an existing password, while it also allows the browser to suggest a secure password:
+
+```html
+<form action="signup" method="post">
+  <input type="text" autocomplete="username">
+  <input type="password" autocomplete="new-password">
+  <input type="submit" value="Sign up">
+</form>
+```
+
+Additionally, if the form contains a second password field asking the user to retype the newly created password, `autocomplete="new-password"` should be used for both of the password fields.
diff --git a/snippets/articles/s/perfect-css-transition-duration.md b/snippets/articles/s/perfect-css-transition-duration.md
new file mode 100644
index 000000000..6e76e83f1
--- /dev/null
+++ b/snippets/articles/s/perfect-css-transition-duration.md
@@ -0,0 +1,17 @@
+---
+title: "Tip: The perfect duration for CSS transitions"
+shortTitle: CSS transition duration
+type: tip
+language: css
+tags: [interactivity,visual,animation]
+author: chalarangelo
+cover: perfect-timing
+excerpt: Learn how to make your CSS transitions feel perfect when users interact with elements on the page with this simple tip.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+We have all experienced a website interaction that feels sluggish or otherwise off on account of poor transition or animation duration and timing. However, there is a very simple "golden rule" to help you avoid this poor user experience, called **Doherty Threshold:**
+
+> Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
+
+The **magic number** of `0.4s` sounds like a very reasonable threshold, but take a look at any of your favorite websites and you'll notice that most `transition-duration` or `animation-duration` values are closer to `0.3s`. This might have something to do with our more recent expectation of what a fast interaction should feel like - after all the relevant research paper was published in 1982.
diff --git a/snippets/articles/s/prefetching-resources.md b/snippets/articles/s/prefetching-resources.md
new file mode 100644
index 000000000..0ebe0252a
--- /dev/null
+++ b/snippets/articles/s/prefetching-resources.md
@@ -0,0 +1,31 @@
+---
+title: "Tip: Prefetching resources in the browser"
+shortTitle: Resource prefetching
+type: tip
+language: html
+tags: [webdev,browser]
+author: chalarangelo
+cover: playing-fetch
+excerpt: Resource prefetching is a great way to improve perceived page speed on your website and requires little effort. Learn how to use it today.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Resource prefetching is a great technique to improve perceived page speed on your website and provide a better user experience, without a lot of effort. Prefetching happens in the browser as soon as it is idle, meaning it will not slow down the initial load, but rather utilize idle time to fetch and cache resources that might be useful later on.
+
+To prefetch a resource, you can add a `<link>` tag with the `rel="prefetch"` attribute inside your document's `<head>` or `<body>`:
+
+```html
+<link rel="prefetch" href="./cool_page/data.json">
+```
+
+What this does is hint the browser that we will need this resource, so it should download it when idle and store it in the cache. Bear in mind that prefetching is more of a hint rather to the browser than anything else, so there are situations where the browser might ignore it (due to other browser downloads, user settings, connection issues etc.).
+
+Prefetching resources can increase the perceived load time of a page or resource that is often requested, while also providing major performance benefits for resources such as webfonts, as they will download after the browser downloads, parses and styles the DOM. Currently resource prefetching only supports `http://` and `https://` links, however the same-origin restriction does not apply to resource prefetching, so you can download external resources if necessary.
+
+Similarly, you can preload assets using the `rel="preload"` attribute, which are not hints but rather directions that the browser must follow:
+
+```html
+<link rel="preload" href="./important_page/data.json">
+```
+
+The only downside to preloading resources compared to prefetching is that [browser support](https://caniuse.com/#search=preload) might be low depending on when you are reading this.
diff --git a/snippets/articles/s/python-bare-except.md b/snippets/articles/s/python-bare-except.md
new file mode 100644
index 000000000..ebd12e50a
--- /dev/null
+++ b/snippets/articles/s/python-bare-except.md
@@ -0,0 +1,47 @@
+---
+title: "Tip: Avoid using bare except in Python"
+shortTitle: Bare except best practices
+type: tip
+language: python
+tags: [error]
+cover: dark-cloud
+excerpt: It's generally not a good idea to use bare `except` clause in Python, but do you know why?
+dateModified: 2022-02-20T05:00:00-04:00
+---
+
+In Python, keyboard interrupts and system exits are propagated using exceptions (i.e. `KeyboardInterrupt` and `SystemExit`). As a result, a bare `except` clause is going to catch something like the user hitting <kbd>Ctrl</kbd> + <kbd>C</kbd>.
+
+Consider the following code. If the user were to try exiting the program, the keyboard interrupt would be caught by the `except` clause. This would be undesirable, as it prevents the user from actually exiting the program until they provide valid input.
+
+```py
+while True:
+  try:
+    s = input('Input a number:')
+    x = int(s)
+  except:
+    print('Not a number, try again!')
+```
+
+A way to prevent this would be to use `Exception` which will ensure that the user will not be trapped. The only problem with this approach is that `Exception` is generic and will handle pretty much anything thrown at it.
+
+```py
+while True:
+  try:
+    s = input('Input a number:')
+    x = int(s)
+  except Exception:
+    print('Not a number, try again!')
+```
+
+The correct way to handle errors is to specify the type of error you expect. For example, in this code sample, `ValueError` would be appropriate.
+
+```py
+while True:
+  try:
+    s = input('Input a number:')
+    x = int(s)
+  except ValueError:
+    print('Not a number, try again!')
+```
+
+As a rule of thumb, you should only handle expected failure states using `except` with an appropriate error type. In the case of unexpected errors, it might be better to simply let the program fail naturally and exit.
diff --git a/snippets/articles/s/python-dict-getkey-vs-dictkey.md b/snippets/articles/s/python-dict-getkey-vs-dictkey.md
new file mode 100644
index 000000000..ff88c76c5
--- /dev/null
+++ b/snippets/articles/s/python-dict-getkey-vs-dictkey.md
@@ -0,0 +1,23 @@
+---
+title: "Tip: You should use dict.get(key) instead of dict[key]"
+shortTitle: dict.get(key) vs dict[key]
+type: tip
+language: python
+tags: [dictionary]
+cover: fruit-feast
+excerpt: Learn the difference between two common ways to access values in Python dictionaries and level up your code today.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+A common debate among Python developers seems to stem from the retrieval of dictionary values, which can be accomplished using either `dict[key]` or `dict.get(key)`.
+
+Although you can achieve the same result using either one, `dict.get()` is usually preferred, as it accepts a second argument which acts as the default value shall the key not exist in the given dictionary. Due to this property, `dict.get()` will always return a value, whereas `dict[key]` will raise a `KeyError` if the given key is missing.
+
+```py
+a = { 'max': 200 }
+b = { 'min': 100, 'max': 250 }
+c = { 'min': 50 }
+
+a['min'] + b['min'] + c['min'] # throws KeyError
+a.get('min', 0) + b.get('min', 0) + c.get('min', 0) # 150
+```
diff --git a/snippets/articles/s/python-empty-list.md b/snippets/articles/s/python-empty-list.md
new file mode 100644
index 000000000..66912ed08
--- /dev/null
+++ b/snippets/articles/s/python-empty-list.md
@@ -0,0 +1,25 @@
+---
+title: How can I check if a Python list is empty?
+shortTitle: Empty list
+type: question
+language: python
+tags: [list]
+author: chalarangelo
+cover: salad-2
+excerpt: There's a good way to test the emptiness of a Python list and a better one. Which one are you using?
+dateModified: 2023-01-15T05:00:00-04:00
+---
+
+Checking the emptiness of a Python list is rather easy using the `len()` function. Yet, there's another technique that works on all types of sequences and collections. This is based on the **truth value testing** of the sequence or collection itself.
+
+By default, a Python object is considered truthy unless its class defines either a `__bool__()` or a `__len__()` method that returns `False` or `0` respectively. Python's built-in objects, such as tuples, lists, strings, dictioners, sets and ranges all implement a `__len__()` method. This menas that truth value testing of these objects will return `False` if they are empty, and `True` otherwise.
+
+Based on these observations, all you need to check if a Python list is empty is to test its truth value, using the `not` operator.
+
+```py
+x = []
+not x # True
+
+y = [1, 2]
+not y # False
+```
diff --git a/snippets/articles/s/python-file-close.md b/snippets/articles/s/python-file-close.md
new file mode 100644
index 000000000..b05cc92cc
--- /dev/null
+++ b/snippets/articles/s/python-file-close.md
@@ -0,0 +1,37 @@
+---
+title: How to correctly close files in Python
+shortTitle: Closing files
+type: story
+language: python
+tags: [file]
+cover: flower-pond
+excerpt: When working with files in Python, it's important to ensure that the file is closed correctly. Here are a couple of ways to do that.
+dateModified: 2022-02-03T05:00:00-04:00
+---
+
+When working with files in Python, it's quite common to explicitly invoke the `close()` method after processing the file. This might work fine in a lot of cases, however it's a common pitfall for beginners and developers coming from other languages.
+
+Take for example the following code. If an exception is thrown before calling the `close()` method, the file would remain open. In such a scenario, the code would stop executing before `close()` is called, leaving the file open after the program crashes.
+
+```py
+f = open('filename', 'w')
+f.write('Hello world!')
+f.close()
+```
+
+One way to mitigate this problem is to encapsulate the `write()` call in a `try` statement. This way, you can handle any exceptions and you can use `finally` to ensure the file gets closed.
+
+```py
+f = open('filename', 'w')
+try:
+  f.write('Hello world!')
+finally:
+  f.close()
+```
+
+Another option offered by Python is to use a `with` statement which will ensure the file is closed when the code that uses it finishes running. This holds true even if an exception is thrown.
+
+```py
+with open('filename', 'w') as f:
+  f.write('Hello world!')
+```
diff --git a/snippets/articles/s/python-fstrings-str-format.md b/snippets/articles/s/python-fstrings-str-format.md
new file mode 100644
index 000000000..63efc8ebf
--- /dev/null
+++ b/snippets/articles/s/python-fstrings-str-format.md
@@ -0,0 +1,32 @@
+---
+title: "Tip: 2 ways to format a string in Python"
+shortTitle: String formatting
+type: tip
+language: python
+tags: [string]
+cover: feathers
+excerpt: Learn two ways to format a string in Python with this quick tip.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### f-string
+
+[Formatted string literals](https://docs.python.org/3/reference/lexical_analysis.html?highlight=lexical%20analysis#formatted-string-literals), commonly known as f-strings, are strings prefixed with `'f`' or `'F'`. These strings can contain replacement fields, enclosed in curly braces (`{}`).
+
+```py
+name = 'John'
+age = 32
+
+print(f'{name} is {age} years old') # 'John is 32 years old'
+```
+
+### str.format()
+
+The [`str.format()`](https://docs.python.org/3/library/stdtypes.html?highlight=str%20format#str.format) method works very much alike f-strings, the main difference being that replacement fields are supplied as arguments instead of as part of the string.
+
+```py
+name = 'John'
+age = 32
+
+print('{0} is {1} years old'.format(name, age)) # 'John is 32 years old'
+```
diff --git a/snippets/articles/s/python-identity-equality.md b/snippets/articles/s/python-identity-equality.md
new file mode 100644
index 000000000..ac0a6711d
--- /dev/null
+++ b/snippets/articles/s/python-identity-equality.md
@@ -0,0 +1,45 @@
+---
+title: What is the difference between Python's equality operators?
+shortTitle: Python equality operators
+type: question
+language: python
+tags: [type,comparison]
+cover: umbrellas
+excerpt: Python provides two distinct comparison operators for different task. Stop mixing them up using this quick guide.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Python provides two very similar equality operators used for comparisons:
+
+- The double equals (`==`), also known as the equality operator
+- The `is` keyword, also known as the identity operator
+
+Although similar to one another, the double equals (`==`) and the `is` keyword are used for different comparison purposes and yield different results.
+
+The main difference between the two is that the `is` keyword checks for reference equality while the double equals (`==`) operator checks for value equality. In other words, `is` will return `True` if two variables both refer to the same object in memory (aka. identity), whereas the double equals operator will evaluate to `True` if the two objects have the same value.
+
+Here are some examples to clear up any confusion:
+
+```py
+a = [1, 2, 3]
+b = a
+c = [x for x in a]
+
+print([
+  a == b, # True
+  a is b, # True
+  a == c, # True
+  a is c  # False
+])
+
+x = 'hi'
+y = x
+z = 'HI'.lower()
+
+print([
+  x == y, # True
+  x is y, # True
+  x == z, # True
+  x is z  # False
+])
+```
diff --git a/snippets/articles/s/python-lists-tuples.md b/snippets/articles/s/python-lists-tuples.md
new file mode 100644
index 000000000..7acd1e262
--- /dev/null
+++ b/snippets/articles/s/python-lists-tuples.md
@@ -0,0 +1,31 @@
+---
+title: What is the difference between lists and tuples in Python?
+shortTitle: Lists vs Tuples
+type: question
+language: python
+tags: [list]
+author: chalarangelo
+cover: red-mountain
+excerpt: Learn how Python's lists and tuples are different and level up your code today.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Python's lists and tuples may seem pretty similar in syntax and function, however they have some major differences the most important of which is the fact that lists are mutable and tuples aren't. Here's a quick breakdown:
+
+### Lists
+
+- Syntax: `[1, 2, 3]`
+- Contained elements are mutable (can be changed after creation)
+- Lists have a variable length
+- A list takes up more memory than a tuple
+
+### Tuples
+
+- Syntax: `(1, 2, 3)`
+- Contained elements are immutable (cannot be changed after creation)
+- Tuples have a fixed length
+- A tuple takes up less memory than a list
+
+### When to use each one
+
+Lists provide a more accessible API and should be used whenever similar types of objects need to be stored and are expected to change over the course of the application's execution. On the other hand, tuples should be used for immutable data, behaving more like constants than variables.
diff --git a/snippets/articles/s/python-lowercase.md b/snippets/articles/s/python-lowercase.md
new file mode 100644
index 000000000..648871210
--- /dev/null
+++ b/snippets/articles/s/python-lowercase.md
@@ -0,0 +1,34 @@
+---
+title: How do I convert a string to lowercase in Python?
+shortTitle: Lowercase string
+type: question
+language: python
+tags: [string]
+cover: type-stamps
+excerpt: Learn of the two different ways to convert strings to lowercase in Python and understand when you should use each one with this quick guide.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### str.lower()
+
+Python's standard method for converting a string to lowercase is `str.lower()` and is compatible with both Python 2 and Python 3. While this is the standard way for most cases, there are certain cases where this method might not be the most appropriate, especially if you are working with Unicode strings.
+
+```py
+'Hello'.lower()               # 'hello'
+'Straße'.lower()              # 'straße'
+'Straße'.upper().lower()      # 'strasse'
+# Example of incorrect result when used for unicode case-insensitive matching
+'Straße'.upper().lower() == 'Straße'.lower() # False ('strasse' != 'straße')
+```
+
+### str.casefold()
+
+Python 3 introduced `str.casefold()`, which is very similar to `str.lower()`, but more aggressive as it is intended to remove all case distinctions in Unicode strings. It implements the casefolding algorithm as described in [section 3.13 of the Unicode Standard](https://www.unicode.org/versions/Unicode9.0.0/ch03.pdf).
+
+```py
+'Hello'.casefold()            # 'hello'
+'Straße'.casefold()           # 'strasse'
+'Straße'.upper().casefold()   # 'strasse'
+# Returns the correct result when used for unicode case-insensitive matching
+'Straße'.upper().casefold() == 'Straße'.casefold() # True
+```
diff --git a/snippets/articles/s/python-mutable-default-arguments.md b/snippets/articles/s/python-mutable-default-arguments.md
new file mode 100644
index 000000000..90946ab00
--- /dev/null
+++ b/snippets/articles/s/python-mutable-default-arguments.md
@@ -0,0 +1,36 @@
+---
+title: "Tip: Watch out for mutable default arguments in Python"
+shortTitle: Mutable default arguments
+type: tip
+language: python
+tags: [function]
+cover: goat-wooden-cottage
+excerpt: Mutable default arguments can trip up Python beginners and veterans alike. Here's a quick workaround to deal with them.
+dateModified: 2022-02-27T05:00:00-04:00
+---
+
+Default arguments in Python are evaluated only once. The evaluation happens when the function is defined, instead of every time the function is called. This can inadvertently create **hidden shared state**, if you use a mutable default argument and mutate it at some point. This means that the mutated argument is now the default for all future calls to the function as well.
+
+Take the following code as an example. Every call to the function shares the same list. So, the second time it's called, the function doesn't start out with an empty list. Instead, the default argument is the list containing the value from the previous call.
+
+```py
+def append(n, l = []):
+  l.append(n)
+  return l
+
+append(0) # [0]
+append(1) # [0, 1]
+```
+
+If you absolutely need to use a mutable object as the default value in a function, you can set the default value of the argument to `None` instead. Then, checking in the function body if it is `None`, you can set it to the mutable value you want without side effects.
+
+```py
+def append(n, l = None):
+  if l is None:
+    l = []
+  l.append(n)
+  return l
+
+append(0) # [0]
+append(1) # [1]
+```
diff --git a/snippets/articles/s/python-named-tuples.md b/snippets/articles/s/python-named-tuples.md
new file mode 100644
index 000000000..783eefe17
--- /dev/null
+++ b/snippets/articles/s/python-named-tuples.md
@@ -0,0 +1,39 @@
+---
+title: What are named tuples in Python?
+shortTitle: Named Tuples
+type: question
+language: python
+tags: [list,dictionary]
+cover: mask-quiet
+excerpt: Understand Python's named tuples and start using them in your projects today.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Python's named tuples are a very simple yet interesting feature that can make a developer's life easier. They are part of the `collections` module and act very similar to regular tuples, the main difference being that values stored in a named tuple can be accessed using field names instead of indexes.
+
+For example, a point in the two-dimensional plane can be represented using two coordinates. In a regular tuple, these values would be accessed by index (`[0]` and `[1]`), but if we define a named tuple, `Point`, we can access them using `x` and `y` instead (although we can still use indexes, too, if we want):
+
+```py
+from collections import namedtuple
+
+# Regular tuple
+p = (2, 4) # p[0] = 2, p[1] = 4
+
+# Named tuple
+Point = namedtuple('Point', 'x y')
+q = Point(3, 5) # q.x = 3, q.y = 5
+```
+
+Apart from the increased readability of your code, named tuples provide a few other quality of life improvements. First and foremost, they allow for default values to be specified via the `defaults` iterable argument. Secondly, they have the ability to automatically rename duplicate or invalid fields via the `rename` boolean argument. And, finally, they even provide a convenient option to specify field names as a list or comma/space-separated string.
+
+```py
+from collections import namedtuple
+
+Point = namedtuple('Point', ['x', 'y', 'z'], defaults = [1]);
+a = Point(1, 1, 0); # a.x = 1, a.y = 1, a.z = 0
+
+# Default value used for `z`
+b = Point(2, 2); # b.x = 2, b.y = 2, b.z = 1 (default)
+```
+
+_Where's the catch?_ you might ask. Well, it seems like there's none! The obvious parallel to dictionaries in terms of syntax doesn't seem to go any further, as named tuple instances do not have per-instance dictionaries, meaning they require as much memory as regular tuples.
diff --git a/snippets/articles/s/python-slice-assignment.md b/snippets/articles/s/python-slice-assignment.md
new file mode 100644
index 000000000..ca262d98a
--- /dev/null
+++ b/snippets/articles/s/python-slice-assignment.md
@@ -0,0 +1,70 @@
+---
+title: Understanding Python's slice assignment
+shortTitle: Python slice assignment
+type: story
+language: python
+tags: [list]
+cover: sliced-fruits
+excerpt: Learn everything you need to know about Python's slice assignment with this handy guide.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+#### Python slice notation
+
+- [Understanding Python's slice notation](/blog/s/python-slice-notation)
+- Understanding Python's slice assignment (this blog post)
+
+### Basic syntax
+
+In order to understand Python's slice assignment, you should at least have a decent grasp of how slicing works. Here's a quick recap:
+
+```py
+[start_at:stop_before:step]
+```
+
+Where `start_at` is the index of the first item to be returned (included), `stop_before` is the index of the element before which to stop (not included) and `step` is the stride between any two items.
+
+Slice assignment has the same syntax as slicing a list with the only exception that it's used on the left-hand side of an expression instead of the right-hand side. Since slicing returns a list, slice assignment requires a list (or other iterable). And, as the name implies, the right-hand side should be the value to assign to the slice on the left-hand side of the expression. For example:
+
+```py
+nums = [1, 2, 3, 4, 5]
+
+nums[:1] = [6]        # [6, 2, 3, 4, 5]   (replace elements 0 through 1)
+nums[1:3] = [7, 8]    # [6, 7, 8, 4, 5]   (replace elements 1 through 3)
+nums[-2:] = [9, 0]    # [6, 7, 8, 9, 0]   (replace the last 2 elements)
+```
+
+### Changing length
+
+The part of the list returned by the slice on the left-hand side of the expression is the part of the list that's going to be changed by slice assignment. This means that you can use slice assignment to replace part of the list with a different list whose length is also different from the returned slice. For example:
+
+```py
+nums = [1, 2, 3, 4, 5]
+
+nums[1:4] = [6, 7]    # [1, 6, 7, 5]        (replace 3 elements with 2)
+nums[-1:] = [8, 9, 0] # [1, 6, 7, 8, 9, 0]  (replace 1 element with 3)
+nums[:1] = []         # [6, 7, 8, 9, 0]     (replace 1 element with 0)
+```
+
+If you take empty slices into account, you can also insert elements into a list without replacing anything in it. For example:
+
+```py
+nums = [1, 2, 3, 4, 5]
+
+nums[2:2] = [6, 7]    # [1, 2, 6, 7, 3, 4, 5]   (insert 2 elements)
+nums[7:] = [8, 9]     # [1, 2, 6, 7, 3, 4, 5, 8, 9] (append 2 elements)
+nums[:0] = [0]        # [0, 1, 2, 6, 7, 3, 4, 5, 8, 9] (prepend 1 element)
+nums[:] = [ 4, 2]     # [4, 2]         (replace whole list with a new one)
+```
+
+### Using steps
+
+Last but not least, `step` is also applicable in slice assignment and you can use it to replace elements that match the iteration after each stride. The only difference is that if `step` is not `1`, the inserted list must have the exact same length as that of the returned list slice. For example:
+
+```py
+nums = [1, 2, 3, 4, 5]
+
+nums[2:5:2] = [6, 7]  # [1, 2, 6, 4, 7] (replace every 2nd element, 2 through 5)
+nums[2:5:2] = [6, 7, 8] # Throws a ValueError (can't replace 2 elements with 3)
+nums[1::-1] = [9, 0]  # [0, 9, 6, 4, 7] (reverse replace, 1 through start)
+```
diff --git a/snippets/articles/s/python-slice-notation.md b/snippets/articles/s/python-slice-notation.md
new file mode 100644
index 000000000..1d2a19661
--- /dev/null
+++ b/snippets/articles/s/python-slice-notation.md
@@ -0,0 +1,78 @@
+---
+title: Understanding Python's slice notation
+shortTitle: Python slice notation
+type: story
+language: python
+tags: [list]
+cover: sliced-fruits
+excerpt: Learn everything you need to know about Python's slice notation with this handy guide.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+#### Python slice notation
+
+- Understanding Python's slice notation (this blog post)
+- [Understanding Python's slice assignment](/blog/s/python-slice-assignment)
+
+### Basic syntax
+
+Python's slice notation is used to return a list or a portion of a list. The basic syntax is as follows:
+
+```py
+[start_at:stop_before:step]
+```
+
+Where `start_at` is the index of the first item to be returned (included), `stop_before` is the index of the element before which to stop (not included) and `step` is the stride between any two items.
+
+All three of the arguments are optional, meaning you can omit any of them. For example:
+
+```py
+nums = [1, 2, 3, 4, 5]
+
+nums[1:4]     # [2, 3, 4]   (start at 0, stop before 4)
+nums[2:]      # [3, 4, 5]   (start at 0, stop at end of list)
+nums[:3]      # [1, 2, 3]   (start at 0, stop before 3)
+nums[1:4:2]   # [2, 4]      (start at 1, stop before 4, every 2nd element)
+nums[2::2]    # [3, 5]      (start at 2, stop at end of list, every 2nd element)
+nums[:3:2]    # [1, 3]      (start at 0, stop before 3, every 2nd element)
+nums[::2]     # [1, 3, 5]   (start at 0, stop at end of list, every 2nd element)
+nums[::]      # [1, 2, 3, 4, 5] (start at 0, stop at end of list)
+```
+
+As you can probably tell from the examples above, the default values are `start_at = 0`, `stop_before = len(nums)`, `step = 1`.
+
+> An idiomatic way to shallow clone a list would be using `[:]` (e.g. `nums_clone = nums[:]`).
+
+### Negative values
+
+All three of the arguments also accept negative values. For `start_at` and `stop_before`, a negative value means counting from the end of the list instead of counting from the start. For example `-1` would represent the last element, `-2` the second last element etc. For example:
+
+```py
+nums = [1, 2, 3, 4, 5]
+
+nums[1:-2]    # [2, 3]      (start at 1, stop before 2nd to last)
+nums[-3:-1]   # [3, 4]      (start at 3rd to last, stop before last)
+```
+
+A negative `step` means that the list is sliced in reverse (from end to start). This also means that `start_at` should be greater than `stop_before` and that `stop_before` in the context of a reverse stride is more like `stop_after` if you are looking at the list non-reversed. For example:
+
+```py
+nums = [1, 2, 3, 4, 5]
+
+nums[::-1]    # [5, 4, 3, 2, 1]   (reversed)
+nums[4:1:-1]  # [5, 4, 3]   (reversed, start at 4, stop after 1)
+nums[-1:1:-2] # [5, 3]      (reversed, start at last, stop after 1, every 2nd)
+```
+
+### Empty slices
+
+Bear in mind that slice notation is very forgiving, so you'll get an empty list if the arguments' values are out of the list's range. For example:
+
+```py
+nums = [1, 2, 3, 4, 5]
+
+nums[6:8]     # []
+nums[:-10]    # []
+```
+
+[Continue on Understanding Python's slice assignment](/blog/s/python-slice-assignment)
diff --git a/snippets/articles/s/python-sort-dictionary-tuple-key.md b/snippets/articles/s/python-sort-dictionary-tuple-key.md
new file mode 100644
index 000000000..9e030a47b
--- /dev/null
+++ b/snippets/articles/s/python-sort-dictionary-tuple-key.md
@@ -0,0 +1,37 @@
+---
+title: "Tip: Sort Python dictionary list using a tuple key"
+shortTitle: Sort dictionary list using a tuple key
+type: tip
+language: python
+tags: [list,dictionary]
+author: chalarangelo
+cover: matrix-flow
+excerpt: Learn how to sort a Python dictionary list using a tuple key.
+dateModified: 2023-01-04T05:00:00-04:00
+---
+
+Sorting a list of dictionaries in Python can seem intimidating at first. This is especially true if you want to **sort using multiple keys**. Luckily, the `sorted()` function can be used to sort a list of dictionaries using a tuple `key`. Simply return a **tuple** with the order of keys you want to sort by and the `sorted()` function will do the rest.
+
+```py
+friends =  [
+  {"name": "John", "surname": "Doe", "age": 26},
+  {"name": "Jane", "surname": "Doe", "age": 28},
+  {"name": "Adam", "surname": "Smith", "age": 30},
+  {"name": "Michael", "surname": "Jones", "age": 28}
+]
+
+print(
+  sorted(
+    friends,
+    key=lambda friend:
+    (friend["age"], friend["surname"], friend["name"])
+  )
+)
+# PRINTS:
+# [
+#   {'name': 'John', 'surname': 'Doe', 'age': 26},
+#   {'name': 'Jane', 'surname': 'Doe', 'age': 28},
+#   {'name': 'Michael', 'surname': 'Jones', 'age': 28},
+#   {'name': 'Adam', 'surname': 'Smith', 'age': 30}
+# ]
+```
diff --git a/snippets/articles/s/python-sortedlist-vs-list-sort.md b/snippets/articles/s/python-sortedlist-vs-list-sort.md
new file mode 100644
index 000000000..cd9d3911c
--- /dev/null
+++ b/snippets/articles/s/python-sortedlist-vs-list-sort.md
@@ -0,0 +1,32 @@
+---
+title: What is the difference between list.sort() and sorted() in Python?
+shortTitle: List.sort vs sorted
+type: question
+language: python
+tags: [list]
+cover: duck-plants
+excerpt: Learn the difference between Python's built-in list sorting methods and when one is preferred over the other.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Python provides two ways to sort a list, the built-in list method `list.sort()` and the built-in function `sorted()`. Although both will sort the elements of a list, if used incorrectly they can produce unexpected or undesired results.
+
+### Differences and similarities
+
+The primary difference between the two is that `list.sort()` will sort the list in-place, mutating its indexes and returning `None`, whereas `sorted()` will return a new sorted list leaving the original list unchanged. Another difference is that `sorted()` accepts any iterable while `list.sort()` is a method of the `list` class and can only be used with lists.
+
+```py
+nums = [2, 3, 1, 5, 6, 4, 0]
+
+print(sorted(nums))   # [0, 1, 2, 3, 4, 5, 6]
+print(nums)           # [2, 3, 1, 5, 6, 4, 0]
+
+print(nums.sort())    # None
+print(nums)           # [0, 1, 2, 3, 4, 5, 6]
+```
+
+Both `list.sort()` and `sorted()` have the same `key` and `reverse` optional arguments and can be called on each list element prior to making comparisons.
+
+### When to use each one
+
+`list.sort()` should be used whenever mutating the list is intended and retrieving the original order of the elements is not desired. On the other hand, `sorted()` should be used when the object to be sorted is an iterable (e.g. list, tuple, dictionary, string) and the desired outcome is a sorted list containing all elements.
diff --git a/snippets/articles/s/python-string-is-empty.md b/snippets/articles/s/python-string-is-empty.md
new file mode 100644
index 000000000..650f9aedf
--- /dev/null
+++ b/snippets/articles/s/python-string-is-empty.md
@@ -0,0 +1,35 @@
+---
+title: How can I check if a string is empty in Python?
+shortTitle: String is empty
+type: question
+language: python
+tags: [string]
+author: chalarangelo
+cover: tea-laptop-table
+excerpt: Here are two quick and elegant ways to check if a string is empty in Python.
+dateModified: 2022-08-05T05:00:00-04:00
+---
+
+When working with Python strings, a pretty common question is how does one check if a string is empty. There's a straightforward answer to this that takes advantage of the truth value of strings.
+
+In Python, any object can be tested for truth value, including strings. In this context, **strings are considered truthy if they are non-empty**, meaning they contain at least one character. Thus, simply using the `not` operator, you can check if a string is empty.
+
+```py
+empty_string = ''
+non_empty_string = 'Hello'
+
+not empty_string # True
+not non_empty_string # False
+```
+
+While this method works in most cases, you may also need to check if the actual value is a string. In this case, you can compare your string to the empty string using the `==` operator.
+
+```py
+empty_string = ''
+non_empty_string = 'Hello'
+non_string = 0
+
+empty_string == '' # True
+non_empty_string == '' # False
+non_string == '' # False
+```
diff --git a/snippets/articles/s/python-swap-variables.md b/snippets/articles/s/python-swap-variables.md
new file mode 100644
index 000000000..577dd8a59
--- /dev/null
+++ b/snippets/articles/s/python-swap-variables.md
@@ -0,0 +1,58 @@
+---
+title: 3 ways to swap two variables in Python
+shortTitle: Variable swapping
+type: story
+language: python
+tags: [variables]
+cover: leaves-read
+excerpt: Learn 3 easy ways to swap the values of two variables in Python.
+dateModified: 2021-11-07T16:34:37+03:00
+---
+
+### Using a temporary variable
+
+The simplest way to swap the values of two variables is using a `temp` variable. The `temp` variables is used to store the value of the fist variable (`temp = a`). This allows you to swap the value of the two variables (`a = b`) and then assign the value of `temp` to the second variable.
+
+```py
+a = 11
+b = 7
+
+temp = a
+a = b
+b = temp
+
+print(a) # 7
+print(b) # 11
+```
+
+### Without a temporary variable (Tuple swap)
+
+Another way to swap the values of two variables, without using a temporary variable, is to use **tuple packing** and **sequence unpacking**. Tuples can be constructed in a number of ways, one of which is by separating tuple items using commas. Moreover, Python evaluates the right-hand side of an assignment before its left-hand side. So, by separating the variables with commas on the right side of the statement the variables are packed into a tuple and unpacked by placing the same number of comma-separated target variables on the left side.
+
+This method of variable swapping and permutation can be used for more than two variables as long as the same number of variables are on both sides of the statement.
+
+```py
+a = 11
+b = 7
+
+a, b = b, a
+
+print(a) # 7
+print(b) # 11
+```
+
+### Using arithmetic operators (for numbers only)
+
+If the two variables are numbers, their values can be swapped using arithmetic operators such as addition and subtraction (`+`, `-`) or multiplication and division (`*`, `/`). This swapping method is based on calculating the sum of the two numbers and then swapping them using the sum and the difference from the sum.
+
+```py
+a = 11
+b = 7
+
+a = a + b # a = 18, b = 7
+b = a - b # a = 18, b = 11
+a = a - b # a = 7,  b = 11
+
+print(a) # 7
+print(b) # 11
+```
diff --git a/snippets/articles/s/python-trim-whitespace.md b/snippets/articles/s/python-trim-whitespace.md
new file mode 100644
index 000000000..018192dd5
--- /dev/null
+++ b/snippets/articles/s/python-trim-whitespace.md
@@ -0,0 +1,36 @@
+---
+title: How do I trim whitespace from a string in Python?
+shortTitle: Trim whitespace
+type: question
+language: python
+tags: [string]
+cover: organizer
+excerpt: Oftentimes you might need to trim whitespace from a string in Python. Learn of three different way to do this in this short guide.
+dateModified: 2021-12-13T05:00:00-04:00
+---
+
+When working with Python strings, a pretty common question is how to trim whitespace from a string. Whitespace characters are the space (` `), tab (`\t`), newline (`\n`), and carriage return characters (`\r`). Here are 3 different methods to trim whitespace from a string in Python.
+
+### Remove leading and trailing whitespace characters
+
+Use the `str.strip()` method to remove whitespace characters from both the beginning and end of a string.
+
+```py
+'  Hello  '.strip()    # 'Hello'
+```
+
+### Remove leading whitespace characters
+
+Leading whitespace characters are the whitespace characters at the start of a string. To remove them, use the `str.lstrip()` method.
+
+```py
+'  Hello  '.lstrip()   # 'Hello  '
+```
+
+### Remove trailing whitespace characters
+
+Trailing whitespace characters are the whitespace characters at the end of a string. To remove them, use the `str.rstrip()` method.
+
+```py
+'  Hello  '.rstrip()   # '  Hello'
+```
diff --git a/snippets/articles/s/react-conditional-classname.md b/snippets/articles/s/react-conditional-classname.md
new file mode 100644
index 000000000..27017128c
--- /dev/null
+++ b/snippets/articles/s/react-conditional-classname.md
@@ -0,0 +1,37 @@
+---
+title: "Tip: React conditional className, empty strings and null"
+shortTitle: Conditional className
+type: tip
+language: react
+tags: [components]
+cover: succulent-red-light
+excerpt: In React components, you might need to conditionally apply a `className`. Learn how to handle empty values correctly using this handy tip.
+dateModified: 2021-11-07T16:34:37+03:00
+---
+
+When developing React components, you often need to conditionally apply a `className` attribute to one or more elements. Sometimes, you will have two or more possible values depending on a condition. But there are also times that you might apply a `className` based on a condition or leave it completely empty otherwise.
+
+There is a correct way to handle a conditional empty `className` and an incorrect one. Surprisingly, the incorrect way is pretty common and examples of it can be found all around the web. Consider the following code:
+
+```jsx
+const MyComponent = ({ enabled }) => {
+  return ( <div className={enabled ? 'enabled' : ''}> Hi </div> );
+};
+
+const OtherComponent = ({ enabled }) => {
+  return ( <div className={enabled ? 'enabled' : null}> Hi </div> );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <>
+    <MyComponent enabled={false} />
+    <OtherComponent enabled={false} />
+  </>
+);
+```
+
+In this code example, we define two very similar components. Both of them conditionally set the `className` of an element based on the value of the `enabled` prop. The first one will set the `className` to an empty string if `enabled` is `false` and the second one will set it to `null`.
+
+The resulting output is pretty similar. However, if you carefully inspect the HTML, you will notice that the first one will render `<div class>Hi</div>` whereas the second one will render `<div>Hi</div>`. This kind of markup (an attribute being present but without value) is rather uncommon and you'd rarely ever see something like that without React. This subtle difference is quite important and might be the root of a lot of problems, especially when writing CSS selectors for elements with/without any classes (e.g. `[class]`/`:not([class])`).
+
+Therefore, you should prefer `null` when you don't want to add a `className` to an element, instead of an empty string. It keeps the markup cleaner and might help prevent some potential issues.
diff --git a/snippets/articles/s/react-proptypes-objectof-vs-shape.md b/snippets/articles/s/react-proptypes-objectof-vs-shape.md
new file mode 100644
index 000000000..1a306054b
--- /dev/null
+++ b/snippets/articles/s/react-proptypes-objectof-vs-shape.md
@@ -0,0 +1,53 @@
+---
+title: React PropTypes - objectOf vs shape
+shortTitle: PropTypes - objectOf vs shape
+type: story
+language: react
+tags: [components,proptypes]
+author: chalarangelo
+cover: shapes
+excerpt: Learn the differences between `PropTypes.objectOf()` and `PropTypes.shape()` and where to use each one with this quick guide.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+The `prop-types` package is used by millions of React developers every day in order to type check the props passed to their components. Most of us are probably familiar with a variety of its built-in validators, but many a developer seems to fall short when dealing with object props. Luckily, the `PropTypes.objectOf()` and `PropTypes.shape()` validators are here to help.
+
+### PropTypes.shape()
+
+The `PropTypes.shape()` validator can be used when describing an object whose keys are known ahead of time, and may represent different types. For example:
+
+```js
+import PropTypes from 'prop-types';
+// Expected prop object - keys known ahead of time
+const myProp = {
+  name: 'John',
+  surname: 'Smith',
+  age: 27
+};
+// PropTypes validation for the prop object
+MyComponent.propTypes = {
+  myProp: PropTypes.shape({
+    name: PropTypes.string,
+    surname: PropTypes.string,
+    age: PropTypes.number
+  })
+};
+```
+
+### PropTypes.objectOf()
+
+The `PropTypes.objectOf()` validator is used when describing an object whose keys might not be known ahead of time, and often represent the same type. For example:
+
+```js
+import PropTypes from 'prop-types';
+// Expected prop object - dynamic keys (i.e. user ids)
+const myProp = {
+  25891102: 'johnsmith',
+  34712915: 'ducklord',
+  76912999: 'mrquacks'
+};
+// PropTypes validation for the prop object
+MyComponent.propTypes = {
+  myProp: PropTypes.objectOf(PropTypes.number)
+};
+```
diff --git a/snippets/articles/s/react-redux-readable-reducers.md b/snippets/articles/s/react-redux-readable-reducers.md
new file mode 100644
index 000000000..40902d9d4
--- /dev/null
+++ b/snippets/articles/s/react-redux-readable-reducers.md
@@ -0,0 +1,187 @@
+---
+title: Writing readable reducers in Redux
+shortTitle: Readable reducer tips
+type: story
+language: react
+tags: [logic]
+author: chalarangelo
+cover: beach-from-above
+excerpt: When working with stateful code, you can run into issues realted to complexity and readability. Oftentimes, they are easily fixable.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+_This article's examples are based on Redux, where the issues described are more common. As these issues are not limited to Redux, you might still find some value in the tips and solutions presented if you are struggling with maintaining complexity and readability in your code._
+
+When working with state in your code, you might often run into issues with maintaining complexity, keeping the code readable and even figuring out how to properly test it. Oftentimes, these issues are easily fixable if you take a step back and identify the root of the problem.
+
+Let's start with an example of what a redux reducer might look like. We'll follow this example throughout this post, making changes and improvements, so make sure you understand it before continuing.
+
+```js
+const initialState = {
+  id: null,
+  name: '',
+  properties: {},
+};
+
+const generateID = () => Math.floor(Math.random() * 1000);
+
+const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    case 'createID':
+      return {
+        ...state,
+        id: generateID(),
+      };
+    case 'setName':
+      return {
+        ...state,
+        name: action.name,
+      };
+    case 'addProperty':
+      return {
+        ...state,
+        properties: {
+          ...state.properties,
+          [action.propertyName]: action.propertyValue,
+        },
+      };
+    case 'removeProperty':
+      return {
+        ...state,
+        properties: Object.keys(state.properties).reduce((acc, key) => {
+          if (key !== action.propertyName) acc[key] = state.properties[key];
+          return acc;
+        }, {}),
+      };
+    default:
+      return state;
+  }
+};
+```
+
+### Identifying the problems
+
+While the code in the example is not that complicated right now, complexity can increase very fast as more action types need to be handled by our application. This is due to the fact that each `action.type`'s logic is nested inside the `reducer` function, thus adding more code and complexity with each new action.
+
+Another issue we can identify is that each `action` has a different structure, which increases cognitive load for future maintainers, as they have to remember what keys their `action` needs to have. There's also the added issue of running into a case where `action.type` might be needed to pass actual data to the state (i.e. `state.type` could exist).
+
+Finally, our `action.type` values are hardcoded inside the `reducer` function, making it hard to remember and sync across other files and components. This might seem like the least of our problems, but it's probably the easiest one to fix, so let's start there.
+
+### Define action types
+
+Starting with removing the hardcoded strings for each of the `action.type` values, we can make the code more maintainable and easier to read by extracting them to an object:
+
+```js
+const ACTION_TYPES = {
+  CREATE_ID: 'createID',
+  SET_NAME: 'setName',
+  ADD_PROPERTY: 'addProperty',
+  REMOVE_PROPERTY: 'removeProperty'
+};
+```
+
+### Create a common action structure
+
+Our `action` objects aren't consistent in terms of structure with the exception of sharing a `type` key which we use to identify each action. If we hope to reduce mental strain and minimize headaches, we should make these more consistent. The easiest way to do so would be to put the whole action `payload` under a top-level key and nest any values passed to the action inside it:
+
+```js
+// Structure of any action passed to our reducer function
+const action = {
+  // Any of the previously defined action types
+  type: ACTION_TYPES.CREATE_ID,
+  // Nest name, propertyValue and propertyKey inside this object
+  payload: { /* ... */ }
+}
+```
+
+If you plug it into the previous code right away, it might seem counter-intuitive at first, but bear with me for a minute. It will all come together soon.
+
+### Extract nested logic
+
+Finally, we are ready to implement the most drastic fix which the previous two changes will help us facilitate - extracting nested logic. The first issue we identified was that each `action.type`'s logic was nested inside the `reducer` function. We can fix that by moving each `case` into its own function:
+
+```js
+const createID = state => ({
+  ...state,
+  id: generateID(),
+});
+
+const setName = (state, { name }) => ({
+  ...state,
+  name,
+});
+
+const addProperty = (state, { propertyName, propertyValue }) => ({
+  ...state,
+  [propertyName]: propertyValue,
+});
+
+const removeProperty = (state, { propertyName }) => {
+  const properties = Object.keys(state.properties).reduce((acc, key) => {
+    if (key !== propertyName) acc[key] = state.properties[key];
+    return acc;
+  }, {});
+  return { ...state, properties };
+};
+```
+
+Each function has a single responsibility. Any complexity associated with each `action.type` is now part of a function responsible for that specific action type. Testing these smaller functions is a lot easier now, as they are focused on a single task, instead of being nested into a larger, more complex `reducer`.
+
+### Putting it all together
+
+Having implemented the above changes, let's take a look at what our final code looks like:
+
+```js
+const initialState = {
+  id: null,
+  name: '',
+  properties: {},
+};
+
+const ACTION_TYPES = {
+  CREATE_ID: 'createID',
+  SET_NAME: 'setName',
+  ADD_PROPERTY: 'addProperty',
+  REMOVE_PROPERTY: 'removeProperty'
+};
+
+const generateID = () => Math.floor(Math.random() * 1000);
+
+const createID = state => ({
+  ...state,
+  id: generateID(),
+});
+
+const setName = (state, { name }) => ({
+  ...state,
+  name,
+});
+
+const addProperty = (state, { propertyName, propertyValue }) => ({
+  ...state,
+  [propertyName]: propertyValue,
+});
+
+const removeProperty = (state, { propertyName }) => {
+  const properties = Object.keys(state.properties).reduce((acc, key) => {
+    if (key !== propertyName) acc[key] = state.properties[key];
+    return acc;
+  }, {});
+  return { ...state, properties };
+};
+
+const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    case TYPES.CREATE_ID:
+      return createId(state, action.payload);
+    case TYPES.SET_NAME:
+      return setName(state, action.payload);
+    case TYPES.ADD_PROPERTY:
+      return addProperty(state, action.payload);
+    case TYPES.REMOVE_PROPERTY:
+      return removeProperty(state, action.payload);
+    default:
+      return state;
+  }
+};
+```
diff --git a/snippets/articles/s/react-rendering-basics.md b/snippets/articles/s/react-rendering-basics.md
new file mode 100644
index 000000000..84d5b32b9
--- /dev/null
+++ b/snippets/articles/s/react-rendering-basics.md
@@ -0,0 +1,55 @@
+---
+title: React rendering basics
+type: story
+language: react
+tags: [render]
+author: chalarangelo
+cover: comic-glasses
+excerpt: Take a deeper dive into React's rendering process and understand the basics behind the popular JavaScript framework.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+#### React rendering
+
+- React rendering basics (this blog post)
+- [React rendering optimization](/blog/s/react-rendering-optimization)
+- [React rendering state](/blog/s/react-rendering-state)
+
+
+### Rendering introduction
+
+**Rendering** is the process during which React moves down the component tree starting at the root, looking for all the components flagged for update, asking them to describe their desired UI structure based on the current combination of `props` and `state`. For each flagged component, React will call its `render()` method (for class components) or `FunctionComponent()` (for function components), and save the output produced after converting the JSX result into a plain JS object, using `React.createElement()`.
+
+After collecting the render output from the entire component tree, React will diff the new tree (the **virtual DOM**) with the current DOM tree and collect the list of changes that need to be made to the DOM to produce the desired UI structure. After this process, known as **reconciliation**, React applies all the calculated changes to the DOM.
+
+### Render and commit phases
+
+Conceptually, this work is divided into two phases:
+
+- **Render phase**: rendering components, calculating changes
+- **Commit phase**: applying the changes to the DOM
+
+After the **commit phase** is complete, React will run `componentDidMount` and `componentDidUpdate` lifecycle methods, as well as `useLayoutEffect()` and, after a short timeout, `useEffect()` hooks.
+
+Two key takeaways here are the following:
+
+- Rendering is not the same as updating the DOM
+- A component may be rendered without any visible changes
+
+### Rendering reasons
+
+After the initial render has completed, there are a few different things that will cause a re-render:
+
+- `this.setState()` (class components)
+- `this.forceUpdate()` (class components)
+- `useState()` setters (function components)
+- `useReducer()` dispatches (function components)
+- `ReactDOM.render()` again (on the root component)
+
+### Rendering behavior
+
+React's default behavior is to **recursively render all child components inside of it when a parent component is rendered**. This means that it does not care if a component's `props` have changed - as long as the parent component rendered, its children will render unconditionally.
+
+To put this another way, calling `setState()` in the root component without any other changes, will cause React to re-render every single component in the component tree. Most likely, most of the components will return the exact same render output as the last render, meaning React will not have to make any changes to the DOM, but the rendering and diffing calculations will be performed regardless, taking time and effort.
+
+[Continue on React rendering optimization](/blog/s/react-rendering-optimization)
diff --git a/snippets/articles/s/react-rendering-optimization.md b/snippets/articles/s/react-rendering-optimization.md
new file mode 100644
index 000000000..dcfa1d263
--- /dev/null
+++ b/snippets/articles/s/react-rendering-optimization.md
@@ -0,0 +1,48 @@
+---
+title: React rendering optimization
+type: story
+language: react
+tags: [render]
+author: chalarangelo
+cover: comic-glasses
+excerpt: Take a deeper dive into React's rendering process and understand how to make small yet powerful tweaks to optimize performance.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+#### React rendering
+
+- [React rendering basics](/blog/s/react-rendering-basics)
+- React rendering optimization (this blog post)
+- [React rendering state](/blog/s/react-rendering-state)
+
+### Optimization opportunities
+
+As we've seen in the [previous blog post](/blog/s/react-rendering-basics), **rendering** is React's way of knowing if it needs to make changes in the DOM, but there are certain cases where work and calculations performed during the **render phase** can be a wasted effort. After all, if a component's render output is identical, there will be no DOM updates, thus the work wasn't necessary.
+
+Render output should always be based on the current combination of `props` and `state`, so it is possible to know ahead of time if a component's render output will be the same so long as its `props` and `state` remain unchanged. This is the key observation on top of which optimizing React rendering is based, as it hinges on our code doing less work and skipping component rendering when possible.
+
+### Optimization techniques
+
+React offers a handful of APIs that allow us to optimize the rendering process:
+
+- `shouldComponentUpdate` (class components): Lifecycle method, called before rendering, returning a boolean (`false` to skip rendering, `true` to proceed as usual). Logic can vary as necessary, but the most common case is checking if the component's `props` and `state` have changed.
+- `React.PureComponent` (class components): Base class that implements the previously described `props` and `state` change check in its `shouldComponentUpdate` lifecycle method.
+- `React.memo()` (any component): Higher-order component (HOC) that wraps any given component. It implements the same kind of functionality as `React.PureComponent`, but can also wrap function components.
+
+All of these techniques use **shallow equality** for comparisons. Skipping rendering a component means skipping the default recursive behavior of rendering children, effectively skipping the whole subtree of components.
+
+### Reference memoization
+
+Passing new references as `props` to a child component doesn't usually matter, as it will re-render regardless when the parent changes. However, if you are trying to optimize a child component's rendering by checking if its `props` have changed, passing new references will cause a render. This behavior is ok if the new references are updated data, but if it's a new reference to the same callback function passed down by the parent, it's rather problematic.
+
+This is less of an issue in class components, as they have instance methods whose references don't change, although any sort of generated callbacks passed down to a component's children can result in new references. As far as function components are concerned, React provides the `useMemo()` hook for memoizing values, and the `useCallback()` hook specifically for memoizing callbacks.
+
+`useMemo()` and `useCallback()` can provide performance benefits but, as with any other memoization usage, it's important to think about their necessity and the net benefit they provide in the long run. A good rule of thumb is to consider using them for pure functional components that re-render often with the same `props` and/or might do heavy calculations and avoid them elsewhere.
+
+### Performance measurement
+
+**React Developer Tools** provide a handy **Profiler** tab that allows you to visualize and explore the rendering process of your React applications. Under this tab, you will find a settings icon which will allow you to _Highlight updates when components render_, as well as _Record why each component rendered while profiling_ - I highly suggest ticking both of them. Recording the initial render and re-renders of the website can provide invaluable insights about the application's bottlenecks and issues and also highlight optimization opportunities (often using one of the techniques described above).
+
+Finally, remember that React's development builds are significantly slower than production builds, so take all the measurements you see with a grain of salt as absolute times in development are not a valuable metric. Identifying unnecessary renders, memoization and optimization opportunities, as well as potential bottlenecks is where you should focus.
+
+[Continue on React rendering state](/blog/s/react-rendering-state)
diff --git a/snippets/articles/s/react-rendering-state.md b/snippets/articles/s/react-rendering-state.md
new file mode 100644
index 000000000..587589689
--- /dev/null
+++ b/snippets/articles/s/react-rendering-state.md
@@ -0,0 +1,47 @@
+---
+title: React rendering state
+type: story
+language: react
+tags: [render]
+author: chalarangelo
+cover: comic-glasses
+excerpt: Take a deeper dive into React's rendering process and understand the role of the Context API and Redux in it.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+#### React rendering
+
+- [React rendering basics](/blog/s/react-rendering-basics)
+- [React rendering optimization](/blog/s/react-rendering-optimization)
+- React rendering state (this blog post)
+
+### Context API
+
+React's **Context API** provides a way to pass data through the component tree without using `props`, but should not be used for state management as it requires manual updating. Any component inside a context's `Provider` can access the data in the context instance using a `Consumer` component or, for function components only, the `useContext()` hook.
+
+When a new reference is passed to a context `Provider` it will cause any connected components to update. React will look for any components consuming the context in the component tree and update them to reflect the change in the context's value. Passing a new object to a context `Provider` is essentially a new reference, as the context holds a single value (in this case an object).
+
+### Context optimization
+
+By default, any update to a parent component that renders a context `Provider` will cause all of the child components to re-render regardless of changes in the context, due to React's rendering process. To avoid re-rendering child components when a parent changes, **memoization** can be used, which will cause React to skip the whole subtree of a skipped component.
+
+When the context is updated, React additionally checks for components consuming the context down the subtree. This allows context-consuming components under a memoized parent that does not re-render to consume the updated context and render as necessary. After a context-consuming component re-renders, React will keep on recursively rendering its child components as usual.
+
+Oftentimes, it's a good idea to memoize the component immediately under a context `Provider`. That way updates to the parent component will not cause a re-render for the whole subtree, but only the components that consume the context.
+
+### React-Redux
+
+React-Redux provides bindings for **Redux**, a state container for JavaScript applications, and works a little differently from React's Context API. One of the key differences is that React-Redux only re-renders components that need to render, due to the fact that components subscribed to the Redux store read the latest store state, diff the values and force re-render only if the relevant data has changed, while React is not involved at all in the subscription callback process.
+
+While this most likely means that fewer components will have to re-render compared to using a context, React-Redux always executes its `mapStateToProps` and `useSelector` functions for every connected component in the tree whenever the store state is updated. These calculations are usually less expensive than React's rendering, but if there are costly calculations performed or new references returned when they shouldn't, it might become problematic.
+
+### React-Redux optimization
+
+React-Redux provides two ways of connecting to its store, performing the necessary work and returning the combined `props`:
+
+- `connect` (any component): Higher-order component (HOC) that wraps any given component
+- `useSelector` (function components): Hook called inside function components
+
+`connect` acts a lot like memoizing a React component (i.e. using `React.PureComponent` or `React.memo()`), updating the wrapped component only when the combined `props` have changed. This means that passing new references from the parent or the passed functions will still cause a re-render. Components wrapped with `connect` usually read smaller pieces of data from the store state, are less likely to re-render due to that and usually affect fewer components down their tree.
+
+On the other hand, `useSelector` has no way of stopping a component from rendering when its parent component renders. When exclusively using `useSelector`, larger parts of the component tree will re-render due to Redux store updates than they would with `connect`, since there aren't other components using `connect` to prevent them from doing so. You can use `React.memo()` as necessary, to optimize this behavior by preventing unnecessary re-rendering.
diff --git a/snippets/articles/s/react-selected-option.md b/snippets/articles/s/react-selected-option.md
new file mode 100644
index 000000000..6aec811ff
--- /dev/null
+++ b/snippets/articles/s/react-selected-option.md
@@ -0,0 +1,61 @@
+---
+title: How can I set the value of a select input in React?
+shortTitle: Select input value
+type: question
+language: react
+tags: [components,input]
+cover: two-doors
+excerpt: Learn of all the different ways to set the value of a selected input in React with this quick guide.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### Adding selected to an option
+
+A very common way of setting a `<select>` input's value is by adding a `selected` attribute to one of its `<option>` elements. For example:
+
+```jsx
+const Select = ({ values, callback, selected }) => {
+  return (
+    <select
+      disabled={disabled}
+      readOnly={readonly}
+      onChange={({ target: { value } }) => callback(value)}
+    >
+      {values.map(([value, text]) => (
+        <option selected={selected === value} value={value}>
+          {text}
+        </option>
+      ))}
+    </select>
+  );
+}
+```
+
+### Setting value for the select
+
+While this approach closely resembles HTML and feels intuitive, there is an easier way to do the same thing. [React](https://reactjs.org/docs/forms.html#the-select-tag) provides us with a shared API between `<input type="text">`, `<textarea>` and `<select>` where we can use `value` or `defaultValue` (depending if the input is controlled or not) to set the field's value.
+
+Using this API, we minimize the effort of checking for the selected value, as well as making the code easier to read and update as necessary. Here's an example:
+
+```jsx
+const Select = ({ values, callback, selected }) => {
+  return (
+    <select
+      disabled={disabled}
+      readOnly={readonly}
+      defaultValue={selected}
+      onChange={({ target: { value } }) => callback(value)}
+    >
+      {values.map(([value, text]) => (
+        <option value={value}>
+          {text}
+        </option>
+      ))}
+    </select>
+  );
+}
+```
+
+Note that the above implementation uses `defaultValue`, therefore it implies that the component is uncontrolled. You can convert this `Select` component into a controlled component by using `value` instead of `defaultValue`.
+
+For a more detailed explanation of the component, as well as usage examples, you can check out the [Select component](/react/s/select).
diff --git a/snippets/articles/s/react-use-effect-primitive-dependencies.md b/snippets/articles/s/react-use-effect-primitive-dependencies.md
new file mode 100644
index 000000000..4c2757226
--- /dev/null
+++ b/snippets/articles/s/react-use-effect-primitive-dependencies.md
@@ -0,0 +1,53 @@
+---
+title: "Tip: Prefer primitives in useEffect dependencies"
+shortTitle: Primitive useEffect dependencies
+type: tip
+language: react
+tags: [hooks,effect,object,comparison]
+author: chalarangelo
+cover: automaton
+excerpt: Avoid unnecessary re-runs by using primitive dependencies in your React effect.
+dateModified: 2022-06-12T05:00:00-04:00
+---
+
+Conditionally firing an effect is a pretty common requirement when working with React. In most cases, this is as simple as passing a dependency array to `useEffect()`. Turns out that, in some cases, this can cause unnecessary performance degradation.
+
+Such issues arise when entire objects are passed as dependencies when you only need a primitive value. Due to the nature of objects, [being pass-by-reference](/articles/s/javascript-pass-by-reference-or-pass-by-value), comparing the dependencies will always trigger a re-run. This ends up causing effects to run unnecessarily.
+
+```jsx
+const CartItem = ({ item }) => {
+  useEffect(() => {
+    console.log(`${item.name} quantity has changed to ${item.quantity}.`);
+  }, [item]);
+
+  return (
+    <>
+      <h3>{item.name}</h3>
+      <span>
+        {item.price} x {item.quantity}
+      </span>
+    </>
+  );
+};
+```
+
+The solution is to use only the parts of the object that the effect relies on. Oftentimes, these are primitives, such as strings and numbers. Comparing their values to the previous dependencies is more efficient and avoids unnecessary re-runs.
+
+```jsx
+const CartItem = ({ item }) => {
+  const { name, quantity, price } = item;
+
+  useEffect(() => {
+    console.log(`${name} quantity has changed to ${quantity}.`);
+  }, [name, quantity]);
+
+  return (
+    <>
+      <h3>{name}</h3>
+      <span>
+        {price} x {quantity}
+      </span>
+    </>
+  );
+};
+```
diff --git a/snippets/articles/s/react-use-interval-explained.md b/snippets/articles/s/react-use-interval-explained.md
new file mode 100644
index 000000000..7e19886af
--- /dev/null
+++ b/snippets/articles/s/react-use-interval-explained.md
@@ -0,0 +1,69 @@
+---
+title: Write a useInterval hook in React
+shortTitle: Step-by-step useInterval hook
+type: story
+language: react
+tags: [hooks,effect]
+author: chalarangelo
+cover: clock
+excerpt: Wrapping your mind around React hooks and how they interact with `setInterval()` can be difficult. Here's a guide to get you started.
+dateModified: 2021-09-28T19:59:51+03:00
+---
+
+Wrapping your mind around React hooks can be daunting at first, especially if you stumble into anything remotely related to timing, such as `setInterval()`. In order to solve such issues, you have to get used to the way hooks work, their limitations and potential workarounds.
+
+First, it should be clear that `setInterval()` is a side effect. After all, it's not directly tied to a component's render method. Therefore we should call it inside a `useEffect()` hook and use its `return` to call `clearInterval()` when unmounting. To avoid creating multiple intervals, we can use the hook's second argument to pass an empty dependency array (`[]`). This results in running the side effect only when the component mounts.
+
+```jsx
+React.useEffect(() => {
+  let id = setInterval(callback, delay);
+  return () => clearInterval(id);
+}, []);
+```
+
+The closure inside `setInterval()` will only ever have access to whatever variables and values were available when it got instantiated. This means we have to be extra careful about its first argument to make sure that fresh values will be available every time the interval runs. The easiest solution to this issue is to create a variable that's considered mutable by React, using the `useRef()` hook. This will allow us to have access to new values when we need them.
+
+```jsx
+const savedCallback = React.useRef(callback);
+
+React.useEffect(() => {
+  let id = setInterval(savedCallback.current, delay);
+  return () => clearInterval(id);
+}, []);
+```
+
+Using the `useRef()` hook might have just shifted the problem. The value of the created ref now needs to be refreshed inside `setInterval()`. Luckily, this is an easy problem to solve. We could create a wrapper function that passes the function to `setInterval()` instead. This way the function passed to `setInterval()` will never change, but the value of the enclosed ref will always be up to date when it's called.
+
+```jsx
+const savedCallback = React.useRef(callback);
+
+React.useEffect(() => {
+  function tick() {
+    savedCallback.current();
+  }
+  let id = setInterval(tick, delay);
+  return () => clearInterval(id);
+}, []);
+```
+
+Finally, let's extract all of this into a custom hook to make it reusable. We can extract `callback` as an argument for the custom hook and use it as the sole dependency of an additional `useEffect()` hook that will update the ref for the callback.
+
+```jsx
+const useInterval = callback => {
+  const savedCallback = React.useRef();
+
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  React.useEffect(() => {
+    function tick() {
+      savedCallback.current();
+    }
+    let id = setInterval(tick, delay);
+    return () => clearInterval(id);
+  }, []);
+};
+```
+
+That's pretty much it. With a little bit of extra effort, we can add `delay` to the arguments of our custom hook and have a complete hook version of `setInterval()`. You can find an implementation of the hook with this final adjustment, as well as some usage examples in the [useInterval snippet](/react/s/use-interval).
diff --git a/snippets/articles/s/react-use-state-with-label.md b/snippets/articles/s/react-use-state-with-label.md
new file mode 100644
index 000000000..750199e55
--- /dev/null
+++ b/snippets/articles/s/react-use-state-with-label.md
@@ -0,0 +1,36 @@
+---
+title: "Tip: Label your useState values in React developer tools"
+shortTitle: Labelling useState values
+type: tip
+language: react
+tags: [hooks]
+author: chalarangelo
+cover: bunny-poster
+excerpt: Multiple `useState` hooks in React can complicate things while debugging. Luckily, there's an easy way to label these values.
+dateModified: 2021-11-07T16:34:37+03:00
+---
+
+When working with multiple `useState()` hooks in React, things can get a bit complicated while debugging. Luckily, there's an easy way to label these values, using the `useDebugValue()` hook to create a custom `useStateWithLabel` hook:
+
+```jsx
+const useStateWithLabel = (initialValue, label) => {
+  const [value, setValue] = useState(initialValue);
+  useDebugValue(`${label}: ${value}`);
+  return [value, setValue];
+};
+
+const Counter = () => {
+  const [value, setValue] = useStateWithLabel(0, 'counter');
+  return (
+    <p>{value}</p>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Counter />
+);
+// Inspecting `Counter` in React developer tools will display:
+//  StateWithLabel: "counter: 0"
+```
+
+This hook is obviously meant mainly for development, but it can also be useful when creating React component or hook libraries. Additionally, you can easily abstract it in a way that the label is ignored in production builds. An example would be exporting a hook that defaults back to `useState()` when building for a production environment.
diff --git a/snippets/articles/s/regexp-cheatsheet.md b/snippets/articles/s/regexp-cheatsheet.md
new file mode 100644
index 000000000..8d1a8ca0c
--- /dev/null
+++ b/snippets/articles/s/regexp-cheatsheet.md
@@ -0,0 +1,62 @@
+---
+title: Regular Expressions Cheat Sheet
+type: cheatsheet
+language: javascript
+tags: [string,regexp,cheatsheet]
+author: chalarangelo
+cover: tools
+excerpt: Regular expressions are a very useful tool. Save this cheatsheet for when you need to look up their syntax and speed up your development.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+### Anchors
+
+- `^`: start of the string or the start of a line in a multiline pattern
+- `$`: end of the string or the end of a line in a multiline pattern
+- `\b`: word boundary
+- `\B`: not word boundary (opposite of `\b`)
+
+Note: Anchors are non-quantifiable (i.e. cannot be followed by a quantifier).
+
+### Character sequences
+
+- `.`: any character except line breaks
+- `\w`: any word character
+- `\W`: any non-word character (opposite of `\w`)
+- `\s`: any whitespace character
+- `\S`: any non-whitespace character (opposite of `\s`)
+- `\d`: any digit character
+- `\D`: any non-digit character (opposite of `\d`)
+- `[abc]`: a single character in the given set (here `a`, `b` or `c`)
+- `[^abc]`: a single character not in the given set (opposite of `[abc]`)
+- `[a-z]`: a single character in the given range (here between `a` and `z` inclusive)
+- `[^a-z]`: a single character not in the given range (opposite of `[a-z]`)
+- `[a-zA-Z]`: a single character in either of the given ranges
+
+Note: Use `\` to escape special characters (e.g. `\`, `/`, `[`, `]`, `(`, `)`, `{`, `}` etc.).
+
+### Quantifiers
+
+- `a?`: zero or one of `a` (equal to `a{0,1}`)
+- `a*`: zero or more of `a` (equal to `a{0,}`)
+- `a+`: one or more of `a` (equal to `a{1,}`)
+- `a{3}`: exactly 3 of `a`
+- `a{3,}`: 3 or more of `a`
+- `a{3,5}`: between 3 and 5 of `a` (inclusive)
+
+Note: `a` is any valid quantifiable expression.
+
+### Groups
+
+- `(ab)`: match and capture everything enclosed (here exactly `ab`)
+- `(a|b)`: match and capture either one character (here `a` or `b`)
+- `(?:ab)`: match everything enclosed, without capturing
+
+### Flags
+
+- `g`: Global
+- `m`: Multiline
+- `i`: Case insensitive
+- `u`: Unicode
+
+Note that this cheatsheet is meant only as a starting point and is by no means a complete guide to all the features and nuances of regular expressions. You can also read [6 JavaScript Regular Expression features you can use today](/blog/s/6-javascript-regexp-tricks) for a deeper dive into some more advanced features.
diff --git a/snippets/articles/s/resource-preloading-cheatsheet.md b/snippets/articles/s/resource-preloading-cheatsheet.md
new file mode 100644
index 000000000..d49765cd3
--- /dev/null
+++ b/snippets/articles/s/resource-preloading-cheatsheet.md
@@ -0,0 +1,19 @@
+---
+title: Resource Preloading Cheat Sheet
+type: cheatsheet
+language: html
+tags: [webdev,browser]
+author: chalarangelo
+cover: folded-map
+excerpt: Preloading content is one of many ways to improve your website's performance.
+dateModified: 2022-10-12T05:00:00-04:00
+---
+
+Preloading content is one of many ways to improve web performance. The `rel` attribute of the `link` element can be used to instruct the browser how to handle different resources. Here's a handy cheatsheet to help you remember the different values and their effects.
+
+- `rel="preload"`: Download the resource as soon as possible. Used when you're going to need a resource in a few seconds, on the same page.
+- `rel="prefetch"`: Suggest that the resource is fetched in advance. Used when you're going to need a resource for the next page.
+- `rel="preconnect"`: Establish a connection to the linked website, to speed up fetching resources from it later. Used when you're going to need a resource, but you don't know its full URL yet.
+- `rel="dns-prefetch"`: Resolve the DNS for the linked website, to speed up fetching resources from it later. Used when you're going to need a resource, but you don't know its full URL yet (mainly for older browsers).
+- `rel="prerender"`: Preload the resource and render it in the background, speeding up page load in the future. Used when users are likely to navigate to a specific page.
+- `rel="modulepreload"`: Preload a JavaScript module script. Used when you're going to need an ES module script soon.
diff --git a/snippets/articles/s/responsive-favicon-dark-mode.md b/snippets/articles/s/responsive-favicon-dark-mode.md
new file mode 100644
index 000000000..18d6bb89e
--- /dev/null
+++ b/snippets/articles/s/responsive-favicon-dark-mode.md
@@ -0,0 +1,53 @@
+---
+title: How can I create a custom responsive favicon for dark mode?
+shortTitle: Responsive dark mode favicon
+type: question
+language: css
+tags: [visual]
+author: chalarangelo
+cover: dark-mode
+excerpt: Learn how to create a custom responsive favicon that can adapt its color palette for dark mode with this quick guide.
+dateModified: 2021-09-28T19:40:01+03:00
+---
+
+The rise of dark mode in recent years has made many website favicons feel awkward or even impossible to see in some cases. Provided you have the appropriate assets, it's relatively easy to create a responsive favicon that can **adapt to the user's color scheme preferences**.
+
+In order to create a responsive favicon, you need an **SVG icon** with as few colors as possible and two color palettes, one for light mode and one for dark mode. Usual rules about icon clarity and complexity apply, so make sure your icon meets all the necessary criteria to be visually distinguishable in any scenario. In our example, we will be using a monochrome icon from the fantastic [Feather icon set](https://feathericons.com/).
+
+Leveraging embedded styles in SVG images and the `prefers-color-scheme` media query, we can create an appropriate `<g>` element to group all the elements of the icon. Then, using the `id` of the group, we can apply the color palette for each design. Here's what our final SVG asset looks like:
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <style>
+    #icon {
+      stroke: #000;
+      stroke-width: 2px;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      fill: none;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      #icon {
+        stroke: #fff;
+      }
+    }
+  </style>
+  <g id="icon">
+    <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
+    <line x1="3" y1="6" x2="21" y2="6"></line>
+    <path d="M16 10a4 4 0 0 1-8 0"></path>
+  </g>
+</svg>
+```
+
+After creating the SVG asset, you need only include the custom SVG favicon in the page's `<head>` element and you're ready to go. Be sure to include a PNG fallback, if possible, with a rendered version of the icon in either palette:
+
+```html
+<head>
+  <!-- Provided you have a rendered PNG fallback named favicon.png -->
+  <link rel="icon" type="image/png" href="favicon.png" >
+  <!-- Provided the SVG icon is named favicon.svg -->
+  <link rel="icon" type="image/svg" href="favicon.svg" >
+</head>
+```
diff --git a/snippets/articles/s/reversed-list.md b/snippets/articles/s/reversed-list.md
new file mode 100644
index 000000000..ebe352de7
--- /dev/null
+++ b/snippets/articles/s/reversed-list.md
@@ -0,0 +1,28 @@
+---
+title: "Tip: Create a descending list of numbered items"
+shortTitle: Descending list
+type: tip
+language: html
+tags: [webdev]
+author: chalarangelo
+cover: ancient-greek-building
+excerpt: Did you know there's an easy way to create a descending list of numbered items with pure HTML? Learn how with this handy tip.
+dateModified: 2021-06-22T05:00:00-04:00
+---
+
+Did you know there's an easy way to create a descending list of numbered items with pure HTML? The only thing you'll need is the `reversed` attribute. This boolean attribute is specific to `ol` elements and specifies that the list's elements are in reverse order (i.e. numbered from high to low).
+
+```html
+<ol reversed>
+  <li>My third favorite</li>
+  <li>My second favorite</li>
+  <li>My absolute favorite</li>
+</ol>
+<!--
+  3. My third favorite
+  2. My second favorite
+  1. My absolute favorite
+-->
+```
+
+Additionally, you can combine `reversed` with the `start` attribute which is an integer specifying the initial value of the list counter. For example, if you wanted to display the numbers 6 through 4 in a reversed 3-item list, you would simply add `start="6"`.
diff --git a/snippets/articles/s/select-focused-dom-element.md b/snippets/articles/s/select-focused-dom-element.md
new file mode 100644
index 000000000..c19da1505
--- /dev/null
+++ b/snippets/articles/s/select-focused-dom-element.md
@@ -0,0 +1,20 @@
+---
+title: "Tip: Select the focused DOM element"
+shortTitle: Focused DOM element
+type: tip
+language: javascript
+tags: [browser]
+author: chalarangelo
+cover: horse-sunset
+excerpt: Here's a quick and easy way to select the currently focused DOM element in JavaScript.
+dateModified: 2022-10-23T05:00:00-04:00
+---
+
+Finding the currently focused DOM element is trivial in modern CSS, using the `:focus` selector. You can also use it in JavaScript, in combination with `Document.querySelector()` to find the focused element. Yet, there's an even easier way to get the currently focused element in JavaScript, using the `Document.activeElement` property.
+
+```js
+const focusedElement = document.activeElement;
+// `focusedElement` is the currently focused element
+```
+
+Note that focusable elements vary depending on browser and operating system. Additionally, you should remember that focus and selection (i.e. content highlighting) are not the same thing.
diff --git a/snippets/articles/s/setup-python3-pip3-as-default.md b/snippets/articles/s/setup-python3-pip3-as-default.md
new file mode 100644
index 000000000..1b502700e
--- /dev/null
+++ b/snippets/articles/s/setup-python3-pip3-as-default.md
@@ -0,0 +1,32 @@
+---
+title: "Tip: Set up Python 3 and pip 3 as default"
+shortTitle: Python 3 and pip 3 setup
+type: tip
+language: python
+tags: [setup]
+author: chalarangelo
+cover: avocado-slices
+excerpt: A very common problem when working with Python is having to remember the correct version. Luckily, there's an easy fix for that.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+One of the most common headaches when working with Python is having to remember to use Python 3.x instead of Python 2.x. Luckily, it's really easy to setup Python 3 and pip 3 as the defaults. You first need to figure out where each one is installed using the `which` command:
+
+```shell
+which python3   # /usr/local/bin/python3
+which pip3      # /usr/local/bin/pip3
+```
+
+Make a note of each response, so that you can add the paths as aliases to your shell environment's configuration file. Then, you can use `echo` to add a line for each one to either `.zshrc` or `.bashrc` depending on your environment:
+
+```shell
+# Linux or other bash environment
+echo "alias python=/usr/local/bin/python3" >> ~/.bashrc
+echo "alias pip=/usr/local/bin/pip3" >> ~/.bashrc
+
+# Mac OS or other zsh environment
+echo "alias python=/usr/local/bin/python3" >> ~/.zshrc
+echo "alias pip=/usr/local/bin/pip3" >> ~/.zshrc
+```
+
+And you're all done! `python` and `pip` are both mapped to their 3.x versions,
diff --git a/snippets/articles/s/technical-debt.md b/snippets/articles/s/technical-debt.md
new file mode 100644
index 000000000..1b3e12acf
--- /dev/null
+++ b/snippets/articles/s/technical-debt.md
@@ -0,0 +1,49 @@
+---
+title: Technical debt
+type: story
+tags: [webdev,career,programming,management]
+author: chalarangelo
+cover: new-york
+excerpt: Learn what technical debt is, its causes and symptoms, and how to deal with it.
+dateModified: 2022-10-09T05:00:00-04:00
+---
+
+Technical debt is a jargon term that gets thrown around a lot in the software development industry. It's worth understanding what it means, how to spot it and how to deal with it, once it inevitably rears its ugly head.
+
+### Definition
+
+The term itself comes from a metaphor, in which the team's lack of understanding about the codebase leads to continuous disagreement. Continuously stumbling upon this situation slows down progress, feeling like paying interest on a loan.
+
+**Technical debt is effectively the natural result of writing code about something we don't have a proper understanding of.**
+
+### Causes
+
+But what causes technical debt in the first place? As hinted at by the previous definition, it arises from a **disagreement between business needs and how the software was written**. The root cause for such disagreements can either appear early on or later down the line.
+
+In the former case, a lack of understanding might have lead to laying the foundations incorrectly, therefore carrying the debt from the start. Poor design choices, lack of foresight and a lack of communication between the team members can all lead to this.
+
+In the latter case, the debt might have been incurred due to a change in the business requirements, which the software was not designed to handle. This is often the case with projects that move rapidly, making it hard to adapt to the changing needs.
+
+Interestingly enough, poor code and not following best practices only account for a portion of technical debt. This means that, while following best practices and writing clean code can help reduce the debt, they are usually not the main cause.
+
+### Symptoms
+
+So, how do you know if you have accumulated technical debt? It's not that hard to spot most of the time. **Lowered productivity** is usually one of the first signs. This translates to increased development time or effort estimates that are not met. This makes sense intuitively, as maintenance costs mount up and the codebase is not as easy to work with as it should be.
+
+Following lowered productivity, teams with accumulated technical debt might start to notice **decreased code quality**. When estimates are not met, developers might be tempted to cut corners and write code that is not as clean as it should be. This is a natural reaction to the pressure of meeting deadlines, but it can have a negative impact on the codebase in the long run.
+
+Finally, this spirals into a vicious cycle, as the codebase becomes harder to work with, which leads to more pressure, **lowered morale** and even more technical debt. This is why it's important to spot the symptoms early on and take action to reduce it.
+
+### Solutions
+
+Dealing with technical debt is not always easy, but it's not impossible either. The most important step is realizing that it exists and that it affects the team's productivity. Once that is done, the team can start to take action. Solutions vary, depending on the team, industry and nature of the technical debt itself.
+
+Broadly speaking, it's acceptable to **take on debt early on** to get the project off the ground. Identifying and keeping track of it ensures that the team knows where to start when the time comes to start dealing with it. This also helps figure out how much of an impact it has and how to prioritize maintenance tasks.
+
+As soon as the project is out of the door, the team should **start to reduce debt** or at least not take on any more. Prioritization can be based either on the impact or the effort required for each refactor. A combination of two can also be beneficial, as it can allow small maintenance tasks to fill in the gaps, while more impactful refactors are planned and coordinated accordingly.
+
+After getting to a manageable level, it's important to **keep technical debt in check**. Here's where having a process in place can work wonders. By knowing how to keep debt in check, when to take action and continuously working towards that goal, the team can ensure that the codebase is always in a good state.
+
+### Conclusion
+
+Technical debt is a natural, unavoidable part of software development. Miscommunication and lack of understanding can lead to it, resulting in lowered velocity and morale. Luckily, a bit of awareness, good communication and an actionable process can help reduce it and keep it in check.
diff --git a/snippets/articles/s/terminal-shortcuts-cheatsheet.md b/snippets/articles/s/terminal-shortcuts-cheatsheet.md
new file mode 100644
index 000000000..5fd07cfac
--- /dev/null
+++ b/snippets/articles/s/terminal-shortcuts-cheatsheet.md
@@ -0,0 +1,24 @@
+---
+title: Bash Shortcuts Cheat Sheet
+type: cheatsheet
+tags: [webdev,bash,cheatsheet]
+author: chalarangelo
+cover: terminal
+excerpt: Maximize your productivity when working with a bash or other shell terminal by using these keyboard shortcuts.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+- <kbd>Ctrl</kbd> + <kbd>C</kbd> Terminate the command
+- <kbd>Ctrl</kbd> + <kbd>Z</kbd> Suspend the command
+- <kbd>Ctrl</kbd> + <kbd>A</kbd> Move to the start of the line
+- <kbd>Ctrl</kbd> + <kbd>E</kbd> Move to the end of the line
+- <kbd>Ctrl</kbd> + <kbd>F</kbd> Move forward one character
+- <kbd>Ctrl</kbd> + <kbd>B</kbd> Move backward one character
+- <kbd>Ctrl</kbd> + <kbd>U</kbd> Delete from the cursor to the start of the line
+- <kbd>Ctrl</kbd> + <kbd>K</kbd> Delete from the cursor to the end of the line
+- <kbd>Ctrl</kbd> + <kbd>W</kbd> Delete from the cursor to the start of the word
+- <kbd>Ctrl</kbd> + <kbd>D</kbd> Delete the character under the cursor
+- <kbd>Ctrl</kbd> + <kbd>H</kbd> Delete the character before the cursor
+- <kbd>Ctrl</kbd> + <kbd>T</kbd> Swap the character under the cursor with the previous one
+- <kbd>Ctrl</kbd> + <kbd>L</kbd> Clear the screen
+
diff --git a/snippets/articles/s/testing-async-react-components.md b/snippets/articles/s/testing-async-react-components.md
new file mode 100644
index 000000000..ef5585a97
--- /dev/null
+++ b/snippets/articles/s/testing-async-react-components.md
@@ -0,0 +1,160 @@
+---
+title: Testing React components that update asynchronously with React Testing Library
+shortTitle: Asynchronous component update testing
+type: story
+language: react
+tags: [testing,event]
+cover: colorful-lounge
+excerpt: Testing React components that update asynchronously is pretty common. Learn how to deal with common issues and speed up your testing.
+dateModified: 2021-11-07T16:34:37+03:00
+---
+
+### Components that update asynchronously
+
+Recently, while working on a side-project, we started using the [React DnD library](https://react-dnd.github.io/react-dnd), as we wanted to implement a multi-container drag and drop system with cards.
+
+After spending the better part of a day implementing the functionality, we decided to add some tests to ensure everything will keep working as expected. In the aforementioned project, we use [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) to write tests for our components.
+
+While testing the drag functionality, we came across a very stubborn test. Here's a simplified version of our `Card` component:
+
+```jsx
+import React from 'react';
+import { useDrag } from 'react-dnd';
+
+const Card = ({
+  card: {
+    id,
+    title
+  }
+}) => {
+  const [style, drag] = useDrag({
+    item: { id, type: 'card' },
+    collect: monitor => ({
+      opacity: monitor.isDragging() ? 0 : 1
+    })
+  });
+
+  return (
+    <li className="card" id={id} ref={drag} style={style}>
+      {title}
+    </li>
+  );
+};
+```
+
+And here's the test we were trying to write originally:
+
+```jsx
+import React from 'react';
+import { fireEvent } from '@testing-library/react';
+import Card from './components/Card';
+// This a little helper we have written to connect to redux and react-dnd
+import renderDndConnected from './test_utils/renderDndConnected';
+
+describe('<Card/>', () => {
+  let card;
+
+  beforeEach(() => {
+    const utils = renderDndConnected(
+      <Card card={{ id: '1', title: 'Card' }} />
+    );
+    card = utils.container.querySelector('.card');
+  });
+
+  it('initial opacity is 1', () => {
+    expect(card.style.opacity).toEqual('1');
+  });
+
+  describe('when drag starts', () => {
+    beforeEach(() => {
+      fireEvent.dragStart(card);
+    });
+
+    it('opacity is 0', () => {
+      expect(card.style.opacity).toEqual('0');
+    });
+  });
+});
+```
+
+### The dreaded `act(...)` warning
+
+While the test was obviously not working, the console was constantly nagging about wrapping the test in `act()`:
+
+```
+When testing, code that causes React state updates should be wrapped into act(...):
+
+act(() => {
+  /* fire events that update state */
+});
+/* assert on the output */
+
+This ensures that you're testing the behavior the user would see in the browser.
+```
+
+This message wasn't very helpful in identifying the underlying issue. The only thing it highlighted was that the test didn't update the component style immediately. There were pending updates after the test completed. To put it plainly, the test was failing because the `dragStart` event didn't immediately update the `Card` components' style (i.e. set the new `opacity`).
+
+As a side note, the `Card` component is connected to Redux, which might relate to the issue, but it would most likely happen even without Redux. That's probably due to the fact that `collect` takes some amount of time to run and send an update to the component.
+
+### Solving the issue
+
+Digging deeper, we found that apart from `act()`, there are also other options, such as `waitFor()` and `waitForDomChange()`. These seem more intuitive simply because of the name and way they're written (using either `async await` or promises). However, `waitForDomChange()` didn't work properly for our case and our version of `react-testing-library` (which shipped with `react-scripts`) was outdated and did not export `waitFor()`, which took us a good half an hour to figure out.
+
+After updating `react-testing-library`, we were still not ready to go, as the console started displaying the following error:
+
+```
+TypeError: MutationObserver is not a constructor
+```
+
+This required some searching, which eventually led us to [this issue](https://github.com/testing-library/react-testing-library/issues/662) which helped us figure out that a solution was to replace the `test` script in our `package.json` with this line:
+
+```json
+{
+  // ...
+  "scripts": {
+    "test": "react-scripts test --env=jsdom-fourteen"
+    // ...
+  }
+}
+```
+
+Now to finally write a test that works! As mentioned above, we opted to use `waitFor()` from `react-testing-library`, which was actually the only change to the original testing code, except for the dependency bump and the script change described above. Here's the test after making the necessary changes:
+
+```jsx
+import React from 'react';
+import { fireEvent, waitFor } from '@testing-library/react';
+// This a little helper we have written to connect to redux and react-dnd
+import renderDndConnected from './test_utils/renderDndConnected';
+import Card from './components/Card';
+
+describe('<Card/>', () => {
+  let card;
+
+  beforeEach(() => {
+    const utils = renderDndConnected(
+      <Card card={{ id: '1', title: 'Card' }} />
+    );
+    card = utils.container.querySelector('.card');
+  });
+
+  it('initial opacity is 1', () => {
+    expect(card.style.opacity).toEqual('1');
+  });
+
+  describe('when drag starts', () => {
+    beforeEach(() => {
+      fireEvent.dragStart(card);
+    });
+
+    it('opacity is 0', async() => {
+      await waitFor(() => expect(card.style.opacity).toEqual('0'));
+    });
+  });
+});
+```
+
+### Summary
+
+- A message about code that causes React state updates not being wrapped in `act(...)` might indicate that a component updated after the test ended.
+- Using `waitFor()` can solve the issue by making tests asynchronous, but you might need to bump your `react-testing-library` version if you are using older versions of `react-scripts`.
+- If you see errors related to `MutationObserver`, you might need to change your `test` script to include `--env=jsdom-fourteen` as a parameter.
diff --git a/snippets/articles/s/testing-react-portals.md b/snippets/articles/s/testing-react-portals.md
new file mode 100644
index 000000000..9dae1744c
--- /dev/null
+++ b/snippets/articles/s/testing-react-portals.md
@@ -0,0 +1,37 @@
+---
+title: Testing React portals
+shortTitle: Portal testing
+type: story
+language: react
+tags: [testing]
+author: chalarangelo
+cover: portal-timelapse
+excerpt: Testing React components that use portals can be difficult until you understand what you really need to be testing.
+dateModified: 2022-03-13T05:00:00-04:00
+---
+
+Testing React components can get pretty complicated, especially when dealing with portals. While they seem intimidating, what they are in essence is a way to render a component in a different place in the DOM. Apart from that, when writing tests, one should avoid testing framework internals. This obviously applies to React internals as well.
+
+Putting these two points together, all we really care about when testing React portals is if the **portalized output** is correct. Based on that, mocking portals shouldn't be all that hard. We just need to mock `ReactDOM.createPortal()` to render the input element in place. Here's what that looks like in Jest:
+
+```jsx
+describe('MyComponent', () => {
+  beforeAll(() => {
+    ReactDOM.createPortal = jest.fn((element, node) => {
+      return element;
+    });
+  });
+
+  afterEach(() => {
+    ReactDOM.createPortal.mockClear();
+  });
+
+  it('should render correctly', () => {
+    const component = renderer.create(<MyComponent>Hello World!</MyComponent>);
+
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+```
+
+This kind of mock will work in most cases and it will help ensure that the portalized output is correct. It comes with some caveats, though. First and foremost, the tested DOM is different from the actual DOM of the application. This can make tests less robust, reducing confidence in their result. Secondly, issues that might arise from the use of portals, such as the portal node missing, must be tested separately.
diff --git a/snippets/articles/s/testing-redux-connected-components.md b/snippets/articles/s/testing-redux-connected-components.md
new file mode 100644
index 000000000..ae71c251f
--- /dev/null
+++ b/snippets/articles/s/testing-redux-connected-components.md
@@ -0,0 +1,70 @@
+---
+title: Testing Redux-connected components with React Testing Library
+shortTitle: Redux-connected components testing
+type: story
+language: react
+tags: [testing]
+author: chalarangelo
+cover: sparkles
+excerpt: Testing Redux-connected components is pretty common. Learn how to use this simple utility function to speed up your testing.
+dateModified: 2021-11-07T16:34:37+03:00
+---
+
+Testing Redux-connected components with React Testing Library is a very common scenario. However, it might be a little complicated without the proper tools and you could end up repeating yourself. This is especially true when writing the boilerplate to connect to your redux store.
+
+Here's a simple utility function adapted from [React Testing Library's docs on the subject](https://testing-library.com/docs/example-react-redux) to help you speed up your testing:
+
+```jsx
+// src/test/utils/renderConnected.js
+import React from 'react';
+import { render } from '@testing-library/react';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
+// Replace this with the appropriate imports for your project
+import { reducer, reducerInitialState } from './myReduxStore';
+
+const renderConnected = (
+  ui, {
+    initialState = reducerInitialState,
+    store = createStore(reducer, initialState),
+    ...renderOptions
+  } = {}
+) => {
+  const Wrapper = ({ children }) => (
+    <Provider store={store}>{children}</Provider>
+  );
+  return render(ui, { wrapper: Wrapper, ...renderOptions});
+};
+
+export default renderConnected;
+```
+
+This utility uses the `createStore` function and the `<Provider>` component to wrap a redux-connected component to the passed state. Then it uses React Testing Library's `render` to finally render the result.
+
+Remember to replace `import` statements with the appropriate files and exports to set up the utility as necessary. After creating the utility function and saving it in an appropriate file, you can use it like this:
+
+```jsx
+// src/test/SomeComponent.test.jsx
+import React from 'react';
+// Replace this with the appropriate location of your component
+import SomeComponent from 'src/components/SomeComponent';
+// Replace this with the appropriate location of your testing utility
+import renderConnected from 'src/test/utils/renderConnected';
+
+describe('<SomeComponent/>', () => {
+  let wrapper, getByText;
+  const initialState = {
+    // ... Add your initial testing state here
+  };
+
+  beforeEach(() => {
+    const utils = renderConnected(<SomeComponent />, { initialState });
+    wrapper = utils.container;
+    getByText = utils.getByText;
+  });
+
+  it('renders the component', () => {
+    expect(wrapper.querySelector('.some-component')).toBeInTheDocument();
+  });
+});
+```
diff --git a/snippets/articles/s/testing-stateful-ui-components.md b/snippets/articles/s/testing-stateful-ui-components.md
new file mode 100644
index 000000000..a2222b752
--- /dev/null
+++ b/snippets/articles/s/testing-stateful-ui-components.md
@@ -0,0 +1,55 @@
+---
+title: An approach to testing stateful React components
+shortTitle: Stateful component testing
+type: story
+language: react
+tags: [testing]
+author: chalarangelo
+cover: lake-trees
+excerpt: Testing stateful React components is not difficult, but did you know there's a solution that doesn't involve testing state directly?
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Some time ago, I was tasked with writing tests for a handful of React components, an otherwise mundane and uninspiring task, that somehow ended with a "Eureka!" moment for me. The specifics of the project and its components are of little importance, however the key detail is that I was working with stateful React components that are used daily by a large team and, as such, are refactored and updated quite often.
+
+My initial approach consisted of writing some simple tests, such as checking if the component is rendered properly and if certain events fire appropriately. In doing so, I was comparing state directly with the result I was expecting, having the component's code right next to my assertions. Of course, this isn't bad by anyone's standards, but for a codebase with many moving parts, it is not the greatest idea. Let me show you an example why:
+
+```js
+context('the component is initialized in a collapsed state', function() {
+  let wrapper;
+  beforeEach(function(){
+    wrapper = mount(<StatefulComponent />);
+  });
+
+  it('component state.expanded is false', function() {
+    expect(wrapper.state('expanded')).to.be.false;
+  });
+});
+```
+
+In this test, we check if the component's state has `expanded` equal to `false`. Our test will pass, as long as this simple condition is true. It's a very simple test that should be easy to understand even for someone completely unfamiliar with the codebase.
+
+However, over time the component's implementation might change. What happens if `expanded` in our state ends up meaning something different? Or worse yet, if it isn't reflected the same way in the interface?
+
+Enter my "Eureka!" moment:
+
+> The application's UI should always be considered the result of combining the component's props and state.
+
+The above statement implies that a component's state can be considered a black box while testings, an abstraction layer that should not be accessed unless absolutely necessary. So, instead of the test presented above, we should be doing something more like this:
+
+```js
+context('the component is initialized in a collapsed state', function() {
+  let wrapper;
+  beforeEach(function(){
+    wrapper = mount(<StatefulComponent />);
+  });
+
+  it('component does not have the expanded class', function() {
+    expect(wrapper.find('div').hasClass('expanded')).to.be.false;
+  });
+});
+```
+
+Our test is still easy to read and understand, but it's a better test in general.
+
+By directly checking the DOM instead of the component's state, we provide information about the component's output to future code authors, instead of asking them to keep the existing implementation intact. It seems like a better way to document the component and it's easier to track future changes should someone refactor the UI in such a way that the DOM representation of the component is altered.
diff --git a/snippets/articles/s/the-case-for-javascript-trailing-commas.md b/snippets/articles/s/the-case-for-javascript-trailing-commas.md
new file mode 100644
index 000000000..4de39230e
--- /dev/null
+++ b/snippets/articles/s/the-case-for-javascript-trailing-commas.md
@@ -0,0 +1,49 @@
+---
+title: The case for trailing commas in JavaScript
+shortTitle: Trailing commas in JavaScript
+type: story
+language: javascript
+tags: [webdev]
+author: chalarangelo
+cover: contemporary-desk
+excerpt: Trailing commas are not without controversy. Here's why I think you should use them.
+dateModified: 2023-03-12T05:00:00-04:00
+---
+
+JavaScript's syntactic features are notorious for sparking debates among developers, with semicolons and tabs vs. spaces being the most common examples. However, trailing commas are a feature that isn't discussed as much, even though I believe there's merit to using them.
+
+JavaScript has allowed trailing commas in array and object literals since the **ES5 specification**. Adding a trailing comma is completely valid and will not cause any errors or alter the code in any way. For example, the two statements below are exactly the same:
+
+```js
+[1, 2, 3]; // [1, 2, 3]
+[1, 2, 3,]; // [1, 2, 3]
+```
+
+This example might look strange, and indeed it's not necessarily the prettiest sight. Where trailing commas start to feel more useful is when working with multiline arrays or objects. For example, consider the following object:
+
+```js
+const obj = {
+  a: 1,
+  b: 2,
+  c: 3
+};
+```
+
+There's nothing wrong with this code snippet, except if we want to make a change to the object. In that case, we will have to add a comma to the last line, before adding a new property. A similar issue arises if we reorder the properties. In that case, a comma might end up missing from the line that was previously last. Finally, if we want consistency, removing the last property will also require the removal of the comma from the line before it.
+
+None of these scenarios are uncommon, as you are well aware. Even more so, these start becoming a little more annoying when you factor in **version control**. A single property addition will require two lines to be altered. This can make diffs harder to read and review, and can also cause merge conflicts more often than you think.
+
+I think it's clear by now that trailing commas can improve **code readability** and increase **diff clarity**. This is not a new idea and has been suggested by popular style guides for years, especially in multiline array and object literals.
+
+As with most things, ESLint has a rule for this. The `comma-dangle` rule can be used to enforce trailing commas in both single-line and multiline situations. You can even go further and customize it for different types of literals, such as arrays, objects, functions, and imports/exports. My personal recommendation is to **enforce trailing commas only for multiline literals**:
+
+```js
+{
+  "rules": {
+    // Other rules ...
+    "comma-dangle": ["error", "always-multiline"]
+  }
+}
+```
+
+This way you get all the benefits of trailing commas, without having to look at the potentially confusing trailing commas in single-line literals. As a final note, bear in mind that style decisions should always be discussed with your team and agreed upon.
diff --git a/snippets/articles/s/typographic-scale-basics.md b/snippets/articles/s/typographic-scale-basics.md
new file mode 100644
index 000000000..66c40143e
--- /dev/null
+++ b/snippets/articles/s/typographic-scale-basics.md
@@ -0,0 +1,62 @@
+---
+title: Typographic scale basics
+type: story
+language: css
+tags: [webdev,typography]
+author: chalarangelo
+cover: typography
+excerpt: Typography might seem intimidating, but you can quickly and easily create a simple typographic scale with this basic technique.
+dateModified: 2021-11-07T16:34:37+03:00
+---
+
+Building a typographic scale might seem hard. Yet it's not all that difficult, as long as you learn some basic techniques and principles.
+
+The first steps are to pick a **font family**, a starting value for the **font size** and a ratio which will serve as the **scaling factor**. Common values for these variables are the Roboto font family, a great choice due to its many different font weights, a starting font size of `18px` and a ratio of `1.618`, which is the golden ratio.
+
+Based on these values, the basis of our typographic scale is an element with `font-size: 18px` and `line-height: 1.618`. Notice that the ratio is also applied to the line height. This allows the text to breathe a little more and makes it easier to read, while creating a consistent vertical rhythm.
+
+Next, we are going to apply our ratio to **scale the font up or down**, as necessary. For example, we can multiply once by `1.618` for a sub heading, twice for a normal heading and three times for a large heading (e.g. our website's name on the home page). Similarly, we can scale the font down by dividing by our ratio to make elements less visually important (e.g. footnotes).
+
+While this gives us a pretty solid setup, some elements might not look properly emphasized. To deal with this, we can use **font weight** to increase or decrease the visual importance of some elements. We could, for example, make headings bolder to make them more important. We could also make footnotes slightly bold to emphasize them as their font size is very small and they might get overlooked.
+
+Putting it all together, we should end up with a typographic scale that looks similar to this:
+
+![Typographic scale example](./illustrations/typography-example.png)
+
+```css
+:root {
+  --font-family: 'Roboto', sans-serif;
+  --font-size: 18px;
+  --font-weight: 300;
+  --line-height: 1.618;
+}
+
+* {
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+}
+
+.sub-heading {
+  --font-size: 1.618rem;
+  --font-weight: 600;
+}
+
+.heading {
+  --font-size: 2.618rem;
+  --font-weight: 400;
+}
+
+.large-heading {
+  --font-size: 4.236rem;
+  --font-weight: 500;
+}
+
+.footnote {
+  --font-size: 0.618rem;
+  --font-weight: 500;
+}
+```
+
+The above example is a very simple starting point to build your own typographic scale, applying some simple principles to create a visual hierarchy that feels natural and works well. Feel free to tweak the starting values of the variables and experiment to get the best result for your designs.
diff --git a/snippets/articles/s/zooming-accessibility-tips.md b/snippets/articles/s/zooming-accessibility-tips.md
new file mode 100644
index 000000000..67f73044c
--- /dev/null
+++ b/snippets/articles/s/zooming-accessibility-tips.md
@@ -0,0 +1,28 @@
+---
+title: Why using maximum-scale can harm your page's accessibility
+shortTitle: Accessibility and maximum-scale
+type: story
+language: html
+tags: [webdev]
+author: chalarangelo
+cover: camera-zoom
+excerpt: Using the viewport meta tag incorrectly can harm your website's accessibility. Learn how to prevent problems with this handy guide.
+unlisted: true
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Using the `"viewport"` meta tag incorrectly can cause some serious accessibility issues for people with low vision.
+
+The most common and, for the vast majority of cases, correct setup for said tag looks something like the first example below. However, there are websites that might do something like the second example, employing `maximum-scale=1.0` as part of their meta tag:
+
+```html
+<!-- Good in most scenarios -->
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+<!-- Bad in most scenarios -->
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+```
+
+The reason this is a bad practice is that `maximum-scale=1.0` will disable the pinch zoom functionality on certain mobile devices, forcing people to view the website a certain way and taking away their ability to zoom in and out. This is the exact reason you should avoid it, allowing you to meet user's needs and provide a better user experience.
+
+On a side note, even if you have some extraordinary reason for applying this, you should know that some browser and device combos such as Chrome on Android might respect the meta tag's suggestion, while others such as iOS 10 ignore the suggestion entirely, so you should be aware that you might not be delivering a consistent user experience for all of your users.
diff --git a/snippets/articles/template.md b/snippets/articles/template.md
new file mode 100644
index 000000000..f748a08cf
--- /dev/null
+++ b/snippets/articles/template.md
@@ -0,0 +1,13 @@
+---
+title: My amazing story
+shortTitle: Amazing story
+type: story
+language: javascript
+tags: [webdev]
+author: chalarangelo
+cover: image
+excerpt: A short summary of your story up to 180 characters long.
+dateModified: 2021-06-13T05:00:00-04:00
+---
+
+Write your blog post here.
diff --git a/snippets/css/s/aspect-ratio.md b/snippets/css/s/aspect-ratio.md
new file mode 100644
index 000000000..d86d2d3ba
--- /dev/null
+++ b/snippets/css/s/aspect-ratio.md
@@ -0,0 +1,39 @@
+---
+title: Aspect ratio
+type: snippet
+language: css
+tags: [layout]
+author: chalarangelo
+cover: digital-nomad-12
+dateModified: 2022-08-14T05:00:00-04:00
+---
+
+Creates a responsive container with a specified aspect ratio.
+
+- Use a CSS custom property, `--aspect-ratio` to define the desired aspect ratio.
+- Set the container element to `position: relative` and `height: 0`, calculating its height using the `calc()` function and the `--aspect-ratio` custom property.
+- Set the direct child of the container element to `position: absolute` and filling it parent, while giving it `object-fit: cover` to maintain the aspect ratio.
+
+```html
+<div class="container">
+  <img src="https://picsum.photos/id/119/800/450" />
+</div>
+```
+
+```css
+.container {
+  --aspect-ratio: 16/9;
+  position: relative;
+  height: 0;
+  padding-bottom: calc(100% / (var(--aspect-ratio)));
+}
+
+.container > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+```
diff --git a/snippets/css/s/border-with-top-triangle.md b/snippets/css/s/border-with-top-triangle.md
new file mode 100644
index 000000000..fa016ede9
--- /dev/null
+++ b/snippets/css/s/border-with-top-triangle.md
@@ -0,0 +1,45 @@
+---
+title: Border with top triangle
+type: snippet
+language: css
+tags: [visual]
+cover: greek-coffee
+dateModified: 2021-01-07T23:52:15+02:00
+---
+
+Creates a content container with a triangle at the top.
+
+- Use the `::before` and `::after` pseudo-elements to create two triangles.
+- The colors of the two triangles should be the same as the container's `border-color` and the container's `background-color` respectively.
+- The `border-width` of the one triangle (`::before`) should be `1px` wider than the other one (`::after`), in order to act as the border.
+- The smaller triangle (`::after`) should be `1px` to the right of the larger triangle (`::before`) to allow for its left border to be shown.
+
+```html
+<div class="container">Border with top triangle</div>
+```
+
+```css
+.container {
+  position: relative;
+  background: #ffffff;
+  padding: 15px;
+  border: 1px solid #dddddd;
+  margin-top: 20px;
+}
+
+.container::before,
+.container::after {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 19px;
+  border: 11px solid transparent;
+  border-bottom-color: #dddddd;
+}
+
+.container::after {
+  left: 20px;
+  border: 10px solid transparent;
+  border-bottom-color: #ffffff;
+}
+```
diff --git a/snippets/css/s/bouncing-loader.md b/snippets/css/s/bouncing-loader.md
new file mode 100644
index 000000000..318d3f416
--- /dev/null
+++ b/snippets/css/s/bouncing-loader.md
@@ -0,0 +1,55 @@
+---
+title: Bouncing loader
+type: snippet
+language: css
+tags: [animation]
+cover: digital-nomad-12
+dateModified: 2021-10-11T18:44:51+03:00
+---
+
+Creates a bouncing loader animation.
+
+- Use `@keyframes` to define a bouncing animation, using the `opacity` and `transform` properties. Use a single axis translation on `transform: translate3d()` to achieve better animation performance.
+- Create a parent container, `.bouncing-loader`, for the bouncing circles. Use `display: flex` and `justify-content: center` to position them in the center.
+- Give the three bouncing circle `<div>` elements the same `width` and `height` and `border-radius: 50%` to make them circular.
+- Apply the `bouncing-loader` animation to each of the three bouncing circles.
+- Use a different `animation-delay` for each circle and `animation-direction: alternate` to create the appropriate effect.
+
+```html
+<div class="bouncing-loader">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+```
+
+```css
+@keyframes bouncing-loader {
+  to {
+    opacity: 0.1;
+    transform: translate3d(0, -16px, 0);
+  }
+}
+
+.bouncing-loader {
+  display: flex;
+  justify-content: center;
+}
+
+.bouncing-loader > div {
+  width: 16px;
+  height: 16px;
+  margin: 3rem 0.2rem;
+  background: #8385aa;
+  border-radius: 50%;
+  animation: bouncing-loader 0.6s infinite alternate;
+}
+
+.bouncing-loader > div:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.bouncing-loader > div:nth-child(3) {
+  animation-delay: 0.4s;
+}
+```
diff --git a/snippets/css/s/box-sizing-reset.md b/snippets/css/s/box-sizing-reset.md
new file mode 100644
index 000000000..b0ae26cae
--- /dev/null
+++ b/snippets/css/s/box-sizing-reset.md
@@ -0,0 +1,46 @@
+---
+title: Box-sizing reset
+type: snippet
+language: css
+tags: [layout]
+cover: interior
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Resets the box-model so that `width` and `height` are not affected by `border` or `padding`.
+
+- Use `box-sizing: border-box` to include the width and height of `padding` and `border` when calculating the element's `width` and `height`.
+- Use `box-sizing: inherit` to pass down the `box-sizing` property from parent to child elements.
+
+```html
+<div class="box">border-box</div>
+<div class="box content-box">content-box</div>
+```
+
+```css
+div {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+.box {
+  display: inline-block;
+  width: 120px;
+  height: 120px;
+  padding: 8px;
+  margin: 8px;
+  background: #F24333;
+  color: white;
+  border: 1px solid #BA1B1D;
+  border-radius: 4px;
+}
+
+.content-box {
+  box-sizing: content-box;
+}
+```
diff --git a/snippets/css/s/broken-image-fallback.md b/snippets/css/s/broken-image-fallback.md
new file mode 100644
index 000000000..f7aba167c
--- /dev/null
+++ b/snippets/css/s/broken-image-fallback.md
@@ -0,0 +1,44 @@
+---
+title: Fallback for images that fail to load
+type: snippet
+shortTitle: Broken image fallback
+language: css
+tags: [visual]
+author: chalarangelo
+cover: building-facade
+dateModified: 2022-11-04T05:00:00-04:00
+---
+
+Displays an error message when an image fails to load.
+
+- Apply styles to the `img` element as if it was a text container.
+- Use the `::before` and `::after` pseudo-elements to display an error message and the image URL. These elements will only be displayed if the image fails to load.
+
+```html
+<img src="https://nowhere.to.be/found.jpg" />
+```
+
+```css
+img {
+  display: block;
+  font-family: sans-serif;
+  font-weight: 300;
+  height: auto;
+  line-height: 2;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+
+img::before {
+  content: "Sorry, this image is unavailable.";
+  display: block;
+  margin-bottom: 8px;
+}
+
+img::after {
+  content: "(url: " attr(src) ")";
+  display: block;
+  font-size: 12px;
+}
+```
diff --git a/snippets/css/s/button-border-animation.md b/snippets/css/s/button-border-animation.md
new file mode 100644
index 000000000..144b8cec1
--- /dev/null
+++ b/snippets/css/s/button-border-animation.md
@@ -0,0 +1,55 @@
+---
+title: Button border animation
+type: snippet
+language: css
+tags: [animation]
+cover: highlands
+dateModified: 2021-05-24T15:28:52+03:00
+---
+
+Creates a border animation on hover.
+
+- Use the `::before` and `::after` pseudo-elements to create two boxes `24px` wide opposite each other above and below the box.
+- Use the `:hover` pseudo-class to extend the `width` of those elements to `100%` on hover and animate the change using `transition`.
+
+```html
+<button class="animated-border-button">Submit</button>
+```
+
+```css
+.animated-border-button {
+  background-color: #263059;
+  border: none;
+  color: #ffffff;
+  outline: none;
+  padding: 12px 40px 10px;
+  position: relative;
+}
+
+.animated-border-button::before,
+.animated-border-button::after {
+  border: 0 solid transparent;
+  transition: all 0.3s;
+  content: '';
+  height: 0;
+  position: absolute;
+  width: 24px;
+}
+
+.animated-border-button::before {
+  border-top: 2px solid #263059;
+  right: 0;
+  top: -4px;
+}
+
+.animated-border-button::after {
+  border-bottom: 2px solid #263059;
+  bottom: -4px;
+  left: 0;
+}
+
+.animated-border-button:hover::before,
+.animated-border-button:hover::after {
+  width: 100%;
+}
+```
diff --git a/snippets/css/s/button-focus-swing-animation.md b/snippets/css/s/button-focus-swing-animation.md
new file mode 100644
index 000000000..119fd71e4
--- /dev/null
+++ b/snippets/css/s/button-focus-swing-animation.md
@@ -0,0 +1,57 @@
+---
+title: Button swing animation
+type: snippet
+language: css
+tags: [animation]
+author: chalarangelo
+cover: painters-desk
+dateModified: 2021-05-24T15:28:52+03:00
+---
+
+Creates a swing animation on focus.
+
+- Use an appropriate `transition` to animate changes to the element.
+- Use the `:focus` pseudo-class to apply an `animation` that uses `transform` to make the element swing.
+- Use `animation-iteration-count` to only play the animation once.
+
+```html
+<button class="button-swing">Submit</button>
+```
+
+```css
+.button-swing {
+  color: #65b5f6;
+  background-color: transparent;
+  border: 1px solid #65b5f6;
+  border-radius: 4px;
+  padding: 0 16px;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+.button-swing:focus {
+  animation: swing 1s ease;
+  animation-iteration-count: 1;
+}
+
+@keyframes swing {
+  15% {
+    transform: translateX(5px);
+  }
+  30% {
+    transform: translateX(-5px);
+  }
+  50% {
+    transform: translateX(3px);
+  }
+  65% {
+    transform: translateX(-3px);
+  }
+  80% {
+    transform: translateX(2px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+```
diff --git a/snippets/css/s/button-hover-fill-animation.md b/snippets/css/s/button-hover-fill-animation.md
new file mode 100644
index 000000000..bb8759cf9
--- /dev/null
+++ b/snippets/css/s/button-hover-fill-animation.md
@@ -0,0 +1,33 @@
+---
+title: Button fill animation
+type: snippet
+language: css
+tags: [animation]
+cover: beach-pineapple
+dateModified: 2021-04-02T21:34:43+03:00
+---
+
+Creates a fill animation on hover.
+
+- Set a `color` and `background` and use an appropriate `transition` to animate changes to the element.
+- Use the `:hover` pseudo-class to change the `background` and `color` of the element when the user hovers over it.
+
+```html
+<button class="animated-fill-button">Submit</button>
+```
+
+```css
+.animated-fill-button {
+  padding: 20px;
+  background: #fff;
+  color: #000;
+  border: 1px solid #000;
+  cursor: pointer;
+  transition: 0.3s all ease-in-out;
+}
+
+.animated-fill-button:hover {
+  background: #000;
+  color: #fff;
+}
+```
diff --git a/snippets/css/s/button-hover-grow-animation.md b/snippets/css/s/button-hover-grow-animation.md
new file mode 100644
index 000000000..6e721cdfb
--- /dev/null
+++ b/snippets/css/s/button-hover-grow-animation.md
@@ -0,0 +1,34 @@
+---
+title: Button grow animation
+type: snippet
+language: css
+tags: [animation]
+author: chalarangelo
+cover: white-laptop
+dateModified: 2021-05-24T15:28:52+03:00
+---
+
+Creates a grow animation on hover.
+
+- Use an appropriate `transition` to animate changes to the element.
+- Use the `:hover` pseudo-class to change the `transform` to `scale(1.1)`, growing the element when the user hovers over it.
+
+```html
+<button class="button-grow">Submit</button>
+```
+
+```css
+.button-grow {
+  color: #65b5f6;
+  background-color: transparent;
+  border: 1px solid #65b5f6;
+  border-radius: 4px;
+  padding: 0 16px;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+}
+
+.button-grow:hover {
+  transform: scale(1.1);
+}
+```
diff --git a/snippets/css/s/button-hover-shrink-animation.md b/snippets/css/s/button-hover-shrink-animation.md
new file mode 100644
index 000000000..53d9c18a5
--- /dev/null
+++ b/snippets/css/s/button-hover-shrink-animation.md
@@ -0,0 +1,34 @@
+---
+title: Button shrink animation
+type: snippet
+language: css
+tags: [animation]
+author: chalarangelo
+cover: clay-pot-horizon
+dateModified: 2021-05-24T15:28:52+03:00
+---
+
+Creates a shrink animation on hover.
+
+- Use an appropriate `transition` to animate changes to the element.
+- Use the `:hover` pseudo-class to change the `transform` to `scale(0.8)`, shrinking the element when the user hovers over it.
+
+```html
+<button class="button-shrink">Submit</button>
+```
+
+```css
+.button-shrink {
+  color: #65b5f6;
+  background-color: transparent;
+  border: 1px solid #65b5f6;
+  border-radius: 4px;
+  padding: 0 16px;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+}
+
+.button-shrink:hover {
+  transform: scale(0.8);
+}
+```
diff --git a/snippets/css/s/card-image-cutout.md b/snippets/css/s/card-image-cutout.md
new file mode 100644
index 000000000..27bdd7fbb
--- /dev/null
+++ b/snippets/css/s/card-image-cutout.md
@@ -0,0 +1,82 @@
+---
+title: Card with image cutout
+type: snippet
+language: css
+tags: [visual]
+author: chalarangelo
+cover: radio-monstera
+dateModified: 2022-12-11T05:00:00-04:00
+---
+
+Creates a card with an image cutout.
+
+- Use `background` to add a colored background to a `.container` element.
+- Create a `.card` containing a `figure` with the appropriate image for the cutout and any other content you want.
+- Use the `::before` pseudo-element to add a `border` around the `figure` element, matching the `.container` element's `background` and creating the illusion of a cutout in the `.card`.
+
+```html
+<div class="container">
+  <div class="card">
+    <figure>
+      <img alt="" src="https://picsum.photos/id/447/400/400"/>
+    </figure>
+    <p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+  </div>
+</div>
+```
+
+```css
+.container {
+  display: flex;
+  padding: 96px 24px 48px;
+  justify-content: center;
+  align-items: center;
+  background: #f3f1fe;
+}
+
+.card {
+  width: 350px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #fff;
+  border-radius: 10px;
+  margin: 8px;
+  box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.1);
+}
+
+.card figure {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  margin-top: -60px;
+  position: relative;
+}
+
+.card figure::before {
+  content: "";
+  border-radius: inherit;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  transform: translate(-50%, -50%);
+  border: 1rem solid #f3f1fe;
+  box-shadow: 0 1px rgba(0, 0, 0, 0.1);
+}
+
+.card figure img {
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.card .content {
+  text-align: center;
+  margin: 2rem;
+  line-height: 1.5;
+  color: #101010;
+}
+```
diff --git a/snippets/css/s/checkerboard-pattern.md b/snippets/css/s/checkerboard-pattern.md
new file mode 100644
index 000000000..330baaf7e
--- /dev/null
+++ b/snippets/css/s/checkerboard-pattern.md
@@ -0,0 +1,45 @@
+---
+title: Checkerboard background pattern
+type: snippet
+language: css
+tags: [visual]
+cover: digital-nomad-2
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Creates a checkerboard background pattern.
+
+- Use `background-color` to set a white background.
+- Use `background-image` with two `linear-gradient()` values. Give each one a different angle to create the checkerboard pattern.
+- Use `background-size` to specify the pattern's size.
+- **Note:** The fixed `height` and `width` of the element is for demonstration purposes only.
+
+```html
+<div class="checkerboard"></div>
+```
+
+```css
+.checkerboard {
+  width: 240px;
+  height: 240px;
+  background-color: #fff;
+  background-image: linear-gradient(
+      45deg,
+      #000 25%,
+      transparent 25%,
+      transparent 75%,
+      #000 75%,
+      #000
+    ),
+    linear-gradient(
+      -45deg,
+      #000 25%,
+      transparent 25%,
+      transparent 75%,
+      #000 75%,
+      #000
+    );
+  background-size: 60px 60px;
+  background-repeat: repeat;
+}
+```
diff --git a/snippets/css/s/circle.md b/snippets/css/s/circle.md
new file mode 100644
index 000000000..d24589c31
--- /dev/null
+++ b/snippets/css/s/circle.md
@@ -0,0 +1,26 @@
+---
+title: Circle
+type: snippet
+language: css
+tags: [visual]
+cover: oven-paddle
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Creates a circular shape with pure CSS.
+
+- Use `border-radius: 50%` to curve the borders of the element to create a circle.
+- Since a circle has the same radius at any given point, the `width` and `height` must be the same. Differing values will create an ellipse.
+
+```html
+<div class="circle"></div>
+```
+
+```css
+.circle {
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  background: #9C27B0;
+}
+```
diff --git a/snippets/css/s/clearfix.md b/snippets/css/s/clearfix.md
new file mode 100644
index 000000000..10651aa6c
--- /dev/null
+++ b/snippets/css/s/clearfix.md
@@ -0,0 +1,36 @@
+---
+title: Clearfix
+type: snippet
+language: css
+tags: [layout]
+cover: memories-of-pineapple-3
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Ensures that an element self-clears its children.
+
+- Use the `::after` pseudo-element and apply `content: ''` to allow it to affect layout.
+- Use `clear: both` to make the element clear past both left and right floats.
+- For this technique to work properly, make sure there are no non-floating children in the container and that there are no tall floats before the clearfixed container but in the same formatting context (e.g. floated columns).
+- **Note:** This is only useful if you are using `float` to build layouts. Consider using a more modern approach, such as the flexbox or grid layout.
+
+```html
+<div class="clearfix">
+  <div class="floated">float a</div>
+  <div class="floated">float b</div>
+  <div class="floated">float c</div>
+</div>
+```
+
+```css
+.clearfix::after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+.floated {
+  float: left;
+  padding: 4px;
+}
+```
diff --git a/snippets/css/s/constant-width-to-height-ratio.md b/snippets/css/s/constant-width-to-height-ratio.md
new file mode 100644
index 000000000..b4417d39a
--- /dev/null
+++ b/snippets/css/s/constant-width-to-height-ratio.md
@@ -0,0 +1,36 @@
+---
+title: Constant width to height ratio
+type: snippet
+language: css
+tags: [layout]
+cover: clutter
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Ensures that an element with variable `width` will retain a proportionate `height` value.
+
+- Apply `padding-top` on the `::before` pseudo-element, making the `height` of the element equal to a percentage of its `width`.
+- The proportion of `height` to `width` can be altered as necessary. For example a `padding-top` of `100%` will create a responsive square (1:1 ratio).
+
+```html
+<div class="constant-width-to-height-ratio"></div>
+```
+
+```css
+.constant-width-to-height-ratio {
+  background: #9C27B0;
+  width: 50%;
+}
+
+.constant-width-to-height-ratio::before {
+  content: '';
+  padding-top: 100%;
+  float: left;
+}
+
+.constant-width-to-height-ratio::after {
+  content: '';
+  display: block;
+  clear: both;
+}
+```
diff --git a/snippets/css/s/counter.md b/snippets/css/s/counter.md
new file mode 100644
index 000000000..8968cb239
--- /dev/null
+++ b/snippets/css/s/counter.md
@@ -0,0 +1,41 @@
+---
+title: Counter
+type: snippet
+language: css
+tags: [visual]
+cover: laptop-plants
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Creates a custom list counter that accounts for nested list elements.
+
+- Use `counter-reset` to initialize a variable counter (default `0`), the name of which is the value of the attribute (i.e. `counter`).
+- Use `counter-increment` on the variable counter for each countable element (i.e. each `<li>`).
+- Use `counters()` to display the value of each variable counter as part of the `content` of the `::before` pseudo-element for each countable element (i.e. each `<li>`). The second value passed to it (`'.'`) acts as the delimiter for nested counters.
+
+```html
+<ul>
+  <li>List item</li>
+  <li>List item</li>
+  <li>
+    List item
+    <ul>
+      <li>List item</li>
+      <li>List item</li>
+      <li>List item</li>
+    </ul>
+  </li>
+</ul>
+```
+
+```css
+ul {
+  counter-reset: counter;
+  list-style: none;
+}
+
+li::before {
+  counter-increment: counter;
+  content: counters(counter, '.') ' ';
+}
+```
diff --git a/snippets/css/s/custom-checkbox.md b/snippets/css/s/custom-checkbox.md
new file mode 100644
index 000000000..221e4881d
--- /dev/null
+++ b/snippets/css/s/custom-checkbox.md
@@ -0,0 +1,152 @@
+---
+title: Custom checkbox
+type: snippet
+language: css
+tags: [visual,animation]
+author: chalarangelo
+cover: interior-8
+dateModified: 2021-10-11T18:44:51+03:00
+---
+
+Creates a styled checkbox with animation on state change.
+
+- Use an `<svg>` element to create the check `<symbol>` and insert it via the `<use>` element to create a reusable SVG icon.
+- Create a `.checkbox-container` and use flexbox to create the appropriate layout for the checkboxes.
+- Hide the `<input>` element and use the `label` associated with it to display a checkbox and the provided text.
+- Use `stroke-dashoffset` to animate the check symbol on state change.
+- Use `transform: scale(0.9)` via a CSS animation to create a zoom animation effect.
+
+```html
+<svg class="checkbox-symbol">
+  <symbol id="check" viewbox="0 0 12 10">
+    <polyline
+      points="1.5 6 4.5 9 10.5 1"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+    ></polyline>
+  </symbol>
+</svg>
+
+<div class="checkbox-container">
+  <input class="checkbox-input" id="apples" type="checkbox" />
+  <label class="checkbox" for="apples">
+    <span>
+      <svg width="12px" height="10px">
+        <use xlink:href="#check"></use>
+      </svg>
+    </span>
+    <span>Apples</span>
+  </label>
+  <input class="checkbox-input" id="oranges" type="checkbox" />
+  <label class="checkbox" for="oranges">
+    <span>
+      <svg width="12px" height="10px">
+        <use xlink:href="#check"></use>
+      </svg>
+    </span>
+    <span>Oranges</span>
+  </label>
+</div>
+```
+
+```css
+.checkbox-symbol {
+  position: absolute;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  user-select: none;
+}
+
+.checkbox-container {
+  box-sizing: border-box;
+  background: #ffffff;
+  color: #222;
+  height: 64px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-flow: row wrap;
+}
+
+.checkbox-container * {
+  box-sizing: border-box;
+}
+
+.checkbox-input {
+  position: absolute;
+  visibility: hidden;
+}
+
+.checkbox {
+  user-select: none;
+  cursor: pointer;
+  padding: 6px 8px;
+  border-radius: 6px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  display: flex;
+}
+
+.checkbox:not(:last-child) {
+  margin-right: 6px;
+}
+
+.checkbox:hover {
+  background: rgba(0, 119, 255, 0.06);
+}
+
+.checkbox span {
+  vertical-align: middle;
+  transform: translate3d(0, 0, 0);
+}
+
+.checkbox span:first-child {
+  position: relative;
+  flex: 0 0 18px;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  transform: scale(1);
+  border: 1px solid #cccfdb;
+  transition: all 0.3s ease;
+}
+
+.checkbox span:first-child svg {
+  position: absolute;
+  top: 3px;
+  left: 2px;
+  fill: none;
+  stroke: #fff;
+  stroke-dasharray: 16px;
+  stroke-dashoffset: 16px;
+  transition: all 0.3s ease;
+  transform: translate3d(0, 0, 0);
+}
+
+.checkbox span:last-child {
+  padding-left: 8px;
+  line-height: 18px;
+}
+
+.checkbox:hover span:first-child {
+  border-color: #0077ff;
+}
+
+.checkbox-input:checked + .checkbox span:first-child {
+  background: #0077ff;
+  border-color: #0077ff;
+  animation: zoom-in-out 0.3s ease;
+}
+
+.checkbox-input:checked + .checkbox span:first-child svg {
+  stroke-dashoffset: 0;
+}
+
+@keyframes zoom-in-out {
+  50% {
+    transform: scale(0.9);
+  }
+}
+```
diff --git a/snippets/css/s/custom-radio.md b/snippets/css/s/custom-radio.md
new file mode 100644
index 000000000..44c60fb06
--- /dev/null
+++ b/snippets/css/s/custom-radio.md
@@ -0,0 +1,84 @@
+---
+title: Custom radio button
+type: snippet
+language: css
+tags: [visual,animation]
+author: chalarangelo
+cover: messy-computer
+dateModified: 2022-11-16T05:00:00-04:00
+---
+
+Creates a styled radio button with animation on state change.
+
+- Create a `.radio-container` and use flexbox to create the appropriate layout for the radio buttons.
+- Reset the styles on the `<input>` and use it to create the outline and background of the radio button.
+- Use the `::before` element to create the inner circle of the radio button.
+- Use `transform: scale(1)` and a CSS transition to create an animation effect on state change.
+
+```html
+<div class="radio-container">
+  <input class="radio-input" id="apples" type="radio" name="fruit" />
+  <label class="radio" for="apples">Apples</label>
+  <input class="radio-input" id="oranges" type="radio" name="fruit" />
+  <label class="radio" for="oranges">Oranges</label>
+</div>
+```
+
+```css
+.radio-container {
+  box-sizing: border-box;
+  background: #ffffff;
+  color: #222;
+  height: 64px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-flow: row wrap;
+}
+
+.radio-container * {
+  box-sizing: border-box;
+}
+
+.radio-input {
+  appearance: none;
+  background-color: #ffffff;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #cccfdb;
+  margin: 0;
+  border-radius: 50%;
+  display: grid;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.radio-input::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  transform: scale(0);
+  transition: 0.3s transform ease-in-out;
+  box-shadow: inset 6px 6px #ffffff;
+}
+
+.radio-input:checked {
+  background: #0077ff;
+  border-color: #0077ff;
+}
+
+.radio-input:checked::before {
+  transform: scale(1);
+}
+
+.radio {
+  cursor: pointer;
+  padding: 6px 8px;
+}
+
+.radio:not(:last-child) {
+  margin-right: 6px;
+}
+```
diff --git a/snippets/css/s/custom-scrollbar.md b/snippets/css/s/custom-scrollbar.md
new file mode 100644
index 000000000..9681d8906
--- /dev/null
+++ b/snippets/css/s/custom-scrollbar.md
@@ -0,0 +1,47 @@
+---
+title: Custom scrollbar
+type: snippet
+language: css
+tags: [visual]
+cover: sea-view
+dateModified: 2021-05-16T13:09:15+03:00
+---
+
+Customizes the scrollbar style for elements with scrollable overflow.
+
+- Use `::-webkit-scrollbar` to style the scrollbar element.
+- Use `::-webkit-scrollbar-track` to style the scrollbar track (the background of the scrollbar).
+- Use `::-webkit-scrollbar-thumb` to style the scrollbar thumb (the draggable element).
+- **Note:** Scrollbar styling doesn't appear to be on any standards track. This technique only works on WebKit-based browsers.
+
+```html
+<div class="custom-scrollbar">
+  <p>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
+    Iure id exercitationem nulla qui repellat laborum vitae, <br />
+    molestias tempora velit natus. Quas, assumenda nisi. <br />
+    Quisquam enim qui iure, consequatur velit sit?
+  </p>
+</div>
+```
+
+```css
+.custom-scrollbar {
+  height: 70px;
+  overflow-y: scroll;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 8px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: #1E3F20;
+  border-radius: 12px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #4A7856;
+  border-radius: 12px;
+}
+```
diff --git a/snippets/css/s/custom-text-selection.md b/snippets/css/s/custom-text-selection.md
new file mode 100644
index 000000000..db43f6dd6
--- /dev/null
+++ b/snippets/css/s/custom-text-selection.md
@@ -0,0 +1,28 @@
+---
+title: Custom text selection
+type: snippet
+language: css
+tags: [visual]
+cover: digital-nomad
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Changes the styling of text selection.
+
+- Use the `::selection` pseudo-selector to style text within it when selected.
+
+```html
+<p class="custom-text-selection">Select some of this text.</p>
+```
+
+```css
+::selection {
+  background: aquamarine;
+  color: black;
+}
+
+.custom-text-selection::selection {
+  background: deeppink;
+  color: white;
+}
+```
diff --git a/snippets/css/s/disable-selection.md b/snippets/css/s/disable-selection.md
new file mode 100644
index 000000000..a7cf8315c
--- /dev/null
+++ b/snippets/css/s/disable-selection.md
@@ -0,0 +1,24 @@
+---
+title: Disable selection
+type: snippet
+language: css
+tags: [interactivity]
+cover: interior-9
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Makes the content unselectable.
+
+- Use `user-select: none` to make the content of the element not selectable.
+- **Note:** This is not a secure method to prevent users from copying content.
+
+```html
+<p>You can select me.</p>
+<p class="unselectable">You can't select me!</p>
+```
+
+```css
+.unselectable {
+  user-select: none;
+}
+```
diff --git a/snippets/css/s/display-empty-links.md b/snippets/css/s/display-empty-links.md
new file mode 100644
index 000000000..be7f52ef2
--- /dev/null
+++ b/snippets/css/s/display-empty-links.md
@@ -0,0 +1,25 @@
+---
+title: Style links with no text
+type: snippet
+language: css
+tags: [visual]
+author: chalarangelo
+cover: metro-tunnel
+dateModified: 2022-11-11T05:00:00-04:00
+---
+
+Displays the link URL for links with no text.
+
+- Use the `:empty` pseudo-class to select links with no text.
+- Use the `:not` pseudo-class to exclude links with text.
+- Use the `content` property and the `attr()` function to display the link URL in the `::before` pseudo-element.
+
+```html
+<a href="https://30secondsofcode.org"></a>
+```
+
+```css
+a[href^="http"]:empty::before {
+  content: attr(href);
+}
+```
diff --git a/snippets/css/s/display-table-centering.md b/snippets/css/s/display-table-centering.md
new file mode 100644
index 000000000..24ca8cbe6
--- /dev/null
+++ b/snippets/css/s/display-table-centering.md
@@ -0,0 +1,42 @@
+---
+title: Display table centering
+type: snippet
+language: css
+tags: [layout]
+cover: malibu
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Vertically and horizontally centers a child element within its parent element, using `display: table`.
+
+- Use `display: table` to make the `.center` element behave like a `<table>` element.
+- Set `height` and `width` to `100%` to make the element fill the available space within its parent element.
+- Use `display: table-cell` on the child element to make it behave like a `<td>` elements.
+- Use `text-align: center` and `vertical-align: middle` on the child element to center it horizontally and vertically.
+- The outer parent (`.container`) must have a fixed `width` and `height`.
+
+```html
+<div class="container">
+  <div class="center"><span>Centered content</span></div>
+</div>
+```
+
+```css
+.container {
+  border: 1px solid #9C27B0;
+  height: 250px;
+  width: 250px;
+}
+
+.center {
+  display: table;
+  height: 100%;
+  width: 100%;
+}
+
+.center > span {
+  display: table-cell;
+  text-align: center;
+  vertical-align: middle;
+}
+```
diff --git a/snippets/css/s/donut-spinner.md b/snippets/css/s/donut-spinner.md
new file mode 100644
index 000000000..fbe58097a
--- /dev/null
+++ b/snippets/css/s/donut-spinner.md
@@ -0,0 +1,38 @@
+---
+title: Donut spinner
+type: snippet
+language: css
+tags: [animation]
+cover: digital-nomad-3
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Creates a donut spinner that can be used to indicate the loading of content.
+
+- Use a semi-transparent `border` for the whole element. Exclude one side that will serve as the loading indicator for the donut.
+- Define and use an appropriate animation, using `transform: rotate()` to rotate the element.
+
+```html
+<div class="donut"></div>
+```
+
+```css
+@keyframes donut-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.donut {
+  display: inline-block;
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-left-color: #7983ff;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  animation: donut-spin 1.2s linear infinite;
+}
+```
diff --git a/snippets/css/s/drop-cap.md b/snippets/css/s/drop-cap.md
new file mode 100644
index 000000000..1d276d277
--- /dev/null
+++ b/snippets/css/s/drop-cap.md
@@ -0,0 +1,29 @@
+---
+title: Drop cap
+type: snippet
+language: css
+tags: [visual]
+cover: bamboo-lamp
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Makes the first letter of the first paragraph bigger than the rest of the text.
+
+- Use the `:first-child` selector to select only the first paragraph.
+- Use the `::first-letter` pseudo-element to style the first element of the paragraph.
+
+```html
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit. Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis libero, rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit amet congue erat sodales commodo.</p>
+<p>Donec magna erat, imperdiet non odio sed, sodales tempus magna. Integer vitae orci lectus. Nullam consectetur orci at pellentesque efficitur.</p>
+```
+
+```css
+p:first-child::first-letter {
+  color: #5f79ff;
+  float: left;
+  margin: 0 8px 0 4px;
+  font-size: 3rem;
+  font-weight: bold;
+  line-height: 1;
+}
+```
diff --git a/snippets/css/s/dynamic-shadow.md b/snippets/css/s/dynamic-shadow.md
new file mode 100644
index 000000000..794ec7579
--- /dev/null
+++ b/snippets/css/s/dynamic-shadow.md
@@ -0,0 +1,41 @@
+---
+title: Dynamic shadow
+type: snippet
+language: css
+tags: [visual]
+cover: couch-laptop
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Creates a shadow similar to `box-shadow` but based on the colors of the element itself.
+
+- Use the `::after` pseudo-element with `position: absolute` and `width` and `height` equal to `100%` to fill the available space in the parent element.
+- Use `background: inherit` to inherit the `background` of the parent element.
+- Use `top` to slightly offset the pseudo-element, `filter: blur()` to create a shadow and `opacity` to make it semi-transparent.
+- Use `z-index: 1` on the parent and `z-index: -1` on the pseudo-element to position it behind its parent.
+
+```html
+<div class="dynamic-shadow"></div>
+```
+
+```css
+.dynamic-shadow {
+  position: relative;
+  width: 10rem;
+  height: 10rem;
+  background: linear-gradient(75deg, #6d78ff, #00ffb8);
+  z-index: 1;
+}
+
+.dynamic-shadow::after {
+  content: '';
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background: inherit;
+  top: 0.5rem;
+  filter: blur(0.4rem);
+  opacity: 0.7;
+  z-index: -1;
+}
+```
diff --git a/snippets/css/s/etched-text.md b/snippets/css/s/etched-text.md
new file mode 100644
index 000000000..9db35d099
--- /dev/null
+++ b/snippets/css/s/etched-text.md
@@ -0,0 +1,27 @@
+---
+title: Etched text
+type: snippet
+language: css
+tags: [visual]
+cover: memories-of-pineapple-2
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Creates an effect where text appears to be "etched" or engraved into the background.
+
+- Use `text-shadow` to create a white shadow offset `0px` horizontally and `2px` vertically from the origin position.
+- The background must be darker than the shadow for the effect to work.
+- The text color should be slightly faded to make it look like it's engraved/carved out of the background.
+
+```html
+<p class="etched-text">I appear etched into the background.</p>
+```
+
+```css
+.etched-text {
+  text-shadow: 0 2px white;
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #b8bec5;
+}
+```
diff --git a/snippets/css/s/evenly-distributed-children.md b/snippets/css/s/evenly-distributed-children.md
new file mode 100644
index 000000000..679c41c3a
--- /dev/null
+++ b/snippets/css/s/evenly-distributed-children.md
@@ -0,0 +1,29 @@
+---
+title: Evenly distributed children
+type: snippet
+language: css
+tags: [layout]
+cover: little-bird
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Evenly distributes child elements within a parent element.
+
+- Use `display: flex` to use the flexbox layout.
+- Use `justify-content: space-between` to evenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.
+- Alternatively, use `justify-content: space-around` to distribute the children with space around them, instead of between them.
+
+```html
+<div class="evenly-distributed-children">
+  <p>Item1</p>
+  <p>Item2</p>
+  <p>Item3</p>
+</div>
+```
+
+```css
+.evenly-distributed-children {
+  display: flex;
+  justify-content: space-between;
+}
+```
diff --git a/snippets/css/s/fit-image-in-container.md b/snippets/css/s/fit-image-in-container.md
new file mode 100644
index 000000000..cc9b8646c
--- /dev/null
+++ b/snippets/css/s/fit-image-in-container.md
@@ -0,0 +1,38 @@
+---
+title: Fit image in container
+type: snippet
+language: css
+tags: [layout,visual]
+cover: succulent-3
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Fits an positions an image appropriately inside its container while preserving its aspect ratio.
+
+- Use `object-fit: contain` to fit the entire image within the container while preserving its aspect ratio.
+- Use `object-fit: cover` to fill the container with the image while preserving its aspect ratio.
+- Use `object-position: center` to position the image at the center of the container.
+
+```html
+<img class="image image-contain" src="https://picsum.photos/600/200" />
+<img class="image image-cover" src="https://picsum.photos/600/200" />
+```
+
+```css
+.image {
+  background: #34495e;
+  border: 1px solid #34495e;
+  width: 200px;
+  height: 200px;
+}
+
+.image-contain {
+  object-fit: contain;
+  object-position: center;
+}
+
+.image-cover {
+  object-fit: cover;
+  object-position: right top;
+}
+```
diff --git a/snippets/css/s/flexbox-centering.md b/snippets/css/s/flexbox-centering.md
new file mode 100644
index 000000000..34bdb9f81
--- /dev/null
+++ b/snippets/css/s/flexbox-centering.md
@@ -0,0 +1,29 @@
+---
+title: Flexbox centering
+type: snippet
+language: css
+tags: [layout]
+cover: basket-paper
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Horizontally and vertically centers a child element within a parent element using flexbox.
+
+- Use `display: flex` to create a flexbox layout.
+- Use `justify-content: center` to center the child horizontally.
+- Use `align-items: center` to center the child vertically.
+
+```html
+<div class="flexbox-centering">
+  <div>Centered content.</div>
+</div>
+```
+
+```css
+.flexbox-centering {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100px;
+}
+```
diff --git a/snippets/css/s/floating-list-titles.md b/snippets/css/s/floating-list-titles.md
new file mode 100644
index 000000000..0263dfa71
--- /dev/null
+++ b/snippets/css/s/floating-list-titles.md
@@ -0,0 +1,106 @@
+---
+title: List with floating section headings
+type: snippet
+language: css
+tags: [visual]
+author: chalarangelo
+cover: pop-of-green
+dateModified: 2021-10-11T18:44:51+03:00
+---
+
+Creates a list with floating headings for each section.
+
+- Use `overflow-y: auto` to allow the list container to overflow vertically.
+- Use `display: grid` on the inner container (`<dl>`) to create a layout with two columns.
+- Set headings (`<dt>`) to `grid-column: 1` and content (`<dd>`) to `grid-column: 2`.
+- Finally, apply `position: sticky` and `top: 0.5rem` to headings to create a floating effect.
+
+```html
+<div class="container">
+  <div class="floating-stack">
+    <dl>
+      <dt>A</dt>
+      <dd>Algeria</dd>
+      <dd>Angola</dd>
+
+      <dt>B</dt>
+      <dd>Benin</dd>
+      <dd>Botswana</dd>
+      <dd>Burkina Faso</dd>
+      <dd>Burundi</dd>
+
+      <dt>C</dt>
+      <dd>Cabo Verde</dd>
+      <dd>Cameroon</dd>
+      <dd>Central African Republic</dd>
+      <dd>Chad</dd>
+      <dd>Comoros</dd>
+      <dd>Congo, Democratic Republic of the</dd>
+      <dd>Congo, Republic of the</dd>
+      <dd>Cote d'Ivoire</dd>
+
+      <dt>D</dt>
+      <dd>Djibouti</dd>
+
+      <dt>E</dt>
+      <dd>Egypt</dd>
+      <dd>Equatorial Guinea</dd>
+      <dd>Eritrea</dd>
+      <dd>Eswatini (formerly Swaziland)</dd>
+      <dd>Ethiopia</dd>
+    </dl>
+  </div>
+</div>
+```
+
+```css
+.container {
+  display: grid;
+  place-items: center;
+  min-height: 400px;
+}
+
+.floating-stack {
+  background: #455A64;
+  color: #fff;
+  height: 80vh;
+  width: 320px;
+  border-radius: 1rem;
+  overflow-y: auto;
+}
+
+.floating-stack > dl {
+  margin: 0 0 1rem;
+  display: grid;
+  grid-template-columns: 2.5rem 1fr;
+  align-items: center;
+}
+
+.floating-stack dt {
+  position: sticky;
+  top: 0.5rem;
+  left: 0.5rem;
+  font-weight: bold;
+  background: #263238;
+  color: #cfd8dc;
+  height: 2rem;
+  width: 2rem;
+  border-radius: 50%;
+  padding: 0.25rem 1rem;
+  grid-column: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.floating-stack dd {
+  grid-column: 2;
+  margin: 0;
+  padding: 0.75rem;
+}
+
+.floating-stack > dl:first-of-type > dd:first-of-type {
+  margin-top: 0.25rem;
+}
+```
diff --git a/snippets/css/s/fluid-typography.md b/snippets/css/s/fluid-typography.md
new file mode 100644
index 000000000..381cd5426
--- /dev/null
+++ b/snippets/css/s/fluid-typography.md
@@ -0,0 +1,24 @@
+---
+title: Fluid typography
+type: snippet
+language: css
+tags: [visual]
+author: chalarangelo
+cover: shell-focus
+dateModified: 2021-05-16T11:23:05+03:00
+---
+
+Creates text that scales according to the viewport width.
+
+- Use the `clamp()` CSS function to clamp the value of `font-size` between `1rem` and `3rem`.
+- Use the formula `8vw - 2rem` to calculate a responsive value for `font-size` (`1rem` at `600px`, `3rem` at `1000px`).
+
+```html
+<p class="fluid-type">Hello World!</p>
+```
+
+```css
+.fluid-type {
+  font-size: clamp(1rem, 8vw - 2rem, 3rem);
+}
+```
diff --git a/snippets/css/s/focus-within.md b/snippets/css/s/focus-within.md
new file mode 100644
index 000000000..aec2255de
--- /dev/null
+++ b/snippets/css/s/focus-within.md
@@ -0,0 +1,43 @@
+---
+title: Focus Within
+type: snippet
+language: css
+tags: [visual,interactivity]
+cover: boats
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Changes the appearance of a form if any of its children are focused.
+
+- Use the pseudo-class `:focus-within` to apply styles to a parent element if any child element gets focused.
+
+```html
+<form>
+  <label for="username">Username:</label>
+  <input id="username" type="text" />
+  <br />
+  <label for="password">Password:</label>
+  <input id="password" type="text" />
+</form>
+```
+
+```css
+form {
+  border: 2px solid #52B882;
+  padding: 8px;
+  border-radius: 2px;
+}
+
+form:focus-within {
+  background: #7CF0BD;
+}
+
+label {
+  display: inline-block;
+  width: 72px;
+}
+
+input {
+  margin: 4px 12px;
+}
+```
diff --git a/snippets/css/s/full-width.md b/snippets/css/s/full-width.md
new file mode 100644
index 000000000..fb721be85
--- /dev/null
+++ b/snippets/css/s/full-width.md
@@ -0,0 +1,59 @@
+---
+title: Full-width image
+type: snippet
+language: css
+tags: [layout]
+author: chalarangelo
+cover: yellow-white-mug-2
+dateModified: 2021-01-07T10:14:46+02:00
+---
+
+Creates a full-width image.
+
+- Use `left: 50%` and `right: 50%` to position the image in the middle of the parent element.
+- Use `margin-left: -50vw` and `margin-right: -50vw` to offset the image on both sides relative to the size of the viewport.
+- Use `width: 100vw` and `max-width: 100vw` to size the image relative to the viewport.
+
+```html
+<main>
+  <h4>Lorem ipsum dolor sit amet</h4>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris molestie
+    lobortis sapien, sit amet iaculis est interdum tincidunt. Nunc egestas nibh
+    ut metus elementum consequat. Integer elit orci, rhoncus efficitur lectus
+    eu, faucibus interdum felis.
+  </p>
+  <p>
+    <img class="full-width" src="https://picsum.photos/id/257/2560/1440.jpg" />
+  </p>
+  <p>
+    Orci varius natoque penatibus et magnis dis parturient montes, nascetur
+    ridiculus mus. Nullam pretium lectus sed ex efficitur, ac varius sapien
+    gravida. Sed facilisis elit quis sem sollicitudin, ut aliquam neque
+    eleifend. Maecenas sagittis neque sapien, ac tempus nulla tempus nec.
+    Curabitur tellus est, convallis id dolor ut, porta hendrerit quam.
+  </p>
+</main>
+```
+
+```css
+main {
+  margin: 0 auto;
+  max-width: 640px;
+}
+
+img {
+  height: auto;
+  max-width: 100%;
+}
+
+.full-width {
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+  max-width: 100vw;
+  width: 100vw;
+}
+```
diff --git a/snippets/css/s/fullscreen.md b/snippets/css/s/fullscreen.md
new file mode 100644
index 000000000..6e91b0ce2
--- /dev/null
+++ b/snippets/css/s/fullscreen.md
@@ -0,0 +1,55 @@
+---
+title: Fullscreen
+type: snippet
+language: css
+tags: [visual]
+cover: flower-portrait-3
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Applies styles to an element when in fullscreen mode.
+
+- Use the `:fullscreen` CSS pseudo-element selector to select and style an element that is displayed in fullscreen mode.
+- Use a `<button>` and `Element.requestFullscreen()` to create a button that makes the element fullscreen for the purposes of previewing the style.
+
+```html
+<div class="container">
+  <p><em>Click the button below to enter the element into fullscreen mode. </em></p>
+  <div class="element" id="element"><p>I change color in fullscreen mode!</p></div>
+  <br />
+  <button onclick="var el = document.getElementById('element'); el.requestFullscreen();">
+    Go Full Screen!
+  </button>
+</div>
+```
+
+```css
+.container {
+  margin: 40px auto;
+  max-width: 700px;
+}
+
+.element {
+  padding: 20px;
+  height: 300px;
+  width: 100%;
+  background-color: skyblue;
+  box-sizing: border-box;
+}
+
+.element p {
+  text-align: center;
+  color: white;
+  font-size: 3em;
+}
+
+.element:-ms-fullscreen p {
+  visibility: visible;
+}
+
+.element:fullscreen {
+  background-color: #e4708a;
+  width: 100vw;
+  height: 100vh;
+}
+```
diff --git a/snippets/css/s/gradient-text.md b/snippets/css/s/gradient-text.md
new file mode 100644
index 000000000..f76517f31
--- /dev/null
+++ b/snippets/css/s/gradient-text.md
@@ -0,0 +1,27 @@
+---
+title: Gradient text
+type: snippet
+language: css
+tags: [visual]
+cover: red-berries
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Gives text a gradient color.
+
+- Use `background` with a `linear-gradient()` value to give the text element a gradient background.
+- Use `webkit-text-fill-color: transparent` to fill the text with a transparent color.
+- Use `webkit-background-clip: text` to clip the background with the text, filling the text with the gradient background as the color.
+
+```html
+<p class="gradient-text">Gradient text</p>
+```
+
+```css
+.gradient-text {
+  background: linear-gradient(#70D6FF, #00072D);
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+  font-size: 32px;
+}
+```
diff --git a/snippets/css/s/grid-centering.md b/snippets/css/s/grid-centering.md
new file mode 100644
index 000000000..dee973bce
--- /dev/null
+++ b/snippets/css/s/grid-centering.md
@@ -0,0 +1,29 @@
+---
+title: Grid centering
+type: snippet
+language: css
+tags: [layout]
+cover: work-hard-computer
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Horizontally and vertically centers a child element within a parent element using `grid`.
+
+- Use `display: grid` to create a grid layout.
+- Use `justify-content: center` to center the child horizontally.
+- Use `align-items: center` to center the child vertically.
+
+```html
+<div class="grid-centering">
+  <div class="child">Centered content.</div>
+</div>
+```
+
+```css
+.grid-centering {
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  height: 100px;
+}
+```
diff --git a/snippets/css/s/hamburger-button.md b/snippets/css/s/hamburger-button.md
new file mode 100644
index 000000000..cd991f63a
--- /dev/null
+++ b/snippets/css/s/hamburger-button.md
@@ -0,0 +1,56 @@
+---
+title: Hamburger Button
+type: snippet
+language: css
+tags: [interactivity]
+cover: volcano-sunset
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Displays a hamburger menu which transitions to a cross button on hover.
+
+- Use a `.hamburger-menu` container `div` which contains the top, bottom, and middle bars.
+- Set the container to `display: flex` with `flex-flow: column wrap`.
+- Add distance between the bars using `justify-content: space-between`.
+- Use `transform: rotate()` to rotate the top and bottom bars by 45 degrees and `opacity: 0` to fade the middle bar on hover.
+- Use `transform-origin: left` so that the bars rotate around the left point.
+
+```html
+<div class="hamburger-menu">
+  <div class="bar top"></div>
+  <div class="bar middle"></div>
+  <div class="bar bottom"></div>
+</div>
+```
+
+```css
+.hamburger-menu {
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: space-between;
+  height: 2.5rem;
+  width: 2.5rem;
+  cursor: pointer;
+}
+
+.hamburger-menu .bar {
+  height: 5px;
+  background: black;
+  border-radius: 5px;
+  margin: 3px 0px;
+  transform-origin: left;
+  transition: all 0.5s;
+}
+
+.hamburger-menu:hover .top {
+  transform: rotate(45deg);
+}
+
+.hamburger-menu:hover .middle {
+  opacity: 0;
+}
+
+.hamburger-menu:hover .bottom {
+  transform: rotate(-45deg);
+}
+```
diff --git a/snippets/css/s/height-transition.md b/snippets/css/s/height-transition.md
new file mode 100644
index 000000000..08903edc6
--- /dev/null
+++ b/snippets/css/s/height-transition.md
@@ -0,0 +1,42 @@
+---
+title: Height transition
+type: snippet
+language: css
+tags: [animation]
+cover: washed-ashore
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Transitions an element's height from `0` to `auto` when its height is unknown.
+
+- Use `transition` to specify that changes to `max-height` should be transitioned over.
+- Use `overflow: hidden` to prevent the contents of the hidden element from overflowing its container.
+- Use `max-height` to specify an initial height of `0`.
+- Use the `:hover` pseudo-class to change the `max-height` to the value of the `--max-height` variable set by JavaScript.
+- Use `Element.scrollHeight` and `CSSStyleDeclaration.setProperty()` to set the value of `--max-height` to the current height of the element.
+- **Note:** Causes reflow on each animation frame, which will be laggy if there are a large number of elements beneath the element that is transitioning in height.
+
+```html
+<div class="trigger">
+  Hover me to see a height transition.
+  <div class="el">Additional content</div>
+</div>
+```
+
+```css
+.el {
+  transition: max-height 0.3s;
+  overflow: hidden;
+  max-height: 0;
+}
+
+.trigger:hover > .el {
+  max-height: var(--max-height);
+}
+```
+
+```js
+let el = document.querySelector('.el');
+let height = el.scrollHeight;
+el.style.setProperty('--max-height', height + 'px');
+```
diff --git a/snippets/css/s/hide-empty-elements.md b/snippets/css/s/hide-empty-elements.md
new file mode 100644
index 000000000..05aafceb0
--- /dev/null
+++ b/snippets/css/s/hide-empty-elements.md
@@ -0,0 +1,23 @@
+---
+title: Hide empty elements
+type: snippet
+language: css
+tags: [visual]
+author: chalarangelo
+cover: metro-arrival
+dateModified: 2022-11-18T05:00:00-04:00
+---
+
+Hides elements with no content.
+
+- Use the `:empty` pseudo-class to select elements with no content.
+
+```html
+<p>Lorem ipsum dolor sit amet. <button></button></p>
+```
+
+```css
+:empty {
+  display: none;
+}
+```
diff --git a/snippets/css/s/hide-scrollbars.md b/snippets/css/s/hide-scrollbars.md
new file mode 100644
index 000000000..b54359735
--- /dev/null
+++ b/snippets/css/s/hide-scrollbars.md
@@ -0,0 +1,37 @@
+---
+title: Hide scroll bars
+type: snippet
+language: css
+tags: [visual]
+author: chalarangelo
+cover: by-the-lighthouse
+dateModified: 2022-05-13T05:00:00-04:00
+---
+
+Hides scrollbars on an element, while still allowing it to be scrollable.
+
+- Use `overflow: auto` to allow the element to be scrollable.
+- Use `scrollbar-width: none` to hide scrollbars on Firefox.
+- Use `display: none` on the `::-webkit-scrollbar` pseudo-element to hide scrollbars on WebKit browsers (Chrome, Edge, Safari).
+
+```html
+<div class="no-scrollbars">
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum id leo a consectetur. Integer justo magna, ultricies vel enim vitae, egestas efficitur leo. Ut nulla orci, rutrum eu augue sed, tempus pellentesque quam.</p>
+</div>
+```
+
+```css
+div {
+  width: 200px;
+  height: 100px;
+}
+
+.no-scrollbars {
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+.no-scrollbars::-webkit-scrollbar {
+  display: none;
+}
+```
diff --git a/snippets/css/s/horizontal-gallery.md b/snippets/css/s/horizontal-gallery.md
new file mode 100644
index 000000000..de0bd01ae
--- /dev/null
+++ b/snippets/css/s/horizontal-gallery.md
@@ -0,0 +1,125 @@
+---
+title: Image gallery with horizontal scroll
+type: snippet
+language: css
+tags: [visual,interactivity]
+cover: flower-portrait-5
+dateModified: 2022-05-01T05:00:00-04:00
+---
+
+Creates a horizontally scrollable image gallery.
+
+- Position the `.thumbnails` at the bottom of the container using `position: absolute`.
+- Use `scroll-snap-type: x mandatory` and `overscroll-behavior-x: contain` to create a snap effect on horizontal scroll. Snap elements to the start of the container using `scroll-snap-align: start`.
+- Hide scrollbars using `scrollbar-width: none` and styling the pseudo-element `::-webkit-scrollbar` to `display: none`.
+- Use `Element.scrollTo()` to define a `scrollToElement` function, that scrolls the gallery to the given item.
+- Use `Array.prototype.map()` and `Array.prototype.join()` to populate the `.thumbnails` element. Give each thumbnail a `data-id` attribute with the index of the image.
+- Use `Document.querySelectorAll()` to get all the thumbnail elements. Use `Array.prototype.forEach()` to register a handler for the `'click'` event on each thumbnail, using `EventTarget.addEventListener()` and the `scrollToElement` function.
+- Use `Document.querySelector()` and `EventTarget.addEventListener()` to register a handler for the `'scroll'` event. Update the `.thumbnails` element to match the current scroll position, using the `highlightThumbnail` function.
+
+```html
+<div class="gallery-container">
+  <div class="thumbnails"></div>
+  <div class="slides">
+    <div><img src="https://picsum.photos/id/1067/540/720"></div>
+    <div><img src="https://picsum.photos/id/122/540/720"></div>
+    <div><img src="https://picsum.photos/id/188/540/720"></div>
+    <div><img src="https://picsum.photos/id/249/540/720"></div>
+    <div><img src="https://picsum.photos/id/257/540/720"></div>
+    <div><img src="https://picsum.photos/id/259/540/720"></div>
+    <div><img src="https://picsum.photos/id/283/540/720"></div>
+    <div><img src="https://picsum.photos/id/288/540/720"></div>
+    <div><img src="https://picsum.photos/id/299/540/720"></div>
+  </div>
+</div>
+```
+
+```css
+.gallery-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.thumbnails {
+  position: absolute;
+  bottom: 8px;
+  display: flex;
+  flex-direction: row;
+  gap: 6px;
+}
+
+.thumbnails div {
+  width: 8px;
+  height: 8px;
+  cursor: pointer;
+  background: #aaa;
+  border-radius: 100%;
+}
+
+.thumbnails div.highlighted {
+  background-color: #777;
+}
+
+.slides {
+  margin: 0 16px;
+  display: grid;
+  grid-auto-flow: column;
+  gap: 1rem;
+  width: 540px;
+  padding: 0 0.25rem;
+  height: 720px;
+  overflow-y: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+}
+
+.slides > div {
+  scroll-snap-align: start;
+}
+
+.slides img {
+  width: 540px;
+  object-fit: contain;
+}
+
+.slides::-webkit-scrollbar {
+  display: none;
+}
+```
+
+```js
+const slideGallery = document.querySelector('.slides');
+const slides = slideGallery.querySelectorAll('div');
+const thumbnailContainer = document.querySelector('.thumbnails');
+const slideCount = slides.length;
+const slideWidth = 540;
+
+const highlightThumbnail = () => {
+  thumbnailContainer
+    .querySelectorAll('div.highlighted')
+    .forEach(el => el.classList.remove('highlighted'));
+  const index = Math.floor(slideGallery.scrollLeft / slideWidth);
+  thumbnailContainer
+    .querySelector(`div[data-id="${index}"]`)
+    .classList.add('highlighted');
+};
+
+const scrollToElement = el => {
+  const index = parseInt(el.dataset.id, 10);
+  slideGallery.scrollTo(index * slideWidth, 0);
+};
+
+thumbnailContainer.innerHTML += [...slides]
+  .map((slide, i) => `<div data-id="${i}"></div>`)
+  .join('');
+
+thumbnailContainer.querySelectorAll('div').forEach(el => {
+  el.addEventListener('click', () => scrollToElement(el));
+});
+
+slideGallery.addEventListener('scroll', e => highlightThumbnail());
+
+highlightThumbnail();
+```
diff --git a/snippets/css/s/horizontal-scroll-snap.md b/snippets/css/s/horizontal-scroll-snap.md
new file mode 100644
index 000000000..9fd2a0768
--- /dev/null
+++ b/snippets/css/s/horizontal-scroll-snap.md
@@ -0,0 +1,54 @@
+---
+title: Horizontal scroll snap
+type: snippet
+language: css
+tags: [interactivity]
+cover: waves-from-above
+dateModified: 2021-10-11T18:44:51+03:00
+---
+
+Creates a horizontally scrollable container that will snap on elements when scrolling.
+
+- Use `display: grid` and `grid-auto-flow: column` to create a horizontal layout.
+- Use `scroll-snap-type: x mandatory` and `overscroll-behavior-x: contain` to create a snap effect on horizontal scroll.
+- Change `scroll-snap-align` to either `start`, `stop` or `center` to change the snap alignment.
+
+```html
+<div class="horizontal-snap">
+  <a href="#"><img src="https://picsum.photos/id/1067/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/122/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/188/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/249/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/257/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/259/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/283/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/288/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/299/640/640"></a>
+</div>
+```
+
+```css
+.horizontal-snap {
+  margin: 0 auto;
+  display: grid;
+  grid-auto-flow: column;
+  gap: 1rem;
+  height: calc(180px + 1rem);
+  padding: 1rem;
+  max-width: 480px;
+  overflow-y: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+}
+
+.horizontal-snap > a {
+  scroll-snap-align: center;
+}
+
+.horizontal-snap img {
+  width: 180px;
+  max-width: none;
+  object-fit: contain;
+  border-radius: 1rem;
+}
+```
diff --git a/snippets/css/s/hover-additional-content.md b/snippets/css/s/hover-additional-content.md
new file mode 100644
index 000000000..8690aab5c
--- /dev/null
+++ b/snippets/css/s/hover-additional-content.md
@@ -0,0 +1,76 @@
+---
+title: Show additional content on hover
+type: snippet
+language: css
+tags: [visual]
+cover: dark-leaves-5
+dateModified: 2021-10-11T18:44:51+03:00
+---
+
+Creates a card that displays additional content on hover.
+
+- Use `overflow: hidden` on the card to hide elements that overflow vertically.
+- Use the `:hover` and `:focus-within` pseudo-class selectors to change the card's styling if the element is hovered, focused or any of its descendants are focused.
+- Set `transition: 0.3s ease all` to create a transition effect on hover/focus.
+
+
+```html
+<div class="card">
+  <img src="https://picsum.photos/id/404/367/267"/>
+  <h3>Lorem ipsum</h3>
+  <div class="focus-content">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/> <a href="#">Link to source</a>
+    </p>
+  </div>
+</div>
+```
+
+```css
+.card {
+  width: 300px;
+  height: 280px;
+  padding: 0;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
+  border-radius: 8px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.card * {
+  transition: 0.3s ease all;
+}
+
+.card img {
+  margin: 0;
+  width: 300px;
+  height: 224px;
+  object-fit: cover;
+  display: block;
+}
+
+.card h3 {
+  margin: 0;
+  padding: 12px 12px 48px;
+  line-height: 32px;
+  font-weight: 500;
+  font-size: 20px;
+}
+
+.card .focus-content {
+  display: block;
+  padding: 8px 12px;
+}
+
+.card p {
+  margin: 0;
+  line-height: 1.5;
+}
+
+.card:hover img, .card:focus-within img {
+  margin-top: -80px;
+}
+
+.card:hover h3, .card:focus-within h3 {
+  padding: 8px 12px 0;
+}
+```
diff --git a/snippets/css/s/hover-perspective.md b/snippets/css/s/hover-perspective.md
new file mode 100644
index 000000000..22086ce55
--- /dev/null
+++ b/snippets/css/s/hover-perspective.md
@@ -0,0 +1,54 @@
+---
+title: Perspective transform on hover
+type: snippet
+language: css
+tags: [animation]
+author: chalarangelo
+cover: tropical-bike
+dateModified: 2021-05-17T13:58:04+03:00
+---
+
+Applies a perspective transform with a hover animation to an element.
+
+- Use `transform` with the `perspective()` and `rotateY()` functions to create a perspective for the element.
+- Use a `transition` to update the `transform` attribute's value on hover.
+- Change the `rotateY()` value to negative to mirror the perspective effect from left to right.
+
+```html
+<div class="card-container">
+  <div class="image-card perspective-left"></div>
+  <div class="image-card perspective-right"></div>
+</div>
+```
+
+```css
+.image-card {
+  display: inline-block;
+  box-sizing: border-box;
+  margin: 1rem;
+  width: 240px;
+  height: 320px;
+  padding: 8px;
+  border-radius: 1rem;
+  background: url("https://picsum.photos/id/1049/240/320");
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
+}
+
+.perspective-left {
+  transform: perspective(1500px) rotateY(15deg);
+  transition: transform 1s ease 0s;
+}
+
+.perspective-left:hover {
+  transform: perspective(3000px) rotateY(5deg);
+}
+
+.perspective-right {
+  transform: perspective(1500px) rotateY(-15deg);
+  transition: transform 1s ease 0s;
+}
+
+.perspective-right:hover {
+  transform: perspective(3000px) rotateY(-5deg);
+}
+```
diff --git a/snippets/css/s/hover-shadow-box-animation.md b/snippets/css/s/hover-shadow-box-animation.md
new file mode 100644
index 000000000..40de4ef68
--- /dev/null
+++ b/snippets/css/s/hover-shadow-box-animation.md
@@ -0,0 +1,39 @@
+---
+title: Hover shadow box animation
+type: snippet
+language: css
+tags: [animation]
+unlisted: true
+cover: dark-cloud
+dateModified: 2021-01-04T12:30:40+02:00
+---
+
+Creates a shadow box around the text when it is hovered.
+
+- Set `transform: perspective(1px)` to give element a 3D space by affecting the distance between the Z plane and the user and `translate(0)` to reposition the `p` element along z-axis in 3D space.
+- Use `box-shadow` to make the box transparent.
+- Use `transition-property` to enable transitions for both `box-shadow` and `transform`.
+- Use the `:hover`, `:active` and `:focus` pseudo-class selectors to apply a new `box-shadow` and `transform: scale(1.2)` to change the scale of the text.
+
+```html
+<p class="hover-shadow-box-animation">Box it!</p>
+```
+
+```css
+.hover-shadow-box-animation {
+  display: inline-block;
+  vertical-align: middle;
+  transform: perspective(1px) translateZ(0);
+  box-shadow: 0 0 1px transparent;
+  margin: 10px;
+  transition-duration: 0.3s;
+  transition-property: box-shadow, transform;
+}
+
+.hover-shadow-box-animation:hover,
+.hover-shadow-box-animation:focus,
+.hover-shadow-box-animation:active {
+  box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
+  transform: scale(1.2);
+}
+```
diff --git a/snippets/css/s/hover-underline-animation.md b/snippets/css/s/hover-underline-animation.md
new file mode 100644
index 000000000..516fea395
--- /dev/null
+++ b/snippets/css/s/hover-underline-animation.md
@@ -0,0 +1,47 @@
+---
+title: Hover underline animation
+type: snippet
+language: css
+tags: [animation]
+cover: coffee-phone-tray-2
+dateModified: 2021-10-11T18:44:51+03:00
+---
+
+Creates an animated underline effect when the user hovers over the text.
+
+- Use `display: inline-block` to make the underline span just the width of the text content.
+- Use the `::after` pseudo-element with `width: 100%` and `position: absolute` to place it below the content.
+- Use `transform: scaleX(0)` to initially hide the pseudo-element.
+- Use the `:hover` pseudo-class selector to apply `transform: scaleX(1)` and display the pseudo-element on hover.
+- Animate `transform` using `transform-origin: left` and an appropriate `transition`.
+- Remove the `transform-origin` property to make the transform originate from the center of the element.
+
+```html
+<p class="hover-underline-animation">Hover this text to see the effect!</p>
+```
+
+```css
+.hover-underline-animation {
+  display: inline-block;
+  position: relative;
+  color: #0087ca;
+}
+
+.hover-underline-animation::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: #0087ca;
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
+}
+
+.hover-underline-animation:hover::after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
+}
+```
diff --git a/snippets/css/s/image-hover-menu.md b/snippets/css/s/image-hover-menu.md
new file mode 100644
index 000000000..ad03d94d4
--- /dev/null
+++ b/snippets/css/s/image-hover-menu.md
@@ -0,0 +1,93 @@
+---
+title: Menu on image hover
+type: snippet
+language: css
+tags: [layout,animation]
+cover: compass
+dateModified: 2021-10-11T18:44:51+03:00
+---
+
+Displays a menu overlay when the user hovers over the image.
+
+- Use a `<figure>` to wrap the `<img>` element and a `<div>` element that will contain the menu links.
+- Use the `opacity` and `right` attributes to animate the image on hover, creating a sliding effect.
+- Set the `left` attribute of the `<div>` to the negative of the element's `width`. Reset it to `0` when hovering over the parent element to slide in the menu.
+- Use `display: flex`, `flex-direction: column` and `justify-content: center` on the `<div>` to vertically center the menu items.
+
+```html
+<figure class="hover-menu">
+	<img src="https://picsum.photos/id/1060/800/480.jpg"/>
+	<div>
+		<a href="#">Home</a>
+		<a href="#">Pricing</a>
+		<a href="#">About</a>
+	</div>
+</figure>
+```
+
+```css
+.hover-menu {
+  position: relative;
+  overflow: hidden;
+  margin: 8px;
+  min-width: 340px;
+  max-width: 480px;
+  max-height: 290px;
+  width: 100%;
+  background: #000;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.hover-menu * {
+  box-sizing: border-box;
+}
+
+.hover-menu img {
+  position: relative;
+  max-width: 100%;
+  top: 0;
+  right: 0;
+  opacity: 1;
+  transition: 0.3s ease-in-out;
+}
+
+.hover-menu div {
+  position: absolute;
+  top: 0;
+  left: -120px;
+  width: 120px;
+  height: 100%;
+  padding: 8px 4px;
+  background: #000;
+  transition: 0.3s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.hover-menu div a {
+  display: block;
+  line-height: 2;
+  color: #fff;
+  text-decoration: none;
+  opacity: 0.8;
+  padding: 5px 15px;
+  position: relative;
+  transition: 0.3s ease-in-out;
+}
+
+.hover-menu div a:hover {
+  text-decoration: underline;
+}
+
+.hover-menu:hover img {
+  opacity: 0.5;
+  right: -120px;
+}
+
+.hover-menu:hover div {
+  left: 0;
+  opacity: 1;
+}
+```
diff --git a/snippets/css/s/image-hover-rotate.md b/snippets/css/s/image-hover-rotate.md
new file mode 100644
index 000000000..f55bdff1e
--- /dev/null
+++ b/snippets/css/s/image-hover-rotate.md
@@ -0,0 +1,39 @@
+---
+title: Image rotate on hover
+type: snippet
+language: css
+tags: [animation,visual]
+cover: succulent-1
+dateModified: 2021-10-11T18:44:51+03:00
+---
+
+Creates a rotate effect for the image on hover.
+
+- Use the `scale()`, `rotate()` and `transition` properties when hovering over the parent element (a `<figure>`) to animate the image.
+- Use `overflow: hidden` on the parent element to hide the excess from the image transformation.
+
+```html
+<figure class="hover-rotate">
+  <img src="https://picsum.photos/id/669/600/800.jpg"/>
+</figure>
+```
+
+```css
+.hover-rotate {
+  overflow: hidden;
+  margin: 8px;
+  min-width: 240px;
+  max-width: 320px;
+  width: 100%;
+}
+
+.hover-rotate img {
+  transition: all 0.3s;
+  box-sizing: border-box;
+  max-width: 100%;
+}
+
+.hover-rotate:hover img {
+  transform: scale(1.3) rotate(5deg);
+}
+```
diff --git a/snippets/css/s/image-mosaic.md b/snippets/css/s/image-mosaic.md
new file mode 100644
index 000000000..3baf79fce
--- /dev/null
+++ b/snippets/css/s/image-mosaic.md
@@ -0,0 +1,108 @@
+---
+title: Responsive image mosaic
+type: snippet
+language: css
+tags: [layout]
+author: chalarangelo
+cover: beach-riders
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Creates a responsive image mosaic.
+
+- Use `display: grid` to create an appropriate responsive grid layout.
+- Use `grid-row: span 2 / auto` and `grid-column: span 2 / auto` to create items that span two rows or two columns respectively.
+- Wrap the previous styles into a media query to avoid applying on small screen sizes.
+
+```html
+<div class="image-mosaic">
+  <div
+    class="card card-tall card-wide"
+    style="background-image: url('https://picsum.photos/id/564/1200/800')"
+  ></div>
+  <div
+    class="card card-tall"
+    style="background-image: url('https://picsum.photos/id/566/800/530')"
+  ></div>
+  <div
+    class="card"
+    style="background-image: url('https://picsum.photos/id/575/800/530')"
+  ></div>
+  <div
+    class="card"
+    style="background-image: url('https://picsum.photos/id/626/800/530')"
+  ></div>
+  <div
+    class="card"
+    style="background-image: url('https://picsum.photos/id/667/800/530')"
+  ></div>
+  <div
+    class="card"
+    style="background-image: url('https://picsum.photos/id/678/800/530')"
+  ></div>
+  <div
+    class="card card-wide"
+    style="background-image: url('https://picsum.photos/id/695/800/530')"
+  ></div>
+  <div
+    class="card"
+    style="background-image: url('https://picsum.photos/id/683/800/530')"
+  ></div>
+  <div
+    class="card"
+    style="background-image: url('https://picsum.photos/id/693/800/530')"
+  ></div>
+  <div
+    class="card"
+    style="background-image: url('https://picsum.photos/id/715/800/530')"
+  ></div>
+  <div
+    class="card"
+    style="background-image: url('https://picsum.photos/id/610/800/530')"
+  ></div>
+  <div
+    class="card"
+    style="background-image: url('https://picsum.photos/id/599/800/530')"
+  ></div>
+</div>
+```
+
+```css
+.image-mosaic {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  grid-auto-rows: 240px;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #353535;
+  font-size: 3rem;
+  color: #fff;
+  box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
+  height: 100%;
+  width: 100%;
+  border-radius: 4px;
+  transition: all 500ms;
+  overflow: hidden;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  padding: 0;
+  margin: 0;
+}
+
+@media screen and (min-width: 600px) {
+  .card-tall {
+    grid-row: span 2 / auto;
+  }
+
+  .card-wide {
+    grid-column: span 2 / auto;
+  }
+}
+```
diff --git a/snippets/css/s/image-overlay-hover.md b/snippets/css/s/image-overlay-hover.md
new file mode 100644
index 000000000..0dc2d02ce
--- /dev/null
+++ b/snippets/css/s/image-overlay-hover.md
@@ -0,0 +1,102 @@
+---
+title: Image overlay on hover
+type: snippet
+language: css
+tags: [visual,animation]
+cover: architectural
+dateModified: 2021-10-11T18:44:51+03:00
+---
+
+Displays an image overlay effect on hover.
+
+- Use the `::before` and `::after` pseudo-elements for the top and bottom bars of the overlay respectively. Set their `opacity`, `transform` and `transition` to produce the desired effect.
+- Use the `<figcaption>` for the text of the overlay. Set `display: flex`, `flex-direction: column` and `justify-content: center` to center the text into the image.
+- Use the `:hover` pseudo-selector to update the `opacity` and `transform` of all the elements and display the overlay.
+
+```html
+<figure class="hover-img">
+  <img src="https://picsum.photos/id/200/440/320.jpg"/>
+  <figcaption>
+    <h3>Lorem <br/>Ipsum</h3>
+  </figcaption>
+</figure>
+```
+
+```css
+.hover-img {
+  background-color: #000;
+  color: #fff;
+  display: inline-block;
+  margin: 8px;
+  max-width: 320px;
+  min-width: 240px;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+
+.hover-img * {
+  box-sizing: border-box;
+  transition: all 0.45s ease;
+}
+
+.hover-img::before,
+.hover-img::after {
+  background-color: rgba(0, 0, 0, 0.5);
+  border-top: 32px solid rgba(0, 0, 0, 0.5);
+  border-bottom: 32px solid rgba(0, 0, 0, 0.5);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  content: '';
+  transition: all 0.3s ease;
+  z-index: 1;
+  opacity: 0;
+  transform: scaleY(2);
+}
+
+.hover-img img {
+  vertical-align: top;
+  max-width: 100%;
+  backface-visibility: hidden;
+}
+
+.hover-img figcaption {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  align-items: center;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  line-height: 1.1em;
+  opacity: 0;
+  z-index: 2;
+  transition-delay: 0.1s;
+  font-size: 24px;
+  font-family: sans-serif;
+  font-weight: 400;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+.hover-img:hover::before,
+.hover-img:hover::after {
+  transform: scale(1);
+  opacity: 1;
+}
+
+.hover-img:hover > img {
+  opacity: 0.7;
+}
+
+.hover-img:hover figcaption {
+  opacity: 1;
+}
+```
diff --git a/snippets/css/s/image-text-overlay.md b/snippets/css/s/image-text-overlay.md
new file mode 100644
index 000000000..2f1a1e98e
--- /dev/null
+++ b/snippets/css/s/image-text-overlay.md
@@ -0,0 +1,57 @@
+---
+title: Image with text overlay
+type: snippet
+language: css
+tags: [visual]
+author: chalarangelo
+cover: icebreaker
+dateModified: 2023-01-29T05:00:00-04:00
+---
+
+Displays an image with a text overlay.
+
+- Use the `<figure>` and `<figcaption>` elements to display the image and the text overlay respectively.
+- Use a `linear-gradient` to create the overlay effect over the image.
+
+```html
+<figure class="text-overlay-image">
+  <img src="https://picsum.photos/id/971/400/400.jpg" />
+  <figcaption>
+    <h3>Business <br/>Pricing</h3>
+  </figcaption>
+</figure>
+```
+
+```css
+.text-overlay-image {
+  box-sizing: border-box;
+  position: relative;
+  margin: 8px;
+  max-width: 400px;
+  max-height: 400px;
+  width: 100%;
+}
+
+.text-overlay-image figcaption {
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  background: linear-gradient(0deg, #00000088 30%, #ffffff44 100%);
+  color: #fff;
+  padding: 16px;
+  font-family: sans-serif;
+  font-weight: 700;
+  line-height: 1.2;
+  font-size: 28px;
+}
+
+.text-overlay-image figcaption h3 {
+  margin: 0;
+}
+```
diff --git a/snippets/css/s/input-with-prefix.md b/snippets/css/s/input-with-prefix.md
new file mode 100644
index 000000000..31a0720c4
--- /dev/null
+++ b/snippets/css/s/input-with-prefix.md
@@ -0,0 +1,54 @@
+---
+title: Input with prefix
+type: snippet
+language: css
+tags: [interactivity,visual]
+cover: flower-portrait-4
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Creates an input with a visual, non-editable prefix.
+
+- Use `display: flex` to create a container element.
+- Remove the border and outline from the `<input>` field. Apply them to the parent element instead to make it look like an input box.
+- Use the `:focus-within` pseudo-class selector to style the parent element accordingly, when the user interacts with the `<input>` field.
+
+```html
+<div class="input-box">
+  <span class="prefix">+30</span>
+  <input type="tel" placeholder="210 123 4567"/>
+</div>
+```
+
+```css
+.input-box {
+  display: flex;
+  align-items: center;
+  max-width: 300px;
+  background: #fff;
+  border: 1px solid #a0a0a0;
+  border-radius: 4px;
+  padding-left: 0.5rem;
+  overflow: hidden;
+  font-family: sans-serif;
+}
+
+.input-box .prefix {
+  font-weight: 300;
+  font-size: 14px;
+  color: #999;
+}
+
+.input-box input {
+  flex-grow: 1;
+  font-size: 14px;
+  background: #fff;
+  border: none;
+  outline: none;
+  padding: 0.5rem;
+}
+
+.input-box:focus-within {
+  border-color: #777;
+}
+```
diff --git a/snippets/css/s/isometric-card.md b/snippets/css/s/isometric-card.md
new file mode 100644
index 000000000..5ceefa693
--- /dev/null
+++ b/snippets/css/s/isometric-card.md
@@ -0,0 +1,40 @@
+---
+title: Isometric card
+type: snippet
+language: css
+tags: [visual]
+author: chalarangelo
+cover: guitar-living-room
+dateModified: 2021-05-17T14:04:52+03:00
+---
+
+Creates an isometric card.
+
+- Use `transform` with `rotateX()` and `rotateY()` as well as a `box-shadow` to create an isometric card.
+- Use `transition` to animate the card, creating a lift effect when the user hovers over it.
+
+```html
+<div class="isometric-card"></div>
+```
+
+```css
+.isometric-card {
+  margin: 0 auto;
+  transform: rotateX(51deg) rotateZ(43deg);
+  transform-style: preserve-3d;
+  background-color: #fcfcfc;
+  will-change: transform;
+  width: 240px;
+  height: 320px;
+  border-radius: 2rem;
+  box-shadow: 1px 1px 0 1px #f9f9fb, -1px 0 28px 0 rgba(34, 33, 81, 0.01),
+    28px 28px 28px 0 rgba(34, 33, 81, 0.25);
+  transition: 0.4s ease-in-out transform, 0.3s ease-in-out box-shadow;
+}
+
+.isometric-card:hover {
+  transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
+  box-shadow: 1px 1px 0 1px #f9f9fb, -1px 0 28px 0 rgba(34, 33, 81, 0.01),
+    54px 54px 28px -10px rgba(34, 33, 81, 0.15);
+}
+```
diff --git a/snippets/css/s/line-clamp.md b/snippets/css/s/line-clamp.md
new file mode 100644
index 000000000..72269a39d
--- /dev/null
+++ b/snippets/css/s/line-clamp.md
@@ -0,0 +1,30 @@
+---
+title: Trim multiline text
+type: snippet
+language: css
+tags: [layout,visual]
+author: chalarangelo
+cover: pink-flower-tree
+dateModified: 2021-05-16T20:19:13+03:00
+---
+
+Limit multiline text to a given number of lines.
+
+- Use `-webkit-line-clamp` to set the maximum number of lines to be displayed.
+- Set `display` to `-webkit-box` and `-webkit-box-orient` to `vertical`, as they are required for `-webkit-line-clamp` to be applied.
+- Apply `overflow: hidden` to hide any overflow after the text is trimmed.
+
+```html
+<p class="excerpt">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod enim eget ultricies sollicitudin. Nunc aliquam arcu arcu, non suscipit metus luctus id. Aliquam sodales turpis ipsum, in vehicula dui tempor sit amet. Nullam quis urna erat. Pellentesque mattis dolor purus. Aliquam nisl urna, tempor a euismod a, placerat in mauris. Phasellus neque quam, dapibus quis nunc at, feugiat suscipit tortor. Duis vel posuere dolor. Phasellus risus erat, lobortis et mi vel, viverra faucibus lectus. Etiam ut posuere sapien. Nulla ultrices dui turpis, interdum consectetur urna tempus at.
+</p>
+```
+
+```css
+.excerpt {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+```
diff --git a/snippets/css/s/masonry-layout.md b/snippets/css/s/masonry-layout.md
new file mode 100644
index 000000000..dcf1bf595
--- /dev/null
+++ b/snippets/css/s/masonry-layout.md
@@ -0,0 +1,97 @@
+---
+title: Masonry Layout
+type: snippet
+language: css
+tags: [layout]
+cover: interior-2
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Creates a masonry-style layout that is especially useful when working with images.
+
+- Create a masonry-style layout that consists of "bricks" that fall into each other with either a fixed `width` (vertical layout) or a fixed `height` (horizontal layout), forming a perfect fit. Especially useful when working with images.
+- Define `.masonry-container` This is the container for the masonry layout and `.masonry-columns`, an inner container in which `.masonry-brick` elements will be placed.
+- Apply `display: block` to `.masonry-brick` elements to allow the layout to flow properly.
+- Use the `:first-child` pseudo-element selector to apply a different `margin` for the first element to account for its positioning.
+- Use CSS variables and media queries for greater flexibility and responsiveness.
+
+```html
+<div class="masonry-container">
+  <div class="masonry-columns">
+    <img
+      class="masonry-brick"
+      src="https://picsum.photos/id/1016/384/256"
+      alt="An image"
+    />
+    <img
+      class="masonry-brick"
+      src="https://picsum.photos/id/1025/495/330"
+      alt="Another image"
+    />
+    <img
+      class="masonry-brick"
+      src="https://picsum.photos/id/1024/192/128"
+      alt="Another image"
+    />
+    <img
+      class="masonry-brick"
+      src="https://picsum.photos/id/1028/518/345"
+      alt="One more image"
+    />
+    <img
+      class="masonry-brick"
+      src="https://picsum.photos/id/1035/585/390"
+      alt="And another one"
+    />
+    <img
+      class="masonry-brick"
+      src="https://picsum.photos/id/1074/384/216"
+      alt="Last one"
+    />
+  </div>
+</div>
+```
+
+```css
+/* Container */
+.masonry-container {
+  --column-count-small: 1;
+  --column-count-medium: 2;
+  --column-count-large: 3;
+  --column-gap: 0.125rem;
+  padding: var(--column-gap);
+}
+
+/* Columns */
+.masonry-columns {
+  column-gap: var(--column-gap);
+  column-count: var(--column-count-small);
+  column-width: calc(1 / var(--column-count-small) * 100%);
+}
+
+@media only screen and (min-width: 640px) {
+  .masonry-columns {
+    column-count: var(--column-count-medium);
+    column-width: calc(1 / var(--column-count-medium) * 100%);
+  }
+}
+
+@media only screen and (min-width: 800px) {
+  .masonry-columns {
+    column-count: var(--column-count-large);
+    column-width: calc(1 / var(--column-count-large) * 100%);
+  }
+}
+
+/* Bricks */
+.masonry-brick {
+  width: 100%;
+  height: auto;
+  margin: var(--column-gap) 0;
+  display: block;
+}
+
+.masonry-brick:first-child {
+  margin: 0 0 var(--column-gap);
+}
+```
diff --git a/snippets/css/s/mouse-cursor-gradient-tracking.md b/snippets/css/s/mouse-cursor-gradient-tracking.md
new file mode 100644
index 000000000..0d11b91fc
--- /dev/null
+++ b/snippets/css/s/mouse-cursor-gradient-tracking.md
@@ -0,0 +1,68 @@
+---
+title: Mouse cursor gradient tracking
+type: snippet
+language: css
+tags: [visual,interactivity]
+cover: tram-car
+dateModified: 2021-01-07T23:52:15+02:00
+---
+
+A hover effect where the gradient follows the mouse cursor.
+
+- Declare two CSS variables, `--x` and `--y`, used to track the position of the mouse on the button.
+- Declare a CSS variable, `--size`, used to modify the gradient's dimensions.
+- Use `background: radial-gradient(circle closest-side, pink, transparent)` to create the gradient at the correct position.
+- Use `Document.querySelector()` and `EventTarget.addEventListener()` to register a handler for the `'mousemove'` event.
+- Use `Element.getBoundingClientRect()` and `CSSStyleDeclaration.setProperty()` to update the values of the `--x` and `--y` CSS variables.
+
+```html
+<button class="mouse-cursor-gradient-tracking">
+  <span>Hover me</span>
+</button>
+```
+
+```css
+.mouse-cursor-gradient-tracking {
+  position: relative;
+  background: #7983ff;
+  padding: 0.5rem 1rem;
+  font-size: 1.2rem;
+  border: none;
+  color: white;
+  cursor: pointer;
+  outline: none;
+  overflow: hidden;
+}
+
+.mouse-cursor-gradient-tracking span {
+  position: relative;
+}
+
+.mouse-cursor-gradient-tracking::before {
+  --size: 0;
+  content: '';
+  position: absolute;
+  left: var(--x);
+  top: var(--y);
+  width: var(--size);
+  height: var(--size);
+  background: radial-gradient(circle closest-side, pink, transparent);
+  transform: translate(-50%, -50%);
+  transition: width 0.2s ease, height 0.2s ease;
+}
+
+.mouse-cursor-gradient-tracking:hover::before {
+  --size: 200px;
+}
+```
+
+```js
+let btn = document.querySelector('.mouse-cursor-gradient-tracking');
+btn.addEventListener('mousemove', e => {
+  let rect = e.target.getBoundingClientRect();
+  let x = e.clientX - rect.left;
+  let y = e.clientY - rect.top;
+  btn.style.setProperty('--x', x + 'px');
+  btn.style.setProperty('--y', y + 'px');
+});
+```
diff --git a/snippets/css/s/navigation-list-item-hover-and-focus-effect.md b/snippets/css/s/navigation-list-item-hover-and-focus-effect.md
new file mode 100644
index 000000000..340d4082c
--- /dev/null
+++ b/snippets/css/s/navigation-list-item-hover-and-focus-effect.md
@@ -0,0 +1,65 @@
+---
+title: Navigation list item hover and focus effect
+type: snippet
+language: css
+tags: [visual]
+cover: cloudy-rock-formation
+dateModified: 2021-10-11T18:44:51+03:00
+---
+
+Creates a custom hover and focus effect for navigation items, using CSS transformations.
+
+- Use the `::before` pseudo-element at the list item anchor to create a hover effect. Hide it using `transform: scale(0)`.
+- Use the `:hover` and `:focus` pseudo-class selectors to transition the pseudo-element to `transform: scale(1)` and show its colored background.
+- Prevent the pseudo-element from covering the anchor element by using `z-index`.
+
+```html
+<nav class="hover-nav">
+  <ul>
+    <li><a href="#">Home</a></li>
+    <li><a href="#">About</a></li>
+    <li><a href="#">Contact</a></li>
+  </ul>
+</nav>
+```
+
+```css
+.hover-nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.hover-nav li {
+  float: left;
+}
+
+.hover-nav li a {
+  position: relative;
+  display: block;
+  color: #fff;
+  text-align: center;
+  padding: 8px 12px;
+  text-decoration: none;
+  z-index: 0;
+}
+
+li a::before {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  bottom: 0;
+  left: 0;
+  background-color: #2683f6;
+  z-index: -1;
+  transform: scale(0);
+  transition: transform 0.5s ease-in-out;
+}
+
+li a:hover::before,
+li a:focus::before {
+  transform: scale(1);
+}
+```
diff --git a/snippets/css/s/offscreen.md b/snippets/css/s/offscreen.md
new file mode 100644
index 000000000..f907fdc66
--- /dev/null
+++ b/snippets/css/s/offscreen.md
@@ -0,0 +1,35 @@
+---
+title: Offscreen
+type: snippet
+language: css
+tags: [layout,visual]
+cover: succulent-2
+dateModified: 2021-10-11T18:44:51+03:00
+---
+
+Hides an element completely (visually and positionally) in the DOM while still allowing it to be accessible.
+
+- Remove all borders and padding and hide the element's overflow.
+- Use `clip` to define that no part of the element is shown.
+- Make the `height` and `width` of the element `1px` and negate them using `margin: -1px`.
+- Use `position: absolute` so that the element does not take up space in the DOM.
+- **Note:** This technique provides an accessible and layout-friendly alternative to `display: none` (not readable by screen readers) and `visibility: hidden` (takes up physical space in the DOM).
+
+```html
+<a class="button" href="https://google.com">
+  Learn More <span class="offscreen"> about pants</span>
+</a>
+```
+
+```css
+.offscreen {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+```
diff --git a/snippets/css/s/overflow-scroll-gradient.md b/snippets/css/s/overflow-scroll-gradient.md
new file mode 100644
index 000000000..ebeb2ed7f
--- /dev/null
+++ b/snippets/css/s/overflow-scroll-gradient.md
@@ -0,0 +1,54 @@
+---
+title: Overflow scroll gradient
+type: snippet
+language: css
+tags: [visual]
+cover: memories-of-pineapple-1
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.
+
+- Use the `::after` pseudo-element to create a `linear-gradient()` that fades from `transparent` to `white` (top to bottom).
+- Use `position: absolute`, `width` and `height` to place and size the pseudo-element in its parent.
+- Use `pointer-events: none` to exclude the pseudo-element from mouse events, allowing text behind it to still be selectable/interactive.
+
+```html
+<div class="overflow-scroll-gradient">
+  <div class="overflow-scroll-gradient-scroller">
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
+    Iure id exercitationem nulla qui repellat laborum vitae, <br />
+    molestias tempora velit natus. Quas, assumenda nisi. <br />
+    Quisquam enim qui iure, consequatur velit sit? <br />
+    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
+    Iure id exercitationem nulla qui repellat laborum vitae, <br />
+    molestias tempora velit natus. Quas, assumenda nisi. <br />
+    Quisquam enim qui iure, consequatur velit sit?
+  </div>
+</div>
+```
+
+```css
+.overflow-scroll-gradient {
+  position: relative;
+}
+
+.overflow-scroll-gradient::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  width: 250px;
+  height: 25px;
+  background: linear-gradient(transparent, white);
+  pointer-events: none;
+}
+
+.overflow-scroll-gradient-scroller {
+  overflow-y: scroll;
+  background: white;
+  width: 240px;
+  height: 200px;
+  padding: 15px;
+  line-height: 1.2;
+}
+```
diff --git a/snippets/css/s/polka-dot-pattern.md b/snippets/css/s/polka-dot-pattern.md
new file mode 100644
index 000000000..408a631b0
--- /dev/null
+++ b/snippets/css/s/polka-dot-pattern.md
@@ -0,0 +1,32 @@
+---
+title: Polka dot background pattern
+type: snippet
+language: css
+tags: [visual]
+cover: bag-waiting
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Creates a polka dot background pattern.
+
+- Use `background-color` to set a black background.
+- Use `background-image` with two `radial-gradient()` values to create two dots.
+- Use `background-size` to specify the pattern's size. Use `background-position` to appropriately place the two gradients.
+- **Note:** The fixed `height` and `width` of the element is for demonstration purposes only.
+
+```html
+<div class="polka-dot"></div>
+```
+
+```css
+.polka-dot {
+  width: 240px;
+  height: 240px;
+  background-color: #000;
+  background-image: radial-gradient(#fff 10%, transparent 11%),
+    radial-gradient(#fff 10%, transparent 11%);
+  background-size: 60px 60px;
+  background-position: 0 0, 30px 30px;
+  background-repeat: repeat;
+}
+```
diff --git a/snippets/css/s/popout-menu.md b/snippets/css/s/popout-menu.md
new file mode 100644
index 000000000..aac466d26
--- /dev/null
+++ b/snippets/css/s/popout-menu.md
@@ -0,0 +1,44 @@
+---
+title: Popout menu
+type: snippet
+language: css
+tags: [interactivity]
+cover: city-view
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Reveals an interactive popout menu on hover/focus.
+
+- Use `left: 100%` to move the popout menu to the right of the parent.
+- Use `visibility: hidden` to hide the popout menu initially, allowing for transitions to be applied (unlike `display: none`).
+- Use the `:hover`, `:focus` and `:focus-within` pseudo-class selectors to apply `visibility: visible` to the popout menu, displaying it when the parent element is hovered/focused.
+
+```html
+<div class="reference" tabindex="0">
+  <div class="popout-menu">Popout menu</div>
+</div>
+```
+
+```css
+.reference {
+  position: relative;
+  background: tomato;
+  width: 100px;
+  height: 80px;
+}
+
+.popout-menu {
+  position: absolute;
+  visibility: hidden;
+  left: 100%;
+  background: #9C27B0;
+  color: white;
+  padding: 16px;
+}
+
+.reference:hover > .popout-menu,
+.reference:focus > .popout-menu,
+.reference:focus-within > .popout-menu {
+  visibility: visible;
+}
+```
diff --git a/snippets/css/s/pretty-text-underline.md b/snippets/css/s/pretty-text-underline.md
new file mode 100644
index 000000000..f5daf1144
--- /dev/null
+++ b/snippets/css/s/pretty-text-underline.md
@@ -0,0 +1,45 @@
+---
+title: Pretty text underline
+type: snippet
+language: css
+tags: [visual]
+cover: flower-portrait-6
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Provides a nicer alternative to `text-decoration: underline` where descenders do not clip the underline.
+
+- Use `text-shadow` to apply 4 values with offsets covering a 4x4 `px` area. This ensures the underline has a thick shadow that covers the line where descenders clip it. For best results, use a color that matches the `background` and adjust the `px` values for larger fonts.
+- Use `background-image` with `linear-gradient()` and `currentColor` to create a gradient that will act as the actual underline.
+- Set `background-position`, `background-repeat` and `background-size` to place the gradient in the correct position.
+- Use the `::selection` pseudo-class selector to ensure the text shadow does not interfere with text selection.
+- **Note:** This is natively implemented as `text-decoration-skip-ink: auto` but it has less control over the underline.
+
+```html
+<div class="container">
+  <p class="pretty-text-underline">Pretty text underline without clipping descenders.</p>
+</div>
+```
+
+```css
+.container {
+  background: #f5f6f9;
+  color: #333;
+  padding: 8px 0;
+}
+
+.pretty-text-underline {
+  display: inline;
+  text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9,
+    1px -1px #f5f6f9;
+  background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
+  background-position: bottom;
+  background-repeat: no-repeat;
+  background-size: 100% 1px;
+}
+
+.pretty-text-underline::selection {
+  background-color: rgba(0, 150, 255, 0.3);
+  text-shadow: none;
+}
+```
diff --git a/snippets/css/s/pulse-loader.md b/snippets/css/s/pulse-loader.md
new file mode 100644
index 000000000..e10f757d7
--- /dev/null
+++ b/snippets/css/s/pulse-loader.md
@@ -0,0 +1,58 @@
+---
+title: Pulse loader
+type: snippet
+language: css
+tags: [animation]
+cover: digital-nomad-8
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Creates a pulse effect loader animation using the `animation-delay` property.
+
+- Use `@keyframes` to define an animation at two points in the cycle. At the start (`0%`), the two `<div>` elements have no `width` or `height` and are positioned at the center. At the end (`100%`), both `<div>` elements have increased `width` and `height`, but their `position` is reset to `0`.
+- Use `opacity` to transition from `1` to `0` when animating to give the `<div>` elements a disappearing effect as they expand.
+- Set a predefined `width` and `height` for the parent container, `.ripple-loader` and use `position: relative` to position its children.
+- Use `animation-delay` on the second `<div>` element, so that each element starts its animation at a different time.
+
+```html
+<div class="ripple-loader">
+  <div></div>
+  <div></div>
+</div>
+```
+
+```css
+.ripple-loader {
+  position: relative;
+  width: 64px;
+  height: 64px;
+}
+
+.ripple-loader div {
+  position: absolute;
+  border: 4px solid #454ADE;
+  border-radius: 50%;
+  animation: ripple-loader 1s ease-out infinite;
+}
+
+.ripple-loader div:nth-child(2) {
+  animation-delay: -0.5s;
+}
+
+@keyframes ripple-loader {
+  0% {
+    top: 32px;
+    left: 32px;
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+  100% {
+    top: 0;
+    left: 0;
+    width: 64px;
+    height: 64px;
+    opacity: 0;
+  }
+}
+```
diff --git a/snippets/css/s/reset-all-styles.md b/snippets/css/s/reset-all-styles.md
new file mode 100644
index 000000000..d0d6539b2
--- /dev/null
+++ b/snippets/css/s/reset-all-styles.md
@@ -0,0 +1,30 @@
+---
+title: Reset all styles
+type: snippet
+language: css
+tags: [visual]
+cover: rocky-beach-2
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Resets all styles to default values using only one property.
+
+- Use the `all` property to reset all styles (inherited or not) to their default values.
+- **Note:** This will not affect `direction` and `unicode-bidi` properties.
+
+```html
+<div class="reset-all-styles">
+  <h5>Title</h5>
+  <p>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id
+    exercitationem nulla qui repellat laborum vitae, molestias tempora velit
+    natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?
+  </p>
+</div>
+```
+
+```css
+.reset-all-styles {
+  all: initial;
+}
+```
diff --git a/snippets/css/s/responsive-layout-sidebar.md b/snippets/css/s/responsive-layout-sidebar.md
new file mode 100644
index 000000000..80a9998df
--- /dev/null
+++ b/snippets/css/s/responsive-layout-sidebar.md
@@ -0,0 +1,47 @@
+---
+title: Responsive layout with sidebar
+type: snippet
+language: css
+tags: [layout]
+author: chalarangelo
+cover: red-petals
+dateModified: 2020-09-16T18:54:56+03:00
+---
+
+Creates a responsive layout with a content area and a sidebar.
+
+- Use `display: grid` on the parent container, to create a grid layout.
+- Use `minmax()` for the second column (sidebar) to allow it to take up between `150px` and `20%`.
+- Use `1fr` for the first column (main content) to take up the rest of the remaining space.
+
+```html
+<div class="container">
+  <main>
+    This element is 1fr large.
+  </main>
+  <aside>
+    Min: 150px / Max: 20%
+  </aside>
+</div>
+```
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: 1fr minmax(150px, 20%);
+  height: 100px;
+}
+
+main, aside {
+  padding: 12px;
+  text-align: center;
+}
+
+main {
+  background: #d4f2c4;
+}
+
+aside {
+  background: #81cfd9;
+}
+```
diff --git a/snippets/css/s/rotating-card.md b/snippets/css/s/rotating-card.md
new file mode 100644
index 000000000..55e93dcc7
--- /dev/null
+++ b/snippets/css/s/rotating-card.md
@@ -0,0 +1,70 @@
+---
+title: Rotating Card
+type: snippet
+language: css
+tags: [animation]
+cover: digital-nomad-11
+dateModified: 2021-03-30T15:24:01+03:00
+---
+
+Creates a two sided card which rotates on hover.
+
+- Set the `backface-visibility` of the cards to none.
+- Initially, set `rotateY()` for the back side of the card to `-180deg` and the front side to `0deg`.
+- Upon hover, set `rotateY()` for the front side to `180deg` and backside to `0deg`.
+- Set the appropriate `perspective` value to create the rotate effect.
+
+```html
+<div class="card">
+  <div class="card-side front">
+    <div>Front Side</div>
+  </div>
+  <div class="card-side back">
+    <div>Back Side</div>
+  </div>
+</div>
+```
+
+```css
+.card {
+  perspective: 150rem;
+  position: relative;
+  height: 40rem;
+  max-width: 400px;
+  margin: 2rem;
+  box-shadow: none;
+  background: none;
+}
+
+.card-side {
+  height: 35rem;
+  border-radius: 15px;
+  transition: all 0.8s ease;
+  backface-visibility: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 80%;
+  padding: 2rem;
+  color: white;
+}
+
+.card-side.back {
+  transform: rotateY(-180deg);
+  background-color: #4158D0;
+  background-image: linear-gradient(43deg, #4158D0 0%,#C850C0 46%, #FFCC70 100%);
+}
+
+.card-side.front {
+  background-color: #0093E9;
+  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
+}
+
+.card:hover .card-side.front {
+  transform: rotateY(180deg);
+}
+
+.card:hover .card-side.back {
+  transform: rotateY(0deg);
+}
+```
diff --git a/snippets/css/s/scroll-progress-bar.md b/snippets/css/s/scroll-progress-bar.md
new file mode 100644
index 000000000..736dbba49
--- /dev/null
+++ b/snippets/css/s/scroll-progress-bar.md
@@ -0,0 +1,45 @@
+---
+title: Scroll progress bar
+type: snippet
+language: css
+tags: [animation,visual]
+author: chalarangelo
+cover: coworking-space
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Creates a progress bar indicating the scroll percentage of the page.
+
+- Use `position: fixed` and a large `z-index` value to place the element at the top of the page and above any content.
+- Use `EventTarget.addEventListener()` and `Element.scrollTop` to determine the scroll percentage of the document and apply it to the `width` of the element.
+
+```html
+<div id="scroll-progress"></div>
+```
+
+```css
+body {
+  min-height: 200vh;
+}
+
+#scroll-progress {
+  position: fixed;
+  top: 0;
+  width: 0%;
+  height: 4px;
+  background: #7983ff;
+  z-index: 10000;
+}
+```
+
+```js
+const scrollProgress = document.getElementById('scroll-progress');
+const height =
+  document.documentElement.scrollHeight - document.documentElement.clientHeight;
+
+window.addEventListener('scroll', () => {
+  const scrollTop =
+    document.body.scrollTop || document.documentElement.scrollTop;
+  scrollProgress.style.width = `${(scrollTop / height) * 100}%`;
+});
+```
diff --git a/snippets/css/s/shake-invalid-input.md b/snippets/css/s/shake-invalid-input.md
new file mode 100644
index 000000000..5131f8a17
--- /dev/null
+++ b/snippets/css/s/shake-invalid-input.md
@@ -0,0 +1,40 @@
+---
+title: Shake on invalid input
+type: snippet
+language: css
+tags: [animation]
+cover: perfect-timing
+dateModified: 2022-07-31T18:30:11+03:00
+---
+
+Creates a shake animation on invalid input.
+
+- Use the `pattern` attribute to define the regular expression which the input's value must match.
+- Use `@keyframes` to define a shake animation, using the `margin-left` property.
+- Use the `:invalid` pseudo-class to apply an `animation` to make the element shake.
+
+```html
+ <input type="text" placeholder="Letters only" pattern="[A-Za-z]*" />
+```
+
+```css
+@keyframes shake {
+  0% {
+    margin-left: 0rem;
+  }
+  25% {
+    margin-left: 0.5rem;
+  }
+  75% {
+    margin-left: -0.5rem;
+  }
+  100% {
+    margin-left: 0rem;
+  }
+}
+
+input:invalid {
+  animation: shake 0.2s ease-in-out 0s 2;
+  box-shadow: 0 0 0.6rem #ff0000;
+}
+```
diff --git a/snippets/css/s/shape-separator.md b/snippets/css/s/shape-separator.md
new file mode 100644
index 000000000..1d7be76b5
--- /dev/null
+++ b/snippets/css/s/shape-separator.md
@@ -0,0 +1,36 @@
+---
+title: Shape separator
+type: snippet
+language: css
+tags: [visual]
+unlisted: true
+cover: shapes
+dateModified: 2021-01-04T12:30:40+02:00
+---
+
+Uses an SVG shape to create a separator between two different blocks.
+
+- Use the `::after` pseudo-element to create the separator element.
+- Use `background-image` to add the SVG (a 24x12 triangle) shape via a data URI. The background image will repeat by default, covering the whole area of the pseudo-element.
+- Use the `background` of the parent element to set the desired color for the separator.
+
+```html
+<div class="shape-separator"></div>
+```
+
+```css
+.shape-separator {
+  position: relative;
+  height: 48px;
+  background: #9C27B0;
+}
+
+.shape-separator::after {
+  content: '';
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='transparent'/%3E%3C/svg%3E");
+  position: absolute;
+  width: 100%;
+  height: 12px;
+  bottom: 0;
+}
+```
diff --git a/snippets/css/s/shifting-card.md b/snippets/css/s/shifting-card.md
new file mode 100644
index 000000000..dfdb68eec
--- /dev/null
+++ b/snippets/css/s/shifting-card.md
@@ -0,0 +1,79 @@
+---
+title: Shifting Card
+type: snippet
+language: css
+tags: [animation]
+author: chalarangelo
+cover: clouds-n-mountains
+dateModified: 2022-12-14T05:00:00-04:00
+---
+
+Creates a card that shifts on hover.
+
+- Set the appropriate `perspective` on the `.container` element to allow for the shifting effect.
+- Add a `transition` for the `transform` property of the `.card` element.
+- Use `Document.querySelector()` to select the `.card` element and add event listeners for the `mousemove` and `mouseout` events.
+- Use `Element.getBoundingClientRect()` to get the `x`, `y`, `width`, and `height` of the `.card` element.
+- Calculate the relative distance as a value between `-1` and `1` for the `x` and `y` axes and apply it through the `transform` property.
+
+```html
+<div class="container">
+  <div class="shifting-card">
+    <div class="content">
+      <h3>Card</h3>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellat, consequuntur doloribus voluptate esse iure?</p>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.container {
+  display: flex;
+  padding: 24px;
+  justify-content: center;
+  align-items: center;
+  background: #f3f1fe;
+}
+
+.shifting-card {
+  width: 350px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #fff;
+  border-radius: 10px;
+  margin: 0.5rem;
+  transition: transform 0.2s ease-out;
+  box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.1);
+}
+
+.shifting-card .content {
+  text-align: center;
+  margin: 2rem;
+  line-height: 1.5;
+  color: #101010;
+}
+```
+
+```js
+const card = document.querySelector('.shifting-card');
+const { x, y, width, height } = card.getBoundingClientRect();
+const cx = x + width / 2;
+const cy = y + height / 2;
+
+const handleMove = e => {
+  const { pageX, pageY } = e;
+  const dx = (cx - pageX) / (width / 2);
+  const dy = (cy - pageY) / (height / 2);
+  e.target.style.transform =
+    `rotateX(${10 * dy * -1}deg) rotateY(${10 * dx}deg)`;
+};
+
+const handleOut = e => {
+  e.target.style.transform = 'initial';
+};
+
+card.addEventListener('mousemove', handleMove);
+card.addEventListener('mouseout', handleOut);
+```
diff --git a/snippets/css/s/sibling-fade.md b/snippets/css/s/sibling-fade.md
new file mode 100644
index 000000000..d7e103925
--- /dev/null
+++ b/snippets/css/s/sibling-fade.md
@@ -0,0 +1,31 @@
+---
+title: Sibling fade
+type: snippet
+language: css
+tags: [interactivity]
+cover: messy-papers
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Fades out the siblings of a hovered item.
+
+- Use a `transition` to animate changes to `opacity`.
+- Use the `:hover` and `:not` pseudo-class selectors to change the `opacity` of all elements except for the one the mouse is over to `0.5`.
+
+```html
+<div class="sibling-fade">
+  <span>Item 1</span> <span>Item 2</span> <span>Item 3</span>
+  <span>Item 4</span> <span>Item 5</span> <span>Item 6</span>
+</div>
+```
+
+```css
+span {
+  padding: 0 16px;
+  transition: opacity 0.3s;
+}
+
+.sibling-fade:hover span:not(:hover) {
+  opacity: 0.5;
+}
+```
diff --git a/snippets/css/s/squiggle-link-hover-effect.md b/snippets/css/s/squiggle-link-hover-effect.md
new file mode 100644
index 000000000..65327ea61
--- /dev/null
+++ b/snippets/css/s/squiggle-link-hover-effect.md
@@ -0,0 +1,34 @@
+---
+title: Squiggle link hover effect
+type: snippet
+language: css
+tags: [animation,visual]
+author: chalarangelo
+cover: dreamy-flowers
+dateModified: 2023-01-10T05:00:00-04:00
+---
+
+Creates a squiggle effect when hovering over a link.
+
+- Create a repeating background for the link using a `linear-gradient`.
+- Create a `:hover` state for the link with a `background-image` of a data URL containing an SVG with a squiggly path and an animation.
+
+```html
+<p>The <a class="squiggle" href="#">magnificent octopus</a> swam along gracefully.</p>
+```
+
+```css
+a.squiggle {
+  background: linear-gradient(to bottom, #0087ca 0%, #0087ca 100%);
+  background-position: 0 100%;
+  background-repeat: repeat-x;
+  background-size: 2px 2px;
+  color: inherit;
+  text-decoration: none;
+}
+
+a.squiggle:hover {
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-15px);}}%3C/style%3E%3Cpath fill='none' stroke='%230087ca' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
+  background-size: auto 4px;
+}
+```
diff --git a/snippets/css/s/staggered-animation.md b/snippets/css/s/staggered-animation.md
new file mode 100644
index 000000000..27f08a30d
--- /dev/null
+++ b/snippets/css/s/staggered-animation.md
@@ -0,0 +1,68 @@
+---
+title: Staggered animation
+type: snippet
+language: css
+tags: [animation]
+cover: aerial-view-port
+dateModified: 2021-10-11T18:44:51+03:00
+---
+
+Creates a staggered animation for the elements of a list.
+
+- Set `opacity: 0` and `transform: translateX(100%)` to make list elements transparent and move them all the way to the right.
+- Specify the same `transition` properties for list elements, except `transition-delay`.
+- Use inline styles to specify a value for `--i` for each list element. This will in turn be used for `transition-delay` to create the stagger effect.
+- Use the `:checked` pseudo-class selector for the checkbox to style list elements. Set `opacity` to `1` and `transform` to `translateX(0)` to make them appear and slide into view.
+
+```html
+<div class="container">
+  <input type="checkbox" name="menu" id="menu" class="menu-toggler">
+  <label for="menu" class="menu-toggler-label">Menu</label>
+  <ul class="stagger-menu">
+    <li style="--i: 0">Home</li>
+    <li style="--i: 1">Pricing</li>
+    <li style="--i: 2">Account</li>
+    <li style="--i: 3">Support</li>
+    <li style="--i: 4">About</li>
+  </ul>
+</div>
+```
+
+```css
+.container {
+  overflow-x: hidden;
+  width: 100%;
+}
+
+.menu-toggler {
+  display: none;
+}
+
+.menu-toggler-label {
+  cursor: pointer;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.stagger-menu {
+  list-style-type: none;
+  margin: 16px 0;
+  padding: 0;
+}
+
+.stagger-menu li {
+  margin-bottom: 8px;
+  font-size: 18px;
+  opacity: 0;
+  transform: translateX(100%);
+  transition-property: opacity, transform;
+  transition-duration: 0.3s;
+  transition-timing-function: cubic-bezier(0.750, -0.015, 0.565, 1.055);
+}
+
+.menu-toggler:checked ~ .stagger-menu li {
+  opacity: 1;
+  transform: translateX(0);
+  transition-delay: calc(0.055s * var(--i));
+}
+```
diff --git a/snippets/css/s/sticky-list-titles.md b/snippets/css/s/sticky-list-titles.md
new file mode 100644
index 000000000..9cdcc443b
--- /dev/null
+++ b/snippets/css/s/sticky-list-titles.md
@@ -0,0 +1,85 @@
+---
+title: List with sticky section headings
+type: snippet
+language: css
+tags: [visual]
+author: chalarangelo
+cover: interior-7
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Creates a list with sticky headings for each section.
+
+- Use `overflow-y: auto` to allow the list container (`<dl>`) to overflow vertically.
+- Set headings (`<dt>`) `position` to `sticky` and apply `top: 0` to stick to the top of the container.
+
+```html
+<div class="container">
+  <dl class="sticky-stack">
+    <dt>A</dt>
+    <dd>Algeria</dd>
+    <dd>Angola</dd>
+
+    <dt>B</dt>
+    <dd>Benin</dd>
+    <dd>Botswana</dd>
+    <dd>Burkina Faso</dd>
+    <dd>Burundi</dd>
+
+    <dt>C</dt>
+    <dd>Cabo Verde</dd>
+    <dd>Cameroon</dd>
+    <dd>Central African Republic</dd>
+    <dd>Chad</dd>
+    <dd>Comoros</dd>
+    <dd>Congo, Democratic Republic of the</dd>
+    <dd>Congo, Republic of the</dd>
+    <dd>Cote d'Ivoire</dd>
+
+    <dt>D</dt>
+    <dd>Djibouti</dd>
+
+    <dt>E</dt>
+    <dd>Egypt</dd>
+    <dd>Equatorial Guinea</dd>
+    <dd>Eritrea</dd>
+    <dd>Eswatini (formerly Swaziland)</dd>
+    <dd>Ethiopia</dd>
+  </dl>
+</div>
+```
+
+```css
+.container {
+  display: grid;
+  place-items: center;
+  min-height: 400px;
+}
+
+.sticky-stack {
+  background: #37474f;
+  color: #fff;
+  margin: 0;
+  height: 320px;
+  border-radius: 1rem;
+  overflow-y: auto;
+}
+
+.sticky-stack dt {
+  position: sticky;
+  top: 0;
+  font-weight: bold;
+  background: #263238;
+  color: #cfd8dc;
+  padding: 0.25rem 1rem;
+}
+
+.sticky-stack dd {
+  margin: 0;
+  padding: 0.75rem 1rem;
+}
+
+.sticky-stack dd + dt {
+  margin-top: 1rem;
+}
+```
diff --git a/snippets/css/s/stripes-pattern.md b/snippets/css/s/stripes-pattern.md
new file mode 100644
index 000000000..72652b3e1
--- /dev/null
+++ b/snippets/css/s/stripes-pattern.md
@@ -0,0 +1,30 @@
+---
+title: Stripes background pattern
+type: snippet
+language: css
+tags: [visual]
+cover: jars-on-shelf
+dateModified: 2021-01-11T09:51:43+02:00
+---
+
+Creates a stripes background pattern.
+
+- Use `background-color` to set a white background.
+- Use `background-image` with a `radial-gradient()` value to create a vertical stripe.
+- Use `background-size` to specify the pattern's size.
+- **Note:** The fixed `height` and `width` of the element is for demonstration purposes only.
+
+```html
+<div class="stripes"></div>
+```
+
+```css
+.stripes {
+  width: 240px;
+  height: 240px;
+  background-color: #fff;
+  background-image: linear-gradient(90deg, transparent 50%, #000 50%);
+  background-size: 60px 60px;
+  background-repeat: repeat;
+}
+```
diff --git a/snippets/css/s/stylized-quotation-marks.md b/snippets/css/s/stylized-quotation-marks.md
new file mode 100644
index 000000000..0f45a23ea
--- /dev/null
+++ b/snippets/css/s/stylized-quotation-marks.md
@@ -0,0 +1,25 @@
+---
+title: Stylized quotation marks
+type: snippet
+language: css
+tags: [visual]
+author: chalarangelo
+cover: coffee-phone-tray
+dateModified: 2021-05-16T19:53:02+03:00
+---
+
+Customizes the style of inline quotation marks.
+
+- Use the `quotes` property to customize the characters used for the opening and closing quotes of a `<q>` element.
+
+```html
+<p>
+  <q>Do or do not, there is no try.</q> – Yoda
+</p>
+```
+
+```css
+q {
+  quotes: "“" "”";
+}
+```
diff --git a/snippets/css/s/system-font-stack.md b/snippets/css/s/system-font-stack.md
new file mode 100644
index 000000000..dff12d83d
--- /dev/null
+++ b/snippets/css/s/system-font-stack.md
@@ -0,0 +1,35 @@
+---
+title: System font stack
+type: snippet
+language: css
+tags: [visual]
+cover: lavender-shelf
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Uses the native font of the operating system to get close to a native app feel.
+
+- Define a list of fonts using `font-family`.
+- The browser looks for each successive font, preferring the first one if possible, and falls back to the next if it cannot find the font (on the system or defined in CSS).
+- `-apple-system` is San Francisco, used on iOS and macOS (not Chrome however).
+- `BlinkMacSystemFont` is San Francisco, used on macOS Chrome.
+- `'Segoe UI'` is used on Windows 10.
+- `Roboto` is used on Android.
+- `Oxygen-Sans` is used on Linux with KDE.
+- `Ubuntu` is used on Ubuntu (all variants).
+- `Cantarell` is used on Linux with GNOME Shell.
+- `'Helvetica Neue'` and `Helvetica` is used on macOS 10.10 and below.
+- `Arial` is a font widely supported by all operating systems.
+- `sans-serif` is the fallback sans serif font if none of the other fonts are supported.
+
+```html
+<p class="system-font-stack">This text uses the system font.</p>
+```
+
+```css
+.system-font-stack {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
+    sans-serif;
+}
+```
diff --git a/snippets/css/s/text-backdrop-overlay.md b/snippets/css/s/text-backdrop-overlay.md
new file mode 100644
index 000000000..aef1f7ce0
--- /dev/null
+++ b/snippets/css/s/text-backdrop-overlay.md
@@ -0,0 +1,37 @@
+---
+title: Image text overlay
+type: snippet
+language: css
+tags: [visual]
+author: chalarangelo
+cover: mountain-lake-cottage
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Displays a text on top of an image using an overlay.
+
+- Use `backdrop-filter` to apply a `blur(14px)` and `brightness(80%)` effect. This makes text readable regardless of background image and color.
+
+```html
+<div>
+  <h3 class="text-overlay">Hello, World</h3>
+  <img src="https://picsum.photos/id/1050/1200/800">
+</div>
+```
+
+```css
+div {
+  position: relative;
+}
+
+.text-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 1rem;
+  font-size: 2rem;
+  font-weight: 300;
+  color: white;
+  backdrop-filter: blur(14px) brightness(80%);
+}
+```
diff --git a/snippets/css/s/tile-layout-using-inline-block.md b/snippets/css/s/tile-layout-using-inline-block.md
new file mode 100644
index 000000000..323c4e1cb
--- /dev/null
+++ b/snippets/css/s/tile-layout-using-inline-block.md
@@ -0,0 +1,49 @@
+---
+title: 3-tile layout
+type: snippet
+language: css
+tags: [layout]
+cover: godray-computer-mug
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Aligns items horizontally using `display: inline-block` to create a 3-tile layout.
+
+- Use `display: inline-block` to create a tiled layout, without using `float`, `flex` or `grid`.
+- Use `width` in combination with `calc` to divide the width of the container evenly into 3 columns.
+- Set `font-size` for `.tiles` to `0` to avoid whitespace and to `20px` for `<h2>` elements to display the text.
+- **Note:** If you use relative units (e.g. `em`), using `font-size: 0` to fight whitespace between blocks might cause side effects.
+
+```html
+<div class="tiles">
+  <div class="tile">
+    <img src="https://via.placeholder.com/200x150">
+    <h2>30 Seconds of CSS</h2>
+  </div>
+  <div class="tile">
+    <img src="https://via.placeholder.com/200x150">
+    <h2>30 Seconds of CSS</h2>
+  </div>
+  <div class="tile">
+    <img src="https://via.placeholder.com/200x150">
+    <h2>30 Seconds of CSS</h2>
+  </div>
+</div>
+```
+
+```css
+.tiles {
+  width: 600px;
+  font-size: 0;
+  margin: 0 auto;
+}
+
+.tile {
+  width: calc(600px / 3);
+  display: inline-block;
+}
+
+.tile h2 {
+  font-size: 20px;
+}
+```
diff --git a/snippets/css/s/toggle-switch.md b/snippets/css/s/toggle-switch.md
new file mode 100644
index 000000000..bc4f02005
--- /dev/null
+++ b/snippets/css/s/toggle-switch.md
@@ -0,0 +1,57 @@
+---
+title: Toggle switch
+type: snippet
+language: css
+tags: [visual,interactivity]
+cover: interior-5
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Creates a toggle switch with CSS only.
+
+- Use the `for` attribute to associate the `<label>` with the checkbox `<input>` element.
+- Use the `::after` pseudo-element of the `<label>` to create a circular knob for the switch.
+- Use the `:checked` pseudo-class selector to change the position of the knob, using `transform: translateX(20px)` and the `background-color` of the switch.
+- Use `position: absolute` and `left: -9999px` to visually hide the `<input>` element.
+
+```html
+<input type="checkbox" id="toggle" class="offscreen" />
+<label for="toggle" class="switch"></label>
+```
+
+```css
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+  background-color: rgba(0, 0, 0, 0.25);
+  border-radius: 20px;
+  transition: all 0.3s;
+}
+
+.switch::after {
+  content: '';
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  border-radius: 18px;
+  background-color: white;
+  top: 1px;
+  left: 1px;
+  transition: all 0.3s;
+}
+
+input[type='checkbox']:checked + .switch::after {
+  transform: translateX(20px);
+}
+
+input[type='checkbox']:checked + .switch {
+  background-color: #7983ff;
+}
+
+.offscreen {
+  position: absolute;
+  left: -9999px;
+}
+```
diff --git a/snippets/css/s/transform-centering.md b/snippets/css/s/transform-centering.md
new file mode 100644
index 000000000..564cd4a01
--- /dev/null
+++ b/snippets/css/s/transform-centering.md
@@ -0,0 +1,38 @@
+---
+title: Transform centering
+type: snippet
+language: css
+tags: [layout]
+cover: flower-camera
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Vertically and horizontally centers a child element within its parent element using CSS transforms.
+
+- Set the `position` of the parent to `relative` and that of the child to `absolute` to place it in relation to its parent.
+- Use `left: 50%` and `top: 50%` to offset the child 50% from the left and top edge of the containing block.
+- Use `transform: translate(-50%, -50%)` to negate its position, so that it is vertically and horizontally centered.
+- **Note:** The fixed `height` and `width` of the parent element is for demonstration purposes only.
+
+```html
+<div class="parent">
+  <div class="child">Centered content</div>
+</div>
+```
+
+```css
+.parent {
+  border: 1px solid #9C27B0;
+  height: 250px;
+  position: relative;
+  width: 250px;
+}
+
+.child {
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+```
diff --git a/snippets/css/s/triangle.md b/snippets/css/s/triangle.md
new file mode 100644
index 000000000..85811deb5
--- /dev/null
+++ b/snippets/css/s/triangle.md
@@ -0,0 +1,29 @@
+---
+title: Triangle
+type: snippet
+language: css
+tags: [visual]
+cover: yellow-white-mug-1
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Creates a triangular shape with pure CSS.
+
+- Use three borders to create a triangle shape.
+- All borders should have the same `border-width` (`20px`).
+- The opposite side of where the triangle points towards (i.e. top if the triangle points downwards) should have the desired `border-color`. The adjacent borders (i.e. left and right) should have a `border-color` of `transparent`.
+- Altering the `border-width` values will change the proportions of the triangle.
+
+```html
+<div class="triangle"></div>
+```
+
+```css
+.triangle {
+  width: 0;
+  height: 0;
+  border-top: 20px solid #9C27B0;
+  border-left: 20px solid transparent;
+  border-right: 20px solid transparent;
+}
+```
diff --git a/snippets/css/s/truncate-text-multiline.md b/snippets/css/s/truncate-text-multiline.md
new file mode 100644
index 000000000..fcaa7da79
--- /dev/null
+++ b/snippets/css/s/truncate-text-multiline.md
@@ -0,0 +1,48 @@
+---
+title: Truncate multiline text
+type: snippet
+language: css
+tags: [layout]
+cover: blue-computer
+dateModified: 2021-01-07T23:52:15+02:00
+---
+
+Truncates text that is longer than one line.
+
+- Use `overflow: hidden` to prevent the text from overflowing its dimensions.
+- Set a fixed `width` to ensure the element has at least one constant dimension.
+- Set `height: 109.2px` as calculated from the `font-size`, using the formula `font-size * line-height * numberOfLines` (in this case `26 * 1.4 * 3 = 109.2`).
+- Set `height: 36.4px` as calculated for the gradient container, based on the formula `font-size * line-height` (in this case `26 * 1.4 = 36.4`).
+- Use `background` with `linear-gradient()` to create a gradient from `transparent` to the `background-color`.
+
+```html
+<p class="truncate-text-multiline">
+  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+  eirmod tempor invidunt ut labore et.
+</p>
+```
+
+```css
+.truncate-text-multiline {
+  position: relative;
+  overflow: hidden;
+  display: block;
+  height: 109.2px;
+  margin: 0 auto;
+  font-size: 26px;
+  line-height: 1.4;
+  width: 400px;
+  background: #f5f6f9;
+  color: #333;
+}
+
+.truncate-text-multiline::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 150px;
+  height: 36.4px;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);
+}
+```
diff --git a/snippets/css/s/truncate-text.md b/snippets/css/s/truncate-text.md
new file mode 100644
index 000000000..660210cf5
--- /dev/null
+++ b/snippets/css/s/truncate-text.md
@@ -0,0 +1,29 @@
+---
+title: Truncate text
+type: snippet
+language: css
+tags: [layout]
+cover: houses-rock-sea
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Truncates text that is longer than one line, adding an ellipsis at the end (`…`).
+
+- Use `overflow: hidden` to prevent the text from overflowing its dimensions.
+- Use `white-space: nowrap` to prevent the text from exceeding one line in height.
+- Use `text-overflow: ellipsis` to make it so that if the text exceeds its dimensions, it will end with an ellipsis.
+- Specify a fixed `width` for the element to know when to display an ellipsis.
+- Only works for single line elements.
+
+```html
+<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>
+```
+
+```css
+.truncate-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 200px;
+}
+```
diff --git a/snippets/css/s/typewriter-effect.md b/snippets/css/s/typewriter-effect.md
new file mode 100644
index 000000000..e1c6f35f1
--- /dev/null
+++ b/snippets/css/s/typewriter-effect.md
@@ -0,0 +1,69 @@
+---
+title: Typewriter effect
+type: snippet
+language: css
+tags: [animation]
+author: chalarangelo
+cover: italian-horizon
+dateModified: 2021-05-24T16:03:40+03:00
+---
+
+Creates a typewriter effect animation.
+
+- Define two animations, `typing` to animate the characters and `blink` to animate the caret.
+- Use the `::after` pseudo-element to add the caret to the container element.
+- Use JavaScript to set the text for the inner element and set the `--characters` variable containing the character count. This variable is used to animate the text.
+- Use `white-space: nowrap` and `overflow: hidden` to make content invisible as necessary.
+
+```html
+<div class="typewriter-effect">
+  <div class="text" id="typewriter-text"></div>
+</div>
+```
+
+```css
+.typewriter-effect {
+  display: flex;
+  justify-content: center;
+  font-family: monospace;
+}
+
+.typewriter-effect > .text {
+  max-width: 0;
+  animation: typing 3s steps(var(--characters)) infinite;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.typewriter-effect::after {
+  content: " |";
+  animation: blink 1s infinite;
+  animation-timing-function: step-end;
+}
+
+@keyframes typing {
+  75%,
+  100% {
+    max-width: calc(var(--characters) * 1ch);
+  }
+}
+
+@keyframes blink {
+  0%,
+  75%,
+  100% {
+    opacity: 1;
+  }
+  25% {
+    opacity: 0;
+  }
+}
+```
+
+```js
+const typeWriter = document.getElementById('typewriter-text');
+const text = 'Lorem ipsum dolor sit amet.';
+
+typeWriter.innerHTML = text;
+typeWriter.style.setProperty('--characters', text.length);
+```
diff --git a/snippets/css/s/vertical-gallery.md b/snippets/css/s/vertical-gallery.md
new file mode 100644
index 000000000..401be8a7b
--- /dev/null
+++ b/snippets/css/s/vertical-gallery.md
@@ -0,0 +1,133 @@
+---
+title: Image gallery with vertical scroll
+type: snippet
+language: css
+tags: [visual,interactivity]
+cover: lake-loop
+dateModified: 2022-05-05T05:00:00-04:00
+---
+
+Creates a horizontally scrollable image gallery.
+
+- Use `display: flex` and `justify-content: center` to setup the layout for the container.
+- Use `display: flex` and `flex-direction: column` to setup the layout for the slides.
+- Use `scroll-snap-type: y mandatory` and `overscroll-behavior-y: contain` to create a snap effect on vertical scroll. Snap elements to the start of the container using `scroll-snap-align: start`.
+- Hide scrollbars using `scrollbar-width: none` and styling the pseudo-element `::-webkit-scrollbar` to `display: none`.
+- Use `Element.scrollTo()` to define a `scrollToElement` function, that scrolls the gallery to the given item.
+- Use `Array.prototype.map()` and `Array.prototype.join()` to populate the `.thumbnails` element. Give each thumbnail a `data-id` attribute with the index of the image.
+- Use `Document.querySelectorAll()` to get all the thumbnail elements. Use `Array.prototype.forEach()` to register a handler for the `'click'` event on each thumbnail, using `EventTarget.addEventListener()` and the `scrollToElement` function.
+- Use `Document.querySelector()` and `EventTarget.addEventListener()` to register a handler for the `'scroll'` event. Update the `.thumbnails` and `.scrollbar` elements to match the current scroll position, using the `scrollThumb` function.
+
+```html
+<div class="gallery-container">
+  <div class="thumbnails"></div>
+  <div class="scrollbar">
+    <div class="thumb"></div>
+  </div>
+  <div class="slides">
+    <div><img src="https://picsum.photos/id/1067/540/720"></div>
+    <div><img src="https://picsum.photos/id/122/540/720"></div>
+    <div><img src="https://picsum.photos/id/188/540/720"></div>
+    <div><img src="https://picsum.photos/id/249/540/720"></div>
+    <div><img src="https://picsum.photos/id/257/540/720"></div>
+    <div><img src="https://picsum.photos/id/259/540/720"></div>
+    <div><img src="https://picsum.photos/id/283/540/720"></div>
+    <div><img src="https://picsum.photos/id/288/540/720"></div>
+    <div><img src="https://picsum.photos/id/299/540/720"></div>
+  </div>
+</div>
+```
+
+```css
+.gallery-container {
+  display: flex;
+  justify-content: center;
+}
+
+.thumbnails {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.thumbnails img {
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+}
+
+.scrollbar {
+  width: 1px;
+  height: 720px;
+  background: #ccc;
+  display: block;
+  margin: 0 0 0 8px;
+}
+
+.thumb {
+  width: 1px;
+  position: absolute;
+  height: 0;
+  background: #000;
+}
+
+.slides {
+  margin: 0 16px;
+  display: grid;
+  grid-auto-flow: row;
+  gap: 1rem;
+  width: calc(540px + 1rem);
+  padding: 0 0.25rem;
+  height: 720px;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  scroll-snap-type: y mandatory;
+  scrollbar-width: none;
+}
+
+.slides > div {
+  scroll-snap-align: start;
+}
+
+.slides img {
+  width: 540px;
+  object-fit: contain;
+}
+
+.slides::-webkit-scrollbar {
+  display: none;
+}
+```
+
+```js
+const slideGallery = document.querySelector('.slides');
+const slides = slideGallery.querySelectorAll('div');
+const scrollbarThumb = document.querySelector('.thumb');
+const slideCount = slides.length;
+const slideHeight = 720;
+const marginTop = 16;
+
+const scrollThumb = () => {
+  const index = Math.floor(slideGallery.scrollTop / slideHeight);
+  scrollbarThumb.style.height = `${((index + 1) / slideCount) * slideHeight}px`;
+};
+
+const scrollToElement = el => {
+  const index = parseInt(el.dataset.id, 10);
+  slideGallery.scrollTo(0, index * slideHeight + marginTop);
+};
+
+document.querySelector('.thumbnails').innerHTML += [...slides]
+  .map(
+    (slide, i) => `<img src="${slide.querySelector('img').src}" data-id="${i}">`
+  )
+  .join('');
+
+document.querySelectorAll('.thumbnails img').forEach(el => {
+  el.addEventListener('click', () => scrollToElement(el));
+});
+
+slideGallery.addEventListener('scroll', e => scrollThumb());
+
+scrollThumb();
+```
diff --git a/snippets/css/s/vertical-scroll-snap.md b/snippets/css/s/vertical-scroll-snap.md
new file mode 100644
index 000000000..21ed8a15c
--- /dev/null
+++ b/snippets/css/s/vertical-scroll-snap.md
@@ -0,0 +1,53 @@
+---
+title: Vertical scroll snap
+type: snippet
+language: css
+tags: [interactivity]
+cover: baloons-field
+dateModified: 2020-08-18T14:25:46+03:00
+---
+
+Creates a scrollable container that will snap on elements when scrolling.
+
+- Use `display: grid` and `grid-auto-flow: row` to create a vertical layout.
+- Use `scroll-snap-type: y mandatory` and `overscroll-behavior-y: contain` to create a snap effect on vertical scroll.
+- You can use `scroll-snap-align` with either `start`, `stop` or `center` to change the snap alignment.
+
+```html
+<div class="vertical-snap">
+  <a href="#"><img src="https://picsum.photos/id/1067/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/122/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/188/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/249/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/257/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/259/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/283/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/288/640/640"></a>
+  <a href="#"><img src="https://picsum.photos/id/299/640/640"></a>
+</div>
+```
+
+```css
+.vertical-snap {
+  margin: 0 auto;
+  display: grid;
+  grid-auto-flow: row;
+  gap: 1rem;
+  width: calc(180px + 1rem);
+  padding: 1rem;
+  height: 480px;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  scroll-snap-type: y mandatory;
+}
+
+.vertical-snap > a {
+  scroll-snap-align: center;
+}
+
+.vertical-snap img {
+  width: 180px;
+  object-fit: contain;
+  border-radius: 1rem;
+}
+```
diff --git a/snippets/css/s/zebra-striped-list.md b/snippets/css/s/zebra-striped-list.md
new file mode 100644
index 000000000..04d884f84
--- /dev/null
+++ b/snippets/css/s/zebra-striped-list.md
@@ -0,0 +1,29 @@
+---
+title: Zebra striped list
+type: snippet
+language: css
+tags: [visual]
+cover: forest-balcony
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Creates a striped list with alternating background colors.
+
+- Use the `:nth-child(odd)` or `:nth-child(even)` pseudo-class selectors to apply a different `background-color` to elements that match based on their position in a group of siblings.
+- **Note:** You can use it to apply different styles to other HTML elements like `<div>`, `<tr>`, `<p>`, `<ol>`, etc.
+
+```html
+<ul>
+  <li>Item 01</li>
+  <li>Item 02</li>
+  <li>Item 03</li>
+  <li>Item 04</li>
+  <li>Item 05</li>
+</ul>
+```
+
+```css
+li:nth-child(odd) {
+  background-color: #999;
+}
+```
diff --git a/snippets/css/s/zig-zag-pattern.md b/snippets/css/s/zig-zag-pattern.md
new file mode 100644
index 000000000..bb0b36590
--- /dev/null
+++ b/snippets/css/s/zig-zag-pattern.md
@@ -0,0 +1,34 @@
+---
+title: Zig zag background pattern
+type: snippet
+language: css
+tags: [visual]
+cover: blue-lake
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Creates a zig zag background pattern.
+
+- Use `background-color` to set a white background.
+- Use `background-image` with four `linear-gradient()` values to create the parts of a zig zag pattern.
+- Use `background-size` to specify the pattern's size. Use `background-position` to place the parts of the pattern in the correct locations.
+- **Note:** The fixed `height` and `width` of the element is for demonstration purposes only.
+
+```html
+<div class="zig-zag"></div>
+```
+
+```css
+.zig-zag {
+  width: 240px;
+  height: 240px;
+  background-color: #fff;
+  background-image: linear-gradient(135deg, #000 25%, transparent 25%),
+    linear-gradient(225deg, #000 25%, transparent 25%),
+    linear-gradient(315deg, #000 25%, transparent 25%),
+    linear-gradient(45deg, #000 25%, transparent 25%);
+  background-position: -30px 0, -30px 0, 0 0, 0 0;
+  background-size: 60px 60px;
+  background-repeat: repeat;
+}
+```
diff --git a/snippets/css/s/zoomin-zoomout-animation.md b/snippets/css/s/zoomin-zoomout-animation.md
new file mode 100644
index 000000000..0238d0ede
--- /dev/null
+++ b/snippets/css/s/zoomin-zoomout-animation.md
@@ -0,0 +1,40 @@
+---
+title: Zoom in zoom out animation
+type: snippet
+language: css
+tags: [animation]
+cover: travel-mug-2
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Creates a zoom in zoom out animation.
+
+- Use `@keyframes` to define a three-step animation. At the start (`0%`) and end (`100%`), the element is its original size (`scale(1 ,1)`). Halfway through (`50%`) it's scaled up to 1.5 times its original size (`scale(1.5, 1.5)`).
+- Use `width` and `height` to give the element a specific size.
+- Use `animation` to set the appropriate values for the element to make it animated.
+
+```html
+<div class="zoom-in-out-box"></div>
+```
+
+```css
+.zoom-in-out-box {
+  margin: 24px;
+  width: 50px;
+  height: 50px;
+  background: #f50057;
+  animation: zoom-in-zoom-out 1s ease infinite;
+}
+
+@keyframes zoom-in-zoom-out {
+  0% {
+    transform: scale(1, 1);
+  }
+  50% {
+    transform: scale(1.5, 1.5);
+  }
+  100% {
+    transform: scale(1, 1);
+  }
+}
+```
diff --git a/snippets/css/template.md b/snippets/css/template.md
new file mode 100644
index 000000000..b566cd4f2
--- /dev/null
+++ b/snippets/css/template.md
@@ -0,0 +1,32 @@
+---
+title: Snippet Name
+type: snippet
+language: css
+tags: [other]
+cover: image
+dateModified: 2021-06-13T05:00:00-04:00
+---
+
+Explain briefly what the snippet does.
+
+- Explain briefly how the snippet works.
+- Use bullet points for your snippet's explanation.
+- Try to explain everything briefly but clearly.
+
+```html
+<div class="my-snippet"></div>
+```
+
+```css
+.my-snippet {
+  background-color: #fff;
+  border: 1px solid #000;
+  border-radius: 4px;
+}
+```
+
+```js
+console.log(
+  "This is optional, if your snippet doesn't require JavaScript, be sure to delete this block!"
+)
+```
diff --git a/snippets/git/s/add-submodule.md b/snippets/git/s/add-submodule.md
new file mode 100644
index 000000000..04cf33777
--- /dev/null
+++ b/snippets/git/s/add-submodule.md
@@ -0,0 +1,23 @@
+---
+title: Add a submodule
+type: snippet
+language: git
+tags: [repository,submodule]
+author: chalarangelo
+cover: rocky-mountains
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Adds a new submodule to the repository.
+
+- Use `git submodule add <upstream-path> <local-path>` to add a new submodule from `<upstream-path>` to `<local-path>`.
+
+```shell
+git submodule add <upstream-path> <local-path>
+```
+
+```shell
+git submodule add https://github.com/30-seconds/30-seconds-of-code ./30code
+# Creates the directory `30code` containing the submodule from
+# "https://github.com/30-seconds/30-seconds-of-code"
+```
diff --git a/snippets/git/s/apply-latest-stash.md b/snippets/git/s/apply-latest-stash.md
new file mode 100644
index 000000000..225c11dd5
--- /dev/null
+++ b/snippets/git/s/apply-latest-stash.md
@@ -0,0 +1,21 @@
+---
+title: Apply the latest stash
+type: snippet
+language: git
+tags: [repository,stash]
+author: chalarangelo
+cover: palm-tree-house
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Applies the latest stash.
+
+- Use `git stash apply` to apply the latest stash.
+
+```shell
+git stash apply <stash>
+```
+
+```shell
+git stash apply # Applies the latest stash
+```
diff --git a/snippets/git/s/apply-stash.md b/snippets/git/s/apply-stash.md
new file mode 100644
index 000000000..926bbfd93
--- /dev/null
+++ b/snippets/git/s/apply-stash.md
@@ -0,0 +1,21 @@
+---
+title: Apply a stash
+type: snippet
+language: git
+tags: [repository,stash]
+author: chalarangelo
+cover: obelisk
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Applies a specific stash.
+
+- Use `git stash apply <stash>` to apply the given `<stash>`.
+
+```shell
+git stash apply <stash>
+```
+
+```shell
+git stash apply stash@{1} # Applies `stash@{1}`
+```
diff --git a/snippets/git/s/autocorrect.md b/snippets/git/s/autocorrect.md
new file mode 100644
index 000000000..5f4bfc7c1
--- /dev/null
+++ b/snippets/git/s/autocorrect.md
@@ -0,0 +1,22 @@
+---
+title: Autocorrect git commands
+type: snippet
+language: git
+tags: [configuration]
+author: chalarangelo
+cover: purple-flower-bunch
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Configures git to autocorrect mistyped commands.
+
+- Use `git config --global help.autocorrect 1` to enable git's autocorrect.
+
+```shell
+git config --global help.autocorrect 1
+```
+
+```shell
+git config --global help.autocorrect 1
+git sttaus # Runs `git status` instead
+```
diff --git a/snippets/git/s/automatic-find-commit-with-bug.md b/snippets/git/s/automatic-find-commit-with-bug.md
new file mode 100644
index 000000000..8858987a6
--- /dev/null
+++ b/snippets/git/s/automatic-find-commit-with-bug.md
@@ -0,0 +1,34 @@
+---
+title: Automatically find the commit that introduced a bug
+type: snippet
+language: git
+tags: [commit,branch]
+author: chalarangelo
+cover: pink-flower-tree
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Uses a binary search algorithm and a given script to find which commit in history introduced a bug.
+
+- Use `git bisect start` to start the process.
+- Use `git bisect good <commit>` to mark a `<commit>` as "good", indicating it is known to be bug-free.
+- Use `git bisect bad <commit>` to mark a different `<commit>` as "bad" indicating it has the bug.
+- Use `git bisect run <command>` to run the given `<command>` on each subsequent commit to find which commit introduce the bug.
+- Use `git bisect reset` to reset to the original branch. You can optionally specify a `<commit>` to reset to.
+
+```shell
+git bisect start
+git bisect good <commit>
+git bisect bad <commit>
+git bisect run <command>
+git bisect reset [<commit>]
+```
+
+```shell
+git bisect start
+git bisect good 3050fc0de
+git bisect bad c191f90c7
+git bisect run npm test # Run `npm test` for each commit
+# ... some time later the bad commit will be printed
+git bisect reset # Goes to the original branch
+```
diff --git a/snippets/git/s/automatic-push-upstream.md b/snippets/git/s/automatic-push-upstream.md
new file mode 100644
index 000000000..2bc8cb6ff
--- /dev/null
+++ b/snippets/git/s/automatic-push-upstream.md
@@ -0,0 +1,23 @@
+---
+title: Automate upstream branch creation
+type: snippet
+language: git
+tags: [configuration,repository]
+author: chalarangelo
+cover: violin
+dateModified: 2022-10-19T05:00:00-04:00
+---
+
+Configures the repository to automatically create upstream branches on push.
+
+- Use `git config --add --bool` to enable automatic upstream branch creation on push.
+- You can use the `--global` flag to enable this setting globally.
+
+```shell
+git config [--global] --add --bool
+```
+
+```shell
+git config --global --add --bool
+# `git push` will automatically create new branches, if they don't exist
+```
diff --git a/snippets/git/s/branches-containing-commit.md b/snippets/git/s/branches-containing-commit.md
new file mode 100644
index 000000000..2a9060bec
--- /dev/null
+++ b/snippets/git/s/branches-containing-commit.md
@@ -0,0 +1,22 @@
+---
+title: Find branches containing a commit
+type: snippet
+language: git
+tags: [branch,commit]
+cover: dark-leaves
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Prints all the branches containing a specific commit.
+
+- Use `git branch --contains <commit>` to see a list of all branches containing `<commit>`.
+
+```shell
+git branch --contains <commit>
+```
+
+```shell
+git branch --contains 3050fc0d3
+# patch-1
+# patch-2
+```
diff --git a/snippets/git/s/branches-not-containing-commit.md b/snippets/git/s/branches-not-containing-commit.md
new file mode 100644
index 000000000..a0da47f32
--- /dev/null
+++ b/snippets/git/s/branches-not-containing-commit.md
@@ -0,0 +1,22 @@
+---
+title: Find branches not containing a commit
+type: snippet
+language: git
+tags: [branch,commit]
+cover: blue-sunrise
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Prints all the branches not containing a specific commit.
+
+- Use `git branch --no-contains <commit>` to see a list of all branches not containing `<commit>`.
+
+```shell
+git branch --no-contains <commit>
+```
+
+```shell
+git branch --no-contains 3050fc0d3
+# patch-3
+# patch-4
+```
diff --git a/snippets/git/s/change-remote-url.md b/snippets/git/s/change-remote-url.md
new file mode 100644
index 000000000..6df94445f
--- /dev/null
+++ b/snippets/git/s/change-remote-url.md
@@ -0,0 +1,22 @@
+---
+title: Change the remote URL
+type: snippet
+language: git
+tags: [repository]
+author: chalarangelo
+cover: rocky-lake
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Changes the URL of the remote repository.
+
+- Use `git remote set-url origin <url>` to change the URL of the remote repository to `<url>`.
+
+```shell
+git remote set-url origin <url>
+```
+
+```shell
+git remote set-url origin https://github.com/30-seconds/30-seconds-of-code
+# The remote URL is now "https://github.com/30-seconds/30-seconds-of-code"
+```
diff --git a/snippets/git/s/clone-missing-submodules.md b/snippets/git/s/clone-missing-submodules.md
new file mode 100644
index 000000000..f0246cae3
--- /dev/null
+++ b/snippets/git/s/clone-missing-submodules.md
@@ -0,0 +1,22 @@
+---
+title: Clone missing submodules
+type: snippet
+language: git
+tags: [repository,submodule]
+author: chalarangelo
+cover: forest-balcony
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Clones missing submodules and checks out commits.
+
+- Use `git submodule update --init --recursive` to clone missing submodules and checkout commits.
+
+```shell
+git submodule update --init --recursive
+```
+
+```shell
+git submodule update --init --recursive
+# Clones missing submodules and checks out commits
+```
diff --git a/snippets/git/s/clone-repo.md b/snippets/git/s/clone-repo.md
new file mode 100644
index 000000000..9ddc0e852
--- /dev/null
+++ b/snippets/git/s/clone-repo.md
@@ -0,0 +1,27 @@
+---
+title: Clone a repository
+type: snippet
+language: git
+tags: [repository,remote]
+cover: fruit-feast
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Clones an existing repository, creating a local copy of it.
+
+- Use `git clone <url>` to clone an existing repository from `<url>` to a local directory. The directory's name will be based on the name of the cloned repository.
+- Alternatively, use `git clone <url> [<directory>]` to clone the repository into the specified local `<directory>`.
+
+```shell
+git clone <url> [<directory>]
+```
+
+```shell
+git clone https://github.com/30-seconds/30-seconds-of-code.git
+# Clones the repository in a new directory named '30-seconds-of-code'
+cd 30-seconds-of-code
+
+git clone https://github.com/30-seconds/30-seconds-of-code.git my-project
+# Clones the repository in a new directory named 'my-project'
+cd my-project
+```
diff --git a/snippets/git/s/commit-amend-author.md b/snippets/git/s/commit-amend-author.md
new file mode 100644
index 000000000..a895d241a
--- /dev/null
+++ b/snippets/git/s/commit-amend-author.md
@@ -0,0 +1,25 @@
+---
+title: Change the last commit's author
+type: snippet
+language: git
+tags: [commit]
+author: chalarangelo
+cover: symmetry-cloudy-mountain
+dateModified: 2022-05-03T05:00:00-04:00
+---
+
+Updates the last commit's author without changing its contents.
+
+- Use `git commit --amend` to edit the last commit.
+- Use the `--author` option to change the `<name>` and `<email>` of the commit's author.
+
+```shell
+git commit --amend --author="<name> <email>"
+```
+
+```shell
+# Make some changes to files
+git add .
+git commit --amend --author="Duck Quackers <cool.duck@qua.ck>"
+# The last commit's author is now `Duck Quackers`
+```
diff --git a/snippets/git/s/commit-set-author.md b/snippets/git/s/commit-set-author.md
new file mode 100644
index 000000000..b5fa8e3f0
--- /dev/null
+++ b/snippets/git/s/commit-set-author.md
@@ -0,0 +1,24 @@
+---
+title: Create a commit by a different author
+type: snippet
+language: git
+tags: [commit]
+cover: new-plant
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Creates a new commit by the specified author.
+
+- Use `git commit -m <message>` to create a new commit with the specified `<message>`.
+- Use the `--author` option to change the `<name>` and `<email>` of the commit's author.
+
+```shell
+git commit -m <message> --author="<name> <email>"
+```
+
+```shell
+# Make some changes to files
+git add .
+git commit -m "Fix the network bug" --author="Duck Quackers <cool.duck@qua.ck>"
+# Creates a commit by `Duck Quackers`
+```
diff --git a/snippets/git/s/commit-template.md b/snippets/git/s/commit-template.md
new file mode 100644
index 000000000..75387463e
--- /dev/null
+++ b/snippets/git/s/commit-template.md
@@ -0,0 +1,22 @@
+---
+title: Add a commit message template
+type: snippet
+language: git
+tags: [repository,configuration]
+author: chalarangelo
+cover: river-house-lights
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Sets up a commit message template for the current repository.
+
+- Use `git config commit.template <file>` to specify `<file>` as the commit message template for the current repository.
+
+```shell
+git config commit.template <file>
+```
+
+```shell
+git config commit.template "commit-template"
+# Sets "commit-template" as the commit message template
+```
diff --git a/snippets/git/s/commit-without-hooks.md b/snippets/git/s/commit-without-hooks.md
new file mode 100644
index 000000000..a526da917
--- /dev/null
+++ b/snippets/git/s/commit-without-hooks.md
@@ -0,0 +1,23 @@
+---
+title: Commit without running git hooks
+type: snippet
+language: git
+tags: [commit]
+cover: fishermen
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Creates a new commit skipping the pre-commit and commit-msg hooks.
+
+- Use `git commit --no-verify -m <message>` to commit staged changes without running git hooks.
+
+```shell
+git commit --no-verify -m <message>
+```
+
+```shell
+# Make some changes to files, ones that your precommit hook might not allow
+git add .
+git commit --no-verify -m "Unsafe commit"
+# Creates a commit with the message "Unsafe commit", without running git hooks
+```
diff --git a/snippets/git/s/config-user.md b/snippets/git/s/config-user.md
new file mode 100644
index 000000000..bef0ce1cd
--- /dev/null
+++ b/snippets/git/s/config-user.md
@@ -0,0 +1,29 @@
+---
+title: Configure git user information
+type: snippet
+language: git
+tags: [configuration,repository]
+cover: pineapple-at-work
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Configures user information for git.
+
+- Use `git config user.email <email>` to set the user's email for the current repository.
+- Use `git config user.name <name>` to set the user's name for the current repository.
+- You can use the `--global` flag to configure global user information.
+
+```shell
+git config [--global] user.email <email>
+git config [--global] user.name <name>
+```
+
+```shell
+git config user.email "cool.duck@qua.ck"
+git config user.name "Duck Quackers"
+# Configures user for current repository
+
+git config --global user.email "cool.duck@qua.ck"
+git config --global user.name "Duck Quackers"
+# Configures global git user
+```
diff --git a/snippets/git/s/copy-file-from-branch.md b/snippets/git/s/copy-file-from-branch.md
new file mode 100644
index 000000000..63d767fef
--- /dev/null
+++ b/snippets/git/s/copy-file-from-branch.md
@@ -0,0 +1,23 @@
+---
+title: Copy a file from another branch
+type: snippet
+language: git
+tags: [branch]
+author: chalarangelo
+cover: sea-view-2
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Copies a file from another branch to the current branch.
+
+- Use `git checkout <branch> <file>` to copy the specified `<file>` from the specified `<branch>`.
+
+```shell
+git checkout <branch> <file>
+```
+
+```shell
+git checkout patch-2
+git checkout patch-1 "30seconds.txt"
+# `patch-2` branch now contains the 30seconds.txt file from `patch-1`
+```
diff --git a/snippets/git/s/create-branch.md b/snippets/git/s/create-branch.md
new file mode 100644
index 000000000..1c1e0255a
--- /dev/null
+++ b/snippets/git/s/create-branch.md
@@ -0,0 +1,26 @@
+---
+title: Create a new branch
+type: snippet
+language: git
+tags: [branch,remote]
+cover: flower-pond
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Creates and switches to a new branch, optionally setting up a remote tracking branch.
+
+- Use `git checkout -b <branch>` to create a new branch with the specified name and switch to it.
+- You can optionally add `-t <remote>/<branch>` to set up a remote tracking branch for the newly created branch.
+- Note: You can alternatively use `git branch <branch> [-t <remote>/<branch>]` and then `git checkout <branch>` separately.
+
+```shell
+git checkout -b <branch> [-t <remote>/<branch>]
+```
+
+```shell
+git checkout -b patch-1
+# Local branch, without a remote tracking branch
+
+git checkout -b patch-2 -t origin/patch-2
+# Local branch and remote tracking branch with the same name
+```
diff --git a/snippets/git/s/create-commit.md b/snippets/git/s/create-commit.md
new file mode 100644
index 000000000..1ca7f7f2f
--- /dev/null
+++ b/snippets/git/s/create-commit.md
@@ -0,0 +1,23 @@
+---
+title: Create a commit
+type: snippet
+language: git
+tags: [commit]
+cover: baloons-field
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Creates a new commit containing the staged changes.
+
+- Use `git commit -m <message>` to create a new commit with the specified `<message>`.
+
+```shell
+git commit -m <message>
+```
+
+```shell
+# Make some changes to files
+git add .
+git commit -m "Fix the network bug"
+# Creates a commit with the message "Fix the network bug"
+```
diff --git a/snippets/git/s/create-empty-commit.md b/snippets/git/s/create-empty-commit.md
new file mode 100644
index 000000000..b3baeabf1
--- /dev/null
+++ b/snippets/git/s/create-empty-commit.md
@@ -0,0 +1,21 @@
+---
+title: Create an empty commit
+type: snippet
+language: git
+tags: [commit]
+cover: colorful-plastic
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Creates an empty commit.
+
+- Use `git commit --allow-empty -m <message>` to create an empty commit with the provided `<message>`.
+
+```shell
+git commit --allow-empty -m <message>
+```
+
+```shell
+git commit --allow-empty -m "Empty commit"
+# Creates an empty commit with the message "Empty commit"
+```
diff --git a/snippets/git/s/create-fixup-commit.md b/snippets/git/s/create-fixup-commit.md
new file mode 100644
index 000000000..faf37ae59
--- /dev/null
+++ b/snippets/git/s/create-fixup-commit.md
@@ -0,0 +1,26 @@
+---
+title: Create a fixup commit
+type: snippet
+language: git
+tags: [commit]
+author: chalarangelo
+cover: tools
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Creates a fixup commit that can be autosquashed in the next rebase.
+
+- Use `git commit --fixup <commit>` to create a fixup commit for the specified `<commit>`.
+- After running `git rebase --autosquash`, fixup commits will be automatically squashed into the commits they reference.
+
+```shell
+git commit --fixup <commit>
+```
+
+```shell
+git add .
+git commit --fixup 3050fc0de
+# Created a fixup commit for `3050fc0de`
+git rebase HEAD~5 --autosquash
+# Now the fixup commit has been squashed
+```
diff --git a/snippets/git/s/create-repo.md b/snippets/git/s/create-repo.md
new file mode 100644
index 000000000..6ae0fc005
--- /dev/null
+++ b/snippets/git/s/create-repo.md
@@ -0,0 +1,27 @@
+---
+title: Create a new repository
+type: snippet
+language: git
+tags: [repository]
+cover: violin
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Initializes a new git repository, setting up all the configuration files needed by git.
+
+- Use `git init` to initialize an empty repository in the current directory.
+- Alternatively, use `git init [<directory>]` to initialize the repository in the specified `<directory>`.
+- Note: Running `git init` in an existing repository is safe.
+- Note: You only need to run `git init` once per repository.
+
+```shell
+git init [<directory>]
+```
+
+```shell
+cd ~/my_project
+git init # Initializes a repo in ~/my_project
+
+cd ~
+git init my_project # Initializes a repo in ~/my_project
+```
diff --git a/snippets/git/s/current-branch-name.md b/snippets/git/s/current-branch-name.md
new file mode 100644
index 000000000..b7bd04683
--- /dev/null
+++ b/snippets/git/s/current-branch-name.md
@@ -0,0 +1,21 @@
+---
+title: Get the current branch name
+type: snippet
+language: git
+tags: [branch]
+cover: cherry-trees
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Prints the current branch name.
+
+- Use `git rev-parse --abbrev-ref HEAD` to print the name of the current branch.
+
+```shell
+git rev-parse --abbrev-ref HEAD
+```
+
+```shell
+git checkout patch-1
+git rev-parse --abbrev-ref HEAD # Prints `patch-1`
+```
diff --git a/snippets/git/s/delete-branch.md b/snippets/git/s/delete-branch.md
new file mode 100644
index 000000000..885336a90
--- /dev/null
+++ b/snippets/git/s/delete-branch.md
@@ -0,0 +1,21 @@
+---
+title: Delete a branch
+type: snippet
+language: git
+tags: [repository,branch]
+cover: volcano-sunset
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Deletes a local branch.
+
+- Use `git branch -d <branch>` to delete the specified local `<branch>`.
+
+```shell
+git branch -d <branch>
+```
+
+```shell
+git checkout master
+git branch -d patch-1 # Deletes the `patch-1` local branch
+```
diff --git a/snippets/git/s/delete-detached-branches.md b/snippets/git/s/delete-detached-branches.md
new file mode 100644
index 000000000..2f1676a35
--- /dev/null
+++ b/snippets/git/s/delete-detached-branches.md
@@ -0,0 +1,32 @@
+---
+title: Delete detached branches
+type: snippet
+language: git
+tags: [repository,branch]
+cover: brown-bird
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Deletes all detached branches.
+
+- Use `git fetch --all --prune` to garbage collect any detached branches.
+- This is especially useful if the remote repository is set to automatically delete merged branches.
+
+```shell
+git fetch --all --prune
+```
+
+```shell
+git checkout master
+git branch
+# master
+# patch-1
+# patch-2
+
+# Assuming `patch-1` is detached
+git fetch --all --prune
+
+git branch
+# master
+# patch-2
+```
diff --git a/snippets/git/s/delete-merged-branches.md b/snippets/git/s/delete-merged-branches.md
new file mode 100644
index 000000000..a1bcc0675
--- /dev/null
+++ b/snippets/git/s/delete-merged-branches.md
@@ -0,0 +1,33 @@
+---
+title: Delete merged branches
+type: snippet
+language: git
+tags: [repository,branch]
+cover: duck-plants
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Deletes all local merged branches.
+
+- Use `git branch --merged <branch>` to list all branches merged into `<branch>`.
+- Use the pipe operator (`|`) to pipe the output and `grep -v "(^\*|<branch>)"` to exclude the current and the target `<branch>`.
+- Use the pipe operator (`|`) to pipe the output and `xargs git branch -d` to delete all of the found branches.
+
+```shell
+git branch --merged <branch> | grep -v "(^\*|<branch>)" | xargs git branch -d
+```
+
+```shell
+git checkout master
+git branch
+# master
+# patch-1
+# patch-2
+
+# Assuming `patch-1` is merged into master
+git branch --merged master | grep -v "(^\*|master)" | xargs git branch -d
+
+git branch
+# master
+# patch-2
+```
diff --git a/snippets/git/s/delete-remote-branch.md b/snippets/git/s/delete-remote-branch.md
new file mode 100644
index 000000000..d1965b2e7
--- /dev/null
+++ b/snippets/git/s/delete-remote-branch.md
@@ -0,0 +1,21 @@
+---
+title: Delete a remote branch
+type: snippet
+language: git
+tags: [repository,branch]
+cover: waves-from-above
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Deletes a remote branch.
+
+- Use `git push -d <remote> <branch>` to delete the specified remote `<branch>` on the given `<remote>`.
+
+```shell
+git push -d <remote> <branch>
+```
+
+```shell
+git checkout master
+git push -d origin patch-1 # Deletes the `patch-1` remote branch
+```
diff --git a/snippets/git/s/delete-stash.md b/snippets/git/s/delete-stash.md
new file mode 100644
index 000000000..d12b83da6
--- /dev/null
+++ b/snippets/git/s/delete-stash.md
@@ -0,0 +1,21 @@
+---
+title: Delete a stash
+type: snippet
+language: git
+tags: [repository,stash]
+author: chalarangelo
+cover: budapest-palace
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Deletes a specific stash.
+
+- Use `git stash drop <stash>` to delete the given `<stash>`.
+
+```shell
+git stash drop <stash>
+```
+
+```shell
+git stash drop stash@{1} # Deletes `stash@{1}`
+```
diff --git a/snippets/git/s/delete-stashes.md b/snippets/git/s/delete-stashes.md
new file mode 100644
index 000000000..c032793c7
--- /dev/null
+++ b/snippets/git/s/delete-stashes.md
@@ -0,0 +1,22 @@
+---
+title: Delete all stashes
+type: snippet
+language: git
+tags: [repository,stash]
+author: chalarangelo
+cover: little-tree
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Deletes all stashes.
+
+- Use `git stash clear` to delete all stashes.
+
+```shell
+git stash clear
+```
+
+```shell
+git stash clear
+# Deletes all stashes
+```
diff --git a/snippets/git/s/delete-submodule.md b/snippets/git/s/delete-submodule.md
new file mode 100644
index 000000000..c9c02502f
--- /dev/null
+++ b/snippets/git/s/delete-submodule.md
@@ -0,0 +1,28 @@
+---
+title: Delete a submodule
+type: snippet
+language: git
+tags: [repository,submodule]
+author: chalarangelo
+cover: silver-flat-screen
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Deletes a submodule from the repository.
+
+- Use `git submodule deinit -f -- <submodule>` to unregister the specified `<submodule>`.
+- Use `rm -rf .git/modules/<submodule>` to remove the directory of the submodule.
+- Use `git rm -f <submodule>` to remove the working tree of the submodule.
+
+```shell
+git submodule deinit -f -- <submodule>
+rm -rf .git/modules/<submodule>
+git rm -f <submodule>
+```
+
+```shell
+git submodule deinit -f -- 30code
+rm -rf .git/modules/30code
+git rm -f 30code
+# Removes the `30code` submodule
+```
diff --git a/snippets/git/s/difference-between-branches.md b/snippets/git/s/difference-between-branches.md
new file mode 100644
index 000000000..59385a3ca
--- /dev/null
+++ b/snippets/git/s/difference-between-branches.md
@@ -0,0 +1,22 @@
+---
+title: View difference between two branches
+type: snippet
+language: git
+tags: [branch]
+author: chalarangelo
+cover: two-doors
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Displays the difference between two branches.
+
+- Use `git diff <branch>..<other-branch> ` to view the difference between `<branch>` and `<other-branch>`.
+
+```shell
+git diff <branch>..<other-branch>
+```
+
+```shell
+git diff patch-1..patch-2
+# Displays the difference between branches `patch-1` and `patch-2`
+```
diff --git a/snippets/git/s/disable-fast-forward.md b/snippets/git/s/disable-fast-forward.md
new file mode 100644
index 000000000..4107f4519
--- /dev/null
+++ b/snippets/git/s/disable-fast-forward.md
@@ -0,0 +1,26 @@
+---
+title: Disable fast forward merging by default
+type: snippet
+language: git
+tags: [configuration,repository]
+author: chalarangelo
+cover: people-on-beach
+dateModified: 2021-07-03T05:00:00-04:00
+---
+
+Disables the default fast forwarding on merge commits.
+
+- Use `git config --add merge.ff false` to disable fast-forward merging for all branches, even if it is possible.
+- You can use the `--global` flag to configure this option globally.
+
+```shell
+git config [--global] --add merge.ff false
+```
+
+```shell
+git config --global --add merge.ff false
+
+git checkout master
+git merge my-branch
+# Will never fast forward even if it's possible
+```
diff --git a/snippets/git/s/discard-uncommitted.md b/snippets/git/s/discard-uncommitted.md
new file mode 100644
index 000000000..3c1c2a15e
--- /dev/null
+++ b/snippets/git/s/discard-uncommitted.md
@@ -0,0 +1,21 @@
+---
+title: Discard uncommitted changes
+type: snippet
+language: git
+tags: [branch]
+cover: arrays
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Discards all uncommitted changes to the current branch.
+
+- Use `git reset --hard HEAD` to reset the local directory to match the latest commit and discard all unstaged changes.
+
+```shell
+git reset --hard HEAD
+```
+
+```shell
+git reset --hard HEAD
+# Discards all unstaged changes
+```
diff --git a/snippets/git/s/discard-untracked.md b/snippets/git/s/discard-untracked.md
new file mode 100644
index 000000000..634fdecdf
--- /dev/null
+++ b/snippets/git/s/discard-untracked.md
@@ -0,0 +1,21 @@
+---
+title: Discard untracked changes
+type: snippet
+language: git
+tags: [branch]
+cover: cold-mountains
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Discards all untracked changes to the current branch.
+
+- Use `git clean -f -d` to discard all untracked changes to the current branch.
+
+```shell
+git clean -f -d
+```
+
+```shell
+git clean -f -d
+# Discards all untracked changes
+```
diff --git a/snippets/git/s/edit-config.md b/snippets/git/s/edit-config.md
new file mode 100644
index 000000000..f8c5462b1
--- /dev/null
+++ b/snippets/git/s/edit-config.md
@@ -0,0 +1,21 @@
+---
+title: Edit git configuration file
+type: snippet
+language: git
+tags: [configuration]
+cover: terminal
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Opens the git configuration file in the git text editor.
+
+- Use `git config --global -e` to open the git configuration file in the git text editor.
+
+```shell
+git config --global -e
+```
+
+```shell
+git config --global -e
+# Opens the git configuration file in the default git text editor
+```
diff --git a/snippets/git/s/fetch-changes.md b/snippets/git/s/fetch-changes.md
new file mode 100644
index 000000000..b5cc69920
--- /dev/null
+++ b/snippets/git/s/fetch-changes.md
@@ -0,0 +1,20 @@
+---
+title: Fetch latest changes from remote
+type: snippet
+language: git
+tags: [repository]
+cover: playing-fetch
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Fetches the latest changes from the remote.
+
+- Use `git fetch` to get the latest changes from the remote, without applying them.
+
+```shell
+git fetch
+```
+
+```shell
+git fetch # Fetches the latest updates from the remote
+```
diff --git a/snippets/git/s/find-lost-files.md b/snippets/git/s/find-lost-files.md
new file mode 100644
index 000000000..84907eedd
--- /dev/null
+++ b/snippets/git/s/find-lost-files.md
@@ -0,0 +1,25 @@
+---
+title: Find lost files
+type: snippet
+language: git
+tags: [repository]
+author: chalarangelo
+cover: hard-disk
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Prints a list of lost files and commits.
+
+- Use `git fsck --lost-found` to print a list of all dangling objects.
+- All appropriate files will be extracted into the `.git/lost-found` directory.
+
+```shell
+git fsck --lost-found
+```
+
+```shell
+git fsck --lost-found
+# dangling commit 3050fc0de
+# dangling blob 807e3fa41
+# dangling commit 59ff8481d
+```
diff --git a/snippets/git/s/force-update-remote-branch.md b/snippets/git/s/force-update-remote-branch.md
new file mode 100644
index 000000000..642900f64
--- /dev/null
+++ b/snippets/git/s/force-update-remote-branch.md
@@ -0,0 +1,28 @@
+---
+title: Update remote branch after rewriting history
+type: snippet
+language: git
+tags: [branch]
+author: chalarangelo
+cover: compass
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Forces an update of the remote branch after rewriting the history locally.
+
+- Use `git push -f` to force update the remote branch, overwriting it using the local branch's changes.
+- This operation is necessary anytime your local and remote repository diverge.
+
+```shell
+git push -f
+```
+
+```shell
+git checkout patch-1
+git pull
+git rebase master
+# Local `patch-1` branch has been rebased onto `master`, thus diverging
+# from the remote `patch-1` branch
+
+git push -f # Force update the remote `patch-1` branch
+```
diff --git a/snippets/git/s/interactive-rebase.md b/snippets/git/s/interactive-rebase.md
new file mode 100644
index 000000000..88a9e30dc
--- /dev/null
+++ b/snippets/git/s/interactive-rebase.md
@@ -0,0 +1,29 @@
+---
+title: Perform an interactive rebase
+type: snippet
+language: git
+tags: [branch]
+author: chalarangelo
+cover: tea-laptop-table
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Performs an interactive rebase.
+
+- Use `git rebase -i <commit>` to perform an interactive rebase.
+- You can edit the rebase file to change the order of the commits and the action to perform for each one (pick, squash, drop, reword etc.).
+- You can optionally use the `--autosquash` option to automatically squash fixup commits.
+- If you have merge conflicts or stop to make changes, you can continue the rebase when ready using `git rebase --continue` or abort it using `git rebase --abort`.
+
+```shell
+git rebase -i [--autosquash] <commit>
+```
+
+```shell
+git rebase -i 3050fc0de
+# Performs an interactive rebase starting from `3050fc0de`
+
+git rebase -i --autosquash HEAD~5
+# Performs an interactive rebase of the last 5 commits,
+# automatically squashing fixup commits
+```
diff --git a/snippets/git/s/line-endings.md b/snippets/git/s/line-endings.md
new file mode 100644
index 000000000..72844d802
--- /dev/null
+++ b/snippets/git/s/line-endings.md
@@ -0,0 +1,22 @@
+---
+title: Configure line endings
+type: snippet
+language: git
+tags: [repository,configuration]
+author: chalarangelo
+cover: leaves-read
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Configures the line endings for a repository.
+
+- Use `git config core.eol [lf | crlf]` to configure the line endings.
+- `lf` is the UNIX line ending (`\n`), whereas `crlf` is the DOS line ending (`\r\n`).
+
+```shell
+git config core.eol [lf | crlf]
+```
+
+```shell
+git config core.eol lf # Configured to use UNIX line endings
+```
diff --git a/snippets/git/s/list-aliases.md b/snippets/git/s/list-aliases.md
new file mode 100644
index 000000000..5ad33ebd5
--- /dev/null
+++ b/snippets/git/s/list-aliases.md
@@ -0,0 +1,25 @@
+---
+title: List all git aliases
+type: snippet
+language: git
+tags: [configuration]
+cover: book-chair
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Prints a list of all git aliases.
+
+- Use `git config -l` to list all variables set in the configuration file.
+- Use the pipe operator (`|`) to pipe the output and `grep alias` to only keep aliases.
+- Use the pipe operator (`|`) to pipe the output and `sed 's/^alias\.//g'` to remove the `alias.` part from each alias.
+
+```shell
+git config -l | grep alias | sed 's/^alias\.//g'
+```
+
+```shell
+git config -l | grep alias | sed 's/^alias\.//g'
+# st=status
+# co=checkout
+# rb=rebase
+```
diff --git a/snippets/git/s/list-stashes.md b/snippets/git/s/list-stashes.md
new file mode 100644
index 000000000..6bbf2a6fd
--- /dev/null
+++ b/snippets/git/s/list-stashes.md
@@ -0,0 +1,22 @@
+---
+title: Lists all stashes
+type: snippet
+language: git
+tags: [repository,stash]
+author: chalarangelo
+cover: golden-gate-bridge
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Displays a list of all stashes.
+
+- Use `git stash list` to view a list of all stashes.
+
+```shell
+git stash list
+```
+
+```shell
+git stash list
+# stash@{0}: WIP on patch-1: ee52eda Fix network bug
+```
diff --git a/snippets/git/s/manual-find-commit-with-bug.md b/snippets/git/s/manual-find-commit-with-bug.md
new file mode 100644
index 000000000..bd12c5e17
--- /dev/null
+++ b/snippets/git/s/manual-find-commit-with-bug.md
@@ -0,0 +1,35 @@
+---
+title: Manually find the commit that introduced a bug
+type: snippet
+language: git
+tags: [commit,branch]
+author: chalarangelo
+cover: blue-computer
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Uses a binary search algorithm to manually find which commit in history introduced a bug.
+
+- Use `git bisect start` to start the process.
+- Use `git bisect good <commit>` to mark a `<commit>` as "good", indicating it is known to be bug-free.
+- Use `git bisect bad <commit>` to mark a different `<commit>` as "bad" indicating it has the bug.
+- Use `git bisect (bad | good)` marking each subsequent commit as "good" or "bad" depending if it has the bug or not.
+- Use `git bisect reset` to reset to the original branch. You can optionally specify a `<commit>` to reset to.
+
+```shell
+git bisect start
+git bisect good <commit>
+git bisect bad <commit>
+git bisect (bad | good)
+git bisect reset [<commit>]
+```
+
+```shell
+git bisect start
+git bisect good 3050fc0de
+git bisect bad c191f90c7
+git bisect good # Current commit is good
+git bisect bad # Current commit is buggy
+# ... some time later the bad commit will be printed
+git bisect reset # Goes to the original branch
+```
diff --git a/snippets/git/s/merge-branch-merge-commit.md b/snippets/git/s/merge-branch-merge-commit.md
new file mode 100644
index 000000000..ed8f4ee7d
--- /dev/null
+++ b/snippets/git/s/merge-branch-merge-commit.md
@@ -0,0 +1,25 @@
+---
+title: Merge a branch and create a merge commit
+type: snippet
+language: git
+tags: [repository,branch]
+cover: meteora
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Merges a branch into the current branch, creating a merge commit.
+
+- Use `git checkout <target-branch>` to switch to the branch into which you want to merge.
+- Use `git merge --no-ff -m <message> <source-branch>` to merge a branch into the current branch, creating a merge commit with the specified `<message>`.
+
+```shell
+git checkout <target-branch>
+git merge --no-ff -m <message> <source-branch>
+```
+
+```shell
+git checkout master
+git merge --no-ff -m "Merge patch-1" patch-1
+# Merges the `patch-1` branch into `master` and creates a commit
+# with the message "Merge patch-1"
+```
diff --git a/snippets/git/s/merge-branch.md b/snippets/git/s/merge-branch.md
new file mode 100644
index 000000000..e6c19b75b
--- /dev/null
+++ b/snippets/git/s/merge-branch.md
@@ -0,0 +1,23 @@
+---
+title: Merge a branch
+type: snippet
+language: git
+tags: [repository,branch]
+cover: sparkles
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Merges a branch into the current branch.
+
+- Use `git checkout <target-branch>` to switch to the branch into which you want to merge.
+- Use `git merge <source-branch>` to merge a branch into the current branch.
+
+```shell
+git checkout <target-branch>
+git merge <source-branch>
+```
+
+```shell
+git checkout master
+git merge patch-1 # Merges the `patch-1` branch into `master`
+```
diff --git a/snippets/git/s/move-commits-to-branch.md b/snippets/git/s/move-commits-to-branch.md
new file mode 100644
index 000000000..84dad7287
--- /dev/null
+++ b/snippets/git/s/move-commits-to-branch.md
@@ -0,0 +1,32 @@
+---
+title: Move commits from master to a new branch
+type: snippet
+language: git
+tags: [branch,repository]
+author: chalarangelo
+cover: red-succulent
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Moves local commits from the `master` branch to a new branch.
+
+- Use `git branch <branch>` to create a new branch at the tip of the current `master`.
+- Use `git reset HEAD~<n> --hard` to rewind back `<n>` commits and discard changes.
+- Use `git checkout <branch>` to switch to the new branch.
+- Only works if the changes have only been committed locally and not pushed to the remote.
+
+```shell
+git branch <branch>
+git reset HEAD~<n> --hard
+git checkout <branch>
+```
+
+```shell
+git checkout master
+git add .
+git commit -m "Fix network bug"
+git branch patch-1
+# `patch-1` branch is created containing the commit "Fix network bug"
+git reset HEAD~1 --hard # Remove the commit from `master`
+git checkout patch-1
+```
diff --git a/snippets/git/s/optimize-repository.md b/snippets/git/s/optimize-repository.md
new file mode 100644
index 000000000..8775a733c
--- /dev/null
+++ b/snippets/git/s/optimize-repository.md
@@ -0,0 +1,21 @@
+---
+title: Optimize the local repository
+type: snippet
+language: git
+tags: [repository]
+author: chalarangelo
+cover: automaton
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Optimizes the local repository.
+
+- Use `git gc --prune=now --aggressive` to garbage collect loose objects.
+
+```shell
+git gc --prune=now --aggressive
+```
+
+```shell
+git gc --prune=now --aggressive # Optimizes the local repository
+```
diff --git a/snippets/git/s/pick-commits.md b/snippets/git/s/pick-commits.md
new file mode 100644
index 000000000..3e2691746
--- /dev/null
+++ b/snippets/git/s/pick-commits.md
@@ -0,0 +1,29 @@
+---
+title: Pick changes from one or more commits
+type: snippet
+language: git
+tags: [commit,branch]
+author: chalarangelo
+cover: sunflowers
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Applies the changes introduced by one or more commits.
+
+- Use `git cherry-pick <commit>` to pick changes from a single commit.
+- Use `git cherry-pick <commit-1> <commit-2>...` to pick changes from all space-separated commits.
+- Use `git cherry-pick <first-commit>..<last-commit>` to pick changes from a range of commits.
+
+```shell
+git cherry-pick (<commit>... | <first-commit>..<last-commit>)
+```
+
+```shell
+git cherry-pick 3050fc0de # Picks changes from the commit `3050fc0de`
+
+git cherry-pick 3050fc0de c191f90c7
+# Picks changes from the commits `3050fc0de`, `c191f90c7` and `0b552a6d4`
+
+git cherry-pick 3050fc0de..c191f90c7
+# Picks changes from the commits in the range `3050fc0de` - `c191f90c7`
+```
diff --git a/snippets/git/s/pull-all-submodules.md b/snippets/git/s/pull-all-submodules.md
new file mode 100644
index 000000000..084370948
--- /dev/null
+++ b/snippets/git/s/pull-all-submodules.md
@@ -0,0 +1,22 @@
+---
+title: Pull all submodules from remote
+type: snippet
+language: git
+tags: [repository,submodule]
+author: chalarangelo
+cover: workspace-with-speaker
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Pulls all submodules from their respective remotes.
+
+- Use `git submodule update --recursive --remote` to pull all submodules from their respective remotes.
+
+```shell
+git submodule update --recursive --remote
+```
+
+```shell
+git submodule update --recursive --remote
+# Pulls all submodules from their respective remotes
+```
diff --git a/snippets/git/s/pull-changes.md b/snippets/git/s/pull-changes.md
new file mode 100644
index 000000000..0a3fd8e53
--- /dev/null
+++ b/snippets/git/s/pull-changes.md
@@ -0,0 +1,22 @@
+---
+title: Pull latest changes from remote
+type: snippet
+language: git
+tags: [repository,branch]
+cover: last-light
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Pulls the latest changes from the remote tracking branch.
+
+- Use `git pull` to fetch and apply the latest changes from the remote.
+
+```shell
+git pull
+```
+
+```shell
+# Assuming the remote `patch-1` branch is ahead of the local one
+git checkout patch-1
+git pull # The local `patch-1` branch is now up to date with the remote branch
+```
diff --git a/snippets/git/s/purge-file.md b/snippets/git/s/purge-file.md
new file mode 100644
index 000000000..7b80f5be7
--- /dev/null
+++ b/snippets/git/s/purge-file.md
@@ -0,0 +1,32 @@
+---
+title: Purge a file from history
+type: snippet
+language: git
+tags: [repository,remote]
+author: chalarangelo
+cover: white-flower
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Completely purges a file from history.
+
+- Use `git rm --cached --ignore-unmatch <path>` to delete the file in the specified `<path>`.
+- Use `git filter-branch --force --index-filter <command> --prune-empty --tag-name-filter cat -- --all` to rewrite the branch's history, passing it the previous command.
+- You can optionally use `git push <remote> --force -all` to force push the changes to the remote repository.
+- ⚠️ **WARNING**: This is a destructive action that rewrites the history of the entire repository. Make sure you know what you are doing.
+
+```shell
+git filter-branch --force --index-filter \
+  "git rm --cached --ignore-unmatch <path>" \
+  --prune-empty --tag-name-filter cat -- --all
+git push <remote> --force --all
+```
+
+```shell
+git filter-branch --force --index-filter \
+  "git rm --cached --ignore-unmatch config/apiKeys.json" \
+  --prune-empty --tag-name-filter cat -- --all
+# Purges `config/apiKeys.json` from history
+git push origin --force --all
+# Force pushes the changes to the remote repository
+```
diff --git a/snippets/git/s/push-changes.md b/snippets/git/s/push-changes.md
new file mode 100644
index 000000000..893617778
--- /dev/null
+++ b/snippets/git/s/push-changes.md
@@ -0,0 +1,22 @@
+---
+title: Push local changes to remote
+type: snippet
+language: git
+tags: [repository,branch]
+cover: dark-cloud
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Pushes the current branch's changes to the remote.
+
+- Use `git push` to push the latest changes from the local branch to the remote.
+
+```shell
+git push
+```
+
+```shell
+# Assuming the local `patch-1` branch is ahead of the remote one
+git checkout patch-1
+git push # The remote `patch-1` branch is now up to date with the local branch
+```
diff --git a/snippets/git/s/rebase-onto-branch.md b/snippets/git/s/rebase-onto-branch.md
new file mode 100644
index 000000000..b42507ae3
--- /dev/null
+++ b/snippets/git/s/rebase-onto-branch.md
@@ -0,0 +1,29 @@
+---
+title: Rebase onto another branch
+type: snippet
+language: git
+tags: [branch]
+cover: sliced-fruits
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Rebases the current branch onto another branch.
+
+- Use `git checkout <branch>` to switch to the `<branch>` to be rebased.
+- Use `git rebase <base-branch>` to rebase the current branch onto `<base-branch>`.
+
+```shell
+git checkout <branch>
+git rebase <base-branch>
+```
+
+```shell
+git checkout patch-1
+git rebase master
+# `patch-1` is rebased onto `master`
+
+git checkout patch-2
+git fetch origin # Fetch latest remote branches
+git rebase origin/master
+# `patch-2` is rebased onto the latest remote `master`
+```
diff --git a/snippets/git/s/remove-file-from-commit.md b/snippets/git/s/remove-file-from-commit.md
new file mode 100644
index 000000000..97cf724f3
--- /dev/null
+++ b/snippets/git/s/remove-file-from-commit.md
@@ -0,0 +1,24 @@
+---
+title: Remove a file from the last commit
+type: snippet
+language: git
+tags: [commit]
+cover: cancel-typographer
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Removes a file from the last commit without changing its message.
+
+- Use `git rm —-cached <file>` to remove the specified `<file>` from the index.
+- Use `git commit —-amend` to update the contents of the last commit, without changing its message.
+
+```shell
+git rm —-cached <file>
+git commit —-amend
+```
+
+```shell
+git rm —-cached "30-seconds.txt"
+git commit —-amend
+# Removes `30-seconds.txt` from the last commit
+```
diff --git a/snippets/git/s/rename-branch.md b/snippets/git/s/rename-branch.md
new file mode 100644
index 000000000..8b1e51d74
--- /dev/null
+++ b/snippets/git/s/rename-branch.md
@@ -0,0 +1,22 @@
+---
+title: Rename a branch
+type: snippet
+language: git
+tags: [branch]
+cover: bug
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Renames a local branch.
+
+- Use `git branch -m <old-name> <new-name>` to rename `<old-name>` to `<new-name>`.
+
+```shell
+git branch -m <old-name> <new-name>
+```
+
+```shell
+git checkout master
+git branch -m patch-1 patch-2
+# Renames `patch-1` to `patch-2`
+```
diff --git a/snippets/git/s/rename-remote-branch.md b/snippets/git/s/rename-remote-branch.md
new file mode 100644
index 000000000..5e8655140
--- /dev/null
+++ b/snippets/git/s/rename-remote-branch.md
@@ -0,0 +1,30 @@
+---
+title: Rename remote branch
+type: snippet
+language: git
+tags: [branch]
+cover: horse-sunset
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Renames a branch both locally and on the remote.
+
+- Use `git branch -m <old-name> <new-name>` to rename the local `<old-name>` branch to `<new-name>`.
+- Use `git push origin --delete <old-name>` to delete the old remote branch.
+- Use `git checkout <new-name>` to switch to the renamed branch.
+- Use `git push origin -u <new-name>` to set `<new-name>` as the remote branch for the renamed branch.
+
+```shell
+git branch -m <old-name> <new-name>
+git push origin --delete <old-name>
+git checkout <new-name>
+git push origin -u <new-name>
+```
+
+```shell
+git checkout master
+git branch -m patch-1 patch-2    # Renamed the local branch to `patch-2`
+git push origin --delete patch-1
+git checkout patch-2
+git push origin -u patch-2 # Renames the remote branch to `patch-2`
+```
diff --git a/snippets/git/s/reset-master.md b/snippets/git/s/reset-master.md
new file mode 100644
index 000000000..4b6dfa487
--- /dev/null
+++ b/snippets/git/s/reset-master.md
@@ -0,0 +1,27 @@
+---
+title: Reset master to match remote
+type: snippet
+language: git
+tags: [repository,branch]
+cover: old-consoles
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Resets the local `master` branch to match the one on the remote.
+
+- Use `git fetch origin` to retrieve the latest updates from the remote.
+- Use `git checkout master` to switch to the `master` branch.
+- Use `git reset --hard origin/master` to reset the local `master` branch to match the one on the remote.
+
+```shell
+git fetch origin
+git checkout master
+git reset --hard origin/master
+```
+
+```shell
+git fetch origin
+git checkout master
+git reset --hard origin/master
+# Local `master` branch is now up to date with remote `master`
+```
diff --git a/snippets/git/s/restore-deleted-file.md b/snippets/git/s/restore-deleted-file.md
new file mode 100644
index 000000000..e0f025257
--- /dev/null
+++ b/snippets/git/s/restore-deleted-file.md
@@ -0,0 +1,23 @@
+---
+title: Restore a deleted file
+type: snippet
+language: git
+tags: [branch]
+author: chalarangelo
+cover: succulent-red-light
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Restores a file deleted in a specific commit.
+
+- Use `git checkout <commit>^ -- <file>` to restore the specified `<file>` deleted in the specified `<commit>`.
+
+```shell
+git checkout <commit>^ -- <file>
+```
+
+```shell
+# "30seconds.txt" was deleted in the commit `3050fc0de`
+git checkout 3050fc0de^ -- "30seconds.txt"
+# Restores the 30seconds.txt file
+```
diff --git a/snippets/git/s/rewind-n-commits.md b/snippets/git/s/rewind-n-commits.md
new file mode 100644
index 000000000..1a74155f2
--- /dev/null
+++ b/snippets/git/s/rewind-n-commits.md
@@ -0,0 +1,26 @@
+---
+title: Rewind back n commits
+type: snippet
+language: git
+tags: [branch,commit]
+cover: lake-trees
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Rewinds the current branch by a given number of commits.
+
+- Use `git reset HEAD~<n>` to rewind the current branch `<n>` commits.
+- This command will uncommit and unstage changes, but leave them in the working directory.
+- You can use the `--hard` flag to uncommit, unstage and delete changes instead.
+
+```shell
+git reset [--hard] HEAD~<n>
+```
+
+```shell
+git reset HEAD~5
+# Rewinds back 5 commits but keeps changes in the working directory
+
+git reset --hard HEAD~3
+# Rewinds back 3 commits and deletes changes
+```
diff --git a/snippets/git/s/rewind-to-commit.md b/snippets/git/s/rewind-to-commit.md
new file mode 100644
index 000000000..baebcc2c9
--- /dev/null
+++ b/snippets/git/s/rewind-to-commit.md
@@ -0,0 +1,26 @@
+---
+title: Rewind back to a specific commit
+type: snippet
+language: git
+tags: [branch,commit]
+cover: walking
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Rewinds the current branch by a given number of commits.
+
+- Use `git reset <commit>` to rewind the current branch to the specified `<commit>`.
+- This command will uncommit and unstage changes, but leave them in the working directory.
+- You can use the `--hard` flag to uncommit, unstage and delete changes instead.
+
+```shell
+git reset [--hard] <commit>
+```
+
+```shell
+git reset 3050fc0d3
+# Rewinds back to `3050fc0d3` but keeps changes in the working directory
+
+git reset --hard c0d30f305
+# Rewinds back to `c0d30f305` and deletes changes
+```
diff --git a/snippets/git/s/save-stash.md b/snippets/git/s/save-stash.md
new file mode 100644
index 000000000..e84ec761d
--- /dev/null
+++ b/snippets/git/s/save-stash.md
@@ -0,0 +1,30 @@
+---
+title: Create a stash
+type: snippet
+language: git
+tags: [repository,stash]
+author: chalarangelo
+cover: purple-leaves
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Saves the current state of the working directory and index into a new stash.
+
+- Use `git stash save` to save the current state of the working directory and index into a new stash.
+- You can optionally use the `-u` option to include untracked files.
+- You can optionally provide a `<message>` for the stash.
+
+```shell
+git stash save [-u] [<message>]
+```
+
+```shell
+git stash save
+# Creates a new stash
+
+git stash save -u
+# Creates a new stash, including untracked files
+
+git stash save "Bugfix WIP"
+# Creates a new stash with the message "Bugfix WIP"
+```
diff --git a/snippets/git/s/set-default-push-branch.md b/snippets/git/s/set-default-push-branch.md
new file mode 100644
index 000000000..5c4a36ca4
--- /dev/null
+++ b/snippets/git/s/set-default-push-branch.md
@@ -0,0 +1,26 @@
+---
+title: Set default push branch name
+type: snippet
+language: git
+tags: [configuration,branch]
+author: chalarangelo
+cover: pink-flower
+dateModified: 2021-06-30T05:00:00-04:00
+---
+
+Use the name of the current branch when pushing by default as the name of the remote branch.
+
+- Use `git config push.default current` to set the name of the remote branch to the one of the current local branch as the default.
+- You can use the `--global` flag to configure this option globally.
+
+```shell
+git config [--global] push.default current
+```
+
+```shell
+git config --global push.default current
+
+git checkout -b my-branch
+git push -u
+# Pushes to origin/my-branch
+```
diff --git a/snippets/git/s/set-text-editor.md b/snippets/git/s/set-text-editor.md
new file mode 100644
index 000000000..970ddd452
--- /dev/null
+++ b/snippets/git/s/set-text-editor.md
@@ -0,0 +1,21 @@
+---
+title: Configure the git text editor
+type: snippet
+language: git
+tags: [configuration]
+cover: purple-sunset-beach
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Configures the text editor used by git.
+
+- Use `git config --global core.editor <editor-command>` to call `<editor-command>` as the git text editor.
+
+```shell
+git config --global core.editor <editor-command>
+```
+
+```shell
+git config --global core.editor "code --wait"
+# Sets VS Code as the git text editor
+```
diff --git a/snippets/git/s/sort-branches-by-date.md b/snippets/git/s/sort-branches-by-date.md
new file mode 100644
index 000000000..02eb56fe7
--- /dev/null
+++ b/snippets/git/s/sort-branches-by-date.md
@@ -0,0 +1,25 @@
+---
+title: View branches sorted by date
+type: snippet
+language: git
+tags: [repository,branch]
+author: chalarangelo
+cover: sea-view
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Prints a list of all local branches sorted by date.
+
+- Use `git branch --sort=-committerdate` to display a list of all local branches and sort them based on the date of their last commit.
+- Use arrow keys to navigate, press <kbd>Q</kbd> to exit.
+
+```shell
+git branch --sort=-committerdate
+```
+
+```shell
+git branch --sort=-committerdate
+# master
+# patch-1
+# patch-2
+```
diff --git a/snippets/git/s/stage-files.md b/snippets/git/s/stage-files.md
new file mode 100644
index 000000000..ae28348df
--- /dev/null
+++ b/snippets/git/s/stage-files.md
@@ -0,0 +1,28 @@
+---
+title: Add files to the staging area
+type: snippet
+language: git
+tags: [commit]
+cover: round-leaves
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Adds files to the staging area.
+
+- Use `git add <pathspec>` to add files to the staging area.
+- `<pathspec>` can be a filename or a fileglob.
+
+```shell
+git add <pathspec>
+```
+
+```shell
+git add "30seconds.txt"
+# Add the file `30seconds.txt` to the staging area
+
+git add src/*.json
+# Add all files with a `.json` extension in the `src` directory
+
+git add .
+# Adds all changes to the staging area
+```
diff --git a/snippets/git/s/switch-to-branch.md b/snippets/git/s/switch-to-branch.md
new file mode 100644
index 000000000..f1d0fd837
--- /dev/null
+++ b/snippets/git/s/switch-to-branch.md
@@ -0,0 +1,21 @@
+---
+title: Switch to a branch
+type: snippet
+language: git
+tags: [branch]
+cover: bridge
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Switches to an existing branch.
+
+- Use `git checkout <branch>` to switch to the specified branch.
+- Note: In newer versions of git, you can also use `git switch <branch>`.
+
+```shell
+git checkout <branch>
+```
+
+```shell
+git checkout patch-1 # Switches to the branch named `patch-1`
+```
diff --git a/snippets/git/s/switch-to-last-branch.md b/snippets/git/s/switch-to-last-branch.md
new file mode 100644
index 000000000..f7f4ca524
--- /dev/null
+++ b/snippets/git/s/switch-to-last-branch.md
@@ -0,0 +1,22 @@
+---
+title: Return to previous branch
+type: snippet
+language: git
+tags: [branch]
+cover: beach-riders
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Switches back to the last branch.
+
+- Use `git checkout -` to switch back to the previous branch.
+
+```shell
+git checkout -
+```
+
+```shell
+git checkout patch-1
+git checkout master
+git checkout - # Switches to `patch-1`
+```
diff --git a/snippets/git/s/undo-commit.md b/snippets/git/s/undo-commit.md
new file mode 100644
index 000000000..2873e2f2d
--- /dev/null
+++ b/snippets/git/s/undo-commit.md
@@ -0,0 +1,21 @@
+---
+title: Undo a commit
+type: snippet
+language: git
+tags: [commit,branch]
+cover: mask-quiet
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Undoes a specified commit without rewriting history.
+
+- Use `git revert <commit>` to revert the specified `<commit>`, creating a new commit with the inverse of the commit's changes.
+
+```shell
+git revert <commit>
+```
+
+```shell
+git revert 3050fc0d3
+# Reverts the commit `3050fc0d3`
+```
diff --git a/snippets/git/s/undo-last-commit.md b/snippets/git/s/undo-last-commit.md
new file mode 100644
index 000000000..7608b033b
--- /dev/null
+++ b/snippets/git/s/undo-last-commit.md
@@ -0,0 +1,21 @@
+---
+title: Undo the last commit
+type: snippet
+language: git
+tags: [commit,branch]
+cover: racoon
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Undoes the last commit without rewriting history.
+
+- Use `git revert HEAD` to revert the last commit, creating a new commit with the inverse of the commit's changes.
+
+```shell
+git revert HEAD
+```
+
+```shell
+git revert HEAD
+# Reverts the last commit
+```
diff --git a/snippets/git/s/unstage-files.md b/snippets/git/s/unstage-files.md
new file mode 100644
index 000000000..59b824194
--- /dev/null
+++ b/snippets/git/s/unstage-files.md
@@ -0,0 +1,29 @@
+---
+title: Remove files from the staging area
+type: snippet
+language: git
+tags: [commit]
+author: chalarangelo
+cover: coconuts
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Removes files from the staging area.
+
+- Use `git restore --staged <pathspec>` to remove files from the staging area.
+- `<pathspec>` can be a filename or a fileglob.
+
+```shell
+git restore --staged <pathspec>
+```
+
+```shell
+git restore --staged "30seconds.txt"
+# Remove the file `30seconds.txt` from the staging area
+
+git restore --staged src/*.json
+# Remove all files with a `.json` extension in the `src` directory
+
+git restore --staged .
+# Remove all changes from the staging area
+```
diff --git a/snippets/git/s/update-commit-contents.md b/snippets/git/s/update-commit-contents.md
new file mode 100644
index 000000000..7c6836b61
--- /dev/null
+++ b/snippets/git/s/update-commit-contents.md
@@ -0,0 +1,25 @@
+---
+title: Edit the last commit
+type: snippet
+language: git
+tags: [commit]
+cover: tram-car
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Updates the last commit's contents without changing its message.
+
+- Use `git commit --amend --no-edit` to add any staged changes to the last commit, without changing its message.
+
+```shell
+git commit --amend --no-edit
+```
+
+```shell
+git add .
+git commit -m "Fix the network bug"
+# Edit or add files
+git add .
+git commit --amend --no-edit
+# The last commit includes the edited/added files
+```
diff --git a/snippets/git/s/update-commit-message.md b/snippets/git/s/update-commit-message.md
new file mode 100644
index 000000000..7ec8e7385
--- /dev/null
+++ b/snippets/git/s/update-commit-message.md
@@ -0,0 +1,23 @@
+---
+title: Change the last commit's message
+type: snippet
+language: git
+tags: [commit]
+cover: greek-coffee
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Updates the last commit's message without changing its contents.
+
+- Use `git commit --amend -m <message>` to replace the last commit's message with the new `<message>`.
+
+```shell
+git commit --amend -m <message>
+```
+
+```shell
+git add .
+git commit -m "Fix the newtork bug"
+git commit --amend -m "Fix the network bug"
+# The last commit's message is now "Fix the network bug"
+```
diff --git a/snippets/git/s/view-all-branches.md b/snippets/git/s/view-all-branches.md
new file mode 100644
index 000000000..8a8ebf8f6
--- /dev/null
+++ b/snippets/git/s/view-all-branches.md
@@ -0,0 +1,24 @@
+---
+title: View local branches
+type: snippet
+language: git
+tags: [repository,branch]
+cover: aerial-view-port
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Prints a list of all local branches.
+
+- Use `git branch` to display a list of all local branches.
+- Use arrow keys to navigate, press <kbd>Q</kbd> to exit.
+
+```shell
+git branch
+```
+
+```shell
+git branch
+# master
+# patch-1
+# patch-2
+```
diff --git a/snippets/git/s/view-changes-summary.md b/snippets/git/s/view-changes-summary.md
new file mode 100644
index 000000000..21915d80f
--- /dev/null
+++ b/snippets/git/s/view-changes-summary.md
@@ -0,0 +1,25 @@
+---
+title: View a summary of changes between two commits
+type: snippet
+language: git
+tags: [repository,branch]
+author: chalarangelo
+cover: taking-photos
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Prints a summary of changes between two given commits.
+
+- Use `git shortlog <commit>..<other-commit>` to view a summary of changes between the two given commits.
+- Use arrow keys to navigate, press <kbd>Q</kbd> to exit.
+
+```shell
+git shortlog <commit>..<other-commit>
+```
+
+```shell
+git shortlog 3050fc0de..HEAD
+# Duck Quacking (2):
+#      Fix network bug
+#      Update documentation
+```
diff --git a/snippets/git/s/view-commit-graph.md b/snippets/git/s/view-commit-graph.md
new file mode 100644
index 000000000..dc6b771cd
--- /dev/null
+++ b/snippets/git/s/view-commit-graph.md
@@ -0,0 +1,23 @@
+---
+title: View a visual graph of the repository
+type: snippet
+language: git
+tags: [repository]
+cover: city-view
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Prints a visual graph of all commits and branches in the repository.
+
+- Use `git log --pretty=oneline --graph --decorate --all` to view a visual graph of the whole repository's history.
+- Use arrow keys to navigate, press <kbd>Q</kbd> to exit.
+
+```shell
+git log --pretty=oneline --graph --decorate --all
+```
+
+```shell
+git log --pretty=oneline --graph --decorate --all
+# * 3050fc0de Fix network bug
+# * c191f90c7 Initial commit
+```
diff --git a/snippets/git/s/view-commits-by-author.md b/snippets/git/s/view-commits-by-author.md
new file mode 100644
index 000000000..92c08cf18
--- /dev/null
+++ b/snippets/git/s/view-commits-by-author.md
@@ -0,0 +1,25 @@
+---
+title: View commits by author
+type: snippet
+language: git
+tags: [repository,commit]
+cover: comic-glasses
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Prints all commits by the specified author.
+
+- Use `git log --author=<author>` to retrieve all commits by the specified `<author>`.
+- Use arrow keys to navigate, press <kbd>Q</kbd> to exit.
+
+```shell
+git log --author=<author>
+```
+
+```shell
+git log --author="Duck Quacking"
+# commit c191f90c7766ee6d5f24e90b552a6d446f0d02e4
+# Author: 30 seconds of code
+# Date: Tue Apr 6 11:11:08 2021 +0300
+# [...]
+```
diff --git a/snippets/git/s/view-commits-by-string.md b/snippets/git/s/view-commits-by-string.md
new file mode 100644
index 000000000..5d5cc0ed3
--- /dev/null
+++ b/snippets/git/s/view-commits-by-string.md
@@ -0,0 +1,25 @@
+---
+title: View commits that manipulated a specific string
+type: snippet
+language: git
+tags: [commit]
+cover: bunny-poster
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Prints a list of all commits that manipulated a given string.
+
+- Use `git log -S<string>` to find all commits that manipulated the specified `<string>`.
+- Use arrow keys to navigate, press <kbd>Q</kbd> to exit.
+
+```shell
+git log -S<string>
+```
+
+```shell
+git log -S"30-seconds"
+# commit c191f90c7766ee6d5f24e90b552a6d446f0d02e4
+# Author: 30 seconds of code
+# Date: Tue Apr 6 11:11:08 2021 +0300
+# [...]
+```
diff --git a/snippets/git/s/view-commits-in-date-range.md b/snippets/git/s/view-commits-in-date-range.md
new file mode 100644
index 000000000..32a57f518
--- /dev/null
+++ b/snippets/git/s/view-commits-in-date-range.md
@@ -0,0 +1,32 @@
+---
+title: View commits in a specific date range
+type: snippet
+language: git
+tags: [repository,commit]
+cover: organizer
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Prints all commits in the specified date range.
+
+- Use `git log --since=<date-from> --until=<date-to>` to view a log of all commits between `<date-from>` and `<date-to>`.
+- You can use only `--since=<date-from>` to see all commits since a specific date or only `--until=<date-to>` to view all commits up to a specific date
+- Use arrow keys to navigate, press <kbd>Q</kbd> to exit.
+
+```shell
+git log [--since=<date-from>] [--until=<date-to>]
+```
+
+```shell
+git log --since='Apr 1 2021' --until='Apr 4 2021'
+# commit c191f90c7766ee6d5f24e90b552a6d446f0d02e4
+# Author: 30 seconds of code
+# Date: Tue Apr 6 11:11:08 2021 +0300
+# [...]
+
+git log --since='2 weeks ago'
+# commit c191f90c7766ee6d5f24e90b552a6d446f0d02e4
+# Author: 30 seconds of code
+# Date: Tue Apr 6 11:11:08 2021 +0300
+# [...]
+```
diff --git a/snippets/git/s/view-commits-summary-no-merges.md b/snippets/git/s/view-commits-summary-no-merges.md
new file mode 100644
index 000000000..f60637c70
--- /dev/null
+++ b/snippets/git/s/view-commits-summary-no-merges.md
@@ -0,0 +1,22 @@
+---
+title: View a short summary of commits without merge commits
+type: snippet
+language: git
+tags: [repository,commit]
+cover: river-flow
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Prints a short summary of all commits excluding merge commits.
+
+- Use `git log --oneline --no-merges` to list a short summary of all commits without merge commits.
+
+```shell
+git log --oneline --no-merges
+```
+
+```shell
+git log --oneline --no-merges
+# 3050fc0de Fix network bug
+# c191f90c7 Initial commit
+```
diff --git a/snippets/git/s/view-commits-summary.md b/snippets/git/s/view-commits-summary.md
new file mode 100644
index 000000000..9556fd2ad
--- /dev/null
+++ b/snippets/git/s/view-commits-summary.md
@@ -0,0 +1,23 @@
+---
+title: View a short summary of commits
+type: snippet
+language: git
+tags: [repository,commit]
+cover: highlands
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Prints a short summary of all commits.
+
+- Use `git log --oneline` to list a short summary of all commits.
+
+```shell
+git log --oneline
+```
+
+```shell
+git log --oneline
+# d540ba1ab Merge network bug fix
+# 3050fc0de Fix network bug
+# c191f90c7 Initial commit
+```
diff --git a/snippets/git/s/view-differences.md b/snippets/git/s/view-differences.md
new file mode 100644
index 000000000..1f5d9ed87
--- /dev/null
+++ b/snippets/git/s/view-differences.md
@@ -0,0 +1,26 @@
+---
+title: View differences in changes
+type: snippet
+language: git
+tags: [commit,branch]
+author: chalarangelo
+cover: plant-candle
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Displays differences between staged or unstaged changes and the last commit.
+
+- Use `git diff` to view differences between your unstaged changes and the last commit.
+- You can use the `--staged` option to view differences between your staged changes and the last commit instead.
+
+```shell
+git diff [--staged]
+```
+
+```shell
+git diff
+# Displays the differences between unstaged changes and the last commit
+
+git diff --staged
+# Displays the differences between staged changes and the last commit
+```
diff --git a/snippets/git/s/view-last-commit.md b/snippets/git/s/view-last-commit.md
new file mode 100644
index 000000000..ddb741ffa
--- /dev/null
+++ b/snippets/git/s/view-last-commit.md
@@ -0,0 +1,25 @@
+---
+title: View last commit
+type: snippet
+language: git
+tags: [commit]
+cover: green-plant
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Prints the last commit.
+
+- Use `git log -1` to view the last commit.
+- Use arrow keys to navigate, press <kbd>Q</kbd> to exit.
+
+```shell
+git log -1
+```
+
+```shell
+git log -1
+# commit c191f90c7766ee6d5f24e90b552a6d446f0d02e4
+# Author: 30 seconds of code
+# Date: Tue Apr 6 11:11:08 2021 +0300
+# [...]
+```
diff --git a/snippets/git/s/view-merged-branches.md b/snippets/git/s/view-merged-branches.md
new file mode 100644
index 000000000..41feadf11
--- /dev/null
+++ b/snippets/git/s/view-merged-branches.md
@@ -0,0 +1,24 @@
+---
+title: View merged branches
+type: snippet
+language: git
+tags: [repository,branch]
+cover: cobbled-street
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Prints a list of all merged local branches.
+
+- Use `git branch -a --merged` to display a list of all merged local branches.
+- Use arrow keys to navigate, press <kbd>Q</kbd> to exit.
+
+```shell
+git branch -a --merged
+```
+
+```shell
+git checkout master
+git branch -a --merged
+# patch-1
+# patch-2
+```
diff --git a/snippets/git/s/view-remote-url.md b/snippets/git/s/view-remote-url.md
new file mode 100644
index 000000000..71e1514c4
--- /dev/null
+++ b/snippets/git/s/view-remote-url.md
@@ -0,0 +1,22 @@
+---
+title: View the remote URL
+type: snippet
+language: git
+tags: [repository]
+author: chalarangelo
+cover: red-mountain
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Displays the URL of the remote repository.
+
+- Use `git config --get remote.origin.url` to view the URL of the remote repository.
+
+```shell
+git config --get remote.origin.url
+```
+
+```shell
+git config --get remote.origin.url
+# https://github.com/30-seconds/30-seconds-of-code
+```
diff --git a/snippets/git/s/view-status.md b/snippets/git/s/view-status.md
new file mode 100644
index 000000000..c87b8deb7
--- /dev/null
+++ b/snippets/git/s/view-status.md
@@ -0,0 +1,34 @@
+---
+title: View current status
+type: snippet
+language: git
+tags: [branch]
+author: chalarangelo
+cover: periscope
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+Prints the current status of the working tree.
+
+- Use `git status` to view the current status of the working tree.
+- You can optionally add the `-sb` flag to view the short form of the same output
+
+```shell
+git status [-sb]
+```
+
+```shell
+git status
+# On branch patch-1
+# Your branch is up to date with 'origin/patch-1'.
+#
+# Untracked files:
+#  (use "git add <file>..." to include in what will be committed)
+#  30-seconds.txt
+#
+# nothing added to commit but untracked files present (use "git add" to track)
+
+git status -sb
+# ## patch-1...origin/patch-1
+# ?? 30-seconds.txt
+```
diff --git a/snippets/git/s/view-undo-history.md b/snippets/git/s/view-undo-history.md
new file mode 100644
index 000000000..adfa4fa22
--- /dev/null
+++ b/snippets/git/s/view-undo-history.md
@@ -0,0 +1,30 @@
+---
+title: View "undo" history
+type: snippet
+language: git
+tags: [repository,branch]
+cover: rock-climbing
+dateModified: 2021-04-13T21:10:59+03:00
+---
+
+View git's reference logs. This is especially useful for finding references that don't show up in commit history.
+
+- Use `git reflog` to display the git reference log.
+
+- View your "undo" history
+Because sometimes git log doesn't cut it, especially for commands that don't show up in your commit history.
+
+reflog is basically your safety net after running "scary" commands like git rebase. You'll be able to see not only the commits you made, but each of the actions that led you there.
+
+```shell
+git reflog
+```
+
+```shell
+git reflog
+# b6a4f9d6ff9 (HEAD -> patch-1, origin/patch-1) HEAD@{0}: Update docs
+# 3050fc0de HEAD@{1}: rebase -i (finish): returning to refs/heads/patch-1
+# 3050fc0de HEAD@{2}: rebase -i (pick): Fix network bug
+# 93df3f495 (origin/patch-2) HEAD@{3}: rebase -i (start): checkout origin/master
+# 69beaeabb HEAD@{4}: rebase -i (finish): returning to refs/heads/patch-1
+```
diff --git a/snippets/git/template.md b/snippets/git/template.md
new file mode 100644
index 000000000..b7197756a
--- /dev/null
+++ b/snippets/git/template.md
@@ -0,0 +1,23 @@
+---
+title: Snippet name
+type: snippet
+language: git
+tags: [branch]
+cover: image
+dateModified: 2021-06-13T05:00:00-04:00
+---
+
+Explain briefly what the snippet does.
+
+- Explain briefly how the snippet works.
+- Use bullet points for your snippet's explanation.
+- Try to explain everything briefly but clearly.
+
+```shell
+git command <variable> [--option]
+```
+
+```shell
+git command some-branch --quiet
+# Output of running command on `some-branch`
+```
diff --git a/snippets/accumulate.md b/snippets/js/s/accumulate.md
similarity index 97%
rename from snippets/accumulate.md
rename to snippets/js/s/accumulate.md
index 35035db9b..f44718461 100644
--- a/snippets/accumulate.md
+++ b/snippets/js/s/accumulate.md
@@ -1,6 +1,7 @@
 ---
 title: Partial sum array
 type: snippet
+language: javascript
 tags: [math]
 author: chalarangelo
 cover: river-house-lights
diff --git a/snippets/add-class.md b/snippets/js/s/add-class.md
similarity index 95%
rename from snippets/add-class.md
rename to snippets/js/s/add-class.md
index b96d07caa..842dbc9a4 100644
--- a/snippets/add-class.md
+++ b/snippets/js/s/add-class.md
@@ -1,6 +1,7 @@
 ---
 title: Add class to HTML element
 type: snippet
+language: javascript
 tags: [browser]
 author: chalarangelo
 cover: budapest-palace
diff --git a/snippets/add-days-to-date.md b/snippets/js/s/add-days-to-date.md
similarity index 97%
rename from snippets/add-days-to-date.md
rename to snippets/js/s/add-days-to-date.md
index 156036690..d485090ec 100644
--- a/snippets/add-days-to-date.md
+++ b/snippets/js/s/add-days-to-date.md
@@ -1,6 +1,7 @@
 ---
 title: Add days to date
 type: snippet
+language: javascript
 tags: [date]
 cover: digital-nomad-12
 dateModified: 2020-11-28T19:18:29+02:00
diff --git a/snippets/add-event-listener-all.md b/snippets/js/s/add-event-listener-all.md
similarity index 97%
rename from snippets/add-event-listener-all.md
rename to snippets/js/s/add-event-listener-all.md
index 26d714a62..c35a17483 100644
--- a/snippets/add-event-listener-all.md
+++ b/snippets/js/s/add-event-listener-all.md
@@ -1,6 +1,7 @@
 ---
 title: Add event listener to all targets
 type: snippet
+language: javascript
 tags: [browser,event]
 author: chalarangelo
 cover: red-mountain
diff --git a/snippets/add-minutes-to-date.md b/snippets/js/s/add-minutes-to-date.md
similarity index 97%
rename from snippets/add-minutes-to-date.md
rename to snippets/js/s/add-minutes-to-date.md
index fd323cd94..9c3d1498c 100644
--- a/snippets/add-minutes-to-date.md
+++ b/snippets/js/s/add-minutes-to-date.md
@@ -1,6 +1,7 @@
 ---
 title: Add minutes to date
 type: snippet
+language: javascript
 tags: [date]
 cover: lake-trees
 dateModified: 2020-11-28T19:27:46+02:00
diff --git a/snippets/add-multiple-events.md b/snippets/js/s/add-multiple-events.md
similarity index 96%
rename from snippets/add-multiple-events.md
rename to snippets/js/s/add-multiple-events.md
index 5de00a0d4..e5b55a996 100644
--- a/snippets/add-multiple-events.md
+++ b/snippets/js/s/add-multiple-events.md
@@ -1,6 +1,7 @@
 ---
 title: Add multiple listeners
 type: snippet
+language: javascript
 tags: [browser,event]
 cover: balloons
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/add-styles.md b/snippets/js/s/add-styles.md
similarity index 96%
rename from snippets/add-styles.md
rename to snippets/js/s/add-styles.md
index c6940203e..fab4c1400 100644
--- a/snippets/add-styles.md
+++ b/snippets/js/s/add-styles.md
@@ -1,6 +1,7 @@
 ---
 title: Add styles to HTML element
 type: snippet
+language: javascript
 tags: [browser]
 author: chalarangelo
 cover: digital-nomad-14
diff --git a/snippets/add-week-days.md b/snippets/js/s/add-week-days.md
similarity index 98%
rename from snippets/add-week-days.md
rename to snippets/js/s/add-week-days.md
index 18f0e02e3..979e66756 100644
--- a/snippets/add-week-days.md
+++ b/snippets/js/s/add-week-days.md
@@ -1,6 +1,7 @@
 ---
 title: Add weekdays to date
 type: snippet
+language: javascript
 tags: [date]
 cover: digital-nomad-9
 dateModified: 2021-01-08T00:23:44+02:00
diff --git a/snippets/all-equal-by.md b/snippets/js/s/all-equal-by.md
similarity index 97%
rename from snippets/all-equal-by.md
rename to snippets/js/s/all-equal-by.md
index 092c25d23..f4320f300 100644
--- a/snippets/all-equal-by.md
+++ b/snippets/js/s/all-equal-by.md
@@ -1,6 +1,7 @@
 ---
 title: Check if array elements are equal based on function
 type: snippet
+language: javascript
 tags: [array]
 cover: orange-coffee-2
 dateModified: 2020-10-19T22:14:49+03:00
diff --git a/snippets/all-equal.md b/snippets/js/s/all-equal.md
similarity index 96%
rename from snippets/all-equal.md
rename to snippets/js/s/all-equal.md
index 9867d0455..2bfc9bfab 100644
--- a/snippets/all-equal.md
+++ b/snippets/js/s/all-equal.md
@@ -1,6 +1,7 @@
 ---
 title: Check if array elements are equal
 type: snippet
+language: javascript
 tags: [array]
 cover: shelf-plant
 dateModified: 2020-10-18T20:24:28+03:00
diff --git a/snippets/all-unique-by.md b/snippets/js/s/all-unique-by.md
similarity index 97%
rename from snippets/all-unique-by.md
rename to snippets/js/s/all-unique-by.md
index 8de787ebd..bd812e574 100644
--- a/snippets/all-unique-by.md
+++ b/snippets/js/s/all-unique-by.md
@@ -1,6 +1,7 @@
 ---
 title: Check if all array elements are unique based on function
 type: snippet
+language: javascript
 tags: [array]
 cover: digital-nomad-10
 dateModified: 2021-01-08T00:23:44+02:00
diff --git a/snippets/all-unique.md b/snippets/js/s/all-unique.md
similarity index 96%
rename from snippets/all-unique.md
rename to snippets/js/s/all-unique.md
index 311a96535..3f7191867 100644
--- a/snippets/all-unique.md
+++ b/snippets/js/s/all-unique.md
@@ -1,6 +1,7 @@
 ---
 title: Check if all array elements are unique
 type: snippet
+language: javascript
 tags: [array]
 cover: jars-on-shelf
 dateModified: 2021-01-08T00:23:44+02:00
diff --git a/snippets/all.md b/snippets/js/s/all.md
similarity index 96%
rename from snippets/all.md
rename to snippets/js/s/all.md
index c51985517..ebcc40130 100644
--- a/snippets/all.md
+++ b/snippets/js/s/all.md
@@ -1,6 +1,7 @@
 ---
 title: Test if all array elements are truthy
 type: snippet
+language: javascript
 tags: [array]
 cover: touch-flower
 dateModified: 2020-10-18T20:24:28+03:00
diff --git a/snippets/alphabetical.md b/snippets/js/s/alphabetical.md
similarity index 97%
rename from snippets/alphabetical.md
rename to snippets/js/s/alphabetical.md
index ec219c550..0aa95a0fb 100644
--- a/snippets/alphabetical.md
+++ b/snippets/js/s/alphabetical.md
@@ -1,6 +1,7 @@
 ---
 title: Sort array alphabetically
 type: snippet
+language: javascript
 tags: [array]
 author: chalarangelo
 cover: boutique-home-office-1
diff --git a/snippets/and.md b/snippets/js/s/and.md
similarity index 94%
rename from snippets/and.md
rename to snippets/js/s/and.md
index ccbb8c46b..95accb041 100644
--- a/snippets/and.md
+++ b/snippets/js/s/and.md
@@ -1,6 +1,7 @@
 ---
 title: Logical and
 type: snippet
+language: javascript
 tags: [math,logic]
 unlisted: true
 cover: succulent-1
diff --git a/snippets/any.md b/snippets/js/s/any.md
similarity index 96%
rename from snippets/any.md
rename to snippets/js/s/any.md
index 10eed8c19..abca0447d 100644
--- a/snippets/any.md
+++ b/snippets/js/s/any.md
@@ -1,6 +1,7 @@
 ---
 title: Test if any array element is truthy
 type: snippet
+language: javascript
 tags: [array]
 cover: basket-paper
 dateModified: 2020-10-18T20:24:28+03:00
diff --git a/snippets/aperture.md b/snippets/js/s/aperture.md
similarity index 97%
rename from snippets/aperture.md
rename to snippets/js/s/aperture.md
index 203f10f4a..d05c578c8 100644
--- a/snippets/aperture.md
+++ b/snippets/js/s/aperture.md
@@ -1,6 +1,7 @@
 ---
 title: Consecutive element subarrays
 type: snippet
+language: javascript
 tags: [array]
 author: chalarangelo
 cover: camera-zoom
diff --git a/snippets/approximately-equal.md b/snippets/js/s/approximately-equal.md
similarity index 96%
rename from snippets/approximately-equal.md
rename to snippets/js/s/approximately-equal.md
index bf7f4f9a3..f7b3ac805 100644
--- a/snippets/approximately-equal.md
+++ b/snippets/js/s/approximately-equal.md
@@ -1,6 +1,7 @@
 ---
 title: Approximate number equality
 type: snippet
+language: javascript
 tags: [math]
 cover: engine
 dateModified: 2020-11-01T20:50:57+02:00
diff --git a/snippets/arithmetic-progression.md b/snippets/js/s/arithmetic-progression.md
similarity index 96%
rename from snippets/arithmetic-progression.md
rename to snippets/js/s/arithmetic-progression.md
index f11e83c96..5586e4f47 100644
--- a/snippets/arithmetic-progression.md
+++ b/snippets/js/s/arithmetic-progression.md
@@ -1,6 +1,7 @@
 ---
 title: Arithmetic progression
 type: snippet
+language: javascript
 tags: [math,algorithm]
 cover: u-got-this
 dateModified: 2021-10-13T19:29:39+02:00
diff --git a/snippets/array-to-csv.md b/snippets/js/s/array-to-csv.md
similarity index 97%
rename from snippets/array-to-csv.md
rename to snippets/js/s/array-to-csv.md
index 10212691d..0af4b2fcd 100644
--- a/snippets/array-to-csv.md
+++ b/snippets/js/s/array-to-csv.md
@@ -1,6 +1,7 @@
 ---
 title: Array to CSV
 type: snippet
+language: javascript
 tags: [array,string]
 cover: sunrise-over-city
 dateModified: 2020-11-03T21:55:08+02:00
diff --git a/snippets/array-to-html-list.md b/snippets/js/s/array-to-html-list.md
similarity index 96%
rename from snippets/array-to-html-list.md
rename to snippets/js/s/array-to-html-list.md
index 0c22d006f..fabf895b1 100644
--- a/snippets/array-to-html-list.md
+++ b/snippets/js/s/array-to-html-list.md
@@ -1,6 +1,7 @@
 ---
 title: Array to HTML list
 type: snippet
+language: javascript
 tags: [browser,array]
 cover: red-succulent
 dateModified: 2020-10-20T11:46:23+03:00
diff --git a/snippets/ary.md b/snippets/js/s/ary.md
similarity index 96%
rename from snippets/ary.md
rename to snippets/js/s/ary.md
index 8dc3671cc..b1cca27e1 100644
--- a/snippets/ary.md
+++ b/snippets/js/s/ary.md
@@ -1,6 +1,7 @@
 ---
 title: Function arity
 type: snippet
+language: javascript
 tags: [function]
 cover: trippy-chemicals
 dateModified: 2020-10-18T20:24:28+03:00
diff --git a/snippets/assert-valid-keys.md b/snippets/js/s/assert-valid-keys.md
similarity index 96%
rename from snippets/assert-valid-keys.md
rename to snippets/js/s/assert-valid-keys.md
index 197c3b664..670d664a4 100644
--- a/snippets/assert-valid-keys.md
+++ b/snippets/js/s/assert-valid-keys.md
@@ -1,6 +1,7 @@
 ---
 title: Assert object keys are valid
 type: snippet
+language: javascript
 tags: [object]
 author: chalarangelo
 cover: river-flow
diff --git a/snippets/atob.md b/snippets/js/s/atob.md
similarity index 95%
rename from snippets/atob.md
rename to snippets/js/s/atob.md
index 97255ebf2..320a8fe13 100644
--- a/snippets/atob.md
+++ b/snippets/js/s/atob.md
@@ -1,6 +1,7 @@
 ---
 title: Decode Base64 encoded string
 type: snippet
+language: javascript
 tags: [node,string]
 cover: thread
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/attempt.md b/snippets/js/s/attempt.md
similarity index 97%
rename from snippets/attempt.md
rename to snippets/js/s/attempt.md
index aad227256..c1f399f86 100644
--- a/snippets/attempt.md
+++ b/snippets/js/s/attempt.md
@@ -1,6 +1,7 @@
 ---
 title: Attempt invoking a function
 type: snippet
+language: javascript
 tags: [function]
 cover: spanish-resort
 dateModified: 2020-10-18T20:24:28+03:00
diff --git a/snippets/average-by.md b/snippets/js/s/average-by.md
similarity index 97%
rename from snippets/average-by.md
rename to snippets/js/s/average-by.md
index cfdd899d6..b0eaad708 100644
--- a/snippets/average-by.md
+++ b/snippets/js/s/average-by.md
@@ -1,6 +1,7 @@
 ---
 title: Mapped array average
 type: snippet
+language: javascript
 tags: [math]
 cover: rock-climbing
 dateModified: 2020-10-21T21:17:45+03:00
diff --git a/snippets/average.md b/snippets/js/s/average.md
similarity index 95%
rename from snippets/average.md
rename to snippets/js/s/average.md
index c3f353ebd..3205c0d46 100644
--- a/snippets/average.md
+++ b/snippets/js/s/average.md
@@ -1,6 +1,7 @@
 ---
 title: Average of numbers
 type: snippet
+language: javascript
 tags: [math]
 cover: interior-8
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/bifurcate-by.md b/snippets/js/s/bifurcate-by.md
similarity index 97%
rename from snippets/bifurcate-by.md
rename to snippets/js/s/bifurcate-by.md
index 8d64976c5..b0024de3b 100644
--- a/snippets/bifurcate-by.md
+++ b/snippets/js/s/bifurcate-by.md
@@ -1,6 +1,7 @@
 ---
 title: Bifurcate array based on function
 type: snippet
+language: javascript
 tags: [array]
 cover: canoe
 dateModified: 2020-11-01T20:50:57+02:00
diff --git a/snippets/bifurcate.md b/snippets/js/s/bifurcate.md
similarity index 97%
rename from snippets/bifurcate.md
rename to snippets/js/s/bifurcate.md
index 92d9c951f..6793ea1d3 100644
--- a/snippets/bifurcate.md
+++ b/snippets/js/s/bifurcate.md
@@ -1,6 +1,7 @@
 ---
 title: Bifurcate array based on values
 type: snippet
+language: javascript
 tags: [array]
 cover: two-cities
 dateModified: 2020-11-01T20:50:57+02:00
diff --git a/snippets/binary-search.md b/snippets/js/s/binary-search.md
similarity index 97%
rename from snippets/binary-search.md
rename to snippets/js/s/binary-search.md
index 9e7b3ad9c..77d7d0025 100644
--- a/snippets/binary-search.md
+++ b/snippets/js/s/binary-search.md
@@ -1,6 +1,7 @@
 ---
 title: Binary search
 type: snippet
+language: javascript
 tags: [algorithm,array]
 author: chalarangelo
 cover: zen-indoors
diff --git a/snippets/binary.md b/snippets/js/s/binary.md
similarity index 95%
rename from snippets/binary.md
rename to snippets/js/s/binary.md
index 40e4ac409..e1f6b6ea3 100644
--- a/snippets/binary.md
+++ b/snippets/js/s/binary.md
@@ -1,6 +1,7 @@
 ---
 title: Binary function arity
 type: snippet
+language: javascript
 tags: [function]
 author: chalarangelo
 cover: blue-bird
diff --git a/snippets/bind-all.md b/snippets/js/s/bind-all.md
similarity index 97%
rename from snippets/bind-all.md
rename to snippets/js/s/bind-all.md
index 2c8cc4a32..0393675da 100644
--- a/snippets/bind-all.md
+++ b/snippets/js/s/bind-all.md
@@ -1,6 +1,7 @@
 ---
 title: Bind all object methods
 type: snippet
+language: javascript
 tags: [object,function]
 cover: laptop-with-code
 dateModified: 2020-11-03T22:11:18+02:00
diff --git a/snippets/bind-key.md b/snippets/js/s/bind-key.md
similarity index 97%
rename from snippets/bind-key.md
rename to snippets/js/s/bind-key.md
index 3589e1204..414045337 100644
--- a/snippets/bind-key.md
+++ b/snippets/js/s/bind-key.md
@@ -1,6 +1,7 @@
 ---
 title: Bind object method
 type: snippet
+language: javascript
 tags: [function,object]
 cover: oven-paddle
 excerpt: Creates a function that invokes a method at a key in an object, with optional additional parameters.
diff --git a/snippets/bind.md b/snippets/js/s/bind.md
similarity index 97%
rename from snippets/bind.md
rename to snippets/js/s/bind.md
index 9efc73f0e..26b64f7f2 100644
--- a/snippets/bind.md
+++ b/snippets/js/s/bind.md
@@ -1,6 +1,7 @@
 ---
 title: Bind function context
 type: snippet
+language: javascript
 tags: [function,object]
 cover: tranquility
 dateModified: 2020-10-18T23:04:45+03:00
diff --git a/snippets/binomial-coefficient.md b/snippets/js/s/binomial-coefficient.md
similarity index 98%
rename from snippets/binomial-coefficient.md
rename to snippets/js/s/binomial-coefficient.md
index c3a50ddfd..7f8598bb6 100644
--- a/snippets/binomial-coefficient.md
+++ b/snippets/js/s/binomial-coefficient.md
@@ -1,6 +1,7 @@
 ---
 title: Binomial coefficient
 type: snippet
+language: javascript
 tags: [math,algorithm]
 cover: blue-red-mountain
 dateModified: 2020-12-28T13:49:24+02:00
diff --git a/snippets/both.md b/snippets/js/s/both.md
similarity index 96%
rename from snippets/both.md
rename to snippets/js/s/both.md
index ea5f06b63..311c1faf0 100644
--- a/snippets/both.md
+++ b/snippets/js/s/both.md
@@ -1,6 +1,7 @@
 ---
 title: Logical and for functions
 type: snippet
+language: javascript
 tags: [function,logic]
 unlisted: true
 cover: succulent-2
diff --git a/snippets/bottom-visible.md b/snippets/js/s/bottom-visible.md
similarity index 96%
rename from snippets/bottom-visible.md
rename to snippets/js/s/bottom-visible.md
index 62de530ba..5a0b315f9 100644
--- a/snippets/bottom-visible.md
+++ b/snippets/js/s/bottom-visible.md
@@ -1,6 +1,7 @@
 ---
 title: Check if bottom of page is visible
 type: snippet
+language: javascript
 tags: [browser]
 cover: red-mountain
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/btoa.md b/snippets/js/s/btoa.md
similarity index 96%
rename from snippets/btoa.md
rename to snippets/js/s/btoa.md
index 0216078f4..b916e7d5a 100644
--- a/snippets/btoa.md
+++ b/snippets/js/s/btoa.md
@@ -1,6 +1,7 @@
 ---
 title: Encode string to Base64
 type: snippet
+language: javascript
 tags: [node,string]
 cover: laptop-journey
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/bubble-sort.md b/snippets/js/s/bubble-sort.md
similarity index 98%
rename from snippets/bubble-sort.md
rename to snippets/js/s/bubble-sort.md
index df3e57966..c2ab23f0f 100644
--- a/snippets/bubble-sort.md
+++ b/snippets/js/s/bubble-sort.md
@@ -1,6 +1,7 @@
 ---
 title: Bubble sort
 type: snippet
+language: javascript
 tags: [algorithm,array]
 cover: budapest-palace
 dateModified: 2020-12-29T12:18:58+02:00
diff --git a/snippets/bucket-sort.md b/snippets/js/s/bucket-sort.md
similarity index 98%
rename from snippets/bucket-sort.md
rename to snippets/js/s/bucket-sort.md
index 5bdef533d..776542024 100644
--- a/snippets/bucket-sort.md
+++ b/snippets/js/s/bucket-sort.md
@@ -1,6 +1,7 @@
 ---
 title: Bucket sort
 type: snippet
+language: javascript
 tags: [algorithm,array]
 cover: canoe
 dateModified: 2020-12-29T12:22:44+02:00
diff --git a/snippets/byte-size.md b/snippets/js/s/byte-size.md
similarity index 95%
rename from snippets/byte-size.md
rename to snippets/js/s/byte-size.md
index c5fde8e98..17595a492 100644
--- a/snippets/byte-size.md
+++ b/snippets/js/s/byte-size.md
@@ -1,6 +1,7 @@
 ---
 title: Byte size of string
 type: snippet
+language: javascript
 tags: [string]
 cover: mountain-lake-cottage-2
 dateModified: 2020-10-18T23:04:45+03:00
diff --git a/snippets/caesar-cipher.md b/snippets/js/s/caesar-cipher.md
similarity index 98%
rename from snippets/caesar-cipher.md
rename to snippets/js/s/caesar-cipher.md
index 825e51236..f8da202d3 100644
--- a/snippets/caesar-cipher.md
+++ b/snippets/js/s/caesar-cipher.md
@@ -1,6 +1,7 @@
 ---
 title: Caesar cipher
 type: snippet
+language: javascript
 tags: [algorithm,string]
 cover: ancient-greek-building
 dateModified: 2020-12-29T12:29:21+02:00
diff --git a/snippets/call-or-return.md b/snippets/js/s/call-or-return.md
similarity index 96%
rename from snippets/call-or-return.md
rename to snippets/js/s/call-or-return.md
index 319a9e716..5cec2279f 100644
--- a/snippets/call-or-return.md
+++ b/snippets/js/s/call-or-return.md
@@ -1,6 +1,7 @@
 ---
 title: Call or return
 type: snippet
+language: javascript
 tags: [function]
 author: chalarangelo
 cover: cows
diff --git a/snippets/call.md b/snippets/js/s/call.md
similarity index 96%
rename from snippets/call.md
rename to snippets/js/s/call.md
index 195ceecf0..d82e1807d 100644
--- a/snippets/call.md
+++ b/snippets/js/s/call.md
@@ -1,6 +1,7 @@
 ---
 title: Call functions with context
 type: snippet
+language: javascript
 tags: [function]
 cover: rabbit-call
 dateModified: 2021-06-13T13:50:25+03:00
diff --git a/snippets/capitalize-every-word.md b/snippets/js/s/capitalize-every-word.md
similarity index 95%
rename from snippets/capitalize-every-word.md
rename to snippets/js/s/capitalize-every-word.md
index 4a7b5ae80..a7c4add9c 100644
--- a/snippets/capitalize-every-word.md
+++ b/snippets/js/s/capitalize-every-word.md
@@ -1,6 +1,7 @@
 ---
 title: Capitalize every word
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: laptop-plants
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/capitalize.md b/snippets/js/s/capitalize.md
similarity index 97%
rename from snippets/capitalize.md
rename to snippets/js/s/capitalize.md
index d0942a200..cc52bc17e 100644
--- a/snippets/capitalize.md
+++ b/snippets/js/s/capitalize.md
@@ -1,6 +1,7 @@
 ---
 title: Capitalize string
 type: snippet
+language: javascript
 tags: [string]
 cover: digital-nomad-3
 dateModified: 2020-11-01T20:50:57+02:00
diff --git a/snippets/cartesian-product.md b/snippets/js/s/cartesian-product.md
similarity index 96%
rename from snippets/cartesian-product.md
rename to snippets/js/s/cartesian-product.md
index 532455035..ba9b0010e 100644
--- a/snippets/cartesian-product.md
+++ b/snippets/js/s/cartesian-product.md
@@ -1,6 +1,7 @@
 ---
 title: Cartesian product
 type: snippet
+language: javascript
 tags: [math]
 cover: sail-away
 dateModified: 2020-12-29T12:31:43+02:00
diff --git a/snippets/cast-array.md b/snippets/js/s/cast-array.md
similarity index 95%
rename from snippets/cast-array.md
rename to snippets/js/s/cast-array.md
index aff0e997c..0e76c29c6 100644
--- a/snippets/cast-array.md
+++ b/snippets/js/s/cast-array.md
@@ -1,6 +1,7 @@
 ---
 title: Cast to array
 type: snippet
+language: javascript
 tags: [type,array]
 cover: man-red-sunset
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/celsius-to-fahrenheit.md b/snippets/js/s/celsius-to-fahrenheit.md
similarity index 94%
rename from snippets/celsius-to-fahrenheit.md
rename to snippets/js/s/celsius-to-fahrenheit.md
index 49e9711c7..e61518a4e 100644
--- a/snippets/celsius-to-fahrenheit.md
+++ b/snippets/js/s/celsius-to-fahrenheit.md
@@ -1,6 +1,7 @@
 ---
 title: Celsius to Fahrenheit
 type: snippet
+language: javascript
 tags: [math]
 unlisted: true
 cover: last-light
diff --git a/snippets/chain-async.md b/snippets/js/s/chain-async.md
similarity index 97%
rename from snippets/chain-async.md
rename to snippets/js/s/chain-async.md
index 0ad8b8a4e..6aba18dc2 100644
--- a/snippets/chain-async.md
+++ b/snippets/js/s/chain-async.md
@@ -1,6 +1,7 @@
 ---
 title: Chain async functions
 type: snippet
+language: javascript
 tags: [function]
 cover: tram-car
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/change-lightness.md b/snippets/js/s/change-lightness.md
similarity index 97%
rename from snippets/change-lightness.md
rename to snippets/js/s/change-lightness.md
index 64f6ceb59..0d10b2570 100644
--- a/snippets/change-lightness.md
+++ b/snippets/js/s/change-lightness.md
@@ -1,6 +1,7 @@
 ---
 title: Change color lightness
 type: snippet
+language: javascript
 tags: [string,browser,regexp]
 cover: aerial-view-port
 dateModified: 2020-10-31T16:37:54+02:00
diff --git a/snippets/check-prop.md b/snippets/js/s/check-prop.md
similarity index 97%
rename from snippets/check-prop.md
rename to snippets/js/s/check-prop.md
index bb512ffdb..190eda569 100644
--- a/snippets/check-prop.md
+++ b/snippets/js/s/check-prop.md
@@ -1,6 +1,7 @@
 ---
 title: Check property
 type: snippet
+language: javascript
 tags: [function,object]
 cover: white-tablet-2
 dateModified: 2020-11-01T20:50:57+02:00
diff --git a/snippets/chunk-into-n.md b/snippets/js/s/chunk-into-n.md
similarity index 97%
rename from snippets/chunk-into-n.md
rename to snippets/js/s/chunk-into-n.md
index 1a48caa23..1f9f0674f 100644
--- a/snippets/chunk-into-n.md
+++ b/snippets/js/s/chunk-into-n.md
@@ -1,6 +1,7 @@
 ---
 title: Split array into n chunks
 type: snippet
+language: javascript
 tags: [array]
 author: chalarangelo
 cover: dark-leaves-2
diff --git a/snippets/chunk.md b/snippets/js/s/chunk.md
similarity index 97%
rename from snippets/chunk.md
rename to snippets/js/s/chunk.md
index f136e5a56..3012b32b7 100644
--- a/snippets/chunk.md
+++ b/snippets/js/s/chunk.md
@@ -1,6 +1,7 @@
 ---
 title: Split into chunks
 type: snippet
+language: javascript
 tags: [array]
 cover: filter-coffee-pot
 dateModified: 2020-11-03T21:35:12+02:00
diff --git a/snippets/chunkify.md b/snippets/js/s/chunkify.md
similarity index 97%
rename from snippets/chunkify.md
rename to snippets/js/s/chunkify.md
index 9a86cdcf4..2712974de 100644
--- a/snippets/chunkify.md
+++ b/snippets/js/s/chunkify.md
@@ -1,6 +1,7 @@
 ---
 title: Chunk iterable
 type: snippet
+language: javascript
 tags: [function,generator,array]
 author: chalarangelo
 cover: cave-view
diff --git a/snippets/clamp-number.md b/snippets/js/s/clamp-number.md
similarity index 95%
rename from snippets/clamp-number.md
rename to snippets/js/s/clamp-number.md
index b014ce777..fec9c251d 100644
--- a/snippets/clamp-number.md
+++ b/snippets/js/s/clamp-number.md
@@ -1,6 +1,7 @@
 ---
 title: Clamp number
 type: snippet
+language: javascript
 tags: [math]
 cover: clay-pot-horizon
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/clone-reg-exp.md b/snippets/js/s/clone-reg-exp.md
similarity index 95%
rename from snippets/clone-reg-exp.md
rename to snippets/js/s/clone-reg-exp.md
index 3802f2ab5..b0d3c7f31 100644
--- a/snippets/clone-reg-exp.md
+++ b/snippets/js/s/clone-reg-exp.md
@@ -1,6 +1,7 @@
 ---
 title: Clone RegExp
 type: snippet
+language: javascript
 tags: [type]
 cover: tomatoes
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/closest.md b/snippets/js/s/closest.md
similarity index 96%
rename from snippets/closest.md
rename to snippets/js/s/closest.md
index c6877ab71..97bbda6ec 100644
--- a/snippets/closest.md
+++ b/snippets/js/s/closest.md
@@ -1,6 +1,7 @@
 ---
 title: Closest numeric match
 type: snippet
+language: javascript
 tags: [math]
 author: chalarangelo
 cover: sparkles
diff --git a/snippets/coalesce-factory.md b/snippets/js/s/coalesce-factory.md
similarity index 96%
rename from snippets/coalesce-factory.md
rename to snippets/js/s/coalesce-factory.md
index a26e03c7a..e6d9171b3 100644
--- a/snippets/coalesce-factory.md
+++ b/snippets/js/s/coalesce-factory.md
@@ -1,6 +1,7 @@
 ---
 title: Argument coalescing factory
 type: snippet
+language: javascript
 tags: [function,type]
 cover: coffee-phone-tray
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/coalesce.md b/snippets/js/s/coalesce.md
similarity index 95%
rename from snippets/coalesce.md
rename to snippets/js/s/coalesce.md
index 3d3acfd74..725fc1b4a 100644
--- a/snippets/coalesce.md
+++ b/snippets/js/s/coalesce.md
@@ -1,6 +1,7 @@
 ---
 title: Argument coalescing
 type: snippet
+language: javascript
 tags: [type]
 cover: flower-portrait-1
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/collect-into.md b/snippets/js/s/collect-into.md
similarity index 96%
rename from snippets/collect-into.md
rename to snippets/js/s/collect-into.md
index d99253406..ce7845b12 100644
--- a/snippets/collect-into.md
+++ b/snippets/js/s/collect-into.md
@@ -1,6 +1,7 @@
 ---
 title: Convert function to variadic
 type: snippet
+language: javascript
 tags: [function,array]
 cover: polar-bear
 dateModified: 2021-06-13T13:50:25+03:00
diff --git a/snippets/colorize.md b/snippets/js/s/colorize.md
similarity index 98%
rename from snippets/colorize.md
rename to snippets/js/s/colorize.md
index 79dd69577..615cb4eb8 100644
--- a/snippets/colorize.md
+++ b/snippets/js/s/colorize.md
@@ -1,6 +1,7 @@
 ---
 title: Colorize text
 type: snippet
+language: javascript
 tags: [node,string]
 cover: sea-view
 dateModified: 2020-11-03T22:11:18+02:00
diff --git a/snippets/combine.md b/snippets/js/s/combine.md
similarity index 97%
rename from snippets/combine.md
rename to snippets/js/s/combine.md
index ef6e912a9..69affab8d 100644
--- a/snippets/combine.md
+++ b/snippets/js/s/combine.md
@@ -1,6 +1,7 @@
 ---
 title: Combine object arrays
 type: snippet
+language: javascript
 tags: [array,object]
 author: chalarangelo
 cover: digital-nomad-6
diff --git a/snippets/common-keys.md b/snippets/js/s/common-keys.md
similarity index 96%
rename from snippets/common-keys.md
rename to snippets/js/s/common-keys.md
index 31921d714..f101c850a 100644
--- a/snippets/common-keys.md
+++ b/snippets/js/s/common-keys.md
@@ -1,6 +1,7 @@
 ---
 title: Common keys
 type: snippet
+language: javascript
 tags: [object]
 author: chalarangelo
 cover: symmetry-cloudy-mountain
diff --git a/snippets/compact-join.md b/snippets/js/s/compact-join.md
similarity index 96%
rename from snippets/compact-join.md
rename to snippets/js/s/compact-join.md
index 91d0ff298..85415d3e9 100644
--- a/snippets/compact-join.md
+++ b/snippets/js/s/compact-join.md
@@ -1,6 +1,7 @@
 ---
 title: Compact and join array
 type: snippet
+language: javascript
 tags: [array]
 author: chalarangelo
 cover: racoon
diff --git a/snippets/compact-object.md b/snippets/js/s/compact-object.md
similarity index 98%
rename from snippets/compact-object.md
rename to snippets/js/s/compact-object.md
index 81e5522b2..de8892abd 100644
--- a/snippets/compact-object.md
+++ b/snippets/js/s/compact-object.md
@@ -1,6 +1,7 @@
 ---
 title: Compact object
 type: snippet
+language: javascript
 tags: [object,array,recursion]
 cover: shapes
 dateModified: 2020-11-27T13:57:41+02:00
diff --git a/snippets/compact-whitespace.md b/snippets/js/s/compact-whitespace.md
similarity index 95%
rename from snippets/compact-whitespace.md
rename to snippets/js/s/compact-whitespace.md
index 395060a09..6e700277a 100644
--- a/snippets/compact-whitespace.md
+++ b/snippets/js/s/compact-whitespace.md
@@ -1,6 +1,7 @@
 ---
 title: Compact whitespaces
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: travel-mug-1
 dateModified: 2020-10-18T23:04:45+03:00
diff --git a/snippets/compact.md b/snippets/js/s/compact.md
similarity index 95%
rename from snippets/compact.md
rename to snippets/js/s/compact.md
index fdb1a619f..da5fdab0d 100644
--- a/snippets/compact.md
+++ b/snippets/js/s/compact.md
@@ -1,6 +1,7 @@
 ---
 title: Compact array
 type: snippet
+language: javascript
 tags: [array]
 cover: basket-paper
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/complement.md b/snippets/js/s/complement.md
similarity index 95%
rename from snippets/complement.md
rename to snippets/js/s/complement.md
index 47e34dea4..cba67114f 100644
--- a/snippets/complement.md
+++ b/snippets/js/s/complement.md
@@ -1,6 +1,7 @@
 ---
 title: Logical complement
 type: snippet
+language: javascript
 tags: [function,logic]
 cover: flower-portrait-10
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/compose-right.md b/snippets/js/s/compose-right.md
similarity index 96%
rename from snippets/compose-right.md
rename to snippets/js/s/compose-right.md
index 39d529615..b04631949 100644
--- a/snippets/compose-right.md
+++ b/snippets/js/s/compose-right.md
@@ -1,6 +1,7 @@
 ---
 title: Reverse compose functions
 type: snippet
+language: javascript
 tags: [function]
 cover: rocky-beach
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/compose.md b/snippets/js/s/compose.md
similarity index 96%
rename from snippets/compose.md
rename to snippets/js/s/compose.md
index d7377d453..95a397832 100644
--- a/snippets/compose.md
+++ b/snippets/js/s/compose.md
@@ -1,6 +1,7 @@
 ---
 title: Compose functions
 type: snippet
+language: javascript
 tags: [function]
 cover: digital-nomad-16
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/contains-whitespace.md b/snippets/js/s/contains-whitespace.md
similarity index 96%
rename from snippets/contains-whitespace.md
rename to snippets/js/s/contains-whitespace.md
index de5eb7c86..5789161e9 100644
--- a/snippets/contains-whitespace.md
+++ b/snippets/js/s/contains-whitespace.md
@@ -1,6 +1,7 @@
 ---
 title: Check if string contains whitespace
 type: snippet
+language: javascript
 tags: [string,regexp]
 author: chalarangelo
 cover: bag-waiting
diff --git a/snippets/converge.md b/snippets/js/s/converge.md
similarity index 97%
rename from snippets/converge.md
rename to snippets/js/s/converge.md
index af7b71c54..5ca54633e 100644
--- a/snippets/converge.md
+++ b/snippets/js/s/converge.md
@@ -1,6 +1,7 @@
 ---
 title: Converge branching functions
 type: snippet
+language: javascript
 tags: [function]
 excerpt: Converges a list of branching functions into a single function and returns the result.
 cover: cherry-trees
diff --git a/snippets/copy-sign.md b/snippets/js/s/copy-sign.md
similarity index 95%
rename from snippets/copy-sign.md
rename to snippets/js/s/copy-sign.md
index 40d5be1bd..80103b64b 100644
--- a/snippets/copy-sign.md
+++ b/snippets/js/s/copy-sign.md
@@ -1,6 +1,7 @@
 ---
 title: Copy sign to number
 type: snippet
+language: javascript
 tags: [math]
 cover: keyboard-tea
 dateModified: 2020-10-07T23:52:57+03:00
diff --git a/snippets/copy-to-clipboard-async.md b/snippets/js/s/copy-to-clipboard-async.md
similarity index 98%
rename from snippets/copy-to-clipboard-async.md
rename to snippets/js/s/copy-to-clipboard-async.md
index a2bcc6700..0a7b05125 100644
--- a/snippets/copy-to-clipboard-async.md
+++ b/snippets/js/s/copy-to-clipboard-async.md
@@ -1,6 +1,7 @@
 ---
 title: Copy to clipboard async
 type: snippet
+language: javascript
 tags: [browser,string,promise]
 cover: typing
 dateModified: 2022-01-11T05:00:00-04:00
diff --git a/snippets/copy-to-clipboard.md b/snippets/js/s/copy-to-clipboard.md
similarity index 98%
rename from snippets/copy-to-clipboard.md
rename to snippets/js/s/copy-to-clipboard.md
index df79ff504..eac85865f 100644
--- a/snippets/copy-to-clipboard.md
+++ b/snippets/js/s/copy-to-clipboard.md
@@ -1,6 +1,7 @@
 ---
 title: Copy to clipboard
 type: snippet
+language: javascript
 tags: [browser,string,event]
 cover: typing
 dateModified: 2022-01-11T09:32:04+02:00
diff --git a/snippets/count-by.md b/snippets/js/s/count-by.md
similarity index 97%
rename from snippets/count-by.md
rename to snippets/js/s/count-by.md
index 9d877d3b8..b52f06add 100644
--- a/snippets/count-by.md
+++ b/snippets/js/s/count-by.md
@@ -1,6 +1,7 @@
 ---
 title: Count grouped elements
 type: snippet
+language: javascript
 tags: [array,object]
 cover: tools
 dateModified: 2020-11-03T22:11:18+02:00
diff --git a/snippets/count-occurrences.md b/snippets/js/s/count-occurrences.md
similarity index 95%
rename from snippets/count-occurrences.md
rename to snippets/js/s/count-occurrences.md
index 7f89cef8e..e681af94c 100644
--- a/snippets/count-occurrences.md
+++ b/snippets/js/s/count-occurrences.md
@@ -1,6 +1,7 @@
 ---
 title: Count occurrences
 type: snippet
+language: javascript
 tags: [array]
 cover: dark-leaves-4
 dateModified: 2020-10-18T23:04:45+03:00
diff --git a/snippets/count-substrings.md b/snippets/js/s/count-substrings.md
similarity index 97%
rename from snippets/count-substrings.md
rename to snippets/js/s/count-substrings.md
index 09f5ffac4..380ca9af0 100644
--- a/snippets/count-substrings.md
+++ b/snippets/js/s/count-substrings.md
@@ -1,6 +1,7 @@
 ---
 title: Count substrings of string
 type: snippet
+language: javascript
 tags: [string,algorithm]
 author: chalarangelo
 cover: obelisk
diff --git a/snippets/count-week-days-between.md b/snippets/js/s/count-week-days-between.md
similarity index 98%
rename from snippets/count-week-days-between.md
rename to snippets/js/s/count-week-days-between.md
index 57f3edafa..8c046e52c 100644
--- a/snippets/count-week-days-between.md
+++ b/snippets/js/s/count-week-days-between.md
@@ -1,6 +1,7 @@
 ---
 title: Count weekdays between two dates
 type: snippet
+language: javascript
 tags: [date]
 cover: organizer
 dateModified: 2020-10-20T11:21:07+03:00
diff --git a/snippets/counter.md b/snippets/js/s/counter.md
similarity index 98%
rename from snippets/counter.md
rename to snippets/js/s/counter.md
index d8e6be75a..8731b0b98 100644
--- a/snippets/counter.md
+++ b/snippets/js/s/counter.md
@@ -1,6 +1,7 @@
 ---
 title: Counter
 type: snippet
+language: javascript
 tags: [browser]
 cover: touch-flower
 dateModified: 2020-11-01T20:50:57+02:00
diff --git a/snippets/create-dir-if-not-exists.md b/snippets/js/s/create-dir-if-not-exists.md
similarity index 95%
rename from snippets/create-dir-if-not-exists.md
rename to snippets/js/s/create-dir-if-not-exists.md
index b581c9fab..50beba0b6 100644
--- a/snippets/create-dir-if-not-exists.md
+++ b/snippets/js/s/create-dir-if-not-exists.md
@@ -1,6 +1,7 @@
 ---
 title: Create directory if not exists
 type: snippet
+language: javascript
 tags: [node]
 cover: sunrise-over-city
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/create-element.md b/snippets/js/s/create-element.md
similarity index 97%
rename from snippets/create-element.md
rename to snippets/js/s/create-element.md
index 7eb721ba8..a96ad9159 100644
--- a/snippets/create-element.md
+++ b/snippets/js/s/create-element.md
@@ -1,6 +1,7 @@
 ---
 title: Create HTML element
 type: snippet
+language: javascript
 tags: [browser]
 cover: flower-portrait-4
 excerpt: Creates an element from a string without appending it to the document.
diff --git a/snippets/create-event-hub.md b/snippets/js/s/create-event-hub.md
similarity index 99%
rename from snippets/create-event-hub.md
rename to snippets/js/s/create-event-hub.md
index 96218d9e5..bfbffedd7 100644
--- a/snippets/create-event-hub.md
+++ b/snippets/js/s/create-event-hub.md
@@ -1,6 +1,7 @@
 ---
 title: Create event hub
 type: snippet
+language: javascript
 tags: [browser,event]
 cover: city-view
 excerpt: Creates a pub/sub event hub with emit, on, and off methods.
diff --git a/snippets/csv-to-array.md b/snippets/js/s/csv-to-array.md
similarity index 98%
rename from snippets/csv-to-array.md
rename to snippets/js/s/csv-to-array.md
index c505d1fdc..a4449c4b2 100644
--- a/snippets/csv-to-array.md
+++ b/snippets/js/s/csv-to-array.md
@@ -1,6 +1,7 @@
 ---
 title: CSV to array
 type: snippet
+language: javascript
 tags: [string,array]
 cover: keyboard-tea
 dateModified: 2022-01-30T12:14:39+02:00
diff --git a/snippets/csv-to-json.md b/snippets/js/s/csv-to-json.md
similarity index 98%
rename from snippets/csv-to-json.md
rename to snippets/js/s/csv-to-json.md
index 71b6114af..a78add162 100644
--- a/snippets/csv-to-json.md
+++ b/snippets/js/s/csv-to-json.md
@@ -1,6 +1,7 @@
 ---
 title: CSV to JSON
 type: snippet
+language: javascript
 tags: [string,object]
 cover: kettle-laptop
 dateModified: 2022-01-30T12:14:39+02:00
diff --git a/snippets/current-url.md b/snippets/js/s/current-url.md
similarity index 93%
rename from snippets/current-url.md
rename to snippets/js/s/current-url.md
index 4dbcc5153..f9d2e06fa 100644
--- a/snippets/current-url.md
+++ b/snippets/js/s/current-url.md
@@ -1,6 +1,7 @@
 ---
 title: Current URL
 type: snippet
+language: javascript
 tags: [browser]
 cover: tropical-bike
 dateModified: 2020-10-20T11:46:23+03:00
diff --git a/snippets/curry.md b/snippets/js/s/curry.md
similarity index 97%
rename from snippets/curry.md
rename to snippets/js/s/curry.md
index 135f6da6d..d56687dd7 100644
--- a/snippets/curry.md
+++ b/snippets/js/s/curry.md
@@ -1,6 +1,7 @@
 ---
 title: Curry function
 type: snippet
+language: javascript
 tags: [function,recursion]
 cover: rocky-beach-2
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/cycle-generator.md b/snippets/js/s/cycle-generator.md
similarity index 97%
rename from snippets/cycle-generator.md
rename to snippets/js/s/cycle-generator.md
index 7e5bbc722..e844f2517 100644
--- a/snippets/cycle-generator.md
+++ b/snippets/js/s/cycle-generator.md
@@ -1,6 +1,7 @@
 ---
 title: Cycle generator
 type: snippet
+language: javascript
 tags: [function,generator]
 author: chalarangelo
 cover: secret-tree
diff --git a/snippets/date-range-generator.md b/snippets/js/s/date-range-generator.md
similarity index 97%
rename from snippets/date-range-generator.md
rename to snippets/js/s/date-range-generator.md
index 76f11f76e..935498a35 100644
--- a/snippets/date-range-generator.md
+++ b/snippets/js/s/date-range-generator.md
@@ -1,6 +1,7 @@
 ---
 title: Date range generator
 type: snippet
+language: javascript
 tags: [date,function,generator]
 cover: portal-timelapse
 dateModified: 2021-06-21T05:00:00-04:00
diff --git a/snippets/day-name.md b/snippets/js/s/day-name.md
similarity index 96%
rename from snippets/day-name.md
rename to snippets/js/s/day-name.md
index 10b762831..3ec884dbb 100644
--- a/snippets/day-name.md
+++ b/snippets/js/s/day-name.md
@@ -1,6 +1,7 @@
 ---
 title: Day name
 type: snippet
+language: javascript
 tags: [date]
 cover: interior
 dateModified: 2020-11-01T20:50:57+02:00
diff --git a/snippets/day-of-year.md b/snippets/js/s/day-of-year.md
similarity index 96%
rename from snippets/day-of-year.md
rename to snippets/js/s/day-of-year.md
index f227cb616..51595b255 100644
--- a/snippets/day-of-year.md
+++ b/snippets/js/s/day-of-year.md
@@ -1,6 +1,7 @@
 ---
 title: Day of year
 type: snippet
+language: javascript
 tags: [date]
 cover: interior-3
 dateModified: 2020-10-19T18:51:03+03:00
diff --git a/snippets/days-ago.md b/snippets/js/s/days-ago.md
similarity index 96%
rename from snippets/days-ago.md
rename to snippets/js/s/days-ago.md
index a744174f5..1a860ebbb 100644
--- a/snippets/days-ago.md
+++ b/snippets/js/s/days-ago.md
@@ -1,6 +1,7 @@
 ---
 title: Days ago
 type: snippet
+language: javascript
 tags: [date]
 cover: sunrise-over-city
 dateModified: 2022-01-30T11:48:07+03:00
diff --git a/snippets/days-from-now.md b/snippets/js/s/days-from-now.md
similarity index 96%
rename from snippets/days-from-now.md
rename to snippets/js/s/days-from-now.md
index a9c9ccb06..24dc456ee 100644
--- a/snippets/days-from-now.md
+++ b/snippets/js/s/days-from-now.md
@@ -1,6 +1,7 @@
 ---
 title: Days from now
 type: snippet
+language: javascript
 tags: [date]
 cover: tent-stars
 dateModified: 2022-01-30T11:48:07+03:00
diff --git a/snippets/days-in-month.md b/snippets/js/s/days-in-month.md
similarity index 96%
rename from snippets/days-in-month.md
rename to snippets/js/s/days-in-month.md
index a5ef02d5c..4ef39986e 100644
--- a/snippets/days-in-month.md
+++ b/snippets/js/s/days-in-month.md
@@ -1,6 +1,7 @@
 ---
 title: Number of days in month
 type: snippet
+language: javascript
 tags: [date]
 cover: laptop-plants-2
 dateModified: 2021-06-13T05:00:00-04:00
diff --git a/snippets/debounce-promise.md b/snippets/js/s/debounce-promise.md
similarity index 99%
rename from snippets/debounce-promise.md
rename to snippets/js/s/debounce-promise.md
index fdf22665a..0868db956 100644
--- a/snippets/debounce-promise.md
+++ b/snippets/js/s/debounce-promise.md
@@ -1,6 +1,7 @@
 ---
 title: Debounce promise
 type: snippet
+language: javascript
 tags: [function,promise]
 excerpt: Creates a debounced function that returns a promise.
 cover: ice
diff --git a/snippets/debounce.md b/snippets/js/s/debounce.md
similarity index 98%
rename from snippets/debounce.md
rename to snippets/js/s/debounce.md
index 0ab0d4dde..afb9e9abe 100644
--- a/snippets/debounce.md
+++ b/snippets/js/s/debounce.md
@@ -1,6 +1,7 @@
 ---
 title: Debounce function
 type: snippet
+language: javascript
 tags: [function]
 cover: solitude-beach
 excerpt: Creates a debounced function that waits `ms` milliseconds before invoking the provided function again.
diff --git a/snippets/decapitalize.md b/snippets/js/s/decapitalize.md
similarity index 97%
rename from snippets/decapitalize.md
rename to snippets/js/s/decapitalize.md
index 430b94690..647afa6d3 100644
--- a/snippets/decapitalize.md
+++ b/snippets/js/s/decapitalize.md
@@ -1,6 +1,7 @@
 ---
 title: Decapitalize string
 type: snippet
+language: javascript
 tags: [string]
 cover: forest-balcony
 dateModified: 2020-11-01T20:50:57+02:00
diff --git a/snippets/deep-clone.md b/snippets/js/s/deep-clone.md
similarity index 98%
rename from snippets/deep-clone.md
rename to snippets/js/s/deep-clone.md
index f6960ae53..fa7c1c3b6 100644
--- a/snippets/deep-clone.md
+++ b/snippets/js/s/deep-clone.md
@@ -1,6 +1,7 @@
 ---
 title: Deep clone object
 type: snippet
+language: javascript
 tags: [object,recursion]
 cover: neon-desk-2
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/deep-flatten.md b/snippets/js/s/deep-flatten.md
similarity index 96%
rename from snippets/deep-flatten.md
rename to snippets/js/s/deep-flatten.md
index 6b4508acc..12fcce460 100644
--- a/snippets/deep-flatten.md
+++ b/snippets/js/s/deep-flatten.md
@@ -1,6 +1,7 @@
 ---
 title: Deep flatten array
 type: snippet
+language: javascript
 tags: [array,recursion]
 cover: digital-nomad-4
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/deep-freeze.md b/snippets/js/s/deep-freeze.md
similarity index 97%
rename from snippets/deep-freeze.md
rename to snippets/js/s/deep-freeze.md
index c41429e42..31327839a 100644
--- a/snippets/deep-freeze.md
+++ b/snippets/js/s/deep-freeze.md
@@ -1,6 +1,7 @@
 ---
 title: Deep freeze object
 type: snippet
+language: javascript
 tags: [object,recursion]
 cover: frozen-globe
 dateModified: 2020-10-19T18:51:03+03:00
diff --git a/snippets/deep-get.md b/snippets/js/s/deep-get.md
similarity index 97%
rename from snippets/deep-get.md
rename to snippets/js/s/deep-get.md
index 4d2452b75..bcb489c65 100644
--- a/snippets/deep-get.md
+++ b/snippets/js/s/deep-get.md
@@ -1,6 +1,7 @@
 ---
 title: Get nested value in object based on array of keys
 type: snippet
+language: javascript
 tags: [object]
 cover: mask-quiet
 dateModified: 2020-10-19T18:51:03+03:00
diff --git a/snippets/deep-map-keys.md b/snippets/js/s/deep-map-keys.md
similarity index 98%
rename from snippets/deep-map-keys.md
rename to snippets/js/s/deep-map-keys.md
index 45c4df1f4..21327d2d1 100644
--- a/snippets/deep-map-keys.md
+++ b/snippets/js/s/deep-map-keys.md
@@ -1,6 +1,7 @@
 ---
 title: Deep map object keys
 type: snippet
+language: javascript
 tags: [object,recursion]
 cover: duck-plants
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/deep-merge.md b/snippets/js/s/deep-merge.md
similarity index 97%
rename from snippets/deep-merge.md
rename to snippets/js/s/deep-merge.md
index cc9e9193b..378486982 100644
--- a/snippets/deep-merge.md
+++ b/snippets/js/s/deep-merge.md
@@ -1,6 +1,7 @@
 ---
 title: Deep merge objects
 type: snippet
+language: javascript
 tags: [object,function]
 author: chalarangelo
 cover: coffee-drip
diff --git a/snippets/defaults.md b/snippets/js/s/defaults.md
similarity index 97%
rename from snippets/defaults.md
rename to snippets/js/s/defaults.md
index 950ea274f..ad3c675d5 100644
--- a/snippets/defaults.md
+++ b/snippets/js/s/defaults.md
@@ -1,6 +1,7 @@
 ---
 title: Assign default values for object properties
 type: snippet
+language: javascript
 tags: [object]
 cover: boats
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/defer.md b/snippets/js/s/defer.md
similarity index 97%
rename from snippets/defer.md
rename to snippets/js/s/defer.md
index 0b1741e3b..6b45b95de 100644
--- a/snippets/defer.md
+++ b/snippets/js/s/defer.md
@@ -1,6 +1,7 @@
 ---
 title: Defer function invocation
 type: snippet
+language: javascript
 tags: [function]
 cover: cave-view
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/degrees-to-rads.md b/snippets/js/s/degrees-to-rads.md
similarity index 94%
rename from snippets/degrees-to-rads.md
rename to snippets/js/s/degrees-to-rads.md
index 3ab237f46..aed4ec125 100644
--- a/snippets/degrees-to-rads.md
+++ b/snippets/js/s/degrees-to-rads.md
@@ -1,6 +1,7 @@
 ---
 title: Degrees to radians
 type: snippet
+language: javascript
 tags: [math]
 cover: blue-flower
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/delay.md b/snippets/js/s/delay.md
similarity index 96%
rename from snippets/delay.md
rename to snippets/js/s/delay.md
index f43ce6205..9baee36cd 100644
--- a/snippets/delay.md
+++ b/snippets/js/s/delay.md
@@ -1,6 +1,7 @@
 ---
 title: Delay function execution
 type: snippet
+language: javascript
 tags: [function]
 cover: interior-13
 dateModified: 2020-10-19T18:51:03+03:00
diff --git a/snippets/detect-device-type.md b/snippets/js/s/detect-device-type.md
similarity index 96%
rename from snippets/detect-device-type.md
rename to snippets/js/s/detect-device-type.md
index 825b024fd..b29474aad 100644
--- a/snippets/detect-device-type.md
+++ b/snippets/js/s/detect-device-type.md
@@ -1,6 +1,7 @@
 ---
 title: Detect device type
 type: snippet
+language: javascript
 tags: [browser,regexp]
 cover: clutter-2
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/detect-language.md b/snippets/js/s/detect-language.md
similarity index 96%
rename from snippets/detect-language.md
rename to snippets/js/s/detect-language.md
index 931cd6b9f..72a7d963b 100644
--- a/snippets/detect-language.md
+++ b/snippets/js/s/detect-language.md
@@ -1,6 +1,7 @@
 ---
 title: Detect language
 type: snippet
+language: javascript
 tags: [browser]
 cover: accessibility
 dateModified: 2020-10-06T18:47:16+03:00
diff --git a/snippets/difference-by.md b/snippets/js/s/difference-by.md
similarity index 97%
rename from snippets/difference-by.md
rename to snippets/js/s/difference-by.md
index 5146a0d1e..6f670fcaa 100644
--- a/snippets/difference-by.md
+++ b/snippets/js/s/difference-by.md
@@ -1,6 +1,7 @@
 ---
 title: Mapped array difference
 type: snippet
+language: javascript
 tags: [array]
 cover: keyboard
 dateModified: 2020-10-19T18:52:00+03:00
diff --git a/snippets/difference-with.md b/snippets/js/s/difference-with.md
similarity index 97%
rename from snippets/difference-with.md
rename to snippets/js/s/difference-with.md
index 5f2ff83ac..6f28995f0 100644
--- a/snippets/difference-with.md
+++ b/snippets/js/s/difference-with.md
@@ -1,6 +1,7 @@
 ---
 title: Array difference based on function
 type: snippet
+language: javascript
 tags: [array]
 cover: folded-map
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/difference.md b/snippets/js/s/difference.md
similarity index 96%
rename from snippets/difference.md
rename to snippets/js/s/difference.md
index 13c26b0e0..37868ab29 100644
--- a/snippets/difference.md
+++ b/snippets/js/s/difference.md
@@ -1,6 +1,7 @@
 ---
 title: Array difference
 type: snippet
+language: javascript
 tags: [array]
 cover: interior-3
 dateModified: 2020-10-19T18:51:03+03:00
diff --git a/snippets/dig.md b/snippets/js/s/dig.md
similarity index 97%
rename from snippets/dig.md
rename to snippets/js/s/dig.md
index 7a3594acb..35630a2bd 100644
--- a/snippets/dig.md
+++ b/snippets/js/s/dig.md
@@ -1,6 +1,7 @@
 ---
 title: Get nested value in object
 type: snippet
+language: javascript
 tags: [object,recursion]
 cover: brown-bird
 dateModified: 2020-10-19T18:51:03+03:00
diff --git a/snippets/digitize.md b/snippets/js/s/digitize.md
similarity index 96%
rename from snippets/digitize.md
rename to snippets/js/s/digitize.md
index 14919c471..f3cc0a249 100644
--- a/snippets/digitize.md
+++ b/snippets/js/s/digitize.md
@@ -1,6 +1,7 @@
 ---
 title: Digitize number
 type: snippet
+language: javascript
 tags: [math]
 cover: industrial-tokyo
 dateModified: 2020-10-18T14:58:09+03:00
diff --git a/snippets/distance.md b/snippets/js/s/distance.md
similarity index 94%
rename from snippets/distance.md
rename to snippets/js/s/distance.md
index 7ea09f7b0..59d9d8bbd 100644
--- a/snippets/distance.md
+++ b/snippets/js/s/distance.md
@@ -1,6 +1,7 @@
 ---
 title: Distance between two points
 type: snippet
+language: javascript
 tags: [math,algorithm]
 cover: measuring
 dateModified: 2020-12-28T13:49:24+02:00
diff --git a/snippets/divmod.md b/snippets/js/s/divmod.md
similarity index 96%
rename from snippets/divmod.md
rename to snippets/js/s/divmod.md
index 141d4a025..d17648cb6 100644
--- a/snippets/divmod.md
+++ b/snippets/js/s/divmod.md
@@ -1,6 +1,7 @@
 ---
 title: Quotient and module of division
 type: snippet
+language: javascript
 tags: [math]
 cover: italian-horizon
 dateModified: 2020-10-07T23:59:13+03:00
diff --git a/snippets/drop-right-while.md b/snippets/js/s/drop-right-while.md
similarity index 97%
rename from snippets/drop-right-while.md
rename to snippets/js/s/drop-right-while.md
index e3be1a373..5cc7acc1c 100644
--- a/snippets/drop-right-while.md
+++ b/snippets/js/s/drop-right-while.md
@@ -1,6 +1,7 @@
 ---
 title: Drop list elements from the right based on function
 type: snippet
+language: javascript
 tags: [array]
 cover: bridge-drop
 dateModified: 2020-10-19T18:51:03+03:00
diff --git a/snippets/drop-right.md b/snippets/js/s/drop-right.md
similarity index 96%
rename from snippets/drop-right.md
rename to snippets/js/s/drop-right.md
index 5fe7f0f36..ec024d275 100644
--- a/snippets/drop-right.md
+++ b/snippets/js/s/drop-right.md
@@ -1,6 +1,7 @@
 ---
 title: Drop list elements from the right
 type: snippet
+language: javascript
 tags: [array]
 cover: messy-papers
 dateModified: 2020-11-01T20:50:57+02:00
diff --git a/snippets/drop-while.md b/snippets/js/s/drop-while.md
similarity index 96%
rename from snippets/drop-while.md
rename to snippets/js/s/drop-while.md
index e0dc69dbd..1b0893423 100644
--- a/snippets/drop-while.md
+++ b/snippets/js/s/drop-while.md
@@ -1,6 +1,7 @@
 ---
 title: Drop list elements from the left based on function
 type: snippet
+language: javascript
 tags: [array]
 cover: colorful-lounge
 dateModified: 2020-10-19T18:51:03+03:00
diff --git a/snippets/drop.md b/snippets/js/s/drop.md
similarity index 95%
rename from snippets/drop.md
rename to snippets/js/s/drop.md
index 9f851a5b8..01e379f8e 100644
--- a/snippets/drop.md
+++ b/snippets/js/s/drop.md
@@ -1,6 +1,7 @@
 ---
 title: Drop list elements from the left
 type: snippet
+language: javascript
 tags: [array]
 cover: bridge-drop
 dateModified: 2020-11-01T20:50:57+02:00
diff --git a/snippets/either.md b/snippets/js/s/either.md
similarity index 96%
rename from snippets/either.md
rename to snippets/js/s/either.md
index 1685f49cf..3e64a9de9 100644
--- a/snippets/either.md
+++ b/snippets/js/s/either.md
@@ -1,6 +1,7 @@
 ---
 title: Logical or for functions
 type: snippet
+language: javascript
 tags: [function,logic]
 cover: man-red-sunset
 dateModified: 2020-10-19T18:51:03+03:00
diff --git a/snippets/element-contains.md b/snippets/js/s/element-contains.md
similarity index 96%
rename from snippets/element-contains.md
rename to snippets/js/s/element-contains.md
index 4a2d4eb06..87273a3ca 100644
--- a/snippets/element-contains.md
+++ b/snippets/js/s/element-contains.md
@@ -1,6 +1,7 @@
 ---
 title: Element contains another element
 type: snippet
+language: javascript
 tags: [browser]
 cover: red-petals
 dateModified: 2020-11-03T22:11:18+02:00
diff --git a/snippets/element-is-focused.md b/snippets/js/s/element-is-focused.md
similarity index 94%
rename from snippets/element-is-focused.md
rename to snippets/js/s/element-is-focused.md
index 1e058df4b..42444538d 100644
--- a/snippets/element-is-focused.md
+++ b/snippets/js/s/element-is-focused.md
@@ -1,6 +1,7 @@
 ---
 title: Element is focused
 type: snippet
+language: javascript
 tags: [browser]
 author: chalarangelo
 cover: ice
diff --git a/snippets/element-is-visible-in-viewport.md b/snippets/js/s/element-is-visible-in-viewport.md
similarity index 98%
rename from snippets/element-is-visible-in-viewport.md
rename to snippets/js/s/element-is-visible-in-viewport.md
index 52fa6afc4..e1d896ae4 100644
--- a/snippets/element-is-visible-in-viewport.md
+++ b/snippets/js/s/element-is-visible-in-viewport.md
@@ -1,6 +1,7 @@
 ---
 title: Element is visible in viewport
 type: snippet
+language: javascript
 tags: [browser]
 cover: flower-portrait-1
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/ends-with-substring.md b/snippets/js/s/ends-with-substring.md
similarity index 97%
rename from snippets/ends-with-substring.md
rename to snippets/js/s/ends-with-substring.md
index a018d26b2..8267a8a02 100644
--- a/snippets/ends-with-substring.md
+++ b/snippets/js/s/ends-with-substring.md
@@ -2,6 +2,7 @@
 title: String ends with substring
 type: snippet
 shortTitle: Ends with substring
+language: javascript
 tags: [string]
 cover: boutique-home-office-4
 author: chalarangelo
diff --git a/snippets/equals.md b/snippets/js/s/equals.md
similarity index 98%
rename from snippets/equals.md
rename to snippets/js/s/equals.md
index c138112dd..2917915ef 100644
--- a/snippets/equals.md
+++ b/snippets/js/s/equals.md
@@ -1,6 +1,7 @@
 ---
 title: Check object equality
 type: snippet
+language: javascript
 tags: [object,array,type,recursion]
 cover: beach-pineapple
 dateModified: 2021-10-13T19:29:39+02:00
diff --git a/snippets/escape-html.md b/snippets/js/s/escape-html.md
similarity index 97%
rename from snippets/escape-html.md
rename to snippets/js/s/escape-html.md
index a9015eeb3..06ead1879 100644
--- a/snippets/escape-html.md
+++ b/snippets/js/s/escape-html.md
@@ -1,6 +1,7 @@
 ---
 title: Escape HTML
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: periscope
 dateModified: 2021-10-13T19:29:39+02:00
diff --git a/snippets/escape-reg-exp.md b/snippets/js/s/escape-reg-exp.md
similarity index 94%
rename from snippets/escape-reg-exp.md
rename to snippets/js/s/escape-reg-exp.md
index e27d556a9..e55728f7b 100644
--- a/snippets/escape-reg-exp.md
+++ b/snippets/js/s/escape-reg-exp.md
@@ -1,6 +1,7 @@
 ---
 title: Escape RegExp
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: frog-blue-flower
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/euclidean-distance.md b/snippets/js/s/euclidean-distance.md
similarity index 96%
rename from snippets/euclidean-distance.md
rename to snippets/js/s/euclidean-distance.md
index 6bc808375..ca470eb2d 100644
--- a/snippets/euclidean-distance.md
+++ b/snippets/js/s/euclidean-distance.md
@@ -1,6 +1,7 @@
 ---
 title: Euclidean distance
 type: snippet
+language: javascript
 tags: [math,algorithm]
 author: chalarangelo
 cover: ancient-greek-building
diff --git a/snippets/every-nth.md b/snippets/js/s/every-nth.md
similarity index 95%
rename from snippets/every-nth.md
rename to snippets/js/s/every-nth.md
index d0a62e9e1..b0b54f22b 100644
--- a/snippets/every-nth.md
+++ b/snippets/js/s/every-nth.md
@@ -1,6 +1,7 @@
 ---
 title: Every nth element
 type: snippet
+language: javascript
 tags: [array]
 cover: dark-leaves-6
 dateModified: 2020-10-19T18:51:03+03:00
diff --git a/snippets/expand-tabs.md b/snippets/js/s/expand-tabs.md
similarity index 96%
rename from snippets/expand-tabs.md
rename to snippets/js/s/expand-tabs.md
index 4da215b19..97fdb075d 100644
--- a/snippets/expand-tabs.md
+++ b/snippets/js/s/expand-tabs.md
@@ -1,6 +1,7 @@
 ---
 title: Expand tabs into spaces
 type: snippet
+language: javascript
 tags: [string,regexp]
 author: chalarangelo
 cover: houses-rock-sea
diff --git a/snippets/extend-hex.md b/snippets/js/s/extend-hex.md
similarity index 97%
rename from snippets/extend-hex.md
rename to snippets/js/s/extend-hex.md
index e3cac9ac6..4eafa6a02 100644
--- a/snippets/extend-hex.md
+++ b/snippets/js/s/extend-hex.md
@@ -1,6 +1,7 @@
 ---
 title: Extend hex value
 type: snippet
+language: javascript
 tags: [string]
 cover: red-mountain
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/factorial.md b/snippets/js/s/factorial.md
similarity index 96%
rename from snippets/factorial.md
rename to snippets/js/s/factorial.md
index 420a28f87..4a7e422dc 100644
--- a/snippets/factorial.md
+++ b/snippets/js/s/factorial.md
@@ -1,6 +1,7 @@
 ---
 title: Factorial of number
 type: snippet
+language: javascript
 tags: [math,algorithm,recursion]
 cover: flower-vase
 dateModified: 2020-12-28T13:49:24+02:00
diff --git a/snippets/fahrenheit-to-celsius.md b/snippets/js/s/fahrenheit-to-celsius.md
similarity index 94%
rename from snippets/fahrenheit-to-celsius.md
rename to snippets/js/s/fahrenheit-to-celsius.md
index 51b5fa7b0..80d4d5b6f 100644
--- a/snippets/fahrenheit-to-celsius.md
+++ b/snippets/js/s/fahrenheit-to-celsius.md
@@ -1,6 +1,7 @@
 ---
 title: Fahrenheit to Celsius
 type: snippet
+language: javascript
 tags: [math]
 unlisted: true
 cover: last-light
diff --git a/snippets/fibonacci.md b/snippets/js/s/fibonacci.md
similarity index 96%
rename from snippets/fibonacci.md
rename to snippets/js/s/fibonacci.md
index cfbb1f219..9c8107450 100644
--- a/snippets/fibonacci.md
+++ b/snippets/js/s/fibonacci.md
@@ -1,6 +1,7 @@
 ---
 title: Fibonacci
 type: snippet
+language: javascript
 tags: [math,algorithm]
 cover: highlands
 dateModified: 2020-12-28T13:49:24+02:00
diff --git a/snippets/filter-non-unique-by.md b/snippets/js/s/filter-non-unique-by.md
similarity index 97%
rename from snippets/filter-non-unique-by.md
rename to snippets/js/s/filter-non-unique-by.md
index 1d9171219..d24e088cf 100644
--- a/snippets/filter-non-unique-by.md
+++ b/snippets/js/s/filter-non-unique-by.md
@@ -1,6 +1,7 @@
 ---
 title: Filter non-unique array values based on function
 type: snippet
+language: javascript
 tags: [array]
 cover: digital-nomad-16
 dateModified: 2020-11-02T19:40:27+02:00
diff --git a/snippets/filter-non-unique.md b/snippets/js/s/filter-non-unique.md
similarity index 96%
rename from snippets/filter-non-unique.md
rename to snippets/js/s/filter-non-unique.md
index 2cbe4f09d..d895bbbcc 100644
--- a/snippets/filter-non-unique.md
+++ b/snippets/js/s/filter-non-unique.md
@@ -1,6 +1,7 @@
 ---
 title: Filter non-unique array values
 type: snippet
+language: javascript
 tags: [array]
 cover: digital-nomad-10
 dateModified: 2020-11-02T19:40:45+02:00
diff --git a/snippets/filter-unique-by.md b/snippets/js/s/filter-unique-by.md
similarity index 97%
rename from snippets/filter-unique-by.md
rename to snippets/js/s/filter-unique-by.md
index 61a73ad42..08ab80535 100644
--- a/snippets/filter-unique-by.md
+++ b/snippets/js/s/filter-unique-by.md
@@ -1,6 +1,7 @@
 ---
 title: Filter unique array values based on function
 type: snippet
+language: javascript
 tags: [array]
 cover: washed-ashore
 dateModified: 2020-11-02T19:41:07+02:00
diff --git a/snippets/filter-unique.md b/snippets/js/s/filter-unique.md
similarity index 96%
rename from snippets/filter-unique.md
rename to snippets/js/s/filter-unique.md
index 7820661c1..364e63a40 100644
--- a/snippets/filter-unique.md
+++ b/snippets/js/s/filter-unique.md
@@ -1,6 +1,7 @@
 ---
 title: Filter unique array values
 type: snippet
+language: javascript
 tags: [array]
 cover: tulips-and-reeds
 dateModified: 2020-11-02T19:41:00+02:00
diff --git a/snippets/find-closest-anchor.md b/snippets/js/s/find-closest-anchor.md
similarity index 97%
rename from snippets/find-closest-anchor.md
rename to snippets/js/s/find-closest-anchor.md
index eca1ab156..ef683aefc 100644
--- a/snippets/find-closest-anchor.md
+++ b/snippets/js/s/find-closest-anchor.md
@@ -1,6 +1,7 @@
 ---
 title: Find closest anchor
 type: snippet
+language: javascript
 tags: [browser]
 author: chalarangelo
 cover: colorful-lounge
diff --git a/snippets/find-closest-matching-node.md b/snippets/js/s/find-closest-matching-node.md
similarity index 97%
rename from snippets/find-closest-matching-node.md
rename to snippets/js/s/find-closest-matching-node.md
index c834edf55..697b9d140 100644
--- a/snippets/find-closest-matching-node.md
+++ b/snippets/js/s/find-closest-matching-node.md
@@ -1,6 +1,7 @@
 ---
 title: Find closest matching node
 type: snippet
+language: javascript
 tags: [browser]
 author: chalarangelo
 cover: flowering-hills
diff --git a/snippets/find-consecutive.md b/snippets/js/s/find-consecutive.md
similarity index 96%
rename from snippets/find-consecutive.md
rename to snippets/js/s/find-consecutive.md
index bd5ed646b..5d98e8626 100644
--- a/snippets/find-consecutive.md
+++ b/snippets/js/s/find-consecutive.md
@@ -1,6 +1,7 @@
 ---
 title: Arrays of consecutive elements
 type: snippet
+language: javascript
 tags: [array]
 author: chalarangelo
 cover: colorful-pots
diff --git a/snippets/find-first-n.md b/snippets/js/s/find-first-n.md
similarity index 97%
rename from snippets/find-first-n.md
rename to snippets/js/s/find-first-n.md
index bf5bc3c78..4f7c3ec16 100644
--- a/snippets/find-first-n.md
+++ b/snippets/js/s/find-first-n.md
@@ -1,6 +1,7 @@
 ---
 title: Find first n matches
 type: snippet
+language: javascript
 tags: [array]
 cover: digital-nomad-5
 dateModified: 2021-05-09T13:31:36+03:00
diff --git a/snippets/find-key.md b/snippets/js/s/find-key.md
similarity index 97%
rename from snippets/find-key.md
rename to snippets/js/s/find-key.md
index b51edd076..a51f70896 100644
--- a/snippets/find-key.md
+++ b/snippets/js/s/find-key.md
@@ -1,6 +1,7 @@
 ---
 title: Find first matching key
 type: snippet
+language: javascript
 tags: [object]
 cover: succulent-crowd
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/find-keys.md b/snippets/js/s/find-keys.md
similarity index 96%
rename from snippets/find-keys.md
rename to snippets/js/s/find-keys.md
index 28f2481c1..7dc5efec8 100644
--- a/snippets/find-keys.md
+++ b/snippets/js/s/find-keys.md
@@ -1,6 +1,7 @@
 ---
 title: Find matching keys
 type: snippet
+language: javascript
 tags: [object]
 cover: beach-riders
 dateModified: 2020-11-15T14:43:44+02:00
diff --git a/snippets/find-last-index.md b/snippets/js/s/find-last-index.md
similarity index 97%
rename from snippets/find-last-index.md
rename to snippets/js/s/find-last-index.md
index 04513bc49..14c55dcc6 100644
--- a/snippets/find-last-index.md
+++ b/snippets/js/s/find-last-index.md
@@ -1,6 +1,7 @@
 ---
 title: Find last matching index
 type: snippet
+language: javascript
 tags: [array]
 cover: taking-photos
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/find-last-key.md b/snippets/js/s/find-last-key.md
similarity index 97%
rename from snippets/find-last-key.md
rename to snippets/js/s/find-last-key.md
index 46db2cf00..d65decb34 100644
--- a/snippets/find-last-key.md
+++ b/snippets/js/s/find-last-key.md
@@ -1,6 +1,7 @@
 ---
 title: Find last matching key
 type: snippet
+language: javascript
 tags: [object]
 cover: sparkles
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/find-last-n.md b/snippets/js/s/find-last-n.md
similarity index 97%
rename from snippets/find-last-n.md
rename to snippets/js/s/find-last-n.md
index 09ec364ed..733b61d23 100644
--- a/snippets/find-last-n.md
+++ b/snippets/js/s/find-last-n.md
@@ -1,6 +1,7 @@
 ---
 title: Find last n matches
 type: snippet
+language: javascript
 tags: [array]
 cover: interior-16
 dateModified: 2021-05-09T13:31:36+03:00
diff --git a/snippets/find-last.md b/snippets/js/s/find-last.md
similarity index 95%
rename from snippets/find-last.md
rename to snippets/js/s/find-last.md
index c47489a9c..bf1195b3a 100644
--- a/snippets/find-last.md
+++ b/snippets/js/s/find-last.md
@@ -1,6 +1,7 @@
 ---
 title: Find last matching value
 type: snippet
+language: javascript
 tags: [array]
 cover: misty-mountains
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/first-n.md b/snippets/js/s/first-n.md
similarity index 95%
rename from snippets/first-n.md
rename to snippets/js/s/first-n.md
index b6426cffb..b4aa085d6 100644
--- a/snippets/first-n.md
+++ b/snippets/js/s/first-n.md
@@ -1,6 +1,7 @@
 ---
 title: First n elements
 type: snippet
+language: javascript
 tags: [array]
 author: chalarangelo
 cover: digital-nomad-16
diff --git a/snippets/flags.md b/snippets/js/s/flags.md
similarity index 96%
rename from snippets/flags.md
rename to snippets/js/s/flags.md
index 731c7234d..8eb7fbc28 100644
--- a/snippets/flags.md
+++ b/snippets/js/s/flags.md
@@ -1,6 +1,7 @@
 ---
 title: Array to flags object
 type: snippet
+language: javascript
 tags: [array,object]
 author: chalarangelo
 cover: glass-blowing
diff --git a/snippets/flat-iterator.md b/snippets/js/s/flat-iterator.md
similarity index 97%
rename from snippets/flat-iterator.md
rename to snippets/js/s/flat-iterator.md
index 97e4288f6..041576358 100644
--- a/snippets/flat-iterator.md
+++ b/snippets/js/s/flat-iterator.md
@@ -1,6 +1,7 @@
 ---
 title: Flat iterator
 type: snippet
+language: javascript
 tags: [array,iterator,generator]
 author: chalarangelo
 cover: balloons
diff --git a/snippets/flatten-object.md b/snippets/js/s/flatten-object.md
similarity index 98%
rename from snippets/flatten-object.md
rename to snippets/js/s/flatten-object.md
index bb38946e4..1fd3a42f6 100644
--- a/snippets/flatten-object.md
+++ b/snippets/js/s/flatten-object.md
@@ -1,6 +1,7 @@
 ---
 title: Flatten object
 type: snippet
+language: javascript
 tags: [object,recursion]
 cover: lighthouse
 dateModified: 2020-10-19T18:51:03+03:00
diff --git a/snippets/flatten.md b/snippets/js/s/flatten.md
similarity index 97%
rename from snippets/flatten.md
rename to snippets/js/s/flatten.md
index ece9058b4..2187ecb76 100644
--- a/snippets/flatten.md
+++ b/snippets/js/s/flatten.md
@@ -1,6 +1,7 @@
 ---
 title: Flatten array
 type: snippet
+language: javascript
 tags: [array,recursion]
 cover: green-plant
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/flip.md b/snippets/js/s/flip.md
similarity index 96%
rename from snippets/flip.md
rename to snippets/js/s/flip.md
index 1dacfbe6b..a775e0cf0 100644
--- a/snippets/flip.md
+++ b/snippets/js/s/flip.md
@@ -1,6 +1,7 @@
 ---
 title: Flip function arguments
 type: snippet
+language: javascript
 tags: [function]
 cover: interior-11
 dateModified: 2021-06-13T13:50:25+03:00
diff --git a/snippets/for-each-right.md b/snippets/js/s/for-each-right.md
similarity index 96%
rename from snippets/for-each-right.md
rename to snippets/js/s/for-each-right.md
index 85bb44098..274cf14d7 100644
--- a/snippets/for-each-right.md
+++ b/snippets/js/s/for-each-right.md
@@ -1,6 +1,7 @@
 ---
 title: Execute function for each array element in reverse
 type: snippet
+language: javascript
 tags: [array]
 cover: interior-6
 dateModified: 2020-10-19T22:49:51+03:00
diff --git a/snippets/for-own-right.md b/snippets/js/s/for-own-right.md
similarity index 97%
rename from snippets/for-own-right.md
rename to snippets/js/s/for-own-right.md
index 4375e8a3c..5f895b99b 100644
--- a/snippets/for-own-right.md
+++ b/snippets/js/s/for-own-right.md
@@ -1,6 +1,7 @@
 ---
 title: Iterate over object's own properties in reverse
 type: snippet
+language: javascript
 tags: [object]
 cover: sea-view
 dateModified: 2020-10-19T22:49:51+03:00
diff --git a/snippets/for-own.md b/snippets/js/s/for-own.md
similarity index 96%
rename from snippets/for-own.md
rename to snippets/js/s/for-own.md
index de72704b8..fc14b60df 100644
--- a/snippets/for-own.md
+++ b/snippets/js/s/for-own.md
@@ -1,6 +1,7 @@
 ---
 title: Iterate over object's own properties
 type: snippet
+language: javascript
 tags: [object]
 cover: blank-card
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/form-to-object.md b/snippets/js/s/form-to-object.md
similarity index 96%
rename from snippets/form-to-object.md
rename to snippets/js/s/form-to-object.md
index f20e2e05a..fccf0f032 100644
--- a/snippets/form-to-object.md
+++ b/snippets/js/s/form-to-object.md
@@ -1,6 +1,7 @@
 ---
 title: Form to object
 type: snippet
+language: javascript
 tags: [browser,object]
 cover: sail-away-2
 dateModified: 2020-10-19T22:49:51+03:00
diff --git a/snippets/format-duration.md b/snippets/js/s/format-duration.md
similarity index 98%
rename from snippets/format-duration.md
rename to snippets/js/s/format-duration.md
index 10005d51d..248074bce 100644
--- a/snippets/format-duration.md
+++ b/snippets/js/s/format-duration.md
@@ -1,6 +1,7 @@
 ---
 title: Format duration
 type: snippet
+language: javascript
 tags: [date,math,string]
 cover: clock
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/format-number.md b/snippets/js/s/format-number.md
similarity index 95%
rename from snippets/format-number.md
rename to snippets/js/s/format-number.md
index 351167692..d981a804c 100644
--- a/snippets/format-number.md
+++ b/snippets/js/s/format-number.md
@@ -1,6 +1,7 @@
 ---
 title: Format number
 type: snippet
+language: javascript
 tags: [string,math]
 cover: laptop-plants
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/format-seconds.md b/snippets/js/s/format-seconds.md
similarity index 97%
rename from snippets/format-seconds.md
rename to snippets/js/s/format-seconds.md
index a68ac6f27..0490ee313 100644
--- a/snippets/format-seconds.md
+++ b/snippets/js/s/format-seconds.md
@@ -1,6 +1,7 @@
 ---
 title: Number of seconds to ISO format
 type: snippet
+language: javascript
 tags: [date,math,string]
 cover: rocky-mountains
 dateModified: 2021-10-13T19:29:39+02:00
diff --git a/snippets/frequencies.md b/snippets/js/s/frequencies.md
similarity index 96%
rename from snippets/frequencies.md
rename to snippets/js/s/frequencies.md
index 39a3cd510..38965b32f 100644
--- a/snippets/frequencies.md
+++ b/snippets/js/s/frequencies.md
@@ -1,6 +1,7 @@
 ---
 title: Value frequencies
 type: snippet
+language: javascript
 tags: [array,object]
 author: chalarangelo
 cover: tropical-waterfall
diff --git a/snippets/from-camel-case.md b/snippets/js/s/from-camel-case.md
similarity index 97%
rename from snippets/from-camel-case.md
rename to snippets/js/s/from-camel-case.md
index 41e6cc6dd..3ea9484a9 100644
--- a/snippets/from-camel-case.md
+++ b/snippets/js/s/from-camel-case.md
@@ -1,6 +1,7 @@
 ---
 title: String from camelcase
 type: snippet
+language: javascript
 tags: [string]
 cover: mountain-lake-cottage
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/from-timestamp.md b/snippets/js/s/from-timestamp.md
similarity index 95%
rename from snippets/from-timestamp.md
rename to snippets/js/s/from-timestamp.md
index 9d0fd1a43..7641f5fe9 100644
--- a/snippets/from-timestamp.md
+++ b/snippets/js/s/from-timestamp.md
@@ -1,6 +1,7 @@
 ---
 title: Date from Unix timestamp
 type: snippet
+language: javascript
 tags: [date]
 cover: number-2
 dateModified: 2020-10-15T21:57:17+03:00
diff --git a/snippets/frozen-set.md b/snippets/js/s/frozen-set.md
similarity index 96%
rename from snippets/frozen-set.md
rename to snippets/js/s/frozen-set.md
index be0230229..01d2bf7e3 100644
--- a/snippets/frozen-set.md
+++ b/snippets/js/s/frozen-set.md
@@ -1,6 +1,7 @@
 ---
 title: Freeze Set object
 type: snippet
+language: javascript
 tags: [array]
 cover: frozen-globe
 dateModified: 2020-10-11T11:52:48+03:00
diff --git a/snippets/fullscreen.md b/snippets/js/s/fullscreen.md
similarity index 97%
rename from snippets/fullscreen.md
rename to snippets/js/s/fullscreen.md
index 00cdccbdb..4cbd7ca0e 100644
--- a/snippets/fullscreen.md
+++ b/snippets/js/s/fullscreen.md
@@ -1,6 +1,7 @@
 ---
 title: Toggle fullscreen mode
 type: snippet
+language: javascript
 tags: [browser]
 cover: antelope
 dateModified: 2020-10-19T22:49:51+03:00
diff --git a/snippets/function-name.md b/snippets/js/s/function-name.md
similarity index 95%
rename from snippets/function-name.md
rename to snippets/js/s/function-name.md
index 8c51e0749..59eaa75d2 100644
--- a/snippets/function-name.md
+++ b/snippets/js/s/function-name.md
@@ -1,6 +1,7 @@
 ---
 title: Get function name
 type: snippet
+language: javascript
 tags: [function]
 cover: flower-portrait-5
 dateModified: 2020-10-19T22:49:51+03:00
diff --git a/snippets/functions.md b/snippets/js/s/functions.md
similarity index 97%
rename from snippets/functions.md
rename to snippets/js/s/functions.md
index d9ce411f7..453aa4c20 100644
--- a/snippets/functions.md
+++ b/snippets/js/s/functions.md
@@ -1,6 +1,7 @@
 ---
 title: Function property names
 type: snippet
+language: javascript
 tags: [object,function]
 cover: palm-tree-house
 dateModified: 2020-10-20T11:21:07+03:00
diff --git a/snippets/gcd.md b/snippets/js/s/gcd.md
similarity index 96%
rename from snippets/gcd.md
rename to snippets/js/s/gcd.md
index 8c9edb689..daef1d22e 100644
--- a/snippets/gcd.md
+++ b/snippets/js/s/gcd.md
@@ -1,6 +1,7 @@
 ---
 title: Greatest common divisor
 type: snippet
+language: javascript
 tags: [math,algorithm,recursion]
 cover: flower-pond
 dateModified: 2020-12-29T12:36:50+02:00
diff --git a/snippets/generate-items.md b/snippets/js/s/generate-items.md
similarity index 96%
rename from snippets/generate-items.md
rename to snippets/js/s/generate-items.md
index 8e05f73d3..aa9374ed6 100644
--- a/snippets/generate-items.md
+++ b/snippets/js/s/generate-items.md
@@ -1,6 +1,7 @@
 ---
 title: Generate items
 type: snippet
+language: javascript
 tags: [array,function]
 cover: generator
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/generate-until.md b/snippets/js/s/generate-until.md
similarity index 97%
rename from snippets/generate-until.md
rename to snippets/js/s/generate-until.md
index f8d184716..4680b82aa 100644
--- a/snippets/generate-until.md
+++ b/snippets/js/s/generate-until.md
@@ -1,6 +1,7 @@
 ---
 title: Generate until condition is met
 type: snippet
+language: javascript
 tags: [function,generator]
 author: chalarangelo
 cover: type-stamps
diff --git a/snippets/generate-while.md b/snippets/js/s/generate-while.md
similarity index 97%
rename from snippets/generate-while.md
rename to snippets/js/s/generate-while.md
index 0d7c2e0cd..8ce912327 100644
--- a/snippets/generate-while.md
+++ b/snippets/js/s/generate-while.md
@@ -1,6 +1,7 @@
 ---
 title: Generate while condition is met
 type: snippet
+language: javascript
 tags: [function,generator]
 author: chalarangelo
 cover: lake-loop
diff --git a/snippets/generator-to-array.md b/snippets/js/s/generator-to-array.md
similarity index 95%
rename from snippets/generator-to-array.md
rename to snippets/js/s/generator-to-array.md
index 494e390f6..12dca8cba 100644
--- a/snippets/generator-to-array.md
+++ b/snippets/js/s/generator-to-array.md
@@ -1,6 +1,7 @@
 ---
 title: Generator to array
 type: snippet
+language: javascript
 tags: [function,array,generator]
 author: chalarangelo
 cover: messy-papers
diff --git a/snippets/geometric-progression.md b/snippets/js/s/geometric-progression.md
similarity index 98%
rename from snippets/geometric-progression.md
rename to snippets/js/s/geometric-progression.md
index b4c9fc1af..faee6c034 100644
--- a/snippets/geometric-progression.md
+++ b/snippets/js/s/geometric-progression.md
@@ -1,6 +1,7 @@
 ---
 title: Geometric progression
 type: snippet
+language: javascript
 tags: [math,algorithm]
 cover: book-chair
 excerpt: Initializes an array containing the numbers in the specified geometric progression range.
diff --git a/snippets/get-ancestors.md b/snippets/js/s/get-ancestors.md
similarity index 96%
rename from snippets/get-ancestors.md
rename to snippets/js/s/get-ancestors.md
index 33dbc468f..08cd6f558 100644
--- a/snippets/get-ancestors.md
+++ b/snippets/js/s/get-ancestors.md
@@ -1,6 +1,7 @@
 ---
 title: Get element ancestors
 type: snippet
+language: javascript
 tags: [browser]
 author: chalarangelo
 cover: interior-8
diff --git a/snippets/get-base-url.md b/snippets/js/s/get-base-url.md
similarity index 96%
rename from snippets/get-base-url.md
rename to snippets/js/s/get-base-url.md
index ab93d147f..a4392abf0 100644
--- a/snippets/get-base-url.md
+++ b/snippets/js/s/get-base-url.md
@@ -1,6 +1,7 @@
 ---
 title: Get base URL
 type: snippet
+language: javascript
 tags: [string,browser,regexp]
 author: chalarangelo
 cover: compass
diff --git a/snippets/get-cmd-args.md b/snippets/js/s/get-cmd-args.md
similarity index 96%
rename from snippets/get-cmd-args.md
rename to snippets/js/s/get-cmd-args.md
index e41461f6b..626a4a2a6 100644
--- a/snippets/get-cmd-args.md
+++ b/snippets/js/s/get-cmd-args.md
@@ -1,6 +1,7 @@
 ---
 title: Command-line arguments
 type: snippet
+language: javascript
 tags: [node]
 author: chalarangelo
 cover: terminal
diff --git a/snippets/get-colon-time-from-date.md b/snippets/js/s/get-colon-time-from-date.md
similarity index 95%
rename from snippets/get-colon-time-from-date.md
rename to snippets/js/s/get-colon-time-from-date.md
index 121a469b2..e27291964 100644
--- a/snippets/get-colon-time-from-date.md
+++ b/snippets/js/s/get-colon-time-from-date.md
@@ -1,6 +1,7 @@
 ---
 title: Get colon time from date
 type: snippet
+language: javascript
 tags: [date,string]
 cover: digital-nomad-5
 dateModified: 2020-10-19T22:49:51+03:00
diff --git a/snippets/get-days-diff-between-dates.md b/snippets/js/s/get-days-diff-between-dates.md
similarity index 96%
rename from snippets/get-days-diff-between-dates.md
rename to snippets/js/s/get-days-diff-between-dates.md
index f7b8a8730..3751820b0 100644
--- a/snippets/get-days-diff-between-dates.md
+++ b/snippets/js/s/get-days-diff-between-dates.md
@@ -1,6 +1,7 @@
 ---
 title: Date difference in days
 type: snippet
+language: javascript
 tags: [date]
 cover: spanish-resort
 dateModified: 2021-04-24T12:42:47+03:00
diff --git a/snippets/get-elements-bigger-than-viewport.md b/snippets/js/s/get-elements-bigger-than-viewport.md
similarity index 97%
rename from snippets/get-elements-bigger-than-viewport.md
rename to snippets/js/s/get-elements-bigger-than-viewport.md
index 62dec054d..955b67401 100644
--- a/snippets/get-elements-bigger-than-viewport.md
+++ b/snippets/js/s/get-elements-bigger-than-viewport.md
@@ -1,6 +1,7 @@
 ---
 title: Get elements bigger than viewport
 type: snippet
+language: javascript
 tags: [browser]
 cover: case-study
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/get-hours-diff-between-dates.md b/snippets/js/s/get-hours-diff-between-dates.md
similarity index 96%
rename from snippets/get-hours-diff-between-dates.md
rename to snippets/js/s/get-hours-diff-between-dates.md
index 7e65b0725..be8693d2c 100644
--- a/snippets/get-hours-diff-between-dates.md
+++ b/snippets/js/s/get-hours-diff-between-dates.md
@@ -1,6 +1,7 @@
 ---
 title: Date difference in hours
 type: snippet
+language: javascript
 tags: [date]
 cover: tram-car-2
 dateModified: 2021-04-24T12:56:21+03:00
diff --git a/snippets/get-images.md b/snippets/js/s/get-images.md
similarity index 97%
rename from snippets/get-images.md
rename to snippets/js/s/get-images.md
index 78852f7a5..3ef9dd7e4 100644
--- a/snippets/get-images.md
+++ b/snippets/js/s/get-images.md
@@ -1,6 +1,7 @@
 ---
 title: Get all images in element
 type: snippet
+language: javascript
 tags: [browser]
 cover: portal-timelapse
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/get-meridiem-suffix-of-integer.md b/snippets/js/s/get-meridiem-suffix-of-integer.md
similarity index 97%
rename from snippets/get-meridiem-suffix-of-integer.md
rename to snippets/js/s/get-meridiem-suffix-of-integer.md
index 315612937..a7b3ec514 100644
--- a/snippets/get-meridiem-suffix-of-integer.md
+++ b/snippets/js/s/get-meridiem-suffix-of-integer.md
@@ -1,6 +1,7 @@
 ---
 title: Get meridiem suffix of integer
 type: snippet
+language: javascript
 tags: [date]
 cover: dark-leaves-4
 dateModified: 2020-10-19T22:49:51+03:00
diff --git a/snippets/get-minutes-diff-between-dates.md b/snippets/js/s/get-minutes-diff-between-dates.md
similarity index 96%
rename from snippets/get-minutes-diff-between-dates.md
rename to snippets/js/s/get-minutes-diff-between-dates.md
index d8964ed1c..eec5a1c23 100644
--- a/snippets/get-minutes-diff-between-dates.md
+++ b/snippets/js/s/get-minutes-diff-between-dates.md
@@ -1,6 +1,7 @@
 ---
 title: Date difference in minutes
 type: snippet
+language: javascript
 tags: [date]
 cover: flower-vase
 dateModified: 2021-04-24T12:48:49+03:00
diff --git a/snippets/get-months-diff-between-dates.md b/snippets/js/s/get-months-diff-between-dates.md
similarity index 96%
rename from snippets/get-months-diff-between-dates.md
rename to snippets/js/s/get-months-diff-between-dates.md
index 7ca23989c..67871e445 100644
--- a/snippets/get-months-diff-between-dates.md
+++ b/snippets/js/s/get-months-diff-between-dates.md
@@ -1,6 +1,7 @@
 ---
 title: Date difference in months
 type: snippet
+language: javascript
 tags: [date]
 cover: two-flower-vases
 dateModified: 2020-10-19T22:49:51+03:00
diff --git a/snippets/get-parents-until.md b/snippets/js/s/get-parents-until.md
similarity index 97%
rename from snippets/get-parents-until.md
rename to snippets/js/s/get-parents-until.md
index 1e6aca590..9046df1b6 100644
--- a/snippets/get-parents-until.md
+++ b/snippets/js/s/get-parents-until.md
@@ -1,6 +1,7 @@
 ---
 title: Get parents until element matches selector
 type: snippet
+language: javascript
 tags: [browser]
 author: chalarangelo
 cover: colorful-plastic
diff --git a/snippets/get-protocol.md b/snippets/js/s/get-protocol.md
similarity index 94%
rename from snippets/get-protocol.md
rename to snippets/js/s/get-protocol.md
index 234596a79..19befb8e0 100644
--- a/snippets/get-protocol.md
+++ b/snippets/js/s/get-protocol.md
@@ -1,6 +1,7 @@
 ---
 title: Current page protocol
 type: snippet
+language: javascript
 tags: [browser]
 cover: bamboo-lamp
 dateModified: 2020-10-20T11:46:23+03:00
diff --git a/snippets/get-scroll-position.md b/snippets/js/s/get-scroll-position.md
similarity index 96%
rename from snippets/get-scroll-position.md
rename to snippets/js/s/get-scroll-position.md
index 32bbca438..b0bcac869 100644
--- a/snippets/get-scroll-position.md
+++ b/snippets/js/s/get-scroll-position.md
@@ -1,6 +1,7 @@
 ---
 title: Scroll position
 type: snippet
+language: javascript
 tags: [browser]
 cover: tranquil-lake
 dateModified: 2020-10-19T22:49:51+03:00
diff --git a/snippets/get-scrollbar-width.md b/snippets/js/s/get-scrollbar-width.md
similarity index 96%
rename from snippets/get-scrollbar-width.md
rename to snippets/js/s/get-scrollbar-width.md
index 9bdd0953c..40fb00e39 100644
--- a/snippets/get-scrollbar-width.md
+++ b/snippets/js/s/get-scrollbar-width.md
@@ -1,6 +1,7 @@
 ---
 title: Scrollbar width
 type: snippet
+language: javascript
 tags: [browser]
 cover: violin
 author: chalarangelo
diff --git a/snippets/get-seconds-diff-between-dates.md b/snippets/js/s/get-seconds-diff-between-dates.md
similarity index 96%
rename from snippets/get-seconds-diff-between-dates.md
rename to snippets/js/s/get-seconds-diff-between-dates.md
index d3c134ba8..10787f242 100644
--- a/snippets/get-seconds-diff-between-dates.md
+++ b/snippets/js/s/get-seconds-diff-between-dates.md
@@ -1,6 +1,7 @@
 ---
 title: Date difference in seconds
 type: snippet
+language: javascript
 tags: [date]
 cover: laptop-journey
 dateModified: 2021-04-24T12:39:48+03:00
diff --git a/snippets/get-selected-text.md b/snippets/js/s/get-selected-text.md
similarity index 94%
rename from snippets/get-selected-text.md
rename to snippets/js/s/get-selected-text.md
index 2df748d94..2ab11fefb 100644
--- a/snippets/get-selected-text.md
+++ b/snippets/js/s/get-selected-text.md
@@ -1,6 +1,7 @@
 ---
 title: Get selected text
 type: snippet
+language: javascript
 tags: [browser]
 author: chalarangelo
 cover: white-tablet-2
diff --git a/snippets/get-siblings.md b/snippets/js/s/get-siblings.md
similarity index 96%
rename from snippets/get-siblings.md
rename to snippets/js/s/get-siblings.md
index 5e57b6484..c73a61e7b 100644
--- a/snippets/get-siblings.md
+++ b/snippets/js/s/get-siblings.md
@@ -1,6 +1,7 @@
 ---
 title: Array of element's siblings
 type: snippet
+language: javascript
 tags: [browser]
 author: chalarangelo
 cover: little-white-flowers
diff --git a/snippets/get-style.md b/snippets/js/s/get-style.md
similarity index 95%
rename from snippets/get-style.md
rename to snippets/js/s/get-style.md
index c986d77b9..2c1f4f550 100644
--- a/snippets/get-style.md
+++ b/snippets/js/s/get-style.md
@@ -1,6 +1,7 @@
 ---
 title: Get style for element
 type: snippet
+language: javascript
 tags: [browser,css]
 cover: frog-blue-flower
 dateModified: 2020-10-19T22:49:51+03:00
diff --git a/snippets/get-timestamp.md b/snippets/js/s/get-timestamp.md
similarity index 96%
rename from snippets/get-timestamp.md
rename to snippets/js/s/get-timestamp.md
index 1df9dd19d..5b3d10a22 100644
--- a/snippets/get-timestamp.md
+++ b/snippets/js/s/get-timestamp.md
@@ -1,6 +1,7 @@
 ---
 title: Unix timestamp from date
 type: snippet
+language: javascript
 tags: [date]
 cover: interior-14
 dateModified: 2020-10-19T22:49:51+03:00
diff --git a/snippets/get-type.md b/snippets/js/s/get-type.md
similarity index 95%
rename from snippets/get-type.md
rename to snippets/js/s/get-type.md
index 516b05bc5..3a9babe01 100644
--- a/snippets/get-type.md
+++ b/snippets/js/s/get-type.md
@@ -1,6 +1,7 @@
 ---
 title: Type of value
 type: snippet
+language: javascript
 tags: [type]
 cover: pink-flowers
 dateModified: 2020-10-19T22:49:51+03:00
diff --git a/snippets/get-url-parameters.md b/snippets/js/s/get-url-parameters.md
similarity index 97%
rename from snippets/get-url-parameters.md
rename to snippets/js/s/get-url-parameters.md
index e36eb25a1..07ac23892 100644
--- a/snippets/get-url-parameters.md
+++ b/snippets/js/s/get-url-parameters.md
@@ -1,6 +1,7 @@
 ---
 title: URL parameters as object
 type: snippet
+language: javascript
 tags: [browser,string,regexp]
 author: chalarangelo
 cover: compass
diff --git a/snippets/get-vertical-offset.md b/snippets/js/s/get-vertical-offset.md
similarity index 96%
rename from snippets/get-vertical-offset.md
rename to snippets/js/s/get-vertical-offset.md
index ffcd58cc7..3511a4dac 100644
--- a/snippets/get-vertical-offset.md
+++ b/snippets/js/s/get-vertical-offset.md
@@ -1,6 +1,7 @@
 ---
 title: Vertical offset of element
 type: snippet
+language: javascript
 tags: [browser]
 author: chalarangelo
 cover: waves-from-above-2
diff --git a/snippets/get.md b/snippets/js/s/get.md
similarity index 97%
rename from snippets/get.md
rename to snippets/js/s/get.md
index 7fef0cd65..54dde1ef9 100644
--- a/snippets/get.md
+++ b/snippets/js/s/get.md
@@ -1,6 +1,7 @@
 ---
 title: Get nested object property from path string
 type: snippet
+language: javascript
 tags: [object,regexp]
 cover: brown-bird
 dateModified: 2020-10-19T22:49:51+03:00
diff --git a/snippets/group-by.md b/snippets/js/s/group-by.md
similarity index 97%
rename from snippets/group-by.md
rename to snippets/js/s/group-by.md
index 069c99356..a2fa58f84 100644
--- a/snippets/group-by.md
+++ b/snippets/js/s/group-by.md
@@ -1,6 +1,7 @@
 ---
 title: Group array elements
 type: snippet
+language: javascript
 tags: [array,object]
 cover: man-cup-laptop
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/hamming-distance.md b/snippets/js/s/hamming-distance.md
similarity index 96%
rename from snippets/hamming-distance.md
rename to snippets/js/s/hamming-distance.md
index 4cd23134c..420cb49e4 100644
--- a/snippets/hamming-distance.md
+++ b/snippets/js/s/hamming-distance.md
@@ -1,6 +1,7 @@
 ---
 title: Hamming distance
 type: snippet
+language: javascript
 tags: [math,algorithm]
 cover: colorful-lounge
 dateModified: 2020-12-28T13:49:24+02:00
diff --git a/snippets/has-class.md b/snippets/js/s/has-class.md
similarity index 95%
rename from snippets/has-class.md
rename to snippets/js/s/has-class.md
index 1c3a1df06..5a5f78d23 100644
--- a/snippets/has-class.md
+++ b/snippets/js/s/has-class.md
@@ -1,6 +1,7 @@
 ---
 title: Check if HTML element has class
 type: snippet
+language: javascript
 tags: [browser,css]
 cover: interior
 dateModified: 2020-10-19T22:49:51+03:00
diff --git a/snippets/has-decimals.md b/snippets/js/s/has-decimals.md
similarity index 95%
rename from snippets/has-decimals.md
rename to snippets/js/s/has-decimals.md
index 206952d9c..0e9a643b8 100644
--- a/snippets/has-decimals.md
+++ b/snippets/js/s/has-decimals.md
@@ -1,6 +1,7 @@
 ---
 title: Number has decimal digits
 type: snippet
+language: javascript
 tags: [math]
 author: chalarangelo
 cover: man-cup-laptop
diff --git a/snippets/has-duplicates.md b/snippets/js/s/has-duplicates.md
similarity index 96%
rename from snippets/has-duplicates.md
rename to snippets/js/s/has-duplicates.md
index 7a50e5495..985d8f370 100644
--- a/snippets/has-duplicates.md
+++ b/snippets/js/s/has-duplicates.md
@@ -1,6 +1,7 @@
 ---
 title: Check if array has duplicates
 type: snippet
+language: javascript
 tags: [array]
 cover: umbrellas
 dateModified: 2020-10-22T20:23:09+03:00
diff --git a/snippets/has-flags.md b/snippets/js/s/has-flags.md
similarity index 97%
rename from snippets/has-flags.md
rename to snippets/js/s/has-flags.md
index e3dede426..bef7187cc 100644
--- a/snippets/has-flags.md
+++ b/snippets/js/s/has-flags.md
@@ -1,6 +1,7 @@
 ---
 title: Check if process arguments contain flags
 type: snippet
+language: javascript
 tags: [node]
 cover: white-tablet
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/has-key.md b/snippets/js/s/has-key.md
similarity index 98%
rename from snippets/has-key.md
rename to snippets/js/s/has-key.md
index bbd98b079..e1a8714eb 100644
--- a/snippets/has-key.md
+++ b/snippets/js/s/has-key.md
@@ -1,6 +1,7 @@
 ---
 title: Check if object has key
 type: snippet
+language: javascript
 tags: [object]
 author: chalarangelo
 cover: cloudy-mountaintop
diff --git a/snippets/has-many.md b/snippets/js/s/has-many.md
similarity index 96%
rename from snippets/has-many.md
rename to snippets/js/s/has-many.md
index 47df2dcc9..00dbb9c78 100644
--- a/snippets/has-many.md
+++ b/snippets/js/s/has-many.md
@@ -1,6 +1,7 @@
 ---
 title: Check if array has many matches
 type: snippet
+language: javascript
 tags: [array]
 author: chalarangelo
 cover: interior-2
diff --git a/snippets/has-one.md b/snippets/js/s/has-one.md
similarity index 96%
rename from snippets/has-one.md
rename to snippets/js/s/has-one.md
index de45be959..544f9f4fd 100644
--- a/snippets/has-one.md
+++ b/snippets/js/s/has-one.md
@@ -1,6 +1,7 @@
 ---
 title: Check if array has only one match
 type: snippet
+language: javascript
 tags: [array]
 author: chalarangelo
 cover: interior-10
diff --git a/snippets/has-value.md b/snippets/js/s/has-value.md
similarity index 96%
rename from snippets/has-value.md
rename to snippets/js/s/has-value.md
index b99816da5..64a76de76 100644
--- a/snippets/has-value.md
+++ b/snippets/js/s/has-value.md
@@ -1,6 +1,7 @@
 ---
 title: Check if object has value
 type: snippet
+language: javascript
 tags: [object]
 author: chalarangelo
 cover: plant-corner
diff --git a/snippets/hash-browser.md b/snippets/js/s/hash-browser.md
similarity index 98%
rename from snippets/hash-browser.md
rename to snippets/js/s/hash-browser.md
index f026aae30..f8baa1175 100644
--- a/snippets/hash-browser.md
+++ b/snippets/js/s/hash-browser.md
@@ -1,6 +1,7 @@
 ---
 title: Calculate SHA-256 hash (browser)
 type: snippet
+language: javascript
 tags: [browser,promise]
 cover: padlocks
 dateModified: 2021-10-13T19:29:39+02:00
diff --git a/snippets/hash-node.md b/snippets/js/s/hash-node.md
similarity index 97%
rename from snippets/hash-node.md
rename to snippets/js/s/hash-node.md
index a5a5df5a0..09aef1113 100644
--- a/snippets/hash-node.md
+++ b/snippets/js/s/hash-node.md
@@ -1,6 +1,7 @@
 ---
 title: Calculate SHA-256 hash (Node.js)
 type: snippet
+language: javascript
 tags: [node,promise]
 cover: padlocks
 dateModified: 2021-10-13T19:29:39+02:00
diff --git a/snippets/have-same-contents.md b/snippets/js/s/have-same-contents.md
similarity index 97%
rename from snippets/have-same-contents.md
rename to snippets/js/s/have-same-contents.md
index 3b3ef6633..b45a8a9f6 100644
--- a/snippets/have-same-contents.md
+++ b/snippets/js/s/have-same-contents.md
@@ -1,6 +1,7 @@
 ---
 title: Check if arrays have same contents
 type: snippet
+language: javascript
 tags: [array]
 author: chalarangelo
 cover: interior-15
diff --git a/snippets/head.md b/snippets/js/s/head.md
similarity index 95%
rename from snippets/head.md
rename to snippets/js/s/head.md
index fcfa9903c..50b5df2fd 100644
--- a/snippets/head.md
+++ b/snippets/js/s/head.md
@@ -1,6 +1,7 @@
 ---
 title: Head of array
 type: snippet
+language: javascript
 tags: [array]
 cover: clay-pot-horizon
 dateModified: 2020-10-19T22:49:51+03:00
diff --git a/snippets/heapsort.md b/snippets/js/s/heapsort.md
similarity index 98%
rename from snippets/heapsort.md
rename to snippets/js/s/heapsort.md
index 628fd1aac..4fbe1110a 100644
--- a/snippets/heapsort.md
+++ b/snippets/js/s/heapsort.md
@@ -1,6 +1,7 @@
 ---
 title: Heap sort
 type: snippet
+language: javascript
 tags: [algorithm,array,recursion]
 author: chalarangelo
 cover: building-blocks
diff --git a/snippets/hex-to-rgb.md b/snippets/js/s/hex-to-rgb.md
similarity index 98%
rename from snippets/hex-to-rgb.md
rename to snippets/js/s/hex-to-rgb.md
index 0636daf57..cfff47c9e 100644
--- a/snippets/hex-to-rgb.md
+++ b/snippets/js/s/hex-to-rgb.md
@@ -1,6 +1,7 @@
 ---
 title: Hex to RGB
 type: snippet
+language: javascript
 tags: [string,math]
 cover: umbrellas
 dateModified: 2020-10-19T22:49:51+03:00
diff --git a/snippets/hide.md b/snippets/js/s/hide.md
similarity index 95%
rename from snippets/hide.md
rename to snippets/js/s/hide.md
index 944fa1b62..e64a7236f 100644
--- a/snippets/hide.md
+++ b/snippets/js/s/hide.md
@@ -1,6 +1,7 @@
 ---
 title: Hide elements
 type: snippet
+language: javascript
 tags: [browser,css]
 cover: book-chair
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/hsb-to-rgb.md b/snippets/js/s/hsb-to-rgb.md
similarity index 97%
rename from snippets/hsb-to-rgb.md
rename to snippets/js/s/hsb-to-rgb.md
index af062dfc2..bda00dc83 100644
--- a/snippets/hsb-to-rgb.md
+++ b/snippets/js/s/hsb-to-rgb.md
@@ -1,6 +1,7 @@
 ---
 title: HSB to RGB
 type: snippet
+language: javascript
 tags: [math]
 cover: houses-rock-sea
 dateModified: 2020-09-18T14:25:07+03:00
diff --git a/snippets/hsl-to-rgb.md b/snippets/js/s/hsl-to-rgb.md
similarity index 97%
rename from snippets/hsl-to-rgb.md
rename to snippets/js/s/hsl-to-rgb.md
index 62a742a34..720e28b6e 100644
--- a/snippets/hsl-to-rgb.md
+++ b/snippets/js/s/hsl-to-rgb.md
@@ -1,6 +1,7 @@
 ---
 title: HSL to RGB
 type: snippet
+language: javascript
 tags: [math]
 cover: maple-leaf-palette
 dateModified: 2020-10-04T11:24:27+03:00
diff --git a/snippets/http-delete.md b/snippets/js/s/http-delete.md
similarity index 97%
rename from snippets/http-delete.md
rename to snippets/js/s/http-delete.md
index 036f145e3..21fe2b10f 100644
--- a/snippets/http-delete.md
+++ b/snippets/js/s/http-delete.md
@@ -1,6 +1,7 @@
 ---
 title: HTTP delete
 type: snippet
+language: javascript
 tags: [browser]
 cover: beach-from-above
 dateModified: 2020-10-19T22:49:51+03:00
diff --git a/snippets/http-get.md b/snippets/js/s/http-get.md
similarity index 98%
rename from snippets/http-get.md
rename to snippets/js/s/http-get.md
index 8d4c59f82..0f2c0d38f 100644
--- a/snippets/http-get.md
+++ b/snippets/js/s/http-get.md
@@ -1,6 +1,7 @@
 ---
 title: HTTP get
 type: snippet
+language: javascript
 tags: [browser]
 cover: boat-port
 dateModified: 2020-10-19T22:49:51+03:00
diff --git a/snippets/http-post.md b/snippets/js/s/http-post.md
similarity index 98%
rename from snippets/http-post.md
rename to snippets/js/s/http-post.md
index c5a77d040..4cfe27a6c 100644
--- a/snippets/http-post.md
+++ b/snippets/js/s/http-post.md
@@ -1,6 +1,7 @@
 ---
 title: HTTP post
 type: snippet
+language: javascript
 tags: [browser]
 cover: boats
 dateModified: 2020-10-19T22:49:51+03:00
diff --git a/snippets/http-put.md b/snippets/js/s/http-put.md
similarity index 98%
rename from snippets/http-put.md
rename to snippets/js/s/http-put.md
index 490756eca..c25a9a6ff 100644
--- a/snippets/http-put.md
+++ b/snippets/js/s/http-put.md
@@ -1,6 +1,7 @@
 ---
 title: HTTP put
 type: snippet
+language: javascript
 tags: [browser]
 cover: bridge
 dateModified: 2020-10-19T22:49:51+03:00
diff --git a/snippets/https-redirect.md b/snippets/js/s/https-redirect.md
similarity index 97%
rename from snippets/https-redirect.md
rename to snippets/js/s/https-redirect.md
index f57d5c27c..fb57cb14a 100644
--- a/snippets/https-redirect.md
+++ b/snippets/js/s/https-redirect.md
@@ -1,6 +1,7 @@
 ---
 title: Redirect to HTTPS
 type: snippet
+language: javascript
 tags: [browser]
 cover: blue-lake
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/hz.md b/snippets/js/s/hz.md
similarity index 98%
rename from snippets/hz.md
rename to snippets/js/s/hz.md
index 0df4f064e..8999f865d 100644
--- a/snippets/hz.md
+++ b/snippets/js/s/hz.md
@@ -1,6 +1,7 @@
 ---
 title: Hertz frequency of function
 type: snippet
+language: javascript
 tags: [function]
 unlisted: true
 cover: lake-runner
diff --git a/snippets/in-range.md b/snippets/js/s/in-range.md
similarity index 96%
rename from snippets/in-range.md
rename to snippets/js/s/in-range.md
index 3a56f9d53..e488d0843 100644
--- a/snippets/in-range.md
+++ b/snippets/js/s/in-range.md
@@ -1,6 +1,7 @@
 ---
 title: Number in range
 type: snippet
+language: javascript
 tags: [math]
 cover: armchair
 dateModified: 2020-11-01T20:50:57+02:00
diff --git a/snippets/includes-all.md b/snippets/js/s/includes-all.md
similarity index 96%
rename from snippets/includes-all.md
rename to snippets/js/s/includes-all.md
index 42657ffd7..ffa65e62a 100644
--- a/snippets/includes-all.md
+++ b/snippets/js/s/includes-all.md
@@ -1,6 +1,7 @@
 ---
 title: Check if array includes all values
 type: snippet
+language: javascript
 tags: [array]
 cover: tomatoes
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/includes-any.md b/snippets/js/s/includes-any.md
similarity index 96%
rename from snippets/includes-any.md
rename to snippets/js/s/includes-any.md
index 6f88b3f96..0aa1d4ef9 100644
--- a/snippets/includes-any.md
+++ b/snippets/js/s/includes-any.md
@@ -1,6 +1,7 @@
 ---
 title: Check if array includes any values
 type: snippet
+language: javascript
 tags: [array]
 cover: book-stopper
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/includes-case-insensitive.md b/snippets/js/s/includes-case-insensitive.md
similarity index 96%
rename from snippets/includes-case-insensitive.md
rename to snippets/js/s/includes-case-insensitive.md
index 02ac1c5f0..c7c13057d 100644
--- a/snippets/includes-case-insensitive.md
+++ b/snippets/js/s/includes-case-insensitive.md
@@ -1,6 +1,7 @@
 ---
 title: Case-insensitive substring search
 type: snippet
+language: javascript
 tags: [string]
 author: chalarangelo
 cover: cup-of-orange
diff --git a/snippets/indent-string.md b/snippets/js/s/indent-string.md
similarity index 96%
rename from snippets/indent-string.md
rename to snippets/js/s/indent-string.md
index 0c698c7e9..d0b830fbe 100644
--- a/snippets/indent-string.md
+++ b/snippets/js/s/indent-string.md
@@ -1,6 +1,7 @@
 ---
 title: Indent string
 type: snippet
+language: javascript
 tags: [string]
 cover: clutter
 dateModified: 2020-11-01T20:50:57+02:00
diff --git a/snippets/index-by.md b/snippets/js/s/index-by.md
similarity index 97%
rename from snippets/index-by.md
rename to snippets/js/s/index-by.md
index a68310819..760156125 100644
--- a/snippets/index-by.md
+++ b/snippets/js/s/index-by.md
@@ -1,6 +1,7 @@
 ---
 title: Index array based on function
 type: snippet
+language: javascript
 tags: [array,object]
 author: chalarangelo
 cover: guitar-living-room
diff --git a/snippets/index-of-all.md b/snippets/js/s/index-of-all.md
similarity index 96%
rename from snippets/index-of-all.md
rename to snippets/js/s/index-of-all.md
index 6c381a5d3..737691556 100644
--- a/snippets/index-of-all.md
+++ b/snippets/js/s/index-of-all.md
@@ -1,6 +1,7 @@
 ---
 title: Index of all matches
 type: snippet
+language: javascript
 tags: [array]
 cover: jars-on-shelf-2
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/index-of-substrings.md b/snippets/js/s/index-of-substrings.md
similarity index 97%
rename from snippets/index-of-substrings.md
rename to snippets/js/s/index-of-substrings.md
index 90470a428..b46e52aa3 100644
--- a/snippets/index-of-substrings.md
+++ b/snippets/js/s/index-of-substrings.md
@@ -1,6 +1,7 @@
 ---
 title: Index of substrings
 type: snippet
+language: javascript
 tags: [string,algorithm,generator]
 author: chalarangelo
 cover: violin
diff --git a/snippets/index-on.md b/snippets/js/s/index-on.md
similarity index 97%
rename from snippets/index-on.md
rename to snippets/js/s/index-on.md
index 49bd08203..907050382 100644
--- a/snippets/index-on.md
+++ b/snippets/js/s/index-on.md
@@ -1,6 +1,7 @@
 ---
 title: Array to object based on key
 type: snippet
+language: javascript
 tags: [array,object]
 author: chalarangelo
 cover: lavender-shelf
diff --git a/snippets/initial.md b/snippets/js/s/initial.md
similarity index 94%
rename from snippets/initial.md
rename to snippets/js/s/initial.md
index a0933b270..122854450 100644
--- a/snippets/initial.md
+++ b/snippets/js/s/initial.md
@@ -1,6 +1,7 @@
 ---
 title: Array without last element
 type: snippet
+language: javascript
 tags: [array]
 cover: red-light
 dateModified: 2020-11-03T21:46:13+02:00
diff --git a/snippets/initialize-array-with-range-right.md b/snippets/js/s/initialize-array-with-range-right.md
similarity index 98%
rename from snippets/initialize-array-with-range-right.md
rename to snippets/js/s/initialize-array-with-range-right.md
index ba4131689..1eadc7a08 100644
--- a/snippets/initialize-array-with-range-right.md
+++ b/snippets/js/s/initialize-array-with-range-right.md
@@ -1,6 +1,7 @@
 ---
 title: Initialize array with reversed range
 type: snippet
+language: javascript
 tags: [array]
 cover: interior-4
 excerpt: Initializes an inclusive array with numbers in a range, reversed, using a common `step` difference.
diff --git a/snippets/initialize-array-with-range.md b/snippets/js/s/initialize-array-with-range.md
similarity index 97%
rename from snippets/initialize-array-with-range.md
rename to snippets/js/s/initialize-array-with-range.md
index 92e86cdb1..29351193e 100644
--- a/snippets/initialize-array-with-range.md
+++ b/snippets/js/s/initialize-array-with-range.md
@@ -1,6 +1,7 @@
 ---
 title: Initialize array with range
 type: snippet
+language: javascript
 tags: [array]
 cover: white-flower
 excerpt: Initializes an inclusive array with numbers in a range, using a common `step` difference.
diff --git a/snippets/initialize-array-with-values.md b/snippets/js/s/initialize-array-with-values.md
similarity index 96%
rename from snippets/initialize-array-with-values.md
rename to snippets/js/s/initialize-array-with-values.md
index c42f5d32c..25d10f414 100644
--- a/snippets/initialize-array-with-values.md
+++ b/snippets/js/s/initialize-array-with-values.md
@@ -1,6 +1,7 @@
 ---
 title: Initialize array with values
 type: snippet
+language: javascript
 tags: [array]
 cover: flower-portrait-1
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/initialize-nd-array.md b/snippets/js/s/initialize-nd-array.md
similarity index 96%
rename from snippets/initialize-nd-array.md
rename to snippets/js/s/initialize-nd-array.md
index 7cd3ebc5b..880e19a36 100644
--- a/snippets/initialize-nd-array.md
+++ b/snippets/js/s/initialize-nd-array.md
@@ -1,6 +1,7 @@
 ---
 title: Initialize n-dimensional array
 type: snippet
+language: javascript
 tags: [array,recursion]
 cover: colorful-pots
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/initialize2-d-array.md b/snippets/js/s/initialize2-d-array.md
similarity index 96%
rename from snippets/initialize2-d-array.md
rename to snippets/js/s/initialize2-d-array.md
index 8f2295ec9..54aba382a 100644
--- a/snippets/initialize2-d-array.md
+++ b/snippets/js/s/initialize2-d-array.md
@@ -1,6 +1,7 @@
 ---
 title: Initialize 2D array
 type: snippet
+language: javascript
 tags: [array]
 cover: cloudy-rock-formation
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/inject-css.md b/snippets/js/s/inject-css.md
similarity index 97%
rename from snippets/inject-css.md
rename to snippets/js/s/inject-css.md
index bddb272ea..a03adda41 100644
--- a/snippets/inject-css.md
+++ b/snippets/js/s/inject-css.md
@@ -1,6 +1,7 @@
 ---
 title: Inject CSS
 type: snippet
+language: javascript
 tags: [browser,css]
 cover: dark-leaves-5
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/insert-after.md b/snippets/js/s/insert-after.md
similarity index 96%
rename from snippets/insert-after.md
rename to snippets/js/s/insert-after.md
index b42bbf044..251ac32c4 100644
--- a/snippets/insert-after.md
+++ b/snippets/js/s/insert-after.md
@@ -1,6 +1,7 @@
 ---
 title: Insert HTML string after element
 type: snippet
+language: javascript
 tags: [browser]
 cover: malibu
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/insert-at.md b/snippets/js/s/insert-at.md
similarity index 96%
rename from snippets/insert-at.md
rename to snippets/js/s/insert-at.md
index 5bb57592d..3be7bba95 100644
--- a/snippets/insert-at.md
+++ b/snippets/js/s/insert-at.md
@@ -1,6 +1,7 @@
 ---
 title: Insert value at array index
 type: snippet
+language: javascript
 tags: [array]
 author: chalarangelo
 cover: messy-papers
diff --git a/snippets/insert-before.md b/snippets/js/s/insert-before.md
similarity index 96%
rename from snippets/insert-before.md
rename to snippets/js/s/insert-before.md
index b377e0c77..635c12e60 100644
--- a/snippets/insert-before.md
+++ b/snippets/js/s/insert-before.md
@@ -1,6 +1,7 @@
 ---
 title: Insert HTML string before element
 type: snippet
+language: javascript
 tags: [browser]
 cover: engine
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/insertion-sort.md b/snippets/js/s/insertion-sort.md
similarity index 97%
rename from snippets/insertion-sort.md
rename to snippets/js/s/insertion-sort.md
index 69cb7c500..053ece537 100644
--- a/snippets/insertion-sort.md
+++ b/snippets/js/s/insertion-sort.md
@@ -1,6 +1,7 @@
 ---
 title: Insertion sort
 type: snippet
+language: javascript
 tags: [algorithm,array]
 author: chalarangelo
 cover: goat-wooden-cottage
diff --git a/snippets/intersection-by.md b/snippets/js/s/intersection-by.md
similarity index 97%
rename from snippets/intersection-by.md
rename to snippets/js/s/intersection-by.md
index a617fd1d9..7a3d6b200 100644
--- a/snippets/intersection-by.md
+++ b/snippets/js/s/intersection-by.md
@@ -1,6 +1,7 @@
 ---
 title: Mapped array intersection
 type: snippet
+language: javascript
 tags: [array]
 cover: cobbled-street
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/intersection-with.md b/snippets/js/s/intersection-with.md
similarity index 96%
rename from snippets/intersection-with.md
rename to snippets/js/s/intersection-with.md
index c5481d160..77433fe59 100644
--- a/snippets/intersection-with.md
+++ b/snippets/js/s/intersection-with.md
@@ -1,6 +1,7 @@
 ---
 title: Array intersection based on function
 type: snippet
+language: javascript
 tags: [array]
 cover: digital-nomad-2
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/intersection.md b/snippets/js/s/intersection.md
similarity index 95%
rename from snippets/intersection.md
rename to snippets/js/s/intersection.md
index 5aaa89fba..855173f91 100644
--- a/snippets/intersection.md
+++ b/snippets/js/s/intersection.md
@@ -1,6 +1,7 @@
 ---
 title: Array intersection
 type: snippet
+language: javascript
 tags: [array]
 cover: red-berries
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/intersects.md b/snippets/js/s/intersects.md
similarity index 96%
rename from snippets/intersects.md
rename to snippets/js/s/intersects.md
index dfeb6b03c..ec5138570 100644
--- a/snippets/intersects.md
+++ b/snippets/js/s/intersects.md
@@ -1,6 +1,7 @@
 ---
 title: Check if two arrays intersect
 type: snippet
+language: javascript
 tags: [array]
 author: chalarangelo
 cover: interior-5
diff --git a/snippets/invert-key-values.md b/snippets/js/s/invert-key-values.md
similarity index 97%
rename from snippets/invert-key-values.md
rename to snippets/js/s/invert-key-values.md
index 7dedff56e..298f7947d 100644
--- a/snippets/invert-key-values.md
+++ b/snippets/js/s/invert-key-values.md
@@ -1,6 +1,7 @@
 ---
 title: Invert object
 type: snippet
+language: javascript
 tags: [object]
 cover: pineapple-on-green
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-absolute-url.md b/snippets/js/s/is-absolute-url.md
similarity index 95%
rename from snippets/is-absolute-url.md
rename to snippets/js/s/is-absolute-url.md
index 06a6da3a2..4a5ac2d67 100644
--- a/snippets/is-absolute-url.md
+++ b/snippets/js/s/is-absolute-url.md
@@ -1,6 +1,7 @@
 ---
 title: Check if absolute URL
 type: snippet
+language: javascript
 tags: [string,browser,regexp]
 cover: coffee-phone-tray-2
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-after-date.md b/snippets/js/s/is-after-date.md
similarity index 95%
rename from snippets/is-after-date.md
rename to snippets/js/s/is-after-date.md
index b19187b12..10bfe3d40 100644
--- a/snippets/is-after-date.md
+++ b/snippets/js/s/is-after-date.md
@@ -1,6 +1,7 @@
 ---
 title: Check if date is after another date
 type: snippet
+language: javascript
 tags: [date]
 cover: flower-portrait-4
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-alpha-numeric.md b/snippets/js/s/is-alpha-numeric.md
similarity index 96%
rename from snippets/is-alpha-numeric.md
rename to snippets/js/s/is-alpha-numeric.md
index 6ea340439..0646fd8ca 100644
--- a/snippets/is-alpha-numeric.md
+++ b/snippets/js/s/is-alpha-numeric.md
@@ -1,6 +1,7 @@
 ---
 title: String is alphanumeric
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: mountain-lake-cottage-2
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-alpha.md b/snippets/js/s/is-alpha.md
similarity index 95%
rename from snippets/is-alpha.md
rename to snippets/js/s/is-alpha.md
index ed7d6ab77..c14c91c55 100644
--- a/snippets/is-alpha.md
+++ b/snippets/js/s/is-alpha.md
@@ -1,6 +1,7 @@
 ---
 title: String is alpha
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: coffee-phone-tray-3
 dateModified: 2020-12-31T14:01:42+02:00
diff --git a/snippets/is-anagram.md b/snippets/js/s/is-anagram.md
similarity index 97%
rename from snippets/is-anagram.md
rename to snippets/js/s/is-anagram.md
index d481891c1..0e0c5f941 100644
--- a/snippets/is-anagram.md
+++ b/snippets/js/s/is-anagram.md
@@ -1,6 +1,7 @@
 ---
 title: String is anagram
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: new-york
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-array-like.md b/snippets/js/s/is-array-like.md
similarity index 96%
rename from snippets/is-array-like.md
rename to snippets/js/s/is-array-like.md
index 5c5c4b8d1..349e22051 100644
--- a/snippets/is-array-like.md
+++ b/snippets/js/s/is-array-like.md
@@ -1,6 +1,7 @@
 ---
 title: Value is array-like
 type: snippet
+language: javascript
 tags: [type,array]
 cover: colorful-plastic
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-async-function.md b/snippets/js/s/is-async-function.md
similarity index 96%
rename from snippets/is-async-function.md
rename to snippets/js/s/is-async-function.md
index b5bc01158..9660cd365 100644
--- a/snippets/is-async-function.md
+++ b/snippets/js/s/is-async-function.md
@@ -1,6 +1,7 @@
 ---
 title: Value is async function
 type: snippet
+language: javascript
 tags: [type,function]
 author: chalarangelo
 cover: interior-12
diff --git a/snippets/is-before-date.md b/snippets/js/s/is-before-date.md
similarity index 95%
rename from snippets/is-before-date.md
rename to snippets/js/s/is-before-date.md
index 91d067441..347a854fe 100644
--- a/snippets/is-before-date.md
+++ b/snippets/js/s/is-before-date.md
@@ -1,6 +1,7 @@
 ---
 title: Check if date is before another date
 type: snippet
+language: javascript
 tags: [date]
 cover: flower-portrait-3
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-between-dates.md b/snippets/js/s/is-between-dates.md
similarity index 96%
rename from snippets/is-between-dates.md
rename to snippets/js/s/is-between-dates.md
index e3fd68f9a..b8d967138 100644
--- a/snippets/is-between-dates.md
+++ b/snippets/js/s/is-between-dates.md
@@ -1,6 +1,7 @@
 ---
 title: Check if date is between two dates
 type: snippet
+language: javascript
 tags: [date]
 cover: flower-portrait-6
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-boolean.md b/snippets/js/s/is-boolean.md
similarity index 94%
rename from snippets/is-boolean.md
rename to snippets/js/s/is-boolean.md
index 36bf24d12..c198dfedd 100644
--- a/snippets/is-boolean.md
+++ b/snippets/js/s/is-boolean.md
@@ -1,6 +1,7 @@
 ---
 title: Value is boolean
 type: snippet
+language: javascript
 tags: [type]
 cover: book-stopper
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/is-browser-tab-focused.md b/snippets/js/s/is-browser-tab-focused.md
similarity index 95%
rename from snippets/is-browser-tab-focused.md
rename to snippets/js/s/is-browser-tab-focused.md
index 5bfca7cb5..bc482c021 100644
--- a/snippets/is-browser-tab-focused.md
+++ b/snippets/js/s/is-browser-tab-focused.md
@@ -1,6 +1,7 @@
 ---
 title: Check if browser tab is focused
 type: snippet
+language: javascript
 tags: [browser]
 cover: overgrown
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-browser.md b/snippets/js/s/is-browser.md
similarity index 97%
rename from snippets/is-browser.md
rename to snippets/js/s/is-browser.md
index f9636af94..cb388241c 100644
--- a/snippets/is-browser.md
+++ b/snippets/js/s/is-browser.md
@@ -1,6 +1,7 @@
 ---
 title: Environment is browser
 type: snippet
+language: javascript
 tags: [browser]
 cover: travel-mug-3
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-contained-in.md b/snippets/js/s/is-contained-in.md
similarity index 97%
rename from snippets/is-contained-in.md
rename to snippets/js/s/is-contained-in.md
index 023ed64ff..e3716e980 100644
--- a/snippets/is-contained-in.md
+++ b/snippets/js/s/is-contained-in.md
@@ -1,6 +1,7 @@
 ---
 title: Array is contained in other array
 type: snippet
+language: javascript
 tags: [array]
 author: chalarangelo
 cover: island-corridor
diff --git a/snippets/is-date-valid.md b/snippets/js/s/is-date-valid.md
similarity index 97%
rename from snippets/is-date-valid.md
rename to snippets/js/s/is-date-valid.md
index 14a180687..c550a12f0 100644
--- a/snippets/is-date-valid.md
+++ b/snippets/js/s/is-date-valid.md
@@ -1,6 +1,7 @@
 ---
 title: Check if date is valid
 type: snippet
+language: javascript
 tags: [date]
 cover: two-cities
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-deep-frozen.md b/snippets/js/s/is-deep-frozen.md
similarity index 97%
rename from snippets/is-deep-frozen.md
rename to snippets/js/s/is-deep-frozen.md
index db8878941..9f0c04a79 100644
--- a/snippets/is-deep-frozen.md
+++ b/snippets/js/s/is-deep-frozen.md
@@ -1,6 +1,7 @@
 ---
 title: Check if object is deep frozen
 type: snippet
+language: javascript
 tags: [object,recursion]
 cover: godray-computer-mug
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-disjoint.md b/snippets/js/s/is-disjoint.md
similarity index 96%
rename from snippets/is-disjoint.md
rename to snippets/js/s/is-disjoint.md
index a79e98009..f1bbe97cf 100644
--- a/snippets/is-disjoint.md
+++ b/snippets/js/s/is-disjoint.md
@@ -1,6 +1,7 @@
 ---
 title: Disjointed iterables
 type: snippet
+language: javascript
 tags: [array]
 cover: interior-9
 dateModified: 2020-10-11T11:53:01+03:00
diff --git a/snippets/is-divisible.md b/snippets/js/s/is-divisible.md
similarity index 94%
rename from snippets/is-divisible.md
rename to snippets/js/s/is-divisible.md
index 747dd054b..0ba0406b1 100644
--- a/snippets/is-divisible.md
+++ b/snippets/js/s/is-divisible.md
@@ -1,6 +1,7 @@
 ---
 title: Number is divisible
 type: snippet
+language: javascript
 tags: [math]
 cover: clutter-2
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/is-duplex-stream.md b/snippets/js/s/is-duplex-stream.md
similarity index 97%
rename from snippets/is-duplex-stream.md
rename to snippets/js/s/is-duplex-stream.md
index 9ab5e43a9..d11afb752 100644
--- a/snippets/is-duplex-stream.md
+++ b/snippets/js/s/is-duplex-stream.md
@@ -1,6 +1,7 @@
 ---
 title: Stream is duplex
 type: snippet
+language: javascript
 tags: [node,type]
 cover: digital-nomad-11
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-empty.md b/snippets/js/s/is-empty.md
similarity index 97%
rename from snippets/is-empty.md
rename to snippets/js/s/is-empty.md
index 662b26f60..6a66a928c 100644
--- a/snippets/is-empty.md
+++ b/snippets/js/s/is-empty.md
@@ -1,6 +1,7 @@
 ---
 title: Collection is empty
 type: snippet
+language: javascript
 tags: [type,array,object,string]
 cover: book-chair
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-even.md b/snippets/js/s/is-even.md
similarity index 94%
rename from snippets/is-even.md
rename to snippets/js/s/is-even.md
index 6470e66ba..b8a0bf947 100644
--- a/snippets/is-even.md
+++ b/snippets/js/s/is-even.md
@@ -1,6 +1,7 @@
 ---
 title: Number is even
 type: snippet
+language: javascript
 tags: [math]
 cover: by-the-lighthouse
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-function.md b/snippets/js/s/is-function.md
similarity index 94%
rename from snippets/is-function.md
rename to snippets/js/s/is-function.md
index e47c0dbaa..474827c2b 100644
--- a/snippets/is-function.md
+++ b/snippets/js/s/is-function.md
@@ -1,6 +1,7 @@
 ---
 title: Value is function
 type: snippet
+language: javascript
 tags: [type,function]
 cover: boulder-beach
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/is-generator-function.md b/snippets/js/s/is-generator-function.md
similarity index 96%
rename from snippets/is-generator-function.md
rename to snippets/js/s/is-generator-function.md
index 9684bf208..fdbaa1e2d 100644
--- a/snippets/is-generator-function.md
+++ b/snippets/js/s/is-generator-function.md
@@ -1,6 +1,7 @@
 ---
 title: Value is generator function
 type: snippet
+language: javascript
 tags: [type,function]
 author: chalarangelo
 cover: interior-4
diff --git a/snippets/is-iso-string.md b/snippets/js/s/is-iso-string.md
similarity index 97%
rename from snippets/is-iso-string.md
rename to snippets/js/s/is-iso-string.md
index ad6d35519..85857716a 100644
--- a/snippets/is-iso-string.md
+++ b/snippets/js/s/is-iso-string.md
@@ -1,6 +1,7 @@
 ---
 title: String is ISO formatted date
 type: snippet
+language: javascript
 tags: [date]
 author: chalarangelo
 cover: perfect-timing
diff --git a/snippets/is-leap-year.md b/snippets/js/s/is-leap-year.md
similarity index 95%
rename from snippets/is-leap-year.md
rename to snippets/js/s/is-leap-year.md
index d6d0b5aa6..c2a18ff41 100644
--- a/snippets/is-leap-year.md
+++ b/snippets/js/s/is-leap-year.md
@@ -1,6 +1,7 @@
 ---
 title: Check for leap year
 type: snippet
+language: javascript
 tags: [date]
 cover: flowering-hills
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-local-storage-enabled.md b/snippets/js/s/is-local-storage-enabled.md
similarity index 97%
rename from snippets/is-local-storage-enabled.md
rename to snippets/js/s/is-local-storage-enabled.md
index 53ba98eb9..ecb638aa4 100644
--- a/snippets/is-local-storage-enabled.md
+++ b/snippets/js/s/is-local-storage-enabled.md
@@ -1,6 +1,7 @@
 ---
 title: Check if localStorage is enabled
 type: snippet
+language: javascript
 tags: [browser]
 author: chalarangelo
 cover: guitar-living-room
diff --git a/snippets/is-lower-case.md b/snippets/js/s/is-lower-case.md
similarity index 95%
rename from snippets/is-lower-case.md
rename to snippets/js/s/is-lower-case.md
index 4e6a06df1..33cfe878e 100644
--- a/snippets/is-lower-case.md
+++ b/snippets/js/s/is-lower-case.md
@@ -1,6 +1,7 @@
 ---
 title: String is lowercase
 type: snippet
+language: javascript
 tags: [string]
 cover: flower-portrait-7
 dateModified: 2020-10-20T11:21:07+03:00
diff --git a/snippets/is-negative-zero.md b/snippets/js/s/is-negative-zero.md
similarity index 95%
rename from snippets/is-negative-zero.md
rename to snippets/js/s/is-negative-zero.md
index f2c8e7a4b..ced9a5bcd 100644
--- a/snippets/is-negative-zero.md
+++ b/snippets/js/s/is-negative-zero.md
@@ -1,6 +1,7 @@
 ---
 title: Number is negative zero
 type: snippet
+language: javascript
 tags: [math]
 cover: flower-portrait-8
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-nil.md b/snippets/js/s/is-nil.md
similarity index 95%
rename from snippets/is-nil.md
rename to snippets/js/s/is-nil.md
index ee3c2d80f..fbe7ba150 100644
--- a/snippets/is-nil.md
+++ b/snippets/js/s/is-nil.md
@@ -1,6 +1,7 @@
 ---
 title: Value is nil
 type: snippet
+language: javascript
 tags: [type]
 cover: river-houses
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-node.md b/snippets/js/s/is-node.md
similarity index 96%
rename from snippets/is-node.md
rename to snippets/js/s/is-node.md
index c7143167a..c6208feb9 100644
--- a/snippets/is-node.md
+++ b/snippets/js/s/is-node.md
@@ -1,6 +1,7 @@
 ---
 title: Environment is Node.js
 type: snippet
+language: javascript
 tags: [node]
 cover: cloudy-rock-formation
 dateModified: 2021-04-02T11:45:13+03:00
diff --git a/snippets/is-null.md b/snippets/js/s/is-null.md
similarity index 93%
rename from snippets/is-null.md
rename to snippets/js/s/is-null.md
index da8d28645..0f91d6e14 100644
--- a/snippets/is-null.md
+++ b/snippets/js/s/is-null.md
@@ -1,6 +1,7 @@
 ---
 title: Value is null
 type: snippet
+language: javascript
 tags: [type]
 cover: broken-screen
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-number.md b/snippets/js/s/is-number.md
similarity index 96%
rename from snippets/is-number.md
rename to snippets/js/s/is-number.md
index 11420c6be..4072d296e 100644
--- a/snippets/is-number.md
+++ b/snippets/js/s/is-number.md
@@ -1,6 +1,7 @@
 ---
 title: Value is number
 type: snippet
+language: javascript
 tags: [type,math]
 cover: red-petals
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/is-object-like.md b/snippets/js/s/is-object-like.md
similarity index 95%
rename from snippets/is-object-like.md
rename to snippets/js/s/is-object-like.md
index 4cb3d52f5..84fe3a9ae 100644
--- a/snippets/is-object-like.md
+++ b/snippets/js/s/is-object-like.md
@@ -1,6 +1,7 @@
 ---
 title: Value is object-like
 type: snippet
+language: javascript
 tags: [type,object]
 cover: orange-flower
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/is-object.md b/snippets/js/s/is-object.md
similarity index 96%
rename from snippets/is-object.md
rename to snippets/js/s/is-object.md
index 8fac2723e..20dffbc5d 100644
--- a/snippets/is-object.md
+++ b/snippets/js/s/is-object.md
@@ -1,6 +1,7 @@
 ---
 title: Value is object
 type: snippet
+language: javascript
 tags: [type,object]
 cover: flower-portrait-9
 dateModified: 2021-01-08T00:23:44+02:00
diff --git a/snippets/is-odd.md b/snippets/js/s/is-odd.md
similarity index 94%
rename from snippets/is-odd.md
rename to snippets/js/s/is-odd.md
index 69cd347f7..e77f93328 100644
--- a/snippets/is-odd.md
+++ b/snippets/js/s/is-odd.md
@@ -1,6 +1,7 @@
 ---
 title: Number is odd
 type: snippet
+language: javascript
 tags: [math]
 cover: flower-portrait-5
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-plain-object.md b/snippets/js/s/is-plain-object.md
similarity index 96%
rename from snippets/is-plain-object.md
rename to snippets/js/s/is-plain-object.md
index c22884c02..919748db7 100644
--- a/snippets/is-plain-object.md
+++ b/snippets/js/s/is-plain-object.md
@@ -1,6 +1,7 @@
 ---
 title: Value is plain object
 type: snippet
+language: javascript
 tags: [type,object]
 cover: yellow-white-mug-1
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-power-of-ten.md b/snippets/js/s/is-power-of-ten.md
similarity index 95%
rename from snippets/is-power-of-ten.md
rename to snippets/js/s/is-power-of-ten.md
index a0781dbad..a1bb8e9e4 100644
--- a/snippets/is-power-of-ten.md
+++ b/snippets/js/s/is-power-of-ten.md
@@ -1,6 +1,7 @@
 ---
 title: Number is power of ten
 type: snippet
+language: javascript
 tags: [math]
 author: chalarangelo
 cover: boulder-beach
diff --git a/snippets/is-power-of-two.md b/snippets/js/s/is-power-of-two.md
similarity index 95%
rename from snippets/is-power-of-two.md
rename to snippets/js/s/is-power-of-two.md
index 032fb9cf4..58fe646a8 100644
--- a/snippets/is-power-of-two.md
+++ b/snippets/js/s/is-power-of-two.md
@@ -1,6 +1,7 @@
 ---
 title: Number is power of two
 type: snippet
+language: javascript
 tags: [math]
 author: chalarangelo
 cover: flower-portrait-10
diff --git a/snippets/is-prime.md b/snippets/js/s/is-prime.md
similarity index 96%
rename from snippets/is-prime.md
rename to snippets/js/s/is-prime.md
index c13237943..cc5cd7020 100644
--- a/snippets/is-prime.md
+++ b/snippets/js/s/is-prime.md
@@ -1,6 +1,7 @@
 ---
 title: Number is prime
 type: snippet
+language: javascript
 tags: [math,algorithm]
 cover: thread
 dateModified: 2021-01-12T19:36:36+02:00
diff --git a/snippets/is-primitive.md b/snippets/js/s/is-primitive.md
similarity index 96%
rename from snippets/is-primitive.md
rename to snippets/js/s/is-primitive.md
index 33f603ed4..f17315326 100644
--- a/snippets/is-primitive.md
+++ b/snippets/js/s/is-primitive.md
@@ -1,6 +1,7 @@
 ---
 title: Number is primitive
 type: snippet
+language: javascript
 tags: [type]
 cover: flower-camera
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/is-promise-like.md b/snippets/js/s/is-promise-like.md
similarity index 97%
rename from snippets/is-promise-like.md
rename to snippets/js/s/is-promise-like.md
index 1afdc6cef..843a8ce94 100644
--- a/snippets/is-promise-like.md
+++ b/snippets/js/s/is-promise-like.md
@@ -1,6 +1,7 @@
 ---
 title: Value is promise-like
 type: snippet
+language: javascript
 tags: [type,function,promise]
 cover: digital-nomad-13
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-readable-stream.md b/snippets/js/s/is-readable-stream.md
similarity index 97%
rename from snippets/is-readable-stream.md
rename to snippets/js/s/is-readable-stream.md
index a18f4a8a7..8975bfe76 100644
--- a/snippets/is-readable-stream.md
+++ b/snippets/js/s/is-readable-stream.md
@@ -1,6 +1,7 @@
 ---
 title: Stream is readable
 type: snippet
+language: javascript
 tags: [node,type]
 cover: working-bee
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-same-date.md b/snippets/js/s/is-same-date.md
similarity index 95%
rename from snippets/is-same-date.md
rename to snippets/js/s/is-same-date.md
index 119bb9d48..426dff587 100644
--- a/snippets/is-same-date.md
+++ b/snippets/js/s/is-same-date.md
@@ -1,6 +1,7 @@
 ---
 title: Date is same as another date
 type: snippet
+language: javascript
 tags: [date]
 cover: pineapple-at-work
 dateModified: 2020-11-03T22:11:18+02:00
diff --git a/snippets/is-same-origin.md b/snippets/js/s/is-same-origin.md
similarity index 97%
rename from snippets/is-same-origin.md
rename to snippets/js/s/is-same-origin.md
index 2d9862ef9..8c96bbfd1 100644
--- a/snippets/is-same-origin.md
+++ b/snippets/js/s/is-same-origin.md
@@ -1,6 +1,7 @@
 ---
 title: Same-origin URLs
 type: snippet
+language: javascript
 tags: [browser]
 author: chalarangelo
 cover: keyboard-tea
diff --git a/snippets/is-session-storage-enabled.md b/snippets/js/s/is-session-storage-enabled.md
similarity index 97%
rename from snippets/is-session-storage-enabled.md
rename to snippets/js/s/is-session-storage-enabled.md
index 72a6f3de6..e2b01702f 100644
--- a/snippets/is-session-storage-enabled.md
+++ b/snippets/js/s/is-session-storage-enabled.md
@@ -1,6 +1,7 @@
 ---
 title: Check if sessionStorage is enabled
 type: snippet
+language: javascript
 tags: [browser]
 author: chalarangelo
 cover: flower-camera
diff --git a/snippets/is-sorted.md b/snippets/js/s/is-sorted.md
similarity index 97%
rename from snippets/is-sorted.md
rename to snippets/js/s/is-sorted.md
index 6f3c99143..2120a5b65 100644
--- a/snippets/is-sorted.md
+++ b/snippets/js/s/is-sorted.md
@@ -1,6 +1,7 @@
 ---
 title: Array is sorted
 type: snippet
+language: javascript
 tags: [array]
 cover: italian-horizon
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-stream.md b/snippets/js/s/is-stream.md
similarity index 96%
rename from snippets/is-stream.md
rename to snippets/js/s/is-stream.md
index acee28f4f..c75c1942c 100644
--- a/snippets/is-stream.md
+++ b/snippets/js/s/is-stream.md
@@ -1,6 +1,7 @@
 ---
 title: Value is stream
 type: snippet
+language: javascript
 tags: [node,type]
 cover: mountain-lake-cottage-2
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-string.md b/snippets/js/s/is-string.md
similarity index 94%
rename from snippets/is-string.md
rename to snippets/js/s/is-string.md
index 1f344db71..c59151708 100644
--- a/snippets/is-string.md
+++ b/snippets/js/s/is-string.md
@@ -1,6 +1,7 @@
 ---
 title: Value is string
 type: snippet
+language: javascript
 tags: [type,string]
 cover: overgrown
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-symbol.md b/snippets/js/s/is-symbol.md
similarity index 94%
rename from snippets/is-symbol.md
rename to snippets/js/s/is-symbol.md
index ed9327d24..8bccebbc8 100644
--- a/snippets/is-symbol.md
+++ b/snippets/js/s/is-symbol.md
@@ -1,6 +1,7 @@
 ---
 title: Value is symbol
 type: snippet
+language: javascript
 tags: [type]
 cover: naming-conventions
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/is-travis-ci.md b/snippets/js/s/is-travis-ci.md
similarity index 96%
rename from snippets/is-travis-ci.md
rename to snippets/js/s/is-travis-ci.md
index cb2c72daa..7bff1327c 100644
--- a/snippets/is-travis-ci.md
+++ b/snippets/js/s/is-travis-ci.md
@@ -1,6 +1,7 @@
 ---
 title: Environment is Travis CI
 type: snippet
+language: javascript
 tags: [node]
 unlisted: true
 cover: succulent-5
diff --git a/snippets/is-undefined.md b/snippets/js/s/is-undefined.md
similarity index 94%
rename from snippets/is-undefined.md
rename to snippets/js/s/is-undefined.md
index 9d48adbc4..151ad15b1 100644
--- a/snippets/is-undefined.md
+++ b/snippets/js/s/is-undefined.md
@@ -1,6 +1,7 @@
 ---
 title: Value is undefined
 type: snippet
+language: javascript
 tags: [type]
 cover: peaches
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-upper-case.md b/snippets/js/s/is-upper-case.md
similarity index 95%
rename from snippets/is-upper-case.md
rename to snippets/js/s/is-upper-case.md
index 6c5420a72..02bd68ea8 100644
--- a/snippets/is-upper-case.md
+++ b/snippets/js/s/is-upper-case.md
@@ -1,6 +1,7 @@
 ---
 title: String is uppercase
 type: snippet
+language: javascript
 tags: [string]
 cover: flower-portrait-7
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/is-valid-json.md b/snippets/js/s/is-valid-json.md
similarity index 96%
rename from snippets/is-valid-json.md
rename to snippets/js/s/is-valid-json.md
index f766d4d5c..a0447e0ec 100644
--- a/snippets/is-valid-json.md
+++ b/snippets/js/s/is-valid-json.md
@@ -1,6 +1,7 @@
 ---
 title: String is valid JSON
 type: snippet
+language: javascript
 tags: [type]
 cover: italian-horizon
 dateModified: 2020-10-18T13:49:49+03:00
diff --git a/snippets/is-weekday.md b/snippets/js/s/is-weekday.md
similarity index 95%
rename from snippets/is-weekday.md
rename to snippets/js/s/is-weekday.md
index b07cbcdb9..7d52c6481 100644
--- a/snippets/is-weekday.md
+++ b/snippets/js/s/is-weekday.md
@@ -1,6 +1,7 @@
 ---
 title: Date is weekday
 type: snippet
+language: javascript
 tags: [date]
 cover: typewriter
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-weekend.md b/snippets/js/s/is-weekend.md
similarity index 95%
rename from snippets/is-weekend.md
rename to snippets/js/s/is-weekend.md
index ffa6308a5..15c0bf725 100644
--- a/snippets/is-weekend.md
+++ b/snippets/js/s/is-weekend.md
@@ -1,6 +1,7 @@
 ---
 title: Date is weekend
 type: snippet
+language: javascript
 tags: [date]
 cover: tropical-bike
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is-writable-stream.md b/snippets/js/s/is-writable-stream.md
similarity index 97%
rename from snippets/is-writable-stream.md
rename to snippets/js/s/is-writable-stream.md
index 7436885d9..db91fbea5 100644
--- a/snippets/is-writable-stream.md
+++ b/snippets/js/s/is-writable-stream.md
@@ -1,6 +1,7 @@
 ---
 title: Stream is writable
 type: snippet
+language: javascript
 tags: [node,type]
 cover: digital-nomad-3
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/is.md b/snippets/js/s/is.md
similarity index 97%
rename from snippets/is.md
rename to snippets/js/s/is.md
index 8323bfd3c..d00f815bc 100644
--- a/snippets/is.md
+++ b/snippets/js/s/is.md
@@ -1,6 +1,7 @@
 ---
 title: Check if value is of type
 type: snippet
+language: javascript
 tags: [type]
 cover: coffee-phone-tray
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/join.md b/snippets/js/s/join.md
similarity index 97%
rename from snippets/join.md
rename to snippets/js/s/join.md
index 9d30a4a50..aed5a8d22 100644
--- a/snippets/join.md
+++ b/snippets/js/s/join.md
@@ -1,6 +1,7 @@
 ---
 title: Join array into string
 type: snippet
+language: javascript
 tags: [array]
 cover: couch-laptop
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/jso-nto-csv.md b/snippets/js/s/jso-nto-csv.md
similarity index 98%
rename from snippets/jso-nto-csv.md
rename to snippets/js/s/jso-nto-csv.md
index 07a596959..85c127ac6 100644
--- a/snippets/jso-nto-csv.md
+++ b/snippets/js/s/jso-nto-csv.md
@@ -1,6 +1,7 @@
 ---
 title: JSON to CSV
 type: snippet
+language: javascript
 tags: [array,string,object]
 cover: horse-sunset
 dateModified: 2021-10-13T19:29:39+02:00
diff --git a/snippets/json-to-file.md b/snippets/js/s/json-to-file.md
similarity index 96%
rename from snippets/json-to-file.md
rename to snippets/js/s/json-to-file.md
index 3a975a236..83d1570fd 100644
--- a/snippets/json-to-file.md
+++ b/snippets/js/s/json-to-file.md
@@ -1,6 +1,7 @@
 ---
 title: JSON to file
 type: snippet
+language: javascript
 tags: [node]
 cover: travel-mug-3
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/juxt.md b/snippets/js/s/juxt.md
similarity index 97%
rename from snippets/juxt.md
rename to snippets/js/s/juxt.md
index f09e257b4..fbb37f23a 100644
--- a/snippets/juxt.md
+++ b/snippets/js/s/juxt.md
@@ -1,6 +1,7 @@
 ---
 title: Juxtapose functions
 type: snippet
+language: javascript
 tags: [function]
 cover: colorful-plastic
 dateModified: 2020-10-20T23:29:39+03:00
diff --git a/snippets/k-means.md b/snippets/js/s/k-means.md
similarity index 99%
rename from snippets/k-means.md
rename to snippets/js/s/k-means.md
index a11bd0c45..51657fdda 100644
--- a/snippets/k-means.md
+++ b/snippets/js/s/k-means.md
@@ -1,6 +1,7 @@
 ---
 title: K-means clustering
 type: snippet
+language: javascript
 tags: [algorithm,array]
 author: chalarangelo
 cover: antelope
diff --git a/snippets/k-nearest-neighbors.md b/snippets/js/s/k-nearest-neighbors.md
similarity index 98%
rename from snippets/k-nearest-neighbors.md
rename to snippets/js/s/k-nearest-neighbors.md
index c6c66d421..8a3b5e755 100644
--- a/snippets/k-nearest-neighbors.md
+++ b/snippets/js/s/k-nearest-neighbors.md
@@ -1,6 +1,7 @@
 ---
 title: K-nearest neighbors
 type: snippet
+language: javascript
 tags: [algorithm,array]
 author: chalarangelo
 cover: building-blocks
diff --git a/snippets/km-to-miles.md b/snippets/js/s/km-to-miles.md
similarity index 93%
rename from snippets/km-to-miles.md
rename to snippets/js/s/km-to-miles.md
index de7ed1164..a9f5e398b 100644
--- a/snippets/km-to-miles.md
+++ b/snippets/js/s/km-to-miles.md
@@ -1,6 +1,7 @@
 ---
 title: Km to miles
 type: snippet
+language: javascript
 tags: [math]
 unlisted: true
 cover: succulent-3
diff --git a/snippets/last-date-of-month.md b/snippets/js/s/last-date-of-month.md
similarity index 97%
rename from snippets/last-date-of-month.md
rename to snippets/js/s/last-date-of-month.md
index 89b79881e..c9f26931d 100644
--- a/snippets/last-date-of-month.md
+++ b/snippets/js/s/last-date-of-month.md
@@ -1,6 +1,7 @@
 ---
 title: Last date of month
 type: snippet
+language: javascript
 tags: [date]
 cover: polar-bear
 dateModified: 2020-10-09T22:01:42+03:00
diff --git a/snippets/last-n.md b/snippets/js/s/last-n.md
similarity index 94%
rename from snippets/last-n.md
rename to snippets/js/s/last-n.md
index d1693ecec..900c49ef2 100644
--- a/snippets/last-n.md
+++ b/snippets/js/s/last-n.md
@@ -1,6 +1,7 @@
 ---
 title: Last n elements
 type: snippet
+language: javascript
 tags: [array]
 author: chalarangelo
 cover: interior-5
diff --git a/snippets/last.md b/snippets/js/s/last.md
similarity index 96%
rename from snippets/last.md
rename to snippets/js/s/last.md
index ee3a3a96d..6056c5906 100644
--- a/snippets/last.md
+++ b/snippets/js/s/last.md
@@ -1,6 +1,7 @@
 ---
 title: Last array element
 type: snippet
+language: javascript
 tags: [array]
 cover: white-laptop
 dateModified: 2020-10-20T23:02:01+03:00
diff --git a/snippets/lcm.md b/snippets/js/s/lcm.md
similarity index 96%
rename from snippets/lcm.md
rename to snippets/js/s/lcm.md
index c1e568dfd..e6a3685e6 100644
--- a/snippets/lcm.md
+++ b/snippets/js/s/lcm.md
@@ -1,6 +1,7 @@
 ---
 title: Least common multiple
 type: snippet
+language: javascript
 tags: [math,algorithm,recursion]
 cover: waving-over-lake
 dateModified: 2020-12-28T13:49:24+02:00
diff --git a/snippets/left-substr-generator.md b/snippets/js/s/left-substr-generator.md
similarity index 96%
rename from snippets/left-substr-generator.md
rename to snippets/js/s/left-substr-generator.md
index 56324df5a..3872dcf39 100644
--- a/snippets/left-substr-generator.md
+++ b/snippets/js/s/left-substr-generator.md
@@ -1,6 +1,7 @@
 ---
 title: Left substring generator
 type: snippet
+language: javascript
 tags: [string,generator]
 cover: boutique-home-office-1
 author: chalarangelo
diff --git a/snippets/levenshtein-distance.md b/snippets/js/s/levenshtein-distance.md
similarity index 98%
rename from snippets/levenshtein-distance.md
rename to snippets/js/s/levenshtein-distance.md
index 37f2b67b8..1d6cc5dad 100644
--- a/snippets/levenshtein-distance.md
+++ b/snippets/js/s/levenshtein-distance.md
@@ -1,6 +1,7 @@
 ---
 title: Levenshtein distance
 type: snippet
+language: javascript
 tags: [string,algorithm]
 author: chalarangelo
 cover: armchair
diff --git a/snippets/linear-search.md b/snippets/js/s/linear-search.md
similarity index 97%
rename from snippets/linear-search.md
rename to snippets/js/s/linear-search.md
index b8853ad3d..66bb604b3 100644
--- a/snippets/linear-search.md
+++ b/snippets/js/s/linear-search.md
@@ -1,6 +1,7 @@
 ---
 title: Linear search
 type: snippet
+language: javascript
 tags: [algorithm,array]
 cover: coworking-space
 dateModified: 2020-12-28T12:07:53+02:00
diff --git a/snippets/listen-once.md b/snippets/js/s/listen-once.md
similarity index 97%
rename from snippets/listen-once.md
rename to snippets/js/s/listen-once.md
index e6c068e30..9cb3c9d93 100644
--- a/snippets/listen-once.md
+++ b/snippets/js/s/listen-once.md
@@ -1,6 +1,7 @@
 ---
 title: Listen for an event only once
 type: snippet
+language: javascript
 tags: [browser,event]
 author: chalarangelo
 cover: dog-waiting
diff --git a/snippets/listify.md b/snippets/js/s/listify.md
similarity index 97%
rename from snippets/listify.md
rename to snippets/js/s/listify.md
index 6063dea38..02240b0c6 100644
--- a/snippets/listify.md
+++ b/snippets/js/s/listify.md
@@ -1,6 +1,7 @@
 ---
 title: Map an object to an array
 type: snippet
+language: javascript
 tags: [object,array]
 author: chalarangelo
 cover: metro-arrival
diff --git a/snippets/log-base.md b/snippets/js/s/log-base.md
similarity index 95%
rename from snippets/log-base.md
rename to snippets/js/s/log-base.md
index c454b372e..c41b22261 100644
--- a/snippets/log-base.md
+++ b/snippets/js/s/log-base.md
@@ -1,6 +1,7 @@
 ---
 title: Logarithm in specific base
 type: snippet
+language: javascript
 tags: [math]
 cover: yellow-white-mug-2
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/longest-item.md b/snippets/js/s/longest-item.md
similarity index 97%
rename from snippets/longest-item.md
rename to snippets/js/s/longest-item.md
index 93395eadb..61883709a 100644
--- a/snippets/longest-item.md
+++ b/snippets/js/s/longest-item.md
@@ -1,6 +1,7 @@
 ---
 title: Longest item in array
 type: snippet
+language: javascript
 tags: [array]
 cover: interior-14
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/lowerize.md b/snippets/js/s/lowerize.md
similarity index 96%
rename from snippets/lowerize.md
rename to snippets/js/s/lowerize.md
index 07fa49fbb..c4b7f87ab 100644
--- a/snippets/lowerize.md
+++ b/snippets/js/s/lowerize.md
@@ -1,6 +1,7 @@
 ---
 title: Lowercase object keys
 type: snippet
+language: javascript
 tags: [object]
 author: chalarangelo
 cover: building-facade
diff --git a/snippets/luhn-check.md b/snippets/js/s/luhn-check.md
similarity index 98%
rename from snippets/luhn-check.md
rename to snippets/js/s/luhn-check.md
index 9e844754b..f18dbf9ac 100644
--- a/snippets/luhn-check.md
+++ b/snippets/js/s/luhn-check.md
@@ -1,6 +1,7 @@
 ---
 title: Luhn check
 type: snippet
+language: javascript
 tags: [math,algorithm]
 cover: blank-card
 excerpt: Implements the Luhn Algorithm, used to validate a variety of identification numbers.
diff --git a/snippets/map-consecutive.md b/snippets/js/s/map-consecutive.md
similarity index 97%
rename from snippets/map-consecutive.md
rename to snippets/js/s/map-consecutive.md
index 0dd70addb..b405a5426 100644
--- a/snippets/map-consecutive.md
+++ b/snippets/js/s/map-consecutive.md
@@ -1,6 +1,7 @@
 ---
 title: Map consecutive elements
 type: snippet
+language: javascript
 tags: [array]
 author: chalarangelo
 cover: cold-mountains
diff --git a/snippets/map-keys.md b/snippets/js/s/map-keys.md
similarity index 96%
rename from snippets/map-keys.md
rename to snippets/js/s/map-keys.md
index 7023a4d4c..e476c63fd 100644
--- a/snippets/map-keys.md
+++ b/snippets/js/s/map-keys.md
@@ -1,6 +1,7 @@
 ---
 title: Map object keys
 type: snippet
+language: javascript
 tags: [object]
 cover: rocky-mountains-2
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/map-num-range.md b/snippets/js/s/map-num-range.md
similarity index 95%
rename from snippets/map-num-range.md
rename to snippets/js/s/map-num-range.md
index 090c3f827..eef89329d 100644
--- a/snippets/map-num-range.md
+++ b/snippets/js/s/map-num-range.md
@@ -1,6 +1,7 @@
 ---
 title: Map number to range
 type: snippet
+language: javascript
 tags: [math]
 cover: clutter
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/map-object.md b/snippets/js/s/map-object.md
similarity index 96%
rename from snippets/map-object.md
rename to snippets/js/s/map-object.md
index 712e26709..7c9f57e64 100644
--- a/snippets/map-object.md
+++ b/snippets/js/s/map-object.md
@@ -1,6 +1,7 @@
 ---
 title: Map array to object
 type: snippet
+language: javascript
 tags: [array,object]
 cover: two-lighthouses
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/map-string.md b/snippets/js/s/map-string.md
similarity index 97%
rename from snippets/map-string.md
rename to snippets/js/s/map-string.md
index a50e87392..36b8e840f 100644
--- a/snippets/map-string.md
+++ b/snippets/js/s/map-string.md
@@ -1,6 +1,7 @@
 ---
 title: Map string
 type: snippet
+language: javascript
 tags: [string]
 cover: budapest-palace
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/map-to-object.md b/snippets/js/s/map-to-object.md
similarity index 95%
rename from snippets/map-to-object.md
rename to snippets/js/s/map-to-object.md
index a6fe96128..755edcf26 100644
--- a/snippets/map-to-object.md
+++ b/snippets/js/s/map-to-object.md
@@ -2,6 +2,7 @@
 title: Convert Map to object
 type: snippet
 shortTitle: Map to object
+language: javascript
 tags: [object]
 author: chalarangelo
 cover: succulent-1
diff --git a/snippets/map-values.md b/snippets/js/s/map-values.md
similarity index 97%
rename from snippets/map-values.md
rename to snippets/js/s/map-values.md
index 4a63cf5c0..028e8b30a 100644
--- a/snippets/map-values.md
+++ b/snippets/js/s/map-values.md
@@ -1,6 +1,7 @@
 ---
 title: Map object values
 type: snippet
+language: javascript
 tags: [object]
 cover: feathers
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/mask.md b/snippets/js/s/mask.md
similarity index 97%
rename from snippets/mask.md
rename to snippets/js/s/mask.md
index eda0707d3..b6739c3b9 100644
--- a/snippets/mask.md
+++ b/snippets/js/s/mask.md
@@ -1,6 +1,7 @@
 ---
 title: Mask a value
 type: snippet
+language: javascript
 tags: [string]
 cover: rocky-beach-3
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/matches-with.md b/snippets/js/s/matches-with.md
similarity index 97%
rename from snippets/matches-with.md
rename to snippets/js/s/matches-with.md
index 70e1cd088..9ec69ec16 100644
--- a/snippets/matches-with.md
+++ b/snippets/js/s/matches-with.md
@@ -1,6 +1,7 @@
 ---
 title: Matches object properties based on function
 type: snippet
+language: javascript
 tags: [object]
 cover: watermelon-bike
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/matches.md b/snippets/js/s/matches.md
similarity index 97%
rename from snippets/matches.md
rename to snippets/js/s/matches.md
index f6103b651..ea1ab491a 100644
--- a/snippets/matches.md
+++ b/snippets/js/s/matches.md
@@ -1,6 +1,7 @@
 ---
 title: Match object properties
 type: snippet
+language: javascript
 tags: [object]
 cover: two-flower-vases
 dateModified: 2020-11-03T22:11:18+02:00
diff --git a/snippets/max-by.md b/snippets/js/s/max-by.md
similarity index 96%
rename from snippets/max-by.md
rename to snippets/js/s/max-by.md
index 9b8b502f4..0903d92ad 100644
--- a/snippets/max-by.md
+++ b/snippets/js/s/max-by.md
@@ -1,6 +1,7 @@
 ---
 title: Max array value based on function
 type: snippet
+language: javascript
 tags: [math,array]
 cover: digital-nomad-4
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/max-date.md b/snippets/js/s/max-date.md
similarity index 96%
rename from snippets/max-date.md
rename to snippets/js/s/max-date.md
index d5af95bac..f78517855 100644
--- a/snippets/max-date.md
+++ b/snippets/js/s/max-date.md
@@ -1,6 +1,7 @@
 ---
 title: Max date
 type: snippet
+language: javascript
 tags: [date]
 cover: interior-15
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/max-n.md b/snippets/js/s/max-n.md
similarity index 97%
rename from snippets/max-n.md
rename to snippets/js/s/max-n.md
index 91daca55d..06ef4bab9 100644
--- a/snippets/max-n.md
+++ b/snippets/js/s/max-n.md
@@ -1,6 +1,7 @@
 ---
 title: N max elements
 type: snippet
+language: javascript
 tags: [math]
 cover: digital-nomad-15
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/max-subarray.md b/snippets/js/s/max-subarray.md
similarity index 98%
rename from snippets/max-subarray.md
rename to snippets/js/s/max-subarray.md
index 8522149e6..e8b464b22 100644
--- a/snippets/max-subarray.md
+++ b/snippets/js/s/max-subarray.md
@@ -1,6 +1,7 @@
 ---
 title: Maximum subarray
 type: snippet
+language: javascript
 tags: [algorithm,math,array]
 author: chalarangelo
 cover: work-hard-computer
diff --git a/snippets/median.md b/snippets/js/s/median.md
similarity index 96%
rename from snippets/median.md
rename to snippets/js/s/median.md
index a47999849..fef711468 100644
--- a/snippets/median.md
+++ b/snippets/js/s/median.md
@@ -1,6 +1,7 @@
 ---
 title: Median
 type: snippet
+language: javascript
 tags: [math]
 cover: old-consoles
 dateModified: 2020-10-22T20:23:47+03:00
diff --git a/snippets/memoize.md b/snippets/js/s/memoize.md
similarity index 98%
rename from snippets/memoize.md
rename to snippets/js/s/memoize.md
index 7767c1859..b3316d9d3 100644
--- a/snippets/memoize.md
+++ b/snippets/js/s/memoize.md
@@ -1,6 +1,7 @@
 ---
 title: Memoize function
 type: snippet
+language: javascript
 tags: [function]
 cover: hard-disk
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/merge-sort.md b/snippets/js/s/merge-sort.md
similarity index 98%
rename from snippets/merge-sort.md
rename to snippets/js/s/merge-sort.md
index c0cfc7372..456022181 100644
--- a/snippets/merge-sort.md
+++ b/snippets/js/s/merge-sort.md
@@ -1,6 +1,7 @@
 ---
 title: Merge sort
 type: snippet
+language: javascript
 tags: [algorithm,array,recursion]
 cover: baloons-field
 dateModified: 2020-12-27T22:44:32+02:00
diff --git a/snippets/merge-sorted-arrays.md b/snippets/js/s/merge-sorted-arrays.md
similarity index 97%
rename from snippets/merge-sorted-arrays.md
rename to snippets/js/s/merge-sorted-arrays.md
index 6f419f039..3590495e6 100644
--- a/snippets/merge-sorted-arrays.md
+++ b/snippets/js/s/merge-sorted-arrays.md
@@ -1,6 +1,7 @@
 ---
 title: Merge sorted arrays
 type: snippet
+language: javascript
 tags: [array]
 cover: digital-nomad-6
 dateModified: 2020-12-27T22:55:37+02:00
diff --git a/snippets/merge.md b/snippets/js/s/merge.md
similarity index 97%
rename from snippets/merge.md
rename to snippets/js/s/merge.md
index fb378df9e..0cf877c6c 100644
--- a/snippets/merge.md
+++ b/snippets/js/s/merge.md
@@ -1,6 +1,7 @@
 ---
 title: Merge objects
 type: snippet
+language: javascript
 tags: [object,array]
 cover: guitar-living-room
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/midpoint.md b/snippets/js/s/midpoint.md
similarity index 96%
rename from snippets/midpoint.md
rename to snippets/js/s/midpoint.md
index 789b706fe..c91751086 100644
--- a/snippets/midpoint.md
+++ b/snippets/js/s/midpoint.md
@@ -1,6 +1,7 @@
 ---
 title: Midpoint
 type: snippet
+language: javascript
 tags: [math]
 cover: curve
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/miles-to-km.md b/snippets/js/s/miles-to-km.md
similarity index 93%
rename from snippets/miles-to-km.md
rename to snippets/js/s/miles-to-km.md
index 3c3ce4ce0..f75353170 100644
--- a/snippets/miles-to-km.md
+++ b/snippets/js/s/miles-to-km.md
@@ -1,6 +1,7 @@
 ---
 title: Miles to km
 type: snippet
+language: javascript
 tags: [math]
 unlisted: true
 cover: succulent-2
diff --git a/snippets/min-by.md b/snippets/js/s/min-by.md
similarity index 96%
rename from snippets/min-by.md
rename to snippets/js/s/min-by.md
index 7eacdd302..a1adcf21a 100644
--- a/snippets/min-by.md
+++ b/snippets/js/s/min-by.md
@@ -1,6 +1,7 @@
 ---
 title: Min array value based on function
 type: snippet
+language: javascript
 tags: [math,array]
 cover: digital-nomad-9
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/min-date.md b/snippets/js/s/min-date.md
similarity index 96%
rename from snippets/min-date.md
rename to snippets/js/s/min-date.md
index 3b2213ebc..384978956 100644
--- a/snippets/min-date.md
+++ b/snippets/js/s/min-date.md
@@ -1,6 +1,7 @@
 ---
 title: Min date
 type: snippet
+language: javascript
 tags: [date]
 cover: interior-2
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/min-n.md b/snippets/js/s/min-n.md
similarity index 97%
rename from snippets/min-n.md
rename to snippets/js/s/min-n.md
index 8f74003ab..28e32fd64 100644
--- a/snippets/min-n.md
+++ b/snippets/js/s/min-n.md
@@ -1,6 +1,7 @@
 ---
 title: N min elements
 type: snippet
+language: javascript
 tags: [math]
 cover: digital-nomad-8
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/most-frequent.md b/snippets/js/s/most-frequent.md
similarity index 97%
rename from snippets/most-frequent.md
rename to snippets/js/s/most-frequent.md
index d892864f4..56b865563 100644
--- a/snippets/most-frequent.md
+++ b/snippets/js/s/most-frequent.md
@@ -1,6 +1,7 @@
 ---
 title: Most frequent element in array
 type: snippet
+language: javascript
 tags: [array]
 author: chalarangelo
 cover: clock
diff --git a/snippets/most-performant.md b/snippets/js/s/most-performant.md
similarity index 98%
rename from snippets/most-performant.md
rename to snippets/js/s/most-performant.md
index bfe9075e1..9884cecec 100644
--- a/snippets/most-performant.md
+++ b/snippets/js/s/most-performant.md
@@ -1,6 +1,7 @@
 ---
 title: Most performant function
 type: snippet
+language: javascript
 tags: [function]
 cover: lake-runner
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/negate.md b/snippets/js/s/negate.md
similarity index 94%
rename from snippets/negate.md
rename to snippets/js/s/negate.md
index 1d30519a3..772d42d9b 100644
--- a/snippets/negate.md
+++ b/snippets/js/s/negate.md
@@ -1,6 +1,7 @@
 ---
 title: Negate predicate
 type: snippet
+language: javascript
 tags: [function]
 cover: blue-bird
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/nest.md b/snippets/js/s/nest.md
similarity index 98%
rename from snippets/nest.md
rename to snippets/js/s/nest.md
index 73929fa2d..2d99165ca 100644
--- a/snippets/nest.md
+++ b/snippets/js/s/nest.md
@@ -1,6 +1,7 @@
 ---
 title: Nest objects
 type: snippet
+language: javascript
 tags: [object,recursion]
 cover: birds
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/node-list-to-array.md b/snippets/js/s/node-list-to-array.md
similarity index 94%
rename from snippets/node-list-to-array.md
rename to snippets/js/s/node-list-to-array.md
index 9f4b6864f..d3ce8a873 100644
--- a/snippets/node-list-to-array.md
+++ b/snippets/js/s/node-list-to-array.md
@@ -1,6 +1,7 @@
 ---
 title: NodeList to array
 type: snippet
+language: javascript
 tags: [browser,array]
 cover: colors-mural
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/none.md b/snippets/js/s/none.md
similarity index 96%
rename from snippets/none.md
rename to snippets/js/s/none.md
index 0d94fca63..1f8ff51b3 100644
--- a/snippets/none.md
+++ b/snippets/js/s/none.md
@@ -1,6 +1,7 @@
 ---
 title: Test if all array elements are falsy
 type: snippet
+language: javascript
 tags: [array]
 cover: bug
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/nor.md b/snippets/js/s/nor.md
similarity index 95%
rename from snippets/nor.md
rename to snippets/js/s/nor.md
index 5b198494a..a06cc1478 100644
--- a/snippets/nor.md
+++ b/snippets/js/s/nor.md
@@ -1,6 +1,7 @@
 ---
 title: Logical nor
 type: snippet
+language: javascript
 tags: [math,logic]
 unlisted: true
 cover: succulent-8
diff --git a/snippets/normalize-line-endings.md b/snippets/js/s/normalize-line-endings.md
similarity index 97%
rename from snippets/normalize-line-endings.md
rename to snippets/js/s/normalize-line-endings.md
index 0f96fe325..0f130daf4 100644
--- a/snippets/normalize-line-endings.md
+++ b/snippets/js/s/normalize-line-endings.md
@@ -1,6 +1,7 @@
 ---
 title: Normalize line endings
 type: snippet
+language: javascript
 tags: [string,regexp]
 author: chalarangelo
 cover: red-light
diff --git a/snippets/not.md b/snippets/js/s/not.md
similarity index 94%
rename from snippets/not.md
rename to snippets/js/s/not.md
index 8b6b84ace..c12f5e064 100644
--- a/snippets/not.md
+++ b/snippets/js/s/not.md
@@ -1,6 +1,7 @@
 ---
 title: Logical not
 type: snippet
+language: javascript
 tags: [math,logic]
 unlisted: true
 cover: succulent-7
diff --git a/snippets/nth-arg.md b/snippets/js/s/nth-arg.md
similarity index 96%
rename from snippets/nth-arg.md
rename to snippets/js/s/nth-arg.md
index e06ea5e0c..1e439a9ba 100644
--- a/snippets/nth-arg.md
+++ b/snippets/js/s/nth-arg.md
@@ -1,6 +1,7 @@
 ---
 title: Nth argument
 type: snippet
+language: javascript
 tags: [function]
 cover: mug-flower-book
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/nth-element.md b/snippets/js/s/nth-element.md
similarity index 96%
rename from snippets/nth-element.md
rename to snippets/js/s/nth-element.md
index f7ecb16c2..86bb3bddd 100644
--- a/snippets/nth-element.md
+++ b/snippets/js/s/nth-element.md
@@ -1,6 +1,7 @@
 ---
 title: Nth element
 type: snippet
+language: javascript
 tags: [array]
 cover: laptop-plants
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/nth-root.md b/snippets/js/s/nth-root.md
similarity index 94%
rename from snippets/nth-root.md
rename to snippets/js/s/nth-root.md
index c1d523109..2279842e1 100644
--- a/snippets/nth-root.md
+++ b/snippets/js/s/nth-root.md
@@ -1,6 +1,7 @@
 ---
 title: Nth root of number
 type: snippet
+language: javascript
 tags: [math]
 author: chalarangelo
 cover: tree-roots
diff --git a/snippets/object-from-pairs.md b/snippets/js/s/object-from-pairs.md
similarity index 96%
rename from snippets/object-from-pairs.md
rename to snippets/js/s/object-from-pairs.md
index a3aa96c1e..f0eb189b6 100644
--- a/snippets/object-from-pairs.md
+++ b/snippets/js/s/object-from-pairs.md
@@ -1,6 +1,7 @@
 ---
 title: Object from pairs
 type: snippet
+language: javascript
 tags: [object,array]
 cover: silver-flat-screen
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/object-to-entries.md b/snippets/js/s/object-to-entries.md
similarity index 96%
rename from snippets/object-to-entries.md
rename to snippets/js/s/object-to-entries.md
index d1523cbea..3e46de5c2 100644
--- a/snippets/object-to-entries.md
+++ b/snippets/js/s/object-to-entries.md
@@ -1,6 +1,7 @@
 ---
 title: Object to entries
 type: snippet
+language: javascript
 tags: [object,array]
 author: chalarangelo
 cover: shapes
diff --git a/snippets/object-to-map.md b/snippets/js/s/object-to-map.md
similarity index 95%
rename from snippets/object-to-map.md
rename to snippets/js/s/object-to-map.md
index 99a86795e..f1ee84fc5 100644
--- a/snippets/object-to-map.md
+++ b/snippets/js/s/object-to-map.md
@@ -2,6 +2,7 @@
 title: Convert object to Map
 type: snippet
 shortTitle: Object to Map
+language: javascript
 tags: [object]
 author: chalarangelo
 cover: succulent-2
diff --git a/snippets/object-to-pairs.md b/snippets/js/s/object-to-pairs.md
similarity index 95%
rename from snippets/object-to-pairs.md
rename to snippets/js/s/object-to-pairs.md
index 6c71eafb5..4d47c4e71 100644
--- a/snippets/object-to-pairs.md
+++ b/snippets/js/s/object-to-pairs.md
@@ -1,6 +1,7 @@
 ---
 title: Object to pairs
 type: snippet
+language: javascript
 tags: [object,array]
 author: chalarangelo
 cover: interior-5
diff --git a/snippets/object-to-query-string.md b/snippets/js/s/object-to-query-string.md
similarity index 98%
rename from snippets/object-to-query-string.md
rename to snippets/js/s/object-to-query-string.md
index 89ccac1fe..9dc3264c6 100644
--- a/snippets/object-to-query-string.md
+++ b/snippets/js/s/object-to-query-string.md
@@ -1,6 +1,7 @@
 ---
 title: Object to query string
 type: snippet
+language: javascript
 tags: [object]
 cover: standing-stones
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/objectify.md b/snippets/js/s/objectify.md
similarity index 97%
rename from snippets/objectify.md
rename to snippets/js/s/objectify.md
index 5bae28449..a404726d1 100644
--- a/snippets/objectify.md
+++ b/snippets/js/s/objectify.md
@@ -1,6 +1,7 @@
 ---
 title: Map an array to an object
 type: snippet
+language: javascript
 tags: [array,object]
 author: chalarangelo
 cover: metro-tunnel
diff --git a/snippets/observe-mutations.md b/snippets/js/s/observe-mutations.md
similarity index 98%
rename from snippets/observe-mutations.md
rename to snippets/js/s/observe-mutations.md
index e572f4f90..0753bd7c2 100644
--- a/snippets/observe-mutations.md
+++ b/snippets/js/s/observe-mutations.md
@@ -1,6 +1,7 @@
 ---
 title: Observe element mutations
 type: snippet
+language: javascript
 tags: [browser,event]
 cover: blue-sunrise
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/off.md b/snippets/js/s/off.md
similarity index 96%
rename from snippets/off.md
rename to snippets/js/s/off.md
index 3e741f1ac..077b9af2c 100644
--- a/snippets/off.md
+++ b/snippets/js/s/off.md
@@ -1,6 +1,7 @@
 ---
 title: Remove event listener from element
 type: snippet
+language: javascript
 tags: [browser,event]
 cover: mug-flower-book
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/offset.md b/snippets/js/s/offset.md
similarity index 96%
rename from snippets/offset.md
rename to snippets/js/s/offset.md
index e33f57d7a..2d402ce59 100644
--- a/snippets/offset.md
+++ b/snippets/js/s/offset.md
@@ -1,6 +1,7 @@
 ---
 title: Offset array elements
 type: snippet
+language: javascript
 tags: [array]
 cover: interior-10
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/omit-by.md b/snippets/js/s/omit-by.md
similarity index 97%
rename from snippets/omit-by.md
rename to snippets/js/s/omit-by.md
index 61c699590..ecd9d7f6f 100644
--- a/snippets/omit-by.md
+++ b/snippets/js/s/omit-by.md
@@ -1,6 +1,7 @@
 ---
 title: Omit matching object keys
 type: snippet
+language: javascript
 tags: [object]
 cover: leafy-screens
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/omit.md b/snippets/js/s/omit.md
similarity index 96%
rename from snippets/omit.md
rename to snippets/js/s/omit.md
index 2e5864905..c8cbd99c5 100644
--- a/snippets/omit.md
+++ b/snippets/js/s/omit.md
@@ -1,6 +1,7 @@
 ---
 title: Omit object keys
 type: snippet
+language: javascript
 tags: [object]
 cover: broken-screen
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/on-click-outside.md b/snippets/js/s/on-click-outside.md
similarity index 97%
rename from snippets/on-click-outside.md
rename to snippets/js/s/on-click-outside.md
index cd4dc1832..d19c9c8d8 100644
--- a/snippets/on-click-outside.md
+++ b/snippets/js/s/on-click-outside.md
@@ -1,6 +1,7 @@
 ---
 title: Handle click outside
 type: snippet
+language: javascript
 tags: [browser,event]
 author: chalarangelo
 cover: interior-13
diff --git a/snippets/on-scroll-stop.md b/snippets/js/s/on-scroll-stop.md
similarity index 97%
rename from snippets/on-scroll-stop.md
rename to snippets/js/s/on-scroll-stop.md
index 3217e5d94..42be8b580 100644
--- a/snippets/on-scroll-stop.md
+++ b/snippets/js/s/on-scroll-stop.md
@@ -1,6 +1,7 @@
 ---
 title: Handle scroll stop
 type: snippet
+language: javascript
 tags: [browser,event]
 author: chalarangelo
 cover: flower-pond
diff --git a/snippets/on-user-input-change.md b/snippets/js/s/on-user-input-change.md
similarity index 98%
rename from snippets/on-user-input-change.md
rename to snippets/js/s/on-user-input-change.md
index b2c70c54c..956f4f6e0 100644
--- a/snippets/on-user-input-change.md
+++ b/snippets/js/s/on-user-input-change.md
@@ -1,6 +1,7 @@
 ---
 title: Handle user input change
 type: snippet
+language: javascript
 tags: [browser,event]
 cover: digital-nomad-12
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/on.md b/snippets/js/s/on.md
similarity index 98%
rename from snippets/on.md
rename to snippets/js/s/on.md
index 586862d58..b0cfe146a 100644
--- a/snippets/on.md
+++ b/snippets/js/s/on.md
@@ -1,6 +1,7 @@
 ---
 title: Add event listener to element
 type: snippet
+language: javascript
 tags: [browser,event]
 cover: wooden-bowl
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/once.md b/snippets/js/s/once.md
similarity index 97%
rename from snippets/once.md
rename to snippets/js/s/once.md
index ef0b69e87..c345211a1 100644
--- a/snippets/once.md
+++ b/snippets/js/s/once.md
@@ -1,6 +1,7 @@
 ---
 title: Call function once
 type: snippet
+language: javascript
 tags: [function]
 cover: pink-flower-tree
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/or.md b/snippets/js/s/or.md
similarity index 94%
rename from snippets/or.md
rename to snippets/js/s/or.md
index 1977e4334..f96bbe6d9 100644
--- a/snippets/or.md
+++ b/snippets/js/s/or.md
@@ -1,6 +1,7 @@
 ---
 title: Logical or
 type: snippet
+language: javascript
 tags: [math,logic]
 unlisted: true
 cover: succulent-4
diff --git a/snippets/order-by.md b/snippets/js/s/order-by.md
similarity index 98%
rename from snippets/order-by.md
rename to snippets/js/s/order-by.md
index 051dbaeda..5ce3bee4d 100644
--- a/snippets/order-by.md
+++ b/snippets/js/s/order-by.md
@@ -1,6 +1,7 @@
 ---
 title: Order array of objects
 type: snippet
+language: javascript
 tags: [object,array]
 cover: volcano-sunset
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/order-with.md b/snippets/js/s/order-with.md
similarity index 98%
rename from snippets/order-with.md
rename to snippets/js/s/order-with.md
index 33a759991..49d755eb5 100644
--- a/snippets/order-with.md
+++ b/snippets/js/s/order-with.md
@@ -1,6 +1,7 @@
 ---
 title: Order array of objects based on property order
 type: snippet
+language: javascript
 tags: [array,object]
 cover: san-francisco-skyline
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/over-args.md b/snippets/js/s/over-args.md
similarity index 96%
rename from snippets/over-args.md
rename to snippets/js/s/over-args.md
index e87dd8203..056f2a35a 100644
--- a/snippets/over-args.md
+++ b/snippets/js/s/over-args.md
@@ -1,6 +1,7 @@
 ---
 title: Transform function arguments
 type: snippet
+language: javascript
 tags: [function]
 cover: flower-shape-sunset
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/over.md b/snippets/js/s/over.md
similarity index 96%
rename from snippets/over.md
rename to snippets/js/s/over.md
index 4cebbf2be..3610c4189 100644
--- a/snippets/over.md
+++ b/snippets/js/s/over.md
@@ -1,6 +1,7 @@
 ---
 title: Invoke functions on arguments
 type: snippet
+language: javascript
 tags: [function]
 cover: jars-on-shelf
 dateModified: 2020-10-21T21:54:53+03:00
diff --git a/snippets/pad-number.md b/snippets/js/s/pad-number.md
similarity index 94%
rename from snippets/pad-number.md
rename to snippets/js/s/pad-number.md
index 30fa458de..b383e2e3c 100644
--- a/snippets/pad-number.md
+++ b/snippets/js/s/pad-number.md
@@ -1,6 +1,7 @@
 ---
 title: Pad number
 type: snippet
+language: javascript
 tags: [string,math]
 cover: flower-portrait-2
 dateModified: 2020-10-03T23:31:08+03:00
diff --git a/snippets/pad.md b/snippets/js/s/pad.md
similarity index 96%
rename from snippets/pad.md
rename to snippets/js/s/pad.md
index 42f54b932..6997ef192 100644
--- a/snippets/pad.md
+++ b/snippets/js/s/pad.md
@@ -1,6 +1,7 @@
 ---
 title: Pad string
 type: snippet
+language: javascript
 tags: [string]
 cover: blue-lake
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/palindrome.md b/snippets/js/s/palindrome.md
similarity index 97%
rename from snippets/palindrome.md
rename to snippets/js/s/palindrome.md
index d74d4d656..ccbb222a1 100644
--- a/snippets/palindrome.md
+++ b/snippets/js/s/palindrome.md
@@ -1,6 +1,7 @@
 ---
 title: Palindrome
 type: snippet
+language: javascript
 tags: [string]
 cover: bridge-drop
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/parse-cookie.md b/snippets/js/s/parse-cookie.md
similarity index 97%
rename from snippets/parse-cookie.md
rename to snippets/js/s/parse-cookie.md
index 89619dd5b..f47567981 100644
--- a/snippets/parse-cookie.md
+++ b/snippets/js/s/parse-cookie.md
@@ -1,6 +1,7 @@
 ---
 title: Parse cookie
 type: snippet
+language: javascript
 tags: [browser,string]
 cover: three-vases
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/partial-right.md b/snippets/js/s/partial-right.md
similarity index 96%
rename from snippets/partial-right.md
rename to snippets/js/s/partial-right.md
index 9687bb2d1..b7447d268 100644
--- a/snippets/partial-right.md
+++ b/snippets/js/s/partial-right.md
@@ -1,6 +1,7 @@
 ---
 title: Append function arguments
 type: snippet
+language: javascript
 tags: [function]
 cover: jars-on-shelf-2
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/partial.md b/snippets/js/s/partial.md
similarity index 96%
rename from snippets/partial.md
rename to snippets/js/s/partial.md
index 9d4f51280..e6e62870d 100644
--- a/snippets/partial.md
+++ b/snippets/js/s/partial.md
@@ -1,6 +1,7 @@
 ---
 title: Prepend function arguments
 type: snippet
+language: javascript
 tags: [function]
 cover: interior-6
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/partition-by.md b/snippets/js/s/partition-by.md
similarity index 97%
rename from snippets/partition-by.md
rename to snippets/js/s/partition-by.md
index 36810e85f..a4a907547 100644
--- a/snippets/partition-by.md
+++ b/snippets/js/s/partition-by.md
@@ -1,6 +1,7 @@
 ---
 title: Partition array
 type: snippet
+language: javascript
 tags: [array,object]
 cover: people-on-beach
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/partition.md b/snippets/js/s/partition.md
similarity index 97%
rename from snippets/partition.md
rename to snippets/js/s/partition.md
index 7673f9a00..942685522 100644
--- a/snippets/partition.md
+++ b/snippets/js/s/partition.md
@@ -1,6 +1,7 @@
 ---
 title: Partition array in two
 type: snippet
+language: javascript
 tags: [array,object]
 cover: sunflowers
 dateModified: 2020-11-03T21:46:13+02:00
diff --git a/snippets/percentile.md b/snippets/js/s/percentile.md
similarity index 96%
rename from snippets/percentile.md
rename to snippets/js/s/percentile.md
index 0d549c679..aab2c3899 100644
--- a/snippets/percentile.md
+++ b/snippets/js/s/percentile.md
@@ -1,6 +1,7 @@
 ---
 title: Percentile of matches
 type: snippet
+language: javascript
 tags: [math]
 cover: red-berries
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/permutations.md b/snippets/js/s/permutations.md
similarity index 98%
rename from snippets/permutations.md
rename to snippets/js/s/permutations.md
index 29008939d..e318272d9 100644
--- a/snippets/permutations.md
+++ b/snippets/js/s/permutations.md
@@ -1,6 +1,7 @@
 ---
 title: Array permutations
 type: snippet
+language: javascript
 tags: [array,algorithm,recursion]
 cover: body-of-water
 dateModified: 2020-12-28T13:49:24+02:00
diff --git a/snippets/pick-by.md b/snippets/js/s/pick-by.md
similarity index 97%
rename from snippets/pick-by.md
rename to snippets/js/s/pick-by.md
index 1a477efbc..106d5a252 100644
--- a/snippets/pick-by.md
+++ b/snippets/js/s/pick-by.md
@@ -1,6 +1,7 @@
 ---
 title: Pick matching object keys
 type: snippet
+language: javascript
 tags: [object]
 cover: lake-bench
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/pick.md b/snippets/js/s/pick.md
similarity index 96%
rename from snippets/pick.md
rename to snippets/js/s/pick.md
index 10fb43580..b297ea7ce 100644
--- a/snippets/pick.md
+++ b/snippets/js/s/pick.md
@@ -1,6 +1,7 @@
 ---
 title: Pick object keys
 type: snippet
+language: javascript
 tags: [object]
 cover: fruit-feast
 dateModified: 2020-10-18T14:58:09+03:00
diff --git a/snippets/pipe-async-functions.md b/snippets/js/s/pipe-async-functions.md
similarity index 97%
rename from snippets/pipe-async-functions.md
rename to snippets/js/s/pipe-async-functions.md
index f96b14cd6..3b6524f7c 100644
--- a/snippets/pipe-async-functions.md
+++ b/snippets/js/s/pipe-async-functions.md
@@ -1,6 +1,7 @@
 ---
 title: Pipe async functions
 type: snippet
+language: javascript
 tags: [function,promise]
 cover: new-york-skyline
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/pipe-functions.md b/snippets/js/s/pipe-functions.md
similarity index 96%
rename from snippets/pipe-functions.md
rename to snippets/js/s/pipe-functions.md
index 3407054c9..bc2137cc9 100644
--- a/snippets/pipe-functions.md
+++ b/snippets/js/s/pipe-functions.md
@@ -1,6 +1,7 @@
 ---
 title: Pipe functions
 type: snippet
+language: javascript
 tags: [function]
 cover: goat-wooden-cottage
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/pluck.md b/snippets/js/s/pluck.md
similarity index 96%
rename from snippets/pluck.md
rename to snippets/js/s/pluck.md
index 7df82f5fb..ac466f0c0 100644
--- a/snippets/pluck.md
+++ b/snippets/js/s/pluck.md
@@ -1,6 +1,7 @@
 ---
 title: Pluck values from array of objects
 type: snippet
+language: javascript
 tags: [array,object]
 cover: birds
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/pluralize.md b/snippets/js/s/pluralize.md
similarity index 98%
rename from snippets/pluralize.md
rename to snippets/js/s/pluralize.md
index 1c6e3cc5c..973e3cea4 100644
--- a/snippets/pluralize.md
+++ b/snippets/js/s/pluralize.md
@@ -1,6 +1,7 @@
 ---
 title: Pluralize string
 type: snippet
+language: javascript
 tags: [string]
 cover: shell-focus
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/powerset.md b/snippets/js/s/powerset.md
similarity index 95%
rename from snippets/powerset.md
rename to snippets/js/s/powerset.md
index c82706f45..9832f3f97 100644
--- a/snippets/powerset.md
+++ b/snippets/js/s/powerset.md
@@ -1,6 +1,7 @@
 ---
 title: Powerset
 type: snippet
+language: javascript
 tags: [math,algorithm]
 cover: new-plant
 dateModified: 2021-09-27T15:27:07+02:00
diff --git a/snippets/prefers-dark-color-scheme.md b/snippets/js/s/prefers-dark-color-scheme.md
similarity index 95%
rename from snippets/prefers-dark-color-scheme.md
rename to snippets/js/s/prefers-dark-color-scheme.md
index 67fa8a22a..66c5f06cd 100644
--- a/snippets/prefers-dark-color-scheme.md
+++ b/snippets/js/s/prefers-dark-color-scheme.md
@@ -1,6 +1,7 @@
 ---
 title: User prefers dark color scheme
 type: snippet
+language: javascript
 tags: [browser]
 author: chalarangelo
 cover: blue-lake
diff --git a/snippets/prefers-light-color-scheme.md b/snippets/js/s/prefers-light-color-scheme.md
similarity index 96%
rename from snippets/prefers-light-color-scheme.md
rename to snippets/js/s/prefers-light-color-scheme.md
index bce6bf273..3abf9097b 100644
--- a/snippets/prefers-light-color-scheme.md
+++ b/snippets/js/s/prefers-light-color-scheme.md
@@ -1,6 +1,7 @@
 ---
 title: User prefers light color scheme
 type: snippet
+language: javascript
 tags: [browser]
 author: chalarangelo
 cover: dark-mode
diff --git a/snippets/prefix.md b/snippets/js/s/prefix.md
similarity index 98%
rename from snippets/prefix.md
rename to snippets/js/s/prefix.md
index bb2d5d67b..d79023965 100644
--- a/snippets/prefix.md
+++ b/snippets/js/s/prefix.md
@@ -1,6 +1,7 @@
 ---
 title: Prefix CSS property
 type: snippet
+language: javascript
 tags: [browser]
 cover: cancel-typographer
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/pretty-bytes.md b/snippets/js/s/pretty-bytes.md
similarity index 98%
rename from snippets/pretty-bytes.md
rename to snippets/js/s/pretty-bytes.md
index 6b12cea2c..d0b894a3a 100644
--- a/snippets/pretty-bytes.md
+++ b/snippets/js/s/pretty-bytes.md
@@ -1,6 +1,7 @@
 ---
 title: Pretty-print number of bytes
 type: snippet
+language: javascript
 tags: [string,math]
 cover: digital-nomad
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/prime-factors.md b/snippets/js/s/prime-factors.md
similarity index 96%
rename from snippets/prime-factors.md
rename to snippets/js/s/prime-factors.md
index fbb29fcfd..c96f62242 100644
--- a/snippets/prime-factors.md
+++ b/snippets/js/s/prime-factors.md
@@ -1,6 +1,7 @@
 ---
 title: Prime factors of number
 type: snippet
+language: javascript
 tags: [math,algorithm]
 cover: dark-leaves-3
 dateModified: 2020-12-28T13:11:01+02:00
diff --git a/snippets/primes.md b/snippets/js/s/primes.md
similarity index 97%
rename from snippets/primes.md
rename to snippets/js/s/primes.md
index fd3e087fe..70f06b41e 100644
--- a/snippets/primes.md
+++ b/snippets/js/s/primes.md
@@ -1,6 +1,7 @@
 ---
 title: Primes up to given number
 type: snippet
+language: javascript
 tags: [math,algorithm]
 cover: apples
 dateModified: 2020-12-28T13:49:24+02:00
diff --git a/snippets/prod.md b/snippets/js/s/prod.md
similarity index 95%
rename from snippets/prod.md
rename to snippets/js/s/prod.md
index 1ccad8035..b5e9ae9da 100644
--- a/snippets/prod.md
+++ b/snippets/js/s/prod.md
@@ -1,6 +1,7 @@
 ---
 title: Product of numeric values
 type: snippet
+language: javascript
 tags: [math]
 cover: travel-mug-1
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/promisify.md b/snippets/js/s/promisify.md
similarity index 97%
rename from snippets/promisify.md
rename to snippets/js/s/promisify.md
index e7ba466f8..52badfdd5 100644
--- a/snippets/promisify.md
+++ b/snippets/js/s/promisify.md
@@ -1,6 +1,7 @@
 ---
 title: Promisify function
 type: snippet
+language: javascript
 tags: [function,promise]
 cover: duck-plants
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/pull-at-index.md b/snippets/js/s/pull-at-index.md
similarity index 97%
rename from snippets/pull-at-index.md
rename to snippets/js/s/pull-at-index.md
index 36329c9e3..4cb99f535 100644
--- a/snippets/pull-at-index.md
+++ b/snippets/js/s/pull-at-index.md
@@ -1,6 +1,7 @@
 ---
 title: Pull values from array at index
 type: snippet
+language: javascript
 tags: [array]
 cover: bug
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/pull-at-value.md b/snippets/js/s/pull-at-value.md
similarity index 97%
rename from snippets/pull-at-value.md
rename to snippets/js/s/pull-at-value.md
index dd9614d9c..bd58f68cb 100644
--- a/snippets/pull-at-value.md
+++ b/snippets/js/s/pull-at-value.md
@@ -1,6 +1,7 @@
 ---
 title: Pull matching values from array
 type: snippet
+language: javascript
 tags: [array]
 cover: light-leaves
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/pull-by.md b/snippets/js/s/pull-by.md
similarity index 98%
rename from snippets/pull-by.md
rename to snippets/js/s/pull-by.md
index a03bb3e64..9dfcdf082 100644
--- a/snippets/pull-by.md
+++ b/snippets/js/s/pull-by.md
@@ -1,6 +1,7 @@
 ---
 title: Pull values from array based on function
 type: snippet
+language: javascript
 tags: [array]
 cover: fishermen
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/pull.md b/snippets/js/s/pull.md
similarity index 97%
rename from snippets/pull.md
rename to snippets/js/s/pull.md
index 299db56d8..c63750150 100644
--- a/snippets/pull.md
+++ b/snippets/js/s/pull.md
@@ -1,6 +1,7 @@
 ---
 title: Pull values from array
 type: snippet
+language: javascript
 tags: [array]
 cover: last-light
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/quarter-of-year.md b/snippets/js/s/quarter-of-year.md
similarity index 97%
rename from snippets/quarter-of-year.md
rename to snippets/js/s/quarter-of-year.md
index 4c237aff2..3ee9c8192 100644
--- a/snippets/quarter-of-year.md
+++ b/snippets/js/s/quarter-of-year.md
@@ -1,6 +1,7 @@
 ---
 title: Quarter of year
 type: snippet
+language: javascript
 tags: [date]
 cover: fallen-leaves
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/query-string-to-object.md b/snippets/js/s/query-string-to-object.md
similarity index 97%
rename from snippets/query-string-to-object.md
rename to snippets/js/s/query-string-to-object.md
index 350340f98..8ee9b932e 100644
--- a/snippets/query-string-to-object.md
+++ b/snippets/js/s/query-string-to-object.md
@@ -1,6 +1,7 @@
 ---
 title: Query string to object
 type: snippet
+language: javascript
 tags: [object]
 cover: dark-mode
 dateModified: 2020-11-03T22:11:18+02:00
diff --git a/snippets/quick-sort.md b/snippets/js/s/quick-sort.md
similarity index 98%
rename from snippets/quick-sort.md
rename to snippets/js/s/quick-sort.md
index 0bde5aa62..3b8072c30 100644
--- a/snippets/quick-sort.md
+++ b/snippets/js/s/quick-sort.md
@@ -1,6 +1,7 @@
 ---
 title: Quick sort
 type: snippet
+language: javascript
 tags: [algorithm,array,recursion]
 cover: eagle
 dateModified: 2021-10-13T19:29:39+02:00
diff --git a/snippets/rads-to-degrees.md b/snippets/js/s/rads-to-degrees.md
similarity index 94%
rename from snippets/rads-to-degrees.md
rename to snippets/js/s/rads-to-degrees.md
index 435600f76..e2b56254d 100644
--- a/snippets/rads-to-degrees.md
+++ b/snippets/js/s/rads-to-degrees.md
@@ -1,6 +1,7 @@
 ---
 title: Radians to degrees
 type: snippet
+language: javascript
 tags: [math]
 cover: flower-portrait-6
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/random-alpha-numeric.md b/snippets/js/s/random-alpha-numeric.md
similarity index 98%
rename from snippets/random-alpha-numeric.md
rename to snippets/js/s/random-alpha-numeric.md
index 1a6390b83..b780370b8 100644
--- a/snippets/random-alpha-numeric.md
+++ b/snippets/js/s/random-alpha-numeric.md
@@ -1,6 +1,7 @@
 ---
 title: Random alphanumeric string
 type: snippet
+language: javascript
 tags: [string,random]
 cover: interior-5
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/random-boolean.md b/snippets/js/s/random-boolean.md
similarity index 94%
rename from snippets/random-boolean.md
rename to snippets/js/s/random-boolean.md
index f2db1a476..816b5c25c 100644
--- a/snippets/random-boolean.md
+++ b/snippets/js/s/random-boolean.md
@@ -1,6 +1,7 @@
 ---
 title: Random boolean value
 type: snippet
+language: javascript
 tags: [math,random]
 author: chalarangelo
 cover: malibu
diff --git a/snippets/random-gauss.md b/snippets/js/s/random-gauss.md
similarity index 96%
rename from snippets/random-gauss.md
rename to snippets/js/s/random-gauss.md
index c8ae44e71..a2be3c9d2 100644
--- a/snippets/random-gauss.md
+++ b/snippets/js/s/random-gauss.md
@@ -1,6 +1,7 @@
 ---
 title: Generate Gaussian random numbers
 type: snippet
+language: javascript
 tags: [math,random]
 cover: chess-pawns
 author: chalarangelo
diff --git a/snippets/random-hex-color-code.md b/snippets/js/s/random-hex-color-code.md
similarity index 96%
rename from snippets/random-hex-color-code.md
rename to snippets/js/s/random-hex-color-code.md
index b983dbb1e..63fc3acd0 100644
--- a/snippets/random-hex-color-code.md
+++ b/snippets/js/s/random-hex-color-code.md
@@ -1,6 +1,7 @@
 ---
 title: Random hex color code
 type: snippet
+language: javascript
 tags: [math,random]
 cover: feathers
 dateModified: 2021-01-08T00:23:44+02:00
diff --git a/snippets/random-int-array-in-range.md b/snippets/js/s/random-int-array-in-range.md
similarity index 96%
rename from snippets/random-int-array-in-range.md
rename to snippets/js/s/random-int-array-in-range.md
index fe15448ff..58c1a0d48 100644
--- a/snippets/random-int-array-in-range.md
+++ b/snippets/js/s/random-int-array-in-range.md
@@ -1,6 +1,7 @@
 ---
 title: Random integer array in range
 type: snippet
+language: javascript
 tags: [math,random]
 cover: digital-nomad-11
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/random-integer-in-range.md b/snippets/js/s/random-integer-in-range.md
similarity index 95%
rename from snippets/random-integer-in-range.md
rename to snippets/js/s/random-integer-in-range.md
index 54945a023..4955739bc 100644
--- a/snippets/random-integer-in-range.md
+++ b/snippets/js/s/random-integer-in-range.md
@@ -1,6 +1,7 @@
 ---
 title: Random integer in range
 type: snippet
+language: javascript
 tags: [math,random]
 cover: painters-desk
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/random-number-in-range.md b/snippets/js/s/random-number-in-range.md
similarity index 95%
rename from snippets/random-number-in-range.md
rename to snippets/js/s/random-number-in-range.md
index 79fde3cc9..db23995af 100644
--- a/snippets/random-number-in-range.md
+++ b/snippets/js/s/random-number-in-range.md
@@ -1,6 +1,7 @@
 ---
 title: Random number in range
 type: snippet
+language: javascript
 tags: [math,random]
 cover: white-laptop
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/range-generator.md b/snippets/js/s/range-generator.md
similarity index 96%
rename from snippets/range-generator.md
rename to snippets/js/s/range-generator.md
index 723290bcc..69838684c 100644
--- a/snippets/range-generator.md
+++ b/snippets/js/s/range-generator.md
@@ -1,6 +1,7 @@
 ---
 title: Range generator
 type: snippet
+language: javascript
 tags: [function,generator]
 author: chalarangelo
 cover: dark-leaves-6
diff --git a/snippets/ranking.md b/snippets/js/s/ranking.md
similarity index 96%
rename from snippets/ranking.md
rename to snippets/js/s/ranking.md
index aa64e202e..8d96bd1b4 100644
--- a/snippets/ranking.md
+++ b/snippets/js/s/ranking.md
@@ -1,6 +1,7 @@
 ---
 title: Array ranking
 type: snippet
+language: javascript
 tags: [array,math]
 author: chalarangelo
 cover: eagle
diff --git a/snippets/read-file-lines.md b/snippets/js/s/read-file-lines.md
similarity index 97%
rename from snippets/read-file-lines.md
rename to snippets/js/s/read-file-lines.md
index 675a260d8..7091af608 100644
--- a/snippets/read-file-lines.md
+++ b/snippets/js/s/read-file-lines.md
@@ -1,6 +1,7 @@
 ---
 title: Read file lines
 type: snippet
+language: javascript
 tags: [node]
 cover: solitude-beach
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/rearg.md b/snippets/js/s/rearg.md
similarity index 96%
rename from snippets/rearg.md
rename to snippets/js/s/rearg.md
index 3ff2dea92..b16c4f5dc 100644
--- a/snippets/rearg.md
+++ b/snippets/js/s/rearg.md
@@ -1,6 +1,7 @@
 ---
 title: Rearrange function arguments
 type: snippet
+language: javascript
 tags: [function]
 cover: island-corridor
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/record-animation-frames.md b/snippets/js/s/record-animation-frames.md
similarity index 98%
rename from snippets/record-animation-frames.md
rename to snippets/js/s/record-animation-frames.md
index ebaa98b75..c1f0d49fd 100644
--- a/snippets/record-animation-frames.md
+++ b/snippets/js/s/record-animation-frames.md
@@ -1,6 +1,7 @@
 ---
 title: Record animation frames
 type: snippet
+language: javascript
 tags: [browser,recursion]
 cover: curve
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/redirect.md b/snippets/js/s/redirect.md
similarity index 96%
rename from snippets/redirect.md
rename to snippets/js/s/redirect.md
index 24b0da81a..b09099620 100644
--- a/snippets/redirect.md
+++ b/snippets/js/s/redirect.md
@@ -1,6 +1,7 @@
 ---
 title: Redirect to URL
 type: snippet
+language: javascript
 tags: [browser]
 cover: coffee-phone-tray-2
 dateModified: 2020-10-20T11:46:23+03:00
diff --git a/snippets/reduce-successive.md b/snippets/js/s/reduce-successive.md
similarity index 97%
rename from snippets/reduce-successive.md
rename to snippets/js/s/reduce-successive.md
index 61e9dd6c9..bee9263fa 100644
--- a/snippets/reduce-successive.md
+++ b/snippets/js/s/reduce-successive.md
@@ -1,6 +1,7 @@
 ---
 title: Array of successive values
 type: snippet
+language: javascript
 tags: [array]
 cover: laptop-view
 excerpt: Applies a function to each element from left to right, returning an array of successively reduced values.
diff --git a/snippets/reduce-which.md b/snippets/js/s/reduce-which.md
similarity index 97%
rename from snippets/reduce-which.md
rename to snippets/js/s/reduce-which.md
index ca95eede4..b241292aa 100644
--- a/snippets/reduce-which.md
+++ b/snippets/js/s/reduce-which.md
@@ -1,6 +1,7 @@
 ---
 title: Min and max of array based on provided function
 type: snippet
+language: javascript
 tags: [array]
 cover: orange-coffee
 dateModified: 2020-11-03T22:11:18+02:00
diff --git a/snippets/reduced-filter.md b/snippets/js/s/reduced-filter.md
similarity index 97%
rename from snippets/reduced-filter.md
rename to snippets/js/s/reduced-filter.md
index 07b6e6320..8921c6ba6 100644
--- a/snippets/reduced-filter.md
+++ b/snippets/js/s/reduced-filter.md
@@ -1,6 +1,7 @@
 ---
 title: Filter matching and unspecified values
 type: snippet
+language: javascript
 tags: [array]
 cover: little-bird
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/reject.md b/snippets/js/s/reject.md
similarity index 96%
rename from snippets/reject.md
rename to snippets/js/s/reject.md
index cf6ed7682..de19437e8 100644
--- a/snippets/reject.md
+++ b/snippets/js/s/reject.md
@@ -1,6 +1,7 @@
 ---
 title: Reject non-matching values
 type: snippet
+language: javascript
 tags: [array]
 cover: interior-7
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/remove-accents.md b/snippets/js/s/remove-accents.md
similarity index 96%
rename from snippets/remove-accents.md
rename to snippets/js/s/remove-accents.md
index 34b0caf97..7deb1f1d9 100644
--- a/snippets/remove-accents.md
+++ b/snippets/js/s/remove-accents.md
@@ -1,6 +1,7 @@
 ---
 title: Remove accents
 type: snippet
+language: javascript
 tags: [string]
 cover: pink-flowers
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/remove-attributes.md b/snippets/js/s/remove-attributes.md
similarity index 97%
rename from snippets/remove-attributes.md
rename to snippets/js/s/remove-attributes.md
index 7f42376bd..95ae73b3e 100644
--- a/snippets/remove-attributes.md
+++ b/snippets/js/s/remove-attributes.md
@@ -1,6 +1,7 @@
 ---
 title: Remove attributes
 type: snippet
+language: javascript
 tags: [browser]
 cover: new-york
 author: chalarangelo
diff --git a/snippets/remove-class.md b/snippets/js/s/remove-class.md
similarity index 96%
rename from snippets/remove-class.md
rename to snippets/js/s/remove-class.md
index f71753533..cf7c771c4 100644
--- a/snippets/remove-class.md
+++ b/snippets/js/s/remove-class.md
@@ -1,6 +1,7 @@
 ---
 title: Remove class from HTML element
 type: snippet
+language: javascript
 tags: [browser]
 author: chalarangelo
 cover: bag-waiting
diff --git a/snippets/remove-element.md b/snippets/js/s/remove-element.md
similarity index 95%
rename from snippets/remove-element.md
rename to snippets/js/s/remove-element.md
index b13f08cac..d383ac01d 100644
--- a/snippets/remove-element.md
+++ b/snippets/js/s/remove-element.md
@@ -1,6 +1,7 @@
 ---
 title: Remove DOM element
 type: snippet
+language: javascript
 tags: [browser]
 author: chalarangelo
 cover: by-the-lighthouse
diff --git a/snippets/remove-event-listener-all.md b/snippets/js/s/remove-event-listener-all.md
similarity index 97%
rename from snippets/remove-event-listener-all.md
rename to snippets/js/s/remove-event-listener-all.md
index 2c170dd6e..8701fec35 100644
--- a/snippets/remove-event-listener-all.md
+++ b/snippets/js/s/remove-event-listener-all.md
@@ -1,6 +1,7 @@
 ---
 title: Remove event listeners from target
 type: snippet
+language: javascript
 tags: [browser,event]
 author: chalarangelo
 cover: snowy-mountains
diff --git a/snippets/remove-non-ascii.md b/snippets/js/s/remove-non-ascii.md
similarity index 95%
rename from snippets/remove-non-ascii.md
rename to snippets/js/s/remove-non-ascii.md
index f6b2c73ab..be8c890b8 100644
--- a/snippets/remove-non-ascii.md
+++ b/snippets/js/s/remove-non-ascii.md
@@ -1,6 +1,7 @@
 ---
 title: Remove non ASCII characters
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: tram-car
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/remove-whitespace.md b/snippets/js/s/remove-whitespace.md
similarity index 95%
rename from snippets/remove-whitespace.md
rename to snippets/js/s/remove-whitespace.md
index bcc51c59c..d076a7bb1 100644
--- a/snippets/remove-whitespace.md
+++ b/snippets/js/s/remove-whitespace.md
@@ -1,6 +1,7 @@
 ---
 title: Remove whitespaces
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: tropical-bike
 dateModified: 2020-11-03T21:46:13+02:00
diff --git a/snippets/remove.md b/snippets/js/s/remove.md
similarity index 97%
rename from snippets/remove.md
rename to snippets/js/s/remove.md
index aaef585f1..ab29f34c5 100644
--- a/snippets/remove.md
+++ b/snippets/js/s/remove.md
@@ -1,6 +1,7 @@
 ---
 title: Remove matching elements from array
 type: snippet
+language: javascript
 tags: [array]
 cover: highlands
 dateModified: 2020-10-22T20:24:04+03:00
diff --git a/snippets/rename-keys.md b/snippets/js/s/rename-keys.md
similarity index 97%
rename from snippets/rename-keys.md
rename to snippets/js/s/rename-keys.md
index f344627de..b625b0c36 100644
--- a/snippets/rename-keys.md
+++ b/snippets/js/s/rename-keys.md
@@ -1,6 +1,7 @@
 ---
 title: Rename object keys
 type: snippet
+language: javascript
 tags: [object]
 cover: fallen-leaves
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/render-element.md b/snippets/js/s/render-element.md
similarity index 98%
rename from snippets/render-element.md
rename to snippets/js/s/render-element.md
index 44cbe3ec7..bde430f9c 100644
--- a/snippets/render-element.md
+++ b/snippets/js/s/render-element.md
@@ -1,6 +1,7 @@
 ---
 title: Render DOM element
 type: snippet
+language: javascript
 tags: [browser,recursion]
 author: chalarangelo
 cover: maple-leaf-palette
diff --git a/snippets/repeat-generator.md b/snippets/js/s/repeat-generator.md
similarity index 97%
rename from snippets/repeat-generator.md
rename to snippets/js/s/repeat-generator.md
index b32721977..bfb6e6dee 100644
--- a/snippets/repeat-generator.md
+++ b/snippets/js/s/repeat-generator.md
@@ -1,6 +1,7 @@
 ---
 title: Repeat generator
 type: snippet
+language: javascript
 tags: [function,generator]
 author: chalarangelo
 cover: white-flower
diff --git a/snippets/replace-last.md b/snippets/js/s/replace-last.md
similarity index 98%
rename from snippets/replace-last.md
rename to snippets/js/s/replace-last.md
index d7a2b6cf9..b29652a20 100644
--- a/snippets/replace-last.md
+++ b/snippets/js/s/replace-last.md
@@ -1,6 +1,7 @@
 ---
 title: Replace last occurrence in string
 type: snippet
+language: javascript
 tags: [string,regexp]
 author: chalarangelo
 cover: waves
diff --git a/snippets/replace-or-append.md b/snippets/js/s/replace-or-append.md
similarity index 98%
rename from snippets/replace-or-append.md
rename to snippets/js/s/replace-or-append.md
index c9226c90d..32f05172c 100644
--- a/snippets/replace-or-append.md
+++ b/snippets/js/s/replace-or-append.md
@@ -1,6 +1,7 @@
 ---
 title: Replace or append array value
 type: snippet
+language: javascript
 tags: [array]
 author: chalarangelo
 cover: boutique-home-office-2
diff --git a/snippets/require-uncached.md b/snippets/js/s/require-uncached.md
similarity index 96%
rename from snippets/require-uncached.md
rename to snippets/js/s/require-uncached.md
index abd897a42..5c2e55b2c 100644
--- a/snippets/require-uncached.md
+++ b/snippets/js/s/require-uncached.md
@@ -1,6 +1,7 @@
 ---
 title: Uncached module require
 type: snippet
+language: javascript
 tags: [node]
 author: chalarangelo
 cover: curve
diff --git a/snippets/resolve-after.md b/snippets/js/s/resolve-after.md
similarity index 96%
rename from snippets/resolve-after.md
rename to snippets/js/s/resolve-after.md
index d96c83831..93f37940e 100644
--- a/snippets/resolve-after.md
+++ b/snippets/js/s/resolve-after.md
@@ -1,6 +1,7 @@
 ---
 title: Resolve promise after given amount of time
 type: snippet
+language: javascript
 tags: [function,promise]
 author: chalarangelo
 cover: filter-coffee-pot
diff --git a/snippets/reverse-number.md b/snippets/js/s/reverse-number.md
similarity index 96%
rename from snippets/reverse-number.md
rename to snippets/js/s/reverse-number.md
index 7255cfc2f..19ed52707 100644
--- a/snippets/reverse-number.md
+++ b/snippets/js/s/reverse-number.md
@@ -1,6 +1,7 @@
 ---
 title: Reverse number
 type: snippet
+language: javascript
 tags: [math,string]
 cover: walking
 dateModified: 2020-09-18T21:19:23+03:00
diff --git a/snippets/reverse-string.md b/snippets/js/s/reverse-string.md
similarity index 95%
rename from snippets/reverse-string.md
rename to snippets/js/s/reverse-string.md
index fd141a4eb..c55851ca8 100644
--- a/snippets/reverse-string.md
+++ b/snippets/js/s/reverse-string.md
@@ -1,6 +1,7 @@
 ---
 title: Reverse string
 type: snippet
+language: javascript
 tags: [string]
 cover: type-stamps
 dateModified: 2020-10-18T14:58:09+03:00
diff --git a/snippets/rgb-to-hex.md b/snippets/js/s/rgb-to-hex.md
similarity index 96%
rename from snippets/rgb-to-hex.md
rename to snippets/js/s/rgb-to-hex.md
index d9c2fece6..b6e89ee9e 100644
--- a/snippets/rgb-to-hex.md
+++ b/snippets/js/s/rgb-to-hex.md
@@ -1,6 +1,7 @@
 ---
 title: RGB to hex
 type: snippet
+language: javascript
 tags: [string,math]
 cover: colors-mural
 dateModified: 2020-11-03T22:11:18+02:00
diff --git a/snippets/rgb-to-hsb.md b/snippets/js/s/rgb-to-hsb.md
similarity index 97%
rename from snippets/rgb-to-hsb.md
rename to snippets/js/s/rgb-to-hsb.md
index ac68ce627..d268525a2 100644
--- a/snippets/rgb-to-hsb.md
+++ b/snippets/js/s/rgb-to-hsb.md
@@ -1,6 +1,7 @@
 ---
 title: RGB to HSB
 type: snippet
+language: javascript
 tags: [math]
 cover: dark-leaves
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/rgb-to-hsl.md b/snippets/js/s/rgb-to-hsl.md
similarity index 97%
rename from snippets/rgb-to-hsl.md
rename to snippets/js/s/rgb-to-hsl.md
index 85f12e921..a298480aa 100644
--- a/snippets/rgb-to-hsl.md
+++ b/snippets/js/s/rgb-to-hsl.md
@@ -1,6 +1,7 @@
 ---
 title: RGB to HSL
 type: snippet
+language: javascript
 tags: [math]
 cover: planning
 dateModified: 2020-10-04T11:25:12+03:00
diff --git a/snippets/right-substr-generator.md b/snippets/js/s/right-substr-generator.md
similarity index 96%
rename from snippets/right-substr-generator.md
rename to snippets/js/s/right-substr-generator.md
index b1a44720c..dfe259938 100644
--- a/snippets/right-substr-generator.md
+++ b/snippets/js/s/right-substr-generator.md
@@ -1,6 +1,7 @@
 ---
 title: Right substring generator
 type: snippet
+language: javascript
 tags: [string,generator]
 cover: boutique-home-office-2
 author: chalarangelo
diff --git a/snippets/round.md b/snippets/js/s/round.md
similarity index 95%
rename from snippets/round.md
rename to snippets/js/s/round.md
index d6f290817..6528c90f1 100644
--- a/snippets/round.md
+++ b/snippets/js/s/round.md
@@ -1,6 +1,7 @@
 ---
 title: Round number to given precision
 type: snippet
+language: javascript
 tags: [math]
 cover: yellow-white-mug-1
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/run-async.md b/snippets/js/s/run-async.md
similarity index 98%
rename from snippets/run-async.md
rename to snippets/js/s/run-async.md
index f73507f8b..b25c1c651 100644
--- a/snippets/run-async.md
+++ b/snippets/js/s/run-async.md
@@ -1,6 +1,7 @@
 ---
 title: Run function asynchronously
 type: snippet
+language: javascript
 tags: [browser,function,promise]
 excerpt: Runs a function in a separate thread by using a Web Worker.
 cover: purple-sunset
diff --git a/snippets/run-promises-in-series.md b/snippets/js/s/run-promises-in-series.md
similarity index 96%
rename from snippets/run-promises-in-series.md
rename to snippets/js/s/run-promises-in-series.md
index 699a43f26..9f35aedef 100644
--- a/snippets/run-promises-in-series.md
+++ b/snippets/js/s/run-promises-in-series.md
@@ -1,6 +1,7 @@
 ---
 title: Run promises in series
 type: snippet
+language: javascript
 tags: [function,promise]
 cover: sail-away
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/sample-size.md b/snippets/js/s/sample-size.md
similarity index 97%
rename from snippets/sample-size.md
rename to snippets/js/s/sample-size.md
index 7fd1c4892..ab84fdd86 100644
--- a/snippets/sample-size.md
+++ b/snippets/js/s/sample-size.md
@@ -1,6 +1,7 @@
 ---
 title: N random elements in array
 type: snippet
+language: javascript
 tags: [array,random]
 cover: tree-roots
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/sample.md b/snippets/js/s/sample.md
similarity index 95%
rename from snippets/sample.md
rename to snippets/js/s/sample.md
index e260bf868..a3138b8ab 100644
--- a/snippets/sample.md
+++ b/snippets/js/s/sample.md
@@ -1,6 +1,7 @@
 ---
 title: Random element in array
 type: snippet
+language: javascript
 tags: [array,string,random]
 cover: paper-card
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/scroll-to-top.md b/snippets/js/s/scroll-to-top.md
similarity index 96%
rename from snippets/scroll-to-top.md
rename to snippets/js/s/scroll-to-top.md
index 6c7d06424..0c1cabab0 100644
--- a/snippets/scroll-to-top.md
+++ b/snippets/js/s/scroll-to-top.md
@@ -1,6 +1,7 @@
 ---
 title: Scroll page to top
 type: snippet
+language: javascript
 tags: [browser]
 cover: tranquil-lake
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/sdbm.md b/snippets/js/s/sdbm.md
similarity index 96%
rename from snippets/sdbm.md
rename to snippets/js/s/sdbm.md
index f83299fae..878e9d189 100644
--- a/snippets/sdbm.md
+++ b/snippets/js/s/sdbm.md
@@ -1,6 +1,7 @@
 ---
 title: Hash string into number
 type: snippet
+language: javascript
 tags: [math]
 cover: dark-leaves
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/selection-sort.md b/snippets/js/s/selection-sort.md
similarity index 97%
rename from snippets/selection-sort.md
rename to snippets/js/s/selection-sort.md
index feec49751..2180f5da3 100644
--- a/snippets/selection-sort.md
+++ b/snippets/js/s/selection-sort.md
@@ -1,6 +1,7 @@
 ---
 title: Selection sort
 type: snippet
+language: javascript
 tags: [algorithm,array]
 author: chalarangelo
 cover: violin
diff --git a/snippets/serialize-cookie.md b/snippets/js/s/serialize-cookie.md
similarity index 95%
rename from snippets/serialize-cookie.md
rename to snippets/js/s/serialize-cookie.md
index a9573e3ee..af4b83b85 100644
--- a/snippets/serialize-cookie.md
+++ b/snippets/js/s/serialize-cookie.md
@@ -1,6 +1,7 @@
 ---
 title: Serialize cookie
 type: snippet
+language: javascript
 tags: [browser,string]
 cover: three-vases
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/serialize-form.md b/snippets/js/s/serialize-form.md
similarity index 97%
rename from snippets/serialize-form.md
rename to snippets/js/s/serialize-form.md
index 7d7d35a12..290a9371e 100644
--- a/snippets/serialize-form.md
+++ b/snippets/js/s/serialize-form.md
@@ -1,6 +1,7 @@
 ---
 title: Serialize form
 type: snippet
+language: javascript
 tags: [browser,string]
 cover: down-the-stream
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/set-style.md b/snippets/js/s/set-style.md
similarity index 95%
rename from snippets/set-style.md
rename to snippets/js/s/set-style.md
index 40af9bfb7..7e806a6df 100644
--- a/snippets/set-style.md
+++ b/snippets/js/s/set-style.md
@@ -1,6 +1,7 @@
 ---
 title: Set style for element
 type: snippet
+language: javascript
 tags: [browser]
 cover: laptop-plants-2
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/shallow-clone.md b/snippets/js/s/shallow-clone.md
similarity index 95%
rename from snippets/shallow-clone.md
rename to snippets/js/s/shallow-clone.md
index c976077c8..daf5952bd 100644
--- a/snippets/shallow-clone.md
+++ b/snippets/js/s/shallow-clone.md
@@ -1,6 +1,7 @@
 ---
 title: Shallow clone object
 type: snippet
+language: javascript
 tags: [object]
 cover: neon-desk-1
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/shank.md b/snippets/js/s/shank.md
similarity index 98%
rename from snippets/shank.md
rename to snippets/js/s/shank.md
index 92aba7ce8..598987503 100644
--- a/snippets/shank.md
+++ b/snippets/js/s/shank.md
@@ -1,6 +1,7 @@
 ---
 title: Remove elements from array
 type: snippet
+language: javascript
 tags: [array]
 cover: avocado-slices
 excerpt: Removes an element from an array without mutating it.
diff --git a/snippets/show.md b/snippets/js/s/show.md
similarity index 95%
rename from snippets/show.md
rename to snippets/js/s/show.md
index c15f89ca7..2fa04f076 100644
--- a/snippets/show.md
+++ b/snippets/js/s/show.md
@@ -1,6 +1,7 @@
 ---
 title: Show elements
 type: snippet
+language: javascript
 tags: [browser,css]
 cover: green-plant
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/shuffle.md b/snippets/js/s/shuffle.md
similarity index 96%
rename from snippets/shuffle.md
rename to snippets/js/s/shuffle.md
index e55124b8d..8e5c5a78a 100644
--- a/snippets/shuffle.md
+++ b/snippets/js/s/shuffle.md
@@ -1,6 +1,7 @@
 ---
 title: Shuffle array
 type: snippet
+language: javascript
 tags: [array,random,algorithm]
 cover: interior-11
 dateModified: 2021-02-20T21:17:38+02:00
diff --git a/snippets/similarity.md b/snippets/js/s/similarity.md
similarity index 95%
rename from snippets/similarity.md
rename to snippets/js/s/similarity.md
index 4f54eaf33..e192f7ba8 100644
--- a/snippets/similarity.md
+++ b/snippets/js/s/similarity.md
@@ -1,6 +1,7 @@
 ---
 title: Array similarity
 type: snippet
+language: javascript
 tags: [array,math]
 cover: dark-leaves-5
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/size.md b/snippets/js/s/size.md
similarity index 97%
rename from snippets/size.md
rename to snippets/js/s/size.md
index ddcd60afb..9cd027474 100644
--- a/snippets/size.md
+++ b/snippets/js/s/size.md
@@ -1,6 +1,7 @@
 ---
 title: Size of array, object or string
 type: snippet
+language: javascript
 tags: [object,array,string]
 cover: digital-nomad-13
 dateModified: 2023-01-20T13:25:47+03:00
diff --git a/snippets/sleep.md b/snippets/js/s/sleep.md
similarity index 96%
rename from snippets/sleep.md
rename to snippets/js/s/sleep.md
index b9356b4f5..3a6b61d4a 100644
--- a/snippets/sleep.md
+++ b/snippets/js/s/sleep.md
@@ -1,6 +1,7 @@
 ---
 title: Delay async function execution
 type: snippet
+language: javascript
 tags: [function,promise]
 cover: sleepy-cat
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/slugify.md b/snippets/js/s/slugify.md
similarity index 96%
rename from snippets/slugify.md
rename to snippets/js/s/slugify.md
index 94173c036..e41a2c048 100644
--- a/snippets/slugify.md
+++ b/snippets/js/s/slugify.md
@@ -1,6 +1,7 @@
 ---
 title: String to slug
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: houses-rock-sea
 dateModified: 2020-10-04T10:36:38+03:00
diff --git a/snippets/smooth-scroll.md b/snippets/js/s/smooth-scroll.md
similarity index 96%
rename from snippets/smooth-scroll.md
rename to snippets/js/s/smooth-scroll.md
index 519fffc90..0afd2895b 100644
--- a/snippets/smooth-scroll.md
+++ b/snippets/js/s/smooth-scroll.md
@@ -1,6 +1,7 @@
 ---
 title: Smooth scroll element into view
 type: snippet
+language: javascript
 tags: [browser,css]
 cover: carrots
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/sort-characters-in-string.md b/snippets/js/s/sort-characters-in-string.md
similarity index 96%
rename from snippets/sort-characters-in-string.md
rename to snippets/js/s/sort-characters-in-string.md
index 35caf2c5d..6b170bed0 100644
--- a/snippets/sort-characters-in-string.md
+++ b/snippets/js/s/sort-characters-in-string.md
@@ -1,6 +1,7 @@
 ---
 title: Sort characters in string
 type: snippet
+language: javascript
 tags: [string]
 cover: purple-flower-field
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/sorted-index-by.md b/snippets/js/s/sorted-index-by.md
similarity index 97%
rename from snippets/sorted-index-by.md
rename to snippets/js/s/sorted-index-by.md
index 19f3c25a2..16b443a05 100644
--- a/snippets/sorted-index-by.md
+++ b/snippets/js/s/sorted-index-by.md
@@ -1,6 +1,7 @@
 ---
 title: Insertion index in sorted array based on function
 type: snippet
+language: javascript
 tags: [array,math]
 cover: digital-nomad-15
 excerpt: Finds the lowest insertion index to maintain array sorting order based on the provided iterator function.
diff --git a/snippets/sorted-index.md b/snippets/js/s/sorted-index.md
similarity index 97%
rename from snippets/sorted-index.md
rename to snippets/js/s/sorted-index.md
index 26b9ee6b7..69cfe59b9 100644
--- a/snippets/sorted-index.md
+++ b/snippets/js/s/sorted-index.md
@@ -1,6 +1,7 @@
 ---
 title: Insertion index in sorted array
 type: snippet
+language: javascript
 tags: [array,math]
 cover: apples
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/sorted-last-index-by.md b/snippets/js/s/sorted-last-index-by.md
similarity index 98%
rename from snippets/sorted-last-index-by.md
rename to snippets/js/s/sorted-last-index-by.md
index f0742b2c4..aae0d5a24 100644
--- a/snippets/sorted-last-index-by.md
+++ b/snippets/js/s/sorted-last-index-by.md
@@ -1,6 +1,7 @@
 ---
 title: Last insertion index in sorted array based on function
 type: snippet
+language: javascript
 tags: [array]
 cover: hard-disk
 excerpt: Finds the highest insertion index to maintain array sorting order based on the provided iterator function.
diff --git a/snippets/sorted-last-index.md b/snippets/js/s/sorted-last-index.md
similarity index 97%
rename from snippets/sorted-last-index.md
rename to snippets/js/s/sorted-last-index.md
index cdaab2200..e4aeac065 100644
--- a/snippets/sorted-last-index.md
+++ b/snippets/js/s/sorted-last-index.md
@@ -1,6 +1,7 @@
 ---
 title: Last insertion index in sorted array
 type: snippet
+language: javascript
 tags: [array]
 cover: rocky-beach-3
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/split-lines.md b/snippets/js/s/split-lines.md
similarity index 95%
rename from snippets/split-lines.md
rename to snippets/js/s/split-lines.md
index 2c4f01bdd..363b01c63 100644
--- a/snippets/split-lines.md
+++ b/snippets/js/s/split-lines.md
@@ -1,6 +1,7 @@
 ---
 title: Split into lines
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: two-cities
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/spread-over.md b/snippets/js/s/spread-over.md
similarity index 95%
rename from snippets/spread-over.md
rename to snippets/js/s/spread-over.md
index a97f0388b..9abc1cc92 100644
--- a/snippets/spread-over.md
+++ b/snippets/js/s/spread-over.md
@@ -1,6 +1,7 @@
 ---
 title: Convert function from variadic
 type: snippet
+language: javascript
 tags: [function]
 cover: tent-stars
 dateModified: 2021-06-13T13:50:25+03:00
diff --git a/snippets/stable-sort.md b/snippets/js/s/stable-sort.md
similarity index 97%
rename from snippets/stable-sort.md
rename to snippets/js/s/stable-sort.md
index e0458143f..39c767739 100644
--- a/snippets/stable-sort.md
+++ b/snippets/js/s/stable-sort.md
@@ -1,6 +1,7 @@
 ---
 title: Stable sort
 type: snippet
+language: javascript
 tags: [array]
 cover: horse-sunset
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/standard-deviation.md b/snippets/js/s/standard-deviation.md
similarity index 97%
rename from snippets/standard-deviation.md
rename to snippets/js/s/standard-deviation.md
index 6a6f3f4ad..c3c484bbb 100644
--- a/snippets/standard-deviation.md
+++ b/snippets/js/s/standard-deviation.md
@@ -1,6 +1,7 @@
 ---
 title: Standard deviation
 type: snippet
+language: javascript
 tags: [math]
 cover: interior-16
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/starts-with-substring.md b/snippets/js/s/starts-with-substring.md
similarity index 97%
rename from snippets/starts-with-substring.md
rename to snippets/js/s/starts-with-substring.md
index 5d32dcf52..2c9960410 100644
--- a/snippets/starts-with-substring.md
+++ b/snippets/js/s/starts-with-substring.md
@@ -2,6 +2,7 @@
 title: String starts with substring
 type: snippet
 shortTitle: Starts with substring
+language: javascript
 tags: [string]
 cover: boutique-home-office-3
 author: chalarangelo
diff --git a/snippets/string-permutations.md b/snippets/js/s/string-permutations.md
similarity index 98%
rename from snippets/string-permutations.md
rename to snippets/js/s/string-permutations.md
index 6c39df64f..ba490c37c 100644
--- a/snippets/string-permutations.md
+++ b/snippets/js/s/string-permutations.md
@@ -1,6 +1,7 @@
 ---
 title: String permutations
 type: snippet
+language: javascript
 tags: [string,recursion]
 cover: mac-and-coffee
 dateModified: 2020-11-15T17:13:42+02:00
diff --git a/snippets/stringify-circular-json.md b/snippets/js/s/stringify-circular-json.md
similarity index 97%
rename from snippets/stringify-circular-json.md
rename to snippets/js/s/stringify-circular-json.md
index edfca29dd..5cc0639dc 100644
--- a/snippets/stringify-circular-json.md
+++ b/snippets/js/s/stringify-circular-json.md
@@ -1,6 +1,7 @@
 ---
 title: Stringify circular JSON
 type: snippet
+language: javascript
 tags: [object]
 cover: periscope
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/strip-html-tags.md b/snippets/js/s/strip-html-tags.md
similarity index 94%
rename from snippets/strip-html-tags.md
rename to snippets/js/s/strip-html-tags.md
index 86bb506bd..d7551a1f5 100644
--- a/snippets/strip-html-tags.md
+++ b/snippets/js/s/strip-html-tags.md
@@ -1,6 +1,7 @@
 ---
 title: Strip HTML tags
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: coffee-phone-tray-3
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/sub-set.md b/snippets/js/s/sub-set.md
similarity index 96%
rename from snippets/sub-set.md
rename to snippets/js/s/sub-set.md
index 7560a576e..7d788cf53 100644
--- a/snippets/sub-set.md
+++ b/snippets/js/s/sub-set.md
@@ -1,6 +1,7 @@
 ---
 title: Subset of iterable
 type: snippet
+language: javascript
 tags: [array]
 cover: last-light
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/sum-by.md b/snippets/js/s/sum-by.md
similarity index 97%
rename from snippets/sum-by.md
rename to snippets/js/s/sum-by.md
index 426419647..dd8bdc12b 100644
--- a/snippets/sum-by.md
+++ b/snippets/js/s/sum-by.md
@@ -1,6 +1,7 @@
 ---
 title: Mapped array sum
 type: snippet
+language: javascript
 tags: [math,array]
 cover: avocado-slices
 dateModified: 2020-11-03T22:11:18+02:00
diff --git a/snippets/sum-n.md b/snippets/js/s/sum-n.md
similarity index 94%
rename from snippets/sum-n.md
rename to snippets/js/s/sum-n.md
index ef6554585..f3df241b6 100644
--- a/snippets/sum-n.md
+++ b/snippets/js/s/sum-n.md
@@ -1,6 +1,7 @@
 ---
 title: Sum of numbers until n
 type: snippet
+language: javascript
 tags: [math]
 cover: blue-flower
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/sum-power.md b/snippets/js/s/sum-power.md
similarity index 97%
rename from snippets/sum-power.md
rename to snippets/js/s/sum-power.md
index 78fcb2253..1e0babdfd 100644
--- a/snippets/sum-power.md
+++ b/snippets/js/s/sum-power.md
@@ -1,6 +1,7 @@
 ---
 title: Sum of powers in range
 type: snippet
+language: javascript
 tags: [math]
 cover: boat-port
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/sum.md b/snippets/js/s/sum.md
similarity index 95%
rename from snippets/sum.md
rename to snippets/js/s/sum.md
index 750e7421e..3c38a7273 100644
--- a/snippets/sum.md
+++ b/snippets/js/s/sum.md
@@ -1,6 +1,7 @@
 ---
 title: Array sum
 type: snippet
+language: javascript
 tags: [math]
 cover: lake-trees
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/super-set.md b/snippets/js/s/super-set.md
similarity index 97%
rename from snippets/super-set.md
rename to snippets/js/s/super-set.md
index 7d6e1a4ea..08f490a88 100644
--- a/snippets/super-set.md
+++ b/snippets/js/s/super-set.md
@@ -1,6 +1,7 @@
 ---
 title: Superset of iterable
 type: snippet
+language: javascript
 tags: [array]
 cover: waves-from-above-2
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/supports-touch-events.md b/snippets/js/s/supports-touch-events.md
similarity index 94%
rename from snippets/supports-touch-events.md
rename to snippets/js/s/supports-touch-events.md
index 4f445446f..4d56a1bcb 100644
--- a/snippets/supports-touch-events.md
+++ b/snippets/js/s/supports-touch-events.md
@@ -1,6 +1,7 @@
 ---
 title: Device supports touch events
 type: snippet
+language: javascript
 tags: [browser]
 author: chalarangelo
 cover: man-red-sunset
diff --git a/snippets/swap-case.md b/snippets/js/s/swap-case.md
similarity index 97%
rename from snippets/swap-case.md
rename to snippets/js/s/swap-case.md
index 423064ca4..f05da3132 100644
--- a/snippets/swap-case.md
+++ b/snippets/js/s/swap-case.md
@@ -1,6 +1,7 @@
 ---
 title: Swapcase string
 type: snippet
+language: javascript
 tags: [string]
 cover: mountain-lake-2
 dateModified: 2020-11-15T13:09:03+02:00
diff --git a/snippets/symbolize-keys.md b/snippets/js/s/symbolize-keys.md
similarity index 96%
rename from snippets/symbolize-keys.md
rename to snippets/js/s/symbolize-keys.md
index 722686ffb..c418c5ce0 100644
--- a/snippets/symbolize-keys.md
+++ b/snippets/js/s/symbolize-keys.md
@@ -1,6 +1,7 @@
 ---
 title: Symbolize object keys
 type: snippet
+language: javascript
 tags: [object]
 author: chalarangelo
 cover: rocky-lake
diff --git a/snippets/symmetric-difference-by.md b/snippets/js/s/symmetric-difference-by.md
similarity index 97%
rename from snippets/symmetric-difference-by.md
rename to snippets/js/s/symmetric-difference-by.md
index 237e64dae..fdf9978b8 100644
--- a/snippets/symmetric-difference-by.md
+++ b/snippets/js/s/symmetric-difference-by.md
@@ -1,6 +1,7 @@
 ---
 title: Mapped array symmetric difference
 type: snippet
+language: javascript
 tags: [array]
 cover: river-houses
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/symmetric-difference-with.md b/snippets/js/s/symmetric-difference-with.md
similarity index 96%
rename from snippets/symmetric-difference-with.md
rename to snippets/js/s/symmetric-difference-with.md
index ab00d7c46..11f2f71c6 100644
--- a/snippets/symmetric-difference-with.md
+++ b/snippets/js/s/symmetric-difference-with.md
@@ -1,6 +1,7 @@
 ---
 title: Array symmetric difference
 type: snippet
+language: javascript
 tags: [array]
 cover: digital-nomad
 dateModified: 2020-10-18T14:58:09+03:00
diff --git a/snippets/symmetric-difference.md b/snippets/js/s/symmetric-difference.md
similarity index 97%
rename from snippets/symmetric-difference.md
rename to snippets/js/s/symmetric-difference.md
index e34aa495e..10adf6240 100644
--- a/snippets/symmetric-difference.md
+++ b/snippets/js/s/symmetric-difference.md
@@ -1,6 +1,7 @@
 ---
 title: Array symmetric difference
 type: snippet
+language: javascript
 tags: [array,math]
 cover: trippy-chemicals
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/tail.md b/snippets/js/s/tail.md
similarity index 95%
rename from snippets/tail.md
rename to snippets/js/s/tail.md
index 486707fd9..2af415e91 100644
--- a/snippets/tail.md
+++ b/snippets/js/s/tail.md
@@ -1,6 +1,7 @@
 ---
 title: Array tail
 type: snippet
+language: javascript
 tags: [array]
 cover: waves-from-above
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/take-right-until.md b/snippets/js/s/take-right-until.md
similarity index 97%
rename from snippets/take-right-until.md
rename to snippets/js/s/take-right-until.md
index 518ae8acf..6c5f193de 100644
--- a/snippets/take-right-until.md
+++ b/snippets/js/s/take-right-until.md
@@ -1,6 +1,7 @@
 ---
 title: Remove list elements from the end until condition is met
 type: snippet
+language: javascript
 tags: [array]
 cover: fruit-feast
 dateModified: 2020-11-29T12:04:53+02:00
diff --git a/snippets/take-right-while.md b/snippets/js/s/take-right-while.md
similarity index 97%
rename from snippets/take-right-while.md
rename to snippets/js/s/take-right-while.md
index d15b59b24..72cb3bfaf 100644
--- a/snippets/take-right-while.md
+++ b/snippets/js/s/take-right-while.md
@@ -1,6 +1,7 @@
 ---
 title: Remove list elements from the end while condition is met
 type: snippet
+language: javascript
 tags: [array]
 cover: beach-pineapple
 dateModified: 2020-11-29T12:04:53+02:00
diff --git a/snippets/take-right.md b/snippets/js/s/take-right.md
similarity index 95%
rename from snippets/take-right.md
rename to snippets/js/s/take-right.md
index 8d44e7cab..fb899c676 100644
--- a/snippets/take-right.md
+++ b/snippets/js/s/take-right.md
@@ -1,6 +1,7 @@
 ---
 title: Remove list elements from the end
 type: snippet
+language: javascript
 tags: [array]
 cover: interior-7
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/take-until.md b/snippets/js/s/take-until.md
similarity index 97%
rename from snippets/take-until.md
rename to snippets/js/s/take-until.md
index e13e2d945..60c46549d 100644
--- a/snippets/take-until.md
+++ b/snippets/js/s/take-until.md
@@ -1,6 +1,7 @@
 ---
 title: Remove list elements until condition is met
 type: snippet
+language: javascript
 tags: [array]
 cover: purple-sunset-beach
 dateModified: 2020-11-29T12:04:53+02:00
diff --git a/snippets/take-while.md b/snippets/js/s/take-while.md
similarity index 97%
rename from snippets/take-while.md
rename to snippets/js/s/take-while.md
index f41cce401..c60fab649 100644
--- a/snippets/take-while.md
+++ b/snippets/js/s/take-while.md
@@ -1,6 +1,7 @@
 ---
 title: Remove list elements while condition is met
 type: snippet
+language: javascript
 tags: [array]
 cover: colors-mural
 dateModified: 2020-11-29T12:04:53+02:00
diff --git a/snippets/take.md b/snippets/js/s/take.md
similarity index 95%
rename from snippets/take.md
rename to snippets/js/s/take.md
index 7600304c0..117df51df 100644
--- a/snippets/take.md
+++ b/snippets/js/s/take.md
@@ -1,6 +1,7 @@
 ---
 title: Remove list elements
 type: snippet
+language: javascript
 tags: [array]
 cover: interior-9
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/throttle.md b/snippets/js/s/throttle.md
similarity index 98%
rename from snippets/throttle.md
rename to snippets/js/s/throttle.md
index 97fa915d5..85bd2bf97 100644
--- a/snippets/throttle.md
+++ b/snippets/js/s/throttle.md
@@ -1,6 +1,7 @@
 ---
 title: Throttle function
 type: snippet
+language: javascript
 tags: [function]
 cover: waves-from-above
 dateModified: 2021-10-13T19:29:39+02:00
diff --git a/snippets/time-taken.md b/snippets/js/s/time-taken.md
similarity index 96%
rename from snippets/time-taken.md
rename to snippets/js/s/time-taken.md
index 41c732784..127db11c3 100644
--- a/snippets/time-taken.md
+++ b/snippets/js/s/time-taken.md
@@ -1,6 +1,7 @@
 ---
 title: Time taken by function
 type: snippet
+language: javascript
 tags: [function]
 cover: shelf-plant
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/times.md b/snippets/js/s/times.md
similarity index 96%
rename from snippets/times.md
rename to snippets/js/s/times.md
index 9101ba08d..7ee021b24 100644
--- a/snippets/times.md
+++ b/snippets/js/s/times.md
@@ -1,6 +1,7 @@
 ---
 title: Iterate n times
 type: snippet
+language: javascript
 tags: [function]
 cover: lake-loop
 dateModified: 2020-10-20T11:21:07+03:00
diff --git a/snippets/to-camel-case.md b/snippets/js/s/to-camel-case.md
similarity index 98%
rename from snippets/to-camel-case.md
rename to snippets/js/s/to-camel-case.md
index 856b4c8cd..cd51a65ee 100644
--- a/snippets/to-camel-case.md
+++ b/snippets/js/s/to-camel-case.md
@@ -1,6 +1,7 @@
 ---
 title: Camelcase string
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: meteora
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/to-char-array.md b/snippets/js/s/to-char-array.md
similarity index 94%
rename from snippets/to-char-array.md
rename to snippets/js/s/to-char-array.md
index e6d22e104..e21dd5f63 100644
--- a/snippets/to-char-array.md
+++ b/snippets/js/s/to-char-array.md
@@ -1,6 +1,7 @@
 ---
 title: String to character array
 type: snippet
+language: javascript
 tags: [string]
 cover: waving-over-lake
 dateModified: 2020-10-08T15:17:22+03:00
diff --git a/snippets/to-currency.md b/snippets/js/s/to-currency.md
similarity index 97%
rename from snippets/to-currency.md
rename to snippets/js/s/to-currency.md
index 4ff38c502..7a82250c5 100644
--- a/snippets/to-currency.md
+++ b/snippets/js/s/to-currency.md
@@ -1,6 +1,7 @@
 ---
 title: Number to currency string
 type: snippet
+language: javascript
 tags: [math,string]
 cover: planning
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/to-decimal-mark.md b/snippets/js/s/to-decimal-mark.md
similarity index 95%
rename from snippets/to-decimal-mark.md
rename to snippets/js/s/to-decimal-mark.md
index a852e3c55..52973d952 100644
--- a/snippets/to-decimal-mark.md
+++ b/snippets/js/s/to-decimal-mark.md
@@ -1,6 +1,7 @@
 ---
 title: Number to decimal mark
 type: snippet
+language: javascript
 tags: [math]
 cover: blue-bench
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/to-hash.md b/snippets/js/s/to-hash.md
similarity index 96%
rename from snippets/to-hash.md
rename to snippets/js/s/to-hash.md
index 8525164a0..d414d97a8 100644
--- a/snippets/to-hash.md
+++ b/snippets/js/s/to-hash.md
@@ -1,6 +1,7 @@
 ---
 title: Iterable to hash
 type: snippet
+language: javascript
 tags: [array]
 cover: sleepy-cat
 dateModified: 2022-01-30T12:45:30+03:00
diff --git a/snippets/to-hsl-array.md b/snippets/js/s/to-hsl-array.md
similarity index 96%
rename from snippets/to-hsl-array.md
rename to snippets/js/s/to-hsl-array.md
index 1d361cae0..db6bb9715 100644
--- a/snippets/to-hsl-array.md
+++ b/snippets/js/s/to-hsl-array.md
@@ -1,6 +1,7 @@
 ---
 title: HSL to array
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: kettle-laptop
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/to-hsl-object.md b/snippets/js/s/to-hsl-object.md
similarity index 97%
rename from snippets/to-hsl-object.md
rename to snippets/js/s/to-hsl-object.md
index aa954121b..73cc2e898 100644
--- a/snippets/to-hsl-object.md
+++ b/snippets/js/s/to-hsl-object.md
@@ -1,6 +1,7 @@
 ---
 title: HSL to object
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: measuring
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/to-identity-object.md b/snippets/js/s/to-identity-object.md
similarity index 96%
rename from snippets/to-identity-object.md
rename to snippets/js/s/to-identity-object.md
index ccd239d9c..872fbcc67 100644
--- a/snippets/to-identity-object.md
+++ b/snippets/js/s/to-identity-object.md
@@ -1,6 +1,7 @@
 ---
 title: Convert array to identity object
 type: snippet
+language: javascript
 tags: [array]
 author: chalarangelo
 cover: rain-shopping
diff --git a/snippets/to-iso-string-with-timezone.md b/snippets/js/s/to-iso-string-with-timezone.md
similarity index 98%
rename from snippets/to-iso-string-with-timezone.md
rename to snippets/js/s/to-iso-string-with-timezone.md
index 8d69fe8a8..c3d5980d3 100644
--- a/snippets/to-iso-string-with-timezone.md
+++ b/snippets/js/s/to-iso-string-with-timezone.md
@@ -1,6 +1,7 @@
 ---
 title: Date to ISO format with timezone
 type: snippet
+language: javascript
 tags: [date]
 cover: pop-of-green
 dateModified: 2021-10-13T19:29:39+02:00
diff --git a/snippets/to-kebab-case.md b/snippets/js/s/to-kebab-case.md
similarity index 97%
rename from snippets/to-kebab-case.md
rename to snippets/js/s/to-kebab-case.md
index c79ff561e..6d7418d07 100644
--- a/snippets/to-kebab-case.md
+++ b/snippets/js/s/to-kebab-case.md
@@ -1,6 +1,7 @@
 ---
 title: Kebabcase string
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: old-consoles
 dateModified: 2020-12-16T13:42:27+02:00
diff --git a/snippets/to-optional-fixed.md b/snippets/js/s/to-optional-fixed.md
similarity index 97%
rename from snippets/to-optional-fixed.md
rename to snippets/js/s/to-optional-fixed.md
index 317ac280c..8b70769f7 100644
--- a/snippets/to-optional-fixed.md
+++ b/snippets/js/s/to-optional-fixed.md
@@ -1,6 +1,7 @@
 ---
 title: Number to fixed-point notation without trailing zeros
 type: snippet
+language: javascript
 tags: [math,string]
 author: chalarangelo
 cover: red-succulent
diff --git a/snippets/to-ordinal-suffix.md b/snippets/js/s/to-ordinal-suffix.md
similarity index 97%
rename from snippets/to-ordinal-suffix.md
rename to snippets/js/s/to-ordinal-suffix.md
index f43fa4265..47ce3bce2 100644
--- a/snippets/to-ordinal-suffix.md
+++ b/snippets/js/s/to-ordinal-suffix.md
@@ -1,6 +1,7 @@
 ---
 title: Number to ordinal suffix
 type: snippet
+language: javascript
 tags: [math]
 cover: tram-car-2
 dateModified: 2020-11-13T19:49:57+02:00
diff --git a/snippets/to-pairs.md b/snippets/js/s/to-pairs.md
similarity index 97%
rename from snippets/to-pairs.md
rename to snippets/js/s/to-pairs.md
index 987f311cd..182f74ad1 100644
--- a/snippets/to-pairs.md
+++ b/snippets/js/s/to-pairs.md
@@ -1,6 +1,7 @@
 ---
 title: Object to pairs
 type: snippet
+language: javascript
 tags: [object,array]
 author: chalarangelo
 cover: purple-leaves
diff --git a/snippets/to-pascal-case.md b/snippets/js/s/to-pascal-case.md
similarity index 95%
rename from snippets/to-pascal-case.md
rename to snippets/js/s/to-pascal-case.md
index a3dd32ef3..8afbe6162 100644
--- a/snippets/to-pascal-case.md
+++ b/snippets/js/s/to-pascal-case.md
@@ -1,6 +1,7 @@
 ---
 title: Pascalcase string
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: camera-zoom
 dateModified: 2021-09-08T19:21:13+00:00
diff --git a/snippets/to-rgb-array.md b/snippets/js/s/to-rgb-array.md
similarity index 96%
rename from snippets/to-rgb-array.md
rename to snippets/js/s/to-rgb-array.md
index f195f5ad5..7b79bd1d7 100644
--- a/snippets/to-rgb-array.md
+++ b/snippets/js/s/to-rgb-array.md
@@ -1,6 +1,7 @@
 ---
 title: RGB to array
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: greek-coffee
 dateModified: 2021-06-13T13:50:25+03:00
diff --git a/snippets/to-rgb-object.md b/snippets/js/s/to-rgb-object.md
similarity index 97%
rename from snippets/to-rgb-object.md
rename to snippets/js/s/to-rgb-object.md
index 12b6f0071..4756d388d 100644
--- a/snippets/to-rgb-object.md
+++ b/snippets/js/s/to-rgb-object.md
@@ -1,6 +1,7 @@
 ---
 title: RGB to object
 type: snippet
+language: javascript
 tags: [string,regexp]
 author: chalarangelo
 cover: organizer
diff --git a/snippets/to-roman-numeral.md b/snippets/js/s/to-roman-numeral.md
similarity index 98%
rename from snippets/to-roman-numeral.md
rename to snippets/js/s/to-roman-numeral.md
index c3ac89b39..0be7f3373 100644
--- a/snippets/to-roman-numeral.md
+++ b/snippets/js/s/to-roman-numeral.md
@@ -1,6 +1,7 @@
 ---
 title: Integer to roman numeral
 type: snippet
+language: javascript
 tags: [math,string]
 cover: ancient-greek-building
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/to-safe-integer.md b/snippets/js/s/to-safe-integer.md
similarity index 95%
rename from snippets/to-safe-integer.md
rename to snippets/js/s/to-safe-integer.md
index f002ee99d..5b9d52d8c 100644
--- a/snippets/to-safe-integer.md
+++ b/snippets/js/s/to-safe-integer.md
@@ -1,6 +1,7 @@
 ---
 title: Value to safe integer
 type: snippet
+language: javascript
 tags: [math]
 cover: mask-quiet
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/to-sentence-case.md b/snippets/js/s/to-sentence-case.md
similarity index 98%
rename from snippets/to-sentence-case.md
rename to snippets/js/s/to-sentence-case.md
index 16894a71c..2ed874fbf 100644
--- a/snippets/to-sentence-case.md
+++ b/snippets/js/s/to-sentence-case.md
@@ -1,6 +1,7 @@
 ---
 title: Sentencecase string
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: sofia-tram
 author: chalarangelo
diff --git a/snippets/to-snake-case.md b/snippets/js/s/to-snake-case.md
similarity index 97%
rename from snippets/to-snake-case.md
rename to snippets/js/s/to-snake-case.md
index 2d2a53bfc..052bec934 100644
--- a/snippets/to-snake-case.md
+++ b/snippets/js/s/to-snake-case.md
@@ -1,6 +1,7 @@
 ---
 title: Snakecase string
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: rustic-cup
 dateModified: 2021-06-28T15:27:44+03:00
diff --git a/snippets/to-title-case.md b/snippets/js/s/to-title-case.md
similarity index 98%
rename from snippets/to-title-case.md
rename to snippets/js/s/to-title-case.md
index 7b3babb17..c8865643f 100644
--- a/snippets/to-title-case.md
+++ b/snippets/js/s/to-title-case.md
@@ -1,6 +1,7 @@
 ---
 title: Titlecase string
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: plant-candle
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/toggle-class.md b/snippets/js/s/toggle-class.md
similarity index 95%
rename from snippets/toggle-class.md
rename to snippets/js/s/toggle-class.md
index a56b49f87..cfec4793f 100644
--- a/snippets/toggle-class.md
+++ b/snippets/js/s/toggle-class.md
@@ -1,6 +1,7 @@
 ---
 title: Toggle class of HTML element
 type: snippet
+language: javascript
 tags: [browser]
 cover: laptop-plants-2
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/toggle-element.md b/snippets/js/s/toggle-element.md
similarity index 97%
rename from snippets/toggle-element.md
rename to snippets/js/s/toggle-element.md
index 5f22eac2a..8928f9716 100644
--- a/snippets/toggle-element.md
+++ b/snippets/js/s/toggle-element.md
@@ -1,6 +1,7 @@
 ---
 title: Toggle element in array
 type: snippet
+language: javascript
 tags: [array]
 author: chalarangelo
 cover: digital-nomad-7
diff --git a/snippets/tomorrow.md b/snippets/js/s/tomorrow.md
similarity index 96%
rename from snippets/tomorrow.md
rename to snippets/js/s/tomorrow.md
index 1c6bad617..316098e2f 100644
--- a/snippets/tomorrow.md
+++ b/snippets/js/s/tomorrow.md
@@ -1,6 +1,7 @@
 ---
 title: Date of tomorrow
 type: snippet
+language: javascript
 tags: [date]
 cover: travel-mug-2
 dateModified: 2020-10-22T20:24:30+03:00
diff --git a/snippets/transform.md b/snippets/js/s/transform.md
similarity index 96%
rename from snippets/transform.md
rename to snippets/js/s/transform.md
index c83c82851..2154e86d8 100644
--- a/snippets/transform.md
+++ b/snippets/js/s/transform.md
@@ -1,6 +1,7 @@
 ---
 title: Transform object
 type: snippet
+language: javascript
 tags: [object]
 cover: fishermen
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/transpose.md b/snippets/js/s/transpose.md
similarity index 95%
rename from snippets/transpose.md
rename to snippets/js/s/transpose.md
index 6a19d8ab2..657dbe43f 100644
--- a/snippets/transpose.md
+++ b/snippets/js/s/transpose.md
@@ -1,6 +1,7 @@
 ---
 title: Transpose matrix
 type: snippet
+language: javascript
 tags: [array]
 author: chalarangelo
 cover: painters-desk
diff --git a/snippets/trigger-event.md b/snippets/js/s/trigger-event.md
similarity index 97%
rename from snippets/trigger-event.md
rename to snippets/js/s/trigger-event.md
index 9253dd1da..d6f0b7a35 100644
--- a/snippets/trigger-event.md
+++ b/snippets/js/s/trigger-event.md
@@ -1,6 +1,7 @@
 ---
 title: Trigger event on HTML element
 type: snippet
+language: javascript
 tags: [browser,event]
 cover: cloudy-mountaintop-2
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/truncate-string-at-whitespace.md b/snippets/js/s/truncate-string-at-whitespace.md
similarity index 98%
rename from snippets/truncate-string-at-whitespace.md
rename to snippets/js/s/truncate-string-at-whitespace.md
index ccb5e84ab..35f6d05dd 100644
--- a/snippets/truncate-string-at-whitespace.md
+++ b/snippets/js/s/truncate-string-at-whitespace.md
@@ -1,6 +1,7 @@
 ---
 title: Truncate string at whitespace
 type: snippet
+language: javascript
 tags: [string]
 cover: cloudy-mountaintop-2
 dateModified: 2020-10-21T21:17:45+03:00
diff --git a/snippets/truncate-string.md b/snippets/js/s/truncate-string.md
similarity index 96%
rename from snippets/truncate-string.md
rename to snippets/js/s/truncate-string.md
index e95016a0d..43156e41b 100644
--- a/snippets/truncate-string.md
+++ b/snippets/js/s/truncate-string.md
@@ -1,6 +1,7 @@
 ---
 title: Truncate string
 type: snippet
+language: javascript
 tags: [string]
 cover: bamboo-lamp
 dateModified: 2020-10-21T21:17:45+03:00
diff --git a/snippets/truth-check-collection.md b/snippets/js/s/truth-check-collection.md
similarity index 96%
rename from snippets/truth-check-collection.md
rename to snippets/js/s/truth-check-collection.md
index a4b9a3f41..2fbba238f 100644
--- a/snippets/truth-check-collection.md
+++ b/snippets/js/s/truth-check-collection.md
@@ -1,6 +1,7 @@
 ---
 title: Truth check collection
 type: snippet
+language: javascript
 tags: [object,logic,array]
 cover: digital-nomad-8
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/unary.md b/snippets/js/s/unary.md
similarity index 95%
rename from snippets/unary.md
rename to snippets/js/s/unary.md
index 2c5c1361e..ead5ac565 100644
--- a/snippets/unary.md
+++ b/snippets/js/s/unary.md
@@ -1,6 +1,7 @@
 ---
 title: Unary function arity
 type: snippet
+language: javascript
 tags: [function]
 cover: flower-portrait-2
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/uncurry.md b/snippets/js/s/uncurry.md
similarity index 97%
rename from snippets/uncurry.md
rename to snippets/js/s/uncurry.md
index 824aad993..3310a7f38 100644
--- a/snippets/uncurry.md
+++ b/snippets/js/s/uncurry.md
@@ -1,6 +1,7 @@
 ---
 title: Uncurry function
 type: snippet
+language: javascript
 tags: [function]
 cover: perfect-timing
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/unescape-html.md b/snippets/js/s/unescape-html.md
similarity index 97%
rename from snippets/unescape-html.md
rename to snippets/js/s/unescape-html.md
index b2122f22a..2535b65fc 100644
--- a/snippets/unescape-html.md
+++ b/snippets/js/s/unescape-html.md
@@ -1,6 +1,7 @@
 ---
 title: Unescape HTML
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: little-tree
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/unflatten-object.md b/snippets/js/s/unflatten-object.md
similarity index 98%
rename from snippets/unflatten-object.md
rename to snippets/js/s/unflatten-object.md
index 874e5388f..270130043 100644
--- a/snippets/unflatten-object.md
+++ b/snippets/js/s/unflatten-object.md
@@ -1,6 +1,7 @@
 ---
 title: Unflatten object
 type: snippet
+language: javascript
 tags: [object]
 cover: purple-flower-bunch
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/unfold.md b/snippets/js/s/unfold.md
similarity index 97%
rename from snippets/unfold.md
rename to snippets/js/s/unfold.md
index 4f18d5a6f..d3fb4ef3b 100644
--- a/snippets/unfold.md
+++ b/snippets/js/s/unfold.md
@@ -1,6 +1,7 @@
 ---
 title: Unfold array
 type: snippet
+language: javascript
 tags: [function,array]
 cover: dog-waiting
 dateModified: 2020-09-15T16:28:04+03:00
diff --git a/snippets/union-by.md b/snippets/js/s/union-by.md
similarity index 97%
rename from snippets/union-by.md
rename to snippets/js/s/union-by.md
index 0826eea28..1b388a3bd 100644
--- a/snippets/union-by.md
+++ b/snippets/js/s/union-by.md
@@ -1,6 +1,7 @@
 ---
 title: Mapped array union
 type: snippet
+language: javascript
 tags: [array]
 cover: lake-church
 excerpt: Returns every element from both arrays that exists at least once after applying the provided function.
diff --git a/snippets/union-with.md b/snippets/js/s/union-with.md
similarity index 96%
rename from snippets/union-with.md
rename to snippets/js/s/union-with.md
index 79c001a20..9063c8413 100644
--- a/snippets/union-with.md
+++ b/snippets/js/s/union-with.md
@@ -1,6 +1,7 @@
 ---
 title: Array union based on function
 type: snippet
+language: javascript
 tags: [array]
 cover: orange-coffee-4
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/union.md b/snippets/js/s/union.md
similarity index 95%
rename from snippets/union.md
rename to snippets/js/s/union.md
index 4e538a83c..09bce74b1 100644
--- a/snippets/union.md
+++ b/snippets/js/s/union.md
@@ -1,6 +1,7 @@
 ---
 title: Array union
 type: snippet
+language: javascript
 tags: [array]
 cover: yellow-white-mug-2
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/unique-elements-by-right.md b/snippets/js/s/unique-elements-by-right.md
similarity index 97%
rename from snippets/unique-elements-by-right.md
rename to snippets/js/s/unique-elements-by-right.md
index cf284627d..9f012da52 100644
--- a/snippets/unique-elements-by-right.md
+++ b/snippets/js/s/unique-elements-by-right.md
@@ -1,6 +1,7 @@
 ---
 title: Reversed unique values in array based on function
 type: snippet
+language: javascript
 tags: [array]
 cover: beach-from-above
 dateModified: 2021-10-13T19:29:39+02:00
diff --git a/snippets/unique-elements-by.md b/snippets/js/s/unique-elements-by.md
similarity index 97%
rename from snippets/unique-elements-by.md
rename to snippets/js/s/unique-elements-by.md
index cb3798732..a9dd858d1 100644
--- a/snippets/unique-elements-by.md
+++ b/snippets/js/s/unique-elements-by.md
@@ -1,6 +1,7 @@
 ---
 title: Unique values in array based on function
 type: snippet
+language: javascript
 tags: [array]
 cover: sunrise-over-mountains
 dateModified: 2021-10-13T19:29:39+02:00
diff --git a/snippets/unique-elements.md b/snippets/js/s/unique-elements.md
similarity index 95%
rename from snippets/unique-elements.md
rename to snippets/js/s/unique-elements.md
index 6876b74a7..224655ee7 100644
--- a/snippets/unique-elements.md
+++ b/snippets/js/s/unique-elements.md
@@ -1,6 +1,7 @@
 ---
 title: Unique values in array
 type: snippet
+language: javascript
 tags: [array]
 cover: architectural
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/unique-symmetric-difference.md b/snippets/js/s/unique-symmetric-difference.md
similarity index 97%
rename from snippets/unique-symmetric-difference.md
rename to snippets/js/s/unique-symmetric-difference.md
index f38e16c87..ff20541b1 100644
--- a/snippets/unique-symmetric-difference.md
+++ b/snippets/js/s/unique-symmetric-difference.md
@@ -1,6 +1,7 @@
 ---
 title: Array unique symmetric difference
 type: snippet
+language: javascript
 tags: [array,math]
 cover: paper-card
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/untildify.md b/snippets/js/s/untildify.md
similarity index 95%
rename from snippets/untildify.md
rename to snippets/js/s/untildify.md
index 180eb042f..fe86bb90e 100644
--- a/snippets/untildify.md
+++ b/snippets/js/s/untildify.md
@@ -1,6 +1,7 @@
 ---
 title: Convert to absolute path
 type: snippet
+language: javascript
 tags: [node,string]
 cover: lighthouse
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/unwind.md b/snippets/js/s/unwind.md
similarity index 97%
rename from snippets/unwind.md
rename to snippets/js/s/unwind.md
index 460dd5862..78a76e4a6 100644
--- a/snippets/unwind.md
+++ b/snippets/js/s/unwind.md
@@ -1,6 +1,7 @@
 ---
 title: Unwind object
 type: snippet
+language: javascript
 tags: [object]
 author: chalarangelo
 cover: waves-from-above
diff --git a/snippets/unzip-with.md b/snippets/js/s/unzip-with.md
similarity index 98%
rename from snippets/unzip-with.md
rename to snippets/js/s/unzip-with.md
index bc56b5f9d..cc6b1220f 100644
--- a/snippets/unzip-with.md
+++ b/snippets/js/s/unzip-with.md
@@ -1,6 +1,7 @@
 ---
 title: Ungroup array elements based on function
 type: snippet
+language: javascript
 tags: [array]
 cover: coconuts
 dateModified: 2022-01-23T13:18:50+03:00
diff --git a/snippets/unzip.md b/snippets/js/s/unzip.md
similarity index 97%
rename from snippets/unzip.md
rename to snippets/js/s/unzip.md
index 4fbce6a22..e9dc51f0c 100644
--- a/snippets/unzip.md
+++ b/snippets/js/s/unzip.md
@@ -1,6 +1,7 @@
 ---
 title: Ungroup array elements
 type: snippet
+language: javascript
 tags: [array]
 cover: glass-blowing
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/upperize.md b/snippets/js/s/upperize.md
similarity index 96%
rename from snippets/upperize.md
rename to snippets/js/s/upperize.md
index 52597e749..fc1c5f1e6 100644
--- a/snippets/upperize.md
+++ b/snippets/js/s/upperize.md
@@ -1,6 +1,7 @@
 ---
 title: Uppercase object keys
 type: snippet
+language: javascript
 tags: [object]
 author: chalarangelo
 cover: sofia-tram
diff --git a/snippets/url-join.md b/snippets/js/s/url-join.md
similarity index 97%
rename from snippets/url-join.md
rename to snippets/js/s/url-join.md
index 62236626d..f2215856f 100644
--- a/snippets/url-join.md
+++ b/snippets/js/s/url-join.md
@@ -1,6 +1,7 @@
 ---
 title: Join URL segments
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: digital-nomad-2
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/uuid-generator-browser.md b/snippets/js/s/uuid-generator-browser.md
similarity index 97%
rename from snippets/uuid-generator-browser.md
rename to snippets/js/s/uuid-generator-browser.md
index ffcea1eb0..ea1ea77a0 100644
--- a/snippets/uuid-generator-browser.md
+++ b/snippets/js/s/uuid-generator-browser.md
@@ -1,6 +1,7 @@
 ---
 title: Generate UUID (browser)
 type: snippet
+language: javascript
 tags: [browser,random]
 cover: mountain-lake-cottage
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/uuid-generator-node.md b/snippets/js/s/uuid-generator-node.md
similarity index 97%
rename from snippets/uuid-generator-node.md
rename to snippets/js/s/uuid-generator-node.md
index 5eb55954a..19c10f78d 100644
--- a/snippets/uuid-generator-node.md
+++ b/snippets/js/s/uuid-generator-node.md
@@ -1,6 +1,7 @@
 ---
 title: Generate UUID (Node.js)
 type: snippet
+language: javascript
 tags: [node,random]
 cover: digital-nomad-7
 dateModified: 2022-03-14T17:41:43+03:00
diff --git a/snippets/validate-number.md b/snippets/js/s/validate-number.md
similarity index 96%
rename from snippets/validate-number.md
rename to snippets/js/s/validate-number.md
index 48982a51a..4df75c1f6 100644
--- a/snippets/validate-number.md
+++ b/snippets/js/s/validate-number.md
@@ -1,6 +1,7 @@
 ---
 title: Validate number
 type: snippet
+language: javascript
 tags: [math]
 cover: flower-portrait-9
 dateModified: 2020-10-22T20:23:26+03:00
diff --git a/snippets/vector-angle.md b/snippets/js/s/vector-angle.md
similarity index 97%
rename from snippets/vector-angle.md
rename to snippets/js/s/vector-angle.md
index 2169fb990..8a4d9ac35 100644
--- a/snippets/vector-angle.md
+++ b/snippets/js/s/vector-angle.md
@@ -1,6 +1,7 @@
 ---
 title: Vector angle
 type: snippet
+language: javascript
 tags: [math]
 cover: avocado-slices
 dateModified: 2021-01-08T00:23:44+02:00
diff --git a/snippets/vector-distance.md b/snippets/js/s/vector-distance.md
similarity index 95%
rename from snippets/vector-distance.md
rename to snippets/js/s/vector-distance.md
index 7c1a5d244..5d9b0bcb6 100644
--- a/snippets/vector-distance.md
+++ b/snippets/js/s/vector-distance.md
@@ -1,6 +1,7 @@
 ---
 title: Vector distance
 type: snippet
+language: javascript
 tags: [math,algorithm]
 cover: orange-coffee-3
 dateModified: 2020-12-28T13:49:24+02:00
diff --git a/snippets/walk-through.md b/snippets/js/s/walk-through.md
similarity index 98%
rename from snippets/walk-through.md
rename to snippets/js/s/walk-through.md
index 84671623c..49df3acbc 100644
--- a/snippets/walk-through.md
+++ b/snippets/js/s/walk-through.md
@@ -1,6 +1,7 @@
 ---
 title: Walk through object
 type: snippet
+language: javascript
 tags: [object,recursion,generator]
 author: chalarangelo
 cover: bridge
diff --git a/snippets/week-of-year.md b/snippets/js/s/week-of-year.md
similarity index 98%
rename from snippets/week-of-year.md
rename to snippets/js/s/week-of-year.md
index 4aebc9f1b..2c22c9926 100644
--- a/snippets/week-of-year.md
+++ b/snippets/js/s/week-of-year.md
@@ -1,6 +1,7 @@
 ---
 title: Week of year
 type: snippet
+language: javascript
 tags: [date]
 author: chalarangelo
 cover: godray-computer-mug
diff --git a/snippets/weighted-average.md b/snippets/js/s/weighted-average.md
similarity index 96%
rename from snippets/weighted-average.md
rename to snippets/js/s/weighted-average.md
index d1bb98a8b..0017143cf 100644
--- a/snippets/weighted-average.md
+++ b/snippets/js/s/weighted-average.md
@@ -1,6 +1,7 @@
 ---
 title: Weighted average
 type: snippet
+language: javascript
 tags: [math]
 cover: interior-12
 dateModified: 2020-11-03T21:46:13+02:00
diff --git a/snippets/weighted-sample.md b/snippets/js/s/weighted-sample.md
similarity index 97%
rename from snippets/weighted-sample.md
rename to snippets/js/s/weighted-sample.md
index aa8e8d65b..4b0b534df 100644
--- a/snippets/weighted-sample.md
+++ b/snippets/js/s/weighted-sample.md
@@ -1,6 +1,7 @@
 ---
 title: Weighted sample
 type: snippet
+language: javascript
 tags: [array,random]
 author: chalarangelo
 cover: digital-nomad-14
diff --git a/snippets/when.md b/snippets/js/s/when.md
similarity index 96%
rename from snippets/when.md
rename to snippets/js/s/when.md
index 9ecddaa8c..ed602baa0 100644
--- a/snippets/when.md
+++ b/snippets/js/s/when.md
@@ -1,6 +1,7 @@
 ---
 title: Apply function when condition is met
 type: snippet
+language: javascript
 tags: [function,logic]
 cover: flower-portrait-8
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/without.md b/snippets/js/s/without.md
similarity index 95%
rename from snippets/without.md
rename to snippets/js/s/without.md
index 1090a5a50..2f39de3eb 100644
--- a/snippets/without.md
+++ b/snippets/js/s/without.md
@@ -1,6 +1,7 @@
 ---
 title: Filter out matching array elements
 type: snippet
+language: javascript
 tags: [array]
 cover: dying-flowers
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/word-wrap.md b/snippets/js/s/word-wrap.md
similarity index 97%
rename from snippets/word-wrap.md
rename to snippets/js/s/word-wrap.md
index a7dbdedc7..af11e9106 100644
--- a/snippets/word-wrap.md
+++ b/snippets/js/s/word-wrap.md
@@ -1,6 +1,7 @@
 ---
 title: Word wrap string
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: white-tablet
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/words.md b/snippets/js/s/words.md
similarity index 96%
rename from snippets/words.md
rename to snippets/js/s/words.md
index 328ce3fdb..d3125b586 100644
--- a/snippets/words.md
+++ b/snippets/js/s/words.md
@@ -1,6 +1,7 @@
 ---
 title: String to words
 type: snippet
+language: javascript
 tags: [string,regexp]
 cover: sea-view-2
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/x-prod.md b/snippets/js/s/x-prod.md
similarity index 96%
rename from snippets/x-prod.md
rename to snippets/js/s/x-prod.md
index 937b65020..ffd4a88f3 100644
--- a/snippets/x-prod.md
+++ b/snippets/js/s/x-prod.md
@@ -1,6 +1,7 @@
 ---
 title: Cross product of arrays
 type: snippet
+language: javascript
 tags: [math,array]
 cover: cup-of-orange
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/xor.md b/snippets/js/s/xor.md
similarity index 95%
rename from snippets/xor.md
rename to snippets/js/s/xor.md
index e3de470e4..b33789d45 100644
--- a/snippets/xor.md
+++ b/snippets/js/s/xor.md
@@ -1,6 +1,7 @@
 ---
 title: Logical xor
 type: snippet
+language: javascript
 tags: [math,logic]
 unlisted: true
 cover: succulent-11
diff --git a/snippets/yes-no.md b/snippets/js/s/yes-no.md
similarity index 96%
rename from snippets/yes-no.md
rename to snippets/js/s/yes-no.md
index 81f763e4c..787eedb0f 100644
--- a/snippets/yes-no.md
+++ b/snippets/js/s/yes-no.md
@@ -1,6 +1,7 @@
 ---
 title: Check yes/no string
 type: snippet
+language: javascript
 tags: [string,regexp]
 unlisted: true
 cover: mask-quiet
diff --git a/snippets/yesterday.md b/snippets/js/s/yesterday.md
similarity index 96%
rename from snippets/yesterday.md
rename to snippets/js/s/yesterday.md
index 087f165cf..0d90736c4 100644
--- a/snippets/yesterday.md
+++ b/snippets/js/s/yesterday.md
@@ -1,6 +1,7 @@
 ---
 title: Date of yesterday
 type: snippet
+language: javascript
 tags: [date]
 cover: travel-mug-2
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/zip-object.md b/snippets/js/s/zip-object.md
similarity index 97%
rename from snippets/zip-object.md
rename to snippets/js/s/zip-object.md
index 8de68d882..1ee9bdf26 100644
--- a/snippets/zip-object.md
+++ b/snippets/js/s/zip-object.md
@@ -1,6 +1,7 @@
 ---
 title: Group array into object
 type: snippet
+language: javascript
 tags: [array,object]
 cover: baloons-field
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippets/zip-with.md b/snippets/js/s/zip-with.md
similarity index 98%
rename from snippets/zip-with.md
rename to snippets/js/s/zip-with.md
index c02513d96..978e812f0 100644
--- a/snippets/zip-with.md
+++ b/snippets/js/s/zip-with.md
@@ -1,6 +1,7 @@
 ---
 title: Group array elements based on function
 type: snippet
+language: javascript
 tags: [array]
 cover: switzerland-night
 excerpt: Groups elements based on position in the original arrays and combines them using a function.
diff --git a/snippets/zip.md b/snippets/js/s/zip.md
similarity index 97%
rename from snippets/zip.md
rename to snippets/js/s/zip.md
index 236868d01..9d52c7193 100644
--- a/snippets/zip.md
+++ b/snippets/js/s/zip.md
@@ -1,6 +1,7 @@
 ---
 title: Group array elements
 type: snippet
+language: javascript
 tags: [array]
 cover: orange-flower
 dateModified: 2020-10-22T20:24:44+03:00
diff --git a/snippet-template.md b/snippets/js/template.md
similarity index 95%
rename from snippet-template.md
rename to snippets/js/template.md
index c969a2509..102512676 100644
--- a/snippet-template.md
+++ b/snippets/js/template.md
@@ -1,6 +1,7 @@
 ---
 title: Function name
 type: snippet
+language: javascript
 tags: [array]
 cover: image
 dateModified: 2021-06-13T05:00:00-04:00
diff --git a/snippets/python/s/add-days.md b/snippets/python/s/add-days.md
new file mode 100644
index 000000000..6633ff678
--- /dev/null
+++ b/snippets/python/s/add-days.md
@@ -0,0 +1,27 @@
+---
+title: Add days to date
+type: snippet
+language: python
+tags: [date]
+cover: orange-flower
+dateModified: 2020-10-28T16:19:04+02:00
+---
+
+Calculates the date of `n` days from the given date.
+
+- Use `datetime.timedelta` and the `+` operator to calculate the new `datetime.datetime` value after adding `n` days to `d`.
+- Omit the second argument, `d`, to use a default value of `datetime.today()`.
+
+```py
+from datetime import datetime, timedelta
+
+def add_days(n, d = datetime.today()):
+  return d + timedelta(n)
+```
+
+```py
+from datetime import date
+
+add_days(5, date(2020, 10, 25)) # date(2020, 10, 30)
+add_days(-5, date(2020, 10, 25)) # date(2020, 10, 20)
+```
diff --git a/snippets/python/s/all-equal.md b/snippets/python/s/all-equal.md
new file mode 100644
index 000000000..201a29fdc
--- /dev/null
+++ b/snippets/python/s/all-equal.md
@@ -0,0 +1,22 @@
+---
+title: Check if list elements are identical
+type: snippet
+language: python
+tags: [list]
+cover: fallen-leaves
+dateModified: 2020-10-11T13:40:42+03:00
+---
+
+Checks if all elements in a list are equal.
+
+- Use `set()` to eliminate duplicate elements and then use `len()` to check if length is `1`.
+
+```py
+def all_equal(lst):
+  return len(set(lst)) == 1
+```
+
+```py
+all_equal([1, 2, 3, 4, 5, 6]) # False
+all_equal([1, 1, 1, 1]) # True
+```
diff --git a/snippets/python/s/all-unique.md b/snippets/python/s/all-unique.md
new file mode 100644
index 000000000..b7e4e69ac
--- /dev/null
+++ b/snippets/python/s/all-unique.md
@@ -0,0 +1,25 @@
+---
+title: Check if list has no duplicates
+type: snippet
+language: python
+tags: [list]
+cover: touch-flower
+dateModified: 2021-01-07T23:30:28+02:00
+---
+
+Checks if all the values in a list are unique.
+
+- Use `set()` on the given list to keep only unique occurrences.
+- Use `len()` to compare the length of the unique values to the original list.
+
+```py
+def all_unique(lst):
+  return len(lst) == len(set(lst))
+```
+
+```py
+x = [1, 2, 3, 4, 5, 6]
+y = [1, 2, 2, 3, 4, 5]
+all_unique(x) # True
+all_unique(y) # False
+```
diff --git a/snippets/python/s/arithmetic-progression.md b/snippets/python/s/arithmetic-progression.md
new file mode 100644
index 000000000..6ff153c2c
--- /dev/null
+++ b/snippets/python/s/arithmetic-progression.md
@@ -0,0 +1,21 @@
+---
+title: Arithmetic progression
+type: snippet
+language: python
+tags: [math]
+cover: number-2
+dateModified: 2020-11-02T19:27:07+02:00
+---
+
+Generates a list of numbers in the arithmetic progression starting with the given positive integer and up to the specified limit.
+
+- Use `range()` and `list()` with the appropriate start, step and end values.
+
+```py
+def arithmetic_progression(n, lim):
+  return list(range(n, lim + 1, n))
+```
+
+```py
+arithmetic_progression(5, 25) # [5, 10, 15, 20, 25]
+```
diff --git a/snippets/python/s/average-by.md b/snippets/python/s/average-by.md
new file mode 100644
index 000000000..e531beb44
--- /dev/null
+++ b/snippets/python/s/average-by.md
@@ -0,0 +1,24 @@
+---
+title: Mapped list average
+type: snippet
+language: python
+tags: [math,list]
+cover: flower-vase
+dateModified: 2020-11-02T19:27:07+02:00
+---
+
+Calculates the average of a list, after mapping each element to a value using the provided function.
+
+- Use `map()` to map each element to the value returned by `fn`.
+- Use `sum()` to sum all of the mapped values, divide by `len(lst)`.
+- Omit the last argument, `fn`, to use the default identity function.
+
+```py
+def average_by(lst, fn = lambda x: x):
+  return sum(map(fn, lst), 0.0) / len(lst)
+```
+
+```py
+average_by([{ 'n': 4 }, { 'n': 2 }, { 'n': 8 }, { 'n': 6 }], lambda x: x['n'])
+# 5.0
+```
diff --git a/snippets/python/s/average.md b/snippets/python/s/average.md
new file mode 100644
index 000000000..7cfcced75
--- /dev/null
+++ b/snippets/python/s/average.md
@@ -0,0 +1,22 @@
+---
+title: Average
+type: snippet
+language: python
+tags: [math,list]
+cover: digital-nomad-15
+dateModified: 2020-11-02T19:27:07+02:00
+---
+
+Calculates the average of two or more numbers.
+
+- Use `sum()` to sum all of the `args` provided, divide by `len()`.
+
+```py
+def average(*args):
+  return sum(args, 0.0) / len(args)
+```
+
+```py
+average(*[1, 2, 3]) # 2.0
+average(1, 2, 3) # 2.0
+```
diff --git a/snippets/python/s/bifurcate-by.md b/snippets/python/s/bifurcate-by.md
new file mode 100644
index 000000000..a2034499a
--- /dev/null
+++ b/snippets/python/s/bifurcate-by.md
@@ -0,0 +1,26 @@
+---
+title: Bifurcate list based on function
+type: snippet
+language: python
+tags: [list]
+cover: two-flower-vases
+dateModified: 2020-11-02T19:27:07+02:00
+---
+
+Splits values into two groups, based on the result of the given filtering function.
+
+- Use a list comprehension to add elements to groups, based on the value returned by `fn` for each element.
+- If `fn` returns a truthy value for any element, add it to the first group, otherwise add it to the second group.
+
+```py
+def bifurcate_by(lst, fn):
+  return [
+    [x for x in lst if fn(x)],
+    [x for x in lst if not fn(x)]
+  ]
+```
+
+```py
+bifurcate_by(['beep', 'boop', 'foo', 'bar'], lambda x: x[0] == 'b')
+# [ ['beep', 'boop', 'bar'], ['foo'] ]
+```
diff --git a/snippets/python/s/bifurcate.md b/snippets/python/s/bifurcate.md
new file mode 100644
index 000000000..3a33ea674
--- /dev/null
+++ b/snippets/python/s/bifurcate.md
@@ -0,0 +1,26 @@
+---
+title: Bifurcate list based on values
+type: snippet
+language: python
+tags: [list]
+cover: mug-flower-book
+dateModified: 2020-11-02T19:27:07+02:00
+---
+
+Splits values into two groups, based on the result of the given `filter` list.
+
+- Use a list comprehension and `zip()` to add elements to groups, based on `filter`.
+- If `filter` has a truthy value for any element, add it to the first group, otherwise add it to the second group.
+
+```py
+def bifurcate(lst, filter):
+  return [
+    [x for x, flag in zip(lst, filter) if flag],
+    [x for x, flag in zip(lst, filter) if not flag]
+  ]
+```
+
+```py
+bifurcate(['beep', 'boop', 'foo', 'bar'], [True, True, False, True])
+# [ ['beep', 'boop', 'bar'], ['foo'] ]
+```
diff --git a/snippets/python/s/binomial-coefficient.md b/snippets/python/s/binomial-coefficient.md
new file mode 100644
index 000000000..8293e1e56
--- /dev/null
+++ b/snippets/python/s/binomial-coefficient.md
@@ -0,0 +1,23 @@
+---
+title: Binomial coefficient
+type: snippet
+language: python
+tags: [math]
+cover: digital-nomad-5
+dateModified: 2020-11-02T19:27:07+02:00
+---
+
+Calculates the number of ways to choose `k` items from `n` items without repetition and without order.
+
+- Use `math.comb()` to calculate the binomial coefficient.
+
+```py
+from math import comb
+
+def binomial_coefficient(n, k):
+  return comb(n, k)
+```
+
+```py
+binomial_coefficient(8, 2) # 28
+```
diff --git a/snippets/python/s/byte-size.md b/snippets/python/s/byte-size.md
new file mode 100644
index 000000000..3cb7298e8
--- /dev/null
+++ b/snippets/python/s/byte-size.md
@@ -0,0 +1,22 @@
+---
+title: Byte size of string
+type: snippet
+language: python
+tags: [string]
+cover: river-house-lights
+dateModified: 2020-11-02T19:27:07+02:00
+---
+
+Returns the length of a string in bytes.
+
+- Use `str.encode()` to encode the given string and return its length.
+
+```py
+def byte_size(s):
+  return len(s.encode('utf-8'))
+```
+
+```py
+byte_size('😀') # 4
+byte_size('Hello World') # 11
+```
diff --git a/snippets/python/s/camel.md b/snippets/python/s/camel.md
new file mode 100644
index 000000000..6ef960c43
--- /dev/null
+++ b/snippets/python/s/camel.md
@@ -0,0 +1,31 @@
+---
+title: Camelcase string
+type: snippet
+language: python
+tags: [string,regexp]
+cover: digital-nomad-9
+dateModified: 2020-11-02T19:27:07+02:00
+---
+
+Converts a string to camelcase.
+
+- Use `re.sub()` to replace any `-` or `_` with a space, using the regexp `r"(_|-)+"`.
+- Use `str.title()` to capitalize the first letter of each word and convert the rest to lowercase.
+- Finally, use `str.replace()` to remove spaces between words.
+
+```py
+from re import sub
+
+def camel(s):
+  s = sub(r"(_|-)+", " ", s).title().replace(" ", "")
+  return ''.join([s[0].lower(), s[1:]])
+```
+
+```py
+camel('some_database_field_name') # 'someDatabaseFieldName'
+camel('Some label that needs to be camelized')
+# 'someLabelThatNeedsToBeCamelized'
+camel('some-javascript-property') # 'someJavascriptProperty'
+camel('some-mixed_string with spaces_underscores-and-hyphens')
+# 'someMixedStringWithSpacesUnderscoresAndHyphens'
+```
diff --git a/snippets/python/s/capitalize-every-word.md b/snippets/python/s/capitalize-every-word.md
new file mode 100644
index 000000000..ad328323d
--- /dev/null
+++ b/snippets/python/s/capitalize-every-word.md
@@ -0,0 +1,21 @@
+---
+title: Capitalize every word
+type: snippet
+language: python
+tags: [string]
+cover: trippy-chemicals
+dateModified: 2020-11-02T19:27:07+02:00
+---
+
+Capitalizes the first letter of every word in a string.
+
+- Use `str.title()` to capitalize the first letter of every word in the string.
+
+```py
+def capitalize_every_word(s):
+  return s.title()
+```
+
+```py
+capitalize_every_word('hello world!') # 'Hello World!'
+```
diff --git a/snippets/python/s/capitalize.md b/snippets/python/s/capitalize.md
new file mode 100644
index 000000000..69cd63d0f
--- /dev/null
+++ b/snippets/python/s/capitalize.md
@@ -0,0 +1,24 @@
+---
+title: Capitalize string
+type: snippet
+language: python
+tags: [string]
+cover: palm-tree-house
+dateModified: 2020-11-02T19:27:07+02:00
+---
+
+Capitalizes the first letter of a string.
+
+- Use list slicing and `str.upper()` to capitalize the first letter of the string.
+- Use `str.join()` to combine the capitalized first letter with the rest of the characters.
+- Omit the `lower_rest` parameter to keep the rest of the string intact, or set it to `True` to convert to lowercase.
+
+```py
+def capitalize(s, lower_rest = False):
+  return ''.join([s[:1].upper(), (s[1:].lower() if lower_rest else s[1:])])
+```
+
+```py
+capitalize('fooBar') # 'FooBar'
+capitalize('fooBar', True) # 'Foobar'
+```
diff --git a/snippets/python/s/cast-list.md b/snippets/python/s/cast-list.md
new file mode 100644
index 000000000..5dd13821c
--- /dev/null
+++ b/snippets/python/s/cast-list.md
@@ -0,0 +1,24 @@
+---
+title: Cast to list
+type: snippet
+language: python
+tags: [list]
+cover: colorful-pots
+dateModified: 2020-11-02T19:27:07+02:00
+---
+
+Casts the provided value as a list if it's not one.
+
+- Use `isinstance()` to check if the given value is enumerable.
+- Return it by using `list()` or encapsulated in a list accordingly.
+
+```py
+def cast_list(val):
+  return list(val) if isinstance(val, (tuple, list, set, dict)) else [val]
+```
+
+```py
+cast_list('foo') # ['foo']
+cast_list([1]) # [1]
+cast_list(('foo', 'bar')) # ['foo', 'bar']
+```
diff --git a/snippets/python/s/celsius-to-fahrenheit.md b/snippets/python/s/celsius-to-fahrenheit.md
new file mode 100644
index 000000000..f608db52d
--- /dev/null
+++ b/snippets/python/s/celsius-to-fahrenheit.md
@@ -0,0 +1,22 @@
+---
+title: Celsius to Fahrenheit
+type: snippet
+language: python
+tags: [math]
+unlisted: true
+cover: last-light
+dateModified: 2021-01-04T12:47:04+02:00
+---
+
+Converts Celsius to Fahrenheit.
+
+- Follow the conversion formula `F = 1.8 * C + 32`.
+
+```py
+def celsius_to_fahrenheit(degrees):
+  return ((degrees * 1.8) + 32)
+```
+
+```py
+celsius_to_fahrenheit(180) # 356.0
+```
diff --git a/snippets/python/s/check-prop.md b/snippets/python/s/check-prop.md
new file mode 100644
index 000000000..6164265e2
--- /dev/null
+++ b/snippets/python/s/check-prop.md
@@ -0,0 +1,23 @@
+---
+title: Check property
+type: snippet
+language: python
+tags: [function]
+cover: lake-trees
+dateModified: 2020-11-02T19:27:07+02:00
+---
+
+Creates a function that will invoke a predicate function for the specified property on a given dictionary.
+
+- Return a `lambda` function that takes a dictionary and applies the predicate function, `fn` to the specified property.
+
+```py
+def check_prop(fn, prop):
+  return lambda obj: fn(obj[prop])
+```
+
+```py
+check_age = check_prop(lambda x: x >= 18, 'age')
+user = {'name': 'Mark', 'age': 18}
+check_age(user) # True
+```
diff --git a/snippets/python/s/chunk-into-n.md b/snippets/python/s/chunk-into-n.md
new file mode 100644
index 000000000..064f10e8c
--- /dev/null
+++ b/snippets/python/s/chunk-into-n.md
@@ -0,0 +1,30 @@
+---
+title: Split list into n chunks
+type: snippet
+language: python
+tags: [list]
+cover: succulent-10
+dateModified: 2020-10-23T05:35:06+03:00
+---
+
+Chunks a list into `n` smaller lists.
+
+- Use `math.ceil()` and `len()` to get the size of each chunk.
+- Use `list()` and `range()` to create a new list of size `n`.
+- Use `map()` to map each element of the new list to a chunk the length of `size`.
+- If the original list can't be split evenly, the final chunk will contain the remaining elements.
+
+```py
+from math import ceil
+
+def chunk_into_n(lst, n):
+  size = ceil(len(lst) / n)
+  return list(
+    map(lambda x: lst[x * size:x * size + size],
+    list(range(n)))
+  )
+```
+
+```py
+chunk_into_n([1, 2, 3, 4, 5, 6, 7], 4) # [[1, 2], [3, 4], [5, 6], [7]]
+```
diff --git a/snippets/python/s/chunk.md b/snippets/python/s/chunk.md
new file mode 100644
index 000000000..d9829cf12
--- /dev/null
+++ b/snippets/python/s/chunk.md
@@ -0,0 +1,27 @@
+---
+title: Split list into chunks
+type: snippet
+language: python
+tags: [list]
+cover: red-berries
+dateModified: 2020-11-02T19:27:07+02:00
+---
+
+Chunks a list into smaller lists of a specified size.
+
+- Use `list()` and `range()` to create a list of the desired `size`.
+- Use `map()` on the list and fill it with splices of the given list.
+- Finally, return the created list.
+
+```py
+from math import ceil
+
+def chunk(lst, size):
+  return list(
+    map(lambda x: lst[x * size:x * size + size],
+      list(range(ceil(len(lst) / size)))))
+```
+
+```py
+chunk([1, 2, 3, 4, 5], 2) # [[1, 2], [3, 4], [5]]
+```
diff --git a/snippets/python/s/clamp-number.md b/snippets/python/s/clamp-number.md
new file mode 100644
index 000000000..6b29f8e0d
--- /dev/null
+++ b/snippets/python/s/clamp-number.md
@@ -0,0 +1,23 @@
+---
+title: Clamp number
+type: snippet
+language: python
+tags: [math]
+cover: highlands
+dateModified: 2020-11-02T19:27:07+02:00
+---
+
+Clamps `num` within the inclusive range specified by the boundary values.
+
+- If `num` falls within the range (`a`, `b`), return `num`.
+- Otherwise, return the nearest number in the range.
+
+```py
+def clamp_number(num, a, b):
+  return max(min(num, max(a, b)), min(a, b))
+```
+
+```py
+clamp_number(2, 3, 5) # 3
+clamp_number(1, -1, -5) # -1
+```
diff --git a/snippets/python/s/collect-dictionary.md b/snippets/python/s/collect-dictionary.md
new file mode 100644
index 000000000..965e30d83
--- /dev/null
+++ b/snippets/python/s/collect-dictionary.md
@@ -0,0 +1,33 @@
+---
+title: Invert dictionary
+type: snippet
+language: python
+tags: [dictionary]
+cover: working-bee
+dateModified: 2020-11-02T19:27:07+02:00
+---
+
+Inverts a dictionary with non-unique hashable values.
+
+- Create a `collections.defaultdict` with `list` as the default value for each key.
+- Use `dictionary.items()` in combination with a loop to map the values of the dictionary to keys using `dict.append()`.
+- Use `dict()` to convert the `collections.defaultdict` to a regular dictionary.
+
+```py
+from collections import defaultdict
+
+def collect_dictionary(obj):
+  inv_obj = defaultdict(list)
+  for key, value in obj.items():
+    inv_obj[value].append(key)
+  return dict(inv_obj)
+```
+
+```py
+ages = {
+  'Peter': 10,
+  'Isabel': 10,
+  'Anna': 9,
+}
+collect_dictionary(ages) # { 10: ['Peter', 'Isabel'], 9: ['Anna'] }
+```
diff --git a/snippets/python/s/combine-values.md b/snippets/python/s/combine-values.md
new file mode 100644
index 000000000..f5dc91ea6
--- /dev/null
+++ b/snippets/python/s/combine-values.md
@@ -0,0 +1,32 @@
+---
+title: Combine dictionary values
+type: snippet
+language: python
+tags: [dictionary]
+cover: fruit-feast
+dateModified: 2021-04-04T14:32:35+03:00
+---
+
+Combines two or more dictionaries, creating a list of values for each key.
+
+- Create a new `collections.defaultdict` with `list` as the default value for each key and loop over `dicts`.
+- Use `dict.append()` to map the values of the dictionary to keys.
+- Use `dict()` to convert the `collections.defaultdict` to a regular dictionary.
+
+```py
+from collections import defaultdict
+
+def combine_values(*dicts):
+  res = defaultdict(list)
+  for d in dicts:
+    for key in d:
+      res[key].append(d[key])
+  return dict(res)
+```
+
+```py
+d1 = {'a': 1, 'b': 'foo', 'c': 400}
+d2 = {'a': 3, 'b': 200, 'd': 400}
+
+combine_values(d1, d2) # {'a': [1, 3], 'b': ['foo', 200], 'c': [400], 'd': [400]}
+```
diff --git a/snippets/python/s/compact.md b/snippets/python/s/compact.md
new file mode 100644
index 000000000..157b8e4ba
--- /dev/null
+++ b/snippets/python/s/compact.md
@@ -0,0 +1,21 @@
+---
+title: Compact list
+type: snippet
+language: python
+tags: [list]
+cover: new-plant
+dateModified: 2020-11-02T19:27:07+02:00
+---
+
+Removes falsy values from a list.
+
+- Use `filter()` to filter out falsy values (`False`, `None`, `0`, and `""`).
+
+```py
+def compact(lst):
+  return list(filter(None, lst))
+```
+
+```py
+compact([0, 1, False, 2, '', 3, 'a', 's', 34]) # [ 1, 2, 3, 'a', 's', 34 ]
+```
diff --git a/snippets/python/s/compose-right.md b/snippets/python/s/compose-right.md
new file mode 100644
index 000000000..ce5e76438
--- /dev/null
+++ b/snippets/python/s/compose-right.md
@@ -0,0 +1,27 @@
+---
+title: Reverse compose functions
+type: snippet
+language: python
+tags: [function]
+cover: lavender-shelf
+dateModified: 2020-11-02T19:27:07+02:00
+---
+
+Performs left-to-right function composition.
+
+- Use `functools.reduce()` to perform left-to-right function composition.
+- The first (leftmost) function can accept one or more arguments; the remaining functions must be unary.
+
+```py
+from functools import reduce
+
+def compose_right(*fns):
+  return reduce(lambda f, g: lambda *args: g(f(*args)), fns)
+```
+
+```py
+add = lambda x, y: x + y
+square = lambda x: x * x
+add_and_square = compose_right(add, square)
+add_and_square(1, 2) # 9
+```
diff --git a/snippets/python/s/compose.md b/snippets/python/s/compose.md
new file mode 100644
index 000000000..0e2146ebe
--- /dev/null
+++ b/snippets/python/s/compose.md
@@ -0,0 +1,27 @@
+---
+title: Compose functions
+type: snippet
+language: python
+tags: [function]
+cover: tram-car-2
+dateModified: 2020-11-02T19:27:07+02:00
+---
+
+Performs right-to-left function composition.
+
+- Use `functools.reduce()` to perform right-to-left function composition.
+- The last (rightmost) function can accept one or more arguments; the remaining functions must be unary.
+
+```py
+from functools import reduce
+
+def compose(*fns):
+  return reduce(lambda f, g: lambda *args: f(g(*args)), fns)
+```
+
+```py
+add5 = lambda x: x + 5
+multiply = lambda x, y: x * y
+multiply_and_add_5 = compose(add5, multiply)
+multiply_and_add_5(5, 2) # 15
+```
diff --git a/snippets/python/s/count-by.md b/snippets/python/s/count-by.md
new file mode 100644
index 000000000..996b82429
--- /dev/null
+++ b/snippets/python/s/count-by.md
@@ -0,0 +1,31 @@
+---
+title: Count grouped elements
+type: snippet
+language: python
+tags: [list]
+cover: rabbit-call
+dateModified: 2020-11-02T19:27:07+02:00
+---
+
+Groups the elements of a list based on the given function and returns the count of elements in each group.
+
+- Use `collections.defaultdict` to initialize a dictionary.
+- Use `map()` to map the values of the given list using the given function.
+- Iterate over the map and increase the element count each time it occurs.
+
+```py
+from collections import defaultdict
+
+def count_by(lst, fn = lambda x: x):
+  count = defaultdict(int)
+  for val in map(fn, lst):
+    count[val] += 1
+  return dict(count)
+```
+
+```py
+from math import floor
+
+count_by([6.1, 4.2, 6.3], floor) # {6: 2, 4: 1}
+count_by(['one', 'two', 'three'], len) # {3: 2, 5: 1}
+```
diff --git a/snippets/python/s/count-occurrences.md b/snippets/python/s/count-occurrences.md
new file mode 100644
index 000000000..6a7995ac9
--- /dev/null
+++ b/snippets/python/s/count-occurrences.md
@@ -0,0 +1,21 @@
+---
+title: Count occurrences
+type: snippet
+language: python
+tags: [list]
+cover: pineapple-at-work
+dateModified: 2021-01-10T00:00:36+02:00
+---
+
+Counts the occurrences of a value in a list.
+
+- Use `list.count()` to count the number of occurrences of `val` in `lst`.
+
+```py
+def count_occurrences(lst, val):
+  return lst.count(val)
+```
+
+```py
+count_occurrences([1, 1, 2, 1, 2, 3], 1) # 3
+```
diff --git a/snippets/python/s/cumsum.md b/snippets/python/s/cumsum.md
new file mode 100644
index 000000000..3ea7b9597
--- /dev/null
+++ b/snippets/python/s/cumsum.md
@@ -0,0 +1,24 @@
+---
+title: Partial sum list
+type: snippet
+language: python
+tags: [list]
+cover: digital-nomad-16
+dateModified: 2021-01-13T23:30:41+02:00
+---
+
+Creates a list of partial sums.
+
+- Use `itertools.accumulate()` to create the accumulated sum for each element.
+- Use `list()` to convert the result into a list.
+
+```py
+from itertools import accumulate
+
+def cumsum(lst):
+  return list(accumulate(lst))
+```
+
+```py
+cumsum(range(0, 15, 3)) # [0, 3, 9, 18, 30]
+```
diff --git a/snippets/python/s/curry.md b/snippets/python/s/curry.md
new file mode 100644
index 000000000..e568837d1
--- /dev/null
+++ b/snippets/python/s/curry.md
@@ -0,0 +1,25 @@
+---
+title: Curry function
+type: snippet
+language: python
+tags: [function]
+cover: leaves-read
+dateModified: 2020-11-02T19:27:07+02:00
+---
+
+Curries a function.
+
+- Use `functools.partial()` to return a new partial object which behaves like `fn` with the given arguments, `args`, partially applied.
+
+```py
+from functools import partial
+
+def curry(fn, *args):
+  return partial(fn, *args)
+```
+
+```py
+add = lambda x, y: x + y
+add10 = curry(add, 10)
+add10(20) # 30
+```
diff --git a/snippets/python/s/daterange.md b/snippets/python/s/daterange.md
new file mode 100644
index 000000000..708d3bcf5
--- /dev/null
+++ b/snippets/python/s/daterange.md
@@ -0,0 +1,28 @@
+---
+title: Date range
+type: snippet
+language: python
+tags: [date]
+cover: maple-leaf-palette
+dateModified: 2021-01-07T23:30:28+02:00
+---
+
+Creates a list of dates between `start` (inclusive) and `end` (not inclusive).
+
+- Use  `datetime.timedelta.days` to get the days between `start` and `end`.
+- Use `int()` to convert the result to an integer and `range()` to iterate over each day.
+- Use a list comprehension and `datetime.timedelta` to create a list of `datetime.date` objects.
+
+```py
+from datetime import timedelta, date
+
+def daterange(start, end):
+  return [start + timedelta(n) for n in range(int((end - start).days))]
+```
+
+```py
+from datetime import date
+
+daterange(date(2020, 10, 1), date(2020, 10, 5))
+# [date(2020, 10, 1), date(2020, 10, 2), date(2020, 10, 3), date(2020, 10, 4)]
+```
diff --git a/snippets/python/s/days-ago.md b/snippets/python/s/days-ago.md
new file mode 100644
index 000000000..3cd9c719f
--- /dev/null
+++ b/snippets/python/s/days-ago.md
@@ -0,0 +1,24 @@
+---
+title: Days ago
+type: snippet
+language: python
+tags: [date]
+cover: cup-of-orange
+dateModified: 2020-10-28T16:19:30+02:00
+---
+
+Calculates the date of `n` days ago from today.
+
+- Use `datetime.date.today()` to get the current day.
+- Use `datetime.timedelta` to subtract `n` days from today's date.
+
+```py
+from datetime import timedelta, date
+
+def days_ago(n):
+  return date.today() - timedelta(n)
+```
+
+```py
+days_ago(5) # date(2020, 10, 23)
+```
diff --git a/snippets/python/s/days-diff.md b/snippets/python/s/days-diff.md
new file mode 100644
index 000000000..4aa4cbcd0
--- /dev/null
+++ b/snippets/python/s/days-diff.md
@@ -0,0 +1,23 @@
+---
+title: Date difference in days
+type: snippet
+language: python
+tags: [date]
+cover: succulent-9
+dateModified: 2020-10-28T16:19:39+02:00
+---
+
+Calculates the day difference between two dates.
+
+- Subtract `start` from `end` and use `datetime.timedelta.days` to get the day difference.
+
+```py
+def days_diff(start, end):
+  return (end - start).days
+```
+
+```py
+from datetime import date
+
+days_diff(date(2020, 10, 25), date(2020, 10, 28)) # 3
+```
diff --git a/snippets/python/s/days-from-now.md b/snippets/python/s/days-from-now.md
new file mode 100644
index 000000000..874876818
--- /dev/null
+++ b/snippets/python/s/days-from-now.md
@@ -0,0 +1,24 @@
+---
+title: Days from now
+type: snippet
+language: python
+tags: [date]
+cover: clutter
+dateModified: 2020-10-28T16:19:51+02:00
+---
+
+Calculates the date of `n` days from today.
+
+- Use `datetime.date.today()` to get the current day.
+- Use `datetime.timedelta` to add `n` days from today's date.
+
+```py
+from datetime import timedelta, date
+
+def days_from_now(n):
+  return date.today() + timedelta(n)
+```
+
+```py
+days_from_now(5) # date(2020, 11, 02)
+```
diff --git a/snippets/python/s/decapitalize.md b/snippets/python/s/decapitalize.md
new file mode 100644
index 000000000..231627080
--- /dev/null
+++ b/snippets/python/s/decapitalize.md
@@ -0,0 +1,24 @@
+---
+title: Decapitalize string
+type: snippet
+language: python
+tags: [string]
+cover: succulent-crowd
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Decapitalizes the first letter of a string.
+
+- Use list slicing and `str.lower()` to decapitalize the first letter of the string.
+- Use `str.join()` to combine the lowercase first letter with the rest of the characters.
+- Omit the `upper_rest` parameter to keep the rest of the string intact, or set it to `True` to convert to uppercase.
+
+```py
+def decapitalize(s, upper_rest = False):
+  return ''.join([s[:1].lower(), (s[1:].upper() if upper_rest else s[1:])])
+```
+
+```py
+decapitalize('FooBar') # 'fooBar'
+decapitalize('FooBar', True) # 'fOOBAR'
+```
diff --git a/snippets/python/s/deep-flatten.md b/snippets/python/s/deep-flatten.md
new file mode 100644
index 000000000..78b1f3c4b
--- /dev/null
+++ b/snippets/python/s/deep-flatten.md
@@ -0,0 +1,26 @@
+---
+title: Deep flatten list
+type: snippet
+language: python
+tags: [list,recursion]
+cover: mask-quiet
+dateModified: 2020-12-29T19:53:45+02:00
+---
+
+Deep flattens a list.
+
+- Use recursion.
+- Use `isinstance()` with `collections.abc.Iterable` to check if an element is iterable.
+- If it is iterable, apply `deep_flatten()` recursively, otherwise return `[lst]`.
+
+```py
+from collections.abc import Iterable
+
+def deep_flatten(lst):
+  return ([a for i in lst for a in
+          deep_flatten(i)] if isinstance(lst, Iterable) else [lst])
+```
+
+```py
+deep_flatten([1, [2], [[3], 4], 5]) # [1, 2, 3, 4, 5]
+```
diff --git a/snippets/python/s/degrees-to-rads.md b/snippets/python/s/degrees-to-rads.md
new file mode 100644
index 000000000..95e25dd18
--- /dev/null
+++ b/snippets/python/s/degrees-to-rads.md
@@ -0,0 +1,23 @@
+---
+title: Degrees to radians
+type: snippet
+language: python
+tags: [math]
+cover: digital-nomad-6
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Converts an angle from degrees to radians.
+
+- Use `math.pi` and the degrees to radians formula to convert the angle from degrees to radians.
+
+```py
+from math import pi
+
+def degrees_to_rads(deg):
+  return (deg * pi) / 180.0
+```
+
+```py
+degrees_to_rads(180) # ~3.1416
+```
diff --git a/snippets/python/s/delay.md b/snippets/python/s/delay.md
new file mode 100644
index 000000000..0b985f46b
--- /dev/null
+++ b/snippets/python/s/delay.md
@@ -0,0 +1,24 @@
+---
+title: Delayed function execution
+type: snippet
+language: python
+tags: [function]
+cover: succulent-10
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Invokes the provided function after `ms` milliseconds.
+
+- Use `time.sleep()` to delay the execution of `fn` by `ms / 1000` seconds.
+
+```py
+from time import sleep
+
+def delay(fn, ms, *args):
+  sleep(ms / 1000)
+  return fn(*args)
+```
+
+```py
+delay(lambda x: print(x), 1000, 'later') # prints 'later' after one second
+```
diff --git a/snippets/python/s/dict-to-list.md b/snippets/python/s/dict-to-list.md
new file mode 100644
index 000000000..7d6d0b8e1
--- /dev/null
+++ b/snippets/python/s/dict-to-list.md
@@ -0,0 +1,23 @@
+---
+title: Dictionary to list
+type: snippet
+language: python
+tags: [dictionary,list]
+cover: new-york
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Converts a dictionary to a list of tuples.
+
+- Use `dict.items()` and `list()` to get a list of tuples from the given dictionary.
+
+```py
+def dict_to_list(d):
+  return list(d.items())
+```
+
+```py
+d = {'one': 1, 'three': 3, 'five': 5, 'two': 2, 'four': 4}
+dict_to_list(d)
+# [('one', 1), ('three', 3), ('five', 5), ('two', 2), ('four', 4)]
+```
diff --git a/snippets/python/s/difference-by.md b/snippets/python/s/difference-by.md
new file mode 100644
index 000000000..26430f8e8
--- /dev/null
+++ b/snippets/python/s/difference-by.md
@@ -0,0 +1,27 @@
+---
+title: List difference based on function
+type: snippet
+language: python
+tags: [list,function]
+cover: coconuts
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Returns the difference between two lists, after applying the provided function to each list element of both.
+
+- Create a `set`, using `map()` to apply `fn` to each element in `b`.
+- Use a list comprehension in combination with `fn` on `a` to only keep values not contained in the previously created set, `_b`.
+
+```py
+def difference_by(a, b, fn):
+  _b = set(map(fn, b))
+  return [item for item in a if fn(item) not in _b]
+```
+
+```py
+from math import floor
+
+difference_by([2.1, 1.2], [2.3, 3.4], floor) # [1.2]
+difference_by([{ 'x': 2 }, { 'x': 1 }], [{ 'x': 1 }], lambda v : v['x'])
+# [ { x: 2 } ]
+```
diff --git a/snippets/python/s/difference.md b/snippets/python/s/difference.md
new file mode 100644
index 000000000..90625f77e
--- /dev/null
+++ b/snippets/python/s/difference.md
@@ -0,0 +1,23 @@
+---
+title: List difference
+type: snippet
+language: python
+tags: [list]
+cover: frog-blue-flower
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Calculates the difference between two iterables, without filtering duplicate values.
+
+- Create a `set` from `b`.
+- Use a list comprehension on `a` to only keep values not contained in the previously created set, `_b`.
+
+```py
+def difference(a, b):
+  _b = set(b)
+  return [item for item in a if item not in _b]
+```
+
+```py
+difference([1, 2, 3], [1, 2, 4]) # [3]
+```
diff --git a/snippets/python/s/digitize.md b/snippets/python/s/digitize.md
new file mode 100644
index 000000000..f8c876e23
--- /dev/null
+++ b/snippets/python/s/digitize.md
@@ -0,0 +1,21 @@
+---
+title: Digitize number
+type: snippet
+language: python
+tags: [math,list]
+cover: laptop-with-code
+dateModified: 2020-09-15T16:13:06+03:00
+---
+
+Converts a number to a list of digits.
+
+- Use `map()` combined with `int` on the string representation of `n` and return a list from the result.
+
+```py
+def digitize(n):
+  return list(map(int, str(n)))
+```
+
+```py
+digitize(123) # [1, 2, 3]
+```
diff --git a/snippets/python/s/drop-right.md b/snippets/python/s/drop-right.md
new file mode 100644
index 000000000..c8b4650c6
--- /dev/null
+++ b/snippets/python/s/drop-right.md
@@ -0,0 +1,25 @@
+---
+title: Drop list elements from the right
+type: snippet
+language: python
+tags: [list]
+author: chalarangelo
+cover: digital-nomad-7
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Returns a list with `n` elements removed from the right.
+
+- Use slice notation to remove the specified number of elements from the right.
+- Omit the last argument, `n`, to use a default value of `1`.
+
+```py
+def drop_right(a, n = 1):
+  return a[:-n]
+```
+
+```py
+drop_right([1, 2, 3]) # [1, 2]
+drop_right([1, 2, 3], 2) # [1]
+drop_right([1, 2, 3], 42) # []
+```
diff --git a/snippets/python/s/drop.md b/snippets/python/s/drop.md
new file mode 100644
index 000000000..fda2c557c
--- /dev/null
+++ b/snippets/python/s/drop.md
@@ -0,0 +1,25 @@
+---
+title: Drop list elements from the left
+type: snippet
+language: python
+tags: [list]
+author: chalarangelo
+cover: pink-flower
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Returns a list with `n` elements removed from the left.
+
+- Use slice notation to remove the specified number of elements from the left.
+- Omit the last argument, `n`, to use a default value of `1`.
+
+```py
+def drop(a, n = 1):
+  return a[n:]
+```
+
+```py
+drop([1, 2, 3]) # [2, 3]
+drop([1, 2, 3], 2) # [3]
+drop([1, 2, 3], 42) # []
+```
diff --git a/snippets/python/s/every-nth.md b/snippets/python/s/every-nth.md
new file mode 100644
index 000000000..ae4ba32a3
--- /dev/null
+++ b/snippets/python/s/every-nth.md
@@ -0,0 +1,21 @@
+---
+title: Every nth element in list
+type: snippet
+language: python
+tags: [list]
+cover: cherry-trees
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Returns every `nth` element in a list.
+
+- Use slice notation to create a new list that contains every `nth` element of the given list.
+
+```py
+def every_nth(lst, nth):
+  return lst[nth - 1::nth]
+```
+
+```py
+every_nth([1, 2, 3, 4, 5, 6], 2) # [ 2, 4, 6 ]
+```
diff --git a/snippets/python/s/every.md b/snippets/python/s/every.md
new file mode 100644
index 000000000..2fe7b3958
--- /dev/null
+++ b/snippets/python/s/every.md
@@ -0,0 +1,22 @@
+---
+title: Test if every list element is truthy
+type: snippet
+language: python
+tags: [list]
+cover: walking
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Checks if the provided function returns `True` for every element in the list.
+
+- Use `all()` in combination with `map()` and `fn` to check if `fn` returns `True` for all elements in the list.
+
+```py
+def every(lst, fn = lambda x: x):
+  return all(map(fn, lst))
+```
+
+```py
+every([4, 2, 3], lambda x: x > 1) # True
+every([1, 2, 3]) # True
+```
diff --git a/snippets/python/s/factorial.md b/snippets/python/s/factorial.md
new file mode 100644
index 000000000..6193a0d58
--- /dev/null
+++ b/snippets/python/s/factorial.md
@@ -0,0 +1,26 @@
+---
+title: Factorial
+type: snippet
+language: python
+tags: [math,recursion]
+cover: succulent-11
+dateModified: 2020-09-15T16:13:06+03:00
+---
+
+Calculates the factorial of a number.
+
+- Use recursion.
+- If `num` is less than or equal to `1`, return `1`.
+- Otherwise, return the product of `num` and the factorial of `num - 1`.
+- Throws an exception if `num` is a negative or a floating point number.
+
+```py
+def factorial(num):
+  if not ((num >= 0) and (num % 1 == 0)):
+    raise Exception("Number can't be floating point or negative.")
+  return 1 if num == 0 else num * factorial(num - 1)
+```
+
+```py
+factorial(6) # 720
+```
diff --git a/snippets/python/s/fahrenheit-to-celsius.md b/snippets/python/s/fahrenheit-to-celsius.md
new file mode 100644
index 000000000..ce82aa5cf
--- /dev/null
+++ b/snippets/python/s/fahrenheit-to-celsius.md
@@ -0,0 +1,22 @@
+---
+title: Fahrenheit to Celsius
+type: snippet
+language: python
+tags: [math]
+unlisted: true
+cover: last-light
+dateModified: 2021-01-04T12:47:04+02:00
+---
+
+Converts Fahrenheit to Celsius.
+
+- Follow the conversion formula `C = (F - 32) * 5 / 9`.
+
+```py
+def fahrenheit_to_celsius(degrees):
+  return ((degrees - 32) * 5 / 9)
+```
+
+```py
+fahrenheit_to_celsius(77) # 25.0
+```
diff --git a/snippets/python/s/fibonacci.md b/snippets/python/s/fibonacci.md
new file mode 100644
index 000000000..4a238decb
--- /dev/null
+++ b/snippets/python/s/fibonacci.md
@@ -0,0 +1,28 @@
+---
+title: Fibonacci
+type: snippet
+language: python
+tags: [math,list]
+cover: san-francisco-skyline
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Generates a list, containing the Fibonacci sequence, up until the nth term.
+
+- Starting with `0` and `1`, use `list.append()` to add the sum of the last two numbers of the list to the end of the list, until the length of the list reaches `n`.
+- If `n` is less or equal to `0`, return a list containing `0`.
+
+```py
+def fibonacci(n):
+  if n <= 0:
+    return [0]
+  sequence = [0, 1]
+  while len(sequence) <= n:
+    next_value = sequence[len(sequence) - 1] + sequence[len(sequence) - 2]
+    sequence.append(next_value)
+  return sequence
+```
+
+```py
+fibonacci(7) # [0, 1, 1, 2, 3, 5, 8, 13]
+```
diff --git a/snippets/python/s/filter-non-unique.md b/snippets/python/s/filter-non-unique.md
new file mode 100644
index 000000000..ecb6077d6
--- /dev/null
+++ b/snippets/python/s/filter-non-unique.md
@@ -0,0 +1,24 @@
+---
+title: Filter non-unique list values
+type: snippet
+language: python
+tags: [list]
+cover: cobbled-street
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Creates a list with the non-unique values filtered out.
+
+- Use `collections.Counter` to get the count of each value in the list.
+- Use a list comprehension to create a list containing only the unique values.
+
+```py
+from collections import Counter
+
+def filter_non_unique(lst):
+  return [item for item, count in Counter(lst).items() if count == 1]
+```
+
+```py
+filter_non_unique([1, 2, 2, 3, 4, 4, 5]) # [1, 3, 5]
+```
diff --git a/snippets/python/s/filter-unique.md b/snippets/python/s/filter-unique.md
new file mode 100644
index 000000000..7e4b75578
--- /dev/null
+++ b/snippets/python/s/filter-unique.md
@@ -0,0 +1,24 @@
+---
+title: Filter unique list values
+type: snippet
+language: python
+tags: [list]
+cover: feathers
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Creates a list with the unique values filtered out.
+
+- Use `collections.Counter` to get the count of each value in the list.
+- Use a list comprehension to create a list containing only the non-unique values.
+
+```py
+from collections import Counter
+
+def filter_unique(lst):
+  return [item for item, count in Counter(lst).items() if count > 1]
+```
+
+```py
+filter_unique([1, 2, 2, 3, 4, 4, 5]) # [2, 4]
+```
diff --git a/snippets/python/s/find-index-of-all.md b/snippets/python/s/find-index-of-all.md
new file mode 100644
index 000000000..371ad7a42
--- /dev/null
+++ b/snippets/python/s/find-index-of-all.md
@@ -0,0 +1,21 @@
+---
+title: Find all matching indexes
+type: snippet
+language: python
+tags: [list]
+cover: tree-roots
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Finds the indexes of all elements in the given list that satisfy the provided testing function.
+
+- Use `enumerate()` and a list comprehension to return the indexes of the all element in `lst` for which `fn` returns `True`.
+
+```py
+def find_index_of_all(lst, fn):
+  return [i for i, x in enumerate(lst) if fn(x)]
+```
+
+```py
+find_index_of_all([1, 2, 3, 4], lambda n: n % 2 == 1) # [0, 2]
+```
diff --git a/snippets/python/s/find-index.md b/snippets/python/s/find-index.md
new file mode 100644
index 000000000..ea1a580da
--- /dev/null
+++ b/snippets/python/s/find-index.md
@@ -0,0 +1,21 @@
+---
+title: Find matching index
+type: snippet
+language: python
+tags: [list]
+cover: book-chair
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Finds the index of the first element in the given list that satisfies the provided testing function.
+
+- Use a list comprehension, `enumerate()` and `next()` to return the index of the first element in `lst` for which `fn` returns `True`.
+
+```py
+def find_index(lst, fn):
+  return next(i for i, x in enumerate(lst) if fn(x))
+```
+
+```py
+find_index([1, 2, 3, 4], lambda n: n % 2 == 1) # 0
+```
diff --git a/snippets/python/s/find-key.md b/snippets/python/s/find-key.md
new file mode 100644
index 000000000..70d790427
--- /dev/null
+++ b/snippets/python/s/find-key.md
@@ -0,0 +1,26 @@
+---
+title: Find key of value
+type: snippet
+language: python
+tags: [dictionary]
+cover: blue-red-mountain
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Finds the first key in the provided dictionary that has the given value.
+
+- Use `dictionary.items()` and `next()` to return the first key that has a value equal to `val`.
+
+```py
+def find_key(dict, val):
+  return next(key for key, value in dict.items() if value == val)
+```
+
+```py
+ages = {
+  'Peter': 10,
+  'Isabel': 11,
+  'Anna': 9,
+}
+find_key(ages, 11) # 'Isabel'
+```
diff --git a/snippets/python/s/find-keys.md b/snippets/python/s/find-keys.md
new file mode 100644
index 000000000..ccd21460e
--- /dev/null
+++ b/snippets/python/s/find-keys.md
@@ -0,0 +1,26 @@
+---
+title: Find keys with value
+type: snippet
+language: python
+tags: [dictionary]
+cover: laptop-plants-2
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Finds all keys in the provided dictionary that have the given value.
+
+- Use `dictionary.items()`, a generator and `list()` to return all keys that have a value equal to `val`.
+
+```py
+def find_keys(dict, val):
+  return list(key for key, value in dict.items() if value == val)
+```
+
+```py
+ages = {
+  'Peter': 10,
+  'Isabel': 11,
+  'Anna': 10,
+}
+find_keys(ages, 10) # [ 'Peter', 'Anna' ]
+```
diff --git a/snippets/python/s/find-last-index.md b/snippets/python/s/find-last-index.md
new file mode 100644
index 000000000..acb509ab0
--- /dev/null
+++ b/snippets/python/s/find-last-index.md
@@ -0,0 +1,21 @@
+---
+title: Find last matching index
+type: snippet
+language: python
+tags: [list]
+cover: succulent-8
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Finds the index of the last element in the given list that satisfies the provided testing function.
+
+- Use a list comprehension, `enumerate()` and `next()` to return the index of the last element in `lst` for which `fn` returns `True`.
+
+```py
+def find_last_index(lst, fn):
+  return len(lst) - 1 - next(i for i, x in enumerate(lst[::-1]) if fn(x))
+```
+
+```py
+find_last_index([1, 2, 3, 4], lambda n: n % 2 == 1) # 2
+```
diff --git a/snippets/python/s/find-last.md b/snippets/python/s/find-last.md
new file mode 100644
index 000000000..92c91b267
--- /dev/null
+++ b/snippets/python/s/find-last.md
@@ -0,0 +1,21 @@
+---
+title: Find last matching value
+type: snippet
+language: python
+tags: [list]
+cover: tropical-waterfall
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Finds the value of the last element in the given list that satisfies the provided testing function.
+
+- Use a list comprehension and `next()` to return the last element in `lst` for which `fn` returns `True`.
+
+```py
+def find_last(lst, fn):
+  return next(x for x in lst[::-1] if fn(x))
+```
+
+```py
+find_last([1, 2, 3, 4], lambda n: n % 2 == 1) # 3
+```
diff --git a/snippets/python/s/find-parity-outliers.md b/snippets/python/s/find-parity-outliers.md
new file mode 100644
index 000000000..491b5a68b
--- /dev/null
+++ b/snippets/python/s/find-parity-outliers.md
@@ -0,0 +1,28 @@
+---
+title: Find parity outliers
+type: snippet
+language: python
+tags: [list,math]
+cover: beach-pineapple
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Finds the items that are parity outliers in a given list.
+
+- Use `collections.Counter` with a list comprehension to count even and odd values in the list.
+- Use `collections.Counter.most_common()` to get the most common parity.
+- Use a list comprehension to find all elements that do not match the most common parity.
+
+```py
+from collections import Counter
+
+def find_parity_outliers(nums):
+  return [
+    x for x in nums
+    if x % 2 != Counter([n % 2 for n in nums]).most_common()[0][0]
+  ]
+```
+
+```py
+find_parity_outliers([1, 2, 3, 4, 6]) # [1, 3]
+```
diff --git a/snippets/python/s/find.md b/snippets/python/s/find.md
new file mode 100644
index 000000000..042a2edde
--- /dev/null
+++ b/snippets/python/s/find.md
@@ -0,0 +1,21 @@
+---
+title: Find matching value
+type: snippet
+language: python
+tags: [list]
+cover: duck-plants
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Finds the value of the first element in the given list that satisfies the provided testing function.
+
+- Use a list comprehension and `next()` to return the first element in `lst` for which `fn` returns `True`.
+
+```py
+def find(lst, fn):
+  return next(x for x in lst if fn(x))
+```
+
+```py
+find([1, 2, 3, 4], lambda n: n % 2 == 1) # 1
+```
diff --git a/snippets/python/s/flatten.md b/snippets/python/s/flatten.md
new file mode 100644
index 000000000..6b4f407a9
--- /dev/null
+++ b/snippets/python/s/flatten.md
@@ -0,0 +1,21 @@
+---
+title: Flatten list
+type: snippet
+language: python
+tags: [list]
+cover: jars-on-shelf
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Flattens a list of lists once.
+
+- Use a list comprehension to extract each value from sub-lists in order.
+
+```py
+def flatten(lst):
+  return [x for y in lst for x in y]
+```
+
+```py
+flatten([[1, 2, 3, 4], [5, 6, 7, 8]]) # [1, 2, 3, 4, 5, 6, 7, 8]
+```
diff --git a/snippets/python/s/for-each-right.md b/snippets/python/s/for-each-right.md
new file mode 100644
index 000000000..1dadc4d8f
--- /dev/null
+++ b/snippets/python/s/for-each-right.md
@@ -0,0 +1,22 @@
+---
+title: Execute function for each list element in reverse
+type: snippet
+language: python
+tags: [list]
+cover: bridge-drop
+dateModified: 2020-09-15T16:13:06+03:00
+---
+
+Executes the provided function once for each list element, starting from the list's last element.
+
+- Use a `for` loop in combination with slice notation to execute `fn` for each element in `itr`, starting from the last one.
+
+```py
+def for_each_right(itr, fn):
+  for el in itr[::-1]:
+    fn(el)
+```
+
+```py
+for_each_right([1, 2, 3], print) # 3 2 1
+```
diff --git a/snippets/python/s/for-each.md b/snippets/python/s/for-each.md
new file mode 100644
index 000000000..97a31d6d8
--- /dev/null
+++ b/snippets/python/s/for-each.md
@@ -0,0 +1,22 @@
+---
+title: Execute function for each list element
+type: snippet
+language: python
+tags: [list]
+cover: green-plant
+dateModified: 2020-09-15T16:13:06+03:00
+---
+
+Executes the provided function once for each list element.
+
+- Use a `for` loop to execute `fn` for each element in `itr`.
+
+```py
+def for_each(itr, fn):
+  for el in itr:
+    fn(el)
+```
+
+```py
+for_each([1, 2, 3], print) # 1 2 3
+```
diff --git a/snippets/python/s/frequencies.md b/snippets/python/s/frequencies.md
new file mode 100644
index 000000000..e8ce1945c
--- /dev/null
+++ b/snippets/python/s/frequencies.md
@@ -0,0 +1,27 @@
+---
+title: Value frequencies
+type: snippet
+language: python
+tags: [list]
+cover: succulent-6
+dateModified: 2020-11-02T19:27:53+02:00
+---
+
+Creates a dictionary with the unique values of a list as keys and their frequencies as the values.
+
+- Use `collections.defaultdict` to store the frequencies of each unique element.
+- Use `dict()` to return a dictionary with the unique elements of the list as keys and their frequencies as the values.
+
+```py
+from collections import defaultdict
+
+def frequencies(lst):
+  freq = defaultdict(int)
+  for val in lst:
+    freq[val] += 1
+  return dict(freq)
+```
+
+```py
+frequencies(['a', 'b', 'a', 'c', 'a', 'a', 'b']) # { 'a': 4, 'b': 2, 'c': 1 }
+```
diff --git a/snippets/python/s/from-iso-date.md b/snippets/python/s/from-iso-date.md
new file mode 100644
index 000000000..44abf36b4
--- /dev/null
+++ b/snippets/python/s/from-iso-date.md
@@ -0,0 +1,23 @@
+---
+title: Date from ISO format
+type: snippet
+language: python
+tags: [date]
+cover: purple-leaves
+dateModified: 2021-01-07T23:30:28+02:00
+---
+
+Converts a date from its ISO-8601 representation.
+
+- Use `datetime.datetime.fromisoformat()` to convert the given ISO-8601 date to a `datetime.datetime` object.
+
+```py
+from datetime import datetime
+
+def from_iso_date(d):
+  return datetime.fromisoformat(d)
+```
+
+```py
+from_iso_date('2020-10-28T12:30:59.000000') # 2020-10-28 12:30:59
+```
diff --git a/snippets/python/s/gcd.md b/snippets/python/s/gcd.md
new file mode 100644
index 000000000..7ce39e73d
--- /dev/null
+++ b/snippets/python/s/gcd.md
@@ -0,0 +1,24 @@
+---
+title: Greatest common divisor
+type: snippet
+language: python
+tags: [math]
+cover: digital-nomad-12
+dateModified: 2020-09-15T16:13:06+03:00
+---
+
+Calculates the greatest common divisor of a list of numbers.
+
+- Use `functools.reduce()` and `math.gcd()` over the given list.
+
+```py
+from functools import reduce
+from math import gcd as _gcd
+
+def gcd(numbers):
+  return reduce(_gcd, numbers)
+```
+
+```py
+gcd([8, 36, 28]) # 4
+```
diff --git a/snippets/python/s/geometric-progression.md b/snippets/python/s/geometric-progression.md
new file mode 100644
index 000000000..7d35ce5bc
--- /dev/null
+++ b/snippets/python/s/geometric-progression.md
@@ -0,0 +1,30 @@
+---
+title: Geometric progression
+type: snippet
+language: python
+tags: [math,list]
+cover: kettle-laptop
+excerpt: Initializes a list containing the numbers in the specified geometric progression range.
+dateModified: 2020-11-02T19:28:05+02:00
+---
+
+Initializes a list containing the numbers in the specified range where `start` and `end` are inclusive and the ratio between two terms is `step`.
+
+- Use `range()`, `math.log()` and `math.floor()` and a list comprehension to create a list of the appropriate length, applying the step for each element.
+- Returns an error if `step` equals `1`.
+- Omit the second argument, `start`, to use a default value of `1`.
+- Omit the third argument, `step`, to use a default value of `2`.
+
+```py
+from math import floor, log
+
+def geometric_progression(end, start=1, step=2):
+  return [start * step ** i for i in range(floor(log(end / start)
+          / log(step)) + 1)]
+```
+
+```py
+geometric_progression(256) # [1, 2, 4, 8, 16, 32, 64, 128, 256]
+geometric_progression(256, 3) # [3, 6, 12, 24, 48, 96, 192]
+geometric_progression(256, 1, 4) # [1, 4, 16, 64, 256]
+```
diff --git a/snippets/python/s/get.md b/snippets/python/s/get.md
new file mode 100644
index 000000000..2ee3a7a07
--- /dev/null
+++ b/snippets/python/s/get.md
@@ -0,0 +1,35 @@
+---
+title: Get nested value
+type: snippet
+language: python
+tags: [dictionary,list]
+cover: digital-nomad-2
+dateModified: 2020-10-28T12:21:39+02:00
+---
+
+Retrieves the value of the nested key indicated by the given selector list from a dictionary or list.
+
+- Use `functools.reduce()` to iterate over the `selectors` list.
+- Apply `operator.getitem()` for each key in `selectors`, retrieving the value to be used as the iteratee for the next iteration.
+
+```py
+from functools import reduce
+from operator import getitem
+
+def get(d, selectors):
+  return reduce(getitem, selectors, d)
+```
+
+```py
+users = {
+  'freddy': {
+    'name': {
+      'first': 'fred',
+      'last': 'smith'
+    },
+    'postIds': [1, 2, 3]
+  }
+}
+get(users, ['freddy', 'name', 'last']) # 'smith'
+get(users, ['freddy', 'postIds', 1]) # 2
+```
diff --git a/snippets/python/s/group-by.md b/snippets/python/s/group-by.md
new file mode 100644
index 000000000..b71b7d04c
--- /dev/null
+++ b/snippets/python/s/group-by.md
@@ -0,0 +1,31 @@
+---
+title: Group list elements
+type: snippet
+language: python
+tags: [list,dictionary]
+cover: body-of-water
+dateModified: 2020-11-02T19:28:05+02:00
+---
+
+Groups the elements of a list based on the given function.
+
+- Use `collections.defaultdict` to initialize a dictionary.
+- Use `fn` in combination with a `for` loop and `dict.append()` to populate the dictionary.
+- Use `dict()` to convert it to a regular dictionary.
+
+```py
+from collections import defaultdict
+
+def group_by(lst, fn):
+  d = defaultdict(list)
+  for el in lst:
+    d[fn(el)].append(el)
+  return dict(d)
+```
+
+```py
+from math import floor
+
+group_by([6.1, 4.2, 6.3], floor) # {4: [4.2], 6: [6.1, 6.3]}
+group_by(['one', 'two', 'three'], len) # {3: ['one', 'two'], 5: ['three']}
+```
diff --git a/snippets/python/s/hamming-distance.md b/snippets/python/s/hamming-distance.md
new file mode 100644
index 000000000..c26da9854
--- /dev/null
+++ b/snippets/python/s/hamming-distance.md
@@ -0,0 +1,23 @@
+---
+title: Hamming distance
+type: snippet
+language: python
+tags: [math]
+cover: tulips-and-reeds
+dateModified: 2021-02-18T14:22:25+02:00
+---
+
+Calculates the Hamming distance between two values.
+
+- Use the XOR operator (`^`) to find the bit difference between the two numbers.
+- Use `bin()` to convert the result to a binary string.
+- Convert the string to a list and use `count()` of `str` class to count and return the number of `1`s in it.
+
+```py
+def hamming_distance(a, b):
+  return bin(a ^ b).count('1')
+```
+
+```py
+hamming_distance(2, 3) # 1
+```
diff --git a/snippets/python/s/has-duplicates.md b/snippets/python/s/has-duplicates.md
new file mode 100644
index 000000000..866742e9d
--- /dev/null
+++ b/snippets/python/s/has-duplicates.md
@@ -0,0 +1,24 @@
+---
+title: Check for duplicates in list
+type: snippet
+language: python
+tags: [list]
+cover: jars-on-shelf-2
+dateModified: 2020-11-02T19:28:05+02:00
+---
+
+Checks if there are duplicate values in a flat list.
+
+- Use `set()` on the given list to remove duplicates, compare its length with the length of the list.
+
+```py
+def has_duplicates(lst):
+  return len(lst) != len(set(lst))
+```
+
+```py
+x = [1, 2, 3, 4, 5, 5]
+y = [1, 2, 3, 4, 5]
+has_duplicates(x) # True
+has_duplicates(y) # False
+```
diff --git a/snippets/python/s/have-same-contents.md b/snippets/python/s/have-same-contents.md
new file mode 100644
index 000000000..da035757a
--- /dev/null
+++ b/snippets/python/s/have-same-contents.md
@@ -0,0 +1,26 @@
+---
+title: Check lists have same contents
+type: snippet
+language: python
+tags: [list]
+cover: racoon
+dateModified: 2020-11-02T19:28:05+02:00
+---
+
+Checks if two lists contain the same elements regardless of order.
+
+- Use `set()` on the combination of both lists to find the unique values.
+- Iterate over them with a `for` loop comparing the `count()` of each unique value in each list.
+- Return `False` if the counts do not match for any element, `True` otherwise.
+
+```py
+def have_same_contents(a, b):
+  for v in set(a + b):
+    if a.count(v) != b.count(v):
+      return False
+  return True
+```
+
+```py
+have_same_contents([1, 2, 4], [2, 4, 1]) # True
+```
diff --git a/snippets/python/s/head.md b/snippets/python/s/head.md
new file mode 100644
index 000000000..97630d8d0
--- /dev/null
+++ b/snippets/python/s/head.md
@@ -0,0 +1,21 @@
+---
+title: List head
+type: snippet
+language: python
+tags: [list]
+cover: purple-laptop
+dateModified: 2020-09-15T16:13:06+03:00
+---
+
+Returns the head of a list.
+
+- Use `lst[0]` to return the first element of the passed list.
+
+```py
+def head(lst):
+  return lst[0]
+```
+
+```py
+head([1, 2, 3]) # 1
+```
diff --git a/snippets/python/s/hex-to-rgb.md b/snippets/python/s/hex-to-rgb.md
new file mode 100644
index 000000000..00fc90f4b
--- /dev/null
+++ b/snippets/python/s/hex-to-rgb.md
@@ -0,0 +1,22 @@
+---
+title: Hex to RGB
+type: snippet
+language: python
+tags: [string,math]
+cover: sleepy-cat
+dateModified: 2020-09-15T16:13:06+03:00
+---
+
+Converts a hexadecimal color code to a tuple of integers corresponding to its RGB components.
+
+- Use a list comprehension in combination with `int()` and list slice notation to get the RGB components from the hexadecimal string.
+- Use `tuple()` to convert the resulting list to a tuple.
+
+```py
+def hex_to_rgb(hex):
+  return tuple(int(hex[i:i+2], 16) for i in (0, 2, 4))
+```
+
+```py
+hex_to_rgb('FFA501') # (255, 165, 1)
+```
diff --git a/snippets/python/s/in-range.md b/snippets/python/s/in-range.md
new file mode 100644
index 000000000..1a4060c09
--- /dev/null
+++ b/snippets/python/s/in-range.md
@@ -0,0 +1,25 @@
+---
+title: Number in range
+type: snippet
+language: python
+tags: [math]
+cover: pineapple-on-green
+dateModified: 2020-09-15T16:13:06+03:00
+---
+
+Checks if the given number falls within the given range.
+
+- Use arithmetic comparison to check if the given number is in the specified range.
+- If the second parameter, `end`, is not specified, the range is considered to be from `0` to `start`.
+
+```py
+def in_range(n, start, end = 0):
+  return start <= n <= end if end >= start else end <= n <= start
+```
+
+```py
+in_range(3, 2, 5) # True
+in_range(3, 4) # True
+in_range(2, 3, 5) # False
+in_range(3, 2) # False
+```
diff --git a/snippets/python/s/includes-all.md b/snippets/python/s/includes-all.md
new file mode 100644
index 000000000..ab22c8cdf
--- /dev/null
+++ b/snippets/python/s/includes-all.md
@@ -0,0 +1,26 @@
+---
+title: List includes all values
+type: snippet
+language: python
+tags: [list]
+cover: switzerland-night
+dateModified: 2020-11-02T19:28:05+02:00
+---
+
+Checks if all the elements in `values` are included in `lst`.
+
+- Check if every value in `values` is contained in `lst` using a `for` loop.
+- Return `False` if any one value is not found, `True` otherwise.
+
+```py
+def includes_all(lst, values):
+  for v in values:
+    if v not in lst:
+      return False
+  return True
+```
+
+```py
+includes_all([1, 2, 3, 4], [1, 4]) # True
+includes_all([1, 2, 3, 4], [1, 5]) # False
+```
diff --git a/snippets/python/s/includes-any.md b/snippets/python/s/includes-any.md
new file mode 100644
index 000000000..8b889bf11
--- /dev/null
+++ b/snippets/python/s/includes-any.md
@@ -0,0 +1,26 @@
+---
+title: List includes any values
+type: snippet
+language: python
+tags: [list]
+cover: forest-balcony
+dateModified: 2020-11-02T19:28:05+02:00
+---
+
+Checks if any element in `values` is included in `lst`.
+
+- Check if any value in `values` is contained in `lst` using a `for` loop.
+- Return `True` if any one value is found, `False` otherwise.
+
+```py
+def includes_any(lst, values):
+  for v in values:
+    if v in lst:
+      return True
+  return False
+```
+
+```py
+includes_any([1, 2, 3, 4], [2, 9]) # True
+includes_any([1, 2, 3, 4], [8, 9]) # False
+```
diff --git a/snippets/python/s/index-of-all.md b/snippets/python/s/index-of-all.md
new file mode 100644
index 000000000..2fd55fc3e
--- /dev/null
+++ b/snippets/python/s/index-of-all.md
@@ -0,0 +1,22 @@
+---
+title: All indexes of value
+type: snippet
+language: python
+tags: [list]
+cover: purple-flower-bunch
+dateModified: 2020-10-11T13:45:19+03:00
+---
+
+Returns a list of indexes of all the occurrences of an element in a list.
+
+- Use `enumerate()` and a list comprehension to check each element for equality with `value` and adding `i` to the result.
+
+```py
+def index_of_all(lst, value):
+  return [i for i, x in enumerate(lst) if x == value]
+```
+
+```py
+index_of_all([1, 2, 1, 4, 5, 1], 1) # [0, 2, 5]
+index_of_all([1, 2, 3, 4], 6) # []
+```
diff --git a/snippets/python/s/initial.md b/snippets/python/s/initial.md
new file mode 100644
index 000000000..e5a18095f
--- /dev/null
+++ b/snippets/python/s/initial.md
@@ -0,0 +1,21 @@
+---
+title: List without last element
+type: snippet
+language: python
+tags: [list]
+cover: pop-of-green
+dateModified: 2020-11-02T19:28:05+02:00
+---
+
+Returns all the elements of a list except the last one.
+
+- Use `lst[:-1]` to return all but the last element of the list.
+
+```py
+def initial(lst):
+  return lst[:-1]
+```
+
+```py
+initial([1, 2, 3]) # [1, 2]
+```
diff --git a/snippets/python/s/initialize-2-d-list.md b/snippets/python/s/initialize-2-d-list.md
new file mode 100644
index 000000000..a0b3f42d9
--- /dev/null
+++ b/snippets/python/s/initialize-2-d-list.md
@@ -0,0 +1,22 @@
+---
+title: Initialize 2D list
+type: snippet
+language: python
+tags: [list]
+cover: succulent-7
+dateModified: 2020-11-02T19:28:05+02:00
+---
+
+Initializes a 2D list of given width and height and value.
+
+- Use a list comprehension and `range()` to generate `h` rows where each is a list with length `h`, initialized with `val`.
+- Omit the last argument, `val`, to set the default value to `None`.
+
+```py
+def initialize_2d_list(w, h, val = None):
+  return [[val for x in range(w)] for y in range(h)]
+```
+
+```py
+initialize_2d_list(2, 2, 0) # [[0, 0], [0, 0]]
+```
diff --git a/snippets/python/s/initialize-list-with-range.md b/snippets/python/s/initialize-list-with-range.md
new file mode 100644
index 000000000..15ce67bc5
--- /dev/null
+++ b/snippets/python/s/initialize-list-with-range.md
@@ -0,0 +1,25 @@
+---
+title: Initialize list with range
+type: snippet
+language: python
+tags: [list]
+cover: succulent-3
+dateModified: 2020-11-02T19:28:05+02:00
+---
+
+Initializes a list containing the numbers in the specified range where `start` and `end` are inclusive with their common difference `step`.
+
+- Use `list()` and `range()` to generate a list of the appropriate length, filled with the desired values in the given range.
+- Omit `start` to use the default value of `0`.
+- Omit `step` to use the default value of `1`.
+
+```py
+def initialize_list_with_range(end, start = 0, step = 1):
+  return list(range(start, end + 1, step))
+```
+
+```py
+initialize_list_with_range(5) # [0, 1, 2, 3, 4, 5]
+initialize_list_with_range(7, 3) # [3, 4, 5, 6, 7]
+initialize_list_with_range(9, 0, 2) # [0, 2, 4, 6, 8]
+```
diff --git a/snippets/python/s/initialize-list-with-values.md b/snippets/python/s/initialize-list-with-values.md
new file mode 100644
index 000000000..7823a1677
--- /dev/null
+++ b/snippets/python/s/initialize-list-with-values.md
@@ -0,0 +1,22 @@
+---
+title: Initialize list with values
+type: snippet
+language: python
+tags: [list]
+cover: dog-waiting
+dateModified: 2020-11-02T19:28:05+02:00
+---
+
+Initializes and fills a list with the specified value.
+
+- Use a list comprehension and `range()` to generate a list of length equal to `n`, filled with the desired values.
+- Omit `val` to use the default value of `0`.
+
+```py
+def initialize_list_with_values(n, val = 0):
+  return [val for x in range(n)]
+```
+
+```py
+initialize_list_with_values(5, 2) # [2, 2, 2, 2, 2]
+```
diff --git a/snippets/python/s/intersection-by.md b/snippets/python/s/intersection-by.md
new file mode 100644
index 000000000..a470454a6
--- /dev/null
+++ b/snippets/python/s/intersection-by.md
@@ -0,0 +1,25 @@
+---
+title: List intersection based on function
+type: snippet
+language: python
+tags: [list,function]
+cover: duck-plants
+dateModified: 2020-11-02T19:28:05+02:00
+---
+
+Returns a list of elements that exist in both lists, after applying the provided function to each list element of both.
+
+- Create a `set`, using `map()` to apply `fn` to each element in `b`.
+- Use a list comprehension in combination with `fn` on `a` to only keep values contained in both lists.
+
+```py
+def intersection_by(a, b, fn):
+  _b = set(map(fn, b))
+  return [item for item in a if fn(item) in _b]
+```
+
+```py
+from math import floor
+
+intersection_by([2.1, 1.2], [2.3, 3.4], floor) # [2.1]
+```
diff --git a/snippets/python/s/intersection.md b/snippets/python/s/intersection.md
new file mode 100644
index 000000000..793fc8e5b
--- /dev/null
+++ b/snippets/python/s/intersection.md
@@ -0,0 +1,23 @@
+---
+title: List intersection
+type: snippet
+language: python
+tags: [list]
+cover: wooden-bowl
+dateModified: 2020-11-02T19:28:05+02:00
+---
+
+Returns a list of elements that exist in both lists.
+
+- Create a `set` from `a` and `b`.
+- Use the built-in set operator `&` to only keep values contained in both sets, then transform the `set` back into a `list`.
+
+```py
+def intersection(a, b):
+  _a, _b = set(a), set(b)
+  return list(_a & _b)
+```
+
+```py
+intersection([1, 2, 3], [4, 3, 2]) # [2, 3]
+```
diff --git a/snippets/python/s/invert-dictionary.md b/snippets/python/s/invert-dictionary.md
new file mode 100644
index 000000000..31176e115
--- /dev/null
+++ b/snippets/python/s/invert-dictionary.md
@@ -0,0 +1,26 @@
+---
+title: Invert dictionary
+type: snippet
+language: python
+tags: [dictionary]
+cover: rustic-cup
+dateModified: 2020-11-02T19:28:05+02:00
+---
+
+Inverts a dictionary with unique hashable values.
+
+- Use `dictionary.items()` in combination with a list comprehension to create a new dictionary with the values and keys inverted.
+
+```py
+def invert_dictionary(obj):
+  return { value: key for key, value in obj.items() }
+```
+
+```py
+ages = {
+  'Peter': 10,
+  'Isabel': 11,
+  'Anna': 9,
+}
+invert_dictionary(ages) # { 10: 'Peter', 11: 'Isabel', 9: 'Anna' }
+```
diff --git a/snippets/python/s/is-anagram.md b/snippets/python/s/is-anagram.md
new file mode 100644
index 000000000..0964f008c
--- /dev/null
+++ b/snippets/python/s/is-anagram.md
@@ -0,0 +1,28 @@
+---
+title: String is anagram
+type: snippet
+language: python
+tags: [string]
+cover: digital-nomad-8
+dateModified: 2020-11-02T19:28:05+02:00
+---
+
+Checks if a string is an anagram of another string (case-insensitive, ignores spaces, punctuation and special characters).
+
+- Use `str.isalnum()` to filter out non-alphanumeric characters, `str.lower()` to transform each character to lowercase.
+- Use `collections.Counter` to count the resulting characters for each string and compare the results.
+
+```py
+from collections import Counter
+
+def is_anagram(s1, s2):
+  return Counter(
+    c.lower() for c in s1 if c.isalnum()
+  ) == Counter(
+    c.lower() for c in s2 if c.isalnum()
+  )
+```
+
+```py
+is_anagram('#anagram', 'Nag a ram!')  # True
+```
diff --git a/snippets/python/s/is-contained-in.md b/snippets/python/s/is-contained-in.md
new file mode 100644
index 000000000..eb1da3f67
--- /dev/null
+++ b/snippets/python/s/is-contained-in.md
@@ -0,0 +1,25 @@
+---
+title: List is contained in other list
+type: snippet
+language: python
+tags: [list]
+cover: tropical-bike
+dateModified: 2021-01-07T23:30:28+02:00
+---
+
+Checks if the elements of the first list are contained in the second one regardless of order.
+
+- Use `count()` to check if any value in `a` has more occurrences than it has in `b`.
+- Return `False` if any such value is found, `True` otherwise.
+
+```py
+def is_contained_in(a, b):
+  for v in set(a):
+    if a.count(v) > b.count(v):
+      return False
+  return True
+```
+
+```py
+is_contained_in([1, 4], [2, 4, 1]) # True
+```
diff --git a/snippets/python/s/is-divisible.md b/snippets/python/s/is-divisible.md
new file mode 100644
index 000000000..869edc1ec
--- /dev/null
+++ b/snippets/python/s/is-divisible.md
@@ -0,0 +1,22 @@
+---
+title: Number is divisible
+type: snippet
+language: python
+tags: [math]
+unlisted: true
+cover: interior-9
+dateModified: 2021-01-04T12:47:04+02:00
+---
+
+Checks if the first numeric argument is divisible by the second one.
+
+- Use the modulo operator (`%`) to check if the remainder is equal to `0`.
+
+```py
+def is_divisible(dividend, divisor):
+  return dividend % divisor == 0
+```
+
+```py
+is_divisible(6, 3) # True
+```
diff --git a/snippets/python/s/is-empty.md b/snippets/python/s/is-empty.md
new file mode 100644
index 000000000..bd4c3dbad
--- /dev/null
+++ b/snippets/python/s/is-empty.md
@@ -0,0 +1,31 @@
+---
+title: Collection is empty
+type: snippet
+language: python
+tags: [list,dictionary,string]
+author: chalarangelo
+cover: salad-1
+dateModified: 2023-01-12T05:00:00-04:00
+---
+
+Checks if the a value is an empty sequence or collection.
+
+- Use `not` to test the truth value of the provided sequence or collection.
+
+```py
+def is_empty(val):
+  return not val
+```
+
+```py
+is_empty([]) # True
+is_empty({}) # True
+is_empty('') # True
+is_empty(set()) # True
+is_empty(range(0)) # True
+is_empty([1, 2]) # False
+is_empty({ 'a': 1, 'b': 2 }) # False
+is_empty('text') # False
+is_empty(set([1, 2])) # False
+is_empty(range(2)) # False
+```
diff --git a/snippets/python/s/is-even.md b/snippets/python/s/is-even.md
new file mode 100644
index 000000000..02426960f
--- /dev/null
+++ b/snippets/python/s/is-even.md
@@ -0,0 +1,23 @@
+---
+title: Number is even
+type: snippet
+language: python
+tags: [math]
+unlisted: true
+cover: interior-3
+dateModified: 2021-01-04T12:47:04+02:00
+---
+
+Checks if the given number is even.
+
+- Check whether a number is odd or even using the modulo (`%`) operator.
+- Return `True` if the number is even, `False` if the number is odd.
+
+```py
+def is_even(num):
+  return num % 2 == 0
+```
+
+```py
+is_even(3) # False
+```
diff --git a/snippets/python/s/is-odd.md b/snippets/python/s/is-odd.md
new file mode 100644
index 000000000..ee4d767b7
--- /dev/null
+++ b/snippets/python/s/is-odd.md
@@ -0,0 +1,23 @@
+---
+title: Number is odd
+type: snippet
+language: python
+tags: [math]
+unlisted: true
+cover: interior-6
+dateModified: 2021-01-04T12:47:04+02:00
+---
+
+Checks if the given number is odd.
+
+- Checks whether a number is even or odd using the modulo (`%`) operator.
+- Returns `True` if the number is odd, `False` if the number is even.
+
+```py
+def is_odd(num):
+  return num % 2 != 0
+```
+
+```py
+is_odd(3) # True
+```
diff --git a/snippets/python/s/is-prime.md b/snippets/python/s/is-prime.md
new file mode 100644
index 000000000..81255cd99
--- /dev/null
+++ b/snippets/python/s/is-prime.md
@@ -0,0 +1,27 @@
+---
+title: Number is prime
+type: snippet
+language: python
+tags: [math]
+cover: carrots
+dateModified: 2020-11-02T19:28:05+02:00
+---
+
+Checks if the provided integer is a prime number.
+
+- Return `False` if the number is `0`, `1`, a negative number or a multiple of `2`.
+- Use `all()` and `range()` to check numbers from `3` to the square root of the given number.
+- Return `True` if none divides the given number, `False` otherwise.
+
+```py
+from math import sqrt
+
+def is_prime(n):
+  if n <= 1 or (n % 2 == 0 and n > 2):
+    return False
+  return all(n % i for i in range(3, int(sqrt(n)) + 1, 2))
+```
+
+```py
+is_prime(11) # True
+```
diff --git a/snippets/python/s/is-weekday.md b/snippets/python/s/is-weekday.md
new file mode 100644
index 000000000..09fe908fc
--- /dev/null
+++ b/snippets/python/s/is-weekday.md
@@ -0,0 +1,28 @@
+---
+title: Date is weekday
+type: snippet
+language: python
+tags: [date]
+cover: succulent-4
+dateModified: 2020-11-02T19:28:05+02:00
+---
+
+Checks if the given date is a weekday.
+
+- Use `datetime.datetime.weekday()` to get the day of the week as an integer.
+- Check if the day of the week is less than or equal to `4`.
+- Omit the second argument, `d`, to use a default value of `datetime.today()`.
+
+```py
+from datetime import datetime
+
+def is_weekday(d = datetime.today()):
+  return d.weekday() <= 4
+```
+
+```py
+from datetime import date
+
+is_weekday(date(2020, 10, 25)) # False
+is_weekday(date(2020, 10, 28)) # True
+```
diff --git a/snippets/python/s/is-weekend.md b/snippets/python/s/is-weekend.md
new file mode 100644
index 000000000..5dc3ec8b0
--- /dev/null
+++ b/snippets/python/s/is-weekend.md
@@ -0,0 +1,28 @@
+---
+title: Date is weekend
+type: snippet
+language: python
+tags: [date]
+cover: two-lighthouses
+dateModified: 2020-11-02T19:28:05+02:00
+---
+
+Checks if the given date is a weekend.
+
+- Use `datetime.datetime.weekday()` to get the day of the week as an integer.
+- Check if the day of the week is greater than `4`.
+- Omit the second argument, `d`, to use a default value of `datetime.today()`.
+
+```py
+from datetime import datetime
+
+def is_weekend(d = datetime.today()):
+  return d.weekday() > 4
+```
+
+```py
+from datetime import date
+
+is_weekend(date(2020, 10, 25)) # True
+is_weekend(date(2020, 10, 28)) # False
+```
diff --git a/snippets/python/s/kebab.md b/snippets/python/s/kebab.md
new file mode 100644
index 000000000..4b5c953d9
--- /dev/null
+++ b/snippets/python/s/kebab.md
@@ -0,0 +1,32 @@
+---
+title: Kebabcase string
+type: snippet
+language: python
+tags: [string,regexp]
+cover: mask-quiet
+dateModified: 2020-11-02T19:28:05+02:00
+---
+
+Converts a string to kebab case.
+
+- Use `re.sub()` to replace any `-` or `_` with a space, using the regexp `r"(_|-)+"`.
+- Use `re.sub()` to match all words in the string, `str.lower()` to lowercase them.
+- Finally, use `str.join()` to combine all word using `-` as the separator.
+
+```py
+from re import sub
+
+def kebab(s):
+  return '-'.join(
+    sub(r"(\s|_|-)+"," ",
+    sub(r"[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+",
+    lambda mo: ' ' + mo.group(0).lower(), s)).split())
+```
+
+```py
+kebab('camelCase') # 'camel-case'
+kebab('some text') # 'some-text'
+kebab('some-mixed_string With spaces_underscores-and-hyphens')
+# 'some-mixed-string-with-spaces-underscores-and-hyphens'
+kebab('AllThe-small Things') # 'all-the-small-things'
+```
diff --git a/snippets/python/s/key-in-dict.md b/snippets/python/s/key-in-dict.md
new file mode 100644
index 000000000..b85b9bb9b
--- /dev/null
+++ b/snippets/python/s/key-in-dict.md
@@ -0,0 +1,22 @@
+---
+title: Key in dictionary
+type: snippet
+language: python
+tags: [dictionary]
+cover: rocky-mountains
+dateModified: 2020-10-16T21:30:49+03:00
+---
+
+Checks if the given key exists in a dictionary.
+
+- Use the `in` operator to check if `d` contains `key`.
+
+```py
+def key_in_dict(d, key):
+  return (key in d)
+```
+
+```py
+d = {'one': 1, 'three': 3, 'five': 5, 'two': 2, 'four': 4}
+key_in_dict(d, 'three') # True
+```
diff --git a/snippets/python/s/key-of-max.md b/snippets/python/s/key-of-max.md
new file mode 100644
index 000000000..aedeec48b
--- /dev/null
+++ b/snippets/python/s/key-of-max.md
@@ -0,0 +1,21 @@
+---
+title: Key of max value
+type: snippet
+language: python
+tags: [dictionary]
+cover: succulent-7
+dateModified: 2021-01-07T23:15:48+02:00
+---
+
+Finds the key of the maximum value in a dictionary.
+
+- Use `max()` with the `key` parameter set to `dict.get()` to find and return the key of the maximum value in the given dictionary.
+
+```py
+def key_of_max(d):
+  return max(d, key = d.get)
+```
+
+```py
+key_of_max({'a':4, 'b':0, 'c':13}) # c
+```
diff --git a/snippets/python/s/key-of-min.md b/snippets/python/s/key-of-min.md
new file mode 100644
index 000000000..fb1eb1925
--- /dev/null
+++ b/snippets/python/s/key-of-min.md
@@ -0,0 +1,21 @@
+---
+title: Key of min value
+type: snippet
+language: python
+tags: [dictionary]
+cover: goat-wooden-cottage
+dateModified: 2021-01-07T23:15:48+02:00
+---
+
+Finds the key of the minimum value in a dictionary.
+
+- Use `min()` with the `key` parameter set to `dict.get()` to find and return the key of the minimum value in the given dictionary.
+
+```py
+def key_of_min(d):
+  return min(d, key = d.get)
+```
+
+```py
+key_of_min({'a':4, 'b':0, 'c':13}) # b
+```
diff --git a/snippets/python/s/keys-only.md b/snippets/python/s/keys-only.md
new file mode 100644
index 000000000..f0d347cb2
--- /dev/null
+++ b/snippets/python/s/keys-only.md
@@ -0,0 +1,27 @@
+---
+title: Dictionary keys
+type: snippet
+language: python
+tags: [dictionary,list]
+cover: succulent-5
+dateModified: 2020-11-02T19:28:05+02:00
+---
+
+Creates a flat list of all the keys in a flat dictionary.
+
+- Use `dict.keys()` to return the keys in the given dictionary.
+- Return a `list()` of the previous result.
+
+```py
+def keys_only(flat_dict):
+  return list(flat_dict.keys())
+```
+
+```py
+ages = {
+  'Peter': 10,
+  'Isabel': 11,
+  'Anna': 9,
+}
+keys_only(ages) # ['Peter', 'Isabel', 'Anna']
+```
diff --git a/snippets/python/s/km-to-miles.md b/snippets/python/s/km-to-miles.md
new file mode 100644
index 000000000..3c16a443d
--- /dev/null
+++ b/snippets/python/s/km-to-miles.md
@@ -0,0 +1,22 @@
+---
+title: Km to miles
+type: snippet
+language: python
+tags: [math]
+unlisted: true
+cover: interior-5
+dateModified: 2021-01-04T12:47:04+02:00
+---
+
+Converts kilometers to miles.
+
+- Follows the conversion formula `mi = km * 0.621371`.
+
+```py
+def km_to_miles(km):
+  return km * 0.621371
+```
+
+```py
+km_to_miles(8.1) # 5.0331051
+```
diff --git a/snippets/python/s/last.md b/snippets/python/s/last.md
new file mode 100644
index 000000000..344c72008
--- /dev/null
+++ b/snippets/python/s/last.md
@@ -0,0 +1,21 @@
+---
+title: Last list element
+type: snippet
+language: python
+tags: [list]
+cover: lake-runner
+dateModified: 2020-11-02T19:28:05+02:00
+---
+
+Returns the last element in a list.
+
+- Use `lst[-1]` to return the last element of the passed list.
+
+```py
+def last(lst):
+  return lst[-1]
+```
+
+```py
+last([1, 2, 3]) # 3
+```
diff --git a/snippets/python/s/lcm.md b/snippets/python/s/lcm.md
new file mode 100644
index 000000000..feb7adf46
--- /dev/null
+++ b/snippets/python/s/lcm.md
@@ -0,0 +1,25 @@
+---
+title: Least common multiple
+type: snippet
+language: python
+tags: [math,list]
+cover: fruit-feast
+dateModified: 2020-11-02T19:31:15+02:00
+---
+
+Returns the least common multiple of a list of numbers.
+
+- Use `functools.reduce()`, `math.gcd()` and `lcm(x, y) = x * y / gcd(x, y)` over the given list.
+
+```py
+from functools import reduce
+from math import gcd
+
+def lcm(numbers):
+  return reduce((lambda x, y: int(x * y / gcd(x, y))), numbers)
+```
+
+```py
+lcm([12, 7]) # 84
+lcm([1, 3, 4, 5]) # 60
+```
diff --git a/snippets/python/s/longest-item.md b/snippets/python/s/longest-item.md
new file mode 100644
index 000000000..0b422de81
--- /dev/null
+++ b/snippets/python/s/longest-item.md
@@ -0,0 +1,24 @@
+---
+title: Longest item
+type: snippet
+language: python
+tags: [list,string]
+cover: keyboard-tea
+dateModified: 2021-10-17T18:24:43+02:00
+---
+
+Takes any number of iterable objects or objects with a length property and returns the longest one.
+
+- Use `max()` with `len()` as the `key` to return the item with the greatest length.
+- If multiple items have the same length, the first one will be returned.
+
+```py
+def longest_item(*args):
+  return max(args, key = len)
+```
+
+```py
+longest_item('this', 'is', 'a', 'testcase') # 'testcase'
+longest_item([1, 2, 3], [1, 2], [1, 2, 3, 4, 5]) # [1, 2, 3, 4, 5]
+longest_item([1, 2, 3], 'foobar') # 'foobar'
+```
diff --git a/snippets/python/s/map-dictionary.md b/snippets/python/s/map-dictionary.md
new file mode 100644
index 000000000..190f7d230
--- /dev/null
+++ b/snippets/python/s/map-dictionary.md
@@ -0,0 +1,24 @@
+---
+title: Map list to dictionary
+type: snippet
+language: python
+tags: [list,dictionary]
+excerpt: Maps the values of a list to a dictionary using a function.
+cover: colors-mural
+dateModified: 2020-11-02T19:28:27+02:00
+---
+
+Maps the values of a list to a dictionary using a function, where the key-value pairs consist of the original value as the key and the result of the function as the value.
+
+- Use `map()` to apply `fn` to each value of the list.
+- Use `zip()` to pair original values to the values produced by `fn`.
+- Use `dict()` to return an appropriate dictionary.
+
+```py
+def map_dictionary(itr, fn):
+  return dict(zip(itr, map(fn, itr)))
+```
+
+```py
+map_dictionary([1, 2, 3], lambda x: x * x) # { 1: 1, 2: 4, 3: 9 }
+```
diff --git a/snippets/python/s/map-values.md b/snippets/python/s/map-values.md
new file mode 100644
index 000000000..e6430738b
--- /dev/null
+++ b/snippets/python/s/map-values.md
@@ -0,0 +1,25 @@
+---
+title: Map dictionary values
+type: snippet
+language: python
+tags: [dictionary]
+cover: pineapple-laptop
+dateModified: 2020-11-02T19:28:27+02:00
+---
+
+Creates a dictionary with the same keys as the provided dictionary and values generated by running the provided function for each value.
+
+- Use `dict.items()` to iterate over the dictionary, assigning the values produced by `fn` to each key of a new dictionary.
+
+```py
+def map_values(obj, fn):
+  return dict((k, fn(v)) for k, v in obj.items())
+```
+
+```py
+users = {
+  'fred': { 'user': 'fred', 'age': 40 },
+  'pebbles': { 'user': 'pebbles', 'age': 1 }
+}
+map_values(users, lambda u : u['age']) # {'fred': 40, 'pebbles': 1}
+```
diff --git a/snippets/python/s/max-by.md b/snippets/python/s/max-by.md
new file mode 100644
index 000000000..f147d858c
--- /dev/null
+++ b/snippets/python/s/max-by.md
@@ -0,0 +1,22 @@
+---
+title: Max list value based on function
+type: snippet
+language: python
+tags: [math,list]
+cover: digital-nomad-3
+dateModified: 2020-11-02T19:28:27+02:00
+---
+
+Returns the maximum value of a list, after mapping each element to a value using the provided function.
+
+- Use `map()` with `fn` to map each element to a value using the provided function.
+- Use `max()` to return the maximum value.
+
+```py
+def max_by(lst, fn):
+  return max(map(fn, lst))
+```
+
+```py
+max_by([{ 'n': 4 }, { 'n': 2 }, { 'n': 8 }, { 'n': 6 }], lambda v : v['n']) # 8
+```
diff --git a/snippets/python/s/max-element-index.md b/snippets/python/s/max-element-index.md
new file mode 100644
index 000000000..a897ad5cc
--- /dev/null
+++ b/snippets/python/s/max-element-index.md
@@ -0,0 +1,21 @@
+---
+title: Index of max element
+type: snippet
+language: python
+tags: [math,list]
+cover: dark-cloud
+dateModified: 2020-11-02T19:28:27+02:00
+---
+
+Returns the index of the element with the maximum value in a list.
+
+- Use `max()` and `list.index()` to get the maximum value in the list and return its index.
+
+```py
+def max_element_index(arr):
+  return arr.index(max(arr))
+```
+
+```py
+max_element_index([5, 8, 9, 7, 10, 3, 0]) # 4
+```
diff --git a/snippets/python/s/max-n.md b/snippets/python/s/max-n.md
new file mode 100644
index 000000000..64ef19e2a
--- /dev/null
+++ b/snippets/python/s/max-n.md
@@ -0,0 +1,25 @@
+---
+title: N max elements
+type: snippet
+language: python
+tags: [list,math]
+cover: red-succulent
+dateModified: 2020-11-02T19:28:27+02:00
+---
+
+Returns the `n` maximum elements from the provided list.
+
+- Use `sorted()` to sort the list.
+- Use slice notation to get the specified number of elements.
+- Omit the second argument, `n`, to get a one-element list.
+- If `n` is greater than or equal to the provided list's length, then return the original list (sorted in descending order).
+
+```py
+def max_n(lst, n = 1):
+  return sorted(lst, reverse = True)[:n]
+```
+
+```py
+max_n([1, 2, 3]) # [3]
+max_n([1, 2, 3], 2) # [3, 2]
+```
diff --git a/snippets/python/s/median.md b/snippets/python/s/median.md
new file mode 100644
index 000000000..80e4a9bbf
--- /dev/null
+++ b/snippets/python/s/median.md
@@ -0,0 +1,28 @@
+---
+title: Median
+type: snippet
+language: python
+tags: [math]
+cover: little-bird
+dateModified: 2020-11-02T19:28:27+02:00
+---
+
+Finds the median of a list of numbers.
+
+- Sort the numbers of the list using `list.sort()`.
+- Find the median, which is either the middle element of the list if the list length is odd or the average of the two middle elements if the list length is even.
+- [`statistics.median()`](https://docs.python.org/3/library/statistics.html#statistics.median) provides similar functionality to this snippet.
+
+```py
+def median(list):
+  list.sort()
+  list_length = len(list)
+  if list_length % 2 == 0:
+    return (list[int(list_length / 2) - 1] + list[int(list_length / 2)]) / 2
+  return float(list[int(list_length / 2)])
+```
+
+```py
+median([1, 2, 3]) # 2.0
+median([1, 2, 3, 4]) # 2.5
+```
diff --git a/snippets/python/s/merge-dictionaries.md b/snippets/python/s/merge-dictionaries.md
new file mode 100644
index 000000000..dbb775be4
--- /dev/null
+++ b/snippets/python/s/merge-dictionaries.md
@@ -0,0 +1,32 @@
+---
+title: Merge dictionaries
+type: snippet
+language: python
+tags: [dictionary]
+cover: plant-candle
+dateModified: 2020-11-02T19:28:27+02:00
+---
+
+Merges two or more dictionaries.
+
+- Create a new `dict` and loop over `dicts`, using `dictionary.update()` to add the key-value pairs from each one to the result.
+
+```py
+def merge_dictionaries(*dicts):
+  res = dict()
+  for d in dicts:
+    res.update(d)
+  return res
+```
+
+```py
+ages_one = {
+  'Peter': 10,
+  'Isabel': 11,
+}
+ages_two = {
+  'Anna': 9
+}
+merge_dictionaries(ages_one, ages_two)
+# { 'Peter': 10, 'Isabel': 11, 'Anna': 9 }
+```
diff --git a/snippets/python/s/merge.md b/snippets/python/s/merge.md
new file mode 100644
index 000000000..eb8865acf
--- /dev/null
+++ b/snippets/python/s/merge.md
@@ -0,0 +1,33 @@
+---
+title: Merge lists
+type: snippet
+language: python
+tags: [list]
+cover: succulent-2
+dateModified: 2020-11-02T19:28:27+02:00
+---
+
+Merges two or more lists into a list of lists, combining elements from each of the input lists based on their positions.
+
+- Use `max()` combined with a list comprehension to get the length of the longest list in the arguments.
+- Use `range()` in combination with the `max_length` variable to loop as many times as there are elements in the longest list.
+- If a list is shorter than `max_length`, use `fill_value` for the remaining items (defaults to `None`).
+- [`zip()`](https://docs.python.org/3/library/functions.html#zip) and [`itertools.zip_longest()`](https://docs.python.org/3/library/itertools.html#itertools.zip_longest) provide similar functionality to this snippet.
+
+```py
+def merge(*args, fill_value = None):
+  max_length = max([len(lst) for lst in args])
+  result = []
+  for i in range(max_length):
+    result.append([
+      args[k][i] if i < len(args[k]) else fill_value for k in range(len(args))
+    ])
+  return result
+```
+
+```py
+merge(['a', 'b'], [1, 2], [True, False]) # [['a', 1, True], ['b', 2, False]]
+merge(['a'], [1, 2], [True, False]) # [['a', 1, True], [None, 2, False]]
+merge(['a'], [1, 2], [True, False], fill_value = '_')
+# [['a', 1, True], ['_', 2, False]]
+```
diff --git a/snippets/python/s/miles-to-km.md b/snippets/python/s/miles-to-km.md
new file mode 100644
index 000000000..00fe7e7ab
--- /dev/null
+++ b/snippets/python/s/miles-to-km.md
@@ -0,0 +1,22 @@
+---
+title: Miles to km
+type: snippet
+language: python
+tags: [math]
+unlisted: true
+cover: interior-5
+dateModified: 2021-01-04T12:47:04+02:00
+---
+
+Converts miles to kilometers.
+
+- Follows the conversion formula `km = mi * 1.609344`.
+
+```py
+def miles_to_km(miles):
+  return miles * 1.609344
+```
+
+```py
+miles_to_km(5.03) # 8.09500032
+```
diff --git a/snippets/python/s/min-by.md b/snippets/python/s/min-by.md
new file mode 100644
index 000000000..49dd51bf1
--- /dev/null
+++ b/snippets/python/s/min-by.md
@@ -0,0 +1,22 @@
+---
+title: Min list value based on function
+type: snippet
+language: python
+tags: [math,list]
+cover: purple-flower-field
+dateModified: 2020-11-02T19:28:27+02:00
+---
+
+Returns the minimum value of a list, after mapping each element to a value using the provided function.
+
+- Use `map()` with `fn` to map each element to a value using the provided function.
+- Use `min()` to return the minimum value.
+
+```py
+def min_by(lst, fn):
+  return min(map(fn, lst))
+```
+
+```py
+min_by([{ 'n': 4 }, { 'n': 2 }, { 'n': 8 }, { 'n': 6 }], lambda v : v['n']) # 2
+```
diff --git a/snippets/python/s/min-element-index.md b/snippets/python/s/min-element-index.md
new file mode 100644
index 000000000..644af6727
--- /dev/null
+++ b/snippets/python/s/min-element-index.md
@@ -0,0 +1,21 @@
+---
+title: Index of min element
+type: snippet
+language: python
+tags: [math,list]
+cover: two-cities
+dateModified: 2020-11-02T19:28:27+02:00
+---
+
+Returns the index of the element with the minimum value in a list.
+
+- Use `min()` and `list.index()` to obtain the minimum value in the list and then return its index.
+
+```py
+def min_element_index(arr):
+  return arr.index(min(arr))
+```
+
+```py
+min_element_index([3, 5, 2, 6, 10, 7, 9]) # 2
+```
diff --git a/snippets/python/s/min-n.md b/snippets/python/s/min-n.md
new file mode 100644
index 000000000..4143f739e
--- /dev/null
+++ b/snippets/python/s/min-n.md
@@ -0,0 +1,25 @@
+---
+title: N min elements
+type: snippet
+language: python
+tags: [list,math]
+cover: balloons
+dateModified: 2020-11-02T19:28:27+02:00
+---
+
+Returns the `n` minimum elements from the provided list.
+
+- Use `sorted()` to sort the list.
+- Use slice notation to get the specified number of elements.
+- Omit the second argument, `n`, to get a one-element list.
+- If `n` is greater than or equal to the provided list's length, then return the original list (sorted in ascending order).
+
+```py
+def min_n(lst, n = 1):
+  return sorted(lst, reverse = False)[:n]
+```
+
+```py
+min_n([1, 2, 3]) # [1]
+min_n([1, 2, 3], 2) # [1, 2]
+```
diff --git a/snippets/python/s/months-diff.md b/snippets/python/s/months-diff.md
new file mode 100644
index 000000000..5c6bba351
--- /dev/null
+++ b/snippets/python/s/months-diff.md
@@ -0,0 +1,26 @@
+---
+title: Date difference in months
+type: snippet
+language: python
+tags: [date]
+cover: succulent-11
+dateModified: 2020-10-28T16:20:39+02:00
+---
+
+Calculates the month difference between two dates.
+
+- Subtract `start` from `end` and use `datetime.timedelta.days` to get the day difference.
+- Divide by `30` and use `math.ceil()` to get the difference in months (rounded up).
+
+```py
+from math import ceil
+
+def months_diff(start, end):
+  return ceil((end - start).days / 30)
+```
+
+```py
+from datetime import date
+
+months_diff(date(2020, 10, 28), date(2020, 11, 25)) # 1
+```
diff --git a/snippets/python/s/most-frequent.md b/snippets/python/s/most-frequent.md
new file mode 100644
index 000000000..e62bced09
--- /dev/null
+++ b/snippets/python/s/most-frequent.md
@@ -0,0 +1,22 @@
+---
+title: Most frequent element
+type: snippet
+language: python
+tags: [list]
+cover: secret-tree
+dateModified: 2020-11-02T19:28:27+02:00
+---
+
+Returns the most frequent element in a list.
+
+- Use `set()` to get the unique values in `lst`.
+- Use `max()` to find the element that has the most appearances.
+
+```py
+def most_frequent(lst):
+  return max(set(lst), key = lst.count)
+```
+
+```py
+most_frequent([1, 2, 1, 2, 3, 2, 1, 4, 2]) #2
+```
diff --git a/snippets/python/s/n-times-string.md b/snippets/python/s/n-times-string.md
new file mode 100644
index 000000000..b88b48cdb
--- /dev/null
+++ b/snippets/python/s/n-times-string.md
@@ -0,0 +1,21 @@
+---
+title: Repeat string
+type: snippet
+language: python
+tags: [string]
+cover: playing-fetch
+dateModified: 2020-11-02T19:28:27+02:00
+---
+
+Generates a string with the given string value repeated `n` number of times.
+
+- Repeat the string `n` times, using the `*` operator.
+
+```py
+def n_times_string(s, n):
+  return (s * n)
+```
+
+```py
+n_times_string('py', 4) #'pypypypy'
+```
diff --git a/snippets/python/s/none.md b/snippets/python/s/none.md
new file mode 100644
index 000000000..80b772540
--- /dev/null
+++ b/snippets/python/s/none.md
@@ -0,0 +1,22 @@
+---
+title: Test if every list element is falsy
+type: snippet
+language: python
+tags: [list]
+cover: jars-on-shelf-2
+dateModified: 2020-11-02T19:28:27+02:00
+---
+
+Checks if the provided function returns `True` for at least one element in the list.
+
+- Use `all()` and `fn` to check if `fn` returns `False` for all the elements in the list.
+
+```py
+def none(lst, fn = lambda x: x):
+  return all(not fn(x) for x in lst)
+```
+
+```py
+none([0, 1, 2, 0], lambda x: x >= 2 ) # False
+none([0, 0, 0]) # True
+```
diff --git a/snippets/python/s/num-to-range.md b/snippets/python/s/num-to-range.md
new file mode 100644
index 000000000..6d2c9056e
--- /dev/null
+++ b/snippets/python/s/num-to-range.md
@@ -0,0 +1,22 @@
+---
+title: Map number to range
+type: snippet
+language: python
+tags: [math]
+cover: round-leaves
+dateModified: 2021-04-05T18:25:46+03:00
+---
+
+Maps a number from one range to another range.
+
+- Return `num` mapped between `outMin`-`outMax` from `inMin`-`inMax`.
+
+```py
+def num_to_range(num, inMin, inMax, outMin, outMax):
+  return outMin + (float(num - inMin) / float(inMax - inMin) * (outMax
+                  - outMin))
+```
+
+```py
+num_to_range(5, 0, 10, 0, 100) # 50.0
+```
diff --git a/snippets/python/s/offset.md b/snippets/python/s/offset.md
new file mode 100644
index 000000000..7db0bc17f
--- /dev/null
+++ b/snippets/python/s/offset.md
@@ -0,0 +1,22 @@
+---
+title: Offset list elements
+type: snippet
+language: python
+tags: [list]
+cover: digital-nomad-10
+dateModified: 2020-11-02T19:28:27+02:00
+---
+
+Moves the specified amount of elements to the end of the list.
+
+- Use slice notation to get the two slices of the list and combine them before returning.
+
+```py
+def offset(lst, offset):
+  return lst[offset:] + lst[:offset]
+```
+
+```py
+offset([1, 2, 3, 4, 5], 2) # [3, 4, 5, 1, 2]
+offset([1, 2, 3, 4, 5], -2) # [4, 5, 1, 2, 3]
+```
diff --git a/snippets/python/s/pad-number.md b/snippets/python/s/pad-number.md
new file mode 100644
index 000000000..c1b407713
--- /dev/null
+++ b/snippets/python/s/pad-number.md
@@ -0,0 +1,21 @@
+---
+title: Pad number
+type: snippet
+language: python
+tags: [string,math]
+cover: umbrellas
+dateModified: 2020-11-02T19:28:27+02:00
+---
+
+Pads a given number to the specified length.
+
+- Use `str.zfill()` to pad the number to the specified length, after converting it to a string.
+
+```py
+def pad_number(n, l):
+  return str(n).zfill(l)
+```
+
+```py
+pad_number(1234, 6); # '001234'
+```
diff --git a/snippets/python/s/pad.md b/snippets/python/s/pad.md
new file mode 100644
index 000000000..20a49d37a
--- /dev/null
+++ b/snippets/python/s/pad.md
@@ -0,0 +1,27 @@
+---
+title: Pad string
+type: snippet
+language: python
+tags: [string]
+author: chalarangelo
+cover: digital-nomad-11
+dateModified: 2020-10-04T01:53:05+03:00
+---
+
+Pads a string on both sides with the specified character, if it's shorter than the specified length.
+
+- Use `str.ljust()` and `str.rjust()` to pad both sides of the given string.
+- Omit the third argument, `char`, to use the whitespace character as the default padding character.
+
+```py
+from math import floor
+
+def pad(s, length, char = ' '):
+  return s.rjust(floor((len(s) + length)/2), char).ljust(length, char)
+```
+
+```py
+pad('cat', 8) # '  cat   '
+pad('42', 6, '0') # '004200'
+pad('foobar', 3) # 'foobar'
+```
diff --git a/snippets/python/s/palindrome.md b/snippets/python/s/palindrome.md
new file mode 100644
index 000000000..bee0dcccf
--- /dev/null
+++ b/snippets/python/s/palindrome.md
@@ -0,0 +1,25 @@
+---
+title: Palindrome
+type: snippet
+language: python
+tags: [string]
+cover: succulent-6
+dateModified: 2020-11-02T19:28:27+02:00
+---
+
+Checks if the given string is a palindrome.
+
+- Use `str.lower()` and `re.sub()` to convert to lowercase and remove non-alphanumeric characters from the given string.
+- Then, compare the new string with its reverse, using slice notation.
+
+```py
+from re import sub
+
+def palindrome(s):
+  s = sub('[\W_]', '', s.lower())
+  return s == s[::-1]
+```
+
+```py
+palindrome('taco cat') # True
+```
diff --git a/snippets/python/s/pluck.md b/snippets/python/s/pluck.md
new file mode 100644
index 000000000..ef28b45c4
--- /dev/null
+++ b/snippets/python/s/pluck.md
@@ -0,0 +1,27 @@
+---
+title: Pluck values from list of dictionaries
+type: snippet
+language: python
+tags: [list,dictionary]
+cover: succulent-9
+dateModified: 2020-10-22T10:09:44+03:00
+---
+
+Converts a list of dictionaries into a list of values corresponding to the specified `key`.
+
+- Use a list comprehension and `dict.get()` to get the value of `key` for each dictionary in `lst`.
+
+```py
+def pluck(lst, key):
+  return [x.get(key) for x in lst]
+```
+
+```py
+simpsons = [
+  { 'name': 'lisa', 'age': 8 },
+  { 'name': 'homer', 'age': 36 },
+  { 'name': 'marge', 'age': 34 },
+  { 'name': 'bart', 'age': 10 }
+]
+pluck(simpsons, 'age') # [8, 36, 34, 10]
+```
diff --git a/snippets/python/s/powerset.md b/snippets/python/s/powerset.md
new file mode 100644
index 000000000..d9f7b0ec4
--- /dev/null
+++ b/snippets/python/s/powerset.md
@@ -0,0 +1,27 @@
+---
+title: Powerset
+type: snippet
+language: python
+tags: [math,list]
+author: chalarangelo
+cover: rock-climbing
+dateModified: 2020-11-02T19:28:27+02:00
+---
+
+Returns the powerset of a given iterable.
+
+- Use `list()` to convert the given value to a list.
+- Use `range()` and `itertools.combinations()` to create a generator that returns all subsets.
+- Use `itertools.chain.from_iterable()` and `list()` to consume the generator and return a list.
+
+```py
+from itertools import chain, combinations
+
+def powerset(iterable):
+  s = list(iterable)
+  return list(chain.from_iterable(combinations(s, r) for r in range(len(s)+1)))
+```
+
+```py
+powerset([1, 2]) # [(), (1,), (2,), (1, 2)]
+```
diff --git a/snippets/python/s/rads-to-degrees.md b/snippets/python/s/rads-to-degrees.md
new file mode 100644
index 000000000..262eb9e50
--- /dev/null
+++ b/snippets/python/s/rads-to-degrees.md
@@ -0,0 +1,25 @@
+---
+title: Radians to degrees
+type: snippet
+language: python
+tags: [math]
+cover: watermelon-bike
+dateModified: 2020-11-02T19:28:27+02:00
+---
+
+Converts an angle from radians to degrees.
+
+- Use `math.pi` and the radian to degree formula to convert the angle from radians to degrees.
+
+```py
+from math import pi
+
+def rads_to_degrees(rad):
+  return (rad * 180.0) / pi
+```
+
+```py
+from math import pi
+
+rads_to_degrees(pi / 2) # 90.0
+```
diff --git a/snippets/python/s/reverse-number.md b/snippets/python/s/reverse-number.md
new file mode 100644
index 000000000..91504d5c3
--- /dev/null
+++ b/snippets/python/s/reverse-number.md
@@ -0,0 +1,27 @@
+---
+title: Reverse number
+type: snippet
+language: python
+tags: [math]
+cover: taking-photos
+dateModified: 2020-11-02T19:28:27+02:00
+---
+
+Reverses a number.
+
+- Use `str()` to convert the number to a string, slice notation to reverse it and `str.replace()` to remove the sign.
+- Use `float()` to convert the result to a number and `math.copysign()` to copy the original sign.
+
+```py
+from math import copysign
+
+def reverse_number(n):
+  return copysign(float(str(n)[::-1].replace('-', '')), n)
+```
+
+```py
+reverse_number(981) # 189
+reverse_number(-500) # -5
+reverse_number(73.6) # 6.37
+reverse_number(-5.23) # -32.5
+```
diff --git a/snippets/python/s/reverse.md b/snippets/python/s/reverse.md
new file mode 100644
index 000000000..659f67640
--- /dev/null
+++ b/snippets/python/s/reverse.md
@@ -0,0 +1,22 @@
+---
+title: Reverse list
+type: snippet
+language: python
+tags: [list,string]
+cover: industrial-tokyo
+dateModified: 2020-11-02T19:28:27+02:00
+---
+
+Reverses a list or a string.
+
+- Use slice notation to reverse the list or string.
+
+```py
+def reverse(itr):
+  return itr[::-1]
+```
+
+```py
+reverse([1, 2, 3]) # [3, 2, 1]
+reverse('snippet') # 'teppins'
+```
diff --git a/snippets/python/s/rgb-to-hex.md b/snippets/python/s/rgb-to-hex.md
new file mode 100644
index 000000000..7d3480f68
--- /dev/null
+++ b/snippets/python/s/rgb-to-hex.md
@@ -0,0 +1,22 @@
+---
+title: RGB to hex
+type: snippet
+language: python
+tags: [string,math]
+cover: campfire
+dateModified: 2020-11-02T19:28:27+02:00
+---
+
+Converts the values of RGB components to a hexadecimal color code.
+
+- Create a placeholder for a zero-padded hexadecimal value using `'{:02X}'` and copy it three times.
+- Use `str.format()` on the resulting string to replace the placeholders with the given values.
+
+```py
+def rgb_to_hex(r, g, b):
+  return ('{:02X}' * 3).format(r, g, b)
+```
+
+```py
+rgb_to_hex(255, 165, 1) # 'FFA501'
+```
diff --git a/snippets/python/s/roll.md b/snippets/python/s/roll.md
new file mode 100644
index 000000000..c1c0bc6e0
--- /dev/null
+++ b/snippets/python/s/roll.md
@@ -0,0 +1,22 @@
+---
+title: Rotate list elements
+type: snippet
+language: python
+tags: [list]
+cover: colorful-pots
+dateModified: 2020-11-02T19:15:44+02:00
+---
+
+Moves the specified amount of elements to the start of the list.
+
+- Use slice notation to get the two slices of the list and combine them before returning.
+
+```py
+def roll(lst, offset):
+  return lst[-offset:] + lst[:-offset]
+```
+
+```py
+roll([1, 2, 3, 4, 5], 2) # [4, 5, 1, 2, 3]
+roll([1, 2, 3, 4, 5], -2) # [3, 4, 5, 1, 2]
+```
diff --git a/snippets/python/s/sample.md b/snippets/python/s/sample.md
new file mode 100644
index 000000000..c12dea187
--- /dev/null
+++ b/snippets/python/s/sample.md
@@ -0,0 +1,23 @@
+---
+title: Random element in list
+type: snippet
+language: python
+tags: [list,random]
+cover: walking-on-top
+dateModified: 2020-10-28T11:45:34+02:00
+---
+
+Returns a random element from a list.
+
+- Use `random.choice()` to get a random element from `lst`.
+
+```py
+from random import choice
+
+def sample(lst):
+  return choice(lst)
+```
+
+```py
+sample([3, 7, 9, 11]) # 9
+```
diff --git a/snippets/python/s/shuffle.md b/snippets/python/s/shuffle.md
new file mode 100644
index 000000000..96722f454
--- /dev/null
+++ b/snippets/python/s/shuffle.md
@@ -0,0 +1,32 @@
+---
+title: Shuffle list
+type: snippet
+language: python
+tags: [list,random]
+cover: tent-stars
+dateModified: 2020-11-02T19:28:35+02:00
+---
+
+Randomizes the order of the values of an list, returning a new list.
+
+- Uses the [Fisher-Yates algorithm](https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle) to reorder the elements of the list.
+- [`random.shuffle`](https://docs.python.org/3/library/random.html#random.shuffle) provides similar functionality to this snippet.
+
+```py
+from copy import deepcopy
+from random import randint
+
+def shuffle(lst):
+  temp_lst = deepcopy(lst)
+  m = len(temp_lst)
+  while (m):
+    m -= 1
+    i = randint(0, m)
+    temp_lst[m], temp_lst[i] = temp_lst[i], temp_lst[m]
+  return temp_lst
+```
+
+```py
+foo = [1, 2, 3]
+shuffle(foo) # [2, 3, 1], foo = [1, 2, 3]
+```
diff --git a/snippets/python/s/similarity.md b/snippets/python/s/similarity.md
new file mode 100644
index 000000000..90a9fabe3
--- /dev/null
+++ b/snippets/python/s/similarity.md
@@ -0,0 +1,21 @@
+---
+title: List similarity
+type: snippet
+language: python
+tags: [list]
+cover: sunflowers
+dateModified: 2020-11-02T19:28:35+02:00
+---
+
+Returns a list of elements that exist in both lists.
+
+- Use a list comprehension on `a` to only keep values contained in both lists.
+
+```py
+def similarity(a, b):
+  return [item for item in a if item in b]
+```
+
+```py
+similarity([1, 2, 3], [1, 2, 4]) # [1, 2]
+```
diff --git a/snippets/python/s/slugify.md b/snippets/python/s/slugify.md
new file mode 100644
index 000000000..14ca71161
--- /dev/null
+++ b/snippets/python/s/slugify.md
@@ -0,0 +1,28 @@
+---
+title: String to slug
+type: snippet
+language: python
+tags: [string,regexp]
+cover: sliced-fruits
+dateModified: 2020-10-25T12:43:20+02:00
+---
+
+Converts a string to a URL-friendly slug.
+
+- Use `str.lower()` and `str.strip()` to normalize the input string.
+- Use `re.sub()` to to replace spaces, dashes and underscores with `-` and remove special characters.
+
+```py
+import re
+
+def slugify(s):
+  s = s.lower().strip()
+  s = re.sub(r'[^\w\s-]', '', s)
+  s = re.sub(r'[\s_-]+', '-', s)
+  s = re.sub(r'^-+|-+$', '', s)
+  return s
+```
+
+```py
+slugify('Hello World!') # 'hello-world'
+```
diff --git a/snippets/python/s/snake.md b/snippets/python/s/snake.md
new file mode 100644
index 000000000..eddec486d
--- /dev/null
+++ b/snippets/python/s/snake.md
@@ -0,0 +1,32 @@
+---
+title: Snakecase string
+type: snippet
+language: python
+tags: [string,regexp]
+cover: organizer
+dateModified: 2020-11-02T19:28:35+02:00
+---
+
+Converts a string to snake case.
+
+- Use `re.sub()` to match all words in the string, `str.lower()` to lowercase them.
+- Use `re.sub()` to replace any `-` characters with spaces.
+- Finally, use `str.join()` to combine all words using `-` as the separator.
+
+```py
+from re import sub
+
+def snake(s):
+  return '_'.join(
+    sub('([A-Z][a-z]+)', r' \1',
+    sub('([A-Z]+)', r' \1',
+    s.replace('-', ' '))).split()).lower()
+```
+
+```py
+snake('camelCase') # 'camel_case'
+snake('some text') # 'some_text'
+snake('some-mixed_string With spaces_underscores-and-hyphens')
+# 'some_mixed_string_with_spaces_underscores_and_hyphens'
+snake('AllThe-small Things') # 'all_the_small_things'
+```
diff --git a/snippets/python/s/some.md b/snippets/python/s/some.md
new file mode 100644
index 000000000..e6a8f9cbc
--- /dev/null
+++ b/snippets/python/s/some.md
@@ -0,0 +1,22 @@
+---
+title: Test if some list elements are truthy
+type: snippet
+language: python
+tags: [list]
+cover: pink-flower-tree
+dateModified: 2020-11-02T19:28:35+02:00
+---
+
+Checks if the provided function returns `True` for at least one element in the list.
+
+- Use `any()` in combination with `map()` to check if `fn` returns `True` for any element in the list.
+
+```py
+def some(lst, fn = lambda x: x):
+  return any(map(fn, lst))
+```
+
+```py
+some([0, 1, 2, 0], lambda x: x >= 2 ) # True
+some([0, 0, 1, 0]) # True
+```
diff --git a/snippets/python/s/sort-by-indexes.md b/snippets/python/s/sort-by-indexes.md
new file mode 100644
index 000000000..04fd9216e
--- /dev/null
+++ b/snippets/python/s/sort-by-indexes.md
@@ -0,0 +1,28 @@
+---
+title: Sort list by indexes
+type: snippet
+language: python
+tags: [list]
+cover: little-white-flowers
+dateModified: 2020-11-02T19:28:35+02:00
+---
+
+Sorts one list based on another list containing the desired indexes.
+
+- Use `zip()` and `sorted()` to combine and sort the two lists, based on the values of `indexes`.
+- Use a list comprehension to get the first element of each pair from the result.
+- Use the `reverse` parameter in `sorted()` to sort the dictionary in reverse order, based on the third argument.
+
+```py
+def sort_by_indexes(lst, indexes, reverse=False):
+  return [val for (_, val) in sorted(zip(indexes, lst), key=lambda x: \
+          x[0], reverse=reverse)]
+```
+
+```py
+a = ['eggs', 'bread', 'oranges', 'jam', 'apples', 'milk']
+b = [3, 2, 6, 4, 1, 5]
+sort_by_indexes(a, b) # ['apples', 'bread', 'eggs', 'jam', 'milk', 'oranges']
+sort_by_indexes(a, b, True)
+# ['oranges', 'milk', 'jam', 'eggs', 'bread', 'apples']
+```
diff --git a/snippets/python/s/sort-dict-by-key.md b/snippets/python/s/sort-dict-by-key.md
new file mode 100644
index 000000000..7a5b1a3c6
--- /dev/null
+++ b/snippets/python/s/sort-dict-by-key.md
@@ -0,0 +1,26 @@
+---
+title: Sort dictionary by key
+type: snippet
+language: python
+tags: [dictionary]
+cover: laptop-plants
+dateModified: 2020-11-02T19:28:35+02:00
+---
+
+Sorts the given dictionary by key.
+
+- Use `dict.items()` to get a list of tuple pairs from `d` and sort it using `sorted()`.
+- Use `dict()` to convert the sorted list back to a dictionary.
+- Use the `reverse` parameter in `sorted()` to sort the dictionary in reverse order, based on the second argument.
+
+```py
+def sort_dict_by_key(d, reverse = False):
+  return dict(sorted(d.items(), reverse = reverse))
+```
+
+```py
+d = {'one': 1, 'three': 3, 'five': 5, 'two': 2, 'four': 4}
+sort_dict_by_key(d) # {'five': 5, 'four': 4, 'one': 1, 'three': 3, 'two': 2}
+sort_dict_by_key(d, True)
+# {'two': 2, 'three': 3, 'one': 1, 'four': 4, 'five': 5}
+```
diff --git a/snippets/python/s/sort-dict-by-value.md b/snippets/python/s/sort-dict-by-value.md
new file mode 100644
index 000000000..8752de916
--- /dev/null
+++ b/snippets/python/s/sort-dict-by-value.md
@@ -0,0 +1,27 @@
+---
+title: Sort dictionary by value
+type: snippet
+language: python
+tags: [dictionary]
+cover: jars-on-shelf
+dateModified: 2021-01-08T00:56:50+02:00
+---
+
+Sorts the given dictionary by value.
+
+- Use `dict.items()` to get a list of tuple pairs from `d` and sort it using a lambda function and `sorted()`.
+- Use `dict()` to convert the sorted list back to a dictionary.
+- Use the `reverse` parameter in `sorted()` to sort the dictionary in reverse order, based on the second argument.
+- **⚠️ NOTICE:** Dictionary values must be of the same type.
+
+```py
+def sort_dict_by_value(d, reverse = False):
+  return dict(sorted(d.items(), key = lambda x: x[1], reverse = reverse))
+```
+
+```py
+d = {'one': 1, 'three': 3, 'five': 5, 'two': 2, 'four': 4}
+sort_dict_by_value(d) # {'one': 1, 'two': 2, 'three': 3, 'four': 4, 'five': 5}
+sort_dict_by_value(d, True)
+# {'five': 5, 'four': 4, 'three': 3, 'two': 2, 'one': 1}
+```
diff --git a/snippets/python/s/split-lines.md b/snippets/python/s/split-lines.md
new file mode 100644
index 000000000..3715c30f1
--- /dev/null
+++ b/snippets/python/s/split-lines.md
@@ -0,0 +1,23 @@
+---
+title: Split into lines
+type: snippet
+language: python
+tags: [string]
+cover: succulent-4
+dateModified: 2020-11-02T19:28:35+02:00
+---
+
+Splits a multiline string into a list of lines.
+
+- Use `str.split()` and `'\n'` to match line breaks and create a list.
+- [`str.splitlines()`](https://docs.python.org/3/library/stdtypes.html#str.splitlines) provides similar functionality to this snippet.
+
+```py
+def split_lines(s):
+  return s.split('\n')
+```
+
+```py
+split_lines('This\nis a\nmultiline\nstring.\n')
+# ['This', 'is a', 'multiline', 'string.' , '']
+```
diff --git a/snippets/python/s/spread.md b/snippets/python/s/spread.md
new file mode 100644
index 000000000..40cd2cb51
--- /dev/null
+++ b/snippets/python/s/spread.md
@@ -0,0 +1,24 @@
+---
+title: Spread list
+type: snippet
+language: python
+tags: [list]
+cover: digital-nomad-14
+dateModified: 2020-09-15T16:13:06+03:00
+---
+
+Flattens a list, by spreading its elements into a new list.
+
+- Loop over elements, use `list.extend()` if the element is a list, `list.append()` otherwise.
+
+```py
+def spread(arg):
+  ret = []
+  for i in arg:
+    ret.extend(i) if isinstance(i, list) else ret.append(i)
+  return ret
+```
+
+```py
+spread([1, 2, 3, [4, 5, 6], [7], 8, 9]) # [1, 2, 3, 4, 5, 6, 7, 8, 9]
+```
diff --git a/snippets/python/s/sum-by.md b/snippets/python/s/sum-by.md
new file mode 100644
index 000000000..66c59f4f9
--- /dev/null
+++ b/snippets/python/s/sum-by.md
@@ -0,0 +1,22 @@
+---
+title: Sum list based on function
+type: snippet
+language: python
+tags: [math,list]
+cover: horse-sunset
+dateModified: 2020-11-02T19:28:35+02:00
+---
+
+Calculates the sum of a list, after mapping each element to a value using the provided function.
+
+- Use `map()` with `fn` to map each element to a value using the provided function.
+- Use `sum()` to return the sum of the values.
+
+```py
+def sum_by(lst, fn):
+  return sum(map(fn, lst))
+```
+
+```py
+sum_by([{ 'n': 4 }, { 'n': 2 }, { 'n': 8 }, { 'n': 6 }], lambda v : v['n']) # 20
+```
diff --git a/snippets/python/s/sum-of-powers.md b/snippets/python/s/sum-of-powers.md
new file mode 100644
index 000000000..dd160a51a
--- /dev/null
+++ b/snippets/python/s/sum-of-powers.md
@@ -0,0 +1,26 @@
+---
+title: Sum of powers
+type: snippet
+language: python
+tags: [math]
+cover: river-flow
+dateModified: 2020-11-02T19:28:35+02:00
+---
+
+Returns the sum of the powers of all the numbers from `start` to `end` (both inclusive).
+
+- Use `range()` in combination with a list comprehension to create a list of elements in the desired range raised to the given `power`.
+- Use `sum()` to add the values together.
+- Omit the second argument, `power`, to use a default power of `2`.
+- Omit the third argument, `start`, to use a default starting value of `1`.
+
+```py
+def sum_of_powers(end, power = 2, start = 1):
+  return sum([(i) ** power for i in range(start, end + 1)])
+```
+
+```py
+sum_of_powers(10) # 385
+sum_of_powers(10, 3) # 3025
+sum_of_powers(10, 3, 5) # 2925
+```
diff --git a/snippets/python/s/symmetric-difference-by.md b/snippets/python/s/symmetric-difference-by.md
new file mode 100644
index 000000000..0223f8487
--- /dev/null
+++ b/snippets/python/s/symmetric-difference-by.md
@@ -0,0 +1,26 @@
+---
+title: List symmetric difference based on function
+type: snippet
+language: python
+tags: [list]
+cover: succulent-1
+dateModified: 2020-11-02T19:28:35+02:00
+---
+
+Returns the symmetric difference between two lists, after applying the provided function to each list element of both.
+
+- Create a `set` by applying `fn` to each element in every list.
+- Use a list comprehension in combination with `fn` on each of them to only keep values not contained in the previously created set of the other.
+
+```py
+def symmetric_difference_by(a, b, fn):
+  (_a, _b) = (set(map(fn, a)), set(map(fn, b)))
+  return [item for item in a if fn(item) not in _b] + [item
+          for item in b if fn(item) not in _a]
+```
+
+```py
+from math import floor
+
+symmetric_difference_by([2.1, 1.2], [2.3, 3.4], floor) # [1.2, 3.4]
+```
diff --git a/snippets/python/s/symmetric-difference.md b/snippets/python/s/symmetric-difference.md
new file mode 100644
index 000000000..2728c5b8e
--- /dev/null
+++ b/snippets/python/s/symmetric-difference.md
@@ -0,0 +1,24 @@
+---
+title: List symmetric difference
+type: snippet
+language: python
+tags: [list]
+cover: ice
+dateModified: 2020-11-02T19:28:35+02:00
+---
+
+Returns the symmetric difference between two iterables, without filtering out duplicate values.
+
+- Create a `set` from each list.
+- Use a list comprehension on each of them to only keep values not contained in the previously created set of the other.
+
+```py
+def symmetric_difference(a, b):
+  (_a, _b) = (set(a), set(b))
+  return [item for item in a if item not in _b] + [item for item in b
+          if item not in _a]
+```
+
+```py
+symmetric_difference([1, 2, 3], [1, 2, 4]) # [3, 4]
+```
diff --git a/snippets/python/s/tail.md b/snippets/python/s/tail.md
new file mode 100644
index 000000000..febbbf304
--- /dev/null
+++ b/snippets/python/s/tail.md
@@ -0,0 +1,23 @@
+---
+title: List tail
+type: snippet
+language: python
+tags: [list]
+cover: meteora
+dateModified: 2020-11-02T19:28:35+02:00
+---
+
+Returns all elements in a list except for the first one.
+
+- Use slice notation to return the last element if the list's length is more than `1`.
+- Otherwise, return the whole list.
+
+```py
+def tail(lst):
+  return lst[1:] if len(lst) > 1 else lst
+```
+
+```py
+tail([1, 2, 3]) # [2, 3]
+tail([1]) # [1]
+```
diff --git a/snippets/python/s/take-right.md b/snippets/python/s/take-right.md
new file mode 100644
index 000000000..4b4837024
--- /dev/null
+++ b/snippets/python/s/take-right.md
@@ -0,0 +1,23 @@
+---
+title: Remove list elements from the end
+type: snippet
+language: python
+tags: [list]
+author: chalarangelo
+cover: three-vases
+dateModified: 2020-09-15T16:13:06+03:00
+---
+
+Returns a list with `n` elements removed from the end.
+
+- Use slice notation to create a slice of the list with `n` elements taken from the end.
+
+```py
+def take_right(itr, n = 1):
+  return itr[-n:]
+```
+
+```py
+take_right([1, 2, 3], 2) # [2, 3]
+take_right([1, 2, 3]) # [3]
+```
diff --git a/snippets/python/s/take.md b/snippets/python/s/take.md
new file mode 100644
index 000000000..abfbadd4c
--- /dev/null
+++ b/snippets/python/s/take.md
@@ -0,0 +1,23 @@
+---
+title: Remove list elements
+type: snippet
+language: python
+tags: [list]
+author: chalarangelo
+cover: sea-view-2
+dateModified: 2020-09-15T16:13:06+03:00
+---
+
+Returns a list with `n` elements removed from the beginning.
+
+- Use slice notation to create a slice of the list with `n` elements taken from the beginning.
+
+```py
+def take(itr, n = 1):
+  return itr[:n]
+```
+
+```py
+take([1, 2, 3], 5) # [1, 2, 3]
+take([1, 2, 3], 0) # []
+```
diff --git a/snippets/python/s/to-binary.md b/snippets/python/s/to-binary.md
new file mode 100644
index 000000000..87c512090
--- /dev/null
+++ b/snippets/python/s/to-binary.md
@@ -0,0 +1,21 @@
+---
+title: Number to binary
+type: snippet
+language: python
+tags: [math]
+cover: digital-nomad-13
+dateModified: 2020-10-07T19:46:01+03:00
+---
+
+Returns the binary representation of the given number.
+
+- Use `bin()` to convert a given decimal number into its binary equivalent.
+
+```py
+def to_binary(n):
+  return bin(n)
+```
+
+```py
+to_binary(100) # 0b1100100
+```
diff --git a/snippets/python/s/to-dictionary.md b/snippets/python/s/to-dictionary.md
new file mode 100644
index 000000000..3395521eb
--- /dev/null
+++ b/snippets/python/s/to-dictionary.md
@@ -0,0 +1,23 @@
+---
+title: Lists to dictionary
+type: snippet
+language: python
+tags: [list,dictionary]
+excerpt: Combines two lists into a dictionary, using the first one as the keys and the second one as the values.
+cover: purple-sunset
+dateModified: 2020-11-02T19:28:35+02:00
+---
+
+Combines two lists into a dictionary, where the elements of the first one serve as the keys and the elements of the second one serve as the values.
+The values of the first list need to be unique and hashable.
+
+- Use `zip()` in combination with `dict()` to combine the values of the two lists into a dictionary.
+
+```py
+def to_dictionary(keys, values):
+  return dict(zip(keys, values))
+```
+
+```py
+to_dictionary(['a', 'b'], [1, 2]) # { a: 1, b: 2 }
+```
diff --git a/snippets/python/s/to-hex.md b/snippets/python/s/to-hex.md
new file mode 100644
index 000000000..f462d6bfd
--- /dev/null
+++ b/snippets/python/s/to-hex.md
@@ -0,0 +1,22 @@
+---
+title: Number to hex
+type: snippet
+language: python
+tags: [math]
+cover: green-plant
+dateModified: 2020-10-09T09:45:47+03:00
+---
+
+Returns the hexadecimal representation of the given number.
+
+- Use `hex()` to convert a given decimal number into its hexadecimal equivalent.
+
+```py
+def to_hex(dec):
+  return hex(dec)
+```
+
+```py
+to_hex(41) # 0x29
+to_hex(332) # 0x14c
+```
diff --git a/snippets/python/s/to-iso-date.md b/snippets/python/s/to-iso-date.md
new file mode 100644
index 000000000..aa50a7760
--- /dev/null
+++ b/snippets/python/s/to-iso-date.md
@@ -0,0 +1,25 @@
+---
+title: Date to ISO format
+type: snippet
+language: python
+tags: [date]
+cover: succulent-red-light
+dateModified: 2021-01-07T23:30:28+02:00
+---
+
+Converts a date to its ISO-8601 representation.
+
+- Use `datetime.datetime.isoformat()` to convert the given `datetime.datetime` object to an ISO-8601 date.
+
+```py
+from datetime import datetime
+
+def to_iso_date(d):
+  return d.isoformat()
+```
+
+```py
+from datetime import datetime
+
+to_iso_date(datetime(2020, 10, 25)) # 2020-10-25T00:00:00
+```
diff --git a/snippets/python/s/to-roman-numeral.md b/snippets/python/s/to-roman-numeral.md
new file mode 100644
index 000000000..5eb331f6b
--- /dev/null
+++ b/snippets/python/s/to-roman-numeral.md
@@ -0,0 +1,45 @@
+---
+title: Integer to roman numeral
+type: snippet
+language: python
+tags: [math,string]
+cover: tram-car
+dateModified: 2020-11-02T19:28:35+02:00
+---
+
+Converts an integer to its roman numeral representation.
+Accepts value between `1` and `3999` (both inclusive).
+
+- Create a lookup list containing tuples in the form of (roman value, integer).
+- Use a `for` loop to iterate over the values in `lookup`.
+- Use `divmod()` to update `num` with the remainder, adding the roman numeral representation to the result.
+
+```py
+def to_roman_numeral(num):
+  lookup = [
+    (1000, 'M'),
+    (900, 'CM'),
+    (500, 'D'),
+    (400, 'CD'),
+    (100, 'C'),
+    (90, 'XC'),
+    (50, 'L'),
+    (40, 'XL'),
+    (10, 'X'),
+    (9, 'IX'),
+    (5, 'V'),
+    (4, 'IV'),
+    (1, 'I'),
+  ]
+  res = ''
+  for (n, roman) in lookup:
+    (d, num) = divmod(num, n)
+    res += roman * d
+  return res
+```
+
+```py
+to_roman_numeral(3) # 'III'
+to_roman_numeral(11) # 'XI'
+to_roman_numeral(1998) # 'MCMXCVIII'
+```
diff --git a/snippets/python/s/transpose.md b/snippets/python/s/transpose.md
new file mode 100644
index 000000000..ed4189f90
--- /dev/null
+++ b/snippets/python/s/transpose.md
@@ -0,0 +1,23 @@
+---
+title: Transpose matrix
+type: snippet
+language: python
+tags: [list]
+cover: lake-bench
+dateModified: 2020-11-02T19:28:35+02:00
+---
+
+Transposes a two-dimensional list.
+
+- Use `*lst` to get the provided list as tuples.
+- Use `zip()` in combination with `list()` to create the transpose of the given two-dimensional list.
+
+```py
+def transpose(lst):
+  return list(zip(*lst))
+```
+
+```py
+transpose([[1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12]])
+# [(1, 4, 7, 10), (2, 5, 8, 11), (3, 6, 9, 12)]
+```
diff --git a/snippets/python/s/unfold.md b/snippets/python/s/unfold.md
new file mode 100644
index 000000000..2c5ebcbcb
--- /dev/null
+++ b/snippets/python/s/unfold.md
@@ -0,0 +1,29 @@
+---
+title: Unfold list
+type: snippet
+language: python
+tags: [function,list]
+cover: painters-desk
+dateModified: 2020-11-02T19:28:35+02:00
+---
+
+Builds a list, using an iterator function and an initial seed value.
+
+- The iterator function accepts one argument (`seed`) and must always return a list with two elements ([`value`, `nextSeed`]) or `False` to terminate.
+- Use a generator function, `fn_generator`, that uses a `while` loop to call the iterator function and `yield` the `value` until it returns `False`.
+- Use a list comprehension to return the list that is produced by the generator, using the iterator function.
+
+```py
+def unfold(fn, seed):
+  def fn_generator(val):
+    while True:
+      val = fn(val[1])
+      if val == False: break
+      yield val[0]
+  return [i for i in fn_generator([None, seed])]
+```
+
+```py
+f = lambda n: False if n > 50 else [-n, n + 10]
+unfold(f, 10) # [-10, -20, -30, -40, -50]
+```
diff --git a/snippets/python/s/union-by.md b/snippets/python/s/union-by.md
new file mode 100644
index 000000000..5623f864c
--- /dev/null
+++ b/snippets/python/s/union-by.md
@@ -0,0 +1,26 @@
+---
+title: List union based on function
+type: snippet
+language: python
+tags: [list]
+cover: sunrise-over-city
+dateModified: 2020-11-02T19:28:35+02:00
+---
+
+Returns every element that exists in any of the two lists once, after applying the provided function to each element of both.
+
+- Create a `set` by applying `fn` to each element in `a`.
+- Use a list comprehension in combination with `fn` on `b` to only keep values not contained in the previously created set, `_a`.
+- Finally, create a `set` from the previous result and `a` and transform it into a `list`
+
+```py
+def union_by(a, b, fn):
+  _a = set(map(fn, a))
+  return list(set(a + [item for item in b if fn(item) not in _a]))
+```
+
+```py
+from math import floor
+
+union_by([2.1], [1.2, 2.3], floor) # [2.1, 1.2]
+```
diff --git a/snippets/python/s/union.md b/snippets/python/s/union.md
new file mode 100644
index 000000000..70362c0c5
--- /dev/null
+++ b/snippets/python/s/union.md
@@ -0,0 +1,21 @@
+---
+title: List union
+type: snippet
+language: python
+tags: [list]
+cover: river-houses
+dateModified: 2020-11-02T19:28:35+02:00
+---
+
+Returns every element that exists in any of the two lists once.
+
+- Create a `set` with all values of `a` and `b` and convert to a `list`.
+
+```py
+def union(a, b):
+  return list(set(a + b))
+```
+
+```py
+union([1, 2, 3], [4, 3, 2]) # [1, 2, 3, 4]
+```
diff --git a/snippets/python/s/unique-elements.md b/snippets/python/s/unique-elements.md
new file mode 100644
index 000000000..5ed3b5f55
--- /dev/null
+++ b/snippets/python/s/unique-elements.md
@@ -0,0 +1,21 @@
+---
+title: Unique elements in list
+type: snippet
+language: python
+tags: [list]
+cover: cold-mountains
+dateModified: 2020-09-15T16:13:06+03:00
+---
+
+Returns the unique elements in a given list.
+
+- Create a `set` from the list to discard duplicated values, then return a `list` from it.
+
+```py
+def unique_elements(li):
+  return list(set(li))
+```
+
+```py
+unique_elements([1, 2, 2, 3, 4, 3]) # [1, 2, 3, 4]
+```
diff --git a/snippets/python/s/values-only.md b/snippets/python/s/values-only.md
new file mode 100644
index 000000000..09a0dbd6d
--- /dev/null
+++ b/snippets/python/s/values-only.md
@@ -0,0 +1,27 @@
+---
+title: Dictionary values
+type: snippet
+language: python
+tags: [dictionary,list]
+cover: colorful-lounge
+dateModified: 2020-11-02T19:28:35+02:00
+---
+
+Returns a flat list of all the values in a flat dictionary.
+
+- Use `dict.values()` to return the values in the given dictionary.
+- Return a `list()` of the previous result.
+
+```py
+def values_only(flat_dict):
+  return list(flat_dict.values())
+```
+
+```py
+ages = {
+  'Peter': 10,
+  'Isabel': 11,
+  'Anna': 9,
+}
+values_only(ages) # [10, 11, 9]
+```
diff --git a/snippets/python/s/weighted-average.md b/snippets/python/s/weighted-average.md
new file mode 100644
index 000000000..be2bb7b2a
--- /dev/null
+++ b/snippets/python/s/weighted-average.md
@@ -0,0 +1,22 @@
+---
+title: Weighted average
+type: snippet
+language: python
+tags: [math,list]
+cover: digital-nomad-4
+dateModified: 2020-12-24T15:00:53+02:00
+---
+
+Returns the weighted average of two or more numbers.
+
+- Use `sum()` to sum the products of the numbers by their weight and to sum the weights.
+- Use `zip()` and a list comprehension to iterate over the pairs of values and weights.
+
+```py
+def weighted_average(nums, weights):
+  return sum(x * y for x, y in zip(nums, weights)) / sum(weights)
+```
+
+```py
+weighted_average([1, 2, 3], [0.6, 0.2, 0.3]) # 1.72727
+```
diff --git a/snippets/python/s/when.md b/snippets/python/s/when.md
new file mode 100644
index 000000000..683d895f1
--- /dev/null
+++ b/snippets/python/s/when.md
@@ -0,0 +1,23 @@
+---
+title: Apply function when true
+type: snippet
+language: python
+tags: [function]
+cover: interior-10
+dateModified: 2020-11-09T23:56:11+02:00
+---
+
+Tests a value, `x`, against a testing function, conditionally applying a function.
+
+- Check if the value of `predicate()` is `True` for `x` and if so call `when_true()`, otherwise return `x`.
+
+```py
+def when(predicate, when_true):
+  return lambda x: when_true(x) if predicate(x) else x
+```
+
+```py
+double_even_numbers = when(lambda x: x % 2 == 0, lambda x : x * 2)
+double_even_numbers(2) # 4
+double_even_numbers(1) # 1
+```
diff --git a/snippets/python/s/words.md b/snippets/python/s/words.md
new file mode 100644
index 000000000..c2761a442
--- /dev/null
+++ b/snippets/python/s/words.md
@@ -0,0 +1,27 @@
+---
+title: String to words
+type: snippet
+language: python
+tags: [string,regexp]
+cover: rocky-lake
+dateModified: 2020-11-02T19:28:35+02:00
+---
+
+Converts a given string into a list of words.
+
+- Use `re.findall()` with the supplied `pattern` to find all matching substrings.
+- Omit the second argument to use the default regexp, which matches alphanumeric and hyphens.
+
+```py
+import re
+
+def words(s, pattern = '[a-zA-Z-]+'):
+  return re.findall(pattern, s)
+```
+
+```py
+words('I love Python!!') # ['I', 'love', 'Python']
+words('python, javaScript & coffee') # ['python', 'javaScript', 'coffee']
+words('build -q --out one-item', r'\b[a-zA-Z-]+\b')
+# ['build', 'q', 'out', 'one-item']
+```
diff --git a/snippets/python/template.md b/snippets/python/template.md
new file mode 100644
index 000000000..7426e5003
--- /dev/null
+++ b/snippets/python/template.md
@@ -0,0 +1,24 @@
+---
+title: Function name
+type: snippet
+language: python
+tags: [utility]
+cover: image
+dateModified: 2021-06-13T05:00:00-04:00
+---
+
+Explain briefly what the snippet does.
+
+- Explain briefly how the snippet works.
+- Use bullet points for your snippet's explanation.
+- Try to explain everything briefly but clearly.
+
+```py
+def function_name(args):
+  # code
+  return 0
+```
+
+```py
+function_name(val) # result
+```
diff --git a/snippets/react/s/accordion.md b/snippets/react/s/accordion.md
new file mode 100644
index 000000000..96f11c2b0
--- /dev/null
+++ b/snippets/react/s/accordion.md
@@ -0,0 +1,87 @@
+---
+title: Collapsible accordion
+type: snippet
+language: react
+tags: [components,children,state]
+cover: beach-pineapple
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Renders an accordion menu with multiple collapsible content elements.
+
+- Define an `AccordionItem` component, that renders a `<button>`. The button updates the component and notifies its parent via the `handleClick` callback.
+- Use the `isCollapsed` prop in `AccordionItem` to determine its appearance and set its `className`.
+- Define an `Accordion` component. Use the `useState()` hook to initialize the value of the `bindIndex` state variable to `defaultIndex`.
+- Filter `children` to remove unnecessary nodes except for `AccordionItem` by identifying the function's name.
+- Use `Array.prototype.map()` on the collected nodes to render the individual collapsible elements.
+- Define `changeItem`, which will be executed when clicking an `AccordionItem`'s `<button>`.
+- `changeItem` executes the passed callback, `onItemClick`, and updates `bindIndex` based on the clicked element.
+
+```css
+.accordion-item.collapsed {
+  display: none;
+}
+
+.accordion-item.expanded {
+  display: block;
+}
+
+.accordion-button {
+  display: block;
+  width: 100%;
+}
+```
+
+```jsx
+const AccordionItem = ({ label, isCollapsed, handleClick, children }) => {
+  return (
+    <>
+      <button className="accordion-button" onClick={handleClick}>
+        {label}
+      </button>
+      <div
+        className={`accordion-item ${isCollapsed ? 'collapsed' : 'expanded'}`}
+        aria-expanded={isCollapsed}
+      >
+        {children}
+      </div>
+    </>
+  );
+};
+
+const Accordion = ({ defaultIndex, onItemClick, children }) => {
+  const [bindIndex, setBindIndex] = React.useState(defaultIndex);
+
+  const changeItem = itemIndex => {
+    if (typeof onItemClick === 'function') onItemClick(itemIndex);
+    if (itemIndex !== bindIndex) setBindIndex(itemIndex);
+  };
+  const items = children.filter(item => item.type.name === 'AccordionItem');
+
+  return (
+    <>
+      {items.map(({ props }) => (
+        <AccordionItem
+          isCollapsed={bindIndex !== props.index}
+          label={props.label}
+          handleClick={() => changeItem(props.index)}
+          children={props.children}
+        />
+      ))}
+    </>
+  );
+};
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Accordion defaultIndex="1" onItemClick={console.log}>
+    <AccordionItem label="A" index="1">
+      Lorem ipsum
+    </AccordionItem>
+    <AccordionItem label="B" index="2">
+      Dolor sit amet
+    </AccordionItem>
+  </Accordion>
+);
+```
diff --git a/snippets/react/s/alert.md b/snippets/react/s/alert.md
new file mode 100644
index 000000000..6cdbf8203
--- /dev/null
+++ b/snippets/react/s/alert.md
@@ -0,0 +1,108 @@
+---
+title: Closable alert
+type: snippet
+language: react
+tags: [components,state,effect]
+cover: flower-portrait-1
+dateModified: 2021-01-07T23:57:13+02:00
+---
+
+Renders an alert component with `type` prop.
+
+- Use the `useState()` hook to create the `isShown` and `isLeaving` state variables and set both to `false` initially.
+- Define `timeoutId` to keep the timer instance for clearing on component unmount.
+- Use the `useEffect()` hook to update the value of `isShown` to `true` and clear the interval by using `timeoutId` when the component is unmounted.
+- Define a `closeAlert` function to set the component as removed from the DOM by displaying a fading out animation and set `isShown` to `false` via `setTimeout()`.
+
+```css
+@keyframes leave {
+  0% { opacity: 1 }
+  100% { opacity: 0 }
+}
+
+.alert {
+  padding: 0.75rem 0.5rem;
+  margin-bottom: 0.5rem;
+  text-align: left;
+  padding-right: 40px;
+  border-radius: 4px;
+  font-size: 16px;
+  position: relative;
+}
+
+.alert.warning {
+  color: #856404;
+  background-color: #fff3cd;
+  border-color: #ffeeba;
+}
+
+.alert.error {
+  color: #721c24;
+  background-color: #f8d7da;
+  border-color: #f5c6cb;
+}
+
+.alert.leaving {
+  animation: leave 0.5s forwards;
+}
+
+.alert .close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0 0.75rem;
+  color: #333;
+  border: 0;
+  height: 100%;
+  cursor: pointer;
+  background: none;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.alert .close::after {
+  content: 'x';
+}
+```
+
+```jsx
+const Alert = ({ isDefaultShown = false, timeout = 250, type, message }) => {
+  const [isShown, setIsShown] = React.useState(isDefaultShown);
+  const [isLeaving, setIsLeaving] = React.useState(false);
+
+  let timeoutId = null;
+
+  React.useEffect(() => {
+    setIsShown(true);
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [isDefaultShown, timeout, timeoutId]);
+
+  const closeAlert = () => {
+    setIsLeaving(true);
+    timeoutId = setTimeout(() => {
+      setIsLeaving(false);
+      setIsShown(false);
+    }, timeout);
+  };
+
+  return (
+    isShown && (
+      <div
+        className={`alert ${type} ${isLeaving ? 'leaving' : ''}`}
+        role="alert"
+      >
+        <button className="close" onClick={closeAlert} />
+        {message}
+      </div>
+    )
+  );
+};
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Alert type="info" message="This is info" />
+);
+```
diff --git a/snippets/react/s/auto-link.md b/snippets/react/s/auto-link.md
new file mode 100644
index 000000000..bbb29c4d1
--- /dev/null
+++ b/snippets/react/s/auto-link.md
@@ -0,0 +1,42 @@
+---
+title: Automatic text linking
+type: snippet
+language: react
+tags: [components,fragment,regexp]
+author: chalarangelo
+cover: red-petals
+dateModified: 2020-11-03T20:42:15+02:00
+---
+
+Renders a string as plaintext, with URLs converted to appropriate link elements.
+
+- Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.
+- Return matched URLs rendered as `<a>` elements, dealing with missing protocol prefixes if necessary.
+- Render the rest of the string as plaintext.
+
+```jsx
+const AutoLink = ({ text }) => {
+  const delimiter = /((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\-]{1,61}[a-z0-9])?\.[^\.|\s])+[a-z\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\/~#&=;%+?\-\\(\\)]*)/gi;
+
+  return (
+    <>
+      {text.split(delimiter).map(word => {
+        const match = word.match(delimiter);
+        if (match) {
+          const url = match[0];
+          return (
+            <a href={url.startsWith('http') ? url : `http://${url}`}>{url}</a>
+          );
+        }
+        return word;
+      })}
+    </>
+  );
+};
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <AutoLink text="foo bar baz http://example.org bar" />
+);
+```
diff --git a/snippets/react/s/callto.md b/snippets/react/s/callto.md
new file mode 100644
index 000000000..d1e65e703
--- /dev/null
+++ b/snippets/react/s/callto.md
@@ -0,0 +1,27 @@
+---
+title: Callable telephone link
+type: snippet
+language: react
+tags: [components]
+author: chalarangelo
+unlisted: true
+cover: rabbit-call
+dateModified: 2021-01-04T12:32:47+02:00
+---
+
+Renders a link formatted to call a phone number (`tel:` link).
+
+- Use `phone` to create a `<a>` element with an appropriate `href` attribute.
+- Render the link with `children` as its content.
+
+```jsx
+const Callto = ({ phone, children }) => {
+  return <a href={`tel:${phone}`}>{children}</a>;
+};
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Callto phone="+302101234567">Call me!</Callto>
+);
+```
diff --git a/snippets/react/s/carousel.md b/snippets/react/s/carousel.md
new file mode 100644
index 000000000..a95f523ea
--- /dev/null
+++ b/snippets/react/s/carousel.md
@@ -0,0 +1,68 @@
+---
+title: Carousel
+type: snippet
+language: react
+tags: [components,children,state,effect]
+cover: shell-focus
+dateModified: 2020-11-03T20:42:15+02:00
+---
+
+Renders a carousel component.
+
+- Use the `useState()` hook to create the `active` state variable and give it a value of `0` (index of the first item).
+- Use the `useEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout()`.
+- Compute the `className` for each carousel item while mapping over them and applying it accordingly.
+- Render the carousel items using `React.cloneElement()` and pass down `...rest` along with the computed `className`.
+
+```css
+.carousel {
+  position: relative;
+}
+
+.carousel-item {
+  position: absolute;
+  visibility: hidden;
+}
+
+.carousel-item.visible {
+  visibility: visible;
+}
+```
+
+```jsx
+const Carousel = ({ carouselItems, ...rest }) => {
+  const [active, setActive] = React.useState(0);
+  let scrollInterval = null;
+
+  React.useEffect(() => {
+    scrollInterval = setTimeout(() => {
+      setActive((active + 1) % carouselItems.length);
+    }, 2000);
+    return () => clearTimeout(scrollInterval);
+  });
+
+  return (
+    <div className="carousel">
+      {carouselItems.map((item, index) => {
+        const activeClass = active === index ? ' visible' : '';
+        return React.cloneElement(item, {
+          ...rest,
+          className: `carousel-item${activeClass}`
+        });
+      })}
+    </div>
+  );
+};
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Carousel
+    carouselItems={[
+      <div>carousel item 1</div>,
+      <div>carousel item 2</div>,
+      <div>carousel item 3</div>
+    ]}
+  />
+);
+```
diff --git a/snippets/react/s/collapse.md b/snippets/react/s/collapse.md
new file mode 100644
index 000000000..f86f1756e
--- /dev/null
+++ b/snippets/react/s/collapse.md
@@ -0,0 +1,62 @@
+---
+title: Collapsible content
+type: snippet
+language: react
+tags: [components,children,state]
+cover: washed-ashore
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Renders a component with collapsible content.
+
+- Use the `useState()` hook to create the `isCollapsed` state variable. Give it an initial value of `collapsed`.
+- Use the `<button>` to change the component's `isCollapsed` state and the content of the component, passed down via `children`.
+- Use `isCollapsed` to determine the appearance of the content and apply the appropriate `className`.
+- Update the value of the `aria-expanded` attribute based on `isCollapsed` to make the component accessible.
+
+```css
+.collapse-button {
+  display: block;
+  width: 100%;
+}
+
+.collapse-content.collapsed {
+  display: none;
+}
+
+.collapsed-content.expanded {
+  display: block;
+}
+```
+
+```jsx
+const Collapse = ({ collapsed, children }) => {
+  const [isCollapsed, setIsCollapsed] = React.useState(collapsed);
+
+  return (
+    <>
+      <button
+        className="collapse-button"
+        onClick={() => setIsCollapsed(!isCollapsed)}
+      >
+        {isCollapsed ? 'Show' : 'Hide'} content
+      </button>
+      <div
+        className={`collapse-content ${isCollapsed ? 'collapsed' : 'expanded'}`}
+        aria-expanded={isCollapsed}
+      >
+        {children}
+      </div>
+    </>
+  );
+};
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Collapse>
+    <h1>This is a collapse</h1>
+    <p>Hello world!</p>
+  </Collapse>
+);
+```
diff --git a/snippets/react/s/controlled-input.md b/snippets/react/s/controlled-input.md
new file mode 100644
index 000000000..981f35ba2
--- /dev/null
+++ b/snippets/react/s/controlled-input.md
@@ -0,0 +1,45 @@
+---
+title: Controlled input field
+type: snippet
+language: react
+tags: [components,input]
+cover: digital-nomad-5
+dateModified: 2020-11-03T21:08:39+02:00
+---
+
+Renders a controlled `<input>` element that uses a callback function to inform its parent about value updates.
+
+- Use the `value` passed down from the parent as the controlled input field's value.
+- Use the `onChange` event to fire the `onValueChange` callback and send the new value to the parent.
+- The parent must update the input field's `value` prop in order for its value to change on user input.
+
+```jsx
+const ControlledInput = ({ value, onValueChange, ...rest }) => {
+  return (
+    <input
+      value={value}
+      onChange={({ target: { value } }) => onValueChange(value)}
+      {...rest}
+    />
+  );
+};
+```
+
+```jsx
+const Form = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <ControlledInput
+      type="text"
+      placeholder="Insert some text here..."
+      value={value}
+      onValueChange={setValue}
+    />
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Form />
+);
+```
diff --git a/snippets/react/s/count-down.md b/snippets/react/s/count-down.md
new file mode 100644
index 000000000..d75f0e17c
--- /dev/null
+++ b/snippets/react/s/count-down.md
@@ -0,0 +1,67 @@
+---
+title: Countdown timer
+type: snippet
+language: react
+tags: [components,state]
+cover: sea-view-2
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Renders a countdown timer that prints a message when it reaches zero.
+
+- Use the `useState()` hook to create a state variable to hold the time value. Initialize it from the props and destructure it into its components.
+- Use the `useState()` hook to create the `paused` and `over` state variables, used to prevent the timer from ticking if it's paused or the time has run out.
+- Create a method `tick`, that updates the time values based on the current value (i.e. decreasing the time by one second).
+- Create a method `reset`, that resets all state variables to their initial states.
+- Use the the `useEffect()` hook to call the `tick` method every second via the use of `setInterval()` and use `clearInterval()` to clean up when the component is unmounted.
+- Use `String.prototype.padStart()` to pad each part of the time array to two characters to create the visual representation of the timer.
+
+```jsx
+const CountDown = ({ hours = 0, minutes = 0, seconds = 0 }) => {
+  const [paused, setPaused] = React.useState(false);
+  const [over, setOver] = React.useState(false);
+  const [[h, m, s], setTime] = React.useState([hours, minutes, seconds]);
+
+  const tick = () => {
+    if (paused || over) return;
+    if (h === 0 && m === 0 && s === 0) setOver(true);
+    else if (m === 0 && s === 0) {
+      setTime([h - 1, 59, 59]);
+    } else if (s == 0) {
+      setTime([h, m - 1, 59]);
+    } else {
+      setTime([h, m, s - 1]);
+    }
+  };
+
+  const reset = () => {
+    setTime([parseInt(hours), parseInt(minutes), parseInt(seconds)]);
+    setPaused(false);
+    setOver(false);
+  };
+
+  React.useEffect(() => {
+    const timerID = setInterval(() => tick(), 1000);
+    return () => clearInterval(timerID);
+  });
+
+  return (
+    <div>
+      <p>{`${h.toString().padStart(2, '0')}:${m
+        .toString()
+        .padStart(2, '0')}:${s.toString().padStart(2, '0')}`}</p>
+      <div>{over ? "Time's up!" : ''}</div>
+      <button onClick={() => setPaused(!paused)}>
+        {paused ? 'Resume' : 'Pause'}
+      </button>
+      <button onClick={() => reset()}>Restart</button>
+    </div>
+  );
+};
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <CountDown hours={1} minutes={45} />
+);
+```
diff --git a/snippets/react/s/data-list.md b/snippets/react/s/data-list.md
new file mode 100644
index 000000000..5c6510880
--- /dev/null
+++ b/snippets/react/s/data-list.md
@@ -0,0 +1,30 @@
+---
+title: Data list
+type: snippet
+language: react
+tags: [components]
+cover: interior-14
+dateModified: 2020-11-03T21:26:34+02:00
+---
+
+Renders a list of elements from an array of primitives.
+
+- Use the value of the `isOrdered` prop to conditionally render an `<ol>` or a `<ul>` list.
+- Use `Array.prototype.map()` to render every item in `data` as a `<li>` element with an appropriate `key`.
+
+```jsx
+const DataList = ({ isOrdered = false, data }) => {
+  const list = data.map((val, i) => <li key={`${i}_${val}`}>{val}</li>);
+  return isOrdered ? <ol>{list}</ol> : <ul>{list}</ul>;
+};
+```
+
+```jsx
+const names = ['John', 'Paul', 'Mary'];
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <>
+    <DataList data={names} />
+    <DataList data={names} isOrdered />
+  </>
+);
+```
diff --git a/snippets/react/s/data-table.md b/snippets/react/s/data-table.md
new file mode 100644
index 000000000..09ff62847
--- /dev/null
+++ b/snippets/react/s/data-table.md
@@ -0,0 +1,43 @@
+---
+title: Data table
+type: snippet
+language: react
+tags: [components]
+cover: armchair
+dateModified: 2020-11-03T21:26:34+02:00
+---
+
+Renders a table with rows dynamically created from an array of primitives.
+
+- Render a `<table>` element with two columns (`ID` and `Value`).
+- Use `Array.prototype.map()` to render every item in `data` as a `<tr>` element with an appropriate `key`.
+
+```jsx
+const DataTable = ({ data }) => {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Value</th>
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((val, i) => (
+          <tr key={`${i}_${val}`}>
+            <td>{i}</td>
+            <td>{val}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+```
+
+```jsx
+const people = ['John', 'Jesse'];
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <DataTable data={people} />
+);
+```
diff --git a/snippets/react/s/file-drop.md b/snippets/react/s/file-drop.md
new file mode 100644
index 000000000..309fb714f
--- /dev/null
+++ b/snippets/react/s/file-drop.md
@@ -0,0 +1,108 @@
+---
+title: File drag and drop area
+type: snippet
+language: react
+tags: [components,input,state,effect,event]
+author: chalarangelo
+cover: man-red-sunset
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Renders a file drag and drop component for a single file.
+
+- Create a ref, called `dropRef` and bind it to the component's wrapper.
+- Use the `useState()` hook to create the `drag` and `filename` variables. Initialize them to `false` and `''` respectively.
+- The variables `dragCounter` and `drag` are used to determine if a file is being dragged, while `filename` is used to store the dropped file's name.
+- Create the `handleDrag`, `handleDragIn`, `handleDragOut` and `handleDrop` methods to handle drag and drop functionality.
+- `handleDrag` prevents the browser from opening the dragged file. `handleDragIn` and `handleDragOut` handle the dragged file entering and exiting the component. `handleDrop` handles the file being dropped and passes it to `onDrop`.
+- Use the `useEffect()` hook to handle each of the drag and drop events using the previously created methods.
+
+```css
+.filedrop {
+  min-height: 120px;
+  border: 3px solid #d3d3d3;
+  text-align: center;
+  font-size: 24px;
+  padding: 32px;
+  border-radius: 4px;
+}
+
+.filedrop.drag {
+  border: 3px dashed #1e90ff;
+}
+
+.filedrop.ready {
+  border: 3px solid #32cd32;
+}
+```
+
+```jsx
+const FileDrop = ({ onDrop }) => {
+  const [drag, setDrag] = React.useState(false);
+  const [filename, setFilename] = React.useState('');
+  let dropRef = React.createRef();
+  let dragCounter = 0;
+
+  const handleDrag = e => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDragIn = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter++;
+    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) setDrag(true);
+  };
+
+  const handleDragOut = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter--;
+    if (dragCounter === 0) setDrag(false);
+  };
+
+  const handleDrop = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDrag(false);
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      onDrop(e.dataTransfer.files[0]);
+      setFilename(e.dataTransfer.files[0].name);
+      e.dataTransfer.clearData();
+      dragCounter = 0;
+    }
+  };
+
+  React.useEffect(() => {
+    let div = dropRef.current;
+    div.addEventListener('dragenter', handleDragIn);
+    div.addEventListener('dragleave', handleDragOut);
+    div.addEventListener('dragover', handleDrag);
+    div.addEventListener('drop', handleDrop);
+    return () => {
+      div.removeEventListener('dragenter', handleDragIn);
+      div.removeEventListener('dragleave', handleDragOut);
+      div.removeEventListener('dragover', handleDrag);
+      div.removeEventListener('drop', handleDrop);
+    };
+  });
+
+  return (
+    <div
+      ref={dropRef}
+      className={
+        drag ? 'filedrop drag' : filename ? 'filedrop ready' : 'filedrop'
+      }
+    >
+      {filename && !drag ? <div>{filename}</div> : <div>Drop a file here!</div>}
+    </div>
+  );
+};
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <FileDrop onDrop={console.log} />
+);
+```
diff --git a/snippets/react/s/lazy-load-image.md b/snippets/react/s/lazy-load-image.md
new file mode 100644
index 000000000..7a857edc2
--- /dev/null
+++ b/snippets/react/s/lazy-load-image.md
@@ -0,0 +1,80 @@
+---
+title: Lazy-loading image
+type: snippet
+language: react
+tags: [components,effect,state]
+cover: strawberries
+author: chalarangelo
+dateModified: 2022-07-29T05:00:00-04:00
+---
+
+Renders an image that supports lazy loading.
+
+- Use the `useState()` hook to create a stateful value that indicates if the image has been loaded.
+- Use the `useEffect()` hook to check if the `HTMLImageElement.prototype` contains `'loading'`, effectively checking if lazy loading is supported natively. If not, create a new `IntersectionObserver` and use `IntersectionObserver.observer()` to observer the `<img>` element. Use the `return` value of the hook to clean up when the component unmounts.
+- Use the `useCallback()` hook to memoize a callback function for the `IntersectionObserver`. This callback will update the `isLoaded` state variable and use `IntersectionObserver.disconnect()` to disconnect the `IntersectionObserver` instance.
+- Use the `useRef()` hook to create two refs. One will hold the `<img>` element and the other the `IntersectionObserver` instance, if necessary.
+- Finally, render the `<img>` element with the given attributes. Apply `loading='lazy'` to make it load lazily, if necessary. Use `isLoaded` to determine the value of the `src` attribute.
+
+```jsx
+const LazyLoadImage = ({
+  alt,
+  src,
+  className,
+  loadInitially = false,
+  observerOptions = { root: null, rootMargin: '200px 0px' },
+  ...props
+}) => {
+  const observerRef = React.useRef(null);
+  const imgRef = React.useRef(null);
+  const [isLoaded, setIsLoaded] = React.useState(loadInitially);
+
+  const observerCallback = React.useCallback(
+    entries => {
+      if (entries[0].isIntersecting) {
+        observerRef.current.disconnect();
+        setIsLoaded(true);
+      }
+    },
+    [observerRef]
+  );
+
+  React.useEffect(() => {
+    if (loadInitially) return;
+
+    if ('loading' in HTMLImageElement.prototype) {
+      setIsLoaded(true);
+      return;
+    }
+
+    observerRef.current = new IntersectionObserver(
+      observerCallback,
+      observerOptions
+    );
+    observerRef.current.observe(imgRef.current);
+    return () => {
+      observerRef.current.disconnect();
+    };
+  }, []);
+
+  return (
+    <img
+      alt={alt}
+      src={isLoaded ? src : ''}
+      ref={imgRef}
+      className={className}
+      loading={loadInitially ? undefined : 'lazy'}
+      {...props}
+    />
+  );
+};
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <LazyLoadImage
+    src="https://picsum.photos/id/1080/600/600"
+    alt="Strawberries"
+  />
+);
+```
diff --git a/snippets/react/s/limited-textarea.md b/snippets/react/s/limited-textarea.md
new file mode 100644
index 000000000..7fa43e6fa
--- /dev/null
+++ b/snippets/react/s/limited-textarea.md
@@ -0,0 +1,47 @@
+---
+title: Textarea with character limit
+type: snippet
+language: react
+tags: [components,state,callback,event]
+cover: flower-portrait-2
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Renders a textarea component with a character limit.
+
+- Use the `useState()` hook to create the `content` state variable. Set its value to that of `value` prop, trimmed down to `limit` characters.
+- Create a method `setFormattedContent`, which trims the content down to `limit` characters and memoize it, using the `useCallback()` hook.
+- Bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of the fired event.
+
+```jsx
+const LimitedTextarea = ({ rows, cols, value, limit }) => {
+  const [content, setContent] = React.useState(value.slice(0, limit));
+
+  const setFormattedContent = React.useCallback(
+    text => {
+      setContent(text.slice(0, limit));
+    },
+    [limit, setContent]
+  );
+
+  return (
+    <>
+      <textarea
+        rows={rows}
+        cols={cols}
+        onChange={event => setFormattedContent(event.target.value)}
+        value={content}
+      />
+      <p>
+        {content.length}/{limit}
+      </p>
+    </>
+  );
+};
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <LimitedTextarea limit={32} value="Hello!" />
+);
+```
diff --git a/snippets/react/s/limited-word-textarea.md b/snippets/react/s/limited-word-textarea.md
new file mode 100644
index 000000000..93b1828c4
--- /dev/null
+++ b/snippets/react/s/limited-word-textarea.md
@@ -0,0 +1,64 @@
+---
+title: Textarea with word limit
+type: snippet
+language: react
+tags: [components,input,state,callback,effect,event]
+cover: painters-desk
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Renders a textarea component with a word limit.
+
+- Use the `useState()` hook to create a state variable, containing `content` and `wordCount`. Use the `value` prop and `0` as the initial values respectively.
+- Use the `useCallback()` hooks to create a memoized function, `setFormattedContent`, that uses `String.prototype.split()` to turn the input into an array of words.
+- Check if the result of applying `Array.prototype.filter()` combined with `Boolean` has a `length` longer than `limit`. If it does, trim the input. Otherwise return the raw input, updating state accordingly in both cases.
+- Use the `useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable during the initial render.
+- Bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.
+
+```jsx
+const LimitedWordTextarea = ({ rows, cols, value, limit }) => {
+  const [{ content, wordCount }, setContent] = React.useState({
+    content: value,
+    wordCount: 0
+  });
+
+  const setFormattedContent = React.useCallback(
+    text => {
+      let words = text.split(' ').filter(Boolean);
+      if (words.length > limit) {
+        setContent({
+          content: words.slice(0, limit).join(' '),
+          wordCount: limit
+        });
+      } else {
+        setContent({ content: text, wordCount: words.length });
+      }
+    },
+    [limit, setContent]
+  );
+
+  React.useEffect(() => {
+    setFormattedContent(content);
+  }, []);
+
+  return (
+    <>
+      <textarea
+        rows={rows}
+        cols={cols}
+        onChange={event => setFormattedContent(event.target.value)}
+        value={content}
+      />
+      <p>
+        {wordCount}/{limit}
+      </p>
+    </>
+  );
+};
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <LimitedWordTextarea limit={5} value="Hello there!" />
+);
+```
diff --git a/snippets/react/s/loader.md b/snippets/react/s/loader.md
new file mode 100644
index 000000000..12849d7d8
--- /dev/null
+++ b/snippets/react/s/loader.md
@@ -0,0 +1,71 @@
+---
+title: Spinning loader
+type: snippet
+language: react
+tags: [components]
+cover: godray-computer-mug
+dateModified: 2020-11-16T15:17:26+02:00
+---
+
+Renders a spinning loader component.
+
+- Render an SVG, whose `height` and `width` are determined by the `size` prop.
+- Use CSS to animate the SVG, creating a spinning animation.
+
+```css
+.loader {
+  animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loader circle {
+  animation: dash 1.5s ease-in-out infinite;
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+```
+
+```jsx
+const Loader = ({ size }) => {
+  return (
+    <svg
+      className="loader"
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="10" />
+    </svg>
+  );
+};
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Loader size={24} />
+);
+```
diff --git a/snippets/react/s/mailto.md b/snippets/react/s/mailto.md
new file mode 100644
index 000000000..d105da46a
--- /dev/null
+++ b/snippets/react/s/mailto.md
@@ -0,0 +1,33 @@
+---
+title: Email link
+type: snippet
+language: react
+tags: [components]
+author: chalarangelo
+cover: digital-nomad-4
+dateModified: 2020-11-16T15:17:26+02:00
+---
+
+Renders a link formatted to send an email (`mailto:` link).
+
+- Use the `email`, `subject` and `body` props to create a `<a>` element with an appropriate `href` attribute.
+- Use `encodeURIcomponent` to safely encode the `subject` and `body` into the link URL.
+- Render the link with `children` as its content.
+
+```jsx
+const Mailto = ({ email, subject = '', body = '', children }) => {
+  let params = subject || body ? '?' : '';
+  if (subject) params += `subject=${encodeURIComponent(subject)}`;
+  if (body) params += `${subject ? '&' : ''}body=${encodeURIComponent(body)}`;
+
+  return <a href={`mailto:${email}${params}`}>{children}</a>;
+};
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Mailto email="foo@bar.baz" subject="Hello & Welcome" body="Hello world!">
+    Mail me!
+  </Mailto>
+);
+```
diff --git a/snippets/react/s/mapped-table.md b/snippets/react/s/mapped-table.md
new file mode 100644
index 000000000..877c02356
--- /dev/null
+++ b/snippets/react/s/mapped-table.md
@@ -0,0 +1,57 @@
+---
+title: Object table view
+type: snippet
+language: react
+tags: [components,array,object]
+cover: waves-from-above-2
+dateModified: 2020-09-06T14:20:45+03:00
+---
+
+Renders a table with rows dynamically created from an array of objects and a list of property names.
+
+- Use `Object.keys()`, `Array.prototype.filter()`, `Array.prototype.includes()` and `Array.prototype.reduce()` to produce a `filteredData` array, containing all objects with the keys specified in `propertyNames`.
+- Render a `<table>` element with a set of columns equal to the amount of values in `propertyNames`.
+- Use `Array.prototype.map()` to render each value in the `propertyNames` array as a `<th>` element.
+- Use `Array.prototype.map()` to render each object in the `filteredData` array as a `<tr>` element, containing a `<td>` for each key in the object.
+- **Note:** This component does not work with nested objects and will break if there are nested objects inside any of the properties specified in `propertyNames`.
+
+```jsx
+const MappedTable = ({ data, propertyNames }) => {
+  let filteredData = data.map(v =>
+    Object.keys(v)
+      .filter(k => propertyNames.includes(k))
+      .reduce((acc, key) => ((acc[key] = v[key]), acc), {})
+  );
+  return (
+    <table>
+      <thead>
+        <tr>
+          {propertyNames.map(val => (
+            <th key={`h_${val}`}>{val}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {filteredData.map((val, i) => (
+          <tr key={`i_${i}`}>
+            {propertyNames.map(p => (
+              <td key={`i_${i}_${p}`}>{val[p]}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+```
+
+```jsx
+const people = [
+  { name: 'John', surname: 'Smith', age: 42 },
+  { name: 'Adam', surname: 'Smith', gender: 'male' }
+];
+const propertyNames = ['name', 'surname', 'age'];
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MappedTable data={people} propertyNames={propertyNames} />
+);
+```
diff --git a/snippets/react/s/modal.md b/snippets/react/s/modal.md
new file mode 100644
index 000000000..1b62ea6aa
--- /dev/null
+++ b/snippets/react/s/modal.md
@@ -0,0 +1,158 @@
+---
+title: Modal dialog
+type: snippet
+language: react
+tags: [components,effect]
+cover: yellow-white-mug-2
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Renders a Modal component, controllable through events.
+
+- Define a `keydownHandler` that handles all keyboard events and calls `onClose` when the `Esc` key is pressed.
+- Use the `useEffect()` hook to add or remove the `keydown` event listener to the `Document`, calling `keydownHandler` for every event.
+- Add a styled `<span>` element that acts as a close button, calling `onClose` when clicked.
+- Use the `isVisible` prop passed down from the parent to determine if the modal should be displayed or not.
+- To use the component, import `Modal` only once and then display it by passing a boolean value to the `isVisible` attribute.
+
+```css
+.modal {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.25);
+  animation-name: appear;
+  animation-duration: 300ms;
+}
+
+.modal-dialog {
+  width: 100%;
+  max-width: 550px;
+  background: white;
+  position: relative;
+  margin: 0 20px;
+  max-height: calc(100vh - 40px);
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  -webkit-animation-name: animatetop;
+  -webkit-animation-duration: 0.4s;
+  animation-name: slide-in;
+  animation-duration: 0.5s;
+}
+
+.modal-header,
+.modal-footer {
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+}
+
+.modal-header {
+  border-bottom: 1px solid #dbdbdb;
+  justify-content: space-between;
+}
+
+.modal-footer {
+  border-top: 1px solid #dbdbdb;
+  justify-content: flex-end;
+}
+
+.modal-close {
+  cursor: pointer;
+  padding: 1rem;
+  margin: -1rem -1rem -1rem auto;
+}
+
+.modal-body {
+  overflow: auto;
+}
+
+.modal-content {
+  padding: 1rem;
+}
+
+@keyframes appear {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-in {
+  from {
+    transform: translateY(-150px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+```
+
+```jsx
+const Modal = ({ isVisible = false, title, content, footer, onClose }) => {
+  const keydownHandler = ({ key }) => {
+    switch (key) {
+      case 'Escape':
+        onClose();
+        break;
+      default:
+    }
+  };
+
+  React.useEffect(() => {
+    document.addEventListener('keydown', keydownHandler);
+    return () => document.removeEventListener('keydown', keydownHandler);
+  });
+
+  return !isVisible ? null : (
+    <div className="modal" onClick={onClose}>
+      <div className="modal-dialog" onClick={e => e.stopPropagation()}>
+        <div className="modal-header">
+          <h3 className="modal-title">{title}</h3>
+          <span className="modal-close" onClick={onClose}>
+            &times;
+          </span>
+        </div>
+        <div className="modal-body">
+          <div className="modal-content">{content}</div>
+        </div>
+        {footer && <div className="modal-footer">{footer}</div>}
+      </div>
+    </div>
+  );
+};
+```
+
+```jsx
+const App = () => {
+  const [isModal, setModal] = React.useState(false);
+  return (
+    <>
+      <button onClick={() => setModal(true)}>Click Here</button>
+      <Modal
+        isVisible={isModal}
+        title="Modal Title"
+        content={<p>Add your content here</p>}
+        footer={<button>Cancel</button>}
+        onClose={() => setModal(false)}
+      />
+    </>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
+```
diff --git a/snippets/react/s/multiselect-checkbox.md b/snippets/react/s/multiselect-checkbox.md
new file mode 100644
index 000000000..04b0da1b8
--- /dev/null
+++ b/snippets/react/s/multiselect-checkbox.md
@@ -0,0 +1,59 @@
+---
+title: Stateful checkbox with multiple selection
+type: snippet
+language: react
+tags: [components,input,state,array]
+cover: violin
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component.
+
+- Use the `useState()` hook to create the `data` state variable and use the `options` prop to initialize its value.
+- Create a `toggle` function that uses the spread operator (`...`) and `Array.prototype.splice()` to update the `data` state variable and call the `onChange` callback with any `checked` options.
+- Use `Array.prototype.map()` to map the `data` state variable to individual `<input type="checkbox">` elements. Wrap each one in a `<label>`, binding the `onClick` handler to the `toggle` function.
+
+```jsx
+const MultiselectCheckbox = ({ options, onChange }) => {
+  const [data, setData] = React.useState(options);
+
+  const toggle = index => {
+    const newData = [...data];
+    newData.splice(index, 1, {
+      label: data[index].label,
+      checked: !data[index].checked
+    });
+    setData(newData);
+    onChange(newData.filter(x => x.checked));
+  };
+
+  return (
+    <>
+      {data.map((item, index) => (
+        <label key={item.label}>
+          <input
+            readOnly
+            type="checkbox"
+            checked={item.checked || false}
+            onClick={() => toggle(index)}
+          />
+          {item.label}
+        </label>
+      ))}
+    </>
+  );
+};
+```
+
+```jsx
+const options = [{ label: 'Item One' }, { label: 'Item Two' }];
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MultiselectCheckbox
+    options={options}
+    onChange={data => {
+      console.log(data);
+    }}
+  />
+);
+```
diff --git a/snippets/react/s/password-revealer.md b/snippets/react/s/password-revealer.md
new file mode 100644
index 000000000..0587fbb6e
--- /dev/null
+++ b/snippets/react/s/password-revealer.md
@@ -0,0 +1,32 @@
+---
+title: Show/hide password toggle
+type: snippet
+language: react
+tags: [components,input,state]
+author: chalarangelo
+cover: thread
+dateModified: 2020-11-25T20:46:35+02:00
+---
+
+Renders a password input field with a reveal button.
+
+- Use the `useState()` hook to create the `shown` state variable and set its value to `false`.
+- When the `<button>` is clicked, execute `setShown`, toggling the `type` of the `<input>` between `'text'` and `'password'`.
+
+```jsx
+const PasswordRevealer = ({ value }) => {
+  const [shown, setShown] = React.useState(false);
+  return (
+    <>
+      <input type={shown ? 'text' : 'password'} value={value} />
+      <button onClick={() => setShown(!shown)}>Show/Hide</button>
+    </>
+  );
+};
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <PasswordRevealer />
+);
+```
diff --git a/snippets/react/s/ripple-button.md b/snippets/react/s/ripple-button.md
new file mode 100644
index 000000000..e25a372bd
--- /dev/null
+++ b/snippets/react/s/ripple-button.md
@@ -0,0 +1,111 @@
+---
+title: Button with ripple effect
+type: snippet
+language: react
+tags: [components,state,effect]
+author: chalarangelo
+cover: mountain-lake-cottage
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Renders a button that animates a ripple effect when clicked.
+
+- Use the `useState()` hook to create the `coords` and `isRippling` state variables. These are used for the pointer's coordinates and the animation state of the button respectively.
+- Use a `useEffect()` hook to change the value of `isRippling` every time the `coords` state variable changes, starting the animation.
+- Use `setTimeout()` in the previous hook to clear the animation after it's done playing.
+- Use a `useEffect()` hook to reset `coords` whenever the `isRippling` state variable is `false`.
+- Handle the `onClick` event by updating the `coords` state variable and calling the passed callback.
+
+```css
+.ripple-button {
+  border-radius: 4px;
+  border: none;
+  margin: 8px;
+  padding: 14px 24px;
+  background: #1976d2;
+  color: #fff;
+  overflow: hidden;
+  position: relative;
+  cursor: pointer;
+}
+
+.ripple-button > .ripple {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  background: #63a4ff;
+  display: block;
+  content: "";
+  border-radius: 9999px;
+  opacity: 1;
+  animation: 0.9s ease 1 forwards ripple-effect;
+}
+
+@keyframes ripple-effect {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(10);
+    opacity: 0.375;
+  }
+  100% {
+    transform: scale(35);
+    opacity: 0;
+  }
+}
+
+.ripple-button > .content {
+  position: relative;
+  z-index: 2;
+}
+```
+
+```jsx
+const RippleButton = ({ children, onClick }) => {
+  const [coords, setCoords] = React.useState({ x: -1, y: -1 });
+  const [isRippling, setIsRippling] = React.useState(false);
+
+  React.useEffect(() => {
+    if (coords.x !== -1 && coords.y !== -1) {
+      setIsRippling(true);
+      setTimeout(() => setIsRippling(false), 300);
+    } else setIsRippling(false);
+  }, [coords]);
+
+  React.useEffect(() => {
+    if (!isRippling) setCoords({ x: -1, y: -1 });
+  }, [isRippling]);
+
+  return (
+    <button
+      className="ripple-button"
+      onClick={e => {
+        const rect = e.target.getBoundingClientRect();
+        setCoords({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+        onClick && onClick(e);
+      }}
+    >
+      {isRippling ? (
+        <span
+          className="ripple"
+          style={{
+            left: coords.x,
+            top: coords.y
+          }}
+        />
+      ) : (
+        ''
+      )}
+      <span className="content">{children}</span>
+    </button>
+  );
+};
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <RippleButton onClick={e => console.log(e)}>Click me</RippleButton>
+);
+```
diff --git a/snippets/react/s/select.md b/snippets/react/s/select.md
new file mode 100644
index 000000000..9c964ddc2
--- /dev/null
+++ b/snippets/react/s/select.md
@@ -0,0 +1,49 @@
+---
+title: Uncontrolled select element
+type: snippet
+language: react
+tags: [components,input]
+cover: down-the-stream
+dateModified: 2020-11-25T20:46:35+02:00
+---
+
+Renders an uncontrolled `<select>` element that uses a callback function to pass its value to the parent component.
+
+- Use the the `selectedValue` prop as the `defaultValue` of the `<select>` element to set its initial value..
+- Use the `onChange` event to fire the `onValueChange` callback and send the new value to the parent.
+- Use `Array.prototype.map()` on the `values` array to create an `<option>` element for each passed value.
+- Each item in `values` must be a 2-element array, where the first element is the `value` of the item and the second one is the displayed text for it.
+
+```jsx
+const Select = ({ values, onValueChange, selectedValue, ...rest }) => {
+  return (
+    <select
+      defaultValue={selectedValue}
+      onChange={({ target: { value } }) => onValueChange(value)}
+      {...rest}
+    >
+      {values.map(([value, text]) => (
+        <option key={value} value={value}>
+          {text}
+        </option>
+      ))}
+    </select>
+  );
+};
+```
+
+```jsx
+const choices = [
+  ['grapefruit', 'Grapefruit'],
+  ['lime', 'Lime'],
+  ['coconut', 'Coconut'],
+  ['mango', 'Mango'],
+];
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Select
+    values={choices}
+    selectedValue="lime"
+    onValueChange={val => console.log(val)}
+  />
+);
+```
diff --git a/snippets/react/s/slider.md b/snippets/react/s/slider.md
new file mode 100644
index 000000000..73ba2329e
--- /dev/null
+++ b/snippets/react/s/slider.md
@@ -0,0 +1,41 @@
+---
+title: Uncontrolled range input
+type: snippet
+language: react
+tags: [components,input]
+cover: solitude-beach
+dateModified: 2020-11-25T20:46:35+02:00
+---
+
+Renders an uncontrolled range input element that uses a callback function to pass its value to the parent component.
+
+- Set the `type` of the `<input>` element to `"range"` to create a slider.
+- Use the `defaultValue` passed down from the parent as the uncontrolled input field's initial value.
+- Use the `onChange` event to fire the `onValueChange` callback and send the new value to the parent.
+
+```jsx
+const Slider = ({
+  min = 0,
+  max = 100,
+  defaultValue,
+  onValueChange,
+  ...rest
+}) => {
+  return (
+    <input
+      type="range"
+      min={min}
+      max={max}
+      defaultValue={defaultValue}
+      onChange={({ target: { value } }) => onValueChange(value)}
+      {...rest}
+    />
+  );
+};
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Slider onValueChange={val => console.log(val)} />
+);
+```
diff --git a/snippets/react/s/star-rating.md b/snippets/react/s/star-rating.md
new file mode 100644
index 000000000..b01c5ccf0
--- /dev/null
+++ b/snippets/react/s/star-rating.md
@@ -0,0 +1,66 @@
+---
+title: Star rating
+type: snippet
+language: react
+tags: [components,children,input,state]
+cover: lake-church
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Renders a star rating component.
+
+- Define a `Star` component. It renders each individual star with the appropriate appearance, based on the parent component's state.
+- Define a `StarRating` component. Use the `useState()` hook to define the `rating` and `selection` state variables with the appropriate initial values.
+- Create a method, `hoverOver`, that updates `selected` according to the provided `event`, using the .`data-star-id` attribute of the event's target or resets it to `0` if called with a `null` argument.
+- Use `Array.from()` to create an array of `5` elements and `Array.prototype.map()` to create individual `<Star>` components.
+- Handle the `onMouseOver` and `onMouseLeave` events of the wrapping element using `hoverOver`. Handle the `onClick` event using `setRating`.
+
+```css
+.star {
+  color: #ff9933;
+  cursor: pointer;
+}
+```
+
+```jsx
+const Star = ({ marked, starId }) => {
+  return (
+    <span data-star-id={starId} className="star" role="button">
+      {marked ? '\u2605' : '\u2606'}
+    </span>
+  );
+};
+
+const StarRating = ({ value }) => {
+  const [rating, setRating] = React.useState(parseInt(value) || 0);
+  const [selection, setSelection] = React.useState(0);
+
+  const hoverOver = event => {
+    let val = 0;
+    if (event && event.target && event.target.getAttribute('data-star-id'))
+      val = event.target.getAttribute('data-star-id');
+    setSelection(val);
+  };
+  return (
+    <div
+      onMouseOut={() => hoverOver(null)}
+      onClick={e => setRating(e.target.getAttribute('data-star-id') || rating)}
+      onMouseOver={hoverOver}
+    >
+      {Array.from({ length: 5 }, (v, i) => (
+        <Star
+          starId={i + 1}
+          key={`star_${i + 1}`}
+          marked={selection ? selection >= i + 1 : rating >= i + 1}
+        />
+      ))}
+    </div>
+  );
+};
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <StarRating value={2} />
+);
+```
diff --git a/snippets/react/s/tabs.md b/snippets/react/s/tabs.md
new file mode 100644
index 000000000..8806b6d37
--- /dev/null
+++ b/snippets/react/s/tabs.md
@@ -0,0 +1,96 @@
+---
+title: Tabs
+type: snippet
+language: react
+tags: [components,state,children]
+cover: by-the-lighthouse
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Renders a tabbed menu and view component.
+
+- Define a `Tabs` component. Use the `useState()` hook to initialize the value of the `bindIndex` state variable to `defaultIndex`.
+- Define a `TabItem` component and filter `children` passed to the `Tabs` component to remove unnecessary nodes except for `TabItem` by identifying the function's name.
+- Define `changeTab`, which will be executed when clicking a `<button>` from the menu.
+- `changeTab` executes the passed callback, `onTabClick`, and updates `bindIndex` based on the clicked element.
+- Use `Array.prototype.map()` on the collected nodes to render the menu and view of the tabs.
+- Use the value of `bindIndex` to determine the active tab and apply the correct `className`.
+
+```css
+.tab-menu > button {
+  cursor: pointer;
+  padding: 8px 16px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: none;
+}
+
+.tab-menu > button.focus {
+  border-bottom: 2px solid #007bef;
+}
+
+.tab-menu > button:hover {
+  border-bottom: 2px solid #007bef;
+}
+
+.tab-content {
+  display: none;
+}
+
+.tab-content.selected {
+  display: block;
+}
+```
+
+```jsx
+const TabItem = props => <div {...props} />;
+
+const Tabs = ({ defaultIndex = 0, onTabClick, children }) => {
+  const [bindIndex, setBindIndex] = React.useState(defaultIndex);
+  const changeTab = newIndex => {
+    if (typeof onTabClick === 'function') onTabClick(newIndex);
+    setBindIndex(newIndex);
+  };
+  const items = children.filter(item => item.type.name === 'TabItem');
+
+  return (
+    <div className="wrapper">
+      <div className="tab-menu">
+        {items.map(({ props: { index, label } }) => (
+          <button
+            key={`tab-btn-${index}`}
+            onClick={() => changeTab(index)}
+            className={bindIndex === index ? 'focus' : ''}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+      <div className="tab-view">
+        {items.map(({ props }) => (
+          <div
+            {...props}
+            className={`tab-content ${
+              bindIndex === props.index ? 'selected' : ''
+            }`}
+            key={`tab-content-${props.index}`}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Tabs defaultIndex="1" onTabClick={console.log}>
+    <TabItem label="A" index="1">
+      Lorem ipsum
+    </TabItem>
+    <TabItem label="B" index="2">
+      Dolor sit amet
+    </TabItem>
+  </Tabs>
+);
+```
diff --git a/snippets/react/s/tag-input.md b/snippets/react/s/tag-input.md
new file mode 100644
index 000000000..ea8d6b8e2
--- /dev/null
+++ b/snippets/react/s/tag-input.md
@@ -0,0 +1,123 @@
+---
+title: Tag input field
+type: snippet
+language: react
+tags: [components,input,state]
+cover: interior-4
+dateModified: 2020-11-25T21:12:16+02:00
+---
+
+Renders a tag input field.
+
+- Define a `TagInput` component and use the `useState()` hook to initialize an array from `tags`.
+- Use `Array.prototype.map()` on the collected nodes to render the list of tags.
+- Define the `addTagData` method, which will be executed when pressing the `Enter` key.
+- The `addTagData` method calls `setTagData` to add the new tag using the spread (`...`) operator to prepend the existing tags and add the new tag at the end of the `tagData` array.
+- Define the `removeTagData` method, which will be executed on clicking the delete icon in the tag.
+- Use `Array.prototype.filter()` in the `removeTagData` method to remove the tag using its `index` to filter it out from the `tagData` array.
+
+```css
+.tag-input {
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 48px;
+  padding: 0 8px;
+  border: 1px solid #d6d8da;
+  border-radius: 6px;
+}
+
+.tag-input input {
+  flex: 1;
+  border: none;
+  height: 46px;
+  font-size: 14px;
+  padding: 4px 0 0;
+}
+
+.tag-input input:focus {
+  outline: transparent;
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  margin: 8px 0 0;
+}
+
+.tag {
+  width: auto;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  padding: 0 8px;
+  font-size: 14px;
+  list-style: none;
+  border-radius: 6px;
+  margin: 0 8px 8px 0;
+  background: #0052cc;
+}
+
+.tag-title {
+  margin-top: 3px;
+}
+
+.tag-close-icon {
+  display: block;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  text-align: center;
+  font-size: 14px;
+  margin-left: 8px;
+  color: #0052cc;
+  border-radius: 50%;
+  background: #fff;
+  cursor: pointer;
+}
+```
+
+```jsx
+const TagInput = ({ tags }) => {
+  const [tagData, setTagData] = React.useState(tags);
+  const removeTagData = indexToRemove => {
+    setTagData([...tagData.filter((_, index) => index !== indexToRemove)]);
+  };
+  const addTagData = event => {
+    if (event.target.value !== '') {
+      setTagData([...tagData, event.target.value]);
+      event.target.value = '';
+    }
+  };
+  return (
+    <div className="tag-input">
+      <ul className="tags">
+        {tagData.map((tag, index) => (
+          <li key={index} className="tag">
+            <span className="tag-title">{tag}</span>
+            <span
+              className="tag-close-icon"
+              onClick={() => removeTagData(index)}
+            >
+              x
+            </span>
+          </li>
+        ))}
+      </ul>
+      <input
+        type="text"
+        onKeyUp={event => (event.key === 'Enter' ? addTagData(event) : null)}
+        placeholder="Press enter to add a tag"
+      />
+    </div>
+  );
+};
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <TagInput tags={['Nodejs', 'MongoDB']} />
+);
+```
diff --git a/snippets/react/s/text-area.md b/snippets/react/s/text-area.md
new file mode 100644
index 000000000..5f38d8085
--- /dev/null
+++ b/snippets/react/s/text-area.md
@@ -0,0 +1,42 @@
+---
+title: Uncontrolled textarea element
+type: snippet
+language: react
+tags: [components,input]
+cover: volcano-sunset
+dateModified: 2020-11-25T20:46:35+02:00
+---
+
+Renders an uncontrolled `<textarea>` element that uses a callback function to pass its value to the parent component.
+
+- Use the `defaultValue` passed down from the parent as the uncontrolled input field's initial value.
+- Use the `onChange` event to fire the `onValueChange` callback and send the new value to the parent.
+
+```jsx
+const TextArea = ({
+  cols = 20,
+  rows = 2,
+  defaultValue,
+  onValueChange,
+  ...rest
+}) => {
+  return (
+    <textarea
+      cols={cols}
+      rows={rows}
+      defaultValue={defaultValue}
+      onChange={({ target: { value } }) => onValueChange(value)}
+      {...rest}
+    />
+  );
+};
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <TextArea
+    placeholder="Insert some text here..."
+    onValueChange={val => console.log(val)}
+  />
+);
+```
diff --git a/snippets/react/s/toggle.md b/snippets/react/s/toggle.md
new file mode 100644
index 000000000..1621cf096
--- /dev/null
+++ b/snippets/react/s/toggle.md
@@ -0,0 +1,51 @@
+---
+title: Toggle
+type: snippet
+language: react
+tags: [components,state]
+cover: cows
+dateModified: 2020-11-16T16:50:57+02:00
+---
+
+Renders a toggle component.
+
+- Use the `useState()` hook to initialize the `isToggledOn` state variable to `defaultToggled`.
+- Render an `<input>` and bind its `onClick` event to update the `isToggledOn` state variable, applying the appropriate `className` to the wrapping `<label>`.
+
+```css
+.toggle input[type="checkbox"] {
+  display: none;
+}
+
+.toggle.on {
+  background-color: green;
+}
+
+.toggle.off {
+  background-color: red;
+}
+```
+
+```jsx
+const Toggle = ({ defaultToggled = false }) => {
+  const [isToggleOn, setIsToggleOn] = React.useState(defaultToggled);
+
+  return (
+    <label className={isToggleOn ? 'toggle on' : 'toggle off'}>
+      <input
+        type="checkbox"
+        checked={isToggleOn}
+        onChange={() => setIsToggleOn(!isToggleOn)}
+      />
+      {isToggleOn ? 'ON' : 'OFF'}
+    </label>
+  );
+};
+
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Toggle />
+);
+```
diff --git a/snippets/react/s/tooltip.md b/snippets/react/s/tooltip.md
new file mode 100644
index 000000000..0658643fe
--- /dev/null
+++ b/snippets/react/s/tooltip.md
@@ -0,0 +1,73 @@
+---
+title: Tooltip
+type: snippet
+language: react
+tags: [components,state,children]
+cover: dark-leaves-6
+dateModified: 2020-11-16T15:17:26+02:00
+---
+
+Renders a tooltip component.
+
+- Use the `useState()` hook to create the `show` variable and initialize it to `false`.
+- Render a container element that contains the tooltip element and the `children` passed to the component.
+- Handle the `onMouseEnter` and `onMouseLeave` methods, by altering the value of the `show` variable, toggling the `className` of the tooltip.
+
+```css
+.tooltip-container {
+  position: relative;
+}
+
+.tooltip-box {
+  position: absolute;
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  padding: 5px;
+  border-radius: 5px;
+  top: calc(100% + 5px);
+  display: none;
+}
+
+.tooltip-box.visible {
+  display: block;
+}
+
+.tooltip-arrow {
+  position: absolute;
+  top: -10px;
+  left: 50%;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
+}
+```
+
+```jsx
+const Tooltip = ({ children, text, ...rest }) => {
+  const [show, setShow] = React.useState(false);
+
+  return (
+    <div className="tooltip-container">
+      <div className={show ? 'tooltip-box visible' : 'tooltip-box'}>
+        {text}
+        <span className="tooltip-arrow" />
+      </div>
+      <div
+        onMouseEnter={() => setShow(true)}
+        onMouseLeave={() => setShow(false)}
+        {...rest}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Tooltip text="Simple tooltip">
+    <button>Hover me!</button>
+  </Tooltip>
+);
+```
diff --git a/snippets/react/s/tree-view.md b/snippets/react/s/tree-view.md
new file mode 100644
index 000000000..8feb00d84
--- /dev/null
+++ b/snippets/react/s/tree-view.md
@@ -0,0 +1,142 @@
+---
+title: Expandable object tree view
+type: snippet
+language: react
+tags: [components,object,state,recursion]
+author: chalarangelo
+cover: digital-nomad-9
+dateModified: 2020-11-16T16:50:57+02:00
+---
+
+Renders a tree view of a JSON object or array with collapsible content.
+
+- Use the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded).
+- Use the `useState()` hook to create the `isToggled` state variable and give it the value of the `toggled` prop initially.
+- Render a `<span>` element and bind its `onClick` event to alter the component's `isToggled` state.
+- Determine the appearance of the component, based on `isParentToggled`, `isToggled`, `name` and checking for `Array.isArray()` on `data`.
+- For each child in `data`, determine if it is an object or array and recursively render a sub-tree or a text element with the appropriate style.
+
+```css
+.tree-element {
+  margin: 0 0 0 4px;
+  position: relative;
+}
+
+.tree-element.is-child {
+  margin-left: 16px;
+}
+
+div.tree-element::before {
+  content: '';
+  position: absolute;
+  top: 24px;
+  left: 1px;
+  height: calc(100% - 48px);
+  border-left: 1px solid gray;
+}
+
+p.tree-element {
+  margin-left: 16px;
+}
+
+.toggler {
+  position: absolute;
+  top: 10px;
+  left: 0px;
+  width: 0;
+  height: 0;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 5px solid gray;
+  cursor: pointer;
+}
+
+.toggler.closed {
+  transform: rotate(90deg);
+}
+
+.collapsed {
+  display: none;
+}
+```
+
+```jsx
+const TreeView = ({
+  data,
+  toggled = true,
+  name = null,
+  isLast = true,
+  isChildElement = false,
+  isParentToggled = true
+}) => {
+  const [isToggled, setIsToggled] = React.useState(toggled);
+  const isDataArray = Array.isArray(data);
+
+  return (
+    <div
+      className={`tree-element ${isParentToggled && 'collapsed'} ${
+        isChildElement && 'is-child'
+      }`}
+    >
+      <span
+        className={isToggled ? 'toggler' : 'toggler closed'}
+        onClick={() => setIsToggled(!isToggled)}
+      />
+      {name ? <strong>&nbsp;&nbsp;{name}: </strong> : <span>&nbsp;&nbsp;</span>}
+      {isDataArray ? '[' : '{'}
+      {!isToggled && '...'}
+      {Object.keys(data).map((v, i, a) =>
+        typeof data[v] === 'object' ? (
+          <TreeView
+            key={`${name}-${v}-${i}`}
+            data={data[v]}
+            isLast={i === a.length - 1}
+            name={isDataArray ? null : v}
+            isChildElement
+            isParentToggled={isParentToggled && isToggled}
+          />
+        ) : (
+          <p
+            key={`${name}-${v}-${i}`}
+            className={isToggled ? 'tree-element' : 'tree-element collapsed'}
+          >
+            {isDataArray ? '' : <strong>{v}: </strong>}
+            {data[v]}
+            {i === a.length - 1 ? '' : ','}
+          </p>
+        )
+      )}
+      {isDataArray ? ']' : '}'}
+      {!isLast ? ',' : ''}
+    </div>
+  );
+};
+```
+
+```jsx
+const data = {
+  lorem: {
+    ipsum: 'dolor sit',
+    amet: {
+      consectetur: 'adipiscing',
+      elit: [
+        'duis',
+        'vitae',
+        {
+          semper: 'orci'
+        },
+        {
+          est: 'sed ornare'
+        },
+        'etiam',
+        ['laoreet', 'tincidunt'],
+        ['vestibulum', 'ante']
+      ]
+    },
+    ipsum: 'primis'
+  }
+};
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <TreeView data={data} name="data" />
+);
+```
diff --git a/snippets/react/s/uncontrolled-input.md b/snippets/react/s/uncontrolled-input.md
new file mode 100644
index 000000000..9bf9a878e
--- /dev/null
+++ b/snippets/react/s/uncontrolled-input.md
@@ -0,0 +1,35 @@
+---
+title: Uncontrolled input field
+type: snippet
+language: react
+tags: [components,input]
+cover: digital-nomad-15
+dateModified: 2020-11-03T21:08:39+02:00
+---
+
+Renders an uncontrolled `<input>` element that uses a callback function to inform its parent about value updates.
+
+- Use the `defaultValue` passed down from the parent as the uncontrolled input field's initial value.
+- Use the `onChange` event to fire the `onValueChange` callback and send the new value to the parent.
+
+```jsx
+const UncontrolledInput = ({ defaultValue, onValueChange, ...rest }) => {
+  return (
+    <input
+      defaultValue={defaultValue}
+      onChange={({ target: { value } }) => onValueChange(value)}
+      {...rest}
+    />
+  );
+};
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <UncontrolledInput
+    type="text"
+    placeholder="Insert some text here..."
+    onValueChange={console.log}
+  />
+);
+```
diff --git a/snippets/react/s/use-async.md b/snippets/react/s/use-async.md
new file mode 100644
index 000000000..b8f61fe5e
--- /dev/null
+++ b/snippets/react/s/use-async.md
@@ -0,0 +1,80 @@
+---
+title: React useAsync hook
+type: snippet
+language: react
+tags: [hooks,state,reducer]
+cover: oven-paddle
+dateModified: 2021-01-07T23:57:13+02:00
+---
+
+Handles asynchronous calls.
+
+- Create a custom hook that takes a handler function, `fn`.
+- Define a reducer function and an initial state for the custom hook's state.
+- Use the `useReducer()` hook to initialize the `state` variable and the `dispatch` function.
+- Define an asynchronous `run` function that will run the provided callback, `fn`, while using `dispatch` to update `state` as necessary.
+- Return an object containing the properties of `state` (`value`, `error` and `loading`) and the `run` function.
+
+```jsx
+const useAsync = fn => {
+  const initialState = { loading: false, error: null, value: null };
+  const stateReducer = (_, action) => {
+    switch (action.type) {
+      case 'start':
+        return { loading: true, error: null, value: null };
+      case 'finish':
+        return { loading: false, error: null, value: action.value };
+      case 'error':
+        return { loading: false, error: action.error, value: null };
+    }
+  };
+
+  const [state, dispatch] = React.useReducer(stateReducer, initialState);
+
+  const run = async (args = null) => {
+    try {
+      dispatch({ type: 'start' });
+      const value = await fn(args);
+      dispatch({ type: 'finish', value });
+    } catch (error) {
+      dispatch({ type: 'error', error });
+    }
+  };
+
+  return { ...state, run };
+};
+```
+
+```jsx
+const RandomImage = props => {
+  const imgFetch = useAsync(url =>
+    fetch(url).then(response => response.json())
+  );
+
+  return (
+    <div>
+      <button
+        onClick={() => imgFetch.run('https://dog.ceo/api/breeds/image/random')}
+        disabled={imgFetch.isLoading}
+      >
+        Load image
+      </button>
+      <br />
+      {imgFetch.loading && <div>Loading...</div>}
+      {imgFetch.error && <div>Error {imgFetch.error}</div>}
+      {imgFetch.value && (
+        <img
+          src={imgFetch.value.message}
+          alt="avatar"
+          width={400}
+          height="auto"
+        />
+      )}
+    </div>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <RandomImage />
+);
+```
diff --git a/snippets/react/s/use-body-scroll-lock.md b/snippets/react/s/use-body-scroll-lock.md
new file mode 100644
index 000000000..2fb1765e3
--- /dev/null
+++ b/snippets/react/s/use-body-scroll-lock.md
@@ -0,0 +1,67 @@
+---
+title: React useBodyScrollLock hook
+type: snippet
+language: react
+tags: [hooks,effect]
+author: chalarangelo
+cover: folded-map
+dateModified: 2021-09-02T05:00:00-04:00
+---
+
+Enables body scroll locking.
+
+- Use the `useLayoutEffect()` with an empty array as the second argument to execute the provided callback only once when the component is mounted.
+- Use `Window.getComputedStyle()` to get the `overflow` value of the `body` element and store it in a variable.
+- Replace the `overflow` value of the `body` element with `'hidden'` and restore it to its original value when unmounting.
+
+```jsx
+const useBodyScrollLock = () => {
+  React.useLayoutEffect(() => {
+    const originalStyle = window.getComputedStyle(document.body).overflow;
+    document.body.style.overflow = 'hidden';
+    return () => (document.body.style.overflow = originalStyle);
+  }, []);
+};
+```
+
+```jsx
+const Modal = ({ onClose }) => {
+  useBodyScrollLock();
+
+  return (
+    <div
+      style={{
+        zIndex: 100, background: 'rgba(0,0,0,0.25)', display: 'flex',
+        justifyContent: 'center', alignItems: 'center'
+      }}
+    >
+      <p
+        style={{ padding: 8, borderRadius: 8, background: '#fff' }}
+        onClick={onClose}
+      >
+        Scroll locked! <br /> Click me to unlock
+      </p>
+    </div>
+  );
+};
+
+const MyApp = () => {
+  const [modalOpen, setModalOpen] = React.useState(false);
+
+  return (
+    <div
+      style={{
+        height: '400vh', textAlign: 'center', paddingTop: 100,
+        background: 'linear-gradient(to bottom, #1fa2ff, #12d8fa, #a6ffcb)'
+      }}
+    >
+      <button onClick={() => setModalOpen(true)}>Open modal</button>
+      {modalOpen && <Modal onClose={() => setModalOpen(false)} />}
+    </div>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
+```
diff --git a/snippets/react/s/use-click-inside.md b/snippets/react/s/use-click-inside.md
new file mode 100644
index 000000000..a4732e8a8
--- /dev/null
+++ b/snippets/react/s/use-click-inside.md
@@ -0,0 +1,58 @@
+---
+title: React useClickInside hook
+type: snippet
+language: react
+tags: [hooks,effect,event]
+author: chalarangelo
+cover: digital-nomad-10
+dateModified: 2020-11-16T14:17:53+02:00
+---
+
+Handles the event of clicking inside the wrapped component.
+
+- Create a custom hook that takes a `ref` and a `callback` to handle the `'click'` event.
+- Use the `useEffect()` hook to append and clean up the `click` event.
+- Use the `useRef()` hook to create a `ref` for your click component and pass it to the `useClickInside` hook.
+
+```jsx
+const useClickInside = (ref, callback) => {
+  const handleClick = e => {
+    if (ref.current && ref.current.contains(e.target)) {
+      callback();
+    }
+  };
+  React.useEffect(() => {
+    document.addEventListener('click', handleClick);
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  });
+};
+```
+
+```jsx
+const ClickBox = ({ onClickInside }) => {
+  const clickRef = React.useRef();
+  useClickInside(clickRef, onClickInside);
+  return (
+    <div
+      className="click-box"
+      ref={clickRef}
+      style={{
+        border: '2px dashed orangered',
+        height: 200,
+        width: 400,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }}
+    >
+      <p>Click inside this element</p>
+    </div>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <ClickBox onClickInside={() => alert('click inside')} />
+);
+```
diff --git a/snippets/react/s/use-click-outside.md b/snippets/react/s/use-click-outside.md
new file mode 100644
index 000000000..94d000573
--- /dev/null
+++ b/snippets/react/s/use-click-outside.md
@@ -0,0 +1,58 @@
+---
+title: React useClickOutside hook
+type: snippet
+language: react
+tags: [hooks,effect,event]
+author: chalarangelo
+cover: clutter
+dateModified: 2020-11-16T14:17:53+02:00
+---
+
+Handles the event of clicking outside of the wrapped component.
+
+- Create a custom hook that takes a `ref` and a `callback` to handle the `click` event.
+- Use the `useEffect()` hook to append and clean up the `click` event.
+- Use the `useRef()` hook to create a `ref` for your click component and pass it to the `useClickOutside` hook.
+
+```jsx
+const useClickOutside = (ref, callback) => {
+  const handleClick = e => {
+    if (ref.current && !ref.current.contains(e.target)) {
+      callback();
+    }
+  };
+  React.useEffect(() => {
+    document.addEventListener('click', handleClick);
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  });
+};
+```
+
+```jsx
+const ClickBox = ({ onClickOutside }) => {
+  const clickRef = React.useRef();
+  useClickOutside(clickRef, onClickOutside);
+  return (
+    <div
+      className="click-box"
+      ref={clickRef}
+      style={{
+        border: '2px dashed orangered',
+        height: 200,
+        width: 400,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }}
+    >
+      <p>Click out of this element</p>
+    </div>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <ClickBox onClickOutside={() => alert('click outside')} />
+);
+```
diff --git a/snippets/react/s/use-component-did-mount.md b/snippets/react/s/use-component-did-mount.md
new file mode 100644
index 000000000..fe0b082b6
--- /dev/null
+++ b/snippets/react/s/use-component-did-mount.md
@@ -0,0 +1,34 @@
+---
+title: React useComponentDidMount hook
+type: snippet
+language: react
+tags: [hooks,effect]
+author: chalarangelo
+cover: highlands
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Executes a callback immediately after a component is mounted.
+
+- Use the `useEffect()` hook with an empty array as the second argument. This will execute the provided callback only once when the component is mounted.
+- Behaves like the `componentDidMount()` lifecycle method of class components.
+
+```jsx
+const useComponentDidMount = onMountHandler => {
+  React.useEffect(() => {
+    onMountHandler();
+  }, []);
+};
+```
+
+```jsx
+const Mounter = () => {
+  useComponentDidMount(() => console.log('Component did mount'));
+
+  return <div>Check the console!</div>;
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Mounter />
+);
+```
diff --git a/snippets/react/s/use-component-did-update.md b/snippets/react/s/use-component-did-update.md
new file mode 100644
index 000000000..0630ace99
--- /dev/null
+++ b/snippets/react/s/use-component-did-update.md
@@ -0,0 +1,54 @@
+---
+title: React useComponentDidUpdate hook
+type: snippet
+language: react
+tags: [hooks,effect]
+author: chalarangelo
+cover: flower-portrait-10
+dateModified: 2021-11-09T05:00:00-04:00
+---
+
+Executes a callback immediately after a component is updated.
+
+- Use the `useRef()` hook to create a variable, `mounted`, that tracks if the component has been mounted.
+- Use the `useEffect()` hook to set the value of `mounted` to `true` the first time the hook is executed.
+- Run the provided `callback` on subsequent hook executions.
+- Providing a dependency array for the second argument, `condition`, will only execute the hook if any of the dependencies change.
+- Behaves like the `componentDidUpdate()` lifecycle method of class components.
+
+```jsx
+const useComponentDidUpdate = (callback, condition) => {
+  const mounted = React.useRef(false);
+  React.useEffect(() => {
+    if (mounted.current) callback();
+    else mounted.current = true;
+  }, condition);
+};
+```
+
+```jsx
+const App = () => {
+  const [value, setValue] = React.useState(0);
+  const [otherValue, setOtherValue] = React.useState(1);
+
+  useComponentDidUpdate(() => {
+    console.log(`Current value is ${value}.`);
+  }, [value]);
+
+  return (
+    <>
+      <p>
+        Value: {value}, other value: {otherValue}
+      </p>
+      <button onClick={() => setValue(value + 1)}>Increment value</button>
+      <button onClick={() => setOtherValue(otherValue + 1)}>
+        Increment other value
+      </button>
+    </>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
+```
diff --git a/snippets/react/s/use-component-will-unmount.md b/snippets/react/s/use-component-will-unmount.md
new file mode 100644
index 000000000..fceb226d8
--- /dev/null
+++ b/snippets/react/s/use-component-will-unmount.md
@@ -0,0 +1,37 @@
+---
+title: React useComponentWillUnmount hook
+type: snippet
+language: react
+tags: [hooks,effect]
+author: chalarangelo
+cover: rocky-beach-3
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Executes a callback immediately before a component is unmounted and destroyed.
+
+- Use the `useEffect()` hook with an empty array as the second argument. Return the provided callback to be executed only once before cleanup.
+- Behaves like the `componentWillUnmount()` lifecycle method of class components.
+
+```jsx
+const useComponentWillUnmount = onUnmountHandler => {
+  React.useEffect(
+    () => () => {
+      onUnmountHandler();
+    },
+    []
+  );
+};
+```
+
+```jsx
+const Unmounter = () => {
+  useComponentWillUnmount(() => console.log('Component will unmount'));
+
+  return <div>Check the console!</div>;
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Unmounter />
+);
+```
diff --git a/snippets/react/s/use-copy-to-clipboard.md b/snippets/react/s/use-copy-to-clipboard.md
new file mode 100644
index 000000000..fedeed41f
--- /dev/null
+++ b/snippets/react/s/use-copy-to-clipboard.md
@@ -0,0 +1,67 @@
+---
+title: React useCopyToClipboard hook
+type: snippet
+language: react
+tags: [hooks,effect,state,callback]
+author: chalarangelo
+cover: antelope
+dateModified: 2020-11-16T14:17:53+02:00
+---
+
+Copies the given text to the clipboard.
+
+- Use the [copyToClipboard](/js/s/copy-to-clipboard/) snippet to copy the text to clipboard.
+- Use the `useState()` hook to initialize the `copied` variable.
+- Use the `useCallback()` hook to create a callback for the `copyToClipboard` method.
+- Use the `useEffect()` hook to reset the `copied` state variable if the `text` changes.
+- Return the `copied` state variable and the `copy` callback.
+
+```jsx
+const useCopyToClipboard = text => {
+  const copyToClipboard = str => {
+    const el = document.createElement('textarea');
+    el.value = str;
+    el.setAttribute('readonly', '');
+    el.style.position = 'absolute';
+    el.style.left = '-9999px';
+    document.body.appendChild(el);
+    const selected =
+      document.getSelection().rangeCount > 0
+        ? document.getSelection().getRangeAt(0)
+        : false;
+    el.select();
+    const success = document.execCommand('copy');
+    document.body.removeChild(el);
+    if (selected) {
+      document.getSelection().removeAllRanges();
+      document.getSelection().addRange(selected);
+    }
+    return success;
+  };
+
+  const [copied, setCopied] = React.useState(false);
+
+  const copy = React.useCallback(() => {
+    if (!copied) setCopied(copyToClipboard(text));
+  }, [text]);
+  React.useEffect(() => () => setCopied(false), [text]);
+
+  return [copied, copy];
+};
+```
+
+```jsx
+const TextCopy = props => {
+  const [copied, copy] = useCopyToClipboard('Lorem ipsum');
+  return (
+    <div>
+      <button onClick={copy}>Click to copy</button>
+      <span>{copied && 'Copied!'}</span>
+    </div>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <TextCopy />
+);
+```
diff --git a/snippets/react/s/use-debounce.md b/snippets/react/s/use-debounce.md
new file mode 100644
index 000000000..d742f42b0
--- /dev/null
+++ b/snippets/react/s/use-debounce.md
@@ -0,0 +1,56 @@
+---
+title: React useDebounce hook
+type: snippet
+language: react
+tags: [hooks,state,effect]
+author: chalarangelo
+cover: blue-bird
+dateModified: 2021-01-04T16:48:43+02:00
+---
+
+Debounces the given value.
+
+- Create a custom hook that takes a `value` and a `delay`.
+- Use the `useState()` hook to store the debounced value.
+- Use the `useEffect()` hook to update the debounced value every time `value` is updated.
+- Use `setTimeout()` to create a timeout that delays invoking the setter of the previous state variable by `delay` ms.
+- Use `clearTimeout()` to clean up when dismounting the component.
+- This is particularly useful when dealing with user input.
+
+```jsx
+const useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = React.useState(value);
+
+  React.useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value]);
+
+  return debouncedValue;
+};
+```
+
+```jsx
+const Counter = () => {
+  const [value, setValue] = React.useState(0);
+  const lastValue = useDebounce(value, 500);
+
+  return (
+    <div>
+      <p>
+        Current: {value} - Debounced: {lastValue}
+      </p>
+      <button onClick={() => setValue(value + 1)}>Increment</button>
+    </div>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Counter />
+);
+```
diff --git a/snippets/react/s/use-default.md b/snippets/react/s/use-default.md
new file mode 100644
index 000000000..133d1eebf
--- /dev/null
+++ b/snippets/react/s/use-default.md
@@ -0,0 +1,41 @@
+---
+title: React useDefault hook
+type: snippet
+language: react
+tags: [hooks,state]
+author: chalarangelo
+cover: flower-portrait-8
+dateModified: 2021-10-23T05:00:00-04:00
+---
+
+Creates a stateful value with a default fallback if it's `null` or `undefined`, and a function to update it.
+
+- Use the `useState()` hook to create stateful value.
+- Check if the value is either `null` or `undefined`.
+- Return the `defaultState` if it is, otherwise return the actual `value` state, alongside the `setValue` function.
+
+```jsx
+const useDefault = (defaultState, initialState) => {
+  const [value, setValue] = React.useState(initialState);
+  const isValueEmpty = value === undefined || value === null;
+  return [isValueEmpty ? defaultState : value, setValue];
+};
+```
+
+```jsx
+const UserCard = () => {
+  const [user, setUser] = useDefault({ name: 'Adam' }, { name: 'John' });
+
+  return (
+    <>
+      <div>User: {user.name}</div>
+      <input onChange={e => setUser({ name: e.target.value })} />
+      <button onClick={() => setUser(null)}>Clear</button>
+    </>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <UserCard />
+);
+```
diff --git a/snippets/react/s/use-delayed-state.md b/snippets/react/s/use-delayed-state.md
new file mode 100644
index 000000000..ed115d3b1
--- /dev/null
+++ b/snippets/react/s/use-delayed-state.md
@@ -0,0 +1,70 @@
+---
+title: React useDelayedState hook
+type: snippet
+language: react
+tags: [hooks,state,effect]
+cover: city-view
+dateModified: 2021-12-15T05:00:00-04:00
+---
+
+Delays creating a stateful value until some condition is met.
+
+- Use the `useState()` hook to create a stateful value containing the actual `state` and a boolean, `loaded`.
+- Use the `useEffect()` hook to update the stateful value if the `condition` or `loaded` changes.
+- Create a function, `updateState`, that only updates the `state` value if `loaded` is truthy.
+
+```jsx
+const useDelayedState = (initialState, condition) => {
+  const [{ state, loaded }, setState] = React.useState({
+    state: null,
+    loaded: false,
+  });
+
+  React.useEffect(() => {
+    if (!loaded && condition) setState({ state: initialState, loaded: true });
+  }, [condition, loaded]);
+
+  const updateState = newState => {
+    if (!loaded) return;
+    setState({ state: newState, loaded });
+  };
+
+  return [state, updateState];
+};
+```
+
+```jsx
+const App = () => {
+  const [branches, setBranches] = React.useState([]);
+  const [selectedBranch, setSelectedBranch] = useDelayedState(
+    branches[0],
+    branches.length
+  );
+
+  React.useEffect(() => {
+    const handle = setTimeout(() => {
+      setBranches(['master', 'staging', 'test', 'dev']);
+    }, 2000);
+    return () => {
+      handle && clearTimeout(handle);
+    };
+  }, []);
+
+  return (
+    <div>
+      <p>Selected branch: {selectedBranch}</p>
+      <select onChange={e => setSelectedBranch(e.target.value)}>
+        {branches.map(branch => (
+          <option key={branch} value={branch}>
+            {branch}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
+```
diff --git a/snippets/react/s/use-effect-once.md b/snippets/react/s/use-effect-once.md
new file mode 100644
index 000000000..97128aa93
--- /dev/null
+++ b/snippets/react/s/use-effect-once.md
@@ -0,0 +1,41 @@
+---
+title: React useEffectOnce hook
+type: snippet
+language: react
+tags: [hooks,effect]
+author: chalarangelo
+cover: pop-of-green
+dateModified: 2021-11-16T05:00:00-04:00
+---
+
+Runs a callback at most once when a condition becomes true.
+
+- Use the `useRef()` hook to create a variable, `hasRunOnce`, to keep track of the execution status of the effect.
+- Use the `useEffect()` that runs only when the `when` condition changes.
+- Check if `when` is `true` and the effect has not executed before. If both are `true`, run `callback` and set `hasRunOnce` to `true`.
+
+```jsx
+const useEffectOnce = (callback, when) => {
+  const hasRunOnce = React.useRef(false);
+  React.useEffect(() => {
+    if (when && !hasRunOnce.current) {
+      callback();
+      hasRunOnce.current = true;
+    }
+  }, [when]);
+};
+```
+
+```jsx
+const App = () => {
+  const [clicked, setClicked] = React.useState(false);
+  useEffectOnce(() => {
+    console.log('mounted');
+  }, clicked);
+  return <button onClick={() => setClicked(true)}>Click me</button>;
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
+```
diff --git a/snippets/react/s/use-error.md b/snippets/react/s/use-error.md
new file mode 100644
index 000000000..31dfb6a44
--- /dev/null
+++ b/snippets/react/s/use-error.md
@@ -0,0 +1,47 @@
+---
+title: React useError hook
+type: snippet
+language: react
+tags: [hooks,state,effect]
+author: chalarangelo
+cover: baloons-field
+dateModified: 2021-09-30T05:00:00-04:00
+---
+
+Creates an error dispatcher.
+
+- Use the `useState()` hook to create a state variable that holds the error.
+- Use the `useEffect()` hook to `throw` the error whenever it's  truthy.
+- Use the `useCallback()` hook to update the state and return the cached function.
+
+```jsx
+const useError = err => {
+  const [error, setError] = React.useState(err);
+
+  React.useEffect(() => {
+    if (error) throw error;
+  }, [error]);
+
+  const dispatchError = React.useCallback(err => {
+    setError(err);
+  }, []);
+
+  return dispatchError;
+};
+```
+
+```jsx
+const ErrorButton = () => {
+  const dispatchError = useError();
+
+  const clickHandler = () => {
+    dispatchError(new Error('Error!'));
+  };
+
+  return <button onClick={clickHandler}>Throw error</button>;
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <ErrorButton />
+);
+```
diff --git a/snippets/react/s/use-event-listener.md b/snippets/react/s/use-event-listener.md
new file mode 100644
index 000000000..78e0f6943
--- /dev/null
+++ b/snippets/react/s/use-event-listener.md
@@ -0,0 +1,59 @@
+---
+title: React useEventListener hook
+type: snippet
+language: react
+tags: [hooks,effect,event]
+author: chalarangelo
+cover: beach-riders
+dateModified: 2021-09-01T05:00:00-04:00
+---
+
+Adds an event listener for the specified event type on the given element.
+
+- Use the `useRef()` hook to create a ref that will hold the `handler`.
+- Use the `useEffect()` hook to update the value of the `savedHandler` ref any time the `handler` changes.
+- Use the `useEffect()` hook to add an event listener to the given element and clean up when unmounting.
+- Omit the last argument, `el`, to use the `Window` by default.
+
+```jsx
+const useEventListener = (type, handler, el = window) => {
+  const savedHandler = React.useRef();
+
+  React.useEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+
+  React.useEffect(() => {
+    const listener = e => savedHandler.current(e);
+
+    el.addEventListener(type, listener);
+
+    return () => {
+      el.removeEventListener(type, listener);
+    };
+  }, [type, el]);
+};
+```
+
+```jsx
+const MyApp = () => {
+  const [coords, setCoords] = React.useState({ x: 0, y: 0 });
+
+  const updateCoords = React.useCallback(
+    ({ clientX, clientY }) => {
+      setCoords({ x: clientX, y: clientY });
+    },
+    [setCoords]
+  );
+
+  useEventListener('mousemove', updateCoords);
+
+  return (
+    <p>Mouse coordinates: {coords.x}, {coords.y}</p>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
+```
diff --git a/snippets/react/s/use-fetch.md b/snippets/react/s/use-fetch.md
new file mode 100644
index 000000000..0a88cf6b2
--- /dev/null
+++ b/snippets/react/s/use-fetch.md
@@ -0,0 +1,65 @@
+---
+title: React useFetch hook
+type: snippet
+language: react
+tags: [hooks,effect,state]
+author: chalarangelo
+cover: coworking-space
+dateModified: 2022-05-01T12:50:38+02:00
+---
+
+Implements `fetch()` in a declarative manner.
+
+- Create a custom hook that takes a `url` and `options`.
+- Use the `useState()` hook to initialize the `response`, `error` and `abort` state variables.
+- Use the `useEffect()` hook to asynchronously call `fetch()` and update the state variables accordingly.
+- Create and use an `AbortController` to allow aborting the request. Use it to cancel the request when the component unmounts.
+- Return an object containing the `response`, `error` and `abort` state variables.
+
+```jsx
+const useFetch = (url, options) => {
+  const [response, setResponse] = React.useState(null);
+  const [error, setError] = React.useState(null);
+  const [abort, setAbort] = React.useState(() => {});
+
+  React.useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const abortController = new AbortController();
+        const signal = abortController.signal;
+        setAbort(abortController.abort);
+        const res = await fetch(url, {...options, signal});
+        const json = await res.json();
+        setResponse(json);
+      } catch (error) {
+        setError(error);
+      }
+    };
+    fetchData();
+    return () => {
+      abort();
+    }
+  }, []);
+
+  return { response, error, abort };
+};
+```
+
+```jsx
+const ImageFetch = props => {
+  const res = useFetch('https://dog.ceo/api/breeds/image/random', {});
+  if (!res.response) {
+    return <div>Loading...</div>;
+  }
+  const imageUrl = res.response.message;
+  return (
+    <div>
+      <img src={imageUrl} alt="avatar" width={400} height="auto" />
+    </div>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <ImageFetch />
+);
+```
diff --git a/snippets/react/s/use-form.md b/snippets/react/s/use-form.md
new file mode 100644
index 000000000..4bcf62a5a
--- /dev/null
+++ b/snippets/react/s/use-form.md
@@ -0,0 +1,53 @@
+---
+title: React useForm hook
+type: snippet
+language: react
+tags: [hooks,state]
+cover: cave-view
+dateModified: 2021-09-17T05:00:00-04:00
+---
+
+Creates a stateful value from the fields in a form.
+
+- Use the `useState()` hook to create a state variable for the values in the form.
+- Create a function that will be called with an appropriate event by a form field and update the state variable accordingly.
+
+```jsx
+const useForm = initialValues => {
+  const [values, setValues] = React.useState(initialValues);
+
+  return [
+    values,
+    e => {
+      setValues({
+        ...values,
+        [e.target.name]: e.target.value
+      });
+    }
+  ];
+};
+```
+
+```jsx
+const Form = () => {
+  const initialState = { email: '', password: '' };
+  const [values, setValues] = useForm(initialState);
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    console.log(values);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input type="email" name="email" onChange={setValues} />
+      <input type="password" name="password" onChange={setValues} />
+      <button type="submit">Submit</button>
+    </form>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Form />
+);
+```
diff --git a/snippets/react/s/use-get-set.md b/snippets/react/s/use-get-set.md
new file mode 100644
index 000000000..0a330a6f7
--- /dev/null
+++ b/snippets/react/s/use-get-set.md
@@ -0,0 +1,50 @@
+---
+title: React useGetSet hook
+type: snippet
+language: react
+tags: [hooks,state]
+author: chalarangelo
+cover: interior-12
+dateModified: 2021-10-27T05:00:00-04:00
+---
+
+Creates a stateful value, returning a getter and a setter function.
+
+- Use the `useRef()` hook to create a ref that holds the stateful value, initializing it with `initialState`.
+- Use the `useReducer()` hook that creates a new object every time it's updated and return its dispatch.
+- Use the `useMemo()` hook to memoize a pair of functions. The first one will return the current value of the `state` ref and the second one will update it and force a re-render.
+
+```jsx
+const useGetSet = initialState => {
+  const state = React.useRef(initialState);
+  const [, update] = React.useReducer(() => ({}));
+
+  return React.useMemo(
+    () => [
+      () => state.current,
+      newState => {
+        state.current = newState;
+        update();
+      },
+    ],
+    []
+  );
+};
+```
+
+```jsx
+const Counter = () => {
+  const [getCount, setCount] = useGetSet(0);
+  const onClick = () => {
+    setTimeout(() => {
+      setCount(getCount() + 1);
+    }, 1_000);
+  };
+
+  return <button onClick={onClick}>Count: {getCount()}</button>;
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Counter />
+);
+```
diff --git a/snippets/react/s/use-hash.md b/snippets/react/s/use-hash.md
new file mode 100644
index 000000000..86e4016c7
--- /dev/null
+++ b/snippets/react/s/use-hash.md
@@ -0,0 +1,64 @@
+---
+title: React useHash hook
+type: snippet
+language: react
+tags: [hooks,state,effect]
+author: chalarangelo
+cover: book-chair
+dateModified: 2021-10-02T05:00:00-04:00
+---
+
+Tracks the browser's location hash value, and allows changing it.
+
+- Use the `useState()` hook to lazily get the `hash` property of the `Location` object.
+- Use the `useCallback()` hook to create a handler that updates the state.
+- Use the `useEffect()` hook to add a listener for the `'hashchange'` event when mounting and clean it up when unmounting.
+- Use the `useCallback()` hook to create a function that updates the `hash` property of the `Location` object with the given value.
+
+```jsx
+const useHash = () => {
+  const [hash, setHash] = React.useState(() => window.location.hash);
+
+  const hashChangeHandler = React.useCallback(() => {
+    setHash(window.location.hash);
+  }, []);
+
+  React.useEffect(() => {
+    window.addEventListener('hashchange', hashChangeHandler);
+    return () => {
+      window.removeEventListener('hashchange', hashChangeHandler);
+    };
+  }, []);
+
+  const updateHash = React.useCallback(
+    newHash => {
+      if (newHash !== hash) window.location.hash = newHash;
+    },
+    [hash]
+  );
+
+  return [hash, updateHash];
+};
+```
+
+```jsx
+const MyApp = () => {
+  const [hash, setHash] = useHash();
+
+  React.useEffect(() => {
+    setHash('#list');
+  }, []);
+
+  return (
+    <>
+      <p>window.location.href: {window.location.href}</p>
+      <p>Edit hash: </p>
+      <input value={hash} onChange={e => setHash(e.target.value)} />
+    </>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
+```
diff --git a/snippets/react/s/use-hover.md b/snippets/react/s/use-hover.md
new file mode 100644
index 000000000..4be1fbc52
--- /dev/null
+++ b/snippets/react/s/use-hover.md
@@ -0,0 +1,58 @@
+---
+title: React useHover hook
+type: snippet
+language: react
+tags: [hooks,state,callback]
+author: chalarangelo
+cover: pink-flower-tree
+dateModified: 2021-10-05T05:00:00-04:00
+---
+
+Handles the event of hovering over the wrapped component.
+
+- Use the `useState()` hook to create a variable that holds the hovering state.
+- Use the `useCallback()` hook to memoize two handler functions that update the state.
+- Use the `useCallback()` hook to create a callback ref and create or update the listeners for the `'mouseover'` and `'mouseout'` events.
+- Use the `useRef()` hook to keep track of the last node passed to `callbackRef` to be able to remove its listeners.
+
+```jsx
+const useHover = () => {
+  const [isHovering, setIsHovering] = React.useState(false);
+
+  const handleMouseOver = React.useCallback(() => setIsHovering(true), []);
+  const handleMouseOut = React.useCallback(() => setIsHovering(false), []);
+
+  const nodeRef = React.useRef();
+
+  const callbackRef = React.useCallback(
+    node => {
+      if (nodeRef.current) {
+        nodeRef.current.removeEventListener('mouseover', handleMouseOver);
+        nodeRef.current.removeEventListener('mouseout', handleMouseOut);
+      }
+
+      nodeRef.current = node;
+
+      if (nodeRef.current) {
+        nodeRef.current.addEventListener('mouseover', handleMouseOver);
+        nodeRef.current.addEventListener('mouseout', handleMouseOut);
+      }
+    },
+    [handleMouseOver, handleMouseOut]
+  );
+
+  return [callbackRef, isHovering];
+};
+```
+
+```jsx
+const MyApp = () => {
+  const [hoverRef, isHovering] = useHover();
+
+  return <div ref={hoverRef}>{isHovering ? 'Hovering' : 'Not hovering'}</div>;
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
+```
diff --git a/snippets/react/s/use-intersection-observer.md b/snippets/react/s/use-intersection-observer.md
new file mode 100644
index 000000000..80b642f99
--- /dev/null
+++ b/snippets/react/s/use-intersection-observer.md
@@ -0,0 +1,58 @@
+---
+title: React useIntersectionObserver hook
+type: snippet
+language: react
+tags: [hooks,state,effect]
+author: chalarangelo
+cover: budapest-palace
+dateModified: 2021-09-10T05:00:00-04:00
+---
+
+Observes visibility changes for a given element.
+
+- Use the `useState()` hook to store the intersection value of the given element.
+- Create an `IntersectionObserver` with the given `options` and an appropriate callback to update the `isIntersecting` state variable.
+- Use the `useEffect()` hook to call `IntersectionObserver.observe()` when mounting the component and clean up using `IntersectionObserver.unobserve()` when unmounting.
+
+```jsx
+const useIntersectionObserver = (ref, options) => {
+  const [isIntersecting, setIsIntersecting] = React.useState(false);
+
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      setIsIntersecting(entry.isIntersecting);
+    }, options);
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      observer.unobserve(ref.current);
+    };
+  }, []);
+
+  return isIntersecting;
+};
+```
+
+```jsx
+const MyApp = () => {
+  const ref = React.useRef();
+  const onScreen = useIntersectionObserver(ref, { threshold: 0.5 });
+
+  return (
+    <div>
+      <div style={{ height: '100vh' }}>Scroll down</div>
+      <div style={{ height: '100vh' }} ref={ref}>
+        <p>{onScreen ? 'Element is on screen.' : 'Scroll more!'}</p>
+      </div>
+    </div>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
+
+```
diff --git a/snippets/react/s/use-interval.md b/snippets/react/s/use-interval.md
new file mode 100644
index 000000000..615f8a7a8
--- /dev/null
+++ b/snippets/react/s/use-interval.md
@@ -0,0 +1,51 @@
+---
+title: React useInterval hook
+type: snippet
+language: react
+tags: [hooks,effect]
+author: chalarangelo
+cover: digital-nomad-13
+dateModified: 2020-11-16T14:17:53+02:00
+---
+
+Implements `setInterval()` in a declarative manner.
+
+- Create a custom hook that takes a `callback` and a `delay`.
+- Use the `useRef()` hook to create a `ref` for the callback function.
+- Use a `useEffect()` hook to remember the latest `callback` whenever it changes.
+- Use a `useEffect()` hook dependent on `delay` to set up the interval and clean up.
+
+```jsx
+const useInterval = (callback, delay) => {
+  const savedCallback = React.useRef();
+
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  React.useEffect(() => {
+    const tick = () => {
+      savedCallback.current();
+    }
+    if (delay !== null) {
+      let id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+};
+```
+
+```jsx
+const Timer = props => {
+  const [seconds, setSeconds] = React.useState(0);
+  useInterval(() => {
+    setSeconds(seconds + 1);
+  }, 1000);
+
+  return <p>{seconds}</p>;
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Timer />
+);
+```
diff --git a/snippets/react/s/use-isomporphic-effect.md b/snippets/react/s/use-isomporphic-effect.md
new file mode 100644
index 000000000..acfae3131
--- /dev/null
+++ b/snippets/react/s/use-isomporphic-effect.md
@@ -0,0 +1,32 @@
+---
+title: React useIsomporphicEffect hook
+type: snippet
+language: react
+tags: [hooks,effect]
+author: chalarangelo
+cover: jars-on-shelf-2
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Resolves to `useEffect()` on the server and `useLayoutEffect()` on the client.
+
+- Use `typeof` to check if the `Window` object is defined. If it is, return the `useLayoutEffect()`. Otherwise return `useEffect()`.
+
+```jsx
+const useIsomorphicEffect =
+  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+```
+
+```jsx
+const MyApp = () => {
+  useIsomorphicEffect(() => {
+    window.console.log('Hello');
+  }, []);
+
+  return null;
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
+```
diff --git a/snippets/react/s/use-key-press.md b/snippets/react/s/use-key-press.md
new file mode 100644
index 000000000..a09f17f89
--- /dev/null
+++ b/snippets/react/s/use-key-press.md
@@ -0,0 +1,54 @@
+---
+title: React useKeyPress hook
+type: snippet
+language: react
+tags: [hooks,state,effect,event]
+author: chalarangelo
+cover: yellow-white-mug-1
+dateModified: 2021-09-07T05:00:00-04:00
+---
+
+Listens for changes in the pressed state of a given key.
+
+- Use the `useState()` hook to create a state variable that holds the pressed state of the given key.
+- Define two handler functions that update the state variable on key down or key up accordingly.
+- Use the `useEffect()` hook and `EventTarget.addEventListener()` to handle the `'keydown'` and `'keyup'` events.
+- Use `EventTarget.removeEventListener()` to perform cleanup after the component is unmounted.
+
+```jsx
+const useKeyPress = targetKey => {
+  const [keyPressed, setKeyPressed] = React.useState(false);
+
+  const downHandler = ({ key }) => {
+    if (key === targetKey) setKeyPressed(true);
+  };
+
+  const upHandler = ({ key }) => {
+    if (key === targetKey) setKeyPressed(false);
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('keydown', downHandler);
+    window.addEventListener('keyup', upHandler);
+
+    return () => {
+      window.removeEventListener('keydown', downHandler);
+      window.removeEventListener('keyup', upHandler);
+    };
+  }, []);
+
+  return keyPressed;
+};
+```
+
+```jsx
+const MyApp = () => {
+  const wPressed = useKeyPress('w');
+
+  return <p>The "w" key is {!wPressed ? 'not ' : ''}pressed!</p>;
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
+```
diff --git a/snippets/react/s/use-local-storage.md b/snippets/react/s/use-local-storage.md
new file mode 100644
index 000000000..b7a7b97ac
--- /dev/null
+++ b/snippets/react/s/use-local-storage.md
@@ -0,0 +1,55 @@
+---
+title: React useLocalStorage hook
+type: snippet
+language: react
+tags: [hooks,state]
+author: chalarangelo
+cover: houses-rock-sea
+dateModified: 2021-09-13T05:00:00-04:00
+---
+
+Creates a stateful value that is persisted to `localStorage`, and a function to update it.
+
+- Use the `useState()` hook with a function to initialize its value lazily.
+- Use a `try...catch` block and `Storage.getItem()` to try and get the value from `Window.localStorage`. If no value is found, use `Storage.setItem()` to store the `defaultValue` and use it as the initial state. If an error occurs, use `defaultValue` as the initial state.
+- Define a function that will update the state variable with the passed value and use `Storage.setItem()` to store it.
+
+```jsx
+const useLocalStorage = (keyName, defaultValue) => {
+  const [storedValue, setStoredValue] = React.useState(() => {
+    try {
+      const value = window.localStorage.getItem(keyName);
+
+      if (value) {
+        return JSON.parse(value);
+      } else {
+        window.localStorage.setItem(keyName, JSON.stringify(defaultValue));
+        return defaultValue;
+      }
+    } catch (err) {
+      return defaultValue;
+    }
+  });
+
+  const setValue = newValue => {
+    try {
+      window.localStorage.setItem(keyName, JSON.stringify(newValue));
+    } catch (err) {}
+    setStoredValue(newValue);
+  };
+
+  return [storedValue, setValue];
+};
+```
+
+```jsx
+const MyApp = () => {
+  const [name, setName] = useLocalStorage('name', 'John');
+
+  return <input value={name} onChange={e => setName(e.target.value)} />;
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
+```
diff --git a/snippets/react/s/use-map.md b/snippets/react/s/use-map.md
new file mode 100644
index 000000000..774475221
--- /dev/null
+++ b/snippets/react/s/use-map.md
@@ -0,0 +1,72 @@
+---
+title: React useMap hook
+type: snippet
+language: react
+tags: [hooks,state]
+author: chalarangelo
+cover: work-hard-computer
+dateModified: 2021-11-06T05:00:00-04:00
+---
+
+Creates a stateful `Map` object, and a set of functions to manipulate it.
+
+- Use the `useState()` hook and the `Map` constructor to create a new `Map` from the `initialValue`.
+- Use the `useMemo()` hook to create a set of non-mutating actions that manipulate the `map` state variable, using the state setter to create a new `Map` every time.
+- Return the `map` state variable and the created `actions`.
+
+```jsx
+const useMap = initialValue => {
+  const [map, setMap] = React.useState(new Map(initialValue));
+
+  const actions = React.useMemo(
+    () => ({
+      set: (key, value) =>
+        setMap(prevMap => {
+          const nextMap = new Map(prevMap);
+          nextMap.set(key, value);
+          return nextMap;
+        }),
+      remove: (key, value) =>
+        setMap(prevMap => {
+          const nextMap = new Map(prevMap);
+          nextMap.delete(key, value);
+          return nextMap;
+        }),
+      clear: () => setMap(new Map()),
+    }),
+    [setMap]
+  );
+
+  return [map, actions];
+};
+```
+
+```jsx
+const MyApp = () => {
+  const [map, { set, remove, clear }] = useMap([['apples', 10]]);
+
+  return (
+    <div>
+      <button onClick={() => set(Date.now(), new Date().toJSON())}>Add</button>
+      <button onClick={() => clear()}>Reset</button>
+      <button onClick={() => remove('apples')} disabled={!map.has('apples')}>
+        Remove apples
+      </button>
+      <pre>
+        {JSON.stringify(
+          [...map.entries()].reduce(
+            (acc, [key, value]) => ({ ...acc, [key]: value }),
+            {}
+          ),
+          null,
+          2
+        )}
+      </pre>
+    </div>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
+```
diff --git a/snippets/react/s/use-media-query.md b/snippets/react/s/use-media-query.md
new file mode 100644
index 000000000..3311c03df
--- /dev/null
+++ b/snippets/react/s/use-media-query.md
@@ -0,0 +1,50 @@
+---
+title: React useMediaQuery hook
+type: snippet
+language: react
+tags: [hooks,state,effect]
+author: chalarangelo
+cover: clay-pot-horizon
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Checks if the current environment matches a given media query and returns the appropriate value.
+
+- Check if `Window` and `Window.matchMedia()` exist. Return `whenFalse` if not (e.g. SSR environment or unsupported browser).
+- Use `Window.matchMedia()` to match the given `query`. Cast its `matches` property to a boolean and store in a state variable, `match`, using the `useState()` hook.
+- Use the `useEffect()` hook to add a listener for changes and to clean up the listeners after the hook is destroyed.
+- Return either `whenTrue` or `whenFalse` based on the value of `match`.
+
+```jsx
+const useMediaQuery = (query, whenTrue, whenFalse) => {
+  if (typeof window === 'undefined' || typeof window.matchMedia === 'undefined')
+    return whenFalse;
+
+  const mediaQuery = window.matchMedia(query);
+  const [match, setMatch] = React.useState(!!mediaQuery.matches);
+
+  React.useEffect(() => {
+    const handler = () => setMatch(!!mediaQuery.matches);
+    mediaQuery.addListener(handler);
+    return () => mediaQuery.removeListener(handler);
+  }, []);
+
+  return match ? whenTrue : whenFalse;
+};
+```
+
+```jsx
+const ResponsiveText = () => {
+  const text = useMediaQuery(
+    '(max-width: 400px)',
+    'Less than 400px wide',
+    'More than 400px wide'
+  );
+
+  return <span>{text}</span>;
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <ResponsiveText />
+);
+```
diff --git a/snippets/react/s/use-merge-state.md b/snippets/react/s/use-merge-state.md
new file mode 100644
index 000000000..3c65b9cfe
--- /dev/null
+++ b/snippets/react/s/use-merge-state.md
@@ -0,0 +1,54 @@
+---
+title: React useMergeState hook
+type: snippet
+language: react
+tags: [hooks,state]
+author: chalarangelo
+cover: digital-nomad-6
+dateModified: 2021-09-23T05:00:00-04:00
+---
+
+Creates a stateful value, and a function to update it by merging the new state provided.
+
+- Use the `useState()` hook to create a state variable, initializing it to `initialState`.
+- Create a function that will update the state variable by merging the new state provided with the existing one. If the new state is a function, call it with the previous state as the argument and use the result.
+- Omit the argument, to initialize the state variable with an empty object (`{}`).
+
+```jsx
+const useMergeState = (initialState = {}) => {
+  const [value, setValue] = React.useState(initialState);
+
+  const mergeState = newState => {
+    if (typeof newState === 'function') newState = newState(value);
+    setValue({ ...value, ...newState });
+  };
+
+  return [value, mergeState];
+};
+```
+
+```jsx
+const MyApp = () => {
+  const [data, setData] = useMergeState({ name: 'John', age: 20 });
+
+  return (
+    <>
+      <input
+        value={data.name}
+        onChange={e => setData({ name: e.target.value })}
+      />
+      <button onClick={() => setData(({ age }) => ({ age: age - 1 }))}>
+        -
+      </button>
+      {data.age}
+      <button onClick={() => setData(({ age }) => ({ age: age + 1 }))}>
+        +
+      </button>
+    </>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
+```
diff --git a/snippets/react/s/use-mutation-observer.md b/snippets/react/s/use-mutation-observer.md
new file mode 100644
index 000000000..c6a3e49c3
--- /dev/null
+++ b/snippets/react/s/use-mutation-observer.md
@@ -0,0 +1,84 @@
+---
+title: React useMutationObserver hook
+type: snippet
+language: react
+tags: [hooks,effect]
+author: chalarangelo
+cover: laptop-plants
+dateModified: 2021-11-23T05:00:00-04:00
+---
+
+Watches for changes made to the DOM tree, using a `MutationObserver`
+
+- Use a `useEffect()` hook that depends on the values of `callback` and `options`.
+- Check if the given `ref` is initialized. If it is, create a new `MutationObserver` and pass it the `callback`.
+- Call `MutationObserver.observe()` with the given `options` to watch the given `ref` for changes.
+- Use `MutationObserver.disconnect()` to remove the observer from the `ref` when the component unmounts.
+
+```jsx
+const useMutationObserver = (
+  ref,
+  callback,
+  options = {
+    attributes: true,
+    characterData: true,
+    childList: true,
+    subtree: true,
+  }
+) => {
+  React.useEffect(() => {
+    if (ref.current) {
+      const observer = new MutationObserver(callback);
+      observer.observe(ref.current, options);
+      return () => observer.disconnect();
+    }
+  }, [callback, options]);
+};
+```
+
+```jsx
+const App = () => {
+  const mutationRef = React.useRef();
+  const [mutationCount, setMutationCount] = React.useState(0);
+  const incrementMutationCount = () => {
+    return setMutationCount(mutationCount + 1);
+  };
+  useMutationObserver(mutationRef, incrementMutationCount);
+  const [content, setContent] = React.useState('Hello world');
+
+  return (
+    <>
+      <label for="content-input">Edit this to update the text:</label>
+      <textarea
+        id="content-input"
+        style={{ width: '100%' }}
+        value={content}
+        onChange={e => setContent(e.target.value)}
+      />
+      <div
+        style={{ width: '100%' }}
+        ref={mutationRef}
+      >
+        <div
+          style={{
+            resize: 'both',
+            overflow: 'auto',
+            maxWidth: '100%',
+            border: '1px solid black',
+          }}
+        >
+          <h2>Resize or change the content:</h2>
+          <p>{content}</p>
+        </div>
+      </div>
+      <div>
+        <h3>Mutation count {mutationCount}</h3>
+      </div>
+    </>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
+```
diff --git a/snippets/react/s/use-navigator-on-line.md b/snippets/react/s/use-navigator-on-line.md
new file mode 100644
index 000000000..5513cbd5d
--- /dev/null
+++ b/snippets/react/s/use-navigator-on-line.md
@@ -0,0 +1,54 @@
+---
+title: React useNavigatorOnLine hook
+type: snippet
+language: react
+tags: [hooks,state,effect]
+author: chalarangelo
+cover: digital-nomad-7
+dateModified: 2020-11-16T14:17:53+02:00
+---
+
+Checks if the client is online or offline.
+
+- Create a function, `getOnLineStatus`, that uses the `Navigator.onLine` web API to get the online status of the client.
+- Use the `useState()` hook to create an appropriate state variable, `status`, and setter.
+- Use the `useEffect()` hook to add listeners for appropriate events, updating state, and cleanup those listeners when unmounting.
+- Finally return the `status` state variable.
+
+```jsx
+const getOnLineStatus = () =>
+  typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean'
+    ? navigator.onLine
+    : true;
+
+const useNavigatorOnLine = () => {
+  const [status, setStatus] = React.useState(getOnLineStatus());
+
+  const setOnline = () => setStatus(true);
+  const setOffline = () => setStatus(false);
+
+  React.useEffect(() => {
+    window.addEventListener('online', setOnline);
+    window.addEventListener('offline', setOffline);
+
+    return () => {
+      window.removeEventListener('online', setOnline);
+      window.removeEventListener('offline', setOffline);
+    };
+  }, []);
+
+  return status;
+};
+```
+
+```jsx
+const StatusIndicator = () => {
+  const isOnline = useNavigatorOnLine();
+
+  return <span>You are {isOnline ? 'online' : 'offline'}.</span>;
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <StatusIndicator />
+);
+```
diff --git a/snippets/react/s/use-on-global-event.md b/snippets/react/s/use-on-global-event.md
new file mode 100644
index 000000000..9ffa66576
--- /dev/null
+++ b/snippets/react/s/use-on-global-event.md
@@ -0,0 +1,56 @@
+---
+title: React useOnGlobalEvent hook
+type: snippet
+language: react
+tags: [hooks,effect,event]
+author: chalarangelo
+cover: tropical-bike
+dateModified: 2021-12-22T05:00:00-04:00
+---
+
+Executes a callback whenever an event occurs on the global object.
+
+- Use the `useRef()` hook to create a variable, `listener`, which will hold the listener reference.
+- Use the `useRef()` hook to create a variable that will hold the previous values of the `type` and `options` arguments.
+- Use the `useEffect()` hook and `EventTarget.addEventListener()` to listen to the given event `type` on the `Window` global object.
+- Use `EventTarget.removeEventListener()` to remove any existing listeners and clean up when the component unmounts.
+
+```jsx
+const useOnGlobalEvent = (type, callback, options) => {
+  const listener = React.useRef(null);
+  const previousProps = React.useRef({ type, options });
+
+  React.useEffect(() => {
+    const { type: previousType, options: previousOptions } = previousProps;
+
+    if (listener.current) {
+      window.removeEventListener(
+        previousType,
+        listener.current,
+        previousOptions
+      );
+    }
+
+    listener.current = window.addEventListener(type, callback, options);
+    previousProps.current = { type, options };
+
+    return () => {
+      window.removeEventListener(type, listener.current, options);
+    };
+  }, [callback, type, options]);
+};
+```
+
+```jsx
+const App = () => {
+  useOnGlobalEvent('mousemove', e => {
+    console.log(`(${e.x}, ${e.y})`);
+  });
+
+  return <p>Move your mouse around</p>;
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
+```
diff --git a/snippets/react/s/use-on-window-resize.md b/snippets/react/s/use-on-window-resize.md
new file mode 100644
index 000000000..31f07c232
--- /dev/null
+++ b/snippets/react/s/use-on-window-resize.md
@@ -0,0 +1,43 @@
+---
+title: React useOnWindowResize hook
+type: snippet
+language: react
+tags: [hooks,effect,event]
+author: chalarangelo
+cover: flower-camera
+dateModified: 2021-12-01T05:00:00-04:00
+---
+
+Executes a callback whenever the window is resized.
+
+- Use the `useRef()` hook to create a variable, `listener`, which will hold the listener reference.
+- Use the `useEffect()` hook and `EventTarget.addEventListener()` to listen to the `'resize'` event of the `Window` global object.
+- Use `EventTarget.removeEventListener()` to remove any existing listeners and clean up when the component unmounts.
+
+```jsx
+const useOnWindowResize = callback => {
+  const listener = React.useRef(null);
+
+  React.useEffect(() => {
+    if (listener.current)
+      window.removeEventListener('resize', listener.current);
+    listener.current = window.addEventListener('resize', callback);
+    return () => {
+      window.removeEventListener('resize', listener.current);
+    };
+  }, [callback]);
+};
+```
+
+```jsx
+const App = () => {
+  useOnWindowResize(() =>
+    console.log(`window size: (${window.innerWidth}, ${window.innerHeight})`)
+  );
+  return <p>Resize the window and check the console</p>;
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
+```
diff --git a/snippets/react/s/use-on-window-scroll.md b/snippets/react/s/use-on-window-scroll.md
new file mode 100644
index 000000000..84ca52dc8
--- /dev/null
+++ b/snippets/react/s/use-on-window-scroll.md
@@ -0,0 +1,41 @@
+---
+title: React useOnWindowScroll hook
+type: snippet
+language: react
+tags: [hooks,effect,event]
+author: chalarangelo
+cover: planning
+dateModified: 2021-12-08T05:00:00-04:00
+---
+
+Executes a callback whenever the window is scrolled.
+
+- Use the `useRef()` hook to create a variable, `listener`, which will hold the listener reference.
+- Use the `useEffect()` hook and `EventTarget.addEventListener()` to listen to the `'scroll'` event of the `Window` global object.
+- Use `EventTarget.removeEventListener()` to remove any existing listeners and clean up when the component unmounts.
+
+```jsx
+const useOnWindowScroll = callback => {
+  const listener = React.useRef(null);
+
+  React.useEffect(() => {
+    if (listener.current)
+      window.removeEventListener('scroll', listener.current);
+    listener.current = window.addEventListener('scroll', callback);
+    return () => {
+      window.removeEventListener('scroll', listener.current);
+    };
+  }, [callback]);
+};
+```
+
+```jsx
+const App = () => {
+  useOnWindowScroll(() => console.log(`scroll Y: ${window.pageYOffset}`));
+  return <p style={{ height: '300vh' }}>Scroll and check the console</p>;
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
+```
diff --git a/snippets/react/s/use-persisted-state.md b/snippets/react/s/use-persisted-state.md
new file mode 100644
index 000000000..489f4d84f
--- /dev/null
+++ b/snippets/react/s/use-persisted-state.md
@@ -0,0 +1,88 @@
+---
+title: React usePersistedState hook
+type: snippet
+language: react
+tags: [hooks,state,effect]
+author: chalarangelo
+cover: red-berries
+dateModified: 2021-10-13T19:29:39+02:00
+---
+
+Returns a stateful value, persisted in `localStorage`, and a function to update it.
+
+- Use the `useState()` hook to initialize the `value` to `defaultValue`.
+- Use the `useRef()` hook to create a ref that will hold the `name` of the value in `Window.localStorage`.
+- Use 3 instances of the `useEffect()` hook for initialization, `value` change and `name` change respectively.
+- When the component is first mounted, use `Storage.getItem()` to update `value` if there's a stored value or `Storage.setItem()` to persist the current value.
+- When `value` is updated, use `Storage.setItem()` to store the new value.
+- When `name` is updated, use `Storage.setItem()` to create the new key, update the `nameRef` and use `Storage.removeItem()` to remove the previous key from `Window.localStorage`.
+- **Note:** The hook is meant for use with primitive values (i.e. not objects) and doesn't account for changes to `Window.localStorage` due to other code. Both of these issues can be easily handled (e.g. JSON serialization and handling the `'storage'` event).
+
+```jsx
+const usePersistedState = (name, defaultValue) => {
+  const [value, setValue] = React.useState(defaultValue);
+  const nameRef = React.useRef(name);
+
+  React.useEffect(() => {
+    try {
+      const storedValue = localStorage.getItem(name);
+      if (storedValue !== null) setValue(storedValue);
+      else localStorage.setItem(name, defaultValue);
+    } catch {
+      setValue(defaultValue);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    try {
+      localStorage.setItem(nameRef.current, value);
+    } catch {}
+  }, [value]);
+
+  React.useEffect(() => {
+    const lastName = nameRef.current;
+    if (name !== lastName) {
+      try {
+        localStorage.setItem(name, value);
+        nameRef.current = name;
+        localStorage.removeItem(lastName);
+      } catch {}
+    }
+  }, [name]);
+
+  return [value, setValue];
+};
+```
+
+```jsx
+const MyComponent = ({ name }) => {
+  const [val, setVal] = usePersistedState(name, 10);
+  return (
+    <input
+      value={val}
+      onChange={e => {
+        setVal(e.target.value);
+      }}
+    />
+  );
+};
+
+const MyApp = () => {
+  const [name, setName] = React.useState('my-value');
+  return (
+    <>
+      <MyComponent name={name} />
+      <input
+        value={name}
+        onChange={e => {
+          setName(e.target.value);
+        }}
+      />
+    </>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
+```
diff --git a/snippets/react/s/use-portal.md b/snippets/react/s/use-portal.md
new file mode 100644
index 000000000..c2dfef222
--- /dev/null
+++ b/snippets/react/s/use-portal.md
@@ -0,0 +1,57 @@
+---
+title: React usePortal hook
+type: snippet
+language: react
+tags: [hooks,state,effect]
+author: chalarangelo
+cover: interior-3
+dateModified: 2022-01-05T05:00:00-04:00
+---
+
+Creates a portal, allowing rendering of children outside the parent component.
+
+- Use the `useState()` hook to create a state variable that holds the `render()` and `remove()` functions for the portal.
+- Use `ReactDOM.createPortal()` and `ReactDOM.unmountComponentAtNode()` to create a portal and a function to remove it. Use the `useCallback()` hook to wrap and memoize these functions as `createPortal()`.
+- Use the `useEffect()` hook to call `createPortal()` and update the state variable any time `el`'s value changes.
+- Finally, return the `render()` function of the state variable.
+
+```jsx
+const usePortal = el => {
+  const [portal, setPortal] = React.useState({
+    render: () => null,
+    remove: () => null,
+  });
+
+  const createPortal = React.useCallback(el => {
+    const Portal = ({ children }) => ReactDOM.createPortal(children, el);
+    const remove = () => ReactDOM.unmountComponentAtNode(el);
+    return { render: Portal, remove };
+  }, []);
+
+  React.useEffect(() => {
+    if (el) portal.remove();
+    const newPortal = createPortal(el);
+    setPortal(newPortal);
+    return () => newPortal.remove(el);
+  }, [el]);
+
+  return portal.render;
+};
+```
+
+```jsx
+const App = () => {
+  const Portal = usePortal(document.querySelector('title'));
+
+  return (
+    <p>
+      Hello world!
+      <Portal>Portalized Title</Portal>
+    </p>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
+```
diff --git a/snippets/react/s/use-previous.md b/snippets/react/s/use-previous.md
new file mode 100644
index 000000000..2be252c77
--- /dev/null
+++ b/snippets/react/s/use-previous.md
@@ -0,0 +1,45 @@
+---
+title: React usePrevious hook
+type: snippet
+language: react
+tags: [hooks,state,effect]
+author: chalarangelo
+cover: couch-laptop
+dateModified: 2020-11-16T14:17:53+02:00
+---
+
+Stores the previous state or props.
+
+- Create a custom hook that takes a `value`.
+- Use the `useRef()` hook to create a `ref` for the `value`.
+- Use the `useEffect()` hook to remember the latest `value`.
+
+```jsx
+const usePrevious = value => {
+  const ref = React.useRef();
+  React.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
+```
+
+```jsx
+const Counter = () => {
+  const [value, setValue] = React.useState(0);
+  const lastValue = usePrevious(value);
+
+  return (
+    <div>
+      <p>
+        Current: {value} - Previous: {lastValue}
+      </p>
+      <button onClick={() => setValue(value + 1)}>Increment</button>
+    </div>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Counter />
+);
+```
diff --git a/snippets/react/s/use-request-animation-frame.md b/snippets/react/s/use-request-animation-frame.md
new file mode 100644
index 000000000..8af5396e8
--- /dev/null
+++ b/snippets/react/s/use-request-animation-frame.md
@@ -0,0 +1,49 @@
+---
+title: React useRequestAnimationFrame hook
+type: snippet
+language: react
+tags: [hooks,effect]
+author: chalarangelo
+cover: aerial-view-port
+dateModified: 2021-12-29T05:00:00-04:00
+---
+
+Runs an animating function, calling it before every repaint.
+
+- Use the `useRef()` hook to create two variables. `requestRef` will hold the last request id and `previousTimeRef` will hold the last timestamp.
+- Define a function, `animate`, which handles updating these variables, runs the `callback` and calls `Window.requestAnimationFrame()` perpetually.
+- Use the `useEffect()` hook with an empty array to initialize the value of `requestRef` using `Window.requestAnimationFrame()`. Use the returned value and `Window.cancelAnimationFrame()` to clean up when the component unmounts.
+
+```jsx
+const useRequestAnimationFrame = callback => {
+  const requestRef = React.useRef();
+  const previousTimeRef = React.useRef();
+
+  const animate = time => {
+    if (previousTimeRef.current) callback(time - previousTimeRef.current);
+    previousTimeRef.current = time;
+    requestRef.current = requestAnimationFrame(animate);
+  };
+
+  React.useEffect(() => {
+    requestRef.current = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(requestRef.current);
+  }, []);
+};
+```
+
+```jsx
+const Counter = () => {
+  const [count, setCount] = React.useState(0);
+
+  useRequestAnimationFrame(deltaTime => {
+    setCount(prevCount => (prevCount + deltaTime * 0.01) % 100);
+  });
+
+  return <p>{Math.round(count)}</p>;
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Counter />
+);
+```
diff --git a/snippets/react/s/use-script.md b/snippets/react/s/use-script.md
new file mode 100644
index 000000000..209fa94de
--- /dev/null
+++ b/snippets/react/s/use-script.md
@@ -0,0 +1,95 @@
+---
+title: React useScript hook
+type: snippet
+language: react
+tags: [hooks,effect,state,event]
+author: chalarangelo
+cover: travel-mug-3
+dateModified: 2021-10-08T05:00:00-04:00
+---
+
+Dynamically loads an external script.
+
+- Use the `useState()` hook to create a state variable for the load status of the script.
+- Use the `useEffect()` hook to handle all the logic for loading and unloading the script anytime the `src` changes.
+- If no `src` value is present, set the `status` to `'idle'` and return.
+- Use `Document.querySelector()` to check if a `<script>` element with the appropriate `src` value exists.
+- If no relevant element exists, use `Document.createElement()` to create one and give it the appropriate attributes.
+- Use the `data-status` attribute as a way to indicate the status of the script, setting it to `'loading'` initially.
+- If a relevant element exists, skip initialization and update the `status` from its `data-status` attribute. This ensures that no duplicate element will be created.
+- Use `EventTarget.addEventListener()` to listen for `'load'` and `'error'` events and handle them by updating the `data-status` attribute and the `status` state variable.
+- Finally, when the component unmounts, use `Document.removeEventListener()` to remove any listeners bound to the element.
+
+```jsx
+const useScript = src => {
+  const [status, setStatus] = React.useState(src ? 'loading' : 'idle');
+
+  React.useEffect(() => {
+    if (!src) {
+      setStatus('idle');
+      return;
+    }
+
+    let script = document.querySelector(`script[src="${src}"]`);
+
+    if (!script) {
+      script = document.createElement('script');
+      script.src = src;
+      script.async = true;
+      script.setAttribute('data-status', 'loading');
+      document.body.appendChild(script);
+
+      const setDataStatus = event => {
+        script.setAttribute(
+          'data-status',
+          event.type === 'load' ? 'ready' : 'error'
+        );
+      };
+      script.addEventListener('load', setDataStatus);
+      script.addEventListener('error', setDataStatus);
+    } else {
+      setStatus(script.getAttribute('data-status'));
+    }
+
+    const setStateStatus = event => {
+      setStatus(event.type === 'load' ? 'ready' : 'error');
+    };
+
+    script.addEventListener('load', setStateStatus);
+    script.addEventListener('error', setStateStatus);
+
+    return () => {
+      if (script) {
+        script.removeEventListener('load', setStateStatus);
+        script.removeEventListener('error', setStateStatus);
+      }
+    };
+  }, [src]);
+
+  return status;
+};
+```
+
+```jsx
+const script =
+  'data:text/plain;charset=utf-8;base64,KGZ1bmN0aW9uKCl7IGNvbnNvbGUubG9nKCdIZWxsbycpIH0pKCk7';
+
+const Child = () => {
+  const status = useScript(script);
+  return <p>Child status: {status}</p>;
+};
+
+const MyApp = () => {
+  const status = useScript(script);
+  return (
+    <>
+      <p>Parent status: {status}</p>
+      <Child />
+    </>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
+```
diff --git a/snippets/react/s/use-search-param.md b/snippets/react/s/use-search-param.md
new file mode 100644
index 000000000..f7c9d6baf
--- /dev/null
+++ b/snippets/react/s/use-search-param.md
@@ -0,0 +1,70 @@
+---
+title: React useSearchParam hook
+type: snippet
+language: react
+tags: [hooks,state,effect]
+author: chalarangelo
+cover: coffee-phone-tray-3
+dateModified: 2021-10-13T05:00:00-04:00
+---
+
+Tracks the browser's location search param.
+
+- Use the `useCallback()` hook to create a callback that uses the `URLSearchParams` constructor to get the current value of `param`.
+- Use the `useState()` hook to create a state variable that holds the current value of the `param`.
+- Use the `useEffect()` hook to set appropriate event listeners to update the state variable when mounting and clean them up when unmounting.
+
+```jsx
+const useSearchParam = param => {
+  const getValue = React.useCallback(
+    () => new URLSearchParams(window.location.search).get(param),
+    [param]
+  );
+
+  const [value, setValue] = React.useState(getValue);
+
+  React.useEffect(() => {
+    const onChange = () => {
+      setValue(getValue());
+    };
+
+    window.addEventListener('popstate', onChange);
+    window.addEventListener('pushstate', onChange);
+    window.addEventListener('replacestate', onChange);
+
+    return () => {
+      window.removeEventListener('popstate', onChange);
+      window.removeEventListener('pushstate', onChange);
+      window.removeEventListener('replacestate', onChange);
+    };
+  }, []);
+
+  return value;
+};
+```
+
+```jsx
+const MyApp = () => {
+  const post = useSearchParam('post');
+
+  return (
+    <>
+      <p>Post param value: {post || 'null'}</p>
+      <button
+        onClick={() =>
+          history.pushState({}, '', location.pathname + '?post=42')
+        }
+      >
+        View post 42
+      </button>
+      <button onClick={() => history.pushState({}, '', location.pathname)}>
+        Exit
+      </button>
+    </>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
+```
diff --git a/snippets/react/s/use-session-storage.md b/snippets/react/s/use-session-storage.md
new file mode 100644
index 000000000..cb5993a10
--- /dev/null
+++ b/snippets/react/s/use-session-storage.md
@@ -0,0 +1,55 @@
+---
+title: React useSessionStorage hook
+type: snippet
+language: react
+tags: [hooks,state]
+author: chalarangelo
+cover: white-laptop
+dateModified: 2021-09-15T05:00:00-04:00
+---
+
+Creates a stateful value that is persisted to `sessionStorage`, and a function to update it.
+
+- Use the `useState()` hook with a function to initialize its value lazily.
+- Use a `try...catch` block and `Storage.getItem()` to try and get the value from `Window.sessionStorage`. If no value is found, use `Storage.setItem()` to store the `defaultValue` and use it as the initial state. If an error occurs, use `defaultValue` as the initial state.
+- Define a function that will update the state variable with the passed value and use `Storage.setItem()` to store it.
+
+```jsx
+const useSessionStorage = (keyName, defaultValue) => {
+  const [storedValue, setStoredValue] = React.useState(() => {
+    try {
+      const value = window.sessionStorage.getItem(keyName);
+
+      if (value) {
+        return JSON.parse(value);
+      } else {
+        window.sessionStorage.setItem(keyName, JSON.stringify(defaultValue));
+        return defaultValue;
+      }
+    } catch (err) {
+      return defaultValue;
+    }
+  });
+
+  const setValue = newValue => {
+    try {
+      window.sessionStorage.setItem(keyName, JSON.stringify(newValue));
+    } catch (err) {}
+    setStoredValue(newValue);
+  };
+
+  return [storedValue, setValue];
+};
+```
+
+```jsx
+const MyApp = () => {
+  const [name, setName] = useSessionStorage('name', 'John');
+
+  return <input value={name} onChange={e => setName(e.target.value)} />;
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
+```
diff --git a/snippets/react/s/use-set.md b/snippets/react/s/use-set.md
new file mode 100644
index 000000000..7f27845f6
--- /dev/null
+++ b/snippets/react/s/use-set.md
@@ -0,0 +1,54 @@
+---
+title: React useSet hook
+type: snippet
+language: react
+tags: [hooks,state]
+author: chalarangelo
+cover: engine
+dateModified: 2021-11-01T05:00:00-04:00
+---
+
+Creates a stateful `Set` object, and a set of functions to manipulate it.
+
+- Use the `useState()` hook and the `Set` constructor to create a new `Set` from the `initialValue`.
+- Use the `useMemo()` hook to create a set of non-mutating actions that manipulate the `set` state variable, using the state setter to create a new `Set` every time.
+- Return the `set` state variable and the created `actions`.
+
+```jsx
+const useSet = initialValue => {
+  const [set, setSet] = React.useState(new Set(initialValue));
+
+  const actions = React.useMemo(
+    () => ({
+      add: item => setSet(prevSet => new Set([...prevSet, item])),
+      remove: item =>
+        setSet(prevSet => new Set([...prevSet].filter(i => i !== item))),
+      clear: () => setSet(new Set()),
+    }),
+    [setSet]
+  );
+
+  return [set, actions];
+};
+```
+
+```jsx
+const MyApp = () => {
+  const [set, { add, remove, clear }] = useSet(new Set(['apples']));
+
+  return (
+    <div>
+      <button onClick={() => add(String(Date.now()))}>Add</button>
+      <button onClick={() => clear()}>Reset</button>
+      <button onClick={() => remove('apples')} disabled={!set.has('apples')}>
+        Remove apples
+      </button>
+      <pre>{JSON.stringify([...set], null, 2)}</pre>
+    </div>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
+```
diff --git a/snippets/react/s/use-ssr.md b/snippets/react/s/use-ssr.md
new file mode 100644
index 000000000..407a67beb
--- /dev/null
+++ b/snippets/react/s/use-ssr.md
@@ -0,0 +1,64 @@
+---
+title: React useSSR hook
+type: snippet
+language: react
+tags: [hooks,effect,state,memo]
+author: chalarangelo
+cover: interior-6
+dateModified: 2021-03-10T06:38:42+02:00
+---
+
+Checks if the code is running on the browser or the server.
+
+- Create a custom hook that returns an appropriate object.
+- Use `typeof`, `Window`, `Window.document` and `Document.createElement()` to check if the code is running on the browser.
+- Use the `useState()` hook to define the `inBrowser` state variable.
+- Use the `useEffect()` hook to update the `inBrowser` state variable and clean up at the end.
+- Use the `useMemo()` hook to memoize the return values of the custom hook.
+
+```jsx
+const isDOMavailable = !!(
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.createElement
+);
+
+const useSSR = () => {
+  const [inBrowser, setInBrowser] = React.useState(isDOMavailable);
+
+  React.useEffect(() => {
+    setInBrowser(isDOMavailable);
+    return () => {
+      setInBrowser(false);
+    };
+  }, []);
+
+  const useSSRObject = React.useMemo(
+    () => ({
+      isBrowser: inBrowser,
+      isServer: !inBrowser,
+      canUseWorkers: typeof Worker !== 'undefined',
+      canUseEventListeners: inBrowser && !!window.addEventListener,
+      canUseViewport: inBrowser && !!window.screen
+    }),
+    [inBrowser]
+  );
+
+  return React.useMemo(
+    () => Object.assign(Object.values(useSSRObject), useSSRObject),
+    [inBrowser]
+  );
+};
+```
+
+```jsx
+const SSRChecker = props => {
+  let { isBrowser, isServer } = useSSR();
+
+  return <p>{isBrowser ? 'Running on browser' : 'Running on server'}</p>;
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <SSRChecker />
+);
+```
diff --git a/snippets/react/s/use-timeout.md b/snippets/react/s/use-timeout.md
new file mode 100644
index 000000000..ced42e47a
--- /dev/null
+++ b/snippets/react/s/use-timeout.md
@@ -0,0 +1,51 @@
+---
+title: React useTimeout hook
+type: snippet
+language: react
+tags: [hooks,effect]
+author: chalarangelo
+cover: interior-10
+dateModified: 2020-11-16T14:17:53+02:00
+---
+
+Implements `setTimeout()` in a declarative manner.
+
+- Create a custom hook that takes a `callback` and a `delay`.
+- Use the `useRef()` hook to create a `ref` for the callback function.
+- Use the `useEffect()` hook to remember the latest callback.
+- Use the `useEffect()` hook to set up the timeout and clean up.
+
+```jsx
+const useTimeout = (callback, delay) => {
+  const savedCallback = React.useRef();
+
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  React.useEffect(() => {
+    const tick = () => {
+      savedCallback.current();
+    }
+    if (delay !== null) {
+      let id = setTimeout(tick, delay);
+      return () => clearTimeout(id);
+    }
+  }, [delay]);
+};
+```
+
+```jsx
+const OneSecondTimer = props => {
+  const [seconds, setSeconds] = React.useState(0);
+  useTimeout(() => {
+    setSeconds(seconds + 1);
+  }, 1000);
+
+  return <p>{seconds}</p>;
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <OneSecondTimer />
+);
+```
diff --git a/snippets/react/s/use-title.md b/snippets/react/s/use-title.md
new file mode 100644
index 000000000..9858232db
--- /dev/null
+++ b/snippets/react/s/use-title.md
@@ -0,0 +1,54 @@
+---
+title: React useTitle hook
+type: snippet
+language: react
+tags: [hooks,effect]
+author: chalarangelo
+cover: blue-lake
+dateModified: 2021-09-27T05:00:00-04:00
+---
+
+Sets the title of the page
+
+- Use `typeof` to determine if the `Document` is defined or not.
+- Use the `useRef()` hook to store the original title of the `Document`, if defined.
+- Use the `useEffect()` hook to set `Document.title` to the passed value when the component mounts and clean up when unmounting.
+
+```jsx
+const useTitle = title => {
+  const documentDefined = typeof document !== 'undefined';
+  const originalTitle = React.useRef(documentDefined ? document.title : null);
+
+  React.useEffect(() => {
+    if (!documentDefined) return;
+
+    if (document.title !== title) document.title = title;
+
+    return () => {
+      document.title = originalTitle.current;
+    };
+  }, []);
+};
+```
+
+```jsx
+const Alert = () => {
+  useTitle('Alert');
+  return <p>Alert! Title has changed</p>;
+};
+
+const MyApp = () => {
+  const [alertOpen, setAlertOpen] = React.useState(false);
+
+  return (
+    <>
+      <button onClick={() => setAlertOpen(!alertOpen)}>Toggle alert</button>
+      {alertOpen && <Alert />}
+    </>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
+```
diff --git a/snippets/react/s/use-toggler.md b/snippets/react/s/use-toggler.md
new file mode 100644
index 000000000..1cbe428e5
--- /dev/null
+++ b/snippets/react/s/use-toggler.md
@@ -0,0 +1,35 @@
+---
+title: React useToggler hook
+type: snippet
+language: react
+tags: [hooks,state,callback]
+author: chalarangelo
+cover: tram-car-2
+dateModified: 2020-11-27T09:41:31+02:00
+---
+
+Provides a boolean state variable that can be toggled between its two states.
+
+- Use the `useState()` hook to create the `value` state variable and its setter.
+- Create a function that toggles the value of the `value` state variable and memoize it, using the `useCallback()` hook.
+- Return the `value` state variable and the memoized toggler function.
+
+```jsx
+const useToggler = initialState => {
+  const [value, setValue] = React.useState(initialState);
+
+  const toggleValue = React.useCallback(() => setValue(prev => !prev), []);
+
+  return [value, toggleValue];
+};
+```
+
+```jsx
+const Switch = () => {
+  const [val, toggleVal] = useToggler(false);
+  return <button onClick={toggleVal}>{val ? 'ON' : 'OFF'}</button>;
+};
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Switch />
+);
+```
diff --git a/snippets/react/s/use-unload.md b/snippets/react/s/use-unload.md
new file mode 100644
index 000000000..e26ce5831
--- /dev/null
+++ b/snippets/react/s/use-unload.md
@@ -0,0 +1,42 @@
+---
+title: React useUnload hook
+type: snippet
+language: react
+tags: [hooks,effect,event]
+cover: digital-nomad-14
+dateModified: 2020-11-29T14:16:36+02:00
+---
+
+Handles the `beforeunload` window event.
+
+- Use the `useRef()` hook to create a ref for the callback function, `fn`.
+- Use the `useEffect()` hook and `EventTarget.addEventListener()` to handle the `'beforeunload'` (when the user is about to close the window).
+- Use `EventTarget.removeEventListener()` to perform cleanup after the component is unmounted.
+
+```jsx
+const useUnload = fn => {
+  const cb = React.useRef(fn);
+
+  React.useEffect(() => {
+    const onUnload = cb.current;
+    window.addEventListener('beforeunload', onUnload);
+    return () => {
+      window.removeEventListener('beforeunload', onUnload);
+    };
+  }, [cb]);
+};
+```
+
+```jsx
+const App = () => {
+  useUnload(e => {
+    e.preventDefault();
+    const exit = confirm('Are you sure you want to leave?');
+    if (exit) window.close();
+  });
+  return <div>Try closing the window.</div>;
+};
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
+```
diff --git a/snippets/react/s/use-update.md b/snippets/react/s/use-update.md
new file mode 100644
index 000000000..9ab1b4450
--- /dev/null
+++ b/snippets/react/s/use-update.md
@@ -0,0 +1,37 @@
+---
+title: React useUpdate hook
+type: snippet
+language: react
+tags: [components,reducer]
+author: chalarangelo
+cover: lavender-shelf
+dateModified: 2021-09-24T05:00:00-04:00
+---
+
+Forces the component to re-render when called.
+
+- Use the `useReducer()` hook that creates a new object every time it's updated and return its dispatch.
+
+```jsx
+const useUpdate = () => {
+  const [, update] = React.useReducer(() => ({}));
+  return update;
+};
+```
+
+```jsx
+const MyApp = () => {
+  const update = useUpdate();
+
+  return (
+    <>
+      <div>Time: {Date.now()}</div>
+      <button onClick={update}>Update</button>
+    </>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
+```
diff --git a/snippets/react/s/use-window-size.md b/snippets/react/s/use-window-size.md
new file mode 100644
index 000000000..b0d36cd30
--- /dev/null
+++ b/snippets/react/s/use-window-size.md
@@ -0,0 +1,55 @@
+---
+title: React useWindowSize hook
+type: snippet
+language: react
+tags: [hooks,state,effect]
+author: chalarangelo
+cover: polar-bear
+dateModified: 2021-10-18T05:00:00-04:00
+---
+
+Tracks the dimensions of the browser window.
+
+- Use the `useState()` hook to initialize a state variable that will hold the window's dimensions. Initialize with both values set to `undefined` to avoid mismatch between server and client renders.
+- Create a function that uses `Window.innerWidth` and `Window.innerHeight` to update the state variable.
+- Use the `useEffect()` hook to set an appropriate listener for the `'resize'` event on mount and clean it up when unmounting.
+
+```jsx
+const useWindowSize = () => {
+  const [windowSize, setWindowSize] = React.useState({
+    width: undefined,
+    height: undefined,
+  });
+
+  React.useEffect(() => {
+    const handleResize = () =>
+      setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+
+    window.addEventListener('resize', handleResize);
+
+    handleResize();
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return windowSize;
+};
+```
+
+```jsx
+const MyApp = () => {
+  const { width, height } = useWindowSize();
+
+  return (
+    <p>
+      Window size: ({width} x {height})
+    </p>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
+```
diff --git a/snippets/react/template.md b/snippets/react/template.md
new file mode 100644
index 000000000..1b7b39729
--- /dev/null
+++ b/snippets/react/template.md
@@ -0,0 +1,30 @@
+---
+title: Component Name
+type: snippet
+language: react
+tags: [components,state,effect]
+cover: image
+dateModified: 2021-06-13T05:00:00-04:00
+---
+
+Explain briefly what the snippet does.
+
+- Explain briefly how the snippet works.
+- Use bullet points for your snippet's explanation.
+- Try to explain everything briefly but clearly.
+
+```jsx
+const ComponentName = props => {
+  const [state, setState] = React.useState(null);
+  React.useEffect(() => {
+    setState(0);
+  });
+  return <div>{props}</div>;
+}
+```
+
+```jsx
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <ComponentName />
+);
+```