Fancybox is a pretty cool lightbox plugin for jQuery that I have been using for awhile now. It’s got a great feature set, looks good, and for the most part it just works out of the box. There is however one thing that was mind numbingly hard to figure out, and that was how to automatically set the height of an iframe lightbox. Fancybox has this functionality built in for inline content via the autoDimensions key, which is set to true by default. Unfortunately this is not the case for iframes. After some hair pulling I managed to piece together an auto height solution for Fancybox iframes, but this technique could also be used without Fancybox to find the height of any iframe.
Dotted or dashed lines can be a great design element and easy to achieve with a bit of CSS, but creating a lot of them in Photoshop mockups can be time consuming and frustrating. There are 3 simple ways to create dotted or dashed lines in Photoshop. The first one is the way a lot of people probably do it and that’s by doing it with the pencil tool dot by dot and then duplicating the layer. This is slow but there are ways to speed up the process. The 2nd method is achieved by using the brush palette spacing settings. The 3rd method is uses custom patterns. This tutorial will cover all three methods with the Mac/Windows shortcut keys needed to speed up the process.
I was recently at Drupal Camp Toronto which is a conference on Drupal. It was a fantastic place to learn about what other modules and strategies people are using with Drupal. Having only created a couple of Drupal sites myself, it was great to be around so many people that build Drupal sites for a living. Out of everything I learned at Drupal Camp the single most amazing tool had to be Drush. I still have a lot other modules to research that I learned about from the conference and Drush isn’t even really a module, but it’s still a lot of awesome.
Everyone who works with (X)HTML probably knows how to use CSS to some degree, but not as many know how to write clean CSS. Cascading Style Sheets are probably one of the most powerful tools a web designer/developer can master. It’s hard to find a site today that doesn’t benefit from the capabilities of CSS, and with the slow arrival of CSS3 that is unlikely to change. That said I still constantly come across style sheets that could be cleaner, more optimized, and more elegant.
The sad truth is that it’s becoming more and more important to cross test your markup on multiple browsers including Internet Explorer. Yes I’ve heard the announcement about IE6 being dead, but chances are you probably need multiple browsers, and graceful degradation / progressive enhancement should still be the ultimate goal for any web designer.
VirtualBox to the rescue
VirtualBox is a fantastic virtualization tool for Mac OS X, Windows, Linux and Solaris. I actually like it more than Parallels, and unlike Parallels, it’s free. Setting up a virtual machine is pretty easy, but it’s a bit time consuming. Once you have a VM set up there doesn’t appear to be any quick way to duplicate the already working image. This tutorial will guide you through the steps needed to duplicate a VirtualBox image on Mac OS X.