view_component
soci-frontend
Our great sponsors
view_component | soci-frontend | |
---|---|---|
74 | 4 | |
3,145 | 19 | |
1.2% | - | |
9.0 | 0.0 | |
1 day ago | 9 months ago | |
Ruby | JavaScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
view_component
- Things I wish I knew before moving 50K lines of code to React Server Components
-
Supercharged table component built with ViewComponent
When searching for examples of table components built with the ViewComponent gem, I was surprised to find none. After some inquiries, I came across examples that worked like this:
-
More expressive APIs for View Components
View components offer two primary ways to interact with the component: passing arguments to the initializer and using slots:
- Have you been using ViewComponent. What advantages do you see in it?
-
How can I integrate VueJS into a rails 7 application? What is the workflow?
For example, splitting out views into partials? Or the new ViewComponent feature that's becoming quite popular - https://viewcomponent.org/
- Helpers vs Components
-
Vanilla Rails view components with partials | Stanko K.R.
I used to do "pure ruby" approach to that -- but basically wound up realizing I was re-inventing github's view_component. Their design goals were similar enough to what I was trying to do, that it made more sense just to use that, rather than try to re-invent it myself.
-
Gnarly Learnings from March 2023
ViewComponent
- Os benefĂcios de componentizar as views do Rails
-
Does anyone kind of miss simpler webpages?
The linked one is my Rails implementation, written for ViewComponent. The official version uses Nunjucks.
soci-frontend
-
Using SVG to create simple sparkline charts
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
-
We Use Web Components at GitHub
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...
-
Add a Dark Theme to a Ruby on Rails App
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.
What are some alternatives?
Stimulus - A modest JavaScript framework for the HTML you already have
turbo-rails - Use Turbo in your Ruby on Rails app
services-as-dom-elements
Tailwind CSS - A utility-first CSS framework for rapid UI development.
web3-sign-msg - web3-sign-msg is a modern web component built with ficusjs to sign messages with your eth private key in Metamask
cypress-rails - Helps you write Cypress tests of your Rails app
ficusjs - FicusJS is a set of lightweight functions for developing applications using web components
hotwire-rails - Use Hotwire in your Ruby on Rails app
community-protocols - Cross-component coordination protocols
i18n-tasks - Manage translation and localization with static analysis, for Ruby i18n
open-wc - Open Web Components: guides, tools and libraries for developing web components.