#preact — Public Fediverse posts

@ryan I've mainly used #Angular at work for years now, but only recently got into building stuff with #React. With all the CVEs lately, I've considered just using #Preact in the future since I usually just build small web apps for myself 🤔 I do like the reactive approach of React and even the Angular team seems to copy the reactive part by introducing signals etc. these days.

TokenToad: как я сделал Chrome-расширение, чтобы перестать удивляться счетам за AI

Расходы на AI API копятся незаметно: сессия Claude Code тут, batch к GPT-5 там — и к концу месяца биллинг удивляет. Собрал бесплатное Chrome-расширение, которое показывает траты Anthropic, OpenAI и Gemini в реальном времени прямо в badge браузера.

https://habr.com/ru/articles/1031890/

#chrome_extension #ai_api #openai #anthropic #claude #расходы_api #токены #биллинг #preact #vite

TokenToad: как я сделал Chrome-расширение, чтобы перестать удивляться счетам за AI

Расходы на AI API копятся незаметно: сессия Claude Code тут, batch к GPT-5 там — и к концу месяца биллинг удивляет. Собрал бесплатное Chrome-расширение, которое показывает траты Anthropic, OpenAI и Gemini в реальном времени прямо в badge браузера.

https://habr.com/ru/articles/1031890/

#chrome_extension #ai_api #openai #anthropic #claude #расходы_api #токены #биллинг #preact #vite

TokenToad: как я сделал Chrome-расширение, чтобы перестать удивляться счетам за AI

Расходы на AI API копятся незаметно: сессия Claude Code тут, batch к GPT-5 там — и к концу месяца биллинг удивляет. Собрал бесплатное Chrome-расширение, которое показывает траты Anthropic, OpenAI и Gemini в реальном времени прямо в badge браузера.

https://habr.com/ru/articles/1031890/

#chrome_extension #ai_api #openai #anthropic #claude #расходы_api #токены #биллинг #preact #vite

TokenToad: как я сделал Chrome-расширение, чтобы перестать удивляться счетам за AI

Расходы на AI API копятся незаметно: сессия Claude Code тут, batch к GPT-5 там — и к концу месяца биллинг удивляет. Собрал бесплатное Chrome-расширение, которое показывает траты Anthropic, OpenAI и Gemini в реальном времени прямо в badge браузера.

https://habr.com/ru/articles/1031890/

#chrome_extension #ai_api #openai #anthropic #claude #расходы_api #токены #биллинг #preact #vite

#Development #Explainers
Signals, the push-pull based algorithm · How push-pull powers modern reactive frameworks https://ilo.im/16blr0

_____
#Signals #Frameworks #Angular #Preact #Solid #Svelte #Vue #WebDev #Frontend #JavaScript

Reactive Route — новый роутер для разных фреймворков и реактивных систем в 2 КБ

Я не OpenSource разработчик, но за пару десятков лет написал под сотню enterprise-level библиотек, которые остаются в рабочем контуре, дорабатываются под каждый проект и адаптируются к новым технологиям. Большого смысла выходить в OSS не было, кроме как для упрощения обучения коллег и единого места хранения документации. Но и желание помогать другим и делиться выстраданными подходами, экспертизой и конкретным кодом мне не чуждо - сегодня поможешь ты, завтра - тебе. Через полгода подготовки и адаптации к OpenSource (сам использую и дорабатываю около 8 лет) в свет выходит одна из библиотек моего рабочего контура - Reactive Route . Так как я работаю с проектами на разных стеках, стараюсь писать код максимально framework-agnostic - независимыми слоями, которые можно заменить или переписать, не трогая остальной код проекта. А к фреймворкам и библиотекам для работы с состоянием они подключаются с помощью легковесных адаптеров, сохраняя синтаксис работы. Конкретно для Reactive Route выложил набор готовых адаптеров в комбинациях, которые сейчас чаще всего использую: - React + MobX / Observable - Preact (no compat) + MobX / Observable - Solid.js + нативная реактивность / MobX / Observable - Vue + нативная реактивность В одном npm-пакете - строгая TS-типизация, SSR / MPA / no-JS / Widget режимы и тщательно протестированная отказоустойчивость. В статье не буду пересказывать документацию на русском и английском , а поговорю скорее про общие принципы качества, использование ИИ в разработке и почему многие библиотеки раздуваются, не успев даже стабилизировать ядро. Читать

https://habr.com/ru/articles/1010012/

#react #vue #solid #preact #router #routing

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?

Aaaaand... The one-man-band has got a new #website built with #astro and #preact.

https://www.badrevision.com/

#music #punkrock

bing! And that's what using #preact gets you*

*conditions apply

Okay #frontend folks:

I wrote UIs before React. I leaned into React hard early on, because it matched my mental model for UIs. I don't want to do React anymore.

**In your opinion what's the next best direction for building UIs?**

My goal is to simplify the process of writing and managing accessible interactive components with as little overhead as possible.

Boosts and wildly unpopular opinions welcome.

#react #vue #preact #webcomponents #svelte

The high freshmen highschool kiddo's took the #PreACT last semester and received their scores this week.

One of them, who thinks he's not as intelligent as he actually is (compares himself to his twin....) did better then average and had some surprising strengths.

The other one scored the second highest in the school.

We are proud of them both! 🤘

Preact 11 Beta Introduces Hydration 2.0, Default Ref Forwarding, and Modernized Bundling, by @infoq.com:

https://www.infoq.com/news/2025/09/preact-11-beta/

#preact

Uhhh..... #Preact 11 will bring some nice features:

https://www.infoq.com/news/2025/09/preact-11-beta/

#javascript #react

Web Development for Beginners: Frontend Frameworks, by @rauschma:

https://2ality.com/2025/09/frontend-frameworks.html

#frameworks #javascript #preact

@rauschma it's been a while since I wrote about it, but I've used buildless #preact for quite a bunch of cool things over the years (and still do) 😎

Feel free to have a look at https://ttntm.me/blog/buildless-preact-starter/ and https://ttntm.me/blog/building-a-data-viewer-with-preact/ if you're curious

Refactored a Build Pipeline and used esbuild instead of webpack and replaced #react with #preact.

As a result of all the refactoring, the codebase is modernised and just 38% of the bundle size what it was previously. Even the non-minified bundle is smaller than before.

My esteemed followers, you have posted a total of 375,809 statuses to the #fediverse. 22% of you have posted in the last 24h. You are a chatty bunch! ;-)

Check out my new #sideproject: *fedi-followers*. A privacy-friendly fediverse #followers explorer as #localonly #staticwebapp, decentrally hosted on the #ipfs. See who's actually following (and unfollowing) you over time and much more.

https://fedi--followers-data0-one.ipns.dweb.link/

#decentralization #mastodev #esmodules #importmaps #nobuild #indexeddb #preact

I've built a thing.

Sometimes my follower count seemingly fluctuates at random. To understand why, I dug into the #MastodonAPI and created "fedi-followers":

A privacy-friendly #fediverse #followers explorer as local-only static web app, decentrally hosted on the #ipfs. See who's actually following (and unfollowing) you over time and much more.

https://fedi--followers-data0-one.ipns.dweb.link/

#mastodev #javascript #webapp #staticwebapp #nobuild #esmodules #importmaps #indexeddb #preact #htm

@emmanueltouzery A year ago I took a risk and started building a big-ish app with #Preact where I would have otherwise used #React. So far it's going great. It also encouraged everyone to use much less external dependencies and build out more stuff themselves which in turn makes maintenance much easier and the whole app more future-proof. And it turned out the `compat` module needs to be used much less than originally thought.

Even though I'm a backend developer I've got to keep abreast of some frontend stuff so that I can lend my general developer brain to designing or advising or fixing things wherever it happens, and it looks like I've now got to get up to speed on #Preact and #TailWind and #WebPack for the next phase of work. That'll keep me busy for a bit.

@davidshq I've built many such applications over the years. The ones built with #vue are still quite easy to maintain, even 5+ years later - Vue 3 + #typescipt + #vite is a great stack to work with.

If you must JSX, then use #preact. It's not a bad choice either, but maintaining the hook soup isn't fun in the long run.

@Isabella_uy Do you know if #Preact Signals + #React is a good idea?

💻 Supported development environments:
* Complete support for #Chrome #Firefox and #Edge browsers
* Built-in compatibility with modern frameworks including #React #Vue #Svelte and #Preact
* Seamless integration with ESNext features and Web Standards

🚀 Quick start features:

#Development #Techniques
Managing reactive state using custom elements · Signals work great in custom elements too https://ilo.im/160x7y

_____
#Signals #WebComponents #CustomElements #Framework #Preact #WebDev #Frontend #DOM #HTML #JavaScript

If you are migrating your code from #preact to #svelte using #cursorai be sure to think through svelte’s concepts (like stores & reactivity) rather than just migrating code from one to another.

@aoristdual I'd probably look for something that doesn't need another toolchain (i.e. compilation) to keep things as simple as possible. Using #preact as a native es module together with #htm to write #jsx-style template tags for example.

https://preactjs.com/guide/v10/getting-started/#alternatives-to-jsx

An SSR Performance Showdown

🔍 Comprehensive #SSR Performance Testing:
• Test setup: 2398 div elements spiral rendering on #NodeJS v22, #M1Mac with 8GB RAM

📊 Performance Rankings (requests/second):
• #fastifyhtml: 1088 (baseline templating)
• #Vue: 1028 (best full-featured performance)
• #Svelte5: 968 (pre-release version)
• #SolidJS: 907 (impacted by hydration IDs)
• #Preact: 717 (lightweight alternative)
• #React19: 572 (RC version)

🛠️ Testing Environment:
• Built using #Fastify and @fastify/vite
• Production builds tested
• Consistent styling and template implementations
• No client-side reactivity features

💡 Key Findings:
• #Vue and #Svelte offer best balance of performance and ecosystem maturity
• Hydration markers impact performance (demonstrated in #SolidJS)
• Simple templating (#fastifyhtml) outperforms full frameworks

Source: https://blog.platformatic.dev/ssr-performance-showdown

Why don't we have scoped styles in Preact natively?

#preact #freshjs

I've already regretted going down the rabbit hole of trying to find a nice, simple #Preact/ #Vue #dashboard #template that doesn't require a gazillion niche #npm invocations. All I wanted was a nice #vanilla #javascript and #css starting point…

#Development #Reviews
Things you forgot (or never knew) because of React · “The world which crowned React king no longer exists.” https://ilo.im/14uklm

_____
#WebDev #Frontend #Frameworks #Libraries #React #Astro #Fresh #Qwik #Preact #Solid #Svelte #Vue

#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

[Перевод] WordPress Interactivity API: Подробное объяснение

WordPress Interactivity - это относительно новый API, который позволяет создавать декларативный фронтенд в WordPress нативно. Декларативный? Да, да, он использует тот же принцип, что React и Vue. Только тут под капотом Preact и собственные директивы. И конечно куда же без SSR, который здесь идет из коробки. Звучит интересно? Давайте разбираться вместе.

https://habr.com/ru/articles/819149/

#WordPress_Interactivity_API #WordPress #Interactivity_API #reactivity #declarative #preact #Gutenberg #imperative

@angelmunoz Maybe #htm? I think you can use that on the server like regular #Preact.

https://github.com/developit/htm

@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

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.

#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

It's cool that #Lit is integrating with #Signals.

It feels like we've been circling around this design pattern for decades; they've been called Observables, Pub/Sub, State, Context, etc.

STOKED to hear that there's discussion around standardizing and adding Signals to the #webPlatform!

https://www.youtube.com/live/ri9FEl_hRTc?si=-oztbFGgLG0f9aXJ&t=1636

#webDev #lit #litHTML #litElement #buildWithLit #javaScript #web #react #preact #js #reactjs

hard time imagining it's a common stance. I don't think it's wrong, but it definitely goes against conventional wisdom.
4. Vanilla's dominance aside, the other three seem fairly explainable by popularity. #vue is a very beloved framework with the explicit goal of working well outside of a build step, so it doesn't seem crazy that it came in second place. #preact is generally more popular than #litelement, but I'm guessing most of those NPM installs are still using build tools. (to be continued)

is so unthinkable for an SPA that I would pretty much always want to use some sort of third party tool. #litelement is my personal favorite, but I'm looking forward to trying #preact someday.
3. I wonder if Mastodon introduces a bit of a sample skew. The fact that you're signed up for something using ActivityPub suggests some willingness to go against the proprietary grain for something more interoperable and independent. Perhaps that's why Vanilla won out—again, I just have a (to be continued)

If you were building an SPA with no build step, which framework would you use?

Comment if you don't see your choice. Boosts welcome!

#javascript #reactjs #preactjs #litelement #js #react #preact

“React Is Not Modern Web Development”

@jaredwhite’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

I built a little public API where you can get random words, IDs, or numbers! https://rnd.bgenc.dev/

This was a cool opportunity to learn #GoLang, it's using #GoFiber in the backend. The website demo UI uses #Preact with #TailwindCSS and #DaisyUI, built with #Vite, all deployed via #Kamal & #Tailscale.

I'm not sure that I'm in love with Go, but I can't say it's not productive. Preact is awesome and I am now obsessed with Preact signals.

Has anyone here switched a codebase from React to Preact?

I found switching the libraries themselves straightforward, but updating the test suite from React Testing Library to Preact Testing Library has me stumped - tests failing for reasons that are mysterious to me. At this point I'm keen to find anyone else who's attempted the same thing to compare notes...

#Preact #React #TestingLibrary

Svelte 3 is out, and it looks really great—they've done a great job building a much lighter weight alternative to #react!
https://svelte.dev/blog/svelte-3-rethinking-reactivity

Between #svelte 3, #preact 10, and #Dodrio (the #rust/WASM alternative to Preact), it's starting to look like a golden age for lightweight front-end web apps.

…now if only everyone still building bloated apps with Facebook's framework will get the memo :D

@nolan
Do you have any thoughts on Svelte 3? I know Pinafore is built with Svelte

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

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.

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.

preact + signals + HTML Drag and Drop API is pretty clean.

🐕 demo: https://2gtlk9.csb.app

✍️ code: https://codesandbox.io/s/preact-signals-dnd-2gtlk9?file=/src/index.tsx

#webdev #preact #preactjs #signals