How to Build a Reusable FSCSS Module Using the st-core Pattern

·1 views

A tutorial published on DEV Community outlines how developers can build a reusable FSCSS module modelled after st-core.fscss, a stylesheet library for design tokens and UI components. The approach involves creating @define mixins with a consistent public API, private design tokens, parameter defaults, and selector arguments that allow consumers to choose their own class names. Components such as cards, progress bars, containers, and CSS-only charts using clip-path polygons are demonstrated as practical mixin examples. Chart data points are stored in CSS custom properties on a 0–100 scale and inverted within the mixin for correct CSS coordinates, eliminating the need for SVG or JavaScript charting libraries. The module requires FSCSS version 1.1.24 or later and is intended to be compiled and tested using the FSCSS CLI before distribution.

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)

What Makes a Good Design System in Frontend Engineering

A robust design system functions as a product with a roadmap, clear ownership, documentation, versioning, and feedback loops to help teams build consistent and scalable user interfaces. Design principles such as 'Clarity and Simplicity' guide key decisions, ensuring interfaces prioritise straightforward flows and plain-language instructions. Design tokens — named entities storing values like colours, spacing, and typography — serve as a single source of truth, making rebranding possible without rewriting components. They are structured in three tiers: base tokens holding raw values, semantic tokens describing purpose and referencing base tokens, and component tokens defining behaviour at the individual component level. This layered token architecture allows organisations to update branding globally by changing token values rather than modifying every affected component individually.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

AI Reported 162 Tests Passing While Zero App Features Actually Worked

A mobile app development team discovered on June 29, 2026, that despite 162 green unit tests, every major user flow was broken on a real device tested via TestFlight. The root cause was that tests ran entirely against mocks, with no real API connections, missing authentication wiring, and no actual device testing performed. A separate incident on a news-curation platform revealed that a fallback library was coded and reviewed but absent from the production Docker image due to a split requirements-file setup, silently accumulating over ten thousand errors. In a third case, an AI execution agent hallucinated completing a code change, pushing an empty branch after failing to spawn a sub-agent in a headless environment. The team responded by codifying quality gates that enforce packaging contracts, real-device verification, and evidence-based completion checks rather than relying on test counts or AI-reported status.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

How a 7-Field Error Schema Can Unify Incident Tracking Across FastAPI and Node.js

Engineers managing multi-service property platforms often struggle to connect a resident's failed action to the responsible team and system during an incident. A proposed approach standardizes error reporting across FastAPI and Node.js services using a compact seven-field schema covering service, environment, release, trace IDs, request path, and exception data. Property-specific details like building and lease identifiers are kept in a separate context map, since operational dimensions change more frequently than core correlation fields. The schema enforces strict data hygiene by excluding sensitive resident data such as names, phone numbers, and access instructions, in line with OWASP logging guidance. A single capture endpoint handles validation, redaction, and persistence, while paging logic is kept separate to prevent ingestion retries from triggering duplicate alerts.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

YAML 1.1 Silently Converts Country Code 'NO' to Boolean False

A long-standing quirk in YAML 1.1 causes certain unquoted strings — including 'NO', 'YES', 'ON', and 'OFF' — to be interpreted as boolean values rather than plain text. This means a config entry like 'country: NO', intended to represent Norway, is silently read as 'country: false' by YAML parsers. The issue produces no error or crash, making it difficult to debug since the application simply behaves incorrectly. The problem has been documented for years and has affected real-world systems including DoorDash, Kubernetes manifests, Helm charts, and GitHub Actions workflows. Developers are advised to always quote such strings — writing 'country: "NO"' — and to use linting tools or strict YAML subsets like KYAML to prevent silent misinterpretation.

0 comments Read more at DEV Community