Remix Icon - Open source icon library
I love how easy it is to use these icons: you can copy and paste the SVG or even get it encoded as a data URL.
Tags: library
159
Wednesday, September 21st, 2022
Tuesday, August 30th, 2022
ADL Social Pattern Library | Anti hate by design
A collection of design patterns and principles for mitigating the presence and spread of online hate and harassment in social platforms.
Tuesday, June 7th, 2022
Patterns | APG | WAI | W3C
This is a terrific resource! A pattern library of interactive components: tabs, switches, dialogs, carousels …all the usual suspects.
Each component has an example implementation along with advice and a checklist for ensuring its accessible.
It’s so great to have these all gathered together in one place!
Wednesday, November 17th, 2021
htmx - high power tools for html
I really like the progressive enhancement approach that this little library uses—it’s basically the Hijax approach I was talking about back in the days of Bulletproof Ajax but all wrapped up into a neat package that you can use entirely via HTML attributes.
Thursday, April 1st, 2021
Library: Accessibility resources, guides, communities, and more
A very comprehensive directory of accessibility resources.
Monday, November 9th, 2020
Bookshop
Back at the start of the (first) lockdown, I wrote about using my website as an outlet:
While you’re stuck inside, your website is not just a place you can go to, it’s a place you can control, a place you can maintain, a place you can tidy up, a place you can expand. Most of all, it’s a place you can lose yourself in, even if it’s just for a little while.
Last week was eventful and stressful. For everyone. I found myself once again taking refuge in my website, tinkering with its inner workings in the way that someone else would potter about in their shed or take to their garage to strip down the engine of some automotive device.
Colly drew my attention to Bookshop.org, newly launched in the UK. It’s an umbrella website for independent bookshops to sell through. It’s also got an affiliate scheme, much like Amazon. I set up a Bookshop page for myself.
I’ve been tracking the books I’m reading for the past three years here on my own website. I set about reproducing that list on Bookshop.
It was exactly the kind of not-exactly-mindless but definitely-not-challenging task that was perfect for the state of my brain last week. Search for a book; find the ISBN number; paste that number into a form. It’s the kind of task that a real programmer would immediately set about automating but one that I embraced as a kind of menial task to keep me occupied.
I wasn’t able to get a one-to-one match between the list on my site and my reading list on Bookshop. Some titles aren’t available in the online catalogue. For example, the book I’m reading right now—A Paradise Built in Hell by Rebecca Solnit—is nowhere to be found, which seems like an odd omission.
But most of the books I’ve read are there on Bookshop.org, complete with pretty book covers. Then I decided to reverse the process of my menial task. I took all of the ISBN numbers from Bookshop and add them as machine tags to my reading notes here on my own website. Book cover images on Bookshop have predictable URLs that use the ISBN number (well, technically the EAN number, or ISBN-13, but let’s not go down a 927 rabbit hole here). So now I’m using that metadata to pull in images from Bookshop.org to illustrate my reading notes here on adactio.com.
I’m linking to the corresponding book on Bookshop.org using this URL structure:
https://uk.bookshop.org/a/{{ affiliate code }}/{{ ISBN number }}
I realised that I could also link to the corresponding entry on Open Library using this URL structure:
https://openlibrary.org/isbn/{{ ISBN number }}
Here, for example, is my note for The Raven Tower by Ann Leckie. That entry has a tag:
book:ean=9780356506999
With that information I can illustrate my note with this image:
https://images-eu.bookshop.org/product-images/images/9780356506999.jpg
I’m linking off to this URL on Bookshop.org:
https://uk.bookshop.org/a/980/9780356506999
And this URL on Open Library:
https://openlibrary.org/isbn/9780356506999
The end result is that my reading list now has more links and pretty pictures.
Oh, I also set up a couple of shorter lists on Bookshop.org:
The books listed in those are drawn from my end of the year round-ups when I try to pick one favourite non-fiction book and one favourite work of fiction (almost always speculative fiction). The books in those two lists are the ones that get two hearty thumbs up from me. If you click through to buy one of them, the price might not be as cheap as on Amazon, but you’ll be supporting an independent bookshop.
Wednesday, October 21st, 2020
Van11y: Accessibility and Vanilla JavaScript - ES2015
Van11y (for Vanilla-Accessibility) is a collection of accessible scripts for rich interfaces elements, built using progressive enhancement and customisable.
Saturday, October 3rd, 2020
SydCSS 7th Birthday with Ethan Marcotte - YouTube
A great talk by Ethan called The Design Systems Between Us.
Saturday, July 18th, 2020
An Introduction To Stimulus.js — Smashing Magazine
An intro to Stimulus, the lightweight JavaScript library from Basecamp that takes a progressive enhancement approach, as seen with HEY.
One aspect I really like about the approach Stimulus encourages, is I can focus on sending HTML down the wire to my users, which is then jazzed up a little with JavaScript.
I’ve always been a fan of using the first few milliseconds of a user’s attention getting what I have to share with them — in front of them. Then worrying setting up the interaction layer while the user can start processing what they’re seeing.
Furthermore, if the JavaScript were to fail for whatever reason, the user can still see the content and interact with it without JavaScript.
Monday, June 1st, 2020
Global and Component Style Settings with CSS Variables — Sara Soueidan
Sara shares how she programmes with custom properties in CSS. It sounds like her sensible approach aligns quite nicely with Andy’s CUBE CSS methodology.
Oh, and she’s using Fractal to organise her components:
I’ve been using Fractal for a couple of years now. I chose it over other pattern library tools because it fit my needs perfectly — I wanted a tool that was unopinionated and flexible enough to allow me to set up and structure my project the way I wanted to. Fractal fit the description perfectly because it is agnostic as to the way I develop or the tools I use.
Monday, December 2nd, 2019
Design Questions Library | d.school public library
This site is not meant to be exhaustive, but rather a useful guide—our FAQ for design understanding. We hope it will inspire discussion, some questioning, a little soul searching, and ideally, a bit of intellectual support for your everyday endeavors.
The Design Questions Library goes nicely with the Library of Ambiguity.
Thursday, August 22nd, 2019
AccentDesign/Fractal-Atomic: An awesome starter point for your Fractal UI component library
If you want to use Brad’s Atomic Design naming convention—atoms, molecules, etc.—and you like using Fractal for making your components, this starter kit is just for you:
Keep what you need, delete what you don’t and add whatever you like on top of whats already there.
Thursday, May 2nd, 2019
AMP as your web framework – The AMP Blog
The bait’n’switch is laid bare. First, AMP is positioned as a separate format. Then, only AMP pages are allowed ranking in the top stories carousel. Now, let’s pretend none of that ever happened and act as though AMP is just another framework. Oh, and those separate AMP pages that you made? Turns out that was all just “transitional” and you’re supposed to make your entire site in AMP now.
I would genuinely love to know how the Polymer team at Google feel about this pivot. Everything claimed in this blog post about AMP is actually true of Polymer (and other libraries of web components that don’t have the luxury of bribing developers with SEO ranking).
Some alternative facts from the introduction:
AMP isn’t another “channel” or “format” that’s somehow not the web.
Weird …because that’s exactly how it was sold to us (as a direct competitor to similar offerings from Apple and Facebook).
It’s not an SEO thing.
That it outright false. Ask any company actually using AMP why they use it.
It’s not a replacement for HTML.
And yet, the article goes on to try convince you to replace HTML with AMP.
Wednesday, March 13th, 2019
Unpoly: Unobtrusive JavaScript framework
This looks like it could be an interesting library of interface patterns.
Friday, December 14th, 2018
GitHub - frctl/awesome-fractal: A curated list of awesome things related to Fractal
A starter list of Fractal examples and links. You can expand it.
Thursday, September 13th, 2018
Magic Paintbox – Illuminated – Medium
What we get from the pattern library is time and freedom to be creative. I’ve seen people claim pattern libraries are the death of creativity and innovation in design. For us, it’s the opposite of that.
Wednesday, July 25th, 2018
Beyond style guides: lessons from scaling design at TELUS
I like the questions that the TELUS team ask about any potential components to be added to their design system:
- Is it on brand?
- Is it accessible?
- Has it been tested?
- Can it be reused?
They also have design principles.
Tuesday, June 26th, 2018
Introducing the GOV.UK Design System - Government Digital Service
The Gov.uk design system is looking very, very good indeed—nicely organised with plenty of usage guidelines for every component.
Guidance on using components and patterns now follow a simple, consistent format based on task-based research into what users need in order to follow and trust an approach.
Wednesday, June 20th, 2018
The three lessons that changed how I think about design systems
- Know where you stand before starting the journey
- Make sure everyone is speaking the same language
- Integrate the right tools into your team’s workflow
Tuesday, June 5th, 2018
5 ways having a shared design system has helped us ship our designs faster – Product at Canva
The steps that the Canva team took to turbocharge their design ops.
I’ll talk about why creating a shared design system has boosted our organizational productivity—and how you can help your teams improve product quality while reducing your company’s ‘design debt’.