Today I learned about the CSS property text-underline-position. As Stuart mentions, the
under value forces the underline to sit below all the descenders, giving you a consistent baseline.
a {
text-underline-position: under;
}Today I learned about the CSS property text-underline-position. As Stuart mentions, the
under value forces the underline to sit below all the descenders, giving you a consistent baseline.
a {
text-underline-position: under;
}
- Good software depends on judgment, communication, and clear abstraction. AI has amplified this.
- AI coding is automation of implementation, so design and stewardship become more important.
I keep forgetting how each of the following CSS values rolls back a declaration to a different point in the cascade. It was about time I jotted it down for my future self before it slips my mind again for the 1000th time.
initialunsetrevertrevert-layerI’ll be attending State of the Browser for the first time, remotely! 💃🏻
Really looking forward to Bramus’ talk on CSS Anchor Positioning and Zach’s talk on reducing the JS footprint.
Zach Leatherman on frontend architecture and building for longevity amid framework churn:
- 👏 Hire someone that’s good at HTML and CSS to build components independent of JS frameworks 👏
- Plug components into a JS framework and layer on behavior later
- Pay HTML/CSS devs what they deserve for giving part of your codebase longer shelf life than unpasteurized milk
Today I learned that setting type="reset" on a <button> element in HTML creates a reset button that, when activated, immediately clears all form data, resetting it to its initial state.
This could have been useful in the context of a search form. But <input type="search"> already provides a native clear button for that single field.
It’s never been a good idea to ship everything you think of. Every addition accretes complexity and comes with a cognitive cost.
Maybe we need to reframe the concept of scarcity from us, the makers of software, to them, the users of software. Their resources are what matter most:
- Attention (too many features and they can’t all be used, or even tried)
- Stability (too much frequent change is an impediment to learning a product)
- Clarity (too many options creates confusion and paralysis)
- Coherence (too many plots and subplots cannot tell a unified story)
Similarly we all love when the swifts visit (beautiful birds), so somebody started a group to get swift nest boxes made and installed collectively, then applied for subsidy funding, then got everyone to chip in such that people who couldn’t afford it could have their boxes paid for, and now suddenly we’re all writing to MPs and following the legislation to include swift nesting sites in new build houses. Etc.
It’s called collective efficacy, the belief that you can make a difference by acting together.
Every time you are inclined to use the word “teach”, replace it with “learn”. That is, instead of saying, “I teach”, say “They learn”. It’s very easy to determine what you teach; you can just fill slides with text and claim to have taught. Shift your focus to determining how you know whether they learned what you claim to have taught (or indeed anything at all!). That is much harder, but that is also the real objective of any educator.
The problem is that Live Text, “Select text in images to copy or take action,” is enabled by default on iOS devices (Settings → General → Language & Region), which can interfere with the contextual menu in Safari. Pressing down on the above link may select the text inside the image instead of selecting the link URL.
Just spent some time playing with OKpalette, a color extraction tool by David Aerne, and I’m in awe.
The 3D spinning text pulled me in immediately. I assumed it was done using JavaScript because it reminded me of the Space Type Generator. Finding out it’s done using CSS genuinely blew my mind. David was kind enough to share a CodePen demo.
I loved the animations and the subtle use of audio while interacting with the UI. Then I watched David’s walkthrough / demo and realized the functionality is just as beautiful as the visuals, if not more.
Excellent framing from Jim Nielsen, building on Jake Nations’ talk about shipping code we don’t fully understand.
Easy means you can do with little effort.
Simple means you can understand what you do with little effort.
The reasonable man adapts himself to the world; the unreasonable man persists in trying to adapt the world to himself. Therefore, all progress depends on the unreasonable man.
I learned about this quote by George Bernard Shaw from Veritasium’s video on The World’s Most Important Machine
It instantly reminded me of the Kaun Hai Tu scene from Gully Boy, where Murad embodies Shaw’s “unreasonable man.” In this scene, Murad is confronted by his father after quitting his job to pursue his dream. The father tries to convince Murad that his dreams need to match his reality. Murad then answers that he will change his reality to match his dreams.
In this excellent, data-driven talk, Alex Russell explains:
Jeremy Wagner and Rachel Andrew explain how to use analytics to select a Baseline target and what to do when you don’t have any real user data.
In cases where there isn’t any real user data:
[…] you can get a general idea of support for different Baseline targets through RUM Archive Insights, even allowing you to filter down to the country level.
They also address a practical follow-up question: what to do about features that don’t meet your chosen Baseline target.
Baseline doesn’t prescribe a specific path here, but the authors suggest a useful framework for categorizing features based on their “failure mode”:
- Enhancement: If the feature is used in an unsupported browser, the experience is not broken. The experience could possibly be degraded, but may not likely be noticeable to the user. Example:
loading="lazy".- Additive: The feature provides some additive benefits that may be noticeable—such as changes in page styling or some functionality. The difference may not be noticeable to users if the feature is unsupported, barring comparison in a browser that does support it. Example: Subgrid
- Critical: If the feature is unsupported, the user will have a negative user experience—possibly even one that’s broken altogether. Example: File System Access API used as a central and necessary feature.
They also highlight Clearleft’s browser support policy, where they target Baseline Widely available while still evaluating whether newer features can be used as progressive enhancements before ruling them out entirely.
I just saw Jason Pamental’s excellent talk on ‘The Life of <p>’. In this talk, Jason traces the evolution of paragraph design in print and shows how those typographic ideas can be applied using CSS.
There’s one moment during the Q&A where Jason mentions:
[…] you see the page gets small, but they don’t change the scale of the headers. So you end up with like an
<h1>with one word per line. It’s a really awkward break. So I think proportion with varying screen size is probably the most overlooked thing right now that I’d want to see people think about more.
I wasn’t a web developer 10 years ago when Jason gave this talk, but with over five years of experience now, it’s striking that I only became aware of proportional type scaling as an idea in the last couple of years. Nowadays, I use utopia.fyi to create fluid type (and space) scales across viewport ranges, which helps address the problem Jason mentioned.
Underlying our browser support policy are two foundational principles:
- Website content and core functionality should be accessible to everyone.
- It’s okay for websites to look different in different browsers.
If content is unreadable in some browsers, that’s a bug that we will fix.
If content is displayed slightly differently in some browsers, we consider that to be a facet of the web, not a bug. This means that there will sometimes be subtle visual and functional differences from browser to browser. We deem this acceptable provided content and core functionality are unaffected.
Earlier this month, I noted down Jason’s advice on how to get hired as a developer. I’d also like to add the following point from @brandon:
use the product
this is one of the first questions i ask in the interview anyways, ship and share something you’ve built on top of cloudflare. this alone will set you apart from most of the candidates, and it will show you are genuinely interested.
This complements Jason’s advice well, because it turns “show your work” into something concrete and product-specific.
Great talk by Andy Allen on how software designers can learn from game designers.
It reminded me of the Wheel by Adam Argyle, inspired by the arcade game Black Emperor. The game feel is so strong that I find myself scrolling up and down again and again just to play with it and experience that delightful bounce effect.
Jason Lengstorf on how to get hired as a developer: