Congratulations!

[Valid RSS] This is a valid RSS feed.

Recommendations

This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

Source: http://meyerweb.com/eric/thoughts/rss2/full

  1. <?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
  2. xmlns:content="http://purl.org/rss/1.0/modules/content/"
  3. xmlns:wfw="http://wellformedweb.org/CommentAPI/"
  4. xmlns:dc="http://purl.org/dc/elements/1.1/"
  5. xmlns:atom="http://www.w3.org/2005/Atom"
  6. xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
  7. xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
  8. >
  9.  
  10. <channel>
  11. <title>Thoughts From Eric</title>
  12. <atom:link href="http://meyerweb.com/eric/thoughts/feed/?scope=full" rel="self" type="application/rss+xml" />
  13. <link>https://meyerweb.com/eric/thoughts</link>
  14. <description>Things that Eric A. Meyer, CSS expert, writes about on his personal Web site; it&#039;s largely Web standards and Web technology, but also various bits of culture, politics, personal observations, and other miscellaneous stuff</description>
  15. <lastBuildDate>Thu, 10 Oct 2024 20:27:01 +0000</lastBuildDate>
  16. <language>en-US</language>
  17. <sy:updatePeriod>
  18. hourly </sy:updatePeriod>
  19. <sy:updateFrequency>
  20. 1 </sy:updateFrequency>
  21. <item>
  22. <title>Design for Real Life: Online for Free AND On Sale for Money</title>
  23. <link>https://meyerweb.com/eric/thoughts/2024/10/10/design-for-real-life-online-for-free-and-on-sale-for-money/</link>
  24. <comments>https://meyerweb.com/eric/thoughts/2024/10/10/design-for-real-life-online-for-free-and-on-sale-for-money/#comments</comments>
  25. <dc:creator><![CDATA[Eric Meyer]]></dc:creator>
  26. <pubDate>Thu, 10 Oct 2024 20:27:01 +0000</pubDate>
  27. <category><![CDATA[Books]]></category>
  28. <category><![CDATA[Design]]></category>
  29. <category><![CDATA[Writing]]></category>
  30. <guid isPermaLink="false">https://meyerweb.com/eric/thoughts/?p=5549</guid>
  31.  
  32. <description><![CDATA[Design for Real Life is now available, for free, in its entirety, at dfrlbook.com. And is also for sale!]]></description>
  33. <content:encoded><![CDATA[<figure><a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/dfrl-cover.png"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/dfrl-cover.png" alt="" width="" height="" class="" /></a></figure>
  34.  
  35. <p><a href="https://dfrlbook.com"><cite>Design for Real Life</cite> is now available, for free</a>, in its entirety, at <code> <a href="https://dfrlbook.com">dfrlbook.com</a></code>.  If you like what you read and want a personal copy, or just to support Sara and me, <a href="https://dfrlbook.com/page/buy-the-book/"> print-on-demand and ePub versions are also available</a> from a number of sources.  There are some countries where the book is not yet available, which we hope will be fixed soon.  We’ll update the “Buy the book” page as appropriate.</p>
  36.  
  37. <p><a href="https://dfrlbook.com">The booksite</a> contains the entire content of the book, with no paywalls or premium tiers or whatever gimmicks late-stage capitalism/early-stage infoconomy is forcing online publishers to try this month.  So if you want to read it for nothing more than some of your time, or share it with people who you think might benefit from the free resource, go for it!  Spread the word far and wide!  Please and thank you.</p>
  38.  
  39. <p>To those who already own a copy of the book, the only real differences between that text and the one we have now is: we removed all the A Book Apart (ABA) branding and contact information, and made a couple of URL updates.  We also had to switch to fonts for which we had licensing.  Thus, if you have the ABA version, this is essentially the same thing.  You do <strong>not</strong> need to buy this new printing.  You certainly <em>can</em> buy it, if you want, but the content won’t be different in any meaningful way.</p>
  40.  
  41. <p>A project like this does not happen individually, and some thanks are in order.</p>
  42.  
  43. <p>First, so very many thanks to my co-author, <a href="https://sarawb.com">Sara Wachter-Boettcher</a>.  Not just for writing it with me almost a decade ago, but also for her tireless work on the tedious minutia of transferring ownership of publisher accounts, obtaining a new ISBN, organizing the work that needed to be done, et cetera, et cetera.  Basically, project managed the whole thing.  It would have taken forever to get done if I’d been in charge, so the credit for it being live goes entirely to her.</p>
  44.  
  45. <p>Second, many thanks to <a href="https://eaton.fyi/">Jeff Eaton</a>, who wrote a converter called <a href="https://github.com/eaton/dq"> Dancing Queen</a> that takes in an ABA ePub file and spits out Markdown files containing all the text and images of the figures.  Then he gave it to us all for free.</p>
  46.  
  47. <p>Third, we were able to get the book up for free thanks to the generosity of fellow ABA author and union man <a href="https://hire.wil.to/">Mat Marquis</a>, who wrote <a href="https://github.com/Wilto/a-book-departs"> some code</a> to take the output of Dancing Queen and import it into an <a href="https://11ty.dev/">11ty</a> install.  He did free tech support and lent a helping hand to us whenever we ran into snags.  He was also an integral part of the process that led to all the ABA authors reclaiming full ownership of their books.  He’ll deny every word of it, but dude is a mensch.  You should hire him to do cool stuff for you.</p>
  48.  
  49. <p>Speaking of all the ABA authors, the community we formed to help each other through the reclamation process has been a real blessing.  So many tips and tricks and expressions of support and celebrations of progress have flowed through the team over the past few months.  None of us had to do any of this alone.  Collective action, community support, <em>works</em>.</p>
  50.  
  51. <p>The conversion to ePub was handled by the entirely capable Ron Bilodeau, who leveraged his experience doing that work for ABA to do it for us.  Thank you, Ron!</p>
  52.  
  53. <p>And certainly not least, thank you to everyone at A Book Apart for publishing the book in the first place, for being great partners in its creation, and for releasing the books back to us when it was time to close up shop.  It’s hard to imagine it would have existed at all without ABA, so thank you, one and all.</p>
  54.  
  55. <hr><p>Have something to say to all that?  You can <a href="https://meyerweb.com/eric/thoughts/2024/10/10/design-for-real-life-online-for-free-and-on-sale-for-money/#commentform">add a comment to the post</a>, or <a href="mailto:eric@meyerweb.com?subject=In%20reply%20to%20%22Design%20for%20Real%20Life:%20Online%20for%20Free%20AND%20On%20Sale%20for%20Money%22">email Eric directly</a>.</p>]]></content:encoded>
  56. <wfw:commentRss>https://meyerweb.com/eric/thoughts/2024/10/10/design-for-real-life-online-for-free-and-on-sale-for-money/feed/</wfw:commentRss>
  57. <slash:comments>1</slash:comments>
  58. </item>
  59. <item>
  60. <title>Announcing BCD Watch</title>
  61. <link>https://meyerweb.com/eric/thoughts/2024/09/23/announcing-bcd-watch/</link>
  62. <comments>https://meyerweb.com/eric/thoughts/2024/09/23/announcing-bcd-watch/#comments</comments>
  63. <dc:creator><![CDATA[Eric Meyer]]></dc:creator>
  64. <pubDate>Mon, 23 Sep 2024 15:54:33 +0000</pubDate>
  65. <category><![CDATA[Browsers]]></category>
  66. <category><![CDATA[Tools]]></category>
  67. <category><![CDATA[Web]]></category>
  68. <guid isPermaLink="false">https://meyerweb.com/eric/thoughts/?p=5539</guid>
  69.  
  70. <description><![CDATA[A new service to help you keep up to date with changes in browser support.]]></description>
  71. <content:encoded><![CDATA[<figure class="standalone">
  72. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/bcd-watch-01.png"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/bcd-watch-01.png" alt="" /></a>
  73. </figure>
  74. <p>
  75. One of the things I think we all struggle with is keeping up to date with changes in web development.  You might hear about a super cool new CSS feature or JavaScript API, but it’s never supported by all the browsers when you hear about it, right?  So you think “I’ll have to make sure check in on that again later” and quickly forget about it.  Then some time down the road you hear about it again, talked about like it’s been best practice for years.
  76. </p>
  77. <p>
  78. To help address this, <a href="https://bkardell.com">Brian Kardell</a> and I have built <strong>a service called <a href="https://bcd-watch.igalia.com">BCD Watch</a></strong>, with a nicely sleek design by <a href="https://stephaniestimac.com/">Stephanie Stimac</a>.  It’s <strong>free for all to use</strong> thanks to the generous support of <a href="https://igalia.com">Igalia</a> in terms of our time and hosting the service.
  79. </p>
  80. <p>
  81. What BCD Watch does is, it grabs releases of the <a href="https://github.com/mdn/browser-compat-data">Browser Compatibility Data (BCD) repository</a> that underpins the support tables on <a href="https://developer.mozilla.org">MDN</a> and services like <a href="https://caniuse.com">caniuse.com</a>.  It then analyzes what’s changed since the previous release.
  82. </p>
  83. <p>
  84. Every Monday, BCD Watch produces two reports.  <a href="https://bcd-watch.igalia.com/weekly/">The Weekly Changes Report</a> lists all the changes to BCD that happened in the previous week&#x202F;—&#x2009;what’s been added, removed, or renamed in the whole of BCD.  It also tells you which of the Big Three browsers newly support (or dropped support for) each listed feature, along with a progress bar showing how close the feature is to attaining Baseline status.</p>
  85. <p>
  86. <a href="https://bcd-watch.igalia.com/weekly-completed/">The Weekly Baselines Report</a> is essentially a filter of the first report: instead of all the changes, it lists only changes to <a href="https://web.dev/baseline">Baseline</a> status, noting which features are newly Baseline.  <a href="https://bcd-watch.igalia.com/weekly-completed/2024-09-09.html">Some weeks</a>, it will have nothing to report. <a href="https://bcd-watch.igalia.com/weekly-completed/2024-06-24.html">Other weeks</a>, it will list everything that’s reached Baseline’s “Newly Available” tier.
  87. </p>
  88. <p>
  89. Both reports are available as standalone RSS, Atom, and JSON feeds, which are linked at the bottom of each report.  So while you <em>can</em> drop in on the site every week to bask in the visual design if you want (and that’s fine!), you can also get a post or two in your feed reader every Monday that will get you up to date on what’s been happening in the world of web development.
  90. </p>
  91. <p>
  92. If you want to look back at older reports, the home page has a details/summary collapsed list of weekly reports going back to the beginning of 2022, which we generated by downloading all the BCD releases back that far, and running the report script against them.
  93. </p>
  94. <p>
  95. If you encounter any problems with BCD Watch or have suggestions for improvements, please feel free to open an issue in <a href="https://github.com/bkardell/bcd-watch">the repository</a>, or submit suggested changes via pull request if you like.  We do expect the service to evolve over time, perhaps adding a report for things that have hit Baseline Widely Available status (30 months after hitting all three engines) or reports that look at more than just the Big Three engines.  Hard to say!   Always in motion, the future is.
  96. </p>
  97. <p>
  98. Whatever we may add, though, we’ll keep BCD Watch centered on the idea of keeping you better up to date on web dev changes, once a week, every week.  We really hope this is useful and interesting for you!  We’ve definitely appreciated having the weekly updates as we built and tested this, and we think a lot of you will, too.
  99. </p>
  100.  
  101. <hr><p>Have something to say to all that?  You can <a href="https://meyerweb.com/eric/thoughts/2024/09/23/announcing-bcd-watch/#commentform">add a comment to the post</a>, or <a href="mailto:eric@meyerweb.com?subject=In%20reply%20to%20%22Announcing%20BCD%20Watch%22">email Eric directly</a>.</p>]]></content:encoded>
  102. <wfw:commentRss>https://meyerweb.com/eric/thoughts/2024/09/23/announcing-bcd-watch/feed/</wfw:commentRss>
  103. <slash:comments>6</slash:comments>
  104. </item>
  105. <item>
  106. <title>Design for Real Life News!</title>
  107. <link>https://meyerweb.com/eric/thoughts/2024/07/22/design-for-real-life-news/</link>
  108. <comments>https://meyerweb.com/eric/thoughts/2024/07/22/design-for-real-life-news/#comments</comments>
  109. <dc:creator><![CDATA[Eric Meyer]]></dc:creator>
  110. <pubDate>Mon, 22 Jul 2024 15:22:01 +0000</pubDate>
  111. <category><![CDATA[Web]]></category>
  112. <category><![CDATA[Writing]]></category>
  113. <guid isPermaLink="false">https://meyerweb.com/eric/thoughts/?p=5521</guid>
  114.  
  115. <description><![CDATA[Design for Real Life’s rights have been returned to Sara and me, and we’ve cut the price by about half (or more in some regions).]]></description>
  116. <content:encoded><![CDATA[<p>If you’re reading this, odds are you’ve at least heard of A Book Apart (ABA), who published <cite>Design for Real Life</cite>, which I co-wrote with <a href="https://sarawb.com">Sara Wachter-Boettcher</a> back in 2016.  What you may not have heard is that <a href="https://abookapart.com/pages/about">ABA has closed up shop</a>.  There won’t be any more new ABA titles, nor will ABA continue to sell the books in their catalog.</p>
  117.  
  118. <p>That’s the bad news.  The great news is that ABA has transferred the rights for all of its books to their respective authors! (Not every ex-publisher does this, and not every book contract demands it, so thanks to ABA.) We’re all figuring out what to do with our books, and everyone will make their own choices.  One of the things Sara and I have decided to do is to eventually put the entire text online for free, as a booksite.  That isn’t ready yet, but it should be coming somewhere down the road.</p>
  119.  
  120. <figure><a href="https://www.sarawb.com/design-for-real-life"><img fetchpriority="high" decoding="async" src="https://meyerweb.com/eric/books/external/dfrl.png" width="300" height="464" class="book cover"/></a></figure>
  121.  
  122. <p>In the meantime, we’ve decided to cut the price of print and e-book copies available through Ingram.  <cite title="Design for Real Life">DfRL</cite> was the eighteenth book ABA put out, so we’ve decided to make the price of both the print and e-book $18, regardless of whether those dollars are American, Canadian, or Australian.  Also €18 and £18.  Basically, in all five currencies we can define, the price is 18 of those.</p>
  123.  
  124. <p>…unless you buy it through Apple Books; then it’s 17.99 of every currency, because the system forces us to make it cheaper than the list price and also have the amount end in <code>.99</code>.  Obversely, if you’re buying a copy (or copies) for a library, the price has to be <em> more</em> than the list price and also end in <code>.99</code>, so the library cost is 18.99 currency units.  Yeah, I dunno either.
  125. </p>
  126.  
  127. <p>At any rate, compared to its old price, this is a significant price cut, and in some cases (yes, Australia, we’re looking at you) it’s a <em> huge</em> discount.  Or, at least, it <em>will</em> be at a discount once online shops catch up.  The US-based shops seem to be up to date, and Apple Books as well, but some of the “foreign” (non-U.S.) sources are still at their old prices.  In those cases, maybe wishlist or bookmark or something and keep an eye out for the drop.  We hope it will become global by the end of the week.  And hey, as I write this, a couple of places have the ebook version for like 22% less than our listed price.</p>
  128.  
  129. <p>So!  If you’ve always thought about buying a copy but never got around to it, now’s a good time to get a great deal.  Ditto if you’ve never heard of the book but it sounds interesting, or you want it in ABA branding, or really for any other reason you have to <a href="https://www.sarawb.com/design-for-real-life">buy a copy now</a>.</p>
  130.  
  131. <p>I suppose the real question is, <em>should</em> you buy a copy?  We’ll grant that some parts of it are a little dated, for sure.  But the concepts and approaches we introduced can be seen in a lot of work done even today.  It made significant inroads into government design practices in the UK and elsewhere, for example, and we still hear from people who say it really changed how they think about design and UX.  We’re still very proud of it, and we think anyone who takes the job of serving their users seriously should give it a read.  But then, I guess we would, or else we’d never have written it in the first place.</p>
  132.  
  133. <p>And that’s the story so far.  I’ll blog again when the freebook is online, and if anything else changes as we go through the process.  Got questions?  Leave a comment or drop me a line.</p>
  134.  
  135. <hr><p>Have something to say to all that?  You can <a href="https://meyerweb.com/eric/thoughts/2024/07/22/design-for-real-life-news/#commentform">add a comment to the post</a>, or <a href="mailto:eric@meyerweb.com?subject=In%20reply%20to%20%22Design%20for%20Real%20Life%20News!%22">email Eric directly</a>.</p>]]></content:encoded>
  136. <wfw:commentRss>https://meyerweb.com/eric/thoughts/2024/07/22/design-for-real-life-news/feed/</wfw:commentRss>
  137. <slash:comments>2</slash:comments>
  138. </item>
  139. <item>
  140. <title>A Decade Later, A Decade Lost</title>
  141. <link>https://meyerweb.com/eric/thoughts/2024/06/07/a-decade-later-a-decade-lost/</link>
  142. <comments>https://meyerweb.com/eric/thoughts/2024/06/07/a-decade-later-a-decade-lost/#comments</comments>
  143. <dc:creator><![CDATA[Eric Meyer]]></dc:creator>
  144. <pubDate>Fri, 07 Jun 2024 22:00:03 +0000</pubDate>
  145. <category><![CDATA[Rebecca]]></category>
  146. <guid isPermaLink="false">https://meyerweb.com/eric/thoughts/?p=5513</guid>
  147.  
  148. <description><![CDATA[I woke up this morning about an hour ahead of my alarm, the sky already light, birds calling. ]]></description>
  149. <content:encoded><![CDATA[<p>I woke up this morning about an hour ahead of my alarm, the sky already light, birds calling.  After a few minutes, a brief patter of rain swept across the roof and moved on.</p>
  150.  
  151. <p>I just lay there, not really thinking.  Feeling.  Remembering.</p>
  152.  
  153. <p>Almost sixteen years to the minute before I awoke, my second daughter was born.  Almost ten years to the same minute before, she’d turned six years old, already semi-unconscious, and died not quite twelve hours later.</p>
  154.  
  155. <p>So she won’t be taking her first solo car drive today.  She won’t be celebrating with dinner at her favorite restaurant in the whole world.  She won’t kiss her niece good night or affectionately rag on her siblings.</p>
  156.  
  157. <p>Or maybe she wouldn’t have done any of those things anyway, after a decade of growth and changes and paths taken.  What would she really be like, at sixteen?</p>
  158.  
  159. <p>We will never know.  We can’t even guess.  All of that, everything she might have been, is lost.</p>
  160.  
  161. <p>This afternoon, we’ll visit Rebecca’s grave, and then go to hear her name read in remembrance at one of her very happiest places, <a href="https://en.wikipedia.org/wiki/Anshe_Chesed_Fairmount_Temple">Anshe Chesed Fairmount Temple</a>, for the last time.  At the end of the month, the temple will close as part of a merger.  Another loss.</p>
  162.  
  163. <p>A decade ago, I said that I felt the weight of all the years she would never have, and that they might crush me.  Over time, I have come to realize all the things she never saw or did adds to that weight.  Even though it seems like it should be the same weight.  Somehow, it isn’t.</p>
  164.  
  165. <p>I was talking about all of this with a therapist a few days ago, about the time and the losses and their accumulated weight.  I said, “I don’t know how to be okay when I failed my child in the most fundamental way possible.”</p>
  166.  
  167. <p>“You didn’t fail her,” they said gently.</p>
  168.  
  169. <p>“I know that,” I replied. “But I don’t feel it.”</p>
  170.  
  171. <p>A decade, it turns out, does not change that.  I’m not sure now that any stretch of time ever could.</p>
  172. <hr><p>Have something to say to all that?  You can <a href="https://meyerweb.com/eric/thoughts/2024/06/07/a-decade-later-a-decade-lost/#commentform">add a comment to the post</a>, or <a href="mailto:eric@meyerweb.com?subject=In%20reply%20to%20%22A%20Decade%20Later,%20A%20Decade%20Lost%22">email Eric directly</a>.</p>]]></content:encoded>
  173. <wfw:commentRss>https://meyerweb.com/eric/thoughts/2024/06/07/a-decade-later-a-decade-lost/feed/</wfw:commentRss>
  174. <slash:comments>14</slash:comments>
  175. </item>
  176. <item>
  177. <title>Bookmarklet: Load All GitHub Comments</title>
  178. <link>https://meyerweb.com/eric/thoughts/2024/02/05/bookmarklet-load-all-github-comments/</link>
  179. <comments>https://meyerweb.com/eric/thoughts/2024/02/05/bookmarklet-load-all-github-comments/#comments</comments>
  180. <dc:creator><![CDATA[Eric Meyer]]></dc:creator>
  181. <pubDate>Mon, 05 Feb 2024 14:49:46 +0000</pubDate>
  182. <category><![CDATA[Hacks]]></category>
  183. <category><![CDATA[JavaScript]]></category>
  184. <category><![CDATA[Tools]]></category>
  185. <category><![CDATA[Web]]></category>
  186. <guid isPermaLink="false">https://meyerweb.com/eric/thoughts/?p=5497</guid>
  187.  
  188. <description><![CDATA[A quick way to load all the comments on a GitHub issue.]]></description>
  189. <content:encoded><![CDATA[<p>What happened was, <a href="https://bkardell.com/" rel="acquaintance colleague co-worker met">Brian</a> and I were chatting about W3C GitHub issues and Brian mentioned how really long issues are annoying to search and read, because GitHub has this thing where if there are too many comments on an issue, it snips out the middle with a “Load more…” button that’s very tastefully designed and pretty easy to miss if you’re quick-scrolling to try to catch up.  The squiggle-line would be a good marker, if it weren’t so tasteful as to blend into the background in a way that makes the Baby WCAG cry.</p>
  190.  
  191. <p>And what’s worse, from this perspective, is that if the issue has been discussed to a very particular kind of death, the “Load more…”&#160;button can have more “Load more…” buttons hiding within.  So even if you know there was an interesting comment, and you remember a word or two of it, page-searching in your browser will do no good if the comment in question is buried one or more XMLHTTPRequest calls deep.</p>
  192.  
  193. <p>“I really wish GitHub had an ‘expand all comments’ button at the top or something,” Brian said (or words to that effect).</p>
  194.  
  195. <p>Well, it was a Friday afternoon and I was feeling code-hacky, so I wrote a bookmarklet.  Here it is in easy-to-save hyperlink form:</p>
  196.  
  197. <p>
  198. <a id="ghload" href="javascript:function start(){let buttons=document.querySelectorAll('button');let loaders=[];for(let i=0;i&lt;buttons.length;i+=1){if(buttons[i].textContent.trim()=='Load more%E2%80%A6'){loaders.push(buttons[i]);buttons[i].dispatchEvent(new MouseEvent('click',{view:window,bubbles:false}))}}if(loaders.length&gt;0){setTimeout(start,5000)}}setTimeout(start,500);void(20240130);">GitHub issue loader</a>
  199. </p>
  200.  
  201. <p>It waits half a second after you activate it to find all the buttons on the page (in my test runs, usually <em>six hundred</em> of them).  Then it looks through all the buttons to find the ones that have a <code>textContent</code> of “Load more…” and dispatches a click event to each one.  With that done, it waits five seconds and does it all again, waits five seconds to do it again, and so on.  Once it finds there are zero buttons with the “Load more…” <code>textContent</code>, it exits.  And, if five seconds is too quick due to slow loading times, you can always invoke the bookmarklet again should you come across a “Load more…” button.</p>
  202.  
  203. <p>If you want this ability for yourself, just drag the link above into your bookmark toolbar or bookmarks menu, and whenever you load up a mega-thread GitHub issue, fire the bookmarklet to load all the comments.  I imagine there may be cleaner ways to do this, but I was able to codeslam this in about 15 minutes using <a href="https://violentmonkey.github.io/">ViolentMonkey</a> on live GitHub pages, and it does the thing.</p>
  204.  
  205. <p>I did consider complexifying the ViolentMonkey script so that any GitHub page is scanned for the “Load more…” button, and if one is present, then a “Load all comments” button is plopped into the top of the page, but I knew that would take at least another 15 minutes and my codeslam window was closing.  Also, it would require anyone using it to run ViolentMonkey (or equivalent) all the time, whereas the bookmarlet has zero impact unless the user invokes it.  If you want to extend this into something more than it is and share your solution with the world, by all means feel free.</p>
  206.  
  207. <p>The point of all this being, if you too wish GitHub had an easy way to load all the comments without you having to search for the “Load more…” button yourself, now there’s a bookmarklet made just for you.  Enjoy!</p>
  208.  
  209. <style>#ghload {border: 1px solid; padding: 0.75em; background: #FED3; border-radius: 0.75em; display: block; margin-inline: auto; max-width: max-content; margin-block: 1.5em; box-shadow: 0.25em 0.33em 0.67em #0003; text-indent: 0;}</style>
  210. <hr><p>Have something to say to all that?  You can <a href="https://meyerweb.com/eric/thoughts/2024/02/05/bookmarklet-load-all-github-comments/#commentform">add a comment to the post</a>, or <a href="mailto:eric@meyerweb.com?subject=In%20reply%20to%20%22Bookmarklet:%20Load%20All%20GitHub%20Comments%22">email Eric directly</a>.</p>]]></content:encoded>
  211. <wfw:commentRss>https://meyerweb.com/eric/thoughts/2024/02/05/bookmarklet-load-all-github-comments/feed/</wfw:commentRss>
  212. <slash:comments>2</slash:comments>
  213. </item>
  214. <item>
  215. <title>Once Upon a Browser</title>
  216. <link>https://meyerweb.com/eric/thoughts/2024/01/02/once-upon-a-browser/</link>
  217. <comments>https://meyerweb.com/eric/thoughts/2024/01/02/once-upon-a-browser/#comments</comments>
  218. <dc:creator><![CDATA[Eric Meyer]]></dc:creator>
  219. <pubDate>Tue, 02 Jan 2024 16:22:01 +0000</pubDate>
  220. <category><![CDATA[CSS]]></category>
  221. <category><![CDATA[Design]]></category>
  222. <category><![CDATA[Projects]]></category>
  223. <guid isPermaLink="false">https://meyerweb.com/eric/thoughts/?p=5475</guid>
  224.  
  225. <description><![CDATA[I am pleased to inform you that I’m back on my generative art BS again.]]></description>
  226. <content:encoded><![CDATA[<p>Once upon a time, there was <a href="https://en.wikipedia.org/wiki/Once_Upon_a_Forest">a movie called <cite>Once Upon a Forest</cite></a>.  I’ve never seen it.  In fact, the only reason I know it exists is because a few years after it was released, <a href="https://joshuadavis.com/"> Joshua Davis</a> created a site called Once Upon a Forest, which I was doing searches to find again.  The movie came up in my search results; the site, long dead, did not.  Instead, I found its original URL on <a href="https://en.wikipedia.org/wiki/Joshua_Davis_(designer)">Joshua’s Wikipedia page</a>, and the Wayback Machine coughed up snapshots of it, <a href="https://web.archive.org/web/20110902144221/http://www.once-upon-a-forest.com/"> such as this one</a>.  You can also find static shots of it on Joshua’s personal web site, if you scroll far enough.</p>
  227.  
  228. <p>That site has long stayed with me, not so much for its artistic expression (which is pleasant enough) as for how the pieces were produced.  Joshua explained in a talk that he wrote code to create <a href="https://en.wikipedia.org/wiki/Generative_art">generative art</a>, where it took visual elements and arranged them randomly, then waited for him to either save the result or hit a key to try again.  He created the elements that were used, and put constraints on how they might be arranged, but allowed randomness to determine the outcome.</p>
  229.  
  230. <p>That appealed to me deeply.  I eventually came to realize that the appeal was rooted in my love of the web, where we create content elements and visual styles and scripted behavior, and then we send our work into a medium that definitely has constraints, but something very much like the random component of generative art: viewport size, device capabilities, browser, and personal preference settings can combine in essentially infinite ways.  The user is the seed in the RNG of our work’s output.</p>
  231.  
  232. <p>Normally, we try very hard to minimize the variation our work can express.  Even when crossing from one experiential stratum to another&#160;&#x202F;—&#x2009; that is to say, when changing media breakpoints&#160;&#x202F;—&#x2009; we try to keep things visually consistent, orderly, and understandable.  That drive to be boring for the sake of user comprehension and convenience is often at war with our desire to be visually striking for the sake of expression and enticement.</p>
  233.  
  234. <p>There is a lot, and I mean a <strong>lot</strong>, of room for variability in web technologies.  We work very hard to tame it, to deny it, to shun it.  Too much, if you ask me.</p>
  235.  
  236. <p>About twelve and half years ago, I took a first stab at pushing back on that denial with <a href="https://meyerweb.com/eric/thoughts/2011/06/03/spinning-the-web/">a series posted to Flickr called “Spinning the Web”</a>, where I used CSS rotation transforms to take consistent, orderly, understandable web sites and shake them up hard.  I enjoyed the process, and a number of people enjoyed the results.</p>
  237.  
  238. <figure>
  239. <img decoding="async" src="https://meyerweb.com/once-upon-a-browser/2023-12/google.com-2023-11-25.jpg" class="border" alt="" />
  240. <figcaption>google.com, late November 2023</figcaption>
  241. </figure>
  242.  
  243. <p>In the past few months, I’ve come back to the concept for no truly clear reason and have been exploring new approaches and visual styles.  The first collection launched a few days ago: <a href="https://meyerweb.com/once-upon-a-browser/2023-12/">Spinning the Web 2023</a>, a collection of 26 web sites remixed with a combination of CSS and JS.</p>
  244.  
  245. <p>I’m announcing them now in part because this month <a href="https://genuary.art/">has been dubbed “Genuary”</a>, a month for experimenting with generative art, with daily prompts to get people generating.  I don’t know if I’ll be following any of the prompts, but we’ll see.  And now I have a place to do it.</p>
  246.  
  247. <p>You see, back in 2011, I mentioned that my working title for the “Spinning the Web” series was “Once Upon a Browser”.  That title has never left me, so I’ve decided to claim it and created <a href="https://once-upon-a-browser.com/">an umbrella site with that name</a>.  At launch, it’s sporting a design that owes quite a bit to Once Upon a Forest&#160;&#x202F;—&#x2009; albeit with its own SVG-based generative background, one I plan to mess around with whenever the mood strikes.  New works will go up there from time to time, and I plan to migrate the 2011 efforts there as well.  For now, there are pointers to the Flickr albums for the old works.</p>
  248.  
  249. <p>I said this back in 2011, and I mean it just as much in 2023: I hope you enjoy these works even half as much as I enjoyed creating them.</p>
  250.  
  251. <hr><p>Have something to say to all that?  You can <a href="https://meyerweb.com/eric/thoughts/2024/01/02/once-upon-a-browser/#commentform">add a comment to the post</a>, or <a href="mailto:eric@meyerweb.com?subject=In%20reply%20to%20%22Once%20Upon%20a%20Browser%22">email Eric directly</a>.</p>]]></content:encoded>
  252. <wfw:commentRss>https://meyerweb.com/eric/thoughts/2024/01/02/once-upon-a-browser/feed/</wfw:commentRss>
  253. <slash:comments>2</slash:comments>
  254. </item>
  255. <item>
  256. <title>2023 in (Brief) Review</title>
  257. <link>https://meyerweb.com/eric/thoughts/2023/12/31/2023-in-brief-review/</link>
  258. <comments>https://meyerweb.com/eric/thoughts/2023/12/31/2023-in-brief-review/#comments</comments>
  259. <dc:creator><![CDATA[Eric Meyer]]></dc:creator>
  260. <pubDate>Mon, 01 Jan 2024 04:32:13 +0000</pubDate>
  261. <category><![CDATA[Books]]></category>
  262. <category><![CDATA[Carolyn]]></category>
  263. <category><![CDATA[Parenting]]></category>
  264. <guid isPermaLink="false">https://meyerweb.com/eric/thoughts/?p=5488</guid>
  265.  
  266. <description><![CDATA[That was the year that was… and it had three big turning points.]]></description>
  267. <content:encoded><![CDATA[<p>I haven’t generally been one to survey years as they end, but I’m going to make an exception for 2023, because there were three pretty big milestones I’d like to mark.</p>
  268.  
  269. <figure>
  270. <a href="https://meyerweb.com/eric/books/css-tdg/"><img decoding="async" src="https://meyerweb.com/eric/books/css-tdg/cover-sm.jpg" alt="" class="book cover" /></a>
  271. </figure>
  272.  
  273. <p>The first is that toward the end of May, the fifth edition of <a href="https://meyerweb.com/eric/books/css-tdg/"><cite>CSS: The Definitive Guide</cite></a> was published.  This edition weighs in at a mere 1,126 pages, and covers just about everything in CSS that was widely supported by the end of the 2022, and a bit from the first couple of months in 2023.  It’s about 5% longer by page count than <a href="https://meyerweb.com/eric/books/css-tdg/ed-fourth/">the previous edition</a>, but it has maybe 20% more material.  <a href="http://standardista.com/" rel="friend colleague met">Estelle</a> and I pulled that off by optimizing some of the older material, dropping some “intro to web” stuff that was still hanging about in the first chapter, and replacing all the appendices from the fourth edition with a single appendix that lists the URLs of useful CSS resources.  As with the previous edition, the files used to produce the figures for the book are all available online as <a href="https://meyerweb.github.io/csstdg5figs/"> a website</a> and <a href="https://github.com/meyerweb/csstdg5figs">a repository</a>.</p>
  274.  
  275. <p>The second is that Kat and I went away for a week in the summer to celebrate our 25th wedding anniversary.  As befits our inclinations, we went somewhere we’d never been but always wanted to visit, the <a href="https://www.wisdells.com/">Wisconsin Dells</a> and surrounding environs.  We got to tour <a href="https://www.caveofthemounds.com/">The Cave of the Mounds</a> (<em>wow</em>), <a href="https://www.thehouseontherock.com/">The House on the Rock</a> (<em><strong>double</strong> wow</em>), <a href="https://www.worldofdrevermor.com/gallery/">The World of Doctor Evermore</a> (<em>wowee</em>), and the Dells themselves.  We took a river tour, indulged in cheesy tourist traps, had some fantastic meals, and generally enjoyed our time together.  I did a freefall loop-de-loop waterslide <em>twice</em>, so take <em> that</em>, <a href="https://en.wikipedia.org/wiki/Action_Park">Action Park</a>.</p>
  276.  
  277. <p>The third is that toward the end of the year, Kat and I became grandparents to the beautiful, healthy baby of our daughter Carolyn.  A thing that people who know us personally know is that we love babies and kids, so it’s been a real treat to have a baby in our lives again.  It’s also been, and will continue to be, a new and deeper phase of parenthood, as we help our child learn how to be a parent to her child.  We eagerly look forward to seeing them both grow through the coming years.</p>
  278.  
  279. <p>So here’s to a year that contained some big turning points, and to the turning points of the coming year.  May we all find fulfillment and joy wherever we can.</p>
  280.  
  281. <hr><p>Have something to say to all that?  You can <a href="https://meyerweb.com/eric/thoughts/2023/12/31/2023-in-brief-review/#commentform">add a comment to the post</a>, or <a href="mailto:eric@meyerweb.com?subject=In%20reply%20to%20%222023%20in%20(Brief)%20Review%22">email Eric directly</a>.</p>]]></content:encoded>
  282. <wfw:commentRss>https://meyerweb.com/eric/thoughts/2023/12/31/2023-in-brief-review/feed/</wfw:commentRss>
  283. <slash:comments>1</slash:comments>
  284. </item>
  285. <item>
  286. <title>Pixelating Live with SVG</title>
  287. <link>https://meyerweb.com/eric/thoughts/2023/12/21/pixelating-live-with-svg/</link>
  288. <comments>https://meyerweb.com/eric/thoughts/2023/12/21/pixelating-live-with-svg/#comments</comments>
  289. <dc:creator><![CDATA[Eric Meyer]]></dc:creator>
  290. <pubDate>Thu, 21 Dec 2023 15:35:28 +0000</pubDate>
  291. <category><![CDATA[SVG]]></category>
  292. <guid isPermaLink="false">https://meyerweb.com/eric/thoughts/?p=5455</guid>
  293.  
  294. <description><![CDATA[In which I ask for SVG filter assistance, because I can’t figure this out.]]></description>
  295. <content:encoded><![CDATA[<p>For reasons I’m not going to get into here, I want be able to pixelate web pages, or even parts of web pages, entirely from the client side.  I’m using <a href="https://violentmonkey.github.io/">ViolentMonkey</a> to inject scripts into pages, since it lets me easily open the ViolentMonkey browser-toolbar menu and toggle scripts on or off at will.</p>
  296.  
  297. <p>I’m aware I could take raster screenshots of pages and then manipulate them in an image editor.  I don’t <em>want</em> to do that, though&#160;&#x202F;—&#x2009; I want to pixelate <em>live</em>.  For reasons.</p>
  298.  
  299. <p>So far as I’m aware, my only option here is to apply SVG filters by way of CSS.  The problem I’m running into is that I can’t figure out how to construct an SVG filter that will exactly:</p>
  300.  
  301. <ul>
  302. <li>Divide the element into cells; for example, a grid of 4&#215;4 cells</li>
  303. <li>Find the average color of the pixels in each cell</li>
  304. <li>Flood-fill each cell with the average color of its pixels</li>
  305. </ul>
  306.  
  307. <p>As a way of understanding the intended result, see the following screenshot of Wikipedia’s home page, and then the corresponding pixelated version, which I generated using the Pixelate filter in <a href="https://flyingmeat.com/acorn/">Acorn</a>.</p>
  308.  
  309. <figure class="standalone">
  310. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/wikipedia-home.png"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/wikipedia-home.png" alt="" class="border" /></a>
  311. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/wikipedia-home-pixelated.png"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/wikipedia-home-pixelated.png" alt="" class="border" /></a>
  312. <figcaption>Wikipedia in the raw, and blockified.</figcaption>
  313. </figure>
  314.  
  315. <p>See how the text is rendered out?  That’s key here.</p>
  316.  
  317. <p>I found a couple of SVG pixelators in <a href="https://stackoverflow.com/questions/37451189/can-one-pixelate-images-with-an-svg-filter">a StackOverflow post</a>, but what they both appear to do is sample pixels at regularly-spaced intervals, then dilate them.  This works pretty okay for things like photographs, but it falls down hard when it comes to text, or even images of diagrams.  Text is almost entirely vanished, as shown here.</p>
  318.  
  319. <figure class="standalone">
  320. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/wikipedia-home-svged.png"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/wikipedia-home-svged.png" alt="" class="border" /></a>
  321. <figcaption>The text was there a minute ago, I swear it.</figcaption>
  322. </figure>
  323.  
  324. <p>I tried Gaussian blurring at the beginning of my filters in an attempt to overcome this, but that mostly washed the colors out, and didn’t make the text more obviously text, so it was a net loss.  I messed around with dilation radii, and there was no joy there.  I did find some interesting effects along the way, but none of them were what I was after.</p>
  325.  
  326. <p>I’ve been reading through various tutorials and MDN pages about SVG filters, and I’m unable to figure this out.  Though I may be wrong, I feel like the color-averaging step is the sticking point here, since it seems like <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTile"><code>&lt;feTile&gt;</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feFlood"><code>&lt;feFlood&gt;</code></a> should be able to handle the first and last steps.  I’ve wondered if there’s a way to get a <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feConvolveMatrix">convolve matrix</a> to do the color-averaging part, but I have no idea&#160;&#x202F;—&#x2009; I never learned matrix math, and later-life attempts to figure it out have only gotten me as far as grasping the most general of principles.  I’ve also tried to work out if <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDisplacementMap">a displacement map</a> could be of help here, but so far as I can tell, no.  But maybe I just don’t understand them well enough to tell?</p>
  327.  
  328. <p>It also occurred to me, as I was prepared to publish this, that maybe a solution would be to use some kind of operation (a matrix, maybe?) to downsize the image and then use another operation to upsize it to the original size.  So to pixelfy a 1200&#215;1200 image into 10&#215;10 blocks, smoothly downsize it to 120&#215;120 and then nearest-neighbor it back up to 1200&#215;1200.  That feels like it would make sense as a technique, but once again, even if it does make sense I can’t figure out how to do it.  I searched for terms like <kbd>image scale transform matrix</kbd> but I either didn’t get good results, or didn’t understand them when I did.  Probably the latter, if we’re being honest.</p>
  329.  
  330. <p>So, if you have any ideas for how to make this work, I’m all ears&#160;&#x202F;—&#x2009; either here in the comments, on your own site, or as forks of <a href="https://codepen.io/meyerweb/pen/mdoboMq">the Codepen I set up for exactly that purpose</a>.  My thanks for any help!</p>
  331.  
  332. <hr><p>Have something to say to all that?  You can <a href="https://meyerweb.com/eric/thoughts/2023/12/21/pixelating-live-with-svg/#commentform">add a comment to the post</a>, or <a href="mailto:eric@meyerweb.com?subject=In%20reply%20to%20%22Pixelating%20Live%20with%20SVG%22">email Eric directly</a>.</p>]]></content:encoded>
  333. <wfw:commentRss>https://meyerweb.com/eric/thoughts/2023/12/21/pixelating-live-with-svg/feed/</wfw:commentRss>
  334. <slash:comments>18</slash:comments>
  335. </item>
  336. <item>
  337. <title>Three Decades of HTML</title>
  338. <link>https://meyerweb.com/eric/thoughts/2023/12/06/three-decades-of-html/</link>
  339. <comments>https://meyerweb.com/eric/thoughts/2023/12/06/three-decades-of-html/#comments</comments>
  340. <dc:creator><![CDATA[Eric Meyer]]></dc:creator>
  341. <pubDate>Thu, 07 Dec 2023 03:40:15 +0000</pubDate>
  342. <category><![CDATA[(X)HTML]]></category>
  343. <category><![CDATA[History]]></category>
  344. <category><![CDATA[Web]]></category>
  345. <guid isPermaLink="false">https://meyerweb.com/eric/thoughts/?p=5449</guid>
  346.  
  347. <description><![CDATA[A few days ago was the 30th anniversary of the first time I wrote an HTML document.]]></description>
  348. <content:encoded><![CDATA[<p>A few days ago was the 30th anniversary of the first time I wrote an HTML document.  Back in 1993, I took a <a href="https://en.wikipedia.org/wiki/Usenet">Usenet</a> posting of the “Incomplete Mystery Science Theater 3000 Episode Guide” and marked it up.  You can see <a href="https://meyerweb.com/eric/cwru/mst3keg/mst3kf.html">the archived copy</a> here on meyerweb.  At some point, the markup got updated for reasons I don’t remember, but I can guarantee you the original had uppercase tag names and I didn’t close any paragraphs.  That’s because I was using <code>&lt;P&gt;</code> as a shorthand for <code>&lt;BR&gt;&lt;BR&gt;</code>, which was the style at the time.</p>
  349.  
  350. <p>Its last-updated date of December 3, 1993, is also the date I created it.  I was on lobby duty with the <a href="https://films.cwru.edu/">CWRU Film Society</a>, and had lugged a laptop (I think it was an Apple PowerBook of some variety, something like <a href="https://en.wikipedia.org/wiki/PowerBook_180">a 180</a>, borrowed from my workplace) and a printout of <a href="https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt"> the HTML specification</a> (or maybe it was “<a href="http://info.cern.ch/hypertext/WWW/MarkUp/Tags.html">Tags in HTML</a>”?) along with me.</p>
  351.  
  352. <p>I spent most of that evening in the lobby of <a href="https://commons.wikimedia.org/wiki/File:Strosacker_Auditorium,_Case_Western_Reserve_University,_Cleveland,_OH_(28593864547).jpg">Strosacker Auditorium</a>, typing tags and doing find-and-replace operations in Microsoft Word, and then saving as text to a file that ended in <code>.html</code>, which was the style at the time.  By the end of the night, I had more or less what you see in the archived copy.</p>
  353.  
  354. <p>The only visual change between then and now is that a year or two later, when I put the file up in my home directory, I added the toolbars at the top and bottom of the page&#160;&#x202F;—&#x2009; toolbars I’d designed and made a layout standard as <a href="https://en.wikipedia.org/wiki/Case_Western_Reserve_University">CWRU</a>’s webmaster.  Which itself only happened because I learned HTML.</p>
  355.  
  356. <p>A couple of years ago, I was fortunate enough to be able to relate some of this story to <a href="https://en.wikipedia.org/wiki/Joel_Hodgson">Joel Hodgson</a> himself.  The story delighted him, which delighted me, because delighting someone who has been a longtime hero really is one of life’s great joys.  And the fact that I got to have that conversation, to feel that joy, is inextricably rooted in my sitting in that lobby with that laptop and that printout and that Usenet post, adding tags and saving as text and hitting reload in <a href="https://en.wikipedia.org/wiki/Mosaic_(web_browser)">Mosaic</a> to instantly see the web page take shape, thirty years ago this week.</p>
  357.  
  358. <hr><p>Have something to say to all that?  You can <a href="https://meyerweb.com/eric/thoughts/2023/12/06/three-decades-of-html/#commentform">add a comment to the post</a>, or <a href="mailto:eric@meyerweb.com?subject=In%20reply%20to%20%22Three%20Decades%20of%20HTML%22">email Eric directly</a>.</p>]]></content:encoded>
  359. <wfw:commentRss>https://meyerweb.com/eric/thoughts/2023/12/06/three-decades-of-html/feed/</wfw:commentRss>
  360. <slash:comments>4</slash:comments>
  361. </item>
  362. <item>
  363. <title>Blinded By the Light DOM</title>
  364. <link>https://meyerweb.com/eric/thoughts/2023/11/01/blinded-by-the-light-dom/</link>
  365. <comments>https://meyerweb.com/eric/thoughts/2023/11/01/blinded-by-the-light-dom/#comments</comments>
  366. <dc:creator><![CDATA[Eric Meyer]]></dc:creator>
  367. <pubDate>Wed, 01 Nov 2023 18:09:17 +0000</pubDate>
  368. <category><![CDATA[DOM]]></category>
  369. <category><![CDATA[JavaScript]]></category>
  370. <guid isPermaLink="false">https://meyerweb.com/eric/thoughts/?p=5435</guid>
  371.  
  372. <description><![CDATA[I only recently had a breakthrough about using web components, and now I quite like them.  But not the shadow kind.]]></description>
  373. <content:encoded><![CDATA[<p>For a while now, Web Components (which I’m not going to capitalize again, you’re welcome) have been one of those things that pop up in the general web conversation, seem intriguing, and then fade into the background again.</p>
  374.  
  375. <p>I freely admit a lot of this experience is due to me, who is not all that thrilled with the Shadow DOM in general and all the shenanigans required to cross from the Light Side to the Dark Side in particular.  I <em>like</em> the Light DOM.  It’s designed to work together pretty well.  This whole high-fantasy-flavored Shadowlands of the DOM thing just doesn’t sit right with me.</p>
  376.  
  377. <p>If they do for you, that’s great!  Rock on with your bad self.  I say all this mostly to set the stage for why I only recently had a breakthrough using web components, and now I quite like them.  But not the shadow kind.  I’m talking about Fully Light-DOM Components here.</p>
  378.  
  379. <p>It started with a one-two punch: first, I read Jim Nielsen’s “<a href="https://blog.jim-nielsen.com/2023/web-components-icon-galleries/">Using Web Components on My Icon Galleries Websites</a>”, which I didn’t really get the first few times I read it, but I could tell there was something new (to me) there.  Very shortly thereafter, I saw Dave Rupert’s <a href="https://codepen.io/davatron5000/pen/rNoRdex?editors=1010"><code>&lt;fit-vids&gt;</code> CodePen</a>, and that’s when the Light DOM Bulb went off in my head.  You just take some normal HTML markup, wrap it with a custom element, and then write some JS to add capabilities which you can then style with regular CSS!  Everything’s of the Light Side of the Web.  No need to pierce the Vale of Shadows or whatever.</p>
  380.  
  381. <p>Kindly permit me to illustrate at great length and in some depth, using a thing I created while developing a tool for internal use at <a href="https://igalia.com/">Igalia</a> as the basis.  Suppose you have some range inputs, just some happy little slider controls on your page, ready to change some values, like this:</p>
  382.  
  383. <pre class="html"><code>&lt;label for="title-size"&gt;Title font size&lt;/label&gt;
  384. &lt;input id="title-size" type="range" min="0.5" max="4" step="0.1" value="2" /&gt;</code>
  385. </pre>
  386.  
  387. <p>The idea here is that you use the slider to change the font size of an element of some kind.  Using HTML’s built-in attributes for range inputs, I set a minimum, maximum, and initial value, the step size permitted for value changes, and an ID so a <code>&lt;label&gt;</code> can be associated with it.  Dirt-standard HTML stuff, in other words.  Given that this markup exists in the page, then, it needs to be hooked up to the thing it’s supposed to change.</p>
  388.  
  389. <p>In Ye Olden Days, you’d need to write a function to go through the entire DOM looking for these controls (maybe you’d add a specific <code>class</code> to the ones you need to find), figure out how to associate them with the element they’re supposed to affect (a title, in this case), add listeners, and so on.  It might go something like:</p>
  390.  
  391. <pre class="js"><code>let sliders = document.querySelectorAll('input[id]');
  392. for (i = 0; i &lt; sliders.length; i++) {
  393. let slider = sliders[i];
  394. // …add event listeners
  395. // …target element to control
  396. // …set behaviors, maybe call external functions
  397. // …etc., etc., etc.
  398. }</code>
  399. </pre>
  400.  
  401. <p>Then you’d have to stuff all that into a <code>window.onload</code> observer or otherwise defer the script until the document is finished loading.</p>
  402.  
  403. <p>To be clear, you can <em>absolutely</em> still do it that way.  Sometimes, it’s even the most sensible choice!  But fully-light-DOM components can make a lot of this easier, more reusable, and robust.  We can add some custom elements to the page and use those as a foundation for scripting advanced behavior.</p>
  404.  
  405. <p>Now, if you’re like me (and I know I am), you might think of converting everything into a completely bespoke element and then forcing all the things you want to do with it into its attributes, like this:</p>
  406.  
  407. <pre class="html"><code>&lt;super-slider type="range" min="0.5" max="4" step="0.1" value="2"
  408.           unit="em" target=".preview h1"&gt;
  409. Title font size
  410. &lt;/super-slider&gt;</code>
  411. </pre>
  412.  
  413. <p>Don’t do this.  If you do, then you end up having to reconstruct the HTML you want to exist out of the data you stuck on the custom element.  As in, you have to read off the <code>type</code>, <code> min</code>, <code> max</code>, <code> step</code>, and <code> value</code> attributes of the <code>&lt;super-slider&gt;</code> element, then create an <code>&lt;input&gt;</code> element and add the attributes and their values you just read off <code>&lt;super-slider&gt;</code>, create a <code>&lt;label&gt;</code> and insert the <code>&lt;super-slider&gt;</code>’s text content into the label’s text content, and why?  Why did I do this to myse&#x202F;—&#x2009; uh, I mean, why do this to yourself?</p>
  414.  
  415. <p>Do this instead:</p>
  416.  
  417. <pre class="html"><code>&lt;super-slider unit="em" target=".preview h1"&gt;
  418. &lt;label for="title-size"&gt;Title font size&lt;/label&gt;
  419. &lt;input id="title-size" type="range" min="0.5" max="4" step="0.1" value="2" /&gt;
  420. &lt;/super-slider&gt;</code>
  421. </pre>
  422.  
  423. <p>This is the pattern I got from <code>&lt;fit-vids&gt;</code>, and the moment that really broke down the barrier I’d had to understanding what makes web components so valuable.  By taking this approach, you get everything HTML gives you with the <code>&lt;label&gt;</code> and <code>&lt;input&gt;</code> elements for free, and you can add things on top of it.  It’s pure progressive enhancement.</p>
  424.  
  425. <aside>
  426. <p>Side note: keep in mind that the name <code>&lt;super-slider&gt;</code> was chosen, just as with <code>&lt;fit-vids&gt;</code>, because custom elements <strong>must</strong> (in the <a href="https://www.rfc-editor.org/rfc/rfc2119"> RFC 2119</a> sense of that word) have a hyphen within their name.  You can’t call your element <code>&lt;betterH1&gt;</code> or <code>&lt;fun_textarea&gt;</code> and have it work; you’d have to call them <code>&lt;better-H1&gt;</code> and <code>&lt;fun-textarea&gt;</code> instead.</p>
  427. <p>Also, don’t @ me about the <code>H1</code> being uppercase.  Element names can be capitalized however you want; we lowercase them out of historical inertia and unexamined habit.</p>
  428. </aside>
  429.  
  430. <p>To figure out how all this goes together, I found MDN’s page “<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Components/Using_custom_elements">Using custom elements</a>” really quite valuable.  That’s where I internalized the reality that instead of having to scrape the DOM for custom elements and then run through a loop, I could extend HTML itself:</p>
  431.  
  432. <pre class="js"><code>class superSlider extends HTMLElement {
  433. connectedCallback() {
  434. //
  435. // the magic happens here!
  436. //
  437. }
  438. }
  439.  
  440. customElements.define("super-slider",superSlider);</code>
  441. </pre>
  442.  
  443. <p>What that last line does is tell the browser, “any <code>&lt;super-slider&gt;</code> element is of the <code>superSlider</code> JavaScript class”.  Which means, any time the browser sees <code>&lt;super-slider&gt;</code>, it does the stuff that’s defined by <code> class superSlider</code> in the script.  Which is the thing in the previous code block!  So let’s talk about how it works, with concrete examples.</p>
  444.  
  445. <p>It’s the <code>class</code> structure that holds the real power.  Inside there, <code>connectedCallback()</code> is invoked whenever a <code>&lt;super-slider&gt;</code> is connected; that is, whenever one is encountered in the page by the browser as it parses the markup, or when one is added to the page later on.  It’s an auto-startup <a href="https://developer.mozilla.org/en-US/docs/Glossary/Callback_function">callback</a>.  (What’s a callback? I’ve never truly understood that, but it turns out I don’t have to!)  So in there, I write something like:</p>
  446.  
  447. <pre class="js"><code>connectedCallback() {
  448. let targetEl = document.querySelector(this.getAttribute('target'));
  449. let unit = this.getAttribute('unit');
  450. let slider = this.querySelector('input[type="range"]');
  451. }</code>
  452. </pre>
  453.  
  454. <p>So far, all I’ve done here is:</p>
  455.  
  456. <ul>
  457. <li>Used the value of the <code>target</code> attribute on <code>&lt;super-slider&gt;</code> to find the element that the range slider should affect using a CSS-esque query.</li>
  458. <li>The <code>unit</code> attribute’s value to know what CSS unit I’ll be using later in the code.</li>
  459. <li>Grabbed the range input itself by running a <code>querySelector()</code> within the <code>&lt;super-slider&gt;</code> element.</li>
  460. </ul>
  461.  
  462. <p>With all those things defined, I can add an event listener to the range input:</p>
  463.  
  464. <pre class="js"><code>slider.addEventListener("input",(e) =&gt; {
  465. let value = slider.value + unit;
  466. targetEl.style.setProperty('font-size',value);
  467. });</code>
  468. </pre>
  469.  
  470. <p>…and really, that’s it.  Put all together:</p>
  471.  
  472. <pre class="js"><code>class superSlider extends HTMLElement {
  473. connectedCallback() {
  474. let targetEl = document.querySelector(this.getAttribute('target'));
  475. let unit = this.getAttribute('unit');
  476. let slider = this.querySelector('input[type="range"]');
  477. slider.addEventListener("input",(e) =&gt; {
  478. targetEl.style.setProperty('font-size',slider.value + unit);
  479. });
  480. }
  481. }
  482.  
  483. customElements.define("super-slider",superSlider);</code>
  484. </pre>
  485.  
  486. <p>You can see it in action with <a href="https://codepen.io/meyerweb/pen/oNmXJRX">this CodePen</a>.</p>
  487.  
  488. <div class="codepen" data-height="350" data-default-tab="js,result" data-slug-hash="oNmXJRX" data-user="meyerweb" style="height: 350px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; padding: 1em;">
  489. <pre><code> &lt;span&gt;See the Pen &lt;a href="https://codepen.io/meyerweb/pen/oNmXJRX"&gt;
  490. WebCOLD 01&lt;/a&gt; by Eric A.  Meyer (&lt;a href="https://codepen.io/meyerweb"&gt;@meyerweb&lt;/a&gt;)
  491. on &lt;a href="https://codepen.io"&gt;CodePen&lt;/a&gt;.&lt;/span&gt;</code>
  492. </pre>
  493. </div>
  494.  
  495. <script async="async" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
  496.  
  497. <p>As I said earlier, you can get to essentially the same result by running <code>document.querySelectorAll('super-slider')</code> and then looping through the collection to find all the bits and bobs and add the event listeners and so on.  In a sense, that’s what I’ve done above, except I didn’t have to do the scraping and looping and waiting until the document has loaded &#x202F;—&#x2009;&#160;using web components abstracts all of that away.  I’m also registering all the components with the browser via <code>customElements.define()</code>, so there’s that too.  Overall, somehow, it just feels cleaner.</p>
  498.  
  499. <p>One thing that sets <code>customElements.define()</code> apart from the collect-and-loop-after-page-load approach is that custom elements fire all that connection callback code on themselves whenever they’re added to the document, all nice and encapsulated.  Imagine for a moment an application where custom elements are added well after page load, perhaps as the result of user input.  No problem!  There isn’t the need to repeat the collect-and-loop code, which would likely have to have special handling to figure out which are the new elements and which already existed.  It’s incredibly handy and much easier to work with.</p>
  500.  
  501. <p>But that’s not all!  Suppose we want to add a “reset” button &#x202F;—&#x2009;&#160;a control that lets you set the slider back to its starting value.  Adding some code to the <code>connectedCallback()</code> can make that happen.  There’s probably a bunch of different ways to do this, so what follows likely isn’t the most clever or re-usable way.  It is, instead, the way that made sense to me at the time.</p>
  502.  
  503. <pre class="js"><code>let reset = slider.getAttribute('value');
  504. let resetter = document.createElement('button');
  505. resetter.textContent = '↺';
  506. resetter.setAttribute('title', reset + unit);
  507. resetter.addEventListener("click",(e) =&gt; {
  508. slider.value = reset;
  509. slider.dispatchEvent(
  510.     new MouseEvent('input', {view: window, bubbles: false})
  511. );
  512. });
  513. slider.after(resetter);</code>
  514. </pre>
  515.  
  516. <p>With that code added into the connection callback, a button gets added right after the slider, and it shows a little circle-arrow to convey the concept of resetting.  You could just as easily make its text “Reset”.  When said button is clicked or keyboard-activated (<code>"click"</code> handles both, it seems), the slider is reset to the stored initial value, and then an input event is fired at the slider so the target element’s style will also be updated.  This is probably an ugly, ugly way to do this!  I did it anyway.</p>
  517.  
  518. <div class="codepen" data-height="350" data-default-tab="js,result" data-slug-hash="jOdPdyQ" data-user="meyerweb" style="height: 350px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; padding: 1em;">
  519. <pre><code> &lt;span&gt;See the Pen &lt;a href="https://codepen.io/meyerweb/pen/jOdPdyQ"&gt;
  520. WebCOLD 02&lt;/a&gt; by Eric A.  Meyer (&lt;a href="https://codepen.io/meyerweb"&gt;@meyerweb&lt;/a&gt;)
  521. on &lt;a href="https://codepen.io"&gt;CodePen&lt;/a&gt;.&lt;/span&gt;</code>
  522. </pre>
  523. </div>
  524.  
  525. <p>Okay, so now that I can reset the value, maybe I’d also like to see what the value is, at any given moment in time?  Say, by inserting a classed <code>&lt;span&gt;</code> right after the label and making its text content show the current combination of value and unit?</p>
  526.  
  527. <pre class="js"><code>let label = this.querySelector('label');
  528. let readout = document.createElement('span');
  529. readout.classList.add('readout');
  530. readout.textContent = slider.value + unit;
  531. label.after(readout);</code>
  532. </pre>
  533.  
  534. <p>Plus, I’ll need to add the same text content update thing to the slider’s handling of <code>input</code> events:</p>
  535.  
  536. <pre class="js"><code>slider.addEventListener("input", (e) =&gt; {
  537. targetEl.style.setProperty("font-size", slider.value + unit);
  538. readout.textContent = slider.value + unit;
  539. });</code>
  540. </pre>
  541.  
  542. <p>I imagine I could have made this readout-updating thing a little more generic (less <a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself">DRY</a>, if you like) by creating some kind of getter/setter things on the JS class, which is totally possible to do, but that felt like a little much for this particular situation.  Or I could have broken the readout update into its own function, either within the class or external to it, and passed in the readout and slider and reset value and unit to cause the update.  That seems awfully clumsy, though.  Maybe figuring out how to make the span a thing that observes slider changes and updates automatically?  I dunno, just writing the same thing in two places seemed a lot easier, so that’s how I did it.</p>
  543.  
  544. <p>So, at this point, here’s the entirety of the script, with a CodePen example of the same thing immediately after.</p>
  545.  
  546. <pre class="js"><code>class superSlider extends HTMLElement {
  547. connectedCallback() {
  548. let targetEl = document.querySelector(this.getAttribute("target"));
  549. let unit = this.getAttribute("unit");
  550.  
  551. let slider = this.querySelector('input[type="range"]');
  552. slider.addEventListener("input", (e) =&gt; {
  553. targetEl.style.setProperty("font-size", slider.value + unit);
  554. readout.textContent = slider.value + unit;
  555. });
  556.  
  557. let reset = slider.getAttribute("value");
  558. let resetter = document.createElement("button");
  559. resetter.textContent = "↺";
  560. resetter.setAttribute("title", reset + unit);
  561. resetter.addEventListener("click", (e) =&gt; {
  562. slider.value = reset;
  563. slider.dispatchEvent(
  564. new MouseEvent("input", { view: window, bubbles: false })
  565. );
  566. });
  567. slider.after(resetter);
  568.  
  569. let label = this.querySelector("label");
  570. let readout = document.createElement("span");
  571. readout.classList.add("readout");
  572. readout.textContent = slider.value + unit;
  573. label.after(readout);
  574. }
  575. }
  576.  
  577. customElements.define("super-slider", superSlider);</code>
  578. </pre>
  579.  
  580. <div class="codepen" data-height="350" data-default-tab="js,result" data-slug-hash="NWoGbWX" data-user="meyerweb" style="height: 350px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; padding: 1em;">
  581. <pre><code> &lt;span&gt;See the Pen &lt;a href="https://codepen.io/meyerweb/pen/NWoGbWX"&gt;
  582. WebCOLD 03&lt;/a&gt; by Eric A.  Meyer (&lt;a href="https://codepen.io/meyerweb"&gt;@meyerweb&lt;/a&gt;)
  583. on &lt;a href="https://codepen.io"&gt;CodePen&lt;/a&gt;.&lt;/span&gt;</code>
  584. </pre>
  585. </div>
  586.  
  587. <p>Anything you can imagine JS would let you do to the HTML and CSS, you can do in here.  Add a class to the slider when it has a value other than its default value so you can style the reset button to fade in or be given a red outline, for example.</p>
  588.  
  589. <p>Or maybe do what I did, and add some structural-fix-up code.  For example, suppose I were to write:</p>
  590.  
  591. <pre class="html"><code>&lt;super-slider unit="em" target=".preview h2"&gt;
  592. &lt;label&gt;Subtitle font size&lt;/label&gt;
  593. &lt;input type="range" min="0.5" max="2.5" step="0.1" value="1.5" /&gt;
  594. &lt;/super-slider&gt;</code>
  595. </pre>
  596.  
  597. <p>In that bit of markup, I left off the <code>id</code> on the <code>&lt;input&gt;</code> and the <code>for</code> on the <code>&lt;label&gt;</code>, which means they have no structural association with each other.  (You should never do this, but sometimes it happens.)  To handle this sort of failing, I threw some code into the connection callback to detect and fix those kinds of authoring errors, because why not?  It goes a little something like this:</p>
  598.  
  599. <pre class="js"><code>if (!label.getAttribute('for') &amp;&amp; slider.getAttribute('id')) {
  600. label.setAttribute('for',slider.getAttribute('id'));
  601. }
  602. if (label.getAttribute('for') &amp;&amp; !slider.getAttribute('id')) {
  603. slider.setAttribute('id',label.getAttribute('for'));
  604. }
  605. if (!label.getAttribute('for') &amp;&amp; !slider.getAttribute('id')) {
  606. let connector = label.textContent.replace(' ','_');
  607. label.setAttribute('for',connector);
  608. slider.setAttribute('id',connector);
  609. }</code>
  610. </pre>
  611.  
  612. <p>Once more, this is probably the ugliest way to do this in JS, but also again, it works.  Now I’m making sure labels and inputs have association even when the author forgot to explicitly define it, which I count as a win.  If I were feeling particularly spicy, I’d have the code pop an alert chastising me for screwing up, so that I’d fix it instead of being a lazy author.</p>
  613.  
  614. <p>It also occurs to me, as I review this for publication, that I didn’t try to do anything in situations where both the <code>for</code> and <code>id</code> attributes are present, but their values don’t match.  That feels like something I should auto-fix, since I can’t imagine a scenario where they would need to intentionally be different.  It’s possible my imagination is lacking, of course.</p>
  615.  
  616. <p>So now, here’s all just-over-40 lines of the script that makes all this work, followed by a CodePen demonstrating it.</p>
  617.  
  618. <pre class="js"><code>class superSlider extends HTMLElement {
  619. connectedCallback() {
  620. let targetEl = document.querySelector(this.getAttribute("target"));
  621. let unit = this.getAttribute("unit");
  622.  
  623. let slider = this.querySelector('input[type="range"]');
  624. slider.addEventListener("input", (e) =&gt; {
  625. targetEl.style.setProperty("font-size", slider.value + unit);
  626. readout.textContent = slider.value + unit;
  627. });
  628.  
  629. let reset = slider.getAttribute("value");
  630. let resetter = document.createElement("button");
  631. resetter.textContent = "↺";
  632. resetter.setAttribute("title", reset + unit);
  633. resetter.addEventListener("click", (e) =&gt; {
  634. slider.value = reset;
  635. slider.dispatchEvent(
  636. new MouseEvent("input", { view: window, bubbles: false })
  637. );
  638. });
  639. slider.after(resetter);
  640.  
  641. let label = this.querySelector("label");
  642. let readout = document.createElement("span");
  643. readout.classList.add("readout");
  644. readout.textContent = slider.value + unit;
  645. label.after(readout);
  646.  
  647. if (!label.getAttribute("for") &amp;&amp; slider.getAttribute("id")) {
  648. label.setAttribute("for", slider.getAttribute("id"));
  649. }
  650. if (label.getAttribute("for") &amp;&amp; !slider.getAttribute("id")) {
  651. slider.setAttribute("id", label.getAttribute("for"));
  652. }
  653. if (!label.getAttribute("for") &amp;&amp; !slider.getAttribute("id")) {
  654. let connector = label.textContent.replace(" ", "_");
  655. label.setAttribute("for", connector);
  656. slider.setAttribute("id", connector);
  657. }
  658. }
  659. }
  660.  
  661. customElements.define("super-slider", superSlider);</code>
  662. </pre>
  663.  
  664. <div class="codepen" data-height="350" data-default-tab="result" data-slug-hash="PoVPbzK" data-user="meyerweb" style="height: 350px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; padding: 1em;">
  665. <pre><code> &lt;span&gt;See the Pen &lt;a href="https://codepen.io/meyerweb/pen/PoVPbzK"&gt;
  666. WebCOLD 04&lt;/a&gt; by Eric A.  Meyer (&lt;a href="https://codepen.io/meyerweb"&gt;@meyerweb&lt;/a&gt;)
  667. on &lt;a href="https://codepen.io"&gt;CodePen&lt;/a&gt;.&lt;/span&gt;</code>
  668. </pre>
  669. </div>
  670.  
  671. <p>There are doubtless cleaner/more elegant/more clever ways to do pretty much everything I did above, considering I’m not much better than an experienced amateur when it comes to JavaScript.  Don’t focus so much on the specifics of what I wrote, and more on the overall concepts at play.</p>
  672.  
  673. <p>I will say that I ended up using this custom element to affect more than just font sizes.  In some places I wanted to alter margins; in others, the hue angle of colors.  There are a couple of ways to do this.  The first is what I did, which is to use a bunch of CSS variables and change their values.  So the markup and relevant bits of the JS looked more like this:</p>
  674.  
  675. <pre class="html"><code>&lt;super-slider unit="em" variable="titleSize"&gt;
  676. &lt;label for="title-size"&gt;Title font size&lt;/label&gt;
  677. &lt;input id="title-size" type="range" min="0.5" max="4" step="0.1" value="2" /&gt;
  678. &lt;/super-slider&gt;</code>
  679. </pre>
  680.  
  681. <pre class="js"><code>let cssvar = this.getAttribute("variable");
  682. let section = this.closest('section');
  683.  
  684. slider.addEventListener("input", (e) =&gt; {
  685. section.style.setProperty(`--${cssvar}`, slider.value + unit);
  686. readout.textContent = slider.value + unit;
  687. });</code>
  688. </pre>
  689.  
  690. <p>The other way (that I can think of) would be to declare the target element’s selector and the property you want to alter, like this:</p>
  691.  
  692. <pre class="html"><code>&lt;super-slider unit="em" target=".preview h1" property="font-size"&gt;
  693. &lt;label for="title-size"&gt;Title font size&lt;/label&gt;
  694. &lt;input id="title-size" type="range" min="0.5" max="4" step="0.1" value="2" /&gt;
  695. &lt;/super-slider&gt;</code>
  696. </pre>
  697.  
  698. <p>I’ll leave the associated JS as an exercise for the reader.  I can think of reasons to do either of those approaches.</p>
  699.  
  700. <p><strong>But wait!  There’s more!</strong> Not more in-depth JS coding (even though we could absolutely keep going, and in the tool I built, I absolutely did), but there are some things to talk about before wrapping up.</p>
  701.  
  702. <p>First, if you need to invoke the class’s constructor for whatever reason&#x202F;—&#x2009;I’m sure there <em>are</em> reasons, whatever they may be&#x202F;—&#x2009;you have to do it with a <code>super()</code> up top.  Why?  I don’t know.  Why would you need to?  I don’t know.  If I read the intro to the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super">super page</a> correctly, I think it has something to do with class prototypes, but the rest went so far over my head the <a href="https://www.faa.gov/">FAA</a> issued a <abbr title="Notice to Airmen/Notice to Air Missions">NOTAM</abbr>.  Apparently I didn’t do anything that depends on the constructor in this article, so I didn’t bother including it.</p>
  703.  
  704. <p>Second, basically all the JS I wrote in this article went into the <code>connectedCallback()</code> structure.  This is only one of four built-in callbacks!  The others are:</p>
  705.  
  706. <ul>
  707. <li>
  708. <code>disconnectedCallback()</code>, which is fired whenever a custom element of this type is removed from the page.  This seems useful if you have things that can be added or subtracted dynamically, and you want to update other parts of the DOM when they’re subtracted.</li>
  709. <li>
  710. <code>adoptedCallback()</code>, which is (to quote MDN) “called each time the element is moved to a new document.” I have
  711. <em>no idea</em> what that means.  I understand all the words; it’s just that particular combination of them that confuses me.</li>
  712. <li>
  713. <code>attributeChangedCallback()</code>, which is fired when attributes of the custom element change.  I thought about trying to use this for my super-sliders, but in the end, nothing I was doing made sense (to me) to bubble up to the custom element just to monitor and act upon.  A use case that does suggest itself: if I allowed users to change the sizing unit, say from
  714. <code>em</code> to
  715. <code>vh</code>, I’d want to change other things, like the
  716. <code>min</code>,
  717. <code>max</code>,
  718. <code>step</code>, and default
  719. <code>value</code> attributes of the sliders.  So, since I’d have to change the value of the
  720. <code>unit</code> attribute anyway, it might make sense to use
  721. <code>attributeChangedCallback()</code> to watch for that sort of thing and then take action.  Maybe!</li>
  722. </ul>
  723.  
  724. <p>Third, I didn’t really talk about styling any of this.  Well, because all of this stuff is in the Light DOM, I don’t have to worry about Shadow Walls or whatever, I can style everything the normal way.  Here’s a part of the CSS I use in the CodePens, just to make things look a little nicer:</p>
  725.  
  726. <pre class="css"><code>super-slider {
  727. display: flex;
  728. align-items: center;
  729. margin-block: 1em;
  730. }
  731. super-slider input[type="range"] {
  732. margin-inline: 0.25em 1px;
  733. }
  734. super-slider .readout {
  735. width: 3em;
  736. margin-inline: 0.25em;
  737. padding-inline: 0.5em;
  738. border: 1px solid #0003;
  739. background: #EEE;
  740. font: 1em monospace;
  741. text-align: center;
  742. }</code>
  743. </pre>
  744.  
  745. <p>Hopefully that all makes sense, but if not, let me know in the comments and I’ll clarify.</p>
  746.  
  747. <p>A thing I didn’t do was use the <code>:defined</code> pseudo-class to style custom elements that are defined, or rather, to style those that are <em>not</em> defined.  Remember the last line of the script, where <code>customElements.define()</code> is called to define the custom elements?  Because they are defined that way, I could add some CSS like this:</p>
  748.  
  749. <pre class="css"><code>super-slider:not(:defined) {
  750. display: none;
  751. }</code>
  752. </pre>
  753.  
  754. <p>In other words, if a <code>&lt;super-slider&gt;</code> for some reason <em>isn’t</em> defined, make it and everything inside it just… go away.  Once it becomes defined, the selector will no longer match, and the <code>display: none</code> will be peeled away.  You could use <code>visibility</code> or <code>opacity</code> instead of <code>display</code>; really, it’s up to you.  Heck, you could tile red warning icons in the whole background of the custom element if it hasn’t been defined yet, just to drive the point home.</p>
  755.  
  756. <p>The beauty of all this is, you don’t have to mess with Shadow DOM selectors like <code>::part()</code> or <code>::slotted()</code>.  You can just style elements the way you always style them, whether they’re built into HTML or special hyphenated elements you made up for your situation and then, like the Boiling Isles’ most powerful witch, called into being.</p>
  757.  
  758. <p>That said, there’s a “fourth” here, which is that Shadow DOM does offer one very powerful capability that fully Light DOM custom elements lack: the ability to create a structural template with <code>&lt;slot&gt;</code> elements, and then drop your Light-DOM elements into those slots.  This slotting ability does make Shadowy web components a lot more robust and easier to share around, because as long as the slot names stay the same, the template can be changed without breaking anything.  This is a level of robustness that the approach I explored above lacks, and it’s built in.  It’s the one thing I actually do like about Shadow DOM.</p>
  759.  
  760. <p>It’s true that in a case like I’ve written about here, that’s not a huge issue: I was quickly building a web component for a single tool that I could re-use within the context of that tool.  It works fine in that context.  It isn’t portable, in the sense of being a thing I could turn into an npm package for others to use, or probably even share around my organization for other teams to use.  But then, I only put 40-50 lines worth of coding into it, and was able to rapidly iterate to create something that met my needs perfectly.  I’m a lot more inclined to take this approach in the future, when the need arises, which will be a very powerful addition to my web development toolbox.</p>
  761.  
  762. <p>I’d love to see the templating/slotting capabilities of Shadow DOM brought into the fully Light-DOM component world.  Maybe that’s what Declarative Shadow DOM is?  Or maybe not!  My eyes still go cross-glazed whenever I try to read articles about Shadow DOM, almost like a trickster demon lurking in the shadows casts a Spell of Confusion at me.</p>
  763.  
  764. <p>So there you have it: a few thousand words on my journey through coming to understand and work with these fully-Light-DOM web components, otherwise known as custom elements.  Now all they need is a catchy name, so we can draw more people to the Light Side of the Web.  If you have any ideas, please drop ’em in the comments!</p>
  765.  
  766. <hr><p>Have something to say to all that?  You can <a href="https://meyerweb.com/eric/thoughts/2023/11/01/blinded-by-the-light-dom/#commentform">add a comment to the post</a>, or <a href="mailto:eric@meyerweb.com?subject=In%20reply%20to%20%22Blinded%20By%20the%20Light%20DOM%22">email Eric directly</a>.</p>]]></content:encoded>
  767. <wfw:commentRss>https://meyerweb.com/eric/thoughts/2023/11/01/blinded-by-the-light-dom/feed/</wfw:commentRss>
  768. <slash:comments>15</slash:comments>
  769. </item>
  770. <item>
  771. <title>Mistakes Were Made</title>
  772. <link>https://meyerweb.com/eric/thoughts/2023/10/24/mistakes-were-made/</link>
  773. <comments>https://meyerweb.com/eric/thoughts/2023/10/24/mistakes-were-made/#comments</comments>
  774. <dc:creator><![CDATA[Eric Meyer]]></dc:creator>
  775. <pubDate>Tue, 24 Oct 2023 20:50:27 +0000</pubDate>
  776. <category><![CDATA[Browsers]]></category>
  777. <category><![CDATA[Standards]]></category>
  778. <guid isPermaLink="false">https://meyerweb.com/eric/thoughts/?p=5430</guid>
  779.  
  780. <description><![CDATA[Late last week, I posted a tiny hack related to :has() and Firefox.  This was, in some ways, a mistake. ]]></description>
  781. <content:encoded><![CDATA[<p>Late last week, I posted a tiny hack related to <code>:has()</code> and Firefox.  This was, in some ways, a mistake.  Let me explain how.</p>
  782.  
  783. <p>Primarily, I should have filed a bug about it.  Someone else <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1860136">did so</a>, and it’s already been fixed.  This is all great in the wider view, but I shouldn’t be offloading the work of reporting browser bugs when I know perfectly well how to do that.  I got too caught up in the fun of documenting a tiny hack (my favorite kind!) to remember that, which is no excuse.</p>
  784.  
  785. <p>Not far behind that, I should have remembered that Firefox only supports <code>:has()</code> at the moment if you’ve enabled the <code>layout.css.has-selector.enabled</code> flag in <kbd>about:config</kbd>.  Although this may be the default now in Nightly builds, given that my copy of Firefox Nightly (121.0a1) shows the flag as <code> true</code> without the Boldfacing of Change.  At any rate, I should have been clear about the support status.</p>
  786.  
  787. <p>Thus, I offer my apologies to the person who did the reporting work I should have done, who also has my gratitude, and to anyone who I misled about the state of support in Firefox by not being clear about it.  Neither was my intent, but impact outweighs intent.  I’ll add a note to the top of the previous article that points here, and resolve to do better.</p>
  788.  
  789. <hr><p>Have something to say to all that?  You can <a href="https://meyerweb.com/eric/thoughts/2023/10/24/mistakes-were-made/#commentform">add a comment to the post</a>, or <a href="mailto:eric@meyerweb.com?subject=In%20reply%20to%20%22Mistakes%20Were%20Made%22">email Eric directly</a>.</p>]]></content:encoded>
  790. <wfw:commentRss>https://meyerweb.com/eric/thoughts/2023/10/24/mistakes-were-made/feed/</wfw:commentRss>
  791. <slash:comments>1</slash:comments>
  792. </item>
  793. <item>
  794. <title>Prodding Firefox to Update :has() Selection</title>
  795. <link>https://meyerweb.com/eric/thoughts/2023/10/19/ffhack-has/</link>
  796. <comments>https://meyerweb.com/eric/thoughts/2023/10/19/ffhack-has/#comments</comments>
  797. <dc:creator><![CDATA[Eric Meyer]]></dc:creator>
  798. <pubDate>Thu, 19 Oct 2023 16:29:24 +0000</pubDate>
  799. <category><![CDATA[Browsers]]></category>
  800. <category><![CDATA[CSS]]></category>
  801. <category><![CDATA[DOM]]></category>
  802. <category><![CDATA[Hacks]]></category>
  803. <category><![CDATA[JavaScript]]></category>
  804. <guid isPermaLink="false">https://meyerweb.com/eric/thoughts/?p=5424</guid>
  805.  
  806. <description><![CDATA[Wanted to share a little hack I developed to make Firefox a tiny bit more capable with :has().]]></description>
  807. <content:encoded><![CDATA[<p>
  808. I’ve posted <a href="https://meyerweb.com/eric/thoughts/2023/10/24/mistakes-were-made/">a followup to this post</a> which you should read before you read this post, because you might decide there’s no need to read this one.  If not, <strong>please note</strong> that what’s documented below was a hack to overcome a bug that was <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1860136">quickly fixed</a>, in a part of CSS that wasn’t enabled in stable Firefox at the time I wrote the post.  Thus, what follows isn’t really useful, and leaves more than one wrong impression.  I apologize for this.  For a more detailed breakdown of my errors, please see <a href="https://meyerweb.com/eric/thoughts/2023/10/24/mistakes-were-made/">the followup post</a>.
  809. </p>
  810.  
  811. <hr />
  812.  
  813. <p>I’ve been doing some development recently on a tool that lets me quickly produce social-media banners for my work at <a href="https://igalia.com">Igalia</a>.  It started out using a vanilla JS script to snarfle up collections of HTML elements like all the range inputs, stick listeners and stuff on them, and then alter CSS variables when the inputs change.  Then I had a conceptual breakthrough and refactored the entire thing to use fully light-DOM web components (FLDWCs), which let me rapidly and radically increase the tool’s capabilities, and I kind of love the FLDWCs even as I struggle to figure out the best practices.</p>
  814.  
  815. <p>With luck, I’ll write about all that soon, but for today, I wanted to share a little hack I developed to make Firefox a tiny bit more capable.</p>
  816.  
  817. <p>One of the things I do in the tool’s CSS is check to see if an element (represented here by a <code>&lt;div&gt;</code> for simplicity’s sake) has an image whose <code>src</code> attribute is a <code>base64</code> string instead of a URI, and when it is, add some generated content. (It makes sense in context.  Or at least it makes sense to me.) The CSS rule looks very much like this:</p>
  818.  
  819. <pre class="css"><code>div:has(img[src*=";data64,"])::before {
  820. […generated content styles go here…]
  821. }</code>
  822. </pre>
  823.  
  824. <p>This works fine in WebKit and Chromium.  Firefox, at least as of the day I’m writing this, often fails to notice the change, which means the selector doesn’t match, even in the Nightly builds, and so the generated content isn’t generated.  It has problems correlating DOM updates and <code>:has()</code>, is what it comes down to.</p>
  825.  
  826. <p>There is a way to prod it into awareness, though!  What I found during my development was that if I clicked or tabbed into a <code>contenteditable</code> element, the <code>:has()</code> would suddenly match and the generated content would appear.  The editable element didn’t even have to be a child of the <code>div</code> bearing the <code>:has()</code>, which seemed weird to me for no distinct reason, but it made me think that maybe any content editing would work.</p>
  827.  
  828. <p>I tried adding <code>contenteditable</code> to a nearby element and then immediately removing it via JS, and that didn’t work.  But then I added a tiny delay to removing the <code>contenteditable</code>, and that worked!  I feel like I might have seen a similar tactic proposed by someone on social media or a blog or something, but if so, I can’t find it now, so my apologies if I ganked your idea without attribution.</p>
  829.  
  830. <p>My one concern was that if I wasn’t careful, I might accidentally pick an element that was <em>supposed</em> to be editable, and then remove the editing state it’s supposed to have.  Instead of doing detection of the attribute during selection, I asked myself, “Self, what’s an element that is assured to be present but almost certainly not ever set to be editable?”</p>
  831.  
  832. <p>Well, there will always be a root element.  Usually that will be <code>&lt;html&gt;</code> but you never know, maybe it will be something else, what with web components and all that.  Or you could be styling your RSS feed, which is in fact <a href="https://stackoverflow.com/questions/118685/how-can-i-apply-my-css-stylesheet-to-an-rss-feed">a thing one can do</a>.  At any rate, where I landed was to add the following right after the part of my script where I set an image’s <code> src</code> to use a <code>base64</code> URI:</p>
  833.  
  834. <pre class="js"><code>let ffHack = document.querySelector(':root');
  835. ffHack.setAttribute('contenteditable','true');
  836. setTimeout(function(){
  837. ffHack.removeAttribute('contenteditable');
  838. },7);</code>
  839. </pre>
  840.  
  841. <p>Literally all this does is grab the page’s root element, set it to be <code>contenteditable</code>, and then seven milliseconds later, remove the <code> contenteditable</code>.  That’s about a millisecond less than the lifetime of a rendering frame at 120fps, so ideally, the browser won’t draw a frame where the root element is actually editable… or, if there is such a frame, it will be replaced by the next frame so quickly that the odds of accidentally editing the root are very, very, very small.</p>
  842.  
  843. <p>At the moment, I’m not doing any browser sniffing to figure out if the hack needs to be applied, so every browser gets to do this shuffle on Firefox’s behalf.  Lazy, I suppose, but I’m going to wave my hands and intone “browsers are very fast now” while studiously ignoring all the inner voices complaining about inefficiency and inelegance.  I feel like using this hack means it’s too late for all those concerns anyway.</p>
  844.  
  845. <p>I don’t know how many people out there will need to prod Firefox like this, but for however many there are, I hope this helps.  And if you have an even better approach, please let us know in the comments!</p>
  846.  
  847. <hr><p>Have something to say to all that?  You can <a href="https://meyerweb.com/eric/thoughts/2023/10/19/ffhack-has/#commentform">add a comment to the post</a>, or <a href="mailto:eric@meyerweb.com?subject=In%20reply%20to%20%22Prodding%20Firefox%20to%20Update%20:has()%20Selection%22">email Eric directly</a>.</p>]]></content:encoded>
  848. <wfw:commentRss>https://meyerweb.com/eric/thoughts/2023/10/19/ffhack-has/feed/</wfw:commentRss>
  849. <slash:comments>5</slash:comments>
  850. </item>
  851. <item>
  852. <title>An Anchored Navbar Solution</title>
  853. <link>https://meyerweb.com/eric/thoughts/2023/10/05/an-anchored-navbar-solution/</link>
  854. <comments>https://meyerweb.com/eric/thoughts/2023/10/05/an-anchored-navbar-solution/#comments</comments>
  855. <dc:creator><![CDATA[Eric Meyer]]></dc:creator>
  856. <pubDate>Thu, 05 Oct 2023 13:23:58 +0000</pubDate>
  857. <category><![CDATA[CSS]]></category>
  858. <guid isPermaLink="false">https://meyerweb.com/eric/thoughts/?p=5386</guid>
  859.  
  860. <description><![CDATA[Revisiting a CSS trick I wrote about in 2022 and re-doing it using a new CSS feature.]]></description>
  861. <content:encoded><![CDATA[<p>Not quite a year ago, I published <a href="https://meyerweb.com/eric/thoughts/2022/10/19/a-dashing-navbar-solution/">an exploration of how I used layered backgrounds</a> to create the appearance of a single bent line that connected one edge of the design to whichever navbar link corresponded to the current page.  It was fairly creative, if I do say so myself, but even then I knew&#160;&#x202F;—&#x2009; and said explicitly!&#160;&#x202F;—&#x2009; that it was a hack, and that I really wanted to use anchor positioning to do it cleanly.</p>
  862.  
  863. <p>Now that anchor positioning is supported behind a developer flag in Chrome, we can experiment with it, as I did in the recent post “<a href="https://meyerweb.com/eric/thoughts/2023/09/12/nuclear-anchored-sidenotes/">Nuclear Anchored Sidenotes</a>”.  Well, today, I’m back on my anchor BS with a return to that dashed navbar connector as seen on <a href="https://wpewebkit.org"> wpewebkit.org</a>, and how it can be done more cleanly and simply, just as I’d hoped last year.</p>
  864.  
  865. <p>First, let’s look at the thing we’re trying to recreate.</p>
  866.  
  867. <figure class="standalone">
  868. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchor-00.png"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchor-00.png" alt="" /></a>
  869. <figcaption>The connecting line, as done with a bunch of forcibly-sized and creatively overlapped background gradient images.</figcaption>
  870. </figure>
  871.  
  872. <p>To understand the ground on which we stand, let’s make a quick perusal of the simple HTML structure at play here.  At least, the relevant parts of it, with some bits elided by ellipses for clarity.</p>
  873.  
  874. <pre class="html">
  875. <code>&lt;nav class="global"&gt;
  876. &lt;div&gt;
  877. &lt;a href="…"&gt;&lt;img src="…" alt="WPE"&gt;&lt;/a&gt;
  878. &lt;ul&gt;…&lt;/ul&gt;
  879. &lt;/div&gt;
  880. &lt;/nav&gt;</code>
  881. </pre>
  882.  
  883. <p>Inside that (unclassed! on purpose!) <code>&lt;ul&gt;</code>, there are a number of list items, each of which holds a hyperlink.  Whichever list item contains the hyperlink that corresponds to the current page gets a class of <code> currentPage</code>, because class naming is a deep and mysterious art.</p>
  884.  
  885. <p>To that HTML structure, the following bits of CSS trickery were applied in the work I did last year, brought together in this code block for the sake of brevity (note this is the old thing, not the new anchoring hotness):</p>
  886.  
  887. <pre class="css">
  888. <code>nav.global div {
  889. display: flex;
  890. justify-content: space-between;
  891. gap: 1em;
  892. max-width: var(--mainColMax);
  893. margin: 0 auto;
  894. height: 100%;
  895. background: var(--dashH);
  896. }
  897.  
  898. @media (min-width: 720px) {
  899. nav.global ul li.currentPage::before {
  900. content: '';
  901. position: absolute;
  902. z-index: 1;
  903. top: 50%;
  904. bottom: 0;
  905. left: 50%;
  906. right: 0;
  907. background:
  908. var(--dashV),
  909. linear-gradient(0deg, #FFFF 2px, transparent 2px)
  910. ;
  911. background-size: 1px 0.5em, auto;
  912. }
  913. nav.global ul li.currentPage {
  914. position: relative;
  915. }
  916. nav.global ul li.currentPage a {
  917. position: relative;
  918. z-index: 2;
  919. padding: 0;
  920. padding-block: 0.25em;
  921. margin: 1em;
  922. background: var(--dashH);
  923. background-size: 0.5em 1px;
  924. background-position: 50% 100%;
  925. background-color: #FFF;
  926. color: inherit;
  927. }
  928. }</code>
  929. </pre>
  930.  
  931. <p>If you’re wondering what the heck is going on there, please feel free to read <a href="https://meyerweb.com/eric/thoughts/2022/10/19/a-dashing-navbar-solution/">the post from last year</a>.  You can even go read it now, if you want, even though I’m about to flip most of that apple cart and stomp on the apples to make ground cider.  Your life is your own; steer it as best suits you.</p>
  932.  
  933. <p>Anyway, here are the bits I’m tearing out to make way for an anchor-positioning solution.  The positioning-edge properties (<code>top</code>, etc.) removed from the second rule will return shortly in a more logical form.</p>
  934.  
  935. <pre class="css">
  936. <code>nav.global div {
  937. display: flex;
  938. justify-content: space-between;
  939. gap: 1em;
  940. max-width: var(--mainColMax);
  941. margin: 0 auto;
  942. height: 100%;
  943. <del>   background: var(--dashH);</del>
  944. }
  945. @media (min-width: 720px) {
  946. nav.global ul li.currentPage::before {
  947. content: '';
  948. position: absolute;
  949. <del>    z-index: 1;
  950. top: 50%;
  951. bottom: 0;
  952. left: 50%;
  953. right: 0;
  954. background:
  955. var(--dashV),
  956. linear-gradient(0deg, #FFFF 2px, transparent 2px)
  957. ;
  958. background-size: 1px 0.5em, auto;</del>
  959. }
  960. <del>   nav.global ul li.currentPage {
  961. position: relative;
  962. }</del>
  963. nav.global ul li.currentPage a {
  964. <del>    position: relative;
  965. z-index: 2;</del>
  966. padding: 0;
  967. padding-block: 0.25em;
  968. margin: 1em;
  969. <del>    background: var(--dashH);
  970. background-size: 0.5em 1px;
  971. background-position: 50% 100%;
  972. background-color: #FFF;</del>
  973. color: inherit;
  974. }
  975. }</code>
  976. </pre>
  977.  
  978. <p>That pulls out not only the positioning edge properties, but also the background dash variables and related properties.  And a whole rule to relatively position the <code>currentPage</code> list item, gone.  The resulting lack of any connecting line being drawn is perhaps predictable, but here it is anyway.</p>
  979.  
  980. <figure class="standalone">
  981. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchor-01.png"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchor-01.png" /></a>
  982. <figcaption>The connecting line disappears as all its support structures and party tricks are swept away.</figcaption>
  983. </figure>
  984.  
  985. <p>With the field cleared of last year’s detritus, let’s get ready to anchor!</p>
  986.  
  987. <p>Step one is to add in positioning edges, for which I’ll use logical positioning properties instead of the old physical properties.  Along with those, a negative Z index to drop the generated decorator (that is, a decorative component based on generated content, which is what this <code>::before</code> rule is creating) behind the entire set of links, dashed borders along the block and inline ends of the generated decorator, and a light-red background color so we can see the decorator’s placement more clearly.</p>
  988.  
  989. <pre class="css">
  990. <code> nav.global ul li.currentPage::before {
  991. content: '';
  992. position: absolute;
  993. <ins>    inset-block-start: 0;
  994. inset-block-end: 0;
  995. inset-inline-start: 0;
  996. inset-block-end: 0;
  997. z-index: -1;
  998. border: 1px dashed;
  999. border-block-width: 0 1px;
  1000. border-inline-width: 0 1px;
  1001. background-color: #FCC;</ins>
  1002. }</code>
  1003. </pre>
  1004.  
  1005. <p>I’ll also give the <code>&lt;a&gt;</code> element inside the <code>currentPage</code> list item a dashed border along its block-end edge, since the design calls for one.</p>
  1006.  
  1007. <pre class="css">
  1008. <code> nav.global ul li.currentPage a {
  1009. padding: 0;
  1010. padding-block: 0.25em;
  1011. margin: 1em;
  1012. color: inherit;
  1013. <ins>    border-block-end: 1px dashed;</ins>
  1014. }</code>
  1015. </pre>
  1016.  
  1017. <p>And those changes give us the result shown here.</p>
  1018.  
  1019. <figure class="standalone">
  1020. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchor-02.png"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchor-02.png" alt="" /></a>
  1021. <figcaption>The generated decorator, decorating the entirety of its containing block.</figcaption>
  1022. </figure>
  1023.  
  1024. <p>Well, I <em>did</em> set all the positioning edge values to be <code>0</code>, so it makes sense that the generated decorator fills out the relatively-positioned <code>&lt;div&gt;</code> acting as its containing block.  Time to fix that.</p>
  1025.  
  1026. <p>What we need to do give the top and right&#160;&#x202F;—&#x2009; excuse me, the block-start and inline-end&#160;&#x202F;—&#x2009; edges of the decorator a positioning anchor.  Since the thing we want to connect the decorator’s visible edges to is the <code>&lt;a&gt;</code> inside the <code>currentPage</code> list item, I’ll make it the positioning anchor:</p>
  1027.  
  1028. <pre class="css">
  1029. <code> nav.global ul li.currentPage a {
  1030. padding: 0;
  1031. padding-block: 0.25em;
  1032. margin: 1em;
  1033. color: inherit;
  1034. border-block-end: 1px dashed;
  1035. <ins>    anchor-name: --currentPageLink;</ins>
  1036. }</code>
  1037. </pre>
  1038.  
  1039. <p>Yes, you’re reading that correctly: I made an anchor be an anchor.</p>
  1040.  
  1041. <p>(That’s an HTML anchor element being designated as a CSS positioning anchor, to be clear.  Sorry to pedantically explain the joke and thus ruin it, but I fear confusion more than banality.)</p>
  1042.  
  1043. <p>Now that we have a positioning anchor, the first thing to do, because it’s more clear to do it in this order, is to pin the inline-end edge of the generated decorator to its anchor.  Specifically, to pin it to the <em>center</em> of the anchor, since that’s what the design calls for.</p>
  1044.  
  1045. <pre class="css">
  1046. <code> nav.global ul li.currentPage::before {
  1047. content: '';
  1048. position: absolute;
  1049. inset-block-start: 0;
  1050. inset-block-end: 0;
  1051. inset-inline-start: 0;
  1052. inset-inline-end: <ins>anchor(--currentPageLink center);</ins>
  1053. z-index: -1;
  1054. border: 1px dashed;
  1055. border-block-width: 0 1px;
  1056. border-inline-width: 0 1px;
  1057. background-color: #FCC;
  1058. }</code>
  1059. </pre>
  1060.  
  1061. <p>Because this <code>anchor()</code> function is being used with an inline inset property, the <code>center</code> here refers to the inline center of the referenced anchor (in both the HTML and CSS senses of that word) <code>--currentPageLink</code>, which in this particular case is its horizontal center.  That gives us the following.</p>
  1062.  
  1063. <figure class="standalone">
  1064. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchor-03a.png"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchor-03a.png" alt="" /></a>
  1065. <figcaption>The generated decorator with its inline-end edge aligned with the inline center of the anchoring anchor.</figcaption>
  1066. </figure>
  1067.  
  1068. <p>The next step is to pin the top block edge of the generated decorator with respect to its positioning anchor.  Since we want the line to come up and touch the block-end edge of the anchor, the <code>end</code> keyword is used to pin to the block end of the anchor (in this situation, its bottom edge).</p>
  1069.  
  1070. <pre class="css">
  1071. <code> nav.global ul li.currentPage::before {
  1072. content: '';
  1073. position: absolute;
  1074. inset-block-start: <ins>anchor(--currentPageLink end);</ins>
  1075. inset-block-end: 0;
  1076. inset-inline-start: 0;
  1077. inset-inline-end: anchor(--currentPageLink center);
  1078. z-index: -1;
  1079. border: 1px dashed;
  1080. border-block-width: 0 1px;
  1081. border-inline-width: 0 1px;
  1082. background-color: #FCC;
  1083. }</code>
  1084. </pre>
  1085.  
  1086. <p>Since the inset property in this case is block-related, the <code>end</code> keyword here means the block end of the anchor (again, in both senses).  And thus, the job is done, except for removing the light-red diagnostic background.</p>
  1087.  
  1088. <figure class="standalone">
  1089. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchor-03b.png"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchor-03b.png" alt="" /></a>
  1090. <figcaption>The generated decorator with its block-start edge aligned with the block-end edge of the anchoring anchor.</figcaption>
  1091. </figure>
  1092.  
  1093. <p>Once that red background is taken out, we end up with the following rules inside the media query:</p>
  1094.  
  1095. <pre class="css">
  1096. <code> nav.global ul li.currentPage::before {
  1097. content: '';
  1098. position: absolute;
  1099. inset-block-start: anchor(--currentPageLink bottom);
  1100. inset-block-end: 0;
  1101. inset-inline-start: 0;
  1102. inset-inline-end: anchor(--currentPageLink center);
  1103. z-index: -1;
  1104. border: 1px dashed;
  1105. border-block-width: 0 1px;
  1106. border-inline-width: 0 1px;
  1107. }
  1108. nav.global ul li.currentPage a {
  1109. padding: 0;
  1110. padding-block: 0.25em;
  1111. margin: 1em;
  1112. color: inherit;
  1113. border-block-end: 1px dashed;
  1114. anchor-name: --currentPageLink;
  1115. }</code>
  1116. </pre>
  1117.  
  1118. <p>The inline-start and block-end edges of the generated decorator still have position values of <code>0</code>, so they stick to the edges of the containing block (the <code>&lt;div&gt;</code>).  The block-start and inline-end edges have values that are set with respect to their anchor.  That’s it, done and dusted.</p>
  1119.  
  1120. <figure class="standalone">
  1121. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchor-04.png"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchor-04.png" alt="" /></a>
  1122. <figcaption>The connecting line is restored, but is now a lot easier to manage from the CSS side.</figcaption>
  1123. </figure>
  1124.  
  1125. <p>…okay, okay, there are a couple more things to talk about before we go.</p>
  1126.  
  1127. <p>First, the dashed borders I used here don’t look fully consistent with the other dashed “borders” in the design.  I used actual borders for the CSS in this article because they’re fairly simple, as CSS goes, allowing me to focus on the topic at hand.  To make these borders fully consistent with the rest of the design, I have two choices:</p>
  1128.  
  1129. <ol>
  1130. <li>Remove the borders from the generated decorator and put the background-trick “borders” back into it.  This would be relatively straightforward to do, at the cost of inflating the rules a little bit with background sizing and positioning and all that.</li>
  1131. <li>Convert all the other background-trick “borders” to be actual dashed borders.  This would also be pretty straightforward, and would reduce the overall complexity of the CSS.</li>
  1132. </ol>
  1133.  
  1134. <p>On balance, I’d probably go with the first option, because dashed borders still aren’t fully visually consistent from browser to browser, and people get cranky about those kinds of inconsistencies.  Background gradient tricks give you more control in exchange for you writing more declarations.  Still, either choice is completely defensible.</p>
  1135.  
  1136. <p>Second, you might be wondering if that <code>&lt;div&gt;</code> was even necessary.  Not technically, no.  At first, I kept using it because it was already there, and removing it seemed like it would require refactoring a bunch of other code not directly related to this post.  So I didn’t.</p>
  1137.  
  1138. <p>But it tasked me.  It <em>tasked</em> me.  So I decided to take it out after all, and see what I’d have to do to make it work.  Once I realized doing this illuminated an important restriction on what you can do with anchor positioning, I decided to explore it here.</p>
  1139.  
  1140. <p>As a reminder, here’s the HTML as it stood before I started removing bits:</p>
  1141.  
  1142. <pre class="html">
  1143. <code>&lt;nav class="global"&gt;
  1144. &lt;div&gt;
  1145. &lt;a href="…"&gt;&lt;img src="…" alt="WPE"&gt;&lt;/a&gt;
  1146. &lt;ul&gt;…&lt;/ul&gt;
  1147. &lt;/div&gt;
  1148. &lt;/nav&gt;</code>
  1149. </pre>
  1150.  
  1151. <p>Originally, the <code>&lt;div&gt;</code> was put there to provide a layout container for the logo and navbar links, so they’d be laid out to line up with the right and left sides of the page content.  The <code>&lt;nav&gt;</code> was allowed to span the entire page, and the <code>&lt;div&gt;</code> was set to the same width as the content, with <code>auto</code> side margins to center it.</p>
  1152.  
  1153. <p>So, after pulling out the <code>&lt;div&gt;</code>, I needed an anchor for the navbar to size itself against.  I couldn’t use the <code>&lt;main&gt;</code> element that follows the <code>&lt;nav&gt;</code> and contains the page content, because it’s a page-spanning Grid container.  Just inside it, though, are <code>&lt;section&gt;</code> elements, and some (not all!) of them are the requisite width.  So I added:</p>
  1154.  
  1155. <pre class="css">
  1156. <code>main > section:not(.full-width) {
  1157. anchor-name: --mainCol;
  1158. }</code>
  1159. </pre>
  1160.  
  1161. <p>The <code>full-width</code> class makes some sections page-spanning, so I needed to avoid those; thus the negative selection there.  Now I could reference the <code>&lt;nav&gt;</code>’s edges against the named anchor I just defined.  (Which is probably actually multiple anchors, but they all have the same width, so it comes to the same thing.)  So I dropped those anchor references into the CSS:</p>
  1162.  
  1163. <pre class="css">
  1164. <code>nav.global {
  1165. display: flex;
  1166. justify-content: space-between;
  1167. height: 5rem;
  1168. gap: 1em;
  1169. position: fixed;
  1170. top: 0;
  1171. <ins> inset-inline-start: anchor(--mainCol left);
  1172. inset-inline-end: anchor(--mainCol right);</ins>
  1173. z-index: 12345;
  1174. backdrop-filter: blur(10px);
  1175. background: hsla(0deg,0%,100%,0.9);
  1176. }</code>
  1177. </pre>
  1178.  
  1179. <p>And that worked!  The inline start and end edges, which in this case are the left and right edges, lined up with the edges of the content column.</p>
  1180.  
  1181. <figure class="standalone">
  1182. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchor-05.png"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchor-05.png" alt="" /></a>
  1183. <figcaption>Positioning the <code>&lt;nav&gt;</code> with respect to the anchoring section(s).</figcaption>
  1184. </figure>
  1185.  
  1186. <p>…except it <em>didn’t</em> work on any page that had any content that overflowed the main column, which is most of them.</p>
  1187.  
  1188. <figure class="standalone">
  1189. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchor-05.png"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchor-06.png" alt="" /></a>
  1190. <figcaption>See, this is why I embedded a <code>&lt;div&gt;</code> inside the <code>&lt;nav&gt;</code> in the first place.</figcaption>
  1191. </figure>
  1192.  
  1193. <p>But wait.  Why couldn’t I just position the logo and list of navigation links against the <code>--mainCol</code> anchor?  Because in anchored positioning, just like nearly every other form of positioning, containing blocks are barriers.  Recall that the <code>&lt;nav&gt;</code> is a fixed-position box, so it can stick to the top of the viewport.  That means any elements inside it can only be positioned with respect to anchors that also have the <code>&lt;nav&gt;</code> as their containing block.</p>
  1194.  
  1195. <p>That’s fine for the generated decorator, since it and the <code>currentPageLink</code> anchor both have the <code>&lt;nav&gt;</code> as their containing block.  To try to align the logo and navlinks, though, I can’t look outside the <code>&lt;nav&gt;</code> at anything else, and that includes the sections inside the <code>&lt;main&gt;</code> element, because the <code>&lt;nav&gt;</code> is not their containing block.  The <code>&lt;nav&gt;</code> element itself, on the other hand, shares a containing block with those sections: the initial containing block.  So I can anchor the <code>&lt;nav&gt;</code> itself to <code>--mainCol</code>.</p>
  1196.  
  1197. <p>I fiddled with various hacks to extend the background of the <code>&lt;nav&gt;</code> without shifting its content edges, padding and negative margins and stuff like that, but in end, I fell back on a border-image hack, which required I remove the background.</p>
  1198.  
  1199. <pre class="css">
  1200. <code>nav.global {
  1201. display: flex;
  1202. justify-content: space-between;
  1203. height: 5rem;
  1204. gap: 1em;
  1205. position: fixed;
  1206. top: 0;
  1207. inset-inline-start: anchor(--mainCol left);
  1208. inset-inline-end: anchor(--mainCol right)
  1209. z-index: 12345;
  1210. backdrop-filter: blur(10px);
  1211. <del> background: hsla(0deg,0%,100%,0.9);</del>
  1212. <ins> border-image-outset: 0 100vw;
  1213. border-image-slice: 0 fill;
  1214. border-image-width: 0;
  1215. border-image-repeat: stretch;
  1216. border-image-source: linear-gradient(0deg,hsla(0deg,0%,100%,0.9),hsla(0deg,0%,100%,0.9));</ins>
  1217. }</code>
  1218. </pre>
  1219.  
  1220. <p>And that solved the visual problem.</p>
  1221.  
  1222. <figure class="standalone">
  1223. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchor-05.png"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchor-07.png" alt="" /></a>
  1224. <figcaption>The appearance of a full-width navbar, although it’s mostly border image fakery.</figcaption>
  1225. </figure>
  1226.  
  1227. <p>Was it worth it?  I have mixed feelings about that.  On the one hand, putting all of the layout hackery into the CSS and removing it all from the HTML feels like the proper approach.  On the other hand, it’s one measly <code>&lt;div&gt;</code>, and taking that approach means better support for older browsers.  On the gripping hand, if I’m going to use anchor positioning, older browsers are already being left out of the fun.  So I probably wouldn’t have even gone down this road, except it was a useful example of how anchor positioning can be stifled.</p>
  1228.  
  1229. <p>At any rate, there you have it, another way to use anchor positioning to create previously difficult design effects with relative ease.  Just remember that all this is still in the realm of experiments, and production use will be limited to progressive enhancements until this comes out from behind the developer flags and more browsers add support.  That makes now a good time to play around, get familiar with the technology, that sort of thing.  Have fun with it!</p>
  1230.  
  1231. <hr><p>Have something to say to all that?  You can <a href="https://meyerweb.com/eric/thoughts/2023/10/05/an-anchored-navbar-solution/#commentform">add a comment to the post</a>, or <a href="mailto:eric@meyerweb.com?subject=In%20reply%20to%20%22An%20Anchored%20Navbar%20Solution%22">email Eric directly</a>.</p>]]></content:encoded>
  1232. <wfw:commentRss>https://meyerweb.com/eric/thoughts/2023/10/05/an-anchored-navbar-solution/feed/</wfw:commentRss>
  1233. <slash:comments>1</slash:comments>
  1234. </item>
  1235. <item>
  1236. <title>Nuclear Anchored Sidenotes</title>
  1237. <link>https://meyerweb.com/eric/thoughts/2023/09/12/nuclear-anchored-sidenotes/</link>
  1238. <comments>https://meyerweb.com/eric/thoughts/2023/09/12/nuclear-anchored-sidenotes/#comments</comments>
  1239. <dc:creator><![CDATA[Eric Meyer]]></dc:creator>
  1240. <pubDate>Tue, 12 Sep 2023 15:16:21 +0000</pubDate>
  1241. <category><![CDATA[CSS]]></category>
  1242. <guid isPermaLink="false">https://meyerweb.com/eric/thoughts/?p=5350</guid>
  1243.  
  1244. <description><![CDATA[Sidenotes are hard.  Anchor positioning makes them easy.]]></description>
  1245. <content:encoded><![CDATA[<p>Exactly one year ago today, which I swear is a coincidence I only noticed as I prepared to publish this, I posted <a href="https://meyerweb.com/eric/thoughts/2022/09/12/nuclear-footnotes/">an article on how I coded the footnotes</a> for <a href="https://atomicarchive.com/resources/documents/effects/glasstone-dolan/"><cite>The Effects of Nuclear Weapons</cite></a>.  In that piece, I mentioned that the footnotes I ended up using weren’t what I had hoped to create when the project first started.  As I said in the original post:</p>
  1246.  
  1247. <blockquote>
  1248. <p>Originally I had thought about putting footnotes off to one side in desktop views, such as in the right-hand grid gutter.  After playing with some rough prototypes, I realized this wasn’t going to go the way I wanted it to…</p>
  1249. </blockquote>
  1250.  
  1251. <p>I came back to this in my post “CSS Wish List 2023”, when I <a href="https://meyerweb.com/eric/thoughts/2023/02/08/css-wish-list-2023/#anchored-positioning">talked about anchor(ed) positioning</a>.  The ideal, which wasn’t really possible a year ago without a bunch of scripting, was to have the footnotes arranged structurally as endnotes, which we did, but in a way that I could place the notes as sidenotes, next to the footnote reference, when there was enough space to show them.</p>
  1252.  
  1253. <p>As it happens, that’s still not really possible without a lot of scripting today, unless you have:</p>
  1254.  
  1255. <ol type="1">
  1256. <li>A recent (as of late 2023) version of Chrome</li>
  1257. <li>With the “Experimental web features”&#160;flag enabled</li>
  1258. </ol>
  1259.  
  1260. <p>With those things in place, you get experimental support for <a href="https://www.w3.org/TR/css-anchor-position-1/">CSS anchor positioning</a>, which lets you absolutely position an element in relation to any other element, anywhere in the DOM, essentially regardless of their markup relationship to each other, as long as they <a href="https://www.w3.org/TR/2023/WD-css-anchor-position-1-20230629/#acceptable-anchor-element">conform to a short set of constraints</a> related to their containing blocks.  You could reveal an embedded stylesheet and then position it next to the bit of markup it styles!</p>
  1261.  
  1262. <h3 id="anchoring-sidenotes">Anchoring Sidenotes</h3>
  1263.  
  1264. <p>More relevantly to <cite>The Effects of Nuclear Weapons</cite>, I can enhance the desktop browsing experience by turning the popup footnotes into <a href="https://edwardtufte.github.io/tufte-css/#sidenotes"> Tufte-style static sidenotes</a>.  So, for example, I can style the list items that contain the footnotes like this:</p>
  1265.  
  1266. <pre class="css">
  1267. <code>.endnotes li {
  1268. position: absolute;
  1269. top: anchor(top);
  1270. bottom: auto;
  1271. left: calc(anchor(--main right) + 0.5em);
  1272. max-width: 23em;
  1273. }</code>
  1274. </pre>
  1275.  
  1276. <figure class="standalone">
  1277. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchored-sidenotes-01.png"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchored-sidenotes-01.png" alt="" /></a>
  1278. <figcaption>A sidenote next to the main text column, with its number aligned with the referencing number found in the main text column.</figcaption>
  1279. </figure>
  1280.  
  1281. <p>Let me break that down.  The <code>position</code> is <code>absolute</code>, and <code> bottom</code> is set to <code>auto</code> to override a previous bit of styling that’s needed in cases where a footnote isn’t being anchored.  I also decided to restrain the maximum width of a sidenote to <code>23em</code>, for no other reason than it looked right to me.</p>
  1282.  
  1283. <p>(A brief side note, <a href="https://meyerweb.com/bkkt/intend-your-puns.jpg">pun absolutely intended</a>: I’m using the physical-direction property <code>top</code> because the logical-direction equivalent in this context, <code>inset-block-start</code>, only gained full desktop cross-browser support a couple of years ago, and that’s only true if you ignore IE11’s existence, plus it arrived in several mobile browsers only this year, and I still fret about those kinds of things.  Since this is desktop-centric styling, I should probably set a calendar reminder to fix these at some point in the future.  Anyway, see <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start">MDN’s entry</a> for more.)</p>
  1284.  
  1285. <p>Now for the new and unfamiliar parts.</p>
  1286.  
  1287. <pre class="css">
  1288. <code> top: anchor(top);</code>
  1289. </pre>
  1290.  
  1291. <p>This sets the position of the top edge of the list item to be aligned with the top edge of its anchor’s box.  What is a footnote’s anchor?  It’s the corresponding superscripted footnote mark embedded in the text.  How does the CSS know that?  Well, the way I set things up&#160;&#x202F;—&#x2009; and this is not the only option for defining an anchor, but it’s the option that worked in this use case&#160;&#x202F;—&#x2009; the anchor is defined in the markup itself.  Here’s what a footnote mark and its associated footnote look like, markup-wise.</p>
  1292.  
  1293. <pre class="html">
  1294. <code>explosion,&lt;sup&gt;&lt;a href="#fnote01" id="fn01"&gt;1&lt;/a&gt;&lt;/sup&gt; although</code>
  1295. </pre>
  1296.  
  1297. <pre class="html">
  1298. <code>&lt;li id="fnote01" anchor="fn01"&gt;&lt;sup&gt;1&lt;/sup&gt; … &lt;/li&gt;</code>
  1299. </pre>
  1300.  
  1301. <p>The important bits for anchor positioning are the <code>id="fn01"</code> on the superscripted link, and the <code>anchor="fn01"</code> on the list item: the latter establishes the element with an <code>id</code> of <code>fn01</code> as the anchor for the list item.  Any element can have an <code>anchor</code> attribute, thus creating what the CSS Anchor Positioning specification <a href="https://www.w3.org/TR/css-anchor-position-1/#implicit">calls an implicit anchor</a>.  It’s explicit in the HTML, yes, but that makes it implicit to CSS, I guess.  There’s even an <code>implicit</code> keyword, so I could have written this in my CSS instead:</p>
  1302.  
  1303. <pre class="css">
  1304. <code> top: anchor(implicit top);</code>
  1305. </pre>
  1306.  
  1307. <p>(There are ways to mark an element as an anchor and associate other elements with that anchor, without the need for any HTML.  You don’t even need to have IDs in the HTML.  I’ll get to that in a bit.)</p>
  1308.  
  1309. <p>Note that the superscripted link and the list item are just barely related, structurally speaking.  Their closest ancestor element is the page’s single <code>&lt;main&gt;</code> element, which is the link’s fourth-great-grandparent, and the list item’s third-great-grandparent.  That’s okay!  Much as a <code>&lt;label&gt;</code> can be associated with an input element across DOM structures via its <code>for</code> attribute, any element can be associated with an anchoring element via its <code>anchor</code> attribute.  In both cases, the value is an ID.</p>
  1310.  
  1311. <p>So anyway, that means the top edge of the endnote will be absolutely positioned to line up with the top edge of its anchor.  Had I wanted the top of the endnote to line up with the bottom edge of the anchor, I would have said:</p>
  1312.  
  1313. <pre class="css">
  1314. <code> top: anchor(bottom);</code>
  1315. </pre>
  1316.  
  1317. <p>But I didn’t.  With the top edges aligned, I now needed to drop the endnote into the space outside the main content column, off to its right.  At first, I did it like this:</p>
  1318.  
  1319. <pre class="css">
  1320. <code> left: anchor(--main right);</code>
  1321. </pre>
  1322.  
  1323. <p>Wait.  Before you think you can just automatically use HTML element names as anchor references, well, you can’t.  That <code>--main</code> is what CSS calls a <em>dashed-ident</em>, as in a dashed identifier, and I declared it elsewhere in my CSS.  To wit:</p>
  1324.  
  1325. <pre class="css">
  1326. <code>main {
  1327. anchor-name: --main;
  1328. }</code>
  1329. </pre>
  1330.  
  1331. <p>That assigns the anchor name <code>--main</code> to the <code>&lt;main&gt;</code> element in the CSS, no HTML attributes required.  Using the name <code>--main</code> to identify the <code>&lt;main&gt;</code> element was me following the common practice of naming things for what they are.  I <em>could</em> have called it <code>--mainElement</code> or <code>--elMain</code> or <code>--main-column</code> or <code>--content</code> or <code>--josephine</code> or <code>--📕😉</code> or whatever I wanted.  It made the most sense to <em>me</em> to call it <code>--main</code>, so that’s what I picked.</p>
  1332.  
  1333. <p>Having done that, I can use the edges of the <code>&lt;main&gt;</code> element as positioning referents for any absolutely (or fixed) positioned element.  Since I wanted the left side of sidenotes to be placed with respect to the right edge of the <code>&lt;main&gt;</code>, I set their <code> left</code> to be <code>anchor(--main right)</code>.</p>
  1334.  
  1335. <p>Thus, taking these two declarations together, the top edge of a sidenote is positioned with respect to the top edge of its implicit anchor, and its left edge is positioned with respect to the right edge of the anchor named <code>--main</code>.</p>
  1336.  
  1337. <pre class="css">
  1338. <code> top: anchor(top);
  1339. left: anchor(--main right);</code>
  1340. </pre>
  1341.  
  1342. <p>Yes, I’m anchoring the sidenotes with respect to two completely different anchors, one of which is a descendant of the other.  That’s okay!  You can do that!  Literally, you could position each edge of an anchored element to a separate anchor, regardless of how they relate to each other structurally.</p>
  1343.  
  1344. <p>Once I previewed the result of those declarations, I saw I the sidenotes were too close to the main content, which makes sense: I had made the edges adjacent to each other.</p>
  1345.  
  1346. <figure class="standalone">
  1347. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchored-sidenotes-04.png"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchored-sidenotes-04.png" alt=""  /></a>
  1348. <figcaption>Red borders showing the edges of the sidenote and the main column touching.</figcaption>
  1349. </figure>
  1350.  
  1351. <p>I thought about using a left margin on the sidenotes to push them over, and that would work fine, but I figured what the heck, CSS has calculation functions and anchor functions can go inside them, and any engine supporting anchor positioning will also support <code>calc()</code>, so why not?  Thus:</p>
  1352.  
  1353. <pre class="css">
  1354. <code> left: calc(anchor(--main right) + 0.5em);</code>
  1355. </pre>
  1356.  
  1357. <p>I wrapped those in a media query that only turned the footnotes into sidenotes at or above a certain viewport width, and wrapped that in a feature query so as to keep the styles away from non-anchor-position-understanding browsers, and I had the solution I’d envisioned at the beginning of the project!</p>
  1358.  
  1359. <p>Except I didn’t.</p>
  1360.  
  1361. <h3 id="fixing-proximate-overlap">Fixing Proximate Overlap</h3>
  1362.  
  1363. <p>What I’d done was fine as long as the footnotes were well separated.  Remember, these are absolutely positioned elements, so they’re out of the document flow.  Since we <em>still</em> don’t have <a href="https://www.w3.org/TR/css3-exclusions/">CSS Exclusions</a>, there needs to be a way to deal with situations where there are two footnotes close to each other.  Without it, you get this sort of thing.</p>
  1364.  
  1365. <figure class="standalone">
  1366. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchored-sidenotes-02.png"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchored-sidenotes-02.png" alt=""  /></a>
  1367. <figcaption>Two sidenotes completely overlapping with each other.  This will not do.</figcaption>
  1368. </figure>
  1369.  
  1370. <p>I couldn’t figure out how to fix this problem, so I did what you do these days, which is I posted my problem to social media.  Pretty quickly, I got a reply from the brilliant <a href="https://kizu.dev/">Roman Komarov</a>, pointing me at <a href="https://codepen.io/kizu/pen/abRRavB">a Codepen that showed how to do what I needed</a>, plus some very cool highlighting techniques.  I <a href="https://codepen.io/meyerweb/pen/JjwdBWY"> forked it so I could strip it down</a> to the essentials, which is all I really needed for my use case, and also have some hope of understanding it.</p>
  1371.  
  1372. <p>Once I’d worked through it all and applied the results to <cite>TEoNW</cite>, I got exactly what I was after.</p>
  1373.  
  1374. <figure class="standalone">
  1375. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchored-sidenotes-03.png"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/anchored-sidenotes-03.png" alt="" /></a>
  1376. <figcaption>The same two sidenotes, except now there is no overlap.</figcaption>
  1377. </figure>
  1378.  
  1379. <p>But how?  It goes like this:</p>
  1380.  
  1381. <pre class="css">
  1382. <code>.endnotes li {
  1383. position: absolute;
  1384. anchor-name: --sidenote;
  1385. top: max(anchor(top) , calc(anchor(--sidenote bottom) + 0.67em));
  1386. bottom: auto;
  1387. left: calc(anchor(--main right) + 0.5em);
  1388. max-width: 23em;
  1389. }</code>
  1390. </pre>
  1391.  
  1392. <p>Whoa.  That’s a lot of functions working together there in the <code>top</code> value.  (CSS is becoming more and more functional, which I feel some kind of way about.)  It can all be verbalized as, “the position of the top edge of the list item is either the same as the top edge of its anchor, or two-thirds of an em below the bottom edge of the previous sidenote, whichever is further down”.</p>
  1393.  
  1394. <p>The browser knows how to do this because the list items have all been given an <code>anchor-name</code> of <code>--sidenote</code> (again, that could be anything, I just picked what made sense to me).  That means every one of the endnote list items will have that anchor name, and other things can be positioned against them.</p>
  1395.  
  1396. <p>Those styles mean that I have multiple elements bearing the same anchor name, though.  When any sidenote is positioned with respect to that anchor name, it has to pick just one of the anchors.  The specification says the named anchor that occurs most recently before the thing you’re positioning is what wins.  Given my setup, this means an anchored sidenote will use the previous sidenote as the anchor for its top edge.</p>
  1397.  
  1398. <p>At least, it will use the previous sidenote as its anchor <em>if</em> the bottom of the previous sidenote (plus two-thirds of an em) is lower than the top edge of its implicit anchor.  In a sense, every sidenote’s top edge has <em>two</em> anchors, and the <code>max()</code> function picks which one is actually used in every case.</p>
  1399.  
  1400. <p>CSS, man.</p>
  1401.  
  1402. <p>Remember that all this is experimental, and the specification (and thus how anchor positioning works) could change.  The best practices for accessibility are also not clear yet, from what I’ve been able to find.  As such, this may not be something you want to deploy in production, even as a progressive enhancement.  I’m holding off myself for the time being, which means none of the above is currently used in the published version of <cite>The Effects of Nuclear Weapons</cite>.  If people are interested, I can create a Codepen to illustrate.</p>
  1403.  
  1404. <p>I do know this is something the CSS Working Group is working on pretty hard right now, so I have hopes that things will finalize soon and support will spread.</p>
  1405.  
  1406. <p class="note">My thanks to <a href="https://kizu.dev/">Roman Komarov</a> for his review of and feedback on this article.  For more use cases of anchor positioning, see his lengthy (and quite lovely) article “<a href="https://kizu.dev/anchor-positioning-experiments/">Future CSS: Anchor Positioning</a>”.</p>
  1407. <hr><p>Have something to say to all that?  You can <a href="https://meyerweb.com/eric/thoughts/2023/09/12/nuclear-anchored-sidenotes/#commentform">add a comment to the post</a>, or <a href="mailto:eric@meyerweb.com?subject=In%20reply%20to%20%22Nuclear%20Anchored%20Sidenotes%22">email Eric directly</a>.</p>]]></content:encoded>
  1408. <wfw:commentRss>https://meyerweb.com/eric/thoughts/2023/09/12/nuclear-anchored-sidenotes/feed/</wfw:commentRss>
  1409. <slash:comments>8</slash:comments>
  1410. </item>
  1411. <item>
  1412. <title>Memories of Molly</title>
  1413. <link>https://meyerweb.com/eric/thoughts/2023/09/06/memories-of-molly/</link>
  1414. <comments>https://meyerweb.com/eric/thoughts/2023/09/06/memories-of-molly/#comments</comments>
  1415. <dc:creator><![CDATA[Eric Meyer]]></dc:creator>
  1416. <pubDate>Wed, 06 Sep 2023 15:44:29 +0000</pubDate>
  1417. <category><![CDATA[Personal]]></category>
  1418. <category><![CDATA[Web]]></category>
  1419. <guid isPermaLink="false">https://meyerweb.com/eric/thoughts/?p=5315</guid>
  1420.  
  1421. <description><![CDATA[The Web is a little bit darker today, a fair bit poorer.]]></description>
  1422. <content:encoded><![CDATA[<p>The Web is a little bit darker today, a fair bit poorer: <a href="https://www.tucsonsentinel.com/local/report/090523_molly_holzschlag/tucsons-molly-holzschlag-known-as-the-fairy-godmother-web-dead-60/">Molly Holzschlag is dead</a>.  She lived hard, but I hope she died easy.  I am more sparing than most with my use of the word “friend”, and she was absolutely one.  To everyone.</p>
  1423.  
  1424. <p>If you don’t know her name, I’m sorry.  Too many didn’t.  She was one of the first web gurus, a title she adamantly rejected&#160;&#x202F;—&#x2009; “We’re all just <em>people</em>, people!”&#160;&#x202F;—&#x2009; but it fit nevertheless.  She was a groundbreaker, expanding and explaining the Web at its infancy.  So many people, on hearing the mournful news, have described her as a force of nature, and that’s a title she would have accepted with pride.  She was raucous, rambunctious, open-hearted, never ever close-mouthed, blazing with fire, and laughed (as she did everything) with her entire chest, constantly.  She was giving and took and she hurt and she wanted to heal everyone, all the time.  She was messily imperfect, would tell you so loudly and repeatedly, and gonzo in all the senses of that word.  Hunter S. Thompson should have written her obituary.</p>
  1425.  
  1426. <p>I could tell so many stories.  The time we were waiting to check into a hotel, talking about who knows what, and realized Little Richard was a few spots ahead of us in line.  Once he’d finished checking in, Molly walked right over to introduce herself and spend a few minutes talking with him.  An evening a group of us had dinner one the top floor of a building in Chiba City and I got the unexpectedly fresh shrimp hibachi.  The time she and I were chatting online about a talk or training gig, somehow got onto the subject of <a href="https://en.wikipedia.org/wiki/Nick_Drake">Nick Drake</a>, and coordinated a playing of “<a href="https://www.youtube.com/watch?v=VfSWWScqH5M"> Three Hours</a>” just to savor it together.  A night in San Francisco where the two of us went out for dinner before some conference or other, stopped at a bar just off Union Square so she could have a couple of drinks, and she got propositioned by the impressively drunk couple seated next to her after they’d failed to talk the two of us into hooking up.  The bartender couldn’t stop laughing.</p>
  1427.  
  1428. <div class="gallery">
  1429. <figure>
  1430. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/IMG_6394.jpg"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/IMG_6394.jpg" alt="" /></a>
  1431. <figcaption>At SXSW 2005 with Dave Shea, her co-author on <cite>The Zen of CSS</cite>, and wearing an <a href="http://gmpg.org/xfn/">XFN</a> shirt.</figcaption>
  1432. </figure>
  1433. <figure>
  1434. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/IMG_0985.jpg"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/IMG_0985.jpg" alt="" /></a>
  1435. <figcaption>Standing outside Moscone Center in San Francisco with Cia Romano.  I think this is that time we all got evacuated due to a fire alarm.</figcaption>
  1436. </figure>
  1437. </div>
  1438.  
  1439. <p>Or the time a bunch of us were gathered in New Orleans (again, some conference or other) and went to dinner at a jazz club, where we ended up seated next to the live jazz trio and she sang along with some of the songs.  She had a voice like a blues singer in a cabaret, brassy and smoky and full of hard-won joys, and she used it to great effect standing in front of Bill Gates to harangue him about Internet Explorer.  She raised it to fight like hell for the Web and its users, for the foundational principles of universal access and accessible development.  She put her voice on paper in some three dozen books, and was working on yet another when she died.  In one book, she managed to sneak past the editors an example that used a stick-figure <cite>Kama Sutra</cite> custom font face.  She could never resist a prank, particularly a bawdy one, as long as it didn’t hurt anyone.</p>
  1440.  
  1441. <div class="gallery">
  1442. <figure>
  1443. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/IMG_6293.jpg"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/IMG_6293.jpg" alt="" /></a>
  1444. <figcaption>Holding court in somebody’s hotel suite, with a baby <a href="https://ma.tt" class="acquaintance colleague met">Matt Mullenweg</a> in attendance.</figcaption>
  1445. </figure>
  1446. <figure>
  1447. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/IMG_0426.jpg"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/IMG_0426.jpg" alt="" /></a>
  1448. <figcaption>Once again holding court, this time at a bar with <a href="https://jasonsantamaria.com/" class="acquaintance colleague met">Jason Santa Maria</a>.</figcaption>
  1449. </figure>
  1450. </div>
  1451.  
  1452. <p>She made the trek to Cleveland at least once to attend and be part of the crew for one of our <a href="https://meyerweb.com/eric/thoughts/2005/12/29/bread-soup-and-love/">Bread and Soup</a> parties.  We put her to work rolling tiny matzoh balls and she immediately made ribald jokes about it, laughing harder at our one-up jokes than she had at her own.  She stopped by the house a couple of other times over the years, when she was in town for consulting work, “Auntie Molly” to our eldest and one of my few colleagues to have spent any time with Rebecca.  Those pictures were lost, and I still keenly regret that.</p>
  1453.  
  1454. <div class="gallery">
  1455. <figure>
  1456. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/IMG_7851.jpg"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/IMG_7851.jpg" alt="" /></a>
  1457. <figcaption>Rolling matzoh balls in our kitchen, <em>still</em> holding court.</figcaption>
  1458. </figure>
  1459. <figure>
  1460. <a href="https://meyerweb.com/eric/thoughts/wp-content/uploads/IMG_6842.jpg"><img decoding="async" src="https://meyerweb.com/eric/thoughts/wp-content/uploads/IMG_6842.jpg" alt="" /></a>
  1461. <figcaption>On top of a bus somewhere in the world, probably London, with my partner Kat.</figcaption>
  1462. </figure>
  1463. </div>
  1464.  
  1465. <p>There were so many things about what the Web became that she hated, that she’d spent so much time and energy fighting to avert, but she still loved it for what it could be and what it had been originally designed to be.  She took more than one fledgling web designer under her wing, boosted their skills and careers, and beamed with pride at their accomplishments.  She told a great story about one, I think it was Dunstan Orchard but I could be wrong, and his afternoon walk through a dry Arizona arroyo.</p>
  1466.  
  1467. <p>I could go on for pages, but I won’t; if this were a toast and she were here, she would have long ago heckled me (affectionately) into shutting up.  But if you have treasured memories of Molly, I’d love to hear them in the comments below, or on your own blog or social media or podcasts or anywhere.  She loved stories.  Tell hers.</p>
  1468.  
  1469. <hr><p>Have something to say to all that?  You can <a href="https://meyerweb.com/eric/thoughts/2023/09/06/memories-of-molly/#commentform">add a comment to the post</a>, or <a href="mailto:eric@meyerweb.com?subject=In%20reply%20to%20%22Memories%20of%20Molly%22">email Eric directly</a>.</p>]]></content:encoded>
  1470. <wfw:commentRss>https://meyerweb.com/eric/thoughts/2023/09/06/memories-of-molly/feed/</wfw:commentRss>
  1471. <slash:comments>40</slash:comments>
  1472. </item>
  1473. </channel>
  1474. </rss>
  1475.  

If you would like to create a banner that links to this page (i.e. this validation result), do the following:

  1. Download the "valid RSS" banner.

  2. Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)

  3. Add this HTML to your page (change the image src attribute if necessary):

If you would like to create a text link instead, here is the URL you can use:

http://www.feedvalidator.org/check.cgi?url=http%3A//meyerweb.com/eric/thoughts/rss2/full

Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda