Best Practices for Vue Router in Large Applications
Managing routes in large Vue applications can become challenging. Here, I share practical best practices for structuring Vue Router to keep apps organised.
Articles
Front‑end Development, page 2 of 19
Front‑end web development is my personal niche, it is the art of creating visual and interactive elements for a website, including layout, design, and interactivity, using HTML, CSS, and JavaScript.
Below you will find a subset of articles from my blog specifically about Front‑End Development. This is an area that I have worked with for many years, and have managed to write about quite a few times. There are three hundred thirty‑seven collected together for you below.
Best Practices for Vue Router in Large Applications. 
How JavaScript Handles Memory Management and Garbage Collection. How JavaScript Handles Memory Management and Garbage Collection
Garbage collection in JavaScript frees up unused memory automatically. Here, I explain how it works and how to prevent memory leaks in your applications.
Implementing Server‑Side Rendering (SSR) in Vue. Implementing Server‑Side Rendering (SSR) in Vue
How to implement server‑side rendering in Vue, with a clearer mental model for hydration, data loading, caching, and where SSR actually pays off.
Building Efficient Recursive Functions in JavaScript. Building Efficient Recursive Functions in JavaScript
How to build efficient recursive functions in JavaScript, with better base cases, less repeated work, and a clearer sense of when recursion fits naturally.
The Execution Context in JavaScript. The Execution Context in JavaScript
Execution context defines how JavaScript code runs, from global scope to function calls. Here, I explore how it works in browsers, React, Next.js, and Node.js.
Optimising Performance in React with useMemo and useCallback. Optimising Performance in React with
useMemoanduseCallbackOptimise React performance with useMemo and useCallback only where profiling shows expensive calculations, unstable functions, or avoidable re‑renders.
Optimising Next.js Performance with Incremental Static Regeneration (ISR). Optimising Next.js Performance with Incremental Static Regeneration (ISR)
How ISR improves Next.js performance by mixing static speed with controlled freshness, and where it fits best over fully dynamic rendering for changing content.
Reverse an Array in JavaScript. Reverse an Array in JavaScript
Reversing an array in JavaScript can be done with `.reverse()`, but it mutates the original array. Here, I explore immutable methods and older techniques.
Preventing and Debugging Memory Leaks in React. Preventing and Debugging Memory Leaks in React
Memory leaks in React can cause sluggish performance and excessive memory usage. Here, I explore common causes, how to prevent them, and debugging techniques.
Creating Custom Vue Directives for Enhanced Functionality. Creating Custom Vue Directives for Enhanced Functionality
How to create custom Vue directives for DOM‑level behaviour, without reaching for them when a component, prop, or composable would do better in real interfaces.
Container Queries in CSS. Container Queries in CSS
CSS container queries allow elements to respond to their parent's size rather than the viewport. I explain how they work and how they improve responsive design.
Building a Headless CMS‑Powered Site with Next.js. Building a Headless CMS‑Powered Site with Next.js
Build a headless CMS‑powered Next.js site with content modelling, fetch layers, mapped front‑end shapes, preview, rendering choices, and scale cleanly.
Sorting Complex Arrays in JavaScript. Sorting Complex Arrays in JavaScript
Sorting complex arrays in JavaScript requires custom comparison functions. Here, I explore techniques for sorting numbers, objects, nested properties, and more.
CSS aspect‑ratio for Responsive Layouts. CSS
aspect‑ratiofor Responsive LayoutsThe CSS `aspect‑ratio` property makes it easier to maintain consistent proportions in responsive layouts. Here, I explore how it works and when to use it.
Building Multi‑Tenant Applications with Next.js. Building Multi‑Tenant Applications with Next.js
Multi‑tenant applications serve multiple customers from a single codebase. Here, I walk through building a scalable multi‑tenant web application using Next.js.
Building a Custom Vue 3 Hook Using the Composition API. Building a Custom Vue 3 Hook Using the Composition API
Build a reusable Vue 3 composable with the Composition API, covering side effects, useOutsideClick, browser boundaries, typing, and testability well.
Vue's provide/inject API: When and How to Use It. Vue's
provide/injectAPI: When and How to Use ItWhen Vue provide/inject is the right tool, how to keep it reactive, and where it fits better than props or a full store in larger component trees.
Vue 3 Reactivity: Proxies vs. Vue 2 Reactivity. Vue 3 Reactivity: Proxies vs. Vue 2 Reactivity
Vue 3 replaces Vue 2's getters and setters with JavaScript proxies. This article explains how they differ and why proxies improve Vue's reactivity system.