Blog
The Interactive Guide to UX Writing: 9 Tips for Better Microcopy
Every button, error message, and tooltip you write is a tiny conversation with your users. Get it right and they flow through your interface without thinking. Get it wrong and they get confused, frustrated, or just leave. You don't need to be a professional...
Interactive Introduction to Regular Expressions in JavaScript
Regular expressions are patterns that describe text. They look cryptic at first, but once you understand the building blocks, they become surprisingly intuitive. In this post, I'm going to walk through how regex works, step by step, with interactive examples...
How to Save and Download HTML5 Canvas as an Image with JavaScript
After drawing to the canvas, you may want to download and save the canvas drawing as an image. To do this, you can use the `toDataURL()` method of the canvas object. Let's say you have a "Download" button in your HTML: html
Learn HTML5 canvas by building an image watermarking tool
HTML5 canvas allows us to create and manipulate pixels, just like a painter working on a canvas. We can draw text and graphics onto the canvas using JavaScript. To demonstrate its power, let's build an image watermarking tool that allows a user to upload an i...
Predicting Weight Loss Plateaus: Why Your Diet Equation is Wrong
Everyone has a simple mental model for weight loss: Calories In < Calories Out = Weight Loss. It's simple, intuitive, and... often frustratingly inaccurate over the long term. You might start a diet and see great results in the first few weeks, but then,...
Calculate Distance Between Two Coordinates in JavaScript (Haversine Formula)
The Haversine Formula The most popular way of calculating the distance between two points on a sphere is using the Haversine equation. If you have the coordinates (longitude and latitude) of the starting and destination locations, you can use this equatio...
Complete Guide to the JavaScript Geolocation API
Imagine visiting a website for a new coffee shop. Wouldn't it be nice if it automatically showed you the branch closest to _you_, rather than their headquarters in a different country? That's the power of the Geolocation API. It allows web applications to...
SVG vs PNG: The Interactive Guide to Vector Graphics Advantages
Have you ever opened a company logo on a big screen and noticed it looks... fuzzy? Blocky? Like it was built out of Legos? That's because most images we use (JPGs, PNGs) are just grids of colored pixels. If you zoom in, you see the grid. But there is a bett...