daverupert.com

Every token is a feature

Thu, 19 Dec 2024 15:12:00 +0000

I’m in the middle of a design tokens project and I thought I’d share something I’m learning that is probably obvious to everyone else; every design token is a feature.

A token is a magical contract between design and engineering, if we agree to use the same name to abstractly refer to the same value, it will produce a desired outcome. That bridge alone is probably worth the investment, but tokens solve even more organizational problems. The mobile app and the website can look the same by sharing a single JSON file. But wait, there’s more! If the blue a different team chose is not blue enough for you, you can make your own blue and apply it at the global scope or the individual element scope. Tokens as an organizational feature are a powerful concept but there’s tons of nuance packed behind it.

Like features, too many tokens can bloat your system. I recently learned –because I’m lucky to work with people who work on browsers– there’s a not-so-theoretical limit where the browser starts taking a performance hit based purely on the number of CSS variables. There’s no hard upper limit on the number of variables (we drew a line at ~500) because the limit ultimately depends on the size and the depth of your DOM. Style recalcs and tree walking are expensive problems for a browser. Alias tokens like --foo: var(--bar) compound the problem and the more static you can be, like --foo: #bada55, the better. Infinite customizability and peak performance are often at odds.

Like features, too many tokens can create organizational problems! This is the opposite of what I said above, how can that be? It’s possible to generate enough tokens that they become their own hyperobject, impossible to comprehend from the outside, so well-meaning people eject from the system. Detached instances. One-offs. Snowflakes.

Like features, tokens can create little piles of technical debt. “Is anyone still using --color-beefcake-primary-2?” you shout into the void of the team chat. No one responds because no one knows. The person who does know left the company five months ago. Alas, we’ll bolt on more until we find time to fix it. Always adding. Never subtracting.

Like features, some tokens are going to have a massive payoff if implemented and some tokens the user benefit is less clear. You’re passing organizational complexity on to the user. Like features, you can build over-complicated machinery around a simple concept like sharing values. Like features, people will build every part without considering whether they actually need each facet.

Generally speaking, if someone wants to implement hundreds or thousands of little features in an application, that’s probably a red flag. If-statements are expensive over their lifetime. But from my experience, a good system of tokens inside a cascade of meaningful componentry can make a product resonate with consistency across many surfaces, while providing just enough customizability to differentiate when necessary.

Intermittent fasting

Wed, 11 Dec 2024 04:10:00 +0000

A doctor told me to look into intermittent fasting. Not for weight loss, but for ADHD. There’s some new data that suggests a link between ADHD and insulin in the brain. Based on that science, intermittent fasting or a ketogenic diet –which can help improve insulin resistance– might help my brain. I’m a week into it and am seeing some weight loss, but it’s hard to tell with the ADHD without measuring my brainflorps per second. I might be more focused, but hunger and “hangry” bring their own distractions.

I’m skeptical, to say the least. Intermittent fasting makes frequent appearances in my YouTube shorts with balding Joe Rogan clones dressed in all black selling workout supplements. It has a whiff of being a cure-all. To counter that skepticism, I read a book called Life in the Fasting Lane co-authored by Dr Jason Fung, who was specifically recommended to me. It’s a mix of doctorly advice and testimonials from advocates who have had success with fasting. As scientific as the book tries to be, it undoes its own credibility pitching intermittent fasting with all the hallmarks of a fad elimination diet:

Lose weight in 30 days
Reduce cravings
Live longer
Reverse diseases
Helps you focus at work
Improves your sex life
Big pharma doesn’t want you to know about this one weird trick!
Used by ancient civilizations. Ugh. The appeal to history (ancient, therefore good!) is a major pet peeve of mine.
And my least favorite: It doesn’t cure cancer, but it cures obesity, which causes all different kinds of cancer… so we’re not gonna say it cures cancer because that’s a douchebag thing to say, but it doesn’t not cure cancer if you catch our drift (wink).

I do appreciate that the book calls out “Calories-In/Calories-Out” as a myth that works 1% of the time. But it’s hard to shake the feeling that eliminating meals or days worth of food isn’t a macro-version of calories-in/calories-out, where you measure calories in weeks instead of per meal. I suppose the key difference is the duration between meals allows my body to enter ketosis (read: a starving state) which will consume my excess fat stores instead of my morning breakfast tacos adding to those fat stores.

To be honest, I’m a good candidate for this fad diet. I can sustain myself on a couple meals a day. I could skip lunch most days. Skipping breakfast though is hard. Not putting creamer in my morning coffee is hard. Not having a little after dinner snack with the kids is hard. Not eating is not my favorite, but I’m going to trust the process for a bit and hopefully it’ll help a weary brain like mine.

I got the ADHD, too

Fri, 06 Dec 2024 15:29:00 +0000

This month I got my official diagnosis for Adult ADHD. It’s fun to share experiences with friends. While ADHD presents some new waters to navigate, it isn’t exactly news to me. Thanks to Dr. TikTok, I’ve suspected this outcome for a few years now. It’s nice to have a proper diagnosis though. If I’m struggling to focus or feeling overwhelmed, I know the probable root cause is how my brain processes dopamine and norepinephrine impacting my executive function.

There are different flavors of ADHD, so I can only describe my experience:

I crave “optimal stimulation” – 1 task = too little. 3-5 tasks = perfect, ideal. 6+ tasks = uh-oh, all the spinning plates come crashing down.
I experience periods of hyperfocus – I often will lock in on an interesting problem and work for hours and forget to eat.
Difficulty with tasks when overwhelmed – When overwhelmed (which is always, I have some generalized anxiety too), I’m unable to summon focus for even the smallest of tasks.
Sensitivity to messy environments – Related to optimal stimulation, cluttered and messy environments (a common ADHD issue) creates a feeling of overwhelm for me.
Sensory-seeking behaviors and fidgeting (classic restless leg syndrome)
I don’t have the hyperactive part of ADHD.
I’m pretty attentive and a good listener… until I’m not.

I’ve developed a lot of coping and masking strategies over the years that have allowed me to maintain a decent level of productivity. In my 20s I used to manage this by brute force and caffeine. But now that I’m in my 40s with a lot more responsibilities and spinning plates, I feel the reins slipping a bit. To help with this, I’m trying out a non-stimulant sNRI medication that tries to repair that norepinephrine processing. It takes a week or so to fully activate so it’s not an instant fix, and to be honest I don’t quite know what to expect. I’m excited to see if it makes a difference but even if it doesn’t I’m happy to be on a journey.

Anyways, cheers to unique brains.

Goodbye, Moogs

Tue, 26 Nov 2024 03:08:00 +0000

The people who found you in the alley called you Cowboy. We called you Moogs, Moogers, Moogerton, Mr Moogs, Meesta, Two Meestas, Beef, Roast Beef, Roast Beefy Weefy, Kitty, Kitty cat, Long cat, Kitty kitty, Pretty kitty, and Meow meow. Those were all your names.

Today we had to say goodbye to our cat Moogs (pronounced “Moo” like the cow says + “gs”). He was nearly 19 years old, which is about all you can ask for from a great cat. A senior cat with a thyroid problem – so his passing is not an incredible surprise – but he took a sudden downturn over the weekend. He died in his sleep.

My wife adopted him before we were even dating in 2006. I never had a cat, was more of a dog person, and I made it my mission to befriend the cat to win her over. I succeeded in my goal and he let me hold him like a baby. Little did I know he would spend the next 18 years of my life with him sitting on my body for warmth and waking me up at six in the morning.

When we lived in LA he would perch majestically on the sills of the open windows basking in the warm sun’s rays because that’s how LA’s perfect weather works. He’d hop in-and-out of the house, hunting, cruising, and getting into tussles with the other alley cats. We paid a lot in vet bills but he had a good life jumping along the craftsman rooftops.

He didn’t enjoy moving to Austin, he howled the whole 1400 mile journey and when we got to Austin, he hid himself in the exposed soffit of our mid-remodel kitchen. After two weeks he came out and got used to the new home and got comfortable being an indoor-outdoor cat again. He’d spend days in our neighbor Cleo’s wisteria bushes hunting small birds. He was there when we adopted our dog Rudy and learned to hold his own against dogs. And he was there when we brought our babies home from the hospital and he learned to tolerate toddlers.

When we moved a second time to North Austin, he didn’t like that move either. He quit going outside as much and I think after that his quality of life started to decline. Three years ago, I noticed he was losing weight, felt like a skeleton with fur, and was extra ornery about food. The vet diagnosed him with hyperthyroidism and he needed to be on medication.

Moogs was sweet and friendly – well, as friendly as cats can be. When guests came over he would saunter into the room and find the person most allergic to cats and nuzzle them. He had an uncanny talent for that. He was social, but not. He would give an affectionate little headbutt whenever he wanted attention. He’d knead his claws into your thigh when you tried to watch television. And he’d prowl the house at night and wake you up with a butthole to the face. Cats, man. Cats.

Moogs was an incredible cat. My first and probably only cat, to be honest. I won’t miss his howls for breakfast each morning, but I will miss the soft brushes against my legs to say hello. He was a part of our family from the beginning, it will be different without him.

Hammers

Tue, 22 Oct 2024 14:15:00 +0000

I bet if you were someone who could make a hammer that would have been a good stable job for years, centuries even. Almost everyone needs a hammer at some point in their life.

“Hey, where’d you get that hammer?”
“Oh, you gotta talk to Bartholomew.”

Then some guy, Greg, would see how busy the hammersmith is making hammers one at-a-time and say, “I’m going to make hammers one hundred at a time!” He’d pay Bartholomew not to make him one hammer, but to make a mold that could make one hundred hammers at a time. Greg has rich parents, he can afford this sort of risky business venture. One hundred hammers for the price of ten, that’s profit.

After the hammer mold, Bartholomew would still get paid. No one actually likes pouring molten iron and hammering, but Bartholomew doesn’t mind. He’s making less money per hammer, but he’s also producing more hammers with a lot less effort, so it nets out okay. The job is less interesting – making hammers and nothing else – but he didn’t like being a salesman and dealing with wayward customer requests anyways. There’s lots of money in churning out hammers this way, it’s more efficient and people like Greg love selling them and making money. Bartholomew buys himself a new ox cart.

Then some other guy, Jeff, seeing all those hammers and all that money, would say “I’m going to make a machine that makes a million hammers a day.” Jeff knows a regional lord who is friends with the king and has big treasure chests. He’d hire Bartholomew and his hammersmith friends to build a giant complex machine with whistles and gauges and a furnace that makes ten hammers a second. A million hammers a day for the price of a thousand hammers, now that’s profit!

The profit charts are going up. Hammers are about as cheap as possible to mass produce… except now Bartholomew and his hammersmith friends are starting to catch the ire of bookkeepers. They’re starting to look expensive compared to the penny hammers that sell for $10. They fire Bartholomew. He’s given three months of pay, which is nice, but in exchange he has to sign a contract saying he’ll never make another hammer machine again in his life. Hopefully Bartholomew squirreled away enough money to retire with dignity, otherwise what’s an old hammersmith do when there’s no more hammers to make?

Where web components shine

Mon, 21 Oct 2024 14:28:00 +0000

In this job we need to think a lot about the tools we choose and why, so I cataloged all the places where web components (for me) feel like “the right tool for the job”. Your list may be different and I’d love to read it. And because I don’t want this to be 100% propaganda, I’ll also cover some of the not-so-great parts of web components as well.

The good parts

Here’s an incomplete list of situations where I think web components are a good choice.

For leaf nodes - Web components are great at leaf nodes.
For presentational components that wrap other components - The <slot> element is fantastic for this, but you could write a basic CSS class instead. The first rule of web components is: Not everything needs to be a web component.
For building a design system - They do this too.
For progressively enhancing regular ass HTML - Super good at this.
When you want to View Source - Most folks don’t care about this anymore but debugging my-button is a lot easier than div.spf50 and you don’t have to rely on sourcemaps.
When you want to make a site without build tools - Build tooling is typically not the starting point for most web component projects.
When building a one-off project - In the same vein as “buildless” components, eliminating dependencies decreases maintenance burdens over the long haul when you have to come back to the project weeks, months, or years later.
For prototyping - More buildless talk, but if you need to get up and going fast, web components zoom.
When you need to keep a low-memory profile - I think you’ll find on average your performance floor is much lower with web components, which makes them blazingly fast.
When you need style encapsulation - imho, web components are a little too good at this but good to know Shadow DOM style application is also blazingly fast.
When you want small, atomic template updates - Some (not all) web component libraries use an html tagged template literal which gives you JSX-like template authoring without a transformer or compiler. Tagged template literals are also blazingly fast with atomic updates over full component re-renders.
When your components need to exist across different tech stacks - If your company lets departments pick their own tech stack or your company acquires other companies and you need a bit of UI consistency between projects, web components are a great choice.
When you’re demoing an accessibility pattern, animation, or CSS-Trick - Why not package it in a web component so people can pick it up and drop it into their project? These puppies are hyper-distributable.
When you make a third-party embed widget - If you need a spicy <iframe>, web components do that and the style encapsulation of the Shadow DOM would probably make your life easier with less code.
When you want to build big applications - You can build Photoshop with web components. Companies build apps with web components every day. And they use Shadow DOM.
When you have designers who can code - Most designers don’t have an appetite or ability to spin up a whole dev environment, but you might be able to convince some to write HTML in a CodePen. If your designer is cool with spinning up a local dev environment, pay them more.

The not-so great parts

No technology is perfect so here are some of the rough edges of web components, where people commonly have trouble, or where I’ve found them to not be the best abstraction.

Shadow DOM - I think everyone’s first encounter with the Shadow DOM ends in catastrophe. It can be confusing and even smart people I know have beef with it. I can say that the more you work with it the more intuitive it becomes, but Shadow DOM does have some gotcha moments that can be frustrating.
SSR - You can SSR web components using Declarative Shadow DOM, but there’s not a lot of literature out there which leads me to believe it’s either kludgy, too library-specific, or both. If this is a non-starter for you, check out Enhance which does this out of the box.
Pages - You can use a web component as your page-level abstraction and leverage some kind of web component-based router… but you’re probably better off keeping it simple and using server generated HTML as your page-level abstraction.
Accessibility - There’s been some long standing issues with Cross-Root ARIA (e.g. associating a label in the document with an input inside a shadow root). Workarounds exist but the good news is that referencetarget is rolling out in Chromium and solves this problem. Hopefully other browsers pick it up soon.
Making a compiler for your JS framework - This is another post entirely, but I can say that over the last couple weeks I’ve had about three years worth of Community Group discussions. Hopefully some ombudsman-ship and progress can happen here.

As always, your mileage may vary. Ultimately the technologies you choose probably come down to what’s cool at the time, what people think solves their problems, and what your team and decision makers feel comfortable with at the time. That said, in the year 2024 of our LORD, despite the apparent limitations I do think these are scenarios where web components are a great fit.

Vibe Check №35

Fri, 11 Oct 2024 04:00:00 +0000

School is back in session, sports are in full swing, we’re tossed and turned by the weekly routine. This past month has been a season of fixing and repair and I’m thankful everything went well and we’re (hopefully) through the hard parts.

Fixing electrical problems

Ramping up to Spooky Month, the lights in our house were acting up. We’ve always had the occasional power problem; lights dimming, oven clocks resetting, but they were random and isolated. But around the beginning of September our lights would flicker for a solid minute every time the A/C kicked on. I was getting concerned about a potential fire – and no matter what anyone says, I was not concerned about a ghost, ghoul, specter, gremlin, dracula or otherwise – so I scheduled a bunch of maintenance calls:

An electrician - He didn’t see any ~~ghosts~~ red flags, but a bar in our main breaker panel was a little loose and possibly shaking when the A/C kicked on, causing the flicker. He also swapped out a non-LED dimmer for an LED dimmer and that seems to have fixed the extra-spooky dining room.
A dryer vent cleaner - Thanks to a D80 code on our LG dryer, I got suspicious that a clogged dryer vent was causing extra draw on electrical system. An older gentleman who liked to talk helped us clean out the 7ft pipe that shoots hot air and lint out of our roof. Works great now ~~and no gremlins~~.
A refrigerator repair man - The stainless steel column in the middle of our side-by-side fridge was hot to the touch. Heat means energy. Heat is also not what you want in a fridge. Our fridge was over-working to keep itself cool but also freezing our groceries in the non-freezer side. A repair man pulled the fridge out and vacuumed the condenser unit ~~like Luigi’s mansion~~. Easy enough and cool to the touch again.
A new garage door opener - The electrical surges in our house fried the motherboard in our garage door opener, so we replaced the unit and now it has Wi-Fi, an app, and other features I don’t need. It’s so much quieter now and does not sounds like a T-Rex ~~or a howling wolf man~~ anymore.

The flickering lights seem to have resolved. All ghosts busted.

Fixing a knee

It wouldn’t be a year at the Ruperts house without maxing out our deductible. This time my wife’s tennis habit got the best of her and she needed to undergo laparoscopic surgery to repair a torn meniscus. Surgery went fine, she was walking the same day and (even in bandages) was walking better than before. Surgeries are no fun, but necessary at times.

Fixing the dogs

The week after my wife’s surgery our two new adopted pups had their scheduled appointment from the adoption center to get spayed. A non-event except that two young dogs in two cones is an absolute ruckus. Days and days of bonking into doors and knees (some of which had surgery the week before).

After a week the cones were off and they’re back to themselves; eating rocks, wrassling, and digging holes in my yard and whatnot.

Fixes on the horizon

Thousands of dollars and a handful of stressful weeks later we’re on a path to recovery. Shaking off the stress of the last six weeks is yet another thing to fix. And the fixes don’t stop. The near future is going to be figuring out our next major family expense. We need to update both our cars, the kids want a camper again, and almost all the rooms in our house need updating. I also made an enormous mess decanting all our hoarding piles while trying to clean the garage and need new shelving and storage. Oops, will fix.

Stats

🧠 Learning

Went on a deep dive about Kowloon Walled City, the densest city in the world renown for its lawlessness, crime, and poverty. Kowloon has a deep history under Chinese and British occupation in Hong Kong. A Chinese settlement within Hong Kong territory, Kowloon self-regulated. While I knew about pre-modern China’s opiod crisis, I didn’t understand England’s role and learned how they were the drug dealers in this situation, trading opium from (occupied) India so they could get cheap tea and dinnerware. Fast-forward a few wars, opium dens and organized crime play a prominent role in the story of Kowloon but somehow the urban maze of dystopian unregulated buildings has a charming sense of community to it.
- The Densest City on Earth
- The Densest City In The World Had a Strange Secret…

📖 Reading

Finished

The Adventure Zone Vol. 6 by McElroy, Pietsch, McElroy - My annual reading of tres horny boys. Its been long enough I forget moments from the original podcast so it’s fun to relive them in graphic novel form.
Awe by Dacher Keltner - I love the notion of “micromoments of awe” and consider myself an awe-seeker, but I don’t think I’m new age enough for this book.
The Anxious Generation by Jonathan Haidt - Phones and access to social media are harming our children. As a parent, I think there are valid concerns about device usage but I don’t think you can take this book as gospel. There’s a If Books Could Kill episode on Anxious Generation that makes for a good pairing.
Coda: False Dawns by Spurrier & Bergara - A continuation of the super good Coda post-apocalyptic fantasy universe. This time a preacher comes to town.
Where Good Ideas Come From by Stephen Johnson - A recommendation from a coworker and probably my favorite book of the past two months. Validates a lot of how my own brain works by making connections in adjacent ideas and technologies.

Started

A Wizard of Earthsea by Ursula K. Le Guin
Misc. comics

📝 Blogging

The Dev Tools Performance Monitor Panel - a post about a helpful but somewhat hidden debugging tool in Dev Tools
Finding questions and answers about why I like books - a post about being a book-a-week person
Good forms - a post about forms
Hibiclens - a post about combatting armpit odor

📺 Media

Movies

Beetlejuice, Beetlejuice (2024) - A more surreal sequel. Perhaps too many plot lines crammed into one 90 minute film but a fun addition to the series with most of the original cast plus some welcome additions.

Podcasts

Scene on Radio S7: Capitalism - An in-depth examination on the origins of capitalism and its impact on democracy. A MUST LISTEN!
Living Planet - An environmentalist podcast that seeks to answer questions like: What’s better: coffee or tea? What’s better: dairy vs plant-based milk? I think about these dichotomies a lot so this feels like a podcast engineered in a lab for me.
The Adventure Zone Versus Dracula - Finished this actual play arc. Not my favorite but still fun.
The Adventure Zone: Abnimals - New season, I’m a bit lost.

🎙 Recording

Some great guests talking about everything from game dev, to AI, to WordPress, to bespoke apps for adding multimedia experiences to live music.

ShopTalk

🤖 Gunpla

Started on the MG Gundam Astray Red Frame

⌨️ Open source

Been active in the Web Components Community Group for { reasons }

👾 Video games

Brawl Stars - Got roped into playing this with my son and his friends again. There was a Spongebob Squarepants even and that was fun but I’m maxed out and am not picking it up much anymore. It’s a repetitive game but they do good to make it seem different (daily map rotations and updates, etc).
Bought the new Zelda, haven’t played it but my son is almost done.

Hibiclens

Sat, 14 Sep 2024 18:52:00 +0000

Every two-to-four years my body chemistry changes and my armpits start to reject my deodorant with an intense itch. All that aluminum has gunked up the works I guess. Usually cycling out deodorants works fine, but this time it didn’t work because my armpits were overpowering all the other deodorants.

I tried a tactical reset and took the “No deodorant challenge”, the legend –which I remember my hippie step-brother Nik telling me about thirty years ago– that if you stop using deodorant for two weeks the oils in your body naturally recalibrate and you stops smelling… but this urban legend very much did not work. I smelled horrible all the time.

I casually mentioned this issue to my dermatologist and he was quick to recommend this homely teal bottle of over-the-counter 1970s logotype, Hibiclens.

I like to think the “hibi” part of Hibiclens stands for “hibiscus” because it’s a pink liquid (or foam) that you apply like soap and rinse off. It’s colored pink because it’s an anti-septic and hospitals like to color their liquids, but the reason it works –as my dermatologist explained– is that bacteria creates the odor in your armpits. That was news to me. My prior understanding was that puberty causes teenagers to grow green stink lines that shoot out from their bodies. Guess the science there has evolved.

I’m happy to report that Hibiclens works wonderfully and I’m pleased with the results. I don’t wear deodorant everyday anymore, my armpits aren’t irritated, and I only need to apply a squeeze of Hibiclens every three days or so (but even that timeline appears to be stretching out). I do sometimes wear deodorant when the stakes are high, but day-to-day working form home is au naturale. There’s a small satisfaction that the answer to my fragile-masculine deodorant FOR MEN problems is a pink liquid in a Tiffany blue teal bottle. Time will tell, however, if it really does solve my problems. I’ll follow up in two-to-four years to see if it still works.

Good forms

Fri, 13 Sep 2024 13:25:00 +0000

Brian LeRoux posted a few thoughts about forms and the idea of a “good form” resonated with me so I dogpiled some of my own thoughts and experiences on it. Here’s a compilation of those ideas. I’m sure this is incomplete and would love to see your list.

Good forms work without client JavaScript (Brian LeRoux)
Good forms always submit (Brian LeRoux)
Good forms remember values and display problems inline (Brian LeRoux)
Good login forms work with password managers (Mingo Hogan)
Good forms use a <form> tag
Good forms use appropriate input types
Good forms have clear labelled inputs and buttons
Good forms have focus states
Good forms have logical tab order
Good forms allow paste
Good form elements leverage the inputmode attribute
Good form elements leverage the autocomplete attribute
Good search forms wrap the <form> tag in a <search> element
Good forms can be reset with a <button type=reset>
Good forms participate in formData
Good forms don’t use placeholder as a label
Good forms work on phones
Good forms don’t popup and ask for personal information
Good forms only ask for what is necessary and aren’t too long
Good forms use HTTPS
Good forms use the proper HTTP verbs
Good forms validate on the client AND on the server
Good forms have been driven with a screen reader before going to production
Good forms clearly denote required attributes
Good forms warn about costly or destructive actions
Good forms make the baby Jesus smile
Good authenticated forms should have a server-generated nonce value
Good forms should do a pre-flight check for navigator.onLine before attempting a submit
Good forms start with accent-color for styling and only get more complex if necessary
Good forms see custom controls as a radioactive asset that must be removed at the earliest opportunity

Anyways. People should talk about forms more. Here’s some more resources on good form design.

Form Design Patterns by Adam Silver
Web Form Design by Luke Wroblewski
Form Design Mastery by Adam Silver
Better Onboarding by Krystal Higgins

Finding questions and answers about why I like books

Thu, 12 Sep 2024 14:28:00 +0000

I saw a tweet awhile back that sent my brain to a far off galaxy…

Most people are proud of their reading habit.

But for many, it’s just an act of productive procrastination.

I’m looking at you “I read a book a week” club

Here’s how you know:

Are you reading to find answers to questions?…or are you reading to find questions to answer?
— Alex Hormozi (@AlexHormozi) July 2, 2022

Of all the injustices happening in the world… you know who needs to be taken down a peg? The Book-a-Week People. Fuck those guys. With their books in their Zoom backgrounds. That bothers me. Fuck them.

I know the original post is part of some weird hustle culture subgenre, but it’s probably no surprise to folks reading that I like books and fit this targeted demographic. After pondering whether I’m “finding answers to questions or questions to answer” my answer is a resounding, “…I guess?”

A lot of why I read is about juxtaposition. I read business books to juxtapose my experience against the Platonic ideal of “good business”. I read about social justice to juxtapose my lived experience against others lived experience. I read science fiction to juxtapose the present against futures I haven’t imagined. I read non-fiction airport books because I like facts and social science garbage. I read books on topics I’m already an expert in to see if there’s information that further informs my perspective. I read to teleport to different places, minds, times, and rooms where it happened.

I read to escape. I read to find myself. I read because I like facts. I read because I like fiction. I read for entertainment. I read to fall asleep. I listen to books to help me finish mundane tasks like doing the dishes every night. And I listen to books because there’s a slight communistic thrill of getting them from the library.

There’s a widely accepted idea out there that “the best way to become a better writer is to become a better reader.” I think Stephen King said it, but I can’t find the quote. Either way, I want to become a better writer. Whether fact or fiction, I want the ability to not struggle when putting thoughts on the page. Oh to partake in this magical osmosis! The transitive impartation of skills! Let me flex the language encoding and decoding synapses in my 40-watt brain.

And sometimes reading is out of due diligence. Like… if you’re going to start a job as a manager… read a book on management? Or ten? You’re dealing with people’s lives and careers, seems like the least you could do. If you’re going to talk or blog on a topic and there’s a relevant book… read that before showing your ass? A thought backed by some literature seems better than regurgitating TikToks.

Books are strange objects. Chapters and chapters of coherent research and lived experiences assembled by people who wanted to put it all down in one place. Edited by actual editors who like editing. Designed— down to the weight of the paper, the typography, and the illustration on the cover— to make the experience of reading it enjoyable. Books are uncanny and impractical objects. A terribly inefficient way to encode information from one brain to another, but an excellent way to tell a story.

You can also just like books for no reason.

Anyways, books. Check ‘em out.

The Dev Tools Performance Monitor Panel

Tue, 03 Sep 2024 14:48:00 +0000

Weeks ago I was looking in to a performance issue for our animated spinner component and stumbled across a tool in DevTools I hadn’t used before: The Performance Monitor Panel. In you open Dev Tools > More Tools > Performance Monitor you’ll see some helpful high-level charts and graphs of the realtime performance data of your UI.

The Performance Monitor collects performance data in realtime and puts it on a graph. It’s handy for detecting performance problems at a high-level. If your CPU, memory, DOM node count, or event listeners only go up while clicking around, you probably have a leak in your code. The part I was most interested in were style recalculations per second and layouts per second. Our spinner component was triggering style recalculations and layout calls at a rate of 120 per second. Yikes! That’s a lot of extra work on the CPU.

Next I turned on Dev Tools > More Tools > Rendering > Show Paint Flashes and I could immediately see the tactile feedback of green boxes thrashing around as the browser repainted the component hundreds of times per second. The green paint boxes confirmed that this UI work was happening on the main thread instead of the compositor thread. The Performance Monitor showed my CPU usage at 5-9% of my Mackbook Pro. Double Yikes.

The Performance Monitor panel pairs nicely with the top-level Performance panel. While the Performance Monitor panel is very high-level, the Performance panel is an in-depth debugging tool where you can inspect a snapshot of your app down to each function and render call.

Capturing a snapshot in the Performance panel confirmed what I was now seeing. I could see the “red line of death” of dropped frames where I locked the main thread. The remediation steps were pretty simple but I did need to strip down and recode how our animation worked.

Avoid properties that trigger paint or layout
Tamp down layout recalcs with contain
Use overflow: hidden instead of CSS masks

It took a couple of prototypes to shop around a workable solution. The good news is our animation is off-loaded to the compositor instead of the main thread now. CPU use is now at 0.2% (down from 5-9%) and our recalcs and layouts are down to 0 but the animation still chugs along. Truth be told, a loading spinner is a pretty insignificant component and is only temporary, but reducing CPU usage by 10% here makes room for other JavaScript activities… like… y’know… fetching and parsing data.

Vibe Check №34

Sat, 24 Aug 2024 03:37:00 +0000

The temperatures soared over 100ºF and the yard is dead and everything smells roasted. But the ten day forecast shows a ten degree dip and that is cause for celebration. Another school year has started. My son has started middle school and my daughter is now in third grade. It’s shocking how fast life goes. And on the workfront, the pace is picking up now that everyone has come back from summer vacation.

A lot has transpired since the previous vibe check (vacations, new pets, rock shows). To start it off, my family escaped the heat and went to San Diego (as is the custom) for one good week and one awful week…

San Diego: The First Good Week

We flew out to Phoenix to join up with my wife’s family and caravan out to San Diego. We had a family dinner the night before and got to see my one year old grandnephew for the first time in a long while. He’s a sweet kid but does not want his Granduncle Dave holding him yet.

The next day we loaded up the beach gear and drove to a resort in Mission Beach in San Diego for a four day stay. We had a great time with my wife’s family letting the cousins run loose while grown-ups played tennis, pickleball, and I played my annual round of golf with my male in-laws. After four days of big family time we scooted up to Encinitas to stay for two nights with our Austin friends whose summer rental had a guest house.

Encinitas was super charming. We stayed near Beacons Beach which is one of those cool beaches at the bottom of a cliffside. We beached pretty hard. My daughter and her oldest bestie pranced up and down the shoreline for hours and she even learned to surf. The contrast between Mission and Encinitas couldn’t be more stark. The trip could have ended there and would have been one of the best vacations in the books. But we weren’t done! We planned to extend the trip with a one-week rental in Mission Bay.

San Diego: The Second Awful Week

The minute we checked into our beachside rental the whole vibe shifted. From tranquil Encinitas to getting blasted with the sounds (and smells) of Mission Beach. Honking, motorcycles, bottles clanking, fighting, garbage trucks, neighbors blasting bad music, and smells drifting up from the alleyway. It felt like going from a yoga retreat to a frat house. Then it got worse. That night our daughter said she didn’t feel well and the next day my wife started going downhill.

A week of beach fun turned into spending thousands of dollars to be sick inside a beach-adjacent summer rental watching SpongeBob Squarepants on repeat. After three urgent care visits over two days the sick members of our party had the required antibiotics to start feeling better. The next day, we went home.

And –as if it couldn’t get any better– I got COVID on the plane ride back. Ughck.

We adopted two new pups

Laneige (aka “Laney”) - A black lab mix with one brown eye and one blue eye. She’s an attention thief who is not shy about demanding pets.
Rosebud - A lab mix with expressive pointy ears and two blue eyes (some heeler in there?). She’s the more anxious of the two, but once befriended will roll over for belly rubs.

Our kids have been asking for a new dog for over a year. Every day this summer I’d step into the house and my daughter would spin a laptop around to show me the new dogs she found on the Austin Pets Alive! website. She even wrote a song to try to convince me to get a dog. 🥺 They were dead set on a pup named “Laneige” (named by the shelter after a Korean lip balm).

After dropping the kids off at grandma’s house for a long weekend, we set our plan into action: adopt a dog and surprise the kids. But our plans changed when the shelter brought out Laneige’s sister Rosebud (also named after a lip balm) to our meet and greet. Her pointy ears and blue eyes were too cute. We tend to play it more conservative when it comes to big life choices but we decided to go full stupid for once and surprise the kids with not one dog, but two dogs!

Names may change and we daily ask ourselves “Did we overdo it?” but generally we’re happy with the new additions.

Frostapalooza

Photo by Will Brower

A year ago Brad Frost called my wife and I to share a wild idea for his 40th birthday party: get all his musician friends from all over the world together on one stage for one night of rocking out. Over the course of the next year we picked songs, learned parts, recorded tracks, hoping –but never knowing– how it would all turn out when we assembled in Pittsburgh for one night of rock.

It. Was. Phenomenal.

Nothing could have prepared me for the blast from the five piece horn section. It sounded perfect. It felt big. Dozens of people on stage playing together for the first time, but you wouldn’t know it. Music –good music– filling the halls of an old church. I’m a foot away from a bass guitar amp but I can’t hear the bass because there’s so much music happening. In the crowd I see people listening to my wife sing –they’re singing along– and it takes me back to when I first heard her sing at a karaoke bar in Los Angeles when I fell in love with her.

Photo from Brad Frost

Outside the main event, it felt good to put kindling on some friendships. I got to see Chris, which is always pleasant to see the one person I’m guaranteed to have an hour long conversation every week. Zach & Danh (my co-hosts from Aside Quest) flew up on the same flight. But I got to see and chat with new and old friends as well; Ian, Dan, Ben, Phil, Mike, Jina, Burton, Adekunle, Kevin, Brian, Scott, Josh, Veronika, Ryan, Joshua, Jeff & Jenn & Arlo, Jeremy & Jessica, Daniel & Jessi, Rebecca & Ryan, and countless more folks. Since the US web development conference scene has more or less imploded since the pandemic, this felt a bit like a family reunion with some of my favorite people from around the world.

In the end, Frostapalooza was a magical night celebrating the power of music and friendship. It feels a bit like a dream now and when I explain it to people my words fall short. An ephemeral joyous moment and I have no idea if I’ll do anything like that in my life again. That’s special. The biggest thanks to Brad, Melissa, and Ella who sacrificed a lot of time, money, and life-force to pull it off.

The stats, o the stats.

Okay, quantifiers. Calm down. Here’s your beefsteak of itemized inputs and outputs.

🧠 Learning

When I got sick I did a deep dive in playing with Obsidian and building a vault. I’m still on Notion (for now) but the jump is less intimidating. I like the indie/privacy angle of Obsidian a lot but from a UX perspective it feels “finicky” when mousing over content in a way that Notion doesn’t. The level of customization is also nicer in Obsidian, but also a potential endless rabbit hole for my distracted brain. Moving my “second brain” is not a task I want to take lightly.
Watching countless Obsidian videos exposed me to a new organization system: August Bradley’s “Pillars, Pipelines, and Vaults” (PPV) system. I’m not ready to ditch my Notion PARA setup, but the idea PPV introduces that I’m gravitating towards is that my brain is a system of “Inputs” (links, books, and notes vaults) and “Outputs” (blog posts, side projects, and task pipelines) and those exist across “Areas” (pillars) in my life. Inputs need organization (e.g. folders and/or tags) and outputs need a process (e.g. a kanban). I think Obsidian fits this paradigm better than Notion.

📖 Reading

Not my best summer of reading but I’m enjoying the slower pace.

Finished

Like, Comment, Subscribe by Mark Bergen - The history of YouTube. A great look into how this product which changed the world evolved (and also failed to evolve).
Read Write Own by Chris Dixon - On a recommendation I read a book about crypto. Shockingly, I didn’t disagree with much here… except that crypto is the solution to the problems outlined in the book. He spent chapters pitching ideas that crypto could solve (decentralized social networks, carrying over video game assets, etc) and those have since been debunked. There’s still no job that crypto does better than a database. Ultimately I think it’s a question of “Who benefits?” when it comes to this technology and I think the answer is: the people who already own a lot of it.
Humankind by Rutger Bregman - I’ve read this book before but it’s a pleasant little dose of positivity. Are we humans that trample each other while leaving a burning plane? Or are we humans that help each other get off the plane? The answer might surprise you.
Slow Productivity by Cal Newport - I liked this book better than the last but I think it suffers from the same problems all his books do… he’s shielded by academia and not that busy of a person. I laughed out loud when he used Jane Austen as an example of Slow Productivity (paraphrasing) “After her father sold the farm and the school and they moved to a beach town, she was able to slow down.” Like, yeah dude, I could slow down too if my dad retired and sold the literal farm.

In Progress

A Wizard of Earthsea by Ursula K. Le Guin
The Adventure Zone Vol. 6 by McElroy, Pietsch, McElroy
Awe by Dacher Keltner

📝 Blogging

Not my best summer of blogging. But the drafts folder is going wild. Trust me. Lol.

Mini 4WD - a new hobby
Summer rental - a post about vacation
The cost of fueling my body - a quantification of self

📺 Media

Not my best summer of media consumption. But I’m back on Dropout which is nice.

Wimbledon 2024 - Watched a lot of the Wimbledon finals with my wife.

Streaming

Make Some Noise S3 (Dropout) w- My favorite improv show. It’s punchier this season.
Thousandaires (Dropout) - What would you do with $1,000!?
Dimension 20: Never Stop Blowing Up (Dropout) - A VHS action movie fever dream but with dice.

Anime

Goldenboy (1995) - Full of fan service but has a main character that flips the genre on its head a bit.
Mob Psycho 100 S2 (2019) - Mob is at it again. Such a weird, fun series.
Gundam Breaker Battlogue (2021) - A short web series to promote a new line of Gundam models. Not my favorite “Builder” series nor is it my favorite line of Gundam models. Battlogue on all fronts feels rushed and cheap.

🧶 Crafts

Tamiya Mini 4WD Blast Arrow Starter Pack - I got into watching min-cars race around a track. I bought one for me and one for my son. I finished mine. My son didn’t finish his. But we don’t have a track to race on… so I either need to pony up cash or figure out another way to race.

🤖 Gunpla

I built the Perfect Grade Unleashed RX-78-2 Gundam - The granddaddy of all granddaddies. This was an incredible build start to finish. I stalled out for two weeks over adhering some metal etching parts but I tried out different glues and cements and ended up using a Scotch Restickable Glue Stick (the same glue for Post-it Notes) and it worked great.

From the inner frame to the outer shell of the body armor, this model is jaw dropping. It has heft, but not too heavy. It poses but feels sturdy. Bandai nestled in gimmicks everywhere but also so subtle you’d never know they were there from a distance. I need to finish putting on all the stickers, but it’s already so incredible to look at that I fear over-decorating.

⌨️ Open source

Nothing official. Except for my job I guess which is technically open source.

👾 Video games

Thank Goodness You’re Here (Switch) - A hilarious little slapformer (not for kids)

The cost of fueling my body

Thu, 08 Aug 2024 14:22:00 +0000

I’ve become a bit obsessed with how much it costs to fuel my body during the working hours.

Item	Cost/Serving	Qty/Day	Cost/Day	Qty/Month	Cost/Month
Snap Kitchen 500cal meal	$10.00	1	$10.00	22	$220
Fairlife 42g Protein Shake	$3.50	1	$3.50	22	$77
Liquid Death	$1.75	1	$1.75	22	$38.50
Ruta Maya Dark Roast	$0.25	3	$0.75	66	$16.50
Califia Farms Café Oat	$0.11	3	$0.33	66	$7.26
Total			$16.33		$359.26

To keep me and my brain running during working hours costs me ~$359.26/month. Not much to say beyond that –no grand epiphanies– except that I think it’s too expensive. Sitting in an office by myself costs me $16.33/day (or $2/hour). This budget doesn’t include breakfast, dinner, exercise, healthcare, transit, internet, electricity, or office supplies… all necessities that enable the work. This is just the daily cost of caloric fuel to keep my body going during the nine-to-five. My family has three other humans in it too, so this seems collossaly expensive.

If I wanted to save money (I sort of do), here’s what I’d could try to optimize from top to bottom:

I could make my own pre-made meals for about ~$2/meal. I’ve had success with this but it requires a lot of weekend logistics to execute properly. This would be the most significant cost reduction, costing only $44/month and saving $176/month.
I could buy whey protein in bulk. A 5 lb bag of Muscle Milk (nearest approximate flavor) is $72/bag and contains 68 servings for a reduced costs of $1.05/serving. However, one serving only has 25g of protein, so if I’d need to double the scoops. The total cost would then be $2.11/serving or $46.42/month. Buying bulk powder makes fiscal sense, but $30/month to not have to deal with drinking clumpy protein shakes and washing crusted stinky shakers seems almost worth it.
I considered eggs as an alternate source of protein instead. A single egg has ~6g of protein and costs about 50¢. The cost could potentially come down but the bigger issue is to get the same 42g of protein I’d need to eat 7 eggs. I don’t know if you’ve eaten eggs before but 7 eggs is a lot of eggs. Imagine woofing down 7 sweaty hard-boiled orbs a couple times a day, yikes.
I could brew my own agave-sweetened tea. I’ve done this once, but the crisp flavor profile wasn’t the same so I wouldn’t call it a success. Needs more experimentation.
Thanks to Costco selling our favorite local coffee roaster in bulk, we have caffeine ritual costs dialed down about as low as they can go. Feel comfortable there.

Lowering my lunch costs stands out as the best candidate for improvement. But as I noted before, adding even a small pile of extra duties risks toppling the wagon and I’m back to eating emergency $14 Spicy Chicken Sando Combos to quench my hunger. I wonder where my daily costs fit on a graph of national statistics. Is this average? Is this Bidenomic inflation? Am I making myself poor with my avocado toast? Someone who understands finances help me budget! Ack!

Summer rental

Thu, 18 Jul 2024 23:10:00 +0000

4:05am
The windows are open, hoping to capture the faint winds and convert them into a mythical cooling cross-breeze. A gust passes through vacuuming all the doors shut, cancelling hope for a miracle.
I’m awake. It’s cool but I’m on top of the covers and not cool enough.
The plastic thump-thump-thump of the oscillating fan reaching the end of its arc is rhythmic yet not. After three-to-six attempts, it yields to the resistance and heads the other way. It will be back soon.
Another fan in the room sounds like a far off propeller plane looping around the property. I await its arrival at each approach.
The alleyway ebbs and flows throughout the night with the smell of marijuana smoke, teens cussing, and the clinking of bottles as passers-by rummage through recycling bins.
There’s a sick child in the other room. My child. Been sick for days, poor thing. On antibiotics now. Spit the first dose on the floor because she didn’t like the taste.
I can hear her labored breath as different subconscious systems battle for what they deem as comfortable. Warm, yet shivering. Cold, yet burning up. Asleep, yet aware.
My wife is there next to her. Also sick with a persistent unspecified cough.
Since arriving at the rental three days ago, I have only left the house to buy medicine and wine.

7:23am
Scuttling in the alleyway. Two voices. A truck starts. A woman pleads, “I’m sorry, I fucked up.” The truck drives off.
I put on a pot of coffee.

9:15am
Left the rental to walk and pick up breakfast. Peeked at the ocean to remind myself of the magnitude. I’m a block away but hadn’t seen it in days.
I got a breakfast burrito. The potatoes were a little al dente, but it had black beans and wasn’t a soupy mess so I call that a win.
PCR tests came back and it’s not Covid and it’s not strep, but we don’t have any answer for what sickness(es?) our family is dealing with.
I’m on vacation but it’s not quite vacation anymore.
I’m working a bit. Dysfunctional but I appreciate a place to channel anxiety.
Caretaking is much harder than computer work.

4:46pm
We made it to the beach. Wife and son thought it was too windy for my solar shade —and it was— but I persevered. After naysaying me they had the audacity to want to join me in my solar fortress. Haha. Nice try.
My congested little one made me pretend food with wet sand. She’s allowed to join me in my fortress.
We left as the tide came in and ordered pizza. The pizza was just okay.

9:44pm
A good day. A long day.
Another member of the family is reporting a sore throat, so that’s less than ideal.
“When this vacation is over I’m going to need another vacation,” the protagonist says looking directly through the fourth wall. The canned laughter erupts.
Do wells of rage fill up faster than waters of peace? Am I broken or is the underlying system broken?

5:32am
Awakened by two crows squawking at each other.
I went to bed after midnight. A new day begins.

Mini 4WD

Sun, 30 Jun 2024 21:08:00 +0000

The algorithm sucked me into another model craft hobby: Mini 4WD racing (ミニ四駆). A Mini 4WD is a 1:32 scale model that is a mix between slot cars and RC cars. You don’t control these cars with a remote control nor do they drive in an electrified slot, rather you place your racecar in a plastic track with high walls and send them speeding down the track at ~40km/h.

The twist is you don’t know what the track looks like until race day, so you have to be ready to adapt. There might a big jump, moguls, or a tall mountain to climb. Once racers have seen the course, they have some time to make adjustments by balancing engineering choices about weight, power, braking, handling, batteries, downforce, and more. Are you going to make your car lighter and full send it over the tabletops? Or is slow and steady going to win the race? The races are a brief cacophony of slapping plastic and whirring motors but I can feel the electricity of the room through the screen.

Where YouTube hooked me was watching custom 4WD Mini builders like アズパカ, にわから, and ユウタ. They are hellbent on making their cars as fast as possible. In Japanese they call it “タイムアタック” (“Time Attack”). For their time attacks, they use the Japan Cup Junior Circuit (JCJC) course; a three lane track with a wave feature and a wicked lane change from the inner lane to the outer lane that will send light or fast cars flying off the course. The standardized course (and video format¹) is where the similarities stop because their cars are anything but conventional.

The videos are all about iteration and experimentation. Testing all kinds of parts and gimmicks like 3D printed chassis, side rollers, battery types, motors, wheels, and downforce options. Sometimes the tweaks are small, sometimes they are radical innovations:

An entirely “blade” flat chassis
A chassis with all the weight to one side
A bendy chassis to bend around corners.
A chassis with a motor on each wheel
A chassis with a computer fan in the middle
A car with knives
A dual-fan chassis that looks like a GPU.
A car with model rocket engines!? Why not.

That sort of raw, no-rules experimentation is refreshing to watch. It looks like dumb fun. A reason to own a 3D printer. They experiments don’t always work and will fail spectacularly, but lessons get learned. And if you watch enough videos, you see them getting faster.

A stock car will complete all three laps in about 5 seconds.
Cars they made a year ago will go around in 3 seconds.
Cars they made six months ago, 2 seconds.
A car from one month ago, 1.63 seconds.

I’m not sure why Mini 4WD strikes such a chord with me. It could be nostalgia for my RC car days as a ten year old. It could be my penchant for Japanese model making. But I probably know what hooks me the most: this is the flavor of engineering optimization work I like to do. Make it lighter, faster, and able to handle bumps in the road. Websites are of course vastly different than mechanical engineering… but the correlation between weight and speed are enough to activate my brain.

So I bought a Mini 4WD Starter Pack (and one for my son) to close the loop on my curiosity. They’re only ~$20, so why not. The hitch in the plan is that a beginner track costs $120. It would nice to have an opportunity to run around a complex track without an upfront cost. My hobby shop used to host races and have a track in-store before COVID, but not anymore. Maybe I can provide this as a service to my kids’ friends… yeah… that’s a good justification.

I secretly love the unified video format: a robotic female voice over narrating an engineering process. Don’t mess with success, boys, the formula is working just fine. ↩

Vibe Check №33

Sat, 29 Jun 2024 21:48:00 +0000

The cicadas hum their ancient alien tune in the treetops above. The asphalt is hot to the touch. Cars and homes fill with the white noise of air conditioning in attempts to keep those inside alive. My enemy, the Sun, beams its photonic radiation at me –only me– and mocks my every step and sows humiliation as sweat pours down my back to pool betwixt my buttocks. We trudge through hot air to make due with our curse.

I started a new job. We went on a trip. Saw Mount Rushmore. Saw Austin FC win. School ended. Sports are over but a new –more committed– cheer season is already underway. Swim team ends today and I will not miss those steaming hot Saturday mornings, but will miss the thrill of seeing my kids continuously improve and rack up personal bests. My son returned from sleep away camp. And we’re all looking forward to a proper vacation soon.

Newly employed at Microsoft

At the beginning of May I started my new job at Microsoft. It’s already been nearly two months and I think I’m adjusting nicely to corporate life. Thankfully, the immediate group I work with has tons of nice and talented people so that makes it easy to feel welcome.

My plate of responsibilities is still being assembled but the bulk of my work thus far has been refactoring some web components. Web components are pretty fast out of the box (look, ma! free lifecycle and reactivity code!) but we’re working to make our components be super fast. While the scope of what I do is a fraction of my previous agency and startup life, it’s nice to be able to focus on isolated components.

I lost my publish button

It took me awhile to pinpoint this feeling but the biggest change since joining a large corporation is that I’ve lost my publish button. There’s probably ten people between me and code going to production. Gone are the days of making ten deploys a day. Gone are the days of yeeting a blog post on the company blog. Gone are the days of ssh’ing into a box to make some hot fixes. It’s for good reasons, of course.

My personal publish button usage has also declined during this time. I blame onboarding to a new job, busy summers, and a small RSI flare up. But I’m not cooking drafts up like I used to either. I intentionally didn’t install Notion on my work machine to prevent distractions and so far that plan has worked. All is not lost, I burned some midnight oil last night and summoned a small quiver of drafts and I think shorter posts will lead the way.

The no deodorant challenge

I tried that hippie myth where you don’t use deodorant for two weeks and your body naturally adjusts and your armpits don’t smell bad…

…this did not work. It very much did not work. I’m sorry.

A nephew’s graduation in South Dakota

Four days into my new job I took some time off to travel to South Dakota. My nephew graduated as valedictorian of his small high school in Hill City, SD. The kid has a lot going for him; a National Merit Scholar, cross country state champion, Gatorade’s 2024 Cross Country Player of the Year for South Dakota, a volunteer fire fighter, among other great qualities that he’ll bring with him to MIT in the fall.

My nephew’s high school has the unique honor of being able to have their graduation at Mount Rushmore (his high school is also the only school that can have Smokey the Bear as a mascot, but that’s another story). It’s a dramatic event to see kids transition into their future under the long gazes of those gargantuan stone presidents. It’s not often you get to attend an event like that and I’m glad our kids got to be there for it.

Great to see family. We don’t have occasion to get everyone together often, so I’m glad I had the chance to yuck it up with my brother, nephews, cousins, in-laws, aunts, and uncles. Kids and adults played wiffle ball in the yard and we rode minibikes around the field. A good short trip to the Black Hills, we should do it more often.

🧠 Learning

Most of my learning brain cells have gone towards learning how to do my new job. I think that’s okay.

📖 Reading

I came across some great books since the last vibe check. I might actually do full posts for some of them… they were that good.

Finished

Solaris by Stanisław Lem - The audiobook from my library was a radio adaptation and I think I need to read the actual book.
Your Brain on Art by Susan Magsamen & Ivy Ross - This book will change your behavior and how you spend your time.
The Communist Manifesto by Marx & Engles - Never actually read this until now. I don’t fully agree with them –particularly that Communism requires revolution because history shows that creates a power vacuum to fill with corruption– but the boys in red make some good points about Capitalism.
How Big Things Get Done by Flyvbjerg & Gardner - My favorite book of the year so far. Validates a lot of what I talk about in regards to prototyping.
The Country of the Blind by Andrew Leland – Columnist Andrew Leland has a degenerative eye condition and is going blind… is blind but not yet blind and unsure about claiming his blindness. An honest account of a slow but serious life change, breaking apart a lot of the misconceptions we as society hold about blindness.
A Fever in the Heartland by Timothy Egan - I knew the KKK was a Southern thing, but did you know there was a large KKK presence in the North as well? This book tells about the rise of D.C. Stephenson, a Grand Dragon who rose to power and held a tight grip on the state of Indiana and the midwest. His rule would have continued if not for his perversion and one woman –Madge Oberholtzer– who revealed who his true character in her death and destroyed the clan’s presence in the state. I mean this without hyperbole, I felt like I was reading the story of Steve Bannon or Donald Trump. Horrific people who abuse fears to enrich themselves and exert their shitty brand of authoritarianism.
The Art of Small Talk by Casey Wilson & Jessica St. Clair (Spotify) – A riotous look at how small talk benefits our lives. I nodded along the whole way until the penultimate chapter where it gets spiritual and talks about hairdressers speaking prophecies over people… other than that, great!

Started

Like, Comment, Subscribe by Mark Bergen
A Wizard of Earthsea by Ursula K. Le Guin

📝 Blogging

A small handful of blog posts since the last update but the quality has never been higher.

A quick light-dark() experiment - I love CSS.
Dave Goes Microsoft - I got a new job.
A common web component learning blunder - Web component libraries are okay to use and people might be doing themselves a disservice by not using them.

📺 Media

I started watching movies again. I don’t know what got into me but I’m finding enjoyment in watching movies right now. It might take me three days and countless interruptions to finish a movie, but there’s good stories in there.

Movies

Furiosa (2024) - Disappointed after seeing this in the theater. I understand the movie a bit more now as a fusion between the old hokey grindhouse Mad Max and the new grittier, jaw-dropping cinematic Fury Road. But even given that concession, it felt disjointed like two directors made it.
RRR (2022) - Long overdue. A slow warm for me, I didn’t lock in until later in the third act. But it’s a phenomenal, over-the-top film with a bit of welcome anti-Imperialist messaging mixed in.
Black Hole (1979) - Saw a shitty sci-fi movie in my recommendations, watched that shitty sci-fi movie. It’s as if someone saw Star Wars’ success and Disney said, “We have R2-D2 at home.” Then decided they could make a cooler R2-D2 by making him talk. Weirdly though, I enjoyed it.
Hunt for the Wilderpeople (2016) - Taika Waititi can do no wrong. A bizarre coming of age story, but charming nonetheless.
Tokyo Godfathers (2003) - What happens when three homeless people; a young girl, a drunk, and a drag queen find an abandoned baby on Christmas? This is like The Pogues’ Fairytale of New York in anime form and I’ll watch it over and over and reach for at the holidays.
Inside Out 2 (2024) - A worthy sequel a blockbuster movie on mental health. Anxiety steals the show and is super relatable.
Godzilla Minus One (2023) - I heard this was good and they were wrong… it’s great! A perfect Godzilla movie for me.
Starship Troopers (1997) - Clearing out my list of shame, I watched Starship Troopers. An interesting piece of satire to say the least, yet the characters and plot move you along. No wonder it’s a classic.

YouTube

I don’t know James Wolfe by Folding Ideas – A hypnotizing analysis of a YouTube star, a callback to an arthouse film, and now I see nerdrage all over the internet, following me around like a haunted doll.

Lego Masters S4 (Hulu) - Something the whole family will watch and enjoy.

Anime

Delicious in Dungeon (Netflix) - Stuck in a rut on this, but will finish.

🎙 Recording

We’ve been doing a little micro-series on ShopTalk about niche app builders. People who build bespoke apps and try to turn it into a business. The feedback has been good and I enjoy peeking into how others are making their dreams happen.

Niche app builders series

Other fantastic guests

🤖 Gunpla & Plamo

I started on my Perfect Grade Unleashed RX-78-2 and I’m half-way finished. It’s a fantastic model. I also picked up a new Mini 4WD car… which I’ll post more about later.

⌨️ Open source

A couple CodePen web components, nothing officially open sourced. I tend to get productive in the summer and have an uptick in productivity and crash in August.

debug-formdata - Debugging the FormData object with web components and elementInternals is a pain. This help that.
aria-debugger - Scanning for changes in accessibility related props and attributes on a group of elements is a small nightmare, this is a proof of concept to make that easier. I think I need to make walk the DOM tree a bit deeper (three levels deep?) and add shadow DOM support. Sounds like work tho.

👾 Video games

I’m struggling with the fact that staying up past my bedtime to play video games is bad for my health. I need to figure out a better way to game.

There was a Gundam cross-over event in Call of Duty: Warzone, so I broke my rule about never paying money for cosmetics. I look cool in the video game now and it only cost me $20/ea.
Got back into The Finals. Looking at the landscape, probably my favorite co-op shooter.

Sneak Peek: Mundango

Thu, 20 Jun 2024 13:26:00 +0000

It’s a secret to everyone! This post is for RSS subscribers only. Read more about RSS Club.

Play Mundango

I’ve got something for you. Lately I’ve been getting a lot of joy from life’s small moments; like texting an old friend, seeing a cool bug, or a watching the cardinals zip through my backyard. To nudge my brain towards absorbing more of these mundane pleasures, I built a little game.

Mundango is a game about finding life’s normal things. Each day you get a new game of moments to capture and enjoy. It’s up to you how you play. You can play it like Pokémon Go and try to catch ‘em all or you can visit the board at the end of the day for a bit of reflection. Me? I plunk on it when I’ve got a few spare minutes throughout the day.

I’ve got a couple feature requests on deck but it’s at a point where I’d love more feedback. The activities were crowdsourced on Mastodon so if you have some more suggestions of small simple moments that bring you joy, I’d love to hear them. Or if you have general ideas about what would this more interesting (e.g., a turtle mascot), let me know.

A common web component learning blunder

Tue, 28 May 2024 14:17:00 +0000

Through stalking the #WebComponents hashtag and my Frontend Masters course, I’m privy to a lot of developers’ first experiences with web components. There’s a wide range of people digging in, but the most common first-time experience I come across is a developer coming from a classical component framework like React with JSX going straight to writing vanilla Web Components, becoming frustrated, and then deeming web components “not ready for primetime.”

Ignoring for a moment that web components do exist in the primetime and power some big and complex primetime web applications like Adobe’s Photoshop for Web, I half-understand this perspective. I understand the desire to not have a major dependency. I hate this bloated node_modules hellhole we’ve built over the last decade and while I’m not a npm install my problems away guy… I think this puritanical approach to dependencies is a misstep when diving into web components for the first time.

The analogy I’ve been using is that this is like jumping from a tall 130 kilobyte-story building (ReactDOM) right into the zero kilobyte sewers of web components. If you take anything from this post, please understand this: web components (most likely) weren’t designed for you. Not to dissuade you from using them, but they were purposefully designed to be a low-level bare metal primitive for library authors to build on; they were designed to be used with a library, a thin layer of abstraction butter on top.

To understand this disparity further, let’s look at an example of what writing a component in a “modern” framework feels like…

// React
export default function MyApp() {
	handleClick() {
		alert('hi')
	}
	
  return (
    <div>
      <h1>Welcome to my app</h1>
      <button onClick={handleClick}>I’m a button</button>
    </div>
  );
}

Can you do this in vanilla web components? Sure. But it looks like this…

// Vanilla web component
const myAppTmpl = document.createElement('template')
myAppTmpl.innerHTML = `
  <h1>Welcome to my app</h1>
  <button>I’m a button</button>
`;

class MyApp extends HTMLElement {
	constructor() {
		super();
		this._shadowRoot = this.attachShadow({ mode: 'open' })
		this._shadowRoot.appendChild(myAppTmpl.content.cloneNode(true))
		this._shadowRoot
      .querySelector('button')
      .addEventListener('click', this.handleClick);	
	}
	
	handleClick() {
		alert('hi')
	}
}

customElements.define('my-app', MyApp)

This is a boring, imperative set of instructions for building the component with a little bit of dangerouslySetInnerHTML¹ mixed in there… and ugchk… it sucks. It’s even more verbose with more interactive elements or a slew of reactive props and attributes.

Let’s see what 7 kilobytes of Lit gets us….

import { LitElement, html } from 'lit'

class MyApp extends LitElement {
	handleClick() {
		alert('hi')
	}
	
  render() {
		return html`
      <h1>Welcome to my app</h1>
      <button @click=${this.handleClick}>I’m a button</button>
    `;
  }
}

customElements.define('my-app', MyApp)

Now we have a component that’s almost identical to the familiar world of JSX but without any Babel transforms or build steps. For 7 kilobytes you get a lot more than some syntactic sugar, you get…

A thin, tree-shakeable layer of abstraction for a modern developer experience
Reactive updates without VDOM
A more granular component lifecycle with a render() function
A cleaner way of registering and using reactive attributes and properties without overloading the attributeChangedCallback
Template directives like @click for event handling and directives for JavaScript values (arrays, objects, etc).
And an html tagged template literal with an under-appreciated superpower ✨ that gives your components atomic updates under-the-hood.

There’s value in learning how bare metal vanilla web components work in the same way there’s value in knowing how Intl.RelativeTimeFormat() works, but you probably want to use Day.js for your day-to-day work. You can totally write your own base class abstraction – and I want you to have the JeffElement base class of your dreams, I do – but you may find out (like Cory LaViska from Shoelace found out) that after you write all your little helper functions and utilities that you’ll end up with something almost the exact same size and feature set as Lit, but not as well supported nor as battle-tested.

This makes me sound anti-vanilla web components and I’m not that by any means. Vanilla web components are a perfect fit for standalone components and the Light DOM-forward flavor of “HTML web components”, but I think the people having the most fun in this space are JavaScript minimalists who already prefer writing vanilla JavaScript. People like myself.

“If I have to use a library how is this any different than any other framework lock-in?” This is a valid question and one worthy of its own post, but I think you’ll find the lock-in costs of a web component library pretty minimal. Because all web components libraries extend a common base class, there’s a linear pathway out of vendor lock-in if necessary.

What I’m saying is this; next time you’re thinking about jumping from 130 kilobytes of developer convenience, maybe consider giving yourself a 7 kilobyte landing pad to cushion the fall.

There’s ways around the innerHTML call like by writing the template in your HTML instead. ↩

Dave Goes Microsoft

Thu, 16 May 2024 14:02:00 +0000

Last Monday was my first day as an official employee of Microsoft where I’ll be working on web components as part of the Fluent design system team. As longtime readers already know, I’ve had a long term relationship with Microsoft – from Paravel’s 2012 responsive redesign of the Microsoft homepage to the five year #davegoeswindows stunt – it feels like a new chapter in the career story arc to finally acquire one of the famous blue badges. I’m still new and have barely setup my computer but so far my team of peers, the larger group, the project itself, and the other folks across Microsoft I’ve connected with are all great.

Going from a company with two coworkers to a company with 200K coworkers is certainly an adjustment. It’s my first job in 18 years where I’m not working for myself but by far the biggest eye-opener throughout this process was doing tech interviews! I learned a lot about myself; like how after decades of coding in a room by myself, performing in front of someone else isn’t natural for me. Weirdly for me, a live demo in front of thousands of people… no problem. A random generated coding challenge in front of one person… palms sweaty, mom’s spaghetti levels of difficult. I also learned that too much caffeine and the panic-flavored adrenaline of interviewing is a lot of chemistry for my active brain to process.

I eventually figured out how to interview and I had a lot of great conversations with great people at great companies. That said, this experience left me with lingering qualms about the tech interview process. A lot of it comes down to the information asymmetry where the seller (the hiring company) has more information than the buyer (the job candidate) and it’s hard to get any feedback for self-improvement. Even in my limited experience, it’s not uncommon to sink 15+ hours into a take home coding test and interview loop only to receive a terse rejection. Granted there’s promise of a six figure salary at the end of the rainbow, these jobs don’t fall out of the sky so you need to put in work, but I think that situation needs to be a bit more equitable to candidates – a Newtonian dynamic of matching effort.

One question they ask you at interviews is “What are you looking for in your next role?” and while that sparks thousands of ideas, I boiled my needs and wants down to two core concepts:

Be a part of a larger team of engineers - I’d like to work on a larger team of developers. I want to be in a situation where I can actively and passively learn from other engineers who are subject matter experts in different subjects. As a life-long learner, I’d like to take myself out of the “lone developer” paradigm and absorb as much as I can.
Be tangential to the money machine - When you run your own business there’s a tight coupling between how much you work and how much money you make and you’re constantly aware of that fact. After 18 years of running my own business and two particularly intense years of startup burnout, I’d like to try something different and play a more supportive operational role for a bit.

I think I found that in Microsoft. There’s a multitude of people I can ping about niche technology choices. There’s even access to a library of research papers. And already I can see how operating in a product support role seems to provide more opportunity for strategy to the broader needs of the organization as opposed to reactivity to the needs du jour that happen in Productland.

I’m sure throughput will be a bit slower without direct access to the publish to production button. I’m sure there’s topics I won’t be able to talk about on this here blog (but I tend not to blog about specific work-related activities here anyways so that won’t change). And I’m sure I’ll have to put a disclaimer here and there that these ideas are my own and not reflective of my employer. Henceforth and furthermore all bad ideas are copyright of Dave Rupert LLC®.

It’s the end of an era for sure but also the beginning of a new one and potentially the beginning of lots of new ones, who knows. Thanks to Trent and Reagan. Thanks to everyone who provided emotional support on this journey. Thanks to esteemed friends who provided referrals. Given the current macroeconomic situation, I feel lucky to have landed somewhere familiar with great opportunities and many Dave Rupert-shaped problems.

A quick light-dark() experiment

Sun, 05 May 2024 15:27:00 +0000

I wanted to experiment with the new CSS function light-dark() and get a sense of how to use it in a CSS architecture of nested (web) components. I think it’s going to be a powerful tool in the new responsive world of component architecture but I don’t want to recommend something unless I have experience with it in a project first.

My first pass was to add light-dark() to my components…

/* global.css */
:root {
  --dark: #000;
  --light: #fff;
}

/* Inside <my-component>'s Shadow DOM */
:host {
  background-color: light-dark(var(--light), var(--dark));
  color: light-dark(var(--dark), var(--light));
}

But if every component is in charge of it’s own light-dark() handling for border, background, and color on every element… the codebase will get messy managing dark mode in a lot of different places, leading to a lot of inconsistencies over time. A more elegant solution for me would be to handle this job in a single location at the root scope level and leverage the cascade a bit.

:root {
  color-scheme:  light dark;
  --surface-color: light-dark( #fff, #000 );
  --text-color: light-dark( #000, #fff );
}

The nice thing about using light-dark() at the root token level is your components can be dumber. You provide default light-dark experience and, like good children, your components abide in their parent’s decision. Of course, due to the nature of CSS custom properties, your components aren’t locked into the system and your component level styles can opt out (read: not include) or override the global variables if necessary.

/* Inside <my-component>'s Shadow DOM */
:host {
  background: var(--surface-color);
  color: var(--text-color);
}
/* this is a real example from my past */
:host[theme="lunar-new-year"] {
  --surface-color: red;
  --text-color: black;
}

At this point in the experiment I was pleased with the results… until I deployed it to production. I overestimated the browser support for light-dark() and it didn’t work on my phone running Safari 17.4 (but it’s coming in Safari 17.5). I replicated the issue by changing light-dark() to light-d0rk() to verify and fixed it by adding a tried-and-true CSS @supports query.

:root {
  --surface-color: #000;
  --text-color: #fff;

	/* NOTE: For Safari 17.4 (2024-05) */
  @supports (color: light-dark(black, white)) {
    color-scheme:  light dark;
	  --surface-color: light-dark( #fff, #000 );
	  --text-color: light-dark( #000, #fff );
  }
}

Now Safari 17.4 and other browsers that lack support will only have a dark theme and newer browsers will get the light-dark() enhancement. I also threw a little NOTE: and datestamp in there so future versions of me will know when and why I built this fence.