Posts in Css (20 found)
ava's blog 2 days ago

AI blog question challenge

Rishabh made an AI blog question challenge and invited me to fill it out. Let's go! 1. How was your first experience with AI models? I used to have fun playing around with NeuralBlender, and used it to inspire glitch art of mine that I drew. Back when ChatGPT launched, I used it to teach myself HTML and CSS. 2. Do you use AI or are you completely against using it? On average, I use it once a week or less; weeks can go by where I don't use it. Due to my field of interest, I want to keep up to date on some use cases and capabilities, and make my own experiences instead of relying on what the hype online says. I feel like I can't properly write about my criticisms or privacy concerns if I don't use it at all, or don't test the use cases people rave about (which often leave me deeply disappointed). Occasionally, my boss will also ask me to trial out some use cases at work. Situations I use it for in private when I am not testing what others are doing: 3. Do you have any preference among different models, for example Claude vs ChatGPT? If yes, how do you choose? I only use ChatGPT and Lumo, and I'm trying to permanently move to Lumo. I no longer want to use anything made by OpenAI. 4. What aspect of AI models do you like and what do you not like? I hate the sycophancy and wordiness. Even when I adjust settings to be short and precise, they still yap. I don't like all the subheadings and bullet point lists, I prefer a full text. I turned emojis off. I also hate when they constantly repeat my name, so I removed that again. I also hate how mean Lumo can get; I want no sycophancy and the fucker will start bullying me for some reason. I like the aspect of being able to ask something when no one else is available (either due to the sensitive matter, embarrassment, or time issues). 5. How do you feel about AI generated images? Does it annoy you if someone uses them in a blog post? Seeing an AI generated image on a blog post is about as nice as being greeted by a steaming turd. Even worse when I know it isn't a bot blog and the person spent time crafting the text, only to include a graphic that has several errors, spelling mistakes and other unfitting or illogical stuff. Do you have absolutely no shame or quality standards? You wanna tell me you looked at that picture that said "thseism" instead of "theme" somewhere in it and thought " Yup, that's it, best I can do, hope my readers enjoy this total eye candy, can't see anything wrong with that "? What is it supposed to convey to me as a reader - that you didn't even look at it, or that you were too lazy to formulate a second or third prompt? 6. Internet is flooded with AI slop now, full of generated text, images, audio and videos. How do you filter it from authentic human creation? Do you have a strategy? I'm not on any of the big platforms or their replacements, and I consume the internet through my highly curated RSS feed reader where I follow real people who don't use it like that, or the Discover page. It's easier to avoid when your internet use is limited, in a niche, and mostly used for blogging, reading and studying. I have a good grip on detecting generated text and images, but I've noticed that videos and gifs can easily fool me by now. 7. Are you hopeful for a better future with A.I. or a dystopian one? Hard to say; I think AI is absolutely a dystopian nightmare when used in surveillance and war. For the rest, I assume the bubble will pop and few dedicated models for specific niches and use cases will remain that have proven to be useful and worth the cost, and the rest will fade away. I hope it can do some good in healthcare, but that may be wishful thinking. If AI went away completely, I would not miss it. Reply via email Published 28 May, 2026 I can't find something specific (like a specific word, jargon, saying, concept, item name etc.) via normal search engine use or can't find a clear explanation for something I find difficult to understand. Needing an easy language version for a really difficult paragraph, law text passage, case part etc. that I can't seem to crack on my own. Career and job questions I am unable to ask anyone both offline or online, because people I know in real life can't help, and I'd have to reveal too much to others if I asked online. Career trajectory brainstorming, 3-year and 5-year plan stuff.

html HTML web Web css CSS ai AI
0 views
Josh Comeau 4 days ago

CSS vs. JavaScript

There are a bunch of JavaScript animation libraries out there, and you might have wondered whether there’s a performance cost compared to traditional CSS transitions and keyframe animations. In this blog post, we’ll compare the same animation across several different strategies and see the differences firsthand. There’s some interesting nuance here!

css CSS performance Performance javascript JavaScript frontend Frontend
0 views
Ivan Sagalaev 1 weeks ago

Shoppy

Meet Shoppy ! It's a helper app for my recently revived shopping list , with which I'm hoping to grow the dataset for categories prediction. In fact, even early beta tests have made Shoppy significantly more savvy about alcoholic drinks (the initial data comes from my own shopping, and my entire family happens to be non-drinkers). See if you can confuse it about something it doesn't know! But besides that, there's a few deeper philosophical and technical notes I wanted to share. It's a very, very simple Django app . When I first had the idea to build it I entertained some thoughts about trying some front-end based technology, because, you know, it's an "app"… But then after actually thinking about what it's going to be — a handful of static screens and a couple of forms — I decided to go the familiar way. Now I have a small, view-source 'able HTML app which I'm proud to offer as an example of how you can build something interactive without the layers of modern front-end technology. If you're new here, simplicity is kind of my thing in software engineering. Although it's really hard to convince people to do simple. Trying modern CSS after a long break felt really exciting! Nested blocks, variables, complete control over the box model, new useful units (like ), and niceties like — all of these made my life much simpler. I was especially impressed with which allowed me to make speech and form bubbles flexible. Without it, trying to make text of variable length look nice in a fixed-size bubble caused me a lot of frustration. For layout, I tried flexbox and grid, but they didn't really work for me. It's my own fault, really. You see, ever since I bought into the idea of separating the roles of markup and style, I dislike adding extra structure to markup purely for styling convenience. Markup needs to mean something! And the one thing that grids and flexboxes really like is having straightforward container s with stuff inside of them. But what I have is a which consists of naked , , and , in this order — and that's just not enough structure to say "this goes here, and that goes there". So I ended up with good old absolute positioning and some paddings around Shoppy's avatar. CSS variables really do shine for things like this. And! It was my first time making a responsive layout that looks nice both on mobile and desktop! Tell me if something is broken on your particular setup. The model is a mapping from "terms" to categories . I learned to build such things while working on the Search team at Shutterstock, and their simplicity still amazes me! Here's how it works: You get a search query, like "Honeycrisp apples". You split it into words, stem them and sort them, which gives you — a predictable set of keys independent of morphology and the input order (they're called unigrams). Then you generate all two-word combinations (called bigrams) from this set, which in this case gives you just , and add them to unigrams. And then you look up each of the search terms in the dataset and pick the entry that comes the earliest. In this case, there's only one: . But there's a few non-obvious tricks it lets you do: You don't need to list all the apple varieties, unknown words are simply ignored, and you just recognize any apple as produce. But what of "apple juice"? For that it has an entry , which is deliberately placed before the apples, so it gets picked up instead. In fact, what it means is that "any kind of juice is a drink, regardless of what it's made of". Same goes for "oat milk " (drink), " diced tomatoes" (canned products), etc. Now think of "apple sauce". "Apple" is produce, "sauce" is (usually) a condiment. But "apple sauce" is a snack! This is where bigrams come into play: the bigram entry comes before both and , which resolves the conundrum. (In fact, all of the bigrams must come before all the unigrams, because they're always more specific.) There's some more to it all, and there are downsides, but I won't go any deeper right now. It's 2026, so I can't not talk about it, can I? Generative AI happened to the world right in between of me first coming up with the idea of category prediction and having a chance to actually implement it. And I admit of having thoughts that may be there's no point in building your own model for such a thing now. After all, just ask any LLM "which grocery category is dill weed" and it will tell you… a lot of text with several variants, which you can't really use in a precise manner :-) So of course I went back to my own idea, because it's much, much simpler. And local. And free. And ethical. Luckily, the simpler solution doesn't really lose on feeling magical and intelligent. I've seen people play with the app and really engage with it, and be impressed! One of the testers, when trying to come up with a random grocery item for the first time, said, "There's probably a million of them!" It doesn't matter that my entire model is just around 500 entries, it still feels like it knows much more simply because people overestimate the size of the problem :-) You see, I can process photos, I can do business graphics, and I'm known to have put together a few toolbar icons in my time… but for the life of me I can't draw! And even if I could, I'm particularly hopeless at coming up with what to draw. So I commissioned the graphics from an artist , who also introduced me to the concept of "object shows" and the whole OSC fandom . Not sure I'm joining as a fan yet, but I'm definitely very happy with the original character of Shoppy! Oh, and the background. You get a search query, like "Honeycrisp apples". You split it into words, stem them and sort them, which gives you — a predictable set of keys independent of morphology and the input order (they're called unigrams). Then you generate all two-word combinations (called bigrams) from this set, which in this case gives you just , and add them to unigrams. And then you look up each of the search terms in the dataset and pick the entry that comes the earliest. In this case, there's only one: . You don't need to list all the apple varieties, unknown words are simply ignored, and you just recognize any apple as produce. But what of "apple juice"? For that it has an entry , which is deliberately placed before the apples, so it gets picked up instead. In fact, what it means is that "any kind of juice is a drink, regardless of what it's made of". Same goes for "oat milk " (drink), " diced tomatoes" (canned products), etc. Now think of "apple sauce". "Apple" is produce, "sauce" is (usually) a condiment. But "apple sauce" is a snack! This is where bigrams come into play: the bigram entry comes before both and , which resolves the conundrum. (In fact, all of the bigrams must come before all the unigrams, because they're always more specific.)

web-development Web Development css CSS python Python html HTML
0 views
David Bushell 1 weeks ago

Web whetstones

How do you stay sharp as a web developer and/or designer? I’ll share my advice below. I’m also looking for front-end folk to advise me too. What are your whetstones? That is to say: sources of news and knowledge to level up professionally. Does that metaphor work? We’re sharpening our minds, and I suppose the web too with our minds… are minds the whetstone here? Moving swiftly on, in rough order of preference: People love to declare “RSS is dead” because they’ve chosen the likes of Google to gate-keep their web access. Interesting choice, but RSS remains alive and well. When I discover a new blog and like what I read, I’ll subscribe. There’s a good chance that person will write something useful again one day! Funny how that works. I don’t flood my reader with big sites that exist to generate content. I collect personal blogs that may only post once a year. That’s still plenty of unique insights as the list grows. I won’t share my list because I feel for RSS to work you have to curate it yourself. Shop Talk Show has been number one forever. Syntax remains a decent source if you’re deft with the fast-forward button (it’s a little ‘sloppy’ these days.) Igalia Chats is packed with wisdom. For a Better Web is Bruce Lawson in your ears. Wonders of Web Weaving from James is new and hopefully a regular listen. I’ve unsubscribed from too many podcasts that pivoted to AI servitude which is disheartening. I’m not adverse to such discussion but the level of mindless platitudes and gigglefests about what their wacky chat boxes said ain’t my cup of tea. Mastodon and Bluesky is where I follow folk in the web industry. Socials can be a great whetstone if you manage your follow list carefully. Everyone uses these platforms for different reasons which can be difficult to balance. Personally I stick to shop talk and mute politics for example. I follow individuals and rarely organisations to avoid “brand engagement”. Email newsletters are useful to catch stuff I’ve missed. Many exist in RSS form too. My favourites are typically link dumps with a side of commentary. Current favourites: Sidebar still has the odd gem if I care to sift through the “AI” links. Newsletters are a declining category for me. Perhaps because I keep getting unsubscribed by those with failed tracking pixels. Email costs money to send so I’ll accept my loss. Lobste.rs , Hacker News , Reddit (e.g. web dev , experienced devs , frontend etc). Does dev.to have any humans left? These forums are a good source of links — if you can filter the bot spam and avoid the cesspit of comments. Toxicity spreads and it’s all too easy to get dragged in. Sometimes you just have to let people be wrong on the internet. I’ve heard these still happen! I only leave my house now to scavenge for essentials so I don’t have much to say. Clearleft events are guaranteed value if you’re in the UK. Some conferences have online tickets but I find the in-person socialising to be the main benefit. Everything listed above is (or has) a website. I’m poor at organising and utilising bookmarks. I’ll manually visit bigger blogs like CSS-Tricks and Smashing Magazine once a month to see if anything interests me. I bookmark a handful of YouTube channels like Kevin Powell because I have no Google account to “smash that subscribe button” . YouTube isn’t my thing though. I have an allergic reaction to algorithm driven content. I don’t use Discord but I hear it get promoted often. Are these communities lively or are they a ghost town? That’s my problem with Discord. It’s a blackhole for information; antithetical to an open web! Am I missing out? Not sure I care. For no particular reason I’ll end with this quote from Seth Rogen. “I don’t understand what it’s supposed to do. Every time I see a video on Instagram that’s like, ‘Hollywood is cooked,’ what follows is, like, the most stupid dog shit I’ve ever seen in my life,” he said. “And if your instinct is to use AI and not go through that process, you shouldn’t be a writer, because then you’re not writing.” Seth Rogen Says If “Your Instinct Is to Use AI” to Write Scripts, “You Shouldn’t Be a Writer” - The Hollywood Reporter P.S. no more blog posts until June. I’m due a holiday! Thanks for reading! Follow me on Mastodon and Bluesky . Subscribe to my Blog and Notes or Combined feeds. Frontend Focus Design Systems News

web-development Web Development design Design career Career css CSS
0 views
David Bushell 2 weeks ago

Surveys will continue until diversity improves

The web and tech industry is a veritable sausage party. We don’t need surveys to prove it but we have surveys to prove it . State of surveys have been running for a decade now. Let’s look at the 2025 survey demographics: Yes I think “sausage party” is accurate. Weißwurstfest even. And yes cock jokes are part of the problem. When I worked in London in the early 2010’s every tech meet-up was plaid shirts and IPA frosted moustaches. Larger tech conferences were better. They had a few women attending and occasionally allowed to speak and a better variety of beers. I worked and mingled with a good bunch of lads. Even good lads make cock jokes after a craft beer. Just a joke, innit? When you read accounts like Ana Rodrigues’ it’s easy to think “not my lads” but then you remember the boisterous punchlines, and that one guy… but he was more of a tagalong. Some of us grow up but the industry doesn’t. These days I work remotely and don’t get out much but I get the impression little has changed. Certainly the online bro-culture amplifies the worst traits. Now we have LLMs built by and trained on that culture. Ain’t that wonderful. The State of surveys continue to report alarming numbers. Are they a fair representation of the industry? Do they help or hinder diversity? Miriam Suzanne raised the concern in 2024. These correlations don’t tell us much without knowing how representative the data is. I’m just not sure what I’m looking at, or how it should be read. But it concerns me that browsers use surveys like this as a primary gauge of developer interest – seemingly without asking who’s represented, or who might be missing from the data. What do survey demographics tell us? - Miriam Suzanne As Miriam noted the State of surveys do influence browser vendors. The focus areas for 2026 include several areas identified as top interop issues in the State of HTML and State of CSS surveys. Interop 2026: Continuing to improve the web for developers - Rachel Andrew Yet survey after survey after survey the demographics remain the same. Maybe the web industry is actually dominated by white guys (and now their new chat box companions). Oh and 60–70% of those surveyed report “None” under “Disability Status” so there’s that too. This is all kind of a big problem, obviously. Other humans need to use the web. Their voices need to influence the web platform. Maybe if we actually listened we could support more diverse needs and spend less time fast-tracking bro-tech . So yeah I mock the State of surveys because what are we doing here? Why are we looking at these numbers and concluding: “Wow! I can’t believe Axios is still popular in [current year]!” Lack of diversity is the only relevant takeaway that means anything. I don’t know if these surveys are part of the problem. I know they’re not the solution. But who knows, if we keep asking six times a year maybe diversity will improve? Thanks for reading! Follow me on Mastodon and Bluesky . Subscribe to my Blog and Notes or Combined feeds.

css CSS culture Culture html HTML web-development Web Development
0 views
Manuel Moreale 2 weeks ago

RMF

This week on the People and Blogs series we have an interview with RMF, whose blog can be found at baccyflap.com/prs/blog . Tired of RSS? Read this in your browser or sign up for the newsletter . People and Blogs is supported by the "One a Month" club members. If you enjoy P&B, consider becoming one for as little as 1 dollar a month. My name's rmf. My legal name's not terribly hard to find, but I like to keep it lightly buried just so my 2006 blog isn't the first thing you find when you search for my name. I'm a native of the Netherlands, where I reside. I live in a small city with my partner; she's an archaeologist and I'm a botanist, though I currently teach museum anthropology classes. I went from doing science, to teaching science, to teaching culture. I've never believed in restricting a whole human life to one field of study, so I'm having a blast. My computer skills have always been self-taught. While I was in middle school I fiddled with Microsoft Paint and from there on I got to grips with ever more advanced graphic software (currently GIMP and Inkscape). In high school I liked to make videos with my friends which I edited in Windows Movie Maker, which lead to an ongoing on-and-off hobby of video editing (in Kdenlive). In 2002, I set up a WYSIWYG website which lead to me learning HTML and later CSS and, later still, PHP. Right now I do some graphics stuff for my job in education, such as making instruction sheets, posters and some other small-time stuff, but really, pretty much all my computing is done in my free time, for fun. I think that's a blessing - I don't have to work with anything I don't want to work with and do everything I do for the love of the game. Beside that I make soap which is part hobby, part side job. I enjoy tinkering with technology, so I have lots of esoteric hifi equipment, some old games consoles, old calculators... if it can be tinkered with, I like it. I enjoy writing prose and poetry and have recently been getting into fermenting and pickling, though I am subordinate to my partner in that. She's the head of pickling and fermenting, I take care of the old electronics; she draws and paints, I write; and then at the end of the day, we cook together. I started my website in 2002 and by 2003 I had a little update box to briefly communicate whatever I was doing with the site. That update box turned into a shoutbox of my random thoughts and as those got a bit longer and rantier every time, in October 2005 I turned it into a blog. Blogging was the thing to do at the time and so, at age sixteen, I figured I had enough to say to warrant a stab at the practice. It was all coded by hand: no CMS or JavaScript, just handwritten HTML with the appearance of a blog. It was all over the shop, subjectwise. A fair amount of it had to do with palaeontology and/or me being an epic atheist - ups and downs. It was simply named 'blog' and it changed over the years with the design of the site but all in all, it was very simple. No RSS, no comments, just static HTML pages updated manually. The surprising thing to me is that I had an audience - I got somewhat regular emails about my posts. I blogged until 2009. I did that classic thing of writing fewer and fewer posts and finally announcing a newer, better blog hosted at Blogger. I wrote a grand total of 4 posts for it, stopped for a year, and finally took it down. I lost interest and so, it petered out. Cut to 2026, I'm reading a few more blogs than I had been for the past several years and I start to get the blogging bug again. Or perhaps the bug was dormant and now reawakening. I'd been considering it for a while but specifically, funnily enough, after reading your article about stopping the People & Blogs series, I got inspired to pick up the pen again. Over the last decade I've written on and off for a couple of magazines and I had a regular column in a local newspaper for a while. I think my intrusive blogging thoughts started when that column went away - I like to write, it's something of a compulsive thing, and while the newspaper let me write practically whatever I wanted, it still had some constraints such as length, a certain form, and at the end of the day, some amount of harmlessness. It had to be a column - it could make the readers think, but not too much or about controversial things. So the blog suddenly popped into my head as a perfect fit. Whatever topic I want, whatever length, whatever form. And so in 2026, I picked up blogging again. I did write a CMS and some code for an RSS feed - other than that, I tried to keep the form of the blog as close to the original as possible. And again, to my surprise, there are people reading this blog. I'm clueless as to how they're finding it, buried in a subsection of my site as it is, but I'm getting emails again. A grand total of two people suggested I give the blog a name, which I did. It's now called 'bakelite & roses', a name I explain at baccyflap.com/prs/blog/2026/?m=03#1773065697 . My inspiration comes from whatever happens to me. So far I've written about umbrellas, tamagotchi, deadly accidents, CD collections and some other stuff - that's the most liberating thing to me, getting to write whatever the hell I want. I like it to be interesting, to have some novel (to me) observations in it, but other than that, it's just whatever occurs to me. It's comparable to the columns I used to write in that sense - I write them quick, maybe give them a quick read later on, and then just post. I'll often read them to my partner who will usually describe them as 'cute', which is good enough for me. I write wherever. Back when I had deadlines I'd slack off right until the final hour and then just use whatever's to hand. I've written a few on my phone but I suppose I mostly write on my laptop, just because it's faster. I'll do it at home, on the go, at work, wherever inspiration strikes. My site's hosted on a buddy's server. He runs a small IT company so he takes care of the domain too - it's an old arrangement and we're sticking with it. I pay him, he pays the bills. The blog itself is written in PHP - when I restarted in 2026 I finally wrote a backend, still pretty primitive but it makes my life a bit easier and crucially, it enabled me to provide an RSS feed. I type a post into a dirt simple little CMS and hit 'post' to add the post to a JSON file, which the RSS feed also pulls from. I may provide the source code at some point, when it's not as hokey as it is now. Well, I started it in January, which is pretty close to today, so I think I'm all good. I guess, looking back at my old posts, I do sometimes cringe at them. I added a disclaimer to those posts, just to distance myself from the bad ones. But I didn't remove them - they still reflect who I was at the time and in some weird way, who I am now. I wouldn't be honouring teen me by removing any of it and looking back I guess I could say I'd wish I'd written better stuff... but you know what, that's what I wanted to write at the time and as confident as I was of my own intellect at the time, so I am now about the public's capacity to contextualise these posts. There are wonderful, thoughtful posts in there, but also some dubious stuff, and some garbage. So short answer: I think it's perfect, wouldn't change a thing. I pay my buddy €100 a year to cover his costs and so he can write me a bill which is good for his company. It generates precisely nothing, which is how I like it. People can do whatever they want with their blogs but for me, it's just a bit of fun in my free time. No Patreons and Ko-fis for me - I know everyone wants to turn every aspect of their lives into a revenue stream these days, but for me, it's just a way to reach out. Of all blogs, the one I've been reading for the longest (22 years!) is Pharyngula . Out of all the 'new atheist' types, PZ Myers is one of the few who did not turn out to be a dirtbag. He stuck to his progressive guns and has as sharp a pen as ever. For the sheer dedication of the author it's worth a read, whether the range of topics is up your street or not. I'm currently working on a podcast, a bit of a personal project that has been taking more of my time than I thought it would. Currently in the outline stage, it'll take some time before I can finally start recording. It is driving home to me that making a podcast is, at the best of times, an effortless thing that very few people know how to do well. I honestly don't like most podcasts but one I've been enjoying, one of those podcasts that springs up on you and just keeps on giving, is Bread & Bananas , a podcast about Kampung Gelam, an old neighbourhood of Singapore, made and presented by three inhabitants of said neighbourhood. And if you're wondering why on Earth this would be a topic of interest to anyone outside that neighbourhood... well, just give it a listen. It's chill, it's thoughtful, it'll surprise you. Six episodes so far, a new one every couple of months. Now that you're done reading the interview, go check the blog and subscribe to the RSS feed . If you're looking for more content, go read one of the previous 141 interviews . People and Blogs is possible because kind people support it.

html HTML culture Culture writing Writing javascript JavaScript css CSS
0 views
Maurycy 2 weeks ago

Search engine results are truly terrible

A few months ago, I had the displeasure of trying to use the modern web without an ad-blocker. Even though it's is ubiquitous among computer nerds, ad blocking is quite rare even in other technical fields. This got me wondering how search engines perform without all the tricks people do to get better results. As a test, I wrote a few queries for... common software: ... obscure, but easy to find information: What is the lowest K-alpha emission energy of Molybdenum? ... and few normal(-ish) questions: What photodiode circuit should I use? How do airplane wings work? Why are brushed motors most efficient at high speeds? Asking a search engine questions is almost never the best way to find good information, but it's what I've seen a lot of people do. To replicate the experience of a normie/victim I made sure to include the AI summary, sponsored results and info boxes: TLDR ; No tool produced consistently good results. This isn't a matter of my standards being to high: good results for all these queries exist on the web, but they all failed to find them. They had a real problem with returning vaugely related blogspam. Having a good result in the top 3 was fifty-fifty. For the ad blocker and molybdenum, ChatGPT was able to produce a good answer, but it's responses were deeply flawed or outright incorrect for the other three questions... largely because it was rephrasing the same spam that tripped up all the others. Marginalia generally did very poorly, but it was the only one to perform decently on the motor question: All the others returned surface-level AI slop, while it found a nice writeup on motors that answered the question. Grading scale: Good : First result is correct and not spam. For the questions, I'm not looking for a text book: a single sentence explanation is perfectly fine provided that it explains the right thing and holds water. Ok : Some spam/incorrect/incomplete/irrelevant pages, but a good result can be found in the first three links. Just to be clear, this is not a good outcome: it means the top result was wrong or spam. Bad : Same as ok, but using the first five links. Crap : First five results are all wrong, spam or spammy scams. Five might not sound like a lot, but given the amount of junk in a modern search engine interface, it's really quite rare for people to scroll pass those first five results. ChatGPT isn't a search engine , so I ranked it on correctness of the answer: Good = Correct and well explained. Ok = Correct, but not very good. Bad = Incomplete. Crap = Wrong or incomplete to the point of being harmful. Detailed results: ad blocker For ad blockers, I'll only accept uBlock Origin or DNS based solutions. In order to work, an ad-blocking extension needs a huge amount of access to your browser: it's not a good idea to take chances. uBlock Origin is free, open source (so you can see what it's doing) and very effective: Paying a difficult to cancel subscription for a inferior product is not a good idea. A lot of those shady extensions also have identical pricing plans, which make me think they are slop-ware pumped out by one guy. I don't have proof that they are scams in the strict sense, but it is rather suspicious. " Ad block - [...] - Chrome web store ": Charges a $40/year subscription, allows "non-intrusive" advertising and collects data. " AdBlock Plus ": Same deal. Infobox linking to https://getadblock[.]com/ : The usual. " Get AdBlock ": ditto. " uBlock Origin ": Finally, a good result. Just in time to save google from the "crap" tier, but I doubt it's early enough to stop someone from being scammed. Verdict: bad. " Adblock Plus ": Same as google's #2. Infobox with " https://www.windowscentral[.]com/how-block-ads-and-trackers-xbox ": an ad-filled blog-spam site. It does provide reasonable instructions, but good luck reading it without an ad blocker. A second infobox linking to " Adblock vs Adblock Plus - PC Guide ": an ad-laden blog-spam comparing two sub-par extensions. (both allow "acceptable ads") " uBlock Origin ": Good, but why is it so far down? " AdBlock — block ads across the web ": The usual scammy adblocker extension. Very similar to google's top four results. Verdict: bad. " Adblock Plus " same as google's #2 " Ad block - [...] - Chrome web store ": same as google's #1 " Adblock Plus ": Yet another shady adblocker with a $40/year subscription " The Ethical Ad Blocker " (infobox): A blog post describing an ad-blocker that blocks access to any websites that have ads, which prevents any accusations of piracy. Funny and probably real, but not what users are looking for. " AdGuard Ad blocker ": Yet another of those nearly identical sketchy adblockers. Kagi is the first search engine to not include uBlock in the first five results, but it does link me to someones's rather cool blog... however, I still had to scroll past quite a bit of junk to find it. Verdict: crap. DuckDuckGo : " Adblock Plus ": same as google #2. " AdBlock — block ads across the web ": same as google #1 " uBlock Origin ": Finally, in the top 3! " getadblock[.]com ": More junk. " AdBlock — block ads across the web ": Same as #2, but on Microsoft's extension store instead of googles. Verdict: ok. Marginalia : " Ghostery Ad Blocker ": Yet another blocker that doesn't actually block ads, and has been caught selling data to advertisers. " Ad blockers are not allowed on YouTube " A blog post with a half-baked list of ways to get around youtube's ad-blocker detection. Indirectly recommends uBlock, but also a lot of stuff that won't work. Not great. " Vivaldi ": Chrome with a built in adblocker. Not a scam, but you don't need to install a new browser to block ads. " EasyList is in trouble and so are many ad blockers ": Corporate blog post about hosting problems. " Ad Blockers - Contains Moderate Peril ": A blog post about ad-blockers, recommends "AdBlocker Ultimate". Not a spam, but not the best recommendation. Verdict: Crap. Marginalia's results are quite different from all the other search engines: It's pulled out two real blog posts alongside the usual spam. (Note: I modified the prompt to "Recomend me an ad blocker.") The LLM recommended [1] uBlock Origin Lite, which is a variant of uBlock for modern chrome, by the same author. The Lite version is technically more limited than the original, but still works works very well. It also suggested [2] "AdGuard AdBlocker", but only as a fallback. Verdict: Good. ... Molybdenum : "What is the lowest K-alpha emission energy of Molybdenum?" Despite this being a straightforward table lookup, all the LLM-summaries got it wrong: The lowest energy line is Kα 2 (17,374 eV), not Kα 1 (17,479 eV). The reason for this is that X-ray lines were first observed using diffraction, and measured by wavelength, which is inversely proportional to energy: Kα 1 is has a shorter wavelength, but higher energy. Incorrect AI overview citing a paper. The paper lists both K-alpha lines, but the LLM used the wrong one. Table from Lawrence Berkeley National Lab : lists the correct value. Another table , this time from an equipment manufacturer. Lists the correct value. A paper characterizing the X-ray fluorescence spectrum of molybdenum. "Characteristic X-ray - Wikipedia": an overview of X-ray emission lines, but it does not give any specific energy values. Not a relevant result. Verdict: ok. Wrong AI overview citing google's #2: It made the same mistake with Kα 2 and Kα 1 . " Molybdenum ": A nice little page from LBL listing some technical properties of molybdenum. This is the most relevant result so far. " 12.1: Fundamental Principles ": an article that happens to use molybdenum as an example, but lists wavelengths instead of photon energy. " Experimental K-alpha x ray energies ": a table of emission lines. The same paper as google's #4. Verdict: ok. A very wrong AI overview giving "0.709 eV": off by four orders of magnitude! I suspect it took the number from Bing's #3, but instead of actually converting the wavelengths to energy, it just slapped an "eV" on. Same table as google's #2. A good result. Same as google's #3. A good result. A page about the theoretical calculation of X-ray lines. Does not provide an energy for molybdenum. A list of chemical properties of molybdenum. Does not mention X-rays. This nicely demonstrates the problem with LLMs: A chatbox usually gets things (mostly) right, but will occasionally be very, very wrong. Verdict: ok. DuckDuckGo : Incorrect AI overview referencing a NIST publication . Same as bing #2. A good result. Same as bing #3: not relevant to the question. Same as google #4. A good result. Some data table : a perfectly fine result. No surprises here: It's a few good sources and a slightly wrong LLM summary. Verdict: ok. Marginalia : "Plasma catalytic non-oxidative conversion of methane into hydrogen and light hydrocarbons": A preprint paper that used X-ray equipment and mentioned molybdenum in passing. "XRF Technologies for Measuring Trace Elements in Soil and Sediment": Similar to #1. A paper that used X-ray equipment and mentions molybdenum, but does not answer the question. Marginalia doesn't try to be a comprehensive index, so it's unsurprising that it did badly on this one: only two results were returned, and none of them included the requested number. Verdict: crap. Chat gave 17.37 keV, which is the correct value. Good job on being the only LLM to answer a simple question correctly. ... Photodiodes : "What photodiode circuit should I use?" Photodiodes are excellent light sensors, but their output is a small and difficult to measure current. Generally, the best way to fix this is with a transimpedance amplifier: an op-amp circuit that converts the current into an output voltage while keeping the sensor's bias constant. This provides a fast and exceedingly linear response. An ideal result would also mention techniques like bootstrapping (to increase bandwidth of large sensors) and logarithmic converters (to measure a wide range of light levels). AI overview citing #4, recommending a transimpedance amplifier, but it provides a schematic of a different configuration. "Photodiode – A Beginner’s Guide": A blog-style website with circuits that don't work, are missing important details and have poor explanations. "Photodiode Basics": Ad-ridden page which does include the rough layout of a transimpedance circuit, but with no mention of feedback capacitors. These are often needed to prevent oscillation. "What are the pros and cons for the various photodiode circuit arrangements?": A forum thread that mentions transimpedance amplifiers, but doesn't give any specifics. "Photodiode Component Basics [...] - Youtube": Video with a demonstration of a photodiode working, but without any amplification or readout circuits. Verdict: Crap. AI overview citing #2, but it recommends a bad configuration with a resistor in parallel with the diode. The output is non-linear, high-Z and, difficult to use. "Photodiode – A Beginner’s Guide": Same as google #2. A bad result. "Photo Diode (Symbol, [...] Pros & Cons) Explained - Youtube": Another super generic video. "Fire Detection Circuit Using Photodiode": Content farm video with no schematic and no explanation. "Photodiode Construction and Working - Youtube": Another extremely generic explanation video. Does not include any circuits or even discuss the problem. Verdict: Crap. "Photodiode – A Beginner’s Guide": Same bad article as google's #2. "Photodiode Basics": The same as google's #3: incomplete circuits on an ad-ridden page. "What are the pros and cons for the various photodiode circuit arrangements?": Same as google #4, an unhelpful forum thread. "PHOTODIODE OPERATION MODES AND CIRCUITS": Provides an example of a transimpedance amplifier, but has no example values or instructions on selecting them. " Technical notes / Si Photodiodes ": A PDF from a photodiode manufacturer, which provides practical circuits and a description of photodiode properties. This is the first results that provides enough information to actually build a working sensor. Verdict: Bad. DuckDuckGo : "Photodiode – A Beginner’s Guide": The same as google's #2, meh explanations and some of the circuits don't work. "Photodiode Basics": Same as google's #3: Incomplete circuits on an ad-ridden page. "PHOTODIODE OPERATION MODES AND CIRCUITS": Same as kagi #4. Not good enough to build a working circuit. "A Practical Guide to Photodiode Amplifier Circuit Design [...]": A marketing piece for a equipment manufacturer. Unlike the Hamamatsu appnote, this doesn't have any useful information. " Technical notes / Si Photodiodes ": Same application note as Kagi #5. A good result. Verdict: Bad. Marginalia : "PIN Photodiode gamma detection amplifier circuit - rectangular wave output": Forum post with a broken circuit. Not something you want to copy. "Circuit Diagram": An unrelated forum post about an XKCD comic. "Short Circuit Limiter": Unrelated blog post. "NES Cartridge Chaos: [...]": Unrelated blog post. "How can i increase the range of values that a light sensor gives?" Forum post showing an ok configuration, but with no explanation or information on how values should be selected. Verdict: Crap. Chat gave a very wall of text boiling down to "use a transimpedance amplifier", but with no explanation of what that is or why it's good for light detection. It also drew a nonsensical "schematic" which would be of no use to anyone trying to build one circuit: Hidden in the "citations", it did link to a reference designs from texas-instruments... and an AI generated blog-spam post. I'll bin it under "Bad". ... Wings : "How do airplane wings work?" The simplest reasonably correct answer is that wings are angled to push down on the air, which lifts the plane up. The fluid mechanics happening around the wing are very complicated, but I'll accept a good one sentence explanation. Of course, more rigorous and detailed explanations are fine, but they must actually be rigorous: many explanations add complexity in a way that results in more gaps. Also, there's a very common wrong answer (equal-transit) which asserts that the air takes the same amount of time to travel over the top and bottom of a wing. Therefore, since the top surface is curved, the air must move faster. By Bernoulli's principle, a higher flow velocity creates low pressure, and that low pressure region that pulls the wing up. This is wrong for multiple reasons: It violates the conservation of momentum, because the wing doesn't impart any momentum to the air. Obviously, fans work. Airplanes can fly upside down... which shouldn't be possible if lift is some special property of the wing's shape. Paper or balsa-wood planes with flat airfoils work fine. Other explanations go "something something Bernoulli", which is not technically wrong, but is deeply incomplete: Bernoulli's principle does come into play around a wing, but using it as an explanation requires showing that air speeds up as it travels over the top surface — something which can only happen because of a pre-existing low pressure region. These explanations does not hold water on it's own. Would a proper analysis of the airflow over a wing be a good result? Of course. Is it enough to point at a tiny fragment of that and handwave it as an explanation? No. I'll consider this as a bad result, because it's neither a good explanation, nor a useful model: Wrong models can useful if the truth is complicated, but this is quite the opposite. "Planes stay up because they push the air down" is simple, correct and builds intution. For example, it predicts that the pressure on the ground should increase as a plane flies over it... and it does. "Planes stay up because of Bernoulli" doesn't explain anything if you think about it for two seconds. All it does is bring in some math that isn't relevent until you read the rest of the textbook. AI summary citing a TikTok video which contains the "something something Bernoulli" argument. Not entirely wrong, but needlessly complicated and incomplete. How wings really work : A professor debunking "equal transit" with an experiment... nice, but a debunk is not an explanation. " How Airplane Wings REALLY Generate Lift ": A youtube video with the correct explanation. A good result. "ELI5: how does a wing work? - Reddit": Reddit thread, most comments are correct, but many are repeating the incorrect explanation. " How Wings Work ": A page with a mostly correct animation, but no explanation of what's happening. Verdict: Ok. AI summary stating the incorrect equal-transit explanation. Seems to be referring an an old Glenn Research page with the incomplete explanation. " Airplanes ": A correct article which calls out the incorrect bernoulli argument. A good result. The same correct video from Google #3. "How Airplanes Work: A Simple Explanation for Beginners": A youtube video giving the incomplete explanation. "How Wings Work": Same as google's #5. Verdict: Ok "How Does A Wing Work? - Science Through Time": AI slop video with an bad answer. I can't tell if this it is the "equal transit" model or the incomplete one, because it doesn't include anything resembling detail or logic. " How Does A Wing Actually Work? ": A Veritasium video on youtube, with the correct explanation. A good result. " How airplane wings work ": A cool video showing airflow over a wing, during normal flight and a stall... but it's not an explanation. " How Does A Plane Wing Work? ": Correct explanation and demo. "How do airplane wings work?": Explains the structural components of a wing, but not why it's able to create lift. Verdict: Ok "Learn How Airplanes Work": A page that lists the parts of a plane, and gives the incorrect "equal-transit" explanation. How planes work : An article with a brief, but correct explanation. Dynamics of Flight An old article from Glen Research with the "something something Bernoulli" explanation. "How airplane wings actually work - Today Plane crash": AI Slop article, wrong answer. "How wings work": an animation of airflow, but does not have an explanation Verdict: Ok "How do I explain what makes an airplane fly to a non-technical person?": Forum thread of people asking the same question. A few answers are correct, but a lot aren't. I'll bin it as a bad result. "How do the Americas Cup Yachts sails work?": Forum thread about sailing. "How do I keep my futuristic racing hovercraft from becoming airplanes?": Forum thread about fantasy hovercraft. "How is the fatigue life of an airplane wing flexing during turbulence determined? How do they keep track of it?" Forum thread on accelerated life testing and maintenance of aircraft. "How do you scale a svg img to fit container?" A CSS question that just happens be about an image of an airplane. Verdict: Crap. Says that wings create lift, and then states that this is because the shape speeds up the airflow faster over the top surface (why?) therefore, by Bernoulli’s principle, the pressure is lower on the top surface. This is the second category of bad explanations. Verdict: Crap ... Motors : "Why are brushed motors most efficient at high speeds?" Electric motors work by passing a current through coils, which creates a magnetic field. These magnetic field pushes against permanent magnets to create torque. To create continuous rotation, the direction of current and field must be constantly reversed to prevent the motor from locking up after half a turn. This is either done using mechanical switches (brushed motors), transistors (BLDC/stepper), or by running the device from AC power (synchronous motors). Either way, the the strength the magnetic field inside a motor determines it's torque, but the mechanical power is torque times rotational speed. However, resistive losses in the coil windings don't care about how fast the motor turns and are proportional to current. Therefore, at low speeds, more losses are incurred during each rotation, and the motor is less efficient. This is why motors are almost always geared down : Even if they can produce enough torque, it's a bad idea to run them anywhere except right below their unloaded speed. (efficency aside, the heat produced can damage them) Incorrect AI summary citing the AI slop in #2. "Comparing Energy Efficiency of Brushless vs. Brushed Motors": Slop blog that claims the high speeds reduce losses in the motor's commutator, which simply isn't true. Commutator losses (arcing) generally increase with rotational speed. "Brushless Vs Brushed DC Motors: When and Why to Choose One Over the Other": AI slop advert. Does not answer the question. "What’s the difference between a brushed and brushless motor, and is one better than the other?": Reddit thread that states that brushed motors are less efficient, but gives no explanation. (also, that's not what the question asked...) "The Advantages of Brushed Motors: Powering the World with Efficiency and Simplicity - Magmotor": AI slop, doesn't answer the question. "Brushed vs Brushless Motor: Key Differences, Performance, and How to Choose": AI slop, doesn't answer question. This is the first time I got 5 obvious AI slop results. It's not a good sign for the rest... Verdict: Crap. AI summary citing #2. "Brushed vs Brushless: Unraveling the Mystery of Motor Efficiency": AI slop that doesn't answer the question. It also states that motors produce more power at high speeds, which is true, but doesn't explain the question. At any given voltage, a motor has a torque at which it stalls and a maximum speed that's reached under no load. As you would expect, the motor makes the most power at roughly the half-way point between these two... but the efficiency is best at the extreme end of the speed range. "Comparing the Efficiency of Different Electric Motor Types": AI slop, doesn't answer the question. "Are Brushed DC Motors Still Relevant? Efficiency, Smart Control, and New Applications Explained": More AI slop. Doesn't answer the question. "Brushed vs Brushless Motors: Comparing Efficiency, Lifespan, and Performance Metrics": AI Slop. Doesn't answer question. Verdict: Crap. DuckDuckGo : AI summary citing "Brushed Motors vs. Brushless Motors": Neither answer the question. "Brushed vs Brushless: Unraveling the Mystery of Motor Efficiency": AI slop. "Comparing the Efficiency of Different Electric Motor Types": AI slop. "Brushed vs Brushless Motors: Comparing Efficiency, Lifespan, and Performance Metrics": AI slop. "Are Brushed DC Motors Still Relevant? Efficiency, Smart Control, and New Applications Explained": AI slop. Verdict: Crap. AI summary citing "Brushed DC Motor Theory": A page on a wiki run by Northwestern University. Talks about efficiency being zero under stall — which it is — but that's not what I asked about. "Brushless Vs Brushed DC Motors: When and Why to Choose One Over the Other": Probably human written, but doesn't answer the question, instead comparing two motor designs. (The efficiency curve is similar for both.) "Brushed vs Brushless: Unraveling the Mystery of Motor Efficiency": AI slop. "What’s the difference between a brushed and brushless motor, and is one better than the other?": Forum thread that isn't about the question and doesn't answer it. "Comparing the Efficiency of Different Electric Motor Types": AI Slop. Verdict: Crap. Marginalia : "Why does a Tesla car use an AC motor instead of a DC one?": A Forum thread that doesn't answer the question. Hobby CNC machining and resin casting : Lcamtuf is really good... but this isn't a page about electronics. It does mention motors, but gives no explanation for why there efficiency curve peaks at very high RPMs. CSC 297 Robot Construction: Driving Motors : A long and detailed website, that actually answers the question! The first actually relevant result. "Stepper motor - Wikipedia": Wiki page on a different type of motor. "Brushless vs. Brushed Motors [New for 2026]": AI slop. Verdict: Ok A win for marginalia! Only a single AI slop page was returned, and two of the results were detailed write-ups on motors and robotics: not LLM generated, not surface level blogspam, but actual resources that you can use for learning. Age is best indicator of a quality website: If it was written decades ago, and it's still up, someone decided it was worth keeping around for all these years. While the #3 result doesn't have a date, but it uses handwritten HTML which is quite rare nowadays. I'd guess it was written somewhere between 1990 and 2010... and this one's has been maintained as late as 2017, so they take some pride in what they wrote. This is what we loose when google promotes new content: well written pages by real people who actually care instead of a 5 minute rundown for hackernews. Chat provided a generally correct explanation, but it seems to have confused the questions with: "why do motors draw less current when when spinning quickly?". After some waffling about Back-EMF, it handwave that because the current decreased, the losses decreased — ok — and efficiency must be better... but that simply isn't true: Efficiency is the ratio of output power and input power. Under no-load conditions, the motor is drawing the minimum possible current, but it's also not producing any usable mechanical power, so it's efficiency is zero. Not only does the LLM's logic not hold water, it's much more complicated then the truth. Verdict: Crap. What is the lowest K-alpha emission energy of Molybdenum? What photodiode circuit should I use? How do airplane wings work? Why are brushed motors most efficient at high speeds? https://www.cs.rochester.edu/users/faculty/nelson/courses/csc_robocon/robot_manual/motor_drivers.html : That write up. " Ad block - [...] - Chrome web store ": Charges a $40/year subscription, allows "non-intrusive" advertising and collects data. " AdBlock Plus ": Same deal. Infobox linking to https://getadblock[.]com/ : The usual. " Get AdBlock ": ditto. " uBlock Origin ": Finally, a good result. Just in time to save google from the "crap" tier, but I doubt it's early enough to stop someone from being scammed. " Adblock Plus ": Same as google's #2. Infobox with " https://www.windowscentral[.]com/how-block-ads-and-trackers-xbox ": an ad-filled blog-spam site. It does provide reasonable instructions, but good luck reading it without an ad blocker. A second infobox linking to " Adblock vs Adblock Plus - PC Guide ": an ad-laden blog-spam comparing two sub-par extensions. (both allow "acceptable ads") " uBlock Origin ": Good, but why is it so far down? " AdBlock — block ads across the web ": The usual scammy adblocker extension. Very similar to google's top four results. " Adblock Plus " same as google's #2 " Ad block - [...] - Chrome web store ": same as google's #1 " Adblock Plus ": Yet another shady adblocker with a $40/year subscription " The Ethical Ad Blocker " (infobox): A blog post describing an ad-blocker that blocks access to any websites that have ads, which prevents any accusations of piracy. Funny and probably real, but not what users are looking for. " AdGuard Ad blocker ": Yet another of those nearly identical sketchy adblockers. " Adblock Plus ": same as google #2. " AdBlock — block ads across the web ": same as google #1 " uBlock Origin ": Finally, in the top 3! " getadblock[.]com ": More junk. " AdBlock — block ads across the web ": Same as #2, but on Microsoft's extension store instead of googles. " Ghostery Ad Blocker ": Yet another blocker that doesn't actually block ads, and has been caught selling data to advertisers. " Ad blockers are not allowed on YouTube " A blog post with a half-baked list of ways to get around youtube's ad-blocker detection. Indirectly recommends uBlock, but also a lot of stuff that won't work. Not great. " Vivaldi ": Chrome with a built in adblocker. Not a scam, but you don't need to install a new browser to block ads. " EasyList is in trouble and so are many ad blockers ": Corporate blog post about hosting problems. " Ad Blockers - Contains Moderate Peril ": A blog post about ad-blockers, recommends "AdBlocker Ultimate". Not a spam, but not the best recommendation. Incorrect AI overview citing a paper. The paper lists both K-alpha lines, but the LLM used the wrong one. Table from Lawrence Berkeley National Lab : lists the correct value. Another table , this time from an equipment manufacturer. Lists the correct value. A paper characterizing the X-ray fluorescence spectrum of molybdenum. "Characteristic X-ray - Wikipedia": an overview of X-ray emission lines, but it does not give any specific energy values. Not a relevant result. Wrong AI overview citing google's #2: It made the same mistake with Kα 2 and Kα 1 . " Molybdenum ": A nice little page from LBL listing some technical properties of molybdenum. This is the most relevant result so far. " 12.1: Fundamental Principles ": an article that happens to use molybdenum as an example, but lists wavelengths instead of photon energy. " Experimental K-alpha x ray energies ": a table of emission lines. The same paper as google's #4. A very wrong AI overview giving "0.709 eV": off by four orders of magnitude! I suspect it took the number from Bing's #3, but instead of actually converting the wavelengths to energy, it just slapped an "eV" on. Same table as google's #2. A good result. Same as google's #3. A good result. A page about the theoretical calculation of X-ray lines. Does not provide an energy for molybdenum. A list of chemical properties of molybdenum. Does not mention X-rays. Incorrect AI overview referencing a NIST publication . Same as bing #2. A good result. Same as bing #3: not relevant to the question. Same as google #4. A good result. Some data table : a perfectly fine result. No surprises here: It's a few good sources and a slightly wrong LLM summary. Verdict: ok. Marginalia : "Plasma catalytic non-oxidative conversion of methane into hydrogen and light hydrocarbons": A preprint paper that used X-ray equipment and mentioned molybdenum in passing. "XRF Technologies for Measuring Trace Elements in Soil and Sediment": Similar to #1. A paper that used X-ray equipment and mentions molybdenum, but does not answer the question. lcamtuf on Photodiodes AI overview citing #4, recommending a transimpedance amplifier, but it provides a schematic of a different configuration. "Photodiode – A Beginner’s Guide": A blog-style website with circuits that don't work, are missing important details and have poor explanations. "Photodiode Basics": Ad-ridden page which does include the rough layout of a transimpedance circuit, but with no mention of feedback capacitors. These are often needed to prevent oscillation. "What are the pros and cons for the various photodiode circuit arrangements?": A forum thread that mentions transimpedance amplifiers, but doesn't give any specifics. "Photodiode Component Basics [...] - Youtube": Video with a demonstration of a photodiode working, but without any amplification or readout circuits. AI overview citing #2, but it recommends a bad configuration with a resistor in parallel with the diode. The output is non-linear, high-Z and, difficult to use. "Photodiode – A Beginner’s Guide": Same as google #2. A bad result. "Photo Diode (Symbol, [...] Pros & Cons) Explained - Youtube": Another super generic video. "Fire Detection Circuit Using Photodiode": Content farm video with no schematic and no explanation. "Photodiode Construction and Working - Youtube": Another extremely generic explanation video. Does not include any circuits or even discuss the problem. "Photodiode – A Beginner’s Guide": Same bad article as google's #2. "Photodiode Basics": The same as google's #3: incomplete circuits on an ad-ridden page. "What are the pros and cons for the various photodiode circuit arrangements?": Same as google #4, an unhelpful forum thread. "PHOTODIODE OPERATION MODES AND CIRCUITS": Provides an example of a transimpedance amplifier, but has no example values or instructions on selecting them. " Technical notes / Si Photodiodes ": A PDF from a photodiode manufacturer, which provides practical circuits and a description of photodiode properties. This is the first results that provides enough information to actually build a working sensor. "Photodiode – A Beginner’s Guide": The same as google's #2, meh explanations and some of the circuits don't work. "Photodiode Basics": Same as google's #3: Incomplete circuits on an ad-ridden page. "PHOTODIODE OPERATION MODES AND CIRCUITS": Same as kagi #4. Not good enough to build a working circuit. "A Practical Guide to Photodiode Amplifier Circuit Design [...]": A marketing piece for a equipment manufacturer. Unlike the Hamamatsu appnote, this doesn't have any useful information. " Technical notes / Si Photodiodes ": Same application note as Kagi #5. A good result. "PIN Photodiode gamma detection amplifier circuit - rectangular wave output": Forum post with a broken circuit. Not something you want to copy. "Circuit Diagram": An unrelated forum post about an XKCD comic. "Short Circuit Limiter": Unrelated blog post. "NES Cartridge Chaos: [...]": Unrelated blog post. "How can i increase the range of values that a light sensor gives?" Forum post showing an ok configuration, but with no explanation or information on how values should be selected. It violates the conservation of momentum, because the wing doesn't impart any momentum to the air. Obviously, fans work. Airplanes can fly upside down... which shouldn't be possible if lift is some special property of the wing's shape. Paper or balsa-wood planes with flat airfoils work fine. https://www.youtube.com/watch?v=hnvtstq3ztI : Weighing an airplane as it's flying. AI summary citing a TikTok video which contains the "something something Bernoulli" argument. Not entirely wrong, but needlessly complicated and incomplete. How wings really work : A professor debunking "equal transit" with an experiment... nice, but a debunk is not an explanation. " How Airplane Wings REALLY Generate Lift ": A youtube video with the correct explanation. A good result. "ELI5: how does a wing work? - Reddit": Reddit thread, most comments are correct, but many are repeating the incorrect explanation. " How Wings Work ": A page with a mostly correct animation, but no explanation of what's happening. AI summary stating the incorrect equal-transit explanation. Seems to be referring an an old Glenn Research page with the incomplete explanation. " Airplanes ": A correct article which calls out the incorrect bernoulli argument. A good result. The same correct video from Google #3. "How Airplanes Work: A Simple Explanation for Beginners": A youtube video giving the incomplete explanation. "How Wings Work": Same as google's #5. "How Does A Wing Work? - Science Through Time": AI slop video with an bad answer. I can't tell if this it is the "equal transit" model or the incomplete one, because it doesn't include anything resembling detail or logic. " How Does A Wing Actually Work? ": A Veritasium video on youtube, with the correct explanation. A good result. " How airplane wings work ": A cool video showing airflow over a wing, during normal flight and a stall... but it's not an explanation. " How Does A Plane Wing Work? ": Correct explanation and demo. "How do airplane wings work?": Explains the structural components of a wing, but not why it's able to create lift. "Learn How Airplanes Work": A page that lists the parts of a plane, and gives the incorrect "equal-transit" explanation. How planes work : An article with a brief, but correct explanation. Dynamics of Flight An old article from Glen Research with the "something something Bernoulli" explanation. "How airplane wings actually work - Today Plane crash": AI Slop article, wrong answer. "How wings work": an animation of airflow, but does not have an explanation "How do I explain what makes an airplane fly to a non-technical person?": Forum thread of people asking the same question. A few answers are correct, but a lot aren't. I'll bin it as a bad result. "How do the Americas Cup Yachts sails work?": Forum thread about sailing. "How do I keep my futuristic racing hovercraft from becoming airplanes?": Forum thread about fantasy hovercraft. "How is the fatigue life of an airplane wing flexing during turbulence determined? How do they keep track of it?" Forum thread on accelerated life testing and maintenance of aircraft. "How do you scale a svg img to fit container?" A CSS question that just happens be about an image of an airplane. Incorrect AI summary citing the AI slop in #2. "Comparing Energy Efficiency of Brushless vs. Brushed Motors": Slop blog that claims the high speeds reduce losses in the motor's commutator, which simply isn't true. Commutator losses (arcing) generally increase with rotational speed. "Brushless Vs Brushed DC Motors: When and Why to Choose One Over the Other": AI slop advert. Does not answer the question. "What’s the difference between a brushed and brushless motor, and is one better than the other?": Reddit thread that states that brushed motors are less efficient, but gives no explanation. (also, that's not what the question asked...) "The Advantages of Brushed Motors: Powering the World with Efficiency and Simplicity - Magmotor": AI slop, doesn't answer the question. "Brushed vs Brushless Motor: Key Differences, Performance, and How to Choose": AI slop, doesn't answer question. AI summary citing #2. "Brushed vs Brushless: Unraveling the Mystery of Motor Efficiency": AI slop that doesn't answer the question. It also states that motors produce more power at high speeds, which is true, but doesn't explain the question. At any given voltage, a motor has a torque at which it stalls and a maximum speed that's reached under no load. As you would expect, the motor makes the most power at roughly the half-way point between these two... but the efficiency is best at the extreme end of the speed range. "Comparing the Efficiency of Different Electric Motor Types": AI slop, doesn't answer the question. "Are Brushed DC Motors Still Relevant? Efficiency, Smart Control, and New Applications Explained": More AI slop. Doesn't answer the question. "Brushed vs Brushless Motors: Comparing Efficiency, Lifespan, and Performance Metrics": AI Slop. Doesn't answer question. AI summary citing "Brushed Motors vs. Brushless Motors": Neither answer the question. "Brushed vs Brushless: Unraveling the Mystery of Motor Efficiency": AI slop. "Comparing the Efficiency of Different Electric Motor Types": AI slop. "Brushed vs Brushless Motors: Comparing Efficiency, Lifespan, and Performance Metrics": AI slop. "Are Brushed DC Motors Still Relevant? Efficiency, Smart Control, and New Applications Explained": AI slop. AI summary citing "Brushed DC Motor Theory": A page on a wiki run by Northwestern University. Talks about efficiency being zero under stall — which it is — but that's not what I asked about. "Brushless Vs Brushed DC Motors: When and Why to Choose One Over the Other": Probably human written, but doesn't answer the question, instead comparing two motor designs. (The efficiency curve is similar for both.) "Brushed vs Brushless: Unraveling the Mystery of Motor Efficiency": AI slop. "What’s the difference between a brushed and brushless motor, and is one better than the other?": Forum thread that isn't about the question and doesn't answer it. "Comparing the Efficiency of Different Electric Motor Types": AI Slop. "Why does a Tesla car use an AC motor instead of a DC one?": A Forum thread that doesn't answer the question. Hobby CNC machining and resin casting : Lcamtuf is really good... but this isn't a page about electronics. It does mention motors, but gives no explanation for why there efficiency curve peaks at very high RPMs. CSC 297 Robot Construction: Driving Motors : A long and detailed website, that actually answers the question! The first actually relevant result. "Stepper motor - Wikipedia": Wiki page on a different type of motor. "Brushless vs. Brushed Motors [New for 2026]": AI slop.

html HTML web-development Web Development ai AI css CSS
0 views
Julia Evans 2 weeks ago

Moving away from Tailwind, and learning to structure my CSS

Hello! 8 years ago, I wrote excitedly about discovering Tailwind . At that time I really had no idea how to structure my CSS code and given the choice between a pile of complete chaos and Tailwind, I was really happy to choose Tailwind. It helped me make a lot of tiny sites! I spent the last week or so migrating a couple of sites away from Tailwind and towards more semantic HTML + vanilla CSS, and it was SO fun and SO interesting, so here are some things I learned! As usual I’m not a full-time frontend developer and so all of my CSS learning has happened in fits and starts over many years. When I started thinking about structuring CSS, I was intimidated at first: I’m not very good at structuring my CSS! But then I started reading blog posts talking about how to structure CSS (like A whole cascade of layers or How I write CSS in 2024 ) and I realized a couple of things: For example, Tailwind has: I’m going to talk about a few aspects of my CSS codebase and my thoughts so far what kind of rules I want to impose on the codebase for each one. Some of them are copied from Tailwind and some aren’t. I just copied Tailwind’s “ preflight styles ” by going into and copying the first 200 lines or so. I noticed that I’ve developed a relationship with Tailwind’s CSS reset over time, for example Tailwind sets on every element (which means that an element’s width includes its padding): I think it would be a real adjustment for me to switch to writing CSS without these, and I’m sure there are lots of other things in the Tailwind reset (like ) that I’m subconsciously used to and don’t even realize are there. This next part is the bulk of the CSS! The idea here is to organize CSS by “components”, in a way that’s spiritually related to Vue or React components. (though there might not actually be any Javascript at all in the site) Basically the idea is that: So editing the CSS for one component won’t mysteriously break something in another component. And probably like 80% of the CSS that I would actually want to change is in various component files, so if I’m editing a 100-line component, I just have to think about those 100 lines. It’s way easier for me to think about. For example, this HTML might be the “component”. And the CSS looks something like this, using nested selectors: I haven’t done anything programmatic (like web components or @scope ) that ensures that components won’t interfere with each other, but just having a convention and trying my best already feels like a big improvement. Next: conventions to maintain some consistency across the site and keep these components in line with each other! has a bunch of variables like this which I can use as necessary. Colour is really hard and I didn’t want to revisit my use of colour in this refactor, so I left this alone. The only guideline I’m trying to enforce here is that all colours used in the site are listed in this file. One thing I appreciated about Tailwind was that if I wanted to set a font size, I could just think “hm, I want the text to be big”, write , and be done with it! And maybe if it’s not big enough I’d use or instead. No trying to remember whether I’m using or or . So I defined a bunch of variables, taken from Tailwind, like this: Then if I want to set a font size, I can do it like this. It’s a little more verbose than Tailwind but I’m happy with it for now. There are some things like buttons that appear in many different components. I’m calling these “utilities”. I copied some utility classes from Tailwind (like for things that should only appear for screenreader users). This section is pretty small and I try to be careful about making changes here. “base” styles are styles that apply across the whole site that I chose myself. I have to keep this section really small because I’m not confident enough to enforce a lot of styles across the whole site. These are the only two I feel okay about right now, and I might change the one: I think for the base styles it’s going to be easiest for me to work kind of bottom up – first start with almost nothing in the base styles, and then move some styles from the components into base styles as I identify common things I want. I haven’t completely worked out an approach to managing padding and margins yet. I’m definitely trying to be more principled than how I was doing it in Tailwind though, where I would just haphazardly put padding and margins everywhere until it looked the way I wanted. Right now I’m working towards making the outer layout components in charge of spacing as much as possible. For example if I have a with a bunch of children that I want to have space between them, I might use this to space the children evenly: Some inspiration blog posts: The way I was doing responsive design in Tailwind was to use a lot of media queries. Tailwind has this syntax that means “apply the style at sizes or larger”. I’m trying something pretty different now, which is to make more flexible CSS grid layouts that don’t need as many breakpoints. This is hard but it’s really interesting to learn about what’s possible with grid, and it’s a good example of something that I don’t think is possible with Tailwind. For example, I’ve been learning about how to use to automatically use 2 columns on a big screen and 1 column on a small screen like this: I also used a lot which is an amazing feature that I don’t think you can use with Tailwind. Some inspiration: In development, I don’t need a build system: CSS now has both built in import statements, like this: and built in nested selectors, like this: If I want, I can use to bundle the CSS file for production. That looks something like this. Even though I usually avoid using CSS and JS build systems, I don’t mind using esbuild (which I wrote about in 2021 here ) because it’s based on web standards and because it’s a static Go binary. A few people asked why I was migrating away from Tailwind. A few factors that contributed are: While doing this I learned about a lot of CSS features that I didn’t use but am curious about learning about one day: I still feel happy that I started using Tailwind, even if I’m moving away from it now. I learned a lot from using it and I can still use some parts from it in my sites even after deleting . Thanks to Melody Starling who originally designed and wrote the CSS for wizardzines.com , everything cool and fun about the site is thanks to Melody. Also I read so many incredible blog posts about CSS while working on this (from CSS Tricks , Smashing Magazine , and more), I’ve tried to link some of them throughout this post and I really appreciate how much folks in the CSS community share their practices. Every CSS code base has a bunch of different things going on (layouts! fonts! colours! common components!) It’s extremely useful to have systems or guidelines to manage each of those things, otherwise things descend into chaos Tailwind has systems for some of these, and I already know those systems! Maybe I can imitate the systems I like! a reset stylesheet a colour palette a font scale utility classes responsive design the build system Each “component” has a unique class The CSS for one component never overrides the CSS for any other component Each component has its own CSS file the owl selector “no outer margin” A responsive grid layout with no media queries from CSS Tricks Tailwind has become much more reliant on a build system since 2018, I think it’s impossible (?) to use newer versions of Tailwind without using a build system. So I’ve been using Tailwind v2 for years. (there’s also litewind apparently) It’s always been true that you’re supposed to use Tailwind with a build system, but I’ve never really done that, so I have 2.8MB files in a lot of my projects and it feels a little silly. I’m a lot better at CSS than I was when I started using Tailwind Ultimately Tailwind is limiting: if you want to do Weird Stuff in your CSS, it’s not always possible with Tailwind. Those limits can be extremely useful (a lot of this post is about me reimplementing some of Tailwind’s limits!) but at this point I’d like to be able to pick and choose. I ended up with sites that mixed both vanilla CSS and Tailwind in the same project and that was not fun to maintain I got curious about what writing more semantic HTML would feel like. (from A Whole Cascade of Layers ) container queries

html HTML javascript JavaScript css CSS frontend Frontend web-development Web Development
0 views
Den Odell 2 weeks ago

Browsers Treat Big Sites Differently

Some browsers ship code that checks which domain you’re visiting and changes how the page renders based on it. Yup, you read that right. If site == X , do Y . TikTok gets special treatment. So does Netflix. So does Instagram. And so does SeatGuru. Safari and Firefox both do this. Chrome doesn’t. That tells us something interesting. The source code is right there if you want to look. These are literal domain checks baked into browser rendering engines that say things like "if the user is on this domain, render this differently" or "if they’re on that domain, handle that API call differently." It’s not a bug. It’s a feature, and it ships to billions of devices. If you open Firefox and type in the address bar, you’ll see a list of site-specific interventions complete with toggle switches. Each one is a targeted fix for a specific website, and you can turn them off and watch sites break. Firefox’s WebCompat system injects custom CSS and JavaScript into specific domains, changes user agent strings for sites that sniff browsers incorrectly, and papers over bugs that would otherwise make the web feel broken. The interventions are tracked in Mozilla’s Bugzilla, complete with bug reports and sometimes failed outreach attempts to the sites in question. Safari’s WebKit engine calls them "quirks," and the file is publicly available on GitHub. Reading through it is an education in how the web actually works. Here’s one comment from the code: So the browser detects when you’re on facebook.com, x.com, or reddit.com and changes how it handles Picture-in-Picture video. These companies wrote broken video code, and rather than wait for them to fix it, the browser shipped a workaround to every user. Here’s another comment: Someone added domain-specific rendering code for SeatGuru, and the comment implies outreach was attempted. SeatGuru didn’t fix their site, so the browser fixed it for them. The commit history is a fascinating read. In just the last few months: Zillow’s floorplan images weren’t centering, TikTok was showing "please upgrade your browser" messages, Instagram Reels were resizing erratically during playback, Netflix’s "Episodes and Info" button was dismissing popovers incorrectly, Twitch was pausing PiP videos when you switched tabs, and Amazon Prime Video wasn’t letting Safari users watch at all. Each one got a domain-specific fix shipped to every single user. The quirks files aren’t just fixing broken sites; they’re often compensating for Chrome’s control over what "working" means in the first place. The pattern goes like this: Chrome ships a feature, developers use it because Chrome dominates the market, and other browsers scramble to either implement the feature or add site-specific quirks to paper over the difference. By the time Safari or Firefox catches up, the quirk has already shipped to millions of users. WebKit’s source code includes user agent overrides that make Safari pretend to be Chrome for specific sites like Amazon’s video pages and various streaming services. These sites sniff for Chrome and serve degraded experiences to everyone else, so rather than let Safari users suffer, WebKit lies about what browser it is. From the current Quirks.cpp source: Safari literally ships with a fake Chrome user agent string, ready to deploy when sites refuse to work otherwise. Firefox does the same thing, and many of its interventions are user agent spoofs telling sites "yes, I’m Chrome" because those sites actively block or break on non-Chrome browsers. The Mozilla wiki explains that some sites "block access completely, display a different design, or provide different functionality" based on browser detection. So Firefox ships workarounds. This creates a feedback loop. Developers build for Chrome because Chrome dominates. Their sites work best in Chrome. Users who hit bugs elsewhere blame the browser, not the site, so they switch to Chrome, reinforcing its dominance. These aren’t just cosmetic tweaks. Browsers change fundamental behavior based on your domain, including scrolling behavior, touch event handling, viewport calculations, and image MIME type handling. The list in WebKit alone runs to thousands of lines. Here’s one about simulated mouse events: The browser checks if you’re on Amazon and changes how touch-to-mouse event translation works for their product zoom feature. Amazon’s site assumes certain event behavior that Safari doesn’t provide by default, so Safari provides it anyway, but only for Amazon. There are quirks for storage access, scrollbar rendering, autocorrection behavior, and zoom handling. Each one is behind a domain check, and each one is compiled into the browser executable. You might have noticed something. I’ve shown you Firefox’s and WebKit’s , but where’s Chrome’s equivalent? Chrome doesn’t really need one, and not necessarily because Chrome is better engineered. The web is already built for Chrome. When over 80% of users browse with Chromium-based browsers , developers build for Chrome first. If a site works in Chrome, it ships. If it breaks in Safari or Firefox, they decide, knowingly or otherwise, that it’s less of a problem. Chrome doesn’t add quirks; it sets the agenda. When Chrome changes how something works, sites update to match, and other browsers follow or break. This is the asymmetry that runs through the modern web. When a site breaks in Safari, WebKit engineers add a quirk. When Chrome wants to change how the web works, Chrome just changes it and everyone else adapts. Chrome doesn’t need quirks because Chrome’s interpretation of web standards is the version that everyone else works to. This isn’t done maliciously and it isn’t entirely Google’s fault; really it’s the natural consequence of market dominance. Browser engineers will tell you the specs themselves are actually well-defined now. The HTML5 "living specification" approach solved the chaos of the IE/Netscape era by making specs match reality. The problem is that developers rely on unspecified implementation details, then blame non-compliant browsers when those details differ. While that may be true, it doesn’t change the outcome. When Chrome is the implementation everyone targets, Chrome’s unspecified details become the de facto spec. The same thing happened with Internet Explorer in the 2000s. When developers built for IE, sites broke elsewhere, and standards compliance became secondary to just making it "work in IE." We spent years digging out of that hole. A decade ago, the hope was that browser quirks would eventually disappear as the web became more standards-compliant. You could argue they did, but not for the reason anyone expected: the quirks didn’t go away, they just moved to browsers that aren’t Chrome. You might wonder why browser vendors don’t just contact the offending sites and ask them to fix their code. Sometimes they do, and there’s even a field in source code comments linking to outreach efforts, but consider the economics of that. A browser vendor’s job is to make the web work for users, and if a popular site is broken in their main browser yet works in Chrome, users blame the browser. Filing a bug with a third party and waiting weeks or months for a fix that may never come is a losing proposition when you can ship a five-line workaround tomorrow. There’s also the question of who you’d even contact. The developer who wrote the broken code might have left the company years ago, the team that owns that endpoint might not know it’s their responsibility, and the site might be in maintenance mode receiving security patches but nothing else. From the browser’s perspective, the choice is simple: fix it now, invisibly, and save everyone the trouble. A WebKit engineer wrote a blog post about removing a quirk for FlightAware. The site was comparing CSS transform matrix strings, but the CSS spec had changed how browsers should serialize the values, and the browser became compliant, FlightAware broke, and engineers added domain-specific code to fix it. Outreach eventually worked, FlightAware fixed their code, and the quirk was removed. But for months, Safari users had a working experience only because someone wrote an statement in the browser checking for . Your site might be getting special rendering treatment and you might not be aware of it. That quirk you’re benefiting from doesn’t show up in your error logs, and there’s no console warning that says "this browser is working around your mistakes." The fix is invisible by design. If you test mostly in Chrome, you’re especially exposed. Your site might work perfectly not because you wrote good code but because Chrome’s behavior aligns with your assumptions. Other browsers will have to choose between letting your site break for their users or adding you to their quirks file. Open your site in Firefox and Safari. Not occasionally, not before a big launch, regularly . The quirks files exist because developers didn’t do that. If you find your domain in one, consider auditing whatever it was they worked around. Not because you have to (after all, the web kept working without your intervention) but because somewhere an engineer at a browser you don’t use solved a problem you didn’t know you had. The specs are the map, but the quirks lists are the messy terrain. Standards were supposed to eliminate browser-specific code. We dug ourselves out of the IE era, celebrated, and then built exactly the same hole again around a different browser. Only now the browser-specific code lives in the browsers that aren’t dominant, patching over a web built for the one that is. Sites I’ve worked on are in these files. Yours might be too. And the lists are getting longer .

web-development Web Development css CSS javascript JavaScript c++ C++
0 views
Jim Nielsen 2 weeks ago

Out With the JS, In With the HTML

I’ve been posting about how you can make lots of HTML pages and leverage navigations over in-page, JS-dependent interactions . Now I’m gonna post another example. On my icon sites, I have a little widget that allows you to resize the icons you’re looking at. Previously, I implemented this functionality as a web component that looked something like this: The attribute corresponded to an enumeration like which mapped to actual pixel dimensions like 64×64 or 512×512. When the little widget was clicked to render icons at a different size, JavaScript changed the attribute on the custom element. From there, the web component’s JS took over changing the dimensions of the children elements, their attributes, etc. It all worked pretty well. However, because that was a client-side solution to my otherwise entirely pre-rendered static site, it required some templating logic and data be duplicated and sent over the wire to every client. I didn’t love that for various reasons — like “Crap, I updated this one small part of how my icon list renders on the server, but forgot to tweak it on the client, so things are slightly broken now.” Then one day the thought hit me: instead of relying on JS to make that interaction work (click, execute JS, modify in-page DOM to a new list), what if I just made that interaction a navigation? Click, navigate to a new list. Instead of “every list of icons ships with some JS that allows them to re-render at four different sizes” I could do “every list of icons ships in four different sizes”. So I tried it. And guess what? Once I added some code to support CSS view transitions, I got a cool effect amongst the icons for free — that’s right, by removing code! Works nice on mobile too! I know I’m not doing anything particularly novel here, but as we continue to get new, powerful primitives on the web — like CSS view transitions — I find it really interesting to revisit basic patterns and explore what’s possible now that wasn’t previously. It’s fun to ask yourself: “Could I remove some client-side JS and get a better overall experience?” If the answer is yes, I’ll bet you the development experience (and maintenance burden) is much improved too! Reply via: Email · Mastodon · Bluesky Previously: one page, like , with JS to re-render the icon list based on user interactions. Idea: four pages, like , each a different icon list size.

javascript JavaScript css CSS web-development Web Development html HTML frontend Frontend
0 views
Kev Quirk 3 weeks ago

I'm off GitHub

Ok, that's it. I'm officially off GitHub. First I moved all of my private repos to my Synology, which was extremely easy to do. I did that around a week or so ago and it's be working great. Then I had to start sorting and moving all my public repos to Codeberg . Many were archived as I no longer maintained the projects, which left me with just 7 actual repos that I needed to move. Pure Blog/Comments and Simple.css were the most challenging as they all had other people who relied on them, but I managed to get them moved with a little bit of messing around. The others were super simply, I used Codeberg's migration tool to migrate the repos over, the ran a command locally to point my repos to a new target: That's it! Repo migrated. It's fine . And I don't mean that negatively - there's a lot less going on in the UI than on GitHub, but everything is still familiar and similarly laid out. There's been almost zero learning curve moving from GitHub to Codeberg, so props to the Codeberg team for that. I've applied for a Coderberg membership as I think it's important to support the open source projects we use, so hopefully that will be approved soon. Overall I'm very happy with the move. All the old GitHub repos have had their files updated to point to Codeberg, and they too have been archived. So that's one less piece of big tech I need to rely on. 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 .

css CSS Github open-source Open Source
0 views
Jim Nielsen 3 weeks ago

Reminder: You Can Stitch Together Lots of Little HTML Pages With Navigations For Interactions

I wrote about building websites with LLMs — (L)ots of (L)ittle ht(M)l page(s) — and I think it’s time for a post-mortem on that approach: I’ve tweaked a few things from that original post but the underlying idea is still the same, which I would describe as: Avoid in-page interactions that require JavaScript in favor of multi-page navigations that rely on HTML and are enhanced with CSS view transitions (and a dash of JS if/where prudent). As an example, on my blog I have a “Menu”. It doesn’t “expand” or “slide out” or “pop in” or whatever else you can do with JS. Instead, it navigates to an entirely-new page that is focused on just the menu options of my site. I say “navigates” because it’s just a link — — and it functions like a link, but the navigation interaction is enhanced by CSS view transitions. Have a newer device with a modern browser? Great, you get a nicer effect. Have an older device, or an older browser, or JS disabled, Et al.? It’ll still work. If you can follow a link — which is the most fundamental thing a browser can do — it will work. So how’s it all work under the hood? In essence, all the pages have a link to the menu (except the menu page). When you navigate to the menu, that link is changed to an “X” which “closes” the menu. The closing is still just a link (back to ) but it’s enhanced with JS to actually do a “back” in the browser history. This makes it so “opening/closing” the menu doesn’t add an entry to your browser history. As a simplified example, the code looks like this: The checks whether we came to this page as a navigation (mostly likely from within the blog itself) or via a direct visit (i.e. somebody typed it into the URL bar, unlikely but possible) which is how I suss out whether there’s a meaningful run or not. Here’s a video of how it all works, if that’s your thing: While this solution seems simplistic, it was not a simple thing to arrive at. It required me to spend time thinking about what was essential to navigation, how that interaction could work across multiple pages, and how I could ensure page size stayed small so the interaction was both fast and robust while remaining intuitive to use. In other words, the approach shaped the design. Turns out, if you have a website and you think of the browser as a way to navigate documents — rather than a runtime to execute arbitrary code and fetch, compile, and present them — things can be a lot simpler than our tools often prime us to make them. Reply via: Email · Mastodon · Bluesky

frontend Frontend web-development Web Development css CSS tutorial Tutorial html HTML
0 views
Julia Evans 4 weeks ago

Testing Vue components in the browser

Hello! One of my long term projects on here is figuring out how to write frontend Javascript without using Node or any other server JS runtime. One issue I run into a lot in my frontend JS projects is that I don’t know how to write tests for them. I’ve tried to use Playwright in the past, but it felt slow and unwieldy to be starting these new browser processes all the time, and it involved some Node code to orchestrate the tests. The result is that I just don’t test my frontend code which doesn’t feel great. Usually I don’t update my projects much either so it doesn’t come up that much, but it would be nice to be able to make changes with more confidence! So a way to do frontend testing that I like has been on my wishlist for a long time. Alex Chan wrote a great post a while back called Testing JavaScript without a (third-party) framework in response to one of my previous posts in this series that explained how to write a tiny unit-testing framework that runs in a page in browser. I loved this post at the time, but it only talked about unit testing and I wanted to write end-to-end integration tests for my Vue components, and I didn’t know how to do that. So when I was talking to Marco the other day and he said something like “you know, you can just run tests for your Vue components in the browser”, I thought “hey, I should try that again!!!” I just did all of this yesterday so certainly there’s a lot to improve but I wanted to write down a few things I noticed about the process before I forget. This was a bit tricky for me because the Vue site usually assumes that you’re using Node as part of your build process in some way (there’s a lot of “step 1: ), and I didn’t want to use Node/Deno/etc. But it turned out to not be too complicated. The project I’m going to talk about testing is this zine feedback site I wrote in 2023 . I used QUnit . It worked great but I don’t have anything interesting to say about how it works so I’ll leave it at that. I think that Alex’s “write your own test framework” approach would have worked too. I followed these directions . I did appreciate that QUnit has a “rerun test” button that will only rerun 1 test. Because there are so many network requests in my tests, having a way to run just 1 test makes it a lot less confusing to debug the test. The first thing I needed to do was get my Vue components set up in the test environment. I changed my main app to put all my components in , kind of like this: Then I was able to write a function which does basically exactly the same thing my normal main app does (render a tiny template with the component I want to use). The only differences are: Here’s what using the function looks like: and here’s the code for it: The result is a div where I can programmatically click, fill in form data, check that the right content appears, etc. Because I was writing end-to-end integration tests to make sure my client JS worked properly with my server, I needed to have some test data in my database. So I wrote ~25 lines of SQL to set up some test data in my database, and added an endpoint to my dev server to run the SQL to reset the test data to a known state. Then I just run at the beginning of any test that needs the test data. My function actually doesn’t always totally reset everything which is kind of bad, but it was workable to start with and can always be improved. Here’s what a basic test looks like! Basically we’re rendering the div and make sure it contains some approximately correct data. Those are all the basic pieces! Now here are a few issues I ran into along the way I have a lot of network requests in my tests, and it takes time for them to finish and for the Vue code to do what it has to do with the results and update the DOM. I think we all learned a long time ago that putting random calls in your tests and hoping that the timings are right is slow and flaky and extremely frustrating, so I needed a different way. As far as I can tell the normal way to deal with this is to figure out a way to tell from the DOM whether it’s okay to proceed or not. Like “if this button is visible, we can “. So I wrote a little function that polls every 20ms to see if a condition has finished yet. It times out after 2 seconds. Here’s what using it looks like: It looks like there are a lot of implementations of this concept out there and they’re all better thought-through than mine. (from a quick Google: qunit-wait-for , playwright expect.poll ) In some cases I thought I’d identified the right thing to wait for in the DOM (“just wait for this textarea to appear!’) but it turned out that because of some internal details of how my program works, actually I needed to wait for something else later on which was hard to pin down. I ended up changing one of my components to add some random value to the DOM when it was finished an important action (like ) which didn’t feel great. My best guess is that the right way to fix this kind of test issue is a refactor that also makes the app more reliable for the users: if there’s an element in the DOM that isn’t actually ready for the user to interact with, maybe I shouldn’t be displaying it yet! I ended up adding a few classes to HTML elements that I needed to find in the tests, either because I needed to click on them or wait for them to appear in the DOM. I might want to change this approach later - frontend testing frameworks seem to suggest avoiding using CSS classes and instead using something like getByRole or as a last resort something like a data-testid . Feels like there’s a way to make the app more accessible and easier to test at the same time. To fill out a form, I can’t just set the , I also need to dispatch an event to tell Vue that the element has changed. For example, and need different kinds of events. This is kind of annoying and it made me realize why I might want to use some kind of UI testing library, for example: I want to have an idea of what my test coverage was, and it turns out that Chrome actually has a built-in code coverage feature for JS and CSS! My JS is bundled into a file called with esbuild, so I could just look at and see which lines weren’t covered. The process was a little finicky: I had to turn off sourcemaps in the Chrome devtools to get this to work, and there’s a specific not super obvious series of actions I have to do in order to see the coverage data. As usual with these posts I’ve never really worked as a frontend or backend developer (other than for myself!) and I feel like I’m constantly learning how to do super basic tasks. I really had a blast doing this. My frontend projects always feel so fragile because they’re untested, and maybe one day I’ll have a test suite I’m confident in! Some things I’m still thinking about: I can optionally pass some some extra data to use as its props. It mounts the component to a temporary invisible div which will get removed from the DOM after the test is done. The div is positioned off the page ( ) so you can’t see it. Testing Library’s example of filling out a form looks extremely different from what I’m doing Vue Test Utils: their section on form handling looks like it simplifies this a lot. While writing this post I found this frontend testing library called Testing Library that has a lot of guidelines for how to write tests that are very different from my initial ideas. I experimented with rewriting everything to use Testing Library and it felt pretty good, so we’ll see how that goes. They distribute a file that works without Node. I’m not sure how I feel about not having a way to run these tests on the command line at all. Maybe there’s a simple way to work primarily in the browser but have an way to run them in CI too if I want?

testing Testing vue Vue css CSS html HTML javascript JavaScript
0 views
Kev Quirk 4 weeks ago

Thoughts on Leaving GitHub

I've read a few posts about people leaving GitHub recently, and following my short note to the Fediverse a number of people have piped up saying they're not fans of GitHub, either. From the reading I've done, these frustrations are usually threefold: In all honesty, none of the factors above really bother me that much. I think that's because I don't rely on GitHub for anything significant. I'm not a professional software developer, so my livelihood doesn't depend on it. As for Copilot being trained on open source software, and them repeatedly ignoring the GPL to do so, it does irk me, but I kind of expect shit like this from Microsoft at this point. I went into using GitHub assuming that any code I upload there can (and probably will) be used for shitty stuff. But even that isn't enough in isolation to put me off GitHub. The way I see it is that public code is for the public, and if Microsoft want to use my code in that way, while not ideal, doesn't piss me off that much. So why think about moving at all? Well, for me it's about reliance on big tech. I'm trying to reduce it where possible, but the social and "centre of mass" aspects of GitHub are giving me pause. For example, the Simple.css repo has a whopping 5,000 stars! Do I really want to lose that visibility? Buuuuuuuuuut, I can always redirect any popular repos to another platform, just like I did with 512KB Club when I handed that to Brad . Plus, let's be honest, it's all just popularity bullshit. It doesn't really mean anything. What's important is that the code is readily available for people to use. It's like leaving Facebook - when I was thinking about it, I was worried if I'd miss my friends or be out the loop. It's been over a decade at this point and I don't miss it one bit - no regrets whatsoever. I think moving off of GitHub would be the same. I plan to slowly start migrating public repositories over to Codeberg so that all my projects are hosted there. I'll also use it as an opportunity to archive off any old repos that I no longer need. Codeberg also supports logging in with GitHub and Gitea, so anyone who contributes to my projects on GitHub, should be able to do so easily in Codeberg too. Then, for my private repos (of which there are many that host personal projects) I've installed Synology's Git server on my Synology, and have been playing with that for a few days. It works extremely well, so all my private repos will live there, safe and sound, away from Microsoft's greasy mitts. Ultimately it's personal choice. For me it's about reducing my reliance on big tech, but also making my private repos more private. I won't be deleting my GitHub account though, as I think it will be important to use as a marker for anyone who wants to find my source code when it moves. Have you thought about leaving GitHub? 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 . Microsoft ownership Microsoft training Copilot on open source software Large amounts of downtime

open-source Open Source career Career business Business css CSS
0 views
neilzone 1 months ago

Please consider publishing a full-text RSS feed for your website or blog

I have used RSS (“Really Simple Syndication”) as my default web browser (for some stuff) for ages now. Ages as in “20+ years”. It seems to be enjoying a bit of a resurgence, and I am delighted. RSS is a way of publishing web content in a machine-readable format. When you publish a blogpost, as well as the new blogpost showing on your site, it is also added to a file, often call index.xml or feed.xml or similar. I publish RSS feeds for my personal blog and the decoded.legal blog . Your loyal, eager readers “subscribe” to your RSS feed, but that just means add the link to that RSS file to their RSS reader or aggregator. I use FreshRSS as my RSS aggregator (the thing which collects all the RSS feeds), and then Readrops on Android and newsboat (I wrote about newsboat ) on Linux to read the feeds. You can see a list of blogs that I follow via RSS . A reader’s aggregator or reader periodically downloads the RSS .xml file from each of the sites, and, if there’s an update (because of a new blogpost, most commonly), shows the new blogpost(s) to the reader. They might even have set up a tool like Calibre - an ebook management tool - to download your feed and convert it into a file that they can enjoy on their ereader. It is a wonderful way for a reader to create their own personalised reading list of their favourite authors, making sure that they never miss a post. For authors, it is an easy, free way of making their works available, under their own control, without the hassle or cost of running an email subscription service. One can make available either (or both) an RSS feed containing snippets of posts (e.g. a headline, perhaps an initial paragraph or sentence, and a link to the website), or the full text of posts (as well as a link). Please, consider making a full-text feed available! This is probably as simple as adjusting a config setting in WordPress, or whatever else you use for your blog. By doing so, you give your readers an easy way of enjoying what you write, without you incurring any extra cost, and lessening the risk of them missing one of your posts. It is not the end of the world if you do not or cannot do it - I’ve written before about using CSS selectors in FreshRSS to get full-text content for a snippet-only feed - but, by giving them full text, they do not have to faff around with this. It is also advantageous from an accessibility point of view, as your reader can set up their RSS reader however best works for them, be that a different font, or large font sizing, or just a distraction-free environment, and they still get to enjoy what you write. If you care about analytics / readership (and I am not one of those people; I’ve no idea how many people read this), then offering an RSS feed might skew these. But if it is skewing it by a statistically significant amount, this just means that lots of people are enjoying what you write! (And I’d have thought that bots were already skewing your stats, but that’s another topic…) Your own writing, on your own server, just made available to your own readers in a convenient, free of charge way. What’s not to like!

web-development Web Development marketing Marketing css CSS Xml
0 views
ava's blog 1 months ago

misogyny in the blogosphere

I struggle with how humiliating it feels to talk about and point out misogyny; how the general regression into conservative values makes addressing misogyny come across as a last resort card you can pull out to make yourself look like a victim or get brownie points, while vilifying someone else. Like a thing you only do if you have no better arguments and want to shut discussion down, as the only people coming to challenge you further are seen (or even are) misogynists who don’t believe you. It feels like it’s sucking all the air out of the room, and people begin to tiptoe. So much about identifying and calling out covert misogyny is about prior experience and gut feelings and hypotheticals, which makes it so hard; because overt, obvious misogyny is rarely worth a discussion and is a lot less controversial to name. It’s exactly those edge cases of that are worth calling out, but are impossible to prove. You cannot snap your fingers and enter the alternate reality of being a man and seeing if it happened or not. Even if you find a comparable action or writing from a man about the same topic where he was praised for what you were criticized for, it’s very easy to dismiss that. ”He’s just more charming. It’s not that comparable. You were just unlucky with who read it. Does it even matter? ” And there’s really nothing you can do about that; there’s always some plausible deniability. The following are just my personal feelings and experiences; if you’ve made the opposite experiences or think these are cherry-picked, that’s okay. In my experience online… Men get credited (“taken from (name)”, “made by (name)”), women often get nothing or “is inspired by” even when it’s an exact copy. That even happens with theme code on here (and happened to me before). 1 Men calling each other out online is accepted, even if harsh; criticizing some guy online as a woman is seen as extra humiliating and it gets treated like you’re ruining his life or reputation on the platform. I’ve seen some harsh callouts and fights on the indie web, even downright discussing if someone is spewing Nazi rhetoric or not, and it didn’t seemingly devolve into whether any of them are a big meanie bullying people off of platforms. This only seems to happen when women call out some stuff. Seeing bullshit online from random guys is normal and we are desensitized (open any inflammatory comment section; most are men or are read as men), so a woman talking some shit gets extraordinarily more replies and attention. I feel like even on things like the Bearblog Discovery, people rather hide and silently report a man for despicable views, but are less inclined to move on silently for women bloggers who have awful takes. Don’t get me wrong: Call out stuff openly, I’m just focusing on who seemingly gets a pass and who doesn’t. People easily get sick of seeing the same woman in their feed than they do with men, and I’ve had the feeling that the most complaints about Trending posts come in when the same women are on there multiple times. You can see this even in pop culture: There was a time when everyone was sick of seeing Anne Hathaway, and during the Barbie press tour, I remember Margot Robbie saying she’s gonna lie low now so people don’t get sick of her, and since then, I have seen other successful women in such visible positions say the same. I have never seen anyone fault a male actor for showing up in a lot of media or him saying he needs to disappear for a while to give people a break. Usually it’s celebrated like “ lmao there he is again ”. People expect women online to be more neutral, more caring, motherly; sharing less opinion pieces and instead, more art and pictures. Women’s opinion pieces feel more like nagging to people, and are easily somehow read as “too aggressive”, especially when it’s guides. Makes you wonder if some select few men just can’t handle guides written by women because that’s a woman telling them what to do or how to behave. That’s why they take it upon themselves to just rewrite your post saying the original was too aggressive, and link other male authors on the same topic. Happened to me! When a man writes confidently like an expert about something, it matters less to people when he doesn’t have (or doesn’t immediately offer up) official credentials (like certificates, degrees, work, etc.) about it. As a woman, you are asked more for these and even have to offer up this information upfront to be believed. Even then, this is not enough for some people. Closely related, I am reminded of the recent news when actress Milla Jovovich released MemPalace on GitHub. Almost unanimously, comments everywhere were agreeing that a) this is just someone using her name, or, after it was confirmed to be her, b) she lent her name to this project to give it more visibility, or c) just paid someone to do it for her. This was more than just an understandable, normal " Wow, an actress has this other interest? Did not expect that, cool. " It was deeply driven by the fact that people cannot imagine a pretty woman to do anything technical. People even questioned her motivation to do so - man, why not? AI has been in the public spotlight for 5 years. Why could she not deeply immerse herself in that topic during that time because it interests her? Meanwhile, people accept and admire that James Cameron, who is a successful and well-known filmmaker, is also a deepsea expert who was able to give valuable insight into the OpenSea submersible failure. I’ll let you in on a little secret: Before I wrote about data protection law on this blog, I tried it on another blog that made no mention of my name or gender was was designed in a way that would be read as masculine, to avoid biases due to my gender. But I quickly got tired of missing out on having my actual name and official presence attached to my work and field, so I’d rather live with the bias, I guess. Thanks to everyone who has always treated me with respect, gives credit where it's due, and properly acknowledges women's skills and expertise. Feel free to let me know your own experiences and observations around misogyny, both in general and in the personal web. Even with a public reply, if you feel comfortable. Reply via email Published 29 Apr, 2026 Slightly related: Someone also stole some of my posts, slightly changed a sentence here and there, and when caught, said they just used the texts to test how their website’s CSS looks with it. Since then, friends and I are joking that my best posts are good Lorem Ipsum s. ↩ this would have been fine for me to do or say if I was a man they wouldn’t have done this if I was a man this would have been more successful if I was a man this reaction comes from someone that has a harder time accepting successful/opinionated/... women Men get credited (“taken from (name)”, “made by (name)”), women often get nothing or “is inspired by” even when it’s an exact copy. That even happens with theme code on here (and happened to me before). 1 Men calling each other out online is accepted, even if harsh; criticizing some guy online as a woman is seen as extra humiliating and it gets treated like you’re ruining his life or reputation on the platform. I’ve seen some harsh callouts and fights on the indie web, even downright discussing if someone is spewing Nazi rhetoric or not, and it didn’t seemingly devolve into whether any of them are a big meanie bullying people off of platforms. This only seems to happen when women call out some stuff. Seeing bullshit online from random guys is normal and we are desensitized (open any inflammatory comment section; most are men or are read as men), so a woman talking some shit gets extraordinarily more replies and attention. I feel like even on things like the Bearblog Discovery, people rather hide and silently report a man for despicable views, but are less inclined to move on silently for women bloggers who have awful takes. Don’t get me wrong: Call out stuff openly, I’m just focusing on who seemingly gets a pass and who doesn’t. People easily get sick of seeing the same woman in their feed than they do with men, and I’ve had the feeling that the most complaints about Trending posts come in when the same women are on there multiple times. You can see this even in pop culture: There was a time when everyone was sick of seeing Anne Hathaway, and during the Barbie press tour, I remember Margot Robbie saying she’s gonna lie low now so people don’t get sick of her, and since then, I have seen other successful women in such visible positions say the same. I have never seen anyone fault a male actor for showing up in a lot of media or him saying he needs to disappear for a while to give people a break. Usually it’s celebrated like “ lmao there he is again ”. People expect women online to be more neutral, more caring, motherly; sharing less opinion pieces and instead, more art and pictures. Women’s opinion pieces feel more like nagging to people, and are easily somehow read as “too aggressive”, especially when it’s guides. Makes you wonder if some select few men just can’t handle guides written by women because that’s a woman telling them what to do or how to behave. That’s why they take it upon themselves to just rewrite your post saying the original was too aggressive, and link other male authors on the same topic. Happened to me! When a man writes confidently like an expert about something, it matters less to people when he doesn’t have (or doesn’t immediately offer up) official credentials (like certificates, degrees, work, etc.) about it. As a woman, you are asked more for these and even have to offer up this information upfront to be believed. Even then, this is not enough for some people. Slightly related: Someone also stole some of my posts, slightly changed a sentence here and there, and when caught, said they just used the texts to test how their website’s CSS looks with it. Since then, friends and I are joking that my best posts are good Lorem Ipsum s. ↩

css CSS culture Culture
0 views
David Bushell 1 months ago

Alternative thoughts

My regular schedule of CSS and HTML tips will return after this brief look at the sorry state of the web and tech industry. It’s grim. Our press secretary, Sean Spicer, gave alternative facts to that… Alternative facts - Kellyanne Conway (Wikipedia) Following the 2017 inauguration of Mr “grab ’em by the pussy” the world was treated to a deluge of alternative facts . Few were prepared for the new era of “you can just say things” . The rule books were torn to shreds. Whilst liberals were angsting over decorum, the techno-fascists were rising up. When America decided for a second time that a pedo-in-chief was preferable to a woman, all pretence fell away . The AI industrial complex is the culmination of tech, money, and power that the Musk’s and Thiel’s of the world were waiting for. For a monthly subscription users can disengage their brain and choose alternative thoughts to escape a dystopia they voted for. The endgame of techno-facism is more money, more power; a price tag on humanity . At this point, those who work in tech and refuse to acknowledge the harm and the violence are hopelessly naive and/or complicit in their selfishness. Violence is more than just hitting people. Taking away people’s agency is violence, exposing people to suffering is violence. Violence has many shapes and forms. And “AI” needs an acceptance of endless amounts of violence AI as a Fascist Artifact - Jürgen Geuter I can understand why someone doomscrolling slop-tok shorts might not pause to consider the effect of their implicit acceptance. But the “it’s just a tool” crowd in the tech industry — well, is it wilful ignorance or feeble apologism? Why is it that those most embedded in tech are most eager to push the AI narrative? Hint: they’re almost all looking to get in on the grift. Sell shovels. Sell guides on how to shovel. Sell B2B automated shovelling logistics. All the while enriching the pockets of the techno-facists looking to control those hooked on tokens. It’s quite a tool. A tool that has the tech industry clapping like sea lions and giddily proclaiming there are five lights . Apparently the public at large don’t yearn for automation . Let’s hope those across the pond can connect the red flags before we get Vance/Kirk 2028. Software “engineers” have been more than happy to pull the one-armed code bandit and recite the 10× productivity mantra. What incentive do they have to care when they’re strongly encouraged to gamble on their employer’s dime. More. Faster. Burn those tokens! Stop thinking, your context is getting cold! They get subsidised rates and front row seats to the looming collapse. Collapse it assuredly will. The wheels are falling off . Are the thrills of addiction waning, too? Anecdotally, I’ve seen an increase in developers becoming bored with their new toys. When the bubble bursts it will be too late for many. The AI mandate has been busy destroying the careers and opportunities of those who still care. Craig Cook said “fuck AI” and quit. The fantasy of AI efficiency has rapidly devoured the brains of every Silicon Valley MBA prick like a body-snatcher invasion. Predator-class oligarchs are positively horny to replace their annoying human workforces with a compliant, manufactured slave race that doesn’t demand a living wage and won’t whine about their “health” and “dignity” and “fundamental rights.” The End - Craig Cook Ky Decker quit too, questioning whether they belong in tech anymore. Tech organizations have now given up on pushing back against an unethical and violent administration, deciding that it is in their best business interest to flatter the president’s ego with gold trophies and pandering praise. Elon Musk and the “Department of Government Efficiency” took a sledgehammer to 18F and replaced it with National Design Studio, a propaganda shop whose main talent is building expensive and inaccessible landing pages. Do I belong in tech anymore? - Ky Decker These are just two stories from those brave enough to speak out. The usual “you’re prompting it wrong” commenters on Hacker News and Lobste.rs were atypically sympathetic to Ky’s plight. Perhaps reality is sinking in? Or the reply-bots were offline. That’s a good sign I guess. Nevertheless, the ostracising and harassment towards a “no thanks” stance on AI and techno-facism remains a real problem (source: my inbox). I don’t care about the anonymous cowards that think I’ll read one thousand words of LLM-extruded abuse after they gave the game away in the subject line. They exist, but I’m talking about the private conversations I’ve had with those suffering the burnout alone. They are trapped in jobs. They’re forced to bear the alternative thoughts proxied via the mouth holes of their managers. They are afraid to speak up. It takes some combination of financial privilege, mental exhaustion, or foolhardiness to quit a job when the market is so bleak. I respect those that do but I don’t blame anyone for bunkering down. Wait it out is practical advice but it doesn’t ease the anxiety. “Preserve your mental health” is key but what that means is different for each of us. And throughout all of this, I felt such an energetic sense of purpose and activation in creating new music for the first time in over a decade that I also felt I had rediscovered my true self. I released a song for the first time in 15 years - Salma Alam-Naylor Salma Alam-Naylor released a certified banger: reject the machine . Salma created this music to fight against an abusive relationship with the technology industry. I see this passion project as a middle finger to the aesthetics of fascism . To me it’s a reminder that by rejecting the alternative thoughts peddled by techno-facists we deny what they really want: control. I’ve been inspired to continue pursuing my own creativity . Will that bear fruit? It doesn’t matter. It’s my life and I will remain in control. Thanks for reading! Follow me on Mastodon and Bluesky . Subscribe to my Blog and Notes or Combined feeds.

ai AI culture Culture css CSS html HTML
0 views
Robert Alexander's Tech Blog 1 months ago

Why was time.gov off by one round-trip time?

In the United States, the National Institute of Standards and Technology (NIST) maintains the official U.S. time reference. NIST distributes this reference to enable all sorts of applications from meteorology to GPS satellites. Programmers are probably most familiar with distributing time using the network time protocol (NTP), which NIST supports by operating several NTP servers. NIST also runs the beautiful time.gov website which provides an official time reference via a web page. Its an easy way to check the time if you don’t trust the clock on your computer’s taskbar. On a recent project I needed a trustworthy clock and time.gov was a convenient option. To validate that the provided reference was accurate, I opened time.gov in two browser windows side-by-side, but found that the provided clock offset estimates disagreed by a margin larger than I could tolerate. When I compared to another source, an NTP client, I found even more disagreement. I dismissed time.gov as an option, but the inconsistency of the estimates kept bugging me. My intuition told me that more precision should be possible so I had to circle back to figure out what was broken. This blog post explains the issue and how NIST fixed it. For the sake of clarity: the issue described in this post affects the clocks displayed on the time.gov website only, not any of NIST’s other time services. Before I dig into the time.gov implementation, I’ll give an overview of how NTP works. I’ll simplify things for the sake of brevity; there are great explainers elsewhere if you want an accurate deep dive. In the NTP protocol, the server responds with the current timestamp. This timestamp is accurate at the time it was generated, but the client doesn’t see it immediately. It takes time for the response to reach the client, which causes the timestamp to grow stale. The NTP client needs to estimate how much the time elapsed since the timestamp was generated. It does this by measuring the round-trip time (RTT) of the request, which includes both network latency and server processing time. Adjusting the server-provided timestamp using these metrics can produce a very good estimate of the current time. While it is possible for the request and response to take different amounts of time to travel the network, its reasonable to predict that the network delay is the same in both directions. As such, the network delay experienced by the NTP response can be estimated as half of the round-trip time. There’s a lot more to know about NTP: it uses UDP, the response contains multiple timestamps, multiple requests are used, and statistical analysis is performed. The time.gov bug was significant enough that we can ignore those details and use this simpler model. The time.gov website synchronized time over HTTP, using JavaScript to perform the requests . The core functionality performed an HTTP request and collected timing information using “new Date()”. Like NTP, time.gov sends multiple timestamps, but the difference between these is rounded to zero milliseconds and doesn’t impact calculation. So we will continue to ignore that detail. The calculated offset is displayed to the user and the website display is updated by adjusting the local time with the offset. The JavaScript looks like a reasonable approximation of NTP and it’s believable that it could produce the correct time. The issue time.gov was facing happened at the network level. Opening time.gov loads a bunch of resources from the time.gov domain, including the HTML, JavaScript, and CSS. The network request to fetch the timestamp also uses the time.gov domain. For performance reasons web browsers typically send multiple HTTP requests over a single connection. However, the HTTP responses from time.gov all contained the header, which told the web browser to immediately close every connection. Each time the web browser requested a resource from time.gov, it did so over a new network connection, which required TCP handshake and TLS setup. The JavaScript code assumed that, like NTP, a single network round-trip occurred. Unfortunately, the header forced three round-trips to occur. This incorrect assumption was the root cause of the time.gov issue. As the diagram shows, the server generated the timestamp after two-and-a-half round trips while the client’s guess fell near one-and-a-half. This miscalculation caused a full round trip time of error, more error than if they hadn’t adjusted for network delay at all! Interestingly, the estimate occurred before the HTTP part of the network request began. We know the server didn’t tell us the time before we asked, so this can’t be correct. In practice the situation could be even worse as each round trip can take a different amount of time. In the following example, the TCP handshake and TLS setup took much longer than the HTTP round trip. This caused time.gov to estimate that the server timestamp was generated before the TLS session was established. Network round trips were often fast enough that the error was difficult to notice. Close examination of the network behavior revealed the issue. I see two approaches that could help fix this issue. First would be to change the connection header to . This would allow the web browser to keep the connection open longer, reducing the time-synchronization HTTP request to a single network round trip in most circumstances. This is the approach used by the National Research Council (NRC) Canada web clock . But it’s not a perfect solution. During the initial synchronization, the NRC web clock app is able to use an existing connection. However, this web clock resynchronizes periodically. Later synchronizations are delayed long enough that the earlier connections have already closed, which means a fresh network connection must be created. You can see this behavior by watching the clock: the offset estimate and the estimated network delay change somewhat dramatically after a minute or two. So both the NIST and NRC web clocks are impacted by this bug. The extra network round trips wouldn’t be a problem if we could just measure the HTTP portion of the network request. The “new Date()” approach is very coarse grained and measures much more than intended. An alternate approach uses PerformanceResourceTiming to collect precise network timing information. This interface was designed to provide accurate measurement of each part of the network request, allowing us to measure just the application layer; excluding DNS lookup, connection handshake, TLS initialization, and more. I built an experimental CDN-based web clock to validate the process, which had promising results. I reported the issue to both NIST (on March 17th) and NRC (a month later) with these suggestions. Around April 24th time.gov changed their HTTP headers, enabling keep-alive. I consider the core issue to be fixed as the “round trip” measurement no longer measures multiple round trips. In my testing, the time.gov estimates are now closer to those of NTP. Unfortunately, there are still too many things being measured in time.gov’s “new Date()” approach. Compare how the site estimates the network request duration as compared to Firefox’s network debugging tab and PerformanceResourceTiming’s measurement (more on that in the next section). In this example, the original measurement of 63 ms is still larger than the 49 ms shown in Firefox’s network timing panel and calculated from PerformanceResourceTiming. Here’s a client-side patch that changes time.gov to use PerformanceResourceTiming to calculate the clock offset. Pasting this JavaScript into the developer tools console will re-calculate the round-trip time based on a more precise measurement. It also adds error bounds, which should be included when generating estimates. Note: after ten minutes the page hard-refreshes and this patch is removed. Here’s what that looks like: Note: time.gov and ntpdig invert the sign of the computed offset. This example shows the modified time.gov can provide better precision. With that said, please do not consider my patch as a better “official time” as I provide no warranty. NIST should consider adjusting how time.gov measures network timing. These sorts of hard to diagnose issues lurk in every complex computer system. You know your software isn’t performing the way it should, but you can’t locate the problem. With so many architectural layers it can feel daunting to know where to start. As a DevOps consultant, I love guiding my clients to a deeper understanding of their software. Sometimes a single header is all that’s holding you back. The time.gov bug is a good example of how challenging things can get. The web application made assumptions about network behavior that didn’t hold up in the production environment. Local testing was unlikely to detect this issue as the development environment likely used different headers. It seems possible that the HTTP Connection header was modified some time after time.gov launched, perhaps by a network team changing load balancers or web application firewalls. It’s even possible that this issue did not reproduce on NIST networks, as the network path may traverse different middle boxes which provide different HTTP headers. A perfect storm of challenges that requires going back to first principles.

html HTML javascript JavaScript performance Performance css CSS
0 views
Den Odell 1 months ago

The Design-Minded Engineer

In 2002, I was a few weeks into a new role, my second since completing my degree two years earlier. I was a frontend engineer at AKQA , a creative agency in London. I’d just finished one of my first projects, building out a new page for a client, and I thought it looked great. So I told the designer it was done. A while later, I heard him in the engineering room. Den? Where’s Den? He came over to my desk and opened Photoshop. He placed a screenshot of my build on one layer and his original design on another, dropped the opacity to 50%, and let me see the difference for myself. Everything was off. Spacing, alignment, type rendering, visual weight. Not by miles, but by enough. Enough that the thing I’d built felt different from the thing he’d designed, even though I’d have sworn they were identical. I was embarrassed. I was so sure it was done. Something rewired in my brain that day. Not a new skill, exactly, but a new way of seeing. I had started to become an engineer who could see what I’d built through the eyes of the designer, not just through my own. The gap between what designers intend and what engineers ship is one of the oldest problems in our industry, and it has defined my career since that day. I’ve come to believe it’s the most undervalued skill in software engineering. Brian Lovin, currently at Notion, wrote recently about the difficulty of hiring what he called “design-minded frontend engineers.” The struggle he describes is widely shared. There are engineers who can code, and there are designers who can design, but the engineers who can honor design intent while building the real product? That pool is vanishingly small. Lovin’s framing was about frontend engineers specifically, but the gap he’s describing isn’t a web problem; it’s a general UI problem. Mobile engineers ship apps that drift from their designs. Embedded engineers build interfaces for cars, appliances, ATMs, point-of-sale terminals, and medical devices where a misjudged tap target has real-world consequences. Anywhere a human touches software, someone has to close the space between what was designed and what gets built, and that someone is an engineer regardless of what platform they work on. What’s striking about this gap is how much has been written about it already, and how little has changed. Designers have been naming the problem for years: posts about engineers breaking their designs , articles about the handoff process , and conference talks about the collaboration breakdown . The designer’s perspective on this is a well-established literature. But that literature is written by designers, for designers, and no amount of designers talking to each other about the problem has fixed it, because fixing it was never something designers could do alone. The engineer is the other half of the conversation, and the engineer is the half that has to change. And here’s the thing: this isn’t a new problem that appeared with the rise of design systems or component libraries. It’s been there since the first time a designer handed a mockup to an engineer and got something back that felt almost right but not quite. The gap between the mockup and the shipped product is an engineering problem, and it’s a problem with a solution. The skills required to close it can be taught. The thing to understand about design is that it isn’t the mockup, it’s the experience the person has when they’re using the shipped product. That experience is built by engineers from what designers describe and intend. The mockup is a promise, the feel is what actually ships. One distinction is the Design Engineer . This is someone who occupies a hybrid role: they design and they build. Matthias Ott has written persuasively about design engineering as the structural fix for the design-implementation gap : a role that holds both disciplines at once and makes the gap stop forming in the first place. Companies like Linear and Vercel have made the role famous, and I’m in awe of the people doing it; they are genuinely talented at both sides. But it’s also a luxury solution. Most companies can’t hire for it, and even at companies that do, many design engineers typically focus on design systems or high-fidelity components. Somebody still has to take those components and build the actual product with care. Ott’s prescription is a role; mine is a capability. The role is valuable where companies can hire for it, but the capability is what scales to the rest of us. That somebody is the design-minded engineer . That’s not a new job title; it’s a way of working, of engineering, of caring about how the product looks and feels. A design-minded engineer is not a designer, and their task is not to originate design decisions but to apply and extrapolate them. The goal is for the designer to look at the shipped product and not be able to tell where their design file ended and the engineer’s judgment began. The highest compliment a design-minded engineer can receive is silence from the designer, because silence means you got it right. This isn’t about engineers becoming designers either. Designers should still design, and engineers still build. But the engineer who builds with design judgment ships a different product than the engineer who builds without it. Apply and extrapolate, don’t originate. That’s design-minded engineering. Over the course of my career, from agency work at AKQA for Nike and Ferrari, to global e-commerce at Volvo, to my accessibility and animation work at Canva, I’ve developed a framework for how engineers should engage with design. It comes down to three lenses: 1. User behavior. What will people actually do with this? Not what the mockup assumes, but what happens in real conditions. The designer typically designs for one user in one ideal state, while the engineer knows that localized strings reshape layouts in ways the original mockup didn’t account for, that right-to-left languages flip everything, that users will hit this screen on a train with one bar of signal halfway through a checkout flow. The design-minded engineer sees those realities and addresses them before they become bugs. 2. Performance. What’s the hidden cost the user pays that the mockup can’t show? A prototype can promise buttery smooth interactions, but if the shipped product has 80ms input latency instead of 16ms, users feel the difference even if they can’t articulate it. Samsung famously copied Apple’s pinch-to-zoom gesture, matching the visual design almost exactly, but the interaction felt wrong because the engineering underneath didn’t match the design promise. Performance is a design decision, and engineers are the only ones who can make it real. 3. Accessibility. Who gets excluded? This is the most defensible concern you can raise in any design review, and it’s the one most often deferred. Accessibility isn’t a compliance checkbox but a signal of engineering quality, and more than that, a signal of care. Passing WCAG scores while the actual screen reader experience is incomprehensible doesn’t count. Turning on VoiceOver and navigating your own product with different input types does. These three lenses aren’t reasons to block work or push back on designers; they’re the opposite. They’re how an engineer earns a seat at the design table, by caring about design outcomes through a lens that designers recognize and respect. Design-minded engineering isn’t only analytical, though. There’s a whole dimension that’s about creative contribution. Engineers know things designers don’t, because the two disciplines have different vantage points. When CSS container queries landed, or view transitions went from spec to stable, or SwiftUI’s animation APIs opened up new motion possibilities on iOS, those weren’t just engineering milestones. They were creative unlocks. Each expanded what was possible in a user interface, and engineers saw the new ground first. At AKQA, I worked on a Ferrari project not long after CSS got the function for custom easing curves. We built a dropdown menu with easing curves derived from actual race car telemetry data. It was the kind of contribution that only happens when an engineer is in the room during the creative conversation, feeding into it, not waiting downstream for a handoff. The designer is constrained by what they think is possible, and the design-minded engineer knows what actually is. Stay current with new platform capabilities. You’ll have options to bring to every brainstorm, and the team designs something they couldn’t have designed without you. If there’s a single idea in this framework that I think resonates most immediately with working engineers, it’s gap states . Every mockup shows the happy path. The page loaded, the data arrived, the user is logged in, the content fits perfectly. But shipped products have to account for loading states, error states, empty states, skeleton screens, offline fallbacks, optimistic updates, expired sessions, permission denials, locale-specific edge cases, and a dozen other conditions that never appeared in any design file. These aren’t afterthoughts, they are the product for a significant percentage of real user sessions. The engineer who treats them as first-class design problems, who asks “what does this screen look like with no data?” before leaving the design review, is doing design-minded engineering. The craft applied to these in-between moments is what separates products that feel polished from products that feel like they were built from a mockup and nothing else. Everything I’ve described so far assumes a design exists. But what happens when it doesn’t? This is where design-minded engineering faces its real exam. Every engineer eventually encounters a situation where they need to build something with incomplete or absent design direction: a feature that needs shipping before the designer can get to it, a prototype built from raw data and business requirements, or a long stretch where the team is between designers. I’ve lived both extremes. I’ve been handed raw data and asked to build something that felt intentional with no design input at all. And at Volvo, before a design system existed, I spent six months without my designer, building across 70 markets from data and whatever fragments of earlier design work I could find. The early weeks were the hardest. You don’t realize how much of your confidence comes from having a design to reference until it’s gone. Every decision that would normally take seconds suddenly has weight. What size should this type be? How much padding feels right here? Is this hierarchy clear, or am I just used to looking at it? There’s no mockup to check against, no designer to ask; just you, the data, and whatever design judgment you’ve accumulated over the years. What I leaned on was the three lenses. User behavior first: what will real people in real markets actually do with this? I knew German strings would be 40% longer than English, that some markets read right to left, that a checkout flow designed for English speakers in a desktop browser would encounter completely different friction points when a user in Saudi Arabia was navigating it in Arabic on a phone. I knew the edge cases because I’d been cataloging them for years. Performance second: what’s the cost of every decision on the devices our users actually have? Not the specced-out MacBook Pro I was developing on, but the mid-range Android in Jakarta, or the spotty connection in rural Norway. Accessibility third: who gets excluded if I get this wrong? Those lenses didn’t replace the designer, but they gave me a structure for making principled decisions. Instead of guessing what looked good, I was solving for outcomes I could measure or defend. The visual choices I couldn’t reason about, I kept conservative. I matched existing patterns in the system and extrapolated from what the designer had already established rather than inventing something new. Exercising restraint is the counterintuitive part. When the designer is gone, the temptation is to fill the creative vacuum, to make the bold call, to prove you can do both jobs. But that’s exactly the wrong instinct. The design-minded engineer’s job in that situation is to make the product feel continuous with the designer’s existing intent, not to introduce a new voice. Every time I reached for a decision I wasn’t sure about, I asked myself: if the designer were here, would this surprise them? If the answer was yes, I pulled back and found a more conservative path. Boring is better than wrong when you’re operating without a net. When the designer eventually returned and reviewed what I’d built, he requested only minor tweaks. Not “what were you thinking?” Just the micro-level adjustments that separate a designer’s instinct from an engineer’s principled approach. That outcome is the proof of concept for the entire framework. It’s also an honest illustration of where designer instinct is hardest to replicate: the micro-level decisions about spacing, weight, and proportion that feel obvious only after someone with that instinct points them out. Design-minded engineering can get you remarkably close, but recognizing where “close” falls short is part of the skill. Part of developing design fluency is learning to spot where it went wrong. The industry has no shortage of cautionary tales: Snapchat’s 2018 redesign, the hamburger menu epidemic, dark patterns that optimize for conversion while destroying trust, and recently the rise of AI-generated UI that looks plausible and works incoherently. The hamburger menu is an instructive example, because it felt like such an elegant engineering solution at the time. Screen space is limited on mobile, navigation takes up room, so you collapse it behind an icon. Problem solved. Except the data kept telling the same story: users don’t open menus they can’t see. Features hidden behind hamburger menus saw dramatically lower engagement than features visible in the interface. The space-saving argument won on logic but lost on human behavior, and the design-minded engineer’s contribution in that room wasn’t to have a better opinion about navigation but to notice that the argument for hiding things needed to account for whether users would ever find them again. AI is making it easier than ever to generate UI code, and you can prompt your way to a working interface in minutes. That’s exactly why design judgment matters more today than ever. AI is a powerful tool for design-minded engineers. It can generate locale variants, simulate gap states, produce working prototypes during brainstorms, and catch accessibility issues before the design review. But it can’t evaluate whether the result feels right. It can’t decide whether an animation serves the interaction or just decorates it. It can’t tell you that the loading state your component shows for 200ms on a fast connection will hang for four seconds on a train in rural Portugal. The risk I see emerging is subtler than “AI will replace designers.” It’s that engineers will start treating AI as a substitute for design judgment. Need a loading state? Ask the model to generate one. Need an error message? Let it write the copy. Need to decide how a component should behave on mobile? Prompt for options and pick the one that looks reasonable. Each individual decision might be fine, but the cumulative effect is an interface that has no point of view, no coherence, no sense that a human being thought carefully about what the person using it actually needs. It’s design by default rather than design by intent. The design-minded engineer is the counterweight to that drift. They’re the person who looks at the AI-generated output and applies the three lenses: does this serve real user behavior? What’s the performance cost? Who gets left behind? Those questions require human judgment, not better prompts. The execution can be accelerated; the judgment cannot. I’ve been developing this framework across 25 years in some of the most design-demanding engineering environments in the industry. What I’ve learned is that design fluency isn’t a talent you either have or you don’t. It’s a skill that can be taught, practiced, and developed, and it grows in ways that are hard to see in the moment but obvious in retrospect. The engineer who starts paying attention to spacing in their first year starts noticing type hierarchy in their third. By year five, they’re catching interaction patterns that don’t match the design intent before the designer does. By year ten, they’re the engineer the designer wants in the room when the hard decisions get made. By year fifteen, they’re the Staff engineer who catches a broken loading state in code review and can articulate exactly why it matters, not just that it looks wrong, but what it does to the user’s trust in the product. None of that happens overnight, but it starts with a single decision: to care about what you’re building beyond whether it works. The misalignments I catch now in code review, the edge cases I see before they ship, the interactions I can tell are wrong before anyone else does: none of it would have registered with me in 2002. The AKQA designer with the Photoshop overlay taught me to look. That skill isn’t an innate talent, it’s something any engineer can learn to see for themselves with practice. And the engineers who become design-minded are the ones designers stop having to chase.

frontend Frontend design Design career Career css CSS
0 views
Chris Coyier 1 months ago

It’s an assumed truth that Safari is better for battery life — without data to support it.

This pseudo-truth just bugs me. I hear it all the the time. People saying they choose Safari as a browser because it’s better for their battery. But there isn’t any data (that I know of) that proves that Safari is more efficient at battery usage than any other browser. I applaud Matt Birchler who did real testing on this (2024). He scripted a 20 minute loop that watched YouTube videos, scrolled Mastodon, scrolled websites, and typed in Google Docs. He ran it in Chrome vs Safari for 3 hours each 6 times. The data actually showed Chrome was a little bit better. You can choose Safari because you like how it feels, or it’s support of certain features, or heck even because it’s the default browser on Apple stuff and sometimes it feels good to just go with the grain. But the battery life argument just doesn’t hold water. Maybe it did at one time! Remember when we used to care about CSS selector performance, then people like Steve Souders, Nicole Sullivan, Ben Frain, Harry Roberts, etc did testing and proved it mostly just doesn’t matter? Remember when inline CSS was always bad, then it turned out to become a recommended performance enhancement sometimes? Remember when we all put scripts at the bottom of the , then we got the attribute and it turns out its often better to leave them in the head now? Remember when FOUT as bad (layout shift!) then it was good again (users don’t like seeing nothing!)? Sometimes we gotta just update our thinking. I’m sure I’ve got loads of outdates factoids in my head that need a reboot.

performance Performance css CSS
0 views