[
{
"path": ".editorconfig",
"content": "root = true\n\n[*]\nend_of_line = lf\n\n# 4 space indentation\n[*.{js,php,scss}]\nindent_style = space\nindent_size = 4"
},
{
"path": ".gitignore",
"content": "/build_local/\n/build_production/\n/node_modules/\n/vendor/\n/_tmp/\n/cache/\n/.idea/\n/.vscode/\nnpm-debug.log\nyarn-error.log\n\n# Optional ignores\n# /build_staging/\n# /build_production/\n# /source/assets/build/css/\n# /source/assets/build/fonts/\n# /source/assets/build/js/\n"
},
{
"path": "CNAME",
"content": "codetogo.io\n"
},
{
"path": "CODE_OF_CONDUCT.md",
"content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment include:\n\n* Using welcoming and inclusive language\n* Being respectful of differing viewpoints and experiences\n* Gracefully accepting constructive criticism\n* Focusing on what is best for the community\n* Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n* The use of sexualized language or imagery and unwelcome sexual attention or advances\n* Trolling, insulting/derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or electronic address, without explicit permission\n* Other conduct which could reasonably be considered inappropriate in a professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at joubran.jad@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]\n\n[homepage]: http://contributor-covenant.org\n[version]: http://contributor-covenant.org/version/1/4/\n"
},
{
"path": "CONTRIBUTING.md",
"content": "Thank you for contributing a use case on CodeToGo!\n\nYou can either follow the below steps to send a Pull Request, or you can simply create a new Issue\n\n0. We recommend creating an issue discussing the use case before you send a PR\n\n1. Search the website to make sure that this use case doesn't already exist\n\n2. Create a new markdown file in `source/_jsusecases/` or `source/_reactusecases`.\n\nThe name of the markdown file will determine the **Title** of the use case.\nFor example: [lowercase-a-string.md](https://github.com/jadjoubran/codetogo.io/blob/master/source/_jsusecases/lowercase-a-string.md) will automatically yield a title of:\n`How to lowercase a string in JavaScript`.\n`How to ` and ` in JavaScript` are always automatically added.\n\n3. Please start off using this template\n\n````\n---\nextends: _layouts.usecase\ndate: 2018-01-20\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase\nreference: String.toUpperCase\nrelated: lowercase-a-string\ncategory: strings\nauthor: \"Your name/nickname (optional)\"\n---\n\n\n```javascript\nconst text = 'Hello World';\n\ntext.toUpperCase();\n```\n\nHELLO WORLD \n````\n\n\n4. Replace the use case with your own.\n\n5. If there's an output for such code, show it in between `Step by step React Tutorial '\n ],\n ],\n];\n"
},
{
"path": "netlify.toml",
"content": "[[headers]]\n for = \"/*\"\n [headers.values]\n Cache-Control = \"public, s-max-age=18748800\""
},
{
"path": "package.json",
"content": "{\n \"name\": \"codetogo\",\n \"private\": false,\n \"devDependencies\": {\n \"algoliasearch\": \"^3.35.1\",\n \"browser-sync\": \"^3.0.2\",\n \"browser-sync-webpack-plugin\": \"^2.3.0\",\n \"cross-env\": \"^3.2.3\",\n \"extra-watch-webpack-plugin\": \"^1.0.3\",\n \"hasbin\": \"^1.2.3\",\n \"husky\": \"^0.14.3\",\n \"laravel-mix\": \"^6.0.49\",\n \"lint-staged\": \"^15.2.7\",\n \"node-cmd\": \"^3.0.0\",\n \"prettier\": \"^1.19.1\",\n \"rrssb\": \"^1.14.0\",\n \"sass\": \"^1.26.10\",\n \"sass-loader\": \"^16.0.1\",\n \"vue-template-compiler\": \"^2.6.11\",\n \"webpack\": \"5.75.0\",\n \"yaml-front-matter\": \"^4.1.0\",\n \"yargs\": \"^17.6.2\"\n },\n \"scripts\": {\n \"local\": \"cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --env=local --config=node_modules/laravel-mix/setup/webpack.config.js\",\n \"staging\": \"cross-env NODE_ENV=staging node_modules/webpack/bin/webpack.js --progress --env=staging --config=node_modules/laravel-mix/setup/webpack.config.js\",\n \"production\": \"cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --env=production --config=node_modules/laravel-mix/setup/webpack.config.js\",\n \"dev\": \"npm run local\",\n \"prod\": \"npm run production\",\n \"watch\": \"npm run local -- --watch\",\n \"sync\": \"node tasks/algolia-sync.js\",\n \"precommit\": \"lint-staged\",\n \"netlify-build\": \"composer install && npm run prod && vendor/bin/jigsaw build production && npm run sync\"\n },\n \"lint-staged\": {\n \"source/_jsusecases/*.md\": [\n \"prettier --write\",\n \"git add\"\n ],\n \"source/_reactusecases/*.md\": [\n \"prettier --write\",\n \"git add\"\n ]\n }\n}\n"
},
{
"path": "source/404.html",
"content": "\n\n\n 404 \n\n\n \n\n\n"
},
{
"path": "source/CNAME",
"content": "codetogo.io\n"
},
{
"path": "source/_assets/js/autocomplete.js",
"content": "const client = algoliasearch(\"7V5EBRZWFF\", \"8a58d6caba2a81878b26e24c1028624d\");\nconst index = client.initIndex(\"prod_JS-HOWTO\");\nautocomplete(\n \"#autocomplete\",\n {\n hint: true,\n autoselect: true\n // autoselectOnBlur: true\n },\n [\n {\n source: autocomplete.sources.hits(index, { hitsPerPage: 50 }),\n displayKey: \"question\",\n templates: {\n suggestion: suggestion => {\n return suggestion._highlightResult.question.value;\n },\n empty: _ => {\n return `\n
No results found.
\n
\n
\n
Click here to contribute \n
\n
\n```\n\n```javascript\nconst element = document.querySelector(\"#box\");\n\n// Note: only class name, without the '.'\nelement.classList.add(\"class-name\");\n```\n"
},
{
"path": "source/_jsusecases/add-item-to-array.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push\nreference: Array.push\ncategory: arrays\n---\n\n```javascript\nconst apps = [];\n\napps.push(\"calculator\"); // returns 1 (new length of the array)\n\napps.push(\"phone\", \"clock\"); // returns 3 (new length of the array)\n```\n\n[\"calculator\", \"phone\", \"clock\"] \n"
},
{
"path": "source/_jsusecases/add-item-to-localstorage.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-19\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\nrelated: add-object-to-localstorage,remove-item-from-localstorage,get-item-from-localstorage\nreference: Window.localStorage\ncategory: storage\n---\n\n```javascript\nconst name = \"John\";\n\nlocalStorage.setItem(\"name\", name);\n```\n"
},
{
"path": "source/_jsusecases/add-item-to-sessionstorage.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-21\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage\nreference: Window.sessionStorage\nrelated: get-item-from-sessionstorage\ncategory: storage\n---\n\n```javascript\nconst name = \"John\";\n\nsessionStorage.setItem(\"name\", name);\n```\n"
},
{
"path": "source/_jsusecases/add-multiple-classes-to-element.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-09-22\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList\nreference: Element.classList\nrelated: add-class-to-element,remove-multiple-classes-from-element\ncategory: DOM\n---\n\n```html\n
\n```\n\n```javascript\nconst element = document.querySelector(\"#box\");\n\nelement.classList.add(\"active\", \"highlighted\");\n```\n\n<div id=\"box\" class=\"active highlighted\"></div> \n"
},
{
"path": "source/_jsusecases/add-object-to-localstorage.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-19\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\nreference: Window.localStorage\nrelated: add-item-to-localstorage,remove-item-from-localstorage\ncategory: storage\n---\n\n```javascript\nconst user = {\n id: 1,\n first_name: \"John\",\n last_name: \"Doe\"\n};\n\nlocalStorage.setItem(\"user\", JSON.stringify(user));\n```\n"
},
{
"path": "source/_jsusecases/append-html.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-07-28\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML\nreference: Element.insertAdjacentHTML\ncategory: DOM\n---\n\n```html\n\n```\n\n```javascript\nconst list = document.querySelector(\"#list\");\n\nlist.insertAdjacentHTML(\"beforeend\", `Apple `);\n```\n"
},
{
"path": "source/_jsusecases/apply-function-to-every-array-element.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-19\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map\nreference: Array.map\ncategory: functions\n---\n\n```javascript\nconst ages = [18, 20, 21, 30];\n\nconst agesPlusOne = ages.map(age => age + 1);\n```\n\n[19, 21, 22, 31] \n"
},
{
"path": "source/_jsusecases/async-await-fetch.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-13\nlink: https://learnjavascript.online/topics/fetch.html?utm_source=codetogo.io\nreference_website: Learn JavaScript\nreference: Fetch API use cases\nrelated: fetch-json\ncategory: JSON\nextra: https://learnjavascript.online/topics/fetch.html?utm_source=codetogo.io\n---\n\n```javascript\n(async () => {\n try {\n const response = await fetch(\"https://codetogo.io/api/users.json\");\n const data = await response.json();\n console.log(data);\n } catch (err) {\n console.error(err);\n }\n})();\n```\n\n\n[{\n id: 1,\n name: \"Sam\"\n}, {\n id: 2,\n name: \"Alex\"\n}]\n \n"
},
{
"path": "source/_jsusecases/async-await.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-28\nlink: https://learnjavascript.online/topics/promises.html?utm_source=codetogo.io\nreference: Promises\nreference_website: Learn JavaScript\ncategory: Promise\nauthor: \"Vijay Singh\"\n---\n\n```javascript\n(async () => {\n try {\n const response = await fetch(\"https://codetogo.io/api/users.json\");\n const data = await response.json();\n console.log(data);\n } catch (err) {\n console.error(err);\n }\n})();\n```\n\n\n[{\n id: 1,\n name: \"Sam\"\n}, {\n id: 2,\n name: \"Alex\"\n}]\n \n"
},
{
"path": "source/_jsusecases/call-a-function-with-arguments.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-18\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions\nreference: Functions\nrelated: call-a-function\ncategory: functions\n---\n\n```javascript\nfunction greetUser(name) {\n return `Welcome ${name} to code to go!`;\n}\n\nlet result = greetUser(\"John\");\n\nconsole.log(result);\n```\n\nWelcome John to code to go! \n"
},
{
"path": "source/_jsusecases/call-a-function.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-17\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions\nreference: Functions\nrelated: call-a-function-with-arguments\ncategory: functions\n---\n\n```javascript\nfunction greetUser() {\n return \"Welcome to code to go!\";\n}\n\nlet result = greetUser();\n\nconsole.log(result);\n```\n\nWelcome to code to go! \n"
},
{
"path": "source/_jsusecases/capitalize-first-letter.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-12-26\ncategory: strings\n---\n\n```javascript\nlet str = \"welcome to code to go\";\n\nstr = str[0].toUpperCase() + str.substring(1);\n```\n\nWelcome to code to go \n"
},
{
"path": "source/_jsusecases/change-CSS-property.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-11\ncategory: DOM\n---\n\n```html\n
\n```\n\n```javascript\nconst element = document.querySelector(\"#box\");\n\n//change background-color\nelement.style.backgroundColor = \"red\";\n```\n"
},
{
"path": "source/_jsusecases/check-if-array-includes-element.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://blog.learnjavascript.online/posts/javascript-in-array/\nreference_website: Learn JavaScript Blog\nreference: JavaScript in array\ncategory: arrays\n---\n\n```javascript\nconst apps = [\"phone\", \"calculator\", \"clock\"];\n\napps.includes(\"calculator\");\n```\n\ntrue \n"
},
{
"path": "source/_jsusecases/check-if-element-has-class.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-26\nlink: https://blog.learnjavascript.online/posts/javascript-has-class/\nreference_website: Learn JavaScript Blog\nreference: JavaScript has class\ncategory: DOM\n---\n\n```html\n
\n```\n\n```javascript\nconst element = document.querySelector(\"#box\");\n\n// Check if hasclass\n// Result is a boolean\nelement.classList.contains(\"active\");\n```\n\ntrue \n"
},
{
"path": "source/_jsusecases/check-if-number-is-even.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-23\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_()\nreference: Remainder\nrelated: check-if-number-is-odd\ncategory: numbers\n---\n\n```javascript\nconst number = 12;\n\nconst isEven = number % 2 === 0;\n\nconsole.log(isEven);\n```\n\ntrue \n"
},
{
"path": "source/_jsusecases/check-if-number-is-odd.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-23\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_()\nreference: Remainder\nrelated: check-if-number-is-even\ncategory: numbers\n---\n\n```javascript\nconst number = 13;\n\nconst isOdd = number % 2 !== 0;\n\nconsole.log(isOdd);\n```\n\ntrue \n"
},
{
"path": "source/_jsusecases/check-if-object-includes-substring.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-01-28\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values\nreference: Object.values\nrelated: check-if-object-includes-value\ncategory: objects\n---\n\n```javascript\nconst person = {\n first_name: \"Joan\",\n last_name: \"Leon\",\n twitter: \"@nucliweb\"\n};\n\nObject.values(person)\n .toString()\n .includes(\"web\");\n```\n\ntrue \n"
},
{
"path": "source/_jsusecases/check-if-object-includes-value.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-26\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values\nreference: Object.values\nrelated: check-if-object-includes-substring\ncategory: objects\n---\n\n```javascript\nconst person = {\n firstName: \"Sam\",\n lastName: \"Bradley\"\n};\n\n// Result is a boolean\nObject.values(person).includes(\"Bradley\");\n```\n\ntrue \n"
},
{
"path": "source/_jsusecases/check-if-object-is-empty.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-27\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys\nreference: Object.keys\nrelated: pause-audio,stop-audio\ncategory: DOM\n---\n\n```javascript\nconst obj = {};\n\nconst isEmpty = Object.keys(obj).length === 0;\n```\n\ntrue \n"
},
{
"path": "source/_jsusecases/check-if-string-ends-with-substring.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-02-01\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith\nreference: String.endsWith\nrelated: check-if-string-starts-with-substring\ncategory: strings\n---\n\n```javascript\nconst string = \"js is awesome\";\n\nstring.endsWith(\"awesome\");\n```\n\ntrue \n"
},
{
"path": "source/_jsusecases/check-if-string-includes-another-string.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes\nreference: String.includes\ncategory: strings\n---\n\n```javascript\nconst text = \"Code to go has awesome use cases!\";\n\ntext.includes(\"Code to go\");\n```\n\ntrue \n"
},
{
"path": "source/_jsusecases/check-if-string-starts-with-substring.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-02-01\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith\nreference: String.startsWith\nrelated: check-if-string-ends-with-substring\ncategory: strings\n---\n\n```javascript\nconst string = \"js is awesome\";\n\nstring.startsWith(\"js\");\n```\n\ntrue \n"
},
{
"path": "source/_jsusecases/check-if-variable-is-a-string.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-04-28\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof\nreference: typeof\ncategory: strings\n---\n\n```javascript\nconst input = \"potential string\";\n\ntypeof input === \"string\";\n```\n\ntrue \n"
},
{
"path": "source/_jsusecases/check-if-variable-is-an-object.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-17\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString\nreference: Object.toString\ncategory: objects\n---\n\n```javascript\nconst value = {\n name: \"John\"\n};\n\nObject.prototype.toString.call(value) === \"[object Object]\";\n```\n\ntrue \n"
},
{
"path": "source/_jsusecases/clear-interval.md",
"content": "---\nextends: _layouts.usecase\ndate: 2019-01-28\nlink: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval\nreference: Window.clearInterval\nrelated: set-interval\ncategory: functions\nauthor: \"Vijay Singh\"\n---\n\n```javascript\nconst intervalId = setInterval(() => {\n console.log(\"I will not be printed\");\n}, 2000);\n\nclearInterval(intervalId);\n```\n"
},
{
"path": "source/_jsusecases/clear-timeout.md",
"content": "---\nextends: _layouts.usecase\ndate: 2019-01-28\nlink: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout\nreference: Window.clearTimeout\nrelated: set-timeout\ncategory: functions\nauthor: \"Vijay Singh\"\n---\n\n```javascript\nconst timeOutId = setTimeout(() => {\n console.log(\"I will not be printed\");\n}, 2000);\n\nclearTimeout(timeOutId);\n```\n"
},
{
"path": "source/_jsusecases/comment.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-24\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Comments\nreference: Comments\ncategory: syntax\n---\n\n```javascript\n//this is a one line comment\n\n/*\n And this is a comment\n that spans multiple lines\n*/\n```\n"
},
{
"path": "source/_jsusecases/concatenate-arrays.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-24\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator\nreference: Spread operator\ncategory: arrays\nrelated: concatenate-objects\n---\n\n```javascript\nconst winners = [\"Jane\", \"Bob\"];\nconst losers = [\"Ronald\", \"Kevin\"];\n\nconst players = [...winners, ...losers];\n```\n\n['Jane', 'Bob', 'Ronald', 'Kevin'] \n"
},
{
"path": "source/_jsusecases/concatenate-objects.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-02-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator\nreference: Spread operator\ncategory: objects\nrelated: concatenate-arrays\n---\n\n```javascript\nconst defaultOptions = {\n verbose: false,\n src: \"./src\",\n dist: \"./dist\"\n};\nconst userOptions = { verbose: true };\n\nconst options = { ...defaultOptions, ...userOptions };\n```\n\n{\n verbose: true,\n src: \"./src\",\n dist: \"./dist\"\n} \n"
},
{
"path": "source/_jsusecases/convert-JSON-to-string.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-6\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify\nreference: JSON.stringify\nrelated: parse-JSON-string\ncategory: JSON\n---\n\n```javascript\nconst object = {\n id: 1,\n name: \"Leanne Graham\"\n};\n\nJSON.stringify(object);\n```\n\n\n\"{\"id\":1,\"name\":\"Leanne Graham\"}\"\n \n"
},
{
"path": "source/_jsusecases/convert-array-to-comma-separated-string.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-18\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join\nreference: Array.join\nrelated: split-comma-separated-string\ncategory: arrays\n---\n\n```javascript\nconst elements = [\"Eat\", \"Sleep\", \"Code\", \"Repeat\"];\n\nelements.join(\",\");\n```\n\n\nEat,Sleep,Code,Repeat\n \n"
},
{
"path": "source/_jsusecases/convert-date-to-mysql-format-YYYY-MM-DD.md",
"content": "---\nextends: _layouts.usecase\ndate: 2019-12-01\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString\nreference: Date.toISOString\ncategory: datetime\n---\n\n```javascript\nconst date = new Date();\n\n//YYYY-MM-DD format\nconst mysqlDate = date.toISOString().split(\"T\")[0];\n```\n\n2019-12-01 \n"
},
{
"path": "source/_jsusecases/convert-date-to-timestamp.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-26\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime\nreference: Date.getTime\ncategory: datetime\n---\n\n```javascript\nconst date = new Date(\"Jan 10, 2000\");\n\nconst timestamp = date.getTime();\n```\n\n947455200000 \n"
},
{
"path": "source/_jsusecases/convert-from-degree-to-radian.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-21\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/PI\nreference: Math.PI\ncategory: numbers\n---\n\n```javascript\nconst degree = 90;\n\nconst radians = degree * (Math.PI / 180);\n```\n\n1.5707963267948966 \n"
},
{
"path": "source/_jsusecases/convert-string-to-number.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-11-11\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/parseInt\nreference: Number.parseInt\ncategory: numbers\n---\n\n```javascript\nNumber.parseInt(\"24\", 10);\n```\n\n24 \n"
},
{
"path": "source/_jsusecases/copy-text-to-clipboard.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-02-19\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand\nreference: Document.execCommand\ncategory: strings\n---\n\n```javascript\nconst textToCopy = \"npm install webdash\";\n\nconst el = document.createElement(\"textarea\");\nel.textContent = textToCopy;\nel.style.cssText = \"position: absolute;left:-500%\";\ndocument.body.appendChild(el);\nel.select();\ndocument.execCommand(\"copy\");\nel.remove();\n```\n"
},
{
"path": "source/_jsusecases/create-a-promise.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-28\nlink: https://learnjavascript.online/topics/promises.html?utm_source=codetogo.io\nreference: Promises\nreference_website: Learn JavaScript\nrelated: async-await\ncategory: promise\n---\n\n```javascript\nnew Promise((resolve, reject) => {\n // Do some work\n // then in case of success\n resolve();\n // or\n reject(\"failure reason\");\n});\n```\n"
},
{
"path": "source/_jsusecases/create-a-range-array.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-27\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys\nreference: Object.keys\ncategory: Arrays\n---\n\n```javascript\n// Create a range from 0 to 4\n[...Array(5).keys()];\n```\n\n[0, 1, 2, 3, 4] \n"
},
{
"path": "source/_jsusecases/create-a-regex.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-11-11\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp\nreference: RegExp\ncategory: regex\n---\n\n```javascript\nlet pattern = /hello world/;\n```\n"
},
{
"path": "source/_jsusecases/create-a-switch-statement.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-24\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch\nreference: switch\ncategory: syntax\n---\n\n```javascript\nlet key = \"right\";\n\nswitch (key) {\n case \"right\":\n console.log(\"Go right\");\n break;\n\n case \"left\":\n console.log(\"Go left\");\n break;\n}\n```\n\nGo right \n"
},
{
"path": "source/_jsusecases/create-an-object.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-11-11\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object\nreference: Object\ncategory: objects\n---\n\n```javascript\nconst person = {\n key: \"value\",\n first_name: \"John\",\n last_name: \"Doe\"\n};\n```\n"
},
{
"path": "source/_jsusecases/create-array-from-existing-array.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-21\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator\nreference: Spread operator\nrelated: add-item-to-sessionstorage\ncategory: arrays\n---\n\n```javascript\nconst apps = [\"phone\", \"calculator\", \"clock\"];\n\nconst clonedApps = [...apps];\n```\n\n[\"phone\", \"calculator\", \"clock\"] \n"
},
{
"path": "source/_jsusecases/create-date-in-RFC3339-format.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-26\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString\nreference: Date.toISOString()\nrelated: get-human-friendly-date-difference\ncategory: datetime\n---\n\n```javascript\nconst date = new Date();\n\n// RFC 3339 format\nconst rfc339 = date.toISOString();\n```\n\n2024-02-26T20:11:23.708Z \n"
},
{
"path": "source/_jsusecases/create-logical-AND-condition.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-01-02\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators\nreference: Logical operators\nrelated: create-logical-OR-condition\ncategory: syntax\n---\n\n```javascript\nconst isLearning = true;\nconst isOverwhelmed = true;\n\nif (isLearning && isOverwhelmed) {\n console.log(\"Take a break\");\n}\n```\n\nTake a break \n"
},
{
"path": "source/_jsusecases/create-logical-NOT-condition.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-01-02\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators\nreference: Logical operators\ncategory: syntax\n---\n\n```javascript\nconst isOverage = false;\n\nif (!isOverage) {\n console.log(\"You are underage\");\n}\n```\n\nYou are underage \n"
},
{
"path": "source/_jsusecases/create-logical-OR-condition.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-01-02\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators\nreference: Logical operators\nrelated: create-logical-AND-condition\ncategory: syntax\n---\n\n```javascript\nconst isUnderage = true;\nconst isDrunk = false;\n\nif (isUnderage || isDrunk) {\n console.log(\"Cannot drive\");\n}\n```\n\nCannot drive \n"
},
{
"path": "source/_jsusecases/create-object-from-array.md",
"content": "---\nextends: _layouts.usecase\ndate: 2020-02-18\ncategory: arrays\n---\n\n```javascript\nconst apps = [\"phone\", \"calculator\", \"clock\"];\nconst object = { ...apps };\n\nconsole.log(object);\n```\n\n\n{\n 0: \"phone\",\n 1: \"calculator\",\n 2: \"clock\"\n}\n \n"
},
{
"path": "source/_jsusecases/create-shallow-copy-of-object.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-08-14\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator\nreference: Spread operator\ncategory: objects\n---\n\n```javascript\nconst person = {\n id: 1,\n name: {\n first: \"John\",\n last: \"Doe\"\n }\n};\n\nconst duplicate = { ...person };\n```\n\n\n{\n id: 1,\n name: {\n first: 'John',\n last: 'Doe'\n }\n}\n \n"
},
{
"path": "source/_jsusecases/create-string-from-character-code.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-23\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode\nreference: String.fromCharCode\ncategory: strings\n---\n\n```javascript\nString.fromCharCode(67, 111, 111, 108, 46);\n```\n\nCool. \n"
},
{
"path": "source/_jsusecases/decode-url.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-18\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent\nreference: decodeURIComponent\nrelated: encode-url\ncategory: URL\n---\n\n```javascript\nconst search = \"hello%20world%3F\";\n\ndecodeURIComponent(search);\n```\n\n\nhello world?\n \n"
},
{
"path": "source/_jsusecases/decrement-a-variable.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-27\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators\nreference: Arithmetic operators\nrelated: increment-a-variable\ncategory: numbers\n---\n\n```javascript\nlet limit = 10;\nlimit--;\nconsole.log(limit);\n```\n\n9 \n"
},
{
"path": "source/_jsusecases/define-a-class.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-18\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\nreference: Classes\ncategory: syntax\n---\n\n```javascript\nclass Pencil {\n constructor(price) {\n this.price = price;\n }\n\n isExpensive() {\n return this.price >= 10;\n }\n}\n\n//usage\nconst bic = new Pencil(3);\nbic.isExpensive();\n```\n\nfalse \n"
},
{
"path": "source/_jsusecases/define-a-function-with-default-parameter.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-18\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters\nreference: Default parameters\ncategory: syntax\n---\n\n```javascript\nfunction greetUser(name = \"user\") {\n return `Welcome ${name} to code to go!`;\n}\n\nlet result = greetUser();\n\nconsole.log(result);\n```\n\nWelcome user to code to go! \n"
},
{
"path": "source/_jsusecases/define-variable.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-27\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let\nreference: let\ncategory: syntax\n---\n\n```javascript\n// Variables that can be re-assigned\nlet counter = 0;\ncounter += 1;\n\n// Variables that cannot be re-assigned\nconst ageLimit = 18;\n```\n"
},
{
"path": "source/_jsusecases/delete-item-from-array.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-23\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice\nreference: Array.splice\ncategory: arrays\n---\n\n```javascript\nconst apps = [\"phone\", \"calculator\", \"codetogo\", \"clock\"];\n\napps.splice(2, 1);\n\nconsole.log(apps);\n```\n\n[\"phone\", \"calculator\", \"clock\"] \n"
},
{
"path": "source/_jsusecases/destructure-from-array.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring\nreference: Array destructuring\nrelated: destructure-from-object,destructure-with-default-value\ncategory: syntax\n---\n\n```javascript\nconst [lat, lng] = [52.369661, 4.897243];\n\nconsole.log(lat, lng);\n```\n\n\n52.369661\n4.897243\n \n"
},
{
"path": "source/_jsusecases/destructure-from-object.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring\nreference: Object destructuring\nrelated: destructure-from-array,destructure-with-default-value\ncategory: syntax\n---\n\n```javascript\nconst { lat, lng } = {\n lat: 52.369661,\n lng: 4.897243,\n elevation: -2\n};\n\nconsole.log(lat, lng);\n```\n\n\n52.369661\n4.897243\n \n"
},
{
"path": "source/_jsusecases/destructure-with-default-value.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-23\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring\nreference: Array destructuring\nrelated: destructure-from-array,destructure-from-object\ncategory: syntax\n---\n\n```javascript\nconst { id, active = true } = {\n id: 10,\n name: \"John\"\n};\n\nconsole.log(id, active);\n```\n\n\n10\ntrue\n \n"
},
{
"path": "source/_jsusecases/empty-array.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length\nreference: Array.length\ncategory: arrays\n---\n\n```javascript\nconst apps = [\"phone\", \"calculator\", \"clock\"];\n\napps.length = 0;\n\nconsole.log(apps);\n```\n\n[] \n"
},
{
"path": "source/_jsusecases/encode-url.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-18\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent\nreference: encodeURIComponent\nrelated: decode-url\ncategory: URL\n---\n\n```javascript\nconst query = encodeURIComponent(\"hello world?\");\n\n//safe to add to URL\nconst url = `https://google.com/search?q=${query}`;\n```\n\n\nhttps://google.com/search?q=hello%20world%3F \n \n"
},
{
"path": "source/_jsusecases/fetch-XML.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-26\nlink: https://learnjavascript.online/topics/fetch.html?utm_source=codetogo.io\nreference_website: Learn JavaScript\nreference: Fetch API use cases\nrelated: async-await-fetch\ncategory: JSON\nextra: https://learnjavascript.online/topics/fetch.html?utm_source=codetogo.io\n---\n\n```javascript\nfetch(\"https://codetogo.io/api/users.xml\")\n .then(response => response.text())\n .then(data => {\n const parser = new DOMParser();\n const xml = parser.parseFromString(data, \"application/xml\");\n console.log(xml);\n })\n .catch(console.error);\n```\n\n\n<users>\n <user>\n <id>1</id>\n <name>Alex</name>\n </user>\n <user>\n <id>2</id>\n <name>Sam</name>\n </user>\n</users>\n \n"
},
{
"path": "source/_jsusecases/fetch-json.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-13\nlink: https://learnjavascript.online/topics/fetch.html?utm_source=codetogo.io\nreference_website: Learn JavaScript\nreference: Fetch API use cases\nrelated: async-await-fetch\ncategory: JSON\n---\n\n```javascript\nfetch(\"https://codetogo.io/api/users.json\")\n .then(response => response.json())\n .then(data => {\n console.log(data);\n })\n .catch(console.error);\n```\n\n\n[{\n id: 1,\n name: \"Sam\"\n}, {\n id: 2,\n name: \"Alex\"\n}]\n \n"
},
{
"path": "source/_jsusecases/fetch-post-json.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-13\nlink: https://learnjavascript.online/topics/fetch.html?utm_source=codetogo.io\nreference_website: Learn JavaScript\nreference: Fetch API use cases\nrelated: fetch-json\ncategory: JSON\nextra: https://learnjavascript.online/topics/fetch.html?utm_source=codetogo.io\n---\n\n```javascript\nfetch(\"https://codetogo.io/api/users.json\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\"\n },\n body: JSON.stringify({\n key1: \"value1\"\n })\n})\n .then(response => response.json())\n .then(data => {\n console.log(data);\n })\n .catch(console.error);\n```\n\n\n[{\n id: 1,\n name: \"Sam\"\n}, {\n id: 2,\n name: \"Alex\"\n}]\n \n"
},
{
"path": "source/_jsusecases/filter-objects-in-array.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-18\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter\nreference: Array.filter\ncategory: arrays\n---\n\n```javascript\nconst friends = [\n { name: \"Abby\", age: 22 },\n { name: \"Boby\", age: 16 },\n { name: \"Coel\", age: 20 },\n { name: \"Dany\", age: 15 }\n];\n\n//who can drink?\nfriends.filter(friend => friend.age >= 18);\n```\n\n\n[\n { name: 'Abby', age: 22 },\n { name: 'Coel', age: 20 },\n]\n \n"
},
{
"path": "source/_jsusecases/find-an-element-from-the-DOM.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-11\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector\nreference: Document.querySelector\nrelated: find-element-by-id,find-element-by-class,find-multiple-DOM-elements\ncategory: DOM\n---\n\n```html\n
\n\n
\n```\n\n```javascript\nconst box = document.querySelector(\"#box\");\n\nconst title = document.querySelector(\".title\");\n```\n"
},
{
"path": "source/_jsusecases/find-element-by-class.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-11\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector\nreference: Document.querySelector\nrelated: find-element-by-id,find-multiple-DOM-elements,find-an-element-from-the-DOM\ncategory: DOM\n---\n\n```html\n
\n```\n\n```javascript\nconst element = document.querySelector(\".box\");\n```\n"
},
{
"path": "source/_jsusecases/find-element-by-id.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-11\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById\nreference: Document.getElementById\nrelated: find-element-by-class,find-multiple-DOM-elements,find-an-element-from-the-DOM\ncategory: DOM\n---\n\n```html\n
\n```\n\n```javascript\nconst element = document.getElementById(\"box\");\n// OR\nconst alt = documnet.querySelector(\"#box\");\n```\n"
},
{
"path": "source/_jsusecases/find-index-of-element-in-array.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-29\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf\nreference: Array.indexOf\ncategory: arrays\n---\n\n```javascript\nconst colors = [\"red\", \"green\", \"blue\"];\ncolors.indexOf(\"green\");\n```\n\n1 \n"
},
{
"path": "source/_jsusecases/find-multiple-DOM-elements.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-11\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll\nreference: Document.querySelectorAll\nrelated: find-element-by-id,find-element-by-class,find-an-element-from-the-DOM\ncategory: DOM\n---\n\n```html\n
\n\n
\n```\n\n```javascript\nconst elements = document.querySelectorAll(\".boxes\");\n```\n"
},
{
"path": "source/_jsusecases/find-next-element.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-26\nlink: https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling\nreference: nextElementSibling\nrelated: find-previous-element\ncategory: DOM\n---\n\n```html\n
\nNext element
\n```\n\n```javascript\nconst box = document.querySelector(\"#box1\");\nconst next = box.nextElementSibling;\n```\n\n<div>Next element</div> \n"
},
{
"path": "source/_jsusecases/find-previous-element.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-11\nlink: https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling\nreference: previousElementSibling\nrelated: find-next-element\ncategory: DOM\n---\n\n```html\n
\n
\n```\n\n```javascript\nconst box2 = document.querySelector(\"#box2\");\nconst box1 = box2.previousElementSibling;\n```\n"
},
{
"path": "source/_jsusecases/find-root-of-positive-number.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-26\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow\nreference: Math.pow\ncategory: numbers\n---\n\n```javascript\nconst number = 16;\n\nconst result = Math.pow(number, 1 / 2);\n```\n\n4 \n"
},
{
"path": "source/_jsusecases/flatten-a-nested-array.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-02-21\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array\nreference: Array\ncategory: arrays\n---\n\n```javascript\nconst nestedArray = [1, [2], [[3], 4], 5];\n\nconst flatten = nestedArray =>\n nestedArray.reduce(\n (flat, item) => flat.concat(Array.isArray(item) ? flatten(item) : [item]),\n []\n );\n\nflatten(nestedArray);\n```\n\n[1, 2, 3, 4, 5 ] \n"
},
{
"path": "source/_jsusecases/format-currency-as-per-locale.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-04\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString\nreference: Number.toLocaleString\ncategory: numbers\n---\n\n```javascript\nconst amount = 1999.9;\nconst options = {\n style: \"currency\",\n currency: \"USD\"\n};\n\namount.toLocaleString(\"en-US\", options);\n```\n\n$1,999.90 \n"
},
{
"path": "source/_jsusecases/format-date.md",
"content": "---\nextends: _layouts.usecase\ndate: 2020-08-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat\nreference: Intl.DateTimeFormat\nrelated: get-current-day-name,get-current-month-name\ncategory: datetime\n---\n\n```javascript\nconst date = new Date();\n\n// remove an option to hide it from the output\nconst options = {\n weekday: \"long\", // or: \"short\", \"numeric\"\n month: \"long\", //or: \"short\", \"numeric\"\n day: \"numeric\",\n year: \"numeric\",\n day: \"numeric\",\n hour: \"numeric\",\n minute: \"numeric\",\n second: \"numeric\"\n};\n\n// replace \"en-US\" with undefined to use the user's locale\nnew Intl.DateTimeFormat(\"en-US\", options).format(date);\n```\n\n\nSunday, August 16, 2020, 7:34:44 PM\n \n"
},
{
"path": "source/_jsusecases/generate-random-string.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-12\ncategory: strings\n---\n\n```javascript\nconst length = 20;\n\n//should NOT be used for cryptography\nconst randomString = [...Array(length)]\n .map(() => Math.random().toString(36)[5])\n .join(\"\");\n```\n\nga6fr8rf7uan1yn2adqy \n"
},
{
"path": "source/_jsusecases/get-CSS-custom-property.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-12\nlink: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue\nreference: Style.getPropertyValue\nrelated: set-CSS-custom-property\ncategory: DOM\n---\n\n```css\n:root {\n --primary-color: #ececec;\n}\n```\n\n```javascript\nconst color = getComputedStyle(document.body).getPropertyValue(\n \"--primary-color\"\n);\n```\n\n#ECECEC \n"
},
{
"path": "source/_jsusecases/get-CSS-property.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-07-29\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle\nreference: Window.getComputedStyle\nrelated: change-CSS-property\ncategory: DOM\n---\n\n```css\n#box {\n padding: 15px;\n}\n```\n\n```html\n
\n```\n\n```javascript\nconst div = document.querySelector(\"#box\");\n\nconst padding = getComputedStyle(div).padding;\n```\n\n15px \n"
},
{
"path": "source/_jsusecases/get-count-of-DOM-elements.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-09\nlink: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/length\nreference: NodeList.length\ncategory: DOM\n---\n\n```html\n
\n
\n```\n\n```javascript\nconst elements = document.querySelectorAll(\".title\");\n\nconst length = elements.length;\n```\n\n2 \n"
},
{
"path": "source/_jsusecases/get-count-of-character-in-string.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-02-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split\nreference: String.split\ncategory: strings\n---\n\n```javascript\nconst name = \"Jad Joubran\";\n\nconst countJ = name.split(\"J\").length - 1;\n```\n\n2 \n"
},
{
"path": "source/_jsusecases/get-count-of-duplicate-items-in-array.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-01-08\ncategory: arrays\n---\n\n```javascript\nconst chars = [\"a\", \"b\", \"c\", \"a\", \"a\", \"c\"];\nlet result = {};\n\nresult = chars.reduce((acc, item) => {\n acc[item] = acc[item] ? ++acc[item] : 1;\n return acc;\n}, result);\n```\n\n\n{\n a: 3,\n b: 1,\n c: 2\n}\n \n"
},
{
"path": "source/_jsusecases/get-current-day-name.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-29\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat\nreference: Intl.DateTimeFormat\nrelated: get-current-short-day-name,get-current-month-name\ncategory: datetime\n---\n\n```javascript\nconst date = Date.now();\n\nconst options = { weekday: \"long\" };\n\nnew Intl.DateTimeFormat(\"en-US\", options).format(date);\n```\n\n\nFriday\n \n"
},
{
"path": "source/_jsusecases/get-current-month-name.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-29\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat\nreference: Intl.DateTimeFormat\nrelated: get-current-short-month-name,get-current-day-name\ncategory: datetime\n---\n\n```javascript\nconst date = Date.now();\n\nconst options = { month: \"long\" };\n\nnew Intl.DateTimeFormat(\"en-US\", options).format(date);\n```\n\n\nDecember\n \n"
},
{
"path": "source/_jsusecases/get-current-page-url.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Window/location\nreference: Window.location\ncategory: URL\n---\n\n```javascript\nwindow.location.href;\n```\n\nhttps://codetogo.io/how-to-get-current-page-url-in-javascript/ \n"
},
{
"path": "source/_jsusecases/get-current-short-day-name.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-01-04\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat\nreference: Intl.DateTimeFormat\nrelated: get-current-day-name,get-current-month-name\ncategory: datetime\n---\n\n```javascript\nconst date = Date.now();\n\nconst options = { weekday: \"short\" };\n\nnew Intl.DateTimeFormat(\"en-US\", options).format(date);\n```\n\n\nThu\n \n"
},
{
"path": "source/_jsusecases/get-current-short-month-name.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-01-04\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat\nreference: Intl.DateTimeFormat\nrelated: get-current-month-name,get-current-day-name\ncategory: datetime\n---\n\n```javascript\nconst date = Date.now();\n\nconst options = { month: \"short\" };\n\nnew Intl.DateTimeFormat(\"en-US\", options).format(date);\n```\n\n\nJan\n \n"
},
{
"path": "source/_jsusecases/get-current-timestamp-in-seconds.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-26\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now\nreference: Date.now\nrelated: get-current-timestamp\ncategory: datetime\n---\n\n```javascript\nconst timestamp = Math.floor(Date.now() / 1000);\n\nconsole.log(timestamp); //in seconds\n```\n\n1514300500 \n"
},
{
"path": "source/_jsusecases/get-current-timestamp.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-26\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now\nreference: Date.now\nrelated: get-current-timestamp-in-seconds\ncategory: datetime\n---\n\n```javascript\nconst timestamp = Date.now();\n\nconsole.log(timestamp); //in milliseconds\n```\n\n1514300333756 \n"
},
{
"path": "source/_jsusecases/get-current-year.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-01-04\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear\nreference: Date.getFullYear\nrelated: get-current-day-name,get-current-month-name\ncategory: datetime\n---\n\n```javascript\nconst date = new Date();\n\nconst year = date.getFullYear();\n```\n\n\n2018\n \n"
},
{
"path": "source/_jsusecases/get-data-attribute-from-element.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-07-28\nlink: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes\nreference: dataset\ncategory: DOM\n---\n\n```html\n
\n```\n\n```javascript\nconst box = document.querySelector(\"#box\");\nconst userId = box.dataset.userId;\n```\n\n123 \n"
},
{
"path": "source/_jsusecases/get-division-remainder.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-08\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_()\nreference: Remainder\ncategory: numbers\n---\n\n```javascript\nconst even = 8 % 2;\nconst odd = 5 % 2;\n\nconsole.log({ even, odd });\n```\n\n{\n even: 0,\n odd: 1\n} \n"
},
{
"path": "source/_jsusecases/get-extension-from-input-type-file.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-12-26\ncategory: functions\n---\n\n```html\nindex.html \n"
},
{
"path": "source/_jsusecases/get-first-character-of-string.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-12-26\nrelated: get-last-character-of-string\ncategory: strings\n---\n\n```javascript\nconst name = \"William moore\";\n\nname[0];\n```\n\nW \n"
},
{
"path": "source/_jsusecases/get-function-arguments-as-array.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-19\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator\nreference: Spread operator\ncategory: functions\n---\n\n```javascript\nfunction log(...msgs) {\n //msgs is now an array\n console.log(`Received ${msgs.length} messages`);\n}\n\nlog(\"code\", \"to\", \"go\");\nlog(\"code\", \"to\", \"go\", \"is\", \"cool\");\n```\n\n\nReceived 3 messages\nReceived 5 messages\n \n"
},
{
"path": "source/_jsusecases/get-human-friendly-date-difference.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-27\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat\nreference: Intl.RelativeTimeFormat\nrelated: get-minutes-ago,create-date-in-RFC3339-format\ncategory: datetime\n---\n\n```javascript\nconst formatter = new Intl.RelativeTimeFormat(\"en\");\n\nconst t1 = 1709042520000;\nconst t2 = 1709042400000;\n\n// Date diff & convert from ms to minutes\nconst diff = (t2 - t1) / 60 / 1000;\n\nformatter.format(diff, \"minutes\");\n```\n\n2 minutes ago \n"
},
{
"path": "source/_jsusecases/get-item-from-localstorage.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-19\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\nreference: Window.localStorage\nrelated: add-item-to-localstorage\ncategory: storage\n---\n\n```javascript\nlocalStorage.getItem(\"name\");\n```\n"
},
{
"path": "source/_jsusecases/get-item-from-sessionstorage.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-21\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage\nreference: Window.sessionStorage\nrelated: add-item-to-sessionstorage\ncategory: storage\n---\n\n```javascript\nsessionStorage.getItem(\"name\");\n```\n"
},
{
"path": "source/_jsusecases/get-keys-of-object.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys\nreference: Object.keys\ncategory: objects\n---\n\n```javascript\nconst person = {\n key: \"value\",\n first_name: \"John\",\n last_name: \"Doe\"\n};\n\nObject.keys(person);\n```\n\n['key', 'first_name', 'last_name'] \n"
},
{
"path": "source/_jsusecases/get-last-array-element.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-28\nlink: https://blog.learnjavascript.online/posts/javascript-at-method/\nreference: String.at()\nreference_website: Learn JavaScript Blog\ncategory: arrays\nrelated: get-last-character-of-string\n---\n\n```javascript\nconst apps = [\"phone\", \"calculator\", \"clock\"];\n\napps.at(-1);\n```\n\n\"clock\" \n"
},
{
"path": "source/_jsusecases/get-last-character-of-string.md",
"content": "---\nextends: _layouts.usecase\ndate: 2022-08-18\nlink: https://blog.learnjavascript.online/posts/javascript-at-method/\nreference: String.at()\nreference_website: Learn JavaScript Blog\nrelated: get-first-character-of-string,get-last-array-element\ncategory: strings\n---\n\n```javascript\nconst name = \"Lewis\";\n\nname.at(-1);\n```\n\ns \n"
},
{
"path": "source/_jsusecases/get-length-of-array.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-29\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length\nreference: Array.length\ncategory: arrays\n---\n\n```javascript\nconst apps = [\"phone\", \"calculator\", \"clock\"];\n\nconst count = apps.length;\n```\n\n3 \n"
},
{
"path": "source/_jsusecases/get-length-of-string.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-29\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length\nreference: String.length\ncategory: strings\n---\n\n```javascript\nconst name = \"Penny\";\n\nconsole.log(name.length);\n```\n\n\n5\n \n"
},
{
"path": "source/_jsusecases/get-minutes-ago.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-27\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat\nreference: Intl.RelativeTimeFormat\nrelated: get-human-friendly-date-difference,create-date-in-RFC3339-format\ncategory: datetime\n---\n\n```javascript\nconst formatter = new Intl.RelativeTimeFormat(\"en\", {\n // Change to \"short\" for min. (instead of minutes)\n style: \"long\"\n});\n\n// -5 can be the difference between 2 date objects\nformatter.format(-5, \"minutes\");\n```\n\n5 minutes ago \n"
},
{
"path": "source/_jsusecases/get-path-from-full-path.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-12-26\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf\nreference: String.lastIndexOf\nrelated: get-file-name-from-path\ncategory: strings\n---\n\n```javascript\nconst url = \"/Users/code/codetogo/index.html\";\n\nurl.substring(0, url.lastIndexOf(\"/\") + 1);\n```\n\n/Users/code/codetogo/ \n"
},
{
"path": "source/_jsusecases/get-port-from-url.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-04-28\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Location\nreference: Location.port\nrelated: get-current-page-url\ncategory: URL\n---\n\n```javascript\nwindow.location.port;\n```\n"
},
{
"path": "source/_jsusecases/get-random-element-from-array.md",
"content": "---\nextends: _layouts.usecase\ndate: 2022-08-18\nlink: https://blog.learnjavascript.online/posts/javascript-at-method/\nreference: String.at()\nreference_website: Learn JavaScript Blog\ncategory: arrays\n---\n\n```javascript\nconst names = [\"Sam\", \"Alex\", \"Charley\"];\n\nnames.at(Math.random() * names.length);\n```\n\n\na random element from the names array\n \n"
},
{
"path": "source/_jsusecases/get-random-hex-color.md",
"content": "---\nextends: _layouts.usecase\ndate: 2020-02-18\ncategory: numbers\n---\n\n```javascript\nconst hex = Math.floor(Math.random() * 0xffffff)\n .toString(16)\n .padStart(6, \"0\");\nconst color = `#${hex}`;\n\nconsole.log(color);\n```\n\n#a75d43 \n"
},
{
"path": "source/_jsusecases/get-random-number-between-two-numbers.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-01-08\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random\nreference: Math.random\ncategory: numbers\n---\n\n```javascript\nconst min = 0;\nconst max = 10;\nlet rand;\n\nrand = Math.floor(Math.random() * (max - min + 1)) + min;\n```\n\n\na random number between 0 and 10 inclusive\n \n"
},
{
"path": "source/_jsusecases/get-unique-values-from-object-array-property.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-06\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set\nreference: Set\ncategory: objects\nrelated: remove-duplicates-from-array\n---\n\n```javascript\nconst objects = [\n { id: 1, category: \"Cars\" },\n { id: 2, category: \"Cars\" },\n { id: 3, category: \"Smatphones\" },\n { id: 4, category: \"Cars\" },\n { id: 5, category: \"Tablet\" }\n];\n\nconst categories = [...new Set(objects.map(object => object.category))];\n```\n\n[\"Cars\", \"Smartphones\", \"Tablet\"] \n"
},
{
"path": "source/_jsusecases/get-url-search-params.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-04\nlink: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams\nreference: URLSearchParams\nrelated: set-url-search-params\ncategory: URL\n---\n\n```javascript\n//https://codetogo.io?lang=en\nconst url = new URL(document.location);\n\nconst lang = url.searchParams.get(\"lang\");\n```\n\nen \n"
},
{
"path": "source/_jsusecases/hide-element.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-11\nrelated: show-element\ncategory: DOM\n---\n\n```html\n
\n```\n\n```javascript\nconst element = document.querySelector(\"#box\");\n\nelement.style.display = \"none\";\n```\n"
},
{
"path": "source/_jsusecases/increment-a-variable.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-27\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators\nreference: Arithmetic operators\nrelated: decrement-a-variable\ncategory: syntax\n---\n\n```javascript\nlet counter = 0;\ncounter++;\nconsole.log(counter);\n```\n\n1 \n"
},
{
"path": "source/_jsusecases/interpolate.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-26\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals\nreference: Template literals\nrelated: write-a-multiline-string\ncategory: strings\n---\n\n```javascript\nconst name = \"Sam\";\n\nconsole.log(`Welcome ${name}.\nYou have ${2 * 5} new notifications!`);\n```\n\n\nWelcome Sam.\nYou have 10 new notifications!\n \n"
},
{
"path": "source/_jsusecases/listen-to-click-event.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-11-11\nlink: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener\nreference: EventTarget.addEventListener\nrelated: prevent-default-action-of-event\ncategory: DOM\n---\n\n```html\n
\n```\n\n```javascript\nconst element = document.querySelector(\"#box\");\n\nelement.addEventListener(\"click\", event => {\n console.log(\"Element clicked\");\n});\n```\n"
},
{
"path": "source/_jsusecases/listen-to-hover-event.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-26\nlink: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener\nreference: EventTarget.addEventListener\ncategory: DOM\n---\n\n```html\n
\n```\n\n```javascript\nconst element = document.querySelector(\"#box\");\n\nelement.addEventListener(\"mouseover\", event => {\n console.log(\"Mouse in (over)\");\n});\n\nelement.addEventListener(\"mouseout\", event => {\n console.log(\"Mouse out\");\n});\n```\n"
},
{
"path": "source/_jsusecases/listen-to-scroll-event.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-11-05\nlink: https://developer.mozilla.org/en-US/docs/Web/Events/scroll\ncategory: DOM\n---\n\n```javascript\nwindow.addEventListener(\"scroll\", event => {\n console.log(\"Window scrolled\", event);\n});\n```\n"
},
{
"path": "source/_jsusecases/loop-backwards-through-array.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-18\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse\nreference: Array.reverse\nrelated: loop-through-array\ncategory: arrays\n---\n\n```javascript\nconst people = [\"John\", \"Nicole\", \"Jad\"];\n\nfor (const person of people.reverse()) {\n console.log(person);\n}\n```\n\n\nJad\nNicole\nJohn\n \n"
},
{
"path": "source/_jsusecases/loop-through-array.md",
"content": "---\nextends: _layouts.usecase\ndate: 2020-02-22\nlink: https://blog.learnjavascript.online/posts/javascript-foreach-the-complete-guide/\nreference: JavaScript forEach\nreference_website: Learn JavaScript Blog\nrelated: loop-through-object\ncategory: arrays\n---\n\n```javascript\nconst people = [\"Sam\", \"Alex\", \"Charlie\"];\n\npeople.forEach(person => {\n console.log(person);\n});\n```\n\n\nSam\nAlex\nCharlie\n \n"
},
{
"path": "source/_jsusecases/loop-through-object.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-11-11\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values\nreference: Object.values\ncategory: objects\n---\n\n```javascript\nconst repository = {\n id: 1,\n language: \"javascript\",\n public: true\n};\n\nfor (const value of Object.values(repository)) {\n console.log(value);\n}\n```\n\n\n1\njavascript\ntrue\n \n"
},
{
"path": "source/_jsusecases/lowercase-a-string.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-11-11\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase\nreference: String.toLowerCase\nrelated: uppercase-a-string\ncategory: strings\n---\n\n```javascript\nconst text = \"Hello World\";\n\ntext.toLowerCase();\n```\n\nhello world \n"
},
{
"path": "source/_jsusecases/manually-trigger-event-on-element.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-11\nlink: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events\nreference: Events\ncategory: DOM\n---\n\n```html\n\n[\"41\", index: 10, input: \"My age is 41\"]\n41\n \n"
},
{
"path": "source/_jsusecases/open-url-in-new-tab.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-04-28\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Window/open\nreference: Window.open\ncategory: URL\n---\n\n```javascript\nwindow.open(\"https://example.com\");\n```\n"
},
{
"path": "source/_jsusecases/parse-JSON-string.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-01-11\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse\nreference: JSON.parse\nrelated: convert-JSON-to-string\ncategory: JSON\n---\n\n```javascript\nconst string = '{\"id\":1,\"name\":\"Leanne Graham\"}';\n\nJSON.parse(string);\n```\n\n\n{\n id: 1,\n name: \"Leanne Graham\"\n}\n \n"
},
{
"path": "source/_jsusecases/pause-audio.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-12\nlink: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause\nreference: HTMLMediaElement.pause\nrelated: play-audio,stop-audio\ncategory: DOM\n---\n\n```html\n\n \n \n```\n\n```javascript\nconst audio = document.querySelector(\"#audio\");\n\naudio.pause();\n```\n"
},
{
"path": "source/_jsusecases/pause-video.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-12\nlink: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause\nreference: HTMLMediaElement.pause\nrelated: play-video,stop-video\ncategory: DOM\n---\n\n```html\n\n \n \n```\n\n```javascript\nconst video = document.querySelector(\"#video\");\n\nvideo.pause();\n```\n"
},
{
"path": "source/_jsusecases/play-audio.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-12\nlink: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play\nreference: HTMLMediaElement.play\nrelated: pause-audio,stop-audio\ncategory: DOM\n---\n\n```html\n\n \n \n```\n\n```javascript\nconst audio = document.querySelector(\"#audio\");\n\naudio.play();\n```\n"
},
{
"path": "source/_jsusecases/play-video.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-12\nlink: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play\nreference: HTMLMediaElement.play\nrelated: pause-video,stop-video\ncategory: DOM\n---\n\n```html\n\n \n \n```\n\n```javascript\nconst video = document.querySelector(\"#video\");\n\nvideo.play();\n```\n"
},
{
"path": "source/_jsusecases/prevent-default-action-of-event.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault\nreference: Event.preventDefault\nrelated: listen-to-click-event\ncategory: DOM\n---\n\n```html\n
\n```\n\n```javascript\nconst element = document.querySelector(\"#box\");\n\nelement.addEventListener(\"click\", event => {\n event.preventDefault();\n //Default action prevented\n});\n```\n"
},
{
"path": "source/_jsusecases/redirect-to-another-page.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Window/location\nreference: Window.location\ncategory: URL\n---\n\n```javascript\nwindow.location.href = \"https://codetogo.io\";\n```\n"
},
{
"path": "source/_jsusecases/register-a-service-worker.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-12\nlink: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register\nreference: ServiceWorkerContainer.register\ncategory: PWA\n---\n\n```javascript\nif (\"serviceWorker\" in navigator) {\n window.addEventListener(\"load\", () => {\n navigator.serviceWorker\n .register(\"/sw.js\")\n .then(registration => console.log(registration))\n .catch(err => console.error(err));\n });\n}\n```\n"
},
{
"path": "source/_jsusecases/reload-page.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-11-11\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Location/reload\nreference: Location.reload\ncategory: URL\n---\n\n```javascript\nwindow.location.reload();\n```\n"
},
{
"path": "source/_jsusecases/remove-a-property-from-object.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete\nreference: delete\ncategory: objects\n---\n\n```javascript\nconst repository = {\n id: 1,\n language: \"javascript\",\n public: true\n};\n\ndelete repository.id;\n\nconsole.log(repository);\n```\n\n\n{\n language: 'javascript',\n public: true\n}\n \n"
},
{
"path": "source/_jsusecases/remove-class-from-element.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-11\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList\nreference: Element.classList\nrelated: toggle-class-of-element,add-class-to-element,replace-a-class-of-element\ncategory: DOM\n---\n\n```html\n
\n```\n\n```javascript\nconst element = document.querySelector(\"#box\");\n\nelement.classList.remove(\"class-name\");\n```\n"
},
{
"path": "source/_jsusecases/remove-duplicates-from-array.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-06\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set\nreference: Set\ncategory: arrays\nrelated: get-unique-values-from-object-array-property\n---\n\n```javascript\nconst items = [\"Cars\", \"Cars\", \"Smartphone\", \"Cars\", \"Tablet\"];\n\nconst uniqueItems = [...new Set(items)];\n```\n\n[\"Cars\", \"Smartphone\", \"Tablet\"] \n"
},
{
"path": "source/_jsusecases/remove-element-from-DOM.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-10\nlink: https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove\nreference: ChildNode.remove\ncategory: DOM\n---\n\n```html\n
\n```\n\n```javascript\nconst element = document.querySelector(\"#box\");\n\nelement.remove();\n```\n"
},
{
"path": "source/_jsusecases/remove-item-from-localstorage.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-19\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage\nreference: Window.localStorage\nrelated: add-item-to-localstorage\ncategory: storage\n---\n\n```javascript\nlocalStorage.removeItem(\"name\");\n```\n"
},
{
"path": "source/_jsusecases/remove-multiple-classes-from-element.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-09-22\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList\nreference: Element.classList\nrelated: remove-class-from-element\ncategory: DOM\n---\n\n```html\n
\n```\n\n```javascript\nconst element = document.querySelector(\"#box\");\n\nelement.classList.remove(\"active\", \"highlighted\");\n```\n\n<div id=\"box\"></div> \n"
},
{
"path": "source/_jsusecases/repeat-a-string.md",
"content": "---\nextends: _layouts.usecase\ndate: 2020-08-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat\nreference: String.repeat\ncategory: strings\n---\n\n```javascript\nconst string = \"Code\";\n\nstring.repeat(3);\n```\n\n\"CodeCodeCode\" \n"
},
{
"path": "source/_jsusecases/replace-a-class-of-element.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-11\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList\nreference: Element.classList\nrelated: remove-class-from-element,toggle-class-of-element,add-class-to-element\ncategory: DOM\n---\n\n```html\n
\n```\n\n```javascript\nconst element = document.querySelector(\"#box\");\n\nelement.classList.replace(\"old-class-name\", \"new-class-name\");\n```\n"
},
{
"path": "source/_jsusecases/replace-all-occurrences-of-string.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace\nreference: String.replace\nrelated: replace-spaces-with-dashes\ncategory: strings\n---\n\n```javascript\nconst text = \"We are outside. We are waiting.\";\n\ntext.replace(/We/g, \"You\");\n```\n\nYou are outside. You are waiting. \n"
},
{
"path": "source/_jsusecases/replace-element-content-HTML.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-11\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML\nreference: Element.innerHTML\ncategory: DOM\n---\n\n```html\n
\n```\n\n```javascript\nconst element = document.querySelector(\"#box\");\n\nelement.innerHTML = `New Content
`;\n```\n"
},
{
"path": "source/_jsusecases/replace-spaces-with-dashes.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace\nreference: String.replace\nrelated: replace-all-occurrences-of-string\ncategory: strings\n---\n\n```javascript\nconst text = \"codetogo saved me tons of time\";\n\ntext.replace(/ /g, \"-\");\n```\n\ncodetogo-saved-me-tons-of-time \n"
},
{
"path": "source/_jsusecases/reverse-elements-of-array.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-19\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse\nreference: Array.reverse\ncategory: arrays\n---\n\n```javascript\nconst data = [1, 2, 3, 4, 5];\n\nconst reversed = data.reverse();\n```\n\n[5, 4, 3, 2, 1] \n"
},
{
"path": "source/_jsusecases/round-a-number.md",
"content": "---\nextends: _layouts.usecase\ndate: 2020-02-18\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round\nreference: Math.round\ncategory: numbers\n---\n\n```javascript\nconst number = 4.7138;\n\nMath.round(number);\n```\n\n5 \n"
},
{
"path": "source/_jsusecases/set-CSS-custom-property.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-12\nlink: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty\nreference: Style.setProperty\nrelated: get-CSS-custom-property\ncategory: DOM\n---\n\n```css\n:root {\n --primary-color: #ececec;\n}\n```\n\n```javascript\ndocument.documentElement.style.setProperty(\"--primary-color\", \"#000000\");\n```\n"
},
{
"path": "source/_jsusecases/set-interval.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-11-05\nlink: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval\nreference: Window.setInterval\ncategory: functions\n---\n\n```javascript\nsetInterval(() => {\n console.log(\"I am called every 5 seconds\");\n}, 5000);\n```\n\nI am called every 5 seconds \n"
},
{
"path": "source/_jsusecases/set-timeout.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-11-05\nlink: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout\nreference: Window.setTimeout\ncategory: functions\n---\n\n```javascript\nsetTimeout(() => {\n console.log(\"I am called after 5 seconds\");\n}, 5000);\n```\n\nI am called after 5 seconds \n"
},
{
"path": "source/_jsusecases/set-url-search-params.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-04\nlink: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams\nreference: URLSearchParams\nrelated: get-url-search-params\ncategory: URL\n---\n\n```javascript\nconst url = new URL(document.location);\n\nurl.searchParams.set(\"lang\", \"en\");\n\nconsole.log(url.href);\n```\n\nhttps://codetogo.io/how-to-set-url-search-params-in-javascript/?lang=en \n"
},
{
"path": "source/_jsusecases/show-element.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-11\nrelated: hide-element\ncategory: DOM\n---\n\n```html\n
\n```\n\n```css\n#box {\n display: none;\n}\n```\n\n```javascript\nconst element = document.querySelector(\"#box\");\n\nelement.style.display = \"block\";\n```\n"
},
{
"path": "source/_jsusecases/skip-values-from-array-destructuring.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring\nreference: Skip values from Array destructuring\nrelated: destructure-from-object,destructure-with-default-value\ncategory: syntax\n---\n\n```javascript\nconst [, , elevation] = [52.369661, 4.897243, 3];\n\nconsole.log(elevation);\n```\n\n\n3\n \n"
},
{
"path": "source/_jsusecases/smooth-scroll.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-04-28\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView\nreference: Element.scrollIntoView\ncategory: DOM\n---\n\n```html\n
\n```\n\n```javascript\nconst element = document.querySelector(\"#box\");\n\nelement.scrollIntoView({ behavior: \"smooth\" });\n```\n"
},
{
"path": "source/_jsusecases/sort-array-in-ascending-order.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-23\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort\nreference: Array.sort\nrelated: sort-array-in-descending-order\ncategory: arrays\n---\n\n```javascript\nconst numbers = [10, 20, 30, 100, 5, 1, 20];\n\nnumbers.sort((a, b) => a - b);\n\nconsole.log(numbers);\n```\n\n[1, 5, 10, 20, 20, 30, 100] \n"
},
{
"path": "source/_jsusecases/sort-array-in-descending-order.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-23\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort\nreference: Array.sort\nrelated: sort-array-in-ascending-order\ncategory: arrays\n---\n\n```javascript\nconst numbers = [10, 20, 30, 100, 5, 1, 20];\n\nnumbers.sort((a, b) => b - a);\n\nconsole.log(numbers);\n```\n\n[100, 30, 20, 20, 10, 5, 1] \n"
},
{
"path": "source/_jsusecases/sort-array-of-objects-in-ascending-order.md",
"content": "---\nextends: _layouts.usecase\ndate: 2020-08-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort\nreference: Array.sort\nrelated: sort-array-of-objects-in-descending-order\ncategory: arrays\n---\n\n```javascript\nconst users = [\n { name: \"user1\", age: 28 },\n { name: \"user2\", age: 21 },\n { name: \"user3\", age: 38 },\n { name: \"user4\", age: 18 }\n];\n\nusers.sort((user1, user2) => user1.age - user2.age);\n\nconsole.log(users);\n```\n\n[\n { name: \"user4\", age: 18 },\n { name: \"user2\", age: 21 },\n { name: \"user1\", age: 28 },\n { name: \"user3\", age: 38 }\n] \n"
},
{
"path": "source/_jsusecases/sort-array-of-objects-in-descending-order.md",
"content": "---\nextends: _layouts.usecase\ndate: 2020-08-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort\nreference: Array.sort\nrelated: sort-array-of-objects-in-ascending-order\ncategory: arrays\n---\n\n```javascript\nconst users = [\n { name: \"user1\", age: 28 },\n { name: \"user2\", age: 21 },\n { name: \"user3\", age: 38 },\n { name: \"user4\", age: 18 }\n];\n\nusers.sort((user1, user2) => user2.age - user1.age);\n\nconsole.log(users);\n```\n\n[\n { name: \"user3\", age: 38 },\n { name: \"user1\", age: 28 },\n { name: \"user2\", age: 21 },\n { name: \"user4\", age: 18 }\n] \n"
},
{
"path": "source/_jsusecases/split-comma-separated-string.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-24\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split\nreference: String.split\nrelated: convert-array-to-comma-separated-string\ncategory: strings\n---\n\n```javascript\nconst csv = \"Eat,Sleep,Code,Repeat\";\n\ncsv.split(\",\");\n```\n\n['Eat', 'Sleep', 'Code', 'Repeat'] \n"
},
{
"path": "source/_jsusecases/split-string-into-array-of-characters.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-16\ncategory: arrays\n---\n\n```javascript\nconst arrayOfChars = [...\"hello world\"];\n```\n\n\n['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']\n \n"
},
{
"path": "source/_jsusecases/stop-audio.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-26\nlink: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime\nreference: HTMLMediaElement.pause\nrelated: play-audio,pause-audio\ncategory: DOM\n---\n\n```html\n\n \n```\n\n```javascript\nconst audio = document.querySelector(\"audio\");\n\n// Stop = pause + reset the playhead\naudio.pause();\naudio.currentTime = 0;\n```\n"
},
{
"path": "source/_jsusecases/stop-video.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-26\nlink: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime\nreference: HTMLMediaElement.currentTime\nrelated: play-video,pause-video\ncategory: DOM\n---\n\n```html\n\n \n```\n\n```javascript\nconst video = document.querySelector(\"#video\");\n\n// Stop = pause + reset the playhead\nvideo.pause();\nvideo.currentTime = 0;\n```\n"
},
{
"path": "source/_jsusecases/sum-items-of-array.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-01-23\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce\nreference: Array.reduce\ncategory: arrays\n---\n\n```javascript\nconst calories = [50, 100, 200];\n\n//sum\ncalories.reduce((total, current) => total + current, 0);\n```\n\n350 \n"
},
{
"path": "source/_jsusecases/swap-variables.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-27\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring\nreference: Array destructuring\ncategory: syntax\n---\n\n```javascript\nlet firstName = \"Doe\";\nlet lastName = \"Sam\";\n\n// Swap\n[firstName, lastName] = [lastName, firstName];\n\nconsole.log(firstName, lastName);\n```\n\nSam Doe \n"
},
{
"path": "source/_jsusecases/time-a-function.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-03-14\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Performance/now\nreference: performance.now\ncategory: performance\n---\n\n```javascript\nfunction foo() {\n // do stuff\n}\n\nconst start = performance.now();\nfoo();\nconst end = performance.now();\n\nconsole.log(`Call to ${foo.name} took ${end - start} ms.`);\n```\n\nCall to foo took x ms \n"
},
{
"path": "source/_jsusecases/toggle-class-of-element.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-09-22\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList\nreference: Element.classList\ncategory: DOM\n---\n\n```html\n
\n```\n\n```javascript\nconst element = document.querySelector(\"#box\");\n\nelement.classList.toggle(\"highlighted\");\n```\n"
},
{
"path": "source/_jsusecases/try-catch.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-04-28\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch\nreference: try...catch\ncategory: syntax\n---\n\n```javascript\ntry {\n potentialFail();\n} catch (error) {\n console.log(error);\n}\n```\n\nReferenceError: potentialFail is not defined \n"
},
{
"path": "source/_jsusecases/update-array-immutably.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-28\nlink: https://web.dev/blog/array-with?hl=en\nreference: Array.with\nreference_website: web.dev\ncategory: arrays\n---\n\n```javascript\nconst names = [\"Alex\", \"Sam\", \"Blane\"];\n\nconst newNames = names.with(1, \"Sammy\");\n// names remains unmodified\nconsole.log(newNames);\n```\n\n[\"Alex\", \"Sammy\", \"Blane\"] \n"
},
{
"path": "source/_jsusecases/uppercase-a-string.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-11-11\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase\nreference: String.toUpperCase\nrelated: lowercase-a-string\ncategory: strings\n---\n\n```javascript\nconst text = \"Hello World\";\n\ntext.toUpperCase();\n```\n\nHELLO WORLD \n"
},
{
"path": "source/_jsusecases/uppercase-every-word.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-12-26\ncategory: strings\n---\n\n```javascript\nlet string = \"code to go is AWESOME\";\nconst pattern = /([^\\W_]+[^\\s]*) */g;\n\nstring.replace(pattern, word => {\n const first = word[0].toUpperCase();\n const rest = word.substring(1).toLowerCase();\n return first + rest;\n});\n```\n\n\nCode To Go Is Awesome\n \n"
},
{
"path": "source/_jsusecases/uppercase-first-letter.md",
"content": "---\nextends: _layouts.usecase\ndate: 2018-12-26\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase\nreference: String.toUpperCase\ncategory: strings\n---\n\n```javascript\nconst name = \"micha\";\n\nconst upperFirst = name[0].toUpperCase() + name.substring(1);\n```\n\nMicha \n"
},
{
"path": "source/_jsusecases/validate-email.md",
"content": "---\nextends: _layouts.usecase\ndate: 2017-12-16\ncategory: regex\n---\n\n```javascript\nconst pattern = /\\S+@\\S+\\.\\S+/;\n\npattern.test(\"john@gmail.com\");\n```\n\ntrue \n"
},
{
"path": "source/_jsusecases/wait-in-async-await-functions.md",
"content": "---\nextends: _layouts.usecase\ndate: 2019-04-11\nlink: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise\nreference: new Promise(executor)\nrelated: create-a-promise\ncategory: Promise\nauthor: \"Marvin Heilemann\"\n---\n\n```javascript\nconst timer = ms => new Promise(r => setTimeout(r, ms));\n\nasync function doSomething() {\n console.log(\"Start\");\n await timer(2000);\n console.log(\"Stop\");\n}\n\ndoSomething();\n```\n\n\nStart\nStop\n \n"
},
{
"path": "source/_jsusecases/write-a-multiline-string.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-26\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals\nreference: Template literals\nrelated: interpolate\ncategory: strings\n---\n\n```javascript\nconst text = `Using the backtick character,\nyou can define a string that\nspans multiple lines.`;\n```\n"
},
{
"path": "source/_jsusecases/write-an-arrow-function.md",
"content": "---\nextends: _layouts.usecase\ndate: 2020-08-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\nreference: Arrow functions\ncategory: functions\n---\n\n```javascript\nconst greetUser = () => {\n return \"Welcome to code to go!\";\n};\n\nlet result = greetUser();\n\nconsole.log(result);\n```\n\nWelcome to code to go! \n"
},
{
"path": "source/_layouts/master.blade.php",
"content": "\n\n\n {{isset($title) ? \"$title | Code to go\" : \"Code to go\"}} \n\n @if (isset($question))\n @include('_partials.head', ['question' => $question, 'reference' => $reference])\n @else\n @include('_partials.head')\n @endif\n\n\n\n @if (isset($is_landing))\n @include('_partials.header')\n @else\n @include('_partials.header_inner')\n @endif\n\n @yield('body')\n\n @include('_partials.footer')\n\n @include('_partials.scripts')\n\n\n"
},
{
"path": "source/_layouts/usecase.blade.php",
"content": "@extends('_layouts/master', [\n 'title' => $page->question(),\n 'question' => $page->question(),\n 'reference' => $page->reference,\n])\n\ngetUrl().\"/\";\n?>\n\n@section('body')\n \n\n setTimestamp($page->date);\n ?>\n
\n
{{$page->question()}} \n
\n @if ($page->category)\n
{{ucfirst($page->category)}}
\n @endif\n
By {{$page->author ? $page->author : \"Jad Joubran\"}} · \n
format('c')}}\">\n Last updated {{$date->format('M d, Y')}}\n \n
\n\n
\n
\n @yield('content')\n
\n
format('c')}}\">\n {{$date->format('M d, Y')}}\n
1
\n
{{$page->author ? $page->author : \"Jad Joubran\"}} \n
See answer \n
\n
\n\n
\n 1 \n
{{$page->author ? $page->author : \"Jad Joubran\"}} \n \n\n @if ($page->link)\n
\n @endif\n
\n {!! $page->learnbtn !!}\n
\n
\n @include('_partials/share')\n @include('_partials/related')\n
\n \n \n"
},
{
"path": "source/_partials/header_inner.blade.php",
"content": "\n \n \n"
},
{
"path": "source/_partials/logosvg.blade.php",
"content": "Code to go logo Created using Figma Use Cases \nContribute \n"
},
{
"path": "source/_partials/related.blade.php",
"content": "@if ($page->related)\n\n@endif\n"
},
{
"path": "source/_partials/scripts.blade.php",
"content": "\n\n\n\n\n"
},
{
"path": "source/_partials/share.blade.php",
"content": "getUrl();\n?>\n"
},
{
"path": "source/_reactusecases/destructure-props.md",
"content": "---\nextends: _layouts.usecase\ndate: 2020-01-25\nrelated: get-props\nreference: React props\ncategory: props\n---\n\n```jsx\nimport React from \"react\";\n\nfunction App(props) {\n const { theme, className } = props;\n console.log(theme, className);\n\n return App
;\n}\n```\n\n```jsx\n// Example\n\n\"dark\"\n\"container\"\n \n"
},
{
"path": "source/_reactusecases/export-a-component.md",
"content": "---\nextends: _layouts.usecase\ndate: 2020-03-18\nreference: React Component\ncategory: React\n---\n\n```jsx\nimport React from \"react\";\n\nexport default function Navbar() {\n return Navbar here
;\n}\n```\n"
},
{
"path": "source/_reactusecases/fetch-with-use-hook.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-29\nreference: React use hook\ncategory: state\n---\n\n```jsx\n// Must be on React 18.3 or React 19 (when released)\nimport { Suspense, use } from \"react\";\n\nconst promise = fetch(\n \"https://jsonplaceholder.typicode.com/todos/1\"\n).then(response => response.json());\n\nfunction Todo() {\n const todo = use(promise);\n\n return {todo.title} ;\n}\n\nfunction App() {\n return (\n Loading...}>\n \n );\n}\n```\n"
},
{
"path": "source/_reactusecases/get-React-version.md",
"content": "---\nextends: _layouts.usecase\ndate: 2020-01-28\nreference: React.version\ncategory: misc\n---\n\n```jsx\nimport React from \"react\";\n\nconst version = React.version;\nconsole.log(version);\n```\n\n\n16.12.0\n \n"
},
{
"path": "source/_reactusecases/get-props.md",
"content": "---\nextends: _layouts.usecase\ndate: 2020-01-25\nreference: React props\nrelated: destructure-props\ncategory: props\n---\n\n```jsx\nimport React from \"react\";\n\nfunction App(props) {\n console.log(props.theme);\n console.log(props.className);\n\n return App
;\n}\n```\n\n```jsx\n// Example\n\n\"dark\"\n\"container\"\n \n"
},
{
"path": "source/_reactusecases/listen-to-click-event.md",
"content": "---\nextends: _layouts.usecase\ndate: 2020-01-28\nreference: onClick\ncategory: events\n---\n\n```jsx\nimport React from \"react\";\n\nfunction Button() {\n function handleButtonClick() {\n console.log(\"Button clicked!\");\n }\n\n return Click me ;\n}\n```\n"
},
{
"path": "source/_reactusecases/listen-to-keydown-event.md",
"content": "---\nextends: _layouts.usecase\ndate: 2020-01-28\nreference: onKeyDown\ncategory: events\n---\n\n```jsx\nimport React from \"react\";\n\nfunction Input() {\n function handleInputKeyDown(event) {\n console.log(event.target.value);\n }\n\n return
\n```\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\n\nfunction App() {\n return Hello World! ;\n}\n\nconst root = document.querySelector(\"#root\");\n\nrender(\n<h1>Hello World!</h1>\n \n"
},
{
"path": "source/_reactusecases/use-fragments.md",
"content": "---\nextends: _layouts.usecase\ndate: 2020-03-18\nreference: React.Fragment\ncategory: React\n---\n\n```jsx\nimport React from \"react\";\n\nfunction App() {\n return (\n <>\n First element
\n Second element
\n \n );\n}\n```\n"
},
{
"path": "source/_reactusecases/use-state-with-hooks.md",
"content": "---\nextends: _layouts.usecase\ndate: 2024-02-13\nreference: React useState hook\ncategory: state\n---\n\n```jsx\nimport { useState } from \"react\";\n\nfunction Counter() {\n const [count, setCount] = useState(0);\n\n function handleClick() {\n setCount(count => count + 1);\n }\n\n return (\n <>\n {count} times \n Add 1 \n \n );\n}\n```\n"
},
{
"path": "source/_reactusecases/write-a-class-component.md",
"content": "---\nextends: _layouts.usecase\ndate: 2020-01-28\nreference: Class component\ncategory: component\n---\n\n```jsx\nimport React from \"react\";\n\nclass MyComponent extends React.Component {\n constructor(props) {\n super(props);\n //\n }\n\n render() {\n return This is a class component ;\n }\n}\n```\n"
},
{
"path": "source/_reactusecases/write-a-functional-component.md",
"content": "---\nextends: _layouts.usecase\ndate: 2020-01-28\nreference: Functional component\ncategory: component\n---\n\n```jsx\nimport React from \"react\";\n\nfunction MyComponent() {\n return This is a functional component ;\n}\n```\n"
},
{
"path": "source/about.blade.php",
"content": "@extends('_layouts/master', ['title' => 'About'])\n\n@section('body')\n\n\n
\n
About Code to go \n
\n Code to go aims to help developers learning JavaScript find up to date, accurate and ready to use snippets of JavaScript code for common use cases.Contribute .\n
\n
Courses by Jad \n
\n If you like CodeToGo, check out the following courses:\n
\n
\n
\n
\n \n 1 \n Alex \n \n \n 2 \n Sam \n \n "
},
{
"path": "source/assets/build/0.js",
"content": "(window[\"webpackJsonp\"] = window[\"webpackJsonp\"] || []).push([[0],{\n\n/***/ \"./node_modules/webpack/buildin/global.js\":\n/*!***********************************!*\\\n !*** (webpack)/buildin/global.js ***!\n \\***********************************/\n/*! no static exports found */\n/***/ (function(module, exports) {\n\nvar g;\n\n// This works in non-strict mode\ng = (function() {\n\treturn this;\n})();\n\ntry {\n\t// This works if eval is allowed (see CSP)\n\tg = g || new Function(\"return this\")();\n} catch (e) {\n\t// This works if the window reference is available\n\tif (typeof window === \"object\") g = window;\n}\n\n// g can still be undefined, but nothing to do about it...\n// We return undefined, instead of nothing here, so it's\n// easier to handle this case. if(!global) { ...}\n\nmodule.exports = g;\n\n\n/***/ }),\n\n/***/ \"./source/_assets/js/prism.min.js\":\n/*!****************************************!*\\\n !*** ./source/_assets/js/prism.min.js ***!\n \\****************************************/\n/*! no static exports found */\n/***/ (function(module, exports, __webpack_require__) {\n\n/* WEBPACK VAR INJECTION */(function(global) {/* PrismJS 1.19.0\nhttps://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+jsx */\nvar _self = \"undefined\" != typeof window ? window : \"undefined\" != typeof WorkerGlobalScope && self instanceof WorkerGlobalScope ? self : {},\n Prism = function (u) {\n var c = /\\blang(?:uage)?-([\\w-]+)\\b/i,\n n = 0,\n C = {\n manual: u.Prism && u.Prism.manual,\n disableWorkerMessageHandler: u.Prism && u.Prism.disableWorkerMessageHandler,\n util: {\n encode: function encode(e) {\n return e instanceof _ ? new _(e.type, C.util.encode(e.content), e.alias) : Array.isArray(e) ? e.map(C.util.encode) : e.replace(/&/g, \"&\").replace(/ e.length) return;\n\n if (!(k instanceof _)) {\n if (h && y != n.length - 1) {\n if (c.lastIndex = v, !(O = c.exec(e))) break;\n\n for (var b = O.index + (f && O[1] ? O[1].length : 0), w = O.index + O[0].length, A = y, P = v, x = n.length; A < x && (P < w || !n[A].type && !n[A - 1].greedy); ++A) {\n (P += n[A].length) <= b && (++y, v = P);\n }\n\n if (n[y] instanceof _) continue;\n S = A - y, k = e.slice(v, P), O.index -= v;\n } else {\n c.lastIndex = 0;\n var O = c.exec(k),\n S = 1;\n }\n\n if (O) {\n f && (d = O[1] ? O[1].length : 0);\n w = (b = O.index + d) + (O = O[0].slice(d)).length;\n var j = k.slice(0, b),\n N = k.slice(w),\n E = [y, S];\n j && (++y, v += j.length, E.push(j));\n var L = new _(l, g ? C.tokenize(O, g) : O, m, O, h);\n if (E.push(L), N && E.push(N), Array.prototype.splice.apply(n, E), 1 != S && C.matchGrammar(e, n, r, y, v, !0, l + \",\" + u), i) break;\n } else if (i) break;\n }\n }\n }\n }\n }\n },\n tokenize: function tokenize(e, n) {\n var r = [e],\n t = n.rest;\n\n if (t) {\n for (var a in t) {\n n[a] = t[a];\n }\n\n delete n.rest;\n }\n\n return C.matchGrammar(e, r, n, 0, 0, !1), r;\n },\n hooks: {\n all: {},\n add: function add(e, n) {\n var r = C.hooks.all;\n r[e] = r[e] || [], r[e].push(n);\n },\n run: function run(e, n) {\n var r = C.hooks.all[e];\n if (r && r.length) for (var t, a = 0; t = r[a++];) {\n t(n);\n }\n }\n },\n Token: _\n };\n\n function _(e, n, r, t, a) {\n this.type = e, this.content = n, this.alias = r, this.length = 0 | (t || \"\").length, this.greedy = !!a;\n }\n\n if (u.Prism = C, _.stringify = function (e, n) {\n if (\"string\" == typeof e) return e;\n if (Array.isArray(e)) return e.map(function (e) {\n return _.stringify(e, n);\n }).join(\"\");\n var r = {\n type: e.type,\n content: _.stringify(e.content, n),\n tag: \"span\",\n classes: [\"token\", e.type],\n attributes: {},\n language: n\n };\n\n if (e.alias) {\n var t = Array.isArray(e.alias) ? e.alias : [e.alias];\n Array.prototype.push.apply(r.classes, t);\n }\n\n C.hooks.run(\"wrap\", r);\n var a = Object.keys(r.attributes).map(function (e) {\n return e + '=\"' + (r.attributes[e] || \"\").replace(/\"/g, \""\") + '\"';\n }).join(\" \");\n return \"<\" + r.tag + ' class=\"' + r.classes.join(\" \") + '\"' + (a ? \" \" + a : \"\") + \">\" + r.content + \"\";\n }, !u.document) return u.addEventListener && (C.disableWorkerMessageHandler || u.addEventListener(\"message\", function (e) {\n var n = JSON.parse(e.data),\n r = n.language,\n t = n.code,\n a = n.immediateClose;\n u.postMessage(C.highlight(t, C.languages[r], r)), a && u.close();\n }, !1)), C;\n var e = C.util.currentScript();\n\n if (e && (C.filename = e.src, e.hasAttribute(\"data-manual\") && (C.manual = !0)), !C.manual) {\n var r = function r() {\n C.manual || C.highlightAll();\n };\n\n var t = document.readyState;\n \"loading\" === t || \"interactive\" === t && e && e.defer ? document.addEventListener(\"DOMContentLoaded\", r) : window.requestAnimationFrame ? window.requestAnimationFrame(r) : window.setTimeout(r, 16);\n }\n\n return C;\n}(_self);\n\n true && module.exports && (module.exports = Prism), \"undefined\" != typeof global && (global.Prism = Prism);\nPrism.languages.markup = {\n comment: //,\n prolog: /<\\?[\\s\\S]+?\\?>/,\n doctype: {\n pattern: /\"'[\\]]|\"[^\"]*\"|'[^']*')+(?:\\[(?:(?!)*\\]\\s*)?>/i,\n greedy: !0\n },\n cdata: //i,\n tag: {\n pattern: /<\\/?(?!\\d)[^\\s>\\/=$<%]+(?:\\s(?:\\s*[^\\s>\\/=]+(?:\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))|(?=[\\s/>])))+)?\\s*\\/?>/i,\n greedy: !0,\n inside: {\n tag: {\n pattern: /^<\\/?[^\\s>\\/]+/i,\n inside: {\n punctuation: /^<\\/?/,\n namespace: /^[^\\s>\\/:]+:/\n }\n },\n \"attr-value\": {\n pattern: /=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+)/i,\n inside: {\n punctuation: [/^=/, {\n pattern: /^(\\s*)[\"']|[\"']$/,\n lookbehind: !0\n }]\n }\n },\n punctuation: /\\/?>/,\n \"attr-name\": {\n pattern: /[^\\s>\\/]+/,\n inside: {\n namespace: /^[^\\s>\\/:]+:/\n }\n }\n }\n },\n entity: /&#?[\\da-z]{1,8};/i\n}, Prism.languages.markup.tag.inside[\"attr-value\"].inside.entity = Prism.languages.markup.entity, Prism.hooks.add(\"wrap\", function (a) {\n \"entity\" === a.type && (a.attributes.title = a.content.replace(/&/, \"&\"));\n}), Object.defineProperty(Prism.languages.markup.tag, \"addInlined\", {\n value: function value(a, e) {\n var s = {};\n s[\"language-\" + e] = {\n pattern: /(^$)/i,\n lookbehind: !0,\n inside: Prism.languages[e]\n }, s.cdata = /^$/i;\n var n = {\n \"included-cdata\": {\n pattern: //i,\n inside: s\n }\n };\n n[\"language-\" + e] = {\n pattern: /[\\s\\S]+/,\n inside: Prism.languages[e]\n };\n var t = {};\n t[a] = {\n pattern: RegExp(\"(<__[\\\\s\\\\S]*?>)(?:\\\\s*|[\\\\s\\\\S])*?(?=<\\\\/__>)\".replace(/__/g, a), \"i\"),\n lookbehind: !0,\n greedy: !0,\n inside: n\n }, Prism.languages.insertBefore(\"markup\", \"cdata\", t);\n }\n}), Prism.languages.xml = Prism.languages.extend(\"markup\", {}), Prism.languages.html = Prism.languages.markup, Prism.languages.mathml = Prism.languages.markup, Prism.languages.svg = Prism.languages.markup;\n!function (s) {\n var t = /(\"|')(?:\\\\(?:\\r\\n|[\\s\\S])|(?!\\1)[^\\\\\\r\\n])*\\1/;\n s.languages.css = {\n comment: /\\/\\*[\\s\\S]*?\\*\\//,\n atrule: {\n pattern: /@[\\w-]+[\\s\\S]*?(?:;|(?=\\s*\\{))/,\n inside: {\n rule: /@[\\w-]+/\n }\n },\n url: {\n pattern: RegExp(\"url\\\\((?:\" + t.source + \"|[^\\n\\r()]*)\\\\)\", \"i\"),\n inside: {\n \"function\": /^url/i,\n punctuation: /^\\(|\\)$/\n }\n },\n selector: RegExp(\"[^{}\\\\s](?:[^{};\\\"']|\" + t.source + \")*?(?=\\\\s*\\\\{)\"),\n string: {\n pattern: t,\n greedy: !0\n },\n property: /[-_a-z\\xA0-\\uFFFF][-\\w\\xA0-\\uFFFF]*(?=\\s*:)/i,\n important: /!important\\b/i,\n \"function\": /[-a-z0-9]+(?=\\()/i,\n punctuation: /[(){};:,]/\n }, s.languages.css.atrule.inside.rest = s.languages.css;\n var e = s.languages.markup;\n e && (e.tag.addInlined(\"style\", \"css\"), s.languages.insertBefore(\"inside\", \"attr-value\", {\n \"style-attr\": {\n pattern: /\\s*style=(\"|')(?:\\\\[\\s\\S]|(?!\\1)[^\\\\])*\\1/i,\n inside: {\n \"attr-name\": {\n pattern: /^\\s*style/i,\n inside: e.tag.inside\n },\n punctuation: /^\\s*=\\s*['\"]|['\"]\\s*$/,\n \"attr-value\": {\n pattern: /.+/i,\n inside: s.languages.css\n }\n },\n alias: \"language-css\"\n }\n }, e.tag));\n}(Prism);\nPrism.languages.clike = {\n comment: [{\n pattern: /(^|[^\\\\])\\/\\*[\\s\\S]*?(?:\\*\\/|$)/,\n lookbehind: !0\n }, {\n pattern: /(^|[^\\\\:])\\/\\/.*/,\n lookbehind: !0,\n greedy: !0\n }],\n string: {\n pattern: /([\"'])(?:\\\\(?:\\r\\n|[\\s\\S])|(?!\\1)[^\\\\\\r\\n])*\\1/,\n greedy: !0\n },\n \"class-name\": {\n pattern: /(\\b(?:class|interface|extends|implements|trait|instanceof|new)\\s+|\\bcatch\\s+\\()[\\w.\\\\]+/i,\n lookbehind: !0,\n inside: {\n punctuation: /[.\\\\]/\n }\n },\n keyword: /\\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\\b/,\n \"boolean\": /\\b(?:true|false)\\b/,\n \"function\": /\\w+(?=\\()/,\n number: /\\b0x[\\da-f]+\\b|(?:\\b\\d+\\.?\\d*|\\B\\.\\d+)(?:e[+-]?\\d+)?/i,\n operator: /[<>]=?|[!=]=?=?|--?|\\+\\+?|&&?|\\|\\|?|[?*/~^%]/,\n punctuation: /[{}[\\];(),.:]/\n};\nPrism.languages.javascript = Prism.languages.extend(\"clike\", {\n \"class-name\": [Prism.languages.clike[\"class-name\"], {\n pattern: /(^|[^$\\w\\xA0-\\uFFFF])[_$A-Z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*(?=\\.(?:prototype|constructor))/,\n lookbehind: !0\n }],\n keyword: [{\n pattern: /((?:^|})\\s*)(?:catch|finally)\\b/,\n lookbehind: !0\n }, {\n pattern: /(^|[^.]|\\.\\.\\.\\s*)\\b(?:as|async(?=\\s*(?:function\\b|\\(|[$\\w\\xA0-\\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\\b/,\n lookbehind: !0\n }],\n number: /\\b(?:(?:0[xX](?:[\\dA-Fa-f](?:_[\\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\\d(?:_\\d)?)+n|NaN|Infinity)\\b|(?:\\b(?:\\d(?:_\\d)?)+\\.?(?:\\d(?:_\\d)?)*|\\B\\.(?:\\d(?:_\\d)?)+)(?:[Ee][+-]?(?:\\d(?:_\\d)?)+)?/,\n \"function\": /#?[_$a-zA-Z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*(?=\\s*(?:\\.\\s*(?:apply|bind|call)\\s*)?\\()/,\n operator: /--|\\+\\+|\\*\\*=?|=>|&&|\\|\\||[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\\.{3}|\\?[.?]?|[~:]/\n}), Prism.languages.javascript[\"class-name\"][0].pattern = /(\\b(?:class|interface|extends|implements|instanceof|new)\\s+)[\\w.\\\\]+/, Prism.languages.insertBefore(\"javascript\", \"keyword\", {\n regex: {\n pattern: /((?:^|[^$\\w\\xA0-\\uFFFF.\"'\\])\\s])\\s*)\\/(?:\\[(?:[^\\]\\\\\\r\\n]|\\\\.)*]|\\\\.|[^/\\\\\\[\\r\\n])+\\/[gimyus]{0,6}(?=(?:\\s|\\/\\*[\\s\\S]*?\\*\\/)*(?:$|[\\r\\n,.;:})\\]]|\\/\\/))/,\n lookbehind: !0,\n greedy: !0\n },\n \"function-variable\": {\n pattern: /#?[_$a-zA-Z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*(?=\\s*[=:]\\s*(?:async\\s*)?(?:\\bfunction\\b|(?:\\((?:[^()]|\\([^()]*\\))*\\)|[_$a-zA-Z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*)\\s*=>))/,\n alias: \"function\"\n },\n parameter: [{\n pattern: /(function(?:\\s+[_$A-Za-z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*)?\\s*\\(\\s*)(?!\\s)(?:[^()]|\\([^()]*\\))+?(?=\\s*\\))/,\n lookbehind: !0,\n inside: Prism.languages.javascript\n }, {\n pattern: /[_$a-z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*(?=\\s*=>)/i,\n inside: Prism.languages.javascript\n }, {\n pattern: /(\\(\\s*)(?!\\s)(?:[^()]|\\([^()]*\\))+?(?=\\s*\\)\\s*=>)/,\n lookbehind: !0,\n inside: Prism.languages.javascript\n }, {\n pattern: /((?:\\b|\\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\\w\\xA0-\\uFFFF]))(?:[_$A-Za-z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*\\s*)\\(\\s*)(?!\\s)(?:[^()]|\\([^()]*\\))+?(?=\\s*\\)\\s*\\{)/,\n lookbehind: !0,\n inside: Prism.languages.javascript\n }],\n constant: /\\b[A-Z](?:[A-Z_]|\\dx?)*\\b/\n}), Prism.languages.insertBefore(\"javascript\", \"string\", {\n \"template-string\": {\n pattern: /`(?:\\\\[\\s\\S]|\\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\\${)[^\\\\`])*`/,\n greedy: !0,\n inside: {\n \"template-punctuation\": {\n pattern: /^`|`$/,\n alias: \"string\"\n },\n interpolation: {\n pattern: /((?:^|[^\\\\])(?:\\\\{2})*)\\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,\n lookbehind: !0,\n inside: {\n \"interpolation-punctuation\": {\n pattern: /^\\${|}$/,\n alias: \"punctuation\"\n },\n rest: Prism.languages.javascript\n }\n },\n string: /[\\s\\S]+/\n }\n }\n}), Prism.languages.markup && Prism.languages.markup.tag.addInlined(\"script\", \"javascript\"), Prism.languages.js = Prism.languages.javascript;\n!function (i) {\n var t = i.util.clone(i.languages.javascript);\n i.languages.jsx = i.languages.extend(\"markup\", t), i.languages.jsx.tag.pattern = /<\\/?(?:[\\w.:-]+\\s*(?:\\s+(?:[\\w.:$-]+(?:=(?:(\"|')(?:\\\\[\\s\\S]|(?!\\1)[^\\\\])*\\1|[^\\s{'\">=]+|\\{(?:\\{(?:\\{[^}]*\\}|[^{}])*\\}|[^{}])+\\}))?|\\{\\s*\\.{3}\\s*[a-z_$][\\w$]*(?:\\.[a-z_$][\\w$]*)*\\s*\\}))*\\s*\\/?)?>/i, i.languages.jsx.tag.inside.tag.pattern = /^<\\/?[^\\s>\\/]*/i, i.languages.jsx.tag.inside[\"attr-value\"].pattern = /=(?!\\{)(?:(\"|')(?:\\\\[\\s\\S]|(?!\\1)[^\\\\])*\\1|[^\\s'\">]+)/i, i.languages.jsx.tag.inside.tag.inside[\"class-name\"] = /^[A-Z]\\w*(?:\\.[A-Z]\\w*)*$/, i.languages.insertBefore(\"inside\", \"attr-name\", {\n spread: {\n pattern: /\\{\\s*\\.{3}\\s*[a-z_$][\\w$]*(?:\\.[a-z_$][\\w$]*)*\\s*\\}/,\n inside: {\n punctuation: /\\.{3}|[{}.]/,\n \"attr-value\": /\\w+/\n }\n }\n }, i.languages.jsx.tag), i.languages.insertBefore(\"inside\", \"attr-value\", {\n script: {\n pattern: /=(?:\\{(?:\\{(?:\\{[^}]*\\}|[^}])*\\}|[^}])+\\})/i,\n inside: {\n \"script-punctuation\": {\n pattern: /^=(?={)/,\n alias: \"punctuation\"\n },\n rest: i.languages.jsx\n },\n alias: \"language-javascript\"\n }\n }, i.languages.jsx.tag);\n\n var o = function o(t) {\n return t ? \"string\" == typeof t ? t : \"string\" == typeof t.content ? t.content : t.content.map(o).join(\"\") : \"\";\n },\n p = function p(t) {\n for (var n = [], e = 0; e < t.length; e++) {\n var a = t[e],\n s = !1;\n\n if (\"string\" != typeof a && (\"tag\" === a.type && a.content[0] && \"tag\" === a.content[0].type ? \"\" === a.content[a.content.length - 1].content || n.push({\n tagName: o(a.content[0].content[1]),\n openedBraces: 0\n }) : 0 < n.length && \"punctuation\" === a.type && \"{\" === a.content ? n[n.length - 1].openedBraces++ : 0 < n.length && 0 < n[n.length - 1].openedBraces && \"punctuation\" === a.type && \"}\" === a.content ? n[n.length - 1].openedBraces-- : s = !0), (s || \"string\" == typeof a) && 0 < n.length && 0 === n[n.length - 1].openedBraces) {\n var g = o(a);\n e < t.length - 1 && (\"string\" == typeof t[e + 1] || \"plain-text\" === t[e + 1].type) && (g += o(t[e + 1]), t.splice(e + 1, 1)), 0 < e && (\"string\" == typeof t[e - 1] || \"plain-text\" === t[e - 1].type) && (g = o(t[e - 1]) + g, t.splice(e - 1, 1), e--), t[e] = new i.Token(\"plain-text\", g, null, g);\n }\n\n a.content && \"string\" != typeof a.content && p(a.content);\n }\n };\n\n i.hooks.add(\"after-tokenize\", function (t) {\n \"jsx\" !== t.language && \"tsx\" !== t.language || p(t.tokens);\n });\n}(Prism);\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../../node_modules/webpack/buildin/global.js */ \"./node_modules/webpack/buildin/global.js\")))\n\n/***/ })\n\n}]);"
},
{
"path": "source/assets/build/css/app.css",
"content": "code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}:root{--gray-900:#353b3f;--gray-800:#67737a;--gray-700:#8999a3;--gray-600:#adb5ba;--gray-500:#c0c9cf;--gray-400:#e7eaec;--gray-300:#eef0f1;--gray-200:#f3f4f4;--gray-100:#fafafa;--base-font:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen,Ubuntu,Cantarell,\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",sans-serif}body{margin:0;color:var(--gray-900);background-color:var(--gray-100);-webkit-font-smoothing:antialiased;font-family:var(--base-font);letter-spacing:-.01em}.container{max-width:712px;margin:0 auto}.hidden{display:none;visibility:hidden}h1{font-size:38px;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.4em}h2{font-size:30px}h3{font-size:26px}h4{font-size:20px;color:var(--gray-800)}h4,h5{font-weight:400}h5{font-size:14px;color:var(--gray-700)}@media screen and (max-width:712px){.container{margin-left:20px;margin-right:20px}h1{font-size:38px}h2{font-size:26px}h3{font-size:24px}.hide-mobile{display:none}}pre[class*=language-]{font-size:18px;padding:30px;letter-spacing:0;position:relative}code[class*=language-],pre.output,pre[class*=language-]{white-space:pre-wrap;word-break:keep-all}pre.language-css,pre.language-html{margin-bottom:15px}pre.language-css:before,pre.language-html:before,pre.language-javascript:before{content:\"\";display:inline-block;position:absolute;top:6px;right:8px;font-size:12px;color:var(--gray-700);font-family:var(--base-font)}pre.language-html:before{content:\"html\";text-transform:uppercase}pre.language-css:before{content:\"css\";text-transform:uppercase}pre.language-javascript:before{content:\"JavaScript\"}nav{background-color:#fff;border-bottom:1px solid var(--gray-200)}.nav-spacer,nav{padding:10px}nav a{text-decoration:none;color:inherit}.nav-container{display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;-webkit-box-align:center;align-items:center}nav .link{padding:0 8px;color:var(--gray-800)}#logo{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;font-weight:900}#logo svg{padding-right:11px}.card{background-color:#fff;border-radius:6px;padding:40px;margin:40px 0;border:1px solid var(--gray-200);-webkit-transition:box-shadow .25s;transition:box-shadow .25s}.card:hover{box-shadow:0 0 8px 0 rgba(0,0,0,.05)}.card a{text-decoration:none;color:inherit}.card h1,.card h2,.card h3,.card h4,.card h5,.card h6{margin-top:0;margin-left:0;margin-right:0}.card h2,.card h3{margin-bottom:15px}.card-compact{margin:30px 0}.card-compact h5{margin:0}@media screen and (max-width:712px){.card{margin:20px 0;padding:20px}}.usecase .usecase-card:hover{box-shadow:none}.banner{padding:130px 0;text-align:center}.banner .autocomplete{margin-top:57px}footer{padding:23px;color:var(--gray-700)}footer a{color:inherit;text-decoration:none}footer a:hover{text-decoration:underline}.footer-container{border-top:1px solid var(--gray-200);padding-top:22px;font-size:14px;-webkit-box-pack:justify;justify-content:space-between;-webkit-box-align:center;align-items:center}.footer-container,.footer-container .links{display:-webkit-box;display:flex}.footer-container .link{padding:0 11px}.hide-till-ready{visibility:hidden}.algolia-autocomplete .hide-till-ready{visibility:visible}.algolia-autocomplete{width:100%;border:0}.autocomplete-header .algolia-autocomplete{width:calc(100% - 60px);margin-left:20px}.algolia-autocomplete .aa-input::-webkit-input-placeholder{color:#c0c9cf}.algolia-autocomplete .aa-input::-moz-placeholder{color:#c0c9cf}.algolia-autocomplete .aa-input:-ms-input-placeholder{color:#c0c9cf}.algolia-autocomplete .aa-input::-ms-input-placeholder{color:#c0c9cf}.algolia-autocomplete .aa-input::placeholder{color:#c0c9cf}.algolia-autocomplete .aa-hint,.algolia-autocomplete .aa-input{border-radius:3px;width:100%;padding:18px 0 18px 48px;font-size:18px;box-sizing:border-box;border:1px solid transparent;outline:none}.algolia-autocomplete .aa-hint{color:#000;background-color:var(--gray-200)!important}.autocomplete-header .algolia-autocomplete .aa-hint{background-color:var(--gray-100)!important}.algolia-autocomplete .aa-input{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjx1c2UgeGxpbms6aHJlZj0iI3BhdGgwX2ZpbGwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTEuMTEpIiBmaWxsPSIjODk5OUEzIi8+PGRlZnM+PHBhdGggaWQ9InBhdGgwX2ZpbGwiIGQ9Ik0xMC40MjYgNy43MTRjMCAyLjIwNi0xLjc5NCA0LTQgNC0yLjIwNSAwLTQtMS43OTQtNC00IDAtMi4yMDUgMS43OTUtNCA0LTQgMi4yMDYgMCA0IDEuNzk1IDQgNHptNC41NzIgNy40MjlhMS4xNSAxLjE1IDAgMDAtLjMzLS44MDRsLTMuMDYzLTMuMDYyYTYuMjg0IDYuMjg0IDAgMDAtNS4xNzktOS44NDhBNi4yODQgNi4yODQgMCAwMC4xNDEgNy43MTRhNi4yODQgNi4yODQgMCAwMDkuODQ4IDUuMTc5bDMuMDYyIDMuMDUzYy4yMDYuMjE1LjUuMzQuODA0LjM0YTEuMTUgMS4xNSAwIDAwMS4xNDMtMS4xNDN6Ii8+PC9kZWZzPjwvc3ZnPg==);background-repeat:no-repeat;background-position:21px;-webkit-transition:background-color .3s,border-color .3s;transition:background-color .3s,border-color .3s}.algolia-autocomplete .aa-input:focus{border-color:var(--gray-200);box-shadow:0 0 1px rgba(0,0,0,.05);background-color:hsla(0,0%,100%,.91)!important}.autocomplete-header .algolia-autocomplete .aa-input{background-position:11px}.autocomplete-header .algolia-autocomplete .aa-hint,.autocomplete-header .algolia-autocomplete .aa-input{padding:10px 0 10px 35px;font-size:16px}.autocomplete-header{-webkit-box-flex:1;flex-grow:1}.algolia-autocomplete .aa-dropdown-menu{width:100%;text-align:left;background-color:#fff;box-shadow:0 0 4px rgba(0,0,0,.1);margin-top:6px;border-radius:3px;max-height:300px;overflow-y:scroll}.algolia-autocomplete .aa-dropdown-menu .aa-suggestion{cursor:pointer;padding:15px 20px}.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor{background-color:var(--gray-200)}.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em{font-weight:700;font-style:normal}@media screen and (min-width:560px){.landing .algolia-autocomplete .aa-dropdown-menu,.landing .algolia-autocomplete .aa-dropdown-menu .aa-suggestion:first-child.aa-cursor:not(.aa-notfound){background-size:50px 50px;background-repeat:no-repeat;background-position:right 15px top 0}}@media screen and (max-width:712px){.algolia-autocomplete .aa-hint,.algolia-autocomplete .aa-input{font-size:16px}.algolia-autocomplete .aa-dropdown-menu{font-size:14px}}.algolia-autocomplete .aa-notfound{font-size:14px;color:var(--gray-600);background-image:none!important;display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;background-color:#fff}.algolia-autocomplete .aa-notfound em{color:var(--gray-800)}.all a{text-decoration:none}.all h3{color:var(--gray-900)}.all .page-title{margin-top:45px}.usecase{min-height:calc(100vh - 231px)}.usecase-subtitle{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;margin-bottom:35px}.usecase-subtitle .category{margin-right:10px;background-color:var(--gray-200);padding:4px 6px;border-radius:3px;color:var(--gray-800);font-size:14px}.usecase-subtitle h5{margin-bottom:0}.mdn-container{color:var(--gray-700);font-size:14px;padding-top:8px;text-decoration:underline;text-align:right}.output{background-color:var(--gray-300);padding:15px;border-radius:.3em;font-size:14px;line-height:20px;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;color:var(--gray-800);margin-bottom:0}.output a{text-decoration:underline}.output:before{content:\"Output\";display:block;color:var(--gray-600);font-size:12px;font-family:var(--base-font);position:relative;top:-10px;right:-7px;font-weight:700;float:right}.learn-tech-container{margin-top:40px;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center}.learn-btn{padding:12px 40px;font-weight:800;font-size:16px;border-radius:3px;border:0;font-family:var(--font-family);cursor:pointer;display:inline-block;-webkit-transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:opacity .2s ease-out,transform .2s ease-out;transition:opacity .2s ease-out,transform .2s ease-out,-webkit-transform .2s ease-out}.learn-btn:hover{opacity:.8}.learn-btn:active{-webkit-transform:translate(.5px,.5px);transform:translate(.5px,.5px)}.learn-javascript{background-color:#03cbaf;color:#25272a!important}.learn-react{background-color:#0097ec;color:#fff!important}.related{padding-top:20px}.related a{text-decoration:none}.related h3{font-size:22px;color:var(--gray-900);margin-bottom:0}.related .card-compact{margin:24px 0;padding:30px}.rrssb-buttons{box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:12px;height:36px;margin:0;padding:0;width:100%;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-name:fade-in;animation-name:fade-in;-webkit-animation-delay:.2s;animation-delay:.2s}.rrssb-buttons:after{clear:both}.rrssb-buttons:after,.rrssb-buttons:before{content:\" \";display:table}.rrssb-buttons li{box-sizing:border-box;float:left;height:100%;line-height:13px;list-style:none;margin:0;padding:0 2px}.rrssb-buttons li.rrssb-facebook a{background-color:#306199}.rrssb-buttons li.rrssb-facebook a:hover{background-color:#244872}.rrssb-buttons li.rrssb-twitter a{background-color:#26c4f1}.rrssb-buttons li.rrssb-twitter a:hover{background-color:#0eaad6}.rrssb-buttons li a{background-color:#ccc;border-radius:2px;box-sizing:border-box;display:block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:700;height:100%;position:relative;text-align:center;text-decoration:none;text-transform:uppercase;-webkit-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out;width:100%}.rrssb-buttons li a .rrssb-icon{display:block;left:10px;padding-top:9px;position:absolute;top:0;width:10%}.rrssb-buttons li a .rrssb-icon svg{height:17px;width:17px}.rrssb-buttons li a .rrssb-icon svg circle,.rrssb-buttons li a .rrssb-icon svg path{fill:#fff}.share .clear{clear:both}.rrssb-buttons{height:34px}.rrssb-buttons li{margin-right:12px}.rrssb-buttons li a{padding:11px 7px 12px 27px;border-radius:3px}.rrssb-buttons li a .rrssb-icon{left:9px}.rrssb-buttons li.rrssb-facebook a,.rrssb-buttons li.rrssb-twitter a{background-color:#ccc}.rrssb-buttons li.rrssb-facebook a:hover{background-color:#306199}.rrssb-buttons li.rrssb-twitter a:hover{background-color:#26c4f1}.about-text{color:var(--gray-800);line-height:34px;font-size:18px}.category-pill{border-radius:5px;background-color:#fff;display:inline-block;padding:3px 5px}"
},
{
"path": "source/assets/build/css/main.css",
"content": "code[class*=language-],pre[class*=language-]{word-wrap:normal;background:none;color:#f8f8f2;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;hyphens:none;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;text-align:left;text-shadow:0 1px rgba(0,0,0,.3);white-space:pre;word-break:normal;word-spacing:normal}pre[class*=language-]{border-radius:.3em;margin:.5em 0;overflow:auto;padding:1em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{border-radius:.3em;padding:.1em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}:root{--gray-900:#353b3f;--gray-800:#67737a;--gray-700:#8999a3;--gray-600:#adb5ba;--gray-500:#c0c9cf;--gray-400:#e7eaec;--gray-300:#eef0f1;--gray-200:#f3f4f4;--gray-100:#fafafa;--base-font:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen,Ubuntu,Cantarell,\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",sans-serif}body{-webkit-font-smoothing:antialiased;background-color:var(--gray-100);color:var(--gray-900);font-family:var(--base-font);letter-spacing:-.01em;margin:0}.container{margin:0 auto;max-width:750px}.hidden{display:none;visibility:hidden}h1{font-size:38px;line-height:1.4em;margin-left:auto;margin-right:auto;max-width:600px}h2{font-size:30px}h3{font-size:26px}h4{color:var(--gray-800);font-size:20px}h4,h5{font-weight:400}h5{color:var(--gray-700);font-size:14px}@media screen and (max-width:712px){.container{margin-left:20px;margin-right:20px}h1{font-size:38px}h2{font-size:26px}h3{font-size:24px}.hide-mobile{display:none}}pre[class*=language-]{font-size:18px;letter-spacing:0;padding:30px;position:relative}code[class*=language-],pre.output,pre[class*=language-]{white-space:pre-wrap;word-break:keep-all}pre.language-css,pre.language-html{margin-bottom:15px}pre.language-css:before,pre.language-html:before,pre.language-javascript:before{color:var(--gray-700);content:\"\";display:inline-block;font-family:var(--base-font);font-size:12px;position:absolute;right:8px;top:6px}pre.language-html:before{content:\"html\";text-transform:uppercase}pre.language-css:before{content:\"css\";text-transform:uppercase}pre.language-javascript:before{content:\"JavaScript\"}nav{background-color:#fff;border-bottom:1px solid var(--gray-200)}.nav-spacer,nav{padding:10px}nav a{color:inherit;text-decoration:none}.nav-container{align-items:center;display:flex;justify-content:space-between}nav .link{color:var(--gray-800);padding:0 8px}#logo{align-items:center;display:flex;font-weight:900}#logo svg{padding-right:11px}.card{background-color:#fff;border:1px solid var(--gray-200);border-radius:6px;margin:40px 0;padding:40px;transition:box-shadow .25s}.card:hover{box-shadow:0 0 8px 0 rgba(0,0,0,.05)}.card a{color:inherit;text-decoration:none}.card h1,.card h2,.card h3,.card h4,.card h5,.card h6{margin-left:0;margin-right:0;margin-top:0}.card h2,.card h3{margin-bottom:15px}.card-compact{margin:30px 0}.card-compact h5{margin:0}@media screen and (max-width:712px){.card{margin:20px 0;padding:20px}}.usecase .usecase-card:hover{box-shadow:none}.banner{padding:130px 0;text-align:center}.banner .autocomplete{margin-top:57px}footer{color:var(--gray-700);padding:23px}footer a{color:inherit;text-decoration:none}footer a:hover{text-decoration:underline}.footer-container{align-items:center;border-top:1px solid var(--gray-200);display:flex;font-size:14px;justify-content:space-between;padding-top:22px}.footer-container .links{display:flex}.footer-container .link{padding:0 11px}.hide-till-ready{visibility:hidden}.algolia-autocomplete .hide-till-ready{visibility:visible}.algolia-autocomplete{border:0;width:100%}.autocomplete-header .algolia-autocomplete{margin-left:20px;width:calc(100% - 60px)}.algolia-autocomplete .aa-input::-moz-placeholder{color:#c0c9cf}.algolia-autocomplete .aa-input::placeholder{color:#c0c9cf}.algolia-autocomplete .aa-hint,.algolia-autocomplete .aa-input{border:1px solid transparent;border-radius:3px;box-sizing:border-box;font-size:18px;outline:none;padding:18px 0 18px 48px;width:100%}.algolia-autocomplete .aa-hint{background-color:var(--gray-200)!important;color:#000}.autocomplete-header .algolia-autocomplete .aa-hint{background-color:var(--gray-100)!important}.algolia-autocomplete .aa-input{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjx1c2UgeGxpbms6aHJlZj0iI2EiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTEuMTEpIiBmaWxsPSIjODk5OUEzIi8+PGRlZnM+PHBhdGggaWQ9ImEiIGQ9Ik0xMC40MjYgNy43MTRjMCAyLjIwNi0xLjc5NCA0LTQgNC0yLjIwNSAwLTQtMS43OTQtNC00IDAtMi4yMDUgMS43OTUtNCA0LTQgMi4yMDYgMCA0IDEuNzk1IDQgNFptNC41NzIgNy40MjlhMS4xNSAxLjE1IDAgMCAwLS4zMy0uODA0bC0zLjA2My0zLjA2MmE2LjI4NCA2LjI4NCAwIDAgMC01LjE3OS05Ljg0OEE2LjI4NCA2LjI4NCAwIDAgMCAuMTQxIDcuNzE0YTYuMjg0IDYuMjg0IDAgMCAwIDkuODQ4IDUuMTc5bDMuMDYyIDMuMDUzYy4yMDYuMjE1LjUuMzQuODA0LjM0YTEuMTUgMS4xNSAwIDAgMCAxLjE0My0xLjE0M1oiLz48L2RlZnM+PC9zdmc+);background-position:21px;background-repeat:no-repeat;transition:background-color .3s,border-color .3s}.algolia-autocomplete .aa-input:focus{background-color:hsla(0,0%,100%,.91)!important;border-color:var(--gray-200);box-shadow:0 0 1px rgba(0,0,0,.05)}.autocomplete-header .algolia-autocomplete .aa-input{background-position:11px}.autocomplete-header .algolia-autocomplete .aa-hint,.autocomplete-header .algolia-autocomplete .aa-input{font-size:16px;padding:10px 0 10px 35px}.autocomplete-header{flex-grow:1}.algolia-autocomplete .aa-dropdown-menu{background-color:#fff;border-radius:3px;box-shadow:0 0 4px rgba(0,0,0,.1);margin-top:6px;max-height:300px;overflow-y:scroll;text-align:left;width:100%}.algolia-autocomplete .aa-dropdown-menu .aa-suggestion{cursor:pointer;padding:15px 20px}.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor{background-color:var(--gray-200)}.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em{font-style:normal;font-weight:700}@media screen and (min-width:560px){.landing .algolia-autocomplete .aa-dropdown-menu,.landing .algolia-autocomplete .aa-dropdown-menu .aa-suggestion:first-child.aa-cursor:not(.aa-notfound){background-position:right 15px top 0;background-repeat:no-repeat;background-size:50px 50px}}@media screen and (max-width:712px){.algolia-autocomplete .aa-hint,.algolia-autocomplete .aa-input{font-size:16px}.algolia-autocomplete .aa-dropdown-menu{font-size:14px}}.algolia-autocomplete .aa-notfound{background-color:#fff;background-image:none!important;color:var(--gray-600);display:flex;font-size:14px;justify-content:space-between}.algolia-autocomplete .aa-notfound em{color:var(--gray-800)}.all a{text-decoration:none}.all h3{color:var(--gray-900)}.all .page-title{margin-top:45px}.usecase{min-height:calc(100vh - 231px)}#usecase-question{font-size:30px}.usecase-subtitle{align-items:center;display:flex;margin-bottom:35px}.usecase-subtitle .category{background-color:var(--gray-200);border-radius:3px;color:var(--gray-800);font-size:14px;margin-right:10px;padding:4px 6px}.usecase-subtitle h5{margin-bottom:0}.mdn-container{color:var(--gray-700);font-size:14px;padding-top:8px;text-align:right}.mdn-container a{text-decoration:underline}.output{background-color:var(--gray-300);border-radius:.3em;color:var(--gray-800);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:14px;line-height:20px;margin-bottom:0;padding:15px}.output a{text-decoration:underline}.output:before{color:var(--gray-600);content:\"Output\";display:block;float:right;font-family:var(--base-font);font-size:12px;font-weight:700;position:relative;right:-7px;top:-10px}.learn-tech-container{display:flex;justify-content:center;margin-top:40px}.learn-btn{border:0;border-radius:3px;cursor:pointer;display:inline-block;font-family:var(--font-family);font-size:16px;font-weight:800;padding:12px 40px;transition:opacity .2s ease-out,transform .2s ease-out}.learn-btn:hover{opacity:.8}.learn-btn:active{transform:translate(.5px,.5px)}.learn-javascript{background-color:#03cbaf;color:#25272a!important}.learn-react{background-color:#0097ec;color:#fff!important}.related{padding-top:20px}.related a{text-decoration:none}.related h3{color:var(--gray-900);font-size:22px;margin-bottom:0}.related .card-compact{margin:24px 0;padding:30px}.rrssb-buttons{animation-delay:.2s;animation-duration:.3s;animation-fill-mode:both;animation-iteration-count:1;animation-name:fade-in;animation-timing-function:ease-out;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:12px;height:36px;margin:0;padding:0;width:100%}.rrssb-buttons:after{clear:both}.rrssb-buttons:after,.rrssb-buttons:before{content:\" \";display:table}.rrssb-buttons li{box-sizing:border-box;float:left;height:100%;line-height:13px;list-style:none;margin:0;padding:0 2px}.rrssb-buttons li.rrssb-facebook a{background-color:#306199}.rrssb-buttons li.rrssb-facebook a:hover{background-color:#244872}.rrssb-buttons li.rrssb-twitter a{background-color:#26c4f1}.rrssb-buttons li.rrssb-twitter a:hover{background-color:#0eaad6}.rrssb-buttons li a{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;background-color:#ccc;border-radius:2px;box-sizing:border-box;display:block;font-weight:700;height:100%;position:relative;text-align:center;text-decoration:none;text-transform:uppercase;transition:background-color .2s ease-in-out;width:100%}.rrssb-buttons li a .rrssb-icon{display:block;left:10px;padding-top:9px;position:absolute;top:0;width:10%}.rrssb-buttons li a .rrssb-icon svg{height:17px;width:17px}.rrssb-buttons li a .rrssb-icon svg circle,.rrssb-buttons li a .rrssb-icon svg path{fill:#fff}.share .clear{clear:both}.rrssb-buttons{height:34px}.rrssb-buttons li{margin-right:12px}.rrssb-buttons li a{border-radius:3px;padding:11px 7px 12px 27px}.rrssb-buttons li a .rrssb-icon{left:9px}.rrssb-buttons li.rrssb-facebook a,.rrssb-buttons li.rrssb-twitter a{background-color:#ccc}.rrssb-buttons li.rrssb-facebook a:hover{background-color:#306199}.rrssb-buttons li.rrssb-twitter a:hover{background-color:#26c4f1}.about-text{color:var(--gray-800);font-size:18px;line-height:34px}.about-text a{text-decoration:underline}.category-pill{background-color:#fff;border-radius:5px;display:inline-block;padding:3px 5px}\n"
},
{
"path": "source/assets/build/js/index.js",
"content": "/******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId]) {\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\ti: moduleId,\n/******/ \t\t\tl: false,\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.l = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// define getter function for harmony exports\n/******/ \t__webpack_require__.d = function(exports, name, getter) {\n/******/ \t\tif(!__webpack_require__.o(exports, name)) {\n/******/ \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// define __esModule on exports\n/******/ \t__webpack_require__.r = function(exports) {\n/******/ \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n/******/ \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n/******/ \t\t}\n/******/ \t\tObject.defineProperty(exports, '__esModule', { value: true });\n/******/ \t};\n/******/\n/******/ \t// create a fake namespace object\n/******/ \t// mode & 1: value is a module id, require it\n/******/ \t// mode & 2: merge all properties of value into the ns\n/******/ \t// mode & 4: return value when already ns object\n/******/ \t// mode & 8|1: behave like require\n/******/ \t__webpack_require__.t = function(value, mode) {\n/******/ \t\tif(mode & 1) value = __webpack_require__(value);\n/******/ \t\tif(mode & 8) return value;\n/******/ \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n/******/ \t\tvar ns = Object.create(null);\n/******/ \t\t__webpack_require__.r(ns);\n/******/ \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n/******/ \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n/******/ \t\treturn ns;\n/******/ \t};\n/******/\n/******/ \t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t__webpack_require__.n = function(module) {\n/******/ \t\tvar getter = module && module.__esModule ?\n/******/ \t\t\tfunction getDefault() { return module['default']; } :\n/******/ \t\t\tfunction getModuleExports() { return module; };\n/******/ \t\t__webpack_require__.d(getter, 'a', getter);\n/******/ \t\treturn getter;\n/******/ \t};\n/******/\n/******/ \t// Object.prototype.hasOwnProperty.call\n/******/ \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"/\";\n/******/\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(__webpack_require__.s = 0);\n/******/ })\n/************************************************************************/\n/******/ ({\n\n/***/ \"./source/_assets/js/index.js\":\n/*!************************************!*\\\n !*** ./source/_assets/js/index.js ***!\n \\************************************/\n/*! no static exports found */\n/***/ (function(module, exports) {\n\nthrow new Error(\"Module build failed (from ./node_modules/babel-loader/lib/index.js):\\nError: ENOENT: no such file or directory, open '/Users/jadjoubran/code/codetogo.io/source/_assets/js/index.js'\");\n\n/***/ }),\n\n/***/ \"./source/_assets/sass/main.scss\":\n/*!***************************************!*\\\n !*** ./source/_assets/sass/main.scss ***!\n \\***************************************/\n/*! no static exports found */\n/***/ (function(module, exports) {\n\n// removed by extract-text-webpack-plugin\n\n/***/ }),\n\n/***/ 0:\n/*!**************************************************************************!*\\\n !*** multi ./source/_assets/js/index.js ./source/_assets/sass/main.scss ***!\n \\**************************************************************************/\n/*! no static exports found */\n/***/ (function(module, exports, __webpack_require__) {\n\n__webpack_require__(/*! /Users/jadjoubran/code/codetogo.io/source/_assets/js/index.js */\"./source/_assets/js/index.js\");\nmodule.exports = __webpack_require__(/*! /Users/jadjoubran/code/codetogo.io/source/_assets/sass/main.scss */\"./source/_assets/sass/main.scss\");\n\n\n/***/ })\n\n/******/ });"
},
{
"path": "source/assets/build/js/main.js",
"content": "(()=>{var e,t={646:()=>{var e=algoliasearch(\"7V5EBRZWFF\",\"8a58d6caba2a81878b26e24c1028624d\").initIndex(\"prod_JS-HOWTO\");autocomplete(\"#autocomplete\",{hint:!0,autoselect:!0},[{source:autocomplete.sources.hits(e,{hitsPerPage:50}),displayKey:\"question\",templates:{suggestion:function(e){return e._highlightResult.question.value},empty:function(e){return'\\n
No results found.
\\n
\\n
\\n
Click here to contribute \\n
\\n
\"+n.content+\"\"},!e.document)return e.addEventListener&&(a.disableWorkerMessageHandler||e.addEventListener(\"message\",function(t){var n=JSON.parse(t.data),r=n.language,i=n.code,s=n.immediateClose;e.postMessage(a.highlight(i,a.languages[r],r)),s&&e.close()},!1)),a;var i=a.util.currentScript();if(i&&(a.filename=i.src,i.hasAttribute(\"data-manual\")&&(a.manual=!0)),!a.manual){var s=function(){a.manual||a.highlightAll()},o=document.readyState;\"loading\"===o||\"interactive\"===o&&i&&i.defer?document.addEventListener(\"DOMContentLoaded\",s):window.requestAnimationFrame?window.requestAnimationFrame(s):window.setTimeout(s,16)}return a}(\"undefined\"!=typeof window?window:\"undefined\"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{});e.exports&&(e.exports=a),void 0!==n.g&&(n.g.Prism=a),a.languages.markup={comment://,prolog:/<\\?[\\s\\S]+?\\?>/,doctype:{pattern:/\"'[\\]]|\"[^\"]*\"|'[^']*')+(?:\\[(?:(?!)*\\]\\s*)?>/i,greedy:!0},cdata://i,tag:{pattern:/<\\/?(?!\\d)[^\\s>\\/=$<%]+(?:\\s(?:\\s*[^\\s>\\/=]+(?:\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))|(?=[\\s/>])))+)?\\s*\\/?>/i,greedy:!0,inside:{tag:{pattern:/^<\\/?[^\\s>\\/]+/i,inside:{punctuation:/^<\\/?/,namespace:/^[^\\s>\\/:]+:/}},\"attr-value\":{pattern:/=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+)/i,inside:{punctuation:[/^=/,{pattern:/^(\\s*)[\"']|[\"']$/,lookbehind:!0}]}},punctuation:/\\/?>/,\"attr-name\":{pattern:/[^\\s>\\/]+/,inside:{namespace:/^[^\\s>\\/:]+:/}}}},entity:/&#?[\\da-z]{1,8};/i},a.languages.markup.tag.inside[\"attr-value\"].inside.entity=a.languages.markup.entity,a.hooks.add(\"wrap\",function(e){\"entity\"===e.type&&(e.attributes.title=e.content.replace(/&/,\"&\"))}),Object.defineProperty(a.languages.markup.tag,\"addInlined\",{value:function(e,t){var n={};n[\"language-\"+t]={pattern:/(^$)/i,lookbehind:!0,inside:a.languages[t]},n.cdata=/^$/i;var r={\"included-cdata\":{pattern://i,inside:n}};r[\"language-\"+t]={pattern:/[\\s\\S]+/,inside:a.languages[t]};var i={};i[e]={pattern:RegExp(\"(<__[\\\\s\\\\S]*?>)(?:\\\\s*|[\\\\s\\\\S])*?(?=<\\\\/__>)\".replace(/__/g,e),\"i\"),lookbehind:!0,greedy:!0,inside:r},a.languages.insertBefore(\"markup\",\"cdata\",i)}}),a.languages.xml=a.languages.extend(\"markup\",{}),a.languages.html=a.languages.markup,a.languages.mathml=a.languages.markup,a.languages.svg=a.languages.markup,function(e){var t=/(\"|')(?:\\\\(?:\\r\\n|[\\s\\S])|(?!\\1)[^\\\\\\r\\n])*\\1/;e.languages.css={comment:/\\/\\*[\\s\\S]*?\\*\\//,atrule:{pattern:/@[\\w-]+[\\s\\S]*?(?:;|(?=\\s*\\{))/,inside:{rule:/@[\\w-]+/}},url:{pattern:RegExp(\"url\\\\((?:\"+t.source+\"|[^\\n\\r()]*)\\\\)\",\"i\"),inside:{function:/^url/i,punctuation:/^\\(|\\)$/}},selector:RegExp(\"[^{}\\\\s](?:[^{};\\\"']|\"+t.source+\")*?(?=\\\\s*\\\\{)\"),string:{pattern:t,greedy:!0},property:/[-_a-z\\xA0-\\uFFFF][-\\w\\xA0-\\uFFFF]*(?=\\s*:)/i,important:/!important\\b/i,function:/[-a-z0-9]+(?=\\()/i,punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css;var n=e.languages.markup;n&&(n.tag.addInlined(\"style\",\"css\"),e.languages.insertBefore(\"inside\",\"attr-value\",{\"style-attr\":{pattern:/\\s*style=(\"|')(?:\\\\[\\s\\S]|(?!\\1)[^\\\\])*\\1/i,inside:{\"attr-name\":{pattern:/^\\s*style/i,inside:n.tag.inside},punctuation:/^\\s*=\\s*['\"]|['\"]\\s*$/,\"attr-value\":{pattern:/.+/i,inside:e.languages.css}},alias:\"language-css\"}},n.tag))}(a),a.languages.clike={comment:[{pattern:/(^|[^\\\\])\\/\\*[\\s\\S]*?(?:\\*\\/|$)/,lookbehind:!0},{pattern:/(^|[^\\\\:])\\/\\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/([\"'])(?:\\\\(?:\\r\\n|[\\s\\S])|(?!\\1)[^\\\\\\r\\n])*\\1/,greedy:!0},\"class-name\":{pattern:/(\\b(?:class|interface|extends|implements|trait|instanceof|new)\\s+|\\bcatch\\s+\\()[\\w.\\\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\\\]/}},keyword:/\\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\\b/,boolean:/\\b(?:true|false)\\b/,function:/\\w+(?=\\()/,number:/\\b0x[\\da-f]+\\b|(?:\\b\\d+\\.?\\d*|\\B\\.\\d+)(?:e[+-]?\\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\\+\\+?|&&?|\\|\\|?|[?*/~^%]/,punctuation:/[{}[\\];(),.:]/},a.languages.javascript=a.languages.extend(\"clike\",{\"class-name\":[a.languages.clike[\"class-name\"],{pattern:/(^|[^$\\w\\xA0-\\uFFFF])[_$A-Z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*(?=\\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|})\\s*)(?:catch|finally)\\b/,lookbehind:!0},{pattern:/(^|[^.]|\\.\\.\\.\\s*)\\b(?:as|async(?=\\s*(?:function\\b|\\(|[$\\w\\xA0-\\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\\b/,lookbehind:!0}],number:/\\b(?:(?:0[xX](?:[\\dA-Fa-f](?:_[\\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\\d(?:_\\d)?)+n|NaN|Infinity)\\b|(?:\\b(?:\\d(?:_\\d)?)+\\.?(?:\\d(?:_\\d)?)*|\\B\\.(?:\\d(?:_\\d)?)+)(?:[Ee][+-]?(?:\\d(?:_\\d)?)+)?/,function:/#?[_$a-zA-Z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*(?=\\s*(?:\\.\\s*(?:apply|bind|call)\\s*)?\\()/,operator:/--|\\+\\+|\\*\\*=?|=>|&&|\\|\\||[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\\.{3}|\\?[.?]?|[~:]/}),a.languages.javascript[\"class-name\"][0].pattern=/(\\b(?:class|interface|extends|implements|instanceof|new)\\s+)[\\w.\\\\]+/,a.languages.insertBefore(\"javascript\",\"keyword\",{regex:{pattern:/((?:^|[^$\\w\\xA0-\\uFFFF.\"'\\])\\s])\\s*)\\/(?:\\[(?:[^\\]\\\\\\r\\n]|\\\\.)*]|\\\\.|[^/\\\\\\[\\r\\n])+\\/[gimyus]{0,6}(?=(?:\\s|\\/\\*[\\s\\S]*?\\*\\/)*(?:$|[\\r\\n,.;:})\\]]|\\/\\/))/,lookbehind:!0,greedy:!0},\"function-variable\":{pattern:/#?[_$a-zA-Z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*(?=\\s*[=:]\\s*(?:async\\s*)?(?:\\bfunction\\b|(?:\\((?:[^()]|\\([^()]*\\))*\\)|[_$a-zA-Z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*)\\s*=>))/,alias:\"function\"},parameter:[{pattern:/(function(?:\\s+[_$A-Za-z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*)?\\s*\\(\\s*)(?!\\s)(?:[^()]|\\([^()]*\\))+?(?=\\s*\\))/,lookbehind:!0,inside:a.languages.javascript},{pattern:/[_$a-z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*(?=\\s*=>)/i,inside:a.languages.javascript},{pattern:/(\\(\\s*)(?!\\s)(?:[^()]|\\([^()]*\\))+?(?=\\s*\\)\\s*=>)/,lookbehind:!0,inside:a.languages.javascript},{pattern:/((?:\\b|\\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\\w\\xA0-\\uFFFF]))(?:[_$A-Za-z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*\\s*)\\(\\s*)(?!\\s)(?:[^()]|\\([^()]*\\))+?(?=\\s*\\)\\s*\\{)/,lookbehind:!0,inside:a.languages.javascript}],constant:/\\b[A-Z](?:[A-Z_]|\\dx?)*\\b/}),a.languages.insertBefore(\"javascript\",\"string\",{\"template-string\":{pattern:/`(?:\\\\[\\s\\S]|\\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\\${)[^\\\\`])*`/,greedy:!0,inside:{\"template-punctuation\":{pattern:/^`|`$/,alias:\"string\"},interpolation:{pattern:/((?:^|[^\\\\])(?:\\\\{2})*)\\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,lookbehind:!0,inside:{\"interpolation-punctuation\":{pattern:/^\\${|}$/,alias:\"punctuation\"},rest:a.languages.javascript}},string:/[\\s\\S]+/}}}),a.languages.markup&&a.languages.markup.tag.addInlined(\"script\",\"javascript\"),a.languages.js=a.languages.javascript,function(e){var t=e.util.clone(e.languages.javascript);e.languages.jsx=e.languages.extend(\"markup\",t),e.languages.jsx.tag.pattern=/<\\/?(?:[\\w.:-]+\\s*(?:\\s+(?:[\\w.:$-]+(?:=(?:(\"|')(?:\\\\[\\s\\S]|(?!\\1)[^\\\\])*\\1|[^\\s{'\">=]+|\\{(?:\\{(?:\\{[^}]*\\}|[^{}])*\\}|[^{}])+\\}))?|\\{\\s*\\.{3}\\s*[a-z_$][\\w$]*(?:\\.[a-z_$][\\w$]*)*\\s*\\}))*\\s*\\/?)?>/i,e.languages.jsx.tag.inside.tag.pattern=/^<\\/?[^\\s>\\/]*/i,e.languages.jsx.tag.inside[\"attr-value\"].pattern=/=(?!\\{)(?:(\"|')(?:\\\\[\\s\\S]|(?!\\1)[^\\\\])*\\1|[^\\s'\">]+)/i,e.languages.jsx.tag.inside.tag.inside[\"class-name\"]=/^[A-Z]\\w*(?:\\.[A-Z]\\w*)*$/,e.languages.insertBefore(\"inside\",\"attr-name\",{spread:{pattern:/\\{\\s*\\.{3}\\s*[a-z_$][\\w$]*(?:\\.[a-z_$][\\w$]*)*\\s*\\}/,inside:{punctuation:/\\.{3}|[{}.]/,\"attr-value\":/\\w+/}}},e.languages.jsx.tag),e.languages.insertBefore(\"inside\",\"attr-value\",{script:{pattern:/=(?:\\{(?:\\{(?:\\{[^}]*\\}|[^}])*\\}|[^}])+\\})/i,inside:{\"script-punctuation\":{pattern:/^=(?={)/,alias:\"punctuation\"},rest:e.languages.jsx},alias:\"language-javascript\"}},e.languages.jsx.tag);var n=function(e){return e?\"string\"==typeof e?e:\"string\"==typeof e.content?e.content:e.content.map(n).join(\"\"):\"\"},a=function(t){for(var r=[],i=0;i\"===s.content[s.content.length-1].content||r.push({tagName:n(s.content[0].content[1]),openedBraces:0}):0{}},n={};function a(e){var r=n[e];if(void 0!==r)return r.exports;var i=n[e]={exports:{}};return t[e](i,i.exports,a),i.exports}a.m=t,e=[],a.O=(t,n,r,i)=>{if(!n){var s=1/0;for(c=0;c=i)&&Object.keys(a.O).every(e=>a.O[e](n[l]))?n.splice(l--,1):(o=!1,i0&&e[c-1][2]>i;c--)e[c]=e[c-1];e[c]=[n,r,i]},a.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return a.d(t,{a:t}),t},a.d=(e,t)=>{for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},a.g=function(){if(\"object\"==typeof globalThis)return globalThis;try{return this||new Function(\"return this\")()}catch(e){if(\"object\"==typeof window)return window}}(),a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={522:0,870:0};a.O.j=t=>0===e[t];var t=(t,n)=>{var r,i,[s,o,l]=n,u=0;if(s.some(t=>0!==e[t])){for(r in o)a.o(o,r)&&(a.m[r]=o[r]);if(l)var c=l(a)}for(t&&t(n);ua(151));var r=a.O(void 0,[870],()=>a(753));r=a.O(r)})();"
},
{
"path": "source/assets/build/mix-manifest.json",
"content": "{\n \"/js/main.js\": \"/js/main.js\",\n \"/css/main.css\": \"/css/main.css\"\n}\n"
},
{
"path": "source/build/css/main-17bd45cbc3.css",
"content": "code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}:root{--gray-900:#353b3f;--gray-800:#67737a;--gray-700:#8999a3;--gray-600:#adb5ba;--gray-500:#c0c9cf;--gray-400:#e7eaec;--gray-300:#eef0f1;--gray-200:#f3f4f4;--gray-100:#fafafa;--base-font:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen,Ubuntu,Cantarell,\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",sans-serif}body{margin:0;color:var(--gray-900);background-color:var(--gray-100);-webkit-font-smoothing:antialiased;font-family:var(--base-font);letter-spacing:-.01em}.container{max-width:712px;margin:0 auto}.hidden{display:none;visibility:hidden}h1{font-size:38px;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.4em}h2{font-size:30px}h3{font-size:26px}h4{font-size:20px;color:var(--gray-800)}h4,h5{font-weight:400}h5{font-size:14px;color:var(--gray-700)}@media screen and (max-width:712px){.container{margin-left:20px;margin-right:20px}h1{font-size:38px}h2{font-size:26px}h3{font-size:24px}.hide-mobile{display:none}}pre[class*=language-]{font-size:18px;padding:30px;letter-spacing:0;position:relative}code[class*=language-],pre.output,pre[class*=language-]{white-space:pre-wrap;word-break:keep-all}pre.language-css,pre.language-html{margin-bottom:15px}pre.language-css:before,pre.language-html:before,pre.language-javascript:before{content:\"\";display:inline-block;position:absolute;top:6px;right:8px;font-size:12px;color:var(--gray-700);font-family:var(--base-font)}pre.language-html:before{content:\"html\";text-transform:uppercase}pre.language-css:before{content:\"css\";text-transform:uppercase}pre.language-javascript:before{content:\"JavaScript\"}nav{background-color:#fff;border-bottom:1px solid var(--gray-200)}.nav-spacer,nav{padding:10px}nav a{text-decoration:none;color:inherit}.nav-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}nav .link{padding:0 8px;color:var(--gray-800)}#logo{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-weight:900}#logo svg{padding-right:11px}.card{background-color:#fff;border-radius:6px;padding:40px;margin:40px 0;border:1px solid var(--gray-200);transition:box-shadow .25s}.card:hover{box-shadow:0 0 8px 0 rgba(0,0,0,.05)}.card a{text-decoration:none;color:inherit}.card h1,.card h2,.card h3,.card h4,.card h5,.card h6{margin-top:0;margin-left:0;margin-right:0}.card h2,.card h3{margin-bottom:15px}.card-compact{margin:30px 0}.card-compact h5{margin:0}@media screen and (max-width:712px){.card{margin:20px 0;padding:20px}}.usecase .usecase-card:hover{box-shadow:none}.banner{padding:130px 0;text-align:center}.banner .autocomplete{margin-top:57px}footer{padding:23px;color:var(--gray-700)}footer a{color:inherit;text-decoration:none}footer a:hover{text-decoration:underline}.footer-container{border-top:1px solid var(--gray-200);padding-top:22px;font-size:14px;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}.footer-container,.footer-container .links{display:-ms-flexbox;display:flex}.footer-container .link{padding:0 11px}.hide-till-ready{visibility:hidden}.algolia-autocomplete .hide-till-ready{visibility:visible}.algolia-autocomplete{width:100%;border:0}.autocomplete-header .algolia-autocomplete{width:calc(100% - 60px);margin-left:20px}.algolia-autocomplete .aa-input:-ms-input-placeholder{color:#c0c9cf}.algolia-autocomplete .aa-input::placeholder{color:#c0c9cf}.algolia-autocomplete .aa-hint,.algolia-autocomplete .aa-input{border-radius:3px;width:100%;padding:18px 0 18px 48px;border:0;font-size:18px;box-sizing:border-box;border:1px solid transparent;outline:none}.algolia-autocomplete .aa-hint{color:#000;background-color:var(--gray-200)!important}.autocomplete-header .algolia-autocomplete .aa-hint{background-color:var(--gray-100)!important}.algolia-autocomplete .aa-input{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNSAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+JiMyMzk7JiMxMjg7JiMxMzA7PC90aXRsZT48ZGVzYz5DcmVhdGVkIHVzaW5nIEZpZ21hPC9kZXNjPjxnIGlkPSJDYW52YXMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyOCAtMTM2MCkiPjxnIGlkPSImIzIzOTsmIzEyODsmIzEzMDsiPjx1c2UgeGxpbms6aHJlZj0iI3BhdGgwX2ZpbGwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjggMTM1OC44OSkiIGZpbGw9IiM4OTk5QTMiLz48L2c+PC9nPjxkZWZzPjxwYXRoIGlkPSJwYXRoMF9maWxsIiBkPSJNIDEwLjQyNjMgNy43MTQyOUMgMTAuNDI2MyA5LjkxOTY0IDguNjMxNyAxMS43MTQzIDYuNDI2MzQgMTEuNzE0M0MgNC4yMjA5OCAxMS43MTQzIDIuNDI2MzQgOS45MTk2NCAyLjQyNjM0IDcuNzE0MjlDIDIuNDI2MzQgNS41MDg5MyA0LjIyMDk4IDMuNzE0MjkgNi40MjYzNCAzLjcxNDI5QyA4LjYzMTcgMy43MTQyOSAxMC40MjYzIDUuNTA4OTMgMTAuNDI2MyA3LjcxNDI5Wk0gMTQuOTk3OCAxNS4xNDI5QyAxNC45OTc4IDE0LjgzOTMgMTQuODcyOCAxNC41NDQ2IDE0LjY2NzQgMTQuMzM5M0wgMTEuNjA0OSAxMS4yNzY4QyAxMi4zMjgxIDEwLjIzMjEgMTIuNzEyMSA4Ljk4MjE0IDEyLjcxMjEgNy43MTQyOUMgMTIuNzEyMSA0LjI0MTA3IDkuODk5NTUgMS40Mjg1NyA2LjQyNjM0IDEuNDI4NTdDIDIuOTUzMTIgMS40Mjg1NyAwLjE0MDYyNSA0LjI0MTA3IDAuMTQwNjI1IDcuNzE0MjlDIDAuMTQwNjI1IDExLjE4NzUgMi45NTMxMiAxNCA2LjQyNjM0IDE0QyA3LjY5NDIgMTQgOC45NDQyIDEzLjYxNjEgOS45ODg4NCAxMi44OTI5TCAxMy4wNTEzIDE1Ljk0NjRDIDEzLjI1NjcgMTYuMTYwNyAxMy41NTEzIDE2LjI4NTcgMTMuODU0OSAxNi4yODU3QyAxNC40Nzk5IDE2LjI4NTcgMTQuOTk3OCAxNS43Njc5IDE0Ljk5NzggMTUuMTQyOVoiLz48L2RlZnM+PC9zdmc+);background-repeat:no-repeat;background-position:21px;transition:background-color .3s,border-color .3s}.algolia-autocomplete .aa-input:focus{border-color:var(--gray-200);box-shadow:0 0 1px rgba(0,0,0,.05);background-color:hsla(0,0%,100%,.91)!important}.autocomplete-header .algolia-autocomplete .aa-input{background-position:11px}.autocomplete-header .algolia-autocomplete .aa-hint,.autocomplete-header .algolia-autocomplete .aa-input{padding:10px 0 10px 35px;font-size:16px}.autocomplete-header{-ms-flex-positive:1;flex-grow:1}.algolia-autocomplete .aa-dropdown-menu{width:100%;text-align:left;background-color:#fff;box-shadow:0 0 4px rgba(0,0,0,.1);margin-top:6px;border-radius:3px;max-height:300px;overflow-y:scroll}.algolia-autocomplete .aa-dropdown-menu .aa-suggestion{cursor:pointer;padding:15px 20px}.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor{background-color:var(--gray-200)}.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em{font-weight:700;font-style:normal}@media screen and (min-width:560px){.landing .algolia-autocomplete .aa-dropdown-menu,.landing .algolia-autocomplete .aa-dropdown-menu .aa-suggestion:first-child.aa-cursor:not(.aa-notfound){background-size:50px 50px;background-repeat:no-repeat;background-position:right 15px top 0}}@media screen and (max-width:712px){.algolia-autocomplete .aa-hint,.algolia-autocomplete .aa-input{font-size:16px}.algolia-autocomplete .aa-dropdown-menu{font-size:14px}}.algolia-autocomplete .aa-notfound{font-size:14px;color:var(--gray-600);background-image:none!important;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;background-color:#fff}.algolia-autocomplete .aa-notfound em{color:var(--gray-800)}.all a{text-decoration:none}.all h3{color:var(--gray-900)}.all .page-title{margin-top:45px}.usecase{min-height:calc(100vh - 80px - 65px - 86px)}.usecase-subtitle{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:35px}.usecase-subtitle .category{margin-right:10px;background-color:var(--gray-200);padding:4px 6px;border-radius:3px;color:var(--gray-800);font-size:14px}.usecase-subtitle h5{margin-bottom:0}.mdn-container{color:var(--gray-700);font-size:14px;padding-top:8px;text-decoration:underline;text-align:right}.output{background-color:var(--gray-300);padding:15px;border-radius:.3em;font-size:14px;line-height:20px;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;color:var(--gray-800);margin-bottom:0}.output a{text-decoration:underline}.output:before{content:\"Output\";display:block;color:var(--gray-600);font-size:12px;font-family:var(--base-font);position:relative;top:-10px;right:-7px;font-weight:700;float:right}.learn-tech-container{margin-top:40px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.learn-javascript{background-color:#00b99f;color:#fff!important;padding:12px 40px;font-weight:800;font-size:16px;border-radius:3px;border:0;font-family:var(--font-family);cursor:pointer;display:inline-block;transition:opacity .2s ease-out,transform .2s ease-out}.learn-javascript:hover{opacity:.8}.learn-javascript:active{transform:translate(.5px,.5px)}.related{padding-top:20px}.related a{text-decoration:none}.related h3{font-size:22px;color:var(--gray-900);margin-bottom:0}.related .card-compact{margin:24px 0;padding:30px}.rrssb-buttons{box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:12px;height:36px;margin:0;padding:0;width:100%;animation-duration:.3s;animation-fill-mode:both;animation-iteration-count:1;animation-timing-function:ease-out;animation-name:fade-in;animation-delay:.2s}.rrssb-buttons:after{clear:both}.rrssb-buttons:after,.rrssb-buttons:before{content:\" \";display:table}.rrssb-buttons li{box-sizing:border-box;float:left;height:100%;line-height:13px;list-style:none;margin:0;padding:0 2px}.rrssb-buttons li.rrssb-facebook a{background-color:#306199}.rrssb-buttons li.rrssb-facebook a:hover{background-color:#244872}.rrssb-buttons li.rrssb-twitter a{background-color:#26c4f1}.rrssb-buttons li.rrssb-twitter a:hover{background-color:#0eaad6}.rrssb-buttons li a{background-color:#ccc;border-radius:2px;box-sizing:border-box;display:block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:700;height:100%;position:relative;text-align:center;text-decoration:none;text-transform:uppercase;transition:background-color .2s ease-in-out;width:100%}.rrssb-buttons li a .rrssb-icon{display:block;left:10px;padding-top:9px;position:absolute;top:0;width:10%}.rrssb-buttons li a .rrssb-icon svg{height:17px;width:17px}.rrssb-buttons li a .rrssb-icon svg circle,.rrssb-buttons li a .rrssb-icon svg path{fill:#fff}.share .clear{clear:both}.rrssb-buttons{height:34px}.rrssb-buttons li{margin-right:12px}.rrssb-buttons li a{padding:11px 7px 12px 27px;border-radius:3px}.rrssb-buttons li a .rrssb-icon{left:9px}.rrssb-buttons li.rrssb-facebook a,.rrssb-buttons li.rrssb-twitter a{background-color:#ccc}.rrssb-buttons li.rrssb-facebook a:hover{background-color:#306199}.rrssb-buttons li.rrssb-twitter a:hover{background-color:#26c4f1}.about-text{color:var(--gray-800);line-height:34px;font-size:18px}.category-pill{border-radius:5px;background-color:#fff;display:inline-block;padding:3px 5px}\n"
},
{
"path": "source/build/js/all-0048fc7a19.js",
"content": "\"use strict\";var client=algoliasearch(\"7V5EBRZWFF\",\"8a58d6caba2a81878b26e24c1028624d\"),index=client.initIndex(\"prod_JS-HOWTO\");autocomplete(\"#autocomplete\",{hint:!0,autoselect:!0},[{source:autocomplete.sources.hits(index,{hitsPerPage:50}),displayKey:\"question\",templates:{suggestion:function(e){return e._highlightResult.question.value},empty:function(e){return'\\n
No results found.
\\n
\\n
\\n
Click here to contribute \\n
\\n
)[\\s\\S]*?(?=<\\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:\"language-css\",greedy:!0}}),Prism.languages.insertBefore(\"inside\",\"attr-value\",{\"style-attr\":{pattern:/\\s*style=(\"|')(?:\\\\[\\s\\S]|(?!\\1)[^\\\\])*\\1/i,inside:{\"attr-name\":{pattern:/^\\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\\s*=\\s*['\"]|['\"]\\s*$/,\"attr-value\":{pattern:/.+/i,inside:Prism.languages.css}},alias:\"language-css\"}},Prism.languages.markup.tag)),Prism.languages.clike={comment:[{pattern:/(^|[^\\\\])\\/\\*[\\s\\S]*?(?:\\*\\/|$)/,lookbehind:!0},{pattern:/(^|[^\\\\:])\\/\\/.*/,lookbehind:!0}],string:{pattern:/([\"'])(?:\\\\(?:\\r\\n|[\\s\\S])|(?!\\1)[^\\\\\\r\\n])*\\1/,greedy:!0},\"class-name\":{pattern:/((?:\\b(?:class|interface|extends|implements|trait|instanceof|new)\\s+)|(?:catch\\s+\\())[\\w.\\\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\\\]/}},keyword:/\\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\\b/,\"boolean\":/\\b(?:true|false)\\b/,\"function\":/[a-z0-9_]+(?=\\()/i,number:/\\b0x[\\da-f]+\\b|(?:\\b\\d+\\.?\\d*|\\B\\.\\d+)(?:e[+-]?\\d+)?/i,operator:/--?|\\+\\+?|!=?=?|<=?|>=?|==?=?|&&?|\\|\\|?|\\?|\\*|\\/|~|\\^|%/,punctuation:/[{}[\\];(),.:]/},Prism.languages.javascript=Prism.languages.extend(\"clike\",{keyword:/\\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\\b/,number:/\\b(?:0[xX][\\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|NaN|Infinity)\\b|(?:\\b\\d+\\.?\\d*|\\B\\.\\d+)(?:[Ee][+-]?\\d+)?/,\"function\":/[_$a-z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*(?=\\s*\\()/i,operator:/-[-=]?|\\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\\|[|=]?|\\*\\*?=?|\\/=?|~|\\^=?|%=?|\\?|\\.{3}/}),Prism.languages.insertBefore(\"javascript\",\"keyword\",{regex:{pattern:/(^|[^\\/])\\/(?!\\/)(\\[[^\\]\\r\\n]+]|\\\\.|[^\\/\\\\\\[\\r\\n])+\\/[gimyu]{0,5}(?=\\s*($|[\\r\\n,.;})]))/,lookbehind:!0,greedy:!0},\"function-variable\":{pattern:/[_$a-z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*(?=\\s*=\\s*(?:function\\b|(?:\\([^()]*\\)|[_$a-z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*)\\s*=>))/i,alias:\"function\"}}),Prism.languages.insertBefore(\"javascript\",\"string\",{\"template-string\":{pattern:/`(?:\\\\[\\s\\S]|[^\\\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\\$\\{[^}]+\\}/,inside:{\"interpolation-punctuation\":{pattern:/^\\$\\{|\\}$/,alias:\"punctuation\"},rest:Prism.languages.javascript}},string:/[\\s\\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore(\"markup\",\"tag\",{script:{pattern:/()[\\s\\S]*?(?=<\\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:\"language-javascript\",greedy:!0}}),Prism.languages.js=Prism.languages.javascript;"
},
{
"path": "source/build/rev-manifest.json",
"content": "{\n \"css/main.css\": \"css/main-17bd45cbc3.css\",\n \"js/all.js\": \"js/all-0048fc7a19.js\"\n}"
},
{
"path": "source/css/main.css",
"content": "code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}:root{--gray-900:#353b3f;--gray-800:#67737a;--gray-700:#8999a3;--gray-600:#adb5ba;--gray-500:#c0c9cf;--gray-400:#e7eaec;--gray-300:#eef0f1;--gray-200:#f3f4f4;--gray-100:#fafafa;--base-font:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen,Ubuntu,Cantarell,\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",sans-serif}body{margin:0;color:var(--gray-900);background-color:var(--gray-100);-webkit-font-smoothing:antialiased;font-family:var(--base-font);letter-spacing:-.01em}.container{max-width:712px;margin:0 auto}.hidden{display:none;visibility:hidden}h1{font-size:38px;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.4em}h2{font-size:30px}h3{font-size:26px}h4{font-size:20px;color:var(--gray-800)}h4,h5{font-weight:400}h5{font-size:14px;color:var(--gray-700)}@media screen and (max-width:712px){.container{margin-left:20px;margin-right:20px}h1{font-size:38px}h2{font-size:26px}h3{font-size:24px}.hide-mobile{display:none}}pre[class*=language-]{font-size:18px;padding:30px;letter-spacing:0;position:relative}code[class*=language-],pre.output,pre[class*=language-]{white-space:pre-wrap;word-break:keep-all}pre.language-css,pre.language-html{margin-bottom:15px}pre.language-css:before,pre.language-html:before,pre.language-javascript:before{content:\"\";display:inline-block;position:absolute;top:6px;right:8px;font-size:12px;color:var(--gray-700);font-family:var(--base-font)}pre.language-html:before{content:\"html\";text-transform:uppercase}pre.language-css:before{content:\"css\";text-transform:uppercase}pre.language-javascript:before{content:\"JavaScript\"}nav{background-color:#fff;border-bottom:1px solid var(--gray-200)}.nav-spacer,nav{padding:10px}nav a{text-decoration:none;color:inherit}.nav-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}nav .link{padding:0 8px;color:var(--gray-800)}#logo{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-weight:900}#logo svg{padding-right:11px}.card{background-color:#fff;border-radius:6px;padding:40px;margin:40px 0;border:1px solid var(--gray-200);transition:box-shadow .25s}.card:hover{box-shadow:0 0 8px 0 rgba(0,0,0,.05)}.card a{text-decoration:none;color:inherit}.card h1,.card h2,.card h3,.card h4,.card h5,.card h6{margin-top:0;margin-left:0;margin-right:0}.card h2,.card h3{margin-bottom:15px}.card-compact{margin:30px 0}.card-compact h5{margin:0}@media screen and (max-width:712px){.card{margin:20px 0;padding:20px}}.usecase .usecase-card:hover{box-shadow:none}.banner{padding:130px 0;text-align:center}.banner .autocomplete{margin-top:57px}footer{padding:23px;color:var(--gray-700)}footer a{color:inherit;text-decoration:none}footer a:hover{text-decoration:underline}.footer-container{border-top:1px solid var(--gray-200);padding-top:22px;font-size:14px;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}.footer-container,.footer-container .links{display:-ms-flexbox;display:flex}.footer-container .link{padding:0 11px}.hide-till-ready{visibility:hidden}.algolia-autocomplete .hide-till-ready{visibility:visible}.algolia-autocomplete{width:100%;border:0}.autocomplete-header .algolia-autocomplete{width:calc(100% - 60px);margin-left:20px}.algolia-autocomplete .aa-input:-ms-input-placeholder{color:#c0c9cf}.algolia-autocomplete .aa-input::placeholder{color:#c0c9cf}.algolia-autocomplete .aa-hint,.algolia-autocomplete .aa-input{border-radius:3px;width:100%;padding:18px 0 18px 48px;border:0;font-size:18px;box-sizing:border-box;border:1px solid transparent;outline:none}.algolia-autocomplete .aa-hint{color:#000;background-color:var(--gray-200)!important}.autocomplete-header .algolia-autocomplete .aa-hint{background-color:var(--gray-100)!important}.algolia-autocomplete .aa-input{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNSAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+JiMyMzk7JiMxMjg7JiMxMzA7PC90aXRsZT48ZGVzYz5DcmVhdGVkIHVzaW5nIEZpZ21hPC9kZXNjPjxnIGlkPSJDYW52YXMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyOCAtMTM2MCkiPjxnIGlkPSImIzIzOTsmIzEyODsmIzEzMDsiPjx1c2UgeGxpbms6aHJlZj0iI3BhdGgwX2ZpbGwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjggMTM1OC44OSkiIGZpbGw9IiM4OTk5QTMiLz48L2c+PC9nPjxkZWZzPjxwYXRoIGlkPSJwYXRoMF9maWxsIiBkPSJNIDEwLjQyNjMgNy43MTQyOUMgMTAuNDI2MyA5LjkxOTY0IDguNjMxNyAxMS43MTQzIDYuNDI2MzQgMTEuNzE0M0MgNC4yMjA5OCAxMS43MTQzIDIuNDI2MzQgOS45MTk2NCAyLjQyNjM0IDcuNzE0MjlDIDIuNDI2MzQgNS41MDg5MyA0LjIyMDk4IDMuNzE0MjkgNi40MjYzNCAzLjcxNDI5QyA4LjYzMTcgMy43MTQyOSAxMC40MjYzIDUuNTA4OTMgMTAuNDI2MyA3LjcxNDI5Wk0gMTQuOTk3OCAxNS4xNDI5QyAxNC45OTc4IDE0LjgzOTMgMTQuODcyOCAxNC41NDQ2IDE0LjY2NzQgMTQuMzM5M0wgMTEuNjA0OSAxMS4yNzY4QyAxMi4zMjgxIDEwLjIzMjEgMTIuNzEyMSA4Ljk4MjE0IDEyLjcxMjEgNy43MTQyOUMgMTIuNzEyMSA0LjI0MTA3IDkuODk5NTUgMS40Mjg1NyA2LjQyNjM0IDEuNDI4NTdDIDIuOTUzMTIgMS40Mjg1NyAwLjE0MDYyNSA0LjI0MTA3IDAuMTQwNjI1IDcuNzE0MjlDIDAuMTQwNjI1IDExLjE4NzUgMi45NTMxMiAxNCA2LjQyNjM0IDE0QyA3LjY5NDIgMTQgOC45NDQyIDEzLjYxNjEgOS45ODg4NCAxMi44OTI5TCAxMy4wNTEzIDE1Ljk0NjRDIDEzLjI1NjcgMTYuMTYwNyAxMy41NTEzIDE2LjI4NTcgMTMuODU0OSAxNi4yODU3QyAxNC40Nzk5IDE2LjI4NTcgMTQuOTk3OCAxNS43Njc5IDE0Ljk5NzggMTUuMTQyOVoiLz48L2RlZnM+PC9zdmc+);background-repeat:no-repeat;background-position:21px;transition:background-color .3s,border-color .3s}.algolia-autocomplete .aa-input:focus{border-color:var(--gray-200);box-shadow:0 0 1px rgba(0,0,0,.05);background-color:hsla(0,0%,100%,.91)!important}.autocomplete-header .algolia-autocomplete .aa-input{background-position:11px}.autocomplete-header .algolia-autocomplete .aa-hint,.autocomplete-header .algolia-autocomplete .aa-input{padding:10px 0 10px 35px;font-size:16px}.autocomplete-header{-ms-flex-positive:1;flex-grow:1}.algolia-autocomplete .aa-dropdown-menu{width:100%;text-align:left;background-color:#fff;box-shadow:0 0 4px rgba(0,0,0,.1);margin-top:6px;border-radius:3px;max-height:300px;overflow-y:scroll}.algolia-autocomplete .aa-dropdown-menu .aa-suggestion{cursor:pointer;padding:15px 20px}.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor{background-color:var(--gray-200)}.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em{font-weight:700;font-style:normal}@media screen and (min-width:560px){.landing .algolia-autocomplete .aa-dropdown-menu,.landing .algolia-autocomplete .aa-dropdown-menu .aa-suggestion:first-child.aa-cursor:not(.aa-notfound){background-size:50px 50px;background-repeat:no-repeat;background-position:right 15px top 0}}@media screen and (max-width:712px){.algolia-autocomplete .aa-hint,.algolia-autocomplete .aa-input{font-size:16px}.algolia-autocomplete .aa-dropdown-menu{font-size:14px}}.algolia-autocomplete .aa-notfound{font-size:14px;color:var(--gray-600);background-image:none!important;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;background-color:#fff}.algolia-autocomplete .aa-notfound em{color:var(--gray-800)}.all a{text-decoration:none}.all h3{color:var(--gray-900)}.all .page-title{margin-top:45px}.usecase{min-height:calc(100vh - 80px - 65px - 86px)}.usecase-subtitle{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:35px}.usecase-subtitle .category{margin-right:10px;background-color:var(--gray-200);padding:4px 6px;border-radius:3px;color:var(--gray-800);font-size:14px}.usecase-subtitle h5{margin-bottom:0}.mdn-container{color:var(--gray-700);font-size:14px;padding-top:8px;text-decoration:underline;text-align:right}.output{background-color:var(--gray-300);padding:15px;border-radius:.3em;font-size:14px;line-height:20px;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;color:var(--gray-800);margin-bottom:0}.output a{text-decoration:underline}.output:before{content:\"Output\";display:block;color:var(--gray-600);font-size:12px;font-family:var(--base-font);position:relative;top:-10px;right:-7px;font-weight:700;float:right}.learn-tech-container{margin-top:40px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.learn-javascript{background-color:#00b99f;color:#fff!important;padding:12px 40px;font-weight:800;font-size:16px;border-radius:3px;border:0;font-family:var(--font-family);cursor:pointer;display:inline-block;transition:opacity .2s ease-out,transform .2s ease-out}.learn-javascript:hover{opacity:.8}.learn-javascript:active{transform:translate(.5px,.5px)}.related{padding-top:20px}.related a{text-decoration:none}.related h3{font-size:22px;color:var(--gray-900);margin-bottom:0}.related .card-compact{margin:24px 0;padding:30px}.rrssb-buttons{box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:12px;height:36px;margin:0;padding:0;width:100%;animation-duration:.3s;animation-fill-mode:both;animation-iteration-count:1;animation-timing-function:ease-out;animation-name:fade-in;animation-delay:.2s}.rrssb-buttons:after{clear:both}.rrssb-buttons:after,.rrssb-buttons:before{content:\" \";display:table}.rrssb-buttons li{box-sizing:border-box;float:left;height:100%;line-height:13px;list-style:none;margin:0;padding:0 2px}.rrssb-buttons li.rrssb-facebook a{background-color:#306199}.rrssb-buttons li.rrssb-facebook a:hover{background-color:#244872}.rrssb-buttons li.rrssb-twitter a{background-color:#26c4f1}.rrssb-buttons li.rrssb-twitter a:hover{background-color:#0eaad6}.rrssb-buttons li a{background-color:#ccc;border-radius:2px;box-sizing:border-box;display:block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:700;height:100%;position:relative;text-align:center;text-decoration:none;text-transform:uppercase;transition:background-color .2s ease-in-out;width:100%}.rrssb-buttons li a .rrssb-icon{display:block;left:10px;padding-top:9px;position:absolute;top:0;width:10%}.rrssb-buttons li a .rrssb-icon svg{height:17px;width:17px}.rrssb-buttons li a .rrssb-icon svg circle,.rrssb-buttons li a .rrssb-icon svg path{fill:#fff}.share .clear{clear:both}.rrssb-buttons{height:34px}.rrssb-buttons li{margin-right:12px}.rrssb-buttons li a{padding:11px 7px 12px 27px;border-radius:3px}.rrssb-buttons li a .rrssb-icon{left:9px}.rrssb-buttons li.rrssb-facebook a,.rrssb-buttons li.rrssb-twitter a{background-color:#ccc}.rrssb-buttons li.rrssb-facebook a:hover{background-color:#306199}.rrssb-buttons li.rrssb-twitter a:hover{background-color:#26c4f1}.about-text{color:var(--gray-800);line-height:34px;font-size:18px}.category-pill{border-radius:5px;background-color:#fff;display:inline-block;padding:3px 5px}\n"
},
{
"path": "source/dynamic-sitemap.blade.php",
"content": "https://codetogo.io/\nhttps://codetogo.io/all/\nhttps://codetogo.io/about/\nhttps://codetogo.io/javascript/\n@foreach ($jsusecases as $usecase)\nhttps://codetogo.io/{{ $usecase->url() }}/\n@endforeach\nhttps://codetogo.io/react/\n@foreach ($reactusecases as $usecase)\nhttps://codetogo.io/{{ $usecase->url() }}/\n@endforeach\n"
},
{
"path": "source/favicons/browserconfig.xml",
"content": "\n\n \n \n \n #da532c \n \n \n \n"
},
{
"path": "source/favicons/manifest.json",
"content": "{\n \"name\": \"Code to go\",\n \"short_name\": \"Code to go\",\n \"icons\": [\n {\n \"src\": \"/favicons/android-chrome-192x192.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/favicons/android-chrome-512x512.png\",\n \"sizes\": \"512x512\",\n \"type\": \"image/png\"\n }\n ],\n \"theme_color\": \"#ffffff\",\n \"background_color\": \"#ffffff\",\n \"display\": \"standalone\",\n \"start_url\": \"/\"\n}\n"
},
{
"path": "source/index.blade.php",
"content": "@extends('_layouts.master', ['is_landing' => true])\n\n@section('body')\n\n
\n
Find up to date snippets for JavaScript & React use cases \n
Search for a use case: \n
\n
\n
Popular use cases \n
\n
\n
\n
\n
\n
\n
\\n
No results found.
\\n
\\n
\\n
Click here to contribute \\n
\\n
)[\\s\\S]*?(?=<\\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:\"language-css\",greedy:!0}}),Prism.languages.insertBefore(\"inside\",\"attr-value\",{\"style-attr\":{pattern:/\\s*style=(\"|')(?:\\\\[\\s\\S]|(?!\\1)[^\\\\])*\\1/i,inside:{\"attr-name\":{pattern:/^\\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\\s*=\\s*['\"]|['\"]\\s*$/,\"attr-value\":{pattern:/.+/i,inside:Prism.languages.css}},alias:\"language-css\"}},Prism.languages.markup.tag)),Prism.languages.clike={comment:[{pattern:/(^|[^\\\\])\\/\\*[\\s\\S]*?(?:\\*\\/|$)/,lookbehind:!0},{pattern:/(^|[^\\\\:])\\/\\/.*/,lookbehind:!0}],string:{pattern:/([\"'])(?:\\\\(?:\\r\\n|[\\s\\S])|(?!\\1)[^\\\\\\r\\n])*\\1/,greedy:!0},\"class-name\":{pattern:/((?:\\b(?:class|interface|extends|implements|trait|instanceof|new)\\s+)|(?:catch\\s+\\())[\\w.\\\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\\\]/}},keyword:/\\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\\b/,\"boolean\":/\\b(?:true|false)\\b/,\"function\":/[a-z0-9_]+(?=\\()/i,number:/\\b0x[\\da-f]+\\b|(?:\\b\\d+\\.?\\d*|\\B\\.\\d+)(?:e[+-]?\\d+)?/i,operator:/--?|\\+\\+?|!=?=?|<=?|>=?|==?=?|&&?|\\|\\|?|\\?|\\*|\\/|~|\\^|%/,punctuation:/[{}[\\];(),.:]/},Prism.languages.javascript=Prism.languages.extend(\"clike\",{keyword:/\\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\\b/,number:/\\b(?:0[xX][\\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|NaN|Infinity)\\b|(?:\\b\\d+\\.?\\d*|\\B\\.\\d+)(?:[Ee][+-]?\\d+)?/,\"function\":/[_$a-z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*(?=\\s*\\()/i,operator:/-[-=]?|\\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\\|[|=]?|\\*\\*?=?|\\/=?|~|\\^=?|%=?|\\?|\\.{3}/}),Prism.languages.insertBefore(\"javascript\",\"keyword\",{regex:{pattern:/(^|[^\\/])\\/(?!\\/)(\\[[^\\]\\r\\n]+]|\\\\.|[^\\/\\\\\\[\\r\\n])+\\/[gimyu]{0,5}(?=\\s*($|[\\r\\n,.;})]))/,lookbehind:!0,greedy:!0},\"function-variable\":{pattern:/[_$a-z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*(?=\\s*=\\s*(?:function\\b|(?:\\([^()]*\\)|[_$a-z\\xA0-\\uFFFF][$\\w\\xA0-\\uFFFF]*)\\s*=>))/i,alias:\"function\"}}),Prism.languages.insertBefore(\"javascript\",\"string\",{\"template-string\":{pattern:/`(?:\\\\[\\s\\S]|[^\\\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\\$\\{[^}]+\\}/,inside:{\"interpolation-punctuation\":{pattern:/^\\$\\{|\\}$/,alias:\"punctuation\"},rest:Prism.languages.javascript}},string:/[\\s\\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore(\"markup\",\"tag\",{script:{pattern:/()[\\s\\S]*?(?=<\\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:\"language-javascript\",greedy:!0}}),Prism.languages.js=Prism.languages.javascript;"
},
{
"path": "source/js/index.js",
"content": "\n\n//# sourceMappingURL=index.js.map\n"
},
{
"path": "source/react.blade.php",
"content": "@extends('_layouts/master', ['title' => 'Use Cases'])\n\n@section('body')\n\n\n\n@endsection\n"
},
{
"path": "tasks/algolia-sync.js",
"content": "const fs = require(\"fs\");\nconst yamlFront = require(\"yaml-front-matter\");\nconst algoliasearch = require(\"algoliasearch\");\n\nconst paths = [\"./source/_jsusecases\", \"./source/_reactusecases\"];\n\nconst initIndex = () => {\n const appId = \"7V5EBRZWFF\";\n const client = algoliasearch(appId, process.env.CODETOGO_ALGOLIA_KEY);\n return client.initIndex(\"prod_JS-HOWTO\");\n};\n\nconst index = initIndex();\nconst questions = [];\npaths.forEach(path => {\n\n fs.readdir(path, function(err, items) {\n for (const item of items) {\n const course = getCourseFromPath(path);\n const question = formatQuestion(stripExtension(cleanPath(item)), course);\n const url = formatUrl(stripExtension(item), course);\n if (item === \".DS_Store\"){\n continue;\n }\n const objectID = url;\n const fileContents = fs.readFileSync(\n `${path}/${item}`,\n \"utf8\"\n );\n const info = yamlFront.loadFront(fileContents);\n const reference = info.reference;\n questions.push({ question, url, objectID, reference });\n }\n syncQuestions(questions);\n });\n});\n\nconst syncQuestions = questions => {\n index.addObjects(questions, (err, content) => {\n if (err) {\n console.log(\"Error :\", err);\n return false;\n }\n console.log(\"Success!\");\n console.log(content);\n });\n};\n\nconst getCourseFromPath = path => {\n if (path === \"./source/_jsusecases\"){\n return \"javascript\";\n }\n if (path === \"./source/_reactusecases\"){\n return \"react\";\n }\n console.log(\"Could not find course\");\n process.exit();\n}\n\nconst stripExtension = filename => {\n return filename.replace(\".md\", \"\");\n};\n\nconst cleanPath = filename => {\n return filename.replace(/\\-/g, \" \");\n};\n\nconst formatQuestion = (question, course) => {\n if (course === \"javascript\"){\n return `How to ${question} in JavaScript`;\n }\n if (course === \"react\"){\n return `How to ${question} in React`;\n }\n};\n\nconst formatUrl = (url, course) => {\n return `how-to-${url}-in-${course}`;\n};\n"
},
{
"path": "tasks/bin.js",
"content": "var hasbin = require('hasbin');\nvar fs = require('fs');\nvar path = require('path');\n\nmodule.exports = {\n path: function() {\n if (fs.existsSync('./vendor/bin/jigsaw')) {\n return path.normalize('./vendor/bin/jigsaw')\n }\n\n if (hasbin.sync('jigsaw')) {\n return 'jigsaw';\n }\n\n console.log('Could not find Jigsaw; please install it via Composer, either locally or globally.');\n\n process.exit();\n }\n};\n"
},
{
"path": "tasks/build.js",
"content": "let argv = require('yargs').argv;\nlet bin = require('./bin');\nlet command = require('node-cmd');\n\nlet BrowserSync = require('browser-sync');\nlet BrowserSyncPlugin = require('browser-sync-webpack-plugin');\nlet ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');\n\nlet browserSyncInstance;\nlet env = argv.e || argv.env || 'local';\nlet port = argv.p || argv.port || 3000;\n\nmodule.exports = {\n jigsaw: {\n apply(compiler) {\n compiler.hooks.done.tap('DonePlugin', (compilation) => {\n command.get(bin.path() + ' build -q ' + env, (error, stdout, stderr) => {\n console.log(error ? stderr : stdout);\n\n if (browserSyncInstance) {\n browserSyncInstance.reload();\n }\n });\n });\n }\n },\n\n watch: function (paths) {\n return new ExtraWatchWebpackPlugin({\n files: paths,\n });\n },\n\n browserSync: function (proxy) {\n return new BrowserSyncPlugin({\n notify: false,\n port: port,\n proxy: proxy,\n server: proxy ? null : { baseDir: 'build_' + env + '/' },\n },\n {\n reload: false,\n callback: function() {\n browserSyncInstance = BrowserSync.get('bs-webpack-plugin');\n },\n })\n },\n};\n"
},
{
"path": "webpack.mix.js",
"content": "let mix = require(\"laravel-mix\");\nlet build = require(\"./tasks/build.js\");\n\nmix.disableSuccessNotifications();\nmix.setPublicPath(\"source/assets/build\");\nmix.webpackConfig({\n plugins: [\n build.jigsaw,\n build.browserSync(),\n build.watch([\n \"source/**/*.md\",\n \"source/**/*.php\",\n \"source/**/*.scss\",\n \"!source/**/_tmp/*\"\n ])\n ]\n});\n\nmix.js(\"source/_assets/js/main.js\", \"js\")\n .sass(\"source/_assets/sass/main.scss\", \"css\")\n .options({\n processCssUrls: false\n });\n// turned off .version(); because it would invalidate the entire cloudflare cache\n// also because the JS is rarely updated\n"
}
]