Web Dev Simplified

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

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

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

ES6 came with many new features, but one of the best features was the official introduction of Promises. Promises allow you to write clean non-callback-centric code without ever having to worry about callback hell. Even if you never write your own promise, knowing how they work is incredibly important, since many newer parts of the JavaScript API use promises instead of callbacks. Checkout the full video to learn how to define and use promises.

Promise Article: https://blog.webdevsimplified.com/2021-09/javascript-promises

Code From This Video:
https://codepen.io/WebDevSimplified/pen/jXoXYj

Twitter:
https://twitter.com/DevSimplified

GitHub:
https://github.com/WebDevSimplified

CodePen:
https://codepen.io/WebDevSimplified


#JavaScript #Promises #WebDevelopment

JavaScript Promises In 10 Minutes

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

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

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

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