Links

Reflections on the implications of AI on using websites.

Yes, the underlying model must have three states, but one is always irrelevant to the actual user goal.

Easing out on interactive elements feels unrealistic and is not satisfying at all.

Tools, Tips, and Tricks to Enhance your Dev Skills with the CSS View Transition API!

You should probably set a regional subtag, e.g. `lang='en-UK'`

History of designing finger-friendly interactions

Morph any SVG icon into any other with 6.5kb js gzipped. Morphicons solves the optimal similarity between two shapes in closed form (2D Procrustes).

In CSS, adjacent margins can sometimes overlap. This is known as "margin collapse", and it has a reputation for being quite dastardly.

A platform-agnostic specification of all the technical details that matter for a website, from <title> to /.well-known/security.txt to WCAG contrast. Written for humans and agents.

Easily create perfect sequence diagrams in a markdown-like syntax.

content-visibility: the new CSS property that boosts rendering performance

Una shows 10 Modern CSS layout and sizing techniques that highlight just how robust and impactful a single-line of styling code can be.

Dozens of UI icon sets to quickly explore, search and download. Including Icon sets from Material Design, Font Awesome, CSS.gg, And Design, Carbon, Bootstrap and many more!

A tool to generate animations, shadows and other CSS visually.

It's OK to disable Buttons, but don't disable submits

A CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism.

What the Atomic Design methodology is about and how we can apply it to our Vue.js project.

A look at a brand new property that affects how a box is sized.

All you need to know about the new CSS colors formats: lab, lch and display-p3.

A CSS only masonry solution by Tobias Ahlin.

This visualizer helps making sense of all the letters and numbers in an svg.

You might reach for <input type='number'> when you're trying to collect a number in a form. But it's got all sorts of issues. Solution: <input type='text' inputmode='numeric' pattern='[0-9]*'>

A Comparison of Contentful, Storyblok, Sanity.io, Forestry, DatoCMS, Prismic, NetlifyCMS, Strati, Headless Wordpress and TinaCMS.

Skip links are little internal navigation links that help users move around a page. It's possible you've never actually seen one before because they're often hidden from view and used as an accessibility enhancement that lets keyboard users and screen readers jump from the top of the page to the content without have to go through other elements on the page first.

TL;DR: Regardless of what accessibility conformance level you target, do not arbitrarily open links in a new window or tab. If you are required to do so anyway, inform users in text.

The CSS Cascade is one of the most powerful parts of CSS. But it can also be very frustrating, if not well understood. Anyone who's worked on a large enough website has complained 'Why won't this CSS property work?!' And we've all been tempted to throw an !important to strong-arm things into place. Amazing interactive Article by Amelia Wattenberger.

A collection of bad practices in HTML, copied from real websites. By Manuel Matuzović

Web performance is a tricky beast, isn't it? How do we actually know where we stand in terms of performance, and what our performance bottlenecks exactly are? A checklist by smashingmagazine.

Browsers' visual display of headings nested inside <section> elements makes it look as if they are assigning a logical hierarchy to those headings. However, this is purely visual and is not communicated to assistive technologies. TLDR: don't use 'section'

Convert videos to high-quality GIFs on your Mac

Great set of Open-source illustrations available as svg

There are three major HTML elements involved in quotations: <blockquote>, <q>, <cite>. Let's take a look.

The sectioning elements in HTML5 are <nav>, <aside>, <article>, and <section>. <body> is also kind of a sectioning element since all content lying inside of it is part of the default document section.

A list of amazing things that CSS can do nowadays!

Building and refactoring common UI components with accessibility in mind. From this sweet series of mini component-level case studies, you will learn how to think, and code, accessibly.

Kent C. Dodds shows how to use Netlify to use simple URL shortener.

This post contains everything you need to know about alt-texts! When to use them and how to perfectly craft them. By me, Daniel, a web developer with vision impairment who use a screen reader in my day-to-day life.

A collection of free single-purpose online tools for web developers...