how to build a complete, real-world application from scratch with Ruby on Rails step by step.
A lot of Ruby code is "magic". We'll explain the magic and see how it works using the powerful tools Ruby gives us.
Accept subscription and one-time payments with Stripe in your Rails apps
Expert advice on keeping Rails apps organized and fast.
Cheap, easy hosting for Ruby and Rails apps.
Launch your product business way faster with our SaaS template.
A weekly podcast on web development and building products with Ruby, Rails, Javascript, and more.
Find your next Ruby on Rails Job.
CSS frameworks like Tailwind, Bootstrap, Foundation, etc all come with many CSS classes you probably aren't using. This creates huge CSS files unless we use a tool like PurgeCSS to look through our code and remove the unused classes.
With TailwindCSS 1.0 just around the corner and some changes in Rails 6 to Webpacker, we take a look at how to install and setup the latest version of TailwindCSS with Rails 6.0
Rails 6 defaults to using Webpacker for Javascript instead of the asset pipeline. We'll learn how everything is structured and laid out and see how to add Flatpickr to Rails 6 including both the Javascript and CSS for it.
Mentioning Users with an @mention is a super common feature. Trix and ActionText are now part of Rails 6 which means we can very easily add support for tagging users with @mentions and other custom attachments in your applications.
Don't like Cocoon or it's jQuery dependency? We can use Stimulus JS and build dynamic nested forms in Rails with accepts_nested_attributes_for from scratch pretty easily!
Creating draft records in your database can be tricky. We'll be using the Draftsman gem to help us create draft versions of our records with our autosave Javascript
Autosaving draft records allows you to make sure users don't lose their work and can easily write draft content without publishing right away. We'll be using Stimulus to build an autosave controller for our form and Draftsman to power the backend.
We can use webpacker to create scoped styles for our Javascript widget and build an embed code that links to the latest version of our webpacker JS and CSS for our embeddable widget.
We don't want anyone to be able to embed your Javascript widget on any domain, so we'll setup our app to check the domain and only allow the widget on specific sites
Cross-origin Resource Sharing (CORS) allows your website to talk to other websites.
Embeddable Javascript Widgets often contain forms. We're using Vuex to build our comment form widget and we're going to use vue-map-fields to make this easier.
The next step in our embeddable javascript widget series is setting up our Vue frontend to talk with our Rails backend using Vuex
Starting our Embeddable JS Widget series outlining the comment and discussion models and the basic webpacker setup
Use the jstz Javascript timezone library to help auto-detect and set the user's time zone in your Rails apps
Learn how to use Vue.js slots to make even more reusable components. In this episode, we build a dropdown menu for Tailwind CSS apps using Vue.js slots.
Learn how to deeply integrate your Vue.js components with Ruby on Rails views
Build out a Twitter UI with a tweet form and inline editing using Stimulus JS
A look into Stimulus JS, a new Javascript framework by Basecamp to pair closely with Turbolinks
Adding Vuex as our Data Store gives us the ability to add realtime updates to our trello clone across browsers using ActionCable
Join 69,840+ developers who get early access to new tutorials, screencasts, articles, and more.
We care about the protection of your data. Read our Privacy Policy.
Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8
© 2023 GoRails, LLC. All rights reserved.
