Elegant CSS Date Range Selection with nth-child

https://pretextjs.dev A new frontend library called Pretext (March 2026) is trying to change how we handle text layout. Current approach: Render → Measure → Re-render Pretext approach: Calculate → Render once Instead of using DOM measurements like getBoundingClientRect(), it lets you: • Predict text size before rendering • Avoid layout shifts • Reduce re-renders Useful for: • Chat/message UIs • Infinite scroll lists • Dynamic cards • Multilingual layouts It works without the DOM and can run on the server as well. Still new, but interesting direction for performance-focused UIs. #frontend #javascript #reactjs #webperformance

🚀 Website Performance Series – Part 5 Many developers focus only on images… but ignore JavaScript impact. Heavy or blocking JS can: • Delay interaction • Increase load time • Hurt user experience ✔ Always audit scripts: • Remove unused • Defer non-critical • Limit third-party usage #JavaScript #Frontend

Stop letting runtime CSS ruin your Core Web Vitals Traditional CSS-in-JS libraries execute styles directly in the browser. This bloats your JavaScript payload and creates rendering bottlenecks that frustrate your users. The modern frontend solution is adopting zero-runtime CSS in Next.js. By compiling styles at build time, you completely eliminate JavaScript execution overhead during the critical page load. Faster load times directly impact your business metrics. Achieving better Core Web Vitals translates directly into higher SEO rankings and increased conversion rates. • Switch to CSS Modules or Tailwind CSS to generate static styles during the build process. • Reduce your JavaScript payload to instantly improve your Largest Contentful Paint (LCP). • Pre-compile your application styles to prevent layout shifts (CLS) and ensure a stable UI. Are you still relying on runtime CSS, or have you made the switch to build-time styling? #WebPerformance #NextJS #FrontendDevelopment #WebArchitecture

Agree 1000x 👍 I don’t understand how anyone thought Tailwind was a good idea in the first place. I imagine its support coming from a wave of secret-CSS-haters who didn’t understand CSS’ inherent beauty 🤷🏻♂️

Completely agree with this. Modern CSS has evolved to the point where a framework simply isn’t needed - unless you don’t understand CSS…

Tailwind should be considered a legacy tool at this point. Use the CSS language as it was designed instead of inventing another markup-based styling language, which leads to basic software anti-patterns (e.g. magic numbers or abbreviations like "pt-0.5"), a maintenance nightmare, and a huge knowledge gab. #webdev #reactjs #css #softwareengineering #tailwindcss

Couldn't agree more on this take on Tailwind. I’m a firm believer in separation of concerns, and I still prefer keeping my SCSS separate. Even when scaffolding new projects with AI, I find it constantly gravitates toward Tailwind. I often find myself questioning if I’m just being a 'grumpy old man' as I refactor it back to SCSS, but there is something to be said for the maintainability and clarity of a dedicated style sheet.

Server-Side Rendering or Client-Side Rendering One of the most impactful decisions in a React project isn't which library to use — it's when to render. After working with Next.js on several production systems, here's a practical breakdown: ✅ Use Server-Side Rendering (SSR) when: • SEO matters (landing pages, public content) • The page depends on frequently updated data • You need faster Time to First Byte (TTFB) ✅ Use (CSR) when: • The page is behind authentication • Interactivity is the core experience • Data doesn't need to be indexed 💡  Use React Server Components when: • You want zero JS sent to the client for static parts • You're fetching data at the component level without prop drilling 📈 The real skill isn't mastering one approach — it's knowing which one fits the problem. What rendering strategy do you default to and why? Drop it in the comments. 👇 #React #NextJS #WebDevelopment #Frontend #JavaScript

𝐖𝐡𝐚𝐭 𝐢𝐟 𝐦𝐞𝐚𝐬𝐮𝐫𝐢𝐧𝐠 𝐭𝐞𝐱𝐭 𝐨𝐧 𝐚 𝐰𝐞𝐛𝐩𝐚𝐠𝐞 𝐰𝐚𝐬 500𝐱 𝐟𝐚𝐬𝐭𝐞𝐫? That's not a marketing claim. That's Pretext.js. Every time a browser figures out how tall a block of text is, it stops and re-renders. Do that 1,000 times? Your page crawls. Pretext.js just does the math instead. No tricks. Just arithmetic. Two functions. That's the whole API. → prepare() — describe your text once. → layout() — get the height instantly, every time after. 📊 The numbers are wild: → Traditional DOM approach: 1,000 items = ~94ms → Pretext.js: 1,000 items = ~0.05ms That's 500x faster. Zero DOM access. Built by Cheng Lou (ex-React core team). Already at 39k+ GitHub stars. If you care about fast, smooth web experiences — worth 5 minutes 👉 pretextjs.dev #javascript #webdev #frontend #opensource

Tailwind CSS v4 ships and deletes tailwind.config.js. All of it. Your entire theme now lives in CSS: @import "tailwindcss"; @theme {  --color-brand-500: oklch(58% 0.18 250);  --font-sans: 'Inter', sans-serif;  --spacing-18: 4.5rem; } Define --color-brand-500 and you instantly get bg-brand-500, text-brand-500, border-brand-500 — the full utility suite. Generated automatically. No config file. No content paths. No PostCSS setup. And it's fast. Embarrassingly fast. → Full builds: 5× faster (Rust-based Oxide engine) → Incremental builds: 100× faster (microseconds per save) → v4.2 recompilation: 3.8× faster (measured by Next.js team) What else changed: 📦 Container queries built-in — no plugin. Components adapt to parent size, not viewport. @container + @sm:grid-cols-2 just works. 🏗️ Native @layer rules — real CSS cascade layers for theme, base, components, utilities. Specificity wars: over. 🎲 Composable variants — combine freely: group-has-focus:opacity-100, @media(hover:hover):underline. 📁 Auto content detection — Tailwind finds your templates. No content: [] array to maintain. 🎨 OKLCH colors by default — more vibrant, perceptually uniform. v4.2 adds mauve, olive, mist, taupe palettes. Migration: npx @tailwindcss/upgrade handles ~90% automatically. I wrote the complete guide for Day every feature, the @theme syntax, container queries, the v3 class renames, and the v4.2 additions. Already on v4? 👇 #TailwindCSS #CSS #Frontend #WebDev #100DaysOfBlogging