Journal tags: windows

While I’m talking about the SVGs on The Session, I thought I’d share something else related to the rendering of the sheet music.

Like I said, I use the brilliant abcjs JavaScript library. It converts ABC notation into sheet music on the fly, which still blows my mind.

If you view source on the rendered SVG, you’ll see that the path and rect elements have been hard-coded with a colour value of #000000. That makes sense. You’d want to display sheet music on a light background, probably white. So it seems like a safe assumption.

Ah, but when it comes to front-end development, assumptions are like little hidden bombs just waiting to go off!

I got an email the other day:

Hi Jeremy,

I have vision problems, so I need to use high-contrast mode (using Windows 11). In high-contrast mode, the sheet-music view is just black!

Doh! All my CSS adapts just fine to high-contrast mode, but those hardcoded hex values in the SVG aren’t going to be affected by high-contrtast mode.

Stepping back, the underlying problem was that I didn’t have a full separation of concerns. Most of my styling information was in my CSS, but not all. Those hex values in the SVG should really be encoded in my style sheet.

I couldn’t remove the hardcoded hex values—not without messing around with JavaScript beyond my comprehension—so I made the fix in CSS:

[fill="#000000"] {
  fill: currentColor;
}
[stroke="#000000"] {
  stroke: currentColor;
}

That seemed to do the trick. I wrote back to the person who had emailed me, and they were pleased as punch:

Well done, Thanks!  The staff, dots, etc. all appear as white on a black background.  When I click “Print”, it looks like it still comes out black on a white background, as expected.

I’m very grateful that they brought the issue to my attention. If they hadn’t, that assumption would still be lying in wait, preparing to ambush someone else.

Chris has written about switching code editors. I’m a real stick-in-the-mud when it comes to switching editors. Partly that’s because I’m generally pretty happy with whatever I’m using (right now it’s Atom) but it’s also because I just don’t get that excited about software like this. I probably should care more; I spend plenty of time inside a code editor. And I should really take the time to get to grips with features like keyboard shortcuts—I’m sure I’m working very inefficiently. But, like I said, I find it hard to care enough, and on the whole, I’m content.

I was struck by this observation from Chris:

When moving, I have to take time to make sure it works pretty much like the old one.

That reminded me of a recent switch I made, not with code editors, but with browsers.

I’ve been using Chrome for years. One day it started crashing a lot. So I decided to make the switch to Firefox. Looking back, I’m glad to have had this prompt—I think it’s good to shake things up every now and then, so I don’t get too complacent (says the hypocrite who can’t be bothered to try a new code editor).

Just as Chris noticed with code editors, it was really important that I could move bookmarks (and bookmarklets!) over to my new browser. On the whole, it went pretty smoothly. I had to seek out a few browser extensions but that was pretty much it. And because I use a password manager, logging into all my usual services wasn’t a hassle.

Of all the pieces of software on my computer, the web browser is the one where I definitely spend the most time: reading, linking, publishing. At this point, I’m very used to life with Firefox as my main browser. It’s speedy and stable, and the dev tools are very similar to Chrome’s.

Maybe I’ll switch to Safari at some point. Like I said, I think it’s good to shake things up and get out of my comfort zone.

Now, if I really wanted to get out of my comfort zone, I’d switch operating systems like Dave did with his move to Windows. And I should really try using a different phone OS. Again, this is something that Dave tried with his switch to Android (although that turned out to be unacceptably creepy), and Paul did it ages ago using a Windows phone for a week.

There’s probably a balance to be struck here. I think it’s good to change code editors, browsers, even operating systems and phones every now and then, but I don’t want to feel like I’m constantly in learning mode. There’s something to be said for using tools that are comfortable and familiar, even if they’re outdated.

When I met up with Malarkey right before An Event Apart in Seattle he told me about a quick bit of guerrilla testing he had been doing. He popped into a store selling Windows Phone 7 devices and started surfing the web. Specifically, he started looking at sites using responsive design like Jon’s and Colly’s.

Most of the sites he looked at displayed the desktop layout instead of adapting to the smaller dimensions of the screen. That’s because the rendering engine for Windows Phone 7—some bastard hybrid of IE7 and IE6—doesn’t support media queries. So if you’re using media queries to undo width and float declarations, the media queries won’t be executed.

A better option is to begin with the layout-less version and use media queries to add in width and float declarations for the browsers that are wide enough to get that layout—this is kinda like Luke’s Mobile First approach. But if you do that, versions of Internet Explorer less than 9 won’t get those layout declarations even though the browser window is wide enough (IE9 is the first version to support media queries).

On Huffduffer I get around this problem by using conditional comments. First of all, I split off the layout styles into a separate stylesheet that is called with a media query in the link element:

<link rel="stylesheet" href="/css/global.css" media="all">
<link rel="stylesheet" href="/css/layout.css" media="all and (min-width: 30em)">

(This isn’t ideal because now there is an extra HTTP request, but hear me out.)

Older browsers—including plenty of mobile browsers—won’t download the layout stylesheet so they’ll just get the linearised content. That’s all well and good but it leaves Internet Explorer out in the cold. Using a conditional comment, I can point older versions of IE to the same layout stylesheet:

<link rel="stylesheet" href="/css/global.css" media="all">
<link rel="stylesheet" href="/css/layout.css" media="all and (min-width: 30em)">
<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/layout.css" media="all">
<![endif]-->

Now older versions of Internet Explorer also get the layout styles. This would all be fine and dandy except for the fact that Windows Phone 7 will also get the layout styles because it will understand the conditional comment. Curses!

But with one little tweak to the conditional comment, we can tell Windows Phone 7 not to follow the link:

<link rel="stylesheet" href="/css/global.css" media="all">
<link rel="stylesheet" href="/css/layout.css" media="all and (min-width: 30em)">
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" href="/css/layout.css" media="all">
<![endif]-->

That’s why Huffduffer serves up the layout styles to desktop versions of Internet Explorer but just gives the linearised layout to Windows Phone 7 …as observed by Andy in an AT&T shop on a rainy afternoon in Seattle.

All of this should become moot by September when word has it that Microsoft will upgrade the engine of Internet Explorer Mobile to be closer to IE9. Until then, this combination of stylesheet separation and conditional comments is the most robust way I’ve found to target as many layout-capable browsers as possible.

If you’re the kind of person who enjoys living under a rock, allow me to be the first to tell you that Apple have released Boot Camp Public Beta which allows Intel-based Macs to dual boot OS X and Windows XP.

My reaction, much like everyone else, was “Holy shit!”.

Blogland is awash with hypotheses and conjecture about what this means for Apple, the company. I’m a lot more selfish than that: I just care about what it means for me.

See, I was thinking about getting a cheap PC laptop. It would be nice to have a machine just for testing websites in — Virtual PC runs a mite slow. Now I’m not going to buy that laptop. Instead, this is the little bit of extra encouragement I needed to invest in a new Intel-based iMac.

Apple wins because I’m buying a Mac. Microsoft wins because I’m going to buy a license for Windows. Dell (or some other PC manufacturer) loses.

Still, I’m probably not the target audience of this move. It warms my heart to read Greg Storey’s… er, story… of a friend who’s switching. Well, maybe switching isn’t the right word anymore. Ambi-OS-trous might be more accurate.