Lauri's blog

Developing homepages has progressed a lot during past years. There are many good-quality building blocks available, so I am going to list some of the most usable ones here. Perhaps this will save time while creating your next awesome homepage!

jQuery

jQuery is the core of client-side processing at the moment. It has element selection mechanism that actually makes sense. It’s possible show/hide, fade in/out and animate CSS attributes. With jQuery you can do most of the stuff some others might consider doing with Flash. For the compatibility and open-sourceness I prefer jQuery.

Videos, images and other dynamic data

If you need to show and manage videos and photos on a webpage, it doesn’t make sense to build management part yourself. You can have major providers to do the job for you – upload videos to Youtube, photos to Picasa, announcements to WordPress. Use RSS or Atom feeds they provide to aggregate the entries and display them as you wish on your webpage.

jQuery scale

Scaling images is pain-in-the-ass with CSS, so this is a plugin which does almost what I tell it to do with images.

Editease

Editease is jQuery plugin which allows you to transform regular div or p elements to editable ones. When entering into “admin” mode, the same elements are presented with WYSIWYG editor and edit/save buttons. The content is stored in text files using PHP on server side.

Fancybox

Fancybox is a jQuery plugin which allows creating popup boxes from div elements embedded in hidden container. Useful to present AJAX forms or “normal” view versions of thumbnails in a photo gallery

YapGB

In some cases you might need to include old-school guestbook in a homepage. There aren’t any good external guestbook providers, so reading RSS feed is out of the question. YapGB is written in PHP and it stores data in a text file on server side. It’s highly customizable via configuration file, it allows time-limit for posting and it’s easy enough to embed in your site using iframe

Syntactically Awesome Stylesheets

Sass is basically yet-another way to mark-up stylesheets in YAML format. Cool thing is that it allows nesting elements and it allows using variables inside the stylesheet. The source YAML is converted into regular CSS with command-line program “sass”

Wikiss

In some cases you might need to set up a wiki really-really quickly. Wikiss is exactly what you need then. The wiki is not publicly editable, content can only be changed if the user has identified himself with a password defined in the config file. Wiki entries are saved into files using PHP on server side.