31–40 of 40 posts
Right now I’m trying to build a tool that produces an intermediate representation of your UI components, which can then be transpiled into whatever target format you prefer.
That way we can build design systems that aren’t coupled to a specific downstream tech stack.
I came across CSS Zero recently: https://csszero.lazaronixon.com/lookbook/pages/overview which bills itself as an "opinionated front-end starter kit" specifically for Rails and includes Stimulus.js code for JavaScript functionality. It seems the benefits are that it is no build (pure CSS with CSS variables) and easy to modify and extend.
Not to nitpick terminology, but I don't think it's helpful to equate "design system" with component library. A design system is the design tokens used to describe an organization's application(s), and largely independent of the exact technologies. I worked with our UX team at a mixed tech company (Rails, React, mobile) who defined the patterns and tokens, and then my team implemented so that we could use across our s…
Earlier quoted context omitted.
It's not just that many design systems are tied to a particular framework, it's that they don't play well with HTML, and therefore classically server-rendering frameworks like Rails, Django, PHP, etc. With custom elements you can just drop ` ` in your server template and that's where the dropdown widget will be. Something like Shoelace[1] would be very nice to use with Rails. [1]: https://shoelace.style/
Custom Elements don't play well with HTML either. And "just dropping " is not much different from "just dropping and running some framework code on it" All the reasons are here: https://dev.to/stuffbreaker/web-components-and-ssr-2024-edit...
There's nothing very special in sending a html tag and then attaching functionality to it with javascript when it's loaded in the browser.
Earlier quoted context omitted.
Custom Elements don't play well with HTML either. And "just dropping " is not much different from "just dropping and running some framework code on it" All the reasons are here: https://dev.to/stuffbreaker/web-components-and-ssr-2024-edit...
It's strange to see people downvoting this when custom elements still can't be properly rendered on the server. All the attempts are very framework specific, e.g. lit's list of caveats https://lit.dev/docs/ssr/overview/ (and shoelace referenced above depends on lit). There's nothing very special in sending a html tag and then attaching functionality to it with javascript when it's loaded in the browser.
At least custom elements can just be including in framework-specific templates and be included in the rendered output, even if not deeply server-rendered.
It's actually very difficult to do this correctly and at scale with a framework like React, because in React you need an ID and JS call to initialize each embedded component, when custom elements initialize themselves.
Anyway, you have an axe to grind, so have fun with that. I'll see you next time I make a positive comment about web components I guess.
Not to nitpick terminology, but I don't think it's helpful to equate "design system" with component library. A design system is the design tokens used to describe an organization's application(s), and largely independent of the exact technologies. I worked with our UX team at a mixed tech company (Rails, React, mobile) who defined the patterns and tokens, and then my team implemented so that we could use across our s…
Interesting - did you set up your own pipeline from the DS to each platform? How did you manage parity and consistency over time?
Bootstrap (like Tailwind and others) has a configuration for generating the full component class and styles from a few variables, so updates to fonts, colors, spacing, etc were easy to manage and roll out to wide usage incrementally.
Obviously niche, but the GOV.UK Design System is very well supported in Rails. There's a form builder and library of components (built and maintained by me) which, between them, provide full coverage. Most new Rails services use them. It's a good match because accessibility is one of the Design Systems' primary concerns so JavaScript is used very sparingly and only to enhance. They're not official, only Nunjucks is s…
We used your repo as inspiration for a separate US gov't design system (not uswds) at the beginning but ended up shifting focus to building web components just before I left. Awesome work and hope your gov't sees the value of this work and oss work in general!
Earlier quoted context omitted.
It's strange to see people downvoting this when custom elements still can't be properly rendered on the server. All the attempts are very framework specific, e.g. lit's list of caveats https://lit.dev/docs/ssr/overview/ (and shoelace referenced above depends on lit). There's nothing very special in sending a html tag and then attaching functionality to it with javascript when it's loaded in the browser.
Framework server rendering is framework specific... Seems like a framework problem. At least custom elements can just be including in framework-specific templates and be included in the rendered output, even if not deeply server-rendered. It's actually very difficult to do this correctly and at scale with a framework like React, because in React you need an ID and JS call to initialize each embedded component, when c…
- all SSRed custom components are framework/library specific and cannot be rendered outside of javascript runtimes
- you need a JS call to initialize each custom component (though this is likely provided by the bundled JS)
- since when providing an id in a server-rendered HTML become an insurmountable challenge?
- and they have many additional issues. Example in the sibling comment: https://news.ycombinator.com/item?id=43641081
> Anyway, you have an axe to grind,
I don't have an axe to grind. I correct the magical wishful thinking that exists around custom components
I really think that a design system solution has to be framework/implementation agnostic. It’s why I’ve never been too interested in shadcn, impressive though it may be. Right now I’m trying to build a tool that produces an intermediate representation of your UI components, which can then be transpiled into whatever target format you prefer. That way we can build design systems that aren’t coupled to a specific downs…
I'm currently building one called Nitro Kit. Everyone seems to have their own opinion on what something like this should and should be or do. Nitro Kit is my opinion and I'm getting a lot of joy from using it on my own sites and services. It's free and open source and, full disclaimer, there's a paid premium offering too. https://nitrokit.dev/ Here's a video about my reasoning behind building it: https://www.youtube.…
Following along closely! Just want to say I stumbled across your Youtube channel a while back and have been delighted by the content. Keep up the good work!