My main gripe is the scroll knob. It’s fine for switching radio stations one at a time, or flipping through tracks on a CD, but when you have an iPod or a flash drive plugged in with a sizable amount of music on it, getting to the music you want to hear is often painfully slow. The problem is that no matter how fast you turn the knob, it scrolls through the music at a constant pace (slow).

I came up with an idea a while back to ease my pain and just got around to finishing it last night, so I thought I’d share. I wrote an AppleScript that organizes folders according to the letter they begin with. So, for example, let’s say you have a flash drive full of music that’s organized by artist (like iTunes organizes your music folder). The script will take all of the artist folders that begin with “A” and put them in the “A” folder, “B” in the “B” folder, etc. This way, when you plug the flash drive into your MINI and use the “DIR” option to browse the drive, you have a maximum of 27 folders to scroll through (one for each letter of the alphabet and one for artists that start with 0-9).

A few notes about the script:

• First and foremost, I’m not responsible if the script reorganizes your music library in an undesired manner. The script worked for me using the steps provided on my Mac running OS X. However, I can’t predict all of the different factors that may cause the script to fail or sort your music incorrectly. I would suggest that you copy (not move) any music you run the script on to a separate folder other than your music library. This way, if something happens, it’s just a copy that you can delete and your music library will remain in its original state. Now that I’ve release myself from liability, if you do find a bug in the script, please let me know by leaving a comment.
• The script is written in AppleScript, which will only run on Apple computers. If you are running Windows, I’m sorry, but the script will not work. I may look into writing something that’s Windows compatible if there is enough demand, but for now it’s Apple only.
• Any folders that begin with “The ” will be placed in a folder according to the first letter of the second word. For example, “The Killers” would be placed in the “K” folder.
• Any folder that begins with a non-alpha character (such as a number or special character) or begins with “The ” and the 5th character of the folder name is a non-alpha character will be placed in the “0-9″ folder.
• Only necessary folders will be created. So, if you don’t have any folders that begin with “B”, a “B” folder won’t be created.
• I used the script to organize my music by artist because this made the most sense to me, but there is nothing that should prevent you from using it on any folder. For example, if your music is organized by album and you want to sort it into folders based on the first letter of the album, it should work just the same.

Preparing your music for the script:

Since this is a fairly simplistic script, it relies on your music being somewhat presorted. If your music is not already sorted by artist, iTunes can do it for you:

1. Open iTunes
2. Click iTunes in the menu bar
3. Click Advanced
4. Check the “Keep iTunes Music folder organized” option

Installing the script:

1. Copy the script to /Library/Scripts (you should see a bunch of other scripts that come with OS X in this folder).
2. If you have the script menu icon in your menu bar (it looks like a little paper scroll), skip to “Running the script”.
3. Open the AppleScript Utility. It can be found in /Applications/AppleScript/AppleScript Utility.
4. In the Applescript Utility, check the “Show Script menu in menu bar” option.
5. Close the Applescript Utility. You should now have the scroll icon in your menu bar.

Running the script:

1. Click the AppleScript icon in the menu bar and select the “MINI Music Organizer” script in the drop down menu.
2. Select the folder that contains your music organized by artist.
3. Click Choose
4. That’s it. The script will take anywhere from a few seconds to a few minutes to run depending on how much music you have. When it’s done, use Finder to browse to the folder you just ran the script on. It should now be organized by letter.

Download the script:
MINI Music Organizer.scpt

FLIR works much like sIFR in that it takes text inside an element and replaces it with pretty much any font you’d like. But, instead of using a Flash movie of your font, it uses PHP and the GD library (or optionally ImageMagick) to replace your text with an image. So, I tried it out on a project that I’ve been working on lately.

The entire implementation went very smoothly, and I was thrilled with how little effort it took to get it up and running - that is, until I checked things out in IE. For some reason, FLIR’d fonts in IE don’t take on the proper font size according to the cSize parameter that FLIR allows you to pass to the FLIRStyle object. In fact, passing the cSize parameter seems to make IE ignore the font-size property in your CSS entirely.

Someone posted in the FLIR forums that you could just give IE larger font sizes in order to offset the fact that it doesn’t honor cSize, but that means that everyone who has IE and doesn’t have Javascript, or has images turned off, will get huge fonts. Even though this would be a pretty small number of people, my OCD got the best of me, and I decided I needed to come up with a way that even those using IE without Javascript would get normal sized fonts. So, I put on my thinking cap and used a combination of rudimentary user-agent detection in PHP and IE’s conditional comments to make it work for both scenarios.

Note: I’m using jQuery in the example below, but you could just as easily use another Javascript library or pure Javascript.

    <!--[if IE]>

        <script type="text/javascript">
			// You may have to play with the font size to get it just right
            $("#header h1 a").css('font-size','45px');
        </script>

    <![endif]-->        

    <script type="text/javascript">

        FLIR.init({path:'/flir/'});

        $("#header h1 a").each( function() { 

            FLIR.replace( this, new FLIRStyle({ mode:'fancyfonts', cFont:'gabrielle'

			// If the browser is not IE, then pass the cSize param to the FLIRStyle object
            <? if(!stristr($_SERVER['HTTP_USER_AGENT'], 'MSIE')) : ?>
                , cSize:'*1.3'
            <? endif; ?>
             })); 

        } );

    </script>

So, as you can see above, I’m changing the “font-size” CSS property (for IE only) right before doing the FLIR replacement. Since this is done in Javascript, I can leave my default font sizes alone, giving IE users without Javascript normal sized fonts, but also adjusting the font size appropriately so the FLIR’d fonts will turn out correctly.

Other than this minor hiccup, I couldn’t be happier with FLIR. It’s easy to implement, allows for graceful degradation for those without Javascript enabled, and lets you use pretty much any True Type font available.

Note: If you find FLIR useful, please consider donating to the author. He makes FLIR available free of charge and it’s very obvious that he’s spent a significant amount of time in the development and support of a truly wonderful technique. Cory is way too modest and hides the link in the footer of his page, so here’s it is: http://facelift.mawhorter.net/donate/.

First, we’ll have to do a little investigation. If you are on shared hosting, chances are that you have access to your WordPress database via phpMyAdmin or something similar and you can run SQL commands against it. So, open up phpMyAdmin or whatever you use, navigate to your WordPress database, and execute the following SQL:

select comment_author_ip, count(*)
from wp_comments
where comment_approved <> 1
and comment_content like '%http://%http://%http://%'
group by comment_author_ip
having count(*) > 3
order by count(*) desc

What this does is selects the comment author IP from the wp_comments table where the comment is not approved, the comment has at least three links in it, and the IP has left at least 3 comments. Then, it groups all of the distinct IP addresses and orders them in descending order by the count of comments. What you get back should look something like this:

From here we can see our most common offenders. Based on what I am seeing in my results, I can be pretty certain that at least the first 8 IPs belong to spammers. This is because it has only been a few days because since I last checked my comments and nobody leaves 14+ legitimate comments on my blog within the span of a few days.

If you want to be sure that a particular IP address belongs to a spammer, you can look at the individual comments that they’ve left using this SQL:

select comment_author_ip, comment_content
from wp_comments
where comment_approved <> 1
and comment_author_ip = '127.0.0.1'

where 127.0.0.1 is the IP address of the comment author in question.

Here’s where the .htaccess file comes in. If you are using permalinks for your blog, WordPress should have already created one for you. If not, simply create a file called .htaccess in your document root. If you want to know more about .htaccess files, see Apache’s documentation.

Next, open your .htaccess file and insert the following either at the beginning or end of the file:

order allow,deny

deny from 192.168.0.1
deny from 192.168.0.2
deny from 192.168.0.3

allow from all

replacing the IP addresses with the ones that came up in the results of the SQL we ran before.

That’s it. Once you do this, users coming from these IP addresses will no longer be able to get to your blog and therefore can no longer leave spam comments.

Slimbox uses the title attribute of the anchor tag (<a>) that wraps each image as the caption for the full-sized image. But, when you insert an image from your WordPress media library, it puts the title on the image (<img>) tag, as it should, not the anchor that wraps it.

In the past, I’ve added the ‘rel=”lightbox[gallery name]”‘ by hand, but in this particular case there were a lot of pictures and the person who manages the content is not a programmer, so here’s what I did:

First, I’ll show you the document structure I had to work with:

<div id="container">
	<div id="post-slug-1" class="post-body">
		<h2>Post Title 1</h2>
		<p>
			post content...
		</p>
		<div class="images">
			<a href="/image1.jpg" >
				<img alt="alt text" src="/images/image1-150x150.jpg"
					title="Title for image 1"/>
			</a>
			<a href="/image2.jpg" >
				<img alt="alt text" src="/images/image2-150x150.jpg"
					title="Title for image 2"/>
			</a>
		</div>
	</div>
	<div id="post-slug-2" class="post-body">
		<h2>Post Title 2</h2>
		<p>
			post content...
		</p>
		<div class="images">
			<a href="/image3.jpg" >
				<img alt="alt text" src="/images/image3-150x150.jpg"
					title="Title for image 3"/>
			</a>
			<a href="/image4.jpg" >
				<img alt="alt text" src="/images/image4-150x150.jpg"
					title="Title for image 4"/>
			</a>
		</div>
	</div>
</div>

There were two different things that I needed to accomplish:

1. I needed a way to get the title from each image tag to the anchor that wrapped it.
2. I needed a way to automatically assign the gallery name for each set of images. The gallery name is what’s inside of the square brackets and groups the images together, such as: ‘rel=”lightbox[gallery name]”‘. If you’ll notice in the code above, each div with a class of “post-body” also has an id corresponding to the post slug of the post content it wraps. This is done by echoing the “$post->post_name” inside “the loop“.

Here’s where jQuery comes in. I’ll show you the code first and then explain it:

$(document).ready(function() {

	setupLightbox();

}); 

function setupLightbox() {

	$("div.images img").each(function() {

		// Setup titles on anchors based on image titles that they wrap
		$(this).parent("a").attr("title",$(this).attr("title"));

		// Set the rel attribute of the anchor based on the post title
		$(this).parent("a").attr("rel","lightbox[" +
		$(this).parents().filter(".post-body").attr("id") + "]");

	});

} 

What we are doing is looping through the images inside of the div with a class of “images”. Inside the loop, we are doing two things:

1. Taking the title from each <img> tag and assigning it to the title attribute of the anchor that wraps it.
2. Traversing the DOM upwards from each image to grab the id of the parent <div> with a class of post-body. If you remember correctly, we assigned the post slug for each post to the id attribute of this <div>. So, the id attribute of this element makes the perfect (unique) gallery name.

Here’s the final result, after the jQuery code executes:

<div id="container">
	<div id="post-slug-1" class="post-body">
		<h2>Post Title 1</h2>
		<p>
			post content...
		</p>
		<div class="images">
			<a href="/image1.jpg" title="Title for image 1"
			rel="lightbox[post-slug-1]" >
				<img alt="alt text" src="/images/image1-150x150.jpg"
					title="Title for image 1"/>
			</a>
			<a href="/image2.jpg" title="Title for image 2"
			rel="lightbox[post-slug-1]" >
				<img alt="alt text" src="/images/image2-150x150.jpg"
					title="Title for image 2"/>
			</a>
		</div>
	</div>
	<div id="post-slug-2" class="post-body">
		<h2>Post Title 2</h2>
		<p>
			post content...
		</p>
		<div class="images">
			<a href="/image3.jpg" title="Title for image 3"
			rel="lightbox[post-slug-2]" >
				<img alt="alt text" src="/images/image3-150x150.jpg"
					title="Title for image 3"/>
			</a>
			<a href="/image4.jpg" title="Title for image 4"
			rel="lightbox[post-slug-2]" >
				<img alt="alt text" src="/images/image4-150x150.jpg"
					title="Title for image 4"/>
			</a>
		</div>
	</div>
</div>

http://www.msfirefox.com/

Hillarious!

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.

As of the last year or so, the major TV stations have started providing their shows on their websites, but I like the idea of having it all in one place. This means that I don’t have to navigate different site structures to get to the video, and then download different media players and codecs in order to be able to watch the video.

If you have a HTPC with a web browser, you can watch directly on your TV in your living room.

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!

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.

Thankfully, I didn’t have to go through the activation process again. When I setup my original TiVo, I had to bring it to a friend’s house to use his phone line, since I don’t have a land line. I guess since I had already activated my account, I didn’t need to go through whatever requires the phone line.

So it’s no more live TV for me anymore. Let’s hope this one holds up a little better than the last…