Web Development

Im investigating an idea i had about JSX for webcomponents after some experience with Lit.

Lit is a nice lightweight UI framework, but i didnt like that it was using class-based components.

Vue has a nice approach but i prefer working with the syntax that React uses. I find it more intuitive for debugging and deterministic rendering. I wondered if with webcomponents, i could create a UI framework that didnt need to be transpiled.

• Read the docs
• Checkout the code
• Storybook demo

(My intentions with this framework is to get to a reasonable level of stability, to then replace React on some of my existing projects.)

IMPORTANT: Im not trying to push "yet another ui framework", this is an investigation to see what is possible. You should not use this framework in your own code. It is not production-ready. It is intended for myself on my own projects. This project is far from finished. I am sharing because it might be interesting for someone. Feel free to reach out for clarity if you have any questions.

I'm currently building a small website as my online portfolio and blog, with some fun stuff like making it explorable as a side-scroller "game" (I gaven't enabled that functionality yet), and as part of documenting the process, I'm trying to write short blog posts that cover some of the tools and decisions I'm making along the way.

This post is about how I decided to write the site's content using Markdown in order to write using Obsidian, and how I then turn that Markdown code into clean, modern HTML "on the fly".

Please note that the site itself is still very much a work in progress.

VoidZero is excited to announce that we are joining Cloudflare. Vite, Vitest, Rolldown, Oxc, and Vite+ will remain open-source and MIT-licensed. Evan and the rest of the VoidZero team will continue to lead these projects, with Cloudflare fully committed to supporting our mission.

You can now import a file as a JavaScript string using the new text import attribute.

This feature is currently supported in Bun, Deno and Firefox Nightly.

Until fairly recently, there was no way to get an entire color scale live generated based on one color using vanilla CSS.

You could do something like it at build-time using SASS. Or you could do something like it “live” using JavaScript—but purely for demo/one-off purposes.

However, now that we have real CSS functions calculating color math in real-time, we have the ability set a single color in a stylesheet—and everything else will come along for the ride!

I recently decided to ditch my ancient WordPress portfolio and build a new site from scratch.

Because I wanted to show off a little bit, I decided I wanted to make it into a 2D side-scroller using Little.js. The issue was figuring out how I could keep the site accessible.

I just wrote the first blog post in a series on how I am making that very site.
The site is still a work in progress; but I felt this could interest people here. And it gives me a chance to test out the blog feature I just coded in.

One of the most common questions around animation performance is whether JS-based animations are slower than CSS-based ones. Should we always strive to use CSS transitions, or is it OK to use JavaScript animation libraries?

There’s a surprising amount of nuance to this question, and I think that the conventional wisdom isn’t quite right. In this post, we’re going to dig into this question and see the differences for ourselves!