Productivity traps I fall into regularly

 There’s some productivity traps I fall into on a regular basis. They all tie into my personal flavor of ADHD but it’s not totally fair to blame the ol’ meat-wad brain when I know when, where, and why it happens.

  1. There’s a Big Thing to do, so I can’t do anything else
  2. Boredom in meetings leads internet wanderings
  3. I should blog this real quick turns into work avoidance

The Big Thing…

One of my ADHD quirks is that if there’s a Big Thing to do that day (doctor’s appointment, package delivery, big presentation) then 100% of my brain goes to that important event. I can’t miss it. Nothing else gets done until The Big Thing gets done.

Conversely, after The Big Thing gets done, nothing else gets done either because my brain –flooded with dopamine– feels an enormous sense of accomplishment for remembering to do The Big Thing. I did The Big Thing. The Big Thing is done. Mission accomplished.

Completing that big task should free up new brain RAM allocation for the next task… but it doesn’t work that way. I spent so much energy keeping the horses in the barn, my brain won’t even consider letting them out again until much later in the evening. Hands numb from sitting on them try to grab a new task from the shelf, but can’t.

If anyone deals with this and knows how to either a) make The Big Thing less blocking or b) perform a tactial reset after The Big Thing, I’d love to know.

Boredom in meetings…

I have a bad habit where I get dopamine starved in a meeting and I naturally hop over to YouTube and start queuing up interesting videos. This regrettably creates a backlog of open tabs for me to clear out when I’m out of the meeting. This isn’t good. It’s so bad because I’ll even look for other videos to watch while I’m watching a video. Why do I do this to myself?

I need to reprogram my brain to smell boredom and find dopamine another –more temporary– way. I used to speed cube during meetings, that was probably my most successful era of doing meetings. I should try and go back to that. Or 3D print a bunch of fidgets. I bought a big drawing pad at Five Below and put it next to my desk and have had a little success sketching during meetings, but YouTube and social media are so damn convenient.

It’s not just video, it happens with blog posts too. One social media link. Links to another link. Links to another. Now I have 5,000 tabs. Oof.

Focus tools to block social media sites has been effective, but any other strategies I need to know about?

Blog this real quick…

If I ever think about something too much and it’s blogpost-worthy content, I try to fire up a draft to get the idea out of my head. If I can create a rough outline in my second brain now, I can come back to it later… but it’s a worm hole.

While the intent is to capture the idea, I naturally switch into writing mode trying to fill out sentences and shape paragraphs. I think it’s dopamine starvation again. When I’m writing in my note taking app, I’m in a fun place where I’m a high functioning adult and the desire to go back to trudging through thousands of lines of JSON is low in comparison.

Of all these productivity traps, writing a blog post is the least offensive to me. Writing ideas helps cement knowledge and that’s a good thing for a knowledge worker. It also keeps a skill I use at work (writing) sharp. But when it’s a form of escapism from what I actually need to do, I need to find efficient ways to curb that behavior. Time-boxing seems like a good idea here.

Here be dragons

I’m sharing these traps in the hope that I become more cognizant and accountable to myself. I can almost see myself falling down these traps in a third-person over camera angle. “The Big Thing” probably gets me the most often, I’d love to overcome it.

I’m curious about other brains. Have you found other traps I need to know about? Do you embrace the chaos and let the day fall apart? Do you have systems built up to self-correct?

daverupert.com

26 Jun 2025 at 15:42

Inverse text-sizing based on text-length with attr()

 Text reflow on the web has an interesting relationship with Responsive Web Design. As a column gets smaller text wraps and becomes taller1. But for large format display text, that’s not always what you want2. What I’ve wanted for awhile now is a way to inversely size text based on the text length (where the font-size gets smaller as the heading gets longer).

I’ve been chasing the white whale of responsive text-sizing for over a decade and I think I’ve got my best attempt to-date with the new attr() upgrades that landed in CSS (Chromium-only at time of writing).

See the Pen inverse text-sizing with attr by Dave Rupert (@davatron5000) on CodePen.

CSS’s attr() function got an upgrade this year where you can use it independent of content in pseudo-elements. They also added the ability to cast types to the values. Before that change all attributes were text strings and if you tried to use it in a calc() function, CSS would bail because you can’t multiply a pixel by a text string. With the new upgraded attr() function you can specify a type in the new type() function as the second parameter of attr(): attr(foo type(<number>)) .

Having these pieces of technology in place lets us mix in HTML attributes to our CSS math.

h1 {
  --ideal-cpl: 45;  
  --numchars: attr(data-numchars type(<number>));
  --ratio: calc(var(--ideal-cpl) / var(--numchars));
  --min-font-size: 1.2rem;
  --max-font-size: 4rem;
  
  font-size: clamp(
	  var(--min-font-size), 
	  var(--max-font-size) * var(--ratio), 
	  var(--max-font-size)
  );
}

We start with an --ideal-cpl, which is a typographic notion that there’s an ideal line-length at or near 66 characters per line and perhaps smaller on mobile (source: UXPin). Headings are probably less. We take that number and divide it by --numchars from our data-numchars attribute to get a ratio to multiply our text by (e.g. 45cpl / 60numchars = 0.75 or 45cpl / 30numchars = 1.5).

Then set some min/max variables and chuck it all into a clamp() function to enforce some limits. Anything under the --ideal-cpl will clamped to the --max-font-size and titles over the --ideal-cpl will shrink down until they hit the --min-font-size.

To help with graceful degradation in unsupported browsers (Safari, Firefox), we need to use the CSSOM @property syntax to typecast our --numchars custom property. This is a hint to browsers like Mobile Safari that --numchars is going to be a <number> and we can set a fallback value as well.

/* Property used to provide fallback to other browsers */
@property --numchars {
  syntax: "<number>";
  inherits: false;
  initial-value: 45; /* set to same value as --ideal-cpl */
}

Hopefully the “magic” here is pretty easy to understand but for completion’s sake, you’ll need to add data-numchars to your HTML to make this work.

<h1 data-numchars="71">
  Lorem ipsum dolor sit amet consectetur
  adipisicing elit. Vitae, maxime.
</h1>

Templating languages can help. Here’s what I do in my Liquid templates for Jekyll:


<h1 data-numchars="{{ title.size }}">{{ title }}</h1>

If you don’t have access to your template but somehow have access to JavaScript, you can do something this:

document.querySelectorAll('h1').forEach(el => 
	el.dataset.numchars = el.textContent.length
);

I’ve went ahead and rolled this technique out on my entire site and made a All Titles page where I can tweak variables to my liking. The result is I get to keep my chonky headlines on mobile, but almost no heading wrap more than three lines. One improvement might be to use more CSS math to snap to different short/medium/long sizes, so its less cacophonous… but on my site you only see one display title at a time, so it’s less of a big deal.

Scaling text responsivebly

With all that in place, we have a HTML/CSS-based solution for responsive text-sizing with minimal overhead, no JS required, no extra DOM, and a graceful degradation to older browsers. I intentionally kept this dumb to allow for text wrapping, but Paul Irish forked me to make a contenteditable demo work edge-to-edge like Kizu’s Fit-to-Width or Zach Leatherman’s old BigText jQuery plugin.

See the Pen inverse text-sizing with attr - bigtext.js style - contenteditable dealio by Paul Irish (@paulirish) on CodePen.

Impressive. There’s lots of ways to resize text responsively and I’ve added another one to the pile, so here’s a little guide with how I’m thinking about all the options.

  • If you want exact edge-to-edge text-sizing I’d probably recommend Kizu’s clever Fit-to-Width technique.
  • If you (and your designers) are okay with not-so-exact edge-to-edge sizing, Paul’s approach seems like a good candidate.
  • Don’t forget about SVG. Converting display text to outlines in Figma and exporting as SVG is also a nice option for exact fitting text one-offs, but doesn’t localize well.
  • If you want text to scale-inversely to its length but still wrap, use the approach in this post.
  • If you want text to be a bit more fluid between breakpoints, use clamp() + vw units.
  • If you want text to scale based on it’s parent’s width like a vector, then DON’T USE FitText and use clamp(var(--min-font-size), 10cqi, var(--max-font-size)) with a CSS container instead.
  • If you want strict typographic control at every breakpoint, use rem or px.

Lots of options for scalable type out there that give type-setting control freak nerds nightmares, have fun!

  1. Images have the opposite problem, wide desktop images lose hierarchy as the viewport gets smaller. And then portrait images get too much hierarchy when they scale up.

  2. Large format display text wrapping on mobile can even cause accessibility issues, whether it’s cognitive issue with one word per line or a motor issue where long words break the container and cause horizontal scrolling.

daverupert.com

25 Jun 2025 at 15:31



Refresh complete

ReloadX
Home
(169) All feeds

Last 24 hours
Download OPML
*
A Very Good Blog by Keenan
A Working Library
*
Alastair Johnston
Anna Havron
*
Annie
Annie Mueller
Apple Annie's Weblog
*
Articles – Dan Q
*
Baty.net posts
bgfay
Bix Dot Blog
Brandon's Journal
*
Chris Coyier
Chris Lovie-Tyler
Chris McLeod's blog
*
Colin Devroe
Colin Walker – Daily Feed
*
Content on Kwon.nyc
*
Crazy Stupid Tech
*
daverupert.com
Dino's Journal 📖
dispatches
dominikhofer dot me
Dragoncatcher the blog
Excursions
*
*
Flashing Palely in the Margins
Floating Flinders
For You
*
Frank Meeuwsen
frittiert.es
Hello! on Alan Ralph
*
Human Stuff from Lisa Olivera
inessential.com
*
jabel
*
Jake LaCaze
James Van Dyne
*
Jan-Lukas Else
*
Jim Nielsen's Blog
Jo's Blog
*
Kev Quirk
lili's musings
*
Live & Learn
*
Lucy Bellwood
Maggie Appleton
*
Manton Reece
*
Manu's Feed
Matt's Blog
*
maya.land
*
Meadow
Minutes to Midnight RSS feed
Nicky's Blog
*
Notes – Dan Q
*
On my Om
Own Your Web
Paul's Dev Notes
*
QC RSS
rebeccatoh.co
reverie v. reality
*
Rhoneisms
ribbonfarm
Robert Birming
*
Robert Birming
Robin Rendle
Robin Rendle
Sara Joy
*
Scripting News for email
Sentiers – Blog
*
Simon Collison | Articles & Stream
strandlines
*
Tangible Life
the dream machine
*
The Torment Nexus
*
thejaymo
theunderground.blog
Thoughtless Ramblings
*
tomcritchlow.com
*
Tracy Durnell
*
Winnie Lim
*
yours, tiramisu

About Reader


Reader is a public/private RSS & Atom feed reader.


The page is publicly available but all admin and post actions are gated behind login checks. Anyone is welcome to come and have a look at what feeds are listed — the posts visible will be everything within the last week and be unaffected by my read/unread status.


Reader currently updates every six hours.


Close

Search




x
Colin Walker Colin Walker colin@colinwalker.blog