I'd like to talk about a common web task that I see done wrong from time to time. They're called image rollovers. You've see them before. There's a picture or a button or an icon, you move your mouse over it, and it changes to something else. The idea is that one image replaces another, which is what most people do. However, for this to work, it has to load the second image on the page, only after the user has "hovered" over it. It works in theory, but a lot of the time you get no image for a second (while it loads) and then an image pops up. To me, this looks sloppy.

There's a better way: Make one image that contains both hovered and non-hovered, and then just move it when the time comes to change the picture. That way, the entire image loads, but you only see half of it at once, eliminating the problem of loading a second image after the page has already loaded.

Here's an example:

• We'll start with an image:
• We also need a link: Click Me
• Then we combine them: Click Me

Here's a version you can see what's going on in the background as if it were in slow motion:

<--- hover

Now how did I do that? It's all CSS. Here's my html code:

<a href="http://www.google.com/">Click Me</a>

And here's the CSS:

a.smart-rollover {
  display: inline-block;
  width: 60px;
  height: 16px;
  background-image: url(http://blog.edwardloveall.com/uploads/2010/07/hover-demo.jpg);
  background-repeat: none;
  text-indent: -999999px;
}
a.smart-rollover:hover {
  background-position: -60px 0;
}

At the very core of this, there's width, height, and background-image in the a.smart-rollover selector and background-position in the a.smart-rollover:hover selector.

A couple of extra notes:

• You must set the element to block or inline-block if it is normally an inline element, like a is. If not, setting the width and height of that element won't work.
• I've split my background elements into separate attributes, but you can combine them.
• The indent property is to get rid of the "Click Here" text that I placed in the initial link. If it doesn't make sense, try removing that line.

So that's how I do it. It's especially good for navigational links (seen here) where one needs to make one of many elements stand out, and this method makes everything look really clean.

This has gotten some internet buzz lately; mousepaths. All it is, is a java applet that tracks the position of your mouse and puts a mark of varying size when your mouse is idle. Pointless? Probably. But it does make some very pretty designs if you're into data driven art.

So here's my mousepaths screenshot for about 2 hours doing some web development with Photoshop and Textmate. You can see my Dashboard hot corner and that I like to have my windows over on the left instead of the right. Mostly, I just think it's pretty.

Feel free to try it out your self. S – save image. R – restart.
Download: Mac | Windows
Via iso50.

We interrupt your regularly scheduled nerd ranting and analyzation to bring you a story of 2 gentlemen wandering in West Natick, MA...

So let me preface. My friend Rich and I both wanted to see Avatar. We are probably the last 2 people in our age group to go see it. I've heard nothing but good things, not to mention the sound design potential of epic sci-fi movies. Speaking of epic, our goal was to see it in IMAX 3D, of which, the closest is about 20 miles away. Bleh. The commuter rail goes out that way however, so being the adventurous type that we are we decide it will be fine. Yay! We can even catch an express train and get there early for some food. Here's a map.

So I head out to get to South Station at 4:30 to catch a 5pm train. No problem. Got there around 4:35. Rich called me around 4:50 saying he'd probably just make it, but I should buy his ticket. So I buy 2 tickets. Get a call around 5:01 saying he was "There at north station." But wait, it it was south station we needed to be at. *Sigh* He gets back on the train so we can try to make the 5:15. Point Rich.

Another call around 5:17 saying he was now there and where was I. At that moment, I realized, I was in fact at back bay station, and not south station either. *SIGH* I get on the train and we keep hoping for the best. Point Ed.

I get to south station. It's rush hour. I'm running around trying to get a ticket that I didn't need to get because I already bought 2. We find each other, laugh like old timey chums and run to the train. Found a seat (poor guy next to us) and starting trying to figure out how to get from the train station to the theater. Here's another map. I highly recommend the Satellite view as well so you can see all the forest area, backyards and fences.

Once we're off the train, Rich starts getting a bit tired. It's cold, we're walking in some unknown suburbia and he got about 4 hours of sleep last night. He has decided that the best way to get there is by finding some path behind houses and through woods, in the dark. Point Rich. I also really don't like the idea of trespassing though peoples yards, cuz I'm a little bitch. (It's ok. I know it.) We make it to a dead end road where we think we might be able to get through. Keeping along the bushes, we tramples some families snow to find a wooden fence that we can't scale. *SIGH!!!*.

Rich has slipped and fallen once and it's pretty cold. I'm more stressed about the fact that we're already 30 minutes past the advertised time of the movie. However, it is a 170 minute movie and there are previews. Not so bad. Try #2 was a success. We went down the road a bit and found another place that looked like we could get through. This new path, while it does get us through, we have to cross a small wooden home made bridge across a frozen creek. Suffice it so say, Rich went first. Point Ed.

Finally, some good news. We make it across just fine, and we can actually see the theater. It's right there! Only... 3 foot ball fields in a straight line. But this is car country. It's also up about 400 feet on a massive hill that is a winding drive way with no side walk in sight. *SIIIIIIIGGGGH*. Once again, it's cold, we're getting hungry, and we're approaching 40 minutes into the feature.

As we journey up the hill through the snow, I can't help but be reminded of a certain story involving hobbits and a magic ring, only we actually want to be where we're going. This place is attached to a massive furniture store. All I can say is IKEA done in New Orleans/American style. We get into the building, amazed that we're still standing and we actually made it here. I approach a woman and ask where I can get tickets. "Did you buy them already?" "Uh, no." "Because it's all sold out." "Awesome." Point both of us. (I mean, it's Monday night. Popular movie aside, really? Sold out? Ok fine.)

Defeated by James Cameron's talent, we look for food. This place starts getting really surreal. Think Streets of New Orleans + Techno Club lined with themed furniture stores, complete with animatronics and creepy clowns. We left. Point Jordan's Furniture?

We got some mediocre dinner at an attached restaurant because otherwise Rich would have feinted. After food, it's time to go home. Taking a look at the commuter rail schedules, the next train is conveniently leaving next at 12:36AM. That's fine. We'll just tramp back through the snow and back yards until– WHAT? How is there a break in the train schedule for 5 hours?!? I wasn't even aware they could do that, like legally or something. How were we even going to get home in the first place? Point us.

So we start calling anyone and everyone who might have a car nearby that could come get us that we'd be in great debt to. (Sorry Sam, Kerry and Eric.) A sight bit of panic sets in, because the subway in Boston stops at the hour of about 1am. Far before we'd return. All is not lost however, there is a train that hits Framingham (one stop away) at 8:27 which is almost exactly 1 hour from that point. I was done taking chances (and Rich was too) so I called a cab to get us there. We finished dinner, get in the cab, ride to the stop ($14 all together) and get on the train. Once on the train, we discovered something. Did you know that tickets for a different stop aren't necessarily valid and you might have to buy more on the train? Cool huh?! 2 Points us. (Also, Rich, you still owe me $7.75 for your ticket)

So, we've made it home safely and we're all fine and it all didn't end in tears. More laughter actually. It's that weird laugher that you get after you're up for way too long and things just aren't going well. It was this weird, slightly terrifying, absolutely ridiculous adventure that didn't end up at all the way we hoped it would at 2pm yesterday. However, such is life. I won't forget it anytime soon. Thanks Rich. It was a fun night.

From the monome.org forums:

a monome is a reconfigurable grid of backlit keypads which connects to a computer. interaction between the keys and lights is determined by the application running on the computer. there is no hard-wired functionality.

I agree with that, however, it's one of those descriptions that you can really only understand if you knew what it was in the first place. So here's my attempt:

The monome is a musical controller. It makes no sound. It houses a grid of buttons with lights beneath each button. For all practical purposes, this is all the device has. (Actually, it has a little more, but it's not relevant.) Seems kind of useless doesn't it? All by itself, it is. It's an empty box that can't do anything. This might seem weird, but think of it as if you removed the keys from a piano. All the hammers and strings and body (which are what makes the actual sound) still exist on the piano, but the keys are gone. However, what if we could hook up those piano keys to an organ? Or a guitar? Or a drum set? Maybe this also seems quite odd, but think of the potential.

Because these two things are separated (the controller and the instrument) you can start to create versatile instruments and performing tools. Since there's no built-in functionality, you can have it do anything, and you'd be surprised at the number of things you can control with 64 buttons with 64 lights. So that's the device, the monome. It comes in flavors of 64, 128 and 256 buttons. Many people have also fashioned their own. This is about one-third of what the monome is all about.

Another one-third are the applications. These are analogous so far to the strings, hammers and body in the piano analogy. However, it starts to deviate here. A monome will send and receive instructions from an application. The monome typically sends a message that tells the application what button was pressed. At that point, the application takes over and does something with that button press. It could be, play this note or change this parameter. Since it's just a message, it can really be anything, even non-musical. It could even be check your e-mail, or wash your cat. Why not right? Let's take a moment and watch a video.

Here we can see the application mlr running. It's probably the most popular application for the monome, written by tehn a.k.a. Brian Crabtree, who created the device. It takes a sound file (any sound file) and plays it— not only from the start of the sound file, but from any point. if I have a drum beat that is 4 bars long, let's say I split it up into 8 equal parts and play them back out of order. It's like a deck of cards that you shuffle and then deal out. Different order every time. Try watching the video again with that in mind and see if you can see what he's doing. It's a brand new way of making music.

There are scores of applications that have hundreds of uses, and even more videos and songs. There are more being created all the time, which brings us to the final one-third of the monome, the community. There is such a great community around the monome, it's staggering. As of this writing, there are just under 4000 users registered on the monome forums. I've not yet run into one user wjp was rude, annoying or unhelpful. I've met some in person and they are also great people.

So taking all three of these things together you get one hell of a device. There's also something way cool about this unmarked grid of buttons and lights when there is some truly unique music coming out of it. I'll leave with with a bunch more links for watching, learning and listening.

The monome homepage
monome explained on the monome forums
Video of the application I made called ArpShift
monome with synced visuals
Monome Community Remix Project
Nice live performance with the monome

Modifier keys, those little keys on the bottom left hand (and sometimes right hand) side of your keyboard. Ever use them? They are some of the most handy hidden things on a Mac. There's not much that they do that can't be done with other more known commands, but they offer speed and precision where the originals are clunky and inaccurate. And sometimes, they can even do things that weren't possible otherwise.

So what is a modifier key? Let's start with, what's a modifier? A modifier is a word, phrase, or clause that limits or qualifies the sense of another word or phrase. There are a few kinds of modifiers; grammatical modifiers, gene modifiers and of course key modifiers. You already know one, the shift key (⇧). Normally, you press a letter on the keyboard and it comes out lowercase. However, hold shift and hit the same key and it comes out uppercase. You just modified that key. Most people also know the control key (⌃) as a modifier key, especially on the Mac as it's used as the useful right-click. Normally you click and it does its thing. However, hold down control and click (⌃+click) you get a contextual menu (in most cases) with extra options that are in context to wherever you may be.

Every modifier key has a symbol. Here are the symbols for the 4 main modifier keys:

⌘ - Command
⌥ - Option
⌃ - Control
⇧ - Shift

These symbols are almost universal on the Mac platform. You can see them in menu bar items in most applications. Only rarely are they absent.

So what does this have to do with Safari? Modifier keys can be specific to applications too. Safari puts two of these keys to great use. The first is Command. It relates to tabs. Normally, you click on a link and it takes you to a new page. If you ⌘+click a link (modifier+action), it opens that link in a new tab. If you enter a URL into the location bar and hit return, it takes to to the website. If you do the same but use ⌘+return instead, it will go to that url in a new window. Same for the search bar in Safari.

The second is Option. This is used to download things. This one is a little trickier to grasp. Try this:
⌥+click this mp3 file: Oh My God - Mark Ronson (Featuring Lily Allen). Keep in mind that this is just the MP3 file. There is no page wrapped around it like in my last post. When you ⌥+click the link, it should start downloading the MP3 to your download folder. This also works if you type the address (or just visit the page) of the file and use ⌥+return. It will download in the same fashion.

*As a side note, you can also copy and paste a URL into Safari's download window (⌥⌘L) and it will start downloading.

I use these all the time. I often visit sites that have lists of links so I can just hold command and click as normal getting tons of new tabs you peruse. If I find a nice music sample on a website I hold option and have it in seconds. Modifier keys are really quite easy when you get the hang of them. You can even make your own.

Other links:
KeyCue - An utility for revealing all key commands in any application
A long list of modifier key tricks

Anyone who's around me for more than 20 minutes knows I'm a Jon Hopkins super fan. He has just about everything I could want as far as talent and skills when it comes to music creation. I loved the first song I ever heard by him and every track since seems to be better than that last. He has an remarkable taste when mixing simple melodies and subtle yet effective sound design. I'd like to share some of that with you.

Presented is Jon Hopkins and King Creosote's Circle My Demise. I don't know their full history but I believe they've worked together a bit here and there. Jon even helped produced an album for King Creosote. What I like so much about this song is how everything sneaks up on you. It starts off with some kind of field recording, possibly in some kind of industrial warehouse. It doesn't take long for the seemingly random machine noises to start looping to create a rhythm and sound that could not be recreated by any intended instrument. If you listen carefully, about every 2 measures, something else comes in, something small. A light hi-hat sample, a new bass drum, a voice, a click or pop. When we've arrive at the apex of a long 4 minute crescendo, we're now immersed in swirling textures, strings, piano, synth patches, reverb and an array of sounds from anywhere and everywhere. Did you know all of that was there? I certainly didn't the first time I listened.

This is the reason for my super-fandom. Music Synthesis can be so plain in the sense of textures and instruments. Jon breaks that mold every time he makes a song. When I listen, I'm not sure what I'm hearing exactly, but I know I like it. I urge you to check out his other work. It's just as good.

Other links:
Jon Hopkins at Skreemr
Jon Hopkins at Last.fm
jonhopkins.co.uk

The best thing about creating your own blog is that you get just what you want. Nothing more. There’s no bloat of Wordpress or peer pressure of tumblr and Facebook. Don’t get me wrong, I’ve built sites in Wordpress and this layout is based off a tumblr design, but there's just a satisfying feeling that goes along with creating something from scratch. Despite all the hard work, building your own blog is an expression not just your ideas, but also of your function and design.

I wanted to build a simple design, with simple features. I also wanted it to look good and have some nice special effects, if for no other reason, than to show off. I used jQuery for most of the special effects and of course, CSS and XHTML for the design and layout respectively.

The idea itself came about after I got frustrated with Twitter's 140 character limit. I think the limit they set is fair, and actually quite rewarding as it gets one to focus on sticking to the necessary without anything extraneous. But my thoughts just seemed stunted sometimes. I asked around to see if anyone knew of any blog systems that weren't Wordpress. I got recommendations for Movable Type, Typo and Drupal. The first comment to me was actually that I make my own, but it took a friend to convince me. A couple weeks later, I now have a site hacked together with PHP, MySQL, JavaScript, Photoshop, XHTML and CSS.

I plan on talking about my life and my art here. Also, I imagine it will be used for tutorials on technology, if for no other reason but so I only have to explain them once. I don't plan on posting anything shorter than 140 characters here, for obvious reasons. I also will never mention how long it's been since my last post. Ever. That's a promise.

It has been a short, if not circuitous, journey creating this blog. So stick around. Grab the RSS feed if you're into that kind of thing. Check out my actual site and enjoy the low-fat, nutritious and sometimes edible blog that is Too Long For Twitter or The Blog of Edward Loveall.