├── .all-contributorsrc ├── .github ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md └── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── custom.md │ └── feature_request.md ├── .gitignore ├── .npmrc ├── .prettierignore ├── .prettierrc ├── .vscode └── settings.json ├── LICENCE ├── README.md ├── e2e └── demo.test.ts ├── eslint.config.js ├── package.json ├── playwright.config.ts ├── pnpm-lock.yaml ├── renovate.json ├── sheets ├── alfred.md ├── bash.md ├── chocolatey.md ├── css.md ├── fish.md ├── git.md ├── grunt.md ├── homebrew.md ├── http.md ├── hyper.md ├── javascript.md ├── linux.md ├── macos.md ├── now.md ├── npm.md ├── npx.md ├── nvm.md ├── styled-components.md ├── vim.md ├── vscode.md ├── windows.md ├── winget.md ├── wsl.md ├── yarn.md └── zsh.md ├── src ├── app.css ├── app.d.ts ├── app.html ├── demo.spec.ts ├── lib │ ├── components │ │ ├── author.svelte │ │ ├── footer.svelte │ │ ├── header.svelte │ │ ├── index.ts │ │ ├── table-of-contents.svelte │ │ └── theme-select.svelte │ ├── get-sheets.ts │ ├── icons │ │ ├── git-hub.svelte │ │ ├── index.ts │ │ ├── twitter.svelte │ │ └── you-tube.svelte │ ├── index.ts │ ├── info.ts │ ├── og-image-url-build.ts │ └── utils │ │ ├── get-headings.ts │ │ ├── index.ts │ │ └── update-toc-visibility.ts └── routes │ ├── +error.svelte │ ├── +layout.svelte │ ├── +page.svelte │ ├── +page.ts │ ├── [author].json │ └── +server.ts │ ├── [slug] │ ├── +page.svelte │ └── +page.ts │ ├── page.svelte.test.ts │ └── sitemap.xml │ └── +server.ts ├── static ├── favicon.png ├── profile-pic.png └── robots.txt ├── svelte.config.js ├── tsconfig.json ├── vite.config.ts └── vitest-setup-client.ts /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "cheat-sheets", 3 | "projectOwner": "spences10", 4 | "repoType": "github", 5 | "repoHost": "https://github.com", 6 | "files": ["README.md"], 7 | "imageSize": 100, 8 | "commit": true, 9 | "commitConvention": "none", 10 | "contributors": [ 11 | { 12 | "login": "spences10", 13 | "name": "Scott Spence", 14 | "avatar_url": "https://avatars.githubusercontent.com/u/234708?v=4", 15 | "profile": "https://scottspence.com/", 16 | "contributions": ["code", "doc"] 17 | }, 18 | { 19 | "login": "NickyMeuleman", 20 | "name": "Nicky Meuleman", 21 | "avatar_url": "https://avatars.githubusercontent.com/u/30179461?v=4", 22 | "profile": "https://nickymeuleman.netlify.app/", 23 | "contributions": ["doc"] 24 | }, 25 | { 26 | "login": "eclectic-coding", 27 | "name": "Chuck ", 28 | "avatar_url": "https://avatars.githubusercontent.com/u/13651291?v=4", 29 | "profile": "https://github.com/eclectic-coding", 30 | "contributions": ["doc"] 31 | }, 32 | { 33 | "login": "ghostdevv", 34 | "name": "GHOST", 35 | "avatar_url": "https://avatars.githubusercontent.com/u/47755378?v=4", 36 | "profile": "https://github.com/ghostdevv", 37 | "contributions": ["doc"] 38 | }, 39 | { 40 | "login": "tannerdolby", 41 | "name": "Tanner Dolby", 42 | "avatar_url": "https://avatars.githubusercontent.com/u/48612525?v=4", 43 | "profile": "https://tannerdolby.com/", 44 | "contributions": ["doc"] 45 | }, 46 | { 47 | "login": "marcusbarnesdeveloper", 48 | "name": "marcusbarnesdeveloper", 49 | "avatar_url": "https://avatars.githubusercontent.com/u/59588519?v=4", 50 | "profile": "https://github.com/marcusbarnesdeveloper", 51 | "contributions": ["doc"] 52 | }, 53 | { 54 | "login": "anniebombanie", 55 | "name": "Annie", 56 | "avatar_url": "https://avatars.githubusercontent.com/u/42328163?v=4", 57 | "profile": "https://github.com/anniebombanie", 58 | "contributions": ["doc"] 59 | }, 60 | { 61 | "login": "ddieppa", 62 | "name": "Daniel", 63 | "avatar_url": "https://avatars.githubusercontent.com/u/10607192?v=4", 64 | "profile": "https://github.com/ddieppa", 65 | "contributions": ["doc"] 66 | }, 67 | { 68 | "login": "devenblake", 69 | "name": "Deven Blake", 70 | "avatar_url": "https://avatars.githubusercontent.com/u/26193059?v=4", 71 | "profile": "http://www.trinity.moe/", 72 | "contributions": ["doc"] 73 | }, 74 | { 75 | "login": "jatin2003", 76 | "name": "Jatin Rao", 77 | "avatar_url": "https://avatars.githubusercontent.com/u/56562571?v=4", 78 | "profile": "https://jatinrao.dev/", 79 | "contributions": ["doc"] 80 | }, 81 | { 82 | "login": "ozyx", 83 | "name": "Jesse Mazzella", 84 | "avatar_url": "https://avatars.githubusercontent.com/u/9259993?v=4", 85 | "profile": "https://github.com/ozyx", 86 | "contributions": ["doc"] 87 | }, 88 | { 89 | "login": "osalvatierra", 90 | "name": "Oscar Salvatierra", 91 | "avatar_url": "https://avatars.githubusercontent.com/osalvatierra", 92 | "profile": "https://github.com/osalvatierra", 93 | "contributions": ["doc"] 94 | } 95 | ], 96 | "contributorsPerLine": 7 97 | } 98 | -------------------------------------------------------------------------------- /.github/CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our 7 | project and our community a harassment-free experience for everyone, 8 | regardless of age, body size, disability, ethnicity, gender identity 9 | and expression, level of experience, nationality, personal appearance, 10 | race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive 15 | environment include: 16 | 17 | - Using welcoming and inclusive language 18 | - Being respectful of differing viewpoints and experiences 19 | - Gracefully accepting constructive criticism 20 | - Focusing on what is best for the community 21 | - Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | - The use of sexualized language or imagery and unwelcome sexual 26 | attention or advances 27 | - Trolling, insulting/derogatory comments, and personal or political 28 | attacks 29 | - Public or private harassment 30 | - Publishing others' private information, such as a physical or 31 | electronic address, without explicit permission 32 | - Other conduct which could reasonably be considered inappropriate in 33 | a professional setting 34 | 35 | ## Our Responsibilities 36 | 37 | Project maintainers are responsible for clarifying the standards of 38 | acceptable behavior and are expected to take appropriate and fair 39 | corrective action in response to any instances of unacceptable 40 | behavior. 41 | 42 | Project maintainers have the right and responsibility to remove, edit, 43 | or reject comments, commits, code, wiki edits, issues, and other 44 | contributions that are not aligned to this Code of Conduct, or to ban 45 | temporarily or permanently any contributor for other behaviors that 46 | they deem inappropriate, threatening, offensive, or harmful. 47 | 48 | ## Scope 49 | 50 | This Code of Conduct applies both within project spaces and in public 51 | spaces when an individual is representing the project or its 52 | community. Examples of representing a project or community include 53 | using an official project e-mail address, posting via an official 54 | social media account, or acting as an appointed representative at an 55 | online or offline event. Representation of a project may be further 56 | defined and clarified by project maintainers. 57 | 58 | ## Enforcement 59 | 60 | Instances of abusive, harassing, or otherwise unacceptable behavior 61 | may be reported by contacting the project team at 62 | spences10apps@gmail.com. The project team will review and investigate 63 | all complaints, and will respond in a way that it deems appropriate to 64 | the circumstances. The project team is obligated to maintain 65 | confidentiality with regard to the reporter of an incident. Further 66 | details of specific enforcement policies may be posted separately. 67 | 68 | Project maintainers who do not follow or enforce the Code of Conduct 69 | in good faith may face temporary or permanent repercussions as 70 | determined by other members of the project's leadership. 71 | 72 | ## Attribution 73 | 74 | This Code of Conduct is adapted from the [Contributor 75 | Covenant][homepage], version 1.4, available at 76 | [http://contributor-covenant.org/version/1/4][version] 77 | 78 | [homepage]: http://contributor-covenant.org 79 | [version]: http://contributor-covenant.org/version/1/4/ 80 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # imposter syndrome disclaimer 2 | 3 | A warm invitation to contribute, to be adapted and included in your 4 | project's README 5 | 6 | ### How to contribute 7 | 8 | _Imposter syndrome disclaimer_: I want your help. No really, I do. 9 | 10 | There might be a little voice inside that tells you you're not ready; 11 | that you need to do one more tutorial, or learn another framework, or 12 | write a few more blog posts before you can help me with this project. 13 | 14 | I assure you, that's not the case. 15 | 16 | This project has some clear Contribution Guidelines and expectations 17 | that you can read here (link). 18 | 19 | The contribution guidelines outline the process that you'll need to 20 | follow to get a patch merged. By making expectations and process 21 | explicit, I hope it will make it easier for you to contribute. 22 | 23 | And you don't just have to write code. You can help out by writing 24 | documentation, tests, or even by giving feedback about this work. (And 25 | yes, that includes giving feedback about the contribution guidelines.) 26 | 27 | Thank you for contributing! 28 | 29 | ### About this work 30 | 31 | I came up with the idea of an imposter syndrome disclaimer for project 32 | READMEs while working on my 2016 talks for 33 | [OSCON](https://conferences.oreilly.com/oscon/oscon-tx-2016/public/schedule/speaker/230023) 34 | and [PyCon](https://www.youtube.com/watch?v=6Uj746j9Heo). A goal was 35 | to share how leaders, mentors, and maintainers could become more 36 | accessible, welcoming collaborators with junior developers. Being 37 | explicitly welcoming and providing clear contribution guidelines is a 38 | powerful way to encourage others to contribute to your work. 39 | 40 | ### Examples 41 | 42 | I'm thrilled that projects have adopted this language! Here are a few 43 | [examples](https://github.com/adriennefriend/imposter-syndrome-disclaimer/blob/master/examples.md). 44 | 45 | ### Licensing 46 | 47 | MIT. Take, adapt, use. A link back to this repo is appreciated. 48 | 49 | ### Please star and fork this guide from here: https://github.com/adriennefriend/imposter-syndrome-disclaimer 50 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | --- 8 | 9 | **Describe the bug** A clear and concise description of what the bug 10 | is. 11 | 12 | **To Reproduce** Steps to reproduce the behavior: 13 | 14 | 1. Go to '...' 15 | 2. Click on '....' 16 | 3. Scroll down to '....' 17 | 4. See error 18 | 19 | **Expected behavior** A clear and concise description of what you 20 | expected to happen. 21 | 22 | **Screenshots** If applicable, add screenshots to help explain your 23 | problem. 24 | 25 | **Desktop (please complete the following information):** 26 | 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | 33 | - Device: [e.g. iPhone6] 34 | - OS: [e.g. iOS8.1] 35 | - Browser [e.g. stock browser, safari] 36 | - Version [e.g. 22] 37 | 38 | **Additional context** Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/custom.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Custom issue template 3 | about: Describe this issue template's purpose here. 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | --- 8 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | --- 8 | 9 | **Is your feature request related to a problem? Please describe.** A 10 | clear and concise description of what the problem is. Ex. I'm always 11 | frustrated when [...] 12 | 13 | **Describe the solution you'd like** A clear and concise description 14 | of what you want to happen. 15 | 16 | **Describe alternatives you've considered** A clear and concise 17 | description of any alternative solutions or features you've 18 | considered. 19 | 20 | **Additional context** Add any other context or screenshots about the 21 | feature request here. 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | test-results 2 | node_modules 3 | 4 | # Output 5 | .output 6 | .vercel 7 | .netlify 8 | .wrangler 9 | /.svelte-kit 10 | /build 11 | 12 | # OS 13 | .DS_Store 14 | Thumbs.db 15 | 16 | # Env 17 | .env 18 | .env.* 19 | !.env.example 20 | !.env.test 21 | 22 | # Vite 23 | vite.config.js.timestamp-* 24 | vite.config.ts.timestamp-* 25 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Package Managers 2 | package-lock.json 3 | pnpm-lock.yaml 4 | yarn.lock 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "all", 5 | "printWidth": 70, 6 | "proseWrap": "always", 7 | "plugins": [ 8 | "prettier-plugin-svelte", 9 | "prettier-plugin-tailwindcss" 10 | ], 11 | "overrides": [ 12 | { 13 | "files": "*.svelte", 14 | "options": { 15 | "parser": "svelte" 16 | } 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "git.enableSmartCommit": true, 3 | "git.postCommitCommand": "sync", 4 | "css.validate": false, 5 | "workbench.colorCustomizations": { 6 | "titleBar.activeBackground": "#5d98bb", 7 | "titleBar.inactiveBackground": "#5d98bb99", 8 | "titleBar.activeForeground": "#15202b", 9 | "titleBar.inactiveForeground": "#15202b99" 10 | }, 11 | "cSpell.words": [ 12 | "abbr", 13 | "daisyui", 14 | "djvu", 15 | "EDIFACT", 16 | "mdsvex", 17 | "MHTML", 18 | "msvideo", 19 | "noopener", 20 | "noreferrer", 21 | "rehype", 22 | "svead", 23 | "sveltejs", 24 | "vercel", 25 | "vite", 26 | "webm" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Scott Spence 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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Cheat Sheets 2 | 3 | 4 | 5 | [![All Contributors](https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square)](#contributors-) 6 | 7 | 8 | 9 | ## A searchable site of hints and tips! 10 | 11 | [![](/src/images/flying-cube.gif)](https://cheatsheets.xyz) 12 | 13 | ###### Image Credit [ccbyplz](https://www.deviantart.com/ccbyplz) 14 | 15 | A place for all my cheat sheets to live! 16 | 17 | This is a list of stuff that I have put down that I continually 18 | reference. 19 | 20 | Current list of sheets: 21 | 22 | - Alfred 23 | - Fish Shell 24 | - Bash 25 | - Homebrew 26 | - Hyperterm 27 | - JavaScript 28 | - Linux 29 | - macOS 30 | - npm 31 | - now 32 | - Windows Subsystem Linux (WSL) 33 | - VS Code 34 | - Node Version Manager (nvm) 35 | - npx 36 | - Yarn 37 | - ZSH 38 | - Git 39 | 40 | ## Contributors ✨ 41 | 42 | Thanks goes to these wonderful people 43 | ([emoji key](https://allcontributors.org/docs/en/emoji-key)): 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 |

Scott Spence
💻 📖
Nicky Meuleman
📖
Chuck
📖
GHOST
📖
Tanner Dolby
📖
marcusbarnesdeveloper
📖
Annie
📖

Daniel
📖
Deven Blake
📖
Jatin Rao
📖
Jesse Mazzella
📖
65 | 66 | 67 | 68 | 69 | 70 | 71 | This project follows the 72 | [all-contributors](https://github.com/all-contributors/all-contributors) 73 | specification. Contributions of any kind welcome! 74 | 75 | ## Repo Activity 76 | 77 | ![Dub.co repo activity – generated by Axiom](https://repobeats.axiom.co/api/embed/043f788855e2cbd7d4308066f758143305d9c505.svg 'Repobeats analytics image') 78 | -------------------------------------------------------------------------------- /e2e/demo.test.ts: -------------------------------------------------------------------------------- 1 | import { expect, test } from '@playwright/test'; 2 | 3 | test('home page has expected h1', async ({ page }) => { 4 | await page.goto('/'); 5 | await expect(page.locator('h1')).toBeVisible(); 6 | }); 7 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import prettier from 'eslint-config-prettier'; 2 | import js from '@eslint/js'; 3 | import { includeIgnoreFile } from '@eslint/compat'; 4 | import svelte from 'eslint-plugin-svelte'; 5 | import globals from 'globals'; 6 | import { fileURLToPath } from 'node:url'; 7 | import ts from 'typescript-eslint'; 8 | const gitignorePath = fileURLToPath( 9 | new URL('./.gitignore', import.meta.url), 10 | ); 11 | 12 | export default ts.config( 13 | includeIgnoreFile(gitignorePath), 14 | js.configs.recommended, 15 | ...ts.configs.recommended, 16 | ...svelte.configs['flat/recommended'], 17 | prettier, 18 | ...svelte.configs['flat/prettier'], 19 | { 20 | languageOptions: { 21 | globals: { 22 | ...globals.browser, 23 | ...globals.node, 24 | }, 25 | }, 26 | }, 27 | { 28 | files: ['**/*.svelte'], 29 | 30 | languageOptions: { 31 | parserOptions: { 32 | parser: ts.parser, 33 | }, 34 | }, 35 | }, 36 | ); 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cheat-sheets", 3 | "private": true, 4 | "version": "0.2.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite dev", 8 | "build": "vite build", 9 | "preview": "vite preview", 10 | "prepare": "svelte-kit sync || echo ''", 11 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 12 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", 13 | "format": "prettier --write .", 14 | "lint": "prettier --check . && eslint .", 15 | "test:unit": "vitest", 16 | "test": "npm run test:unit -- --run && npm run test:e2e", 17 | "test:e2e": "playwright test" 18 | }, 19 | "devDependencies": { 20 | "@eslint/compat": "^1.2.9", 21 | "@eslint/js": "^9.27.0", 22 | "@playwright/test": "^1.52.0", 23 | "@sveltejs/adapter-cloudflare": "^7.0.3", 24 | "@sveltejs/kit": "^2.21.1", 25 | "@sveltejs/vite-plugin-svelte": "^5.0.3", 26 | "@tailwindcss/typography": "^0.5.16", 27 | "@tailwindcss/vite": "^4.1.7", 28 | "@testing-library/jest-dom": "^6.6.3", 29 | "@testing-library/svelte": "^5.2.8", 30 | "daisyui": "5.0.38", 31 | "date-fns": "^4.1.0", 32 | "eslint": "^9.27.0", 33 | "eslint-config-prettier": "^10.1.5", 34 | "eslint-plugin-svelte": "^3.9.0", 35 | "fathom-client": "^3.7.2", 36 | "globals": "^16.1.0", 37 | "jsdom": "^26.1.0", 38 | "mdsvex": "^0.12.5", 39 | "prettier": "^3.5.3", 40 | "prettier-plugin-svelte": "^3.4.0", 41 | "prettier-plugin-tailwindcss": "^0.6.11", 42 | "prism-themes": "^1.9.0", 43 | "rehype-autolink-headings": "^7.1.0", 44 | "rehype-external-links": "^3.0.0", 45 | "rehype-slug": "^6.0.0", 46 | "remark-external-links": "^10.0.0", 47 | "svead": "^0.0.4", 48 | "svelte": "^5.32.1", 49 | "svelte-check": "^4.2.1", 50 | "tailwindcss": "^4.1.7", 51 | "theme-change": "^2.5.0", 52 | "typescript": "^5.8.3", 53 | "typescript-eslint": "^8.32.1", 54 | "vite": "^6.3.5", 55 | "vitest": "^3.1.4" 56 | }, 57 | "pnpm": { 58 | "onlyBuiltDependencies": [ 59 | "@tailwindcss/oxide", 60 | "esbuild" 61 | ] 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /playwright.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@playwright/test'; 2 | 3 | export default defineConfig({ 4 | webServer: { 5 | command: 'npm run build && npm run preview', 6 | port: 4173, 7 | }, 8 | 9 | testDir: 'e2e', 10 | }); 11 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["config:base"] 3 | } 4 | -------------------------------------------------------------------------------- /sheets/alfred.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Alfred 3 | createdDate: 2019-11-19 4 | updatedDate: 2019-11-19 5 | published: true 6 | slug: alfred 7 | description: 8 | Alfred is a simple, powerful, and open-source workflow for macOS. 9 | --- 10 | 11 | 18 | 19 | ## Add custom search 20 | 21 | To add a custom search to Alfred. 22 | 23 | Open Alfred preferences and select the 'Web Search' tab. 24 | 25 | Bottom right click the 'Add Custom Search' button. 26 | 27 | Add the following into the form, this is for Startpage.com 28 | 29 | Search URL: 30 | `https://startpage.com/do/search?language=english&query={query}` 31 | 32 | Title: `Search Startpage for '{query}'` 33 | 34 | Keyword: `sp` 35 | 36 | Click 'Save' 37 | 38 | ## Change the default search in Alfred 39 | 40 | To add a your preferred search to Alfred. 41 | 42 | Open Alfred preferences and select the 'Default Results' tab. 43 | 44 | At the bottom of the page where 'Fallbacks' is, click the 'Setup 45 | fallback results' button. 46 | 47 | Click on the `+` icon and select either a predefined 'Web Search' or 48 | select one of your 'Custom Search' options. 49 | 50 | Drag your preferred search to the top of the list. 51 | 52 | Click 'Save' 53 | -------------------------------------------------------------------------------- /sheets/bash.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Bash 3 | createdDate: 2017-10-11 4 | updatedDate: 2021-01-10 5 | published: true 6 | slug: bash 7 | description: Bash is a shell and scripting language. 8 | --- 9 | 10 | ## Human Readable `$PATH` output 11 | 12 | Use this to nicely format the `$PATH` variable: 13 | 14 | ```bash 15 | echo -e ${PATH//:/\\n} 16 | ``` 17 | 18 | ## Change default shell 19 | 20 | Use `chsh` utility to change your default shell: 21 | 22 | ```bash 23 | # list out the shells available with -l 24 | chsh -l 25 | # if that doesn't work try 26 | cat /etc/shells 27 | # /bin/bash 28 | # /bin/zsh 29 | # /bin/fish 30 | # set the default shell (with -s) to fish 31 | chsh -s /bin/fish 32 | # set the default shell (with -s) to zsh 33 | chsh -s /bin/zsh 34 | ``` 35 | 36 | ## Kill process on port 37 | 38 | List any process running on port 8000 39 | 40 | ```bash 41 | lsof -i:8000 42 | ``` 43 | 44 | Output will look similar to this. 45 | 46 | ```text 47 | COMMAND PID USER 48 | chrome 16085 iamuser 49 | ``` 50 | 51 | Then kill it with `kill`. 52 | 53 | ```bash 54 | kill -9 16085 55 | ``` 56 | 57 | ## Add an alias 58 | 59 | ```bash 60 | # open your bash_profile with nano 61 | nano ~/.bash_profile 62 | # add your alias 63 | alias f='fish' 64 | # ctrl+x then y to save 65 | ``` 66 | 67 | ## Sort alphabetically 68 | 69 | You may find that commands like `ll` are under your `~/.bashrc` file, 70 | if not then add the following as an alias: 71 | 72 | ```bash 73 | ls -lart | sort -k9,9 74 | ``` 75 | 76 | ## See file permissions 77 | 78 | If you need to set the permission on a file (with `chmod`) but don't 79 | know what the permissions of similar files are like you can use 80 | `stat`, the following command displays the permissions of the contents 81 | of the `.ssh/` folder: 82 | 83 | ```bash 84 | stat -c "%a %n" ~/.ssh/* 85 | ``` 86 | 87 | ## Open the SSH agent each time you open a new terminal. 88 | 89 | Tired of having to enter your SSH password each time you want to do a 90 | git operation? 91 | 92 | Add the following to your `~/.bashrc` file. 93 | 94 | ```bash 95 | # nano ~/.bashrc 96 | [ -z "$SSH_AUTH_SOCK" ] && eval "\$(ssh-agent -s)" 97 | ``` 98 | 99 | ## Search Bash history 100 | 101 | Want to search for an entry in your Bash history? 102 | 103 | Use `Ctrl+r` then enter your search term. 104 | 105 | ## Remove command from bash history 106 | 107 | Accidentally added your password as a bash command? 108 | 109 | To remove that from the bash history: 110 | 111 | ```bash 112 | # list out history with 113 | history 114 | ``` 115 | 116 | Then take the number from the output: 117 | 118 | ```bash 119 | 471 ssh-agent 120 | 472 exit 121 | 473 kill 53111 122 | 474 super secret password 123 | 475 history 124 | ``` 125 | 126 | Then delete the line you want removed: 127 | 128 | ```bash 129 | history -d 474 130 | ``` 131 | 132 | Check your `history` again and gone until you do it again. 133 | 134 | ## Move the contents of a folder to another folder 135 | 136 | This will move everything in the Downloads folder to the Videos folder 137 | including any folders inside Downloads. 138 | 139 | ```bash 140 | mv ~/Downloads/* ~/Videos 141 | ``` 142 | -------------------------------------------------------------------------------- /sheets/chocolatey.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Chocolatey 3 | createdDate: 2020-12-13 4 | updatedDate: 2020-12-13 5 | published: true 6 | slug: chocolatey 7 | description: Chocolatey is a package manager for Windows. 8 | --- 9 | 10 | ## List locally installed packages 11 | 12 | List all packages installed with Chocolatey: 13 | 14 | ```bash 15 | choco list --localonly 16 | ``` 17 | 18 | ## Update all installed Chocolatey packages 19 | 20 | There's one command to update all Chocolatey installed packages: 21 | 22 | ```bash 23 | cup all -y 24 | ``` 25 | -------------------------------------------------------------------------------- /sheets/css.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CSS 3 | createdDate: 2019-12-07 4 | updatedDate: 2021-01-04 5 | published: true 6 | slug: css 7 | description: 8 | CSS is a style sheet language used for describing the presentation 9 | of a document written in a markup language. 10 | --- 11 | 12 | ## Center anything, horizontally and vertically, with 3 lines of CSS: 13 | 14 | ```css 15 | .center { 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | } 20 | ``` 21 | 22 | Via 23 | [Marko ⚡ Denic](https://twitter.com/denicmarko/status/1346039973087215617) 24 | 25 | ## Vertically center with margin 26 | 27 | You can use `margin: auto` on both `display: flex` and 28 | `display: grid`. 29 | 30 | It will work on the child of `grid` or `flexbox` but not on a block 31 | level element. 32 | 33 | ```html 34 |
35 |

Pls center me!

36 |
37 | ``` 38 | 39 | ```css 40 | .margins { 41 | /* display: flex; */ 42 | display: grid; 43 | } 44 | 45 | .margins p { 46 | margin: auto; 47 | } 48 | ``` 49 | 50 | ## Vertically center with absolute positioning 51 | 52 | ```html 53 |
54 |

Pls center me!

55 |
56 | ``` 57 | 58 | ```css 59 | .absolute { 60 | position: relative; 61 | } 62 | 63 | .absolute p { 64 | position: absolute; 65 | top: 50%; 66 | transform: translateY(-50%); 67 | width: 100%; 68 | } 69 | ``` 70 | 71 | ## Vertically center with flexbox 72 | 73 | ```html 74 |
75 |

Pls center me!

76 |
77 | ``` 78 | 79 | ```css 80 | .flexbox { 81 | display: flex; 82 | align-items: center; 83 | justify-content: center; 84 | } 85 | ``` 86 | 87 | ## Vertically center with grid 88 | 89 | Use either `align-items: center;` or `place-items: center;` 90 | 91 | ```html 92 |
93 |

Pls center me!

94 |
95 | ``` 96 | 97 | ```css 98 | .grid { 99 | display: grid; 100 | /* align-items: center; */ 101 | place-items: center; 102 | } 103 | ``` 104 | 105 | ## Breaking Long Words and URLs 106 | 107 | There are times when a really long string of text can overflow the 108 | container of a layout, use this: 109 | 110 | ```css 111 | .don_break_out_of_parent { 112 | /* These are technically the same, but use both */ 113 | overflow-wrap: break-word; 114 | word-wrap: break-word; 115 | } 116 | ``` 117 | -------------------------------------------------------------------------------- /sheets/fish.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Fish Shell 3 | createdDate: 2017-10-11 4 | updatedDate: 2020-08-26 5 | published: true 6 | slug: fish 7 | description: Fish Shell is a shell and scripting language. 8 | --- 9 | 10 | ## NVM not recognised in Fish? 11 | 12 | Install the [Oh My Fish](#Oh-My-Fish) package `nvm` with: 13 | 14 | ```bash 15 | omf install nvm 16 | ``` 17 | 18 | ## Aliases 19 | 20 | Quick list for aliasing: 21 | 22 | ```bash 23 | functions aliasname 24 | # Displays function contents 25 | 26 | functions -n 27 | # Displays a list of currently-defined functions 28 | 29 | functions -c newalias aliasname 30 | # Copies the 'aliasname' function to a new function called 'newalias' 31 | 32 | functions -e aliasname 33 | # Erases the function `aliasname` 34 | ``` 35 | 36 | To list what aliases you have already defined: 37 | 38 | ```bash 39 | ls -la ~/.config/fish/functions/ 40 | ``` 41 | 42 | To see what is contained in the functions, use: 43 | 44 | ```bash 45 | type functionName 46 | # or use functions 47 | functions functionName 48 | ``` 49 | 50 | To create an alias: 51 | 52 | ```bash 53 | # Sort alphabetically 54 | alias lss 'ls -lart | sort -k9,9' 55 | ``` 56 | 57 | To save said alias: 58 | 59 | ```bash 60 | funcsave lss 61 | ``` 62 | 63 | View the contents of the function: 64 | 65 | ```bash 66 | functions lss 67 | # output 68 | # Defined in /home/scott/.config/fish/functions/lss.fish @ line 2 69 | function lss --description 'alias lss ls -lart | sort -k9,9' 70 | ls -lart | sort -k9,9 $argv; 71 | end 72 | ``` 73 | 74 | To remove an alias: 75 | 76 | ```bash 77 | rm ~/.config/fish/functions/aliasname.fish 78 | ``` 79 | 80 | or use: 81 | 82 | ```bash 83 | functions -e aliasname 84 | ``` 85 | 86 | ## Oh My Fish 87 | 88 | https://github.com/oh-my-fish/oh-my-fish 89 | 90 | ## Use nvm with fish 91 | 92 | If you have Oh My Fish installed then install the `bass` plugin: 93 | 94 | ```bash 95 | omf install bass 96 | ``` 97 | 98 | Then add the following to your `config.fish` file: 99 | 100 | ```bash 101 | function nvm 102 | bass source (brew --prefix nvm)/nvm.sh --no-use ';' nvm $argv 103 | end 104 | 105 | set -x NVM_DIR ~/.nvm 106 | nvm use default --silent 107 | ``` 108 | 109 | Then `source` the `config.fish` file: 110 | 111 | ```bash 112 | source ~/.config/fish/config.fish 113 | ``` 114 | 115 | ## List out added aliases 116 | 117 | I found this [handy function] on Stack Overflow which will list out 118 | your functions: 119 | 120 | ```bash 121 | function aliases --description "list all fish aliases";for f in (functions);functions $f | grep \'alias;end;end; 122 | ``` 123 | 124 | Then you save it `funcsave aliases` and use it `funcsave` the output 125 | will be: 126 | 127 | ```bash 128 | aliases 129 | function c --description 'alias c code .' 130 | function g --description 'alias g git' 131 | ... 132 | ``` 133 | 134 | The following you can copy paste into fish: 135 | 136 | ```bash 137 | alias c 'code .';funcsave c;alias e exit;funcsave e;alias g hub;funcsave g;alias lss 'ls -lart | sort -k9,9';funcsave lss;alias ni 'npm i';funcsave ni;alias nid 'npm i -D';funcsave nid;alias nig 'npm i -g';funcsave nig;alias no 'npm outdated';funcsave no;alias nog 'npm outdated -g --depth=0';funcsave nog;alias nr 'npm run';funcsave nr;alias nrb 'npm run build';funcsave nrb;alias nrd 'npm run dev';funcsave nrd;alias nrf 'npm run format';funcsave nrf;alias nrs 'npm run start';funcsave nrs;alias nu 'npm un';funcsave nu;alias nug 'npm -g un';funcsave nug;alias pp 'git pull && git push';funcsave pp;alias r 'cd ~/repos';funcsave r;alias ya 'yarn add';funcsave ya;alias yad 'yarn add -D';funcsave yad;alias yb 'yarn build';funcsave yb;alias ybycys 'yarn clean && yb && yarn serve';funcsave ybycys;alias yd 'yarn dev';funcsave yd;alias yg 'yarn go';funcsave yg;alias yga 'yarn global add';funcsave yga;alias yr 'yarn remove';funcsave yr;alias ys 'yarn start';funcsave ys;alias yyb 'yarn && yarn build';funcsave yyb;alias yyd 'yarn && yarn dev';funcsave yyd; 138 | ``` 139 | 140 | 141 | 142 | [handy function]: https://stackoverflow.com/a/50803805/1138354 143 | -------------------------------------------------------------------------------- /sheets/git.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Git 3 | createdDate: 2017-05-19 4 | updatedDate: 2020-08-18 5 | published: true 6 | slug: git 7 | description: Git is a version control system. 8 | --- 9 | 10 | 13 | 14 | ## Use a git patch file 15 | 16 | How to apply a git patch file. 17 | 18 | Good resource here: 19 | https://www.devroom.io/2009/10/26/how-to-create-and-apply-a-patch-with-git/ 20 | 21 | ```bash 22 | # see the changes in the patch file 23 | git apply --stat the-patch-file.patch 24 | # test if ther's going to be issues 25 | git apply --check the-patch-file.patch 26 | # no issues, cool 27 | git apply the-patch-file.patch 28 | ``` 29 | 30 | ## Change the git init default branch name 31 | 32 | Don't want to have the default branch called master? 33 | 34 | 35 | 36 | ```bash 37 | mkdir -p ~/.config/git/template 38 | echo 'ref: refs/heads/main' > ~/.config/git/template/HEAD 39 | git config --global init.templateDir ~/.config/git/template/ 40 | ``` 41 | 42 | Since version `2.28` of `Git` this can be done using this command: 43 | 44 | ```bash 45 | git config --global init.defaultBranch main 46 | ``` 47 | 48 | For more info: 49 | [Highlights from Git 2.28](https://github.blog/2020-07-27-highlights-from-git-2-28/#introducing-init-defaultbranch) 50 | 51 | ## Add a repo from your machine to GitHub 52 | 53 | Create a new repo and push it to GitHub. 54 | 55 | ```bash 56 | echo "# name-of-your-awesome-repo" >> README.md # add repo name to README.md 57 | git init # init the repository 58 | git add README.md 59 | git commit -m "first commit" 60 | git remote add origin https://github.com/your-username/name-of-your-awesome-repo.git 61 | git push -u origin master 62 | ``` 63 | 64 | The first four commands can be ignored if you have a repo you're 65 | already working on (git)committing to. 66 | 67 | ## Latest changes from repo to your machine 68 | 69 | ```bash 70 | git pull 71 | ``` 72 | 73 | ## Add tracking information to your work 74 | 75 | Assuming that you are working on the master branch then 76 | 77 | ```bash 78 | git branch --set-upstream-to=origin/master 79 | ``` 80 | 81 | You can set it to whatever branch you want to track changes for 82 | 83 | ```bash 84 | git branch --set-upstream-to=origin/ 85 | ``` 86 | 87 | This will mean you can just do `git pull` and the latest changes will 88 | be pulled to your `origin` 89 | 90 | ## What branch 91 | 92 | ```bash 93 | git branch # shows what branch you're on 94 | git branch -r # shows remote branches 95 | git branch -a # shows all branches 96 | ``` 97 | 98 | ## Create a local branch and push it to GitHub 99 | 100 | Want to make your feature branch and get it on GitHub? 101 | 102 | Make your branch first then: 103 | 104 | ```bash 105 | git push --set-upstream origin 106 | ``` 107 | 108 | ## Create a PR [Pull Request] 109 | 110 | Fork other users repo in GitHub, then clone to your machine. 111 | 112 | ```bash 113 | git clone https://github.com/your-username/awesome-awesome-repo 114 | ``` 115 | 116 | Add the remote repo: 117 | 118 | ```bash 119 | git remote add upstream https://github.com/other-username/awesome-awesome-repo 120 | ``` 121 | 122 | Create your branch: 123 | 124 | ```bash 125 | git branch your-awesome-branch 126 | ``` 127 | 128 | Check it out: 129 | 130 | ```bash 131 | git checkout your-awesome-branch 132 | ``` 133 | 134 | If adding a folder use. 135 | 136 | ```bash 137 | git add nameOfFolder/\\* 138 | ``` 139 | 140 | Make your commit and push to your new branch. 141 | 142 | ```bash 143 | git add . 144 | git commit -m 'initial commit' 145 | git push origin your-awesome-branch 146 | ``` 147 | 148 | Manage the rest of the PR via GitHub 149 | 150 | ## Check remotes 151 | 152 | ```bash 153 | git remote -v 154 | ``` 155 | 156 | ## Sync a remote fork on your machine 157 | 158 | First configure the local to point to the remote upstream 159 | 160 | ```bash 161 | git remote -v 162 | git remote add upstream https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git 163 | git remote -v 164 | git fetch upstream 165 | git checkout master 166 | git merge upstream/master 167 | ``` 168 | 169 | You then use `git merge` to update any branch on the upstream 170 | repository: 171 | 172 | ```bash 173 | git merge upstream/dev 174 | ``` 175 | 176 | Take a look at [syncing a fork] for more details. 177 | 178 | ## Sync a remote fork on Github 179 | 180 | 1. Open your fork on GitHub. 181 | 1. Click on Pull Requests. 182 | 1. Click on New Pull Request. By default, GitHub will compare the 183 | original with your fork, and there shouldn't be anything to 184 | compare if you didn't make any changes. 185 | 1. Click on Try `switching the base`. Now GitHub will compare your 186 | fork with the original, and you should see all the latest changes. 187 | 1. Click on Click to create a pull request for this comparison and 188 | assign a predictable name to your pull request (e.g., Update from 189 | original). 190 | 1. Click on Send pull request. 191 | 1. Scroll down and click Merge pull request and finally Confirm 192 | merge. If your fork didn't have any changes, you will be able to 193 | merge it automatically. 194 | 195 | ## 2fa 196 | 197 | Using two factor authentication? Then use the following so you're not 198 | adding in your auth token each time you want to `push` your code. 199 | 200 | ```bash 201 | git remote set-url origin https://your-username:your-token@github.com/your-username/your-repo.git 202 | ``` 203 | 204 | ## Change `origin` url 205 | 206 | If you want to change the origin url you can use the `set-url` command 207 | 208 | ```bash 209 | git remote set-url origin https://github.com/username/new-repo-name 210 | ``` 211 | 212 | ## Add code on your machine to new repo 213 | 214 | Via terminal navigate to your code folder. 215 | 216 | ```bash 217 | git init 218 | ``` 219 | 220 | Add your files. 221 | 222 | ```bash 223 | git add . 224 | ``` 225 | 226 | Adding a folder use the following syntax or it'll get added as a BLOB. 227 | 228 | ```bash 229 | git add nameOfFolder/\\* 230 | ``` 231 | 232 | Commit to local repo. 233 | 234 | ```bash 235 | git commit -m 'some detailed message' 236 | ``` 237 | 238 | To add your files to the remote repo, 239 | [first add your remote repo](https://help.github.com/articles/adding-a-remote/) 240 | 241 | ```bash 242 | git remote add origin [remote repository URL] # Sets the new remote 243 | git remote -v # Verifies the new remote URL 244 | git push origin master 245 | ``` 246 | 247 | For more info check out: [adding an existing project to github using 248 | the command line] 249 | 250 | ## Delete branches 251 | 252 | Delete local branch. 253 | 254 | ```bash 255 | git branch -D branch-name 256 | ``` 257 | 258 | Remove local branches that are not on the `remote`. 259 | 260 | ```bash 261 | git remote prune origin --dry-run 262 | # remove --dry-run if you're happy to delete 263 | ``` 264 | 265 | Remove local branches that were created from remote branches. 266 | 267 | ```bash 268 | git branch --merged master | grep -v '^[ *]*master$' | xargs git branch -d 269 | ``` 270 | 271 | ## Merge master branch into feature branch 272 | 273 | How to merge the master branch into the feature branch? This will come 274 | up often if you are working on a team with other devs and you want to 275 | update your feature branch to include the latest changes. 276 | 277 | ```bash 278 | # checkout your feature branch 279 | git checkout feature1 280 | # merge master into it 281 | git merge master 282 | ``` 283 | 284 | ## Merge two repos 285 | 286 | If you want to merge project-a into project-b: 287 | 288 | ```bash 289 | cd path/to/project-b 290 | git remote add project-a path/to/project-a 291 | git fetch project-a 292 | git merge --allow-unrelated-histories project-a/master # or whichever branch you want to merge 293 | git remote remove project-a 294 | ``` 295 | 296 | ## Stop tracking a file 297 | 298 | If you have `.env` files that are tracked by Git and want to ignore 299 | them so your API keys don't get added to GitHub use: 300 | 301 | ```bash 302 | git update-index --assume-unchanged 303 | ``` 304 | 305 | ## Stop tracking a previously tracked folder 306 | 307 | First add the folder to your `.gitignore` then remove the folder from 308 | your local git tracking with: 309 | 310 | ```bash 311 | git rm -r --cached 312 | ``` 313 | 314 | ## Start tracking a previously un-tracked file 315 | 316 | ```bash 317 | git update-index --no-assume-unchanged 318 | ``` 319 | 320 | ## Cloning a repo from someone else's GitHub and pushing it to a repo on my GitHub 321 | 322 | 323 | 324 | So you make a clone of a repo that sin't yours, make some changes then 325 | realise that you need to add it to your GitHub account to make a PR. 326 | 327 | ```bash 328 | git remote -v 329 | origin https://github.com/other-user/other-username/other-repo (fetch) 330 | origin https://github.com/other-user/other-username/other-repo (push) 331 | ``` 332 | 333 | You just need to set the clone your working on as the downstream repo. 334 | 335 | ```bash 336 | # add as downstream 337 | git remote add downstream https://github.com/your-username/your-repo 338 | # or as your username 339 | git remote add your-username https://github.com/your-username/your-repo 340 | ``` 341 | 342 | Now it should look something like this: 343 | 344 | ```bash 345 | git remote -v 346 | origin https://github.com/other-username/other-repo (fetch) 347 | origin https://github.com/other-username/other-repo (push) 348 | downstream http://github.com/your-username/your-repo (fetch) 349 | downstream http://github.com/your-username/your-repo (push) 350 | ``` 351 | 352 | You can then push your changes to the downstream repo and make a PR 353 | via GitHub. 354 | 355 | ## Remove an `upstream` repository 356 | 357 | If you no longer need a reference to a forked repository then remove 358 | it with the following: 359 | 360 | ```bash 361 | git remote rm upstream 362 | ``` 363 | 364 | ## Clone a repo and give it a different name 365 | 366 | ```bash 367 | git clone https://github.com/your-username/repo-name new-repo-name 368 | ``` 369 | 370 | ## Using Husky? 371 | 372 | If you are pushing right after a commit, you can use 373 | `git push --no-verify` to avoid running all the tests again. 374 | 375 | If you make a trivial change and want to commit 376 | `git commit -m 'some detailed message' --no-verify` will skip your 377 | `precommit` and `prepush` scripts. 378 | 379 | ## How to read last commit comment? 380 | 381 | ```bash 382 | git show # is the fastest to type, but shows you the diff as well. 383 | git log -1 # is fast and simple. 384 | git log -1 --pretty=%B # if you need just the commit message and nothing else. 385 | ``` 386 | 387 | ## Remove commit from pull request 388 | 389 | Read 390 | [this](http://stackoverflow.com/questions/34519665/how-to-move-head-back-to-a-previous-location-detached-head/34519716#34519716) 391 | for more detail on how to revert. 392 | 393 | This was the simplest approach I found: 394 | 395 | ```bash 396 | # Checkout the desired branch 397 | git checkout 398 | # Undo the desired commit 399 | git revert 400 | # Update the remote with the undo of the code 401 | git push origin 402 | ``` 403 | 404 | Rather than use the last part I unstaged the changes in VSCode which I 405 | think did the same thing. 406 | 407 | ## Show `.gitconfig` details 408 | 409 | There are three levels for Git config: 410 | 411 | **System level** 412 | 413 | ```bash 414 | # to view 415 | git config --list --system 416 | # to set 417 | git config --system color.ui true 418 | ``` 419 | 420 | **Global level** 421 | 422 | ```bash 423 | # to view 424 | git config --list --global 425 | # to set 426 | git config --global user.name xyz 427 | ``` 428 | 429 | **Repository level** 430 | 431 | ```bash 432 | # to view 433 | git config --list --local 434 | # to set 435 | git config --local core.ignorecase true # (--local optional) 436 | # to edit repository config file 437 | git config --edit --local # (--local optional) 438 | ``` 439 | 440 | **View All Settings** 441 | 442 | ```bash 443 | git config --list --show-origin 444 | ``` 445 | 446 | [info](https://stackoverflow.com/a/46986031/1138354) 447 | 448 | ## Conflicts between Windows Git and WSL Git? 449 | 450 | If you are having issues with changes showing in Windows Git and not 451 | Windows Subsystem Linux Git (For a Windows WSL Dev set-up) then check 452 | the settings of each environment by using: 453 | 454 | ```bash 455 | git config --list --show-origin 456 | ``` 457 | 458 | Remove any conflicting settings then try again. 459 | 460 | ## If you want to rename a branch while pointed to any branch, do: 461 | 462 | ```bash 463 | git branch -m 464 | ``` 465 | 466 | If you want to rename the current branch, you can do: 467 | 468 | ```bash 469 | git branch -m 470 | ``` 471 | 472 | A way to remember this, is `-m` is for "move" (or `mv`), which is how 473 | you rename files. 474 | 475 | ## Git ref log 476 | 477 | Want to know what work you have done on a repo? Use `git reflog` to 478 | displpay all the commits. 479 | 480 | ```bash 481 | # show all changes for the last 90 days 482 | git reflog show -a 483 | # show changes with a date 484 | git reflog --date=iso 485 | ``` 486 | 487 | https://stackoverflow.com/questions/17369254/is-there-a-way-to-cause-git-reflog-to-show-a-date-alongside-each-entry 488 | 489 | ## Use SSH in place of HTTPS 490 | 491 | Get your SSH set up on your machine and add a key to GitHub, more on 492 | that here: 493 | https://egghead.io/lessons/javascript-how-to-authenticate-with-github-using-ssh 494 | 495 | You will then need to pick your **Clone with SSH** option from the 496 | **Clone or download** section on your repo page. 497 | 498 | Once you have taken the link from there you will need to set the repo 499 | remote to the SSH URL 500 | 501 | ```bash 502 | git remote set-url origin git@github.com:username/repo-name-here.git 503 | ``` 504 | 505 | Where username is the `username` of the repo owner and 506 | `repo-name-here` is the name of that user's repository. 507 | 508 | ## How to authenticate with GitHub using SSH 509 | 510 | Check that there are no `rsa` files here before continuing, use (bash 511 | or Git bash if you're on Windows): 512 | 513 | ```bash 514 | ls -al ~/.ssh 515 | ``` 516 | 517 | If there's nothing there then generate a new keygen with: 518 | 519 | ```bash 520 | ssh-keygen -t rsa -b 4096 -C your@email.com # add your email address 👍 521 | ``` 522 | 523 | > If you decide to use a password for your SSH key see 524 | > [SSH Keys With Passwords](#ssh-keys-with-passwords) 525 | 526 | Now using `ls -al ~/.ssh` will show our `id_rsa.pub` file. 527 | 528 | Add the SSH key to the SSH agent: 529 | 530 | ```bash 531 | # for mac and Linux from bash, also from Windows Git Bash 532 | eval "$(ssh-agent -s)" 533 | # for Git Bash on Windows 534 | eval `ssh-agent -s` 535 | # fir Fish shell 536 | eval (ssh-agent -c) 537 | ``` 538 | 539 | Add RSA key to SSH with: 540 | 541 | ```bash 542 | ssh-add ~/.ssh/id_rsa 543 | ``` 544 | 545 | Copy your key to clipboard with one of the following: 546 | 547 | ```bash 548 | clip < ~/.ssh/id_rsa.pub # Windows 549 | cat ~/.ssh/id_rsa.pub # Linux 550 | pbcopy < ~/.ssh/id_github.pub # Mac 551 | ``` 552 | 553 | Add a new SSH Key to your GitHub profile from the [settings] page by 554 | clicking the [New SSH key] button and paste in your key. Save it... 555 | 556 | [settings]: https://github.com/settings/keys 557 | [new ssh key]: https://github.com/settings/ssh/new 558 | 559 | Then authenticate with: 560 | 561 | ```bash 562 | ssh -T git@github.com 563 | ``` 564 | 565 | If you go back to the GitHub setting page and refresh the key icon 566 | should go from black to green. 🎉 567 | 568 | ### SSH Keys With Passwords 569 | 570 | If you add a password to your SSH key you will find yourself entering 571 | the password to authenticate on each [pull, push] operation. This can 572 | get tedious, especially if you have a long password in your keys. 573 | 574 | Add the following line to your `~/.ssh/config/` file: 575 | 576 | ```bash 577 | AddKeysToAgent yes 578 | ``` 579 | 580 | Open or create the `~/.ssh/config` file with: 581 | 582 | ```bash 583 | nano ~/.ssh/config 584 | ``` 585 | 586 | The SSH agent will also need to be started on each terminal session 587 | now to store the keys in, add the following to your `~/.bashrc` file: 588 | 589 | ```bash 590 | [ -z "$SSH_AUTH_SOCK" ] && eval "$(ssh-agent -s)" 591 | ``` 592 | 593 | Open the `~/.bashrc` file with: 594 | 595 | ```bash 596 | nano ~/.bashrc 597 | ``` 598 | 599 | Now the SSH agent will start on each terminal session and you will 600 | only be prompted for the password on the first `pull`, `push` 601 | operation. 602 | 603 | ## Use multiple SSH keys 604 | 605 | If you have more than one GitHub account or if you have AWS code 606 | commit account then you will need to set up a `config` file, add your 607 | SSH key the same as detailed in 608 | [How to authenticate with GitHub using SSH](#how-to-authenticate-with-github-using-ssh) 609 | and give the key a different name: 610 | 611 | ```bash 612 | # ls ~/.ssh 613 | ~/.ssh/id_rsa_github_1 614 | ~/.ssh/id_rsa_github_2 615 | ~/.ssh/id_rsa_git_aws 616 | ``` 617 | 618 | You can delete all cached keys before, with: 619 | 620 | ```bash 621 | ssh-add -D 622 | ``` 623 | 624 | You can check your saved keys, with: 625 | 626 | ```bash 627 | ssh-add -l 628 | ``` 629 | 630 | Set up the SSH config file, check to see if you haven't got a `config` 631 | file already set up with: 632 | 633 | ```bash 634 | ls -al ~/.ssh/ 635 | ``` 636 | 637 | If you haven't got a `config` file there then: 638 | 639 | ```bash 640 | cd ~/.ssh/ 641 | touch config 642 | ``` 643 | 644 | Use your text editor of choice, in this example we'll use `nano`: 645 | 646 | ```bash 647 | nano config 648 | ``` 649 | 650 | Add your configuration: 651 | 652 | ```bash 653 | AddKeysToAgent yes 654 | 655 | # github_1 account 656 | Host github.com-github_1 657 | HostName github.com 658 | User git 659 | IdentityFile ~/.ssh/id_rsa_github_1 660 | 661 | # github_2 account 662 | Host github.com-github_2 663 | HostName github.com 664 | User git 665 | IdentityFile ~/.ssh/id_rsa_github_2 666 | 667 | # AWS code commit account 668 | Host git-codecommit.*.amazonaws.com 669 | User AWSUSERNAME 670 | IdentityFile ~/.ssh/id_rsa_git_aws 671 | ``` 672 | 673 | Clone your repo and modify the config file of the repo as detailed 674 | here: 675 | [Specify multiple users for myself in .gitconfig?](#specify-multiple-users-for-myself-in-gitconfig) 676 | 677 | There's a great Gist detailing this 678 | [here](https://gist.github.com/jexchan/2351996) for more detail if 679 | needed. 680 | 681 | ## Re-use SSH keys, from one machine to another 682 | 683 | If you want to avoid creating multiple SSH keys for different 684 | environments and move your `.ssh` folder from one machine to another 685 | then you can do the following: 686 | 687 | Copy your `.ssh` and `.gitconfig` files: 688 | 689 | Copy from Linux to Windows 690 | 691 | ```bash 692 | cp ~/.ssh/* /c/Users/Scott.Spence/.linuxFiles/.ssh/ 693 | cp ~/.gitconfig /c/Users/Scott.Spence/.linuxFiles/ 694 | ``` 695 | 696 | Copy from Windows to Linux 697 | 698 | ```bash 699 | cp /mnt/c/Users/Scott.Spence/.linuxFiles/.ssh/* ~/.ssh/ 700 | # Reset the permissions back to default: 701 | sudo chmod 600 ~/.ssh/id_rsa 702 | sudo chmod 600 ~/.ssh/id_rsa.pub 703 | cp /mnt/c/Users/Scott.Spence/.linuxFiles/.* ~/ 704 | chmod 644 ~/.gitconfig 705 | ``` 706 | 707 | Start the SSH agent with: 708 | 709 | ```bash 710 | eval "$(ssh-agent -s)" # for mac and Linux from bash, also from Windows Git Bash 711 | ``` 712 | 713 | Add your SSH key to the `ssh-agent` with: 714 | 715 | ```bash 716 | ssh-add ~/.ssh/id_rsa 717 | ``` 718 | 719 | Then authenticate with: 720 | 721 | ```bash 722 | # GitHub 723 | ssh -T git@github.com 724 | # Bitbucket 725 | ssh -T git@bitbucket.org 726 | ``` 727 | 728 | ## Using SSH over the HTTPS port 729 | 730 | SSH can be tunnelled over HTTPS if the network you are on blocks the 731 | SSH port. 732 | 733 | Test if SSH over HTTPS is possible with: 734 | 735 | ```bash 736 | ssh -T -p 443 git@ssh.github.com 737 | ``` 738 | 739 | If you get a response then, edit your `~/.ssh/config` file and add 740 | this section: 741 | 742 | ```bash 743 | Host github.com 744 | Hostname ssh.github.com 745 | Port 443 746 | ``` 747 | 748 | Check that you have a key already added with: 749 | 750 | ```bash 751 | ssh-add -l 752 | ``` 753 | 754 | If nothing is listed then add in your key with: 755 | 756 | ```bash 757 | ssh-add ~/.ssh/id_rsa 758 | ``` 759 | 760 | Test that is has worked with: 761 | 762 | ```bash 763 | ssh -T git@github.com 764 | ``` 765 | 766 | ## Change SSH key password 767 | 768 | Tired of typing your SSH key password because you made it a 32 769 | characters and can't stand the monotony anymore? 770 | 771 | Still want to have a SSH key password on your existing SSH key? 772 | 773 | Use: 774 | 775 | ```bash 776 | ssh-keygen -p -f ~/.ssh/id_rsa 777 | ``` 778 | 779 | ## Specify multiple users for myself in .gitconfig? 780 | 781 | Want to have different git credentials for one specific repository? 782 | 783 | You can configure an individual git repo to use a specific user/email 784 | address which overrides the global configuration. 785 | 786 | To list out the config for the repo: 787 | 788 | ```bash 789 | git config --list --local 790 | ``` 791 | 792 | From the root of the repo, run: 793 | 794 | ```bash 795 | git config user.name 'Your Name' 796 | git config user.email 'your@email.com' 797 | ``` 798 | 799 | Whereas the default user / email is configured in your `~/.gitconfig` 800 | 801 | ```bash 802 | git config --global user.name 'Your Name' 803 | git config --global user.email 'your@email.com' 804 | ``` 805 | 806 | ## Cant remember what your last git commit said? 807 | 808 | ```bash 809 | git show 810 | ``` 811 | 812 | ## Rebase changes 813 | 814 | If you're working on a team and there have been changes to the main 815 | branch you want to push your changes to, you can rebase before 816 | submitting a PR. 817 | 818 | In this scenario we're going to rebase our `feature` branch off of the 819 | `develop` branch 820 | 821 | ```bash 822 | # switch from your feature to get latest develop changes 823 | git checkout develop 824 | git pull 825 | # checkout the feature branch and rebase 826 | git checkout feature 827 | git rebase develop 828 | ``` 829 | 830 | Then use the prompts from there in conjunction with your text editor 831 | to add in the changes. 832 | 833 | ```bash 834 | # add a change 835 | git add 836 | # continue the rebase 837 | git rebase --continue 838 | # have an unrelated change, nothing to correct 839 | git rebase --skip 840 | # oh DERP! Want to start over? 841 | git rebase --abort 842 | ``` 843 | 844 | ## Rebase accept incoming in bulk 845 | 846 | If you have a large file (like a `package-lock.json`) that you want to 847 | accept all the incoming changes from then. 848 | 849 | Whilst you're in rebase you'll need to check out the file from your 850 | incoming branch then add it as the new file. 851 | 852 | ```bash 853 | # checkout the file 854 | git checkout temp-branch -- package-lock.json 855 | # add the file whilst in rebase 856 | git add package-lock.json 857 | # continue with the things 858 | git rebase --continue 859 | ``` 860 | 861 | ## See differences between two branches 862 | 863 | If you want to see the difference between two branches then use the 864 | git built in diff tool. 865 | 866 | ```bash 867 | git diff branch1..branch2 868 | ``` 869 | 870 | ## See differences between two files 871 | 872 | If you want to see the difference between two file across different 873 | branches then use. 874 | 875 | ```bash 876 | git diff branch1..branch2 package.json 877 | ``` 878 | 879 | ## Revert to a previous commit 880 | 881 | Find the commit you want to revert to, then: 882 | 883 | ```bash 884 | git reset hashOfCommit 885 | ``` 886 | 887 | Then reset to the branch on the origin: 888 | 889 | ```bash 890 | # if I wanted to push back to the develop branch on GitHub say 891 | git reset --soft origin/develop 892 | ``` 893 | 894 | Reference: 895 | https://stackoverflow.com/questions/11829911/push-changes-without-pull 896 | 897 | ## Gitignore 898 | 899 | You can automate the creation of your projects `gitignore` file using 900 | the [gitignore API](https://docs.gitignore.io/install/command-line). 901 | 902 | Setup the API: 903 | 904 | ``` 905 | git config --global alias.ignore \ 906 | '!gi() { curl -sL https://www.gitignore.io/api/$@ ;}; gi' 907 | ``` 908 | 909 | Add to your shell configuration: 910 | 911 | Bash 912 | 913 | ``` 914 | echo "function gi() { curl -sL https://www.gitignore.io/api/\$@ ;}" >> \ 915 | ~/.bashrc && source ~/.bashrc 916 | ``` 917 | 918 | checkout `gi list` for the languages and editors supported. You can 919 | issue the following command inside your project 920 | 921 | ``` 922 | gi linux,visualstudiocode,node >> ./.gitignore 923 | ``` 924 | 925 | If you find yourself using the same `.gitignore` on your projects you 926 | can create a global file (i.e. `.gitignore_global`), and copy to your 927 | new project. 928 | 929 | Reference: https://docs.gitignore.io/install/command-line 930 | 931 | 932 | 933 | [syncing a fork]: https://help.github.com/articles/syncing-a-fork/ 934 | [adding an existing project to github using the command line]: 935 | https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/ 936 | -------------------------------------------------------------------------------- /sheets/grunt.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Grunt 3 | createdDate: 2023-04-01 4 | updatedDate: 2023-04-01 5 | published: true 6 | slug: grunt 7 | description: Grunt Task Runner is a JavaScript Task Runner. 8 | --- 9 | 10 | Use Grunt when performing repetitive tasks like minification, 11 | compilation, unit testing, linting, etc. After you've configured it 12 | through a Gruntfile, a task runner can do most of that mundane work 13 | for you—and your team—with basically zero effort. 14 | 15 | ## Prerequisites 16 | 17 | Install Node.js (https://nodejs.org/en/download), NPM or Yarn, and 18 | Grunt CLI: 19 | 20 | ```bash 21 | # NPM 22 | npm install -g npm 23 | 24 | # Or Yarn 25 | sudo npm install --global yarn 26 | 27 | # Grunt: First you need to install Grunt for the command line as a global module, after which you have grunt command available globally. 28 | npm install -g grunt-cli 29 | ``` 30 | 31 | ## Example Project Folder Structure 32 | 33 | ```bash 34 | project 35 | ├── Gruntfile.js 36 | ├── index.html 37 | ├── package.json 38 | ├── scripts 39 | │ └── somefile.js 40 | └── styles 41 | └── main.scss 42 | ``` 43 | 44 | ## Configure a Gruntfile.js 45 | 46 | Example Gruntfile.js configuration below enables 'watch', which looks 47 | for changes and processes desired tasks based on options you set 48 | inside watch object. 49 | 50 | Tasks inside of the 'watch' object refer to the grunt.registerTasks 51 | toward bottom, which can run multiple subtasks. Any combination of 52 | tasks can be added. This is just one example. In this gruntfile 53 | config, SASS and Minification tasks are run each time you save your 54 | files with CTRL + S. 55 | 56 | ```bash 57 | module.exports = function(grunt) { 58 | 59 | grunt.initConfig({ 60 | 61 | watch: { 62 | sass: { 63 | files: '**/*.scss', // ** any directory; * any file 64 | tasks: ['css'] 65 | }, 66 | 67 | uglify: { 68 | files: 'features/js/util.js', 69 | tasks: ['uglify'] 70 | } 71 | }, 72 | 73 | cssmin: { 74 | build: { 75 | src: 'common/css/main.css', 76 | dest: 'common/css/main.min.css' 77 | } 78 | }, 79 | 80 | sass: { 81 | dev: { // indicates that it will be used only during development 82 | files: { 83 | // destination // source file 84 | 'common/css/main.css': 'common/scss/main.scss' 85 | } 86 | } 87 | }, 88 | 89 | uglify: { 90 | build: { 91 | files: { 92 | 'features/js/util.min.js': ['features/js/util.js'] 93 | } 94 | } 95 | } 96 | }); 97 | 98 | grunt.registerTask('css', ['sass', 'cssmin']); 99 | grunt.registerTask('js', ['uglify']); 100 | 101 | grunt.loadNpmTasks('grunt-contrib-sass'); 102 | grunt.loadNpmTasks('grunt-contrib-watch'); 103 | grunt.loadNpmTasks('grunt-contrib-cssmin'); 104 | grunt.loadNpmTasks('grunt-contrib-uglify'); 105 | }; 106 | ``` 107 | 108 | ## devDependencies: package.json 109 | 110 | The package.json file will need to be populated with a devDependencies 111 | object listing all of the dependencies your project relies on. 112 | 113 | ```bash 114 | { 115 | "devDependencies": { 116 | "grunt": "^1.5.3", 117 | "grunt-contrib-cssmin": "^3.0.0", 118 | "grunt-contrib-jshint": "^3.2.0", 119 | "grunt-contrib-sass": "^1.0.0", 120 | "grunt-contrib-uglify": "^4.0.1", 121 | "grunt-contrib-watch": "^1.1.0" 122 | } 123 | } 124 | 125 | ``` 126 | 127 | Open a Terminal and run 'npm install' to install the following 128 | packages for your particular project. 129 | 130 | ```bash 131 | npm install 132 | ``` 133 | 134 | ## Enable Watch 135 | 136 | In your Terminal, execute the following command in your project's 137 | directory to start watching your changes as you begin working. 138 | 139 | ```bash 140 | grunt watch 141 | ``` 142 | 143 | To stop watching 144 | 145 | ```bash 146 | CTLR + C 147 | ``` 148 | -------------------------------------------------------------------------------- /sheets/homebrew.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Homebrew 3 | createdDate: 2019-08-16 4 | updatedDate: 2019-12-02 5 | published: true 6 | slug: homebrew 7 | description: Homebrew is a package manager for macOS and Linux. 8 | --- 9 | 10 | ## Search homebrew 11 | 12 | Search homebrew for apps, cli's, tools 13 | 14 | ```bash 15 | brew search keychain 16 | ``` 17 | 18 | ## Install 19 | 20 | ```bash 21 | brew install keychain 22 | ``` 23 | 24 | If the item you're looking for is part of a cask: 25 | 26 | ```bash 27 | brew cask install visual-studio-code-insiders 28 | ``` 29 | 30 | ## Install multiple items in one command 31 | 32 | ```bash 33 | brew cask install firefox firefox-developer-edition 34 | ``` 35 | 36 | ## Check for and install updates 37 | 38 | Check for updates on installed apps and upgrade anything that is 39 | outdated. 40 | 41 | ```bash 42 | brew update --verbose && brew upgrade `brew outdated` 43 | ``` 44 | 45 | ## Cask upgrade 46 | 47 | Brew and casks are treated differently so the upgrade is a different 48 | syntax too. 49 | 50 | ```bash 51 | # check outdated 52 | brew cask outdated 53 | # update outdated 54 | brew cask upgrade 55 | ``` 56 | 57 | Alternatively [there's a package] you can install. 58 | 59 | Install: 60 | 61 | ```bash 62 | brew tap buo/cask-upgrade 63 | ``` 64 | 65 | Usage: 66 | 67 | ```bash 68 | brew cu 69 | ``` 70 | 71 | 72 | 73 | [there's a package]: https://github.com/buo/homebrew-cask-upgrade 74 | -------------------------------------------------------------------------------- /sheets/http.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: HTTP 3 | createdDate: 2021-11-26 4 | updatedDate: 2021-11-26 5 | published: true 6 | slug: http 7 | description: HTTP is a stateless, hypertext transfer protocol. 8 | --- 9 | 10 | ## Headers 11 | 12 | All possible values of HTTP Content-type header 13 | 14 | | Type | Values | 15 | | :---------- | :---------------------------------------------- | 16 | | Application | col 2 row 1 | 17 | | | col 2 row 2 | 18 | | | application/EDI-X12 | 19 | | | application/EDIFACT | 20 | | | application/javascript | 21 | | | application/octet-stream | 22 | | | application/ogg | 23 | | | application/pdf | 24 | | | application/xhtml+xml | 25 | | | application/x-shockwave-flash | 26 | | | application/json | 27 | | | application/ld+json | 28 | | | application/xml | 29 | | | application/zip | 30 | | | application/x-www-form-urlencoded | 31 | | Audio | audio/mpeg | 32 | | | audio/x-ms-wma | 33 | | | audio/vnd.rn-realaudio | 34 | | | audio/x-wav | 35 | | Image | image/gif | 36 | | | image/jpeg | 37 | | | image/png | 38 | | | image/tiff | 39 | | | image/vnd.microsoft.icon | 40 | | | image/x-icon | 41 | | | image/vnd.djvu | 42 | | | image/svg+xml | 43 | | Multipart | multipart/mixed | 44 | | | multipart/alternative | 45 | | | multipart/related (using by MHTML (HTML mail).) | 46 | | | multipart/form-data | 47 | | Text | text/css | 48 | | | text/csv | 49 | | | text/html | 50 | | | text/javascript (obsolete) | 51 | | | text/plain | 52 | | | text/xml | 53 | | Video | video/mpeg | 54 | | | video/mp4 | 55 | | | video/quicktime | 56 | | | video/x-ms-wmv | 57 | | | video/x-msvideo | 58 | | | video/x-flv | 59 | | | video/webm | 60 | 61 | 62 | -------------------------------------------------------------------------------- /sheets/hyper.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Hyperterm 3 | createdDate: 2017-05-19 4 | updatedDate: 2017-10-13 5 | published: true 6 | slug: hyper 7 | description: Hyperterm is a terminal emulator for the web. 8 | --- 9 | 10 | ## use Git bash 11 | 12 | Windows user? Want to use commands like `ls` and `pwd` in the hyper 13 | terminal? 14 | 15 | https://github.com/zeit/hyper/issues/1252 16 | 17 | ```javascript 18 | // the shell to run when spawning a new session (i.e. /usr/local/bin/fish) 19 | // if left empty, your system's login shell will be used by default 20 | shell: 'C:\\Program Files\\Git\\git-cmd.exe', 21 | 22 | // for setting shell arguments (i.e. for using interactive shellArgs: ['-i']) 23 | // by default ['--login'] will be used 24 | shellArgs: ['--command=usr/bin/bash.exe', '-l', '-i'], 25 | ``` 26 | -------------------------------------------------------------------------------- /sheets/javascript.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: JavaScript 3 | createdDate: 2017-12-01 4 | updatedDate: 2020-07-27 5 | published: true 6 | slug: javascript 7 | description: 8 | JavaScript is a programming language that conforms to the ECMAScript 9 | specification. 10 | --- 11 | 12 | 15 | 16 | ## Document Design Mode 17 | 18 | Edit a web page, set the design mode to on. 19 | 20 | ```js 21 | document.designMode = 'on'; 22 | // make edits, then 23 | document.designMode = 'off'; 24 | ``` 25 | 26 | ## Copy an array 27 | 28 | ```js 29 | // initial array 30 | const cats = [`Darcy`, `Leo`, `Boris`]; 31 | // copy array 32 | const copyCats = [...cats]; 33 | ``` 34 | 35 | output: 36 | 37 | ```bash 38 | ["Darcy", "Leo", "Boris"] 39 | ``` 40 | 41 | ## Combine two arrays 42 | 43 | ```js 44 | // array 1 45 | const cats = [`Darcy`, `Leo`, `Boris`]; 46 | // array 2 47 | const people = [`Scott`, `Islem`, `Tom`, `George`]; 48 | // all 49 | const catsAndPeople = [...cats, ...people]; 50 | ``` 51 | 52 | output: 53 | 54 | ```bash 55 | ["Darcy", "Leo", "Boris", "Scott", "Islem", "Tom", "George"] 56 | ``` 57 | 58 | ## Remove item without mutating 59 | 60 | ```js 61 | // array 1 62 | const cats = [`Darcy`, `Leo`, `Boris`]; 63 | // array 2 64 | const people = [`Scott`, `Islem`, `Tom`, `George`]; 65 | // all 66 | const catsAndPeople = [...cats, ...people]; 67 | // remove Tom 68 | const withoutTom = [ 69 | ...catsAndPeople.slice(0, 5), 70 | ...catsAndPeople.slice(6), 71 | ]; 72 | ``` 73 | 74 | Tom is left out of the new array party, sorry Tom 75 | 76 | output: 77 | 78 | ```bash 79 | ["Darcy", "Leo", "Boris", "Scott", "Islem", "George"] 80 | ``` 81 | 82 | ## Reverse an array 83 | 84 | So, `.reverse()` will mutate the original array so it's a good idea to 85 | make a new array. 86 | 87 | ```js 88 | const cats = [`Darcy`, `Leo`, `Boris`]; 89 | // reverse array 90 | const reverseCatNames = [...cats].reverse(); 91 | ``` 92 | 93 | output: 94 | 95 | ```bash 96 | # cats 97 | ["Darcy", "Leo", "Boris"] 98 | # reverseCatNames 99 | ["Boris", "Leo", "Darcy"] 100 | ``` 101 | 102 | ## Reverse a string 103 | 104 | There's a `.reverse()` method for arrays, so if you split your sting 105 | into an array then you'll be able to reverse it. 106 | 107 | ```js 108 | 'racecar'.split('').reverse().join(''); 109 | ``` 110 | 111 | output: 112 | 113 | ```bash 114 | racecar 115 | ``` 116 | 117 | ## New array from existing 118 | 119 | Return one new entry for every existing entry: `.map()` 120 | 121 | ```js 122 | const originalArray = [1, 2, 3]; 123 | const newArray = originalArray.map((item) => item * 2); 124 | console.log(newArray); 125 | ``` 126 | 127 | output: 128 | 129 | ``` 130 | [ 2, 4, 6 ] 131 | ``` 132 | 133 | ## Return new array filter 134 | 135 | Return a new array with only some of the existing entries: `.filter()` 136 | 137 | ```js 138 | const originalArray = [1, 9, 4, 2, 42]; 139 | const newArray = originalArray.filter((item) => item > 5); 140 | console.log(newArray); 141 | ``` 142 | 143 | output: 144 | 145 | ``` 146 | [ 9, 42 ] 147 | ``` 148 | 149 | ## Return one new thing only 150 | 151 | Return one new thing only: `.reduce()` 152 | 153 | ```js 154 | const originalArray = [ 155 | 'Alice', 156 | 'Bob', 157 | 'Charlie', 158 | 'Bob', 159 | 'Bob', 160 | 'Charlie', 161 | ]; 162 | const numberOfBobs = originalArray.reduce((accumulator, item) => { 163 | if (item === 'Bob') { 164 | return accumulator + 1; 165 | } else { 166 | return accumulator; 167 | } 168 | }, 0); 169 | console.log(numberOfBobs); 170 | ``` 171 | 172 | output: 173 | 174 | ``` 175 | 3 176 | ``` 177 | 178 | ## Sum all even numbers from array 179 | 180 | ```js 181 | const arr = [0, 1, 2, 3, 4, 5, null, 6, 9]; 182 | 183 | function addEven() { 184 | return arr.reduce( 185 | (acc, cur) => (cur % 2 === 0 ? acc + cur : acc), 186 | 0, 187 | ); 188 | } 189 | 190 | addEven(arr); 191 | ``` 192 | 193 | ## Return the first duplicate number 194 | 195 | ```js 196 | function firstDuplicate(arr) { 197 | // empty array to use to check incoming array against 198 | let checkArray = {}; 199 | 200 | // loop it 201 | for (let i = 0; i < arr.length; i++) { 202 | // check that array element against 203 | // checkArray 204 | if (checkArray[arr[i]] !== undefined) 205 | // if there's no matching item then 206 | return arr[i]; 207 | // append to the checkArray 208 | else checkArray[arr[i]] = i; 209 | } 210 | return -1; 211 | } 212 | ``` 213 | 214 | ## Async await with axios and GraphQL 215 | 216 | ```js 217 | const axios = require('axios'); 218 | 219 | axios({ 220 | url: 'https://spotify-graphql-server.herokuapp.com/graphql', 221 | method: 'post', 222 | data: { 223 | query: ` 224 | { 225 | queryArtists(byName:"Andy C") { 226 | name 227 | id 228 | image 229 | albums { 230 | name 231 | image 232 | } 233 | } 234 | } 235 | `, 236 | }, 237 | }).then((result) => { 238 | console.log(result.data); 239 | }); 240 | ``` 241 | 242 | ## Remove vowels from string 243 | 244 | Use a regular expression: 245 | 246 | ```js 247 | 'replace vowels from string'.replace(/[aeiou]/gi, ''); 248 | ``` 249 | 250 | Output: 251 | 252 | ```bash 253 | "rplc vwls frm strng" 254 | ``` 255 | 256 | With JavaScript functions: 257 | 258 | ```js 259 | 'replace vowels from string' 260 | .split('a') 261 | .join('') 262 | .split('e') 263 | .join('') 264 | .split('i') 265 | .join('') 266 | .split('o') 267 | .join('') 268 | .split('u') 269 | .join(''); 270 | ``` 271 | 272 | Output: 273 | 274 | ```bash 275 | "rplc vwls frm strng" 276 | ``` 277 | 278 | ## Closure examples 279 | 280 | Closures are the ability for a child function (or inner function) to 281 | access variables from a higher level scope even after the functions 282 | have been called (closed or closed over). 283 | 284 | The running of a function within a function: 285 | 286 | ```js 287 | function greeting(salutation = '') { 288 | const sarcasm = () => { 289 | return [...salutation] 290 | .map((char, i) => char[`to${i % 2 ? 'Upper' : 'Lower'}Case`]()) 291 | .join(''); 292 | }; 293 | return function (name) { 294 | return `${sarcasm()} ${name}`; 295 | }; 296 | } 297 | 298 | // run the function 299 | const sayHiya = greeting('Hiiiya'); 300 | const sayHello = greeting('Hellooo'); 301 | 302 | // now the function is closed but we can still 303 | // access the variables inside it 304 | console.log(sayHiya('scott')); 305 | console.log(sayHello('margret')); 306 | ``` 307 | 308 | Private variables: 309 | 310 | ```js 311 | function createGame(gameType) { 312 | let score = 0; 313 | return function increment() { 314 | score++; 315 | return `Your game of ${gameType} score is ${score}.`; 316 | }; 317 | } 318 | 319 | const cribbage = createGame('Cribbage'); 320 | const bridge = createGame('Bridge'); 321 | 322 | console.log(cribbage()); 323 | console.log(cribbage()); 324 | console.log(cribbage()); 325 | console.log(cribbage()); 326 | console.log(bridge()); 327 | console.log(bridge()); 328 | console.log(cribbage()); 329 | ``` 330 | 331 | Output: 332 | 333 | ```bash 334 | Your game of Cribbage score is 1. 335 | Your game of Cribbage score is 2. 336 | Your game of Cribbage score is 3. 337 | Your game of Cribbage score is 4. 338 | Your game of Bridge score is 1. 339 | Your game of Bridge score is 2. 340 | Your game of Cribbage score is 5. 341 | ``` 342 | 343 | ## Mock and endpoint 344 | 345 | Use a mock endpoint to test against for auth forms. 346 | 347 | ```js 348 | const wait = (n) => new Promise((resolve) => setTimeout(resolve, n)); 349 | 350 | const mockFetch = (url) => 351 | wait(1000).then(() => ({ 352 | status: 200, 353 | body: { 354 | url: 'http://bbc.co.uk', 355 | }, 356 | })); 357 | 358 | mockFetch(`${endpoint}`).then((response) => { 359 | console.log('====================='); 360 | console.log(response.status); 361 | console.log(form.userEmail.value); 362 | console.log(form.userPassword.value); 363 | console.log('====================='); 364 | response.status === 200 365 | ? (location = response.body.url) 366 | : console.error(`incorrect`); 367 | }); 368 | ``` 369 | 370 | ## List all image URLs from a web page 371 | 372 | Need to quickly grab a load of images from a page? 373 | 374 | ```js 375 | let images = document.querySelectorAll('img'); 376 | Array.from(images).map((i) => { 377 | console.log(i.src); 378 | }); 379 | ``` 380 | 381 | ## `
` cannot appear as a descendant of `

` 382 | 383 | If you're looking for where this is happening, in console you can use: 384 | 385 | ```js 386 | document.querySelectorAll(' p * div '); 387 | ``` 388 | 389 | ## Truncate a string 390 | 391 | Shorten a string! Define the start and the end of the string you want 392 | to return: 393 | 394 | ```js 395 | const myString = 'ABCDEFG'; 396 | const myTruncatedString = myString.substring(0, 3); 397 | // The value of myTruncatedString is "ABC" 398 | ``` 399 | 400 | ## Current year one liner 401 | 402 | ```js 403 | const copyrightYear = new Date().getFullYear(); 404 | ``` 405 | 406 | ## Fizz Buzz 407 | 408 | Classic FizzBuzz loop. 409 | 410 | ```js 411 | for (let i = 1; i <= 100; ++i) { 412 | let output = ''; 413 | if (i % 3 === 0) { 414 | output += 'Fizz'; 415 | } 416 | if (i % 5 === 0) { 417 | output += 'Buzz'; 418 | } 419 | 420 | if (output === '') { 421 | output = i; 422 | } 423 | 424 | console.log(output); 425 | } 426 | ``` 427 | 428 | ## Prototypical Instantiation 429 | 430 | Instantiation patterns are ways to create something in JavaScript. 431 | 432 | ```js 433 | var person = function (name) { 434 | var obj = Object.create(objMethods); 435 | obj.name = name; 436 | return obj; 437 | }; 438 | 439 | var objMethods = { 440 | sayHello: function () { 441 | console.log(`${this.name} says hello!`); 442 | }, 443 | changeName: function (newName) { 444 | var oldName = this.name; 445 | this.name = newName; 446 | 447 | console.log(`${oldName} has changed their name to ${this.name}`); 448 | }, 449 | }; 450 | 451 | // Implementation 452 | var person1 = person('Austin'); 453 | person1.sayHello(); 454 | person1.changeName('Derek'); 455 | person1.sayHello(); 456 | ``` 457 | 458 | Output: 459 | 460 | ```bash 461 | Austin says hello! 462 | Austin has changed their name to Derek 463 | Derek says hello! 464 | ``` 465 | 466 | ## Change Page Font Size 467 | 468 | Want to change the font size on a page? Here you can target the while 469 | document, but could change `html` with `p`, `span` whatever. 470 | 471 | ```javascript 472 | document.getElementsByTagName('html')[0].style['font-size'] = '10px'; 473 | ``` 474 | 475 | ## Checking for `window` 476 | 477 | 478 | 479 | [Optional chaining] can not be used on `window`. It will throw an 480 | error when used on any undeclared root object, so no escaping the 481 | `typeof window == 'undefined'` check with a clever `?.`. 482 | 483 | ## Unique Array of Values with Set and Spread Operator [ES6] 484 | 485 | 486 | 487 | In ES6, Set objects are collections of values. Set uses strict 488 | equality (`===`) to check values & each value may only occur once. We 489 | use the spread operator to convert the Set object into an array. 490 | 491 | ```js 492 | const numArr = [1, 1, 1, 2, 3]; 493 | // (5) [1, 1, 1, 2, 3] 494 | 495 | const uniqueNumSet = new Set(numArr); 496 | // Set(3) {1, 2, 3} 497 | 498 | const uniqueNumArr = [...new Set(numArr)]; 499 | // (3) [1, 2, 3] 500 | ``` 501 | 502 | If you prefer something a bit more explicit, you can do this instead: 503 | `const uniqueNumArr = Array.from(uniqueNumSet)` 504 | 505 | ## Convert an array of objects into a single object 506 | 507 | If you have an array of objects, you can convert that list of objects 508 | into a single object by using [`Object.assign()`][object.assign] and 509 | [spread syntax][spread syntax]. The `Object.assign()` method copies 510 | all enumerable own properties from one or more source objects to a 511 | target object and it returns the modified target object. We use spread 512 | syntax `...` on the array `items` so that each object in the array can 513 | be "expanded" in places where key-value pairs exists. 514 | 515 | ```js 516 | const items = [ 517 | { address: '123 ABC street' }, 518 | { isLeased: false }, 519 | { hasPool: true }, 520 | ]; 521 | 522 | const obj = Object.assign({}, ...items); 523 | console.log(obj); 524 | // { "address": "123 ABC street", "isLeased": false, "hasPool": true } 525 | ``` 526 | 527 | 528 | 529 | [nicky meuleman]: https://twitter.com/NMeuleman 530 | [optional chaining]: 531 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining 532 | [object.assign]: 533 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign 534 | [spread syntax]: 535 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax 536 | -------------------------------------------------------------------------------- /sheets/linux.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Linux 3 | createdDate: 2018-03-22 4 | updatedDate: 2019-02-11 5 | published: true 6 | slug: linux 7 | description: Linux is a free and open source operating system. 8 | --- 9 | 10 | ## Tar and untar 11 | 12 | To compress a file/folder into a `.tar.gz` archive: 13 | 14 | ```bash 15 | tar cvfz archive.tar.gz folder 16 | ``` 17 | 18 | To decompress a folder/folder: 19 | 20 | ```bash 21 | tar xvfz archive.tar.gz 22 | ``` 23 | 24 | ## Install a binary 25 | 26 | If you're working on a local machine with administrator permissions, 27 | you may want to add downloaded-binary to your PATH, so that you can 28 | access it directly from any project folder. You could do this by 29 | extracting it to a directory that is already on your PATH. (For 30 | example, `/usr/local/bin` is a common choice for Mac and Linux.). 31 | 32 | ```bash 33 | # navigate to download location of .tar.gz 34 | sudo mv downloaded-binary.tar.gz /usr/local/bin/downloaded-binary.tar.gz 35 | sudo tar zxf downloaded-binary.tar.gz 36 | ``` 37 | 38 | See further details on [how to install a binary]. 39 | 40 | ## Get build info 41 | 42 | ```bash 43 | uname -a 44 | # Linux DESKTOP-KCGTGRV 4.4.0-43-Microsoft 45 | # 1-Microsoft Wed Dec 31 14:42:53 PST 2014 x86_64 x86_64 x86_64 GNU/Linux 46 | ``` 47 | 48 | ## Get kernel version 49 | 50 | ```bash 51 | uname -r 52 | ``` 53 | 54 | ## Get architecture 55 | 56 | ```bash 57 | dpkg --print-architecture 58 | # amd64 59 | ``` 60 | 61 | ## See what Linux version 62 | 63 | ```bash 64 | cat /etc/issue 65 | # Debian GNU/Linux 9 \n \l 66 | ``` 67 | 68 | ## force uninstall a package 69 | 70 | Nuclear option: 71 | https://askubuntu.com/questions/525088/how-to-delete-broken-packages-in-ubuntu 72 | 73 | ## see what services are available 74 | 75 | ```bash 76 | ll /etc/systemd/system 77 | ``` 78 | 79 | ## see what services are running 80 | 81 | ```bash 82 | journalctl -ef 83 | ``` 84 | 85 | 86 | 87 | [how to install a binary]: 88 | https://www.cyberciti.biz/faq/install-tarballs/ 89 | -------------------------------------------------------------------------------- /sheets/macos.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: macOS 3 | createdDate: 2018-04-05 4 | updatedDate: 2021-01-05 5 | published: true 6 | slug: macos 7 | description: 8 | macOS is a macOS operating system developed and published by Apple 9 | Inc. 10 | --- 11 | 12 | 15 | 16 | ## Install Git without xcode 17 | 18 | In the terminal app do: 19 | 20 | ```bash 21 | git 22 | ``` 23 | 24 | This will install prompt you to install them, agree to the terms and 25 | it will download: git, svn, libtool, perl, make, among others. These 26 | would come with many Linux distros by default. 27 | 28 | You can investigate the install: 29 | `/Library/Developer/CommandLineTools/` 30 | 31 | 32 | 33 | ## Screen snip 34 | 35 | Select an area to save to a file 36 | 37 | ```bash 38 | cmd + shift + 4 39 | ``` 40 | 41 | Screen snip to clipboard 42 | 43 | ```bash 44 | cmd + shift + ctrl + 4 45 | ``` 46 | 47 | ## Screenshot 48 | 49 | Window screenshot 50 | 51 | ```bash 52 | cmd + shift + 4 #then spacebar 53 | ``` 54 | 55 | Window screenshot to clipboard 56 | 57 | ```bash 58 | cmd + shift + cmd + 4 #then spacebar 59 | ``` 60 | 61 | ## Screenshot, record screen UI 62 | 63 | There's another option for taking screenshots in Mojave. 64 | 65 | ```bash 66 | cmd + shift + 5 67 | ``` 68 | 69 | This is where you can configure the type of snip you want to take. 70 | 71 | Hold dow the option key when taking a screenshot to remove the shadow. 72 | 73 | ## Keys 74 | 75 | The '#' character 76 | 77 | ```bash 78 | alt + 3 79 | ``` 80 | 81 | ## System 82 | 83 | Show hidden files 84 | 85 | ```bash 86 | shift + cmd + . 87 | ``` 88 | 89 | ## Enable "Allow apps downloaded from:" 90 | 91 | You may notice that the option to "Allow apps downloaded from: 92 | Anywhere" is disabled, to enable it use: 93 | 94 | ```bash 95 | sudo spctl --master-disable 96 | ``` 97 | -------------------------------------------------------------------------------- /sheets/now.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: now 3 | createdDate: 2017-05-30 4 | updatedDate: 2020-04-18 5 | published: true 6 | slug: now 7 | description: 8 | Now is a command line utility for managing your Zeit projects. 9 | --- 10 | 11 | The awesome now from zeit! It has a great cli with probably all of 12 | this detailed in there under `-h` somewhere 😁 13 | 14 | ## Add a TXT record 15 | 16 | Need to add a verification for something like the Google Search 17 | console. 18 | 19 | ```bash 20 | now dns add yoursite.xyz '@' TXT someTextRecordYouNeedToAdd 21 | ``` 22 | 23 | ## Add a CNAME 24 | 25 | ```bash 26 | now dns add yoursitename.com subdomainreference CNAME dnsprovider.org 27 | ``` 28 | 29 | ## Aliases 30 | 31 | Got your own domain name? You can alias your latest `now` deployment 32 | 33 | ```bash 34 | now alias now-generated-url.now.sh your-awesome-domain-name.af 35 | ``` 36 | 37 | ## Scale your deployment 38 | 39 | Want your site to not get frozen? And have visitors have to wait for 40 | the instance to spin up? 41 | 42 | This is straight from the CLI with `now scale -h` 43 | 44 | ```bash 45 | # Create an deployment with 3 instances, never sleeps: 46 | now scale my-deployment-ntahoeato.now.sh 3 47 | # Create an automatically scaling deployment: 48 | now scale my-deployment-ntahoeato.now.sh 1 5 49 | # Create an automatically scaling deployment without specifying max: 50 | now scale my-deployment-ntahoeato.now.sh 1 auto 51 | # Create an automatically scaling deployment without specifying min or max: 52 | now scale my-deployment-ntahoeato.now.sh auto 53 | # Create an deployment that is always active and never "sleeps": 54 | now scale my-deployment-ntahoeato.now.sh 1 55 | ``` 56 | 57 | ## Environment variables 58 | 59 | Config stuff I always forget! 60 | 61 | If it's keys, then use secrets and configure them in the 62 | `package.json`: 63 | 64 | ```json 65 | "now": { 66 | "alias": "cool", 67 | "env": { 68 | "AWS_ACCESS_KEY_ID": "@aws_access_key_id", 69 | "AWS_SECRET_ACCESS_KEY": "@aws_secret_access_key", 70 | "MONGODB_URI": "@mongodb_uri", 71 | "S3_BUCKET_NAME": "@s3_bucket_name", 72 | "SECRET": "@secret" 73 | } 74 | }, 75 | ``` 76 | 77 | If you have a lot of configuration variables and you dont want to make 78 | a mess in the `package.json`: 79 | 80 | ```bash 81 | now -E 82 | ``` 83 | 84 | That will pull your `.env` file and use that in place of adding 85 | individual vars via `now -e var`. I have always used `dotenv` and I 86 | understand that `now` uses `dotenv` for this and using without is 87 | untested by me? 88 | -------------------------------------------------------------------------------- /sheets/npm.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: npm 3 | createdDate: 2017-05-19 4 | updatedDate: 2019-03-01 5 | published: true 6 | slug: npm 7 | description: 8 | npm is a package manager for the JavaScript programming language. 9 | --- 10 | 11 | A list of terminal commands and flags to help me use `npm` 12 | 13 | ## install package.json dependencies 14 | 15 | ```bash 16 | npm install 17 | ``` 18 | 19 | **Shorthand** 20 | 21 | ```bash 22 | # install 23 | npm i 24 | # uninstall 25 | npm un 26 | # update 27 | npm up 28 | ``` 29 | 30 | ## List globally installed packages. 31 | 32 | ```bash 33 | npm list -g --depth=0 34 | ``` 35 | 36 | ## list available scripts to run 37 | 38 | ```bash 39 | npm run 40 | ``` 41 | 42 | ## update npm 43 | 44 | ```bash 45 | npm install -g npm@latest 46 | # using windows? Then use 47 | npm-windows-upgrade 48 | ``` 49 | 50 | ## flags 51 | 52 | `-S` is the same as `--save` not needed in npm 5+ `-D` is the same as 53 | `--save-dev` 54 | 55 | ## installed version 56 | 57 | ```bash 58 | npm list # for local packages 59 | ``` 60 | 61 | ## Uninstall global package 62 | 63 | ```bash 64 | npm -g uninstall --save 65 | ``` 66 | 67 | ## Upgrade NPM on Windows 68 | 69 | After trying several times to upgrade npm on Windows I found this 70 | whilst poking around. 71 | 72 | ```bash 73 | npm-windows-upgrade 74 | ``` 75 | 76 | ## Updating global packages 77 | 78 | To update global packages individually you can use: 79 | 80 | ```bash 81 | npm update -g 82 | ``` 83 | 84 | To see which packages need updating use: 85 | 86 | ```bash 87 | npm outdated -g --depth=0 88 | ``` 89 | 90 | ## dont `rm -rf node_modules; npm install` 91 | 92 | Instead use: 93 | 94 | ```bash 95 | npm ci 96 | ``` 97 | 98 | It will have the same effect but be 2-3x faster 99 | 100 | ## Bump version number 101 | 102 | ```bash 103 | npm version patch 104 | # also | major | minor | patch 105 | ``` 106 | -------------------------------------------------------------------------------- /sheets/npx.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: npx 3 | createdDate: 2019-10-07 4 | updatedDate: 2019-10-07 5 | published: true 6 | slug: npx 7 | description: 8 | npx is a package manager for the JavaScript programming language. 9 | --- 10 | 11 | npx, one off command 12 | 13 | No need to install create react app if you don't want to 14 | 15 | ## create react app 16 | 17 | ```bash 18 | npx create-react-app my-new-app 19 | ``` 20 | 21 | Will use latest create react app to make your new app 22 | 23 | ## update all project dependencies 24 | 25 | Update dependencies with `npm-check` 26 | 27 | ```bash 28 | npx npm-check -u 29 | ``` 30 | 31 | ## browsers list 32 | 33 | ```bash 34 | npx browserslist "last 2 versions, not dead, not < 2%" 35 | ``` 36 | -------------------------------------------------------------------------------- /sheets/nvm.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: NVM (Node Version Manager) 3 | createdDate: 2019-10-26 4 | updatedDate: 2021-03-03 5 | published: true 6 | slug: nvm 7 | description: NVM is a package manager for Node.js. 8 | --- 9 | 10 | ## Set the node version for use in a project 11 | 12 | If a project uses a specific version of node a `.nvmrc` file can be 13 | generated with the following command. 14 | 15 | ```bash 16 | # echo $(node -v) >> .nvmrc 17 | node -v >> .nvmrc 18 | ``` 19 | 20 | When using the project for the first time (in a while maybe) then use 21 | the `nvm use` command to make sure you're using the correct node 22 | version: 23 | 24 | ```bash 25 | nvm use 26 | # Found '/home/project-name/.nvmrc' with version 27 | # Now using node v14.16.0 (npm v6.14.11) 28 | ``` 29 | 30 | ## Install specific node version 31 | 32 | Say you want to install Node v6.9.1 you would write on the terminal: 33 | 34 | ```bash 35 | nvm install 6 36 | ``` 37 | 38 | ## Switch node versions 39 | 40 | If you have multiple versions of Node.js installed on your workspace, 41 | you can switch to a specific version by writing: 42 | 43 | ```bash 44 | nvm use 0.10.40 45 | ``` 46 | 47 | ## Default node version 48 | 49 | Making a node version default 50 | 51 | In order to set a default version of node for your workspace, type: 52 | 53 | ```bash 54 | nvm alias default 6 55 | ``` 56 | 57 | Where 6 was the version you wanted to be used as default. 58 | -------------------------------------------------------------------------------- /sheets/styled-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: styled components 3 | createdDate: 2019-12-11 4 | updatedDate: 2019-12-11 5 | published: true 6 | slug: styled-components 7 | description: 8 | Styled components is a library for React that allows you to write 9 | CSS-in-JS components. 10 | --- 11 | 12 | ## conditionally use a style 13 | 14 | ```jsx 15 | 19 | ``` 20 | 21 | And in your styles something like this: 22 | 23 | ```jsx 24 | const StyledButton = styled.button` 25 | align-items: center; 26 | line-height: 0.2; 27 | 28 | ${({ active }) => 29 | active && 30 | ` 31 | background: blue; 32 | `} 33 | `; 34 | ``` 35 | -------------------------------------------------------------------------------- /sheets/vim.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Vim 3 | createdDate: 2020-08-06 4 | updatedDate: 2020-08-06 5 | published: true 6 | slug: vim 7 | description: Vim is a text editor. 8 | --- 9 | 10 | ## Exit Vim 11 | 12 | Hit the Esc key to enter "Normal mode". Then you can type `:` to enter 13 | "Command-line mode". A colon `:` will appear at the bottom of the 14 | screen. 15 | 16 | To quit: 17 | 18 | ```bash 19 | :q 20 | # enter 21 | ``` 22 | 23 | To quit without saving: 24 | 25 | ```bash 26 | :q! 27 | # enter 28 | ``` 29 | -------------------------------------------------------------------------------- /sheets/vscode.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: VS Code 3 | createdDate: 2019-05-27 4 | updatedDate: 2021-01-21 5 | published: true 6 | slug: vscode 7 | description: 8 | VS Code is a code editor for the Microsoft Windows operating system. 9 | --- 10 | 11 | ## Show Key presses 12 | 13 | If you're screencasting you can display the keys being pressed in 14 | VSCode with the Screencast Mode. 15 | 16 | In the command palette (Ctrl+shift+p) search for "Toggle Screencast 17 | Mode", you can add a keyboard shortcut to it as well in the keyboard 18 | shortcuts, search for "Open Keyboard Shortcuts (JSON)" in the command 19 | pallet. 20 | 21 | ```json 22 | { 23 | "key": "ctrl+alt+s ctrl+alt+c", 24 | "command": "workbench.action.toggleScreencastMode" 25 | } 26 | ``` 27 | 28 | Here's the settings that can be changed in the VSCode settings (open 29 | with Ctrl+,). 30 | 31 | ```json 32 | { 33 | "screencastMode.fontSize": 56, 34 | "screencastMode.keyboardOverlayTimeout": 800, 35 | "screencastMode.mouseIndicatorColor": "#FF0000", 36 | "screencastMode.mouseIndicatorSize": 20, 37 | "screencastMode.onlyKeyboardShortcuts": false, 38 | "screencastMode.verticalOffset": 20 39 | } 40 | ``` 41 | 42 | ## Want to list out what extensions you have installed? 43 | 44 | Say that you are moving from VS Code to VS Code Insiders and you want 45 | to install the same extensions: 46 | 47 | ```bash 48 | code --list-extensions | xargs -L 1 echo code-insiders --install-extension 49 | ``` 50 | 51 | Moving from VS Code Insiders to VS Code? Then swap round the commands: 52 | 53 | ```bash 54 | code-insiders --list-extensions | xargs -L 1 echo code --install-extension 55 | ``` 56 | 57 | ## Want to have your own keyboard shortcut? 58 | 59 | In some cases moving from one platform to another (Windows to Linux 60 | say) they keyboard shortcuts are different or just plain not there. 61 | 62 | You can create your own keyboard shortcuts but it's buried in the GUI 63 | settings for some reason. 64 | 65 | In VSCode goto `File -> Preferences -> Keyboard shortcuts.`, then over 66 | on the top right you can select the icon for Open Keyboard Shortcuts 67 | (JSON). 68 | 69 | Alternatively use the keyboard shortcuts `Crtl+Shift+p` and search for 70 | "Open Keyboard Shortcuts (JSON)" 71 | 72 | Paste in your shortcut, in this case duplicating lines, which is 73 | missing in Ubuntu VS Code: 74 | 75 | ```json 76 | // Place your key bindings in this file to override the defaults 77 | [ 78 | { 79 | "key": "shift+alt+down", 80 | "command": "editor.action.copyLinesDownAction", 81 | "when": "editorTextFocus && !editorReadonly" 82 | }, 83 | { 84 | "key": "shift+alt+up", 85 | "command": "editor.action.copyLinesUpAction", 86 | "when": "editorTextFocus && !editorReadonly" 87 | } 88 | ] 89 | ``` 90 | 91 | Shout out to [Caleb Porzio] for the suggestion of adding in shortcuts 92 | for the sidebar defaults, "explorer", "git" (scm), "debug" and 93 | "extensions". The default shortcuts are a bit inconsistent. 94 | 95 | ```json 96 | [ 97 | { 98 | "key": "ctrl+k ctrl+e", 99 | "command": "workbench.view.explorer" 100 | }, 101 | { 102 | "key": "ctrl+k ctrl+g", 103 | "command": "workbench.view.scm" 104 | }, 105 | { 106 | "key": "ctrl+k ctrl+d", 107 | "command": "workbench.view.debug" 108 | }, 109 | { 110 | "key": "ctrl+k ctrl+x", 111 | "command": "workbench.extensions.action.showInstalledExtensions" 112 | } 113 | ] 114 | ``` 115 | 116 | ## Remove the clutter 117 | 118 | Another tip from [Caleb Porzio] is removing all the clutter in the 119 | editor and moving the sidebar. 120 | 121 | Add these "optional" setting to the `settings.json` file, you can 122 | access it with `Crtl+Shift+p`. 123 | 124 | ```json 125 | { 126 | "workbench.activityBar.visible": false, 127 | "workbench.editor.showTabs": false, 128 | "workbench.sideBar.location": "right", 129 | "workbench.statusBar.visible": false, 130 | "editor.minimap.enabled": false 131 | } 132 | ``` 133 | 134 | 135 | 136 | [caleb porzio]: https://twitter.com/calebporzio 137 | -------------------------------------------------------------------------------- /sheets/windows.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Windows 3 | createdDate: 2020-09-29 4 | updatedDate: 2020-09-29 5 | published: true 6 | slug: windows 7 | description: Windows is a desktop operating system. 8 | --- 9 | 10 | ## Restart the Windows Graphics Driver 11 | 12 | VmmemWSL with high CPU usage? 13 | 14 | Use the following key combination which will restart the Windows 15 | Graphics Driver: 16 | 17 | `Ctrl`+`Shift`+`Win`+`B` 18 | 19 | [GitHub issue with solution] 20 | 21 | [Superuser answer about what is `Ctrl`+`Shift`+`Win`+`B` for] 22 | 23 | 24 | 25 | [github issue with solution]: 26 | https://github.com/microsoft/WSL/issues/6982#issuecomment-874494132 27 | [superuser answer about what is `ctrl`+`shift`+`win`+`b` for]: 28 | https://superuser.com/a/1145620/193757 29 | 30 | ## Remote assistance 31 | 32 | Windows 10 has a built-in tool you can use to remotely control other 33 | computers called 34 | [Quick Assist](https://support.microsoft.com/en-gb/windows/solve-pc-problems-over-a-remote-connection-b077e31a-16f4-2529-1a47-21f6a9040bf3). 35 | 36 | No more need to tell family/friends to install tools like TeamViewer 37 | if you both have Windows installed. The shortcut `ctrl + win + Q` 38 | opens it up. 39 | -------------------------------------------------------------------------------- /sheets/winget.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Winget 3 | createdDate: 2021-10-26 4 | updatedDate: 2021-10-26 5 | published: true 6 | slug: winget 7 | description: Winget is a package manager for Windows. 8 | --- 9 | 10 | ## Upgrade all packages 11 | 12 | The `--all` option allows you to upgrade all packages: 13 | 14 | ```bash 15 | winget upgrade --all 16 | ``` 17 | 18 | ## List installed packages 19 | 20 | Listing installed packages will also detail which ones can be updated. 21 | 22 | ```bash 23 | winget list 24 | ``` 25 | 26 | ## Update specific package 27 | 28 | To update a specific package add the package `--id` 29 | 30 | ```bash 31 | winget upgrade --id VideoLAN.VLC 32 | ``` 33 | -------------------------------------------------------------------------------- /sheets/wsl.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Windows Subsystem Linux (WSL) 3 | createdDate: 2017-10-11 4 | updatedDate: 2020-12-13 5 | published: true 6 | slug: wsl 7 | description: WSL is a Linux-based environment for Windows. 8 | --- 9 | 10 | ## Shutdown one WSL instance 11 | 12 | ```bash 13 | wsl --terminate Ubuntu # or whatever the distro is called 14 | ``` 15 | 16 | ## Shutdown WSL 17 | 18 | Localhost not working? 19 | 20 | ```bash 21 | wsl --shutdown 22 | ``` 23 | 24 | ## Change WSL Version 25 | 26 | Change between WSL versions 27 | 28 | ```bash 29 | # wsl --set-version 2 30 | # example 31 | wsl --set-version Debian 2 32 | ``` 33 | 34 | ## Set the default version of WSL 35 | 36 | When installing new Linux distros you can default them all to be WSL2 37 | or or one: 38 | 39 | ```bash 40 | wsl --set-default-version 2 41 | ``` 42 | 43 | ## List installed WSL Distros 44 | 45 | ```bash 46 | # wsl --list --verbose 47 | wsl -l -v 48 | ``` 49 | -------------------------------------------------------------------------------- /sheets/yarn.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Yarn 3 | createdDate: 2017-05-19 4 | updatedDate: 2021-01-04 5 | published: true 6 | slug: yarn 7 | description: 8 | Yarn is a package manager for the JavaScript programming language. 9 | --- 10 | 11 | ## Yarn global binaries not showing 12 | 13 | When you globally add a package with yarn and it doesn't show in the 14 | terminal. 15 | 16 | Usually adding the path to your `.bashrc` or `.zshrc` works, try 17 | adding this: 18 | 19 | ```bash 20 | # nano ~/.bashrc 21 | # or 22 | # nano ~/.zshrc 23 | export PATH="$PATH:$(yarn global bin)" 24 | ``` 25 | 26 | If that doesn't work you may need to set the yarn prefix. 27 | 28 | **Steps** 29 | 30 | Confirm your global bin path: 31 | 32 | ```bash 33 | yarn global bin 34 | ``` 35 | 36 | I got: `/home/username/.yarn/bin` 37 | 38 | **set yarn prefix:** 39 | 40 | make sure your yarn prefix is the parent directory of your bin 41 | directory. You can confirm by running 42 | 43 | ```bash 44 | yarn config get prefix 45 | ``` 46 | 47 | When I ran this it was undefined, so I set it: 48 | 49 | ```bash 50 | yarn config set prefix ~/.yarn 51 | ``` 52 | 53 | Add the following to `~/.zshrc` or `~/.bashrc` 54 | 55 | ```bash 56 | export PATH="$PATH:`yarn global bin`" 57 | ``` 58 | 59 | [Source](https://stackoverflow.com/a/53879534/1138354) 60 | 61 | ## Update dependencies 62 | 63 | Update all project dependencies to lates versions. 64 | 65 | ```bash 66 | yarn upgrade --latest 67 | ``` 68 | 69 | ## Globally add a package 70 | 71 | ```bash 72 | yarn global add netlify-cli 73 | ``` 74 | 75 | ## Upgrade global packages 76 | 77 | ```bash 78 | yarn global upgrade 79 | ``` 80 | 81 | ## displays the location of the yarn bin folder. 82 | 83 | ```bash 84 | yarn bin 85 | ``` 86 | 87 | ## list installed packages. 88 | 89 | ```bash 90 | yarn ls 91 | ``` 92 | 93 | ## create-react-app 94 | 95 | Couple of good one here from 96 | [@beedesignllc](https://twitter.com/beedesignllc) 97 | 98 | ```bash 99 | yarn create react-app my-app-name 100 | ``` 101 | 102 | ☝️ downloads and runs latest `create-react-app` works for other 103 | similarly named pkgs 104 | 105 | ## flow 106 | 107 | ```bash 108 | yarn flow 109 | ``` 110 | 111 | ☝️ will run `node_modules/.bin/flow` without you having to add it as a 112 | package.json script. 113 | 114 | ## npm ci 115 | 116 | The equivalent to `npm ci` for yarn: 117 | 118 | ```bash 119 | yarn install --frozen-lockfile 120 | ``` 121 | -------------------------------------------------------------------------------- /sheets/zsh.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ZSH 3 | createdDate: 2017-10-11 4 | updatedDate: 2021-01-10 5 | published: true 6 | slug: zsh 7 | description: ZSH is a shell. 8 | --- 9 | 10 | ## Human Readable `$PATH` output 11 | 12 | Use this to nicely format the `$PATH` variable: 13 | 14 | ```bash 15 | echo -e ${PATH//:/\\n} 16 | ``` 17 | 18 | ## Node not working in zsh? 19 | 20 | If you installed nvm on bash then moved over to zsh try adding this 21 | config in your `.zshrc` file: 22 | 23 | ```bash 24 | # npm was not working 25 | export NVM_DIR="$HOME/.nvm" 26 | [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm 27 | [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion 28 | ``` 29 | 30 | ## Clone plugin into correct location 31 | 32 | Some of the ZSH plugins provide this snippet other don't, if you want 33 | to clone a plugin to the preferred location use the following syntax: 34 | 35 | ```bash 36 | git clone https://github.com/zsh-users/zsh-syntax-highlighting ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting 37 | ``` 38 | 39 | This is for `zsh-syntax-highlighting` but it's the same for other 40 | plugins. 41 | 42 | ## Use nvm with zsh 43 | 44 | If you are using Oh My ZSH! then you can install the `zsh-nvm` plugin. 45 | 46 | Clone the plugin into your zsh plugins folder: 47 | 48 | ```bash 49 | git clone https://github.com/lukechilds/zsh-nvm ~/.oh-my-zsh/custom/plugins/zsh-nvm 50 | ``` 51 | 52 | Then load as a plugin in your `.zshrc` 53 | 54 | ```bash 55 | plugins+=(zsh-nvm) 56 | ``` 57 | 58 | Take a look a the [Permission denied when trying to install the 59 | plugin] issue on GitHub for permission errors. 60 | 61 | ## include aliases 62 | 63 | ## oh my zsh 64 | 65 | 66 | 67 | [`zsh-nvm`]: https://github.com/lukechilds/zsh-nvm 68 | [permission denied when trying to install the plugin]: 69 | https://github.com/lukechilds/zsh-nvm/issues/14 70 | -------------------------------------------------------------------------------- /src/app.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss'; 2 | 3 | @layer base { 4 | html { 5 | scroll-behavior: smooth; 6 | word-break: break-word; 7 | } 8 | 9 | ::selection { 10 | color: var(--color-primary-content); 11 | background: var(--color-primary); 12 | } 13 | 14 | /* Scrollbar styles using modern syntax */ 15 | * { 16 | scrollbar-width: thin; 17 | scrollbar-color: var(--color-secondary) var(--color-primary) !important; 18 | } 19 | 20 | ::-webkit-scrollbar-track { 21 | background: var(--color-primary) !important; 22 | } 23 | 24 | ::-webkit-scrollbar-thumb { 25 | background-color: var(--color-secondary) !important; 26 | } 27 | } 28 | 29 | /* Custom components */ 30 | @layer components { 31 | .table-of-contents { 32 | @apply fixed top-72 left-[calc(50%+400px)] z-10 my-3 max-h-[50vh] w-[310px] p-3 text-base leading-7; 33 | } 34 | 35 | .all-prose { 36 | @apply prose prose-lg lg:prose-xl prose-headings:scroll-mt-16 prose-a:text-primary prose-a:transition prose-a:hover:text-accent max-w-none; 37 | 38 | /* remove derp backticks from prose */ 39 | :where(code):not(:where([class~='not-prose'] *, pre *)) { 40 | font-family: 'Victor Mono Variable', monospace; 41 | padding: 1px 8px; 42 | border-radius: var(--radius-selector); 43 | font-weight: initial; 44 | background-color: var( 45 | --fallback-bc, 46 | color-mix( 47 | in oklab, 48 | var(--color-base-content), 49 | transparent 90% 50 | ) 51 | ); 52 | } 53 | 54 | /* Remove code markers */ 55 | :where(code):not(:where([class~='not-prose'] *, pre *))::before, 56 | :where(code):not(:where([class~='not-prose'] *, pre *))::after { 57 | content: '' !important; 58 | display: none !important; 59 | } 60 | } 61 | } 62 | 63 | /* Plugin configurations */ 64 | @plugin "@tailwindcss/typography"; 65 | @plugin "daisyui" { 66 | themes: light --default, dark --prefersdark; 67 | } 68 | -------------------------------------------------------------------------------- /src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://svelte.dev/docs/kit/types#app.d.ts 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface PageState {} 9 | // interface Platform {} 10 | } 11 | } 12 | 13 | export {}; 14 | -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | %sveltekit.head% 11 | 12 | 13 |

%sveltekit.body%
14 | 15 | 16 | -------------------------------------------------------------------------------- /src/demo.spec.ts: -------------------------------------------------------------------------------- 1 | import { describe, it, expect } from 'vitest'; 2 | 3 | describe('sum test', () => { 4 | it('adds 1 + 2 to equal 3', () => { 5 | expect(1 + 2).toBe(3); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /src/lib/components/author.svelte: -------------------------------------------------------------------------------- 1 | 40 | 41 | {#if isLoading} 42 |

Loading...

43 | {:else} 44 |

Contribution by:

45 | 74 | {/if} 75 | -------------------------------------------------------------------------------- /src/lib/components/footer.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 55 | -------------------------------------------------------------------------------- /src/lib/components/header.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |
7 |

10 | Cheat Sheets 11 |

12 | 13 |
14 |
15 | -------------------------------------------------------------------------------- /src/lib/components/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Author } from './author.svelte'; 2 | export { default as Footer } from './footer.svelte'; 3 | export { default as Header } from './header.svelte'; 4 | export { default as TableOfContents } from './table-of-contents.svelte'; 5 | export { default as ThemeSelect } from './theme-select.svelte'; 6 | -------------------------------------------------------------------------------- /src/lib/components/table-of-contents.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | {#if headings.length} 12 | 37 | {/if} 38 | -------------------------------------------------------------------------------- /src/lib/components/theme-select.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | 52 | -------------------------------------------------------------------------------- /src/lib/get-sheets.ts: -------------------------------------------------------------------------------- 1 | export const get_sheets = async () => { 2 | const sheets = await Promise.all( 3 | Object.entries(import.meta.glob('../../sheets/*.md')).map( 4 | async ([path, resolver]) => { 5 | const { metadata }: any = await resolver(); 6 | const slug = path?.split('/').pop()?.slice(0, -3) ?? null; 7 | return { ...metadata, slug }; 8 | }, 9 | ), 10 | ); 11 | 12 | return sheets; 13 | }; 14 | -------------------------------------------------------------------------------- /src/lib/icons/git-hub.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 18 | 21 | 22 | -------------------------------------------------------------------------------- /src/lib/icons/index.ts: -------------------------------------------------------------------------------- 1 | export { default as GitHub } from './git-hub.svelte'; 2 | export { default as Twitter } from './twitter.svelte'; 3 | export { default as YouTube } from './you-tube.svelte'; 4 | -------------------------------------------------------------------------------- /src/lib/icons/twitter.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 18 | 21 | 22 | -------------------------------------------------------------------------------- /src/lib/icons/you-tube.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 18 | 21 | 22 | -------------------------------------------------------------------------------- /src/lib/index.ts: -------------------------------------------------------------------------------- 1 | // place files you want to import through the `$lib` alias in this folder. 2 | -------------------------------------------------------------------------------- /src/lib/info.ts: -------------------------------------------------------------------------------- 1 | export const name = `Cheat Sheets`; 2 | 3 | export const author = `Scott Spence`; 4 | 5 | export const website = `https://cheatsheets.xyz`; 6 | 7 | export const description = `Everyday commands, config, hints and tips used for modern web development.`; 8 | -------------------------------------------------------------------------------- /src/lib/og-image-url-build.ts: -------------------------------------------------------------------------------- 1 | const objectToQueryParams = ( 2 | obj: { [s: string]: unknown } | ArrayLike, 3 | ) => { 4 | const params = Object.entries(obj).map( 5 | ([key, value]) => `${key}=${value}`, 6 | ); 7 | return '?' + params.join('&'); 8 | }; 9 | 10 | export const ogImageUrl = ( 11 | author: string, 12 | website: string, 13 | title: string, 14 | ) => { 15 | const params = { 16 | author, 17 | website: website || `cheatsheets.xyz`, 18 | title, 19 | image: `https://cheatsheets.xyz/favicon.png`, 20 | }; 21 | return `https://image-og.now.sh/og.jpg${objectToQueryParams( 22 | params, 23 | )}`; 24 | }; 25 | -------------------------------------------------------------------------------- /src/lib/utils/get-headings.ts: -------------------------------------------------------------------------------- 1 | import { tick } from 'svelte'; 2 | 3 | export const get_headings = async (headings: string = 'h2') => { 4 | await tick(); 5 | 6 | // Clear previous headings 7 | const previous_headings = document.querySelectorAll('.toc-heading'); 8 | previous_headings.forEach((heading) => heading.remove()); 9 | 10 | const heading_elements = document.querySelectorAll(headings); 11 | return Array.from(heading_elements).map((element, index) => { 12 | const href = element.id || `heading-${index}`; 13 | element.id = href; 14 | element.classList.add('toc-heading'); 15 | return { label: element.textContent || '', href: `#${href}` }; 16 | }); 17 | }; 18 | -------------------------------------------------------------------------------- /src/lib/utils/index.ts: -------------------------------------------------------------------------------- 1 | export { get_headings } from './get-headings'; 2 | export { update_toc_visibility } from './update-toc-visibility'; 3 | -------------------------------------------------------------------------------- /src/lib/utils/update-toc-visibility.ts: -------------------------------------------------------------------------------- 1 | export const update_toc_visibility = ( 2 | end_of_copy: HTMLElement | null, 3 | offset: number = -700, 4 | ): boolean => { 5 | if ( 6 | window.scrollY >= 7 | (end_of_copy?.offsetTop ?? -Infinity) + offset 8 | ) { 9 | return false; 10 | } else { 11 | return true; 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /src/routes/+error.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | Uh oh! {$page.status} 7 | 8 | 9 |
10 |

{$page.status}

11 |

{$page.error?.message}

12 |

It looks like {$page.url} doesn't exist

13 |

14 | Maybe check out the homepage? 15 |

16 |
17 | -------------------------------------------------------------------------------- /src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 46 | 47 |
48 |
49 | 50 |
51 | {@render children?.()} 52 |
53 | 54 |
55 |
56 | -------------------------------------------------------------------------------- /src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 26 | 27 | 33 | 34 |
35 |
36 | 39 | 46 |
47 |
48 | 49 | 62 | -------------------------------------------------------------------------------- /src/routes/+page.ts: -------------------------------------------------------------------------------- 1 | import { get_sheets } from '$lib/get-sheets'; 2 | 3 | export const load = async () => { 4 | const sheets = await get_sheets(); 5 | 6 | return { 7 | sheets, 8 | }; 9 | }; 10 | -------------------------------------------------------------------------------- /src/routes/[author].json/+server.ts: -------------------------------------------------------------------------------- 1 | import { error } from '@sveltejs/kit'; 2 | 3 | export const GET = async ({ params }) => { 4 | const { author } = params; 5 | const res = await fetch(`https://api.github.com/users/${author}`); 6 | 7 | if (res.ok) return new Response(JSON.stringify(await res.json())); 8 | 9 | error(500, 'Something went wrong'); 10 | }; 11 | -------------------------------------------------------------------------------- /src/routes/[slug]/+page.svelte: -------------------------------------------------------------------------------- 1 | 32 | 33 | 34 | 35 | 45 | 46 | {#if headings_promise} 47 | {#await headings_promise} 48 |

Loading table of contents...

49 | {:then headings} 50 | {#if show_table_of_contents && headings.length > 0} 51 | 52 | {/if} 53 | {:catch error} 54 |

Error loading table of contents: {error.message}

55 | {/await} 56 | {/if} 57 | 58 |
59 |

60 | {metadata.title} 61 |

62 |
63 |

Created: {created}

64 |

Updated: {updated}

65 | 69 | Edit this page on GitHub 70 | 71 |
72 |
73 | 74 |
75 | 76 |
77 | 78 |
79 |
80 |
81 | -------------------------------------------------------------------------------- /src/routes/[slug]/+page.ts: -------------------------------------------------------------------------------- 1 | import { error } from '@sveltejs/kit'; 2 | 3 | export const load = async ({ params }) => { 4 | try { 5 | const Sheet = await import(`../../../sheets/${params.slug}.md`); 6 | 7 | return { 8 | Sheet: Sheet.default, 9 | metadata: Sheet.metadata, 10 | }; 11 | } catch (e) { 12 | error(404, 'Sheet not found'); 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /src/routes/page.svelte.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, test, expect } from 'vitest'; 2 | import '@testing-library/jest-dom/vitest'; 3 | import { render, screen } from '@testing-library/svelte'; 4 | import Page from './+page.svelte'; 5 | 6 | describe('/+page.svelte', () => { 7 | test('should render h1', () => { 8 | render(Page); 9 | expect( 10 | screen.getByRole('heading', { level: 1 }), 11 | ).toBeInTheDocument(); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /src/routes/sitemap.xml/+server.ts: -------------------------------------------------------------------------------- 1 | import { get_sheets } from '$lib/get-sheets'; 2 | 3 | interface Sheet { 4 | title: string; 5 | createdDate: string; 6 | updatedDate: string; 7 | published: boolean; 8 | slug: string; 9 | description: string; 10 | } 11 | 12 | export async function GET() { 13 | const sheets = await get_sheets(); 14 | 15 | const sheetsList: Sheet[] = sheets.map((sheet) => ({ 16 | title: sheet.title, 17 | createdDate: sheet.createdDate, 18 | updatedDate: sheet.updatedDate, 19 | published: sheet.published, 20 | slug: sheet.slug, 21 | description: sheet.description, 22 | })); 23 | const body = generateSitemapXml(sheetsList); 24 | 25 | const headers = { 26 | 'Cache-Control': `max-age=0, s-max-age=${600}`, 27 | 'Content-Type': 'application/xml', 28 | }; 29 | 30 | return new Response(body, { headers }); 31 | } 32 | 33 | function generateSitemapXml(sheets: Sheet[]): string { 34 | return ` 35 | 39 | 40 | https://cheatsheets.xyz 41 | daily 42 | 0.7 43 | 44 | ${sheets 45 | .map( 46 | ({ slug }) => ` 47 | 48 | https://cheatsheets.xyz/${slug} 49 | daily 50 | 0.7 51 | 52 | `, 53 | ) 54 | .join('')} 55 | 56 | `; 57 | } 58 | -------------------------------------------------------------------------------- /static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spences10/cheat-sheets/d8ed69874bbceefa21a83e35b973bd99a1425824/static/favicon.png -------------------------------------------------------------------------------- /static/profile-pic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spences10/cheat-sheets/d8ed69874bbceefa21a83e35b973bd99a1425824/static/profile-pic.png -------------------------------------------------------------------------------- /static/robots.txt: -------------------------------------------------------------------------------- 1 | # * 2 | User-agent: * 3 | Allow: / 4 | 5 | # Host 6 | Host: https://cheatsheets.xyz 7 | 8 | # Sitemaps 9 | Sitemap: https://cheatsheets.xyz/sitemap.xml -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-cloudflare'; 2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; 3 | import { mdsvex } from 'mdsvex'; 4 | import autolinkHeadings from 'rehype-autolink-headings'; 5 | import rehypeExternalLinks from 'rehype-external-links'; 6 | import slugPlugin from 'rehype-slug'; 7 | 8 | /** @type {import('@sveltejs/kit').Config} */ 9 | const config = { 10 | // Consult https://svelte.dev/docs/kit/integrations 11 | // for more information about preprocessors 12 | preprocess: [ 13 | vitePreprocess(), 14 | mdsvex({ 15 | extensions: ['.md'], 16 | smartypants: true, 17 | rehypePlugins: [ 18 | slugPlugin, 19 | [ 20 | autolinkHeadings, 21 | { 22 | behavior: 'wrap', 23 | }, 24 | ], 25 | // external links open in a new tab 26 | [ 27 | rehypeExternalLinks, 28 | { target: '_blank', rel: 'noopener noreferrer' }, 29 | ], 30 | ], 31 | }), 32 | ], 33 | 34 | kit: { 35 | adapter: adapter(), 36 | }, 37 | 38 | extensions: ['.svelte', '.md'], 39 | }; 40 | 41 | export default config; 42 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "moduleResolution": "bundler" 13 | } 14 | // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias 15 | // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files 16 | // 17 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 18 | // from the referenced tsconfig.json - TypeScript does not merge them in 19 | } 20 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | import tailwindcss from '@tailwindcss/vite'; 3 | import { svelteTesting } from '@testing-library/svelte/vite'; 4 | import { defineConfig } from 'vite'; 5 | 6 | export default defineConfig({ 7 | plugins: [sveltekit(), tailwindcss()], 8 | server: { 9 | fs: { 10 | // Allow serving files from one level up to the project root 11 | // posts, copy 12 | allow: ['..'], 13 | }, 14 | }, 15 | test: { 16 | workspace: [ 17 | { 18 | extends: './vite.config.ts', 19 | plugins: [svelteTesting()], 20 | 21 | test: { 22 | name: 'client', 23 | environment: 'jsdom', 24 | clearMocks: true, 25 | include: ['src/**/*.svelte.{test,spec}.{js,ts}'], 26 | exclude: ['src/lib/server/**'], 27 | setupFiles: ['./vitest-setup-client.ts'], 28 | }, 29 | }, 30 | { 31 | extends: './vite.config.ts', 32 | 33 | test: { 34 | name: 'server', 35 | environment: 'node', 36 | include: ['src/**/*.{test,spec}.{js,ts}'], 37 | exclude: ['src/**/*.svelte.{test,spec}.{js,ts}'], 38 | }, 39 | }, 40 | ], 41 | }, 42 | }); 43 | -------------------------------------------------------------------------------- /vitest-setup-client.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | import { vi } from 'vitest'; 3 | 4 | // required for svelte5 + jsdom as jsdom does not support matchMedia 5 | Object.defineProperty(window, 'matchMedia', { 6 | writable: true, 7 | enumerable: true, 8 | value: vi.fn().mockImplementation((query) => ({ 9 | matches: false, 10 | media: query, 11 | onchange: null, 12 | addEventListener: vi.fn(), 13 | removeEventListener: vi.fn(), 14 | dispatchEvent: vi.fn(), 15 | })), 16 | }); 17 | 18 | // add more mocks here if you need them 19 | --------------------------------------------------------------------------------