diff --git a/collections/js-browser-capabilities.yaml b/collections/js-browser-capabilities.yaml new file mode 100644 index 000000000..ff1fb4681 --- /dev/null +++ b/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. diff --git a/collections/js-css-manipulation.yaml b/collections/js-css-manipulation.yaml new file mode 100644 index 000000000..36ac6b4af --- /dev/null +++ b/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. diff --git a/collections/js-dom-manipulation.yaml b/collections/js-dom-manipulation.yaml new file mode 100644 index 000000000..143023104 --- /dev/null +++ b/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. diff --git a/collections/js-dom-querying.yaml b/collections/js-dom-querying.yaml new file mode 100644 index 000000000..c4860c58d --- /dev/null +++ b/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. diff --git a/collections/js-http-requests.yaml b/collections/js-http-requests.yaml new file mode 100644 index 000000000..68aa39862 --- /dev/null +++ b/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. diff --git a/collections/js-performance.yaml b/collections/js-performance.yaml new file mode 100644 index 000000000..6cbce7132 --- /dev/null +++ b/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. diff --git a/collections/js-scroll.yaml b/collections/js-scroll.yaml new file mode 100644 index 000000000..b6bf5f9de --- /dev/null +++ b/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. diff --git a/collections/js-web-storage-essentials.yaml b/collections/js-web-storage-essentials.yaml new file mode 100644 index 000000000..2d5b5dcbe --- /dev/null +++ b/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. diff --git a/collections/react-rendering.yaml b/collections/react-rendering.yaml index 8eea84b5f..6d3295a3f 100644 --- a/collections/react-rendering.yaml +++ b/collections/react-rendering.yaml @@ -1,6 +1,6 @@ slug: c/react-rendering name: React Rendering -shortName: Rendering +miniName: Rendering parent: react featured: true snippetIds: diff --git a/hub.yaml b/hub.yaml index 0973fe3d8..8d7b40415 100644 --- a/hub.yaml +++ b/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