Til Tracker

PDF tab title incorrect (comes from embedded metadata)

Issue: When I opened linked PDFs (cv.pdf, cover_letter.pdf), the browser tab showed an incorrect title (e.g., "Minimalist White and Grey Professional Resume").
Cause: The browser tab title for directly viewed PDFs is taken from the Title property embedded in the PDF's metadata, set when the PDF was created.
Resolution: I edited the PDF metadata using a dedicated PDF editor (Nitro PDF Pro, as Preview was insufficient) to change the Title property within each PDF file. I re-copied the modified PDFs to public/documents/.
Learning: The display title for linked assets like PDFs is controlled by the asset's internal metadata, not the HTML page linking to it. I learned editing requires tools capable of modifying PDF properties (Preview might not work; Acrobat, Nitro Pro, or other editors are needed).

Tags: frontend workflow debugging

Learned on: April 22, 2024 Edit

Routing Error for static files (`/documents/cv.pdf`) in development

Issue: Linking to PDFs I placed in public/documents/ resulted in No route matches [GET] /documents/cv.pdf in the development environment.
Cause: By default, the Rails development environment often doesn't serve static files from the public directory. This is typically enabled only in production for performance reasons.
Resolution:
1. I enabled static file serving in development by setting config.public_file_server.enabled = true in config/environments/development.rb.
2. I ensured the PDF files were correctly placed in til_tracker/public/documents/.
3. I restarted the Rails server (./bin/dev).
Learning: To serve static assets (like PDFs, images) directly from the public folder in the development environment, I learned I must explicitly set config.public_file_server.enabled = true in config/environments/development.rb and restart the server. In production, this is usually handled by the webserver (like Nginx or Apache) or enabled by default in production.rb.

Tags: rails-core environment-setup frontend error-handling debugging

Learned on: April 22, 2024 Edit

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

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

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