Today's batch of frontend articles shows CSS stretching into territory that once demanded JavaScript, while React data libraries wrestle with SSR, bundle size, and Next.js App Router realities. If you're building dashboards, data visualizations, or design systems in 2026, these posts offer patterns that separate presentation from logic and keep your bundle lean.
Another Stab at the Perfect CSS Pie Chart… Sans JavaScript!
Antoine Villepreux refines the pure-CSS pie chart by moving percentage data to the parent container, then uses CSS custom properties with nth-child selectors to accumulate slice angles. This eliminates the JavaScript previously needed to calculate each slice's starting position based on all preceding values. The result is semantic HTML, accessible data, and no runtime computation:
ul[data-percentages] {
--slice-1: calc(var(--percent-1) * 3.6deg);
--slice-2: calc(var(--slice-1) + var(--percent-2) * 3.6deg);
}
li:nth-child(2) {
rotate: var(--slice-1);
}If you've been embedding chart libraries for simple data viz, this approach cuts out the dependency entirely.
Revealing Text With CSS letter-spacing
This post explores text effects by animating letter-spacing from negative values (where characters overlap) to positive spacing. The technique works well for hover-triggered acronym expansions or checkbox label swaps, using only transition and ::first-letter pseudo-elements. While the article notes a hypothetical ::nth-letter selector would unlock finer control, the existing tooling already enables interactive typography without JavaScript. It's a reminder that CSS properties designed for layout can double as animation primitives when you push their range.
Cross-Document View Transitions: Scaling Across Hundreds of Elements
When you move from demo to production, assigning unique view-transition-name values to hundreds of elements tanks performance if done upfront. The solution is view-transition-class for grouping styles, plus just-in-time assignment during navigation events:
navigation.addEventListener('navigate', (event) => {
event.intercept({
handler: async () => {
// Assign unique names only to transitioning elements
targetElement.style.viewTransitionName = `item-${id}`;
}
});
});The proposed ident() CSS function would automate unique name generation, but until browsers ship it, this event-driven pattern keeps transitions smooth at scale.
Best React chart libraries in 2026: Features, performance, and use cases
This guide evaluates nine React chart libraries with a focus on React 19 and Next.js App Router SSR compatibility. Recharts remains the default for most dashboards due to its component-based API and SVG rendering, which works server-side without client hydration hacks. Canvas-based libraries like react-chartjs-2 and Apache ECharts handle real-time data and large datasets better but require client-only rendering. The key insight: choose based on constraints (SSR requirements, bundle size, design system integration) rather than feature counts.
Build a headless table engine in Vue 3
This tutorial demonstrates separating table logic (filtering, sorting, pagination) from UI markup using a reusable useTableEngine composable and renderless components with scoped slots. The same data behavior can then power traditional tables, card grids, or custom layouts without duplicating logic. It's the headless UI pattern applied to data tables, ideal for design systems that need consistent behavior across multiple rendering surfaces.
Whether you're animating CSS properties beyond their typical use cases, scaling view transitions, or decoupling data logic from UI chrome, today's posts show how thoughtful architecture decisions keep bundles small and maintenance sane. 📊