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.
Webkit (Chrome/Safari):
Firefox:
Opera:
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.
PhantomJS is a headless webkit-based browser with all kinds of nifty use cases. In it’s simplest form, it’s a javascript-driven web scraper. I’m writing this 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.
Again:
This took me way longer to grasp than necessary, so hopefully this helps you avoid making the mistakes I did.
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:
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.
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:
The page now passes HTML5 validation. Apparently some people care about this.
[video]
[video]
Predicting development roadmaps is something best left to the professionals. Consider this list nothing more than a collection of rumours, leaks, patents and the musings of arm chair experts everywhere. Did I miss something? Think you know better? Sound off in the comments.
The question is not if Siri will make it on to the remaining devices, but when.
Server load and processing power were assumed to be the reason Siri was originally confined to the iPhone 4S. The recent release of the iPad 3 new iPad only managed to bring Siri Dictation to the fold. So if the next major Apple TV release is expected to feature Siri-driven voice navigation, when can we expect to see Siri adoption across all Mac and iOS products? 2012? 2013? Later?
“Siri on Mountain Lion” by Joe Hribar
Commentators seem to question the use of Siri on the iPad. Some argue that it is something to be used “on the go”, not on your lap. Maybe you’re supposed to feel less odd talking to a phone than a tablet PC? Regardless, Apple is never going to achieve the original Knowledge Navigator concept by handicapping devices.
“Siri for iPad UI Mockup” by Rene Ritchie
“Siri Mountain Lion Concept for iPad” by Rene Ritchie
Likelihood: Inevitable.
2012 has already brought about the retina iPad, so it’s not surprising that the rumour-mill continues to churn out “clues” and “leaks” regarding retina displays for the Mac. There’s a few reasons why this isn’t that unrealistic. Both the advent of Thunderbolt and the latest update to the Ivy Bridge processor allows for the greater through-put required to push that many pixels.
The missing piece of the puzzle is already being filled by developers, seemingly of their own accord. GitHub for Mac pushed an update with support for HiDPI mode, driven by people using AirDisplay to enable their retina iPad to act as an extra monitor. This is fantastic, and on par with iPad developers who pre-emptively created retina graphics before a retina iPad had been officially confirmed.
Likelihood: Inevitable.
Further reading:
Aside from the addition of “stacks”, the OSX dock remains relatively unchanged. Personally, I’m a big fan of using the Flurry icon set by IconFactory to achieve a more iOS look and feel. Lion brought about the circular icon and user avatar styling that made this redundant, but I’m looking forward to either visual convergence or a strong divergence. All rounded rectangles, or all circular icons.
The concept below includes a video showing a different take on spatial depth.
“Mountain Lion Dock Concept” by Marshall Bock
Likelihood: Unknown.
The original concept of Square’s credit card system, and in turn the development of Card Case, seem to fill a void caused by the omission of NFC. The use of geolocation to tie Card Case users to stores always seemed like a bit of a hack, albeit necessary. But with the granting of the iWallet patent in March, is Apple going to enter the mix in a very big way?
A hardware advantage is indisputable. But just because Apple sets its sights on an existing app (eg: Reader/Reading List vs. Instapaper/Readability), doesn’t mean the show is over. A designated application will always have the potential to beat out a vain attempt. Square is one of the most innovative and exciting startups I’ve ever come across. I don’t think they have much to worry about.
On the other hand, it’s not unheard of for Apple to release a product with neutered hardware. It’s my understanding that earlier iPhones and Apple TVs had bluetooth chips included, but disabled pending software updates. Recent reports state that the latest Apple TV model has a dual core processor, but is only using one at most. Perhaps the iPhone 5 will roll out with a dormant NFC chip, while Apple waits for vendors and the infrastructure to catch up.
Before Apple announced it’s first dividend since 1995, people speculated what Apple would do with its billions. ”I hope they buy AT&T”, they said. ”I hope they become a carrier”, they said. But why would you want anything to do with a carrier in this day and age?
iMessage is doing a fantastic job of replacing SMS and MMS messages.
Facetime, currently and foreseeably restricted to WiFi, has video calling locked down.
The only remaining piece of the puzzle involves phone calls, and VOIP offers a lot. If Microsoft now owns Skype, will Apple roll their own solution?
For a while now, the only thing separating an iPod Touch from an iPhone has been the whole, you know, phone thing. I think it’s inevitable that the devices will merge as one ubiquitous internet-based method of communication. When entire cities like San Fran and Seattle are offering city-wide WiFi, where does the carrier fit in? Oh damn, that’s right, they’ve got the 4G LTE.
Likelihood: Theoretical only.
As a web dev, iOS 5 had me seriously fist pumping. It added missing features as well as fixing some critical user experience bugs that prevented web apps from behaving like native apps. Position fixed support was absolutely critical, and jQuery Mobile benefited hugely from that. I really hope iOS 6 continues to enable web devs to deliver a rich experience by extending more hardware and software APIs to mobile Safari.
Currently PhoneGap, Titanium and other app wrappers are the solutions to bridge the many gaps. They’re worth checking out if you absolutely must have access to the camera, vibration etc. immediately.
There’s no doubt a complete shake up of the television industry is on its way. I’m really excited at the prospect of pulling the antenna out of the back of my TV and never looking back. All the innovative media startups like Netflix and Hulu never made it to Australia, at least in their true form.
I’ve tried writing this up as a separate blog post about 5 times now. It’s very difficult to articulate just how important this is, and how it will shake up the entire media industry. Apple has the cash to ensure the production quality is world class. They’ve got the diversity in TV shows and movies to build comedy or action “channels” and such a massive archive of music videos that replicating MTV, VH1 etc would be a cinch.
In terms of hardware, who knows if we’ll see a greater than 1080p resolution any time soon. Factors like viewing distance mean that most 1080p TVs are already retina-ish in quality. Digital TV here in Australia barely makes it above 720p, which is incredibly frustrating. On the other hand, Bluray or even true HD TV content always feels so unnatural, so I’m not sure of the appeal. But regardless, if anyone was going to push 4K quality film down the tubes, it would be Apple. They have their own distribution channels in the form of iTunes, working around TV bandwidth limitations - as well as a massive media library which would presumably include access to 4K film.
Likelihood: Long overdue, but we’ll believe it when we see it.
Who knows if we’ll see this before or after a major overhaul, but it’s coming regardless. Apps on the Apple TV are possible if you’re willing to Jailbreak, and the image below hints at a browser being available in the latest JB.
Likelihood: Inevitable, already possible on jail broken devices.
Facebook acquired the Mac software house Sofa back in 2011. They create beautiful UIs and were definitely a good pick up. So what will they be tasked with doing at Facebook? Pundits guessed native Facebook app, but we’re yet to see any information confirming this. The problem with this is that it flies in the face of Facebook’s current direction with Project Spartan. A native application would have to be a simple wrapper around a web view, as that’s what both the iOS apps currently are.
“Facebook App for Mac OS X Lion” by Andrianov Oleg
Likelihood: Unknown, counter-intuitive.
There are already some scripts for automating Growl notifications when Git repositories are pushed, pulled or committed to. I can imagine GitHub taking advantage of the new Notification Center framework in Mountain Lion to deliver these messages. Whether this spells the death of Growl remains to be seen. While features such as “Reading List” in Safari were seen as a direct attack on independent app developers such as Instapaper, it is still a clear choice for the pro user.
Likelihood: Would be awesome.
Budget 7” iPad?
Teardrop shaped iPhone 5?
Macbook Air sized Pros?
Can’t say I really care.
Why not? Apple has demonstrated it is committed to bringing more useful iOS apps such as Reminders and Notes to the Mac with Mountain Lion. It would great to see the Braun-inspired look of the iOS calculator come over. And hey, Apple also loves to keep a little something up its sleeve for when media events look a bit thin. Just look at Cards.app.
[video]
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:
As always, the demo is up to date and available.
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.
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.
Documentation and options are available on the demo page.
It also has its own GitHub repository.