I’ve said before that I used to work on Internet Explorer. But when I worked on it IE really was effectively the only browser out there. We actually took compatibility with Netscape very seriously, but then we went way ahead and implemented more features from the standards. The problem is, we made mistakes in those implementations and since there were no other browsers, our mistakes actually became a sort of standard.

But those days are long long gone. Now it’s far more often the case that my code works “the first time” on every browser out there except for Internet Explorer. The other browsers are all more standards compliant by far. They also score better on the Acid Tests, and that’s why I love the Acid Tests.

When asked, Microsoft will say that the Acid Tests are random, that they aren’t developed with real world scenarios in mind. There is a great Microspeak term invented at Microsoft: the Acid Tests are a forcing function.

A forcing function is a situation or constraint that forces you to make a decision you would not make otherwise. For instance, in my end days at Microsoft, while working on the Windows Presentation Framework, one of the high level managers told me to come up with a plan to implement a feature that I was very outspoken about not implementing. I was given a week (I think) before presenting this plan to a group of all the highest level managers in our group. They were very sneaky saying that they didn’t necessarily want to implement it but if we did, how would we do it? The idea was to get me to do the work under false pretenses, then they would force me to put it in the product since it was already done. While talking about this later, the term forcing function came up, I hadn’t heard it before that. That situation was one of the nails on the coffin of my relationship with Microsoft.

Now that I’ve finished with my Microsoft story, I’ll say that learning the term was the best part of the experience because it describes that kind of situation very concisely.

The snakes were the forcing function that made me decide to mow my lawn on a regular basis.

If you decide to go live on the 10th, that’s going to be a forcing function for about five other required sub-projects and your bill is going to be a little higher than usual.

So Microsoft, it’s time to take your own medicine. We don’t care if you don’t think the Acid Tests represent real world scenarios. The truth is, fixing these bugs to pass these tests will actually and truthfully make your browser better. All the other browsers have proven it’s quite possible. You’re not protesting, as I was, out of a belief that the forcing function will make you do the wrong thing. You’re protesting because you’re incapable of actually fixing your browser.

Microsoft, please get out of the browser business and make everyone’s life easier. I’m tired of waiting for you to figure out how to write software.

I find it so horribly annoying that this bit of code is not standardized. As I search I’m not even quite sure who would standardize it. I don’t know if the API is part of the ECMAScript standard. But it needs to be a part of some standard and then tested in the ACID4 test.

Anyway, this is the code you’re looking for if you want to wrap an html tag around some selected text in a textarea. I use it in a WordPress plugin that creates a box on the edit post admin screen to allow that plugin to wrap bits of text with html code. I use Safari for development and the code works just fine in that browser.

function selectionSurround(element_id, before, after)
{
    var element = document.getElementById(element_id);
    
    if (document.selection) 
    {
        //IE support
        
        element.focus();
        sel = document.selection.createRange();
        sel.text = before + sel.text + after;
    }
    else if (element.selectionStart || element.selectionStart == '0') 
    {
        //MOZILLA/NETSCAPE support
        
        var startPos = element.selectionStart;
        var endPos = element.selectionEnd;
        element.value = 
              element.value.substring(0, startPos)
            + before
            + element.value.substring(startPos, endPos)
            + after
            + element.value.substring(endPos, element.value.length);
    } 
    else
    {
        element.value += myValue;
    }
}

I just finished a new theme for Doxie News and I’m really happy with it. I think it’s my best theme yet and I couldn’t want any more from it. As you can see it shares a lot of design concepts with Designoplasty but is distinctly its own. I love the shading in the the theme. As I learn to get better at manipulating color and texture, it’s really adding depth to my designs.

This was a goal of mine almost from the start. You can get somewhat nice themes using well selected solid colors but they’re always going to look fake. In the real world, all colors have shading. For instance, if I have a booklet with a solid white cover, it is actually going to appear as a gradient from gray to really bright white depending on where the light sources are. On the web, though, when you say white, it means literally white.

This gives a naturally fake look to everything. And we, as users, have come to understand that, and relate to it. But then when you add the shading in, people kind of have an, “oh yeah” moment.

I’ve done a lot of experimentation with applying various gradients to achieve this look, and nowhere has it turned at better than Doxie News. It really make me happy.

Arial vs. Helvetica

IE and Windows are always second class citizens with me because they render so poorly. I think it’s important to make sure the people with the best browsers get the best experience, not the lowest common denominator. That’s why I design on Safari. I make sure everything works and looks right on other current browsers, of course, but those browsers bring their drawbacks that I can’t help.

One example is Helvetica vs. Arial and fonts in general. Here are a couple of screen captures from a Mac and Windows.

The above screenshot is Safari 4 running on a Mac. Notice how wonderful that classic Helvetica “1″ looks next to the comment. The name and time look great and still retain the characteristics of their font even though they are smaller. The text just looks normal, very similar to how it would look on a printed page.

This is IE8 on Windows. What the heck is up with the Arial “1″? Wow. That is one ugly “1″. Arial was meant to avoid licensing costs while still essentially being Helvetica. Why did they choose to make this very important character so horribly different? The fonts on Windows are rendered in a very chunky fashion. Look at the “z” in Eliza. The body text also looks choppy.

Microsoft is very stuck on this idea of making fonts align to pixels. But Apple does a great job of making fonts look like they are supposed to look. Again it goes back to the idea of trying to approximate the real world. I know that the fonts on a Mac start off looking fuzzy to people. I came to a Mac while working at Microsoft, so I definitely noticed at first. But after a while you really appreciate the readability and don’t even think of them as fuzzy, just correct.

I’m really happy with the theme. It looks great on great browsers, and it looks as good as it can on the rest. I really do love the way those Helvetica comment numbers look. The concept of large bold numbers surrounded by white space is such a Helvetica thing. It’s reminiscent of Sesame Street, don’t you think? It’s fun to have that touch.

Last night I was trying to finish up some stuff for a small client so I’d have everything they need done by the end of the month. It was kind of a trial as I upgraded their site to use Slimbox 2 and was running into an issue that was totally messing me up. It turned out to be a directory permissions issue. While I love Safari, it could have been a bit more clear about the fact that it couldn’t read the files in a certain directory. That is, when you say it took “this long” to read a file, I tend to assume that you actually read that file. Never assume.

I was just finishing up and looking forward to some TV when I noticed some links at the bottom of the pages. Oh great, the site had been hacked. By a hacker who had a lot of time on his hands. The hacker had gone into my custom code and found the exact place to include his links. I was amazed. Luckily, he was very clean about it, and since I use Subversion to track all my code, I just deleted all the files in the directory and copied the right ones back, changed the passwords, and did some other stuff.

From the looks of it, I think the user had full access to the account. The passwords were on the weaker side and I left them that way because quite honestly this isn’t a site with that much traffic. There’s no customer data stored on the site or anything like that. I can’t imagine it would have been worth his while to hack it. It’s also a site that’s clearly maintained, so I just don’t see the point. But it took me a while to deal with it. Now the passwords are ridiculously strong.

I really don’t like the web host this customer is using. It’s Lunarpages. They don’t support sftp, or ssh, or any number of other things and they’re all around lame. So we will be moving the site to a new host soon.

I used to be more easy going about this, if customers had a host, I wouldn’t try to get them to change, but now that I have a host that I know is economical, secure, and easy to use, I think I’ll be more likely to suggest the switch. It’s easy enough to cost justify, and will save all of us pain in the future.

I’ve always relied heavily on the Safari web inspector. It’s indispensable for getting a clear view of what’s going on for both a page’s layout, and its CSS calculation process. I can’t imagine trying to do web work without it.

The great improvements in Safari 4 really help out:

• Mousing over an element in the inspector causes a translucent blue rectangle to cover the element, there are different shades of blue indicating border and padding. I love that.
• The inspector now docks in the bottom of the window by default. In general this is a better place for it.
• The sub panes are now resizable. In the old inspector you couldn’t make the css properties window wider, which would cut off the values at times.
• Viewing images now works correctly. There were lots of bugs in this before. And now you can drag an image out onto your desktop as you would expect.

It’s made me very happy. I’m sure there’s much more I’ll discover as I continue to work with Safari 4.

There are a number of people complaining about the tabs in Safari 4 being at the top of the window. Well, I like them at the top of the window.

I like the extra space, and the truth is that space is basically wasted otherwise. I think people just don’t handle change well. You wouldn’t think something like browser tabs would create a “Who Moved My Cheese?” moment for so many people, but it does.

When I worked at Microsoft this was always an issue. People would freak out if you changed stuff, even if you made it better. So Microsoft, being lame, would either not change, or kind of try to do both, but do both poorly. This is why Vista sucked. This is why there are now both alt-tab and windows-tab that basically do the same thing.

People don’t realize it, but they created Vista. Their own resistance to change creates all sorts of problems in their life. I’m glad Apple is willing to change, it means hopefully it will take longer for their products to become crap. If you are one of these people who whines whenever the user interface changes, or you cry every time a new OS is released and isn’t exactly the same as the last OS, you are the problem.

So write your scripts and do whatever you can to run from change. But eventually, change is gonna get you, so maybe just start learning to deal with it.

I just used it to save four pages on how to get mysql to start on boot for OS X Leopard. They are all basically the same, but I’m not doing it right now and want all of them for reference when I actually do it.

Web browsers are a very personal thing. I just like Safari, it feels right to me.

One thing I notice though is that sometimes it gets hung up when trying to load a page, right at the beginning before you get any information. It’s going to be interesting to see what kind of pressure these modern browsers put on Windows users to switch from Internet Explorer. There are four browsers now that are significantly better than Internet Explorer: Safari, Chrome, Opera, and Firefox. Businesses are bound to start making the switch sometime soon.

When using a laptop that is actually on your lap, the text is never big enough to read comfortably. You can read it, it’s just a pain. Now with full page zoom I can zoom the text without losing the feel of the web page. I have tried the text zoom on browsers in the past, but it usually just messes up the web sites.

Safari 4!