[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en":3,"post:\u002Fpost\u002Fdebugging-css-the-forgotten-margin-and-frontend-lessons":37},[4,11,17,24,30],{"id":5,"slug":6,"name":7,"colorHex":8,"iconName":9,"postCount":10},"0e2c1225-f78a-4c20-8c93-998ab9dc93b9","frontend","Frontend","#40484f",null,25,{"id":12,"slug":13,"name":14,"colorHex":15,"iconName":9,"postCount":16},"bc8df70e-b7fb-4d89-a80c-fd458d36d58c","code-development","Code & Development","#8b5cf6",23,{"id":18,"slug":19,"name":20,"colorHex":21,"iconName":22,"postCount":23},"550e8400-e29b-41d4-a716-446655440001","inteligencia-artificial","Artificial Intelligence","#6366f1","brain",14,{"id":25,"slug":26,"name":27,"colorHex":28,"iconName":9,"postCount":29},"ea63b69c-2eb4-4100-81f3-70ce52d33743","tech-news","Tech News","#e50606",4,{"id":31,"slug":32,"name":33,"colorHex":34,"iconName":35,"postCount":36},"550e8400-e29b-41d4-a716-446655440017","how-to-guides","How-To & Guides","#be123c","book-open",2,{"post":38,"related":477,"translations":545,"resolved":9},{"id":39,"slug":40,"title":41,"excerpt":42,"image":43,"featured":44,"groupId":45,"publishedAt":46,"readingTime":47,"views":48,"author":49,"category":51,"tags":52,"contentJson":59,"metaTitle":474,"metaDescription":475,"updatedAt":476},"841890b2-1a8c-43d4-b434-b94714705605","debugging-css-the-forgotten-margin-and-frontend-lessons","Debugging CSS: The Forgotten Margin and Frontend Lessons","A forgotten CSS property turned a minor layout glitch into a two-week ordeal. Learn how to avoid emotional debugging and fix complex UI issues faster.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1767745741814-featured-i6p1gc.jpeg",false,"bcaf503a-15c1-4d28-8795-6ae3c2a3e06f","2026-08-02T16:09:35.153874+00:00",8,0,{"name":50,"avatar":9},"Genildo Souza",{"slug":6,"name":7,"color":8},[53,56],{"slug":54,"name":55},"css","CSS",{"slug":57,"name":58},"performance","Performance",{"type":60,"content":61},"doc",[62,72,82,88,101,107,114,120,126,132,138,144,150,158,164,170,181,192,199,205,211,217,223,236,242,250,262,268,274,286,293,316,328,334,340,346,357,364,370,381,387,398,404,410,412,418,471],{"type":63,"attrs":64},"summaryBox",{"id":65,"items":66,"title":71},"sum_ufl1ugk8",[67,68,69,70],"Avoid emotional debugging by resisting the urge to refactor code before identifying the actual root cause of a visual issue.","Use a systematic bottom-up approach by inspecting computed styles in DevTools to trace the exact origin of problematic CSS properties.","Be cautious with global utility classes, as they can silently apply unintended styles to elements across different pages.","Prioritize isolating the problem early to prevent minor layout bugs from escalating into unnecessary and costly architectural refactors.","Lessons from a Two-Week CSS Debugging Saga",{"type":73,"attrs":74,"content":76},"paragraph",{"id":75},"p_2bspqz5i",[77,79],{"type":78},"hardBreak",{"text":80,"type":81},"It was just any Tuesday when I received the Slack message that every frontend developer fears: \"The sidebar is misaligned on all pages. It looks like it broke after the last deploy. Can you take a look?\"","text",{"type":73,"attrs":83,"content":85},{"id":84},"p_y736l1m5",[86],{"text":87,"type":81},"Simple, right? I opened the browser, accessed the application, and... wow, it really was ugly. The sidebar, which should have been perfectly aligned to the left, had a strange spacing, creating a visual asymmetry that made the entire interface look broken. In an application that processed tens of thousands of reais in transactions per day, visual details like this matter—a lot.",{"type":73,"attrs":89,"content":91},{"id":90},"p_uv86463k",[92,94,99],{"text":93,"type":81},"What should have been a 20-minute fix turned into a two-week saga that taught me more about debugging than years of development. And all because of three characters lost in the middle of thousands of lines of code: ",{"text":95,"type":81,"marks":96},"margin-inline: 8px",[97],{"type":98},"code",{"text":100,"type":81},".",{"type":73,"attrs":102,"content":104},{"id":103},"p_vgricb7h",[105],{"text":106,"type":81},"If you have ever gone through the humiliating experience of discovering that you spent days solving the wrong problem, this story will sting—but it will also help you prevent it from happening again.",{"type":108,"attrs":109,"content":111},"heading",{"id":110,"level":36},"h_ma0srbg7",[112],{"text":113,"type":81},"When the Obvious Solution Becomes a Black Hole",{"type":73,"attrs":115,"content":117},{"id":116},"p_vokehjr6",[118],{"text":119,"type":81},"My first reaction was classic: open DevTools, inspect the sidebar, look at the applied styles. I found some margin and padding properties that looked suspicious, adjusted some custom CSS variables, tested in different viewports. Nothing. The problem persisted.",{"type":73,"attrs":121,"content":123},{"id":122},"p_3x0ru528",[124],{"text":125,"type":81},"That was when my developer brain went into \"if it's not superficial, it must be deep\" mode. I started questioning the entire layout architecture. Maybe it was a problem with the CSS Grid structure we were using. Or who knows, some modification in the design system that cascaded to components that shouldn't have been affected.",{"type":73,"attrs":127,"content":129},{"id":128},"p_9q41vr7i",[130],{"text":131,"type":81},"That was the moment I should have stopped, taken a deep breath, and followed a more systematic methodology. But like every developer under pressure, I decided that the best strategy was to refactor until the problem disappeared.",{"type":108,"attrs":133,"content":135},{"id":134,"level":36},"h_g23oc0k3",[136],{"text":137,"type":81},"The Refactoring That Started Small and Turned into Frankenstein",{"type":73,"attrs":139,"content":141},{"id":140},"p_gmlfzoub",[142],{"text":143,"type":81},"What started as \"I'll just reorganize this CSS\" quickly escalated into a complete refactoring of the layout system. I migrated components from CSS Modules to Styled Components, reorganized the folder structure, updated imports, adjusted design token variables.",{"type":73,"attrs":145,"content":147},{"id":146},"p_bxc46767",[148],{"text":149,"type":81},"Three days of intense work later, I had a cleaner, more organized layout system and... the exact same sidebar alignment problem. By this point, I started questioning my fundamental skills as a frontend developer.",{"type":151,"attrs":152,"content":155},"codeBlock",{"id":153,"language":54,"highlighted":154},"code_6m7kuwks","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* O que eu PENSAVA que era o problema *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.sidebar-container\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">grid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">  grid-template-columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">280\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">fr\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">  grid-gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">24\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F* Certamente deve ser algo aqui... *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.sidebar-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">--bg-secondary\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F* Ou talvez aqui... *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* Tentativa após tentativa de ajustar propriedades que estavam corretas *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[156],{"text":157,"type":81},"\u002F* O que eu PENSAVA que era o problema *\u002F\n.sidebar-container {\n  display: grid;\n  grid-template-columns: 280px 1fr;\n  grid-gap: 24px;\n  padding: 16px;\n  \u002F* Certamente deve ser algo aqui... *\u002F\n}\n\n.sidebar-content {\n  background: var(--bg-secondary);\n  border-radius: 8px;\n  \u002F* Ou talvez aqui... *\u002F\n}\n\n\u002F* Tentativa após tentativa de ajustar propriedades que estavam corretas *\u002F",{"type":73,"attrs":159,"content":161},{"id":160},"p_8pyrushk",[162],{"text":163,"type":81},"With each passing day, the solution seemed further away. I reviewed the CSS Grid documentation three times. I read articles about layout debugging. I even considered the possibility of a bug in the browser itself.",{"type":108,"attrs":165,"content":167},{"id":166,"level":36},"h_ycr8mufk",[168],{"text":169,"type":81},"The Moment of Embarrassing Discovery",{"type":73,"attrs":171,"content":173},{"id":172},"p_92etolao",[174,176,179],{"text":175,"type":81},"It was on the Friday of the second week, at 4:30 PM, when it finally happened. I was doing another routine inspection in DevTools when I noticed something that had gone unnoticed the other 47 times I had looked at the same element: a property ",{"text":95,"type":81,"marks":177},[178],{"type":98},{"text":180,"type":81}," applied to the main container.",{"type":73,"attrs":182,"content":184},{"id":183},"p_571ssv4d",[185,187,191],{"text":186,"type":81},"It wasn't in the sidebar component's CSS. It wasn't in the design system. It was in a lost utility class that had been added months ago to solve a specific problem on another screen and forgotten there, silently applying itself to any element that used the class ",{"text":188,"type":81,"marks":189},".main-container",[190],{"type":98},{"text":100,"type":81},{"type":151,"attrs":193,"content":196},{"id":194,"language":54,"highlighted":195},"code_qw0u6i0y","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* O culpado que custou duas semanas da minha vida *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.main-container\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">  margin-inline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* Esta linha maldita *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F* resto do CSS perfeitamente normal *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[197],{"text":198,"type":81},"\u002F* O culpado que custou duas semanas da minha vida *\u002F\n.main-container {\n  margin-inline: 8px; \u002F* Esta linha maldita *\u002F\n  \u002F* resto do CSS perfeitamente normal *\u002F\n}",{"type":73,"attrs":200,"content":202},{"id":201},"p_pyz7vtqs",[203],{"text":204,"type":81},"Eight pixels. Two characters and a number. Enough to create a noticeable visual asymmetry, but not obvious enough to be immediately identifiable. The type of bug that makes you question your sanity.",{"type":73,"attrs":206,"content":208},{"id":207},"p_jn74kp6b",[209],{"text":210,"type":81},"When I commented out that line, the sidebar returned to perfect alignment instantly. Two weeks of refactoring, hundreds of commits, hours of debugging—all because of a one-line CSS property that shouldn't have been there.",{"type":108,"attrs":212,"content":214},{"id":213,"level":36},"h_tt2r3n2k",[215],{"text":216,"type":81},"The Lessons That Hurt to Learn",{"type":73,"attrs":218,"content":220},{"id":219},"p_5y42wbzv",[221],{"text":222,"type":81},"This experience forced me to completely rethink my approach to frontend debugging. The problem wasn't my technical competence or the complexity of the code—it was my investigation strategy.",{"type":73,"attrs":224,"content":226},{"id":225},"p_p74mbwlu",[227,229,234],{"text":228,"type":81},"The first lesson was about ",{"text":230,"type":81,"marks":231},"systematic debugging vs. emotional debugging",[232],{"type":233},"bold",{"text":235,"type":81},". When we encounter a visually annoying bug, our natural tendency is to go straight for solutions that \"make sense\" based on our previous experience. Misaligned sidebar? Must be a layout problem. Poor performance? Must be a heavy component.",{"type":73,"attrs":237,"content":239},{"id":238},"p_krx2is8d",[240],{"text":241,"type":81},"But the reality is that bugs rarely appear where we expect them to be. They hide in forgotten utilities, in CSS inherited from libraries, in properties applied by classes we don't even remember exist.",{"type":151,"attrs":243,"content":247},{"id":244,"language":245,"highlighted":246},"code_wgctusvf","javascript","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F A metodologia que deveria ter seguido desde o início\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> debugLayoutIssue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> () \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F 1. Isolar o problema\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  console.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">log\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Elemento afetado:'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, element);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F 2. Listar TODOS os estilos aplicados\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> computedStyles\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> window.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">getComputedStyle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(element);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  console.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">log\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Margin computed:'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, computedStyles.margin);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  console.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">log\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Padding computed:'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, computedStyles.padding);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F 3. Verificar origem de cada propriedade crítica\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F (usando DevTools para rastrear de onde vem cada valor)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F 4. Só ENTÃO partir para mudanças estruturais\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">};\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[248],{"text":249,"type":81},"\u002F\u002F A metodologia que deveria ter seguido desde o início\nconst debugLayoutIssue = () => {\n  \u002F\u002F 1. Isolar o problema\n  console.log('Elemento afetado:', element);\n  \n  \u002F\u002F 2. Listar TODOS os estilos aplicados\n  const computedStyles = window.getComputedStyle(element);\n  console.log('Margin computed:', computedStyles.margin);\n  console.log('Padding computed:', computedStyles.padding);\n  \n  \u002F\u002F 3. Verificar origem de cada propriedade crítica\n  \u002F\u002F (usando DevTools para rastrear de onde vem cada valor)\n  \n  \u002F\u002F 4. Só ENTÃO partir para mudanças estruturais\n};",{"type":73,"attrs":251,"content":253},{"id":252},"p_e35t6lz9",[254,256,260],{"text":255,"type":81},"The second lesson was about ",{"text":257,"type":81,"marks":258},"opportunity cost in debugging",[259],{"type":233},{"text":261,"type":81},". The two weeks I spent refactoring weren't just two weeks lost—they were two weeks that could have been used developing features that actually added value to the product. The real cost of this bug wasn't the 8 misaligned pixels, but the wasted development time.",{"type":108,"attrs":263,"content":265},{"id":264,"level":36},"h_v1liysnh",[266],{"text":267,"type":81},"Creating a Margin-Inline-Proof System",{"type":73,"attrs":269,"content":271},{"id":270},"p_rfbyl0b4",[272],{"text":273,"type":81},"After this traumatic experience, I implemented some changes to my workflow that made this type of problem much harder to happen:",{"type":73,"attrs":275,"content":277},{"id":276},"p_i2tpvru8",[278,280,284],{"text":279,"type":81},"First, I adopted a ",{"text":281,"type":81,"marks":282},"bottom-up debugging strategy",[283],{"type":233},{"text":285,"type":81},". When I encounter a visual problem, I always start by checking the computed styles of the specific element before questioning the general architecture. It's counterintuitive, but apparently complex problems often have simple causes.",{"type":151,"attrs":287,"content":290},{"id":288,"language":54,"highlighted":289},"code_xaf0pkcz","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* Agora sempre uso uma abordagem mais defensiva *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">.component-container\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F* Reset explícito de propriedades que podem vazar de outros contextos *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F* Depois aplico apenas o que realmente preciso *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">  margin-block\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">  padding-inline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">24\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[291],{"text":292,"type":81},"\u002F* Agora sempre uso uma abordagem mais defensiva *\u002F\n.component-container {\n  \u002F* Reset explícito de propriedades que podem vazar de outros contextos *\u002F\n  margin: 0;\n  padding: 0;\n  \u002F* Depois aplico apenas o que realmente preciso *\u002F\n  margin-block: 16px;\n  padding-inline: 24px;\n}",{"type":73,"attrs":294,"content":296},{"id":295},"p_69z6wphx",[297,299,303,305,308,310,314],{"text":298,"type":81},"Second, I started being much more critical with ",{"text":300,"type":81,"marks":301},"global utility classes",[302],{"type":233},{"text":304,"type":81},". That class ",{"text":188,"type":81,"marks":306},[307],{"type":98},{"text":309,"type":81}," with ",{"text":311,"type":81,"marks":312},"margin-inline",[313],{"type":98},{"text":315,"type":81}," existed because at some point someone (probably myself) needed a quick fix and applied a solution that seemed harmless at the time.",{"type":73,"attrs":317,"content":319},{"id":318},"p_7cbyw1fc",[320,322,326],{"text":321,"type":81},"Now I have a rule: if a utility class affects layout in a non-obvious way, it needs to have a name that makes its intent and scope clear. ",{"text":323,"type":81,"marks":324},".main-container-with-horizontal-spacing",[325],{"type":98},{"text":327,"type":81}," is verbose, but makes it impossible to forget that this class has side effects.",{"type":108,"attrs":329,"content":331},{"id":330,"level":36},"h_le9u600t",[332],{"text":333,"type":81},"Debugging as a Meta-Skill",{"type":73,"attrs":335,"content":337},{"id":336},"p_94xm3pa4",[338],{"text":339,"type":81},"What impresses me most reflecting on this experience is how it illustrates something fundamental about software development: our effectiveness doesn't depend only on what we know about specific technologies, but on how we approach unknown problems.",{"type":73,"attrs":341,"content":343},{"id":342},"p_fvzg7ttz",[344],{"text":345,"type":81},"I knew CSS well enough to implement any complex layout I needed. I knew the browser's debugging tools. I had enough experience to recognize common bug patterns. But I lacked a systematic methodology to investigate problems efficiently.",{"type":73,"attrs":347,"content":349},{"id":348},"p_kahrxcl3",[350,352,355],{"text":351,"type":81},"The difference between a junior and a senior developer often isn't in the number of technologies they know, but in the quality of the debugging process they have developed. An experienced developer would have found that ",{"text":311,"type":81,"marks":353},[354],{"type":98},{"text":356,"type":81}," in 20 minutes because they would follow a methodical approach, not because they \"know more CSS.\"",{"type":151,"attrs":358,"content":361},{"id":359,"language":245,"highlighted":360},"code_9d16he9s","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F O mindset que faz a diferença\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> seniorDebuggingApproach\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F Primeiro: isolar e reproduzir de forma consistente\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  isolate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: () \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"Consigo reproduzir este problema em um ambiente limpo?\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F Segundo: coletar dados antes de formar hipóteses\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  gather\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: () \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"Quais são TODOS os fatores que podem estar influenciando?\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F Terceiro: testar a hipótese mais simples primeiro\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  test\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: () \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"Qual é a causa mais óbvia que ainda não verifiquei?\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F Quarto: só então partir para soluções complexas\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  escalate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: () \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"Esgotei todas as possibilidades simples?\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">};\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[362],{"text":363,"type":81},"\u002F\u002F O mindset que faz a diferença\nconst seniorDebuggingApproach = {\n  \u002F\u002F Primeiro: isolar e reproduzir de forma consistente\n  isolate: () => \"Consigo reproduzir este problema em um ambiente limpo?\",\n  \n  \u002F\u002F Segundo: coletar dados antes de formar hipóteses\n  gather: () => \"Quais são TODOS os fatores que podem estar influenciando?\",\n  \n  \u002F\u002F Terceiro: testar a hipótese mais simples primeiro\n  test: () => \"Qual é a causa mais óbvia que ainda não verifiquei?\",\n  \n  \u002F\u002F Quarto: só então partir para soluções complexas\n  escalate: () => \"Esgotei todas as possibilidades simples?\"\n};",{"type":108,"attrs":365,"content":367},{"id":366,"level":36},"h_ve0jn84e",[368],{"text":369,"type":81},"Conclusion: The Real Cost of Simple Bugs",{"type":73,"attrs":371,"content":373},{"id":372},"p_oykha1uc",[374,376,379],{"text":375,"type":81},"Remember that Tuesday when I received the message about the misaligned sidebar? Two weeks later, when I finally commented out that line of ",{"text":311,"type":81,"marks":377},[378],{"type":98},{"text":380,"type":81},", the problem disappeared instantly. But what remained wasn't just a corrected layout—it was a valuable lesson about technical hubris and the importance of a systematic approach to debugging.",{"type":73,"attrs":382,"content":384},{"id":383},"p_3r3umibl",[385],{"text":386,"type":81},"The real cost of this bug wasn't the R$ 10,000 in wasted development hours (though that hurt). It was the lost opportunity to develop features that really mattered to users. It was the time that could have been used optimizing performance, implementing tests, or improving the user experience.",{"type":73,"attrs":388,"content":390},{"id":389},"p_y590p7zw",[391,393,396],{"text":392,"type":81},"Today, whenever I come across an apparently complex problem, I remember that forgotten ",{"text":311,"type":81,"marks":394},[395],{"type":98},{"text":397,"type":81},". Before refactoring entire architectures, before questioning fundamental technical decisions, before assuming the problem is deep and complex, I stop and ask: \"Could it just be a forgotten margin?\"",{"type":73,"attrs":399,"content":401},{"id":400},"p_7zbx3ive",[402],{"text":403,"type":81},"The answer, more often than I'd like to admit, is: it probably is.",{"type":73,"attrs":405,"content":407},{"id":406},"p_4zcz3bak",[408],{"text":409,"type":81},"When was the last time you spent days solving a complex problem that, in the end, had an embarrassingly simple cause? And more importantly: what system have you created to prevent this from happening again?",{"type":411},"horizontalRule",{"type":108,"attrs":413,"content":415},{"id":414,"level":36},"h_he9x77zr",[416],{"text":417,"type":81},"Technical References",{"type":419,"attrs":420,"content":423},"orderedList",{"id":421,"type":9,"start":422,"tight":44},"ol_tge8urvq",1,[424,443,457],{"type":425,"attrs":426,"content":428},"listItem",{"id":427},"li_ynz2qvv6",[429],{"type":73,"attrs":430,"content":432},{"id":431},"p_25108sav",[433],{"text":434,"type":81,"marks":435},"MDN Web Docs - CSS Logical Properties and Values",[436],{"type":437,"attrs":438},"link",{"rel":439,"href":440,"class":441,"title":9,"target":442},"noopener noreferrer nofollow","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_Logical_Properties","text-cyan-400 hover:underline cursor-pointer","_blank",{"type":425,"attrs":444,"content":446},{"id":445},"li_eh0ne2h9",[447],{"type":73,"attrs":448,"content":450},{"id":449},"p_ca5pbb0w",[451],{"text":452,"type":81,"marks":453},"Chrome DevTools - Inspect and Debug CSS",[454],{"type":437,"attrs":455},{"rel":439,"href":456,"class":441,"title":9,"target":442},"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fdevtools\u002Fcss\u002F",{"type":425,"attrs":458,"content":460},{"id":459},"li_im87dyjp",[461],{"type":73,"attrs":462,"content":464},{"id":463},"p_elaea3cd",[465],{"text":466,"type":81,"marks":467},"W3C CSS Working Group - CSS Box Model Module",[468],{"type":437,"attrs":469},{"rel":439,"href":470,"class":441,"title":9,"target":442},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-box-3\u002F",{"type":73,"attrs":472},{"id":473},"p_tr49us1q","Debugging CSS: Lessons from a Two-Week Layout Saga","Ever spent weeks fixing a simple CSS bug? Discover why a single margin-inline property caused a massive refactor and how to debug more effectively.","2026-08-24T14:53:53.315534+00:00",[478,494,508,527],{"id":479,"slug":480,"title":481,"excerpt":482,"image":483,"featured":44,"groupId":484,"publishedAt":485,"readingTime":23,"views":48,"author":486,"category":487,"tags":488},"d5167910-cc5b-4fae-a2e8-d09adcf354b2","stop-using-usememo-wrong-a-practical-guide-to-react-performance","Stop Using useMemo Wrong: A Practical Guide to React Performance","Master React useMemo with this guide. Learn when to memoize, how to fix dependency array bugs, and why over-optimization can hurt your performance.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1769657096789-featured-r2q2sb.jpeg","a1c571c1-aa37-404d-ac67-f265c8a9985b","2026-07-08T23:34:34.563653+00:00",{"name":50,"avatar":9},{"slug":6,"name":7,"color":8},[489,491],{"slug":245,"name":490},"JavaScript",{"slug":492,"name":493},"react","React",{"id":495,"slug":496,"title":497,"excerpt":498,"image":499,"featured":44,"groupId":500,"publishedAt":501,"readingTime":502,"views":48,"author":503,"category":504,"tags":505},"f1b5af43-20da-4150-a7c7-ef17675d1fee","css-animations-how-to-build-performant-professional-interfaces-without-messy-code","CSS Animations: How to Build Performant, Professional Interfaces Without Messy Code","Bring your web interfaces to life. Learn when to use CSS transitions versus keyframes and how to optimize your animations for peak performance.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1770952624247-featured-in9pir.jpeg","de5a7726-1227-4080-b572-9d91a37b207b","2026-07-04T03:00:53.174696+00:00",17,{"name":50,"avatar":9},{"slug":6,"name":7,"color":8},[506,507],{"slug":54,"name":55},{"slug":57,"name":58},{"id":509,"slug":510,"title":511,"excerpt":512,"image":513,"featured":44,"groupId":514,"publishedAt":515,"readingTime":516,"views":48,"author":517,"category":518,"tags":519},"86e804a8-71f4-4985-a013-d6c033e28967","angular-micro-frontends-how-to-scale-large-applications-and-eliminate-monolithic-build-times-with-module-federation","Angular Micro-frontends: How to Scale Large Applications and Eliminate Monolithic Build Times with Module Federation","Discover how to break down large Angular monoliths using Module Federation to enable independent deployments and seamless team scaling.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1774499855857-featured-x9ugz1.jpg","a029aa9b-573b-4e5b-921b-eaecea6e989f","2026-06-21T06:41:59.230237+00:00",10,{"name":50,"avatar":9},{"slug":6,"name":7,"color":8},[520,523,524],{"slug":521,"name":522},"angular","Angular",{"slug":245,"name":490},{"slug":525,"name":526},"typescript","TypeScript",{"id":528,"slug":529,"title":530,"excerpt":531,"image":532,"featured":44,"groupId":533,"publishedAt":534,"readingTime":535,"views":48,"author":536,"category":537,"tags":538},"0fb67226-b881-43f5-9970-3a1442aa4be1","a-guide-to-html-loading-strategies-that-will-speed-up-your-load-times","A Guide to HTML Loading Strategies That Will Speed Up Your Load Times","Stop blocking your renders and start delivering lightning-fast experiences to your users by mastering modern HTML script loading strategies.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1766637747576-featured-1bqmjq.png","be2f746b-fe22-4009-86a9-a80e33513e02","2026-06-19T21:24:56.768931+00:00",9,{"name":50,"avatar":9},{"slug":6,"name":7,"color":8},[539,540,541,542],{"slug":245,"name":490},{"slug":57,"name":58},{"slug":492,"name":493},{"slug":543,"name":544},"ssr","SSR",{"en":40,"pt":546},"debugging-css-margin-esquecido-e-licoes-para-frontend"]