Chris Coyier: Recent Episodes

None

Web craftsman, blogger, author, speaker.

Reading Oatmeal stuff is always such a seesaw for me. It’s so riddled with like boobshark jokes and I’m like, yeah yeah ha ha. I don’t hate that kind of humor or find it offensive, I just don’t think it’s very funny. Then it’s also so riddled with such earnest heartfelt well-articulated thoughts that I’m super into it. None more than Let’s talk about AI art.

I love the message. The process matters and if you work hard making stuff, that’s beautiful.

📺 Wondla — 10/10 kids show. I was way into it. Post-apoc situation with underground bunkers (apparently Apple loves that theme) where when the protagonist girl busts out of it, the world is quite different. The premise and payoff in Season 1 was better than the commentary vibe of Season 2, but I liked it all. Apparently there is one more season coming.

🎥 Downton Abbey: The Grand Finale — The darkest of the three movies? Weird. I love spending time in this world though so I was happy to be there. But honestly I was coming off a couple of day beers when I saw it in the theater and it put me in a weird mood and I should probably watch it again normally. How do proper movie critics review movies without their random current moods affecting the review?!

📕 Annie Bot — Sierra Greer is like, what if we turned AI into sex bots? Which honestly feels about 7 minutes away at this point. I’m only like half through it and it’s kinda sexy in that 50-shades kinda way where there is obviously some dark shit coming.

📔 Impossible People — Binge-able graphic novel by Julia Wertz about a redemption arc out of addiction. I’m an absolute sucker for addiction stories. This is very vulnerable and endearing. Like I could imagine having a very complicated friendship with Julia. It doesn’t go down to the absolute bottom of the well like in books like A Million Little Pieces or The Book of Drugs, so I’d say it’s a bit safer for you if you find stuff like that too gut wrenching.

Clapping on the on-beat sounds weird and wrong on (most?) songs. In (most?) 4/4 songs, that means clapping on the 1 and 3 sounds bad and 2 and 4 sounds good/normal.

But an audience of a bunch of random folks just getting excited can get it wrong!

This video of Harry Connick Jr. extending a bar just one extra beat to adjust the audience to clapping on the correct beat is extremely friggin cool.

(via Alan Smith)

On my Mac, you can use this command like…

opendiff index.html index-2.html And it’ll open some built-in GUI app called FileMerge to show you the diff.

It wasn’t working for me. I wish I copied the exact error but it was something about the path being wrong or the executable not being available or something.

The solution that worked for me was to open XCode and go to Settings > Location. The Command Line Tools section didn’t have anything selected, and I had to select XCode from the list.

Then opendiff started working again. 🤷‍♀️

Maybe a few months ago on my Mac Studio, Local by Flywheel became incredibly slow clicking any button in the UI would take literally minutes. I was gonna just give up and switch to Studio, but I had tried that once and it had enough rough edges I gave up (can’t remember why now, but I’ll give it a shot again one of these days).

There were a few releases of Local since my problem and each time I’d upgrade I’d cross my fingers it would fix it and it never did. But then they released a version that now does some kind of “are you running the correct version?” check and it warned me that I wasn’t. I must have been (somehow, someway) running the “Mac Intel” version on my “Mac Apple Silicon” machine.

So anyway, if Local by Flywheel is ultra mega slow for you, make sure to check you’re running the appropriate version for your machine. Derp.

Danger Gently is the name of the band I occasionally get a seat in here in lovely Bend, Oregon.

We played at the High Desert Museum the other week for their “Art in the West” event.

We play at The Cellar every Wednesday night (I make it to as many as I can). Here’s a couple of tunes from a couple weeks ago that Jason Chinchen shot:

I was on mandolin here.Sometimes we busk, typically in downtown Bend. One night I brought my camera to catch the band doing their thing:

Here’s a few grabs from when I’ve gotten to join:

  View this post on Instagram      A post shared by Chris Coyier (@chriscoyier)

Playing in the back of Darin’s truck was the best.We played a show at The Silver Moon during Bend Roots Revival and the sound guy recorded and sent us his “Board Mix” and it sounds pretty good to me! I was also on mandolin in this show.

We also played a show at River’s Place last month and since Dale Atkin’s was playing and brought his nice PA, we recorded from that as well. Here’s our opening tune “Breaking up Christmas” from that show:

Back when I went to the Alaska Folk Festival, a real highlight was catching The Strongbacks do their version of sea shanties live on the main stage. I remember a real tear-jerker protest shanty that I’d love to hear again.

As fate would have it, I also went to Zig Zag campout this year and met a fella named Evan who was an excellent clawhammer player from Astoria, Oregon. I didn’t realize until the last night at the community showcase concert that Evan as in The Strongbacks. He plugged that they have a new album coming out at the end of his performance at that show and… now it’s out!

It’s on all the stuff (ughgk) but perhaps easiest right here is a YouTube “topic” for the whole album. I really like this one:

I haven’t listened to the whole thing yet. Hopefully it’s got that protest one in it, but if not, it’ll live in my brain.

Chef’s kiss stuff here from Colin Cornaby:

Today’s microwave can cook a frozen burrito. Tomorrow’s microwave will be able to cook an entire Thanksgiving Dinner. […]

We all need to transition to this way of cooking, because clearly this is where the future is going. I expect in a few short years kitchens will be much smaller. Gone will be stoves and ovens and flat tops. Restaurant kitchens will only be a small closet with a microwave. I predict this will happen by 1955 at the latest. […]

If you can’t cook everything you make in a microwave thats a skill issue. You need to learn now because when everything is cooked in a microwave you’ll be out of a job. When microwaves are everywhere you’ll be so far behind you’ll never learn how to use a microwave. Chefs who use tools besides microwaves are luddites.

(via)

Me:

is there like an established good way of sending your friends a song? I feel like I need a spreadsheet of which music service they use.

Turns out there are a couple of services for this.

Tapelink (example)
I Don’t Have Spotify (example)
Song.link (example)

But honestly it’s just enough of a pain in the ass to do this, particularly on-the-go, that the real answer is probably just finding a YouTube video of it and sharing that.

Listen, I had some flies in the house.

I had a party, it was nice having the doors open, some flies got in, and they apparently set up shop.

You can’t just wait them out. They live like a month. Too long. Not to mention I gotta imagine they were having fly sex in their sweet new pad and kicking out more flies. I’m not a scientist but I did see a few humping.

Fly extermination day had come.

I wanted to try some old timey technique at first. I had just had some luck scrubbing bugs off the grill of a truck with baking soda so I was pretty hot on a use-less-chemicals scene. I also think how much plastic we use is out of control. I’m on an all-glass tupperware thing and I’m saving my glass jars for re-use and stuff. Basically a hero over here.

The old timey technique is apple cider vinegar, dish soap, and sugar in a bowl and you leave it there and somehow flies land in it and die.

That’s bullshit. I might as well have tried singing them a song. Zero flies caught.

So I swing the other direction and buy this exotic fly trapping house thing where you put chemicals in the bottom of it and it lures them in or whatever and kills them. Notice I immediately abandoned my less-chemicals morals at the slightest failure. I’ll have to ask my therapist what that says about me, even though I already know: my convictions are weak.

So I baby bear this thing.

Flyswatter.

Flyswatters are fricking amazing. You can’t do it with your hands. If you’re mad enough you can do it with your baseball cap. But hands? It’s not happening. I’m not Daniel LaRusso over here ripping flies out the air with chopsticks. But a flyswatter makes me an instant Mr. Miyagi. A flyswatter makes you a fly mascaraing machine. They are also like 99 cents.

Trump says:

With this order, I am announcing “America by Design,” a national initiative to improve experiences for Americans, starting by breathing new life into the design of sites where people interface with their Government. It is time to update the Government’s design language to be both usable and beautiful. This effort will be facilitated by a new National Design Studio and by a new Chief Design Officer. The Chief Design Officer will help recruit top creative talent, coordinate with executive departments and agencies (agencies), and devise innovative solutions.

That sounds good actually, but, hey yo, do you remember that you fucking already had a dream-team of people doing this exact work and you fucking fired them?

GSA deputy administrator Thomas Shedd announced the elimination of 18F in an internal email that was sent early Saturday morning. In it, Shedd wrote that the team had been identified as “non-critical,” and that the cuts had been made “in alignment with the President’s Workforce Optimization EO and the recent memo from GSA per the Trump Administration requiring cutting ‘non-essential consulting’ functions.”

Not to mention the embarrassing gutting of the United States Digital Service (USDS, which had real values) and transformation into the Department of Government Efficiency (DOGE). DOGE had zero values. It was the mechanism to dismantle things Trump didn’t like under the veil of saving money, which of course, did the opposite.

They made a landing page for the order. Again, on the surface, it looks good. I want our government to make excellent websites that serve the people that live here. All the people, actually. Ethan has some choice words on that.

… imagine you’re one of the millions of Americans on a prepaid “pay as you go” plan, or on a home network with capped, limited data. In both cases, data overages are tremendously expensive. Now imagine you’re trying to access some critical information online — how to renew your passport, say, or to manage your Social Security — and you’re met with a web page that is literally too expensive for you to view. An overbuilt, too-heavy website isn’t exactly a rarity on today’s internet. (Sadly.) But this design is coming from the federal government, which is quite literally meant to serve every citizen — every single one of them.

The page is tacky, full of mistakes, overweight, and saturated in accessibility failures, despite having every advantage to just do it right (a one-off HTML page is usually a pretty solid starting point).

So yeah: LOL at this parody.

Did you know that the people you fired have been making tremendous, quantifiable improvements to government services? When you asked when was the last time someone’s experience with the government exceeded expectations, did you even know that the public gave Direct File a higher Net Promoter Score than Apple?

Why did you even mention filing taxes? Do you remember that you were killing Direct File? Do you remember campaigning on that?

Christopher Butler doesn’t like the new guy in charge, either, and I think makes some good points:

President Trump’s appointment of AirBnB co-founder Joe Gebbia as “Chief Design Officer” of the United States is a sickening travesty. It not only proves a fundamental misunderstanding of both design and governance, but an unbound commitment to corruption.

Gebbia’s directive to make government services “as satisfying to use as the Apple Store” within three years might serve as an appealing soundbite, but it quickly collapses under the slightest scrutiny: why? how? with what design army? The creation of the so-called National Design Studio and Gebbia’s appointment as its chief should raise serious questions about credentials, institutional destruction, and continued corruption.

I can’t get past firing all these great people from an obviously effective organization just to start it over, do nothing, and try to sound amazing doing it. It’s the most extreme hypocrisy I can imagine. Fuck him, fuck that.

My buddy Jason Chinchen made this highlight reel of the Centralia Old-Time Campout above. As Jason writes:

The 2025 PNW gathering of old-time musicians in Centralia Washington. Appalachian fiddle music and other genres of old-time and folk music being passed down by ear as originally done. The Centralia Campout occurs every year on the sheep pasture at Ray Leach’s property on the Skookumchuck river. Amateur and professional musicians gather to share and learn fiddle tunes for 10 days each year in August.

Some of my photos from it.

👋 Fellow Webnerds!

This is a written version of my talk “Designing DX”. I just want to lollygag about with y’all about this squishy concept of DX. We’ll draw ideas and parallels from the real world (the one with grass, boozy milkshakes, and that glowing orb in the sky that makes you squint). There are things to be learned out there.

DX means “Developer Experience”.

It’s not some new JavaScript framework. Maybe it will be someday because developers sometimes pick horribly unsearchable names. Remember that people who worked for Google made a programming language named “Go”.

My name is Chris Coyier.

I care about DX mostly because I’m a developer and generally a picky bastard. I demand good DX in my tools. I’m like hedonism-bot only the grapes are like cool VS Code extensions.

Also I buy sunglasses that make me look vaguely like a drug lord when I go on vacation just to feel something.

I have some DX cred.

Aside from just being a developer myself, I’m a co-founder of a SaaS website (CodePen), so I’m at least partially responsible for the DX of the tools we use as a team. Alex, my co-founder is the CTO and fortunately he’s got pretty good taste. He’s why I have to write Go all the time (don’t hate it, except the templates).

The product we make (CodePen: Go PRO) is also literally for developers, so I guess we’d better care about DX.

We’ve been working on a CodePen 2.0 for quite a while now. We’ve been taking some 15 years of experience with building and running CodePen, knowing exactly what our users ask for and need, combining that with what we think killer DX for building websites would be, then building that.

Here’s the meat of it. I like to think about DX in narrow pathways. There is a specific job that a developer needs to do, and they are going to use a thing to do it. Good DX of the thing has these four important attributes:

You’re ableto do the thing you want to do and it’s clear if you can’t.
It’s obvious and easy how to do the thing you want to do.
Doing that thing is fast and satisfying.
If anything goes wrong it’s clear, actionable, and help is available. Let’s look at the fairly narrow job of “developer needs to create and edit some HTML”. That just so happens to be a reason someone might want to use CodePen — so it’s near and dear to my heart.

HTML is literally a plain text file. It’s not a proprietary format. It’s just got an .html file extension or .htm if you’re nasty.

Make whatever.html and open it in the browser and will render that bad girl.

My multi-thousand dollar Macintosh™️ computer doesn’t come with any software particularly well suited for this job 🫠. There is the terminal I guess but I’m not one of those VIM weirdos [squints].

The closest thing with a “User Interface” is TextEdit. Mega bonus points for being “free”, pre-installed and ready-to-go.

But TextEdit really wants to create “Rich Text” documents with, like bolditalic and images and whatever. Like a little baby Microsoft Word. Nobody wants this but that’s what it does. If you want to write actual HTML syntax, you need to know to come into the settings and change it to Plain Text format.

Even if you take that Very Extreme® step of changing that setting, if you try to save a file with an .html file extension, it throws up a warning saying that better people than you actually use .txt thank you very much.

Plus it asks you that every single time. It doesn’t do something reasonable like remember.

That’s a video on the left.

It’s of me trying to write HTML in TextEdit.

Notice how it doesn’t help me at all in absolutely any sense of the word.

I’m only sort of setting up a strawman here. Mostly I want to paint a picture of just how far we’ve come with the DX of even such a simple task as writing plain text HTML. It’s gotten pretty good, you’ll see.

Nobody codes typing every character of the final code by hand. I’m not trying to be hyperbolic: I’m pretty sure literally nobody seriously codes that way. Better tools are free and easily available.

This is what the editor is looking like so far on CodePen 2.0, where all I’m doing is writing some HTML. I’m not showing this to wildly impress you, but to show how far we’ve come with this simple plain text editing job.

I’m not just writing HTML but seeing the results of it. I can wipe it all away and bring it back with a snippet. Autocomplete helps me finish what I’m thinking with valid values. Syntax highlighting makes it look nicer. Automatic indentation help it feel nicer. And there is so much more.

One difference when we’re considering this “the job is to write some HTML task” is that CodePen puts a basic scaffold of HTML there for you.

The user can delete it, they can change their defaults, they can start from a different template, they have lots of options.

But, by far, the most important thing is whatever the default is. Just give developers a common working state.

All this is easily satisfying #1: They are able to do the job.

I love me some settings, but I’m Power User McGraff. If you’re sitting in a meeting and someone is like “we could make it a setting” you should say: “Yep, we could. Maybe we even should. Just know that 1) it’s technical debt forever and 2) it matters 10✕ more whatever the default is because most people never touch any settings.”

So we know our hero tool is able to do the job of writing HTML, but is that job easy and obvious? (Another core tenet of DX)

Let’s first step out into the real world for a moment: we’ve got a new job. We pull our car up to our house, and we need to get the car into the ~~car hole~~ garage.

What is the tool at hand now? Yes: the aptly named “garage door opener”. It opens garage doors.

There are lots of other little things at work here, like the fact that garage doors are slatted and hinged so they can roll up on tracks, making more useful garage space. Plus the fact that the garage door is actually counterbalanced by large springs making it easier for the garage door opener to open it. (There are tangential areas for improvement!)

Is the garage door opener easy and obvious to use? That is, core tenet #2 of DX. Indeed it is, it’s a button! You boop it! It opens the garage!

A single button that does exactly the thing you want it to do is an excellent user interface.

Can your thing be as easy as a button?

The keypad for garage door openers are arguably even more important. Garage door openers were invented in the 1920’s but didn’t take off until the 1940’s when they keypad came along. The experience matters!

So garage door openers are easy to use, but are they fast and satisfying? That being core tenet #3, of course. Sure, I’d argue that they are. It’s certainly faster than getting out of your car and manually lifting the door up. If it’s raining you better bet that’s satisfying.

The satisfaction can come in other ways, though. For instance, my garage door opener (and most do) has a light on it that comes on when you interact with it at all, including opening the door. It’s a little, perhaps obvious, thing, but it’s like thanks little guy! I absolutely prefer driving my car into a room that isn’t pitch black. These jobs that people need are directly related, so do them both!

Can your thing do ancillary helpful and satisfying things?

What about when things go wrong? A power outage is common, where the garage door opener stops working and actually prevents the door from being opened.

But there is a solution: a RED cord that hangs down. Pull it, and the opener disengages and then you can open/close the door manually.

Is that red cord perfect? Nah. There have been multiple times in my life I’d had to teach someone how to do that, so it’s not as clear as it could be. I’m sure I was taught it at one time. Maybe some kind of switch could be built that would put the door in manual mode when the power goes out?

It’s fun to think without limitations on how any part of this could be better. Don’t always worry about how it could be made, how to market it, how expensive it is, etc. What if the door was a force field? Disengaging that would be a heck of a lot faster than waiting for the garage door to slowly open.

You don’t ever need the boop button on my wife’s car, it just automatically opens the garage when she pulls up. As much as I love the button, that’s clever stuff.

Thinking even bigger, what if we didn’t need garage doors at all? We use them to keep the car safe and warm and away from the elements, but what if there was some kind of wild Batman Car Shield we could invent instead?

Let’s move back into actual technology.

It’s become almost table stakes for a framework to provide what I called common working state. Right on the homepage for Next.js we can see:

npx create-next-app@latest Developers will recognize that as a CLI command. Run it, and a Next.js app will be scaffolded out for you quickly. This would be a lot of fiddly work to do by hand, so they are very smart to just do it for you. It feels impressive and helpful.

Astro does the same exact thing with:

npm create astro@latest Here’s how that looks to use. The video here is exactly one minute long. Not bad as it includes the complete npm install.

Is there common working state you can give to the users of your technical product? Is there anything at all you can just do for them?

You should just do it.

Shia Labeouf said that once and it was so impactful Nike later picked it up as a slogan.

What about coding itself?

That’s a huge part of DX. I’ll say: obviously.

This is a massive opportunity for being helpful, that is, making the job the developer is trying to do quicker and more satisfying.

These days, we’ve got THE TRIFECTA of things trying to help us inside the code editor:

Snippets (e.g. user custom, installed, Emmet, etc)
IntelliSense (e.g. Autocomplete)
AI (several forms) Here, watch them all work together at the same time, allowing a user to take advantage of whichever seems the most helpful.

That is tricky stuff, people. And I don’t think it’s perfect.

Here’s the rub. Snippets are typically invoked with TAB. IntelliSense is typically invoked with ENTER. But now AI comes in with the ghost text typeahead, and it needs a key too. So far (e.g. GitHub Copilot in VS Code among many others) have absconded TAB. That means snippets and AI are fighting for which one gets to respond to that TAB (not to mention TAB is for tabbing!). So the DX here requires a lot of nuance. Right now, AI typically takes a second or two to kick in, so if you want a snippet you’ve got a second to hit it, then it’s replaced with an AI suggestion. That’s… OK. Not great but OK. It gets worse as AI gets faster (so it might be smart to keep AI purposefully slow, take the time to be smarter!). Or you have to hit ESC (or something) to whisk away the AI and hope the snippet will still work.

This is all awkward, yet interesting territory and I think it will take time for the DX of “code help” tools to shake out.

Speaking of being helpful.

Syntax highlighting is an amazing feature of coding. It’s certainly not new, but it’s worth thinking about.

It helps “reason about” code. The reference to an object and the method on the object will (probably) be different colors. Syntax highlighting helps us understand that quickly. Brackets of matching color frame chunks of code that is grouped (indentation helps with this too).

Better, when code is malformed the first line of defense is syntax highlighting.

CodePen’s “High Contrast” themes have pretty error-looking colors when there is broken HTML.

Back in the real world, we can liken this behavior to rumble strips along highways. If things are going a little wrong (put your phone down, jeepers crimeny) you are warned with sight, sound, and feel. This is designed to help you get back on track before things get worse. The same kind of benefit of syntax highlighting.

What can your tech product do to help push people back in the right direction without being too heavy handed about it?

This is a DX classic, and I agree heartily:

Make the right thing easy.

Heck yeah. We already looked at with providing a common working state (that working state should be excellent: good accessibility, good performance, good design, whatever metrics apply).

If we were, say, applying this concept to an API, an example might be requesting records should be paginated by default. This is probably the right thing, and ensures queries aren’t too heavy by default.

But making the right thing easy has a sister: making the wrong thing hard. This is what smarter people than I call the “Pit of Success”. If you making doing the wrong thing hard/annoying, you’re protecting people on two sides and they are much more likely to succeed that way.

React’s dangerouslySetInnerHTML prop is a perfect example of making the wrong thing harder. If you have a bit of raw HTML, it’s the wrong thing, generally, to just plop it onto a page (that’s ripe for XSS security vulnerabilities). So React automatically escapes, and thus makes safe, that HTML, but it also won’t really be HTML anymore, it will be a string representation of that HTML and probably not what you want. If you absolutely know it’s safe and need to do it anyway, you can but it’s annoying in that you have to use this weirdly named prop and pass in the value in a bit of a convoluted way.

Red squiggles are the best DX concept ever. They are in the same bucket as syntax highlighting in the sense that the intention is to alert you to problems, and they do it in the perfect context: exactly where the problem is.

TypeScript is a quintessential example of red squiggles. Red squiggles are in fact most of the value of TypeScript. They point you toward problems in your code and give at least some indication of what’s wrong.

One trait I love about them is they have various levels of intensity that you opt into just by interacting with them. You may just see the squiggle and that’s enough and can fix it from there. You might need more info so you hover over it and get whatever messaging TypeScript can muster up. Or you might need to leave all the errors “expanded” so you can see the error message in a more stable format while you deal with it. That is intentionally built DX.

At CodePen we’re of the opinion that a high level distinction can be made about squiggles. Some squiggles are show-stoppers. Bad syntax, bad config… whatever it is that actually prevents the code from being usable at all. That’s a red squiggle.

That is distinctly different than code that might be a problem. That’s everything a “linter” might tell you about your code (e.g. a different type of loop would be better) but it could also be things like a config file having a value that doesn’t match a schema. It might be a problem but it doesn’t need to prevent the code from running. I feel like a lot of TypeScript could be yellow squiggles honestly.

We call these messages about the code to the coder “diagnostics” and spent a lot of time figuring out how best to present them. The dial, so to speak, needs to be turned up to the point they are obvious and actionable, but not so high they are actually annoying.

Speaking of linting (and formatting), these are the tools that help developers be as opinionated as they want to be. I probably don’t need to tell you that developers are awfully opinionated. If you have 45 minutes ask a developer what kind of socks they like.

It’s a double whammy though. Developers can be opinionated about some code related thing, and be opinionated about the tool that helps them enforce the opinion.

Tabs vs Spaces is a classic example. Yes, you probably have an opinion on this. Great. But I’d be willing to bet your actual opinion is that you have some preference, and you want it to be consistent and not to have to think about it constantly. That is: an opinion about the tool used and its config.

My yard sign at home.

When I started writing Go code, I found it interesting that the language itself ships with a formatter. It doesn’t even feel optional really, everyone uses it, and thus all Go code in the world looks the same.

It’s great.

After that silly Silicon Valley episode, Business Insider did research on GitHub repos by language to see how the tabs vs spaces thing played out across different languages.

I used to be a spaces guy so part of me isn’t surprised seeing it dominate most languages. I learn toward tabs now because there are some clear advantages (accessibility being the biggest) and mostly it doesn’t matter.

Notice Go: it’s 100% tabs.

Fortunately, Prettier exists for the bulk of front-end specific languages and it does a great job.

The DX of using it is rather fascinating to me. Prettier is just a software program. You feed it some input (a file of code) and config and it produces output (your file of code, formatted).

When does that happen, though?

You could (and can) call it at the command line with an API. You could use it’s JavaScript API. You could wire it up to your GitHub precommit hooks and not allow unformatted commits. Or make it part of your CI process and autocommit formatted code in case any slips through.

All those are fine and things that teams can do (and, ahem: do do). But they aren’t why Prettier is loved.

Prettier is loved because it has the same interface as your garage door opener: boop.

Prettier (by virtue of code editor integrations) runs when you save a file. That’s the real DX innovation. It’s the perfect place to slot it in. You’re likely done with a bit of work, habitually saving, taking a breath, and now formatting your code. It fits into a natural cycle.

Another thing to love about Prettier is that it respects a wider “standard” of EditorConfig. If something better than Prettier comes along, or Prettier gets cancelled or whatever, the new tool can respect the formatting settings in an .editorconfig file. That’s lovely and I wish more tech worked that way.

Remember how syntax highlighting is like rumble strips for coding? Formatters (like Prettier or gofmt) can be like that too. If your code is too jacked up to be formatted, it’s a poke in your ribs to fix your shit. In my experience, it becomes priority #1 to get that fixed before thinking about coding anything else. And I don’t mind! I like the DX of slightly-increasing annoyingness to produce correct code.

Developers are more opinionated than most, but everyone tends to have them. People tend to have a fairly strong opinion about window vs isle seat if they fly a lot, for instance.

Most people like the window. Friggin weirdos if you ask me. I don’t like having to ask someone to get up to pee.

Knowing that people have those opinions, software can be built to accomodate them. Delta allows you to simply save your preference, so that when booking it can default to that, or if they need to upgrade you or rebook you they can do so and stick to what you like.

Surely not that many people actually do that (nobody changes defaults, see above) but for those that do, it’s a very appreciated gesture and cultivates loyalty.

Opinions opinions opinions.

Developers have favorite keyboards and mice. They certainly have a strong one about their operating system. They likely have a browser you’ll pry from their cold dead hands. And it goes on and on and on.

Now here comes you. Building a thing. For them.

You’re rolling in thick with an opinion.

Your opinion is: use my thing.

If you’re going to do that, it’s almost your duty to then be unopinionated about as much else as you can. Your thing should work with other things seamlessly. That’ll probably be work, but hey, that’s the job here.

At CodePen we have (and are building) a web-based code editor. So our opinion is: use that editor. And the plan is to be as flexible otherwise with the other things developers might want to do.

Strike the right balance, and people will love you and your thing because of the opinion and because of the lack of other opinions.

I’m sure Redwood is great and all, and has it’s fans, but it seems like it’s behind other frameworks in it’s cohort.

I’d bet you a glazed donut it’s because it rolls too deep with opinions. That stack of opinions is simply too big. They might be great opinions and developers like it when you come in with opinions, but not ten. Ten is too many opinions.

Time between doing some work and seeing the results of that work is crucial. That’s why being a gravedigger is so satisfying. Shovel, hole.

In computers we have to wait for computers to compute. Computers are incredibly fast, so of course we make them do the most complicated shit imaginable to make sure websites at least take a couple of seconds.

Most coding is a two-panel game (at least). Code in one area and see output in the other. The smoother you can make that, the better the DX. It’s worth literally building tools to improve it.

You can imagine writing HTML then seeing that HTML rendered in a web browser, that’s a feedback loop I’ve spent my career on. But it’s anything really. You could be writing Ruby code and having it triggers tests that run when you save the file. You could be writing an integration and watching your terminal log out data and events as you work.

How fast do you want that feedback loop to be? What if it was an hour? I guess you’d be careful as hell what you ~~punched on those cards~~ with the code you write as silly mistakes will take ages to emerge. Any amount of minutes as you’ll almost certainly get up to do something else. Any amount of seconds and your brain will wander.

It’s not until a feedback look is one second that you brain won’t leave the task at hand.

It’s not until 100-200ms that the task feels instant. That’s the goal of course. Instant literally makes developers do better work.

A version of an instant feedback loop is an affordance, a term I heard in Don Norman’s book The Design of Everyday Things.

This is not I teapot I own or have ever used, but I immediately understand it. It has a handle, you pick it up with that. It has a lid, you can open it there. It pours out of the spout. Done deal.

This one is metal and has a stove-burned sized footprint, so, ya know, it goes on the stove. The handle says: “this thing gets hot so this design helps you pick it up anyway.”

Designs can be very different and even work a bit differently, but affordances ensure we understand it and likely can use it immediately.

Here’s a device I saw in the same category. It’s designed to go on the stove. But it looks plastic so that’s scary? And there is no handle so where do you pick up the thing that affordances tell us will be hot? And why does it grow blue-ice looking designs on it when it’s… hot?? And it’s multi functional apparently but how do I know that? It’s probably innovative in certain ways, but the company doesn’t exist anymore, so what does that tell you?

I heard about this term from my boss Kevin Hale who I worked for at Wufoo who I thought was a great designer. It’s a Japanese term that means to “mistake proof” something.

I don’t know if this is the perfect example but it’s one I think about.

Gas pumps have gotten better over the years. We can do it ourselves (I like that, I don’t like having to wait). We also don’t need to go inside first, we can do it all right at the pump by inserting a credit card.

But ooops wait, it’s the wrong way, oops it’s backwards, derp. Happens all the damn time.

So screw inserting or sliding, let’s poke yoke this sucker.

Now you just tap it with your card. Can’t be upside down or sideways or even have a scratched up swiping strip. It just works.

Better still, you can boop your phone or watch it on it which is likely even handier than getting out a credit card.

It’s not perfect (I love those hand written notes explaining exactly where you need to boop it) but it’s in the right direction.

What you can you poke yoke on your thing?

Remember this user interface in the movie Total Recall?

It’s amazing.

This weird ass alien comes out of a dude’s chest and tells Arnold Schwarzenegger he needs to start the reactor in order to bring back atmosphere to Mars.

But Arnold…

But then he sees the user interface for the reactor and is like: oh.

It’s like the garage door opener of alien atmosphere generation technology.

I actually kinda like it better, so I did this mockup for someone to build later.

Think I used AI for that? You bet I didn’t I used Shutterstock and Photoshop like jesus intended.

Let’s do another tech one. Say we’ve made a website locally and we want to now put it on the Real Internet.

Not all tools do all jobs, and that’s fine. But sometimes it means hunting around for tools that do help us, which is why developers are always on the prowl for good DX. If we have to pick tools, impress us.

For most of my formative years of making websites, these were the steps. It’s kind of a lot of steps!

I think of the book Jobs to be Done here. Or at least the principal around it that is how people talk about it. Hone in on the thing that a person is actually trying to do. Don’t be fooled by what a product says it does or how it’s marketed but the real life task the person has in their brain.

I need to put this website online.

That’s a job-to-be-done.

It’s seven steps, and involves at least three tools. The place where you buy the domain name, the place where you host the site, and the tool you use to move the files to the hosting.

I credit Heroku for being an early player (the first?) in crushing this job-to-be-done. Part of the innovation was putting the tools to do this right at the command line where users are building their websites already.

Run a single command, your website files shoot up the cloud and becomes a website.

This takes a 7-step, 3-tool job in to a 1-step, 1-tool job. That rules.

All hosts worth their salt do this now in some fashion. The Netlify, Vercel, Cloudflare, etc of the world have their own innovation in reacting to Git commits rather than CLI commands, which honestly I like even better.

Here’s my updating a website on Cloudflare Pages. So satisfying.

DX is the product and using the product. Technical products tend to have a degree of complication by their nature. They tend to need documentation to fully understand how they work.

Airtable has pretty decent docs.

Their docs actually show example code for every part of their API. Better, they have a little toggle to add your API key to the code, so if you need to quickly execute it to test it, it’s a copy and paste job.

Sadly, I’m told that in the short time between when I took these screenshots and publishing this, they have removed that feature as it’s all token-based now. Booooooo.

What’s better than that?

The docs are scoped to literally the exact table I navigated to these docs from. These aren’t generic API docs, they are specific API docs.

What would be better than that?

Prove it! The code is sitting right there, why don’t they allow me to run it right there and see the results?

What would be better than that?

Let me edit the code! You’re just a data warehouse, a lot of the value is in me getting the data out in a useful way. Let me play!

What would be better than that?

Host the code for me as a cloud function. Why not? It’s cheap and secure and a nice little upsell. Give me a URL to hit that runs a bit of code and ships me exactly the data I want with my own custom logic.

What would be better than that?

Poutine.

They put cheese curds and gravy on fries it’s wild.

Thanks!Thanks for checking out my talk.

Feel free to support independent software that loves you back.

Jobs to Be Done: A Roadmap for Customer-Centered Innovation

The Design of Everyday Things: Revised and Expanded Edition

I have a killer business idea.

I’m just going to take one penny from every bank account in the world.

I’m not going to ask; you can’t say no. It really won’t affect you. You probably won’t even notice, and even if you do, again, it will not affect you. What’s a penny? Nothing.

It will benefit me though. Big time. I’m going to have a ridiculous amount of money, which will make me important and that money will generate more money automatically.

I suspect a couple dozen other companies will follow me in this, as it’s obviously a pretty sweet business idea. But for you? What’s a quarter? “NBD” the kids would say.

Fine — we’ll make it so you can say no. Feel better? We’re not going to not take the penny, but we hear you. We’ll take that under consideration. We definitely plan to consider your request. Bear in mind the technology actually doesn’t exist to put the penny back in your bank account. Nor does the incentive, am I right Todd? Haha, that’s just a joke between me and Todd. He’s my money guy.

We understand that some of you might take some kind of “moral stand” against this penny harvesting. I’ll say this: if your market cap is over a billion dollars, we will consider talking to you about not taking your penny. Well, our lawyers will talk. I’m afraid the rest of you will be subject to our penny harvester. It’s actually named PENNY-x-FINANCE4o. Cool right? Rolls off the tongue.

If you’d like to come say hi our headquarters are in Beautiful Small Town, Tennessee. There is this majestic waterfall that we pipe right into our server farms. We actually renamed it Takeapenny Falls.

We’re hiring!!!!

I’m certainly not above government criticism nor do I think lying for political gain is a new trick. I am bummed that a website needs to exist called Hurricane Rumor Response from FEMA in order to combat a barrage of lies accusing them of everything stealing donations to literally preventing aid. Hey, I’m not on the ground in these hurricane zones so what do I know? But do you really think there is a giant organization that exists to help people in disasters, but it’s really a big secret leftie conspiracy to … what … poke people when they are down? It’s the lying that gets to me. It used to matter so much when people lied.

📺 Presumed Innocent — A pretty fun whodunit ride with twists despite most of the people involved being pretty unlikable. I couldn’t shake the feeling that a lot of these people should be spending way more time and energy on figuring out who did it than worrying about establishing doubt.
🕹️ A Short Hike — 10/10 absolutely lovable fun little game. Played with 6-year old Ruby and we were able to pass the Switch controller back and forth while exploring. She is the one who finally got to to the top which she was extremely proud of.
📺 Sunny — I was in it for the Japanese setting and found the plot enjoyably weird, if a bit slow.
📺 The Rings of Power — Season 2 is ongoing and I’m just loving it. It’s such a big world they are creating, and are benefitting from all the work of The Lord of the Rings and Hobbit series. I find myself enjoying the Nerd of the Rings recaps just as much as the show itself.
📺 The Perfect Couple — Miranda and I watched it entirely together and I mostly enjoyed us making fun of it the whole time. As a quick one-and-done series it probably would have been fun and satisfying anyway.

Jeff Bridgforth:

A front-end developer is the one that makes the design come alive. He or she is the person responsible for bringing the creative vision of the designer into being through code and can even push the design further by adding the interactivity or animation layer that the designer may not have even thought of.

Think like a front-end developer

I still think like Jeff, despite the term front-end developer having expanded to also include “Write Prisma migration to include referrer URL in users database table, then update GraphQL API to validate and accept a referrerURL value in the auth Mutation, then update <UserAuth /> component to determine this value and pass it to the API from a hidden input field. Then build an admin dashboard to visualize the collected data and use AI to analyze trends.”

It really wasn’t that long ago when the Western U.S. wasn’t absolutely guaranteed to be on fire every summer and into the fall. Now, it’s just what happens. August and September? That’s “smoke season”. What should be absolutely beautiful months to enjoy the outdoors are now when it rains ash, the sky is a deep apocalyptic orange in the middle of the day, and small talk is about AQI. People plan trips to be elsewhere because you can count on it like rain in the spring and snow in the winter.

When I think about human contribution to climate change, I always think about cars and how relatively recent there are in Earth’s history. We’ve only been producing cars for ~120 years and we’ve made over 2 billion of them. Two billion fossil fuel burning cars. Each car burns ~5,000 gallons of gas in it’s life.

2,000,000,000 * 5,000 = 10,000,000,000,000 Ten trillion. In the last 120 years we’ve set ten trillion gallons of gasoline on fire. Just seems like yeahhh that’s probably not going to go good.

I’m part of that, to be sure. Sorry about that, kids.

I love the product name. Ruby has just learned two-wheel bike riding and is loving it. But we live in a very hilly area. This little tow strap thing is very easy to pop on and off so I can tug her up hills when she needs it, then remove when she doesn’t (it’s kind of annoying going downhill).

Maybe you knew Brad Frost played the bass? What you might not know is Brad is a monster on the bass. His love for performing music is off the charts.

So for Brad’s 40th birthday he had an idea: throw a concert. It came fully named: Frostapalooza.

The way Brad envisioned it, it was a pretty damn big idea for a pretty damn big concert. Not just a handful of people, but forty musicians in all, rotating on and off stage, playing both original music and covers in a wide variety of styles. Like The Last Waltz, except, you know, in Pittsburgh and with less Martin Scorsese and more GoPros.

This is how Brad asked (via website, naturally):

How do you say no to that?

I said yes, despite a healthy amount of trepidation (I’m a very amateur musician at best). Fortunately, we had a year to get it all together. And by “we”, I mostly mean the core gang in Pittsburgh, meaning Brad, his (rockstar) wife Melissa, and his brother Ian who would be on drums the whole night.

Jeremy beat me to the blogging punch and summarized it nicely:

Over the course of the last year, things began to shape up. There were playlists. There were spreadsheets. Dot voting was involved. Anyone with any experience of playing live music was getting nervous.

You could feel it coming together though. The setlist was solidified. Who was playing on what was decided. Practicing began. Zoom calls happened. There were audio files slinging around that we could practice to and lay our own tracks on top of for feedback and figuring out the right vibe.

Me trying a banjo style to layer on The WeightYadda yadda yadda — I’m on a plane to Pittsburgh.

Rehearsals were in Brad and Melissa’s ~~basement~~ music cave. I ran into Jeremy and Jessica the minute I got to the hotel, so we ended up getting some BBQ together and got a car over there together, and we jammed!

Friggin love that Led Zeppelin III shirt.The next day Dave and Jessie rolled in from Austin, then we went right back over to the cave to rehearse again.

Here’s Daniel T. Hall on the saw:

I actually didn’t have that much to rehearse, so I was mostly just hanging out. One of my jobs was to make sure that we had cool videos of visualizations to use at the show. See Jeff Robbins was there who makes software called Visibox. Brad’s idea was to have people make Pens and we’d project them during the show. People did that, so I sat around turning them into videos which is what Visibox needed. Jeff ultimately did 99% of the work getting Visibox doing it’s thing during the show, and it turned out super cool.

Jumping ahead a little bit, just so I can show you the visualizations bit, you can see them running above the stage here:

I like how Jeff put border-radius: 9999px on the so it looked cooler on somewhat weirdly shaped “screen” we had at the venue.I was also just chilling out outside. I kinda knew this would be one of the best opportunities to do a little lawn pickin’ with the acoustic folks, so we made that happen:

Barlow Knife off The SessionPeople kept thinking my Thump t-shirt was a Trump t-shirt and that was a little mortifying.

I tried teaching everyone John Brown’s DreamWe even jammed on the bus ride homeThis day was also the official pre-party for everyone, so people started piling into the house. Fortunately the weather held out and we could hang outside. There were tons of web people there.

Look at all the awesome web people!!Then it was show-day. We all got to the venue and had to set up and sound check. I mostly watched everyone working very hard lol. It was something like 48 inputs to the board, all of which I think Brad was going to capture separately for mixing later.

Then, all of a sudden, it was showtime.

A lot of the best show photos were from Will Browar who wonderfully blogged about it all (and apparently was there from hearing about it on a ShopTalk episode, which is neat). I’ve kiped these glamor shots from Will:

Brad and Mellisa’s daughter Ella was on stage as a hype dancer for most of the entire show. Incredible.

The show itself was an unbelievable outpouring of energy and love. I couldn’t help but imagine if anyone in the audience had decided to go on a lark, not knowing anything about it, they would have been pretty damn impressed. This wasn’t just a couple of nerds poking around at instruments (except me), these were some serious musicians giving it their all.

And also Carson Daly was there lol. On video, as one of the benefit organization is Project Healthly Mind of which he’s on the board and he and Brad are basically zoom friends. The other was NextStep Pittsburgh. Both of these organizations were clearly near and dear to the Frost family in the most personal possible ways. I made a contribution to both.

High five to everyone I met there. Sorry I haven’t named everyone, but everyone was extraordinarily kind and interesting and know that you’re involvement made it happen.

Happy birthday Brad!

WEB UNLEASHED is the ultimate front-end developer conference. Here’s the important details:

When? October 10-11, 2024
Where? Toronto at the Novotel Toronto Centre (or Online)
How much? It varies depending on if you want to do workshops and whatnot, but a standard ticket is $563.87. But note I’ve got a coupon code here for 20% off: WEBU23CC
Who? Me! You! And an absolutely stellar cast.
Why? Because conferences are fun and educational and good for you.

I’ll be there to give a talk and be around. I’ve decided that it would be fun to talk about DX, Developer Experience that is, as a general topic. I have the pleasure of getting to care about it as a developer myself, one that co-runs a company so I have a team of developers to care about, and where that company produces a developer tool. So apparently it turns out I have some thoughts!

I’m working on the talk right now and it’s been an interesting challenge to make sure it’s interesting, entertaining, and full of enough useful take-aways to be worth of a conference talk.

Proof I’ve moved past the notes stage and into the Keynote stage:

They made me this card thing:

📺 Ren Faire (Max): The very horny and gross 80-something man, “King George”, runs a Renaissance Festival in Texas, and is literally the mayor of the city he incorporated around it. The story is about the succession of the festival, but it felt to me that was the wrong story to tell. I would have rather a documentary either more directly about the festival itself (so many cool nerds! show me!), or focused entirely on George’s dates (already the wildest scenes).
📘 Moonbound: Robin Sloan’s latest was absolutely wonderful. I was ultra captivated by the first few pages and repeatedly stunned at the world building and turns. It felt light to me, likely because while it felt epic, nothing terribly horrible happened. That gave it a fresh and likable vibe. Each region they visited was so vastly different it makes me want to know what else is going on on that planet so far into our future. Studio Ghibli make a literal appearance in the book, which felt like an important nod: this is an anime. The talking animals, the techno optimism, the bagelness?! If this becomes a show it very needs to be a cartoon. Worth reading just for how the beavers resolve debates. I added that random colon just for Robin.
📺 Three Pines (Prime): Took me a while realize Alfred Molina is the voice of the dad in Frozen 2. Haunted me for days. It lost me when he figured out who electrocuted the rich mean lady in a chair was the girl with… an electric chair (?!) in her basement (?!).
🎧 The Universe (Podcast/YouTube): Absolutely excellent show about… The Universe, from the beginning on up, with Dr. Katie Mack and John Green. Funny, endearing, and thick with modern knowledge.
🕹️ Kingdom Rush (iOS): I said I would let Kingdom Rush be after playing the first one, but I ended up playing through both Frontiers and Origins as well. Frontiers was the best one so far. I see Alliance is freshly out, and I imagine I’ll give it a run. Tower defense is just so fun.
📺 The Bear Season 3 (Hulu): Like many others, all the intense “Fuck you, no fuck you, no fuck you” stuff just isn’t very fun to watch. I’d call it bad writing, except the good parts are so good that it’s still worth watching. I enjoy being pulled into Chicago for this show. I recently ate at Addison, my first ever three-star experience, so I have a reference for all the ultra fancy restaurant stuff they are doing. I never knew what a “charger” plate was until I was weirded out by this nice plate being removed from my table before it was even used at Addison, and that weirdness is echoed in the show when they are fighting about costs.
📘 I Die Each Time I Hear The Sound: A Mike Doughty memoir. He’s a great writer, drawing upon a weird life of a musician, but I like his The Book of Drugs better.
🎧 Shell Game (Podcast) Evan Ratliff makes an AI voice out of himself and makes it do stuff and it’s weird.

I Die Each Time I Hear the Sound: A Memoir

Contextual
Targeted

Not to bury my point: contextual is the normal, good, fair, effective type of advertising. Targeted is the creepy, resource intensive, privacy invading, and, (?!?!?!!) not particularly effective type of advertising. We’ll get there.

A billboard is contextual advertising. You’re driving on the highway and are told there is a McDonalds in 7 miles. The human condition + geography are the context.

An ad for web hosting on a blog about web development is contextual advertising. I lived this for well over a decade. Web developers are the customer for web hosting so reaching them on a blog about what they do is perfectly contextual. I sold ads to companies that wanted to reach web designers and developers, and I still do on CodePen.

Here’s more contextual advertising. Lifeline (“I’ve fallen and I can’t get up!”) runs and ad on Wheel of Fortune (old people watch The Wheel and need Lifeline). Purina sponsors the local pet parade (there are lots of dog owners there who make a choice about what dog food to buy). An affordable e-bike advertises on busses (people there might be into a commuting alternative). It tends to work.

Targeted advertising, the other kind, is an advent of the digital age. Its the kind that says I only want to show this ad to woman aged 36-44 in Baltimore using an iPhone who have previously purchased shoes online, have stopped to look at at least 3 shoe advertisements in the last week.

How do they know that stuff? I mean — if it’s Facebook you’re just telling them lol. But generally: it’s tracking tech.

Go to The Verge (just to poke at a site I generally like) without an ad blocker, open up the Network panel in DevTools and just let ‘er rip. I’m seeing 400+ requests. That’s tracking at work. You can even just sit there and watch it continue to make requests over time, even while you’re doing nothing. JavaScript is whirring, soaking up whatever data it can, setting cookies, and blasting data along with your precious IP address to god-knows-where. All those requests are slowing down the site, costing you bandwidth, laughing at your privacy, and causing legislation that at least you have to click a giant content-blocking banner with a “yes, this is fine.” button.

But at least it makes advertising better, right? At least it ensures that advertising is super relevant to you, much better than contextual, right?! At least companies are getting a ton of bang for the buck, right?!?!

No:

… three deep, recent studies that show: broad reach beats targeting for incremental growth; that the cost of targeting outweighs the return; and that second and third party data does not outperform a random sample. First party data does beat the random sample – but contextual ads massively outperform even first party data. And they are much, much cheaper.

Those three studies:

“Overwhelming targeting options”, 2023, Ahmadi, Nabout, Skiera, Maleki and Fladenhofer
“Is it wise to prioritise #Reach over #Conversions?” from Rikard Wiberg at PACE
“Is first- or third-party audience data more effective for reaching the ‘right’ customers?”, Nico Neumann, Catherine E. Tucker, Kumar Subramanyam, and John Marshall

Effectiveness testing data is evidence that contextual ads, sorry, the normal, good, fair type cost less and perform better. And as web developers, we know they are better for performance. And as humans, we know they are more ethical.

So what in the smurfing smurf is going on here?

It’s a follow-the-money situation. It’s likely as simple as selling snake oil to cure anything that ails ya. It feels good to buy advertising that is directly (and only) toward people you deem the most likely to become a customer and buyers are willing to pay for that, even if it’s about as effective as actual snake oil.

Hat tip to Jeremy who blogged about this and pointed at the article covering the studies, which includes an actual challenge:

If targeted advertising is going to get preferential treatment from browser makers, I too would like to see some evidence that it actually works.

Let’s see all that proof that 400+ requests for thirsty ass always-running JavaScript is just what we have to do to make advertising good.

This is all in the wake of Chrome saying uhhhhh ya know how we were going to deprecate third-party cookies, a staple of tracking technology? Just kidding. Not only are we not going to do that, we’re going to create new technology on top of it to help tracking more.

Google is uniquely suited to shut all this down and help with contextual advertising what with, ya know, a powerful-if-monopolistic search engine that knows an awful lot about the context of essentially all websites. But instead, the muscle and influence gets behind tracking and targeting.

A week from today is Frostapalooza, Brad’s big show he’s throwing incorporating a ton of friends and family. In addition to the 40 musicians rotating on stage, now there will be visual artists showing off their work as well. Brad writes:

Jeff Robbins makes some really amazing music software called Visibox that helps bands easily create, manage, and run video projections at concerts.

… in order to create the visualizations, I’ve been having a lot of fun generating and refining animations in CodePen.

If sounds fun to you, you can submit a visualization of your own just by tagging a Pen #frostapalooza — and for good measure — contact Brad. Then perhaps it’ll make the stage show. If there is good video of the show I’ll definitely post it here.

Over the last few months I watched…

The Terminal List — Andy Dwyer from Parks and Recreation is a Navy SEAL who makes absolutely zero jokes and accidentally lived through a mission that was set up for his whole squad to die, then even worse stuff happens. So he’s pretty mad, and kills everybody involved, which he can do because… Navy SEAL. It was relatively satisfying in that “I have a particular set of skills” Taken style, but I don’t really care if they keep going.
True Detective, Season 4 — Kali Reis and Jodie Foster were excellent and the story, as bizarre as the details were, actually wrapped up pretty neatly and I was there for for those remote Alaska vibes. Just can’t beat that Season 1.
The Sinner, Season 1 and 2 — In each season, a murder happens that is pretty unusual but the guilty seems straightforward on the surface. Then Bill Pullman gets involved and digs and digs at it until the full story is revealed. While I thought Bill Pullman was unmemorable and the plot holes were gaping, I still mostly enjoyed the ride. I think I’ll bail on the next two seasons though.

They were all kinda dark. I’m starting the Bear Season 3 now and we’ll see if I can take it. I might need something a little funnier or lighter or something for a while.

Back in 2016 I wrote a book called Practical SVG.

Recently, the publisher, A Book Apart, closed shop.

Now you can Read Practical SVG on the web, here on this site, for free. I always like how Mat’s book was online so now mine can join that cool club. I’ll echo what I say on the site:

Thanks to Jeff Eaton for Dancing Queen, the technical project that capably extracted the contents of the final .epub file that A Book Apart originally produced. And then Mat Marquis for building this Eleventy site that took those contents and made them into this nice website

Why read a book about technology from 2016? Jeez then don’t — no skin off my ass lol. But really, in case you’re a front-end developer who’s never used SVG before, it might still be worth a look. The cool thing about SVG is that very little has changed with it. It’s an awfully slow moving technology. The stuff that will feel dated is stuff like using Grunt for the icon system and stuff, which is not particularly in vogue.

How did I get the rights to publish it here? … you ask, chinhands.

When A Book Apart went kaput, us authors banded together (uh, got in a group Slack) and just talked. There was venting, planning, writing, joking, and ultimately we made a collective ask to acquire the rights of our books. They agreed, so many authors are in various stages of getting their book back, updating things, and making them available again however they see fit. Many authors are exploring the various ways to keep selling it, the lowest friction up-front way is to continue to use Ingram, but I imagine you’ll see other various creative alternatives as time goes on.

Ethan just wrote about all this and his books are still available for purchase. Sara Wachter-Boettcher and Eric Meyer’s book is also still available and Eric wrote up their journey here. In both cases, the books are significantly cheaper.

Let’s say you’re on a big mission in the world.

You think websites should be more accessible. Websites should work for anyone regardless of their disabilities.

You also think the web right now is failing in this regard. There are far too many inaccessible websites existing and being created.

You think that educating developers is great and that developers should make accessible websites, but that’s not doing enough. It’s not working.

Neither is governmental enforcement.

Now you’ve got a big idea. You think technology itself can fix websites. You can literally fix the accessibility of websites with more code on the fly by injecting your own additional UI on top of the website.

You’ve even built this technology, and it works great. (This is very much not the case, but let’s assume you’re convinced.)

But now you’re at a fork in the road.

It’s not a fork of giving this technology away for free or not, you’ve already decided to profit from it. Work is work, capitalism is capitalism, so be it.

It’s a fork of who your customer is.

Down one road, you could sell this technology as a browser extension. Users would use it as such, and literally every single website they visit would become perfectly accessible for them. Your goal of making the web accessible for all is achieved for your users.

Down the other road, you could sell the technology as something that is installed on one particular website. This doesn’t go as far at fixing the accessibility of the web, as even if half of all websites buy it (zero chance), that only fixes half of the web for people that need it.

Doesn’t it seem like the first road is better? It helps the people who need it more completely. It’s a direct alignment of needs and fixes.

But you don’t go this road, you sell to individual websites.

Why would you do that?

Because this isn’t about helping people it’s about money.

What is the bigger addressable market? Individual people with disabilities who might be convinced to buy a browser plugin? Or every single website who might be convinced this is the best path to accessibility, and more, the best path to not getting sued.

Paid browser plugins are barely a thing at all. Software for websites is big business. You don’t wanna sell tens of thousands of $19.99 B-to-C products. You want to sell hundreds of thousands of $1,499 (annually) of B-to-B products.

Congratulations you’re an overlay company.

Hey I get it. You gotta make bucks in this world and convincing people to buy products is a classic. But this is a literal scam. You’re scammers. You sell a thing that doesn’t work to companies you’re trying to scare for a bunch of money.

I’ve got an eMountain Bike, but I can’t actually ride it on most of the mountain biking trails around here unless I flagrantly flaunt the “law”. I do that, sometimes. I’m not obnoxious about it. It just seems like history hasn’t caught up yet and it’s silly. It’s like if there was some law about not eating popsicles on piers, but there was 10 popsicle stands at the end of the pier. Sound dumb? Well the extremely-many mountain bike trails around here all point to Bend, Oregon where there at 10 stores selling eBikes.

Sounds like history is starting to come around. The organization Bend e-MTB Access helps change things. There just started a 30-day comments period on all this. I’m pleased to see what is being considered is most of Phil’s and Peterson Ridge, the two nicest and most accessible trail systems around here.

Right here!

Super cool zine from Mat.

Me, I like HTML, and I wanted to do something with a little texture to it. So I asked a bunch of people way more talented than I am if they were down to contribute to a zine about heading elements—h1 and company, here with us for as long as hypertext nodes themselves.

I ordered the print ones (because zines are cool that way), but I’ve already read the PDF and it’s fantastic. It’s funny, it’s weird, it’s niche, and it’s extremely my jam.

Another kid’s device we have that we’ve gotten tons and tons of use out of is the Toniebox. It’s this soft padded box with a speaker on it (or plug in headphones). You place a character on it (a “Tonie”) and it plays the audio associated with that Tonie. It basically tells stories.

We heard about it from another family where the kid referred to it as “listening to their podcasts”.

She listens to various Tonies almost every day with breakfast. She listens to them with friends. Anytime, really, except we don’t let them leave the house usually. They are cool little action figures, but they are like $18 USD so it’s not the kind of thing you wanna lose.

There are a ton of different kinds of them, ranging from popular movies to science-based ones that just blast science information at ya, to music. This pride Tonie, Ms. Rainbow, is awesome. Sometimes it seems like she is lost in thought and imagination while listening, rather than the blank stare of TV watching.

Our little family took a quick trip down to Puerto Vallarta, Mexico — meeting my inlaws there for some fun in the sun.

We stayed at the Hyatt Ziva. We actually “won” the trip a few years back at a live auction/benefit for the Boys & Girls Club of Bend, so it felt nice to make use of it and get down there finally.

The Hyatt Ziva is geographically lovely. The vegetation here is rather dense, unlike Cabo where we recently were which is much dryer.

What they don’t show here is off both sides of that beach are big cool rocky cliffs, making this little area it’s own walled off private cove.The Hyatt Ziva is an “All Inclusive” resort. So, theoretically, since you’ve already paid to be there, you don’t need to spend another dollar. The feeling I got was that many people literally do not. They remind you to tip the airport transportation staff, as they aren’t part of the resort crew, but after that, anyone we tipped (everyone) seemed very pleased and slightly surprised. They offer you a bracelet to wear which gets you into your room which I resisted at first thinking I’d always have my wallet, but (Miranda was right) that is dumb and the bracelet is way better.

Part of my schtick is buying yellow lens sunglasses on vacation and making that my temporary personality. I want people to think I’m at least criminal-adjacent here.It felt very weird to say “I’ll have a beer” and then not pay anything or sign a slip or anything. They just hand you it. You could walk down to the bar in the morning, order tequila shots one after another until you black out face down in a beach chair only to be shaken awake by a guy wearing 25 straw hats trying to sell you one. Hypothetically. Since we’re in our 40’s now and our kid was with us, we kept it to margaritas and Dos Equis and merrily made it to dinner just fine. Except that one time, don’t even worry about it.

Meals: you get seated, you order whatever you want, you eat it, you leave.

Again, it’s weird not to get a check. We were there five days and I didn’t get used to it. It’s almost worth it to buy a bottle of wine (extra) so you have something to sign at the end.

These grackels would steal your food if you left it alone ever.I hate to bitch about it, but the food was just so average. Some of it reminded me of hot lunch in middle school. They have very little incentive to make it great. Their incentive is to make it just good enough that they don’t get negative reviews about it and cost them as little money as possible. Mission accomplished, I suppose, except this blogger schmuck ruining it all. I took 200 photos and not one of them was a meal, which is a shorter review of what I just said.

I love going to Mexico because:

warmth
tequila
tortillas

I’m sure the best tortilla (or tequila) in the world could be made anywhere, but there is a psychological component at play that can’t be replicated. This stuff just hits different when you’re at ground zero.

Miranda was chatting up this donkey so I’d say we were both in good shape. The best meal of the trip was when we left and went into town. I can’t remember the name of the spot, but I got the Huevos Rancheros which were extra loaded with some fresh juicy cheese. See, I was pretty loaded. We stopped at some street vendor spot to buy a bunch of cute little wooden carvings for Ruby’s classmates. The vendor was really trying to land the deal and he kept pouring me tequila shots (did I tell you that I love Mexico?). Except the misogynistic part. My wife was the one doing the deal with the guy, but the shots came my way.

Anyway, that went well.

There are crocodiles there in case that affects your decision making.The town is kinda cool. Certainly more of a “city” than Cabo was (is). There are rainbow flags. My understanding is there isn’t quite the same level of gay acceptance in Mexico the U.S. I knew this, as I have some gay friends who visit Puerto Vallarta somewhat regularly. One of them even got married there. Was that a flex? Sorry. I have black friends, too.

Top: Church. Bottom: Hot Wife.We visited Church of Our Lady of Guadalupe while in town, which is important, I think, but admittedly I find it hard to engage with religious tourism. I’m glad I saw it though.

The first night we were there, there was a wedding which happened to be right outside our window. The decibel level was “loud as fuck” not to mention they totally took over the one nice pool area with a hot tub. If there are wedding at the resort you’re going to, what it means for you is reduced services and trouble sleeping. Especially not great with a 6 year old, but fortunately she was “tired as fuck” that first night so she zonked out well. There were two other weddings, both on the same night, later that week, but by that time we knew better than to even attempt going to bed while it was still going on. Instead, we went to a dance party they threw just for kids. Ruby was literally the only kid (and we were the only adults). It was extremely weird and gave me not-great flashbacks to that time my dad took me to ride the bumper cars at the county fair and the line worked out such that when it was my turn I was the only kid on the bumper cars and just drove the car around not bumping into anything. But Ruby danced her heart out and we joined her and it ended up pretty fun for the like 20 minutes we stayed.

Also, apologies to Harrison and Fabiola. You don’t know us, but we totally crashed and took some family photos in your wedding setup after y’all left. And thanks for the fireworks y’all launched off that was cool. Oh and the Mariachi band you hired was rad too.

The big activity is swimming. There are loads of pools. Several of which are adults-only, and I don’t blame them! This place was friggin single-and-ready-to-mingle. It’s been a while, but I believe I was hit on at the (free) coffeeshop one morning. I think it skewed pretty hetero (stay in town if you are otherwise) but I enjoyed seeing horny young people position themselves.

The pools were almost too warm. I don’t know if cooling pools is a thing though, so it’s fine. You could also swim in the ocean. I’ve swam in the ocean before, but somehow I was just learning for the first time there is a whole system of flags for this. There were definitely some red flags out during the week, but mostly yellow. The couple of times I waded out past most of the breaking waves I had little internal panics and was like I better get back to shore like extremely soon. Not a super strong swimmer, me.

Mexico is also a place where there are people selling things on the beach. I’d watch a documentary about it, honestly. Here, they were even all dressed the same, like they worked for the same outfit somehow? I tried to resist feeling bad for them (I never saw them make sale), but I did anyway. I hope it’s a decent gig, but it’s probably not. Is there some kingpin of it? Do they really work for the resort? What are the laws around it? One of them tried to sell me a pipe full of weed, that’s not legal, right?! Do they iterate on what they sell? Is there Venmo in Mexico? They should look into that because nobody has their wallet on them at an All Inclusive resort.

I liked the sunglasses more and more as the trip went on. Futuristic tropical movie star drug lord is my new personality. I managed to get up and go to the gym each day. They had a “CrossFit” program, which nobody showed up for but me so I pretended not to know about it and just did my own thing. I do like keeping up with the sweating while on trips. Just makes me feel normal in a good way.

Perhaps one of the weirdest aspects of the trip is that we were walking to dinner one evening. At the twilight hour as it were, which is apparently when they dispatch out resort-worker photographers. They snapped some of us, and we were all about it. Every time we’ve had a professional photographer shoot us on a trip we’ve had great results. So we got some that night and planned to do more the next day. I usually find that the experience is a little awkward, then the results are great. This is what it seemed like it was going to be, but then we got the photos back and they were WEIRD. Like the flash was super strong, making the people in the photos super bright and the backgrounds, despite it being very bright outside, dark.

Then it looked like the bodies were cut out and somehow moved or placed onto slightly different backgrounds???? See how otherworldly we look standing on that carpet? Some of them were even worse where the area between legs wasn’t cut out “properly” and looks super off. We have no idea why they would have done that. I’m sure the originals were fine (which we did ultimately request).

I’d totally go back to Puerto Vallarta but I think I’d find a way to stay in town or a resort that’s essentially in town. 9/10.

Quick note that I’m totally going to Frostapalooza (and you can too!)

Frostapalooza is a giant one-night-only benefit concert-slash-party-slash-happening featuring an amorphous super group of talented musicians from bands like:

Brad Frost is turning 40 and throwing this as a massive party/concert. I’ll be playing banjo in the show for a couple of tunes. You’ll likely notice a few other web nerds on the musician lineup.

I love the website. I feel the same way about it as Jeremy does about the new XOXO site:

I really like the newly-launched website for this year’s XOXO festival. I like that the design is pretty much the same for really small screens, really large screens, and everything in between because everything just scales. It’s simultaneously a flyer, a poster, and a billboard.

I think it was during the ShopTalk with Blake Watson where “tower defense” games briefly came up and someone recommended Kingdom Rush. It’s not exactly new, coming out in 2011, but it was new to me. I played on iOS. It feels like the total classic of tower defense games. Monsters come at you, you build towers to stop them. There are different types of towers, and your success comes from the right combinations, upgrades, and placement. The gameplay is very engaging as you aren’t just buying upgrades and new towers, but controlling a hero character who (should) be helping out areas that need it the most, as well as using abilities and purchased items for added help.

I had a lot of fun playing through it. Technically I’m only maybe 75% “done” as each level contains multiple levels of difficulty and extra challenges, but I’m feeling pretty done now that I’ve completed the entire upgrade tree and have 3 stars on every level.

They have a bunch of follow up games, some of which I hear are even better, but I haven’t touched them yet. I lost probably more hours than I should have to this so I might have to let those be for a while.

At one time I got interested in the “eye contact”, or lack of it, on video calls. I was going to present at an online conference, and I wanted people watching to have it look like I was looking right at them. Plus, possibly even more importantly, one-on-one calls with people.

I ended up buying a teleprompter (this one) and mounting it on a pole thing attached to my desk. I needed to put an iPad into it, so that it could reflect off the mirror and I could be looking at it while a camera behind it was capturing through said mirror. I happened to have an iPad that I don’t use much, so that worked out, but it was still awkward. Leaving it there all the time felt like a waste, and running a power cable into the teleprompter was awkward. Taking it in and out was awkward too. Thank gosh Apple has Sidecar because at least then I could have it act as a second display to my actual computer I was video calling on without running another cable.

I’m sure you can guess: the whole operation was just too weird to leave up all the time. The fact that it was this giant contraption hanging off my desk at all times was ultimately what did it in. I gave it away to someone else who wanted to try it.

The fact that Elgato makes one now makes it a little more appealing. Check out how much more chill it is:

If you were presenting, you’d put your slides on that little screen, or your Zoom window if you’re talking to someone or whatever.There is still an issue with it though. You’re only going to look like you’re actually looking at people if you’re looking right at the teleprompter. The fact that dude above has two giant screens in front of him with an exciting video game on it means he’s going to be looking at that primarily. If the goal is not being distracted and actually looking like you’re looking at someone directly during a call, I don’t think this is going to cut it.

It’s almost like you need a camera right in the middle of your dang monitor.

It’s almost like you need a camera right in the middle of your dang monitor.

That’s what the Center Cam does! It’s literally this dingus that drops down a camera right in the middle of your monitor.

I love how this duder clipped it not to his monitor but to another webcam already there. It seems so silly but also kinda like the only thing that would actually work, until they find some ultra clever way to put a camera behind a screen. I don’t think I’m going to pull the trigger on it right now, but if I had to do a ton of interviewing or something, I’d be tempted.

If you long for a web of yore were things were better, somehow:

The thing is: none of this is gone. Nothing about the web has changed that prevents us from going back. If anything, it’s become a lot easier. We can return. Better, yet: we can restore the things we loved about the old web while incorporating the wonderful things that have emerged since, developing even better things as we go forward, and leaving behind some things from the early web days we all too often forget when we put on our rose-colored glasses.

Molly White — We can have a different web

I have my doubts a ton of people will start building personal websites again, but I sure wish they would. I’ll read it.

I mostly play old time and bluegrass music. Particularly in old time and fiddle songs, the songs have a fairly rigid and repetitious structure. That’s not to say players don’t do interesting things with it, but unless a song is intentionally crooked, the structure of the song remains the same throughout.

A typical structure is AABB. That is, play the “A part” twice, play the “B part” twice, and repeat.

As an example, here’s a clip of Soldier’s Joy off the famous Will the Circle be Unbroken album:

If you’re just learning the song, it’s useful to just about any instrument to know what key it’s in and what the chords are for the song. There are various sites that tend to have this information, some better than others. I tend to bookmark the ones that are good and look there first.

For old time, TaterJoes.com is a resource I’ve used countless times. They’ve got PDF’s of a ton of songs that old time players tend to play. (Irish players, you know about The Session surely.) Here’s Soldier’s Joy:

That’s in “tab” rather than sheet music which is nice for me as I prefer it. I can read music very slowly but I can read tab quickly. So that’s handy, but notice it’s missing the chords. A lot of the songs on Tater Joe’s actually do have chords in the tabs (or the sheet music, which they also offer under the fiddle section) but clearly not all.

On a song like Soldier’s Joy, even an amateur like myself can sort out the chords, but some songs are awfully tricky and have what I’d consider weird changes or they happen quickly enough that I miss them. If you’d like to be shown the chords, you’re looking elsewhere.

A great resource for old time chords is Strum Machine. Here’s Soldier’s Joy there.

Perfect! That’s super useful for the guitar player of course, but it’s really useful for everyone. That’s telling the bass player where it’s going. For me as the banjo player — if I for sure know the current chord — I’m able to fake the melody or do some other form of backup if I know the proper chord.

But notice that big ol’ blue ▶️ play button there! Strum Machine isn’t just for looking at the chords, it will play them for you. No melodies here, this is entirely playing backup audio so you can play or sing along with it, most likely learning the melody and harmony parts. Tater Joe’s has MIDI output of the songs for melody help, but I find them a little too weird to be helpful. Probably better to just find an actual recording of the song to listen to.

What you hear when you kick off the song on Strum Machine is real instrument recordings playing the chords present. It’s all done programmatically. This isn’t a one-off recording of Soldier’s Joy, it’s just the chords arranged in this pattern and then turned into sound. Web Audio API? Probably. I’ll try to get the developer on ShopTalk Show someday to see how it all works.

So play that song (which is a paid feature, by the way, there is a free trial) and you’ll hear a guitar playing chords, a mandolin “chopping”, and even a bass playing notes. It’s like a really solid steady backup band for you play along with. It’s a hell of a lot better than a metronome!

Because it’s all programmatic, you can quite easily punch in your own songs for the machine to run. I plunked out this old Paul Simon song to play along with the other day:

Note the interface is just littered with features.

I can change the key (transpose)
I can have it count in when I start, or not, and how much, and how it sounds
I can change the speed (BPM)
I can have it repeat forever or repeat X times then stop
I can have it speed up as it repeats
I can line it up with other songs to play back to back (medley)
I can group the songs into my own lists
I can fork (edit) any existing song to put in my own changes

And there are a ton more features, all of which I find quite interesting and tasteful. See the slashes (/) in the output above? That’s not the default, that’s my own preference to not see repeated chords on the charts.

My favorite niche feature is that the sound that the “fake” instruments play is customizable even on a song-by-song basis. For instance, you can adjust the volumes of the different instruments. A very fancy feature is that you can change the guitar style — different guitar patterns might feel better on different songs or you just prefer a certain style for playing over.

I’m glad I took a deeper look at this app after hearing about it at jams. The first few times I used it, I just thought of it as a chord reference site. Useful still, but meh. Worse, the default login system is one of those “we’ll email you a code!” things, which is not my favorite especially when you have to do it every time you pop open the site on a mobile device. I recently saw you can just set a password and use that (better, even better would be passkeys). And there is also native apps for both mobile and desktop, so you basically just stay logged in forever that way, which is very ideal.

I’ve been practicing with it a lot lately and it’s extremely helpful. I think it helps me get the song right a heck of a lot quicker than playing to the void.

Malcolm Coles:

10+ years ago I created an annual list of websites that FORBADE you from linking to them, DEMANDED you write to ask for permission or LIMITED links to only their home page. Royal Mail even promised to post me a paper licence.

Now a decade has passed, let’s see who’s still doing it … And yes I’ve linked to your websites to prove this.

I’m tempted to think that most of these sites just have some ancient terms copy that they never think about and don’t really care about. Or that the original intention was more about hotlinking than deeplinking. But I’m not so sure. When a site says “…you may only link to the homepage of our website. You must not create a link to any other page of our website” — that’s pretty darn clear (and ridiculous).

I’m also not clear on the law here. I suppose it would be national laws? Are there any countries that have laws on the books this way one way or another? There was a recent ruling regarding website accessibility in the US, but that surely doesn’t weigh in on what you’re allowed to link to. It’s something too dumb for a law to even be relevant right‽ It’s like how there isn’t a law about licking 9-volt batteries.

Feedbin, my RSS reader of choice, has a feature where you can subscribe to email newsletter with a provided email address and the pop right into the reader to read there.

I love that. I don’t really need email newsletters in my actual email, I’d rather read them with all the other stuff I read.

I wrote once:

Rather than using the Feedbin email address directly (look under Settings > General > Sources for yours), use an intermediary email address. I set up a Gmail email just for this, and have it auto-forward to my Feedbin email. Then when I sign up for a newsletter, I use:

**new**-secret-email+specific-newsletter@gmail.com

I had to do this because I started getting spam in my reader and that was untenable. With this technique, I can cut off any particular spam source and not be forced to cycle the email address entirely and lose all my subscriptions.

Good news though, this round-about trick isn’t necessary anymore because Feedbin release Custom Newsletter Addresses.

There is an unfortunate reality of email newsletters. Since running a fairly large inbound email service, it’s come to my attention that newsletter addresses accidentally leak (or get sold?) to spammers. To combat this, you can now deactivate an address entirely. I consider it good email hygiene to use a unique address for every newsletter you sign up for.

Sweet. I’ll be using this for all new newsletters I sign up for. And some extremely rainy day I’ll probably attempt to migrate all my subscriptions.

In Bend, you can’t miss the illustration work of Megan Marie Myers. It’s absolutely everywhere. There are murals. There are calendars for sale everywhere. Prints are hung up at coffeeshops, sometimes as whole exhibitions. She’s got books, stickers, hats, postcards, notecards, and heck, even neck gaiters. If her art wasn’t as charming and well done, it would be annoyingly prevalent. Instead, it’s rather wonderful, and Megan gives our town another little heaping helping of loveliness.

The other day Ruby was watching some show, and the illustration on the show was clearly by Megan. Wow! I thought. Go Megan. Another interesting venue to explore and share her work and style with (probably?) a much larger audience.

I didn’t take note at the time what show it actually was. I assumed it would be easy to find. Megan is on Instagram and Facebook and active on both. Her website is quite well done. 👏. But I wasn’t able to find anything about a show on there. So I used the website to shoot her a quick message through the contact form asking…

… and she wrote back in like 10 minutes.

The show is an animated version of her book The Tagalongs available on some streaming platform I’ve never seen called Vooks. “Storybooks brought to life” — kinda cool. It looks like you can watch it free, but I guess only if you have that URL? There isn’t really a not-logged-in browsing function. Makes sense, they want you to buy a plan. Also she said: “It’s also featured on Storytime Book Read Along on Netflix (during Episode 4 – Animals)”

I was just wildly impressed by the turn around time on that email (email is good). Megan produces an incredible amount of work, has that work in an incredible amount of places in an incredible variety of forms, clearly does commissioned work, and branches out in a variety of interesting ways. To be doing all that and then answering some dorks email is impressive. So many illustrators I know are so damn industrious.

Most internet travels by wire. Straight through the dang ocean. Josh Dzieza in a feature for The Verge:

These fragile wires are constantly breaking — a precarious system on which everything from banks to governments to TikTok depends.

But thanks to a secretive global network of ships on standby, every broken cable is quickly fixed.

I like thinking about little packets of data traveling at the speed of light with a pod of whales ambling along above.

Josh does a great job with the story. Only 22 boats repairing cable world wide! Most boats lay new cable. The people that do the work are aging out and it’s hard to find new people. Even though the work is incredibly important

If, hypothetically, all these cables were to simultaneously break, modern civilization would cease to function. The financial system would immediately freeze.

You’re doing yourself a grave disservice if your writing opens with something boring or banal. You’re going to lose me, at least. I’ve got a list of stuff to read and watch as long as your arm.

Maggie really digs into this, in an effort to get better.

Your challenge is finding the compelling problem in your topic, and clearly presenting it up front. That problem might be deeply buried under a bunch of boring facts and informational details. It might be hard to figure out what it is, and hard to describe once you’ve found it.

The examples Maggie pulls together, both bad and good, are compelling. Don’t miss the ending, which is a heck of a way of saying they are just as important.

I’ve heard the new cooperative version of Scrabble made fun of a few times. These pansy youths just wanna hold hands, drink warm milk, and avoid any conflict. Whatever. Nobody is threatening the value of competition. Me, I think cooperative games are awesome. There are still challenges. You work together to solve them. Like, I dunno, you might wanna be good at later in life because that’s what “work” is. The world could stand some more people who work together toward common positive objectives.

The best bit of kids technology that we have, and this has been true from say age three to now six, is the Amazon Fire HD Kids. The operating system on it is fine. It loads up decently quickly. It’s locked down to only kids stuff. It’s not upselling stuff for the most part, there are tons of free shows, books, and games. The battery life is good, and it’s got a modern USB-C charger like everything else. The case that it comes is super tough — you could throw that thing down the stairs.

I’d consider having a kids iPad, but iPads suck for kids. There is no kid-specific version of the OS, no good account switching, and the apps for kids on iOS suck. A lot of the decent ones want outrageous subscription fees and there are tons of games that are just gross ads and upsells.

I’m as shocked as anyone here, but my kid loves the thing, has for years, and is likely to for years to come. Amazon is crushing Apple on the kid tablet thing.

This popup that 1Password does by default isn’t my jam:

My problem with it is that it isn’t actually helpful. If you do use the feature and save the login, instead of that popup you just get another one that looks essentially the same that you can click to log in. That’s no better! If you don’t use the feature, logging in is still just a one-click thing.

Flipping it off wasn’t super intuitive to me. I assumed it would be the an app, but in retrospect I suppose it’s a bit more obvious it’s part of the browser plugin.

So to turn it off, you open the browser extension UI, then open the Setting area under the hamburger:

Then it’s these three settings that are related to social sign ins. I don’t mind that 1PWD attempts to stop other sites log in popups, but I flip off the settings related to 1PWD trying to save or offer to help with social login.

I just heard about GitButler from a Discord friend.

I’m kind of ripe for toying with Git clients I use, as I just switched to GitHub Desktop. I don’t regret the switch, but I don’t love GitHub Desktop so much I couldn’t imagine another switch. Little stuff bugs me.

GitButler is free (the FAQ makes it seem like forever) so I figured it was worth a shot. I actually quite like the idea of an AI helper for generating commit messages. I’m horribly lazy with commit messages and that alone seems like an actually useful application of AI generated text.

I should have read a bit more though, because the GitButler approach is super weird. I had started using it and making a few commits (the generated commit messages were pretty good), but then I go to make a PR, but my changes aren’t on the branch I originally created for the thing I was working on. I was super weirded out and kind of panicked. Where the hell are my changes?

That’s what I mean I should have looked more into the approach. Like the product video says, with GitButler “you don’t need to create branches, delete branches, switch branches, etc”. GitButler does make branches, but it just automatically does it behind the scenes. I think the big idea is that you can have a bunch of unstaged changes, and then essentially drag and drop them into different branches without worrying about doing the whole stash-and-move dance. Fair enough, I do find that dance rather annoying.

Perhaps I could get used to how it works, but for now, I’m just too weirded out by it and had to bail. I feel like there has gotta be a way to be more helpful with this kind of workflow without freaking me out with “virtual branches” and whatnot.

(For clarity, this isn’t sponsored, even though Automattic did sponsor me in the past for quite a long time. I just find it fascinating following the products they put out.)

For a long time, the message and branding for WordPress.com was “this is the one you use if you want to use WordPress but don’t need or want to do any custom development”. It’s got all the guard rails. You aren’t touching the code or doing anything bespoke, but the tradeoff is that you aren’t going to get hacked, lose data, worry about speed problems or accessibility problems, etc, because it’s all handled for you. And because you’re so with-the-grain, you can even change themes regularly because they are all built to handle your white-bread setup.

That’s the old story though.

Things are very different these days. If you pay for the Creator plan or higher ($300/year), you have SFTP/SSH access and you have direct database access. That’s been a couple years now it feels like. This means you can install your own themes, plugins, etc. Totally changes the story on what you can do with a WordPress site on WordPress.com. It’s essentially a premium WordPress host now, as it’s rather expensive for a single site.

I got a demo yesterday from some nice Automattic employees showcasing some of the new development features on WordPress.com. There were two things I had no idea they were doing:

You can now deploy from GitHub
They now offer an app, Studio, for running your sites locally.

If I was leading developer features at WordPress.com this is 100% exactly what I would have done. It’s bananas to me how WordPress has become as dominant as it has without any real solid answer or help on how to run it locally. This is the answer to that and a real shot across the bow of Local (e.g. WP Engine, now).

And the GitHub Deployment is just crucial. With few exceptions, I feel like websites should be deployed from a code repository, and Git/GitHub being the currently dominant players there this just makes sense. You may remember I’ve been incredulous about this in the past.

So now you can still use WordPress.com entirely with all the guardrails, or you can take them off and do whatever you want. Smart — although it’s weird to watch Automattic fight itself over hosting. The Pressable slogan essentially becomes “it’s not as nice but it’s three times cheaper.”

Dave mentioned in Discord the other day that he listened to a podcast called Finding Drago. He said:

It was recommended to me by a vagrant on the beaches of Chala and it changed my life.

I powered through it and it’s a hell of a strange journey. Strongly recommended, if you feel a podcast about fan fiction about the bad guy from Rocky IV is something you could get into.

That was the joke the camel guy made when we went camel riding in Cabo San Lucas on our vacation. The actual camel ride was about 250 seconds long and not something I’d go out of the way to do again, but the dad jokes were impressively thick.

We celebrated with $11 USD Corona’s at the airport. For some reason I got fixated on how Corona uses Blackletter for their logo. Why does that work so well? What’s the connection? I couldn’t stop thinking about it. I don’t vacation well. Yep — we went to Cabo again! Last time, it was the hardest trip I’ve ever been on by a long shot. Fortunately, like all good trauma, I’ve managed to bury it somewhere inside of me so it come out in little unpredictable spurts rather than, you know, process it with help like an adult.

Fortunately, this time we all had shiny new passports with perfectly valid expiration dates, and aside from a minor standard-issue flight delay, had an easy time getting there.

We stayed at the Hilton Los Cabos. It was nice not to have to make that decision as we tagged along with Miranda’s brother and family who were there on their family vacation. He works for Edward Jones and vacations like this are a perk of the trade. There is a whole three-ring binder of vacations you page through and point at. Nice work if you can get it.

Their family had a variety of Edward Jones-related required activities during the week, but not too much. Apparently they do it that way so the whole thing can technically be a business trip and probably has tax benefits of some kind. Someday I’ll be able to tell you how business works. Just so you know, the guy who actually made Edward Jones the success it is was Ted not Ed, and so my brother-in-law calls him Tedward Jones and apparently nobody laughs at that which is their loss, really.

The Hilton is a lovely place. Loads of pools with cabanas, a hot tub, a decent beach, friendly staff, and plenty of chairs that you don’t have to fight for even on Spring Break when I assumed I’d have to go out at 5am and lay out towels and a book I bought at the airport called something like The Beautiful Neighbor which has a cool cover with abstract pine trees and scripty yellow writing and they’ll give me $4 back if I bring it back to the airport book store but I’ll feel too bad to do that because I splashed a little water on it and some of the pages have that bendy thing going on and nobody would ever buy a new book like that but hey at least everybody knows that THIS CHAIR IS TAKEN.

Morning from the balcony.They did tableside-prepared Oxaca-based Queso Fundido that was extremely good. Possibly my favorite food of the trip. Even though it kinda ruined my entree because my 43 year old guts have a hard time with liquid cheese but I’m incapable using that information during the decision making process.We got there Saturday evening ready to eat. We just stumbled into Talavera (one of the five restaurants there) (I kept singing Guantanamera in my head except GuanTalavera which I regret mentioning). Despite being absolutely exhausted, had a wonderful meal. I’m glad we did, because we never got another chance to eat at Talavera again. They were closed one night, and two other nights they had very limited “speciality” nights that really didn’t live up to their normal experience. Seriously skip the “fiesta night” which is just tacos, you can do better. That first night I had mole-covered enchiladas and fancied up corn on the cob and Miranda had sea bass and we were both very happy. Maybe my favorite was the tamarind margarita though, it was very tastefully done. I’m a tamarind lover though — I have a bunch of pods in the cabinet right now to eat directly that a friend graciously sent from down South.

The next morning Ruby and I got up early and went down to the beach in time for sunrise. Cabo is in the same time zone as us and still the travel dinked up our sleep a bit. The beaches weren’t particularly soft sand. My wimpy feat had a hard time of it that morning, but by the end of the week my feet had noticeably toughened up. The sand is so good for my feet skin. I should go to the beach more.

Miranda hit the spa for a massage Sunday morning and I hit the pool with the family. We were able to book a nice cabana while checking in so we had a good home base. I was determined not to get sun burn the first day so I lathered up pretty good. But then I got totally burned anyway. I think that’s just gringo physics. If I worked there I would place bets on how red people got during their trip. There are people selling hats on the beach, and they basically rushed me when they saw my bald ass on the beach. I later made my nephew go buy me one. I gave him $30 not knowing that the hats were $35. They sold him the hat anyway. So basically I’m a cheap ass by negligence. Still, I have a feeling the markup on straw hats in Mexico is decent and a little haggling experience is good for the boy.

We strolled the beach, played in the ocean, and climbed around on the rocks, finding interesting little crabs, little pools with zebra-stripped fish, and snails galore. I wish we spent more time on the rocks. There was a lot of animal kingdom action happening there.

I couldn’t get a photo of it of course but a deep blood moon rose during dinner which felt special. One night we ate at LENA, which is the pool bar during the day turned Mediterranean steakhouse by night. I wasn’t feeling a steak (we had a bummer one the night before at the inside bar restaurant) so I got a burger which was also kind of a bummer (why do they make burgers that are like 9″ tall? what is the point of that? nobodys mouth can open 9″?? so what do you do? i’m not joking i literally don’t get it. i deconstructed it and ate awkward parts of it together. i should have been like waiter, bring me a blender or actually trade it in for a Whopper because that’s a proper burger goshdamnit). BUT — they made a Chimichurri that was so delicious I’m still thinking about it. It had sweet red peppers in it diced into super duper tiny cubes that gave it this subtle crunch that was pitch perfect.

That adventure park we went to (remember that camel joke — cabo dhabi — hilarious) had lots of activities. We actually started with a UTV ride. The UTVs are kind of neat. I could imagine owning one would be a ton of fun. But in this case we had a guide keeping speed way down (they felt like intentionally throttled down engines also) it kinda just felt like a slow cushy stroll through the park. It was neat to see surrounding area from different perspectives but if you would expect some adrenaline out of this you would be disappointed. Oh by the way you don’t say ATV. ATVs are those four-wheelers with like the motorcycle handlebars and the fake black leather bench seat that bring your girlfriend on and tip over. UTVs are like big cage car things with a steering wheel at seat belts. They stand for Unfuckingbelivablyexpensive Terrain Vehicles.

Helmets, goggles, and face gators mandatory. The gators cost like $12 in the gift shop and in order for your credit card to go through the checkout lady has to hold the credit card reader up in the air on her tippy toes. This could be any family but it’s actually our family.We did drive across a wood and rope bridge, that’s kinda wild.There were lots of other things to do at Wild Canyon, including get way more sunburned. Our cousin family went zip lining (Ruby was too little). There was a water park area we chilled at. We had lunch. Oh, hey, chicken fingers are weirdly great all over Cabo. Seriously, get the chicken fingers. I wanted a lemonade, but was informed that lemonade was not one of the beverages included in the meal plan I pre-purchased. I looked at him in silence for a long time and then re-iterated that I would like a lemonade. I can be a real dick when I want a lemonade. We saw a variety of animals, like some kind of duck that looked very mean but also very cool and I don’t wanna look up what it is because the mystery made it cooler. And some other stuff.

Oh and the one girl camel gave us all big smooches. Her name was Sahara. Miranda made a GIF of it and you WILL download the 1.1 MegaBytes of it:

We went whale watching. Whale watching is cool as hell. There was maybe 25 people on the boat. Here’s a story about one of them. So we get picked up from the hotel in a shuttle thing. There is a woman there maybe mid 50s who comes with us. She’s like: I dropped my 20-year-old son off in town earlier, he wanted to go snorkeling. I was like haha yeah right more like snorkeling Coronas at Señor Frogs and she was like [forced light laughter]. Then at the Whale Watching Headquarters thing where we all met at before the trip, the son shows up and he’s like MOM!!! and he’s friggin hammered. Then he came on the whale watching trip and he was actually a sweet kid. At one point he went to pee and she exhaled and was like phew — not too bad, could be drunker (outloud) and it turns out he was just standing on the stairs and was like mom I’m right here I can literally hear you.

We saw a mama and baby humpback whale practicing breeching. It was awesome. I didn’t take any pictures though because all I had was my phone and phone pictures of such a cool thing make me sad. It felt great being out on the water. You look at the water so much while you’re there it’s nice to actually engage with it a bit. See the iconic arch and all that.

Overall, most of our time was spent eating (no complaints, the breakfast buffet was pretty great, hard to beat a freshly pressed tortilla with melted, slightly burnt cheese) and hanging out at the pool and ocean. We did an adults only dinner at Vela one night which was quite good, although the service was a little off their game. I particularly enjoyed the oysters that were extravagantly prepared with a dollop of caviar on top and bright acids. The outdoor sushi restaurant by the family pool was also quite good and we lunched there twice.

Oh one more thing! On our last fraught trip to Cabo, I had purchased a mini banjo to take with for funzies. Annnnd. I just randomly left it on a plane on the way down. Gone forever. I kinda forgot about because all the travel stuff on that trip sucked so much worse.

This time I picked up another one, and was able to play it all week and it was tons of fun, and it even made it home safe and sound. It’s tuned in C so that was weirding me out but whatever I was just plucking around.

10/10

Updated my robots.txt file to what looks like the latest list of User-agents to block. Not that I have any faith that it’s actually going to help prevent my writing from getting into a model without my permission. All it takes is one scraper website that republishes the content and doesn’t have an identical robots.txt and that’s that. And even that is charitable, as it assumes the robots.txt file is respected at all, which I imagine we’ll learn the same day Google open-sources their search ranking algorithms.

I saw this new app for note-taking the other day: Capacities. Looks pretty neat to me. In the vein of Notion, a block-based document-making machine kind of thing. But with a twist or two, like it doesn’t lean into databases as much but elevates other content types like links and images more. Plus, “everything is […]

This February, I half-joked: Waiting for headlines about how web searches are now sent through so many AI models the energy consumption is worse than crypto. Mastodon I was hoping that wasn’t true, but the data is starting to come in. Here’s one I saw (via Ethan): In a paper due to be published later […]

I’m speaking at two events coming up:

I woke up a little hungover on Saturday with burgers on the mind. I was inspired after my locally famous breakfast burrito site to do it again, but pick something perhaps even more niche. Smashburgers it is. (Here’s a repo.) I used Astro for this partially because they just went v3, and I wanted to […]

I was at a musical performance the other week. A couple of groups playing as a send-off to Fiddle Tunes. Maybe a few hundred people in an old blimp hangar. The audience area was slightly staggered, so there would be like 8 rows of chairs, then a stair, then 8 more, etc. So if you […]

You don’t need a special app for YouTube playlists. On any given video, there is a decently easy-to-find “Save” option that allows you to add to a playlist. You can have multiple playlists, and they are also decently easy to find and edit.

So it’s an uphill battle for an app like Play ($2.99 on Apple’s App Store), which is exclusively an app for building YouTube playlists. An app you gotta buy that does something the free app already does for free? Tough.

I love me some YouTube, but for some reason, I just can’t get into their playlists feature, even though I do want to remember videos for later. I figured I’d give Play a shot. I’m a few weeks into it, and so far, so good, which is surprising to me as a Grand Abaondoner of Little Used Software.

I think what helps is that it gives you an “Add to Play” link in the native sharing menu, and I have a ton of muscle memory for that native sharing menu.

Anyway, it’s pretty easy to fill it up with videos, and then it becomes this portal app that you know is filled with stuff you want to watch, so it’s easy to click on and be satisfied.

Play isn’t just YouTube, though. Its usefulness is more apparent when you consider it your “videos to watch from anywhere” home.

Supported services: YouTube, Vimeo, Apple Music, Twitter, Rumble, Nebula, Odysee, Apple TV, Netflix, Disney+, Letterboxd, BBC, LinkedIn Learning, Khan Academy, TED, Apple Developer, and O’Reilly Learning.

There are native apps for both iOS and Mac, so that’s got me covered.

You can tag stuff, rate stuff, search, it knows if you’ve watched it or not, etc. All the basics you’d expect from a video CMS, essentially. And it seems to do a good job of extracting metadata from whatever URL you throw at it.

I like that it has a widget.I’m just such a YouTube simpAND it has an iPad version AND it has an Apple TV version. Since I’m so all-in on Apple whatnot, that’s awfully helpful to me.

Adding videos on the Mac app isn’t as smooth as I’d like it to be (it talks about “drag and drop” videos, but I have no idea what that actually means) and the Manage Videos popout is weirdly duplicative, but all in all it’s nicely done.

I’m always filled with temporary dread when I see a huge semi truck pull up to a busy intersection to turn. How are they going to orchestrate everything to make this turn happen? They must be way to the left in the turning lane, cutting off lanes to their right. They have to swoop into the oncoming traffic lane to finish the turn. Freaks me out. Not to mention when you see them trying to back up and navigate into some grocery store port or small neighborhood street with a furniture delivery.

Who’s driving? Are they qualified to be doing that?

When they hop out and you see some 19-year old kid it’s like 😬. Not trying to be agist; it’s just like… how much practice do you actually have here? At some point, you’re limited by literal time. [exhale] You gotta learn somehow, I guess.

On the flip side, I have this extreme trust of doctors. A doctor says I got Lumbar Osteoarthritis, I got Lumbar Osteoarthritis. That’s that. Second opinion? Why? A doctor said what is going on already? They are obviously super qualified after going to school for 50 years?

I know this dude (hi Jeff!) who puts together proposals for this big company to put in infrastructure for these huge buildings with like ~~9-figure~~ 10-figure price tags. Excuse me? How did you get qualified to craft budgets higher than some country’s GDP? He just is, because he’s been doing it a while and, hey, somebody has gotta do it. But it’s a little surprising, to say the least.

Then there are cops. I’m forever skeptical. I always feel like they are going to bust me for loitering or something. But they have these incredibly important jobs. There has been some murders around here lately that obviously require intense investigation. They aren’t all solved yet, which inevitably makes me feel like are y’all qualified for this?

I have no strong points here. I just think the opposites in my brain are weird, and that I usually have the wrong instinct.

They’ll let anybody make a website these days, that’s for sure.

She writes: myth: everyone should blog I sometimes see advice to the effect of “blogging is great! public speaking is great! everyone should do it! build your Personal Brand!“. That’s me, I say that. I don’t know about personal brands anymore, but I like the idea that it helps you think. Blogging isn’t for everyone. […]

That’s what WordPress.com is asking for web hosting, domain ownership, and support for a hundred years. They are essentially saying they’ll be helping your anointed heir with the /wp-admin/ password after you die.

Pretty cool. Mostly, I love the strong marketing play: you can trust us to be around for the (very) long haul.

Is it “worth it”? We could start with some math.

Domain names vary quite a bit, but a typical .com is gonna be around $12/year, so call that $1,200.
They are saying “Top-Tier Managed WordPress Hosting”, so let’s say it’s like the Business Plan at $25/month, so that’s $30,000.

So that’s only $31,200, but…

That assumes no inflation, which, of course, is ridiculous. It’s a reasonable assumption that a comparable service is $2,500/month 100 years from now.
It sounds like you’ll get a lot more hand-holding than a typical $25/month customer is going to get. The fact that they deal with renewing the domain name alone is pretty big, let alone deal with all evolving web technology for you.

It’s going to get weird over those 100 years. What we think of the web right now is very definitely not going to be the same then. There is every chance the web just isn’t really a thing anymore by then. And there is some chance that the web is such an excellent idea that it does still exist, is just as valuable as ever, and has just evolved as our digital needs and possibilities evolve. If the latter is true, anybody who bought this will be sitting pretty.

And honestly, if you have 38 grand sitting around you can toss at WordPress hosting for one website, you’re also sitting pretty, so good for you.

Baldur wrote up some thoughts about how companies don’t typically reward refactoring code. There isn’t a lot of incentive at many companies for slow work, rewriting old code, refactoring toward better ideas, paying down technical debt, and that kind of thing. I get that impression anyway, I don’t have much first-hand experience as I’ve spent the last decade at CodePen.

My co-worker Rach reacted, noting that we operate a bit differently at CodePen:

If I decide that the benefits of “re-doing” a part of the codebase justifies the time spent on the task, my decision is supported. Over the seven years I’ve been with CodePen, I have entirely rewritten certain features of the product/sections of the website three times over.

This may be a uniquely cultural thing at CodePen. This company has never really been run with the goal of moving fast, scaling up, selling out and riding off into the sunset clutching bags of money – code quality be damned. It’s been kind of the opposite, really, a slow and steady approach. I’m encouraged to think and re-think through how and why I’ve approached a problem any particular way instead of being pressured to finish quickly and move on to the next thing.

That’s true of CodePen of the last many years. We’ve been fortunate to have created a steady enough company that we’ve spent literal years making sure we’re really steady. We’ve been trying to run at zero-known bugs, refactor into more consistent, modern, efficient, better technology with more focused in-house expertise. Thus anybody that works here coming to the table with ideas along those lines is applauded.

That wasn’t true in the early days. Like so many startups, we ran hot and fast and just tried shipping as much as possible as fast as possible. That’s maybe fine? As long as you aren’t hurting or excluding anybody, which I hope we weren’t. But then you pay for that, and that time for us is now.

Fortunately, we’ve mostly paid that debt, and our time now is focused on the next generation CodePen. But this time, we’re taking our matured attitudes toward software development and applying it right away. That makes us slower, but hopefully we’ll be able to get it done and deliver a great new product out of that second-gate.

So if you’ve been watching CodePen for years now, from the outside, you might not see all that much change. Maybe that’s a little boring, but I’m hoping it’s good-boring. Stable-boring. Reliable-boring. Trustworthy-boring. Next, hopefully we’ll be able to take all those adjectives and make them anything but boring.

Keith Grant in Scope vs Shadow DOM:

But here’s the thing: CSS @scope and shadow DOM are not competing standards. They’re complementary. They meet different needs entirely — but with enough healthy overlap in functionality so there isn’t a gap.

I like that phrase “enough healthy overlap” when it comes to web platform features.

Grid and flexbox is a great example. Both powerful layout APIs very useful in their own right, and actually quite different. But they can accomplish some layout needs pretty much the same. But instead of thinking “that’s dumb, why are there two things that can do the same thing?”, it might be smarter to think “these two different layout APIs both have different strengths and weaknesses and with enough healthy overlap in functionality so there isn’t a gap”.

I would think this applies heavily to different data storage approaches.

I love the idea of the Bird Buddy. Somebody was like: what if a Ring doorbell camera except a bird feeder? Then totally did it. But they went the extra mile by making the app that shows you visiting birds actually kinda good. It must use some kind of machine learning model to identify the birds automatically, then you can collect and share them. But not too much more than that, because why milk it? That’s exactly what it needs to do and does it.

I ordered mine ($265 for the feeder plus a solar roof) in September 2021. I got about 50 emails from them between then and July 2023 when it arrived. A long time, but they were clear that this was a new beta product and were reeling from a very successful Kickstarter.

Once it did arrive, I found there was no real way to mount it because I didn’t have a perfectly sized unused bird pole in my yard or anything. I figured there would be a basic way to just mount it to a tree, but no, that required me to buy a “Wall Mount” separately. I did, and that arrived another week or so later.

I also had some problems getting it charged and connected. It just wasn’t clear to me when plugged in if the device was charging or not, and the first time I did it, I left it overnight and appeared not to charge at all. It could have been a me-problem. 🤷‍♀️. I tried another charging setup and was ultimately able to get it charged and thus connected to the app.

I mounted that sucker to a tree in my yard and…

I just got squirrels. Literally zero birds. I think it was maybe just one squirrel, but who knows? I just got endless notifications (and photos and video) of a squirrel eating my bird seed.

It’s just a classic cliché problem. Those darn squirrels!

But it’s also a problem that I didn’t have any clear solution for. Maybe one of those skirts you put around the bottom of the tree to stop the squirrels from climbing up? Nah. Too ugly. And doesn’t stop squirrels from jumping over from a nearby tree.

I was hoping “operation stop the squirrels” would end up a fun family troubleshooting kind of game, but it just didn’t end up feeling that way. Bird Buddy does have a support page about it, but the only one that might work is “use spicy seeds” which I have grave doubts about actually working and feels kinda ethically suspect.

So I took it down. It’ll probably sit in storage until it sells at a garage sale for $2 in 5 years. Or maybe I’ll get some inspiration to try again next year.

When I talked about saving links, what was helpful for me is to think about my behavior in terms of when I’m going to need that link, so I broadly bucketed like:

Short Term
Medium Term
Long Term

I like how Juha-Matti Santala didn’t just think in terms of those categories for themselves but re-bucketed like:

Links I visit regularly

Links that are “read later”

Links that are “I might need it one day”

Links I want to share with others

Sites I want to follow regularly

Where do my links live?

If I were to use those buckets, from top to bottom, it would be like:

Those are my pinned tabs in Arc
That’s what my “Medium Term” links are for the most part
That’s what my “Long Term” links are for the most part
Back to “Medium Term”. I need to store them a bit before sharing. Gotta let ’em marinate.
RSS!

Miranda and I went to Vegas the other week. A bit of a late 6th-anniversary celebration. Miranda had also never been there, despite being a way more accomplished world traveler than I, and it seemed like a place she would enjoy, what with all the dressing up.

We left on a Thursday afternoon and had a weirdly long layover in Seattle. I was slow-rolling the pilsners all day as I wanted to be in the mood but still make our plans. We had Absinthe tickets at 9 pm. It’s this tent show outside of Ceasar’s Palace. I’d seen it many years ago and was glad it was still there. All I remembered about it was that it was both funny and amazing, and I was right. It was probably my favorite show of the whole weekend, in no small part because the tent is so small. You’re right there — and all this amazing stuff is happening just feet away from you. The grandeur is high.

As typical of Vegas, it was already late when we left the show, and kept it going too late. I made everyone play craps with me for a bit; then we attended an, ahem, adults-only establishment. Ya know, just to say we did it. Hey, it’s not like we brought the kid mmkay.

The ladies had spa treatments of sorts at the Cosmopoliton in the morning, so it was a nice slow start, and I was left to my own for a while. I worked, then walked around the strip just to take it all in. I wandered through New York, New York, Excalibur, Luxor, and Mandalay Bay, where I ultimately found a cool Shark Reef Aquarium.

This lady’s main job was to make sure you don’t put your injured hand into the piranha take and get it eaten.I had never seen a Komodo Dragon before so that was cool.On my walk back, I stopped at the Netflix/Stranger Things store, which was way cooler than I thought it was going to be.

I took this picture of this sweatshirt because I thought it was cool (Netlifx n chill lol) and our friends went back and got it for me later in secret for my birthday.I did buy some Netlifx sweat shorts for myself and got to use them to work out at the gym that afternoon. We stayed at the Waldorf Astoria. It was pretty nice. The main reason it was picked it because it wasn’t a casino. I like casinos so that wasn’t a top priority for me, plus the Waldorf’s main lobby was closed, which made it kinda awkward coming and going. But overall, I’ll conceit that it was nice to have a chill place to come and go from rather than doing that through a mobbed casino hotel lobby like the MGM Grand or something.

That afternoon, after Miranda got all pretty, we got a drink and snacks at Toca Madera, which was really an excellent place.

Weird thing: it rained every day we were there. Usually just light rain, but it was a little annoying. Clearly Vegas is not set up for it, as just the little sprinkles would cause flooding in some areas. We saw city crew with big squeegees on the walkways getting water out of the way. The outdoor escalators were mostly closed. We saw some leaking ceilings in casinos! Wild.

But I did see this rainbow:

I played a slot machine at the approximate location of the end of this rainbow and won $700 of $100 so let’s just say that luck is real.That night, we had tickets to Brad Garrett’s Comedy Club at the MGM Grand. Guess who was performing that night? It was Brad Garrett lol. I don’t know why I think that’s weird, but it’s weird. He’s that guy with the low voice who was the brother or something on Everybody Love’s Raymond. It was a little bit of a Bob Saget situation where you think of the dude as being on this squeaky-clean show, but in real life, he’s pretty nasty. He had some funny moments, but mostly, he doesn’t have any material. He just makes fun of the people in the front row. Fortunately, I think people know this and are ready for it. I mostly didn’t think it was that good. Not because I was offended but just because I like it when comedy is more crafted or something. Not that improvisation isn’t a craft, but whatever.

Rocky LaPorte came out and did a bit, and he was extremely funny. But sadly, we had to duck out for the last few minutes as we had dinner reservations we didn’t want to miss.

We ended up back at Ceasar’s for Nobu! What a place. We did the chef’s tasting menu thing, some seven-ish courses that came at us at a well-timed pace. Everything was wonderful.

We walked home after that and called it.

Saturday morning, we got breakfast right at the Waldorf Astoria. That was prudent as they give you on-premises credits to use — they must want you to stay there as much as possible, which is probably tricky as a non-casino.

Miranda wandered back over to the Cosmo and got an IV. She loves those things even when we don’t drink too much lol. While we were there, she kept wandering, and I stood at the craps table again for a while and did OK.

That afternoon, the plan was to go to this place called Meow Wolf, which we all really wanted to check out. An interactive art exhibit, they say.

It was a little confusing at first because the actual place you go to is called Area 15, and the art thing inside is actually called Omega Mart. So Meow Wolf must just be the group that puts the art stuff together? I dunno.

I don’t want to spoil too much, but Omega Mart is like this really bizarre grocery store area you go into. All the products are weird jokes (the butter is “What is the True Essence of Butter? & the Nature of My Desire, and the wasabi peas were Leprekaun Kidneys), and every section of the store is kinda weird in its own way. But soon enough, you find yourself behind the store, and every place you go doubles down on weirdness. It’s a little overwhelming, really, but very beautiful and worth doing. It was a little exacerbated by the fact that I ate some fungus that apparently had gone bad!! (just kidding, it did exactly what it was supposed to do.)

We went back to the hotel after, and I found myself at the craps table at the Cosmo again. HEY I LIKE IT. I ended up a little down overall, even with the slots winnings. But I had fun.

That night, we went to the Matt Franco magic show over at the LINQ. We were late, which would have been the normal amount of embarrassing, but he made it a whole thing. He directly talked to me as we walked in:

Matt Franco: Where are y'all from?Me: Bend, OregonMatt Franco: Did you walk? Me: 😑 We only missed the first few minutes, and the rest of the show was really fun and amazing. He kept coming back to us being late over and over, and it ended up being hilarious. Like I’d be late again to that show anytime. He does this thing with cards at the end where he makes the cards do all sorts of things that are related to events that happened during this particular show. At one point, he makes three cards appear and was like “and these people from Oregon arrived at SEVEN, TWENTY, FIVE!” making the Seven, Two, and Five cards appear, then put them in a pile and tossed them perfectly like 20 feet to land on Miranda’s lap.

I still have the cards. But it was more like 7:10 c’mon now.For dinner that night, we cabbed over to the Sahara for dinner at Bazaar Meat. Tough call, but I think this was the best dinner. It’s a steak-focused place, and they do outstanding things with beef. We got a double round of three different A5 cuts, which came with a wax-stamped seal of authenticity.

After that, we cabbed over to Planet 13, which has gotta be one of the world’s largest dispensaries. It was like midnight and kinda slow, and there were 20-some employees working.

We left Sunday afternoon, so Miranda and I spent Sunday morning wandering around the strip again and ending up back at the aquarium again, as Miranda really loves aquariums.

10/10 would Vegas again.

Robin, after noticing that most print books are perfectly fine (decent type, decent cover, decent paper), notices that most websites are not fine:

The baseline for websites is not great. Okay, fine: most websites are pure, unadulterated, straight-up bad. Bad from top to bottom, bad from left to right. There’s no denying it, as much as I might want to. And I do want to! I want to hold up the field of web design and say that it’s en par with what musicians and painters and everyone else is doing in every other field. I’ve dedicated my life to this thing and so when I find a beautiful website, something that pushes the whole thing forwards, I want to loudly celebrate it.

I truly want every website to be worthy of our browsers.

But modern websites are not worthy. They’re slow, hard to navigate, and plagued with visual crap; pop-ups, bad typography, newsletter modals, and everything else imaginable.

Bummer, really. Especially because this is our job, dammit. We make websites, and websites are making us look bad. I’d rather tell someone at a party that I’m an investment banker rather than a web designer these days. Have you seen a friggin mobile news website? We might as well be printing headlines on cinder blocks and tossing them through people’s windows. Except the cinder blocks don’t try to capitalize on the fact that I searched for “improve self-confidence” until the end of time.

What’s extra fricked about all this is that you really gotta try to screw up a website as much as we do. Pick a theme on WordPress.com and spin up a simple blog. Do an eCommerce thing on SquareSpace and sell painted pencil erasers. Use an Astro template to build your next media endeavor. They will be very much fine out of the box. Better than fine. Pretty damn decent, really. They get not-fine when we’re like… you know what this article needs? A sticky position ad for Geico right in the middle of it. And if they scroll past that, hit ’em with the newsletter subscribe modal. Anything to keep them from reading the next paragraph or even having any confidence there is a next paragraph to be found.

The closest we have to “fine” on the web is ~~crawling into a condom~~ using a high-powered ad blocker, browsing from a good desktop computer, and having a very fast internet connection. Oh, and having zero current disabilities.

I wonder if we’re already at “pretty much fine” for the vast majority of websites, by volume, it’s just the ones where all the action is that are all junked up.

So many other things in life are in the “pretty much fine” category — which is a pleasant place to be. Go out to a restaurant? It’ll be pretty much fine. Buy literally any random stapler? It’ll staple just fine. A car? Pick one, and it’ll drive down the road, tell you what.

When I was looking at what looks like the “official” online personality test for Meyers-Briggs when I was spouting off about personality tests, I noticed that their radio button choices were actually kinda cool: I like how, visually, the larger radio buttons imply “more”. I can’t 100% vouch for the accessibility of their solution, but […]

By Zach, named Educational Sensational Inspirational Foundational. I might add Stevey’s Google Platforms Rant.

If you’re blogging like I’m doing here, it’s nice to be able to kick your posts out automatically to social networks (in addition to RSS). A reasonable list right now: There are many more sites we’d consider social networks, but they aren’t as obviously a good fit for sharing blog posts. Instagram is a big […]

I think there are some personality traits that are pretty damn useful to know about yourself and others. For example: the spectrum between introversion and extroversion is real and has really helped me understand myself. But some personality trait frameworks seem like utter nonsense to me. Some people put stock behind their astrological signs. But […]

I never even ask what the WiFi is at coffee shops and hotels. I have AT&T cell service, and the plan I have includes a “Mobile Hotspot”. I flip that sucker on, and now my phone is my WiFi. I find it’s usually faster and more reliable to use than some arbitrary shared WiFi, and […]

My birthday! I got to sleep in a bit. 7:30! What! It was even planned that way because we had a big day ahead. 43. Prime number. It’s always easy to remember how old I am since I’m an “eighty baby”, as in, born in 1980. Nice even number. It’s not hard to figure out […]

I saw this funny comic in Outside magazine from Brendan Leonard where he did a one-minute plank every day for four months. Did it turn out to be… good? It sounds like not really. Like possibly, his core is a little stronger, but that’s unclear, and he certainly didn’t develop any love for doing it. […]

I got a new bike the other day! The make and model is up in the title there. I was camping up in Port Townsend, and I saw several fellow campers had brought their mountain bikes and I was envious. Ever since breaking my arms mountain biking I haven’t mountain biked. I’ve done plenty of […]

There is a 2015 documentary about the Barkley Marathons. It’s plural because it’s a race that consists of 5 loops, which are all about a marathon long, making for somewhere around 100 miles. There are all sorts of wild details, like running through the night in the woods, finding book pages, not knowing when it […]

Beeper is a really cool app idea (and name!). The big idea is that it combines all your chat apps into one. I installed it on my Mac and iPhone and configured it to work with: All of them worked. But it supports even more than that! That’s pretty wild to me. It’s kinda surprising […]

I’ve always liked tools help me do DevOps-ish stuff but make it easy and have a UI. For example, I used MAMP back in the day because it ran (on my Mac) MySQL, Apache, and PHP, which was the stack for like every CMS. MAMP is still a thing, but I’ve happily moved on to […]

You’d think this would have a simple obvious answer, but in mulling it over recently, how I do this is actually a decent chunk of my internettin’ time and has an algorithm of sorts. When I’ve got a URL on my hands that I need to get back to, there are three broad buckets: Which […]

Here are some options. tldraw https://www.tldraw.com/ Perfect Freehand https://www.perfect-freehand.com/ Concepts (iPad) https://concepts.app/en/

I just blogged about a little moment in a podcast that stuck with me. I remembered a little micro comment about how rabbits eat their young sometimes. I wanted to listen to it again. How do I find it? Their podcast page/notes don’t have “jump links” of any sort. They don’t do transcripts, so I […]

Great episode of You’re Wrong About: Lesbian Seagulls. It’s this look at — not just Seagulls — but the history of science observing same-sex pairings in nature. You’d think, because of the nature of science, people would just observe and report things as they happen. Like, what good is science if you don’t do that? […]

A friend asked me that recently, adding: “Do you ever just wake up and think wow I just truly don’t care?” I like the question because, frankly, I do have a decent tenacity for my projects. CSS-Tricks was about 15 years old when I sold it. It’s been almost 12 years since I started working […]

I think it’s perfectly reasonable to want to use the JSX syntax but not need React. It’s a decent templating language that I bet a lot of people are quite comfortable with. Here’s a contrived example: If you were using React, you’d use ReactDOM: But that’s client-side. ReactDOM has a way to get it as […]

The wall art at my dentist is really straightforward: It’s not trying to be beautiful. It’s not funny. It’s not a metaphor. It’s not subversive. It’s not even a platitude, really. It’s just a reminder, I guess? Some words? The only thing it’s missing is a QR code that takes you to a website that […]

The cover image of my Facebook profile has looked like this since about a week after that photo was taken in 2015: I like that photo. It was taken in Haines, Alaska at Portage Cove State Recreation Site. I was younger then, so I suppose it’s unfair to keep that up forever. I’m older now. […]

I was at the airport the other day, and a guy who works for Delta told me he wants to use their website-based system to give a friend a flight voucher. He can’t do it from his phone, it just doesn’t work from phones (cool neat). He needs a laptop to do it, and asked […]

Dude is so funny. I just started watching his specials. I watched Full Time Magic on a plane the other week and I was dying. YouTube has got a bunch of clips, of course. Here are 21 minutes of gold: He’s got a new 2023 thing called Hello, World! that I obviously need to get […]

Ruby was clearly annoyed that we were waiting at the luggage claim so far away from where the luggage came out of the wall. She didn’t say anything — it was about midnight when we got to the Madison, Wisconsin airport and we were both tired — she just trudged over to the start of […]

The demise of Sass has long been foretold. Sass’ features are making their way into CSS, they say, so why bother with an additional build tool? I like that sentiment. What do they say about web platform tools again? Any good tool should live long enough to see itself made redundant. Something like that. What’s […]

I’m writing this from a place called Port Townsend, Washington. It’s more Northwesty in the great United States than even Seattle is, but just shy of Olympic National Park. This is Twilight territory. Like the movie. You should watch that first one again it was really pretty good. Did you know Fifty Shades of Gray […]

Fit-to-Width Text (from Roman Komarov) is a full-blown 5-star bonafide CSS trick if there ever was one. The idea is “size text to the container” in CSS alone (at least scale it down if it’s too big/long. The trick is a “scroll-driven animation” and text that overflows a container. As it overflows, it scrolls, thus […]

Just kidding do whatever you want.

A little bit from David Pierce’s Who killed Google Reader? One feature took off immediately, for power users and casual readers alike: a simple sharing system that let users subscribe to see someone else’s starred items or share their collection of subscriptions with other people. The Reader team eventually built comments, a Share With Note […]

Open source is eating the world, they say. I remember when remove.bg dropped, to a collective gasp. Give it a photo, and it automatically removes the background with no additional input or worked needed. Friggin cool. Now the website gives you “1 credit” to do that job, which you need to sign in to get. […]

The attributes of responsive s are pretty intense! You need to create/serve/cache multiple versions of images, know exactly how wide they are, and then accurately put that into the srcset attribute in the HTML syntax. Hopefully, you don’t need to change that system very often if ever. I find sizes even more difficult, as it […]

“Snakebite” by The Benders Twenty years old. Love the energy all around, especially the vocals. The pseudo-yelling tempered by that megaphone effect works for me. “Ripple” by Logan Ledger Obviously a Robert Hunter song turned Grateful Dead classic, but I like Logan’s take. This is about as close to religion as I get. Reach out […]

Stock and flow is an old post from Robin at snarkmarket. This was the most challenging and most fun thing about back when I was running CSS-Tricks. There was always tension between two worlds. One: feeding the day-to-day machine. Be a magazine, a newspaper, or at least an industry rag. Offer something to everyone who […]

The Pudding digs into the rarity of hearing women on country radio. The data is clear, but it’s not random or some “well there is just fewer hits by women” excuse. It turns out it’s an edict. What does it matter? Sniping a great quote: I’m trying to picture in my head a 10-year-old girl […]

Websites used to go down with more regularity than they do now. Twitter famously had the fail whale. But I mean more like “normal” websites, like this one. If Daring Fireball linked to a site and it went down, that community called it getting “Fireballed” and there was exotic solutions. If Slashdot traffic took down […]

Have you ever found one of these? It’s a leveling shim. Restaurants use them to quickly slip under table legs to keep a table from wobbling. If you find one, it is your sacred duty to keep it on your person until you come across a wobbly table.

There have been a handful of situations lately where I’ve felt that I was getting communicated at by an organization. I don’t want to throw anyone under the bus, but one of them was a dentist, if you’re curious. But it could be a school, a SaaS app, a conference, book club, or a grocery […]

The gang at A Book Apart have partnered with a “global distribution platform” such that their lineup of books has much wider distribution than it had before. There are lots of cool side effects of this, one of which is that the book now appears on huge sellers like Barnes & Noble and Bookshop.org. I […]

Just a quick note that if you’ve never tried Passkeys and you use Google stuff, you can set it up easily at: g.co/passkeys I did it a few months back, and it’s been pretty nice. Have you used a password thingy like 1Password? If you have, you know how when you log into a site, […]

It’s not every day there is a new “best practice” for CSS, since it’s such a huge, ubiquitous, and highly used language. But here’s one, maybe? If you add padding in the main flow direction of an element, adding margin-trim in that same direction. If you have both padding and margin in the same direction, […]

It’s a big day of protest at Reddit. Users are pissed at the prices that Reddit is to start charting for API usage, which has driven best-of-breed apps like Apollo to close doors. I liked Apollo, myself. I found it to be a very nice iOS app. So it’s annoying it’s going away. When I […]

Awesome. It’s nice to feel useful. Let’s say the goal of the conversation is to get closer to making actual choices on what technologies to use. Where are you going to host it? What is the main site-building tool, if any? Where are you going to buy a domain name, if anywhere? What additional tools […]

CSS is the champ1 of selecting elements. There is nothing on a web page that a selector of some sort can’t get it’s hands on. But not everyone, nay, very few people, are skilled at hand-crafting CSS selectors, yet need their functionality to do things. So sometimes applications need to help people select things on […]

I was just talking to a guy, a fellow dad, and we talked about our families. He said he was done thinking about how his parenting and choices measure up to any perceived standards or what other people are doing. We do what works for us. There are so many little details to parenting. When […]

Hey! Chris Coyier here. This is a blog-itized version of a presentation I created. It started life as a Keynote file which I presented in person at RenderATL in June of 2023. I put a lot of work into it! I’m so grateful to everyone who came and saw it. But you can’t beat the […]

Since I weighed 271 lbs 4 months ago, this feels like decent progress, even though I feel a bit stalled out at this weight. I’m hoping I can blast past it. It would be neat to get back to where I was nearly a decade ago, then again. I’m still on the Ozempic. My insurance is still denying it. My doctor tried a switch to Wegovy to see if they would approve that, denied, but they said they’d try again. I’d love to stay on for 18 months or so to give it a solid run, but I won’t be able to make it if the cost can’t come down.

I’d also like to think I have the power to keep going on my own. But do I? Prior experience would suggest that I do not. I’m interested in bypass surgery as well, such that my weight is a real “solved problem” (hopefully), but the cost of that surgery is higher still.

Health is, of course, more than weight. And I know this more than superficially. There is a machine at my gym I have used that tracks all sorts of health metrics. Stuff like muscle mass is important to me too. I drag my fat ass to CrossFit pretty much every day, and for that kind of effort, I’d prefer not to be losing muscle mass as I lose weight generally. I get re-measured soon so I can keep an eye on that. If I stayed 248 but constantly lost fat and gained muscle, that’d be fine too, but that’s a taller order than losing some fat and maintaining muscle.

As much as weight is top-of-mind, the beginning of this journey was back pain. This time it was from an acute injury back in October 2022. Feeling about 85% recovered from that. Part of me is bummed it took this long and is still lingering these 7-8 months later. And part of me is pretty happy to be feeling close to normal again.

Here’s to habits and the eternal struggle to change them.

TLDR:

When I take off my Bose headphones and set them down, they stay on, and I forget about it, and they drain the battery to zero, and the next time I need them, they are dead.
When I take off my Apple Airpods Max and set them down, they turn off, so the battery tends to stay charged, and they are ready to use when I need them.

Blah blah:

I’ve got a pair of Bose Noise Cancelling Headphones. I may have gotten them from a weird marketing campaign 😂. They are pretty nice. I think Bose made the “noise canceling” thing a thing, and I’m not turning my nose up at near-$400 headphones.

But I’ll critique them a little! There are three buttons on them. Two of them are unlabelled, and one of them has a little Bluetooth icon. I can not rememberwhat the other two do. I guess one of them (both of them?) turn the headphones on? But then how do you turn them off? Press one of them? Hold one of them down? Why are there two? What are the other functions?

I’m sure all that stuff is learnable, but I’ve had these things for years, and I still don’t know.

I’ll contrast that experience with the Apple Airpods Max we all got at work one holiday. Same price range (expensive). My experience with them has been a bit mixed. At first, I couldn’t keep them connected to the source I wanted them to be. Like I’d be in the middle of a Zoom call and they’d disconnect from my computer and connect to my phone instead, which was annoying enough to shelve them for a while. I tried a while later and they seemed to have stopped doing that, and now I’m back to using them every day.

This brings me to my comparison point.

When I’m done using the Airpods Max, I take them off and set them down. When I do that, apparently, they automatically shut off. I charge them every once in a while (via cable. I do wish they had a stand you could put them on that would charge them without plugging anything in). Every time I pick up my Airpods Max to use them, they work.

But every time I pick up my Bose headphones, they are dead. I have this behavior where when I’m done using headphones I just take them off and set them down. When I do this, the Bose headphones stay on until the battery dies. Gah.

I thought about this while listening to a review of the incredibly weird Dyzon Zone headphones. For $1,000, at least I’m glad they have the auto-shut-off feature.

I’m still a fan of the OKLCH color model and CSS function. But there are a couple of things that are confusing or weak about it, and it’s probably fair to point those out clearly.

1) Adjusting the L, C, and H values by hand is a bit dangerousDangerous because of totally invalid combinations. Here’s an example.

I’ve got this perfectly normal green color:

.el { border-color: oklch(68% 0.25 150);} Well, I know that 68% is the Lightness, 0.25 is the Chroma (sorta like saturation), and 150 is the Hue. Hue, like many of these color models, goes from 0 to 360. Increasing the Hue from the 140 where it’s at which is in Green-land should push it into Blue-land, then Purple-land, and Pink-land, then Red-land as it approaches 360.

If I just push that 150 Hue to 152… well… the color picker at OKLCH.com will tell you that that color doesn’t exist. And I guess it kind of doesn’t. Those numbers have left the P3 color space. Does that make the color “invalid”? I… don’t know. I don’t have the language for that. In the originally published draft of this post, I assumed it was invalid and would render as nothing. But, I guess you could call it good news, the specced behavior is that colors with values outside the space (and/or model?) get brought back in, so colors will never render as blank nothing. Probably smart, and good that it’s specced, but feels awfully strange to me to be picking essentially coordinates of colors that don’t exist. And then if you do that, do you still get the correct behavior of the model, like consistent lightness and all that? So much to know.

Those big empty gaps in the color space? That’s intentional! That’s part of the design of the color space. It’s like that because it actually solves some problems, like uniform brightness. But it causes others, like quite a few number combinations having this “invalid and thus must be mathed-into-place” problem. Which is usually called “clipping” I think, but I also have heard that behavior is controversial.

You can see this pretty clearly in the 3D model of the color space:

https://oklch.com/In the sRGB color space that we’re mostly used to, well, it’s a cube, so there aren’t really “invalid” values unless you do something intentionally weird and out-of-bounds.

The programmatic champion that is HSL is within the RGB color space but is modeled like a cylinder, making it similarly difficult to make a “wrong” combination.

In rgb(), there is no “wrong” value of r, g, or b, as long as it is 0 to 255. In hsl(), there is no “wrong” value of h, s, or l, as long as it’s between 0 and 255 for the hue and 0% and 100% for the saturation and lightness. It’s no wonder why CSS adopted those models… they are just easier to reason about.

I tell you what though, color me (lol) interested in Okhsl, which seems to be a model where uniform brightness while maintaining the easy and predictable numbers of the HSL model.

2) Gradients have super awkward combinations like any other color spaceI messed around with Adam’s Pen and got this.

I thought that OKLCH was supposed to be a majorly clear winner with interpolating gradients, but I’m not so sure. It’s true that it generally avoids “the gray dead zone”, but sometimes it does so by travelling through some other very unexpected color territories. More vibrant? Usually. More intuitive? Nope.

The syntax for interpolating in a particular color model is:

.el { background: linear-gradient( to right in oklch, yellow, blue );} So I think the answer for really nice gradients going forward is either:

Pick the color model that has the best results using the syntax above, or…
Use a whole bunch of color stops so the path the colors take along the way is predictable.
Use OKLAB as apparently it’s the most generically best at this job.

You can make a new folder anywhere you like on macOS. But not a new file. Sorta makes sense. What kind of new file? In a program like VS Code, it assumes it will be a text file (as opposed to binary), so it absolutely lets you create a new file wherever and you name it with whatever extension you like.

I don’t blame macOS for not offering that, it’s a little niche, but for us developers, I think it’s handy to be able to snap a file into existence from the Finder. All y’all CLI types, I know you’ve got touch and whatnot and I’m very happy for you.

Fortunately, Raycast has a nice little extension for it. Check it:

You still have to pick the type of file, which… might be handy sometimes? And it supports templates and whatnot. I do wish there was just a command to make a new file and immediately let me name it whatever I want, including the file extension. But this has been handy enough I’ll take it.

Raycast is digging in a bit deeper for me. Maybe it’ll grab me like Alfred and the like never did. I think what’s helping is that I’m still heavily on Arc as my main browser, and you do a ton in Arc via a command bar. Plus this secret new version of CodePen we’re plucking away at has a command bar too. So I’m in command bars all the time from operating system, to browser, to website. I’m now wondering if command bars are starting to be a defining characteristic of “desktop” software.

I like kombucha as much as the next person (a little), but unfortunately, nothing has really been able to break my Diet Soda addiction. Is it a huge problem? I don’t know. But sometimes I think, well, at least it can’t be terribly good for my guts. Maybe prebiotic sodas (kombucha formulated to taste like soda?) could be a step off.

That is… if they don’t suck.

I happened to see a bunch of them in different areas of my local Safeway. Safeway isn’t the most progressive grocery store so maybe these things are catching on a bit. I thought I’d give them a try:

Quick reviews:

Lolipop Classic Root Beer: Good!
Lolipop Vintage Cola: Fine.
Poppi Orange: Little chemical-y tasting, but fine.
Culture Pop Watermelon & Lime: Refreshing but much closer to a La Croix than a soda.

I’d buy that root beer again for sure. Only 35 calories is a bonus.

I don’t know why this works, but it’s some kinda feature of URLs:

https://google.com@chriscoyier.net/ It’s not a Google thing, I think anything works:

https://daverupert.com@chriscoyier.net/ It opens a door to make functional URLs that go somewhere you really aren’t expecting:

https://definitely-safe-place-to@buy-drugzzz.com I saw this in The Dangers of Google’s .zip TLD that used these examples:

https://github.com∕kubernetes∕kubernetes∕archive∕refs∕tags∕@v1271.ziphttps://github.com/kubernetes/kubernetes/archive/refs/tags/v1.27.1.zip Try that first one. In all browsers, it takes you to the currently-non-existent v1271.zip, which is now a web address.

It’s the Razer Atlas Tempered Glass Gaming Mouse Mat.

It’s so enormous.

It’s so silky smooth.

I love it.

All of these are page transitions, like when you leave one page and go to another. As opposed to the document.startViewTransition kind, which are also cool, but not as game-changing.

Here’s my playing around, which you can see in this Project.

That’s an <a> that turns into a <div> on the next page, because that’s just something you can do and it’s amazing.

Here’s Dave’s Site:

Austin Crim did the same kinda thing:

Here’s Jim playing around:

Maxi Ferreira built an Astro site with page transitions based on a design by Ehsan Rahimi:

Here’s Adam “stress testing” what it can do:

You can always feel a tiny smidge of a delay, which I’m sure is because the browser needs to request the next page and (I think?) render it so it can be sure to find any matching view-transition-names on elements in order to tween. Worth it.

If you have a reference to a script in JavaScript you think might be blocked…

const script = document.createElement("script");script.src = `https://probably-blocked.com/foo`; Before you add it to the page, you can add an error handler:

script.onerror = () => { // Chances are decent the script was blocked. // Track it in some way that isn't likely to also be blocked.}; Then kick it off…

document.querySelector('head')?.append(script); If you’re trying to detect this from <script> tags in the HTML, you can still get a reference to it the script element, but you’d have to get that reference before it tries to execute to catch the error, so whatever, do that if you want.

If the script is blocked, you’ll probably get some message like this in the console:

GET https://probably-blocked.com/foo net::BLOCKED_BY_CLIENT That’ll throw that onerror and you’ll be in a position to track it or respond to it if you want.

The trick on tracking is that you’ll want to use an analytics situation that won’t also be blocked. So if you’re hoping to send an event to Google Analytics or something, well, that’s not going to work very well.

I just made this mistake while running a test on CodePen to see how many calls to our advertising platform BuySellAds were being blocked. To count the blocks, I sent an event to another service we use called Appcues, thinking that Appcues isn’t an advertising service so it wouldn’t be blocked. Well, Appcues is third-party JavaScript (we don’t proxy it as we could), and some ad blockers block it. So at first, it looked like about 10% of the BuySellAds scripts were being blocked. But after replacing how we were tracking the blocks with an internal service (just a little Redis counter), it was showing more like 28% of scripts being blocked.

Y’all know Buffer? It’s a fairly sophisticated app for posting to social media. It began, I believe, as just a way to schedule tweets. Then it became a way to craft social media posts but send them to more than just Twitter: Facebook, Pinterest, LinkedIn, etc. That, to me, is still the core value. If you have accounts on all those, it’s too much rote work trying to cross-post yourself.

Chris Enns the other day (in our ShopTalk Discord) noted that:

Micro.blog can do cross-posting too (shown off in this video at this time stamp).
They are having a sale where it’s just $1/month (for 4 months then it’s $5)

What seemed notable to me was how different the group of sites to cross-post are, so I documented it quick:

| Buffer | Micro.blog | | Twitter | ✅ They say it’s fine, and I basically trust Buffer, but I have zero trust in Twitter. | ☯️ For now, the video a few days ago said it would be removed in coming months. | | Facebook | ✅ | ❌ | | Mastodon | ✅ | ✅ | | Bluesky | ❌ | ✅ Nice, way to be on it. | | LinkedIn | ✅ | ✅ | | Flickr | ❌ | ✅ | | Pinterest | ✅ | ❌ | | Tumblr | ❌ | ✅ | | Medium | ❌ | ✅ | | TikTok | ✅ | ❌ | | YouTube | ☯️ Coming soon, they say. | ❌ | | Instagram | ✅ | ❌ | | Shopify | ✅ | ❌ | | Google Business Profile | ✅ | ❌ |

So there are:

Four sites that Micro.blog can do that Buffer can’t: Bluesky, Flickr, Tumblr, and Medium.
Six sites that Buffer can do that Micro.blog can’t: Facebook, Pinterest, TikTok, Instagram, Shopify, Google Business

I was particularly interested in how Micro.blog could do Bluesky, because that seems hotly up-and-coming and CodePen has an account there now. And Micro.blog is so affordable! Buffer can be a bit expensive with a team and multiple channels. Maybe I’ll switch? But no, probably not, I really like that Buffer can do Instagram — so I gotta stick with that for now probably.

What I didn’t do here, obviously, is look at other apps out there that can do cross-posting. I literally have no idea who else is doing it. I should probably have a look around.

Say your brand color is the orange #f06d06. Now you need that color but with some opacity on it.

One option is the 8-digit hex code. I find it hard to know which additional two characters are needed, but it’s possible.

| Hex Code | Notes | | --- | --- | | #f06d06 | Original Orange | | #f06d0640 | Orange @ 25% opacity | | #f06d0680 | Orange @ 50% opacity | | #f06d06BF | Orange @ 75% opacity |

Test PenI’m more attracted to the relative color syntax myself. The deal with that is you use the color models function name with the from keyword, which destructures the color for you to mess with in that color model.

.add-opacity { /* original color */ background: #f06d06; background: rgb(from #f06d06 r g b / 50%); background: hsl(from #f06d06 h s l / 50%); background: oklch(from #f06d06 l c h / 50%);} Above, I’m taking that brand hex color and applying 50% transparency. The result is the same in all the color models. That reads nicely to me. Plus it opens the door to using calc() on the individual parts of the color to mess with them if you want.

Unfortunately, the relative color syntax only works in Safari as I write.

So what are your options that work a bit more right-now-ish?

Well, one thing to consider is… not using hex codes 😬. That same orange is about hsl(26deg 95% 48%). That’s easier to apply alpha to. You do: hsl(26deg 95% 48% / 50%).

In practical terms, something like:

html { --brandColorHSL: 26deg 95% 48%; --brandColor: hsl(var(--brandColorHSL));}.use-with-opacity { background: hsl(var(--brandColorHSL) / 50%);} But if you’re going to switch, I’d say it’s worth getting into HDR colors! You can even use them quite safely with @supports:

html { --brandColorParts: 26deg 95% 48%; --brandColor: hsl(var(--brandColorParts));}@supports (color: oklch(75% 0.2 55.5 / 1)) { html { --brandColorParts: 75% 0.2 55.5; --brandColor: oklch(var(--brandColorParts)); }} That’s getting somewhere if you ask me! You might wanna make opacity variants up-front so you don’t need to sprinkle your code with @supports variations. But hey — you are staying ahead of the curve! You don’t wanna get caught with a drab-looking SDR-color website, right? Hash tag in this economy.

But we’re not done here. There is another way to take any color and apply some opacity to it. Una blogged about this recently in Using color-mix() to create opacity variants. Conceptually, this is pretty simple: you take a color you already have and mix it with transparent, and that’s it. So like:

.use-with-opacity { background: color-mix(in srgb, #f06d06, transparent 50%);} This color-mix() stuff works great, and the support is way better (no Firefox though).

This got me thinking though… why srgb? Aren’t the newer color models just as capable or better at this? Well, it gets weird. Would you think all of these turn out the same?

background: color-mix(in srgb, #f06d06, transparent 50%);background: color-mix(in oklch, #f06d06, transparent 50%);background: color-mix(in hsl, #f06d06, transparent 50%); I would, as transparent has no color, it would just apply the alpha and that’s that.

That would be wrong.

Test PenThe thing is, transparent does have a color: it’s black. So depending on the literal shape and structure of a color model, mixing a color toward black has pretty big implications.

See how in the OKLCH example above, it goes a bit red-pinkish? I’m not sure I have this exactly right, but I’m guessing that in the OKLCH color model, pulling that orange toward where black gets positioned in the model pulls it through Mt. Red just enough it picks up that hue.

via OKLCH.comTo me that kinda sucks? I wish transparent didn’t have a hue, somehow, ✨magically✨. It seems to me the best result for mixing with transparency is to do it in the srgb color space.

If you can remember that 00 is the 8-digit hex code version of 0% transparency, you can “fix” this in OKLCH (and I imagine other spaces) by doing like…

background: color-mix(in oklch, #f06d06, #f06d0600 50%); So there you aren’t mixing with transparent black, you’re mixing with a transparent version of the same color. Seems like extra work for nothing when you can just mix in srgb though.

This same problem has been around for ages when dealing with gradients. Doing a gradient from color-to-transparent used to be risky because of the black-ness of transparent. The trick was to use the same color, like…

.bad { background: linear-gradient(red, transparent);}.good { background: linear-gradient(rgb(255 0 0), rgb(255 0 0 / 0));} Safari on iOS 10 definitely had the black problem:

I don’t know when this happened, but this stopped being a problem with gradients. Both the gradients above render the same now and in the way you’d expect across browsers. Maybe there is some behind-the-scenes magic to “fix” it?? If there is magic involved, maybe some of that magic could sprinkle its way over to color-mix().

Take this markup:

```

Salted Water

As delicious as it sounds!

1 cup water
1 tsp. salt

`` Ifarticle.recipeisdisplay: grid;, then the only grid items are the

`,`
`, and`
`, because they are the direct descendants. But it’s a reasonable ask, I think, that you’d want the`
`elements, actually, to be grid items, not the entire parent. The trick there is to tell the`ul.ingredients` to essentially disappear and for the rest of the DOM to behave, visually, as if it wasn’t there.

`.ingredients { display: contents;}` Here’s a layout of a slightly more complex example, but you can see how the title, description, and ingredients all share the same grid:

Live demo:

CodePen Embed FallbackThere is reason to be concerned about the list semantics and accessibility here. Lists announce themselves as lists and say how many items they have and such, and there was a period where using `display: contents;` would wipe that out. In reading Hidde de Vries’s More accessible markup with display: contents (which also uses a recipe as an example — I swear to god I wasn’t trying to copy Hidde it’s just what came to mind) he looks at each of the browsers and lists how it used to screw it up and that, apparently, each have been patched.

UPDATE: While it’s true the browsers were patched, after that, they regressed. 🫣

Eric says: `display: contents` considered harmful and goes so far as to say it can never be trusted. Bummer.

View Details

I’ve long used automation to auto-publish from my WordPress sites to Twitter. I used to work with Automattic as a sponsor for ages, and I’d talk up Jetpack, a WordPress plugin, that handled this social media automation nicely.

The Jetpack Blog, 10 days ago: The End of Twitter Auto-Sharing

We have attempted to work with Twitter in good faith to negotiate new terms, but we have not been able to reach an agreement. As a result, the Twitter connection on Jetpack Social will cease to work, and your blog posts will no longer be auto-shared to Twitter.

It’s the same story everywhere. Feedbin, another product I adore, was smacked. Bots have been largely banned, including super important ones that deliver health and safety alerts.

And all this put onto the absolutely heaping pile of reasons to be disappointed in Twitter. With the jab at WordPress, I was surprised to see Matt defending it. I actually agree with many of the things he said, but he didn’t mention anything about my biggest reason: Elon Musk treats human beings very poorly both personally and through policy decisions. I can’t look past that.

I still pop in there once in a while as… well, I guess I miss it. It’s the best of the social media apps, functionally. I still have friends there. DMs still have some value. But I increasingly feel bad about it because I don’t want to be a part of any ongoing success. I guess I do want Twitter to fail. I want to see a company that has decided to remove protections for their fellow human beings and constantly punch down in that same icky way that Trump does suffer the consequences.

I’m assuming this post will actually auto-post to Twitter. I haven’t touched my Jetpack settings, have posted since this announcement, and it’s still worked. Throw another tire on the fire. Saying one thing and doing another is embarrassing and seeds all the more mistrust.

Since “moving” to Mastodon, I’m getting almost as much value out of that. It’s healthier, anyway. I’ve gotten onto Bluesky as well, but it feels smaller and weirder so far. I followed all the same people as I follow everywhere else, and the general tech conversation doesn’t seem as good there yet. Anecdotally, it feels like people are a bit more excited about AT than about ActivityPub for some reason, yet I expect the tech crowd to be a bit more ActivityPub-heavy in the short-term future.

View Details

I think text-generation “AI” will succeed entirely on the merit that most people just don’t like writing. They just don’t wanna do it. They have to do it, because job, but they’d rather not. It’s not a part of their role that they enjoy. It’s certainly not a fun break from other duties. They may cede that writing can be useful for getting people on the same page, clarifying thinking, or even influencing things in beneficial ways, but that’s not enough to get over the hump of just not liking it.

If a robot could write for them, they are friggin’ down. Sign ’em up. Take their credit card.

For many, even if they wouldn’t directly say it this way, they are afraid of writing. Maybe it’s the very power of writing that does it. The power that gives writing the ability to move people is the same power that can make someone look silly and ignorant. A great document can align a team and move the ball. A bad document leaves everyone mumbling what dummy wrote this. Generative “AI” text not only might help get the job done, but it tempers the fear. It helps people who can’t get the gumption to write get through it. And perhaps just as crucially: pass the buck. Not necessarily in a way that avoids true responsibility, but in a way that avoids devil-on-the-shoulder thinking. The words aren’t bad because I’m dumb, it’s because the machine is dumb.

View Details

I’ve heard a couple of mutations of “Sci-Fi” recently, so I’m documenting them for reference.

Sci-If — Science fiction fixated on a version of reality with an alternate answer to a big scientific “what if?”

Cli-Fi — Science fiction based on climate change.

Sky-Fly — Scient fiction with flying cars, jetpacks, etc.

Nigh-Fi — Near-future science fiction

Cry-Fi — Science fiction tragedies

Stye-Fi — Science fiction where everyone has red lumps around their eyes

Sci-Why — Science fiction that tries to answer one of science’s biggest mysteries

Pi-Fi — You know I’m just making this crap up, right?

View Details

Here’s one thing.

Sometimes there are large-scale political events that leave me utterly baffled. I have this distinct memory from just after 911, where the news shifted to “we’re gonna go to war with Iraq” and I was like, “wait, what the frick does Iraq have to do with 911?”. Nothing, was and is the answer the that. The powers-that-be had some other corrupt fricking agenda to satisfy and pulled the country into that mess, destroying countless lives.

Here’s another thing.

A little while back, I was watching the documentary God Forbid: The Sex Scandal That Brought Down a Dynasty. It’s about Jerry Falwell Jr., this corrupt fricking dude who was the president of some huge horrible Christian university. His wife liked to bone the pool boy and make him film it, which would be kinda hot if it was consensual and didn’t turn into blackmail and horrible behavior. Not to mention the complete and utter hypocrisy of presiding over a university where the students can’t even hold hands.

But the bigger thing that stuck with me was dude’s dad, Jerry Faldwell Sr. This motherfucker was one of those megachurch TV evangelist dudes. There is a part in the documentary that shows how at one point, he’s just fishing around for something, any hot topic, that will massively engage his base. He tried this and that, dangling an outrage worm in front of audiences while Tucker Carlson was waddling around in diapers. Then he found the perfect thing: abortion. He likely didn’t give a shit about abortion, but he found it was the absolute perfect thing to get his audience rip-roaring. So he made it his whole thing for a while. He wasn’t even political at all before this, but then found that going political with abortion was an even more potent outrage cocktail.

Here’s why I bring up those things.

That’s what all this political anti-trans garbage feels like. Trans people have always had it super rough, but it still feels like, all of a sudden, this is the massive groundswell of very real action against trans people. It’s like the weird pivot to Iraq. It’s like the ooooh abortion that’s a good one! pivot. There is absolutely no reason for it. I find it likely that many of the people behind it don’t even care about trans people one way or the other, it just happens to be a potent outrage cocktail that is helping build political power for a party where outrage cocktails seem to be the only recipe that works lately. Damned if countless lives are ruined along the way.

View Details

One thing about this current crop of “AI” tools going around that sticks in my head, I think I got it from a Shawn Wang article, is that “AI” is good at:

Small Input -> Big Output

Big Input -> Small Output

So type “bernie sanders wearing a blue web standards beanie” into an image generation “AI” tool and those 50 characters of text become millions of pixels of image representing it (yeah). Small Input -> Big Output.

On the flip, train a model on, say, 15 million websites, then ask it to write stories where your kids are friends with Mario and Luigi. Or train an image model on every X-Ray ever taken so you can give it one more for analysis and see if that really is a fractured rib or not. Big Input -> Small Output.

On the Small Output side, I saw Paul Stamatiou recommend a Chat GPT-based summarization Chrome Extension. No time to read the full article? Summarize it and get the gist now. Mixed feelings there. I don’t hate the time savings but feel “AI” is going to strip away the feel of the piece. I need that proper feel to know if I really care or not. I have it installed, so let’s see if I end up using it much or not.

Related, I’ve still been cracking open Artifact app on my phone sometimes. They still haven’t solved that “it’s nigh intolerable to read content sites on mobile without high powered ad blockers” problem quite yet. They have “reader mode”, which is nice but you have to flip it on every single time so I wouldn’t consider it solved. I prefer reading the designed website anyway, just sans-horrible-ads. A new take on the solution is summarization:

That’s neat. I like it.

“AI” is best when it’s just a feature and I don’t have to type anything.

View Details

I recently said yes:

They make CSS into a more coherent and interrelated system that is easier to learn and reason about.

Jim has doubts:

`top`, `left`, `right`, `bottom`, those directional properties are tied to my everyday experience of physical reality so they are easy to understand. They’re intuitive.

…

… I’m not convinced [logial properties make] CSS “easier to learn”.

Agreed, there is something immediately apparent about top, left, right, and bottom. Despite my 5-year-old daughter’s confusion with right and left, I think she’d have a harder time with “the end of the inline document flow”.

My point is more about reigning the language in. Once you’ve got your mind wrapped around what the inline direction is, that word can be used for all sorts of relevant properties and values in a way that makes consistent sense.

| Before | as Logical Property | | --- | --- | | width | inline-size | | right | inset-inline-end | | margin-left | margin-inline-start | | overflow-x | overflow-inline | | resize: horizontal | resize: inline | | text-align: right | text-align: end |

Imma say that right (ahem, inline-end) side gets the 🏆 for consistent sense.

It’s not a huge thing, but consistency in language is a factor in how difficult it is to learn.

That said, because the logical properties don’t replace the non-logical versions and that there are still reasons to use the non-logical versions, thus only expanding the language… well, I can cede that makes CSS as a whole perhaps a smidge harder to learn. 😬

View Details

I want to think I’d pick some other niche thing and do it myself but also spin off a meta-career, helping people understand it better. I think I’ve got just enough entrepreneurial spirit it would be inevitable. Doing that with playing the banjo would be pretty neat. Fortunately, I picked web design & development, which is way easier to make money at.

That is until I heard this incredible life path: being a member of Taco Bell’s food-innovation staff.

… which includes sixty developers, focusses on big questions: How do you make a Cheez-It snack cracker big enough to be a tostada? What are the ideal Cheez-It dimensions to guarantee that the tostada won’t crack inconveniently when bitten into? Or consider the Doritos Locos Taco: What safeguards can be implemented to prevent the orange Doritos dust from staining a consumer’s hands or clothing? Can fourteen Flamin’ Hot Fritos corn chips be added to the middle of a burrito and retain their crunch? Can a taco shell be made out of a waffle, or a folded slab of chicken Milanese? These are all problems of architecture and scalability

Taco Bell’s Innovation Kitchen, the Front Line in the Stunt-Food Wars

What do you do for a living? “I’m a developer.”

View Details

In a recent Kevin Powell video (it’s the first trick of five), he talks about `isolation: isolate;`. The name is strange, but the point of it is that it gives you a new “stacking context” in CSS without any side effects. Stacking context, as in, a new zone for `z-index` values.

This comes up sometimes when I have an element (or pseudo-element) that I want to be below all other elements in this context but don’t have a great way to do it. I know in my head that `z-index: -1` will do it, but I’ve long been afraid of reaching for that because it can put the element too low, going underneath potential backgrounds of parent elements.

There is no need to be afraid if the element has a new stacking context. You can get one by doing something like `overflow: hidden;`, but ya know, that hides overflow (plus a block formatting context). You can get one by using `position: relative;` plus putting a `z-index` of it’s own on there, but then it has that positioning value and z-index, which might not be something you want or have side effects. The beauty of `isolation` is that you get the stack context with zero side effects. It just does that one thing.

Anyway, I masticated this a while back so I thought I’d blog it like a responsible internet citizen. Video demo of ensuring a quote decoration doesn’t disappear but goes behind everything else in that element. Useful!

Pen:

CodePen Embed Fallback

View Details

One hundred years ago (2018), in the dark ages before Container Queries existed, Philip Walton put together Responsive Components, a JavaScript-based technique for flopping out classes on elements at certain widths (element widths, not viewport widths) such that you could re-style them in CSS. It was a fine technique. A fairly lightweight `ResizeObserver` flopping out some classes is pretty straightforward. I imagine some people used it, but I’d say it never really took off. I think there was just a little too much cognitive overhead with the JavaScript technique, and using JavaScript at all isn’t what people wanted with Container Queries.

What stood out to me about Philip’s demo though, was that the use cases were outstanding. The ol’ Card component is a classic I realize, but it’s overdone now as a Container Query demo. The Calendar demo was way cooler:

I decided to re-build that Calendar the other day, and got this far (you might wanna view it bigger than this embed):

CodePen Embed FallbackI used native CSS nesting, so if you’re looking in Safari or Firefox, which don’t support CSS nesting as I write, just go to the CSS settings and flip on SCSS and it’ll process correctly and work.

I just winged it — I didn’t look at Philip’s approach while building — but in the end I did do a little comparison and it was interesting how similar we did things. I used a bit more CSS grid than he did, but our CSS custom properties approach was similar. Plus, of course, my version uses `@container` rather than the JavaScript approach.

I chucked that demo into a neat little Web Component for resizing panels.

I yipped about it on YouTube a little:

View Details

There used to be this thing called OpenSearch that would provide some level of UX in browsers for searching individual sites. You had to bring-your-own search functionality, this was just getting users to it. I say “used to be” a thing because it seems like it’s been neutered out of being useful anymore.

The way it worked was to link up an XML file:

`<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="My Website Search">` Here’s the XML file I put on css-tricks.com a million years ago:

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"> <ShortName>CSS-Tricks</ShortName> <LongName>CSS-Tricks Search</LongName> <Description>Search through articles posted on CSS-Tricks</Description> <InputEncoding>UTF-8</InputEncoding> <OutputEncoding>UTF-8</OutputEncoding> <AdultContent>false</AdultContent> <Language>en-us</Language> <Developer>Chris Coyier</Developer> <Contact>chriscoyier@gmail.com</Contact> <Tags>css html jquery javascript web design</Tags> <Attribution>Search data from CSS-Tricks http://css-tricks.com</Attribution> <SyndicationRight>open</SyndicationRight> <Query role="example" searchTerms="Flexbox"/> <Image height="16" width="16" type="image/vnd.microsoft.icon">http://css-tricks.com/favicon.ico</Image> <Image height="64" width="64" type="image/png">https://css-tricks.com/apple-touch-icon.png</Image> <Url type="text/html" template="https://css-tricks.com/?s={searchTerms}"/></OpenSearchDescription> The main thing was that second to last line with the `https://css-tricks.com/?s={searchTerms}` part of it. It would pluck up the search terms and get them to this URL format.

Here’s the kicker: I don’t really remember how browsers used to let you know if a website had one of these in place or how it felt to use it. I feel like it would let you know somehow, but can’t remember how. I think it was somewhat hidden, yet discoverable. For example, you’d type `css-tricks.com` SPACE then keywords, and it would detect that you’re probably trying to search that site and use the OpenSearch integration to get you there.

You can feel the ghost of that with Chrome’s custom search engines. (It was intentially neutered). They aren’t detected, you have to manually add them:

If I put that in place manually, then type “chriscoyier.net” in the search bar, SPACE, then some keywords, the UI changes to offer using that custom search engine:

Firefox won’t let you add a custom search engine. They have Search Extensions, but you can’t add one that is just OpenSearch based anymore.

I don’t remember if Safari ever supported it really, but I can’t seem to make it work at all anymore. There is a setting for Enable Quick Website Search, which I have on, and `css-tricks.com` is in there, but if I type that in the URL bar and hit tab, it just tabs away, and if I hit space after, it just performs a normal search to a search engine. The (?) help button on that page brings up an error page so I’m gonna say that’s just broken.

Feel free to prove I’m wrong, but OpenSearch seems dead.

But in Chrome-land (and thus Arc too), adding custom search engines can be pretty useful still. You just don’t need any fancy files or anything to do it, you just do it for yourself.

Jim did up a post on this: Site Search in Arc Browser — For Your Own Site

The beauty of that is that you don’t even need your own custom search setup on your site, you can still use Google (or whatever) and scope the search results to that site. But do it with a really fast shortcut. The trick there is to leverage the fact that you can do `site:website.com` + the search terms to scope the search results, so here’s a quicky for MDN:

MDN has their own decent site search too you might wanna use, but the Google results are good too, so whatever which way.Now I hit `mdn` + TAB, and it activates that special search re-direct. It’s pretty cool looking in Arc:

View Details

The Washington Post does research to figure out which websites were used to train Google’s AI model:

To look inside this black box, we analyzed Google’s C4 data set, a massive snapshot of the contents of 15 million websites that have been used to instruct some high-profile English-language AIs, called large language models, including Google’s T5 and Facebook’s LLaMA.

Inside the secret list of websites that make AI like ChatGPT sound smart

My largest corpus of writing to date is on the web at css-tricks.com (along with many other writers), so naturally, I’m interested in seeing if it was used. (Plus, I’ve been seeing people post their rank as a weird nerd flex, so I’m following suit.)

Despite Google’s employees serious misgivings (just little stuff like the information presented leading to “serious injury or death”), Google has publicly launched their Bard tool and are very serious about investing in AI.

Me, I just think it’s fuckin’ rude.

Google is a portal to the web. Google is an amazing tool for finding relevant websites to go to. That was useful when it was made, and it’s nothing but grown in usefulness. Google should be encouraging and fighting for the open web. But now their like, actually we’re just going to suck up your website, put it in a blender with all other websites, and spit out word smoothies for people instead of sending them to your website. Instead.

And while doing that, they aren’t:

Telling authors their content is being used to train

Telling users where the output came from

Offering any meter of how reliable or confidently correct the output is

So, I’m critical. It’s irresponsible.

But I’m not a neo luddite or whatever on this. It’s all certainly interesting. I like that these tools are almost immediately useful and pouring over with use cases. Heck, I needed a quick CSS rainbow gradient the other day, and the output from Bard was quick and useful. I’m a GitHub Copilot paying customer and I’m 100% sure it makes me a faster and better coder. I’m nervous about lots of things related to (massive air quotes) “AI” but I’m hopeful it can do some good.

On being critical though, here’s Manuel Moreale:

… I do enjoy reading news and discussions when politics and technology are both involved. I especially enjoy reading people’s perspectives on these topics. One thing I’m noticing more and more though, is that most people are quick to point out what’s wrong about something, but almost never offer solutions or alternatives.

And that is because complaining or pointing fingers is the easy part. Figuring out alternatives is hard

Criticising is the easy part

So here’s what I’d like to see done:

Stop firing ethics people. What is it, three times now?

Be very open about what content a model is trained on, and at least allow people to opt-out. Better — opt in.

Credit and link to the sources directly in the output where possible.

Operate this part of the business as profit neutral.

View Details

Y’all use Raycast? I do, but I’m a little itty bitty baby user. Like I just have it replace Spotlight because it seems to work equally well as Spotlight for finding files and applications. But then has a few bonus features here and there. I use the commands to move windows around once in a while (but largely still use Moom for that), the emoji search is alright (but not miles better than the built-in thing), the calculator results look nice (but Spotlight does fine at that too).

It’s like I know there are interesting clever things it can do, I just don’t really know about them and have zero muscle memory for reaching for the little things I have seen.

But I’ve nearly started to like one! “Almost Maximize” is a clever window moving feature. Thanks Dave! You can already maximize windows natively, but both the ways do not appeal to me:

Press the green (⤡) maximize window button. This always feels like too much commitment to me. It removes the window top bar, it makes a new “space”, it has this whole animation going into and out of it. Too much.

Option-click the green (⤡) maximize window button. This is more chill, it just makes the window take up all the space on the whole screen. I prefer it, but, it fills the entire window. I know that’s it’s job, but I kinda like a little space left over.

“Almost Maximize” has the window take up 90% of the screen, leaving space around it.

I generally prefer that, because the space that it leaves often has little peaks of other windows I might want, or, more importantly, access to icons on the deskop, which there is a decent chance I want to get my hands on (or drag more things to). I’m a super clean desktop guy, so if there are files there, they are actively being used for something.

You can configure “Almost Maximize” to be 90% down to 60%. But if I’m being nitpicky, I actually want like 95%. I usually just want the right side is all.

What I like is that Raycast had the idea to built it in and name it something memorable. But I think my Moom setting is still going to win out for now:

Any Raycast commands you love?

View Details

I just got a Nintendo Switch. It was released in 2017, so I’m a little behind the curve. My thinking was that Ruby, my five-year-old, is just about ready to be able to play games with controllers. I’ve tried before with Alba: A Wildlife Adventure on AppleTV using a controller, and we both loved it, but she couldn’t really do most of the game playing. When she was much younger I could toss her a controller and tell her she was playing, but that wouldn’t work anymore.

The Nintendo Switch has pretty sweet features for young ones. Here’s two from the first few days of ownership:

Super Mario Odyssey is one-player, but a second player can control “Cappie”, Mario’s hat, which you can fling about to do stuff like attack enemies or take temporary control of enemies. This lower-stakes control is a frigging genius way to have an older and younger player play together simultaneously.

On Mario Cart 8 Deluxe, on a per-player basis, you can set Smart Steering and Auto-Accelerate, so I can set these functionality bumpers on Ruby’s car but leave mine normal, and we can play together reasonably.

That’s classy stuff right there, good job Nintendo. I’m excited to play Breath of the Wild, as it seems so insanely beloved. Plus the sequel is coming soon so I’ll be ready.

Not to mention the killer feature: you can just yank the thing out of the dock and take it with you?! Like I said, a little behind here, but that’s a wonderful design. Perhaps a little dangerous on the parenting side. Leaving the house doesn’t require them to stop playing like it would otherwise. We’ll have to figure out how to draw those boundaries best for us.

Is portability just a standard feature now? It seems like it should be, but reading up a little looks like the Playstation Portable was a bit of a flop, Microsoft outsourced the concept, and the Steam Deck came out of left field and nailed it? Mixed bag.

Surprising disappointment: I bought physical copies of the games just assuming I could load them onto the device digitally also, and the physical would just be a nice backup, plus save some download time that first day where we just wanted to get playing. But no! If you want the digital copy, you have to pay full price again. Suck a butt.

View Details

Seems important:

CodePen Embed FallbackNotes!

That’s dumb we need vendor prefixes for masking still.

`vmin` is nice for sizing things that will never be bigger than viewport in either direction.

Feels like cheating when you only use one keyframe.

I wanted to use OKLCH and keep it simple, so I found value for Chrome and Lightness that the Hue went straight through.

View Details

📺 TV: The Big Door Prize — They had me at “same writer/producer as Schitt’s Creek” and kept me with “light-hearted small town comedy thing with light sci-fi”. Great cast.

📺 TV: Succession — Normally, I hate shows where everybody is bad, and this is that, but I still love it. Just a freight train of big moments. Captivated by “this is the last season” energy right now. I am a little annoyed with shows that only drop once a week because I forget about it and wander away and sometimes forget to wander back, but no real threat of that here. Plus, ya know, I never cancel my TV subscriptions, so my actions speak louder than words.

📘 Book: The Wolf. A fantasy novel (the first of three books) in which a new ruler in The North faces off against a feisty warmonger in The South. The scheming is intriguing, and the battle seasons are engaging. Kept me hooked enough I’ve started the second book.

🎧 Podcast: The Coldest Case In Laramie — Like every Serial series… nothing is ever really figured out or resolved, but it’s a heck of a journey anyway. A murder in which we hear from many people close to the case and how differently they think.

▶️ YouTube: I overheard a Discord conversation about how the game Superliminal is good so I tried to find it on YouTube (I don’t play video games, I watch other people play video games on YouTube). Somehow I accidently watched jacksepticeye play The Backrooms: Lost Tape instead, which was relatively interesting. I don’t love Jack’s style (his sense of humor is this crude-but-basic thing), but he does a good job of playing interesting games and putting out videos of high quality. I’ll probably try this actual video of Superliminal next.

🎥 Movie at home: John Wick 1 & 2 — I saw John Wick 4 was in theaters, and it has finally browbeat me into knowing what John Wick is all about, so I started with John Wick 1 & 2. They were more fun than I thought they would be. The action scenes didn’t lose me (entirely, anyway) like they tend to, and all the criminal underworld lore stuff drew me in. Rules! Traditions! Consequences! Promises! Heirarchies! Old ladies that take phone calls on ancient analog phones to dispatch new bounties!

🎥 Movie at theaters: The Super Mario Brothers — Ruby enjoyed it, I found it boring as hell and fell asleep.

View Details

A friend showed me something of a design spec they were charged with pulling off:

The requirements:

… when I click on any of them it expands at the top to full width and the rest of the cards re-arrange themselves below it.

Like anything web design & development, there are a boatload of ways you could do this. Different layout strategies, different combinations of native technologies, different libraries to punt to, etc. I lean native first, so this was how my brain scripted the problem:

Six cards on a fluid, flex-column CSS Grid. Let cards `auto` flow onto the grid.

When you click a card (instant 😬), donk it at the top by `order: -1;` (another 😬)

Make it full width regardless of columns via `grid-column: 1 / -1;`

I suppose we could animate this “for free” FLIP-style with the View Transition API.

And so:

CodePen Embed FallbackVideo here. Note that only Chrome supports View Transitions. This video shows them, but the rest of it should work regardless of browser.

The “alternate look” shows off how a little `:has()` selector can go a long way in interactive fun! The GridPretty easy these days, so I’ll make it complicated just for fun:

`.grid { display: grid; grid-template-columns: repeat( auto-fit, /* fluid columns, but max out at 3 / minmax(min(100%, max(10rem, 100%/4)), 1fr) ); gap: 2.5rem;}` This incantation of `grid-template-columns` says:

This grid is is fluid (the columns are of a fluid width)

The number* of columns is fluid, starting at just 1, which shrinks as narrow as it needs to (it’s not limited by some fixed minimum width)

Only go up to 3 columns, not unlimited as you normally see

Break into two columns at a reasonable middle ground

A bit complex, but a useful bit of code there that can be expressed without media queries. I’m sure I’ll come back to this blog post for that over and over.

The MoveTo make sure the clicked card becomes the first one, I’ll toggle a class:

`.card { ... &.featured { order: -1; grid-column: 1 / -1; font-size: 133%; }}`

`const cards = document.querySelectorAll(".card");cards.forEach((card, i) => { card.addEventListener("click", () => { activateCard(card); });});function activateCard(card) { cards.forEach((card) => { card.classList.remove("featured"); }); card.classList.add("featured");}` Animate ItThis is essentially a tweening (sometimes called FLIP) animation where you don’t really care about the starting or ending state per se you just say: animate between them please.

The trick there is the View Transitions API, which means you just wrap any DOM manipulation in there and it’ll automatically animate. Here I’ll ensure the DOM changes even if the browser doesn’t have that API yet.

`if (!document.startViewTransition) { activateCard(card);}document.startViewTransition(() => { activateCard(card);});` That’s ridiculously simple. I love it.

I popped a close button on each card also which just de-features all cards, and calls the same API.

The Accessibility SituationI’ve attached a click handler to a damn `<div>` here. That’s not right. A user using a screen reader won’t be able to activate the animation because the `<div>` is not interactive itself.

But… maybe that’s OK?

This is what you might call a “fidget spinner animation”. It doesn’t do anything important. No information is revealed. It’s just something you can click on for poops and giggles.

The second we reveal some additional information… then we’re in trouble here. Then we need to attach the activation to an interactive element, probably a `<button>`. And as soon as we do that then the fact that we’re changing the tabbing order by messing with `order` becomes problematic. Tabbing order is no longer intuitive when the 4th item can appear at the top yet send focus to the 5th item just because that’s where it is in the DOM. Perhaps you could fight that by setting tabindex values ourselves, but that seems like a can of worms. Honestly, if this was revealing extra information, I’d probably just not take this approach at all and find some other more suitable way.

Text selection is a minor concern. It’s a little annoying how you can select text and un-clicking after dragging activates the click and the text goes flying away from you. I say minor because the text remains selected so it’s not a 100% blocker.

Another form of accessibility is not making people nauseous, so might as well honor the preference for reduced motion. Easy as CSS:

`@media (prefers-reduced-motion: reduce) { ::view-transition-old(), ::view-transition-new() { animation-duration: 0s; }}` Another little View Transitions ThingA hamburger interaction where the lines of the hamburger fly out to become the borders of the navigation drawer. This one not only uses View Transitions but native CSS nesting too just for fun.

CodePen Embed Fallback

View Details

Say you pull in Bootstrap (or any other grab-and-go CSS library) something like:

`@import url("https://cdn.com/bootstrap.min.css")` Now you use it to style a card or something…

```

Card title
... ``` But you don’t like the amount of margin on `.card-title`. Now what? Options: ``` /* Same specificity might work, as long as you're always loading you are always loading your CSS after /.card-title { margin: var(--my-margin-override);} ``` ``` / The: I JUST WANNA WIN!!!! method /.card-title { margin: var(--my-margin-override) !important;} ``` ``` / More tempered approaches to specificity battles /h5.card-title { margin: var(--my-margin-override);}.card-title.card-title { margin: var(--my-margin-override);} ``` I’m not a big fan of any of those approaches. They all come with at best little mental overhead and at worst a gnarly styling battle. This is an extremely not rare situation. Cascade Layers offers a delightfully simple fix: make your library CSS less powerful: ``` @import url("https://cdn.com/bootstrap.min.css") layer(framework); ``` Now any other CSS (that is either “unlayered” or is intentionally put into a “higher” layer) will automatically win over Bootstrap. I can just do: ``` / This unlayered style will win over Bootstraps .card-title by virtue of Cascade Layers /h5 { margin: 2rem;} ``` CodePen Embed FallbackHow this effects how authors write CSS over time remains to be seen, in my eyes. But conversations like “always keep specificity low” which has long been a sensible over-arching CSS philosophy will change with Cascade Layers in play. Specificity just matters less when the tools to ensure the styles you want to apply more are easy to configure up front.

View Details

I read some accessibility advice recently: don’t make lists where the bullet for each item is an emoji.* I think they were saying it is just… annoying. I generally find it annoying visually, so I imagine it’s more so when you have to wait for emojis to be described.

Here’s a screenshot of what I mean:

If I mark that up as an actual `<ul>` (and remove the default bullets):

```

🛞 Cool new wheels!

🔥 Now 3× faster!

😍 Tests passing!

Code language: HTML, XML (xml) ``` I get this with VoiceOver:

I’m no expert in VoiceOver control, so maybe that can be fine-tuned or something. Still, to my novice ears, it sounds awkward with the next emoji being read so immediately after the end of the previous list item it is hard to tell when one list item ends, and another begins.

But if you love the visual look of an emoji list and want to remove the emojis for assistive tech, CSS is an option now. Almost the same list, but remove the emojis from the HTML:

```

Cool new wheels!

Now 3× faster!

Tests passing!

Code language: HTML, XML (xml) ``` And put them into the CSS:

`.like-this { list-style: thumbs;}@counter-style thumbs { system: cyclic; symbols: "🛞" "🔥" "😍"; suffix: " ";}Code language: CSS (css)` Now you’ll get a “normal” list in VoiceOver:

I realize that custom CSS control is absent in common places where these lists appear: social media, GitHub, etc. And I realize needing to produce custom CSS just for one list is a big ask. But hey, if you’ve got the control, and the shoe fits, maybe use it for good.

CodePen Embed Fallback

View Details

We’ve just returned from our spring break trip this year. Sppprrinnnng breaaaaakkkk. We joined another of the same families from our fateful spring break trip last year, so Ruby our 5-year-old was joined by her buddies Monroe (5) and Zoey (4).

Any other day, I would have felt extremely self-conscious and a bit silly pronouncing our lovely mid-Pacific Ocean state with the paused consonant that is the ‘okina, but here at the end of our trip, it slides right off the tongue.

Our main destination was Disney’s Aulani resort on O’ahu. If you’ve been to Waikiki in Honolulu, it’s about 45 minutes west by car, or 25 minutes from the airport. Driving down that major highway, there is a good reminder that Hawai’i (Honolulu, at least), despite being a little green dot in the middle of the world’s largest ocean, is a large, populated, normal American place. You got your CostCo, Uber, Burger Kings, rush hour traffic, big green highways signs… ya know, all the stuff. Fun fact: Hawaii is home to approximately twice as many people as Alaska (1.5m vs 750k) despite being 89× smaller in area.

Why Aulani? We just wanted to try it. Miranda’s family has big Disney work history, and we like Disney as much as, say, a normal family with a young kid does. To me, Disney-anything represents a decent bar of quality. Spendy but not mega bougie (unlike the Four Seasons next door, which was ultra nice and had us all ).

Here’s a photo looking down at the waterpark space between the two towers of Aulani and out onto the ocean:

Two pools, three hot tubs, a lazy river, kid’s splash park, and that mountain in the middle is home to two pretty fun waterslides. The darker pool is a fish-filled “reef” with daily feedings you can watch or participate in.SATURDAY — We Delta’d our way there. A leisurely noon flight out was nice, a rarity at the Redmond, Oregon airport. That put us there at about 8pm Hawai’i time. No lei was placed upon our necks. Not a thing (anymore?). It was only 11pm Pacific time, but I felt absolutely zombified by the time we were checking in. There might have been knives coming out of my eyes while the perfectly lovely Aulani desk clerk was pointing things out on the little paper map when all I wanted was the room key.

Screenshot saved on my phone of me texting my friend how to get to the coffee stand.SUNDAY — Coffee. 辰

There are little coffee pods in the rooms, which we ended up never using as we got into the habit of going downstairs and buying a cup in the morning. Disney isn’t exactly a “free coffee in the lobby” kinda institution. There is a coffee stand that mercifully opens at 6am. There was quite a line, which is a combination, I think, of a lot of families being mentally in a mainland USA timezone where that’s 9am-or-later in their heads, and the fact that everything Disney means lines. $6 for a cup you pour yourself from a brown plastic jug. $9 for Kona, which I wanted to try, but reports in our group is that the regular was better anyway.

We learned, like so many resorts and cruises, you have to fight for chairs. Come down to the waterpark at a sluggish 9am, and you’ll be keeping your towels and flip-flops in a little pile next to the garbage cans. You aren’t allowed to plop your stuff on chairs early and come back hours later. Well, you can try, but not only is it against the rules, the one time we tried it once and our stuff was shoved aside and the chairs taken. The only surefire way to get chairs is to send an ambassador in the wee hours of morning to reserve your set in person. (Result: there were a lot of dads down there reading the newspaper in the early hours.)

Technology-wise, a couple of things to know:

Magic Bands do work at Aulani. We bought Magic Band+’s online before we went. We made the mistake of trying to set them up before we got there. Don’t do that. They had to call some internal customer service line and UN-set ours up to get them to work. What they do is basically open your door (which is nice because you’re friggin always carrying something on vacation) and allow you pay for stuff. The latter is nice as it means you don’t have to schlep a wallet around at all.

The App is… fine. It’s probably worth having on your phone, if nothing else for checking the schedule for stuff. We found reservations hard to make on it. I was never able to connect our reservation to my app (Chris Coyier, you cannot attach this reservation as it is owned by Chris Coyier, have Chris Coyier add you to the account, lkajd;kfajd;kfj). It’s not total garbage, but it needs work.

In the evening, we headed to a little shopping center across the street. There is a restaurant there called Monkeypod Kitchen which I will award a solid 10/10. Just a beautiful large open-air space, lovely staff, and wonderful food and drinks.

We had a table on the edge of the grass on the right there, which gave the kids a lovely place to play and dance before and after dinner. And honestly, in the middle of dinner too.We were just in time to catch the evening musician: Lava. He played guitar and sang by himself and was extraordinarily talented. He had one of those repeater petals, so he would beatbox the beat, then play a bass line, then play and sing the song over those two tracks. Sometimes that feels a little cheezy or played out to me, but he was very understated about it and it worked. Ten times better than playing to a pre-recorded beat track or something anyway.

Monkeypod told us they were known for Mai Tai’s (everywhere in Hawai’i had Mai Tai’s, naturally), so we went for a round of those. They were quite good, finished with a tangy honey-lilikoi foam topper that gave them a special feel. On the subject of Mai Tai’s, I was very excited to drink Mai Tai’s in Hawai’i, but somehow lost my enthusiasm for them right away on the trip. I think I built them up too much in my mind or something and it turns out I’m just not a massive fan. I have been on a Rum Old Fashioned kick though. Zacapa FTW. I was also surprised to see a Bend beer on the menu of just 29 beers: Deschutes Brewing Mirror Pond.

For dinner, I ordered mahi-mahi tacos, which is wildly unlike me as I don’t eat much seafood aside from fairly basic sushi rolls and the occasional oyster. But sometimes in water-heavy locations I get the urge and I’m glad I did as they were excellent.

MONDAY — We did a little pool action on Monday and took the kids to Aunties Beach House for some activity. That’s nice as you literally drop the kids off and come back later, generally 90 or 120 minutes. Just gives everyone a little break from each other and doing something fresh.

I was able to sneak away to the gym a few times during the week. The gym was on the first floor of Aulani and was… fine. It has Peleton bikes which is a nice touch, but it was pretty small and windowless, which felt sad for such a lovely place otherwise.

Somehow, conversation revealed that none of the kids had ever been to a Japanese Steakhouse. The spectacle of all that sounded fun, so we chose Sakura, a decent drive into the middle of the island. We got to drive through some super normal neighborhoods, which is always interesting to see while travelling. It had me thinking: do Hawaiian people actually say “Aloha” to each other? Like if you’re getting your newspaper at the end of your driveway and see your neighbor on their porch, do you say “Aloha”? Even if you don’t otherwise speak the actual language? Unknown. Anyway, if you’re a conessiour of Japanese Steakhouses, I’m sure you could find five in Cleaveland nicer than Sakura, but we still had a great time. Our chef was lively and fun, shooting Sake from a squirt bottle across the tables into our (adult) mouths. The kids were enthralled and satiated, and that’s a win. In retrospect, I’m extra glad we did this as it delayed how long it took to be entirely sick of the resort dining options.

TUESDAY — My wife hired a photographer to do professional photos for all of us, so we kept the kids out of the water until after that. She scheduled it early in the week so we’d have pictures before one of us inevitably got sunburned.

Eating snowflakes with plastic forks,
and a paper plate of course,
you think of everything.

Modest Mouse – Trailer Trash

We’ve seen some previews from the photographer, and they look great. I can’t wait to get the full set. It even started pouring rain in the middle of it, and it didn’t ruin anything.

The shoot went long enough that our options were running thin by the time we were trying to figure out dinner. We couldn’t get into any restaurant at Aulani (the nicer one is closed Tuesdays), and neither of the restaurants across the street would do takeout (WTF?). The dads ended up scouting out the grocery store, which was a real saving throw. We ended up getting takeout burgers and whatnot from the deli counter, and it worked out fine. That grocery store, Island Country Markets, is worth checking out — we ended up going back there several more times for snacks, little necessities, and gifts. There is plenty of Spam there, don’t worry. The only Aulani gift shop with snacks is super limited and super expensive.

WEDNESDAY — Big day! We woke up early and headed to the airport to catch a Hawaiian Airlines flight over to Kauai. My brother-in-law and family were staying at the Grand Hyatt over there for an Edward Jones event, and they had plenty of time to hang with us that day.

It was a chill, easy, fast flight (no luggage!) and we arrived to the wonderfully chicken-filled island in the morning. A 20 minute drive or so over the their resort was pleasant, especially as it went right through The Tunnel of Trees! We did the breakfast buffet, and it was excellent.

The kicker? It just absolutely poured rain all day. But our plan was mostly to swim all day… so we swam all day! I found it extremely fun and weird and memorable to be enjoying all the pools and hot tubs of this incredible Grand Hyatt in terential downpour.

A bit of thunder did make us get out for 30m, but then we were right back at it.Later in the afternoon, the rain did eventually let up, and we walked down to the beach and up a rocky cliff outcropping. I was terrified to see two different groups of people barrel of the side of it (20-30 ft?) into the ocean below. I tried to ask myself as honestly as I could: would I die if I did that? I put the chances at 50%. Not something I’d risk. But then I was immediately bowled over by horrible feelings about myself. Am I just a wimp? Why can’t I grab life by the cojones like these people can? Am I just a lower-tier human destined for a lower-tier life? Rather than tackle these questions and improve either my life or my own thinking about my life, I just waited for the emotion to fade and moved on.

Ruby really wanted to play on the beach with the waves and we were like nahhhhh girl you’ll get your street clothes wet and we didn’t bring any changes of clothes, but then ultimately let her anyway, and she immediately got 100% drenched. Fortunately the Grand Hyatt has super nice shops, so Miranda went off to buy a new (dry) dress for Ruby. I stayed with her to play, but then there was as mild panic moment where a wave was kinda dragging Ruby deeper out into the water and she was scared, so I had to run in after her, and then my shoes got 100% drenches. Soooooo new shoes for me too, thanks Grand Hyatt.

Takeout dinner and then back to the airport to fly back to O’ahu and Aulani to crash. Definitely the first time I’ve ever hopped a plane, partied, and hopped a plane back to the same place in one day before.

THURSDAY — While there are water slides at Aulani, we wanted to check out Wet ‘n’ Wild up the road a bit, a bigger dedicated water park, so that’s what we did this day. It was alright! Perhaps the biggest bummer was the the shortest kid was only 42″ and pretty much every ride was at least 48″ minimum height, so she got screwed. There was also a short staff, so… half?… the rides were closed. They rotated slides in during the day (close one, open another). I didn’t care enough to track it and make sure we went on the best rides or anything. The kids were too little to care. Ultimately we spent the most time on the splash pad thing and then ultimately the wave pool. Love a good wave pool.

Crazy small world thing: Brandon, my old office mate, Craft CMS CEO, and fellow Bendite was at Aulani the same time we were, and we met up at Wet ‘n’ Wild. We had no idea we’d be there at the same time.

That evening we hired a local babysitter to come watch the kids so we could have one adult’s night out. All we did was go next door to the Four Seasons hotel, which was just absolutely gorgeous. I sweet-talked our way into Noe without reserverations and dinner was outstanding there. Coffee negronis, a couple bottles of incredible wine, a huge ribeye, and this absolute banger Tagliatelle dish left everyone very happy.

We then moved out to the pool bar for nightcap coffee martinis. Solid evening.

Unscheduled Goofy blaster.FRIDAY — Character breakfast! If you want photos with characters, this is probably the safest bet. You will find random characters walking around (scheduled and not), but you’re guaranteed a solid Mickey, Minney, and Chip’n’Dale at the breakfast (moar lines). Not to mention Mickey-shaped waffles and all that. It’s fun.

Afterward I took all the girls down to the beach to hang out there. This is a fantastic feature of Aulani: they carved out this whole little inlet of ocean specifically to make it more pleasant to chill at. No big waves, just nice beach, and warm water.

The little girls all went to the salon at Aulani on Friday and got all done up like Moana with the hair and costumes and whatnot.

That afternoon we mosey’d back over to the grocery story for snacks and ended up stopping at Black Sheep Cream, a little ice cream shop. The logo, chalk board menu, and minimalist decor make it seem like it’s going to be real fancy and nice, but we ordered affagatos and it was like cold gas station coffee poured over a pile of vanilla soft serve in a plastic cup so: no. Random interesting fact, aluminum cans in Hawaii have weird little ridges on the top. I first noticed when I got a can of Lion Coffee Cold Brew (delicious) and then kept noticing it over and over. I did find an article on it:

Hawaii has one can-making facility in Kapolei, located on the island of Oahu. It’s owned by Ball Corporation, based in Colorado. While it’s one of the company’s smallest plants at 140,000 square feet, it manufactures about 1 million cans of soda, juice, and beer each day. This facility is also the reason you’re likely to find unique soda cans with neck ridging when you’re in Hawaii.

Why Are Soda Cans Different in Hawaii?

Friday night was the Lūʻau! This was hard to get into, even months in advance, so take heed there. It’s a 3-hour affair with kids’ activities to start, drinks and live music, buffet-style dinner (LINES), and then a big show the last hour to cap it off. It’s a high-quality production with storytelling, lots of costumes, more live music, and of course, fire-twirling action to cap it off. Gotta have fire. The kids there dressed as Moana made it extra cool.

You know something about Hawaiian music? It’s just slow and chill as hell. There is like zero popping Hawaiian songs. It’s not party music. Do not throw a party and only play Hawaiian songs, you gotta switch it up.

SATURDAY — Our flight out on Saturday wasn’t until 9:40pm, a gnarly red-eye back to Seattle and then Redmond. So we had another full day to kick about. We did some light activities like make our own light-up Mickey ears. But then: pool day! Random interesting fact: at the pool bar, they pin cherries to the wall so that the gecko lizards wandering around eat those rather than jump into the main cherry bowl. Bar Hackz.

We made extra effort to be super active and get everyone extra tired for the flight. Mission accomplished. Our last meal was lunch at Mekiko Cantina which did a damn fine job with everything, really. I’d be happy to eat their birria tacos, fajitas, and margaritas again anytime.

At the airport, on the way out, we killed our extra time at the Delta Skylounge there. While small, I think it had the best food for any Skylounge I’ve ever been in. We landed in Seattle at 6-something AM the next day, weary-eyed. Then a shellshocking 4 hours until our last little jump home. We weren’t feeling right again until Tuesday 辰.

10/10.

View Details

I ran into this problem 11 years ago and blogged it.

The problem is preserved in this video that shows a hilariously early version of CodePen and how some CSS transitions are firing early and causing the page load to look weird.

That old blog post used jQuery and old CSS prefixes, and someone just emailed me about it, so this is the lineup I’d use today if I had that problem:

```
Code language: HTML, XML (xml) ``` ``` window.addEventListener("load", () => { document.body.classList.remove("preload");});Code language: JavaScript (javascript) ``` ``` .preload * { transition: none !important; animation-duration: 0.001s !important; }Code language: CSS (css) ``` The transitions and animations will work fine after the page is fully loaded and the initial preload class is removed.

View Details

Nicholas C. Zakas talked about delegation in a newsletter a while back.

I remember my first experience with delegating was making the choice to hire people in the early CSS-Tricks years. I wanted to do it because entirely because of time. There was just too much to do and if I could delegate stuff, I could get time back. Theoretically even have more time to focus on things I’m better at. That happened. Worked out pretty well, all told.

Nicholas says there are two ways you might feel.

The first thing you may feel is a sense of grief — you are losing something that was part of your identity. You have been the go-to person for these types of projects and now you’ll need to give that up. That is hard. It’s normal to feel a loss at this point, and that feeling can make it hard to hand off that task. It feels like giving away a part of yourself to someone else, and you won’t be the one to have the fun implementing it or get the credit when it succeeds.

I get that. I have to mentally put on different shoes to feel it anymore though, as at this point in my career I simply cannot wait to give up tasks. Please, for the love of god, take my tasks. You can have the fun and the credit, I promise.

And then:

A second common resistance is related to the performance of the person you’ve delegated to: will they complete the task in time? Will they complete it with the same commitment to quality that you have? What if they get stuck and need to ask for help?

This one will be hard forever because it’s likely after delegation the buck still stops with you. If they don’t do things in time, you’ll have to step in. If they don’t do things well, you’ll have to step in. If they need help, you’ll be doing the helping. All of that is fine and the hope is things improve over time. But they don’t always improve over time, so a delegation attempt might end up a total waste of time and resources. Happens.

Do you know what the big hesitancy for me considering my first attempts at delegation? It was entirely money. Every dollar you spend delegating is a dollar you no longer have. If you give a kid forty bucks to mow your lawn, that’s easy. But even part-time employees aren’t forty bucks, they likely represent some major cash outlay that doesn’t just feel like a hell of a risk — it is a hell of a risk.

No pain, no gain.

Jane Fonda VHS tapes

View Details

I enjoyed this podcast with Susan Rogers who’s new book This is What it Sounds Like digs into why we like the songs we like.

Susan unpacks the seven dimensions of music and how they show up along a varying spectrum in every song. She explains how everyone has an individualized taste for the configuration of these dimensions, and that how closely a particular song aligns with this pattern of sweet spots accounts for whether you like it or not.

Part of me is like awwww bummer my super hip brain what with all its complex and esoteric tastes and be distilled into a seven-spectrum graph?? But there is all sorts of nuance to this. This is just an interesting way to think about it all and perhaps deliver a bit of insight into who we are.

I do have a fear of my musical tastes atrophying to the point that I only like the old stuff and this new stuff is just insolent noise. It’s already happened to some degree, but fortunately, I’m hanging on by a thread discovering a handful of new-to-me artists each year still that do it for me and I get quite into.

My favorite of all this was Susan’s first spectrum that she talked about on the show, and one that is the least possible to apply science to: authenticity. That is, how authentic the sound of the music sounds to you. Unlike some of the other spectrums, this isn’t a two-sided thing where some people like authentic music and others like inauthentic music. Everybody likes authentic music. The weird thing is that what sounds authentic to me might not sound that way to you and vice versa. That’s what has stuck in my brain. Like I can imagine some real modern country lover’s brain going man that guy just rhymed trucks with fucks, that’s good down home authentic stuff where my brain goes that’s just silly trite manipulative inauthentic garbage. And that same fella thinking did that cityfella just sing “I’ve come to test the timbre of my heart”? because he’s just singing fake inauthentic jibberish that I bet he doesn’t even understand and me going now that’s beauty in music — that’s authentically tapping into your emotions and turning it into melody.

None

View Details

Just my own personal experience in three acts.

A few years back I decided I should own at least a bit of a variety of cryptocurrencies. I’m a computer guy, I write about tech a little bit, I should have an understanding of it that typically comes from hands-on experience. I decide on a sum to “invest” that wouldn’t be a disaster if it all went bust, but if it went huge (doubled or more) we would really benefit as a family. Since then, essentially every story related to blockchain/NFTs/crypto/web3 is horrible. My investment? It was split across what seemed to be the obviously big-name coins. Big picture, the investment lost about 50% of its value and has hung out there. I’m not mad about my investment, all investments are a risk. I’m mad about how stupid this all is. How many years into this are we with no practical use cases for the world? How many resources have to be burned before this is seen?

I love generative art. It’s so cool. Art, generally, is cool, and moreso the idea that an expressive idea doesn’t need to be locked into one exact form, but instead can be more fluid, and have external input or randomness affect the form. CodePen has lots of generative art on it, because the web and code is a perfect medium for it. I saw some CodePen users trying stuff on fxhash, which is an NFT thing specifically for front-end technology generative art. I went through the rigamarole of actually buying some. You can’t just use any cryptocurrency, you have to use the special one that this marketplace uses. And you can’t buy an NFT by connecting to where you store your cryptocurrency, first you have to sign up for a “wallet” and then move the coins into the wallet and pay through the wallet. Weird but OK? Except for that of course leads to all the more places for vulnerabilities, which happen all the damn time. I did manage to ultimately own one, as silly and boring as it is. Then later got this other one by Varun Vachhar that is someone who I really do think makes cool work. But now if I look at my “owned” NFTs, it’s full of a bunch of them I didn’t buy — because apparently you can just send anyone an NFT they don’t want, and they can have code in them that does nefarious shit? What in the absolute fuck is that? How is that not the absolute top priority of all NFT-affiliated anything to entirely put an end to?

Just this week I saw Charlotte Dann release a project called Ceramics that’s literally the coolest generative art I’ve ever seen. I was a ceramics guy in college, getting my BA largely focused around that. This work is incredible! All my old ceramics buddies agreed. It evokes real clay, porcelain, and glazes, incredibly well. Charlotte did an art auction thing for 300 NFTs of this work, randomly generated. At this point I’m fully disenchanted with owning any crypto, so I thought this would be a cool way to spend some of it supporting Charlotte a little and then fully dip out. I readied myself for the auction, but I just missed getting in on it. All 300 sold out before I got the chance to snag one. No trouble, they’ll be on OpenSea later, I’m told. I bite the bullet and get an account there and wire up my wallet and whatnot. I search for “Charlotte Dann”, find the project there (screenshot), and buy one. Well that was my mistake (it’s not Charlotte’s for the record), this wasn’t Charlotte’s actual project, but some criminal grifter fuck selling fake nothing. Actual nothing, by the way. I don’t even own the fake thing I bought, it somehow was entirely removed from my ownership after purchasing it, instead it was replaced with some weird spammy garabage that even OpenSea knows is garbage and hides it (screenshot). Plus, OpenSea has no record of this transaction, even though, uhm, I obviously bought it on that platform? My “wallet” does have the record. I just can’t even. What a shitshow.

Literally every experience I have in this world is gross at best and criminally evil at worst. Who it benefits that actually needs the benfefit is vanishingly few. I’m sorry I even dipped a toe.

View Details

I kinda like tmux. A terminal multiplexer. Hell yeah. What it does, anyway. Less so how it looks or works. 😬

Toss a little tmuxinator on there and now the config is a tolerable incantation of yaml.

`tmuxinator start codepenCode language: Bash (bash)` (Or, probably, some shell script that sets things up and then calls that command.)

Away we go! The chances of a large modern project getting away with just `npm run dev` is slim. Chances are, you need lots of terminal stuff going on. Your web server over here, a build process over there, another different build process there in the corner, some legacy system needs to spin up, yadda yadda.

You can’t tell your developers “Just run these 12 commands, in order, oh and make sure #5 is fully spun up before you run #6, all in separate terminal tabs, and that’s your dev environment”. So, smash all the commands under one roof with a little config programming, and bingo-bango we’ve got a system that scales out to a team.

But why does it have to be so ugly? 😭

The bottom bar with awkward padding. In the same font as the rest of the terminal. With awkward numbers by the tabs that you really don’t need to see every second. With split panels labeled also in the same font which makes it hard to see that it’s just a label, and are unclear that you can resize but you can. I generally dislike the UI/UX of terminal output, but within tmux it’s extra sloppy. And don’t get me started on the copy-and-paste situation. It just does have to be ugly, I guess. It has to emulate multiple terminal windows/tabs with ASCII. It’s impressive that it can pull it off, really. And, crucially, it doesn’t matter what terminal software anybody uses. The UI is built into the output of a single terminal.

What’s a shame is that many terminals already support the concept of tabs and split views. It’s very natural in iTerm, a favorite of many:

Real tabs and splits! Like real software!It’s probably way too tall of an order, but maybe terminals could detect a tmux situation and convert the UI into a native UI situation? Yeah? Good? Ship it.

Anyway I was just thinking about this because I was daydreaming in Figma the other day about what I wish our own little tmux setup looked like.

View Details

I got disenchanted with Pocket Casts last month after the incessant crashing in Car Play. And I figured, gosh, Apple Podcasts is still a super dominant app for listening to podcasts, maybe I should just switch to that. I’ve always been attracted to that idea of “running a stock machine” that is to say not being hyper customized with everything and just using technology as close to how it comes out of the box. Apple Podcasts is in that category, as a stock app on iOS.

But now I’m disenchanted again with Apple Podcasts. 😬. Obviously it works great for people based on how popular it is and it’s 4.5 star rating in the App Store, but I couldn’t do it.

Short story:

Too much discovery. 3 of the 4 main navigation items were for finding new podcasts, which is something I don’t care to do that often. The library tab doesn’t just show you a list of shows you “follow” (don’t love that verbiage), instead that’s another tap away under “Shows”. Library is the most useful tab and most of what you see there is not useful. “Saved” is not useful to me, fix the queueing. “Downloaded” is not useful to me (everything should be downloaded across the board with options on how to save what). “Latest Episodes” is good but that’s just a sorting option for Shows. Then it redundantly shows latest episodes below that anyway. So strange.

There is kind of a listening queue, but it doesn’t work well for me. It doesn’t exist at all if you aren’t playing a show. Once it exists, you can add to it only via Play Next and Play Last commands under a kebab menu. Getting there feels a little buried under Listen Now then a See All link tucked under the user avatar if you’re scrolled all the way up on that page. You can’t re-arrange the shows there, and you can’t swipe shows away.

I caught it AirPlaying to a weird location and couldn’t figure out how to turn that off in a moment of panic and it highly annoyed me.

I can subscribe to paid bonus stuff, but those paid-for shows can’t travel with me to other apps.

There is other little stuff, but enough was enough and I couldn’t take it anymore.

The obvious next choice is Overcast, and now I’m two weeks into that and really quite liking it. The customizable homepage is clever (and has smart defaults). It doesn’t crash. I really like the “In Progress” collection. I like the ability to essentially set “download all shows, keep at most 5 unplayed, delete them as I finish them, and let me swipe them away anywhere easily.” It’s taking some getting used to but it’s seeming like a winner.

Ya know what weirds me out though… on all three now (Pocket Casts, Apple Podcasts, and Overcast) whenever I drive into my parking garage at work, it stops playing the podcast. That would make sense if it was streaming the show (loses internet), but I always set my shows to download, not stream. All three apps, downloaded shows, always hiccups and stops playing the show when I drive into the garage. WHY GOD. It’s a downloaded audio file — just play it!

View Details

When it’s hot and sunny outside, I can do computers inside in the nice air conditioning.

When it’s cold and wet outside, I can do computers inside with the lovely warm heat on.

When I’m sad, I can do computers and find something to cheer me up.

When I broke both my elbows, my wrists still worked, so I could position my laptop on my lap just so that I could do computers just fine.

When I’m laid out from the flu, I can still crack open my laptop and do little stuff. I don’t find it very taxing to do computers even while sick.

When I’m starting to feel a little bored, I can do computers and definitely find something to zap away that boredom.

When my family is on a long drive, if I can take a turn not driving, I can pair my laptop to my mobile internet connection and do computers right from the car.

I will computer in a box. And I will computer with a fox. I will computer in a house. And I will computer with a mouse.

Is it a blessing or is it a curse?

Most jobs are not this way. You can’t be a nurse with a mild flu. You can’t teach yoga with a torn leg muscle. You can’t be a line cook from the pool bar.

View Details

They are just better than their non-logical counterparts. Because:

They are more, ahem, logical. They make CSS into a more coherent and interrelated system that is easier to learn and reason about.

They ready websites for language translation.

So since they are better and support is green across the board, why aren’t they taking over all usage?

Old dog; new tricks. — People gotta know about them and understand them. Then come to their own conclusion that they are better.

Legacy projects. — Most people work on old/existing things. Changing all these properties over at once doesn’t feel like a particularly good use of time on most projects. That work will be error-prone. The alternative to an all-at-once move is to slowly move usage. That puts you in a tweener stage of using both syntaxes, which feels sloppy and extra error-prone, because the properties aren’t one-to-one (e.g. `margin-inline-end` will override `margin-right` in LTR, but as soon as you’re in RTL, they become different).

Conflicts feel weird. — A property like `padding-inline` doesn’t exist in non-logical-land. So will the value set in `padding-inline` override a `padding-left`, say? Or will `padding-left` win over what is happening in `padding-inline`? I don’t know, lemme test… it appears that whichever is declared later in a block wins. I guess that makes sense in the same way `padding` would override `padding-left`, it just feels weird as they aren’t one-to-one. I suppose, like logical properties themselves, you just have to wrap your mind around how it works: if a non-logical and a logical property currently affect the same thing, it’s a specificity (including source order) game.

The rollout doesn’t feel totally done. — Not all directional things in CSS are ready. For example, you might be setting a gradient in which to set text over top of, but directional linear gradients don’t have any logical values yet, it’s still `to left` and `to bottom` and all that still. Jeremey noted several more:

`translate` is still an X/Y thing.

`getBoundingClientRect()` doesn’t return logical properties.

`aspect-ratio` is width/height not inline/block.

… and also that you can’t use a lot of comfortable shorthand because they map to non-logical values.

I don’t know that I have any killer advice here. I know that my own brain has done OK in flipping modes and making me think in logical properties now. And yet, I don’t have any production sites that are 100% logical properties. Despite it feeling weird to have tweener CSS, that’s probably reality for some years. Except for sites that are heavily translated — all y’all should be all-in.

View Details

Features like:

Native CSS Nesting

Logical Properties

text-decoration-*

OKLCH

text-wrap: balance;

Inline SVG background as a data URL

Demo:

CodePen Embed Fallback

View Details

I’ve been calling it sem-EYE-glue-tide in my head for the last 5 weeks, but I heard it on a recent podcast it’s pronounced more like it’s spelled: seh-MAH-glue-tide. Much smoother.

Anyway: 258. Down from 270 the day I started Ozempic.

A decent 2lb-per-week slide down. Feels sustainable. 250 is a good goal for me. I’d love to blast right past it. But, long-term, drugs or no drugs, I want that to be a high-water mark that kicks me into gear if I go over.

The mental impact of Ozempic, for me, is revelatory. It reminds me of when I first read Quiet and learned a modern framework for thinking about introversion. Odd as it sounds, I thought I was mentally broken for a long time. Just for something as simple as a desire not to hang out as some friends did. I thought that wanting to go home and do nothing rather than go to an after-party was a crossed-wire in my brain. Maybe chemical depression like my grandma had? Nope, just introverted like half the damn world. Thanks, Susan Cain.

Introversion doesn’t need to be cured, and neither does being fat really, as a general rule. But I want to change. I feel better lighter. Like I wrote:

… any time in my life I’ve been able to rein in my eating and couple it with rigorous regular exercise, my body responds and I can get myself into what feels like a healthy place. Maybe a little fat still, but workable. Fat fit. Life full of possibilities.

The reason I’m not the weight I wanna be is because of … something inside me. Paul Ford’s latest in WIRED explains it in a way I relate to:

… it’s a side effect of what I am, which is insatiable. Literally: I never seem to feel full. In practice this means that at certain times of day, I watch in horror as my body reaches for the cheapest, easiest calories nearby—out of the pantry, out of a vending machine, at a party. I scream, “Stop!” But the hand keeps reaching.

Too Big to Fail (all I can find is this Apple News link, sorry, I read the paper version like an old person)

The way I eat isn’t normal. I’ve never been normal so I can’t tell you normies how your brain works, but I imagine it’s something like: “I’m hungry so I think I’ll have a sandwich.” My brain goes something more like: “I have to drive across town at 2:30pm today. Kick ass. I’ll stop at Subway and get a footlong sub meal and jam it down my throat. It’s gonna be so good, I can’t frigging wait. Plus I need to get gas which is a killer opportunity to grab a huge bag of gummy bears.” Naturally, between a full lunch and a full dinner. If that sounds like I’m kidding, if anything, I’m understating it.

I don’t usually regret those choices and behavior. I have a little tiny “you probably shouldn’t do that” voice that’s easy to ignore. I don’t sit around feeling bad about it later. But I do have a wish: I wish I wasn’t like that. I wish my brain didn’t work like that. I wish I could just eat like a normie.

That’s the beauty of Ozempic for me, so far, here on week five. It changes my brain. That’s what happens to people like me on this drug.

Paul Ford again:

I went alone that night to a Chinese restaurant, the old-school kind with tables, and ordered General Tso’s. I ate the broccoli, a few pieces of chicken, and thought: too gloopy. I left it unfinished, went home in confusion, a different kind of sleepwalker. I passed bodegas and shrugged. At an office I observed the stack of candies and treats with no particular interest.

Decades of struggle—poof.

The drug doesn’t completely obliterate hunger or the ability to enjoy food though, which feels like a 2nd miracle balled into it. I can still eat a gummy bear and be like “hot damn that’s a good gummy bear” — like I always have — and yet not eat 250 of them in a row. Score.

View Details

I just noticed this morning my Apple Watch has a slick face where thinking with the knob makes the numbers on the clock face stretch wide and narrow, to rather extreme degrees:

That’s the San Francisco font surely, which I recently discovered was a variable font as-installed on macOS. That gave me a little inspo to try and do it:

CodePen Embed FallbackThat will probably only work right if the `system-ui` font maps to San Francisco on your machine. Feel free to swap it out for a real variable font hosted somewhere, that’d be neat to see. I was thinking of trying to put in a test for that. I can see the Rendered Font in Chrome DevTools and see it’s `.SF NS` there:

Unfortunately `document.fonts.check("12px '.SF NS'")` is `false` (which might be a bug, but not entirely sure).

If you can’t see the effect on the Pen, well, it looks like this:

I was tempted to just set inline styles as you fiddle with the `input[type="range"]` there, but I decided to reach into the parsed `document.styleSheet` there and fiddle with the value there, which was a fun way to do it. Not sure I’ve ever done that before. Feels a little fragile.

View Details

The trick is essentially the same as the gradient text trick. Make the letters act as the mask, and set the background to a gradient. It’s just this time, the gradient will be solid alternating colors.

`.zebra-text { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient( to bottom, red 1lh, blue 1lh, blue); background-size: 100% 2lh;}`Code language: CSS (css) The trick is the `lh` units. New! Line-height units! Cool!

Just Chrome so far, so best to wrap this kind of stuff in an `@supports`:

`@supports (height: 1lh) and (-webkit-background-clip: text) { .zebra-text { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to bottom, red 1lh, blue 1lh, blue); background-size: 100% 2lh; }}`Code language: CSS (css) CodePen Embed FallbackI don’t know that this was particularly doable without the `lh` unit. You could probably do it on a one-off basis by figuring out some magic numbers, but it would be terribly inflexible and prone to breakage. I also wish the `-webkit-` properties felt more stable.

Not BulletproofWhile `line-height` as a unit is pretty neat and does have a niche use here… it’s not bulletproof. That is, the space between lines isn’t solely dictated by line height.

For example, Šime pointed out that just `<sub>` and `<sup>` can start to screw it up.

Imagine how much worse you could dork it up with an `<img>` sitting inline or something.That got me thinking about this other post idea I’ve been noodling on, which is just how much “secret forgotten knowledge” can get tucked away into CSS. Just all kinds of little stuff that probably should continue living on a particular site, but is at risk of being cleared away in redesigns. One of those things is related do `<sub>` and `<sup>` and it’s this little snippet that normalizes `line-height` even after you use them:

`sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}sub { bottom: -0.25em;}sup { top: -0.5em;}`Code language: CSS (css) I love that. I don’t think those elements should mess with vertical rhythm. Secret hidden knowledge that’s easy to lose track of in CSS.

But anyway if I add that and look in Chrome (the only browser supporting this cocktail of CSS), I get…

The sub and sup elements have disappeared and I don’t really understand why.Anyway, when a rendering engine luminary like David says it’s problematic, it is, but hey danger is my middle name1.

1 Actually it’s just John.

View Details

A little CSS helper app from Henri Parviainen. So you can quickly design up some beefy ass scrollbars like Tim Burners Lee probably intended.

I prodded Henri to add the standardized `scrollbar-color` in addition to the more fancy `-webkit-` ones as well as use the custom properties.

I imagine, one fateful day, the standardized properties is all we will have. And today, Firefox, rightfully, only supports that. So now the output has both, even though `scrollbar-color` is required to be put on a specific element and supports less.

If you visit in Firefox, you’ll get a big warning and less supported features. My vote would be to just show the whole app and let it show what it shows for the example scrollbar.

View Details

It’s lookin’ good kids.

There’s one use case that I find very well suited for Copilot, which spares me tons of tedious work – unit testing.

Yanis — Using Github Copilot for unit testing

I’ve seen that in my own test writing. GitHub Copilot has surely seen so many unit tests it’s really quite smart about helping complete them. Sometimes kicking it off with a descriptive comment is what it needs.

But taking it another step further, GitHub Copilot Labs now has a straight up button to generate tests.

TweetTabnine is in on this exact same game, where you just click a link and get tests:

This isn’t directly related to AI, but I would add that snapshot testing is a test I’ve been enjoying, whether a built-in feature of a testing library or just conceptually how you’ve constructed your tests.

For example, at CodePen we have tests for checking the code that processors spit out. In a recent setup, we have input for them in a `src` folder, and it processes that and checks against output in a `dist` folder. But the clutch part is that when the test runs it outputs a `dist_tmp` folder. So if a test fails, you can “dif” the `dist` and `dist_temp` folders and see what differences made the failure. If the change is expected or non-important, you can just trash the `dist` folder and rename `dist_tmp` to `dist` and the test passes again. This is like hitting an “Accept Updated Snapshot” button that a framework might provide.

Snapshots also tend to capture the full output of a function, rather than asserting against one small bit. That is helpful for more comprehensive coverage, which I also like.

I was thinking about all this after reading What if writing tests was a joyful experience? which calls them “expect tests” and has the same kinda vibe.

View Details

The best one URL, that is.

That’s tricky.

For ShopTalk Show, I could give you an Apple Podcasts link, that’s a pretty popular choice:

https://podcasts.apple.com/us/podcast/shoptalk/id493890455

But not everybody uses Apple Podcasts. You’ve got your Pocket Casts people, your Overcast people, your Spotify people…

https://pca.st/shoptalk

https://overcast.fm/itunes493890455

https://open.spotify.com/show/2PUoQB330ft0sTzSNoCPrH

… and a lonnnnggg taiillllll of others. Most of which have their own URL they’d love for you to use. That leads to the pile-o-buttons approach:

That’s not terrible, but that’s a decent amount of onus on every individual podcast to maintain the everchanging pile.

I’m gonna say the right answer here is Plink.

I’ve seen some other options, but they are provided by companies that have some clear skin in getting you to use their own podcasting hosting or analytics or whatnot. What I like about Plink is that it’s indie software that just has this one job to do. Your satisfaction as a podcast maker is their incentive.

So you sign up for a podcast and get a page like this:

So that’s one URL you can send people to. Nice.

But one step cooler, you get a “smart link”. Here’s ShopTalk:

https://plinkhq.com/i/493890455

That works some kinda magic on mobile devices that automatically opens the podcast in whatever podcast app they have installed (and perhaps prefer? not sure where the magic stops). Double nice.

View Details

There are two major plugins for nesting in PostCSS that I’m aware of:

postcss-nested — Do it like Sass

postcss-nesting — Do it like the spec

There is a lot to unpack here!

I think many people think of PostCSS as a “future syntax CSS processor”, probably due to the ease of setup of using postcss-preset-env, a plugin that is essentially a big group of plugins designed to mimic what of “future CSS” that it can. This is a precedent set by Babel which has worked out pretty well for JavaScript. So indeed, postcss-nesting is the one in postcss-preset-env, and that makes good sense.

One bit of trouble there is that native CSS nesting is fairly turbulent. It’s just been stable enough for Safari and Chrome to ship it in preview browsers, which is not really proof that’s how it will stay.

I think I like how it shipped. It’s easy to learn and teach, as Jen says:

In summary, CSS Nesting will work just like Sass, but with one new rule: you must make sure the nested selector always starts with a symbol.

Along the way, there were all sorts of things considered and tested. Using `@nest` was a big one. Double `{{ }}` was considered. Required `&` was considered. I don’t even know what all was just talked about, what made it into versions of the spec, etc. Looks like postcss-nesting has only been around a few years, but it’s on version 10 already, so it’s undergone plenty of change.

So you could update your packages, and suddenly your CSS won’t compile anymore (or less intense: you start to get compilation warnings) because the way you’ve authored it is no longer what this plugin supports anymore because the spec has changed.

Is that what you want?

There is not a right answer.

That sounds awful to me. I hate that kind of hamster-wheel work of updating code that is no better than how I left it, and maybe worse because I’ve hand-poked it and could have inadvertently screwed it up. But… maybe it’s for the last time. Maybe now the spec is done. Maybe the processor won’t change again because it is mimicking native CSS. Maybe the next time you touch it is removing the processor because you don’t need it anymore. That removal part does sound kind of nice.

The other path, the postcss-nested path, is not beholden to the spec. It’s a nesting spec all to its own which is not intended to ever be removed (like Sass). You don’t wake up to a version change that breaks it because the demands on it aren’t the same, there is no shifting sand under its feet. That sounds nice too. You’re stuck with the tool but it’s stable.

View Details

Here’s mine:

I mentioned it on Social Media.It’s absolutely nothing compared to Ethan’s famous bukk.it, but it’s mine.

I chucked this directory online just a month or so ago after I was doing some digital file management. I had a couple of huge boxes of cases full of burnt (burned?) CDs and DVDs. There was a bunch of live music (a ton of Phish, which is now easy to find online), burned copies of random Netflix rentals (Stargate Season 2 Disc 3!), and just random files I’d burn so I could delete them off my main machine (probably).

Nowadays, storage is cheap, so I started pulling the data (that I actually wanted) back onto my main machine, organized it, and chucked it all in Dropbox.

During all that, I found a folder called “very important images ok” that had these files in there. So — what the heck — might as well FTP those suckers up to this website! I also remembered that the post Display Styled Directory Contents on CSS-Tricks was just super weirdly popular, and figured I’d give it a lick of CSS paint just for fun. Unfortunately, that post assumes an Apache web server, and this site now runs on Nginx, so I had to learn some new tricks.

First, directory listings need to be directly turned on:

`location /important/ { autoindex on; autoindex_exact_size off; autoindex_format html; autoindex_localtime on;}`Code language: Nginx (nginx) Then if you want to apply any style or other modifications, you can add “before” and “after” documents that will be appended:

`location /important/ { ... add_before_body /files/nginx-before.txt; add_after_body /files/nginx-after.txt;}`Code language: Nginx (nginx) I used those two files to add basic HTML scaffolding and inline styles:

I was tempted to use a `<script>` to wrangle the markup into something nicer than a friggin’ `<pre>` tag with anchor links (maybe a nice sortable table?), but I lost steam.

View Details

From Dave’s So you want to make a new JS framework:

You need say it’s “fast”

This requirement applies to nearly every tech product. You absolutely gotta tell people it’s fast, but, plot twist, these products often aren’t particularly clear about what that means. Picking on frameworks specifically, some frameworks pick one possible meaning, toss a chart in some announcement context, and call it substantiated.

What could it mean?

The amount of code it is is relatively small compared to other similar technologies, thus it downloads faster and has faster cache restores than competitors.

The build process (or other public functions) runs faster than competitors.

The complete time from saving a file to seeing changes in the browser during development is faster than competitors.

It updates the DOM faster than competitors during data or state changes.

Users can do the job of coding a website faster than using a competitor.

The production website is faster for users than it would be using a competitor.

A person who produces content for the website could produce it, get it approved, and ship it faster than they could with a competitor.

What else might it mean? (I’d love to flesh out the list, plz comment below.)

I’d like to see more substantiation of that fast adjective. Frameworks! What do you mean exactly? Where is the data? Is the data refreshed on each release? Is the data gathered from different scales of usage? Is there data from The Real World?

— Chris Coyier, World’s Fastest Blogger

View Details

Good idea! It’s a clear need and offers a clear value proposition. Best of luck. You will have a little competition though:

Arengu

Basin

FieldGoal

FormBackend

Formcake (nice CodePen demo, be like Formcake)

Formcarry

Formkeep

Formspree

Formstack

FormSubmit

form.taxi

FormX

Getform

HeroTofu

HeyForm

Hyperforms

Kwes

Pageclip

Paperform

Smartforms

Tally

Web3Forms

And I bet there are several more at this point, I haven’t updated my list of these in a few years.

I came up in this industry working at companies solving “I need a form on my website”, Wufoo, then SurveyMonkey, which are still very much alive and kicking and great choices as well. Not to mention other heavyweights like Google Forms, Jotform, Typeform, etc, which all work fine on HTML-only sites, and vendor-specific solutions like Netlify Forms.

How would you break in? I wouldn’t try to compete on price. Too much competition for that, at prices that are already fairly low. I’d probably try to compete on marketing, in the deepest and widest sense of that term. Find a way to make people think about your product any time they think about forms. Advertising, Content Marketing, Developer Envagelism, Social Marketing, etc. It’ll be a hell of a hill to climb, but you can do it if you’ve got a decade to spare.

What worries me though, and what would make me not want to play the game at all, is that you’ve got competition that has built-in advantages over you by owning the platform. Netlify’s marketing for Netlify Forms is, just put a `netlify` attribute on the `<form>` and it’s done. They can make that work because they are the platform and they can do things in the build process that you’ll never be able to do. Be the platform might be the lesson there.

View Details

Hidde de Vries’s Data-informed flex-grow for illustration purposes is a walkthrough of some of the techniques he used to build his bookshelf backgrounds.

There didn’t seem to be an isolated demo so I made one for myself:

CodePen Embed FallbackForgive me the sin of using React. Just seemed like a quick way to make a loop to produce elements and apply randomized property values at the same time.

View Details

This seems new? https://podcast.adobe.com/ Looks like it’s a “labs” experiment (Project Shasta) growing up into a more full-blown product, a whole new vision for podcasting tools.

I like it. It fits with an overall vision that Adobe supports the creative endeavors of people. I’ve requested access but haven’t gotten it yet, so I haven’t played with the complete product yet.

There are two free tools that anyone can use in the Beta, though:

Enhance speech allows you to upload an MP3 or WAV and it’ll fix it up for you (1 hour / 1 GB max). The results are pretty badass 🤯:

I'm sorry but WHAT?! I'm running all my sound through Adobe Podcast from now on. pic.twitter.com/wF9Cjrl6BB

— Valentina Vee (@valentinavee) February 21, 2023

The other is Mic Check, which has you say a single sentence into your microphone (“How is my microphone setup and placement?”) and lets you know how it sounds. It’s apparently trained on “thousands of hours” of audio tests. Here’s how the results look:

Mic Check is a tremendous idea. It’s best to get the best quality you can up-front rather than have to manipulate it later. This might be creepy, but I think I’d like to see a product like this running all the time, say as a menu bar app. I would get a warning when any of the checks are bad.

Dave has mentioned this to me several times over the years on ShopTalk: there should be a quick way to check if you’re audio is correct. The right source, the right gain, no weird sounds coming through, etc. This is the closest I’ve seen.

It looks like the complete tool will integrate these things, but be much more, like an actual recording studio. Sounds like you invite people and record together ala Riverside or Zencastr, but it’s doing more, like transcribing the audio (including who is talking when which is wild) as soon as it uploads. Also: fancy cleaning up of audio (as seen above, and automatic removals of uhmmms and ahhhhs) which means they get to call it “AI-Powered” and get their AI merit badge.

The editor looks very innovative, allowing you to drag in audio clips to splice in, in between people talking or in the background. Also: editing the text itself to edit the audio (like if you remove a word in the transcript, it plucks it out of the audio). There seems to be a whole category of tools that can do that lately, but it feels more like a feature than an app, so it’s nice to see it part of a larger whole.

I welcome a new generation of high-quality audio production and editing tools!

Here’s a related thing I think about. Where is the best place to do audio manipulation? I think there is a big distinction between live audio and audio that is only recorded for later editing. When audio is live (on the radio! a concert! a zoom call!), it makes sense to do whatever you can to make sure it sounds good right away.

We had a ShopTalk Show guest warn us they were using Krisp to fix up audio while on the call. It made me wonder… is that good to be doing right now? Or should we be getting the audio more raw so it can be manipulated later? It kinda felt like Krisp is good for live audio but perhaps not right for recorded audio. You can always apply manipulation later, but if it’s recorded manipulated up-front, you can’t undo that.

I also used to have a dbx 286s, which I was told was awesome for podcasting at the time. It would do stuff like de-ess sound, help with background noise, prevent peaks, and whatnot. But it was audio technical debt. If the sound was live, that would make sense, but it was one more thing messing with the audio that was intended to be edited later. If the dbx settings were off, they couldn’t be fixed in post. So I have since stopped using it, as anything it could do could also be done in editing.

View Details

One hint something is weird without viewing source: you can’t select any of the text.Dan Q’s demo is pretty fun. You’ll see a white page in anything but Firefox. But in Firefox you’ll see a webpage-looking webpage only if you View Source you’ll see nothing at all.

This is a classic CSS trick that relies on the fact that Firefox lets you apply CSS to a page by including it as a Data URL in a `link` response header.

So that allows you to add CSS, but if there is no HTML, what are you applying it to? Well, browsers automatically inject some HTML, as long as the response is of `Content-Type` `text/html`. To the tune of `<html><head></head><body></body></html>`.

So now you’ve got a number of elements to style. The classic pseudo-elements `::before` and `::after` do the rest. If the four you get from body & html aren’t enough, you can always un-hide the head (e.g. `head { display: block; }`) and get two more.

Just silly really, but I suppose if you really needed to add some Firefox-only CSS, you could inject it via header.

View Details

After (a lot?) of years using Pocket Casts, and thinking how cool it is that it’s fully open source now, I’ve moved off it.

I love podcasts, but the only time I really have to listen to them is in the car (CarPlay), and my trips are usually 10-15 minutes (I’m a 1.5×-er). Pocket Casts just crashes a ton. Nearly every car trip I put a podcast on, it’ll crash once. And I can’t just re-open it and hit play again, it’s forgotten where I was. It’s just untenable.

I feel like I should try Overcast. It’s the other mega-popular and fairly indie podcast player. I wanna like Airshow but I haven’t been able to get it to work (literally shows a blank screen when I open it) and from what I understand is perhaps a bit under-featured for what I like.

So I’ve switched over to Apple Podcasts. Manually, which ruffles my API-loving feathers. I feel like Apple deserves another shot at it. We can thank Apple for the initial success of podcasting, and for not screwing it up over the years (unlike Spotify — “exclusive” podcasts can suck it). Maybe the apps aren’t great, maybe their few attempts at innovation (e.g. subscriptions) aren’t hitting home, but all in all, they’ve done nothing but help the podcasting world and have done it for “free” (read: an investment in keeping people on Apple hardware). The Podcasts app, for both iOS and macOS, doesn’t cost anything and helps users discover, download, and listen to shows.

ShopTalkShow statistics have Apple Podcasts as the clear front-runner.The main reason I’m switching back is that I also trust Apple to have an app that doesn’t crash every day. Not that they make perfect software, but no way are they going to have a podcast app that crashes every day for users just trying to listen to podcasts. It would get fixed (says my brain).

I’m only a week or so in, and it’s… fine. I don’t like the interface as much as PocketCasts. There are too many discovery features (which I shouldn’t be complaining about because discovery is certainly an issue in podcasting, but here we are) and less emphasis on my chosen shows and my listening status of each. It shows the wrong artwork for shows sometimes. You can’t swipe away “subscription” episodes on shows that offer them but you don’t subscribe. It doesn’t auto-archive old shows as well as I’d like. It doesn’t have a listening queue feature. It doesn’t offer to sync with other apps. It doesn’t have OPML export. So yeah, not great, but I’m gonna give it a shot for a while anyway.

I don’t actually use the desktop app much, but I might start since the syncing works pretty well.One minor thing I like about Apple Podcasts is that when I “follow” a show, it automatically assumes it should download copies of those shows. In Pocket Casts, I had to flick a setting to ask it to do that rather than stream the shows by default. Even when I did download the shows in Pocket Casts, there was this quirk where if I pulled into a parking garage and it disrupted the internet connection, it would stop playing the show seemingly until it had a bit of internet again. I was hoping Apple Podcasts would not have this behavior (you already friggin downloaded the show, it’s not streaming WTF) but it does the same thing. I just don’t understand it.

View Details

A Christian Heilmann project called Dear Console…. There are 18 in there right now and they are all pretty neat.

I’ll re-post one (submitted by Pankaj Parashar) I thought was very interesting as I’ve never heard of the main API being used:

`copy( window.performance .getEntriesByType('resource') .filter(entry => entry.renderBlockingStatus === 'blocking' ) .map(({name}) => name) .join('\n'))`Code language: JavaScript (javascript) On this site:

:sad-trombone:

Aside from my hand-authored theme CSS, all the rest of that is just WordPress add-ons that are essentially Developer Experience trade-offs. For instance, the next file down is the CSS that WordPress loads to support blocks. I want that there because it makes sure any block I pick is rendered largely as intended (columns, chosen colors and sizes, etc.) In a perfect world though, it would probably only load a subset of CSS of the blocks in use on that page. Or at least could be combined into the main theme stylesheet to reduce a request (assuming that still matters a smide).

I have some doubts I’m using any of those internationalization (i18n) resources, so those should probably just be removed. And the polyfill-related stuff is likely the same deal.

I used to use the WordPress plugin MinQueue to deal with this situation, but it hasn’t been touched in 9 years and that’s just a little too abandoned for me. What’s the modern MinQueue?

View Details

As a hot take, it’s blasphemy that Disney even made a “2” of The Fox and the Hound (in 2006, after the 1981 original). Let alone made it non-canon. (Are we supposed to believe that in the time gap in the original movie between Tod and Copper’s childhood and the ending with the whole bear chase scene that they ran off to join the circus with an acapella dog howl-singing group and are back?)

But ya know what: it’s kinda good. It’s a fun plotline, the music is catchy, and whatever it’s just eminently watchable. What really shines is all the whacky southern sayings. If you say these in an American Southern accent they sound like folk wisdom:

If that ain’t right grits ain’t groceries

Don’t just dance on your new carpet put a hole in it

Slower than an iron toad

Busier than two mice in a cheese jar

As useful as a milk bucket under a bull

Also, the main dog is Patrick Swayze which is something.Reminds me of a friend of mine’s dad when describing rich people:

That boy rich enough to burn a wet mule

View Details

Dave and I did a little podcast crossover and joined Brian Kardell and Eric Meyer over on the Igalia Chats show. They are nine-parts deep on this series so far talking about Web Ecosystem Health.

It’s a fascinating topic so I’m glad they are making it a whole series rather than cramming the idea into one show.

One of the overall considerations is that it takes One Shitload of money to make and maintain a browser. As we’ve experienced several times over the past several years, companies dip out on doing this, including companies as big as Microsoft.

It’s easy to get really bummed about this. Consider how Google funds a very high percentage of the entirety of Mozilla. Google could snap its fingers and end Mozilla. (Dave thinks they won’t because Mozilla is a monopoly shield, which is a great theory.) Then we’d be down to two major engines, which share a strong lineage already (Blink and WebKit). And as too-big-to-fail as it seems like Apple and Google are, massive shakeups happen, especially in tech. Browser teams with massive budgets are cost centers, not profit centers. It’s not likely they would last until the bitter end if either company had a strong downturn.

But there are bright sides! I’ve said before I don’t think it’s really even possible to build one from scratch, as the effort, money, and time would be astronomical. But I’m wrong about that, as Servo is doing just that. And it’s nice that all three major engines now are open source. The ball on any of these can be picked up again, should it be dropped.

View Details

Tina Roth Eisenberg the other day:

I get way too much email. Reading newsletters in my inbox has never been the right context for me to actually enjoy content I am subscribing to. Looks like I am not the only one who is struggling with a workflow that makes sense for consuming newsletters. (Dennis’ Crowley’s Tweet above) I am asking you, my readers, how do you make sure you actually get to the newsletters you subscribed to?

I don’t hate the idea of email newsletters, but actually reading them in your email inbox just ain’t the way for a lot of people, myself included. Many people’s email inbox is already a source of anxiety or at least gives off a feels-like-work vibe which is usually not what you want to bring to reading a newsletter you subscribe to for possibly non-work reasons.

My way, and a suggestion if I may be so bold, is to set up your own reading system. I see a couple of comments on her blog post suggesting Feedbin, and I also agree there. It’s good (📢). There are plenty of alternative feed readers, but I bring up Feedbin specifically here again because it has a specific feature of not just reading RSS feeds but email newsletters as well. Feedbin provides a unique email address for you, and if you use that to sign up for the email newsletter (only do that if the newsletter doesn’t have an RSS feed directly), the email will come into your Feedbin and you can read it there.

You don’t have to use Feedbin.com itself as a reader, you can bounce around to different apps thanks to Feedbin’s good APIs and other apps integrations with it. I like how you can just look at the emails as-designed in Feedbin’s app though.There is one additional trick though.

Rather than using the Feedbin email address directly (look under Settings > General > Sources for yours), use an intermediary email address. I set up a Gmail email just for this, and have it auto-forward to my Feedbin email. Then when I sign up for a newsletter, I use:

`new-secret-email+specific-newsletter@gmail.com`Code language: JavaScript (javascript) The `+` sign in the email address is unique to each newsletter. That way, if the email address ever gets leaked/sold/etc and spam starts arriving at it (it’s happened to me), you can set up a rule at your email provider to auto-delete email that comes to that specific +scoped email. Otherwise, if your Feedbin email itself leaks, and you start getting spam at it, there is no way to filter on the Feedbin side and you’ll be stuck looking at spam until you rotate the Feedbin email, which means you’ve effectively unsubscribed from every email newsletter.

View Details

That’s fake exasperation.

Yes, they do! I’m just not terribly surprised.

If someone were to put me in charge of MDN and finding a business model, I would have used advertising as part of it long ago. I think it can be done tastefully, non-invasively, and possibly even usefully. So far, it looks like they are just barely scratching the surface with one little display ad.

The entire sidebar, including the ad, disappears at a < 1200px breakpointRight now it looks like it rotates between Frontend Masters, GitLab, and MongoDB only. I’m told Kevel is involved somehow, which I’ve never heard of before or used, but looks like a tool to build your own ad platform. They might be direct deals, but I’ve heard BuySellAds might be involved too, although I can’t see evidence of that right now.

There is no cookie banner (thank jeepers), so no third parties are getting any cookies. Most advertisers (or ad platforms) want to serve the images for you. Partially because it’s easier — they can flop out images themselves. But more so because then they get the hit on their servers, where they gather data: impressions, IPs, whatever cookies make it across, etc. In MDN’s case, the images (and even the clicks) go to self-hosted URLs:

I was told the images are probably a reverse proxy setup, but that no IP data is shared, hence the avoidance of the cookie banner. Big picture, they will probably earn less money doing it this way, but when they say they are honoring your privacy here, they aren’t lying.

Don’t want to see the ads at all? They have paid plans (MDN Plus) that remove them. Your ad-blocker isn’t going to catch them. See the DOM above… there are no class names involved that indicate this is an ad. I don’t blame them, I’ve played that game as well. I imagine some ad blockers with custom rules will pick it up soon if they haven’t already. But tools like Ghostery or uBlock Origin won’t catch it as there are no origins being hit aside from MDN itself.

I think this will be interesting to watch. Will we see affiliate links? Will we see more display advertising? Will we see sponsored content? Will we see the sponsors make their way to MDN social media or video content? Time will tell. I’d experiment with it all if it were me.

I made making a business model out of technical content part of my career for 15 years. I feel like I did well at it, despite the irony of selling CSS-Tricks to a company that wasn’t buying it for that business model (I know some of the ads are still there 🤷‍♀️). I thought that was cool actually. As much as I like the advertising model (ying yang! I make free content to build an audience, others spend time building products, and they pay to advertise to my audience) — I, like everyone else, prefer looking at websites without ads. So if you can pull that off, that’s ideal.

In order to pull off content-with-no-ads, you need an alternate business model. They can and are selling subscriptions, but they just aren’t juicy enough yet to be really meaningful and entice needle-moving signups. They could produce and sell educational products, like courses, but that’s a substantial pivot and requires leadership, investment, and talent, not to mention a strong desire to walk that road.

Assuming the reason they are exploring this is that there is worry that MDN can’t continue without a more clear way to make money, they are in a tough spot! Advertising is the right choice to chase down first, but even that will be tricky. Display ads are a good start, but limited. People don’t read MDN like they do other publications. It’s a reference, not a newspaper. There is no canonical blog. There is no podcast. There is no substantial YouTube channel. Social media is in a weird place. People don’t just passively consume MDN, which is where advertising generally shines.

View Details

These likely bear no semblance to Official Computer Science categorization, but these are the categories of logs in my head:

Ad Hoc Logs

The `echo`, `console.log`, `fmt.Println`, and `puts` of the world. 👕

“I need to look at some values at this exact step, while I’m actively working” with a dash of “I really should learn proper step-and-breakpoint debugging but hey, I’ve made it this far.”

These are typically removed from code before committing because they add noise for everyone else who are debugging their own problems working.

Automatic Logging

When you spin up your slurry of development tooling, your terminal is spittin’ stuff out that those tools (+ your configuration) have decided should go to “standard out”.

Just doin’ stuff on your website is also likely generating lots of other logs that are probably going to literal log files on disk or some other kind of log storage. This is an ancient best practice that ensures that if an alien race were to gain access to mankinds entire digital archives, they would assume that `69.699.123.420 - - [17/Feb/2023:00:01:36 +0000] "GET /feed/ HTTP/1.1" 200 121434 "" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36" chriscoyier.net HIT` is our formal planetary greeting.

Often used for analytics reasons and rooting out problems via output that may be suppressed in other contexts.

Error/Event Logging

Something happened, so I’m intentionally logging it.

Sentry! Data is missing!

Appcues! A user did something interesting!

Mixpanel! Someone in London bought something!

These tend to stay in place.

I suspect a decent amount of computer work is tending to logs of one sort or another. I’m thinking about this because it’s come up at work a decent amount lately in the form of:

Pull Request comments to make sure to remove logging statements. (Ad Hoc Logging)

Ensuring that logs are being sent to our main logging service, Amazon Cloudwatch, for a new service. (Automatic Logging)

Setting up logging for a strange problem that keeps coming up with hard-to-replicate data. (Error Logging)

I also recently read Logging practices I follow from Eliran Turgeman which also mentions the concept of logging levels:

Whenever you write a log, it’s important you choose the correct log level. I personally mostly use ERROR, WARNING, INFO, or DEBUG

I imagine this is most important in Automatic Logging. So, for instance, you could completely turn off certain logs in staging and production to avoid noise there. In Ad Hoc logging, I don’t find myself using levels all that much. I know JavaScript has `console.warn` and `console.error` and such, but I don’t find them all that useful, client-side at least. We have a pretty lovely homegrown Go logger that supports levels too, but I tend to only use the default for Ad Hoc logging.

🧠 Galaxy Brain thought: I wish I could leave my own personal logging in place, and have it not bother anybody else. A `console.chris()`, as it were. Maybe it’s stripped in CI, but somehow my machine remembers them. Then I’d never accidentally leave logs in PRs, and could log locally with reckless abandon.

View Details

I was catching up on Matt’s latest State of Word the other day. I’m something of a career-long user and fan.

WordPress has changed a heck of a lot over the past few years. One big change was the Block Editor (aka Gutenberg). I wasn’t maybe on the bleeding edge, but I was a pretty early adopter. I think it’s an awfully good idea and a big upgrade to the page creation and writing experience. Turns out holding onto state data in HTML comments is just weird enough to work.

The Block Editor holds onto the basic existing UX of content editing, and even theme creation. It’s ultimately: “I’m just building a big chunk of content I’m going barf out onto a page somewhere”, but does so more elegantly than a glorified textarea the old editor.

The community did a good job making useful blocks. And, crucially, despite it being a pretty steep learning curve and involving weird technical decisions, we could make our own custom blocks. (I’m pleased they now have an official scaffolding and dev tool, which makes me more comfortable than winging it.)

Matt didn’t just show off the Block Editor, that’s almost old news now, the new story is all about how the Block Editor has made its way into other contexts. Perhaps the Block Editor can become a sort of defacto way to generate content, a widely used open standard. Don’t hate it. So far so good. I’ll say though — might be a good idea to start embracing (declarative) Web Component output sooner than later. The encapsulation possibility there will be clutch for broad usage.

But while the Block Editor was a big change to content editing, and Block development was a new paradigm, it didn’t change theme development all that much. Themes are more about content types and overall page structure and breaking things into logical partials and such. The Block Editor didn’t really get involved there.

But now the new push seems to be Block Themes (is that the same as Full Site Editing, FSE, or not? I don’t even know). I do know that they are very different than (regular?) themes. They might have any PHP files at all (😱), or even CSS (😱) but instead just some JSON configuration for styles. And… maybe not even that… because the UI is more and more in charge of every aesthetic detail. So between Block Themes, Query Loop Blocks, Block Variations, and all this new world… themes (as I think of them, what with the template hierarchy and all that) might just be a thing of the past?

I think that was the spirit of Geoff’s Not Sure How to WordPress Anymore? And raises questions like What even is a WordPress developer?

Certainly, you can just build a WordPress website the same way you could a decade ago (props, to WordPress for backward compatibility). But is that prudent? Are you missing out on important and useful aspects of modern WordPress momentum? Probably!

People certainly are figuring out how to switch, I just haven’t made the mental leap yet. What people were writing about as a modern front-end workflow for WordPress in 2020 definitely isn’t that anymore in 2023.

Part of me thinks WordPress needs to spend a year working on DX. There needs to be a clear message about how people should be thinking about building themes and how to do so with productivity keeping extensibility in mind. And if they come pre-loaded with a WordPress development history, what they could and should do with those skills. Another part of me thinks… maybe that’s exactly what they just did with Block Themes. What I always thought I wanted was to build themes with a modern component model. WordPress in the back, Astro on the front bb. But instead of that component model being a JavaScript framework, its Blocks, and PHP themes are dead. 🤷‍♀️

Oh BTW it’s friggin wild you can run the whole WordPress stack in the browser. No way that isn’t going to change things in years to come.

View Details

So that’s:

Chrome 105

Firefox 110

Safari 16

Just a massive deal. Cute that it landed on Valentine’s Day.

This flips a switch in my brain: I can totally use these in production… right now. I won’t even bother polyfilling.

I’m quite proud that in Google’s announcement post (thanks Una!) that the demos are using CodePen. To have something I helped make associated with a big web moment like this is very cool.

CodePen Embed Fallback

View Details

Fun little blogging theme emerging this winter here. I like 🧠 galaxy-brain stuff the most. That is, ideas I haven’t seen floated anywhere else but make good sense. There is a bunch of stuff that we kinda just know we’re going to get this year, and while that stuff is aces, let’s push the thinking further.

Manuel Matuzović: My CSS wish list

🧠: `visibility: visually-hidden;` — shorthand for hiding an element from flow, and from being seen, but left in the accessibility tree as-is. Love it. `visibility` also plays nice with animation so that’s extra good.

Dave Rupert: CSS Wishlist 2023

🧠: `[popover]` — positioning an element relative to another without DOM placement restrictions would be awesome.

Eric Meyer: CSS Wish List 2023

🧠: `grid-rules-columns: 1px dotted red;` — styling grid tracks is a great idea because there is essentially no way at all to do this right now. I think I’d find styling grid cells more useful, but for that, you can always place an element in there and style the element so at least there is a possible way.

Ahmad Shadeed: My CSS Wishlist

🧠: `@container style(wrap)` — style when flexbox wraps, interesting!

Tyler Sticka: Tyler’s CSS Wish List for 2023

🧠: `text-wrap: balance` — so a 4-word headline would balance two words to a line, and the like.

Me: Things CSS Could Still Use Heading Into 2023

🧠: `::resize-handle` — let me get my hands on that resizer!

This is fun! Let’s hear more from more diverse folks!

View Details

See this typeface Academy Engraved LET? It’s usually the first typeface in my Font dropdowns in every single app.

KeynoteIllustratorTextEditTypefaceMailNo shade, it’s just a very stylized typeface that isn’t really my style. I want to remove it from this dropdown. Maybe not even forever, just deactivate it.

That’s what FontBook is for, right? Normally, but not for system fonts like this with a lock icon.

AWWW QUIT-‘CHER-BITCHIN COYIER it’s just one font, just ignore it.

It’s NOT just one font, oh ye fake voice from the internet. It’s not 3 fonts, or 10 fonts, or 100 fonts. It’s five hundred and sixty-seven fonts.

That’s 567!!!! Fonts!!!! Automatically installed that you cannot remove or deactivate on macOS Ventura. What in the absolute heck.

And for the record my preferred font management tool Typeface can’t deactivate it either. So it seems like there isn’t an easy third-party way to skirt the restrictions in FontBook.

Does any of y’all smarties on the internet know if we can cull this herd of 567 system fonts on Ventura or what? Gosh dang Steve Jobs rolling in his grave I tell you what.

View Details

Is this:

`.stack > * + * { margin-block-start: 1.5rem;}`Code language: CSS (css) It’s essentially a scoped lobotomized owl. Love it. The idea of putting spacing only between elements is great. Having to select and remove spacing from the last element, or intentionally not select the first element, is weird mental overhead that is nice to avoid. Not that this strange-looking selector is without a bit of weird mental overhead as well, alas.

Thoughts!

You don’t generally need to worry about CSS selector performance. Until you do. Super DOM-heavy pages that recalculate layout a lot are the culprit here. Think thousands or tens-of-thousands of nodes. The universal selector (``) is a rough one when you actually are faced with CSS performance. See the recent article The truth about CSS selector performance from Patrick Brosset, in which refactoring some gnarly selectors increased recalc performance some 66%.

This alternative uses one less of them, so you could buy a little time back:

`.stack > :not(:first-child) { margin-block-start: 1.5rem;}`Code language: CSS (css) I would never avoid the owl-based this approach just for theoretical future CSS performance problems, though. If you were in that position, it’s easy enough to refactor to using another technique. Or just being like, oh well, there is a little space on the last element, big shrugging deal.

I often think about Adam’s CSS prediction for 2020:

I foresee in 2020 that gap will become the primary way we space on the web.

Will `gap` eat `margin`? The `gap` property does just what Andy’s favorite selector is doing: putting spacing between elements only. So the lines become:

`.stack { display: grid; gap: 1em;}`Code language: CSS (css) In order to take advantage of the gap, you’ve got to use `grid` or `flexbox`, which… is a decent-sized ask. This crossed Andy’s mind as well. He says:

… in order to use `gap`, we would have to make The Stack, either a flex or grid parent. This could cause all sorts of problems for people that grabbed the layout and dropped it in existing projects.

Even when it’s just me working on a site, I still can’t get over my hangup of feeling it’s too weird to make a stack of “regular content”, like `<p>`s, and `<img>`s and whatnot, into `display: grid;`. I’m just scared there are too many side effects like margins sneaking back in and screwing up the spacing, floats not working, one-off gap resizes not possible, and the like.

Future CSS has an answer for this as well! I honestly didn’t see this one coming! And zero browser supports this so don’t hold your breath just yet. But here it is: `margin-trim`.

To replicate what we’ve been doing here, it turns into:

`.stack > * { margin-block-start: 1.5rem;}.stack { margin-trim: block-start;}`Code language: CSS (css) The `margin-trim` property is designed to pluck the margin off of the child element in the implied direction. So in this case, even though that first block puts starting block margin on all elements, the second block takes it off the first element.

View Details

Sometimes when I change software, I end up switching back. I get excited about the fresh vibes, like moving the living room couch, then find enough little annoyances or rough edges that the temptation to move back overwhelms.

Email clients are notorious for that. I get tempted by the aesthetics. Or tempted by the features. Or tempted by the fact that I see how happy other people seem to be using some new email client. Then I end up back at Gmail in a browser tab.

Switching browsers is another. I generally like Chrome, but I’m not beholden to it. Once in a while, I’ll switch “main” browsers for kicks1. Because of my browsing habits, it’s usually not terribly difficult. I don’t rely on bookmarks at all (if you did, I’m sure you can find a way to export/import them, or use some kind of syncing service. Remember Foxmarks? I used to love that). I use 1Password, which works across all the major browsers, so no pain there. Aside from 1Password, I don’t have any browser extensions that are mission-critical for me (the closest is maybe Notion Web Clipper). I don’t really care about having browsing history synced, but my Google history will kinda do that anyway, regardless of the browser used.

But I do generally switch back to Chrome after a while. Maybe it’s some website that doesn’t work. Maybe it’s a DevTools feature I want. Maybe it’s a browser extension I temporarily need and only works in Chrome.

Thankfully, a rare sight these days. Actually kinda shocking to see. I’d love to understand the exact reason. Probably some specific media-related API.But I have managed to switch and stay switched to Arc over the last several months. In a way, it doesn’t count. It’s Chrome under the hood, so any extension will work, it has the exact same platform features, it has the same DevTools, etc. But the UI and UX are pretty different! That could put it at risk for a switch-back, but so far I find nearly every choice Arc makes an improvement.

Here are the things keeping me on Arc:

I like how it syncs the tabs between computers2. I use Arc on several browsers and I know I can walk away from one computer, up to another, and it’ll have the exact same tabs open.

I like how easy it is to make and edit user stylesheets. Arc calls them Boosts — they can be JavaScript too. One of my favorites right now is one Rachel sent me that alters GitHub to remind us to write good merge commit messages. Maybe she’ll share it someday. Guy Feiri is involved.

Split View. This just kicks ass for writing. Nothing prevents you from putting websites side by side in other browsers, but it involves window management3 on your own. Arc’s default of “just split the space” is great.

Tabs on the side. There is more room and you can fit more of them. Convinced it’s the future.

Pinned tabs are fast. I like how it seems to keep these tabs in memory and up to date so clicking on them feels instant.

Changeable tab names and icons. Such a simple idea it’s starting to feel weird mainline browsers haven’t copied Arc here.

Invoking extensions via keyboard. I like that instead of using my mouse to go find the icon for Ghostery or Notion Web Clipper or Bitmoji or something, I use the main command (Command-T or L) and start to type the name of the extension, then select it.

Command-Shift-C to copy the URL with no tracker crap. Clutch.

This list isn’t too different from last time, but the features are more meaningful to me now months later as I’ve proven to myself they aren’t just good ideas but that I actually use and like them.

You don’t have to pick a “main” browser. Some people like to bop around browsers for their own secret reasons.

Here’s a warning that took me too long to figure out: if any computer you sync with has a setting that says to archive tabs over X period of time (a feature many like but I dislike), it honors the least among the synced browsers. This manifested in a where the hell are my tabs reaction for me until I figured it out. That setting should sync.

Window management in Arc is a strike against it actually. It should almost just not even let you make multiple windows since it causes weird problems. Like if you open a new window with all the same tabs, and one of those tabs is doing auto-saving of active work, the other window might be saving over newer changes with stale content. Plus I’ve heard they don’t play very nice with Spaces. Remapping Command-N to “open Little Arc window” is the move.

View Details

You can’t have a white favicon, because, in a lot of situations, you won’t be able to see the dang thing at all. Here’s a default Chrome tab while macOS is in Light mode.

I made the favicon `#eee` here so you could see the favicon at all. You can’t have a black favicon, because, in a lot of situations, you won’t be able to see the dang thing at all. Here’s a default Chrome tab while macOS is in Dark mode:

The tab isn’t pure black, so you can see the pure black favicon. No problem, you say, I’ll have the (SVG) favicon respond to dark mode preference:

`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.3 24.29"> <style> @media (prefers-color-scheme: dark) { path { fill: white; } } </style> ...`Code language: HTML, XML (xml) Neat idea, and that actually works to change a properly set up SVG favicon fill, but it actually doesn’t help that much in real life. Chrome tabs aren’t only dark because of a system preference, they can also turn dark because the tab is open in an Incognito window. There is no `@media` query for that! Firefox does something similar right now: when macOS is in Light mode, you get light tabs in normal windows and dark tabs in Private windows.

Bottom line: you have no idea what the tab color behind a favicon will be like. I’ve been using Arc, which encourages you to fart around with themes, which affects the background color behind favicons. I think all browsers support theming of sorts, further proving you just can’t count on what colors are involved.

So: your favicon should be able to withstand any color behind it. That is often done by providing a solid color background right in the favicon itself. Favicons like these should be visible as intended no matter what:

MDN and CodePen favicons. If you want a colored, shaped favicon, you need a color that works on dark and light equally well. Like orange!

Well, until Safari decides to get weird.

Time for a nap.

View Details

I’m just a general fan of Conway’s Game of Life, mostly for nostalgic reasons. It was one of the first things I ever coded (Turbo Pascal) that was super interesting to me. Probably partially because of the visual and interactive components. I remember working on it feverishly in high school, adding features to a custom-built rudimentary interface. I received praise for it and the code for it was published in some kind of student section of a magazine.

It’s not really a “game”, it’s more a simulation that takes place on a grid of cells, all of which are either dead or alive, and which time elapses in the form “generations”:

Any live cell with two or three live neighbours survives.

Any dead cell with three live neighbours becomes a live cell.

All other live cells die in the next generation. Similarly, all other dead cells stay dead.

That amounts to a fairly fun coding exercise. Like a slightly more involved FizzBuzz, let’s say.

It’s been coded surely millions of times by programmers through the decades. Thousands of times on CodePen alone. I keep a Collection with some interesting examples, including variations.

Just the basics alone are interesting to me. You turn on some random cells, watch them scatter about, and typically degrade into mostly emptiness and a few stable patterns. But it gets more interesting when you learn about the fact that there are some exotic states that a gameboard can get into that can do things like produce infinite movement and infinite new life. A “Glider Gun” is one:

Even that kinda blows my mind. But of course, as nerdy things like this tend to do, things escalate. For example, you can angle the glider guns shots and if you have two streams of them hit each other, they can kinda knock each other out. Put a bunch of guns like that in a row, it’s almost like you’re creating shading in a certain area. Combinations of guns that you time and have effect each other get really weird:

“It is possible for gliders to interact with other objects in interesting ways. For example, if two gliders are shot at a block in just the right way, the block will move closer to the source of the gliders. If three gliders are shot in just the right way, the block will move farther away. This “sliding block memory” can be used to simulate a counter. It is possible to construct logic gates such as AND, OR and NOT using gliders. It is possible to build a pattern that acts like a finite state machine connected to two counters.”

Logic gates?! Indeed.

Things get 1000x full tilt weird then when you set things up such that the way the logic gates work mimic the exact rules of Game of Life itself. This creates a world where one Game of Life, set on an infinite board, looks as if it is playing The Game of Life if zoomed out far enough. Which in turn is also playing The Game of Life, and so on.

saharan created this:

Troubling, really.

View Details

Berkeley Mono (I also love the designer’s website)

Martian Mono (I like this line buried in an image on the repo: “The typeface features a tall x-height, and it has vertical metrics which guarantee equal space is present above the cap height and under the baseline. The latter makes this typeface an on-screen workhorse: it is evenly placed on buttons, inputs, lists, and forms. When coupled together, all the above features make Martian Mono a reasonable choice for any user interface design.”)

Monocraft (pixel font)

iA Writer Mono (there is also a “duospace” version which is interesting)

Vulf Mono (for a band!)

Go (a typeface just for a programming language? weird!)

I guess that’s what happens when you blog about something. After you hit publish you see and learn a bunch more about that thing that you wish you know before you hit publish.

View Details

Simon Willison:

Tip for anyone who’s been put off building stuff with JS due to the terrifying array of build tools and packages and framework choices you have to make these days

You don’t have to use any of that stuff!

A few years ago I gave myself permission to ignore it all and just use default browser environments… and it turns out to be a really fun, productive, dare I say delightful environment to work in

Now that we can ignore IE compatibility modern JS and browser APIs are really nice to work with!

— Mastodon

Just to be obnoxious, I threw out something I would miss if I couldn’t use any tools at all (save for the bare necessities like a text editor and a way to get files to web servers and such). But then I kept thinking about it more.

Here are my guesses as to what I would miss the most:

HTML includes / HTML templating — Unless it’s a one-pager, it’s just 100% obnoxious not to be able to piece bits of HTML together. There are lots of ways, but they are all tools. Ultimately, having something to help get HTML together is a must.

Live Reloading — Like I told Simon, I simply must have it. Call me a DX charlatan if you must. The browser must, at a minimum, refresh when I save files (or restart servers or whatever it needs to do to make my changes apply). Ideally, it would inject CSS changes (or HTML changes, if at all possible) without refreshing the page in order to maintain state as I do styling work. The spectrum of tools that offer this is super wide, from old school bookmarklets, to dedicated projects, to things like “hot module reloading” buried in the depths of frameworks.

CSS nesting — I can’t duplicate base CSS selectors or I will die.

I was tempted to say something about concatenating CSS and JS files, but I’m not sure it’s that big of a deal anymore. With JavaScript, just ride that ESM train. CSS is harder. Maybe you can keep it to one file. You can split it with native `@import` too, which isn’t awesome for perf but probably isn’t a tragedy. The styling story is actually easier if you build with Web Components and look ahead to native CSS modules.

View Details

All the big players in the browser-makin’ world have announced their 2023 Interop project, following in 2022’s footsteps. One of the best things they all could be doing? Absolutely. Without concerted efforts like this, we risk falling back into an era where we can’t count on web technology to work the same across browsers (despite working from standards), and soon we’ll be living in mud puddles and communicating only with grunts.

I have little to say about the project itself, other than :clap-clap-clap: keep going. But this is a fun opportunity to gaze at the marvel of titanic companies all coordinating their messaging. Literally every single company involved blogged about this and linked to each other on February 1st, 2023. What can we speculate by inspecting their sites?

Fair warning: none of this matters in any way.

Google: Interop 2023: continuing to improve the web for developers.HTML:

`<time>Feb 1, 2023</time>`Code language: HTML, XML (xml) RSS:

`<updated>2023-02-01T00:00:00Z</updated>`Code language: HTML, XML (xml) The semantic `<time>` element is nice to see, but it’s missing the `datetime` attribute, which I think largely exists to help search engines, so you’d think Google would be all over that. The `00:00:00` value is conspicuous, making it seem like the date was plucked from a simple date picker and not altered during publishing. Or perhaps hand-written into a Markdown file. It’s unclear what CMS is in use here. I think Google uses an SSG for these sites… maybe Eleventy? But the HTML is hyper-optimized, omitting closing tags, quotes, whitespace, and the like where possible.

They are using Atom for the feed here, which is a slight outlier, and only including an `<updated>` stamp and not a `<published>`. Curious.

Apple: Pushing Interop Forward in 2023HTML:

`<meta property="article:published_time" content="2023-02-01T09:00:39-08:00"><p class="date">Feb 1, 2023</p>`Code language: HTML, XML (xml) RSS:

`<pubDate>Wed, 01 Feb 2023 17:00:39 +0000</pubDate>`Code language: HTML, XML (xml) Apple using the Open Graph tag for publishing time here (rather than the less-used but more-standard Schema.org `datePublished`). It’s a WordPress site so probably some SEO plugin spitting this stuff out (which is good!). No semantics on that visible HTML output. The date in the RSS feed says 5 pm UTC time, making it 9 am Pacific Time which I bet was the agreed-upon publish time. I’m picturing them all on Zoom hitting the button together.

Bocoup: Interop 2023HTML:

`<time class="post-date" datetime="2023-02-01"> Feb 01</time>`Code language: HTML, XML (xml) RSS:

`<pubDate>Wed, 01 Feb 2023 05:00:59 +0000</pubDate>`Code language: HTML, XML (xml) Apple had Bocoup beat by 20 seconds here based on the RSS output. And that is the first showing of a fully semantically correct time element. They keep the title of the post super short, which you’d think might help win an SEO battle for that exact phrase, but no way Bocoup can even put up a fight against this troop. WordPress again here, which was a little harder to sniff out because of the super-compressed HTML (Cloudflare?) and only just a few stray assets with `wp-content` strings in the URLs. Builtwith sniffed out PHP somehow 🤷‍♀️.

Mozilla: Announcing Interop 2023HTML:

`<abbr class="published" title="2023-02-01T09:02:13-08:00"> February 1, 2023</abbr>`Code language: HTML, XML (xml) RSS:

`<pubDate>Wed, 01 Feb 2023 17:02:13 +0000</pubDate>`Code language: HTML, XML (xml) An `<abbr>` for the publishing date. Cheeky! And two minutes thirteen over the buzzer on this WordPress site.

Microsoft: Microsoft Edge and Interop 2023HTML:

`<meta property="article:published_time" content="2023-02-01T17:00:18+00:00"><div class="article-header__date"> February 1, 2023</div>`Code language: HTML, XML (xml) RSS:

`<pubDate>Wed, 01 Feb 2023 17:00:18 +0000</pubDate>`Code language: HTML, XML (xml) I see the BEM shining through on that `<div>`! A mere 18 seconds over the buzzer, revealed in the Open Graph meta tag, tells me this team in on the ball. WordPress here is on theme.

Igalia: Igalia and Interop 2023HTML:

`<meta content="2023-02-01T00:00:00+00:00" property="article:published_time"><time datetime="2023-02-01T00:00:00+00:00" itemprop="datePublished"> Feb 1, 2023</time>`Code language: HTML, XML (xml) RSS:

`<published>2023-02-01T00:00:00+00:00</published>`Code language: HTML, XML (xml) Check that semantically perfect `time` element, including structured data! Golf clap. Atom is used for the feed, a choice only shared by Google here. All the numbers are dead even on the strike of midnight on February 1st, so I assume this was generated from a choice where only the data was the input. AMP is present here which is I belive the only player using that. Builtwith is detecting Vue somehow, which I’m not really seeing, but maybe something like Nuxt or VuePress?

View Details

CSS:

`body { font-size: 1.2rem;}`Code language: CSS (css) What is the value of `font-size` on the `body`? `1.2rem`… right!? Kinda!

That’s the “specified” value, and it’s just one of many kinds of values that we might talk about when working with CSS, the DOM, and rendering our site in a web browser. Karl Dubost got all into this recently in a post called “Thousand” Values of CSS.

You likely know that the browser itself doesn’t really think of `1.2rem` as the `font-size` it is rendering with. We can see that in the computed tab in DevTools, which will list the `font-size` as something like `18.072px`. That’s because `rem` is a relative unit and now the browser has done all the computation needed to figure out what it should be, so that’s the “computed” value. Karl notes there might be an “actual” value too, in case the browser does things behind the scenes to that computed value (like be forced to round it). If a value isn’t relative in any way (like `green`), you can call that an “absolute” value.

A computed value also might end up being something like `auto` or `2fr` or something, so the “used” value also comes after computed and is what the browser actually makes something, even if it won’t actually tell you that unless you measure it. If you measure specifically with `getComputedStyle()`, you’d think that would return the computed value (because of the name), but “it depends”, and is safer to refer to as the “resolved” value which is either the computed value or the used value.

An element might have values that apply to it just by virtue of existing, which are referred to as the “initial” value. Kinda like how `color` is `black` until it is changed or other preferences kick in. An element might also have several values trying to apply to it, but only one wins, which you then refer to as the “cascaded” value.

This all sounds super complicated when you have to have names for them and write it all down, but I think in practice it’s pretty intuitive. I’m not sure I’ve used these terms perfectly despite writing about CSS for a hot while (but we all should).

View Details

I won this little guitar at an auction benefit thingy for the Boys & Girls Club of Bend a while back.

The company is literally called Outdoor Guitar™ and it’s right here in Bend, Oregon.

The Outdoor Guitar™ is available in carbon fiber polycarbonate (bright tone) and brown glass fiber polycarbonate (warm tone).

They’ve been played in the Arctic Ocean, paddled down the Amazon River, hiked the Pacific Crest Trail, and climbed Mt. Kilimanjaro. Made in Bend, Oregon USA with 20,000+ instruments sold since 2015.

Nice.

It doesn’t sound, like, great, but I think the point of it is more like a camping instrument that is tough as nails. Well, not nails because they rust. Tough as… carbon fiber polycarbonate.

View Details

I was reading Eric Bailey’s recent piece Modern Health, frameworks, performance, and harm the other day. It’s excellent and you should go read it. The plot begins with Eric signing up for a site, meant to help him in a time of need, and the damn thing just spins:

Since I make digital experiences for a living, I immediately knew what happened. The signup user flow failed to transition me over to the onboarding user flow.

Totally unacceptable.

It made me think about why this happens. There are a ton of reasons. Network hiccup. Someone pushed a bug. The team didn’t test that particular configuration of browser/platform/version Eric is using. The last deployment didn’t decache a file like the developers thought it would. A corporate firewall interfered. There are infinite reasons, but few are an acceptable excuse, particularly for a healthcare website. There are loads of things developers can do to make a site more resilient, and it’s an unfortunate trend that they (I should say “we” and take some responsibility here) don’t.

But let me focus a little on my own experience with broken sites.

In my day-to-day browsing and doing things, if a website doesn’t work right, I find it extremely likely to be because my own content-blocking browser extensions are interfering. I use Ghostery and have it configured not to “trust” random sites (and origins), making me make that choice on my own. But I know tons of people like uBlock Origin and Adblock Plus as well. Use them, friends! It’s your goshdamn computer and advertising and tracking has long since jumped the shark on the web. Supporting things can be done on your own terms.

Just blocking a file shouldn’t totally wreck a website, but it often does! In JavaScript, that may be because the developers have written first-party JavaScript (which I’ll generally allow) that depends on third-party JavaScript (which I’ll generally block). Something like…

`// https://tracking-website.com/tracking-script.jswindow.trackThing = function() { // report data}// /script/index.jsfunction init() { trackThing("page loaded or something");}init();`Code language: JavaScript (javascript) If I block resources from `tracking-website.com`, now my first-party JavaScript is going to throw an error. JavaScript isn’t chill. If an error is thrown, it doesn’t execute more JavaScript further down in the file. If further down in that file is `transitionToOnboarding();` — that ain’t gonna work.

So here’s an idea:

Run your end-to-end tests in browsers that have popular content blockers with default configs installed.

Doing so may uncover problems like this that stop your customers, and indeed people in need, from being stopped in their tracks.

Is anybody doing this? Cypress, Testim, Rainforest, etc… can you do this with your software?

UPDATE: Just today, I was on the website for a medication I started taking because they offer a discount card that is very substantial. I had to fill out a 4-page form. At the very end, I submitted it and… spinner forever. Guess what? I had to “trust” the site in Ghostery in order for it to go through. 🫠

View Details

That’s as fat as I’ve been in a while. I’ve also got a back injury I’m working through. The weight isn’t helping. Nor is my weight helping me do things I want to do: long hikes, skiing, and bringing big play energy to my kid. This all breeds a gnarly kind of self-loathing that I’m sure many of my fellow morbidly obese are familiar with. It’s not chill. But don’t weep for me.

I’m aware that it’s more en vogue to just feel comfortable in my own body and nobody should stigmatize me for it. I’m very on board with not stigmatizing the obese. Both my wife and I will literally turn off a show for lazy fat “jokes”. Look, the cartoon piggy can’t stop eating! Or this kind of rough rough garbage targetted at kids. But I can’t get there in my own head. Look, the web developer can’t stop eating! I could probably use therapy, but alas.

So I’m on a journey again. A journey for my back to feel better and a journey to lose weight.

I admit I do think about that weight number. But I’m of sound mind enough to know that the number is kind of dumb and health is a far more holistic thing. I want to feel stronger. I want my clothes to fit me better. I want my blood pressure to be lower. I want to do those things in life that I want to do. I want to feel like the world is full of possibilities in the way I do when I’m lighter. If those things were going well, I don’t think I’d care about the number. For now, it’s a convenient proxy.

The journey so far? I’m doing Yoga fairly regularly. I’m in physical therapy. I’ve got a heat belt for my back. I’ve got follow-up appointments with orthopedics. I’ve seen my primary care physician and kept her up to date. I go to CrossFit many times a week to get stronger, but (believe it or not) keep it chill. CrossFit is where I hurt my back (this time), so the external skepticism is high, but I still feel it’s helping me. My physical therapist(s) goes to the same CrossFit class that I do.

And, I’m trying to lose weight.

I told my primary care doctor this. I was nervous to even tell them, because I’ve had plenty of doctors in the past tell me my weight is a problem and that there is a very clear answer to this problem: eat less and move more. I can’t shake that thought. It’s just… true. At least it’s true for me. I’m aware the calories in, calories out chorus is bogus. It’s the lowest-hanging fruit crap that Michael Hobbes and Aubrey Gordon eviscerate on Maintence Phase on the regular.

Yet — any time in my life I’ve been able to rein in my eating and couple it with rigorous regular exercise, my body responds and I can get myself into what feels like a healthy place. Maybe a little fat still, but workable. Fat fit. Life full of possibilities. I tend to hang onto it for a while. Six months, a year, a year and a half, but then it all slips back. Slowly but surely. Eventually, I’m taking great (temporary) pleasure in shoving fast food into my mouth as often as I can.

There is an emotional toll to this rollercoaster. I told my primary care doctor this. I told her I know how to do it right. I know how to eat less and move more. I should do that. I’m gonna do that. But it’s just going to be the down part of the roller coaster again. And I’m rather sick of the rollercoaster.

My father, about one year ago, got bariatric surgery. He was, and is, stoked. It was his way of stopping the roller coaster. It’s been tremendously successful for him. He’s lost more weight than he ever has and it has stayed off so far. Crucially, for him, and for most who do this, it’s a literal physical barrier to failing again and riding the roller coaster back up. You can’t binge. There isn’t room in your body. If you do, it will be very physically painful and you probably won’t do it again. It’s not that people don’t fail after bariatric, they do, but you really gotta work at failing. It’s something of a permanent solution. A pit of success, as web developers might call it. I mentioned to my doctor that bariatric is appealing to me. I have a referral to a bariatric surgeon. I haven’t spoken to them yet, but color me interested.

But my doctor also mentioned a new drug Ozempic (also talked about as Wegovy or generically as a semaglutide, I’ll just use Ozempic here). I had heard of this. A friend mentioned it to me as something to look into and since then I see it in the news quite a bit. For instance, Derek Thompson’s headline for The Atlantic: The Weight-Loss-Drug Revolution Is a Miracle—And a Menace. She offered to write a prescription for it and I gladly accepted.

A new, actually FDA-approved miracle drug?! My 🧠: sign me the fuck up.

Part of what makes it controversial is that the drug was designed for people with Type II diabetes. It just so happens that it has weight loss side effects, which are highly desirable (it’s a TikTok craze, I’m told). So now people after that side effect are buying it all up and people that need it for diabetes can have a hard time getting it. I rationalize this to myself in several ways. One, my dad is diabetic, granddads on both sides were diabetic, and I’m morbidly obese… I’m pre-diabetic, surely. Two, companies are making money selling this drug, they’ll make more.

So I’m going for the Ozempic thing. Will I just be riding the roller coaster back down again? Maybe. Probably. But sometimes that’s just irresistible. And this time, maybe I’ll end the journey with them slicing up my intestines or replacing my stomach with a Chutes and Ladders slide or whatever bariatric is. Or maybe this drug is actually so damn good it can keep me down. Let’s find out.

The first thing you should know about Ozempic is that it’s hard to get. First, you need a doctor to prescribe it for you which is never a walk in the park. I lucked out there. Then, you’ll go to the pharmacy and they’ll tell you your insurance doesn’t cover it. Reportedly, it almost never does. My doctor said she’d keep fighting for it, so we’ll see. So then you have to tell the pharmacy you’ll just pay for it. Then they’ll warn you about how expensive it is, and you’ll wave them off because you already know:

It’s $1,000 a month.

Mine came out to $934, and it’s actually 6 weeks, so it’s a little cheaper, but it’s super massively expensive. You’d think most people would absolutely scoff at a number like that and walk away. I’m sure some do. But many, including me, did not. It’s not a trivial amount of money to me, but I can afford it, by virtue of being just about as privileged as they make ’em and luckily picking computers as a job.

How do they get away with it? Such is the power of hating something about yourself and being shown a way out. I’m not paying $934 to lose weight. I can and have done that on my own. I’m paying $934 to, I hope, build some kind of barrier between me and Big Macs.

So what is it like?

I took my first dose this past Monday. Ozempic comes as this “pen” device with a needle on the end of it. You inject it once a week somewhere near your belly button. There is a whole procedure for it. I YouTube’d it. I was a little scared at first. I’m not particularly scared of needles, but I’ve never done this before. Stabbing yourself with a bit of metal that goes into your body isn’t a comfortable action. Allow me to comfort you: it’s literally painless. As you jab it, during the jab and injection, and after. It feels like nothing. Good job, pharma-science.

A lot of people, in my readings, experience side effects. Nausea is the most likely. I didn’t get that, although I was nervous about it and took a Zofran beforehand to prepare. I felt nothing. The first two days, I felt a greatly reduced desire to eat. That’s amazing. That’s exactly what I want. I was skeptical though. I want this to work so badly, that feeling could easily be a placebo effect. My own projection. Still, the result was a change in my feelings toward food. Something akin to indifference.

The feeling wasn’t “I don’t care to eat”, but “food is a thing that exists and I’ll need to eat some when I get hungry”. I enjoyed eating when I did, then stopped at a normal quantity. All that made me feel like a normal person, which was a neat little glimpse at the other side.

Ozempic, probably, and for now, has done a good job of preventing me from eating too much. It’s not the “I literally can’t eat anymore because there is a physical sleeve squeezing my stomach” of bariatric. It’s also not the “I don’t want to eat because I’m busy explaining to someone how John Bonham locked in with the guitar part, not the bass, and that gave Led Zeppelin the dynamic sound that no rock band has since achieved” of ADHD meds (or cocaine).

On the third day, I had a medium-sized breakfast. Then, my daughter didn’t eat her toast, so I jammed that into my mouth too out of that muscle memory I’m not proud of. And I felt sick. Stomach pain, nausea. I didn’t get quite to feeling like barf was imminent, but it was highly uncomfortable and lasted for hours. At dinner, I skirted that same edge again after two small tacos. Hell yes — this is exactly what I want: a barrier. I ain’t trying to starve, I’m trying to be normal.

This experience is proving another healthy insight. While my intellect wants to admit what science already knows, that obesity is a disease, it’s been hard for my deeper instincts and emotions to accept it. The fact that I can jab some science juice into my gut and it changes some chemistry in my body that finds its way to my brain and alters my relationship to food… well that just proves to me that there is something awry in bodies that causes the unhealthy behavior. Society doesn’t help. Main Street USA offering strictly junk food doesn’t help. But it’s still a disease.

Anyway.

268.

View Details

Data in the 2022 Web Almanac says that the 6 and 3-digit hex color formats (`#XXXXXX` and `#XXX`) combined account for 74% of all color declarations. That’s not surprising, or even really bad, but it’s a little unfortunate as these color formats are the most boring and least capable of all.

You know what else is unused? Color formats that have just as good of browser support as 6 and 3-digit hex.

8-digit hex is at 0% usage. It includes alpha as the last 2 digits. To me it’s slightly weird this even exists because it’s just RGB color space and `rgba(30, 30, 30, 0.84)` (or the more modern`rgb(30 30 30 / 84%)`) makes a lot more sense to me than `#1e1e1ed6`. I would suspect it gets some usage just based on the fact that Chrome DevTools spits it out when you open the color picker on a hex code and adjust the opacity slider.

Which brings up the elephant in the room of color formats: tools.

The `hsl()` and `hsla()` functions also have 0% usage in the data, and they have just as good of support as the hex codes. Why? HSL can do anything HEX can do, except it’s far more readable and easier to adjust. It’s just better, really.

Part of the why is definitely tools. Look at Photoshop’s color picker.

Technically you’ve got RGB and LAB numbers in there you could pluck out and use in CSS, but the only one that is easy to copy-and-paste in HEX. Everybody likes easy. I bet that input alone is a worth a bunch of percents of hex usage on the web.

Figma is a little better in that I can specifically activate colors in HSL:

But all those numbers are individual inputs so it’s still hard to copy and paste the color. And look in the sidebar, even though the color is set in HSL, it uses HEX to show there, making HEX feel like the first-class citizen. LCH and LAB are totally absent.

I get why these super new formats like LAB and LCH are at 0% on the Web Almanac data, as there just hasn’t been time for them to build, but will they ever build if tooling doesn’t start supporting them?

I use a color picker called Sip that I like, where the whole purpose is picking colors to use in digital products, and the new formats are conspicuously missing from there too.

Miriam gets into all this in When Our Tools Hold Us Back:

But why are we still using the oldest and least legible color formats, when better formats are well-supported? HSL is more human-readable than HEX, and the `rgb()` function now supports alpha transparency without switching to `rgba()`.

Plus actual research into the landscape:

Adobe XD supports HEX, RGB, and HSB. Illustrator adds CMYK and a grayscale option, while Photoshop also supports extended gamuts such as Display P3, and perceptually-uniform LAB.

Figma (now also owned by Adobe) provides HEX, RGB, ‘CSS’ (which is `rgba()`), HSL, and HSB.

Sketch shows HSB, HEX, and RGB(a).

I don’t know of any popular design tools that provide LCH, or the newer okLAB/okLCH variants, let alone relative colors defined as a function of mixing or adjusting other underlying colors.

Perhaps it’s best to think of this as an opportunity: someone (please) make a kick-ass color app that supports all the newest color formats, relative colors, color mixing, and all that, and have the app help out with their usage in CSS (copy and paste with quality fallbacks, etc). But also, Adobe, you help too.

View Details

There is a dissonance I’ve heard brought up more than once. It goes something like this: Japan is this beautiful place, renowned for cleanliness, simplicity, and sparse, orderly design in physical spaces. But digital design out of Japan is cramped, cluttered, and garish. Why?

Someone, presumably named Sabrina, has published some research into this at sabrinas.space. “3 leading possible causes”:

Lack of fonts and lack of capitalization to help with visual hierarchies. (Although doesn’t hold up to other areas that use CJK characters).

Risk-averse culture requires more information-dense design. (Although doesn’t hold up to regional neighbors).

Smartphone culture evolved differently, continuing a text-heavy web that came about sooner.

It’s nice to see some research rather than just guessing, even if there is still a lot of questions. I’d love to see a tech journalist take this on, as complimentary research. Feels like you could get a hold of some Japanese design teams and just ask them.

View Details

I’d open up Adobe Illustrator and make something like this:

I have absolutely no memory of writing this one in particular, but there are piles of it and remember some of them. I had no particular vision here, nor is there any deeper meaning. I was just trying to be funny and weird, and missing the mark on both. I was listening to a lot of Phish at the time and I think this helped me connect to the kind of weirdness they put out.

View Details

10 Years of Meteor is a very interesting retrospective from Sacha Greif. Calling it a retrospective might make it sound like Meteor is dead, but it’s not. I’d say it’s fallen out of favor, but that’s not quite right either: Meteor was never particularly popular. What it was: pretty darn innovative. Meteor had serious fans and advocates, Sacha included.

Meteor still feels pretty innovative 10 years later:

… a unified architecture on top of Node.js that bundles client, server, and database all in one neat little package that you can run (or even deploy for free!) with a single command.

What’s more, it was all reactive and in real-time! Can you imagine never having to write a `fetch()` or worrying about updating your client data cache? And all that using the same familiar MongoDB API syntax both on the server and client!

The verdict on the seven principles is particularly interesting.

My guess why it didn’t take off: it’s too opinionated. Sometimes highly un-opinionated software gets popular because of how easy it is to slot in with other things. Sometimes highly opinionated software gets popular because it gives developers answers and allows you to be productive immediately. But it’s a spectrum. Too far, either way, it either doesn’t provide enough value or feels too restrictive. I worry Redwood is today’s Meteor, and Rome is trying to take on too much.

Also fascinating that Meteor alumni went on to make stuff like Vue, Apollo, and Storybook. All of these, I would argue, are less opinionated and play nice with a larger ecosystem of tools.

View Details

Terence notes that the Open Graph Protocol is… if not dead, abandoned.

Facebook Meta were the driving force behind OGP – and have now left it to fester.

The website – https://ogp.me/ – still works.

But the Facebook OGP Discussion Group is now full of spam.

The Developer Mailing List is broken.

The Google Documentation links to a dead Google+ page.

And the GitHub Page has been archived.

That sucks, because OGP is still clearly very useful. It’s this HTML stuff:

`<meta property="og:title" content="The Rock" /><meta property="og:type" content="video.movie" /><meta property="og:url" content="https://www.imdb.com/title/tt0117500/" /><meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />`Code language: HTML, XML (xml) For example, Apple’s iMessage uses those tags to make rich previews in message threads. People love the concept of rich previews and even innovate around it, making it better for everyone.

For example, Tyler Hillsman made an app Share Mastodon posts better to fine-tune via OGP tags and literally faking like it’s a Twitter URL for Apple (and whatever else… Slack, Discord, etc) to show the preview better.

Tyler didn’t want to do this:

Please Sherlock me, Tim.

And one could argue that he did it because the state of OGP ain’t great.

Speaking of Twitter, OGP doesn’t have everything Twitter needs, so they manually extended it and added their own proprietary stuff. Who knows exactly why, but one might think the stewards of OGP weren’t exactly on the ball.

On the Google front, they’ve decided to go with their own proprietary “structured data” thing like this:

`<script type="application/ld+json">{ "@context": "https://schema.org", "@type": "NewsArticle", "headline": "Title of a News Article", "image": [ "https://example.com/photos/1x1/photo.jpg", "https://example.com/photos/4x3/photo.jpg", "https://example.com/photos/16x9/photo.jpg" ], "datePublished": "2015-02-05T08:00:00+08:00", "dateModified": "2015-02-05T09:20:00+08:00", "author": [{ "@type": "Person", "name": "Jane Doe", "url": "https://example.com/profile/janedoe123" },{ "@type": "Person", "name": "John Doe", "url": "https://example.com/profile/johndoe123" }]}</script>`Code language: HTML, XML (xml) That’s all kinds of blech to me. Reinventing the wheel for little reason. Would they have done all that if they thought OGP was receptive to updates and new ideas? Hmmmm. Perhaps not?

UPDATE: I called this blech above, but that was probably a rash first take. The home for Schema. org is a W3C community group, so is, I suppose, a bit more standards-minded than OGP is. Ned says it has the backing of Google, Microsoft, and Yandex, so there is also more agreement about this format. Perhaps a better future is trying to get everyone (Discord, Apple, Slack, Twitter, Pinterest, Mastodon… everyone) to support building rich previews from Schema.org data rather than OGP.

Vercel has this OG Image Generation tool, which works perfectly fine with OGP information, but is just further proof that people are still excited and building cool stuff around the concept.

The real nail in the coffin will be if Facebook rolls out a proprietary meta tag for their own rich previews. 🫠. I’ll repost Terence’s plea:

This is my plea to Facebook Meta. If you’re no longer interested in improving OGP, OK. You do you. But hand it over to people who want to keep this going. Maybe it’s the W3C, or IndieWeb, or Schema.org or someone.

View Details

A great bit of technical writing from Ruud van Asseldonk: The yaml document from hell. Ruud shows one bit of yaml configuration and then shows off many problems that arise all over it. It is mind-blowing to me how nuanced and tricky it all is, to the point that I’m nearly convinced nobody should use yaml.

Yaml exists because…

I think the main reason that yaml is so prevalent despite its pitfalls, is that for a long time it was the only viable configuration format. Often we need lists and nested data, which rules out flat formats like ini. Xml is noisy and annoying to write by hand. But most of all, we need comments, which rules out json.

JSON is way better. It’s completely un-versioned, for one thing. Unlike yaml, which releases breaking changes. Versus:

Json is simple. The entire json spec consists of six railroad diagrams. It’s a simple data format with a simple syntax and that’s all there is to it. […] Json is so obvious that Douglas Crockford claims to have discovered it — not invented.

Well, JSON is way better, except for the lack of comments. It is truly obnoxious not having comments in JSON. I regularly wish that someone had left comments as to why a certain package included a package.json file, for example, and why a specific version is listed. There are 3 reasons JSON ultimately didn’t go with comments. I’d argue they are all moot now, and it would be nice to have them in there. But I could be wrong. The success of JSON might just be rooted in that strict adherence to simplicity.

The lack of comments is such a bugbear that there is a decent amount of momentum toward JSON versions that do support comments. json-c for instance is literally just JSON with comments. We use it at CodePen for internal JSON stuff. Perhaps most famously… you ever edit your VS Code Settings as JSON? That’s json-c.

Further straying from the original JSON is JSON5, which brings a bunch of new features:

`{ // comments unquoted: 'and you can quote me on that', singleQuotes: 'I can use "double quotes" here', lineBreaks: "Look, Mom! \No \\n's!", hexadecimal: 0xdecaf, leadingDecimalPoint: .8675309, andTrailing: 8675309., positiveSign: +1, trailingComma: 'in objects', andIn: ['arrays',], "backwardsCompatible": "with JSON",}`Code language: JavaScript (javascript) That’s essentially as lenient as a JavaScript object is. Looks friggin fantastic to me. It looks like it essentially doesn’t need any parsing at all for use in JavaScript, but I wonder if that makes it then harder to parse in other languages (probably).

Evert Pot loves it.

Both Evert and Ruud also point to TOML as a nicer configuration format than yaml.

Interesting tidbit, Netlify configuration files are TOML, and at one point were working on yaml additionally but scraped it. Probably a good call.

It’s unfortunate that GitHub Actions is yaml only. I wonder if TOML would have been a better call there. But I look at those workflow files and can’t help but think that they would look awfully cluttered and more difficult to scan/edit as JSON.

View Details

I think it’s so annoying that this doesn’t work:

`html { --brandColor-h: 27; --brandColor-s: 92%; --brandColor-l: 42%; --brandColor: hsl( var(--brandColor-h) var(--brandColor-s) var(--brandColor-l) / var(--brandColor-a, 1) );}a { color: var(--brandColor);}a:hover,a:focus { --brandColor-l: 60%;}`Code language: CSS (css) Hopefully, you can see what I’m trying to do there. The links are a special color, and in their hover/focus state, I want to keep that color but change just the lightness. That seems like bread-and-butter CSS custom properties stuff. But it’s a gotcha, and while there are workarounds (referenced in that CSS-Tricks article), none of them feel great to me.

This kind of manipulation only works if the CSS selectors all match the same thing. Manuel Matuzović blogged a recent example:

`[role="status"] { --h: 206deg; --s: 74%; --background-color: hsl(var(--h) var(--s) 90%); --border-color: hsl(var(--h) var(--s) 70%);}.warning { --h: 40deg;}.error { --h: 0deg;}`Code language: CSS (css) That’s fine because all those selectors match the same DOM element. Something like `<aside role="status" class="warning">` or the like.

Adam calls them “partial props”.

But all we’re doing really is exploiting the fact that the `hsl()` value happens to have numeric values that make it easy to do the kind of manipulation we want. I’ll shout out OKLCH again, as it retains that human readability and manipulability.

What we really want to do is manipulate the lightness of a color no matter what format it is originally in. Or any other aspects of that color. Both Dave and Tyler pointed to the Relative Color Syntax on their 2023 CSS Wishlist. So in the future, (it works in Safari Technology Preview as I write), we’ll do this instead:

`html { --brandColor: hsl(27 92% 42%);}a { color: var(--brandColor);}a:hover,a:focus { color: hsl(from var(--brandColor) h s calc(l + 18%));}`Code language: CSS (css) That `from` syntax (where it doesn’t even matter what format the original color was) and the ability to manipulate the individual values in the function is so great.

View Details

I found this little aside in a Charlotte Dann article interesting:

Historically you’d have to URL-encode the SVG but I found that in all modern browsers encoding is unnecessary as long as it’s free of `#`s (HSL for the win!). Encode your files with this tool for extra safety.

So you can put the SVG syntax like directly into CSS as a data URL:

`.cool-circle { height: 100px; width: 100px; background: url('data:image/svg+xml,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m49.941 10.035c52.539 0 52.539 79.93 0 79.93-52.539 0-52.539-79.93 0-79.93z" /></svg>');}`Code language: CSS (css) That’s cool, angle brackets and all!

Did you know use can use backslashes (`\`) in a CSS string to break lines visually? Let’s use that to clean up a little:

`.circle { height: 100px; width: 100px; background: url('data:image/svg+xml,\ <svg\ width="100" height="100"\ viewBox="0 0 100 100"\ xmlns="http://www.w3.org/2000/svg">\ <path\ fill="orange"\ d="m49.941 10.035c52.539 0 52.539 79.93 0 79.93-52.539 0-52.539-79.93 0-79.93z" />\ </svg>');}`Code language: CSS (css) See the `fill="orange"` there? What Charlotte is saying is that like `#f06d06` would totally break this. And indeed it does. Use a `%23` instead for the `#` and you get `%23f06d06` and that’ll work. But even better, use a color format that doesn’t need the octothorpe. Say HSL:

`<path\ fill="hsl(322.64 100% 50%)"\`Code language: HTML, XML (xml) or even better, OKLCH.

This got me thinking though… The `<svg>` syntax allows for a `<style>` tag, meaning… we can put CSS in our SVG in our CSS, which is just weird.

If the CSS is on the page in a `<style>` tag of its own, the closing `</style>` in the SVG will break it though, so it is safest to escape just those tags I think. Here’s that weirdness:

`.leaf { height: 100px; width: 100px; background-image: url("data:image/svg+xml,\ <svg width='100' height='100'\ viewBox='0 0 100 100'\ xmlns='http://www.w3.org/2000/svg'>\ %3Cstyle%3E\ :root { --fill: hsl(33, 93%, 56%); }\ %3C/style%3E\ <path\ fill='var(--fill)'\ d='m66.086 38.801c-20.461 17.012-38.746 33.113-43.863 60.52 19.883-13.727 46.191-16.98 60.129-33.574 14.383-17.121 11.832-40.801 12.617-64.77-16.738 7.8633-33.316 12.223-50.281 16.078-32.465 7.3789-46.199 42.324-29.734 74.801 18.242-32.629 31.477-46.832 51.133-53.055z'/>\ </svg>");}`Code language: CSS (css) I think OKLCH is the most baller new color format though, so let’s go full weird and make that work with a proper fallback:

`.leaf { height: 100px; width: 100px; background-image: url("data:image/svg+xml,\ <svg width='100' height='100'\ viewBox='0 0 100 100'\ xmlns='http://www.w3.org/2000/svg'>\ %3Cstyle%3E\ :root { \ --fill: hsl(133.31 100% 49%)\ }\ @media (color-gamut: p3) {\ :root {\ --fill: oklch(85.88% 0.37 144);\ }\ }\ %3C/style%3E\ <path\ style='fill: var(--fill);'\ d='m66.086 38.801c-20.461 17.012-38.746 33.113-43.863 60.52 19.883-13.727 46.191-16.98 60.129-33.574 14.383-17.121 11.832-40.801 12.617-64.77-16.738 7.8633-33.316 12.223-50.281 16.078-32.465 7.3789-46.199 42.324-29.734 74.801 18.242-32.629 31.477-46.832 51.133-53.055z'/>\ </svg>");}`Code language: CSS (css)

View Details

When I picked up my new TV at Best Buy recently, first, I strolled through the TV section for kicks. A Philips Hue Strip ($256) caught my eye and I went for it. You use sticky pads to stick it to the back of your TV and it makes colored light.

The whole deal with Philips Hue is that you can control the lights via an app that is half-decent. You can do gradients of colors, mirror the colors, adjust the levels… it’s great.

But I caught wind somehow that the lights could sync with what is actually playing on the TV somehow (!!). I couldn’t figure out how that worked with what I had at first. Turns out you need more equipment. For one thing, I needed a bridge ($43), and, more importantly, a sync box ($222).

The bridge is just a home-base thing to control all the Philips Hue stuff in your house. Not needed just to control the strip, but as soon as you have multiple lights, you need it. The bridge is a prereq for the sync box for whatever reason.

The sync box is HDMI and needs to sit in line between the output device and the TV somewhere. For me, that’s:

`AppleTV > Sync Box > Receiver > TV` So this thing literally reads the HDMI signal and figures out what colors are going through, and tells the lights to mimic those colors. That’s wild to me.

You can control how intense you want it to be. A lower setting changes the matching colors more slowly. The video above is set at the 3rd of 4 levels of intensity.

I’ve seen this poo-pooed online plenty as being one of the more useless Philips Hue products — but suck it haters — I think it’s cool as heck.

Philips Hue Smart Hub (Compatible with Amazon Alexa, Apple HomeKit, and Google Assistant)

View Details

The Mastodon instance I’m on has a little custom CSS applied to it which shows a visual [alt] badge on images that have an `alt` attribute:

And as a little light shaming, a [no alt] badge on images that don’t:

Sorry about mine there. It appears there is some kind of bug with the Share on Mastodon plugin for WordPress that prevents my `alt` text from making the leap.

Eric Meyer blogged about how he did his own with a user stylesheet. And here’s another blog post about it. User stylesheets are pretty great. It surprises me that of the Big Three browsers, Safari makes them easiest to add. Yadda yadda security. Me, I’m super partial to “Boosts” in Arc.

It’s a wonderful use of CSS’ `:has()` selector. These badges need to be “inserted” into the site. There is no HTML present to hide/show. That’s pseudo-element territory. But you can’t put a pseudo-element on an image!

Well, you can but it won’t show up.

So you need to put it on another element. Ideally, a wrapper element, if there is one! Fortunately, on Mastodon there are several:

You can see the `::after` element in pink above. So how is that added based on a conditional situation on elements within it? That’s what I mean by `:has()`.

`.media-gallery__item:has(img[alt])::after { content: "alt";}`Code language: CSS (css) I don’t really know what we would have tried without that CSS feature. Probably a smidge of JavaScript to insert an element where it needed to be. Or a lucky combinator selector if placing the pseudo-element on a next-sibling was consistent enough to work.

This also makes me think about potentially displaying that `alt` text too.

No dice there though, because again we can’t put useful pseudo-elements on `<img>`. So even though we can select against the `[alt]` and style a parent element, we can’t pluck out the content of the `alt` and use it in `content` elsewhere.

`/* Not helpful. /img[alt]::after { content: attr(alt);}/ Not possible /div:has(img[alt])::after { content: attr-from-a-child-element(alt);}`Code language: CSS (css) I think the best we can do here (if this matters at all, which, I’m not it does, alt text isn’t a figcaption) is to duplicate* the `alt` text in another attribute on a parent.

`<div data-alt="foo"> <img src="..." alt="foo"><div>`Code language: HTML, XML (xml) Then we can use that attribute to visually show (on hover here, just for fun):

`div { width: min-content; position: relative;}div[data-alt]::after { content: attr(data-alt); opacity: 0; visibility: hidden; position: absolute; bottom: 2px; left: 2px; width: calc(100% - 4px); background: rgb(255 255 255 / 0.85); padding: 1rem; transition: 0.1s;}div[data-alt]:hover::after { opacity: 1; visibility: visible;}`Code language: CSS (css) But let’s say we wanted to position the “popup” somewhere else? That’s perfectly possible.

But it’s fraught! What if that was along the top edge of the browser? That would cause “data loss” in that part of the text could be hidden with no way to access it. There is a possible solution on the horizon though. As Dave blogged in his CSS wishlist for 2023, the Popover API would be pretty sweet for this kind of thing, semantically and functionally (using actual HTML is ideal so you can put, like, links inside and stuff), and then would need to be combined with the CSS Anchored Positioning stuff to prevent the data loss.

View Details

If you can play a song on an instrument, you probably like that song. You’ve gotten to know it. You’re part of each other now.

Tech can be like that. I have my own little bag of technologies that I know fairly well, so I like them. I like them a little more than technologies I don’t know yet.

My recent journies in TypeScript have me thinking of this. I’m adding it to my bag. We’ve done a bunch of work at CodePen in it now and are converting our JavaScript code over as we see fit. Plus, I’m chugging right along on my Execute Program training and have done a few mini side-projects in TypeScript. This combination of real-world practice and academic study has gotten me largely up-to-speed in TypeScript land.

Soon, I’ll be at risk of liking TypeScript. I’ll be one of those who tell you, “once you go TypeScript, you’ll never go back”. Just kidding — please inform me if I become that obnoxious. I want to be measured about all this. No technology is above criticism (oh god, please tell me you know that).

I see the value in TypeScript. It provides type safety in JavaScript and DX in VS Code. Since JavaScript likely requires tooling anyway these days, it’s starting to be no more laborious to set up than whatever you’re doing for JavaScript already. Then once you are comfortable with the syntax and how to win battles with it, you bask in that value.

It remains fair to ask the question: is it really worth it? Is the time investment in learning worth it? Are the battles worth it? Are you preventing contributions? If there are complications to your pipelines, are they worth it? Is it costing you and your developers time or saving it?

I have lingering doubts about how many bugs are actually about types. Of all the JavaScript bugs I’ve fixed in my years, it honestly doesn’t feel like that many were about wrongly typed data being flung around. Some days it feels like a wild hoax that an entire meta-language was invented around solving these not particularly common bugs. Like if fifty things went wrong with your house last year, one of them was a woodpecker pecked a hole in your siding, so you spend three years building a woodpecker-proof wall around your house.

Oh that? That’s just an AppleScript message we throw for TypeScript compilation errors as part of our local development processing at CodePen because we were sick of confusing silent errors. 🫠There are more valid criticisms as well. A recent thread on Hacker News started by listing four things that intersect with what I’ve mentioned, and the comments have plenty of people both defending and further criticizing it. The error messaging, in particular, is the source of many battles. How much time fighting those battles is worth it?

If I had to pick a side (I don’t), I’m narrowly on the side of TypeScript, particularly when the code is being written for others or there are more than a few developers touching the code. I’m a sucker for DX what can I say. But I’d like to avoid the trap of liking it, or choosing it, just because I know it. If I can.

View Details

Wouldn’t it be neat to have aggregated data (for a website, daily email, push alert, etc) of kids events in our surrounding area so we know about them right away?

— My wife, possibly salty we missed out on Bluey Live tickets in Portland

That’s proper nerd sniping on a Saturday morning a few weeks back when I didn’t have too much else to do.

In the past, I’ve been guilty of waving my hands at ideas that “just” aggregate data from other websites. That’s just a scraper site, I’d think. Hit some websites, scrape what you need, chuck it in a database, and voila. This Saturday: OK — big boy — but you still gotta do it — you think you got what it takes? 👀

Wanna hear this talked about with mouthblogging? Dave and I chatted about it on ShopTalk.

First — what’s going to do the scraping?I happened to have run across Colly the other day.

This choice tickled me in three ways:

I get to use a scraper technology I’ve never seen or used before.

It’s in Go, and I like opportunities to learn more Go, something I’ve been investing time in learning for work.

I can try to make it work as a Netlify function because they support Go, which is yet another learning opportunity.

So the very first thing I did was write the bare minimum Go code to verify the idea was feasible at all.

The Scrapable WebsiteThis website, as a first test, fortunately, is easily scrapable.

What would make a website not easily scrapable? 1) no useful attributes to select against or worse 2) is client-side rendered Here’s the code to visit the website and pluck out the useful information:

`package mainimport ( "fmt" "github.com/gocolly/colly")func main() { c := colly.NewCollector( colly.AllowedDomains("www.portland5.com"), ) c.OnHTML(".views-row", func(e colly.HTMLElement) { titleText := e.ChildText(".views-field-title .field-content a") url := e.ChildAttr(".views-field-title .field-content a", "href") date := e.ChildAttr(".date-display-single", "content") venue := e.ChildText(".views-field-field-event-venue") fmt.Println(titleText, url, date, venue) }) c.Visit("https://www.portland5.com/event-types/kids")}`Code language: Go (go) The above code was working for me, which was encouraging!

Do websites owners care* if we do this? I’m sure some do, where it is a competitive advantage thing for them for you to have to visit their website for information. Bandwidth costs and such probably aren’t much of a concern these days, unless you are really hammering them with requests. But in the case of this event scraper, I’d think they would be happy to spread the word about events.

The highlighted lines above are a real showcase of the fragility of this code. That’s the same as `document.querySelectorAll(".views-row .views-field-title .field-content a")`. Any little change on the parent site to the DOM and this code is toast.

Printing to standard out isn’t a particularly useful format and this code generally isn’t very usable. It’s not formatted as a cloud function and it’s not giving us the data in a format we can use.

An Event TypeThis is the kind of data format that would be useful to have in Go:

`type KidsEvent struct { ID int `json:"id"` Title string `json:"title"` // e.g. "Storytime at the Zoo" URL string `json:"url"` // Careful to make fully qualified! Date string `json:"date"` Venue string `json:"venue"` Display bool `json:"display"` // Show in UI or not}`Code language: Go (go) Once we have a `struct` like that, we can make a `[]KidsEvent` slice of them and `json.Marshal()` that into JSON. JSON is great to work with on the web, natch.

My next step was to have the cloud function do this scraping and return JSON data immediately.

Returning JSON from a Go Cloud FunctionThat is structured like this, which will run on Netlify, which uses AWS Lambda under the hood:

`package mainimport ( "context" "encoding/json" "log" "github.com/aws/aws-lambda-go/events" "github.com/aws/aws-lambda-go/lambda")func handler(ctx context.Context, request events.APIGatewayProxyRequest) (events.APIGatewayProxyResponse, error) { // This returns a []KidsEvent, so instead of just printing the scraped info, we're filling up this slice with data. kidsEvents, err := doTheScraping() if err != nil { log.Fatal(err) } b, err := json.Marshal(kidsEvents) if err != nil { log.Fatal(err) } return &events.APIGatewayProxyResponse{ StatusCode: 200, Headers: map[string]string{"Content-Type": "text/json"}, Body: string(b), IsBase64Encoded: false, }, nil}func main() { lambda.Start(handler)}`Code language: Go (go) Once this was working I was quite encouraged!

Getting it working was a bit tricky (because I’m a newb). You might want to see my public repo if you want to do the same. It’s a little journey of making sure you’ve got all the right files in place, like `go.mod` and `go.sum`, which are produced when you run the right terminal commands and do the correct `go get ` incantations. This is all so it builds correctly, and Netlify can do whatever it needs to do to make sure they work in production.

Fortunately, you can test this stuff locally. I would spin them up using the Netlify CLI like:

`netlify functions:serve`Code language: Bash (bash) Then hit the URL in the browser to invoke it like:

`localhost:9999/.netlify/functions/scrape` Notice the output is saying it’s scheduled. We’ll get to that later. I don’t actually want to scrape and return on every single page view, that’s wackadoo. It’s not very efficient and really not necessary. What I want to do is:

Scrape once in a while. Say, hourly or daily.

Save or cache the data somehow.

When the website is loaded (we’ll get to building that soon), it loads the saved or cached data, it doesn’t always do a fresh scrape.

One thing that would be perfect for this is Netlify On Demand Builders. They run once, cache what they return, and only ever return that cache until they are specifically de-cached. That’s wonderful, and we could use that here… except that Netlify doesn’t support On Demand builders with Go.

This is a moment where I might have gone: screw it, let’s make the cloud function in TypeScript or JavaScript. That would open the door to using On Demand builders, but also open the door to doing scraping with something like Puppeteer, which could scrape the real DOM of a website, not just the first HTML response. But in my case, I didn’t really care, I was playing and I wanted to play with Go.

So since we can’t use On Demand builders, let’s do it another way!

Let’s keep the data in PostgresWe use Postgres at CodePen so another opportunity to practice with tech used on a far more important project is nice. Where should I keep my little Postgres, though? Netlify doesn’t have any official integrations with a Postgres provider, I don’t think, but they are at least friendly with Supabase. Supabase has long appealed to me, so yet another opportunity here! Pretty much the whole point of Supabase is providing a Postgres with nice DX around it. Sold.

Like Netlify, Supabase has a free tier, so far this little weekend project has a $0 net cost, which is, I think, how it should be for playing with new tech.I was assuming I was going to have to write a least a little SQL. But no — setting up and manipulating the database can be entirely done with UI controls.

But surely writing and reading from the DB requires some SQL? No again — they have a variety of what they call “Client Libraries” (I think you’d call them ORMs, generally) that help you connect and deal with the data through APIs that feel much more approachable, at least to someone like me. So we’ll write code more like this than SQL:

`const { error } = await supabase .from('countries') .update({ name: 'Australia' }) .eq('id', 1)`Code language: JavaScript (javascript) Unfortunately, Go, yet again isn’t a first-class citizen here. They have client libraries for JavaScript and Flutter and point you towards a userland Python library, but nothing for Go. Fortunately, a quick Google search turned up supabase-go. So we’ll be using it more like this:

`row := Country{ ID: 5, Name: "Germany", Capital: "Berlin",}var results []Countryerr := supabase.DB.From("countries").Insert(row).Execute(&results)if err != nil { panic(err)}`Code language: JavaScript (javascript) The goal is to have it mimic the official JavaScript client, so that’s good. It would feel better if it was official, but whattayagonnado.

Saving (and actually, mostly Updating) to SupabaseI can’t just scrape the data and immediately append it to the database. What if a scraped event has already been saved there? In that case, we might as well just update the record that is already there. That takes care of the situation of event details changing (like the date or something) but otherwise being the same event. So the plan is:

Scrape the data

Loop over all events

Check the DB if they are already there

If they are, update that record

If they aren’t, insert a new record

`package mainimport ( "fmt" "os" "github.com/google/uuid" supa "github.com/nedpals/supabase-go")func saveToDB(events []KidsEvent) error { supabaseUrl := os.Getenv("SUPABASE_URL") supabaseKey := os.Getenv("SUPABASE_API_KEY") supabase := supa.CreateClient(supabaseUrl, supabaseKey) for _, event := range events { result := KidsEvent{ Title: "No Match", } err := supabase.DB.From("events").Select("id, date, title, url, venue, display").Single().Eq("title", event.Title).Execute(&result) if err != nil { fmt.Println("Error!", err) } if result.Title == "No Match" { var saveResults []KidsEvent event.ID = uuid.New().String() err := supabase.DB.From("events").Insert(event).Execute(&saveResults) if err != nil { return err } } else { var updateResults []KidsEvent err := supabase.DB.From("events").Update(event).Eq("title", event.Title).Execute(&updateResults) if err != nil { return err } } } return nil}`Code language: Go (go) My newb-ness is fully displayed here, but at least this is functional. Notes:

I’m plucking those ENV variables from Netlify. I added them via the Netlify dashboard.

The ORM puts the data from the query into a variable you give it. So the way I’m checking if the query actually found anything is to make the struct variable have that “No Match” title and check against that value after the query. Feels janky.

I’m checking for the uniqueness of the event by querying for the `url` which seems, ya know, unique. But the `.Eq()` I was doing would never find a matching event, and I couldn’t figure it out. Title worked.

The save-or-update logic otherwise works fine, but I’m sure there is a more logical and succinct way to perform that kind of action.

I’m making the ID of the event a UUID. I was so stumped at how you have to provide an ID for a record while inserting it. Shouldn’t it accept a `null` or whatever and auto-increment that? 🤷‍♀️

The point of this experiment is to scrape from multiple websites. That is happening in the “final” product, I just didn’t that up in this blog post. I made functions with the unique scraping code for each site and called them all in order, appending to the overall array. Now that I think about it, I wonder if a Go routine would quicken that up?

SchedulingNetlify makes running cloud functions on a schedule stupid easy. Here’s the relevant bit of a `netlify.toml` file:

`[functions]directory = "functions/"[functions."scrape"]schedule = "@hourly"`Code language: TOML, also INI (ini) JavaScript cloud functions have the benefit of an in-code way of declaring this information, which I prefer, so it’s another little jab at Go functions, but oh well, at least it’s possible.

Pulling the data from the databaseThis is the easy part for now. I query for every single event:

`var results []KidsEventerr := supabase.DB.From("events").Select("").Execute(&results)`Code language: JavaScript (javascript) Then turn that into JSON and return it, just like I was doing above when it returned JSON immediately after the scrape.

This could and should be a bit more complicated. For example, I should filter out past events. I should probably filter out the events with `Display` as `false` too. That was a thing where some scraped data was bogus, and rather than write really bespoke rules for the scraping, I’d flip the Boolean so I had something the avoid displaying it. I did that on the front end but it should be done in the back.

A WebsiteI figured I’d go with Next.js. Yet another thing we’re using at CodePen but I could use more experience with, particularly the very latest version. I figured I could do this the smart way by using `getServerSideProps` so a Node server would hit the cloud function, get the JSON data, and be able to render the HTML server side.

I spun it up in TypeScript too. Ya know, for the practice! This is pretty much the entire thing:

`export async function getServerSideProps() { const res = await fetch( `${process.env.SITE_URL}/.netlify/functions/get-events` ); const data = await res.json(); return { props: { data } };}type kidEvent = { id: string; title: string; date: string; display: boolean; url: string; venue: string;};export default function Home(props: { data: kidEvent[] }) { return ( <main> <h1>Kids Events</h1> <div> {props.data.map((event) => { const date = new Date(event.date).toDateString(); if (event.display === false) return null; return ( <div key={event.id}> <dl> <dt>Title</dt> <dd> <h3> <a href={event.url}>{event.title}</a> </h3> </dd> <dt>Date</dt> <dd> <time>{date}</time> </dd> <dt>Venue</dt> <dd>{event.venue}</dd> </dl> </div> ); })} </div> </main> );}`Code language: JavaScript (javascript) Look ma! Real HTML! StylingI kinda love styling stuff in Next.js. It supports CSS modules out of the box, and Sass is as easy as `npm install sass`. So I can make files like `Home.module.scss` for individual components, and use the scoped styles. It’s a smidge heavy on CSS tooling, but I admit I find this particular alchemy pleasing.

`import styles from "../styles/Home.module.scss";export default function Home() { return( <main className={styles.main} </main> );}`Code language: JavaScript (javascript) I also took the opportunity to use Open Props for the values of as much as I possibly could. That leads to this kind of thing:

`.card { padding: var(--size-5); background: var(--gray-1); color: var(--gray-9); box-shadow: var(--shadow-3); border-radius: var(--radius-3);}`Code language: CSS (css) I found Open Props very nice to use, but I kinda wish it were somehow “typed” in that it would help me discover and use the correct variables and show me what the values are right within VS Code.

Pittered OutThe very basics of this thing are working and I published it. I’m not sure I’d even call this a minimum viable prototype since it has so many rough edges. It doesn’t deal with any date complexities like events that run multiple days or even expiring past events. It scrapes from a few sites, but only one of them is particularly interesting, so I haven’t even proven that there are* enough places to make this an interesting scraping job. It doesn’t send alerts or be helpful in any way my wife originally envisioned.

But it did teach me some things and I had fun doing it. Maybe another full day, and it could be in decent enough shape to use, but my energy for it is gone for now. As quickly as a nerd sniping can come on, it comes off.

View Details

My brain has a strong desire to crown a winner of technological choices so I can choose it when options come up, or at least have a strong, consistent algorithm for the choosing.

So now that CSS has a bunch of new color options, my brain is trying to do that crowning. It is helped along by others who know a lot more than I do painting a rosy picture of one format in particular: OKLCH.

Lea Verou: LCH colors in CSS: what, why, and how? — “LCH colors in CSS is something I’m very excited about, and I strongly believe designers would be outraged we don’t have them yet if they knew more about them.”

Jim Nielsen: OK LCH, I’m Convinced — “One color syntax to rule them all!”

Andrey Sitnik / Travis Turner: OKLCH in CSS: why we moved from RGB and HSL — “OKLCH is the best color space for color transformations and it’s better to become familiar with its axes by using them in color definitions now.”

Vojtěch Vidra / Ondřej Pešička: LCH is the best color space! — “In our opinion, it is currently the best color space for creating UI color palettes.”

So here’s my calculus:

OKLCH can do anything any older format can do.

OKLCH shares the same human readability that HSL has.

OKLCH has “uniform perceived brightness”, so that first number behaves way more predictably than it does in HSL.

OKLCH makes the colors that happen in gradient interpolation better.

OKLCH allows us to use the “new” set of colors that modern displays support (P3), many of which are deliciously rich, and “beyond”.

That’s a lot of stuff that is all a big deal. I don’t think any of the other new color choices check all of those, nor add any that aren’t on this list.

The only downside is browser support. As I write, only Safari supports it. Chrome, hopefully very soon? It’s very easy to write a fallback, though:

`.super-pink-header { background: rgb(255, 44.71, 87.98); background: oklch(65% 0.284 17);}`Code language: CSS (css) You can get your hands on those values easily by preprocessing or in this nice picker:

There is another kind of fallback, the “I’m in a browser that supports this but on a display that does not”, but fortunately, I think all the magic is in place for the color to suck back down as close as that display can get.

SIDE NOTE #1: Likely, this thinking isn’t exactly appropriate, as I’m quite sure all these new color declarations are there for a reason. Oh well, I can’t fight it. Free blog post idea: “When using OKLAB is better than using OKLCH”. I assume it will mostly be “because sometimes the color coordinate system of LAB produces more desirable gradient interpolations in super specific situations”.

SIDE NOTE #2: If you’re curious about LCH vs. OKLCH, my understanding is OKLCH is just a little better, fixing some issues with LCH, so we might as well use it instead. I kinda wish LCH just adopted OKLCH rather than having two things, but again that’s probably for good reason.

View Details

Dave made a list.

It kinda sounds like he’s kidding, but no — that’s what it takes.

And because these exist in the front-end and open-source space, the ability for organizations to “make it” is tough. You likely need the VC (or a corporate overlord) to have the resources to do all this, but how do you make a business out of it that will satisfy VC?

The path is so much more straightforward for a back-end service. We’ve got your data and we do helpful stuff with it on our servers, so pay us.

There are exceptions. A JavaScript “framework” like Alpine.js only runs in the browser and has very little of Dave’s list but only tackles a small problem space. Vue is the real unicorn — loads of sponsorship, and user love to accomplish everything on the list and give it plenty of momentum. You can’t just make a new Vue, though. Like any successful anything, if the path to success were easy, simple, and obvious, everyone would do it.

View Details

Tom MacWright talks about some of the decidedly good things happening in web development.

In the not-so-recent past, when I was writing server-side code, I’d have to use a module like request to handle HTTP requests, the querystring builtin or the qs module for decoding query strings, and url.parse() for parsing URLs, and moment to format dates in English.

Today, none of those problems require, or even really benefit from, using Node.js-specific modules. We have `fetch()` on the backend, and the `URLSearchParams` object for query strings, the `URL` object for URL parsing, and the `Intl` system for formatting dates, numbers, and lists.

Plus, those are standardized APIs, meaning any JavaScript runtime, which there are starting to be many, all have them. Tom points out how frameworks are getting better and shifting towards an SSR model, tools are getting faster, the edge is picking up, and even computers themselves are taking strides.

View Details

One of the ways you can offer Dark Mode / Light Mode on a website is to totally honor the system preference in CSS alone. So like…

`@media (prefers-color-scheme: dark) {}@media (prefers-color-scheme: light) {}@media (prefers-color-scheme: no-preference) {}`Code language: CSS (css) That’s fine, I suppose, but it’s not very fun. It’s way more fun to have a UI toggle that users can use! Plus, it’s possible that even if a user has set a preference, they might want to view your site opposite of that preference. So my thinking is that you don’t use those in CSS at all, you use a class, probably right at the document level, indicating which theme is happening:

`<html lang="en" class="dark-mode">`Code language: HTML, XML (xml) So how do you get that class on there properly? I think we should:

Check if there is a cookie in place (or some other storage mechanism) that has the user’s preference already in it.

In lieu of that, fall back to the user’s system preference.

If there is no preference, you get to pick!

The tech can get complicated! In this article, Paul Armstrong uses an Edge Function to deal with cookie management and Client Hints and such to figure out the correct class, then rewriting the HTML before it arrives at the browser with the correct class. It’s cool, but that’s a lot and I’m kinda scared of it.

I think we can get this done (and, bonus, avoid FART (Flash of inAccurate coloR Theme)) with a more basic client-side JavaScript approach. Part of the trick is running the JavaScript in the , so that the class is in place before a first render. That’ll be render-blocking JavaScript, so let’s keep it as small as possible.

Let’s assume the UI toggle is:

`<label for="darkMode">Dark Mode?</label><input id="darkMode" type="checkbox" checked>`Code language: HTML, XML (xml) Here’s my crack at the JavaScript:

`<script> const COOKIE_NAME = 'darkmode'; // Variable to prepare for unchecking the checkbox if the user prefers light mode. let uncheckBox = false; function disableDarkMode() { document.documentElement.classList.remove('dark-mode'); document.documentElement.style.colorScheme = 'light'; document.cookie = `${COOKIE_NAME}=false; expires=Fri, 31 Dec 9999 23:59:59 GMT;"` } function enableDarkMode() { document.documentElement.classList.add('dark-mode'); document.documentElement.style.colorScheme = 'dark'; document.cookie = `${COOKIE_NAME}=true; expires=Fri, 31 Dec 9999 23:59:59 GMT;"` } // If the user has the dark mode cookie, respect the cookie. if (document.cookie.split(';').some((item) => item.trim().startsWith(`${COOKIE_NAME}=true`))) { enableDarkMode(); // If the user has the light mode cookie, respect the cookie. } else if (document.cookie.split(';').some((item) => item.trim().startsWith(`${COOKIE_NAME}=false`))) { disableDarkMode(); uncheckBox = true; // If the user doesn't have the cookie, then check the system preferences. } else { // If the user prefers dark mode, or doesn't care, enable dark mode. if (window.matchMedia && (window.matchMedia('(prefers-color-scheme: dark)').matches || window.matchMedia('(prefers-color-scheme: no-preference)').matches)) { enableDarkMode(); // User prefers light mode via system preferences. } else { disableDarkMode(); } } // Gotta wait to do DOM stuff until DOM is ready addEventListener('DOMContentLoaded', (event) => { // window.darkMode is the <input type="checkbox" /> window.darkMode.addEventListener("click", () => { if (window.darkMode.checked) { enableDarkMode(); } else { disableDarkMode(); } }); // Make sure the UI reflects the current state. if (uncheckBox) { window.darkMode.checked = false; } });</script>`Code language: HTML, XML (xml) With that in the `<head>`, the `<html>` element with either have a class `dark-mode` or it won’t. Now, in the CSS, you don’t use any `@media` alternations of color whatsoever, you only rely on the class name.

This relies on JavaScript being active, so that could count as a strike against it I suppose. Maybe a little improvement would be only visually revealing the UI toggle when the JavaScript runs. Improvement beyond that would need server-side code to deal with the cookies and classes.

The exact code above though is working pretty well for me as I write this:

No FART.

View Details

From Nicholas C. Zakas’ newsletter:

The QA manager for my team at Yahoo stopped by my cube one day. “We need you to stop changing CSS classes in the HTML,” she said. I found this request odd. After all, we use CSS classes to apply styles to different HTML elements. I couldn’t imagine why QA would care about that. “Well,” I replied, “that’s not realistic for us. We are in rapid development of the site and need to be able to change both HTML and CSS as we go along to do that. What is the concern?”

As it turned out, the QA team had created a bunch of automated tests using Selenium. Those tests were looking for specific CSS classes in order to click on different areas of the page and test that things were changing appropriately. Naturally, when those CSS classes were changed or removed, it broke the tests.

Their fix, at the time, was to use prefixed class names like `qa-`. That’s a perfectly good solution, but I’ve taken a slightly different approach for similar reasons: data attributes.

End-to-end tests are one example where fragile classes are a pain in the ass. Another for us is an app we use at CodePen called Appcues which, among other things, displays popout messages that are positioned next to specific DOM elements. Appcues needs CSS selectors to do this. Using class names is better than having to `:nth-child` or the like to find the right element, but they are still fragile as hell. A broken selector means the entire “flow”, as Appcues calls them, is broken.

I’ve preferred the extra clarity of a `data-` attributes in these situations.

`<nav data-appcues="user-menu" class="user-menu"> <img src="avatar.jpg" alt="User Avatar for User" /> <ul> <li> <a href="/dashboard">Dashboard</a> </li> <li> <a href="/logout" data-testing="log-out">Log Out</a> </li> </ul></nav>`Code language: HTML, XML (xml) Above, Appcues might need to target a User Menu, but rather than use `.user-menu` as a selector, which signals to developers it’s used for CSS styling, I use `[data-appcues="user-menu"]` so that nobody, including me, will mess with it. Lower, a Cypress test, for instance, could locate and click the `[data-testing="log-out"]` link without issue.

Nobody is going to accidentally change attributes like that, as they clearly have some purpose. Changes to them will also be quite clear in a code review.

I wonder if it’s too far to consider using `data-` attributes for any non-styling reason. If JavaScript needs to discover this element, use an `data-js` attribute.

Just don’t make up attributes, that always makes me cringe.

View Details

I made a microsite one time that showcased fonts designed for coding. I had some standards for it — it wasn’t just any ol’ monospace font. They were all monospace and of good quality, and in most cases, specifically designed with code in mind.

Still, there were 46 of them all told, and to be perfectly honest, I probably wouldn’t actually* use most of them. No shade, just a matter of aesthetic preference.

So here’s a quick smaller collection of coding fonts that I’d actually use. I like switching it up from time to time just for funzies.

Mono LisaMy favorite at the moment.

Operator MonoI used this forever and still love it. The typeface that broke the ice on cursive characters in a monospace font (typically used for code comments).

Comic CodeI know this probably seems like a joke but it’s really not. It’s not only fun but super legible and perfectly usable for day-to-day coding. Toshi Omagari’s Codelia is also awesome.

JetBrains Mono

I didn’t really think about it until I had chosen these four here, but good news: all four of those (and the four below) are available to use on CodePen. Just pick whichever you want in your Editor Settings.

Runners UpThere are all also very good, but I decided to be ultra-picky with this post and admit to myself I just don’t prefer them over any of the above.

FiraCode

Gintronic

Input

Source Code Pro

View Details

What is the best scalable CSS approach?

First, what does scalable CSS mean? To me:

The CSS approach works for any size project. The “scaling” part usually implies “works for large-scale projects”, but I prefer thinking of it more literally: a CSS approach that can work for a small site and remain the same approach for a large site.

Complexity stays low. It’s not hard to jump in and see how things work. Developers don’t need very specialized knowledge. The approach can scale to any team size with varied skill levels.

There is a plan to deal with specificity. Generally, that means keeping it low and level to avoid fights. If there is no plan and specificity values are spiky, you’ll see problematic behavior start in the form of overly complex selectors and dangerous override behavior, as with `!important`.

Consistency is high. If you are naming things, the way they are named is consistent. The order of things is consistent. The formatting is consistent. The organization is consistent.

The approach feels productive. Developers aren’t fighting the system, they are using the system. When they sit down to work, styling is easy and natural.

Developers don’t become afraid of the CSS. Whatever approach shakes out, everybody involved needs to understand it so that no one worries about changing it. Limit the side effects.

It doesn’t deteriorate over time. No choices are made that become harder to make as code grows. Tiny bespoke tools are avoided in favor of robust, proven tools.

So what is that approach? I dunno — that’s for you to choose.

I will say that hand-written vanilla CSS files are a perfectly fine option. You can achieve all of this, including the scaling part, without any tooling, which buys you serious longevity. This has become more tenable with the advent of things like custom properties that wrangle consistency.

Myself, I think some tools are a good idea. But as few as possible, and the easier they are to stop using, the better. A code formatting tool like Prettier almost feels like a given for keeping things consistent. Any sort of syntax processing I’m more and more on the fence about. I actually feel stronger about using a tool that does strong scoping for your CSS, so you can attach styles to individual components without unwanted style leakage, although that may be helped along by the future `@scope` rules.

There are more hurdles and trade-offs as you go. Cache busting. Bundling files for performance. Critical CSS. Linting. Browser refreshing/hot module reloading. Dynamic styles. They all have a purpose, and all introduce complexity. Choose wisely.

The recent article The evolution of scalable CSS digs into this stuff, naming actual tools through the history of this topic, in case you want examples of actual tech choices. Who runs that site, by the way? The byline is REM but it’s not the rem I know, is it?

View Details

Cory Doctorow:

Theoretically, there’s a way to avoid the app store chokepoint: web apps. These are part of the HTML5 standard, and if a browser fully implements that standard, then developers can make a self-encapsulated “app” that’s delivered in the browser, complete with an icon for your home screen, capable of doing anything an app store app can do.

A company that wants to sell stuff without paying the app tax could hypothetically deliver a web app that the user could download and install via their browser. This doesn’t just avoid the app tax, it also overrides the app stores’ editorial control, like Apple’s decision to block privacy tools in China to aid in state surveillance.

But you can’t have a web app without a web-app-compatible browser, and you can’t get a web-app-compatible browser in Apple’s App Store.

It’s probably a little bit more than a web-app-compatible browser. It is alternate app stores to help with the discovery and installation of those web apps. And the cooperation of the operating system to make those web apps first-class citizens of the device.

But I’ll take alternate browsers on iOS as a solid start, forced or not.

I’d also take clear communication from Apple on why they don’t allow it now. As far as I know, it’s just radio silence. Allow me to ask clearly: Hey Apple, why is it, exactly, why other browsers aren’t allowed on iOS?

UPDATE: Apple has answered, it’s just in a PDF. Open Web Advocacy, on Mastodon, has compiled a list:

Webkit’s sandbox is better than the iOS Native App Sandbox

Not every App on iOS should be granted browser level privileges

There is hardware security that we will not share with third party browsers, so those browsers will have worse security than Safari

Apple cares more about privacy than anyone else

Safari is more performant than other browsers

It would diminish iOS competitive advantage over Android

Webkit is tightly integrated with iOS hardware

No App Store review for Web Content

There are more Native App viruses on Android than iOS

Apple would force other browsers to be redesigned to fit into a new custom sandbox

It will make Chrome more dominant

It’s not about protecting the App Store revenue

Users can choose other browsers

Other iOS browsers can add lots of features now

Apple is working hard on lots of new features for Safari

Any delay in new features is only due to privacy/security concerns

Safari has great support for Web Apps

Safari is adding more Web App features

So they are on the record… but here’s the rest of my post before I knew that anyway:

The problem with silence is that people’s speculation becomes the truth in their minds. Speculation like… It’s the money! Apple is pure greed. It’s an untenable security situation. Apple couldn’t guarantee users’ safety as well as they do now. [Other browser is] terrible for battery performance compared to Safari. Users would be mad at Apple for something that they can’t control.

My own speculation remains: there isn’t any incentive. Changing this policy is a crapload of work with no upside for Apple. Personally, I want alternate browsers, I want alternate app stores, I want first-class web apps on all mobile devices. But I run a company, too and proposed projects that are a crapload of work with no upside for the company do not get rubber-stamped.

View Details

While I was trying to remember the name of this concept where a list of items uses animation to “open up” and make room for another list item to animate in, I thought of the name “Intuitive Transitions.”

The idea is that your brain understands exactly what has happened to this list. If the new list item was instantly there, it would be confusing and likely take some time to figure out what has changed. The animation makes it intuitive.

It’s certainly not my idea. I remember Val Head talking about this during her animations talks years ago. Then I remembered another name: “Transitional Interfaces”, which is what Pasquale D’Silva called them a ways back and I took the opportunity to code up. Mike Bostock would call it Object Constancy.

My old examples were jQuery `.slideToggle()` based (which was capable of measuring how large something needed to animate to), but it was re-done years later by Luke Courtney in a more modern jQuery-free way as well.

ViaThis is all coming to mind again, because of new technology arriving in browsers. Straight up: the most interesting new API to play with in 2023 is the View Transitions API. Jake has the best article on it so far. It’s extremely cool that we get FLIP animations essentially “for free”, which includes animating elements to new unknown dimensions ✨.

What’s extra cool, is that the API is extremely simple to use (well, at first):

`document.startViewTransition(() => { // Just update the DOM});`Code language: JavaScript (javascript) That’s… it. You update the DOM and it will animate the changes. And if you want to control how those animations happen, you have that control in CSS:

`/* Make the outgoing DOM go out fast, the incoming slow /::view-transition-old(root) { animation-duration: 0.5s;}::view-transition-new(root) { animation-duration: 5s;}`Code language: CSS (css) The `root` keyword there, as you might imagine, applies to the entire page. But you aren’t always animating the entire page. In the case of our list, we’re only animating the list items, so we need to do like…

`<ul id="list"> <li style="view-transition-name: item-0">Apple</li> <li style="view-transition-name: item-1">Banana</li> <li style="view-transition-name: item-2">Guanabana</li></ul>`Code language: HTML, XML (xml) To note there:

See how they all have different `view-transition-name`s? That’s very important. Each element with a name will be animated separately. We can’t target the entire list, because the entire list doesn’t all move together. Some list might animate up, some might animate down, some might not move at all, etc.

If any element has the same `view-transition-name`, it breaks the entire thing, nothing animates.

This all feels highly annoying to me, as it means we’ll need to have generated `view-transition-name`s quite a bit and that makes it much harder to apply custom animations in CSS since we can’t write selectors like `::view-transition-old(list-)` or any similar wildcard approach.

But anyway, as they all have unique names now, as soon as we add another list item to the list dynamically, all the list items will automatically move to make room, which is awfully cool. No measuring things, no library needed, no exotic approach.

To belabor the annoyance a little…Say the new list item is like…

`<li style="view-transition-name: item-[DYNAMIC]">Guanabana</li>`Code language: HTML, XML (xml) I can’t really target that with `::view-transition-new` in CSS because I don’t know what [DYNAMIC] is. Fortunately, for new/incoming elements, it’s not a terrible limitation because I can just add a class name (e.g. `incoming`) and apply animation to that class. But I have no such luxury for old/outgoing elements. A class name to animate them away is not possible because the element is removed from the DOM immediately and an animation will not run, plus I still don’t know what [DYNAMIC] is on the CSS side. At best, I’d have to figure out [DYNAMIC] on the JS side and inject a CSS rule using `::view-transition-new([DYNAMIC])` just-in-time. Another possibility is changing the `viewTransitionName` in JavaScript just in time to something you do know on the CSS side, but that is limiting because multiple elements might receive that at the same time based on user interactions and thus break the animations entirely.

Here’s a look at it all working. Remember: at the time of writing this is a very new API that has already changed dramatically once. It works in Chrome Canary only with `viewTransition` API flag turned on.

CodePen Embed FallbackPoints:

I’m using zero libraries here. None are required. That’s pretty cool.

If you are using a DOM-manipulating library (React, Vue, etc) this will all still work fine, it just might be tricky because those libraries update the DOM on their own schedule. You’ll need to figure out where best to jack in the `startViewTransition` call. I gave it a shot in React but I’m afraid my React-foo is too weak to get it right. Plz fix thx.

It looks like we’re getting “animate to auto” functionality here. It doesn’t matter what size the new list item is, the perfect amount of room will be made. Will this be cracking the nut on getting that in regular CSS animations?

The View Transitions API for on-page FLIP is friggin sweet, but pales in comparison to this API being used for cross-page animations. Like literally animations between full page reloads. That’s gonna be wild. I gotta try playing with that soon. I’ve already seen some compelling plays.

Special thanks to Adam for back and forthing with me on all this.

View Details

It’s a common sentiment:

The harder you work, the luckier you get.

It’s a book, but I’m sure the orignial quote is like Mark Twain or something.

I’ll admit it resonates with me. When I’m really working hard on the right things, for all the world to see, good things tend to happen. Things that seem random at first, but are a little too serendipitous to be pure luck. Success begets success. When it rains it pours. You get it.

But can all that be codified? Sahil Bloom thinks so. First, there are types of luck that tend to concentrate at different parts of your life:

(1) Blind Luck (“early years of your life”)

(2) Luck from Motion (“hustle in your 20s”)

(3) Luck from Awareness (“experience in your 30s”)

(4) Luck from Uniqueness (anytime)

That tracks for me, especially the unwritten part where you get jack nothing in your 40’s 🫠.

Better, there are things you can do to increase your luck, or your “luck surface area” which I like even more:

(1) Talk to more new people—go out instead of staying in.

(2) Send more cold emails.

(3) Write/share in public.

(4) Actively participate in digital communities.

(5) Spend more time in rooms where you’re the dumbest person.

The Harder You Work, the Luckier You Get: An Entrepreneur's Memoir

View Details

Brian Rinaldi: Does the Serverless Edge Live Up to the Hype?

Your edge function – or middleware as some frameworks call it – will be called when the request comes in before it hits the origin server. It can modify that request, redirect it – so no need for slower server-side or client-side redirects or you can even handle access and authentication at this point.

The edge function can even fulfill the response itself. For example, if you have static assets like HTML, CSS, images and more cached on the edge, you can simply respond without hitting the origin server.

I wasn’t aware that serverless functions are generally regarded as not having lived up to their hype. I’m still pretty hyped on it. Nearly every project I do, major or minor, uses them in some way.

But remember edge functions are a distinct form of serverless function. They don’t have an origin, they execute geographically close to users, on computers connected to fat internet pipes specifically designed to run code quickly. Hype!

I wonder how a sentence like this will live up over time. Let’s call it Coyier’s Edge Law:

Any fetch request that client-side JavaScript would make immediately as the page loads should be an edge function.

There is a 100% chance that an edge function will perform that fetch faster than your little hand computer on domestic internet will and give you the opportunity to return more “Real HTML.”

View Details

Wonderful story from Robin where an 83-year-old woman who learns to play “the Big Red Synthesizer, enormous, as long as a Fiat” at the public library. Interestingly, commissioned by a design studio.

Doubling the coolness, a modern, functional, web-powered synthesizer forms the header of the story. Amazing what web audio can do, ain’t it?

View Details

Have you seen the Browserslist concept? You make a `.browserslistrc` file at the root of a project, or a `browserslist` key in a `package.json` file, which indicates what browsers you want to support. Then any other code processing tool on that project and refer to it to make decisions about how to process that code.

It’s a nice idea because it encourages standardization. Rather than individual projects making up their own format for indicating browser support, they can share. There are two major projects that this is relevant for: Autoprefixer and Babel. Both of them are very specifically about processing code to support older versions of browsers, so it’s pretty damn great that they agree at how to configure thaBut t.

You use strings to explain what you want:

`last 2 versions` That will support the last 2 versions of every browser. That’s pretty nice, as it means as browsers evolve and support more things, you process your code less. Less unneeded prefixes, less processing into older (and probably slower) syntaxes.

It can also use global browser market share and various other keywords. The default is:

`> 0.5%, last 2 versions, Firefox ESR, not dead`Code language: CSS (css) That means it will support any browser that has over half a percent of global market share, the last two versions of all major browsers, the latest version of Firefox’s Extended Support Release, but no browsers without security updates.

Maybe you like the general concept of scoping to versions, but have a specific browser you need to support. Here’s that in the alternate format without commas but line breaks instead:

`last 3 versionie 11safari 15` Which would look like this in the array format in a `package.json` file:

`{ browserslist: [ "last 3 version", "ie 11", "safari 15" ]}`Code language: JSON / JSON with Comments (json) A few notes:

I always trip up on the usage of “s”. It’s browserslist, not browserlist, the later feeling more natural to me.

You can interchange “version” and “versions”. It feels awkward to me to say “last 3 version” like you often see, but it’ll take the “s” just fine.

If you’re writing a code processor that you expect to behave deterministically, you’ll need to use unchanging targets. Using versions or market share will change over time and break your tests.

But what I really wanted to point out was this nice project I ran across recently: browserslist.dev — which shows you visually what browsers you’ll actually be supporting when you build your config.

I like `last 3 versions, not dead` myself, but that’s not terribly far off from `defaults` so you might stick with that. I was just working on a thing where we were using `defaults and supports es6-module`, but turns out we could drop the `and supports es6-module` because we’re at a point where that literally does nothing to the supported browser list anymore.

While I was poking around at this I happened to be on a call with Eric Meyer and he pointed out another very similar site: browsersl.ist. Both sites allow you to share configurations and visually show you which browsers are being targetted. But this one is maybe a bit better as it has all the information on what configuraiton options are possible.

But Eric noticed that the data on this one is a bit more up to date. It had Chrome 109 data in there, for example, where the data on browserlist.dev only had Chrome 107 data.

View Details

I don’t know what step through debugging even is ok.

View Details

I have this (extremely loose) idea for an activity in which a laser beam shines onto a gameboard, parallel to the board, and you have to use mirrors to reflect the beam toward an end goal.

Crude cave iPad drawing of a green laser shooting a beam, bouncing it off mirrors, and reaching an end goal.Maybe you’re solving a logic puzzle of sorts, where you are reaching the goal with limited equipment. Maybe it’s a game where you battle another player and balance offensive and defensive moves (Khet already exists). More likely, since I’ve been thinking about this for years and haven’t landed anywhere near an interesting idea, perhaps just a fun playground where you make a laser look extra cool.

In my mind, you can literally see the laser beam as you move the mirrors, obstacles, and whatnot.

Have you ever seen a green laser at night? This isn’t an exaggeration:

At night time, you can see the beam of a green laser no problem.The first thing I wanted to do was get a super bright laser in which you could see the beam in normal room lighting conditions. Spoiler alert: this ain’t happening (safely). I have some very early memory of my uncles standing around a table playing with a (red) laser, bouncing it off mirrors and screwing around, and I could see the beam. Now that I’ve done my own experimentation as an adult, I’m fairly convinced I either couldn’t see the beam back then in the daylight/roomlight conditions, or they somehow heavily darkened the room.

This is how my thinking went: since you can very easily see a green laser at night, I should be able to buy a more powerful green laser and see it during the day. I’m aware that particulate matter in the air helps (clap two chalkboard erasers together, blow some smoke, use a fog machine, etc.), but that doesn’t seem like the only thing that matters. There is no more or less particular matter in the air at night, yet you can see the laser far more easily. Just needs more power!

The brightest lasers to the human eye are indeed green, so I started the journey there.

You can buy a green laser right off Amazon. There are a million options but they are all the same.

They weirdly don’t even list the power on any of the product pages I looked at, but they are gonna be 50mwI have several of these. They are very bright lasers and are fun at night, but you definitely cannot see the beam in room light.

So I figured, more power! The best source I could find online is Big Lasers. I figured I’d email first, and they were very responsive.

I ended up buying both a 100mW and 200mW version. The results? Well, you can tell they are both super damn bright when you look at the dot they produce on a wall, even in room light. But, sad trombone, you can’t see the beam. My laser guy was just wrong.

It’s very tempting to try a 400mW version, but that’s nerve-wracking territory there. You can see at the 1000mW (1W) version that’s a “burning” laser. Ain’t nobody playing a “game” with lasers that beefy. Too dangerous.

Ughghk I want it.Annnnnyyyywayyyyy here’s where I’m at now. I’ve got the 200mW mounted on a stand at the edge of the playing field. I can bounce the beam around some stand-mounted mirrors, avoiding some obstacles.

It all works, except you can barely see the beam (as seen above). You can see the beam a bit at the end a smidge. That’s because that contraption in the middle is a little Ultrasonic Pond Fogger to emit some water mist. It kinda works, it’s just a bit splashy (hence the bowl-guards) and doesn’t emit quite enough mist/fog for it to make much of a difference in the room light.

If I spray some mist, you can see the beam pretty nicely for a second:

My dream of seeing a friggin laser beam blast its way across a game board in normal room light isn’t realized yet. I could probably get a more robust fog machine and build some walls around the board to contain it. Or just play with it at night with the lights off.

View Details

Say someone asks you a question. They walk up to your desk, send you an email, ping you on Slack, whatever. The answer needs to be beefy. You could answer with your mouth, respond to their email, or DM them back. That’s totally fine and probably the most socially acceptable way to answer. But also probably the lowest overall value.

Mike Crittenden has a scale of value:

Answering one person’s question in a direct message (so only the person asking the question benefits)

Answering one person’s question in a public channel (so anyone else following the channel that day can benefit)

Answering one person’s question by documenting the answer and sharing the link with them (so anyone searching the docs in the future can benefit)

Take action (fix a bug, add automation, etc.) to make the question obsolete so nobody ever asks it again

4 is great in terms of documentation and customer support. That’s really the ticket to incrementally making excellent docs. But it’s only relevant sometimes. If someone asks you “what’s the average air speed velocity of a laden swallow?”, you can’t, like, fix swallows, no matter what kind.

2 is fantastic in contexts like Slack. More public channels and less DMs is good company culture.

3 is my favorite. If you’re going to do some thinking and writing, give that thinking and writing a URL. That’s why companies put up public forums, if they can afford to staff them (see Netlify). You’re essentially building a huge SEO and on-site search hive of answers. It’s not without some dangerous pitfalls (customers finding old information), but the positives likely outweigh the negatives.

View Details

When I was on Alex Trost’s holiday stream, real quick at the end, I showed a way that CSS can animate to `auto` dimensions. This is a hell of a trick and it’s pretty great there is a way to get it done in without needing JavaScript to measure things ahead of time. Ideally, CSS would just… let us do this without any trickery.

I mentioned this again in Things CSS Could Still Use Heading Into 2023.

I didn’t discover the (extremely cool) trick for doing it today though. That was discovered by Nelson Menezes back in October 2021. I saw his article then blogged it on CSS-Tricks a week later. It has started working in Chrome and Safari since then, which is nice, but again, CSS should just allow `auto` transitions and animations.

Just wanted to make sure the history is correct, as I’ve seen a new round of excitement over knowing this is possible today.

View Details

Sarah Bahr at NYT notes that Snow Fall is 10 years old now. It was a big smurfing deal in the crossover world of web design and journalism. It was like the concept of “art-directed blog posts,” but for news stories, taken to an 11.

Here’s a collapsed version of how it all played out:

Holy crap! Snow Fall is such an awesome immersive experience!

Hmmm. Maybe this should be the future of journalism on the web. The bar has been raised.

This turns out to be largely true. Lots more of this is done.

10 billion conversations in newsrooms happen that reference Snow Fall.

Ughgk, I’m getting sick of hearing about Snow Fall.

If I hear Snow Fall one more time, I’m walking out of this room.

Snow Fall fades into the past.

Snow Fall is properly honored, remembered, and people understand that, like everything else in the world, it depends.

View Details

I’m hesitant to share this.

I think RSS is most valuable when you slowly add people to your feed reader of choice that you have found and you know you like. A firehose of additions might turn you off. Too much noise.

But on the flip side, you might find reading RSS too boring when you start from complete zero and there isn’t much in there. And I’d love for more folks to choose feeds as a way they read online. So here we go, here’s a list of RSS feeds scoped down to just personal sites of mostly-web-developers:

OPML File of Personal Developer Blogs

I made it by exporting everything of mine from Feedbin, then:

I pulled out companies (Netflix, Evil Martians, Viget, etc.)

I pulled out old stuff (jQuery blog, Modernizr blog, etc.)

I pulled out group/organization blogs (W3C, WP Tavern, Verge, Ionic, etc.)

I left in a little non-pure-tech stuff (Kottke, etc.)

I did not use a fine-tooth comb. If there is something weird in there, sorry. If there are dead sites in there, sorry. If you have an awesome blog and it’s not in there, sorry (and let me and everyone else know in the comments please).

I did this for myself also. I really wanted to try Readwise Reader, but they don’t yet support syncing with Feedbin (my canonical home for feeds). So the only way to get started is from scratch adding feeds one by one or uploading an OPML file. I verified the above works because Readwise Reader took it just fine.

View Details

Monique Judge for The Verge:

The biggest reason personal blogs need to make a comeback is a simple one: we should all be in control of our own platforms.

If what is happening on Twitter hasn’t demonstrated it, our relationship with these social media platforms is tenuous at best. The thing we are using to build our popularity today could very well be destroyed and disappear from the internet tomorrow, and then what?

You know what the one big valid criticism is of all this “write on your own site, not on walled social media sites” is? It’s boring. It’s not very social feeling. You’re “talking into the void,” as someone recently put it to me.

But IndieWeb never said “don’t participate in social media.” In fact, it’s the opposite. They say participate everywhere you want to, just make your own site the canonical hub.

As for me, I really need to learn more about ActivityPub and Web Mentions. I’ve got the WordPress plugin installed and activated/set up on this site, I just don’t really get it yet. What I’d like is that conversation about anything I post here gets consolidated into essentially the comments section beneath each post. And that if I comment-via-blogging about someone else’s posts, it makes its way there. That feels like it could really up the fun-level.

View Details

It’s just timestamped HTML.

As I recently wrote about feeds. An RSS feed (or JSON feed) isn’t “just for blog posts”, as nobody would be blamed for thinking.

I just saw this new CMS called microfeed. One thing I like is how it just digs into Cloudflare-specific tech in a super opinionated way:

microfeed uses Cloudflare Pages to host and run the code, R2 to host and serve media files, D1 to store metadata, and Zero Trust to provide logins to the admin dashboard. Cloudflare provides very generous free usage quotas, making it an affordable solution for personal or small business use. While you will still need to pay for a domain name, hosting microfeed on Cloudflare is essentially free.

I’m not shopping around for a CMS at the moment, but I like the vibe there. If you’re going to build around a specific platform, friggin do it.

What I really like is the emphasis on creating feeds and that feeds can be whatever. The README has a whole list of things a feed could be:

a podcast feed of audios

a blog feed of posts

an Instagram-like feed of images (e.g., llamacorn.listennotes.com)

a YouTube-like feed of videos

a personal website with custom links (e.g., wenbin.org)

a content curation feed of external urls

a marketing site with updates and press coverage (e.g., microfeed.org)

a headless cms with a GUI dashboard and a public json feed (e.g., microfeed.org/json)

…

Heck yeah.

View Details

There is always some degree of tension between “native apps” and “the web” as platforms.

If you’re going to write a native app for Android devices, well, I’ll quote from the Android Developer documentation:

Android apps can be written using Kotlin, Java, and C++ languages. The Android SDK tools compile your code along with any data and resource files into an APK or an Android App Bundle.

You’re not building a website. There are no web technologies listed there.

If you’re going to write a native application for iOS devices, Apple would like you to use Swift, but you can also still use Objective-C.

With the power of Xcode, the ease of Swift, and the revolutionary features of cutting-edge Apple technologies, you have the freedom to create your most innovative apps ever.

You’re not building a website. There are no web technologies involved.

As I recall, Microsoft was always the most friendly toward treating web apps as if there were native apps, listing them as first-class citizens in their stores and such, but I’m not sure how much of a thing that is anymore since they aren’t much of a player in the phones and tablets world anymore (although I do think the Surface Duo is cool). But surely a truly native Windows app is .NET and C# and whatnot.

If you want to build a native app across platforms, you’re either:

Writing it as many times as platforms you want to support

Using some middle-man software to write-once-compile-everywhere

I suppose we could lump “wrapped” websites (i.e., Electron) into that second category, even if they technically remain HTML/CSS/JavaScript.

Why do companies like Apple and Google want you to write native apps over web apps? I can’t pretend to know the minds of entire industry giants, but control seems like one easy answer. Especially for Apple, which has a long history of building operating systems and allowing developers to build apps that run directly on those operating systems.

Despite Steve Jobs’s original vision for mobile apps being web apps, the Apple App Store (for iOS) became a thing along with the 2008 launch of the iPhone 3G. We asked: why not web apps? Why go proprietary? It could have been argued that the web just wasn’t ready for it. Web tech back then pales in comparison to what we have now. But I think many people are hanging onto that vibe that the web isn’t as capable. Even if you point to specific instances of that being true, who’s to blame for that lack of ability? The same company, in all likelihood.

It’s less clear to me why Google/Android went the same route as native apps. Google has an awful lot of incentive to make the web as good as it can be and has largely done a good job of that. You can get Progressive Web Apps into the Google Play Store, but it’s a bit of a second-class citizen, which seems bizarre.

It’s only slightly clearer to me why a business would choose a native app over the web. I wrote up why I think a business might go that route about a year ago, and I didn’t even do a good job of convincing myself. The problem is mostly all the examples out there. All the biggest and best apps around have chosen the web. Figma, Slack, Discord, GitHub, Spotify, Netflix, you name it, the biggest successes have picked the biggest platform first: the web.

Still, one gets the feeling that if any of the huge platform-producing tech companies could have their way, they’d have us all writing proprietary apps for their platform only. Right this second, the web feels like it’s in a good spot, but it also feels like the native vs. web battle is a swinging pendulum.

Say, somehow, the web is dealt some massive blow, and native apps have all the momentum. What does it look like for the web to lose? As in, for native apps to somehow become the default choice for organizations building digital products.

Us designers and developers would either have to re-specialize on one particular platform or spread ourselves thin, getting mediocre at many.

There would be many good apps in just one of the walled gardens, leaving users feeling cheated that they have to choose and miss out no matter what they choose.

We would all live under the rule of these closed, privately-held systems. If they don’t like you or your app, you’re gone. That’s how they work now, but with nowhere else to go, gone is gone.

URLs are of the web, not native apps. URLs are what makes search engines a thing. Farewell to global, helpful search.

Did you (do you) learn and debug from being able to inspect the source code of the very thing you are looking at? Not anymore.

Isn’t it nice how really old websites are still perfectly available? The web does a wonderful job of backward compatibility. In a world of all native apps, one platform update can prevent any non-conforming app from running at all.

Not that websites are notoriously amazing at performance but have you weighed your average app download lately? 50MB is on the small end. So much for the web helping bring digital connectivity to developing nations.

If you sell the product, prepare to give up a sizeable chunk of every sale.

Does it bring you comfort that the decision-making processes that guide the web are good-slow, because it prevents dangerous under-thought ideas? That’s how the open, collaborative web works, not private industry.

Do you like the idea of being able to exert control over websites with things like user stylesheets and web extensions? That’s not a thing on native apps.

Plus like, how do you even look up how to build native apps without websites amiright.

Anyway, it would suck, so let’s not have that happen. PWAs (Progressive Web Apps) are a perfectly good way forward, and Project Fugu has been doing well ensuring web apps “close gaps” on APIs needed on the web. What we need to press for is equal API access and capabilities for the web on all platforms and equal discoverability and distribution of web apps through app stores.

Better yet, let’s ditch the idea of native apps. All web! All web! All web!

Oh, and whenever Net Neutrality comes up in politics again, fight for it.

Related-ish:

Henrik Joreteg: Betting on the Web

Andre Staltz: The Web Began Dying in 2014, Here’s How

Parimal Satyal: Against an Increasingly User-Hostile Web

Anil Dash: The Web We Lost

View Details

When you hear me endlessly prattle on about how you should have your own site, publish your own feed, and the general power of writing, I mean it. But why? What’s the point of writing on your own site? So many.

Building an audience, because those people will help you with whatever your other goals are.

Gaining industry respect, such that it opens doors to other opportunities like conferences and jobs, which in turn open more doors.

Having your own personal reference to things you spent time thinking about before but are likely to forget.

Providing a place for friends and family to get to know you better.

Clarifying your thinking on a subject tremendously.

Not to mention it’s fun! But there can be money in blogging too:

You can run display ads.

You can use affiliate links.

You can offer paid memberships.

You could have a job board or paid classifieds.

You could publish sponsored content.

Heck, you could sell the whole blog one day.

You don’t have to do any of these things. They might be a complete and total turn-off for you to even consider. Fair enough. But for some of you, it might provide motivation. I started CSS-Tricks for the beer money, ran it for over a decade profitably and ethically, then sold it. I was motivated by lots of things, chiefly that other humans read what I wrote (!!), but also potential profit was a fun game to play. My CSS-Tricks outcome is probably not a super likely outcome for most blogs unless you’re trying to make it a career as I was, but it’s not outside the realm of possibility.

I would add that you’re most likely to do well at the money angle if you do it from your own site and you do it under a site name that isn’t, like, your human name. It seems to me the vast majority of people (and businesses) that do well with blogs do it on their own terms, not by flipping some profit-sharing switch on someone else’s platform.

That’s not to say you couldn’t start on some other platform and move. I find moving platforms a highly likely path for most long-term blogs. Manuel Moreale has a recent decision-making post on all this. I’ve had a lot of luck with WordPress myself, but as long as you like the authoring experience with whatever you choose, you’ll be good.

View Details

I wrote about The Perfect TV for 2022 recently, but it wasn’t a shout-out to any particular TV. It was just a list of things I think would be ideal in a TV these days. Some of the things I listed are just a pipe dream, like a TV that has literally no user-facing software at all and just displays whatever HDMI source it is getting (not going to happen based on how TVs are subsidized).

I was thinking about TVs because I was in the market. This week I did actually pull the trigger on a new TV. After a decent amount of research on what would be a very good choice in the 65″ size, I’ve landed on this:

Sony A95K

That’s an Amazon link, but I actually bought it from Best Buy because, well, I kinda like Best Buy and wanted a protection plan in case I did something stupid like drop it. I prefer a local place to deal with, especially for such a large object.

It cost me three grand. You definitely don’t need to spend three grand on a TV. I just wanted to because it was a little opportunity to geek out and have fun with something tech-adjacent. Our last TV was $350, had it for 5-6 years, and never really hated it.

I wouldn’t judge the TV by my phone pictures here, I have no idea how to take a proper photo of a screen, I just wanted to show something.I’m very far from a TV expert, but here’s my personal rundown.

What’s good about the Sony A95K? * The QD (“Quantum Dot”) OLED display looks amazing. I like thinking about the fact that my iPhone’s excellent screen is OLED and now my TV has that same kind of great bright screen, but seems richer and deeper, especally in the blacks, which is about as technical as I can speak display technology. Best I can tell, it’s the nicest display you can get right now — going head-to-head with the likes of LG C2 and Samsung S95B — but with the Sony being a little ahead despite betting later to the OLED game. It’s not 8K, but I figure by the time that matters I’m fine with being back in the market. It has all sorts of internal processing software (i.e. “Intelligent TV processing technology with Cognitive Processor XR”) to improve viewing that I’m just going to trust is doing good things. * The Google software on it is almost eerily happy to stay out of the way, which I find delightful. I didn’t even sign into my Google account at all. I have everything I possibly can turned off. All I want is to use my AppleTV 100% of the time, and the TV seems fine with that. I tend to get annoyed at TV software inserting itself into the TV usage experience, so any TV software that stays out of the way gets a thumbs-up from me. * The standard remote instantly worked as an AppleTV remote without me having to do anything. Nice touch. I’d actually use it, but it doesn’t have swipe-scrubbing, which I consider a crucial feature. Or maybe I will end up using it because there is a “find remote” feature you can access from buttons on the TV itself, which is a genius feature. * The eArc support works great. My dream setup of an entire setup, including an amp to power my speaker system that is wholly controllable via just the AppleTV remote, continues to work flawlessly. * Very slim mostly equal-width bezel around it. Classy.

What’s meh about the Sony A95K?* It seems to be proud enough of its speakers that it has input offering to make the TV speakers the “center” speakers of an audio system. Nah, I got my own center, thanks. I would have preferred the cost savings of having zero speakers and no mount at all, but I get that’s probably too niche. * I didn’t realize it came with a top-mounted camera for controlling the TV with gestures. So far, I have it enabled, but it’s a little odd. How much electricity is being spent with an always-on camera processing what it is seeing at all times? I haven’t found it works amazingly yet, but I have only tried the “error on accuracy” setting so far, and I suspect the “error on speed” setting might be more satisfying.

Oh yeah, that color you see behind it is just a Philips Smart LightStrip I stuck on the back of it, not a built-in feature.

None

View Details

I friggin missed what turned about to be the very last An Event Apart (AEA). No tears though, just a salute to a legendary run.

Thanks for unearthing the photos, Jim.September 2013 was my first AEA ever, in Austin, Texas. It was a huge moment for me. In my mind, AEA was the top of the top for our industry speaking events. Speaking at it represented “making it” in a way that was important to me at the time. The best minds were on that stage, who all had important industry-bending ideas.

It’s 2013 today, so with a little rounding, we can call it a 10-year run! I was very lucky to have been invited to more:

2013 Austin

2013 San Francisco

2014 Seattle

2014 Washington, DC

2014 Austin

2014 San Francisco

2015 San Diego

2015 Chicago

2016 Orlando

2017 Seattle

2017 Boston

2017 Chicago

2017 San Francisco

2017 Denver

2018 Seattle

2019 Seattle

2021 Spring Summit Online

2022 Spring Summit Online

2022 Denver

2022 San Francisco (Online)

A decent set! I’m just so, so grateful to Eric, Jeffrey, Toby, Marci, and everyone else that operated AEA for all those years. They always took way too good of care of me and showed the world how professional and well-done an event could be. Because of them, I went places I never would have gone, I met people I never would have met, and I’m darn sure it helped my career take shape.

As a developer with several AEA talks under my belt, I’m sure it didn’t hurt my acceptance into the A Book Apart world. AEA allowed Dave and me to do live ShopTalk Show episodes many times as well, which likely helped us find new audiences than we wouldn’t have otherwise.

Me with some friends in Austin like Samantha Warren, Val Head, and Ethan Marcotte Another thing happened during that first-for-me AEA in Austin. Dribbble hosted a meetup in town that lined up with it, and I went to it.

I remember there being quite a few people there and being awfully fun. That was influential to my thinking at CodePen at the time, and the next year, with the help of Katie Kovalcin who also helped with the Dribbble meetup, we hosted the first-ever CodePen Meetup there and it went well enough that we ended up doing 299 more of them all over the world before retiring them.

So long and thanks for all the fish.

Rachel Andrew: Thank you An Event Apart

Jeremy Keith: An Event Apart

View Details

I tried to disambiguate Integration Testing from End-to-End Testing the other day. It was helpful for my own brain to finally have a way to bring a meaningful difference between these two things. I wrote:

Unit and end-to-end tests are the extremes on two sides of a spectrum. On the left, unit tests, little itty bitty sanity testers. On the right, end-to-end tests, big beefy (cough; sometimes flakey) tests that prove that lots and lots of systems are working together as intended and what a user experiences is in good shape.

I don’t mind the “spectrum” idea. There clearly isn’t just one kind of test, there are different types of tests for different reasons and they are all useful in different ways.

A pyramid is actually the more typical way to talk about this. The point of the pyramid is that it has this wide base at the bottom, and that represents unit tests because they are supposed to be foundational and you probably have a ton of them. At the top “User Interface Tests” (what I think a lot of people including me would call an “End to End Test”) of which you’ll have less of, in part because they are slower to run and test so many things you probably don’t need as many.

So… pyramid? spectrum? What are we going with here?

Alex doesn’t like ’em:

I have always found the Unit, Integration, and End to End testing pyramid to be a bit… clunky? The names describe how much you are testing, which is great, but it doesn’t give much perspective as to what you are actually trying to test.

Rather than give a name to a specific kind of test to describe how much you’re testing, name them according to what you are testing and why. So:

Developer Interface Tests

Consumer Interface Tests

User Interface Tests

… maybe next time you don’t know how to write a test for a thing, you’ll ask yourself “Who am I writing this test for?”

View Details

It was over 10 years ago now that I did my first and only Kickstarter campaign. The point of it was to shoot a series of screencasts on rebuilding/redesigning CSS-Tricks itself, a WordPress site, and giving the backers access to those videos. Meta, as even building those access controls was part of the series.

I never really wrote a retrospective on all that. It’s so long gone now that most details of it have faded to memory. Except for a few things that have really stuck with me.

The grand total was $89,697. That was incredible, considering the $3,500 goal and my truly meager expectations. You never know how many real fans you have until you put it to the test. Asking them to open their wallets is a real test.

I felt like everyone watching was thinking, “Welp, Chris is rich now.” I don’t know if that’s what people really thought or if it was just in my head. That total was a year’s salary for any job I had up to then.

How it actually played out is that the money disappeared very quickly. Between fees, taxes, fulfilling rewards, and paying people to help make the project better, it was net negative.

Kickstarter did what it was supposed to do, it kickstarted an idea for a business. It wasn’t the business itself. It’s easy to forget that when backing a campaign.

The biggest mistake I made was that some time (years?) after this was all said and done, I told the original backers that their access to “The Lodge” (the exclusive access area where the screencasts were) was going to expire. I think there was some technical limitation I was up against (or thought I was), and it felt fair to me at the time. I asked people to help me start a business, and they did, and had plenty of time to watch or download everything I promised. But plenty of people were upset with me when I revoked that original Kickstarter-granted access. I never promised access was forever, but expectations were still broken, which didn’t feel good.

The most memorable feeling of all:

I really didn’t like the feeling that people had already given me money, and now I owed them something that I hadn’t fully created yet. I’m far more wired to work hard, take risks, and make something, and then if I do a good job, the money comes. I want my motivation to come from the possibility of success, not from debt.

View Details

From Karl Sutt’s post How to communicate effectively as a developer, two images:

The images on the left are what Karl calls “low resolution” writing, while the right is “high resolution.” Pretty obvious when you look at it here, but high resolution essentially means more specific, detailed, and includes necessary calls to action. It’s extremely easy, in the context of something like Slack, to be low resolution. Watch for it!

I like Karl’s post in part because you might hear people ([cough], like me, regularly) talk about the importance of writing. I rarely say it, but I mean any writing. Not just stuff like documentation, emails, and blog posts, but short-form and often casual writing as well, like Slack and GitHub comments.

View Details

A few weeks back we braved a snowy 3-hour drive up to Hood River so we could ride the Christmas Train. We arrived the night prior and stayed the night at the absolutely lovely Hood River Hotel right downtown and smack dab next to the train station. I booked a suite room just in case we needed a bigger room for the kids to play in (we went with another family). The suite had a kitchen and a living/dining room area in addition to the double-bed bedroom. In the dining room, they put a little Victrola record player on a small cabinet with a dozen or so records.

On the player was the 1967 Rolling Stones compilation record Flowers. It was on the B side, which started with Backstreet Girl. I already knew the song well, as one of my favorite bands, Golden Smog, covered it on their debut album which I’ve listened to a billion times.

It was wonderful hearing that old song, on an old vinyl record, on an old record player, in an old hotel. It was just a mood and I was there for it.

I thought I might try to recreate the sound just for fun.

Buy the song from the iTunes Store. $1.29 — no DRM. Download it.

Found Dust ‘n Scratches, a vinyl noise “generator”, and give them a few bucks to download a custom vinyl noise.

Drag both tracks on top of one another in Screenflow. Adjust levels so it sounds about right.

Export as AIFF. Convert to MP3. Put in audio element.

Here are two minutes of that, just truncated so maybe I don’t get in trouble?

Doesn’t quite capture the mood but I was just smurfing around anyway.

View Details

I learned the game “Celebrity” ages ago at a conference afterparty. I always struggle to remember how it works, but I often think about it when the opportunity to play a game with a group of people arises because it’s fun and can be played easily with minimal equipment.

I’m going to write down how it works here so I can always find it.

Split into two teamsEqual players on both sides. The more, the merrier. You might be able to do it with 4 people, but something like 8 or more is far more ideal.

Everybody gets 3 slips of paper.Make them all as close to the same as possible, so no single slip of paper looks any obviously different.

On the paper, write the name of a celebrity. Living or dead. Real or fiction. Just a name that pretty much anybody would know. For example, Steve Jobs, Captain Crunch, or Melissa McCarthy.

Fold up all the slips of paper the same and put them into a pile.Ideally, somewhere all the players can easily reach the pile, but you can always move the pile if you need to (maybe use a bowl or something).

One team goes first. One player from one team is first up. It doesn’t matter. The person to most recently have eaten a bologna sandwich, say.

ROUND ONE: Say anything (except the name).A 60-second timer (use your phone) starts when the player first picks up one slip of paper. They can say whatever they want except any word on that slip of paper. Say it’s “Steve Jobs”; you can say “famous co-founder of Apple… wore black turtle necks…” but you can’t say “his job was working at Apple.” As soon as someone from their same team (the other team stays silent) shouts out the answer, the player drops the slip of paper into their own temporary pile and grabs a new slip.

That player gets as many slips as possible before the 60-second timer runs out. If they are working on one while the timer goes off, they must put it back into the main pile. Keep the ones they got correct out of the same pile. It’s possible to spend the entire 60 seconds and not even get one.

Probably, the entire main pile will not be gone. Now it’s the other team’s turn, and one player from that team goes (just pick someone). They do the exact same thing, saying stuff and having their teammates guess, getting as many as they can.

The team back-and-forth goes on until the entire main pile of slips is gone.

Each team gets one point for each slip they got.

Now all the slips get re-combined and mixed up into one main pile again.

ROUND TWO: One word.The same exact procedure happens again. The other team can start first this time, probably the player who is next up in the rotation.

The player grabs a slip of paper for their team to guess, but this time, they can only say a single word. Say it’s Steve Jobs again, they would probably say “Apple”, and someone would guess. This is the fun part; little in-game memes develop, so it pays to be paying attention at all times, even when the other team is playing.

Back and forth until all slips are gone.

ROUND THREE: Charades style only.Same procedure again, back and forth with the teams.

This time, no words or sounds at all. You have to act it out. Maybe act out taking a bite of that Apple or something.

EndingOnce all three rounds are complete, tally up the points that each team got in each of the three rounds. The team with the most points wins.

View Details

A Discord friend shared this link the other day: infinitecanvas.tools:

The infinite canvas is the foundation of a new class of apps from design tools, to code editors, and workspaces.

So like Figma. You essentially have unlimited space in all four 2D directions to create things and drag them around. That is as-opposed to apps that force you on to a fixed-size place, like a Photoshop document.

I think all four directions is an important distinction. You might call Google Docs “infinite” in that it expands downward infinitely, but it ain’t an infinite canvas app. The point of infinite canvas apps is that it is like having a very gigantic desk where you can spread things out any-which-way you want and your own body never gets in the way. I’ve heard people say it’s about “matching how they think”.

I categorize tools like this as position: absolute; tools, because of my CSS brain. You drag things exactly where you want them and they stay there. There is no flow or responsiveness on purpose. Some people love it, and some people hate it. I know someone that liked most features of Microsoft’s OneNote but thought the infinite canvas aspect “ruined it.” I can respect that. I’m not sure note-taking is where you want absolute positioning. I’ll bet ya a million bucks Notion wouldn’t be nearly as popular if you had to drag on fixed-position blocks into documents rather than have them just flow naturally.

Now we have Apple releasing Freeform, which is very explicitly infinite canvas. This style of app is in the water. Speaking of Figma, FigJam is only a year or so old, and that’s proven to be popular. The browser that I’m writing this in, Arc, has “Easels” which are almost infinite canvas (you can’t go up). Invision Freehand, Microsoft Whiteboard, Miro, Muse… the list goes on. Even Zoom slapped on an infinite canvas whiteboarding tool, which seems smart.

Figma and Sketch have artboard concepts that bring a fixed-size space to an infinite canvas, which is kinda great as you get the benefits of both.

What do you make of all this?

View Details

Ash Huang & Ryan Putnam on a microsite:

For the month of January, we’ll make a pact to blog a few times to get into the habit, and create a directory of all the creators who participate. Readers can then find new makers to follow before we all scatter to the winds. Win-win!

I’m all about blogging, obviously. Do their challenge!

But also.

I wonder if the term “blog” has too much baggage. Too much history for it to really catch on again and make a dent.

Maybe “publish your own feed” is a better framing. “Own your RSS.” A feed doesn’t care what it contains. It is content-style agnostic. It’s just timestamped HTML, in a way. Put some audio in it, and it’s a podcast. A feed could be exactly what you would have tweeted before tweeting became cringe.

I’m starting to see this a little, and I like it. For example, Adam Argyle’s site is essentially a feed of tweets. If you like the format of any particular social media site, your feed can copy that format. Acceptable and encouraged.

Any template-powered site-building software can produce an RSS feed. Loop over your most recent content and spit out feed-friendly code. Now make the feed prominent on your site so people can find it. Done! Hey CMS’s: make cool-looking templates that encourage publishing unique types of feeds. Think photo-of-the-day-with-caption. Think that-old-140-character-arbitrary-limit. Think dream-journal. Think list-of-the-day.

Making a dent then is a two-parter:

You (and everybody) start publishing a feed, and don’t be shy about it.

You (and everybody) make reading feeds one of your primary modes of content consumption.

Doable.

Maybe, as Jacob O’Bryant suggests, we can rebuild social media on top of RSS.

View Details

The only way for us to move forward is to encourage and amplify the work of people who are willing to learn, to see and to commit to making things better.

It turns out that reading and writing are the cornerstones of this practice, now more than ever. These are the two skills most likely to produce exponential results.

The effective writer can see their ideas spread to a hundred people overnight, or perhaps a million. Writing is still the bedrock tool we use to codify and share ideas, and it forces us to organize our thoughts.

Seth Godin, Our dreaming opportunity

View Details

Matthias Ott has been linking up Type Foundries all month. Pretty rad idea!

I’m just an absolute sucker for buying type sometimes, especially right now as I’ve happily moved to Typeface 3 and I enjoy using it. Plus, I’ve been slowly evolving this sites design and it’s a very different site than where it started, but the type hasn’t really evolved along with it.

So, from his Day 17 writeup on Studio René Bieder I ended up buying Neue Faktum Condensed (just in Semibold) for the headers on this site.

Neue Faktum Condensed in SemiboldAnd for the body copy, from his Day 21 writeup on HvD Fonts, I went with Brix Sans (got Regular, Regular Italic, Bold, and Bold Italic). Brix didn’t seem particularly highly featured, but it looked to me like what they were using as the body copy on their own site. It looked good in that context and what a foundry uses for itself is a high endorsement!

Brix SansIt looks like this together right now:

View Details

Ya know, like:

Doc Martens & Dewalt

Louis Vuitton & Lucky Charms

Red Bull & Tobasco

Arby’s & Porche

I was hoping to make my dream come true with Advil & Legacy, alas, neither is available, so I had to request Colgate & The North Face (published and not that interesting, oh well).

Don’t read too much into “engine”, I think dude is probably just using Stable Diffusion or DALL•E and attempting to get something interesting. Most of them look like about what you’d get typing in basic brand terms and nouns. Still very clever and fun.

(via Rob Walker in FastCompany)

Ever wonder exactly how these AI image generators work? I think we all know they are trained on massive image sets ethics-be-damned-ed-ly scraped from the internet. But then what? What does training really mean and how does it craft new images from this pile of data?

The Washington Post did a great job of explaining. During training, noise is added to the images, obscuring them, and the job of the engine is to still recognize the images despite the noise, and also learn to de-noise it. They get super good at de-noising images, of which they also know what the original description of that image is. Then, they are provided with a totally randomized square of noise, given a prompt that a user like you or me provides, and told to de-noise it. Even though the original is just random nothing, the engine will try its best to de-noise it based on everything it knows about the words in the prompt, thus giving us these weird and wonderful creations.

View Details

I was reading Hafsah Lakhany Ismail’s Our favorite Chrome extensions of 2022 post the other day and made it a point to try the ones that looked interesting to me. There are some good ones in there!

One standout to me was Tango. They say:

Create how-to guides, in seconds.

They aren’t wrong! You literally just do something on a website while it is “capturing” you, and it turns your actions into a step-by-step formatted web page with what they call “perfectly cropped screenshots”.

Check out this one I made in about 20 seconds on how to add an HTML snippet in CodePen.

“Instant documentation”, they say. If you could pluck these out in some kinda nice way to put on your own website, I could see them being used for real product documentation. How fast they are to make is a big deal. Product screenshots go out of date SO STINKING FAST it’s tempting to not use screenshots at all. But if you can re-do them in a few seconds, hey, that’s something. But even if you don’t use it for docs, using it in customer support to literally show someone something could be awful handy.

View Details

A quote from Luke Harris I’m sniping from Rach:

I’m on Mastodon, but I’m bored of what I call “the timeline era”. Scanning an unending stream of disconnected posts for topics of interest is no longer fun, I prefer deciding what to read based on titles, or topic-based discussion.

I keep thinking about that. I wonder if people, generally, are growing tired of seeing an unending stream of disconnected things. Surely some are, but I don’t think so overall. People aren’t leaving Twitter because they don’t like Twitter and that endless disconnected stream; they are leaving because the owner is a bad person. All social media is an endless stream of disconnected nuggets these days. TikTok is nothing but forever swiping and being fed nuggets the great algorithm thinks you will like.

There is something to think about here, though, and I think it has to do with moods. Different moods and different situations mean a different tolerance for consumption.

Morning/focused/well-rested: I like my RSS feeds. Still random and disconnected, but far less random than social media is, because I’ve hand-chosen the feeds and there are no algorithms at work.

Long day/Exhausted: Feed me random nuggets! I just want low-effort entertainment. Algorithmically personalized to me is fine and actually kinda good.

Chill weekend/freezing cold outside: It’s book time.

That’s just spitballing a little on this. I guess my point is that sometimes I want the disconnected randomness of social media because I’m a zombie anyway, and I have zero effort points to give. It’s the channel surfing of yore. The more mental energy I have, the less it should go toward randomness. That time should be more focused and well-considered. But it’s all-too easy to mismatch moods and attempt a mode of consumption that isn’t the right vibe.

Related?

I saw this post by Maximillian Piras that had some design concepts for Twitter in it, like:

The point there was feeding the algorithm by being able to measure time-user-stared-at-tweet, apparently. But to me it also reads like: we know all these things are random and disconnected; here’s a way at least to only look at one at a time.

View Details

Just a couple of ideas! They came to me while I was poking around thinking of something to say for Alex Trost’s Holiday Mega-Stream (my segment starts here).

Styleable ResizersYa know how a `<textarea>` is resizeable by default?

That’s a nice default. If users are typing, they should have some control over how much space they have to do it. This type of resizing isn’t limited to `<textarea>`. You can make anything resizeable so long as it’s not an `inline` element and it has `overflow: hidden;`.

`div.resizeable { overflow: hidden; resize: both;}`Code language: CSS (css) There is also some degree of control. If the `direction` changes to `rtl`, the resizing happens from the bottom left (inline-start block-end) direction instead. You can scope the resizing to one direction with `resize: vertical || horizontal` — or turn it off with `none`.

What you can’t do is style it in any way. Well, you could position some element on top of it with `pointer-events: none`, but that’s a weak workaround that doesn’t, for example, affect the interactive area.

That’s too bad, as styling form controls has come a long way, and that’s essentially what this is. Lemme make that resizer match the other styling decisions on my site!

Most importantly, though, I want to be able to move and resize it. I’d like it if, say, I’m making a `resize: horizontal` element, that the entire inline direction edge is a drag handle. If this was possible it would reduce as much need for heavy JavaScript libraries that help with this.

It would be nice to make that entire orange bar a drag handle.And speaking of `resize: horizontal`, shouldn’t `resize: inline` (and `resize: block` respectively) work?

That resize handle is a thing that appears in Shadow DOM, as best as I know. Just like number incrementers of a `type="number"` input, or the track and handle of a `type="range"` input. We have been able to reach in there to style things, but it’s always been fraught. See A Sliding Nightmare: Understanding the Range Input by Ana Tudor.

It may be that the standards organizations don’t want to specify Shadow DOM implementations, so the implementing browser has some freedom. But that’s putting browsers ahead of authors ahead of users. This is something that would make things better for users, and authors want to do it, so let’s put them over browsers.

CSS should be able to make a middle dragger bar like this.Flowable RegionsWith `columns` in CSS, you can make text that flows into multiple columns. But this comes with some pretty extreme limitations.

All the columns have to be of equal width, for one, and you can’t force an element across multiple columns naturally, which is awfully restrictive. Worse, you can’t tell the content where to flow after it “fills” the columns — the area either grows in height or overflows. A situation where a user needs to scroll down to read, then scroll back up to read the next column is unacceptable UX.

Now that we have strong `grid` layout, allowing content to flow naturally to a defined arrangement of elements placed on the grid would be very nice. I should be able to do this:

Not hard to imagine this kind of thing as a web layout.Circa 2014, Adobe took this up as a pet project. This was an absolutely perfect project for them, as doing this kind of thing in an app like InDesign is, well, the point of using an app like InDesign, which is used for just a massive swath of all design headed for printing.

Then the “father of CSS” swooped and pooped all over it with a bunch of arguments that I thought were dumb and bad then and I think are dumb and bad now.

It looks like the spec has been picked up as of 2021 again, and I love to see it.

`#this { flow-into: my-flow;}#there { flow-from: my-flow;}`Code language: CSS (css) Standardized Multi-Line TruncationDid you know all browsers now support truncating text to a certain number of lines? I wouldn’t blame you if you didn’t, because it needs all this code to work:

`.line-truncate { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}`Code language: CSS (css) That’s wild. That’s a very ancient flexbox syntax and an invented line clamping syntax all vendor-prefixed up, plus an awkward required bonus requirement (the hidden `overflow`) which has sucky side effects (sorry, no `box-shadow` for you!).

I’d prefer:

`line-clamp: 3;`Code language: HTTP (http) Browsers can clearly do it! Make it easy!

Mixins & ExtendsIt would be nice to say hey selector, do all the same styling as this other selector. Sass does that like:

`.some-selector { padding: 1rem; border: 1px solid black; border-radius: 5vmin;}.some-other-selector { @extend .some-selector;}/* Outputs like....some-selector, .some-other-selector { ...}`Code language: JavaScript (javascript) The trouble with that is those selectors might be in very different places in the Sass, and what you are extending doesn’t necessarily have to match the same specificity, so there are some real source order and specificity challenges with it. The browser could do extends much more naturally, essentially embracing the hey selector, do all the same styling as this other selector spirit without all the awkward compromises.

Alternatively, mixins could be like this:

`@mixin stuff-to-reuse { padding: 1rem; border: 1px solid black; border-radius: 5vmin;}.whatever { @include stuff-to-resuse;}`Code language: PHP (php) With Custom Properties, we wouldn’t even really need to ability to pass in parameters to a mixin because you could use the selector scope for `--whatever-you-want`.

Weird twist… Style Queries will kinda be able to do this. Take that multi-line clamping idea… it could be done like this:

`@container style(--clamp: 3) { .card { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }}.random-element-with-a-card { --clamp: 3;}`Code language: CSS (css) That feels a lot like a mixin to me. But I’d prefer a more direct syntax. I also think we essentially need either mixins or extends, probably not both.

Single-Line Truncation from Either SideApparently, truncation is on my mind. You can also truncate a single line. Also requires multiple properties:

`.single-line-trucation { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}`Code language: CSS (css) This time it doesn’t really bother me. Maybe dropping the `overflow: hidden` requirement would be nice, but having to stop the wrapping for single-line overflow is fair.

Here’s the problem, though: this will only trigger the ellipsis on the `inline-end` side of the element. You can’t tell it to truncate from the other side.

This matters, as what if the “important part” of the text is actually at the end? Like, say, a file path.

You can “trick” an individual element to truncate on the other side by reversing the `direction`, but, ehhh, that doesn’t seem like a good plan for text that isn’t actually in that direction (I gotta imagine there are bad accessibility implications to that).

Animate to AutoYou cannot truly smoothly animate from `height: 0` to `height: auto`. This is a huge bummer as something like an accordion design pattern has arbitrary height content in the panels and should be able to contract to zero then expand out to “whatever the natural height is” in a consistently-timed and smooth way.

`.this-should-just-work { height: 0; transision: height 1s;}.this-should-just-work[data-open] { height: auto;}`Code language: CSS (css) There are poor ways around this, like animating `max-height` instead (no smooth ending, have to guess at sizing) or using JavaScript to animate instead. CSS should be able to do it. It can’t be that hard, right?!

Weirdly enough, there is a pure CSS trick today involving animating `grid-template-rows`. Here it is. Start with a wrapper to set the grid on:

`<div class="content"> <div class="inside"> Totally arbitrary content! </div></div>`Code language: HTML, XML (xml) Then set it up like this:

`.content { display: grid; grid-template-rows: 0fr; transition: 1s; overflow: hidden;}.content .inside { min-height: 0;}.content.expanded { grid-template-rows: 1fr;}`Code language: CSS (css) So all you gotta do is toggle the class `expanded` on the parent wrapper there and it’ll work.

CodePen Embed FallbackI was just messing around with this the other day when I noticed the “dynamic island” on iOS can morph to whatever needed size too, so I made a demo of that:

CodePen Embed FallbackNestingClearly.

View Details

These are a thing these days.

Maggie Appleton put a point on it in a recent article: Command K Bars. She makes the point that they date back quite a way, to “Spotlight” in macOS Tiger. Twenty-two years later, we still have Spotlight:

Tools like Raycast and Alfred arguably take this same concept up a level by doing more and offering more customization.

That’s OS software, and it makes great sense there, but these Command Bars are making their way to the web as well. For example, just in React-land, there are three major projects:

cmdk

kbar

react-cmdk

We’re peak jQuery plugins React components, eh?The SasS startup CommandBar productizes the whole idea and helps you add the feature to your app including integrations with other services. Other software considers it a big feature release when they ship a Command Bar (see Polypane). And yet other attempts to jack in Command Bars into other software that could use it (see Turbo Admin for WordPress).

What do these Command Bars do? I think of it as a potential three-punch:

Run, Jump, or SearchAs in:

The app does things, so if the app, say, calls people, and someone types “tasks” into the Command Bar, it should get them to the interface for tasks. “New task” would at least attempt to interpret what the user is trying to do and do it (bring up the task-entering UI). Run a command, as it were.

Quick navigation is another possibility. The more complex an app, the more places to get to, the more a user might appreciate being able to jump somewhere based on some entered text. “Latest invoices”, for instance, could jump you to a page of the most recent invoices sorted that way.

Search might be the primary activity for a Command Bar, but I also generally think of it as the fallback. If there is no other clear match for something to do, execute a search.

This means the results of a Command Bar need to be ranked. Ranking is hard. To compound the hardness, fuzzy searching should work (e.g. common misspellings should be worked around) and general human-language input should be accepted (e.g. “go to contacts” means they are trying to get to contacts, not that a search for that exact phrase should be done… probably). Tough stuff — good luck!

What these bars do will highly vary on the app itself. I can imagine situations where search isn’t particularly relevant so it’s only a navigational thing. Or that it has been decided that search is an entirely separate experience. And we can see with stuff like Spotlight that it’s almost entirely search — you don’t run commands at all.

I do want to dwell on the command to activate the Command Bar a bit, as that’s pretty crucial. Sometimes they have no UI whatsoever and rely entirely on a keyboard command to bring them up, so if you hope users actually use it, education on the keyboard command is crucial. “Standardizing” might behoove us all.

What keyboard command do they tend to use?We can see from Maggie’s article and from the three React components that Command – K seems to be the front-runner. But allow me to take a gander at some software (mostly that I personally use so I can test it):

| Software | Command Bar Keyboard Shortcut | Jobs | | Front | Command – K | “Go To” | | Slack | Command – K | “Jump To” | | GitHub | Command – K | “Search or Jump To” | | Notion | Command – K | “Search [workspace]” | | Discord | Command – K | “Search for servers, channels, or DMs” | | Spotify | Command – K | “What do you want to listen to?” | | BusyCal | Command – K | Creates New Task | | Vercel | Command – K | Run, Jump, Search | | Framer | Command – K | Run, Jump, Search | | Linear | Command – K | Run, Jump, Search | | VS Code | Command – T | Go To File | | VS Code | Command – Shift – P | Run Command | | Chrome DevTools | Command – Shift – P | Run Command | | Safari DevTools | Command – P | “File or Resource” | | Firefox | Command – K | Focus the Search/URL bar | | Arc | Command – T | Jump to Tab, History Item, Extension, or Search | | Polypane | Command – K | Run, Jump, Search | | Warp | Command – P | Run Command (or @ to Jump to Session) |

Clearly a lot of consolidation around Command – K, but deviation in coding tools. If VS Code started defaulting to Command – K, that would really lock it in. I could see it happening, as best I can tell Command – K doesn’t currently do anything by default in VS Code.

I’m a little surprised that more apps don’t have more prominent UI for activating and using Command Bars, relegating it to a keyboard command only. If the app has a Search Bar, be bold! Turn it into a multi-capable Command Bar! Or some kind of icon button to activate it.

Maybe Command Bars should attempt a “standardized” icon as well. Like it or not, the hamburger icon has really locked itself in for site-level menus. Could happen here.

Where do Command Bars really help?It seems to me they are almost always “bonus UX”. Rarely are they ever the only way to do things, they are just another way to do things. But if they are well done, they might just become a better way to do things. Better — in that, once you have that one keyboard command memorized, it becomes essentially a shortcut for anything you want to do. The more complex an app, the more benefit (stares intensely at Photoshop).

View Details

There are some URLs that make a ton of sense to force-open in specific browsers:

A Zoom URL should just open in Zoom, not open a browser, then open Zoom.

If you prefer the Notion desktop app, a URL to a Notion page should open in the app.

If you prefer the Figma desktop app, a URL to Figma should open in the app.

If you prefer the Slack desktop app, a URL to Slack should open in the app.

You probably have your own examples, but I can’t imagine the above logic is controversial. Personally, I care more about sending links to specific apps than I do opening certain links in, say, Firefox vs. Chrome.

The trouble is, there is no nuance on macOS as to what app links open in. You set a default browser, and that’s that. There are options (on macOS), though!

Choosy: $10, normal app, has a UI to configure and an interstitial UI (optional).

Velja: free, similar to Choosy but fancier in some ways.

Browserosaurus: open source, install from `brew`, pretty light on configurability, forces an interstitial UI.

Finicky: open source, install from `brew`, highly configurable through JavaScript, no UI.

That’s a nice selection. Spans the nerdiness spectrum perfectly.

View Details

I was watching this video about some dudes on a 5-day Alaskan ferry. One of the dudes had this shirt that said “Press Publish” on it and I thought that was cool.

Turns out, it’s a little shop which comes right up web searching for that phrase. I like the sweatshirt a lot. The full phrase “Thank you for Pressing Publish” is just wonderful.

And that storefront is for a newsletter about the creator economy by these other dudes that have a big YouTube channel. I’ve been getting the newsletter and it’s pretty good.

I just got the hat.

I’m gonna hit the blue button that says Publish in 3… 2… 1…

View Details

It’s called: Syntax-highlighting Code Block (with Server-side Rendering)

Weston Ruter really got it right:

The SSR bit is huge. No client-side JavaScript means better performance: the first render of code is already highlighted. The `<span>`s and whatnot are part of the content, so wherever it syndicates can benefit from the highlighting if the proper CSS is in place. Looks great in Feedbin.

It uses the default code block. It’s not some additional block you have to opt-in to using. It just extends the block that already works well. That means little stuff like using “` triple backticks to start a block keeps working as well as color/size. Also, big stuff like all old blocks of code benefit from this immediately.

It supports a zillion languages but also can auto-detect, which is good for old blocks.

It can highlight lines, and that even works in the admin, with synaptic `<mark>` elements.

It can add line numbers if you want

It can wrap code or not wrap code

I once built a custom code block plugin that was largely based around this idea, and it worked pretty well, but it still relied on client-side JavaScript and it was a custom block. The one thing it did better was that it displayed the syntax highlighted code in the admin where this doesn’t. But I much prefer this approach and how with-the-grain of WordPress it is.

That’s actually Go, but good guess really.

View Details

Elon isn’t the only person who has recently purchased a large-scale social network. Matt Mullenweg snapped up Tumblr back in August for the “de minimis” sum of 3 million (it takes far more than an order of magnitude more than that just to run Tumblr for a year). Nilay Patel has a great interview with Matt, where he behaves like a frickin’ normal ambitious-yet-empathetic CEO. Here’s Matt on the challenges of moderation:

There’s a phrase we use for a huge amount of speech, and that is “lawful but awful.” It might hurt people’s mental health, incite harm, or be really mean, like bullying, but it’s not technically illegal. We’re a private company, so I guess we could host it if we wanted to, but you need to think about your responsibility to society and to your users. It’s as if you were hosting a party. It behooves you to provide a safe environment for everyone there that includes food, water, restrooms, and all those sorts of things. I feel like when you’re hosting a social network, it’s your responsibility to provide a safe and healthy environment.

How hard is that? Shouldn’t the default mental state of the steward of a community be: I want this place to be as safe and good as possible for everyone. I was probably a little more “wait and see” with Elon at first than most, but now I’m absolutely abhorred. Trans “jokes”? For real? I’m done.

I’ll bet you a dollar Tumblr outlives Twitter.

View Details

I recently did the BMW Performance Driving School. I took the M1 School, two full days of instructor-driven learning, with 3 other friends down in the Palm Springs, California area.

It’s kinda like training to be a race car driver. They do not coddle you. If anything, they make fun of you for sucking. At first, I found it terrifying. In the very first exercise, we learned we would be driving these cars at their absolute limits. Full accelerator, and to my surprise, full braking. There is more subtlety to it, but you’re essentially flooring it on straights and then smashing the breaks before turns. It took me a while to get anywhere near comfortable with that idea. We topped out at speeds of maybe 145 mph, which was also exhilarating, but the braking to me was still the most intense. I had to sit out a few laps here and there as I was just shaken.

By the end, I was embracing it and really didn’t want to stop. It had to end though, of course, partially because it’s friggin expensive. We learned that they essentially get one two-day M school out of a pair of tires, and maybe a handful of sessions out of the brakes. We’re essentially trashing the cars!

When I got back home I started watching Netflix’s Drive to Survive about F1 racing so now I’m a big fan of that like apparently everyone else in the world. Never thought I’d be a racing guy but here we are.

View Details

Apple made a big deal of their support of Passkeys at their latest developer conference. And rightfully so. I hope they keep making a big deal of it. It really seems like the future of authentication and we should get moving on it, as an industry.

Fascinatingly to me, Apple didn’t invent this very Apple-sounding word. I guess they did invent it! Still — It’s a standard that everyone will use.

Just this month Google is rolling out support in Chrome. Microsoft is already in on all this. This is great news, as Passkeys can’t really take off unless there is broad support of the technology, such that it motivates other software teams to start implementing it. So far so good:

On Monday, PayPal said US-based users would soon have the option of logging in using FIDO-based passkeys, joining Kayak, eBay, Best Buy, CardPointers, and WordPress as online services that will offer the password alternative. In recent months, Microsoft, Apple, and Google have all updated their operating systems and apps to enable passkeys.

Even 1Password is going to help — which is great for syncing them across devices and sharing them between users and such.

I’d like to tell you CodePen is working to implement Passkeys now, but our development schedule has some bigger fish on it at the moment. I’m sure we will though eventually as this is great technology and doesn’t seem terribly difficult to implement.

View Details

Marc Brooker lists five ways in which Writing is Magic. They are all true. The first is my favorite.

First, clarity. I’m sure you know the quote “Writing is nature’s way of letting you know how sloppy your thinking is”, and knowing how sloppy your thinking is allows you to sharpen it, test your arguments, and test different explanations. I find, more often than not, that I understand something much less well when I sit down to write about it than when I’m thinking about it in the shower. In fact, I find that I change my own mind on things a lot when I try write them down. It really is a powerful tool for finding clarity in your own mind. Once you have clarity in your own mind, you’re much more able to explain it to others.

View Details

I’ve long been on the “spaces” side of the tabs vs. spaces preference debate. I think there is just something that feels sturdy and reliable about spaces. I’m wrong though. Despite not having swapped over most of my projects, I think that, objectively, tabs are the better choice.

It doesn’t actually matter in code editors. There is no visual difference or UX difference. Either way, press the tab key, code indents using your preference. On any major project, that preference is probably set with an EditorConfig file. And/or, Prettier is used and configured to make sure indentation is consistent. As developers, we care more about consistency than individual preference.

If tabs are used, tabs can be configured on an individual basis to be of a certain length. So if you prefer that short 2-space length, you can have that, while someone else on the project can prefer an airy 6-space length, but you’re both using tabs.

Tabs solve two accessibility issues: #2 above is one of them, and the other is braille displays.

So since it doesn’t impact experience, allows for individual preference matching, and is more accessible, that makes tabs objectively better.

There is also the matter of reading code on the web itself. I was just reading Dynamic Tab-Size Demo Using CSS Custom Properties In JavaScript from Ben Nadel and it makes the same point as #2 above. There is a `tab-size` property in CSS, and that allows for control over how visually indented code can be in a way spaces can’t. See:

CodePen Embed Fallback

View Details

I was a little nervous about the drive to the airport Sunday morning. It was supposed to snow pretty good the night before. It did snow a bit, so I shoveled the driveway before I left at 4:30am for my 6:00am flight. The snow got worse on the drive, but I made it to the airport fine. The snow was coming down in these massive flakes. I pulled out my phone in the parking lot to take a picture.

I got through security just fine. I brought my new small banjo because I really wanted to pick some tunes with Jeremy. When we boarded the plane it was really coming down hard. We waited for the de-icing crew, who were busy with another plane. Then they ran out of fluid and had to get more, then do that same plane again. Wait wait wait. They finally started de-icing our plane… and ran out of fluid. As they were about to come back, nearly 2 hours later, we got word that the crew on our flight had exceed their maximum hours worked in a shift and we had to de-plane. There was no other crew to take their place.

I got rebooked on a flight a few hours later… canceled. Snow was coming down to hard to keep up with the de-icing.

I got booked on a flight 8 hours after that, which I was prepared to wait for… canceled.

I got a “seat request” ticket for a flight the next morning, but I would have missed my talk slot at AEA SF even if I got that seat. They probably could have shuffled things around for me, but I made the call not to go. Driving to and from the airport was dangerous in the blizzard conditions, and I didn’t feel good about leaving the family in that way anyway.

I felt horrible for the organizers. I’ve been to so many AEA events I consider them friends, and I let them down. It sounds like they scrambled to rearrange the first day without my slot.

What I was able to do is sit down at the computer to record my talk and sent it in for them to play at the end of the first day, for anyone who wanted to hang around and watch it.

Screenshot of me apologizing for not being there in my recorded talk.I heard it went OK! I heard good feedback from two people via email, one via Instagram messages, one Mastodon post, and one SMS message, and one passing Tweet.

I find that funny, these days. There was a hay day for Twitter and conferences, where you could give a talk anywhere and the meta-conversation on Twitter would be flying. Well before this current embarrassing period for Twitter, those times were dying off. Now what is left is fragmented. I suspect some of the meta-conversation has disappeared behind private barriers like Discord and Slack. I also suspect some of it died in the pandemic. It’s just not as common to shout to the world you’re traveling and attending large events. Whatever happens to Twitter, those bustling old days are forever gone.

View Details

How do you prevent an image from being downloaded from the web? You can’t!

Terence Eden knows this too, but it didn’t stop him from a very clever experiment. First, split the image into two in some fashion (he made every-other-line interlaced versions). Then…

Using JavaScript the first frame can be rendered onto a `<canvas>` element for a millisecond, wiped, and then the second displayed. Repeat.

So if you screenshot it, you’ll only ever get half of it.

This isn’t a game anyone should ever try to play:

None of it matters of course. If you send pixels to a computer screen, they can be copied. It is possible to slow people down – but all it takes is for one person to work out how your scheme works and then it crumbles to dust.

But I still think it’s clever.

View Details

Before a dissertation on Designing Go Libraries, Abhinav Gupta essentially tries to talk you out of it:

Do you need to write it?

Owning and maintaining a library can be a significant undertaking. The work does not end once the code is written — there is often a never-ending stream of bug fixes, feature requests, new use cases, and integration work that needs to be done. This is true even for libraries that are only used internally within a company. In fact, the more popular and actively used a library is, the more new work it is likely to generate. Maintaining a library is a continuous process, and it’s never truly “done” as long as it’s in production.

Therefore, before embarking on the journey of writing and maintaining your own library, consider whether there are existing open source alternatives that could meet your needs.

Nothing new here, just a classic example of the push/pull of open source. We all benefit so (so so) much from open source, yet participating in it is essentially punishment.

I’ve just spent nearly a month on one of those, as Gupta says “libraries that are only used internally within a company”, thinking hmmm maybe this is a nice thing to open source, but then reality clicks in and I’m like nah I absolutely do not have the spoons for that.

View Details

I was a little skeptical of Arc, a new web browser from The Browser Company of New York. Ooo la la. Yeah, well, I run the Fart Factory of Bend. A small irony is that the pandemic means they aren’t really even in New York anymore. Joke. Ruined.

I was actually skeptical because I’ve tried the ol’ “fork of popular browser, but with improved UI” browsers before, and they never stick with me. I’ve developed some doubts about how much value a skin over an existing browser engine can actually bring. Like, don’t build me a browser with a built-in crypto wallet or whatever. Don’t want it, don’t need it. I’d rather have the lightest-weight browser I can get and let me change things with proper Web Extensions, or so I thought.

My mind has changed. I’m about a month in on Arc now and feeling pretty good about it. I’m not sure I’ve 100% crossed the never going back threshold, but a month is a long time for me. Arc is showing how some thoughtful UI around a browser really can significantly change the experience and possibly literally just be a better web browser.

Darin Fisher made a 🌶️ spicy comment about Google’s inability to do entirely UX focused product development in a Verge article:

… building a great web browser isn’t Google’s only goal. Chrome exists in large part to put a search engine front and center, which Fisher describes to me as like “a brick wall” for all kinds of browser innovation. “Anything we did that helps you get back to what you were doing, it means you weren’t searching, right?” Fisher says. Better tab management means less searching; sending you straight to the page you want means fewer search results and fewer ad impressions. Making you close your tabs and reopen them all the time isn’t just acceptable for Chrome; it’s a victory. Fisher and his team had lots of UI ideas and new features, but “all these good ideas die on the floor.”

Makes sense. It takes a third-party to do this with no motivation other than good UX around the web. So with no further adieu…

Here is what’s good about the Arc browserThe “Nothing at the Top” LookThe tabs are on the side. Really, most of Arc is on the left side. It’s a strong and opinionated choice. There is no setting; that’s just how it is.

It felt weird at first, but side tabs are probably ultimately where browsers are headed. Computer screens are wider than they are tall, so we have more real natural estate in that direction. Look at how natural websites look, especially those with left-side navigation, which seems to be the way a lot of websites are headed.

I think there is some Fitt’s Law at work with stacking navigations to the left.The web just looks good on Arc.

Visual CustomizationYou can re-name a tab. Think how simple that sounds — but I’ve never been able to do that before!

In my screenshots above, you can see a tab at the top (it’s a “Pinned” tab, another idea I like) named “Mastodon”. That’s not what the tab would say by default. That’s a website called Pinafore, and the name would say something like “(1) front-end.social • Home” by default. I don’t hate that, but for my pinned tabs specifically, control over the name of the tab (and icon!) feels great. I use Pinafore as a Mastodon client. When I wanna peak in at Mastodon, my brain goes “Mastodon”, and now the name of the tab matches my brain.

The world’s weirdest color picker. The main idea is: “Don’t pick the color based on what you see in the picker. Play around with the controls while looking at the real interface and keep what you like.”The purple background look in my screenshots above? That’s just how I have it today. I fiddle with it a lot. It’s just part of what they call the “theme”. You can change the color, the graininess, and the opacity. It reminds me of Notion in that it limits what you can do aesthetically. They are nice options, but you essentially can’t screw up. You can also pick icons/emojis for both tabs and spaces, which is also very Notion-like.

Spaces are groups of pinned and temporary tabs. You can give a space a different theme, so it’s more obvious which space you are in. I tried to make a “social” space to group all that stuff, but it didn’t click for me, and I’m down to one space. Part of it is that I use a mouse at least half the time. Spaces are way better on a trackpad as you can swipe between them.

You can also make “super pinned” tabs that persist across spaces at the very top (you only see the favicon/custom icon). There is another reason those are nice: they do some fancy custom background refreshing of those tabs to ensure when you visit them, the site appears to load instantly. That’s the kind of clever engineering I’m here for.

BoostsThere is a little Plus (+) button in the sidebar of Arc. One of the options in there is New Boost. You aren’t dumb and are probably a web person, so this is what a boost is: User CSS and User JavaScript. Mainstream browsers have totally gotten away from this as a core feature, and browser extensions that do it have a sordid history, so it’s pretty great to see Arc pick up the torch here.

You get a full-blown code editor right in Arc, and it applies what you are doing immediately to the browser (see styling changes as-you-type, like CodePen).

Here’s an example of what Pinafore looks like with just a normal built-in theme on the left in Chrome, then I made a Boost to inject my own CSS and override some custom properties and other CSS, giving me a theme I like better:

This is the kind of thing that makes Arc a power-user browser. I’m sure mainstream browsers got away from a native feature to allow the injection of CSS and JavaScript because of security concerns (just follow these instructions to copy and paste this JavaScript into your browser and we’ll send you 100 penguin bucks!!!!). But with a power-user browser… less of a concern.

Of note: Boosts are actually packaged up as honest-to-god Web Extensions. You could pluck them out of the folder they live in and use them in Chrome if you wanted. Clever in how that gets around CORS or CSP concerns.

SyncingYou have to have an Arc account to use Arc. That feels a little forceful, but I get it. At some point, this company is going to have to make money, and I’m sure it’s going to have something to do with having an account. It’s a decent amount of mouths to feed. But you get something for it right away: keeping your Arc browsers in sync. If you have one computer, you won’t care. I happen to have a desktop machine, a laptop, and a second laptop permanently in my recording booth, so the fact that all my tabs are constantly in sync across all of them is a feature I’m finding very satisfying.

I do wish it would sync my Boosts, History, and customized keyboard commands in settings. Maybe that’s the kind of paid feature that’s coming.

Command – TYou’ve got muscle memory for this. You and I have opened 23,482,130 new tabs this month. This is seriously dangerous territory. Do not smurf with my Command – T.

They smurfed with it.

But it’s OK.

Command – T does open a new tab. But it does so gracefully. Maybe, actually, you’re trying to get back to a tab you already have open. This will help with that. Maybe, actually, you’re trying to activate an extension. Maybe, actually, it would be nice to jump back to a page you’ve closed recently but is still in history. These are legit things you might actually want to do, it turns out.

This is tricky tricky tricky stuff. Not only are you taking over one of the most important muscle memory things there is in browsers, you are making the default action a ranking problem. Get that ranking wrong (e.g. go to a tab rather than perform a search) and it’s annoying. But get it right, and you really are doing something new and helpful. Check out the quote from Fisher at the top of this article. This is rubber hitting the road.

Command – Shift – CSuccess MessageThis is so silly. It’s a keyboard command to copy the URL. Why do I need that? I can tell you that I’ve used it one billion times now, so apparently, I do need this. If you’re worried about the URL bar being tucked away, I have a hunch that what you actually miss is an easy place to copy and paste the URL, and once you know if you have a keyboard command for it (plus clickable icon), you don’t miss it anymore. If you really do miss the full-width URL bar, you can activate “Developer Mode” and it comes back.

But there is a bonus!

It automatically removes cruft from URLs! I’ve been happily using TrackerZapper to do this for a while, and it’s cool to see it baked into the browser instead. Say you’re at some URL you clicked from a newsletter, which comes with UTM junk at the end. I’m not mad about it — I just don’t want that when I copy the URL. Copy it from Arc, and boom, it’s gone.

All that `?utm` stuff is gone after copyingIt’s ChromeChrome is pretty popular. There is a good chance you like Chrome. Very debatable, as there are great features in all browser DevTools, but I’m of the opinion that Chrome’s are the best. You don’t lose any of that. Ultimately, it’s just Chrome. You deal with the flags the same way. The Chrome settings are accessible. The DevTools are the same.

This is developer mode. Has some clever features like one-click to go into inspect element mode and refreshing while clearing cache. Split ViewI often want to see browser windows side by side. Writing a blog post like this is a great example in which I want to reference something without closing my writing. The muscle memory for Command – N is not your friend, unfortunately, with Arc. A new window in Arc, while they allow you do it, is not with-the-grain. It gives you a whole new copy of the window with all your tabs, meaning it’s easy to change some stuff in one tab (e.g. write words) and have that not reflected in the same tab in the other window. Just awkward.

The fix here is don’t use new windows, use split view. The trick here is “think Option key”. If you’re on a tab that you want to keep open, but share space with another browser tab in split view, option-click the link to do so. The link could be on the page, in the sidebar, from the Command – T bar, whatever.

Two-panel is probably the most common, but you can go up to four.Little ArcYou can turn this off, but by default, links you click from other applications (assuming you have Arc as your default browser) open in a “Little Arc” window. This is a floating minimal UI window. I think the big idea is that a lot of links you open are quite temporary in nature. You see what you need to see, then close it. I tried it, turned it off, then ended up turning it back on. It’s a weird idea but I think I like it.

You can “promote” it into the main window with Command – O.

My trick so far is to adjust the keyboard shortcuts so that Command – N opens a new Little Arc window rather than a “main” window. Not sure if that will stick. There is a lot of getting used to new ways of doing things. That’s dangerous for my abandon-ometer, so I gotta keep new things that threaten muscle memory low.

Super fast, element-cropped screenshotsThis is just a wonderful little feature:

The only trouble is that I’m such a fanboy of CleanShot X for Mac I don’t know how much I’ll use it. Time shall tell!

Dialog AestheticsChill look, right? `alert()` and `confirm()` and all that is still largely the same in-your-face over everything, but these permission-style browser popups are pleasantly out of the way.

ConclusionIt’s pretty good. I like it.

I’m sure different people will like and dislike very different things than I do. For example, I know people love the idea of “auto archiving tabs”, meaning Arc will close tabs that have been inactive after a certain amount of time (12 hours default!). I don’t care for that, as I very manually manage my tabs. Maybe that’s why I don’t really need the Library feature either, as someone who hand-manages my files in my own specific way.

The weirdest feature is Easels to me. They are little drag-anything-anywhere drawing surfaces that I don’t really understand how are supposed to fit in with any particular workflow. But I don’t dislike them either. It’s like Fig Jams or shared Notion docs, I suppose, as they can be editable-by-many, and clearly those have found tons of users.

What I like most is that it’s obvious they are just trying stuff. The software is moving hot and fast, and it’s fun to watch.

It’s undeniable that we’ve lost browser engine diversity in the last decade with the loss of Opera and Microsoft’s engines. But all the engines left are open source, and so we’re seeing a new kind of browser diversity: browser experience diversity.

View Details

I’m stoked about this time around. I haven’t been as excited in the past mostly because I was turned off by how much quieter it was than Twitter (read: it didn’t fuel the addiction well enough). This time around, it’s still quieter, but I’m more ready for the quiet. And it’s not too quiet. I’d […]

View Details

Pleased that FART (Flash of inAccurate coloR Theme, lol) has become: … officially a term of art in computer science. Because it’s a part of Chrome Platform Status as a feature of Client Hints. Indeed, prefers-color-scheme is a perfect thing for Client Hints. … it is a best practice to not load CSS for the […]

View Details

I was at a charity dinner with an auction tonight. Clearly they couldn’t figure out how to put instructions into the system anywhere anybody could find. So they made “items” in the CMS and made them $1. I’m pleased to have won the “how to register” item for $3.

View Details

The movie goes: Some man who has had some success running other things has a twinkle in his eye to run another thing. He takes it over on a whim with some seriously questionable tactics. Smart people that he should really listen to tell him it’s a bad idea but he completely ignores it and […]

View Details

Say you have some JSON data like this (I’ll be using Go on purpose here): The challenge here is to build a machine that does four things: Validate that the JSON is valid syntax. Validate that the JSON is valid against a schema. If there is a problem with one part of the data, first […]

View Details

I don’t think there is any doubt that this is a unit test: You have a function, and you’re testing that the function returns what you think it should return. A code base probably has lots of this as they are easy to write, useful, and not flakey. I also don’t think there is any […]

View Details

Says my physical therapist. I hurt my back most recently doing back squats. 135lbs on the bar. That’s nothing for my big elephant legs. It was my third rep of what was going to be 60 reps over 15 minutes as part of an EMOM (Every Minute on the Minute) workout involving box step-ups as […]

View Details

One. You don’t have to json.Unmarshal into an empty struct. I learned with examples like this: There, post is totally defaults, meaning because favorite_count was missing in the JSON data, post.FavoriteCount defaults to 0, the Go default value for an int. But it doesn’t have to start that way! You can Unmarshal it into a […]

View Details

I got a copy of Dan’s latest book! So many endearing, funny, and relatable bits. From Chapter 4: As soon as I typed the HTML for my first hyperlink, the power of it hit me. This is the DNA of the web, the fabric that connects all of the bits and pieces all over the […]

View Details

I think Daniel Bruce’s Entypo was the first icon set designed for the web that I fawned over. Maybe it was how it had a cool name, almost like it was a startup product. And the website design around it was awesome. The 2012 design was pretty fresh, especially for that time: Then a 2014 […]

View Details

2006: Sass was invented. Has nesting. All subsequent CSS processors have nesting (Less: 2009; Stylus: 2010). 2011: Tab says Chrome engineers already dabbling with CSS nesting. 2011: (Lost to time?) First Editor’s Draft appears actually called “CSS hierarchies”. Lennart Schoors has a blog post mentioning it and says it was in conjunction with Shane Stephens […]

View Details

Local By Flywheel makes running a local WordPress site trivially easy. I just got a marketing email from them saying that there is a plugin for Atlas now, which is their parent company WP Engine’s product for running “Headless” WordPress. Headless, meaning the front-end of the site isn’t HTML produced from PHP directly, it’s some […]

View Details

Same with any no-JavaScript-by-default framework like Eleventy, Jekyll, Hugo, and whatnot. Check out what Maxi Ferreira did with Astro: Cool. Although he had to slap in SPA navigation to make it work, because the current API only supports that, not normal “multi page” transitions. Once the View Transitions API gets MPA support, this (probably) going […]

View Details

Nicky Case made a thing called Nutshell: Nutshell is a tool to make “expandable, embeddable explanations” … This lets your readers learn what they need, just-in-time, always-in-context. I really like the look and feel of it, especially the little animated colons. I do feel like it needs an accessibility kick though. It doesn’t work without JavaScript […]

View Details

I wanted to find my most favorited tweets of all time. I figured I should know what those are so I can re-home them (or some version of their spirit) elsewhere in case the ol’ bird kicks the can. Turbulent times over there. Twitter has some built-in analytics tooling that I couldn’t quite figure out […]

View Details

Jon Yongfook: Just paid $75 (per month) to remove the “Upgrade Now” button from Slack. Never underestimate how much a B2B customer armed with a corporate card will pay to solve a minor inconvenience. It me. And I dislike it about myself but it’s true. Just a dumb little upgrade banner in an app, even […]

View Details

Folk creations fill a gap. They solve problems for individuals and small communities in a way that that centralised, top-down, industrial creations never can. They are informal, distributed practices that emerge from real world contexts. Folk Interfaces, Maggie Appleton So my mom calls me the other days and says “how long does it take to […]

View Details

Jeremey tries to be more nuanced and positive about the Shared Elements Transitions API: If the View Transitions API only works for single page apps—which is very unlikely—it could be the single worst thing to happen to the web in years. If the View Transitions API works across page navigations—which is very, very likely—it could […]

View Details

For the first time since buying the damn thing, it started on my first try at the beginning of the season. Just so I don’t forget why: I ran it completely out of gas at the end of last season. No more gas getting gummed up in the system while it’s in storage in the […]

View Details

I like Cloudflare technology. I think they do a great job of building things that are very useful, very innovative, and very reliable. That’s no easy task, especially while shipping pretty regularly as they do. I’ve been known to do pretty glowing podcasts about them, unsponsored, like this on Durable Objects, Workers, and HTMLRewriter. That […]

View Details

Every Old-Time music jam I’ve ever been a part of does one thing the same: they don’t change keys very often. If you’re playing in D, you stay in D for a while. Maybe for an hour, maybe two, maybe the whole dang day if you’re at a festival. Then you move. Probably to G […]

View Details

I recently wrote about one of the ironies of a Jamstack approach recently. Yes, rendering static content from the edge is fantastic, but only when the content is actually there. If you need to hit an API with client-side JavaScript to actually get the content, you aren’t benefiting all that much from “The Edge”. Really […]

View Details

There is a line of thinking that goes: WordPress is fairly complicated. I only need to do something fairly simple. Thus, there should be a simpler version of WordPress to do that simple thing. A WordPress Lite, if you will. The trouble is, which simple thing do you focus around? In the article linked above, […]

View Details

jQuery is 32 Kb compressed and minified. Pretty small, really. I’d say heck, a hero image might be 10× that size alone!, but as we know, all bytes are not equal in web performance. JavaScript needs to be parsed and executed, and might even be a blocking resource depending on where and how it’s loaded. […]

View Details

You should wear your seatbelt. I should wear my seatbelt. No argument there, but my new Tundra has the most annoying seatbelt alarm I’ve ever experienced. It’s loud and it literally never stops. There are, sometimes, legit reasons to silence an alarm like that, like putting groceries on the passenger seat. I think I should […]

View Details

I had a three-year lease on a Toyota Tundra and had the 2020 model. It came due and I had to make a decision on what to do next. Maybe Rivian? I only like the R1S and it’s not shipping until late 2023. Also worry about repairs and such in our fairly remote town. Probably […]

View Details

Papa bear’s porridge: The self-fulfilling prophecy of React. React isn’t great at anything except being popular. Mama bear’s porridge: Get in Zoomer, We’re Saving React Most next-gen React spin-offs strike me as universally regressive, not progressive. Baby bear? It’s a trick: both of them kinda argue both sides. Josh argues that it’s not that React is awful, it’s […]

View Details

Almost anything in life, you could always have a little better. Your car could be fancier, your sheets could be softer, your boat could be longer, your TV could be brighter, and your whiskey could be older. But there are some things where an upgrade just isn’t possible. If you’re drinking a Coke (let’s call […]

View Details

It was at WWDC22 that Apple talked about adding support for passkeys. They seem like a Very Big Deal because they literally replace passwords for login and are better in every way. And crucially, it’s not some Apple-only thing, but an open standard (FIDO). I only bring up Apple first because I’m an Apple kinda […]

View Details

Ethan was digging around trying to find the origin of the term breakpoint as it relates to media queries in web design. It’s such a classic term now, it’s weird the term never appeared in Ethan’s first article or talk on the subject of Responsive Web Design. I showed the article to Miranda, who was […]

View Details

Austin Kleon: Comfort work is work that I do when I don’t know what else to do. I know I need to work, but I don’t know what I should be working on, or I can’t work on the thing I should be working on because I’m too tired or depressed or otherwise unmotivated. Comfort […]

View Details

Miranda had it custom-made by a local fella named Tristan who runs a nice woodshop here in Bend. His video as he completed it:

View Details

Websites tend to fall apart over time. Which is weird, because as Dave put it in a recent ShopTalk Show… “they are saved to disk as 1’s and 0’s”. One way they fall apart is going offline, which happens to dare I say most websites. The design of this very website has a “random” button […]

View Details

I’ve been eyeing up the The Shared Element Transition API 👀 because it looks tremendously cool. With it, you can animate individual elements across different pages even when the browser does an entirely fresh page load. Sweet. I suppose I should say “MPA” (Multi-Page App), but ughgkh it feels weird to give such a fancy […]

View Details

Jay’s Web Apps, Web Sites, Are they all the Same? starts referencing an ancient poll on CSS-Tricks. Jay writes: That question, circulated in different ways, has become a common refrain. Every few years it re-enters the web development zeitgeist. At the center, however, lies the same question: is the web divided? Is there one web meant for […]

View Details

Allowing people to edit tweets, from a barebones technical perspective, is trivially easy. Actually Implementing editable tweets on Twitter, with the complex social dynamics and scale, surely is anything but. I’m actually rather surprised they did it at all. I wrote 8 years ago: It’s so simple right? CRUD apps (Create, Read, Update, and Delete) […]

View Details

A nice juicy paragraph from an AI/ML research engineer on Reddit: Sometimes I wonder what the original pioneers of AI – Turing, Neumann, McCarthy, etc. – would think if they could see the state of AI that we’ve gotten ourselves into. [The PaLM Paper from Google is] 67 authors, 83 pages, 540B parameters in a […]

View Details

View Details

The CodePen Spark is a fairly big deal for CodePen. It goes out every week to millions of developers. The 2nd most popular email client to open The Spark is Outlook, just behind Gmail. You probably know this: Outlook is the worst. It’s solely the thing that keeps HTML email development painful. The thing that […]

View Details

These AI image generators are getting weirdly easy to use. Midjourney is just a free Discord server DALL•E doesn’t have a waitlist anymore and works right on the web Stable Diffusion has a installer for my M1 mac now so it’s become trivial to use Speaking of that last one, I love the image-to-image stuff. […]

View Details

I had no idea what we were in for on Monday night when Miranda and I (and friends) went to see Odesza. I just had never listened to them before. All I knew was one of the dude’s name is BeachesBeaches and I think that’s funny. I had heard the opening band, Sylvan Esso, before. […]

View Details

Jorge Arango: … notes can also play another essential function: to help you understand and develop ideas by interacting with them. 65% = Chance I share any given page of notes with other people 15% = Chance they actually find it useful 25% = Chance I find it useful later myself 100% = Chance it […]

View Details

I appreciate all the research and appropriate nuance Harry brings in Critical CSS? Not So Fast! Not a fan of any performance testing tool that dings the score of a site for not having it implemented. It’s just not a cut-and-dry thing like, say, optimizing an image. Here’s the rub from Harry. Only bother if: […]

View Details

That’s what our new Tesla sounds like. They finally… gave in, I’d call it… and gave us our Tesla last Friday. It’s been delay after delay. The actual problem as it turns out is that it emits a tone, to put it mildly. I didn’t notice it at first in the car lot with the […]

View Details

Four years ago Phil acted on a silly idea to deploy a Netlify site every single minute such that an entirely static site could do something as notably dynamic as displaying the current time. There is literally no JavaScript on that site. It mostly worked. Aside from a failed deploy for random reasons here and […]

View Details

I’ve attempted to wear an Apple Watch a few times in the past. Never took. I’m trying it again with the Ultra. So far (4 days), I think it’s so cool. The watch face I’m showing here is my favorite. It’s got a full-color version but the all-red is just a great look. It’s got […]

View Details

There is this buckwild insane thing that when you visit any URL on the internet whatsoever with the in-app browser built into Instagram (and several other apps), it injects JavaScript onto the page, the point of which is extreme tracking of what you are doing. Set my Instagram profile URL to https://t.co/h41IPjQGcN to test out […]

View Details

Oh nice! Daybreak is a cooperative boardgame about stopping climate change. It is an unapologetically hopeful vision of the near future, where you and your friends get to build the mind-blowing technologies and resilient societies we need to save the planet. Kinda the opposite of Dave’s recent wonderful short story. Gotta imagine Daybreak is going […]

View Details

It’s my “The Web is Good Now” talk that I updated significantly and smooshed into a 25-minute slot. That was my first post-pandemic talk and it felt good to be back. Now I’ve got to expand it back to 45-50 minutes again for an upcoming conference. So it’ll be totally freshened up again.

View Details

The word metaverse gets thrown around a lot lately, hasn’t it? I suspect everybody has something a little different in mind when they think about it. Since a lot of the news is around Meta/Facebook, I would guess people think “Facebook, but VR”. Meaning there is one monolithic thing, you strap that shit on your […]

View Details

Because the best Twitter is getting stupid with jokes. I started. These ones get 🏆 gold trophies from me. If your reaction is “that’s not really past tense!!” then, well, you would suck at apples to apples. Aching backbone @hardfire Tenty @toheebdotcom eslent @markpalfreeman The Great Gatsby @robdimarzo jQuert @0xOlias — tie with jQuore Handledbars […]

View Details

(Short story: we don’t even have it yet and it’s annoying.) We ordered a Tesla X back in June sometime. Miranda was visiting her parents in LA (who lived there at the time) and went to a dealership to test drive one. She ordered it right from there. We did everything we needed to do. […]

View Details

The Vue 2 docs have it as: That feels pretty good to me, as literally everything else in the file is in service of the final output HTML. Start with the goal and work down. The Vue 3 docs have it has: And that also makes sense, because it puts dependencies (e.g. import stuff) at […]

View Details

There is lots of interesting bits in the The Secret to Making Friends as an Adult episode of Dr. Laurie Santos’s The Happiness Lab podcast. Here’s one. Vivek Murthy talked about how there are three kinds of loneliness: Intimate loneliness: you lack a close confidant or someone that knows you deeply. Relational loneliness: absence of […]

View Details

Y’all know the thing: there is no browser choice on iOS, it’s all Safari all the way down. The focal point for opposition against this is Open Web Advocacy. This is news from back in April, but it seems pretty big to me. In Europe, there is the Digital Services Act (DSA) already that sets […]

View Details

Just some thoughts after looking at TVs at a Best Buy recently. Absolutely bare minimum software. Just the bare minimum to control the least amount of settings possible. Nothing “smart”. No “apps”. Turns on instantly. The boot time for the minimum software is effectively zero. You turn on the TV without it being on an […]

View Details

To me, a wallet is a great place for an AirTag (or similar help me find this thing device). Once a week, I can’t find it. Is it in the car? My saddle bags? Dresser upstairs? On my desk? In the depths of the couches? Phone! Show me! But the options for an AirTag-compatible wallet […]

View Details

Most people I know would know what I meant if I said “I’m all out of spoons” or “I wish I had the spoons for that”. I believe it has come to mean how much energy you have to do certain things. Say you (metaphorically, obviously) have 5 spoons that replenish themselves each day. But […]

View Details

A couple of weeks back, we sold our Chevy Tahoe. We purchased it just days after Ruby was born. I remember driving home from the hospital in a two-wheel-rear-wheel drive Toyota Tacoma and it was slippery with snow. We needed a way safer vehicle stat, and we popped over to the Chevrolet dealership and bought […]

View Details

Miranda’s brother and family live there, and her parents also just moved there after retiring. It was a nice time for a final summer trip. We swam in the pool, saw a funk band play in the park, hit the farmer’s market, ate Parlor Doughnuts, watched a Pop Warner football game, and a bunch of […]

View Details

Been a long time since I’ve done an in-person talk, but I broke that ice today. It’s my “The web is good now” talk — revamped quite a bit and shrunk to fit into a 25-minute slot. Felt like riding a bike, really. I was able to summon up that old speaker energy and deliver […]

View Details

Is it interesting to use a video as an
? Eh, kinda.

View Details

I remember seeing Adam Best’s tweet when it went viral: Boulder: AR-15Orlando: AR-15Parkland: AR-15Las Vegas: AR-15Aurora, CO: AR-15Sandy Hook: AR-15Waffle House: AR-15San Bernardino: AR-15Midland/Odessa: AR-15Poway synagogue: AR-15Sutherland Springs: AR-15Tree of Life Synagogue: AR-15 Sometimes they are “variations” on that exact model by different manufacturers, but they are assault rifles all the same (fact check). Add […]

View Details

Just a lovely day here in Bend, Oregon. It’s very warm out. That kind of deep-seeded warmth you can only feel in late summer, when the warmth radiates from every sidewalk square, telephone pole, and deck chair as much as it does from the sun. I’m 42 years old today. I only feel half that […]

View Details

It’s an 11″ pot Oak and Pistachio Short Scale Five String Banjo from Beansprout / Aaron Keim & family up in Hood River, Oregon. I drove up to Hood River to pick it up and see Aaron, his shop, and his family. It was so cool to see the woodworking shop of a real luthier. […]

View Details

Much of my daily brain power is dedicated to logic puzzles. Coding is effectively a logic puzzle and I do an awful lot of that. Many other aspects of a business are solving puzzles. Determining strategy. Trying to be effective at marketing. Measuring and charting progress. Running a business is just playing a game with […]

View Details

Fascinating that the CEO and co-founder of Patreon, Jack Conte, has a YouTube Channel (cheezy clickbait thumbnails and all) where he hangs out with his buddies, invites on super good musicians to talk about their work, and shoots the breeze about good music old and new. Well, I guess I can relate.

View Details

I just noticed for this first time while driving along a highway that Google Maps shows “Speed Traps”. Apparently user-reported (where? maybe in Waze?) data where police are using radar speed guns to measure your driving speed, and pull you over and ticket you if you’re speeding. I don’t hate it, it just seems a […]

View Details

Ben Ubois was on The Changlelog the other day. Ben is the creator of Feedbin, my preferred RSS service. I say “service” and not “reader” because while I sometimes use Feedbin itself as a reader (it’s good), I also bounce around to other readers for fun. The API they offer enables this, which is a […]

View Details

I think about The Seven Things You’re Not Supposed to Talk About fairly often. This American Life producer Sarah Koenig’s mother, Mrs. Matthiessen, has seven rules. I’ll put them here, as she says them (although she credits a “French friend” for the first five): Never talk about how you slept, nobody cares. Never talk about your […]

View Details

We decided to move to tankless water heating at our house. So rather than a huge drum water heater that I’ve had in every home of my life, we have these small wall-mounted rectangles. Part of our original impetus was that we’d have “instant” hot water. Which… turns out isn’t really a feature of tankless […]

View Details

I’ve noticed that a lot of my commit messages the last few months, especially on new branches, simply say scaffolding. I usually mean it in a very general sense. Not necessarily using some kind of framework or CLI scaffolding, like the famous rails generate scaffold or the generic Yeoman generator, but in a general sense. […]

View Details

It’s fascinating how the order of imports doesn’t matter in individual JavaScript files. If you start awaiting them and using their methods for things, then it might matter, but those top-level normal imports at the top of so many JavaScript files… the order is largely irrelevant. This: Behaves no differently than: I know we’re not […]

View Details

At first I noticed a yard crew over at Jim’s house cutting his grass and trimming the bushes. That’s weird. Jim always did his own yard work. I know because he’s our neighbor right across the street and he was out there a lot. He lived alone. I always thought it was impressive because Jim […]

View Details

Alex and I teamed up for a CodePen Radio podcast presenting our collaborative advice based on what we’ve experienced so far.

View Details

It was the first real day of smoke here in Bend yesterday. Mercifully, a bit late in the summer compared to previous years. But it’s still here. Just a fact of life now. The west burns in huge swathes every year and we deal with the carnage and poor air quality. Climate change in real-time. […]

View Details

Miranda and I went to see Bullet Train the other night. We were both in rather uncharacteristically bad moods, especially for a date night without the kid. This movie really turned things around. I watched the preview and thought it would be a rather soulless/boring action-for-actions-sake romp. But it wasn’t! It was frickin’ good! Funny, […]

View Details

I talked to Dana Miranda (from my hometown!) about the sale and she covered it for They Got Acquired. Coyier wasn’t seeking a buyer before DigitalOcean reached out with its offer in January 2022. But he believes the sale came at just the right time. “They could run [the blog] with more manpower, and I […]

View Details

I was recently fawning over Apple’s recently Expanded San Francisco Typeface. San Francisco really looks nice in both the compressed and expanded1 versions, across all the weights. So I ended with: Doesn’t this make perfect sense to construct as a variable font and ship the whole kit and kaboodle that way? Yes, is the answer […]

View Details

We came home a little cockeyed one night this past winter. My memory has it about midnight, but that probably means it was like 8:45pm. I was ready for bed, but of course, fate was not in our favor that night. There was a weird sound coming from the kitchen. Like a hissing. It took […]

View Details

Apple sells desktop machines, like the Mac Studio and Mac Pro, meaning bring-your-own keyboard. If you want to use Touch ID, which is awfully nice UX, you’ve got one choice: Magic Keyboard. Annoying, to me, as I’ll get an RSI flareup in half a day of not using an ergonomic keyboard, so that keyboard is […]

View Details

KEF LEX II are a pair of bookshelf-sized speakers that I recently bought. Spendy! But nice. I’ll get to them, but I’m long winded so I gotta do a bunch of blogwords first to set the scene. I moved to the Mac Studio not long ago. I love it. It’s a great machine. Feels very […]

View Details

We use tmux at CodePen. It’s essentially so we can all run a single terminal command and it’ll run all the scripts and whathaveyou to fire up our dev environment. Then we have a UI for all the different services and whatnot we run. We can and do update it regularly to help us do […]

View Details

If you wanted to be 100% mathematical and consistently even about crafting a grayscale color palette, you could create the colors in a math-friendly color function like HSL, like so: Here’s an example of using those colors as backgrounds: If you wanted to DRY that up in SCSS, you could do something like: In actuality, […]

View Details

I recently saw Editorial New by Pangram Pangram. It’s got some freebie downloads, which I’m a sucker for. If I end up using it for something, I’ll be back for the rest. The system works. Normally I’d download what I can and file them away in my FontExplorer X software. But alas, I can’t invent […]

View Details

CascadiaJS (August 30th – September 2nd, Sunriver, Oregon) is open to everyone from anywhere, and I’ll be speaking at it this year. Come one come all. I figured I’d blog it (in addition to it being on my speaking page) in particular because I’d hate it if any of my fellow Bendites or anybody generally […]

View Details

Jeff took a 6-year hiatus on Etsy, and now is back with a new line of work: All work here is designed by me on the computer, 3d printed, then I make a mold of that, and cast from my own recipe porcelain and glaze. I remember telling him when I first saw the work […]

View Details

Pizza Pit was the pizza of my youth. Fresh, Fast, and Hot Delivery, yo. They were pulling up to my childhood home on the weekly. My folks got pepperoni and onion, which always annoyed me because the onions were weird soggy squiggles and I hated them. I even like onions now as an “adult” and […]

View Details

The ol’ anniversary today. Technically we went to the courthouse a few days before July 22nd to be legally married, but July 22nd is when we had the big wedding party so it feels more like our real anniversary. It’s the “wood” anniversary, traditionally. We both got each other cool hand-crafted wooden boxes, without any […]

View Details

I’m quite chuffed with this! I’ve been solving this in different ways for a heck of a lot of years, in situations where asset cache busting isn’t part of whatever site building situation I’m in provides so I need to do it myself. But it always requires a little more technology than I would like, […]

View Details

As a proprietor of CodePen, I’ve seen, definitely, thousands of customized checkboxes, some classy and modern, some classy from trends gone by, some fun, some (whimsically) frustrating, and some clever twists. So I was a bit skeptical of Andy Allen’s headline. But I’ve heard nothing but good things about the (Not Boring) Apps, and I […]

View Details

You need to set both of these things to make it work correctly: Now when you are on the Create/Edit screen for the new Post Type, you’ll see the Page Attributes area that allows you to select the Parent you’d like.

View Details

Lovely weather this weekend. Took Miranda’s Chevy Tahoe over to the car wash for cleaning. Ruby and I toweled off the wet bits after the wash. After we were done, I went to start the car, click-click-click-click. Light internet research suggested the battery was dead. Miranda was able to drive over with the jumper cables […]

View Details

I was so hyped on season 1. I enjoyed seasons 2 & 3, but I wasn’t quite as into them. I dunno, maybe they felt slightly more convoluted or repetitive. But damn if they didn’t set up a banger season 4. They made the stakes feel so high. They made us care about everyone. They […]

View Details

Yoga has entered my life in several small ways this year. My wife has enjoyed it and has done it for as long as I’ve known her, via practicing alone, online, or in in-person classes. Now that we have Peleton thingies, we have the Peloton app on our devices, and there are Yoga classes on […]

View Details

Using hsl() in CSS is fairly popular because of how sensical it is. Hue, saturation, and lightness. 260 is bluey-purple territory. 85% means pretty thickly saturated. 50% is right in the middle of lightness, not toward a blackening or whitening. And with sensible numbers like that, you can perform math the color and feel good […]

View Details

If you’ve got a car for sale, and it’s a halfway desirable car in halfway decent shape, you probably won’t have any trouble at all finding a buyer. You might have multiple buyers competing. If you list it at a really low price, you’ll get tons of potential buyers. But there are some products that […]

View Details

Sahadeva Hammari: I call this performative design. Performative design ultimately reduces the practice of design from a wide range of creative, psychological, communication, and problem-solving skills to a narrow practice focused on the reproduction of popular styles and interfaces for the sake of feeling like and being perceived as a skilled designer. The success of performative […]

View Details

The web is a big place I’ve said that a lot of times in my professional life. The point I’m usually attempting to make is that it’s shortsighted to make sweeping judgment calls about technologies and approaches on the web. Websites are too different from one another. Difference in size and scope. Difference in who […]

View Details

I can empathize with someone who thinks that aborting a baby, at any time under any circumstances, is murder. I don’t agree with it, but I get it. It must be a really deep-rooted emotionally-fueled opinion that they can’t just shake. Even if they have some conflicting intellectual thoughts, like the well-being of the mother, […]

View Details

Device Main Connector(s) My iPad USB C Miranda’s iPad USB C Ruby’s Kindle USB C My Laptop (also has MagSafe) USB C Mac Studio USB C Miranda’s Laptop USB C External Monitor USB C AirPods Max Lightning Microsoft Ergonomic Keyboard USB A Logitech MX Master 3 Mouse (just for charging, otherwise Bluetooth) USB C Webcam […]

View Details

I just recently bitched about Facebook Marketplace, but then found myself lightly pleased at Facebook for allowing me to remove it from the mobile app navigation entirely. At the time, I’ve never used it aside from clicking that navigation item once in a while to be shown a random smattering of junk I’d never buy. […]

View Details

You could make the same image for “Back-end developer tries to align a wrapping row of boxes along their bottom edge”

View Details

They are so funny. The trucks are always so buff. Super ripped for a truck. But all you see is a little circle brush sweeper thing. Like it needs a fricking jet engine to turn a brush in a circle.

View Details

I’m visiting Wisconsin and there are Kwik Trips everywhere. It was always a pretty nice gas station, all the while I was growing up there. But it seems to only have gotten nicer. Perhaps the only nicer ones around were PDQ’s, but Kwik Trip bought them up, really crowning Kwik Trip king. I was visiting […]

View Details

When I first started getting into watching people play video games, I thought it was a little weird. What is it about me that doesn’t want to play video games, a past time enjoyed by just about every person on Earth, but prefers to sit back and watch other people do it. Isn’t that, like, […]

View Details

FontExplorer X is retiring. It doesn’t mean users (like me!) need to stop using it this instant or anything. Your software will continue to work as usual, but please be aware it will no longer be updated or supported after June 30th, 2023 That’s a year away still, but I wouldn’t expect any updates or improvements during […]

View Details

This is a nicely done look at “the post jQuery era”. That’s Tyler McGinnis, right? You know how I was just remembering that time I was I did a music video? That was March 29th, 2022 when I posted that. This video was posted on January 21st, 2022, two months prior, and yet at 21 […]

View Details

Ooooo new super cool-looking cards for the Delta American Express cards. I like those big bold separator lines. I’ve been rocking this combo for a long time. I just like watching our miles accumulate, even though we never use them. We obviously don’t fly that much these days, so we’ll get our miles at the […]

View Details

There is no bar for the quality of a blog post. Allow me to be an example. See… every blog post on this entire site. I’d like to write better individual blog posts, but something has always compelled me to punt out a thought early rather than wait until I have some perfect way to […]

View Details

Jim talking about Neil Postman’s Amusing Ourselves to Death: … the form of any communication shapes its content. For example: you can’t use smoke signals to communicate philosophically. In today’s world, we have media forms that are well suited to fragmented conversation. > Cultures without speed-of-light media… do not have news of the day. Without a […]

View Details

Steve Yegge had (what he called) his Jerry Maguire moment when he published his “Google Platforms Rant”. It was originally published on Google Plus, which is long dead, and ironically what Steve was ranting about without specifically naming it. I’ll have to link to it via what I think has become the canonical Gist, somehow. […]

View Details

What an ambitious project! It would surprise me if Andrew Hickey didn’t get a TV deal out of this work… unless maybe he just doesn’t want one because this is cool and successful enough on its own? I took Seth Godin’s advice and started with a song I know and love. It’s a 2-hour masterclass! […]

View Details

This was a pretty good call-out on Twitter for changing out Embedded Tweets work from Kevin Marks. Twitter has always provided semantic HTML for Embedded Tweets, in the form of a
, then a