thoughts and inspiration on designing, programming, and writing for the web
In a project management-themed Hackers Incorporated episode, Adam Wathan introduced derisking projects with save points. The entire episode is definitely worth your time, but that specific piece of advice has changed the way I work as a developer and make decisions as a project manager.
In practice, it has taught me to optimize for optionality, not efficiency.
For the past year, Obsidian has been my note-taking companion. I don't care about fancy features like backlinks, canvas… I like Obsidian because it's fast, minimal (up to you!), customizable, works with Markdown files, and has a good enough mobile app.
I've slowly grown towards a more consistent way of taking and organizing notes. While I'm using Obsidian, it's a system that can easily be ported to any other tool as long as you have something that resembles a filesystem.
Next week we're sending out the first issue of a new newsletter: href.email.
Content on the internet is at a tipping point. Social media actively discourages sharing links, while AI-generated content is gaining prominence. We want to double down on human-created and curated content. Authors and creators put a lot of effort into their work, which we want to bring to the surface with our own touch.
I'm looking forward to help curate write these the coming months! (And I'm stoked about the domain name, how was that not taken?) Expect a healthy mix of dev/design/product content. Head over to href.email if you want to subscribe.
I thought this image from Christoph Niemann in Sunday Sketching was worth sharing.
We can force ourselves to do good work. But for great work, we need a portion of luck.
PS: I highly recommend Christoph's Abstract episode which you can watch for free on YouTube.
I've been writing more Blade + Tailwind the past few weeks. Coming from React + Tailwind I really missed tailwind-merge and clsx, but luckily came across this great package from Sandro Gehri.
{{-- components/button.blade.php --}}<button {{ $attributes ->merge(['type' => 'submit']) ->twMerge('bg-green-500') }}> {{ $slot }}</button> {{-- home/index.blade.php --}}<x-button class="bg-red-500"> A red button</x-button>Source code and installation instructions on GitHub.
From Escape the Algorithm. When we create a contract or a pattern, there are gains in familiarity, modularity, and composability, but it's a lossy translation.
If I were to design a personal map of my neighborhood, it would include the potholes I swerve by on my bike rides, the neighbor’s sweet precocious 4 year old that is always on the front stoop and wants to tell me about her day, routes that have small patches of grass to the right of the sidewalk and end near a public trash can (suitable for walking my right-side-only peeing dog), the schedule and trajectory of shade during the summer, homes with potted flowers hanging off their railings, restaurants that closed ages ago, the playgrounds where we are most likely to run into parent friend crushes, and the street with the best view of the skyline at night.
It probably would not look like Google Maps.
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!)
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.
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.
Last week, we released Laravel Error Share, a package to share local Laravel exceptions with a coworker or your debugging friend on the internet. We wrote all about the functionality of the package on the Flare blog. In this post, I'd like to look into some of the implementation details and considerations we made while building it.
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 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.
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 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.
Utterly pointless, completely genius!
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.