Repository Updates
iOS Theme for jQuery Mobile
Good news! I’ve just pushed some major changes for my iOS jQuery Mobile theme. It now works with jQuery Mobile 1.1.0, which was a bit of a struggle. It also forced me to do some major code cleanup, delivering cross browser gradients and various enhancements I had been putting off.
A full list of changes and resolved bugs follows:
- Supports jQuery Mobile 1.1.0 (this was a nightmare)
- Code cleanup more strictly obeys my coding conventions
- All gradients and effects are now cross browser compatible (Issue #2)
- Updated slider toggle to iOS 5 style (Issue #7)
- Got dialogs looking as close to native as possible considering jQuery Mobile doesn’t support overlayed dialogs (they’re standalone pages) (Issue #3)
The changes have introduced a few minor visual quirks relating to the .ui-focus box shadows etc, but hopefully these will be rectified in the near future.
jQuery Gantt
I made some minor code changes, but the most important thing here was the addition of documentation. The original creator didn’t provide any, so hopefully this makes a bit more sense. I’m sure I’ve missed something here and there (holidays?), but I’ll fix that up as we go.
The changes:
- Added documentation and better demo with bootstrap popovers
- Works with latest jQuery 1.7.2
- Merged pull request for “undefined error”, thanks Nathan Colgate.
- Code and folder cleanup
Front End Development Guidelines
The page now passes HTML5 validation. Apparently some people care about this.
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.
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 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:
Vertically Centering DIVs
The ability to vertically center a DIV in HTML is one of the holy grails of web development, along with sticky footers and just generally making shit work in IE. I had to vertically centre something recently, and I was sick of using the dirty hacks involving absolute positioning, negative margins and extra HTML elements.
The solution below works in all modern browsers, and is supported in IE8 and above.
<div id=”centered”>
I’m centered vertically and horizontally
</div>
#centered {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 200px;
height: 200px;
}
It is listed as Method 4 on this page, but frankly should be Method 1.
The reason I love this solution so much is that we have all been using margin: 0 auto; to horizontally center things for yonks. This answers the age old question of, well, why doesn’t it work vertically either? Another big plus is no extra HTML elements. Generally you’re forced to create one to horizontally center an item. Another to offset it 50% from the top and, depending on your cross browser confidence, another to negatively offset this with a margin. ■
@font-face Smoothing in Windows Chrome
WARNING: THE FIX BELOW IS DEPRECATED IN CHROME 16 + 17. SAD-FACE :(
You may have noticed the issue in which @font-face embeds rendered in Windows Chrome look mighty jagged. Fixes such as -webkit-font-smoothing barely do anything, so this hack relies on a fairly well known fact about Windows Chrome: putting text-shadow on anything makes it blurry as shit. Original implementations of the hack relied on a solid text-shadow colour, but this no longer works in recent updates. It is now vital to enter an rgba() value instead.
Hopefully you will end up with something like this:
h1, h2, h3, h4, h5 {
font-family: ‘TodaySHOP-BoldRegular’;
text-shadow: 0 1px 0 rgba(0,0,0,0.01);
}
Real World Examples:
A real world example of this is best demonstrated on my own Front End Development Guidelines. My header tags were smoothed out with a solid hex colour, prior to the rgba() update. They’re still broken to date. Oops.
But the problem is much more widespread. Consider this ironic blog post on IE font smoothing by @Koodoz, in which the Chrome problem rears its ugly head again. It leads to some interesting accidental changes, where “hate” has become “hale”.
Caveats:
Be aware that this can modify the kerning of the text. There are also situations where the font is hinted in a way that this hack is detrimental. The over-used League Gothic, for example, does not bode well with this method at smaller font-sizes. There were also some comments that this makes Chrome on Mac even blurrier than usual.
Credit:
I’ve been trying to track down who taught me this little trick for a while now. I originally assumed it was @Koodoz, as he invests heavily in @font-face in his designs - but it was news to him. I thought it might be @Rainerbird, as we both read the same kind of stuff online. No dice there either. This blog post also describes the method, but I have probably been using the method just as long and don’t recall visiting that site. The comments and feedback on that blog post are great for further explaining the method and its shortfalls. ■
A Sneak Peak at Aristo 2
As the Cappuccino Conference in the states winds down, a sneak peak at Aristo 2 was announced over Twitter. Frequent readers will remember that Sofa designed the original theme for the Cappuccino framework - and my jQuery UI theme was based off of this. Not only does the update refresh familiar UI components, it also includes an exciting new icon pack. From what you can see below, they’re nothing to laugh at either. A preliminary count shows 108 icons available in the same glyph style no doubt popularised by iOS and now OS X.
The changes have already been reflected in the design section of Sofa’s website, but the PSD on their GitHub repository remains unchanged.
You can get a more in depth view of both the UI components and the icon set by downloading the sneak peak of Aristo 2.
So Will I Be Making an Aristo 2.0 jQuery UI Theme?
Initially, no. I think that the original Aristo theme is still travelling along quite nicely. The design direction the new theme is taking is not entirely different enough to warrant the extra time. It’s also worth considering that a lot of the unique touches in Aristo 2 don’t translate that well to jQuery UI themes. The modal and datepicker are just different enough to cause a few cross-browser headaches. Other components like checkboxes, radio buttons and dropdowns aren’t natively supported - even if popular plugins do exist.
Hats off as usual to Sofa, it’s no surprise they were acquired by Facebook.
Front End Development Guidelines - Update
Well that was a wild ride indeed! Since release, the front-end development guidelines I posted have gone bananas. Tens of thousands of page views, plenty of GitHub forks and followers, and even a kind word or two. Many thanks to Paul Irish and other figureheads for tweeting about the resource I put together. It really helped spread the word about what I was trying to do, and in turn pulled in some great comments and suggestions logged through the GitHub issues interface.
As we stand, there are currently 8 open issues and I’ve managed to close 20 others.
Some of the most recent changes I’ve made include:
- Rewriting the section on commenting your JavaScript. My team leader at my previous employer put this one together when he was proofing my work, and slipped it in. A lot of people have flagged it as a massive WTF and it has seen been replaced.
- I’ve merged in a range of spelling and grammatical changes. What can I say? Me dun speak english good-like.
- Added the new “micro clearfix” to the section on clearing floats.
- Added a section on commenting CSS blocks (handy!).
- Further discussed whether remapping “this” to “self” is a good idea.
- Added section IDs for deep linking (but no way to easily do so, as yet).
- Removed the Gotham web font, which I embarrassingly left in, ignoring my own advice.
Thanks for reading and contributing, be sure to send through any further suggestions using the issues interface or via my email address listed on the right.
