LorenzA's comments

On: HTML Attributes vs. DOM Properties

[LorenzA]

attr() can also be used to some degree https://developer.mozilla.org/en-US/docs/Web/CSS/attr

[runarberg → LorenzA]

The attr() function is actually much more powerful in the spec (perhaps one of my favorite part of unimplemented CSS). According to the spec you can supply the type of the function and use it as value (not just content as of now):

    <div data-background="lime">Red (but could be lime)</div>

    div {
      background: red;
    }

    div[data-background] {
      background: attr(data-background color, red);
    }

So according to the spec, you should be able to control the sizes, color, and even animation timings with (non-style) attributes.

In reality though, whenever I think I need this advanced attr() function, I usually just solve the issue using Custom Properties on the `style` attribute:

   <div style="--background: lime">

On: Show HN: See your current Spotify song in the menu...

[LorenzA]

the spotify app has a mini player that seems to do a similar thing https://community.spotify.com/t5/Community-Blog/Introducing-...

On: If Web Components are so great, why am I not using...

[LorenzA]

it sounds like the thing you are looking for are slots and they are supported in shadow DOM with the HTMLSlotElement

[kerkeslager → LorenzA]

No, because then the user of the custom element has to put slot attributes on the things they put in the tabs. Consider this:

    <tab-area>
      <tab- text='First'>
        ...arbitrary HTML that should work intuitively, i.e. be styled
        like the rest of the document.
      </tab->

      <tab- text='Second'>
        Note the lack of slot attributes on these tab elements. That's
        because we want this to behave like normal HTML where you
        can nest without having to worry about how tab-area was implemented.
        Why should we have to care that tab-area was implemented with
        templates/slots?
      </tab->

      <tab- text='Third'>
        There could be any number of these tabs so you can't put them
        into slots without some sort of late-generating the slots anyway.
      </tab->
    </tab-area>

We want this to render like a group of tabs where "First" and its body are visible, and tabs are peeking up from behind with the texts "Second" and "Third" but the content of those tabs isn't shown until you click the tab (at which point the content of "First" is hidden).

That's not achievable with slots.

In general, I haven't found a case where templates/slots are actually useful--it's a lot of work to create a bad interface.

[LorenzA → kerkeslager]

Most of the time you have the tab and the panel to display the content of the tab a super simple demo implementation of something like this https://web.dev/components-howto-tabs/

In regards of slots, they are a nice way to allow a user of you webcomponent to overwrite/replace parts of your component with something else. This is most of the time a more advanced feature and I find it quite nice to build headless components

[kerkeslager → LorenzA]

> Most of the time you have the tab and the panel to display the content of the tab a super simple demo implementation of something like this https://web.dev/components-howto-tabs/

That's exactly what I'm saying is bad. Why does the user of the howto-tabs have to type "slot='panel'" when that information is already communicated by the fact that it's a "howto-panel" inside a "howto-tabs"? This is a useless leaking of implementation details.

And that page just keeps going and going. Sure, some of that is because they're implementing a few neat features, but most of it is because slots are way overcomplicated for something that's actually easier to do without them.

[LorenzA → kerkeslager]

you can just have an unnamed slot. I'm probably missing something here haven't build a tabs thing in a long time. But just trying this out for a couple of minutes the thing you want seems to be possible. I didn't do any styling here and the code is just something I hacked down to test it. Where hn-tabs is your tab-area and hn-tab your tab-

   class HnTabs extends HTMLElement {
       constructor() {
           super();
           this._tabs = {}
           this.attachShadow({ mode: 'open' })
           const ul = document.createElement('ul')
           this.shadowRoot.appendChild(ul)
           const slot = document.createElement('slot')         
           this.shadowRoot.appendChild(slot)
           slot.addEventListener('slotchange', () => {
             ul.innerHTML = ''
             const tabs = Array.from(this.querySelectorAll('hn-
             if (!tabs.some((tab) => tab.hasAttribute('active')
               tabs[0].setAttribute('active', '')
             }
             tabs.forEach((tab) => {
               const li = document.createElement('li')
               li.innerText = tab.getAttribute('text')
               ul.appendChild(li)
               li.addEventListener('click', (e) => {
                 tabs.forEach((t) => t.removeAttribute('active'
                 tab.setAttribute('active', '')
               })
             })
           })
       }
   }
   customElements.define('hn-tabs', HnTabs);
   
   class HnTab extends HTMLElement {
       static get observedAttributes() {
         return ['active'];
       }
       constructor() {
           super()
           this.attachShadow({ mode: 'open' });
           this._slot = document.createElement('slot')         
           this.shadowRoot.appendChild(this._slot)
           this._slot.style.display = 'none'
           console.log(this.slot)
       }
       attributeChangedCallback() {
         this.#activeStatus()
       }
       connectedCallback() {
         this.#activeStatus()
       }
       #activeStatus(){
         const active = this.hasAttribute('active');
         this._slot.style.display = active ? 'block' : 'none'
       }
   }
   customElements.define('hn-tab', HnTab);

[kerkeslager → LorenzA]

When I have some time I'll play around with this: I'm certainly open to the idea that there's some stuff I don't know about slots. But I have a question: When you append the slot to the shadow root, doesn't that mean that you lose styling in the slot contents?

[LorenzA → kerkeslager]

no things inside slots keep the styling from the outside

[kerkeslager → LorenzA]

Hm, I stand by my comment that slots are overcomplicated, but that might actually make it worth it.

[kerkeslager → LorenzA]

Okay, I got around to trying this out, and that's cool. Thanks for explaining this.

[LorenzA → kerkeslager]

you are welcome happy to help.

[dannye → LorenzA]

Unless you are still in the IE world (which is challenging when using WCs), use one `append` instead of multiple `appendChild`

[dannye → kerkeslager]

use: slotAssignment: 'manual'

On: Joblint – Test tech job posts for issues

[LorenzA]

looks like a dead project last content change seems from 2016 https://github.com/rowanmanning/joblint/commits/master

On: We overestimate our short-term ability, but undere...

[LorenzA]

looks like a "fun" thing there are a couple other states that change the image that gets displayed.

Clicking up top on the dark mode to get "night own" or type the Konami Code to get Konami the other 2 cases seem to be disabled

On: Ask HN: Do you rewrite pull requests?

[LorenzA]

I find this an interesting concept. How do you do this in practice add a number to every comment and explain your system somewhere?

[otterley → LorenzA]

Yes, that’s right. Just a (1/10) or (8/10) at the end of my note.

On: Google Docs will now use canvas based rendering

[LorenzA]

in general a lot of dom-nodes can reduce performance and with canvas you have much more control over what and how things get rendered. I would assume this is also nothing new or "special" afaik google spreadsheets is using canvas for years under the hood with some dom for nicer ux

[zozbot234 → LorenzA]

"A lot of dom nodes" is not inherently problematic if you do not insist on twiddling them individually in a JS for-loop. Other than that, it's just HTML - and plain HTML/CSS rendering is blazing fast.

On: Shuffle — An online editor for busy developers

[LorenzA]

feels nice to play around with it. you can create really fast some mock up ideas.

found some bugs or maybe just something i found strange take it if you want it:>, (was just testing the demo)

* adding some components and clicking shuffle removes them for instance the form thing adding it -> clicking 2 times shuffle -> gone

* you check that the html is valid but the editor shows it only after you close and reopen it. used 'teams' removed the last section-tag in the html editor, clicked save -> looked the same -> closed -> opened -> removed tag was back (as it should)

[kemyd → LorenzA]

Thanks for reporting! We're checking both cases, and the fix will be deployed soon

On: Show HN: I made a site where you practice typing b...

[LorenzA]

this is a very nice idea and i like that i can read a book and improve my typing and my spelling at the same time :>

not sure if thats a good way to report a bug but:

one problem/bug i have. as a non native speaker i have my keyboard Layout as U.S International - PC. there is some build of characters involved in that layout for instance to type ä i press the "-key and then the a-key and it gets combined to ä but this means that if i just press the "-key i don't get " i need to press "-key + space but that doesn't seem to work here :<

[Octouroboros → LorenzA]

Hello! Key combos aren't super well supported at the moment. I'll make sure to get it fixed in a future update though. Thanks!

On: Show HN: ORM for TypeScript with no query-builder,...

[LorenzA]

the template syntax reminds me of an other postgres libary https://github.com/porsager/postgres