Our great sponsors
tailwindcss-rails | request.js | |
---|---|---|
20 | 11 | |
1,352 | 363 | |
2.4% | 3.0% | |
8.3 | 5.3 | |
about 14 hours ago | 19 days ago | |
Ruby | JavaScript | |
GNU General Public License v3.0 or later | 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.
tailwindcss-rails
-
Is the default importmap method unrealistic in the most popular real world use cases?
You can't use additional CSS packages (like Flowbite) with the official tailwindcss-rails gem. According to this answered issue, you should either give up importmap and use a bundler, or use a CSS file from CDN - which is not ideal (unnecessary classes won't be purged this way).
-
How to bundle assets in a Rails engine
You first install your asset handlers as you need them for your project. They can be anything from rails/jsbundling-rails and rails/tailwindcss-rails to webpacker or something custom.
-
Setup TailwindCSS, postcss and esbuild on Rails 7
Preconfigured TailwindCSS from TailwindCSS-rails ready to use out of the box, pass --css tailwind as an option.β
-
User notifications with Rails, Noticed, and Hotwire
Thanks to the magic of Rails, the scaffold generator gives us almost everything we need to start creating messages and associating them with users. Because we are using Tailwind via the tailwindcss-rails gem, the scaffold generator also includes some nice looking base styles too.
-
Pagination and infinite scrolling with Rails and the Hotwire stack
Because we are using Tailwind via the tailwindcss-rails gem, the scaffold generator applies some basic Tailwind styling to generated views, so we have nice looking Widget pages right out of the box.
-
Launching Multiple Processes with a Single Command in Rails
Here's a simple way to achieve this, inspired by the tailwindcss-rails gem.
-
How to Install Shoelace with Rails 7, esbuild, and Tailwind JIT
For more documentation on tailwind installation: https://github.com/rails/tailwindcss-rails
-
Upgrading from Rails 6.x Webpacker to Rails 7 Importmaps
gem "rails", "~> 7.0.0" # The original asset pipeline for Rails [https://github.com/rails/sprockets-rails] gem "sprockets-rails" # Use postgresql as the database for Active Record gem "pg", "~> 1.1" # Use the Puma web server [https://github.com/puma/puma] gem "puma", "~> 5.0" # Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails] gem "importmap-rails" # Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev] gem "turbo-rails" # Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev] gem "stimulus-rails" # Use Tailwind CSS [https://github.com/rails/tailwindcss-rails] gem "tailwindcss-rails" # Build JSON APIs with ease [https://github.com/rails/jbuilder] gem "jbuilder" gem "redis", "~> 4.0"
-
Rails 7 Tailwind Scaffold Question
When you generate an app with rails new --css=tailwind without a JS option, you get the tailwindcss-rails gem which includes the new scaffold generators. When you pass in a JavaScript option as well, you get Tailwind installed via cssbundling-rails, which does not include built-in generators since it offers more than just Tailwind as an option.
- Tailwind-styled scaffold templates when using tailwindcss-rails
request.js
-
Help importing fetch on stimulus
For some extra help with crsf tokens. I would recommend the request.js library in the rails GitHub. https://github.com/rails/request.js
-
Build a Table Editor with Trix and Turbo Frames in Rails
We will now connect our toolbar's table button to the server-side controller action we have just written. To do this, we first need to bring Rails' request.js library into the project. This library will help us administer post requests from the client, including proper CSRF-tokens, etc.:
-
how to implement a bootstrap dropdown in a button
Then, you will need to use fetch or other libs like rails/request.js (https://github.com/rails/request.js) to send a patch request with formData to your model's update path (usually something like /fruits), this is to update your model data. If you are using scaffolded controller, you should have respond_to js configured for you by default. If not, remember to add respond_to :js to your controller, and list data attributes you wanted to return from the server.
-
Reactiveness In Rails
Stimulus and request.js should get you about 90% of the way for your example
-
Pagination and infinite scrolling with Rails and the Hotwire stack
One way to work around this is described in Daleβs article. In it, a Stimulus controller and request.js are used to insert a Turbo Stream header into GET requests, getting Turbo to see the request as a Turbo Stream request despite not originating from a form submission.
-
Is it possible to trigger turbo_stream update from Stimulus controller?
The Rails.ajax function comes from the @rails/ujs package, which isn't Turbo-aware. You should be using @rails/request.js instead, which can execute Turbo Stream commands:
-
Rails 7.0 has been released
It's not part of Hotwire, but supplemental for when you want to make AJAX requests from Stimulus or whatever. https://github.com/rails/request.js
-
Using stimulus to fetch api in ajax manner
So with our applications we've started using request.js to make JS based requests to the applications, it's super handy and very easy to use.
-
Infinite Scroll with HOTWire - Part 2: Adding Stimulus
request.js is a minimalistic JavaScript pacakge that is set to replace Rails UJS in the near future. We will be using it to fetch new pages from the server. Let's install the package
-
Multi-Factor Authentication for Rails with WebAuthn and Devise
First, we will add the necessary NPM packages. We will use @github/webauthn-json as a nice wrapper for the WebAuthn API and @rails/request.js for easier requests to the backend (with built-in Turbo Stream support).
What are some alternatives?
cssbundling-rails - Bundle and process CSS in Rails with Tailwind, PostCSS, and Sass via Node.js.
hotwire-example-template - A collection of branches that transmit HTML over the wire.
Pagy - π The Best Pagination Ruby Gem π₯
vite_ruby - β‘οΈ Vite.js in Ruby, bringing joy to your JavaScript experience
Foreman - Manage Procfile-based applications
webauthn-with-devise - The companion app for the article "Secure authentication for Rails with WebAuthn and Devise"
sprockets-rails - Sprockets Rails integration
webauthn-json - π A small WebAuthn API wrapper that translates to/from pure JSON using base64url.
flutter-roadmap - Roadmap for Flutter developers in 2020
importmap-rails - Use ESM with importmap to manage modern JavaScript in Rails without transpiling or bundling.
hide-kitchen-new