morphicons.com
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).
Links
The Rules of Margin Collapse
In CSS, adjacent margins can sometimes overlap. This is known as “margin collapse”, and it has a reputation for being quite dastardly.
specification.website
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.
Sequence Diagram Tool: swimlanes.io
Easily create perfect sequence diagrams in a markdown-like syntax.
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.
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!
CUBE CSS
A CSS methodology by Andy Bell oriented towards simplicity and consistency with a heavy dosage of pragmatism.
Structure a Vue.js app using Atomic Design and TailwindCSS
Alba Silvente on VueDose explains what the Atomic Design methodology is about and how we can apply it to our Vue.js project.
A first look at CSS aspect-ratio
Chris Coyer hought he’d take a look at a brand new property that affects how a box is sized.
The expanding Gamut of Color on the Web
All you need to know about the new CSS colors formats: lab, lch and display-p3.
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]*'>
Headless CMS options compared
A Comparison of Contentful, Storyblok, Sanity.io, Forestry, DatoCMS, Prismic, NetlifyCMS, Strati, Headless Wordpress and TinaCMS.
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.
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.
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.
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.
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' 🤯
Quoting in HTML - Quotations, Citations, and Blockquotes
There are three major HTML elements involved in quotations: <blockquote>, <q>, <cite>. Let’s take a look.
How to Section your 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.
Sara Soueidan on Building Accessible Interfaces at SmashingConf 2019
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.
Build a URL shortener with Netlify
Kent C. Dodds shows how to use Netlify to use simple URL shortener.
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 me, Daniel, a web developer with vision impairment who use a screen reader in my day-to-day life.