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.
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.
Here’s a bulk upload of three UX Lab experiments. I’ve been pretty busy, but these are ideas I’ve had for a long time and have been kicking around on my hard drive to some extent. I thought I’d better get them out and about.UX Lab 010 - Blurred Modal Backgrounds
Modal dialogs are used in preference to regular popups because they generally disable interaction with the page behind and guide focus to the new window. This is achieved by visually obscuring the content behind the modal, but not so much that the two seem disconnected.
As long as people have been doing this, the have been attempting to blur out the background to greater magnify the effect. It hasn’t been possible without the use of non-dynamic PNGs, Flash or some other form of hack. Now that Webkit-based browsers are supporting the CSS filter property (not to be confused with the IE legacy one), the sought after feature is now possible.
The linked demo guides focus in two modes. One blurs out all background elements, the other desaturates them. Unfortunately there is no support for animation of these properties, so until that is implemented the effect is a bit blunt.
I see notifications similar to these throughout iOS and OS X applications everywhere. I like the way they demand a bit more attention than your normal jGrowl, but still aren’t too impactful.
Maybe I’ll fork these properly into their own GitHub repo. Maybe I won’t.
This is something I thought of a long time back, and has been live in Kiandra IT development template for a while now. It’s frustrating that on the web, OK/Cancel button order and close button placement are all decided by the designer/developer. I remember a while back when a notable ex-Apple designer more or less told Dan Cederholm the close/delete icons should be on the left for everyone. Sure, there are probably more Macs and iOS devices on Dribbble than Windows - but it’s still pretty inconsiderate to force that upon the entire audience.
A UX guy once explained to me that the OK/Cancel placement on a Mac had a lot to do with the linear direction of the workflow. The OK being on the right, as it advances you another step to the right in a wizard. I remember the Windows placement being that you read the desired action first, and that’s the most important. After a bit of research, it appears Jakob Neilsen summarised it quite nicely..
But the little Mexican girl in me says:
It’s not even remotely difficult to implement technically, and shows you’re willing to compromise. Exhaustive studies may one day show one method to be “better” than the other, but until then, don’t be a dick about it.
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.
As long as I continue to participate in the in-house Kiandra IT Friday presentations, I’ll endeavor to open source and post my material online where it makes sense.
I decided not to cover any of the hardware and browser based innovations as they’re more about exposing new device properties, inputs and outputs. I wanted to focus on how we’re writing our code, not WHAT we’re writing. I also forgot to add unit testing to the slides, but we covered it loosely.
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.
$.ajaxSetup, which was corrupting other scripts in the page.
Unfortunately that means there are some new issues:
Two steps forward one step back. No biggie.
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.
Update: Now that iOS 6 is out and the NDA is no more, Max Firtman has posted an excellent summary of new iPhone 5 and iOS 6 mobile Safari enhancements and regressions. It goes into further detail and mentions features that couldn’t be publicly announced while still under NDA (not that I was, I’m not a registered dev).
Corrections: Although I recommend checking out the above link, I received two corrections via email from Apple. One regarding smart banner documentation and one clarifying css filter support.
Here’s what we know about Mobile Safari in iOS 6 so far, and what it brings to the table for front end developers. I expect there’s more to come in future betas and as people experiment with the current beta more.Web Inspector via Remote Debugging
The pre-existing developer tools for iOS are limited to say the least. A
console.log is flattened to a single level, without actually presenting the contents. iOS 6 introduces the Safari Web Inspector to both the iPhone and the iPad via the Safari ‘Remote Debugging’ interface.
It implements a similar interface to how the Chrome for Android remote debugging works. Safari remote debugging acts in a similar fashion, such that when you select an item in the Safari desktop inspector, it is highlighted on the iOS device.
Prior to this, the only alternative was embedding Firebug Lite, which while powerful, is not designed for touch screen devices.
As far as I can tell, the old, flawed Developer Console has been removed.
Many thanks to Andrew Harrison for fact checking and screenshots.<input type=”file”>
Finally, it’s here. You can now upload photos and videos from the Photo Library using a regular input element. This was previously only possible via the use of Phonegap etc.
This is a real game changer for mobile apps.
No word yet on if it allows you to capture a new photo. It does.
Real time camera streaming has been confirmed as not supported.Smart App Banners
The new Smart App Banners are a way of showing Safari users a message indicating that a native app for the website is available in the App Store. While not really a great thing for those of us hoping to move apps back towards the web, it’s still a good experience for the end user. It’s also possible to preserve the page/state/view and send this to the native app. Documentation is available on the Safari Developer Library.
Picture via Wired.Web Audio API
How useful this is remains to be seen. Web audio tends to be fairly handicapped, regardless of browser, operating system or device. Microsoft’s HTML5 Cut The Rope game still used Flash to play the sound effects. I truly hope the iOS implementation changes that, but I’m also a realist.CSS Filters
According to the Can I Use report, these are only supported in Chrome 18+ with a
-webkit- prefix. CSS Filters are also supported in Safari 6, on Mac OS X Lion and Mountain Lion (10.7 and 10.8, respectively).
Interesting by itself, but with desktop browsers beginning to land support for a full screen API - can this be triggered progammatically?requestAnimationFrame
This has landed, albeit with a
You should be using the Paul Irish polyfill anyway.App Cache Upped from 5MB to 25MB
I believe it used to show you a dialog asking for more if you exceeded the 5MB limit.JPEG Downsampling Ceiling Lifted
This happens every year, so it’s not really news. Nitro was previously brought to home screen apps giving them a massive performance boost. Nitro hasn’t yet been brought across to UIWebViews, one of the many reasons that the Facebook app is a steaming pile of shit. Maybe future iOS 6 betas will bring Nitro to UIWebViews? Maybe it’s already in iOS 6?
I was lucky enough to win tickets to the Web Directions Code 2012 conference in Melbourne this year. I had an hour to put together a quick little wrap up for our usual Friday in-house presentations just to show everyone else here at Kiandra just what they missed out on.
I spoke with John Allsop and he’s pretty keen to get the videos of the presentations up soon. They’ve collected all the slides, audio and video of the presentations - and are hoping to put together a rich multimedia experience similar to Mozilla’s popcorn.js. I didn’t touch on any of the presentation material in my talk as I’m really looking forward to showing the videos instead.
I figured I might as well as put it online if others want to do the same. It’s a high level overview of Web Directions itself, and the topics covered at the conference. You can see it by following the link below, but it’s also available on GitHub for your own uses.
David Calhoun’s iPhone slider built with an <input type=”range”> is a fantastic example of what’s possible with a single native input element, combined with pseudo and shadow elements. But, like most things these days, it’s Webkit only.
A recurring comment on HN goes something along the lines of:
Webkit only? Webkit is the new IE6.
But this is quite frankly bullshit. Firefox and Opera still streak ahead in other areas*, but the fact is that Webkit-based browsers consistently implement features we front end devs need on a day-to-day basis. Perhaps that’s a result of Google employing people like Paul Irish as a developer advocate. Perhaps he is responsible for prioritising features that real front ends like us actually want to use? I can only speculate, but the benefits cannot be denied.
So what if you try and build an iOS-inspired toggle switch with a single, native checkbox? Dissecting it mentally, all the pieces seemed to be there. I can use :before and :after pseudo elements to construct the extra visual elements. Maybe I can use data attributes to set the on and off state text? In fact, I even expected Firefox to outshine all other browsers in this test as it would be the only one to animate pseudo elements.
But this is the reality.
Hacks I considered to try and get it working:
Anyhoo, the experiment is designed so that the second Firefox and others begin to implement the missing functionality, it should just work.
* Firefox remains the only browser that can animate pseudo elements, and an Opera nightly is the only browser that currently implements the getUserMedia specification.
guide note for any novice users having problems installing it on OS X.
Ariya Hidayat wrote instructions on installing PhantomJS on OSX, but glosses over one of the most important steps that is assumed knowledge for competent devs. He has made it as simple as possible to download and extract the binary source as an executable, but as new Mac/Unix user I didn’t understand what was meant by references to changing the PATH.
In order to run phantomjs as a command (and therefore pass another file to it), the folder phantomjs is stored in needs to be indexed via PATHs. This means you’ll be able to: phantomjs helloworld.js. Prior to adding it the PATH reference, phantomjs would not be recognised as a command - or if run from inside the executable, it would result in parse error.
So, all you need to do is add the directory to the PATH variable and you’ll be good to go.
This took me way longer to grasp than necessary, so hopefully this helps you avoid making the mistakes I did.