Frontend Devs: What Happens When You Enter a URL

Most frontend engineers have encountered a common challenge when building virtualized lists with dynamic text, such as product descriptions and user messages. The need to measure each row's height before rendering can lead to performance issues, as throwing elements into the DOM for measurement can cause layout reflows and stuttering in the UI. Fortunately, there is a better solution: chenglou/pretext. This pure JS/TypeScript library for multiline text measurement and layout eliminates the need for DOM manipulation and reflows. By utilizing the browser's font engine via canvas, it accurately handles line breaking through pure arithmetic. Additionally, it addresses complex scenarios, including: – Bidirectional text – CJK characters – Emoji sequences – Multilingual line-break rules – Pre-wrap whitespace mode for textarea-style content Excitingly, a server-side rendering path is currently in development, enabling text layout at the infrastructure level, fully decoupled from the browser. For those working on performance-sensitive UIs, rich text editors, canvas-based tools, or design systems, this library is definitely worth bookmarking. 🔗 https://lnkd.in/eAh2DUuR #OpenSource #WebDev #JavaScript #TypeScript #FrontendPerformance #UIEngineering #TextLayout

🚀 CSS is evolving faster than ever… and honestly, it’s getting smarter too! Just came across these 3 powerful new CSS updates that can seriously level up how we write styles 👇 ✨ 1. If-Else in CSS No more messy media queries everywhere! Now we can write cleaner, conditional styles directly inside properties. Less code, more clarity 🙌 ✨ 2. Corner Shape Creating unique shapes just got easier. Say goodbye to complicated clip-path hacks and hello to simple, beautiful UI designs 🎨 ✨ 3. @scope Finally… better control over styling! No more worrying about styles leaking across components. Cleaner and safer CSS structure 🔥 💡 These updates may look small, but they can make a big difference in real-world projects — especially for building scalable and maintainable UI. As a frontend developer, this is exciting 👨💻 CSS is no longer just styling… it’s becoming more like a programming language! 👉 Which feature are you most excited to try? #CSS #WebDevelopment #FrontendDevelopment #UIUX #WebDesign #Developers #Coding

🚀 CSS is evolving faster than ever… and honestly, it’s getting smarter too! Just came across these 3 powerful new CSS updates that can seriously level up how we write styles 👇 ✨ 1. If-Else in CSS No more messy media queries everywhere! Now we can write cleaner, conditional styles directly inside properties. Less code, more clarity 🙌 ✨ 2. Corner Shape Creating unique shapes just got easier. Say goodbye to complicated clip-path hacks and hello to simple, beautiful UI designs 🎨 ✨ 3. @scope Finally… better control over styling! No more worrying about styles leaking across components. Cleaner and safer CSS structure 🔥 💡 These updates may look small, but they can make a big difference in real-world projects — especially for building scalable and maintainable UI. As a frontend developer, this is exciting 👨💻 CSS is no longer just styling… it’s becoming more like a programming language! 👉 Which feature are you most excited to try? #CSS #WebDevelopment #FrontendDevelopment #UIUX #WebDesign #Developers #Coding

REACT INTERNALS - PART 11 How React Fiber Works (The Engine Behind Rendering) In Part 10, we learned: • React can prioritize updates • Uses concurrent rendering to keep UI responsive Now the next question is: How does React actually achieve this internally? 🔥 The Problem (Before Fiber) Earlier, React used a synchronous rendering model Once rendering started, it could NOT stop This meant: • Large updates blocked the UI • No way to prioritize important work • Poor user experience 🧠 React’s Solution React Fiber React Fiber is a new architecture that allows React to: • Break rendering work into small units • Pause and resume work • Prioritize updates 🧩 Think of it like this ❌ Before Fiber: Render entire tree → UI blocked ✅ With Fiber: Break work → Process step by step → Keep UI responsive 🧠 What is Fiber? A Fiber is: • A small unit of work for a component • Each component has its own Fiber node • These nodes are linked together to form a tree 🔄 How React Uses Fiber Fiber tree is created ↓ React works on one component at a time ↓ Processes a small piece of UI ↓ Pause if needed ↓ Handle high-priority updates ↓ Resume remaining work ⚙️ Why This Is Powerful With Fiber, React can: • Stop long-running work • Prioritize user interactions • Keep the UI smooth 🔗 Connection to Previous Parts • Part 9 → Batching groups updates • Part 10 → Scheduling prioritizes updates • Part 11 → Fiber makes all of this possible ⚠️ Important Clarification React is not running things in parallel It is breaking work into chunks and scheduling it smartly 🎯 Key Insight React no longer renders everything at once It splits work into manageable pieces 🔑 Final Takeaway React Fiber is the engine that allows React to pause, resume, and prioritize rendering work #ReactJS #FrontendDevelopment #JavaScript #ReactInternals #SoftwareEngineering

🚀 Interview Experience – Frontend (React/JavaScript) | 🔹 Coding / Problem-Solving 1. A parent div with 3 child divs. You need to place first at bottom-left and second at bottom-middle and third one at bottom-right. 🔹 JS output-based questions: 🌞 (function () { try { throw new Error(); } catch (x) { var x = 1, y = 2; console.log(x); } console.log(x); console.log(y); })(); 🌞 console.log(0 || 1); //1 console.log(1 || 2); //0 console.log(0 && 1); //0 console.log(1 && 2); // 2 🌞 (function(){ var a = b = 3; })(); console.log(a); console.log(b); 🌞 Create a React component that allows a user to select a file and simulate an upload process. When the user clicks the upload button, display a progress bar that gradually fills from 0% to 100% and show the upload percentage. The progress bar should update dynamically using React state. 🔹 Core JavaScript Concepts 1. Currying (currying vs normal functions) 2. call, apply, bind – when to use 3. Event loop 4. Promises: Promise.all, Promise.allSettled, Promise.race 5. Debouncing vs Throttling 6. Sync vs Deferred execution 7. Object & Array Destructuring 8. Difference between for...of and for...in . 🔹 React Topics 1. Hooks 2. useState – async or sync? How it works internally 3. Error Boundaries 4. Redux / Redux Toolkit flow 🔹 HTML & CSS Fundamentals 1. Box Model 2. CSS Specificity 3. Pseudo-classes and Pseudo-elements 4. Accessibility. Responsive Design techniques 🔹 Testing - Writing test cases (basic understanding expected) 💡 Overall, the interview focused more on fundamentals + real-world implementation rather than just theory. Would love to hear if you've come across similar questions or patterns! 👇 #PersistentSystems #Frontend #JavaScript #ReactJS #WebDevelopment #InterviewExperience #CodingInterview #Learning #CareerGrowth

🎨 My Frontend & Design Stack These are the technologies I use to build everything you see on screen. The visual layer, the interactions, and the structure of every app I create. 🌐 HTML5 — The skeleton of every webpage. Semantic structure that makes sites accessible and SEO-friendly. 🎨 CSS3 — The styling engine. Controls layout, spacing, colors and animations to make UIs look polished. ⚡ JavaScript — The brain of every interactive experience. Logic, events, and dynamic content. 🔷 TypeScript — JavaScript with strong typing. Catches bugs early and makes code more reliable. ⚛️ React.js — My core UI library. Reusable components and state management on every frontend I build. ▲ Next.js — The full-stack React framework. Fast, SEO-friendly, and production-ready out of the box. 💨 Tailwind CSS — Utility-first styling I use on every single project. Clean, fast and fully responsive. 🎬 Framer Motion — Smooth animations and micro-interactions that make UIs feel alive. Which of these do you use? Drop it below 👇 #MansurbCodes #Frontend #WebDevelopment #ReactJS #NextJS #JavaScript #TypeScript #TailwindCSS #FramerMotion #WebDesign #PakistaniDeveloper #Coding #LearnToCode

Built a series of mini projects using HTML, CSS, and JavaScript to strengthen my fundamentals and gain hands-on experience with core concepts like DOM manipulation, event handling, and logic building. These projects are part of my journey to build a solid foundation in frontend development: 🔹 Basic Calculator – https://lnkd.in/g8vsyv7Q   🔹 To-Do List – https://lnkd.in/gShDC_Ha   🔹 Guess the Number Game – https://lnkd.in/gSnwP_sQ   🔹 Modal Window – https://lnkd.in/gJWxrwEy   🔹 Dice Rolling Game – https://lnkd.in/gD2nKviD  Each project helped me understand how small features come together to create interactive web applications. Focusing on fundamentals now to build stronger and more scalable projects ahead. If there are any seniors or experienced developers here, I’d really appreciate it if you could take a look at these projects and share your feedback. I’m open to suggestions and would value your guidance. #HTML #CSS #JavaScript #WebDevelopment #Frontend #LearningByDoing #Projects

Capturing a Website as an Image Isn’t Simple Until you actually try to build it. What looks simple quickly turns into a real engineering challenge: • Styles don’t match • Fonts break • Performance drops • Layout Break Even popular libraries don’t fully solve the problem. 💡 One better approach: Instead of capturing the full DOM, export charts as images and build the report separately. It gives more control, better performance, and cleaner results — but also adds complexity. That’s the reality of frontend engineering: Simple features are rarely simple. . . . . . #frontend #reactjs #javascript #js #nextjs #webdevlopment #webdev #webapps #dashboard #reports Have you faced something like this?

⚡ useEffect vs useLayoutEffect — One of the most asked React Interview Questions! As a React Developer, understanding when to use "useEffect" vs "useLayoutEffect" can make a big difference in performance and user experience 🚀 --- 🧠 Core Difference (1-liner): 👉 "useEffect" runs after the UI is painted (non-blocking) 👉 "useLayoutEffect" runs before the UI is painted (blocking) --- 🔄 Execution Flow: 👉 useEffect Render → DOM Update → Paint 🎨 → useEffect runs 👉 useLayoutEffect Render → DOM Update → useLayoutEffect runs → Paint 🎨 --- 💻 Example: useEffect(() => { console.log("Runs after paint"); }, []); useLayoutEffect(() => { console.log("Runs before paint"); }, []); --- ⚠️ Real Scenario (Interview Gold): ❌ Using "useEffect" for DOM measurement → causes flicker useEffect(() => { setWidth(ref.current.offsetWidth); }, []); ✅ Using "useLayoutEffect" → smooth UI (no flicker) useLayoutEffect(() => { setWidth(ref.current.offsetWidth); }, []); --- 🚀 When to Use What? ✔️ useEffect - API calls 🌐 - Event listeners 🎧 - Timers ⏱️ - Logging / analytics ✔️ useLayoutEffect - DOM measurements 📏 - Scroll position adjustments 📜 - Avoid layout shift / flickering --- 🎯 Pro Tip (Senior Level): 👉 Always prefer "useEffect" for better performance 👉 Use "useLayoutEffect" only when DOM sync is required --- 💬 Quick question for devs: Have you ever faced UI flickering issues because of wrong hook usage? 😅 Let’s discuss 👇 #ReactJS #Frontend #JavaScript #WebDevelopment #ReactHooks #Performance #InterviewPrep

𝟵𝟵% 𝗼𝗳 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀 𝘀𝘁𝗿𝘂𝗴𝗴𝗹𝗲 𝘄𝗶𝘁𝗵 𝘁𝗵𝗲𝘀𝗲 𝗳𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀 👇 Not because they’re hard… But because we rarely revisit the “why” behind the tools we use daily. 1️⃣ Before Flexbox & Grid — how were responsive layouts actually built in CSS? 2️⃣ 𝗦𝗖𝗦𝗦 vs 𝗣𝗼𝘀𝘁𝗖𝗦𝗦 — what’s the real difference? And is SCSS still relevant in 𝟮𝟬𝟮𝟲? 3️⃣ Can you explain the 𝟳-𝗶𝗻-𝟭 SCSS architecture? What exactly are partials? 4️⃣ What does an async function return in JavaScript? Write the exact syntax. 5️⃣ Which asset formats are most optimal for modern HTML rendering (especially with srcset)? 6️⃣ What is a 𝗖𝗗𝗡 — and why are 𝗖𝗗𝗡 links usually placed inside <𝗵𝗲𝗮𝗱>. What breaks if you move them to <𝗯𝗼𝗱𝘆>? 7️⃣ Which CSS unit scales most effectively across different viewport sizes—and why? If you can confidently answer all of these, you’re already ahead of most developers in real-world frontend engineering. Curious — how many can you answer without Internet? 👀 ~ Aslam Mohammed #frontend #javascript #webdevelopment #css #reactjs #frontenddeveloper #webperf #programming #softwareengineering #devcommunity #100DaysOfCode #techcareers