- My Web Development VS Code Extensions ♥️
1- JavaScript (ES6) Code Snippets
2- Live Server
3- Prettier
4- Better Comments
5- Path Intellisense
6- GitLens
7- Code Time
8- ESLint
9- Polacode
10- CSS Peek
11- Project Manager
12- Rest Client
13- Auto Close Tag
14- Bracket Pair Colorizer 2
15- Paste JSON as Code
16- Quokka.js
17- HTML CSS Support
18- Auto Rename Tag
19- Code Spell Checker
20- Image preview
21- IntelliSense for CSS class names in HTML
22- Material Icon Theme
23- Live Saas Compiler
24- Bookmarks
25- Import Cost
26- Ayu
27- ES7 React/Redux/GraphQL/React-Native snippets
28- Simple React Snippets
1- JavaScript (ES6) Code Snippets
2- Live Server
3- Prettier
4- Better Comments
5- Path Intellisense
6- GitLens
7- Code Time
8- ESLint
9- Polacode
10- CSS Peek
11- Project Manager
12- Rest Client
13- Auto Close Tag
14- Bracket Pair Colorizer 2
15- Paste JSON as Code
16- Quokka.js
17- HTML CSS Support
18- Auto Rename Tag
19- Code Spell Checker
20- Image preview
21- IntelliSense for CSS class names in HTML
22- Material Icon Theme
23- Live Saas Compiler
24- Bookmarks
25- Import Cost
26- Ayu
27- ES7 React/Redux/GraphQL/React-Native snippets
28- Simple React Snippets
❤1👍1
- CheatSheets for Web Developers ♥️
1- HTML CheatSheet
2- CSS Reference
3- GitSheet
4- OverAPI
5- Dev Hints
6- Cheatography
7- Awesome-Cheatsheets
8- Bootstrap 4 Cheat Sheet
9- HTML5 Element Index
10- Can I Use
11- Rico's cheatsheets
12- CSS3 Animation Cheat Sheet
13- CSS Grid Cheat Sheet
14- Grid
15- Media Queries Cheat Sheet
16- HTML5 Canvas Cheat Sheet
17- Web Developer's SEO Cheat Sheet
18- Modern JavaScript Cheatsheet
19- Developer cheatsheets
20- Vue Cheatsheet
21- 30secondsofcode
22- Bootstrap 5 CheatSheet
23- CSS Grid Cheat Sheet Illustrated
24- Flexbox Cheat Sheet
1- HTML CheatSheet
2- CSS Reference
3- GitSheet
4- OverAPI
5- Dev Hints
6- Cheatography
7- Awesome-Cheatsheets
8- Bootstrap 4 Cheat Sheet
9- HTML5 Element Index
10- Can I Use
11- Rico's cheatsheets
12- CSS3 Animation Cheat Sheet
13- CSS Grid Cheat Sheet
14- Grid
15- Media Queries Cheat Sheet
16- HTML5 Canvas Cheat Sheet
17- Web Developer's SEO Cheat Sheet
18- Modern JavaScript Cheatsheet
19- Developer cheatsheets
20- Vue Cheatsheet
21- 30secondsofcode
22- Bootstrap 5 CheatSheet
23- CSS Grid Cheat Sheet Illustrated
24- Flexbox Cheat Sheet
- Beautify Your GitHub Profile ♥️
> GitHub Profile Readme Generator Tool
> Readme Typing SVG
> GitHub Profile Summary Cards
> GitHub Readme Stats
> GitHub Readme Streak Stats
> Emoji Unicode Tables
> Best Readme Files
> GitHub Profile Readme Generator Tool
> Readme Typing SVG
> GitHub Profile Summary Cards
> GitHub Readme Stats
> GitHub Readme Streak Stats
> Emoji Unicode Tables
> Best Readme Files
- The Best CSS Button Hover Effects
> If you want to give your page a little twist, putting CSS button hover effects is ideal. It will help improve your visitors’ dwell time. The animated buttons will encourage visitors to see what your site has to offer and makes your page more dynamic. It also boosts your brand reputation.
Link To Examples
> If you want to give your page a little twist, putting CSS button hover effects is ideal. It will help improve your visitors’ dwell time. The animated buttons will encourage visitors to see what your site has to offer and makes your page more dynamic. It also boosts your brand reputation.
Link To Examples
<React JS Project Structure />
—————————————————
1- README (.md)
- This file used for writing the documentation of our app like how your app works or other important things you want to write about your app.
2- .gitignore
- This file tells Git which files to ignore when committing your project the GitHub Repo.
3- node_modules
- This folder contains all the packages and dependencies that are installed in your react app.
4- package.json
- This file contains a list of all dependencies that have been installed in your app.
(metadata associated with the app + dependencies info + scripts)
5- package-lock.json
- The goal of this file is to keep track of the exact version of every package that installed in your app.
(contains the history of every package installed in your app)
—————————————————
1- README (.md)
- This file used for writing the documentation of our app like how your app works or other important things you want to write about your app.
2- .gitignore
- This file tells Git which files to ignore when committing your project the GitHub Repo.
3- node_modules
- This folder contains all the packages and dependencies that are installed in your react app.
4- package.json
- This file contains a list of all dependencies that have been installed in your app.
(metadata associated with the app + dependencies info + scripts)
5- package-lock.json
- The goal of this file is to keep track of the exact version of every package that installed in your app.
(contains the history of every package installed in your app)
6- public
- The public folder contains static files such as index.html, the icon of the app, images, etc.
—————————————————————
——— Files inside public folder ———
—————————————————————
- index.html
(This is the main file that opens in your browser and holds the HTML template of your app)
- favicon.ico
(It’s the Favicon of the app)
- manifest.json
(It provides the information about the app such as name, author, icon, and description in a JSON text file. The purpose from the file is to install web applications to the home screen of the user’s device)
7- src
- This is the most important part of the app. This is where you do coding of your app.
- In this folder, you place all your files related to development like pages, components, CSS files, images, etc.
—————————————————————
——— Files inside src folder ———
—————————————————————
- App.js
(It’s the parent component of a react app and by default, it contains a basic component code and we can erase it and write our own)
- App.css
(It’s a CSS file that contains CSS related to App.js but you can use it globally as well)
- index.js
(It’s actually an entry point of our react app. It is where you render the main react component onto the root element)
- index.css
(A CSS file contains CSS related to index.js but can be used globally)
- App.test.js
(It’s a test file contains a basic test for App.js Component)
- logo.svg
(Logo of react rotating on the screen when you first runs the app)
- reportWebVitals.js
(create-react-app includes a built-in tool for measuring the real-life performance of your app. It is called reportWebVitals.js)
- The public folder contains static files such as index.html, the icon of the app, images, etc.
—————————————————————
——— Files inside public folder ———
—————————————————————
- index.html
(This is the main file that opens in your browser and holds the HTML template of your app)
- favicon.ico
(It’s the Favicon of the app)
- manifest.json
(It provides the information about the app such as name, author, icon, and description in a JSON text file. The purpose from the file is to install web applications to the home screen of the user’s device)
7- src
- This is the most important part of the app. This is where you do coding of your app.
- In this folder, you place all your files related to development like pages, components, CSS files, images, etc.
—————————————————————
——— Files inside src folder ———
—————————————————————
- App.js
(It’s the parent component of a react app and by default, it contains a basic component code and we can erase it and write our own)
- App.css
(It’s a CSS file that contains CSS related to App.js but you can use it globally as well)
- index.js
(It’s actually an entry point of our react app. It is where you render the main react component onto the root element)
- index.css
(A CSS file contains CSS related to index.js but can be used globally)
- App.test.js
(It’s a test file contains a basic test for App.js Component)
- logo.svg
(Logo of react rotating on the screen when you first runs the app)
- reportWebVitals.js
(create-react-app includes a built-in tool for measuring the real-life performance of your app. It is called reportWebVitals.js)
Best JavaScript Animation Libraries
- Three.js
Three.js is a WebGL-based 3D animation library. It allows you to create a scene with a camera and animate objects within it.
- GSAP
Professional-grade JavaScript animation for the modern web.
- Anime.js
Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API.
- Mo.js
Mo.js is a JavaScript library devoted to motion for the web. It offers a declarative syntax motion and the creation of elements for animation.
- Typed.js
Typed.js is a JavaScript library which is used to type a set of strings at the speed that you set, backspace what it's typed and begin the typing with another string you have set.
- Vivus
Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn.
- Proton
Proton is a lightweight and powerful JavaScript particle animation library.
- ScrollReveal
ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport. It was designed to be robust and flexible, but hopefully you’ll be surprised below at how easy it is to pick up.
———
@phoenixcoding
- Three.js
Three.js is a WebGL-based 3D animation library. It allows you to create a scene with a camera and animate objects within it.
- GSAP
Professional-grade JavaScript animation for the modern web.
- Anime.js
Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API.
- Mo.js
Mo.js is a JavaScript library devoted to motion for the web. It offers a declarative syntax motion and the creation of elements for animation.
- Typed.js
Typed.js is a JavaScript library which is used to type a set of strings at the speed that you set, backspace what it's typed and begin the typing with another string you have set.
- Vivus
Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn.
- Proton
Proton is a lightweight and powerful JavaScript particle animation library.
- ScrollReveal
ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport. It was designed to be robust and flexible, but hopefully you’ll be surprised below at how easy it is to pick up.
———
@phoenixcoding
👍1