[{"id":106,"title":"Getting Involved in Open Source Projects","text":"\u003cp\u003eEarlier 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 \u003ca href=\"https://github.com/dylan8902/website/blob/master/LICENSE\"\u003eMIT licence\u003c/a\u003e and have it hosted on the popular \u003ca href=\"https://github.com/dylan8902\"\u003eGitHub\u003c/a\u003e. I can't wait until my next pull request/submitted patch.\u003c/p\u003e\r\n\r\n\u003cp\u003eSo how did it come around? Well I was reading the documentation on \u003ca href=\"http://hbase.apache.org/\"\u003eHBase\u003c/a\u003e 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.\u003c/p\u003e\r\n\r\n\u003cp\u003eLike a good citizen I fired up the \u003ca href=\"https://issues.apache.org/jira/browse/HBASE/\"\u003eApache Jira\u003c/a\u003e and created \u003ca href=\"https://issues.apache.org/jira/browse/HBASE-13523\"\u003emy ticket\u003c/a\u003e 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??\u003c/p\u003e\r\n\r\n\u003cp\u003eWell 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.\u003c/p\u003e\r\n\r\n\u003cp\u003eI found that some javadocs in the class had some unclosed \u0026lt;code\u0026gt; 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.\u003c/p\u003e\r\n\r\n\u003cp\u003eAnyway, after some googling, I found how I could create the .patch file from the git command line:\u003c/p\u003e\r\n\r\n\u003cpre\u003egit diff \u003e mypatch.patch\u003c/pre\u003e\r\n\r\n\u003cp\u003eI 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!\u003c/p\u003e\r\n\r\n\u003cp\u003eIt 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.\u003c/p\u003e","created_at":"2015-05-20T21:15:39.000Z","updated_at":"2015-05-20T21:17:01.000Z"},{"id":105,"title":"Train: Bristol to Cogan","text":"\u003cp\u003eSimilar to my \u003ca href=\"https://dyl.anjon.es/blog/58\"\u003eBus: York to Leeds\u003c/a\u003e post back in 2010, I thought I would do a similar analysis for my commute for the last couple of years.\u003c/p\u003e\r\n\u003cp\u003eI took this journey twice each working day for 2 years before moving to Cardiff. I wondered how many miles and hours I have spent on the \u003ca href=\"https://www.firstgreatwestern.co.uk/\" title=\"First Great Western\"\u003etrains\u003c/a\u003e.\u003c/p\u003e\r\n\u003cimg src=\"https://c4.staticflickr.com/8/7510/15310792694_e92cf0f427_b.jpg\" title=\"My Trip\" alt=\"The Map\"\u003e\r\n\u003ch4\u003eDistances\u003c/h4\u003e\r\n\u003ctable\u003e\r\n\u003ctr\u003e\u003ctd\u003eDistance per Journey\u003c/td\u003e\u003ctd\u003e37.3 miles\u003c/td\u003e\u003c/tr\u003e\r\n\u003ctr\u003e\u003ctd\u003eDistance per Day\u003c/td\u003e\u003ctd\u003e74.6 miles\u003c/td\u003e\u003c/tr\u003e\r\n\u003ctr\u003e\u003ctd\u003eTotal Distance\u003c/td\u003e\u003ctd\u003e74.6 miles x 5 days x 90 weeks = 33,570 miles\u003c/td\u003e\u003c/tr\u003e\r\n\u003c/table\u003e\r\n\u003ch4\u003eCost\u003c/h4\u003e\r\n\u003ctable\u003e\r\n\u003ctr\u003e\u003ctd\u003eCost per Ticket\u003c/td\u003e\u003ctd\u003e\u0026#163;12\u003c/td\u003e\u003c/tr\u003e\r\n\u003ctr\u003e\u003ctd\u003eTotal Cost\u003c/td\u003e\u003ctd\u003e\u0026#163;12 x 5 days x 90 weeks = \u0026#163;5,400\u003c/td\u003e\u003c/tr\u003e\r\n\u003ctr\u003e\u003ctd\u003ePetrol Costs\u003c/td\u003e\u003ctd\u003e33,570mi x 35mpg x 134p = \u0026#163;5842.87\u003c/td\u003e\u003c/tr\u003e\r\n\u003c/table\u003e\r\n\u003cp\u003eTaking the train has cost 92% of what it would have cost for fuel alone if I had used a car\u003c/p\u003e\r\n\u003ch4\u003eTime\u003c/h4\u003e\r\n\u003ctable\u003e\r\n\u003ctr\u003e\u003ctd\u003eTime per Journey\u003c/td\u003e\u003ctd\u003e85 minutes\u003c/td\u003e\u003c/tr\u003e\r\n\u003ctr\u003e\u003ctd\u003eTotal Time\u003c/td\u003e\u003ctd\u003e85 mins x twice a day x 5 days x 90 weeks = 53.125 days\u003c/td\u003e\u003c/tr\u003e\r\n\u003c/table\u003e\r\n\u003cp\u003eFinal percentage for you: the time I have spent on the train is equivalent to 7.27\u0026#37; of the 2 whole years!\u003c/p\u003e","created_at":"2014-12-02T21:30:57.000Z","updated_at":"2014-12-31T09:55:47.000Z"},{"id":104,"title":"HTML Microdata - Event Markup","text":"\u003cp\u003eFor 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 \u003ca href=\"http://foundation.zurb.com/\" title=\"Zurb Foundation site\" target=\"_blank\"\u003eFoundation CSS and JavaScript framework\u003c/a\u003e along with a jazzy font from Google called \u003ca href=\"http://www.google.com/fonts/specimen/Alfa+Slab+One\" title=\"Google Fonts\" target=\"_blank\"\u003eAlfa Slab One\u003c/a\u003e.\u003c/p\u003e\r\n\r\n\u003cp\u003eThere 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.\u003c/p\u003e\r\n\r\n\u003ch5\u003eCSS3 Transformation Animation\u003c/h5\u003e\r\n\u003cp\u003eFor 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.\u003c/p\u003e\r\n\r\n\u003cpre\u003e\r\nfigure img{\r\n  -webkit-transform: rotate(353deg);\r\n  -webkit-transition: all 1s ease;\r\n  -ms-transform: rotate(353deg);\r\n  -ms-transition: all 1s ease;\r\n  -o-transform: rotate(353deg);\r\n  -o-transition: all 1s ease;\r\n  -moz-transform: rotate(353deg);\r\n  -moz-transition: all 1s ease;\r\n  transform: rotate(353deg);\r\n  transition: all 1s ease;\r\n}\r\n\r\nfigure img:hover {\r\n  -webkit-transform: rotate(355deg);\r\n  -ms-transform: rotate(355deg);\r\n  -o-transform: rotate(355deg);\r\n  -moz-transform: rotate(355deg);\r\n  transform: rotate(355deg);\r\n}\r\n\u003c/pre\u003e\r\n\r\n\u003ch5\u003eHTML Microdata\u003c/h5\u003e\r\n\u003cp\u003eAfter writing up the markup and adding the CSS to match the design, I looked at exposing the event data to search engines via \u003ca href=\"http://en.wikipedia.org/wiki/Microdata_(HTML)\" title=\"Wikipedia\" target=\"_blank\"\u003emicrodata\u003c/a\u003e.\u003c/p\u003e\r\n\u003cp\u003eBy adding directly to the existing HTML markup, I was able to identify the event type, the performer, the location and the date.\u003c/p\u003e\r\n\r\n\u003cpre\u003e\r\n\u0026lt;section class=\u0026quot;row\u0026quot; itemprop=\u0026quot;event\u0026quot; itemscope itemtype=\u0026quot;http://schema.org/TheaterEvent\u0026quot;\u0026gt;\u003cbr/\u003e\t\u0026lt;header class=\u0026quot;eight columns\u0026quot;\u0026gt;\u003cbr/\u003e\t\t\u0026lt;h6\u0026gt;\u0026lt;span itemprop=\u0026quot;performer\u0026quot;\u0026gt;The \u0026lt;span itemprop=\u0026quot;location\u0026quot;\u0026gt;University of York\u0026lt;/span\u0026gt; Central Hall Musical Society\u0026lt;/span\u0026gt; presents\u0026lt;/h6\u0026gt;\u003cbr/\u003e\t\t\u0026lt;h1 itemprop=\u0026quot;name\u0026quot; style=\u0026quot;text-transform:uppercase\u0026quot;\u0026gt;West Side Story\u0026lt;/h1\u0026gt;\u003cbr/\u003e\t\u0026lt;/header\u0026gt;\u003cbr/\u003e\t\u0026lt;article class=\u0026quot;four columns\u0026quot;\u0026gt;\u003cbr/\u003e\t\t\u0026lt;h2\u0026gt;Week 5, Spring Term\u0026lt;/h2\u0026gt;\u003cbr/\u003e\t\t\u0026lt;h5 itemprop=\u0026quot;startDate\u0026quot; content=\u0026quot;2013-02-07\u0026quot;\u0026gt;Thursday 7th\u0026lt;/h5\u0026gt;\u003cbr/\u003e\t\t\u0026lt;h5\u0026gt;Friday 8th\u0026lt;/h5\u0026gt;\u003cbr/\u003e\t\t\u0026lt;h5 itemprop=\u0026quot;endDate\u0026quot; content=\u0026quot;2013-02-09\u0026quot;\u0026gt;Saturday 9th\u0026lt;/h5\u0026gt;\u003cbr/\u003e\t\t\u0026lt;h4\u0026gt;February 2013\u0026lt;/h4\u0026gt;\u003cbr/\u003e\t\u0026lt;/article\u0026gt;\u003cbr/\u003e\u0026lt;/section\u0026gt;\r\n\u003c/pre\u003e\r\n\r\n\u003cp\u003eWhen 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 \u003ca href=\"http://www.google.com/webmasters/tools/richsnippets\" target=\"_blank\"\u003ea tool\u003c/a\u003e to test the end result.\u003c/p\u003e\r\n\r\n\u003cp\u003e\u003cimg src=\"https://farm3.staticflickr.com/2823/12031955923_a6e85e90ec_o.png\" title=\"Result in Google Search\" alt=\"Search result as it appears in Google with event date and location\"\u003e\u003c/p\u003e\r\n\r\n\u003cp\u003eIt was very interesting to see all the types of different things you can markup and expose data for, \u003ca href=\"http://schema.org/docs/schemas.html\" target=\"_blank\" title=\"schema.org Schemas\"\u003ea list is on the schema.org site\u003c/a\u003e.","created_at":"2014-07-05T12:35:20.000Z","updated_at":"2014-09-19T16:34:27.000Z"},{"id":103,"title":"The Spoonheads are in my Wi-Fi","text":"\u003cp\u003e\u003ca href=\"https://dyl.anjon.es/photos/8605994008\"\u003e\u003cimg src=\"https://farm9.staticflickr.com/8404/8605994008_95e1c49428_o.png\" alt=\"Wi-Fi\" title=\"Alien SSID\"\u003e\u003c/a\u003e\u003c/p\u003e\r\n\u003cp\u003eAs seen in last nights \u003ca href=\"https://dyl.anjon.es/episodes/b01rryzz\"\u003eDr Who Episode\u003c/a\u003e, a mysterious Wi-Fi hotspot has appeared with an SSID of \"┓┏ 凵 =╱⊿┌┬┐\"\u003c/p\u003e","created_at":"2013-03-31T11:09:41.000Z","updated_at":"2013-03-31T11:09:41.000Z"},{"id":102,"title":"Over The Air","text":"\u003cp\u003eLast week, \u003ca href=\"http://alibros.co.uk/\" title=\"Ali's Website\" rel=\"friend\"\u003eAli\u003c/a\u003e and I attended the 2012 \u003ca href=\"http://overtheair.org/blog/\" title=\"Over The Air Blog\"\u003eOver The Air\u003c/a\u003e, a mobile applications themed hackday. It was held at \u003ca href=\"http://www.bletchleypark.org.uk/\" title=\"Bletchey Park Website\"\u003eBletchley Park\u003c/a\u003e, home to the National Museum of Computing, among other things.\u003c/p\u003e\r\n\u003cp\u003eThere was an extremely packed \u003ca href=\"http://lanyrd.com/2012/over-the-air/schedule/\" title=\"Lanyrd\"\u003eschedule\u003c/a\u003e comprising of talks on a whole manner of subjects relating to the mobile web. I managed to attend the talks on \u003ca href=\"http://lanyrd.com/2012/over-the-air/srymg/\" title=\"Lanyrd\"\u003eQR codes\u003c/a\u003e, \u003ca href=\"http://lanyrd.com/2012/over-the-air/stkmp/\" title=\"Lanyrd\"\u003eWebRTC\u003c/a\u003e, \u003ca href=\"http://lanyrd.com/2012/over-the-air/stcqp/\" title=\"Lanyrd\"\u003eFacebook Graph API\u003c/a\u003e, \u003ca href=\"http://lanyrd.com/2012/over-the-air/stcqq/\" title=\"Lanyrd\"\u003eO2 Labs\u003c/a\u003e and the keynotes.\u003c/p\u003e\r\n\u003cp\u003eI would have loved to have seen more, however, we had a hack to build.\u003c/p\u003e\r\n\u003cp\u003eAli 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 \u003ca href=\"http://dudewheresmycar.me\"\u003eDude, Where's My Car?\u003c/a\u003e\u003c/p\u003e\r\n\u003cp\u003eThe 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.\u003c/p\u003e\r\n\u003cp\u003eAli 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.\u003c/p\u003e\r\n\u003cp\u003e\u003cimg src=\"https://farm8.staticflickr.com/7241/7357821294_edcd24ae5b_o.jpg\" alt=\"Facebook Timeline Post\" title=\"Timeline\"\u003e\u003c/p\u003e\r\n\u003cp\u003eWe 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.\u003c/p\u003e","created_at":"2012-06-10T15:53:08.000Z","updated_at":"2012-06-10T15:53:08.000Z"}]