Web Dev Simplified Blog

Quantity queries are an incredible CSS feature that allows you to style elements based on the number of elements in a container without using any JavaScript at all.

Learning how to properly plan projects is one of the most important skills you can learn since it will lead to you finishing more projects quicker.

The aspect-ratio CSS property makes responsive design (especially with images/videos) so much easier and it only takes a few minutes to learn.

Handling focus in CSS is quite a bit more complicated than it seems and in this article I cover the 3 main CSS focus methods as well as a secret fourth focus method.

TypeScript 5.5 may seem like a small update, but it comes with one of the most requested features for fixing array filtering as well as 3 other really cool features that I love.

For decades, height: auto; has been a pain to animate in CSS. But with the introduction of the calc-size() function in CSS, we can finally animate height: auto; without the need for any JavaScript.

By far the most confusing part of the app router in Next.js is how caching works which is why this article will break down exactly how every part of Next.js's cache works so you can stop fighting it and start benefiting from amazing performance gains.

The new CSS property margin-trim is very simple, but incredibly useful when working in a component based design system.

Server components are the new way of writing React applications and it changes everything about React making it easier than ever to create complex applications. This article goes in depth into everything you need to know about server components.

Markdown is one of the best text markup languages and with this aritcle you will learn everything you need to know to become a master of Markdown.

Image loading is a major factor in page load times which is why it is important to use responsive images to minimize the amount of data that is transferred to users.

Lazy loading images is one of the easiest ways to speed up your site, but there are a few advanced techniques you can use to make your lazy loading even better.

The new HTML dialog element makes working with accessible modals so much easier. In this article I explain everything you need to know about the new dialog element to use it in your next project.

HTTP status codes are vital to creating an API and in this article I will explain all the important HTTP status codes and when to use them.

Defining media queries with min-width and max-width is not super intuitive which is why CSS added range media queries and they are amazing.

There are 4 different scopes in JavaScript which each behave differently and you need to understand those differences to truly master JavaScript.

CSS has been lacking a parent selector for years and now they finally introduced one with the :has pseudo class and it is incredible!

CSS just added individual rotate, translate, and scale properties which almost entirely remove the need for the transform property in CSS.

There are 24 total viewport units in CSS which all serve a specific purpose and my goal in this article is to explain each unit to you.

React Router is by far the most popular routing library in React and this article goes in depth on everything you need to know about React Router.

The facade pattern is a very common and simple design pattern which can easily clean up your code which is why it is one of the first design patterns you should learn

React's unopinionated nature makes it hard to know how to structure projects which is why in this article I am covering 3 different ways of laying out your folder structure in React.

useImperativeHandle is the perfect hook for handling complex ref behaviors, but it is pretty complicated to understand.

React 18 introduced many new hooks and in this article I will be talking about useId.

React 18 introduced many new hooks and in this article I will be talking about useDeferredValue.

React 18 introduced many new hooks and in this article I will be talking about useTransition which is the most useful of those hooks.

CSS layers change how the cascade works and it makes writing clean CSS code so much easier.

Custom events in JavaScript make handling things like double click, long press, and touch gestures much easier, but they can also be used for cross app communication.

You may think you are writing cleaner code using the bang operator, but in reality you are just opening yourself up to a plethora of bugs.

Debounce and throttle are two of the best ways to improve the performance of your site and in this article I talk all about how to implement both options and what they do.

You probably know console.log and a few other console methods, but did you know there are over 20 amazing console methods that make debugging easier and more enjoyable.

Snippets are one of the easiest ways to customize your VSCode experience and in this article I will explain everything you need to know about creating your first snippet.

This ultimate guide will break down everything you need to know about the new temporal date API in JavaScript.

This ultimate guide will break down everything you need to know about MongoDB to build your next project.

Detecting element size changes is something that is normally difficult to do, but with resize observer it is incredibly easy.

The fetch API looks straightforward, but there are a lot of edge cases that this blog article will address for you.

Understanding how CSS position works seems straightforward, but there are quite a few nuances you need to understand in order to truly master CSS.

Lazy loading, infinite scrolling, scroll based animations, and performant scroll events are all perfect examples of Intersection Observer in action.

Event listeners appear simple at first, but they have an incredible level of depth that most people completely ignore. This article will cover everything you need to know about event listeners so you can avoid bugs and write better code for your projects.

Pseudo elements are an essential piece of CSS knowledge that you need to understand in order to create advanced designs.

There are countless ways to size and space out elements in CSS, but all those techniques involve the box model which is why learning the box model is crucial to learning CSS.

requestAnimationFrame is the best way in JavaScript to play smooth and efficient animations and in this article I will show you exactly how to use requestAnimationFrame.

CSS selectors are easy to get started with but hard to master since there are so many options which is why I created this ultimate guide to teach you not only the basics, but also the more advanced CSS selectors you need to know.

Map is by far the most used array method and in this article I will explain exactly what it does and why it is so useful.

Flexbox is easy to get started with but hard to master which is why I created this ultimate guide to teach you not only the basics, but also the more advanced features of flexbox.

ES6 modules are one of the best features added to JavaScript since it makes writing clean code exponentially easier.

Async/Await is syntactical sugar that makes working with promises and async code so much easier.

You have probably never used the useDebugValue hook, but this hook is incredible at helping you debug your custom hooks.

Everyone knows how to add and commit changes, but that is only the start of Git. The Git commands in this article will supercharge your Git skills and save you time.

I promise this will be the best guide on promises you ever read.

Building projects from scratch is hard, but if you utilize comments correctly you can make writing projects from scratching trivial.

Online courses claim to make you a developer quicker and easier, but are they worth the sometimes astronomical cost?

Almost every application needs some way to accept payments so in this article I will show you how to easily configure Stripe in just a few lines of code.

Technical debt may seem inevitable, but there are many techniques you can use to manage technical debt.

React 18 introduces a ton of new features related to performance and loading which you should be excited about.

HSL is the easiest and best color format to use with CSS, but why exactly is that?

Understanding how to undo and remove styles in CSS is a skill most developers never learn, but it is incredibly useful.

CSS logical properties are the new way to write padding, margin, border, and so much more. They will change CSS forever.

Nodes and elements are very similar in JavaScript, but there are a few important differences to understand.

How the array reduce function works in JavaScript and how you can use it in your projects.

What is CORS and how to fix CORS errors.

Recursion is one of the hardest topics to learn as a new developer, but this is mostly due to confusing explanations and examples. This article will break down recursion in an easy to understand way with concrete and simple examples.

Programmers learn a ton of math in school, but do you really need to know math to be a programmer?

Reference vs value is one of the most complicated topics beginner developers face, but it is much easier than it appears.

By using dynamic module imports you can speed up your applications while making the user experience better.

If you are unable to make programming fun you will never be able to become a programmer.

Creating objects in JavaScript is something you do all the time so you should know about these enhancements that make creating objects even easier.

This article covers everything you need to know about the CSS transform property and the various transform functions.

Generators are incredibly useful for specific tasks and much easier to use than they appear.

This article explains the difference between null and undefined in depth.

Sets in JavaScript are a specialized type of array that is perfect for unique lists.

If you are dealing with nested arrays then you need to know about the Array#flat method.

PropTypes are perfect for adding basic type safety to your React project.

Creating a responsive video or iframe that maintains its aspect ratio in CSS is much trickier than you may think.

Maps in JavaScript are more performant, easier to use, and better equipped than JavaScript objects.

JavaScript classList seems straightforward, but there are actually multiple unique methods you probably don't know.

A short explanation on how CSS floats are still useful.

A short explanation of how to use clamp in CSS.

How passing functions to other functions works in JavaScript.

How to use data attributes in JavaScript.

Get easy and quick React performance with a custom debounce hook.

Everything you need to know about NaN in JavaScript.

A quick explanation on what pure functions are and how to use them.

Here are some quick tips you can use to improve your development skills.

Arrow functions are one of the best features added to JavaScript and in this article I will explain everything you need to know about them.

A quick guide on how cross site scripting works and how to ensure your site is not vulnerable.

Due to modern JavaScript features we no longer need to use immediately invoked function expressions.

An in depth analysis of how to use destructuring and the spread operator with objects and arrays.

An in depth analysis of all the differences between cookies, localStorage, and sessionStorage.

These are my 10 favorite keyboard shortcuts that I use everyday as a programmer.

Everything you need to know about the difference between double and triple equals in JavaScript.

This article breaks down everything you need to know about CSS calc to take your CSS skills to the next level.

An in depth look at every aspect of the useLayoutEffect React hook.

You have probably heard of hoisting but what exactly is it and how does it work.

Do you wish you could format dates like this: '2 days ago', 'yesterday'. Well with JavaScript internationalization it is incredibly easy.

Every method you need to know to center elements in CSS.

A simple explanation of how to take advantage of dynamic imports to make your site load faster.

An in depth explanation of why you should be using the template tag.

An in depth look at every aspect of the the useReducer hook in React.

An in depth look at every aspect of the the context API and the useContext hook in React.

This article covers everything you need to know about BEM in order to start using BEM to clean up and organize your CSS styles.

Everything You Need To Know About The Ternary Operator In JavaScript.

An in depth look at every aspect of refs and the useRef hook in React.

An in depth look at every aspect of the useMemo and useCallback React hooks.

An in depth look at every aspect of the useEffect React hook.

An in depth look at every aspect of the useState React hook.

You are used to trading time for money at your job, but trading your money for time is just as important if not more important.

While not everyone should be a programmer I think it is crucial that everyone learns at least the basics of programming.

Learn all about how triangles can be created and manipulated in CSS.

Animation fill mode is the single most important property of CSS animations to understand so in this article I will be breaking down exactly how to use animation fill mode and what it does.

Null coalesce is a new JavaScript language feature which makes assigning default values for null/undefined incredibly easy.

Optional chaining is a new JavaScript language feature which will revolutionize how null and undefined are handled.

Exploring the power of tagged template literals.

A brief explanation of N + 1 queries and how to avoid them.

Everything you need to know about CSS custom properties.

A brief explanation of magic numbers in code and why they are bad.

An in depth breakdown of how CSS specificity works.

Multiline text overflow fading and dynamic expand/collapse buttons are difficult to create so in this article I show you a simple way to do both.

A quick explanation of the differences between var, let, and const.

An explanation of what semantic versioning is and why it is important.

An explanation of guard clauses and how they can be used to clean up complex nested conditional logic.

An in depth tutorial on the @supports CSS at-rule, and how it can be used to write modern CSS without breaking older browser support.

An explanation of the difference between standard, async, and defer script tag loading, and which is the best to use.

React portal lets components be rendered outside their parent component which is incredibly useful in specific scenarios explained in depth in this article.

Middleware in Express is one of the easiest ways to create DRY and well written code which is why it is crucial to know how to use and write good middleware.

Storing state in React is difficult to do right, but by storing state as locally as possible it can be a lot easier.

A brief explanation of why fitness and physical health is so important, especially for programmers.

A simple step by step guide on how to learn any new technology or topic quickly and efficiently.

A quick explanation of how to write custom hooks and why they are so useful.

The quickest way to have corrupt out of sync state is by storing derived state.

A detailed description of the steps needed to deliver an effective code review, even if it is just for your own code.

A quick breakdown of exactly how to use data attributes with CSS to create dynamic content.

A breakdown of why the common practice of using class selectors in JavaScript makes code impossible to refactor, and what you should do instead.

A detailed breakdown of what short circuiting is, how it works, and why it is important.

Two simple ways to use ES6 modules with Node.js.

A quick tip on how to easily test any site for colorblind accessibility.