SShortSingh.
Back to feed

Developer finds CMS images missed by build audit, cuts page weight 56x with CDN fixes

0
·1 views

A developer auditing their portfolio site used build-output analysis to catch oversized bundled assets, but later discovered the method had a blind spot: images served dynamically from Sanity's CMS were never part of the build and went undetected. When the developer opened the blog index in a browser and measured actual network traffic, they found the page serving 16 post covers weighed 9.88 MB, with one image alone reaching 3.13 MB despite rendering at roughly 250 pixels wide. The root cause was that the image URL builder utility, urlFor, was only used in one component and was absent from the pages displaying post cover grids, meaning raw, untransformed CDN URLs were being served instead. The fix involved writing a lightweight helper function that appends Sanity CDN parameters — including width caps, fit constraints, format negotiation, and quality settings — to image URLs at render time. After the change, the same sixteen cover images measured just 182 KB in total, a 56-fold reduction, highlighting how static build audits cannot account for assets fetched dynamically at runtime.

Read the full story at DEV Community

This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)

Log in to join the discussion and vote.

Log in

Related stories

0
ProgrammingDEV Community ·

Loadout Tool Lets Developers Carry AI Coding Agent Context Across Projects

A developer built an open-source tool called Loadout to solve the recurring problem of manually recreating AI coding agent configuration files every time a new project or environment is opened. Loadout acts as an adaptive context engine that detects the current working environment — such as a Rust, Next.js, or Python repo — and automatically injects the appropriate user-defined context into the agent. Unlike project-level files such as CLAUDE.md or AGENTS.md, Loadout stores personal workflow preferences and coding conventions in local, gitignored overlays, leaving shared team configurations untouched. Context is built from reusable fragments that can be mixed across different loadouts, avoiding duplication. The tool also supports six standardized workflow stages — explore, brainstorm, plan, implement, verify, and ship — so developers can maintain consistent engineering processes even when switching between different AI coding agents.

0
ProgrammingDEV Community ·

How Poor API Design With No Rate Limiting Caused a $10M Cloud Outage

A 2021 incident at a major cloud provider resulted in an estimated $10 million revenue loss after a single internal API with no rate limiting triggered a cascading failure. A misconfigured service entered a retry loop generating 10,000 requests per second, bringing the API down within minutes and taking three dependent services offline. Customers were locked out of their data for four hours before engineers traced the root cause. The outage highlighted critical gaps in API design, including the absence of rate limiting, circuit breakers, and retry guidance headers. Proper REST API design — covering correct HTTP method usage, status codes, rate limiting strategies like token buckets and sliding windows, JWT authentication, and security best practices — can prevent such failures at scale.

0
ProgrammingDEV Community ·

Developer Builds Local AI Platform to Detect and Fix Smart Contract Vulnerabilities

A developer has created SmartContractGuardian (VLD), an open-source AI-powered platform designed to identify and remediate security flaws in Solidity smart contracts. The tool combines static analysis, Retrieval-Augmented Generation (RAG), and multi-agent reasoning to provide more accurate and explainable vulnerability detection than either approach alone. A key design choice was keeping the AI pipeline fully local using Ollama and Qwen2.5-Coder 7B, so sensitive contract code is never sent to external cloud services. The system follows a multi-stage workflow that includes independent verification by a second AI agent, optional exploit validation via Foundry, and automated generation of a more secure revised contract. The project is publicly available on GitHub for developers seeking a privacy-preserving alternative to cloud-based smart contract auditing tools.

0
ProgrammingDEV Community ·

Dev Tool DSA View View Teaches Stacks, Linked Lists, and Tree Depth Visually

Frontend engineer nyaomaru has built an open-source tool called DSA View View that visualizes how data structure and algorithm implementations execute step by step. The latest tutorial covers three classic problems: Valid Parentheses, Reverse Linked List, and Maximum Depth of Binary Tree. Each problem introduces a distinct concept — stack-based bracket matching, pointer manipulation, and recursion respectively. The Valid Parentheses solution uses a LIFO stack to track opening brackets and verify correct closing order, running in O(n) time and space. The tool aims to make DSA learning more intuitive by letting users step through execution timelines rather than reading static code.

Developer finds CMS images missed by build audit, cuts page weight 56x with CDN fixes · ShortSingh