How to Add Live Reload to Your Rails Application
Live reload is an incredible tool for developers looking to boost their productivity. In this tutorial, I will walk you through the process of implementing live reload in your Ruby on Rails application using esbuild.
Implementing live reload can greatly streamline your development workflow, saving you valuable time and effort. By automatically refreshing your app whenever you make changes, you can instantly see the results without manually reloading the page.
To achieve this, we will leverage the power of esbuild, a cutting-edge technology for fast and efficient JavaScript bundling. By combining esbuild with Ruby on Rails, we can create a seamless live reload experience that will streamline your development process.
Timestamps:
00:00 - Intro
00:05 - Why live reload and why with Rails?
02:18 - Demo project kickoff
04:06 - Adding esbuild to an existing app
04:42 - Add node dependencies
05:27 - Create an esbuild.config.js file
06:12 - Write the new configuration
17:55 - Add live_reload.js file
19:23 - Reviewing our work
20:21 - Trying it all out
21:45 - Other solutions you could try
25:16 - Closing thoughts
💻 Read the written version:
https://webcrunch.com/posts/live-reload-rails
======
👋 I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch (https://webcrunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.
📰 Never miss an update! Click here to subscribe: https://www.youtube.com/user/webcrunch?sub_confirmation=1
💻 Read the written version:
https://webcrunch.com/posts/live-reload-rails
💎 New to Ruby on Rails? Enroll in my course HELLO RAILS:
https://hellorails.io
💻 The Blog (my source of truth): https://webcrunch.com
Additional Links:
🎨 Bring life to Rails projects with Rails UI: https://railsui.com.
👨💻 Hire me: Visit: https://railsui.com/custom
🐤 https://twitter.com/webcrunchblog.
⚙️ https://github.com/justalever.
P.S. This stuff takes a long time to make but I love to do it. To help me keep at it consider supporting me. If not monetarily, then subscribe to the channel or share it with someone!
✨ https://github.com/sponsors/justalever
☕️ https://www.buymeacoffee.com/webcrunch
25
views
Rails UI Update - Shepherd theme launch
The gist:
1. I removed Bootstrap support in favor of pure Tailwind CSS.
2. A new theme called "Shepherd" is available to make use of.
3. New website, themes, and updates to come.
I’m excited to introduce the newest Rails UI theme called Shepherd. This theme is inspired by the real estate space and has similar UI components and patterns you might find on an app like Airbnb.
The theme has a design system of components and snippets you can use in your app immediately. Also included is a series of pages you can add or remove from your app in a few clicks.
Learn more and try it for free at https://railsui.com
Need custom UI/product design work from me? https://railsui.com/custom
======
👋 I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch (https://webcrunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.
📰 Never miss an update! Click here to subscribe: https://www.youtube.com/user/webcrunc...
💎 New to Ruby on Rails? Enroll in my course HELLO RAILS:
https://hellorails.io
💻 The Blog (my source of truth): https://webcrunch.com
Additional Links:
🎨 Bring life to Rails projects with Rails UI: https://railsui.com.
👨💻 Hire me: Visit: https://railsui.com/custom
🐤
/ webcrunchblog .
⚙️ https://github.com/justalever.
P.S. This stuff takes a long time to make but I love to do it. To help me keep at it consider supporting me. If not monetarily, then subscribe to the channel or share it with someone!
✨ https://github.com/sponsors/justalever
☕️ https://www.buymeacoffee.com/webcrunch
5
views
Tailwind CSS Mouse-Tracking Glow Effect with JavaScript
In this Tailwind CSS tutorial, we'll explore how to add an interactive, mouse-tracking glow effect to web elements using just JavaScript and Tailwind CSS. This simple yet eye-catching effect will enhance the user experience on your webpage.
*Prerequisites:*
- Basic knowledge of HTML, CSS, and JavaScript.
- Tailwind CSS installed in your project.
📕 Read the blog post: https://webcrunch.com/posts/mouse-tra...)
⚙️ Source code: https://github.com/justalever/tailwin...
Timestamps:
00:00 - Video overview/Intro
00:26 - Project demo
01:14 - Project setup with Vite.js (https://vitejs.dev)
04:00 - Install Tailwind CSS
05:52 - Extending the default Tailwind CSS configuration
07:27 - Main HTML Structure
09:11 - Add custom glow overlay CSS
11:04 - Learn more about radial gradients
12:00 - Add a custom Tailwind CSS plugin and glow variants
15:34 - Add the JavaScript
20:40 - Add new glow variant classes to create the new effect
22:24 - Demo of the final product
24:42 - Limitations and gotchas with transform effects
26:00 - Please like and subscribe!
======
👋 I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch (https://webcrunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.
📰 Never miss an update! Click here to subscribe: https://www.youtube.com/user/webcrunc...
💻 Read the written version:
https://web-crunch.com/posts/
💎 New to Ruby on Rails? Enroll in my course HELLO RAILS:
https://hellorails.io
💻 The Blog (my source of truth): https://webcrunch.com
Additional Links:
🎨 Bring life to Rails projects with Rails UI: https://railsui.com.
👨💻 Hire me: Visit: https://railsui.com/custom
🐤
/ webcrunchblog .
⚙️ https://github.com/justalever.
P.S. This stuff takes a long time to make but I love to do it. To help me keep at it consider supporting me. If not monetarily, then subscribe to the channel or share it with someone!
✨ https://github.com/sponsors/justalever
☕️ https://www.buymeacoffee.com/webcrunch
64
views
Digging into Solid Queue and Rails
In this video, I explore Solid Queue for Ruby on Rails, the robust background job processing library designed for efficiency and reliability. In this guide, learn how it compares to GoodJob and Sidekiq, with unique features like transaction support and concurrency control. Perfect for developers seeking solid performance and data integrity.
Timestamps:
00:00 - Intro
00:27 - Differences between Solid Queue and other queuing solutions
01:30 - What is Solid Queue
02:02 - What inspired Solid Queue?
02:16 - Adding Solid Queue to a demo rails application
02:38 - Adding the Solid Queue gem
02:52 - Run the Solid Queue installer
04:05 - Adding Active Job Queue adapter to config/development.rb
04:32 - Run rails db:migrate
05:39 - Touring the default config yaml file
06:51 - Starting the Solid Queue queuing service
08:36 - Exploring advanced configurations
08:58 - No automatic retry support
10:07 - Dedicated Puma plugin
11:04 - Adding an Open Source GUI to visualize queues
12:50 - Demoing Solid Queue with the GUI
14:00 - Wrapping up
🔗 Solid Queue - https://github.com/basecamp/solid_queue
📕 Read the written version: https://web-crunch.com/posts/digging-into-solid-queue-rails
💎 The GUI Gem - https://github.com/virolea/panoptic
======
👋 I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch (https://web-crunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.
📰 Never miss an update! Click here to subscribe: https://www.youtube.com/user/webcrunch?sub_confirmation=1
💻 Read the written version:
https://web-crunch.com/posts/digging-into-solid-queue-rails
💎 New to Ruby on Rails? Enroll in my course HELLO RAILS:
https://hellorails.io
💻 The Blog (my source of truth): https://web-crunch.com
Additional Links:
🎨 Bring life to Rails projects with Rails UI: https://railsui.com.
👨💻 Hire me: Visit: https://railsui.com/custom
🐤 https://twitter.com/webcrunchblog.
⚙️ https://github.com/justalever.
P.S. This stuff takes a long time to make but I love to do it. To help me keep at it consider supporting me. If not monetarily, then subscribe to the channel or share it with someone!
✨ https://github.com/sponsors/justalever
☕️ https://www.buymeacoffee.com/webcrunch
7
views
How to use Bun with Ruby on Rails
In this video learn how to use Bun with Ruby on Rails for faster, more efficient JavaScript and TypeScript app development. Discover Bun's design goals, including speed and compatibility, and how it compares to traditional tools like node.js and yarn. Perfect for developers aiming to optimize their Rails applications with the latest in front-end technology.
📕 Read the written version: https://web-crunch.com/posts/bun-with-ruby-on-rails/
⬇️ Download Bun: https://bun.sh/
🕦 Timestamps:
00:00 - Intro and background behind the video
01:30 - What is Bun?
02:56 - Create a new Rails app with Bun support
03:15 - How to install Bun on an existing Rails application
04:06 - Exploring the default Bun config file
05:40 - Booting the rails server and installing dependencies
06:49 - Installing Bun on your system
07:15 - Gotcha: jsbundling-rails installer leaves out installing dependencies with bun
07:30 - Bun usage examples
08:34 - Package.json script tour
08:39 - Bun lock files
09:00 - Conclusion/Opinions
======
👋 I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch (https://web-crunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.
📰 Never miss an update! Click here to subscribe: https://www.youtube.com/user/webcrunch?sub_confirmation=1
💻 Read the written version:
https://web-crunch.com/posts/bun-with-ruby-on-rails/
💎 New to Ruby on Rails? Enroll in my course HELLO RAILS:
https://hellorails.io
💻 The Blog (my source of truth): https://web-crunch.com
Additional Links:
🎨 Bring life to Rails projects with Rails UI: https://railsui.com.
👨💻 Hire me: Visit: https://railsui.com/custom
🐤 https://twitter.com/webcrunchblog.
⚙️ https://github.com/justalever.
P.S. This stuff takes a long time to make but I love to do it. To help me keep at it consider supporting me. If not monetarily, then subscribe to the channel or share it with someone!
✨ https://github.com/sponsors/justalever
☕️ https://www.buymeacoffee.com/webcrunch
11
views
Digging into Turbo 8's Morphing Feature in Ruby on Rails
Inspired by Jorge Manrubia’s talk from Railsworld (https://www.youtube.com/watch?v=m97UsXa6HFg&t=4s) I wanted to try out Morphing which is coming to Turbo 8 very soon. This is a really great new feature to Ruby on rails that I'm excited to use.
On October 9th, 2023 Jorge published a blog post (https://dev.37signals.com/a-happier-happy-path-in-turbo-with-morphing/) that was a precursor to the talk. I recommend giving it a read.
The gist of the blog post and talk is that Turbo frames and streams are useful but often cumbersome to integrate since they are highly focused containers of logic.
They won’t be going away but might be more of a _special-use_ tool coming up with the introduction of morphing which could be a more convenient and useful “default” much like the standard full-page reloads of historical Rails apps.
### Discovering the problem
The Basecamp team has been working on integrating a calendar into their HEY product. In building the new feature, they quickly spotted the constraints of turbo frames and streams. Having to broadcast and update many items on a given page is problematic and overly complex, so they looked for a better approach, one much closer to the default Rails full-page reload conventions.
## What is morphing?
No, this doesn’t relate to Power Rangers, though one could wish!
Morphing is the process of merging one DOM into another without too many side effects. It’s not necessarily natural but the perception our eyes see makes it feel as such.
Morphing isn’t new, but it is to Turbo 8. The Basecamp team chose idiomorph (https://github.com/bigskysoftware/idiomorph) as a library to help with the new features. It's a JavaScript library for morphing from one DOM tree to another.
**The TL;DR;**
Morphing provides smoother updates everywhere rather than selective updates like turbo streams and turbo frames.
📕 Putting it into practice: https://web-crunch.com/posts/turbo-morphing-ruby-on-rails
⚙️ Source code: https://github.com/justalever/blogmorphing
Timestamps:
00:00 - Intro and inspiration
01:00 - Why Morphing is necessary for the Basecamp team
03:12 - Create a new app
04:09 - Add Tailwind CSS Rails gem
04:17 - Run tailwindcss-rails installer
04:45 - Boot and preview app locally
05:05 - Install beta versions of Turbo
06:23 - Scaffold out Post and User models
07:39 - Create new user using the Rails console
08:37 - Setup modeling
08:50 - Update posts index and show views and routes
10:38 - Add morph meta tags to the application layout
12:30 - Add broadcasts_refreshes to post model
12:46 - Stream updates for show view
13:29 - Streaming updates to posts as a collection
15:46 - Previewing our work and seeing morphing in action
======
👋 I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch (https://web-crunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.
📰 Never miss an update! Click here to subscribe: https://www.youtube.com/user/webcrunch?sub_confirmation=1
💻 Read the written version:
https://web-crunch.com/posts/turbo-morphing-ruby-on-rails
💎 New to Ruby on Rails? Enroll in my course HELLO RAILS:
https://hellorails.io
💻 The Blog (my source of truth): https://web-crunch.com
Additional Links:
🎨 Bring life to Rails projects with Rails UI: https://railsui.com.
👨💻 Hire me: Visit: https://railsui.com/custom
🐤 https://twitter.com/webcrunchblog.
⚙️ https://github.com/justalever.
P.S. This stuff takes a long time to make but I love to do it. To help me keep at it consider supporting me. If not monetarily, then subscribe to the channel or share it with someone!
✨ https://github.com/sponsors/justalever
☕️ https://www.buymeacoffee.com/webcrunch
27
views
How I Create Tailwind CSS Plugins From Scratch
This tutorial guides you through creating a custom Tailwind CSS plugin to add a variety of button styles. It is an excellent way to rinse and reuse button components in the multiple prototype-like apps I build yearly. We'll cover designs like solid, outline, and ghost buttons, each with customizable colors and hover states.
======
👋 I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch (https://web-crunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.
📰 Never miss an update! Click here to subscribe: https://www.youtube.com/user/webcrunch?sub_confirmation=1
💻 Read the written version:
https://web-crunch.com/posts/create-a-tailwind-css-plugin-from-scratch
💎 New to Ruby on Rails? Enroll in my course HELLO RAILS:
https://hellorails.io
💻 The Blog (my source of truth): https://web-crunch.com
Additional Links:
🎨 Bring life to Rails projects with Rails UI: https://railsui.com.
👨💻 Hire me: Visit: https://railsui.com/custom
🐤 https://twitter.com/webcrunchblog.
⚙️ https://github.com/justalever.
P.S. This stuff takes a long time to make but I love to do it. To help me keep at it consider supporting me. If not monetarily, then subscribe to the channel or share it with someone!
✨ https://github.com/sponsors/justalever
☕️ https://www.buymeacoffee.com/webcrunch
4
views
Best Practices for Naming Models in Ruby on Rails
In Ruby on Rails, naming models is more than just a convention. It's about clarity, efficiency, and ensuring your app is easy to manage. Here's a guide to help you name your models like the pros.
P.S. I created a handy guide at https://web-crunch.com/naming-models. Bookmark it if you need a refresher every once in a while!
Timestamps:
00:00 - Intro and find the new guide
01:42 - Singular and Capitalized
02:53 - Keep it descriptive and clear
03:28 - Organize with namespaces
03:59 - Intuitive Associations
04:22 - Acronyms and Initialisms
04:48 - Avoid Reserved Words
05:02 - Context-Specific Naming
05:22 - Avoid Ambiguity
06:11 - Composite Names
06:47 - Polymorphic versatility
07:43 - Single Table Inheritance
08:45 - Wrapping up
View the guide here: https://web-crunch.com/naming-models
Read the blog post here: https://web-crunch.com/posts/best-practices-for-naming-models-in-ruby-on-rails
======
👋 I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch (https://web-crunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.
📰 Never miss an update! Click here to subscribe: https://www.youtube.com/user/webcrunch?sub_confirmation=1
💻 Read the written version:
https://web-crunch.com/posts/best-practices-for-naming-models-in-ruby-on-rails
💎 New to Ruby on Rails? Enroll in my course HELLO RAILS:
https://hellorails.io
💻 The Blog (my source of truth): https://web-crunch.com
Additional Links:
🎨 Bring life to Rails projects with Rails UI: https://railsui.com.
👨💻 Hire me: Visit: https://railsui.com/custom
🐤 https://twitter.com/webcrunchblog.
⚙️ https://github.com/justalever.
P.S. This stuff takes a long time to make but I love to do it. To help me keep at it consider supporting me. If not monetarily, then subscribe to the channel or share it with someone!
✨ https://github.com/sponsors/justalever
☕️ https://www.buymeacoffee.com/webcrunch
13
views
Part 1: Supplement Stack Sharing App with Ruby on Rails - App Demo and Introduction
PART 1 of 9
Welcome to my latest Let’s Build series, where we'll build a supplement stack-sharing app using Ruby on Rails.
Over time, I’ve added several of these builds, which resonate with many of you. This series takes a look a modern Ruby on Rails features such as Turbo and Stimulus.js. We also dive into web-scraping which is something I haven't covered before.
I hope you enjoy the build and get some value from it. It would be a ton to get a subscribe or like from you! Also, be sure to check out more of my content at https://web-crunch.com
🔗 Source code: https://github.com/justalever/supstacker_demo
📕 Written version: https://web-crunch.com/posts/supplement-stack-sharing-app-ruby-on-rails/
📺 Playlist: https://youtube.com/playlist?list=PL01nNIgQ4uxOhHYZd6THGIFVBALJZCcpM&si=kbdUW1JbM551tC-i
======
I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch(https://web-crunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.
📰 Never miss an update! Click here to subscribe: https://www.youtube.com/user/webcrunchblog?sub_confirmation=1
💎 Looking to master Ruby on Rails? Enroll in my course HELLO RAILS: https://hellorails.io
💻 Explore my blog for more insightful content: https://web-crunch.com
♥️ Show your support by sponsoring me on GitHub: https://github.com/sponsors/justalever
☕️ Help me stay awake and fueled by buying me a coffee: https://www.buymeacoffee.com/webcrunch
🚀 Additional Links:
Enhance your Rails projects with Rails UI: https://railsui.com.
Hire me for Rails and design work: https://railsui.com/custom
X: https://x.com/webcrunchblog.
Github: https://github.com/justalever.
Thank you for joining me on this journey! Remember to like, comment, and subscribe to my channel for more exciting content!
13
views
Part 2: Create a New Ruby on Rails App - Supplement Stack Sharing App
PART 2 of 9
In part 2 we create a new Rails app, install Rails UI, and set the groundwork for building the supplement stack-sharing app with Ruby on Rails.
🔗 Source code: https://github.com/justalever/supstacker_demo
📕 Written version: https://web-crunch.com/posts/supplement-stack-sharing-app-ruby-on-rails/
📺 Playlist: https://youtube.com/playlist?list=PL01nNIgQ4uxOhHYZd6THGIFVBALJZCcpM&si=kbdUW1JbM551tC-i
======
I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch(https://web-crunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.
📰 Never miss an update! Click here to subscribe: https://www.youtube.com/user/webcrunchblog?sub_confirmation=1
💎 Looking to master Ruby on Rails? Enroll in my course HELLO RAILS: https://hellorails.io
💻 Explore my blog for more insightful content: https://web-crunch.com
♥️ Show your support by sponsoring me on GitHub: https://github.com/sponsors/justalever
☕️ Help me stay awake and fueled by buying me a coffee: https://www.buymeacoffee.com/webcrunch
🚀 Additional Links:
Enhance your Rails projects with Rails UI: https://railsui.com.
Hire me for Rails and design work: https://railsui.com/custom
X: https://x.com/webcrunchblog.
Github: https://github.com/justalever.
Thank you for joining me on this journey! Remember to like, comment, and subscribe to my channel for more exciting content!
14
views
Part 4: Optimize controllers and routing - Supplement Stack Sharing App
PART 4 of 9
In part 4 we optimize our controllers and consider how to make products shareable from a given "stack" with more advanced routing.
🔗 Source code: https://github.com/justalever/supstacker_demo
📕 Written version: https://web-crunch.com/posts/supplement-stack-sharing-app-ruby-on-rails/
📺 Playlist: https://youtube.com/playlist?list=PL01nNIgQ4uxOhHYZd6THGIFVBALJZCcpM&si=kbdUW1JbM551tC-i
======
I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch(https://web-crunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.
📰 Never miss an update! Click here to subscribe: https://www.youtube.com/user/webcrunchblog?sub_confirmation=1
💎 Looking to master Ruby on Rails? Enroll in my course HELLO RAILS: https://hellorails.io
💻 Explore my blog for more insightful content: https://web-crunch.com
♥️ Show your support by sponsoring me on GitHub: https://github.com/sponsors/justalever
☕️ Help me stay awake and fueled by buying me a coffee: https://www.buymeacoffee.com/webcrunch
🚀 Additional Links:
Enhance your Rails projects with Rails UI: https://railsui.com.
Hire me for Rails and design work: https://railsui.com/custom
X: https://x.com/webcrunchblog.
Github: https://github.com/justalever.
Thank you for joining me on this journey! Remember to like, comment, and subscribe to my channel for more exciting content!
8
views
Part 5: Amazon Data Parser in Ruby on Rails - Supplement Stack Sharing App
PART 5 of 9
In part 5 we get into more advanced data parsing using web scraping tools and the Nokogiri Ruby gem.
🔗 Source code: https://github.com/justalever/supstacker_demo
📕 Written version: https://web-crunch.com/posts/supplement-stack-sharing-app-ruby-on-rails/
📺 Playlist: https://youtube.com/playlist?list=PL01nNIgQ4uxOhHYZd6THGIFVBALJZCcpM&si=kbdUW1JbM551tC-i
======
I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch(https://web-crunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.
📰 Never miss an update! Click here to subscribe: https://www.youtube.com/user/webcrunchblog?sub_confirmation=1
💎 Looking to master Ruby on Rails? Enroll in my course HELLO RAILS: https://hellorails.io
💻 Explore my blog for more insightful content: https://web-crunch.com
♥️ Show your support by sponsoring me on GitHub: https://github.com/sponsors/justalever
☕️ Help me stay awake and fueled by buying me a coffee: https://www.buymeacoffee.com/webcrunch
🚀 Additional Links:
Enhance your Rails projects with Rails UI: https://railsui.com.
Hire me for Rails and design work: https://railsui.com/custom
X: https://x.com/webcrunchblog.
Github: https://github.com/justalever.
Thank you for joining me on this journey! Remember to like, comment, and subscribe to my channel for more exciting content!
7
views
Part 6: Dynamic Products with Background Jobs Rails - Supplement Stack Sharing App
PART 6 of 9
In part 6 we offload taxing parsing logic to background jobs using Sidekiq and Ruby on Rails.
🔗 Source code: https://github.com/justalever/supstacker_demo
📕 Written version: https://web-crunch.com/posts/supplement-stack-sharing-app-ruby-on-rails/
📺 Playlist: https://youtube.com/playlist?list=PL01nNIgQ4uxOhHYZd6THGIFVBALJZCcpM&si=kbdUW1JbM551tC-i
======
I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch(https://web-crunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.
📰 Never miss an update! Click here to subscribe: https://www.youtube.com/user/webcrunchblog?sub_confirmation=1
💎 Looking to master Ruby on Rails? Enroll in my course HELLO RAILS: https://hellorails.io
💻 Explore my blog for more insightful content: https://web-crunch.com
♥️ Show your support by sponsoring me on GitHub: https://github.com/sponsors/justalever
☕️ Help me stay awake and fueled by buying me a coffee: https://www.buymeacoffee.com/webcrunch
🚀 Additional Links:
Enhance your Rails projects with Rails UI: https://railsui.com.
Hire me for Rails and design work: https://railsui.com/custom
X: https://x.com/webcrunchblog.
Github: https://github.com/justalever.
Thank you for joining me on this journey! Remember to like, comment, and subscribe to my channel for more exciting content!
3
views
Part 7: Add products in real-time with Turbostreams - Supplement Stack Sharing App
PART 7 of 9
In part 7 we leverage the Turbo framework in Ruby on Rails to stream updates using Action Cable to the client-side views. This is a cool way to automate a lot of logic and make the UX of the app way more pleasing.
🔗 Source code: https://github.com/justalever/supstacker_demo
📕 Written version: https://web-crunch.com/posts/supplement-stack-sharing-app-ruby-on-rails/
📺 Playlist: https://youtube.com/playlist?list=PL01nNIgQ4uxOhHYZd6THGIFVBALJZCcpM&si=kbdUW1JbM551tC-i
======
I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch(https://web-crunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.
📰 Never miss an update! Click here to subscribe: https://www.youtube.com/user/webcrunchblog?sub_confirmation=1
💎 Looking to master Ruby on Rails? Enroll in my course HELLO RAILS: https://hellorails.io
💻 Explore my blog for more insightful content: https://web-crunch.com
♥️ Show your support by sponsoring me on GitHub: https://github.com/sponsors/justalever
☕️ Help me stay awake and fueled by buying me a coffee: https://www.buymeacoffee.com/webcrunch
🚀 Additional Links:
Enhance your Rails projects with Rails UI: https://railsui.com.
Hire me for Rails and design work: https://railsui.com/custom
X: https://x.com/webcrunchblog.
Github: https://github.com/justalever.
Thank you for joining me on this journey! Remember to like, comment, and subscribe to my channel for more exciting content!
1
view
Part 8: Add Tests to the Ruby on Rails App - Supplement Stack Sharing App
PART 8 of 9
In part 8 we test our product parsing logic to automate and ensure the data returned is valid.
🔗 Source code: https://github.com/justalever/supstacker_demo
📕 Written version: https://web-crunch.com/posts/supplement-stack-sharing-app-ruby-on-rails/
📺 Playlist: https://youtube.com/playlist?list=PL01nNIgQ4uxOhHYZd6THGIFVBALJZCcpM&si=kbdUW1JbM551tC-i
======
I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch(https://web-crunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.
📰 Never miss an update! Click here to subscribe: https://www.youtube.com/user/webcrunchblog?sub_confirmation=1
💎 Looking to master Ruby on Rails? Enroll in my course HELLO RAILS: https://hellorails.io
💻 Explore my blog for more insightful content: https://web-crunch.com
♥️ Show your support by sponsoring me on GitHub: https://github.com/sponsors/justalever
☕️ Help me stay awake and fueled by buying me a coffee: https://www.buymeacoffee.com/webcrunch
🚀 Additional Links:
Enhance your Rails projects with Rails UI: https://railsui.com.
Hire me for Rails and design work: https://railsui.com/custom
X: https://x.com/webcrunchblog.
Github: https://github.com/justalever.
Thank you for joining me on this journey! Remember to like, comment, and subscribe to my channel for more exciting content!
2
views
Part 9 - FINAL: Generate Unique Share Links - Supplement Stack Sharing App
PART 9 of 9
In part 9 (the final part of this series) we generate unique share links that are easily copied with a click-to-copy type of UI. I leverage Stimulus.js, Clipboard.js, and Tippy.js to make it all work.
🔗 Source code: https://github.com/justalever/supstacker_demo
📕 Written version: https://web-crunch.com/posts/supplement-stack-sharing-app-ruby-on-rails/
📺 Playlist: https://youtube.com/playlist?list=PL01nNIgQ4uxOhHYZd6THGIFVBALJZCcpM&si=kbdUW1JbM551tC-i
======
I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch(https://web-crunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.
📰 Never miss an update! Click here to subscribe: https://www.youtube.com/user/webcrunchblog?sub_confirmation=1
💎 Looking to master Ruby on Rails? Enroll in my course HELLO RAILS: https://hellorails.io
💻 Explore my blog for more insightful content: https://web-crunch.com
♥️ Show your support by sponsoring me on GitHub: https://github.com/sponsors/justalever
☕️ Help me stay awake and fueled by buying me a coffee: https://www.buymeacoffee.com/webcrunch
🚀 Additional Links:
Enhance your Rails projects with Rails UI: https://railsui.com.
Hire me for Rails and design work: https://railsui.com/custom
X: https://x.com/webcrunchblog.
Github: https://github.com/justalever.
Thank you for joining me on this journey! Remember to like, comment, and subscribe to my channel for more exciting content!
3
views