A handy tool for getting an overview of your site’s CSS:
CSS Stats provides analytics and visualizations for your stylesheets. This information can be used to improve consistency in your design, track performance of your app, and diagnose complex areas before it snowballs out of control.
What you see is the big map of a sea of literature, one where each island represents a single author, and each city represents a book. The map represents a selection of 113 008 authors and 145 162 books.
This is a poetic experiment where we hope you will get lost for a while.
Another five pieces of sweet, sweet low-hanging fruit:
- Always label your inputs.
- Highlight input element on focus.
- Break long forms into smaller sections.
- Provide error messages.
- Avoid horizontal layout forms unless necessary.
This is a great way to use a service worker to circumvent censorship:
After the visitor opens the website once over a VPN, the service worker is downloaded and installed. The VPN can then be disabled, and the service worker will take over to request content from non-blocked servers, effectively acting as a proxy.
An Orbital Ring System as an alternative to a space elevator.
Representing nothing short of the most ambitious project in the history of space exploration and exploitation, the Orbital Ring System is more or less what you would imagine it to be, a gargantuan metal ring high above the Earth, spanning the length of its 40,000 kilometer-long diameter.
John weighs in on the clashing priorities of browser vendors.
Imagine if the web never got CSS. Never got a way to style content in sophisticated ways. It’s hard to imagine its rise to prominence in the early 2000s. I’d not be alone in arguing a similar lack of access to the sort of features inherent to the mobile experience that WebKit and the folks at Mozilla have expressed concern about would (not might) largely consign the Web to an increasingly marginal role.
An excellent and clear explanation of specificity in CSS.
A trashcan, a tyepface, and a tactile keyboard. Marcin gets obsessive (as usual).
Using ligatures to create a s*** font that f***ing censors bad language automatically.
A group blog by a whole bunch of people who are staying at home.
It’s hard to believe, but there was a time where the internet was just full of casual websites posting random stuff. And you’d go to them maybe even multiple times a day to see if they had posted any new stories. It was something we all did when we were bored at our desks, at our jobs. Now there are no more desks. But there are still blogs.
Join your favorite authors on Zoom where you can have spirited discussions from the privacy of our own quarantined space!
This is a great walkthough of making a common form pattern accessible. No complex code here: some HTML is all that’s needed.
CSS only truly exists in a browser. As soon as we start writing CSS outside of the browser, we rely on guesses and memorization and an intimate understanding of the rules. A text editor will never be able to provide as much information as a browser can.
I can see this coming in very handy at Codebar—pop any CSS selector in here and get a plain English explanation of what it’s doing.
This is going to be so useful for client work at Clearleft—instant snapshots of performance metrics across industries and regions!
See Tammy’s blog post for me details.
We’ve industrialized design and are relegated to squeezing efficiencies out of it through our design systems. All CSS changes must now have a business value and user story ticket attached to it.
Dave follows on from my post about design systems and automation.
At the same time, I have seen first hand how design systems can yield improvements in accessibility, performance, and shared knowledge across a willing team. I’ve seen them illuminate problems in design and code. I’ve seen them speed up design and development allowing teams to build, share, and validate prototypes or A/B tests before undergoing costly guesswork in production. There’s value in these tools, these processes.
This is a wonderful interactive explanation of the way CSS hierarchy works—beautiful!