Posts
Notes on frontend engineering: React, Next.js, TypeScript, UI architecture, performance, and the boring infrastructure that actually matters.
-
nextjsFix Stale HTML After Every Next.js Deploy
Users keep seeing the old version after every Next.js deploy until they clear cache. The fix is two properties in next.config.mjs. Here is what they do and why it is safe.
Abdelkader Settah - portfolio
Frontend Engineer Portfolio Checklist: What Actually Moves the Needle
A practical checklist for what to include and leave off a frontend engineer portfolio. The essentials, the differentiators, and the things that quietly cost you interviews.
Abdelkader Settah - hiring
What a Senior Frontend Interview Loop Actually Looks Like
A breakdown of the rounds you typically face in a senior frontend interview loop, what each one is really testing, and where to put your prep time.
Abdelkader Settah - ui
Reusable UI npm Package: The Design Decisions That Mattered
Building an internal UI npm package that cut project setup by 40 percent. The decisions that paid off, the ones I would change, and the ones I am still not sure about.
Abdelkader Settah - next.js
Three Next.js LCP Fixes Worth Doing First
Three Next.js Largest Contentful Paint fixes that pay off before you reach for the heavier stuff: image priority, font preload, and HTML caching.
Abdelkader Settah - hiring
What I Look For When Hiring a Senior Frontend Engineer
After running interview loops for senior frontend roles, here are the signals I trust, the ones I ignore, and the red flags that have saved me from bad hires.
Abdelkader Settah - directus
Type-Safe Directus Filters with GraphQL Codegen
A small pattern for keeping Directus GraphQL filters type-safe with codegen. Stop losing autocompletion the moment you compose conditions.
Abdelkader Settah -
reactPrevent Google Translate from Breaking the shadcn/ui Select
Learn why Google Translate can disrupt shadcn/ui Select menus and how adding translate='no' restores predictable user interactions.
Abdelkader Settah -
directusType-Safe Directus with GraphQL Codegen: The Complete Guide
Master type-safe Directus integration using GraphQL codegen to automatically generate TypeScript types, React hooks, and fully typed queries from your CMS schema.
Abdelkader Settah -
typescriptAvoid Cluttering Your Code with Inferable Types in TypeScript
Learn when to avoid redundant type annotations in TypeScript. Discover best practices for cleaner, more maintainable code while ensuring type safety.
Abdelkader Settah -
typescriptThe Power of Unions of Interfaces: A Better Way to Structure Types in TypeScript
When designing TypeScript types, it's tempting to create interfaces where properties are union types. However, a more precise and safer approach often involves unions of interfaces*. Let's explore this idea with new, relatable examples.
Abdelkader Settah -
typescriptUnderstanding Mapped Types and Type Manipulation in TypeScript
Discover how TypeScript's mapped types, keyof, Partial, and conditional types empower developers to write type-safe, flexible, and DRY-compliant code.
Abdelkader Settah -
reactMastering Context Selectors in React: Optimizing State Management
Explore how context selectors in React boost performance by reducing unnecessary re-renders, with practical examples and best practices for efficient state management.
Abdelkader Settah