Link archive: November, 2017

Jeremy Keith - Building Blocks of the Indie Web - YouTube

Here’s the talk I gave at Mozilla’s View Source event. I really enjoyed talking about the indie web, both from the big-picture view and the nitty gritty.

In these times of centralised services like Facebook, Twitter, and Medium, having your own website is downright disruptive. If you care about the longevity of your online presence, independent publishing is the way to go. But how can you get all the benefits of those third-party services while still owning your own data? By using the building blocks of the Indie Web, that’s how!

edent/SuperTinyIcons: Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos

These are lovely little SVGs of website logos that are yours for the taking. And if you want to contribute an icon to the collection, go for it …as long as it’s less than 1024 bytes (most of these are waaay less).

Answers for young people - Tim Berners-Lee

Many, many years ago, Tim Berners-Lee wrote this page of answers to (genuinely) frequently asked questions he got from school kids working on reports. I absolutely love the clear straightforward language he uses to describe concepts like hypertext, packet switching, and HTTP.

Over-engineering is under-engineering – Baldur Bjarnason

Following on from that link about the battle between control vs. using what the browser already gives you, Baldur sums up the situation:

To pick a specific example: the problem with an over-engineered form is that the amount of code required to replace no engineering (i.e. native form controls with basic styling) is enormous and almost always only partially successful (i.e. under-engineered).

They are under-engineered because they are over-engineered—tried to replace native controls.

And so we get two schools of engineering thought:

1. Keep it simple.
2. Control everything, even though that means reimplementing everything in JavaScript.

If, as it’s starting to look like from my perspective, these two communities are incapable of learning from each other, then maybe we should start consider some sort of community divorce?

We get HTML, CSS, and SVG. We love that shit and you just keep stuffing it into the JavaScript sack whenever you are left alone with it.

You get to keep WebGL, Shadow DOM, WASM, React, and Angular.

(I know which group I’d rather be in.)

Accessible custom styled form elements - Rian Rietveld

An excellent level-headed evaluation of styling and scripting form controls, weighing up the benefits and trade-offs. The more tightly you control the appearance, the less you get to benefit from the functionality (and accessibility) that the browser gives you for free …meaning you’ve now to got to work harder to replace it.

HTML elements like check buttons, radio buttons or select options can be hard to style with CSS in a custom design. There are many workarounds for this, but are they accessible?

Sandcastles

Take a break. Build a sandcastle. It’s relaxing.

V6: Typography and Proportions | Rob Weychert

Rob walks us through the typographic choices for his recent redesign:

Most of what I design that incorporates type has a typographic scale as its foundation, which informs the typeface choices and layout proportions. The process of creating that scale begins by asking what the type needs to do, and what role contrasting sizes will play in that.

Design Systems Handbook - DesignBetter.Co

A weirdly over-engineered online book with bizarre scrolljacking (I would advise disabling JavaScript but then all the links stop working so you won’t be able to go past the table of contents) but it’s free and the content—by Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, and Roy Stanfield— looks good:

A design system unites product teams around a common visual language. It reduces design debt, accelerates the design process, and builds bridges between teams working in concert to bring products to life. Learn how you can create your design system and help your team improve product quality while reducing design debt.

Infinitown | A WebGL Experiment by Little Workshop

I reckon this could be the canonical WebGL demo.

And if I’m reading dev tools right, this is all done in 86K.

Eric’s Archived Thoughts: Generating Wireframe Boxes with CSS and HTML5

Eric uses some super-clever CSS to “wireframe up” a web page.

I wonder if this could be turned into a little bookmarklet?

From Cats With Love: Welcome The New Smashing Membership — Smashing Magazine

Smashing Magazine has launched its lovely new design, but more importantly, it has launched its lovely new business model. Ads are gone. Patronage is in. This is a resource worth supporting.

i is=”the walrus”

In which Brian takes a long winding route through an explanation of why the is attribute for custom elements is dead before he demonstrates the correct way to use web components:

<!-- instead of writing this -->
<input type="radio" is="x-radio">

<!-- you write this -->
<x-radio>
<input type="radio">
</x-radio>

Sadly, none of the showcase examples I’ve seen for web components do this.

Exploring the Linguistics Behind Regular Expressions

Before reading this article, I didn’t understand regular expressions. But now, having read this article, I don’t understand regular expressions and I don’t understand linguistics. Progress!

SSL Issuer Popularity - NetTrack.info

This graph warms the cockles of my heart. It’s so nice to see a genuinely good project like Let’s Encrypt come in and upset the applecart of a sluggish monopolistic industry.

Escape the News with the British Podcast “In Our Time with Melvyn Bragg” | The New Yorker

A lovely profile of the lovely In Our Time.

In part because “In Our Time” is unconnected to things that are coming out, things happening right this minute, things being promoted, it feels aligned with the eternal rather than the temporal, and is therefore escapist without being junk.

Anyone remember the site After Our Time?

Network based image loading using the Network Information API in Service Worker | justmarkup

This is clever—you can use the navigator.connection API from a service worker (because it’s asynchronous) which means you can have a service worker script that serves differently sized images based on bandwidth.

A collection of awesome design systems

A table of design systems, pattern libraries, style guides, or whatever we’re calling them.

The Fallacies of Distributed Computing (Applied to Front-End Performance) – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts

Harry cautions against making assumptions about the network when it comes to front-end development:

Yet time and time again I see developers falling into the same old traps—making assumptions or overly-optimistic predictions about the conditions in which their apps will run.

Planning for the worst-case scenario is never a wasted effort:

If you build and structure applications such that they survive adverse conditions, then they will thrive in favourable ones.

Swimming in Complexity – James Box at UX Brighton 2017 - YouTube

Boxman’s talk about complexity, reasoning, philosophy, and design is soooo good!

Localisation and Translation on the Web

Practical advice from Ire on localising web pages.

A Content Slider

Brad always said that carousels were way to stop people beating each other up in meetings. I like the way Heydon puts it:

Carousels (or ‘content sliders’) are like men. They are not literally all bad — some are even helpful and considerate. But I don’t trust anyone unwilling to acknowledge a glaring pattern of awfulness. Also like men, I appreciate that many of you would rather just avoid dealing with carousels, but often don’t have the choice. Hence this article.

Salva de la Puente - What is a PWA

Here’s a nice one-sentence definition for the marketing folk:

A Progressive Web App is a regular website following a progressive enhancement strategy to deliver native-like user experiences by using modern Web standards.

But if you’re talking to developers, I implore you to concretely define a Progressive Web App as the combination of HTTPS, a service worker, and a Web App Manifest.

How accessible is your website for the disabled? Consider doing an audit to find out | Poynter

Melody Kramer interviews Eric Bailey, formerly of the Boston Globe.

Happier HTML5 Form Validation - daverupert.com

Dave uses just a smidgen of JavaScript to whip HTML5’s native form validation into shape.

Instead of being prescriptive about error messaging, we use what the browser natively gives us.

Trolleys, veils and prisoners: the case for accessibility from philosophical ethics

The transcript of a presentation on the intersection of ethics and accessibility.

Empty States

A gallery of empty UIs. It reminds me of those galleries of clever 404 pages. Next step: a gallery of witty offline pages.

Teletype for Atom

A plug-in that lets multiple people collaborate on the same document in Atom. Could be useful for hackdays and workshops.

SpeechBoard | Home | The easiest way to edit podcasts

This is quite impressive—you edit the audio file by editing the transcript!

How the BBC News website has changed over the past 20 years - BBC News

Two decades redesigning/realigning the BBC News home page.

The Freedom to Associate » The Digital Antiquarian

A history of hypertext, from the memex to HyperCard.

Ten Years Old – CSS Wizardry

Congratulations on a decade of publishing on your own site—you’re a blogging wizard, Harry!

Having this website changed and shaped my career. If you don’t have a blog, I urge you, start working on one this weekend. Your own blog, with your own content, at your own domain. It might just change your life.

Orbital Reflector

Art. In. Spaaaaaace!

Orbital Reflector is a sculpture constructed of a lightweight material similar to Mylar. It is housed in a small box-like infrastructure known as a CubeSat and launched into space aboard a rocket. Once in low Earth orbit at a distance of about 350 miles (575 kilometers) from Earth, the CubeSat opens and releases the sculpture, which self-inflates like a balloon. Sunlight reflects onto the sculpture making it visible from Earth with the naked eye — like a slowly moving artificial star as bright as a star in the Big Dipper.

Using SVG as placeholders — More Image Loading Techniques - JMPerez Blog

Here’s a clever to technique to improve the perceived performance of image loading with a polygonal SVG placeholder.

Animista

What a great way to play around with CSS animations!

This in JavaScript | Zell Liew

In the immortal words of Ultravox, this means nothing to me.

I’m filing this away for my future self for the next time I (inevitably) get confused about what this means in different JavaScript contexts.

Two column `dl` with two lines of CSS! Thank you Grid Layout! ✿ dabblet.com

Yes! I’ve wanted this forever!

The Burden of Precision | Daniel T. Eden, Designer

I think Dan is on to something here—design tools that offer pixel perfection at an early stage are setting us up for disappointment and frustration. Broad brushstrokes early on, followed by more precise tinkering later, feels like a more sensible approach.

With the help of a robust and comprehensive design system, I am certain that we could design in much broader strokes, and concentrate on making the finished product, rather than our design outputs, highly precise and reflective of our ideal.

Constellation

Language conjures the world into being.

Just type stuff.

Relative Requirements – CSS Wizardry

I really like this exercise by Harry. I’ve done similar kinds of grading using dot-voting in the past. It feels like an early step to establishing design principles: “this over that.”

By deciding what we value up-front, we have an agreement that we can look back on in order to help us settle these conflicts and get us back on track again.

Relative Requirements remove the personal aspect of these disagreements and instead focuses on more objective agreements that we made as a team.

Eric’s Archived Thoughts: Declining Complexity in CSS

I think Eric is absolutely right. The barrier to entry for accomplishing what you want with CSS is much lower now. It only seems more complicated if you’re used to doing things the old way.

I envy “the kids”, the ones just starting to learn front end now. They’re likely never going to know the pain of float drop, or wrestling with inline blocks, or not being able to center along one axis. They’re going to roll their eyes when we old-timers start grumbling about the old days and say, “Floats?!? Who ever thought floats would be a good way to lay out a page? That’s totally not what they’re for, anyone can see that! Were you all high as a kite, or just utterly stupid?” You know, the way “the kids” talked ten years ago, except then it was about using tables for layout.

What makes a good design principle? || Matthew Ström: designer & developer

These are really good ideas for evaluating design principles. In fact, I would go so far as to say they are design principles for design principles.

• Good design principles are memorable
• Good design principles help you say no.
• Good design principles aren’t truisms.
• Good design principles are applicable.

Design Guidelines — The way products are built.

A collection of publicly available design systems, pattern libraries, and interface guidelines.

Post Pinging and Webmentions at Midlands Maidens Nottingham Escorts

Okay, this is somewhat odd …it looked like I was getting spam webmentions from an escort agency to an old post of mine. It turns out that technically it’s not spam—they’re genuinely linking to my post from this post on their blog which is actually about webmentions.

And that, your honour, is how this site ended up in my browser history.

Online technology communities: Making the most of the open source internet – Jeremy Keith

I spoke my brains on the Venturi’s Voice podcast. It’s a random walk through topics like sharing, writing, publishing, and bizzzzznis.

Learn Web Design Fundamentals and Shortcuts with Hello Web Design - Hello Web Books

Tracy’s new book is excellent (and I had the great honour of writing a foreword for it).

Programmers, developers, marketers, and non-designers — want to become a better designer? This short book has everything you need.

The Medium - daverupert.com

I have to keep reminding myself that I do have some control. I can build The Medium I want. I can cling to what’s good.

Travel Oregon: The Game

Oregon Trail, updated for our times. There should be appreciably less dysentery in this game.

Frappé Charts

A JavaScript library for displaying charts’n’graphs.

Jeremy Keith on Evaluating Technology at SmashingConf Barcelona 2017 on Vimeo

I think this is the best delivery of this talk I’ve ever given. It was something about being in that wonderful venue.

I got quite worked up around the the 32 minute mark.

The Contrast Swap Technique: Improved Image Performance with CSS Filters | CSS-Tricks

A clever performance trick for images:

1. Reduce image contrast using a linear transform function (Photoshop can do this)
2. Apply a contrast filter in CSS to the image to make up for the contrast removal

What Are You Reading? – Jorge Arango

A pace layer model for readers (and writers).

A Responsive Accessible Table | Adrian Roselli

Following on from Richard’s article, here’s a deep dive into making HTML tables that are accessible and responsive.

Inside Design: Clearleft

A profile of Clearleft from the nice people at InVision.

Although there is this:

@adactio looks like you are trying really hard to not crack up laughing & shoot coffee out of your nose in this posed photo. /cc @andybudd pic.twitter.com/WQbRmqqpY8

— Nick Finck (@nickf) November 7, 2017

Jupiter Perijove 09 | Flickr

Gorgeous images from Juno’s closest approach to Jupiter.

Web Typography: Designing Tables to be Read, Not Looked At · An A List Apart Article

An extract from Richard’s excellent book, this is a deep dive into styling tables for the web (featuring some CSS I had never even heard of).

Tables can be beautiful but they are not works of art. Instead of painting and decorating them, design tables for your reader.

(It also contains a splendid use of the term “crawl bar.”)

The Art of Comments | CSS-Tricks

Great advice on writing sensible comments in your code.

Collapsible Sections

The latest edition of Heydon’s Inclusive Components is absolutely fantastic! The pattern itself—toggling sections of content—is quite straightforward, but then there’s a masterclass in how to create a web component that still allows the content to be accessible in older browsers. The key, as ever, is progressive enhancement:

Whether implemented through web components or not, progressive enhancement not only ensures the interface is well-structured and robust. As we’ve seen here, it can also simplify the editorial process. This makes developing the application and its content more inclusive.

The Juvet Agenda

Questions prompted by the Clearleft gathering in Norway to discuss AI.

Against an Increasingly User-Hostile Web - Neustadt.fr

With echoes of Anil Dash’s The Web We Lost, this essay is a timely reminder—with practical advice—for we designers and developers who are making the web …and betraying its users.

You see, the web wasn’t meant to be a gated community. It’s actually pretty simple.

A web server, a public address and an HTML file are all that you need to share your thoughts (or indeed, art, sound or software) with anyone in the world. No authority from which to seek approval, no editorial board, no publisher. No content policy, no dependence on a third party startup that might fold in three years to begin a new adventure.

That’s what the web makes possible. It’s friendship over hyperlink, knowledge over the network, romance over HTTP.

Building Flexible Design Systems // Speaker Deck

The slides from Yesenia’s talk on scenario-driven design.

Web Design Museum

The museum exhibits over 800 carefully selected and sorted web sites that show web design trends between the years 1995 and 2005.

Distilling How We Think About Design Systems

Advice on building design systems:

• If you can avoid being ambiguous, please do.
• Favor common understanding over dictionary correctness.
• Make great operations a priority.
• Don’t get trapped in defining things instead of explaining things.

Rebuilding slack.com – Several People Are Coding

A really great case study of a code refactor by Mina, with particular emphasis on the benefits of CSS Grid, fluid typography, and accessibility.

Coding with Clarity · An A List Apart Article

Good advice on writing code that is understandable to your fellow humans (and your future self).

Angry Optimism in a Drowned World: A Conversation with Kim Stanley Robinson | CCCB LAB

Nobody can afford to volunteer to be extra virtuous in a system where the only rule is quarterly profit and shareholder value. Where the market rules, all of us are fighting for the crumbs to get the best investment for the market. And so, this loose money can go anywhere in the planet without penalty. The market can say: “It doesn’t matter what else is going on, it doesn’t matter if the planet crashes in fifty years and everybody dies, what’s more important is that we have quarterly profit and shareholder value and immediate return on our investment, right now.” So, the market is like a blind giant driving us off a cliff into destruction.

Kim Stanley Robinson journeys to the heart of the Anthropocene.

Economics is the quantitative and systematic analysis of capitalism itself. Economics doesn’t do speculative or projective economics; perhaps it should, I mean, I would love it if it did, but it doesn’t. It’s a dangerous moment, as well as a sign of cultural insanity and incapacity. It’s like you’ve got macular degeneration and your vision of reality itself were just a big black spot precisely in the direction you are walking.

Web Form Conundrum: disabled or readonly? | Aaron Gustafson

Good question! And a good answer:

If you really need it, which you probably don’t, readonly is what you want.