I love a well-done 'sticky' element - an element that scrolls with page, then locks to the browser window when it reaches a specific location. A common example of this is the header on many sites, as seen below. At first the element scrolls with the page, then becomes fixed when it reaches the top of the page. It's common in these cases to apply different styling to the element when it becomes fixed. In the example above the background and text color are changed. In the past I would have used an onScroll listener to check the position of the element, and if the element is at the top apply the necessary styles. This method, using an onScroll listener is extremely bad for performance -

Read more

This past winter I built two Surly Bridge Club bikes from the wheels up - one for my wife and one for me. We considered a number of bikes and frames before ultimately deciding on the Bridge Club frames for a few reasons. One, because I've had great experience with Surly bikes in the past. But mainly because the Bridge Club frame was a near perfect fit for what we wanted in a bike - an all-rounder bike we can use for on and off-road touring. It's not quite as burly as some of Surly's other touring frames, but burly enough for short bikepacking and bothy trips around Scotland. Surly Bridge ClubsNeedless to say, we're absolutely loving the bikes. Our trips so far have been day

Read more

I thought about naming this article "Building an Instagram 'Best Nine' App in 200 Lines of JavaScript", but 'lines of code' is a stupid metric (imo) and the title would have been click-bait more than anything. Anyways, this article is about how to build an Instagram 'Best Nine' app with plain, modern JS (no frameworks or other packages). What Is A 'Best Nine' App?If you're not familiar with 'Best Nine' - it's a collage (or grid) of your nine most-liked Instagram posts for a given time period. There are several popular web and mobile apps for creating Best Nine grids available. Here's my Best Nine from 2019: View this post on Instagram My top 4, 9, 16, and 25 of 2019, made using a little

Read more

I recently worked on a project where we wanted to do client-side validation of video file uploads. The app requires users to upload videos of a specific type (`.mov`) and resolution, and ideally the validation would occur client-side so feedback is instant. Our first iteration involved checking the filename to infer the file type - that is, if the filename ended in .mov. This is simple but not thorough, any filename ending in .mov passes the validation. For validating the video's resolution... well, we had nothing. Only after the video was uploaded could the backend of our application analyze the video and return validation for the video. The above solution is far from ideal so we continued to explore options. After more experimenting we borrowed a

Read more

Most React apps I build are self-contained - the entirety of the app lives within a root component, and is responsible for rendering the full web page/app. And the app doesn't need to communicate with other JavaScript or elements on the page. But in some cases the React app is a page/app add-on, responsible for rendering only a small part of a web page/app. Some examples - widgets, forms, maps. In many cases these widgetized apps are self-contained and don't need to communicate with the rest of the web page or app. But occasionally they do... and some setups require the state and methods within a React component to be accessed from outside React. Is this possible? And if so, how? How To

Read more