How I Built It: Calendar UI with Turbo Frames, Tailwind, and Alpine.js @adamlogic

Adam McCrea Building a dynamic calendar interface with Ruby on Rails

In this video, I walk through a cool calendar feature I've been working on. I dive into the tech stack - Ruby on Rails, Phlex, Alpine JS, Turbo Frames, and Tailwind - and show how they come together to create a slick, interactive UI.

I break down the component structure, CRUD operations, hover effects, and that neat highlight fade when you update an entry. The best part? Barely any custom JavaScript needed.

Phlex lesson on GoRails: gorails.com/episodes/components-with-phlex-in-rails

00:28 Demo: Calendar Interface
01:17 Exploring the Phlex Component
02:44 Markup and Styling
07:10 Hover Behavior with Alpine JS
09:31 CRUD Operations and Turbo Frames
11:34 Highlight Effect with Alpine and Tailwind

updated 2 months ago

How I Built It: Calendar UI with Turbo Frames, Tailwind, and Alpine.js

Adam McCrea 2024-08-05 | Building a dynamic calendar interface with Ruby on Rails

In this video, I walk through a cool calendar feature I've been working on. I dive into the tech stack - Ruby on Rails, Phlex, Alpine JS, Turbo Frames, and Tailwind - and show how they come together to create a slick, interactive UI.

I break down the component structure, CRUD operations, hover effects, and that neat highlight fade when you update an entry. The best part? Barely any custom JavaScript needed.

Phlex lesson on GoRails: gorails.com/episodes/components-with-phlex-in-rails

00:28 Demo: Calendar Interface
01:17 Exploring the Phlex Component
02:44 Markup and Styling
07:10 Hover Behavior with Alpine JS
09:31 CRUD Operations and Turbo Frames
11:34 Highlight Effect with Alpine and Tailwind

Migrating an 8-year-old SaaS app from Heroku to Render

Adam McCrea 2024-10-18 | Judoscale is a Rails app that’s been running on Heroku since 2016. In this video we see what it takes to migrate from Heroku to Render. Forget “hello world” demos, this is what migrating an app looks like in the real world.

judoscale.com

00:00 Introduction to Migrating SaaS Applications
01:05 Overview of JudoScale and Migration Plan
01:26 Setting Up the Staging Environment on Render
05:51 Configuring Environment Variables
09:59 Deploying the Web Service
11:44 Creating and Deploying the Worker Service
17:33 Handling Render Blueprint Failures
18:33 Manual Adjustments for Worker Service
19:35 Deploying and Linking Environment Variables
21:02 Setting Up Auto-Scaling for Worker Service
21:17 Configuring JudoScale with Render
25:00 Auto-Scaling Web Services
26:23 Adding Custom Domains
28:39 Migrating Clock Processes
31:38 Final Steps and Future Plans

NextJS to Rails: The code that powers our new marketing site

Adam McCrea 2024-09-11 | I just finished rebuilding our marketing site in Ruby on Rails, and it’s such a joy to work with! In this video I take you on a tour of our new Rails-driven “content” site (not a static site).

🙌 Let’s be friends! https://x.com/adamlogic
✉️ Don’t miss a thing: judoscale.com/newsletter
📚 Read more at our blog: judoscale.com/blog

00:00 Introduction to the Rewrite
00:35 Overview of the New Marketing Site
02:12 Exploring the Blog and Docs
03:03 Markdown to HTML Conversion
07:44 Building and Managing Landing Pages
11:14 Creating Forms and QR Code Generator
13:46 Conclusion and Final Thoughts

Iterating On Our Calendar UI - Current Time Marker

Adam McCrea 2024-08-19 | Join me for some live-coding as I make some UI improvements to the “current time” marker in our new calendar. This is a Rails application, and we’ll be using Phlex and Tailwind for this feature.

How I built the calendar UI: youtu.be/KWA3qCGRP5g
Find me on Twitter: twitter.com/adamlogic
What I work on everyday: judoscale.com