JavaScript Swipe Cards UX

swipe-cards

When using the web we’re all used to the classic scrolling experience, where we scroll a long page until we reach the end or get bored. What if instead we scrolled screen-by-screen like some of the best native reader apps?

I worked on a proof of concept JavaScript card swiping UX that offers a similar level of performance as a native app. Each card can be swiped both up and down, and will respond with precision to dragging and quick swipes. This is using many of the same techniques as the pull down to refresh UX, and again uses hammer.js for the drag events.

Browser native scrolling has been disabled, so you are only swiping between a single full width and height card each time. Since it’s a proof of concept it’s only limited to three cards that you can loop through infinitely. In a real world application of this it could be extended to add true infinite scrolling through cards, handling memory usage by adding and removing card elements from the DOM when off screen.

This UX would lend itself well to a news reader interface (a la Flipboard), or in a scenario where you have a few screens of related content. I think combining this UX with the pull down to refresh UX, you’ll have the base for an interesting web reader that could perform similarly to a native app reader. I intend to experiment and iterate on these techniques further, and see how well they can interact together.

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