Using IFTTT geofencing, node.js, barba.js and GSAP to see who’s at the office

Peter van der West
Feb 24, 2017 · 5 min read

Since the start of 2017 I partnered up with Julius van der Vaart to combine our skills and reach for the stars in our new company called “sssssst”.

To make working together a bit easier we thought it would be a good idea to share a workplace. And so we did. Being in the same room sparks creativity, and motivates the discussion of design decisions and spending time on our own projects.

To create a good workplace atmosphere we thought we really needed the following “office essentials”:

After buying and installing these essentials we had a nice place to work at, what more does a creative agency need?

Image for post
Image for post
Peter and Peter working on something at the sssssstudio

Working hours

Julius and I aren’t really 9 to 5 people. We might work from 10:00 am until 7:00 pm and some days from 1:30 pm to 2:00 am.
This also means it’s possible we aren’t at the office at the same time. But it would be nice to know if one of us is at the office, this motivates us to get to the office as soon as possible if we woke up late after a long night working and don’t want to spent the day working alone.

So I created a web application that shows us who’s at the office.

Image for post
Image for post

If This Then That

By utilizing two features of the wonderful If This Then That (IFTTT), a platform that lets you create applets that interacts with devices and web API’s, I was able to create a web application that showed our current “working-at-the-office” status.

Besides a simple interface that shows our presence at the office it offers a overview of our check-in and check-outs at our workplace.

I was able to easily create this app by using the IFTTT If “I enter or exit an area” then “make a web request to” our little web application.
IFTTT offers a maker channel since Q2 of 2015. This means you are able to respond to a triggered action by posting a JSON request to a URL.

By running the IFTTT app on our iPhones, and using location features in the background we could trigger this action and update our “office-presence”.

I thought it would be nice if I could create a pretty generic approach to send POST requests with a JSON feed to register our presence at the office. This means it would be easy to add more co-workers and more locations in the future.

So I created a JSON post request that looks like this:

“user”: “username”,
“pw”: “password”,
“name”: “Peter”,
“location” : “Kleine Campus Arnhem”,
“occuredAt” : “{{OccurredAt}}”,
“enteredOrExited”: “{{EnteredOrExited}}”

The “user” and “pw” fields provide a security measure that keeps invalid data to be saved in our database (no friend, given credentials aren’t valid of course). The “name” and “location” (Yay, “the Kleine Campus” is where we work) fields are obvious just as the IFTTT provided fields “{{OccuredAt}}” and {{EnteredOrExited}}.

Image for post
Image for post
Current locale… Dutch.

By saving these values to a noSQL database I’m able to show our current statuses as well as our previous statuses and provide a “punched in” and “punched out” time for every co-worker.

Node server and animations

When I was looking for a suitable architecture I thought it would be nice to use node.js as a server. This made us able to experiment with the right settings to use node on our public virtual private servers with DirectAdmin (never ever done this before on our public servers) and opened up some opportunities using for live location changes.

By editing the NGINX conf. file I was able to protect the config.js and app.js files from being looked at, so prying eyes couldn’t find our credentials and other secret stuff.

location ~ /(\.|config.js|app.js) 
deny all;

I then used the lightweight lokijs database to store the JSON post requests because it’s a super fast, easy to use in-memory database. They made this a noSQL database with (web)apps in mind, just what I was looking for.

Having done a lot of Flash AS3 application development in the past I fell in love with the GreenSock Animation Platform (Install the flash player and take a look at some of my projects: or Luckily our friends at GSAP didn’t stood still and created the best, fastest and most versatile animation platform for HTML5 javascript animations on the web right now. Cuz ya know Flash is dead…

It’s their animation platform I used (and used throughout a lot of my html — Drupal — projects recently) within the frontend of this project to create smooth transitions and initial animations between pages and states.

Of course I wanted to be able to have our application available as apple-mobile-web-app-capable so that we could put a bookmark with icon in our iOS homescreen. This meant I had to provide a way of navigating to subsequent pages through AJAX or equivalent, so the homescreen app wouldn’t open a Safari window.
I easily managed this with using the following well known javascript snippet:

(function(document,navigator,standalone) {
// prevents links from apps from opening in mobile safari
// this javascript must be the first script in your <head>
if ((standalone in navigator) && navigator[standalone]) {
var curnode, location=document.location, stop=/^(a|html)$/i;
document.addEventListener('click', function(e) {;
while (!(stop).test(curnode.nodeName)) {
// Condidions to do this only on links to your own app
// if you want all links, use if('href' in curnode) instead.
'href' in curnode && // is a link
(chref=curnode.href).replace(location.href,'').indexOf('#') && // is not an anchor
( !(/^[a-z\+\.\-]+:/i).test(chref) || // either does not have a proper scheme (relative links)
chref.indexOf(location.protocol+'//' ) // or is in the same protocol and domain
) {
location.href = curnode.href;

But I wanted this to be a bit more sexy and have GSAP enabled transitions as well. That’s why I used the wonderful script barba.js. Barba.js lets us create transitions for loading and unloading pages and “pre-load” the pages that visitors would like to see.

With all these techniques combined we can now see who’s working at the office right now, and have a backlog of our hours spent at our workplace.

If you’re interested in an application similar to the one we developed for ourselves our would like to know how to get started developing something like this please get in touch with us, or me at


Silence is golden, we are platinum.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store