Frontend Feeds

Category

Top Front-end Bloggers

25 Sources

  • Rachel AndrewTop Front-end Bloggers6 min read

    Making features generic in CSS

    CSS has two new positional alignment keywords as part of CSS Box Alignment Level 3: flow-start and flow-end. These are defined as aliases for the existing flex-start and flex-end keywords. Therefore, in a supporting browser, the following two lines should align flex items to the end of the flex container (the right assuming you are ... Making features generic in CSS

  • AdactioTop Front-end Bloggersread at source

    Palaces Of The Crow by Ray Nayler

    I really liked Ray Nayler’s The Mountain In The Sea . I also liked The Tusks Of Extinction . But reading those back-to-back gave me pause: At times it seems to relish in describing the worst that humanity is capable of. It starts to veer into misanthropy. I said: I hope that the next Ray Nayler book I read won’t tip over into wallowing in the worst of our species. Well, when I cracked open Palaces Of The Crow , my mind was immediately put at ease. And I mean immediately. Before the story even begins, the book opens with two quotes. One is the closing passage of Darwin’s On The Origin Of Species describing “the war of nature”, but the other quote is from Kropotkin: Mutual aid is as much a law of nature as mutual struggle. That sums up the themes of Palaces Of The Crow . On the one hand, we do indeed get the worst that humans are capable of. But on the other hand, we also get not only the best that humans are capable of, but non-humans too. As with The Mountain In The Sea , this is a terrestrial first-contact story. We’ve gone from cephalopods to corvids. And we’ve gone from the near future back to Eastern Europe during the Second World War. I’m always nervous of any piece of popular entertainment that attempts to feature the Holocaust, but I feel that here it’s done with respect. It never comes across as gratuitous. There are four main human characters; a Polish boy in the Soviet army, a Lithuanian Jewish girl, a young boy who never speaks, and a Roma girl. The narrative is set almost entirely within a forest. At times this book reminded me of The Vaster Wilds by Lauren Groff . Both stories feature a young woman trying to survive in the wilderness. But whereas The Vaster Wilds is ultimately a tale of the individual, Palaces Of The Crow is very much a story of the group. And whether that group comprises humans, crows, or both, the message is clear: Social animals are built to survive only among one another. There is a cautionary subplot involving another denizen of the forest who goes it alone. His fate is very different to that of the group. A story of four youngsters in a forest during World War II sounds like it should be a brutal survivalist tale. But Palaces Of The Crow has more in common with Rebecca Solnit’s A Paradise Built In Hell and Rutger Bregman’s Humankind . Towards the end, the text sometimes can’t resist saying the subtext out loud, but this is a minor quibble with what is otherwise a beautifully constructed work. I’m not going to lie, Palaces Of The Crow is absolutely devastating in places. But it’s also life-affirming. I know that sounds trite, but this book is the opposite of trite. It’s visceral and unflinching and beautiful.

  • AdactioTop Front-end Bloggersread at source

    Thursday session

  • QuirksBlogTop Front-end Bloggersread at source

    Things AI cannot do

    Last week I did my first tests in nearly nine years. I’m planning to redo the viewport tests , and I created a new test page . I also wrote an article about meta viewports that will be published eventually. I thoroughly enjoyed myself and was surprised how easy it was for me to slip back into compatibility testing patterns. My reflexes are still there, but I only test on three mobile devices and that saves some time. Then it occurred to me that, while AI can write my article if I give it notes, it cannot do fundamental browser compatibility research. That’s it. That’s the entire blog post.

  • Ethan MarcotteTop Front-end Bloggers2 min read

    The ship is anchor’d safe and sound.

    A favorite actor just passed away.

  • remy sharp's b:logTop Front-end Bloggers2 min read

    My 2027 Web Platform Feature Ranking [blog]

    Like my peers, I've decided to publish my personal ranking preference for the 2027 interop project. I'm doing this from a phone, so I can't link to the others that have published theirs, but I think it's interesting to see and compare what we feel is important.

  • Jens Oliver MeiertTop Front-end Bloggersread at source

    Automatic Internal Linking in WordPress, a Plugin: ntrnllnk

    To automatically improve internal links on your WordPress site, consider ntrnllnk to manage in-content links and related posts.

  • AdactioTop Front-end Bloggersread at source

    Monday session

  • Dave RupertTop Front-end Bloggersread at source

    Arc-like automatic picture-in-picture in Chromium

    There’s a lot to miss about Arc (RIP), but the feature I miss the most has got to be automatic picture-in-picture. You start a video and when you change tabs to jump to another task, the video anchored itself to the corner of your desktop. Go back to the video tab and it slurps up into the video player area. A perfect experience with no interruption. I switched back to Edge (for work) and missed Auto-PiP a lot. I tried building a custom browser extension to restore the functionality myself but hit a platform limitation with the mix of WebExtensions , PageVisibility , and MediaSession APIs you need to get it to work seamlessly. You had to configure each site in a dropdown and run a script each MediaSession… it asked a lot of the user. There’s been a handful of Chromium flags and experiments to add “Auto-PiP” over the years, but nothing did it as well as Arc did… until… about://flags#browser-initiated-automatic-picture-in-picture Chrome 142 introduced a new browser-initiated-automatic-picture-in-picture flag and it behaves the same as Arc. The browser does all the work popping the video in-and-out when expected. I couldn’t believe this near-exact replica was hiding in plain sight all this time! But I couldn’t use it because the flag didn’t exist in Edge 😭 I started up a couple internal threads about it last year but it went nowhere. When the topic came up again this year, I mentioned to Greg Whitworth , “Y’know there’s a flag in Chrome that does Auto-PiP great…” and that next week the flag showed up in Canary and I’m happy to say it’s available today in mainline Edge 156. If you missed that feature in Arc and didn’t know it existed in Chrome or felt crushed by it not existing in Edge… then head over and turn on the flag today, I think you’ll be happy. The only thing it’s missing for me are the juicy physics-based animations that let you two-finger swipe and throw the picture-in-picture window around and pinch-zoom to resize. But it feels like the bones are there. And it feels like a good time to remind my fellow Edge users that Edge has a little feedback form inside the Three Dots menu > Help and Feedback > Send Feedback.

  • AdactioTop Front-end Bloggersread at source

    The Pirate Queen by Ariel Lawhon

    This is an infuriating book. So much so that I didn’t finish it. Don’t get me wrong; I love the idea of The Pirate Queen . Telling the life story of Gráinne Ní Mháille is an excellent premise for some rip-roaring historical fiction. It’s even got an interesting structure alternating between three different parts of her life. I was pleasantly surprised when I cracked open the book to find a small pronunciation guide to some Irish words in the front matter. It would be nice to have some Gaeilge scattered throughout the narrative. But that’s exactly what made this book so infuriating. First off all, by dropping in an occassional Irish word into a sentence, it just made me think, “Wait, what language would these people be speaking?” Usually the answer was Irish. In which case, why translate one arbitrary word? Then there’s the choice of the Irish word that gets dropped into the text most frequently… The front matter has this to say about the irish word tá : An affirmative statement similar to yes Um, not really. Tá is present tense of the verb “be”. The English equivalent is “is”. You can’t just drop it in as a replacement for the word “yes”. But that’s exactly what Ariel Lawhon does. This continually took me out of the story. One person asks a question like, “Did you see that?” and the other person answers, “Tá.” That just doesn’t make sense. I know this sounds really nit-picky, but one of the first things you learn about Irish is that there is no single word for “yes” or “no”. It’s most common to respond with the positive or negative form of the verb in the question—“Did you see that?” “I saw!” So of all the words to pointlessly switch into Irish, “yes” is by far the least suitable. It happened every couple of pages. I was getting so annoyed, I flipped ahead to the acknowledgements to find out who was consulted on the use of Irish in the book. I found my answer. No one. That seems somewhat irresponsible to me. It borders on being insulting. Would it have taken so much time and effort to have one single Irish speaker check the text? Alas, the lack of research wasn’t just evident in the book’s treatment of the Irish language. At one point, a young Gráinne is out walking with her brother, who is playing the uilleann pipes. I had to stop and check the text a few times. Perhaps I missed a bit where they sat down. But no, this book blithely describes a character walking and playing uilleann pipes at the same time. Now if you think uilleann pipes are pretty much the same as Scottish highland pipes, this would make sense. But they’re not. A bare minimum amount of research would show that the uilleann pipes are played sitting down (you can try to play them standing up, but you’ll need some kind of extra gadget like Johnny Doran used, but even he couldn’t play them while walking). I carried on reading even though I was getting more and more annoyed by the shoddiness on display. Then I read this sentence: No more distant flicker of lanterns in the distance. I get how you would write that sentence in a first draft. Hopefully you’d catch its redundancy in a subsequent draft. If not, it’s exactly the kind of thing that your editor is there to spot. But no, this made it all the way to the final printed book, a book that was displayed prominently on tables in major bookstores in multiple countries. Compare and contrast that with When The Boys Came Out To Play by John Mackel , a book which will be likely only ever be read by a much smaller audience but which is crafted with so much more care. I always feel slightly guilty if I don’t finish a book. I know, I know; life’s too short and all that. But I can’t shake the feeling that I’m being a bit disrespectful to the author by not seeing their work through to the end. In this case though, the author displayed enough disrepect to her readers that I don’t think I need to feel bad about slamming this book shut. The Pirate Queen is a sloppy piece of work. You deserve better.

  • Dave RupertTop Front-end Bloggersread at source

    Bad at email

    Good friends and family know this, but I am bad at email. Like chronically bad. If you have tried to email me, you know this too and you either never got a reply or received one 9-months later starting with the phrase, “Sorry.” I am truly sorry… but also I’m not. It’s a function of who I am. I was never great at email, but in a slower time before social media it raptured my attention. I would habitually refresh my inbox hoping for a long range communication from a friend or stranger. When I was homesick in Japan, a good email (or AIM chat) could turn my day around. I have fond memories of email and its unparalleled ability to connect me to other people through a single address. It of course would never be as familiar or intimate as scribing a hand-written calligraphic letter with a big feather pen, but it proved a fine substitute. At Paravel, I noticed that emails had a propensity to crash into my day with some new urgent task. A ding, a red badge, a bouncing icon in the dock . Could be a client or my accountant; something that required me to stop what I was doing and switch over to their need. Frank once described emails as (paraphrasing) “a to-do you send to someone else” and that resonated in my soul. For someone with an attention regulation disorder, intermittent distractions like email (or chats) can be devastating to staying focused on the work I actually need to finish. Email being disruptive to your productivity must be a pretty common phenomenon because nearly all the productivity books out there –and I’ve read them all– attempt to “solve” productivity by turning off your notifications and checking your email less. I must have really taken this advice to heart because I almost never check my email anymore. After a long day of expending dopamine on work, the last thing I want to do at home is check my personal email and receive more to-dos from strangers. I tend to check my personal email now once a week… or less. Inbox Zero is a fool’s errand for me, but I try to keep my work email groomed and as close to zero as possible. Part of that was because I started with a blank slate and could actually succeed. Each morning I make an analog to-do for myself to check my work email. I set up some priority inboxing and auto-deletes for org-level notifications. Importantly, work email stays sequestered to my work laptop. But despite the success at work, I’m sitting at nearly 500+ unreads in my personal Inbox. It doesn’t feel great and feels like a monumental task now. Since starting at Large Company I know of at least two conferences that I’ve missed out on speaking at because I’m so bad at email (sorry, PPK ). If you’ve ever wondered why I don’t have a contact form on my site or do that cool “email me, let’s be friends” link in my RSS footer, this is why… because I feel shame that I will disappoint you . There’s also the diminishing utility of email. As with phone calls and texts, the amount of spam and noise has ruined the service. It’s a needle in a haystack to find the one good email that actually deserves your attention. Just because we participated in online commerce once doesn’t mean you get the liberty to email me for the rest of my life. I wish there were more laws about this. When did a ten drip email campaign for every online transaction become the standard? You bought an item → Item is getting ready to ship → Want another item? → Item shipped → Need more items? → Item out for delivery → The holidays are coming up → Package delivered → Let us know how we did → Mother’s day coming up → Father’s day coming up → Step-father’s day coming up → etc… It’s entirely too much. And the grifter slop… oh, my God the grifter slop! Hey Dave, I came across your now-defunct company Luro. Design systems is an interesting space. Would you like to increase Luro users by six billion percent through spam email blasts? We can help. Chad, CEO I will never reply to this and– Dave, I thought I’d follow up in case you missed the last email. I’m a fucking robot obviously but we can have a conversation about this. Chad, CEO Grifters, spend six minutes crafting a real email and I promise you it will convert better. Or have an actual fucking product that is so good I hear about it from other people. You are one of five hundred anonymous Chads in my inbox, this pickup line doesn’t work anymore. Along those lines… Democrats, sending text messages doesn’t work anymore. I got AOC, Nancy Pelosi, Beto, and even Raphael Warnock’s grandma texting me every other day and it makes you look broke and desperate like a friend I’m gonna need to bail out of jail again. Capture me with ideas. That’s how I feel about email. And text messages. And phone calls. And social media. Once upon a time it had utility, now it’s all noise and grifter slop demanding our attention and giving us to-dos. Be hotter, be smarter, be more liberal, be more productive, be more, be more, be more. Oh, and I underpaid my taxes and owe the government $5400. That was the email I missed.

  • AdactioTop Front-end Bloggersread at source

    Chuala mé an nuacht brónach go raibh Dónal Lunny imithe ar slí na fírinne. Laoch. Ar dheis Dé go raibh a anam.

  • AdactioTop Front-end Bloggersread at source

    An Cábla agus an t-Amhrán - YouTube

    Well, this short film by the Irish Traditional Music Archive is right up my alley! It looks at the first transatlantic telegraph cable and the traditional music of West Kerry, particularly the song Ámhrán na Leabhar : From the naomhóg, which for centuries connected the islands, peninsulas and coastal communities of Uíbh Ráthach, to the arrival of the world’s first successful transatlantic telegraph cable at Valentia, An Cábla agus an tAmhrán reveals a remarkable continuity: while technologies evolve, humanity’s desire to communicate, remember and pass stories from one generation to the next remains unchanged. ';"> adactio.com/links/22811

  • AdactioTop Front-end Bloggersread at source

    Reading Palaces Of The Crow by Ray Nayler.

  • Jens Oliver MeiertTop Front-end Bloggersread at source

    HTML Minifier Next: Extended Benchmarks, Self-Close Foreign Elements, Fewer Redundant Attributes, JSON Minification Opt-In

    On the most recent changes to the super-configurable web page minifier.

  • Jonathan SnookTop Front-end Bloggers2 min read

    New iPhone

    My social media was abuzz around the launch of the new iPhones. I have a 15 Pro Max and was thinking that the 18 might be the generation I’d make the upgrade for. I used to do every other year but I didn’t see the leaps and bounds in improvements with the 17 to tickle that FOMO…

  • remy sharp's b:logTop Front-end Bloggers1 min read

    AI can operate a screen reader. What does that actually test? [link]

    Really like the framing of this article. It uses some very visceral (or easy to understand) examples of how people vs. AI would approach the problem space, and my feeling is that this kind of thinking works well when expanding well beyond the scope of accessibility (though this is an excellent place to start). The floor plan example is good, but it was this that particularly won me over: An AI agent starts with advantages a person doesn’t have. […] The agent knows the goal before it begins. […] A pass tells us the agent found a route, not what finding it was like. AI performs; people experience. Original link: nicolas-steenhout.com/ai-screen-reader-testing

  • AdactioTop Front-end Bloggersread at source

    Ranking proposals for Interop 2027

    The Firefox team are asking us to weigh in on proposals for Interop 2027—what features should browsers be concentrating on implementing or improving. Here are my top five : Web app installation via and navigator.install() . Prompts the user to install a progressive web app. Speculation Rules API . Hints to the browser to proactively download pages in the background so they appear instantly when the user navigates to them. CSS var() in size container queries . Such as @container (width >= var(--min-width)) . CSS flex-wrap: balance . Distributes items in a multi-line flex container so each line has about the same number of items. Interest invokers . The interestfor attribute triggers actions on a target element when the user shows interest, such as via hover, focus, or long-press. Those are very much in order of priority. Imagine them following a Pareto distribution ; the top 20% (in other words, the first one) is 80% of my priority. But other people have other priorities: Stu , Eric , Ana , Tyler , Paweł , Declan , Sara , and Cyd , for example. There’s a lot of love for styleable select in there—can’t argue with that. Get in there and rank your priorities . Then share them.

  • AdactioTop Front-end Bloggersread at source

    Reading The Pirate Queen by Ariel Lawhon.

  • CSS WizardryTop Front-end Bloggersread at source

    Web-Perf Wednesday 013 – CrUX Adds Soft-Navigation Core Web Vitals

    CrUX adds experimental Core Web Vitals for SPA soft navigations, while Firefox and Safari improve cache evidence, image delivery, and rendering.

  • Zach LeathermanTop Front-end Bloggers1 min read

    All of my 300+ browser tabs are beautiful

    I am a habitual tab hoarder so I created a Firefox addon to help me manage every one of my very special browser tabs. Sort tabs by oldest, unload them, find duplicates, and consolidate tabs to a single window — buncha useful stuff in there! Download from Mozilla Addons Source…

  • remy sharp's b:logTop Front-end Bloggers1 min read

    The Correspondent [book]

    A lovely story that held all the marks of a real person full of real faults, discovering late in life that there's still more to be seen. I can't remember the last time I shot through a book so fast. 6 days it took me to read (fast for me). I think it's partly due to the technical nature of the book. Specifically, it's written as (the title would suggest) correspondents from Sybil (the main character) and the people she writes to. Due to this structure, there's really no particular moments when the story has any "what's next" moments, but rather just flows from letter to letter. Although it is written as a series of disjointed letters, it works really well and at no point did I feel lost - even when the letter starts, if it's addressed to Sybil, unless it's an email, you don't really know who it's from until the clues in the letter. Sybil is in her twilight years and has enjoyed a good career and when we meet her she really isn't looking for much other than exchanging letters with her friends, family and others. One thing is very clear from the letters and the book: Sybil is flawed, but in ways that we can see as the reader, but she doesn't see from her perspective. In ways that are frustrating but don't (or didn't to me) come across as contrived for the story. I've known people with these kinds of blind spots. I can imagine myself being just as stubborn. I really enjoyed reading the book, it ends a little cliche but not so much in a sickly way. Although my last two books were centred entirely around 70+ year old characters so I think the next book will have to try to be a little different!

  • QuirksBlogTop Front-end Bloggersread at source

    Mucking about with mobile browsers

    Today, for the first time in ten years, I bought a test phone (a second-hand Galaxy S21) and worked on creating my first mobile browser test array in nine years. Here’s a few fun facts that I noticed. My array consists only of one iPhone and one Galaxy — quite a difference with the past, when I routinely used about twelve to fifteen devices. Still, let’s start small. The phone market is simpler than back in 2012. And these two phones have one advantage I thought I’d never have: they use the same charger !!!! I thoughtlessly switched the charger from Galaxy to iPhone. And! It! Worked! 2012 would not believe you. Your choice is important to us The Galaxy has a browser/search engine choice menu nowadays. That’s fair, I’d say, given that the iPhone has one as well. Both these lists are very long, and that will likely put off consumers. That’s the point of such long lists. Anyway, I knew what I wanted on my Galaxy. Chrome, Samsung Internet, UC, Firefox, Vivaldi. The first two were already on it. The others required use of the Play Store, which, incidentally, doesn't have a search bar by default any more. Sure, there’s a menu item, but it’s not the same. (A search bard by default might be a useful feature for the EU to require. Consumers must have choice.) When I’d found UC I also saw Firefox. Cool, two downloads in one screen. Then I looked further and saw that Firefox was a sponsored result. Same when I searched for Vivaldi. Clearly, someone at Mozilla bought a bunch of good keywords. Zoom reflow! Coolest feature last. It turns out that UC supports zoom reflow . That is, when you resize the visual viewport, the text adapts to the new width and fits snugly. This used to be an HTC thing back in the days (but today nobody remembers HTC). Now, apparently, it’s a UC thing. The downside of this feature is that it must be very expensive in terms of reflowing the page. I don’t doubt that there will be exceptions and things where the page doesn’t reflow. But I discovered it only an hour ago, so I will bask in the radiance of my absolute favourite mobile feature returning from the dead. Difficult questions will have to wait for tomorrow.

  • Jens Oliver MeiertTop Front-end Bloggersread at source

    CSS Optimization: Is Using Declarations Just Once (UDJO) Still Effective Today?

    On the merit of (and tooling and metrics for) an old CSS maintainability and performance optimization technique.

  • remy sharp's b:logTop Front-end Bloggers4 min read

    My AI policy [blog]

    There's no shortage of commentary on LLM usage and I've penned several posts that have never left draft status because in part I can't articulate exactly what I want, and partly because there's so much noise around the subject. That's been true for the last few years but as an senior (and old) developer I think it might be useful to at least put in writing what happens to be true for me this moment in October 2026. Fair notice: this post will only briefly cover any policy I personally hold and quickly move into my opinions about LLMs and our community.

  • Adam ArgyleTop Front-end Bloggersread at source

    WWW Ep255 Meta Harnesses Medical Midjourney And Specialists

    Ep #255 Meta-Harnesses, Medical Midjourney, and Why Specialists Are Cooked Robbie and I are back together, talking token limits, OpenCode burning budgets, work trees for parallel agents, Impeccable's art direction grilling, CodeRabbit versus Copilot for PR reviews, self-heal…

  • Ethan MarcotteTop Front-end Bloggers2 min read

    All watched over by algorithms of loving grace.

    If you liked that, have you considered you might enjoy: more of that

  • Lea Verou’s blogTop Front-end Bloggers27 min read

    The best way to use icons in Web UIs

    TL;DR? Jump to demo I’ve always had a soft spot for icons 1 . Not only do they add polish to a UI, they can also tangibly improve usability. Familiar icons help users find what they need quickly, since we recognize pictures much faster than we read words. And as a web architect…

  • Sara SoueidanTop Front-end Bloggers3 min read

    My top picks for Interop 2027

    I love the Web platform, and it’s a privilege that we, the web community, get a chance to influence what browser makers work on every year. For the second year in a row, Firefox has created a page that allows us to rank the Interop 2027 features that we care about the most.…

  • Jens Oliver MeiertTop Front-end Bloggersread at source

    A Short Theory of the Political Spectrum

    On who votes left, right, and center—and what it means to vote either left or right.

  • Christian HeilmannTop Front-end Bloggersread at source

    Returning to Bengaluru in November, see you there.

    After rocking San Jose with our World Congress, WeAreDevelopers’ next port of call is Bengaluru in India. See you there on the 25th of November for two days of excellent talks and workshops !

  • remy sharp's b:logTop Front-end Bloggers1 min read

    Tell Me Everything (Amgash, #5) [book]

    I wasn't a fan of the narrative technique, or, particularly the characters. I'm sure it didn't help that it turned out that this was the last book in a five book series, where I've been told the previous books had built up the characters, and this was more of a bringing together of the characters from the previous books. This book was picked up because of recommendation, but I'd obviously missed the fact it was entry 5 of this world. The narrative tone reminded me a lot of the narration used in the movie 500 Days of Summer. Which, felt fine for a chapter or two, but for me, it felt a bit tired and forced the further I got. I also often lost track of the characters that weren't the main Bob and Lucy. One character is given months (or weeks?) to live, but I couldn't tell who they were or whether they were important (thankfully the book did give me a helping hand as a reminder once the character was dead!). I found some of the choice of dialogue odd and jarring at times, like the random use of "dickwad". Then finally the characters, literally telling each other everything… I just didn't care. The stories the characters Lucy and Oliver exchange are questioned once as to the point. As the reader, the thought had crossed my mind already. I feel like my review is particularly hard going on the book and maybe this story, even with a brief randomish murder thrown in, might have made a good conclusion to the characters, but as someone picking it up "cold", it didn't quite keep my interest.

  • Christian HeilmannTop Front-end Bloggers1 min read

    TLDRs newsletters are TLDR so I wrote a converter that gets all the important links

    Much like a lot of other people, I subscribe to quite a few of the newsletters of TLDR. As I re-use the things I found there in own publications, I did find the newsletters – ironically – not quite succinct enough to go through them quickly. I wanted to skip sponsored sections and other cruft, […]

  • Dave RupertTop Front-end Bloggersread at source

    Recursion is DEAD and HTML killed it

    There’s a new web platform feature flighting in Chromium called Declarative Partial Updates . This proposal adds a new element which enables out-of-order streaming of content. Rather than the traditional way of building the HTML you need on the server, or sending JSON down to a JavaScript framework, you can staple HTML onto the initial response and use the syntax to inject that content into the placeholder. A simple example of this would be: ` syntax for ` ` becuase the HTML highlighter likes that better. Either syntax works. --> Hello world First post The late-arriving template will auto-magically get slurped up into the placeholder slot. Unlike the element though, once you use it’s done. You burned that card and it doesn’t work a second time. If you want to chain more than one post together and create a feed of posts, you can repeat the placeholder with the same at the bottom of the appended item. The essence of the feature is that you can open a server connection, never close it, and keep pumping more HTML onto the page. The element does the heavy lifting of taking that new HTML and putting it in the right place. There’s lots of potential here (e.g. my beloved HTML Imports?) but I think the canonical use case would be how an LLM chatbot could stream in content that generates at different speeds: Markdown formatted text goes here... Hi, sorry I took so long! Here's a whole-ass application. That will create some other problems like FOUC and LCP hurk-jerk you will have to manage –and that’s for another post– but lazy-loaded HTML rendering adds an interesting capability to the web platform. It took me a couple walks around the neighborhood to understand how I could potentially use and out-of-order rendering on a normal workday. Rendering a threaded response The rule of thumb I came up with is that might be a pattern to reach for any time where you want important content to show up first and then you kind of don’t care when other content shows up below the fold. A post with nested replies A product with reviews that show reviewer profile cards A gigantic pull request with nested comment threads A book with authors that have related books You get the gist, a classic relational data situation. The example I’m going to go with is a nested reply thread like a Reddit thread or Bluesky post. Building a nested thread of replies isn’t rocket science, but you have to do a lot of for-looping to first build up the tree of posts you’re going to render… → Fetch all root posts in thread → Loop through posts → Fetch replies for each root post → Loop through root post replies → Fetch replies for each reply → Add nested reply to parent reply → Add parent replies to root posts → Walk tree → Send HTML for all posts Assuming the data tree gets stitched together by the database or our server backend, your first attempt at rendering nested content will probably be the most literal approach: create a for-loop for each level of content… // pseudo-code const postsTree = postsDb.find(p => p.thread_id === 'abc123'); postsTree.map(post => html` ${post.username} ${post.body} ${post.replies?.map(reply => html` ${reply.username} ${reply.body} ${reply.replies?.map(nestedReply => html` ${nestedReply.username} ${nestedReply.body} ` ).join('')} ` ).join('')} ` ).join('') An obvious limitation here is that we’ve hard-coded ourselves to three levels of nesting. Adding more nesting would require backend and frontend work and break the classic “ Rule of three ” programming rule. Hard-coding your nesting is the “dumb way” to render nested content… but also the normal way. Making this a bit smarter and more infinite Philosophically-speaking, UI should be agnostic to the content it renders. If nested content is a possibility, a content renderer should theoretically support infinite nested content. Practically-speaking, most of us have learned that it doesn’t matter if the Product Manager’s Jira ticket says “The max is two nested items”, there will always be at least three. The smarter way to render this is to use recursion because nested for-loops are BAD and you are DUMB if you use them. But if you obfuscate the nesting into a function that calls itself, then that’s ✨recursion, baby✨ and you’re a GENIUS programmer. Jokes aside, recursion will clean up the template code and simplify getting HTML on the page. → Fetch all posts in thread → Loop through posts → Build a map → Loop through map → Build a tree → Walk tree → Send HTML for all posts Before we grabbed all posts, then all replies, then all nested replies. Walking that tree is a bit slow. We can make that faster by fetching a flat list of posts in the thread and then assemble a tree. You can do this with some crafty LEFT JOIN SQL statements but its generally easier on the server. buildPostTree : building a nested tree from a flat list of posts function buildPostTree(posts) { const postsById = new Map() // Loop through posts to build map for (const post of posts) { postsById.set(post.id, { ...post, replies: [], }) } const roots = [] // Loop through map values to build tree for (const post of postsById.values()) { // Parentless posts must be roots if (!post.parent_id) { roots.push(post); continue; } // Find this child's parents! const parent = postsById.get(post.parent_id) // Add child post to parent's replies parent.replies.push(post) } return roots } Then instead of hard-coding nested for-loops, we can recursively walk the tree to render the HTML for the posts. // pseudo-code const posts = postsDb.find(p => p.thread_id === 'abc123'); const postsTree = buildPostsTree(posts); const renderPost = (post) => html` ${post.username} ${post.body} ${ // Loop through post replies and render the HTML post.replies?.map(reply => renderPost(reply)).join('') } `; postsTree.map(post => renderPost(post)).join('') That’s a more robust and understandable way to handle infinitely nested content. Our code is more durable to future changes. Need more or less nesting? Sure, we don’t care. That’s a data concern not a component rendering concern. Even though we’ve simplified and reduced lines of code, both strategies have the same bottleneck: You need to build the entire tree before you can render the HTML . The user waits for us to stitch the data together and the user waits for us to walk the tree and render synchronously. That’s two render blocking operations to put a thread onto the page. The element gives us another path… Infinitely nested threads with out-of-order HTML First we setup our page to receive the HTML, like we did at the top of this post… And our rendering strategy gets a lot more simple… → Get all posts in thread → Loop through posts → Send HTML for post And code looks a little something like this… /* get all root posts */ const posts = postsDb.find(p => p.thread_id === 'abc123'); const renderPost = (post) => html` ${post.username} ${post.body} ` /* loop through posts */ posts.forEach(post => main.appendHTML(renderPost(post)) ); No tree building is happening whatsoever on the server. The microsecond after we generate the template in the middle of the for-loop we can stream/send the HTML directly to the client and let the page assemble itself. No recursion, no pre-assembly required. It all snap-fits together without us imperatively injecting content. A brief demo in CodePen. I recommend reading the HTML first, imagine that’s the order it streamed in, then viewing the assembled tree of nested comments. See the Pen LEFT JOIN with HTML by Dave Rupert ( @davatron5000 ) on CodePen . It’s worth noting a thread of 10K posts will crush the browser, so you’ll still have to load responsibly and think about a “Show more comments” buttons. I’m hand-waving the details here, but this gets easier too because your loadMoreComments() function doesn’t need to know anything about where to append those new comments, it can just staple them to the bottom of the page. I’m excited about the possibilities here of removing ancillary content or UI from the critical rendering path. I’m interested in HTML’s newfound ability to self-assemble content and relationships in a declarative way. And maybe… he says with a glimmer of hope in his eyes… HTML Imports will be resurrected and there will be peace on Earth.

  • QuirksBlogTop Front-end Bloggersread at source

    The cost of AI

    At Fronteers Dark Mode last Friday I had AI conversations with three or four people. At the end of each of them I asked: “Yeah, but what would those tokens really cost?” They didn’t know either, but agreed that it was the right question to ask. Is AI truly cheaper than the workers it replaces? I encourage you to do the same. After each conversation about AI, ask what the true cost of the tokens would be. Nobody knows, but getting used to asking the question is a good idea. Costs and benefits AI is being very heavily subsidised right now. I still don’t know what the true cost of a token is. Nobody does. (This analysis says “hyperscalers have spent about $1.2 trillion on AI investments while only making $277 billion in revenues.” That’s $4.33 spent for every dollar earned.) On the consumer side, this is the first time the tech giants release a service that is not “free” — and that after years of training us to expect free goodies everywhere. They can fund their free social networks and such by productizing the consumer, but there’s no way they can port the ad model to AI. The money just isn’t there. (The total global ad market in 2025 was about $300 billion. This analysis estimates that the hyperscalers need at least $1.3 trillion per year over the next ten years. That’s four global ad markets and a bit.) Also, this is the first time the tech giants release a service that is cordially disliked by a large percentage of the world — maybe even to the extent that it influences sentiment about the tech giants themselves. But consumer opinions don’t matter, it’s the corporate market that counts. So the question becomes: can AI efficiency save the world about 25% of its total IT costs? (The 2020 global IT market — untouched by AI — was estimated to be $5.2 trillion, and as we saw we need at least $1.3 trillion per year to keep AI running. The savings would not only come from IT, but IT would be expected to deliver the lion’s share.) Factories and tradesmen Quick history lesson: the industrial revolution, which replaced tradesmen by huge factories, didn’t take place because people liked huge factories, but because they produced stuff cheaper . Right now I’m not seeing any evidence that AI is cheaper than the workers it replaces, especially not when taking into account the amount of checking that AI errors and bugs still require. I could be wrong, but it’s unprovable either way, and the numbers I quoted above seem to support my viewpoint. The tech giants are creating something with the appeal of a 19th-century factory, complete with oppressed and estranged workers, without delivering the sole benefit: cheaper IT and other services. Do they create their factories because they like them? Regardless of the costs? Did that make them bite off more than they can chew? Hey, I’m just asking questions. Recent articles For this article I read a few overview stories about the cost of AI — and not in my local anti-AI socialist rag website, but in the sort of unsuspect capitalist publications that Very Serious Investors read. I found that, while the authors still sprinkle sentences throughout their articles about “obvious benefits,” and company X saving $50K, and the general wonders tech brought to the world, they start to be pretty critical of the huge expenditures. To me, this sounds as if the writers are preparing the world for a shifting viewpoint; for the moment that money will run out, unlikely as that might appear to anyone within the bubble. Oh, yes, we could be wrong, mr AI True Believer who pays for a subscription to the magazine we write these words in ... except that we’re not. To me, it sounds as if at least part of the capitalist class is waking up to the fact that AI is just a bubble. And once enough people say “AI is just a bubble” it becomes reality. So help it come about. After each conversation about AI, ask what the true cost of those tokens would be. Sow doubt. Hint at bubbles. Let’s hope the bubble bursts soon. It’s only after the inevitable crash that we can assess the true cost — and benefits — of AI.

  • Brad FrostTop Front-end Bloggers1 min read

    Laser Storm

    This weekend, I took Ella to her cousin's birthday party at Laser Storm on McKnight Road north of Pittsburgh. The small structure is now dwarfed by much larger, newer chain stores, but entering the doors transported me to the same amazing world my cousins and I would visit as…

  • Jens Oliver MeiertTop Front-end Bloggersread at source

    HTML Minifier Next: Exempt CSS, JS, and SVG From Minification, Collapse No-Break Spaces and Empty Attributes, Higher Correctness

    On the latest changes to the super-configurable web page minifier.

  • Christian HeilmannTop Front-end Bloggers7 min read

    AI needs fewer Iron Men and more Smart Hulks

    When I got into machine learning it was all about making the world a better place. I worked for Microsoft and had access to projects and the smart people behind them that all were for the benefit of humans. Batch analysis of MRI scan data to allow doctors to detect cancer growths faster. Analysis of […]

  • phpiedTop Front-end Bloggers2 min read

    Debugging download initiator

    I was recently debugging why an image was being downloaded. In Chrome devtools, in the network panel, the column for "initiator" was pointing to the end of the HTML document. But that wasn't true and I suspect when Chrome gives up on trying to figure out the actual code location, the default is the HTML […]

  • Jens Oliver MeiertTop Front-end Bloggersread at source

    We Need to Protect Muslims

    The West has developed a self-fueling story about Muslims that is used to wage a non-scrutinized forever war on Islam. Both the story and the war need to stop.

  • Adam ArgyleTop Front-end Bloggersread at source

    Page View Count Regression Fixed

    Page view counts regressed Oct 1 and were fixed just now. Hopefully those historical counts can be retrieved or fixed; working on it.

  • Human Who CodesTop Front-end Bloggers4 min read

    Introducing PR Comment Inbox

    PR Comment Inbox helps authors track and respond to every conversation in a busy GitHub pull request.

  • David Walsh BlogTop Front-end Bloggers1 min read

    JavaScript SpeechSynthesis API

    As the web continues to be the medium for all users, standards bodies need to continue to provide new APIs to enrich user experience and accessibility. One underused API for unsighted users is speechSynthesis, an API to programmatically direct the browser to audibly speak any arbitrary string. The Code You can direct the browser to […] The post JavaScript SpeechSynthesis API appeared first on David Walsh Blog .