all1n.dev

❤️  All In Developer

  • 🙃 verbatimModuleSyntax doesn't remove your imports, it keeps them

    10/16/2026

    TypeScript drops imports only used as types by default. verbatimModuleSyntax turns that off and keeps what you wrote, even imports of type-only packages.

  • 🐳 Slimming a production Strapi 5 Docker image from 3.2 GB to 867 MB

    10/4/2026

    Most of a production Strapi image is admin build tooling and frontend libraries the server never loads. Deploy only the app, drop webpack and delete the rest.

  • 🎯 Overloading on a branded type

    9/25/2026

    An overload set gives the branded argument a precise return type and the unbranded one a nullable type, so parsed callers skip dead checks.

  • ⚖️ When to use branded types, and when not to

    9/25/2026

    Branding pays off for the Invalid Date hole, sanitization, money, ids and validated values. It is noise in one module or on mutable types.

  • 🏷️ Branded types in TypeScript

    9/25/2026

    TypeScript compares types by shape, so swapping a user id and a post id compiles. A brand makes them distinct and leaves nothing at runtime.

  • 🧩 Import ESM-only types from a CommonJS TypeScript project

    9/3/2026

    A CommonJS file resolves an ESM-only package through the require condition, so its types go missing. The resolution-mode attribute fixes it.

  • 🩹 Migrate from patch-package to pnpm patch

    6/17/2026

    Migrate patch-package patches to pnpm patch in a few steps: the diff stays the same, only the paths inside the patch change.

  • 🧶 Implicit CLSX in React

    12/1/2021

    Patch React so className accepts arrays and objects like Vue class bindings, without importing clsx in every app component.

  • ☢️ HTML Comment in React

    11/25/2021

    JSX does not allow HTML comments. For learning purposes, here is how to trick React into rendering a real HTML comment node.

  • 🎄 Render in Vue, 16+ ways

    11/19/2021

    Sixteen ways to render something in Vue 3, from templates to render functions and JSX, with a full example repository to try.

  • 🥑 Put your React on a diet

    10/22/2021

    Swap React for Preact in a Create React App project without ejecting, by installing preact/compat under the React names.

  • 🗜️ Optimal Tuple vs Record

    10/13/2021

    Should a function return a tuple or an object? Compare how each one minifies, and which is smaller in the production bundle.

  • 🧬 JSX at lowest level

    10/7/2021

    JSX looks like HTML in JavaScript, but it compiles to React.createElement or jsx calls. A look at what JSX really turns into.

  • ↪️ Next.js, Universal and Nuxt.js static redirects

    10/4/2021

    Next.js, Nuxt.js and Angular Universal need a server for redirects. On a static site, use HTML pages with a meta refresh.

  • 🍂 Remove gone git branches

    9/30/2021

    A git alias that fetches with prune and deletes every local branch whose remote is gone, usually after a merged pull request.

  • 🔍 Bookmarklets + Browser Search Engine

    9/28/2021

    Add custom search engines to the browser address bar, write bookmarklets, then combine both to run scripts from a query.

  • 🔺 Flat React Doom Pyramid in 1LOC

    9/22/2021

    Context providers pile up into a deeply nested pyramid at the app root. Flatten them as a list with reduceRight in one line.

  • 🔐 Private Route in React Router v6

    9/21/2021

    Private routes in React Router v5 wrapped Route and Redirect in a custom component. Here is the same guard with the v6 beta.

  • 🔧 Git remote readd alias

    7/13/2021

    A git alias that removes a remote and adds it back with the same URL, dropping its stale remote branches in one command.

  • 🚧 Configure MSW in NX

    6/22/2020

    Set up Mock Service Worker in an Nx monorepo: install msw, generate the service worker file and add it to the app assets.

  • 🐏 How React memoization works

    3/31/2020

    JSX creates new children elements on every render, so React.memo alone does not help. Memoize the children with useMemo too.

  • 🔥 How to merge a pull request

    3/3/2020

    GitHub offers merge commit, squash and merge, and rebase and merge. When to use each, based on the pull request commits.

  • 🗂️ What is the folder structure of project/library working on?

    9/26/2019

    How I lay out the folders of an app and of a library, following the Angular style guide, with the tree output of each one.

  • 🦥 React.lazy without a default export

    5/24/2019

    React.lazy expects a module with a default export. Map a named export to default inside the dynamic import to lazy load it.

  • 🔀 TypeScript function overloading

    3/28/2019

    One implementation, several call signatures: how to write them for functions, methods, constructors and statics, and the rules that pick one.

  • 🔗 Don't return early from React.Component when using React.createRef

    12/3/2018

    A note proposed for the React docs: return early from render in a React.Component and a React.createRef ref may never attach.

  • 💪🏼 Typed fetch Response in TypeScript

    11/23/2018

    The fetch Response type in lib.dom.d.ts returns any from json(). Extend it with a generic TypedResponse for typed payloads.

  • 🗄️ Create own React.Fragment

    8/16/2018

    Stuck on a React version older than 16.2, with no fragments? A Fragment just returns its children, so you can write your own.

  • ♻️ Override DOM input typed character

    7/17/2018

    A QR code scanner types as a US keyboard, so other layouts get wrong text. Catch keypress and map each key back to EN-US.

  • 🪆 Nesting and overriding new React Context API

    7/6/2018

    How react-router v4 nests React context to override parent route info for children, and how to do it with the Context API.