Frontend
Frontend frameworks and UI development best practices
Best Practices
Google Web Vitals
Core performance metrics (LCP, FID, CLS, INP) for measuring real-world user experience.
by Google Chrome TeamBackends for Frontends (BFF)
An architecture pattern that gives each frontend client its own tailored backend service, instead of forcing web, mobile, and other clients to share one general-purpose API.
by Sam NewmanProgressive Enhancement
A frontend strategy that builds a baseline experience with semantic HTML first, then layers CSS and JavaScript so the site works for every browser and device.
by Steven Champeon / A List ApartWCAG 2.2 Accessibility Compliance
The W3C Web Content Accessibility Guidelines 2.2 define testable success criteria across four principles so web content is perceivable, operable, understandable, and robust.
by World Wide Web Consortium (W3C)Performance Budgets
A performance budget sets quantitative limits on metrics like page weight, request count, and load timings, enforced in development and CI to stop regressions.
by Google (web.dev)Mobile-First Design
An approach that designs the smallest-screen experience first, then progressively adds layout and features for larger viewports, prioritizing content and performance.
by Luke WroblewskiImage Optimization Best Practices
Techniques to reduce image bytes and improve loading using modern formats, responsive sizing, compression, lazy loading, and CDNs without sacrificing visual quality.
by Google (web.dev)Atomic Design
A methodology by Brad Frost for building UI from five composable levels: atoms, molecules, organisms, templates, and pages, giving design systems a consistent structure.
by Brad FrostComponent-Driven Development
A development approach that builds UIs bottom-up from isolated, reusable components, developed and tested independently before assembly into pages and apps.
by Tom Coleman / ChromaticDesign Systems
A design system is a single source of truth combining reusable components, design tokens, patterns, and guidelines that keep products consistent and faster to build.
by Nielsen Norman GroupMicro-Frontends
An architecture that splits a web app into independently developed and deployed frontend pieces owned by separate teams, then composes them into one experience.
by Cam Jackson / ThoughtworksProgressive Web Apps (PWA)
Web apps that use service workers, a manifest, and HTTPS to deliver installable, offline-capable, app-like experiences from a single codebase across platforms.
by Google (web.dev)Responsive Web Design
An approach by Ethan Marcotte that uses fluid grids, flexible media, and media queries so one layout adapts seamlessly across screen sizes and devices.
by Ethan Marcotte / A List ApartLazy Loading and Code Splitting
Techniques that defer loading of non-critical code and assets and split bundles by route or component, reducing initial payload and speeding up first load.
by Google (web.dev)Frontend Internationalization (i18n)
Designing and building UIs so they can adapt to multiple languages, regions, and formats without code changes, separating translatable text from logic.
by World Wide Web Consortium (W3C)Visual Regression Testing
Automated testing that captures screenshots of UI states and compares them against baselines to detect unintended visual changes.
by BackstopJSPatterns
Container/Presentational Pattern
Separates components that fetch and manage data (containers) from components that only render UI from props (presentational), improving reuse and testability.
Higher-Order Component (HOC)
A function that takes a component and returns a new component with added behavior, enabling cross-cutting concerns to be shared without inheritance.
Render Props
A component shares logic by accepting a function prop that it calls with internal state, letting the caller control rendering while reusing behavior.
Custom Hooks
Extracts reusable stateful logic from React function components into named hook functions, sharing behavior without wrapper components or prop drilling.
Compound Components
A set of components that work together and share implicit state through context, giving consumers a flexible, declarative API for a composite widget.
Provider Pattern
Distributes shared state or services to a component subtree through context, avoiding prop drilling and centralizing access to cross-cutting data.
Model-View-Controller (MVC)
Separates an application into a model (data and rules), a view (presentation), and a controller (input handling), decoupling concerns for maintainability.
Model-View-ViewModel (MVVM)
Separates UI from logic via a view-model that exposes bindable state and commands, with two-way data binding keeping the view and view-model in sync.
Micro Frontend
Decomposes a web frontend into independently developed and deployed pieces owned by separate teams, then composes them into one application at runtime or build time.
Island Architecture
Renders a page as mostly static HTML with isolated interactive 'islands' that hydrate independently, minimizing JavaScript shipped to the browser.
Tutorials
Converting React Class Components to Hooks
Master the conversion of React class components to functional components with hooks
Migrating to Next.js App Router
Upgrade your Next.js application from Pages to App Router
Migrating to Tailwind CSS
Convert your existing CSS to Tailwind utility classes
Checklists
Frontend Modernisation Checklist
Checklist for modernizing frontend applications and UI frameworks
Frontend Framework Migration Readiness Checklist
Verify your team, codebase, and tooling are ready before migrating a frontend application from one framework or major version to another.
Micro-Frontends Rollout Checklist
Validate architecture, ownership, and runtime integration before rolling out a micro-frontends architecture across teams.
Server-Side Rendering Migration Checklist
Confirm rendering, data fetching, caching, and SEO are ready before migrating a client-rendered app to server-side rendering.
Design System Adoption Checklist
Ensure tokens, components, governance, and migration paths are in place before rolling a shared design system across product teams.
Mobile App Store Release Checklist
Confirm builds, metadata, privacy disclosures, and rollout controls are ready before submitting a mobile app to the App Store and Play Store.
Native to Cross-Platform Mobile Migration Checklist
Assess feasibility, parity, and performance before migrating native iOS and Android apps to a cross-platform framework.
Core Web Vitals Performance Review Checklist
Review a web application against Core Web Vitals to improve loading, interactivity, and visual stability for real users.
Progressive Web App Readiness Checklist
Verify installability, offline behavior, performance, and security before shipping a Progressive Web App.
Legacy Browser EOL Migration Checklist
Plan the removal of support for end-of-life browsers and modernize a web app's baseline without breaking key users.
React Class to Hooks Migration Checklist
Verify patterns, testing, and incremental rollout are ready before migrating React class components to function components with hooks.
jQuery to Modern SPA Migration Checklist
Plan a safe, incremental migration from a jQuery-based UI to a modern single-page-application framework.
Frontend Internationalization Readiness Checklist
Verify a web application is ready to support multiple languages, locales, and right-to-left layouts before internationalizing.
Android Jetpack Compose Migration Checklist
Verify interop, performance, and incremental rollout are ready before migrating an Android app from XML Views to Jetpack Compose.
Technology Stacks
JAMstack
JavaScript, APIs, Markup - Modern web architecture
Rust WASM Stack
Rust, WebAssembly, Yew - High-performance web apps
Flutter Firebase Stack
Flutter, Firebase, Cloud Functions - Cross-platform mobile
MEVN
A JavaScript fullstack combining MongoDB, Express, Vue, and Node.js for single-page web apps with one language end to end.
Next.js + Supabase
A fullstack pairing Next.js with Supabase for Postgres, auth, storage, and realtime, shipping production apps with minimal backend code.
Next.js + Prisma + Postgres
A typed fullstack of Next.js, the Prisma ORM, and PostgreSQL for SaaS apps with a hand-owned backend and end-to-end type safety.
Remix + Postgres
A web stack built on Remix's loader/action model over PostgreSQL, embracing web standards and progressive enhancement for fast, resilient apps.
SvelteKit Fullstack
A fullstack framework using SvelteKit for compiled, reactive UIs with server routes, ideal for fast, lightweight web applications.
Astro + Headless CMS
A content stack using Astro's island architecture with a headless CMS to ship fast, mostly-static sites with selective interactivity.
Nuxt + Strapi
A Vue-based stack pairing the Nuxt framework with the Strapi headless CMS for content-driven sites and apps with a customizable backend.
RedwoodJS
An opinionated fullstack JavaScript framework integrating React, GraphQL, and Prisma into one convention-driven project for startups.
Angular + NestJS
A TypeScript stack pairing the Angular front end with the NestJS backend, sharing patterns and types for structured enterprise apps.
SolidStart
A fullstack framework built on Solid's fine-grained reactivity, offering SSR, server functions, and high performance with a React-like API.
Blitz.js
A fullstack toolkit on top of Next.js that removes the API layer with typed server-side queries and mutations for rapid app building.
Vue + Nuxt + Pinia
A Vue-centric fullstack using Nuxt for SSR and server routes with Pinia for state management, for SEO-friendly interactive web apps.
JAMstack (Headless)
An architecture of pre-rendered markup, JavaScript, and APIs that decouples the front end from services for fast, secure, scalable sites.
Qwik City
A resumable fullstack framework using Qwik and Qwik City to deliver instant-loading apps with near-zero JavaScript via lazy execution.
Flutter + Firebase Stack
Cross-platform mobile stack: Flutter builds one Dart codebase for iOS, Android, and web, backed by Firebase for auth, database, storage, and serverless functions.
React Native + Expo Stack
Cross-platform mobile stack using React Native with the Expo framework for managed builds, OTA updates, and native APIs from one JavaScript/TypeScript codebase.
Native iOS (Swift + SwiftUI)
Apple-native mobile stack building iOS apps with Swift and the declarative SwiftUI framework, using Xcode and first-party Apple platform frameworks.
Native Android (Kotlin + Compose)
Google-native mobile stack building Android apps with Kotlin and the declarative Jetpack Compose UI toolkit, using Android Studio and Jetpack libraries.
Kotlin Multiplatform (KMP)
Shared-logic cross-platform stack: Kotlin Multiplatform shares business logic across iOS, Android, and more, while UIs stay native or use Compose Multiplatform.
SvelteKit + Postgres
A full-stack SvelteKit application with server routes and a PostgreSQL database, delivering fast, lightweight web apps with minimal JavaScript.
Gatsby + Headless CMS
A React-based static site generator that sources content from a headless CMS and APIs through GraphQL, producing fast, pre-built marketing and content sites.
Eleventy + Netlify
A lightweight, zero-runtime static site generator paired with Netlify hosting and functions, producing simple, fast sites with minimal JavaScript.
Hugo + CDN
A Go-powered static site generator known for extremely fast builds, paired with a global CDN to serve large content sites cheaply and quickly.
Ionic + Capacitor
A cross-platform mobile stack that builds native iOS, Android, and web apps from a single web codebase using Ionic UI components and Capacitor native runtime.
NativeScript
An open-source framework for building truly native iOS and Android apps from a single JavaScript or TypeScript codebase with direct access to native APIs.
.NET MAUI
Microsoft's cross-platform framework for building native mobile and desktop apps for iOS, Android, macOS, and Windows from a single C# and XAML codebase.
Xamarin (Legacy)
Microsoft's earlier cross-platform mobile framework using C# and Xamarin.Forms, now superseded by .NET MAUI but still present in many maintained codebases.
Expo Router + Supabase
A full-stack mobile stack pairing React Native via Expo with file-based Expo Router navigation and Supabase for auth, Postgres, storage, and realtime.
Flutter + Riverpod
A cross-platform stack pairing Google's Flutter UI toolkit with the Riverpod state-management library for type-safe, testable Dart apps across mobile, web, and desktop.
SwiftUI + Combine
Apple's modern native stack pairing the declarative SwiftUI framework with the Combine reactive framework for building iOS, macOS, watchOS, and tvOS apps.
Compose Multiplatform
JetBrains' declarative UI framework built on Kotlin Multiplatform, sharing UI and logic across Android, iOS, desktop, and web from one Kotlin codebase.
Benchmarks
Mobile App Startup Time Benchmark
Measures how quickly a mobile app becomes usable, distinguishing cold, warm, and hot starts and the time to first frame and first interaction.
Mobile Frame Rate and Jank Benchmark
Measures UI rendering smoothness on mobile, quantifying dropped frames, jank, and frame-time consistency against the display refresh budget.
Mobile Battery Usage Benchmark
Measures the energy a mobile app consumes per task and over time, attributing drain to CPU, network, GPU, location, and wakelocks.
Mobile App Bundle Size Benchmark
Measures the download and installed size of a mobile app and its components, tracking size by architecture, resources, and code to control bloat.
Geekbench Mobile Benchmark
A cross-platform CPU and compute benchmark widely used to compare mobile device processor performance via standardized single- and multi-core workloads.
See a real scan run
A replay of the actual CLI running against our test repositories — live progress, real findings, a genuine DriftScore. Nothing executes in your browser.