Til Tracker

Clarification: Turbo's data-turbo-confirm attribute

Context: We discussed the purpose of data-turbo-confirm attribute.
Explanation: It's a Hotwire/Turbo HTML attribute (data-turbo-confirm="Are you sure?") that automatically triggers a browser confirmation dialog before executing a link click or form submission.
Use Case: Commonly used for destructive actions (like deletion) to prevent accidental clicks.
Learning: I learned to utilize standard Hotwire/Turbo attributes for common UX patterns like confirmation dialogs with minimal effort.

Tags: hotwire turbo javascript frontend ui ux html attribute

Learned on: April 21, 2024 Edit

Stimulus controller not executing (dynamic button disable)

Issue: Despite seemingly correct Stimulus controller (selection_controller.js) setup, HTML attributes (data-controller, data-action, data-target), and CSS, the "Delete Selected" button remained disabled even when I checked items.
Context: Extensive troubleshooting performed: Verified controller registration (stimulus:manifest:update, controllers/index.js), javascript_importmap_tags in layout, controllers/application.js initialization. Added console.log statements; logs did not appear in the browser console, indicating the controller code was not executing. Tested moving data-controller scope. Checked for conflicts/errors.
Resolution: Due to the inability to diagnose why the Stimulus controller wasn't connecting/executing, I reverted the dynamic disabling feature for simplicity. I deleted the controller file, removed the registration, cleaned the data- attributes from view/layout, and removed CSS styles.
Learning: If JavaScript behavior (especially Stimulus) fails without obvious errors after checking standard setup (loading, registration, attributes, initialization, console logs), I learned to consider potential deeper issues: asset pipeline problems, JS bundling errors (check network tab/console thoroughly), subtle DOM interactions (e.g., Turbo Frames replacing elements Stimulus was connected to), typos in data- attributes or controller identifiers, or timing issues. Sometimes reverting to a simpler solution is pragmatic if debugging proves too complex or time-consuming for the feature's value.

Tags: frontend javascript stimulus hotwire debugging asset-pipeline turbo dom error

Learned on: April 19, 2024 Edit

Feature: Implemented tag filtering

Action: I implemented the tag filtering feature.
Details: I added a tag_list helper to the Learning model (simple tags.split(',').map(&:strip)). I updated LearningsController#index to filter by params[:tag] (where("tags LIKE ?", "%#{params[:tag]}%")) and collect unique tags for the view (Learning.pluck(:tags).flat_map { |t| t.split(',') }.uniq). I updated index.html.erb with a turbo_frame_tag around the list, clickable tag links (link_to tag, learnings_path(tag: tag)), and filter controls. I added basic CSS styling for tags.
Learning: I learned that simple string-based tags (comma-separated) can be made functional for filtering using basic Rails querying (LIKE or string_to_array in PG) and Turbo Frames for efficient UI updates without full page reloads, adhering to the 37signals principle of starting simple.

Tags: feature rails-core model controller view tags filtering turbo hotwire sql like css ui 37signals

Learned on: April 14, 2024 Edit