daveholst / resources

A collection of WebDev Resources

Web Dev Resources

A collection of WebDev Resources

Design

Fonts

• Google Fonts - https://fonts.google.com/
• fontpair - https://www.fontpair.co/
• fontjoy - https://fontjoy.com/

Color Schemes

• coolors - https://coolors.co/
• adobe color - https://color.adobe.com/create/color-wheel

Icons

• system uicons - https://systemuicons.com/
• Tabler Icons - https://tablericons.com/
• Font Awesome - https://fontawesome.com/icons?d=gallery&p=2

JavaScript

Tools

• Keyboard Events - http://keycode.info/

node

• auto refresh server monitoring - https://www.npmjs.com/package/nodemon
• environment variables from file - https://www.npmjs.com/package/dotenv

git / GitHub

Markdown

• cheatsheet - https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
• emoji - unofficial guide to emoji based commit messages - https://gist.github.com/parmentf/035de27d6ed1dce0b36a
• emoji list - https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md
• emoji++ - https://emojipedia.org/github/

Tutorials

• coding train - https://www.youtube.com/watch?v=BCQHnlnPusY&list=PLozRqGzj97d02YjR5JVqDwN2K0cAiT7VK

• colt steele - https://www.youtube.com/watch?v=USjZcfj8yxE&t=333s

Databases

Design Tools

• dbdiamgram.io https://dbdiagram.io/home

Chrome

Extensions

• bitWarden - https://chrome.google.com/webstore/detail/bitwarden-free-password-m/nngceckbapebfimnlniiiahkandclblb?hl=en
• Dark Reader - https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh?hl=en
• floccus bookmark sync - https://chrome.google.com/webstore/detail/floccus-bookmarks-sync/fnaicdffflnofjppbagibeoednhnbjhg
• JSON Viewer - https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh
• newTab Redirect - https://chrome.google.com/webstore/detail/new-tab-redirect/icpgjfneehieebagbmdbhnlpiopdcmna
• Reddit ES - https://chrome.google.com/webstore/detail/reddit-enhancement-suite/kbmfpngjjgdllneeigpgjifpgocmfgmb
• uBlock Origin - https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm?hl=en
• WebPage Screenshot - https://chrome.google.com/webstore/detail/webpage-screenshot-entire/akgpcdalpfphjmfifkmfbpdmgdmeeaeo?hl=en

VS Code

Icons

• Material Icons (More, better icons) = https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

Themes

• theme browsing [why code when can theme?] - https://vscodethemes.com/
• cobalt 2 - https://vscodethemes.com/e/wesbos.theme-cobalt2
• one Dark Pro - https://vscodethemes.com/e/zhuangtongfa.Material-theme

Fonts

• Dank Mono ($) - https://gumroad.com/l/dank-mono
• Fira Code (Free) - https://github.com/tonsky/FiraCode

Extensions

• Auto Rename Tag - https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
• Bracket Pair Colorizer - https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
• DotENV - https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv
• es6-string-html - https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html
• ESLint - https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• Highlight Matching Tag - https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag
• HTML Tag Wrap - https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap
• live server - https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
• Peacock - https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock
• Prettier - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• Quokka.js - https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
• Spell Right - https://marketplace.visualstudio.com/items?itemName=ban.spellright
• Tab Out - https://marketplace.visualstudio.com/items?itemName=albert.TabOut
• TODO Highlighter - https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
• Discord Presence - https://marketplace.visualstudio.com/items?itemName=icrawl.discord-vscode

Courses / Study

• Modern JS (Paid) (Colt Steele) - https://www.udemy.com/course/javascript-beginners-complete-tutorial/
• Wes Bos (Free & Paid) - https://wesbos.com/courses

YouTube (WebDev)

• Coding Garden - https://www.youtube.com/channel/UCLNgu_OupwoeESgtab33CCw
• Coding Train - https://www.youtube.com/user/shiffman
• fireship - https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA
• Colt Steele - https://www.youtube.com/channel/UCrqAGUPPMOdo0jfQ6grikZw
• Traversy Media - https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA
• Web Dev Simp[lified] - https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw
• Wes Bos - https://www.youtube.com/channel/UCoebwHSTvwalADTJhps0emA
• Program with Mosh - https://www.youtube.com/user/programmingwithmosh

Podcasts

• syntax.fm (Wes Bos & Scott Tollinski) - https://syntax.fm/

DevOps / Hosting

Domains

• Namecheap - https://www.namecheap.com/
• GoDaddy - https://au.godaddy.com/
• Hover - https://www.hover.com/

Hosting

• Netlify (Static) - https://www.netlify.com/
• Heroku (node) - https://dashboard.heroku.com/login

VPS

• DigitalOcean - https://www.digitalocean.com/
• Linode - https://www.linode.com/

Software

Mac

• Alfred (better spotlight) - https://www.alfredapp.com/
  • bear - https://github.com/drgrib/alfred-bear
  • convert - https://github.com/deanishe/alfred-convert
  • copySSH - https://github.com/nickytonline/alfred-workflows
  • GitHub - https://github.com/gharlan/alfred-github-workflow
  • kill proc - https://github.com/nathangreenstein/alfred-process-killer
• iTerm2 (better terminal) - https://iterm2.com/
  • oh my zsh (zsh++) - https://github.com/ohmyzsh/ohmyzsh
  • cobalt2 theme - https://github.com/wesbos/Cobalt2-iterm
• iStat (top bar stats) - https://bjango.com/mac/istatmenus/
• timeMachineEditor - https://tclementdev.com/timemachineeditor/
• BTT (touchBar, mappings, gestures)https://folivora.ai/
• Rectangle (window snaps) - https://rectangleapp.com/
• AltTab - https://alt-tab-macos.netlify.app/
• Break Timer - https://breaktimer.app/
• Tunnelblick (vpn client) - https://tunnelblick.net/
• BEAR (notes in MD) - https://bear.app/
• Fantastical (calendar) - https://flexibits.com/fantastical
• Spark (email client) - https://sparkmailapp.com/
• Insomnia API Designer/Client - https://insomnia.rest/
• Sequel Ace (mySQL Client) - https://github.com/Sequel-Ace/Sequel-Ace
• Robo3T (mongo Client) - https://robomongo.org/
• boop (code snippets / converter) - https://boop.okat.best/

Windows

• WSL 2 (Linux CLI / VM) - https://docs.microsoft.com/en-us/windows/wsl/install-win10
• Notepad++ - https://notepad-plus-plus.org/downloads/
• Putty (SSH client) - https://www.putty.org/
• gitBASH - https://gitforwindows.org/
• Insomnia API Designer/Client - https://insomnia.rest/