Built and shipped my Learning Journal 🛠️ This started as a simple project, but quickly turned into a deep dive into layout systems, responsive design, and structuring reusable components in JavaScript. A lot of small details, but that’s where the real learning happens. Check it out 👇 🔗https://lnkd.in/eZSzCYUw #CodingJourney #FrontendDevelopment #JavaScript #BuildInPublic #Scrimba

Why Your #JavaScript Variable Was undefined (And How I Finally Got #Hoisting) Last Tuesday at 3 PM, I found my teammate Sarah staring at her screen, visibly frustrated. "This makes NO sense," she said, pointing at her code: console.log(userName); // undefined var userName = "Sarah"; "Why doesn't it just crash like a normal language?!" I laughed because I remember being exactly there 3 years ago. Hoisting confused the hell out of me too. So I sat with her, drew some diagrams, and explained it in plain English (not the confusing textbook way). The lightbulb moment when she got it? Priceless. That conversation inspired me to create a visual guide that actually makes sense: • Why var is sneaky (and why we avoid it now) • How functions magically work before they're defined • The 3 traps that got me (so you don't waste hours like I did) • What to actually use in 2026 The best part? Once you understand hoisting, you stop fighting JavaScript and start working with it. Slides attached 👇 Have you had that "wait, WHAT?!" moment with hoisting? Share your story - we've all been there! #JavaScript #WebDevelopment #Programming #CodingTips #WebDev #FrontendDevelopment #SoftwareEngineering #DeveloperLife #TechEducation #LearnToCode

Working on Vox, my experimental lightweight reactive JavaScript library, and I just finished a first round of internal performance benchmarks. Current local benchmark results (production build): -> 10,000 variable writes + flush → ~10.4ms average -> 1,000 effect registrations → ~11.1ms average -> 100 reactive DOM nodes updated in a single batched flush → ~11.1ms average -> 100 reactive DOM nodes updated unbatched across 100 frames → ~1111ms average One interesting result: batched updates reduce effect executions dramatically. In the batched case: -> only 100 effects executed In the unbatched case: -> 9,900 effects executed This confirms that the frame-based scheduler and effect coalescing are already doing meaningful work. The project is still experimental, but it is starting to show a clear architecture: fine-grained reactivity + DOM directives + very small runtime size (~3 KB gzipped target). Currently continuing with: -> unit tests -> DOM tests -> state stabilization -> API cleanup Check it out here: https://lnkd.in/dV4XsxiF #javascript #webdevelopment #opensource #performance #frontend #reactivity

⚡ Most JavaScript developers only use a few array methods daily. If you know these well, you can handle most data transformations in frontend code. The big ones: 🔹 map() — transform elements 🔹 filter() — keep items that match a condition 🔹 reduce() — accumulate values into one result 🔹 find() / findIndex() — get the first match 🔹 forEach() — run side effects But there are also some important details developers often miss: ⚠️ Some methods mutate the original array ⚠️ Array.sort() sorts values as strings by default ⚠️ Avoid sparse arrays like new Array(n) ⚠️ ES2023 introduced immutable methods like toSorted(), toReversed(), toSpliced() Another powerful pattern used heavily in modern frontend code: Method chaining Filter → Transform → Return the result. Clean. Functional. Readable. Frontscope breaks this down with interactive explanations and examples. Explore the full lesson here 👇 https://lnkd.in/gqcb56Vi #javascript #frontend #webdevelopment #programming #reactjs

🚀 Built an Advanced DOM Simulator using Vanilla JavaScript While strengthening my understanding of core JavaScript concepts, I built a Visual DOM Simulator that helps visualize how browsers interpret and structure HTML internally. The tool allows users to write HTML and instantly see how it gets converted into a DOM tree structure. This project helped me explore how DOM traversal works and how recursive algorithms can be used to represent hierarchical structures. 🔗 Live Demo: https://lnkd.in/gRNDs_xz ✨ Features • Live HTML Editor • Real-time Preview Rendering • Dynamic DOM Tree Visualization • Click-to-Highlight Elements in Preview • Node Inspector (Tag, Classes, Children Count) • Recursive DOM Traversal 📚 Key Learnings Through this project I gained deeper insights into: • DOM manipulation and traversal • Recursive algorithms for tree-like structures • Event handling and propagation • Dynamic UI updates with JavaScript Building developer-tool style projects like this helps understand how browsers work under the hood, and it significantly improves JavaScript problem-solving skills. I’m planning to extend this further with features like expand/collapse nodes, DOM search, and DOM mutation tracking. I’d love to hear your feedback! Devendra Dhote Ritik Rajput Sheryians Coding School #javascript #frontenddevelopment #webdevelopment #dom #learninginpublic #buildinpublic #sheryianscodingschool

🚀 JavaScript Objects & Destructuring — A Practical Guide Objects are the foundation of JavaScript. Almost everything in modern JavaScript — APIs, state management, configurations — revolves around objects. To make learning easier, I created a page that clearly explains Objects and Destructuring with simple examples. Topics included: • Creating objects • Dot vs bracket notation • Computed property names • Object destructuring • Default values & renaming • Nested destructuring • Rest & Spread operators • Object.keys / values / entries • Object.assign • Object.freeze & Object.seal • Property descriptors This is especially useful for JavaScript and React developers, since features like destructuring, spread, and computed keys are used every day. 📖 Explore the page here: https://lnkd.in/g95tprbi If you’re learning modern JavaScript, this will help you understand objects much more clearly. #JavaScript #FrontendDevelopment #ReactJS #WebDevelopment #Programming #LearnJavaScript

Harnessing the Power of Template Literals! 💻 Hey Web Dev enthusiasts! 🎉 Today, let's dive into the fascinating world of template literals in JavaScript. These aren’t just your average strings; they allow you to embed expressions, multi-line strings, and even more, making your code cleaner and more readable! Imagine you’re building a user profile card and you want to display their name and age elegantly. 🌟 Have you used template literals in your projects? Share your favorite use case! 💬 #WebDev #JavaScript #TemplateLiterals #Coding #WebDevelopment

Just built a simple Number Guessing Game using HTML, CSS, and Js The game generates a random number between 1 and 10, tracks attempts, and even levels up the difficulty as you progress. It was a fun way to practice DOM manipulation, event handling, and game logic while keeping the UI clean and interactive. Small projects like this really help in strengthening core JavaScript concepts and understanding how user interaction works behind the scenes. Grateful for the guidance and support throughout this learning journey. Special thanks to my course instructor, Juhinah Batool, for the continuous encouragement and practical learning approach git hub: https://lnkd.in/dvFGMQPr #WebDevelopment #JavaScript #FrontendDevelopment #LearningByDoing #CodingJourney

🚀Day 101 of Cohort2.0 Today's class was about More on Instagram clone project with Ankur Prajapati at Sheryians Coding School In This session, we were introduced to 4 layer frontend architecture: 1). UI layer ⬇️ 2). Hooks ⬇️ 3). State layer ⬇️ 4). API layer i learned how each layer works and how to implement this architecture to make the code more manageable and scalable. i learned about different methods and functions to implement this architecture which helps in writing a clean code. #responsiveness #responsivedesig #css #scss #html #Cohort2 #webdevelopment #Javascript #react #DOM #frontend