The Forgettable Mister Ruthsarian

Right now work has me creating some maps to put on the web based of scanned drawings from the contractor behind a bunch of on-campus construction. In the past I would use Adobe Illustrator to do this by importing the maps and then tracing over it with vector lines. This process is relatively quick and easy. I can use grids to control the initial lines and keep them straight. I can then go in and manipulate points (or add more as needed) along the lines to fine tune things.

Well I don’t have Illustrator installed and the only version the office has is old and, from my experience, not very responsive. So I set out to find a free alternative. Enter Inkscape. Inkscape is a free, open source vector graphics program that you can use on Windows, Mac, and Linux platforms (and is probably portable to others should you be into that sort of thing).

I’ve been using it for just the day and I’m already in love. The controls are intuitive. There’s a ton of power in just the mouse commands. I hardly need to touch the keyboard for anything (hiding and unhiding the guides I’ve created). Working with layers may feel a bit odd; it’s nothing like Photoshop or Gimp in terms of the UI. But after a few hours I find myself right at home.

It’s native format is SVG, which open standards people will love. But if that’s not your thing you can save is most major vector graphic formats (eps, pdf, etc). You can also export the work as a bitmap and tweak it as needed in your favorite graphics editor.

This is a great application. I suggest you give it a try if you’re ever in the market for a vector graphics format.

Just checking in to let everyone know I’m still around.

Working on a new layout that I’m going to use as a new WP layout for this blog. I’d originally intended it to be a separate, new layout, but now I think I’ll publish it was a WP layout instead. After it’s been up here for a bit and the bugs ironed out. Hope to install the first version of this template in the next week or two.

Here’s a little tip for web designers. Sometimes I’ll find myself wanting to produce “previous” and “next” links to appear at the bottom of a web page used to manage some kind of database-driven content. The links would obviously point to the previous and next records in the database.

To style this I sometimes prefer to have the links centered on the page with a bit of a gap between the two links. Why centered and not at the far left and right edges? I don’t know. Visual preference that fits better with the layout and style perhaps, but I tend to operate more on gut feeling with a layout.

Now in the past I’d simply make a paragraph tag with text-align:center set and then a bunch of   characters to add some space. Now if the text should ever wrap because the viewport is too small then the effect breaks horribly. Also, the text would center based on the center of all the text, and would NOT center on the gap between the two links. The illusion breaks very quickly if these previous/next links include a variable width bit of text like, say, the title of the previous/next record. The position of the gap starts moving from record to record. Ick.

« Previous             Next »

So here’s a new way to do this. Simply create two paragraphs. Float them to either side. Set a width of, say, 40% for each. Right-align the left-float and left-align the right float. Now you’ve got a gap (20% the page width in this case) between the two links, they’re centered to the page based on the gap, the gap’s location won’t change from page to page, and if the text wraps the visual structure is retained.

Now there’s no great reveal here, is there? It’s a pretty basic and simple trick. But I find my mind will sometimes approach a problem from a direction that makes it difficult to see the obvious. So I like to see these simple tips from time to time, because once in a while it’ll be a trick I’d never considered before.

Right, so here we are. A new server running Wordpress. I’ve imported all the old posts, but any links to old posts are going to be a bit broken now. So be it. I’ll have to develop a theme for this place. I’ve got a new layout that I think will work, I just need to move it to Wordpress. We’ll see how that goes.

For now, please forgive any errors or problems you might encounter. This server is a bit fresh and may need a bit of time to ripen into delicious fruit. Pineapple!

Still here.

In the coming days (this month at least) we’ll be switching blog servers and software here. The URL should stay the same, but this site will be moving to a new physical box and to Wordpress.

I’ve played with Wordpress enough to see that it should have no problems importing old entries from this old version of MT we’re using now. Don’t know how this will affect RSS/ATOM feeds (for the few that use them).

So, heads up guys!

OpenID has been in the news recently and I thought I’d cover it real quick.

The buzz-phrases are “Identity Management” and “Controlling your online identity”. But what is it really?

Essentially it’s a protocol that allows systems to authenticate users through a third party. So if I want to log into this blog, for example, I could have this blog software authenticate with Google, allowing me to use my Google account rather than some account that’s unique to this blog system.

I can then use that same Google account to authenticate with all the other OpenID capable systems out there. Now I need to only remember one password (my Google account).

This is a free/open system. You can use it however you like. No fees, no nothing.

Now immediately people will note a couple things. First, if an attacker gets the password to your OpenID account (your Google account in this instance) then he/she has access to all your accounts. Furthermore if Google goes down you won’t be able to log into anything for as long as Google’s servers are offline.

In other words it’s a single point of failure.

Furthermore, this is more for the end-user benefit than it is a benefit for those who manage these systems. Sure, you’re no longer in the business of password management, but you still must maintain a local account tied to the user’s OpenID. Systems that integrate with OpenID are still managing accounts, they’ve only saved themselves the trouble of having to set and reset passwords.

However, there is a bit of a plus side to OpenID.

You control how you authenticate.

Don’t like passwords? You can setup your own OpenID server (or, more likely, use one already in existence) that uses alternative forms of authentication. Maybe it’s biometrics, or includes some sort of CAPTCHA to defeat password guessing attempts, or maybe authentication comes in the form of answering a question that only you would have the answer to.

One really nice setup is to go through VeriSign who are OpenID Providers and will allow you to buy (for only a few dollars) an authentication token. It’s a small thing you place on your keychain and carry around with you. Whenever you go to log into the system you’ll have to include the number displayed on the token, which changes every 10-30 seconds. So even if your password is compromised you’re still fairly safe.

With OpenID this type of two-factor authentication goes with you. Any place you login with OpenID you’re using two-factor authentication. It’s brilliant.

But there’s one big problem.

A trend has started where big companies (Google, Yahoo, MSN) will allow you to use your account on their servers as an OpenID, but you cannot log into those systems with OpenID. The reason for this is that they don’t want you signing up with alternative services. If Google doesn’t do OpenID you’re forced to create a Google account. And whenever you use that Google account to log into an OpenID system you’ll have to type in “google”, helping to reinforce their name and brand in your head.

Another, more sinister, problem is that your OpenID provider will be able to track which web sites you log into and when. It would be trivial for, say, MSN to keep track of the web sites you authenticate with. Once it recognizes that you visit, say, gaming web sites, MSN might start throwing gaming advertisements at you either during your login process or while you’re on any of MSN’s own services. This sort of targeted advertising will be the excuse companies give when questioned about their tracking practices.

But who knows what else they do with that information? There’s a privacy issue here. Advocates will say it’s a moot point because if you don’t like Google’s practices you can simply switch to another OpenID provider.

That’s all well and good, but the reality is if you’re going the OpenID route you’ll want a provider that’s reliable and isn’t likely to go away in the next year or so. That means you’ll go through a large company like MSN, Google, VeriSign, etc.

There are lots of trade-offs and lots of issues to consider before taking to the OpenID highway.

Personally, I’m going to stick with a copy of KeePass and have unique, randomly generated passwords for every web site. I’ll only need to remember one password, the one to open the KeePass database, and it’s a password that won’t be stored anywhere online (not even as a hash). A side-benefit of this approach is should your system be compromised, a keylogger isn’t going to get any of your online accounts since you’re never really typing anything in (just copy/paste). So Warcraft players fear not!

The trade-off is if I ever lose that database I’m royally fucked. So backup often! A small price to pay for what I think is better security.

Here’s a little trick that works nicely in modern browsers:

<img src="..." style="width:100%;max-width:000px;">

This image will now shrink to fit the width of the layout (width:100%) but won’t go wider than it’s own image size (max-width:000px where you replace 000 with the image’s pixel width).

Browsers should scale both X and Y even if only the X constraint (width) is set. In other words, only setting width and not height as well shouldn’t screw up the aspect ratio of the image.

The upside is images that won’t cause a fluid layout to break if the layout is narrowed to a width smaller than the image.

The downside is you can’t easily apply this rule globally. You have to either put the CSS inline for each image or you have to write a little javascript app that’ll go through every image of a with given class name, figures out the image’s max-width, and adds the max-width CSS rule on the fly.

I don’t like the javascript solution because it means a user who has it disabled will (potentially) get a broken layout. But maintaining a bunch of inline CSS is just tedious. So it’s something I’d say use, but use sparingly.

A recent forum post about max-width in IE mentions my javascript utility library as a solution for min-width and surely someone can figure out a max-width solution as well.

Actually, I did.

If you look at the source of that javascript file you’ll see a function called set_width_limits which you can use to set both min and max width values with one function call!

set_width_limits( obj_name , min_width , max_width, ieOnly, noIE7 )

obj_name: This is the ID of the HTML element you want to apply width constraints to.
min_width: The minimum width, in pixels, that obj_name can be.
max_width: The maximum width, in pixels, that obj_name can be.
ieOnly: TRUE/FALSE; only apply this constraint to IE. Apply these constraints only in IE? Default is TRUE. The reason for this is most modern browsers understand the CSS min-width and max-width attributes. IE is really the only target for this sort of functionality. Therefore why bother putting the extra bit of overhead in having javascript control the widths of elements you can more effectively (and cleanly!) control with CSS.
noIE7: TRUE/FALSE; do not apply this code to IE7 (and later). The reason for this being that IE7 finally starts to understand CSS min/max width rules.

Skidoo Redux has the following line of javascript in its HEAD:

if ( ( typeof( set_min_width ) ).toLowerCase() != 'undefined' ) { set_min_width( 'page-container' , 600 ); }

To make use of this “new” function you could do something like this in place of the above line of code:

if ( ( typeof( set_width_limits ) ).toLowerCase() != 'undefined' ) { set_width_limits( 'page-container' , 600, 1024 ); }

And now the layout won’t expand beyond 1024 pixels in older versions of IE! You can see this in action here.

Or just look at the Bridgewater State College web site, where this function has been in use since May of this year.

Sun Java System Web Server is a piece of software I’ve used for nearly 10 years now — since the days when it was called iPlanet.

Not too long ago version 7 was released. it’s free to download and use, so anyone reading this can go give it a try. I’ve been playing around with it myself so it’s on my mind and I thought I’d share a few of my feelings.

First, this is a marked improvement over previous versions. The admin interface is cleaner and more intuitive. I like the improvements they’ve made on the file structure of the thing, such as lumping the cert databases in with the configs of each server instance rather than sticking it in a separate folder. I like the concept of being able to configure a server, but not have the changes be immediately deployed. And it’s a hell of a lot better than editing a text file as is typical for the Apache user.

I don’t like the amount of options you have to help tune the server’s performance. Honestly, I’ve no idea how to properly evaluate what each variable’s (thread pools, keep alives, etc) optimal setting is. And this is even after reading the performance and tuning guide they provide with each release! It’s a bit like BMW’s iDrive. I don’t want to spend 30 minutes configuring every silly little setting on my car just so I can go down to the store and get some snacks. Just give me a few pedals, a steering wheel, and a gear shift, I don’t need to fiddle about with anything else.

But this is nothing new to 7.0. It’s been like that for quite a while. So it goes.

But the biggest worry, by far, is that I can no longer manage virtual server classes through the administrative interface.

The idea is you have multiple virtual servers. Each virtual server is, essentially, its own little web server instance. Each virtual server contains settings on what domain or ip to listen to, what directory to serve documents from, where to store logs, etc. Now there are times where you want these settings to actually be shared with multiple virtual servers. Enter the virtual server class. In 6.0 (and even earlier versions) there was a simple interface to do this.

Not any more.

You can still apply the concept of a virtual server class by manually editing the configuration files, but no longer is there an spot in the administrative interface to do all this. That’s annoying.

One other little thing that really tweaks me is on the page that lists out all the virtual servers for a given server (or administration node using the new 7.0 terminology); there’s a table and each row is a virtual server. One of the columns in the table contains a comma-delimited list of all the hosts that virtual server is set to listen for. Well they don’t put any spaces after each comma, so any virtual server with more than a couple hosts assigned to it will force the table beyond the width of your computer’s screen. In my case I have to scroll very, very, very far to the right to see everything because of this. Simply adding a space after each comma would make this particular page far more functional.

Despite all this I think 7.0 is such a huge improvement over 6.0/6.1 that I plan on migrating to this new version as soon as possible. And should I discover this to be an absolutely horrible mistake I’ll be sure to let everyone here know about it.

Michael sent me an e-mail earlier this week with an interesting bug he’d found with the Skidoo Redux layout. Using IE7, if you drill down to the second level of a menu, click on an item that has a sub menu (we’re three menus deep at this point), but rather than complete the click, drag the cursor out of the menu entirely, then release the button, then go back into the menu, you’ll see the item you clicked and dragged from still in its :active state. Furthermore you’ll find a big white box covering the area where the third level menu should be.

That the item is left :active is simply how IE operates. IE doesn’t seem to remove an element’s active state until something else is clicked on (taking on its :active state).

But the white box is a bug. My guess is that it’s related to hasLayout. I’m guessing the third-level menu isn’t properly told to “undraw” itself and so some elements are left drawn on the screen. By applying min-width: 0 to the immediate child of an active LI element seems to force IE into correctly telling the menu to completely undraw itself when its parent is no longer in its :hover state.

rMenu.css has been updated with this workaround and anyone who is using Ruthsarian Menus should grab this file and replace their old copy with this new one.

While debugging this I also discovered Skidoo Redux was susceptible to the active scaling bug I wrote about a few months back. So I’ve updated the skidoo_redux.css file with the approperiate fixes and I cleaned up the CSS a little bit more as well as moved the overlap hack needed by older gecko-based browsers into its own section under HACKS in the CSS. If you’re using Skidoo Redux I suggest you grab the latest copy of skidoo_redux.css and apply it to your site.

Here’s a link to bookmark.

The web site is called COLORlovers and they offer up a lot of things to do with color including color palettes. So if you’re like me and are horrible at selecting colors, this web site is an amazing tool to help you find great color palettes for your projects.