A great selection of links about design systems, collected and categorised.
Saturday, November 10th, 2018
Thursday, November 8th, 2018
‘Sfunny, this exact use-case (styling a profile component) came up on a project recently and I figured that CSS grid would be the right tool for the job.
Monday, October 22nd, 2018
Monday, October 8th, 2018
Maintaining an open source project is a rollercoaster ride with high peaks and very low troughs.
Release frequency is down. Questions increasingly go unanswered. Issues remain in a triage, unresolved state. Uncertainty and frustration brew within the community room.
Brian’s experience with Pattern Lab very much mirrors Mark’s experience with Fractal. The pressure. The stress. But there’s also the community.
A maintainer must keep the needs of their project, their community, and their own needs in constant harmony.
This is hard!
Monday, October 1st, 2018
If you must add a rich text editor to an interface, this open source offering from Basecamp looks good.
Tuesday, July 24th, 2018
A very thoughtful post from Stuart, ostensibly about “view source”, but really about empowerment, choice, and respect.
I like that the web is made up of separate bits that you can see if you want to. You can understand how it works by piecing together the parts. It’s not meant to be a sealed unit, an appliance which does what the owner wants it to and restricts everything else. That’s what apps do. The web’s better than that.
Tuesday, July 10th, 2018
Paul Ford explains version control in a way that is clear and straightforward, while also being wistful and poetic.
I had idle fantasies about what the world of technology would look like if, instead of files, we were all sharing repositories and managing our lives in git: book projects, code projects, side projects, article drafts, everything. It’s just so damned … safe. I come home, work on something, push the changes back to the master repository, and download it when I get to work. If I needed to collaborate with other people, nothing would need to change. I’d just give them access to my repositories (repos, for short). I imagined myself handing git repos to my kids. “These are yours now. Iteratively add features to them, as I taught you.”
Wednesday, June 20th, 2018
A collection of collections.
This site is dedicated to compiling and sharing useful resources for Designers and UI Developers.
Monday, May 21st, 2018
This looks like a terrific use of a Raspberry Pi—blocking adtech surveillance at the network level.
Wouldn’t it be great if the clichéd going-home-for-Christmas/Thanksgiving to fix the printer/wifi included setting up one of these?
There’s an article about Pi-hole in Business Week where the creators offer some advice for those who equate any kind of online advertising with ubiquitous surveillance:
For publishers struggling to survive even with maximum ad surveillance, the Pi-hole team recommends a renewed focus on subscriptions, affiliate links, and curated endorsements for products and services that might truly interest users, similar to the way podcast hosts may talk about how much they personally enjoy a sponsor’s products. There’s nothing wrong with pitching people stuff they might enjoy, the team says. It’s just the constant, ever-intensifying surveillance that needs to stop.
Wednesday, May 2nd, 2018
Service worker resources
At the end of my new book, Going Offline, I have a little collection of resources relating to service workers. Here’s how I introduce them:
If this book were a podcast, then this would be the point at which I would be imploring you to rate me on iTunes (or I’d be telling you about a really good mattress). Instead, I’d like to give you some hyperlinks so that you can explore some of the topics in this brief book in more detail.
It always feels a little strange to publish a list of hyperlinks in a physical book, so I figured I’d republish them here for easy access…
- Mariko Kosaka wrote and illustrated an explanation of service workers in a post on her site called “Service Worker, what are you?” (https://kosamari.com/notes/Service-Worker-what-are-you).
- Mariko also wrote and illustrated an explanation of promises called “The Promise of a Burger Party” (https://kosamari.com/notes/the-promise-of-a-burger-party).
- Ire Aderinokun wrote a clear guide to “The Service Worker Lifecycle” (https://bitsofco.de/the-service-worker-lifecycle/).
- Yoav Weiss has an explanation of different kinds of caching in “A Tale of Four Caches” (https://blog.yoav.ws/tale-of-four-caches/).
- Lyza Gardner wrote a step-by-step guide for Smashing Magazine on “Making A Service Worker: A Case Study” (https://www.smashingmagazine.com/2016/02/making-a-service-worker/).
- Jake Archibald has collected a series of service worker strategies into an “offline cookbook” (https://jakearchibald.com/2014/offline-cookbook/).
- Jake also recorded an excellent online video series that you can enjoy for free (https://www.udacity.com/course/offline-web-applications—ud899).
- Mike Riethmuller has on offline page on his site that shows articles you’ve previously visited (https://madebymike.com.au/writing/service-workers/).
- Ethan Marcotte has a similar offline page, but he also shows metadata for each article (https://ethanmarcotte.com/wrote/going-offline/).
- Una Kravets allows you to choose which pages on her site you want to save for reading offline (https://una.im/save-offline/).
Progressive web apps
- Alex Russell answers the question “What, Exactly, Makes Something A Progressive Web App?” (https://infrequently.org/2016/09/what-exactly-makes-something-a-progressive-web-app/).
- Ada Rose Cannon goes into the details of “The Building Blocks Of Progressive Web Apps” (https://www.smashingmagazine.com/2016/09/the-building-blocks-of-progressive-web-apps/).
- Aaron Gustafson quite rightly points out that “Yes, That Web Project Should Be a PWA” (https://alistapart.com/article/yes-that-web-project-should-be-a-pwa).
- Jason Grigsby outlines “The Business Case for Progressive Web Apps” (https://cloudfour.com/thinks/the-business-case-for-progressive-web-apps/).
- Google released a collection of scripts and tools for going offline called Workbox (https://developers.google.com/web/tools/workbox/).
- To get started with your manifest and service worker, you can paste your website’s URL into PWA Builder (http://preview.pwabuilder.com/).
- Lighthouse is a great testing tool for progressive web apps that’s now bundled into Chrome’s Developer Tools under the Audits panel (https://developers.google.com/web/tools/lighthouse/).
Monday, April 16th, 2018
Lesson learned: the discoverable and understandable web is still do-able — it’s there waiting to be discovered. It just needs some commitment from the people who make websites.
Tuesday, March 27th, 2018
Anil documents the steady decline of empowering features from web browsers: view source; in-situ authoring; transclusion, but finishes with the greatest loss of all: your own website at your own address.
There are no technical barriers for why we couldn’t share our photos to our own sites instead of to Instagram, or why we couldn’t post stupid memes to our own web address instead of on Facebook or Reddit. There are social barriers, of course — if we stubbornly used our own websites right now, none of our family or friends would see our stuff. Yet there’s been a dogged community of web nerds working on that problem for a decade or two, trying to see if they can get the ease or convenience of sharing on Facebook or Twitter or Instagram to work across a distributed network where everyone has their own websites.
(Although it’s a bit of shame that Anil posted this on Ev’s blog instead of his own.)
Monday, March 26th, 2018
Saturday, March 10th, 2018
Friday, March 2nd, 2018
Just change it
Amber and I often have meta conversations about the nature of learning and teaching. We swap books and share ideas and experiences whenever we’re trying to learn something or trying to teach something. A topic that comes up again and again is the idea of “the curse of knowledge“—it’s the focus of Steven Pinker’s book The Sense Of Style. That’s when the author/teacher can’t remember what it’s like not to know something, which makes for a frustrating reading/learning experience.
This is one of the reasons why I encourage people to blog about stuff as they’re learning it; not when they’ve internalised it. The perspective that comes with being in the moment of figuring something out is invaluable to others. I honestly think that most explanatory books shouldn’t be written by experts—the “curse of knowledge” can become almost insurmountable.
I often think about this when I’m reading through the installation instructions for frameworks, libraries, and other web technologies. I find myself put off by documentation that assumes I’ve got a certain level of pre-existing knowledge. But now instead of letting it get me down, I use it as an opportunity to try and bridge that gap.
The brilliant Safia Abdalla wrote a post a while back called How do I get started contributing to open source?. I definitely don’t have the programming chops to contribute much to a codebase, but I thoroughly agree with Safia’s observation:
If you’re interested in contributing to open source to improve your communication and empathy skills, you’re definitely making the right call. A lot of open source tools could definitely benefit from improvements in the documentation, accessibility, and evangelism departments.
What really jumps out at me is when instructions use words like “simply” or “just”. I’m with Brad:
“Just” makes me feel like an idiot. “Just” presumes I come from a specific background, studied certain courses in university, am fluent in certain technologies, and have read all the right books, articles, and resources. “Just” is a dangerous word.
But rather than letting that feeling overwhelm me, I now try to fix the text. Here are a few examples of changes I’ve suggested, usually via pull requests on Github repos:
- The instructions on the AMP validator page.
- The documentation for Composer, the PHP dependency manager.
They all have different codebases in different programming languages, but they’re all intended for humans, so having clear and kind documentation is a shared goal.
I like suggesting these kinds of changes. That initial feeling of frustration I get from reading the documentation gets turned into a warm fuzzy feeling from lending a helping hand.
Friday, February 9th, 2018
I wonder if I have twenty years of experience making websites, or if it is really five years of experience, repeated four times.
I saw Frank give this talk at Mirror Conf last year and it resonated with me so so much. I’ve been looking forward to him publishing the transcript ever since. If you’re anything like me, this will read as though it’s coming from directly inside your head.
In one way, it is easier to be inexperienced: you don’t have to learn what is no longer relevant. Experience, on the other hand, creates two distinct struggles: the first is to identify and unlearn what is no longer necessary (that’s work, too). The second is to remain open-minded, patient, and willing to engage with what’s new, even if it resembles a new take on something you decided against a long time ago.
I could just keep quoting the whole thing, because it’s all brilliant, but I’ll stop with one more bit about the increasing complexity of build processes and the decreasing availability of a simple view source:
Illegibility comes from complexity without clarity. I believe that the legibility of the source is one of the most important properties of the web. It’s the main thing that keeps the door open to independent, unmediated contributions to the network. If you can write markup, you don’t need Medium or Twitter or Instagram (though they’re nice to have). And the best way to help someone write markup is to make sure they can read markup.
Friday, January 26th, 2018
Chris has set up a whole site dedicated to someone-else’s-server sites with links to resources and services (APIs), along with ideas of what you could build in this way.
Friday, January 5th, 2018
Friday, December 15th, 2017
A rather handsome looking free serif typeface based on Gargantua. Spectral is available under an Open Font License.