2026-05-16T22:31:43Z https://yabu.me That HTML Blog https://yabu.me/npub1a2rppvw4uq5s4gqn6rgfw5en4p946qt2asxs6a4yt9f0szde3vlqfm6tz3 https://cdn.masto.host/intuitivefuturecom/accounts/avatars/113/572/919/267/679/419/original/9549481410678b75.png https://cdn.masto.host/intuitivefuturecom/accounts/avatars/113/572/919/267/679/419/original/9549481410678b75.png https://yabu.me/nevent1qqszzuflykm3wsc07m8uc6e0rmqqv54l6kzurxfrxshd82q03yj62pczyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nuun9nkj Scalable Vector Graphics (SVG) is the image format for the web that isn’t raster (aka pixel-based) like JPEG and PNG.<br/><br/>Something which sets #SVG apart from other “image formats” however is that it’s more than an image format. It’s markup…which means it can be embedded in your #HTML markup.<br/><br/>This gives SVG superpowers, as <span itemprop="mentions" itemscope itemtype="https://schema.org/Person"><a itemprop="url" href="/npub1haaf4q987uxel0nylzy7az6y3zvut4u77z9gaqy49ldkp2r3yr8s49h420" class="bg-lavender dark:prose:text-neutral-50 dark:text-neutral-50 dark:bg-garnet px-1"><span>Carmen Ansio</span> (<span class="italic">npub1haa…h420</span>)</a></span> so eloquently puts it in her fantastic article SVG from Scratch… #WebDev<br/><br/><a href="https://thathtml.blog/2026/05/best-svg-intro-guide/">https://thathtml.blog/2026/05/best-svg-intro-guide/</a> 2026-05-01T17:43:54Z https://yabu.me/nevent1qqswekx8le2ccmd5gw2xgpdxz50f97khh9zhv0970ktulptffg4h6hqzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nununewt For *two years* now we’ve been covering the circuitous path wending its way towards getting a Pinterest-style layout mode into #CSS (often called “masonry” layout). 😅<br/><br/>Thankfully our long #WebDev nightmare is finally over, and masonry layout has been solved! 🎉 Now called CSS Grid Lanes, it’s available today in WebKit-based browsers such as Safari 26.4 as well as the latest GNOME Web:<br/><br/><a href="https://thathtml.blog/2026/04/masonry-now-css-grid-lanes/">https://thathtml.blog/2026/04/masonry-now-css-grid-lanes/</a> 2026-04-28T15:05:33Z https://yabu.me/nevent1qqsz3mzh6269dwjsdxn9jv9r5x3fl8admsccxh8x58aktp4nvnjhe6qzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nuwy5hmm Let’s say you have an #HTML element (like &lt;form&gt;) which has been instantiated as an object in your DOM.<br/><br/>At that exact moment, you want to enhance the form by adding new behavior via #JavaScript.<br/><br/>How does a wad of code get spun up in a 1:1 relationship with the element to be enhanced?<br/><br/>Herein is explained a &#34;bad&#34; way, and two good vanilla #WebDev ways this can be accomplished:<br/><br/><a href="https://thathtml.blog/2026/04/two-paradigms-for-enhancing-html-tags/">https://thathtml.blog/2026/04/two-paradigms-for-enhancing-html-tags/</a> 2026-04-24T20:50:17Z https://yabu.me/nevent1qqsf3uelxrgss27nlmv3d6euskkhf5zz50wxyvss5ew2kl0qf6vtavszyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nutt7r05 An announcement from our older sibling site, The Spicy Web:<br/><br/><a href="https://www.spicyweb.dev/sunsetting-the-spicy-web/">https://www.spicyweb.dev/sunsetting-the-spicy-web/</a><br/><br/>TL;DR: That HTML Blog will continue on just as before! But past #WebDev educational materials published on The Spicy Web will remain archived, frozen in time (that&#39;s the nice thing about static sites…).<br/><br/>Meanwhile, the rebranded Human Web Collective Discord is alive and well, popping even! Join us if you want to talk about all things vanilla web, fediverse, anti-slop, and indie publishing. 2026-04-23T15:19:43Z https://yabu.me/nevent1qqsf95m297qrzhaegvnzcsskzltm8mnr5dr94lzem3l65m4lja6q20gzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nucmxszx This conceptual framework may not be perfect or may be missing a lot of details, but it seems like a good starting point for discussion on what is a &#34;user agent&#34; and what safety protections are afforded to users and the resources being consumed.<br/><br/>Remember, the web has always been &#34;agentic&#34;. The concept of a &#34;user agent&#34; is as old as browsers. The question is: whose authority is the agent acting on? The issues at stake are trust, honesty, safety, privacy, and many others.<br/><br/><a href="https://www.w3.org/TR/web-user-agents/">https://www.w3.org/TR/web-user-agents/</a> 2026-04-08T14:06:44Z https://yabu.me/nevent1qqsvx2ajsmhnc4xd57m2wmpqag7ckvtvpwfawdq7slpd6ckd8gmqvfgzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nucfjtrf ICYMI (I did):<br/><br/><span itemprop="mentions" itemscope itemtype="https://schema.org/Person"><a itemprop="url" href="/npub1sf7l7d33zz968ght93z4v9gkd3pjpcgvuzr0xxh6d2n9022v58ds48gl68" class="bg-lavender dark:prose:text-neutral-50 dark:text-neutral-50 dark:bg-garnet px-1"><span>CodePen</span> (<span class="italic">npub1sf7…gl68</span>)</a></span> 2.0 is now in Public Beta!<br/><br/>Probably the biggest feature by far:<br/><br/>&gt; Pens now have their own file system! Want more than basic HTML, CSS and JS? Add, rename and organize files and folders to sculpt your Pen exactly how you want it.<br/><br/>Sounds pretty epic!<br/><br/><a href="https://codepen.io/beta">https://codepen.io/beta</a> 2026-03-18T16:52:24Z https://yabu.me/nevent1qqsqmrdulzqx5ulx257anwjudzks5fszgz69c9ddhpr8d5jv9kkpqsczyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nunxez9h It&#39;s 2026! Time to set some non-negotiables as work on the Web platform ramps up again.<br/><br/>First one up, a two-parter:<br/><br/>a) the Web is for human users and their user agents (aka browsers). Any network activities not directed and vetted by humans and their designated user agents or backend API calls necessary to facilitate those activities should be seen as malware and subject to blocking/banning.<br/><br/>b) This includes any crawlers which are not acting in service to human agency &amp; information retrieval. 2026-01-05T22:01:13Z https://yabu.me/nevent1qqs27kgch3u2gawuc77h3qtxe5luvdgyzq7409dq9xvrphlf6qeal4szyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nuwvhpf9 Don’t let anyone tell you otherwise.<br/><br/>The Web is the most successful computing platform in history, and it’s all thanks to OOP.<br/><br/>Herein lies a philosophical look at why it’s crucial to become an expert on the many object-oriented APIs in #WebDev and how understanding class hierarchies and instance efficiency allows you to build user-considerate, high-quality applications. Also: monkey patching is NOT a dirty word! 😄<br/><br/>Enlighten yourself:<br/><a href="https://thathtml.blog/2025/12/the-dom-is-a-triumph-of-object-oriented-programming/">https://thathtml.blog/2025/12/the-dom-is-a-triumph-of-object-oriented-programming/</a> 2025-12-18T19:03:28Z https://yabu.me/nevent1qqsthjj890g6er3nxzxvye6ac3yxk2z73kar99g7m3cly2g0lrnry2czyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nuyqxnan RE: <a href="https://mastodon.social/@firefoxwebdevs/115730171895808634">https://mastodon.social/@firefoxwebdevs/115730171895808634</a><br/><br/>A quick rundown on Invoker Commands by <span itemprop="mentions" itemscope itemtype="https://schema.org/Person"><a itemprop="url" href="/npub1dpjjsyh6ag5p0anhrpzp8d73var3v5l06t4aktylcgslef40ff2q08e0jl" class="bg-lavender dark:prose:text-neutral-50 dark:text-neutral-50 dark:bg-garnet px-1"><span>Jake Archibald</span> (<span class="italic">npub1dpj…e0jl</span>)</a></span><br/><br/>We&#39;ve written about this a lot on the blog and will no doubt have more to say now that the need to polyfill this is quickly starting to fade. It&#39;s truly exciting to have a web-native API which can solve the “wire up a click to perform a task” problem. #WebDev #HTML #JavaScript<blockquote class="border-l-05rem border-l-strongpink border-solid"><div class="-ml-4 bg-gradient-to-r from-gray-100 dark:from-zinc-800 to-transparent mr-0 mt-0 mb-4 pl-4 pr-2 py-2">quoting <br/><span itemprop="mentions" itemscope itemtype="https://schema.org/Article"><a itemprop="url" href="/note1a7fy9n46r6weahpf2yjrvasmcrrr9rzce383cz0azsrj29szf9qqcjsa0p" class="bg-lavender dark:prose:text-neutral-50 dark:text-neutral-50 dark:bg-garnet px-1">note1a7f…sa0p</a></span><br/> </div> HTML invoker commands are newly baseline! Here's how they work…<br/><video controls width="100%" class="max-h-[90vh] bg-neutral-300 dark:bg-zinc-700"><source src="https://files.mastodon.social/media_attachments/files/115/730/147/616/175/500/original/de4da486da9c8266.mp4"></video><br/> </blockquote> 2025-12-16T21:01:58Z https://yabu.me/nevent1qqspc5ty3n282rrk9ajrpjhur4mvl7wffkgtnu6a3h5sp68m3le9ezgzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nucr4maw This entire thread is *fantastic.* If you&#39;re a history buff *and* a markup nerd, doesn&#39;t get any better than this! <span itemprop="mentions" itemscope itemtype="https://schema.org/Person"><a itemprop="url" href="/npub147879x6ctj4qjvf7avshj5ldmexnh9guckr2wfhjsh8a87pv800qnqy4ag" class="bg-lavender dark:prose:text-neutral-50 dark:text-neutral-50 dark:bg-garnet px-1"><span>Marcin Wichary</span> (<span class="italic">npub1478…y4ag</span>)</a></span> <a href="https://mastodon.online/@mwichary/114713601903171155">https://mastodon.online/@mwichary/114713601903171155</a> 2025-12-15T20:34:36Z https://yabu.me/nevent1qqspgn3l0e9lx566pjzryvvph45n80cc72786h75lspj5wlrw0egcaszyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nu3d5jhk By Russ Weakley:<br/><br/>How does the Shadow DOM appear in the accessibility tree?<br/><br/>Browsers flatten the shadow tree when building the accessibility tree. Flattening removes the accessibility boundary of the shadow root and exposes the internal nodes as if they were normal children in the accessibility tree, not the DOM tree.<br/><br/>#HTML #WebDev #Accessibility<br/><br/><a href="https://www.maxdesign.com.au/articles/the-shadow-dom.html">https://www.maxdesign.com.au/articles/the-shadow-dom.html</a> 2025-12-11T19:43:32Z https://yabu.me/nevent1qqsfv0yj5yqgmdryhw8r7s0rhpv2fs7wkm7967z8q44gq4hec7aawlszyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nuj7gprc Perhaps it’s time to embrace real web open standard .js files which don’t require any build steps or tooling to execute properly, all while utilizing the power combo of JSDoc + tsc to gain all of the benefits of type hints in IDEs and type checking in CI.<br/><br/>Let’s dive into some examples!<br/>#WebDev #JavaScript<br/><br/><a href="https://thathtml.blog/2025/12/nuances-of-typing-with-jsdoc/">https://thathtml.blog/2025/12/nuances-of-typing-with-jsdoc/</a> 2025-12-03T06:19:00Z https://yabu.me/nevent1qqs8vqxurulftruzxcs2v96sdvu4ev8nml6qshjqdww75pnae9res7gzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nu493s2r *whispers* HTML is also a markup language where you can define your own tags designed specifically for your needs 🤓<br/><a href="https://front-end.social/@randomMDN/115492970041613285">https://front-end.social/@randomMDN/115492970041613285</a> 2025-11-04T20:11:39Z https://yabu.me/nevent1qqsqyvq8f49axvcq50y4ufjz6lnw0g59fqmelsy2gx47z3qre20cd5gzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nu3fphzv Did you know Node.js has a Rocket Turtle mascot?<br/><br/>TIL!!<br/> <img src="https://cdn.masto.host/intuitivefuturecom/media_attachments/files/115/465/343/308/741/153/original/06f1d23e88290168.png"> <br/> 2025-10-30T21:55:22Z https://yabu.me/nevent1qqsp5h9j3v9wn0m5ku9q5gdqda7clkllzvlq3geq7hmqmsdsnl9j0qgzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nu7pnd8x If you haven&#39;t yet tried out cross-document view transitions, you are missing out on one of the absolute coolest things to hit the world of #WebDev this decade.<br/><br/>To say it&#39;s a “game changer” is putting it mildly! 🤯 2025-10-27T18:27:19Z https://yabu.me/nevent1qqs2sgzsy2vkct02u5axk0etk4lx09vfgzay97g50umazsappn8kj2czyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nu7q6v5x Previously we wrote about Reciprocate, a library for adding signal-based reactivity to server-rendered #HTML #WebComponents.<br/><br/>Pretty cool problems to have solved, but what if you wanted more dynamic client-side smarts and the ability to write declarative templates with a trusty html`` function?<br/><br/>Tada! 🎉 Thanks to Joe Pea <span itemprop="mentions" itemscope itemtype="https://schema.org/Person"><a itemprop="url" href="/npub1fjm52atgqqk434vvjd9e2r4qmlpalcaggngdjz5lmqqjt0vg0gxszljz47" class="bg-lavender dark:prose:text-neutral-50 dark:text-neutral-50 dark:bg-garnet px-1"><span>Joe Pea</span> (<span class="italic">npub1fjm…jz47</span>)</a></span> that #WebDev problem has also been solved. Wire up these two solutions together, and you&#39;ll be authoring new UI components using familiar DX. 🙌<br/><a href="https://thathtml.blog/2025/10/nimble-html-adds-great-dx-to-ui-components/">https://thathtml.blog/2025/10/nimble-html-adds-great-dx-to-ui-components/</a> 2025-10-17T04:43:26Z https://yabu.me/nevent1qqswre52agv5ua9gnqthht9f93e3xrwac9xyamn30s3t4a7q0edehgqzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nurwemje This is fantastic news! 🎉<br/><br/>Lit remains the gold standard in “I want to author #WebComponents but I must have DX I&#39;m already familiar with”. It&#39;s truly an incredible project. It powers the best UI framework (imo) in the biz, <span itemprop="mentions" itemscope itemtype="https://schema.org/Person"><a itemprop="url" href="/npub1s7sk46qeq2jnqw4zzpf9pwgydrsugzw92t7j3ryc6d8mrnqt9k2qs6047y" class="bg-lavender dark:prose:text-neutral-50 dark:text-neutral-50 dark:bg-garnet px-1"><span>Web Awesome</span> (<span class="italic">npub1s7s…047y</span>)</a></span>. It was used to build Adobe Photoshop for the web. It was used in Reddit&#39;s latest redesign.<br/><br/>Wonderful to see it&#39;s been gifted to the community and is no longer a “Google” project. Here&#39;s to many more years of being Lit! 🔥<br/><br/><a href="https://lit.dev/blog/2025-10-14-openjs/">https://lit.dev/blog/2025-10-14-openjs/</a> 2025-10-14T22:13:36Z https://yabu.me/nevent1qqstl5ryah42h93usvfg9p8a0gten83pkuyzfws99dp7fqpeacfghjqzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nuu748x2 In reply to <a href='/nevent1qqs9uw9ktf3kjz8wkqxfwznff7tgxnjm9lm90km2kgfp49z75ds6l2q8qgpfx'>nevent1q…gpfx</a><br/>_________________________<br/><br/>What would you say about the common refrain that the Tailwind CSS output is &#34;optimized&#34; because it&#39;s just a bunch of utilities to support all the class names in HTML? “Regular&#34; CSS is too heavy, so the claim goes. 2025-10-02T19:37:23Z https://yabu.me/nevent1qqspaythjjetafue90tdvtmcqnn5zy9mfy8wyzcl63pd4pt7c3qmyugzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nuh65gwl The path to enlightenment is inspecting the assets which get shipped to the browser on a regular basis.<br/><a href="https://toot.cafe/@slightlyoff/115301580245100653">https://toot.cafe/@slightlyoff/115301580245100653</a> 2025-10-02T00:00:27Z https://yabu.me/nevent1qqsd06hsakg2fjckzsf5azjgn5tkj73flqkz6zxa7359c4r7gxt8egszyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nujnamj8 I cannot sing the praises of fetch loudly enough. As a #JavaScript #WebDev, having ready access to this native web API where you can pull down #HTML fragments or #JSON data with a line or two of code is simply brilliant.<br/><br/>But when shipping robust production code, how do you handle unpredictable network scenarios gracefully and provide a good user experience?<br/><br/>One solution: a tiny 2.3KB wrapper around “fetch” called “ffetch”. Here are some of its features:<br/><br/><a href="https://thathtml.blog/2025/09/give-fetch-a-bit-more-oomph/">https://thathtml.blog/2025/09/give-fetch-a-bit-more-oomph/</a> 2025-09-18T17:38:23Z https://yabu.me/nevent1qqsgrxhy3td0fnseraltcmw42jqvf494aynhjjm2lt2lzklnpyxsxpgzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nug7ljkp Announcing Reciprocate, a Sweet Solution for Making Your HTML Web Components Reactive<br/><br/>Have you ever been chipping away on vanilla #WebComponents when you began to wonder “hey waitaminute…how do I make it so when I set this #JavaScript property, the equivalent #HTML attribute is updated? And if I set this attribute, the equivalent property is updated? Or when either is updated, my component will re-render?! Where are the APIs for this stuff??”<br/><br/>Worry no longer! 🤓 #WebDev<br/><br/><a href="https://thathtml.blog/2025/09/reciprocate-reactivity-for-html-web-components/">https://thathtml.blog/2025/09/reciprocate-reactivity-for-html-web-components/</a> 2025-09-08T18:40:52Z https://yabu.me/nevent1qqsrg03lk3823qutlh8uqsh7hkhrur5sd6t2j2s7dh9nkwsxtrq0d8gzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nuw7cfke This is still one of the coolest #WebComponents patterns ever. 🥰<br/><br/>#WebDev #JavaScript<br/> <img src="https://cdn.masto.host/intuitivefuturecom/media_attachments/files/115/152/892/751/808/364/original/cc8dee847dd65076.png"> <br/> 2025-09-05T17:35:05Z https://yabu.me/nevent1qqsy4vwwv57jere3wlk9nv3mlutewgf5gxljele03n5rarrrkyk3k9qzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nul8etzz Hey y&#39;all, a new #fediverse social web forum is in da house!! 🎉<br/><br/>Talk learning #WebDev from base principles and help fellow newbies experience the joys of vanilla #HTML #CSS #JavaScript and #WebComponents! (with a sprinkle of lightweight tools to smooth out the bumps in the road ☺️)<br/><br/>Check it out:<br/><br/><a href="https://humansare.social/c/indie_web_dev">https://humansare.social/c/indie_web_dev</a> 2025-08-20T16:21:38Z https://yabu.me/nevent1qqsfhw8hns7pa3y7lh2rmm0efmqcx89qaf63a94yz9ah3nzjwqzdc2qzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nuqkjvdx Signals, a reactive primitive popularized by many #JavaScript frameworks and libraries, makes it much easier to add declarative binding to your #HTML using basic vanilla DOM techniques + signal effects.<br/><br/>I haven’t had a concrete example to show off just how simple yet powerful this can be…until now! 😎<br/><br/>Here&#39;s the ubiquitous counter demo, todo list with a completion count, and typewriter printing out a message—all with a binding solution in only 20 lines of code! #WebDev<br/><br/><a href="https://thathtml.blog/2025/08/declarative-html-binding-with-signals/">https://thathtml.blog/2025/08/declarative-html-binding-with-signals/</a> 2025-08-08T20:43:07Z https://yabu.me/nevent1qqs0zt8rpp30zxzqwkwy75gnzzryap082mc6j5xuml2jwwgs0w82z5qzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nuu89rsm And here we are.<br/> <img src="https://cdn.masto.host/intuitivefuturecom/media_attachments/files/114/988/391/100/703/231/original/3d7f8f54ae1d51df.jpeg"> <br/> 2025-08-07T16:20:09Z https://yabu.me/nevent1qqst48gd8ukgsgz2qux2tss4tw8qr0y63gmhkl0v84cq6x8cjdju6vczyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nukxyhw7 And now, the post you&#39;ve all been waiting for…<br/><br/>(probably not, but you get it anyway!) 😂<br/><br/>The #CSS Framework Wars™ have come to an end. And we can thank…#Tailwind v4 for that! 🤯<br/><br/>Freely compose UI using native CSS variables &amp; syntax, Tailwind design tokens in CSS (configured with CSS!), and Tailwind utility classes only where it makes sense. Hallelujah! 🙌<br/><br/>As historically one of Tailwind&#39;s biggest critics it is *weird* to sing its praises. 2025&#39;s biggest #WebDev surprise?<br/><a href="https://thathtml.blog/2025/08/tailwind-and-css-friends-at-last/">https://thathtml.blog/2025/08/tailwind-and-css-friends-at-last/</a> 2025-08-04T17:13:53Z https://yabu.me/nevent1qqstr2hu3wvg5s0pm85g2uv4n584ttvck9msqcn5n7ka2nmcagdma3qzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nuy3gld2 The Invoker Commands API is the new hotness for a declarative #HTML solution to the problem “click and see something happen!!”<br/><br/>However…<br/><br/>If we’re inside shadow DOM and the button being clicked is supposed to do a thing via its host component, then uh, nope. 🤨<br/><br/>Thankfully there’s always a workaround in the Wide World of the Web, so I’ve written it up and here it is!<br/><br/>😁 Yay for building directly on top of platform mechanics. 👏 #JavaScript #WebComponents #WebDev<br/><br/><a href="https://thathtml.blog/2025/07/more-fun-with-invoker-commands-web-components/">https://thathtml.blog/2025/07/more-fun-with-invoker-commands-web-components/</a> 2025-07-25T17:38:50Z https://yabu.me/nevent1qqsygxduqp7kg4shwka24qzkdy3nwpwxh2njl2vl98d0mllsxjy96wgzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nuwyd88f Ever since #CSS backdrop-filter became a thing, combined with careful usage of gradients and shadowing it’s allowed #WebDev designers to make objects appear glassy to varying degrees.<br/><br/>No doubt we’ll now see more attention paid to bringing elements of “glassmorphism” to web-based design systems. While I don’t recommend trying to recreate Apple’s Liquid Glass effects verbatim, we can use it as a point of inspiration for designing our own uniquely delightful interfaces:<br/><br/><a href="https://thathtml.blog/2025/07/clever-backdrop-filtering-for-eyecatching-glass-effects/">https://thathtml.blog/2025/07/clever-backdrop-filtering-for-eyecatching-glass-effects/</a> 2025-07-18T16:09:34Z https://yabu.me/nevent1qqszplezvlxftgsrta94ez2fzf7lhs6qum0lsrz4hy3sxep8sqddarczyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nucm69kd Just a reminder that MCP is the new Google AMP.<br/><br/>Avoid it like the plague. Don&#39;t use it, don&#39;t implement it, and by the love of all that is holy *don&#39;t allow Big AI to dominate the open web like this.*<br/><br/>Your future self will thank you. 2025-07-16T16:17:27Z https://yabu.me/nevent1qqsfl6than6n4wh8hynrgtvgygv54hjlmjfhseejpspw2ay6v0llkgqzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nu4z06kr I almost titled this “Yo dawg, I herd you like windows so I put windows in yo windows so you can use windows while ur using windows” 😂<br/><br/>Here&#39;s the deal:<br/><br/>I’ve been mulling over some interface concepts for a new app I’m designing, and it occurred to me it might make sense to use an old-school desktop metaphor for organizing the “documents”.<br/><br/>All of a sudden I wondered: maybe there’s already a good #JS library which can do the heavy lifting for me? Answer: there is! #WebDev<br/><a href="https://thathtml.blog/2025/07/put-windows-in-your-web-app-with-winbox/">https://thathtml.blog/2025/07/put-windows-in-your-web-app-with-winbox/</a> 2025-07-16T02:44:51Z https://yabu.me/nevent1qqstqs3rqpstwvdk4hlne9d65kxqlr62pqutgfmms6qxa2pj0glgnkgzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nu823cuj Move over Bootstrap.<br/><br/>Web Awesome is an awesome successor to what in my opinion was already the best open source #WebComponents library (Shoelace) on the market. Now we have the best #CSS framework on the market.<br/><br/>All of the CSS is…um…just CSS and all of the components are…um…just web components. Native #WebDev APIs across the board. 🙌<br/><br/>Take a first look at the brand new public beta:<br/><br/><a href="https://thathtml.blog/2025/07/web-awesome-is-the-first-native-component-framework/">https://thathtml.blog/2025/07/web-awesome-is-the-first-native-component-framework/</a> 2025-07-11T20:10:24Z https://yabu.me/nevent1qqsf2u56qpfx53x33699jjzk3xhpvcxudlxypyrm665gj6lf27ur36szyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nuyhf7n6 Oh wow, do mine eyes deceive me?<br/><br/>No, it&#39;s true!<br/><br/>That HTML Blog&#39;s newsletter is back online! Get ready for regular updates once again on all things vanilla #WebDev #HTML #CSS #JavaScript and the paradigms, protocols, &amp; people who make the magic happen.<br/><br/>(Now&#39;s a good time to subscribe, if you haven&#39;t already! ☺️)<br/><br/><a href="https://buttondown.com/thathtmlblog/archive/26-hello-again-and-why-youre-here/">https://buttondown.com/thathtmlblog/archive/26-hello-again-and-why-youre-here/</a> 2025-07-01T22:21:51Z https://yabu.me/nevent1qqsxkdqalscyst2q4genx8hvlsc9j764m2sx0l5j6pq4auumv5e54pgzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nufd24sw I hate saying things which seem blindingly obvious, but when Famous People™ such as Theo on YouTube make these basic mistakes, I wonder. 🧐<br/><br/>So here you go:<br/><br/>`document.querySelector(&#34;# my-dumb-button&#34;).addEventListener(...)` is completely obsolete in the year 2025.<br/><br/>Never do that again please. You don&#39;t need to!<br/><br/>If you&#39;re wondering “well, what should I do instead?”, leave a comment and we&#39;ll talk about what to do instead. Apparently it will BLOW YOUR MIND! 😂<br/><br/>#HTML #JavaScript #WebComponents 2025-06-17T17:55:56Z https://yabu.me/nevent1qqsvtxzsvf59xh76dsv6956sltaadusgq36637cnlk93eluj9h3qynczyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nu0qsgd3 How do you typically mount some #JavaScript behavior to an #HTML page? #WebDev 2025-04-29T17:50:53Z https://yabu.me/nevent1qqsyhjcrud8h6pjm0xsvfn5k0ufy753fyqs7kf4mr7z0eupcge66czszyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nut3zvkv 🚨🚨🚨🚨🚨 ❗❗<br/><br/><a href="https://www.theverge.com/news/653882/openai-chrome-google-us-judge">https://www.theverge.com/news/653882/openai-chrome-google-us-judge</a> 2025-04-22T21:02:09Z https://yabu.me/nevent1qqsd4lydccx9allwatpuv3659plpe8ku28cp430l54kayqkjce5tz2qzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nux7smpv Since we last reported on the back &amp; forth regarding defining a &#34;masonry layout&#34; #CSS syntax, an intriguing development has transpired!<br/><br/>Jen Simmons et al. over at the WebKit Blog have written about a third possible path forward, and it has implications beyond merely implementing masonry layout. It is the initial steps towards formulating a unified layout system that blurs the lines between flexbox and grid. This new #WebDev concept is tentatively being called Item Flow.<br/><br/><a href="https://thathtml.blog/2025/04/unified-layout-system-could-happen/">https://thathtml.blog/2025/04/unified-layout-system-could-happen/</a> 2025-04-15T04:17:02Z https://yabu.me/nevent1qqsfvmngcmv6pp3chvasrj078mggww6x77mu9sr4wyrur4mnu7afdaszyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nuv62qll What can I say? I’m a nerd for Nord.<br/><br/>But seriously, you should most def give the Nord design system a look-see because the docs are seriously impressive—my go-to whenever I’m tasked to provide examples of how to build great design system documentation.<br/><br/>One of its principal developers, <span itemprop="mentions" itemscope itemtype="https://schema.org/Person"><a itemprop="url" href="/npub1w9tamta6569jgxclmwgpcy3tpdxkkgcad8nhg998kle4n60e3dzsfpa2ap" class="bg-lavender dark:prose:text-neutral-50 dark:text-neutral-50 dark:bg-garnet px-1"><span>Dave 🧱 :cursor_pointer:</span> (<span class="italic">npub1w9t…a2ap</span>)</a></span> (who recently moved on to join the Polaris team at Shopify), recently joined the dynamic duo of Dave &amp; Chris on <span itemprop="mentions" itemscope itemtype="https://schema.org/Person"><a itemprop="url" href="/npub1f774u7wd8pkk75lqhnt82t5l76vqx8wadnacuxvv8faqvlc4xh8s07twck" class="bg-lavender dark:prose:text-neutral-50 dark:text-neutral-50 dark:bg-garnet px-1"><span>ShopTalk Show</span> (<span class="italic">npub1f77…twck</span>)</a></span> to talk all about the Nord design system:<br/><br/><a href="https://thathtml.blog/2025/03/nord-health-design-system-david-darnes/">https://thathtml.blog/2025/03/nord-health-design-system-david-darnes/</a> 2025-03-27T03:07:06Z https://yabu.me/nevent1qqsr2z0prz9ru8fe96atglt7ctk4rhdedn8ar87nsryn245x9lur9dgzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nuhn2mxd All the Deets on the Mighty Details Tag 🙌<br/><br/><span itemprop="mentions" itemscope itemtype="https://schema.org/Person"><a itemprop="url" href="/npub1ncs6jpg8e9gpttpewfcayg7xplvwqyr28fxwqd2fpnnf2wrvesssl9a6v8" class="bg-lavender dark:prose:text-neutral-50 dark:text-neutral-50 dark:bg-garnet px-1"><span>Geoff</span> (<span class="italic">npub1ncs…a6v8</span>)</a></span> over at #CSS Tricks has written a definitive guide on using &lt;details&gt;, a number of possible use cases, and some of the trickier aspects of styling it and even animating the opening and closing states. I’ll be sure to refer to this the next time I do #WebDev on a &lt;details&gt;-based feature!<br/><br/><a href="https://thathtml.blog/2025/02/all-the-deets-on-details/">https://thathtml.blog/2025/02/all-the-deets-on-details/</a> 2025-02-27T00:33:51Z https://yabu.me/nevent1qqsxckhk7ewgvgz8e9t56vz82nmsvgknlhhmq3e3c3z7u4tau4vc4xqzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nukmag53 Is it possible to write advanced theming #CSS with context-aware conditional code? As if()! 😉<br/><br/><span itemprop="mentions" itemscope itemtype="https://schema.org/Person"><a itemprop="url" href="/npub19405hrqah8pkr50tqx5psudeqet65mhcgr8gzwgd3tzc3p27z0zsz9zhyh" class="bg-lavender dark:prose:text-neutral-50 dark:text-neutral-50 dark:bg-garnet px-1"><span>Christopher Kirk-Nielsen</span> (<span class="italic">npub1940…zhyh</span>)</a></span> shows us a glimpse of what&#39;s possible—just in Chrome Canary right now behind a flag, but here&#39;s hoping it gains ground soon.<br/><br/>On a related note, us #WebDev folks are eagerly awaiting container style queries in Firefox! Can it happen please pretty please with sugar on top??<br/><br/><a href="https://thathtml.blog/2025/02/hot-off-the-press-examples-of-css-if/">https://thathtml.blog/2025/02/hot-off-the-press-examples-of-css-if/</a> 2025-02-21T18:01:45Z https://yabu.me/nevent1qqsrwz8arx270stj7ajm32rkxdkh28f8l78mpsny8u3w0gjyyezgdmszyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nu8tu4uw We Need to Talk About Anti-Web Coding Assistants<br/><br/>It&#39;s time. We can&#39;t ignore this massive threat to the continuing health of this platform we all love.<br/><br/><span itemprop="mentions" itemscope itemtype="https://schema.org/Person"><a itemprop="url" href="/npub1fs69n2f28eumgdf3l9qwkaa58xm73wz56vzksdypku2v895puays78tlr3" class="bg-lavender dark:prose:text-neutral-50 dark:text-neutral-50 dark:bg-garnet px-1"><span>Vale</span> (<span class="italic">npub1fs6…tlr3</span>)</a></span> has done a deep dive into what the bots think is the state-of-the-art of #WebDev and…uh, it&#39;s alarming. 😬<br/><br/>We can, *and we must*, expect better of the tools being thrust in our faces as the future of “whatever”.<br/>#ProCraft<br/><br/><a href="https://thathtml.blog/2025/02/we-need-to-talk-about-anti-web-coding-assistants/">https://thathtml.blog/2025/02/we-need-to-talk-about-anti-web-coding-assistants/</a> 2025-02-14T19:30:02Z https://yabu.me/nevent1qqsgdmyln23kg4m4cy6p5p4fukfmw9q2qsvg03fpuskpjnsj002aeegzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nugrtn38 Happy #Interop2025 day to all who celebrate!<br/><br/>#WebDev #OpenStandards 2025-02-13T20:09:16Z https://yabu.me/nevent1qqs2vt0cc0ea8pzmqh0k9423zxsgueh5xqtnj9xvl5vgk0wynvamrlszyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nutkq6f3 Every time I see utility classes sprayed all over basic tags like &lt;p&gt; and &lt;a&gt;… 😂<br/>#CSS #WebDev #Humor<br/> <img src="https://cdn.masto.host/intuitivefuturecom/media_attachments/files/113/993/294/423/351/624/original/c70d844d914bb8f0.jpeg"> <br/> 2025-02-12T22:33:58Z https://yabu.me/nevent1qqst64fccnvemdx2pkxn5s7slncw9u7d3t8zjvq4038y34d6r7tenegzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nu5z8vz8 One of the most exciting #WebDev-elopments in Modern™ #CSS is the ability to generate new colors programmatically based on variables or the currentColor keyword.<br/><br/>However, there are two separate ways to modify colors, each with its own set of goals and syntax, and the confusing thing is they have rolled out at different paces.<br/><br/>Exciting news though! The day will soon be here when all you’ll need for defining a fantastic color palette is a mere handful of base colors:<br/><br/><a href="https://thathtml.blog/2025/02/live-colors-what-you-can-safely-use/">https://thathtml.blog/2025/02/live-colors-what-you-can-safely-use/</a> 2025-02-05T04:22:01Z https://yabu.me/nevent1qqs8xnzka3z4uh759c2tcam982nyecn6ayjmhnnkwjlzu9xm09egu7gzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nu508trg Y&#39;all, I&#39;m not done with squircles! 😅<br/><br/>A few days ago I demonstrated utilizing #CSS clip-path and SVG data to round the corners of an element in a more attractive manner.<br/><br/>That #WebComponents demo turned out well, but it got me thinking I might attempt to “squirclize” a grid of thumbnail images, which eventually led me to the html-squircle #JS library for generating refined curve paths.<br/><br/>Now this looks pretty fun! 🥳 #WebDev<br/><br/><a href="https://thathtml.blog/2025/01/squircle-images-on-the-loose/">https://thathtml.blog/2025/01/squircle-images-on-the-loose/</a><br/> <img src="https://cdn.masto.host/intuitivefuturecom/media_attachments/files/113/919/553/889/267/421/original/fa41f96f5e537597.png"> <br/> 2025-01-30T22:00:47Z https://yabu.me/nevent1qqs0unujeejtmzsp3z3r65nveralakdfupzaanjrw8u2gmuypqmhemszyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nulljmep I Made a Squircle!<br/><br/>Button.<br/><br/>It&#39;s a squircle button. 🥰<br/><br/>And that’s harder than you might think, due to the limitations of what typical #CSS provides. But here we break down a neat #WebDev technique for building one as well as some of the other fun aspects of this demo (@ property to the rescue!):<br/><br/><a href="https://www.spicyweb.dev/i-built-a-squricle-button/">https://www.spicyweb.dev/i-built-a-squricle-button/</a><br/> <img src="https://cdn.masto.host/intuitivefuturecom/media_attachments/files/113/896/323/653/916/416/original/5dc35ef982fd0d1e.png"> <br/> 2025-01-26T19:33:02Z https://yabu.me/nevent1qqsrhcefm0tk9n3re2qlz50fywku3vqnylq5wtzzyxje5npk4wvh4eczyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nuauxzt6 “War must be, while we defend our lives against a destroyer who would devour all; but I do not love the bright sword for its sharpness, nor the arrow for its swiftness, nor the warrior for his glory. I love only that which they defend.” –J. R. R. Tolkein<br/><br/>The AI *is* coming for your job. The Zuckerbergs of the world will make sure of it.<br/><br/>But hope is not lost. We, the workers, still have real power.<br/><br/>Here are a few ideas on how to weather the coming #WebDev storm:<br/><br/><a href="https://www.spicyweb.dev/surviving-the-ai-pocalypse/">https://www.spicyweb.dev/surviving-the-ai-pocalypse/</a> 2025-01-13T22:16:40Z https://yabu.me/nevent1qqsqz35kth7pdwsrcvr2zx6ju2lauhvx677ctgu9c57dx8dfvtte7vgzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nurtzha6 A few months back, I’d reported on &lt;selectmenu&gt; turning back into a regular &lt;select&gt; tag—but with awesome new #CSS-based smarts for completely customized styling. #WebDev<br/><br/>Since then, there have been some revisions to the proposed spec, and helpfully we have a thorough rundown of what’s changed courtesy of <span itemprop="mentions" itemscope itemtype="https://schema.org/Person"><a itemprop="url" href="/npub1v48a630agf2cxsdml6plgvk9xs04f0dj79v2yctr4xpv6d5awsxsyrcsx2" class="bg-lavender dark:prose:text-neutral-50 dark:text-neutral-50 dark:bg-garnet px-1"><span>Una Kravets</span> (<span class="italic">npub1v48…csx2</span>)</a></span>:<br/><br/><a href="https://thathtml.blog/2025/01/revised-select-styling-whats-new/">https://thathtml.blog/2025/01/revised-select-styling-whats-new/</a> 2025-01-13T00:16:17Z https://yabu.me/nevent1qqsyhqsnhtrj7d3umk53rp9p33kt8s550e9xq7vpte88vq4p73j0m6szyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nunfg3sa One of the oldest and cruftiest APIs in #JavaScript involves cookies. In fact, can you really even say there&#39;s an &#34;API&#34; for cookies when it&#39;s literally just a string property on `document`?<br/><br/>Wouldn&#39;t it be nice if we had a more modern #WebDev API to use for setting, reading, and deleting cookies?<br/><br/>Introducing the Cookie Store API:<br/><br/><a href="https://thathtml.blog/2025/01/cookie-store-api/">https://thathtml.blog/2025/01/cookie-store-api/</a> 2025-01-03T01:42:51Z https://yabu.me/nevent1qqsvc93ah94ntkjzlp4e6p24q56suj7frlau993xrqkjy6s3xe22cyqzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nuwmunju If it sounds like I&#39;m a sore winner, that&#39;s because I am. But OK. Here we are. *Finally.*<br/><br/>Tailwind 4 now comes with a theming system based on—wait for it, wait for it—CSS.<br/><br/>#CSS. What a concept! 😅<br/><br/>Yes, the ships have turned around in #WebDev. React 19 can now play in a world where not all of your components are built with React, and Tailwind 4 can now play in a world where not all of your #HTML markup is riddled with utility classes:<br/><br/><a href="https://thathtml.blog/2024/12/tailwind-4-a-mea-culpa-moment/">https://thathtml.blog/2024/12/tailwind-4-a-mea-culpa-moment/</a> 2024-12-19T19:37:01Z https://yabu.me/nevent1qqswhksmz33xsgvks3k5u6fmxs5sy3dpxcd4sz0tuklln3flud433ggzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nuy6aar4 React: functional components which aren&#39;t very functional.<br/><br/>TypeScript: types for JavaScript which aren&#39;t real types.<br/><br/>Great ecosystem! 😄<br/><a href="https://mastodon.social/@erlang_discussions/113675453562732716">https://mastodon.social/@erlang_discussions/113675453562732716</a> 2024-12-18T20:40:25Z https://yabu.me/nevent1qqsynhahpzfj7y8r0vujfufs6aewfhtlfkmra0l5knv30qvk265vvrszyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nudsghqv Our 25th issue on #WebDev is published, talking about Baseline and the awesome features dashboard for the Web Platform, as well as React 19 and a new way to author custom elements.<br/><br/>But wait, there&#39;s more! We&#39;ll be sending out a bonus issue in just a few days exclusively to Intuitive+ members. Have you signed up yet? You won&#39;t want to miss it! 😅<br/><br/>(Or just subscribe to the free newsletter. That&#39;s fine too… 😊)<br/><br/><a href="https://buttondown.com/thathtmlblog/archive/25-baseline-2024-at-a-glance-react-19-new-web/">https://buttondown.com/thathtmlblog/archive/25-baseline-2024-at-a-glance-react-19-new-web/</a> 2024-12-16T16:52:57Z https://yabu.me/nevent1qqstzpx62c9hle5g8akuzpkcltgxx04xnmcr6y29glwhj869wzt596szyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nudw3lhh Well this is a headline for the ages.<br/><br/>#React #WebDev #WebComponents<br/><br/><a href="https://thathtml.blog/2024/12/oh-happy-day-react-finally-speaks-web-component/">https://thathtml.blog/2024/12/oh-happy-day-react-finally-speaks-web-component/</a><br/> <img src="https://cdn.masto.host/intuitivefuturecom/media_attachments/files/113/624/167/818/271/490/original/2d1c3ec281b36935.jpeg"> <br/> 2024-12-09T18:00:13Z https://yabu.me/nevent1qqsxhp5ummw4l749nze2hlccn4srqydvsz8j805e550junyn9trzeugzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nu6m6a7t Since we’re on a new server, we’ll be pulling some toots from the archive from time to time. Here’s one:<br/>---<br/><br/>Vanilla #HTML / #CSS / #JavaScript is the &#34;universal language&#34; of modern networked computing. Know that, and know it deeply, and you can speak &#34;internet&#34; in nearly any context, in nearly any job.<br/><br/>That&#39;s the power of international standards and open protocols. They&#39;ll never go out of style. 2024-12-06T07:45:28Z https://yabu.me/nevent1qqs0jsjfxt23n5h6qczd73d9f0kmt8c4vn00h9nc9ua5hmhv8tduahqzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nu70slmm Reactive Mastro: a tiny reactive GUI library for your existing MPA<br/><br/>Our latest #WebDev #WebComponents writeup!<br/><br/>Mastro is very small (2.6kB) and provides a clear path to writing custom elements which are primarily driven by server-rendered markup but need some additional interactivity after the fact. Powered by the maverick-js signals library, with an elegant syntax which works well with HTML web components:<br/><br/><a href="https://thathtml.blog/2024/12/new-custom-element-superclass-on-the-block/">https://thathtml.blog/2024/12/new-custom-element-superclass-on-the-block/</a> 2024-12-04T17:51:02Z https://yabu.me/nevent1qqsvvmv9c7prnlqtqejc44hukt0ka9hs2la90qs79waqfrqa7qzz62gzyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nucl2rp6 In reply to <a href='/nevent1qqsqwrw20yp9nf0252tldpqsrxfj8cfrar4vn3cej6nfuf6y6cs80mchg0zl5'>nevent1q…0zl5</a><br/>_________________________<br/><br/>Oh and guess what? Our Mastodon presence is two years old as of yesterday! Happy 2nd Anniversary to us! 🎉<br/><br/>Thanks y&#39;all for the good times. May they long continue… 2024-12-02T18:16:37Z https://yabu.me/nevent1qqsqwrw20yp9nf0252tldpqsrxfj8cfrar4vn3cej6nfuf6y6cs80mczyr4gvy936hszjz4qz0gdp96nxw5ykhgpdtkq6rtk53v497qfhx9nuclfq0l Since we’re on a new server, we’ll be pulling some toots from the archive from time to time. Here’s one:<br/>---<br/><br/>The idea that #CSS should support conditionals within style rules has been around since time immemorial. #WebDev<br/><br/>It’s looking likely that we’ll soon see the day when we can if() the night away, now that the CSSWG has come to a consensus around adding if() to an upcoming spec.<br/><br/>When this eventually lands in browsers, behold the increase of your property values! 😜<br/><br/><a href="https://thathtml.blog/2024/07/if-only-css-could-if/">https://thathtml.blog/2024/07/if-only-css-could-if/</a> 2024-12-02T18:08:39Z