Fabian is a Technology Leader working in Sydney, Australia. This Blog contains his personal opinions and observations on technology and software development.
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...
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...
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...
Comments