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

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

`rails db:seed` failed (NameError due to heredoc interpolation)

Context: I ran the generated seed script which populated Learning records from LEARNINGS.md. The error occurred processing an entry whose body contained the literal text params[:tag]. The default heredoc syntax (<<~BODY) attempted Ruby interpolation (#{...}) on this text, causing NameError: undefined local variable or method 'params' for main:Object.
Resolution: I changed the heredoc definition for the problematic entry in db/seeds.rb from <<~BODY to <<~'BODY' (note the single quotes). This prevents interpolation within that specific string, treating it literally.
Learning: I learned to be cautious when using interpolating heredocs (<<~DELIMITER) in seed files or scripts if the source text might contain #{}, ${}, or similar sequences that could be misinterpreted as code interpolation. Use non-interpolating heredocs (<<~'DELIMITER') or escape the relevant characters (\#{}) within the string if interpolation is needed elsewhere but not for specific literals.

Tags: seeds database ruby heredoc interpolation error debugging workflow

Learned on: April 20, 2024 Edit

CSS changes not reflected (Asset Pipeline/Cache/HTML issue)

Issue: CSS changes I added to application.css for form styling were not reflected in the browser despite server restarts and hard refreshes.
Troubleshooting Steps: I verified CSS file content. Checked browser Network tab (saw 200 OK (from memory cache), indicating stale cache). Ran rbenv exec rails assets:clobber and restarted/refreshed; still no change. Verified stylesheet_link_tag in layout. Verified asset pipeline gem (propshaft). Checked for potential Procfile.dev/manifest.js issues (none found/needed for Propshaft dev). Re-inspected CSS/HTML.
Resolution: I found that the required HTML structure changes (adding classes like form-container, form-group, placeholders) in _form.html.erb were missing/had been reverted. Re-applying the necessary HTML changes resolved the issue.
Learning: When CSS doesn't apply as expected, I learned to double-check *both* the CSS *and* the HTML structure it targets. Asset pipeline issues (caching) can occur, but often the root cause is simpler: the HTML/CSS edits weren't applied correctly or completely in the first place. rails assets:clobber is a key tool for suspected CSS/JS caching issues in development. Propshaft in development typically serves assets directly without complex manifests.

Tags: frontend css debugging asset-pipeline propshaft cache html workflow assets clobber

Learned on: April 19, 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