This repository presents a collection of helpful resources. More resources will be added as time goes on. Feel free to submit your own suggestions!
Filter Objects
https://codepen.io/RiseOverLimits/pen/WNjMyQZ?editors=1010
https://codepen.io/RiseOverLimits/pen/RwVJZjJ
https://github.com/zm00622/toolbox/blob/main/how%20to%20filter%20arrays%20and%20objects.md
https://medium.com/poka-techblog/simplify-your-javascript-use-map-reduce-and-filter-bd02c593cc2d
UI / UX Toolbox
Simplifying Your CSS
https://paulcpederson.com/articles/css-for-people-who-hate-css/
Responsive CSS Conventions
https://polypane.app/blog/responsive-design-ground-rules/
Tools for Modern CSS
** CSS Box shadow Generator - https://cutt.ly/4QY436A
** Neumorphism.io - https://cutt.ly/fQY7ew8
** Neumorphism - https://neumorphic.design/
** Glassmorphism CSS Generator - https://cutt.ly/dQY7yQ9
** CSS Underline Generator - https://cutt.ly/UQY7aW8
** CSS Blobmaker - https://cutt.ly/eQY7g48
** CSS Waves Generator - https://cutt.ly/FQY7l4L
** Animated CSS Background Generator - https://cutt.ly/YQY7mab
** Color Palettes Generator - https://cutt.ly/QQY7TKF
** CSS Animation Generator - https://cutt.ly/WQY7Arf
** CSS Gradient Buttons - https://cutt.ly/eQY7GNH
** CSS How a dropdown works https://cssarrowplease.com/
** Get a websites color pallete https://chrome.google.com/webstore/detail/site-palette/pekhihjiehdafocefoimckjpbkegknoh
** Download a page and all its assets https://chrome.google.com/webstore/detail/save-all-resources/abpdnfjocnmdomablahdcfnoggeeiedb
** PX to VW Converter https://khaledkzy.github.io/pixel-vh-vw-converter/
** Box shadow cards and neomorphism https://getcssscan.com/css-box-shadow-examples
CSS Grid Explained
https://webkit.org/blog/7434/css-grid-layout-a-new-layout-module-for-the-web/
BEM CSS Naming Convention
https://scalablecss.com/bem-nesting-grandchild-elements/
Fluid Typography
"Viewport units are what make fluid typography on the web possible.
Viewport units refer to a percentage of the browser’s viewport dimensions.
For example, 1 viewport width (vw) is equal to 1% of the viewport’s width.
The units differ from percentages because they are always relative to the viewport, whereas a percentage is relative to the element’s parent container."
~ Michael Riethmuller
Unminify JavaScript, CSS, HTML, XML and JSON code
Free HTML Templates
https://nicepage.com/html-templates
AI Generated Web Page Designs:
Device Mockups:
Want to place your website on a laptop or mobile device for a mockup?
https://smartmockups.com/create/website-mockups
Documentation:
Mozilla Development Network https://developer.mozilla.org/en-US/docs/Web/JavaScript
W3Schools https://www.w3schools.com/
JavaScript Garden http://bonsaiden.github.io/JavaScript-Garden/
DevDocs http://devdocs.io/
JavaScript.info https://javascript.info
Other Code Sandboxes to Practice Code / See Examples:
JSFiddle (for vanilla js) http://jsfiddle.net/
JSLint (for vanilla js) http://jslint.com/
Sandbox for Angular, React, Node and all the rest https://stackblitz.com/
Sandbox for Backend Development http://phpfiddle.org/
Sandbox for Vue, React, Flutter, html-css-js (social see pens by others)
https://codepen.io/
20 Useful JavaScript Cheat Sheets:
https://www.rankred.com/javascript-cheat-sheets/
& one more Cheat Sheet:
Graphic Design:
Free Stock Photo Resources
Pixabay
Pexel
Free Editing Software
Photopea
Color Picker https://paletton.com/#uid=10Z0u0kr5s4IobBuwksjOvmbgKK
Other Repos Like This One (More Resources!)
Zero to Mastery (the page) https://zero-to-mastery.github.io/resources/
Zero to Mastery (the repo) https://github.com/zero-to-mastery/resources
Awesome JavaScript https://github.com/sorrycc/awesome-javascript
Deploy Angular App to gh-pages (GitHub Pages)
https://medium.com/tech-insights/how-to-deploy-angular-apps-to-github-pages-gh-pages-896c4e10f9b4
Deploy React App to gh-pages (Github Pages)
https://github.com/gitname/react-gh-pages
Keyboard Shortcuts to Speed up Workflow
Keyboard Shortcut Game
https://mattshaw.org/projects/shortcutgame/
Visual Studio Code Keyboard Shortcuts
https://hackernoon.com/12-visual-studio-code-shortcuts-for-faster-coding-ts3a3yvg
VS Code Tricks
Zary's Favorite VS Code Shortcuts
Delete Line: Shift - Command - K
Add Line Comment: Command - K Command - C
Remove Line Comment: Command - K Command - U
Find and Replace: Option - Command - F
Zen Mode: Command - K - Z (exit by hitting esc esc)
Open Terminal: Control ^ - Backtick
Insert Line Above: Shift - Command - Enter
Insert Line Below: Shift - Command
Indent Line: Command - ]
Outdent Line: Command - [
Beginning of Line: fn + left arrow
End of Line: fn + right arrow
Beginning / End of File: Command + Up / Down Arrow
To Rename All Instances of a Variable: Click on Variable and Press F2
To Rename All Instances of text: Highlight, then Command - F2
Format SCSS (VS Code Extension): Shift - Option - F
Find in File: Click on the Folder, then Command - P
The problem is that when you have an directory open in Visual Studio Code, with dozens of subdirectories, you often want to search in a single directory. Find in files isn't at all about doing that. (This is a useful answer to a completely different question, of course.) . @JesperWilfing 's answer (right click on folder, find in folder) is better.
Preview Markdown File in VS Code - Shift - Command - V
Delete Line in Terminal: Ctrl + u
Copy File Path in Finder: Cmd + Option + C
Find Folder in Mac Finder: Cmd + Shift + G
Improving Productivity in Terminals with Aliases
https://jorenjoestar.github.io/post/productivity_terminal/productivity_terminal/
Common Git Commands
**Push React App to Master (in Angular you do not have to initialize with git init) **
git init
git add .
git commit -m"Place your commit message here"
git remote add origin "https://. "
git push -u origin master
If having problems with the above commands
git add .
git commit
git push
Create a New Branch
git checkout -b branch_name
Switch to a new branch
git checkout branch_name
Push your branch to the remote repository
git push -u origin branch_name
Cloning a Repo
https://blogs.sap.com/2019/07/12/how-to-clone-a-github-repository-to-local-mac-computer/
After cloning a repo, you may have to rename the remote origin stored in git:
git remote set-url origin "https://etc. etc."
Git Remote Name
git remote -v
Git Remove Remote
git remote rm origin
Search All Files for Text String
grep -r switchdesk.png *
How to setup SASS (i.e., SCSS) preprocessor in VS Code
1.) Create styles.scss file
2.) Create index.html file
3.) Ensure you have Live Server and Live SASS Compiler extensions installed. These extensions are provided by Ritwick Dey
4.) In the blue footer at the bottom of your code editor, click Watch SASS.
Stacks Explained
What do MAMP, LAMP, MEAN and all of those other acronyms mean?
https://en.wikipedia.org/wiki/Solution_stack
CRM, Email Management, Marketing Management etc.
ClickUp (A San Diego Based Company)
UI / UX Testing
Jira Software & Markup Pro for Screen Captures
JS Snippets
Command Line Game
https://web.mit.edu/mprat/Public/web/Terminus/Web/main.html
ICONS
COLOR SCHEME GENERATOR
Regular Expressions (Learn in a playground / code sandbox!)
How to setup a remote Mac Instance
https://medium.com/macoclock/mac-experience-on-cloud-2021-68ef20c5ab7f