— words and things


A little over a year ago while I was walking through Bocoup in Boston I was introduced to a cute little robot roaming the offices connected to Rick Waldron‘s macbook. He was controlling all of the movements of the robot through a node.js REPL via a library he created called johnny-five. I was immediately hooked and have been obsessed with arduino hacking in a node environment ever since. His project has come a long way in the past year and if you are not hacking arduino with node you have to try it out. It is easier than ever to get started with hardware hacking thanks to the johnny-five project.

Recently I came across a cool remote controlled multi-colored lamp in an airbnb while traveling through Switzerland. Fascinated by how fun it was to change the color of the room to any color and realizing that “normal” lights just would not cut it any more meant that I had to have one for myself. Once I made it back home I found the lamp on amazon and balked at the hefty $130 price tag that came with it. Immediately I thought “How hard can this be to make myself?!”. Two hours later I had created a simple prototype using an arduino with an RGB LED and a few open source tools. After you get set up with johnny-five follow this tutorial on getting an RGB LED hooked into your arduino. Once you have that running you are ready to get started building your own remote control for the LED.

Step One: Find a color wheel to control the color of the LED. 

The first thing I needed was a way to select a color to show. There are multiple solutions out there but one stuck out above the rest. Colorwheel by John Wier was a perfect option for a prototype because it offered me exactly what I needed. A color wheel to embed in a browser with a simple api to give me access to the RGB values corresponding to what I selected in the wheel. The only issue here is that its using raphael so it will not work on ios, but for a browser prototype this was no problem.

Step Two: Pass the RGB values to node.

Once I was able to get the RGB values from the onchange method provided by Colorwheel I could pass these brightness values down to the server through web sockets. In this particular case I chose binary.js ( this is slightly overkill but it works ) to handle the streaming web sockets from the client to the server. It was as easy as:

bc.send({}, [color.r, color.g, color.b]);

Step Three: Send the RGB brightness to the hardware.

Once I had the RGB values into the server it was time to hook up the RGB LED to the breadboard and wire it to the arduino so I could control it through johnny-five. Contributers to johnny-five have done a great job of creating wrappers around all kinds of different pieces of hardware for you. The LED wrapper demonstrates how easy it is to get up and running quickly. It is even used in the intro example for johnny-five. In our case we want to increase the brightness of each of the three LEDs inside of an RGB LED based on the red, green or blue value you selected in the color wheel. The LED wrapper has conveniently added a brightness() method for us .

Next Steps: Git clone, turn up the lumens or add a mobile controller

I have made the code available on github for anyone who wants to test this out on their own.

Now that you have a simple RGB LED working you probably are going to want more lumens shining, changing to color of the room around you. You could go for a much larger LED but a more simple option would be to order an LED strip . This will give you access to many more leds and let you stream them around the room changing your surroundings to whatever color you wish. Another option would be to get rid of the current client side code and migrate to a more mobile friendly version so you can control your lights remotely.




Read More

The German blogosphere came together last week at re:publica to kick start Berlin web week. A few weeks before this Kai Bennerman approached me with an idea about tracking this conference as it was being talked about in real time via twitter. He had a few ideas about some different key words that he wanted to follow that were being tagged with the #re12 hash. My approach to building this widget first started with the streaming API that twitter provides the only downfall of this is that using the streaming api would require some server pieces to work properly and the assets were not available to build such a service in the time frame that we had to complete this project. I decided to use twitters public search api instead as my platform to build a jQuery plugin on top of.

The first idea was simple. Filter tweets that contain the following words: ’session’,'track’, ‘vortrag’, ‘talk’, ‘ and panel’ that were included in tweets that contained the rp12 hashtag. At first you would think that you would just include these words inside of the query string that we send to the twitter api but if you do that the results seem to get over filtered and raise the complexity of the query string which increases your chance of getting rate limited by the search api. Another problem with adding the items to the query string meant that twitter would try and return these tweets to you ONLY if all words were matched, I need an OR scenario not an AND.

My way around this was to query the search for only the hashtag #rp12 and then use javascript to search for the requested strings myself vs having twitter do it. As I searched through all the tweets I would keep track of how many I found that met the proper search criteria and once I had enough items I would cut off the query to twitter. While I am doing this checking as soon as I found a match I would create the DOM element and append it right away so it would be able let it scroll on the page and be visible to the user.

You can find the code on the openNews github.

Read More

I find myself in this position often these days. Stuck in a new city with no real sense of where I am. I think this is due to the fact that I still have yet to purchase a smart device to navigate me throughout these cities. This is going to change as soon as I get back to Berlin. I was scheduled to give a talk at BBC at 1300 yesterday but after I had taken the tube the wrong way I knew that I was not going to be able to make it since I was now halfway up the northern line going the wrong direction. Thankfully Andrew from the BBC is awesome and let me reschedule for later in the year.

Right about the time I informed him I was not going to make it Nicola Hughes sent me a chat and said “You should come talk at the guardian today”. I gladly accepted and off I was southbound on the northern line. I made it to kings cross which is the closest stop I could find on the tube map ( which is a beautiful piece of graphic design ) and headed north toward to guardians building. The first thing I noticed when I walked in was that this place is HUGE. I came from IBM which is a massive corporation globally, but thankfully I was in a building off of the main campus and it was just a core group of about 15 of us working together. At the guardian it is just one massive open working space on three different floors. I am not convinced that I would be very productive in that type of environment due to the large about of people and distractions moving around but it was fascinating to see everyone in this huge work space.

So after having less that an hour to prepare for this talk, there I was infront of 20+ developers who were waiting for me to share something cool with them. I decided that it would be best for me to just give as many super fast lightning talks as I could introducing them to new tech or even just things I had worked on in the past. So this is an attempt to run down what I talked about in a blog post so others could hopefully find some new content or ideas from which to be inspired.

I started off talking about Mozilla’s partnership with The Living Docs Project by showing two of the projects from the original hack day I took part in at Mozilla’s offices in San Francisco that sort of proved this type of collaboration could really work. You should also checkout the Wired.com blog because they did a really great post on the hack day. During this demonstration one of the main points I wanted to get across what that all of this is so new and that most people are still not really sure how they can make video interactive or if they even want to do this. To me it is a totally new exciting way of dealing with video on the web but to some film makers it is frightening because they do not want to take away from the art of their film making. One thing I really wish to communicate to all film makers is that this type of work and collaboration between hackers and film makers is only going to add quality to the story you are trying to tell. Working with technologists is going to let you tell the story you want, while at the same time giving the user / listener / watcher ways to discover so much more related to your story or cause.

The next thing I gave a quick over view of was the work we are starting to do at Zeit Online. The thing I love most about Zeit Online is that their are no limits to what we can do. At somewhere like the BBC or The Guardian, while these are great news organizations they are massive and a bit controlled by the politics that is a reality within every day life of such a large organization. It seems to be that this is holding back the true potential of what it means to be an OpenNews fellow. I did not realize until I walked around The Guardian yesterday how lucky I am to be at a place like Zeit Online. It is not yet reached this massive scale and I get to work a long side the Editor In Chief and his posse to help them realize their vision. This is golden and it is just beginning. I am really interested to see the progress of each of the fellows at the end of this year and how much of it was truly open. With that said I was really impressed about how the Guardian is putting a lot of their development out in the open now. They have some really really smart people there doing some really amazing things. However in order to get the chance to do this work in the open they had to really push their cause to the upper management to let them do this. In the end it is just code that they are putting out. Tthey are not releasing the brains behind the code because this is where the real power lies. Code is just code and it is not the ability to solve really hard problems, more organizations should realize this and know that releasing this code is going to help others not only learn but innovate.

The next thing I talked about was the twitter streaming API and the awesome maps that being being built on top of it. I gave a demonstration of the Twittermap I worked on with one of the smartest developers I know Nate Hunzacker he uses his own version of NLP called Speakeasy to calculate the sentiment of tweets any given place in the world. In other words it is pretty freaking awesome.

After that I went on a social media rant about the google+ api but it turns out that no one at the guardian or even in all of london think that google+ is relevant to sharing data and if they do then they are in an overwhelming majority. This is not so much the case in Berlin. I see most of my colleagues at Zeit Online posting data constantly about the news in Germany. I am interested to see how this battle plays out in the coming years. Will google+ be the next google wave? They are trying to hard but failing. I had an interesting chat with a developer at the guardian yesterday who told me that they are now seeing more traffic coming from facebook shares than they are from any google search or service. The only thing I really love about google+ is the hangouts. I taught my grandma and sister how to use them so I could hang out with them back from North Carolina from Europe.

I took a few questions and that was pretty much the end of my day at the guardian. Then I went to the awesome Mozilla offices in London for our Mozilla London Office party!!!

Read More

The Google+ Platform developers have done a great job with their API and documentation so far. Unfortunately at an API level they have not yet implemented the ability to grab the number of plus ones for any given URL. Not having time to wait for the issue that is currently pending within the google-plus-platform issues tracker, I decided to take a deeper dive into the source of the plus one button’s underlying javascript. Another unminified adventure into Google’s mysterious ways of mastering the interwebs.

During the train ride from Hamburg to Berlin this past Friday I was doing some thinking on how exactly to extract the count of plus one’s of any given url. I knew that the API would not support my request and that was about it. I spent a few hours examining the button’s source code to tried and figure out exactly what kind of voodoo they were doing to let you magically embed the button.

Typical of most “embedable widgets” like this, is an init script.  Google gives to you their version of this init script within the “Getting Started” section for the +1 Button ( plusone.js ). This script sets some globals ( among other things ) and then embed’s the main script. In this particular case, the script that is being embedded is doing a lot of different things that I did not take the time to fully understand because I quickly found the main thing I was looking for. The point at which the browser creates the URL of the iframe that contains the actual button html. Once I found that it was easy for me to use jsdom and jquery to scrape the src of the iframe that is embedded by the main script.

When crawling minified javascript manually you want to look for key words. In this particular case the text “src” and “iframe” were what led me to exact code I was looking for. Another big help in figuring out complex minified code is using break points in Chrome’s Dev Tools as well as the window.console.trace() method.

Feel free to clone the simple utility I created to help me gain access to the number of plus ones for a given url. I will post more detail of the project I am building this script for in the future. The inline comments should be enough to help you get started.

Read More

Show and Sell

i want to mine user input as a real time news discovery tool for journalists and news consumers. imagine if you could aggregate, process and graphically visualize user generated geolocated data from as many sources as possible all over the world in an instant. watch data change while using web sockets to feed your html5 graphs. first start with the worlds largest cities. break them down into smaller regions and add monitors to each district producing a graph of real time data. You can analyze and compare to other areas around the city or anywhere in the world. see who is producing the most data and use this to your advantage. when breaking news hits the social media will tell you about it. you can use this media generated by web users to get a heads up on the next big thing. Not only do i want to display real time tweets but I also want to display beautiful analytics inside a “geo dashboard” that will let the users of the app really dial in on what they are looking for. I will be using some awesome javascript libraries like Jit and D3. This will be a web app that works on the mobile platform as well. Open is the way to go, once I have a solid prototype the code will be open for anyone to have and mash up free of charge.

Go Go Gadget Code!

My plan is to make this a stand alone web app that can be duplicated anywhere you can copy and paste into a web page. Basically, I would like to make an embeddable widget out of my code that way ANYONE can use it to show their friends the data that they are mining. Originally, I will work with new organizations to perfect the app making it useable by some of the best journalists in the world. I have written all the code in javascript ( yes even the service side of this is written in javascript thanks to node.js )

How would I use this?

Use this tool to show real time data to users based on a given video or story. Use this tool to find some new story and get the most up to date news from the interSocialWebs as it is being published.

Scenario: 1,
Location: London summer of 2012

The legendary olympic open ceremony is about to begin, the whole world is watching. Everyone around the world is waiting to see their country enter. You place a geo target around the stadium and mine the social media coming from that even displaying it side by side your live video stream. Every 15 seconds you check for more tweets and continue to update your feed to the user to see all while displaying an overhead image of the stadium matched against the correct geo coordinates and to give the appearance that the user watching is actually looking and the real stadium.

Scenario 2,
Berlin: September 11 – 16, 2012

Berlin hosts one of the worlds largest air shows. In preparation for this air show you set up geo targets to monitor all social data coming from the air show venues. You begin to notice trends as data starts to come from only certain parts of the trade show. You can use this data to see what was most popular to the users there and write a story or create a video of the particular popular interest.

Scenario: 3,
Location: Iran February 2012

Tehran Is under siege by it’s own people. Twitter has caused a revolution and you want to see what is happening on the ground. Instead of searching twitter for hash tags you can use my geo location search and mine all the social media coming from tehran to get the latest on the ground.

Who are you? Where can I see this live?

If you would like to see this demo for yourself please contact me and I can walk you through it. my skype handle is cole_g and my twitter is @theCole. See my video intro to the mozNewsLab to learn a little more about me. I would really like to speak with other journalists and developers to get their thoughts on this idea.

Read More

One of the things I learned this week is that the mozilla learning lab is lacking developers. i put this post together to try and help the non programmers in the class understand basic and intermediate javascript.

With javascript you can find all of the code in the source (right click view source, or in webkit right click inspect element / view source) , every web page is a mine of code for you to translate.

If you are brand new to javascript start here

This week Christian Heilmann and Jon Resig inspired me to publish all of the source of my #MozNewsLab project to date ( clone my mojo github repo or check out the alpha demo with the twitter feed and map). I also wanted to talk about my ideas / philosophy oh web programming. My hope is that this post can shed some light on how to mine social data and display it. My main purpose of this blog is to advocate openness and to prove that anyone can write awesome javascript. Three vitally important things to keep in mind here: computers do what you tell them, programming is easy, and geeks love to share ( ⌘+C, ⌘+V and git clone are your friends).

computers do what you tell them

computers only listen to “well spoken” instructions. use webkit to debug. javascript is an unforgiving language. mastering debugging is key.

programming is easy

anyone can program javascript. we have so many resources at our fingertips. take advantage of the open web. pick a library. read about it. learn from it. write some code of your own. share and contribute back.

geeks love to share

geeks take the data you give them, save it and then redistribute it to their friends in an API. In my project I am going to be using the following tools to programmatically mine geolocated social media for the web news media:

those are the only tools i need to grab up to date, user generated data and embed them into my own web page. For those of you who are not sure how to easily grab endless data using jquery and json please refer to my recent gist.

please ask me questions in the comments and let me know how i can help you get your prototype up and running

Read More

“An idea that is developed and put into action is more important than an idea that exists only as an idea.” In the sixth century Buddha said the same thing that Aza stressed to us in our first lecture last week. An idea is worthless unless it can be communicated. It all starts with a simple thought.

Throughout the week one slide from Aza’s presentation has stuck with me. The life of a prototype. After fridays optional lecture on data visualization it made sense to create an interactive version of Aza’s slide. Based on the mojo lectures this week I have come up with some advice on how to successfully build a prototype. Below I will merge Aza’s advice on rapid prototyping and Burt’s advice on success.

Follow your passion and come up with an idea

Undoubtedly following your passion will cause you to conjure ideas, this is where it all begins. The first step in a prototype’s life is an idea. Your brain acts as an idea incubator, cradling newborn ideas until they are ready to be released into the wild. The only way to really know if an idea will influence others is to set it free and move on to the next step of a prototypes life.

Write it down and send it to everyone

So you think you have a great idea? Write it down, it is ok if it is a sloppy misspelled email in the middle of the night. Writing it down is you telling yourself that you want to bring this idea to life. By writing it down you are one step closer to making it happen. Share it with your friends and try to build a small community around your idea.

Create a wire frame with your team

Your idea has caught on and you have built a small team from the community you formed by sending out your write up. Now it is time to create a simple wireframe that will show people what your idea may look like. Once you feel comfortable with your wireframe move on to the next step and make something people can “touch”.

Hack out a proof of concept

Just build the thing! In the shortest amount of time possible create a working prototype. Prove to yourself that your idea can work. Once the prototype is complete get it out there for people to play with.

Make a video demo and prepare for feedback

Once you get a video out there it will be easy for people to connect to your idea and find some sort of use for it. Once people start to use your prototype make sure you stay flexible and listen to the users, they will have a ton of feedback so get ready for feature requests and suggestions!

Read More