#preact

I think I need to fork (https://github.com/preactjs/preact-render-to-string/issues) [#preact] and get an return value that also includes a list of all elements used, specifically hyphenated web-components. Then I can conditionally add the the #webcomponent dependency to the page. (this is for a #deno project)

cc thoughts @marvinh ?

#javascript framework lighter weight than #preact and great for hobby projects #js https://vanjs.org/

eslint config is ready #ESLint 9 now :)

Got a lot of changes, mainly that configs now come as a configure() function. #Preact and the jsx runtime are now simple boolean options, my opinionated strict rules are now optional (for the most part) and I documented a workaround for __dirname in esm configs in the #TypeScript section of the README

https://github.com/foxkit-js/eslint-config-foxkit

Currently filling out the #stackoverflow developer survey, but couldn't find #Preact in the list.
Also cropped out most of the list here, I also selected Next.js and #node in addition to what's pictured and #jQuery that I did briefly do something with last year... jQuery never dies lol

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

ok I finally read up on #SolidJS and eventually found @preact/signals-react, which basically implement this idea in a much better way. #preact #react

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.

Here's a Connect 4 demo with Preact signals and Lit, based on @jaffathecake's one in Preact (https://piaille.fr/@jaffathecake@mastodon.social/110111677805867133). Zero update after the first render. All changes are direct-to-DOM.

Most of the code is copied from Jake's demo; I added a small Lit directive to achieve the direct-to-DOM that's integrated into Preact.

https://lit.dev/playground/#gist=a95902c8db543d453a66839277052502

/poke @justinfagnani

#Preact #buildWithLit

@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

WP's upcoming interactivity API is built on Preact + Signals:

https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/#faq

#preact #wordpress

I mean I'd make my own router but no one's gonna use it so what's the point

Got the nesting to work but this is slow as all-heck. #Preact-Router is so much faster. Too bad you can't nest routes in it properly.

An old meme that I found on my desktop #frontend #javascript #css #react #solidjs #preact

#Signals are just the reactivity model from #Solid, #MobX, #Ember, #Knockout, et al. It pushes a notification with an #observable-like mechanism that something has changed, there’s a dependency graph (implicit or explicit) that is notified. Then, it schedules a pull to calculate values. #ReactJS #Preact #javaScript #webDev #frontend

Today I released the beta version of my new #NeosCMS plugin: a commandbar for the Neos backend!

It gives you a ton of functionality at your fingertips 🚀

Check out my introduction video https://ooo.mmhmm.app/watch/z_g8nB9gA9pdHBgWbjRYXK

And the repo https://github.com/Sebobo/Shel.Neos.CommandBar

Made with #react & #preact & #TypeScript

Released a new version of #rules_prerender with full #Preact support built-in.

https://github.com/dgp1130/rules_prerender/releases/tag/releases%2F0.0.27

Getting closer and closer to something I'd be willing to call a 1.0.0!

Biggest open issue is still actually writing all the documentation, though I keep getting distracted by other features.

This is how I build apps now:

Standalone model(s) built with #Preact #Signals so they're implicitly reactive.

Components simply reference the model instance from context and access its (reactive) properties.

Testing the model without components is fast and easy. Testing the components a with mocked model is fast and easy.

Tried out #Preact and its signals on “Link a device” page. Not sure how “everything can modify signal’s value” will scale on a bigger project, but here it’s so much nicer than #React’s state hooks and effects

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!

Weekend project: wifi-connected automatic surface water pump.

It's powered by #Preact Signals! (running on the microcontroller!)

Seriously, I'm sitting here trying to learn #preact because learning async #rustlang and #sql weren't enough.

I also wrapped the module plugin inside a custom element which is easier with #Preact than with #React as events work without an additional dependency.

The component wrap helped a lot as the plugin is loaded inside all modules and this way is safe from outside Neos default styles and whatever styles people add to their own modules.

I now have several plugins for #NeosCMS that are built for the #React UI and also standalone in a plain backend module.

For my latest one I tried using #Preact for the standalone version reusing the same shared code with same aliases and after some hours of loosing hairs the result is quite good!

The standalone Preact bundle is ~55KB compared to ~160KB when being bundled with #React.

The UI plugin bundle with React provided externally is ~65KB.

The Preact version also performs better 🙂

:javascript:
Ok more Signals fever 😀

My friend @thomasreggi just told me to try deno fresh as it is a build free environment.

Interestingly version 1.1 offers jsx & preact signals out of the box and is a full stack web framework.

Now I will have to look into this.

https://deno.com/blog/fresh-1.1#preact-signals-support

#denofresh
#deno
#webdev
#signals
#preact

@surma @marvinh @developit
Should we call what is essentially a wrapped effect a "computed"? 🤔

#preact #signals @angular

Still #hiring a mid-level/early-senior #frontend (esp #react/ #preact and #typescript) engineer. IC role. Remote (continguous US), healthy culture, small team, good pay and benefits. https://www.linkedin.com/jobs/view/3441087155

#react / #preact devs: does the #eslint "exhaustive deps" rule make sense for useEffect? It doesn't seem like it does, to me. useEffect says "when these dependencies change, run this callback" and by nature of *any* dependency changing, the callback will be reinitialized, so it's not like if I only want it to run on X changing, but I reference Y, Y would be stale… right? Y in the new callback would still be up-to-date, wouldn't it?

Anyone familiar with #preact signals, is there a good pattern for handling DOM nodes, like useRef hook?

Updated my blog post on typing #React components with #TypeScript types and added the #Preact section :)

https://blog.mitsunee.com/post/typing-react-components

Another new instance means a new #introduction post.
I'm a full-stack web software engineer with a bias toward #frontend. I like to write in #golang and #typescript, & use #preact. I WFH here in Maine.
I like to use the internet to learn about #socialJustice and #leftism & encounter perspectives different from my own.
Big soccer fan, especially #MLS #NERevs #USMNT, but also QPR, Zvezda, Serbian NT.
Married into a family of Yugoslav expats & interested in Balkan culture etc.
Also like languages.

I started out my little iCal experiment by seeing if I could make #Zola (https://getzola.org 🦀) generate non-HTML files. Alas that was a dead end (short of doing it myself, but my 🦀-fu is limited).

So plan B: #Deno and #Fresh, plus the #NPM library ICS. 🍋

A couple hours later we had something I could import into Gnome Calendar (and theoretically other supported apps). Easy. I'm also a Typescript noob, but #VSCode is really quite handy.

Next comes deployment. #WebDev #Preact #JavaScript

Moved a project from #preact to #solidjs and love it! The size of the prod bulld has decreased by ~50% and the codebase has stayed almost the same! 🧙

PreAct, which sells near-field sensors for automakers, reels in $14M - (PreAct Photo)

PreAct, a Portland, Ore.-based startup that uses near-field sen... - https://www.geekwire.com/2023/preact-which-sells-near-field-sensors-for-automakers-reels-in-14m/ #autonomousvehicles #startups #funding #preact #lidar

So, I think I just wrote my first useReducer despite using #React hooks for a long time.

Of course I wrote it in a #Preact app. If I weren't so focused in just getting stuff done I might have tried signals.

It's 8 nights of #WebComponents tips, one for each night of #Hannukah.
🕳️ 🕯️ 🕯️ 🕯️ *🕯️* 🕯️ 🕯️🕯️🕯️

The Seleucid king Antiochus tried to impose a uniform Hellenistic culture on the Jews, but your organization doesn't need to suffer a front-end monoculture. Web components work everywhere #HTML does, so use them in your #CMS' templates, in your #Angular forms, in your #Vue or #Preact apps, or on performant and accessible web pages.

Write once, use everywhere.

Ow my, I love #signals in #javascript (#preact)!!

@developit

Quick question if I may:

I noticed that the body of `useSignal` is:

```
return useMemo(() => signal(value), []);
```

In React's docs, they make a point of saying `useMemo` isn't a semantic guarantee, just a performance optimization. Preact's `useMemo` docs say "...we can memoize the results of that computation and only recalculate it when one of the dependencies changes."

Does that mean Preact's `useMemo` provides a semantic guarantee?

TIA!

#Preact

#Interests

#oss #foss #servers #frameworks #typescript #javascript #deno #vr #ai #nocode #lowcode #solidjs #preact #web3 #astrojs #html #webcomponents #github #vscode #cli #opensource #coding #programmer #adamsavage #hasanabi #alanwatts #nyc #brooklyn #queens #astoria #graphicdesign #startups #sewing #cosplay #thriftstores #upcycling #hotyoga #yoga #meditation #tonglen #lojong #buddhism #espresso #coffee #socalism #maker #3dprinting #vr #quest2 #metaquest2 #starwars #marvel

#AlpineJS, #htmx #Preact - all essentially led by one person, I believe.

Would #tauri be considered minimalist and led by a group?

Nice #preact call-out from @paularmstrong

https://paularmstrong.dev/blog/2022/11/28/lessons-learned-how-i-would-rebuild-twitter-today/#:~:text=interesting%20alternative%20middle%2Dground%20candidate%20between%20React%20and%20Solid

This is so cool.

"Starbeam is Universal Reactivity

Starbeam is a library that allows you to write reactive code in a framework agnostic way. This means that you can write your code once, and use it with any framework that has a Starbeam renderer.

At the moment, Starbeam has renderers for React and Preact. We've also built a proof of concept renderer for Svelte and we're working on a Vue renderer."

https://www.starbeamjs.com/guides/universal-reactivity.html

#JavaScript #React #ReactJS #WebDev #Preact #WebDevelopment

Reminder: you can cast a Signal to unwrap its value without having to write `.value`.

#preact #signals #javascript #js

@aswin they sound promising.
I suspect you can use #preact I used it once in a professional project but that was 3 years ago.
Otherwise there is #solidJs
Technically #qwik has signals as well, #qwik is also a #reactive framework.