Unsung 2 days ago

“If HEIC has no haters I’m dead.”

Over on Bluesky, Melanie Walsh asks : Favorite and least favorite file formats? I’ll start. Favorite: TXT Least favorite: HEIC The answers – both replies and quote posts – are really interesting because most of the time they’re not about inherent capabilities of each format, but: Of course, Walsh put a finger on the scale with her initial example, but HEIC stands out as a favorite least favorite. I understand this is mostly out of its limited support, raising a question whether Apple spent the right amount of time socializing and incentivizing its adoption – even on a Mac, you can’t escape blank stares the moment you drag it into many websites/web apps: HEIC on the other hand, Apple’s way of making photos smaller and everything else more complicated than it needs to be. By the way HEIC is when you drag a picture from your Notes app into your email, and then it laughs in your face and is like sorry, girl, I’m HEIC!! I don’t do things like that!! I didn’t know I had a least favorite file format but yeah HEIC can fuck right off Sweet fucking hell fuck heic into the sun Reading the replies here makes me feel like I live in an oddly privileged bubble in an inverse of the usual meaning of privilege for being a poor Android-using mfer who has never seen a HEIC in their life and had to actually look that sh*t up. Least favorite is a toss up between HEIC (WHICH NOBODY ASKED FOR, APPLE) and WEBP Controversial but I hope everyone involved with HEIC only tastes soap instead of cilantro forever I agree with this person that WebP is much better supported than it used to, but it sometimes takes one link in the chain – cough Google Docs cough – for you to avoid a format forever. And, those are always lagging indicators. If a format didn’t work once in an important flow, it might take many years before you come back: all the people saying “webp” in the quotes might as well be fighting WW2 still. look for another grievance. please Some other fun answers: IF IT’S CALLED [C]OMMA [S]EPARATED [V]ALUES WHY DO I HAVE TO OPEN A WINDOW AND CHANGE THE DEFAULT DELIMITER OPTION FROM TAB TO COMMA ??!?!?! Favorite: MP3 (invented piracy, patents all expired, doesn’t need an FPU) Least favorite: DICOM (nightmarish metadata, too many possible image encodings, when it wants a 3D volume the solution is just “a bunch of files in a folder”, also IT IS A NETWORK PROTOCOL >:( ) Least fave: .R01, .R02, etc... – nothing needs to be split into multiple rar files! Please stop! The world has moved beyond this. Least favorite: can I count those awful pointer doc types Google uses, like .gdoc and .gsheet favorite: transparent PNG least favorite: transparent PNG that is not really transparent but just a fuckin checkered background I forgot about this meme: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/if-heic-has-no-haters-im-dead/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/if-heic-has-no-haters-im-dead/1.1600w.avif" type="image/avif"> For least fav I voted for GIF, having not only spent countless hours trying to make good-looking animated gifs that do not weigh tens of megabytes, look horrible, and cause performance issues… but also having worked on two different products (Medium and Figma) that had to swallow gifs made by others, and seeing engineers lose their minds peeking into their insides and how messy they were . To be fair, GIF comes from the late 1980s, and simply outlived its purpose. It’s a fascinating format that literally deserves a book written about it: the messy patent wars, the pronunciation, the technical format and many surprises hiding inside , even the word “gifs” transcending the format itself to mean “short animated memes.” To go back to the thread, a small pattern that I also encountered from time to time: Least favorite: .md, specifically when it’s used for Sega Genesis game roms. There’s already a type of text file type called .md, so Windows tries to open them in notepad. Just call it .gen instead, nerd. Favorite: TS, the one that opens in my IDE Least Favorite: TS, the one that opens in Quicktime Lastly, because of course someone had to do it: Favorite: Gaylord Archival® Reinforced Acid Free Manilla Least favorite: Office Depot Vertical Hanging Folders #encoding #graphics #software evolution how well supported it is in the general ecosystem? how painful it was last time I used it? who’s using it and for what? if there is one app I use it with, do I like this app? (interesting in the context of PDFs which some people love, and others hate)

Mobile TypeScript Frontend Web

▲ 0

0 views

Unsung 3 days ago

Flickr’s optimistic committing

Somewhere next to optimistic loading and optimistic saving exists another technique to make apps feel faster: optimistic committing. Flickr is a great example. After navigating to photo upload, you enter a sort of a foyer where you can drag in the photos, reorder them, name and tag them, and otherwise prepare them before pressing the big Upload button. But Flickr also optimistically assumes you will press that button, and slowly starts uploading the heavy photos in the background the moment you drag them in. Like all optimistic schemes, being friendlier toward the user complicates things for Flickr’s designers and engineers. After all, there is still a regular upload modal after you do commit to the upload… = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/flickrs-optimistic-committing/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/flickrs-optimistic-committing/2.1600w.avif" type="image/avif"> …so the two states – quiet staging area upload, and the official visible upload – have to be reconciled and kept in sync. Also, optimistic but eventually cancelled uploads have to be cleaned up from the servers. Lastly, there’s signposting. Contrary to lighter optimistic loading schemes, which typically simplify reality by pretending no data transfer is actually happening, the optimistic committing here is actually visible through small indicators: I think this transparency is welcome. In the past, Meta (who else!) got into hot water for abusing optimistic committing : Did you ever record a video on Facebook to post directly to your friend’s wall, only to discard the take and film a new version? You may have thought those embarrassing draft versions were deleted, but Facebook kept a copy. The company is blaming it on a “bug” and swears that it’s going to delete those discarded videos now. They pinkie promise this time. In this context, it’s good that Flickr conveys data is being sent to the servers; I believe this helps with building trust. On top of transparency, I think it’s also good that this process shows the progress of uploading with a lot of precision – not just between files, but also within each file. Internet connection speeds vary so much, not just geographically, but also even situationally, that this is really helpful in practice. There are many moments where auto saving to the cloud needn’t bother the user unless the connection goes offline for a longer while, but this feels like a situation where clarity is better than magic. #details #loading states

Frontend Performance Web Development

▲ 0

0 views

Allen Pike 6 days ago

The Persistent Gravity of Cross Platform

This week’s discussion of the ChatGPT app and its move to Electron merits a link to my evergreen article The Persistent Gravity of Cross Platform : At the highest level, cross-platform UI technologies prioritize coordinated featurefulness over polished simplicity. I’ve added a coda to that article about how coding agents actually strengthen the argument for Electron on large teams, at least for now. The initial release of the new ChatGPT app has been clumsy – there’s a lot of work to do to get Electron ChatGPT (née Codex) as polished as it should be. But, like it or not, cross-platform code is the least-bad way to coordinate a massive team on a rapidly changing product.

Frontend Programming

▲ 0

0 views

Josh Comeau 1 weeks ago

Getting Started with Anchor Positioning

For decades, one of the most notoriously-challenging problems on the web has been sticking one element to another element, for things like tooltips and nested menus. The CSSWG has decided to provide a first-class solution to this problem, and it’s pretty friggin’ cool! In this tutorial, I’ll share the most useful parts I’ve found from this modern CSS feature.

Tutorial CSS Frontend

▲ 0

0 views

Unsung 1 weeks ago

About Unsung: Recent improvements

(This is one of the meta posts about this very blog . If that’s not interesting to you, skip to the next one!) Here are some improvements I’ve made to Unsung in recent months. Always curious of your feedback or pointers to places that do these things better! Weekly emails. I made it so clicking on every (non-YouTube) video or image takes you to the equivalent of the weekly email you’re looking at, but on the web, where you can watch the videos in their natural habitat. It’s scrolled to the right position, so you can just continue reading there. I’m sorry, I know it isn’t great to shove people outside of their mailbox, but I don’t think there is any way for videos to work well inside emails, and a lot of Unsung is about precise videos. (The only thing allowed is GIFs, and they are really not up to the task.) Video playback. On that note, I improved the handling and controls of video playback. On mobile, you can tap to play/​pause and swipe left and right to move. On desktop, you can drag the handle, or also swipe left/​right. You can also use ← → keys to advance frame by frame. My goals are to have video controls that are both minimalistic (for example, never covering the contents) and precise, to match how videos are used here. (But if you tab to the video, it still shows “classic” controls for accessibility.) Blink comparators. You might have noticed that I added some blink comparators in a few posts where they seemed to be useful ( one , two , three , four ). Is that fun? Does it work for you? Because I have more ideas for light interactivity on Unsung. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/about-unsung-recent-improvements/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/about-unsung-recent-improvements/2.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/about-unsung-recent-improvements/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/about-unsung-recent-improvements/3.1600w.avif" type="image/avif"> Technical details. Some people asked technical details about specific things on this blog, so I added a technical details page with answers. Dashboard. If you are interested in that kind of stuff, I added some more charts and stats to Unsung’s internal dashboard (and deprecated sentiment, which wasn’t really working). #about unsung

Programming Frontend Web Development

▲ 0

0 views

The Jolly Teapot 1 weeks ago

A peculiar bug in Safari

On weekend mornings, I have the inescapable habit of looking at my website and seeing what I can change, what I can remove, what I can improve in terms of HTML, CSS, layout, links, etc. This Saturday, as I wanted to look closer at the way the period at the end of a sentence rendered when appearing just after a word in italic (I know), I noticed something curious. When I zoomed in the page, using “Command – Plus Sign” (⌘+), I could see that the line length was changing with the size of the text. The bigger the text, the longer the line. You see, I’m very protective of the I use on this site —  — especially for Mac users, who see it in the Charter font. *1 This value sets an ideal number of characters for each line making it, when paired with the right line height, easier to read (supposedly). Zooming in on text shouldn’t change the line length, so I looked around and realised that I was a bit clueless when it comes to identifying bugs, and even checking if they were already reported. I found a few bug reports related to zooming in, but none of them described my issue. Not only that, but I didn’t really know if this was a Webkit problem, or a Safari problem. So instead of working my way to either confirming an existing bug or filing a new one , I did what I usually do when facing a problem: I avoided it altogether rather than trying to solve it. Therefore I changed to in my CSS, resulting in a similar line length for Charter. *2 With as the unit, zooming doesn’t modify the line length, so I’m pretty happy with this easy fix. Bonus point: takes up the same number of bytes as in my default CSS, still capped at 132 bytes. Imagine the extra-byte horror if I had to use something like or ? It would have ruined my sunny Saturday morning. This little website update made me realise something: my site design is pretty much done, and I hadn’t changed anything for a few weeks or even months. I actually miss the satisfaction of changing something at the end of my little routine. Checking every detail on every page, revisiting every line of code just to see what can be improved, even if it’s just removing extra quotation marks in an attribute or an optional closing tag, is not as fun when there is nothing to do at the end. I really like my site’s current design, and even if there might be a few tiny tweaks like this one in the future, I feel that the overall look and feel is pretty much final. It’s a weird feeling, but now I have no excuse for not writing more, and publishing more posts, even if they are unfinished , or shorter than usual . For others, falling back to the default serif, usually Times New Roman, is indeed a bit narrow; or would be better, but it’s too wide for Charter.  ^ For the serif/Times New Roman fallback, creates a slightly longer line, which is atually better than what it was with .  ^ For others, falling back to the default serif, usually Times New Roman, is indeed a bit narrow; or would be better, but it’s too wide for Charter.  ^ For the serif/Times New Roman fallback, creates a slightly longer line, which is atually better than what it was with .  ^

HTML CSS Web Development Frontend

▲ 0

0 views

Unsung 2 weeks ago

Finder’s elite eliding

I know I’m usually driving the Finder pretty hard , but I think that’s a necessity, given its position as the center of macOS for power users, and its situation where it feels like Apple pretty much gave up on it. But I also want to show things that Finder does well, and this might be something no one does nearly as thoughtfully: text truncation. This is what happens when you have a filename that’s too long: This is really nicely done, for many reasons that work in lockstep: Why does this last thing matter? Because unnecessary tooltips are distracting, cover information, and also – maybe most importantly – turn the interface into a minefield where no safe places remain to just mindlessly rest your cursor without worry. This last thing is very fuzzy, but so important. You know how unpleasant a lot of articles are on the web these days, solely because you’re always on the edge about what’s going to happen while you read? Am I going to be moved up and down? When and where is the ad going to appear? When will I encounter a new subscription pop-up, and what will be the weird way to close it this time around? I know you don’t literally tense your muscles while reading those, but I feel like in some sense, in the back of your head, there is always this unpleasant worry that you’re dealing with an unstable interface . This is not a strong, but I feel a similar way about spurious tooltips; they make interfaces feel less stable. You rest your cursor, something jumps up at you, you get distracted and move your cursor instinctively to avoid it, and with any luck, you trigger yet another tooltip, and so on. I will write more about this in the future. If you asked my former coworkers, I bet a significant portion would say “this guy gets angry at tooltips, like, all the time.” I promise I will get angry at tooltips more here. But today? Today, kudos to the Finder. It shows us that if you care, you can make this small moment feel really great and thoughtful – knowing that small moments multiplied in the thousands are no longer small. #details #finder #interface design #mac os #typography Finder cleverly elides text from the middle, knowing that both the ending of the last words (or digits!) of the file name, and its extension are important. Finder shows the full name in a tooltip. I’m surprised how many tools forget to do that, offering no easy explanation for the missing letters. Here are some examples from Notion and Bear, neither of which offers help on hover: Finder position the tooltip exactly atop the existing text. I think this is really clever: it avoids overlapping other useful information, and makes it faster to reorient yourself. Compare with, for example, AirTable: Lastly, Finder only shows the tooltip when it’s needed . This is something where so many places lose their way. For example, here’s Paper and Google Drive, throwing up a tooltip indiscriminately, even if it has absolutely nothing to add to the conversation:

Design Frontend

▲ 0

0 views

David Bushell 2 weeks ago

The modern app

Today I’m introducing the next generation of code editor. A modern app to satiate the needs of the discerning coder. We’re talkin’ blazing fast collaboration between man and machine . Try out the demo below (for best experience: desktop Chrome, obvs). If you’re reading this in RSS I have no clue what you’re about to see… maybe visit the demo it’s a fun one! Update ready (restart required) A modern app requires JavaScript, bro. Error loading documentation. Please disable your adblocker and try again. We and our 9172 partners value your personal data. You must accept the terms and conditions. Application error: a client-side exception has occurred (see the browser console for more information). Last edit: DELETED USER – 1 January 1970 – is this working? abandonment abbreviation aerodynamically antidisestablishmentarianism [Advertisement: 1% off subscription] an icon bar full of indecipherable icons with no label > Activate Windows Go to Settings to activate Windows. Fix the bug and make no mistake The user has asked me to fix his shitty code and to “make no mistake”… is he stupid? Thinking harder… On second review his code is garbage slop, should I search the internet and plagiarise ZA̡͊͠͝LGΌ ISͮ̂ TO͇̹̺ͅƝ̴ȳ̳ TH̘Ë͖́̉ ͠P̯͍̭O̚​N̐Y̡ H̸̡̪̯ͨ͊̽̅̾̎Ȩ̬̩̾͛ͪ̈́̀́͘ ̶̧̨̱̹̭̯ͧ̾ͬC̷̙̲̝͖ͭ̏ͥͮ͟Oͮ͏̮̪̝͍M̲̖͊̒ͪͩͬ̚̚͜Ȇ̴̟̟͙̞ͩ͌͝S̨̥̫͎̭ͯ̿̔̀ͅ Would you like to play a game? Thinking… Family photos were deleted to resolve low disk space error. iOS 26.6.9 is available, update now? Amazon driver is lost in your neighbourhood. Alice’s personal access token expired, switching to Bob’s. Tailwind language server crashed. SAMSUNG SMART REFRIDGERATOR ® has detected low milk levels: five gallons ordered. 418 I’m a teapot. close AI, AI, AI! We’ve heard you. There are now 26 new sparkle buttons! Can you find them all? Release notes dialog now has an embedded WSL 1.0 terminal emulator. It’s broken (issue: #25293). Reduced RAM usage when typing on the home row. Keystrokes are now logged in the correct Slack channel (fixes #7 and #933 through #980). root@localhost system32 C:\ $ _ Yeah so um… have you noticed that all modern software is teetering on the enshitty cliff? Everything in my dock is an Electron-ified enshittybomb one update from disaster. There used to be alternatives. Now those suck too. I don’t want to collaborate. How about you leave me alone and I’ll email you the file when I’m finished? Here, take a hard copy and jog on. You want to comment? I don’t remember asking for an opinion. Oh fantastic, now the computer thinks it’s people! I’ve got dialogs and popovers all up in my face yammering about agentic bollocks. Mystery icons everywhere. Wait… did they move my cheese? Ahhhhh! It’s all your fault! I sure as heck didn’t ask for it. Remember when they made entire video games on a 32 KB floppy disk? Those were real developers. v1 Release Notes: done. Can you stop adding new “features”, please? You had one good idea. Finish it already? Now you’ve got ten thousand GitHub issues. Well done. I used to enjoy making things on a computer :( Icons used: Griddy Icons MIT License. “Clippy” © Microsoft (this is parody). Thanks for reading! Follow me on Mastodon and Bluesky . Subscribe to my Blog and Notes or Combined feeds. Today I’m introducing the next generation of code editor. A modern app to satiate the needs of the discerning coder. We’re talkin’ blazing fast collaboration between man and machine . Try out the demo below (for best experience: desktop Chrome, obvs). If you’re reading this in RSS I have no clue what you’re about to see… maybe visit the demo it’s a fun one! The Modern Editor Update ready (restart required) A modern app requires JavaScript, bro. Error loading documentation. Please disable your adblocker and try again. We and our 9172 partners value your personal data. You must accept the terms and conditions. Application error: a client-side exception has occurred (see the browser console for more information). Last edit: DELETED USER – 1 January 1970 – is this working? aardvark abandonment abbreviation aerodynamically antidisestablishmentarianism [Advertisement: 1% off subscription] Thinking… an icon bar full of indecipherable icons with no label > Activate Windows Go to Settings to activate Windows. Syntax errors: 3453 CI warnings: 6462 Merge conflicts: 1130 Tokens maxxed: 9512 Logged in as: ghp_nD7FQLmQlmaoRis27Lq2C69HWTFwsU420CvL Fix the bug and make no mistake The user has asked me to fix his shitty code and to “make no mistake”… is he stupid? Thinking… Thinking harder… On second review his code is garbage slop, should I search the internet and plagiarise ZA̡͊͠͝LGΌ ISͮ̂ TO͇̹̺ͅƝ̴ȳ̳ TH̘Ë͖́̉ ͠P̯͍̭O̚​N̐Y̡ H̸̡̪̯ͨ͊̽̅̾̎Ȩ̬̩̾͛ͪ̈́̀́͘ ̶̧̨̱̹̭̯ͧ̾ͬC̷̙̲̝͖ͭ̏ͥͮ͟Oͮ͏̮̪̝͍M̲̖͊̒ͪͩͬ̚̚͜Ȇ̴̟̟͙̞ͩ͌͝S̨̥̫͎̭ͯ̿̔̀ͅ Thinking… Would you like to play a game? Running NPM post-install scripts. Claude is not in the sudoers file. This incident will be reported. Windows will restart in 5 minutes. Production database was dropped. GitHub connection timed out. Incoming phone call from your mother. CI/CD deployment failed again. Family photos were deleted to resolve low disk space error. iOS 26.6.9 is available, update now? Amazon driver is lost in your neighbourhood. Alice’s personal access token expired, switching to Bob’s. Tailwind language server crashed. SAMSUNG SMART REFRIDGERATOR ® has detected low milk levels: five gallons ordered. 418 I’m a teapot.

JavaScript Frontend Programming

▲ 0

0 views

Unsung 2 weeks ago

“Invalid-reverse-solidus validation error”

In my three decades online, it has never occurred for me to try this, and I found it so delightful once I did – both Chrome and Firefox will quietly rewrite backslashes in URLs into slashes: Not Safari, however, even though the URL living standard says it should . I am very curious if the presence of backslashes in URLs is owing to Windows still showing backslashes in file paths, or just because people casually don’t see any difference between / and \, which are arguably both similar, and relatively alien in everyday typography. (“Solidus” is the proper typograpical name for this kind of a slash, partly to disambiguate it from all the other slashes with their equally fascinating names .) = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/invalid-reverse-solidus-validation-error/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/invalid-reverse-solidus-validation-error/2.1600w.avif" type="image/avif"> #keyboard #typography #web

Frontend Programming Web Development

▲ 0

0 views

Evan Schwartz 2 weeks ago

Scour - June Update

Hi friends, Many of you mistakenly got onboarding emails yesterday. I'm sorry about that. I was tweaking the way emails are sent to new users and accidentally sent it out to everyone. Don't worry, you'll get your weekly digest on Friday as usual. (If you got a message about verifying your email, please do verify yours if you'd like to continue receiving the weekly digests.) In June, Scour scoured 841,977 articles from 27,356 feeds , and 123 new users signed up. Welcome! Here's what's new in the product: Scour now tracks and shows which articles cover other ones so you can find coverage, reactions, and responses to a given story. Under any post, you can see both the stories that the given one links to, and which other sources link to it. A detail I especially like is that the covering sources you tend to like and read are shown first, so you can easily find your favorite commentators' reactions. Relatedly, there's now a page that shows the most widely covered stories across Scour. If you subscribe to specific feeds, you can also add this as a feed to source content from. Laurynas Keturakis suggested this over a year ago and after finally implementing it this month, it quickly became one of my favorite Scour features. Thanks Laurynas! After you love or like a post, you'll see a small prompt to add more interests similar to that article's content. Adding interests is the best way to hone your feed and make sure Scour surfaces articles you'll like, so I hope this makes it easier to do that. If you subscribe to individual feeds, that prompt will also include a way to subscribe to the publisher's feed, if you aren't already, so you'll get more content from them. Similarly, if you dislike a post, you'll see some options to have less of that kind of content appear in the future. The Scour feed got a makeover! The new layout should be easier to scan and interact with. Clicking or tapping a post opens the expanded view: Also, on mobile, you can swipe articles right or left to quickly like or dislike them. The new Discover section contains all of your personalized interest and feed recommendations, as well as the pages to browse popular posts, interests, and feeds. Head over there if you'd like to build out your feed more, or if you want to see what others are reading on Scour. Scour now works far better with assistive technology. Every post is a labeled article whose actions are reachable by screen reader and keyboard, menus support arrow-key navigation, and the things that used to change silently (filter updates, search results, newly loaded posts) are announced as they happen. If you or someone you know reads Scour with assistive tech, I'd love your feedback. See the new Accessibility page for the full picture. Enjoying Scour? I added testimonials to the homepage and I'd love to include your review! Email me to let me know your thoughts (and of course, constructive feedback is also very welcome). Here were some of my favorite articles I found on Scour in June: Happy Scouring! I've been thinking a lot about the ways that AI changes what it feels like to be a software engineer and I especially appreciated these takes: Andrew Diamond made a great comparison with historical fiction writers in Software Engineering in the Age of AI . Vardan Torosyan pointed out that every engineer is now facing the kind of overload engineering managers have always dealt with: There is Too Much . Candost discusses having an ownership mindset in On the Changing Role of Software Engineers . And a goofy font that Bill Tarbell made that's readable for humans but not for AI: Souls Only .

Design Mobile Frontend

▲ 0

1 views

Unsung 2 weeks ago

¿Por qué no los dos? pt. 1

I praised ⌘⭲ recently in my essay for cleverly not showing itself when you press the keys really fast . Here’s another nice detail. If you press and hold ⌘⭲, you will eventually stop at the end. (You can then press ⌘⇧⭲ or ⌘` to get back.) However, if you are already at the end, pressing ⌘⭲ again wraps around to the beginning: The issue of whether to wrap around or not is more universal; you can see it in many lists, ⌘F, and so on. On one hand, it’s nice to have a solid deterministic end that you can rely on stopping at, especially since sometimes the last item on the list is special (“See more items…”). On the other hand, going all the way back from the end can be frustrating, too, especially on a Mac that does really strange things with Home/End/PgUp/​PgDn keys. I thought the hybrid approach that ⌘⭲ is doing here was clever, and might be applicable elsewhere. #flow #keyboard #mac os

Design Frontend

▲ 0

0 views

David Bushell 2 weeks ago

ARIA, anti-patterns, and you

Please take a minute to understand what ARIA is and is not. ARIA and especially the ARIA Authoring Practices Guide (APG) are commonly misunderstood. I read an article the other day that had this facepalm moment: And with modern LLM agents, turning a spec into working code is surprisingly fast. Point the agent at the APG pattern, describe your component’s markup, and get a solid first draft you can refine and test. This is worrying, and the use of “LLM agents” isn’t the worst part! The APG is not a how-to guide of ‘best practices’ for building accessible websites. It exists to demonstrate how the ARIA specification should work in theory — regardless of support and regardless of whether more accessible, non-ARIA patterns exist (they do). As Eric Bailey notes — The guide was originally authored to help demonstrate ARIA’s capabilities. As a result, its code examples near-exclusively, overwhelmingly, and disproportionately favor ARIA. What I Wish Someone Told Me When I Was Getting Into ARIA - Eric Bailey — which makes sense, because: Browser and assistive technology developers can thus utilize code in this guide to help assess the quality of their support for ARIA 1.2. Read Me First - ARIA Authoring Practices Guide (APG) Even if ARIA was fully supported ( it’s not ) the APG still wouldn’t be a ‘best practice’ guide. ‘Best practice’ is not using ARIA at all. If you can use a native HTML element or attribute with the semantics and behavior you require already built in , instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so . 2.1 First Rule of ARIA Use - Using ARIA, W3C APG exists in a vacuum to show off the ARIA spec. The button example includes this code, for crying out loud! I’m unaware of any circumstance where should ever be used over a . Before you tell me you can’t edit your React component library, do the web a favour and delete your codebase. In fairness, the button example has a “Read This First” disclosure — and guess what: they use a element and not the disclosure pattern because the APG isn’t best practice. It’s hard to blame developers for misusing ARIA and the APG. I’ve been confused myself. As W3C documentation goes, APG is rather sexy. It’s a useful resource if you understand why it exists. Misuse of ARIA has made the web less accessible. Increased ARIA usage on pages was associated with higher detected errors. The more ARIA attributes that were present, the more detected accessibility errors could be expected. The WebAIM Million - WebAIM Avoid ARIA where ever possible. Don’t point a freaking LLM at the APG! I can’t believe I’m saying this but use Google’s slop if you absolutely refuse to learn/code yourself. Apparently OpenAI is throwing ARIA at the web and seeing what sticks. Ahhh! I don’t know anymore, take some pride in your expertise? P.S. name an assistive technology that isn’t a screen reader. Ain’t easy, is it? So don’t be casually punctuating with the word “test” like it’s some get-out-of-jail-free card for your dubious practice and advice. “Overview of Digital Accessibility Technologies” by Declan Chidlow is a great help if you want to win this game at parties. Thanks for reading! Follow me on Mastodon and Bluesky . Subscribe to my Blog and Notes or Combined feeds.

Programming HTML JavaScript Web Development Frontend

▲ 0

0 views

Unsung 3 weeks ago

Fingers already on the keyboard

This is what happens when you go to the homepage of Gemini and start typing quickly: Mechanically, I think this is React or some other framework setting focus again with some delay, but the end result is… rather disturbing. While the technical solution would be to fix the problem or at least do not set focus again if already set, I wonder what’s the real challenge here. I imagine it might be that the testing process (if any) assumes using the mouse or trackpad first. In this case, moving the hand to the keyboard to start typing gives the interaction just enough delay to miss the second, unnecessary focus. I think a good assumption to have for all common interactions is that for some users, fingers are already on the keyboard and things can happen so much more faster than you expect. Not accounting for that, the creators of this flow inadvertently broke one of the cardinal rules. We talked about it in the context of mouse pointers before, but it applies as well to text: don’t move my cursor for me . #flow #keyboard

Frontend Web Development Testing

▲ 0

0 views

Unsung 3 weeks ago

“That knowledge slides away.”

In response to my recent interactive essay about interactions , Waider on Mastodon posted a great crystallization of a common problem: There is nothing quite so frustrating as a persistent user interface papercut. You know it’s there, but you keep running into it because the moment you start thinking about what you’re doing instead of how you’re doing it , that knowledge slides away until BAM you run into it again . I think this is really nicely put and highlights about why it’s very important to care about this kind of stuff. If you forgo a standard interaction out of carelessness, a bug, bad systems thinking, or for other reasons, you’re not just making your users frustrated by something not working. You’re also at risk of making them frustrated at themselves , assuming they can change what their fingers do easily, not fully knowing that a) this is motor memory, not just regular conscious actions (and any memory is hard to “update” intentionally), and b) motor memory is separated from regular, declarative memory, and not possible to reason with using the same techniques. (As an example, it’s very hard when keyboard shortcuts or mouse gestures disagree between apps, because while you consciously might know which app you’re in, that’s not necessarily true of your fingers.) Waider continues with an example: The canonical example of this, for me, is Microsoft apps on macOS: even now, decades after Microsoft started producing macOS versions of their apps, they insist on largely disregarding the native UI idioms in favour of their own. Current pet hate is that if I’m commenting on a document, the Ctrl-A/Ctrl-E actions do not work, and boy howdy do I use those constantly. My recent example is that even though I wrote about Safari overriding the natural “scroll to top/bottom” tap gesture on their tabs – so I am aware of it in my declarative memory, I know Safari designers messed it up, and I know exactly what to do and not do – my fingers still occasionally tap to scroll in Safari anyway. #details #flow #interface design

Design Frontend UI

▲ 0

0 views

Kev Quirk 4 weeks ago

Adding a Town Square

I recently learned about this fantastic project where visitors are able to "chat" with one another in a fun and private way. I had to try it! So now, at the bottom of every page on this site, you will see my little town square. Please take a look and have some fun with it. If you want to learn more about Town Square, you can take a look at this post from its creator, Cauê Napier. 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 .

Frontend Web Development AI

▲ 0

0 views

Unsung 1 months ago

Fontificator

I thought about this the other day, and I thought it’d be fun to share this internal tool I made over a decade ago to aid with exploring options for Medium’s typographical redesign. It’s called Fontificator. You can play with Fontificator here (desktop browsers only), or watch the likely confusing video below: The motivation for building Fontificator came from two observations: With Fontificator, I was aiming at this Doug Engelbart-esque notion of one hand on the keyboard + one hand on the mouse, and the UI where it was only necessary to point to an element, and the keys under your other hand would start working immediately – no clicking needed: This way, we could move really, really fast. To accommodate that, Fontificator always tried to keep the current item under the cursor by counter-adjusting scroll position as needed. On top of it all, a few more shortcuts: You can also edit any text if you are so inclined, and also drag in any font file from your computer onto a paragraph – then that font becomes part of the F/G stack. (Bernino Sans and Freight Text were the starting fonts before the redesign.) On the left, you can also see a naïve mobile preview – there was also more sophisticated on-smartphone preview, but I removed it from this restored version. Fontificator was literally made for an audience of 2–3 designers (and perhaps 1–2 stakeholders in read-only mode), and it was surprising to me how quickly one could master this strange tool, have fun with it, and feel the entire typography on the page becoming much more malleable. We also put up a more “traditional” list of contenders on the wall… = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/fontificator/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/fontificator/2.1600w.avif" type="image/avif"> …but it was in Fontificator where we learned the most. I love internal UIs because they allow you to go very wild and very tactical. If you have one you’d be willing to share (maybe it, too, is on the other side of the statute of limitations?), or one you already wrote about or spotted someone else doing so, please let me know! #internal ui #typography font previews on type foundry sites were generally too limited to get a real sense of how a certain typeface feels, and it was best to see a font in situ, often an extremely tiny nuance – like adding some letter spacing, or messing with line height – was what separated something that was promising from something that seemed very far from working. F and G to change the font, – and + for font size, ← and → for letter spacing, ↑ and ↓ for line height, < and > for opacity (for all the above you can hold Shift for bigger moves), and, there are a few more shortcuts you can see at the top. ⇥ and ⇧⇥ move very quickly between different types of stories so you can preview that, Space compares to the original/​current version, 1–9 allow you to switch to different “slots” so you can have various presets ready to compare, Esc hides the toolbar for maximum immersion,

Web Design Frontend

▲ 0

0 views

Unsung 1 months ago

Panic’s blog respect its own history

The software company Panic has a blog , and has had it since 2009. It has a clean, modern aesthetic that looks something like that: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/panics-blog-respect-its-own-history/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/panics-blog-respect-its-own-history/1.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/panics-blog-respect-its-own-history/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/panics-blog-respect-its-own-history/2.1600w.avif" type="image/avif"> However, something interesting happens as you start going back in time by clicking Older Posts at the bottom – the historical posts are rendered using their original styling: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/panics-blog-respect-its-own-history/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/panics-blog-respect-its-own-history/3.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/panics-blog-respect-its-own-history/4.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/panics-blog-respect-its-own-history/4.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/panics-blog-respect-its-own-history/5.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/panics-blog-respect-its-own-history/5.1600w.avif" type="image/avif"> This isn’t something that happens for free, as with any redesign every piece of content gets ported to a new framework and style by default. So, I gather this was an intentional thing that also required extra effort both to make it work like this to begin with, and to allow the old style to appear nicely within the different confines and technical realities of the new style (you can compare the above screenshot of Firewatch announcement as retrieved today with its original appearance in the late 2015 ). I love this effort. I wonder if more places on the web could use that kind of thinking. As an example: what if your social posts or blog posts from long ago came adorned with the same avatar that you used when posting them, even if you updated it many times since? #change management #web

Design Frontend

▲ 0

0 views

tonsky.me 1 months ago

Every Frame Perfect

A while ago I was reading about Wayland and this quote stuck with me: A stated goal of Wayland is “ every frame is perfect ”. And I think this is a goal we should all aspire to. Wayland is talking about the technical side of things (modern GPU stacks are very complex and Wayland is trying to take control back) but it could be applied to UI too. The rule of thumb is: If I take a screenshot of your app at any moment, you should be able to explain what I see EDIT: This used to say “..., it must make sense” but that doesn’t account for advanced animation techniques such as smear frames etc. Why care about every frame? It builds trust. Users can’t see the code, so UI is the only way for them to judge the quality of the app. If UI looks good, that means developers had time to polish it, which means that they probably spent a comparable amount of time to iron out the code. It’s a heuristic, but a reasonable one. Now, what does it mean in practice? I can think of a few things: Animations often end up being forgotten. A UI might look great in both start and end states but very janky in between. Like this: If you feel like there are weird things going on there, there are! Look at slowed down version: Now let’s apply our rule and take screenshots in the middle of the animation. This doesn’t look right: Neither does this: Both of these frames are not perfect. Let’s look at another example. Safari: Placeholder text here moves from the center but cursor animates from the left position: Not the end of the world by any means, but it does create a feeling that these two components are not in sync with each other. Next thought: maybe they weren’t designed together? If so, then they might not work well together. That’s how trust is lost. This desynchronization can lead to a lot of confusion. For example, in Photos, when switching between Crop and Adjust mode, picture snaps into place immediately but the crop border is animated: This creates a false feeling that something subtly changes when you switch between modes. And you know what? I don’t want my UI to give me false feelings. I want it to be a precise instrument, not an animated toy. Sometimes animations are supposed to help you understand a transition, so it’s doubly sad when they make it harder. Follow the magnifying glass: Same with Youtube. They had the simplest task in the world: move a rectangle from one position to another! Yet they decided to do something very strange: Can you explain this? Does it make sense? Probably a technical limitation of the DOM architecture they decided earlier on. I call these situations “The technology has outsmarted the programmer”. But no matter the reason, the result is an imperfect frame. Sometimes animations are left out as an afterthought. Whatever happens, happens. Then we get this: The details are fascinating to watch: So yeah. Please pay attention not only to the start and end states, but also to everything in between. Every frame matters. I’ll leave you with this unprovoked zoom animation from Preview app. Take care! No white flashes between screens. No partially loaded content. No relayout while content loads. Internally consistent. If one part of the UI says “1 update available”, another part should not say “Checking for updates...” Precise animations.

Programming Frontend Design

▲ 0

0 views

Unsung 1 months ago

“Update announcements are most likely to appear at the least convenient time.”

A quick post from Paul Kafasis at the software company Rogue Amoeba, talking about making update notifications less annoying : Though [the open source update framework] Sparkle serves us very well, it has one notable downside. Update announcements are most likely to appear at the least convenient time: right after you’ve launched the app. With that in mind, we’re making changes to how update notifications appear throughout our apps. In the future, when the software’s timed automated check detects a newer version, it will no longer pop an obtrusive window like the one seen above. Instead, a small “Update Available” indicator will be shown in the app’s interface. You can see it right here in Audio Hijack. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/update-announcements-are-most-likely-to-appear-at-the-least-convenient-time/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/update-announcements-are-most-likely-to-appear-at-the-least-convenient-time/1.1600w.avif" type="image/avif"> I first remember this approach from Chrome in the early 2010s. (If you know it from an earlier application, please reach out!) The browser still uses it today, but the visual treatment was different early on; the update icon badge started with green, then yellow, eventually ending up red. While this resembles traffic lights the inspiration was, apparently, rotting fruit – you’d be more likely to want to clean up an old, stinky fruit than a fresh new one. Here are, I believe, the first three visual treatments in Chrome, 2011-2013: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/update-announcements-are-most-likely-to-appear-at-the-least-convenient-time/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/update-announcements-are-most-likely-to-appear-at-the-least-convenient-time/2.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/update-announcements-are-most-likely-to-appear-at-the-least-convenient-time/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/update-announcements-are-most-likely-to-appear-at-the-least-convenient-time/3.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/update-announcements-are-most-likely-to-appear-at-the-least-convenient-time/4.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/update-announcements-are-most-likely-to-appear-at-the-least-convenient-time/4.1600w.avif" type="image/avif"> How effective was that treatment, I don’t know. (It definitely felt more thought through than the trash where the skeuomorphism undermined the function itself .) But it is all interesting to me in the larger context of the tensions underlying updates: That’s why I always appreciate the improvements that prioritize the user experience over the company’s. #attention #maintenance #skeuomorphism It’s in a company’s best interest for every user to be on the latest version, since that saves on support headaches. A company needs to believe the newest version is the best ever – even if it’s not – similarly as our brains need to believe we are generally right most of the time, just so we can function.

Frontend Design Programming

▲ 0

0 views

Alex White's Blog 1 months ago

Having fun with static generation

I recently moved my blog to Astro . Since then I’ve been having an absolute blast with the static site generation process! I love being able to hydrate the site with dynamic data while keeping things fast on the server. It reminds me of HotSyncing data onto a Palm Pilot (how could I not reference Palm Pilots after my last post ). Here’s a few cool things that happen when my site is built: I started using GoatCounter (awesome service) and have been leveraging their API to show stats on my site via a custom build plugin. My analytics page now shows statically generated graphs of the analytics data as of the last site build. Additionally, posts now feature a “readers” count in the header. The previous iteration of my blog featured dithered images. While this was partly an aesthetic choice, it also greatly reduces the size of images. The downside was the amount of work involved in manually dithering images via ImageMagick for each post. Thanks to my new build process I was able to build a custom plugin that creates dithered copies of every image across all posts. It replaces images with a dithered copy, and then wraps the image with a link that points to the original full color version. I also have an escape hatch where I can specify a front matter flag in a post to skip dithering. This functionality came out of the box with my theme ( Astro Sienna ). Webmentions are fetched during build and displayed on the relevant post. I haven't seen this in action yet since I don't have any webmentions, but it's still super cool! Another plugin that came with my theme is the dynamic generation of meta images for sharing on social media. The plugin gathers info from the post and dynamically generates a png image at build time. Very cool! It’s been a lot of fun messing around with my new toy, maybe this means I’ll go longer than 2 months without changing my entire site! ...maybe... Thanks for reading on RSS, you're awesome! If you want to be notified of new posts even faster, I have a newsletter as well, you can signup here!

Jamstack Frontend Web Development

▲ 0

0 views