Beautiful Data with Kendo UI DataViz: Webpage Obesity

Humans are remarkably attuned to pattern matching. It's the result of thousands of years in evolution. I see this on a daily basis with my children as they play with their toys. They're constantly finding new ways to place blocks in a location that's nearly impossible for me to reach. But, I digress.

They say that a picture is worth a thousand words. This is especially true when it comes to data. When faced with rows upon rows of seemingly meaningless data, we often turn to visualizations like charts and graphs to help make sense of it.

For years, I've been fascinated with data visualization – especially beautiful ones. Chances are, if you've picked up a newspaper or visited a news site like the New York Times, you've found yourself staring at one. They're everywhere these days. And for good reason too! Good data visualization allow us to interpret data is new and powerful ways. This opens up the world around us to a wealth of knowledge that went unseen in the past.

These days, with more and more data becoming increasingly available, Kendo UI DataViz has quickly become my virtual doodle pad with which to "draw". Kendo UI DataViz is one of three collections in Kendo UI, an HTML5/JavaScript framework for building modern web and mobile apps. Kendo UI DataViz consists of a series of widgets that enable you to create beautiful charts and graphs.

Armed with Kendo UI DataViz, I felt compelled to share information with folks in the developer community about a growing concern of mine; the weight of web pages or, what I like to call "webpage obesity".

In terms of bytes-on-the-wire, the Internet is getting fat. Quite fat, in fact. For example, did you know that an average webpage is around 1.4 MB? Not surprised? You should be. "But, why should I care?" you may ask. The reason is simple: performance.

Recently, I posted a copy of a fantastic infographic by Strangeloop Networks, which cites a number of statistics concerning website performance and the impact it has on a company's bottom line. Basically, it boiled down to this: if your website is slow, your customers won't want to come back.

Anyway, getting back to my love affair with data visualization.

The HTTP Archive is a fantastic resource for web developers wanting to discover how sites tick. Every two weeks, it crawls over 290,000 URLs, collecting information on each one. It provides a historical log of this information for developers to sift through. Its mission is articulated as such:

In addition to the content of web pages, it's important to record how this digitized content is constructed and served. The HTTP Archive provides this record. It is a permanent repository of web performance information such as size of pages, failed requests, and technologies utilized. This performance information allows us to see trends in how the Web is built and provides a common data set from which to conduct web performance research.

The HTTP Archive provides some nice charts and graphs, but each time I visited the site, I always felt like I wanted more insight into the data. And thus, my side project entitled, Webpage Obesity was born.

Webpage Obesity

Webpage Obesity is my attempt to provide a snapshot of the HTTP Archive in one go. A "here's the state of the Internet, people!" kind of image that would leave people with the shock value of stepping on the scale after Christmas holidays.

Side note: a massive tip of the hat must go to Steve Souders for making the data of the HTTP Archive publicly available. For a good overview of how to get and analyze the data yourself, make sure to check out Stoyan Stefanov's excellent post entitled Digging into the HTTP Archive. It's definitely worth the read.

For my Webpage Obesity project, I decided to leverage the stacked area chart that's provided in Kendo UI DataViz. This would allow me to show everything at once and over a period of time. At the bottom, you'll also notice four (4) sparkline charts. These show a combination of the data in-question (i.e. HTML) along with the average number of requests for that data.

MelbJS and Web Directions Code 2013

Last week, I had the distinct pleasure of returning back to Batmania (Melbourne) for MelbJS and Web Directions Code 2013. Both events were fantastic and I had a wonderful time connecting with attendees, chatting with them about Kendo UI.

tl/dr: Two awesome events where we (Cameron Marsland and I) were able to connect with the web developer community. Lots of interest around Kendo UI. Great times all around

MelbJS

MelbJS is a prominent user group for JavaScript developers in Melbourne. It features presentations on a monthly basis from local speakers, highlighting a number of topics as they relate to JavaScript and web developer in-general.

The evening's event featured a number of talks by speakers at Web Directions Code. With 100+ attendees, it was a huge turnout for MelbJS and it was great to see!

While at MelbJS, I got a chance to speak to a number of developers about Kendo UI. There were a lot of questions to answer. In particular, I fielded a lot of questions about Kendo UI DataViz, our visualization library for SVG-based charts and graphs.

L-to-R: John Allsopp, Ryan Seddon (Modernizr), Garann Means, Steven Wittens, Jeremy Ashkenas (CoffeeScript, Backbone), Michael Mahemoff, Andrew Fisher

All in all, I had a great time. I (heart) MelbJS.

Like most house parties, the most popular room was the kitchen

Web Directions Code 2013

As the conference states, Web Directions Code is "for web professionals like you who care about code two days of intense learning, connecting and geeking out". In short, a web developer love-fest.

Web Code Directions 2013

For this year's event, 300 web developers were in attendance from across Australia; 20% higher attendance than Web Directions Code 2012. (Well done, Web Directions organisers!)

Web Directions Code 2013 at Melbourne City Hall

Web Directions Code 2013 featured many prominent speakers from Australia and overseas as evidenced by the conference schedule. If you were unable to attend, you can check out the presentations:

• Angus Croll - The Politics of JavaScript
• Julio Cesar Ody - What's ECMASCript 6 Good For?
• Silvia Pfeiffer - HTML5 Multi-party Video Conferencing
• Cameron McCormack - An Introduction to the File API
• Garann Means - HTML, CSS and the Client-side App
• Michael Mahemoff - What Everyone Should Know About REST
• Mark Nottingham - HTTP/2.0 - WTF?
• Troy Hunt - Essential Security Practices
• Aaron Powell - IndexedDB - A Database in Your Browser
• Marc Fasel - Put On Your Asynchronous Hat and Node
• Andrew Fisher - The Wonderful-Amazing-Orientation-Motion-Sensormatic Machine
• Steven Wittens - Making Things With Maths

The presentation that stole the show was Steven Wittens' talk entitled, "Making Things With Maths". So impressed I was with his delivery and timing, I tweeted the following:

This presentation by @unconed feels like a TED talk. A-mazing. #wdc13

— John Bristowe (@JohnBristowe) May 3, 2013

You can check out Steven's slides (linked above) but to appreciate the epicness of his presentation, you should check out a recording of his talk from Full Frontal 2012:

It was good to be back in Melbourne, my former hometown from 1999-2002. The sights, the smells, the colours. All of it combines into this magical city. Of course, some sights are more interesting than others:

Meanwhile, at the same venue at Web Directions Code 2013...

Being in Melbourne with my colleague (Cameron Marsland) did give me the opportunity to show him around. One of my favourite spots for a bite to eat is Supper Inn in Chinatown:

Supper Inn, Chinatown Melbourne

Which, in turn, led to this at Berlin Bar:

Drinks at Berlin Bar (Melbourne)

Good times all around.

To the next adventure!

Tony Abbott's NBN (Mad as Hell)

Back to Batmania for MelbJS and Web Directions Code

Next month kicks off with a visit to Melbourne for MelbJS and Web Directions Code 2013. If you happen to be in the area, I'd recommend joining us for these great events.

As far as JavaScript groups go, MelbJS is pretty awesome. They have a great group of organisers and have consistently greatly talks.

This will be my second time at Web Directions Code (May 2-3). This conference features some of the top minds in the web development space from around the world. It's a treat for us here in Australia to have some wonderful talent visiting our shores.

CSS

Source: The Internet (Sorry. I'm not sure.)

The Need for Speed

Earlier this month, I delivered a presentation entitled, The Need for Speed to audiences in Perth and Brisbane. The purpose of this presentation was to empress upon folks the need to consider web performance as a feature. Too often, developers and managers consider it an after-thought. It's a sad state of affairs considering the impact performance has to a company's bottom line.

Here's the video recording of my presentation from Edge of the Web in Perth:

Back in Perth-fection for Edge of the Web

Ah, back to Perth we go!

Another early morning wake-up. Haven't I been here before? Truth be told, I'm a sleep camel and can easily tolerate it. I probably would have been quite successful in the military. All that jogging and early mornings. Child's play if you ask me.

I kid, I kid.

This week, I'm in Perth for Edge of the Web, a conference for web developers and designers around Australia. I'll be speaking to attendees about web performance, which has always interested me since I started hacking on angle brackets back in the '90s. Things have certainly changed since then.

Anyway, if you're attending Edge of the Web and feel like listening to me rant and rave about web performance then I'd suggest you drop by.

Visualizing Web Performance

Infographic provided by Strangeloop Networks

This infographic by Strangeloop Networks provides an excellent answer to the question, "why does web performance matter?"

Look at the Awesome. Seriously. Look at it!

We do this every quarter folks. Every quarter.

AppFest Sydney, Day 1

“There must be something special about an event that compels me to wake up at 3:45 AM.”

I asked myself this question more than once as I made my way through the dewy confines of a Melbourne morning to Tullamarine Airport. Yet, a quick flight to Sydney and a short taxi ride afterward, I found myself bleary-eyed at the footsteps of University of New South Wales in Sydney.

The University of New South Wales (Sydney)

I was here to attend a developer event called AppFest - an event organized by the Developer and Platform Evangelism (DPE) team at Microsoft Australia. Its purpose was to provide a venue for developers to meet, discuss, and hack against a wide range of Microsoft technologies and products, including Windows 8, Windows Phone, and Windows Azure.

The calm before the storm

My purpose for being here was simple; to hear more about Microsoft's latest offerings, to discuss them with fellow attendees, and to demonstrate the tools we have at Telerik to assist developers targeting the Microsoft stack.

My (new) Surface RT device, sitting very nicely on a tray table.

A side benefit of this trip was to test-drive my new Surface RT device in a real world setting; onboard an airplane. To push the matter further, I decided to book myself in the worst seat on the plane: the last row on a Boeing 737-800 (on Virgin Australia). Anyway, my overall experience was pretty awesome. The form factor of the Surface RT is perfectly suited for a standard airline seat. Everything from the angle of the screen to the surface area covered on the tray table was perfect. In fact, I cranked out a number of paragraphs of this article on the flight over to Sydney without a hitch. Other features like the ambient light sensor worked very well when the cabin lights were dimmed. Overall, I came away with the feeling that this little device is deserving of a lot more of my attention.

Get excited, dammit!

The idea of an AppFest isn't new. These sorts of events have been around for a long time - with names like hack-a-thon and code camp. Their purpose is to spark a developer's natural tendency, which is building software. Developers come in all different metaphorical shapes and sizes. However, the one thing that we are share is the feeling we get from the creative process. That is why events like these are awesome; they kick-start the "I want to build epic shit" engine dwelling inside the developers who attend them.

AppFest featured two concurrent tracks - one for developers and one for designers. Leading the developer track - which I attended - was Nick Hodge, a Developer Evangelist for Microsoft Australia.

Nick Hodge (@NickHodgeMSFT) showing off his "Metro-ness"

Nick spent the first hour providing a high-level technical overview of Windows 8, showcasing a number of sample applications and the code that underpins them. Next, he walked us through a number of aspects of Windows Azure, Microsoft's cloud platform. One of the more interesting aspects of Nick's presentation was his overview of Windows Azure Mobile Services. Essentially, it provides the ability to automatically generate CRUD operations for mobile applications against a SQL Azure-based database. It supports Windows Phone 8, Windows 8, and iOS (quite surprisingly). Note to self: Spend more time checking out Windows Azure Mobile Services.

Before lunch, Nick spent some time walking the audience through the process of managing your applications for the Windows Store. This, of course, is a critically important aspect of developing for Windows 8 and Windows Phone.

Nick Hodge (@NickHodgeMSFT) running the show. Photo attribution: Code Red Paul (Flickr)

After lunch, Nick gave me an opportunity to demonstrate RadControls for Windows 8, along with a couple of Windows 8 apps - AppMock, and Tasks. (All of these are available in the Windows Store.) If you haven't seen these yet then I would strongly encourage you to check them out. Afterward, I shared some information about our newly announced Virtual Accelerator for Windows 8. This program gives you the opportunity to receive $30,000 in funding, a week in Hong Kong to attend a mentor-led boot camp, and three months in virtual acceleration program.

Telerik Virtual Accelerator for Windows 8

During the afternoon, Nick switched gears by turning attention to the Windows Phone platform. I'll admit that I was surprised by some of the things that Nick shared. It's been a long time since I've used a Windows Phone device and I was impressed by all the improvements that have gone into Windows Phone 8. Even though end user adoption isn't great, the platform is certainly capable.

Overall, I had a blast at the AppFest. Microsoft Australia did an excellent job organizing the first day of this event. My thanks goes to Lachlan Hardy and Nick Hodge of Microsoft Australia for having me at the event. Unfortunately, I cannot attend the remaining days over the weekend. However, if today is was any measure then the attendees are in for a wild weekend of technical awesomeness.