Swizec Teller - a geek with a hatswizec.com

Senior Mindset Book

Get promoted, earn a bigger salary, work for top companies

Senior Engineer Mindset cover
Learn more

    Swizec's articles in the "technical" category

    I aim to write mindblowing emails with real insight into the career and skills of a modern software engineer. "Raw and honest from the heart!" as one reader described them.

    Below are 294 articles filed under technical. Enjoy ❤️

    Async React with NextJS 13

    We look at React's native async support and how to use it in a NextJS 13 app. Learn how to use async components, parallel loading states, and caching with React.js and NextJS 13.
    January 14th, 2023

    Reader question: useReducer or XState?

    Following up from my article about XState and Stately.ai, fellow reader S. asked if `useReducer` could ever be relevant when using state machines in React code. Yes! Here's how
    November 11th, 2022

    When your brain is breaking, try Stately.ai

    Two years ago I wrote about using XState after building a UI interaction so twisted my brain leaked out my ears. It helped. Now the creators have made something even better – Stately.ai 😍
    November 8th, 2022

    Over-engineering tweet embeds with web components for fun and privacy

    A way to embed tweets in static sites with full pre-renders and live updates using just 9kB of client-side JavaScript, 2 HTTP requests, and full reader privacy ✌️
    October 26th, 2022

    useCallback is a code smell

    One of my favorite ways to simplify and de-gotcha React code is to rip out all the useCallback and useMemo drama. 90% of the time you don't need it.
    September 16th, 2022

    Your code doesn't matter

    "Your code doesn't matter" is something experienced programmers say, between the lines, when they sound like complete lunatics. But what do they mean? Why does everyone say it?
    August 16th, 2022

    Promise.allSettled, a wonderful tool for resilient code

    The pros and cons of different approaches to writing resilient code that handles partial failures
    April 4th, 2022

    Saving time in UTC doesn't work and offsets aren't enough

    Lessons from a painful outage with timezones, UTC offsets, and database clients that took a whole week to resolve.
    March 25th, 2022

    A quick lesson in writing resilient code

    On the backend anything can and will fail. How do you deal with that?
    March 21st, 2022

    A new VSCode extension makes state machines shine on a team

    When you grok state machines, a new world of computational beauty and software design opens in front of your eyes. Things that used to be hard become easy. The impossible becomes possible. And you turn into that annoying team member.
    February 25th, 2022

    How defensive coding leads to bloat

    Defensive coding is an important lesson and over time and engineers it leads to massive bloat, if you're not careful.
    November 15th, 2021

    How to configure Jest with TypeScript

    Using plain Jest on a TypeScript codebase is kinda rough. No types in tests no thanks. Making Jest and TypeScript work together smoothly is something you do just rarely enough to forget the details. Hope this helps you and future me too ✌️
    October 19th, 2021

    Anything's a sorting problem if you squint hard enough

    What's the most algorithmically fun code you've written recently? 🤔 Here's mine: A dataviz using a grid of triangles that fits into the client's logo.
    September 7th, 2021

    You don't need a big team to automate your work

    The opposite of folks who follow every FAANG trend and over-engineer their companies to death, are the folks who *never* take advice from the big boys.
    July 27th, 2021

    React 18 and the future of async data

    Friend, I have glimpsed the future and it is amazing. React 18 is shipping with <Suspense> and startTransition for deferred component rendering, but not data loading. That's coming in a future 18.x version.
    July 22nd, 2021

    A surprising feature of JavaScript optional chaining

    This blew my mind, thought you'd like it too. You can do more with ?. than you thought.
    June 24th, 2021

    Use Netlify's _redirects on Gatsby Cloud

    Something always goes wrong when you change hosting providers. 😅 For me it was redirects. A vital feature of any site migration.
    June 23rd, 2021

    Trying out React 18 Alpha

    I read everything about React 18 Alpha, trawled through the work group, and ran some experiments. Here's what you'll wanna know.
    June 11th, 2021

    A fun security bug with static rendering – CodeWithSwiz #31

    The flash of unlocked content is great fun for any paywall
    June 1st, 2021

    Build privacy-focused blazing fast tweet embeds – CodeWithSwiz 30

    Twitter embeds every tweet on your page as an iframe. Loads 1.2MB of JavaScript, makes 20+ HTTP requests and uses 100+ DOM nodes. 💩
    May 12th, 2021

    Twitter embeds without JavaScript, pt1 – #CodeWithSwiz 29

    Continuing our quest for better Lighthouse scores, more reader privacy, and less JavaScript we attacked the next biggest culprit 👉 Twitter.
    May 4th, 2021

    Your serverless questions, answered

    When talk comes to serverless, engineers have lots of questions. Here are some answers 😊
    March 29th, 2021

    Go full-stack in 5min with your first cloud function

    How *do* you build a JavaScript function that runs in the cloud serverlessly? Here's how to get started with Vercel, Netlify, or AWS Lambda
    March 18th, 2021

    Can you automate love?

    What's the laziest thing you've ever built? For me it's a bot that sends cute pictures every day
    March 17th, 2021

    If you can JavaScript, you can backend

    When you think of a backend or server developer, who comes to mind? A wizard of arcane magics. The future belongs to full-stack frontend engineers.
    March 16th, 2021

    That time serverless melted my credit card

    Serverless is pretty cheap. But you *can* get it wrong.
    March 12th, 2021

    Why serverless fits side-projects perfectly

    How do you provision servers for no load most days THEN ALL THE LOAD THIS MINUTE? That's how side-projects work and it's hard
    March 10th, 2021

    How a $12 AWS bill powers a $50k business

    my point is that running server code on the web has become ridiculously cheap *and* easy
    March 9th, 2021

    Variants – a quick tip for better React components

    Reusable components like to grow boolean props for different situations and complexity soon blows up. Variant props are the perfect solution.
    March 2nd, 2021

    Reverse engineer a GraphQL API to automate love notes – CodeWithSwiz 24

    We used a man-in-the-middle attack to snoop an app's API traffic, replayed it in a GraphQL client, and successfully put it inside an AWS Lambda 🤘
    February 23rd, 2021

    A TypeScript trick for reusable hooks

    Reusable hooks are all fun and games until TypeScript starts yelling at you about incompatible types.
    February 19th, 2021

    React Bricks - visual blocks editor for NextJS #CodeWithSwiz 22

    Tried a new visual editor for NextJS and CreateReactApp. Got a site up in 20min 🤘
    February 9th, 2021

    The Magic Function principle

    Write functions, mostly magic.
    February 5th, 2021

    [CodeWithSwiz 21] useAuth beta support for Firebase 🎉

    It works! useAuth has beta-level support for Firebase Auth 🥳 I did not expect that to take 3 sessions.
    January 26th, 2021

    Tech interview best practice that fails in life

    Tech interviews have a magic answer: The hashmap. And it's not always best on the job.
    January 22nd, 2021

    [CodeWithSwiz 20] Adding Firebase support to useAuth, pt2

    Firebase continues to be 💩. No wonder people keep asking for support in useAuth. Almost there ✌️
    January 19th, 2021

    [CodeWithSwiz 19] Firebase Auth support in useAuth, pt1

    Support for Firebase Auth is one of the most requested features for useAuth and I figured what the heck, how hard can it be?
    January 12th, 2021

    SSR, SSRwR, SSG, CSR, WTFBBQ???

    These abbreviations are getting out of hand. It's like a bad interviewer's wet dream.
    November 24th, 2020

    Gatsby to NextJS pt1, server-side-render or server-side-generate?

    Gatsby and NextJS do similar things differently. One is better for websites, the other for webapps. In episode 17 of CodeWithSwiz we explore the biggest difference.
    November 19th, 2020

    Use private libraries to cleanup your codebase

    You're using the many-small-repositories approach to work faster as a team. But where do you put shared code? How do you make it nice to use? How to publish and install private packages?
    November 16th, 2020

    React context without context, using XState – CodeWithSwiz 14, 15

    useAuth works without React Context! 🎉 here's how
    November 10th, 2020

    Swap useReducer with XState – CodeWithSwiz 13

    In Refactoring a useReducer to XState we talked about a 5 step process to turn a reducer into an XState state machine. Today answers "Ok now what?"
    October 22nd, 2020

    How to write tests for XState – CodeWithSwiz 12

    Once you know how to refactor a useReducer to XState, you gotta prove you did it right.
    October 13th, 2020

    Refactoring a useReducer to XState, pt1 – CodeWithSwiz 11

    XState promises to be like useReducer+Context combined and the simplest way to handle complex state in React apps. But can it deliver? On this episode of #CodeWithSwiz, we gave it a shot.
    October 8th, 2020

    Prefetch data with React Query and NextJS – CodeWithSwiz 8, 9

    Prefetching lets you start React apps without loading spinners. Gatsby introduced this concept with `staticQuery`, react-query and NextJS make the pattern easier 😍
    September 30th, 2020

    Modern backend is a JavaScript function

    Many engineers think server-side code is the scary domain of True Engineers. Something newbies, juniors, and frontend engineers shouldn't touch. They're wrong. Modern backend is a joy. ❤️
    September 22nd, 2020

    Using JavaScript to commit to Github – CodeWithSwiz 7

    Update code with a JavaScript function? Easier than you think 😍
    September 17th, 2020

    Why NextJS /api routes are fab – CodeWithSwiz 6

    In this episode of CodeWithSwiz, we tried NextJS's support for /api routes – code running on the backend. In a word – Wow
    September 13th, 2020

    Exploring NextJS with a headless CMS, pt4 – CodeWithSwiz

    NextJS getStaticProps, environment vars, and why you shouldn't use yarn link – all in this episode of #CodeWithSwiz
    September 10th, 2020

    Exploring NextJS with a custom CMS, pt3 – CodeWithSwiz

    Friend, this episode of #CodeWithSwiz was a great example of why you want to start using TypeScript and how thermal load *destroys* computers.
    September 8th, 2020

    Building a small CMS with NextJS, pt2 – CodeWithSwiz

    You're the computer, the CMS is your script. Starting small, trying NextJS, comparing microbundle vs. parcel for extracting libraries out of projects.
    September 3rd, 2020

    Your first NextJS app – CodeWithSwiz

    On CodeWithSwiz ep2, we tried NextJS and built our first tiny app. Complete with a design system, static rendering, React Query to talk to AWS Lambda, and deployed to live 🤘
    September 1st, 2020

    CodeWithSwiz: Privacy-focused embeds for YouTube, Twitter, et al

    A new old experiment 👉 regular livecoding. It's like a podcast with video, show notes, regular cadence, and we both learn something new.
    August 27th, 2020

    In 2020's, what is "frontend"? 🤨

    "He's a frontend guy, is this even a fair question to ask?" The head of engineering was worried about our systems design question …
    August 7th, 2020

    Don't be weird


    May 8th, 2020

    Why you should build a form generator

    Lemme guess, every project involves 1 or 2 forms and they're all the friggen same. You got forms coming out the wazoo. Render fields. Connect to state. Add field validation. Detect submit. Add form validation. Send fetch request. Repeat.
    April 27th, 2020

    How you can start using GraphQL today without changing the backend

    GraphQL for new projects looks great ... buuuut how do you use it with that old backend cobbled together in Rails over the last bazillion years?
    March 12th, 2020

    How GraphQL blows REST out of the water

    Let's have a look at hyow GraphQL makes queries so much easier and more pleasant than REST
    January 23rd, 2020

    Is hot dog taco?

    What if I told you modern tools let you build and launch a small webapp in 30 minutes? Complete with SSL, a .com domain, a database, a documented API, CDN hosting, fast static initial loads, and a hydrated SPA? That's the challenge I posed at Silicon Valley Code Camp this weekend. The audience didn't believe me, so it was time to perform some magic. 🧙
    October 21st, 2019

    REST API best practice in a GraphQL world

    GraphQL is taking the world by storm and it is wonderful. But in the real world, you're still dealing with REST APIs aren't you?
    September 30th, 2019

    TypeScript for serverless lambda backends 👌

    A few months ago I inherited a Kotlin project. It was an unfinished prototype and all I had to do was wrap it up and deploy. Every time I touched the project, it broke. Nothing worked. Wouldn't run on my machine, wouldn't read API requests, couldn't get tests working, if I changed some code I broke it all. That's when I realized learning a new field is super hard
    May 27th, 2019

    Just for fun 👉 React vs. jQuery vs. Svelte, same 🐱 app

    I was bored Monday night and decided to see if I still know how to build with jQuery. Nothing better to do, no pressing ideas, a bit of fun. Also a favor for a friend who's preparing to talk about React to a bunch of people who've never seen it before 😛
    May 24th, 2019

    LOLCODE-to-JavaScript compiler babel macro

    A fully functioning LOLCODE-to-JavaScript compiler implemented as a Babel macro. You never thought you wanted this and now here it is. You're welcome. 🐱
    May 16th, 2019

    Finally, a practical use case for JavaScript generators!

    JavaScript generators are amazing. They let you write infinite loops that terminate. Yield values from functions before they finish … and I bet you've never used a JavaScript generator even once did you? I FOUND A USE! A real world practical use-case where generators make your code better. 😱
    April 17th, 2019

    Custom react hooks ❤️


    February 11th, 2019

    Hire these interns


    July 10th, 2018

    Benchmarking Vue


    March 5th, 2018

    Loops are the hardest


    February 15th, 2018

    How to add real web push notifications to your webapp

    You've probably seen web notifications before. YouTube shows them when it goes to a new song, Facebook pings them when a new message comes in, scammy websites ask for permissions and you say no. The usual. You can fire those notifications from anywhere inside your JavaScript.
    November 16th, 2017

    My love letter to Prettier


    November 8th, 2017

    How JavaScript linters cause bugs

    I was doing code review for a coworker, and it soon became obvious that he used a linter and that the linter gave him a bright idea: _use strict comparisons_.
    September 14th, 2017

    Time is funny in Ruby


    March 29th, 2017

    It ain't stupid if it works


    February 1st, 2017

    Do you even need that bind?


    November 29th, 2016

    Fractals in React


    November 18th, 2016

    Modeling time in React


    November 9th, 2016

    How to waste hours of life with fetch() and a bit of brainfart

    Both superagent and fetch() enable you to talk to a server. The first produces clean code that gets nesty if you need many things. The second produces clean code that is Promis-y and sometimes cumbersome. The difference between superagent and fetch() isn't that one sends your headers as-given and the other lowercases their names. The difference is that superagent sends a cookie and fetch() doesn't!
    November 1st, 2016

    Simple MobX-driven modals


    October 28th, 2016

    Histogram in D3v3 vs D3v4


    October 25th, 2016

    Backbone → React – Step 1


    September 20th, 2016

    A puzzle in JavaScript objects

    This is a puzzle you can run into if you’re not careful, and sometimes, despite your best efforts, even if you are careful. It happened to me when I had a settings object that I passed into a view. The view then did things. When I made a new view from the settings object, it looked like the view I had just cleared.
    September 9th, 2016

    Backbone with ES6


    September 1st, 2016

    Slack lied to me


    August 25th, 2016

    My new favourite Javascript trick

    Using returns and callbacks in the same function. Sounds like crazy talk I know, but hear me out, I have good reason. I think.
    June 26th, 2014

    Created by Swizec with ❤️