Quarter-baked #WebComponents #idea: `HTMLElementsTagNameAttrMap`.

This maps a given custom element tag name to its known attributes.

```
class MyComponent extends HTMLElement {
connectedCallback(): void {
console.log(`foo: ${this.getAttribute('foo')}`);
}
}
customElements.define('my-component', MyComponent);

declare global {
interface HTMLElementTagNameMap {
'my-component': MyComponent;
}
interface HTMLElementTagNameAttrMap {
// foo is a supported attribute.
'my-component': ['foo'];
}
}

const el = document.createElement('my-component');
el.setAttribute('foo', 'bar');
// ^ --- editor should be able to auto-complete / type-check `foo`.

// Same for #Preact
renderToString(<my-component foo="bar" />);
```

Playing a bit with #Preact / #JSX today and am feeling the pain of not having host elements. I've realized that because a "component" is really just a #VDOM template, there is no implicit contract around what it actually rendered.

As an arbitrary example, what if I want to set a style on a `<Foo />` component? What selector should I use for that style? I have no idea what `<Foo />` will actually generate, or even how many top-level elements it will output. The `Foo` component _must_ expose some kind of `className` or other API to provide this behavior, it's not implicit at all.

Maybe this is good because it provides stronger encapsulation. But it can also lead to bugs. If I render `<Header />` a `header` CSS selector is _probably_ right. But what if `<Header />` actually renders:

<div>
<header>...</header>
</div>

Then a `header` selector isn't actually the top-level element and my style could easily be wrong.

Just some idle thoughts about the lack of host elements.

Chris Coyier @chriscoyier presents some examples of using #JSX without React and talks about other flavors of JSX like @astro and even #Preact SSR:

https://thathtml.blog/2023/08/vanilla-jsx/

#WebDev #HTML

“React Is Not Modern Web Development”

@jaredcwhite’s personal thoughts on a great entry by @collinsworth into the growing body of work which details why greenfield #WebDev projects are better served by other frameworks…or none at all.

https://thathtml.blog/2023/08/react-is-not-modern/

#React #JavaScript #frameworks #Preact #Svelte #Vue #SolidJS #LitElement

@fogoplayer thanks, that seems really interesting. The current path I'm exploring is to use #preact and then expose the component as a custom element via their adapters, but so far those don't seem fully baked (e.g. can't easily set scoped styles, apparently some unresolved bugs around the order of when elements are defined).

One nice bit is that I only really need to export a couple of top level elements - everything internal can be normal preact components.

@steelman If I understood you correctly (my Polish is not very good), you could try #Preact :

```
$ npm create vite@latest your-project -- --template preact
$ cd your-project
$ npm i
$ npm run dev
```

@tristan I recommend #Preact .

My tombstone is gonna say “We couldn’t afford to pay him for not being a #React developer.”*

* I was never actually a React developer, I worked on two and a half projects using React, and the last one would have stayed #Preact if the only other developer we could find who was daft enough to sign a contract there had brought the cognitive skillz to the table to deal with the two or three minor API differences.

I guess they just weren’t #actuallyAutistic. 🤷‍♂️ https://neurodifferent.me/@loops/110782359652978742

@bigaston #Preact

Flirting with #Vue again. I haven't touched it for a handful of years so seeing the composition API is so nice. `ref` looks like #Preact signals and lifecycle hooks can be imported. Super intuitive!

Why don't some people like CSS-in-JS?

Is it because code written in CSS-in-JS don't allow you to take advantage of the "cascading" nature of CSS?

Is it because you can't take advantage of selectors?

Is it because there might be some compilation steps required when employing CSS-in-JS? And if compilation isn't used, there might be some render-time slowdown?

#css #javascript #jsx #react #solidjs #preact #cssinjs #webdevelopment?

Figured I'd do something useful with some of the GPS data I've been collecting on my recent walks so I spent a couple of hours yesterday putting together a small "walk journal" prototype using #preact #signals #leaflet.

Now to do some more walking.

I had a hard time finding good docs on integrating MobX State Tree with #preact, so I made them. https://paweljw.al/blog/2023/04/integrating-preact-with-mobx-state-tree/

This blog post is an excellent under-the-covers examination of the code that makes islands work in Fresh and how it compares to other modern frameworks including #Astro, #Marko &#Quik
#deno
#denofresh
#preact
#islandsarchitecture

Are you working with #javascript Import Maps instead of a bundler like #vite, and you want to use #Preact instead of #react? But you still want to use preact/compat to use react libraries but don't know how without said bundler?

Use the alias query param of esm.sh! Simply append ?alias=react:preact/compat to your react library of choice and enjoy all the benefits of preact with import maps.

e.g. https://esm.sh/react-image-crop@10.0.9?alias=react:preact/compat

@developit so I’ve got a mix of #jsx and #htm going in this project so I can get a feel for the differences.

For whatever reason, I can’t get the document formatting in vscode to get this even remotely close to look like it’s properly indented. Also missing Emmett completions (not sure if I would have that with jsx yet) and tag autoclosing.

Can’t tell if I’m missing something or my lit-html extension is misconfigured.

Otherwise it’s going great! #preact #preactjs #js #webdev

Alright, I'll give the #LabstackEcho framework a big thumbs up. It may not have the most stars, but its API is easy to wrap your head around.

I had initially planned to just use the net/http stdlib and #Golang templating to render everything out. But since dabbling with #Preact, I'm just moving the backend to be just a backend.

#LabstackEcho made that transition super fast.

https://echo.labstack.com/

After getting my hands dirty with #lit, I’m finding the docs to be a limiting factor for someone with very basic frontend knowlege. Concepts aren’t simplified enough to where I can hack my way through a simple interactive component.

I’ll hop into #preact next.

I’ll miss that html template string syntax though

#webdev #javascript #js

I'm making an ear training tool - https://earbetter.ryanatkn.com/ - source at https://github.com/ryanatkn/earbetter

feedback welcome, and I could use help designing the challenges, I'm not a musician

it's made with #svelte #SvelteKit #TypeScript and #preact #signals as the store library

I like the signals library a lot but it's a sharp tool that requires a bit more care than Svelte stores because its API is less explicit and more powerful. It's terse and fast and composes well. I'll keep using it to learn more.

@developit

Why is https://wpmovies.dev/ an SPA all the time?

Couldn't it switch to an SPA only when reading a video and be an MPA (benefiting from e.g. HTML streaming, native resource preloading/speculative loading) otherwise?

#WordPress #Preact #SPA #MPA