Ten years of evolution: 2011 iPod vs. 2001 iPod.
Progress.
I’ve just pushed some major changes to my front end development guidelines to the public site. I spent a lot of time on this update, and it shows. I’ve added new content and improved old. I’ve ditched my own slap-dash styling in favour of the Twitter Bootstrap with some of my own personal tweaks. Be sure to check it out.
I’ve added some sections on:
- The importance of understanding the box model (CSS)
- Knowing when to float, and when to position (CSS)
- Generating unique IDs without timestamps (JS)
- Preserving middle mouse click functionality (UX)
I also:
- Made the website work without JavaScript enabled
- Cleaned up the overall design and interaction (Bootstrapped!)
- Re-wrote some content here and there
- Added pretty graphics to explanations
- Added some resources to the list
Basically, we’ve gone from this:
To this:
I’m so happy I received this little nugget for Christmas!
It’s a tidy little book written by Matt Hurst of The Humble Vintage targeted at Melbourne’s casual cyclists. It’ll give you some background on the origins of the humble bicycle both here and overseas. It then takes you on a tour of Melbourne’s best cafés, pubs and architecture. Along the way you will find interesting tangents, contributors, newspaper clippings and plenty of pop culture references to boot.
Do yourself a favour and grab a copy.
I’ve just pushed some pretty hefty changes to the jQuery.Gantt project I’ve been developing with lately. I tried some other Gantt libraries, but they were either dependant upon ExtJS, no longer maintained or just didn’t play nicely with my pre-existing code.
I settled on jQuery.Gantt, but there were a few things I found that really kept it from being an accessible, front-end developer friendly resource. For instance, you could previously only specify a URL as a data source, and not a local object. I needed to pre-parse another JSON feed before plugging it into the chart. There were also some conflicts when using the Twitter bootstrap, and the inability to place attributes on the Gantt bars meant no sexy popovers like below.
A lengthy list of changes follows:
- Reduced conflicts with Twitter Bootstrap by name-spacing styles
- Source now accepts data from a local object, not just a JSON call
- Can now extend data properties on to bars for use with Bootstrap popovers etc.
- Code is now “use strict”
- Fixed a couple of errors resulting from “use strict”
- Various English translations: renamed months and days to english, hollydays/holidays
- Redesigned buttons and slider with CSS3 and an image sprite
- Modified category colours and styles
- Made chart 100% width so it responds to parent container width
- Began enforcing front end dev guidelines such as double quotations (but singles on HTML strings), triple equals comparison and using spans instead of hyperlinks for JavaScript interactivity
- Updated demo page doctype to HTML5
- Moved body styles from stylesheet to page to reduce style conflicts
Tools like these make it more and more exciting to be a front end dev every day.
Paul Irish covers some of the impressive new Chrome Developer Tools. It’s no surprise he was named .net’s Developer of the Year
Dynamic Credit Card Type Selection - UX Lab 003
If you find yourself buying a lot of things online, or perhaps building a lot of eCommerce websites - you will have experienced a range of credit card forms. The good. The bad. The ugly. Some fields are required to pass security checks. Some seemingly exist only to frustrate you. But what seems constant is the lack of innovation over the years in what is a staple in eCommerce design.
One example that does it really well is the purchase page for Coda, by Panic Software. Not only does it auto-select the card type of the credit card, but it also updates the select button with a background image indicating progress. The only downside I can really find to the Coda page is that when the card image changes, it’s not sprited so you see a flash of white as the images load.
Using a list of prefixes published to Wikipedia, it’s possible to identify nearly every card type in the world. This opens a host of possibilities to designers, like this:
“CC Rebound” by Ryan Rumsey
Not shown in this demo is the ability to isolate the first two or three characters, to further narrow the type of card. How would you differentiate between Diner’s Club (36) and American Express (37), both starting with ‘3’? Using substr(). The rest is up to you.
Flash-free Google Analytics with Highcharts - UX Lab 002
The reliance upon Flash to produce the charting on Google Analytics has frustrated myself and other web devs for a while now. When Google announced a new premium package it appeared that they had spent some time overhauling their product. I was genuinely curious, as it’s impossible to view your analytics on an iOS device without using a third party application. I was, of course, disappointed. I made what I thought was a valid comment on Hacker News and entered into a bit of a debate.
Regardless of Android vs. iOS motives, regardless of internal politics, what I said still holds true. A front end dev could pump out a proof of concept with a jQuery UI datepicker and the amazing Highcharts in a matter of minutes. I decided to go the other way and produce a facsimile product that took just over an hour.
Highcharts is an absolutely amazing product. You might catch me harping on about it on Twitter every so often, but it’s because I think it’s that damn good. It’s a mature product, well supported by the creators on it’s support forum.
There was little I wasn’t able to visually match between the libraries. The remaining gaps such as the microcharts could probably just be patched with jQuery sparklines or something similar.
Put simply, there is no technological reason Google couldn’t release a non-Flash version of Analytics tomorrow. They probably already have one in their own labs. Why has it taken so long? I can’t answer that. But I’m not sure I can wait much longer either.
Duck Hunt - UX Lab 001
I made this little experiment about 6 months ago. It was a chance to play with CSS3 perspective transforms and a new JavaScript pattern I had been playing with at work. I never hosted it anywhere and in turn never really showed it to anyone, so here it is. The code is horrendously overwritten, and the visuals are over-designed, but it’s just a bit of fun.
Introducing the UX Lab
The lab is a place for me to share my thoughts and experiments with the web development community. While the name indicates a user interaction and user experience focus - I’ll also be sharing CSS3, JS and HTML5 tidbits. My aim is to make the web a better, more consistent place. And what better way to achieve that than by leading by example.
The experiments will be hosted as one main repo on GitHub. That way you can easily view the code, download any resources, as well as forking or branching it for your own purposes.
Some of the cool things to come:
- Credit Card Type - Passive Selection
- jQuery UI Slider Toggle Switches
- Mac vs. Windows Close Buttons
- Flash-free Google Analytics
- and more…
I want to know how it is that the folks at TwelveSouth keep turning out such amazing “well-duh-I-should-have-though-of-that” stuff.
