React Simplified Course: https://reactsimplified.com/?utm_source=youtube&utm_medium=video-description&utm_campaign=video-id-M3mGY0pgFk0
React recently announced a new experimental hook that makes working with optimistic updates so much easier. This saves so much boilerplate code and gives your users a much better experience.
? Materials/References:
React Simplified Course: https://reactsimplified.com/?utm_source=youtube&utm_medium=video-description&utm_campaign=video-id-M3mGY0pgFk0
? 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:34 - What are optimistic updates
01:13 - Why optimistic updates are hard
02:05 - useOptimistic hook basics
06:38 - useOptimistic hook advanced
#ReactJS #WDS #useOptimistic
...
https://www.youtube.com/watch?v=M3mGY0pgFk0
The CSS :focus state is simple on the surface, but there is actually quite a lot going on behind the scenes. There are 3 total :focus states you can use in CSS and even a secret fourth state that make :focus much more complicated than it may first appear. In this video I go over everything you need to know about CSS :focus states.
? Materials/References:
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:29 - :focus
01:16 - :focus-visible
03:05 - :focus-within
04:19 - :focus-visible-within
05:38 - Use Cases
#CSSFocus #WDS #CSS
...
https://www.youtube.com/watch?v=dAOGdIOcLps
2048 Daily: https://2048daily.com
2048 is a simple game at first glance, but the amount of logic and planning that goes into creating it is quite advanced. This is why I find this to be a perfect game dev project for any developer looking to go from beginner to advanced.
? Materials/References:
GitHub Code: https://github.com/WebDevSimplified/js-2048
2048 Daily: https://2048daily.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:50 - HTML
01:40 - CSS
12:00 - JavaScript - Grid
20:12 - JavaScript - Tiles
30:40 - JavaScript - Handle Input
48:07 - JavaScript - Game Logic
#2048 #WDS #GameDevelopment
...
https://www.youtube.com/watch?v=wOVEe9eawXc
Learn CSS Today Course: https://courses.webdevsimplified.com/learn-css-today
I love Tailwind. It is one of (if not) my favorite ways to style applications. I do have one issue with Tailwind, though, and that is how people go about learning it. In order to truly learn and master Tailwind you do not need to actually learn much at all about Tailwind. Instead you need to master CSS since Tailwind is really just CSS with some slightly different names and a few extra features.
? Materials/References:
Learn CSS Today Course: https://courses.webdevsimplified.com/learn-css-today
? 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:24 - Best way to learn Tailwind
04:28 - How to learn advanced Tailwind
#TailwindCSS #WDS #CSS
...
https://www.youtube.com/watch?v=Ksn1tThNTjI
? IMPORTANT:
Learn CSS Today Course: https://courses.webdevsimplified.com/learn-css-today?utm_medium=video-description-no-mention&utm_source=youtube&utm_campaign=css-media-query
Responsive design is one of the most important parts of CSS in the modern web, but it is often overlooked. In this video I will be covering CSS media queries which are the easiest and most common way to create a mobile responsive web site. I will be covering absolutely everything you need to know about media queries so you can start working with them immediately.
? Concepts Covered:
- What CSS media queries are
- The syntax for CSS media queries
- How to create responsive designs with media queries
? 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
#CSSMediaQuery #WDS #CSS
...
https://www.youtube.com/watch?v=yU7jJ3NbPdA
Bootstrap is one of the most widely used CSS frameworks, but it can be quite complex to learn since there are so many features in Bootstrap. In this video I will be breaking down everything you need to know about Bootstrap by covering the entire grid system, 6 popular components, and 6 categories of utility classes.
? Materials/References:
Breakpoint CSS: https://gist.github.com/WebDevSimplified/d7deffbd6631834003ad07ca60aaf906
Bootstrap Getting Started Documentation: https://getbootstrap.com/docs
? 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:00:35 - Setup
00:02:00 - Containers & Breakpoint Basics
00:05:37 - Columns
00:14:06 - Rows
00:17:36 - Tables
00:22:46 - Form Basics
00:28:11 - Input Groups
00:30:52 - Floating Labels
00:32:25 - Form Validation
00:36:05 - Buttons
00:40:28 - Alerts
00:42:36 - Cards
00:46:35 - Modals
00:52:00 - Collapse
00:54:20 - Navbars
01:00:20 - Color Utilities
01:03:00 - Stack Utilities
01:04:13 - Border Utilities
01:06:13 - Display Utilities
01:07:12 - Spacing Utilities
01:08:36 - Flexbox Utilities
#Bootstrap #WDS #Bootstrap5
...
https://www.youtube.com/watch?v=Jyvffr3aCp0
Redis is the most popular caching tool. It can be used with pretty much any programming language and provides incredibly versatile and quick caching. Redis powers a huge portion of the web so it is important to understand how it works. In this video I will be covering Redis in depth from how to install it, what commands you can use, all the way to how to use it in a real world project.
? Materials/References:
Windows Subsystem Linux: https://docs.microsoft.com/en-us/windows/wsl/install-win10
JavaScript Sets Video: https://youtu.be/yJDofSGTSPQ?t=752
JavaScript Sets Article: https://blog.webdevsimplified.com/2021-01/javascript-sets
Postman Clone Video:
? 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 - What Is Redis?
03:04 - Redis Installation
04:18 - Basic Redis Commands
06:44 - Handling Expirations
07:51 - Lists
10:07 - Sets
11:30 - Hashes
13:16 - Node.js Example
#Redis #WDS #Nodejs
...
https://www.youtube.com/watch?v=jgpVdJB2sKQ
Functional programming is constantly on the rise, and with functional programming comes pure functions. Pure functions are the base of what functional programming is built upon, but they are useful even outside of functional programming. The idea of a pure function is a function that when given the same inputs always returns the same output. This function also must have absolutely no side effects and rely on no other state besides the input variables. It essentially works exactly the same as a math function. 2 + 2 always equals 4 no matter how many times you execute the function. 2 + 2 also never effects anything else outside it. For example 2 + 2 never causes 3 to change to 7 or some other side effect.
In this video I will be covering pure functions in depth by example. We will take an impure function and incrementally modify it so it is a pure function by the end of the video. I will also discuss the advantages and disadvantages of pure functions.
? Materials/References:
Pure Functions Article: https://blog.webdevsimplified.com/2020-09/pure-functions
ES6 Rest/Spread Operator Video: https://youtu.be/NIq3qLaHCIs
? Concepts Covered:
- What a pure function is
- How to avoid side effects
- Why pure functions are important
- The limitations of pure functions
- Immutability in pure functions
? Find Me Here:
My Website: https://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
#PureFunction #WDS #FunctionalProgramming
...
https://www.youtube.com/watch?v=fYbhD_KMCOg