soci-frontend VS Stimulus

I ended up hand crafting my svg graphs for non.io for many of the same reasons. I originally was looking around at 3rd party libraries, but one of my goals with the site was to use as few external libraries as possible. I made an attempt at dynamically generating the svg points myself, and found it incredibly easy.

For context, here's the 22 lines of code it took to create a simple svg graph: https://github.com/jjcm/soci-frontend/blob/master/components...

And here's the final output: https://non.io/Animation-example

CSS variables help somewhat with this. Variable values penetrate the shadowroot, so you can effectively build an "api" for styles your component. I've done that a few times, and it's been enough for me to get by in most cases. An example is here: https://github.com/jjcm/soci-frontend/blob/master/components...

This is excellent for a small app, but if you have any production sized app or a larger team, it's not a great approach. Using colors directly in a theme override mean you have to then design and write the css for every page twice.

A better approach for doing dark mode is to use semantic tokens as a middleman. This works great not just for dark mode, but theming in general - allowing for high contrast mode, color blind modes, and others, while reducing the amount of effort required to style a new page (rather than growing multiplicatively with direct overrides).

If you're curious about this, I have a very basic schema I made for my app that you're welcome to steal here: https://github.com/jjcm/soci-frontend/blob/master/docs/token...

Here's an example implementation of the above schema: https://github.com/jjcm/soci-frontend/blob/master/soci-token...

The great thing is once it's implemented, it becomes VERY easy to know what token to use where. Got a button that's a primary action in a hover state? You probably want to use --brand-background-hover for the bg. Means you can do a lot of the design directly in code I find.

I also recommend checking out the docs for Stimulus and Turbo to familiarise yourself with all their features and the APIs used in this series.

Any tips on preparing to work with Wiz as an incoming intern. I heard its identical to Stimulus: https://stimulus.hotwired.dev/

use Stimulus

With Stimulus, you've got a powerful tool to take your app's interactivity up a notch. For even more awesome features and Stimulus wizardry, check out the Stimulus Documentation.

The next version of Stimulus makes it easier to access parts of the private API thanks to my pull request.

I like Stimulus, it was a bit pushed by Symfony with their ux thing.

I thought it'd be https://stimulus.hotwired.dev/ for a minute but I think that ecosystem is tied too closely with rails.

Hey HN!

For those new to Rails, Stimulus (https://stimulus.hotwired.dev/) is a way to sprinkle frontend javascript code into your Rails views.

I held off using Stimulus in my Rails apps for a long time because I didn't understand it — the data= attributes looked weird, and the connection between my Rails views and Stimulus javascript controllers was confusing.

So I decided to write the guide I wish I had when I was learning Stimulus.

Hope you enjoy it! I'm happy to answer any questions, feel free to ask any.

Thanks, Harrison

Hey /r/rails, these past few weeks, I've been working on a beginner's guide to Stimulus and I'm excited to finally share it!