Jan 27 2014

Slip.js: Small Script Touch-Optimizes Lists in Web Apps

Advertisement

Slip.js is not exactly new to me. I stumbled upon it a few weeks ago, yet didn’t get impressed at first sight. These days I had a real life usecase and faintly remembered Slip.js. Now, having worked through a real project with the help of that small script, I have to admit that Slip.js really is a clever tool for the creation of touch-sortable or – more general – editable lists in web apps.

unsplash-04

Slip.js: Swipe as Swipe Can

Slip.js stems from the cerebral gyri of Kornel Lesinski from Poland. Nowadays he’s living in London, runs the Twitter account Kornel and a website adventurously named Pornel. Hmm. He makes his bread working for the (not so unknown) Financial Times in their FT Lab. Here, Kornel tries to come up with concepts with future. Kornel himself is no stranger to the developer community. He’s the mind behind great image optimizers such as ImageOptim, ImageAlpha and pngquant. Slip.js has outperformed all his previous projects in popularity already at the time of this writing, though.

At first sight Slip.js doesn’t come over as the next big thing. If you own a smartphone you are accustomed to swiping through lists, deleting items, editing them touch-based. What we probably don’t see is that these actions can only be implemented more or less easily in native apps. What makes Slip.js so special is that it brings the same features to web apps.

Slip.js lets you swipe list items from one position to another, delete or put interaction to them. The following GIF shows what you can expect:

slipjs

Swiping to the left and to the right can call further functionality, such as sharing or deleting. Slip.js uses custom DOM events which makes the whole thing pretty code-efficient. The script has no dependencies whatsoever and needs nothing more than being embedded to your pages for the full feature set.

Slip.js carries a BSD license and is completely free to use for whatever legal purpose you pursue. It runs in all relevant mobile browsers, namely iOS Safari, Firefox Mobile, Chrome Mobile and both versions of Opera Mobile.

The script is not perfect, yet. Updates will bring scrolling while dragging at the end of the viewport, showing the UI behind the dragged list item and configurable delays and animations. We’ll see…

Related Links

About the Author

Dieter Petereit is Noupe's Editor-In-Chief and a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called webdesign and has carried on ever since. Almost a decade ago he started writing for several online publications, some well, some lesser known. Dieter is a heavy G-Plusser, so why not meet him over there?

Homepage

Comments and Discussions
  • Andrew Cook, 28 January 2014

    Hi Dieter,
    This was a very interesting read. Most of the things similar to this, I never personally find a use for. But a lot of other people find good uses for these. Like you said, you didn’t think this was going to be useful until you had a real life experience, and that this is something you just randomly remembered. Thanks for sharing this,
    Andrew

Leave a Reply

Comments are moderated - and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

comments form
search form
 
image description image description