ER Model vs Relational Model in System Design

You don’t fix a messy database by just breaking tables. You fix it by understanding why data becomes messy in the first place 👇 Normalisation is a technique. Functional Dependency is the logic behind it. If you skip FD, you’re just guessing your schema. Normalisation ≠ Functional Dependency Normalisation → Organizing tables to reduce redundancy Functional Dependency → Defining how one attribute depends on another When building real systems, you don’t just use Normalisation — you rely on Functional Dependency to handle data consistency and prevent anomalies. Example: UserID → Email If you store Email in multiple places despite this dependency, you’ll face: - update anomalies - deletion issues - inconsistent data ⚠️ Armstrong’s Axioms (Reflexive, Augmentation, Transitivity) are not just theory — they help you reason about how your data should behave. 1NF, 2NF, 3NF, BCNF are results. Functional Dependency is the foundation 🧠 This small distinction changes how you design systems. Building systems > memorizing concepts 🚀 What’s one concept developers often misunderstand? #fullstackdeveloper #softwareengineering #webdevelopment #javascript #reactjs #backend #buildinpublic #nodejs #nextjs #typescript

🚀 Most developers ignore this… until their database slows down to a crawl. Indexing isn’t just an optimization — it’s the difference between milliseconds and seconds 👇 Indexing minimizes disk access and helps you locate data faster using a structured lookup system. Primary Index ≠ Secondary Index Primary Index → Works on sorted data, defines how records are physically stored Secondary Index → Works on unsorted data, provides an additional fast lookup path When building real systems, you don’t just rely on storing data efficiently — you rely on indexing to handle performance at scale, especially for heavy SELECT queries and filtering ⚡ Think about it: Without indexing → full table scan (slow 🐢) With indexing → direct access using pointers (fast ⚡) Dense Index ≠ Sparse Index Dense Index → Entry for every record (fast lookup, more space) Sparse Index → Entry for some records (less space, slightly slower lookup) This small distinction changes how you design systems — because every index you add improves read performance but impacts writes (INSERT, UPDATE, DELETE). Good engineers don’t just add indexes blindly. They balance read vs write trade-offs based on real use cases. Building systems > memorizing concepts. What’s one concept developers often misunderstand? #fullstackdeveloper #softwareengineering #webdevelopment #javascript #reactjs #backend #buildinpublic #nodejs #nextjs #typescript

Ever changed a variable in JavaScript only to realize you accidentally broke the original data too? 🤦♂️ That’s the classic Shallow vs. Deep Copy trap. Here is the "too long; didn't read" version: 1. Shallow Copy (The Surface Level) When you use the spread operator [...arr] or {...obj}, you’re only copying the top layer. The catch: If there are objects or arrays inside that object, they are still linked to the original. Use it for: Simple, flat data. 2. Deep Copy (The Full Clone) This creates a 100% independent copy of everything, no matter how deep the nesting goes. The easy way: const copy = structuredClone(original); The old way: JSON.parse(JSON.stringify(obj)); (Works, but it’s buggy with dates and functions). The Rule of Thumb: If your object has "layers" (objects inside objects), go with a Deep Copy. If it’s just a basic list or object, a Shallow Copy is faster and cleaner. Keep your data immutable and your hair un-pulled. ✌️ #Javascript #WebDev #Coding #ProgrammingTips

In this post, I focused on visualizing how data moves within a React application using a Data Flow Diagram (DFD). Understanding data flow allows developers to: • Build more organized and scalable applications • Avoid unnecessary complexity and bugs • Clearly separate logic from UI • Improve maintainability and readability This approach helped me move beyond writing components to truly understanding how data drives the entire application. #React #Frontend #WebDevelopment #JavaScript #SoftwareArchitecture #CleanCode

🚀 What is JSON? (Explained Simply) In today’s digital world, applications are constantly communicating with each other. But how do they actually exchange data so efficiently? That’s where JSON (JavaScript Object Notation) comes in. JSON is a lightweight data format used to store and exchange data between systems—especially between servers and web applications. Think of it as a simple, structured way to represent data using text. 🔍 Why JSON is so powerful: ✔️ Easy for humans to read and write ✔️ Easy for machines to parse and generate ✔️ Built using simple key–value pairs 📦 Example: { "name": "Alice", "age": 25, "isStudent": false, "skills": ["Python", "JavaScript"] } 🧠 Key Concepts: • Objects → Wrapped in {} (like dictionaries) • Arrays → Wrapped in [] (lists of values) • Keys → Always strings (in quotes) • Values → Can be strings, numbers, booleans, arrays, objects, or null 🌐 Where is JSON used? 🔹 APIs (sending & receiving data) 🔹 Configuration files 🔹 Databases 🔹 Modern web applications JSON might look simple at first glance, but it’s one of the core building blocks behind almost every modern application you use today. Mastering JSON is not optional anymore—it’s essential. 💡 Follow for more simple explanations of tech concepts. #JSON #WebDevelopment #APIs #Programming #JavaScript #FullStack #TechExplained #Developers #CodingBasics #SoftwareDevelopment #nikhil

You’re still building forms manually from JSON? --- Every time I get a JSON response, I end up doing the same thing: → read structure → map fields → wire inputs → repeat… again --- It’s boring. It’s repetitive. And it shouldn’t exist in 2026. --- So I built something for myself: 👉 Paste JSON 👉 Get a working form instantly --- No setup. No backend. No config headaches. Just: JSON → UI --- Introducing: 🔧 JSON → Form (part of useSignal) 👉 https://lnkd.in/grSx-SEi --- It’s fully browser-native. Which means: - your data never leaves your machine - everything runs instantly - no dependency on any service --- This isn’t just a generator. It’s a way to: → skip repetitive UI work → prototype faster → actually focus on logic --- Try it once. You probably won’t go back to building forms manually. --- 💬 Curious — how are you handling JSON → forms today? #frontend #webdevelopment #javascript #reactjs #devtools #buildinpublic #productivity #developers #webdev

“set (𝙧𝙚𝙫𝙖𝙡𝙞𝙙𝙖𝙩𝙚: 𝟲𝟬) and move on” This works in Next.js — until it doesn’t. Now you’re: • serving stale data for up to 60s • re-fetching even when nothing changed • adding load for no reason This is where caching stops being an optimization — and becomes about 𝘄𝗵𝗼 𝗼𝘄𝗻𝘀 𝗳𝗿𝗲𝘀𝗵𝗻𝗲𝘀𝘀. At a high level: 𝗦𝘁𝗮𝘁𝗶𝗰 𝗿𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴 → speed 𝗗𝘆𝗻𝗮𝗺𝗶𝗰 𝗿𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴 → freshness 𝗖𝗮𝗰𝗵𝗶𝗻𝗴 + 𝗿𝗲𝘃𝗮𝗹𝗶𝗱𝗮𝘁𝗶𝗼𝗻 → where we balance the two But this abstraction starts to break down at scale. 👉 𝗧𝗶𝗺𝗲-𝗯𝗮𝘀𝗲𝗱 𝗿𝗲𝘃𝗮𝗹𝗶𝗱𝗮𝘁𝗶𝗼𝗻 (𝗿𝗲𝘃𝗮𝗹𝗶𝗱𝗮𝘁𝗲) periodically refetches data This works well when data becomes stale in predictable intervals Think dashboards, blogs, or analytics snapshots 👉 𝗢𝗻-𝗱𝗲𝗺𝗮𝗻𝗱 𝗿𝗲𝘃𝗮𝗹𝗶𝗱𝗮𝘁𝗶𝗼𝗻 (𝗿𝗲𝘃𝗮𝗹𝗶𝗱𝗮𝘁𝗲𝗧𝗮𝗴, 𝗿𝗲𝘃𝗮𝗹𝗶𝗱𝗮𝘁𝗲𝗣𝗮𝘁𝗵) flips the model Don't blindly revalidate — react to change In one of our systems, moving from time-based to event-driven invalidation: • reduced redundant fetches significantly • cache behavior became predictable under load This becomes the default once writes are frequent. 👉 𝗙𝘂𝗹𝗹 𝗥𝗼𝘂𝘁𝗲 𝗖𝗮𝗰𝗵𝗲 𝘃𝘀 𝗗𝗮𝘁𝗮 𝗖𝗮𝗰𝗵𝗲 • Full Route Cache → caches the rendered output • Data Cache → caches the underlying fetch calls That separation is powerful: Don't rebuild the entire page — refresh just the data 🧠 𝗠𝘆 𝘁𝗮𝗸𝗲𝗮𝘄𝗮𝘆 𝗦𝘁𝗼𝗽 𝘁𝗵𝗶𝗻𝗸𝗶𝗻𝗴 𝗶𝗻 𝘁𝗶𝗺𝗲 → 𝘀𝘁𝗮𝗿𝘁 𝘁𝗵𝗶𝗻𝗸𝗶𝗻𝗴 𝗶𝗻 𝗲𝘃𝗲𝗻𝘁𝘀 Instead of → “𝘳𝘦𝘷𝘢𝘭𝘪𝘥𝘢𝘵𝘦 𝘦𝘷𝘦𝘳𝘺 𝘟 𝘴𝘦𝘤𝘰𝘯𝘥𝘴” Think → “𝘸𝘩𝘢𝘵 𝘦𝘷𝘦𝘯𝘵 𝘴𝘩𝘰𝘶𝘭𝘥 𝘮𝘢𝘬𝘦 𝘵𝘩𝘪𝘴 𝘥𝘢𝘵𝘢 𝘴𝘵𝘢𝘭𝘦?” ❓Interested to hear how this plays out in write-heavy or multi-region setups. #NextJS #Caching #ReactJS #WebDevelopment #FullStack #JavaScript #SoftwareEngineering #SystemDesign #FrontendDevelopment

𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗦𝘁𝗿𝗶𝗻𝗴𝘀 𝗹𝗼𝗼𝗸 𝘀𝗶𝗺𝗽𝗹𝗲. 𝗧𝗵𝗲𝘆'𝗿𝗲 𝗻𝗼𝘁 Here's the short version: Strings power almost every real-world app: form validation, APIs, text processing, i18n, frontend rendering. Yet most developers never look under the hood. Here's what changes when you do • Strings are immutable Every "modification" creates a brand new string in memory. No in-place edits. Ever. • UTF-16 encoding explains the weird .length behavior "😀".length === 2, not 1. Emojis and many Unicode characters use two code units — not one. • Primitive vs Object — they are NOT the same "hello" and new String("hello") behave differently in comparisons, typeof checks, and method calls. Mixing them up causes silent bugs. • charCodeAt() is the wrong tool for Unicode Use codePointAt() and String.fromCodePoint() instead. They handle characters outside the Basic Multilingual Plane correctly. • Tagged templates are massively underused Template literals aren't just cleaner concatenation. Tagged templates power SQL sanitization, CSS-in-JS libraries, and GraphQL query builders. • Intl.Segmenter exists for a reason Splitting text by spaces breaks for many languages. Intl.Segmenter handles proper word and grapheme segmentation — essential for i18n. • V8 doesn't store strings the way you think Internally, V8 uses ConsStrings, SlicedStrings, and String Interning to avoid redundant allocations and boost performance behind the scenes. 𝗞𝗲𝘆 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆 Understanding strings deeply = cleaner, safer, more performant code. The smallest data type often teaches the biggest engineering lessons. What's a string behavior that caught you off guard? Drop it below #JavaScript #WebDevelopment #FrontendDevelopment #V8Engine #Programming #SoftwareEngineering #LearningInPublic #DeveloperJourney #ECMAScript

Have you ever found yourself needing to store unique values or key-value pairs efficiently? Map and Set are two powerful data structures in JavaScript that can help with that! ────────────────────────────── Exploring Map and Set Data Structures in JavaScript Let's dive into the powerful Map and Set data structures in JavaScript and see how they can enhance our coding skills. #javascript #datastructures #programming #webdevelopment ────────────────────────────── Key Rules • Map allows you to store key-value pairs where keys can be of any type. • Set stores unique values, meaning no duplicates are allowed. • Both Map and Set maintain the order of insertion, which can be super handy. 💡 Try This const myMap = new Map(); myMap.set('name', 'Alice'); myMap.set('age', 30); const mySet = new Set(); mySet.add(1); mySet.add(2); mySet.add(1); // won't add duplicate ❓ Quick Quiz Q: What type of data can a Map's keys be? A: Any type of data, including objects! 🔑 Key Takeaway Utilizing Map and Set can significantly improve the efficiency and clarity of your JavaScript code! ────────────────────────────── Small JavaScript bugs keep escaping to production and breaking critical user flows. Debugging inconsistent runtime behavior steals time from feature delivery.