Earlier this month, my first patch to an open source project was accepted. It was a thrill. In all these years of using open source libraries and software, I have never once given back to the community. I have made my own work open source under the MIT licence and have it hosted on the popular GitHub. I can't wait until my next pull request/submitted patch.
So how did it come around? Well I was reading the documentation on HBase at work, trying to work out whether I could get a description of a table. I found as I was scrolling through the docs that the font size was growing ever bigger.
Like a good citizen I fired up the Apache Jira and created my ticket feeling very proud of myself. It is not the first issue I have raised on an open source project. I am too eager to fire off an issue for someone else to solve. This time however, the project lead thanked me for my bug report but then asked if I had a patch. I thought to myself, who me? You trust me to dive into your project and change the code??
Well of course, that is what open source projects are all about - letting other people contribute, not just free stuff! So I thought, ye I can take a look at this closer and see what the problem is causing the font to get bigger.
I found that some javadocs in the class had some unclosed <code> tags. I looked around at other issues on the project to see how one even would submit a patch. I could see that some resolved ones had the code attached to the ticket itself. I thought this was a bit strange at first, why would you attach the code to the ticket? Surely the source control system would be suited to do this in some form of way.
Anyway, after some googling, I found how I could create the .patch file from the git command line:
git diff > mypatch.patch
I submitted the patch and the project lead thanked me and after some e-mails from a robot that does the automated tests, code qulity checks and build, the ticket was marked as resolved and now the online documentation is fixed!
It gave me a small sense of pride and am looking forward on creating my next patch. I may even try and find one that is more technically challenging.
For the 2013 Central Hall Musical Society's production of West Side Story, I was invited to design and make the website to allow registration, cast audition bookings and ticket sales. I used the Foundation CSS and JavaScript framework along with a jazzy font from Google called Alfa Slab One.
There were 2 main things I added in differently to this site compared to the 2 I had previously developed for the Central Hall Society. The first one was from a design perspective, and the the second was microdata.
CSS3 Transformation Animation
For the teams pictures, I added in a CSS3 transform that titled their heads at an angle, where on hover the angle changed giving a slight spin appearance. This was done with a few CSS declarations.
figure img{
-webkit-transform: rotate(353deg);
-webkit-transition: all 1s ease;
-ms-transform: rotate(353deg);
-ms-transition: all 1s ease;
-o-transform: rotate(353deg);
-o-transition: all 1s ease;
-moz-transform: rotate(353deg);
-moz-transition: all 1s ease;
transform: rotate(353deg);
transition: all 1s ease;
}
figure img:hover {
-webkit-transform: rotate(355deg);
-ms-transform: rotate(355deg);
-o-transform: rotate(355deg);
-moz-transform: rotate(355deg);
transform: rotate(355deg);
}
HTML Microdata
After writing up the markup and adding the CSS to match the design, I looked at exposing the event data to search engines via microdata.
By adding directly to the existing HTML markup, I was able to identify the event type, the performer, the location and the date.
<section class="row" itemprop="event" itemscope itemtype="http://schema.org/TheaterEvent"> <header class="eight columns"> <h6><span itemprop="performer">The <span itemprop="location">University of York</span> Central Hall Musical Society</span> presents</h6> <h1 itemprop="name" style="text-transform:uppercase">West Side Story</h1> </header> <article class="four columns"> <h2>Week 5, Spring Term</h2> <h5 itemprop="startDate" content="2013-02-07">Thursday 7th</h5> <h5>Friday 8th</h5> <h5 itemprop="endDate" content="2013-02-09">Saturday 9th</h5> <h4>February 2013</h4> </article> </section>
When the search engine robots index the page, they should be able to pull out the data and use this to provide more relevant results. Google provide a tool to test the end result.
It was very interesting to see all the types of different things you can markup and expose data for, a list is on the schema.org site.
Last week, Ali and I attended the 2012 Over The Air, a mobile applications themed hackday. It was held at Bletchley Park, home to the National Museum of Computing, among other things.
There was an extremely packed schedule comprising of talks on a whole manner of subjects relating to the mobile web. I managed to attend the talks on QR codes, WebRTC, Facebook Graph API, O2 Labs and the keynotes.
I would have loved to have seen more, however, we had a hack to build.
Ali had an mbed and a GPS/GPRS module that he had used for his solo project. We decided to use the mbed platform as they were at the event with Vodaphone 3G dongles. We created Dude, Where's My Car?
The mbed device, connected via the 3G dongle, sends GPS co-ordinates to the server every few seconds. These appear in the timeline on the website. You can then create a trip by selecting start and stop positions which is then shared with your friends on Facebook using the open graph API. We made actions of going on a trip which had properties including the trip name and geo-location data.
Ali also had a OBD (On Board Diagnostics) interface that connects to a car. Through this device, the mbed could get a number of parameters from the car such as speed, throttle, rpm, engine temperature etc. This data was added to the server along with the GPS and pased through to Facebook wihin the open graph metadata. It was then used to generate averages, minimums and maximums for the car data. All this then appears on your Facebook timeline looking like the example below.
We demo-ed our hack to the judges and audience and ended up winning both the Facebook Open Graph Challenge and the Embedded Hardware Hack Challenge. They loved how we took the real-world action of driving and sharing that with your friends.
