Web Dev Simplified

Nick Chapsas's Video: https://youtu.be/_ougvb8mT7k

This may sound crazy but I really don't use the else keyword in my programming anymore. When I do end up using else it usually leads to worse code than if I purposely avoided it. In this video I explain exactly why that is.


📚 Materials/References:

Optional Chaining Video: https://youtu.be/v2tJ3nzXh8I?t=379
Optional Chaining Article: https://blog.webdevsimplified.com/2020-03/javascript-optional-chaining
Guard Clause Article: https://blog.webdevsimplified.com/2020-01/guard-clauses


🌎 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:00 - Guard Clauses
04:03 - Single Return Is Bad
05:43 - Extract Functions


#StopUsingElse #WDS #JavaScript

Why I Don't Use Else When Programming

Writing code is easy. Writing clean code, though, is much harder. In this video I take a look at two different code examples from a beginner, intermediate, and advanced level. The goal of this is to show you how a senior developer will think while programming and how they will structure their code to be as clean and well-written as possible.


📚 Materials/References:

Template Literals Article: https://blog.webdevsimplified.com/2020-03/tagged-template-literals
Guard Clause Article: https://blog.webdevsimplified.com/2020-01/guard-clauses
Destructoring Video Tutorial: https://youtu.be/NIq3qLaHCIs
Reduce Function Tutorial: https://youtu.be/R8rmfD9Y5-c?t=387
GitHub Code: https://github.com/WebDevSimplified/Noob-Vs-Pro-Code


🧠 Concepts Covered:

- How senior developers think
- Using guard clauses to clean up code
- The differences between senior and junior developers
- What to think about when programming


🌎 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


#NoobVsPro #WDS #CleanCode

Junior Vs Senior Code - How To Write Better Code

useEffect is one of the greatest additions to React. It is so much nicer than using component lifecycle methods, but it comes with one huge problem. The API for useEffect sucks. Not only that, but having tons of useEffects in your components makes your code harder to parse and understand. This is why I try to minimize if not remove all useEffects from my components. This makes my code easier to read/write and makes sure all the ugliness of useEffect is hidden away in custom hooks.


🌎 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:35 - Project overview
01:23 - Hiding useEffect in custom hooks
05:00 - How not to use useEffect
08:24 - How to do fetching


#useEffect #WDS #ReactJS

Why I Don’t Use useEffect In My React Components

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

This Is A Great Beginner React/TypeScript Project

I cannot believe this is finally here. It has been a few years since container queries were talked about and introduced and now they are finally available in nearly every browser. This will completely change how we write CSS, but I think more importantly it will change how we handle writing components as well. I cannot wait to see what people do with this.


📚 Materials/References:

CSS Viewport Units Video: https://youtu.be/5m6JOJLy5B0
CSS Viewport Units Article: https://blog.webdevsimplified.com/2022-08/css-viewport-units
CSS :has Selector Video: https://youtu.be/K6CWjkDgQnE
CSS :has Selector Article: https://blog.webdevsimplified.com/2022-09/css-has-selector


🌎 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:41 - Basic Container Query Example
04:15 - Advanced Container Query Features
08:20 - Container Units
10:00 - Debugging
10:31 - Using The :has Selector


#CSS #WDS #ContainerQueries

Responsive CSS Will Never Be The Same

Copying code is a bit of a controversial topic especially when it comes to portfolio projects. Many people say you shouldn’t copy tutorial code for your projects, but I personally believe copying code is completely fine under certain circumstances.


🌎 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 - When copying code is bad
01:22 - Modify copied code
03:15 - Implement copied code into your own larger project


#WebDevelopment #WDS #Programming

Should You Copy My Code?

Testing is hard and knowing what to test is even harder. In this video I talk about the 3 different types of tests and how they compare to one another. I also talk about why end to end tests are so great and why writing less tests can make your test coverage better.


📚 Materials/References:

Pure Functions Video: https://youtu.be/fYbhD_KMCOg
Pure Functions Article: https://blog.webdevsimplified.com/2020-09/pure-functions
Jest Video: https://youtu.be/FgnxcUQ5vho


🌎 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 - Types of tests
02:55 - Comparison between test types
03:52 - When to use unit tests
06:35 - When to use end to end tests
08:18 - When to use integration tests


#Testing #WDS #E2ETests

Stop Writing So Many Tests

Zod is amazing. It is not only an incredible validation library, but the direct interactions it has with TypeScript make it event better. Not having to define my types twice is a game changer and the simple yet powerful API of Zod is so nice. In this video I talk about what Zod is, show examples of how to use Zod, and talk about why it is so amazing.


🌎 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:28 - What Is ZOD?
05:12 - ZOD Demo


#Zod #WDS #TypeScript