37 replies

1. Stargirl Bluesky moments later

   Sick!

   1. Zach Leatherman Bluesky 3 min later

      Thanks! 🙌🏻

2. Scott Jehl Bluesky 21 min later

   hey nice. I like how the element name definition is part of a static method. I forget, did you write anything up on that pattern yet?

   1. Zach Leatherman Bluesky 59 min later

      thanks! the last thing I wrote about custom element definition was this one www.zachleat.com/web/nodefine/

      1. Scott Jehl Bluesky 2 hr later

         nice! thanks friend

3. Ariel Salminen Bluesky 43 min later

   This is cool. I may just use this for something I am building

   1. Zach Leatherman Bluesky 1 hr later

      hey, thanks!! 🙌

4. Zach Leatherman Mastodon 1 hr later

   decoupled this one right out of 11ty’s new demo/playground component: https://neighborhood.11ty.dev/@11ty/114519676689929120

5. Zach Leatherman Bluesky 1 hr later

   Decoupled this one right out of @11ty.dev’s new demo/playground component: bsky.app/profile/11ty...

6. Lou Cyx Mastodon 2 hr later

   @zachleat FYI: I tested the demo on Safari for iOS and two things that look kinda weird:

   1. The line numbers are kinda laggy (almost looks like they are on a different framerate).
   2. It doesn't work well with the "overscroll" behavior.

   Here's a recording: https://i.imgur.com/BWASSxj.mp4

   1. Zach Leatherman Mastodon 2 hr later

      @loucyx thanks for testing! fair point about overscroll, I don’t think there is an `overscroll-behavior` value that makes sense for the component to add though — this seems more like an app-level option

      1. Lou Cyx Mastodon 2 hr later

         @zachleat yup. That's why I pointed it out as "odd", mainly because I would expect the line numbers to always be aligned with the lines. Those two things makes it feel "disconnected", but I'm guessing that's because the component is non-intrusive, so it adds the line numbers "next to" the lines, not "into" the lines.

         1. Zach Leatherman Mastodon 2 hr later

            @loucyx yeah — tradeoffs!

7. ☔ Jim Schofield 🌼 Bluesky 2 hr later

   Clicking on the demo I don't see it working! What happened? (Chrome on Android)

   1. Zach Leatherman Bluesky 3 hr later

      it’s working, the demo just clips when the behavior is unobtrusive. Sorry that isn’t more clear!

      1. ☔ Jim Schofield 🌼 Bluesky 5 hr later

         Got it. Carry on

         1. Zach Leatherman Bluesky 5 hr later

            I did push something to make it more obvious on small viewports! Has me thinking that maybe obtrusive should be the default, not sure

8. Private reply Mastodon 3 hr later
   1. Private reply Mastodon 3 hr later
9. bkardell Mastodon 20 hr later

   @zachleat I wondered if this was going to just * display inline and do a generated content "1" :)

   1. Zach Leatherman Mastodon 20 hr later

      @bkardell look, our line-based code coverage metrics have never been better!!

10. Dave Smart Bluesky 22 hr later

    This is really cool and super easy to implement. Thanks! Perfect thing for when you want a textarea, not a contenteditable div

    1. Zach Leatherman Bluesky 22 hr later

       ooh — nice use case!

11. Léonie Watson Mastodon 1 day later

    @zachleat This is timely because I've been looking into a challenge with a similar thing, the challenge being that screen readers can't/don't read the line numbers.

    Using your demos:
    https://www.dropbox.com/scl/fi/m0mo1daul01audkpssrly/Responses-to-questions.md?rlkey=3bbh9jiczxgndkp41lorm13lj&dl=0

    I *think your component may have the same challenge. Any ideas on how it might be solved?

    Full disclosure, I've been stumped so far!

    1. Zach Leatherman Mastodon 1 day later

       @tink yeah, you’re right — the numbers are aria-hidden. I could modify the component to have the line content embedded in the `<ul>` (but not visible) and hide the primary element from screen readers — that would be better for `<pre>` maybe but not textarea!

       1. Léonie Watson Mastodon 1 day later

          @zachleat That'd do nicely for the pre, you're right. I'm not even sure there is a solution for textareas though?

          1. Zach Leatherman Mastodon 2 days later

             @tink if content duplication isn’t an issue, it could be solved the same way but it would have some live region complexity to it!

             1. Léonie Watson Mastodon 2 days later

                @zachleat I wondered about a live region but kept introducing issues as fast as removing them 🥴

                If the line num is in the notification, the problem is timing and not having the notification and the s/reader speaking the line of code overspeak each other.

                If the line num and the line of code is in the notification, then duplication is the problem like you mentioned.

                ...

             2. Léonie Watson Mastodon 2 days later

                @zachleat
                AFAIK there's no way to temporarily stop the s/reader reading the line of code in the textarea when first navigated to (leaving the notification to do the job), and even if there was it'd likely make interacting with the textarea content after that too brittle to be viable.

                1. Zach Leatherman Mastodon 3 days later

                   @tink just to brainstorm, I wonder if it would be better to have a pre->textarea toggle that requires an opt-in for editing. that way the Viewer mode would be a <pre> (easier problem) and editing could re-sync the `<pre>` content

                   1. Léonie Watson Mastodon 3 days later

                      @zachleat Can you explain that a bit more? Not sure I quite understand.

                      1. Zach Leatherman Mastodon 3 days later

                         @tink well, there are two separate problems here right? One is a scenario in which the textarea is readonly-esque and you want to report the value with line numbers outside of editing. The other is reporting line numbers while a user is editing? I’m not even sure what the latter might look like? e.g. “Your cursor is on line 4, which has the following code:”?

                         1. Léonie Watson Mastodon 4 days later

                            @zachleat Yes, I think so. I'm guessing the readonly scenario is where the pre comes in? So could be fixed, perhaps, by unhiding the line numbers?

                         2. Léonie Watson Mastodon 4 days later

                            @zachleat The other scenario (when editing inside the textarea) is what the k'board shortcut to report the current line number *might be able to solve?

                            Lots of "ifs", "buts", and "maybes" in there though!

                   2. Léonie Watson Mastodon 3 days later

                      @zachleat Chatted about this with Craig and Joe (also from TetraLogical) and the idea of a shortcut that triggered a live region notification with the line number in came up.

                      No idea if the given line number could be determined in this case. The chosen shortcut would need to be exposed to s/reader users too, perhaps using aria-describedby on the textarea, and it'd need not to conflict with existing shortcuts (easier said than done), but it might just work... 🧐

12. André Ruffert Bluesky 28 days later

    Composition of web components. ✨

    codepen.io/andreruffert...

    1. Zach Leatherman Bluesky July 14, 2025

       *excellent demo* yes!!

       do one thing and do one thing well 🏆