Hi #connections, Just shipped something I've been working on: RepoMap 🗺️ Ever jumped into a mid-level or large codebase and felt completely lost? 🤔 "Which file is connected to which?" 🤔 "What's importing what?" 🤔 "Are these files even being used?" I've been there. Multiple times. And honestly, it was frustrating. So I decided to build something about it. Introducing RepoMap — A zero-setup dependency visualization tool for JavaScript/TypeScript repositories. Just paste a GitHub URL, and instantly get: 📊 Interactive Dependency Graph — See exactly how your files are connected with a beautiful, zoomable visualization 🔴 Orphan File Detection — Discover dead code and unused files that are just sitting there, adding to technical debt 🟢 Entry Point Detection — Automatically identifies where your application starts 🔗 Bidirectional Tracking — See both what a file imports AND what imports it What makes it different? Most tools either require setup, installation, or only work locally. RepoMap works directly with GitHub URLs — no cloning, no CLI commands, no configuration. Just paste and visualize. It supports: ⚛️ React / Vite ⬛ Next.js (App Router & Pages Router) 🎸 Remix 📦 Node.js / Express And intelligently handles path aliases (@/, ~/), TypeScript ESM imports, config files, test files, and even Storybook stories. The story behind it: This is a 100% vibe-coded project. 🤖 The idea came from real frustration, and I just started building — letting curiosity and creativity guide the way. No strict planning, just pure problem-solving flow. And honestly? I enjoyed every minute of it. What's next? This project is NOT done. It has SO much potential: - Support for more languages (Python, Go, etc.) - Vue, Svelte, Astro single-file component analysis - More advanced visualizations - Performance optimizations for massive repos If you want to collaborate - you're more than welcome! 🤝 Check it out, break it, give feedback, or contribute. Let's make understanding codebases easier for everyone. 🔗Project Link: [https://lnkd.in/grnTtXZn] #OpenSource #JavaScript #TypeScript #React #NextJS #DeveloperTools #WebDevelopment #VibeCoding #BuildInPublic #SideProject #linkedin #community #connections #letscode
More Relevant Posts
-
TypeScript 6.0 is here, and it's more than just another version bump. This release fundamentally changes how we think about type safety and performance in JavaScript development for 2026. Here are the key advanced features that will impact your codebase: 🧠 **Context-Aware Type Inference** Method syntax now works identically to arrow functions. TypeScript 6.0 checks if `this` is actually used before marking a function as "contextually sensitive," eliminating a major pain point in generic function calls. 🗺️ **#/ Subpath Imports** No more relative path hell. TypeScript now supports `#/` prefix for subpath imports, matching bundler conventions and cleaning up import statements across your codebase. ⚖️ **Stable Type Ordering** The new `--stableTypeOrdering` flag ensures deterministic type unions, eliminating noise when comparing compiler outputs. This prepares us for TypeScript 7.0's parallel type checking. ⏰ **Temporal API Types** Built-in types for the Temporal API are now included. Say goodbye to Date object headaches with proper timezone awareness, immutability, and a clean API. 🗺️ **Map Upsert Methods** `getOrInsert()` and `getOrInsertComputed()` eliminate the verbose "check-if-exists-then-set" pattern for Maps, reducing boilerplate and potential errors. 🛡️ **RegExp.escape()** Safer regex construction from user input with built-in escaping, preventing regex injection vulnerabilities. 🚨 Breaking Changes Alert TypeScript 6.0 introduces significant defaults changes: - `strict: true` by default - `module: esnext` by default - `types: []` by default (explicit is better!) - `target: es5` is deprecated These changes prepare us for TypeScript 7.0's native port and performance improvements. The migration requires attention but sets the stage for faster builds and more reliable type checking. TypeScript continues to evolve from a type checker into a comprehensive development platform. Full deep dive with code examples: https://lnkd.in/eBGiPbkE What TypeScript 6.0 feature are you most excited about? Share your thoughts below! #TypeScript #JavaScript #WebDevelopment #Programming #TypeScript6 #SoftwareEngineering #DeveloperTools #2026Tech
To view or add a comment, sign in
-
JavaScript's tooling chaos might finally be over. One release just changed everything. 🔧 For years, front-end developers have juggled a fragmented mess: a bundler here, a linter there, a test runner somewhere else, a package manager fighting everything. The JavaScript ecosystem's famous "fatigue" has been real — until now. Evan You just announced Vite+, described as "a unified toolchain for JavaScript." One CLI. One config. Runtime, package manager, bundler, linter, formatter, and test runner — all unified. And it's built on Oxc and Rolldown, the Rust-powered tools that are rewriting what "fast" means for developers. But that's just the start. Here's everything dropping in the JavaScript/TypeScript ecosystem right now: 🚀 Vite 8.0 is out — Bundles now run on Rolldown, delivering dramatically faster builds. Integrated Devtools, native tsconfig paths support, and Wasm SSR are all built in from day one. ⚡ TypeScript just got turbocharged — Microsoft's "Project Corsa" ports the TypeScript compiler to Go. Benchmark result: the VS Code codebase compiles in 7.5 seconds vs. 77.8 seconds before. That's a 10× speedup. Your IDE will feel like a different tool. 🟢 Node.js runs TypeScript natively — Node 23.6 and 22.18 enable TypeScript execution via "Type Stripping" by default. No more ts-node, no more build steps just to run a script. 🎯 Oxfmt hits beta — Passes 100% of Prettier's test suite while running up to 36× faster. Formatting is no longer a bottleneck in your CI pipeline. 🏗️ Vite+ is the endgame — One command to bootstrap, build, lint, test, and ship. If it delivers on its promise, we're looking at the biggest DX leap since npm itself. For teams spending hours on tooling configuration, these releases represent real savings. For individual developers, they mean less context-switching and more time building actual features. The Rust-ification of JavaScript tooling is in full swing — and it's delivering. 💬 Which of these changes your workflow the most: Vite+, native TypeScript in Node.js, or the 10× compiler speedup? I'm curious what teams are most excited about. #JavaScript #TypeScript #WebDevelopment #DevTools #Vite #NodeJS #FrontendDevelopment
To view or add a comment, sign in
-
-
> **Stop guessing where your files go. Here's the React folder structure every developer needs to know. 🗂️** > > After years of messy codebases, late-night debugging sessions, and onboarding nightmares — the secret to a scalable frontend isn't just your code. It's **how you organize it.** > > Here's what each folder does and why it matters: > 📡 **API** — All your backend connections in one place. No more hunting for fetch calls. > 🎨 **Assets** — Static files, images, fonts. Clean and centralized. > 🧩 **Components** — Reusable UI building blocks. Write once, use everywhere. > 🌐 **Context** — Global state without prop drilling chaos. > 📦 **Data** — Static JSON content and constants. > 🪝 **Hooks** — Custom logic extracted and reusable across the entire app. > 📄 **Pages** — One folder per route. Clean, readable, scalable. > 🔄 **Redux** — Advanced state management for complex apps. > ⚙️ **Services** — Business logic and frontend services, separated from UI. > 🛠️ **Utils** — Helper functions that every file in your app will thank you for. > > A well-structured project isn't a luxury — **it's what separates junior from senior developers.** > > Save this. Share it with your team. Your future self will thank you. 💾 > > --- > 💬 What does YOUR folder structure look like? Drop it in the comments 👇 --- **🔥 Hashtags:** `#ReactJS` `#FrontendDevelopment` `#WebDevelopment` `#JavaScript` `#CleanCode` `#SoftwareEngineering` `#Programming` `#React` `#CodeNewbie` `#100DaysOfCode` `#FolderStructure` `#TechTips` `#DeveloperLife` `#SoftwareDeveloper` `#LearnToCode` `#OpenSource` `#CodingTips` `#FullStackDeveloper` `#FrontendEngineer` `#UIUXDevelopment` --- **Why this will go viral:** - Opens with a **pain point** every developer feels - Uses **emojis** for scanability on mobile - Ends with a **call to action** (comment + share) that boosts LinkedIn's algorithm - Mix of **broad** (`#WebDevelopment`) and **niche** (`#FolderStructure`) hashtags for maximum reach
To view or add a comment, sign in
-
-
Day 1 of 7 — JS Fundamentals Week 🗓️ This week I'm doing a focused revision of JavaScript fundamentals from an interview perspective. Kicking off with a topic that trips up even experienced devs — Promises and async/await. Here's everything I learned (and unlearned) today 👇 🔁 The Event Loop (finally makes sense) Promises use the microtask queue — not the macrotask queue. This means Promise callbacks ALWAYS run before setTimeout, even if setTimeout is set to 0ms. Mental model that clicked for me: → Macrotask queue = order ticket rail → Microtask queue = the expediter's window (urgent, runs first) After every macrotask, the engine drains the entire microtask queue before picking up the next one. ⚡ async/await is NOT magic Every async function returns a Promise — always. Every await suspends the function and frees the call stack. Code after await runs as a microtask continuation — not immediately. The mistake I was making: thinking await blocks everything. It doesn't. It only suspends that one function. 🚨 The #1 bug I see in code reviews Using async inside forEach: ❌ array.forEach(async item => { await doSomething(item) // forEach doesn't wait! }) ✅ for (const item of array) { await doSomething(item) // this actually waits } ✅ await Promise.all(array.map(item => doSomething(item))) 🔀 Parallel vs Sequential — know the difference ❌ Sequential (slow — 3s total): const a = await fetchA() // 1s const b = await fetchB() // 1s const c = await fetchC() // 1s ✅ Parallel (fast — 1s total): const [a, b, c] = await Promise.all([fetchA(), fetchB(), fetchC()]) Only use sequential when step B depends on step A's result. 🧩 Promise combinators — cheat sheet Promise.all → all must succeed (fail-fast) Promise.allSettled → wait for everyone, no short-circuit Promise.race → first to settle wins (fulfilled OR rejected) Promise.any → first to FULFILL wins (ignores rejections) 💡 Concepts that levelled up my understanding → .then() callbacks are ALWAYS async, even on already-resolved Promises → Returning a Promise inside .then() makes the chain wait (assimilation) → Forgetting return inside .then() breaks the chain silently — value becomes undefined → .catch() returns a resolved Promise — the chain continues after it → The explicit Promise constructor anti-pattern — wrapping a Promise in new Promise() unnecessarily Tomorrow: Closures, scope, and the questions interviewers love to ask about them. Follow along if you're also prepping for JS interviews — I'll be posting every day this week. Drop your hardest Promises/async interview question below 👇 #WebDevelopment #Frontend #LearnToCode #JavaScriptTips #AsyncAwait #Promises #InterviewPrep #CodingInterview #SoftwareEngineering #Developer #Tech #JSFundamentals #FrontendDevelopment #NodeJS #OpenToWork
To view or add a comment, sign in
-
-
🚀 JavaScript Simplified Series — Day 30 JavaScript feels fast… But have you ever wondered 👇 👉 How does it handle multiple tasks at once? 👉 How does async code run without blocking? This is where the **Event Loop** comes in 😎 --- ## 🤯 The Big Confusion JavaScript is **single-threaded** 👉 It can do **one thing at a time** Then how does this work? 👇 ```javascript id="el1" console.log("Start") setTimeout(() => { console.log("Async Task") }, 0) console.log("End") ``` 👉 Output: Start End Async Task Wait… why? 🤔 --- ## 🔥 Behind the Scenes JavaScript has 3 main parts: 👉 Call Stack 👉 Web APIs 👉 Callback Queue --- ## 🔹 Step by Step Flow 1️⃣ `console.log("Start")` → runs first 2️⃣ `setTimeout` → goes to **Web API** 3️⃣ `console.log("End")` → runs next 4️⃣ Callback goes to **Queue** 5️⃣ Event Loop checks → stack empty? 6️⃣ Yes → push callback to stack 👉 Then runs → "Async Task" --- ## 🔍 Visualization ```id="viz1" Call Stack → Executes code Web APIs → Handles async tasks Queue → Stores callbacks Event Loop → Manages everything ``` --- ## 🔥 Real Life Example Think of a **restaurant 🍽️** 👉 Waiter takes order → sends to kitchen 👉 Kitchen prepares food 👉 Meanwhile waiter serves others 👉 When food is ready → serves you 👉 Event Loop = waiter managing tasks --- ## 🔥 Simple Summary JS → single-threaded Async → handled outside Event Loop → manages execution --- ### 💡 Programming Rule **JavaScript is not multi-threaded… but it behaves like it is.** --- If you want to learn JavaScript in a **simple and practical way**, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary (Chai aur Code) --- 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays Basics Day 12 → Array Methods Day 13 → Array Iteration Day 14 → Advanced Array Methods Day 15 → Objects Basics Day 16 → Object Methods + this Day 17 → Object Destructuring Day 18 → Spread & Rest Day 19 → Advanced Objects Day 20 → DOM Introduction Day 21 → DOM Selectors Day 22 → DOM Manipulation Day 23 → Events Day 24 → Event Bubbling Day 25 → Event Delegation Day 26 → Async JavaScript Day 27 → Promises Day 28 → Async / Await Day 29 → Fetch API Day 30 → Event Loop Day 31 → Scope (Next Post) --- Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday
To view or add a comment, sign in
-
-
> **Stop guessing where your files go. Here's the React folder structure every developer needs to know. 🗂️** > > After years of messy codebases, late-night debugging sessions, and onboarding nightmares — the secret to a scalable frontend isn't just your code. It's **how you organize it.** > > Here's what each folder does and why it matters: > 📡 **API** — All your backend connections in one place. No more hunting for fetch calls. > 🎨 **Assets** — Static files, images, fonts. Clean and centralized. > 🧩 **Components** — Reusable UI building blocks. Write once, use everywhere. > 🌐 **Context** — Global state without prop drilling chaos. > 📦 **Data** — Static JSON content and constants. > 🪝 **Hooks** — Custom logic extracted and reusable across the entire app. > 📄 **Pages** — One folder per route. Clean, readable, scalable. > 🔄 **Redux** — Advanced state management for complex apps. > ⚙️ **Services** — Business logic and frontend services, separated from UI. > 🛠️ **Utils** — Helper functions that every file in your app will thank you for. > > A well-structured project isn't a luxury — **it's what separates junior from senior developers.** > > Save this. Share it with your team. Your future self will thank you. 💾 > > --- > 💬 What does YOUR folder structure look like? Drop it in the comments 👇 --- `#ReactJS` `#FrontendDevelopment` `#WebDevelopment` `#JavaScript` `#CleanCode` `#SoftwareEngineering` `#Programming` `#React` `#CodeNewbie` `#100DaysOfCode` `#FolderStructure` `#TechTips` `#DeveloperLife` `#SoftwareDeveloper` `#LearnToCode` `#OpenSource` `#CodingTips` `#FullStackDeveloper` `#FrontendEngineer` `#UIUXDevelopment` --- **Why this will go viral:** - Opens with a **pain point** every developer feels - Uses **emojis** for scanability on mobile - Ends with a **call to action** (comment + share) that boosts LinkedIn's algorithm - Mix of **broad** (`#WebDevelopment`) and **niche** (`#FolderStructure`) hashtags for maximum reach
To view or add a comment, sign in
-
-
Today I understood something very important in JavaScript & networking 🤯 👉 Why do we use await twice while making an API call? Example: const res = await fetch(url); const data = await res.text(); // or res.json() At first, it looks confusing… Why two awaits for one request? 🤔 The answer is: because these are two separate async stages. 🔹 First await const res = await fetch(url); This does not mean the full body is already loaded. It returns when: ✔ Response metadata is ready ✔ Status code is available ✔ Headers are available ✔ Body stream can now be consumed That means now you can access: res.status res.headers res.ok res.body So the first await gives you the Response object, not final parsed data. 🔹 Second await const data = await res.text(); (or res.json(), res.blob(), etc.) This returns when: ✔ Body content has been fully read ✔ Stream data is completed ✔ Parsing/conversion is finished Now you finally get usable data. 🔥 Real Example const res = await fetch("/api/user"); console.log(res.status); // available now const user = await res.json(); console.log(user); // actual parsed data 🍔 Simple Analogy Ordering food online: First await Food reaches your door 🚪 (You know it arrived) Second await You open the package and serve it 🍽️ (Now it’s usable) 🧠 Big Realization fetch() doesn’t directly return your final data. It returns: 👉 Response metadata first 👉 Then body data later So: ✔ First await = response ready ✔ Second await = data ready 🚀 Why This Matters Understanding this helps with: ✔ Better error handling ✔ Reading headers before body ✔ Streaming large files ✔ Better performance thinking ✔ Stronger JavaScript fundamentals ✔ Real networking knowledge #JavaScript #FetchAPI #AsyncAwait #WebDevelopment #Programming #Developers #Coding #SoftwareEngineering #APIs #Networking #FrontendDevelopment #BackendDevelopment #NodeJS #TechExplained #LearnInPublic #BuildInPublic #DeveloperLife #TechCommunity #React #NodeJs #FullStack #frontend #backend #webdevelopement #softwareengineer #api #aws #tcp #udp #streams
To view or add a comment, sign in
-
-
🚀 RS-X 2.0 is live — and it’s a major leap forward RS-X is built around a simple idea: Write expressions against your model, and let updates propagate automatically with fine-grained reactivity. It is easy to use and way more powerfull than signals or any other existing reactive framework. It paves the way for a truly reactive UI framework This is the biggest release of RS-X so far, bringing major improvements in performance, developer experience, and tooling. 🔧 What’s new in RS-X 2.0 🧠 Built-in compiler https://lnkd.in/eM_YH-n7 - Parse expressions at compile time - Optimize execution of expressions - Type-check expressions against your model → errors detected at compile time instead of runtime - Lazy loading support (configurable per expression or via groups) - Configurable preparsing & compiling (enabled by default) 💡 VS Code integration - RS-X expressions are treated as embedded JavaScript inside TypeScript - Full IntelliSense support for expressions ⚡ Performance https://lnkd.in/enANBAnA - Massive performance improvements 🛠 CLI https://lnkd.in/eVHWpMuS - Easy setup and integration with frameworks 🚀 Getting started 1) Install the CLI npm i -g @rs-x/cli 2) Verify installation rsx -v The CLI will also attempt to install the VS Code extension automatically. You can verify this in the Extensions panel by searching for “rs-x”. If needed, you can install it manually using the .vsix file. For example on Windows: C:\Users\robertsanders\AppData\Roaming\npm\node_modules@rs-x\cli\rs-x-vscode-extension-2.0.3.vsix 3) Create a new project (example) rsx project angular See other supported frameworks: https://www.rsxjs.com/ 4) Add RS-X to an existing project rsx init Curious to hear your thoughts and feedback—would love your input. 🔗 Docs: https://www.rsxjs.com 🔗 GitHub: https://lnkd.in/e93WfGWh #typescript #javascript #react #angular #signals #vue #nextjs #nodejs #rxjs #opensource #webdevelopment #performance #vscode
To view or add a comment, sign in
-
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development