Our new tool finds “hidden” WordPress pages exposed by just released WP REST API

In December WordPress 4.7 was released. The most cool part of this release was the inclusion of the WordPress REST API. In development for quite some time it was finally included in core.

The WordPress REST API is great for developers because it makes it very easy to get all pages, posts and users from a WordPress site and use them in any way they want, using JavaScript or PHP or basically any programming language.

Did we say all pages? Yup, that’s right. All Most of your posts, pages and users are exposed to the public with this API. That includes pages that have no public links to them and pages that are not available in any menus on your website.

So some of the WP devs here at Earth People got curious about the API and what exposed stuff we could find on those websites on the internet that had updated to 4.7. We figured that an easy way to test this was to create a Google Chrome extension.

Hello there WP Content Discovery Chrome Extension

So we made the the extension and we called it WP Content Discovery.

Here’s how it works:
It adds an icon to your chrome toolbar. By default it only displays the letter “w” as in WordPress. When you visit a WordPress powered website and it detects the API is lightens up and displays “API” in blue.

The extension icon in action. On the first site no API is detected. On the second site the API is detected and the icon shows a blue API text.

Now the fun starts: click the icon to get get a list of pages, posts and users on that website!

Here is an example from the website of admin activity logger Simple History:

Here we can see that the extension indeed did find some pages on the website we tried it on…

Please try the extension. And please let us know what you think here in the comments!

One last thing… the API may freak some people out…

Even if all the data that you can get publicly from the REST API is already available somewhere in WordPress, it does freak some people out that it actually is possible to get the content so easily.

It is however pretty easy to disable the API if you find it to scary.

 

Making car sound with web audio synthesis

We’ve fooled around with web audio synthesizers before, but never in a situation where mp3s would not also do the job. But in our recent Red Bull Racing game it really made sense to use a synth. The throttling sound is of course what it’s about. You want the speed of the car to control the pitch of the sound, so a generated sound is the way to go.

The amazingly realistic car sound is made out of 7 oscillators, three of them making sound (square, triangle and noise), and three of them acting as low frequency oscillators, modulating stuff. The last one is doing frequency modulation on oscillator 1. All this goes through four different filters plus pan and delay.

Frequency modulation can be described as changing the pitch of a sound back and forth so fast that the movement itself starts to make sound. When throttling the car affects both the pitch of the audible oscillator and the one doing the frequency modulation it starts to sound a bit interesting.

Try some FM in this jsfiddle: http://jsfiddle.net/nPD3W/
You first hear the clean sinus wave, and as you turn up FM the character of the sound changes. Turn the frequency of the LFO all the way down to get a glimse of what’s going on.

yam_dx_sep83pg4243key
Frequency modulation is the synthesis method of the famous 80s Yamaha DX7 synth, which had 6 of these oscillators or operators modulating each other.

Our next project gotta be to reproduce the DX7 in the browser.

The game (use your phone): www.redbullracechallenge.se

Chrome extension based campaign

Last year, our friends at TBWA\ asked us to create a Chrome extension for their client Adressändring. Adressändring’s services are normally used to forward mail when moving to a new place, and now they wanted to reach a younger demographic. This Chrome extension forwards a user’s social life by taking over banner space, much like Adblock. Instead of removing the banners, as Adblock does, it swaps them for feeds from Facebook, Twitter and Instagram.

Technically this meant alot of black magic and unconventional methods. Serverside we didn’t want to make lookups in a database, or fetch data from an API, for every banner rendered. If a user enters Aftonbladet.se, we have to render at least 15 content areas from our servers, so these servers need to serve only static content to keep up with even a small load.

We decided to store all data in static json files on the server, serving them via Nginx. When the user installs the extension, we make a request to the server to create a new user (= a new json-file). As a response to the request, the server returns the identifier and stores it in localStorage. Access tokens from the various social media sites are then stored in this file.

When a user browses the web, the extensions makes a timed request to update the users feeds (= json files). This way the user will always get semi fresh social feeds from the server, and can request static files from Nginx. We had to set up both http and https so the security zones wouldn’t get mixed.

Two things we wish we would have had time to do:
– offload all json files to S3.
– instead of having the extension tell the server when to update a users feeds, we first planned on tailing the Nginx access log with a go or python script. Then we would have grep’d the user identifier, and depending on server load the script would decide if a user’s feeds should be updated or not.

The Chrome extension itself may get a separate blog post eventually. This got way too long anyway.
Oh, feel free to try out the extension!

http://post-forward.com

Web audio music game

After we did the rhythm experiment at Music Hackday we fooled around a bit more with the web audio synthesizer. It’s pretty amazing that they got a built in synth in Chrome, and if you got some knowledge of synthesizers the different audio experiments out there (googles own minimoog for example) actually seems pretty straight forward, when you look at the api.

You basically just create an oscillator instance:
oscillator = context.createOscillator()
Give it some properties:
oscillator.frequency.value = 440
Create a filter:
filter = context.createBiquadFilter()
Choose filter type:
filter.type = 'LOWPASS'
etc.

It then works a lot like a modular synthesizer, where you connect all these boxes into each other to tamper with the audio signal before it hits the speaker. Like:
oscillator.connect(filter)
filter.connect(gain)

neworder

This is a simple game built with this chrome audio api. All sound is generated on the fly, and it only works in Chrome. You hear a melody, which then get split up into pieces – represented by boxes. You can click on a box to hear the part, and you should then move the boxes in the correct order of the original melody. It gets really hard pretty quickly, maybe some musical einstein could go up to 20 points or something.

Try it here: http://earthpeople.se/game_neworder