Fabian Magrini | Blog

Work in progress https://gist.github.com/fabianmagrini/27cf52240cd062f9b0c4b412797b84e9

Refactoring code is often compared to pruning a bonsai tree: it requires patience, precision, and a clear vision of the final shape. In JavaScript, refactoring can sometimes feel like pruning in the dark—you might cut a branch and not realize until runtime that it was load-bearing. TypeScript turns the lights on. By leveraging static analysis and a robust type system, TypeScript transforms refactoring from a risky chore into a confident, architectural exercise. In this guide, we will explore the art of refactoring in TypeScript, moving from basic cleanups to advanced, type-driven patterns that will make your codebase resilient and scalable. 1. The Safety Net: Why Refactor in TypeScript? Before diving into how , it’s crucial to understand why TypeScript changes the game. In dynamic languages, renaming a symbol or changing a function signature requires a global "find and replace" and a lot of hope. ...

A common friction point in modern software development is the clash between Solution Design and Agile delivery . Traditional architects want a blueprint before construction begins ("Big Design Up Front"). Agile teams want to start coding immediately to get feedback. If you have too much design, you block the team. If you have too little, you end up with "Spaghetti Code." The solution lies in shifting our mindset from being "Construction Managers" to becoming "City Planners." This guide explores how to manage design decisions, embrace emergent architecture, and use technical debt as a strategic tool. 1. The Mindset Shift: From Blueprint to Gardening Agile doesn't mean "no design"; it means continuous design. The goal is to make the cost of change low so that decisions can be made at the "Last Responsible Moment." ...

Modern frontend engineers build applications that are richer and more complex than ever. With React, TypeScript, and Node.js powering SPAs and APIs, the frontend is an active part of the security perimeter. This article maps practical secure coding practices for frontend engineers to the OWASP Top 10 (2021) , giving you a clear checklist for building safer apps. 1 — Broken Access Control Why it matters: Relying only on client-side UI restrictions is insufficient — attackers may call backend endpoints directly. Practices: Enforce access control server-side in Node.js, use frontend route guards for UX only, and avoid shipping privileged data in the bundle. // React route guard (UX only — backend must enforce) <Route path="/admin" element={user?.role === 'admin' ? <AdminPanel /> : <Navigate to="/403" />} /> 2 — Cryptographic Failures Why it matters: Mishandled tokens and secrets lead to...

In the ever-evolving world of software engineering, newcomers and seasoned developers alike often seek a guiding light, a set of rules to guarantee success. This quest frequently leads to the concept of "best practices," a term that suggests a universally correct way to build software. But is there truly a one-size-fits-all set of rules in a field defined by constant change and diverse challenges? The idea is certainly appealing. Following established software development standards can lead to improved code quality, efficiency, and easier maintenance. However, many experienced practitioners argue that the term "best practice" is a myth, a misleading and potentially harmful oversimplification. This blog post will delve into the contentious world of software engineering "best practices," exploring their allure, their pitfalls, and the more nuanced, context-driven approach that often leads to better outcomes. T...

The image of the software architect as a solitary figure in an ivory tower, handing down monolithic design documents from on high, is a relic of the past. The modern architect is a hands-on, collaborative leader who guides a system's evolution. They live in the code, they partner with the teams, and their primary goal is to clear the path for the rapid, sustainable delivery of value. But how do you guide evolution without letting it descend into chaos? How do you ensure architectural integrity while moving at the speed of agile? The answer lies in two powerful, complementary concepts: the Steel Thread and the Vertical Slice . Mastering these techniques will shift your focus from creating rigid blueprints to building a resilient, living architectural backbone. Part 1: The Steel Thread - Your Architectural Proving Ground Imagine you're tasked with building a massive suspension bridge. You wouldn’t start by manufacturing the ...