Full Frontal 2011

Earlier this month I attended Full Frontal Javascript 2011 conference hosted by Remy Sharp in lovely Brighton. I’ve wanted to attend since it started three years ago but have always had something in the way. So I jumped on a train at stupid o’clock on a very cold and misty morning and managed to finish off ‘Mobile First’ on the commute before grabbing a well deserved coffee with Tom Parker at Coffee@33.

The conference was held in the beautiful ‘Duke of Yorks’ independent cinema in Preston Circus, meaning the comfy sofa seats were a serious upgrade from the normal plastic seats I’m used to at conferences. Perfect to settle into for a day of insightful talks after my early rise. I won’t discuss all of the days content as we’d be here for weeks, but here were my highlights.

CoffeeScript Design Decisions – Jeremy Ashkenas

I was extremely happy to see Jeremy on the bill for Full Frontal, as we’re big fans of Backbone.js in the office and try and squeeze it into every project. That said he was actually on the bill to speak about Coffeescript, a new approach of writing js in a minimal fashion that at the same time tries to smooth out some of the ‘gaps’ in the language. I won’t go into the details of Coffeescript as you can learn more here, but Jeremy explained the core concepts very well; you would hope so from the creator;). The main points I took home were ‘It’s ok to cheat!’ why should we have to re-wrtie the book every time we start a project, but at the same time using Coffeescript we can extend/bend js language to our own.

“HTML5 is about taking js seriously!”

Excessive Enhancement – Phil Hawksworth

Phil’s talk was on a subject very close to my heart about ‘Excessive enhancement’. With the boom of Javascript over the last couple of years, especially surrounding UI development and DOM manipulation, he raised some very important questions. Are we over doing it with our ‘Browser sizzle’? Is it ok to load in 10mb of images on page load for some fancy effects or should be loading them in lazily? Whoever thought the hashbang /#! was a good idea? That last point was probably the most important, are we going to look back on this era of the web as the years of lost content. Start using the History API and .pushState() today!

Scalable Javascript Application Architecture – Nicholas Zakas

The talk I was looking forward to the most, if you’ve ever done any research into js design patterns or application architecture you would have found Nicholas’s name; he didn’t let us down. The talk was full of clear and concise definitions of architecture principles such as the module and mediator patterns and went on to describe how to structure your applications for re-use , extensibility and scalability. It really drilled home to me the importance of planning ahead in your application design to try to loosely couple as many components as possible.

“A scalable js architect allows you to replace any block in a Jenga tower without fear of it toppling over”

If you haven’t already done so, I strongly advise checking out his slides here.

Beyond the planet of geeks – Brendan Dawes

A very controversial move to have a designer most famous for his ‘Flash’ work to talk at a JS conference… but I bet everyone was happy he did! Extremely insightful for me, forcing us to take a step back and remember that our work can still be fun.

“If you don’t go into the woods, nothing will ever happen in your life.”

Drawing from his obsession of collecting weird objects such as pencils, to his work at Magnectic North, Brendan showed us that we should ‘obsess about our tools’. He also expressed the importance of continuing to experiment and explore new technologies and interfaces, canvas, svg e.t.c as they are here to be used today. His talk was summed up by my favorite quote of the day.

“When you get good at something try something different”

Although agnostic of languages or platforms, Brendan hinted towards the end of the Flash era and even stated that although it will always have its uses to become ubiqutus we may ‘need to leave some things behind’.

You gotta do what you gotta do – Marcin Wichary

What can I say, this guy has the best job in the world. For 20% of his time Marcin is one of the interface engineers for the ‘Google Doodles’. Be it Pac-Man or dancing lady, he has worked on some very cool projects. In this talk he showed us how they have used some very clever techniques to overcome the issues you can have trying to serve a project to 6 billion people. For example crushinator which cuts up animations into individual frame sprites that get overlaid on each other or using the devices accelerometer to control submarines. By far the funniest and most interesting talk I have seen this year!

Overall the day was a great success for me. I was very glad that the subjects of the talks were well rounded having something for everything and not just about how we should be caching our for-loop vars. All were educating and insightful, which leads me to think that the lack of video recordings is a shame as this knowledge may be lost forever (but I know that Remy is working on this ☺). Although, at the very reasonable price of the conference I don’t blame the man, in this day an age of conferences costing towards £1000 Full Frontal is an absolute bargain and extremely good value for money. Finished off with good discussions with friends and a nice drink by the seaside. What more could you want from a conf? I’ll definitely be back next year!

This post was written by Patrick on November 30, 2011 at 4:22 pm

London Node.js User Group

Last night we attended the inaugural London Node User Group or to those in the know l-nug #lnug. We have been experimenting with node.js internally here all year and are extremely excited by the prospects it may hold for our clients and us in the future, aside from the fact we love all things javascript and who wouldn’t want to write asynchronous code….

The event was hosted and sponsored by the fine chaps at Forward in their rather swanky Camden offices and kicked off with a lovely round of free drinks and pizza (courtesy of Forward), some great informal networking and discussions surrounding the likes of the new Kindle Silk browser and Facebook’s plans to take over the world. A good warm up to get the brains ticking for the night’s 3 main talks:

Forward’s own Andy Kent started the night with: “Real time data analysis over unbounded streams” a look into the libraries he has been producing internally at Forward for real-time keyword data analysis specifically his Creek streaming aggregator used in production to track popular words and urls across different data streams. We were particularly impressed to see it being benchmarked in production environments clocking 500 hits a second without even flinching.

Garren Smith gave a very insightful talk “These are the ORM’s you are looking for” discussing a few options you have for ORM’s in node to create abstraction layers between your code and your lovely NoSQL db’s for object relational mapping bliss (and we are big fan’s of ORMs). Specifically LazyBoy which he wrote for couch (our personal favorite NoSQL) and we have used for personal projects. Bringing support for defaults, CRUD, relationships (hasmany e.t.c) and couch view goodness.

Rob Tweed finished the night with a rather controversial (well at least at a node group) talk on the Globals database, a very reliable high performance in-process (i.e. no network layer) NoSQL database (tongue twister) that predates the NoSQL era, abstracted from Caché db. My favorite quote of the night was from Rob, when discussing getting into node.js:

If Douglas Crockford is talking about it, then it must be good!

Not for the faint hearted, Globals is a extremely low-level storage engine for which you have to write your api’s yourself, even indexing! However, this allows you to be a lot more flexible in creating your db’s. Rob’s interesting point was that after a lot of testing and benchmarking he found that when using Globals and “blocking” on high performace enterprise level projects, synchronous db calls where faster than the as aysnc possibilities node gives us. This led into a great Q&A session from the all the aync fan boys in the room.

After the event we all headed to the grand union for some post-event discussion, where I discussed the possibility of using Node in some upcoming mobile projects we have, with some great ideas coming from people for real life uses for sockets and node in mobile development, so watch this space.

Overall the event was a great start to what – we hope – will be long running user group, a great community of people all pushing the technology to new and exciting places. Firmly rooting the fact that server side javascript is here to stay, and is ready for production use! A massive thanks to Andrew Nesbitt and Andy Kent and Forward for being great hosts. We’re always happy to meet new friends in the london tech scene so why not follow us on twitter: UV^d Patrick Hamann

I will update the post once the slides/videos for the night have been released.

UPDATE: Forwards Flickr photoset from the night.
UPDATE: Video of Andy Kent’s talk “Real time data analysis over unbounded streams”

This post was written by Patrick on September 29, 2011 at 10:17 am

Responsive web design and small screen optimisation

The way people are using and accessing websites is changing. This is due to users having more diverse browsing experiences on a multitude of devices, including desktop browsers, smartphones, tablets and more. This creates challenges for web producers regarding how we should design for different screen sizes, resolutions and types of interaction (e.g. touch). More than that, it calls into question what it really means to design for the web today.

With new devices available, the one-size-fits-all approach to web design that we’ve stuck with for so long is no longer relevant. It’s now essential that the designs that we create are responsive to the different ways that users access our content. This document is intended to outline a process called ‘responsive web design and enhancement’ that can be used to optimise your website’s content and adapt to different screen sizes and devices. Download the document here:

Responsive web design and small screen optimisation

This post was written by Patrick on July 1, 2011 at 3:09 pm

Accessible breadcrumbs using ARIA

Lately we’ve been working on a lot of content heavy websites here at UV^d, all of which follow the very common hierarchical structure (or taxonomy) of the web: categorised sections, which contain articles of content that are all related to that category.

When we are faced with the problem of having to show a way of navigating this hierarchical structure within our HTML it’s very common practice within our industry to use a breadcrumb pattern of markup. The most common of which up until recently has been to use an un-ordered list element <ul> and the navigation links to be list-items within the list, example of which can be seen here:

<ul>
	<li><a href=”index.html” title=”Home”>Home</a</li>
	<li><a href=”products.html” title=”Products”>Products</a</li>
	<li><a href=“shoes.html” title=”Shoes”>Shoes</a></li>
</ul>

Chris Coyier of CSS-Tricks recently wrote an article on the issues surrounding this age old pattern titled “Exploring Markup for Breadcrumbs“, and suggested some markup solutions to tackle it. As Chris stated the use of a <ul> is

“semantically wrong putting each navigation item on the same hierarchical level.”

The final solution he suggests uses the HTML5 <nav> element to wrap the items, which satisfies our semantic goodness needs denoting that everything contained within it should be treated as a navigation structure, and then uses the rel attribute and the up to indicate the hierarchy on each level:

<nav>
 <p>
  <a href="/" rel="index up up up">Main</a> >
  <a href="/products/" rel="up up">Products</a> >
  <a href="/products/dishwashers/" rel="up">Dishwashers</a> >
  <a>Second hand</a>
 </p>
</nav>

Although this solution is now semantically correct and the rel attribute allows each item’s level to become machine-readable there was something that still bugged me about it, it’s accessibility towards users using assistive devices or screen reading based browsers. The up value is still in debate by the spec editors and isn’t likely to be supported in any screen readers for a long time. After a lot of experimenting and some in-depth discussions with a fellow frontend dev friend of mine Dan Claydon and a sprinkling of ARIA I’ve come to this solution:

<nav role="navigation">
<p id="breadcrumblabel”>You are here:</p>
<ol id="breadcrumb" aria-labelledby="breadcrumblabel">
<li><a href="index.html" title="Home">Home</a></li>
		<li><a href="products.html" title="Products">Products</a></li>
		<li><a href="shoes.html">Shoes</a></li>
	</ol>
</nav>

The advantages of this pattern are:

• The use of the WAI-ARIA aria-labelledby attribute to instruct the user agent to use the label inside the <p> element to label the content of the navigation list
• Semantics: using the <nav> and <ol> elements to create a much cleaner structure to both machines and humans
• Separation of structure and aesthetics. You can use the CSS2 :after pseudo attribute to place the visual > separators after the links. As I am a strong believer that they do not belong in the markup
• You can chose to either hide the label off screen using css (which I have) or leave it if it fits your design and acts as a strong visual clue to everyuser
  Although a more accessible pattern it still brings some issues along with it. The elephant in the corner and its lack of support for HTML5 elements and CSS2-3 attributes (IE 6-8). Unfortunately the only way around this is to use some of the very clever javascript “polyfills” that are popping up all over the web at the moment. Two of our favorites here at UV^d , perfect for this pattern are: Modernizr and Selectivizr
• Modernizr allows you to use advanced feature detection on the clients user agent for progressive enchancement, and also uses a great HTML5 element polyfill which will allow us to style our <nav> element
• Selectivizr combined with your framework of choice (jQuery in our case) allows you to use some of the more recent CSS2-3 selectors in your stylesheets and parses them for the older browsers. Thus allowing us to use the :after pseudo selector for our navigation items

I would love to hear your feedback regarding this pattern and if you have any other techniques to improve the solution, and of course would like to credit Chris and Dan who gave me the inspiration. Below is a list of some further reading around the ARIA spec and accessible forms of navigation.

• ARIA Relationship attributes (i.e. labelled-by)
• ARIA ‘navigation’ role attribute
• An accessible pagination pattern

This post was written by Patrick on May 4, 2011 at 1:08 pm

Going Mobile with CSS3 Media Queries

You must either live in the Outer Hebrides or have been asleep for the last year not to have heard about the HTML 5 and CSS3 buzz bouncing around the interwebs: every developer or wannabe marketing exec is trying to get in on this particular piece of the pie. Therefore, we thought we’d give you a little insight into one of our favourite CSS3 modules ‘Media queries’ and how we are using it to make websites more mobile friendly.

Firstly let’s get one thing clear, contrary to popular belief CSS3 is NOT part of HTML5, it’s a completely different spec written and managed by a completely different group of people. But, much like HTML5 it is made up of multiple modules each addressing new functionality to the CSS base spec.

Although only getting a lot of attention recently, the Media queries module has existed since 2001 (yupp 9 years old!) but due to a gradual influx of capable media devices and user agents (iPhone, Android, Safari, Chrome e.t.c) they have only recently become useful.

So what are they, and how can they help me I here you ask?! Media queries are simply logical expressions that enable you to declare style declarations specific to a media device or type. Between the various HTML and CSS specs there are eleven different media types:

"all", "aural", "braille", "embossed", "handheld", "print", "projection", "screen", "speech", "tty", "tv"

We have seen media types being used for years, for instance using “print” style sheets to change a documents layout specifically for printing. Media queries extend this functionality further allowing us to specify exact aspects or “features” of a device, thus enabling very specific style declarations based upon whether features exist on the target device or user agent. These features are:

Width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan and grid.

Therefore, a media query consists of a media type and zero or more expressions that check for the conditions of particular media features, as shown in the example syntax below.

This specific query would apply to all screen devices with a maximum screen width of 480px, which is in fact one of the queries we are using on this blog to aid the experience on more advanced mobile devices and smart phones such as the iPhone (as 480px), but you can still see these style changes now if you reduce your browser to a width below 480px.

You can now see the amazing potential of media queries in the mobile world, we can define specific styles based on the devices resolution, colour or screen size, and as it is CSS the styles will cascade down. Therefore, you can have a set of styles for all devices, which will cascade down through all of the other queries. This allows you to deliver the same content to every device, which adapts based on the devices capabilities. This makes your website pages much more future proof as we are testing for features on the device or user-agent rather than sniffing for browser versions like we had to do in the past.

We have been getting very excited at UV^d recently surrounding the massive change we are seeing in the mobile world and have been gearing our own as well as our client’s websites to be ready and take full advantage of all the new functionalities to play with. I hope this post has given you a little insight into what you can do with media queries and encourage you to go and give them a try for yourself! I have also included a list of great further reading below.

http://www.slideshare.net/maxdesign/css3-media-queries
http://www.alistapart.com/articles/responsive-web-design/
http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/

This post was written by Patrick on September 2, 2010 at 10:34 am

More Accessible User Interfaces with ARIA

On Tuesday I had the pleasure of attending Todd Kloots Yahoo! Dev talk on “More Accessible User Interfaces with ARIA”, apart from the added bonus of being located in the new Skills Matter conference and events centre. Todd made a very good presentation and a solid introduction to ARIA for those not aware of it. Rather than boring the audience with long spouts of text from the W3C ARIA spec he instead chose a more hands on approach showing everyday examples of ARIA on widgets he had developed with Yahoo and the YUI, whilst at each point stopping to show alternative options of implementation and which were the best practices and why he thought they were.

For those of you who are not familiar ARIA (or “Accessible Rich Internet Applications”) is a way further conveying a specific elements role within a webpage or application through the use of enhanced semantics. This allows for screen readers and assistive technologies to more accurately define to the user how to interact with a websites controls, in turn creating a richer user experience. It is especially useful to define the use of more advanced user interface controls (that are becoming increasingly more popular ) made using javascript and ajax, that have states that constantly change.

For the more interested developers out there, ARIA is applied to your applications by placing extra attributes within your elements tags, most commonly using the role=”" attribute.  One of the most important aspects of ARIA is the ability to apply multiple attributes to an element (as you would do with ID’s or Classes). This is because each element can have multiple properties:

• It’s Role: role=”menu”
• It’s State: aria-disabled=”true”>

• It’s Properties: aria-haspopup=”true”

A simpler way of describing this may be to show you an example of the markup one would use of a simple two panel tabbed interface.

<ul role="tablist">
       <li role="presentation"><a href="" role="tab">Tab 1</a></li>
       <li role="presentation"><a href="" role="tab">Tab 2</a></li>
<ul>

<div role="tabpanel">
       <p>Content</p>
</div>

<div role="tabpanel">
       <p>Content</p>
</div>

Although this is clear when visually displayed like that, the only true way of showing ARIA in use is to see (and more importantly hear) it working within a supported browser or screen reader. Though, as with all new or unfinished W3C specs, browser support and implementation varies across all vendors, with JAWS and Window-Eyes supporting the most amount of roles and states attributes. This leads us to the question of ‘is it worth all the hassle?’, my own personal answer: YES, being a big supporter of progressive enhancement, as long as it aids a better user experience for some of your users then it is worth the small amount of extra time to implement it.

Overall, Todd’s talk was very insightful and good to see how Yahoo! are going about creating much richer user experiences for people with specific needs, and even more so educating others about the best practices which can hopefully lead to a more accessible web!

I will certainly be trying to force and implement the use of ARIA in future projects here at UV^d, so keep your eye out for more info and posts around the subject in the near future. Though in the mean time I have included some further reading to feed your ARIA thirst, and start trying out ARIA yourself. But as Todd said himself:

Reading the documentation only gets you so far.

So try actually testing your new aria goodness with a screen reader, two of the links below are to help your setup a screen reader testing environment on your machine.

Enjoy!

Further reading:
WAI-ARIA Best Practices

YUI Configuring screen readers

How to use NVDA and Firefox to test your web pages for accessibility

This post was written by Patrick on November 20, 2009 at 2:52 pm

FOWD Tour -Bristol

Whilst Gareth was attending the1^st linked data meetup I was on the other side of the country in lovely Bristol attending the FOWD Bristol Tour.  The day long conference was designed to let people get a chance to experience what the normal FOWD conferences are like in a place nearer to them without having to go to London or New York (And for a fraction of the price!).

Though, as I already live in work in London, the main attraction for me to travel all the way to Bristol was down to the fine line-up of speakers for the day. With the likes of Elliot Jay Stocks and Bruce Lawson I had no valid reason not to attend, and the small factor of being able to catch up with some old friends.

Elliot kicked the day of with ‘A Perfect Portfolio’. A talk aimed at highlighting the key strengths and weaknesses in portfolio designs, and some very valid points that you should take into consideration when designing your own. A subject that is very topical here at UV^d at the moment due to us being in full swing of our own re-branding. It was very interesting to see the amount of points that came up that we have spent hours (coming up to years) discussing and deliberating over, such as the importance of showing your featured work on your homepage, to how you go about showing the process of your work: Elliot summed up the presentation succinctly:

It’s not about the finished project, it’s “How you get there!”

The next discussion of the day was from Paul Boag of Headscape titled “The Battlefield of Design – Designers vs Clients”. The first interesting thing to note was that Paul had decided not to use any slides at all and to rely purely on his memory (and cue cards) to educate us. Although, even with his new controversial style of presenting, it turned out to be a very insightful look into the process that Headscape use from brief to sign off. With the main aim of including the client throughout the design process rather than “designing behind doors”. I picked up some good tips from this, which we will be hopefully be putting into practice here in the future.

The HTML5 working spec is something that I have been following throughout the year and starting to become very passionate about. Therefore there was no doubt that in my opinion the best was saved until last, with Bruce Lawson’s talk on the Future of HTML5. He covered a wide range of basic HTML5 knowledge, from the introduction of new basic tags such as <header>, <article>, <section>, <aside>, and <footer> to some of the more advanced such as <video>, <audio> and my personal favourite <canvas>  which enables the dynamic rendering of graphics on the page through javascript, a good example of this can be seen here.

The most important thing to take from Bruce’s talk though, is the fact that you don’t have to wait for the HTML5 spec to be complete to start using it. That could be years and even more so for the browsers to fully implement it, the pages with the new doctype<!DOCTYPE html> will still render in the browsers we know today, and most will accept the new tags. So why not start experimenting and playing! We certainly have, as you’ll see if you take a look at the source of this very blog.

Overall FOWD was a very enjoyable day, yet there is no way I could have covered everything in one small blog post. So for more info Bruce and Elliots slides from the day can can be viewed here:

• The Future of HTML5
• Stop worrying and get on with it

This post was written by Patrick on September 29, 2009 at 10:44 am

Beautiful UV^d Logo

Our snail paced re-brand has evolved into a rather brisk ramble (we are nearly out of breath) and as you can see we have settled on a new logo. Actually we have almost completed the web layouts but that’s another story (why say it in one post when you can say it in two!).

The basic premise behind the logo / re-brand was that the original Ultraviolet Design brand no longer represented the type of work we do and how we wish to be seen to the wider audience; with the only recognisable industry word in our name emphasising ‘design’ we felt that our other attributes were being unfairly over-powered. For instance, whilst we do web design, the design element is only one function we have to perform in an overall process of many. To put it another way, to emphasise only one skill of the many skills we have seems a little short sighted!

As such, we have re-branded ourselves UV^d and the website will follow shortly. No, it really will! Watch this space.

This post was written by Patrick on June 29, 2009 at 4:33 pm