Master LeetCode with Visualized Algorithms

𝗘𝘃𝗲𝗿𝘆𝗼𝗻𝗲 𝗶𝘀 𝗰𝗵𝗮𝘀𝗶𝗻𝗴 𝘁𝗵𝗲 𝗻𝗲𝘄𝗲𝘀𝘁 𝗳𝗿𝗮𝗺𝗲𝘄𝗼𝗿𝗸, 𝗯𝘂𝘁 𝗜 𝘄𝗲𝗻𝘁 𝗯𝗮𝗰𝗸 𝘁𝗼 𝗯𝗮𝘀𝗶𝗰𝘀 𝗮𝗻𝗱 𝗶𝘁 𝗰𝗵𝗮𝗻𝗴𝗲𝗱 𝗲𝘃𝗲𝗿𝘆𝘁𝗵𝗶𝗻𝗴. I stayed up late last night building a cart feature from scratch using just JS. It was the best way to level up my skills. Here is why raw JS is still undefeated:  • DOM Manipulation: No more relying on magic. I learned to create elements and inject them into the UI in real time. Seeing the cart update without a page refresh hits different.  • Event Handling: Spent way too long debugging click listeners. Event bubbling was a total menace, but now my "Add to Cart" button is bulletproof.  • Dynamic Data Management: Managing state as an array of objects was a massive brain teaser. Handling quantities and subtotal calculations forced me to write actual clean, reusable logic. Frameworks are great, but understanding what is happening under the hood makes you ten times faster at debugging later. I am excited to keep building and sharing my progress as I continue this journey. Link: https://lnkd.in/gUvNM-Zk Sarthak Sharma, Devendra Dhote, Ritik Rajput, Daneshwar Verma, Tanishq Sonwane, Sheryians Coding School #webdevelopment #dom #javascript #frontend

> Built a LeetCode Stats Dashboard using HTML, CSS & JavaScript I recently built a small project called LeetMetric that fetches LeetCode user statistics using the GraphQL API and displays them in a clean dashboard UI. > Features: • Search any LeetCode username • Easy / Medium / Hard solved progress • Circular progress visualization • User avatar and ranking • Dark mode toggle • Responsive UI This project helped me practice API integration, JavaScript async functions, and UI design. 🔗 GitHub Repository: https://lnkd.in/dWpKzmZh #webdevelopment #javascript #frontend #coding #leetcode #github #100daysofcode

Over the past week, I focused on strengthening my React fundamentals through a series of small, interactive projects as part of my Java Full Stack with Generative AI programme. Instead of just reading concepts, I made sure every topic was applied directly in the UI. Key areas I worked on: - State & events: Handling user actions and updating the interface instantly. - Hooks (including effect): Managing component behaviour and side effects in a structured way. - Lists & keys: Rendering repeating elements efficiently while keeping updates predictable. To practise these ideas, I built UIs such as an ATM-style withdrawal card, a random counter that tracks even/odd state, a calorie "burn it off" tracker, feedback components, and a destination search interface. I'll continue sharing these outputs and code snippets as part of documenting my learning journey and inviting feedback from the community. #React #FrontendDevelopment #FullStackDevelopment #LearningInPublic #DeveloperJourney

During my backend journey, I thought of revisiting the fundamentals. Strong core knowledge is the foundation of everything. That’s why I decided to build something using pure JavaScript (no frameworks). 🌟 TraceBoard - Organize Your Workflow A clean, distraction-free workspace designed to help you manage you day. Key Features - Native Drag & Drop API Local Storage Persistence Full Create / Edit / Delete logic Clean & Responsive UI Key Learnings - While building this, I went deeper into how the Drag & Drop API actually behaves. Drag & Drop doesn’t work “anywhere” by default you must explicitly define dragstart, dragover, and drop events. event.preventDefault() on dragover is mandatory otherwise dropping simply won’t work. Data transfer must be handled properly using dataTransfer.setData() and getData(). Managing DOM updates manually feels very different compared to frameworks, every movement requires careful state thinking. Reordering elements means understanding how the browser handles repaint and reflow. Since this was built with pure JS, state management became the real challenge making sure UI updates, local storage syncs, and drag behavior all stay consistent. No libraries. No shortcuts. Just understanding how the browser actually works. Every time I rebuild something, I try to go one level deeper than before. Sheryians Coding School Ankur Prajapati #Day1 #21DaysChallenge #Consistency #JavaScript #WebDevelopment #FrontendDevelopment

🚀 Weekly Progress Update Last week was all about strengthening my JavaScript fundamentals and improving problem-solving skills. Here’s what I worked on: ✅ Deep dive into Event Handling Event Bubbling Event Capturing Event Delegation ✅ Practiced and solved 40+ string-based problems to improve logic building ✅ Gained hands-on experience with: DOM Manipulation BOM (Browser Object Model) ✅ Built a form project applying real-world concepts of events, DOM, and validation This week helped me better understand how JavaScript works behind the scenes and how to write cleaner, more efficient code. Looking forward to learning more and building stronger projects ahead 💻🔥 #JavaScript #WebDevelopment #LearningJourney #FrontendDeveloper #Coding #100DaysOfCode

Still running ESLint + Prettier separately? Meet BIOME 🎉 . If your frontend toolchain feels slow and heavy, BIOME is worth a look. What is BIOME? A single Rust-based toolchain that replaces linting, formatting, and import organisation in one tool. Why it matters 🚀 : 25x faster than Prettier for formatting 15x faster than ESLint for linting One config file instead of multiple Built-in security and accessibility rules Multi-threaded processing for large codebases What it supports 🤘: TypeScript, JavaScript, JSX, JSON — plus partial support for Vue, Astro, and Svelte. Trade-off 🤼 : Fewer customisation options than ESLint/Prettier. For teams that want faster feedback and simpler setup, BIOME is a strong alternative to the classic ESLint + Prettier combo. BIOME = faster lint + format in one toolchain, written in Rust. Have you tried BIOME or another Rust-based tooling? What’s your experience so far? #Frontend #WebDevelopment #JavaScript #TypeScript #Rust #DeveloperTools #DevTools #Coding #SoftwareEngineering #Tech #Biome #Linting #CodeQuality

AI is great at writing code, but it’s surprisingly bad at middle-school math. 💻 As a Frontend Engineer scaling calculator-all.com with Next.js 15 and TypeScript, I recently had a reality check. I was building a complex financial tool and decided to let Cursor and GitHub Copilot take the lead on the core formula. The code looked beautiful. The Tailwind CSS styling was spot on, and Biome didn’t report a single linting error. But then I ran my Vitest suite. 🛑 The calculator was off by nearly $2,400 on a standard 10-year projection. 📈 The AI had "hallucinated" a simplified version of the compound interest formula that looked correct but failed at scale. 💸 It tried to be clever with floating-point math where it should have been precise. I had to step in, go back to the whiteboard, and manually rewrite the logic using proper decimal handling. 🛠️ Modern tools like Bun make my workflow 10x faster, but they don't replace the need for a human to verify the output. 🧠 I almost shipped a tool that would have given my users a very false sense of wealth. 😅 My DMs would have been a disaster by Monday morning. AI is an incredible co-pilot, but we are still the ones responsible for the flight path. 🚀 How often do you double-check the logic AI generates for you? #FrontendEngineer #TypeScript #Nextjs #ReactJS #WebDev #AI #SoftwareEngineering #CleanCode #JavaScript #Programming #WebPerformance #Vitest #TailwindCSS #Coding #Productivity

So you wanna know lexical scoping? 👀 here is the easy way... But before that, you need to understand two small things. 1. Scope Scope just means where you can access a variable in your code. function greet() { let message = "Hello"; console.log(message); // works here } console.log(message); // error Here "message" only exists inside the function. 2. Lexical Lexical simply means where something is written in the code. JavaScript decides scope by how the code is structured, not where a function is called. For example: function outer() { let name = "sharat"; function inner() { console.log(name); } inner(); } "inner()" can access "name" because it was written inside "outer()". When JavaScript looks for a variable, it first checks the current scope, then moves to the outer scope, and keeps going until it reaches the global scope. That’s basically lexical scoping. all thanks to Sheryians Coding School and Devendra Dhote #javascript #webdevelopment #frontend #coding

Stop Writing Redux the Hard Way. I used to write 50+ lines of boilerplate just to manage a simple counter in Redux. Action types. Action creators. Switch statements. Immutable update logic. Then I discovered createSlice from Redux Toolkit — and everything changed. In under 15 lines, you get: Auto-generated action creators Auto-generated action types Immer-powered state mutations (yes, you can "mutate" state directly) A clean, readable reducer No more switch statements. No more ...state spread operators. No more separate action files. Redux Toolkit isn't just a convenience — it's the official, recommended way to write Redux in 2026. If you're still writing Redux the old way, you're working harder, not smarter. What's one tool that completely changed how you write code? Drop it below. 👇 #Redux #ReduxToolkit #JavaScript #React #WebDevelopment #Frontend #SoftwareEngineering #CodeSmarter #LearnToCode

🚀 LeetCode Problem Solved - Best Time to Buy and Sell Stock Today I solved the Best Time to Buy and Sell Stock problem on LeetCode using JavaScript with an optimized single-pass approach. 📊 Approach The goal is to determine the maximum profit from buying and selling a stock given its daily prices. The key idea is to: • Track the minimum price encountered so far • Calculate the potential profit for each day • Update the maximum profit whenever a higher profit is found This allows us to compute the result in one pass through the array. ⚡ Complexity 🔹 Time Complexity: O(n) – Traverse the prices array once 🔹 Space Complexity: O(1) – No extra data structures used ✅ Result ✔️ All test cases passed 📦 Constant space complexity Problems like this reinforce the importance of array traversal, state tracking, and optimizing brute-force solutions into efficient linear algorithms. Consistent practice with these problems strengthens DSA fundamentals and problem-solving skills for coding interviews. #leetcode #javascript #dsa #algorithms #codingpractice #softwareengineering #webdevelopment