Debugging application state triggered by focus

In any modern browser's element inspector, you can force an element into a :hover or :focus state to debug styling issues. Sometimes, you want to debug an issue of an element in focus with a state controlled by JavaScript. Unfortunately, the forced states from the developer console aren't always enough. (Edit: unless you use Chrome apparently, scroll to the end for an alternative solution!)

Toggling focus in devtools

I came across this problem when I was styling a custom <select> component in React. The dropdown menu is only visible when the input is focussed, but I couldn't inspect this state with the devtools. Whenever I wanted to browse the element tree, the devtools became the active element on the page and the menu disappeared.

Luckily, I came across a tiny snippet to help debug in this situation.

window.setTimeout(() => { debugger; }, 5000);

This will wait five seconds until it halts all code execution with a debugger breakpoint. With this snippet, I load the page, set everything up into the state I want to inspect—5 seconds is more than enough time—and wait for the timeout to fire. When the debugger is triggered, I can browse and tinker with the element tree without worrying about the page updating.

In React, I wrapped this in a useEffect call to run once for the component I wanted to debug.

useEffect(() => {
window.setTimeout(() => { debugger; }, 5000);
}, []);

After I shared this post on Twitter, Bram tweeted that Chrome DevTools have a feature to circumvent this problem. With the "Emulate a focussed page" setting, the web page will remain in a focussed state when you're playing around in DevTools. Read more in the Chrome DevTool release notes.

The Art of Decision-Making

In a New Yorker article titled The Art of Decision-Making, Joshua Rothman explores the paradox of how we can spend a lot of energy fretting over small decisions, while the big life decisions seem to come naturally.

We agonize over what to stream on Netflix, then let TV shows persuade us to move to New York

An interesting point he makes is how our aspirations can take a long time to come to fruition. How can we guide our actions if we don't even know if we'll still want the results by the time we get there?

To aspire […] is to judge one’s present-day self by the standards of a future self who doesn’t yet exist. But that can leave us like a spider plant putting down roots in the air, hoping for soil that may never arrive.

As the life we crave can change dramatically.

Before having children, you may enjoy clubbing, skydiving, and LSD; you might find fulfillment in careerism, travel, cooking, or CrossFit; you may simply relish your freedom to do what you want. Having children will deprive you of these joys. And yet, as a parent, you may not miss them. You may actually prefer changing diapers, wrangling onesies, and watching “Frozen.” These activities may sound like torture to the childless version of yourself, but the parental version may find them illuminated by love, and so redeemed. You may end up becoming a different person—a parent. The problem is that you can’t really know, in advance, what “being a parent” is like.

Marcus Buffet: Managing my motivation

Full title is Managing My Motivation, as a Solo Dev, but this is great advice for any dev.

My favorite:

Leave tasks unfinished
I can’t overstate how much this one helps me. I try to leave a task 90% finished at the end of a working session. It feels slightly worse than closing out the work, but it makes starting the next day 10x easier. Having a quick win when I start coding is a massive boost, and it immediately gets me into the flow state. It can’t be too easy though, if all I have left is to run git commit, that’s not enough. Ideally it’s something where I know exactly what I need to do, that will take 5-10 minutes.

As I've written before: end the day with a failing test.

The Cascade: a CSS blog

The Cascade is a great new blog on all things CSS by Robin Rendle. It's also an attempt to fill the void left by CSS-Tricks, for which Robin was also a writer for. And like CSS-Tricks, every time you visit the blog you might be surprised with a tweaked design.

CSS is in a really good place these days, but there's a lot to keep up with. Max Böck also just shared a great article on keeping up with recent features.

How to build a writing habit from Peter Suhm

Peter Suhm shared a beautiful guide on how to build a writing habit. The guide isn't about good writing, or achieving success through publishing your work. It's about the small gains you get and compound from consistent writing for yourself. It's about building a habit, the quality will follow.

This is a guide about writing — not publishing. Publishing is the root of all evil when it comes to writing consistently. Publishing is uncomfortable, at times even scary. How will people judge your words? It’s publishing that causes writer’s block — not writing. It’s what makes writing hard. In the same way that talking is easy but getting up on stage and giving a talk is hard, writing is easy too, but writing something you feel confident enough to publish is hard. When the stakes are low, the writing is easy. Once I realized the key to building a daily writing habit was to separate the process of writing from the goal of publishing, it all clicked for me.

I love the pragmatism. And the goal is up to you be it 100 or 1000 words a day. There's no right or wrong amount of writing, the key is consistency.

New iPads

Apple iPad Pro M4

New iPads last week. OLED, Finally! Be it a high-resolution monitor with deep blacks or e-ink, screens the most important part of a piece of tech for me. Screens are what we're viewing the world through with these devices. I want a new iPad for it, but I can't get myself to need one.

I'm running a 2018 iPad Pro, the first that dropped the home button and came with a lush 120Hz refresh rate. Incredible how it still feels like a device from the future even without an M chip.

I love my iPad. It's a great device for consuming content of all shapes and sizes. I could probably get a lot of work done on it if I decided to invest in it—just no coding. I use it daily, the size and weight makes easy to throw it around the house with the lightweight Smart Keyboard Folio (my only gripe with last week's upgrade is they discontinued it). Fatih Arslan makes some good points in his hymn for the iPad.

I'm looking forward to the day I'll have a thin, futuristic slice of OLED in my hands. But for now, my 6 year old iPad is just too good.

Consume less, create more

A fun read on why we should spend more time creating, and less consuming.

The real tragedy of modern technology is that it’s turned us into consumers. Our voracious consumption of media parallels our consumption of fossil fuels, corn syrup, and plastic straws. And although we’re starting to worry about our consumption of those physical goods, we seem less concerned about our consumption of information.

We treat information as necessarily good, and comfort ourselves with the feeling that whatever article or newsletter we waste our time with is actually good for us.

How I take notes: Structure with Now Next Notes

I rely heavily on taking notes. I don't necessarily take notes to refer to in the future, they're part of my thinking process. Writing things down brings clarity and tranquility.

After years of iA Writer I recently switched to Obsidian. But this article isn't about tools—I'll will write about that in the future. Here, I want to talk about structure. How I structure notes isn't tied to a specific piece of hard- or software and can be applied in many contexts.

Read more

Solving MySQL 5.7 authentication method problems in Laravel

Last week I was setting up al old Laravel project that required MySQL 5.7. I installed DBngin so I could have the legacy MySQL version up and running alongside the modern MySQL 8. Smooth sailing so far, until my Laravel app wanted to connect to the database.

SQLSTATE[HY000] [2054] The server requested authentication method unknown to the client

It took some googling to find a solution that worked. Most solutions recommended changing the authentication method in MySQL, but this was already configured correctly for me. What I had to do was explicitly configure a socket for MySQL to connect with. I added the following to my .env file:

DB_SOCKET=/tmp/mysql_3307.sock

Replace 3307 with the port number you configured your MySQL server to run on.

More than blogrolls

The latest edition of Matthias Ott's Own Your Web (which I recommend subscribing to!) points out that there are a lot of blogs out there, but they can be hard to discover. As a vessel to help others discover blogs, Matthias recommends curating a blogroll.

Blogrolls are great. I have one too! But I don't think they're enough. The visibility of a blogroll is limited to people that visit your blog and are curious enough to poke around. The content of a blogroll is limited to blogs you consistently follow, but individual posts are worth sharing too.

Lots of blogs do this: Chris Coyier occasionally shares links his thoughts intertwined, Freek's blog is a mix of original articles and links, and I've come across a lot of unexpectedly interesting articles through larger blogs like Daring Fireball or Kottke. Some have a separate RSS feed for sharing content, like Jim Nielsen's notes.

In the same edition of Own Your Web, Matthias shared a link to an article titled Curation is the last best hope of intelligent discourse . Joan Westenberg argues that with the rise of AI and algorithms, human curation is more important than ever.

Human curators can distinguish between nuanced arguments, recognise cultural subtleties, and evaluate the credibility of sources in ways that algorithms cannot. This human touch is essential for maintaining the integrity of our information ecosystem. It serves not only as a filter for quality but also as a signal for meaningful and trustworthy content amidst the overwhelming noise generated by AI systems.

Aside from its importance, an algorithm is not going to surprise you. I could listen to Spotify's Discover Weekly recommendations all day, but my taste wouldn't widen.

So, go forth and multiply content! Share what you find interesting, start a conversation, surprise your readers, and let the small web flourish!

Choosing a frontend framework

A question I've gotten a few times after my talk or sharing Svelte by Example is which frontend framework I'd choose these days.

Here's the good news: these days you can't really go wrong with any of the major frameworks—at least from a technical perspective. React, Vue, Svelte, Angular… all have incredible teams, contributors & ecosystems backing them. Your frontend framework will not be the limiting factor of your architecture.

Choose a framework based on the non-technical needs of your team. If scaling up your team is important, React might make more sense because of its popularity on the job market. On the other hand, if your team hates the mental model of React, don't feel pressured to use it regardless of its popularity. Choose your framework based on how it aligns with your team's programming values, not performance needs. (Unless you're building a Bloomberg terminal.)

My preference these days: I'm split between React & Svelte. (That is, when I'm working on a project I deem worthy of a JavaScript-heavy interface, for others I still prefer vanilla JS or Alpine.) I like them both because they each have a distinct direction. React is as JavaScript as a JavaScript framework can be, while Svelte stays as close to HTML & the DOM as possible. What they have in common is they've chosen a slice of the stack, and double down on enhancing it. I prefer tools with distinct directions.

De-atomization is the secret to happiness

Nat Eliason writes about how we're making it hard for ourselves to become happy by reducing activities to hyper-focussed but anemic versions of them.

We separate “I’m working” and “I’m playing.” We want to make everything extremely efficient, so we opt for going for a run alone instead of trying to link up with people along the way. We need to “be productive” so we don’t work from a coffee shop with friends.