SShortSingh.
TopTechnologyAI & MLStartupsProgrammingScienceBusinessFinanceCrypto & Web3World
Back to feed
Programming

Why Font Swaps Caused Layout Shift on Arabic Pages: A Metrics Mismatch Explained

0
·9 views

A developer running a bilingual English and Arabic site found that the Arabic routes jumped on every cold load, moving the entire right-to-left column. The author argues that font-driven layout shift stems from a mismatch in metrics between the fallback font painted first and the webfont that replaces it, not from slow downloads, so a faster CDN would not help. Next.js's next/font automatically generates size-adjusted fallbacks for Latin text, but it derives them from Arial or Times New Roman and so does not cover Arabic, Cyrillic, or CJK scripts. The notes describe how average character width and the ascent-to-descent ratio determine how far content moves, and how font-display: optional can eliminate swap-driven shifts. The author recommends reproducing cold loads with caching disabled and throttling enabled, since a warm cache hides the problem during local testing.

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 ·

Coordinating Multiple Shuttles in Four-Way AS/RS: Routing, Traffic Control and Deadlock Avoidance

A four-way shuttle automated storage and retrieval system can move pallets both horizontally and vertically within a high-density rack, but adding more shuttles does not raise throughput proportionally. Multi-shuttle scheduling assigns storage and retrieval tasks across the fleet while coordinating routes, priorities and shared resources to keep the system stable. Shuttles competing for aisles, intersections, transfer points and lifts can cause waiting, repeated replanning and lost productive time. Uneven task allocation can leave vehicles idle, and resource conflicts can produce deadlocks even when physical collisions are avoided. Effective control therefore has to coordinate the whole material-handling chain, including lifts and conveyors, rather than optimize shuttle movement alone.

0 comments Read more at DEV Community
0
ProgrammingDEV Community ·

Keeping Helm Chart Values Consistent Across Staging and Production

A deployment can pass in staging yet fail in production with one replica, debug logging, and a wrong ingress host, often because the values were assembled differently rather than because of a chart bug. Helm merges values from the chart's defaults, parent chart files, and override files in a defined order, with maps merged key by key while lists are replaced entirely. Setting a key to null in an override removes the default, and helm get values and helm get values --all help reveal what each release actually uses. Common mistakes include duplicating the full values file per environment, embedding environment checks in templates, relying on long CI --set chains, and mishandling type coercion or secrets. The recommended approach keeps values.yaml as production-shaped defaults and limits each environment file to its differences, so templates remain identical across environments.

0 comments Read more at DEV Community
0
ProgrammingDEV Community ·

Changelog generator missed deleted files because it ignored git's D status

A developer building a Git changelog API found that a contributor's deletion of an entire module between two releases went unreported, with the tool producing no warning. The cause was that the generator only rendered added and modified files, dropping the deletion status that git diff reports. The fix treated deletions as first-class changes and gave them more prominent wording than additions. The developer also found that commit messages can be misleading, so the diff is now treated as the authoritative source and messages are demoted to a footnote. The author contrasts this with convention-based tools like semantic-release and changesets, which depend on disciplined commit formats.

0 comments Read more at DEV Community
0
ProgrammingDEV Community ·

Oversized HTML Reports in Claude Code Desktop Preview Could Expose Local SSH and Cloud Credentials

Noma Security disclosed a vulnerability in the HTML preview pane of the Claude Code Desktop app that could let a script in a crafted file read local secrets. Files under 256KB were rendered with a restrictive Content Security Policy, but larger files were loaded via file:// URLs without those protections. The flaw could expose SSH keys, cloud and GitHub tokens, and other credentials, and Anthropic rated it CVSS 8.7 (High). A fix reached users through auto-update in Claude Desktop version 1.30096.1, and no in-the-wild exploitation has been reported.

0 comments Read more at DEV Community