Add a handful of new collections

collections/js-browser-capabilities.yaml

@@ -0,0 +1,19 @@
+slug: c/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-css-manipulation.yaml

@@ -0,0 +1,23 @@
+slug: c/js-css-manipulation
+name: CSS Manipulation with JavaScript
+featured: true
+snippetIds:
+  - js/s/toggle-class
+  - js/s/add-class
+  - js/s/remove-class
+  - js/s/has-class
+  - js/s/get-style
+  - js/s/set-style
+  - js/s/add-styles
+  - js/s/inject-css
+  - js/s/hide
+  - js/s/show
+  - js/s/remove-attributes
+  - js/s/prefix
+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-dom-manipulation.yaml

@@ -0,0 +1,18 @@
+slug: c/js-dom-manipulation
+name: JavaScript DOM Manipulation
+featured: true
+snippetIds:
+  - articles/s/js-create-element
+  - js/s/create-element
+  - js/s/remove-element
+  - js/s/insert-after
+  - js/s/insert-before
+  - js/s/render-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: c/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
+  - articles/s/javascript-query-selector-shorthand
+  - js/s/element-is-visible-in-viewport
+  - articles/s/select-focused-dom-element
+  - js/s/get-elements-bigger-than-viewport
+  - articles/s/js-element-from-point
+  - js/s/element-is-focused
+  - js/s/get-vertical-offset
+  - articles/s/javascript-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-http-requests.yaml

@@ -0,0 +1,18 @@
+slug: c/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
+  - articles/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-performance.yaml

@@ -0,0 +1,22 @@
+slug: c/js-performance
+name: JavaScript Performance Optimization
+featured: true
+snippetIds:
+  - articles/s/javascript-store-dom-items
+  - articles/s/passive-scroll-listener-performance
+  - articles/s/js-textcontent-or-innertext
+  - articles/s/javascript-memoization
+  - articles/s/js-array-filtering-tips
+  - articles/s/js-fast-remove-array-element
+  - articles/s/code-anatomy-optimizing-recursion
+  - articles/s/javascript-switch-object
+  - articles/s/js-dynamic-properties-are-slow
+  - articles/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-scroll.yaml

@@ -0,0 +1,17 @@
+slug: c/js-scroll
+name: Browser Scrolling with JavaScript
+featured: true
+snippetIds:
+  - js/s/scroll-to-top
+  - js/s/smooth-scroll
+  - js/s/bottom-visible
+  - js/s/get-scroll-position
+  - js/s/get-scrollbar-width
+splash: travel-mug-1.png
+description: >-
+  Getting the scroll position and manipulating with JavaScript can help you
+  drive your users' attention to specific parts of your website. Learn some
+  cool new tricks to make your website stand out.
+shortDescription: >-
+  Learn how to manipulate the scroll position of your website with JavaScript
+  and make your website stand out.

collections/js-web-storage-essentials.yaml

@@ -0,0 +1,16 @@
+slug: c/js-web-storage-essentials
+name: Web Storage Essentials
+featured: true
+snippetIds:
+  - articles/s/cookies-local-storage-session
+  - js/s/parse-cookie
+  - js/s/serialize-cookie
+  - js/s/is-local-storage-enabled
+  - js/s/is-session-storage-enabled
+splash: basics.png
+description: >-
+  Modern browsers offer a handful of options when it comes to storing data on
+  the client-side. This collection contains the necessary resources to master
+  web storage in JavaScript and level up your skills.
+shortDescription: >-
+  Master web storage in JavaScript with this collection of tips and tricks.

collections/react-rendering.yaml

@@ -1,6 +1,6 @@
 slug: c/react-rendering
 name: React Rendering
-shortName: Rendering
+miniName: Rendering
 parent: react
 featured: true
 snippetIds:

hub.yaml

@@ -22,13 +22,18 @@ featuredListings:
 - c/js-comparison
 - c/html-head-basics
 - c/css-centering
-- c/tips
+- c/js-css-manipulation
 - c/js-url
 - c/js-proxy
+- c/js-dom-querying
+- c/js-dom-manipulation
 - c/js-event-handling
 - c/js-arrow-functions
+- c/js-performance
+- c/tips
 - c/react-rendering
 - c/js-colors
+- c/js-browser-capabilities
 - c/js-array-methods
 - c/js-array-tricks
 - c/js-object-key-transformations
@@ -36,13 +41,16 @@ featuredListings:
 - 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/js-web-storage-essentials
+- c/js-scroll
 - c/js-array-initialization
 - c/css-background-patterns
 - c/js-object-cloning
+- react/t/components
+- c/js-http-requests
 - c/web-development
 - c/js-object-key-selection
 - c/cheatsheets