Til Tracker

Discussion: Native `date_field` vs alternatives

Discussion: I considered alternatives to the native HTML5 date_field due to inconsistent styling/icon placement across browsers (Chrome vs Firefox vs Safari).
Alternative Considered: Rails date_select helper (outputs three dropdowns: Year, Month, Day). Custom JS date pickers were ruled out by the 37signals philosophy.
Decision: I stuck with date_field for simplicity and reliance on native browser behavior, accepting the minor cross-browser styling limitations. I added (YYYY-MM-DD) format hint to the label for clarity, as placeholder text isn't supported consistently for date inputs.
Learning: Native form elements offer simplicity, accessibility, and avoid JS dependencies but have limited styling control. I learned to weigh the trade-offs between custom solutions (more control, more complexity/JS) and accepting native limitations based on project philosophy (e.g., 37signals favors simplicity and defaults). Providing clear labels and format hints is important.

Tags: frontend ui ux html css form date date_field date_select accessibility browser-compatibility 37signals decision

Learned on: April 19, 2024 Edit

Task: Refine 'Log New Learning' form UI/UX

Task: Refine the UI/UX of the "Log New Learning" form (learnings/_form.html.erb) to align with 37signals principles (better spacing, guidance, alignment, font consistency).
Details: I focused on using standard Rails helpers, hand-crafted CSS, and HTML attributes (placeholder) for clear guidance, consistent spacing/fonts, and alignment with the index page layout. I used the _form.html.erb partial.
Learning: Good form UI involves clear labels, helpful placeholders, logical grouping (.form-group), consistent spacing/typography, and alignment with surrounding page elements. Using partials for DRY forms is good practice.

Tags: frontend ui ux css html rails view form form_with partial 37signals

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