Til Tracker

Clarification: CSS Styling Consolidation Effects

Context: We discussed visual changes after my CSS cleanup (buttons, fonts, tags).
Buttons: Change to blue (#007bff) resulted from my consolidating multiple previous rules for .button and input[type="submit"] into one consistent style for simplicity.
Fonts: Adding font-family: inherit; to form inputs/textareas ensures they use the main body font stack, improving consistency.
Tags: Change from pill-shaped (border-radius: 10rem;) to squared (border-radius: 4px;) was part of my cleanup for a cleaner look.
Learning: CSS consolidation aims for simplicity but can alter appearance. I learned that explicit styles (font-family: inherit;) prevent varying browser defaults. Intentional style changes should be noted.

Tags: css frontend ui ux refactoring button font tags consistency css-cleanup

Learned on: April 21, 2024 Edit

CSS Layout Fix: Form container width

Issue: My form pages (/learnings/new, edit) appeared narrow after CSS cleanup.
Context: Applying max-width: 700px; to the .form-container class during CSS refactoring restricted the entire form area.
Resolution: I removed the max-width: 700px; rule from .form-container in application.css.
Learning: I learned to be mindful of the layout impact of CSS rules like max-width on containers. Testing responsiveness and appearance after changes is important.

Tags: css layout frontend ui ux debugging css-cleanup

Learned on: April 21, 2024 Edit

Seeded text displayed raw HTML & unstyled backticks

Context: The format_learning_body helper used sanitize: false to preserve <strong> tags, but this also allowed other raw HTML from the source text (like <input>) to render. Backticks (`) were preserved but had no special styling.
Resolution: I modified the format_learning_body helper:
1. Escape all HTML first (ERB::Util.html_escape).
2. Bold keywords (<strong>) on escaped string.
3. Wrap backticked content () with <code>` tags on bolded string.
4. Apply simple_format(..., sanitize: false) last.
5. Added CSS for code tag.
Learning: When displaying potentially unsafe text that also needs specific safe HTML formatting, I learned the order matters: Escape first, then selectively add safe tags, then apply structural formatting (like simple_format with sanitize: false).

Tags: seeds formatting view helper html css escaping sanitization code bold frontend debugging

Learned on: April 20, 2024 Edit

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