Swizec's articles in the "frontend" 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 19 articles filed under frontend
. Enjoy โค๏ธ
Software Engineering Lessons from Production
Join Swizec's Newsletter and get insightful emails ๐ on mindsets, tactics, and technical skills for your career. Real lessons from building production software. No bullshit.
"Man, love your simple writing! Yours is the only newsletter I open and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. ๐"
Tips from 8 months of TanStack/Router in production
On my last day at Tia I wrote a master vision doc for our TanStack Router app. Here are the parts I can share.
TanStack Router โ modern React for the rest of us
TanStack Router puts the router in control of data, state, and UI and it's ... really good.
Update state during render, better explained
A few readers wrote in to say that the React Can Update State During Render email last week made no sense. Here's a better explanation.
React can update state during render
An unexpected feature of React: updating state during render. It's a UX and performance optimization
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.
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.
Datalist, the pure HTML typeahead you didn't know about
If you ever want to build a searchable typeahead field, `<datalist>` can do that for you. On all browsers. Across devices. Standards compliant. With no JavaScript. ๐คฏ
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.
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 โ๏ธ
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.
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
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 โค๏ธ
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 โฆ
The Big Mac index and Jest fetch testing
The Big Mac index is a purchasing power parity index published by The Economist. Jest fetch testing is a tech task so frustrating that it almost made me quit the industry. I'm writing this so you don't have to read 8234721 different blog posts, stack overflow answers, and GitHub threads with conflicting info on how to get Jest and fetch to play together.
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 ๐
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. ๐ฑ
You don't want to build your own list virtualization
Chatroom is slow? I know, I'll just use list virtualization! List virtualization is hard, dear reader. So, how do you virtualize a list?
Counting web sessions with JavaScript
How many touch points does your sales process require? Do you need 2 ad clicks or 5? Two shiny demos or one fat video? As an engineer, you might not care, but this is the stuff that keeps your CEO and growth lead and head of product up at night. A business owner that can answer that ๐ question reliably is god.
Javascript debugging [slightly] beyond console.log
My favourite tool for javascript debugging is `console.log`. I mean, I love `console.log`. If I ever get a programming tattoo, it's going to be `console.log` or some variation thereof. Simple to use, works every time, and every programming language I've used since I was 9 has had some variation of it.
Software Engineering Lessons from Production
Join Swizec's Newsletter and get insightful emails ๐ on mindsets, tactics, and technical skills for your career. Real lessons from building production software. No bullshit.
"Man, love your simple writing! Yours is the only newsletter I open and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. ๐"