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

Incorrect element movement broke layout (`form_with`/Turbo)

Task: Move "Delete Selected" button to top, next to "Log New Learning".
Issue: Initial attempt incorrectly moved the entire learnings list (which was inside the form_with) along with the button form, breaking the layout significantly.
Resolution: I reverted the changes and restructured the view (learnings/index.html.erb). I moved only the submit button (<input type="submit">) into the top .actions div. Then, I ensured the main form_with tag wrapped the entire area containing both the actions/button *and* the list with checkboxes.
Learning: I learned to be careful when moving elements within complex form structures (form_with), especially those interacting with Turbo Frames or Streams. I need to ensure only the intended element is relocated and that the form still correctly encompasses all necessary inputs (checkboxes, submit button). Incorrect nesting can break form submission or layout.

Tags: frontend ui ux layout html css rails view form_with turbo

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