Dynamic Ux On Aggressively Cached Pages Via Client-Side State
Key takeaways
- Admin-only edit links are conditionally displayed client-side by checking a localStorage key and injecting an edit link from a per-page data-admin-url attribute.
- Clicking the Random button stores the tag name and a timestamp in localStorage before redirecting to a /random/{tag}/ endpoint that selects a random post and redirects to it.
- The content system uses four separate Django models: entries, link posts (blogmarks), quotations, and notes.
- The random tag feature was implemented using Claude Code for web via prompts from an iPhone, including endpoint creation, tests, UI changes, and the localStorage persistence behavior.
- The persistent Random button is only re-injected on page load if the stored timestamp is within the last 5 seconds.
Sections
Dynamic Ux On Aggressively Cached Pages Via Client-Side State
The corpus describes a consistent pattern: keep HTML identical at the CDN layer (full-page caching) while selectively adding per-user/per-session UI elements via JavaScript and localStorage. Admin affordances (edit links) and user navigation affordances (Random within a tag) both rely on local browser state rather than server-rendered personalization, which preserves cacheability while enabling interactivity. A tight time window (5 seconds) is used as a guardrail to limit persistent UI carryover between pages.
- Admin-only edit links are conditionally displayed client-side by checking a localStorage key and injecting an edit link from a per-page data-admin-url attribute.
- Clicking the Random button stores the tag name and a timestamp in localStorage before redirecting to a /random/{tag}/ endpoint that selects a random post and redirects to it.
- The persistent Random button is only re-injected on page load if the stored timestamp is within the last 5 seconds.
- The website is full-page cached behind Cloudflare with a 15-minute cache header to withstand large traffic spikes.
- Setting localStorage.ADMIN to '1' enables admin edit links in the browser without requiring server-rendered personalization.
- Tag pages include a 'Random' button that redirects users to a random post with that tag and can persist to continue random navigation within the same tag.
Cache Exceptions For Dynamic Redirect Endpoints
Despite a generally aggressive caching posture, the Random feature depends on a server endpoint that must remain dynamic on every request. The corpus specifies that /random/{tag}/ is marked no-cache to prevent Cloudflare from caching redirect responses, allowing repeated requests to yield different targets while leaving the rest of the site cacheable.
- Clicking the Random button stores the tag name and a timestamp in localStorage before redirecting to a /random/{tag}/ endpoint that selects a random post and redirects to it.
- The website is full-page cached behind Cloudflare with a 15-minute cache header to withstand large traffic spikes.
- The /random/{tag}/ endpoint is marked no-cache so Cloudflare will not cache the redirect response.
Data-Model-Driven Query Complexity And Scaling Bottlenecks
Because tagged content spans multiple Django models, random selection initially required a union across four tables to generate candidates. The corpus also records a concern that ordering large unions randomly may be inefficient for tags with thousands of items, motivating a shift to a CTE-based query. The repeated bottleneck theme is that uncached endpoints concentrate load and therefore must be especially efficient.
- The content system uses four separate Django models: entries, link posts (blogmarks), quotations, and notes.
- Random selection initially used a union across four content tables to assemble candidates for a tag, order them randomly, and redirect based on the selected object.
- The random-selection query was improved using a CTE-based approach to handle large tags more efficiently.
Ai-Assisted Full-Stack Implementation Workflow
The corpus asserts that an LLM coding tool (Claude Code for web) was used from a mobile device to implement a complete feature slice (endpoint, tests, UI changes, and persistence behavior). The concrete delta is not just code generation, but an end-to-end development workflow that spans backend, frontend, and testing.
- The random tag feature was implemented using Claude Code for web via prompts from an iPhone, including endpoint creation, tests, UI changes, and the localStorage persistence behavior.
Unknowns
- What are the actual performance characteristics of /random/{tag}/ (latency, DB load, error rates) before and after the CTE-based change, especially for tags with thousands of items?
- What specific cache-control directives are used for the no-cache behavior on /random/{tag}/, and is Cloudflare configuration verified to respect them in the deployed environment?
- How is tag membership represented across the four models, and what indexes or database schema choices support efficient random selection across them?
- What are the security and operational implications of using localStorage as the toggle for admin edit links (e.g., whether links expose sensitive admin URLs, and what safeguards exist)?
- What measurable development outcomes resulted from using Claude Code (e.g., lead time, review time, defect rate) compared to non-AI-assisted changes?