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

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”:

• Whiteboard
• Good music installation
• Glass door refrigerator with LED lighting
• Craft beers and glass bottles of Coke to fill the glass door fridge
• IKEA Plants in Lenneke Wispelwey’s vases

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

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.

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}}.

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 socket.io 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: http://theaterpakhuis.klunky.nl or http://musica.klunky.nl). 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) {
      curnode=e.target;
      while (!(stop).test(curnode.nodeName)) {
        curnode=curnode.parentNode;
      }
      // Condidions to do this only on links to your own app
      // if you want all links, use if('href' in curnode) instead.
      if(
        '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+'//'+location.host)===0 ) // or is in the same protocol and domain
      ) {
        e.preventDefault();
        location.href = curnode.href;
      }
    },false);
  }
})(document,window.navigator,'standalone');

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 peter@ssssss.st.