How to fix CJK font rendering and CSS gaps when using Satori for OG images

·3 views

A developer building a Korean saju reading service encountered three key failures while generating share cards and Open Graph images using Satori via Next.js's ImageResponse. The first issue was missing hanja glyphs, solved by passing an ordered font fallback array — a Korean handwriting face for Hangul and Latin, followed by a hanja-specific font — mirroring CSS unicode-range logic. The second problem was Satori's lack of support for mask-image, filter, and backdrop-filter, requiring all styling to be written inline in JSX rather than pulled from an external stylesheet. To work around this, the developer created a small inline token mirror of the site's light-theme CSS variables and committed to light-only card output. A third practical constraint noted was that Satori requires TTF or OTF font files, not woff2, and font paths must be hardcoded literals so Vercel's file tracing can correctly bundle assets at build time.

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)

Why Developers Are Shifting to On-Device AI Models for Production Systems in 2026

A major architectural shift is underway in software development, with engineers moving away from cloud-based AI APIs toward running large language models locally on their own hardware. The primary drivers are compounding latency issues in multi-step AI agent loops, where each cloud round-trip adds hundreds of milliseconds, making user-facing applications feel sluggish. Rising API costs, which scale with usage and token complexity, have also made cloud inference financially unsustainable for high-frequency production tools. Advances in quantization techniques — particularly 4-bit formats like Q4_K_M — now allow large models to run efficiently on mid-range consumer GPUs with minimal accuracy loss. Local inference engines have also introduced grammar-constrained decoding, which forces models to produce valid structured outputs, improving the reliability of automated agent pipelines.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Qt Remains a Top Choice for Cross-Platform Desktop Apps in 2026

Qt continues to be a leading framework in 2026 for building desktop applications that run natively on Windows, macOS, and Linux from a single C++ codebase. The framework offers two UI approaches: Qt Widgets for traditional, form-heavy desktop interfaces and Qt Quick/QML for modern, animated, and touch-friendly designs. Unlike web-based wrappers such as Electron, Qt compiles to native executables, resulting in better performance and a smaller memory footprint, though it requires C++ expertise. Beyond UI, Qt also covers networking, databases, concurrency, and file handling, reducing the need to integrate third-party libraries. Its maturity and long-term support make it particularly suitable for industrial, scientific, and enterprise software that demands years of maintenance.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Developer Builds Code-Focused Typing Trainer to Fix Slow Speeds on Symbols

A developer frustrated by slow typing on programming symbols like `=>`, `{}`, and `!==` built Typre, a free, open-source typing practice tool that uses only real code snippets. Unlike conventional typing trainers that rely on prose, Typre offers language-specific pools of actual Go, SQL, React, and Rust code across short, medium, and long run lengths. The tool also includes a punctuation-only drill mode, a shortcut trainer covering 61 VS Code and Vim commands, and standard metrics like WPM, accuracy, and daily streaks. Real-time races, per-language leaderboards, and challenge links are also available, though the developer acknowledges that WPM scores are verified only client-side and the leaderboard should not be treated as authoritative. Built with React 19, TypeScript, and Supabase, the project is live at typre.dev under an MIT licence.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

How to Detect and Fix Catastrophic Backtracking in JavaScript Regexes

A developer maintaining CodeSwap, a browser-based developer-tools site, documented a repeatable audit process for identifying JavaScript regular expressions vulnerable to ReDoS, or Regular Expression Denial of Service attacks. The core risk arises when nested or overlapping quantifiers allow the regex engine to explore an exponentially growing number of match paths before rejecting a crafted input. Testing the pattern /^(a+)+$/ with incrementally longer hostile strings revealed that every two additional characters roughly quadrupled processing time, reaching over six seconds for just 30 characters. OWASP identifies nested quantifiers and overlapping alternatives inside repetition as key warning signs of this vulnerability. The recommended fix is to eliminate ambiguous repetition — for example, replacing /^(a+)+$/ with /^a+$/ — and to always test suspicious patterns in an isolated environment using short, controlled inputs rather than on a live request thread.

0 comments Read more at DEV Community