Developer Compares JSON-Locked vs Design-System AI Web Tool Generation Side by Side

·2 views

A developer building web tools with AI assistance conducted a controlled experiment to compare two design-locking approaches: one using a strict JSON schema and a fixed template, and another using a design-system toolkit where the AI writes its own page template. Both sides generated the same BMI calculator in a single pass using separate Claude Opus sessions, with no cross-contamination or post-generation edits. The JSON approach required the AI to write only 34 lines of schema-conformant data, while the design-system approach produced a 313-line template plus a five-language dictionary. The developer clarified that a 'thin-looking' JSON output reflects insufficient build-out of the renderer, not a flaw in the locking method itself. The comparison was built retrospectively, as the developer had originally chosen the design-system path without running this side-by-side test.

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)

Renamed Collection URL and Lazy-Load Bug Wiped a Store's Top Product from Search

A handmade lighting store's best-selling product vanished from search results shortly after a new theme launch, prompting an urgent investigation. The root cause turned out to be two separate issues: a collection renamed in the dashboard had silently changed its public URL, breaking over a year's worth of inbound links and passing search authority into a 404 dead end. A permanent 301 redirect was added to restore the old path and recover the lost link equity. A second problem was found in the product grid's 'Load More' button, which loaded additional items via JavaScript without providing crawlable HTML links, leaving the best-seller invisible to search crawlers. The fix preserved the interactive UI while adding a real anchor tag so both crawlers and users could reliably reach the full catalog.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Sarj.ai CTO Builds Open-Source Linter to Keep AI-Generated Code in Check

As AI tools like Codex increasingly write code at speed, thorough human code review has become impractical at scale. To address this, the CTO of Sarj.ai developed an open-source linting tool called Standards, which encodes over three years of code review experience into more than 100 deterministic rules. The linter runs automatically during the pre-commit process, flagging violations in AI-generated code and prompting the AI agent to fix them without developer intervention. Rules range from simple conventions — such as enforcing uuidv7 over uuidv4 — to nuanced structural guidelines like the stepdown rule for code readability. Released under the MIT license, the tool aims to preserve the speed advantages of AI-assisted development while maintaining code quality and correctness.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Why File Encryption and App Lock Screens Are Not the Same Thing

A passcode or biometric prompt controls access to an app but does not guarantee that stored files are encrypted, making the two features fundamentally different layers of protection. Privacy app developer ArkWarden highlights this distinction, noting that a file left in its original form can still be exposed through backups, exports, or implementation errors even if an app requires Face ID. ArkWarden encrypts each stored file on-device using AES-256-GCM via Apple CryptoKit, with a 256-bit master key generated locally and never transmitted to external servers. The app uses PBKDF2 key derivation combined with the iPhone's Secure Enclave, meaning copied vault data cannot be brute-forced on another machine. Because no server-side account is involved in normal use, password reset via email is unavailable, so users are instead offered a 12- or 24-word recovery phrase, shifting more control and responsibility to the individual.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

How to build a drift-free fullscreen countdown timer using vanilla JavaScript

A developer building a fullscreen countdown timer for blankscreen.io found that the standard setInterval approach causes time drift, especially in background tabs. To fix this, they used performance.now() with requestAnimationFrame to measure actual elapsed time instead of counting ticks. The Screen Wake Lock API was integrated to prevent devices from sleeping mid-countdown, with a visibility change listener to re-request the lock if the tab is backgrounded. Rather than loading an external audio file, a synthesized two-tone alarm was generated on demand using the Web Audio API, avoiding autoplay policy issues. The article shares reusable code snippets for each of these three techniques as progressive enhancements for any browser-based timer project.

0 comments Read more at DEV Community