Fix typo

Fixes #1946

.github/labeler.yml

@@ -0,0 +1,22 @@
+js:
+  - snippets/js/s/*.md
+  - collections/js/*.yaml
+css:
+  - snippets/css/s/*.md
+  - collections/css/*.yaml
+html:
+  - snippets/html/s/*.md
+  - collections/html/*.yaml
+git:
+  - snippets/git/s/*.md
+  - collections/git/*.yaml
+python:
+  - snippets/python/s/*.md
+  - collections/python/*.yaml
+react:
+  - snippets/react/s/*.md
+  - collections/react/*.yaml
+snippet:
+  - snippets/**/*.md
+collection:
+  - collections/**/*.yaml

.github/workflows/label.yml

@@ -0,0 +1,22 @@
+# This workflow will triage pull requests and apply a label based on the
+# paths that are modified in the pull request.
+#
+# To use this workflow, you will need to set up a .github/labeler.yml
+# file with configuration.  For more information, see:
+# https://github.com/actions/labeler
+
+name: Labeler
+on: [pull_request_target]
+
+jobs:
+  label:
+
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+
+    steps:
+    - uses: actions/labeler@v4
+      with:
+        repo-token: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/stale.yml

@@ -0,0 +1,31 @@
+# This workflow warns and then closes issues and PRs that have had no activity for a specified amount of time.
+#
+# You can adjust the behavior by modifying this file.
+# For more information, see:
+# https://github.com/actions/stale
+name: Mark stale issues and pull requests
+
+on:
+  schedule:
+  - cron: '44 0 * * *'
+
+jobs:
+  stale:
+
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+
+    steps:
+    - uses: actions/stale@v5
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        stale-issue-message: 'This issue has been inactive for a while, marking as stale.'
+        stale-pr-message: 'This pull request has been inactive for a while, marking as stale.'
+        stale-issue-label: 'stale'
+        stale-pr-label: 'stale'
+        days-before-stale: 30
+        days-before-close: 30
+        close-issue-message: 'This issue has been stale for a while, closing due to inactivity.'
+        close-pr-message: 'This pull request has been inactive for a while, closing due to inactivity.'

CONTRIBUTING.md

@@ -4,39 +4,61 @@
 
 ## How you can help
 
-- Submit pull requests with new snippets (see guidelines below) or snippet updates (tags, descriptions, explanations, typos, examples, code improvements).
+- Participate in community Discussions.
-- Open issues for things you want to see added, modified, discuss ideas or help out with existing issues.
+- Submit Pull Requests with new snippets or collections.
+- Submit Issues or Pull Requests related to bugs, improvements, typos etc.
 
 ## Ground rules
 
 Breaking any of these rules will result in your pull request being closed. Please follow these guidelines above all else:
 
 - **Always be polite and respectful to others** and try to follow the advice of the moderators/collaborators/owners.
-- **Only modify snippet files**, never modify the generated files in the `snippet_data` directory.
+- **Only create or modify snippet and collecton files**, never touch the `assets` or `languages` directories or any of the files in the root directory.
-- **Use the snippet template** to create new snippets, ensure they have the correct name and are in the correct location.
+- **Use existing templates for snippets and collections**, ensuring to follow guidelines and that files are in the correct location.
-- **Follow snippet format exactly**, otherwise your snippets will not be recognized correctly by the tools responsible for publishing them on the website. This includes such things as spacing and empty lines - if you accidentally make a mistake, consult the repository's [snippet template](snippet-template.md).
+- **Follow snippet and collection format exactly**, otherwise your content will not be recognized correctly by the tools responsible for publishing them on the website. Consult the templates or previous snippets/collections if you are unsure.
 - **Snippets should solve real-world problems**, no matter how simple and should be abstract enough to be applied to different scenarios.
+- **Stories should cover topics of interest to the community**, be well-written and concise, providing code examples as necessary.
+- **Collections should be tied together by a common theme**, covering a narrow topic and providing a good number of snippets.
 
 ## Snippet creation
 
 In order to create a new snippet, you should follow the steps below:
 
-- Create a copy of the [snippet template](snippet-template.md) in the `snippets` directory.
+- Create a copy of the snippet or story template in the relevant subdirectory of the `snippets` directory and move it under the `s` directory.
 - Change the name of the newly created file to the name of your snippet.
 - Edit the file, adding your snippet based on the guidelines.
 
 ## Snippet guidelines
 
 - Snippet must follow [these general writing guidelines](https://github.com/30-seconds/brand-and-design/blob/master/writing-guidelines.md).
-- Snippets must have all their frontmatter sections (title, tags etc.) filled.
+- Snippets must have all their frontmatter sections (title, tags, cover etc.) filled.
-- Snippet titles must correspond to the filename and follow the language and repository's naming conventions.
+- Snippet filenames must be in `kebab-case` and end in `.md`. Use SEO-friendly names and avoid unnecessary words.
+- Snippet titles must loosely correspond to the filename and follow the language and repository's naming conventions.
 - Snippet tags must be comma-separated, contain a primary tag as seen on the website as their first tag.
-- Snippets must have their `firstSeen` dates formatted using [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601).
+- Snippets must include a cover image from the `assets/cover` directory, without the file extension.
+- Snippets must have their `dateModified` dates formatted using [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601).
 - Snippet descriptions must be short and to the point. Explain *what* the snippet does and detail *how* the snippet works and the language features used in it.
 - Snippet code and examples must be enclosed in appropriate, language-tagged blocks as shown in the snippet template, be short and use modern techniques and features. Also make sure to test your code before submitting.
-- If your snippet contains arguments with default parameters, explain what happens if they are omitted when calling the function and what the default case is. Specify default parameters for arguments only if necessary.
-- If your snippet uses recursion, use the `recursion` tag and explain the base cases.
 - Try to strike a balance between readability, brevity, and performance.
 - 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.
+- Define multiple variables on the same line, if possible. Use meaningful variable 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.
+- Whenever appropriate, an excerpt should be used to provide a short summary of the snippet. Excerpts should be up to 140 characters long and end in a period (`.`).
+- Do not add or edit the `author` field in the frontmatter. This is reserved for organization members only.
+
+## Collection creation
+
+In order to create a new collection, you should follow the steps below:
+
+- Create a copy of the collection template in the `collections` directory and move it under the relevant subdirectory.
+- Change the name of the newly created file to the name of your collection.
+- Edit the file, adding your collection based on the guidelines.
+
+## Collection guidelines
+
+- Collections must have all their metadata sections (title, splash, description etc.) filled.
+- Collection filenames must be in `kebab-case` and end in `.yaml`. Use SEO-friendly names and avoid unnecessary words.
+- Collection titles must loosely correspond to the filename and follow the language and repository's naming conventions.
+- Collection descriptions must be short and to the point. Briefly explain the topic of the collection.
+- Collection splashes must be images from the `assets/splash` directory, with the file extension.
+- Collections must contain at least 3 snippets.

README.md

@@ -5,16 +5,16 @@
 > Short JavaScript code snippets for all your development needs
 
 * 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.
+* Search for 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 [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.
+* Browse all [snippets](https://30secondsofcode.org/snippets/p/1) or individual [snippet collections](https://30secondsofcode.org/collections/p/1) for each topic.
 * 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.
+* You can copy code blocks on any snippet card, using the copy button at the top right.
 * If you like the project, give it a star. It means a lot to the people maintaining it.
 
 ## Want to contribute?
 
 * If you want to help us improve, take a minute to read the [Contribution Guidelines](/CONTRIBUTING.md) first.
-* Use the relevant `snippet-template.md` to add new snippets to each collection.
+* Use the relevant `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).
 

collection-template.yaml

@@ -0,0 +1,14 @@
+slug: my-collection
+name: My awesome collection
+shortName: My collection
+featured: true
+snippetIds:
+  - js/s/array-initialization
+  - js/s/initialize-array-with-values
+  - js/s/initialize-array-with-range
+  - js/s/initialize-2d-array
+splash: plant-screen.png
+description: >-
+  Explain the collection's topic in a few sentences.
+shortDescription: >-
+  A short description of your collection up to 140 characters long.

collections/cheatsheets.yaml

@@ -1,4 +1,4 @@
-slug: c/cheatsheets
+slug: cheatsheets
 name: Cheatsheets
 featured: true
 typeMatcher: cheatsheet

collections/css/animation.yaml

@@ -1,4 +1,4 @@
-slug: css/t/animation
+slug: css/animation
 name: CSS Animations
 featured: true
 miniName: Animation

collections/css/background-patterns.yaml

@@ -1,4 +1,4 @@
-slug: c/css-background-patterns
+slug: css/background-patterns
 name: CSS Background Patterns
 featured: true
 snippetIds:

collections/css/button-transitions.yaml

@@ -1,4 +1,4 @@
-slug: c/css-button-transitions
+slug: css/button-transitions
 name: CSS Button Transitions
 featured: true
 snippetIds:

collections/css/centering.yaml

@@ -1,8 +1,8 @@
-slug: c/css-centering
+slug: css/centering
 name: CSS Centering
 featured: true
 snippetIds:
-  - articles/s/css-centering
+  - css/s/centering
   - css/s/flexbox-centering
   - css/s/grid-centering
   - css/s/transform-centering

collections/css/hover-effects.yaml

@@ -1,4 +1,4 @@
-slug: c/css-hover-effects
+slug: css/hover-effects
 name: CSS Hover Effects
 featured: true
 snippetIds:

collections/css/interactivity.yaml

@@ -1,4 +1,4 @@
-slug: css/t/interactivity
+slug: css/interactivity
 name: CSS Interactivity Snippets
 shortName: CSS Interactivity
 miniName: Interactivity

collections/css/layout.yaml

@@ -1,4 +1,4 @@
-slug: css/t/layout
+slug: css/layout
 name: CSS Layouts
 miniName: Layout
 featured: true

collections/css/visual.yaml

@@ -1,4 +1,4 @@
-slug: css/t/visual
+slug: css/visual
 name: CSS Visual Snippets
 shortName: CSS Visual
 miniName: Visual

collections/git/branch.yaml

@@ -1,4 +1,4 @@
-slug: git/t/branch
+slug: git/branch
 name: Git Branch Snippets
 shortName: Git Branches
 miniName: Branch

collections/git/commit.yaml

@@ -1,4 +1,4 @@
-slug: git/t/commit
+slug: git/commit
 name: Git Commit Snippets
 shortName: Git Commits
 miniName: Commit

collections/git/configuration.yaml

@@ -1,4 +1,4 @@
-slug: git/t/configuration
+slug: git/configuration
 name: Git Configuration Snippets
 shortName: Git Configuration
 miniName: Configuration

collections/git/repository.yaml

@@ -1,4 +1,4 @@
-slug: git/t/repository
+slug: git/repository
 name: Git Repository Snippets
 shortName: Git Repositories
 miniName: Repository

collections/html/head-basics.yaml

@@ -1,11 +1,12 @@
-slug: c/html-head-basics
+slug: html/head-basics
 name: HTML Head Basics
+miniName: Head Basics
 featured: true
 snippetIds:
-  - articles/s/html-recommended-minimum-head
+  - html/s/recommended-minimum-head
-  - articles/s/html-head-social-tags
+  - html/s/head-social-tags
-  - articles/s/html-head-icons
+  - html/s/head-icons
-  - articles/s/html-head-links
+  - html/s/head-links
 splash: basics.png
 description: >-
   Learn how to use the HTML head element to improve your site's SEO, social

collections/html/index.yaml

@@ -0,0 +1,14 @@
+slug: html
+name: HTML Snippets
+shortName: HTML
+topLevel: true
+languageMatcher: html
+featured: true
+splash: tram-car-2.png
+description: >-
+  The HTML snippet collection contains tips, tricks and practical code examples
+  to help you master web development. This collection covers elements, tags,
+  links, forms, tables and more.
+shortDescription: >-
+  Master HTML 5 with this collection of tips, tricks and code examples.
+

collections/js-array-set-operations.yaml

@@ -1,22 +0,0 @@
-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.

collections/js-interviews.yaml

@@ -1,48 +0,0 @@
-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.

collections/js/algorithm.yaml

@@ -1,4 +1,4 @@
-slug: js/t/algorithm
+slug: js/algorithm
 name: JavaScript Algorithms
 miniName: Algorithms
 featured: true

collections/js/array-initialization.yaml

@@ -0,0 +1,21 @@
+slug: js/array-initialization
+name: JavaScript Array Initialization
+featured: true
+snippetIds:
+  - js/s/array-initialization
+  - js/s/initialize-array-with-values
+  - js/s/initialize-array-with-range
+  - js/s/initialize-array-with-reversed-range
+  - js/s/initialize-mapped-array
+  - js/s/initialize-array-while
+  - js/s/initialize-array-until
+  - js/s/initialize-2d-array
+  - js/s/initialize-n-dimensional-array
+splash: laptop-lamp.png
+description: >-
+  When it comes to array initialization in JavaScript, there are as many options
+  available as there are use cases to consider. This collection will help you
+  find the right one for your needs.
+shortDescription: >-
+  Discover the inner workings of JavaScript arrays and learn about the different
+  ways to initialize them.

collections/js/array-methods.yaml

@@ -1,15 +1,16 @@
-slug: c/js-array-methods
+slug: js/array-methods
 name: JavaScript Array Methods
 featured: true
 snippetIds:
-  - articles/s/articles/s/js-array-map-vs-foreach
+  - js/s/array-map-vs-foreach
-  - articles/s/4-javascript-array-methods
+  - js/s/4-array-methods
-  - articles/s/javascript-array-comparison
+  - js/s/array-comparison
-  - articles/s/javascript-index-for-of-loop
+  - js/s/index-for-of-loop
-  - articles/s/javascript-for-loop-early-break
+  - js/s/for-loop-early-break
-  - articles/s/code-anatomy-chaining-reduce-for-loop
+  - js/s/array-initialization
-  - articles/s/javascript-async-array-loops
+  - js/s/code-anatomy-chaining-reduce-for-loop
-  - articles/s/js-typecheck-array
+  - js/s/async-array-loops
+  - js/s/typecheck-array
 splash: laptop-lamp.png
 description: >-
   JavaScript arrays offer a lot of data manipulation and transformation methods.

collections/js/array-set-operations.yaml

@@ -0,0 +1,22 @@
+slug: js/array-set-operations
+name: JavaScript Array Set Operations
+featured: true
+snippetIds:
+  - js/s/array-union
+  - js/s/array-intersection
+  - js/s/array-difference
+  - js/s/array-symmetric-difference
+  - js/s/mapped-array-union
+  - js/s/mapped-array-intersection
+  - js/s/mapped-array-difference
+  - js/s/mapped-array-symmetric-difference
+  - js/s/function-based-array-union
+  - js/s/function-based-array-intersection
+  - js/s/function-based-array-difference
+  - js/s/function-based-array-symmetric-difference
+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.

collections/js/array-tricks.yaml

@@ -1,19 +1,19 @@
-slug: c/js-array-tricks
+slug: js/array-tricks
 name: JavaScript Array Tricks
 featured: true
 snippetIds:
-  - js/s/unique-elements
+  - js/s/unique-elements-in-array
-  - js/s/compact
+  - js/s/compact-array
-  - js/s/any
+  - js/s/any-array-element-is-truthy
-  - js/s/all
+  - js/s/all-array-elements-are-truthy
-  - js/s/none
+  - js/s/all-array-elements-are-falsy
-  - js/s/difference
+  - js/s/array-difference
-  - js/s/union
+  - js/s/array-union
-  - js/s/intersection
+  - js/s/array-intersection
-  - js/s/head
+  - js/s/array-head
-  - js/s/tail
+  - js/s/array-tail
-  - js/s/last
+  - js/s/last-array-element
-  - js/s/flatten
+  - js/s/flatten-array
 splash: terrarium.png
 description: >-
   Arrays are one of the most common data types in JavaScript. While there are

collections/js/array.yaml

@@ -1,4 +1,4 @@
-slug: js/t/array
+slug: js/array
 name: JavaScript Array Snippets
 shortName: JavaScript Arrays
 miniName: Array

collections/js/arrow-functions.yaml

@@ -1,11 +1,11 @@
-slug: c/js-arrow-functions
+slug: js/arrow-functions
 name: JavaScript Arrow Functions
 featured: true
 snippetIds:
-  - articles/s/javascript-arrow-functions
+  - js/s/arrow-functions
-  - articles/s/javascript-arrow-regular-function-differences
+  - js/s/arrow-regular-function-differences
-  - articles/s/javascript-arrow-function-event-listeners
+  - js/s/arrow-function-event-listeners
-  - articles/s/javascript-this
+  - js/s/this
 splash: coffee-float.png
 description: >-
   Arrow functions are one of the most useful tools in a JavaScript developer's

collections/js/browser-capabilities.yaml

@@ -0,0 +1,19 @@
+slug: js/browser-capabilities
+name: Browser Capability Detection
+featured: true
+snippetIds:
+  - js/s/supports-touch-events
+  - js/s/detect-device-type
+  - js/s/detect-language
+  - js/s/prefers-dark-color-scheme
+  - js/s/prefers-light-color-scheme
+  - js/s/is-local-storage-enabled
+  - js/s/is-session-storage-enabled
+splash: compass-1.png
+description: >-
+  Using modern JavaScript APIs, you can detect a wide variety of browser
+  capabilities and adapt the user experience accordingly. Start creating
+  responsive web applications with this collection of tips and tricks.
+shortDescription: >-
+  Use modern JavaScript APIs to detect a variety of browser capabilities and
+  adapt the user experience accordingly.

collections/js/browser.yaml

@@ -1,4 +1,4 @@
-slug: js/t/browser
+slug: js/browser
 name: JavaScript Browser Snippets
 shortName: JavaScript Browser
 miniName: Browser

collections/js/colors.yaml

@@ -1,4 +1,4 @@
-slug: c/js-colors
+slug: js/colors
 name: Colors in JavaScript
 featured: true
 snippetIds:

collections/js/comparison.yaml

@@ -1,18 +1,18 @@
-slug: c/js-comparison
+slug: js/comparison
 name: JavaScript Comparison
 featured: true
 snippetIds:
-  - articles/s/javascript-equality
+  - js/s/equality
-  - articles/s/javascript-value-not-equal-to-itself
+  - js/s/value-not-equal-to-itself
-  - articles/s/javascript-object-comparison
+  - js/s/object-comparison
-  - articles/s/javascript-array-comparison
+  - js/s/array-comparison
-  - articles/s/javascript-date-comparison
+  - js/s/date-comparison
-  - articles/s/javascript-object-is-triple-equals
+  - js/s/object-is-triple-equals
-  - js/s/equals
+  - js/s/deep-equality-comparison
-  - js/s/matches
+  - js/s/match-object-properties
-  - js/s/matches-with
+  - js/s/function-based-object-property-matches
-  - js/s/have-same-contents
+  - js/s/arrays-have-same-contents
-  - js/s/is-same-date
+  - js/s/date-is-same-as-another-date
 splash: succulent.png
 description: >-
   Comparing values in JavaScript is one of the most common tasks. Yet, there are

collections/js/css-manipulation.yaml

@@ -0,0 +1,23 @@
+slug: js/css-manipulation
+name: CSS Manipulation with JavaScript
+featured: true
+snippetIds:
+  - js/s/toggle-html-element-class
+  - js/s/add-class-to-html-element
+  - js/s/remove-class-from-html-element
+  - js/s/html-element-has-class
+  - js/s/get-style
+  - js/s/set-style-for-html-element
+  - js/s/add-styles-to-html-element
+  - js/s/inject-css
+  - js/s/hide-html-elements
+  - js/s/show-html-elements
+  - js/s/remove-attributes
+  - js/s/prefix-css-property
+splash: planning.png
+description: >-
+  Unlock the power of manipulating CSS in the browser, using JavaScript. From
+  toggling classes to injecting styles, this collection contains everything you
+  need to know to get started.
+shortDescription: >-
+  Get started with manipulating CSS in the browser, using JavaScript.

collections/js/data-structures.yaml

@@ -1,20 +1,20 @@
-slug: c/js-data-structures
+slug: js/data-structures
 name: JavaScript Data Structures
 miniName: Data Structures
 parent: js
 featured: true
 snippetIds:
-  - articles/s/js-native-data-structures
+  - js/s/native-data-structures
-  - articles/s/js-data-structures-queue
+  - js/s/data-structures-queue
-  - articles/s/js-data-structures-stack
+  - js/s/data-structures-stack
-  - articles/s/js-data-structures-linked-list
+  - js/s/data-structures-linked-list
-  - articles/s/js-data-structures-doubly-linked-list
+  - js/s/data-structures-doubly-linked-list
-  - articles/s/js-data-structures-graph
+  - js/s/data-structures-graph
-  - articles/s/js-data-structures-tree
+  - js/s/data-structures-tree
-  - articles/s/js-data-structures-binary-tree
+  - js/s/data-structures-binary-tree
-  - articles/s/js-data-structures-binary-search-tree
+  - js/s/data-structures-binary-search-tree
-  - articles/s/js-frequency-map-data-structure
+  - js/s/frequency-map-data-structure
-  - articles/s/big-o-cheatsheet
+  - js/s/big-o-cheatsheet
 splash: purple-flower.png
 description: >-
   The JavaScript data structures collection includes implementations and

collections/js/date.yaml

@@ -1,4 +1,4 @@
-slug: js/t/date
+slug: js/date
 name: JavaScript Date Snippets
 shortName: JavaScript Dates
 miniName: Date

collections/js/dom-manipulation.yaml

@@ -0,0 +1,18 @@
+slug: js/dom-manipulation
+name: JavaScript DOM Manipulation
+featured: true
+snippetIds:
+  - js/s/create-html-elements
+  - js/s/create-element
+  - js/s/remove-dom-element
+  - js/s/insert-html-string-after-element
+  - js/s/insert-html-string-before-element
+  - js/s/render-dom-element
+splash: hiking-balance.png
+description: >-
+  DOM manipulation is a core skill for any web developer. Learn how to
+  manipulate DOM elements with JavaScript with this collection of tips and
+  tricks.
+shortDescription: >-
+  Create, insert, remove and manipulate DOM elements with this collection of
+  JavaScript tips and tricks.

collections/js/dom-querying.yaml

@@ -0,0 +1,27 @@
+slug: js/dom-querying
+name: JavaScript DOM Querying
+featured: true
+snippetIds:
+  - js/s/get-siblings
+  - js/s/get-ancestors
+  - js/s/get-parents-until
+  - js/s/find-closest-matching-node
+  - js/s/element-contains
+  - js/s/find-closest-anchor
+  - js/s/get-images
+  - js/s/query-selector-shorthand
+  - js/s/element-is-visible-in-viewport
+  - js/s/select-focused-dom-element
+  - js/s/get-elements-bigger-than-viewport
+  - js/s/element-from-point
+  - js/s/element-is-focused
+  - js/s/get-vertical-offset
+  - js/s/store-dom-items
+splash: laptop-plants-1.png
+description: >-
+  Querying the DOM is an essential skill every web developer should have. Learn
+  how to query the DOM quickly and efficiently with this collection of
+  JavaScript tips and tricks.
+shortDescription: >-
+  Learn how to query the DOM quickly and efficiently with this collection of
+  JavaScript tips and tricks.

collections/js/event-handling.yaml

@@ -1,20 +1,20 @@
-slug: c/js-event-handling
+slug: js/event-handling
 name: JavaScript Event Handling
 featured: true
 snippetIds:
-  - js/s/on
+  - js/s/add-event-listener
-  - js/s/off
+  - js/s/remove-event-listener
   - js/s/listen-once
   - js/s/on-click-outside
-  - articles/s/javascript-event-bubbling-capturing-delegation
+  - js/s/event-bubbling-capturing-delegation
   - js/s/add-event-listener-all
-  - js/s/remove-event-listener-all
+  - js/s/remove-multiple-event-listeners
-  - js/s/add-multiple-events
+  - js/s/add-multiple-event-listeners
-  - articles/s/javascript-listen-once
+  - js/s/execute-event-handler-once
-  - articles/s/passive-scroll-listener-performance
+  - js/s/passive-scroll-listener-performance
   - js/s/on-scroll-stop
-  - articles/s/javascript-arrow-function-event-listeners
+  - js/s/arrow-function-event-listeners
-  - articles/s/detect-caps-lock-is-on
+  - js/s/detect-caps-lock-is-on
   - js/s/trigger-event
   - js/s/on-user-input-change
 splash: monsterra.png

collections/js/function.yaml

@@ -1,4 +1,4 @@
-slug: js/t/function
+slug: js/function
 name: JavaScript Function Snippets
 miniName: Function
 featured: true

collections/js/generators.yaml

@@ -1,24 +1,24 @@
-slug: c/js-generators
+slug: js/generators
 name: JavaScript Generator Functions
 featured: true
 snippetIds:
-  - articles/s/javascript-range-generator
+  - js/s/generator-for-range
   - 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/chunk-iterable
   - js/s/date-range-generator
   - js/s/index-of-substrings
-  - js/s/walk-through
+  - js/s/walk-through-object
   - js/s/generate-while
   - js/s/generate-until
-  - js/s/left-substr-generator
+  - js/s/left-substring-generator
-  - js/s/right-substr-generator
+  - js/s/right-substring-generator
-  - articles/s/javascript-make-iterable
+  - js/s/make-iterable
-  - articles/s/javascript-enum
+  - js/s/enum
-  - articles/s/javascript-object-array-proxy
+  - js/s/object-array-proxy
 splash: generator.png
 description: >-
   JavaScript generator functions introduce a way to define an iterative

collections/js/geometry.yaml

@@ -1,4 +1,4 @@
-slug: c/js-geometry
+slug: js/geometry
 name: JavaScript Geometric Operations
 featured: true
 snippetIds:

collections/js/http-requests.yaml

@@ -0,0 +1,18 @@
+slug: js/http-requests
+name: HTTP Requests in JavaScript
+featured: true
+snippetIds:
+  - js/s/http-get
+  - js/s/http-post
+  - js/s/http-put
+  - js/s/http-delete
+  - articles/s/http-status-codes-cheatsheet
+  - js/s/cors-explained
+splash: laptop-plants-1.png
+description: >-
+  Making network requests is a crucial part of most web applications. This
+  snippet collection introduces core concepts related to HTTP requests, as well
+  as how to make them in JavaScript.
+shortDescription: >-
+  Easily perform HTTP requests in JavaScript and elevate your web development
+  skills.

collections/js/interviews.yaml

@@ -0,0 +1,48 @@
+slug: js/interviews
+name: JavaScript Interview Questions
+miniName: Interview Questions
+featured: true
+parent: js
+snippetIds:
+  - js/s/equality
+  - js/s/truthy-falsy-values
+  - js/s/expression-statement
+  - js/s/undeclared-undefined-null
+  - js/s/variable-hoisting
+  - js/s/variable-scope
+  - js/s/callbacks
+  - js/s/pass-by-reference-or-pass-by-value
+  - js/s/promises
+  - js/s/sync-async
+  - js/s/classical-vs-prototypal-inheritance
+  - js/s/this
+  - js/s/shallow-deep-clone
+  - js/s/copy-array
+  - js/s/object-comparison
+  - js/s/array-comparison
+  - js/s/array-includes-value
+  - js/s/array-map-vs-foreach
+  - js/s/event-bubbling-capturing-delegation
+  - js/s/value-not-equal-to-itself
+  - js/s/blank-value
+  - js/s/string-immutability
+  - js/s/static-instance-methods
+  - js/s/arrow-functions
+  - js/s/pure-functions
+  - js/s/recursion
+  - js/s/use-strict
+  - html/s/async-defer
+  - js/s/closures
+  - js/s/iife
+  - js/s/event-loop-explained
+  - js/s/prefix-postfix-operators
+  - js/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.

collections/js/logical-operations.yaml

@@ -1,4 +1,4 @@
-slug: c/js-logical-operations
+slug: js/logical-operations
 name: JavaScript Logical Operations
 featured: true
 snippetIds:
@@ -7,10 +7,10 @@ snippetIds:
   - js/s/not
   - js/s/xor
   - js/s/nor
-  - js/s/when
+  - js/s/conditionally-apply-function
   - js/s/both
-  - js/s/either
+  - js/s/function-logical-or
-  - js/s/complement
+  - js/s/logical-complement
 splash: chess-pawns.png
 description: >-
   Boolean logic and logical operations might not come up that often in

collections/js/math.yaml

@@ -1,4 +1,4 @@
-slug: js/t/math
+slug: js/math
 name: JavaScript Math Snippets
 shortName: JavaScript Math
 miniName: Math

collections/js/node.yaml

@@ -1,4 +1,4 @@
-slug: js/t/node
+slug: js/node
 name: Node.js Snippets
 shortName: Node.js
 miniName: Node

collections/js/object-cloning.yaml

@@ -1,11 +1,11 @@
-slug: c/js-object-cloning
+slug: js/object-cloning
 name: JavaScript Object Cloning
 featured: true
 snippetIds:
-  - articles/s/javascript-shallow-deep-clone
+  - js/s/shallow-deep-clone
-  - js/s/shallow-clone
+  - js/s/shallow-clone-object
-  - js/s/deep-clone
+  - js/s/deep-clone-object
-  - articles/s/javascript-copy-array
+  - js/s/copy-array
 splash: coffee-phone-tray.png
 description: >-
   JavaScript objects and arrays are a little tricky to clone. Luckily, this

collections/js/object-key-selection.yaml

@@ -1,11 +1,11 @@
-slug: c/js-object-key-selection
+slug: js/object-key-selection
 name: JavaScript Object Key Selection
 featured: true
 snippetIds:
-  - js/s/pick
+  - js/s/pick-object-keys
-  - js/s/omit
+  - js/s/omit-object-keys
-  - js/s/pick-by
+  - js/s/pick-matching-object-keys
-  - js/s/omit-by
+  - js/s/omit-matching-object-keys
 splash: succulent-cluster.png
 description: >-
   Sometimes, JavaScript objects come with a lot of keys and you only need a few

collections/js/object-key-transformations.yaml

@@ -1,13 +1,13 @@
-slug: c/js-object-key-transformations
+slug: js/object-key-transformations
 name: JavaScript Object Key Transformations
 featured: true
 snippetIds:
   - js/s/lowerize
   - js/s/upperize
-  - js/s/map-keys
+  - js/s/map-object-keys
-  - js/s/rename-keys
+  - js/s/rename-object-keys
-  - js/s/deep-map-keys
+  - js/s/deep-map-object-keys
-  - js/s/symbolize-keys
+  - js/s/symbolize-object-keys
 splash: plant-window.png
 description: >-
   Sometimes, object keys aren't exactly what you want them to be. Luckily, this

collections/js/object.yaml

@@ -1,4 +1,4 @@
-slug: js/t/object
+slug: js/object
 name: JavaScript Object Snippets
 shortName: JavaScript Objects
 miniName: Object

collections/js/performance.yaml

@@ -0,0 +1,22 @@
+slug: js/performance
+name: JavaScript Performance Optimization
+featured: true
+snippetIds:
+  - js/s/store-dom-items
+  - js/s/passive-scroll-listener-performance
+  - js/s/textcontent-or-innertext
+  - js/s/memoization
+  - js/s/array-filtering-tips
+  - js/s/fast-remove-array-element
+  - js/s/code-anatomy-optimizing-recursion
+  - js/s/switch-object
+  - js/s/dynamic-properties-are-slow
+  - js/s/big-o-cheatsheet
+splash: do-more-computer.png
+description: >-
+  Enhance your website's performance with our collection of tips and tricks on
+  JavaScript optimization. Learn essential techniques for faster load times and
+  better user experience.
+shortDescription: >-
+  Optimize your JavaScript with this collections of tips and tricks and take
+  your website to the next level.

collections/js/promises.yaml

@@ -1,13 +1,13 @@
-slug: c/js-promises
+slug: js/promises
 name: JavaScript Promises
 featured: true
 snippetIds:
-  - articles/s/javascript-promises
+  - js/s/promises
-  - articles/s/async-javascript-cheatsheet
+  - js/s/async-cheatsheet
-  - articles/s/javascript-sync-async
+  - js/s/sync-async
-  - articles/s/javascript-promise-then-catch
+  - js/s/promise-then-catch
-  - articles/s/javascript-promise-then-finally
+  - js/s/promise-then-finally
-  - articles/s/javascript-await-timeout
+  - js/s/await-timeout
   - js/s/debounce-promise
   - js/s/run-promises-in-series
 splash: blue-computer.png

collections/js/proxy.yaml

@@ -1,16 +1,16 @@
-slug: c/js-proxy
+slug: js/proxy
 name: JavaScript Proxy
 featured: true
 snippetIds:
-  - articles/s/js-proxy-introduction
+  - js/s/proxy-introduction
-  - articles/s/js-dynamic-getter-setter-proxy
+  - js/s/dynamic-getter-setter-proxy
-  - articles/s/js-immutable-object-proxy
+  - js/s/immutable-object-proxy
-  - articles/s/javascript-singleton-proxy
+  - js/s/singleton-proxy
-  - articles/s/js-dynamic-getter-chain-proxy
+  - js/s/dynamic-getter-chain-proxy
-  - articles/s/javascript-object-array-proxy
+  - js/s/object-array-proxy
-  - articles/s/js-proxy-array-negative-index
+  - js/s/proxy-array-negative-index
-  - articles/s/js-cannot-extend-proxy-object
+  - js/s/cannot-extend-proxy-object
-  - articles/s/js-typecheck-proxy
+  - js/s/typecheck-proxy
 splash: laptop-coffee.png
 description: >-
   The JavaScript Proxy object can be a very powerful tool to extend the

collections/js/random-value-generators.yaml

@@ -1,11 +1,11 @@
-slug: c/js-random-value-generators
+slug: 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-integer-array-in-range
-  - js/s/random-alpha-numeric
+  - js/s/random-alphanumeric
   - js/s/random-boolean
   - js/s/random-hex-color-code
   - js/s/random-gauss