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.
Sunday, March 15th, 2020
Wednesday, March 11th, 2020
CSS is frustrating because you have to actually think of a website like a website and not an app. That mental model is what everyone finds so viscerally upsetting. And so engineers do what feels best to them; they try to make websites work like apps, like desktop software designed in the early naughts. Something that can be controlled.
Friday, February 28th, 2020
The headline begs the question, but Robin makes this very insightful observation in the article itself:
Monday, June 10th, 2019
This post absolutely nails what’s special about CSS …and why supersmart programmers might have trouble wrapping their head around it:
Other programming languages often work in controlled environments, like servers. They expect certain conditions to be true at all times, and can therefore be understood as concrete instructions as to how a program should execute.
CSS on the other hand works in a place that can never be fully controlled, so it has to be flexible by default.
Max goes on to encapsulate years of valuable CSS learnings into some short and snappy pieces of advices:
No matter what your level of CSS knowledge, this post has something for you—highly recommended!
Tuesday, February 26th, 2019
There’s a lot here that ties in with what I was talking about at New Adventures around the rule of least power in technology choice.
I’m not sure if I agree with describing CSS as being state-based. The example that illustrates this—a
:hover style—feels like an exception rather than a typical example of CSS.
Monday, November 26th, 2018
Prototypes and production
When we do front-end development at Clearleft, we’re usually delivering production code, often in the form of a component library. That means our priorities are performance, accessibility, robustness, and other markers of quality when it comes to web development.
We do a lot of design sprints, where time is of the essence. The prototype we produce on the penultimate day of the sprint definitely won’t be production quality, but it will be good enough to test.
What’s interesting is that—when it comes to prototyping—our usual front-end priorities can and should go out the window. The priority now is speed. If that means sacrificing semantics or performance, then so be it. If I’m building a prototype and I find myself thinking “now, what’s the right
class name for this component?”, then I know I’m in the wrong mindset. That question might be valid for production code, but it’s a waste of time for prototypes.
So these two kinds of work require very different attitudes. For production work, quality is key. For prototyping, making something quickly is what matters.
Alternating between production projects and prototyping projects can be quite fun, if a little disorienting. It’s almost like I have to flip a switch in my brain to change tracks.
When a prototype is successful, works great, and tests well, there’s a real temptation to use the prototype code as the basis for the final product. Don’t do this! I’ve made that mistake in the past and it always ends badly. I ended up spending far more time trying to wrangle prototype code to a production level than if I had just started from a clean slate.
Build prototypes to test ideas, designs, interactions, and interfaces …and then throw the code away. The value of a prototype is in answering questions and testing hypotheses. Don’t fall for the sunk cost fallacy when it’s time to switch over into production mode.
Of course it should go without saying that you should never, ever release prototype code into production.
Heydon recently highlighted an article that offered this tip for aspiring web developers:
As for HTML, there’s not much to learn right away and you can kind of learn as you go, but before making your first templates, know the difference between in-line elements like
spanand how they differ from block ones like
That’s perfectly reasonable advice …if you’re building a prototype. But if you’re building something for public consumption, you have a duty of care to the end users.
Tuesday, June 12th, 2018
This is really good breakdown of what’s different about CSS (compared to other languages).
These differences may feel foreign, but it’s these differences that make CSS so powerful. And it’s my suspicion that developers who embrace these things, and have fully internalized them, tend to be far more proficient in CSS.
Saturday, October 7th, 2017
A beautiful piece of writing from Virginia Heffernan on how to cope with navigating the overwhelming tsunami of the network.
The trick is to read technology instead of being captured by it—to maintain the whip hand.
Sunday, August 6th, 2017
A series of questions to ask on any design project:
- What are my lenses?
- Am I just confirming my assumptions, or am I challenging them?
- What details here are unfair? Unverified? Unused?
- Am I holding onto something that I need to let go of?
- What’s here that I designed for me? What’s here that I designed for other people?
- What would the world look like if my assumptions were wrong?
- Who might disagree with what I’m designing?
- Who might be impacted by what I’m designing?
- What do I believe?
- Who’s someone I’m nervous to talk to about this?
- Is my audience open to change?
- What am I challenging as I create this?
- How can I reframe a mistake in a way that helps me learn?
- How does my approach to this problem today compare to how I might have approached this one year ago?
- If I could learn one thing to help me on this project, what would that one thing be?
- Do I need to slow down?
Wednesday, May 20th, 2015
I can relate 100% to what Dave is saying here:
I’m disenchanted with desktop. That conviction runs so deep, I groan when I see a desktop layout JPEG.
All too often we talk the talk about taking a mobile first approach, but we rarely walk the walk. Most designers and developers still think of the small-screen viewport as the exception, not the norm.