eoghanobrien-blog - Tumblr blog

[eoghanobrien-blog]

Thoughts on Panic's Statusboard

1. Multiple Boards

I think this is a must have, holy shit, killer feature. It would be awesome to have the ability to have a specific board for work, personal projects/websites, travel, gaming, server status; the possibilities are endless. The best method of switching between boards is up for debate, I'd like to see a two or three finger swip, something simple anyway. Also, sharing entire boards would be a fantastic feature!

2. Launchpad for Widgets

So, I've been thinking about the way custom widgets are currently available in Statusboard. I think it could be easier to add your custom widgets back on to the board after removing them. Currently, we have a list of recent URLs, which is very handy but it would be even better if we had a launchpad style interface to quickly add our favorites back on to the board. Just a thought.

3. More Default Widgets

The Bar/Line Charts are freaking beautiful looking and tables look great too. I'd like to see Pie and Doughnut charts in there by default too and maybe some other options for progress indicators. I wish there was a user configurable Countdown/up widget too, where you could set a date and time or arbitrary number and watch them update in real time. It would be really cool if you could set the value via a URL and watch as your daily revenue increased on your website. It's arguable that we can do all this with custom code anyway but it wouldn't be as beautifully uniform without a good amount of work. My favourite part of making new widgets/panels for Statusboard is how quickly I can bang them up and have them looking great. 

4. Swipe to switch view on Custom/Graph/Table Widgets

I really like the built in Mail widget, it shows valuable information in nicely designed graphs. The killer feature though, in my opinion, is that you can swipe to reveal more graphs. I'd love to see this happen with custom graph/table widgets. I have a few graphs related to Google Analytics data and I'd like to be able swipe through each one in the same panel rather than having separate panels for each one.

5. Awareness of Dimension

DIY panels currently have no easy way for your web page to change along with the Status Board size or orientation. Luckily, the Panic dev's are aware of this and a fix will be implemented in the future. Thanks Panic!

6. Push rather than poll

Okay, this would be a difficult one, it would probably mean each board/panel would need it's own URL. It would be really cool to be able to call a Statusboard or panel URL every time something happens on your website rather than Statusboard calling your custom URL every minute or two. One of the more thrilling payoffs with Statusboard is when you see something update with that nice animation, a graph line climbing higher for example, if this happened more often I'd probably crap myself with excitement :D

Okay, so I'm a big nerd and I like data visualizations, so what, big whoop, wanna fight about it. These points are just food for thought for anyone who gets the same kick out of this app as I do. If you have any other ideas, why not let me know in the comments.

[eoghanobrien-blog]

Asana Tasks Per User in StatusBoard

I've become a little bit addicted to creating custom widgets for Panic's Statusboard app. I created my first table widget to show Asana projects last week, and over the weekend, I got a chance to play around a bit more with a couple of Google Analytics panels. So last night, I took another look at Asana.

I decided a bar graph would be my next custom widget. I wanted to color code each bar so that it was somewhat obvious which type of task it was: green = done, orange = past due, yellow = current/to do. I'm still not sure whether or not to show tasks that are past due as current tasks or not. At the moment, there's a solid distinction between each of the 3 states, no task can be in more than one state.

I used getUsers() to retrieve a list of team members, and then I hacked up my own version of getTasksByFilter() to list all tasks including completed and due_on fields. I did this by adding an $opt_fields parameter to which you can pass a comma separated list of optional fields.

<?php public function getTasksByFilter( $filter = array( "assignee" => "", "project" => "", "workspace" => "" ), $opt_fields = "" ) { $opt_fields = ($opt_fields != "") ? "&opt_fields={$opt_fields}" : ""; $url = ""; $filter = array_merge( array( "assignee" => "", "project" => "", "workspace" => "" ), $filter ); $url .= $filter["assignee"] != "" ? "&assignee={$filter["assignee"]}" : ""; $url .= $filter["project"] != "" ? "&project={$filter["project"]}" : ""; $url .= $filter["workspace"] != "" ? "&workspace={$filter["workspace"]}" : ""; if (strlen($url) { $url = "?" . substr($url, 1); } if (strlen($url) > && !empty($opt_fields)) { $url = str_replace('&', '?', $opt_fields); } return $this->askAsana($this->taskUrl . $url . $opt_fields); }

I've created a GitHub repo for anyone who would like to try this out themselves or use it as a starting point for their own panel.

Here's how it looks. I've blurred out the names of my team members.

[eoghanobrien-blog]

Google Analytics for Statusboard with PHP

The dependencies for ZF are many and the project size is larger than I would like but for a quick "get the job done" type of project like a statusboard widget, I wasn't too peeved. I drove on.

The ZF GData API is actually pretty nice, the hardest part was finding the bloody Profile ID in my GA account. So, here's a helping hand, from the 'Audience Overview' screen, click 'Admin' and under 'Profiles' click the one you want to fetch stats for. On the next screen, click 'Profile Settings' and you should see the 'Profile ID'.

Armed with our Profile ID, we're going to dive into some PHP code. Firstly, we're not going to do anything fancy with OAuth here, basic ClientLogin Auth for us. You should set up some variables for email/password and fill them in with the relevant values. Next we need to create a new GData_ClientLogin object, we pass our email, password and the service we need to use and store it in a variable $client. Next, we create our GData_Analytics object and pass in our GData_ClientLogin object as a dependency.

<?php $email = 'YOUR EMAIL'; $password = 'YOUR PASSWORD'; $profileID = 'YOUR PROFILE ID'; $service = Zend_Gdata_Analytics::AUTH_SERVICE_NAME; $client = Zend_Gdata_ClientLogin::getHttpClient($email, $password, $service); $analytics = new Zend_Gdata_Analytics($client);

The meat of the code is in the Data Query, we set up a new query using the, you guessed it, newDataQuery() method. The interface is chainable so we just stacking methods on as we go.

Fetching Data

For my first widget, I wanted to created a graph of the hits my blog was getting for the last 7 days, so I set up the following two variables for start date and end date, then decided on the metrics I wanted to graph; All Hits, New Visitors, Unique Visitors. These seemed like good, informative metrics to me :) feel free to dispute that in the comments.

<?php $startDate = strtotime('-6 days'); $endDate = strtotime('today'); $query = $analytics->newDataQuery() ->setProfileId($profileID) ->addMetric(Zend_Gdata_Analytics_DataQuery::METRIC_VISITS) ->addMetric(Zend_Gdata_Analytics_DataQuery::METRIC_NEW_VISITS) ->addMetric(Zend_Gdata_Analytics_DataQuery::METRIC_VISITORS) ->addDimension(Zend_Gdata_Analytics_DataQuery::DIMENSION_DAY) ->setStartDate(date('Y-m-d', $startDate)) ->setEndDate(date('Y-m-d', $endDate)) ->setMaxResults(10); // Will only ever be 7

The above code will query the GA API and for Visits, New Visits and Visitors grouped by Day from 6 days ago until today, with a maximum of 10 results, in reality only 7 results will be returned.

Formatting the data

The next problem to solve is formatting the data from GA into a Statusboard compatible graph. The API really is quite good and objects are very well defined so just jump in and take a look at the code to figure out what's going on here, I'm just going to add each row to our datapoint array. I loop through the results, format the date labels and grab the visit counts for each metric and plug them into my formatted array.

<?php $graphVisits = array(); $graphNewVisits = array(); $graphVisitors = array(); foreach($result as $k => $row) { if ($k === 0) { $date = date('jS F', $startDate); } elseif ($k === $days) { $date = date('jS F', $endDate); } else { $date = date('jS F', strtotime(($k-6).' days')); } $graphVisits[] = array( 'title' => $date, 'value' => $row->getMetric(Zend_Gdata_Analytics_DataQuery::METRIC_VISITS)->getValue() ); $graphNewVisits[] = array( 'title' => $date, 'value' => $row->getMetric(Zend_Gdata_Analytics_DataQuery::METRIC_NEW_VISITS)->getValue() ); $graphVisitors[] = array( 'title' => $date, 'value' => $row->getMetric(Zend_Gdata_Analytics_DataQuery::METRIC_VISITORS)->getValue() ); }

All that's left to do here is build our graph array and convert it to JSON

<?php $graph = array( "graph" => array( "title" => "Blog | Visitors This Week", "type" => "line", "total" => true, "refreshEveryNSeconds" => 60, "xAxis" => array( "showEveryLabel" => true, "minValue" => date('jS F', $startDate), "maxValue" => date('jS F', $endDate) ), "datasequences" => array( array( "title" => "Total Hits", "datapoints" => $graphVisits, "color" => "green" ), array( "title" => "New", "datapoints" => $graphNewVisits, "color" => "orange" ), array( "title" => "Unique", "datapoints" => $graphVisitors, "color" => "yellow" ) ) ) ); header('Content-Type: application/json'); exit(json_encode($graph/*, JSON_PRETTY_PRINT*/)); // If you have PHP v5.4 you can output JSON in a nicely formatted, easy to read way.

Github Repository

That's pretty much all there is to it, I've created a Github repo that includes this graph and another for showing pageviews I've placed some screenshots below to give you an idea of how this looks, feel free to download and play with the code. I hope it helps you to build your own custom panels for Statusboard. If you use my code as a starting block, I'd love to see what you come up with so don't be shy, post a link in the comments.

Screenshots

[eoghanobrien-blog]

Tweaking.

I’ve made a few quick tweaks today, just to bring this little blog up to date. I’ve updated jQuery to version 1.9.1, Twitter Bootstrap to version 2.3.2 and I’ve set up Font Awesome version 3.1.1.

I’m hosting the static assets on my own server, one issue I found is that Firefox won’t server the Font Awesome font files, if you want to do that you need to add the following to your hosts .htaccess file.

<FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>

In the new bootstrap, you can set a container for tooltips, this was important for me as it especially affects the .btn-group in the .navbar. When you hover over the button without a container set, Bootstrap will inject the tooltip html after the button its called from. The button styles get a bit messed up because it applies rules to the first and last child elements of .btn-group so rounded corners and borders look funny. Luckily however, the fix is simple, just set a container option when calling the tooltip plugin like so.

$('selector').tooltip({container: 'body'})

So that’s it, just a short update (more to remind myself than anything :)

[eoghanobrien-blog]

Asana Projects in StatusBoard

UPDATE: I've created a new repo on GitHub for this, go grab it here Asana Projects Statusboard.

A couple of weeks ago, Panic, the developers of amazing Mac and iOS apps such as Coda and Transmit, released a new app for the iPad called StatusBoard. The app beautifully displays information such as the time, the weather, your tweets, any RSS, your calendar events, stats about your email such as unread counts, frequency by day/week and many more options.

However, the real cool factor is in its extensibility. The very clever developers at Panic have built in allowances for nerds like me to create custom Table and Graph widgets as well as custom HTML widgets supported by Javascript/CSS.

I had some spare time this weekend, so I decided to integrate StatusBoard with my favourite free project management app Asana. I cloned a copy of this github repo by Ajimix and pulled together a simple PHP script.

In an effort to cut down on requests to the Asana API, I’m hardcoding the workspace that I want to pull projects from.

<?php // Define Asana API Key define('ASANA_API_KEY', 'ADD YOUR API TOKEN'); define('ASANA_WORKSPACE_ID', 'ADD YOUR WORKSPACE ID'); // Include Asana API Class require_once('path/to/asana.php'); // Initialize Asana API Class $asana = new Asana(ASANA_API_KEY); // Get the projects $projects = json_decode($asana->getProjectsInWorkspace(ASANA_WORKSPACE_ID)); if (!is_object($projects) || empty($projects->data)) { die('No projects available.'); }

The wrapper class I cloned to work with the Asana API has one minor flaw in terms of performance. The method offered by the wrapper, getProjectTasks() will only return the id and name values for the project. I also needed the completed value so I could get a quick overview on the progress of my active projects by calculating the ratio of completed/total tasks. In order to get the completed tasks, I needed to loop through the results of getProjectTasks() and fetch each task object by its id with getTask(). Once I had a full Task object, I counted the total number of tasks that were completed in each project.

Unfortunately, as I mentioned before, this approach is a resource hog. One project with 50 tasks would mean a minimum of 52 requests. Since StatusBoard refreshes its panels every 2 minutes, this would mean hitting up the API way too much; I’d likely have my IP banned if I kept that up.

My solution was to hack the following method into the Asana API wrapper from Ajimix:

<?php ... public function getTasksByProjectId($projectId, $opt_fields = ""){ $opt_fields = ($opt_fields != "")?"?opt_fields={$opt_fields}":""; return $this->askAsana($this->projectsUrl."/{$projectId}/tasks{$opt_fields}"); } ...

The code above is quite simple but this additon will cut our requests down to a minimum of 2 requests, with only a single call per project.

<?php $data = array(); foreach ($projects->data as $project) { $completedCount = 0; $tasks = json_decode($asana->getTasksByProjectId($project->id, 'completed')); if (!is_object($tasks) || empty($tasks->data)) { continue; } foreach ($tasks->data as $task) { $completedCount += (int) $task->completed; } $data[$project->id] = array( 'name' => $project->name, 'completedCount' => $completedCount, 'totalCount' => count($tasks->data) ); }

With the data formatted and ready to work with, I could start working on displaying the Table style that Panic have provided with StatusBoard. For more information on creating a Table panel see here.

<table id="projects"> <?php foreach ($data as $project): ?> <tr> <td class="projectName"> <?php echo $project['name']; ?> </td> <td class="projectVersion noresize"> <?php echo sprintf('%s/%s', $project['completedCount'], $project['totalCount']); ?> </td> <td class="projectsBars"></td> </tr> <?php endforeach; ?> </table>

Next up, I needed to figure out how to display the built in 8 bar status indicator dynamically. There are many different ways you could do this; here’s a quick script I cobbled together.

<?php $c = (int) $project['completedCount']; $t = (int) $project['totalCount']; if ($t > 0): ?> <?php $bars = range(8, $t * 8, $t); sort($bars, SORT_NUMERIC); foreach($bars as $k => $v): if ($v <= $c * 8): ?> <div class="barSegment value<?php echo $k + 1; ?>"></div> <?php else: ?> <div class="barSegment"></div> <?php endif; endforeach; endif; ?>

You can get all this code on my public github gist.

By now, you’re probably wondering how it turned out so, here’s a screenshot. I hope this quick tutorial helps you on your way to making awesome panels for StatusBoard! Have fun.

[eoghanobrien-blog]

The Fota Revamp Post.

In 2010, our work on the Fota website provided two Golden Spiders, Best Travel & Tourism Website and Grand Prix - Best Overall Website. The win was a huge motivator for our team and for Fota themselves. When the time came to refresh the website, to their credit, Fota went all out. They wanted to revamp the site with a new look, new content and new ideas. We graciously accepted the challenge.

Preparation

We wanted to get the design right, and at StudioForty9 we are all web developers, bar Niamh on content generation and SEO. I dabble in web design, but I've never had any professional tutoring. So, we tasked our good friends at Doodle to design the new Fota website. It had to be fresh and fun but also clean and clear; we wire-framed and wrestled over the most minute details of how we wanted to lay the site out and organize the content and handed our work over to Chris from Doodle. Chris has an excellent eye for fun details and was truly the perfect fit for this project. We've worked on more than 10 websites in the last year, so by now we're very comfortable and trusting of the end result.

The Grid

In our earliest meetings with Fota we had spoken about showing the most important site pages/features on the homepage. We wanted to show important content to visitors as soon as they arrive. The issue with that is, Fota have a lot of important content. To solve this issue, we came up with what we called "The Grid". With the Grid, we were able to show multiple large icons which would be visually attractive, instantly recognizable and could give visitors a friendly sitemap of what they could do on the site.

When a visitor clicks on any item in the Grid, a panel pops up showing more content and leading them through to more content in that section. The Grid functionality turned out to be the saving grace of this homepage; with so much content, we couldn't demote any of it "below the fold" as you with many other sites. You have to admit, the design looks fantastic too.

Fotabook

Fotabook is the natural progression of what we did for Fota in 2009. We were fetching Flickr and Twitter feeds and promoting the Park on multiple social networks, some now defunct. I watched this video in February and decided that if we were to have any chance of winning another Golden Spider award, we would need to move the social media integration on leaps and bounds.

We started looking around at other wildlife parks, zoos and any website that had interesting or different approaches to social media. We found that some sites were grabbing tweets related to a news topic to generate a conversation rather than allowing comments on their site. We liked this idea. However, I thought it was a little too simple. The idea was good, but it wasn't something that would grab any headlines. Instead, we would allow conversation about any aspect of Fota Wildlife Park. I used the Twitter Search API to find tweets related to the park or that use the special fotabook hashtag, I took the Official Fota Wildlife Facebook page RSS feed, found mentions of "Fota Wildlife Park" on Flickr and YouTube, and compiled them all in one place on the website.

Fotabook was taking shape. We decided on the layout (see above) and added an interactive "Like" interface where visitors could vote up their favourite photos, videos or posts, using the "Wild about it" button, and we started the design work with Chris. He designed a pinboard motif that worked brilliantly, and I started work on developing a Pinterest-like layout for the posts where each post would fit snugly beneath the post above it. Take a look at jQuery Masonry for an example of how to do this yourself. I also added an "infinite scroll" feature where posts load in as you move down the page. We think this feature is going to be one of the most popular parts of the new website, and I can't wait to see what gets voted to the top!

Content Distribution

The Fota Wildlife website is absolutely huge. The homepage load size is 1.3MB. In order to keep visitors from just leaving the website because of slow loading times, we implemented a Content Distribution Network (CDN) using CloudFlare. The setup is straight forward, price is affordable and the results are astounding. Take a look at this screenshot from pingdom, less than 1 second to load.

What's left?

Before we close this project off, we still need to complete the targeted languages sites; these are one page microsites with specific content in French, Spanish, German and Chinese (more to follow in time). We are about 95% complete with this feature and will launch it very soon. We also have a mobile specific version for iPhone and Android visitors, which will make it easier to book tickets and find information on the move.

Conclusion

I've really learned a lot from my 6 months spent working on this project. It was fun and exciting at times and exhausting at others. There was an incredible amount of time and effort put into this project from all sides, but everyone is extremely proud of what was achieved. I hope you like what we've built.

[eoghanobrien-blog]

Facebook Open Graph with Tumblr.

With the Facebook Open Graph, you can define actions and objects in the meta data of a web page. When an action is issued by a Facebook user, a request is made to the Graph API endpoint: /me/action:object=ObjectURL, Facebook will crawl the webpage specified at Object URL and parse the meta data related to that page. The data is represented in the news feed as: "John Smith [action] [object]" or "John Smith [ate] [a shoe]".

Why?

"Like" has become somewhat abstract with the success of Facebook; you don't always "like" a book, but you may have read a book. Open Graph gives you more specificity over what you are actually doing when you interact with a page on the web through Facebook.

Open Graph has quite a few interesting use cases for marketing your business. It asks you to think about your content in terms of what is considered social and how you can make that content sharable for your audience. This will inevitably open your content up to a wider audience via Facebook.

"Open Graphing" your content forces you to describe the action a person will take upon interacting with your content. On YouTube for example, you "watch" "videos". [watch] is your action, [videos] your object. You can set up as many actions and objects as your Facebook Application requires using the App control panel. However, you must be set up as a developer on Facebook, and Actions and Objects are subject to a screening process by Facebook staff.

Personally, I think the real reason for companies to use Open Graph is to help users answer the question "How can I interact with this website?" "John read Integrating the Facebook Open Graph into your Tumblr Blog on blog.eoghanobrien.com" immediately cements in people's minds that the primary focus of blog.eoghanobrien.com is for people to read my blog posts. If you saw "Mary watched Flying Monkeys on YouTube" or "Cornelius listened to Smurfhillbilly Joe on SoundHound" in your Facebook feed, chances are you'll follow the link faster than you would for "Mary liked Flying Monkeys on YouTube" or "Cornelius liked Smurfhillbilly Joe on SoundHound". It's that little hint about the type of content and what you can do with it which makes it interesting.

Enough of your opinions, how do I do this?

Okay, you'll need some working knowledge of HTML and Javascript to accomplish this, but it's pretty simple. Here are the steps:

You need to set up as a developer on Facebook and create a new app. Make it the name of your website and select "Website" as the "how this app integrates with Facebook" setting. Add your Tumblr URL.

Upload the 75x75 and 16x16 pixel app icons. When you go to submit your Open Graph actions and objects later, it will ask you to do this.

Add your app namespace.

Locate you App ID/Key.

Drop the following tags into your Tumblr HTML template. Replace the [Your App ID] with your actual App ID and the [Your App Icon] with the URL for your App Icon.

Your Tumblr Template

<!DOCTYPE html> <html dir="ltr" lang="en-US" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml"> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <meta property="fb:app_id" content="[Your App ID]" /> <meta property="og:image" content="[Your App Icon]" /> <meta property="og:type" content="article" /> <meta property="og:url" content="{Permalink}" /> <meta property="og:description" content="{MetaDescription}" /> {block:IndexPage} <meta property="og:title" content="{Title}" /> {/block:IndexPage} {block:PermalinkPage} <meta property="og:title" content="{block:PostTitle}{PostTitle}{/block:PostTitle}" /> {/block:PermalinkPage} <!-- Your remaining <head> tags should be in here too --> </head> <body> <!-- Your Tumblr Template and HTML tags should be in here --> <!-- The #fb-root element and javascript should go at the bottom of your code --> <div id="fb-root"></div> <script type="text/javascript"> window.fbAsyncInit = function() { FB.init({ appId: '[Your APP ID]', // App ID status: true, // check login status cookie: true, // enable cookies to allow the server to access the session xfbml: true; // parse XFBML }); }; // Load the SDK Asynchronously (function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); </script> </body> </html>

The Share Button

Once you have your template tags set up, the next thing to do is add a button so that somebody can actually interact with your website. Add this at the end of your post for best results.

<div class="fb-like" data-href="{Permalink}" data-send="false" data-width="450" data-show-faces="true" data-action="recommend"></div>

With that, you should be all hooked up! You can check out the activity social plugin to see what people are doing on your blog. If you have problems, leave a comment below. You can check out a demo of how my Share button works below.

[eoghanobrien-blog]

Moving hosting accounts.

This is simply unacceptable. I've had to deal with cleaning out the junk and spam caused by the attacks in my limited spare time. The worst of it was when some serious spamming totally took down my old eoghanobrien.com site from Google.

I quickly began my search for a new hosting company with a better anti-hack record. Blacknight are a good Irish hosting company and I decided to put my smaller websites there but I also needed something for bigger, more complicated sites where I could use version control and other Shell features via SSH.

Eventually, my search led me to Medialayer. Based in New York, they have a very affordable introductory hosting package with only a few sites hosted on their shared server. The support service is excellent and they were quick to add some very handy features to my account, such as Mercurial and Git binaries. The main factor for moving to Medialayer though; is the knowledge that it is secure and if I want any additional shell command functionality, I can go straight to them and they'll handle all the server admin.

[eoghanobrien-blog]

Scripting Statistics.

In this example, I'll be creating a column chart (a vertical bar chart) to show which days of the week the keyphrase "manchester united" is mentioned on a myriad of social networks, I'll show how I get that data in a future post. For now, we just need to load the corechart visualization package and create a function in javascript to create and customize the chart.

The function needs to create a new DataTable object, which consists of columns and rows necessary to create the visualization, for my example, I extracted some data from a social network content aggregator, I'll do a detailed blog post on that in the future. Here's my javascript snippet, you can just throw this example into your page and see how it works for yourself. You can take the entire example from my gist page here: https://gist.github.com/1872482

<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawDayColumnChart); function drawDayColumnChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Day of the Week'); data.addColumn('number', 'Mentions per day'); data.addRows([ ['Sunday', 115], ['Monday', 182], ['Tuesday', 57], ['Wednesday', 94], ['Thursday', 54], ['Friday', 65], ['Saturday', 97] ]); var options = { width: 400, height: 300, title: 'What day of the week do people talk about "manchester united" most?', hAxis: { title: 'Day', textStyle: {fontSize: 11}, showTextEvery: 3 }, vAxis: {title: 'Mentions'}, fontName: 'Helvetica Neue' }; var chart = new google.visualization.ColumnChart(document.getElementById('chart-div-days')); chart.draw(data, options); } </script>

Along with the data, I'm passing in a couple of options to personalize the graph output. I set a width and height, the title of the horizontal axis, a font size attribute and an instruction to only show a label for every 3rd data column. I'm also setting the title of the vertical axis and an overall font face.

Once all the configuration options are set and the data is passed into the visualization, you need to make sure that they can be rendered on the page. Notice the last two lines of our drawDayColumnChart function

var chart = new google.visualization.ColumnChart(document.getElementById('chart-div-days')); chart.draw(data, options);

We're telling the script that we have an element with ID chart-div-days, as long as we have a matching element in our html document, the chart should render as expected.

There are a truck load of options available to configure the appearance of your graph. I'll be writing more about scripting statistics in the future as this post will be the first in a short series of web development posts leading up to an interesting little social statistics mash up, so stay tuned.

[eoghanobrien-blog]

Re-alignment.

As you can probably tell, I've realigned the design of my blog. I've added some colour and personality which was clearly lacking, and I've begun building on top of a extensible framework using Twitter Bootstrap. Twitter Bootstrap provides a lot of pre-defined CSS hooks for grid layouts, typography, code, tables, forms, alerts, navigation, buttons and a number of great jasvascript plugins to speed up front-end development of websites.

I'm calling this a re-align and not a re-design. I've gone with basically the same layout as I had before, but I've added a couple of useful features. For example, you can now search the site, choose a random post, view the archive of posts and find me on other social networks from the top navigation bar, which for the sake of user experience is "sticky", meaning that it's fixed to the top of the browser window for easy access.

The main reason for this re-alignment however, is to allow for more code related posts, tutorials, snippets of PHP etc. Let me give you an example of how this will work.

<?php echo 'Hello World'; ?>

The above code will automatically be output with line numbers and code syntax highlighting to allow for clearer code samples on this blog. Happy days! If you're reading this post, and you don't have a web development background, you might be thinking,  "Big whoop!". Well, I'm a nerd for this kind of thing so its for me!

Anyway, I've done absolutely no cross-browser testing so if you find any display problems, let me know in the comments :)

[eoghanobrien-blog]

3 Productivity Tips.

1. Stop reading your Facebook news feed!

Instead of starting your morning checking E-mail, Facebook, Twitter or any other social network, make a list of tasks you need to accomplish, mark their priority and complexity, and then try to figure out how much time each will take. Then start “picking the low hanging fruit,” knock out the tasks that can be done in 5, 10, 15 or 30 minutes; then move on to the bigger ones. By the time you’ve moved on to the bigger tasks, you’ll already be in a productive mood.

2. Break down daunting projects.

Have you ever had a project, that on first review, looks so huge that it’s hard to even find a place to start. I’ve just started work on an absolutely massive redevelopment for the website of a local, well-known tourist attraction. There are multiple different website designs for different devices and languages etc, custom online booking systems, social network integration, complete content restructuring and a very complicated desktop design. At first glance, this project looked like a 6 month project. I’ll be working on all aspects of this project (bar the design proofs) on my own. I’ve found that breaking each section down into sub-projects with task lists, milestones and wireframes of their own drastically changed my outlook on the project and made it easier to accurately estimate the amount of time needed.

3. Stop making excuses.

Its very easy to make excuses about why you’re not going to work on a task. For example, I find it hardest to start working on a new task toward the end of the day. If it’s 5pm or 5:30pm, I’m pretty much useless. In order to stick to my new years resolution for being more productive at work, I’ve started looking for things to do, finding emails and old low priority tasks in our project management app.

[eoghanobrien-blog]

Checking in.

I met her at the Airport, dressed somewhat fancy, with a bouquet of flowers to greet her at Cork arrivals. She actually got in early and wasn’t crazy tired. We had lunch at Bodega and got caught up on everything. We’ve been around to see the family, and Kristin got to spend time with my nieces Clíodhna and Sinéad, as well as introduce beer pong to my brother and sister-in-law.

We’ve been busy over the last 2 weeks too; we’re both working days and evenings as I try to get a freelance job finished, and she gets through her copy editing work. We’re looking forward to having some time in the evenings to spend on leisure time.

We’ve been out for drinks with my friends, and I think Kristin is starting to feel more at home. We further decorated the apartment over the last two weeks, finding lots of things I never would have thought of for around the house (just one of the many awesome things about living with a hyper-organized person like Kristin).

Mostly though, over the last two weeks, we’ve been normal. No more crazy hours of the night before we can chat, no more time difference, no more 5000 miles between us. We’ve just been able to have fun. Whether it’s relaxing and watching TV together, being out and about, shopping, walking, talking or just working on our own stuff. Its been amazing having her back. Welcome to Ireland Kristin. Let the fun begin!

[eoghanobrien-blog]

Anticipation.

We’ve been dealing with a very very long distance relationship since May 2011 (4510 miles), so I’m pretty excited to have her back in Ireland. I’ve been over to Texas twice to break up the 7 months and we’ve Skyped a lot over that period as well as texting everyday but it’s just not the same as being together in person. Its going to be a pretty manic January but I’m looking forward to a fun year filled of traveling, dining out, live music and mini adventures around Ireland.

[eoghanobrien-blog]

Texas.

A quick note before you start reading. This is the longest post I’ve ever written, it catalogs my trips to Texas this year in as much detail as I’m willing to post on the internet.

In September, the first week was spent acclimating to Texas weather and meeting Kristin’s family. We played ping pong and beer pong, ate Mexican food at Chuchos and hung out by the pool at her Dad’s. I had 10 days of work to do in 28 days so I took my laptop with me and spent the second and third week working downstairs from the couch and spending time with Kristin in the evenings. I’ve tried to break up into subheadings, the things I experienced while I wasn’t working, read on below.

Shooting

On the 11th of September, Kristin’s Dad, Royce, took us out to Hot Wells Rifle Range. Royce had an 80 year old, single shot, bolt action Remington rifle (.22 calibre), Tyler’s Model 88 Winchester, which is a lever action rifle with mounted scope (.243 calibre) and also Royce’s own Springfield M-1903 (30-06 calibre) which was the standard issue for service men in World War I and the weapon of choice for US snipers in World War II.

I’ve never shot rifles like these before, I shot an AK-47 in Phnom Penh in 2008 but this was different, these rifles were more precise and more fun. The power of the bigger rifles jolts your arm back so hard and fast that it makes it difficult to keep hold of the rifle. I think practice would make this easier, it might be something I do more of in the future. Hunting deer, dove, duck and other animals seems to be a big part of a Texan male’s life. Kristin’s brother Tyler is already being taught by Royce and he’s getting pretty good, her brother-in-law Zach is into tournament hunting and fishing, you can follow his blog here.

The Ranch

We took a trip to Kristin’s grandma’s ranch, we drove out into the middle of nowhere to a tiny little town called Burton surrounded by acres of farmland and picket fences. The scenery on the way in was beautiful and the ranch was much bigger than I expected. The cows were terrified of us when we got there. They kept throwing shapes and giving us the evil eye. At one point, I was convinced they were formulating a plan to capture the house and put us to the sword. They were that intense. The house was filled with personality, history and most of all love. I wished I could have met Kristin’s grandma, she was such a big part of her life. We went out for dinner that night at Somerville Steakhouse, a cool little place with a kind of “deep Texas” feel, we shared a steak (the biggest steak in the history of the world, it actually fed Kristin and me for dinner, then 5 more people for breakfast) and went back to the house to watch the stars and wait for Kristin’s sister Jenn and her husband Zach to arrive for beers and chat. The next morning we walked around the ranch, Zach had a .40 calibre Smith and Wesson pistol and we all took turns shooting at random targets around the pond. Kristin went all out country, wearing some cowboy boots and a trucker hat and shooting at cans. I had to laugh. Pretty soon after we were ready to go watch some Football.

Football

Football in Texas is big. Huge. Bigger than anything we have in Ireland in size, tens of thousands come to watch College Football, crowds bigger than Premier League matches, even more just come to Tailgate (more on that later). The spirit is the same as here though. Football goes deep into the heart of almost every Texan, they’re brought up with the Friday night lights and crunching tackles. Its not just Pro or College Football either, Pee wee Football, similar to schoolboy hurling, soccer or rugby, is big too and that’s the main reason its so big, it goes right down to grassroots level.

We all left the ranch and headed for College Station to watch Kristin’s college team the A&M Aggies play Idaho (Vandals) On the way there we saw a bunch of bikers, the kind you see on TV, you know, with the big momma covered with tatoos that could kill her dinner with the smell of her farts. As we approached Kyle Field, we came over a hill and suddenly the sheer size of the campus became apparent. An 80,000+ all seater stadium with huge screens to replay all the action to the crowd. Actually, let me rewind to what most people really enjoy about football games. Tailgating!

Tailgating, traditionally, is where football fans, usually more than 100,000, will set up a grill in the open tailgate of their vehicles and BBQ party food such as burgers, hot dogs etc. In my experience, people had set up tents or canopies with TVs, coolers for beer, margaritas, soft drinks and tables covered with food. BBQ steak, burgers, chicken, chips and dips, fajitas and all sorts of variations! Its pretty awesome, you just spend your time chatting and playing lawn games like Cornhole (chuckles), Ladder Golf and Horseshoes.

When we finally make it to our seats, I’m pretty drained. I’m not used to this kind of heat anyway but it’s the humidity that’s sucking the energy from me. We stand for the best part of 3 hours as the Aggies beat Idaho 37 - 7, there are a few strange customs that A&M fans do at certain points in the game, kissing your girl every time the Aggies score, which was nice; doing some kind of weird leaning exercise, which was just weird when you didnt go to school there and then there were the male yell leaders, who are really just cheerleaders that dont dance but run around the place “yelling” different cheers to try to lift the crowd, I did my best not to judge.

Hideout at the Horseshoe

The hideout is a pretty amazing little place. Its an 18 cabin resort, hidden amongst trees and hills along the Guadalupe River in Texas Hill Country.

Our cabin had a huge, spacious bedroom, all the mod-cons we needed including a fridge and TV, even a coffee machine. The bathroom was nice and clean too. But, the real draw of this place is the river. In summer, hundreds of people come to float along the Guadalupe. In September, we pretty much had the place to ourselves. The heat was intense in the morning but eased up in the afternoon. In the evening, we had dinner at The Gristmill in Gruene, a cool, open restaurant with great food and good beer.

Kristin’s Birthday

The weekend of the 24th of September we spent in Plano with Kristin’s sister Jenn and brother-in-law Zach. It was her Birthday weekend, so we all went out for drinks at Pete’s Dueling Piano Bar, we had Kristin go up on stage for her birthday song and ended up pretty toasted. I don’t think any of us remember going to sleep that night.

We woke up early on Saturday morning, I gave Kristin her Birthday present, a silver claddagh necklace, then we got up and watched TV. There was a Man Utd game on, followed by an A&M game so we had plenty to keep us busy as we prepared our bodies for the onslaught of beer and BBQ later in the evening. Zach knows his way around a smoker pretty well and had smoked ribs, sausage and brisket since the night before. The party was a real American style party, to me at least, with beer pong, BBQ, little red plastic cups, we might as well have been in an American Pie movie!

Thanksgiving

In October, I flew back to Houston to see Kristin and her family again, and to experience an authentic American Thanksgiving. It was quite the experience. Kristin’s mom bought tickets to go see Cirque de Soleil, which was cool and weird all at once. We took a trip out to the Magnolia for the Renaissance Festival and experienced even more weird and wonderful human beings. We relaxed at home, played in the park, went out to restaurants and enjoyed each others company as we prepared for Thanksgiving.

Jenn and Zach came down from Dallas, so in the morning we went to Kristin’s Dad’s house and watched as Royce deep fried a turkey. It was straight up, the most delicious turkey I’ve ever tasted in my life! I also had my first taste of sweet potatoes, which were like ice cream in the form of mashed potato. Afterward, we all hung out and played darts and ping pong. We split the day up so that we could also head out to Kristin’s aunt and uncle for a second Thanksgiving, by which time my stomach had recovered and was ready for a second main course. I felt quite the glutton, albeit a satiated glutton. The guys played poker in the evening while the gals played some board games. At this point, considering all the delicious food I consumed during the day, I was struggling to stay awake and quite honestly itching to get to bed.

The People

Of all the cool things we did in Texas and all of the great days and nights out, it honestly wouldn’t have been the same if it hadn’t been for the people I met. Kristin’s mom, dad, stepmom, brother, sister, brother-in-law, aunt, uncle, cousins, friends, everyone I met was friendly and interesting, they are all just down to earth, good people. I had a great time meeting Kristin’s family and friends. I’m looking forward to seeing them all again in May!

[eoghanobrien-blog]

Redesigning Life and Rambles.

Luckily, Kristin is a pretty good client, so she was cool about it. Finally, over the Christmas period, I found some time to flush out the design. The concept for the design was to use her love of journaling and her obsession with organization as the theme. So, I designed a journal from scratch, with threaded seems, paper colors and a page effect. I added tabs for the navigation menu, Kristin is very organized, so I knew if she had a journal it would use tabs to identify the sections. It turned out looking pretty good. The journal is placed on top of some photos of Kristin on her travels, the blog started out as a travel journal so I wanted to hook into that in some way. Both the journal and the photos are supposed to look like they are on top of an old table or desk. For post types that weren’t Texts, I tried to make them look like they are ‘clipped’ into the journal so I used the paper clip motif for Photos, Videos, Links, Quotes and Chats.

Once I had everything designed, I took a look at Tumblr’s theme building documentation to figure out what dynamic data I had access to. From there, it was simply a matter of writing the HTML and CSS code for the design and plugging in the tumblr variables. I wanted to create a menu to filter posts by type (e.g. photos) automatically but it looks like they’ve removed that functionality, apparently because people were finding and stealing lots of free music.

If you’re interested, take a look at www.lifeandrambles.com to see the final outcome. I know I’m biased but I think Kristin has some cool travel related posts, notes on life, helpful tips, book reviews and plenty more funny and interesting posts, definitely worth following.

Now to finish the redesign of my own blog.

[eoghanobrien-blog]

3 Things you dont know about me.

I’m the 16th person in Ireland to join twitter. A pretty lame claim to fame but its true. Actually, I’m joint 15th. I’ve been an early adopter of a lot of web services, as with any web related career, I keep my ear pretty close to the ground with new websites and web services. I remember the days of pownce and odeo too. Twitter was interesting to me at that time because I had just failed miserably at my first efforts at blogging and micro-blogging sounded like a much easier task. Funnily enough and maybe somewhat expectedly, I dont keep my Twitter account up to date either!

I played on the same soccer team as a current Premiership Footballer. As a teenager, I played alongside Stephen Ireland (of Aston Villa) in our U12, U14 days with Cobh Town FC. I can’t say I know the guy well these days, my memories of Stephen are of busting out laughing at our impressions of the spear scene from Ace Ventura 2 and a brilliant goal he scored in the park by his house, using jumpers for goalposts, that was like Gianfranco Zola’s goal against Norwich. Inspite of some of the bad press he gets, I think he’s a good guy.

[eoghanobrien-blog]

Social Reading List.

Readernaut is a free social network/reading history repository created by Nathan Borror now a Product Designer at Facebook. The concept of the site is simple, have you ever wanted a simple way to keep a list of all the books you have ever read, plan to read or are currently reading? Well that’s exactly what Readernaut does.

It provides a simple interface to search for books (on amazon or on the site) and add them to your ‘library’ under labels like ‘Plan to read’, ‘Finished’, ‘Reading’ or ‘Abandoned’. You can even mark how far into the book you are!

There’s also a whole social network side, with profiles where you can see which books your friends are reading, how far in they are and any reviews or notes they’ve left about it.

I just introduced it to Kristin the other day, she’s a total bookworm so I knew she’d like this site and now I have a friend on there :)