inessential: The View-Source Web
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.
Tags: markup
335
Notes on `lang` by Taylor Hunt on CodePen
A really deep dive into the lang attribute, and the :lang() pseudo-class (hitherto unknown to me). This is all proving really useful for a little side project I’m working on.
Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion | CSS-Tricks
Hells, yeah! Want to make an accordion widget? Use the details element as your starting point and progressively enhance from there.
Steve Faulkner on Twitter: Typical/expected screen reader output
Really handy accessibility information in a single tweet.
Swapping Images with the Sizes Attribute | Filament Group, Inc., Boston, MA
The hits just keep on coming from the Filament Group. Here Scott shares a really clever technique for creating an image magnifier using the sizes attribute of the img element.
Useful accessibility resources
A whoooole bunch of links about inclusive design, gathered together from a presentation.
Food for thought (process)
I love, love, love Sam’s comparison’s between cooking and front-end development.
We should embrace the tools we have access to and appreciate our ability to learn, but also realize that maybe a gas stove or a certain design tools might not be for everyone. We have to find what works for our cooking or designing/coding style or the project/meal at hand.
XML is 20
XML 1.0 was released on February 10th, 1998. I remember the hype around XML at the time—it was our saviour, the chosen one, prophesied to bring balance to data exchange. Things didn’t quite work out that way, but still…
Twenty years later, it seems obvious that the most important thing about XML is that it was the first. The first data format that anyone could pack anything up into, send across the network to anywhere, and unpack on the other end, without asking anyone’s permission or paying for software, or for the receiver to have to pay attention to what the producer thought they’d produced it for or what it meant.
How I design with CSS grid
Always mark-up first. Regardless of what the kids are doing these days, I stick by my guns and start with mark-up first. A fun experiment (maybe not for you, but definitely for me) is to see how your site reads on Lynx. It does serve as a good gauge of whether the content on the site is structured properly or not.
Everything Easy is Hard Again – Frank Chimero
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.
Building a Good Download… Button? | CSS-Tricks
I love these kinds of deep dives into one seemingly simple pattern; in this case it’s a download link with the humble A element.
Sketching in the Browser – SEEK blog – Medium
A step-by-step account of trying to find a way to keep Sketch files in sync with the code in a pattern library. The solution came from HTML Sketchapp, a more agnostic spiritual successor to AirBnB’s React Sketchapp.
The contract was incredibly straightforward—as long as you generated HTML, you could import it into Sketch.
After some tinkering, Mark Dalgleish came up with a command line tool to automate the creation of Sketch libraries from HTML elements with data-sketch- attributes.
Keeping aspect-ratio with HTML and no padding tricks
A clever little hack to preserve an aspect ratio for any HTML element.
We use two important attributes:
- SVG knows how to maintain aspect ratio
- CSS grid knows how to make overlapping items affect each other’s size
A Tale of Two Rooms: Understanding screen reader navigation | The Paciello Group
A nice analogy to help explain what it’s like to navigate with a screen reader—and how much well-structured markup can help make it easier.
Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility | CSS-Tricks
What it says on the tin—a few suggestions to ensure the accessibility of your site.
Meet the New Dialog Element
Move over, JavaScript alerts; HTML dialogs are here.
Turning Design Mockups Into Code With Deep Learning - FloydHub Blog
Training a neural network to do front-end development.
I didn’t understand any of this.
Little UI details from @steveschoger, in HTML and CSS
Suggestions for small interface tweaks.
The Origin of Stimulus
I really like the look of this markup-driven JavaScript library from the same people who brought us the pjax library Turbolinks.
The philosophy behind these tools matches my own philosophy (which I think is one of the most important factors in choosing a tool that works for you, not against you).
A Sliding Nightmare: Understanding the Range Input | CSS-Tricks
Ana goes into exhaustive detail on all the differences in the shadow DOM and styling of input type="range" across browsers.
I’m totally fine with browsers providing different styling for complex UI elements like this, but I wish they’d at least provide a consistent internal structure and therefore a consistent way of over-riding the default styles. Maybe then people wouldn’t be so quick to abandon native elements like this in favour building their own UI components from scratch—the kind of over-engineering that inevitably ends up being under-engineered.