responsive developer mode

I found an Easter egg today. It wasn’t outside, leftover from months ago. It was hiding in my Safari browser all along, a poorly-documented keystroke which I tripped over today.


Cmd + Option + R

I was looking for the hotkeys in Safari in order to reload a page without using the cache. I’d guessed that it was some alteration of the standard Cmd + R combination for refreshing the page and was trying those combinations, only I got more than I bargained for.

Browser Options

From the interface, it looks like I can select different browsers, to include Chrome and even Internet Explorer.


Screen Resolutions and Portables

Looks like I can change from the standard OS X to iOS as well, see what things look like on some of the iPhones, three sizes of iPad and a few screen resolutions for desktops as well.

Toggle It Back Off

And of course, you can toggle the mode back off again with the original key combination of Cmd + Option + R.

google stabs again at microsoft

In this entry of the Google/Microsoft war, we see that attempting to visit the Google Fonts API list page results in what is an outright ban of Internet Explorer.  Note that the fonts in practice work just fine in Internet Explorer, it’s just Google doing a denial-of-service for anyone using Microsoft’s browser.


slaying the giant

If you’re like me—a coder—then you’re pretty particular about which browser you use everyday and any attempts to coerce you into using a different one amounts to an annoyance.

Probably the highest on my list of try-our-browser annoyances is that dished up by Google on a daily basis.


Google Support indicates that it will stop displaying this ad if you click the small x in the corner but I have not found this to be the case. It continues to display over and over again.

And yet, I think I’ve managed to defeat Google’s advertisement pane and provide the solution here. I describe the technique for Internet Explorer but a similar fix is likely available for other browsers, too.

  1. Create a text file, say, in your Documents folder with a name like MY-IE-Default-Style.css
  2. Add the content indicated below to that file
  3. In Internet Explorer -> Tools -> Internet Options -> General tab -> Accessibility -> User style sheet (check the box) and Browse to find the stylesheet you just created
  4. Exit out of all Internet Explorer windows
  5. Start Internet Explorer and go to, noting that the nagging panel on the right should be gone

.gb_ga {
     display: none;


Looks like Microsoft has updated their own style so it will be necessary to update our own to compensate.

.gb_ha {
display: none;
#gbsfw {
display: none;

This technique should work to hide offending DIV tags on multiple sites but you’d need to be comfortable reviewing HTML source and using Internet Explorer’s F12 functionality to inspect the offending element. Target the DIV tag that you want to hide and set its CSS style’s DISPLAY attribute to NONE as I’ve done. It helps if you understand CSS coding but this is the basic way to do it—just add more paragraphs of style data to your User style sheet and you should be set.

google is systematically breaking i.e.

In an earlier post I described the war that’s going on among the big players:  Google and Microsoft, for example. Today’s entry relates to Google’s acquisition of Firebase in late 2014 and its recent redirection of that site’s content to an Internet Explorer—incompatible platform within the past few weeks.

If you have websites and/or apps hosted on Firebase then you will find that you are no longer able to use Internet Explorer to administer them. This is similar to the Internet Explorer—incompatible website Google Domains in which their client-side code freezes Microsoft’s browser by design.

Google’s campaign to destroy Internet Explorer now pushes Microsoft’s accumulative 16.72% of the browser market share (Dec 2015, to the point where it’s about to be surpassed by Firefox at 14.29% and into 3rd place behind Chrome’s lead of 53.71%.

Interestingly, it looks like Microsoft’s Forefront Endpoint Protection product at least back in 2011 marked Google’s Chrome browser as a virus.

when did favicon get so needy?

Most of us probably end up working on favicon.ico as an afterthought, say, after you’ve finally shown the work to someone else and you see that the default icon is in use. Up to this point in the project you’ve likely considered this as work to do later.

For those who don’t know this already, this is the icon file which was displayed in Internet Explorer just to the left of the URL in the Location field. At one time it was only 16×16 pixels and enjoyed very little screen real estate, if you will. The file if present in your website’s root directory would be pulled by the browser. If you were an early website implementer like myself your discovery of the concept was when you were reading the website’s log files and kept seeing all the "404 - file not found" errors from newer browsers which now expected it. So you likely created one to clean up your log files and shrugged it off.

Platform Wars

Fast-forward to today and there are many popular browsers as well as platforms. Perhaps the biggest change has been the advent of touchscreen platforms that demand much larger buttons in which to invoke your shortcut. Bigger buttons means that our earlier one-size-fits-all approach no longer works; you can’t scale up a 16×16 icon graphic to the huge sizes required for a web TV platform.

Unfortunately, nobody came up with a consistent standard for this. What would have been nice would have been for everyone to populate a folder structure like this:


And done. In this perfect world these would be the only icons and tiles available for the sum total of all browsers, all platforms, all devices. Period. If an operating system or browser needed something different, if would be necessary for that system to read the closest available graphic and to then create something else from it as required. It should not be up to the website designer to create what is seemingly required today.

Microsoft Internet Explorer

Microsoft originally specified /favicon.ico to include one or more images. It could contain a 16×16, 32×32 and/or a 48×48 pixel version. Although the first size is good enough for the location field of the browser, if the end-user minimizes the browser then the 16×16 doesn’t seem big enough for the taskbar within Windows. Alternately, creating a shortcut to the website under some screen resolutions and settings requires an even bigger default icon, hence the three sizes.

Speaking of which, what format is a .ico file anyway? Even though Microsoft has a tool within Visual Studio to combine multiple files into an .ico file, you can actually get away with just renaming a .gif, .jpg or .png file to favicon.ico and it will work fine with most browsers.

Mobile Platforms

It sounds like these need .png icons, one or more Apple Touch Icons, Windows 8 tile icons and a /browserconfig.xml file.

Google TV

Google TV wants an icon that’s 96×96 pixels.

Android Chrome

Chrome wants an icon that’s 196×196 pixels.

Opera Coast

Coast wants an icon that’s 228×228 pixels.

Apple Touch Icon

The iPhone/iPad collection of devices want an icon which is between 57×57 to 180×180 in size. The newer the device or in the presence of a Retina-technology screen, the higher the resolution it will need.

The odd thing here is that non-Apple browsers and platforms sometimes use the Apple-named icons because they’re usually better resolution than the default one.

Microsoft Metro Interface on Windows 8 and 10

You’d think that the 150×150 tile graphic would need to have that resolution but Microsoft recommends 270×270 for this one. Er, what?

Web Apps

And now, just when you thought this couldn’t be any more complicated, /manifest.json might also be necessary and it serves a similar function as /browserconfig.xml.

Finding Some Sanity In All the Chaos

The current wisdom appears to involve providing two and only two files: a 16×16 pixel /favicon.ico and a 152×152 pixel /images/apple-touch-icon.png. You’d then reference the latter with a tag within your HTML. The .ico version can include multiple resolutions inside it—the more, the better.

As developers I think we should push back a little and to make platform designers accept this approach and to gracefully work if this is all that’s available.