Skip to main content
Image

r/solidjs


Giving HTML, Canvas Superpowers
Giving HTML, Canvas Superpowers

DOM rendering has been the main performance bottleneck for the web apps for years. I added 2 NEW JS APIs to Chromium so DOM rendering is no longer the bottleneck. Here's how it works:

  1. You can rasterize any divs, (literaly, precisely)

  2. You can freeze/lock rasterization of some divs (contain: x, but stronger)

https://github.com/yeargun/chromium5/pull/1 only 355 LOC change, 2 hours(compilation), composer2

Lots of dom nodes you have?

  1. Rasterize the complex, heavy dom, and <img src="" /> it

  2. Detach the dom node from the body.

  3. Keep going

It's figma like performance, but HTML.

===

You might ask, why hasn't such a capability existed for the web since day 1? The answer is security.

But I always questioned that. I always thinked that such capabilities must be available permission based, somehow. Just like native apps. (I know there are lots of illiterate users that can not understand the consequences. So basically, some apps could get registered/verified by Chrome/Mozzilla/respectable other browser people, for having such capabilities)

That being said, I don't have enough time & resources to invest my time for this project right now. But it's trivial trivial with humongous benefits. My goal is to light a spark on some people to either fund the project, or pr into this project.

This is how Electron apps and the web should evolve—more powerful JavaScript APIs, with permission based extra security primitives.

Again, if you think you can't write C/C++ thats a shame. Go and edit the source code yourself, for your projects' needs, if you are tryhard enough.

I'm wishing some things to change for web.

I am also experimenting with these new APIs and features in my own document/pdf/pptx editor at https://eddocu.com. Loved the performance gains at Eddocu's electron app so far :D

--

Any feedback, thoughts and knowledge share is welcomed.


The road trip you have been dreaming of starts at the Honda Spring Event with a new fuel-efficient Honda.
media poster


Stop bloating your SolidJS app with massive JSON translation files
Stop bloating your SolidJS app with massive JSON translation files

I used to look at what i18n solutions were recommended to internationalize a Solid app

And here's what I found:
- solid-i18n is lightweight but requires manual effort to split and lazy-load dictionaries as an app scales
- i18next provides more features but adds significant runtime overhead

Because both are quite hard to maintain, they can easily lead to massive json processing within components and a crazy bundle size sent to the client on each request

React and other frameworks used to have the same issue with i18n solutions: too much focus on features, but not enough on code optimization. So I designed Intlayer to automate these optimizations. It namespaces content by default, so you only load what is necessary for the current view

I also want to introduce solid-intlayer for Solid apps.

In a few points:
- Architecture: Declare content anywhere in your project, either next to components or in a central location
- Compiler: CLI / vite plugin or vscode extension to automate the extraction of your content for existing app
- Loading: Supports both static and dynamic loading depending on requirements (performance / SPA vs multi-page)
- Pre-processing: Connects components directly to their specific content to avoid parsing large JSON files at runtime
- Visual editor + CMS: Share your app management with non-developers

Resources:
Vite and Solid app example: https://intlayer.org/doc/environment/vite-and-solid
TanStack Start app example: https://intlayer.org/doc/environment/tanstack-start
GitHub: https://github.com/aymericzip/intlayer

I would be really happy to get your thoughts about it