Borloz.com

Everyone has their own way to organize their stylesheets, whether it means using creative indention, separating styles into different sheets according to their function, or any one of 1,000 other ways to keep your sanity when working on a large project. I make use of several of these techniques, but lately, I’ve been using one in particular that has helped me out a lot as my stylesheets keep growing. I guarantee it will be one of the simplest, but also most helpful tricks you’ll use.

Basically, like many others, I use comments to signify the start of each section - but with a twist. For instance, I might have something like this:

/** Home page
**********************************/
	some styles...

/** About page
**********************************/
	some more styles...

/** Signup page
**********************************/
	even more styles...

Take note that the start of the comment has the forward slash, followed by an asterisk, just like a standard comment, but also includes an additional asterisk. That single extra asterisk separates the section comments from regular comments and is what’s going to make your life a lot easier. Here’s how:

Let’s say you have a stylesheet that’s 600 lines long. Instead of scrolling through, looking for the section you want to edit, you can just do a “find” in your editor for “/**” and then jump a section at at time by clicking “next”.

You could even take it a step further and use “/***” for major sections and “/**” for sub-sections. Or, if you prefer, you could use “/*/” as the start of your comments. It really doesn’t matter as long as whatever you choose starts with “/*” because anything after that is treated as comment text.

I’ve always found it a pain to test in the various versions of Internet Explorer. In Windows, there’s no easy way to install multiple versions, so whether you are working on a physical Windows machine, or a virtual machine via Parallels, VMware or some other virtualization software, proper testing in IE always required at least two or three separate machines.

The other day a co-worker showed me a cool little setup that will allow you to test in IE5, 5.5, 6, and 7 on the same physical Windows XP machine. I suppose this would also work on a virtualized copy of Windows XP on a Mac, but since this solution involves virtualization, you’d be running a virtual machine inside of another virtual machine, which means you’d need a heck of a powerful system.

Assuming you are running Windows XP, you should already have a copy of IE7 installed. One IE down, 3 more to go. So, here’s how to get the rest of them:

1. Download VirtualBox and follow the installation instructions.
2. Grab the .iso for your choice of Linux distro (Ubuntu, Kubuntu, Xubuntu, Fedora, Gentoo, Debian, Suse, Mandriva, or PCLinuxOS should work at the time of this writing) . I used Ubuntu in my setup.
3. Launch VirtualBox and setup a new virtual machine for your Linux distro.
4. Start the virtual machine and follow the prompts in the First Run wizard, making sure to set your media source to the Linux .iso you just downloaded.
5. Click Finish at the end of the wizard and your Linux distro should start the installation process (this process will vary depending on your distro of choice).
6. Visit the IEs4Linux website and follow the instructions to install cabextract, Wine and IEs4Linux.
7. Once you’re done with the install, you should have icons on your Linux desktop for each of the IEs that you installed. Just double-click and point them at the URL you want to test!

From time to time, I’ll come across a blog or article on the web where the person has chosen to remove the underline from their links and/or change the link color, but didn’t make the color easy enough to distinguish from the body text. This seems to be especially common for links that have already been visited, because the default color for visited links is a dark purple, and most text on the web is black. I grew a little frustrated with this situation and thought it might be helpful to create a bookmarklet that highlights all the links on the page.

To use the bookmarklet, just drag the link below to your bookmarks bar.

Link Highlighter

When the highlighter is active, you’ll see a “Remove Link Highlight” overlay at the top-center of the browser window. To disable link highlighting, just click the overlay text.

So far, it’s been tested and working in Firefox 2/Mac/Win and Safari 3/Mac/Win.

Known issues:

• Does not work in IE - I keep getting a vague error message about an error at line x, char x and simply haven’t spent the time to get it working right for lack of a decent way to debug JavaScript in IE.
• Does not highlight links in iframes.

Please leave me a comment if you find any issues not mentioned above. Be gentle - this is my first bookmarklet, so there may be other issues I’m not aware of.

Since this bookmarklet was created for personal use and currently meets my needs, I’m debating on whether to fix the above issues. However, if there is enough demand to fix them, I’ll certainly consider it. Please leave a comment to let me know that you are using it.

Also, if anyone knows of a decent way to debug JavaScript in IE without purchasing Microsoft software (Office or Visual Studio), please let me know.

Remember that game called Memory (sometimes called Concentration) from when you were younger where you’d start with a grid of cards face-down and then flip them over two at a time until you had matched all the pairs? Well, my co-worker Paul and I were talking a few months back and he thought that it would be cool to create a web version of the game using your own digital pictures as cards. So, I got to thinking and realized that a lot of people already have a bunch of pictures on Flickr. I had wanted to check out the Flickr API anyway, so this was the perfect opportunity.

That night, I went home and started reading up on the Flickr documentation and began coding a game that allowed users to generate their own virtual “deck of cards” based upon the tags they entered and/or their Flickr username. I had the it mostly done, but then had other things come up and I dropped it for a while. It wasn’t until last night that I finally ended up finishing it up.

So, here’s the link to the game:

http://borloz.com/games/flickr-memory/

And here’s how it works:

• Enter your desired tags and/or your Flickr username. (For example, if your photo URL is http://flickr.com/photos/lborloz/, then lborloz is your username.)
• Select whether you want to match “any” or “all” of your tags.
• Select your level of difficulty. (”Easy” will generate a 4×4 grid. “Hard” will generate a 6×6 grid.)
• Click “Play!”
• Try to match all the tiles in as few moves as possible. (A perfect game on the “Easy” setting is 8 tries. A perfect game on the “Hard” setting is 18 tries.)
• Have fun!

Up until this point, whenever I heard someone from Microsoft start talking about standards, I couldn’t help but laugh while thinking of how badly IE has butchered them in the past. Standards compliance was somewhat improved with IE7, but it sounds like Microsoft has finally agreed to step up to the plate and make IE8’s standards mode actually standards-compliant.

MS has fought standards-compliance as the rest of the world knows it for several iterations of IE, knowing that it would break a lot of old sites that were specifically targeted towards IE’s faults. With IE8 they will admitedly break sites that do not specifically request a special http header/meta tag to trigger IE7 standards mode. It will be quite interesting to see how many sites this affects. I’m guessing a VERY large number.

Since some (but certainly not all) of the rendering differences between IE and standards-compliant browsers have been due to a certain degree of ambiguity in the W3C documentation, Microsoft’s definition of “the most standards compliant way possible” may be far different than that of Firefox or Safari. It would be nice if they just used Firefox and Safari’s interpretation of the W3C standards, but I’m sure that Microsoft will come up with their own creative way of interpreting them.

So kids, this is why you code to standards and make IE the exception, not the rule. For those who ignored the standards evangelists, let the fun begin…

After expressing my aggravation with not being able to view the source for an iPhone project I’ve been working on, a co-worker quickly found a cool little bookmarklet that allows you to “View Source” on the iPhone itself.

Of course, you can also get the User Agent Switcher for Firefox and enter the appropriate parameters to fake an iPhone, but in my case, for some reason I thought it was something specific to Safari. Turns out it was not, but nevertheless, the bookmarklet is still very cool for tracking down potential Safari-specific issues!

For those of you who haven’t checked it out yet, the IUI is a great library created by Joe Hewitt (the same guy who brought us Firebug) for creating iPhone-like web applications. Overall, I love how easy it is to create screens, transition between screens, submit forms via AJAX and much more. However, while working on my first iPhone-targeted web project, I came across an issue.

There a few special hrefs that can be used to launch iPhone functionality such as the Google Maps application (using an href that begins with “http://maps.google.com”) or prompting the user with a dialog box that allows them to dial the linked phone number (using an href that begins with “tel:”). Since the IUI intercepts the click event on links and prevents their default behavior, it ends up overriding this functionality.

While I was searching the web for a workaround, I found a few sites that said that the IUI code had to be modified in order to make these special hrefs work, but they didn’t say exactly how. So, here’s my solution:

For all links that launch iPhone functionality that you don’t want the IUI to override, assign them a type of “iphone” like this:

Click to dial the number

Then modify iui.js. I’m showing the whole block of code, so you can see the changes in context, but the only changes necessary are to lines 174 and 175. I’m using version 0.13 in the example below, so your line numbers may be different depending on the IUI version.

addEventListener("click", function(event)
{
    var link = findParent(event.target, "a");
    if (link)
    {
        function unselect() { link.removeAttribute("selected"); }

        if (link.href && link.hash && link.hash != "#")
        {
            link.setAttribute("selected", "true");
            iui.showPage($(link.hash.substr(1)));
            setTimeout(unselect, 500);
        }
        else if (link == $("backButton"))
            history.back();
        else if (link.getAttribute("type") == "submit")
            submitForm(findParent(link, "form"));
        else if (link.getAttribute("type") == "cancel")
            cancelDialog(findParent(link, "form"));
	else if (link.getAttribute("type") == "iphone")
	    return;
        else if (link.target == "_replace")
        {
            link.setAttribute("selected", "progress");
            iui.showPageByHref(link.href, null, null, link, unselect);
        }
        else if (!link.target)
        {
            link.setAttribute("selected", "progress");
            iui.showPageByHref(link.href, null, null, null, unselect);
        }
        else
            return;

        event.preventDefault();
    }
}, true);

Well, if you’re a frequent (or even infrequent) visitor to my blog, you’ll notice that I’ve changed up the theme quite a bit. I was never really completely happy with the old one, and did quite a bit of searching to find one I liked better, but could never find one that really jumped out at me. So, after much procrastination, I finally decided to buckle down and create a theme of my own. I’m much more happy with this one - it’s cleaner, more readable, and not as cluttered as the old one.

Hopefully, I’ll have the time (and motivation) to work on it more over the next few weeks. There are still a few things that I want to do with it before I call it done. I’m planning on adding an “About” page, fine tuning the code to ensure W3C standards compliance, and possibly making the panoramic image above into a slideshow.

I’ve tested the new theme in FF 2/Mac, Safari 3/Mac, and IE6/Win, and there were no glaring issues. I’ll be testing in IE7 tomorrow, but I don’t anticipate any major issues. If you happen so see anything crazy going on, please let me know by leaving a comment on this post.

Thanks!

Well, I’ve started exploring Ruby on Rails once again. I have been using TextMate and it has some pretty cool features, but after I saw the RadRails plugin for Eclipse, I decided to check it out. Unfortunately, I didn’t get very far before running into problems; however, I discovered a solution so I thought I would share.

The Problem:
After installing the plugin, I switched to the RadRails perspective and selected File > New > Rails Project. I named the project, then clicked Finish. The root project folder showed up in the Rails Navigator, but the create new project dialog didn’t go away. Clicking Finish again did nothing. Clicking Cancel made the dialog go away, but left only the root project folder, not the standard Rails sub-folder structure like you would get if you did a ‘rails <application_name>’ on the command line.

The RadRails plugin had detected only one of the two installations of Ruby on my machine (in /usr/bin), when in fact I had installed another copy with gems, etc. (in /usr/local/bin) that it should have been using.

The Solution:
Go to Eclipse > Preferences > Ruby > Installed Interpreters. Then click Add and show Eclipse where the correct version of Ruby is located (/usr/local/bin in my case). I ended up deleting the entry for the original version that it found, but you may be able to leave it and be ok.

That’s it! You should have a working RadRails create new project dialog. Try to create a new project again. The dialog should disappear when you click finish and you should have a complete folder structure in the Rails Navigator.

Have you ever wanted to test a newly developed site in a bunch of different browsers but didn’t have four or five spare computers with various OSs and browser versions laying around? Well, browsershots.org might be the solution to your problem.

Just go to the site, enter your site’s URL, then select the browsers you want to test in. Currently supported browsers are:

• IE 5, IE 5.5, IE 7, and Firefox 2.0 for Windows
• Firefox 2.0 and Safari 2.0 for Mac
• A ton of browsers/versions for Linux

Then, choose your other options such as screen resolution, Javascript enabled/disabled and version, Java installed/not installed and version, Flash installed/not installed and version, color depth, media plugins, and the maximum time you are willing to wait for your screen shots. That’s all there is to it.

One dissapointing aspect of the site is that it is pretty slow to produce any results. I queued up a request for this site for IE 7 and set my maximum wait time to 30 minutes with all of the rest of the criteria set to “Don’t Care”. It ended up timing out of the queue before actually giving me anything. Hopefully the creator is working on speeding this up, because I don’t think there are too many instances where someone will want to wait 4 hours (the maximum wait time) to see a screen shot. The good thing is that the site caches recent requests, so if a screen shot has been recently taken, you don’t have to wait again. To see this in action, request a screen shot for microsoft.com or another popular site.