Editor's Pick
Making content-aware components using CSS :has(), grid, and quantity queries
Eric Bailey teaches us how to make a hyper-resilient component that responds not only to the container, but other languages too.
CSS
Hamburgers by Jonathan Suh
Tasty CSS-animated hamburgers.
I have this old bookmark of a codepen, always liked the 3rd one, though you'd want to replace the divs with buttons for accessibility and add some aria attributes (aria-label="Menu" aria-controls="navigation" aria-expanded="true|false").
A Modern CSS Reset (2024 update)
I have a set of baseline CSS styles that come with me from project to project. In the past, I'd use a typical CSS reset, but times have changed, and I believe I have a better set of global styles.
Inside the CSS Engine: CSSOM Explained
A deep dive into how browsers parse and manipulate CSS, its impact on web performance, and why it matters.
Typeset - HTML pre-processor for web typography
Typeset provides typographic features used traditionally in fine printing which remain unavailable to browser layout engines. Typeset’s processing brings the following to your webpages:
- Real hanging punctuation
- Optical margin alignment
- Small caps detection
- Soft hyphen insertion
- Punctuation substitution
CSS mesh gradients generator
Create beautiful mesh gradients only with CSS code. Use your own colors or randomly generated ones.
43 CSS Speech Bubble Design Examples
Expect to explore HTML speech bubble integration, CSS3 animations, and even scalable shapes that make responsiveness a breeze. Strap in; your UI is about to get a whole lot livelier.
content-visibility: the new CSS property that boosts your rendering performance
The CSS content-visibility property enables web content rendering performance benefits by skipping rendering of off-screen content. This article shows you how to use this new CSS property for faster initial load times, using the auto keyword. You will also learn about the CSS Containment Spec and other values for content-visibility that give you more control over how your content renders in the browser.
My Modern CSS Reset
A few years ago, I read a blog post by Josh W Comeau called A Modern CSS Reset. I realized that there’s no deep magic; everything a reset does is just normal CSS that you can read and understand.
My CSS reset is loosely based on Josh’s, but it takes a slightly more opinionated stance and applies some light default styling that I end up adding to almost every project anyway. CSS has also rapidly improved over the past few years, and I’ve tried to take advantage of that by including a few modern features like cascade layers, logical properties, nicer text wrapping and nesting.
Making content-aware components using CSS :has(), grid, and quantity queries
Eric Bailey teaches us how to make a hyper-resilient component that responds not only to the container, but other languages too.
Pure CSS Directional Hover Effect for Grouped Elements
In this step-by-step guide, you'll learn how to add a Directional Hover Effect to grouped HTML elements, creating a smooth and engaging interaction as users hover over each item. This effect uses pure CSS to detect the cursor's entry direction and animates accordingly, adding visual interest to your design.
HTML
Easy date and time localization with the time HTML element
Did you know there is quite easy way to show localized dates and times on your website? You can use the HTML time element to display dates and times in the user’s locale and timezone without having to guess the user’s locale, rely on profiles or settings, or doing any backend work.
JavaScript
HTML Form Validation is heavily underused
HTML Forms have powerful validation mechanisms, but they are heavily underused. In fact, not many people even know much about them. Is this because of some flaw in their design? Let’s explore.
The Concise TypeScript Book
The Concise TypeScript Book provides a comprehensive and succinct overview of TypeScript's capabilities. It offers clear explanations covering all aspects found in the latest version of the language, from its powerful type system to advanced features. Whether you're a beginner or an experienced developer, this book is an invaluable resource to enhance your understanding and proficiency in TypeScript.
This book is completely Free and Open Source.
How React, Vue, and Angular Work – Core Principles in One File
Front-end libraries (React, Vue, Angular) and the basic principles of how they work, all in a single file using pure JavaScript (VanillaJS).
UX
Designing For Gen Z: Expectations And UX Guidelines
There are many myths revolving around Gen Z and how they use tech. Time to take a look at actual behavior patterns that go beyond heavy use of social media.
Miscellaneous
Where web components shine
In this job we need to think a lot about the tools we choose and why, so I cataloged all the places where web components (for me) feel like “the right tool for the job”. Your list may be different and I’d love to read it. And because I don’t want this to be 100% propaganda, I’ll also cover some of the not-so-great parts of web components as well.
As always, your mileage may vary. Ultimately the technologies you choose probably come down to what’s cool at the time, what people think solves their problems, and what your team and decision makers feel comfortable with at the time.
On Good Software Engineers
I set out to find a simple definition that would help managers frame the fundamental things they expect from software engineers.
Keeping your site accessible to old browsers is non-trivial
One of the questions you could ask about whether or not to block HTTP/1.0 requests is what this does to old browsers and your site's accessibility to (or from) them. The reason one might care about this is that old systems can usually only use old browsers, so to keep it possible to still use old systems you want to accommodate old browsers. Unfortunately the news there is not really great, and taking old browsers and old systems seriously has a lot of additional effects.
This situation is only going to get worse over time, as websites increasingly require TLS 1.2 or better (and then in the future, TLS 1.3 or better). If you seriously care about keeping your site accessible to old browsers, you need to have a fully functional HTTP version.