Editor's Pick
VoidZero | Next Generation Tooling for the Web
We are building the next generation of JavaScript tooling.
We are building a unified high-performance toolchain for JavaScript: including parser, transformer, resolver, linter, formatter, minifier, bundler, test runner, and meta framework support. Our mission is to make the next generation of JavaScript developers more productive than ever before.
Accessibility
Your Accessibility Questions Answered by a Blind Person
During a recent UsableNet webinar, attendees had the unique opportunity to witness a blind screen reader user navigating a website in real time.
This interactive session sparked insightful questions about screen reader experiences and best practices for digital accessibility. In this blog, I'll share my responses to some of the most common queries from the perspective of a full-time screen reader user. These answers reflect my experiences and aim to help developers, designers, and accessibility advocates improve their digital platforms.
CSS
How I build a button component
A button is arguably the most likely component to find itself in your codebase so I’m going to show you how I approach building one.
View Progress Timeline: Ranges and Animation Progress Visualizer
CSS scroll-driven animations visualizer.
Making Orbit Animations with CSS Custom Properties
Let’s animate some CSS custom properties. This is a powerful way to approach CSS animations that would otherwise be tedious or impractical to implement.
Reset with CSS unset
Over the past couple of years, I have frequently utilized the unset keyword to reset the CSS properties. I noticed I'm using it intuitively to reset a property. But what is intuitive for me might not be intuitive for you. Let me clarify.
Benchmarking the performance of CSS @property
When starting to use a new CSS feature it's important to understand its impact on the performance of your websites, whether positive or negative. With @property now in Baseline this post explores its performance impact, and things you can do to help prevent negative impact.
HTML
What’s the Difference Between HTML’s Dialog Element and Popovers?
One of the most recent additions to web standards is the Popover API, which appears somewhat similar to the HTMLDialogElement API. In certain instances, the distinction between these two can be rather unclear, making it confusing for developers to choose the right one for a given task.
JavaScript
Surreal - Tiny jQuery alternative for plain Javascript with inline Locality of Behavior
You may appreciate Surreal if:
- You want to stay as close as possible to Vanilla JS.
- Hate typing document.querySelector over.. and over..
- Hate typing addEventListener over.. and over..
- Really wish document.querySelectorAll had Array functions..
- Really wish this would work in any inline <script> tag
- Enjoyed using jQuery selector syntax.
- Animations, timelines, tweens with no extra libraries.
- Only 320 lines. No build step. No dependencies.
- Pairs well with htmx
- Want fewer layers, less complexity. Are aware of the cargo cult.
React+TypeScript Cheatsheets
Cheatsheets for experienced React developers getting started with TypeScript.
Announcing VoidZero - Next Generation Toolchain for JavaScript
Vue.js and Vite creator Evan You has founded VoidZero Inc., a company dedicated to building an open-source, high-performance, and unified development toolchain for the JavaScript ecosystem. They have raised $4.6 million in seed funding, led by Accel.
VoidZero | Next Generation Tooling for the Web
We are building the next generation of JavaScript tooling.
We are building a unified high-performance toolchain for JavaScript: including parser, transformer, resolver, linter, formatter, minifier, bundler, test runner, and meta framework support. Our mission is to make the next generation of JavaScript developers more productive than ever before.
UX
UX Researcher Salary Report 2024
Our 2024 State of User Research report uncovered considerable anxiety among UX Research specialists about the current state of the job market. Anecdotally, we’ve also heard that hiring timelines for UX specialists seem long right now, with companies seemingly more “picky” about candidates.
Offline UX Patterns
Understanding the offline behavior of our app is vital to becoming a productive contributor to the Expensify codebase. Our mission is to support our users in every possible environment, and often our app is used in places where a stable internet connection is not guaranteed.
The most important concept to keep in mind while reading this document is that we want to allow users to do as much as possible when offline. At first, this might seem impossible because almost everything the user can touch in our app is related to an API request. However, in many cases, we can save that API request and assume it will succeed when the user is back online. We then allow the user to proceed as if their request already succeeded. We call this an optimistic response. Here, we use the word optimistic to indicate that we're confident the request will succeed when the user is online, and we know what that successful response will look like.
Miscellaneous
Building a robust frontend using progressive enhancement
For users to experience a quality service it must be built in a robust way.
Progressive enhancement is a way of building websites and applications based on the idea that you should make your page work with HTML first.
Only after this can you add anything else like Cascading Style Sheets (CSS) and JavaScript.
Fundamentals of Frontend Architecture
Fundamentals of Frontend Architecture a free video course with everything that I know about building frontend applications at scale. Whether you're an aspiring architect or tech lead, or just want to know how to build better frontends that last longer, this is the course for you.
Getting Started with AWS for Frontend Developers
Getting started with AWS can seem overwhelming. This guide aims to give anyone building web applications the overview to understand the building blocks of a web application running in AWS including S3, CloudFront, Lambda, API Gateway and DynamoDB.
US Pay Heatmap for Engineers
Explore the interactive heatmap of total compensation pay ranges across the United States