bootstrap.footnotes.js - UX Lab 008
I love the Instapaper-style footnotes/endnotes that came about with the last major update. Here they are in web form, as a jQuery/Bootstrap plugin. Unfortunately there’s a dependency upon Bootstrap CSS/JS, but such is life. It’s retina ready too - as everything else should be these days.
Here it is in action:
Documentation and options are available on the demo page.
It also has its own GitHub repository.
HTML iOS Notifications - UX Lab 007
I thought I’d build a facsimile iOS notification plugin for shits and giggles. It’s pretty much the exact opposite of a good UX, but it’s more of a proof of concept than anything else.
- It’s 100% wide on standard and retina iPhones and 60% on desktop and iPad resolutions.
- It has built in retina icon handling.
- Doesn’t break middle mouse clicks when using a URL.
- Passes JSHint.
- It works with Chrome, Safari, Firefox and I believe Opera, but I haven’t tested.
Documentation and options are available on the demo page.
It also has its own GitHub repository.
3D Accordion Effect - UX Lab 006
I posted the following experiment as a way of demonstrating just how far the line has blurred between web based animation and OS based animation. I saw Dribbble shots (one and two) by Indian designer Pranav Pramod and was inspired to replicate the effect in CSS3.
Unfortunately nothing is ever as easy as it seems. If it was, someone else would have already posted a similar effect. The problem is that when animating something with a 3D transform with a forced perspective, there is no way to measure or mirror the actual height represented in the browser using CSS. If you animate the parent element from 0px in height to 30px, it’s a straightforward linear animation. The 3D transform, on the other hand, changes on a non-linear scale because of the perspective.
There are two solutions, neither of which are desirable.
The first involves JavaScript, which frankly I had tried to avoid. In this example, the animation is triggered by the addition of a CSS class via JavaScript - but could just as easily be bound to an :active:target CSS event. The only way to get the actual browser rendered height of the element is to get it via JavaScript with the obj.clientHeight getter. While discussion pointed to wrapping the object in a parent element and not needing JavaScript at all, this does not work in all browsers.
Instead the JavaScript method involves binding a function with requestAnimationFrame which sets the parent objects height to mirror the calculated height of the transformed object. Accurate, but if we wanted to perform calculations many times per second, why did we bother animating with CSS at all?
The other method, considerably less accurate and very fiddly, is to match the easing or timing of the two animations. It may be possible to create a custom timing function using cubic-bezier which matches the rate of easing of a 30px tall object, rotating from -90deg to 0deg, with a perspective of 400 units. But why would you? That’s shit house.
Maybe in this instance a flat out Canvas animation would have been much more sensible. You’re still performing a function every ‘x’ milliseconds, but at least the canvas itself may be hardware accelerated. Until CSS animation matures, we will most likely have to abuse the JavaScript add-ons such as the one described earlier. Or even better yet, sever the ties with HTML and CSS and - get this right - use graphical languages for what they’re intended.
Ninja Edit: Also, you can’t yet animate background gradients so the whole 3D effect on the depth of the flaps is kind of impossible for now.
Sad-face Edit: The second I posted this, someone posted pretty much the exact same thing to Hacker News in a much more polished way. Check out Paperfold CSS.
jQuery-UI.toggleSwitch() - UX Lab 005
The last thing web devs need is another toggle plugin. But this was developed for sites that already run jQuery UI and don’t want the extra bloat of yet another library. It draws upon the theme .ui-slider for the look and feel, and can be applied to <select> elements with two child options.
Configuration options and examples are contained within the UX Lab page. I guess this warrants it’s own GitHub repository for change management and issue tracking. I’ll get around to that eventually.
Idle jGrowl Re-routing - UX Lab 004
Paul Irish wrote a pretty chill script back in 2009 for detecting when a user becomes inactive. It’s quite ingenious in its simplicity, as the best things usually are. What wasn’t explained fully is the ways in which this can be used to deliver a better user experience. It’s fantastic for preventing timed or asynchronous actions when users aren’t going to benefit from the action.
This quick little experiment is aimed at demonstrating the concept in the simplest form.
A jGrowl notification triggered every ‘x’ seconds, or by a server event, isn’t of much use when the user isn’t around. They disappear after a few seconds. So instead, if the user is deemed inactive, you should make them “stick” or push them to a modal, similar to the loathed Growl notification rollup pictured below.
Obviously the linked example isn’t quite as eloquent, but it’s not like the Growl rollup was that well received to begin with. See what other cool shit you can come up with.
It’s just a little micro-site tying together a range of social media websites. There’s some fancy coding behind the scenes that predicts where I’m going to be at any given time, because we’re all a walking bell curve. It’s good to get it out the door, because designers are notorious for over-designing and iterating their personal sites.
Enjoy,
taitbrown.com
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.
