From c20cdad956ba191a458ce334999eb788d98bdf10 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Fri, 28 Sep 2018 20:07:27 +0300 Subject: [PATCH] Search fix --- docs/adapter.html | 17 +++++++++++------ docs/archive.html | 34 ++++++++++++++++++---------------- docs/browser.html | 17 +++++++++++------ docs/date.html | 17 +++++++++++------ docs/function.html | 17 +++++++++++------ docs/glossary.html | 34 ++++++++++++++++++---------------- docs/index.html | 17 +++++++++++------ docs/math.html | 17 +++++++++++------ docs/node.html | 17 +++++++++++------ docs/object.html | 17 +++++++++++------ docs/string.html | 17 +++++++++++------ docs/style.css | 2 +- docs/type.html | 17 +++++++++++------ docs/utility.html | 17 +++++++++++------ scripts/web.js | 8 ++++---- static-parts/page-start.html | 15 ++++++++++----- 16 files changed, 172 insertions(+), 108 deletions(-) diff --git a/docs/adapter.html b/docs/adapter.html index 54f7a25da..81ebb2fb9 100644 --- a/docs/adapter.html +++ b/docs/adapter.html @@ -1,15 +1,20 @@ Adapter - 30 seconds of code

logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.



Adapter

ary

Creates a function that accepts up to n arguments, ignoring any additional arguments.

Call the provided function, fn, with up to n arguments, using Array.slice(0,n) and the spread operator (...).

const ary = (fn, n) => (...args) => fn(...args.slice(0, n));
+      }
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


Adapter
ary
Creates a function that accepts up to n arguments, ignoring any additional arguments.
Call the provided function, fn, with up to n arguments, using Array.slice(0,n) and the spread operator (...).
const ary = (fn, n) => (...args) => fn(...args.slice(0, n));
 
const firstTwoMax = ary(Math.max, 2);
 [[2, 6, 'a'], [8, 4, 6], [10]].map(x => firstTwoMax(...x)); // [6, 8, 10]
 
call
Given a key and a set of arguments, call them when given a context. Primarily useful in composition.
Use a closure to call a stored key with stored arguments.
const call = (key, ...args) => context => context[key](...args);
diff --git a/docs/archive.html b/docs/archive.html
index 0fb704311..172d7d5ba 100644
--- a/docs/archive.html
+++ b/docs/archive.html
@@ -2,7 +2,7 @@
         let matchingTags = [];
         Array.from(node.parentElement.getElementsByTagName('a')).forEach(x => {
           let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
-          if(data.includes(true)){
+          if (data.includes(true)) {
             x.style.display = '';
             matchingTags.push(x.getAttribute('tags').split(',')[0]);
           }
@@ -12,7 +12,7 @@
           x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none';
         })
       }
-      function scrollToTop(){
+      function scrollToTop() {
         const c = document.querySelector('.card-container').scrollTop;
         if (c > 0) {
           window.requestAnimationFrame(scrollToTop);
@@ -24,33 +24,35 @@
         var difference = to - element.scrollTop;
         var perTick = difference / duration * 40;
 
-        setTimeout(function() {
-            element.scrollTop = element.scrollTop + perTick;
-            if (element.scrollTop === to) {
-              window.location.href = "#"+id;
-              return;
-            }
-            scrollTo(element, to, id, duration - 40);
+        setTimeout(function () {
+          element.scrollTop = element.scrollTop + perTick;
+          if (element.scrollTop === to) {
+            window.location.href = "#" + id;
+            return;
+          }
+          scrollTo(element, to, id, duration - 40);
         }, 40);
       };
       function loader() {
         registerClickListener();
-        if(window.innerWidth >= '768')
+        if (window.innerWidth >= '768')
           document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
         else
           document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
       }
       function registerClickListener() {
         document.addEventListener('click', function (event) {
-          if ( event.target.classList.contains('collapse') ) {
+          if (event.target.classList.contains('collapse')) {
             event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
           }
           else if (event.target.classList.contains('menu-button')) {
             document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
+            document.querySelector('[type="search"]').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
             event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
           }
-          else if (!document.querySelector('nav').contains(event.target) && window.innerWidth < '768') {
+          else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
             document.querySelector('nav').classList = '';
+            document.querySelector('[type="search"]').classList = '';
             document.querySelector('.menu-button').classList = 'menu-button';
           }
           else if (event.target.classList.contains('copy-button')) {
@@ -65,12 +67,12 @@
             tst.classList = 'toast';
             tst.innerHTML = 'Snippet copied to clipboard!';
             document.body.appendChild(tst);
-            setTimeout(function() {
+            setTimeout(function () {
               tst.style.opacity = 0;
-              setTimeout(function() {
+              setTimeout(function () {
                 document.body.removeChild(tst);
-              },300);
-            },1700);
+              }, 300);
+            }, 1700);
           }
         }, false);
       }
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


Snippets Archive
These snippets, while useful and interesting, didn't quite make it into the repository due to either having very specific use-cases or being outdated. However we felt like they might still be useful to some readers, so here they are.

binarySearch
Use recursion. Similar to Array.indexOf() that finds the index of a value within an array. The difference being this operation only works with sorted arrays which offers a major performance boost due to it's logarithmic nature when compared to a linear search or Array.indexOf().
Search a sorted array by repeatedly dividing the search interval in half. Begin with an interval covering the whole array. If the value of the search is less than the item in the middle of the interval, recurse into the lower half. Otherwise recurse into the upper half. Repeatedly recurse until the value is found which is the mid or you've recursed to a point that is greater than the length which means the value doesn't exist and return -1.
const binarySearch = (arr, val, start = 0, end = arr.length - 1) => {
diff --git a/docs/browser.html b/docs/browser.html
index e79260b17..25b3f757b 100644
--- a/docs/browser.html
+++ b/docs/browser.html
@@ -1,15 +1,20 @@
 Browser - 30 seconds of code
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


Browser
arrayToHtmlList
Converts the given array elements into <li> tags and appends them to the list of the given id.
Use Array.map(), document.querySelector(), and an anonymous inner closure to create a list of html tags.
const arrayToHtmlList = (arr, listID) =>
+      }
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


Browser
arrayToHtmlList
Converts the given array elements into <li> tags and appends them to the list of the given id.
Use Array.map(), document.querySelector(), and an anonymous inner closure to create a list of html tags.
const arrayToHtmlList = (arr, listID) =>
   (el => (
     (el = document.querySelector('#' + listID)),
     (el.innerHTML += arr.map(item => `<li>${item}</li>`).join(''))
diff --git a/docs/date.html b/docs/date.html
index 1ca8efc40..1a81ba407 100644
--- a/docs/date.html
+++ b/docs/date.html
@@ -1,15 +1,20 @@
 Date - 30 seconds of code
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


Date
formatDuration
Returns the human readable format of the given number of milliseconds.
Divide ms with the appropriate values to obtain the appropriate values for day, hour, minute, second and millisecond. Use Object.entries() with Array.filter() to keep only non-zero values. Use Array.map() to create the string for each value, pluralizing appropriately. Use String.join(', ') to combine the values into a string.
const formatDuration = ms => {
+      }
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


Date
formatDuration
Returns the human readable format of the given number of milliseconds.
Divide ms with the appropriate values to obtain the appropriate values for day, hour, minute, second and millisecond. Use Object.entries() with Array.filter() to keep only non-zero values. Use Array.map() to create the string for each value, pluralizing appropriately. Use String.join(', ') to combine the values into a string.
const formatDuration = ms => {
   if (ms < 0) ms = -ms;
   const time = {
     day: Math.floor(ms / 86400000),
diff --git a/docs/function.html b/docs/function.html
index 2aaa07b0c..9f937f6a0 100644
--- a/docs/function.html
+++ b/docs/function.html
@@ -1,15 +1,20 @@
 Function - 30 seconds of code
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


Function
attempt
Attempts to invoke a function with the provided arguments, returning either the result or the caught error object.
Use a try... catch block to return either the result of the function or an appropriate error.
const attempt = (fn, ...args) => {
+      }
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


Function
attempt
Attempts to invoke a function with the provided arguments, returning either the result or the caught error object.
Use a try... catch block to return either the result of the function or an appropriate error.
const attempt = (fn, ...args) => {
   try {
     return fn(...args);
   } catch (e) {
diff --git a/docs/glossary.html b/docs/glossary.html
index a4a9772d4..46c1acdd3 100644
--- a/docs/glossary.html
+++ b/docs/glossary.html
@@ -2,7 +2,7 @@
         let matchingTags = [];
         Array.from(node.parentElement.getElementsByTagName('a')).forEach(x => {
           let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
-          if(data.includes(true)){
+          if (data.includes(true)) {
             x.style.display = '';
             matchingTags.push(x.getAttribute('tags').split(',')[0]);
           }
@@ -12,7 +12,7 @@
           x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none';
         })
       }
-      function scrollToTop(){
+      function scrollToTop() {
         const c = document.querySelector('.card-container').scrollTop;
         if (c > 0) {
           window.requestAnimationFrame(scrollToTop);
@@ -24,33 +24,35 @@
         var difference = to - element.scrollTop;
         var perTick = difference / duration * 40;
 
-        setTimeout(function() {
-            element.scrollTop = element.scrollTop + perTick;
-            if (element.scrollTop === to) {
-              window.location.href = "#"+id;
-              return;
-            }
-            scrollTo(element, to, id, duration - 40);
+        setTimeout(function () {
+          element.scrollTop = element.scrollTop + perTick;
+          if (element.scrollTop === to) {
+            window.location.href = "#" + id;
+            return;
+          }
+          scrollTo(element, to, id, duration - 40);
         }, 40);
       };
       function loader() {
         registerClickListener();
-        if(window.innerWidth >= '768')
+        if (window.innerWidth >= '768')
           document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
         else
           document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
       }
       function registerClickListener() {
         document.addEventListener('click', function (event) {
-          if ( event.target.classList.contains('collapse') ) {
+          if (event.target.classList.contains('collapse')) {
             event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
           }
           else if (event.target.classList.contains('menu-button')) {
             document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
+            document.querySelector('[type="search"]').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
             event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
           }
-          else if (!document.querySelector('nav').contains(event.target) && window.innerWidth < '768') {
+          else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
             document.querySelector('nav').classList = '';
+            document.querySelector('[type="search"]').classList = '';
             document.querySelector('.menu-button').classList = 'menu-button';
           }
           else if (event.target.classList.contains('copy-button')) {
@@ -65,12 +67,12 @@
             tst.classList = 'toast';
             tst.innerHTML = 'Snippet copied to clipboard!';
             document.body.appendChild(tst);
-            setTimeout(function() {
+            setTimeout(function () {
               tst.style.opacity = 0;
-              setTimeout(function() {
+              setTimeout(function () {
                 document.body.removeChild(tst);
-              },300);
-            },1700);
+              }, 300);
+            }, 1700);
           }
         }, false);
       }
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


Glossary
Developers use a lot of terminology daily. Every once in a while, you might find a term you do not know. We know how frustrating that can get, so we provide you with a handy glossary of frequently used web development terms.

AJAX
Asynchronous JavaScript and XML (known as AJAX) is a term that describes a new approach to using multiple technologies together in order to enable web applications to make quick updates to the user interface without reloading the entire browser page.
API
API stands for Application Programming Interface and is a set of features and rules provided by a provided by a software to enable third-party software to interact with it. The code features of a web API usually include methods, properties, events or URLs.
Argument
An argument is a value passed as an input to a function and can be either a primitive or an object. In JavaScript, functions can also be passed as arguments to other functions.
Array
Arrays are used to store multiple values in a single variable. Arrays are ordered and each item in an array has a numeric index associated with it. JavaScript arrays are zero-indexed, meaning the first element's index is 0.
Asynchronous programming
Asynchronous programming is a way to allow multiple events to trigger code without waiting for each other. The main benefits of asynchronous programming are improved application performance and responsiveness.
Automatic semicolon insertion
Automatic semicolon insertion (ASI) is a JavaScript feature that allows developers to omit semicolons in their code.
Boolean
Booleans are one of the primitive data types in JavaScript. They represent logical data values and can only be true or false.
Callback
A callback function, also known as a high-order function, is a function that is passed into another function as an argument, which is then executed inside the outer function. Callbacks can be synchronous or asynchronous.
Character encoding
A character encoding defines a mapping between bytes and text, specifying how the sequenece of bytes should be interpreted. Two commonly used character encodings are ASCII and UTF-8.
Class
In object-oriented programming, a class is a template definition of an object's properties and methods.
Closure
A closure is the combination of a function and the lexical environment within which that function was declared. The closure allows a function to access the contents of that environment.
CoffeeScript
CoffeeScript is a programming language inspired by Ruby, Python and Haskell that transpiles to JavaScript.
Constant
A constant is a value, associated with an identifier. The value of a constant can be accessed using the identifier and cannot be altered during execution.
Constructor
In class-based object-oriented programming, a constructor is a special type of function called to instantiate an object. Constructors often accept arguments that are commonly used to set member properties.
Continuous Deployment
Continuous Deployment follows the testing that happens during Continuous Integration and pushes changes to a staging or production system. Continuous Deployment ensures that a version of the codebase is accessible at all times.
Continuous Integration
Continuous Integration (CI) is the practice of testing each change done to a codebase automatically and as early as possible. Two popular CI systems that integrate with GitHub are Travis CI and Circle CI.
CORS
Cross-Origin Resource Sharing (known as CORS) is a mechanism that uses extra HTTP headers to tell a browser to let a web application running at one domain have permission to access resources from a server at a different domain.
Cross-site scripting (XSS)
XSS refers to client-side code injection where the attacker injects malicious scripts into a legitimate website or web application. This is often achieved when the application does not validate user input and freely injects dynamic HTML content.
CSS
CSS stands for Cascading Style Sheets and is a language used to style web pages. CSS documents are plaintext documents structured with rules, which consist of element selectors and property-value pairs that apply the styles to the specified selectors.
CSV
CSV stands for Comma-Separated Values and is a storage format for tabular data. CSV documents are plaintext documents where each line represents a table row, with table columns separated by commas or some other delimiter (e.g. semicolons). The first line of a CSV document sometimes consists of the table column headings for the data to follow.
Currying
Currying is a way of constructing functions that allows partial application of a function's arguments. Practically, this means that a function is broken down into a series of functions, each one accepting part of the arguments.
Deserialization
Deserialization is the process of converting a format that has been transferred over a network and/or used for storage to an object or data structure. A common type of deserialization in JavaScript is the conversion of JSON string into an object.
DNS
A DNS (Domain Name System) translates domain names to the IP addresses needed to find a particular computer service on a network.
DOM
The DOM (Document Object Model) is a cross-platform API that treats HTML and XML documents as a tree structure consisting of nodes. These nodes (such as elements and text nodes) are objects that can be programmatically manipulated and any visible changes made to them are reflected live in the document. In a browser, this API is available to JavaScript where DOM nodes can be manipulated to change their styles, contents, placement in the document, or interacted with through event listeners.
Domain name registrar
A domain name registrar is a company that manages the reservation of internet domain names. A domain name registrar must be approved by a general top-level domain (gTLD) registry or a country code top-level domain (ccTLD) registry.
Domain name
A domain name is a website's address on the Internet, used primarily in URLs to identify the server for each webpage. A domain name consists of a hierarchical sequence of names, separated by dots and ending with an extension.
Element
A JavaScript representation of a DOM element commonly returned by document.querySelector() and document.createElement(). They are used when creating content with JavaScript for display in the DOM that needs to be programatically generated.
ES6
ES6 stands for ECMAScript 6 (also known as ECMAScript 2015), a version of the ECMAScript specification that standardizes JavaScript. ES6 adds a wide variety of new features to the specification, such as classes, promises, generators and arrow functions.
Event-driven programming
Event-driven programming is a programming paradigm in which the flow of the program is determined by events (e.g. user actions, thread messages, sensor outputs). In event-driven applications, there is usually a main loop that listens for events and trigger callback functions accordingly when one of these events is detected.
Event loop
The event loop handles all asynchronous callbacks. Callbacks are queued in a loop, while other code runs, and will run one by one when the response for each one has been received. The event loop allows JavaScript to perform non-blocking I/O operations, despite the fact that JavaScript is single-threaded.
Express
Express is a backend framework, that provides a layer of fundamental web application features for Node.js. Some of its key features are routing, middleware, template engines and error handling.
Factory functions
In JavaScript, a factory function is any function, which is not a class or constructor, that returns a new object. Factory functions don't require the use of the new keyword.
First-class function
A programming language is said to have first-class functions if it treats them as first-class citizens, meaning they can be passed as arguments, be returned as values from other functions, be assigned to variables and stored in data structures.
Flexbox
Flexbox is a one-dimensional layout model used to style websites as a property that could advance space distribution between items and provide powerful alignment capabilities.
Function
Functions are self-contained blocks of code with their own scope, that can be called by other code and are usually associated with a unique identifier. Functions accept input in the form of arguments and can optionally return an output (if no return statement is present, the default value of undefined will be returned instead). JavaScript functions are also objects.
Functional programming
Functional programming is a paradigm in which programs are built in a declarative manner using pure functions that avoid shared state and mutable data. Functions that always return the same value for the same input and don't produce side effects are the pillar of functional programming.
Functor
A Functor is a data type common in functional programming that implements a map method. The map method takes a function and applies it to the data in the Functor, returning a new instance of the Functor with the result. JavaScript Arrays are an example of the Functor data type.
Garbage collection
Garbage collection is a form of automatic memory management. It attempts to reclaim memory occupied by objects that are no longer used by the program.
Git
Git is an open-source version control system, used for source code management. Git allows users to copy (clone) and edit code on their local machines, before merging it into the main code base (master repository).
Higher-order function
Higher-order functions are functions that either take other functions as arguments, return a function as a result, or both.
Hoisting
Hoisting is JavaScript's default behavior of adding declarations to memory during the compile phase. Hoisting allows for JavaScript variables to be used before the line they were declared on.
HTML
HTML stands for HyperText Markup Language and is a language used to structure web pages. HTML documents are plaintext documents structured with elements, which are surrounded by <> tags and optionally extended with attributes.
HTTP and HTTPS
The HyperText Transfer Protocol (HTTP) is the underlying network protocol that enables transfer of hypermedia documents on the Web, usually between a client and a server. The HyperText Transfer Protocol Secure (HTTPS) is an encrypted version of the HTTP protocol, that uses SSL to encrypt all data transfered between a client and a server.
Integer
Integers are one of the primitive data types in Javascript. They represent a numerical value that has no fractional component.
Integration testing
Integration testing is a type of software testing, used to test groups of units/components of a software. The purpose of integration tests are to validate that the units/components interact with each other as expected.
IP
An IP address is a number assigned to a device connected to a network that uses the Internet protocol. Two IP versions are currently in use - IPv4, the older version of the communication protocol (e.g. 192.168.1.100) and IPv6, the newest version of the communication protocol which allows for many different IP addresses (e.g. 0:0:0:0:ffff:c0a8:164).
jQuery
jQuery is a frontend JavaScript library, that simplifies DOM manipulation, AJAX calls and Event handling. jQuery uses its globally defined function, $(), to select and manipulate DOM elements.
JSON
JSON (JavaScript Object Notation) is a format for storing and exchanging data. It closely resembles the JavaScript object syntax, however some data types, such as dates and functions, cannot be natively represented and need to be serialized first.
ajax api argument array asynchronous-programming automatic-semicolon-insertion boolean callback character-encoding class closure coffeescript constant constructor continuous-deployment continuous-integration cors cross-site-scripting-xss css csv currying deserialization dns dom domain-name-registrar domain-name element es6 event-driven-programming event-loop express factory-functions first-class-function flexbox function functional-programming functor garbage-collection git higher-order-function hoisting html http-and-https integer integration-testing ip jquery json keyword_database mdn module mongodb mutabe-value mvc node-js nosql npm object-oriented-programming object prepared-statements promise prototype-based-programming pseudo-class pseudo-element pwa react readme recursion regular-expressions repository responsive-web-design scope selector seo serialization sql-injection sql ssl stream strict-mode string svg template-literals typescript unit-testing uri url utf-8 value-vs-reference variable viewport vue webassembly webgl webrtc websockets xhtml xml yarn
MDN
MDN Web Docs, formerly known as Mozilla Developer Network, is the official Mozilla website for development documentation of web standards and Mozilla projects.
Module
Modules are independent, self-contained pieces of code that can be incorporated into other pieces of code. Modules improve maintainability and reusability of the code.
MongoDB
MongoDB is a NoSQL database model that stores data in flexible, JSON-like documents, meaning fields can vary from document to document and data structure can be changed over time
Mutable value
Mutable value is a type of variable that can be changed once created. Objects are mutable as their state can be modified after they are created. Primitive values are not mutable as we perform reassignment once we change them.
MVC
MVC stands for Model-View-Controller and is a software design pattern, emphasizing separation of concerns (logic and display). The Model part of the MVC pattern refers to the data and business logic, the View handles the layout and display, while the Controller routes commands to the model and view parts.
Node.js
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js can execute JavaScript code outside of the browser and can be used to develop web backends or standalone applications.
NoSQL
NoSQL databases provide a mechanism to create, update, retrieve and calculate data that is stored in models that are non-tabular.
Npm
Npm is a package manager for the JavaScript programming language and the default package manager for Node.js. It consists of a command-line client and the npm registry, an online database of packages.
Object-oriented programming
Object-oriented programming (OOP) is a programming paradigm based on the concept of objects, which may contain both data and procedures which can be use to operate on them. JavaScript supports Object-oriented programming both via prototypes and classes.
Object
Objects are data structures that contain data and instructions for working with the data. Objects consist of key-value pairs, where the keys are alphanumeric identifiers and the values can either be primitives or objects. JavaScript functions are also objects.
Prepared statements
In databases management systems, prepared statements are templates that can be used to execute queries with the provided values substituting the template's parameters. Prepared statements offer many benefits, such as reusability, maintainability and higher security.
Promise
The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. A Promise can be in one of these states: pending(initial state, neither fulfilled nor rejected), fulfilled(operation completed successfully), rejected(operation failed).
Prototype-based programming
Prototype-based programming is a style of object-oriented programming, where inheritance is based on object delegation, reusing objects that serve as prototypes. Prototype-based programming allows the creation of objects before defining their classes.
Pseudo-class
In CSS, a pseudo-class is used to define a special state of an element and can be used as a selector in combination with an id, element or class selector.
Pseudo-element
In CSS, a pseudo-element is used to style specific parts of an element and can be used as a selector in combination with an id, element or class selector.
PWA
Progressive Web App (known as PWA) is a term used to describe web applications that load like regular websites but can offer the user functionality such as working offline, push notifications, and device hardware access that were traditionally available only to native mobile applications.
React
React is a frontend framework, that allows developers to create dynamic, component-based user interfaces. React separates view and state, utilizing a virtual DOM to update the user interface.
Recursion
Recursion is the repeated application of a process. In JavaScript, recursion involves functions that call themselves repeatedly until they reach a base condition. The base condition breaks out of the recursion loop because otherwise the function would call itself indefinitely. Recursion is very useful when working with nested data, especially when the nesting depth is dynamically defined or unkown.
Regular expressions
Regular expressions (known as regex or regexp) are patterns used to match character combinations in strings. JavaScript provides a regular expression implementation through the RegExp object.
Repository
In a version control system, a repository (or repo for short) is a data structure that stores metadata for a set of files (i.e. a project).
Responsive web design
Responsive web design is a web development concept aiming to provide optimal behavior and performance of websites on all web-enabled devices. Responsive web design is usually coupled with a mobile-first approach.
Scope
Each function has its own scope, and any variable declared within that function is only accessible from that function and any nested functions.
Selector
A CSS selector is a pattern that is used to select and/or style one or more elements in a document, based on certain rules. The order in which CSS selectors apply styles to elements is based on the rules of CSS specificity.
SEO
SEO stands for Search Engine Optimization and refers to the process of improving a website's search rankings and visibility.
Serialization
Serialization is the process of converting an object or data structure into a format suitable for transfer over a network and/or storage. A common type of serialization in JavaScript is the conversion of an object into a JSON string.
SQL injection
SQL injection is a code injection technique, used to attack data-driven applications. SQL injections get their name from the SQL language and mainly target data stored in relational databases.
SQL
SQL stands for Structured Query Language and is a language used to create, update, retrieve and calculate data in table-based databases. SQL databases use a relational database model and are particularly useful in handlind structured data with relations between different entities.
SSL
Secure Sockets Layer, commonly known as SSL or TLS, is a set of protocols and standards for transferring private data across the Internet. SSL uses a cryptographic system that uses two keys to encrypt data.
Stream
A stream is a sequence of data made available over time, often due to network transmission or storage access times.
Strict mode
JavaScript's strict mode is a JavaScript feature that allows developers to use a more restrictive variant of JavaScript and it can be enabled by adding 'use strict'; at the very top of their code. Strict mode elimiated some silent errors, might improve performance and changes the behavior of eval and arguments among other things.
String
Strings are one of the primitive data types in JavaScript. They are sequences of characters and are used to represent text.
SVG
SVG stands for Scalable Vector Graphics and is a 2D vector image format based on an XML syntax. SVG images can scale infinitely and can utilize clipping, masking, filters, animations etc.
Template literals
Template literals are strings that allow embedded expressions. They support multi-line strings, expression interpolation and nesting.
TypeScript
TypeScript is a superset of JavaScript, adding optional static typing to the language. TypeScript compiles to plain JavaScript.
Unit testing
Unit testing is a type of software testing, used to test individual units/components of a software. The purpose of unit tests are to validate that each individual unit/component performs as designed.
URI
URI stands for Uniform Resource Identifier and is a text string referring to a resource. A common type of URI is a URL, which is used for the identification of resources on the Web.
URL
URL stands for Uniform Resource Locator and is a text string specifying where a resource can be found on the Internet. In the HTTP protocol, URLs are the same as web addresses and hyperlinks.
UTF-8
UTF-8 stands for UCS Transformation Format 8 and is a commonly used character encoding. UTF-8 is backwards compatible with ASCII and can represent any standard Unicode character.
Value vs reference
When passing a variable by value, a copy of the variable is made, meaning that any changes made to the contents of the variable will not be reflected in the original variable. When passing a variable by reference, the memory address of the actual variable is passed to the function or variable, meaning that modifying the variable's contents will be reflected in the original variable. In JavaScript primitive data types are passed by value while objects are passed by reference.
Variable
A variable is a storage location, associated with an identifier and containing a value. The value of a variable can be referred using the identifier and can be altered during execution.
Viewport
A viewport is a polygonal (usually rectangular) area in computer graphics that is currently being viewed. In web development and design, it refers to the visible part of the document that is being viewed by the user in the browser window.
Vue
Vue.js is a progressive frontend framework for building user interfaces. Vue.js separates view and state, utilizing a virtual DOM to update the user interface.
WebAssembly
WebAssembly (WA) is a web standard that defines an assembly-like text format and corresponding binary format for executalbe code in web pages. WebAssembly is meant to complement JavaScript and improve its performance to match native code performance.
WebGL
WebGL stands for Web Graphics Library and is a JavaScript API that can be used for drawing interactive 2D and 3D graphics. WebGL is based on OpenGL and can be invoked within HTML <canvas> elements, which provide a rendering surface.
WebRTC
WebRTC stands for Web Real-Time Communication and is an API that can be used for video-chat, voice-calling and P2P-file-sharing web apps.
WebSockets
WebSockets is a protocol that allows for a persistent client-server TCP connection. The WebSocket protocol uses lower overheads, facilitating real-time data transfer between client and server.
XHTML
XHTML stands for EXtensible HyperText Markup Language and is a language used to structure web pages. XHTML is a reformulation of the HTML document structure as an application of XML.
XML
XML stands for eXtensible Markup Language and is a generic markup language specified by the W3C. XML documents are plaintext documents structured with user-defined tags, surrounded by <> and optionally extended with attributes.
Yarn
Yarn is a package manager made by Facebook. It can be used as an alternative to the npm package manager and is compatible with the public NPM registry.

\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 748917ab3..2e4ed2c80 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,15 +1,20 @@
 Array - 30 seconds of code
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


Array
all
Returns true if the provided predicate function returns true for all elements in a collection, false otherwise.
Use Array.every() to test if all elements in the collection return true based on fn. Omit the second argument, fn, to use Boolean as a default.
const all = (arr, fn = Boolean) => arr.every(fn);
+      }
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


Array
all
Returns true if the provided predicate function returns true for all elements in a collection, false otherwise.
Use Array.every() to test if all elements in the collection return true based on fn. Omit the second argument, fn, to use Boolean as a default.
const all = (arr, fn = Boolean) => arr.every(fn);
 
all([4, 2, 3], x => x > 1); // true
 all([1, 2, 3]); // true
 
allEqual
Check if all elements in an array are equal.
Use Array.every() to check if all the elements of the array are the same as the first one.
const allEqual = arr => arr.every(val => val === arr[0]);
diff --git a/docs/math.html b/docs/math.html
index 66165df67..37aeb2bb4 100644
--- a/docs/math.html
+++ b/docs/math.html
@@ -1,15 +1,20 @@
 Math - 30 seconds of code
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


Math
approximatelyEqual
Checks if two numbers are approximately equal to each other.
Use Math.abs() to compare the absolute difference of the two values to epsilon. Omit the third parameter, epsilon, to use a default value of 0.001.
const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon;
+      }
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


Math
approximatelyEqual
Checks if two numbers are approximately equal to each other.
Use Math.abs() to compare the absolute difference of the two values to epsilon. Omit the third parameter, epsilon, to use a default value of 0.001.
const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon;
 
approximatelyEqual(Math.PI / 2.0, 1.5708); // true
 
average
Returns the average of two or more numbers.
Use Array.reduce() to add each value to an accumulator, initialized with a value of 0, divide by the length of the array.
const average = (...nums) => nums.reduce((acc, val) => acc + val, 0) / nums.length;
 
average(...[1, 2, 3]); // 2
diff --git a/docs/node.html b/docs/node.html
index 775d882ee..56c7a0fe3 100644
--- a/docs/node.html
+++ b/docs/node.html
@@ -1,15 +1,20 @@
 Node - 30 seconds of code
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


Node
atob
Decodes a string of data which has been encoded using base-64 encoding.
Create a Buffer for the given string with base-64 encoding and use Buffer.toString('binary') to return the decoded string.
const atob = str => new Buffer(str, 'base64').toString('binary');
+      }
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


Node
atob
Decodes a string of data which has been encoded using base-64 encoding.
Create a Buffer for the given string with base-64 encoding and use Buffer.toString('binary') to return the decoded string.
const atob = str => new Buffer(str, 'base64').toString('binary');
 
atob('Zm9vYmFy'); // 'foobar'
 
btoa
Creates a base-64 encoded ASCII string from a String object in which each character in the string is treated as a byte of binary data.
Create a Buffer for the given string with binary encoding and use Buffer.toString('base64') to return the encoded string.
const btoa = str => new Buffer(str, 'binary').toString('base64');
 
btoa('foobar'); // 'Zm9vYmFy'
diff --git a/docs/object.html b/docs/object.html
index 48a72f7c0..7aa33a312 100644
--- a/docs/object.html
+++ b/docs/object.html
@@ -1,15 +1,20 @@
 Object - 30 seconds of code
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


Object
bindAll
Binds methods of an object to the object itself, overwriting the existing method.
Use Array.forEach() to return a function that uses Function.apply() to apply the given context (obj) to fn for each function specified.
const bindAll = (obj, ...fns) =>
+      }
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


Object
bindAll
Binds methods of an object to the object itself, overwriting the existing method.
Use Array.forEach() to return a function that uses Function.apply() to apply the given context (obj) to fn for each function specified.
const bindAll = (obj, ...fns) =>
   fns.forEach(
     fn => (
       (f = obj[fn]),
diff --git a/docs/string.html b/docs/string.html
index a1f7d2f03..3ff935de6 100644
--- a/docs/string.html
+++ b/docs/string.html
@@ -1,15 +1,20 @@
 String - 30 seconds of code
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


String
byteSize
Returns the length of a string in bytes.
Convert a given string to a Blob Object and find its size.
const byteSize = str => new Blob([str]).size;
+      }
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


String
byteSize
Returns the length of a string in bytes.
Convert a given string to a Blob Object and find its size.
const byteSize = str => new Blob([str]).size;
 
byteSize('😀'); // 4
 byteSize('Hello World'); // 11
 
capitalize
Capitalizes the first letter of a string.
Use array destructuring and String.toUpperCase() to capitalize first letter, ...rest to get array of characters after first letter and then Array.join('') to make it a string again. Omit the lowerRest parameter to keep the rest of the string intact, or set it to true to convert to lowercase.
const capitalize = ([first, ...rest], lowerRest = false) =>
diff --git a/docs/style.css b/docs/style.css
index 654046297..d62d9619e 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -1 +1 @@
-@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local("Roboto Light"),local("Roboto-Light"),url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:local("Roboto Light Italic"),local("Roboto-LightItalic"),url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc6CsQ.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local("Roboto Medium"),local("Roboto-Medium"),url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:300;src:local("Roboto Mono Light"),local("RobotoMono-Light"),url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjDgiWqxf78.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto Mono';font-style:italic;font-weight:300;src:local("Roboto Mono Light Italic"),local("RobotoMono-LightItalic"),url(https://fonts.gstatic.com/s/robotomono/v5/L0xmDF4xlVMF-BfR8bXMIjhOk9a0T72jBg.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:500;src:local("Roboto Mono Medium"),local("RobotoMono-Medium"),url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjC4iGqxf78.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}:root{--fore-color:#212121;--back-color:#fff;--card-page-back-color:#eee;--border-color:#eee;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b;--code-fore-color:#8e24aa;--code-back-color:#f0f0f0;--code-selected-color:#37474f;--pre-fore-color:#e57373;--pre-back-color:#263238;--token-color-a:#7f99a5;--token-color-b:#bdbdbd;--token-color-c:#64b5f6;--token-color-d:#ff8f00;--token-color-e:#c5e1a5;--token-color-f:#ce93d8;--token-color-g:#26c6da;--token-color-h:#e57373;--collapse-color:#607d8b;--copy-button-color:#1e88e5;--copy-button-hover-color:#2196f3;--scrolltop-button-color:#26a69a;--scrolltop-button-hover-color:#4db6ac;--beginner-color:#7cb342;--intermediate-color:#ffb300;--advanced-color:#e53935;--header-fore-color:#fff;--header-back-color:#202124;--nav-fore-color:#f0f0f0;--nav-back-color:#202124;--footer-fore-color:#616161;--footer-back-color:#e0e0e0;--nav-link-fore-color:#e0e0e0;--nav-link-border-color:#455a64;--nav-link-hover-color:#2b2c30;--search-fore-color:#fafafa;--search-back-color:#111;--search-border-color:#9e9e9e;--search-hover-border-color:#26a69a}html{font-size:16px;scroll-behavior:smooth}html,*{font-family:Roboto, Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem;font-weight:300}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}body{margin:0;color:var(--fore-color);background:var(--back-color);overflow-x:hidden}body.card-page{background:var(--card-page-back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin)}h1{font-size:6rem}h2{font-size:3.75rem}h3{font-size:3rem}h4{font-size:2.125rem}h5{font-size:1.5rem}h6{font-size:1.25rem}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:500}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}code,kbd,pre{font-size:.875em}code,kbd,pre,code *,pre *,kbd *,code[class*="language-"],pre[class*="language-"]{font-family:Roboto Mono, Menlo, Consolas, monospace}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}code{background:var(--code-back-color);color:var(--code-fore-color);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);border-radius:var(--universal-border-radius)}pre{overflow:auto;background:var(--pre-back-color);color:var(--pre-fore-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:0}code[class*="language-"],pre[class*="language-"]{color:var(--pre-fore-color);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.8;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hypens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]{padding:calc(2 * var(--universal-padding));overflow:auto;margin:var(--universal-margin) 0;white-space:pre-wrap}pre[class*="language-"]::-moz-selection,pre[class*="language-"] ::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"] ::-moz-selection{background:var(--code-selected-color)}pre[class*="language-"]::selection,pre[class*="language-"] ::selection,code[class*="language-"]::selection,code[class*="language-"] ::selection{background:var(--code-selected-color)}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.namespace{opacity:.7}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:var(--token-color-a)}.token.punctuation{color:var(--token-color-b)}.token.property,.token.tag,.token.boolean,.token.constant,.token.symbol,.token.deleted,.token.function{color:var(--token-color-c)}.token.number,.token.class-name{color:var(--token-color-d)}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:var(--token-color-e)}.token.operator,.token.entity,.token.url,.token.atrule,.token.attr-value,.token.keyword,.token.interpolation-punctuation{color:var(--token-color-f)}.token.regex{color:var(--token-color-g)}.token.important,.token.variable{color:var(--token-color-h)}.token.italic,.token.comment{font-style:italic}.token.important,.token.bold{font-weight:500}.token.entity{cursor:help}.language-css .token.string,.style .token.string{color:var(--token-color-f)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width: 500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}.container{display:grid;grid-template-columns:repeat(12, 1fr);grid-column-gap:calc(0.5 * var(--universal-margin))}.container.card-container{position:absolute;padding-top:3.5rem;height:calc(100vh - 3.5rem)}.col-centered{grid-column:span 12;max-width:100%}@media screen and (min-width: 768px){.col-centered{grid-column:2/12}}@media screen and (min-width: 1280px){.col-centered{grid-column:3/11}}.col-quarter{grid-column:span 3}.col-full-width{grid-column:span 12}.flex-row{display:flex;flex:0 1 auto;flex-flow:row wrap}.flex-row .flex-item{flex:0 0 auto;max-width:50%;flex-basis:50%}@media screen and (min-width: 768px){.flex-row .flex-item{max-width:25%;flex-basis:25%}}@media screen and (min-width: 1280px){.flex-row .flex-item{max-width:100%;flex-grow:1;flex-basis:0}}h2.category-name{text-align:center}.card{overflow:hidden;position:relative;margin:var(--universal-margin);border-radius:calc(4 * var(--universal-border-radius));box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}.card h4{text-align:center;padding-bottom:calc(0.75 * var(--universal-padding));margin-bottom:calc(2 * var(--universal-margin));border-bottom:.0625rem solid var(--border-color)}.card.code-card{margin-top:calc(5 * var(--universal-margin));background:var(--pre-back-color)}.card.code-card .section.card-content{background:var(--back-color);padding:calc(1.5 * var(--universal-padding))}.card.code-card .collapse{display:block;font-size:0.75rem;font-family:Roboto Mono, Menlo, Consolas, monospace;text-transform:uppercase;background:var(--pre-back-color);color:var(--collapse-color);padding:calc(1.5 * var(--universal-padding)) calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding)) calc(2.25 * var(--universal-padding));margin-left:calc(1.5 * var(--universal-margin));cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='12' y1='8' x2='12' y2='16'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");background-position:0.25rem 0.9375rem;background-repeat:no-repeat}.card.code-card .collapse+pre.card-examples{margin-left:calc(1.5 * var(--universal-margin));position:absolute;transform:scaleY(0);transform-origin:top;transition:transform 0.3s ease}.card.code-card .collapse.toggled{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-minus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");padding-bottom:calc(0.125 * var(--universal-padding))}.card.code-card .collapse.toggled+pre.card-examples{position:relative;transform:scaleY(1)}.card.code-card pre.section.card-code{position:relative;margin-bottom:0;padding-bottom:0;padding-top:calc(3 * var(--universal-padding))}.card.code-card pre.section.card-examples{margin-top:0;margin-bottom:0;border-radius:0 0 calc(4 * var(--universal-border-radius)) calc(4 * var(--universal-border-radius));padding-top:0}.card.code-card pre.section.card-examples:before{content:'';display:block;position:absolute;top:0;left:0.5625rem;border-left:.0625rem solid var(--collapse-color);height:calc(100% - 18px)}.card.code-card .copy-button-container{position:relative;z-index:2}.card.code-card .copy-button-container .copy-button{background:var(--copy-button-color);box-sizing:border-box;position:absolute;top:-1.75rem;right:0;margin:calc(2 * var(--universal-margin));padding:calc(2.5 * var(--universal-padding));border-radius:50%;border:0;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);transition:all 0.3s ease;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clipboard'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E");background-position:center center;background-repeat:no-repeat}.card.code-card .copy-button-container .copy-button:hover,.card.code-card .copy-button-container .copy-button:focus{background-color:var(--copy-button-hover-color);box-shadow:0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2)}.card.code-card .copy-button-container .copy-button:before{background:var(--back-color);position:absolute;top:-0.25rem;right:-0.25rem;content:'';display:block;box-sizing:border-box;padding:calc(2.5 * var(--universal-padding));border-radius:50%;border:0.25rem solid var(--back-color);z-index:-1}.card.code-card .corner{box-sizing:border-box;position:absolute;top:-0.5rem;right:-2.125rem;width:4rem;height:2rem;padding-top:2rem;transform:rotate(45deg);text-align:center;font-size:0.75rem;font-weight:500;color:var(--back-color);box-shadow:0 2px 2px 0 rgba(0,0,0,0.07),0 3px 1px -2px rgba(0,0,0,0.06),0 1px 5px 0 rgba(0,0,0,0.1)}.card.code-card .corner.beginner{background:var(--beginner-color)}.card.code-card .corner.intermediate{background:var(--intermediate-color)}.card.code-card .corner.advanced{background:var(--advanced-color)}.toast{position:fixed;bottom:calc(var(--universal-margin) * 2);margin-bottom:0;font-size:0.8125rem;left:50%;transform:translate(-50%, -50%);z-index:1111;color:var(--back-color);background:var(--fore-color);border-radius:calc(var(--universal-border-radius) * 16);padding:var(--universal-padding) calc(var(--universal-padding) * 2);box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);transition:all 0.3s ease}header{box-sizing:border-box;overflow:hidden;height:3.5rem;position:fixed;width:110%;top:0;left:-5%;box-shadow:0 2px 4px rgba(0,0,0,0.5);z-index:5;background:var(--header-back-color);transition:top 0.3s ease}header h1.logo{position:relative;top:0;margin-top:0;font-size:1.625rem;text-align:center}header h1 a,header h1 a:link,header h1 a:visited{color:var(--header-fore-color)}header h1 a:hover,header h1 a:focus,header h1 a:link:hover,header h1 a:link:focus,header h1 a:visited:hover,header h1 a:visited:focus{text-decoration:none}header h1 small{display:block;font-size:0.875rem;color:var(--header-back-color);margin-top:0.75rem}header img{height:3.5rem;padding:0.375rem;box-sizing:border-box}header #title{position:relative;top:-1.125rem}@media screen and (max-width: 768px){header #title{display:none}}nav{position:fixed;top:6.5rem;left:-320px;width:320px;transition:left 0.3s ease;z-index:1100;height:calc(100vh - 6.5rem);box-sizing:border-box;display:block;background:var(--nav-back-color);border:0;overflow-y:auto}@media screen and (max-width: 320px){nav{width:100%}}@media screen and (min-width: 768px){nav{width:33vw;left:-33vw}}@media screen and (min-width: 1280px){nav{width:25vw;left:-25vw}}nav.col-nav{box-shadow:0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);left:0}@media screen and (min-width: 768px){nav.col-nav+main.col-centered,nav.col-nav+main.col-centered+footer.col-full-width{grid-column:5/13}}@media screen and (min-width: 1280px){nav.col-nav+main.col-centered{grid-column:4/12;padding-left:8vw}nav.col-nav+main.col-centered+footer.col-full-width{grid-column:4/13}}nav h4{margin:0;padding:calc(2.5 * var(--universal-padding)) calc(2 * var(--universal-padding)) calc(1 * var(--universal-padding)) calc(1 * var(--universal-padding));color:var(--nav-fore-color);font-size:1.5rem}nav h4.collapse{display:block;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:right 0.5rem top 1.5rem;background-repeat:no-repeat}nav h4.collapse+ul{position:absolute;transform:scaleY(0);transform-origin:top;transition:transform 0.3s ease}nav h4.collapse.toggled{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-up'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");padding-bottom:calc(0.125 * var(--universal-padding))}nav h4.collapse.toggled+ul{position:relative;transform:scaleY(1)}nav h4+h4{border-top:.0625rem solid var(--nav-link-border-color)}nav h4>a{display:block;line-height:1}nav h4>a:hover,nav h4>a:focus{text-decoration:none}nav ul{margin-left:-0.75rem;background:var(--nav-back-color)}nav ul+h4{border-top:.0625rem solid var(--nav-link-border-color)}nav li{margin:calc(0.5 * var(--universal-margin));margin-left:var(--universal-margin);margin-bottom:0;padding:calc(2 * var(--universal-padding)) calc(1.5 * var(--universal-padding));border-left:.0625rem solid var(--nav-link-border-color)}nav li:hover{text-decoration:none;background:var(--nav-link-hover-color)}nav li+li{margin-top:0}nav a:link,nav a:visited{color:var(--nav-link-fore-color)}[type="search"]{z-index:1000;position:fixed;top:3.5rem;height:3rem;left:-320px;width:320px;color:var(--search-fore-color);background:var(--search-back-color);outline:none;box-sizing:border-box;border:none;border-bottom:.0625rem solid var(--search-border-color);margin-bottom:var(--universal-margin);padding:calc(2 * var(--universal-padding)) calc(1.5 * var(--universal-padding)) var(--universal-padding) calc(1.5 * var(--universal-padding));transition:all 0.3s ease}@media screen and (max-width: 320px){[type="search"]{width:100%}}@media screen and (min-width: 768px){[type="search"]{width:33vw;left:-33vw}}@media screen and (min-width: 1280px){[type="search"]{width:25vw;left:-25vw}}[type="search"].col-nav{box-shadow:0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);left:0}@media screen and (min-width: 768px){[type="search"].col-nav+main.col-centered,[type="search"].col-nav+main.col-centered+footer.col-full-width{grid-column:5/13}}@media screen and (min-width: 1280px){[type="search"].col-nav+main.col-centered{grid-column:4/12;padding-left:8vw}[type="search"].col-nav+main.col-centered+footer.col-full-width{grid-column:4/13}}[type="search"]:hover,[type="search"]:focus{border-bottom:.0625rem solid var(--search-hover-border-color)}[type="search"]:focus{box-shadow:0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2),inset 0 -.0625rem 0 0 var(--search-hover-border-color)}.menu-button{position:fixed;top:0;left:0;z-index:1000;box-sizing:border-box;outline:none;height:3.5rem;width:3.5rem;border:0;background:transparent;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-horizontal'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='19' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='5' cy='12' r='1'%3E%3C/circle%3E%3C/svg%3E");background-repeat:no-repeat;background-position:0.875rem 0.875rem;cursor:pointer;transition:all 0.3s ease}.menu-button:hover{background-color:rgba(255,255,255,0.08)}.menu-button.toggled{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-vertical'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='5' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E")}footer{color:var(--footer-fore-color);background:var(--footer-back-color);padding-top:calc(2 * var(--universal-padding));padding-bottom:calc(3 * var(--universal-padding));margin-top:calc(6 * var(--universal-margin))}footer *{font-size:0.875rem}footer a,footer a:link,footer a:visited{color:var(--fore-color)}.scroll-to-top{position:fixed;bottom:1rem;right:1.375rem;box-sizing:border-box;z-index:1100;height:2.75rem;width:2.75rem;border:0;border-radius:100%;background:var(--scrolltop-button-color);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-up'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;cursor:pointer;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);transition:all 0.3s ease}.scroll-to-top:hover,.scroll-to-top:focus{background-color:var(--scrolltop-button-hover-color);box-shadow:0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2)}.card.contributor>.section.button{font-size:1rem;font-weight:500;text-align:center;display:block;transition:all 0.3s ease}.card.contributor>.section.button:link,.card.contributor>.section.button:visited{color:var(--fore-color)}.card.contributor>.section.button:link:hover,.card.contributor>.section.button:visited:hover{color:var(--a-link-color);text-decoration:none}
+@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local("Roboto Light"),local("Roboto-Light"),url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:local("Roboto Light Italic"),local("Roboto-LightItalic"),url(https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc6CsQ.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local("Roboto Medium"),local("Roboto-Medium"),url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:300;src:local("Roboto Mono Light"),local("RobotoMono-Light"),url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjDgiWqxf78.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto Mono';font-style:italic;font-weight:300;src:local("Roboto Mono Light Italic"),local("RobotoMono-LightItalic"),url(https://fonts.gstatic.com/s/robotomono/v5/L0xmDF4xlVMF-BfR8bXMIjhOk9a0T72jBg.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:500;src:local("Roboto Mono Medium"),local("RobotoMono-Medium"),url(https://fonts.gstatic.com/s/robotomono/v5/L0xkDF4xlVMF-BfR8bXMIjC4iGqxf78.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;font-display:swap}:root{--fore-color:#212121;--back-color:#fff;--card-page-back-color:#eee;--border-color:#eee;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b;--code-fore-color:#8e24aa;--code-back-color:#f0f0f0;--code-selected-color:#37474f;--pre-fore-color:#e57373;--pre-back-color:#263238;--token-color-a:#7f99a5;--token-color-b:#bdbdbd;--token-color-c:#64b5f6;--token-color-d:#ff8f00;--token-color-e:#c5e1a5;--token-color-f:#ce93d8;--token-color-g:#26c6da;--token-color-h:#e57373;--collapse-color:#607d8b;--copy-button-color:#1e88e5;--copy-button-hover-color:#2196f3;--scrolltop-button-color:#26a69a;--scrolltop-button-hover-color:#4db6ac;--beginner-color:#7cb342;--intermediate-color:#ffb300;--advanced-color:#e53935;--header-fore-color:#fff;--header-back-color:#202124;--nav-fore-color:#f0f0f0;--nav-back-color:#202124;--footer-fore-color:#616161;--footer-back-color:#e0e0e0;--nav-link-fore-color:#e0e0e0;--nav-link-border-color:#455a64;--nav-link-hover-color:#2b2c30;--search-fore-color:#fafafa;--search-back-color:#111;--search-border-color:#9e9e9e;--search-hover-border-color:#26a69a}html{font-size:16px;scroll-behavior:smooth}html,*{font-family:Roboto, Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem;font-weight:300}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}body{margin:0;color:var(--fore-color);background:var(--back-color);overflow-x:hidden}body.card-page{background:var(--card-page-back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin)}h1{font-size:6rem}h2{font-size:3.75rem}h3{font-size:3rem}h4{font-size:2.125rem}h5{font-size:1.5rem}h6{font-size:1.25rem}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:500}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}code,kbd,pre{font-size:.875em}code,kbd,pre,code *,pre *,kbd *,code[class*="language-"],pre[class*="language-"]{font-family:Roboto Mono, Menlo, Consolas, monospace}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}code{background:var(--code-back-color);color:var(--code-fore-color);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);border-radius:var(--universal-border-radius)}pre{overflow:auto;background:var(--pre-back-color);color:var(--pre-fore-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:0}code[class*="language-"],pre[class*="language-"]{color:var(--pre-fore-color);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.8;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hypens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]{padding:calc(2 * var(--universal-padding));overflow:auto;margin:var(--universal-margin) 0;white-space:pre-wrap}pre[class*="language-"]::-moz-selection,pre[class*="language-"] ::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"] ::-moz-selection{background:var(--code-selected-color)}pre[class*="language-"]::selection,pre[class*="language-"] ::selection,code[class*="language-"]::selection,code[class*="language-"] ::selection{background:var(--code-selected-color)}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.namespace{opacity:.7}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:var(--token-color-a)}.token.punctuation{color:var(--token-color-b)}.token.property,.token.tag,.token.boolean,.token.constant,.token.symbol,.token.deleted,.token.function{color:var(--token-color-c)}.token.number,.token.class-name{color:var(--token-color-d)}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:var(--token-color-e)}.token.operator,.token.entity,.token.url,.token.atrule,.token.attr-value,.token.keyword,.token.interpolation-punctuation{color:var(--token-color-f)}.token.regex{color:var(--token-color-g)}.token.important,.token.variable{color:var(--token-color-h)}.token.italic,.token.comment{font-style:italic}.token.important,.token.bold{font-weight:500}.token.entity{cursor:help}.language-css .token.string,.style .token.string{color:var(--token-color-f)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width: 500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}.container{display:grid;grid-template-columns:repeat(12, 1fr);grid-column-gap:calc(0.5 * var(--universal-margin))}.container.card-container{position:absolute;padding-top:3.5rem;height:calc(100vh - 3.5rem)}.col-centered{grid-column:span 12;max-width:100%}@media screen and (min-width: 768px){.col-centered{grid-column:2/12}}@media screen and (min-width: 1280px){.col-centered{grid-column:3/11}}.col-quarter{grid-column:span 3}.col-full-width{grid-column:span 12}.flex-row{display:flex;flex:0 1 auto;flex-flow:row wrap}.flex-row .flex-item{flex:0 0 auto;max-width:50%;flex-basis:50%}@media screen and (min-width: 768px){.flex-row .flex-item{max-width:25%;flex-basis:25%}}@media screen and (min-width: 1280px){.flex-row .flex-item{max-width:100%;flex-grow:1;flex-basis:0}}h2.category-name{text-align:center}.card{overflow:hidden;position:relative;margin:var(--universal-margin);border-radius:calc(4 * var(--universal-border-radius));box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}.card h4{text-align:center;padding-bottom:calc(0.75 * var(--universal-padding));margin-bottom:calc(2 * var(--universal-margin));border-bottom:.0625rem solid var(--border-color)}.card.code-card{margin-top:calc(5 * var(--universal-margin));background:var(--pre-back-color)}.card.code-card .section.card-content{background:var(--back-color);padding:calc(1.5 * var(--universal-padding))}.card.code-card .collapse{display:block;font-size:0.75rem;font-family:Roboto Mono, Menlo, Consolas, monospace;text-transform:uppercase;background:var(--pre-back-color);color:var(--collapse-color);padding:calc(1.5 * var(--universal-padding)) calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding)) calc(2.25 * var(--universal-padding));margin-left:calc(1.5 * var(--universal-margin));cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='12' y1='8' x2='12' y2='16'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");background-position:0.25rem 0.9375rem;background-repeat:no-repeat}.card.code-card .collapse+pre.card-examples{margin-left:calc(1.5 * var(--universal-margin));position:absolute;transform:scaleY(0);transform-origin:top;transition:transform 0.3s ease}.card.code-card .collapse.toggled{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-minus-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='8' y1='12' x2='16' y2='12'%3E%3C/line%3E%3C/svg%3E");padding-bottom:calc(0.125 * var(--universal-padding))}.card.code-card .collapse.toggled+pre.card-examples{position:relative;transform:scaleY(1)}.card.code-card pre.section.card-code{position:relative;margin-bottom:0;padding-bottom:0;padding-top:calc(3 * var(--universal-padding))}.card.code-card pre.section.card-examples{margin-top:0;margin-bottom:0;border-radius:0 0 calc(4 * var(--universal-border-radius)) calc(4 * var(--universal-border-radius));padding-top:0}.card.code-card pre.section.card-examples:before{content:'';display:block;position:absolute;top:0;left:0.5625rem;border-left:.0625rem solid var(--collapse-color);height:calc(100% - 18px)}.card.code-card .copy-button-container{position:relative;z-index:2}.card.code-card .copy-button-container .copy-button{background:var(--copy-button-color);box-sizing:border-box;position:absolute;top:-1.75rem;right:0;margin:calc(2 * var(--universal-margin));padding:calc(2.5 * var(--universal-padding));border-radius:50%;border:0;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);transition:all 0.3s ease;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clipboard'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E");background-position:center center;background-repeat:no-repeat}.card.code-card .copy-button-container .copy-button:hover,.card.code-card .copy-button-container .copy-button:focus{background-color:var(--copy-button-hover-color);box-shadow:0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2)}.card.code-card .copy-button-container .copy-button:before{background:var(--back-color);position:absolute;top:-0.25rem;right:-0.25rem;content:'';display:block;box-sizing:border-box;padding:calc(2.5 * var(--universal-padding));border-radius:50%;border:0.25rem solid var(--back-color);z-index:-1}.card.code-card .corner{box-sizing:border-box;position:absolute;top:-0.5rem;right:-2.125rem;width:4rem;height:2rem;padding-top:2rem;transform:rotate(45deg);text-align:center;font-size:0.75rem;font-weight:500;color:var(--back-color);box-shadow:0 2px 2px 0 rgba(0,0,0,0.07),0 3px 1px -2px rgba(0,0,0,0.06),0 1px 5px 0 rgba(0,0,0,0.1)}.card.code-card .corner.beginner{background:var(--beginner-color)}.card.code-card .corner.intermediate{background:var(--intermediate-color)}.card.code-card .corner.advanced{background:var(--advanced-color)}.toast{position:fixed;bottom:calc(var(--universal-margin) * 2);margin-bottom:0;font-size:0.8125rem;left:50%;transform:translate(-50%, -50%);z-index:1111;color:var(--back-color);background:var(--fore-color);border-radius:calc(var(--universal-border-radius) * 16);padding:var(--universal-padding) calc(var(--universal-padding) * 2);box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);transition:all 0.3s ease}header{box-sizing:border-box;overflow:hidden;height:3.5rem;position:fixed;width:110%;top:0;left:-5%;box-shadow:0 2px 4px rgba(0,0,0,0.5);z-index:5;background:var(--header-back-color);transition:top 0.3s ease}header h1.logo{position:relative;top:0;margin-top:0;font-size:1.625rem;text-align:center}header h1 a,header h1 a:link,header h1 a:visited{color:var(--header-fore-color)}header h1 a:hover,header h1 a:focus,header h1 a:link:hover,header h1 a:link:focus,header h1 a:visited:hover,header h1 a:visited:focus{text-decoration:none}header h1 small{display:block;font-size:0.875rem;color:var(--header-back-color);margin-top:0.75rem}header img{height:3.5rem;padding:0.375rem;box-sizing:border-box}header #title{position:relative;top:-1.125rem}@media screen and (max-width: 768px){header #title{display:none}}nav{position:fixed;top:6.5rem;left:-320px;width:320px;transition:left 0.3s ease;z-index:1100;height:calc(100vh - 6.5rem);box-sizing:border-box;display:block;background:var(--nav-back-color);border:0;overflow-y:auto}@media screen and (max-width: 320px){nav{width:100%}}@media screen and (min-width: 768px){nav{width:33vw;left:-33vw}}@media screen and (min-width: 1280px){nav{width:25vw;left:-25vw}}nav.col-nav{box-shadow:0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);left:0}@media screen and (min-width: 768px){nav.col-nav+main.col-centered,nav.col-nav+main.col-centered+footer.col-full-width{grid-column:5/13}}@media screen and (min-width: 1280px){nav.col-nav+main.col-centered{grid-column:4/12;padding-left:8vw}nav.col-nav+main.col-centered+footer.col-full-width{grid-column:4/13}}nav h4{margin:0;padding:calc(2.5 * var(--universal-padding)) calc(2 * var(--universal-padding)) calc(1 * var(--universal-padding)) calc(1 * var(--universal-padding));color:var(--nav-fore-color);font-size:1.5rem}nav h4.collapse{display:block;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:right 0.5rem top 1.5rem;background-repeat:no-repeat}nav h4.collapse+ul{position:absolute;transform:scaleY(0);transform-origin:top;transition:transform 0.3s ease}nav h4.collapse.toggled{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-up'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");padding-bottom:calc(0.125 * var(--universal-padding))}nav h4.collapse.toggled+ul{position:relative;transform:scaleY(1)}nav h4+h4{border-top:.0625rem solid var(--nav-link-border-color)}nav h4>a{display:block;line-height:1}nav h4>a:hover,nav h4>a:focus{text-decoration:none}nav ul{width:100%;margin-left:-0.75rem;background:var(--nav-back-color)}nav ul+h4{border-top:.0625rem solid var(--nav-link-border-color)}nav li{margin:calc(0.5 * var(--universal-margin));margin-left:var(--universal-margin);margin-bottom:0;padding:calc(2 * var(--universal-padding)) calc(1.5 * var(--universal-padding));border-left:.0625rem solid var(--nav-link-border-color)}nav li:hover{text-decoration:none;background:var(--nav-link-hover-color)}nav li+li{margin-top:0}nav a:link,nav a:visited{color:var(--nav-link-fore-color)}[type="search"]{z-index:1000;position:fixed;top:3.5rem;height:3rem;left:-320px;width:320px;color:var(--search-fore-color);background:var(--search-back-color);outline:none;box-sizing:border-box;border:none;border-bottom:.0625rem solid var(--search-border-color);margin-bottom:var(--universal-margin);padding:calc(2 * var(--universal-padding)) calc(1.5 * var(--universal-padding)) var(--universal-padding) calc(1.5 * var(--universal-padding));transition:all 0.3s ease}@media screen and (max-width: 320px){[type="search"]{width:100%}}@media screen and (min-width: 768px){[type="search"]{width:33vw;left:-33vw}}@media screen and (min-width: 1280px){[type="search"]{width:25vw;left:-25vw}}[type="search"].col-nav{box-shadow:0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);left:0}@media screen and (min-width: 768px){[type="search"].col-nav+main.col-centered,[type="search"].col-nav+main.col-centered+footer.col-full-width{grid-column:5/13}}@media screen and (min-width: 1280px){[type="search"].col-nav+main.col-centered{grid-column:4/12;padding-left:8vw}[type="search"].col-nav+main.col-centered+footer.col-full-width{grid-column:4/13}}[type="search"]:hover,[type="search"]:focus{border-bottom:.0625rem solid var(--search-hover-border-color)}[type="search"]:focus{box-shadow:0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2),inset 0 -.0625rem 0 0 var(--search-hover-border-color)}.menu-button{position:fixed;top:0;left:0;z-index:1000;box-sizing:border-box;outline:none;height:3.5rem;width:3.5rem;border:0;background:transparent;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-horizontal'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='19' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='5' cy='12' r='1'%3E%3C/circle%3E%3C/svg%3E");background-repeat:no-repeat;background-position:0.875rem 0.875rem;cursor:pointer;transition:all 0.3s ease}.menu-button:hover{background-color:rgba(255,255,255,0.08)}.menu-button.toggled{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-more-vertical'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='5' r='1'%3E%3C/circle%3E%3Ccircle cx='12' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E")}footer{color:var(--footer-fore-color);background:var(--footer-back-color);padding-top:calc(2 * var(--universal-padding));padding-bottom:calc(3 * var(--universal-padding));margin-top:calc(6 * var(--universal-margin))}footer *{font-size:0.875rem}footer a,footer a:link,footer a:visited{color:var(--fore-color)}.scroll-to-top{position:fixed;bottom:1rem;right:1.375rem;box-sizing:border-box;z-index:1100;height:2.75rem;width:2.75rem;border:0;border-radius:100%;background:var(--scrolltop-button-color);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-up'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;cursor:pointer;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);transition:all 0.3s ease}.scroll-to-top:hover,.scroll-to-top:focus{background-color:var(--scrolltop-button-hover-color);box-shadow:0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2)}.card.contributor>.section.button{font-size:1rem;font-weight:500;text-align:center;display:block;transition:all 0.3s ease}.card.contributor>.section.button:link,.card.contributor>.section.button:visited{color:var(--fore-color)}.card.contributor>.section.button:link:hover,.card.contributor>.section.button:visited:hover{color:var(--a-link-color);text-decoration:none}
diff --git a/docs/type.html b/docs/type.html
index 79bd9ea5d..b39b19c28 100644
--- a/docs/type.html
+++ b/docs/type.html
@@ -1,15 +1,20 @@
 Type - 30 seconds of code
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


Type
getType
Returns the native type of a value.
Returns lowercased constructor name of value, "undefined" or "null" if value is undefined or null.
const getType = v =>
+      }
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


Type
getType
Returns the native type of a value.
Returns lowercased constructor name of value, "undefined" or "null" if value is undefined or null.
const getType = v =>
   v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();
 
getType(new Set([1, 2, 3])); // 'set'
 
is
Checks if the provided value is of the specified type.
Ensure the value is not undefined or null using Array.includes(), and compare the constructor property on the value with type to check if the provided value is of the specified type.
const is = (type, val) => ![, null].includes(val) && val.constructor === type;
diff --git a/docs/utility.html b/docs/utility.html
index 77ddf3939..97b4385ac 100644
--- a/docs/utility.html
+++ b/docs/utility.html
@@ -1,15 +1,20 @@
 Utility - 30 seconds of code
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


Utility
castArray
Casts the provided value as an array if it's not one.
Use Array.isArray() to determine if val is an array and return it as-is or encapsulated in an array accordingly.
const castArray = val => (Array.isArray(val) ? val : [val]);
+      }
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.


Utility
castArray
Casts the provided value as an array if it's not one.
Use Array.isArray() to determine if val is an array and return it as-is or encapsulated in an array accordingly.
const castArray = val => (Array.isArray(val) ? val : [val]);
 
castArray('foo'); // ['foo']
 castArray([1]); // [1]
 
cloneRegExp
Clones a regular expression.
Use new RegExp(), RegExp.source and RegExp.flags to clone the given regular expression.
const cloneRegExp = regExp => new RegExp(regExp.source, regExp.flags);
diff --git a/scripts/web.js b/scripts/web.js
index c1f233edc..65631de71 100644
--- a/scripts/web.js
+++ b/scripts/web.js
@@ -187,10 +187,10 @@ try {
         .replace(/Archive
-  
Glossary

-  
Contributing

-  
About

+  output += `
Archive

+  
Glossary

+  
Contributing

+  
About

   


`;
   // Loop over tags and snippets to create the list of snippets
   for (let tag of taggedData) {
diff --git a/static-parts/page-start.html b/static-parts/page-start.html
index c2cde3595..30f78aded 100644
--- a/static-parts/page-start.html
+++ b/static-parts/page-start.html
@@ -15,17 +15,22 @@