I think it's valiant to try to do all of this with semantic HTML elements to achieve the right effects, and try to go for a "classless CSS" paradigm to get a nice looking and functional web app (as a fan of classless CSS myself). But scrolling through the component catalog, it unfortunately feels like it's all over the place and inconsistent with semantic vs basic elements, data tags vs aria attributes, and sprinkling some css classes over some of it.
I do very much like that by introducing aria attributes, the CSS reacts to it and styles it appropriately. As opposed to a full-blown react component library which does all of that for you. It would be a good exercise for developers to think aria-first and let the library just help with styling.
Lastly, I think the best part is that this component library has a native sidebar. So many of these I see and they have a nice web page which showcases all the components and I want to replicate their layout and nav/sidebars but they only focus on smaller re-usable components and not the layout. So that's a nice touch, I think. And, as someone who keeps an eye on but doesn't do a lot of frontend, the fact that a sidebar is an aside > nav > ul next to a main just makes so much sense and doesn't have a lot of cruft around it.
skeledrew 1 days ago [-]
This site got me going. Almost had whiplash when I tapped a link and the page loaded literally instantly. I've almost forgotten that that's possible on the internet. I'm not a web dev, but I'm inspired to get into it now because of this site.
darkvertex 1 days ago [-]
You should try making a site with Astro. Load speed is cray cray.
allthetime 1 days ago [-]
Yeah I’m a recent Astro convert. To be fair, any static site will have this effect. It’s just everyone is using react to make landing pages now.
ethmarks 22 hours ago [-]
What makes Astro fast isn't just that it's static, it's that it automatically pre-renders and it doesn't ship a runtime. React can render to static as well, it just also ships the React runtime.
robertoandred 1 days ago [-]
React sites are easily static.
mbreese 23 hours ago [-]
Static or pre-rendered static? I rarely come across the latter, but the former is pretty common.
1718627440 1 days ago [-]
I mean you also have HN as a reference.
skeledrew 19 hours ago [-]
I use an app for HN, and try to wherever I can due to my general experience with web things, so it's a different feel. But also HN being snappy is pretty much an upfront expectation given it's like 99.99% text.
1718627440 15 hours ago [-]
TIL there is an HN app.
skeledrew 13 hours ago [-]
Yep, several. I've found Hacki best for me so far, but actually I'm considering to make my own as there are a few pain points and extras I'd like handled, and it'd be a nice learning experience.
The motivating blog post[1] linked from the front page is probably going to generate a more interesting discussion than the framework itself.
As someone who has to deal with both angular and nextjs for different (but overlapping) stacks at work, I find myself increasingly sympathetic to this viewpoint.
Ah ha, figured it must have been discussed here before!
JSR_FDED 1 days ago [-]
This has the simplicity I thought I was going to get from DaisyUI but didn’t. Pairing this with Datastar seems like a super powerful combination that leans on actual web standards, not “ecosystems”.
roxolotl 1 days ago [-]
There’s a ton of semantic drop in css libraries similar to this. Love seeing new ones. Quality varies wildly but this site shows 50+ drop in stylesheets for those writing semantic html: https://dohliam.github.io/dropin-minimal-css/
layer8 1 days ago [-]
I had to read your comment three times before figuring out that you mean “drop-in”. Sometimes hyphens do matter! :)
neya 1 days ago [-]
This isn't upvoted enough. This is more interesting than the OP's project! Thanks for sharing!
sgc 1 days ago [-]
I love it. You can use the right arrow to cycle through them.
heyyeah 1 days ago [-]
do you have any recommendations from the list?
roxolotl 9 hours ago [-]
Here’s some that seem genuinely useful to me depending on what you’re looking for.
Don't know about anyone else, but the first thing I do with these types of libraries to check out the Accordion component and see if it slides out with a nice animation. This has become my litmus test for how well designed a component library is.
hiyer 1 days ago [-]
Reminds me of what bootstrap [1] was like around a decade ago. It's gotten quite a bit bloated since then though.
<aside> is not the correct semantic element for sidebars. The purpose of <aside> is for content that is indirectly related to the "main" content of the page. Sometimes a sidebar fits that definition but not always
Genuine question, do you normally use old browsers as your daily driver for interfacing with the web? I’d be interested in learning why.
potato-peeler 14 hours ago [-]
Not as a daily driver but to make sure a software has wide support, not all users update their phone frequently. Also, many web features do not require using the latest in browser features.
And just to be clear, I was poking fun at this so called “CTO”. That guy should have known better.
I see many web/ui frameworks posted in HN which don’t test in older browsers but still claim to be minimal or plain.
recursive 1 days ago [-]
Presumably it's relevant not because they use old browsers but because some of their software's users do. And I doubt most of them have a reason for doing so.
appplication 24 hours ago [-]
That makes sense. As a solo dev for my side projects, I’ve intentionally decided to not support legacy browsers, which I understand bugs some folks (weirdly, usually the super tech minded types you find in here) but I’m just one guy and I have a hard time seeing the value in these user segments being worth the squeeze.
nkmnz 1 days ago [-]
I know that guy from listmonk! I always thought the frontend could use some love and planned to spend a couple of days on contributing a couple of ideas, but I never came around. Now I know why things are as they are :)
Why do all the UI component libraries always feature an accordion (something i can build myself in 5 minutes and very rarely need), but always omit a date picker / calendar component (something that is needed almost in every corporate web form and really requires a lot of effort to build)?
anton-107 1 days ago [-]
I must appoligize - it is there, hidden under "Form elements" in the left menu. Kudos to the authors!
speedgoose 1 days ago [-]
Isn't it the one from the web browser? An <input type="datetime-local" />
That one is highly inconsistent, on some platforms its useless. For instance on Chrome/linux entering historic dates via the datepicker takes minutes to slowly scroll through the years. Always build your own datepicker, you know better what UX pattern will best suit your application and your users.
rohitpaulk 2 days ago [-]
Surprised that none of the comments here are comparing this to Bootstrap.
weiliddat 2 days ago [-]
Yeah reminds me of early Bootstrap
JCattheATM 1 days ago [-]
Wouldn't a comparison to Bulma be more apt?
kitd 2 days ago [-]
Great work! PicoCSS feels a bit too minimalist at times. This looks like a better balance of lightweight and functional.
eddd-ddde 1 days ago [-]
The "preview" and "code" buttons in the components break the "alt+arrow" bindings to go back to the previous page. Instead it just alternates between "preview" and "code".
jlg23 2 days ago [-]
My initial reaction was that I have to use this just because of the buzzword density in the title. But after reading up, it looks like the author was pretty successful in moving the bloat from code to announcement title. I'll give this a try!
temporallobe 1 days ago [-]
This is of special interest to me, because man do I hate UI frameworks with tons of external dependencies. Looking at you, Bootstrap.
mxuribe 1 days ago [-]
I used to think bootstrap was bloated too...and then i had heard - now, i don't know if its true - that bootstrap was originally intended *ONLY* as an internal prototype building tool, and any bloat did not matter...because expected audience, usage would be totally fine for a bloated framework...When i heard, i gave boostrap more of a pass...but, then again, i stopped using it, and began using other, lighter weight frameworks...and nowadays, i so rarely touch any web stuff...and when i do its only for me so then use zero frameworks, and merely display whatever default the browser shows with zero CSS, javascript...then again, my private web page needs are so basic anyway.
temporallobe 17 hours ago [-]
The problem with Bootstrap is that it depends on jQuery and Popper, and its CSS has global classes. It’s perfectly fine if BS is the only UI framework, but if you need to bring to bring in other frameworks or libraries (by choice or by force), then there’s a chance you’ll run into conflicts.
saila 20 hours ago [-]
Looks neat. Assuming the site is built using the framework, I ran a couple of the component pages (e.g., accordion) through Lighthouse and there are a number of accessibility issues. Just a heads up.
jitbit 1 days ago [-]
I tried doing something like that in my app, and quickly discovered that some modern semantic/functional tags are STILL not supported in some browsers. Or work badly.
For example, in Safari showModal for a dialog tag causes recalculating layout for EVERY element on a page, it’s up to 59x slower than chromium…. :(
But I love the idea
mkl 2 days ago [-]
Seems pretty unresponsive to me. I'm getting at least half a second of delay before the accordion, drop-down, or switch do anything. Chrome on Windows.
skeledrew 1 days ago [-]
I have 0 delay for all parts of it. Everything loads and works instantaneously. Firefox on Android.
recursive 1 days ago [-]
My first guess is that one of your add-ons is interacting badly.
It’s a bit odd that the accordion uses details but the dropdowns require a custom element.
mixmastamyk 1 days ago [-]
Looks good and like the lightweight aspect. As always, what do I have to do get tabs that look like tabs? What do people have against tabs that look like tabs, instead of buttons?
elseleigh 1 days ago [-]
This is a very nice library. At a first reading it seems complete (but did I see summary/detail - I don't remember). Bookmarked for further investigation. Congratulations and thank you.
hkt 1 days ago [-]
This is gorgeous. I hate frontend because of its sheer gratuity, and this is the kind of thing that might get me back into it. The only other contender for interactivity I'd consider is HTMX, and I'm going to boldly assume I'll be able to combine them without too much bother.
Bravo to the author, keep at it. I'll be recommending this to anyone who will listen.
bpev 2 days ago [-]
Amazing! I recently started building something similar for the same reasons, but more out of frustration rather than out of desire. I'll have to give this one a try and see if it fills the need.
Particularly the use of the label, fieldset and legend elements as native accessible solutions instead of instrumenting divs. Even the styling and the example resembles it a bit!
This is where it falls from grace IMHO. Grid classes are fundamentally non-semantic. I know they're popular and useful, but there must be a better (semantic) way of doing this. I haven't found it yet, but there must be.
superkuh 1 days ago [-]
No, this is "Oat - Ultra-lightweight, semantic, zero-dependency Javascript UI component library". If it doesn't work without javascript it is not an HTML UI component library.
recursive 1 days ago [-]
If it doesn't work without HTML, it's not a JS library.
scandinavian 2 days ago [-]
5 day old repo, 2000 stars on GitHub, 400 total weekly downloads on npm. Frontpage of hacker news with a bunch of weird comments. Moderation has been lacking recently.
codegeek 1 days ago [-]
You are jumping to conclusions. The author is the CTO of the largest online brokerage in India but more importantly, they have created many open source software of good quality. His website and blog are of great quality. Whether you think this library deserves more attention or not is your personal preference but it is far from spam. I havr no affiliation with them but like their work.
bityard 1 days ago [-]
It's possible for both things to be true: this project is written by a developer well-known within India, AND this thread has a lot of bot (bought?) comments of praise in it.
ssiddharth 2 days ago [-]
The author is the CTO of Zerodha, India’s largest online brokerage. Not that it matters, just an observation.
That's pretty common in small companies. It's less common in large companies but can happen - you may use the "CTO" title for the founding engineer who still leads code and architecture, then hire someone under a different title (frequently "VP of Engineering") to handle the management / team growing side of the role.
appplication 1 days ago [-]
That sounds like a reasonable split to me, so much so I’m not sure I’d understand why you’d want the same person handling both code/architecture and management.
subscribed 1 days ago [-]
CTO in my company* remains SME on a several components, commits to several production repositories (and expects the most stringent PR checks), and maintains couple of small tool used by us and the customers.
Its not that rare I think.
*small fintech with couple of billions in the accounts, not a startup, not a Fortune 500 company
dang 1 days ago [-]
I'm not sure which comments you're finding weird, but I spot checked a bunch and didn't see anything that looked particularly bogus, other than https://news.ycombinator.com/item?id=47026348 and some trollish ephemera.
The upvotes on the submission look legit to me, as does the submission itself.
sschueller 2 days ago [-]
Sad that HN is now also getting boted by LLMs. People are just shameless. HN is one of the few places left where you can post / self promote something you have made only for people to take advantage of it.
ZeWaka 2 days ago [-]
The strangest part is the weird commenting accounts have pretty old account ages.
quadrifoliate 1 days ago [-]
I don't know if you're demonstrating reductio ad absurdum, but maybe that's because they are genuine? As people in the thread have pointed out, the author as well as their company is pretty well-known in software circles. They have had multiple projects discussed on HN in the past[1]. 2000 stars is not a lot given that [2].
I fail to understand why a ton of breathless blog posts about the process of AI-assisted coding are more interesting to HNers than some of the actual code (potentially, not claiming anything about it) written.
Maybe you or the GP could actually say what you think are "weird comments" and why you think this is being "boted"?
[2] Why are people obsessed with star counts? I at least only star things to bookmark them, not vouch for them in any way. It does not seem unreasonable to me that 5 times as many people bookmarked the repo in the early days than are using it on npm. Also, npm is not necessary, the author shows at least 2 other ways to use it (direct download, link to GitHub pages) which will not show up in npm stats.
sfdlkj3jk342a 1 days ago [-]
> I love it. We need to see more of this.
> Use of semantic elements is an interesting take. I'll give it a try.
> Thank you for this, can’t wait to use. Minimalism at its best.
> Good one. Presentation is good too. Thanks
These are the kind of comments you see from Indians paid to boost Youtube content.
n_e 1 days ago [-]
An explanation that would fit both the old accounts and the artificial comments would be that they were encouraged by the author to comment (which is against the HN rules).
skeledrew 1 days ago [-]
I'm on the other side of the planet, generally not a fan of web dev, and heartily agree with the sentiments in that comment.
hkt 1 days ago [-]
Same here, DevOps by trade, allergic to ridiculous frontend nonsense, my comment praised the framework.
jonathanstrange 1 days ago [-]
They're probably just Indians using the framework saying "thanks." India has the largest population on Earth, they're close to 1.5 billion now. I think some people underestimate what that means.
quadrifoliate 1 days ago [-]
This seems like some pretty lazy analysis to be honest.
Following the first comment you quoted...
> I love it. We need to see more of this.
...shows that the author talks about using a “Chase card abroad” in a previous comment [1], which means they cannot be Indian as Chase doesn't issue cards or have substantial operations in India.
I don't want to run around following specific comment authors back through their threads, but as an Indian by birth it is pretty hurtful to see this kind of drive-by casual characterization of an population in a space like this. It also seems to be pretty contrary to the HN guidelines (“Please don't sneer, including at the rest of the community.”)
It is probably not bots. The reach of authors is pretty good. He actually loyal fan followers in india. You can see the same when he shows up on a podcast or talk.
I think theres alot indian developers who are hacker news as well as on github and other forums.
JasonADrury 1 days ago [-]
Why do all the comments look exactly like paid comment spam?
debarshri 1 days ago [-]
On second look. It could be spam. This is disappointing.
decremental 1 days ago [-]
[dead]
e2le 1 days ago [-]
Perhaps stolen accounts? I doubt every user is practising good security hygiene with a unique password per each account. Password leaks from other sites might well allow a motivated individual to hijack some here.
leke 1 days ago [-]
I could speculate that someone in the past had the business mindset to create thousands of accounts over multiple sites and offers the ability to loan them out for a period of time.
gas9S9zw3P9c 1 days ago [-]
If you search you can easily find sites to buy aged HN accounts, lots of them. Just like reddit accounts.
BoneShard 1 days ago [-]
AI Slop, basically a couple of LLM prompts will generate similar shit now.
1 days ago [-]
koakuma-chan 2 days ago [-]
This is kind of misleading. It says it's an HTML UI library, then it says HTML + CSS, and then it says it also includes JavaScript. Why is this better than, say, DaisyUI?
dang 1 days ago [-]
(Submitted title was "Oat – Ultra-lightweight, semantic, zero-dependency HTML UI component library" - we've replaced it now)
httpsterio 2 days ago [-]
Iirc there's a few web components in there which would require js.
villgax 1 days ago [-]
I just want something that's as easy to use as DaisyUI or even Bulma with one good set of components & themeing(beyond just palletes, like rounding, blur, transparency etc) & I'm good. For all the self-hosting model afficianados surely needing a build platform to create a blackhole of npm modules & internet connectivity for even a single build surely negates the entire point of a coding LLM if we still force it to deal with frontend
koakuma-chan 1 days ago [-]
You mean you want DaisyUI but with extended theming, like ability to make inputs, etc, rounded? This is also something I was considering.
Which actually makes sense: Oat's driving philosophy seems to be to use and enhance native controls as much as possible, and the date picker is already a native type on the input element.
ziml77 1 days ago [-]
But there's no enhancement here. That's just the native date picker control with a bit of styling on the textbox portion of it.
akrauss 1 days ago [-]
Thanks, I missed that when looking through the component list on the top level.
bartvk 1 days ago [-]
I'm not a web dev, but doesn't HTML come with a date picker?
LudwigNagasena 1 days ago [-]
HTML also comes with a button and an accordion.
deafpolygon 2 days ago [-]
I love it. We need to see more of this.
bartvk 1 days ago [-]
I'm not a web dev, what do you love about it?
deafpolygon 23 hours ago [-]
It leverages semantic html elements for styling… it may not seem like a huge deal on the surface, but it’s very useful in keeping html page sizes down, keeping the html itself simple to use, and so on.
there are other similar projects out, and i like them too.
bartvk 15 hours ago [-]
Thanks! I get that.
visarga 2 days ago [-]
This does not even need a LLM skill, just load the whole code up in context, so efficient.
recursive 1 days ago [-]
Doesn't even need a context either.
Rendered at 22:43:50 GMT+0000 (Coordinated Universal Time) with Vercel.
I do very much like that by introducing aria attributes, the CSS reacts to it and styles it appropriately. As opposed to a full-blown react component library which does all of that for you. It would be a good exercise for developers to think aria-first and let the library just help with styling.
Lastly, I think the best part is that this component library has a native sidebar. So many of these I see and they have a nice web page which showcases all the components and I want to replicate their layout and nav/sidebars but they only focus on smaller re-usable components and not the layout. So that's a nice touch, I think. And, as someone who keeps an eye on but doesn't do a lot of frontend, the fact that a sidebar is an aside > nav > ul next to a main just makes so much sense and doesn't have a lot of cruft around it.
https://f-droid.org/packages/com.jiaqifeng.hacki
As someone who has to deal with both angular and nextjs for different (but overlapping) stacks at work, I find myself increasingly sympathetic to this viewpoint.
[1]: https://nadh.in/blog/javascript-ecosystem-software-developme...
Discussed at the time:
https://news.ycombinator.com/item?id=28892933
- https://concrete.style/
- water.css https://watercss.kognise.dev/
- magick.css https://css.winterveil.net/
- mui.css: https://www.muicss.com/
- pico.css: https://picocss.com/
1. https://getbootstrap.com/
And just to be clear, I was poking fun at this so called “CTO”. That guy should have known better.
I see many web/ui frameworks posted in HN which don’t test in older browsers but still claim to be minimal or plain.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
For example, in Safari showModal for a dialog tag causes recalculating layout for EVERY element on a page, it’s up to 59x slower than chromium…. :(
But I love the idea
Bravo to the author, keep at it. I'll be recommending this to anyone who will listen.
https://oatpp.io/
[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
edit: clarification, focus
edit: That is, the footer is not within a visible area of the sidebar.
I like your presentation of the components, but i'm having trouble finding the essential distinctions
Looks okay, but I don’t see why to use this over something like Marx if all you need is to not have bare browser default styling.
https://oat.ink/components/#form
Looks a lot like a raw HTML+CSS framework I made in 2009:
https://alganet.github.io/ghiaweb/ (it has some small glitches, browser widgets changed a lot since 2009).
Particularly the use of the label, fieldset and legend elements as native accessible solutions instead of instrumenting divs. Even the styling and the example resembles it a bit!
https://oat.ink/components/#grid
This is where it falls from grace IMHO. Grid classes are fundamentally non-semantic. I know they're popular and useful, but there must be a better (semantic) way of doing this. I haven't found it yet, but there must be.
Its not that rare I think.
*small fintech with couple of billions in the accounts, not a startup, not a Fortune 500 company
The upvotes on the submission look legit to me, as does the submission itself.
I fail to understand why a ton of breathless blog posts about the process of AI-assisted coding are more interesting to HNers than some of the actual code (potentially, not claiming anything about it) written.
Maybe you or the GP could actually say what you think are "weird comments" and why you think this is being "boted"?
---------------
[1] https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...
[2] Why are people obsessed with star counts? I at least only star things to bookmark them, not vouch for them in any way. It does not seem unreasonable to me that 5 times as many people bookmarked the repo in the early days than are using it on npm. Also, npm is not necessary, the author shows at least 2 other ways to use it (direct download, link to GitHub pages) which will not show up in npm stats.
> Use of semantic elements is an interesting take. I'll give it a try.
> Thank you for this, can’t wait to use. Minimalism at its best.
> Good one. Presentation is good too. Thanks
These are the kind of comments you see from Indians paid to boost Youtube content.
Following the first comment you quoted...
> I love it. We need to see more of this.
...shows that the author talks about using a “Chase card abroad” in a previous comment [1], which means they cannot be Indian as Chase doesn't issue cards or have substantial operations in India.
I don't want to run around following specific comment authors back through their threads, but as an Indian by birth it is pretty hurtful to see this kind of drive-by casual characterization of an population in a space like this. It also seems to be pretty contrary to the HN guidelines (“Please don't sneer, including at the rest of the community.”)
--------------
[1] https://news.ycombinator.com/item?id=46535775
I think theres alot indian developers who are hacker news as well as on github and other forums.
pattern-seek for yourself: check their other comments; some seem legitimate which might suggest a human in the loop.
https://oat.ink/components/#form
Which actually makes sense: Oat's driving philosophy seems to be to use and enhance native controls as much as possible, and the date picker is already a native type on the input element.
there are other similar projects out, and i like them too.