Forem: tinkerbaj

Why I Chose Datastar Over Alpine.js/HTMX For My Project

tinkerbaj — Thu, 20 Mar 2025 19:32:34 +0000

Why I Chose Datastar Over Alpine.js/HTMX For My Project

In recent years, developers have been embracing a more old-school approach to building websites, focusing on hypermedia-driven applications. This shift has brought some fantastic tools into the spotlight, and two that stand out are HTMX and Datastar.

HTMX makes server-side rendering more powerful by allowing you to send HTML fragments over the wire, reducing the need for complex JavaScript frameworks. Many developers pair HTMX with Alpine.js for client-side interactions, but after testing this stack myself, I found it wasn’t quite what I expected. While HTMX worked well, I encountered some strange glitches with Alpine.js that made me rethink my approach.

Discovering Datastar

That’s when I came across Datastar. It combines the power of HTMX and Alpine.js in just 14.4 KiB, making it an incredibly lightweight yet powerful alternative.

Unlike HTMX, which relies on AJAX for dynamic content updates, Datastar leverages Server-Sent Events (SSE) to keep the client updated in real-time. This approach feels much more fluid and efficient. It also introduces signals for state management, making it easier to track and react to data changes without the need for additional dependencies.

Another thing I love about Datastar is its built-in helper methods, which remind me of jQuery’s simplicity. One of my favorites so far is @toggleAll, which I recently used to build a combobox in my project.

Give It a Try!

If you’re interested in lightweight and reactive alternatives for building modern web apps, I highly recommend checking out the Datastar examples. There’s a lot to explore, and you might be surprised by how much you can achieve with just a few lines of code.

One of the coolest recent showcases shared in the Datastar Discord community is this real-time tanks game—a great demonstration of what’s possible with SSE and a smart state management approach.

Have you tried Datastar yet? Let me know your thoughts in the comments!

Job searching

tinkerbaj — Sun, 09 Apr 2023 02:57:36 +0000

When you are in desperate need of a job, what tactics do you use and where do you look for jobs?

Currently, I am searching on LinkedIn, Upwork, and Remoteok, but I haven't received any responses, and I feel hopeless. Do you have any advice for me?

Why I think TailwindCSS is overhyped

tinkerbaj — Sat, 25 Mar 2023 02:25:38 +0000

These days, I have been seeing a lot of posts promoting Tailwind and how amazing it is, etc. To be honest, I was thinking the same thing because I am not in love with design and TailwindCSS makes my life easier. But is it really true?

I started working on a big ecommerce website alone, without anyone to consult, and I chose Tailwind. I loved how it looked with the Indigo color, so I started working on it. It started out okay, and everything was nice, like my button:

<button class="bg-indigo-600 hover:bg-indigo-700 py-2 px-4 rounded-lg text-white font-sm leading-wide">Click me</button>

I continued to work and make the first and second components, and everything was good. But at some point, I got some partners to discuss the color scheme because our targets changed, and we decided to go with blue. Now all the indigo elements in multiple files (components) need to be converted to blue, but that's not all - elements with hover, active, ring, border, and all similar things need to be converted too. Instead of looking in the CSS and going to the .btn class, I needed to go to each component file and look for classes with indigo to switch them to blue.

What I learned is this: Don't follow the masses without using your brain.
I switched to beautiful Sass and with super simple tricks, got much better results with even better control over my style.

$r: 8px; $pc: #ff23ed; //primary color $pch: darken($pc, 5%); //primary color hover .btn { color: white; border-radius: calc($r * 1.5); background-color: $pc; &:hover { background-color: $pch; } }

With this kind of code, I can easily change the color (you don't need to declare variables in each component, you can have global ones). When you change $pc once, all your colors automatically adjust, even for the hover state. If you want to get a triad color scheme, it's easy:

$secolor: adjust-hue($pc, 120deg); $thcolor: adjust-hue($pc, -120deg);

It uses the color wheel with degrees. If your primary color is red, $secolor will be 0+120, which is equal to 120 and is green on the color wheel. $thcolor will be 0-120, which is 240 on the color wheel and is blue.

I still think tailwind is nice for small projects but if you plan to use it on big one think twice is it really smart move.

I think that's all for now. Thank you for reading, and if you have any questions, feel free to ask.