Fabian Magrini | Blog

In the world of modern web development, the complexity of our React applications often hinges on one critical piece: routing. How we handle different page layouts—like a main app layout with a sidebar, a simple public layout for login pages, or a full-screen marketing layout—can make or break our codebase's maintainability. For years, we've wrestled with conditional rendering in a top-level App component. We'd inspect location.pathname and play a game of "which layout do I render?", leading to brittle, non-colocated logic. Today, we're going to build a production-grade application that solves this problem elegantly using TanStack Router . We'll leverage its powerful, type-safe, route-centric approach to create clean, scalable layouts. Our Tech Stack: Framework: React with Vite Language: TypeScript Routing: TanStack Router (v1) Component Develop...

In the world of software engineering, the ground is constantly shifting beneath our feet. New frameworks emerge, languages evolve, and best practices are redefined. The pressure to "keep up" can feel overwhelming. But what if we stopped seeing learning as a frantic race and started treating it as a core, sustainable part of our craft? True, lasting growth isn’t about cramming for the next tech trend. It's about building a robust, personal system for learning that integrates seamlessly into your work. It's about evolving from a specialist or a generalist into something far more powerful. Let's break down the playbook for building this sustainable learning habit. The Goal: The "T-Shaped" Individual Before we talk about how to learn, let's define the why . The ultimate goal for a modern engineer isn't just to be a deep expert in one thing (an "I-shaped" individual) or a shallow generalist ...

In the fast-paced world of software development, engineering teams are the engine driving business innovation and success. But how do you ensure this engine is running at peak performance? GitHub's new Engineering System Success Playbook (ESSP) offers a comprehensive framework designed to help organizations measure and improve their engineering performance, leading to better business outcomes. This playbook isn't just about writing code faster; it’s a holistic guide that emphasizes the synergy between quality, velocity, and developer happiness. By adopting a systems thinking approach, the ESSP helps teams identify bottlenecks, implement meaningful changes, and foster a culture of continuous improvement. The Core Philosophy: Four Zones of Success Inspired by leading industry frameworks like SPACE, DORA, and DevEx, the playbook introduces a layered system of four "foundational zones" that underpin engineering excellence. Developer H...

The AI revolution isn't just knocking on the door; it's already sitting at the engineering workbench. From code generation and debugging to documentation and automated testing, Artificial Intelligence promises to be a powerful co-pilot for engineering teams. But like any powerful tool, it needs to be wielded wisely. Without clear guidelines, you risk inefficiencies, security vulnerabilities, and even a decline in core engineering skills. So, how do you harness AI's potential while mitigating its risks? It starts with establishing thoughtful guidelines and best practices. Why Bother with Guidelines? The Wild West Isn't Sustainable. "Let engineers experiment!" is a great sentiment, but when it comes to AI, unguided experimentation can lead to: Inconsistent Quality:  AI-generated code or solutions can vary wildly in accuracy and efficiency. Security Risks:  Feeding sensitive code or proprietary data into public AI models is a major no-go. IP Concerns:  Who owns A...

Testing large, complex web applications is a monumental challenge. As applications grow, so does the test suite. Traditional test automation frameworks, often built on the Page Object Model (POM), can become brittle, hard to maintain, and difficult for non-technical stakeholders to understand. What if we could build a framework that was not only robust and scalable but also produced living documentation that the entire team—from developers to business analysts—could use? In this post, we'll build a production-grade test automation framework from the ground up. We'll combine the power of modern tools and patterns to create a solution that is maintainable, readable, and ready for the demands of large-scale applications. Table of Contents The Dream Team: Our Technology Stack Why This Stack? The Core Concepts Setting Up the Project: The Bluepri...

Learn all about what "Vibe Coding" is using my curated  youtube playlist . Get ready to transform your coding experience from a task into a truly enjoyable and productive "vibe". Let's elevate your coding flow together! Beyond the theory, these further AI development examples  I have curated demonstrate practical implementations and real-world solutions. Eager to explore the tools that are empowering developers and shaping the future of code? Dive into this comprehensive AI Coding Assistants Landscape to discover the best options available, compare their features, and learn how they can boost your productivity. AI Coding Assistants Landscape

In the modern digital landscape, application authorisation has evolved from a simple gatekeeper to a complex, nuanced system crucial for security, user experience, and compliance. Gone are the days of basic "yes/no" access controls; today's applications demand granular permissions, delegated authority, and seamless integration across diverse platforms. Architecting application authorisation effectively requires a deep understanding of authentication flows, permission models like RBAC and ABAC, and technologies like OAuth 2.0 and OpenID Connect. This guide dives into the critical considerations and best practices for building robust, scalable, and user-friendly authorisation architectures, empowering you to secure your applications without compromising usability or innovation. OPA https://www.openpolicyagent.org/docs/latest/ https://sangkeon.github.io/opaguide/ https://github.com/StyraInc/awesome-opa https://docs.styra.com/apps/advanced-architecture Microservices https://w...

  My reading list at goodreads.com  is here. Additional lists, my recommended reading for: Architects Engineers