WebCodr.com

Build A Lightweight CMS Using .htaccess

admin — Mon, 16 Apr 2007 11:13:06 +0000

Contemplating “the Digg effect” last week, I started experimenting with fast and efficient ways of displaying dynamic content. This method, although overkill, looked promising; A basic CMS written entirely in Apache config rules.

If you’re short on time, and just want to see it working, you can view the demo and download the source files. Don’t forget to read the installation instructions.

Otherwise read on - we will make our own Apache CMS from scratch.

STEP 1 - Serving Files

Let’s start easy. Apache is designed (obviously) to serve any type of file to a client who requests them. It is fast and efficient, using only the basic features of the web server. I begin by uploading several files to my web root - these could be Word files, images, whatever I like.

STEP 2 - Directory Listings

Depending on my Apache configuration, when I visit my I will either see an error message (because no default web page is available), or a directory listing. We want the directory listing. To make sure it shows, we have our first configuration line:

Options +Indexes

Admittedly the directory listing isn’t pretty, but we can work on presentation soon. First we need to generate the correct HTML for the data we want to display.

STEP 3 - Configuring Directory Listings

First let’s enable fancy indexing, and ensure it outputs compliant XHTML.

IndexOptions +FancyIndexingIndexOptions +XHTML

Because we’re going to be adding our own headers and footers to the directory listing, we need to disable unwanted Apache output.

IndexOptions +SuppressHTMLPreamble

Now let’s choose what information is displayed. This is down to personal preference, and the types of files that will be served by your CMS. In my case I only want a list of files, with nice icons, and a description for each entry. So I suppress information I don’t want to see, and add additional information;

IndexOptions +SuppressLastModifiedIndexOptions +SuppressSizeIndexOptions +ScanHTMLTitles

Finally I add a little bit of formatting to the data before we start styling;

IndexOptions +DescriptionWidth=60IndexOptions +NameWidth=50

Try refreshing your directory listing. Looks pretty different already, doesn’t it?

STEP 4 - Headers and Footers

Now we need to add HTML headers and footers to the directory listing. The header can include a site logo and some introductory text, and a copyright notice or similar in the footer. We can also use the HTML header to include CSS for styling our page. I keep the headers and footers in the directory that they relate to - that way I can have different introductory text for subdirectories off the homepage. First set the headers and footers in our .htaccess file:

HeaderName header.html
ReadmeName footer.html

Then we write our header.html file:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Apache Demonstration

Welcome to my Apache Demonstration

And finally our footer.html file:

Now when you refresh your directory listing, it should look a bit more like a web page. Note the directory listing includes our new files - we don’t want to show them to visitors as they are irrelevant to our actual content. So we add an extra directive in .htaccess:

IndexIgnore header.html footer.html

STEP 5 - Adding Other Items

I also wanted to add images, external style sheets to my headers and footers, which shouldn’t be displayed to visitors. I created an ‘etc’ directory off the web root and hid it in my .htaccess:

IndexIgnore etc

Now I can upload logos, CSS files (covered next), file type icons (covered next) and anything else for the presentation of the directory listings. Try adding your logo to the header. STEP 6 - USING CSS FOR PRESENTATION CSS is powerful enough to control Apache’s valid XHTML output of directory listings. Design your own stylesheet to match your site or corporate brand. You can use mine as a template:

STEP 7 - File Type Icons

The default icons supplied with Apache can look a bit dreary compared to more modern icons available. I have modified some of Famfamfam’s icons for directory listings, and written some directives for .htaccess to read the new icons. Icons are kept in ‘etc/icons’ - see our previous post for free icons if you don’t have any.

AddIconByEncoding (CMP,/etc/icons/compressed.png) x-compress x-gzip
AddIconByType (TXT,/etc/icons/text.png) text/*
AddIconByType (TXT,/etc/icons/text.png) .txt
AddIconByType (IMG,/etc/icons/image.png) image/*
AddIconByType (SND,/etc/icons/sound.png) audio/*
AddIconByType (VID,/etc/icons/movie.png) video/*

AddIcon /etc/icons/compressed.png .tar
AddIcon /etc/icons/back.png ..
AddIcon /etc/icons/readme.png README
AddIcon /etc/icons/folder.png ^^DIRECTORY^^

Complete

And there we have it - a simple content management system using only Apache .htaccess directives. Anyone with access can upload Word documents, photos, MP3s or movies without any knowledge of HTML or CSS. The system is lean and mean, generating pages in a fraction of a second (especially compared with the huge CMSs available). It’s perfect for intranets when you only have 20 minutes to make one. Or maybe a geek/hacker/personal web site. I haven’t made a satisfactory client/corporate implementation, and I don’t think I will in the near future. Clients just aren’t any fun.

You can take this further by using CGI, PHP or whatever scripts to add more functionality to pages. Using a simple Perl script in place of the ‘header.html’ file, you could dynamically generate introductory text based on a database, readme file, or anything else you wanted. Or use server-side includes for the header, with just the introductory text changing (highly recommended).

Demo & Download

You can try the live demo here, and download an archive of my complete setup here. Look at our previous post for icon ideas. Please don’t forget to link to Famfamfam if you use the icons supplied with the demo.

What would you use it for? How would you improve it?

4,839 Free-To-Use Icons For Web Developers

admin — Wed, 04 Apr 2007 12:46:27 +0000

When designing a site I can often spend hours trying to create or find suitable graphical elements for each page. The solution was to keep a substantial library of icons and bullets ready for any occasion. Here I have put together my favourite free and open source icon libraries.

Please read the license for each collection carefully. I always keep a readme.txt in my folders with the license, so I know where I stand when creating commercial sites for clients. In any case, it is common to use “Copyright 2007 domain.com and its licensors” in your footer, as you do not own the copyright for the icons.

Silk Icons v1.3 (1,100 icons)

The first set of icons we cover from FamFamFam, this collection of tiny 16×16 icons in PNG format is great for almost any purpose. Icons are released under a Creative Commons Attribution 2.5 License - use and change all you like, but please link back to the author’s page.

Mini Icons (144 icons)

Another great collection from FamFamFam at 16×16 in GIF format. Most are suitable for file format icons, and there are a few toolbar icons in there too.

Mint Icons (18 icons)

A lickable selection of ultra-tiny 11×11 icons in PNG format. Minty green, loosely-based on the Mint statistics software. Licensed under Creative Commons Attribution 2.5 License.

Country Flags (247 icons)

If, like me, you’ve lusted after the country flags in Skype then this is the collection for you. Almost every country is represented with a 16×11 icon. Filenames follow the ISO 3166-1 country code specification. You are free to use these icons for any purpose without attribution.

Laurent Baumann’s Mac Icons (700+ icons)

Icons for MacOS X has a distinctive look-and-feel that can compliment the right web design. Laurent has released some excellent icons suitable for lots of purposes online, under Creative Commons 3.0 Licence. Non-commercial use only.

Tango Desktop Project (273 icons)

Designed to create a consistent user experience for Open Source software, these icons are licensed under Creative Commons Attribution Share-Alike License. They come in 16×16, 22×22 and 32×32 PNGs as well as the SVG source file. Almost everything is covered, including toolbars, dialogs, networking, applications, file types, country flags and much more. Also have a look at the additional sets available.

Icon King (63+ icons)

Created by David Vignoni, primarily for the KDE Project and related icon projects. Please check the individual licensing information for each icon set before using.

Red Hat Icons (88 icons)

Thanks to PHP Kitchen for this one - a great collection of open source icons released by one of the Redhat projects. Each icon is around 48×48 and supplied in PNG format. Perfect for online application developers.

80×16 Buttons (1,746 icons)

Another collection found by PHP Kitchen, icons in various formats at 80×16 pixels. “There used to be a nice zip of those 80×15 icons that have recently sprouted up on everyone’s site - including this one - at Joe Stump’s site but it looks like he’s moving servers at the moment. Don’t know if these mini-icons have a catch name but surely the great thing about them is you can link to so much stuff in so little space.” No license information is included. Some are more useful than others

Pardon My Icons (460 icons)

Jeffrey Zeldman presents a set of 460 zany and unique avatar icons. Perfect for blogs and forums, each icon is 32×32 in GIF format. Free to use on your web site, although a link back to Pardon My Icons would be appreciated.

There are some great sites that haven’t made the list. Why? Sites like Iconfactory are only free for personal desktop use, while InterfaceLIFT and similar sites are a quagmire of various licenses (and not all icons are suitable for web development anyway). The most excellent 300 images from 1800 sites collection is not available to use at all, but can be useful for inspiration. And I’m afraid if you want Flash-animated bouncing smilies dressed in camouflage you’ll have to find them yourself.

What free-to-use icon collections have you found? Let us know!

New Home, New Features

admin — Thu, 29 Mar 2007 08:27:59 +0000

Welcome to the new home of Igglo; tips and news for web developers. Why have we moved? We needed a better name to reflect what we do, and a new platform to support the huge amount of readers we’ve had already this week. We’re working on new lightweight blogging software which should be ready soon.

Thank you to everyone who’s supported us so far, and all the great comments you’ve been sending us. We had no idea we would be this popular so quickly More coming soon!

15 Javascript Snippets You Can’t Live Without

admin — Tue, 27 Mar 2007 10:11:10 +0000

Please Note: We have moved to our new home WebCodr.com - please update your links and bookmarks!

You either love Javascript or you hate it. Either way it can provide great functionality that users love. And it doesn’t have to affect usability. Here are my top 15 Javascript snippits for making great sites that bit extra special.

Image Loading & Fading

Crisp photography is a sure-fire way to make a site look great, but what about the loading times of those chunky images? Give your users a nice animated loading icon, and fade the image in when it’s loaded. It’s a nice effect with little overhead.

Dynamic Data Tables

HTML tables are so last century. ActiveWidgets provide a dynamic data table library, allowing users to sort data by columns and highlight rows of interest. It is, however, a large overhead and not suitable for large amounts of data.

Calendar / Date Selection

Asking users to enter a valid date can be a pain - frustrating for the developer, and frustrating for the user. Offer them a simple GUI to select dates with this very customizable script.

Tabbed RollBar

Tabs are great for sorting short snippets of information. Tabs without reloading the page are even better. Tabs with a rolling animation effect too? Well, that’s just killer.

Draggable Windows

These draggable windows are lightweight and efficient, and are perfect for intranets and web-based applications where multiple views are required simultaneously. And don’t worry, you needn’t have the Windows 95 look either.

Zoomable Image Thumbnails

One subject, many photos? These tidy thumbnail displays are just the ticket, allowing visitors to blow up photographs of interest. Similar to those found on eBay and such, but not as heavy on the code.

Javascript Lightbox

A favourite little effect of mine found on many good sites these days - the Javascript Lightbox. Enlarge photographs with slick animation and easy-to-use navigation. Put a smile on the CEOs face and wow the marketing team ready for your “afternoon meeting” down the pub.

Drag & Drop Shopping Cart

Get your visitors from Google Search to card payment in ninja time, with a drag-and-drop shopping cart. Reducing page loads, form elements and complicated menu screens increases sales and repeat business. But with mission-critical code like this, make sure to test it on every platform before it goes live. You know this. I was just reminding you.

Form Input Autocomplete

No one likes a smartass, unless they’re doing your homework for lunch money. Let this script do your users’ hard work so they don’t have to - autocomplete from a selection of known data. Great for street addresses (if you have the data), category selection, search engines, tagging and everything inbetween.

Drag & Drop Sortable Elements

Nothing says “I love you, user” more than drag-and-drop items. Remember the days of an “order” column, and wanting to insert an item at the top? Nightmare no more! Slick interface with a very practical purpose.

Javascript Logging & Debugging

“PC Load Letter?! What the hell is PC Load Letter!!” cries from the office. Meaningless error messages are enough to drive a man crazy, so why not step up your debugging skills and hunt those bugs in style?

Font Resize Detection

After spending days getting your web site pixel perfect, inconsiderate users will always resize your text and ruin your layout. Well okay, they need to because their eyesight can’t comprehend your 6pt type. Which means you need to support different font sizes without ruining your layout.

Displaying Points & Text On Maps

If your data is geolocation based, it looks great on a map with clickable points. But how do you make that interface accessable to everyone? A List Apart shows you how.

Photo Album & Slideshow

A more advanced way of displaying your pictures - let users sort them by category, view random pictures, and even set up a personal slideshow. Probably more suitable for family pictures than commercial uses, but I’ve found it handy over the years.

Sliding Content Areas

And finally another slick animation for your site, without the overhead of Scriptaculous, create “Digg-style sliding comment boxes” for popup information.

Well that’s it from me. I hope you enjoy putting some of these into practise, and enjoy the look on your CEO/client/marketing guy’s face when it goes live.

Writing a Digg-Style Popularity Algorithm

admin — Mon, 26 Mar 2007 11:06:36 +0000

Please Note: We have moved to our new home WebCodr.com - please update your links and bookmarks!

Not so long ago I was tasked with creating a web site similar to Digg - users voted on records in the database, and those deemed “popular” were promoted to the front page. But how exactly does such an algorithm work? Let’s take a look under the hood…

Before we begin, a quick disclaimer: These are my own thoughts on such an algorithm, from scratch. I don’t know how Digg, Reddit and other such sites rank popular items, so this may be a quite different.

Records and Votes

We have a database record, whether it be a news story, picture, video, podcast, whatever. And we have voting, a method for users to place a single vote on a particular database record. We could order the “Popular” category by number of votes and be done with it.

Popularity = Votes

However records very quickly become stale, as new submissions are entered and the voting process begins again. If records from last year have 300 votes each, but popular records this year only have 100 or so, they won’t see the front page. So we need to look at time as a factor as well.

Records and Time

Let’s introduce the age of the record as another variable. If the record is newer it should have a higher prominence on the front page, yes?

Popularity = Votes / Record Age

The older the record, the more votes it requires to achieve popularity. But that’s not really fair - if a record takes a little while to receive votes, it doesn’t get the credit it deserves. This is especially a problem if your site doesn’t yet have enough traffic.

So what’s the solution? Let’s take a look at the age of each vote for the record.

Records and Vote Time

To keep the front page fresh, we can give more weight to votes placed recently. That way if a story is hasn’t yet received the credit it deserves, it’s still in for a chance if several users notice its value and vote accordingly. So let’s iterate through votes and calculate a popularity score:

Popularity = (V1/A1) + (V2/A2) + … + (Vn/An)

Vn is a vote, and An is the age of that vote (for example, in minutes). If a vote is 60 minutes old, it is worth 1/60th of a vote placed 1 minute ago. All the values of all the votes are added to achieve a popularity score.

This seems to solve the previous problem, but introduces a new one. If a single person votes on a record a year old, his vote will be worth more than 200 votes on a different record posted yesterday. Old material comes back to haunt the front page. So we’re close, but no cigar yet.

Let’s take a look again at the age of the record …

Records and Time and Vote Time

If we put together everything we’ve discussed so far, we get something that looks like this:

Popularity = [ (V1/A1) + (V2/A2) + … + (Vn/An) ] / Record Age

It’s a bit of a mouthful, but basically it adds together the weighted votes based on age, then divides that total by the age of the record. It doesn’t impose too much of a time limit on becoming popular, it dampens votes based on age, and prevents old stories from leaping back to the front page. It solves all our problems.

Dampening Popularity

Admission: In writing this article, I’ve discovered a more advanced algorithm than used previously on my project. Guess what I’m doing this evening?

But already I can see a problem - I think a dampening effect will need to be introduced to prevent wild jumps of increased popularity and back down again. I will update this post when I’ve had a chance to implement the new algorithm in the wild.

Other Variables

What other variables could we introduce to the algorithm?

Number of page views - a form of popularity, but far less useful than voting
Page views versus people who don’t vote - If 60% of readers vote, should it be more popular than if 10% vote? Remember this isn’t the number of votes, it’s the percentage of readers who vote
Iterative algorithm of amount of time between individual votes
Voting down as well as up
Trustworthiness of user who originally submitted the record, maybe based on votes of previous submissions
If a web URL is involved, maybe use metadata such as Google PageRank, inbound links (Google/Yahoo API), Blogosphere activity, and so forth

Further Reading

Create A Web Page In 90 Seconds

admin — Fri, 23 Mar 2007 08:04:14 +0000

Create A Web Page In 90 Seconds

Top 8 Tech Companies To Work For

admin — Thu, 22 Mar 2007 09:50:34 +0000

Every year The Sunday Times publishes a list of the top companies to work for in three categories - small, medium and large. We take a look at the number of technology-related companies in those lists.

Large Companies

O2 - Communications/Telecom based in Slough
With over 12,000 members of staff, O2 was voted as the #5 company in the UK. The company has a 17% staff turnover.
The Carphone Warehouse - Retail based in London
Who thought retail could be a great place to work? Coming in at #13, the company has nearly 10,000 members of staff and a turnover of 21%.
Vodafone Ltd - Communications/Telecom based in Newbury
And the final company on the “big companies” list at #15, Vodafone with 10,000 employees and a staff turnover of 25%. Having worked in Newbury for quite some time, I can agree that most people at Vodafone are happy where they work. Except maybe the morning traffic

Medium-Sized Companies

Data Connection Ltd - Communications/Telecom based in Enfield
The only mid-sized technology company in the list, Data Connection comes in at #7. With only 270 staff members, the company boasts annual sales of £47M and a very low staff turnover of 4%.

Small Companies

Softcat Limited - IT/Internet Services based in High Wycombe
At #6 on the small companies list, Softcat Limited employ 140 staff with a turnover of 14%. Annual sales exceed £67.3M.
Red Gate Software - IT/Internet Services based in Cambridge
With only 58 employees, Red Gate Software makes it at #8 on the list with a turnover of just 1%.
Isis Telecommunications - Communications/Telecom based in London
In at #11, Isis Telecoms employs 72 staff members, with a turnover of 6%.
Armstrong Consultants Ltd - IT/Internet Services based in Harpenden
And the last tech company on the list at #17 with 64 employees and a staff turnover of 10%.

A complete list of all published companies can be found at the best companies web site. Why not nominate your business for next year’s awards?