🚀 Built & Deployed: Text Diff Viewer (Client-Side Web Tool) Sharing a snapshot of a project I recently built and deployed. It’s a browser-based Text Diff Viewer built with JavaScript and jsdiff, running entirely on the client side. The screenshot shows it handling a real-world case: comparing long PGP armored messages and clearly highlighting additions and deletions. What it supports: • Character, word, line, and patch diffs • File upload for direct text comparison • Instant visual feedback • No backend required Live demo: https://lnkd.in/gX-ZcwVt Source code: https://lnkd.in/gJPWGJ6K Next up: improving mobile UX and adding line numbers. Feedback and suggestions are welcome. #javascript #webdevelopment #opensource #frontend #developerprojects #github

🚀 Introducing BrainBloom – a modern quiz application built with pure Vanilla JavaScript BrainBloom is a premium, minimal quiz experience focused on both learning and design. ✨ What makes it stand out? Dark Mode & Light Mode with persistent theme preferences Adaptive quiz engine with category and difficulty selection Timed questions with instant visual feedback for engagement Post-quiz analytics including score summary and time-based insights per question This project was a great exercise in combining clean UI design, user experience, and core JavaScript logic—without relying on heavy frameworks. Learning doesn’t have to be boring. It can be beautiful, fast, and insightful. 📌 Code & implementation details are available in the repository. #JavaScript #WebDevelopment #Frontend #BuildInPublic #LearningByBuilding #UIUX

Integrated lucide-react into my React project today — and it reminded me how small decisions impact performance. Icons seem minor… until your bundle size starts growing. Instead of using heavy icon libraries or importing full SVG packs, I switched to lucide-react. Why? • Tree-shakable → only the icons you import are included in the final bundle • Lightweight → minimal impact on performance • Fully customizable via props (size, color, strokeWidth) • Clean React component-based usage ➡️Example: import { Search } from "lucide-react"; <Search size={20} strokeWidth={1.5} /> No manual SVG handling. No unnecessary CSS overrides. No bloated assets. As projects grow, these small optimizations matter — especially when building scalable front-end systems. Learning that performance isn’t only about algorithms… it’s also about choosing the right tools. #reactjs #frontend #webperformance #javascript #buildinpublic

🌐 Day 63/100 — Debouncing vs Throttling (Why Performance Matters) Today I learned something that completely changed how I think about user interactions in JavaScript. Sometimes our code works perfectly… but the website still feels slow. Why? Because events like scroll, resize, typing, and mouse move can fire hundreds of times per second. And if our function runs every single time → the browser struggles. That’s where two powerful techniques come in: 🔹 Debouncing The function runs only after the user stops doing something. Example: Search bar suggestions → Wait until the user stops typing, then call API. Result: Less API calls. Faster UI. Happier server. 🔹 Throttling The function runs at a fixed interval while the event keeps happening. Example: Scroll animations → Update position every 200ms instead of every pixel. Result: Smooth performance. 💡 Big realization: Good developers make code work. Better developers make code efficient. Performance is not about speed of your laptop — it’s about respecting the browser. Small concepts… huge impact. Ever wondered how some functions "remember" values even after they finish running? That’s a closure. In simple words: A function can carry its outer variables with it — like a backpack — wherever it goes. Example: function counter() { let count = 0; return function () { count++; console.log(count); }; } const increment = counter(); increment(); // 1 increment(); // 2 increment(); // 3 Even though counter() already executed… count is still alive inside increment(). That’s closure memory. 💡 Why real websites use closures: • Data privacy (hide variables from global scope) • Event handlers remembering values • Caching & performance optimization • React hooks & state management So closures aren’t just theory — they power interactive UIs every day. Today’s takeaway: 👉 Functions in JavaScript don’t just run… they remember. #JavaScript #WebDevelopment #Frontend #100DaysOfCode #LearningInPublic

Excited to share my latest project: A Dynamic Recipe Search Application! 🍳✨ I’ve just wrapped up a new project that combines my passion for clean UI with efficient data handling. Using TheMealDB API, I built a fully responsive Recipe Application that allows users to discover culinary inspiration from around the world in seconds. Key Features: Live API Integration: Fetches real-time recipe data, categories, and step-by-step instructions using asynchronous JavaScript. Dynamic UI: Implemented a responsive grid layout using CSS Grid that adapts perfectly to any screen size. Interactive UX: Developed a custom modal system for detailed recipe views and a "Back to Top" feature for seamless navigation. Clean Codebase: Focused on modular DOM manipulation and error handling to ensure a smooth user experience. This project was a great opportunity to further refine my skills in JavaScript (ES6+), CSS3, and working with REST APIs. Check out the repository here: 🔗 https://lnkd.in/gBp_AXrW I'm always looking for ways to improve—I'd love to hear your thoughts or feedback in the comments! #WebDevelopment #JavaScript #FrontEnd #CSS #API #CodingJourney

forwardRef isn’t about refs. It’s about ownership. A real UI case where it actually makes sense. Parent component: import { useRef } from "react"; import TextInput from "./TextInput"; export default function Form() { const inputRef = useRef<HTMLInputElement>(null); return ( <> <TextInput ref={inputRef} placeholder="Email" /> <button onClick={() => inputRef.current?.focus()}> Focus input </button> </> ); } The parent needs imperative control. Child component: import { forwardRef } from "react"; type TextInputProps = { placeholder: string; }; const TextInput = forwardRef<HTMLInputElement, TextInputProps>( ({ placeholder }, ref) => { return <input ref={ref} placeholder={placeholder} />; } ); export default TextInput; This works, but notice the tradeoff. By adding forwardRef: - the child exposes its DOM - the parent depends on internal details - a component boundary is crossed That’s the real cost of forwardRef. Takeaway forwardRef is not a helper. It’s an architectural decision. #ReactJS #FrontendArchitecture #ReactPatterns #JavaScript #FrontendEngineer

Building robust forms with Vanilla JavaScript! 🚀 Body: User authentication is the first step of user experience, and I wanted to make it seamless. I just built a real-time Email & Password Validator using HTML, CSS, and JavaScript. 💡 Key Features: ✅ Real-time Validation: Instant visual feedback (Green/Red borders) as the user types. ✅ Regex Implementation: Secure patterns to enforce password strength (Uppercases, Numbers, Special characters). ✅ Dynamic UI: Interactive requirements checklist that updates automatically. ✅ UX Enhancement: Show/Hide password toggle for better usability. It was a great challenge to handle the logic without any external libraries. 👇 #webdevelopment #javascript #frontend #coding #css #html #project Ankit Kr. Gaur Faisal Ahmad Khan Mohd Afraz Khan

#2nd Day Who knew asking a question could be this hard? 💘💻 I built a playful "Be My Valentine" web application that puts a fun twist on the classic proposal. The Catch? The "No" button has a mind of its own! It’s programmed to dodge your cursor and jump across the entire screen using dynamic window-boundary calculations. Technical Highlights: Frontend: HTML5, CSS3 (Glassmorphism), and Vanilla JavaScript. Interactivity: Used fixed positioning and Math.random() algorithms for the dodging logic. Backend Integration: Integrated Google Apps Script as a lightweight backend to log visitor counts and "Yes" responses directly into a Google Sheet in real-time. UX: Added a custom Hindi Shayari prompt and canvas-confetti for the final "Yes" celebration. Check out the live link below and see if you can catch the "No" button! (Spoilers: You can't. 😉) 🔗 Live Demo: https://lnkd.in/d4-xMiFC #WebDevelopment #JavaScript #OpenSource #CreativeCoding #GoogleAppsScript #CodingIsFun #FrontendDeveloper #Valentine2026

Unpopular opinion: You are probably over-engineering your UI. 🛠️ Stop over-engineering your user interfaces. If you are writing JavaScript for these features, you are doing too much work: Here are 5 things you can build without a single line of JS: Accordions: Use the details and summary tags. Sidebars: Use CSS transforms with hover or focus states. Sticky Headers: Stop calculating scroll positions. Use position: sticky. Tooltips: Use the title attribute or CSS pseudo-elements. Dark Mode: Use the prefers-color-scheme media query or a checkbox hack. Less JavaScript means a faster website and cleaner code. Master the basics of HTML and CSS before reaching for a framework. #frontend #coding #webdesign #cleancode #rehman_coding

Behind the Screen – #1 Do you know? Your browser does MORE work than your server in many apps. 👉 Parsing HTML 👉 Executing JavaScript 👉 Handling state 👉 Rendering UI That’s why frontend performance is not “just CSS”. 🔥 A slow UI is an architecture problem, not a UI problem. #frontend #webdevelopment #performance #techfacts