Learning from tutorials is great! You follow some steps, learn a smol lesson, and feel like you got this. Then you go into an interview, get a question from the boss, or encounter a new situation and o-oh.
Shit, how does this work again? ๐
That's the problem with tutorials. They're not how the world works. Real software is a mess. A best-effort pile of duct tape and chewing gum. You need deep understanding, not recipes.
I took a bet on JavaScript in 2005 when it was known as DHTML. It's been my favorite language ever since. These essays are the good stuff you can't learn from a tutorial.
Leave your email and get the JavaScript Essays series - a series of curated essays and experiments on modern JavaScript. Lessons and insights learned from practice building production software.
Curated JavaScript Essays
Get a series of curated essays on JavaScript. Lessons and insights from building software for production. No bullshit.
Latest JavaScript articles from Swizec
The anatomy of a React Island
A coworker asked how React Islands work and I realized it's a technique I've been using to modernize monolithic web codebases for years, but never wrote down how it works.
The efficacy of TypeScript
TypeScript may streamline code navigation and catch semantic errors, but it doesn't guarantee fewer bugs or faster fixes.
TypeScript runtime vs types at run-time
Understanding the nuances of TypeScript: it adds static types to JavaScript, reducing bugs by checking code validity pre-run. But imagine if we had types at run-time too - validating inputs, enhancing error messages. A dream, but a nice one.
Bun โ first impressions
I've been using Bun in a few side-projects and I like it a lot
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
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 โ๏ธ
Quick tip about JavaScript's optional chaining operator
People on twitter loved this trick I learned from a coworker's pull request the other day. You might like it too.
Promise.allSettled, a wonderful tool for resilient code
The pros and cons of different approaches to writing resilient code that handles partial failures
Immutability isn't free
Or how we took an API endpoint from 16s to 3s.
Using DynamoDB Streams with the Serverless Framework
DynamoDB Streams are a convenient way to react to changes in your database. And surprisingly easy to use ๐ฅณ
pg-mem and jest for smooth integration testing
The cult of TDD leads you down a dark and stormy path towards brittle code with a false sense of security. But there is a better way. A sweet spot between unit and heavy integration.
Why null checks are bad
Every null or undefined check doubles the number of tests you need ๐ฑ
Small choices can wreck your codebase
wanna see the strangest looping construct I've found in production code?
Finding unresolved promises in JavaScript
JavaScript is a fantastic server-side language because it's async. That also makes it tricky. ๐ฉ What happens when you swallow errors? Forget to resolve promises? Or run into a number of other anti-patterns
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 โ๏ธ
Learn TypeScript in 5 minutes
TypeScript solves many of JavaScript's sharpest edges. You don't need much to get started โ๏ธ
Stop SHOUTING = 'shouting'
A hill I will die on ๐ global CONSTANT = 'constant' are bad
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.
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.
A TypeScript trick for reusable hooks
Reusable hooks are all fun and games until TypeScript starts yelling at you about incompatible types.
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. โค๏ธ
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 ๐
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. ๐ฑ
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?
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.
JavaScript promises are just like monads and I can explain both in less than 2 minutes
There's a joke in functional programming that once you understand monads, it becomes impossible to explain them to others. The nuance is nuanced, the details are hard, letโs focus on practice
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_.
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.
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!
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.
A day is not 60*60*24 seconds long
Days aren't 60*60*24 seconds long. They are 1 day long, which on most days maps to 60*60*24 = 86400 seconds. But not on all days.
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.
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.
A cool JavaScript property you never noticed
A few years ago I was playing around with JavaScript trying to find the cleanest way to implement callbacks in functions. Primarily I wanted a readable way to make certain the last argument passed is a callback, withut having to rely on knowing how many arguments there are and so on. Instead I stumbled upon a pretty cool feature of how javascript handles function arguments.