Pretext: DOM-less Text Layout Engine Boosts Web Performance

My Next.js app's Lighthouse score went from 62 to 97. No paid tools. No infrastructure changes. Just 5 things I was doing wrong that most devs don't notice. Mistake 1: Loading Google Fonts via a link tag. External font requests are render-blocking. My CLS was 0.28. Switched to next/font and it downloads fonts at build time, self-hosts them, and auto-calculates fallback font metrics so there's zero layout shift. CLS dropped to 0.02. LCP improved by 400ms. Mistake 2: No priority on my hero image. My largest above-the-fold image was lazy-loading by default. The browser downloaded it last instead of first. Added priority prop to next/image. LCP went from 4.2s to 1.9s. One prop. 55% improvement. Mistake 3: Wrapping entire pages in 'use client'. I had 'use client' at the top of my page component because one button needed onClick. The entire page shipped as client JavaScript. I moved 'use client' to just the button component. JS bundle dropped 62%. Mistake 4: Barrel exports killing tree-shaking. export { Button } from './Button' in an index.ts file. Looks clean. But the bundler pulls in every component from that barrel file. Removed it, used direct imports. First Load JS went from 1.5MB to 200KB. Mistake 5: Testing Lighthouse in dev mode. Dev mode injects HMR code and error overlays. My dev score was 62. Production was 85 before any fixes. Always run next build && next start before measuring. After all 5 fixes: 62 to 97. Same server. Run Lighthouse on your site right now. What score did you get? #NextJS #WebPerformance #React #JavaScript #WebDev

🚀 Day 28/100 – #100DaysOfCode Core Web Concepts: Rendering & Architecture 🔹 Single Page Application (SPA) vs Multiple Page Application (MPA) SPA: Loads a single HTML page and dynamically updates content without reloading. MPA: Loads a new page from the server on every request. -Use SPA for fast, interactive apps (dashboards, SaaS). -Use MPA for SEO-heavy or content-driven sites (blogs, news). 🔹 What is Rendering? Rendering is the process of converting code (HTML, CSS, JS) into a visible UI in the browser. -It happens when the browser builds the DOM and paints it on the screen. 🔹 Rendering vs Re-rendering Rendering: Initial display of UI Re-rendering: Updating the UI when state or data changes -Efficient re-rendering is key for performance in frameworks like React.| 🔹 What is Reactivity? Reactivity means the UI automatically updates when data changes. -You change the state → UI updates automatically (no manual DOM manipulation). 🔹 Server-Side Rendering (SSR) vs Client-Side Rendering (CSR) SSR: HTML is generated on the server and sent to the browser CSR: Browser builds the UI using JavaScript Use SSR for: -Better SEO -Faster initial load Use CSR for: -Highly interactive apps -Faster navigation after load 28 days down, 72 more to go. #Day28 #100DaysOfCode #WebDevelopment #ReactJS #JavaScript #FrontendDevelopment #MERN

From Syntax to Seamless UI. ☁️💻 I’ve just wrapped up this Weather Web App, built from the ground up using HTML5, CSS3, and Vanilla JavaScript. While the functionality is key, I wanted to push the boundaries of how a utility app feels. Moving away from standard templates, I engineered this "Premium Dark" interface to give it a cinematic, high-end dashboard vibe. Technical Highlights: Interactive Data Rendering: Leveraging Vanilla JavaScript to bridge the gap between complex weather data and a fluid, user-friendly interface. Custom CSS Architecture: Achieving that deep charcoal aesthetic with high-contrast cyan accents. Responsive Engineering: Ensuring the "Command Center" look remains pixel-perfect across all screen sizes. It’s one thing to design a mockup, but bringing it to life through clean, efficient code is where the real magic happens. 🌙 How do you like this "Command Center" aesthetic for a weather tool? Would love to hear your feedback! 🚀 #WebDevelopment #FrontendDeveloper #JavaScript #CodingLife #HTMLCSS #Programming #PortfolioUpdate #KarachiDevs

📘 How React Re-renders Work (and How to Avoid Unnecessary Re-renders) 🔹 What is a Re-render? A re-render happens when React updates a component and reflects changes in the UI. This usually occurs when: ✔ State changes (useState) ✔ Props change ✔ Parent component re-renders 🔹Example const [count, setCount] = useState(0); <button onClick={() => setCount(count + 1)}>   Click Me </button> 👉 Every time count updates → component re-renders 🔹 Important When a component re-renders: 👉 All its child components also re-render (by default) Even if their data hasn’t changed ⚠️ 🔹 Real Problem Unnecessary re-renders can: ❌ Slow down performance ❌ Cause lag in large applications ❌ Trigger unwanted API calls 🔹 How to Avoid Unnecessary Re-renders ✅ 1. Use React.memo export default React.memo(MyComponent); Prevents re-render if props haven’t changed. ✅ 2. Use useCallback for functions const handleClick = useCallback(() => {   doSomething(); }, []); Prevents function recreation on every render. ✅ 3. Use useMemo for expensive calculations const result = useMemo(() => computeValue(data), [data]); Avoids recalculating values unnecessarily. ✅ 4. Keep State Minimal Only store what is necessary. Too much state = more re-renders. 🔹 Real-World Insight In large apps (dashboards, tables, filters): 👉 Poor render optimization can impact user experience heavily. Small optimizations here make a big difference. 👉 Re-renders are not bad—but unnecessary re-renders are. #ReactJS #FrontendDevelopment #Performance #JavaScript #WebDevelopment

🔖 Built a Simple & Efficient Todo Application I recently developed a Todo Application that helps users manage daily tasks effectively with a clean and user-friendly interface. ✨ Key Features: • Add, update, and delete tasks • Mark tasks as completed • Persistent data storage using local storage • Responsive design for mobile and desktop • Minimal and intuitive UI 🛠️ Tech Stack: HTML | CSS | JavaScript 💡 What I Learned: This project helped me strengthen my understanding of DOM manipulation, event handling, and building interactive web applications. I also focused on writing clean, maintainable code and improving user experience. 📌 Future Improvements: • Add authentication system • Cloud-based storage • Task categories and deadlines Feel free to check it out and share your feedback! #WebDevelopment #JavaScript #Frontend #Projects #Learning #Coding

For 30 years, we've been measuring text the same expensive way. Every React app. Every dashboard. Every UI you've shipped. When the browser needs to know where text ends, it calls getBoundingClientRect() — which halts everything, recalculates the entire page layout, and returns a number. That's layout reflow. It's costly, and we do it on every resize and every render. Meanwhile, magazines have flowed text around images for centuries. On the web? Not possible. The layout engine just doesn't work that way. A library called Pretext just changed that. The trick was canvas.measureText() — a Canvas API that's always been there. It measures text using the browser's own font engine, with zero DOM involvement. Nobody had built a full text layout engine on top of it. Pretext did. How it works: prepare() runs once — segments your text, measures glyph widths via canvas, caches everything. ~19ms for 500 texts. layout() is pure math over that cache. Zero DOM. ~0.09ms for 500 texts, every time after. The real unlock is layoutNextLine() — feed each line a different width as you go. Narrower beside an image. Full width below it. That's how magazine text wrapping works. First time it's possible on the web. What you can now build: → Text that wraps around floated images, line by line → Proper list virtualization — exact heights, no guessing → Multiline shrink-wrap — tightest container that fits your text → Render to DOM, Canvas, SVG, or WebGL Full language support — RTL, CJK, emojis, mixed-bidi, all handled. npm install @chenglou/pretext — Pure TypeScript. MIT. → https://lnkd.in/e_v6WBfE #webdev #javascript #typescript #frontend #opensource

🚀 Day 26 – Code Splitting (Load Smart, Not Heavy) As your app grows, bundle size becomes a problem: ⚠️ Slow initial load ⚠️ Large JavaScript bundle 📦 ⚠️ Poor performance on slow networks The problem is not React… 👉 It’s loading everything at once 🛒 Simple Analogy Imagine moving into a house 🏠 🔴 Without Code Splitting One truck brings EVERYTHING 😓 👉 Furniture, kitchen, garage… all at once 👉 Slow, overwhelming, inefficient 🟢 With Code Splitting Multiple trucks arrive when needed 🚚 👉 Essentials first 👉 Rest comes later 👉 That’s Code Splitting: Load only what’s needed, when needed 🧠 Why Code Splitting Matters Without it: • Huge initial bundle 😵 • Slower startup • Bad user experience With it: • Smaller initial load ⚡ • Faster performance • Better scalability 💻 1. Without Code Splitting import Dashboard from "./Dashboard"; import Settings from "./Settings"; import Profile from "./Profile"; // All loaded upfront 😓 📦 Bundle: ~500KB 💻 2. With Code Splitting (React.lazy) import { lazy, Suspense } from "react"; const Dashboard = lazy(() => import("./Dashboard")); function App() { return ( <Suspense fallback={<div>Loading...</div>}> <Dashboard /> </Suspense> ); } 🔥 Load only when needed 💻 3. Route-Based Splitting <Route path="/dashboard" element={<Dashboard />} /> 👉 Loads only when user visits route ⚡ Bundle Comparison Without Splitting: 👉 500KB upfront 😓 With Splitting: 👉 50KB initial + chunks on demand ⚡ 📌 Key Strategies ✔ Route-based splitting ✔ Component-based splitting ✔ Vendor splitting 🧠 Benefits ✔ Faster initial load ✔ Smaller bundles ✔ Load on demand ✔ Better performance ⚠️ Important Note 👉 Don’t over-split (too many requests) 👉 Balance performance & UX 💬 Developer Question Where do you use code splitting most? 1️⃣ Routes 2️⃣ Components 3️⃣ Vendor libraries 4️⃣ Everywhere #React #Performance #CodeSplitting #FrontendDevelopment #JavaScript #WebDevelopment #CodingJourney 🚀

**Next.js 15 Server Components — the end of client-side rendering?** Not quite. But it *does* feel like a major shift in how we build for the web. For years, frontend development leaned heavily on client-side rendering: - ship more JavaScript - fetch data in the browser - hydrate everything - hope performance holds up With **Server Components in Next.js 15**, the default mindset is changing: ✅ Fetch data on the server ✅ Keep sensitive logic off the client ✅ Send less JavaScript to the browser ✅ Improve performance and initial load times That’s a big deal. But let’s be clear: **client-side rendering isn’t dead**. We still need client components for: - interactivity - local state - animations - browser-only APIs - rich UI experiences What’s really happening is this: **We’re getting better boundaries.** Instead of treating the entire app like it needs to run in the browser, we can now choose: - **Server Components** for data-heavy, static, and secure parts - **Client Components** for interactive UX That means better performance *and* cleaner architecture. The real question isn’t **“Is this the end of client-side rendering?”** It’s: **“Why were we rendering so much on the client in the first place?”** Next.js 15 doesn’t kill CSR. It makes it **intentional**. And that’s probably the bigger evolution. #nextjs #react #webdevelopment #javascript #frontend #performance #servercomponents #fullstack #WebDevelopment #TypeScript #Frontend #JavaScript

Leonobitech Frontend — 1,090 commits of modern web development. Built from scratch. No boilerplate. No template. Every component, every animation, every security decision — made intentionally. The stack: → Next.js 16 (App Router) → React 19 → TypeScript → Tailwind CSS 4 → Framer Motion → Zustand + TanStack Query → React Hook Form + Zod → Radix UI primitives → Cloudflare Turnstile Auth system: → Cookie-based sessions with JWT → WebAuthn passkeys (register, verify, recover) → OTP email verification → Forgot password flow → Full dashboard with admin panel Design system: → Neutral grayscale palette → Logo gradient (magenta→blue) as the only color → Light/dark theme with next-themes → 4px border radius globally → Sidebar and footer always dark The project went through a major pivot — from a SaaS product (frontend-backup-pre-agency, 803 commits) to an agency model (287 additional commits). Both repos are public so you can see the evolution. Deployed via Docker + Traefik with CI/CD through GitHub Actions on push to main. Release v3.0.0: "Voice Agent Product Launch" — the version that integrated the real-time AI avatar into the web experience. 🔗 https://lnkd.in/dMdqW3BU 🔗 https://lnkd.in/dRecWdN3 #NextJS #React #TypeScript #TailwindCSS #WebAuthn #Passkeys #Frontend #WebDev #UIDesign