Editor's Pick
React Aria Components Reach Release Candidate Stage
In this release, we’re promoting React Aria Components from Beta to RC, introducing built-in support for form validation, adding a new Toolbar component, improving our css bundle size with Lightning CSS, and fixing plenty of bugs.
Accessibility
Front end devs really don't understand accessibility
Yesterday, I discovered that quite a few of my articles have made their way onto Hacker News. And the conversations around them are actually, generally speaking, pretty good for what I generally expect from the site. Except for an article I published in 2019 on how building accessible websites is your job, actually.
It’s apparent from reading the comments that a lot of folks who do this simply don’t know anything about accessibility.
against - Combinations of named colors based on their accessibility ratio
Creates combinations of named colors based on their accessibility ratio.
Creating Accessible UI Animations
Animation and accessibility are often seen as two separate powers at odds with one another. How is it possible to strike a balance between elements that move and the possible negative effects they expose to users who are sensitive to motion? Oriana García explains how her team at Mercado Libre tackled the challenge by creating guiding principles for applying animation to user interfaces and incorporating them into the team’s design system.
CSS
CSS Border-Radius Can Do That?
How to create very cool effects with a rarely used feature. TL/DR: When you use eight values specifying border-radius in CSS, you can create organic looking shapes.
We built a little tool, that helps you create your very own organic shape: Fancy Border Radius Generator.
Writing CSS In 2023: Is It Any Different Than A Few Years Ago?
CSS is evolving faster than ever. With all of the new features that are now available — and forthcoming — since we got Flexbox and Grid years ago, the way we write CSS is evolving, too. In this article, Geoff Graham shares which features have had the most influence on his current approaches to CSS, as well as those that have not (at least yet).
CSS Blend Modes
What are CSS blend modes. How to use background-blend-mode and mix-blend-mode. Interactive examples.
Maizzle - Quickly build HTML emails with Tailwind CSS
Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS and advanced, email-specific post-processing.
Can I email… Support tables for HTML and CSS in emails
Support tables for HTML and CSS in emails - like caniuse.com but for email clients .
Getting started with CSS container queries
CSS container queries are a powerful new tool for our CSS layout toolbox. In this post we'll dive into the practicalities of building a layout with container queries.
HTML
HTML Web Components
When you try building web components the same way you build React components, it’s easy to get frustrated and give up because web components don’t work like React components.
The unique power of web components (in the browser) is that they can render before JavaScript. React components cannot do this — full stop.
This feature of web components encourages a design of composability. Rather than an empty “shell component” that takes data and (using JavaScript exclusively) renders the entirety of its contents, web components encourage an approach of composing core content with HTML and then wrapping it in a custom element that enhances its contents with additional functionality.
SVG viewBox - A creative coding lesson. How the SVG ViewBox works
On a web page, we can render different types of images. The most common are .jpg, .png, .webp and .svg. SVG is unique because it is a vector image. While the others are raster. A raster image is pixel based. A vector is math equation based. One advantage of vectors is they never have jagged edges. Even when rendered larger than the original asset.
Proposal: an HTML element for spoilers
While browsing the WICG discussion forms, I stumbled upon a proposal for a standardized <spoiler> element in HTML5. I made two comments, and stopped myself before writing a third; this called for a blog post. I think HTML should have a spoiler element.
HTML First
HTML First is a set of principles that aims to make building web software easier, faster, more inclusive, and more maintainable by...
- Leveraging the default capabilities of modern web browsers.
- Leveraging the extreme simplicity of HTML's attribute syntax.
- Leveraging the web's ViewSource affordance.
Elix - Component Kitchen
Elix is an open collection of high-quality web components for common user interface patterns such as lists, menus, dialogs, carousels, and so on. The modular nature of web components let you easily incorporate them into your web apps, and their standard definition ensures good results across all mainstream browsers.
HTML web components
Web components have been around for quite a while, but it feels like they’re having a bit of a moment right now.
It turns out that the best selling point for web components was “wait and see.” For everyone who didn’t see the benefit of web components over being locked into a specific framework, time is proving to be a great teacher.
It’s not just that web components are portable. They’re also web standards, which means they’ll be around as long as web browsers. No framework can make that claim. As Jake Lazaroff puts it, web components will outlive your JavaScript framework.
At this point React is legacy technology, like Angular. Lots of people are still using it, but nobody can quite remember why. The decision-makers in organisations who chose to build everything with React have long since left. People starting new projects who still decide to build on React are doing it largely out of habit.
JavaScript
React Aria Components Reach Release Candidate Stage
In this release, we’re promoting React Aria Components from Beta to RC, introducing built-in support for form validation, adding a new Toolbar component, improving our css bundle size with Lightning CSS, and fixing plenty of bugs.
Using JSX on the server as a template engine
The React/Next.js ecosystem is spinning out of control in terms of magic and complexity. The stack has failed to stay focused and simple, and it’s my belief that software stacks that are too complex and magical must eventually fail, because as sensibilities around software design change they will be unable to adapt to those changes without cannibalizing their existing userbase.
So while React/Next.js may be relegated to the enterprise and legacy systems in a few years, they completely transformed front-end development and created ripple effects in many other technologies. One of many great ideas stemming from this stack is JSX. I think JSX has a chance to stay relevant and useful beyond React/Next.
One of it’s use-cases is for server-side templating. I’ve been using JSX as a template engine to replace template engines like EJS and Handlebars, and more than once people were surprised this was possible without bulky frameworks such as Next.js.
Total guide to lazy loading with Angular @defer
Learn everything about the lazy loading of standalone components with Angular @defer block including best practices, deep dive on all interactions and gotchas including a live demo.
React Minecraft
React Minecraft is a project that allows you to create Minecraft worlds using React components. Just like React-DOM and React-Native, React Minecraft uses the React.js Framework and JSX to craft custom builds in Minecraft. With Minecraft Blocks.
Beak.js - Custom conversational assistants for your React app.
Beak.js lets you integrate custom conversational assistants into your React applications.
Key Features:
- Built-in UI - Comes with a beautiful, fully customizable chat window.
- Easy to Use - Integrates with your existing React app in just a few lines of code.
- Open Source - Beak.js is open source and free to use.
UX
The Decline of Usability: Revisited
Three years ago, I wrote a rant about the problems of our current UI paradigm. The complaints I voiced were hardly new or unique, neither was the text what I'd consider my best writing. It was, honestly, mostly a way to blow off steam. It seems I struck a nerve, though, because it's proven to be one of the most popular texts I've published here. For some time, I've thought about writing a follow-up, and a recent resurgence in the text's popularity prompted me to finally do so.