User Styles: The Age
Alternate title: “The day I took Occam’s razor to The Age”
I really dislike visiting theage.com.au. It’s ridden with click-bait articles, annoying advertising and shameless cross promotion, but for some reason we can’t seem to shake it as a local news source. What else are we going to read, the Hun? I’m not alone in expressing these sentiments, and this is a post I could have composed almost entirely from tweets.
I’ve highlighted all ‘news’ on The Age homepage (i.e., not entertainment, sport, editorial, lifestyle, etc) dl.dropbox.com/u/128401/Scree…
This got a few people discussing custom user styles for The Age, and I decided to have a dabble.
Are you left wondering why I hid certain features? Particular “news” streams, comments, author bios et cetera? Let’s focus on the news, and nothing but the news. Reading the comments of any Australian news website, generally comprised of deliberate trolling or plain good old fashioned stupidity, is a pain I wouldn’t wish upon anyone.
*passes thru suburbs* roll up ur window, son. this is a bad neighborhood. this is where ppl who comment on newspaper articles live
You can try my user styles on for size by installing something like Stylish (Chrome Firefox) and copying the styles across from the GitHub repository. I attempted to make the upgrade process as seamless as possible by referencing the raw CSS with an import tag but GitHub prevents this by serving up a different content-type. That would have meant any improvements I made would have reflected immediately. I’ll think of something else.
iOS Theme Update
I pushed an update to the iOS jQuery UI Theme to add support for the latest release - jQuery Mobile 1.2.0. Not much should change, but there is a notable syntax change to “in page” buttons.
The changes are:
- Added support for jQuery Mobile 1.2.0
- Support for, and styling of new
popupelements - An example iOS style
popupas per the image below (would be best if you set it up with a timer to hide after a couple of seconds?) - Major refactoring of “in page” button styling. No more messy
.ui-btn:not(this):not(that), instead it inherits from.ui-btn-plain. - Closed various issues and pull requests
- While basic popups are supported, no nested popup menu support is available
- As above, button syntax has changed. This causes an issue with
<button>elements. I’ve raised a bug here.
Delta jQuery UI Theme
Hey guys, just a quick heads up that I released the “Delta” jQuery UI theme a while ago over on the blog of my employer, Kiandra IT. It’s a completely free theme, and the best looking one yet. There are some known issues reported on the GitHub repo, so I’ve got to find some time to push up the fixes. All in all it’s pretty stable and cross browser compliant. It works on both light and dark backgrounds, something you don’t always see. It’s also retina display friendly and makes use of my OS-dependent modal script.
The details:
Enjoy.
The Milwaukee PD Website
I first time I saw the Milwaukee PD website was on Awwwards. While the design treatment and technical execution was undoubtedly rich, I couldn’t quite put into words what was just so wrong about it all. It goes without saying that the American approach to policing is different to the rest of the world, but I still felt the agency was stressing the importance of the wrong information. Join the force, play with guns and big, black, military grade machinery. Less of a focus on making a difference, working with the community - just guns, trucks and bad guys.
This comment from jpxxx on Hacker News summarises it beautifully.
It’s militaristic, it’s alienating, it’s fetishistic, it’s hostile, it insidiously portrays class and ethnic conflict as an everyday battle worth fighting, and it panders to the worst in Americans who already endorse the myriad excesses and injustices of an ever-growing quasi-private law and order machine that has ruined the lives of millions.
But awesome job on the scrollbars, yo.
Introducing techevents.co
I’m pleased to announce the launch of a micro-site aimed at aggregating the multitude of tech events centered in and around Melbourne, Australia. It’s far from ready but with the sheer number of events in the next few days/weeks I thought it was important I get it out the door.
It’s buzz word compliant!
It’s responsive. It’s got some subtle parallax. It passes JS Hint.
It’s boilerplated, bootstrapped, heroku-hosted, JSON driven, jQuery drawn wizardry.
But, the err, source code has seen better days. Hopefully I can clean that up in the next few days.
It’s been a pleasure working with @sesh on this. I basically provide him with a static JSON file, he uses that as a DTO for his back end stuff and, once we flick a magic switch, all the data becomes live. He flat out gets what you’re on about so most of the work can be organised in a 140 character twitter DM.
In terms of future functionality, we plan on cleaning up the UI a bit, adding more events and the ability to change state/location, with the potential for other countries too.
Beautiful Retina iPad Wallpapers
I’m not one for customising my iPhone or iPad to the nth degree, which is why I thought I would share this amazing retina iPad wallpaper collection with you all. A lot of wallpapers are suited only to lock screens, and contrast badly with the app icons of the home screen. But not these beauties! I really struggle to pick just one to use at a time, and I’m sure you will too.
Check them out over at Simon C Page’s blog.
Many thanks to @james_paintwork for the find.
Repository Updates (iOS Theme + jQuery.Gantt + Aristo)
Hey guys, not much has happening on the design/development front while I’ve been away on leave. Today I’ve landed some fairly big pull requests and bug fixes to what are probably my three biggest repos.
jQuery.Gantt
This is the big one. I made some pretty major changes before I went away but wanted a few more people to test it before I did the writeup.
I received a fairly major (and necessary) rewrite from Leo Pfeifenberger who sped up this project like you wouldn’t believe. It wasn’t a simple matter of landing the pull request, as the performance changes did come at the cost of coding standards and consistency. Some parts had been buggered by what looked like Visual Studio auto formatting, but they could have been hand-coded that way too.
For future reference, here are my own personal front end dev guidelines that have been received well by the community. They’ve changed in some regards based on feedback from individuals and organisations and represent how you should aim to format your code.
- Major performance increases.
A before and after IE9 test shows performance going from 20 seconds to 400ms.
That’s 2% of the previous run time. - All new click events - fired when clicking an item or when clicking the empty space. Use this to edit events or create new events at certain points.
- State persistance - requires cookie.js to work.
- Scroll to today on load
- Extensive documentation
- Defined a license (MIT)
- Removing
$.ajaxSetup, which was corrupting other scripts in the page.
According to this stackoverflow answer it was only there to ensure it worked in ASP.NET situations. If you’re using it there, consider setting$.ajaxSetupexternally.
Unfortunately that means there are some new issues:
- Code standards - I spent a considerable amount of time running the code through JSHint and fixing issues. I got most, but that included setting a few ignores.
- Eval - yep, as above, you’ll notice that there’s an eval in the code. Yuck.
- Holiday and “Today” highlighting are not occurring on the cell, only the header.
Two steps forward one step back. No biggie.
iOS jQuery Mobile Theme
I realised there was a big difference between what I was seeing in Chrome, the iOS simulator and my iPhone running iOS 5.1. Turns out the iOS simulator was only running 4.3.1, so I’ve now got the 5.1 simulator and that’s helped me resolve some visual quirks.
- Fixed: header bars had black top border
- Fixed: Vertical centring of header buttons was off (related to above, layout woes)
- Fixed: Black buttons had blue text shadow
- Fixed: Footer icons had crept to the right with last update (jQuery Mobile styles took precedence)
- Pull Request: <label> styles coming from poorly scoped selector
- Pull Request: Demo page typo
- Set demo page transitions to “slide” by default
- Set all demo page toolbars to be position=”fixed” by default
- Decided on licensing (MIT)
Aristo jQuery UI Theme
- Fixed: Cross browser CSS3 animations appear to have been re-instated.
- Pull Request: Added a non-prefixed value that I missed.
- Pull Request: Widget nesting issue fixed.
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.
jQuery Mobile 1.0.1 - iOS Theme Compatible
I haven’t touched the iOS inspired jQuery Mobile theme in quite a while, but a few of you have been messaging, mailing at tweeting at me asking if I’ll support the jQuery Mobile 1.0 build. And….. it’s done. Here’s the list of changes:
- Updated to jQuery Mobile 1.0.1 build
- Fixed graphical issues stemming from this: #23, #24 and #25
- Page buttons now take on gradient-less style (previously only <a> tags)
- Merged a pull request related to a button icon bug fix
As always, the demo is up to date and available.
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.
You may have come across the work of Bret Victor before. If not, prepare to lose a substantial part of your day investigating one of the most inspiring tech innovators of today. Not only does the following presentation challenge the mental model behind almost every IDE in the market today, it exposes the fundamental flaw in how we approach problems. It also helps identify those who had that special x-factor in devising solutions by understanding the motivating principles of users when faced with a problem.
It makes me think of the particularly over-used but relevant quote:
“If I had asked people what they wanted, they would have said faster horses.”
― Henry Ford
If you want to see some of Bret’s work in action but don’t know where to begin on his website, I highly recommend you check out his Tangle project.
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
A behind the scenes look at Mill Touch. There are some amazing concepts going on with this device, aside from bringing the Minority Report concept to life. I particularly love the overlay where you can see the pre and post productions at the same time (around 2:55).
I never knew the team at Mill were behind so many incredible commercials. Nike. Old Spice. Skittles. Budweiser. Various super bowl ads. Here is their 2011 showreel and their more recognisable 2010 showreel.
Love the level of detail on the new iCloud site!
(via alanvanroemburg)
iOS Inspired jQuery Mobile Theme
jQuery Mobile doesn’t deviate far from the pattern established by its sibling libraries: provide something that normalises functionality and/or design across browsers and operating systems.
The work by the Filament Group has been vital for standardising the look and feel of jQuery Mobile, especially when dealing with incredibly dated or under-featured mobile browsers. Borrowing upon conventions established by both the iOS and Android operating systems, they created something that is palatable across a range of devices.
There will be odd instances when you need an application to look as close to native as possible. I completely agree with the Filament Group’s arguments against this, but currently designers are forced to roll their own solution. What I have created is the beta framework for an iOS-inspired theme that attempts to bring jQuery inline with the native iOS UI elements. I actually began this project when the first alpha was released, but with taking on a new job and other responsibilities, I found myself lagging behind the release schedule. I’m not sure of the response this will get, so hopefully I can gauge how much time I should spend on this in future.
But without further ado: here is the iOS-inspired theme for jQuery Mobile. It works great in Chrome, Safari, iPhone and iPad mobile Safaris.
Some Caveats
- To achieve the look of the iOS style back button with CSS3, the HTML is customised and therefore must be copied and pasted manually. The back button template can be found in the GitHub readme file.
- The CSS3 back button isn’t perfect, there are some jaggedness and shadow issues.
- Plenty of elements still remain unstyled, or are missing hit state styling.
- Cross browser compliance is a low priority.
- This is an add-on theming layer. It was impossible to fork the actual jQuery Mobile theme and attempt to keep up with their changes, so this just sits as a skinning layer on top.
Some Issues This Exposes in jQuery Mobile
- Dialogs need some serious work. I could have spent a lot of time and made my dialogs look exactly like the iOS ones, but this would have involved some pretty hectic CSS and JavaScript. As is I had to do a bit of a work around to get them to dock to the bottom and not the top. Most notably broken, the inability for these dialogs to behave like modals - showing the background as obscured.
- Back button syntax. They’re are definitely some cleaner ways to create the iOS style back buttons. I was keen to avoid images, but an image mask might have done really well in this situation. Regardless of that, you will probably find yourself plugging in custom HTML when working with jQuery mobile, and not just the buttons.
- It’s bloody hard to keep up with the release cycle. This is not a bad thing ;)
I am, as always, open to merging pull requests and suggestions to help improve this project. I must also stress that it is important that truly innovative changes best be held off until jQuery Mobile makes it out of beta. ■
