Masthash

#preact

thomas 🌸
14 hours ago

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 ?

Andrew Wooldridge 🌱
3 days ago

#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

Cropped screenshot of the developer survey asking for "webframeworks and web technologies" worked with in the past year and interested in working with in the current/next year. The selected options here are React (both), Solid.js (next year), and "Other" where I put Preact, which I tend to use over React where possible (like Astro 🧡)
1 month ago

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

Komish
1 month ago

@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

Christopher Armstrong
1 month ago

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

Komish
1 month ago

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/

Komish
2 months ago

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

Ryan Atkinson
2 months ago

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.

Thomas Broyer
2 months ago

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

Thomas Broyer
2 months ago

@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

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.

manlycoffee
2 months ago

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

Sebastian Helzle
2 months ago

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

Doug Parker
2 months ago

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.

Jason Miller 🦊⚛️
3 months ago

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.

source code: https://gist.github.com/developit/4b5d583489e65561c4c1c5dfc4ce5e44
Anton 🌻 :fingers_trident:
3 months ago

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

Doug Parker
3 months ago

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.

Doug Parker
3 months ago

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!

Jason Miller 🦊⚛️
3 months ago

Weekend project: wifi-connected automatic surface water pump.

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

video of the pump setup detecting water level and pumping for 10 seconds until the water level returns back below a predetermined threshold.
0xC0DEC0DE07E7
3 months ago

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

Sebastian Helzle
3 months ago

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.

Sebastian Helzle
3 months ago

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

El Greco
3 months ago

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

#preact #signals @angular

Ben 🌹 :NERevs:
4 months ago

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

Ben 🌹 :NERevs:
4 months ago

#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?

kitsonk.meh
4 months ago

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

Ben 🌹 :NERevs:
4 months ago

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

Screenshot showing Ludum Dare 52's 4-day event (Friday to Monday) in Gnome Calendar. Also shows the rating period end date, and some details about pre-populated reminders.
More of the same
Philip
5 months ago

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! 🧙

IT News
5 months ago

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

Merri
5 months ago

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.

Peter Goes
5 months ago

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

T.J. Crowder
5 months ago

@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

Mike Melanson
6 months ago

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

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

NullVoxPopuli
6 months ago

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

Jason Miller 🦊⚛️
6 months ago

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

#preact #signals #javascript #js

import { signal, effect } from '@preact/signals-core';

// numeric cast:
const age = signal(34);
console.log(+age * 7); // in dog years

// string cast:
const name = signal('John');
console.log(`Hello ${name}.`);

effect(() => console.log(`${name} is ${age} years old.`));
age.value++; // logs "John is 35 years old."

@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.