Migrate assets and configs

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.

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.

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.

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.

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.

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

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

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

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

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

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

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

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

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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.

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.

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

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

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

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.

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