morphicons.com

Mon, 24 Aug 2026 00:00:00 GMT

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).

The Rules of Margin Collapse

Sat, 25 Jul 2026 00:00:00 GMT

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

How to control React context from Storybook toolbar

Mon, 13 Jul 2026 00:00:00 GMT

You can control global react variables from Storybook toolbar via a custom control.

useSWR enhanced to prevent error message flashing on retry

Mon, 13 Jul 2026 00:00:00 GMT

How to prevent with useSWR error messages flashing up on retry.

specification.website

Wed, 17 Jun 2026 00:00:00 GMT

A platform-agnostic specification of all the technical details that matter for a website, from to /.well-known/security.txt to WCAG contrast. Written for humans and agents. </article> <article> <h1>How I sped up 11ty build time on Netlify from 5 min to 13s</h1> <p>Fri, 24 Apr 2026 00:00:00 GMT</p> A must-have for Eleventy hosted on Netlify: How to setup Build Cache! </article> <article> <h1>Sequence Diagram Tool: swimlanes.io</h1> <p>Fri, 19 Nov 2021 00:00:00 GMT</p> Easily create perfect sequence diagrams in a markdown-like syntax. </article> <article> <h1>Appy SVG filters to any HTML Element</h1> <p>Thu, 06 Aug 2020 00:00:00 GMT</p> I just learned: you can apply SVG filters to anly HTML Elements outside the SVG via CSS </article> <article> <h1>content-visibility: auto;</h1> <p>Thu, 06 Aug 2020 00:00:00 GMT</p> content-visibility: the new CSS property that boosts rendering performance </article> <article> <h1>1-line layouts</h1> <p>Sun, 19 Jul 2020 00:00:00 GMT</p> Una shows 10 Modern CSS layout and sizing techniques that highlight just how robust and impactful a single-line of styling code can be. </article> <article> <h1>Icônes - universal UI icon explorer</h1> <p>Sun, 19 Jul 2020 00:00:00 GMT</p> 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! </article> <article> <h1>keyframes.app</h1> <p>Fri, 17 Jul 2020 00:00:00 GMT</p> A tool to generate animations, shadows and other CSS visually. </article> <article> <h1>Don't disable form controls</h1> <p>Tue, 14 Jul 2020 00:00:00 GMT</p> It’s OK to disable Buttons, but don’t disable submits </article> <article> <h1>CUBE CSS</h1> <p>Mon, 06 Jul 2020 00:00:00 GMT</p> A CSS methodology by Andy Bell oriented towards simplicity and consistency with a heavy dosage of pragmatism. </article> <article> <h1>How to Delete ALL node_modules folders on your machine</h1> <p>Thu, 18 Jun 2020 00:00:00 GMT</p> </article> <article> <h1>Structure a Vue.js app using Atomic Design and TailwindCSS</h1> <p>Tue, 16 Jun 2020 00:00:00 GMT</p> Alba Silvente on VueDose explains what the Atomic Design methodology is about and how we can apply it to our Vue.js project. </article> <article> <h1>A first look at CSS aspect-ratio</h1> <p>Sat, 06 Jun 2020 00:00:00 GMT</p> Chris Coyer hought he’d take a look at a brand new property that affects how a box is sized. </article> <article> <h1>The expanding Gamut of Color on the Web</h1> <p>Sat, 06 Jun 2020 00:00:00 GMT</p> All you need to know about the new CSS colors formats: lab, lch and display-p3. </article> <article> <h1>CSS masonry with flexbox, :nth-child(), and order</h1> <p>Fri, 22 May 2020 00:00:00 GMT</p> A CSS only masonry solution by Tobias Ahlin. </article> <article> <h1>SVG Path Visualizer</h1> <p>Tue, 19 May 2020 00:00:00 GMT</p> 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 </article> <article> <h1>ScrollOut.js - a tiny js library for scroll-based interactions</h1> <p>Sun, 26 Apr 2020 00:00:00 GMT</p> ScrollOut detects changes in scroll for reveal, parallax, and CSS Variable effects! </article> <article> <h1>How to preserve Aspect Ratio of Images with Tailwind CSS</h1> <p>Sat, 04 Apr 2020 00:00:00 GMT</p> </article> <article> <h1>Flexbox Magic: Responsive Sign-Up Form</h1> <p>Sat, 04 Apr 2020 00:00:00 GMT</p> A cool trick by Adam Argyle to create a responsive signup form with flexbox in very few lines of code. </article> <article> <h1>What to use instead of Number Inputs</h1> <p>Sat, 04 Apr 2020 00:00:00 GMT</p> 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]*'> </article> <article> <h1>Headless CMS options compared</h1> <p>Thu, 02 Apr 2020 00:00:00 GMT</p> A Comparison of Contentful, Storyblok, Sanity.io, Forestry, DatoCMS, Prismic, NetlifyCMS, Strati, Headless Wordpress and TinaCMS. </article> <article> <h1>How to Create a “Skip to Content” Link</h1> <p>Tue, 24 Mar 2020 00:00:00 GMT</p> 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. </article> <article> <h1>Why you should not use target='_blank'</h1> <p>Mon, 17 Feb 2020 00:00:00 GMT</p> 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. </article> <article> <h1>HTMHell</h1> <p>Fri, 24 Jan 2020 00:00:00 GMT</p> A collection of bad practices in HTML, copied from real websites. By Manuel Matuzovic </article> <article> <h1>The CSS Cascade</h1> <p>Fri, 24 Jan 2020 00:00:00 GMT</p> 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. </article> <article> <h1>Front-End Performance Checklist 2020</h1> <p>Mon, 20 Jan 2020 00:00:00 GMT</p> 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. </article> <article> <h1>Why You Should Choose HTML5 'article' Over 'section'</h1> <p>Fri, 17 Jan 2020 00:00:00 GMT</p> 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' 🤯 </article> <article> <h1>Convert Video to .gif with Gifski</h1> <p>Thu, 16 Jan 2020 00:00:00 GMT</p> Convert videos to high-quality GIFs on your Mac </article> <article> <h1>unDraw: Free Vector Illustrations</h1> <p>Thu, 16 Jan 2020 00:00:00 GMT</p> Great set of Open-source illustrations available as svg </article> <article> <h1>Change the Playback Speed of any Online Video</h1> <p>Tue, 07 Jan 2020 00:00:00 GMT</p> For every HTML Video element, you can change the playback speed, with a simple console input. </article> <article> <h1>Highlights from 36c3</h1> <p>Fri, 03 Jan 2020 00:00:00 GMT</p> Links to highlights from this year's Chaos Communication Congress including talks from David Kriesel and Moxie Marlinspike </article> <article> <h1>CSS 'all:' shorthand</h1> <p>Sun, 22 Dec 2019 00:00:00 GMT</p> The all shorthand CSS property resets all of an element's properties. It can set properties to their initial or inherited values, or to the values specified in another stylesheet origin. </article> <article> <h1>Quoting in HTML - Quotations, Citations, and Blockquotes</h1> <p>Tue, 10 Dec 2019 00:00:00 GMT</p> There are three major HTML elements involved in quotations: <blockquote>, <q>, <cite>. Let’s take a look. </article> <article> <h1>How to Section your HTML</h1> <p>Tue, 18 Jun 2019 00:00:00 GMT</p> 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. </article> <article> <h1>:focus-visible CSS pseudo-class</h1> <p>Sat, 25 May 2019 00:00:00 GMT</p> The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class, and the UA determines via heuristics that the focus should be specially indicated on the element (typically via a “focus ring”). </article> <article> <h1>How to style Browser Scrollbars</h1> <p>Mon, 20 May 2019 00:00:00 GMT</p> Scrollbars still look like 1995 on Windows, so here is an example how to style browser scrollbars (in use on this website). </article> <article> <h1>CSS can do that?</h1> <p>Fri, 17 May 2019 00:00:00 GMT</p> A list of amazing things that CSS can do nowadays! </article> <article> <h1>How to inherit scoped styles in Vue to child components</h1> <p>Mon, 13 May 2019 00:00:00 GMT</p> I just learned that elements in nested components are stylable from the parent while still having scoped css with the `/deep/` selector. </article> <article> <h1>How to define canonical URL in Nuxt.js</h1> <p>Thu, 09 May 2019 00:00:00 GMT</p> How to set rel=canonical to primary domain in Nuxt.js (and let search engines know to ignore duplicate content on staging server): </article> <article> <h1>Sara Soueidan on Building Accessible Interfaces at SmashingConf 2019</h1> <p>Sat, 20 Apr 2019 00:00:00 GMT</p> 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. </article> <article> <h1>Build a URL shortener with Netlify</h1> <p>Fri, 07 Dec 2018 00:00:00 GMT</p> Kent C. Dodds shows how to use Netlify to use simple URL shortener. </article> <article> <h1>Advanced CSS Shadow Generator</h1> </article> <article> <h1>Alt-texts - The Ultimate Guide</h1> 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. </article> <article> <h1>tiny-helpers.dev</h1> A collection of free single-purpose online tools for web developers... </article> </main></body></html>

swjh

morphicons.com

The Rules of Margin Collapse

How to control React context from Storybook toolbar

useSWR enhanced to prevent error message flashing on retry

specification.website