Streamline CSS with @custom-media at-rule in Firefox Nightly

Frontend devs have spent years writing #focus-trap #JavaScript for #modals. Handling #Tab, blocking #background clicks, adding #aria-hidden, installing libraries… all just to keep users inside a dialog. Meanwhile the browser quietly gave us a one-line solution: #inert Add inert to the background container and everything inside becomes completely non-interactive — no clicks, no focus, no screen readers, no tabbing. One attribute. Hundreds of lines of JS gone. I wrote a quick breakdown of how it works and where to use it (modals, sidebars, carousels, etc.) 👇 https://lnkd.in/e8WJGBwW #FrontendDevelopment #WebDevelopment #JavaScript #HTML #Accessibility #WebAccessibility #FrontendEngineering #WebPlatform #ModernWeb #SoftwareEngineering #CodingTips #FrontendDev #JavaScriptTips #DevCommunity #WebStandards

Many developers transitioning into modern front-end development ask whether it’s okay to use jQuery inside a React.js project. While it might seem convenient at first, mixing the two can create serious long-term issues. - Conflicting Approaches to the DOM React manages the DOM through a virtual DOM and controlled rendering cycle. jQuery, on the other hand, directly manipulates the DOM. When jQuery changes elements behind React’s back, React may overwrite those changes on the next render. This can lead to unpredictable UI behavior and bugs that are difficult to track down. - State Management Problems React applications rely on state and props to manage UI updates. If jQuery modifies the DOM directly, those changes are not reflected in React’s state. This breaks React’s core design pattern and can cause components to fall out of sync with the actual UI. - Maintenance Complexity Mixing two different paradigms (React’s declarative approach and jQuery’s imperative manipulation) increases technical debt. Future developers maintaining the project must understand both systems and how they interact—making the codebase harder to scale and debug. - Performance Concerns React optimizes updates through its virtual DOM diffing algorithm. Direct DOM manipulation with jQuery can bypass these optimizations, potentially causing unnecessary reflows and re-renders. In most cases, if you’re using React properly, you simply don’t need jQuery. Modern frameworks exist to simplify front-end development—not to recreate older patterns. #React #JavaScript #WebDevelopment #FrontendDevelopment #SoftwareEngineering

In a recent technical assessment, I was asked to build a form with validation. My go-to solution? Zod for schema validation, paired with React Router’s action data to handle form submissions. Before that, I had also experimented with a much more “manual” approach and wired up onChange handlers. It worked… but it definitely wasn’t elegant. While reflecting on different ways to approach forms in React, I came across a really interesting blog post that introduced a third option. I have used this with vanilla JS projects in the past but not with React. 👉 Using the Constraint Validation API the browser’s built-in validation system to create accessible, standards-based forms without relying on validation libraries. The author described both validation libraries and fully manual validation as “perilous approaches,” which I found hilarious. I’m planning to explore this approach more deeply and experiment with it in future React projects. I’d love to hear your take: Do you prefer schema validation libraries like Zod or Yup? Do you lean on native browser validation? Always interesting how something as “simple” as forms can spark so many decisions. https://lnkd.in/dFe9Hy65 #React #Frontend #WebDevelopment #JavaScript #UX

Introduction to React Developers widely use React, a popular JavaScript library, to construct user interfaces in web development. It is highly efficient and flexible, . . . https://lnkd.in/eEd8ymJP

Normalized chaos in web development :) . . -> Install 200MB of dependencies. -> Cross your fingers. -> Ship it. -> Hope nothing breaks in 6 months. Then I saw what Kailash Nadh (Zerodha's CTO) did, and it made me stop and think. On February 11, he quietly released Oat — a complete UI library. 8KB total. No flashy Product Hunt launch. No 47-tweet thread. Just a GitHub repo https://lnkd.in/gN4ZRT3Y and a thoughtful blog post about why we're drowning in dependencies. Here's what caught my attention: ✓ 6KB CSS + 2.2KB JS (minified & gzipped) ✓ Built with Web Components — works with React, Vue, or plain HTML ✓ Theme your entire app with a handful of CSS variables ✓ Dark mode? Just add data-theme="dark" ✓ Zero build tools needed. No Webpack. No Vite. No Node.js. ✓ A dark mode bug reported on launch day? Fixed within hours. That's it. Simple, stable, complete. Why this matters to me (and maybe you too): Every dependency we add is a bet: → Will it still be maintained next year? → Will a random Tuesday update break my build? → Am I inheriting someone else's 47 dependencies too? → What happens when the maintainer moves on? I've lived through all of these. Maybe you have too. Oat removes that entire layer of anxiety. """ Why? This was made after the unending frustration with the over-engineered bloat, complexity, and dependency-hell of pretty much every Javascript UI library and framework out there. Done with the continuous PTSD of rug-pulls and lockins of the Node.js ecosystem trash. [1] I've published this, in case other Node.js ecosystem trauma victims find it useful. '''''' Above words directly from the documentation. For internal dashboards, long-term products, or anywhere stability matters more than being trendy — this approach just makes sense. It's a reminder that sometimes the best solution isn't the newest framework. Sometimes it's asking: "What if we didn't?" P.S. — This isn't about abandoning modern tools. It's about choosing the right tool for the job. And sometimes, that tool is radically simple. Check out Oat if you're curious: https://oat.ink/ What's your take? Are we over-engineering our frontends, or is the complexity justified?

Most people learn frontend the wrong way. They stop at: HTML → CSS → JavaScript → React → Done ❌ And then they wonder why they don’t stand out. Here’s the Frontend Roadmap I wish someone gave me: 1️⃣ Master HTML properly – Semantic structure – Accessibility (A11Y) – SEO foundations 2️⃣ CSS beyond basics – Flexbox & Grid – Responsive design – CSS architecture 3️⃣ JavaScript deeply – ES6+ – Async/Await – Event loop (most skip this) 4️⃣ One framework (go deep, not wide) React / Next.js / Vue 5️⃣ Git & collaboration – Clean commits – PR etiquette – Rebasing 6️⃣ APIs & backend basics – REST – Auth – Environment variables 7️⃣ Performance (this is where seniors stand out) – Core Web Vitals – Lighthouse – Lazy loading But here’s what 90% of roadmap posts DON’T tell you: 👉 Accessibility is a competitive advantage. 👉 Micro-interactions make your UI feel premium. 👉 Frontend system design matters at scale. 👉 Writing about what you learn builds authority. The top 10% of frontend developers don’t just know frameworks. They understand how the browser works. If you're learning frontend in 2026, save this. Comment “ROADMAP” and I’ll send you a checklist version. #frontend #webdevelopment #javascript #react #careergrowth

🌐 Should JavaScript Be Used Everywhere? 🤔 JavaScript has come a long way. From its humble beginnings as a client-side scripting language, it now powers everything from dynamic web pages to full-stack applications with Node.js. But as JavaScript’s reach expands, so do the concerns. ⚡ Over-Reliance on JavaScript can lead to: Slower Page Loads – Heavy JavaScript files can impact load times, especially on mobile networks, leading to frustrated users and higher bounce rates. Accessibility Issues – Many JavaScript-heavy websites are not fully accessible to people with disabilities, especially if JavaScript fails to load or is disabled. Complex Codebases – As JavaScript is used for everything, it can lead to sprawling, hard-to-maintain code, making it difficult to scale or onboard new developers. 💡 The big question: Should we be using JavaScript for everything? On one hand, JavaScript frameworks (React, Angular, Vue) and environments like Node.js enable rapid development, improved interactivity, and a unified stack across both front-end and back-end. On the other hand, there’s an argument for keeping things simple. HTML, CSS, and even server-side rendering can often meet your needs without adding the complexity and overhead that comes with heavy JS use. 🔍 What’s the solution? Use JavaScript where it truly adds value (e.g., interactive UIs, dynamic content). Focus on optimizing performance (lazy loading, minification). Prioritize accessibility in your JavaScript-heavy apps. Leverage server-side rendering (SSR) or static sites when possible to boost speed and SEO. 💬 What’s your take? Should JavaScript be the go-to tool for everything, or are we overdoing it? Let’s discuss! #WebDevelopment #JavaScript #PerformanceOptimization #Accessibility #FrontendDevelopment #FullStack #WebDesign #TechDebate

Is Vanilla HTML, CSS, and JavaScript Dead? Absolutely not. But the habit of critical thinking before picking a tech stack seems to be on life support. Too many developers blindly jump onto heavy frameworks like React simply because it's the current industry default. They skip the vital factor checks, defaulting to massive JavaScript bundles to build what are essentially static 5-page brochures. It’s the equivalent of using a sledgehammer to crack a walnut it gets the job done, but it creates an unnecessary mess. Why must you evaluate before picking a stack? Because the stack dictates the product's entire lifecycle. Unnecessary frameworks introduce bloated bundle sizes, slower load times, fragile dependencies, and expensive technical debt that the client eventually has to pay for. The Power of the Basics Sometimes, going back to pure HTML, CSS, and vanilla JS is the ultimate professional move. It offers unmatched speed, simplicity, and longevity for content-heavy or static projects. I recently helped a technical team audit the architecture for a client's portfolio site. The initial proposal was a complex, overkill React application. I advised pivoting back to raw HTML, CSS, and JavaScript. The result? Blazing-fast load times, flawless SEO out of the box, and a client who won't have to pay a developer just to update NPM packages next year. Don't let framework hype dictate your builds. Let the project's actual needs make the call. hashtag #webdev #webdevelopers #frontenddev #frontendEngineer

Is Vanilla HTML, CSS, and JavaScript Dead? Absolutely not. But the habit of critical thinking before picking a tech stack seems to be on life support. Too many developers blindly jump onto heavy frameworks like React simply because it's the current industry default. They skip the vital factor checks, defaulting to massive JavaScript bundles to build what are essentially static 5-page brochures. It’s the equivalent of using a sledgehammer to crack a walnut it gets the job done, but it creates an unnecessary mess. Why must you evaluate before picking a stack? Because the stack dictates the product's entire lifecycle. Unnecessary frameworks introduce bloated bundle sizes, slower load times, fragile dependencies, and expensive technical debt that the client eventually has to pay for. The Power of the Basics Sometimes, going back to pure HTML, CSS, and vanilla JS is the ultimate professional move. It offers unmatched speed, simplicity, and longevity for content-heavy or static projects. I recently helped a technical team audit the architecture for a client's portfolio site. The initial proposal was a complex, overkill React application. I advised pivoting back to raw HTML, CSS, and JavaScript. The result? Blazing-fast load times, flawless SEO out of the box, and a client who won't have to pay a developer just to update NPM packages next year. Don't let framework hype dictate your builds. Let the project's actual needs make the call. #webdev #webdevelopers #frontenddev #frontendEnngineer

📅 Day 2 with React — today got really interesting. Yesterday → Virtual DOM. Today → Folder structure, Vite, Babel & how React actually runs. Let's go 👇 📁 Vite + React Folder Structure src/ ├── App.jsx → root component ├── main.jsx → entry point ├── assets/ → images, fonts public/ → static files index.html → the ONE html file Only ONE html file exists. React renders everything into <div id="root">. That's what makes it a Single Page Application. ⚡ What is Vite? Old way (Create React App) → dev server took 30+ seconds to start. Every save felt slow. 😩 Vite is different: → Starts in milliseconds → Serves files directly using native ES Modules → File change? Browser updates instantly (HMR) → Production build uses Rollup — fast & optimized Vite didn't just improve the experience. It replaced the old way entirely. 🔤 What is Babel? Browsers don't understand JSX. At all. Babel silently converts this: <h1>Hello</h1> Into this: React.createElement("h1", null, "Hello") Every JSX line you write — Babel transforms it behind the scenes automatically. ⚛️ The Full Picture 1️⃣ You write JSX 2️⃣ Babel compiles it → plain JS 3️⃣ Vite serves it instantly 4️⃣ React mounts into <div id="root"> 5️⃣ Virtual DOM takes over from there That's the entire pipeline from your code to the browser. 💡 Small things that surprised me: → main.jsx is the real entry point — not App.jsx → index.html sits in root folder in Vite (not inside /public like CRA) → Files in public/ are served as-is — React never touches them 📌 DR: Vite = fast tooling. Babel = makes JSX work. Folder structure = simple once you understand each file's job. React is starting to click. 🧠 Day 3 → components & props. Follow along if you're learning too 🚀 What confused you most when you started React? Drop it below 👇 #React #Vite #Babel #JavaScript #WebDevelopment #100DaysOfCode #LearnInPublic #Day2 #ProblemSolving #DeveloperSkills #LearningByDoing #HandsOnExperience #SoftwareDevelopment #SheryiansCodingSchool #DeveloperJourney Devendra Dhote Sarthak Sharma Daneshwar Verma Sheryians Coding School