I’m posting this as a reference to learn a bit more about correctly writing and styling html tables. A calendar is really just a collection of tabular data, so it’s a good idea to use an HTML table.

Read through this article (Terrific Tables with CSS) by Jonathon Snook over at sitepoint

View a demo.

First, let’s start with a simple form:

Notice that each “?” has is wrapped in an anchor <a> with a class of tooltip. The value for the title attribute will be displayed as the help text for the tooltip.

Next we’ll add some CSS to make it pretty.

And here’s our form so far:

Our form

Now let’s add in a bit of CSS specifically for the tooltip itself:

And finally we gotta get it kicking when the dom is ready:

That’s it. Hope it helps!

View a demo

Preface

We’ll start off with a menu that the designer wants us to use. Since it’s a special font that’s not available to most browsers, we’ll have to use an image. In the past coders would embed images directly in the HTML and use gnarly javascript functions to show multiple states (i.e. mouseover/hover state). Today though we can use regular anchor text, an image, and some simple CSS to create an attractive and search engine friendly menu.

Step 1 - The Image

We’ll be creating three states for the image matrix:

1. Normal
2. Hover (mouseover)
3. Active (click)

Notice that we’re only using one image for all three states. This is what’s known as a navigation matrix. Each row in our image matrix corresponds to exactly one state. For this example, the top row is our normal state, the middle our hover state, and the bottom our active state.

Step 2 - The HTML

To keep our menu search engine friendly and accessible to screen readers and text-only browsers, we’ll write up some simple HTML. The menu itself is a plain old ordinary unordered list. I’ve given the unordered list an id of #nav, and each of its list items have a unique id. We’ll need to work with both in the CSS.

Step 3 - Take Some Measurements

Now we’ll go into photoshop to get some measurements. We’ll need only a few key numbers:

• Width & of one row in the matrix
• Height & of one row in the matrix
• Width of each menu item

First set up some guides for the matrix image. Be sure to zoom in closely to ensure that the guides are exactly in the right spots.

Next, slice up the first row into four parts. Then double-click each slice to open the slice dialogue box. We’ll need to grab the height and the width of the slice. For the first item, Home, the height is 47px and the width is 109px. Jot these numbers down somewhere.

Grab the measurements for each of the other three slices and jot them down as well. The measurements for my matrix image are as follows (W x H in pixels):

Notice that all the heights are the same. Makes sense, huh?

Step 3 - The CSS

Now comes the time to put it all together. We’ve got our image matrix and some required dimensions, so let’s get to the CSS.

First the unordered list itself. Let’s remove margin, padding, and list-style (bullets).

We should have something like this:

Now since each menu item has a specific width, we’re going to need to use CSS positioning. Let’s set the dimensions of the unordered list to show only one row’s worth of area. Also we’ll set the unordered list to have relative positioning and set the anchors to have absolute positioning. To help out certain browsers, we’ll restrict each list-item a little. Set them to float left. And we’ll add display:block and height:47px to each anchor so that the anchor covers the full height of the matrix cell.

This will give us something really gross:

Next let’s show the matrix image. Add the background image to both the unordered list and each anchor. This will prevent some browsers from displaying an undesirable flicker effect when each item is moused-over.

Still gross, but getting there:

We’re almost there… Now it’s time to do a bit of simple math. Grab those dimensions you jotted down earlier.

Each anchor within the list will need a fixed width. Also, since we’re dealing with absolute positioning, we’ll need to specify how many pixels from the left each anchor should be located.

By default a browser will apply a background image at coordinates (0,0). We’ll need to override that, and to do so, we’ll need to use background-position and set them to negative y-values.

Let’s start with the first menu item, Home. Home will need a fixed width of 109 pixels. It’s the first one to be displayed, so both its left value and its background position will be set to zero. (The first 0 in background-position is the x-value, the second one is the y-value.)

Naturally we’ll take on the next item in the menu, About Us. Its width needs to be fixed at 147 pixels. But it also needs to be pushed away from the left side of the menu. The Home item takes up exactly 109 pixels, so we’ll set the anchor’s left value to exactly 109 pixels. In addition, we’ll need to tell the browser to start the background position exactly 109 pixels in from the left, hence the negative value for its x-value.

Notice that the anchor text for About Us is located 109 pixels from the left. The other remaining items are still being floated above and on top of the Home anchor, but we’ll fix that shortly.

Above, the About Us item need to be 109 pixels from the left. But what about the Contact Us item?

Well its width is fixed, so we can set that to be 161 pixels.

But it’ll need to be moved exactly 256 pixels from the left. How do you get this number? Well, you simply add the widths of all previous items. This sum will give us the space to the left of the item, so we’ll set that to be its left value. (109 + 147 = 256).

And for the background positioning, set the x-value to be the same as the left value, except make it negative.

And finally we’ll handle the last menu item, Blog. Its width is 91 pixels. The sum of all the previous menu items equals 417 (109 + 147 + 161 = 417). This will give us a left value of 417px and an x-value of -417px.

After these additions, we should have something similar to this. Notice that the anchor text is showing up in its right spot.

Finally, now that the text is positioned appropriately, we’ll hide the text using text-indent. I’ll apply the hiding to the entire unordered list and set the overflow property to hidden.

This will leave us with a nice menu showing no text. Notice that as you mouse over each item, the link changes from #home, #abou, #cont, or #blog, which come from the href attribute in the HTML.

Step 4 - Multiple States

Finally, we’ll set up the last of the CSS to handle multiple states. The same principles as above apply here, with one difference. Upon mouse over, the second row of the matrix needs to be displayed.

To accomplish this, we simply have to modify the y-coordinate of the background image for each anchor. Keep in mind though, that you’ll have to maintain the same x-coordinate as above.

Let’s start with the first item, Home. We’ll only need to modify background-position. The starting point of the background image must be moved one row up, and since each row is exactly 47 pixels in height, we’ll set the y-coordinate to -47px.

Now when you mouse over the Home menu item, you should see the second row of the image appear:

Add in the hover states for the other three menu items, but make sure to maintain the x-value of the background-position property.

You should be able to see the hover states now.

Finally, we’ll implement the active states. This is the state that will appear when the mouse is clicked over one of the menu items.

Do the same thing as when implementing the hover states, except use the pseudo-class a:active and make sure to use a y-value of -94px, which will push the matrix down to display the third and final row of the image.

Full CSS

Here’s the full CSS. I like to keep the anchor styles organized in a kinda columnar format. I use TextMate, and using this columnar format really helps me keep these styles organized and easily editable.

Conclusion

Since we’ve used CSS to display the image, we can assure the designer that her font choice is used. Also, if you view the source for the site, you’ll notice that it’s just some regular old HTML text. This is great for search engines, text-only browsers, and users of screen readers.

That wraps it all up. Feel free to download the sample code and ask questions. Hope this helps ya out!

But whenever I go to change a filename within the Finder GUI, it always asks me ‘if I’m sure I want to change the extension’. I’m posting this here because I keep forgetting where it is, and I’m sure somebody else out there can’t find it either, as the setting is located in an over-intuitive spot.

Visit Finder > Preferences > Advanced and untick the box “Show warning before changing an extension”

Disable the warning from showing up when you change a file extension

Surveying a few

I started out with Yojimbo, messed around with Together, and took a look at DEVONThink. All were pretty good apps, nice and clean and worked well, but each was just a little different in its workflow.

After playing with these guys a bunch, there was one thing that bugged the crap out of me. None of them could synchronize across multiple computers. There was a small thing for Yojimbo, but I think it was still an alpha release when I looked at it. Now Yojimbo can sync with MobileMe, but I’m not going to sign up and pay for that service, especially since Apple keeps the right to remove any of my stored items if they want to.

DEVONThink looked pretty good, but it was pretty beefy at the same time. I could tell right away that getting going with DEVONThink would require me to configure bunches of other apps to work with DEVONThink, something I didn’t want to do. Mostly I didn’t want to do this because what if I changed my mind about using DEVONThink; then I’d have to go back and reconfigure everybody. Too involved for my evaluation purposes.

I also took a look at ShoveBox. It was nice, too, but it still wouldn’t sync.

Roll my own

Due to sync issues, about a year ago I finally decided I’d throw a hand in just building my own web-based PIM. I drafted the plans, relationships, interface, etc for my new, proprietary PIM. I was calling it InMind as a reference name. We began fleshing out the application using Ruby on Rails and some free module/component stuff.

We got a bit too busy with client projects, and InMind fell off the priority list. I figured I’d just stick with regular old bookmarks and folders upon folders of notes.

I’m mobile again

Just recently, though, I changed machines to a MacBook Pro, and I’m mobile again. (I also use an iPhone). Since I’d be mostly only using my own machine, I figured I’d take another look at Yojimbo, Together and others. Then I came across Evernote.

Evernote wins, hands down

At first glance, I realized that someone built my InMind application almost to the tee, except theirs actually got finished. Evernote offers both a web interface and desktop applications, for Mac and PC. Plus it offers an iPhone app! I’ve been using the hell out of it for the last few days, and I’m very happy with it.

The free plan offers a fairly generous 40MB maximum of monthly uploads. Evernote stores all your data online, which can be accessed via the web interface if you’re on the go. Also, in the desktop app, you can choose to create a local notebook, which won’t be synched online. This could help you manage your storage space a lot easier. And, you can set a Preference to manually sync, so you can clean out stuff you don’t need before uploading, saving your upload bandwidth.

The Evernote iPhone app is pretty sweet, too! You can take snapshots on the phone and upload them immediately. And you can do the same with audio snaps. Cool! Free!

The desktop app works really well, also, offering shortcut keys to add text, URLs, and other items to the database. You also get cool search options; you can search your own tags and even search depending on the source of the note text. You can add checkboxes to your notes, and use the shortcut to search for To Do items throughout all of your notes.

Evernote offers a PRO plan, which gives you a maximum monthly upload of 500MB. And it’s only $5. Just like a Quizno’s sub.

Check out Evernote

If you’re looking for a PIM, then you should really check out Evernote. It’s simple, easy, free, and it works!

Make the text in a textClipping selectable

Generally I’ll take a quick screen grab of what I’m trying to save (using Command + Shift + 4), but this saves an image. Of course, the text within the image is not selectable, so a text clipping seems to be a better fit. But, nope. For some reason this feature is disabled by default.

But you can fix it. I found this over at macosxhints.com that goes through the steps of enabling this feature. Here’s my summary:

1. Modify the file /System > Library > CoreServices > Finder > Contents > Resources > [language].lproj > ClipWindow.nib > objects.xib

2. Change the value of <boolean name=”noSelection”> from true to false

3. Relaunch Finder

Make sure to make a backup of the objects.xib file. If you mess the file up, at least you can revert to the backup. And if you don’t make the backup, mess up the file, then don’t come crying to me.

Vicinity Marketing

I glanced through a few computer techy books, and as I was leaving, I noticed a real gem of vicinity marketing in play. The computers & technology section was right next to the erotica section. This, of course, must be intentional. Either that or they just wanted to hide the real freak shoppers at the back of the store!

There are a few items that I’ve been fascinated with over time, ever since I was a kid. For one, I’ve always been fascinated with crocodiles and alligators. They’re just such unique and amazing creatures, and they move so strangely. As humans we each relate to animals differently, and often we relate more easily to the similarities we have with some species. Maybe I’m fascinated with these reptiles because they’re so different, and deep down I could never truly understand their nature.

Take dolphins as another example. Lots of people believe dolphins are of another world or hold magical powers. Some think that dolphins are the remnant species of the people lost in Atlantis. Get that? Dolphins are people, but they’ve evolved.

A scientist would claim that dolphins are just another species on this planet, having no major connections to humans than any other species would. People are drawn to feel related to dolphins simply because a dolphin’s smile looks similar to a human’s. Sure, this is a natural response; we believe we can see our pet dogs smile, too.

But should a friendly smile really lead us to believe that dolphins are magical creatures? Should humans really believe that dolphins are more highly evolved human beings? Why the dolphin? Why not a raccoon or a killer whale or one of the trillion squirrels outside my house? They’re mammals, too!

What I’m getting at here is that many people love to feel that dolphins are more than just sea mammals. Regardless of scientific or other proof, people just like to believe that these creatures are magical. People find some joy in being fascinated by the notion that a species other than humans are of higher intelligence or have souls.

The question is, do people really, deeply, and truly believe that dolphins are of a higher or similar order as humans? Or are they really just in love with the idea of being fascinated in something? Of course, there are some people that truly believe things like this, but there’s a nut for everything, isn’t there?

To be fascinated appeals to our inquisitive nature, to the little voice inside each of us that longs to know WHY. Why are we here and why do we seem to be the only species that has some greater intelligence or divine purpose? If we’re more highly evolved than the other species, surely there’s something more highly evolved than us, right?

So since our need to be fascinated appeals to some of our much deeper roots in human nature, is there really anything wrong with individuals that believe dolphins are gods? I don’t think so. I think it’s a necessary part of life, to believe in something that can’t be proved. Similar to religion, people feel the need to find answers to unknowable questions. Same thing with fascination.

So be fascinated with whatever you want! It doesn’t really matter the premise or the provability of your subject. What really matters is your human intelligence, your way of creating something out of nothing, your way of interpreting your custom little world, your way of inferring truths from subjective material based on your experience and future outlook. So be yourself, and be fascinated with something!

When I went to get the CDs out of the case to use them, the CDs were really hot! The 9-volts were hotter, like almost-burn-your-hand hot! I guess the magnetic material in the CDs created a channel for the current to run. I figure that the 9-volts were powering my blank CDRs.

I of course took everything out and separated the CDs from the batteries, let em cool off a little while. I’m not sure if those CDs will work, but I am sure the 9-volts were pretty much toast! CDs use a lot of power, I guess.

So make sure you keep your batteries and CDs/DVDs separated! I kinda knew this, but didn’t even consider it. They were pretty hot and near the verge of being a fire-hazard!

I’ve been using this guy for a few months, and it works great! It actually pulls the data from Google’s API directly or from another source, as I often notice that it’s a bit quicker to update than Google’s Adsense interface.

Here’s a link to download the widget over on Apple Downloads.

You probably know something about waves, and the common analogy to picture waves is to compare them to waves in bodies of water, like the ocean or a swimming pool. Using the guitar string, you can actually get a pretty clear picture of a real wave happening, and you can hear it on top of seeing it.

It’s really worth a shot. Just remember to check it out if you’re near a guitar and a tv. Of course, make sure the tv is on when you do this!

Oh, and here’s a bit more info on waves on a string.

Well, I finally found one. It’s called iEarn, and it looks like it might be worth a shot. Of course, like most other iPhone apps and Apple’s gadgetty business, it’s gonna cost $1.99. Check it out at iearn.anxer.com. If I actually spend the two bucks, I’ll post back here with feedback. And by the way, here’s another post with a short review of the application.

Here’s the reference article on the Associated Press.

To me this is ridiculous. I could care less about what you want to name yourself, and I could care less about PETA’s cause. Treating animals humanely is fine; it doesn’t bother me. However, should we be treating animals animanely, or something like that? I mean, they’re not humans, right?

I go with the school of thought that we humans are just animals, too, so to me there’s not much of a difference. I don’t kill animals or treat them badly, and I feel sorry for the ones that are mistreated and slaughtered. But I still enjoy a good burger and some chicken wings.

Speaking of chicken wings, the girl currently known as CutoutDissection.com freaked out one day when she had to dissect a chicken wing in school. Asheville High School, that is. So she campaigned or whatever to allow students not comfortable with dissecting to choose an alternative assignment. Ok, that’s fine. The alternative assignment is ok by me. Honestly, I could care less.

To me, though, changing your name to something for a given cause can be a powerful way to promote your cause, but dissection? Is this really that big of a deal? Aren’t these animals already dead? I find it hard to believe that the staff of Asheville High School is actually requiring their students to dissect live chickens! Give me a break, Ms Cutout. You can keep your cause.