July 27, 2011 8

Removing Flash from OS X: My experience, frustrations & some HTML5 alternatives

By

Missing Plugin

Its now been a couple of months since I removed Flash from my Mac & I thought it might be useful to share some of my experiences, both good & bad. It hasn’t been 100% plain sailing but my Mac now definitely runs quieter, lasts longer and my browser no longer crashes on a daily basis!

Why remove Flash?

You may be asking, why would I want to remove Flash? My reasons for removing Flash are:

  • It makes the fans on my Mac go crazy
  • It reduces the battery life
  • I got sick of Safari freezing up and eventually crashing (almost daily!)

There are also other, more politically charged issues, such as it not being terribly good at accessibility or the fact that it doesn’t run well on mobile/tablet devices1. But these weren’t really of any consequence when considering removing Flash from my desktop machine.

Removing Flash

John Gruber explains the process of removing Flash from you system. He also outlines a work around for sites that still need Flash by installing Chrome & using it for sites that require Flash. Chrome comes bundled with its own version of the Flash plugin that doesn’t need to be installed at the system level, which makes it a great solution for the occasional Flash website. As I have to regularly test code in a number of browsers I already had Chrome installed, so this was a pretty easy work around for me.

Open in Chrome

Instead of having to copy and paste URL’s between Safari & Chrome when you land on a website that absolutely needs Flash, I installed the ‘Open in Chrome’ Safari Extension. This, via a small proxy app, lets you add an icon to Safari’s toolbar which opens the current page in Chrome. It works really well and definitely improves the workflow2. This differs a little from Grubers suggestion but having this button works better for me.

I’d also highly recommend installing the YouTube5 Safari Extension, which in the authors own words:

removes the need to use flash on YouTube by converting all videos to their HTML5 video tag equivalents. It also has the added benefits of decreased CPU usage compared to flash, and the removal of in-video ads.

Update (05/08/11) Joseph Schmitt posted an alternative to the YouTube5 extension for anyone currently having problem with the plugin. Its called Embedinator and produces largely the same result as YouTube5 but using a slightly different technique.

Embedinator

Problem Sites I visit regularly

Here are some of the sites that I visit regularly that have been an issue since removing Flash:

  • Google Analytics

    Like most people I know, I use Google Analytics to track my sites usage, unfortunately the charts/maps require Flash and won’t display.

  • Facebook

    Videos don’t work.

  • BBC iPlayer

    Video/Audio don’t work

  • Music Promo Sites (Fatdrop/React Promo)

    I receive a lot of music promo’s because of my production work (check out Caper on Soundcloud). Typically promos come from Fatdrop or ReactPromo, both sites require Flash for previewing the audio.

  • SoundCloud

    By default, Flash is required to play audio. There is a setting hidden in your account details to enable HTML5 audio support which worked a treat for me!

Ironically, I found the solution to most of the above sites was to use iOS instead of my Mac. I can check my GA stats quickly using Analytics App (although still use Chrome for a proper analysis) & video for both Facebook & iPlayer work perfectly on the iPhone/iPad.

The only common use I have for Flash that I didn’t find a suitable work around for was listening to promo music.

Common uses for Flash on the web

When browsing without Flash you notice just how many sites make use of Flash in someway or another. Most of these use-cases could be just as adequately solved using HTML5, especially as browser parity improves.

Video/Audio

Video

This has to be the most common use of Flash on the web. HTML5 has an answer to this in the form of the <video> tag. This however isn’t without its complexity, as things currently stand video needs to be encoded in at least two formats to work across all the browsers, h.264 (Safari/IE) and Ogg Theora or VP8/WebM (Chrome/Firefox/Opera).

There are also issues with lack of DRM support which will likely prevent uptake from large copyright holders.

With all that said, the most frustrating thing about the use of Flash for video is that many sites already provide an h.264 feed for iOS, they just don’t enable access via the desktop. The iPlayer & Facebook are both examples of this!

Further Reading

File Upload

Progressbar

Whilst HTML forms have been capable of file uploads for years, they haven’t allow for progress indicators or (until recently) file upload via AJAX. Libraries such as swfupload exist to fill this gap and use a small Flash application to provide access to the local filesystem along with a Javascript API/bridge to communicate via the browser. Having used this a number of times, I’m glad there is now an alternative on the horizon!!

With a combination of the Files API & XMLHttpRequest 2 (aka Ajax 2), its now possible to access the local filesystem and upload files asynchronously with 100% Javascript.

Further Reading

Copy to Clipboard

Clipboard

There isn’t currently a way to add something to the systems clipboard directly from Javascript. There are ways to achieve this in both Firefox & IE but neither are standardised.

I suspect Flash will be filling this void for a while yet.

Charts/Graphs

Charts

Traditionally, rich visualisations such as graphs & charts have either been presented as pre-rendered images or by using Flash. HTML5 gives us the canvas and SVG support which both provide ways of generating compelling alternatives.

With libraries such as Raphaël and Highcharts its now time to stop using Flash for charts.

Further Reading

Custom Fonts

Typography

One of the biggest bugbears of web-designers has always been the incredible small number of web safe fonts that can be used. Flash once again stepped in to meet this need and sIFR was born. sIFR enabled custom typography on a website without its visitors having to have the required fonts installed. It was however horrible to use!

We now have @font-face support which is far easier to implement and provides a better end user experience. Even the author suggests using @font-face instead of sIFR:

Given that we’re well into 2011 at the time of writing, you should really think twice about deploying sIFR. Instead, have a look at Typekit or Fontdeck. There hasn’t been an update to sIFR since October 2008, and consequently it’s probably riddled with bugs. Seriously, don’t use it. It’s unsupported software.

Typekit and the like offer a great selection of commercial fonts but if you’re on a budget Google have also made available many public domain fonts via their own Webfonts API.

Further Reading

Animation (mainly adverts!)

Animation

To be honest, missing out on adverts on the web is no major hardship! However, more broadly speaking animations are a good thing & this is an area where HTML5 has a number of alternatives. The canvas is one possibility but I think a better solution is to take advantage of CSS3 animations/transitions where all text used is accessible & indexable. The tooling to creating CSS3 based animations are also starting to become available, be sure to check out Sencha Animator.

Further Reading

Was it worth the hassle?

In a word, yes! There are, as I’ve outlined, still a few cases where I need to fire up Chrome to view a specific site but on the whole the pros far outweigh the cons.

My laptop battery does last longer, my fans don’t go crazy just browsing the web and Safari no longer falls over on a daily basis. Also, Safari in general is much more responsive and, completely anecdotally, the OS feels a lot quicker. I’ve also noticed that CSS3 transitions seem to be a lot smoother and less prone to timing jitters, perhaps this is due to the reduced memory footprint of Safari sans plugin?

That said, I do believe Flash still has its place. It would however just be good to see the unnecessary uses for flash diminish and be replaced with solid HTML5 alternatives.

  1. I think this goes deeper than just the obvious technical reasons – but thats for another blog post []
  2. Under Lion the loading indicator never stops spinning but this is only and aesthetic issue []
  • Anonymous

    Tests show that flash is about twice as fast as HTML5 in general, animation etc so turning off ads and animation is just a temporary solution and we will see as bad in html5. Also Flash is more than video and ads. Another aspect is that CSS animation and other things not work in all browsers. Turn off JavaScript also and you will save some more battery.

  • ianstudio

    I also tend to think we’ll soon see horrendous things in HTML5/CSS animation.. like the terrible Flash-ladden Myspace pages a few years ago that could bring any computer to a standstill. In a way I wish Flash were the open technology.. and paradigm. I tend to feel we had a top model and are grooming second runner up to fill her shoes.. then again second runner up is open and gives herself to all.. so be it. In my view Adobe should have released Flash to the World. ActionScript has come a long way.. and catching up using HTML5, CSS, JS, Canvas will be laborious. However for survival reasons I too am getting laid by second runner up..

  • Mick

    For five years on OS X I never (and I mean NEVER) had flash plugin crush or freeze the browser or anything. And if you really care so much about your performance and battery life you should turn off JavaScript in first place. For every shitty flash site there are 1000 shitty JS sites, which are no better.

  • http://www.joelambert.co.uk Joe Lambert

    In general, Flash is the biggest single cause of Safari crashes. See http://daringfireball.net/2010/01/apple_adobe_flash. This tallies with my personal experience and as I mentioned in the article my daily browsing is now a lot more pleasant having removed the plugin.

  • http://www.joelambert.co.uk Joe Lambert

    Do you have a link to cite the speed comparison? That is certainly a surprising statistic given how well low powered devices (i.e. mobiles/tablets) run CSS animations and yet how no device has yet been able to run Flash at an acceptable standard?

    The issue of CSS animation not working in all browsers is valid but temporary. CSS3/HTML5 is an open standard and all major browser vendors have committed to implementing it. You could also say the same for Flash not running in all browsers, it doesn’t work on IOS and doesn’t work well on any other mobile/tablet platform. Given the rise in popularity of these devices this is fast becoming a significant issue!

    I also think that any performance issues around CSS3 animations becomes the browser vendors problem meaning optimisation can be done at source without having to rely on any third party involvement. If a browser performs badly, then there are a number of others that you can switch to. Competition like this is good for the end users.

  • Tomas

    Of course but i also worked with both in many years and noticed the difference

    craftymind.com/guimark2/ craftymind.com/guimark3/

    The problem is that it take such time to be implemented in all browsers and features added so slow. Look at any cool html5 demo and it work terrible on idevices, a lot of flash work good on mobiles but of course not a full page of animated ads is perfect. Advanced flash is mostly programmed so people can’t blame everything on an “easy tool”. CSS animations is limited and you also need to mix other technologies.

  • http://www.joelambert.co.uk Joe Lambert

    Thanks for the links, I’ll take a look. I do have to disagree on the HTML5 demo’s looking terrible on iDevices though.

    The Flux Slider I developed works really well on iOS, Playbook & TouchPad. And have you seen the stuff the Sencha guys are doing? Cross (mobile)platform programming frameworks using HTML5/CSS3.

  • Dannyk

    Then Safari is a piece-o-shit!  Chrome never crashes w flash. More with Googles own JS code on Gdocs!