solidhex.com

This morning, while trying to cure a rash of comment spam awaiting me in the moderation queue, I accidentally deleted all (but one) of my real comments along with the all the links to rapid weight loss pills and online poker.

Aside from feeling slightly stupid, I realized that no matter how well something is designed or implemented, someone is going to either a) make a mistake or b) find it counter intuitive. We do our best as designers and developers to make doing stuff online easier for our user base, but every now and again, someone like myself comes along and manages to screw it up. Shockingly, I am more than familiar with the WordPress admin section and I still managed to jettison my valid comments. I can chock that up to too many late nights banging away at the keyboard and too little sleep.

Sadly, my host is not running back-ups of MySQL at this time, so all those bright, shiny comments you all have left me are lost in the sands of time. Forever.

Fear not. You can begin commenting away anew.

Now I am little older, a little wiser and have a lot less comments on my site.

As a minor housekeeping note, my blog has moved from the sub-domain blog.solidhex.com to the parent directory, www.solidhex.com. There should be no service interruptions and everything should redirect automatically as I have setup a 301 redirect in my htaccess file to ensure no broken links. If anything goes wrong, please let me know!

For the curious, this is what I added to my .htaccess file to get it to work:

RewriteCond %{HTTP_HOST} ^blog\.solidhex\.com [NC]
RewriteRule ^(.*) http://www.solidhex.com/$1 [R=301,L]

Therefore, the entire .htaccess file (with WordPress settings included) is:


RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^blog\.solidhex\.com [NC]
RewriteRule ^(.*) http://www.solidhex.com/$1 [R=301,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]


I am not sure if that’s 100% accurate, but so far, so good!

Designers seem to like using modal windows more and more, as they provide a quick way to show data without reloading the entire page. It’s easy to use and easy to design. The big problem I experienced with every plug-in I tried either using Prototype/Scriptaculous or jQuery is the customization. They say you can do whatever you want simply but that’s not true. The default CSS works fine, but most of time it’s a mix between required elements and optional. This mean you have to be very careful when editing it. The other problem is the animation. That’s the worst point. I never found one plug-in allowing to redefine easily the animations.

And with that, Cedric has relased nyroModal.

The seeds for this idea were planted as he and I continued to work on large sites utilizing many modal windows. Once you stop using them for simple login pages and image galleries, they can become quite a mess to customize.

Cheers to him for solving our problems and making it available for others to use.

The other night, I upgraded to WordPress 2.5. The process was painless and quick, just like an upgrade should be. As everyone and their third cousin twice removed knows by now, the admin section was given a new swash of paint by the fine folks over at Happy Cog.

Had you asked me before I installed version 2.5, I would’ve said that the previous admin wasn’t broke so why fix it? Well, Happy Cog proved me wrong. Only after you give the new skin a test drive do you realize how cluttered its predecessor had become. As feature creep set it in over the years, it’s easy to forget that the primary focus of WordPress is publishing content on the web. 2.5 doesn’t bombard me with so much stuff up front, but everything I want and need is there waiting for me patiently should I decide to use it. It just feels, and I hate to use this word, streamlined.

I won’t go into an exhaustive feature or API list here, get that info direct from the horse’s mouth.

If you haven’t upgraded yet, I suggest taking the plunge when you get a chance. Just please make sure to make back-ups of your files, fer cryin out loud.

Slowly but surely, I am finally starting to make some tweaks around here. Firstly, I’ve updated the blogroll list, but I am taking (what I think) is a unique approach; I’ve either met or worked with everyone on my blogroll list at some point or another. I am doing this for two reasons:

1. It will help me remember everyone I’ve met during the course of the year at conferences and meet-ups.
2. It makes me look more important than I actually am.

And by met, I mean in person, face-to-face. I think this will encourage me to introduce myself to more people. In the interest of full disclosure, I basically stole the idea from Jeremy Keith’s bedroll. He takes it one step further by actually requiring a stay over night and a bouzouki serenade, but that’s more than I willing to extend myself at this juncture. Speaking of Jeremy, he is not yet on my list, even though I’ve had iChat conversations with him a couple of times and sat next to him at a panel or two, it’s not kosher per my strict sidebar-linking guidelines. For everyone else on my list, it’s a sure bet I’ve either talked geek with or work with them.

Other minor tweaks as well as vast re-aligns are coming shortly as I find time. But let it be said, I am really committed to improving this site. Where did all this zest and vigor come from? I’ve been a front-end web developer, full time, for the last four years at Fluidesign. I’ve been tinkering on the web for eight years. It’s been a long time since I’ve done anything other than client work. Plus, I want to give a little back to the web community at large if I can. I’ve learned countless time saving tricks and bug fixes from everyone else, and it’s high time I bring something to the table other than my own hungry, fat stomach.

I’ve run into a rather odd Explorer bug of late. The issue has to do with floated or positioned text and line-height. Explorer has many well documented bugs regarding text, positioning and floats, which you can brush up on at PIE. Chances are you are already quite familiar with that list. After some Googling, I still couldn’t find a definitive answer to my problem though, so I’ve decided to document it here.

The bug

When text is floated or positioned in Explorer, the line-height seems to be reduced to the point of the text being cut off. This quirk is most notable when a larger, seriffed typeface is used, but can also be quite noticeable with Arial in particular. Below is a screen shot of what it looks like in IE7 and you can also view the HTML file from whence the screenshot came. Sometimes, this bug goes unnoticed if the cut off portion of the text is very minimal, but if you were to look really closely, you would notice it. In fact, in some cases, I didn’t notice it myself until it was pointed out to me by the all seeing eye of QA4U.

Workarounds

So far, I’ve found three workarounds:

1. Increase the line-height to an arbitrary value until text is fully visible.
2. Wrap text in a floated container.
3. For positioned text, add padding.

While option 1 works, it requires some fudging. Generally, you have to increase the line-height to equal the size of the font. So for example, if the text size is 32 pixels, the line-height should be at least 32 pixels, but you will have to ‘eyeball’ it to get it to look right. The drawback that I’ve found to this method is that the increased line-height can create vertical spacing issues with other layout elements, not to mention you will need to adjust every single header or paragraph that has floated text.

Option 2 works brilliantly and doesn’t require any jiggery-pokery with line-height settings, but the drawback here is that it means an extra div in your markup which might not be desirable to you.

Option 3 has the same potential drawbacks as option 1. You might be able to get away with adding arbitrary padding to the text in some designs, but other designs may be more strict, so it’s clearly not an across the board solution.

In my case, I had dozens of headers floated left and links floated right, so method two won out, which is the solution I provided on the example page. It also had the advantage of me being able to reproduce the design I was coding more closely, which pleased the designer, so the extra divs didn’t cause any premature hair loss.

Conclusion

This is certainly not an exhaustive list of workarounds or fixes, just three quick methods I found of sidestepping the issue. If anyone knows of a fix that does NOT involve altering the structural layer, why the bug is occurring in the first place, or both, I’d love to hear about it. Happy coding!