Hacker News Reader

Comment by nzoschke | Hacker News Reader

Great read and interactive demo.

After a few years of dabbling with Flutter I just came back to the same conclusion: bet on HTML.

Astro / Tailwind / Daisy UI / Alpine.js makes it lovely to build an HTML site with a lot of simple SSR and a little bit of client side reactivity peppered about.

The result is simple sane HTML files that look and work great on desktop web browser and and mobile wrapped web view.

My app is basically static so it caches in a CDN, works offline, and view source makes it easy to debug.

View on HN

After trying a bunch of fancy frameworks and platforms I ended up doing exactly this - a static site with alpinejs and tailwind. It has been by far the best decision I've ever made. And the best thing is I'm confident any new dev will be able to pick up my 100 line build file and grok it in about 3min. No matter whether they're react, angular, PHP or python folks - it's dead simple and I love it.

Lately I've been doing raw html and css. No build. I just write the files. It's really easy. Yeah there's some duplicate code in the header but grep is not that hard to use.

My build system is cat!

Meow!

Now move to the next level and have no build system.

i am building sites with aurelia without a build system. there used to be a quick-start tutorial where you could just download an archive with aurelia ready to run. no serverside tools or build tools necessary at all. it even used to work loading the whole app via file://... back when browsers still trusted that. it no longer works only because of browser restrictions on using file://

the tutorial is gone, but the download still exists referenced here: https://stackoverflow.com/a/39681911

the downside is that i don't know how to update this to newer versions or add extensions.

it might also be possible to create a new version of this using aurelia-cli, but i haven't yet figured out how.

Exporting to web using Flutter is a nightmare I believe. When I checked last time, rendering happens on a canvas. There is no markup at all

I use Flutter for some web apps, it works fine. It's good for web apps, not web sites, and compared to other desktop or mobile apps, there is literally no difference between rendering on a canvas to rendering on Qt or SwiftUI. People, in my experience, just get up in arms about the web that does not happen with other technologies.

> compared to other desktop or mobile apps, there is literally no difference between rendering on a canvas to rendering on Qt or SwiftUI.

Except, you know, accessibility.

> just get up in arms about the web that does not happen with other technologies.

And for a good reason.

Flutter has a wild accessibility system that also exports DOM elements just for the aria labels.

This all breaks the browser’s in page search function though! Long standing bug with no fix yet.

Do you realize that Flutter has an accessibility system that is often more advanced than most desktop UI frameworks? [0] I notice this often from non-Flutter devs, Flutter has some pretty good a11y.

[0] https://docs.flutter.dev/accessibility-and-localization/acce...

Good to know! For the longest time ever their export to web was just canvas with no attempt at making it accessible.

I don’t know if even that was actually true? As far as I know the moment they introduced canvas as a rendering target they also produced a DOM structure along side it to capture the accessibility tree as they were still waiting on a more native solution in the form of AOM (accessibility object model) to be finalised.

> rendering happens on a canvas

flutter run --web-renderer=html

Glad to know that this exists!

Yeah, there is even more fun arguments like "--enable-impeller" to massively improve the rendering performance!

Can you help me understand the utility of Daisy UI? Seems like it's the good old classes+stylesheet with extra steps (tailwind)

Well, instead of writing this for every button in your web app:

<button class="bg-indigo-600 px-4 py-3 text-center text-sm font-semibold inline-block text-white cursor-pointer uppercase transition duration-200 ease-in-out rounded-md hover:bg-indigo-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 active:scale-95"> Button </button>

You can write this:

<button class="btn btn-primary"> Button </button>

The utility is pretty clear to me

so we've just circled back to good ol bootstrap?

That's even valid bootstrap classes

Exactly my point

yup, Astro and "islands architecture" is such a joy to work with.

Reply on news.ycombinator.com