├── .env.development ├── .eslintrc-auto-import.json ├── .eslintrc.js ├── .github └── FUNDING.yml ├── .gitignore ├── .npmrc ├── .prettierrc ├── .vscode ├── extensions.json └── settings.json ├── CODE_OF_CONDUCT.md ├── LICENCE ├── README.md ├── contributors ├── contributors.json └── contributors.ts ├── docs └── cheatsheet │ ├── array-methods.md │ ├── arrays.md │ ├── basics.md │ ├── control-flow.md │ ├── debugging.md │ ├── directory-files.md │ ├── error-handling.md │ ├── functions.md │ ├── manipulating-strings.md │ ├── map.md │ ├── objects.md │ ├── regular-expressions.md │ ├── sets.md │ └── string-formatting.md ├── index.html ├── netlify.toml ├── package.json ├── pnpm-lock.yaml ├── postcss.config.js ├── public ├── _headers ├── _redirects ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── browserconfig.xml ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── fonts │ ├── Inter-italic.var.woff2 │ ├── Inter-roman.var.woff2 │ ├── lexend.txt │ └── lexend.woff2 ├── googleccbf6035fc9d727f.html ├── icons │ ├── favicon.svg │ └── javascript_logo.png ├── mstile-144x144.png ├── mstile-150x150.png ├── mstile-310x150.png ├── mstile-310x310.png ├── mstile-70x70.png ├── netlify.svg ├── robots.txt ├── safari-pinned-tab.svg ├── screenshots │ └── capture.png ├── site.webmanifest ├── snake.svg ├── social │ └── social_banner.png ├── sponsors │ ├── kinsta │ │ ├── SVG │ │ │ ├── PythonCheatSheet_banner_Text.svg │ │ │ ├── PythonCheatSheet_banner_button-main.svg │ │ │ ├── PythonCheatSheet_banner_kinsta_logo.svg │ │ │ └── kinsta-mobile.png │ │ ├── kinsta-logo-alpha-purple.png │ │ ├── kinsta-logo-alpha-white.png │ │ ├── kinsta-logo1.png │ │ ├── kinsta-logo2.png │ │ └── kinsta-logo3.png │ └── practity │ │ └── practity.webp └── user-avatars │ ├── CodeWithBishal.png │ ├── Harish-clb.png │ ├── KamleshPandey98.png │ ├── Kishore007raj.png │ ├── chrishenderson07.png │ ├── engtuncay.png │ ├── gritgary101.png │ ├── hcz1.png │ └── wilfredinni.png ├── renovate.json ├── scripts ├── fetch-avatars.ts └── fetch-contributors.ts ├── src ├── App.vue ├── assets │ └── logo.png ├── auto-imports.d.ts ├── components.d.ts ├── components │ ├── AlgoliaDocSearch.vue │ ├── BlogTitleHeader.vue │ ├── CarbonAds.vue │ ├── Contributors.vue │ ├── EmptySection.vue │ ├── NetlifyBadge.vue │ ├── Prose.vue │ ├── icons │ │ ├── ArrowIcon.vue │ │ ├── BugIcon.vue │ │ ├── EditIcon.vue │ │ ├── GithubIcon.vue │ │ ├── GridIcon.vue │ │ ├── LightBulbIcon.vue │ │ ├── PluginIcon.vue │ │ ├── QuestionIcon.vue │ │ ├── ReferenceIcon.vue │ │ └── WarningIcon.vue │ ├── layout │ │ ├── TheFooter.vue │ │ ├── TheNavbar.vue │ │ ├── TheNavbarReader.vue │ │ ├── TheSidebarDesktop.vue │ │ ├── TheSidebarMobile.vue │ │ ├── TheSidebarNavigation.vue │ │ └── TheToc.vue │ └── ui │ │ ├── BaseBadge.vue │ │ ├── BaseBadgeNotice.vue │ │ ├── BaseBadgeSecondary.vue │ │ ├── BaseBanner.vue │ │ ├── BaseCustomizableLinkCard.vue │ │ ├── BaseLinkCard.vue │ │ ├── BasePagination.vue │ │ ├── BaseReaderMode.vue │ │ ├── BaseThemeToggle.vue │ │ ├── BaseTitle.vue │ │ ├── disclaimer │ │ ├── BaseDisclaimer.vue │ │ ├── BaseDisclaimerContent.vue │ │ └── BaseDisclaimerTitle.vue │ │ ├── newBadge.vue │ │ ├── table │ │ ├── BaseTable.vue │ │ ├── BaseTableItem.vue │ │ └── BaseTableRow.vue │ │ └── warning │ │ ├── BaseWarning.vue │ │ ├── BaseWarningContent.vue │ │ └── BaseWarningTitle.vue ├── composables │ ├── carbon.ts │ ├── dark.ts │ ├── meta.ts │ ├── scroll.ts │ └── toc.ts ├── env.d.ts ├── layouts │ ├── default.vue │ ├── empty.vue │ └── fullPage.vue ├── main.ts ├── modules │ ├── pinia.ts │ └── pwa.ts ├── pages │ ├── [...all].vue │ ├── changelog.md │ ├── contributing.md │ └── index.vue ├── store │ ├── navigation.ts │ ├── newsletter.ts │ └── reader.ts ├── styles │ ├── carbon.css │ ├── docsearch.css │ ├── fonts.css │ ├── index.css │ └── markdown.css ├── types.ts └── types │ ├── index.d.ts │ └── ui.ts ├── tailwind.config.js ├── tests └── basic.test.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.env.development: -------------------------------------------------------------------------------- 1 | VITE_IN_PRODUCTION=false 2 | VITE_BASE_URL=next.javascriptcheatsheet.org 3 | VITE_GTAG=G-RETM00X0HZ 4 | 5 | VITE_DOCSEARCH_CONTAINER=#docsearch 6 | VITE_DOCSEARCH_APP_ID=HXR64MO8DE 7 | VITE_DOCSEARCH_INDEX_NAME=javascriptcheatsheet 8 | VITE_DOCSEARCH_API_KEY=6ffeec200d342ea3a606efec19476e2a 9 | 10 | VITE_LOAD_CARBON=true 11 | VITE_CARBON_SERVE=CVAIKKQM 12 | VITE_CARBON_PLACEMENT=carbonadsnet 13 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | node: true, 4 | }, 5 | extends: [ 6 | 'eslint:recommended', 7 | 'plugin:vue/vue3-recommended', 8 | 'prettier', 9 | './.eslintrc-auto-import.json', 10 | ], 11 | rules: { 12 | // override/add rules settings here, such as: 13 | 'vue/no-unused-vars': 'off', 14 | 'vue/multi-word-component-names': 'off', 15 | 'Parsing error: Unexpected token as': 'off', 16 | // 'no-unused-vars': 'off', 17 | }, 18 | parserOptions: { 19 | ecmaVersion: 12, 20 | sourceType: 'module', 21 | parser: '@typescript-eslint/parser', 22 | }, 23 | } 24 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: wilfredinni 4 | 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .idea 17 | .DS_Store 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | .vite-ssg-temp 24 | coverage 25 | .env 26 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | strict-peer-dependencies=false -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "useTabs": false, 4 | "endOfLine": "auto", 5 | "singleQuote": true, 6 | "bracketSpacing": true, 7 | "arrowParens": "always" 8 | } -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "vue.volar", 4 | "formulahendry.auto-close-tag", 5 | "formulahendry.auto-rename-tag", 6 | "johnpapa.vscode-peacock", 7 | "bungcip.better-toml", 8 | "streetsidesoftware.code-spell-checker", 9 | "irongeek.vscode-env", 10 | "dbaeumer.vscode-eslint", 11 | "yzhang.markdown-all-in-one", 12 | "esbenp.prettier-vscode", 13 | "bradlc.vscode-tailwindcss", 14 | "shardulm94.trailing-spaces" 15 | ] 16 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "i18n-ally.localesPaths": [ 3 | "locales" 4 | ], 5 | "editor.formatOnSave": true, 6 | "typescript.validate.enable": true, 7 | // "prettier.prettierPath": "./node_modules/prettier", 8 | "editor.tabSize": 2, 9 | "cSpell.words": [ 10 | "aaclient", 11 | "abspath", 12 | "abstractmethod", 13 | "Acumane", 14 | "AEIOU", 15 | "aiter", 16 | "aitersync", 17 | "Anyconfig", 18 | "Arham", 19 | "asctime", 20 | "asenov", 21 | "Batmobile", 22 | "Batwowowowoman", 23 | "beweep", 24 | "breakpointhook", 25 | "builtins", 26 | "bytearray", 27 | "carbonads", 28 | "carbonadsnet", 29 | "catnames", 30 | "chdir", 31 | "classinfo", 32 | "classmethod", 33 | "Concat", 34 | "contextlib", 35 | "contextmanager", 36 | "copytree", 37 | "darkpixlz", 38 | "dataclass", 39 | "Dbfilename", 40 | "deepcopy", 41 | "delattr", 42 | "Distutils", 43 | "divmod", 44 | "docsearch", 45 | "DOTALL", 46 | "dropwhile", 47 | "epstopdf", 48 | "Epub", 49 | "Errno", 50 | "esmo", 51 | "esno", 52 | "extractall", 53 | "fillvalue", 54 | "filterfalse", 55 | "findall", 56 | "firdousmurtaza", 57 | "flymemory", 58 | "frozenset", 59 | "functools", 60 | "Gaurav", 61 | "getattr", 62 | "getattribute", 63 | "getcwd", 64 | "getdefaultencoding", 65 | "getinfo", 66 | "getitem", 67 | "getsize", 68 | "getstate", 69 | "gritgary", 70 | "groupby", 71 | "gtag", 72 | "Harish", 73 | "hasattr", 74 | "hashable", 75 | "IGNORECASE", 76 | "imag", 77 | "importlib", 78 | "infolist", 79 | "instanceof", 80 | "isabs", 81 | "isalpha", 82 | "isdecimal", 83 | "Isenstein", 84 | "isfile", 85 | "isinstance", 86 | "islice", 87 | "islower", 88 | "isspace", 89 | "issubclass", 90 | "isupper", 91 | "iterdir", 92 | "javascriptcheatsheet", 93 | "jkornijchuk", 94 | "joinpath", 95 | "kakasaheb", 96 | "kinsta", 97 | "Kishore", 98 | "kwarg", 99 | "kwds", 100 | "levelname", 101 | "listdir", 102 | "ljust", 103 | "lstrip", 104 | "madeelchaudhary", 105 | "makedirs", 106 | "memoryview", 107 | "mkdir", 108 | "mkvirtualenv", 109 | "Mozar", 110 | "mydata", 111 | "mypy", 112 | "namelist", 113 | "ndigits", 114 | "nlink", 115 | "nonexistentfile", 116 | "nongreedy", 117 | "noraa", 118 | "nugel", 119 | "nums", 120 | "ofetch", 121 | "ohmyfetch", 122 | "omii", 123 | "pathe", 124 | "pathlib", 125 | "pathobj", 126 | "pipenv", 127 | "Pipfile", 128 | "popitem", 129 | "pprint", 130 | "practity", 131 | "prereleases", 132 | "prismjs", 133 | "projs", 134 | "pydoc", 135 | "Pylint", 136 | "Pypi", 137 | "pyproject", 138 | "pyshell", 139 | "pythoncheatsheet", 140 | "Pythonista", 141 | "qkniep", 142 | "randint", 143 | "randrange", 144 | "readdir", 145 | "readlines", 146 | "reencode", 147 | "Regexes", 148 | "relpath", 149 | "repr", 150 | "rgba", 151 | "richjohnsonxyz", 152 | "rjust", 153 | "rmtree", 154 | "Robocop", 155 | "Rosas", 156 | "rstrip", 157 | "Ruamel", 158 | "setattr", 159 | "setdefault", 160 | "setstate", 161 | "shirinapr", 162 | "shutil", 163 | "sitebuiltins", 164 | "starmap", 165 | "staticmethod", 166 | "strformat", 167 | "strfunc", 168 | "strptime", 169 | "subfolders", 170 | "supersandra", 171 | "Sweigart", 172 | "takewhile", 173 | "thacer13", 174 | "timedelta", 175 | "timeit", 176 | "Traceback", 177 | "udiskie", 178 | "unhashable", 179 | "Unshift", 180 | "useb", 181 | "vendorizing", 182 | "venv", 183 | "virtualenv", 184 | "virtualenvwrapper", 185 | "webp", 186 | "Workon", 187 | "xwtpdui", 188 | "xwtpw", 189 | "xxxl", 190 | "Yaya", 191 | "zipfile", 192 | "zipfldr", 193 | "zophie" 194 | ], 195 | "workbench.colorCustomizations": { 196 | "activityBar.activeBorder": "#945bc4", 197 | "activityBar.activeBackground": "#2f344a", 198 | "activityBar.background": "#2f344a", 199 | "activityBar.foreground": "#e7e7e7", 200 | "activityBar.inactiveForeground": "#e7e7e799", 201 | "activityBarBadge.background": "#885760", 202 | "activityBarBadge.foreground": "#e7e7e7", 203 | "commandCenter.border": "#e7e7e799", 204 | "sash.hoverBorder": "#2f344a", 205 | "statusBar.background": "#1b1e2b", 206 | "statusBar.foreground": "#e7e7e7", 207 | "statusBarItem.hoverBackground": "#2f344a", 208 | "statusBarItem.remoteBackground": "#1b1e2b", 209 | "statusBarItem.remoteForeground": "#e7e7e7", 210 | "titleBar.activeBackground": "#1b1e2b", 211 | "titleBar.activeForeground": "#e7e7e7", 212 | "titleBar.inactiveBackground": "#1b1e2b99", 213 | "titleBar.inactiveForeground": "#e7e7e799" 214 | }, 215 | "peacock.remoteColor": "1b1e2b", 216 | "cSpell.language": "en", 217 | "editor.fontLigatures": true, 218 | "editor.fontSize": 17, 219 | "editor.defaultFormatter": "esbenp.prettier-vscode", 220 | "[javascript]": { 221 | "editor.defaultFormatter": "esbenp.prettier-vscode" 222 | } 223 | } -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | . 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 wilfredinni 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 |

javascript Cheatsheet

6 | 7 |
8 | javascriptcheatsheet.org | 9 | Contribute | 10 | Changelog 11 |
12 | 13 | 14 | 15 | Anyone can forget how to 16 | [make character classes](https://www.javascriptcheatsheet.org/cheatsheet/regular-expressions#making-your-own-character-classes) 17 | for a regex, [slice a list](https://www.javascriptcheatsheet.org/cheatsheet/array-methods#array-slice) or do a [for loop](https://www.javascriptcheatsheet.org/cheatsheet/control-flow#for-loop). This javascript cheatsheet tries to provide basic reference for beginner and advanced developers, lower the entry barrier for newcomers and help veterans refresh the old tricks. 18 | 19 | ## Contributors 20 | 21 | 22 | 23 | 24 | 25 | Made with [contrib.rocks](https://contrib.rocks). 26 | 27 | -------------------------------------------------------------------------------- /contributors/contributors.json: -------------------------------------------------------------------------------- 1 | [ 2 | "wilfredinni", 3 | "Harish-clb", 4 | "hcz1", 5 | "Kishore007raj", 6 | "CodeWithBishal", 7 | "chrishenderson07", 8 | "gritgary101", 9 | "KamleshPandey98", 10 | "engtuncay" 11 | ] -------------------------------------------------------------------------------- /contributors/contributors.ts: -------------------------------------------------------------------------------- 1 | import contributorNames from './contributors.json' 2 | 3 | export interface Contributor { 4 | name: string 5 | avatar: string 6 | repository: string 7 | } 8 | 9 | const contributorsAvatars: Record = {} 10 | 11 | const getAvatarUrl = (name: string) => 12 | import.meta.hot 13 | ? `https://github.com/${name}.png` 14 | : `/user-avatars/${name}.png` 15 | 16 | export const contributors = (contributorNames as string[]).reduce( 17 | (acc, name) => { 18 | contributorsAvatars[name] = getAvatarUrl(name) 19 | acc.push({ 20 | name, 21 | avatar: contributorsAvatars[name], 22 | repository: `https://github.com/${name}`, 23 | }) 24 | return acc 25 | }, 26 | [] as Contributor[] 27 | ) 28 | -------------------------------------------------------------------------------- /docs/cheatsheet/arrays.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Javascript Arrays - Javascript Cheatsheet 3 | description: An array in JavaScript is a high-level, list-like object that is used to store multiple values in a single variable. 4 | --- 5 | 6 | 7 | Javascript Arrays 8 | 9 | 10 | 11 | 12 | From the MDN Web Docs 13 | 14 | 15 | The Array object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name, and has members for performing common array operations. 16 | 17 | 18 | 19 | An array in JavaScript is a high-level, list-like object that is used to store multiple values in a single variable. Each value (also called an element) in an array has a numeric position, known as its index, and it can contain data of any type—numbers, strings, booleans, functions, objects, and even other arrays: 20 | 21 | ```javascript 22 | let fruits = ['apple', 'banana', 'cherry']; 23 | ``` 24 | 25 | ## Array Declaration 26 | 27 | In JavaScript, an array can be declared in several ways: 28 | 29 | 1. **Array literal**: This is the most common way to create an array. It uses square brackets `[]` and the elements are comma-separated. 30 | 31 | ```javascript 32 | let fruits = ['apple', 'banana', 'cherry']; 33 | ``` 34 | 35 | 2. **Array constructor**: This uses the `new` keyword along with the `Array` constructor. It's less common and more verbose. 36 | 37 | ```javascript 38 | let fruits = new Array('apple', 'banana', 'cherry'); 39 | ``` 40 | 41 | 3. **Array.of() method**: This creates a new Array instance from a variable number of arguments. 42 | 43 | ```javascript 44 | let fruits = Array.of('apple', 'banana', 'cherry'); 45 | ``` 46 | 47 | 4. **Array.from() method**: This creates a new Array instance from an array-like or iterable object. 48 | 49 | ```javascript 50 | let fruits = Array.from(['apple', 'banana', 'cherry']); 51 | ``` 52 | 53 | In all these examples, `fruits` is an array that contains three strings. The strings are the elements of the array. 54 | 55 | ## Array Indexes 56 | 57 | In JavaScript, each item in an array is assigned a numeric position, known as its index. Array indices start at 0 and increment by 1 for each subsequent element. 58 | 59 | ```javascript 60 | let fruits = ['apple', 'banana', 'cherry']; 61 | 62 | console.log(fruits[0]); // logs 'apple' 63 | console.log(fruits[1]); // logs 'banana' 64 | console.log(fruits[2]); // logs 'cherry' 65 | ``` 66 | 67 | Here, 'apple' is at index 0, 'banana' is at index 1, and 'cherry' is at index 2 in the `fruits` array. 68 | 69 | You can use the index to access or modify the elements of the array: 70 | 71 | ```javascript 72 | fruits[1] = 'blueberry'; // changes 'banana' to 'blueberry' 73 | console.log(fruits[1]); // logs 'blueberry' 74 | ``` 75 | 76 | In this case, `fruits[1] = 'blueberry'` changes the second element of the array to 'blueberry'. 77 | 78 | ## Array Length 79 | 80 | The `length` property of an array in JavaScript returns the number of elements in the array. It's not a method, so you don't call it with parentheses. 81 | 82 | ```javascript 83 | let fruits = ['apple', 'banana', 'cherry']; 84 | console.log(fruits.length); // logs 3 85 | ``` 86 | 87 | `fruits.length` is 3 because there are three elements in the `fruits` array. 88 | 89 | You can also use the `length` property to change the number of elements in an array: 90 | 91 | ```javascript 92 | fruits.length = 2; 93 | console.log(fruits); // logs ['apple', 'banana'] 94 | ``` 95 | 96 | Setting `fruits.length = 2` removes the last element from the array, so the array now only contains 'apple' and 'banana'. 97 | 98 | ## Array destructuring 99 | 100 | Array destructuring in JavaScript is a syntax that allows you to unpack values from arrays, or properties from objects, into distinct variables. 101 | 102 | ```javascript 103 | let fruits = ['apple', 'banana', 'cherry']; 104 | 105 | let [fruit1, fruit2, fruit3] = fruits; 106 | 107 | console.log(fruit1); // logs 'apple' 108 | console.log(fruit2); // logs 'banana' 109 | console.log(fruit3); // logs 'cherry' 110 | ``` 111 | 112 | In this example, the array `fruits` is destructured into three new variables `fruit1`, `fruit2`, and `fruit3`. The first element of the array is assigned to `fruit1`, the second element to `fruit2`, and the third element to `fruit3`. 113 | 114 | You can also skip over elements that you don't need: 115 | 116 | ```javascript 117 | let [fruit1, , fruit3] = fruits; 118 | 119 | console.log(fruit1); // logs 'apple' 120 | console.log(fruit3); // logs 'cherry' 121 | ``` 122 | 123 | The second element of the array is skipped and not assigned to any variable. 124 | 125 | ## The Spread Operator 126 | 127 | The `...` notation in JavaScript is known as the spread operator. It allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected. 128 | 129 | Here's an example of how to create a new array using the spread operator: 130 | 131 | ```javascript 132 | let fruits = ['apple', 'banana', 'cherry']; 133 | let moreFruits = [...fruits, 'date', 'elderberry']; 134 | 135 | console.log(moreFruits); // logs ['apple', 'banana', 'cherry', 'date', 'elderberry'] 136 | ``` 137 | 138 | Here, `...fruits` expands the elements of the `fruits` array into individual elements. The `moreFruits` array is a new array that contains all the elements of the `fruits` array, followed by 'date' and 'elderberry'. 139 | 140 | You can also use the spread operator to combine two arrays: 141 | 142 | ```javascript 143 | let fruits1 = ['apple', 'banana']; 144 | let fruits2 = ['cherry', 'date']; 145 | let allFruits = [...fruits1, ...fruits2]; 146 | 147 | console.log(allFruits); // logs ['apple', 'banana', 'cherry', 'date'] 148 | ``` 149 | 150 | `...fruits1` and `...fruits2` expand the elements of the `fruits1` and `fruits2` arrays into individual elements. The `allFruits` array is a new array that contains all the elements of the `fruits1` and `fruits2` arrays. -------------------------------------------------------------------------------- /docs/cheatsheet/error-handling.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Javascript Error Handling - Javascript Cheatsheet 3 | description: Error handling in programming is the process of responding to and managing errors that occur during the execution of a program. 4 | --- 5 | 6 | 7 | Javascript Error Handling 8 | 9 | 10 | Error handling in programming is the process of responding to and managing errors that occur during the execution of a program. 11 | 12 | 13 | 14 | Why is Error Handling Important? 15 | 16 | 17 | Error handling is important because it helps to ensure that your program can continue to function (or fail gracefully) even when unexpected conditions occur. 18 | 19 | 20 | 21 | Errors can occur for a variety of reasons, such as user input that the program doesn't know how to handle, system resources being unavailable, or unexpected conditions in the program's logic. 22 | 23 | 24 | ## Try...Catch Statements 25 | 26 | Error handling is typically done using `try...catch` statements: 27 | 28 | ```javascript 29 | try { 30 | // Code that may throw an error 31 | } catch (error) { 32 | // Code to handle the error 33 | } 34 | ``` 35 | 36 | In the `try` block, you write the code that may throw an error. In the `catch` block, you write the code to handle the error. The error object that is passed to the `catch` block contains information about the error, such as its name and message. 37 | 38 | ```javascript 39 | try { 40 | let x = y; // y is not defined, so an error is thrown 41 | } catch (error) { 42 | console.log(error.message); // Outputs: "y is not defined" 43 | } 44 | ``` 45 | 46 | **y** is not defined, so when we try to assign its value to **x**, an error is thrown. The catch block catches this error and logs its message to the console. 47 | 48 | ## Finally Block 49 | 50 | There's also a `finally` block that can be added after `catch`, which will be executed regardless of whether an error was thrown or caught: 51 | 52 | ```javascript 53 | try { 54 | // Code that may throw an error 55 | } catch (error) { 56 | // Code to handle the error 57 | } finally { 58 | // Code to be executed regardless of an error 59 | } 60 | ``` 61 | 62 | ## Throwing Errors 63 | 64 | Throwing errors in programming is a way to handle unexpected or exceptional conditions. It allows a function to indicate that it is unable to proceed with its normal execution, and gives control back to the part of the program that called the function. 65 | 66 | In many programming languages, you can "throw" an error (or "raise" an exception) with a `throw` statement. 67 | 68 | ```javascript 69 | function divide(a, b) { 70 | if (b === 0) { 71 | throw new Error("Division by zero is not allowed"); 72 | } 73 | return a / b; 74 | } 75 | ``` 76 | 77 | If the function `divide` is called with the second argument as `0`, it will throw an error. The calling code can then "catch" this error and handle it appropriately. 78 | 79 | ## Custom Error Types 80 | 81 | Creating custom error types can be useful when you want to throw and catch errors that represent specific conditions in your program. This allows you to handle different types of errors in different ways. 82 | 83 | Here's an example of how you can define and use a custom error type: 84 | 85 | ```javascript 86 | class DivisionByZeroError extends Error { 87 | constructor() { 88 | super("Division by zero is not allowed"); 89 | this.name = "DivisionByZeroError"; 90 | } 91 | } 92 | 93 | function divide(a, b) { 94 | if (b === 0) { 95 | throw new DivisionByZeroError(); 96 | } 97 | return a / b; 98 | } 99 | 100 | try { 101 | console.log(divide(1, 0)); 102 | } catch (error) { 103 | if (error instanceof DivisionByZeroError) { 104 | console.log(error.message); 105 | } else { 106 | throw error; 107 | } 108 | } 109 | ``` 110 | 111 | `DivisionByZeroError` is a custom error type that extends the built-in `Error` type. When `divide` is called with `0` as the second argument, it throws a `DivisionByZeroError`. The `try`/`catch` block then catches this error and handles it by logging the error message to the console. 112 | 113 | ## Error Propagation 114 | 115 | Error propagation refers to the process by which errors (or exceptions) are passed up the call stack from where they were thrown until they are caught by an appropriate error handler. 116 | 117 | In many programming languages, when an error is thrown and not immediately caught within the same function or method, it propagates up to the calling function. This continues until the error is either caught and handled, or it reaches the top level of the call stack, at which point the program typically crashes with an unhandled exception error. 118 | 119 | Here's an example in JavaScript: 120 | 121 | ```javascript 122 | function function1() { 123 | function2(); 124 | } 125 | 126 | function function2() { 127 | throw new Error("An error occurred"); 128 | } 129 | 130 | try { 131 | function1(); 132 | } catch (error) { 133 | console.log("Caught an error: " + error.message); 134 | } 135 | ``` 136 | 137 | `function2` throws an error. Since it's not caught within `function2`, it propagates up to `function1`. Again, it's not caught there, so it propagates up to the top level, where it is finally caught in the `try`/`catch` block. 138 | 139 | ## Asynchronous Error Handling 140 | 141 | Asynchronous error handling is a bit different from synchronous error handling. In asynchronous programming, because the operations are not blocking, errors can't be caught with a simple `try`/`catch` block. 142 | 143 | There are a few ways to handle errors in asynchronous code: 144 | 145 | 1. **Callbacks**: The most traditional way is to use a callback function that takes an error as its first argument. 146 | 147 | ```javascript 148 | fs.readFile('nonexistent-file.txt', function(err, data) { 149 | if (err) { 150 | console.error('There was an error reading the file!', err); 151 | return; 152 | } 153 | // Otherwise handle the data 154 | }); 155 | ``` 156 | 157 | 2. **Promises**: Promises have `.catch` method to handle any errors that might have occurred in the promise chain. 158 | 159 | ```javascript 160 | doSomething() 161 | .then(result => doSomethingElse(result)) 162 | .then(newResult => doAnotherThing(newResult)) 163 | .catch(error => console.error(error)); 164 | ``` 165 | 166 | 3. **Async/Await**: With async/await, you can use a `try`/`catch` block to handle errors, which can make your asynchronous code look and behave a little more like synchronous code. 167 | 168 | ```javascript 169 | async function doSomethingAsync() { 170 | try { 171 | const result = await doSomething(); 172 | const newResult = await doSomethingElse(result); 173 | await doAnotherThing(newResult); 174 | } catch (error) { 175 | console.error(error); 176 | } 177 | } 178 | ``` 179 | 180 | In all these cases, the key is to make sure that any function that might throw an error is properly handled to prevent the error from propagating up and crashing your program. 181 | -------------------------------------------------------------------------------- /docs/cheatsheet/manipulating-strings.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Javascript String Manipulation - Javascript Cheatsheet 3 | description: String manipulation refers to the process of changing, parsing, slicing, or analyzing strings in various ways. 4 | --- 5 | 6 | 7 | Javascript String Manipulation 8 | 9 | 10 | 11 | 12 | Manipulating Strings 13 | 14 | 15 | String manipulation refers to the process of changing, parsing, slicing, or analyzing strings in various ways. 16 | 17 | 18 | 19 | ## Concat 20 | 21 | The `concat` method is used to join two or more strings together. This method does not change the existing strings, but returns a new string containing the text of the joined strings. 22 | 23 | ```javascript 24 | let str1 = "Hello, "; 25 | let str2 = "World!"; 26 | let result = str1.concat(str2); 27 | 28 | console.log(result); // Outputs: "Hello, World!" 29 | ``` 30 | 31 | `str1` and `str2` are two strings. The `concat` method is called on `str1` with `str2` as the argument, resulting in a new string that is the concatenation of `str1` and `str2`. The new string is stored in the `result` variable. 32 | 33 | ## CharAt 34 | 35 | `charAt` method is used to get the character at a specific index in a string. The index of the first character is 0, the second character is 1, and so on. 36 | 37 | ```javascript 38 | let str = "Hello, World!"; 39 | let char = str.charAt(7); 40 | 41 | console.log(char); // Outputs: "W" 42 | ``` 43 | 44 | Here, `str` is a string. The `charAt` method is called on `str` with 7 as the argument, which corresponds to the 8th character in the string (since the index is 0-based). The character at this index is "W", so "W" is stored in the `char` variable and then logged to the console. 45 | 46 | ## Includes 47 | 48 | The `includes` method is used to determine whether one string can be found within another string, returning true or false as appropriate. It performs a case-sensitive search. 49 | 50 | ```javascript 51 | let str = "Hello, World!"; 52 | let result = str.includes("World"); 53 | 54 | console.log(result); // Outputs: true 55 | ``` 56 | 57 | `str` is a string. The `includes` method is called on `str` with "World" as the argument. Since "World" is a substring of `str`, the `includes` method returns true, which is stored in the `result` variable and then logged to the console. 58 | 59 | ## IndexOf 60 | 61 | `indexOf` method is used to determine the first occurrence of a specified value in a string. It returns the index of the value if found, or -1 if the value is not found. The search is case-sensitive. 62 | 63 | ```javascript 64 | let str = "Hello, World!"; 65 | let index = str.indexOf("World"); 66 | 67 | console.log(index); // Outputs: 7 68 | ``` 69 | 70 | `str` is a string. The `indexOf` method is called on `str` with "World" as the argument. Since "World" is a substring of `str` and starts at index 7, the `indexOf` method returns 7, which is stored in the `index` variable and then logged to the console. 71 | 72 | ## Slice 73 | 74 | The `slice` method is used to extract a section of a string and returns it as a new string, without modifying the original string. The method takes two parameters: the start index (inclusive), and the end index (exclusive). 75 | 76 | ```javascript 77 | let str = "Hello, World!"; 78 | let slicedStr = str.slice(7, 12); 79 | 80 | console.log(slicedStr); // Outputs: "World" 81 | ``` 82 | 83 | Here, `str` is a string. The `slice` method is called on `str` with 7 as the start index and 12 as the end index. This extracts the substring starting from the 8th character up to (but not including) the 13th character. The resulting substring "World" is stored in the `slicedStr` variable and then logged to the console. 84 | 85 | ## Split 86 | 87 | The `split` method is used to divide a string into an array of substrings. It takes a separator as an argument, which specifies the character(s) to use for separating the string. If the separator is not provided, the entire string will be returned as a single element in an array. 88 | 89 | ```javascript 90 | let str = "Hello, World!"; 91 | let array = str.split(", "); 92 | 93 | console.log(array); // Outputs: ["Hello", "World!"] 94 | ``` 95 | 96 | `str` is a string. The `split` method is called on `str` with ", " as the separator. This divides the string into two substrings "Hello" and "World!", which are returned as elements in an array. The array is stored in the `array` variable and then logged to the console. 97 | 98 | ## Replace 99 | 100 | The `replace` method is used to replace a specified value with another value in a string. It returns a new string with some or all matches of a pattern replaced by a replacement. The original string is not modified. 101 | 102 | ```javascript 103 | let str = "Hello, World!"; 104 | let newStr = str.replace("World", "Universe"); 105 | 106 | console.log(newStr); // Outputs: "Hello, Universe!" 107 | ``` 108 | 109 | `str` is a string. The `replace` method is called on `str` with "World" as the pattern to be replaced and "Universe" as the replacement. This results in a new string "Hello, Universe!", which is stored in the `newStr` variable and then logged to the console. 110 | 111 | ## ToLowerCase 112 | 113 | The `toLowerCase` method is used to convert a string to lowercase letters. This method does not change the original string, but returns a new string where all the uppercase characters are converted to lowercase. 114 | 115 | ```javascript 116 | let str = "Hello, World!"; 117 | let lowerCaseStr = str.toLowerCase(); 118 | 119 | console.log(lowerCaseStr); // Outputs: "hello, world!" 120 | ``` 121 | 122 | `str` is a string. The `toLowerCase` method is called on `str`, resulting in a new string where all the uppercase characters are converted to lowercase. The new string is stored in the `lowerCaseStr` variable and then logged to the console. 123 | 124 | ## ToUpperCase 125 | 126 | The `toUpperCase` method is used to convert a string to uppercase letters. This method does not change the original string, but returns a new string where all the lowercase characters are converted to uppercase. 127 | 128 | Here's an example of how to use the `toUpperCase` method: 129 | 130 | ```javascript 131 | let str = "Hello, World!"; 132 | let upperCaseStr = str.toUpperCase(); 133 | 134 | console.log(upperCaseStr); // Outputs: "HELLO, WORLD!" 135 | ``` 136 | 137 | `str` is a string. The `toUpperCase` method is called on `str`, resulting in a new string where all the lowercase characters are converted to uppercase. The new string is stored in the `upperCaseStr` variable and then logged to the console. 138 | 139 | ## Trim 140 | 141 | The `trim` method is used to remove whitespace from both ends of a string. This method does not change the original string, but returns a new string with the whitespace removed. 142 | 143 | ```javascript 144 | let str = " Hello, World! "; 145 | let trimmedStr = str.trim(); 146 | 147 | console.log(trimmedStr); // Outputs: "Hello, World!" 148 | ``` 149 | 150 | `str` is a string with leading and trailing whitespace. The `trim` method is called on `str`, resulting in a new string where the whitespace at both ends is removed. The new string is stored in the `trimmedStr` variable and then logged to the console. 151 | 152 | ## TrimLeft and TrimRight 153 | 154 | `trimLeft` and `trimRight` methods are used to remove whitespace from the beginning and end of a string respectively. These methods do not change the original string, but return a new string with the whitespace removed. 155 | 156 | ```javascript 157 | let str = " Hello, World! "; 158 | let trimmedLeftStr = str.trimLeft(); 159 | let trimmedRightStr = str.trimRight(); 160 | 161 | console.log(trimmedLeftStr); // Outputs: "Hello, World! " 162 | console.log(trimmedRightStr); // Outputs: " Hello, World!" 163 | ``` 164 | 165 | In this example, `str` is a string with leading and trailing whitespace. The `trimLeft` method is called on `str`, resulting in a new string where the whitespace at the beginning is removed. Similarly, the `trimRight` method is called on `str`, resulting in a new string where the whitespace at the end is removed. The new strings are stored in the `trimmedLeftStr` and `trimmedRightStr` variables and then logged to the console. 166 | -------------------------------------------------------------------------------- /docs/cheatsheet/map.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Javascript Map Object - Javascript Cheatsheet 3 | description: A Map is a built in object that holds key-value pairs. It can hold a key of any data type unlike in plain objects. It maintains the insertion order and provides helpers to manage key-value pairs. 4 | --- 5 | 6 | 7 | Javascript Map Object 8 | 9 | 10 | 11 | 12 | Javascript Map Object 13 | 14 | 15 | A Map is a built in object that holds key-value pairs. It can hold a key of any data type unlike in plain objects. It maintains the insertion order and provides helpers to manage key-value pairs. 16 | 17 | 18 | 19 | ## Creating a Map 20 | 21 | Creates an empty `Map` instance. 22 | 23 | ```javascript 24 | const map = new Map() 25 | ``` 26 | 27 | ## Initializing a Map 28 | 29 | You can initialize a Map with an array of key-value pairs. 30 | 31 | ```javascript 32 | const map = new Map([ 33 | ['id', 1], // key: 'id', value: 1 34 | ['name', 'Alice'], // key: 'name', value: 'Alice' 35 | ]) 36 | ``` 37 | 38 | ## Map Size 39 | 40 | `size` property returns the number of key-value pairs in a map. 41 | It returns a number. 42 | 43 | ```javascript 44 | map.size // 2 45 | ``` 46 | 47 | ## Map Set 48 | 49 | The `set(key, value)` method adds a key-value pair. 50 | If a key exists already, the value will be updated. 51 | `set()` affects the size of a map. 52 | 53 | ```javascript 54 | map.set('age', 50) // sets new key 'age' with value 50 55 | map.set(2, 200) // sets new key 2 with value 200 56 | map.set('id', 2) // id key already exists, so value of id will be updated to 2 57 | 58 | // Check size 59 | map.size // 4 60 | ``` 61 | 62 | You can also chain `set` like `map.set(key, value).set(key, value)` 63 | 64 | ## Map Get 65 | 66 | The `get(key)` retrieves the value of the specified key. 67 | If a key exists, its value will be returned otherwise undefined. 68 | 69 | ```javascript 70 | map.get('age') // 50 71 | map.get('none') // undefined as key 'none' do not exist 72 | ``` 73 | 74 | ## Map Has 75 | 76 | The `has(key)` returns a boolean by checking the key existence. 77 | 78 | ```javascript 79 | map.has('id') // true 80 | map.has('none') // false 81 | ``` 82 | 83 | ## Map Delete 84 | 85 | The `delete(key)` method removes the key-value pair with the specified key. 86 | It returns true if the key exists, otherwise false. 87 | `delete()` affects the size of a map. 88 | 89 | ```javascript 90 | map.delete('age') // true as key 'age' exists 91 | map.delete('none') // false as key 'none' do not exist 92 | 93 | // Check size 94 | map.size // 3 95 | ``` 96 | 97 | ## Map Clear 98 | 99 | The `clear` method removes all key-value pairs from the map. 100 | `clear` affects the size of a map. 101 | 102 | ```javascript 103 | map.clear() 104 | 105 | // Check size 106 | map.size // 0 107 | ``` 108 | 109 | ## Iterate Map using for ... of 110 | 111 | You can directly iterate using `for ... of` over each key-value pair. 112 | 113 | ```javascript 114 | const map = new Map() 115 | map.set('name', 'Bob').set('age', 20) 116 | for (const [key, value] of map) { 117 | console.log(`${key}: ${value}`) 118 | } 119 | 120 | // name: Bob 121 | // age: 20 122 | ``` 123 | 124 | ## Iterate Map using keys() 125 | 126 | You can iterate over the map keys using `keys()` method as in the order it was inserted. 127 | 128 | ```javascript 129 | const map = new Map() 130 | map.set('name', 'Bob').set('age', 20) 131 | for (const key of map.keys()) { 132 | console.log(`${key}`) 133 | } 134 | 135 | // name 136 | // age 137 | ``` 138 | 139 | ## Iterate Map using values() 140 | 141 | You can iterate over the map values using `values()` method as in the order it was inserted. 142 | 143 | ```javascript 144 | const map = new Map() 145 | map.set('name', 'Bob').set('age', 20) 146 | for (const value of map.values()) { 147 | console.log(`${value}`) 148 | } 149 | 150 | // Bob 151 | // 20 152 | ``` 153 | 154 | ## Iterate Map using entries() 155 | 156 | You can iterate over the map's key-value pair using `entries()` method as in the order it was inserted. 157 | 158 | ```javascript 159 | const map = new Map() 160 | map.set('name', 'Bob').set('age', 20) 161 | for (let [key, value] of map.entries()) { 162 | console.log(`${key}: ${value}`) 163 | } 164 | 165 | // name: Bob 166 | // age: 20 167 | ``` 168 | -------------------------------------------------------------------------------- /docs/cheatsheet/objects.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Javascript Objects - Javascript Cheatsheet 3 | description: JavaScript objects are containers for named values, called properties and methods. 4 | --- 5 | 6 | 7 | Javascript Objects 8 | 9 | 10 | JavaScript objects are containers for named values, called properties and methods. 11 | 12 | 13 | 14 | From the MDN Web Docs 15 | 16 | 17 | The Object type represents one of JavaScript's data types. It is used to store various keyed collections and more complex entities. Objects can be created using the Object() constructor or the object initializer / literal syntax. 18 | 19 | 20 | 21 | An example JavaScript object: 22 | 23 | ```javascript 24 | let car = { 25 | maker: "Toyota", 26 | model: "Camry", 27 | year: 2020, 28 | startEngine: function() { 29 | return "Engine started"; 30 | } 31 | }; 32 | ``` 33 | 34 | `maker`, `model`, and `year` are properties of the `car` object, and `startEngine` is a method. You can access the properties using dot notation (e.g., `car.maker`) or bracket notation (e.g., `car["maker"]`), and you can call the method like this: `car.startEngine()`. 35 | 36 | ## Object Declaration 37 | 38 | You can declare an object in a few different ways: 39 | 40 | 1. **Object Literal Syntax**: This is the most common way to create an object in JavaScript. You simply define the property and value within curly braces `{}`. 41 | 42 | ```javascript 43 | let obj = { 44 | key1: 'value1', 45 | key2: 'value2', 46 | key3: 'value3' 47 | }; 48 | ``` 49 | 50 | 2. **Object Constructor**: This is another way to create an object but it's not as commonly used as the literal syntax. 51 | 52 | ```javascript 53 | let obj = new Object(); 54 | obj.key1 = 'value1'; 55 | obj.key2 = 'value2'; 56 | obj.key3 = 'value3'; 57 | ``` 58 | 59 | 3. **Constructor Function**: If you need to create multiple objects with the same structure, you can use a constructor function. 60 | 61 | ```javascript 62 | function MyObject(key1, key2, key3) { 63 | this.key1 = key1; 64 | this.key2 = key2; 65 | this.key3 = key3; 66 | } 67 | 68 | let obj = new MyObject('value1', 'value2', 'value3'); 69 | ``` 70 | 71 | In all these examples, `obj` is an object with properties `key1`, `key2`, and `key3`. 72 | 73 | ## Object Properties 74 | 75 | You can read an object property using either `dot notation` or `bracket notation`. 76 | 77 | 1. **Dot Notation**: 78 | 79 | ```javascript 80 | let obj = { 81 | key1: 'value1', 82 | key2: 'value2', 83 | key3: 'value3' 84 | }; 85 | 86 | console.log(obj.key1); // Outputs: 'value1' 87 | ``` 88 | 89 | 2. **Bracket Notation**: 90 | 91 | ```javascript 92 | let obj = { 93 | key1: 'value1', 94 | key2: 'value2', 95 | key3: 'value3' 96 | }; 97 | 98 | console.log(obj['key1']); // Outputs: 'value1' 99 | ``` 100 | 101 | In both examples, we're reading the property `key1` from the object `obj`. 102 | 103 | ## Updating Object Properties 104 | 105 | Update the properties of an object using either `dot notation` or `bracket notation`. 106 | 107 | 1. **Dot Notation**: 108 | 109 | ```javascript 110 | let obj = { 111 | key1: 'value1', 112 | key2: 'value2', 113 | key3: 'value3' 114 | }; 115 | 116 | obj.key1 = 'new value1'; 117 | console.log(obj.key1); // Outputs: 'new value1' 118 | ``` 119 | 120 | 2. **Bracket Notation**: 121 | 122 | ```javascript 123 | let obj = { 124 | key1: 'value1', 125 | key2: 'value2', 126 | key3: 'value3' 127 | }; 128 | 129 | obj['key1'] = 'new value1'; 130 | console.log(obj['key1']); // Outputs: 'new value1' 131 | ``` 132 | 133 | In both cases, we're updating the property `key1` of the object `obj` to a new value. 134 | 135 | ## Adding Object Properties 136 | 137 | Add properties to an object after it has been created. This can be done using either `dot notation` or `bracket notation`. 138 | 139 | 1. **Dot Notation**: 140 | 141 | ```javascript 142 | let obj = { 143 | key1: 'value1', 144 | key2: 'value2' 145 | }; 146 | 147 | obj.key3 = 'value3'; 148 | console.log(obj.key3); // Outputs: 'value3' 149 | ``` 150 | 151 | 2. **Bracket Notation**: 152 | 153 | ```javascript 154 | let obj = { 155 | key1: 'value1', 156 | key2: 'value2' 157 | }; 158 | 159 | obj['key3'] = 'value3'; 160 | console.log(obj['key3']); // Outputs: 'value3' 161 | ``` 162 | 163 | In both examples, we're adding a new property `key3` to the object `obj`. 164 | 165 | ## Deleting Object Properties 166 | 167 | In JavaScript, you can delete properties from an object using the `delete` operator: 168 | 169 | ```javascript 170 | let obj = { 171 | key1: 'value1', 172 | key2: 'value2', 173 | key3: 'value3' 174 | }; 175 | 176 | delete obj.key1; 177 | console.log(obj.key1); // Outputs: undefined 178 | ``` 179 | 180 | We're deleting the property `key1` from the object `obj`. After the deletion, when we try to access `obj.key1`, it returns `undefined` because the property no longer exists. 181 | 182 | ## Checking if a Property Exists 183 | 184 | You can check if a property exists in an object using several methods: 185 | 186 | 1. **The `in` operator**: This returns `true` if the property exists in the object. 187 | 188 | ```javascript 189 | let obj = { 190 | key1: 'value1', 191 | key2: 'value2' 192 | }; 193 | 194 | console.log('key1' in obj); // Outputs: true 195 | console.log('key3' in obj); // Outputs: false 196 | ``` 197 | 198 | 2. **The `hasOwnProperty` method**: This returns `true` if the object has the specified property as its own property (not inherited). 199 | 200 | ```javascript 201 | let obj = { 202 | key1: 'value1', 203 | key2: 'value2' 204 | }; 205 | 206 | console.log(obj.hasOwnProperty('key1')); // Outputs: true 207 | console.log(obj.hasOwnProperty('key3')); // Outputs: false 208 | ``` 209 | 210 | 3. **Direct property access**: This checks if the property value is `undefined`. However, this method can give false negatives if the property exists but its value is set to `undefined`. 211 | 212 | ```javascript 213 | let obj = { 214 | key1: 'value1', 215 | key2: 'value2' 216 | }; 217 | 218 | console.log(obj.key1 !== undefined); // Outputs: true 219 | console.log(obj.key3 !== undefined); // Outputs: false 220 | ``` 221 | 222 | ## Iterating Over Object Properties 223 | 224 | Iterate over an object's properties using a `for...in` loop. 225 | 226 | ```javascript 227 | let obj = { 228 | key1: 'value1', 229 | key2: 'value2', 230 | key3: 'value3' 231 | }; 232 | 233 | for (let key in obj) { 234 | if (obj.hasOwnProperty(key)) { 235 | console.log(key + ': ' + obj[key]); 236 | } 237 | } 238 | ``` 239 | 240 | The `for...in` loop iterates over each property in the object `obj`. The `hasOwnProperty` method is used to ensure that the property belongs to the object itself and not its prototype chain. The output will be: 241 | 242 | ``` 243 | key1: value1 244 | key2: value2 245 | key3: value3 246 | ``` 247 | 248 | ## Object Methods 249 | 250 | Objects can have methods. Methods are functions that are stored as object properties. 251 | 252 | ```javascript 253 | let obj = { 254 | property1: 'value1', 255 | property2: 'value2', 256 | myMethod: function() { 257 | console.log('This is a method!'); 258 | } 259 | }; 260 | 261 | // Call the method 262 | obj.myMethod(); // Outputs: 'This is a method!' 263 | ``` 264 | 265 | `myMethod` is a method of the object `obj`. You can call it using the object name followed by the method name. 266 | 267 | You can also use the `this` keyword in methods to refer to the object: 268 | 269 | ```javascript 270 | let obj = { 271 | property1: 'value1', 272 | property2: 'value2', 273 | myMethod: function() { 274 | console.log('Property1 is ' + this.property1); 275 | } 276 | }; 277 | 278 | // Call the method 279 | obj.myMethod(); // Outputs: 'Property1 is value1' 280 | ``` 281 | 282 | `this.property1` within the method refers to the `property1` of the object `obj`. 283 | -------------------------------------------------------------------------------- /docs/cheatsheet/sets.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Javascript Sets - Javascript Cheatsheet 3 | description: A set is a built-in object that stores unique values of any type, whether primitive values or object references. 4 | --- 5 | 6 | 7 | Javascript Sets 8 | 9 | 10 | Sets are commonly used in scenarios where you need to work with collections of unique elements. 11 | 12 | 13 | 14 | From the MDN Web Docs 15 | 16 | 17 | The Set object lets you store unique values of any type, whether primitive values or object references. 18 | 19 | 20 | 21 | ## Common Use Cases 22 | 23 | ### Removing duplicates from an array 24 | 25 | Since a Set automatically removes duplicates, you can convert an array to a Set and back to an array to remove duplicate elements. 26 | 27 | ```javascript 28 | let array = [1, 2, 2, 3, 4, 4, 5]; 29 | let uniqueArray = [...new Set(array)]; 30 | console.log(uniqueArray); // Outputs: [1, 2, 3, 4, 5] 31 | ``` 32 | 33 | ### Membership check 34 | 35 | Checking if an element exists in a Set is faster and more efficient than checking if it exists in an array. 36 | 37 | ```javascript 38 | let mySet = new Set([1, 2, 3, 4, 5]); 39 | console.log(mySet.has(3)); // Outputs: true 40 | ``` 41 | 42 | ### Set operations 43 | 44 | You can perform operations like union, intersection, difference, and symmetric difference on Sets, similar to mathematical set operations. 45 | 46 | 47 | 48 | Remember! 49 | 50 | 51 | Sets only store unique values, so they are not suitable for cases where duplicate values are important. 52 | 53 | 54 | 55 | ## Set Declaration 56 | 57 | A Set is declared using the `new Set()` constructor. You can optionally pass an iterable (like an array) to the constructor to initialize the Set with values. 58 | 59 | ```javascript 60 | // Declare an empty Set 61 | let set1 = new Set(); 62 | 63 | // Declare a Set with initial values 64 | let set2 = new Set([1, 2, 3, 4, 5]); 65 | 66 | console.log(set1); // Outputs: Set(0) {} 67 | console.log(set2); // Outputs: Set(5) { 1, 2, 3, 4, 5 } 68 | ``` 69 | 70 | `set1` is an empty Set, and `set2` is a Set initialized with the values 1, 2, 3, 4, and 5. Note that Sets automatically remove duplicate values, so each value in a Set is unique. 71 | 72 | ## Checking if a Value Exists 73 | 74 | You can check if a value exists in a Set using the `has` method. The `has` method returns a boolean indicating whether the value exists in the Set: 75 | 76 | ```javascript 77 | let mySet = new Set([1, 2, 3, 4, 5]); 78 | 79 | console.log(mySet.has(1)); // Outputs: true 80 | console.log(mySet.has(6)); // Outputs: false 81 | ``` 82 | 83 | `mySet` is a Set initialized with the values 1, 2, 3, 4, and 5. The `has` method is used to check if the values 1 and 6 exist in the Set. 84 | 85 | ## Adding and Deleting Values 86 | 87 | Add and delete values in a Set using the `add` and `delete` methods respectively. 88 | 89 | ### Adding Values 90 | 91 | You can add a value to a Set using the `add` method. The `add` method appends a new element with a specified value to the end of a Set object. 92 | 93 | ```javascript 94 | let mySet = new Set(); 95 | 96 | mySet.add(1); 97 | mySet.add(2); 98 | mySet.add(3); 99 | 100 | console.log(mySet); // Outputs: Set(3) { 1, 2, 3 } 101 | ``` 102 | 103 | Here, we're adding the values 1, 2, and 3 to the Set `mySet`. 104 | 105 | ### Deleting Values 106 | 107 | You can delete a value from a Set using the `delete` method. The `delete` method removes the specified element from a Set. 108 | 109 | ```javascript 110 | let mySet = new Set([1, 2, 3]); 111 | 112 | mySet.delete(2); 113 | 114 | console.log(mySet); // Outputs: Set(2) { 1, 3 } 115 | ``` 116 | 117 | We're deleting the value 2 from the Set `mySet`. 118 | 119 | ## Getting the Size of a Set 120 | 121 | Get the size (number of elements) of a Set using the `size` property. 122 | 123 | ```javascript 124 | let mySet = new Set([1, 2, 3, 4, 5]); 125 | 126 | console.log(mySet.size); // Outputs: 5 127 | ``` 128 | 129 | `mySet` is a Set initialized with the values 1, 2, 3, 4, and 5. The `size` property is used to get the number of elements in the Set. 130 | 131 | ## Iterating Over a Set 132 | 133 | You can iterate over a Set using several methods: 134 | 135 | 1. **For...of loop**: Iterate over the values in a Set. 136 | 137 | ```javascript 138 | let mySet = new Set([1, 2, 3, 4, 5]); 139 | 140 | for (let value of mySet) { 141 | console.log(value); 142 | } 143 | ``` 144 | 145 | 2. **forEach method**: This allows you to execute a function for each value in a Set. 146 | 147 | ```javascript 148 | let mySet = new Set([1, 2, 3, 4, 5]); 149 | 150 | mySet.forEach(function(value) { 151 | console.log(value); 152 | }); 153 | ``` 154 | 155 | 3. **Spread operator**: Convert a Set into an Array, which can be useful for iteration. 156 | 157 | ```javascript 158 | let mySet = new Set([1, 2, 3, 4, 5]); 159 | let array = [...mySet]; 160 | 161 | array.forEach(function(value) { 162 | console.log(value); 163 | }); 164 | ``` 165 | 166 | In each of these examples, we're iterating over the Set `mySet` and logging each value to the console. 167 | 168 | ## Clearing a Set 169 | 170 | In JavaScript, you can clear all values from a Set using the `clear` method. 171 | 172 | ```javascript 173 | let mySet = new Set([1, 2, 3, 4, 5]); 174 | 175 | console.log(mySet.size); // Outputs: 5 176 | 177 | mySet.clear(); 178 | 179 | console.log(mySet.size); // Outputs: 0 180 | ``` 181 | 182 | `mySet` is a Set initialized with the values 1, 2, 3, 4, and 5. The `clear` method is used to remove all values from the Set. After clearing, the size of the Set is 0. 183 | 184 | In JavaScript, you can perform set operations like union, intersection, difference, and symmetric difference using Sets. Here's how you can do it: 185 | 186 | ## Set Union 187 | 188 | The union of two sets is a set of all elements from both sets. You can get the union of two sets by creating a new Set from the concatenation of the two sets. 189 | 190 | ```javascript 191 | let setA = new Set([1, 2, 3]); 192 | let setB = new Set([3, 4, 5]); 193 | 194 | let union = new Set([...setA, ...setB]); 195 | console.log([...union]); // Outputs: [1, 2, 3, 4, 5] 196 | ``` 197 | 198 | ## Set Intersection 199 | 200 | The intersection of two sets is a set of elements that are common to both sets. You can get the intersection of two sets by filtering one set for elements that also exist in the other set. 201 | 202 | ```javascript 203 | let setA = new Set([1, 2, 3]); 204 | let setB = new Set([3, 4, 5]); 205 | 206 | let intersection = new Set([...setA].filter(x => setB.has(x))); 207 | console.log([...intersection]); // Outputs: [3] 208 | ``` 209 | 210 | ## Set Difference 211 | 212 | The difference of two sets is a set of elements that exist in the first set but not in the second set. You can get the difference of two sets by filtering the first set for elements that do not exist in the second set. 213 | 214 | ```javascript 215 | let setA = new Set([1, 2, 3]); 216 | let setB = new Set([3, 4, 5]); 217 | 218 | let difference = new Set([...setA].filter(x => !setB.has(x))); 219 | console.log([...difference]); // Outputs: [1, 2] 220 | ``` 221 | 222 | ## Set Symmetric Difference 223 | 224 | The symmetric difference of two sets is a set of elements that exist in either of the two sets but not in their intersection. You can get the symmetric difference of two sets by getting the union of the two sets and then filtering out the intersection. 225 | 226 | ```javascript 227 | let setA = new Set([1, 2, 3]); 228 | let setB = new Set([3, 4, 5]); 229 | 230 | let union = new Set([...setA, ...setB]); 231 | let intersection = new Set([...setA].filter(x => setB.has(x))); 232 | 233 | let symmetricDifference = new Set([...union].filter(x => !intersection.has(x))); 234 | console.log([...symmetricDifference]); // Outputs: [1, 2, 4, 5] 235 | ``` -------------------------------------------------------------------------------- /docs/cheatsheet/string-formatting.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Javascript String Formatting - Javascript Cheatsheet 3 | description: In JavaScript, string formatting can be achieved in several ways. One common method is using template literals. 4 | --- 5 | 6 | 7 | Javascript String Formatting 8 | 9 | 10 | ## Template Literals 11 | 12 | **Template literals** (also known as template strings) are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were introduced in ECMAScript 6. 13 | 14 | 15 | 16 | From the MDN Web Docs 17 | 18 | 19 | Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates. 20 | 21 | 22 | 23 | Template literals can contain placeholders, indicated by the dollar sign and curly braces (`${expression}`). The expressions in the placeholders and the text between them get passed to a function. 24 | 25 | ```javascript 26 | let name = "John"; 27 | let age = 30; 28 | let greeting = `Hello, my name is ${name} and I am ${age} years old.`; 29 | 30 | console.log(greeting); // Outputs: "Hello, my name is John and I am 30 years old." 31 | ``` 32 | 33 | Here, `name` and `age` are variables. The template literal is defined using backticks, and the variables are embedded in the string using `${}` syntax. The resulting string is stored in the `greeting` variable and then logged to the console. 34 | 35 | ## String Concatenation 36 | 37 | String concatenation is the operation of joining two or more strings together. This can be achieved using the `+` operator or the `concat` method. 38 | 39 | ### Using the `+` Operator 40 | 41 | Here's an example of string concatenation using the `+` operator: 42 | 43 | ```javascript 44 | let str1 = "Hello, "; 45 | let str2 = "World!"; 46 | let result = str1 + str2; 47 | 48 | console.log(result); // Outputs: "Hello, World!" 49 | ``` 50 | 51 | `str1` and `str2` are strings. The `+` operator is used to concatenate `str1` and `str2` together. The resulting string is stored in the `result` variable and then logged to the console. 52 | 53 | ### Using the `concat` Method 54 | 55 | Here's an example of string concatenation using the `concat` method: 56 | 57 | ```javascript 58 | let str1 = "Hello, "; 59 | let str2 = "World!"; 60 | let result = str1.concat(str2); 61 | 62 | console.log(result); // Outputs: "Hello, World!" 63 | ``` 64 | 65 | `str1` and `str2` are strings. The `concat` method is called on `str1` with `str2` as the argument, concatenating `str1` and `str2` together. The resulting string is stored in the `result` variable and then logged to the console. 66 | 67 | ## The recommended way 68 | 69 | The recommended way to format strings in JavaScript is by using Template Literals (Template Strings) introduced in ECMAScript 6 (ES6). Template literals allow you to embed expressions, create multi-line strings, and use string interpolation features, making them a powerful tool for string formatting. 70 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build.environment] 2 | # bypass npm auto install 3 | NPM_FLAGS = "--version" 4 | NODE_VERSION = "16" 5 | 6 | [build] 7 | publish = "dist" 8 | command = "npx pnpm i --store=node_modules/.pnpm-store && npx pnpm run build" 9 | 10 | [[redirects]] 11 | from = "/*" 12 | to = "/index.html" 13 | status = 200 14 | 15 | [[headers]] 16 | for = "/manifest.webmanifest" 17 | [headers.values] 18 | Content-Type = "application/manifest+json" 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "dev": "vite", 5 | "build": "vite-ssg build", 6 | "preview": "vite preview", 7 | "test": "vitest --run", 8 | "lint": "eslint .", 9 | "typecheck": "vue-tsc --noEmit", 10 | "fetch-contributors": "esno scripts/fetch-contributors.ts" 11 | }, 12 | "dependencies": { 13 | "@docsearch/js": "^3.8.0", 14 | "@headlessui/vue": "^1.7.23", 15 | "@vueuse/core": "^10.11.1", 16 | "@vueuse/head": "^2.0.0", 17 | "pinia": "^2.2.6", 18 | "prism-theme-vars": "^0.2.5", 19 | "vue": "^3.5.13", 20 | "vue-router": "^4.4.5" 21 | }, 22 | "devDependencies": { 23 | "@tailwindcss/forms": "^0.5.9", 24 | "@tailwindcss/typography": "^0.5.15", 25 | "@types/fs-extra": "^11.0.4", 26 | "@types/markdown-it": "^14.1.2", 27 | "@types/markdown-it-link-attributes": "^3.0.5", 28 | "@types/node": "^22.9.0", 29 | "@types/string": "0.0.34", 30 | "@typescript-eslint/eslint-plugin": "^8.14.0", 31 | "@typescript-eslint/parser": "^8.14.0", 32 | "@vitejs/plugin-vue": "^5.2.0", 33 | "@vue/compiler-dom": "3.4.35", 34 | "@vue/test-utils": "^2.4.6", 35 | "autoprefixer": "^10.4.20", 36 | "esbuild": "^0.23.1", 37 | "eslint": "^9.15.0", 38 | "eslint-config-prettier": "^9.1.0", 39 | "eslint-plugin-vue": "^9.31.0", 40 | "esno": "^4.8.0", 41 | "fs-extra": "^11.2.0", 42 | "happy-dom": "^14.12.3", 43 | "markdown-it": "^14.1.0", 44 | "markdown-it-anchor": "^9.2.0", 45 | "markdown-it-link-attributes": "^4.0.1", 46 | "markdown-it-prism": "^2.3.0", 47 | "ofetch": "^1.4.1", 48 | "postcss": "^8.4.49", 49 | "prettier": "^3.3.3", 50 | "prettier-plugin-tailwindcss": "^0.6.8", 51 | "prismjs": "^1.29.0", 52 | "string": "^3.3.3", 53 | "tailwindcss": "^3.4.15", 54 | "typescript": "^5.6.3", 55 | "unplugin-auto-import": "^0.18.4", 56 | "unplugin-vue-components": "^0.27.4", 57 | "unplugin-vue-markdown": "^0.26.2", 58 | "vite": "^5.4.11", 59 | "vite-plugin-pages": "^0.32.3", 60 | "vite-plugin-pwa": "^0.20.5", 61 | "vite-plugin-vue-layouts": "^0.11.0", 62 | "vite-ssg": "^0.23.8", 63 | "vite-ssg-sitemap": "^0.6.1", 64 | "vitest": "^2.1.5", 65 | "vue-tsc": "^2.1.10" 66 | }, 67 | "pnpm": { 68 | "peerDependencyRules": { 69 | "ignoreMissing": [ 70 | "@algolia/client-search", 71 | "react", 72 | "react-dom", 73 | "@types/react" 74 | ] 75 | } 76 | } 77 | } -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/_headers: -------------------------------------------------------------------------------- 1 | /assets/* 2 | cache-control: max-age=31536000 3 | cache-control: immutable 4 | -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /api/* https://api.curated.co/api/v3/:splat 200 2 | /_ /index.html 200 3 | /\* /index.html 404 -------------------------------------------------------------------------------- /public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/apple-touch-icon.png -------------------------------------------------------------------------------- /public/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/favicon.ico -------------------------------------------------------------------------------- /public/fonts/Inter-italic.var.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/fonts/Inter-italic.var.woff2 -------------------------------------------------------------------------------- /public/fonts/Inter-roman.var.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/fonts/Inter-roman.var.woff2 -------------------------------------------------------------------------------- /public/fonts/lexend.txt: -------------------------------------------------------------------------------- 1 | Copyright 2018 The Lexend Project Authors (https://github.com/googlefonts/lexend), with Reserved Font Name “RevReading Lexend”. 2 | 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | This license is copied below, and is also available with a FAQ at: 5 | https://scripts.sil.org/OFL 6 | 7 | 8 | ----------------------------------------------------------- 9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 10 | ----------------------------------------------------------- 11 | 12 | PREAMBLE 13 | The goals of the Open Font License (OFL) are to stimulate worldwide 14 | development of collaborative font projects, to support the font creation 15 | efforts of academic and linguistic communities, and to provide a free and 16 | open framework in which fonts may be shared and improved in partnership 17 | with others. 18 | 19 | The OFL allows the licensed fonts to be used, studied, modified and 20 | redistributed freely as long as they are not sold by themselves. The 21 | fonts, including any derivative works, can be bundled, embedded, 22 | redistributed and/or sold with any software provided that any reserved 23 | names are not used by derivative works. The fonts and derivatives, 24 | however, cannot be released under any other type of license. The 25 | requirement for fonts to remain under this license does not apply 26 | to any document created using the fonts or their derivatives. 27 | 28 | DEFINITIONS 29 | "Font Software" refers to the set of files released by the Copyright 30 | Holder(s) under this license and clearly marked as such. This may 31 | include source files, build scripts and documentation. 32 | 33 | "Reserved Font Name" refers to any names specified as such after the 34 | copyright statement(s). 35 | 36 | "Original Version" refers to the collection of Font Software components as 37 | distributed by the Copyright Holder(s). 38 | 39 | "Modified Version" refers to any derivative made by adding to, deleting, 40 | or substituting -- in part or in whole -- any of the components of the 41 | Original Version, by changing formats or by porting the Font Software to a 42 | new environment. 43 | 44 | "Author" refers to any designer, engineer, programmer, technical 45 | writer or other person who contributed to the Font Software. 46 | 47 | PERMISSION & CONDITIONS 48 | Permission is hereby granted, free of charge, to any person obtaining 49 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 50 | redistribute, and sell modified and unmodified copies of the Font 51 | Software, subject to the following conditions: 52 | 53 | 1) Neither the Font Software nor any of its individual components, 54 | in Original or Modified Versions, may be sold by itself. 55 | 56 | 2) Original or Modified Versions of the Font Software may be bundled, 57 | redistributed and/or sold with any software, provided that each copy 58 | contains the above copyright notice and this license. These can be 59 | included either as stand-alone text files, human-readable headers or 60 | in the appropriate machine-readable metadata fields within text or 61 | binary files as long as those fields can be easily viewed by the user. 62 | 63 | 3) No Modified Version of the Font Software may use the Reserved Font 64 | Name(s) unless explicit written permission is granted by the corresponding 65 | Copyright Holder. This restriction only applies to the primary font name as 66 | presented to the users. 67 | 68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 69 | Software shall not be used to promote, endorse or advertise any 70 | Modified Version, except to acknowledge the contribution(s) of the 71 | Copyright Holder(s) and the Author(s) or with their explicit written 72 | permission. 73 | 74 | 5) The Font Software, modified or unmodified, in part or in whole, 75 | must be distributed entirely under this license, and must not be 76 | distributed under any other license. The requirement for fonts to 77 | remain under this license does not apply to any document created 78 | using the Font Software. 79 | 80 | TERMINATION 81 | This license becomes null and void if any of the above conditions are 82 | not met. 83 | 84 | DISCLAIMER 85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 93 | OTHER DEALINGS IN THE FONT SOFTWARE. 94 | -------------------------------------------------------------------------------- /public/fonts/lexend.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/fonts/lexend.woff2 -------------------------------------------------------------------------------- /public/googleccbf6035fc9d727f.html: -------------------------------------------------------------------------------- 1 | google-site-verification: googleccbf6035fc9d727f.html -------------------------------------------------------------------------------- /public/icons/favicon.svg: -------------------------------------------------------------------------------- 1 | 11 | 12 | 15 | 16 | -------------------------------------------------------------------------------- /public/icons/javascript_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/icons/javascript_logo.png -------------------------------------------------------------------------------- /public/mstile-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/mstile-144x144.png -------------------------------------------------------------------------------- /public/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/mstile-150x150.png -------------------------------------------------------------------------------- /public/mstile-310x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/mstile-310x150.png -------------------------------------------------------------------------------- /public/mstile-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/mstile-310x310.png -------------------------------------------------------------------------------- /public/mstile-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/mstile-70x70.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Allow: / -------------------------------------------------------------------------------- /public/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | Created by potrace 1.14, written by Peter Selinger 2001-2017 -------------------------------------------------------------------------------- /public/screenshots/capture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/screenshots/capture.png -------------------------------------------------------------------------------- /public/site.webmanifest: -------------------------------------------------------------------------------- 1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} -------------------------------------------------------------------------------- /public/snake.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/social/social_banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/social/social_banner.png -------------------------------------------------------------------------------- /public/sponsors/kinsta/SVG/PythonCheatSheet_banner_button-main.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/sponsors/kinsta/SVG/PythonCheatSheet_banner_kinsta_logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/sponsors/kinsta/SVG/kinsta-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/sponsors/kinsta/SVG/kinsta-mobile.png -------------------------------------------------------------------------------- /public/sponsors/kinsta/kinsta-logo-alpha-purple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/sponsors/kinsta/kinsta-logo-alpha-purple.png -------------------------------------------------------------------------------- /public/sponsors/kinsta/kinsta-logo-alpha-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/sponsors/kinsta/kinsta-logo-alpha-white.png -------------------------------------------------------------------------------- /public/sponsors/kinsta/kinsta-logo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/sponsors/kinsta/kinsta-logo1.png -------------------------------------------------------------------------------- /public/sponsors/kinsta/kinsta-logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/sponsors/kinsta/kinsta-logo2.png -------------------------------------------------------------------------------- /public/sponsors/kinsta/kinsta-logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/sponsors/kinsta/kinsta-logo3.png -------------------------------------------------------------------------------- /public/sponsors/practity/practity.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/sponsors/practity/practity.webp -------------------------------------------------------------------------------- /public/user-avatars/CodeWithBishal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/user-avatars/CodeWithBishal.png -------------------------------------------------------------------------------- /public/user-avatars/Harish-clb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/user-avatars/Harish-clb.png -------------------------------------------------------------------------------- /public/user-avatars/KamleshPandey98.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/user-avatars/KamleshPandey98.png -------------------------------------------------------------------------------- /public/user-avatars/Kishore007raj.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/user-avatars/Kishore007raj.png -------------------------------------------------------------------------------- /public/user-avatars/chrishenderson07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/user-avatars/chrishenderson07.png -------------------------------------------------------------------------------- /public/user-avatars/engtuncay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/user-avatars/engtuncay.png -------------------------------------------------------------------------------- /public/user-avatars/gritgary101.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/user-avatars/gritgary101.png -------------------------------------------------------------------------------- /public/user-avatars/hcz1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/user-avatars/hcz1.png -------------------------------------------------------------------------------- /public/user-avatars/wilfredinni.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/public/user-avatars/wilfredinni.png -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": [ 4 | "config:base" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /scripts/fetch-avatars.ts: -------------------------------------------------------------------------------- 1 | import { join, resolve } from 'pathe' 2 | import fs from 'fs-extra' 3 | import { ofetch } from 'ofetch' 4 | 5 | const docsDir = resolve(__dirname, '../') 6 | const pathContributors = resolve(docsDir, 'contributors/contributors.json') 7 | const dirAvatars = resolve(docsDir, 'public/user-avatars/') 8 | 9 | let contributors: string[] = [] 10 | 11 | async function download(url: string, fileName: string) { 12 | try { 13 | console.log('downloading', fileName) 14 | const image = await ofetch(url, { responseType: 'arrayBuffer' }) 15 | await fs.writeFile(fileName, Buffer.from(image)) 16 | } catch (e) { 17 | console.log('error downloading', fileName) 18 | } 19 | } 20 | 21 | export async function fetchAvatars() { 22 | await fs.ensureDir(dirAvatars) 23 | contributors = JSON.parse( 24 | await fs.readFile(pathContributors, { encoding: 'utf-8' }), 25 | ) 26 | 27 | await Promise.all( 28 | contributors.map((name) => 29 | download( 30 | `https://github.com/${name}.png?size=48`, 31 | join(dirAvatars, `${name}.png`), 32 | ), 33 | ), 34 | ) 35 | } 36 | -------------------------------------------------------------------------------- /scripts/fetch-contributors.ts: -------------------------------------------------------------------------------- 1 | import { promises as fs } from 'fs' 2 | import { ofetch } from 'ofetch' 3 | import { fetchAvatars } from './fetch-avatars' 4 | 5 | interface Contributor { 6 | login: string 7 | } 8 | 9 | async function fetchContributors(page = 1) { 10 | const collaborators: string[] = [] 11 | const data = 12 | (await ofetch( 13 | `https://api.github.com/repos/wilfredinni/javascript-cheatsheet/contributors?per_page=100&page=1`, 14 | { 15 | method: 'get', 16 | headers: { 17 | 'content-type': 'application/json', 18 | }, 19 | }, 20 | )) || [] 21 | collaborators.push(...data.map((i) => i.login)) 22 | const index = collaborators.indexOf('renovate[bot]') 23 | if (index > -1) collaborators.splice(index, 1) 24 | 25 | if (data.length === 100) { 26 | collaborators.push(...(await fetchContributors(page + 1))) 27 | } 28 | 29 | return collaborators 30 | } 31 | 32 | async function generate() { 33 | const collaborators = await fetchContributors() 34 | await fs.writeFile( 35 | './contributors/contributors.json', 36 | JSON.stringify(collaborators, null, 2), 37 | 'utf8', 38 | ) 39 | } 40 | 41 | const init = async () => { 42 | await generate() 43 | await fetchAvatars() 44 | } 45 | 46 | init() 47 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | 11 | 41 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/b2a431369dc56650c27555578ec07276c64bfdf0/src/assets/logo.png -------------------------------------------------------------------------------- /src/components.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | // @ts-nocheck 3 | // Generated by unplugin-vue-components 4 | // Read more: https://github.com/vuejs/core/pull/3399 5 | export {} 6 | 7 | /* prettier-ignore */ 8 | declare module 'vue' { 9 | export interface GlobalComponents { 10 | AlgoliaDocSearch: typeof import('./components/AlgoliaDocSearch.vue')['default'] 11 | ArrowIcon: typeof import('./components/icons/ArrowIcon.vue')['default'] 12 | BaseBadge: typeof import('./components/ui/BaseBadge.vue')['default'] 13 | BaseBadgeNotice: typeof import('./components/ui/BaseBadgeNotice.vue')['default'] 14 | BaseBadgeSecondary: typeof import('./components/ui/BaseBadgeSecondary.vue')['default'] 15 | BaseBanner: typeof import('./components/ui/BaseBanner.vue')['default'] 16 | BaseCustomizableLinkCard: typeof import('./components/ui/BaseCustomizableLinkCard.vue')['default'] 17 | BaseDisclaimer: typeof import('./components/ui/disclaimer/BaseDisclaimer.vue')['default'] 18 | BaseDisclaimerContent: typeof import('./components/ui/disclaimer/BaseDisclaimerContent.vue')['default'] 19 | BaseDisclaimerTitle: typeof import('./components/ui/disclaimer/BaseDisclaimerTitle.vue')['default'] 20 | BaseLinkCard: typeof import('./components/ui/BaseLinkCard.vue')['default'] 21 | BasePagination: typeof import('./components/ui/BasePagination.vue')['default'] 22 | BaseReaderMode: typeof import('./components/ui/BaseReaderMode.vue')['default'] 23 | BaseTable: typeof import('./components/ui/table/BaseTable.vue')['default'] 24 | BaseTableItem: typeof import('./components/ui/table/BaseTableItem.vue')['default'] 25 | BaseTableRow: typeof import('./components/ui/table/BaseTableRow.vue')['default'] 26 | BaseThemeToggle: typeof import('./components/ui/BaseThemeToggle.vue')['default'] 27 | BaseTitle: typeof import('./components/ui/BaseTitle.vue')['default'] 28 | BaseWarning: typeof import('./components/ui/warning/BaseWarning.vue')['default'] 29 | BaseWarningContent: typeof import('./components/ui/warning/BaseWarningContent.vue')['default'] 30 | BaseWarningTitle: typeof import('./components/ui/warning/BaseWarningTitle.vue')['default'] 31 | BlogTitleHeader: typeof import('./components/BlogTitleHeader.vue')['default'] 32 | BugIcon: typeof import('./components/icons/BugIcon.vue')['default'] 33 | CarbonAds: typeof import('./components/CarbonAds.vue')['default'] 34 | Contributors: typeof import('./components/Contributors.vue')['default'] 35 | Dialog: typeof import('@headlessui/vue')['Dialog'] 36 | DialogPanel: typeof import('@headlessui/vue')['DialogPanel'] 37 | DialogTitle: typeof import('@headlessui/vue')['DialogTitle'] 38 | EditIcon: typeof import('./components/icons/EditIcon.vue')['default'] 39 | EmptySection: typeof import('./components/EmptySection.vue')['default'] 40 | GithubIcon: typeof import('./components/icons/GithubIcon.vue')['default'] 41 | GridIcon: typeof import('./components/icons/GridIcon.vue')['default'] 42 | LightBulbIcon: typeof import('./components/icons/LightBulbIcon.vue')['default'] 43 | NetlifyBadge: typeof import('./components/NetlifyBadge.vue')['default'] 44 | NewBadge: typeof import('./components/ui/newBadge.vue')['default'] 45 | PluginIcon: typeof import('./components/icons/PluginIcon.vue')['default'] 46 | Prose: typeof import('./components/Prose.vue')['default'] 47 | QuestionIcon: typeof import('./components/icons/QuestionIcon.vue')['default'] 48 | ReferenceIcon: typeof import('./components/icons/ReferenceIcon.vue')['default'] 49 | RouterLink: typeof import('vue-router')['RouterLink'] 50 | RouterView: typeof import('vue-router')['RouterView'] 51 | Switch: typeof import('@headlessui/vue')['Switch'] 52 | TheFooter: typeof import('./components/layout/TheFooter.vue')['default'] 53 | TheNavbar: typeof import('./components/layout/TheNavbar.vue')['default'] 54 | TheNavbarReader: typeof import('./components/layout/TheNavbarReader.vue')['default'] 55 | TheSidebarDesktop: typeof import('./components/layout/TheSidebarDesktop.vue')['default'] 56 | TheSidebarMobile: typeof import('./components/layout/TheSidebarMobile.vue')['default'] 57 | TheSidebarNavigation: typeof import('./components/layout/TheSidebarNavigation.vue')['default'] 58 | TheToc: typeof import('./components/layout/TheToc.vue')['default'] 59 | TransitionChild: typeof import('@headlessui/vue')['TransitionChild'] 60 | TransitionRoot: typeof import('@headlessui/vue')['TransitionRoot'] 61 | WarningIcon: typeof import('./components/icons/WarningIcon.vue')['default'] 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/components/AlgoliaDocSearch.vue: -------------------------------------------------------------------------------- 1 | 106 | 107 | 110 | -------------------------------------------------------------------------------- /src/components/BlogTitleHeader.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 49 | -------------------------------------------------------------------------------- /src/components/CarbonAds.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 48 | 49 | 61 | -------------------------------------------------------------------------------- /src/components/Contributors.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 28 | -------------------------------------------------------------------------------- /src/components/EmptySection.vue: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /src/components/NetlifyBadge.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /src/components/Prose.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 32 | -------------------------------------------------------------------------------- /src/components/icons/ArrowIcon.vue: -------------------------------------------------------------------------------- 1 | 57 | -------------------------------------------------------------------------------- /src/components/icons/BugIcon.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /src/components/icons/EditIcon.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /src/components/icons/GithubIcon.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /src/components/icons/GridIcon.vue: -------------------------------------------------------------------------------- 1 | 69 | -------------------------------------------------------------------------------- /src/components/icons/LightBulbIcon.vue: -------------------------------------------------------------------------------- 1 | 62 | -------------------------------------------------------------------------------- /src/components/icons/PluginIcon.vue: -------------------------------------------------------------------------------- 1 | 93 | -------------------------------------------------------------------------------- /src/components/icons/QuestionIcon.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /src/components/icons/ReferenceIcon.vue: -------------------------------------------------------------------------------- 1 | 75 | -------------------------------------------------------------------------------- /src/components/icons/WarningIcon.vue: -------------------------------------------------------------------------------- 1 | 71 | -------------------------------------------------------------------------------- /src/components/layout/TheFooter.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 83 | -------------------------------------------------------------------------------- /src/components/layout/TheNavbar.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 93 | -------------------------------------------------------------------------------- /src/components/layout/TheNavbarReader.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 85 | -------------------------------------------------------------------------------- /src/components/layout/TheSidebarDesktop.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 18 | -------------------------------------------------------------------------------- /src/components/layout/TheSidebarMobile.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 86 | -------------------------------------------------------------------------------- /src/components/layout/TheSidebarNavigation.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 38 | -------------------------------------------------------------------------------- /src/components/layout/TheToc.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 55 | -------------------------------------------------------------------------------- /src/components/ui/BaseBadge.vue: -------------------------------------------------------------------------------- 1 | 32 | -------------------------------------------------------------------------------- /src/components/ui/BaseBadgeNotice.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 37 | -------------------------------------------------------------------------------- /src/components/ui/BaseBadgeSecondary.vue: -------------------------------------------------------------------------------- 1 | 25 | -------------------------------------------------------------------------------- /src/components/ui/BaseBanner.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 63 | 64 | 69 | -------------------------------------------------------------------------------- /src/components/ui/BaseCustomizableLinkCard.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 33 | -------------------------------------------------------------------------------- /src/components/ui/BaseLinkCard.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 36 | -------------------------------------------------------------------------------- /src/components/ui/BasePagination.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 59 | -------------------------------------------------------------------------------- /src/components/ui/BaseReaderMode.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /src/components/ui/BaseThemeToggle.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 71 | -------------------------------------------------------------------------------- /src/components/ui/BaseTitle.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 52 | 53 | 73 | -------------------------------------------------------------------------------- /src/components/ui/disclaimer/BaseDisclaimer.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /src/components/ui/disclaimer/BaseDisclaimerContent.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /src/components/ui/disclaimer/BaseDisclaimerTitle.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/components/ui/newBadge.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/components/ui/table/BaseTable.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 43 | -------------------------------------------------------------------------------- /src/components/ui/table/BaseTableItem.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/components/ui/table/BaseTableRow.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/components/ui/warning/BaseWarning.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /src/components/ui/warning/BaseWarningContent.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /src/components/ui/warning/BaseWarningTitle.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/composables/carbon.ts: -------------------------------------------------------------------------------- 1 | export function useCarbon() { 2 | const route = useRoute() 3 | const reader = useReaderStore() 4 | 5 | const reload = ref(false) 6 | 7 | watch( 8 | computed(() => reader.isActive), 9 | () => { 10 | if (reader.isActive) { 11 | reload.value = true 12 | nextTick(() => (reload.value = false)) 13 | } 14 | } 15 | ) 16 | 17 | watch( 18 | computed(() => route.path), 19 | () => { 20 | reload.value = true 21 | nextTick(() => (reload.value = false)) 22 | } 23 | ) 24 | 25 | function reloadOn(time: number) { 26 | setInterval(function () { 27 | if (!reader.isActive) { 28 | reload.value = true 29 | nextTick(() => (reload.value = false)) 30 | } 31 | }, time) 32 | } 33 | 34 | return { reload, reloadOn } 35 | } 36 | -------------------------------------------------------------------------------- /src/composables/dark.ts: -------------------------------------------------------------------------------- 1 | export const isDark = useDark() 2 | export const toggleDark = useToggle(isDark) 3 | export const preferredDark = usePreferredDark() 4 | -------------------------------------------------------------------------------- /src/composables/meta.ts: -------------------------------------------------------------------------------- 1 | export function useMeta() { 2 | const route = useRoute() 3 | const base_url = import.meta.env.VITE_BASE_URL || 'localhost:3000' 4 | 5 | const description = 6 | 'Anyone can forget how to make character classes for a regex, slice a list or do a for loop. This cheat sheet tries to provide a basic reference for beginner and advanced developers, lower the entry barrier for newcomers and help veterans refresh the old tricks.' 7 | // const cardImage = 8 | // 'https://raw.githubusercontent.com/wilfredinni/javascript-cheatsheet/master/public/social/social_banner.png' 9 | const themeColor = computed(() => (isDark.value ? '#1f2937' : '#ffffff')) 10 | const url = computed(() => `https://${base_url}${route.path}`) 11 | const keywords = [ 12 | 'javascript', 13 | 'cheatsheet', 14 | 'cheat', 15 | 'sheet', 16 | 'functions', 17 | 'args', 18 | 'kwargs', 19 | 'sets', 20 | 'dictionary', 21 | 'list', 22 | 'string', 23 | 'regular', 24 | 'expression', 25 | 'formatting', 26 | 'file', 27 | 'path', 28 | 'json', 29 | 'test', 30 | 'vscode', 31 | 'comprehension', 32 | 'exception', 33 | 'debugging', 34 | 'dataclasses', 35 | 'environments', 36 | 'flow control', 37 | 'itertools', 38 | ] 39 | 40 | const meta = { 41 | title: 'Javascript Cheatsheet - Javascript Cheatsheet', 42 | description, 43 | meta: [ 44 | { name: 'theme-color', content: themeColor }, 45 | { name: 'description', content: description }, 46 | { name: 'author', content: 'Javascript Cheatsheet' }, 47 | { name: 'keywords', content: keywords.join(', ') }, 48 | { property: 'og:title', content: 'Javascript Cheatsheet' }, 49 | { property: 'og:description', content: description }, 50 | { property: 'og:url', content: url }, 51 | { property: 'og:type', content: 'article' }, 52 | // { property: 'og:image', content: cardImage }, 53 | { name: 'twitter:title', content: 'Javascript Cheatsheet' }, 54 | { name: 'twitter:description', content: 'The Javascript Cheatsheet' }, 55 | // { name: 'twitter:image', content: cardImage }, 56 | { name: 'twitter:card', content: 'summary' }, 57 | ], 58 | link: [{ rel: 'canonical', href: url }], 59 | } 60 | 61 | return { meta, description } 62 | } 63 | -------------------------------------------------------------------------------- /src/composables/scroll.ts: -------------------------------------------------------------------------------- 1 | export function useScrollBehavior() { 2 | const router = useRouter() 3 | router.options.scrollBehavior = (to, _from, savedPosition) => { 4 | if (savedPosition) return savedPosition 5 | if (to.hash) return { el: to.hash, behavior: 'smooth' } 6 | else return { top: 0, behavior: 'smooth' } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/composables/toc.ts: -------------------------------------------------------------------------------- 1 | import type { Ref } from 'vue' 2 | import { breakpointsTailwind } from '@vueuse/core' 3 | 4 | export function useToc() { 5 | const breakpoints = useBreakpoints(breakpointsTailwind) 6 | const lgAndLarger = breakpoints.greater('lg') 7 | 8 | interface Toc { 9 | header: string 10 | id: string 11 | } 12 | 13 | const theToc: Ref = ref([]) 14 | const createToc = () => { 15 | const h2 = document.getElementsByTagName('h2') 16 | theToc.value = Array.from(h2).map((item) => { 17 | return { header: item.innerText, id: item.id } 18 | }) 19 | } 20 | 21 | const currentSection = ref('') 22 | const getObserver = () => { 23 | const observer = new IntersectionObserver( 24 | (entries) => { 25 | entries.forEach((entry) => { 26 | if (entry.intersectionRatio > 0) { 27 | currentSection.value = entry.target.getAttribute('id') as string 28 | } 29 | }) 30 | }, 31 | { 32 | rootMargin: '0px 0px -50% 0px', 33 | } 34 | ) 35 | document.querySelectorAll('article h2').forEach((section) => { 36 | observer.observe(section) 37 | }) 38 | } 39 | 40 | const initToc = () => { 41 | if (lgAndLarger.value) { 42 | createToc() 43 | getObserver() 44 | } 45 | } 46 | 47 | const route = useRoute() 48 | onMounted(() => { 49 | initToc() 50 | }) 51 | 52 | watch(route, () => { 53 | nextTick(() => { 54 | initToc() 55 | }) 56 | }) 57 | 58 | return { theToc, currentSection } 59 | } 60 | -------------------------------------------------------------------------------- /src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import type { DefineComponent } from 'vue' 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } 9 | -------------------------------------------------------------------------------- /src/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 67 | 68 | 73 | -------------------------------------------------------------------------------- /src/layouts/empty.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/layouts/fullPage.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 54 | 55 | 60 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { ViteSSG } from 'vite-ssg' 2 | import { setupLayouts } from 'virtual:generated-layouts' 3 | import generatedRoutes from '~pages' 4 | import App from './App.vue' 5 | import type { UserModule } from './types' 6 | 7 | import './styles/index.css' 8 | 9 | const routes = setupLayouts(generatedRoutes) 10 | 11 | // https://github.com/antfu/vite-ssg 12 | export const createApp = ViteSSG( 13 | App, 14 | { routes, base: import.meta.env.BASE_URL }, 15 | (ctx) => { 16 | // install all modules under `modules/` 17 | Object.values( 18 | import.meta.glob<{ install: UserModule }>('./modules/*.ts', { 19 | eager: true, 20 | }) 21 | ).forEach((i) => i.install?.(ctx)) 22 | } 23 | ) 24 | -------------------------------------------------------------------------------- /src/modules/pinia.ts: -------------------------------------------------------------------------------- 1 | import { createPinia } from 'pinia' 2 | import { type UserModule } from '~/types' 3 | 4 | // Setup Pinia 5 | // https://pinia.esm.dev/ 6 | export const install: UserModule = ({ isClient, initialState, app }) => { 7 | const pinia = createPinia() 8 | app.use(pinia) 9 | // Refer to 10 | // https://github.com/antfu/vite-ssg/blob/main/README.md#state-serialization 11 | // for other serialization strategies. 12 | if (isClient) pinia.state.value = initialState.pinia || {} 13 | else initialState.pinia = pinia.state.value 14 | } 15 | -------------------------------------------------------------------------------- /src/modules/pwa.ts: -------------------------------------------------------------------------------- 1 | import { type UserModule } from '~/types' 2 | 3 | // https://github.com/antfu/vite-plugin-pwa#automatic-reload-when-new-content-available 4 | export const install: UserModule = ({ isClient, router }) => { 5 | if (!isClient) return 6 | 7 | router 8 | .isReady() 9 | .then(async () => { 10 | const { registerSW } = await import('virtual:pwa-register') 11 | registerSW({ immediate: true }) 12 | }) 13 | .catch(() => {}) 14 | } 15 | -------------------------------------------------------------------------------- /src/pages/[...all].vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 57 | 58 | 59 | meta: 60 | layout: empty 61 | 62 | -------------------------------------------------------------------------------- /src/pages/changelog.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Changelog - Javascript Cheatsheet' 3 | description: See what is new, what got fixed, and what is coming. 4 | date: July 19, 2022 5 | updated: February 25, 2023 6 | --- 7 | 8 | 9 | Changelog 10 | 11 | 12 | ## 2024-09-22 13 | 14 | - Added Javascript Map Objects. Thanks [@Harish-clb](https://github.com/Harish-clb) 15 | - Updated changelog. 16 | - Updated contributors. 17 | - Updated packages and dependencies. 18 | 19 | ## 2024-07-11 20 | 21 | - Added a missing operator in Bitwise operators. Thanks [@Kishore007raj](https://github.com/Kishore007raj) 22 | - Fixed missing style (DocSearch-VisuallyHiddenForAccessibility). Thanks [@gritgary101](https://github.com/gritgary101) 23 | 24 | ## 2024-01-29 25 | 26 | The release of the new **www.javascriptcheatsheet.org** website: 27 | 28 | - Complete re-design with **Vue 3** and **Tailwind CSS**. 29 | - The site is now a **PWA** and can be installed in any platform that has a compatible web browser. 30 | - Added a **dark mode**. 31 | - Added a **reader mode**. 32 | - Added **Algolia search**. 33 | - Added contributors to the index page 🥰 34 | - Added, fixed and removed code examples. 35 | - Added an **Edit this page on GitHub** link to make it easier to contribute. 36 | - Changed hosting to **Netlify** with an OSS plan 🎉 37 | - Removed and joined cheatsheet sections. 38 | - Fixed grammar and spelling mistakes. 39 | -------------------------------------------------------------------------------- /src/pages/contributing.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Contributing - Javascript Cheatsheet' 3 | description: The following is a set of guidelines for contributing to the Javascript Cheatsheet. These are mostly guidelines, not rules. Use your best judgment, and feel free to propose changes to this document. 4 | date: June 09, 2018 5 | updated: July 3, 2022 6 | --- 7 | 8 | 9 | Contributing 10 | 11 | 12 | First off, thank you for taking the time to contribute! 13 | 14 | The following is a set of guidelines for contributing to the Javascript Cheatsheet. These are mostly guidelines, not rules. Use your best judgment, and please don't hesitate to propose changes to [this document](https://github.com/wilfredinni/javascript-cheatsheet/blob/master/src/pages/contributing.md). 15 | 16 | ## Code of Conduct 17 | 18 | This project and everyone who participates in it is governed by the [Contributor Covenant Code of Conduct](https://github.com/wilfredinni/javascript-cheatsheet/blob/master/CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to services@github.com. 19 | 20 | ## Running the project locally 21 | 22 | 1. Install the [pnpm](https://pnpm.io/installation) package manager 23 | 24 | On Linux/macOS: 25 | 26 | curl -fsSL https://get.pnpm.io/install.sh | sh - 27 | 28 | On Windows (PowerShell): 29 | 30 | iwr https://get.pnpm.io/install.ps1 -useb | iex 31 | 32 | 2. Clone the project, and install the dependencies: 33 | 34 | git clone https://github.com/wilfredinni/javascript-cheatsheet.git 35 | cd javascript-cheatsheet 36 | pnpm install 37 | 38 | 3. Create a new branch: 39 | 40 | git branch fix_bug 41 | git checkout fix_bug 42 | 43 | 4. Change/upgrade/add the changes you want 44 | 5. Update the `README` if needed 45 | 6. `Add`, `commit` and `push` your changes to GitHub: 46 | 47 | git add . 48 | git commit -m 'succinct explanation of what changed' 49 | git push origin fix_bug 50 | 51 | 7. Open a [pull request](https://github.com/wilfredinni/javascript-cheatsheet/pulls) 52 | 53 | ## You can: 54 | 55 | - Submit changes to the cheatsheet 56 | - Improve existing topics and examples 57 | - Add new topics or resources 58 | - Ask for new topics by creating an [Issue](https://github.com/wilfredinni/javascript-cheatsheet/issues) 59 | - Read the issues, fork the project and do a [Pull Request](https://github.com/wilfredinni/javascript-cheatsheet/pulls) 60 | - Report any kind of error or typo by creating an [Issue](https://github.com/wilfredinni/javascript-cheatsheet/issues) or fix it with a [Pull Request](https://github.com/wilfredinni/javascript-cheatsheet/pulls) 61 | 62 | ## What you need to know 63 | 64 | If you don't know where to start: 65 | 66 | - [Mastering Markdown](https://guides.github.com/features/mastering-markdown/) 67 | - [Mastering Issues](https://guides.github.com/features/issues/) 68 | - [Forking Projects](https://guides.github.com/activities/forking/) 69 | - And read the rest of the [GitHub Guides](https://guides.github.com/) 70 | -------------------------------------------------------------------------------- /src/pages/index.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 117 | -------------------------------------------------------------------------------- /src/store/navigation.ts: -------------------------------------------------------------------------------- 1 | import { acceptHMRUpdate, defineStore } from 'pinia' 2 | 3 | export interface NavigationItem { 4 | name: string 5 | path: string 6 | updated?: boolean 7 | internal?: boolean 8 | } 9 | 10 | export const useNavigationStore = defineStore('navigation', { 11 | state: () => ({ 12 | navbarNavigation: [] as NavigationItem[], 13 | mainNavigation: [ 14 | { 15 | name: 'Getting started', 16 | path: '/', 17 | }, 18 | { 19 | name: 'Contributing', 20 | path: '/contributing', 21 | }, 22 | { 23 | name: 'Changelog', 24 | path: '/changelog', 25 | }, 26 | ] as NavigationItem[], 27 | cheatsheetNavigation: [ 28 | { 29 | name: 'Basics', 30 | path: '/cheatsheet/basics', 31 | updated: false, 32 | }, 33 | { 34 | name: 'Control Flow', 35 | path: '/cheatsheet/control-flow', 36 | updated: false, 37 | }, 38 | { 39 | name: 'Functions', 40 | path: '/cheatsheet/functions', 41 | updated: false, 42 | }, 43 | { 44 | name: 'Arrays', 45 | path: '/cheatsheet/arrays', 46 | updated: false, 47 | }, 48 | { 49 | name: 'Array Methods', 50 | path: '/cheatsheet/array-methods', 51 | updated: false, 52 | }, 53 | { 54 | name: 'Objects', 55 | path: '/cheatsheet/objects', 56 | updated: false, 57 | }, 58 | { 59 | name: 'Map', 60 | path: '/cheatsheet/map', 61 | updated: false, 62 | }, 63 | { 64 | name: 'Sets', 65 | path: '/cheatsheet/sets', 66 | updated: false, 67 | }, 68 | { 69 | name: 'String Manipulation', 70 | path: '/cheatsheet/manipulating-strings', 71 | updated: false, 72 | }, 73 | { 74 | name: 'String Formatting', 75 | path: '/cheatsheet/string-formatting', 76 | updated: false, 77 | }, 78 | { 79 | name: 'Regular Expressions', 80 | path: '/cheatsheet/regular-expressions', 81 | updated: false, 82 | }, 83 | { 84 | name: 'Files and Directories', 85 | path: '/cheatsheet/directory-files', 86 | updated: false, 87 | }, 88 | { 89 | name: 'Error Handling', 90 | path: '/cheatsheet/error-handling', 91 | updated: false, 92 | }, 93 | { 94 | name: 'Debugging', 95 | path: '/cheatsheet/debugging', 96 | updated: false, 97 | }, 98 | ] as NavigationItem[], 99 | }), 100 | }) 101 | 102 | if (import.meta.hot) { 103 | import.meta.hot.accept(acceptHMRUpdate(useNavigationStore, import.meta.hot)) 104 | } 105 | -------------------------------------------------------------------------------- /src/store/newsletter.ts: -------------------------------------------------------------------------------- 1 | import { acceptHMRUpdate, defineStore } from 'pinia' 2 | import { ofetch } from 'ofetch' 3 | 4 | interface newsletterResponse { 5 | id?: number 6 | newsletter?: string 7 | email?: string 8 | error_message?: string 9 | errors?: string[] 10 | success?: boolean 11 | } 12 | 13 | export const useNewsletterStore = defineStore('useNewsletterStore', { 14 | state: () => ({ 15 | response: null as newsletterResponse | null, 16 | }), 17 | 18 | getters: { 19 | getResponse: (state) => state.response, 20 | }, 21 | 22 | actions: { 23 | async subscribe(email: string) { 24 | const grudgetToken = import.meta.env.VITE_GRUDGET_TOKEN || null 25 | const baseUrl = import.meta.env.VITE_GRUDGET_ENDPOINT || null 26 | const newsletter = import.meta.env.VITE_GRUDGET_NEWSLETTER || null 27 | 28 | const response = await ofetch(`${baseUrl}/newsletter/subscribers/`, { 29 | method: 'POST', 30 | body: { email: email, newsletter: newsletter }, 31 | headers: { 32 | Accept: 'application/json', 33 | 'Content-type': 'application/json', 34 | Authorization: `token ${grudgetToken}`, 35 | }, 36 | }).catch((error) => error.data) 37 | 38 | this.response = response 39 | }, 40 | }, 41 | }) 42 | 43 | if (import.meta.hot) { 44 | import.meta.hot.accept(acceptHMRUpdate(useNewsletterStore, import.meta.hot)) 45 | } 46 | -------------------------------------------------------------------------------- /src/store/reader.ts: -------------------------------------------------------------------------------- 1 | import { acceptHMRUpdate, defineStore } from 'pinia' 2 | 3 | export const useReaderStore = defineStore('reader', { 4 | state: () => ({ 5 | readerMode: false, 6 | availableFontSizes: [ 7 | 'prose-sm', 8 | 'prose-md', 9 | 'prose-lg', 10 | 'prose-xl', 11 | 'prose-2xl', 12 | ], 13 | currentFontSize: 'prose-xl', 14 | }), 15 | 16 | getters: { 17 | isActive: (state) => state.readerMode, 18 | fontSize: (state) => state.currentFontSize, 19 | fontSizes: (state) => state.availableFontSizes, 20 | }, 21 | 22 | actions: { 23 | toggle() { 24 | this.currentFontSize = 'prose-xl' 25 | this.readerMode = !this.readerMode 26 | }, 27 | 28 | setFontSize(size: string) { 29 | this.currentFontSize = size 30 | }, 31 | }, 32 | }) 33 | 34 | if (import.meta.hot) { 35 | import.meta.hot.accept(acceptHMRUpdate(useReaderStore, import.meta.hot)) 36 | } 37 | -------------------------------------------------------------------------------- /src/styles/carbon.css: -------------------------------------------------------------------------------- 1 | #carbonads * { 2 | margin: initial; 3 | padding: initial; 4 | text-align: center; 5 | } 6 | 7 | #carbonads { 8 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 9 | Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, 10 | sans-serif; 11 | display: inline-block; 12 | font-size: 13px; 13 | max-height: 200px; 14 | } 15 | 16 | #carbonads a, 17 | #carbonads a:hover { 18 | color: #444; 19 | text-decoration: none; 20 | } 21 | 22 | #carbonads > span { 23 | display: grid; 24 | max-width: 200px; 25 | padding: 1.5em; 26 | box-sizing: border-box; 27 | } 28 | 29 | #carbonads img { 30 | margin: auto; 31 | border-radius: 5%; 32 | } 33 | 34 | #carbonads .carbon-wrap { 35 | display: grid; 36 | row-gap: 1em; 37 | height: 220px; 38 | } 39 | #carbonads .carbon-text { 40 | font-size: 1em; 41 | margin-bottom: 5em; 42 | } 43 | 44 | .dark #carbonads .carbon-text { 45 | color: #e2e8f0; 46 | } 47 | 48 | #carbonads .carbon-poweredby { 49 | opacity: 0.5; 50 | font-size: 0.725em; 51 | text-transform: uppercase; 52 | font-weight: 600; 53 | letter-spacing: 0.05ch; 54 | } 55 | 56 | .dark #carbonads .carbon-poweredby { 57 | color: #e2e8f0; 58 | } 59 | -------------------------------------------------------------------------------- /src/styles/fonts.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Lexend'; 3 | font-style: normal; 4 | font-weight: 100 900; 5 | font-display: swap; 6 | src: url(/fonts/lexend.woff2) format('woff2'); 7 | } 8 | @font-face { 9 | font-family: 'Inter'; 10 | font-weight: 100 900; 11 | font-display: block; 12 | font-style: normal; 13 | font-named-instance: 'Regular'; 14 | src: url('/fonts/Inter-roman.var.woff2') format('woff2'); 15 | } 16 | @font-face { 17 | font-family: 'Inter'; 18 | font-weight: 100 900; 19 | font-display: block; 20 | font-style: italic; 21 | font-named-instance: 'Italic'; 22 | src: url('/fonts/Inter-italic.var.woff2') format('woff2'); 23 | } 24 | -------------------------------------------------------------------------------- /src/styles/index.css: -------------------------------------------------------------------------------- 1 | @import './markdown.css'; 2 | @import './fonts.css'; 3 | @import './docsearch.css'; 4 | @import './carbon.css'; 5 | @tailwind base; 6 | @tailwind components; 7 | @tailwind utilities; 8 | -------------------------------------------------------------------------------- /src/styles/markdown.css: -------------------------------------------------------------------------------- 1 | /* https://github.com/antfu/prism-theme-vars */ 2 | @import 'prism-theme-vars/base.css'; 3 | 4 | .prose { 5 | --prism-font-family: 'DM Mono', monospace; 6 | } 7 | 8 | .prose img { 9 | width: 100%; 10 | } 11 | 12 | html .prose { 13 | --prism-foreground: #f8fafc; 14 | --prism-background: #2f2f2f; 15 | --prism-comment: #94a3b8; 16 | --prism-string: #a5e844; 17 | --prism-interpolation: #ff6666; 18 | --prism-literal: #429988; 19 | --prism-keyword: #7bddff; 20 | --prism-operator: #7bddff; 21 | --prism-boolean: #7bddff; 22 | --prism-number: #fd9170; 23 | --prism-variable: #ff6666; 24 | --prism-function: #c792ea; 25 | --prism-deleted: #a14f55; 26 | --prism-class: #ffcb6b; 27 | --prism-builtin: #82aaff; 28 | --prism-property: #80cbc4; 29 | --prism-namespace: #db889a; 30 | --prism-punctuation: #89ddff; 31 | --prism-decorator: #bd8f8f; 32 | --prism-regex: #f2ff00; 33 | --prism-json-property: #6b8b9e; 34 | --prism-line-number: #888888; 35 | --prism-line-number-gutter: #eeeeee; 36 | --prism-line-highlight-background: #444444; 37 | --prism-selection-background: #444444; 38 | --prism-font-size: 1.03em; 39 | --prism-tab-size: 4; 40 | } 41 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | import { type ViteSSGContext } from 'vite-ssg' 2 | 3 | // eslint-disable-next-line no-unused-vars 4 | export type UserModule = (ctx: ViteSSGContext) => void 5 | -------------------------------------------------------------------------------- /src/types/index.d.ts: -------------------------------------------------------------------------------- 1 | export {} 2 | 3 | declare global { 4 | // eslint-disable-next-line no-unused-vars 5 | interface Window { 6 | dataLayer: any 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/types/ui.ts: -------------------------------------------------------------------------------- 1 | import { FunctionalComponent } from 'vue' 2 | 3 | type optionsObject = { 4 | [key: string]: string 5 | } 6 | 7 | type colorObject = { 8 | [key: string]: string | undefined 9 | primary?: string 10 | secondary?: string 11 | transparent?: string 12 | danger?: string 13 | black?: string 14 | blue?: string 15 | gray?: string 16 | purple?: string 17 | pink?: string 18 | orange?: string 19 | green?: string 20 | slate?: string 21 | zinc?: string 22 | neutral?: string 23 | stone?: string 24 | amber?: string 25 | yellow?: string 26 | lime?: string 27 | emerald?: string 28 | tal?: string 29 | cyan?: string 30 | sky?: string 31 | indigo?: string 32 | violet?: string 33 | fuchsia?: string 34 | rose?: string 35 | } 36 | 37 | type sizeObject = { 38 | [key: string]: string | undefined 39 | xs?: string 40 | sm: string 41 | md: string 42 | lg?: string 43 | xl?: string 44 | square?: string 45 | } 46 | 47 | type iconObject = { 48 | [key: string]: FunctionalComponent 49 | } 50 | 51 | export { optionsObject, colorObject, sizeObject, iconObject } 52 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | const defaultTheme = require('tailwindcss/defaultTheme') 2 | 3 | /** @type {import('tailwindcss').Config} */ 4 | module.exports = { 5 | content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], 6 | darkMode: 'class', 7 | theme: { 8 | fontSize: { 9 | xs: ['0.75rem', { lineHeight: '1rem' }], 10 | sm: ['0.875rem', { lineHeight: '1.5rem' }], 11 | base: ['1rem', { lineHeight: '2rem' }], 12 | lg: ['1.125rem', { lineHeight: '1.75rem' }], 13 | xl: ['1.25rem', { lineHeight: '2rem' }], 14 | '2xl': ['1.5rem', { lineHeight: '2.5rem' }], 15 | '3xl': ['2rem', { lineHeight: '2.5rem' }], 16 | '4xl': ['2.5rem', { lineHeight: '3rem' }], 17 | '5xl': ['3rem', { lineHeight: '3.5rem' }], 18 | '6xl': ['3.75rem', { lineHeight: '1' }], 19 | '7xl': ['4.5rem', { lineHeight: '1' }], 20 | '8xl': ['6rem', { lineHeight: '1' }], 21 | '9xl': ['8rem', { lineHeight: '1' }], 22 | }, 23 | extend: { 24 | fontFamily: { 25 | sans: ['Inter', ...defaultTheme.fontFamily.sans], 26 | display: ['Lexend', ...defaultTheme.fontFamily.sans], 27 | }, 28 | maxWidth: { 29 | '8xl': '88rem', 30 | }, 31 | }, 32 | }, 33 | safelist: ['text-zinc-400'], 34 | plugins: [require('@tailwindcss/typography')], 35 | } 36 | -------------------------------------------------------------------------------- /tests/basic.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, expect, it } from 'vitest' 2 | 3 | describe('tests', () => { 4 | it('should works', () => { 5 | expect(1 + 1).toEqual(2) 6 | }) 7 | }) 8 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "module": "ESNext", 5 | "target": "ESNext", 6 | "lib": [ 7 | "DOM", 8 | "ESNext" 9 | ], 10 | "strict": true, 11 | "esModuleInterop": true, 12 | "jsx": "preserve", 13 | "skipLibCheck": true, 14 | "moduleResolution": "node", 15 | "resolveJsonModule": true, 16 | "noUnusedLocals": true, 17 | "strictNullChecks": true, 18 | "allowJs": true, 19 | "forceConsistentCasingInFileNames": true, 20 | "types": [ 21 | "vitest", 22 | "vite/client", 23 | "vue/ref-macros", 24 | "vite-plugin-pages/client", 25 | "vite-plugin-vue-layouts/client", 26 | "vite-plugin-pwa/client", 27 | ], 28 | "paths": { 29 | "~/*": [ 30 | "src/*", 31 | ] 32 | } 33 | }, 34 | "exclude": [ 35 | "dist", 36 | "node_modules", 37 | "postcss.config.js", 38 | "tailwind.config.js", 39 | "coverage", 40 | "cheatsheet", 41 | ], 42 | "typeRoots": [ 43 | "./src/types" 44 | ] 45 | } -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "esnext", 5 | "moduleResolution": "node" 6 | }, 7 | "include": [ 8 | "vite.config.ts" 9 | ] 10 | } -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import path from 'path' 2 | import { defineConfig, loadEnv } from 'vite' 3 | import vue from '@vitejs/plugin-vue' 4 | import generateSitemap from 'vite-ssg-sitemap' 5 | import Pages from 'vite-plugin-pages' 6 | import Layouts from 'vite-plugin-vue-layouts' 7 | import Components from 'unplugin-vue-components/vite' 8 | import { HeadlessUiResolver } from 'unplugin-vue-components/resolvers' 9 | import AutoImport from 'unplugin-auto-import/vite' 10 | import Markdown from 'unplugin-vue-markdown/vite' 11 | import Prism from 'markdown-it-prism' 12 | import LinkAttributes from 'markdown-it-link-attributes' 13 | import { VitePWA } from 'vite-plugin-pwa' 14 | import string from 'string' 15 | 16 | // https://vitejs.dev/config/ 17 | export default defineConfig(({ mode }) => { 18 | process.env = { ...process.env, ...loadEnv(mode, process.cwd(), '') } 19 | return { 20 | resolve: { 21 | alias: { 22 | '~/': `${path.resolve(__dirname, 'src')}/`, 23 | }, 24 | }, 25 | 26 | server: { 27 | proxy: { 28 | '/newsletter': { 29 | target: process.env.VITE_GRUDGET_ENDPOINT, 30 | changeOrigin: true, 31 | secure: false, 32 | rewrite: (path) => path.replace(/^\/newsletter/, ''), 33 | }, 34 | }, 35 | }, 36 | 37 | plugins: [ 38 | vue({ 39 | include: [/\.vue$/, /\.md$/], 40 | // reactivityTransform: true, 41 | }), 42 | 43 | // https://github.com/hannoeru/vite-plugin-pages 44 | Pages({ 45 | extensions: ['vue', 'md'], 46 | dirs: [ 47 | { dir: 'src/pages', baseRoute: '' }, 48 | { dir: 'docs/cheatsheet', baseRoute: 'cheatsheet' }, 49 | { dir: 'docs/builtin', baseRoute: 'builtin' }, 50 | { dir: 'docs/modules', baseRoute: 'modules' }, 51 | { dir: 'docs/blog', baseRoute: 'blog' }, 52 | ], 53 | }), 54 | 55 | // https://github.com/JohnCampionJr/vite-plugin-vue-layouts 56 | Layouts(), 57 | 58 | // https://github.com/antfu/unplugin-auto-import 59 | AutoImport({ 60 | imports: ['vue', 'vue-router', '@vueuse/head', '@vueuse/core'], 61 | dts: 'src/auto-imports.d.ts', 62 | dirs: ['src/composables', 'src/store'], 63 | vueTemplate: true, 64 | eslintrc: { 65 | enabled: true, 66 | }, 67 | }), 68 | 69 | // https://github.com/antfu/unplugin-vue-components 70 | Components({ 71 | // allow auto load markdown components under `./src/components/` 72 | dirs: ['src/components'], 73 | extensions: ['vue', 'md'], 74 | // allow auto import and register components used in markdown 75 | include: [/\.vue$/, /\.vue\?vue/, /\.md$/], 76 | dts: 'src/components.d.ts', 77 | 78 | resolvers: [HeadlessUiResolver()], 79 | }), 80 | 81 | // https://github.com/antfu/vite-plugin-vue-markdown 82 | // https://prismjs.com/ 83 | Markdown({ 84 | headEnabled: true, 85 | markdownItSetup(md) { 86 | md.use(require('markdown-it-anchor'), { 87 | slugify: (s: string) => string(s).slugify().toString(), 88 | }) 89 | md.use(Prism, {}) 90 | md.use(LinkAttributes, { 91 | matcher: (link: string) => /^https?:\/\//.test(link), 92 | attrs: { 93 | target: '_blank', 94 | rel: 'noopener', 95 | }, 96 | }) 97 | }, 98 | }), 99 | 100 | // https://github.com/antfu/vite-plugin-pwa 101 | VitePWA({ 102 | registerType: 'autoUpdate', 103 | includeAssets: ['favicon.svg', 'safari-pinned-tab.svg'], 104 | manifest: { 105 | name: 'JavaScript Cheatsheet', 106 | short_name: 'JavaScript Cheatsheet', 107 | theme_color: '#ffffff', 108 | icons: [ 109 | { 110 | src: '/android-chrome-192x192.png', 111 | sizes: '192x192', 112 | type: 'image/png', 113 | }, 114 | { 115 | src: '/android-chrome-512x512.png', 116 | sizes: '512x512', 117 | type: 'image/png', 118 | }, 119 | { 120 | src: '/android-chrome-512x512.png', 121 | sizes: '512x512', 122 | type: 'image/png', 123 | purpose: 'any maskable', 124 | }, 125 | ], 126 | }, 127 | }), 128 | ], 129 | 130 | // https://github.com/antfu/vite-ssg 131 | ssgOptions: { 132 | script: 'async', 133 | formatting: 'minify', 134 | format: 'cjs', 135 | onFinished() { 136 | const hostname = `https://${process.env.VITE_BASE_URL}` 137 | generateSitemap({ 138 | hostname, 139 | }) 140 | }, 141 | }, 142 | 143 | // https://github.com/vitest-dev/vitest 144 | test: { 145 | environment: 'jsdom', 146 | deps: { 147 | inline: ['@vue', '@vueuse'], 148 | }, 149 | }, 150 | } 151 | }) 152 | --------------------------------------------------------------------------------