Hooks in React are tricky to use correctly and even harder to use in a performant way. This has left many applications with poor code quality and bad performance, but that doesn’t have to be the case anymore. Signals is a technique that has been around for decades, but only recently has made its way to React and it makes creating performant clean code in React much easier. In this video I explain exactly how signals work and why they are so great.
Audio books are way more expensive than paperback books, but sometimes it is nice to have the convenience of an audio book. In this video I will be showing you how to create your own audio book reader with JavaScript and it is surprisingly easy.
? Materials/References:
GitHub Code: https://github.com/WebDevSimplified/audio-book-reader
Tesseractjs: https://github.com/naptha/tesseract.js#tesseractjs
? 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:15 - Setup
01:10 - HTML
02:23 - Access webcam
03:50 - OCR integration
09:03 - Text to speech integration
#AudioBook #WDS #JavaScript
...
https://www.youtube.com/watch?v=IE4lnxXoupg
FREE React Hooks Simplified Course: https://courses.webdevsimplified.com/react-hooks-simplified
Full React Simplified Course: https://reactsimplified.com
I have been teaching React for years and have seen countless beginner React mistakes, but there are 3 mistakes that stand far above the rest that I see nearly every developer make (even more experienced developers). In this video I go over what those 3 mistakes are as well as how to avoid them so you can become a master of React.
? Materials/References:
FREE React Hooks Simplified Course: https://courses.webdevsimplified.com/react-hooks-simplified
Full React Simplified Course: https://reactsimplified.com
Passing Functions As Variables Video: https://youtu.be/7UMuJMiNjSk
Passing Functions As Variables Article: https://blog.webdevsimplified.com/2020-10/javascript-functions-as-arguments
Short Circuiting Video: https://youtube.com/shorts/8mvNzU7DpO4
Short Circuiting Article: https://blog.webdevsimplified.com/2019-10/what-is-short-circuiting
Reference Vs Value Video: https://youtu.be/-hBJz2PPIVE
Reference Vs Value Article: https://blog.webdevsimplified.com/2021-03/js-reference-vs-value
useState Video: https://youtu.be/O6P86uwfdR0
useState Article: https://blog.webdevsimplified.com/2020-04/use-state
StrictMode Video: https://youtu.be/XUwzASyHr4Q
? 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:30 - Mistake #1
08:12 - Mistake #2
12:02 - Mistake #3
#ReactJSMistakes #WDS #ReactJS
...
https://www.youtube.com/watch?v=oc_TNtCe2sY
JavaScript Simplified Course: https://javascriptsimplified.com
Typing animations are incredibly popular on many sites (especially marketing/brochure sites). In this video I attempt to replicate the typing animations from my JavaScript Simplified course website in TypeScript without using a library. I think this will be a pretty easy project, but I am not the best with TypeScript so we shall see.
? Materials/References:
GitHub Code: https://github.com/WebDevSimplified/ts-typewriter-effect-library
JavaScript Simplified Course: https://javascriptsimplified.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:32 - Setup/Demo
01:52 - Typewriter Class Setup
06:46 - Creating A Queue
11:56 - typeString Function
14:50 - deleteChars Function
21:38 - deleteAll Function
22:38 - pauseFor Function
23:21 - Configuring Options
#WebDevelopment #WDS #TypeScript
...
https://www.youtube.com/watch?v=gWD0EJgBlYQ
? IMPORTANT:
Get Started With HarperDB Now: https://studio.harperdb.io/sign-up/?code=WEBDEVSIMPLIFIED
Just like the video title says I decided to force myself to use a bunch of non-monospace fonts for coding. As you can guess it was incredibly painful and my eyes are still trying to recover from this madness. It was a bunch of fun, though, seeing if I could code without monospaced fonts.
? 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
#WebDevelopment #WDS #ComicSans
...
https://www.youtube.com/watch?v=KJGD4RdwKWU
FREE React Hooks Course: https://courses.webdevsimplified.com/react-hooks-simplified
Hangman is the perfect beginner React project since it is easy enough logic-wise, but still includes many complicated problems to solve. In this video I will show you how I would create a hangman game in React.
? Materials/References:
FREE React Hooks Course: https://courses.webdevsimplified.com/react-hooks-simplified
GitHub Code: https://github.com/WebDevSimplified/react-hangman
Regular Expression Video: https://youtu.be/rhzKDrUiJVk
Array Methods Video: https://youtu.be/R8rmfD9Y5-c
? 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 - Demo/Setup
01:48 - Planning
05:00 - HTML/JSX
26:12 - Drawing Component Logic
28:55 - Word Component Logic
30:03 - Keyboard Logic
38:25 - Win/Lose Logic
#React #WDS #TypeScript
...
https://www.youtube.com/watch?v=-ONUyenGnWw
Learn React Today Course: https://courses.webdevsimplified.com/learn-react-today
TanStack Query (also known as React Query) is my favorite way to interact with an external API. TanStack query is so easy to use and it gives you so many features by default which I love. In this video I go over everything you need to know about TanStack query in order to start implementing it in your React projects.
? Materials/References:
Learn React Today Course: https://courses.webdevsimplified.com/learn-react-today
GitHub Code: https://github.com/WebDevSimplified/react-query-crash-course-example
What Is React Query Video: https://youtu.be/lVLz_ASqAio
? 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:44 - What Is TanStack Query
01:20 - Setup
03:18 - Basic Example
14:15 - useQuery Basics
26:10 - useMutation Basics
39:12 - Pagination
41:28 - Infinite Scrolling
44:40 - useQueries Hook
47:22 - Prefetching
49:13 - Initial/Placeholder Data
#TanStackQuery #WDS #ReactQuery
...
https://www.youtube.com/watch?v=r8Dg0KVnfMA
Having the ability to search through text, validate text, and replace text using an advanced set of rules is exactly what Regex is for. Unfortunately, people fail to ever truly learn Regex. In this video I will be teaching you everything you need to know about Regex. We will talk about what Regex is, what Regex flags are, how to do simple and complex matches, how to handle look aheads and look behinds, and much more. Then at the end of the video I will show you how to use Regex to validate and format a phone number in various different formats.
? Materials/References:
Regexr Website: https://regexr.com
? Concepts Covered:
- What Regex is
- How to use Regex for simple matching
- How to match repeating patterns
- What Regex flags are
- Look aheads and look behinds
- Regex special characters
- Validation with Regex
- Find and replace with Regex
? Find Me Here:
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
#Regex #WDS #RegularExpression
...
https://www.youtube.com/watch?v=rhzKDrUiJVk
Choosing your first programming language can be daunting, especially with how difficult and time consuming learning your first language can be. The thought of wasting so much time with a poorly chosen first language is so scary that many people give up before even starting. In this video I am going to walk you through a series of questions that will help you narrow down which language is the best for you to learn, and by the end of this video you will have multiple suggestions for the best language, as well as a series of steps that will help you narrow your search even further.
Twitter:
https://twitter.com/DevSimplified
GitHub:
https://github.com/WebDevSimplified
CodePen:
https://codepen.io/WebDevSimplified
#FirstLanguage #WebDevelopment #Programming
...
https://www.youtube.com/watch?v=xDi7W342dC8
The age old debate of SQL vs NoSQL has been going on since the day NoSQL was conceived. In this video I will detail the pros and cons of each so that when you are ready to choose a database for your next project you will know exactly which one to choose.
? 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:40 - SQL Features
01:46 - NoSQL Features
03:53 - When To Use SQL Databases
05:52 - When To Use NoSQL Databases
08:57 - Conclusion
#SQLvsNoSQL #WDS #Databases
...
https://www.youtube.com/watch?v=t0GlGbtMTio