Editor's Pick
Plain Vanilla
An explainer for doing web development using only vanilla techniques. No tools, no frameworks — just HTML, CSS, and JavaScript.
Accessibility
Mobile Accessibility Testing: Enhancing User Experience for All
Learn how to implement mobile accessibility testing practices, improve UX and tackle challenges with our comprehensive accessibility courses.
CSS
New Values and Functions in CSS
The CSS Working Group released the first Public Working Draft for the CSS Values and Units Module Level 5. It describes the common values and units that CSS properties accept and the syntax used for them, and it comes with some interesting new features.
It is still at an early stage, and things will change, but some of the new features and functionality included in the CSS Values and Units Module Level 5 look incredibly promising.
Gradient Text with a Drop Shadow
We can achieve a text gradient by clipping the background to the text with background-clip: text. This creates a gradient background and then clips the background to the text. Then we hide the actual text itself with color: transparent.
Scroll-Enhanced Experiences
Embark on a journey through the art of scrollytelling with CSS. This talk will guide you through the process of creating dynamic, story-driven experiences that leverage the user's scroll behavior. Learn to control the pace and rhythm of your story with the CSS Scroll Timeline API, creating a captivating narrative that unfolds with each tick of the mouse wheel.
This is a 50 minute video.
First Public Working Draft of CSS Grid Level 3 / Masonry Layout
The CSS Working Group has published a First Public Working Draft of CSS Grid Layout Module Level 3 aka CSS Masonry Layout. This draft represents masonry layout as a built-in capability of CSS in two possible syntactic forms: a grid-integrated syntax, and a grid-independent syntax, both of which are outlined as alternatives. We hope publication of this draft facilitates discussion about their relative merits.
HTML
How to Defer Offscreen Images and Background Images
Deferring offscreen images is a web performance optimization technique that can help you improve user experience and Core Web Vitals on your site. Also known as lazy loading, it downloads out-of-view images only when they're about to appear in the user's viewport. Deferring offscreen images is especially important on image-heavy websites.
In the past, lazy loading was a complicated process that involved either the manual setup of JavaScript event listeners together with viewport calculations, or the integration of a third-party library. However with the introduction of the loading HTML attribute and the IntersectionObserver browser API, the situation has improved a lot.
Today, we can defer offscreen images right in the HTML using the loading="lazy" attribute, while the IntersectionObserver API provides a performance-friendly way to defer offscreen background images using JavaScript.
JavaScript
Angular 19 Introduces Router Outlet Inputs
As front-end development continues to evolve, managing data flow between parent and routed child components remains a persistent challenge. The release of Angular 19 introduces a game-changing feature that not only simplifies this process but also has the potential to reduce the reliance on shared services or state management solutions for data sharing.
How to fetch data in React [2024]
There are multiple ways to fetch data in React from a remote API. Here we want to explore all the options available for data fetching in React that were introduced over the years and are still in use today. While some of them are newer and recommended, others are less recommended and should be avoided in most cases.
Frontend Schism: Will React Server Components Destroy React?
React Server Components are controversial in the React ecosystem. An Angular co-creator and other frontend experts discuss the pros and cons.
Angular Routing Essentials: All You Need to Know in One Post
This is the only post about Angular Routing that you need in order to fully master it. I will cover all the essential concepts of Angular routing, starting with the basics like defining routes, links, and outlets, and finishing with more advanced topics like data resolvers and route protection.
UX
UI Traps - Disabled Buttons and Inputs
A foundational principle of UX is to give the user control. Giving users control over their experience will build a sense of ownership, empowerment, and happiness about the application. Disabled UI (buttons, inputs, controls) breaks this principle of user control. They display an element the user cannot control, often without any explanation as to why.
I Analyzed 4 Successful Products to Find These Powerful UI Design and Implementation Principles
In this article, I will explain several design principles adopted from successful products, how these products strictly adhere to these principles, and how to implement these designs efficiently.
AI Product UX Patterns Collection
The AI Product UX Patterns Collection is a curated set of UX patterns for builder focused on creating intuitive and effective user experiences in AI-driven applications. It's designed to support builders in navigating the complexities of AI UX design, supporting you on building applications that are both powerful and user-friendly, regardless of the underlying technology or framework.
Miscellaneous
What 10,000 Hours of Coding Taught Me: Don't Ship Fast
I’ve been an engineer for over 7 years now. I have worked on countless projects in backend, frontend, and DevOps. I don’t consider myself a great engineer; there are people out there who are not only smarter but also more experienced. Over the years, I have learned some tricks to help me climb the programming ladder, allowing me to build software that is reliable and easy to work with.
Being slow has made me code faster, ship more, and be more productive in general.
Plain Vanilla
An explainer for doing web development using only vanilla techniques. No tools, no frameworks — just HTML, CSS, and JavaScript.
Exploration of On-Scroll Layout Formations
An exploration of layout formations during scroll, where content is pinned until the layout is fully assembled.
Demo here.
The Frontend Treadmill
A lot of frontend teams are very convinced that rewriting their frontend will lead to the promised land. And I am the bearer of bad tidings.
If you are building a product that you hope has longevity, your frontend framework is the least interesting technical decision for you to make. And all of the time you spend arguing about it is wasted energy.
If your product is still around in 5 years, you’re doing great and you should feel successful. But guess what? Whatever framework you choose will be obsolete in 5 years. That’s just how the frontend community has been operating, and I don’t expect it to change soon. Even the popular frameworks that are still around are completely different. Because change is the name of the game. So they’re gonna rewrite their shit too and just give it a new version number.
The frontend ecosystem is kind of broken right now. And it’s frustrating to me for a few different reasons. New developers are having an extremely hard time learning enough skills to be gainfully employed. They are drowning in this complex garbage and feeling really disheartened. As a result, companies are finding it more difficult to do basic hiring. The bar is so high just to get a regular dev job. And everybody loses.