William Cameron | Beyond the Keyboard

Frontend development interviews can be daunting, particularly with the breadth of topics covered. From JavaScript fundamentals to performance optimisation, demonstrating a solid grasp of key concepts is crucial for success. Whether preparing for your first interview or refining your expertise, here are ten essential areas to focus on. 1. The JavaScript Event Loop Understanding how JavaScript handles asynchronous operations is critical. The event loop enables non-blocking execution, managing tasks from the call stack and the message queue. Be prepared to explain how it works and how concepts like microtasks (Promises, MutationObserver) and macrotasks (setTimeout, setInterval, I/O) differ. Interview Tip Explain what happens when setTimeout(fn, 0) is called. Discuss the difference between synchronous and asynchronous execution. 2. Closures and Scope Closures allow functions to retain access to variables from their lexical scope, even when executed outside their original conte...

 As a Principal or Staff Engineer , one of your key responsibilities is guiding technical direction across teams. While code speaks volumes, clear design documentation is often the bridge between ideas and execution. A well-crafted design document (design doc) ensures alignment, reduces unnecessary debates, and helps teams move forward with confidence. But writing a great design doc isn’t just about capturing technical details—it’s about driving clarity, collaboration, and decision-making . This guide explores how to write effective design docs and how they can help you steer your team in the right direction . Why Design Docs Matter Design docs serve several critical functions: ✅ Aligning Teams Early – They help ensure everyone understands the problem, the proposed solution, and any trade-offs before work begins. ✅ Encouraging Thoughtful Design – Writing forces engineers to articulate their ideas clearly and consider alternatives. ✅ Reducing Unnecessary Rework – Addres...

In the world of network performance, milliseconds matter. A slow TCP handshake can degrade user experience, increase latency, and even impact business revenue. While IPv6 adoption continues to grow, optimising its performance remains a challenge—one that requires a deep understanding of how TCP handshakes function and how inefficiencies can creep in. Understanding the TCP Handshake in IPv6 TCP (Transmission Control Protocol) establishes reliable connections using a three-way handshake : SYN – The client sends a synchronisation (SYN) request to the server to initiate a connection. SYN-ACK – The server acknowledges the request and responds with a synchronisation-acknowledgement (SYN-ACK). ACK – The client acknowledges the server’s response, and the connection is established. This process is fundamental to communication over the web, but when it becomes slow, the effects cascade across an entire system, impacting everything from page load times to API responsiveness. Why Are T...

In the ever-evolving world of frontend development, the choice between monorepos and polyrepos can significantly impact scalability, collaboration, and maintainability. While both approaches have their merits, selecting the right one requires a clear understanding of their strengths, weaknesses, and the contexts in which they thrive. Understanding Monorepos and Polyrepos Monorepos: A Unified Codebase A monorepo is a single repository that houses multiple projects, often sharing dependencies, tooling, and configurations. This approach is widely adopted by large-scale engineering teams as it promotes consistency and reusability across projects. Advantages of Monorepos Centralised Dependency Management – Shared libraries and dependencies are easier to maintain, ensuring uniformity across projects. Atomic Changes – Updating multiple projects simultaneously is more straightforward, reducing compatibility issues. Better Code Reusability – Shared components and utilities are natur...

As engineering teams grow, so does the need for leadership that isn’t purely managerial. Enter the Staff Engineer —a senior individual contributor who shapes technical strategy, solves complex problems, and drives impact without necessarily managing people. However, not all Staff Engineers operate in the same way. Their roles typically fall into distinct archetypes , each contributing to the organisation in different ways. Understanding these archetypes can help businesses decide when they need a Staff Engineer and guide engineers aspiring to grow into these roles. Additionally, as engineers progress beyond Staff level, roles such as Staff+, Principal, and Distinguished Engineer offer increasing influence, from team-wide to company-wide technical leadership. Let’s explore how these levels align. The Four Common Staff Engineer Archetypes 1. The Tech Lead – Guiding Execution This archetype drives technical execution, ensuring projects are well-architected and delivered efficient...

  When building modern web applications, we need a system that allows for scalability, maintainability, and reusability. This is where component architecture design comes in. Popular frontend libraries like React and Vue are built around this concept, enabling developers to break their UI into self-contained, reusable components. In this post, we'll explore what component architecture is, why it's beneficial, and how to design a structured component-based project using React (or Next.js). To make it practical, let's consider a simple to-do list application . What Is Component Architecture? Component architecture is a way of designing an application where the UI is divided into smaller, independent pieces called components . Each component is responsible for rendering a piece of the interface and can manage its own state and behavior. For example, in a to-do list application, different parts of the UI can be separated into components such as: TodoItem (displays a...

  Monorepos are gaining traction in frontend development, with teams looking for better ways to manage shared code, dependencies, and collaboration across multiple projects. But as with any architectural choice, they come with trade-offs. Are monorepos the right choice for your team? Let’s break it down. What is a Monorepo? A monorepo (short for "monolithic repository") is a single code repository that contains multiple projects—such as frontend apps, backend services, shared UI components, and utilities. Instead of managing separate repositories, everything lives in one place, often with tools to handle dependencies and build processes efficiently. Monorepo vs. Polyrepo Why Use a Monorepo? ✅ 1. Shared UI Components and Logic Frontend teams often maintain design systems, component libraries, and utility functions used across multiple projects. With a monorepo, these shared resources are versioned and updated in sync , reducing duplication and inconsistencies. E...