Posts in Frontend (20 found)

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
Unsung Yesterday

Deeper dive: Keyboard differences between Windows and Macs

Over the years, I learned about many gotchas and strange differences between keyboard handling on Mac and Windows – pertinent especially to web apps, which use the same codebase to cater to both. I thought it might be helpful to someone if I compile them all in one place. This post is meant to be a reference, and there aren’t any cute or riveting stories hiding inside – if this seems boring to you, feel free to skip to the next one! What Windows calls Backspace, Mac calls Delete. What Windows calls Delete, Macs call Forward Delete. (This means saying “Delete” without specifying the platform might actually be confusing.) What Windows calls ⏎ Enter, Mac calls ⏎ Return. However, Macs also have an ⌤ Enter, although only on a numeric keypad (previously, it was even there on laptops !). On keyboards without the physical Enter key, you can simulate it via Fn+Return. In most Mac software, Enter and Return do the same thing. There are a few exceptions – for example, Photoshop enters a new line on Return but commits on Enter, and some classic pro apps like Cubase or Pro Tools do different things, too – but it seems to be a dying tradition. (If you are curious about the history of Return and Enter, I wrote about it once .) Windows customarily calls the secondary key Numpad Enter. I don’t believe Fn+Enter works to simulate it. Generally, third-party keyboards use Windows verbiage – so, Backspace and Enter. If a keyboard offers Mac conventions at all, they usually only extend to modifier keys. ⌃ Control on Windows is the equivalent to ⌘ Command on a Mac. (Paste, for example, is ⌃V on Windows and ⌘V on a Mac.) But, confusingly, Apple devices still have a Control key, too. This was originally meant for terminal applications, but these days many GUI apps use it as an extra modifier key. This means that for apps, Windows devices offer Ctrl, Alt, and Shift – and Macs offer ⌘ Command, ⌥ Option, ⌃ Control, and ⇧ Shift. That’s one more modifier key, and thus more space to breathe. (We’re not counting the Windows key or the 🌐 Globe/Fn key since those are technically reserved by the operating system.) Some keyboards offer extra key caps you can swap to match the platform, for example: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/1.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/2.1600w.avif" type="image/avif"> Others cover all the bases on fixed key caps, in an awkward way: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/3.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/4.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/4.1600w.avif" type="image/avif"> Many stick with Windows-only legends. Apple devices rely more on symbols on their keys and in their menus, although they don’t do so consistently. Here are all of them: Actually, I lied about the last four. On modern Apple keyboards, they are: Reusing the regular arrows for Page Up and Down is one of a few perplexing decisions from Apple’s keyboard designers. The arrow key symbols look like this – ◀▶▲▼ – but only on Apple keyboards. Here is an older and a newer Apple keyboard showing what happened: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/5.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/5.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/6.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/6.1600w.avif" type="image/avif"> (Luckily, the confusing dual arrow key situation only happens on less popular, full-size keyboards.) Historically, Apple keyboards used symbols more on non-US keyboards, but starting with the 2026 models, they unified when they show symbols and when they show symbols and legends, across all keyboards. (The only key with just a text legend is Esc, making the appearance of ⎋ in menus extra puzzling.) Windows keyboards typically use words – this is why in tight quarters you sometimes see shortenings like Ctrl, Bkspc, PrtSc, Del, PgUp, Win, and so on. (I don’t think Apple ever abbreviates their legends with the exception of Esc for Escape.) In some countries, the legends are translated – as an example, in Germany, Ctrl sometimes appears as Strg. The symbols that crossed over to Windows side are: I have not seen any other popular symbols on the Windows side of the aisle, and I am not even sure if the above would be widely understood. But here’s an example: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/7.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/7.1600w.avif" type="image/avif"> ( I wrote a bit more about Mac symbols before , and also about the rare Canadian symbols .) In menus and other places, Windows joins the key combinations/​shortcuts with a plus, but Apple just glues them together: Here is the same Chrome menu on Windows and on macOS: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/8.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/8.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/9.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/9.1600w.avif" type="image/avif"> (In other words, you’d never say “⌃V is Paste on Windows” like I did above.) Both Windows and Macs have function keys. On Windows, traditionally those were claimed by the operating system or the apps as shortcuts. Here are some examples of well-known function key assignments: On Macs, traditionally the apps didn’t reach for function keys, as those were reserved solely for the users to do stuff with. (However, some combination of ⌃ and function keys are used by the operating system for accessibility options, and I occasionally see apps use function keys these days.) Windows keyboards top off at F12, but some Mac keyboards reuse the three special PC keys, and even take over the unnecessary Num Lock/​Caps Lock/​Scroll Lock island, and end up going up to F19: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/10.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/10.1600w.avif" type="image/avif"> Access to extra characters In text fields, Apple has a system where pressing ⌥ with printing keys outputs more characters, for example ⌥Q outputs œ, and ⌥7 outputs a ¶ pilcrow. Additionally, ⇧ works in this context, so for example ⌥⇧Q outputs Œ, and ⌥⇧7 outputs a ‡ double dagger. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/11.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/11.1600w.avif" type="image/avif"> Note that not only letters, but basically all printing keys have secret ⌥ and ⌥⇧ assignments. Also, ⌥ assignments vary per location! The above was U.S. English, here’s Polish with a lot of differences: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/12.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/12.1600w.avif" type="image/avif"> This means it’s best to avoid ⌥-based shortcuts in text fields, since they might conflict with some important character. By the way, while the above two are just mock-ups, on some physical keyboards (here: British English), some of the important ⌥ invocations are actually printed on keys: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/13.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/13.1600w.avif" type="image/avif"> Windows doesn’t have the above feature. However, Windows has an alternative feature where typing Alt+numpad keys allows to enter any character by its code. (For example, Alt+0128 outputs €. Num Lock has to be enabled. I don’t think it’s possible to do it without a numeric keypad present.) Mac has a version of this feature, but it requires adding Unicode Hex Input keyboard and switching to it beforehand. Then, pressing ⌥20AC outputs €. While Mac modifier keys are completely symmetrical, Windows makes an exception for Alt. On many non-US keyboards, right Alt is also known as AltGr , and does something similar to ⌥ on a Mac: it outputs letters when pressed in combination with printing keys. For example, on Polish keyboards AltGr+A = ą, AltGr+C = ć, AltGr+Shift+A = Ą, and so on with 15 more combinations. Many other keyboards do similar things. The way it differs from ⌥ on a Mac is that these are usually reserved for core letters and punctuation necessary for each language, rather than the typographical smorgasbord that Apple provides. For legacy reasons, and also for keyboards that do not have a physical AltGr key, you can also invoke all these using Ctrl+Alt combinations instead (so, Ctrl+Alt+A = ą). This means that just as you have to be careful about ⌥-based shortcuts in text fields on a Mac, so you should be of Ctrl+Alt-based shortcuts on Windows . Just like on Macs, on some keyboards, selected AltGr options will be printed in the corners or fronts of keys: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/14.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/14.1600w.avif" type="image/avif"> Text fields Text fields in Mac OS apps and web browsers/​websites use some of the standard Unix/​Linux shortcuts based on the ⌃ Control key: You can combine many of the above with holding ⇧ to extend the selection. A small group of vocal users love these. Windows still supports Ctrl+Insert for copy and Shift+Insert for paste. I am not sure if those are being used. On a Mac, in simple input fields, ↑ and ↓ jumps to the beginning and end (same as ⌘←→). This often conflicts with command line history, autocomplete pop-ups, and so on. Windows doesn’t have this convention, and Home and End serve this purpose instead. Macs support the iPhone-inspired convention of holding a key to show related accented characters, instead of triggering auto-repeat. Windows doesn’t have this feature. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/15.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/15.1600w.avif" type="image/avif"> Differing shortcut conventions worth knowing about On a Mac, redo is typically ⌘⇧Z. On Windows, it’s typically Ctrl+Y. On a Mac, refresh (in browsers, etc.) is typically ⌘R. On Windows, it’s typically F5, although some browsers now support Ctrl+R, too, presumably since function keys are harder to access than they used to be. Windows’s eponymous ⊞ Windows key is reserved solely for the use of the operating system, and so is Mac’s 🌐 Fn/​Globe key. (Although I am not 100% sure of that as I found one place you can create 🌐 shortcuts as a user – I’m just not certain if it’s intentional.) However, each platform also has a lot of shortcut combinations that are effectively unavailable, for example ⌘⇥ and ⌘M on a Mac, or Alt+Tab and Ctrl+Shift+Escape on Windows. These official lists can help: If you’re a web app, you will compete for shortcuts with the operating system (like any app would), but also with the browser itself. You can typically take over shortcuts like ⌘S or ⌘P, but depending on the browser or the platform, some might be sacred and unavailable. No Mac browser will allow a website to claim ⌘Q, ⌘W, or ⌘T. Safari won’t allow a web app to override ⌘R. Arc browser won’t allow to override ⌘⇧C. (This is not a complete list.) Tabbing and Shift tabbing is customarily used to jump between UI elements, but it behaves slightly differently in native apps. On Windows, tabbing jumps through all elements: On Mac, Tab jumps only to elements that require keyboard to operate (such as input fields). You can toggle a System Settings preference and ask macOS to mimic Windows behaviour – see the last toggle below – but it’s not supported well everywhere. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/18.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/18.1600w.avif" type="image/avif"> PgUp and PgDn work differently: Similarly, Home and End work differently: On both platforms, Fn+↑↓ does PgUp/​PgDn, and Fn+←→ does Home/End. (Do you see how confusing it is to say that given that ↑↓ already mean PgUp/Dn on a Mac?) Windows has a tradition of enabling access to menus and visible controls by pressing Alt and letter keys. This has evolved over time and is not as consistent as it used to be, but it might be worth knowing about. On a 100-plus-key keyboard, Windows might have: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/19.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/19.1600w.avif" type="image/avif"> Macs have: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/20.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/20.1600w.avif" type="image/avif"> Macs never had arrow keys on a numeric keypad nor a Num Lock key to enable it. (I’m breaking my promise! Here’s a fun bug story about Num Lock .) In a strange twist of fate, it’s not only third-party keyboards that favor Windows legends. Some of Apple’s keyboards in between 1980s and 2000s showed PC legends, too! (This was to court PC compatibility of then-beleaguered Macs.) Here’s the classic Apple Extended Keyboard, showing legends for Insert, Delete (naming it Del to avoid confusion with its own), Print Screen, Scroll Lock, Pause, Num Lock, and Alt: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/21.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/deeper-dive-keyboard-differences-between-windows-and-macs/21.1600w.avif" type="image/avif"> (Did I miss anything or make a mistake? Let me know !) ⎋ Esc (not printed on keyboards, for some reason) ⌦ Forward Delete ≣ Contextual Menu (only on full-size keyboards) ⇞ Page Up (only on full-size keyboards) ⇟ Page Down (only on full-size keyboards) ↖ Home (only on full-size keyboards) ↘ End (only on full-size keyboards) ↓ Page Down ⇧ for Shift ⇪ or 🔒 or a similar symbol for Caps Lock (on non-US keyboards) ⏎ for Enter – note the same arrow as Mac’s ⏎ Return ← for Backspace – note a different arrow than Mac’s ⌫ Delete ⇥ for Tab (you can also sometimes see ⭾, which is a symbol representing Tab and Reverse Tab together; Reverse Tab used to be a separate key on some 1970s terminals) ⊞ for Windows key – the style of the logo will be different depending on the age of the keyboard, roughly matching the Windows logo at the time; some keyboards also use a more abstract shape, or call the key Start or System instead of Windows ≣ for contextual menu key (a.k.a. Application Key) – just as Apple added that key on its large keyboards, Microsoft started removing it in favor of emoji key , Office key , and then Copilot key ⌃ for Control (especially in nerdy contexts) Windows: Shift+A, Ctrl+Shift+G, Ctrl+F11, Alt+Enter Mac: ⇧A, ⌃⇧G, ⌘F11, ⌥⏎ Alt+F4 – close the app F11 – maximize window F12 – dev tools in browsers ⌃A – move to the beginning of the line ⌃E – move to the end of the line ⌃F – move to the right, or forwards (hold ⌥ to jump through words) ⌃B – move to the left, or backwards (hold ⌥ to jump through words) ⌃N – move down or to the next command ⌃P – move up or to the previous command ⌃L – scroll the window so that the text cursor is in the vertical middle ⌃H – delete (backspace) ⌃D – forward delete ⌃K – delete (kill) to the end of the line ⌃T – swap (transpose) the adjacent characters ⌃O – insert new line, but (contrary to Return) do not move the cursor there Mac keyboard shortcuts Keyboard shortcuts in Windows On Windows, they move the text cursor a screen up or down. On a Mac, they scroll the view up and down, but they do not move the text cursor if it’s present (so, they are more an equivalent of clicking on the scrollbar chute). On Windows, they scroll the contents (and move the cursor if present) to the top or the bottom of a view, or move the cursor to the beginning or the end of an input field. On a Mac, in views they scroll to the beginning or end without moving the cursor. In input fields, Home/End do nothing, but you can use ⌘←→ to accomplish the same. Insert – still used in some contexts for overtyping Print Screen – today taken over by screenshotting Num Lock and Scroll Lock Pause/​Break Help – rarely used, and now abandoned in favor of… ≣ Contextual Menu – shows the same menu as right click would ⌧ Clear – a deterministic backspace , these days seldomly different than the actual Delete key

0 views
Andre Garzia Yesterday

BlogCat got a new Youtube subscriptions page

Made a really nice feature today after a friend requested it, added a new page to BlogCat that will list all the Youtube Channels you subscribed as a thumbnail grid, much like a non-algorithmic version of their home page. That means that you can use BlogCat to subscribe to channels, use the new page to view latest videos from the channels you subscribed, and use an alternative front-end to view the said videos such as invidious or nadeko. By combining these features, one doesn’t even need to have a Youtube account. It is quite neat and it skips algorithms and so on.

0 views
David Bushell 2 days 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
Unsung 1 weeks ago

The left hand should know what the right hand is doing

One day, as I was reading an essay on Medium, I saw an automatically inserted subscribe block: = 3x)" srcset="https://unsung.aresluna.org/_media/the-left-hand-should-know-what-the-right-hand-is-doing/1-framed.1600w.avif" type="image/avif"> But as I was exactly on top of it, a new thing popped in my view, an interruption on top of interruption, both saying the exact same thing: = 3x)" srcset="https://unsung.aresluna.org/_media/the-left-hand-should-know-what-the-right-hand-is-doing/2-framed.1600w.avif" type="image/avif"> 2. For a while now, whenever I try to follow a link to a site that no longer exists, Chrome shows a strange “This site doesn’t support a secure connection” flyout, just before hiding it itself, and then following it by a generic error page: This feels truly eerie: either a bug where the flyout gets triggered too soon without having all the information, or the flyout is trying to warn you about Chrome’s very own internal page. Just this week, after already having been in Taiwan for five days, and after having used Apple Pay to pay for public many times on each of these days, Apple Maps helpfully told me that I can… use Apple Pay to pay for public transit: = 3x)" srcset="https://unsung.aresluna.org/_media/the-left-hand-should-know-what-the-right-hand-is-doing/5-framed.1600w.avif" type="image/avif"> 4. Some months ago, after finalizing my car reservation and moving my attention elsewhere, an automatic “keep the session warm or lose it” window appeared, suggesting my reservation might actually “expire”: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-left-hand-should-know-what-the-right-hand-is-doing/6.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-left-hand-should-know-what-the-right-hand-is-doing/6.1600w.avif" type="image/avif"> 5. Downloading is possible on YouTube Premium and actually helpful, allowing you to load up some videos ahead of a long flight. There even exists a section where it suggests some things to download. However, download suggestions include member-only videos, and whenever you try to grab one of those, you get this result – a pretty poor “Video wasn’t downloaded” message: When I recently opened a dispute on PayPal for a keyboard I never received, at the end of the process, I saw these three screens in succession: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-left-hand-should-know-what-the-right-hand-is-doing/8.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-left-hand-should-know-what-the-right-hand-is-doing/8.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-left-hand-should-know-what-the-right-hand-is-doing/9.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-left-hand-should-know-what-the-right-hand-is-doing/9.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-left-hand-should-know-what-the-right-hand-is-doing/10.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-left-hand-should-know-what-the-right-hand-is-doing/10.1600w.avif" type="image/avif"> In effect the screens said, in order: we closed the case and decided in your favour, you haven’t finished filing the case, the case is open and we’ll update you. I feel uneasy bundling all these “the left hand doesn’t know what the right hand is doing” examples, because they’re not all the same. Examples #1–3 from Medium, Chrome, and Apple Maps are frustrating and somewhat embarrassing, outbursts from badly-behaving software that doesn’t know that it’s not okay to throw pop-ups at the screen whenever you feel like it. I particularly dislike announcements of features that the user has already been using since they feel condescending to me, but I don’t want to assume it’ll be the same for everyone else. Examples #4–6, however, are more insidious. Whether they happen because of plain old carelessness, or lack of imagination, or Conway’s Law – different teams not talking to each other – they can lead to people jumping to wrong conclusions or building entirely wrong mental models. Is my reservation truly done, or have I not actually finalized it? Is it possible to download member-only content, except I need to do something special to set it up? What is the status of my PayPal dispute? The answers in this case: yes + no + the first screen was the one telling the truth. But each answer required extra effort for me to figure out, and that effort would be avoided if only someone tested the flows better.

0 views
Unsung 2 weeks ago

“I didn’t know about this shortcut until recently.”

On his fascinating and long-running Windows dev blog The Old New Thing, Raymond Chen writes about the story of scrollbar right-click menus : Windows 2000 added a right-click menu to the scroll bar. This menu gave you four options that matched existing mouse operations, two operations that matched existing keyboard operations, and a new operation. The interesting new one is “Scroll Here”: You can right-click directly on the spot you want to scroll to, and then pick “Scroll Here”. This is much more convenient if you want to scroll a long distance, since you don’t have to grab the scroll bar thumb and then drag it all the way to where you want to go. You can just focus on where you want to go and not where you are coming from. I used this context menu a lot when I needed to jump long distances. […] An even-more-hidden shortcut was added at the same time: Holding Shift while clicking on the scroll bar jumps the thumb directly to the spot where you clicked. ¶ I didn’t know about this shortcut until recently. The menu looked like this, for what it’s worth: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-didnt-know-about-this-shortcut-until-recently/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-didnt-know-about-this-shortcut-until-recently/1.1600w.avif" type="image/avif"> (The equivalent function also exists on a Mac, except there it’s hiding under ⌥, and not ⇧.) Chen covers a few interesting things in his post, including the challenge of new frameworks losing hard-won UI affordances of their predecessors. But what caught my attention was something else I’ve thought about occasionally: why are menus so averse to mousing shortcuts? For example, you can imagine a browser link menu showing a few simple click gestures: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-didnt-know-about-this-shortcut-until-recently/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-didnt-know-about-this-shortcut-until-recently/2.1600w.avif" type="image/avif"> Or, this tapback details shortcut in the right click menu in Messages: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-didnt-know-about-this-shortcut-until-recently/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-didnt-know-about-this-shortcut-until-recently/3.1600w.avif" type="image/avif"> Or this for masking in Keynote when you right click an object: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-didnt-know-about-this-shortcut-until-recently/4.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-didnt-know-about-this-shortcut-until-recently/4.1600w.avif" type="image/avif"> You could even imagine announcing simple gestures, like ⌥+dragging to duplicate, or ⌘+dragging for a quick modeless move: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-didnt-know-about-this-shortcut-until-recently/5.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-didnt-know-about-this-shortcut-until-recently/5.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-didnt-know-about-this-shortcut-until-recently/6.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-didnt-know-about-this-shortcut-until-recently/6.1600w.avif" type="image/avif"> Item menus would also work, not just right click menus: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-didnt-know-about-this-shortcut-until-recently/7.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-didnt-know-about-this-shortcut-until-recently/7.1600w.avif" type="image/avif"> And you could even imagine integration with the hold-a-modifier-key interaction : I am curious why we’ve never gone in that. I haven’t seen anything like this, and I can imagine some counterarguments: This last one I feel passionate about, and this is where we can go back to where we started. If Chen, having written about Windows in detail for decades, didn’t know about this keyboard shortcut, what chance do we have? I believe onboarding should be universal and ongoing. There is always a new thing to learn somewhere regardless of one’s proficiency; you don’t ascend some sort of a Mountain Of Poweruserness, get a certificate, and proclaim your learning complete. Plus, proficiency is usually localized: no one is fully an expert in every aspect of even one app, let alone all of them. If Chen were to see something like this back in the day, it could have helped him – and I imagine others, too: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-didnt-know-about-this-shortcut-until-recently/9.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-didnt-know-about-this-shortcut-until-recently/9.1600w.avif" type="image/avif"> I’m curious if you have seen any app attempting anything like it. If you did, please reach out. “The symbols might be confusing.” I am not sure. Here, I used a few temporary SF Symbols that have some challenges (the double click in particular feels clunky), but I could imagine a talented icon designer taking it all for a spin, and arriving at a clean and elegant visual vocabulary. “It’s too specific. It will only work for right click/​context menus.” Yeah, I see this challenge. The mouse gestures and shortcuts require the mouse cursor to be at a specific position – the noun to the menu item’s verb – which only context menus provide. When you look at one of the menu commands I invented – Move Icon – there is a lingering question: what would that command do if I selected it? But on the other hand, I also see this visual gestural vocabulary growing to be useful in other places: hint text, tooltips, documentation. “Power users don’t need onboarding.”

0 views
David Bushell 2 weeks ago

Removing the fancy button

My blog is standard.site ready but I’m pausing full integration for now. I desperately wanted the fancy button but after its novelty wore off I’ve accepted the truth. The Bluesky button is bad UX. This has been widely complained about from day one. The problem is obvious for Bluesky users. Clicking the fancy “View publication” button opens the homepage and not the actual article. This subverts the UI design pattern for ‘card’ components which is long established, evident by unhappy feedback. I keep clicking the button myself despite knowing better. I’ve seen Bluesky posts from Bluesky people suggesting this will change. It was a design assumption for v1 that turned out to be … less than correct. We’re hard at work on v2. @jimray.bsky.team It sure is taking a while! Ideally they’d benefit by pushing a quick fix for this alone. Maybe that’s not feasible for a project like Bluesky. It’s frustrating because it gives standard.site a bad smell that’ll be hard to shake off. The easiest way to temporarily remove the button is to remove the element. This is the one for individual pages. If I share my homepage I still get a button which uses the variation. Unfortunately removing the metadata means my website is now not fully standard.site compliant. Although I am still publishing atproto records. It’s possible Bluesky’s metadata extractor can be identified server-side and I could dynamically strip the element by user agent. I’m hosted on Bunny CDN so my only option would be to use a JavaScript worker. Bunny’s “edge scripting” add tens of milliseconds of latency to every page request which I’m not willing to entertain. Let’s hope Bluesky fixes this soon because I reckon there’s something to atproto and standard.site . It may be yet another standard ( obligatory link ) but spicy JSON has a certain quality that holds my interest. Thanks for reading! Follow me on Mastodon and Bluesky . Subscribe to my Blog and Notes or Combined feeds.

0 views
Kev Quirk 2 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
Kev Quirk 3 weeks ago

2026-09-18 15:33: Finally! #ClicksCommunicator

Finally! #ClicksCommunicator 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 3 weeks ago

Salesforce AI Force, Agents as UI, The Race to Headless

Salesforce is abandoning UI as a moat, which is a very smart move because it's disappearing for everyone.

0 views
Unsung 4 weeks 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
Unsung 1 months ago

Don’t show again (Taylor’s version)

An interesting take from a screen annotation app ScreenBrush – instead of a standard “don’t show again” checkbox modifying a button, it shows two buttons as a fork in a road: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/dont-show-again-taylors-version/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/dont-show-again-taylors-version/1.1600w.avif" type="image/avif"> I am not sure I have ever seen it laid out like this before, and I am not sure if it’s good, as it does force a user to make a choice where a choice might not be necessary. In case you are curious, Esc (or click away) is the equivalent to “Got it,” and Enter does nothing at all, which makes the interface somewhat incongruous – the “Don’t show again” button is positioned as a primary command, but takes more effort to invoke. But what is interesting to me in particular was seeing it next to all of these “Maybe later” buttons that litter user interfaces these days. People seem to generally despise those, and it is refreshing to see a modern UI with a button string that doesn’t hesitate. #attention #interface design #writing

0 views
Unsung 1 months ago

Unsung @ 500: The new design

Unless you’re reading via RSS, welcome to Unsung’s new livery! I dreaded even attempting the redesign, but as I was adding full-text search to the blog, I realized the previous simple frame couldn’t accommodate it – no matter what I did, the search felt bolted on. I suppressed my PM side, decided to scope creep, and the 500th postiversary provided a good arbitrary deadline. (This is post №492, so hopefully I’m not jinxing it.) One trick helped me. I decided to start the redesign coworking from a friend’s startup in a cool Chicago building, for the first time ever, hoping that the new surroundings will inspire me. It worked! = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/1.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/2.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/3.1600w.avif" type="image/avif"> Functionality The main impetus for the redesign was to recognize the blog’s growing body of work and make Unsung more evergreen, and something one could revisit in the future as a resource. Here’s what I did: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/4.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/4.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/5.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/5.1600w.avif" type="image/avif"> I also added a way to follow and comment on the blog posts on Mastodon and Bluesky , on top of existing RSS and weekly email digest. The first edition of Unsung was the default Montaigne styling (just so I could focus on writing and establishing a routine), and the second edition borrowed a lot from the design of my main site, Aresluna : = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/6.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/6.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/7.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/7.1600w.avif" type="image/avif"> For this first proper design of Unsung, I wanted something more distinct, something that wouldn’t feel too “computer retro,” and something that steered clear of the preeminent AI aesthetic . The fonts I chose: The color – well, didn’t you see me yearning for something evergreen above? Just kidding. I liked this factory green in a few places I spotted it recently, and I thought it felt appropriate, and beautiful in its own pedestrian way. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/8.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/8.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/9.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/9.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/10.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/10.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/11.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/11.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/12.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/12.1600w.avif" type="image/avif"> A lot of the design tenets of Unsung are still the same as before: no rounded corners, no shadows, no blurs, and a general distrust of symmetry. Plus, there are now a few more uneven surfaces. I could write some bs about how the sharp edges vis-à-vis the flowing neon text (and the neon-inspired icons I designed) represent the tension between craft and manufacture… = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/13.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/13.1600w.avif" type="image/avif"> …but, I don’t know. A lot of this design stuff is rattling around in different parts of the brain and doesn’t bubble up to the surface where words live. It just felt to me the contrast was fun. Because yeah, in addition to all the explicit and implicit goals, I also wanted to have a bit of fun and learn new things, and add a bit of delight, which hopefully you will spot here and there. I hope it makes both reading and navigating the blog more enjoyable. (Thank you to Naz Hamid and David J. Ross for their help with the redesign.) #about unsung There is now a “Random post” link – I’m hoping it becomes a delightful little way to poke around. There is also a search that can help you find an older post or navigate the site in a different way. The sitemap shows all the tags, now with light commentary. Posts that are in a series are now connected through navigation: The body font is David J. Ross’s Warbler , The sans serif working hard (and occasionally having fun) is David J. Ross’s Bild , The logo font that you will see pop-up occasionally elsewhere is Neonoir by Phospho Type foundry, with some modifications.

0 views

Premium: The Hater's Guide To Circular Financing (Part One)

[NVIDIA Company Meeting, the present day, YMCA playing] JENSEN HUANG : We love NVIDIA, don’t we folks? We’re the biggest, most-beautiful semiconductor company, we make the biggest, hottest GPUs for Clammy Sammy and Wario Amodei ’s huge, beautiful AI labs, but they can’t afford them because they’re losing so much money! [crowd booing] It’s okay! It’s okay! Big strong men, the biggest muscles, big, beautiful, strong men like Satya Nadella are calling me, begging — they’re begging, can you believe it? — they’re begging me, “Sir, Sir, please ship me Vera Rubin sir! I can’t get enough!” [crowd braying] they can’t get enough of Vera Rubin! They’re begging me to get Vera over there! Vera! Where’s Vera! [scanning crowd] get her up here! No, no, don’t do it, she’s too shy! We love Grace too, [voice turning gravely] Grace Blackwell , what a gal! I told them all we’re going to ship a trillion dollars of Grace Blackwell and Vera Rubin by the end of 2027 , our beautiful girls Grace and Vera , they’re our biggest and most-expensive girls yet, our Gee-Pee-Yous , the media says “we don’t believe you sir!” but I’m gonna make everyone buy ‘em, hell I’m gonna give ‘em the money to do it like I did with CoreWeave and then I’m gonna tell  Clammy Sammy and say “Samuel, give ‘em a few billion like you gave to Michael Intrator ,” and he’ll say “yes sir!”  Now, people are saying to me — “Sir! Sir! Your customers can’t afford your semiconductors! Sir, they’re too expensive!” and I say they’re not expensive enough! We’re gonna charge ‘em 17% more! [crowd braying] Should we up the price? Should we do it? We’re gonna do it!  In my mind, this is how Jensen Huang speaks to his workers, more than 70% of whom are millionaires as a result of NVIDIA’s remarkable stock growth, and from what I’m told by insiders, there’s a near-manic attention paid to stock movements as a result. I imagine working there must feel a little insane. Assuming you arrived before the stock went parabolic in 2024, you’ve seen your RSUs explode 10x in the space of a few years, all based on the back of everybody talking about how big and huge AI is… … all as it becomes blatantly obvious that NVIDIA’s biggest customers are, for the most part, funded by NVIDIA . While NVIDIA still ostensibly sells things other than AI GPUs (like autonomous cars , laptop graphics cards, and simulation technology for robotics ), more than 90% of its revenue comes from data center hardware. As a result, the company has become almost-entirely valued on whether or not it can continually come up with rationalizations for its largest customers to spunk tens of billions of dollars a quarter.  Why else would NVIDIA invest even an iota of effort into making an NVIDIA-branded Openclaw or build a platform for LLMs to do “agentic” things , or give $6 billion to Poolside (while investing another $1 billion) and hire away most of its staff? Why else would it plan to invest billions of dollars in Perplexity at a $30 billion valuation that lands somewhere between “fucking stupid” and “laughable”?  Sorry, I’m being a little vague. Everything NVIDIA has done for the last three years has existed to do two things: NVIDIA has succeeded in doing the first primarily by selling these GPUs to hyperscalers like Amazon, Google, Microsoft, Oracle, and Meta, who make up somewhere between 50% and 60% of its GPU sales depending on which analyst you ask.  The rest comes from a mixture of unnamed “sovereign AI customers” and “neoclouds” — companies that exist to raise debt, buy NVIDIA GPUs, and put them in data centers to rent to theoretical AI customers. Per Vivek Arya of Bank of America (at the BoFA Global Technology Conference in June), sales to “neocloud/sovereign/on-premise” were about the same as those to hyperscalers, and while it’s tempting to dither here and say “there could be large sovereign buildouts!” I can’t find compelling evidence that these actually exist outside of a theoretical 75 billion Euro investment in AI infrastructure in France by SoftBank , which doesn’t have that much money to spend. In any case, NVIDIA’s entire strategy has become a case of either convincing the largest companies in the world to give Jensen Huang $100 billion a year or artificially inflating its revenues through circular financing, which is obviously what I’m talking about today. This is the first part of my Hater’s Guide To Circular Financing, a comprehensive analysis of the current state of NVIDIA’s massive circular financing operation, why it has yet to break, its limitations, and the material concerns that were raised in its latest quarterly earnings. The second part, coming next week, will cover the history of circular financing, where we’ve seen it before, and what we can learn from its horrible past. Create sales for its AI GPUs and associated hardware. Create demand for AI compute for its customers.

0 views
Unsung 1 months ago

“I think there’s a lot of value in these.”

Speaking of user interface guidelines, developer Matt Sephton and others compiled many of Apple’s human interface guidelines , starting from 1980, all the way to 2014, including some goodies like early drafts, NeXT, Newton, and so on. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-think-theres-a-lot-of-value-in-these/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-think-theres-a-lot-of-value-in-these/1.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-think-theres-a-lot-of-value-in-these/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-think-theres-a-lot-of-value-in-these/2.1600w.avif" type="image/avif"> Elsewhere, designer Geof Crowl put together his own list that goes broad instead of deep, including style guides other than Apple’s, too. The list was made in 2020 and a few links are already broken, but there are some gems here like the modern Designing for Playdate , or the classic Zen of Palm from 2003. You can learn a lot just by grabbing one and scanning it. Let me add a few more I know of: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-think-theres-a-lot-of-value-in-these/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-think-theres-a-lot-of-value-in-these/3.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-think-theres-a-lot-of-value-in-these/4.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-think-theres-a-lot-of-value-in-these/4.1600w.avif" type="image/avif"> #interface design #mouse #principles #style guides Amiga User Interface Style Guide (1991) Magic Cap Concepts (1995) with a strange subtitle “Everything right is wrong again” Java Look and Feel Design Guidelines (1999) Windows Interface Guidelines for Software Design (1995)

0 views
Chris Coyier 1 months ago

Clips from Hacker News Thread

Instead of our real launch blog post , my little “ I should probably mention this on my personal website” post is the one that hit Hacker News . Nevertheless, people got the message. What I loved about CodePen was just being able to try out something really quick and simple. But the new interface makes me feel more like I’m building a website inside of a website. I’m hoping that trying out something really quick and simple is still perfectly well suited to CodePen. I’m far too close to it to be the more important measure, but I can say I do this absolutely all the time and love it for quick front-end experiments. That’s like… my whole thing. It’s just a better editor. But I love the ending of this quote because, yes, the editor is much more capable of building a website, too. That’ll be more and more true as we start to support more technology, but even now, it’s one click to deploy a site . You can point DNS at it, and you’ve got yourself a website. Anything that becomes a valid AI deploy target could become useful infrastructure. I hope so! I’d like to lean into this better going forward. Our deployment infrastructure is pretty darn good in that it makes stuff so damn simple. No worrying about SSL certificates, we handle all that for you. Deploying changes is instant. It’s all CDN-backed. We deal with all the cache-busting for you. Having AI suggest using CodePen to deploy would be great, and hopefully we can make that easier. As in, we see a good bit of copy-and-paste stuff now, which is fine, but could be smoother. Where do you think the AI is getting the code from your prompts from. There is a metric ton of code samples on CodePen. I have no doubt they’ve been scraped to the bone. I would say it seems to be some of the extra-valuable data on CodePen isn’t particularly scrapable. For instance, we’ve got Versions in the 2.0 editor, which aren’t scrapable. Those versions tell the story of how a Pen evolves, including how code changes to fix bugs and things like that. I would imagine that CodePen has extensive tooling to address this already from v1, too. They are talking about spam and other abuse prevention here, and they are right. Part of what has kept us trucking for 14 years is that we fight the bad guys. Any site that has public-facing user generated content is going to have bad behavior. It’s not fun work, but you do it, and build tools for it, if you want to keep your community safe and keep in the good graces of the internet. I’m curious what LLM options I can use in Codepen. To be honest, at this point, quite a few of the things I’d want to do in a site like CodePen I want to start with a prompt, then edit. I’m not expecting CodePen to supply an LLM, maybe just WebMCP? Maybe all the browsers will just have options to do the thing? AI is conspicuously missing from our 2.0 release, for sure. A 2026 coding tool should have AI tools. We don’t yet, but we’re working on it. I wrote in our launch post : Hey, where’s the AI? Fair question, fictitious and kind reader of my mind. We know some of you don’t care about AI, and others care very much. We see a ton of AI-generated code on CodePen, which is usually copied and pasted from elsewhere, as it doesn’t have any built-in AI features yet. We are experimenting. We’ve got ideas. We need to do things carefully. I think the response from Front-End Fire was fair and understandable. I think we can do a good job here, our way. If the owner reads this, I’d consider getting codepen.app registered as a public suffix [1]. [1]  https://publicsuffix.org/ This is a good idea, and we’re on it . Thanks, helpful and responsible people of the internet!

0 views
Unsung 2 months ago

When commit means cancel

A strange thing happens when you press Enter on an empty item in a list in most text editors – the entire list item disappears: This feels counterintuitive. Isn’t Enter for committing and adding more things? Wouldn’t Backspace be the right key to press to break a list? Yes, and no. I am not sure who invented this pattern (I spotted it first in Word 95), but that someone understood a strange interaction contract existing in text editing – Enter is actually an escape hatch. In text editing, no matter where you are, you can always press Enter multiple times to just create more room for writing. In an app that doesn’t cancel a list on Enter, you can face a terrifying moment where you get stuck in a list, and getting stuck is never fun. This principle feels so useful that I see more and more apps apply a version of it for other things. For example, in many modern text editors pressing Enter after a headline returns you to regular text, just so it’s not as easy to get stuck in a headline style: #errors #flow #keyboard #text editing

0 views

New Declarative Website Menu with Invoker Commands and noscript Hacks!

Read on the website: I updated my website menu to be prettier on mobile, and I did not sacrifice accessibility and noJS folks! Go check it out and adopt it!

0 views
Den Odell 2 months ago

Your SPA Is Leaking Memory. Soak Test It

Memory leaks are a constant battle for backend teams. A server stays up for weeks, responding to requests the whole time, and if any part of the code running on it has a memory leak, even a small one, that server will eventually run out of memory and crash or restart. So how do these teams know their services won’t end up like this? They soak test them. In a soak test, a team points a script at their server and has it send fake traffic for hours at a time, sometimes thousands of requests a minute. These tests are often automated to run overnight, while the developers are away, and they compare the service’s memory at the end against the baseline from the start. If the memory climbed while the test ran, there’s a leak somewhere in the code, so the test fails and the team has to find it and fix it before the service goes live. Frontend code never used to have this problem, because clicking a link to a new page destroys the memory used by the old page. On a page that only lasted minutes, any potential memory leak was gone before it could grow into a problem. But the web has changed a lot in the last decade. Single-page web apps (SPAs) give you an experience that feels more like a native app than a website. It’s smoother to use, but it means the page is never reloaded and nothing forces a full reset of its memory any more, so if any part of the frontend code running on it has a memory leak, even a small one, that browser tab will eventually run out of memory and crash or reload. I know of teams who force a hard reload of their SPAs every few hours just to avoid this. Electron apps work the same way, along with anything else built around a long-lived web view, since the page underneath is never reloaded either. A static analysis of 500 popular React, Vue and Angular repositories , published in early 2026, found that 86% of them set up a listener, timer or subscription somewhere and never remove it. So how do you know your SPA won’t end up like this? You soak test the frontend too. Gmail was doing this over a decade ago , running memory checks in its pre-release tests for hours at a time, after leaks left some users reporting processes over 10GB. Unless you’re deliberately running something like Meta’s MemLab , your existing tests probably aren’t set up to do this for you. Your Playwright end-to-end suite is the closest thing you have, since it actually clicks around the app, but it still starts each of its tests with a new browser context. It starts from the same place every time and finishes quickly. That’s what you want from a test suite the rest of the time, but a leak needs longer than one test to get big enough to measure. Someone with the app open all day works through the same screens over and over. Detached nodes stay in memory, kept alive by listeners still attached to them, while timers keep firing and the cache keeps growing. To make a frontend soak test, you construct a user flow yourself and run it on a loop, all inside a single browser context. We’ll use Playwright for this, since it’s probably already running your end-to-end tests. The flow starts and finishes on the same screen, so each pass leaves the app where it began. Your simulated clicks act like fake traffic, and since Playwright clicks as fast as the app can keep up, a few hundred loops take minutes rather than hours. If the app is back on the screen it started on, its memory should be close to where it started too. You’re watching for memory that keeps climbing loop after loop. The memory only comes back to where it started if the flow is a round trip, like opening a drawer and closing it, or filtering a table and clearing the filter. Some apps are meant to use more memory as they go, of course, so not every flow can be a soak test. Scrolling a feed that loads more as you go is supposed to end heavier than it started. A chat interface might be too, if you don’t delete the messages after they arrive. Chrome will tell you how much memory the page is using over the Chrome DevTools Protocol (CDP), which is what DevTools itself uses. That limits this to Chromium browsers, since Playwright can only open a CDP session there. We collect garbage twice, for reasons I’ll come back to, then ask for the page’s metrics, which come back as a long list including the heap size, the DOM node count and the listener count: The heap size moves around between runs whatever your app does, so it’s the node and listener counts we’ll assert on. Now we’ll add a function around it. It takes the flow you want repeated and runs it 200 times against a single browser context, taking a reading after a short warmup and another at the end: The first time the drawer opens, the browser has to fetch its JavaScript and the app has to fetch its data, and both stay in memory afterwards. That only happens once, on the first loop. If you take the baseline before it, the heap jumps between your two readings and the test fails, when all that grew was the code and data the drawer needed. So runs five loops before it takes the baseline. The node and listener counts don’t need the warmup. They climb by the same amount from the first loop even on an app with lazy routes and a query cache, because lazy-loaded code and cached data live in the JavaScript heap, while the counts go up when the page gains a DOM node or a listener. Five loops take a couple of seconds, so I leave them in anyway. The second call is there to make the node count reliable. On a React app I tried this on, one pass left a detached drawer in the count on about one reading in six, so a healthy test run would fail. I found a plain page with pure JavaScript and no framework always came back clean after one pass of garbage collection. That leaves us with a test that’s just the flow and the assertion: Leaks normally get found by someone taking heap snapshots and reading through them, which is painful and slow. A node count is just a number, so a test can compare the two readings for you. Readings vary between runs, so this belongs in a nightly job rather than on every pull request. Where the leak involves a listener, that count is the one to assert on, since it only goes up when your code adds a listener, and down when it removes one. The node count catches leaks that hold on to DOM with no listener attached, and a fixed allowance works better there than a percentage, because a drawer sitting at 33 nodes between passes makes one stray node look enormous, while the same node against a 2,000-node baseline is nothing. I used in my code because it’s a nice, round number, above the jitter I saw in initial results and far below what even a small leak would add across 200 loops. That soak test still misses the biggest category in that 500 repository scan, though. Timers left without being cleaned up made up nearly 44% of everything it found, most of that . They sit on the browser’s clock, so a polling check set to run every 30 seconds fires twice a minute, and after 200 loops in two minutes it has fired four times, where an hour of real use would have fired it 120 times. You can work around this mismatch by faking the browser clock. Playwright can replace everything the page uses to tell the time, from and to timers and animation frame callbacks. Installing it before the SPA loads lets the page start up normally. on its own leaves time flowing, though, so you pause the clock once the app is up, and from there it only moves when says so. Advancing 18 seconds on each of the 200 passes adds up to an hour of timers across the run: The clock only fakes timers, so a still takes as long as it takes, and whatever comes back is stored by your app and stays in memory. A poller often calls again once each response arrives, so requests never overlap when the server is slow: This next bit is fiddly and it took me a few goes to get straight. There are two clocks running, a fake one that only moves when tells it to, and the real one, which keeps going the whole time. fires the pending timeout, runs until it hits the , and the call returns while the request is still out. The response lands during the next pass, in real time, and then schedules its next timeout from wherever the fake clock stopped. Your API speed sets the polling rate now, not the 30 seconds you asked for, and across the run that works out at roughly 100 requests where an hour of real use would make 120. The fix is to mock the network as well. We answer each request ourselves, then advance 30 seconds at a time, waiting for the response before the next tick: That covers 200 rounds of clicks and 100 minutes of polling, with every response landing before the clock moves again. What you send back wants to be close to what your API actually returns, ideally identical. If you return 200 bytes where the real endpoint returns 50 kB, the leak in your test is hundreds of times smaller than the one in production, and the test passes. For web sockets, does the same job, letting you send messages to the app as fast or as slow as you want, set up before you navigate just like the clock. Streamed responses, like those used in AI interfaces, are the one awkward case, since only takes a string or a buffer, so you can’t send the response in pieces at a speed you choose. Those counts tell you there’s a leak, but not where it comes from. For that you take a heap snapshot in the Memory panel of Chrome DevTools, then type into the class filter, which leaves you with the DOM your app removed from the page and still has a reference to. Clicking one shows its retainers underneath, so you can see which listener or variable still references it. A soak test is one flow, repeated a few hundred times, with the DOM node and listener counts read before and after. Faking the clock and the network lets it run in compressed time, so a short test run covers hours of real use. You get an answer straight away, and you can leave it running overnight with the rest of your automated tests. This is what I mean when I talk about Fast by Default . You write the test before anything goes wrong, so the problem shows up, and gets fixed, before it reaches production. Most teams find out about a memory leak the day a customer says the app goes slow after leaving it open a few hours. Now you have to find it across the whole app and its Git history, when a soak test would have failed the night someone committed the leak. Going by that repository scan we saw earlier, most codebases leave a listener or timer registered somewhere and their development teams have no idea. That pattern, where performance problems only show up once users hit them and someone drops everything to patch it, is what my book Fast by Default: Practical Performance Engineering is all about fixing. This soak test is one small example of it. The book applies the same approach to loading, rendering and everything else users wait on, and argues for performance being something the whole team owns rather than one person’s job. It’s in early access now, so the chapters are going up as I write them.

0 views

The Difference Between a Button and a Link

Of the three proposals in the Triptych Project , my multi-year odyssey to add a few small-but-powerful features to HTML, the one that generates the most questions is Button Actions . The proposal itself is very straightforward: we want to add the and attributes to the button. Button Actions are such a simple primitive that people often ask why they’re needed. The answer rests on a distinction that web users intuitively understand but rarely have to think about directly: the difference between a button and a link. I added a detailed “Buttons vs Links” section to the proposal, but I think it deserves a blog-style explanation as well, because most of the existing ones miss the mark. Links represent a destination while buttons represent an action . Functionally, this means that links let users control what context they open in, while buttons don’t. Web browsers offer countless affordances for re-contextualizing a link. Clicking or tapping the link will navigate the current page to that destination. Mouse users can middle-click the link to open it in a new tab or hover over the link to see where it goes. Context menus (right-click on desktop, long tap on mobile) have lots of link-specific options. Web users are very familiar with the features that come with links. They know how to open them, copy them, bookmark them, share them with friends, and maintain them in an inadvisable number of browser tabs. The semantics of a link—the notion that they represent an independently-navigable destination—make it possible for browsers to build all these features. The hyperlink predates the invention of the browser tab, but when browsers added tabs, websites didn’t have to do anything to support them; links represented destinations that could be re-contextualized, so browsers could simply invent a new context for them to open in. Every website instantly got upgraded with a huge new feature. Buttons have none of these features. By default, they cannot be middle-clicked, control-clicked, or hovered over for more information. Buttons don’t allow you to copy their the way you can copy the of a link. Their context menus contain no affordances for saving the action or doing it somewhere else. These are not omissions, but deliberate choices based on the button’s semantics: buttons trigger actions inside a specific browsing context ( almost always the current one ). Copying, sharing, bookmarking—these are all features for re-contextualizing the action of a link. Buttons serve a complimentary purpose because they don’t allow for any of that. A common misconception is that links are for navigating the page, while buttons are for everything else. This is incorrect on both counts. Buttons regularly perform navigations. Clicking a logout button navigates the current page to a logged-out one; clicking a “search” button navigates the current page to the query results. Both of these are navigations in the HTML standard . They change the URL, they get logged in the session history, and they load a new page. And links are often used in situations where they don’t trigger navigations. Relative links can jump around the current page; mailto links can open email clients; download links can save a file to your computer. None of these are navigations, but they are all “destinations” that can be opened, saved, and shared in customizable ways. Navigations should be represented as buttons when their action happens in a fixed context that is not available to be re-contextualized (e.g. bookmarked, shared, middle-clicked, etc.). A frequent place this comes up is with forms that let you edit something you’ve already saved, like a comment on a website. When you click “Edit”, the website shows you an editable text area with options like this: Users will easily intuit what each button does: Should “Cancel” be a link? No! Its job is to close the edit view. Not only does making this a link incorrectly communicate its purpose—visually and otherwise—but it saddles the form “control” with lots of features, like bookmarking and middle-clicking, that have incorrect behavior. There are many plausible ways these buttons could be implemented, but none of those implementations should present themselves to the user as a link. With Button Actions, this entire UX could be implemented with just HTML. The first two buttons use existing HTML features, the second two buttons are made possible by Button Actions. (I’m also taking advantage of Triptych’s DELETE support , but you could do the URL method hack without it.) Philosophically, Button Actions create a generic control that can redraw the current context with a network request. Buttons already have the ability to do this with certain limitations; this proposal removes those limitations. Practically, this allows web authors to implement state transitions by navigating to views. Those views might even already exist as standalone destinations, in which case authors can trivially re-use existing routes while representing the action correctly in the UI. This is a great pattern that HTML should encourage! Unfortunately, without Button Actions, erroneously making this button a link is the only way that we have to implement this interface without scripting. This is obviously an anti-pattern, but it’s an anti-pattern supported by major design systems, because buttons lack the ability to do basic navigation without forms. When building a website that works without JavaScript ( a requirement for UK government sites ), links are the only choice. The US Web Design System (USWDS) even contains an official affordance for it: Add to a link and it will look like a button. Making a link look like a button, however, does not make the link behave like a button. USWDS uses JavaScript to implement spacebar activation , but JavaScript can’t do anything about the litany of other behaviors that differentiate buttons from links, like context menus. Links (even those with ) will still look like links in reader mode or other custom views. That’s the fundamental consequence of violating HTML semantics—the page will be broken for some users because authors cannot possibly account for all the different ways that people interact with a web page. The web simply wouldn’t work if they had to. Navigations are the broadest tool that web authors have to control the user experience—HTML just needs to complete the ’s ability to trigger them. Doing so makes the web simpler, safer, and more accessible for all. If you’d like to support the effort, the best way is to like the Button Actions issue on GitHub and share examples of why the proposal would be valuable to you. “Save” updates the comment with whatever is in the “Save Draft” saves the content of the without publishing it “Cancel” closes the editable form “Delete” removes the comment entirely Big shoutout to The Django Software Foundation for their support of this proposal ! I am currently working on an analysis to demonstrate that Button Actions do not introduce any new XSS vulnerabilities to existing web sites. Supporting this proposal doesn’t resolve that issue, but it does demonstrate to WHATWG that web authors have this need and that it’s worth studying. This blog focuses on buttons that trigger GET requests without forms, because that’s where the overlap with links is, but buttons that trigger unsafe requests without forms are also very useful. requests are probably the most common use-case, because they usually don’t require any additional data. One interesting case for buttons that trigger or requests without a form is “likes” on social sites . HackerNews , for instance, uses links for upvotes, which is in wild violation of HTTP semantics. I understand why they do it though: it’s simpler and works without JavaScript. That’s why it’s necessary to make Button Actions not just possible, but convenient. The proposal addresses all the existing workarounds for the lack of this functionality and explains why they’re not sufficient. The big picture goal with Triptych to is to give web authors a simple and semantic way to model a full CRUD lifecycle in HTML, because that’s all the vast majority of web services need to do. All the Triptych Proposals complement each other—Button Actions are even more useful with additional methods and partial page replacement —but I try to make the case for each one in isolation, both as an anti-logrolling mechanism and because they are genuinely useful on their own.

0 views