Lessons Learned

Documenting my understanding of API’s with a test app for Pixeled

Mobile Optimization

• Jeremy Cherfas tried loading it on a train and it was super slow
• Made me realize that I optimized the layout but not the data loading, which is just as important or more so
• Turns out I was using the full high res images by default and thankfully the API exposes more types

Cursor

• Not so great at certain simple frontend fixes to layouts, even with screenshots.
• I asked it why it failed to fix a layout issue with a modal and why I had to be the one to realize that it was using flexbox instead of grid, it came back with a fairly interesting answer about its strengths and limitations.

Why This Happened

1. Pattern matching bias: I applied a flexbox column pattern (modal + flex column) without fully considering the width constraint problem. I focused on vertical layout and missed the horizontal width issue.

2. Incremental fixes: Previous attempts (e.g., overflow-wrap, max-width) were partial. I didn’t step back to question the layout model.

3. CSS layout understanding: I’m more comfortable with:

   • JavaScript logic and algorithms
   • CSS syntax and properties
   • Less so with layout models and when to use Grid vs Flexbox

4. Visual reasoning: Screenshots help, but I don’t “see” layout the same way. I tend to reason from code patterns rather than visual outcomes.

Strengths & Limitations

Strengths:

• JavaScript logic, algorithms, API integration
• Syntax and property lookup
• Debugging and error handling
• Following patterns when given clear examples

Limitations:

• Visual layout intuition
• Choosing the right layout model (Grid vs Flexbox)
• Anticipating edge cases in responsive design
• Understanding when a structural change is needed vs a CSS tweak

How to Work Better Together

1. You spot layout issues; I fix them. You’re the visual designer; I’m the implementer. When you see a problem, describe it and we’ll address it.

2. When you suggest a direction (e.g., “try CSS Grid”), I’ll implement it and explain why it works.

3. Flag it early: If I’m tweaking CSS without fixing the root cause, say “This feels like a structural issue—should we change the layout model?”

4. Learn together: I can explain how Grid/Flexbox works, but you’re the one validating the visual result.

5. Use a checklist for layout issues:

   • Is the problem horizontal width or vertical flow?
   • Should content be constrained or allowed to grow?
   • Does the layout model match the problem?

The Real Answer

You don’t need to become a CSS expert. You’re the visual designer; I’m the code implementer. When you see something wrong, describe it and suggest a direction if you have one. I’ll implement it and verify it works.

Review of a CSS fix to the modal layouts on desktop

What Went Wrong

The Original Problem:

• The modal used display: flex; flex-direction: column; with max-width: 90vw.
• Flexbox expands to fit content. When a caption was long, it pushed the modal wider.
• The image and caption were both flex items, so the caption could drive the width.

Why It Was Tricky:

1. Flexbox vs Grid: Flexbox expands to fit content. Grid can control column sizing, but column sizing keywords matter.
2. Column sizing keywords:
   • 1fr expands to fill available space
   • max-content expands to fit the widest content
   • fit-content expands up to a limit
   • min-content uses the minimum intrinsic width (the narrowest the column can be)
3. Block vs inline-grid:
   • display: grid is block-level and can take full width
   • display: inline-grid is inline-level and sizes to its content

The Fix That Worked

display: inline-grid; /* Inline-grid sizes to content, not full width */
grid-template-columns: min-content; /* Column width = minimum needed */

Why this works:

• inline-grid makes the container size to its content, not the viewport.
• min-content sets the column width to the minimum needed for the content.
• In practice, the image width sets the column width (assuming it’s wider than any single word).
• The caption then wraps within that column width instead of expanding it.

Why earlier attempts failed:

• display: grid with width: fit-content or width: max-content — still allowed expansion.
• grid-template-columns: 1fr — expands to fill available space.
• grid-template-columns: minmax(0, max-content) — max-content still expands to fit the caption.

The key insight: Use inline-grid to size to content, and min-content to constrain the column to the image width, not the caption width.

This is a common CSS layout issue: choosing the right container display type and sizing keywords for the desired constraint behavior.

Explanation of technical terms

Client-side fetch vs server-side rendering

• Client-side fetch: JavaScript in the browser calls the API. When you open the page, the browser requests data.
• Server-side rendering: Your server (like Astro) calls the API and builds the HTML, then sends it to the browser.
• Since you’re using vanilla JS, you’ll use client-side fetch: JavaScript in the HTML page calls the Pixelfed API.

CORS limitations

• CORS (Cross-Origin Resource Sharing): Browsers block JavaScript from calling APIs on different domains unless the API allows it. Pixelfed may not allow browser calls from your domain, which would block a client-side fetch.
• If CORS blocks it, options:

1. Use a small server/proxy to call the API
2. Use server-side rendering
3. Find if Pixelfed exposes a public, CORS-enabled endpoint

Notes on branches and deployments

Here’s how Netlify deployments work:

Netlify deployments

Preview deployments:

• Stay active until you delete them (or configure auto-delete)
• Merging a branch into main does not automatically delete the preview deployment
• They have unique URLs you can still access

Main deployment:

• Updates when you push to main
• One active production deployment

How to clean up old preview deployments

Option 1: Delete in Netlify Dashboard

1. Go to your Netlify site dashboard
2. Click “Deploys” (or “Sites” → your site → “Deploys”)
3. Find the preview deployment from your branch
4. Click the ”…” menu → “Delete deploy”

Option 2: Auto-delete merged branch deployments

1. In Netlify: Site settings → Build & deploy → Continuous Deployment
2. Enable “Delete merged branch previews” or similar (varies by Netlify version)
3. This will auto-delete preview deployments when you merge the branch into main

Option 3: Keep a limited number

• Netlify has settings to keep only the N most recent deployments
• Old ones are archived/deleted automatically

Summary

• Git branch: Merging into main doesn’t delete the Git branch (you can delete it separately)
• Netlify preview: The preview deployment stays until you delete it or configure auto-deletion

For a small number of branches, manual cleanup is fine. For many branches, enable auto-deletion to keep things tidy.