Ditch JavaScript for HTML-first frameworks like HTMX and Astro

Just built a Todo App using Vanilla JavaScript! Key Features: ->Add, edit and delete tasks dynamically ->Reorder tasks with up/down buttons ->Persistent storage using localStorage ->Auto-display of tasks with date & time ->Efficient event handling using event delegation This project helped me strengthen my DOM manipulation, JavaScript logic, and web storage skills. Todo Website: https://lnkd.in/e6y7QmAb Check it out on GitHub: https://lnkd.in/eQjqyHwh #JavaScript #WebDevelopment #Frontend #TodoApp #Coding

React is finally getting a built-in useForm hook… and it’s a big shift Right now, every project: 🔹 Formik 🔹 React Hook Form 🔹 Zod + custom logic More setup. More dependencies. More bundle size. Now React is bringing it into core 🔹 Validation 🔹 Form state 🔹 Submission 🔹 Error handling All built-in. No extra libraries. We’ve seen this pattern before: → Data fetching → now simpler patterns → Routing → built into frameworks → Memoization → handled by React Compiler React continues to absorb what we used to depend on. That’s not a problem - that’s growth What this means now: 🔹 Don’t over-engineer forms 🔹 Keep it simple 🔹 Focus on fundamentals (controlled vs uncontrolled) Libraries change. Basics don’t. Still using Formik or React Hook Form? 👇 #ReactJS #WebDevelopment #FullStackDeveloper #Frontend #JavaScript

Day 25 of my JavaScript journey 🚀 Built a Recipe Finder App using HTML, CSS, and JavaScript, powered by an external API. Features: 🍽️ Search recipes dynamically 🌐 Fetch data from TheMealDB API 📄 Display recipe details in real-time ✨ Interactive and user-friendly UI This project helped me understand how to work with APIs, handle asynchronous JavaScript, and build real-world applications. 🔗 Live Demo: https://lnkd.in/gSAAATzM 💻 GitHub Repo: https://lnkd.in/gBQmmBYJ Moving beyond basic projects and building applications that interact with real data. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney #API

As a developer, I’ve noticed some small things… but they matter a lot 👨💻 1. Console Errors Even When Feature Works Sometimes our JavaScript/jQuery code works perfectly on UI… but the console still shows errors or warnings. 👉 Real examples: `undefined is not a function` but the feature still runs partially Deprecated jQuery methods showing warnings API error in console but UI shows cached/old data 💡 Lesson: Even if it “works”, ignoring console errors can create bigger issues later. --- 2. Works in Chrome, Breaks in Other Browsers We often test only in Chrome… and everything looks perfect 😄 But in other browsers or app web views, things break. 👉 Real examples: CSS flexbox/layout breaking in Safari New JS features not supported in older browsers Different font or spacing issues across browsers 💡 Lesson: A good developer doesn’t just make it work… They make it work everywhere. --- 🚀 Still learning, but these are things I’m experiencing in real projects. #JavaScript #Frontend #Debugging #LearningInPublic #DeveloperJourney #SoftwareEngineering

A lot of people constantly ask me what React Hooks actually are, and the best way to think about Hooks and JavaScript concepts in general is to look at what problem they were trying to fix. For example, before React Hooks, people would create a Container Component and a Presentational Component. The Container Component would retrieve data, like making a fetch request, and then pass that data down to the Presentational Component, which was usually a pure function that returned some UI, like a div with styling, and accepted that data as props. This pattern helped create a standard for how data was retrieved in React and enforced separation of concerns, but it ended up being too boilerplate heavy for most people. So Hooks were introduced to let us hook into components directly, allowing us to load data as a side effect inside a function while still maintaining separation of concerns without needing extra components. #ReactJs #JavaScript #JavaScriptHooks

I Just built and deployed a Weather App 🌤️ This project helped me understand how to work with APIs and handle real-time data using JavaScript… Features include: • Search weather by city • Real-time temperature and conditions • Weather icons • Clean and responsive UI (though basic) Try it here: 👉 https://lnkd.in/ea_SveTQ View code: 👉 https://lnkd.in/ervqjNiN More projects coming — currently building and improving daily 🚀 #FrontendDeveloper #JavaScript #WebDevelopment #BuildInPublic

JavaScript Closures are confusing… until they’re not ⚡ Most developers memorize the definition but struggle to actually understand it. Let’s simplify it 👇 💡 What is a closure? A closure is when a function 👉 remembers variables from its outer scope even after that scope is finished 🧠 Example: function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const fn = outer(); fn(); // 1 fn(); // 2 fn(); // 3 ⚡ Why this works: inner() still has access to count even after outer() has executed 🔥 Where closures are used: • Data hiding • State management • Event handlers • Custom hooks in React #JavaScript #FrontendDeveloper #ReactJS #CodingTips #WebDevelopment

The Strategy: "The 5 JS Concepts You Must Master" 📝 JavaScript isn’t hard. Your approach is. 🧠 Most beginners get stuck in "Tutorial Hell" because they try to memorize everything. In reality, you only need to master 5 core concepts to build 80% of modern web apps. If you understand these, React and Vue will feel like a breeze. 👇 ✅ 1. The DOM (Document Object Model) Stop thinking of HTML as text. It’s a tree. Learn how to grab an element, change its color, and add a click event. ✅ 2. Array Methods (.map, .filter, .reduce) Modern web dev is just manipulating lists of data. If you can’t transform an array of "Products" into "Shopping Cart" items, you'll struggle. ✅ 3. Asynchronous JS (Promises & Async/Await) The web doesn't wait for anyone. Learn how to fetch data from an API without freezing the user’s screen. ✅ 4. Scope & Hoisting Where does your variable live? Understanding let, const, and var will save you hours of debugging "Undefined" errors. ✅ 5. ES6+ Syntax Arrow functions, destructuring, and template literals. This is the "modern" way to write clean, professional code. 💡 The Golden Rule: Don't just read about these. Open VS Code, create a script.js file, and break things until they work. What was the hardest JS concept for you to wrap your head around? Let’s help each other in the comments! 💬 #WebDevelopment #JavaScript #CodingTips #LearnToCode #Frontend

I used to think JavaScript was just for making buttons clickable. 🖱️ Then I learned about Node.js — and everything changed. Here's what blew my mind: In 1995, JavaScript was built in just 10 days. It was sandboxed inside the browser with one job — make web pages interactive. No file access. No network. No servers. Fast forward to 2009 — Ryan Dahl had a wild idea: → Extract Chrome's V8 engine (open source) → Bind it with C++ → Give JavaScript access to the Operating System The result? Node.js. JavaScript could now run on servers. One language. Frontend AND backend. Full stack. I just published my first blog breaking this down from scratch: ✅ Why JS was originally browser-only ✅ How the V8 engine works (high level) ✅ What C++ bindings actually do ✅ Event-driven architecture explained simply ✅ Real-world companies using Node.js If you're starting your backend journey, this one's for you 👇 🔗 https://lnkd.in/dZTRdWGa Hitesh Choudhary Piyush Garg Chai Aur Code #NodeJS #JavaScript #Backend #WebDevelopment #Hashnode

Day 6 — Find Second Largest Number in an Array (JavaScript) Problem Write a function to find the second largest number in an array. Example Input: [10, 5, 8, 20] Output: 10 Approach First find the largest number, then find the largest number smaller than it. Code function secondLargest(arr){ let largest = -Infinity let second = -Infinity for(let i = 0; i < arr.length; i++){ if(arr[i] > largest){ second = largest largest = arr[i] } else if(arr[i] > second && arr[i] !== largest){ second = arr[i] } } return second } console.log(secondLargest([10,5,8,20])) Alternative Approach function secondLargest(arr){ let sorted = [...new Set(arr)].sort((a,b) => b-a) return sorted[1] } What I Learned How to track two maximum values in a single loop. #javascript #frontenddeveloper #codingpractice #webdevelopment