How to fix your broken instagram feed after the June 1st 2016-changes

So Instagram just killed your image feed on your webpage. They warned about the 1st of June changes in November last year, so hey. I guess they did their part. These changes basically means that there are no longer any public feeds in the API, and that users that wish to grant access for an external application to read their feed needs to approve this explicitly. Makes sense, really.

First – all your old code still works. Your app is just forced into a Sandbox mode where up to ten users can access it. Which is fine, you probably just need 1 user anyway.

What you need is a new OAuth access token. A little tricky but I’ll guide you through the process below.

  1. Log into Instagram’s developer pages, where your app should be listed. Else, create a new app.
  2. Open a new browser tab, with this URL. Change the two parameters according to your app settings.
  3. You’ll be asked to log in, and then redirected to your redirect_url, along with a querystring parameter called “code”. Copy this paramter for later use.
  4. Open a terminal window and run this command. Change the four parameters accordingly: curl -F ‘client_id=XXX’ -F ‘client_secret=XXX’ -F ‘grant_type=authorization_code’ -F ‘redirect_uri=XXX’ -F ‘code=XXX’ https://api.instagram.com/oauth/access_token
  5. Have a look at the response. Somewhere in there, you’ll see a access_token parameter. This is the one you want. Your precious.

 

Hope this helps.

/Peder

Inline video in Mobile Safari on iOS

Recently we released a game for one of our clients, Red Bull. The game feature two awesome breakdancers which you control. Hitting the markers at the beat of the music gives you performance and accuracy points.

A video posted by earth people (@earthpe0ple) on

The biggest challenge we faced during the R&D was to play video of the dancers whilst allowing the player to interact. Currently, there is no straightforward way of doing this on iPhone devices. Any playing video tag will automatically startup in fullscreen using the built in media player. This is where our little hack came useful.

Through extensive testing and research we managed to extract image-data from a video-tag. Setting the currentTime property will stealthily move the playhead of the video and make that frame available for rendering onto a canvas. Realizing this we created our own custom player capable of extracting 25 frames a second, move to defined clips and perform loops. All on the “incompatible” iPhone.

Video compression played a huge role on the outcome. Usually videos enter keyframes around each second of video material. This also means that seeking in videos often snap to those keyframes. We did however discover that our video-material got even smaller in file-size setting the keyframes to every frame and allowed us to seek freely.

keyframes

Performance is a pain and video buffers doesn’t make it any easier. Video-elements only automatically buffer a certain amount of data. Jumping back and forth in a video shifts the buffers around while playing resulting in lag and dropped frames. This wasn’t good enough for gaming. Solution; Blobs. Loading the complete video into a Blob, from which the video-player can read from, removed the delays making video access instant. Now, this can be solved using several different techniques, for instance Application Cache, but we came to the conclusion that Blobs and trust in the regular browser cache would be sufficient and optimal in terms of performance.

/Carl

Controlling ssh access with GitHub organizations

Screen Shot 2016-04-27 at 17.54.47

Ok, I’m coming clean. Controlling access to our various servers has been a mess. Sure, we’ve stored passwords in a safe way (1Password for teams ftw!) but what happens if someone leaves the company or that root password somehow were to get out… Well, we did not have a plan for such a thing.

Sure, setting up ssh keys is easy, but we never got around to it. We manage more than a handful servers, and making sure the authorized_keys on these boxes is up to date just felt unmanageable.

This changed today when i got the idea to make use of this GitHub’s feature which exposes the public keys. I wrote a little script that fetches all users within our GitHub organization, pulls down the public keys and updates the ~.ssh/authorized_keys-file nightly with a cron job.

Yes, this is PHP but when all you’ve got is a hammer – everything looks like a nail. This needs some error handling too, but I thought I’d share it anyway.

 

/Peder

Botanical – vår nya familjemedlem (in Swedish)

Screen Shot 2016-04-07 at 20.20.03

I snart tio år har Earth People skapat och utvecklat verktyg för att hjälpa tjänster att prata med varandra. Ofta utan att tjänsterna egentligen stöder detta. Vi har byggt feta amerikanska bilkampanjer med konversationsteknik, reverse-engineerat Snapchat’s API till Europas första SnapChat-kampanj, hackat ihop det enda rimliga sättet att hitta bra band på SXSW, typ kopplat ihop MatHem med FindMyIphone och fått en hel del världspress på köpet.

Precis just nu pågår ett skifte, i vilket fler och fler tjänster bjuder in till utveckling av chattbottar. Det är via denna kanal som många kunder kommer att interagera med tjänster och varumärken eftersom användare har slutat installera nya appar. Tjänster som Kik, WeChat, Telegram och Slack leder denna bottrevolution, och nu när bottarna kommer till Facebook Messenger och Skype tror vi och många andra att detta kommer att explodera. Med detta som utgångspunkt startar vi nu en systerbyrå – Botanical.

Earth People lever kvar som vanligt och fortsätter göra internet en bättre plats för våra kunders kunder. Men vill du ha en bott – prata med Botanical.

/Peder, vd

An analog computer game on a modular synthesizer

Here’s a “Whac-A-Mole” type game made on a modular synthesizer, acting as an analog computer.

We got excited at the office over some images of old analog computers. This is a pretty fresh look for a machine:

This is the Donner 3500 portable analog computer.

The Donner 3500, a portable analog computer from the 1950s.

We are so used to the digital computer concept that it’s easy to think of an analog computer as the same thing but with older technology like op-amps, knobs and switches and lacking memory and storage. But an analog computer works with the value of a continuous input, instead of a quantized representation of the value as in the digital realm.

Analog computers are speedy with computing real time data, for example doing simulations or calculations of natural data. Not with the best precision though, due to analog noise. Digital values of 1s and 0s of course eliminates this noise. Hybrid computers, with analog speed and digital precision, were produced far into the seventies and some were still used in the 00s. TV graphics in the 70s and 80s were often made on analog computers, a popular system was the Scanimate.

So these cute analog computers with jacks and knobs ought to be far gone, right? Well the other day i realized we actually had one in our office, at least a close relative – the modular synthesizer.

20160212_142328

Eurorack and Serge synthesizer modules.

Normally a sound creating machine, but why not simulate commuter train delays or calculate taxes with this thing? Or hey, let’s make a game.

It’s a game of reaction. You’re supposed to touch the plates as quick as you can when they light up. The quicker you are the more points you’re given. The score can be read on a volt meter during the game. The synths also got to make some game sounds.

The video at the top shows Pärs best round, scored over 100. Jakob tied that later though.

The setup is like this: An accelerating trigger pulse loop lights up new random key. The selected row output sends out a set voltage. When you hit a key with your finger another jack outputs a different voltage. These voltages were inverted, attenuated and summed to zero volt when you hit the correct key. A comparator triggers on zero volt = score. Along with the original trigger pulse we also got a sloped output and when Pär scores we “sample” the curve with a sample and hold module, which gives you more points the quicker you are. The sampled value get mixed together with itself, i.e. the previous sampled value, so the score accumulates over time.

The game sadly got no highscore list.

Throwable images

I have been playing around with the idea of instant communication between devices/browsers for a while now. Trying to find new ways of using WebSockets further than just text messages. Suddenly realized that an old invention of “throwable” images between devices would be possible today with the illusion of instant data sharing. This video demonstrates how an image can be thrown between a cellphone and a computer with “zero” delay.

/Carl

My family uses Slack. It’s pretty interesting.

Everything changed for the better when we started using slack at work. We’ve made countless custom integrations; doorbells, intercoms, travel cards, reddit, lunch menues, git hooks, server monitoring, you name it – we haz it.

My family has been using Google Calendar for a few years. Me and my wife used to think that we we’re busy every night and that there was no room for improvisation. Google Calendar showed us that we had lots of free evenings and weekends, which has been great.

When it was time to evaluate a group chat app, I saw no reason to use HipChat, Skype or anything like that. Slack to the rescue!

Slack’s free tier gives us 10 integrations, search for the latest 10 000 messages and 5GB storage. This is plenty for a family of 4. In this blog post I’ll go through how we use it and the integrations we have made to aid us.

Screen Shot 2016-02-01 at 15.15.44

We use channels just the same way we use them at work. “fixahuset” is a channel for stuff that needs to be fixed around the house, “general” is important stuff, “handla” is for picking up milk on the way home, “mathem” is an integration i’ll get to in a bit, and “random” is the usual cat gif mayhem we’ve all learned to love/hate. “pedertest” is where i test new integrations.

Integration no 1: Where are the kids?

We, as most parents to 10yo kids, ask this question daily. Picking them up at school, but they’re at a friend’s house, etc. Gah. This is a custom Slackbot command, which calls out to my server and returns the result.

My server runs a little curl script that calls out to Find My iPhone and returns a static GoogleMap image. The kids will probably start to question this thingie eventually, but works for now.

whereis

Integration no 2: Google Calendar

Our old Google Calendar integrates very smoothly, just hook it up and let Slack know when you want the notifications.

Screen Shot 2016-02-01 at 15.27.16

Integration no 3: School information

It turns out our school is living in the future, providing a RSS-feed per child. I had no idea. RSS works very well with this setup.

Screen Shot 2016-02-01 at 15.32.12

Integration no 4: Online food shopping

In Sweden, MatHem is one of the biggest e-commerce sites for groceries. We use them for a weekly delivery, and it works great. The night before delivery we generally take 10 minutes and cram everything we can come up with into our cart, which means that we miss a lot of essentials. What if we could add uhm… juice to our cart throughout the week, the moment when someone realise that we’re out of uhm… juice (“sök” means search, “köp” means buy).

mathem-animation

This integration is not kosher at all, and I’m probably breaking some terms and conditions. But we need this, and it could be done, so hey. If you work at MatHem or is offended by this in any way – please let me know and I’ll cease and desist.

That’s all the stuff we’ve got now, but more to come. Applying tactics from work to family life may seem cold, but I see this as a way to make the most out of our time. It’s not like we’re writing Jira stories or planning our vacation in Trello. Yet.

UPDATE

Lots of people wrote and talked about this, like Qz.com, ForbesNyTeknik (Swedish) and Apparat (Russian). And on Twitter (1) (2) (3) (4), Hackernews and Fatherly.com. CBC Spark also made an interview, which was great fun.

Syncing your Korg Littlebits to external trig

Syncing your Korg Littlebits sequencer can be a bit tricky unless you have the official break-out bits, or a SQ1 sequencer too hook it up to. I multimetered the cables between the breakout bits:

Red = DC current.
Orange = trig.
White = ground.

Turns out the kit actually speaks normal trig signal, and the internal trig is about the same as the trig from a drum machine (in this case a Boss DR110). So we cut the orange and white cables going into the sequencer and joined these the wires from a cut mini jack cable. Voilá – external trig!

/Peder

 

Self-generating recursive art using Amazon Mechanical Turk

Amazon Mechanical Turk is an amazing API. It’s an API to humans, and yup that sounds super weird.

I programmatically create a HIT – a Human Intelligence Task, using their API. Typical HIT’s are “sort these files by cuteness”, “listen to these audio files for NSFW material” and other things a computer can’t do well (yet). Humans somewhere in the world will choose to do these tasks and get micro payments in return. We’ve got more posts about this coming up soon.

I wanted to see what happens when this system starts playing by itself, essentially by creating a feedback loop where a result from a HIT yields a new HIT, in an eternal loop. The outcome… is it art? A blog-series? A study in low-wage work? Who knows.

The task I created was to interpret the text phrase “I was born on Jupiter” into a 20 seconds video of containing dance. The next task will be to interpret the modern dance in a drawing. The one after that is to interpret the drawing in a text, and then it starts over.

http://interpretthis.tumblr.com/post/134926554936/hello-interpret-this-phrase-into-dance-i-was

Everything is documented on interpretthis.tumblr.com. Humans are slow, so it could take days for new posts to turn up here. I’ll keep it going as long as it’s interesting.

 

Making a silly game using Google Cloud Vision and Instagram

I was recently invited to the first alpha release of Google Cloud Vision, which is a game changing new API from Google. I can programmatically upload any picture and get this kind of stuff back:

  • Face detection, with pixel annotations of the corner of the mouth etc, plus unexpected values like sorrowLikelihood
  • Landmark detection, with LatLon polygon boundaries to real world landmarks
  • Logo detection
  • Text detection
  • Safe search detection, which can detect medical, nude and violent content

I wanted to dig right in, and decided to build a really silly little game. I call it Game Of Cats, and has nothing to do with Game of Thrones at all.

A user logs in using their Instagram credentials. My game engine starts polling all recent pictures from the people the user follows, and awards a point for every cat picture that occurs. The game goes on forever, without any interaction.

Screenshot 2015-12-08 22.35.28

I won’t bore you with details about how Instagram handles OAUTH, but you might be interested in how Google Cloud Vision wants to talk to an app like this? I built this quick and dirty as it should be, in PHP.

I would love to have the energy to build a WordPress plugin that adds a taxonomy to the media library, and automatically tags all uploaded images using Google Cloud Vision, but I don’t. Someone else will, and they write better code than I do anyway.

/Peder

Note: I can’t post the URL to the actual game, yet. The alpha’s terms and conditions prohibits me from deploying to production.