Day 2 of learning #React with #bobZiroll and I'm liking it. Today, he's telling me all about #JSX. Interesting concept.
#scrimba
#webDevelopment
#frontEnd
#codeNewbie

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.

Reading ‘Why Tailwind CSS Won’ and was caught off-guard by this comment from Matt Rickard “few developers are writing HTML (instead, they are writing JSX or TSX).” What do you write mostly?

#tailwind #html #jsx #tsx

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

A good overview of changes discussed at #W3C and #TC39 related to #WebComponents :

https://eisenbergeffect.medium.com/the-future-of-native-html-templating-and-data-binding-5f3e52fda259

We may even get native #Signals in #JavaScript !

I hope they get a better syntax for templates this time. IMHO directives or custom mini-languages introduce unnecessary complexity with [often] limited capabilities. Embedded JS should be used one way (#JSX) or another.

Sadly, #javascript has no switch expressions, but at least when working with #jsx in #react you can use "useMemo" to "fake" it.

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?

React JSX Tutorial

https://happycoding.io/tutorials/javascript/react-jsx

#tutorial #javascript #react #jsx

#React, #jsx, #typescript and useState is pretty fun and clean! Much better than #vue3.

#javascript #webdev

@davatron5000 @collinsworth This is an interesting read, though I wonder if this has less to do with compile steps and more to do with authoring format?

You talk about vendor lock-in for the compiler, but I feel the lock-in has more to do with the way you are authoring code. That anything inside a .vue or .svelte file is inherently coupled to those frameworks and is "more locked-in" than something like #Lit. That seems independent of whether or not a compiler is being run.

For example, how would you feel if #Vue or #Svelte shipped your raw templates and interpreted them at runtime? Would that be less locked-in, even though you're writing the same code? What about if Lit *required* a compiler, but otherwise was authored the same way?

I personally always disliked frameworks that fork the #JavaScript language to achieve their ends (ex. framework-specific file extensions or #JSX). I think you're describing a very similar emotional reaction I feel to those FWs, I wonder if it's the same?

@emilis you're welcome! Try to find help! There is a way out of the #react and #jsx sect! You can do it! 😉

@lea @codepen
....or, you could just use template strings like a normal, healthy #javascript developer that hates #jsx because it's an abomination 😉

дэн on Twitter: "after the mess of early PHP code, much of the world has moved to “separating” view and controller. view templates in separate files, logic separately. but this is not what happened at FB. there, XHP fixed that. XHP is like JSX + React component model, but for PHP/Hack." / Twitter - https://twitter.com/dan_abramov/status/1648830869304426500

#webdev #php #xhp #jsx #react

@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

#Idea: A well-known global type like `HTMLElementTagNameMap`, but for attribute definitions. This could be used in tools like #JSX to automatically type check their rendered output and make sure they are using #WebComponents correctly.

Gets tricky with attributes vs properties though. In client side rendered use cases, you want both. But in SSR use cases you only want attributes.

@developit Could the error handling be done in some kind of dev mode? I know #Angular and #Lit both have the concept of "dev mode" for additional validation.

Personally I like the strict #XML approach, I just didn't realize #JSX was that strict (it's a new experience for me), and figuring that out took a solid 45 minutes of debugging which an error message would have cut down to 1.

Apparently #Preact (or #JSX / #VDom) cannot directly render comments: https://github.com/preactjs/preact/issues/1469#issuecomment-477510098

I get why that's not super useful in a client-side context, but particularly for server-side rendering use cases I would expect to be able to render comments. I would expect to be able to render any arbitrary DOM structure, but I guess that's not possible out of the box?

Not sure if there any workarounds to render comments in Preact. I'm not immediately able to find anything, might be a challenge to work around.

I just started playing around with #Preact #SSR with #htm and the first thing I did was render the classic:

```
render(html`
<!DOCTYPE html>
<html>
<head>
<title>Preact</title>
<meta charset="utf8">
</head>
<body>
<h2>Hello, World!</h2>
</body>
</html>
`)
```

And this intuitively output:

```
html
<head>
<title>Preact</title>
<meta charset="utf8" >
<body>
<h2>Hello, World!</h2>
</body>
</head>
```

Lolwat?
* `<!DOCTYPE html>` is gone.
* `<html>` turned into `html` and lost its close tag.
* `<body>` got moved inside `<head>`.

#WTF

Apparently you can't output a doctype at all (https://github.com/preactjs/preact-render-to-string/issues/201) and the `<meta>` tag is not self-closing in #JSX.

I'm willing to accept those constraints, but this is an utter failure of DX IMHO. If my template is wrong, TELL ME! Don't just generate what's effectively garbage for seemingly no reason. There's no obviously logical path from "bad output" to "the mistake in my code". Error messages, please!

The GraphicalEmoji hack

https://xeiaso.net/blog/GraphicalEmoji

#cursed #JavaScript #JSX #fontRendering #dearGodHelpMe

And why am I in Dallas on this spring-like morning? To try out the #Starlink inflight WiFi on a #JSX regional jet--that carrier is hosting a media day at its DAL facility to show off the service. (JSX covered flights and lodging for me and other out-of-town journalists.)