Swizec Teller - a geek with a hatswizec.com

    Want to become a React expert?

    Learning from tutorials is easy. You follow some steps, learn a smol lesson, and feel like you got dis πŸ’ͺ

    Then comes the interview, a real world problem, or a question from the boss. Your mind goes blank. Shit, how does this work again ...

    Happens to everyone. Building is harder than recognizing and the real world is a mess! Nothing fits in neat little boxes you learned about in tutorials.

    That's where my emails come in – lessons from experience. Building production software :)

    Leave your email and get the React email Series - a series of curated essays on building with React. Borne from experience, seasoned with over 12+ years of hands-on practice building the engineering side of growing SaaS companies.

    Get Curated React Essays

    Get a series of curated essays on React. Lessons and insights from building software for production. No bullshit.

    Join 15,161+ engineers just like you already growing their careers with my emails, workshops, books, and courses.

    ⭐️⭐️⭐️⭐️✨
    4.5 stars average rating

    Latest React articles from Swizec

    You can use React Query for slow computation, not just API

    You can use the ergonomics of React Query for any slow operation and it's wonderful.
    November 8th, 2021

    Why I'm excited about React 18 – talk

    React 18 is coming soon. I hope 🀞 Here's a talk I gave exploring its implications and showing off demos with working code.
    November 1st, 2021

    Build simple backends with Gatsby Serverless Functions

    Until recently adding a little backend to your Gatsby site meant 2 options: 1. Climbing the AWS learning curve 2. Rewrite with NextJS Now there's an /api directory 😱
    August 24th, 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

    Hacking the React AST for fun and profit – #CodeWithSwiz ep34

    This is hold my beer level of hackery. It didn't work but we learned lots in the process.
    June 29th, 2021

    A better React 18 startTransition demo

    Demoing startTransition is hard. Modern computers are too fast πŸ˜… – Dan Abramov, a React core team member, helped me fix it up. Here's what I learned
    June 16th, 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

    2 quick tips for 250% better Lighthouse scores – CodeWithSwiz 28

    Your site may be fast for users, but Google don't care. Official metrics or bust.
    April 27th, 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

    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

    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

    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

    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

    How React Query gives you almost everything you thought you needed GraphQL for

    GraphQL solves every problem you've ever had talking to APIs on the frontend. Mention a switch to GraphQL to your team and they think it's a joke. Rewrite our entire app? oh you jokester. React Query is the perfect middle ground ❀️
    September 7th, 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

    Fractals in React


    November 18th, 2016

    Modeling time in React


    November 9th, 2016

    Simple MobX-driven modals


    October 28th, 2016

    Histogram in D3v3 vs D3v4


    October 25th, 2016

    Did you enjoy this article?


    Learned something new? Want to become a React expert?

    Learning from tutorials is easy. You follow some steps, learn a smol lesson, and feel like you got dis πŸ’ͺ

    Then comes the interview, a real world problem, or a question from the boss. Your mind goes blank. Shit, how does this work again ...

    Happens to everyone. Building is harder than recognizing and the real world is a mess! Nothing fits in neat little boxes you learned about in tutorials.

    That's where my emails come in – lessons from experience. Building production software :)

    Leave your email and get the React email Series - a series of curated essays on building with React. Borne from experience, seasoned with over 12+ years of hands-on practice building the engineering side of growing SaaS companies.

    Get Curated React Essays

    Get a series of curated essays on React. Lessons and insights from building software for production. No bullshit.

    Join 15,161+ engineers just like you already growing their careers with my emails, workshops, books, and courses.

    ⭐️⭐️⭐️⭐️✨
    4.5 stars average rating

    Have a burning question that you think I can answer?Β I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.

    Ready to Stop copy pasting D3 examples and create data visualizations of your own? Β Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization

    Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.

    Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first πŸ’° on the side with ServerlessReact.Dev

    Want to brush up on your modern JavaScript syntax?Β Check out my interactive cheatsheet: es6cheatsheet.com

    By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❀️

    Created by Swizec with ❀️