Author | Lightnews

Web Standards

@web-standards.dev

Reference Target: having your encapsulation and eating it too. Alice Boxhall introduces a proposal that lets a shadow DOM element become the target when the host is referenced. Chromium, WebKit and Firefox already have experimental implementations. #a11y

blogs.igalia.com/alice/refere...

Author’s photo beside the headline “Reference Target: having your encapsulation and eating it too”, with a code snippet in the center and ocean waves along the bottom.

February 10, 2026 at 12:46 PM

Web Standards

@web-standards.dev

A polyfill for the HTML switch element. @tomayac.com shares a polyfill, bringing near-native to browsers beyond Safari, with accessibility mapping, high-contrast tweaks, and FOUC-safe loading. #html #polyfill

blog.tomayac.com/2026/01/12/a...

Author photo, several toggle switches with different color, and code snippets around the headline “input type=checkbox switch polyfill”.

February 9, 2026 at 12:11 PM

Web Standards

@web-standards.dev

Explicit resource management in JavaScript. Matt Smith shows how using, await using, and Symbol.asyncDispose cut try/finally boilerplate, dispose in reverse order, and make lifetimes visible. #js #ecmasript

allthingssmitty.com/2026/02/02/e...

Author photo beside the headline “Explicit resource management in JavaScript”, with code snippets and an arrow connecting them.

February 6, 2026 at 11:25 AM

Web Standards

@web-standards.dev

CSS grid lanes are arriving sooner than you think. @jensimmons.bsky.social says Safari Technology Preview has the finalized syntax, while Chrome and Firefox are close behind. Meanwhile, you can use @supports for progressive enhancement and a CSS or JS polyfill fallback.

webkit.org/blog/17758/w...

Two browser windows with card grids: masonry on the left, regular grid layout on the right, under “When will CSS grid lanes arrive? How long until we can use it?” title.

February 5, 2026 at 12:11 PM

Web Standards

@web-standards.dev

CSS scroll-state container queries can now detect scrolling. @utilitybend.com shows Chrome 144’s new scrolled state for @container, building on stuck, snapped, and scrollable states, to power hidey headers and scroll hints with no JS. #css #scroll

utilitybend.com/blog/is-it-s...

Circular author’s photo next to the title “Is it scrolled? Is it not? Let's find out with CSS @container scroll-state() queries”, with a big mouse surrounded by up, down, left, and right arrows.

February 4, 2026 at 11:17 AM

Web Standards

@web-standards.dev

Results of the State of JavaScript 2025 survey. TypeScript wins as a language, Vite downloads pass Webpack, and AI-generated code was just under 30% by late 2025, with Cursor, Zed, Claude, Gemini, and Copilot rising. #stateof #js

2025.stateofjs.com

February 3, 2026 at 11:33 AM

Web Standards

@web-standards.dev

How to dynamically install custom elements. @heydonworks.com uses :not(:defined) plus dynamic import to load only the custom elements found in the DOM, with a ready event and a MutationObserver option for late additions. #js #webcomponents

heydonworks.com/article/dyna...

Sketch of the author’s face next to the headline “How to dynamically install custom elements”, with panels showing a JS file tree, custom elements, and JavaScript code.

February 2, 2026 at 11:14 AM

Web Standards

@web-standards.dev

Five accessibility checks to run on every component. @hidde.blog outlines essential component-level checks: keyboard access, accessible tokens, clear control names, 400% zoom and user settings, and screen reader semantics. #a11y #testing

zeroheight.com/blog/5-acces...

Shield with check mark beside headline “5 accessibility checks to run on every component” and author line “Written by Hidde De Vries” and date “Jan 6, 2026”.

January 30, 2026 at 12:40 PM

Web Standards

@web-standards.dev

Try text scaling support in Chrome Canary. @joshtumath.uk says desktop has a base text size option, but mobile ignores OS text size. Opt in with if your site is ready to let text follow the mobile users setting. Now in Canary behind a flag.

www.joshtumath.uk/posts/2026-0...

Photo of the author next to the headline “Try text scaling support in Chrome Canary”, with a code snippet saying “Don’t do this” to :root { font-size: 16px }, and a BBC page screenshot.

January 29, 2026 at 11:14 AM

Web Standards

@web-standards.dev

Opinionated CSS reset for modern browsers. @vale.rocks shares a rule-by-rule overview of his reset, from an anonymous @layer and border-box defaults to disabling text-size-adjust and normalizing media, forms, typography, and :focus-visible outlines. #css #reset

vale.rocks/posts/css-re...

Code snippets of a CSS reset under the headline “My opinionated CSS reset”.

January 28, 2026 at 12:23 PM

Web Standards

@web-standards.dev

Stop turning everything into arrays. Matt Smith recommends iterator helpers for lazy map, filter, and take so you process only what the UI needs, not thousands of items. Works in modern browsers and Node 22+. #js #performance

allthingssmitty.com/2026/01/12/s...

Author photo beside the “Stop turning everything into arrays (and do less work instead)” title. Code snippets with an arrow. Matt Smith, web dev, front-end engineer, UX designer.

January 27, 2026 at 1:47 PM

Web Standards

@web-standards.dev

Writing custom elements with lit-html. Dave Samaniego shows why he reaches for lit-html over full Lit, including size, light DOM, and simpler imports. He walks through two patterns: a stateless

wrapper and a stateful Pokémon card with signals.<br><br><a href="https://frontendmasters.com/blog/custom-elements-with-lit-html/" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">frontendmasters.com/blog/custom-...</a></div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreia7pxotqxir4jy2pd3ehagrzalrrlrtjloc7xh2mbfsxhtysc2pcq@jpeg" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreia7pxotqxir4jy2pd3ehagrzalrrlrtjloc7xh2mbfsxhtysc2pcq@jpeg" alt="Hands holding a card with the “Lit” logo and text “Lit” under the title “How I Write Custom Elements with lit-html”." class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>January 26, 2026 at 11:30 AM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

<div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions">
        <div class="flex items-center justify-between w-[300px] pr-4 no-card-link">
          <div class="hidden" data-post-text-uri="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mdd5f23cws25">
            Writing custom elements with lit-html. Dave Samaniego shows why he reaches for lit-html over full Lit, including size, light DOM, and simpler imports. He walks through two patterns: a stateless <textarea> wrapper and a stateful Pokémon card with signals.<br><br><a href="https://frontendmasters.com/blog/custom-elements-with-lit-html/" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">frontendmasters.com/blog/custom-...</a>
          </div>
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link" 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" 
                  data-bluesky-interactions-reply-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mdd5f23cws25"
                  data-bluesky-interactions-reply-cid-param="bafyreigv6c5hste4bygvygkkrr2v23vqkflf5wc5oabzmkqjav4l34trju"
                  data-bluesky-interactions-reply-root-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mdd5f23cws25"
                  data-bluesky-interactions-reply-root-cid-param="bafyreigv6c5hste4bygvygkkrr2v23vqkflf5wc5oabzmkqjav4l34trju"
                  data-bluesky-interactions-reply-author-name-param="Web Standards"
                  data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg"
                  data-bluesky-interactions-post-path-param="/bsky/web-standards.dev/post/3mdd5f23cws25"
                  title="Reply" 
                  style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>
            
          </button>
          
          <div class="relative no-card-link"
               data-controller="bluesky-repost-menu"
               data-bluesky-repost-menu-uri-value="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mdd5f23cws25"
               data-bluesky-repost-menu-cid-value="bafyreigv6c5hste4bygvygkkrr2v23vqkflf5wc5oabzmkqjav4l34trju"
               data-bluesky-repost-menu-repost-uri-value=""
               data-bluesky-repost-menu-is-reposted-value="false"
               data-bluesky-repost-menu-author-handle-value="web-standards.dev"
               data-bluesky-repost-menu-post-text-value="Writing custom elements with lit-html. Dave Samaniego shows why he reaches for lit-html over full Lit, including size, light DOM, and simpler imports. He walks through two patterns: a stateless <textarea> wrapper and a stateful Pokémon card with signals.

frontendmasters.com/blog/custom-..."
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mdd5f23cws25"
                  data-bluesky-interactions-cid-param="bafyreigv6c5hste4bygvygkkrr2v23vqkflf5wc5oabzmkqjav4l34trju"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">6</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://oauth.lightnews.app/bsky/web-standards.dev/post/3mdd5f23cws25"
                  data-share-title-value="Web Standards on Lightnews"
                  data-share-text-value="Writing custom elements with lit-html. Dave Samaniego shows why he reaches for lit-html over full Lit, including size, light DOM, and simple…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="Writing custom elements with lit-html. Dave Samaniego shows why he reaches for lit-html over full Lit, including size, light DOM, and simpler imports. He walks through two patterns: a stateless <textarea> wrapper and a stateful Pokémon card with signals.

frontendmasters.com/blog/custom-..."
               data-bluesky-options-author-handle-value="web-standards.dev"
               data-bluesky-options-author-did-value="did:plc:uhsxlyuppi4kpmxevmjfveos"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/web-standards.dev/post/3md3qoxjduc2z" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=web-standards.dev" class="no-card-link inline-block flex-shrink-0" aria-label="Web Standards" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg" alt="web-standards.dev" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=web-standards.dev" class="truncate hover:underline text-black no-card-link">Web Standards</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=web-standards.dev" class="hover:underline text-gray-500 no-card-link">@web-standards.dev</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">Understanding Git worktrees. Marco Haber shows how to keep multiple branches checked out in separate folders, so you can jump to main without stashing. Cursor uses the same idea for parallel agents. <a href="/hashtag/git" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#git</a> <a href="/hashtag/tools" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#tools</a><br><br><a href="https://www.marcohaber.dev/blog/git-worktrees" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">www.marcohaber.dev/blog/git-wor...</a></div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreievaoaz6bdtcwfv2mciykgoqpq26bzmichsordoop5vz7sssl43ha@jpeg" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreievaoaz6bdtcwfv2mciykgoqpq26bzmichsordoop5vz7sssl43ha@jpeg" alt="Diagram with a Git icon connected to three folders labeled “feature”, “main”, and “hotfix”, above the headline “Understanding Git Worktrees”." class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>January 23, 2026 at 12:54 PM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

<div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions">
        <div class="flex items-center justify-between w-[300px] pr-4 no-card-link">
          <div class="hidden" data-post-text-uri="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3md3qoxjduc2z">
            Understanding Git worktrees. Marco Haber shows how to keep multiple branches checked out in separate folders, so you can jump to main without stashing. Cursor uses the same idea for parallel agents. <a href="/hashtag/git" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#git</a> <a href="/hashtag/tools" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#tools</a><br><br><a href="https://www.marcohaber.dev/blog/git-worktrees" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">www.marcohaber.dev/blog/git-wor...</a>
          </div>
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link" 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" 
                  data-bluesky-interactions-reply-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3md3qoxjduc2z"
                  data-bluesky-interactions-reply-cid-param="bafyreianumaf7zdtnct5jvyh63tbgyu2hv6vmrphw6hwmbq743bi4waln4"
                  data-bluesky-interactions-reply-root-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3md3qoxjduc2z"
                  data-bluesky-interactions-reply-root-cid-param="bafyreianumaf7zdtnct5jvyh63tbgyu2hv6vmrphw6hwmbq743bi4waln4"
                  data-bluesky-interactions-reply-author-name-param="Web Standards"
                  data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg"
                  data-bluesky-interactions-post-path-param="/bsky/web-standards.dev/post/3md3qoxjduc2z"
                  title="Reply" 
                  style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>
            
          </button>
          
          <div class="relative no-card-link"
               data-controller="bluesky-repost-menu"
               data-bluesky-repost-menu-uri-value="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3md3qoxjduc2z"
               data-bluesky-repost-menu-cid-value="bafyreianumaf7zdtnct5jvyh63tbgyu2hv6vmrphw6hwmbq743bi4waln4"
               data-bluesky-repost-menu-repost-uri-value=""
               data-bluesky-repost-menu-is-reposted-value="false"
               data-bluesky-repost-menu-author-handle-value="web-standards.dev"
               data-bluesky-repost-menu-post-text-value="Understanding Git worktrees. Marco Haber shows how to keep multiple branches checked out in separate folders, so you can jump to main without stashing. Cursor uses the same idea for parallel agents. #git #tools

www.marcohaber.dev/blog/git-wor..."
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3md3qoxjduc2z"
                  data-bluesky-interactions-cid-param="bafyreianumaf7zdtnct5jvyh63tbgyu2hv6vmrphw6hwmbq743bi4waln4"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">3</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://oauth.lightnews.app/bsky/web-standards.dev/post/3md3qoxjduc2z"
                  data-share-title-value="Web Standards on Lightnews"
                  data-share-text-value="Understanding Git worktrees. Marco Haber shows how to keep multiple branches checked out in separate folders, so you can jump to main withou…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="Understanding Git worktrees. Marco Haber shows how to keep multiple branches checked out in separate folders, so you can jump to main without stashing. Cursor uses the same idea for parallel agents. #git #tools

www.marcohaber.dev/blog/git-wor..."
               data-bluesky-options-author-handle-value="web-standards.dev"
               data-bluesky-options-author-did-value="did:plc:uhsxlyuppi4kpmxevmjfveos"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/web-standards.dev/post/3mczbs2kg4c2y" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=web-standards.dev" class="no-card-link inline-block flex-shrink-0" aria-label="Web Standards" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg" alt="web-standards.dev" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=web-standards.dev" class="truncate hover:underline text-black no-card-link">Web Standards</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=web-standards.dev" class="hover:underline text-gray-500 no-card-link">@web-standards.dev</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">No support in other browsers yet, but there’s a consensus. See standard positions links in the article <a href="https://developer.chrome.com/blog/geolocation-html-element#related_links" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">developer.chrome.com/blog/geoloca...</a></div>

<a href="https://developer.chrome.com/blog/geolocation-html-element#related_links" target="_blank" rel="noopener" class="block mt-2 border rounded overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link">
            <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreih3kqsqvw5jbrunjciipkoaychzoph6gg4lwlnxzwmac52tekttxy@jpeg" class="w-full h-40 object-cover" loading="lazy">
          <div class="p-2">
            <div class="text-sm font-semibold truncate">Introducing the <geolocation> HTML element  |  Blog  |  Chrome for Developers</div>
            <div class="text-xs text-gray-500 truncate">Discover the new way to request user location data.</div>
          </div>
          <div class="border-t px-2 py-2 text-sm text-gray-600 flex items-center gap-2">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 0 20"/><path d="M12 2a15.3 15.3 0 0 0 0 20"/></svg>
            <span class="truncate">developer.chrome.com</span>
          </div>
        </a>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>January 22, 2026 at 1:22 PM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

<div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions">
        <div class="flex items-center justify-between w-[300px] pr-4 no-card-link">
          <div class="hidden" data-post-text-uri="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mczbs2kg4c2y">
            No support in other browsers yet, but there’s a consensus. See standard positions links in the article <a href="https://developer.chrome.com/blog/geolocation-html-element#related_links" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">developer.chrome.com/blog/geoloca...</a>
          </div>
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link" 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" 
                  data-bluesky-interactions-reply-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mczbs2kg4c2y"
                  data-bluesky-interactions-reply-cid-param="bafyreie7llwo7qno4jj7kolxxgirailenkyldeymnnqanidf4gybuzthhy"
                  data-bluesky-interactions-reply-root-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcz5eez7dk2w"
                  data-bluesky-interactions-reply-root-cid-param="bafyreie62snt5oclctvjpbqffj275xlew4n6754beekxqn2wnmulynl6wu"
                  data-bluesky-interactions-reply-author-name-param="Web Standards"
                  data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg"
                  data-bluesky-interactions-post-path-param="/bsky/web-standards.dev/post/3mczbs2kg4c2y"
                  title="Reply" 
                  style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>
            
          </button>
          
          <div class="relative no-card-link"
               data-controller="bluesky-repost-menu"
               data-bluesky-repost-menu-uri-value="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mczbs2kg4c2y"
               data-bluesky-repost-menu-cid-value="bafyreie7llwo7qno4jj7kolxxgirailenkyldeymnnqanidf4gybuzthhy"
               data-bluesky-repost-menu-repost-uri-value=""
               data-bluesky-repost-menu-is-reposted-value="false"
               data-bluesky-repost-menu-author-handle-value="web-standards.dev"
               data-bluesky-repost-menu-post-text-value="No support in other browsers yet, but there’s a consensus. See standard positions links in the article developer.chrome.com/blog/geoloca..."
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mczbs2kg4c2y"
                  data-bluesky-interactions-cid-param="bafyreie7llwo7qno4jj7kolxxgirailenkyldeymnnqanidf4gybuzthhy"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://oauth.lightnews.app/bsky/web-standards.dev/post/3mczbs2kg4c2y"
                  data-share-title-value="Web Standards on Lightnews"
                  data-share-text-value="No support in other browsers yet, but there’s a consensus. See standard positions links in the article developer.chrome.com/blog/geoloca..."
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="No support in other browsers yet, but there’s a consensus. See standard positions links in the article developer.chrome.com/blog/geoloca..."
               data-bluesky-options-author-handle-value="web-standards.dev"
               data-bluesky-options-author-did-value="did:plc:uhsxlyuppi4kpmxevmjfveos"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/web-standards.dev/post/3mcz5eez7dk2w" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=web-standards.dev" class="no-card-link inline-block flex-shrink-0" aria-label="Web Standards" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg" alt="web-standards.dev" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=web-standards.dev" class="truncate hover:underline text-black no-card-link">Web Standards</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=web-standards.dev" class="hover:underline text-gray-500 no-card-link">@web-standards.dev</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">Introducing the <geolocation> HTML element. Chrome 144 adds a declarative, click-to-share location control that reduces boilerplate and improves user intent signals, with origin trials showing fewer capture errors, better user flows, and recovery. <a href="/hashtag/html" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#html</a> <a href="/hashtag/api" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#api</a><br><br><a href="https://developer.chrome.com/blog/geolocation-html-element" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">developer.chrome.com/blog/geoloca...</a></div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreiaaiva25eud5zfkvgrglk5pwve7dlohv7ew2jjmjqenil7gilyaxq@jpeg" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreiaaiva25eud5zfkvgrglk5pwve7dlohv7ew2jjmjqenil7gilyaxq@jpeg" alt="Graphic with Chrome for Developers branding, a location permission dialog saying “permission.site wants to Know your location,” buttons “Allow while visiting the site” and “Allow this time,” and text “Introducing the  HTML element” with a “Use location” button." class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>January 22, 2026 at 12:03 PM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

<div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions">
        <div class="flex items-center justify-between w-[300px] pr-4 no-card-link">
          <div class="hidden" data-post-text-uri="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcz5eez7dk2w">
            Introducing the <geolocation> HTML element. Chrome 144 adds a declarative, click-to-share location control that reduces boilerplate and improves user intent signals, with origin trials showing fewer capture errors, better user flows, and recovery. <a href="/hashtag/html" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#html</a> <a href="/hashtag/api" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#api</a><br><br><a href="https://developer.chrome.com/blog/geolocation-html-element" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">developer.chrome.com/blog/geoloca...</a>
          </div>
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link" 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" 
                  data-bluesky-interactions-reply-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcz5eez7dk2w"
                  data-bluesky-interactions-reply-cid-param="bafyreie62snt5oclctvjpbqffj275xlew4n6754beekxqn2wnmulynl6wu"
                  data-bluesky-interactions-reply-root-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcz5eez7dk2w"
                  data-bluesky-interactions-reply-root-cid-param="bafyreie62snt5oclctvjpbqffj275xlew4n6754beekxqn2wnmulynl6wu"
                  data-bluesky-interactions-reply-author-name-param="Web Standards"
                  data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg"
                  data-bluesky-interactions-post-path-param="/bsky/web-standards.dev/post/3mcz5eez7dk2w"
                  title="Reply" 
                  style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>
            <span data-bluesky-interactions-target="replyCount">1</span>
          </button>
          
          <div class="relative no-card-link"
               data-controller="bluesky-repost-menu"
               data-bluesky-repost-menu-uri-value="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcz5eez7dk2w"
               data-bluesky-repost-menu-cid-value="bafyreie62snt5oclctvjpbqffj275xlew4n6754beekxqn2wnmulynl6wu"
               data-bluesky-repost-menu-repost-uri-value=""
               data-bluesky-repost-menu-is-reposted-value="false"
               data-bluesky-repost-menu-author-handle-value="web-standards.dev"
               data-bluesky-repost-menu-post-text-value="Introducing the <geolocation> HTML element. Chrome 144 adds a declarative, click-to-share location control that reduces boilerplate and improves user intent signals, with origin trials showing fewer capture errors, better user flows, and recovery. #html #api

developer.chrome.com/blog/geoloca..."
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">4</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcz5eez7dk2w"
                  data-bluesky-interactions-cid-param="bafyreie62snt5oclctvjpbqffj275xlew4n6754beekxqn2wnmulynl6wu"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">4</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://oauth.lightnews.app/bsky/web-standards.dev/post/3mcz5eez7dk2w"
                  data-share-title-value="Web Standards on Lightnews"
                  data-share-text-value="Introducing the <geolocation> HTML element. Chrome 144 adds a declarative, click-to-share location control that reduces boilerplate and impr…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="Introducing the <geolocation> HTML element. Chrome 144 adds a declarative, click-to-share location control that reduces boilerplate and improves user intent signals, with origin trials showing fewer capture errors, better user flows, and recovery. #html #api

developer.chrome.com/blog/geoloca..."
               data-bluesky-options-author-handle-value="web-standards.dev"
               data-bluesky-options-author-did-value="did:plc:uhsxlyuppi4kpmxevmjfveos"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/web-standards.dev/post/3mcwnnw2res2w" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=web-standards.dev" class="no-card-link inline-block flex-shrink-0" aria-label="Web Standards" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg" alt="web-standards.dev" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=web-standards.dev" class="truncate hover:underline text-black no-card-link">Web Standards</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=web-standards.dev" class="hover:underline text-gray-500 no-card-link">@web-standards.dev</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">Bundle size investigation. <a href="https://bsky.app/profile/did:plc:bycpuwkco67nygcvxkn6ybjd" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky-mention">@adevnadia.bsky.social</a> walks through Vite bundle analysis, finds tree-shaking traps like wildcard imports, removes non-ESM bloat like lodash, and consolidates duplicate date libraries, shrinking a React app from 5MB to about 601KB. <a href="/hashtag/js" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#js</a><br><br><a href="https://www.developerway.com/posts/bundle-size-investigation" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">www.developerway.com/posts/bundle...</a></div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreicgfvvpbaja6tfqvbhym4easnjibg2ttxcabmdkdbstbrllfqe33q@jpeg" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreicgfvvpbaja6tfqvbhym4easnjibg2ttxcabmdkdbstbrllfqe33q@jpeg" alt="Illustration of a fallen, decorated Christmas tree with a cat sitting in a star-patterned pot, above the headline “Bundle Size Investigation: A Step-by-Step Guide to Shrinking Your JavaScript”." class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>January 21, 2026 at 12:17 PM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

<div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions">
        <div class="flex items-center justify-between w-[300px] pr-4 no-card-link">
          <div class="hidden" data-post-text-uri="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcwnnw2res2w">
            Bundle size investigation. <a href="https://bsky.app/profile/did:plc:bycpuwkco67nygcvxkn6ybjd" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky-mention">@adevnadia.bsky.social</a> walks through Vite bundle analysis, finds tree-shaking traps like wildcard imports, removes non-ESM bloat like lodash, and consolidates duplicate date libraries, shrinking a React app from 5MB to about 601KB. <a href="/hashtag/js" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#js</a><br><br><a href="https://www.developerway.com/posts/bundle-size-investigation" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">www.developerway.com/posts/bundle...</a>
          </div>
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link" 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" 
                  data-bluesky-interactions-reply-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcwnnw2res2w"
                  data-bluesky-interactions-reply-cid-param="bafyreiacnjb6uugdms3ptm6cgyzittg2bgzk5rrb6o23quftjymubg6qve"
                  data-bluesky-interactions-reply-root-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcwnnw2res2w"
                  data-bluesky-interactions-reply-root-cid-param="bafyreiacnjb6uugdms3ptm6cgyzittg2bgzk5rrb6o23quftjymubg6qve"
                  data-bluesky-interactions-reply-author-name-param="Web Standards"
                  data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg"
                  data-bluesky-interactions-post-path-param="/bsky/web-standards.dev/post/3mcwnnw2res2w"
                  title="Reply" 
                  style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>
            
          </button>
          
          <div class="relative no-card-link"
               data-controller="bluesky-repost-menu"
               data-bluesky-repost-menu-uri-value="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcwnnw2res2w"
               data-bluesky-repost-menu-cid-value="bafyreiacnjb6uugdms3ptm6cgyzittg2bgzk5rrb6o23quftjymubg6qve"
               data-bluesky-repost-menu-repost-uri-value=""
               data-bluesky-repost-menu-is-reposted-value="false"
               data-bluesky-repost-menu-author-handle-value="web-standards.dev"
               data-bluesky-repost-menu-post-text-value="Bundle size investigation. @adevnadia.bsky.social walks through Vite bundle analysis, finds tree-shaking traps like wildcard imports, removes non-ESM bloat like lodash, and consolidates duplicate date libraries, shrinking a React app from 5MB to about 601KB. #js

www.developerway.com/posts/bundle..."
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcwnnw2res2w"
                  data-bluesky-interactions-cid-param="bafyreiacnjb6uugdms3ptm6cgyzittg2bgzk5rrb6o23quftjymubg6qve"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">3</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://oauth.lightnews.app/bsky/web-standards.dev/post/3mcwnnw2res2w"
                  data-share-title-value="Web Standards on Lightnews"
                  data-share-text-value="Bundle size investigation. @adevnadia.bsky.social walks through Vite bundle analysis, finds tree-shaking traps like wildcard imports, remove…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="Bundle size investigation. @adevnadia.bsky.social walks through Vite bundle analysis, finds tree-shaking traps like wildcard imports, removes non-ESM bloat like lodash, and consolidates duplicate date libraries, shrinking a React app from 5MB to about 601KB. #js

www.developerway.com/posts/bundle..."
               data-bluesky-options-author-handle-value="web-standards.dev"
               data-bluesky-options-author-did-value="did:plc:uhsxlyuppi4kpmxevmjfveos"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/web-standards.dev/post/3mcu3yhiq4c2g" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=web-standards.dev" class="no-card-link inline-block flex-shrink-0" aria-label="Web Standards" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg" alt="web-standards.dev" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=web-standards.dev" class="truncate hover:underline text-black no-card-link">Web Standards</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=web-standards.dev" class="hover:underline text-gray-500 no-card-link">@web-standards.dev</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">Popover context menus with anchor positioning. <a href="https://bsky.app/profile/did:plc:xhhcrzsilpamjmz4dvrpt7df" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky-mention">@chriscoyier.net</a> builds a no-JS kebab menu with popover invokers and anchor positioning. And a smart positioning via the position-try property, so the menu always stays in view. <a href="/hashtag/css" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#css</a> <a href="/hashtag/webdev" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#webdev</a><br><br><a href="https://frontendmasters.com/blog/popover-context-menus-with-anchor-positioning/" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">frontendmasters.com/blog/popover...</a></div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreicbf7npb23qjgcderha7ultg44orvob6g5xq3ptgsyupdwvcanhii@jpeg" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreicbf7npb23qjgcderha7ultg44orvob6g5xq3ptgsyupdwvcanhii@jpeg" alt="Graphic showing UI panels with popover menus under the headline “Popover Context Menus with Anchor Positioning”, menu text “This Little Piggy Went to Market!”, and the logo text “Frontend Masters”." class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>January 20, 2026 at 11:55 AM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

<div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions">
        <div class="flex items-center justify-between w-[300px] pr-4 no-card-link">
          <div class="hidden" data-post-text-uri="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcu3yhiq4c2g">
            Popover context menus with anchor positioning. <a href="https://bsky.app/profile/did:plc:xhhcrzsilpamjmz4dvrpt7df" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky-mention">@chriscoyier.net</a> builds a no-JS kebab menu with popover invokers and anchor positioning. And a smart positioning via the position-try property, so the menu always stays in view. <a href="/hashtag/css" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#css</a> <a href="/hashtag/webdev" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#webdev</a><br><br><a href="https://frontendmasters.com/blog/popover-context-menus-with-anchor-positioning/" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">frontendmasters.com/blog/popover...</a>
          </div>
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link" 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" 
                  data-bluesky-interactions-reply-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcu3yhiq4c2g"
                  data-bluesky-interactions-reply-cid-param="bafyreidd3yx2tp3xb2wtm7ep5kc53ihbtw7tmw2jztmuwe7ubpivlsxbdy"
                  data-bluesky-interactions-reply-root-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcu3yhiq4c2g"
                  data-bluesky-interactions-reply-root-cid-param="bafyreidd3yx2tp3xb2wtm7ep5kc53ihbtw7tmw2jztmuwe7ubpivlsxbdy"
                  data-bluesky-interactions-reply-author-name-param="Web Standards"
                  data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg"
                  data-bluesky-interactions-post-path-param="/bsky/web-standards.dev/post/3mcu3yhiq4c2g"
                  title="Reply" 
                  style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>
            
          </button>
          
          <div class="relative no-card-link"
               data-controller="bluesky-repost-menu"
               data-bluesky-repost-menu-uri-value="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcu3yhiq4c2g"
               data-bluesky-repost-menu-cid-value="bafyreidd3yx2tp3xb2wtm7ep5kc53ihbtw7tmw2jztmuwe7ubpivlsxbdy"
               data-bluesky-repost-menu-repost-uri-value=""
               data-bluesky-repost-menu-is-reposted-value="false"
               data-bluesky-repost-menu-author-handle-value="web-standards.dev"
               data-bluesky-repost-menu-post-text-value="Popover context menus with anchor positioning. @chriscoyier.net builds a no-JS kebab menu with popover invokers and anchor positioning. And a smart positioning via the position-try property, so the menu always stays in view. #css #webdev

frontendmasters.com/blog/popover..."
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">1</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcu3yhiq4c2g"
                  data-bluesky-interactions-cid-param="bafyreidd3yx2tp3xb2wtm7ep5kc53ihbtw7tmw2jztmuwe7ubpivlsxbdy"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">11</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://oauth.lightnews.app/bsky/web-standards.dev/post/3mcu3yhiq4c2g"
                  data-share-title-value="Web Standards on Lightnews"
                  data-share-text-value="Popover context menus with anchor positioning. @chriscoyier.net builds a no-JS kebab menu with popover invokers and anchor positioning. And…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="Popover context menus with anchor positioning. @chriscoyier.net builds a no-JS kebab menu with popover invokers and anchor positioning. And a smart positioning via the position-try property, so the menu always stays in view. #css #webdev

frontendmasters.com/blog/popover..."
               data-bluesky-options-author-handle-value="web-standards.dev"
               data-bluesky-options-author-did-value="did:plc:uhsxlyuppi4kpmxevmjfveos"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/web-standards.dev/post/3mcrieegtdc2g" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=web-standards.dev" class="no-card-link inline-block flex-shrink-0" aria-label="Web Standards" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg" alt="web-standards.dev" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=web-standards.dev" class="truncate hover:underline text-black no-card-link">Web Standards</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=web-standards.dev" class="hover:underline text-gray-500 no-card-link">@web-standards.dev</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">2025 Web Almanac by <a href="https://bsky.app/profile/did:plc:cvyqqpnjxdrkgcsxfxrvl6zl" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky-mention">@httparchive.org</a> is out. A comprehensive, data-backed view of the web, built with trusted experts, across 15 chapters on content, user experience, publishing, and distribution. It also includes a PDF version for offline reading. <a href="/hashtag/almanac" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#almanac</a> <a href="/hashtag/report" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#report</a><br><br><a href="https://almanac.httparchive.org/en/2025/" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">almanac.httparchive.org/en/2025/</a></div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreif7ltryebthyopnv2alu4uysazkdqjvmx5ilqjkkiss46ekgdo7bm@jpeg" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreif7ltryebthyopnv2alu4uysazkdqjvmx5ilqjkkiss46ekgdo7bm@jpeg" alt="Illustration with the text “Web Almanac 2025” and “HTTP Archive’s annual state of the web report”, showing a large document and small characters beside it, and a “Start exploring” button." class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>January 19, 2026 at 10:59 AM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

<div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions">
        <div class="flex items-center justify-between w-[300px] pr-4 no-card-link">
          <div class="hidden" data-post-text-uri="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcrieegtdc2g">
            2025 Web Almanac by <a href="https://bsky.app/profile/did:plc:cvyqqpnjxdrkgcsxfxrvl6zl" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky-mention">@httparchive.org</a> is out. A comprehensive, data-backed view of the web, built with trusted experts, across 15 chapters on content, user experience, publishing, and distribution. It also includes a PDF version for offline reading. <a href="/hashtag/almanac" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#almanac</a> <a href="/hashtag/report" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#report</a><br><br><a href="https://almanac.httparchive.org/en/2025/" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">almanac.httparchive.org/en/2025/</a>
          </div>
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link" 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" 
                  data-bluesky-interactions-reply-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcrieegtdc2g"
                  data-bluesky-interactions-reply-cid-param="bafyreib2dyxbqnugszsxpkkfvvrxpav2oqldv5cjinxn2rnjgkda4ypkyq"
                  data-bluesky-interactions-reply-root-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcrieegtdc2g"
                  data-bluesky-interactions-reply-root-cid-param="bafyreib2dyxbqnugszsxpkkfvvrxpav2oqldv5cjinxn2rnjgkda4ypkyq"
                  data-bluesky-interactions-reply-author-name-param="Web Standards"
                  data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg"
                  data-bluesky-interactions-post-path-param="/bsky/web-standards.dev/post/3mcrieegtdc2g"
                  title="Reply" 
                  style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>
            
          </button>
          
          <div class="relative no-card-link"
               data-controller="bluesky-repost-menu"
               data-bluesky-repost-menu-uri-value="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcrieegtdc2g"
               data-bluesky-repost-menu-cid-value="bafyreib2dyxbqnugszsxpkkfvvrxpav2oqldv5cjinxn2rnjgkda4ypkyq"
               data-bluesky-repost-menu-repost-uri-value=""
               data-bluesky-repost-menu-is-reposted-value="false"
               data-bluesky-repost-menu-author-handle-value="web-standards.dev"
               data-bluesky-repost-menu-post-text-value="2025 Web Almanac by @httparchive.org is out. A comprehensive, data-backed view of the web, built with trusted experts, across 15 chapters on content, user experience, publishing, and distribution. It also includes a PDF version for offline reading. #almanac #report

almanac.httparchive.org/en/2025/"
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">4</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcrieegtdc2g"
                  data-bluesky-interactions-cid-param="bafyreib2dyxbqnugszsxpkkfvvrxpav2oqldv5cjinxn2rnjgkda4ypkyq"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">8</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://oauth.lightnews.app/bsky/web-standards.dev/post/3mcrieegtdc2g"
                  data-share-title-value="Web Standards on Lightnews"
                  data-share-text-value="2025 Web Almanac by @httparchive.org is out. A comprehensive, data-backed view of the web, built with trusted experts, across 15 chapters on…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="2025 Web Almanac by @httparchive.org is out. A comprehensive, data-backed view of the web, built with trusted experts, across 15 chapters on content, user experience, publishing, and distribution. It also includes a PDF version for offline reading. #almanac #report

almanac.httparchive.org/en/2025/"
               data-bluesky-options-author-handle-value="web-standards.dev"
               data-bluesky-options-author-did-value="did:plc:uhsxlyuppi4kpmxevmjfveos"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/web-standards.dev/post/3mcjxwcw7i22z" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=web-standards.dev" class="no-card-link inline-block flex-shrink-0" aria-label="Web Standards" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg" alt="web-standards.dev" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=web-standards.dev" class="truncate hover:underline text-black no-card-link">Web Standards</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=web-standards.dev" class="hover:underline text-gray-500 no-card-link">@web-standards.dev</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">Date is out, Temporal is in. <a href="https://bsky.app/profile/did:plc:mlmtsmr3fcbhffjoydyg3663" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky-mention">@wil.to</a> breaks down why JavaScript’s Date is inconsistent and bug-prone, then tours Temporal, a Stage 3 TC39 proposal. Temporal is now supported in recent Chrome and Firefox releases, but the spec can still evolve. <a href="/hashtag/js" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#js</a> <a href="/hashtag/temporal" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#temporal</a><br><br><a href="https://piccalil.li/blog/date-is-out-and-temporal-is-in/" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">piccalil.li/blog/date-is...</a></div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreiaslsviiuqwuupazg7ht5y2sruwijs6kn5urrjejzthomdfo5vhxy@jpeg" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreiaslsviiuqwuupazg7ht5y2sruwijs6kn5urrjejzthomdfo5vhxy@jpeg" alt="Graphic with headline “Date is out, Temporal is in”. Footer text reads “Piccalilli from set.studio” and “Mat ‘Wilto’ Marquis — 07 January 2026”, alongside a circular portrait." class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>January 16, 2026 at 11:16 AM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

<div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions">
        <div class="flex items-center justify-between w-[300px] pr-4 no-card-link">
          <div class="hidden" data-post-text-uri="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcjxwcw7i22z">
            Date is out, Temporal is in. <a href="https://bsky.app/profile/did:plc:mlmtsmr3fcbhffjoydyg3663" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky-mention">@wil.to</a> breaks down why JavaScript’s Date is inconsistent and bug-prone, then tours Temporal, a Stage 3 TC39 proposal. Temporal is now supported in recent Chrome and Firefox releases, but the spec can still evolve. <a href="/hashtag/js" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#js</a> <a href="/hashtag/temporal" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#temporal</a><br><br><a href="https://piccalil.li/blog/date-is-out-and-temporal-is-in/" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">piccalil.li/blog/date-is...</a>
          </div>
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link" 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" 
                  data-bluesky-interactions-reply-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcjxwcw7i22z"
                  data-bluesky-interactions-reply-cid-param="bafyreigmjjicmuqang7kcnewojnaphkpyqiuh2d3t4b2u2gjjqubse47vy"
                  data-bluesky-interactions-reply-root-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcjxwcw7i22z"
                  data-bluesky-interactions-reply-root-cid-param="bafyreigmjjicmuqang7kcnewojnaphkpyqiuh2d3t4b2u2gjjqubse47vy"
                  data-bluesky-interactions-reply-author-name-param="Web Standards"
                  data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg"
                  data-bluesky-interactions-post-path-param="/bsky/web-standards.dev/post/3mcjxwcw7i22z"
                  title="Reply" 
                  style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>
            <span data-bluesky-interactions-target="replyCount">1</span>
          </button>
          
          <div class="relative no-card-link"
               data-controller="bluesky-repost-menu"
               data-bluesky-repost-menu-uri-value="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcjxwcw7i22z"
               data-bluesky-repost-menu-cid-value="bafyreigmjjicmuqang7kcnewojnaphkpyqiuh2d3t4b2u2gjjqubse47vy"
               data-bluesky-repost-menu-repost-uri-value=""
               data-bluesky-repost-menu-is-reposted-value="false"
               data-bluesky-repost-menu-author-handle-value="web-standards.dev"
               data-bluesky-repost-menu-post-text-value="Date is out, Temporal is in. @wil.to breaks down why JavaScript’s Date is inconsistent and bug-prone, then tours Temporal, a Stage 3 TC39 proposal. Temporal is now supported in recent Chrome and Firefox releases, but the spec can still evolve. #js #temporal

piccalil.li/blog/date-is..."
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">1</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcjxwcw7i22z"
                  data-bluesky-interactions-cid-param="bafyreigmjjicmuqang7kcnewojnaphkpyqiuh2d3t4b2u2gjjqubse47vy"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">5</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://oauth.lightnews.app/bsky/web-standards.dev/post/3mcjxwcw7i22z"
                  data-share-title-value="Web Standards on Lightnews"
                  data-share-text-value="Date is out, Temporal is in. @wil.to breaks down why JavaScript’s Date is inconsistent and bug-prone, then tours Temporal, a Stage 3 TC39 pr…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="Date is out, Temporal is in. @wil.to breaks down why JavaScript’s Date is inconsistent and bug-prone, then tours Temporal, a Stage 3 TC39 proposal. Temporal is now supported in recent Chrome and Firefox releases, but the spec can still evolve. #js #temporal

piccalil.li/blog/date-is..."
               data-bluesky-options-author-handle-value="web-standards.dev"
               data-bluesky-options-author-did-value="did:plc:uhsxlyuppi4kpmxevmjfveos"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/web-standards.dev/post/3mchhveio3c2z" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=web-standards.dev" class="no-card-link inline-block flex-shrink-0" aria-label="Web Standards" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg" alt="web-standards.dev" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=web-standards.dev" class="truncate hover:underline text-black no-card-link">Web Standards</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=web-standards.dev" class="hover:underline text-gray-500 no-card-link">@web-standards.dev</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">What’s new in Chrome 144. New ::search-text for find-in-page highlights, <geolocation> for clearer location permission with a recovery path after denial, Temporal API for modern JavaScript dates and times, and more. <a href="/hashtag/chrome" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#chrome</a> <a href="/hashtag/browser" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#browser</a><br><br><a href="https://developer.chrome.com/release-notes/144" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">developer.chrome.com/release-note...</a></div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreiaomoropzlblg3qaqdfuqd76f3wanpdixxpzvn6jrnylikyb57gzq@jpeg" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreiaomoropzlblg3qaqdfuqd76f3wanpdixxpzvn6jrnylikyb57gzq@jpeg" alt="Graphic with the text “New in Chrome” and the number “144”, alongside the Chrome logo on a green grid background." class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>January 15, 2026 at 11:24 AM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

<div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions">
        <div class="flex items-center justify-between w-[300px] pr-4 no-card-link">
          <div class="hidden" data-post-text-uri="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mchhveio3c2z">
            What’s new in Chrome 144. New ::search-text for find-in-page highlights, <geolocation> for clearer location permission with a recovery path after denial, Temporal API for modern JavaScript dates and times, and more. <a href="/hashtag/chrome" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#chrome</a> <a href="/hashtag/browser" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#browser</a><br><br><a href="https://developer.chrome.com/release-notes/144" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">developer.chrome.com/release-note...</a>
          </div>
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link" 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" 
                  data-bluesky-interactions-reply-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mchhveio3c2z"
                  data-bluesky-interactions-reply-cid-param="bafyreigj4afukqppwrltmmnnwk5y2rbo7figv4f36uf5sofh3vfn5svxxm"
                  data-bluesky-interactions-reply-root-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mchhveio3c2z"
                  data-bluesky-interactions-reply-root-cid-param="bafyreigj4afukqppwrltmmnnwk5y2rbo7figv4f36uf5sofh3vfn5svxxm"
                  data-bluesky-interactions-reply-author-name-param="Web Standards"
                  data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg"
                  data-bluesky-interactions-post-path-param="/bsky/web-standards.dev/post/3mchhveio3c2z"
                  title="Reply" 
                  style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>
            
          </button>
          
          <div class="relative no-card-link"
               data-controller="bluesky-repost-menu"
               data-bluesky-repost-menu-uri-value="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mchhveio3c2z"
               data-bluesky-repost-menu-cid-value="bafyreigj4afukqppwrltmmnnwk5y2rbo7figv4f36uf5sofh3vfn5svxxm"
               data-bluesky-repost-menu-repost-uri-value=""
               data-bluesky-repost-menu-is-reposted-value="false"
               data-bluesky-repost-menu-author-handle-value="web-standards.dev"
               data-bluesky-repost-menu-post-text-value="What’s new in Chrome 144. New ::search-text for find-in-page highlights, <geolocation> for clearer location permission with a recovery path after denial, Temporal API for modern JavaScript dates and times, and more. #chrome #browser

developer.chrome.com/release-note..."
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">2</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mchhveio3c2z"
                  data-bluesky-interactions-cid-param="bafyreigj4afukqppwrltmmnnwk5y2rbo7figv4f36uf5sofh3vfn5svxxm"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">3</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://oauth.lightnews.app/bsky/web-standards.dev/post/3mchhveio3c2z"
                  data-share-title-value="Web Standards on Lightnews"
                  data-share-text-value="What’s new in Chrome 144. New ::search-text for find-in-page highlights, <geolocation> for clearer location permission with a recovery path…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="What’s new in Chrome 144. New ::search-text for find-in-page highlights, <geolocation> for clearer location permission with a recovery path after denial, Temporal API for modern JavaScript dates and times, and more. #chrome #browser

developer.chrome.com/release-note..."
               data-bluesky-options-author-handle-value="web-standards.dev"
               data-bluesky-options-author-did-value="did:plc:uhsxlyuppi4kpmxevmjfveos"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/web-standards.dev/post/3mcf2gcctn22z" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=web-standards.dev" class="no-card-link inline-block flex-shrink-0" aria-label="Web Standards" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg" alt="web-standards.dev" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=web-standards.dev" class="truncate hover:underline text-black no-card-link">Web Standards</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=web-standards.dev" class="hover:underline text-gray-500 no-card-link">@web-standards.dev</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">Firefox 147 release notes for developers. CSS anchor positioning, Navigation API, SVG media fragments, View Transition types, CSS module scripts, module-based service workers, WebGPU on Apple Silicon, and DevTools improvements. <a href="/hashtag/firefox" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#firefox</a> <a href="/hashtag/browser" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#browser</a><br><br><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/147" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">developer.mozilla.org/en-US/docs/M...</a></div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreiguwb6a6d2kd7wguoicfejxrqyw3hc3wi4g4maln53xr6mpanect4@jpeg" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreiguwb6a6d2kd7wguoicfejxrqyw3hc3wi4g4maln53xr6mpanect4@jpeg" alt="Screenshot of browser developer tools with a large Firefox logo overlaid and the text “Firefox 147”." class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>January 14, 2026 at 12:17 PM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

<div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions">
        <div class="flex items-center justify-between w-[300px] pr-4 no-card-link">
          <div class="hidden" data-post-text-uri="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcf2gcctn22z">
            Firefox 147 release notes for developers. CSS anchor positioning, Navigation API, SVG media fragments, View Transition types, CSS module scripts, module-based service workers, WebGPU on Apple Silicon, and DevTools improvements. <a href="/hashtag/firefox" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#firefox</a> <a href="/hashtag/browser" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#browser</a><br><br><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/147" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">developer.mozilla.org/en-US/docs/M...</a>
          </div>
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link" 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" 
                  data-bluesky-interactions-reply-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcf2gcctn22z"
                  data-bluesky-interactions-reply-cid-param="bafyreiepuyhqnt5gdpgjl7n3f5psfvsohkc5mfo2tptk37cx5ukuayjbgi"
                  data-bluesky-interactions-reply-root-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcf2gcctn22z"
                  data-bluesky-interactions-reply-root-cid-param="bafyreiepuyhqnt5gdpgjl7n3f5psfvsohkc5mfo2tptk37cx5ukuayjbgi"
                  data-bluesky-interactions-reply-author-name-param="Web Standards"
                  data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg"
                  data-bluesky-interactions-post-path-param="/bsky/web-standards.dev/post/3mcf2gcctn22z"
                  title="Reply" 
                  style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>
            
          </button>
          
          <div class="relative no-card-link"
               data-controller="bluesky-repost-menu"
               data-bluesky-repost-menu-uri-value="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcf2gcctn22z"
               data-bluesky-repost-menu-cid-value="bafyreiepuyhqnt5gdpgjl7n3f5psfvsohkc5mfo2tptk37cx5ukuayjbgi"
               data-bluesky-repost-menu-repost-uri-value=""
               data-bluesky-repost-menu-is-reposted-value="false"
               data-bluesky-repost-menu-author-handle-value="web-standards.dev"
               data-bluesky-repost-menu-post-text-value="Firefox 147 release notes for developers. CSS anchor positioning, Navigation API, SVG media fragments, View Transition types, CSS module scripts, module-based service workers, WebGPU on Apple Silicon, and DevTools improvements. #firefox #browser

developer.mozilla.org/en-US/docs/M..."
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">3</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mcf2gcctn22z"
                  data-bluesky-interactions-cid-param="bafyreiepuyhqnt5gdpgjl7n3f5psfvsohkc5mfo2tptk37cx5ukuayjbgi"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">3</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://oauth.lightnews.app/bsky/web-standards.dev/post/3mcf2gcctn22z"
                  data-share-title-value="Web Standards on Lightnews"
                  data-share-text-value="Firefox 147 release notes for developers. CSS anchor positioning, Navigation API, SVG media fragments, View Transition types, CSS module scr…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="Firefox 147 release notes for developers. CSS anchor positioning, Navigation API, SVG media fragments, View Transition types, CSS module scripts, module-based service workers, WebGPU on Apple Silicon, and DevTools improvements. #firefox #browser

developer.mozilla.org/en-US/docs/M..."
               data-bluesky-options-author-handle-value="web-standards.dev"
               data-bluesky-options-author-did-value="did:plc:uhsxlyuppi4kpmxevmjfveos"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/web-standards.dev/post/3mccggtuaos2v" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=web-standards.dev" class="no-card-link inline-block flex-shrink-0" aria-label="Web Standards" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg" alt="web-standards.dev" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=web-standards.dev" class="truncate hover:underline text-black no-card-link">Web Standards</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=web-standards.dev" class="hover:underline text-gray-500 no-card-link">@web-standards.dev</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">A production-ready web component starter template. <a href="https://bsky.app/profile/did:plc:6rmgrvblxflqh34omwywu6ib" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky-mention">@aaron-gustafson.com</a> presents a setup wizard, Vitest testing, GitHub Actions CI, and secure npm publishing, so you can focus on your component, not a boilerplate. <a href="/hashtag/webcomponents" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#webcomponents</a> <a href="/hashtag/js" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#js</a> <a href="/hashtag/tools" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#tools</a><br><br><a href="https://www.aaron-gustafson.com/notebook/a-web-component-starter-template/" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">www.aaron-gustafson.com/notebook/a-w...</a></div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreieumvtillogqumtxqjpxyl3jwbxyzkbfgwig6ttrnnh3rpzswdzjm@jpeg" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreieumvtillogqumtxqjpxyl3jwbxyzkbfgwig6ttrnnh3rpzswdzjm@jpeg" alt="Graphic with headline “A Production-Ready Web Component Starter Template”, accompanied by code snippets and tags reading “developer tools”, “open source”, and “web components”." class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>January 13, 2026 at 11:14 AM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

<div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions">
        <div class="flex items-center justify-between w-[300px] pr-4 no-card-link">
          <div class="hidden" data-post-text-uri="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mccggtuaos2v">
            A production-ready web component starter template. <a href="https://bsky.app/profile/did:plc:6rmgrvblxflqh34omwywu6ib" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky-mention">@aaron-gustafson.com</a> presents a setup wizard, Vitest testing, GitHub Actions CI, and secure npm publishing, so you can focus on your component, not a boilerplate. <a href="/hashtag/webcomponents" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#webcomponents</a> <a href="/hashtag/js" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#js</a> <a href="/hashtag/tools" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#tools</a><br><br><a href="https://www.aaron-gustafson.com/notebook/a-web-component-starter-template/" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">www.aaron-gustafson.com/notebook/a-w...</a>
          </div>
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link" 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" 
                  data-bluesky-interactions-reply-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mccggtuaos2v"
                  data-bluesky-interactions-reply-cid-param="bafyreiantbbaab6qgaser3662ppfdjuirkmhknspsdsradxboiqw7ql4be"
                  data-bluesky-interactions-reply-root-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mccggtuaos2v"
                  data-bluesky-interactions-reply-root-cid-param="bafyreiantbbaab6qgaser3662ppfdjuirkmhknspsdsradxboiqw7ql4be"
                  data-bluesky-interactions-reply-author-name-param="Web Standards"
                  data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg"
                  data-bluesky-interactions-post-path-param="/bsky/web-standards.dev/post/3mccggtuaos2v"
                  title="Reply" 
                  style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>
            
          </button>
          
          <div class="relative no-card-link"
               data-controller="bluesky-repost-menu"
               data-bluesky-repost-menu-uri-value="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mccggtuaos2v"
               data-bluesky-repost-menu-cid-value="bafyreiantbbaab6qgaser3662ppfdjuirkmhknspsdsradxboiqw7ql4be"
               data-bluesky-repost-menu-repost-uri-value=""
               data-bluesky-repost-menu-is-reposted-value="false"
               data-bluesky-repost-menu-author-handle-value="web-standards.dev"
               data-bluesky-repost-menu-post-text-value="A production-ready web component starter template. @aaron-gustafson.com presents a setup wizard, Vitest testing, GitHub Actions CI, and secure npm publishing, so you can focus on your component, not a boilerplate. #webcomponents #js #tools

www.aaron-gustafson.com/notebook/a-w..."
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">3</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mccggtuaos2v"
                  data-bluesky-interactions-cid-param="bafyreiantbbaab6qgaser3662ppfdjuirkmhknspsdsradxboiqw7ql4be"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">6</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://oauth.lightnews.app/bsky/web-standards.dev/post/3mccggtuaos2v"
                  data-share-title-value="Web Standards on Lightnews"
                  data-share-text-value="A production-ready web component starter template. @aaron-gustafson.com presents a setup wizard, Vitest testing, GitHub Actions CI, and secu…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="A production-ready web component starter template. @aaron-gustafson.com presents a setup wizard, Vitest testing, GitHub Actions CI, and secure npm publishing, so you can focus on your component, not a boilerplate. #webcomponents #js #tools

www.aaron-gustafson.com/notebook/a-w..."
               data-bluesky-options-author-handle-value="web-standards.dev"
               data-bluesky-options-author-did-value="did:plc:uhsxlyuppi4kpmxevmjfveos"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/web-standards.dev/post/3mc7wk4xat22v" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=web-standards.dev" class="no-card-link inline-block flex-shrink-0" aria-label="Web Standards" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg" alt="web-standards.dev" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=web-standards.dev" class="truncate hover:underline text-black no-card-link">Web Standards</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=web-standards.dev" class="hover:underline text-gray-500 no-card-link">@web-standards.dev</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">Initiating navigations with the Navigation API. <a href="https://bsky.app/profile/did:plc:n34etccppmw5butntcjnaejv" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky-mention">@ollie-williams.bsky.social</a> shows navigate(), reload(), back(), forward(), and traverseTo(), plus state, info, and committed and finished promises for intercepted navigations. <a href="/hashtag/js" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#js</a> <a href="/hashtag/router" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#router</a> <a href="/hashtag/url" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#url</a><br><br><a href="https://olliewilliams.xyz/blog/initiating-navigations-with-the-navigation-api/" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">olliewilliams.xyz/blog/initiat...</a></div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreiasp26vcu2kxgfo5bruiwp7fa4iv52smojjcqewcy3oc64msqr5j4@jpeg" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreiasp26vcu2kxgfo5bruiwp7fa4iv52smojjcqewcy3oc64msqr5j4@jpeg" alt="Graphic with headline “Initiating navigations with the Navigation API”, showing code snippets and the site name “olliewilliams.xyz”, alongside a circular portrait." class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>January 12, 2026 at 11:25 AM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

<div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions">
        <div class="flex items-center justify-between w-[300px] pr-4 no-card-link">
          <div class="hidden" data-post-text-uri="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mc7wk4xat22v">
            Initiating navigations with the Navigation API. <a href="https://bsky.app/profile/did:plc:n34etccppmw5butntcjnaejv" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky-mention">@ollie-williams.bsky.social</a> shows navigate(), reload(), back(), forward(), and traverseTo(), plus state, info, and committed and finished promises for intercepted navigations. <a href="/hashtag/js" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#js</a> <a href="/hashtag/router" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#router</a> <a href="/hashtag/url" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#url</a><br><br><a href="https://olliewilliams.xyz/blog/initiating-navigations-with-the-navigation-api/" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">olliewilliams.xyz/blog/initiat...</a>
          </div>
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link" 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" 
                  data-bluesky-interactions-reply-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mc7wk4xat22v"
                  data-bluesky-interactions-reply-cid-param="bafyreig6v2gg4qyq6rqqrr3gggnsazxovaqm4e7ugjpqeewsfvqhxemn4a"
                  data-bluesky-interactions-reply-root-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mc7wk4xat22v"
                  data-bluesky-interactions-reply-root-cid-param="bafyreig6v2gg4qyq6rqqrr3gggnsazxovaqm4e7ugjpqeewsfvqhxemn4a"
                  data-bluesky-interactions-reply-author-name-param="Web Standards"
                  data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg"
                  data-bluesky-interactions-post-path-param="/bsky/web-standards.dev/post/3mc7wk4xat22v"
                  title="Reply" 
                  style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>
            
          </button>
          
          <div class="relative no-card-link"
               data-controller="bluesky-repost-menu"
               data-bluesky-repost-menu-uri-value="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mc7wk4xat22v"
               data-bluesky-repost-menu-cid-value="bafyreig6v2gg4qyq6rqqrr3gggnsazxovaqm4e7ugjpqeewsfvqhxemn4a"
               data-bluesky-repost-menu-repost-uri-value=""
               data-bluesky-repost-menu-is-reposted-value="false"
               data-bluesky-repost-menu-author-handle-value="web-standards.dev"
               data-bluesky-repost-menu-post-text-value="Initiating navigations with the Navigation API. @ollie-williams.bsky.social shows navigate(), reload(), back(), forward(), and traverseTo(), plus state, info, and committed and finished promises for intercepted navigations. #js #router #url

olliewilliams.xyz/blog/initiat..."
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">3</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mc7wk4xat22v"
                  data-bluesky-interactions-cid-param="bafyreig6v2gg4qyq6rqqrr3gggnsazxovaqm4e7ugjpqeewsfvqhxemn4a"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">8</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://oauth.lightnews.app/bsky/web-standards.dev/post/3mc7wk4xat22v"
                  data-share-title-value="Web Standards on Lightnews"
                  data-share-text-value="Initiating navigations with the Navigation API. @ollie-williams.bsky.social shows navigate(), reload(), back(), forward(), and traverseTo(),…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="Initiating navigations with the Navigation API. @ollie-williams.bsky.social shows navigate(), reload(), back(), forward(), and traverseTo(), plus state, info, and committed and finished promises for intercepted navigations. #js #router #url

olliewilliams.xyz/blog/initiat..."
               data-bluesky-options-author-handle-value="web-standards.dev"
               data-bluesky-options-author-did-value="did:plc:uhsxlyuppi4kpmxevmjfveos"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/web-standards.dev/post/3mbyexnya3225" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=web-standards.dev" class="no-card-link inline-block flex-shrink-0" aria-label="Web Standards" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg" alt="web-standards.dev" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=web-standards.dev" class="truncate hover:underline text-black no-card-link">Web Standards</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=web-standards.dev" class="hover:underline text-gray-500 no-card-link">@web-standards.dev</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">VoxCSS, a CSS voxel engine. It stacks CSS grids and 3D transforms to render HTML cuboids in the DOM, not using Canvas, skips hidden parts, plus shapes, areas, projections. Supports vanilla JS, Vue, React, and Svelte. <a href="/hashtag/css" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#css</a> <a href="/hashtag/3d" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#3d</a><br><br><a href="https://voxcss.com/" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">voxcss.com</a></div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreidmbcv46laho4vq4tivjgj4jferqcbmash2nog57vl7uz3qio4zmq@jpeg" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreidmbcv46laho4vq4tivjgj4jferqcbmash2nog57vl7uz3qio4zmq@jpeg" alt="Isometric voxel scene with characters and a train, titled “VoxCSS”. A side panel reads “VoxCamera Props” with controls labeled “zoom”, “pan”, “tilt”, “rotX”, “rotY”, and “perspective”." class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>January 9, 2026 at 11:21 AM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

<div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions">
        <div class="flex items-center justify-between w-[300px] pr-4 no-card-link">
          <div class="hidden" data-post-text-uri="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mbyexnya3225">
            VoxCSS, a CSS voxel engine. It stacks CSS grids and 3D transforms to render HTML cuboids in the DOM, not using Canvas, skips hidden parts, plus shapes, areas, projections. Supports vanilla JS, Vue, React, and Svelte. <a href="/hashtag/css" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#css</a> <a href="/hashtag/3d" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#3d</a><br><br><a href="https://voxcss.com/" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">voxcss.com</a>
          </div>
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link" 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" 
                  data-bluesky-interactions-reply-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mbyexnya3225"
                  data-bluesky-interactions-reply-cid-param="bafyreidbx35polb4kptaxsnboarzmmfdurujzyaqxebgj6rzblmcyq2uka"
                  data-bluesky-interactions-reply-root-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mbyexnya3225"
                  data-bluesky-interactions-reply-root-cid-param="bafyreidbx35polb4kptaxsnboarzmmfdurujzyaqxebgj6rzblmcyq2uka"
                  data-bluesky-interactions-reply-author-name-param="Web Standards"
                  data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg"
                  data-bluesky-interactions-post-path-param="/bsky/web-standards.dev/post/3mbyexnya3225"
                  title="Reply" 
                  style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>
            
          </button>
          
          <div class="relative no-card-link"
               data-controller="bluesky-repost-menu"
               data-bluesky-repost-menu-uri-value="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mbyexnya3225"
               data-bluesky-repost-menu-cid-value="bafyreidbx35polb4kptaxsnboarzmmfdurujzyaqxebgj6rzblmcyq2uka"
               data-bluesky-repost-menu-repost-uri-value=""
               data-bluesky-repost-menu-is-reposted-value="false"
               data-bluesky-repost-menu-author-handle-value="web-standards.dev"
               data-bluesky-repost-menu-post-text-value="VoxCSS, a CSS voxel engine. It stacks CSS grids and 3D transforms to render HTML cuboids in the DOM, not using Canvas, skips hidden parts, plus shapes, areas, projections. Supports vanilla JS, Vue, React, and Svelte. #css #3d

voxcss.com"
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">2</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mbyexnya3225"
                  data-bluesky-interactions-cid-param="bafyreidbx35polb4kptaxsnboarzmmfdurujzyaqxebgj6rzblmcyq2uka"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">2</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://oauth.lightnews.app/bsky/web-standards.dev/post/3mbyexnya3225"
                  data-share-title-value="Web Standards on Lightnews"
                  data-share-text-value="VoxCSS, a CSS voxel engine. It stacks CSS grids and 3D transforms to render HTML cuboids in the DOM, not using Canvas, skips hidden parts, p…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="VoxCSS, a CSS voxel engine. It stacks CSS grids and 3D transforms to render HTML cuboids in the DOM, not using Canvas, skips hidden parts, plus shapes, areas, projections. Supports vanilla JS, Vue, React, and Svelte. #css #3d

voxcss.com"
               data-bluesky-options-author-handle-value="web-standards.dev"
               data-bluesky-options-author-did-value="did:plc:uhsxlyuppi4kpmxevmjfveos"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/web-standards.dev/post/3mbvupqujks2t" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=web-standards.dev" class="no-card-link inline-block flex-shrink-0" aria-label="Web Standards" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg" alt="web-standards.dev" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=web-standards.dev" class="truncate hover:underline text-black no-card-link">Web Standards</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=web-standards.dev" class="hover:underline text-gray-500 no-card-link">@web-standards.dev</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">Web dependencies are broken. Can we fix them? <a href="https://bsky.app/profile/did:plc:eagnfcoqnbtzpkglrtej6ayg" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky-mention">@lea.verou.me</a> says bundlers became the price of admission for browser libraries, and today’s import maps don’t scale. External import maps could be a first step. <a href="/hashtag/js" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#js</a> <a href="/hashtag/tools" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#tools</a><br><br><a href="https://lea.verou.me/blog/2026/web-deps/" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">lea.verou.me/blog/2026/we...</a></div>

<div class="mt-2 w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="modal">
              <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreihgc4vwuwvnprkczarulexfbevzbfxg5iz55e3upl6dzqt2kvw2wu@jpeg" data-action="click->modal#openWith" data-large-src="https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreihgc4vwuwvnprkczarulexfbevzbfxg5iz55e3upl6dzqt2kvw2wu@jpeg" alt="Web dependencies are broken. Can we fix them? In healthy ecosystems dependencies are normal, cheap, and first-class. “Dependency-free” is not a badge of honor." class="w-full rounded cursor-zoom-in" loading="lazy">
            <div data-modal-target="panel" class="hidden fixed inset-0 z-[100]">
              <div class="absolute inset-0 bg-black/90" data-action="click->modal#close"></div>
              <div class="relative z-[101] h-full w-full flex items-center justify-center p-4" data-action="click->modal#stop">
                <img data-modal-target="image" alt="" class="max-w-full max-h-full rounded">
                <button type="button" aria-label="Close" class="absolute top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/60 text-white hover:bg-black/80" data-action="click->modal#close">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
              </div>
            </div>
          </div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>January 8, 2026 at 11:25 AM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

<div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions">
        <div class="flex items-center justify-between w-[300px] pr-4 no-card-link">
          <div class="hidden" data-post-text-uri="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mbvupqujks2t">
            Web dependencies are broken. Can we fix them? <a href="https://bsky.app/profile/did:plc:eagnfcoqnbtzpkglrtej6ayg" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky-mention">@lea.verou.me</a> says bundlers became the price of admission for browser libraries, and today’s import maps don’t scale. External import maps could be a first step. <a href="/hashtag/js" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#js</a> <a href="/hashtag/tools" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#tools</a><br><br><a href="https://lea.verou.me/blog/2026/web-deps/" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">lea.verou.me/blog/2026/we...</a>
          </div>
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link" 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" 
                  data-bluesky-interactions-reply-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mbvupqujks2t"
                  data-bluesky-interactions-reply-cid-param="bafyreidwln2ox462jiik2sqodfxk5kaloix6cczrly5gbphhz5rkocspce"
                  data-bluesky-interactions-reply-root-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mbvupqujks2t"
                  data-bluesky-interactions-reply-root-cid-param="bafyreidwln2ox462jiik2sqodfxk5kaloix6cczrly5gbphhz5rkocspce"
                  data-bluesky-interactions-reply-author-name-param="Web Standards"
                  data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:uhsxlyuppi4kpmxevmjfveos/bafkreighyzewstjsv3iaumwpbb3hqojv7su3if7u6yxcmeqrsldgsxrrai@jpeg"
                  data-bluesky-interactions-post-path-param="/bsky/web-standards.dev/post/3mbvupqujks2t"
                  title="Reply" 
                  style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>
            
          </button>
          
          <div class="relative no-card-link"
               data-controller="bluesky-repost-menu"
               data-bluesky-repost-menu-uri-value="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mbvupqujks2t"
               data-bluesky-repost-menu-cid-value="bafyreidwln2ox462jiik2sqodfxk5kaloix6cczrly5gbphhz5rkocspce"
               data-bluesky-repost-menu-repost-uri-value=""
               data-bluesky-repost-menu-is-reposted-value="false"
               data-bluesky-repost-menu-author-handle-value="web-standards.dev"
               data-bluesky-repost-menu-post-text-value="Web dependencies are broken. Can we fix them? @lea.verou.me says bundlers became the price of admission for browser libraries, and today’s import maps don’t scale. External import maps could be a first step. #js #tools

lea.verou.me/blog/2026/we..."
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              <span data-bluesky-interactions-target="repostCount">3</span>
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:uhsxlyuppi4kpmxevmjfveos/app.bsky.feed.post/3mbvupqujks2t"
                  data-bluesky-interactions-cid-param="bafyreidwln2ox462jiik2sqodfxk5kaloix6cczrly5gbphhz5rkocspce"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span data-bluesky-interactions-target="likeCount">3</span>
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://oauth.lightnews.app/bsky/web-standards.dev/post/3mbvupqujks2t"
                  data-share-title-value="Web Standards on Lightnews"
                  data-share-text-value="Web dependencies are broken. Can we fix them? @lea.verou.me says bundlers became the price of admission for browser libraries, and today’s i…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="Web dependencies are broken. Can we fix them? @lea.verou.me says bundlers became the price of admission for browser libraries, and today’s import maps don’t scale. External import maps could be a first step. #js #tools

lea.verou.me/blog/2026/we..."
               data-bluesky-options-author-handle-value="web-standards.dev"
               data-bluesky-options-author-did-value="did:plc:uhsxlyuppi4kpmxevmjfveos"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

</div>
  </div>
</div>

</main>

</div>
      <div class="hidden md:block"></div>
    </div>
    
<div id="cta-footer" class="md:hidden fixed bottom-0 left-0 right-0 z-40 bg-white dark:bg-black border-t border-gray-200 dark:border-gray-700">
          <div class="px-2 pt-3 pb-5">
      <div class="flex items-center justify-between gap-3">
        
        <div class="flex items-center gap-2 flex-1 min-w-0">
          <a class="inline-flex items-center gap-2" aria-label="Lightnews" data-apply-edition="1" href="/">
              <img alt="Lightnews" class="logo-light h-10 w-10 flex-shrink-0" src="/assets/lightnews_black-993b5cbd.png" />
              <img alt="Lightnews" class="logo-dark h-10 w-10 flex-shrink-0" src="/assets/lightnews-f13a19bd.png" />
            <span class="text-base font-semibold text-gray-900 dark:text-white truncate brand-text">Lightnews</span>
</a>        </div>
        
        <div class="flex items-center gap-2 flex-shrink-0">
          <button type="button" data-action="click->bluesky-auth#openOAuthModal" class="btn btn-primary btn-sm whitespace-nowrap">Create account</button>
          <button type="button" data-action="click->bluesky-auth#openOAuthModal" class="btn btn-light btn-sm whitespace-nowrap">Sign in</button>
        </div>
      </div>
    </div>
</div>

<style>
  @media (max-width: 767px) {
    body {
      padding-bottom: 6.5rem;
    }
  }
  /* Hard guarantee: footer is visible on mobile widths */
  @media (max-width: 1023px) {
    #cta-footer { display: block !important; }
  }
</style>

<div id="signin-modal" class="hidden fixed inset-0 z-50 overflow-y-auto" data-auth-modal-target="signinModal">
  <div class="flex min-h-screen items-center justify-center p-4">
    
    <div class="fixed inset-0 bg-black/80 transition-opacity" data-action="click->auth-modal#close"></div>
    
    
    <div class="relative bg-white dark:bg-black rounded-2xl w-full max-w-md p-8 shadow-2xl">
      
      <button data-action="click->auth-modal#close" class="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>

<div class="flex justify-center mb-6">
          <img alt="Lightnews" class="logo-light h-12 w-12" src="/assets/lightnews_black-993b5cbd.png" />
          <img alt="Lightnews" class="logo-dark h-12 w-12" src="/assets/lightnews-f13a19bd.png" />
      </div>

<h2 class="text-black dark:text-white text-3xl font-bold text-center mb-6">Sign in to Lightnews</h2>

<div class="mb-6">
        <a class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600" data-turbo="false" href="/auth/bluesky/start">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.038.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 01-.415-.056c.14.018.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z" fill="#1185fe"/>
          </svg>
          Continue with Bluesky
</a>      </div>

<div class="space-y-3 mb-6">

<button class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
            <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
            <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
          </svg>
          Continue with Google
        </button>

<button class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
          </svg>
          Continue with Apple
        </button>
      </div>

<div class="relative my-6">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-700"></div>
        </div>
      </div>

<form class="space-y-4">
        <div class="mt-10">
          <label for="signin-email" class="block text-black dark:text-white font-semibold text-sm mb-2">Email or username</label>
          <input 
            type="text" 
            id="signin-email" 
            placeholder="Email or username"
            class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
          />
        </div>

<button type="submit" class="w-full btn btn-primary py-3 font-semibold">
          Continue
        </button>
      </form>

<div class="mt-8 text-center">
        <p class="text-gray-600 dark:text-gray-400 mb-2">Don't have an account?</p>
        <button data-action="click->auth-modal#switchToSignup" class="text-blue-600 dark:text-white font-semibold underline hover:text-blue-500 transition-colors">
          Sign up for Lightnews
        </button>
      </div>
    </div>
  </div>
</div>

<div id="signup-modal" class="hidden fixed inset-0 z-50 overflow-y-auto" data-auth-modal-target="signupModal">
  <div class="flex min-h-screen items-center justify-center p-4">
    
    <div class="fixed inset-0 bg-black/80 transition-opacity" data-action="click->auth-modal#close"></div>
    
    
    <div class="relative bg-white dark:bg-black rounded-2xl w-full max-w-md p-8 shadow-2xl">
      
      <button data-action="click->auth-modal#close" class="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>

<div class="flex justify-center mb-6">
          <img alt="Lightnews" class="logo-light h-12 w-12" src="/assets/lightnews_black-993b5cbd.png" />
          <img alt="Lightnews" class="logo-dark h-12 w-12" src="/assets/lightnews-f13a19bd.png" />
      </div>

<h2 class="text-black dark:text-white text-3xl font-bold text-center mb-6">Sign up to start reading</h2>

<div class="mb-6">
        <a class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600" data-turbo="false" href="/auth/bluesky/start">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.038.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 01-.415-.056c.14.018.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z" fill="#1185fe"/>
          </svg>
          Sign up with Bluesky
</a>      </div>

<div class="relative my-4">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
        </div>
        <div class="relative flex justify-center">
          <span class="bg-white dark:bg-black px-3 text-sm text-gray-600 dark:text-gray-300">or</span>
        </div>
      </div>

<form class="space-y-4 mt-2">
        <div>
          <label for="signup-email" class="block text-black dark:text-white font-semibold text-sm mt-2 mb-2">Email address</label>
          <input 
            type="email" 
            id="signup-email" 
            placeholder="name@domain.com"
            class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
          />
        </div>

<div class="relative my-6">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-700"></div>
        </div>
        <div class="relative flex justify-center">
          <span class="bg-white dark:bg-black px-4 text-black dark:text-white text-sm">or</span>
        </div>
      </div>

<div class="space-y-3 mb-6">
        
        <button class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
            <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
            <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
          </svg>
          Sign up with Google
        </button>

<button class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
          </svg>
          Sign up with Apple
        </button>
      </div>

<div class="mt-8 text-center">
        <p class="text-gray-600 dark:text-gray-400 mb-2">Already have an account?</p>
        <button data-action="click->auth-modal#switchToSignin" class="text-blue-600 dark:text-white font-semibold underline hover:text-blue-500 transition-colors">
          Sign in
        </button>
      </div>
    </div>
  </div>
</div>

<div data-controller="modal" data-reply-modal="true" id="global-reply-modal"
     data-viewer-avatar-url=""
     data-viewer-display-name="">
  <div class="hidden fixed inset-0 z-50 overflow-y-auto" data-modal-target="panel" data-viewer-avatar-url="" data-viewer-display-name="">
    <div class="flex min-h-screen items-start justify-center pt-4 md:pt-20">
      
      <div class="fixed inset-0 bg-black/80 transition-opacity" data-action="click->modal#close"></div>

<div class="relative bg-[#1e3a5f] rounded-2xl w-full max-w-xl mx-4 shadow-2xl" data-action="click->modal#stop">
        
        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-600">
          <button type="button" class="text-blue-400 text-base font-medium" data-action="click->modal#close">Cancel</button>
          <button type="button" 
                  id="modal-reply-submit"
                  class="px-5 py-1.5 bg-blue-600 text-white rounded-full font-semibold hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed">
            Reply
          </button>
        </div>

<div class="px-4 py-3 border-b border-gray-600 modal-reply-preview">
          <div class="flex items-start gap-3">
            <img src="" alt="" class="modal-reply-author-avatar w-10 h-10 rounded-full flex-shrink-0 hidden">
            <div class="modal-reply-author-avatar-placeholder w-10 h-10 rounded-full bg-gray-300 flex-shrink-0"></div>
            <div class="flex-1 min-w-0">
              <div class="font-semibold text-white text-base modal-reply-author-name"> </div>
              <div class="text-gray-300 text-sm line-clamp-3 modal-reply-post-text"> </div>
            </div>
          </div>
        </div>

<div class="px-4 py-3">
          <div class="flex items-start gap-3">
            <img src="" alt="You" class="modal-viewer-avatar w-10 h-10 rounded-full flex-shrink-0 hidden">
            <div class="modal-viewer-avatar-placeholder w-10 h-10 rounded-full bg-gray-300 flex-shrink-0 "></div>
            <div class="flex-1 min-w-0">
              <textarea 
                id="modal-reply-text"
                placeholder="Write your reply"
                rows="8"
                maxlength="300"
                class="w-full px-0 py-2 bg-transparent text-white text-base placeholder-gray-400 resize-none focus:outline-none border-0"
                data-reply-uri=""
                data-reply-cid=""
                data-root-uri=""
                data-root-cid=""
                data-mode="reply"
                data-embed=""
              >

English

Add to Home Screen

Light up
your news

Add to Home Screen

Light upyour news

Connect Bluesky

Connect with Bluesky

Light up
your news