I’ve encountered a few very strange web development bugs in my time. SVG has always been a particularly reliable source of weirdness in all browsers. New APIs and standards always need a bit of time before they become reliably usable. But the most insidious bugs are always because of state in some way.
- Auth failing because of cookie configuration.
- A weird bug persisting because of something you’ve saved clientside.
- Forms failing because the anti-CSRF token was disappearing somehow somewhere along the line.
- Everything to do with IndexedDB.
- ServiceWorker cache bugs can be particularly nasty.
The weirdest ones have been my own fault – well, all bugs are ultimately the dev’s fault, one way or another.
The most annoying ones I’ve encountered were because I did something dumb in a separate project and had that weirdness contaminate my then current work because I made the mistake of reusing the port number for the localhost
dev server.
Sometimes that’s unavoidable, though, as not every project lets you override the port number for local development. For example, if you’re using an authentication service like Auth0, you might not be able to change the dev server URL that’s in its allow-list.
The most straightforward way to address this, as well as other state sharing bugs and extensions messing up your web dev, is to always launch your dev browser with a fresh profile.
Dev-oriented browsers such as Polypane have profile management features that specifically cater to web developers, but this is one of those instances where a shell script is genuinely useful.
I use this script to launch Firefox (saved as firefox.sh
):
#!/bin/sh
set -eu
FIREFOX_PATHS=( \
"/Applications/Firefox.app/Contents/MacOS/firefox" \
"firefox"
)
for i in "${FIREFOX_PATHS[@]}"
do
if command -v $i &> /dev/null; then
FIREFOX=$i
fi
done
DATA_DIR="$(mktemp -d -t 'firefox-unsafe_data_dir.XXXXXXXXXX')"
"${FIREFOX}" \
-profile $DATA_DIR \
-no-remote \
-url http://localhost:8888/ \
>/dev/null 2>&1 &!
I run it using sh firefox.sh
and it’ll load a fresh instance of Firefox with a new profile created in a temporary directory.
(Mac users might need to replace ${FIREFOX}
with open /Applications/Firefox.app --args
in the above script.)
Chrome is often a bit trickier as the launch command for your OS’s Chrome or Chromium can vary a lot. This usually works, with the same caveat for Macs as in the Firefox script:
#!/bin/sh
set -eu
CHROME_PATHS=( \
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
"chrome" \
"chrome-browser" \
"chromium" \
)
for i in "${CHROME_PATHS[@]}"
do
if command -v $i &> /dev/null; then
CHROME=$i
fi
done
DATA_DIR="$(mktemp -d -t 'chrome-unsafe_data_dir.XXXXXXXXXX')"
"${CHROME}" \
--ignore-certificate-errors \
--no-default-browser-check \
--no-first-run \
--non-secure \
--user-data-dir="${DATA_DIR}" \
http://localhost:8888/ >/dev/null 2>&1 &!
Getting into the habit of always testing your web dev work in fresh browser instances with temporary profiles prevents a whole host of bugs that can be really hard to figure out as the ultimate cause can be something in a separate project.
Black Friday to Cyber Monday Bundle
The above tactic for avoiding cross-project state contamination is one of the many things I write about in the web-book/course Uncluttered: free yourself from Node with import maps and test-driven web development.
That course is available as a part of a massive bundle for $49 USD that includes:
- Out of the Software Crisis: Systems-Thinking for Software Projects. (Ebook).
- The Intelligence Illusion: A practical guide to the business risks of Generative AI (Ebook).
- Yellow: software development aphorisms. Twenty short videos on software development principles.
For total savings of more than $100 USD. That’s two highly rated ebooks, a series of audio-oriented videos, and a web-book/course all for less than the full price of the course itself.
Today is the last day of the bundle sale!
Links
- "LukeW | Until the Right Design Emerges…“. “Your first design, while it may seem like a solution, is usually just an early definition of the problem you are trying to solve.” I don’t think I’ve ever worked on a project where management let the design process actually finish.
- "Why I Don’t Dig the Singularity". Eight years old but still relevant.
- "HTML Web Components are Just JavaScript? | OddBird"
- "Meta’s Free AI Isn’t Cheap To Use, Companies Say - Slashdot". “Llama 2 out of the box costs 50% to 100% more than for OpenAI’s GPT-3.5 Turbo.” GPT-3.5 Turbo is rumoured to be ~30-40% larger than the biggest LLAMA-2 model. The AI bubble is being massively subsidised.
- "You’re Not a Fearmonger. You Have Sentinel Intelligence.“
- "California Man’s Plot to Avoid Tickets With ‘NULL’ Vanity Plate Nets Him $12K in Fines"
- "How Sam Altman Ran Afoul of the Keepers of the AI Faith | The Nation". I really hope these articles mean that the religious nature of the current AI bubble starts to draw mainstream attention.
- Making God by Emily F. Gorcenski. A fairly detailed overview of the history of the singularity cult that dominates tech today.
- "Effective obfuscation - by Molly White - Citation Needed"
- "The elevator pitch for Web Components | Go Make Things". This. But also the fact that most of our existing testing/typing tools are effectively a fiction, but are the least fictional when applied to custom elements.
- "William Davies". Interesting interview.
- "Shadow DOM is for hiding your shame"
- "The Failed Commodification Of Technical Work — Ludicity". This is what drove most of the changes to software dev over the past decade. The purpose of React and code copilots both is to let managers replace specialists with a CADT while still maintaining consistent output.
- "CSS { In Real Life } | Why You Should Hold Onto Your Devices For Longer". The biggest environmental impact of computing—by a huge margin—is from manufacturing the devices. Emissions from bandwidth or storage are negligible in comparison.
- "The Bluffer’s Guide to Managing The Development of Large Software Systems – Codemanship’s Blog". I love this series of bluffers guides to texts that are important to software development. Highly recommended.