Useful Links

Icônes - universal UI icon explorer

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!

  • ui
  • tools

1-line layouts

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

  • css

keyframes.app

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

  • tools
  • css
  • animation

Accessibly Disable Forms

If you have a form that gets submitted using a JavaScript Ajax call (via an API or something) instead of a page reload, you might want to disable the submit button so that the user doesn’t try to resubmit the form while you’re waiting for the API to return a response.

CUBE CSS

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

  • css

SVG Path Visualizer

This visualizer helps makeing sense of all the letters and numbers in an svg. Love it! M140 20C73 20 20 74 20 140c0 135 136 170 228 303 88-132 229-173 229-303 0-66-54-120-120-120-48 0-90 28-109 69-19-41-60-69-108-69z

What to use instead of Number Inputs

You might reach for <input type="number> when you’re, you know, trying to collect a number in a form. But it’s got all sorts of issues. For one, sometimes what you want kinda looks like a number, but isn’t one (like how a credit card number has spaces), because it’s really just a string of numbers. Even more importantly, there are a variety of screen reader problems. Solution: <input type="text" inputmode="numeric" pattern="[0-9]*">

  • html
  • a11y

Headless CMS options compared

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

  • cms

How to Create a “Skip to Content” Link

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.

  • a11y

Why you should not use target="_blank"

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.

  • html
  • a11y

The CSS Cascade

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.

  • css

HTMHell

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

  • a11y
  • html

Front-End Performance Checklist 2020

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.

  • performance

Why You Should Choose HTML5 'article' Over 'section'

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' 🤯

  • til
  • html
  • a11y

Alt-texts: The Ultimate Guide

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

  • html
  • a11y

How to section HTML

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.

  • a11y
  • html

tiny-helpers.dev

A collection of useful online web development tools by Stefan Judis.

  • tools

Sara Soueidan on Building Accessible Interfaces

In this session, Sara will be building and refactoring common UI components, and share a couple of techniques she often uses to build with accessibility in mind. Even though she will be building only as many patterns as the time allows, you’ll leave with many small but important and impactful strategies that you can apply to many other UI components, as well as to your design process and coding. From this sweet series of mini component-level case studies, you will learn how to think, and code, accessibly.

  • a11y