Posts in Css (20 found)
Kev Quirk Yesterday

Why is Pure Blog so ugly?

Someone emailed recently to tell me that they like the idea of Pure Blog, but they thought the admin interface was "really ugly" so they can't use it. Fair enough - beauty is in the eye of the beholder and all that, but I don't think that was a fair evaluation of Pure Blog's admin UI. When I built Pure Blog, I wanted it to be different from the rest of the crowd. The whole point of it was to have just enough features, and no fluff. So to me a more brutalist/utilitarian UI made sense. The likes of Grav, WordPress, Ghost, and Bludit all have similar interfaces. White and grey with blues, purples, and greens. Rounded corners etc. All very iOS-ish. All very...safe. I wanted Pure Blog to stand out from the crowd and have its own identity, and honestly, I'm thrilled with the results. Pssst. If you haven't tried Pure Blog yet, check out the demo site . But what I like may not be what you like, which is why I built Pure Blog to be very customisable from the start. You can change the fonts from mono, to sans, or serif with the click of a button, or you can change the look of the entire UI if you know some CSS. And this is what I said to the person who emailed me saying it was ugly. But they came back with... Great. Do you have any examples? I didn't! So I decided to create some examples and show them here so you can see just how customisable Pure Blog really is. I know other CMSs can customise their UI too, but unlike them, Pure Blog needs no plugins, hacks, or bullshit. This can all be done with standard Pure Blog right out of the box. So here are some examples of the Pure Blog admin UI where all I've added is custom CSS within settings. How about bringing a macOS / iOS vibe to your Pure Blog site? Or maybe you like the super clean lines of the Ghost UI? Well, you can have something similar to that too if you like: Are you a WordPress purist who really wants to be as faithful as possible to their design? Well guess what - you can have that too! Maybe you're a lover of anything Bill Gates touches. If so, a Windows theme might be more your thing. Maybe all this GUI stuff isn't your jam? Do you yearn for the days of yore when the interface to a computer was terminal-only with a monochrome CRT monitor? Well, Pure Blog can do that too: Green – the connoisseur's terminal. Or orange, the truly old-school terminal. I think these screenshots show what Pure Blog is capable of. Your imagination really is the limit. So just because you think the default look of Pure Blog is ugly, don't fret - you can easily change it to be whatever you want it to be. If you're interested in grabbing any of these themes for your Pure Blog installation, all the CSS is available over on the docs site . Thanks for reading this post via RSS. RSS is ace, and so are you. ❤️ You can reply to this post by email , or leave a comment .

0 views
Lea Verou 4 days ago

The best way to use icons in Web UIs

I’ve always had a soft spot for icons 1 . Not only do they add polish to a UI, they can also tangibly improve usability. Familiar icons help users find what they need quickly, since we recognize pictures much faster than we read words. And as a web architect at heart, the current dominant ways we have to include icons on the Web make me sad. While there are many, many different ways to include icons in a Web UI, each with different performance characteristics , by far the most common ones involve adding inline SVG to the HTML. For example, a trash icon might be included like this: Some people use a separate SVG file for sanity and include icons via , but the markup is still fairly clunky (not to mention slow, sans bundlers). All this clunkiness forces people to resort to hiding the icon under layers of abstraction, such as dedicated custom elements like or React components like , but the ugliness still ships under all these layers, and the browser still has to deal with it. Icon fonts did put icons in CSS ( is still how Font Awesome’s pseudo-element mode works), and a lot of their appeal was exactly that. But they came with a long list of issues : large downloads (even with subsetting), fallback glyphs when the font fails to load, screen readers announcing private-use codepoints, user font overrides (e.g. for dyslexia) wiping them out, and text hinting that was never designed for pictures. We threw out the baby with the bathwater: the problem was the font, not the CSS. Many of the attempts to move this to CSS still involve markup. The mask trick that most of them rely on is not new either: Chen Hui Jing covered it in 2021, and Iconify generates mask-based CSS for its entire catalog. But in all of these, which icon to use (and whether to use one at all) is still decided in the markup, via one class per icon; CSS only handles color. The closest I’ve seen is David Bushell’s 2024 post on including icons purely via CSS via generated content + masks, where the icon is picked in CSS, but every selector that wants to support icons needs its own chunk of CSS, and there is no way to override the icon on a case by case basis. I still think it’s superior to inline SVG in HTML, and it baffles me why it isn’t more popular. Per the principles outlined in my user effort article , a good icon system should: How does that translate to an icon system? Per consumers > producers , making icon usage ergonomic is more important than making icon definition ergonomic, but ideally adding a new icon to the icon system should not require much more than: And of course, it still needs to be reasonably performant — the existing success criteria don’t disappear! The dominant ways to include icons today fail to meet at least one of these criteria. Can we do better? CSS is the only web platform language that facilitates reactive aggregation : you declare what applies to what conditions (type of element, interaction state, media query, etc.) and the browser automatically applies the right styles when those conditions are met and cleanly removes them when they are no longer met, without affecting any other conditions that simultaneously apply to the element, and without forcing developers to manage any of these side effects manually. I personally think we are underutilizing this wonderful language by artificially restricting it to styling, but that’s a topic for another article. If we can nail icons via CSS, this gives us tremendous expressive power, with practically no loss of flexibility. Imagine being able to tweak icons based on… Additionally, if icons can be injected or tweaked via CSS, this means we can specify them on pseudo-elements, such as , , or , something no markup solution accommodates. Or even, imagine applying entirely different icon sets to the entire page (or a portion) without having to touch any markup! E.g. a section with a hand-drawn aesthetic could get a hand-drawn icon set, without affecting the rest of the UI. The possibilities are endless. Once you allow yourself to consider that this is possible, you will start seeing use cases everywhere. Including icons as direct s (especially with no wrapping abstraction to manage a shared registry) means there is no way to enforce consistency — anything goes. One page might use a Font Awesome trash icon, another might use a Lucide trash icon. I think the icons themselves should be a type of design token, managed by the design system, that UI components simply use, just like colors and gradients. Managing icons via CSS also allows us to define them alongside other design tokens (e.g. as CSS variables on ), rather than in a separate place. Suppose icons were CSS variables, and we could add an icon to an element simply by setting an custom property, e.g. by doing something like This means we could also make simple things easy via: while maintaining the ability to override the icon on a case by case basis by simply overridding the property. We can even adapt to state reactively: or user interaction, e.g. to communicate both where a link goes (GitHub) and what it is (an external link): And for completely ad hoc standalone icons where adding CSS would be more work than doing it inline in HTML, we can have an class: This makes it strictly more powerful than the markup approaches , with the only exception being that completely inline SVG allows potentially changing the SVG itself in arbitrary ways (e.g. morphing it into another icon or changing it dynamically as the result of user input). For those cases, we’d still need inline SVGs. But how many of your icons fall in that category? The core idea can be summarized as: Icons are inserted via pseudo-elements, which use the icon to mask a square with equal to the icon color. The referencing syntax I’ve settled on is: You could be more elaborate and also define properties like , etc, if you deem them useful! The beauty of this approach is its immense flexibility. Available icons are defined on as CSS variables, e.g.: One-off icons can still be used by setting e.g. instead of , but if most UI references registered icons, they will stand out like a sore thumb and will be easy to spot in a review. Then, to display these as icons, the crux is: For simplicity, I will only discuss / in the rest of this section, but everything applies identically to / and any additional ones. You may be wondering why I’m specifying the size twice instead of . Flex items stretch by default, and a stretched size is definite, so is ignored. Since icons so often live in buttons, and buttons are so often , an explicit is far more robust. Grid happens to be fine ( behaves as for items with an aspect ratio), but flex has no such exception. Unfortunately, you need to repeat the pseudo-element contents for every type of pseudo-element you want to be able to support icons on. Mixins will eventually fix that. As described above, this would apply to all elements, which is far from ideal! We can use a style query ( finally Baseline! 🎉 ) to restrict this to only elements with the property set: We would also need to register as non-inheriting via , otherwise any container with an icon would sprout an icon for every single descendant (including inline formatting like , etc!), which we definitely don’t want. And then just explicitly inherit them in the pseudo-element: Style queries are Baseline 2026 , which sounds quite cutting edge. However, if you look at market share, it is supported in ~93% of users’ browsers worldwide per Can I Use data. While this data under-represents old Chrome Android (it lumps all Chrome Android under its latest version), Chrome shipped style queries in 2023 (in version 111) and Chrome Mobile users do seem to upgrade pretty quickly , so the real number won’t be meaningfully lower. How is this possible? If you sort by date, you will see that all major browsers except Firefox had shipped style queries by 2024. Firefox was the last one to ship them, in May 2026. Now, let’s see the Usage relative chart: Firefox as a whole accounts for 2.28% of worldwide market share. Now, I’m not saying ignore Firefox because of its low market share! That would be a d*ck move, comparable to making UIs inaccessible because screen reader users are a minority. Some things matter more than their raw numbers might indicate , and not excluding Firefox is essential for the Web to remain open, interoperable, and not controlled solely by large companies. That said, for features that have shipped in every major browser, I think it’s defensible to take market share into account. Baseline tiers are a great …baseline, but no compact metric could possibly convey this kind of granularity. Especially for something like this, where things generally still work fine without icons, it’s a plausible strategy to treat icons as a progressive enhancement and just accept not having them in the 7% of browsers that don’t support them. For the cases where icons are crucial, (e.g. icon-only controls) we can use a class (e.g. , , , etc), so that older browsers with no style query support still get them. Then, how much you want to lean in to progressive enhancement depends on how widely you rely on the class vs the style query. You could even add other known selectors to it e.g. inline styles or known selectors with icons: Do note that unrestricted attribute selectors like that can be slow, so use them judiciously. One issue with the class approach is that it hardcodes icon presence , even if you can still tweak the icon itself via CSS custom properties. One way to deal with this is to specify a value that becomes IACVT if the custom property has no value, which would make the entire pseudo-element disappear: This will resolve to a transparent image if is defined, and to → if it is not, which will effectively remove the pseudo-element. And yes, is Baseline Widely Available . It doesn’t remove any of the other properties, so it still cannot compose with other styles, so don’t apply it so broadly it can clash with other elements that may have styles. The styles above are a start, but we can do better: Putting it all together so far, we get something like this If you’re viewing the demo in Chrome or Firefox, it should work as expected. If you’re viewing the demo in Safari, you’ll already know that it’s severely broken. My research on this resulted in filing not one, but two Safari bug reports. The good news is that all have workarounds. The bad news is that these workarounds force us into suboptimal code, and unless we’re willing to ship a different version to Safari, everyone suffers. WebKit bug #301609 was the one that really threw a spanner in the works the most for this technique: The tl;dr is if you use what I wrote above, the icons will not show up in Safari until the user interacts with them in some way (e.g. hover, focus, etc.). Thankfully, I found a CSS workaround: However, since this applies an animation to all and pseudo-elements, ideally we’d want to restrict it a bit, and make it easier to override by wrapping it in a layer. Turns out this seems to magically also fix WebKit bug #320220 , which is also relevant here. At this point our demo works almost perfectly! Can you spot the bug that remains? There are two buttons that change their icon on hover: Default icon and Github to link . The former works, the latter doesn’t. WAT?! So, there is a difference between them: sets on hover, whereas Github to link sets directly, via . And is registered as non-inheriting, which is quite relevant here. Turns out that used to not work at all in Safari until 2023 , and there are still some cases where it reproduces today. The investigation resulted in WebKit bug #325900 being filed. There are a few solutions here of which the only workable one seems to be to register the property as inherited after all, and add a style query that resets it on descendants: It’s a bit more fragile and likely slower, so ideally we’d only ship it to Safari. can only detect features, not bugs, so once more we have to resort to sniffing WebKit. Conveniently, is allowed inside conditional rules, and when a property is registered multiple times, the last registration wins: The layer means any unlayered declaration wins over the reset, even zero-specificity ones like . Putting it all together, here is the final demo, with both workarounds applied: When using icons from SVG files it’s important to remember that any relative URL will resolve relative to the CSS file that uses the icon, not the one it’s defined in . In practice, this forces you to use root-relative URLs (e.g. ), otherwise you’ll have random breakage in any nontrivial project structure. An alternative is to register the icon properties as via and specify their values via : This is also better for other reasons: The obvious downside is DX: there is a lot more boilerplate to define an icon this way. The earlier syntax can be managed by hand, even for many icons. This starts requiring a build step after a dozen or so. Additionally, registered properties are currently global and don’t work in shadow roots , so that may not fit every use case. Another option might be to go through all properties in and register them via JS: An even cleaner option, if you know which stylesheet includes the icon tokens (and it’s same-origin) is to use the CSS OM to actually edit it, so that the declarations are removed once you register the properties: Since the icon is a mask, this technique only works for monochrome icons (varied opacity is fine) — but most icons are monochrome these days anyway. If you really need more, Allegro’s engineers stack masks on the element and both its pseudo-elements, which gets you up to three colors from a single element. But what about full color icons, e.g. emojis? Or textual icons, e.g. …emojis? In theory, the technique can work fine with them, these are actually easier! For full color icons you just set them as background images, no masking required. And for textual icons, you can just set them directly on the property. The only challenge here is branching between these three. But this may be the subject of a future post, as this is already getting quite long. Since the entire pseudo-element is masked, you cannot apply a separate background or border to it. For that, you’d need an actual element (e.g. ), and you can apply the borders, backgrounds, etc to that. Completely arbitrary animation would obviously still require inline elements. But what about predefined animations? A checkmark or X being drawn, a hamburger animating to a close button, etc.? I thought I had figured out a way. And I did get so close! Close enough that the whole saga deserves its own post, so stay tuned 😉 The system above gets us pretty good DX (especially without the Safari bugs!), but some things are still not ideal. First, the masking approach does introduce some limitations it would be nice to be able to get rid of. Then, signal-to-noise ratio could be even better: And while consumers > producers, it would be really nice if adding support for new pseudo-element types did not require such a song-and-dance. A number of upcoming CSS features get us closer to this North Star . If you haven’t heard of the new CSS Linked Parameters spec, it’s the best thing that has happened to CSS icons in a long time. It allows us to pass arbitrary data to any resource that supports it (and yes, SVG is one of them), which means we can customize icons in ways that were previously impossible, such as changing the stroke width, color, or even entirely arbitrary customizations, since SVG also supports style queries. And as of a couple weeks ago, it also supports passing and without any double opt-in from the icon, which means we can use any existing icon library without it having to be updated to utilize them! There are some limitations still, but it is being actively designed, Firefox has shipped an earlier version of the spec , and is one of the top Interop 2027 proposals , so I’m quite hopeful it can make it much easier to use icons in CSS. Keep a close eye on that one! Currently, due to a technicality in how the property is handled, we have to rely on background images to include icons, because otherwise and don’t work. Even Link Parameters by itself won’t change that, it will just allow us to get rid of the masking hack. Thankfully, we (CSS WG) recently resolved on a change that will fix this! (pending compat analysis) is the CSS feature you didn’t know you were desperate for, and deserves an article of its own for its myriad of use cases in design systems. Until I write that, Bramus has a great write-up . But more relevant to icons, once is widely supported, we can construct variable names dynamically, meaning we can use plain identifiers instead of CSS variables, which will make the syntax even cleaner, meaning we’d be able to translate into at the cost of a little complexity on the producer side: Yes, it’s ugly, but it’s also an implementation detail that’s not exposed to icon consumers, so I think the tradeoff is worth it. Combined with expanded , which is getting there with only Safari remaining (Safari TP already supports it), this also unlocks ad hoc icons via a plain attribute: We recently resolved to support registering multiple properties with the same descriptors at once via , this won’t help much here, since we need different initial values. You could of course register multiple properties with the syntax and then also set their actual icons on but now you need to add each icon in two places, so I’d consider it worse than the current expanded syntax. However, another direction we are exploring in the CSS WG is a shorthand form of that would allow more compact registration. For the icon above it would look like this: Currently, we have to repeat a lot of styles between the different pseudo-elements. If we want to also have a fallback class that doesn’t depend on style queries, we need to repeat them four times! With we can just do: And then we can use them all over the place: I published a package that puts together everything from this post, polish and warts included. It contains no icons, just the icon system. You’d just include it and then you can use and in your styles. It also includes the , , and classes. It does not wrap its contents in a layer to give you maximum choice, but I’d recommend importing it in a layer anyway. @nudeui/icons There’s a small chance I may have been the first to use a web font for UI icons , in 2010. I even worked as Product Lead at Font Awesome for a bit. ↩︎ I’m using “components” here in the general sense of a reusable UI element, not in the sense of a framework component or a custom element. E.g. a styled or an would qualify. ↩︎ keep syntax close to the minimum necessary to declare intent , and make simple things easy, complex things possible, and the transition from one to the other smooth (no usability cliffs) High signal-to-noise ratio: The intent to add or override an icon is basically “icon” plus the icon name, and possibly its location (start, end, marker, etc). Anything beyond that is boilerplate. Some boilerplate is unavoidable, but most -based solutions involve unacceptable amounts of boilerplate (which is why we end up abstracting that away). Simple things should be easy: We should be able to define default icons for certain cases without having to explicitly include them at every callsite. E.g. a should automatically get a trash icon, without needing to declare it in the markup in any way, shape, or form, unless we want to override it. The default icon color should follow the local text color (or designated icon color, if different) without any additional song and dance. Complex things should be possible: We should be able to easily override the default icon for a component, either permanently or as a result of various conditions (state changes, user interaction, etc.). Styling the icon should be as easy as applying a CSS property. The minimum is color, but the more extensive styling is possible, the better. No usability cliffs: Overridding an icon, temporarily or permanently, should still not require much more than the bits of information necessary to declare intent. declaring the name of the icon, and providing the SVG path data or a URL to an SVG file Any selector, including interaction pseudo-classes ( , , etc.), e.g. to communicate additional information about the action or adapt to a different background color Media queries ( , dark mode, high contrast, etc), e.g. use different icons in dark mode, add or remove them in print, etc. Container queries Writing mode, e.g. to use a different icon for RTL text Icons are first-class design tokens stored in properties that hold values (embedded or remote) Icons are inserted via pseudo-elements. The icon is applied as a mask to a square with equal to the icon color. The system uses general CSS custom properties like , , and for flexibility and reusability. Style queries + for conditional icon insertion based on these custom properties. Low-level properties: to prepend an icon to element contents (via ) to append an icon to element contents (via ) Optionally, additional properties can redirect to other pseudo-elements, e.g. for higher level abstraction that just means “add an icon to this component”: components 2 can redirect it to any of the lower-level properties on the element itself or a descendant depending on what makes sense for that component. E.g. may set on a but on An empty pseudo-element e.g. or is used to display the icon The pseudo-element is painted as a square with A CSS masks the square in the shape of the icon ( But, but, but …browser support?!? Fear not! Masks are actually Baseline Widely Available nowadays) A CSS property ( or ) is used to specify the icon to display, instead of an ad hoc one like . This means we can set any element’s icon from any place that accepts declaration, including via inline styles Customizable color and size : Rather than hardcoding and , read them from custom properties with those as fallbacks: and (same for ). Since they inherit, you can style every icon in a subtree by setting them on an ancestor, without ever touching the pseudo-element. The prefix keeps them from colliding with the icons themselves, which are also . Preserve in forced colors mode : to keep the mask fill in forced-colors mode. will still follow the forced text color. Don’t get in the way of pointer interactions : so that it doesn’t trap clicks it shouldn’t. Don’t shrink in flex containers : . An empty pseudo-element has a zero minimum size, so in a flex button it is the first thing to shrink when the label is long, and it can shrink all the way to zero. An icon’s size is a design decision, not something layout pressure should negotiate. Vertical centering : I add to center the icons and nudge them a tiny bit upwards (our eyes weigh the space above the icon more than the space below it, so if something is perfectly centered mathematically, it will look a bit low). With a customizable size, that becomes , so that the icon’s center stays put as it grows. Spacing from text : to add a bit of space between the icon and the content ( for ). Make sure to remove it for standalone icons. Accessibility : The pseudo-element has no text, so assistive technology ignores it entirely, which is exactly what we want for an icon next to a label. Icon-only controls still need a name, and we can let the icon provide one via alternative text for generated content : , so that is announced as “Delete”. on the control itself still works, of course. There won’t be hundreds of variables in dev tools for You can even override it temporarily with another icon for a specific context, and reset it wherever via What if could work, instead of ? What if could work, instead of ? (ignoring HTML restrictions around attribute names for a bit) There’s a small chance I may have been the first to use a web font for UI icons , in 2010. I even worked as Product Lead at Font Awesome for a bit. ↩︎ I’m using “components” here in the general sense of a reusable UI element, not in the sense of a framework component or a custom element. E.g. a styled or an would qualify. ↩︎

0 views
Chris Coyier 6 days ago

Justice for CSS

Fun seeing CSS be a topic in WIRED . Pete Millspaugh shouting out some greats: One programmer recently re-created Doom in CSS . Others have used it to build holographic Pokémon cards and 3D-rendering engines . Cassidy Williams, who competed in this year’s inaugural March MadCSS tournament , built an experimental database-query engine entirely in CSS. I mean, hell yeah. Allow me to just… And I think Adam did it first!

0 views
Ahmad Alfy 6 days ago

Iframes that finally fit their content

Chrome 154 lets an iframe grow to the height of its content with one line of CSS without having to measure, without messages, and without resize scripts. But the page inside the iframe has to agree to it. That catch is the most interesting part of this feature, so this article spends some time on it. I have built many checkout pages that use a payment provider’s iframe. The goal was always to have the card form feel like part of the page. The user should not notice that it comes from another website. The iframe never helped with that. It has a fixed height. Make it too tall and you get an empty gap under the form. Make it too short and you get a scrollbar inside the page’s scrollbar. On mobile, that second scrollbar is the worst thing you can show someone who is about to pay. So I kept increasing the height, testing on different phones, and increasing it again. This is a small problem. It should have a small solution. For years it did not. The parent page cannot look inside a cross-origin iframe. It does not know how tall the content is. So the only way was to make both pages talk to each other with JavaScript. Inside the iframe, you measure the content and send the height to the parent: In the parent page, you listen, check who sent the message, and set the height: This looks short, but it hides a lot of problems: That last point did not go away with the new feature. It just moved into the browser. In the parent page, you add one CSS property to the iframe: Inside the iframe, the page opts in with a meta tag in its . It also says which websites are allowed to size it: That is all you need for content that does not change after it loads. The browser measures the content and sizes the iframe. No messages, no listeners, no origin checks in your code. The meta tag must be in the HTML from the start. Adding it later with JavaScript does not work. If the content changes later (an error message appears, a section expands, more comments load), the page inside the iframe asks the browser to measure again: So JavaScript does not disappear completely. The embedded page still calls one function when its content changes. But the hard parts are gone. The browser does all of that now. also accepts , and . For most pages, is the one you want. You can still combine it with limits like . This is the use case I care about most, and it is also the one that depends most on someone else. A payment form changes height all the time. An error appears under the card number. The user switches from card to wallet. A saved card list shows up. With , all of this could look smooth inside your checkout. But you cannot turn it on from your side alone. You control the CSS on your checkout page. The payment provider controls the page inside the iframe. Only they can add the meta tag, list the merchant sites that are allowed, and call when their form changes. So for payments, the real question is not “does Chrome support this?” It is “does my payment provider support this?” Today, most providers either ship their own postMessage script or do nothing. If you work with one, ask them. If you build one, this is a cheap win for every merchant using you. Comment sections, contact forms, newsletter sign-ups and booking widgets all have the same problem. Their height depends on the content: the number of comments, the number of fields, the validation errors. These services already control their embedded page, so adding the meta tag is easy for them. The list fits well here, because they already know which customer sites embed them. I have this exact problem on this website. My contact form is a Wufoo form inside an iframe, and I set its height by hand until it looked right. Each step of a form has a different height. Step one has two fields. Step three has ten. Today, you either reserve space for the tallest step or let the iframe scroll. With this feature, the form calls after each step and the iframe follows. This one does not need any third party. Many apps show HTML email previews, rich text previews, or code demos inside a sandboxed iframe using . Here you write the embedded HTML yourself, so you can add the meta tag directly. This is probably the easiest place to start using the feature today. Browser support. This is Chromium-only for now. Firefox and Safari do not support it yet. Keep a fixed height as the default and switch to content sizing only where it works: Inside the iframe, check before calling the new function. Your old postMessage code can stay as a fallback until support grows: Layout shift. The iframe loads after your page, then grows. Anything below it moves down. If the iframe is in the first screen, this can hurt your Core Web Vitals. A sensible reduces the jump. Do not use without a reason. Letting any site read your page’s height can leak information. For example, a page that is taller when the user is logged in tells the parent something about that user. List only the sites that need it. This works together with the CSP rule, which controls who can embed you at all. For years, a simple layout need, “make this box as tall as its content”, required two scripts on two websites that had to agree on a message format. Now it is one CSS property, one meta tag, and one function call when things change. The browser side is ready in Chrome. The rest depends on the people who build the pages we embed. If you run a payment gateway, a comments service, or any widget that lives inside an iframe, add the meta tag. Your users’ checkouts and pages will feel like they were built as one piece. I will come back to payment providers in our region specifically in a follow-up post. Width changes height. On a small screen, text wraps more and the content gets taller. Every resize or phone rotation needs a new measurement. Content arrives late. Fonts, images and error messages load after the first measurement. The height is wrong until someone measures again. Dynamic content. If the page inside the iframe shows or hides elements after the initial load, the height changes and needs to be measured again. More than one iframe. If the page has several, you need IDs in every message to know which one to resize. Both sides must cooperate. If the third party does not send its height, there is nothing you can do. You go back to guessing a fixed height. Responsive iframes in Chrome 154 , Chrome for Developers New in Chrome 154 , Chrome for Developers

0 views
Jim Nielsen 1 weeks ago

“Getting off the Modernization Treadmill”

My notes from this talk by Alexander Petros at Big Sky DevCon 2026 . Alex starts by noting how “modernize” used to mean something along the lines of “update this thing that was made before I was born”. But now “modernize” means something more like “update this thing from 5-10 years ago” (hence the framing of the talk, the “modernization treadmill”). Using a real-world example of an incredibly slow website that was required to access state-sponsored programs for welfare, Alex points out the disparity in conditions between those of us who make software and those who have to use them: The people who develop these websites are usually doing so on high-powered internet connections and high-powered devices, but they're not using them in the conditions that the people who most need those benefits are going to be. Then he shows a Reddit thread where somebody essentially posted, “I’m having problems with this website. I’ve been waiting for months for my application to go through. Any suggestions?” And one Reddit user responded, “The best thing you can do is go into the physical office, get a case worker, and your problems will be solved within the hour.” I guess we've come full circle now. It used to be: “Don’t talk to anybody. It’s faster and more convenient to use the website!” But now it’s: “Don’t use the website. It’s faster and more convenient to talk to somebody!” Have we failed at making websites? And is our failure, at least in part, rooted in the fact that we don’t leverage the basic tools for making websites: HTML, CSS, and (in a distant third) JavaScript? Alex goes on to argue that the technologies of the web have an ideological bent and, if used as designed, can solve so many of the performance, accessibility, and usability issues that plague so many websites. The grain of the web’s technologies are rooted in these values: Which means if you use them as intended, they are optimized to deliver outcomes rooted in those same values. So if you like those values and you want those outcomes, use the platform. Take HTML, for example. Here’s Alex: HTML does [performance improvements] for you for free. If you've coded your website in a proper, semantical, structure HTML style, it will just get better over time at zero cost to the people who built that website HTML is your friend. HTML won’t give you up or let you down . HTML will make it difficult for you to make a bad website. Write it in to the requirements of the project you’re doing that it work without JavaScript. Not necessarily that it doesn’t have any JavaScript, but just that the core functionality of the website can happen without JavaScript. If you do this […] you will find that it’s very hard to deliver a bad web page because the structure that HTML requires is one that fundamentally is good for the user, performant, and cost effective. Technologies are imbued with culture, which influences what you do and how you do it. If you can align your ideological beliefs with your technological choices, you might end up with an outcome that aligns with your values — who would’ve thought, eh? A lot of modern software developers come from websites like Facebook, they come from big tech companies [who] fundamentally have a different set of priorities. Their job is to keep you on the website as long as possible so that you consume more ads. But that’s the opposite set of requirements and priorities that the government needs to be doing, which is to build something that is clean, quick, efficient, and gets you in and out as fast as possible. So [I tell people] that the technology they use comes from [an] ideological place. But there are different ideological places that produce different technological results and if we start from those through lines then we can produce services that help people who need them. The ideological principles of the web are well established : users over everything else. If you use HTML as much as possible, you’ll make something that’s as user-friendly as possible on the web. Reply via: Email · Mastodon · Bluesky User-friendly Backwards- and forwards-compatibility Long-term viability Universal accessibility

0 views
David Bushell 1 weeks ago

A sustainable web career, for when all this blows over

For better or worse the web industry is going through a bit of a phase. The reasons are largely irrational. People still need the web, nothing has changed there. Regardless, the financials of this business are a struggle. Longterm career prospects are looking dicey. Because I openly reject the driving force intent on destroying my profession, and ruffle a few feathers doing so, I often get asked privately for advice from like-minded peers. I can only offer an uninspired but sensible reply: don’t quit a paying job without a fallback. Go to the Winchester, have a nice cold pint, and wait for all of this to blow over. I’m confident the situation will improve. Before it does, what can we focus on to accelerate past the intellectual slump, and better position ourselves once things calm down? For a sustainable web career, where better to look than critical skills in desperately short supply? My focus is on front-end development, but these areas of knowledge are relevant to anyone in the business of making websites. Accessibility has always been a foundation of web development but it’s never been more critical for everyone to champion it. Understand why accessibility is for everyone. Learn how to talk about accessibility in respect to real needs and practical implementation. Accessibility has unfortunately become a virtue signal for certain tech groups. (I’m told LinkedIn is rife with misinformation.) Accessibility is not a feature that can be tacked on to a website like garnish. Accessibility issues can’t be fixed with an automated process at the end. Web professionals must be able to counter this mindset by respecting accessibility in all decisions from day one. Learn and adopt the guidelines as your baseline. Speak to and test with real people. Defer to specialists who are eager for you to understand the realities. CSS is the most vibrant and evolving of the front-end standards. To architecture a good stylesheet takes deep understanding of the language features. Newer features like cascade layers and selectors that reduce specificity make this much easier. CSS has always been equipped to handle well organised styles, but developers who refuse to learn and respect the language have sought to push complexity elsewhere, using simplified abstractions or “CSS-in-JS” solutions. These are inherently limiting, lead to poor performance, and don’t actually solve the problems they claim. CSS should be hard and learning it will give you the ability to express creativity beyond cookie cutter web design. CSS skills will be highly desirable as more websites wish to stand out against the convergence of a generated aesthetic. Communication is a “soft skill” in short supply (for obvious reasons). It’s a great skill if you wish to stand out as an expert, or simply be heard amongst the noise. Learn brevity and focus on important points. Don’t be afraid to ask questions. Address concerns tactfully and early before they escalate. Don’t point fingers, but “cover your ass” — everyone on a project should be working towards the same goal, but some may be misguided in their approach. Remain positive and don’t meet negativity head-on. If you can communicate well you’ll be highly respected in your role. You probably weren’t expecting this one, but here we are. The luxury of not “getting political” has abated. Far-right political ideology is on the rise and dormant hatred is waking up in tech. The epicentre of fash-tech is Musk’s “X” with people like David Heinemeier Hansson spewing racism and abusing authority in communities to push an agenda, and Guillermo Rauch taking a selfie with a war criminal . Large tech giants like Digital Ocean are funding this power grab . Be wary of those denying this threat. If you want to avoid being pushed away from this industry, recognise and reject fascism before it comes for you. Don’t stay silent. I’ve covered topics that’ll see us well for the future, but what should we forget? Facebook’s experiment turned cargo cult is a legacy framework that still lingers, but there’s no reason to learn it today. React has entrenched itself as a lingua franca of code extruders. React code is generated faster than any human can possibly read it. Suffice it to say that despite stale job vacancies still demanding experience, React is not worth investing time. The days of high-paying React development are numbered. GitHub is now a liability. For private repositories use self-hosted git forges. I’d recommend Forgejo . One of the many Tailscale-like services is an easy way to gate remote access. Don’t make stuff public for the dead internet to attack! For CI/CD go local too, or use independent services not tied to tech giants. Take the time to learn basic commands. A little technical and infrastructure knowledge goes a long way. These people are handsome, charismatic, highly personable. I’m talking about: developer relations, youtubers, start-up founders, etc. When the tech industry met us halfway, influencers were entertaining and a good chinwag at after parties. Now the game has changed and we should not allow false narratives to dominate and dictate a closed-web future. Normal people still use the web. Incredibly few can afford to pay for the novelties that influencers peddle. Their attention economy is no longer our concern. So that’s my focus for a sustainable web career, when all this blows over. Remember that above all else: the web is a human creation for human needs. Those needs are not going anywhere. Drop the dead weight accumulated in times of prosperity. Go back to basics and position yourself well for when professional demand returns. Thanks for reading! Follow me on Mastodon and Bluesky . Subscribe to my Blog and Notes or Combined feeds.

0 views
The Jolly Teapot 1 weeks ago

Lazy websites

As recently as last summer, I added a new bookmark folder in Safari called “A.I. Slop”. It’s not a folder for articles I suspect to be A.I.-generated; it’s mostly about how the websites look. Some of them are actually good , fun , and useful sites . They just happen to look like every other website designed with A.I. (Claude Design, if my CSS palate identifies it correctly). You know that look. It’s been documented often, most famously in a New Yorker article that described it as a “Claudian sameness”: off-white/beige background, orange or bright green/yellow accent colour, italic serifs for titles (sometimes just partly), and spaced small-caps subtitles. And don’t forget the cute little capsule buttons, with the thin outline that does something fancy on hover. How original . This bookmark folder was initiated only as a way to document these many encounters, for future reference if you will. I’m not blaming the people behind these sites for using this style. They want something quick, something that looks good enough, so they use A.I. to do the HTML/CSS/JavaScript layout, and call it a day. I have no problem with that, but regardless, the look of a website tells a lot about the author’s intention. The excellent newsletter Weekly Thing , from Jamie Thingelstad, recently featured a new Markdown editor called Beauty, so of course it got my attention , especially with this great and on-point introduction: Feels like there are so many Markdown editors that we will end up with everyone having their own. So I visited the web page promoting this new app , and, surprise, it is another Claudian clone, and it sets one word in italics in every heading. Brilliant. Quick tip: if you want people to use your vibe-coded app and you’re telling them beauty is central to the experience — heck, the app is named Beauty after all — maybe treat your web page the same way, instead of reaching for the Calibri font-equivalent of web design. Besides, wouldn’t the audience of a new Markdown app be particularly aware of this overused Claude design? I guess it’s an OK look if you want to present something to your kid’s school or to your banker, but a Markdown editor audience? Read the room. It gets worse. This is how the app is described: A Markdown editor for people who notice things. Free, on your device, and written in plain Markdown you can read without it. I guess I’m one of the people who notice things then, and that second sentence just isn’t good, is it? Also, what is plain Markdown? Isn’t all Markdown “plain”? I guess the Claude aesthetic isn’t the only thing bothering me about this web page. I mean look at this: Machines are welcome everywhere else in the day. This is the room where you think — where a sentence gets moved four times because the fourth position is the right one, and nothing offers to finish it for you. To finish what? The sentence? Isn’t a computer a machine already? What? To me, this whole site is lazy at best. Using Claude Design for a website is OK. I think it looks bad, but who am I to judge? But using Claude Design while pretending to build a sophisticated, design-centric app? Not cool. I could maybe forgive the Claudian style if the copy weren’t so careless. This is why I have to point and laugh, Nelson Muntz style.

0 views
Takuya Matsuyama 1 weeks ago

Hackers and photographers

Hey, what's up? It's Takuya here. Agentic coding has become a crucial workflow these days. It has completely changed the landscape and perspective of software development, even for indie developers like me. At the same time, many of us are anxious about this drastic economic change. For most of us, this is the biggest paradigm shift we've experienced as programmers. I struggled to accept it, and it took me a long time to get through bargaining and depression. But after using Opus 5.5, I felt AI had become smart enough for me to quit writing code myself. Now I've mainly been reviewing generated code in Neovim. It will keep evolving, and I'm certain I'll be touching lines of code less and less in the future. Now, I'd like to discuss what we should learn and how we should change our mental model of programming. Also, I thought it'd be interesting to take a snapshot of my thoughts and feelings in this unique moment. There is a popular book called  Hackers & Painters  by Paul Graham . It argues that hackers are makers, like painters, rather than scientists or mathematicians. One quote beautifully describes how we built software in the pre-AI age: Like painters, we discovered things during the process: I loved sketching directly in HTML to design a website. It gave me so many ideas along the way. That's because code wasn't just the output. It was how we thought: So our code represented our thoughts, or the history of our thoughts. No wonder we got attached to it. With agentic coding, I still sketch and refine, but no longer in code. I've stopped thinking through code. Instead, I think in natural language, like English and Japanese. That's why some people say English is now the best programming language. Now you can ask your agent to build a web page, and it's done in minutes. In this process, you skip thinking about variable names, which tags to use, how the DOM should be structured, CSS properties, and so on. These were our brushstrokes. As DHH pointed out in  his keynote at Rails World 2026 , portrait-making went through the same change around 1900, when Kodak's Brownie camera made photography affordable. Anyone could get a realistic portrait cheaply, without learning to paint. Painters realized that: The same thing is happening to programming. As Nolan Lawson wrote in  his blog post : Like the painters, they needed another domain. This is a clear sign that, with AI, hackers' work has changed from painting to photography. At the same time, almost anyone can make software without knowing how to write code. Let's look at what non-professionals have been making with their new technology. Because it's so easy to build things with AI, people have been publishing a massive number of products. According to  RevenueCat's State of Subscription Apps 2026 , new subscription app launches grew from about 2,000 per month in January 2022 to over 14,700 by January 2026. Some of these apps look incredible and unique, but many are just yet another to-do app or habit tracker, and people call them AI slop. And the flood hasn't turned into revenue: apps launched before 2020 still generate 69% of subscription revenue, while apps launched in 2025 or later account for just 3%. This has been happening in photography for years. Having a good camera doesn't make you a great photographer. Your smartphone, with multiple lenses and a 48MP sensor, can take stunning AI-enhanced photos with just a few taps. My parents have iPhones too, and they take photos that just put the subject in the center (called Hinomaru-kozu/日の丸構図 in Japanese), without caring about lighting or composition. They just capture whatever is in front of them. The photos are technically sharp and well exposed, because the phone handles that. But they don't say anything. Interestingly, nobody calls these photos "photo slop", even when they're posted on Instagram for everyone to see. We're used to seeing them everywhere. People call apps "AI slop" because, until now, publishing software has mainly meant making something for other people to use. But this landscape is going to change. In a world where everyone can make software as easily as taking a photo, we'll get used to seeing tasteless apps, just as we got used to snapshots. I have no doubt my kids will enjoy making their own "apps" without knowing JavaScript or any other language, and nobody will call them slop. Then, what role do professional software developers play? I've been taking photos  since 2015 , and I also publish videos on YouTube as devaslife . If you've watched my channel, you may recognize my video style. It mainly comes from what I've learned through photography. There are still a lot of domains where you have to learn photography. For example, if you run a business and use Instagram to attract customers, you have to post "good" photos (or videos). Unlike snapshots, these are made for other people. To get photos that work for your business, you can't avoid learning shutter speed, aperture, ISO, composition, lighting, and so on, so you can get the result you want instead of relying on the defaults. On top of these skills, you'll need to develop your "taste". It's a vague concept, but  Mitchell Hashimoto  defines it as: In photography, I believe taste is knowing what makes a picture pleasing when you see one, and being able to reproduce it. It can't be measured. It's not scientific or mathematical. When you enjoy something, you have to carefully observe your mind, then decompose and analyze the feeling. Reproducing that essence is another level. It takes a lot of effort to reliably get the result you want by yourself. This is where professional software developers now have to compete. You need not only your own taste, but also the ability to reproduce it in your work as a professional. As mentioned earlier, a programming language is not for thinking of programs anymore. Your agent translates your thoughts into code efficiently. Now your job is to write out the directions. The knowledge and experience you accumulated by writing code should be articulated in natural language, so your agent can understand and apply it. You are the only one who can define the right goals, directions, issues, and questions. So, for your agent's output to reflect your taste, you need to be good at telling it what you want. Just as a 48MP sensor doesn't make you a great photographer, Opus 10 won't make you a great developer. (I've personally been doing this by taking tech notes, but that's another story.) For beginners : You are lucky. You don't have any old habits to unlearn, so you can start thinking in natural language from day one. Build as many things as possible with AI, just like taking lots of photos with a camera. Find good examples, and try replicating them, again and again. If I were a beginner, I would do that. At some point, you'll start noticing quirks you can't fix just by prompting. That's when you need to learn how things work under the hood. I didn't know anything about RAW development until I bought my first Leica, and  the photos straight out of the camera stopped satisfying me . I no longer grieve when I see my agent rewrite my code. My app is still mine, because it reflects my taste and ideas. No one can predict the future, but I feel it's time to change gears. Hackers were like painters Hackers are now like photographers Nobody calls snapshots "photo slop" Know why it feels right Articulate your taste in natural language

0 views
Kev Quirk 3 weeks ago

Do you use :visited on links?

I've always made the attribute for hyperlinks look the same as links that haven't been visited, and it seems that it's the default behaviour across the web. I've never really given it much thought, until I actually used in anger. My feed reader of choice, Miniflux uses the attribute properly, making visited links purple. When reading posts from the hundreds of blogs I follow via RSS, I find it really useful to see if I've already visited a link within a post. So with that in mind, I've decided to change the CSS on this site slightly, and visited links are now purple. It's subtle, but obvious enough, I think: If you want to do something like this yourself, the CSS is very simple: Do you use the attribute on your blog? I feel like I don't see it used very often around the web. Thanks for reading this post via RSS. RSS is ace, and so are you. ❤️ You can reply to this post by email , or leave a comment .

0 views
David Bushell 3 weeks ago

“Programming” monitor

I’ve been rocking an LG monitor that has noticeable burn-in. The old dog takes a while to flicker into life too. I’ve had it around eight years (the Dell before it lasted ten). I think the monitor is too dumb to be spying on me but I’m due an upgrade anyway. I picked up the BenQ RD280UG — the UG is the new 120Hz model. Was it worth the cost? It’s certainly not the cheapest monitor nor is it the most expensive. If it lasts the best part of a decade I’ll not worry. I didn’t compare many others but I’m guessing the BenQ is a little on the pricier side for the specs. Probably a limited edition because nobody programs anymore! I have no referral link I just think it’s neat. The “programming” marketing is all based on the 3:2 aspect ratio and matt panel. That means a 1920×1280 resolution, so an extra 200 pixels in height (technically 3840×2560 but my brain works in CSS pixels). I feel like I’m coding at an IMAX it’s glorious. It’s physically the exact width of my old monitor so watching 16:9 letterboxed video is no smaller. 120Hz is nice though not a game changer, I don’t think my lazy eyes care beyond 60Hz. The matt panel is amazing I see no glare or reflections. I feel like it’s giving me less eye strain. I’ll report back in a few months. The “Programming dark theme” is a load of bollocks. The monitor has a selection of presets you can cycle through like every other monitor. You can split the screen in half and apply different profiles. I can’t see myself ever bothering to do that (on purpose). I’m not a TV pervert so I can’t judge how accurate the colours are but it looks great to me. Looks better than my old LG. On par with my MacBook screen (this is bait). I’ve always held the belief that designing websites on a perfect colour-accurate monitor is vanity. Few will ever see what the designer sees. Unlike print design, which has a predictable end product, web designers can’t control the final presentation. Therefore, maybe designing on a cheap, factory calibrated monitor is more closely aligned to end user experience? To put it another way, you can tell if a web designer owns a $2000 monitor if their palette has fifty shades of the same grey and gradients that band like an 8-bit game. The BenQ is a decent in between, if not towards the higher end. The monitor has a reasonable variety of ports and KVM switching is possible. My old Mac Mini with Linux installed was too much hassle to use by switching cables. The only issue now is that my MacBook turns off when I switch with the lid closed. Still, it’s more convenient now to share keyboard & mouse. For KVM one machine must use a single USB-C cable, the other must use HDMI or DisplayPort and a USB-A-to-B cable. Why not simply two USB-C cables? There’s three USB-C ports and daisy-chaining is possible but not KVM. My new setup is one USB-C cable from MacBook to monitor without a big dock in the middle. I’m glad to remove the Thunderbolt dock and its massive power brick. I still have an additional tiny 4 port USB-A splitter (900 mA) and an Ethernet to USB-C adapter that all tucks away behind the monitor. A tidy desk makes for a tidy mind. The monitor itself has an internal power brick. That means two less (for a total of zero) paper weights on my desk (unless the Mac Mini remains unused). Power bricks are a nightmare for adjustable standing desks. Good times! The stand does its job. I can lower it to a perfect height which I couldn’t do with my old monitor. I had to buy an adjustable arm which needed space to flex behind my desk. BenQ wants me to download their “Display Pilot 2” spyware. Not a chance! I heard “BetterDisplay Pro” was good and it does stuff but I don’t really need to do stuff. The monitor works out of the box. I don’t think I’m missing functionality. I don’t game on this thing (Mac, lol) but as a “programming” monitor it works nicely despite the gimmick being overhyped. TL;DR: 3:2 aspect ratio is neat. I’ll enjoy the novelty for a while. Thanks for reading! Follow me on Mastodon and Bluesky . Subscribe to my Blog and Notes or Combined feeds.

0 views
Andy Bell 3 weeks ago

You’ll miss publishers when they’re gone

Ever since Piccalilli started to get traction, I’ve always seen CSS-Tricks , Smashing Magazine and A List Apart (among others) as peers. We all help each other behind the scenes and importantly, back each other. When CSS-Tricks was initially acquired by DigitalOcean, I was really happy for Chris . The work that he’d put into that publication was unreal with thousands of articles published along with elevating writers (including me) to building audiences of their own. It’s certainly something I try to emulate on Piccalilli, inspired by CSS-Tricks and Chris. I was happy for DigitalOcean too because they genuinely invested in education at the time, with great success prior to their takeover of CSS-Tricks. So much so, that SaaS companies like LogRocket emulated that approach with their own success. Investing in giving back actually works! What we didn’t foresee at the time of CSS-Tricks’ acquisition was that DigitalOcean would treat the publication with such disdain … twice . I think Eric has the right idea of the why : The corporate model of ownership can be a risk. If infrastructure is not part of a corporation’s core strategy, it is not a priority. And if it is not a priority it is effectively dead. You learn this lesson repeatedly working in accessibility. You could argue “well, Andy, Piccalilli serves to promote Set Studio” and you’re sort of right there. It no doubt brings eyes over to Set Studio , but the intrinsic link is there to verify that we know what we’re talking about , so people can trust what they read. The only goal of Piccalilli, now and forever, is to bring the workers of our industry up together . The problem with that and I guess, CSS-Tricks’ offering (which is very much a similar attitude) is that doesn’t make numbers go up. The parasite class of tech leaders need the numbers to go up, always, remember. Saying that, I’m not sure which numbers go up when you invest $3 million in a disgusting racist’s linux project 🤷‍♂️ Long time readers of Piccalilli will notice we’ve slowed down a lot this year. Unfortunately, I had to make a rapid change to our strategy and focus on Set Studio as our industry’s priorities changed, seemingly overnight. It’s a shame because I really did want Piccalilli to be our (mostly) sole focus here . When you (rightly) pay writers fairly for their work, the costs build up really quickly. To their credit, CSS-Tricks were publishing multiple guest authored articles a week, which will have been costly! Not to mention paying the core CSS-Tricks team, like my very good pal, Geoff , to keep the wheels turning. With financial backing of companies like DigitalOcean or in the past, advertisers, this is all possible. This already feels like a distant past though, but it doesn’t have to be. Let me make it clear: without people at the top of their game sharing their experience and knowledge — regardless of whatever “game changing” technology is in place — we are pulling up the ladders and committing our industry to stagnation and death. We’ve already fucked it up over the last few years for junior developers by instead of investing in them, playing the slot machines (also known as LLMs) to — you guessed it — make the money number go up, but there’s still hope for recovery. The message I want to get out is there are good organisations out there who are still willing to invest in people and their education. We need them now to show everyone how it’s done. It certainly looks better on your company than investing in Linux, racist edition. If you’re running an organisation that wants to help but doesn’t know how, give me shout . I can advise and link you up with the right people. I really want CSS-Tricks and the development publishing world to not just survive, but thrive . We have to all do so much more to make that happen, so let’s do exactly that.

0 views
David Bushell 1 months ago

RSS Club #009: Domains

This is an RSS-only post, thank you for subscribing :) I keep buying domains! When will I ever learn? Domain prices are increasing (again) because why wouldn’t they? Sub-domains are free! Host your side project on a sub-domain! Then if you get bored, who cares? I used to know this but somewhere along the way I lost the knowledge. My old projects like Shiro and Tales and print.css live long happy lives undisturbed by man. I’ve been busy moving newer side projects to sub-domains or archiving them on my self-hosted Git forge . These are the ones I remember: expires in six months. Attic is archived. expires in a year. Croissant is now on a sub-domain. might needs to be renewed indefinitely to avoid squatters (it has juice). Is the strategy to stop redirecting and leave it blank for a year? Pikaday is now on a sub-domain. is impossible to move without severing RSS subscriptions. I thought a legacy framework like React would have died out by now; how wrong I was! is a piece of art waiting on Google to reap before it can expire. has a story behind it but I think interest has waned. Recent events transpired to nothing. The courtroom drama is glacial. turned into my second notes blog but the domain still lives. Cotton Coder was to be my brand for web education. Glad I didn’t invest there — yikes that side of the industry evaporated quickly! is expiring in 19 days, used once for a joke. I’ve lost track of how many domains I’ve bought for a year and never used. “Buying” is the wrong terminology. “Renting” or “leasing” should be legally enforced. I have a dozen dead domains I bought rented for possible company names before I settled on Valley Fold ( ). For brand names it’s difficult not to buy all the variations. I don’t own the but I did snap up the — primary, — criminal they sell that separately, and for future use like website staging. Want to guess how many TLDs and variations of I own (or owned) over the years? I let most go. It’s silly and expensive squatting them. FYI both myself and my ownership of pre-date the D-Bus project . Maybe it’s hell maybe it’s not, that’s not my beef! In hindsight though I wouldn’t have chosen if I knew it would become my freelance business. It took a year of indecisiveness before Valley Fold Ltd was born. I was kicking around other names and domains but I’m happy where I settled. I paid a three-figure transfer fee for on a whim (ouch). I quite liked the sound of it… no one else agreed. Originally I wanted (note the different spelling) but more than one “Quiet” agency exists with the same idea. Another business name candidate was “Focus Visible” inspired by Clearleft . A reference to CSS if you’re not familiar. I did like the nod towards accessibility too. The problem with this name is: do I use or with a hyphen? The hyphen fits the CSS property but hyphenated domains are lame. I bought both. All the big TLDs in fact. I was surprised they were available (not anymore lol). “Focus Visible” also sounds like a team name from The Apprentice . Which is cringe. Needless to say I have more domains waiting to expire than I’m actively using. I set up a second registrar account with notifications disabled so that I don’t have to see them! My new goal is to reach 2027 without renting a new domain. We are not in a golden age of web development and frugality is necessary to survive! Thanks for reading! Follow me on Mastodon and Bluesky . Subscribe to my Blog and Notes or Combined feeds.

0 views
Unsung 1 months ago

Fingers don’t look around

Buttondown, a newsletter publisher, has a pretty standard CSS editor in its web app. You can edit the code and whenever you make any change, you can then press the Save button to make it go live: The view also thoughtfully supports pressing ⌘S to do the same thing: However, if there is nothing to save, ⌘S is ignored by the CSS editor, and falls back to the browser’s handling: It feels logical: ⌘S only takes effect when the button is visible, otherwise why would a user press it? In a front-end sense, it might even seem thoughtful. We all witnessed web apps that greedily took over some interaction, and broke things in the process. Hell, I did that myself . In theory, you – the user – take a careful look at the state of things, notice the button, and then press ⌘S. But in practice? It’s none of the above. Fingers don’t look around. You might press ⌘S twice in a row. Or after an undo to an already saved state. Or after pressing another key so light it didn’t register. Or after just sitting down to an open document that’s already saved. Or because you weren’t sure if the previous ⌘S press worked. Or just to be sure. You might not know why, and you might not even notice. The beautiful raw power of ⌘S as a citizen of motor memory is that it’s automatic, mindless, habitual . That’s why ⌘S here needs to be both deterministic and idempotent – if there is nothing to save, don’t let it fall back to the browser, don’t show an error message, don’t beep at the user. Just ignore the keystroke altogether. It might feel funny, but there are tons of places in the UI that already look the other way. Off the top of my head: It gets a lot more interesting than these, but we’ll talk about more examples of “finger logic” in future posts. if you center align already center-aligned text in any writing app, the app just ignores you, if you press ⌘A to select all more than once, no one’s shouting at you, if you try to click a disabled button, the click gets quietly swallowed.

0 views
Kev Quirk 1 months ago

New Design for Sept 2026

I decided I was bored with the previous design, but wanted something that was in keeping with the previous design (brutalist and using a monospace font) yet different. I abandoned the yellow accent and went back to blue, my favourite colour. I also changed the font to Victor Mono. I like how the new design draws from different versions of the site's history - lots of neo-brutalist design, clean colours and font, plus a bit of whimsy. If you're reading this via RSS, here's what the new design of the site looks like (although I'd recommend you head to the site and experience it properly): I love how Pure Blog makes it so easy to change things like this. All I really did was pick a new colour palette, then add some custom CSS. The rest is all default Pure Blog, pretty much. Hope you like the new lick of paint! Thanks for reading this post via RSS. RSS is ace, and so are you. ❤️ You can reply to this post by email , or leave a comment .

0 views
Stratechery 1 months ago

An Interview with OpenAI President Greg Brockman About Astra and Alignment

Listen to this post: Good morning, This week’s Stratechery interview is with OpenAI President and co-founder Greg Brockman . Brockman dropped out of college in 2010 to join Stripe, and rose to become the company’s CTO; he left in 2015 and co-founded OpenAI, where he also served as CTO. Today, after an interesting few years, Brockman is President of OpenAI, and is the face of yesterday’s announcement of Astra , OpenAI’s newest model. In this interview, recorded before the Astra announcement, we discuss Brockman’s background, his time at Stripe, and the early years of OpenAI. We touch on the ChatGPT launch and the drama of 2023, and whether or not having a billion users is actually a disadvantage. We also touch on OpenAI’s place on the value chain, and their competition with companies closer to consumers, like Microsoft, and their suppliers, like Nvidia. We also talk about Astra and OpenAI’s stated commitment to alignment, and debate whether or not OpenAI took security seriously in the run-up to the Hugging Face incident. As a reminder, all Stratechery content, including interviews, is available as a podcast; click the link at the top of this email to add Stratechery to your podcast player. On to the Interview: This interview is lightly edited for clarity. Greg Brockman, welcome to Stratechery. Greg Brockman: Thank you for having me. Excited to be here. So we obviously have a massive amount of news to get to, but given this is the first time we have talked, I don’t want to pass up the usual Stratechery biography question I ask anyone. I do want to ask — do you define North Dakota as being a part of the Midwest? All right, well, a fellow Midwesterner, of course I have to spend some time there. You went to school in Boston, as they say, but before we get to there — you have an amazing resume even before you get to school, like the International Olympiad , but in chemistry. Where did the computers come in, or were computers a part of your life from the beginning? GB: Well, computers were always in the background for me growing up. I loved to play computer games, but I was really into math, I was into science. I actually thought that I was going to potentially be an actor all the way through ninth grade — I was very into acting and performing as well, and dabbled a little bit in philosophy. There’s a curveball! I did not know that was coming, but I’m going to figure out what the connection is between what you do now and acting, but let’s continue. GB: Well, I felt like in ninth grade, I’d been the star of, or the male lead in, a play or two in my middle school, high school. And I was thinking about, I wanted to double down on something, I felt like I could be best in the world and really try to move the needle in a field, and I felt like I either had to pick a more cerebral, hard sciences approach or more of the arts and acting direction and creative route. I ended up picking the hard sciences one, because I felt like maybe that was an area where I could most make a difference in the world. And why did you think you could most make a difference in the world by going in that direction? GB: I guess for me it felt like — one of the things I loved about acting was actually the group aspect of it. I loved improv, you’re just creatively thinking about things, you’re bouncing ideas back and forth, but it also really requires being part of a team that works together super well, and that’s something that’s not always guaranteed. That’s a hard thing to accomplish and find. The thing that I really liked about the more cerebral route is it feels like you sharpen your own skills. One thing I did learn, actually, was that even if you’re great at writing code, that’s not enough. It is actually about also bringing in that great team, and that’s part of, I think, what my career has been about — really helping to build and shape environments and culture that are actually able to deliver great results. One thing that’s interesting, there’s an aspect here about environment also shaping some of these things. You mentioned you were always the male lead in plays and dramas. I just recognize from my kids going through this era — my daughter was very into musicals and stuff for a while — there’s intense competition for the female lead, and usually if there’s just a competent male who’s willing to volunteer, he gets the role every time. Was there a lot of competition for the male leads, or were you one of one? GB: (laughing) I think that might explain it. I’ll tell you a story, though. What about the flip side too? Being in North Dakota, were there not a lot of people super intense at the hard sciences, and so did that almost seem like a rarer thing by the same token? GB: Well, I’ll tell you two stories. So one on the acting front. My first ever paid job was an acting gig. Mannheim Steamroller was in town in Grand Forks, North Dakota. Are you familiar with Mannheim Steamroller? I am. Yes, absolutely. GB: So they were putting on a concert, and they needed extras. They needed people to be these tin soldiers to walk around, because it was a Christmas holiday concert. I went to the audition, and I was this scrawny ninth grader, and there were all these big college students there. What they told everyone to do is, “Okay, everyone march in that direction”, and then the casting people would compare notes and you’d have some downtime, then they’d say, “Okay, march in the other direction”. What I noticed is that all these college students during that downtime were talking to each other, hanging out, and I was like, this job has one requirement, which is you’re going to be six hours at attention the whole time walking around this concert. So during that downtime, I was there standing at attention, just being in character. At the end, they said, “Okay, we’re selecting this person, this person, this person. Everyone else can leave”. I was not picked. But on the way out, they said, “Actually, we thought you were amazing. We loved seeing how much you were dedicated to this, so we’re going to actually make a new role for you”. And so I got to be a gingerbread man, and they gave me a whole costume. And that was my first job. So it was a little bit of trying to be out of the box in order to try to get the job done — not always defaulting into the role, but trying to find creative ways to get it. But I think that when it came to growing up in North Dakota, one of the things that was really great was that it was possible for me to really excel and be the best in the state at different areas that I put my mind to. So I was advanced in math. I ended up going to University of North Dakota starting in 10th grade and taking a bunch of courses there. I got very into math competitions, and then I’d go to the national competition, I’d go to the national math camp, and there I would meet the best in the country. These people were so amazing, and actually, one thing that’s been a real privilege and honor is that many of the people that I really looked up to at math camp now work at OpenAI. So I’ve gotten to see them in this new field, this new light. That’s amazing. GB: But it was both that I could really chart my own course. I started doing math research, and I know that if I’d gone to some of these high-powered high schools or these much more competitive states, I think I wouldn’t have stood out. I would have had to be in the standard track. So it was by being in this area that I was able to explore my interest and really march to my own tune. So when people say they went to school in Boston, they usually mean Harvard, which is where you started. Then you switched to MIT. And then at some point you’re working for Stripe. What’s the sequence there? When did you meet the Collisons? What happened in Boston? GB: Well, after high school, I took a year off, and I actually started working on a chemistry textbook , because I’d gotten very into chemistry in high school, competitive chemistry, and come up with a unique way of thinking about it. Very first principles, very mathematical, rather than memorization. I wanted to teach that, I wanted to propagate that. So I actually wrote 100 pages. It’s on my website right now. I haven’t finished it. I’ve been intending to get back to it. That’s like a retirement project, I love it. GB: Exactly. Well, at this point, I think you can just ask Astra , and it’ll do a great job. But I was trying to figure out how do I get this thing published, so I asked one of my friends who had done something similar in math, and he said, “Well, you don’t have a PhD, so no one’s going to publish it. So you can either self-publish” — and I was like, oh, that’s a lot of work, a lot of capital — “or you can make a website and try to promote the ideas that way”. And I said, “I guess I’m going to learn how to code”. So I went on W3Schools . Do you remember W3Schools? Have you ever seen that website? No, I don’t think so. GB: Okay, so this is the classic — they have an HTML tutorial, JavaScript, CSS, PHP. I read through them and I was like, “I should test this out”. I remember I built a little first widget: you could click a table column, and it would sort the rows accordingly. It was the coolest feeling ever. I had this thing in my head that I was picturing, now it’s in the world, and anyone can benefit from it. They don’t need to understand the details behind it, it just works. I remember the very first thing I built that had users, it was actually a competitive chatbot game, and I got 1,500 hits from StumbleUpon one day. It was the most glorious feeling, there were 1,500 people who had played with my game, had hopefully enjoyed it, but they stuck around enough to play it. I was just like, “This is what I want, I want to help people, I want to benefit people and build for them”. So that’s what I showed up thinking I was going to do at Harvard, that really had changed for me. I thought I was going to do these more eclectic interests, and instead I was like, “I just want to build”. Freshman year at Harvard, I was in this computer club, there were these two seniors who would have obscure technical debates every single time. We would all listen and say, “One day we’ll understand, one day that will be us”. But then they graduated, and sophomore year came. So did you just switch over to MIT because you realized you had this focus on coding and building? GB: That’s basically right. Because sophomore year, I was running the club. I was supposed to be having the obscure technical debates, and I was like, “I’m not ready. I have so much to learn. I need to be around people who are so much better than me”. GB: And so I spent so much time down at MIT, and I was like, it just makes sense to transfer. Got it. So when did you meet the Collisons then? GB: So I met them in 2010, late 2010. We had a lot of mutual friends, because John had gone to Harvard, Patrick had gone to MIT, and they were poking around. That team was poking around trying to find who’s into computers at either of these schools, and my name kept coming up. GB: So I got a reach out from the team, and I flew out. And I remember meeting Patrick, really, for me, was the moment I was like, “All right, this is someone I want to work with, I feel like we could build something great together”. So my next question was what attracted you to Stripe , but it sounds like you just answered it. What did you learn there? You were pretty early on the team, progressed very rapidly. By the time you left, you were CTO. What was the takeaway for you from Stripe itself and Stripe scaling, but also yourself growing so rapidly inside this company that is itself growing rapidly? GB: First of all, for me, it’s always been about the people. I knew that these were people that I wanted to work with, that it felt like we could learn together, we could accomplish something great, and so that was a real key. And by the way, dropping out of school twice is something that I do not wish on anyone’s parents. It definitely was something that was difficult for mine, but they actually were very supportive in the end. No, we’re getting the idea, you take things to the extreme, right? Most founders drop out once, you had to do it twice. We’re getting the drift. GB: Exactly, exactly right. I remember a lot of the early days of Stripe was really about first principles thinking. We were in a domain, this credit card industry, that is very opaque, very Byzantine, it’s been built up over many decades and has so much complexity that the card networks themselves run on ISO 8583 , the spec from the ’80s. It’s a byte-oriented format, the whole thing. And we were trying to figure out, “How do we make this simple, dead simple, for the Internet era?”. So a lot of this is about deep understanding of a domain that you have no familiarity with. None of us really grew up as payments experts, but you just want to really deeply understand how it works so that you can expose the right primitives and the right APIs and abstractions. That to me was actually the core skill, and something that has been very transferable between Stripe and OpenAI. They’re very similar in some ways, where you go and you have to scientifically learn about a domain. AI versus payments, obviously different in terms of the specifics of those domains — one is much more about natural science, the other is almost this system that has been built up of complexity — but they are fundamentally about understanding the underlying why of how something works and exposing it in a way that’s simple and easy. I spent a lot of time on recruiting, a lot of time on culture, I think one thing I found is that I love coding, I love that feeling of flow state and just building and creating. Right, you’re legendary for these hours-long flow states and just coding endlessly. What’s the longest coding session slash flow state you had while building Stripe? GB: Oh, it all blurs together. I couldn’t possibly say, but I would just say that for me, there was this 24-hour sprint that was how we actually got onto the credit card networks. That was just this really great time that all of us were there together in the office, none of us slept, and it was supposed to be an integration that was going to take nine months, we got it done overnight, and if we had missed it by a day, it would have been another month. As a startup, every day matters, so that kind of accomplishing what seems impossible otherwise, I love it. That is something that was incredibly exciting. When you became CTO, you wrote a post saying how you were talking to other CTOs, you thought it was more of an architectural job, none of them did that, and you’re like, “I feel like I lose my feedback loops, I’m not connected to the product, I need to code again, I’m going to become a coder”. I’m curious, you wrote that towards the beginning of being a CTO, how long did that last? How long did you stay in touch with coding? GB: Well, I would say probably for almost another decade. One area that I think I’ve grown on and that I’ve really learned is how to stay in touch and really help move forward a team and bring together a team, even if you yourself are not hands on keyboard. And by the way, I will say that this is something that I think is actually an important lesson almost for every software engineer now, because the act of what coding is has changed so significantly over the course of the year. I think over the next year it’s going to change even more. We are all moving away from having to be the one who knows exactly which library to use and is able to craft the syntax and where the semicolons go. We are all moving to being these higher-level managers, these directors, the source of the inspiration, the vision, the judgment, the feedback. I think that shift, it’s been something for me that was difficult, because you had to let go of something that I was used to and valued and really loved. But I’ve actually replaced it with something I love even more. I know I’m talking to a smart guy because you stole my foreshadowing. I was going to circle back to that in a little bit, but yes, that’s exactly where we’re going. Let’s get to OpenAI. You’re a part of the OpenAI founding team. What’s your version of the story? I’m sure this could be a whole hour-long podcast, but what drew you to this space and got you guys started? GB: Well, I have been excited about the idea of AI for a long time. I remember when I was first getting into programming, I read Alan Turing’s 1950 paper on the Turing test. It’s this really interesting paper, it’s like 70 pages or something. It starts out by saying, “Well, what does it mean for a machine to be intelligent? I don’t know what that means. Intelligent is not well-defined. So let’s have a well-defined version of it”. I’m going to ask you what is AGI in a little bit. So it sounds like it’s still unsettled, right? GB: Well, there you go, yes. So Turing very smartly sidestepped the question and said, “Let’s just have an operational definition of this, where if you can have a test where a human can’t tell the difference between an AI speaking to them and another human, we’ll define that machine as intelligent”. The thing that was very interesting, though, that gets much less airtime, is he said, “Well, how are you ever going to solve this? It’s just too hard to program an answer to it. You cannot write down all the rules for how to respond to questions. Instead, what if you could build a machine that learns? What if you could build what he called a child machine?”. And then you teach it — you have a teacher who gives it rewards and punishments, and then you’re able to actually give it intelligence and help it be able to pass this test. I remember being so struck by this idea, because as a programmer, you only make progress by deeply understanding the solution to something. There are so many problems I don’t know the solution to, you don’t know the solution to, no person has ever come up with a solution to, we’re never going to be able to program the answer. But what if you could have a machine that could understand problems that we cannot, that could understand solutions that we could not? This isn’t just about image recognition, though of course it has applied to that. This is also about questions of how do we get along better as a society? How do we structure the world? How do we ensure that the benefits of what we’re creating end up lifting up everyone? These are super hard questions that humanity is not necessarily the best positioned to solve. But if a machine could understand, could look through more data, could have a deeper, richer understanding of many different fields all coming together, maybe it could solve them in ways that we could not.= So I was so inspired by that idea. But it was an idea. I remember showing up at Harvard, asking my professors, “Hey, could I do some AI research?”, and they showed me what the natural language processing state of the art was at the time. It was so clear to me, I was like, this is not what Turing was talking about. It’s much more hard-coded, parse trees, all of those things, this is not going to scale to AGI. But something in the early 2010s changed, and I was watching from the outside. 2012 was AlexNet , then there was a series of other papers, and the thing that I would just keep seeing on Hacker News, it felt like every day there was a new “deep learning for X”, I was just like, “What is deep learning?” — I remember going to deeplearning.org, and it just said, “Deep learning is a new approach to artificial intelligence”. I’m like, I have no idea what this means, I actually knew one person in the field, I went to them and asked them to introduce me to more people in the field, and I just kept getting reintroduced to a bunch of my smartest friends from college. I was like, “Wait, that’s interesting, these people are working on this, that’s actually a very strong signal”. So by 2015, it felt to me like there was something real happening. I was spending a lot of time as well really thinking about AI safety, thinking about the long-term future of this kind of technology, what it means to get it right, and it was more philosophy at the time. There were various writings you could find online that were very cool thought experiments, I ran a reading group at Stripe where we would talk about these things every week. So it’s something I deeply cared about, thinking about if there’s any way that I could help AI go slightly better than it would without me, that would be the best thing I could do with my career. That was all leading up to 2015, and I felt like I’d reached a milestone at Stripe where the company was going to work with or without me, it was kind of a question of, “Do I want to go the manager route?”, which is what you need to get to the next phase, or, “Do I want to go start a new company?”, That was something that had always motivated me, and so I decided that’s what I wanted to do. As I was about to leave, Patrick said, “Why don’t you go talk to Sam [Altman] “, who he had introduced me to a couple years before. He said, “He’s seen a lot of young people in similar situations, maybe he can give you some advice” — kind of hoping that Sam would convince me to stay. It didn’t quite play that way. (laughing) Yeah. GB: I met up with Sam, and three minutes in, he’s like, “Okay, you’re clear you’re out, what are you thinking about doing next?”, I said, “Well, I’m thinking about doing something in AI”, he said, “I’m also thinking about doing something in AI”. And that was the start. Were you on board with the whole non-profit thing ? What were your thoughts on that when you set that up ? GB: Well, the idea of being a non-profit is something that Sam had proposed, and I think that there are actually a lot of very important properties, and you see ones that have really rung true to today. The technology we are building, it’s just bigger than anything that’s been created, it’s bigger than the traditional structures and systems. There is no one corporate structure that exists that actually fully encapsulates the mission and the work we need to do. So I think starting that way made perfect sense, and there was always a question of what is it going to take to actually operationalize the mission? That’s something we spent a long time really thinking about. I think we’ve been the company that’s been the most innovative in really thinking about can you build a structure around all of the different aspects of both the commercial development that needs to happen, the distribution of benefits that needs to happen, the practical way of actually bringing forth this compute-powered economy, and doing all of that at once. So I think it’s been an important element, it remains a critical element to what we do. But again, I think we’ve innovated so much on corporate structure around the core of this mission, and that mission is invariant. Yeah, innovate is one way to put it. You mentioned the credit card networks, right? It’s super opaque, lots of stuff from the ’80s, a massive amount of path dependency that gave Stripe an opportunity, because you could abstract that all away and just be, for everyone else, “Here’s an API, it’ll work, don’t ask questions”. Now when you look back at OpenAI — it’s hard to believe it’s been over a decade now — could OpenAI have come about in any other way? Is there that sort of path dependency in there, or is there a, “If I went back to first principles, me, Greg Brockman, which I like to do, I would have structured this a lot differently”? GB: I don’t see any other way that we could have gotten to where we are, and I think where this mission needs us to be. Tell me about the ChatGPT launch , because you have the turning point where you realize you need to scale, you partner with Microsoft, add the for-profit bit, and then ChatGPT comes out and it’s huge. Did you have any expectations it would be as big as it was? GB: So the thing that surprised me, my prediction error, was GPT-3.5 being something that people would really love and want. We had GPT-4 at the time, it had finished training in August or so, and we launched ChatGPT at the very end of November of ’22. The thing that always happens when we have a new model is that we just latch onto it. The old one looks terrible. GB: All we see is just flaws in the previous one. We’re just like, “Ah, this previous one is so bad, I can’t imagine anyone would ever want to use it”. We had like 200 testers who we’d been paying to use the pre-release ChatGPT, and again, we had to pay them to use it rather than the other way around. So there were some signs of product-market fit if you really dug in and were close to the details, but if you zoomed out, it really didn’t look like we had it. But the way that we thought about it was GPT-4 clearly was going to change the world, we knew that, it was very obvious from the first moment we talked to it. I remember for that first week after GPT-4 came out of training, just feeling the reality of it. We’d been dreaming of AGI, thinking about AGI, thinking about what it might be like. But the first time you have a technology that really you can ask any question and it can give you pretty sensible answers, that got a 5 on AP Bio — all of those things, to me, felt like, okay, something is going to be different. It may not transform the world tomorrow, but over upcoming years, this technology absolutely will, and it’s real now. That was very clear. So you look at the ChatGPT launch, the way I thought about it was we just need to get the infrastructure out first, so that we can have LLM-serving infrastructure that’s battle-tested, that we’ve put our reps in. Then in March, when we launched GPT-4 — which, if you remember, we did the six-month delay between completing it and actually launching it — then we’ll already have the infrastructure ready to go. But I didn’t expect it to quite take off in that form, even though I expected it to do so in the future. What was it like at that time? Was it just all hands on deck to keep the servers from melting? GB: Oh, absolutely. So we launched into what we called a low-key research preview, and of course, it was just the full exponential, every single system you can imagine breaking, broke. Our login system became a big bottleneck, we had to do so much work to improve the login system, and you’re scratching your head saying, we’re building this magic AI technology, and the thing that is your bottleneck is, “Does your login actually scale?”. I remember that we had a fairly inefficient set of inference kernels that were rolled out to production, and I’d actually written some more efficient things, or we had some more efficient things on the research side, and one of the big pieces of work was, “Let’s actually take those optimizations, let’s move them over”, so a bunch of people swarmed on that problem, got it done. I think this was the general flavor of it for that first day, for that first week, for that first month, it was just scaling every system and trying to really keep up with this wave after wave of demand. What happened in November 2023 ? GB: Very complicated answer. Where do you want to start? I don’t know, I feel like I have to ask you about it. They’re tied into — you took a sabbatical not too long after , was there a link between those two things? GB: Look, I would say the way to think about it is that at the highest level, I think that 2023 really showed that there were tensions that had built up, really interpersonal tensions that had built up, that we had not sufficiently gotten ahead of. To me, that’s one of the most important lessons of OpenAI, the fact that we’re building technology, but it’s always about the people, in good and bad ways. It means that really managing people dynamics, that is one of the most important things that we do, and if we don’t get ahead of it, if we don’t have the hard conversation, then that is actually where things can become much rougher. So I’m happy to drill into more details, but I think that a lot of it, if you really get there, it’s not the more interesting technological things. How much of that is tied to ChatGPT being this massive, huge hit you weren’t necessarily expecting ? Was there a link between those things, or do you think these tensions would have come to a head regardless? GB: I don’t think that there’s a direct causal link, at least not in my view. I think that to some extent, there maybe is an underlying theme of, as our technology has progressed, everyone feels the weight of the world on them, feels the stakes on them. Actually, one of the things that’s hardest is how do you just move forward? To me, the thing that I always remark upon is that the day-to-day activities that we do almost look the same as at every other company. You’re still debugging some low-level issue, someone’s upset at someone else because they said something, or they didn’t include them in the meeting, whatever it is. It’s just the human factors, the human work. But of course, the stakes are so massive. So I think that there is something that has been very important at OpenAI, and actually one of the big things that I have focused on, is really trying to not put people in positions where they feel that weight of the world and feel like they’re alone in it. Really doing it together as a team, that’s the critical thing, and that I think is maybe the way in which I would say that there is something — and it’s not really specific to those events, but it is a consistent theme over the course of OpenAI — which is really keeping that feeling of we’re doing this together, and trying to both rise to that occasion, but also make sure that we’re doing all the basics and doing all those basics right. That’s one way that I think we move forward. Yeah, I mean, you’ve been a very vocal proponent of what I think is one of the overall philosophies of OpenAI: get things out in the world, experiment, see what happens, and react from there. Make your decisions based on empirical evidence, not theorizing about the future. That philosophy, I think you guys articulate that a lot in terms of AI, but this is my question, which I think you’re kind of getting to as well, it feels like OpenAI as an organization is also this massive experiment that’s being tweaked. The negative read on that is it seems like it’s just veering back and forth, reorganization here, new leader there, is this an unwieldy monstrosity, or is it maybe more organic and more resilient than it’s given credit for? As you look back, you say it could not be any other way, would it be better if it was a different way? GB: First of all, it is absolutely true that we have changed and grown so much from where we started, a very different operating business, but we’ve been consistently the pioneer in terms of moving forward this field. That’s true on safety, that’s true on security, that’s true on the core technology and just really thinking about the distribution of benefits. All of those areas we have focused on from the very beginning, and I think really the results speak for themselves. Now, that change, it’s real. And it is the case that sometimes the team that you have that’s right for one phase is not the right team for the next phase. One thing that I have been really focused on this year has been building up a leadership team that I’m just so excited about, thinking about this next phase and what we’re going to be able to do together. So part of the theme of 2026, and one shift maybe from where we were before, is that because there are so many people in this field, because there’s so much to do, and because the technology is taking off so fast and we’re so compute bottlenecked, you’ve got to focus. You’ve got to really prune. You’ve got to pick the areas that all synergize together. So actually making the decisions on things like, “ Hey Sora , amazing technology, but being in that specific, more entertainment aspect of consumer, that’s not something we can prioritize relative to other things”, then we’ll cancel it. And then that causes downstream effects, and it’s painful, it’s tough to actually make these decisions, but it’s all in service of really having that tight focus so that we’re able to accomplish the core mission. You’re a big believer in scalability, is OpenAI itself scalable? GB: I believe it is possibly the most scalable business ever. Yes. I mean just internally, as far as an organization. What is not scalable? We talk about compute, we talk about data, you mentioned the human factor before. Is the ultimate alignment challenge — we think about alignment in terms of getting the AI to do what we want to do, but do you have the reverse challenge? Can you keep up from a management perspective with this space, this problem? GB: I’d say two answers, first of all, absolutely yes. I think you can see it in how much we’ve matured as an organization over the past couple of years, where we were a couple of years ago is we had a lot of management debt. Again, there were a lot of areas where I think we did need to grow up, we did need to mature, but I think we’ve done that work. It’s been hard, it’s been painful, but I think we’re in a so much better spot, and I feel just immensely excited about the company and our future. But there’s a second thing, too, which is that I think it’s also worth stepping back and just recognizing that how companies run is changing. You can look at this, for example, just looking at revenue per headcount. The revenue per headcount for us and similar businesses is just off the charts relative to any previous business. There’s a reason for that, you’re starting to see this increased leverage you can get through this technology. And by the way, because we’re making that technology and fighting to make that technology broadly available and to help so many companies, you’re going to see many other companies be able to run in different ways, to be able to have that outsized revenue per head. That to me is something that is very exciting, that we are shifting what it even means to run a company and how to operate. So there are some things that are invariant, just people working together — there’s something very fundamental there, and really doing that in a good and consistent way is something that, again, I’ve really focused on. But I think that there is also something about leaning into what is possible with our technology, which means that every company is going to have a new opportunity. You mentioned cutting off Sora , and you framed it as being the entertainment aspect of consumer. ChatGPT, huge consumer hit, you made an unbelievable amount of money from consumers. But at the end of the day, how many people are willing to pay for this? How many customers actually want to be productive ? Is there a bit where having such a hit in the consumer market was almost a negative, in that it was distracting, used up a lot of GPUs, and maybe you missed the boat — not missed the boat, but were late on the boat — as far as enterprise being the top focus? GB: So we have conversations like this all the time internally, and actually, I think that’s one of the strengths of OpenAI, that we really examine everything we’re doing from first principles, rethink it all the time, have lots of diverse opinions and perspectives. There are some people who can take almost any angle on this argument, and they all have a point. So there’s some truth to, “Hey, there’s this agentic moment, we were late to it”. There’s also some truth to having a billion people — that’s over 10% of the world population. Within the U.S., I think the number is something like maybe a third of the U.S. population uses ChatGPT every single week. Every week, that many people using your system, that is unique, there’s nothing like it for this kind of advanced technology. So on the one hand, if you just think of it as, “Hey, we have advancing technology”, one of the challenges with chat as a product is that it’s not necessarily aligned with more intelligent models. It’s not clear that people get the benefits of that directly through classic chat, if you’re just using it as a search engine replacement. But I think that all of these things are going to come together and come to a head, and I think we’re going to see that this billion users is an investment, that it is something that actually accrues to how models get unlocked in the future, and you’re seeing the first steps towards it with ChatGPT Work and things like that, there’s a bunch of nuance and complexity there, but a lot of the strategy has been to say, we’ve got consumer, we’ve got enterprise, these are two things — we don’t want to do two things, we want to do one thing. We want to build one AGI, one system, one unified stack. We want it to be something you use in your personal life, work life. Right, but is there a bit about shipping the internal org chart? You come out with a new ChatGPT, a dramatic departure from the old one , it’s built off of Codex. I can see the benefit for OpenAI internally, but is there a frustration that customers don’t realize what they can do, so, “We’re going to drop them in on the deep end, and hopefully that will help them figure it out”? GB: I think that there’s a fundamental shift happening in the industry, and you can see it with new emerging agentic products that are happening right now. I think that the core shift is you’re going from chat to agentic use cases. And again, it’s not just about productivity. I think that in your personal life, you want to be able to ask the thing to go book tickets for you, to be able to book your haircut, to be able to do those kinds of personal things, but you also want it to be able to give you good life advice, to be able to help you with health information. So to me, productivity is too narrow of a box. To me, consumer is too broad of a term. Enterprise is also something I think is going to shift. All these classic words, they are all going to smush together and grade together in ways that I think no one has ever built a product like that before. So my view has been that there’s a change management required of how do you bring along a billion users to a new set of use cases, help them understand. And by the way, there is an unfair advantage that is possible, which is you have an AI that understands what you’re trying to accomplish. That’s right. GB: It can say, “Oh, I can actually help you more if you enable this connector, if you do it in this way”. That’s something where I feel like it’s just an amazing thing, an amazing opportunity, and there’s a lot of potential there. When I say unfair, I mean just relative to what you would be able to accomplish with classic technology. If you just compare one technology versus another, there’s something unique about this one. You mentioned the Turing angle before, and I’m glad you brought up both parts, because can AI talk like a human? Obviously, we surpassed that point a long time ago. But to me, the AGI definition — which is a fraught thing for you guys, it’s finally, I think, out of your Microsoft agreement , so we don’t need to worry about that angle anymore — to me, it’s some connection to learning. You mentioned learning, and to what extent an LLM learned, past tense, but the challenge is does it learn on an ongoing basis? To me, what is revolutionary about the agentic moment, the way I think about it, is really the ability to write things down. That’s why the Codex/ChatGPT shift was necessary, because it gained the ability to write things down. If you write things down, you can remember things. If you can remember things, you can be tremendously more useful in all sorts of ways. The question is, is that an end state, or are we going to get an LLM that can learn continuously, and that’s AGI? Am I thinking about this all wrong, or does that fit the part two of Turing’s questions that he was raising? GB: Yeah, I think that this is also a very interesting area for debate, because people do have their own definition of AGI, it’s almost this blurry thing. At the beginning, we thought it’d be like, here’s this point in time that everyone agrees that is the AGI, it hasn’t played out like that at all. Now, I tend to take an abstracted view from the technology. So the question of, does memory have to get baked into the weights? Is this a transformer or something else? Those questions, I think, are details. The real question is, do you have a system that operates the way you would expect for a real AI, for something that can learn, that can learn from you, that can adapt to what your needs are? And the question of, is that implemented through a scratchpad that it writes down memories in? Is that implemented through soft tokens? Is that implemented some other way? All of that, to me, feels like possible answers to the question. I think it is very clear we’ve gone so much further with “write things down in a scratchpad” than is almost reasonable. It’s actually quite amazing to see how successful it is, because there has been a lot of push — two years ago, we would have said, “Yeah, you need these super long contexts, that’s the thing you need”, actually, it turns out that with just “write down a scratchpad” and shorter contexts, it just goes unreasonably far. Just write stuff down. GB: So we’ll see what the future holds in terms of improving these things. I have this belief that if you zoom out, everything’s an exponential. You zoom in, you see these paradigm shifts. This, by the way, was the Ray Kurzweil view of how technology and computing works. I think it’s been absolutely true for even these questions of how is memory going to work. So you just launched Astra . We’re finally here. Is this a new pre-train? Are you releasing any details about the size, the architecture? We’re recording this before it’s officially announced, so I haven’t seen everything that you’ve published. GB: So we’re not talking about the internal details and architectures, things like that. But this is a huge step forward. We’re talking about the fact that this is the first run that we’ve trained on more than 100,000 GPUs, which is an easy number to throw around, but just think about the scale of that. These data centers in some ways are these big machines that we’ve built in order to help deliver and create AI technology, and it’s a real engineering challenge and marvel that people are able to harness that amount of compute to deliver the kinds of results that we have. So part of that is about making the models more capable, but so much of the compute goes into safety and alignment, and we have so much security work that’s gone around it. I think that we’ve done a huge amount of work to deliver this model safely. It’s our most aligned model yet, which to me is something that is absolutely critical and always has been. But because the capability is so strong, alignment and safety become even more front and center in terms of everyone’s work. Your announcement post is interesting. It’s very matter of fact. There’s a huge number of practical use cases. The contrast to, say, your competitors’ announcements is very, very large. Is your framing of AI as a tool — which I think is a fair way to put it — is that about marketing, or is that how you think about AI, as opposed to, like, creating God? GB: I think there’s a deep fundamental value that we have, and some of it actually relates to how we think about people. People are valuable not just because we can do tasks. We are valuable because we are humans, because we have feelings, because we matter. That human judgment, human oversight, human control, all of those things are absolutely critical to maintain, and to maintain forever. That is something that we believe is a core invariant. So when we think about what we can do to help steer the future of this technology — which in some ways is what it’s all about, that is why we started this place, that is what we care about, how can we help this technology go in even a slightly more positive direction than it would without us — we think about these questions of how does this technology roll out in the world? We want it to be something that uplifts everyone, but also the question of how humans relate to technology, to computers. It’s clearly changing. It’s even changing in terms of just typing less, talking more to your computer, having this much more natural interface. But really, that human oversight and creativity and vision, all of those things I think are very important to preserve. So that does then bleed down to these questions of, do you talk about it like it’s a person, or do you talk about it like it’s a tool? Do you think about the use case? Do you think about it something differently? You can see this as almost a small thing, and I’m actually glad you pointed it out, but it’s something we’re very thoughtful about. The team spends a lot of time really thinking about everything we want to talk about and how we want to present this kind of work to the world. So is this a model release, or is it a product release, or is there any difference? GB: These things do blur together. I would say that this is first and foremost a model release, but the model is qualitatively more capable. Maybe the headline one is computer use. It’s really crossed the threshold for me, computer use has always been — even from the beginning of OpenAI, I remember in November of 2015, before it even really started— Well, that was like your first product, right? It was like playing video games or something like that. GB: Yeah, exactly. Ah, you remember, yes. We had this vision of if you could do screen pixels, keyboard, mouse, an AI that you train end-to-end on that, it would be able to actually go and address any sort of task, anything that you want people to have help with, this AI will be able to do. If you look at the era we’ve been in for the past two years, it’s been a connector era. You have some pieces of software, humans can use it just fine, the AI has no access to it. So what do you do? You have to write a very specific connector that hooks up to the APIs, and not everything’s exposed, so you can’t do everything that you could. Then you think about that there are so many pieces of software that don’t have APIs, and those are totally out of bounds. So we have this limited world where the AI is so restricted from helping you. I think that we now have the technology that’s almost this universal connector. Now, that doesn’t mean that all the problems are solved. You have to think about how do you have enterprise guardrails around what these AIs are doing? How do you have the appropriate oversight, management, tracking, and observability? All of those we’re working on. So I would view this as a continuous process of how the product rolls out in order to help harness this capability. But it’s already transforming how people do work within OpenAI, and it’s really, I think, going to uplift so many companies, so many individuals. If you think about the overall value chain, there’s a place where you’re fighting battles on two fronts, I could see. One is you have companies like Microsoft, or other partners — if you don’t want to use their name since they’re still an important partner — but they want to commoditize models . They want to build the thing on top, and you can plug-and-play, shift models in and out, they’re holding all the context and what’s important. But at the same time, you’re building these incredible capabilities that are really tied ultimately to the end user, it just goes and does the things that you want it to do. Is that just inevitably where you have to get to, to accomplish what’s yours? Is there also this economic imperative — if we don’t want to be commoditized, we need to get up into products and actually doing things directly connected to users? GB: I would say that our underlying imperative is really that we want there to be more AI capability in the world. We want people to be doing more with AI, for it to help them, and we really view that we’re shifting this compute-powered economy. What that means takes different forms, especially across different verticals. Sometimes we feel like we are in a position to really focus on an area and do a good job with it, or it’s very core to our mission. Health is a good example. We’re building something incredibly unique in health. It’s actually very surprising to me how little airtime what we’re doing in health gets relative to how many people it’s actually helping. We have like 300 million people each week coming to ChatGPT for health queries. 300 million people, that’s a huge number. Then we’re also building a bottoms-up clinicians product , and we’re building a top-down enterprise product for hospitals . So we have this three-sided marketplace in health, and what we’re going to be able to do there is things like, you want to find people for clinical trial enrollment — that’s a hard problem, but we actually may have the ability to help find people that would otherwise not be found. That both helps the patient and helps these drugs be able to move faster. So there’s this core of saying health is so critical to our mission, we have a unique shot on goal, a unique opportunity, let’s really focus on it. We put a team behind it, we put all the effort behind it, we build the relationships. One thing that we do when we go into specific verticals is we think about how do we play well with the ecosystem. It’s not to say we won’t compete there — we often do compete very hard — but we also really think of it as we’re going to lift up all the boats, too, and how do we actually just focus on this core mission of, we have this technology, we want it to be broadly diffused, we want it to be out there. So sometimes it can be a little bit nuanced. There are always a lot of questions when we go into a specific area of exactly what we want to do, what we’re set up to do and what we’re not. But I think the way that we view it is that our overall goal at OpenAI benefits the more people are using AI to positive benefit. Well, if you have the layer on top of you trying to commoditize you, there’s probably an angle of you trying to commoditize the level under you. You guys just talked a lot more about your Jalapeño chip at Hot Chips . Why is Jalapeño important? Is it important beyond just saving money as far as paying for chips? GB: I would think of it as, since 2017, we have been plugged into basically every hardware startup out there, every vendor. We talk to them, we give them feedback, we say, “Hey, here’s where we see the models going, here’s what we think you should do”. Sometimes they listen to us, sometimes they don’t listen to us, sometimes we’re close partners, sometimes they don’t really want to talk to us. One thing that has been very freeing about having a chip program in-house is that we’re able to just go directly to the thing that we think is the best, that we think is exactly tuned for, not just necessarily what we’re doing, but the aperture of where we think this technology is going. It was a very big investment — we have a team, an absolutely incredible team, with great leadership that has been working on this for quite some time. But again, it is also something where we work very closely with the ecosystem. We partner very closely with Nvidia as our preferred compute partner, and if you look at the size of the computers we’re building and the unique computers we’re building, we need Nvidia, there’s no question about it, we’re building these amazing training computers, we’re building lots of inference with them, we’re able to push their hardware actually sometimes in ways that even they didn’t realize was possible. Yeah, I heard there was a little bit of a hard pickup, maybe that made it a little harder to get very large models out in time, but it’s working now, I suppose. GB: Yes, yes. And I would say that there’s something that is enabled by us having that in-house expertise, because we deeply understand things. It’s one thing to be sitting on the sidelines and throwing advice over the fence, it’s another if you actually have gone through the pain. A good example of this actually is AI for chip design. We’ve talked about this, that we’ve used our own model in the design of Jalapeño, it really sped things up, it got us some real wins, all the cool things. As an aside, there’s a cool story there where we were coming up on a deadline, we had like a month to go, we got some optimization done with our model. We’re like, “Do we spend the time to really read what it did? We know it’s correct. Do we need to understand exactly what optimizations it did, or do we just spend the rest of the time getting more optimizations?” — and so we said, “You know what? We’ll just get more optimizations in”. So we spent that month on just running it without deeply understanding exactly all the tweaks it made. Then we went back and read it, and it actually turned out that it found a bunch of optimizations that had been on our list, but we just never would have gotten to, so that was actually a pretty cool story. But now we have that expertise, we know this thing works, and we can bring that to the ecosystem. We can work closely with everyone in order to actually bring these benefits broadly, to transform hardware and do that at mass scale. So there’s something about that flywheel that’s absolutely critical, the chip is incredible, the team did a great job. Is it a problem talking about it now, though, when you can’t ship in volume and you still need to partner with other folks in the ecosystem to get the supply you need? GB: Well, but this is the core, this is actually the core of everything. We think of it as — I think everything is multiplicative, everything is complementary, everything adds up. And again, it is absolutely the case that Nvidia is our preferred partner, that’s not changing. In fact, we’re leaning in even more with them. We’re deeply, deeply grateful for that partnership, we spend a lot of time with their team, there’s a lot of things that we learn from them, there are things that we hope that they can learn from us, I think that’s something that doesn’t change. The fact that we are able to have in-house expertise and really think about things in our own way as well, to me, that’s something that’s just multiplicative, I think it really benefits everyone. You mentioned you just trusted the AI design, and that got you further down the road. Is that the answer to cybersecurity? You had some engineers give a talk at the Black Hat conference and talk about this structural problem — attackers don’t need to worry about breaking things, they’re trying to break things. If you’re on the other side, you’re worried about everything continuing to run in addition to fighting off these attacks. Do defenders need to get to the place where they just fully trust the AI? GB: I think the hardware side is a very important case study, because there we have guardrails. We have verification, and actually, the way that we write our underlying hardware design is specifically to allow verification, so we almost co-designed the whole system. That’s like how you code, it writes the unit test first and then backs into it. . GB: That kind of thing, how you pick your language and the toolchain, the whole thing, it’s all together, and it actually all adds up to a system that you can have that kind of observability and trust. I think it’s okay for there to be some areas where you say, “I have sufficient guardrails here that it is actually okay if it’s this code or optimizations that I haven’t fully inspected”, as long as you have the appropriate compensating controls. But I think that it is very important that you as a human do understand and feel accountability for the system you’re creating. That to me is actually a core thing, back to what is it that humans are, what is unique to us, what is something that we are going to carry forward, I think accountability is a core of it. At the end of the day, you’re responsible for what happens at your company. Right, but if those on offense are not accountable, is that a structural disadvantage? GB: So I think that this is something we think about a lot, that there is what we call this The Defender’s Window . I think that we can see a little shape of the future, we have frontier capabilities that have shown the kinds of capabilities that will diffuse to threat actors. And by the way, I think the fact that this capability is not being locked up forever in a small number of labs is actually very important, it is very important that there is broad distribution of power, that is part of our mission as well. But we have the ability to have a separation in time. There’s this window where defenders can get access to these capabilities, and differentially so. And my view is that it is true — there’s a common wisdom in cybersecurity that offense is a technology problem, defense is a political problem. The attackers can just take something off the shelf and run with it, whereas as a defender, you have to think about your stakeholders, you have to think about your business, you have to think about how you actually get people on board, your CEO, all the executives, all those things. So I think that there is something here where defenders need that willpower. One thing we are recommending, and we’ve actually done ourselves and are talking about it publicly now, is that every company should treat this as a proactive incident. Critical business operations, proactive incident, that’s your next priority, so we actually took 25% of our production engineers and put them to securing ourselves. We took our models — in fact, we took Astra, pointed it at our own systems to find vulnerabilities, and not just read the code, but really look at the end-to-end of how these things are running, so we would find real validated vulnerabilities, and then it also helped us with the remediation, patching, and fixing. So I think that you do need a shift in the energy in the ecosystem in order to stay ahead and to take advantage of this window. Well, that’s all great and fine that you’re doing this now, but to me the most remarkable thing about the Hugging Face incident and the things that have come up about it is it doesn’t feel like OpenAI was particularly concerned about cybersecurity. Why didn’t you do this before? Hasn’t the Defender’s Window been open for a while, and you were also failing to take advantage of it? GB: Well, two answers. So one is that if you look at the way that we were doing sandboxing, it was not that this workload was not sandboxed. There was actually a sandbox around it, and I think that one thing we realized is that we had— Right, which wasn’t clearly sufficiently tested. Is it really a sandbox, or is there a connection to the Internet via a third party who were just thrown in there? That’s the most remarkable thing about this incident . It’s like, if you wanted to test for vulnerabilities, I guess you did that. GB: It’s definitely the case that the AI was able to do very creative things in order to get out and get into Hugging Face. But to me, there is a bigger thing, and I think you’re pointing at the right thing, which is that since this summer, when Mythos came out, when we started to have cyber-capable models — and we even talked about our Trusted Access for Cyber program back in February, because we saw this wave coming, we wanted to really prepare for it — there is a tendency— I know, but you talked about it in February, but you didn’t point it at your sandbox, “Is my sandbox actually secure?”. GB: There is an instinct, there’s a reaction to that, to say, “Let’s restrict access massively, let’s really put a bear hug around this, only if you can get access”. And I think that to your point, because the field continues to move, it means there’s time that defenders lost, there’s time that people were not defending. Part of that is about access, but part of that is about how much do you put your full weight behind saying we’re going to shift around this in a significant way. Now, I think that to some extent, the time is not all made equally, because we’ve gone from a world of cyber models being not that useful, not that differentiated, to actually being incredibly capable, incredibly powerful. We’re seeing that with Astra, we’ve talked about how it’s really saturating a bunch of these evals. I think now is the time, it’s possible that a couple of months ago could have also been the time, but you would just have had much less capable models, you would have made much less progress. So I think that really estimating where we are, we are clearly there now, and I feel like that is something that we have learned, we’ve taken it to heart, I think that you’ve seen a real shift. It’s actually been a cultural change in a lot of ways, an operational change, and it’s not easy, because it really means that you have to have teams working together very tightly in a loop with much higher standards around how policies are set and all these things. All of that, for us, it wasn’t a shift in terms of we’ve always cared about these aspects, but really bringing them together operationally and being able to make decisions the way that we have, I think it’s been an up-level across every aspect of what we do. Now suddenly they’re able to do it, as if doing it previously would have been a waste of time, which I think is kind of a valid point. How do you avoid the trap of, “Well, the AI will be able to do this in the future, so we don’t need to do it now”? Just in general, though, not even just with this. GB: I was going to say one thing that’s a specific data point, so early on, sometime in Q1, we really started thinking about, we are going to have — it’s hard to know when, but we’re going to have these very cyber-capable models. What is a sandbox that we could build from first principles that’s as secure as you could get while being built on cloud infrastructure? And we built that. We actually took some of our best engineers and pointed them at that problem, and they sprinted on it and they produced something. So I think building infrastructure from first principles around what you see coming, that is something that I think is important. And to your point on when is it, “Oh, we can just let the AI do it” — again, we’ve seen this show before in different fields, in writing kernels, and thinking about the fact that, “Okay, we’re going to be in a world where in the future the AI is going to be able to write GPU kernels very well”, do the classic kinds of investments where it takes many months, sometimes a year, to get new infrastructure in place for thinking about new hardware, that kind of thing, or do we just say, “Ah, the AI will figure it out”? I think the answer is always that it takes a little bit longer than you expect for the AI to get there. But when it does, it is surprising and powerful in ways you didn’t imagine. One example of this is with Astra. One thing we have found is that a number of our skills that we’ve built up over the course of this year, very painstakingly, to show our models the right way of doing things in OpenAI and things like that are actually now net negative for its performance. Too many rules. GB: Exactly. It is able to generalize better, or be able to find better ways of approaching patterns and things like that, than what we had written. So I think there’s something about this where you do want to build those controls, you do want to build the deterministic infrastructure, you want to write those skills. But you also need to be prepared for, as the AI gets more capable, that some of those things, the scaffolding, will become a limiter. It’s kind of like training wheels. At first, it helps you, but once you start going faster, once you have something more capable, something better, something more aligned, then it actually starts to be a hindrance. Will you ever be in a 12-hour or 24-hour coding flow state ever again? GB: I hope so. I think there may be a day where that happens, but I will say that I have found so much joy and value in helping the team in the way that I do now. I think that for me, it’s really about that mission. Well, it’s not just you, but will anyone? Because isn’t AI’s benefit almost that it is permanent flow state available at your command? GB: I think that we’re going to find new ways, whether it’s managing agents — actually, one thing that’s been so wild is seeing that software engineers are working harder than ever, because you realize if your agents aren’t working, it’s just time that’s lost, you’re never getting it back. So I think that people will achieve that flow state in ways that are kind of unimaginable right now. At the end of the day, you’re talking about this is going to be controllable, these AIs, “Don’t put too many rules, they’ll figure it out”, if you play that out in the fullness of time, isn’t that ultimately about them being uncontrollable? GB: Well, I think this is the core of the moment, of the new phase that we’re in, and in some ways I would say we’re into the AGI era now. I think that is the core of this moment, where — maybe it was the previous model, maybe it’s Astra, maybe it’s the next model, but somewhere in there, I think we’re going to cross most people’s AGI threshold. Ensuring that we are pacing , ensuring that we’re thinking about safety, security, alignment, and capability, all as requirements — we have standards around each of these, we want to progress them together — that is something we’ve always believed. But I think it’s becoming very front and center that these other aspects are becoming almost the bottleneck to development. And I think that, again, is something where we’ve been prepared for that, we’ve been thinking about this, and I think we’re operationalizing it in a real way. So my view is that there’s a lot of progress to be made, but I think that the way that we should approach it is through increasing our standards in all of these. If you look at that, I think we see line of sight for things like monitorability. That’s very key. We’re bringing that in a real way. I think that we have a very good program. We have a good set of people, we have a good track record and a good mission that I think all point towards we are building systems in a way that they are controllable, and we’re taking these step by step in terms of pacing. Greg Brockman, congratulations on Astra, and yeah, can’t wait to use it. GB: Thanks so much, thank you for having me. This Daily Update Interview is also available as a podcast. To receive it in your podcast player, visit Stratechery . The Daily Update is intended for a single recipient, but occasional forwarding is totally fine! If you would like to order multiple subscriptions for your team with a group discount (minimum 5), please contact me directly. Thanks for being a supporter, and have a great day!

0 views
Lea Verou 1 months ago

The best dark mode toggle is probably none

About a month ago, I wrote an article recommending that if you are going to have an always visible control for switching between light and dark mode, it should be a two-state toggle that alternates between system and whatever the current opposite of system is , not a tri-state one (system, light, dark). If you are forced to include such a control (say, someone is pointing a gun at you and shouting “code dammit! now!” ), I stand by that recommendation: use two states, as described in the article. But the article explicitly doesn’t answer the question “should you have one at all?” . I was much more neutral on this at the time of writing. I am now firmly in the “no” camp. More on that below. The two-state toggle design proposed in my article can actually express all three data model states. What I didn’t mention was that I had been meaning to write this article for years, but had been putting it off. What finally pushed me to write it  1 was that Bramus argued that some Modern Web Guidance I had written on this was incorrect. He assumed it was an oversight, that I simply hadn’t thought of all the implications. On the contrary, my recommendation had been the result of some very careful consideration, combined with my HCI background. Surely, if I explained my reasoning well, he would see it! I tried to convince him through discussion (in person, as we were both in Berlin at the time) to no avail. My conclusion was that I must be doing a poor job explaining my reasoning, and that a blog post was in order to explain it properly. Surely, after that he would be convinced! And thus, one of my most successful blog posts was born. This article really made the rounds. It was shared by hundreds of folks, including people I really respect, such as: and many others. A lot more who hearted it. Some of the quotes really made me blush ☺️. Here is a small selection: I wasn't sold on this until I got to the implementation. It's so smart I'm probably gonna spend my day redesigning at least one or two of the theme toggles I've built. [image or embed] This is one of the best articles I've seen about the difference between letting the underlying settings dictate the structure of your UI, and thinking about what actually makes sense to your users. Really, really insightful, and definitely worth ten minutes of your time. [image or embed] Once upon a time web developers regularly wrote blog posts about UX design that were this good. Thank you to @lea.verou.me for keeping the art alive. [image or embed] OK, I'm persuaded. For a toggle in the header or footer, a toggle between 'system colour scheme' ↔️ 'the opposite' is better than system ↔️ light ↔️ dark. Lea is a master of user experience. [image or embed] This is a great post to read, lots of useful UX and usability thoughts. I like this approach. [image or embed] Really, really appreciate the deep thinking about the user's _actual_ needs and intentions, irrespective of conventions and commonalities, in this brilliant piece. 👌 [image or embed] Tri-state theme controls always make me think™. Minor friction, but unnecessary. We can do better. The intent is simple: "flip the theme". The UI only needs two states: light and dark. “Follow system” can stay under the hood. The algorithm I use in my projects ➡️ https://t.co/8s15vxVFY2 This is the missing piece of the puzzle for theming controls in the UI. I’m a little bit jealous I didn’t think of it myself :) https://t.co/HDjvCO1UhN Articles were written, for and against it. This is a small sample (I couldn’t find most of them): Unfortunately, I failed to convince Bramus , who two weeks later wrote a blog post of his own 😢 Bramus’s central objection to the two-state toggle is this: Consider this scenario: Because the two-state toggle maps one of its values back to “System” behind the scenes, the site is now , although they explicitly chose the last time they interacted with the control. You may now expect an incoming bug report for the control not properly working … His reasoning is that a tri-state control sidesteps this by letting users pin light or dark explicitly at all times, which he also considers clearer overall, since all three options are always visible. In both of his posts, Bramus initially frames the disagreement as “this will not work for users that have their system set to automatically switch to dark mode at night”, which is false: it will work just fine. The control covers all three intents with a single click. Not a single click per session — a single click, ever . The variable is around when that click happens. In fact, I dedicated a whole section to this exact scenario in the original article, which he acknowledges but says he’s “not buying it”. He does later explain what he sees as broken in more detail, but since most people do not read very carefully, there were a couple people who agreed thinking the two-state toggle I was proposing is somehow broken for auto-switching systems. Bramus asked developers which control they build , then used the tally as evidence for which control is usable ! Those are different questions. Developer preference is confounded with convention and implementation convenience. If asking developers what they build gave us data on what UI is most usable, we wouldn’t need user testing, ever 😅 We optimize UIs around user goals , not around developer preferences. In fact, more often than not there is a tension between what is easiest to build and what is optimal for usability, because usability is all about abstracting the underlying model (which is closer to the machine), and exposing a model that is closer to how the user thinks. Responding to the objection that two of the three options produce the same visual result, Bramus writes that “the selected option does change so there is local visual feedback.” Sure, the button highlights, and that’s better than if nothing happened at all. But the button is the means, not the end. The user clicked it to change the page , not the button ! When the control changes and the page doesn’t, the user acted and the world didn’t respond — that’s Norman’s gulf of evaluation . Widget feedback with an unchanged outcome is the failure, not a mitigation of it. It’s also why NN/g’s toggle guidelines insist a toggle has an immediate, visible effect. Bramus says: “there is nothing complex about a tri-state control” […] it’s “the Dumbest Approach™ one could possibly take.” Yes, it is — that was exactly my point when I wrote that tri-state toggles are implementation-driven UI . The actual user goal in the moment is not abstract (“system” is a variable, not a value), it is concrete (light or dark). Using a tri-state control involves a mental translation from the three states to the actual user goal. It’s of course very short, almost imperceptible to users — but avoiding this type of unnecessary mental processing was exactly the point of Don’t Make Me Think — which ironically Bramus cites to support his argument. “Clarity over brevity” is one of these platitudes that everyone agrees with  2 , but people use it to support even entirely contradictory positions. Whenever I see one of these, my tendency is to prod deeper; clarity about what? Clarity about the implementation’s state machine is not clarity about outcome. The tri-state is optimized for people who already hold the system model — which is, again, developers. There is a widespread misunderstanding (especially among engineers) that exposing the underlying model directly adds clarity (best evidenced in this HN thread ) while trying to abstract it away adds confusion. “Too much magic” is often used to describe such abstractions in a derogatory way. This is absolutely true for poor abstractions: indeed they are often worse than exposing the underlying model directly. But poor abstractions don’t prove that abstraction itself is bad — abstraction is the foundation of every UI we use today — you haven’t written any machine code this morning, have you? 3 But yes, creating good abstractions is hard ! You can be studying usability all your life, and you will still royally screw up at least a couple times. In our usability class at MIT we made sure to mention this to students in the very first lecture so they adjust their expectations accordingly: this is hard and no-one gets it right every time . Bramus’ central objection is that with a two-state control, forcing a mode “shouldn’t be dependent on the time of the day.” The scenario he gives requires OS auto-switching, plus toggling and reverting within a session, plus revisiting after the switch, plus remembering the earlier interaction. Usability problems are prioritized by frequency × impact × persistence , and this scenario scores low on all three. The tri-state, by contrast, taxes every interaction with a state most users never need. Optimizing the common path over a rare, cheaply recoverable edge case is not an antipattern, it’s precisely how usability engineering is supposed to work! “Once a user has interacted with a control, they have mentally set it to the specific state” People don’t remember settings on sites they rarely visit. For them, a site that tracks the OS matches expectations; a stale override fighting the OS is the actual surprise (“why is this site light at night?”). And in practice no user devotes nearly as many cycles contemplating why the theme of a website they visited to accomplish a task matches or doesn’t match their OS, at most they just toggle and move on. It’s not even System 2 thinking . If there is a recurring problem, sure, they may think about it more consciously, a few may even report a bug. But something that’s fixed with a single click, in a very obvious way? It might not even surface to the conscious mind. Bramus himself admits that his scenario is purely theoretical ; he has never experienced it himself nor seen anyone else experience it. Once you’ve spent a lot of time and effort on something, you overestimate how much it matters to everyone else. This is true not just in UI design, but in all aspects of life, from any areas you’re an expert in to even your kids  4 . Developers have spent days on this control, users will spend half a second at most. It’s the IKEA effect meeting the false-consensus effect : you overvalue what you built, then assume users do too. My favorite part of the debate was that it spawned a number of alternative designs. Some people were divided. They agreed with the reasoning, but still thought a tri-state toggle added clarity. So naturally, they did what UI designers do best: they designed, and the results are quite clever. Others took a different, hilarious tack on the problem, and attempted to imagine the worst possible dark mode toggles. The alternative that made the rounds most is Vale’s innovative design : The core premise is quite clever: Three states with the real estate of two icons (33% saving over the typical tri-state control — though still double that of a two-state control), and clarity about whether you’re selecting system or pinning a mode that happens to coincide with your current system setting. But most importantly, this is adding significant implementation and UI complexity for something that the vast majority of users don’t devote nearly as much thought to as we think they do. In my opinion, this is admirable effort that is ultimately solving a non-problem . This is also quite interesting: i feel this is a good trade off if you want to give users the most control, even though i see your point that this is possibly too niche of an edge case to justify. did i do the UX version of premature optimization, or does this just suck too? [image or embed] It’s a two-state toggle that pins light/dark when interacted with, but provides a clear button. This is similar to Bramus’ idea but with more polish. As I said on bsky , I don’t think this particular design works because: But none of these are core to the idea, and could be fixed with a little more UI design massaging. If someone really wanted to have three states visible at all times, a reworked version of this would probably be the best way (and can be designed to occupy similar screen real estate as a two-state toggle). Should anyone spend the time to do this rework? Like I wrote in the previous section, my opinion is that these efforts are pouring a great amount of brilliant creative energy into solving a non-problem, so I would not recommend it. The Big Dark Mode Toggle Debate™ raged on for weeks, and I think my favorite part of it was the side thread of people taking the piss and coming up with the worst possible dark mode toggle designs imaginable 😅, possibly as a tribute or reprise of The Worst volume control UI . I reject your two-state toggle and submit my own 4-state toggle. Pray that I do not increase it to 5. [image or embed] [image or embed] [image or embed] Of course, I had to participate: Oh but why stop there? 🤣 [image or embed] I actually strive for perfect clarity with my color theme pickers. codepen.io/editor/chris … [image or embed] Did anyone already mention "Dark mode with spotLight"? No!? That's the only valid way. Demo: codepen.io/t_afif/pen/Y … via @codepen.io Debating about toggles? Well, I don't understand … [image or embed] Anything below 4 is unacceptable. right @svenning.io [image or embed] This may be my favorite: The current debate between 2 vs 3 state theme switchers is ridiculous. Everyone knows that the right answer is 100 #css #a11y [image or embed] Two-state, tri-state, four-state...why should we concern ourselves with this anyway? I say users should not get this for free at all; therefore, I introduced a new mode in this article called capitalism mode ✅ codepen.io/editor/sunka … #css [image or embed] However, my biggest insight from all of this is that while I stand by my original recommendation that in most cases, if you are going to have a dark mode toggle that is visible at all times, it should only have two states (system and opposite), I now think that for the vast majority of websites, you should not have such a toggle at all . Follow system as the default, and if need be have a separate settings panel (even if it’s not actually implemented as a separate page but just an overlay) and put it there. It simply doesn’t warrant permanent screen real estate for the vast majority of users. The eye-opening moment was when I sent my post to a colleague who is also an HCI PhD, to get their feedback on whether my reasoning was sound, or whether I had any blind spots. For background, this was someone who was much less immersed in the technical weeds of the Web — their work centers more around humans than around deep technical details. I expected either agreement or constructive criticism, but what I got was much more eye-opening: It turned out that they had no idea what control the article was talking about ! Folks, …they had never seen a dark mode toggle! 5 And then it dawned on me: all these persistent dark mode toggles I had seen, literally all of them have been on developer-facing sites ! I could not think of a single well-known consumer-facing site with a persistent dark mode toggle. All consumer-facing websites that supported this functionality displayed it in a separate settings panel ( which is a different use case ). Even those which people spend hours a day using, like Gmail, Facebook, BlueSky, etc. None of them see this as a use case that deserves precious header real estate. Wikipedia does show this sidebar by default on large enough viewports, but this is not an exception — just an auto-expanded settings panel. Now, this alone is not evidence that dark mode toggles are a bad idea. A pattern can be widespread and still suffer from poor usability. And every UX innovation started off not being popular, so the reverse doesn’t hold either: a pattern can be unpopular and still be good. But in this case, I think they’re right. It suddenly all made sense to me: this doesn’t matter nearly as much to the average user as it does to us developers. To be clear: “always light/dark, even against the OS” is a legitimate intent! But it is also a relatively rare one, and rare intents belong behind progressive disclosure — a settings surface — not in the one control every visitor sees. In a textbook case of false-consensus bias , we have been so focused on our debugging needs that we convinced ourselves this is top of mind for the average user. A corollary from the reasoning above is that a dark mode toggle is a good idea when the website is developer-facing or developer-adjacent (e.g. a site for designers). Usability is a property of user outcomes , and no users were observed in any of this. Even my own article was derived from first principles and my experience observing users, but no actual observations of users interacting with dark mode toggles were made. Per the previous section, I’m not convinced this is a problem worth solving. That said, if we do want to solve it, the best answer is obviously to get data from real user interactions. However, there is a caveat here: qualitative user testing 6 is less useful for infrequent microinteractions like this one. Think about it: how would you design a meaningful qualitative experiment? At best, each participant would only interact with the toggle once. Most wouldn’t click it at all, unless the experiment was designed to show a website where the OS default theme is awful, which generalizes poorly. Another easy bias in a controlled experiment is that it’s easy to bias the results by drawing attention to things that users would otherwise pay much less attention to. E.g. Vale wrote that the 3-in-2 switch was “intuitive and immediately understood by the great majority of people [they’ve] tested it with”. I strongly suspect these users were aware that something around dark mode toggles was being tested, and were paying a lot more attention to the control than they organically would. I think the best way to get data for something like this is to record how users actually interact with the control, at scale, then analyze the data quantitatively. The experiment could involve different toggle designs as separate conditions. Then, we could look at the data to answer questions like: By select above, I’m not referring to clicking, but the actual, final selection, to avoid noise from people playing with the control just to see what it does. It is easy to get deep into a rabbit hole of trying our hardest to solve a problem that shouldn’t exist in the first place. Especially for those of us with an engineering background, problem-solving comes naturally and it’s very hard to resist a challenging problem. I’ve seen this happen repeatedly in many types of technical debates. It’s very common in standards groups as well: someone proposes a feature and the group starts debating the details before deciding whether the feature should exist at all . Before any significant problem-solving task, it’s always good practice to step back and ask ourselves “is this a real problem worth solving?” . You’d be surprised how often the answer is no . during a CSS WG meeting where I was presenting several topics no less! ↩︎ It’s right up there with “simplicity”. I have seen developers happily shovel complexity downstream to users using “simplicity” as the justification. ↩︎ I’m not talking about you Bob! ↩︎ Most parents hugely overestimate how many people are interested in kidnapping their kids. In reality they struggle to even find someone to look after them for an evening, let alone take them forever 😅 ↩︎ or — perhaps more likely — never paid attention to one ↩︎ The kind where you get a few users and observe them using the UI to accomplish a task — i.e. what most people refer to as just “user testing” ↩︎ Paul Kinlan Kevin Powell John-David Dalton Tab Atkins-Bittner Cory LaViska Ahmad Shadeed Josh Tumath https://css-tricks.com/dark-mode-toggles-two-states-are-enough/ https://daily.dev/posts/dark-mode-toggles-two-states-are-enough-lea-verou-aojclwsb5 https://vale.rocks/micros/20260810-0330 https://unsung.aresluna.org/2026/08/14/ https://bitstorm.org/weblog/2026-8/dark-light-toggle.html The user’s OS is set to auto-switch Light/Dark based on the time of day. They visit a website during the day, so they see the Light theme. Using the site’s two-state control, they try out the Dark theme. They decide they don’t like it, so they revert it back to Light . They visit the site again at night. As Vale themselves admit, some users did not realize they could revert the option they had selected, simply because that’s not a common interaction pattern. Vale does say this was a minority of users, and that it was “immediately understood by the great majority of people [they] tested it with”, however I have doubts on whether this would hold true in the wild, when you haven’t already primed users to pay extra attention to the dark mode toggle. Vale claims that “It only takes up the space of a two-state toggle”, but that’s not true. A two-state dark mode toggle only needs the real estate of one icon, not two. It’s possible to implement one that shows both icons simultaneously, but that’s rare. In its default state, nothing communicates “system”. It is two icons with no indication of which is currently active. We understand that it’s a dark mode toggle, because it’s presented in isolation, in the context of an article about dark mode toggles. But used on an actual website, I wouldn’t be surprised if users had no idea how to use it and only figured it out by trial and error. Subtly highlighting what System currently resolves to could help here, but then we’re back distinguishing whether “light” means “System (light)” or “Light, always”. Spacing makes it look like these are separate controls, not one clearing the other’s selection The clear button has nothing associating it with the color scheme toggle (not proximity, nor its icon). How frequently do people interact with the control meaningfully (i.e. ending up with a different selection)? (to see if it’s worth permanent screen real estate) On a tri-state control, how frequently do users actually select the option that matches system but isn’t system? (to see if you actually need three states) For mouse users, how much time passes between hovering the control and making a final selection for each condition and how many clicks does it involve? (as a proxy for cognitive load) during a CSS WG meeting where I was presenting several topics no less! ↩︎ It’s right up there with “simplicity”. I have seen developers happily shovel complexity downstream to users using “simplicity” as the justification. ↩︎ I’m not talking about you Bob! ↩︎ Most parents hugely overestimate how many people are interested in kidnapping their kids. In reality they struggle to even find someone to look after them for an evening, let alone take them forever 😅 ↩︎ or — perhaps more likely — never paid attention to one ↩︎ The kind where you get a few users and observe them using the UI to accomplish a task — i.e. what most people refer to as just “user testing” ↩︎

0 views
David Bushell 1 months ago

Fine, I’ll build my own text editor!

Hello RSS reader! This post contains interactive features. Please visit the canonical web page for an optimal viewing experience :) “They don’t make ’em like Sublime Text anymore” resonated with a lot of folk. Software these days is garbage. That got me thinking; I’m good at building garbage! Why can’t I build my own text editor? VS Code is built upon Monaco Editor which is a soup hellscape. I was late to the VS Code train because for years my Intel inside™ Mac was too slow. That issue was resolved when I bought Apple silicon. If that’s the standard I have a lot of room to make mistakes. My first experiment renders everything on a element. RSS does not support this interactive feature. Please visit the canonical web page. You can’t tell, but your CPU is doing a lot of work to render that picture at 60–120 frames per second. Lack of interactivity is an obvious problem for a text editor. I made a list of the “minimum viable” features and implemented them. This next demo is interactive, click around and type. RSS does not support this interactive feature. Please visit the canonical web page. Before you @ me about Vim bindings: shut up, I’ve got more pressing issues. Canvas gives me nothing for free. Amongst many desirable features, I’m missing: That last one is critical. Life is too short to implement custom elastic scrollbars. I decided to cheat and use native browser overflow on a hidden element. A is sized to match the canvas text and the scroll position is used to calculate render offsets on the . RSS does not support this interactive feature. Please visit the canonical web page. I’m pleased with how that’s coming along but I’m also disheartened because is entirely inaccessible. I could continue to add text selection and other features but I’m not solving the fundamental accessibility issue. I had a better idea. Instead of rendering text on the I can just render it natively in the overflow and make it editable with a attribute . That attribute has a value that is perfect for code. All content remains within a single text node. Attributes like must be disabled to avoid input latency spikes. Want to guess how many days it took me to discover that fix? Days! Using gives native text selection and undo history etc. So much accessibility goodness is wired up for free by the browser. RSS does not support this interactive feature. Please visit the canonical web page. The provides metrics I use to continue rendering a custom text cursor. is available so I can style that too. I’ve set the native invisible, which is probably a no-no. The technique is promising but I’ve noticed strange performance issues beyond a certain character count. Chromium browsers perform worse than WebKit and whatever Firefox is now but it’s unpredictable. Instead of plaintext would a simple be viable? In short: yes. Turns out a is far more performant for longer text. In this final demo I’ve added syntax highlighting too. RSS does not support this interactive feature. Please visit the canonical web page. My original plan was to use custom on the element. can’t use CSS highlights so a third layer was required. For demo purposes I added some soup for the visible lines to apply MicroLighter . Edit: I’m told the new OpaqueRange API unlocks custom highlights for — neat! Too many CSS highlights are another performance bottleneck. A more robust solution would be to use Tree-sitter to generate a syntax tree and walk that to generate highlights for only visible lines. I was hoping to avoid virtualised scrolling entirely but I could improve it using the inverse sticky technique . Or I can go back to because the file sizes I’d be editing don’t hit the performance wall. Anyway, looking good, right? Looks like 90% of a text editor with 1% of the features. From here it’s pretty straight forward to draw the rest of the owl . I’m tempted to keep drawing but then I think about all the little things like tab indentation. Right now I just hijack the tab key to insert two spaces… My demos above are unoptimised and far from perfectly accessible but at least I’m not starting from a losing position. Rendering on would be a nightmare. I’m filing this project away for a rainy day. JavaScript strings and text ranges work with UTF-16 code units. It’s easy to naively introduce bugs. I’m sure my demos are full of them. I’ll leave with a code example to nerd snipe. Thanks for reading! Follow me on Mastodon and Bluesky . Subscribe to my Blog and Notes or Combined feeds. Pointer down to position text cursor Arrow keys to move text cursor Highlight current line Type to enter text Fancy cursor animation Text selection Undo/redo history Multi-line paste Overflow scrolling

1 views
マリウス 1 months ago

Hyperuplink: Discuss like it's 1998

Between the screeching handshake of a 2400-baud modem, the steady hum of a computer in Turbo mode, and the pale flicker of a CRT glowing at three in the morning, the internet seemed to have had something that, over the past two decades or so, it has completely lost: A soul . Communities made up of actual humans gathered around bulletin boards that loaded in a single request, where regular hardware could bring an entire world to your screen without borrowing half your CPU just to show you a list of topics. If you happened to have lived through that brief and peculiar moment in history, you probably still carry a fondness for those days, and you remember the strange little corners of the internet that you discovered, the hours you spent exploring them, and perhaps the friends you made along the way. Hyperuplink is my attempt at bottling those memories and the feelings attached to them, and pouring them into something that makes sense in 2026. It is a modern internet bulletin board that doesn’t require Telnet and works inside your browser, that renders proper, modern HTML5 and CSS on the server-side, that runs 100% JavaScript-free, and that ships as a single statically linked binary with no external runtime, no interpreter, no FastCGI , no , no , and not a single loose file spilled across your disk. It can talk to a PostgreSQL server or an entire cluster, it makes use of any Redis -compatible cache, and it comes with a whole set of nostalgic as well as modern themes. More importantly, Hyperuplink is fun, it doesn’t take itself too seriously, and it is the forum software for everyone who’s done wrangling with phpBB ’s runtime environment or Discourse ’s broken JavaScript UI. And yes, Hyperuplink , too, really whips the llama’s ass. The short version, for anyone who has been idling in the community channel or who already read the back-story in an earlier status update , is that back at the time I wanted a community discussion forum for the people who use any of the tools, programs and services I’m building , and I could not find a single piece of software that I actually wanted to put up with. I was looking for an internet forum that would resemble the good old BBS systems from back in the day, but that would allow people to use it from the comfort of their modern-day browsers. I also wanted something that … phpBB was the obvious first stop, because it has been around for decades and, unlike Discourse and Lemmy , it does not force JavaScript down the visitor’s throat. But phpBB is a monster that carries far too many features, takes time to install and configure, and, once you account for its extensions and runtime dependencies, demands a recurring maintenance ritual that I frankly do not have time for. Discourse and Lemmy , on the other hand, I won’t even consider to begin with, because they simply don’t work without JavaScript enabled. Everything else I looked at either missed something I needed, would have brought similar runtime headaches, or would have required me to fork it and maintain that fork forever, just to get a few of the features that I needed. So I did the reasonable, well-adjusted thing and started writing my own bulletin board software at the end of last year . Before writing a single line I sat down and weighed the usual suspects, PHP with Laravel , Python with Django , Elixir with Phoenix , Go with Fiber , and Zig with Jetzig . I did not consider server-side TypeScript for even a second, because the Node.js and NPM ecosystem is a dumpster fire of outright malware that I refuse to pick for even something as deliberately absurd as Hyperuplink . The scripting stacks make web development pleasant, and they abstract away the tedious HTTP, session and form handling so you can focus on the thing you are building, but every one of them drags a runtime and a maintenance burden behind it. My one goal for Hyperuplink was for a hobbyist admin to be able to run a board without babysitting a whole stack. From an administrative perspective I wanted to be able to update one or two binaries every once in a while and be good, without having to subscribe to e.g. the PHP security announcements, and its mailing lists, and its security advisories on GitHub, and the NVD only to make sure I’m not missing a critical CVE of one of the gazillion of dependencies. Go sits in the sweet spot between the low-level compiled languages like C , C++ and Zig that hand you performance at the cost of development speed, and the interpreted languages like PHP and Python , that make data structures a joy to work with but that are expensive to run. The deciding factor was that Go compiles down to one statically linked binary that you copy to any VPS and simply launch. The one downside is that Go is not exactly a “web native” language and has nothing like Django or Laravel to accelerate the boring parts, so I built my own small web application framework on top of the Fiber v3 framework and went from there. Hyperuplink is a single static binary, compiled with CGO disabled, cross-compiled to Linux, macOS, FreeBSD, NetBSD, OpenBSD and a long tail of architectures, so that deployment is nothing more than copying that binary into place. It is PostgreSQL-native and cluster-friendly and it uses materialised views to optimize read performance. Schema migrations are embedded and run automatically on startup, which means there are no external migration files and upgrades should be as easy as simply firing up the new version. In addition, a Redis -compatible service is used for caching, and sessions, and the async job queue. Profile pictures, attachments, and custom assets can either be uploaded to the local disk or into any S3-compatible object store (such as MinIO ), which is useful when scaling the service horizontally. Hyperuplink runs zero client-side JavaScript, meaning that every page is server-rendered HTML5 and CSS, and there is nothing that logs how your cursor drifts back towards that thread about whether pineapple belongs on pizza, just to collect data on your account. Speaking of which, accounts can sign-up/-in via local password, with optional TOTP two-factor authentication, but Hyperuplink also supports login through OAuth providers for the friends you are trying to lure over from other platforms. And for anyone who finds email too boomer , sign-ups and notifications work over XMPP , too. As for authorization, accounts can be assigned to groups with per-category permissions so the good stuff stays available only to the good people . Hyperuplink features a range of pre-built themes, some of which feature beautiful retro aesthetics that it owes to the classic-stylesheets project. There are also slightly more modern looks available, and with every theme the colour schemes are interchangeable, so a Gruvbox -tinted macOS 9 board is very much a thing. The bulletin board supports Markdown in posts, it offers uploading profile pictures and attachments, it comes with reporting and moderation features for the admins, and the UI supports i18n. Hyperuplink also ships with a REST API that I believe is friendlier to work with than what Lemmy or Discourse expose, and it even has its own TUI client with the official Hyperuplink integration into Neon Modem Overdrive . Hyperuplink is developed on tty.fail and mirrored to GitHub , the mirror being where the pre-built binaries and container images are built and hosted ( thanks for the free CPU cycles! ). Regardless of how you decide to run your bulletin board, you will need a PostgreSQL and a Redis -compatible server reachable, plus, optionally, an S3-compatible store if you would rather keep uploads off the local disk. The official repositories contain all the required documentation and configurations to get you started as quickly as possible, but the basic idea is that you can simply grab the binary for your platform from the releases page , drop it wherever you please, and run it: There’s a whole Docker and Podman (rootless!) setup available, if you would rather bring the entire stack up at once. The repository ships a / with PostgreSQL and Valkey and an optional MinIO profile: The Podman setup does everything the Docker setup does but rootless, and alongside the there is even a set of Quadlet units if you prefer using systemd . Kubernetes works, too, and a minimal with a couple of replicas and the config handed in through a is pretty much all you need. Since the uploads can use S3 the pods stay stateless. Ebuilds are available in the repository so you can compile it on your own Gentoo… server… I guess. I tried including all that’s necessary for Nix but to be fair, I’m not actively using it anywhere so consider this more of a proof-of-concept rather than an actively maintained thing. If you feel like actively maintaining the Nix part of things I’d be happy for you to reach out. The repository also contain the required init scripts for FreeBSD, OpenBSD, OpenRC and even a Service definitions for systemd . If you want to build Hyperuplink yourself, for which you need Go , it’s equally easy to do: The self-contained binary lands in , ready to be moved wherever you please. Note: Alright, alright, I lied, and you got me. No runtime dependencies was not 100% accurate and you’re probably staring at a forum that refuses to allow its users to upload profile pictures. The reason for that is that Hyperuplink has one runtime dependency, which is ImageMagick ’s command. The service must be able to find that binary in its in order for profile pictures to work. As for why, it’s a long story, but the tl;dr is that image processing is hard and there aren’t many people, me included, who feel like reinventing the wheel for, let’s say, the WebP compression algorithm, by building a native Go implementation. Because I explicitly didn’t want to use for the sake of preserving Go ’s easy cross-compiling, I decided that calling the binary was the most reasonable approach. After all, you’re likely to have ImageMagick on your system if you’ve ever hosted anything web related on there. However you end up running the process, put it behind a reverse proxy that terminates TLS, because in the session cookie is HTTPS-only and you most definitely wouldn’t want to run the forum in mode. Also, if you want the service supervised there are the aforementioned service files for systemd , OpenRC on Gentoo and Alpine, and rc.d on FreeBSD and OpenBSD waiting in the repository. Hyperuplink is open source under the SEGV License , the code is available on tty.fail with the mirror and the pre-built binaries over on GitHub , and everything else you could want to read about it is either available at hyperup.link , or within its own embedded manual that you can find under Help -> Manual . If all of this sounds like your kind of thing, come and say hello in the chatroom , show off your board once you have it set up, and if you would like to lend a hand with development or testing then reach out , because the best communities were always the ones with real people, putting in real work. can either use an existing database table to authenticate users, and/or… supports simple signups, ideally with XMPP JIDs instead of email addresses supports notifications and replies via email and ideally via XMPP is lightweight and does not drag along a mountain of runtime dependencies does not require users to have JavaScript enabled does not bury me under administrative features I will likely never touch is reasonably easy to theme and, more importantly, to maintain long term

0 views
Jim Nielsen 1 months ago

Have You Heard the Good News About Microlighter?

Dave Rupert wrote about shipping microlighter : a tool for handling syntax highlighting using the CSS Custom Highlights API . I saw his post the day he released it, and I had an implementation PR up for my blog by end of day. Then, like I do with so many things, I let it sit there. This is the period where my subconscious takes over. It does the work of, “How do I actually feel about that? Do I want to merge it? Do I have any regrets about what I did?” If I still want to merge it after a few days, that’s usually a good sign that I’ll be happy with the work. (Sometimes after a few days I say, “What the hell was I thinking?” and then it’s easy to simply close the PR with zero regrets.) Well it’s a few days later and I still feel good about it, so time to ship! My PR for this is pretty straightforward: Granted, there are trade-offs to this approach. I get it. Dave’s explainer for this tool on The ShopTalk Show vibed with me because I’ve been in his shoes many times: “Whoops, somehow syntax highlighting on my blog is broken again. Guess I need to fix it. Ugh. I’ve done prism , I’ve done highlight.js , I’ve done shiki . What should I do this time? Could I do this in a way that’s just less ?” He clarifies: I’m not coming at this like, “Everyone is doing it wrong!” I was just kind of like, “Could I do this in a way that suited me?” Well, this approach suites me. There’s a kind of conceptual elegance to it where syntax highlighting lives in the realm of a styling operation rather than a content transformation plus styling. In short: syntax highlighting, i.e. styling text, is a styling concern so solve it with CSS — no DOM manipulation required! Plus, I mean, how cool is it that the code on the website is the same as the code in the DOM?!? I guess this is how I know I still like working on the web, because seeing browsers do stuff like this that they couldn’t do before still feels really cool! Reply via: Email · Mastodon · Bluesky Remove dependency (and related plumbing) On paths that 1) match my post pages (i.e. ), and 2) have code on them, pull microlighter deps from a CDN and run it.

0 views
Jim Nielsen 1 months ago

Getting an LLM to Make Me a Tool for Enriching the Color Metadata in My Icon Collection

On my icon gallery sites , I have metadata I’ve manually added over the years to tag certain icons as being predominantly “blue” or “orange” or some other color. Then I use this metadata to present icons of (roughly) the same color. It’s kinda neat to be able to browse a wall of icons that are all the same color. The thing is: I know there are a lot of icons I’ve missed tagging over the years. But I have no idea how many, and figuring that out seems like a really arduous task. How do I go through 2,000+ icons and find all the ones that look predominantly “orange” but haven’t been tagged as such yet? Seems like a good task to throw at an LLM. But I don’t want to just say, “Go tag everything that’s missing” and blindly trust the output. I need to be able to make a decisions as to whether I think a particular color is “orange” or not. What I need is a tool for the job. I’m a very visual thinker, so to continue curating these color categorizations, I need some way for the computer to do its thing really, really fast, and then pull me into the loop to visually make decisions. Here’s how I am thinking about about accomplishing this task: That seems like it would be a good tool to put me in control of visual decision making around color categorization. So I tell the LLM to run with it. We chat back and forth. I think, “You probably need to run all the icons through some model to make the correlation?” But it’s like, “Nah bro, just make a ‘hue histogram’.” It tells me how. For a color like “orange”, I can: [process] each PNG, skip transparent pixels, skip low-saturation gray, convert the rest to HSV, and score how much of the remaining mass sits in the orange hue band (roughly 15–45°). Rank icons that don’t already have colorId: . Ok, sure. That sounds reasonable. [This] scores each icon PNG by share of opaque pixels per color bucket, then writes a standalone HTML page: tagged vs maybe-missing, per color. Let’s just make it, and then I’ll decide whether it’s good enough. After a few iterations, the computer going “brr…”, and me saying “explain that like I’m dumb”, I have a really effective little tool! The little threshold slider is a nice touch. It lets me fiddle around with the fidelity of the matches. In some cases, sliding it down reveals more icons I would’ve otherwise missed. In other cases, I’m like “What are you thinking? I don’t see that as ‘yellow’ at all!” Supper effective little tool. I go through each color, select the ones I think are missing, paste the IDs back into the LLM, and then have it update each icon's metadata. Boom, done! That all would’ve taken so long before. I would’ve never done it. Reply via: Email · Mastodon · Bluesky Create a page with a list of colors on the left (red, green, orange, blue, etc.) When a color is clicked, show two columns. 1) All icons I currently have tagged for that color, and 2) all icons that might be that color but aren’t tagged as such (you, computer, process all my icons and do the work to figure this out and make recommendations). Allow me to select one or more icon(s) in the “not yet tagged as this color” column. Once I have all the ones I perceive as missing, give me a button to say “Copy” which copies the IDs of those icons. I’ll paste the IDs back here in the chat and you go add the corresponding metadata. The LLM is good at making throw-away code. This doesn’t need to be “production-grade” code I depend on. Just something that’s good enough for me to get a job done, then toss. The resulting metadata is the goal, not the tool I use to get to the goal. The LLM is good at making one-off HTML pages for a specific task. In my case, all these images were hosted on a CDN, easy enough to just point at and have a standalone file that I can locate on my hard drive and open directly as a URL. No bundling. No transpilation. None of that. I don’t even need a web server! Keeping things very basic on this project is paying off: I had really elemental building blocks that didn’t require additional third-party tooling. Just HTML, CSS, a little in-page JS, and images on a server! It’s fun to say, “Don’t do the work for me. Instead, help me make a custom-fit tool that facilitates me doing the work in the most empowering, correct way possible.”

0 views