Webdev-useful-resources

My custom list of useful web development resources

.md (mark down) guide

• markdown-cheat-sheet

VS Code guide

• Set up Prettier and VS Code to Format Your Code

JS resources

• Custom video player

React resources

• Upmostly

• Deploy Vite React App on Both GitHub Pages and Vercel

• When should I use curly braces { } and parenthesis ( ) in React?

The way to disable ”react/prop-types rule”

If you have only one file you want to disable prop-type validation you can use:

/* eslint react/prop-types: 0 */

in cases where you have multiple files you can add to your .eslintrc file in your root directory a rule to disable prop-type validation:

{
 "plugins": [
     "react"
  ],
  "rules": {
    "react/prop-types": 0
  }
}

R3F resources

• Maxime Heckel Blog- R3F

• Weal Yasmina Blog- R3F/ Three.js

• GLSL and Shaders Tutorial for Beginners (WebGL / Threejs)

• 9 hands on GLSL examples or shader newbies

• The study of shaders with React Three Fiber

DREI resources

• Accumulative shadows

Next.js resources

• Deploying your Next.js app using Github and Vercel
• How to Deploy Next.js Apps to Github Pages
• Olivier Larose blog

CSS resources

• Using CSS variables like a pro
• animation-timeline
• animation-range
• object-fit
• object-position
• scroll-behavior
• scroll-snap-type
• scroll-timeline
• touch-action

Node/ NPM/ NVM

• Before installing node version manager(nvm) in Windows 11, run this command in the powershell(run as administrator) - Set-ExecutionPolicy -ExecutionPolicy Unrestricted -Scope CurrentUser