Real-life web dev tips & resources, directly to your inbox.

One line of CSS fixes every anchor link that jumps behind your fixed header

One CSS property stops scroll from leaking out of a modal or sidebar into the page behind it. No JavaScript scroll locking needed.

URLSearchParams reads, sets, and removes query string values with a clean API. No string splitting, no manual parsing.

A debounce function waits until the user stops typing before firing the request. Ten lines of code, zero libraries, fixes one of the most common performance bugs.

One line of CSS creates a grid that fits as many columns as possible at any screen size. No breakpoints, no JavaScript, no framework needed.

Stop running async calls one by one. Promise.all runs them in parallel and cuts wait time to the slowest request, not the sum of all.

Save user preferences, theme choices, and UI state in the browser with three methods and zero backend. No account, no server needed.

JavaScript runs on one thread. Heavy tasks block everything. Web Workers move that work to the background so your UI stays smooth. No libraries needed.

Replace six share buttons with one native share sheet. Four lines of JS, no library, works with every app already on the user's phone.

Stop wasting time tweaking user messages. This simple system prompt framework forces any AI to listen and finally stop giving you wordy garbage.

Prerender pages before a click using one JSON script tag. No framework, no build step. Pure progressive enhancement for instant navigation.

Stop writing number formatting functions. The browser has Intl.NumberFormat built in. Currencies, locales, compact notation. No library needed.

Learn how to send native OS notifications from the browser using the Notifications API, no libraries, no apps, just two simple steps.

Make your website talk for free with the Web Speech API. Use speechSynthesis.speak() to create native, offline voiceovers with zero JS libraries.

Create a seamless infinite marquee with CSS. Use the translateX(-50%) trick to build smooth, high-performance loops without any JavaScript.

Fix the 100vh mobile bug with one line of CSS. Use the svh unit to ensure your hero sections always fit the screen perfectly without any JavaScript hacks.

The browser finally handles the page transitions for us.

HTML now has a native way to handle "floating" UI. By using the popover attribute...

We’ve all had to do it. You need a responsive 16:9 video container, so you reach for that weird math trick:

If you’ve ever had to localize a website for languages like Arabic or Hebrew, you know the pain of "flipping" your CSS. You end up writing code like this:

It’s a lot of boilerplate to maintain, and it’s easy to miss a variable. Not anymore.

We’ve spent years writing the same "glue code" just to open a dialog or a popover. Not anymore.

Let’s explore these JavaScript features one-by-one to unlock their potential.

A quick curated list of standout past newsletter issues with practical ideas for web developers and builders.

I've made quite a few tools, so I'd love to share them with you in case you don't know about them yet. Let's roll!

Discover how the CSS :has() selector finally makes the impossible possible for your most stunning and responsive layouts yet!

Explanations and examples included. Check it out.

Filter the noise.

Want to make images look better without opening Photoshop? CSS filters let you change the look of images directly in the browser.

Ever visited a long article and wondered how far you’ve scrolled? A simple progress bar at the top can make your pages feel more polished and keep readers engaged. Here’s how to build a clean, modern one with just 20 lines of HTML, CSS, and JS. No frameworks. No dependencies.

What are input types in HTML? How many input types does HTML actually provide? Let me show it to you in this article.

The new CSS if() function introduces real conditional logic inside native stylesheets.

Today I’m going to show you how to create the cleanest, fastest QR code generator possible.

Learning how to code in an interactive way is much more fun. So I created a list of interactive learning tools for you. You can find tools to learn CSS, JavaScript, TypeScript, React, Python, Git, SQL, Regex, and more in this list.

This article highlights the best resources for finding and downloading free HTML templates.

Technical interviews are difficult. So I decided to gather resources that will help you crush your next interview.

I recreated Pong Wars into a fully interactive, color-customizable, pause-and-reset version that still fits in one single HTML.

Certifications can be costly, so I prepared a list of free ones you can take to enhance your credibility.

If you want to level up your programming skills, GitHub is full of hidden gems. I’ve put together a list of repositories that helped me (and countless others) learn faster, practice smarter, and actually build stuff that matters.

You can use CSS generators to save time on some time-consuming tasks. I made a collection of the best CSS generators for you to use.

Using console.log() for JavaScript debugging is the most common practice among developers. But there is more.

This Git cheat sheet gives you a quick, practical reference to the most useful commands so you can manage version control with confidence.

By making open-source contributions, you will learn a lot. Open-source contributions allow you to become a part of the open-source community.

In this article I will share with you some really handy JavaScript tips.

Modern HTML is more than just basic building blocks. Discover lesser-known, super useful features that go beyond the basics in this guide.

Keep your GitHub profile up-to-date by automatically showcasing your latest blog posts. Set it up once, and your profile will always be updated with your latest content.

In this article, I'll show you how to create a beautiful pulse effect. I'll also discuss the use cases and explain how you can improve performance.

Make your projects more visually appealing with these easy-to-implement, CSS one-liners.

From zero to web developer -> in 14 actionable steps.