jQuery rocks

OK, I'm late to the game on it, but I'm really digging jQuery. I used to really dread having to do much of anything in javascript because of all the retarded cross-browser issues, the difficulty testing, etc. But jQuery is really turning that around for me - you can get some really neat stuff without having to deal with all the usual javascript stupidity (well, most of it) - check it out!

Great VIM Article

Over on Ars Technica - how to get common IDE features in VIM. Gonna have to try some of these! The code navigation sidebar looks particularly useful, especially for one of the large sites I support at work.

"Cropped" images via CSS only

Had this problem on a site recently. There was an area where a variety of images could show up, dynamically pulled from a datbase. The images were of a fair variety of dimensions - all the same general size, but no exactly the same.

The variety of dimensions made the area look bad - and simply forcing them to the same dimensions led to distorted looking images. At the same time it wasn't feasible to resize or crop them either automatically or manually.

The solution I came up with was to simulate a cropping effect. I came up with a good "ideal" dimension. Say it's 100x100. The images themselves are in a grid of table cells.

First, I fixed the table cell size at 100x100. Then, rather than placing the image inside the table cell as would be standard, I set it as the background for the table cell, and just put a "&bsp;" in the table cell (so it's not empty).

This makes it so that the table cell displays the image as a background - any parts of the image that exceed the 100x100 dimensions are not shown. But if for example the image is narrower (say 90x100) then it won't fill out the 100x100 enclosing table cell.

To fix this, I set the background color for the cells to black. Then I set the background position to "center center".

Here's the basic css code:

  td.thumbnail { 
    width: 100px;
    height: 100px;
    background-color: black;
    background-repeat: no-repeat;
    background-position: center center;
  }

Here's the html for a single table cell. You have to use inline styles to set a different background image for each cell.

  <td class="thumbnail" style="background-image: url([the image]);">
    &nbsp;
  </td>

Handy vim - easily generate properly formated bullet lists

This is a problem I run into fairly often, because I do a bit of hand-coding HTML from word files or other content that clients send me. When you cut and paste the items for a bullet list into an html document, they often come in one per line with no formatting (or sometimes they have a "*" at the start of each line.

Obviously you can create a macro to automate the process of putting <li> tags around each item, but there's an even faster way to do this using vi's powerful regular expression tools.

Of course, this will only be useful if you can use vi, a command-line text-editor. If you're on shared hosting or something, you may be out of luck. There is a windows version of vi, but I haven't really done more than mess with it a bit. If you're on OSX, you're probably in luck - you can use the console, and I think that it has vim installed, although it's been like eight years since I used OSX regularly.

First, figure out the lines that you want to change - you need to know the first and last line to apply the expression to. For example, let's stay they're lines 5-10 of the code.

Then apply the following regular expression by pressing ":" and then typing it in:
5,10 s/\(.*\)/\t<li>\1<\/li>/

The basic pattern here is s/pattern/replacement/. So, to break it apart sequentially:

5,10 - apply the pattern only to lines 5-10
s - subsitute
/\(.*\)/ - match this pattern - .* means all characters, the escaped parentheses around it tell vi to remember what was matched for use in the replacement
\t<li>\1<\/li> - the replacement portion of the pattern, the \1 is a stand-in for what was matched in the matching pattern, the rest of puts a tab and open LI tag in front, with a closing LI tag after.

Of course similar patterns can be used for all sorts of things, such as replacing variable names in code. Enjoy!

MaxVPS has new plans

One of the hosting companies I work a lot with has just gone through and redone all of their VPS hosting plans. They've simplified the number of plans, and improved them significantly, increasing the amount of storage space, bandwidth, RAM available at each price point. They've also updated their support for a wider variety of operating systems (including Windows) and web control panels.

A Virtual Private Server is essentially the same as a dedicated server, except that it's running on "virtual" hardware. In other words, the physical server that hosts the VPS is running virtualization software that allows it to host one or more virtual machines, and the VPS plans are set up on these machines.

This has a number of benefits - it spreads the cost of the physical server out over multiple clients, making for cheaper hosting. At the same time a VPS server has many of the same benefits of a dedicated server, such as greater stability, security and flexibility when compare to traditional shared hosting.

Getting more organized...

I think I'm a pretty organized guy, at least compared to some of the people I've worked with over the years. But what with a full time job, my own side business, and another business-related project - plus being a homeowner with all the little tasks that entails, I'm starting to feel like my current system may not be adequate.

On the work side, I have multiple web projects spread across three broad categories, plus other non web-related tasks. Of course most projects have multiple sub-tasks and information. And then on the personal side it's the usual stuff... bills that need to be paid, things that need to be fixed/replaced, etc.

My current system pretty much totally relies on email, at least for the work-related stuff. This system has worked well for me for years - emails stay in the inbox until responded to or the related task is completed, at which point they're saved in the appropriate folder, depending on the task/client they're related to. For offline stuff I have your basic little notebook that has years worth of notes from meetings, etc. in it.

I like email because it's "in the cloud" - I use imap so it's always available as long as I have access to an internet-enabled computer (or to some extent my phone). But the system doesn't seem to do well at tracking larger, longer-term projects with multiple goals, tasks, etc. And if something doesn't end up in my email, I'm much more likely to forget about it.

I've tried using my palm phone's to-do list, but that's just clunky and inefficient to be adding stuff all the time. I think I'd prefer paper to that...

So I've been looking around a bit at other options. Some, like the "Getting Things Done" system seem promising - but require a lot of up-front work to set up and may require custom software, etc. But perhaps it's worth the cost, it's hard to tell.

I guess I'll write another post if I ever solve the problem. Guess that's something else to add to the to-do list...

Dropbox - very handy!

Been using Dropbox for a while, and I have to say I've had pretty much zero problems with it. I'd previously mentioned trying Badongo, and that didn't work very well at all, so Dropbox is looking pretty good!

Dropbox acts as a "cloud" synchronization tool. Basically, you specify where your dropbox folder will be on a computer. Anything put in that folder is sync'd with their service, as well as with any other comptuters registered with your dropbox account.

I regularly work on three different computers, and this is proving to be very handy for keeping files current. If I need to go work on the laptop somewhere, I know it has the same basic files as my main work computer.

If you delete a file, it will be deleted from the other computers. This makes sense since it's a syncing utility, but at first it seemed to counteract Dropbox's claim that it's also useful for backing up data. After all, if something happens and the dropbox folder is deleted, there goes your data!

Well, I was wrong on that - while it does delete files from the other computers, a copy is kept in the "cloud" - meaning you can go to their site, and choose "view deleted files" to see the files that have been deleted, and then restore them as needed.

I haven't tried anything other than the windows version, but they claim to have max and linux versions, which is pretty cool. Right now there's a free 2 gigabyte plan (what I'm using) - but apparently there will be bigger plans coming.

If someone needs an invite, post a comment with your email address and I'll send an invite. Don't think they're necessary any more though.