!important in CSS are ways of solving your immediate problem …but unless you know what you’re doing, they’re probably going to create new problems.
This is a great talk by Hidde, looking at the history and evolution of cascading style sheets. Right up my alley!
A useful resource for CSS grid. It’s basically the spec annoted with interactive examples.
This might just be the most nerdily specific book I’ve read and enjoyed. Even if you’re not planning to build a web browser any time soon, it’s kind of fascinating to see how HTML is parsed—and how much of an achievement the HTML spec is, for specifying consistent error-handling, if nothing else.
The last few chapters are still in progress, but you can read the whole thing online or buy an ePub version.
This is a really nice glanceable reference for CSS grid.
I saw Daniel give a talk at Async where he compared linguistic rules with code style:
We find the prescriptive rules hard to follow, irrespective of how complex they are, because they are invented, arbitrary, and often go against our intuition. The descriptive rules, on the other hand, are easy to follow because they are instinctive. We learned to follow them as children by listening to, analysing and mimicking speech, armed with an inbuilt concept of the basic building blocks of grammar. We follow them subconsciously, often without even knowing the rules exists.
Thus began some thorough research into trying to uncover a universal grammar for readable code:
I am excited by the possibility of discovering descriptive readability rules, and last autumn I started an online experiment to try and find some. My experiment on howreadable.com compared various coding patterns against each other in an attempt to objectively measure their readability. I haven’t found any strong candidates for prescriptive rules so far, but the results are promising and suggest a potential way forward.
I highly recommend reading through this and watching the video of the Async talk (and conference organisers; get Daniel on your line-up!).
Cassie and I went to a great Async talk last night all about code readability, which was well-timed because it’s been on our minds all week. Cassie explains more in this post.
Design has disrupted taxis in a massive, almost unprecedented way. But good design doesn’t merely aim to disrupt—it should set out to actually build viable solutions. Designers shouldn’t look at a problem and say, “What we’re going to do is just fuck it up and see what happens.” That’s a dereliction of duty.
A bold proposal by Heydon to make the process of styling on the web less painful and more scalable. I think it’s got legs, but do we really need another three-letter initialism?
This service could be quite handy if you’re making a presentation that involves showing code—it generates syntax-highlighted images of code.
A quick visual guide to CSS Grid properties and values.
It’s fascinating to look back at this early proposal for CSS from 1994 and see what the syntax might have been:
A one-statement style sheet that sets the font size of the h1 element:
h1.font.size = 24pt 100%
The percentage at the end of the line indicates what degree of influence that is requested (here 100%).
CSS Shorthand Syntax Considered an Anti-Pattern – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts
Sensible advice from Harry—only style what you mean to style.
Regular expressions are my kryptonite. I’m rubbish at them and I can never keep the vocabulary in me head.
Mark recommended this tool so I’m going to give it a go the next time I have to resort to regex.
I like this. It fills like a very webby way to explore a museum collection. Use any axis you like.
This is a sketch made quickly to explore what it means to navigate a museum catalogue made of over two million records. It’s about skipping around quickly, browsing the metadata as if you were wandering around the museum itself in Bloomsbury, or better yet, fossicking about unattended in the archives.
Well, I guess this is one way of encouraging people to upgrade their browser.
This cracked me up. There are two possibilities: either this is really is very funny or I am very nerdy.
Syntax for @font-face that’s more bulletproof than the techniques previously considered bulletproof …’till an even more bulletproof syntax comes along.
A very handy GUI for figuring out the somewhat complicated syntax of border-image in CSS3.