Frontend

Diving deep into three attributes that bring clarity to elements in assistive technologies.

MapLibre is a community-governed collection of open source mapping libraries

Key principles using modern CSS, fluid type, fluid space, flexible layout and progressive enhancement will help you to build better front-ends that work for everyone.

Last year, I wrote an article sharing Stephen Shaw’s awesome trick for simple, autogrowing textarea elements. It uses a wrapper element, CSS grid, and a sprinkling of vanilla JS, and it works wonderfully! But… if your textarea has text in it when the page loads, it doesn’t work. .autogrow { display: grid; } .autogrow::after { content: attr(data-replicated-value) " "; white-space: pre-wrap; visibility: hidden; } .autogrow textarea { resize: none; } .

An open standard for data-driven blocks

Jovo is the most popular development framework for voice, including platforms like Alexa, Google Assistant, mobile apps, and Raspberry Pi. Learn more here.

An open-source React component library for building high-quality, accessible design systems and web apps.

Say you’re on a navigation element. You might do something like this in HTML: And when styling it, you probably want to strip out the bullet points in CSS: Then you move right along with your merry day. The only problem is that wipes out the semantics of the list in VoiceOver in WebKit browsers. […]

The New Simple and Lighter CSS Reset

'Can I Include' tool to help determine if one HTML tag can be included in another HTML tag

A foundational overview of how to build a responsive, adaptive, and accessible, multiselect component for sort and filter user experiences.

Animating elements with CSS can either be quite easy or quite difficult depending on what you are trying to do. Changing the background color of a button

A new library for animation libraries on the web. Built on the Web Animations API for a tiny bundlesize and great performance.

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

Collection of Accessible React UI Components using TailwindCSS.

Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.

Tailwind CSS Components plugin - daisyui tailwind component library

Skruv - No-dependency, no-build, small JS framework

React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience

Catalyst is a set of patterns and techniques for developing components within a complex application.

Quick and simple tool to stub out the link tag needed to use an emoji as a favicon

Modern JavaScript Tutorial: simple, but detailed explanations with examples and tasks, including: closures, document and events, object oriented programming and more.

Highway helps you manage your page transitions.

Front-end framework with a built-in dark mode, designed for rapidly building beautiful dashboards and product pages.

Earlier this year I wrote a bit about autogrowing textareas and inputs. The idea was to make a more like a so it expands in

Friendly tutorials for developers. Focus on React, Gatsby, CSS, and animation.