Editor's Pick
Container Queries Unleashed
Container queries expand the universe of designs that can be implemented, giving us whole new superpowers. Now that container queries are broadly available, I think it’s time we start exploring this potential. In this post, I’ll share the “killer pattern” I can’t stop using in my work, and explore what’s possible with this new capability.
Accessibility
No ARIA is better than bad ARIA
If you pay much attention to the folks in social media who talk about accessibility a lot, you may have heard the phrase that “No ARIA is better than bad ARIA". I figured I'd like describe what they mean by that.
Web Accessibility Overlay Fact Sheet
No overlay product on the market can cause a website to become fully compliant with any existing accessibility standard and therefore cannot eliminate legal risk.
Accessibility on the Web is a big challenge, both for owners of websites and for the users of those websites. The invention of novel approaches to resolving this challenge is to be commended.
However, in the case of overlays—especially those which attempt to add widgets that present assistive features—the challenge is not being met. Even more problematic is the deceptive marketing provided by some overlay vendors who promise that implementing their product will give their customer’s sites immediate compliance with laws and standards.
The ineffectiveness of overlays is something that has broad agreement among accessibility practitioners, per the WebAIM Survey of Web Accessibility Practitioners which found:
A strong majority (67%) of respondents rate these tools as not at all or not very effective. Respondents with disabilities were even less favorable with 72% rating them not at all or not very effective, and only 2.4% rating them as very effective.
Considerations for making a tree view component accessible
A deep dive on the work that went into making the component that powers repository and pull request file trees.
CSS
How To Reduce Unused CSS And Speed Up Your Website
Discover how unused CSS can impact your page speed and explore tools to identify and optimize CSS files effectively.
Responsive Tables & Readable Paragraphs
They made the data table responsive in that it’s not zoomed out or cut off, you can horizontally scroll it. But horizontal scrolling is super terrible when you’re trying to read a paragraph of text.
vanilla-css-design-system: Purely Vanilla: A Minimalist CSS Design System (no SCSS or JavaScript)
A lightweight, modular, and highly customizable design system built with vanilla CSS. Perfect for creating consistent and responsive web applications.
Explore the full documentation and examples here: Design System Documentation
Positioning Text Around Elements With CSS Offset
When it comes to positioning elements on a page, including text, there are many ways to go about it in CSS — the literal position property with corresponding inset-* properties, translate, margin, anchor() (limited browser support at the moment), and so forth. The offset property is another one that belongs in that list.
Styling a meter element with CSS and SVG
How to make a fancy rating component.
Note that this rating is just for displaying a rating, not for inputting a rating.
Design System Architecture - Managing CSS Themes
Design Systems must help scale UI development across organizations and accross user devices. This includes theming capabilities such as light, dark and high contrast themes. This blog post will dive into managing CSS themes by showing strategies for dynamically loading themes and detecting which themes are available and even know when an individual theme has been loaded via events.
Pure CSS Mixin for Displaying Values of Custom Properties
Do you write CSS? Do you use custom properties with calculations? Do you want to preview their values while you’re debugging them? What if you could do so by setting just one additional custom property? Without any JS? In this article, I present a native CSS mixin that will output various values as pseudo-elements.
Container Queries Unleashed
Container queries expand the universe of designs that can be implemented, giving us whole new superpowers. Now that container queries are broadly available, I think it’s time we start exploring this potential. In this post, I’ll share the “killer pattern” I can’t stop using in my work, and explore what’s possible with this new capability.
Revisiting CSS Multi-Column Layout
After 20 years since Andy Clarke first published his book about Multi-Column Layout in CSS, he's back to encourage a fresh look at CSS columns for enhanced readability and design flexibility.
Inverted radius shape with hover effect
Combining the inverted radius shape with modern CSS to create a fancy reveal animation.
CSS nesting: use with caution
Is CSS nesting an exciting new feature or a potential disaster waiting to happen? I note down my worries and prior experience with one of it predecessors: Sass nesting, along with some gotchas native CSS brings with it.
What actually happens when you use a CSS transform
'transform' is a powerful CSS attribute and we're all told we should use it "for performance". But why? I'm going to find out.
JavaScript
JavaScript Temporal is coming
Implementations of the new JavaScript Temporal object are starting to be shipped in experimental releases of browsers. This is big news for web developers because working with dates and times in JavaScript will be hugely simplified and modernized.
Validating React forms easily without third-party libraries
Over the past few years, I've tried out a bunch of libraries that claimed to make React form validation easier. My takeaway? They're annoyingly intrusive and make the code way more complex than it needs to be. In this post, I'm sharing a library-free approach that is stupidly simple and has worked like a charm for my form validations.
Angular Clean Coding Fundamentals
Take a look at these tips for creating clean code. Some of them are applicable across development, and some are specifc to Angular developers.
YouTube.js: A JavaScript client for YouTube's private API, known as InnerTube.
YouTube.js is a JavaScript client for YouTube's private API, known as "InnerTube". It allows you to interact with YouTube programmatically, providing access to videos, comments, live chats, streaming data and more. It works seamlessly across Node.js, Deno, and modern browsers.
React State Management – Intermediate JavaScript Course
React State Management is half of your React app so it is important for React developers to understand. In this full intermediate React tutorial, you will learn how to implement state management using industry best practices.
Simplify Lazy Loading With Intersection Observer’s ScrollMargin
The Intersection Observer API has since December 2023 in Chrome and Edge 120 been shipped with the new options property scrollMargin. However, its convenience seems to be understated.
The use case for the scrollMargin property is using it as an indicator to request data when it is about to be scrolled into view. That’s called lazy loading, the point of which is to not load data that is so far off screen it’s possible the user never scrolls to see it.
Duck Hunter by jslegend
A Duck Hunt-like game made in JavaScript + KAPLAY.
To learn how to make games in JavaScript, check out the author's tutorials:
What the fuck is a closure?
Closures are confusing because they are an “invisible” concept.
By the time most people approach closures, they have already used them unknowingly many times — and it is likely that this is true for yourself, too. So learning closures is less about understanding a new concept and more about recognizing something you have already been doing for a while.
You have a closure when a function accesses variables defined outside of it.
Miscellaneous
How to Setup a CI/CD Pipeline with GitHub Actions and AWS
In this article, we'll learn how to set up a CI/CD pipeline with GitHub Actions and AWS. I've divided the guide into three parts to help you work through it:
First, we'll cover some important terminology so you're not lost in a bunch of big buzzwords.
Second, we'll set up continuous integration so we can automatically run builds and tests.
And finally, we'll set up continuous delivery so we can automatically deploy our code to AWS.
Why Some Engineers Become Rockstars After 5 Years and Some Stay the Same After 10
In my 13 years in this industry, I have met excellent Engineers who despite their profound Engineering capacity have been in the industry for a shorter time period than you would expect. I have also met many who have been in the industry for a protracted time, yet can not do many of the things you would expect of someone of their caliber. In the beginning, this used to be a surprising phenomenon, but after spending years with both classes of Engineers, I have seen what separates them.
Engineers who go on to become rockstars in relatively short period, approach their career with a huge goal in mind and a long-term view, to acquire very broad expertise in the profession. One consequence of this — they invest their learning time in cornerstone, mainstay, and standardized technologies that pay remarkable dividends in the long-term. Because of this approach, their Engineering capacity compounds profoundly over time.
For engineers who stay almost the same after 10 years, they are often the types chasing every new shiny technology without asking if it pays them in the long term. Not to totally condemn this practice, but these are the ones who would rather learn the newest javascript framework on the web, than master key technologies like operating system, security, system architecture, and more.
Habits To Start Now To Become a Healthy Senior Coder
Everyone is getting older. A senior C++ developer shares the lessons she has learned staying vital in an ever-changing industry.