18 |
21 |
22 |
23 |
24 |
28 |
29 |
18 |
22 |
19 |
21 | A collection of tools and snippets for working with JavaScript.
10 |Find modern JS methods and utility functions, and browse hand‑selected libraries, boilerplates, and learning resources.
11 | 12 | {{
104 |
105 |
106 |
107 |
108 |
`;
109 |
110 | }
111 |
112 | // Runs when the value of an attribute is changed on the component
113 | attributeChangedCallback (name, oldValue, newValue) {
114 |
115 | // Remove the icon
116 | let icon = this.root.querySelector('.loading-ring');
117 | icon.remove();
118 |
119 | // Show a content loaded message
120 | let notify = this.root.querySelector('[role="status"]');
121 | notify.textContent = newValue.length ? newValue : 'Content loaded';
122 |
123 | }
124 |
125 | // Create a list of attributes to observe
126 | static get observedAttributes () {
127 | return ['loaded'];
128 | }
129 |
130 | }
131 |
132 | if ('customElements' in window) {
133 | customElements.define('my-library', MyLibrary);
134 | }
135 | ```
--------------------------------------------------------------------------------
/content/helpers/_index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Helper Functions"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | ---
8 |
9 | Helper functions make complicated or repetitive tasks a bit easier, and keep your code DRY (an acronym for *Don't Repeat Yourself*).
10 |
11 | _Unless otherwise noted, these helper functions work in all modern browsers on desktop and mobile._
12 |
13 | {{Good morning
15 | ```
16 |
17 | ```javascript
18 | // Create a new element
19 | let p = document.createElement('p');
20 | p.textContent = 'Hello!';
21 |
22 | // Get the target node
23 | let app = document.querySelector('#app');
24 |
25 | // Insert the new node after the target node
26 | // Good morning
Hello!
27 | app.after(p); 28 | 29 | // You can inject more than one item by passing in multiple arguments 30 | //Good morning
Hello!
What's poppin' 31 | app.after(p, `What's poppin?`); 32 | ``` -------------------------------------------------------------------------------- /content/reference/dom-injection/element-append.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Element.append()" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | description: "Insert an element at the end of a set of elements inside a shared parent." 8 | weight: 40 9 | --- 10 | 11 | Insert one or more elements or strings at the end of a set elements inside a shared parent. Call the `Element.append()` method on the target node, and pass in one or more new elements or strings as arguments. 12 | 13 | ```html 14 |-
15 |
- Item 1 16 |
- Item 2 17 |
- Item 3 18 |
Good evening
15 | ```
16 |
17 | ```javascript
18 | // Create a new element
19 | let p = document.createElement('p');
20 | p.textContent = 'Hello!';
21 |
22 | // Get the target node
23 | let app = document.querySelector('#app');
24 |
25 | // Insert the new node before the target node
26 | // Hello!
Good evening
27 | app.before(p);
28 |
29 | // You can inject more than one item by passing in multiple arguments
30 | // Hello!
What's poppin'Good evening
31 | app.before(p, `What's poppin?`);
32 | ```
--------------------------------------------------------------------------------
/content/reference/dom-injection/element-prepend.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Element.prepend()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Insert an element at the beginning of a set of elements inside a shared parent."
8 | weight: 50
9 | ---
10 |
11 | Insert one or more elements or strings at the beginning of a set elements inside a shared parent. Call the `Element.prepend()` method on the target node, and pass in one or more new elements or strings as arguments.
12 |
13 | ```html
14 | -
15 |
- Item 1 16 |
- Item 2 17 |
- Item 3 18 |
Hello, world!
15 | ``` 16 | 17 | ```javascript 18 | let h1 = document.querySelector('h1'); 19 | h1.remove(); 20 | ``` -------------------------------------------------------------------------------- /content/reference/dom-injection/node-clone.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Node.clone()" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | description: "Create a copy of a node." 8 | weight: 80 9 | --- 10 | 11 | Create a copy of a node. Call on the node to clone. If you want all of a node's child nodes to also be copied, pass in `true` as an argument. 12 | 13 | ```html 14 |
15 |
19 | ```
20 |
21 | ```javascript
22 | // returns Hello, world!
16 |How are you today?
17 | Nice to see you again. 18 |
23 | let app = document.querySelector('#app');
24 |
25 | // Create a shallow clone
26 | // returns as an empty node
27 | let clone = app.cloneNode();
28 |
29 | // Create a deep clone
30 | // returns with the h1, p, and text nodes
31 | let deepClone = app.cloneNode(true);
32 | ```
--------------------------------------------------------------------------------
/content/reference/dom-injection/node-replaceWith.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Node.replaceWith()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Replace an element with another."
8 | weight: 70
9 | ---
10 |
11 | Replace an element (and all of its HTML elements and content) with another. Call the `Node.replaceWith()` method on the target node, and pass in one or more elements or strings as arguments.
12 |
13 | ```html
14 | "
24 | let html = greeting.outerHTML;
25 |
26 | // Set HTML content
27 | // This completely replaces the element and all of its content
28 | greeting.outerHTML = '
17 |
23 | ```
24 |
25 | ```javascript
26 | let h1 = document.querySelector('h1');
27 |
28 | // returns the .hero element
29 | let hero = h1.closest('.hero');
30 |
31 | // returns the h1 element itself
32 | let sandwich = h1.closest('[data-sandwich]');
33 |
34 | // Start with the element's parent
35 | // returns null
36 | let sandwich2 = h1.parentNode.closest('[data-sandwich]');
37 | ```
--------------------------------------------------------------------------------
/content/reference/traversal/element-parentNode.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Element.parentNode"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Get the parent of an element."
8 | weight: 10
9 | ---
10 |
11 | Get the parent of an element.
12 |
13 | ```html
14 | Neville
31 | let lastDescendant = wizards.lastChild;
32 | ```
--------------------------------------------------------------------------------
/content/reference/traversal/firstElementChild-lastElementChild.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Node.firstElementChild & Node.lastElementChild"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Get the first and last child element of a parent element."
8 | weight: 60
9 | ---
10 |
11 | Get the first and last child element of a parent element.
12 |
13 | ```html
14 | Gandalf
28 | let firstDescendant = wizards.firstElementChild;
29 |
30 | // returns Neville
31 | let lastDescendant = wizards.lastElementChild;
32 | ```
--------------------------------------------------------------------------------
/content/reference/traversal/nextElementSibling-previousElementSibling.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Node.nextElementSibling & Node.previousElementSibling"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Get the next and previous sibling element of an element."
8 | weight: 80
9 | ---
10 |
11 | Get the next and previous sibling element of an element.
12 |
13 | ```html
14 | Neville
28 | let next = hermione.nextElementSibling;
29 |
30 | // returns Radagast
31 | let previous = hermione.previousElementSibling;
32 | ```
--------------------------------------------------------------------------------
/content/reference/traversal/nextSibling-previousSibling.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Node.nextSibling & Node.previousSibling"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Get the next and previous sibling node of an element."
8 | weight: 70
9 | ---
10 |
11 | Get the next and previous sibling node of an element, including nodes that aren't elements (such as comments and text fragments).
12 |
13 | ```html
14 | Radagast
31 | let previous = hermione.previousSibling;
32 | ```
--------------------------------------------------------------------------------
/content/reference/variables-functions/_index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Variables & Functions"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | weight: 90
8 | ---
9 |
10 |
--------------------------------------------------------------------------------
/content/reference/variables-functions/arrow-functions.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Arrow Functions"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "An alternate way to define functions."
8 | weight: 40
9 | ---
10 |
11 | A basic arrow function isn't all that different from a traditional function. The word `function` gets dropped, and a fat arrow (`=>`) is added between the parentheses and brackets (`()` and `{}`, respectively).
12 |
13 | ```javascript
14 | // A traditional function
15 | function add (num1, num2) {
16 | return num1 + num2;
17 | }
18 |
19 | // The arrow function version
20 | let add = (num1, num2) => {
21 | return num1 + num2;
22 | };
23 | ```
24 |
25 | *__Note:__ Named arrow functions have to be written as a function expression. There's no way to write one as a function declaration.*
26 |
27 | If your function is only returning a value, as is the case with our `add()` function, you can simplify the function even further by dropping the curly brackets (`{}`) and `return` operator.
28 |
29 | ```javascript
30 | // returns the value of `num1 + num2`
31 | let add = (num1, num2) => num1 + num2;
32 | ```
33 |
34 | This only works if the only thing you're doing is returning a value. If you need to do more stuff with your function, you have to include curly brackets.
--------------------------------------------------------------------------------
/content/reference/variables-functions/default-parameters.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Default Parameters"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Define default values for function parameters."
8 | weight: 20
9 | ---
10 |
11 | Set a default value for each parameter by adding `= default value` when defining it.
12 |
13 | ```javascript
14 | function add (num1 = 0, num2 = 0) {
15 |
16 | // Add the numbers
17 | // If num1 or num2 is not provided, 0 will be used
18 | return num1 + num2;
19 |
20 | }
21 |
22 | // returns 4
23 | add(4);
24 | ```
--------------------------------------------------------------------------------
/content/reference/variables-functions/rest-parameters.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Rest Parameters"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Create an array with multiple function arguments."
8 | weight: 30
9 | ---
10 |
11 | Define *rest parameters* by creating a parameter prefixed with `...`. Any arguments provided at or beyond the rest parameter on a function get combined into an array that's assigned to the rest parameter's name.
12 |
13 | In the example below, `...moreArgs` is a _rest parameter_.
14 |
15 | ```javascript
16 | function logStuff (arg1, arg2, ...moreArgs) {
17 |
18 | // Logs arg1
19 | console.log(arg1);
20 |
21 | // Logs arg2
22 | console.log(arg2);
23 |
24 | // Logs an array of any other arguments you pass in after arg2
25 | console.log(moreArgs);
26 |
27 | }
28 |
29 | // In this example...
30 | // arg1 = 'chicken'
31 | // arg2 = 'tuna'
32 | // moreArgs = ['chips', 'cookie', 'soda', 'delicious']
33 | logStuff('chicken', 'tuna', 'chips', 'cookie', 'soda', 'delicious');
34 | ```
--------------------------------------------------------------------------------
/content/reference/variables-functions/ternary-operator.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Ternary Operator"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "A shorter way to write `if...else` statements."
8 | weight: 10
9 | ---
10 |
11 | A shorter way to write `if...else` statements. It has three parts:
12 |
13 | ```javascript
14 | let someVar = [the condition] ? [the value if true] : [the value if false];
15 | ```
16 |
17 | It's the equivalent of this.
18 |
19 | ```javascript
20 | let someVar;
21 |
22 | if ([the condition]) {
23 | someVar = [the value if true];
24 | } else {
25 | someVar = [the value if false];
26 | }
27 | ```
28 |
29 | Let's say we wanted to define `answer` as `num` if `num` is greater than `10`. If not, we'll use `42`.
30 |
31 | ```javascript
32 | let num = 0;
33 | let answer = num > 10 ? num : 42;
34 | ```
--------------------------------------------------------------------------------
/content/reference/viewport/_index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "The Viewport"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | weight: 120
8 | ---
9 |
10 |
--------------------------------------------------------------------------------
/content/reference/viewport/getBoundingClientRect.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Element.getBoundingClientRect()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Get information about the size of an element and its position relative to the viewport."
8 | weight: 30
9 | ---
10 |
11 | Get information about the size of an element and its position relative to the viewport.
12 |
13 | ```javascript
14 | let app = document.querySelector('#app');
15 | let details = app.getBoundingClientRect();
16 |
17 | // logs an object with top, let, bottom, right, height, and width properties
18 | console.log(details);
19 | ```
--------------------------------------------------------------------------------
/content/reference/viewport/innerHeight.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "window.innerHeight"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Get the height of the viewport."
8 | weight: 10
9 | ---
10 |
11 | Get the viewport height.
12 |
13 | ```javascript
14 | let viewportHeight = window.innerHeight;
15 | ```
--------------------------------------------------------------------------------
/content/reference/viewport/innerWidth.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "window.innerWidth"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Get the width of the viewport."
8 | weight: 20
9 | ---
10 |
11 | Get the viewport width.
12 |
13 | ```javascript
14 | let viewportWidth = window.innerWidth;
15 | ```
--------------------------------------------------------------------------------
/content/resources.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Learning Resources"
3 | date: 2018-01-24T11:48:20-05:00
4 | draft: false
5 | noTitle: false
6 | noIndex: false
7 | anchors: true
8 | ---
9 |
10 | Let's make {{}} the year that you master JavaScript! You can do this. I can help.
11 |
12 | {{}}
13 |
14 | {{}}
--------------------------------------------------------------------------------
/content/search.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Search"
3 | date: 2018-01-11T16:03:33-05:00
4 | draft: false
5 | type: "search"
6 | noSearch: true
7 | ---
8 |
9 | {{}}
--------------------------------------------------------------------------------
/deploy.sh:
--------------------------------------------------------------------------------
1 | git add . && git commit -a -m "Updated resource" && git push origin master
--------------------------------------------------------------------------------
/i18n/en.toml:
--------------------------------------------------------------------------------
1 | [wordCount]
2 | other = "{{ .WordCount }} words"
--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "lockfileVersion": 1
3 | }
4 |
--------------------------------------------------------------------------------
/static/automate/deploy.php:
--------------------------------------------------------------------------------
1 | commits)){
56 | // When merging and pushing to GitHub, the commits array will be empty.
57 | // In this case there is no way to know what branch was pushed to, so we will do an update.
58 | $commit_message .= 'true';
59 | } else {
60 | foreach ($data->commits as $commit) {
61 | $commit_message .= $commit->message;
62 | }
63 | }
64 |
65 | if (!empty($commit_message)) {
66 |
67 | // Do a git checkout, run Hugo, and copy files to public directory
68 | exec('cd ' . $repo_dir . ' && git fetch --all && git reset --hard origin/master');
69 | exec('cd ' . $repo_dir . ' && ' . $hugo_path);
70 | exec('cd ' . $repo_dir . ' && cp -r ' . $repo_dir . $rendered_dir . '/. ' . $web_root_dir);
71 |
72 | // Log the deployment
73 | file_put_contents('deploy.log', date('m/d/Y h:i:s a') . " Deployed branch: " . $branch . " Commit: " . $commit_message . "\n", FILE_APPEND);
74 |
75 | }
--------------------------------------------------------------------------------
/static/img/chris-ferdinandi-high-res.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cferdinandi/vanilla-js-toolkit/eb8619bd3568ac00d863f32d616e67863e174392/static/img/chris-ferdinandi-high-res.jpg
--------------------------------------------------------------------------------
/static/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Disallow: /img/*
3 | Disallow: /automate/*
4 | Disallow: /css/*
5 | Disallow: /js/*
6 | Disallow: /svg/*
--------------------------------------------------------------------------------
/themes/gmt/LICENSE.md:
--------------------------------------------------------------------------------
1 | # The MIT License (MIT)
2 |
3 | Copyright (c) Go Make Things, LLC
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/themes/gmt/archetypes/default.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: ''
3 | date: ''
4 | ---
5 |
--------------------------------------------------------------------------------
/themes/gmt/layouts/404.html:
--------------------------------------------------------------------------------
1 | {{ partial "header.html" . }}
2 |
3 |
14 |
15 |
16 |
17 |
30 |
31 |
32 |
33 |
34 | {{ end }}
35 |
36 | {{ if gt $paginate.TotalPages 1 }}
37 |
44 | {{ end }}
45 |
46 | {{ partial "footer.html" . }}
--------------------------------------------------------------------------------
/themes/gmt/layouts/_default/single.html:
--------------------------------------------------------------------------------
1 | {{ partial "header.html" . }}
2 |
3 |
4 |
5 |
6 |
7 |
10 |
11 |
16 |
17 | {{ .Content }}
18 |
19 |
20 |
21 | {{ partial "cta-individual-post.html" }}
22 |
23 | {{ partial "footer.html" . }}
--------------------------------------------------------------------------------
/themes/gmt/layouts/_default/terms.html:
--------------------------------------------------------------------------------
1 | {{ partial "header.html" . }}
2 |
3 |
4 |
5 | {{ partial "content-page-no-article.html" . }}
6 |
7 |
21 |
22 | {{ partial "footer.html" . }}
--------------------------------------------------------------------------------
/themes/gmt/layouts/boilerplates/single.html:
--------------------------------------------------------------------------------
1 | {{ partial "header.html" . }}
2 |
3 |
4 |
5 | {{ if not .Params.noTitle }}
6 |
21 |
22 | {{ partial "footer.html" . }}
--------------------------------------------------------------------------------
/themes/gmt/layouts/helpers/list.html:
--------------------------------------------------------------------------------
1 | {{ partial "header.html" . }}
2 |
3 | {{ partial "content-page.html" . }}
4 |
5 |
4 |
5 |
26 |
27 | {{ partial "footer.html" . }}
--------------------------------------------------------------------------------
/themes/gmt/layouts/index.html:
--------------------------------------------------------------------------------
1 | {{ partial "header.html" . }}
2 |
3 | {{ partial "content-page.html" . }}
4 |
5 | {{ partial "footer.html" . }}
--------------------------------------------------------------------------------
/themes/gmt/layouts/page/single.html:
--------------------------------------------------------------------------------
1 | {{ partial "header.html" . }}
2 |
3 | {{ partial "content-page.html" . }}
4 |
5 | {{ partial "footer.html" . }}
--------------------------------------------------------------------------------
/themes/gmt/layouts/partials/_nav-items_BACKUP.html:
--------------------------------------------------------------------------------
1 | Code SnippetsHelper FunctionsBoilerplatesPolyfillsPluginsLearning Resources
--------------------------------------------------------------------------------
/themes/gmt/layouts/partials/content-page-no-article.html:
--------------------------------------------------------------------------------
1 | {{ if not .Params.noTitle }}
2 |
2 |
3 | {{ if not .Params.noTitle }}
4 |
--------------------------------------------------------------------------------
/themes/gmt/layouts/partials/email.html:
--------------------------------------------------------------------------------
1 | chris@gomakethings.com
--------------------------------------------------------------------------------
/themes/gmt/layouts/partials/footer.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
10 |
15 | Good evening
15 | ``` 16 | 17 | ```javascript 18 | // Get the target element 19 | let h1 = document.querySelector('h1'); 20 | 21 | // Create a new element 22 | let p = document.createElement('p'); 23 | p.textContent = 'Good morning'; 24 | 25 | // Replace the target with the new element 26 | //Good morning
27 | h1.replaceWith(p); 28 | 29 | // You can replace it with more than one item by passing in multiple arguments 30 | //Good morning
How are you today? 31 | h1.replaceWith(p, 'How are you today?'); 32 | ``` -------------------------------------------------------------------------------- /content/reference/es-modules/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "ES Modules" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | weight: 170 8 | --- 9 | 10 | -------------------------------------------------------------------------------- /content/reference/es-modules/default-exports.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Default exports" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | description: "Import all modules from a file." 8 | weight: 20 9 | --- 10 | 11 | Instead of naming every function you want to import, you can alternatively import _everything_, and assign all of the imported items to a variable. 12 | 13 | Instead of using object destructuring, `import *`, then, assign it to a variable using the `as` opertor. In our case, let's use an underscore (`_`), common with helper libraries. 14 | 15 | ```javascript 16 | import * as _ from './helpers.js'; 17 | 18 | // Get the total 19 | let total = _.add(num1, num2); 20 | ``` -------------------------------------------------------------------------------- /content/reference/es-modules/export.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "export" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | description: "Export modules for use in other files." 8 | weight: 10 9 | --- 10 | 11 | Use the `export` operator to export modules for use in other files. 12 | 13 | One way to do that is by adding the `export` operator before the variable or function expression. 14 | 15 | ```javascript 16 | export function add (num1, num2) { 17 | return num1 + num2; 18 | } 19 | 20 | export function subtract (num1, num2) { 21 | return num1 - num2; 22 | } 23 | ``` 24 | 25 | Alternatively, you can include an `export` at the end as a single line, with an object of exported variables and functions. You can use the object property shorthand approach for this. 26 | 27 | ```javascript 28 | function add (num1, num2) { 29 | return num1 + num2; 30 | } 31 | 32 | function subtract (num1, num2) { 33 | return num1 - num2; 34 | } 35 | 36 | export {add, subtract}; 37 | ``` -------------------------------------------------------------------------------- /content/reference/es-modules/import-all.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "import all" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | description: "Import all modules from a file." 8 | weight: 30 9 | --- 10 | 11 | Instead of naming every function you want to import, you can alternatively import _everything_, and assign all of the imported items to a variable. 12 | 13 | Instead of using object destructuring, `import *`, then, assign it to a variable using the `as` opertor. In our case, let's use an underscore (`_`), common with helper libraries. 14 | 15 | ```javascript 16 | import * as _ from './helpers.js'; 17 | 18 | // Get the total 19 | let total = _.add(num1, num2); 20 | ``` -------------------------------------------------------------------------------- /content/reference/es-modules/side-effects.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Side effects" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | description: "Import all modules from a file." 8 | weight: 40 9 | --- 10 | 11 | In ES modules, _side effects_ are "things that happen" in the module automatically, without the need for the developer to explicitly run a function. 12 | 13 | ES modules don't _need_ to have an `export`, and when you `import` a module, you don't _have_ to access any exports if it has them. Anything that runs as part of the imported file will run automatically when imported. 14 | 15 | ```js 16 | // sayHi.js 17 | function sayHi () { 18 | console.log('Hello there!'); 19 | } 20 | 21 | // Run on init 22 | sayHi(); 23 | ``` 24 | 25 | ```js 26 | // "Hello there!" will be automatically logged 27 | import './sayHi.js'; 28 | ``` -------------------------------------------------------------------------------- /content/reference/event-listeners/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Event Listeners" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | weight: 60 8 | --- 9 | 10 | -------------------------------------------------------------------------------- /content/reference/event-listeners/addEventListener.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Element.addEventListener()" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | description: "Listen for events on an element." 8 | weight: 10 9 | --- 10 | 11 | Listen for events on an element. [You can find a full list of available events on the Mozilla Developer Network.](https://developer.mozilla.org/en-US/docs/Web/Events) 12 | 13 | ```javascript 14 | let btn = document.querySelector('#click-me'); 15 | 16 | btn.addEventListener('click', function (event) { 17 | console.log(event); // The event details 18 | console.log(event.target); // The clicked element 19 | }); 20 | ``` 21 | 22 | Certain events, like `focus`, don't bubble. In order to use event delegation with events that don't bubble, you can set an optional third argument on the `EventTarget.addEventListener()` method, called `useCapture`, to `true`. 23 | 24 | ```javascript 25 | // Listen for all focus events in the document 26 | document.addEventListener('focus', function (event) { 27 | // Run functions whenever an element in the document comes into focus 28 | }, true); 29 | ``` -------------------------------------------------------------------------------- /content/reference/event-listeners/customEvent.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "CustomEvent()" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | description: "Create and emit custom events." 8 | weight: 20 9 | --- 10 | 11 | Create and emit custom events. 12 | 13 | The `CustomEvent()` method accepts two arguments: an event name, and and object of options. In the options, you can specify if the event should bubble and be cancelable (both `false` by default). You can also pass along additional information that an event listener can use with the `detail` property. 14 | 15 | After setting up your event, call the `dispatchEvent()` method on your element and pass in the event as an argument. 16 | 17 | ```javascript 18 | // Create a new event 19 | let event = new CustomEvent('myCustomEvent', { 20 | bubbles: true, 21 | cancelable: true, 22 | detail: { 23 | someDetail: 'the detail value' 24 | } 25 | }); 26 | 27 | // Dispatch the event 28 | let elem = document.querySelector('#the-element-to-emit-on'); 29 | elem.dispatchEvent(event); 30 | ``` -------------------------------------------------------------------------------- /content/reference/extract-copy/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Extract & Copy Properties" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | weight: 85 8 | --- 9 | 10 | -------------------------------------------------------------------------------- /content/reference/extract-copy/array-destructuring.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Array Destructuring" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | description: "Extract variables from array properties." 8 | weight: 10 9 | --- 10 | 11 | A way to extract variables from array properties. 12 | 13 | Define _an array of variables_, and the destructuring syntax will pull the values at the matching indexes out and assign them to the variables. 14 | 15 | ```javascript 16 | let lunch = ['turkey sandwich', 'soda', 'chips', 'cookie']; 17 | 18 | let [entree, drink, side, desert] = lunch; 19 | 20 | // logs "turkey sandwich" 21 | console.log(entree); 22 | 23 | // logs "chips" 24 | console.log(side); 25 | ``` -------------------------------------------------------------------------------- /content/reference/extract-copy/object-destructuring.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Object Destructuring" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | description: "Assign variables from object properties." 8 | weight: 20 9 | --- 10 | 11 | A way to assign variables from object properties. 12 | 13 | Define _an object of variables_, and the destructuring syntax will pull the properties at the matching keys out and assign them to the variables. 14 | 15 | ```javascript 16 | let movies = { 17 | disney: 'Moana', 18 | pixar: 'Up', 19 | dreamworks: 'How to Train Your Dragon', 20 | nickelodeon: 'Wonder Park' 21 | }; 22 | 23 | let {disney, pixar, dreamworks, nickelodeon} = movies; 24 | 25 | // logs "Up" 26 | console.log(pixar); 27 | ``` 28 | 29 | You can also rename a variable to something different than its key in the object. In your object variable, add a colon (`:`) and the new variable name you'd like to use. 30 | 31 | ```javascript 32 | let {disney, pixar, dreamworks, nickelodeon: nick} = movies; 33 | 34 | // logs "Wonder Park" 35 | console.log(nick); 36 | ``` -------------------------------------------------------------------------------- /content/reference/extract-copy/spread-syntax.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Spread Syntax" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | description: "Expand array or object properties into their own values." 8 | weight: 30 9 | --- 10 | 11 | Take an array or object (or other iterable) and expand its items into their own individual values. 12 | 13 | ```javascript 14 | let sandwiches = ['tuna', 'turkey', 'pb&j']; 15 | 16 | // logs ["tuna", "turkey", "pb&j"] 17 | console.log(sandwiches); 18 | 19 | // logs tuna turkey pb&j 20 | console.log(...sandwiches); 21 | ``` 22 | 23 | You can use it to pass array values into a function. 24 | 25 | ```js 26 | let numbers = [4, 2]; 27 | 28 | // Instead of this... 29 | add(numbers[0], numbers[1]); 30 | 31 | // You can do this... 32 | add(...numbers); 33 | ``` 34 | 35 | You can also use to copy or merge arrays or objects. 36 | 37 | ```js 38 | let moreSandwiches = [...sandwiches1, ...sandwiches2]; 39 | let allWizards = {...radagast, ...gandalf}; 40 | ``` 41 | -------------------------------------------------------------------------------- /content/reference/extract-copy/structuredClone.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "structuredClone()" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | description: "Expand array or object properties into their own values." 8 | weight: 40 9 | --- 10 | 11 | The `structuredClone()` method accepts an array or object as an argument, and returns a deep copy or deep clone. 12 | 13 | ```js 14 | // A multidimensional array 15 | let wizards = [{ 16 | name: 'Radagast', 17 | color: 'brown' 18 | }, { 19 | name: 'Gandalf', 20 | color: 'gray' 21 | }]; 22 | 23 | // Create a copy of the wizards array 24 | let wizardsCopy = structuredClone(wizards); 25 | ``` -------------------------------------------------------------------------------- /content/reference/html-text/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "HTML & Text" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | weight: 95 8 | --- 9 | 10 | -------------------------------------------------------------------------------- /content/reference/html-text/innerHTML.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Element.innerHTML" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | description: "Get and set HTML content for an element." 8 | weight: 10 9 | --- 10 | 11 | Get and set the HTML content inside an element as a string. 12 | 13 | ```html 14 |
15 |
17 | ```
18 |
19 | ```javascript
20 | let greeting = document.querySelector('.greeting');
21 |
22 | // Get HTML content
23 | // returns "Hello world!
16 |Hello world!
" 24 | let html = greeting.innerHTML; 25 | 26 | // Set HTML content 27 | // This replaces what was in there already 28 | greeting.innerHTML = 'We can dynamically change the HTML. We can even include HTML elements like this link.'; 29 | 30 | // Add HTML to the end of an element's existing content 31 | greeting.innerHTML += ' Add this after what is already there.'; 32 | 33 | // Add HTML to the beginning of an element's existing content 34 | greeting.innerHTML = 'We can add this to the beginning. ' + elem.innerHTML; 35 | 36 | // You can inject entire elements into other ones, too 37 | greeting.innerHTML += 'A new paragraph
'; 38 | ``` -------------------------------------------------------------------------------- /content/reference/html-text/innerText.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Element.innerText" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | description: "Get and set the _rendered text_ of an element." 8 | weight: 40 9 | --- 10 | 11 | Get and set the _rendered text_ of an element (and omit the markup). 12 | 13 | The `Element.innerText` property returns only rendered text, similar to what a user would be able to select with their cursor or the keyboard when highlighting text. Any HTML elements included in a string when setting content are automatically encoded and rendered as-is. 14 | 15 | ```html 16 |
17 |
22 |
25 | ```
26 |
27 | ```javascript
28 | let elem = document.querySelector('.greeting');
29 |
30 | // Get text content
31 | // returns "Hello world!"
32 | let text = elem.innerText;
33 |
34 | // Set text content
35 | // This completely replaces whats there, including any HTML elements
36 | elem.innerText = 'We can dynamically change the content.';
37 |
38 | // Add text to the end of an element's existing content
39 | elem.innerText += ' Add this after what is already there.';
40 |
41 | // Add text to the beginning of an element's existing content
42 | elem.innerText = 'We can add this to the beginning. ' + elem.innerText;
43 |
44 | // HTML elements are automatically encoded and rendered as-is
45 | elem.innerText = 'This is not rendered.
23 |Hello world!
24 |See you later!
'; 46 | ``` -------------------------------------------------------------------------------- /content/reference/html-text/outerHTML.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Element.outerHTML" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | description: "Get and set HTML content _including_ an element." 8 | weight: 20 9 | --- 10 | 11 | Get and set the HTML content _including_ an element. This works the same as `Element.innerHTML`, but includes the element itself when getting and updating HTML content. 12 | 13 | ```html 14 |
15 |
17 | ```
18 |
19 | ```javascript
20 | let greeting = document.querySelector('.greeting');
21 |
22 | // Get HTML content
23 | // returns "Hello world!
16 |Hello world!
Goodbye, friend! Click here to leave.'; 29 | 30 | // Add HTML after the element (and outside of it) 31 | greeting.outerHTML += ' Add this after what is already there.'; 32 | 33 | // Add HTML before the element (and outside of it) 34 | greeting.outerHTML = 'We can add this to the beginning. ' + greeting.innerHTML; 35 | ``` -------------------------------------------------------------------------------- /content/reference/html-text/textContent.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Node.textContent" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | description: "Get and set the text of an element (without markup)." 8 | weight: 30 9 | --- 10 | 11 | Get and set the text of an element (and omit the markup) as a string. 12 | 13 | The `Node.textContent` property gets _all_ of the text content, including CSS properties inside of a `style` element and `hidden` UI elements. Any HTML elements included in a string when setting content with the `Node.textContent` property are automatically encoded and rendered as-is. 14 | 15 | ```html 16 |
17 |
22 |
25 | ```
26 |
27 | ```javascript
28 | let greeting = document.querySelector('.greeting');
29 |
30 | // Get text content
31 | // returns "p {color: rebeccapurple;} This is not rendered. Hello world!"
32 | let text = greeting.textContent;
33 |
34 | // Set text content
35 | // This completely replaces whats there, including any HTML elements
36 | greeting.textContent = 'We can dynamically change the content.';
37 |
38 | // Add text to the end of an element's existing content
39 | greeting.textContent += ' Add this after what is already there.';
40 |
41 | // Add text to the beginning of an element's existing content
42 | greeting.textContent = 'We can add this to the beginning. ' + greeting.textContent;
43 |
44 | // HTML elements are automatically encoded and rendered as-is
45 | greeting.textContent = 'This is not rendered.
23 |Hello world!
24 |See you later!
'; 46 | ``` -------------------------------------------------------------------------------- /content/reference/javascript-free/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "JavaScript-Free Components" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | weight: 999 8 | --- 9 | 10 | It's sometimes possible to create JavaScript-free interactive components entirely with native HTML elements. 11 | 12 | These are *not* hacks. They're semantically valid, accessible components that browsers give you out-of-the-box. These can all be treated as progressive enhancements, with no fallbacks needed for unsupported browsers. 13 | 14 | *__Quick aside:__ many of the CSS-only versions of JavaScript components that you see on other sites __are__ hacks, and suffer from usability and accessibility issues as a result.* -------------------------------------------------------------------------------- /content/reference/javascript-free/autocomplete.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Autocomplete" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | description: "Create an autocompletion text input." 8 | weight: 20 9 | --- 10 | 11 | Create a label and input like you normally would. Then create a `datalist` element, and add an `option` element for each autocomplete choice. 12 | 13 | Give the `datalist` an ID. Add the `list` property to your input with a value equal to your `datalist` ID. 14 | 15 | ```html 16 | 17 | 18 | 25 | ``` 26 | 27 | [Autocomplete Demo →](https://codepen.io/cferdinandi/pen/BMEVrx) -------------------------------------------------------------------------------- /content/reference/javascript-free/disclosure.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Disclosure" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | description: "Create an expand-and-collapse disclosure element." 8 | weight: 10 9 | --- 10 | 11 | Use the `details` and `summary` elements to create expand-and-collapse disclosure components. 12 | 13 | Put your entire content inside a `details` element. The heading that should act as the toggle goes inside a `summary` element. Use the `open` attribute to make your disclosure component expanded by default. 14 | 15 | ```html 16 |
17 |
20 |
21 | The toggle
18 | The content. 19 |
22 |
25 | ```
26 |
27 | You can style the dropdown arrow with CSS.
28 |
29 | ```css
30 | /**
31 | * 1. Styling for Firefox and other non-webkit/blink browsers
32 | * 2. Styling for webkit and blink
33 | */
34 | summary, /* 1 */
35 | summary::-webkit-details-marker { /* 2 */
36 | list-style-image: url('');
37 | }
38 | ```
39 |
40 | [Disclosure Demo →](https://codepen.io/cferdinandi/pen/exoKgo)
--------------------------------------------------------------------------------
/content/reference/javascript-free/smooth-scrolling.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Smooth Scrolling"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Animate scrolling to anchor links."
8 | weight: 30
9 | ---
10 |
11 | The `scroll-behavior` CSS property tells the browser how to handle scrolling triggered by anchor links and such.
12 |
13 | The default behavior, `auto`, is the jump-to-location you’re used to seeing. If you set it to `smooth`, the browser animates scrolling down the page.
14 |
15 | If you only want this behavior inside a container, apply it to that element. Otherwise, apply it to the whole document.
16 |
17 | ```css
18 | /**
19 | * Smooth scrolling inside an element
20 | */
21 | #my-element {
22 | scroll-behavior: smooth;
23 | }
24 |
25 | /**
26 | * Smooth scrolling on the whole document
27 | */
28 | html {
29 | scroll-behavior: smooth;
30 | }
31 | ```
32 |
33 | For people prone to motion sickness, this effect can be really jarring, though.
34 |
35 | Fortunately, users in some browsers/operating systems can express their preference for reduced motion effects with the Reduce Motion API. We can listen for that setting in our CSS, and turn off smooth scrolling for them.
36 |
37 | ```css
38 | @media screen and (prefers-reduced-motion: reduce) {
39 | #my-element {
40 | scroll-behavior: auto;
41 | }
42 |
43 | html {
44 | scroll-behavior: auto;
45 | }
46 | }
47 | ```
48 |
49 | *If you're using a fixed or sticky header, you can prevent anchor links from scrolling behind it with [the `scroll-margin-top` property](https://gomakethings.com/how-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header-with-one-line-of-css/).*
50 |
51 | [Smooth Scroll Demo →](https://codepen.io/cferdinandi/pen/LqGZrb)
--------------------------------------------------------------------------------
/content/reference/json/_index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "JSON"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | weight: 150
8 | ---
9 |
10 |
--------------------------------------------------------------------------------
/content/reference/json/json-parse.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "JSON.parse()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Convert stringified JSON back into an object or array."
8 | weight: 20
9 | ---
10 |
11 | Convert stringified JSON back into an object or array.
12 |
13 | ```javascript
14 | // Get data from local storage
15 | let savedLunch = JSON.parse(localStorage.getItem('lunchOrder'));
16 | let savedDrinks = JSON.parse(localStorage.getItem('drinkOptions'));
17 | ```
--------------------------------------------------------------------------------
/content/reference/json/json-stringify.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "JSON.stringify()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Convert object or array data into a string."
8 | weight: 20
9 | ---
10 |
11 | Convert object or array data into a string.
12 |
13 | ```js
14 | // Save an object
15 | let lunch = {
16 | sandwich: 'turkey',
17 | chips: 'Cape Cod',
18 | drink: 'Pepsi'
19 | };
20 | localStorage.setItem('lunchOrder', JSON.stringify(lunch));
21 |
22 | // Save an array
23 | let drinks = ['Pepsi', 'water', 'lemonade'];
24 | localStorage.setItem('drinkOptions', JSON.stringify(drinks));
25 | ```
--------------------------------------------------------------------------------
/content/reference/loops/_index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Loops"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | weight: 20
8 | ---
9 |
10 |
--------------------------------------------------------------------------------
/content/reference/loops/for-in.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "for...in"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Loop over plain objects."
8 | weight: 30
9 | ---
10 |
11 | Loop over plain objects (`{}`).
12 |
13 | ```javascript
14 | let lunch = {
15 | sandwich: 'ham',
16 | snack: 'chips',
17 | drink: 'soda',
18 | desert: 'cookie',
19 | guests: 3,
20 | alcohol: false,
21 | };
22 |
23 | // logs "sandwich", "ham", "snack", "chips", "drink", "soda", "desert", "cookie", "guests", 3, "alcohol", false
24 | for (let key in lunch) {
25 | console.log(key); // key
26 | console.log(lunch[key]); // value
27 | }
28 | ```
--------------------------------------------------------------------------------
/content/reference/loops/for-of.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "for...of"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Loop over iterable objects."
8 | weight: 20
9 | ---
10 |
11 | Loop over _iterable objects_. That includes strings, arrays, and other array-like objects such as NodeLists, HTMLCollections, and HTMLFormControlsCollection, but _not_ plain objects (`{}`).
12 |
13 | ```javascript
14 | let sandwiches = ['turkey', 'tuna', 'ham', 'pb&j'];
15 |
16 | // logs "tuna", "ham", "turkey", "pb&j"
17 | for (let sandwich of sandwiches) {
18 | console.log(sandwich);
19 | }
20 | ```
--------------------------------------------------------------------------------
/content/reference/loops/for.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "for"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Loop through arrays and array-like objects."
8 | weight: 10
9 | ---
10 |
11 | Loop through arrays, NodeLists, and other array-like objects.
12 |
13 | ```javascript
14 | let sandwiches = ['turkey', 'tuna', 'ham', 'pb&j'];
15 |
16 | // logs 0, "tuna", 1, "ham", 2, "turkey", 3, "pb&j"
17 | for (let i = 0; i < sandwiches.length; i++) {
18 | console.log(i); // index
19 | console.log(sandwiches[i]); // value
20 | }
21 | ```
--------------------------------------------------------------------------------
/content/reference/loops/foreach.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Array.forEach() & NodeList.forEach()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Loop through arrays and NodeLists."
8 | weight: 40
9 | ---
10 |
11 | The `Array.forEach()` and `NodeList.forEach()` methods provide a simpler way to iterate over arrays and NodeLists while still having access to the index.
12 |
13 | You pass a callback function into the `forEach()` method. The callback itself accepts three arguments: the current item in the loop, the index of the current item in the loop, and the array itself. All three are optional, and you can name them anything you want.
14 |
15 | ```javascript
16 | let sandwiches = ['turkey', 'tuna', 'ham', 'pb&j'];
17 |
18 | // logs 0, "tuna", 1, "ham", 2, "turkey", 3, "pb&j"
19 | sandwiches.forEach(function (sandwich, index) {
20 | console.log(index); // index
21 | console.log(sandwich); // value
22 | });
23 | ```
--------------------------------------------------------------------------------
/content/reference/numbers/_index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Numbers"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | weight: 65
8 | ---
9 |
10 |
--------------------------------------------------------------------------------
/content/reference/numbers/basic-math.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Basic math"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Do basic arithmetic with JavaScript."
8 | weight: 60
9 | ---
10 |
11 | JavaScript includes a handful of basic arithmetic operators:
12 |
13 | | Operator | Action |
14 | |----------|-----------|
15 | | `+` | Add |
16 | | `-` | Subtract |
17 | | `*` | Multiply |
18 | | `/` | Divide |
19 | | `%` | Remainder |
20 |
21 | ```javascript
22 | // Add
23 | // logs 4
24 | console.log(2 + 2);
25 |
26 | // Subtract
27 | // logs 3
28 | console.log(4 - 1);
29 |
30 | // Divide
31 | // logs 2
32 | console.log(4 / 2);
33 |
34 | // Multiply
35 | // logs 10
36 | console.log(5 * 2);
37 |
38 | // Remainder
39 | // logs 1 (2 goes into 5 twice, with 1 left over)
40 | console.log(5 % 2);
41 | ```
42 |
43 | You can combine operators. Group the items you want to run first/together with parentheses.
44 |
45 | ```javascript
46 | let total = (3 + 1) * 2;
47 |
48 | // logs 8 (3 plus 1 is 4, multiplied by 2)
49 | console.log(total);
50 | ```
--------------------------------------------------------------------------------
/content/reference/numbers/comparisons.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Comparisons"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Compare two numbers."
8 | weight: 80
9 | ---
10 |
11 | JavaScript includes a handful of comparison operators:
12 |
13 | | Operator | Action |
14 | |----------|--------------------------|
15 | | `>` | Greater than |
16 | | `<` | Less than |
17 | | `===` | Equals |
18 | | `!==` | Does not equal |
19 | | `>=` | Greater than or equal to |
20 | | `<=` | Less than or equal to |
21 |
22 | ```javascript
23 | // Greater than
24 | // logs true
25 | console.log(2 > 1);
26 |
27 | // Less than
28 | // logs false
29 | console.log(2 < 1);
30 |
31 | // Equals
32 | // logs true
33 | console.log(2 === 2);
34 |
35 | // Does not equal
36 | // logs true
37 | console.log(2 !== 1);
38 |
39 | // Greater than or equal to
40 | // logs true
41 | console.log(2 >= 1);
42 |
43 | // Less than or equal to
44 | // logs true
45 | console.log(2 <= 2);
46 | ```
--------------------------------------------------------------------------------
/content/reference/numbers/increment-decrement.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Increment & Decrement"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Increment numbers up and down."
8 | weight: 70
9 | ---
10 |
11 | You can increment numbers up one in value with the `++` operator, and decrement them down one in value using the `--` operator.
12 |
13 | ```javascript
14 | let num = 1;
15 |
16 | // Increment
17 | // logs 2
18 | num++;
19 | console.log(num);
20 |
21 | // Decrement
22 | // logs 1
23 | num--;
24 | console.log(num);
25 | ```
--------------------------------------------------------------------------------
/content/reference/numbers/math-abs.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Math.abs()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Get the absolute value of a number."
8 | weight: 90
9 | ---
10 |
11 | Get the absolute (positive) value of a number.
12 |
13 | ```javascript
14 | // returns 42
15 | Math.abs(42);
16 |
17 | // also returns 42
18 | Math.abs(-42);
19 | ```
--------------------------------------------------------------------------------
/content/reference/numbers/math-ceil.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Math.ceil()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Get the smallest integer greater than or equal to a number."
8 | weight: 110
9 | ---
10 |
11 | Returns the smallest integer (whole number) greater than or equal to a number.
12 |
13 | ```javascript
14 | // returns 42
15 | Math.ceil(42);
16 |
17 | // returns 4
18 | Math.ceil(3.14);
19 |
20 | // Returns -3
21 | Math.ceil(-3.14);
22 | ```
--------------------------------------------------------------------------------
/content/reference/numbers/math-floor.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Math.floor()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Get the largest integer less than or equal to a number."
8 | weight: 100
9 | ---
10 |
11 | Returns the largest integer (whole number) less than or equal to a number.
12 |
13 | ```javascript
14 | // returns 42
15 | Math.floor(42);
16 |
17 | // returns 3
18 | Math.floor(3.14);
19 |
20 | // Returns -4
21 | Math.floor(-3.14);
22 | ```
--------------------------------------------------------------------------------
/content/reference/numbers/math-max.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Math.max()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Get the largest number from a set of numbers"
8 | weight: 120
9 | ---
10 |
11 | Returns the largest number from a set of numbers. Pass each number in as an argument.
12 |
13 | ```javascript
14 | // returns 42
15 | Math.max(42, 3.14, 27);
16 |
17 | // returns -3.14
18 | Math.max(-42, -3.14, -27);
19 | ```
--------------------------------------------------------------------------------
/content/reference/numbers/math-min.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Math.min()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Get the lowest number from a set of numbers."
8 | weight: 130
9 | ---
10 |
11 | Returns the lowest number from a set of numbers. Pass each number in as an argument.
12 |
13 | ```javascript
14 | // returns 3.14
15 | Math.min(42, 3.14, 27);
16 |
17 | // returns -42
18 | Math.min(-42, -3.14, -27);
19 | ```
--------------------------------------------------------------------------------
/content/reference/numbers/math-random.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Math.random()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Return a random float between `0` and `1`."
8 | weight: 140
9 | ---
10 |
11 | Returns a random float (decimal) between `0` and `1`.
12 |
13 | This is _not_ cryptographically secure. Do not use it for anything security related.
14 |
15 | ```javascript
16 | // returns random decimal
17 | Math.random();
18 | ```
--------------------------------------------------------------------------------
/content/reference/numbers/number-toFixed.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Number.toFixed()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Format a number to a fixed number of decimal places."
8 | weight: 40
9 | ---
10 |
11 | Format a number to a fixed number of decimal places. Pass in the number of decimal places as an argument.
12 |
13 | ```javascript
14 | let pi = 3.14159;
15 | let eleven = 11;
16 |
17 | // returns 3.14
18 | pi.toFixed(2);
19 |
20 | // returns 11.000
21 | eleven.toFixed(3);
22 | ```
--------------------------------------------------------------------------------
/content/reference/numbers/number-toString.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Number.toString()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Convert a number to a string."
8 | weight: 50
9 | ---
10 |
11 | Convert a number to a string.
12 |
13 | ```javascript
14 | let pi = 3.14;
15 | let eleven = 11;
16 |
17 | // returns "3.14"
18 | pi.toString();
19 |
20 | // returns "11"
21 | eleven.toString();
22 | ```
--------------------------------------------------------------------------------
/content/reference/numbers/number.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Number()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Convert a string into a number."
8 | weight: 30
9 | ---
10 |
11 | Convert a string to a number.
12 |
13 | Sometimes it returns integer. Other times it returns a float. And if you pass in a string with random text in it, you’ll get `NaN`, an acronym for *Not a Number*.
14 |
15 | As a result of this inconsistency, it’s generally safer to use `parseInt()` or `parseFloat()`. If you know the format of the number you’d like, use those instead. If you want the string to fail with `NaN` if it has other characters in it, though, `Number()` may actually be a better choice.
16 |
17 | ```javascript
18 | // returns 123
19 | Number('123');
20 |
21 | // returns 12.3
22 | Number('12.3');
23 |
24 | // returns NaN
25 | Number('3.14someRandomStuff');
26 | ```
--------------------------------------------------------------------------------
/content/reference/numbers/parseFloat.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "parseFloat()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Convert a string into a point number (a number with decimal points)."
8 | weight: 20
9 | ---
10 |
11 | Convert a string into a point number (a number with decimal points).
12 |
13 | ```javascript
14 | // returns 3.14
15 | parseFloat('3.14');
16 |
17 | // also returns 3.14
18 | parseFloat('3.14someRandomStuff');
19 |
20 | // returns 3
21 | parseFloat('3');
22 | ```
23 |
--------------------------------------------------------------------------------
/content/reference/numbers/parseInt.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "parseInt()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Convert a string into an integer (whole number)."
8 | weight: 10
9 | ---
10 |
11 | Convert a string into an integer (a whole number). The second argument, `10`, is called the `radix`. This is the base number used in mathematical systems. For our use, it should always be `10`.
12 |
13 | ```javascript
14 | // returns 42
15 | parseInt('42', 10);
16 |
17 | // also returns 42
18 | parseInt('42px', 10);
19 | ```
--------------------------------------------------------------------------------
/content/reference/objects/_index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Objects"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | weight: 80
8 | ---
9 |
10 |
--------------------------------------------------------------------------------
/content/reference/objects/delete.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "delete"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Remove an item from an object."
8 | weight: 30
9 | ---
10 |
11 | Remove an item from an object. Use the `delete` operator on the key to remove.
12 |
13 | ```javascript
14 | let lunch = {
15 | sandwich: 'turkey',
16 | chips: 'cape cod',
17 | drink: 'soda'
18 | };
19 |
20 | // Remove the chips key from the lunch object
21 | delete lunch.chips;
22 |
23 | // logs {sandwich: 'turkey', drink: 'soda'}
24 | console.log(lunch);
25 | ```
--------------------------------------------------------------------------------
/content/reference/objects/object-assign.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Object.assign()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Perform a shallow merge of two or more objects."
8 | weight: 40
9 | ---
10 |
11 | Perform a shallow merge of two or more objects into the first. Pass in each object to merge as an argument.
12 |
13 | *__Note:__ in a shallow merge, nested objects are overwritten completely rather than having their values merged together.*
14 |
15 | ```javascript
16 | let object1 = {
17 | apple: 0,
18 | banana: {
19 | weight: 52,
20 | price: 100
21 | },
22 | cherry: 97
23 | };
24 |
25 | let object2 = {
26 | banana: {
27 | price: 200
28 | },
29 | durian: 100
30 | };
31 |
32 | let object3 = {
33 | apple: 'yum',
34 | pie: 3.214,
35 | applePie: true
36 | };
37 |
38 | // In this example, "banana" will only contain {price: 200}
39 | // In a deep merge, it would contain {price: 200, weight: 52}
40 | let merged = Object.assign(object1, object2, object3);
41 | ```
42 |
43 | All objects are merged into the first. To create a new object, pass in an empty object as the first argument.
44 |
45 | ```javascript
46 | let mergedNewObj = Object.assign({}, object1, object2, object3);
47 | ```
--------------------------------------------------------------------------------
/content/reference/objects/object-entries.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Object.entries()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Get an array of key/value pairs from an object."
8 | weight: 20
9 | ---
10 |
11 | Return an array of key/value pairs from an object, also represented as arrays. Pass in the object as an argument.
12 |
13 | ```javascript
14 | let lunch = {
15 | sandwich: 'turkey',
16 | chips: 'cape cod',
17 | drink: 'soda'
18 | };
19 |
20 | // logs [["sandwich", "turkey"], ["chips", "cape cod"], ["drink", "soda"]]
21 | let entries = Object.entries(lunch);
22 | console.log(entries);
23 | ```
--------------------------------------------------------------------------------
/content/reference/objects/object-freeze.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Object.freeze()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Make an object or array immutable."
8 | weight: 50
9 | ---
10 |
11 | Make an object or array itself immutable. Pass the array or object in as an argument. Once run, you can't add, update, or delete items or properties from the array or object.
12 |
13 | ```javascript
14 | let wizard = {
15 | name: 'Merlin',
16 | age: 'old AF'
17 | };
18 |
19 | // Freeze the wizard object
20 | Object.freeze(wizard);
21 |
22 | // Try to make updates
23 | // This will not work
24 | wizard.age = 42;
25 | wizard.wand = true;
26 | delete wizard.name;
27 |
28 | // logs {name: "Merlin", age: "old AF"}
29 | console.log(wizard);
30 | ```
--------------------------------------------------------------------------------
/content/reference/objects/object-function-shorthand.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Object Function Shorthand"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "A shorthand for defining functions in an object."
8 | weight: 70
9 | ---
10 |
11 | Instead of creating a key name and then writing `function () {}`, you can add a named function _without_ the `function` keyword.
12 |
13 | ```javascript
14 | let wizard = {
15 |
16 | // The old way of adding functions
17 | summon: function () {
18 | console.log('From out of thin air, watch me make a bear');
19 | },
20 |
21 | // The ES6 shorthand way
22 | vanish () {
23 | console.log(`Now you see me, now you don't.`);
24 | }
25 |
26 | };
27 | ```
--------------------------------------------------------------------------------
/content/reference/objects/object-keys.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Object.keys()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Get an array of keys from an object."
8 | weight: 10
9 | ---
10 |
11 | Return an array of keys from an object. Pass in the object as an argument.
12 |
13 | ```javascript
14 | let lunch = {
15 | sandwich: 'turkey',
16 | chips: 'cape cod',
17 | drink: 'soda'
18 | };
19 |
20 | // logs ["sandwich", "chips", "drink"]
21 | let keys = Object.keys(lunch);
22 | console.log(keys);
23 | ```
--------------------------------------------------------------------------------
/content/reference/objects/object-property-shorthand.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Object Property Shorthand"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "A shorthand for defining object properties."
8 | weight: 60
9 | ---
10 |
11 | If you want to define a property in an object, and that key name already exists as a variable within the object's scope, you don't have to explicitly assign a value. You can use just the key name, and that variable's value is used automatically.
12 |
13 | ```javascript
14 | // Some details
15 | let name = 'Merlin';
16 | let job = 'wizard';
17 | let age = 'old AF';
18 |
19 | // The object
20 | let wizard = {
21 | name: name, // The old way
22 | job, // ES6 shorthand
23 | age // ES6 shorthand
24 | };
25 | ```
--------------------------------------------------------------------------------
/content/reference/objects/optional-chaining.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Optional Chaining"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Chain properties only if they're not `undefined` or `null`."
8 | weight: 80
9 | ---
10 |
11 | Optional chaining is a browser-native way to chain methods or properties, and conditionally continue down the chain only if the value is not `null` or `undefined`.
12 |
13 | To use optional chaining, add a question mark (`?`) before the dot (`.`) in your chain.
14 |
15 | ```javascript
16 | // returns "Abracadabra!"
17 | let summonOptional = wizard?.spells?.summon?.phrase;
18 |
19 | // returns undefined but does not throw an error
20 | let teacupsOptional = wizard?.spells?.teacup?.phrase;
21 | ```
22 |
--------------------------------------------------------------------------------
/content/reference/selectors/_index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Selectors"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | weight: 10
8 | ---
9 |
10 |
--------------------------------------------------------------------------------
/content/reference/selectors/document-querySelector.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "document.querySelector()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Find the first matching element on a page."
8 | weight: 20
9 | ---
10 |
11 | Find the first matching element on a page. If an element isn't found, `querySelector()` returns `null`.
12 |
13 | ```javascript
14 | // The first button
15 | let button = document.querySelector('button');
16 |
17 | // The first element with the .bg-red class
18 | let red = document.querySelector('.bg-red');
19 |
20 | // The first element with a data attribute of snack equal to carrots
21 | let carrots = document.querySelector('[data-snack="carrots"]');
22 | ```
--------------------------------------------------------------------------------
/content/reference/selectors/document-querySelectorAll.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "document.querySelectorAll()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Find all matching elements on a page."
8 | weight: 10
9 | ---
10 |
11 | Find all matching elements on a page. You can use any valid CSS selector.
12 |
13 | ```javascript
14 | // Get all button elements
15 | let buttons = document.querySelectorAll('button');
16 |
17 | // Get all elements with the .bg-red class
18 | let elemsRed = document.querySelectorAll('.bg-red');
19 |
20 | // Get all elements with the [data-snack] attribute
21 | let elemsSnacks = document.querySelectorAll('[data-snack]');
22 | ```
--------------------------------------------------------------------------------
/content/reference/selectors/element-matches.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Element.matches()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Check if an element would be selected by a particular selector or set of selectors."
8 | weight: 30
9 | ---
10 |
11 | Check if an element would be selected by a particular selector or set of selectors. Returns `true` if the element is a match, and `false` when it's not.
12 |
13 | ```javascript
14 | // Check if the first .bg-red element has the [data-snack attribute]
15 | let red = document.querySelector('.bg-red');
16 | if (red.matches('[data-snack]')) {
17 | console.log('Yummy snack!');
18 | } else {
19 | console.log('No snacks');
20 | }
21 | ```
--------------------------------------------------------------------------------
/content/reference/strings/string-includes.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "String.includes()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Check if a string contains a substring."
8 | weight: 110
9 | ---
10 |
11 | Check if a string contains a substring. Returns a boolean: `true` if the string has the substring, and `false` if it doesn't. It's case-sensitive.
12 |
13 | ```javascript
14 | let str = 'I love Cape Cod potato chips.';
15 |
16 | // returns true
17 | str.includes('Cape Cod');
18 |
19 | // returns false
20 | str.includes('cape cod');
21 |
22 | // returns false
23 | str.includes('chocolate');
24 | ```
--------------------------------------------------------------------------------
/content/reference/strings/string-indexOf.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "String.indexOf()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Find the index of a substring inside a string."
8 | weight: 100
9 | ---
10 |
11 | Find a substring inside a string. It returns the index of where the substring starts in the string, or `-1` if the substring isn't found. It's case-sensitive.
12 |
13 | ```javascript
14 | let str = 'I love Cape Cod potato chips.';
15 |
16 | // Returns 7
17 | str.indexOf('Cape Cod');
18 |
19 | // Returns 7
20 | str.indexOf('Cape C');
21 |
22 | // Returns -1
23 | str.indexOf('cape cod');
24 | ```
25 |
--------------------------------------------------------------------------------
/content/reference/strings/string-padEnd.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "String.padEnd()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Add characters to the end of a string if it's less than a certain length."
8 | weight: 20
9 | ---
10 |
11 | Add characters to the end of a string if it's less than a certain length. Accepts two arguments: the length the string should be, and what characters to add if it's not that length. The characters to use is optional, and defaults to a space (` `).
12 |
13 | ```javascript
14 | // Add a leading zero for hours below 10
15 | let minutes0 = '0';
16 | let minutes12 = '12';
17 |
18 | // returns "00"
19 | minutes0.padEnd(2, '0');
20 |
21 | // returns "12"
22 | minutes12.padEnd(2, '0');
23 | ```
--------------------------------------------------------------------------------
/content/reference/strings/string-padStart.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "String.padStart()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Add characters to the beginning of a string if it's less than a certain length."
8 | weight: 10
9 | ---
10 |
11 | Add characters to the beginning of a string if it's less than a certain length. Accepts two arguments: the length the string should be, and what characters to add if it's not that length. The characters to use is optional, and defaults to a space (` `).
12 |
13 | ```javascript
14 | // Add a leading zero for hours below 10
15 | let hour3 = '3';
16 | let hour12 = '12';
17 |
18 | // returns "03"
19 | hour3.padStart(2, '0');
20 |
21 | // returns "12"
22 | hour12.padStart(2, '0');
23 | ```
--------------------------------------------------------------------------------
/content/reference/strings/string-replace.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "String.replace()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Replace a portion of a string with something else."
8 | weight: 60
9 | ---
10 |
11 | Replace a portion of text in a string with something else. The `String.replace()` method accepts two arguments: the string to find, and the string to replace it with.
12 |
13 | ```javascript
14 | let text = 'I love Cape Cod potato chips!';
15 |
16 | // returns "I love Lays potato chips!"
17 | text.replace('Cape Cod', 'Lays');
18 | ```
19 |
20 | By default, the `String.replace()` method replaces the first match. To replace all matches, you'll need to pass in a regular expression with the global flag (`g`).
21 |
22 | ```javascript
23 | let chips = 'Cape Cod potato chips are my favorite brand of chips.';
24 |
25 | // Only replaces the first instance of the word "chips"
26 | chips.replace('chips', 'deep fried potato slices');
27 |
28 | // Replaces all instances of the word "chips"
29 | chips.replace(new RegExp('chips', 'g'), 'deep fried potato slices');
30 | ```
--------------------------------------------------------------------------------
/content/reference/strings/string-replaceAll.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "String.replaceAll()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Replace all instances of a string inside another string."
8 | weight: 70
9 | ---
10 |
11 | Replace all instances of a string inside another string, without the need for a regular expression. The `String.replaceAll()` method accepts two arguments: the string to find, and the string to replace it with.
12 |
13 | ```javascript
14 | // Awkwardly worded, but roll with it
15 | let wizards = 'Of all the wizards in Lord of the Rings, Radagast is my favorite of the wizards.';
16 |
17 | // returns "Of all the sorcerers in Lord of the Rings, Radagast is my favorite of the sorcerers."
18 | let sorcerers = wizards.replaceAll('wizards', 'sorcerers');
19 | ```
20 |
21 | _The `String.replaceAll()` method works in all modern browsers, with the exception of the Samsung Internet mobile browser. [You can add support with a polyfill.](https://vanillajstoolkit.com/polyfills/stringreplaceall/)_
--------------------------------------------------------------------------------
/content/reference/strings/string-slice.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "String.slice()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Get a portion of a string starting and ending at specific characters."
8 | weight: 80
9 | ---
10 |
11 | Get a portion of a string starting (and optionally ending) at a particular character.
12 |
13 | The first argument is where to start. Use `0` to include the first character. The second argument is where to end (and is optional).
14 |
15 | If either argument is a negative integer, it will start at the end of the string and work backwards.
16 |
17 | ```javascript
18 | let text = 'Cape Cod potato chips';
19 |
20 | // returns "Cod potato chips"
21 | text.slice(5);
22 |
23 | // returns "Cod"
24 | text.slice(5, 8);
25 |
26 | // returns "Cape Cod potato"
27 | text.slice(0, -6);
28 |
29 | // returns "chips"
30 | text.slice(-5);
31 | ```
--------------------------------------------------------------------------------
/content/reference/strings/string-split.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "String.split()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Convert a string to an array."
8 | weight: 90
9 | ---
10 |
11 | Convert a string into an array by splitting it after a specific character (or characters).
12 |
13 | The first argument, the `delimiter`, the character or characters to split by. As an optional second argument, you can stop splitting your string after a certain number of delimiter matches have been found.
14 |
15 | ```javascript
16 | let shoppingList = 'Soda, turkey sandwiches, potato chips, chocolate chip cookies';
17 | let menu = shoppingList.split(', ');
18 | let limitedMenu = shoppingList.split(', ', 2);
19 |
20 | // logs ["Soda", "turkey sandwiches", "potato chips", "chocolate chip cookies"]
21 | console.log(menu);
22 |
23 | // logs ["Soda", "turkey sandwiches"]
24 | console.log(limitedMenu);
25 | ```
--------------------------------------------------------------------------------
/content/reference/strings/string-toLowerCase.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "String.toLowerCase()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Transform all text in a string to lowercase."
8 | weight: 50
9 | ---
10 |
11 | Transform all text in a string to lowercase.
12 |
13 | ```javascript
14 | let text = 'This sentence has some MIXED CASE LeTTeRs in it.';
15 |
16 | // returns "this sentence has some mixed case letters in it."
17 | let lower = text.toLowerCase();
18 | ```
--------------------------------------------------------------------------------
/content/reference/strings/string-toUpperCase.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "String.toUpperCase()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Transform all text in a string to uppercase."
8 | weight: 40
9 | ---
10 |
11 | Transform all text in a string to uppercase.
12 |
13 | ```javascript
14 | let text = 'This sentence has some MIXED CASE LeTTeRs in it.';
15 |
16 | // returns "THIS SENTENCE HAS SOME MIXED CASE LETTERS IN IT."
17 | let upper = text.toUpperCase();
18 | ```
--------------------------------------------------------------------------------
/content/reference/strings/string-trim.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "String.trim()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Remove leading and trailing whitespace from a string."
8 | weight: 30
9 | ---
10 |
11 | Remove leading and trailing whitespace from a string.
12 |
13 | ```javascript
14 | let str = ' I love Cape Cod potato chips. ';
15 |
16 | // Returns "I love Cape Cod potato chips."
17 | str.trim();
18 | ```
--------------------------------------------------------------------------------
/content/reference/strings/template-literals.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Template Literals"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "More easily create multi-line or complex strings."
8 | weight: 120
9 | ---
10 |
11 | Introduced in ES6, *template literals* provide a simpler way to create strings that span multiple lines or contain data.
12 |
13 | Instead of quotes, template literals start and end with backticks (`` ` ``). You do *not* need to concatenate new lines in template literals.
14 |
15 | ```javascript
16 | let str1 =
17 | `Another toggle
23 | Expanded by default 24 |Hello, world!
18 |How are you today?
`; 19 | 20 | // logs "Hello, world!
How are you today?
" 21 | console.log(str1); 22 | ``` 23 | 24 | You can use variables in template literals (sometimes called *expressions*) by wrapping the name of the variable in curly brackets with a leading dollar sign (`${VARIABLE_NAME}`). 25 | 26 | ```javascript 27 | let greeting = 'Hi, universe!'; 28 | let message = 'How is the weather today?'; 29 | 30 | let str2 = 31 | `${greeting}
32 |${message}
`; 33 | 34 | // logs "Hi, universe!
How is the weather today?
" 35 | console.log(str2); 36 | ``` -------------------------------------------------------------------------------- /content/reference/style/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Styles" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | weight: 40 8 | --- 9 | 10 | ## Inline Styles 11 | 12 | Get and set inline styles for an element. 13 | 14 | ```javascript 15 | var elem = document.querySelector('#sandwich'); 16 | 17 | // Get a style 18 | // If this style is not set as an inline style directly on the element, it returns an empty string 19 | // ex. 20 | var bgColor = elem.style.backgroundColor; // this will return "green" 21 | var fontWeight = elem.style.fontWeight; // this will return "" 22 | 23 | // Set a style 24 | elem.style.backgroundColor = 'purple'; 25 | ``` 26 | 27 | *Works back to at least IE6.* 28 | 29 | 30 | 31 | ## Computed Styles 32 | 33 | Get the actual computed style of an element. This factors in browser default stylesheets as well as external styles you've specified. 34 | 35 | ```javascript 36 | var elem = document.querySelector('#some-elem'); 37 | var bgColor = window.getComputedStyle(elem).backgroundColor; 38 | ``` -------------------------------------------------------------------------------- /content/reference/style/element-style.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Element.style" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | description: "Get and set inline styles for an element." 8 | weight: 10 9 | --- 10 | 11 | Get and set inline styles for an element. 12 | 13 | ```html 14 |15 | Sandwich 16 |
17 | ``` 18 | 19 | ```javascript 20 | let sandwich = document.querySelector('#sandwich'); 21 | 22 | // Get a style 23 | // If this style is not set as an inline style directly on the element, it returns an empty string 24 | let bgColor = sandwich.style.backgroundColor; // this will return "green" 25 | let fontWeight = sandwich.style.fontWeight; // this will return "" 26 | 27 | // Set the background-color style property 28 | sandwich.style.backgroundColor = 'purple'; 29 | ``` 30 | 31 | You can also get and set a string representation of the entire inline `style` property on the element itself with the `Element.style.cssText` property. 32 | 33 | ```javascript 34 | // Get the styles on an element 35 | // returns "background-color: green; color: white;" 36 | let styles = sandwich.style.cssText; 37 | 38 | // Completely replace the inline styles on an element 39 | sandwich.style.cssText = 'font-size: 2em; font-weight: bold;'; 40 | 41 | // Add additional styles 42 | sandwich.style.cssText += 'color: purple;'; 43 | ``` -------------------------------------------------------------------------------- /content/reference/style/window-getComputedStyle.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Window.getComputedStyle()" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | description: "Get the computed style of an element." 8 | weight: 20 9 | --- 10 | 11 | Get the actual computed style of an element. This factors in browser default stylesheets as well as external styles you've specified. 12 | 13 | ```javascript 14 | let sandwich = document.querySelector('#sandwich'); 15 | let bgColor = window.getComputedStyle(sandwich).backgroundColor; 16 | ``` -------------------------------------------------------------------------------- /content/reference/traversal/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Traversing the DOM" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | weight: 110 8 | --- 9 | 10 | -------------------------------------------------------------------------------- /content/reference/traversal/element-childNodes.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Node.childNodes" 3 | date: 2018-01-14T21:38:44-05:00 4 | draft: false 5 | noTitle: false 6 | fullWidth: false 7 | description: "Get the immediate descendants of an element, including text fragments and other non-element nodes." 8 | weight: 40 9 | --- 10 | 11 | Get the immediate descendants of an element, including text fragments and other non-element nodes. 12 | 13 | ```html 14 |-
15 |
16 |
- Gandalf 17 |
- Radagast 18 |
- Hermione 19 | 20 |
- Neville 21 |
15 |
22 | ```
23 |
24 | ```javascript
25 | let wizards = document.querySelector('.wizards');
26 | let wizardsList = document.querySelector('.wizards ul');
27 |
28 | // returns an HTMLCollection with the ul element
29 | let wizardDescendants = wizards.children;
30 |
31 | // returns an HTMLCollection with the list items
32 | let wizardListDescendants = wizardsList.children;
33 |
34 | // Add a new item
35 | let li = document.createElement('li');
36 | li.textContent = 'Merlin';
37 | wizardsList.append(li);
38 |
39 | // wizardListDescendants now automatically contains the new li
40 | ```
--------------------------------------------------------------------------------
/content/reference/traversal/element-closest.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Element.closest()"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Get the closest parent element that matches a selector."
8 | weight: 20
9 | ---
10 |
11 | Get the closest parent up the DOM tree that matches against a selector.
12 |
13 | The `Element.closest()` method starts with the element itself. You can start with the first parent element by pairing it with the `Node.parentNode` property.
14 |
15 | ```html
16 | -
16 |
- Gandalf 17 |
- Radagast 18 |
- Hermione 19 |
- Neville 20 |
15 |
17 | ```
18 |
19 | ```javascript
20 | let h1 = document.querySelector('h1');
21 |
22 | // returns the #app element
23 | let parent = h1.parentNode;
24 | ```
--------------------------------------------------------------------------------
/content/reference/traversal/firstChild-lastChild.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Node.firstChild & Node.lastChild"
3 | date: 2018-01-14T21:38:44-05:00
4 | draft: false
5 | noTitle: false
6 | fullWidth: false
7 | description: "Get the first and last child nodes of a parent element."
8 | weight: 50
9 | ---
10 |
11 | Get the first and last child nodes of a parent element, including nodes that aren't elements (such as comments and text fragments).
12 |
13 | ```html
14 | Hello, world!
16 |-
15 |
16 |
- Gandalf 17 |
- Radagast 18 |
- Hermione 19 | 20 |
- Neville 21 |
-
15 |
16 |
- Gandalf 17 |
- Radagast 18 |
- Hermione 19 | 20 |
- Neville 21 |
-
15 |
16 |
- Gandalf 17 |
- Radagast 18 |
- Hermione 19 | 20 |
- Neville 21 |
-
15 |
16 |
- Gandalf 17 |
- Radagast 18 |
- Hermione 19 | 20 |
- Neville 21 |
Oops!
4 | 5 |
I can't seem to find the page you're looking for. Sorry! Send me an email me at {{ partial "email.html" }} and I'll help you find it.
8 | 9 | {{ partial "footer.html" . }} -------------------------------------------------------------------------------- /themes/gmt/layouts/_default/list.html: -------------------------------------------------------------------------------- 1 | {{ partial "header.html" . }} 2 | 3 | {{ partial "content-page.html" . }} 4 | 5 | {{ $paginate := .Paginate .Pages }} 6 | {{ range $paginate.Pages }} 7 | 8 | {{ if ne ( $.Scratch.Get "pubDate" ) ( .PublishDate.Format "200601" ) }} 9 |{{ .PublishDate.Format "January 2006" }}
10 | {{ end }} 11 | {{ $.Scratch.Set "pubDate" ( .PublishDate.Format "200601" ) }} 12 | 13 |12 | {{ .Title }} 13 |
14 | 15 |{{ .Title }}
4 | 5 |-
6 | {{ range $key, $value := .Data.Terms }}
7 |
- 8 | 9 | {{ $key }} 10 | 11 | ({{ len $value }}) 12 | 13 | {{ end }} 14 |
-
8 | {{ range .Pages }}
9 |
- 10 | {{ .Title }}. {{ .Description | markdownify }} {{ if isset .Params "example" }}Example: {{ .Params.example | markdownify }}{{ end }} 11 | 12 | {{ end }} 13 |
{{ ( .Title | htmlUnescape ) }}
7 | {{ end }} 8 | 9 |{{ .Description | markdownify }}
10 | 11 | {{- if isset .Params "example" -}}Example: {{ .Params.example | markdownify }}
{{- end -}} 12 | 13 | {{ .Content }} 14 | 15 | 19 | 20 |-
6 | {{ range .Pages }}
7 |
- 8 | {{ .Title }}. {{ markdownify .Description }} 9 | 10 | {{ end }} 11 |
{{ ( .Title | htmlUnescape ) }}
6 | 7 |{{ markdownify .Params.description }}
8 | 9 | {{ if isset .Params "support" }}{{ markdownify .Params.support }}
{{ end }} 10 | 11 | {{ if or (isset .Params "demo") (isset .Params "how") }} 12 |-
13 | {{ if and (isset .Params "demo") (ne .Params.demo "") }}
- Demo on CodePen {{ end }} 14 | {{ if and (isset .Params "how") (ne .Params.how "") }}
- How It Works {{ end }} 15 |