Week 4 of building my Procedural Low-Poly World Generator! 🌍 Today was all about refactoring and optimization. I initially tried brute-forcing the terrain generation by displacing a highly subdivided mesh, but I quickly realized that approach wasn't scalable or lightweight enough for a web environment. So, I scrapped it and rebuilt the terrain engine from scratch using pure procedural math. By combining a Grid with a 4D Noise function and forcing flat shading, I created a highly optimized terrain system. By hooking up a "Seed" value to the W-axis of the noise, I can now generate infinite variations of low-poly landscapes instantly, just by changing a single number. The goal here is to prototype the visual logic before bringing it into code. Next up: translating this exact mathematical engine into React Three Fiber so the terrain generates directly in the browser! (Attached: A quick look at the noise math morphing the terrain in real-time based on the seed value. I dropped a screenshot of the node logic in the comments below! 👇) #Threejs #ReactThreeFiber #ProceduralGeneration #WebDevelopment #FrontendDeveloper #Blender3D #WebGL #BuildInPublic #SoftwareEngineering

🚀 I used Cursor + Claude to make something fun! Built a simple 4-Point Mesh Gradient Generator using AI-assisted design workflows, the heavy buzz on design LinkedIn to try it for myself. Iterations were quick, Cursor was easy to use. Just had be decisive and more considerate with tokens by knowing the design constraints! Iterated using Cursor and refined using Claude! Try it here 👉 https://lnkd.in/gv7RSE8q #UXDesign #ProductDesign #UIDesign #AIinDesign #GenerativeAI #DesignTools #InteractiveDesign #FrontendDev #HTML #CSS #JavaScript #MeshGradient #PortfolioProject #DesignExperiment #InnovationInDesign

Today was one of those days where things finally clicked While working on one of my ongoing projects, I built a VS Code–like File Explorer from scratch in React — and it turned out to be a great learning experience. Here’s what I explored 🔹 Built a recursive tree structure to handle nested folders & files 🔹 Understood how recursion actually works in real UI problems 🔹 Implemented core features: → Create file / folder → Delete (with full nested structure) → Dynamic rendering 🔹 Learned an important pattern: 🔹filter + map + recursion = tree operations 🔹 Got deeper clarity on handling nested data: → Managing deeply nested state → Updating tree efficiently → Thinking recursively instead of flat logic Biggest takeaway: If you truly understand recursion, you can solve complex UI problems much more cleanly. Building real features inside projects hits very different than just watching tutorials #React #FrontendDevelopment #WebDevelopment #LearningInPublic #JavaScript #BuildInPublic

𝗦𝗼𝗺𝗲𝘁𝗶𝗺𝗲𝘀 𝘆𝗼𝘂’𝗿𝗲 𝘄𝗮𝘁𝗰𝗵𝗶𝗻𝗴 𝗮 𝘃𝗶𝗱𝗲𝗼, 𝘆𝗼𝘂 𝗹𝗶𝗸𝗲 𝘀𝗼𝗺𝗲𝘁𝗵𝗶𝗻𝗴 𝘀𝗼𝗺𝗲𝗼𝗻𝗲’𝘀 𝘄𝗲𝗮𝗿𝗶𝗻𝗴 𝗼𝗿 𝘂𝘀𝗶𝗻𝗴, 𝗮𝗻𝗱 “𝘄𝗵𝗮𝘁 𝗶𝘀 𝘁𝗵𝗮𝘁?” 𝘁𝘂𝗿𝗻𝘀 𝗶𝗻𝘁𝗼 𝗮 𝘄𝗵𝗼𝗹𝗲 𝘀𝗶𝗱𝗲 𝗾𝘂𝗲𝘀𝘁 𝗼𝗳 𝘁𝗮𝗯𝘀 𝗮𝗻𝗱 𝗴𝘂𝗲𝘀𝘀𝗶𝗻𝗴 𝘀𝗲𝗮𝗿𝗰𝗵 𝘄𝗼𝗿𝗱𝘀.🔍 That’s the moment cropIT-Find is for: circle the thing on screen, use the crop (plus an optional short hint when it’s blurry / no logo) to build a cleaner query, and open results so you’re not starting from scratch every time. How it works (technical, simple): content overlay → crop image → OCR + image understanding → merge optional hint → build/normalize query → open search. Shipped a working version in a day. It could improve 100x with a few focused iterations. Github: https://lnkd.in/ezvkmj9p #ChromeExtension #JavaScript #SideProject #BuildInPublic #OpenSource

Static portfolios are dead. I replaced mine with a system. https://lnkd.in/gUgqy-k3 You don’t scroll it. You operate it.I got tired of static portfolio websites, so I built one you can actually interact with. When I started designing my personal site, I didn’t want another digital resume listing skills in Python, AI/ML, and Networking. I wanted the interface itself to demonstrate how I think and build systems. So I went a bit overboard (in a good way). 🔹 The entire experience is built as an interactive, brutalist-inspired web app 🔹 The “About” and “Network View” sections run on a custom physics-based SVG engine 🔹 Every node is draggable, zoomable, and fully responsive 🔹 No heavy third-party libraries — I implemented force-directed graph logic (repulsion, attraction, center gravity) from scratch 🔹 Optimized to maintain ~60fps on both desktop and mid-range mobile devices I even made the contact form simulate a TCP handshake… because why not turn networking concepts into UI? If you’re into: • Minimal, dark-mode, hacker-style interfaces • Creative coding and system-level thinking • Breaking things just to see how they behave You might enjoy this. Try it, mess with the physics, or even wire up your own network topology: https://lnkd.in/gUgqy-k3 Feedback from builders, engineers, and curious minds is welcome. #SoftwareEngineering #ReactJS #WebDevelopment #FrontendDev #CreativeCoding #PhysicsEngine #Networking #BuildInPublic #UIEngineering #JavaScript #TechInnovation #DeveloperPortfolio #100DaysOfCode #TechCareers

The Birth and Death of JavaScript: A 2026 Retrospective Gary Bernhardt's 2014 conference talk, "The Birth & Death of JavaScript," presented a satirical but technically grounded 20-year prediction for the software industry. The timeline designates 2026 as a critical juncture, making it the perfect time to evaluate his theories against current reality. The Foundation: asm.js to WebAssembly Bernhardt's entire prediction hinged on asm.js, a highly optimizable, strictly typed subset of JavaScript that served as the precursor to modern WebAssembly (Wasm). The architectural goal was to bypass writing JavaScript directly. Instead, developers would write in languages like C, C++, or Rust and compile them down to run natively in the browser. While early experiments produced massive 3MB bundles that strained VMs, they successfully proved that the browser could function as a universal compilation target. The "Metal" OS Architecture The most extreme phase of Bernhardt's prediction was called "Metal." He theorized that the overhead of traditional operating systems-specifically the calls between ring 0 and ring 3-would be eliminated. The proposed solution was to place a JavaScript VM directly inside the OS kernel. In this environment, every program would compile to asm.js, relying entirely on VM isolation rather than traditional OS memory management. The 2026 Reality Check and the AI Disruption While the industry has not adopted the "Metal" kernel architecture, the core concept of compiling backend languages for the web is thriving through WebAssembly. Wasm is heavily utilized in modern infrastructure, powering thick applications like Figma and enabling multi-language support on edge networks like Cloudflare Workers. Bernhardt's timeline failed to account for one major variable: the explosion of artificial intelligence. He predicted that developer frustration would force the shift to a Wasm-only world by 2025. Instead, the rapid advancement of AI and generated code completely shifted the industry's trajectory, changing how software is written and deployed before his terminal predictions could fully materialize. #JavaScript #WebAssembly #Wasm #SoftwareEngineering #TechHistory #CloudArchitecture #ArtificialIntelligence #Programming

Most dependency graphs are unreadable. You’ve probably seen them. A giant web of nodes and edges that looks impressive… But tells you almost nothing. The problem is not the data. It is the interface. Developers don’t think in graphs. They think in structure. Folders. Files. Hierarchies. So I tried something different. I added a browser view to Depsly that lets you explore dependencies like a file tree. You can: Traverse parent → child relationships See transitive dependencies clearly Understand structure without visual overload Same data. Completely different experience. This is now part of Depsly v0.1.8. If you want to try it: pip install depsly depsly analyze Would love feedback from people who’ve struggled with dependency graphs. #opensource #devtools #javascript #nodejs #softwareengineering #ux #programming #webdev

➡️ In #JS_TS, primitive data types are compared by value ➡️ Objects, arrays, and functions are compared by reference That means two identical-looking objects are still different if they were recreated 🧠 Why this matters 👇 ➡️ React.memo() uses shallow comparison ⚛️ ➡️ A new reference means the prop changed, so the child re-renders 🔁 ➡️ The same reference means React can skip the work ✅ Why memoization hooks exist 🪝 ➡️ useCallback() keeps function reference stable between renders based on dependency 🔒 ➡️ useMemo() keeps computed values, such as objects and arrays, stable between renders 📦 ➡️ Together, they reduce unnecessary renders and repeated expensive computations 🚀 What problem do they solve 🛠️ ☑️ ➡️ Preventing avoidable re-renders in memoized children ➡️ Avoiding expensive recalculations on unrelated state updates ➡️ Reducing UI jitter in complex component trees 📱 When not to use them ☢️ 🚫 ➡️ Cheap computations ➡️ Non-memoized children, where there is no real render-skip benefit ➡️ When the readability cost is higher than the performance gain Note 📝 #Optimize for correctness first, then measure, and memoize only hot paths. Memoization is a tool for controlling identity churn, not a default coding style. #memorization #TS #JS #react #reactNative

HeyGen just dropped HyperFrames, an open-source framework that renders full videos straight from raw HTML. It's built for your AI agents to code directly, bypassing the prompt-engineering casino completely. Link: https://lnkd.in/eNJcP6fr

𝗛𝗼𝘄 𝘁𝗼 𝗘𝘅𝘁𝗿𝗮𝗰𝘁 𝗖𝗼𝗹𝗼𝗿𝘀 𝗨𝘀𝗶𝗻𝗴 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 Build a color palette extractor with JavaScript. My guide shows you how. You learn: - The Canvas API. - Pixel data extraction. - Dominant color logic. Read the guide here. Source: https://lnkd.in/gAF5pKZG Optional learning community: https://lnkd.in/g39uNJJu