Web Dev Simplified

Highlight: https://app.highlight.run/?promo=WEBDEVSIMPLIFIED
Coupon Code: WEBDEVSIMPLIFIED (This should be automatically filled in as you go through the signup process)

Todo lists are boring and pretty limited so in this video I am going to show you how to build a more advanced project that covers all the features of a todo list while also adding tons of additional features like categories, markdown support, filter, etc. This is a great intermediate to advanced project.


📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/react-note-taking-app
React Router Video: https://youtu.be/Ul3y1LXxzdU
React Router Article: https://blog.webdevsimplified.com/2022-07/react-router
React Multiselect Video: https://youtu.be/bAJlYgeovlg


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00:00 - Introduction
00:00:30 - Demo
00:01:10 - Setup
00:02:20 - Routing
00:05:38 - New Note Form JSX
00:13:18 - New Note Form Functionality
00:19:19 - useLocalStorageHook
00:24:40 - Note Creation Logic
00:28:53 - Tag Creation Logic
00:33:37 - Note List Page
00:50:20 - Note Layout Wrapper
00:53:45 - Note Show Page
00:58:10 - Note Edit Page
01:02:42 - Delete Note Logic
01:04:35 - Edit/Delete Tags Modal


#React #WDS #TypeScript

The Perfect Advanced React/TypeScript Project - Markdown Supported Note Taking With Categories

Doing vertical text overflow in CSS is incredibly difficult and many people think it is impossible, but that is not true. In this video I will show you 2 different ways to limit the number of lines of text in a box. I will also show you how to expand/collapse those lines of text using only CSS with no JavaScript.


📚 Materials/References:

Kevin’s Video: https://youtu.be/b6iVByCOx8A
:has Selector Video: https://youtu.be/K6CWjkDgQnE
:has Selector Article: https://blog.webdevsimplified.com/2022-09/css-has-selector
CSS Max Lines Article: https://blog.webdevsimplified.com/2020-01/dynamic-expandable-content


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:48 - Webkit Technique
03:35 - My Technique
07:44 - Expand/Collapse Buttons


#CSSExpandCollapse #WDS #CSS

How To Limit Lines Of Text With CSS Only

Create React App is an incredible tool that made it easy to setup and work with React, but as the years have gone by CRA has become less and less useful to the point that you should pretty much never use it. In this video I talk about all the alternatives to CRA that you should consider using instead.


📚 Materials/References:

Astro vs Gatsby Video: https://youtu.be/YtaR_I65wmI
My Blog: https://blog.webdevsimplified.com


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:27 - CRA Cons
01:14 - Vite
02:27 - Astro/Gatsby
04:43 - Next.js
06:54 - Full Stack Frameworks


#CRA #WDS #React

Stop Using Create React App

FREE React Hooks Simplified Course: https://courses.webdevsimplified.com/react-hooks-simplified

Performance is something people always worry about, especially in React, but oftentimes the bundle size of an application is ignored when doing performance optimization. In this video I want to talk about how you can minimize the bundle size of your application by using code splitting to only download the code you need when you need it.


📚 Materials/References:

FREE React Hooks Simplified Course: https://courses.webdevsimplified.com/react-hooks-simplified


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:25 - Setup
01:11 - What Is Code Splitting
02:39 - Code Splitting A Function
04:30 - Code Splitting Components
10:40 - Conditional Code Splitting
12:52 - Advanced Code Splitting Concepts


#React #WDS #CodeSplitting

Speed Up Your React Apps With Code Splitting

ChatGPT is the newest AI and it is incredible what it can do. It is so amazing that many people are wondering if ChatGPT will replace developer jobs. In my opinion that is never going to happen with ChatGPT, but there is so much you can do with ChatGPT that make your life as a developer so much better. In this video I explore the potential of ChatGPT and show you what it can and cannot do.


📚 Materials/References:

ChatGPT Website: https://chat.openai.com/chat
HTTP Status Codes Explained Article: https://blog.webdevsimplified.com/2022-12/http-status-codes


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:37 - ChatGPT In Use
08:41 - How ChatGPT Works
09:27 - Why ChatGPT Will Not Replace Your Job


#ChatGPT #WDS #AI

What Is ChatGPT And How Can It Make You A Better Developer

I love type safety, but have always been disappointed in the type safety of modern routers. That is until now. Tanstack Router is incredible at giving you a fully type safe router which makes coding so much nicer and easier. In this video I talk about what Tanstack Router is and how you can get started with it.


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
01:30 - Overview
03:00 - Simple Example
05:39 - More Complex Example


#TanstackRouter #WDS #ReactJS

What Is TanStack Router And Why I Love It

Prettier is one of my favorites tools for writing clean and easy to read code since it does all the formatting for you. In this video I will show you how to setup Prettier, how to use it in your IDE, how to configure it with ESLint, and a few other small Prettier tips.


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:38 - Installation
01:35 - Command Line Usage
02:51 - Integrating Into VSCode
06:18 - Ignoring Files
08:00 - Configuration Options
09:55 - Using With Eslint


#Prettier #WDS #JavaScript

How To Setup Prettier

One of the scariest things to work on is auth and permissions. If you mess one thing up you code destroy your entire company, leak user data, or cost your company millions of dollars, but auth doesn’t have to be scary. In this video I talk about how auth works at a high level, go over examples of working auth, and finally show you how to implement the features talked about in this video in a real server.


📚 Materials/References:

Password Authentication Video: https://youtu.be/Ud5xKCYQTjM
PassportJS Authentication Video: https://youtu.be/-RCnNyD0L-s
HTTP Status Codes Video: https://youtu.be/wJa5CTIFj7U
JWT Explanation Video: https://youtu.be/7Q17ubqLfaM
JWT Implementation Video: https://youtu.be/mbsmsi7l3r4


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:38 - Authentication vs Authorization
01:59 - How Authentication Works
03:57 - How Authorization Works
04:52 - Server vs Client Validation
06:45 - Live Example
09:13 - Code Example

#Auth #WDS #Authentication