JavaScript Pull to Refresh for the Web

ptr-header

Across many native mobile apps you’ll see an interaction that allows you to pull down a list to refresh its contents. This is commonly know as “pull to refresh”, and I set out to try and build a native-like JavaScript equivalent for the web.

There are a few solutions already out there if you try a quick Google search, but many of them don’t feel quite right. They aren’t close enough to the performance and responsiveness of a native app implementation.

In order to get a more native-like level of performance I used some of the same CSS and JavaScript techniques that I wrote about when building the smooth sliding mobile menu. Combine that with the really awesome touch event library called Hammer.js and you’ve got the base for a great pull to refresh implementation.

There’s no crazy nested markup for this to work, it’s a very simple setup. It supports native scrolling, and it will work across all modern browsers on both the desktop and on mobile devices.

If you’re interested in using it in your next project, I’ve included all of the implementation details in the Github project readme. If you want to give it a spin, check out the demo implementation in your favourite browser or mobile device.

View on GitHub | Try a Demo

↓   Some recent thoughts   ↓

If you have 30 minutes to spare and you’re interested in understanding how economies work, especially in times like these, I highly recommend this video by Ray Dalio:

How The Economic Machine Works by Ray Dalio

youtube.com · Economics 101 -- "How the Economic Machine Works." Created by Ray Dalio this simple but not simplistic and easy to follow 30 minute, animated video answers t...

I’ve always wondered why higher quality eggs in Canada have a lemon yellow coloured yolk. I visually associate a bright yellow yolk with lower quality and being less nutritious. Since I’m originally from the UK, this makes sense to me now — we tend to prefer orange yolks across the pond.

Different yolks for different folks: Why we judge an egg by its colour

theglobeandmail.com · Consumers preferences about the colours of their food, such as the yellowness of egg yolks or pinkness of salmon, vary by region. As National Food Reporter Ann Hui writes, one Canadian company has developed a tool that lets food producers find the perfect hue for their market

Another week, another Apple Car story. Where there’s this much smoke, there must be fire. Keeping a car completely under wraps until it’s ready for sale seems impossible, at some point we’re going to get a peek at the hardware.

12 things we want to see in an Apple car

businessinsider.com · These are just a few of the features we hope exist in an Apple Car.

I’m fascinated by the idea of a modular phone and if it’s something that can legitimately work well, but also be commercially successful. I’m not convinced that consumers will care enough to want to customize their phone’s hardware to this level.

Self driving car technology is one of the most exciting tech frontiers of our time. The advances over the next twenty years have the ability to change our day-to-day lives in a different, but just as impactful way as the smartphone has.

“Cities may look drastically different. Sidewalks could go away, as pedestrians and cars share the roads. There will be no street parking, just parking garages outside of city centers. And traffic signs and infrastructure may disappear — replaced with smaller, cheaper equipment that only needs to communicate with cars.”

The complete timeline to self-driving cars

recode.net · Self-driving cars are coming. The question is when and how.

More of my thoughts