• word-spacing

  This property is for those times when your font's default word spacing just isn't what you want it to be. Use this to add more space between words, or to move them closer together, or even have them overlapping each other! A similar property, letter-spacing is generally seen more often.

• azimuth

  I'm sure you've heard of this property before, though most people seem to have no idea what it is for. Probably because the name starts with "a", so it always shows up at the top of every IDE's autocomplete list.

  Basically the azimuth property specifies the location of the sound when the content is being read aloud. For example, you can specify an angle in degrees (deg), or you can use predefined values such as "center" or "left-side". This property is meant to be used with aural stylesheets.

• clip

  This CSS property specifies which portion of an absolutely positioned box should be visible. You can specify the value using rect, which will "clip" the box to the shape of the rectangle using the specified coordinates.

• cursor

  This one has a lot of potential for abuse. However, when used wisely, this CSS property can greatly improve various types of user interfaces. For example, if a certain box is meant to be dragged by the user, you could add this style to the handle: cursor: move

• empty-cells

  Of course, empty cells are a common occurrence when using tables. With this CSS property you can set the value to either show or hide, to specify whether you want empty table cells to be visible or not.

• direction

  This CSS property specifies the direction of the text in the content. It can be set to either ltr for the default direction for English, or to rtl to have text going from right to left.

• outline

  This one is kind of similar to border. However the difference between the two is that with outline, the outline is drawn outside of the border, and does not have any effect on the box's size or position.

• orphans

  The orphans CSS property only applies to paged media. What it does is specify the minimum number of lines inside the element that must be left at the bottom of a page. This This can be helpful to prevent extra lines from screwing up an entire layout.

What other less common CSS properties do you know of? And do you actually use any of them?

Never Trust User Input

Always assume that any input from your users could potentially bring your site down to its knees, whether through malicious intent, or even by accident.

After all, user input is where the majority of all attacks on your website will come from, so to be constantly vigilant with anything input by the user. There isn't really any specific technique to achieve this, but it is always a good thing to remember at all times when working on your website's security.

Most of the points outlined below are related to this one, explaining various techniques to implement this important idea.

Sanitize All Input

User input that has not been properly sanitized can lead to all sorts of nasty things, like SQL injection and XSS attacks.

Make sure that you always sanitize your data when it is being input, and not when it is being retrieved from the database. It is always better to only have clean data stored, and avoids any problems if you slip up while sanitizing the data on output.

Keep Logic and Data Separate

Vulnerabilities in websites can often be exploited through code injection, which can often be as a result of mixing logic with data. A common example is SQL injection, where an attacker can exploit a vulnerability in your code by modifying your SQL queries to do their bidding.

A great way to separate logic from data is to use prepared statements when working with your database. Basically it helps to separate the two by not making you insert any values directly into your SQL statements, and instead binding parameters later and then executing them.

Use Proper Directory Permissions

You may be asking "People can't access my important files, isn't that enough?" It is all too common to find that a shared web host has not been properly configured with security in mind, allowing other users on the same server to access the files of other accounts who haven't set their file permissions correctly.

In general, it is usually discouraged to always set (chmod) your file permissions to 777, because that means that just about anyone can have full access to it.

Use a Strong Password

This can't be said enough. Even with thousands of security measures protecting your site from a malicious user, a weak password can quickly end up counteracting the many security measures you have in place.

All of the general rules for passwords apply: make sure it's a decent length, mix uppercase and lowercase characters along with numbers and symbols, pick something that only you remember, and all that good stuff.

Prepare for the Worst

Unfortunately, even with some of the strongest security measures built into your site, nothing can ever stop an attacker who is determined enough to get into your site. So, it is also a good idea to prepare for that possibility.

Always keep frequent backups of both your site's files, and of your database. That way once your site is compromised, you'll at least be (hopefully) able to get back up and running as soon as possible. And once your backup is restored to your server, always make sure that you look over anything that could have potentially caused the attack, and fix the vulnerability to prevent this from ever happening again.

If you're interested in finding out about specific exploits, how they work, and how to protect against them, be sure to check out my other post on the subject, Hack Your Own Site.

b2evolution

b2evolution is an old one, but a good one. b2evolution is an open source blogging platform written in PHP, using a MySQL database. In fact, WordPress originated as a fork of b2evolution, back in 2003. And even though this blogging platform is that old, it is still being updated frequently to compete with more modern platforms.

Movable Type

Movable Type is probably one of the most popular alternatives to WordPress, and with good reason. It is a very powerful publishing platform, with all the features you would need to make a site like one running WordPress. And while some of the latest versions of Movable Type use an interface strikingly similar to that of WordPress, I would recommend it to anyone who is looking to try something different.

Habari

Habari is described on its website as "next-generation blogging". The main difference between Habari and other blogging platforms is the way it is built, designed for modern hosting environments. Their FAQ does a good job of explaining this:

Habari is being written specifically for modern web hosting environments, and uses modern object-oriented programming techniques. Using these recent but well-established additions to the PHP language allows Habari to make use of PDO, enabling prepared statements for all interactions with the database. This greatly reduces the system's vulnerability to SQL injection attacks. This is just one of many benefits of modern object-oriented techniques.

WikyBlog

Now this is an interesting one. WikyBlog is a content management system designed with the idea to combine the features of wikis and blogs into a single efficient application. It combines your standard blog styled organization that you'll find in any other blogging platform, with features found in wikis, such as collaborative editing and revision history.

Write Your Own

If you can't find a good blogging platform that suits all of your needs, and you are interested to learn, you might want to try your hand at writing your own! It's actually not very hard to create a very basic system, and it is a great learning experience. If you're new to this kind of thing, take a look at my (slightly old, but still good) PHP CMS tutorial, and work from there to make it into a full blog system.

Now don't get me wrong, I still love WordPress. But there are many alternatives out there, and some of them are actually very nice!

Would you suggest any other alternatives to WordPress? Be sure to leave a comment.

If you find yourself doing this from time to time, here is a quick tip to help you remember to find the URL you need. First, add something like this into your CSS:

a .find-url {
    color: #9e0016;
    background: #f93e58;
}

The colours in there don't really matter at all, as long as you choose something that will stand out to you when you look over your draft of the post. Once you have that in your CSS, style the links you can't remember like this:

<a class="find-url">I can't remember the URL right now.</a>

Now, when you look over your post to revise it, the links you couldn't remember while typing out your post should be highlighted like this, to remind you to go and find the URL you would like to link to.

If you are new to CSS, you might not have heard about the z-index property. This property allows you to control the position of elements on the page in terms of layers, essentially adding a third dimension to the page.

Using z-index

The z-index of an element on the page is the layer that it is on, with the default being 0. As the z-index of an element increases, so does its layer.

Let's look at a quick example:

#box1 {
    background: #1144aa;
    width: 150px; height: 200px;
 
    position: absolute;
    left: 30px; top: 50px;
 
    z-index: 1;
}
 
#box2 {
    background: #ffd100;
    width: 200px; height: 20px;
 
    position: absolute;
    left: 20px; top: 75px;
 
    z-index: 20
}
 
#box3 {
    background: #ff6f00;
 
    width: 100px; height: 125px;
 
    position: absolute;
    left: 40px; top: 60px;
 
    z-index: 30;
}

With the sizes and positions of #box1, #box2 and #box3, there will be a space on the page that is occupied by all of these elements. By applying the z-index property to these boxes, we can define which one is on the top, which is in the middle, and which one is on the bottom, giving us something like this:

Now if we can imagine looking at the image from the side, we can visually see how the different layers are positioned on top of each other.

Try changing the z-index values for each of the elements, and you should be able to see how the resulting image changes. Try adding some more elements in there, and seeing what different combinations can be made.

Across the internet, you'll find many tables offering a visual representation of selected hex codes, sometimes even with colour pickers, often with many other helpful features. However, I thought it would be interesting to learn about how these mysterious codes actually work.

How do they work?

When you first came across a hex colour code such as #0FCA3E during your adventures in learning web design, you probably thought that it would be painful to have to memorize all of these seemingly random codes. But like (almost) everything, there is some sort of order behind the perceived chaos.

When viewing an image on a computer screen, the individual pixels are displayed using the RGB colour model. This is an additive colour model, meaning that varying degrees of different colours of light (red, green, and blue in this case) are mixed together to produce a wide array of different colours.

This can be easily seen in LCD displays. If you look very closely, you'll be able to see that each pixel is divided into three subpixels, each of which display either red, green, or blue light, which go together to form a full pixel. In the image to the right, you can see three subpixels, each displaying the colour at its full intensity, which a user would see as white when sitting at a reasonable distance away from their monitor.

How do we control this?

We can control how colours are displayed by using, you guessed it, hex colour codes. These codes can look very cryptic at first, but once you understand them, it's really quite simple.

Every hex colour code is a six-digit hexadecimal number consisting of three parts. Each of these parts represents the intensity of the red, green, or blue light, respectively. This is called a hex triplet.

Each part of a hex triplet is represented using the hexadecimal number system. This system uses the digits 0-9, and it continues with A representing 10, B for 11, up to F, for 15. This is used because two hexadecimal digits can represent exactly one byte of information, which makes it easy for computers to work with.

Because one byte of information can have 256 possible values, and each hex triplet is three bytes long, the number of colours that can be represented using hex codes is 16,777,216, or 2563.

Because a picture is worth a thousand words (even if it's a picture of text), here is a quick example of a couple hex triplets, with their decimal representations.

Well now that you know how hex colour codes work, with some practice it should be easy to read and understand any hex triplets you may come across. If you're feeling confident, you can give this game a try: What the hex.

Thumbnail source

Here are some examples of excellent forum designs that look great, are usable, and help the general "feel" of a community.

Default Forum Themes

The default theme for a forum software can work well at times. For example, support forums often stick with a default theme because they don't exactly need users to stay around, because most people will register, ask a question and leave.

Many communities can also get away with using a default theme. For example, xkcd Forums uses the PHPBB default theme (Even the blog uses the WordPress default theme). You can also see the vBulletin default theme being used everywhere. I think even the DigitalPoint theme is based off of it.

Ubuntu Forums

Ubuntu Forums is a great community providing support for all things related to Ubuntu. The layout of the board index is a bit different from the standard forum layout, because of such a large number of categories. I'd say they could easily get away with being different, because even this layout is so easy to use.

TalkFreelance

The design of TalkFreelance is simply stunning. It has an excellent use of colours that aren't often seen on forums, and makes good use of a sidebar for displaying user information and forum statistics.

ExpressionEngine Forums

The ExpressionEngine Forums have a nice clean design, following a more standard forum layout.

Design Forums

Many of the elements of Design Forums are quite simple, but the way they are put together make it into an excellent forum design.

Wiimote Project

Wiimote Project has a nice, clean theme for SMF, placing more emphasis than usual on the numbers of posts and topics.

If you go to the actual home page of Wiimote Project, instead of the usual board index you will find a portal page listing the latest posts, and various forum statistics.

The Admin Zone

The Admin Zone uses a fairly standard theme, with a table used for the board index. The home page is similar to a portal, but containing various articles, interviews and more.

Boagworld

The layout of Boagworld is less standard. Instead of using a table to list the forums, each forum is displayed with a list of the latest posts.

Typophile Forums

The Typophile Forums have a clean and simple design, with only a few categories.

FreelanceSwitch Forum

The FreelanceSwitch Forum is another example of a forum with a less common layout. The board index contains a list of the latest posts, with the forums (topics) displayed in a drop-down menu.

What other forums do you think have effective designs?

Plus, it's pretty fun to see the different ways that people can get into and cause problems with your site. This post focuses on a few of the most common ways that people can do this.

Today we are going to try out some examples of common exploits, and figure out how to solve them, keeping everything safe. We will focus on SQL injection and cross-site scripting for today.

Remember to only use these on your own site, I will not be held responsible if someone gets angry at you for trying these on their site. And don't be stupid and try these on your live site, have a private server setup for this.

SQL Injection

SQL injection attacks work by adding extra malicious commands into SQL queries. For example if we have a login form, our SQL query would look something like this:

SELECT * FROM 'users'
    WHERE 'username' = 'myuser'
    AND 'password' = 'mypassword'

And here is some code that someone could inject into the SQL query through the form:

Username: ' OR 1=1 /*
Password: */;--

This would change our SQL query into the following:

SELECT * FROM 'users'
    WHERE 'username' = '' OR 1=1 /*
    AND 'password' = '*/;--'

Because PHP simply sees the MySQL query as a string, the user can play around with the quotes inside it and add stuff to it. In this example, the OR operator is used to change the SQL query to check if either the username is equal to an empty string, or if 1 is equal to 1, which will always be true. And then the rest of the query is commented out, to avoid any errors.

For a login form, this will allow anyone access to the "protected" areas. You obviously don't want just anyone to get into a members only area, so we have to fix this problem.

The easiest way to solve this vulnerability is to escape your strings before using them in your queries. A function included in PHP is mysql_real_escape_string. However, there can be some problems with this, mainly because it is a blacklist of certain "dangerous" characters.

So, we're going to use prepared statements. This method is more secure because SQL logic from the data being used. Prepared statements are included in PHP, through the MySQLi class. It's basically used like this:

< ?php
// Create the mysqli object, replace parameters with the DB information
$db = new mysqli('localhost', 'username', 'password', 'database');
 
// Create statement object
$stmt = $db->stmt_init();
 
if($stmt->prepare('SELECT * FROM users WHERE \'username\' = ? AND \'password\' = ?')) {
    // Bind your variables and replace the ?s
    $stmt->bind_param('ss', $username, $password);
 
    // Set your variables
    $username = 'aldld';
    $password = md5('password'); // Assuming that passwords aren't stored in plaintext. Right?
 
    // Execute query
    $stmt->execute();
 
    // Close statement object
    $stmt->close();
}
?>

For more on using MySQL prepared statements with PHP, check out this awesome article at UltraMegaTech.

Cross-Site Scripting

Cross-site scripting (XSS) is another type of code injection technique, similar to SQL injection. Except this time, client-side scripts such as JavaScript are inserted into pages to be targeted to users, not to the site itself. This is often why search results in Google sometimes say "This site may harm your computer."

For example, let's say we have a comments form that allows HTML. XSS can be a problem here because a bad user can input the following:

<script type="text/javascript">
doBadStuff(); // Does bad things
</script>

Of course, this is the simplest possible example that exists, but even with more complex situations, for example if BBCode is used, someone determined to harm your users can find a way around it.

A simple way to prevent common types of XSS is to use the PHP htmlspecialchars function. It converts certain characters to HTML entities, like this:

echo htmlspecialchars('test <bad code> test', ENT_QUOTES);
// Output: test &lt;bad code&gt; test
</bad>

The only problem with this is that it means that HTML cannot be used by users at all. To work around this, you could try to use a "whitelist" of HTML tags that can be used, and be sure to do it very carefully.

For more information on basic protection against XSS, check out this post at Webmaster-Talk. It has an easy to understand example, with fixes that make sense.

Conclusion

These are just a couple of examples of common attacks on websites that can be prevented with some good security practices. What other security vulnerabilities would you like to learn to fix? Do you ever hack your site, to test for vulnerabilities? I'd love to hear what you think.

The Google Font API makes it extremely simple to use external fonts on the web, with its directory of open source fonts.

The Google Font API is based on @font-face, which has already been in use for quite some time for embedding external fonts on a website. But one of the great things about the Google Font API is supported by many browsers, even our favourite browser, IE6! Unfortunately, this will not currently work on Android, iPhone, iPad, or iPod (or Opera).

Using the Google Font API

Getting started with the Google Font API is actually really simple. It basically takes only three steps to include a font in your site.

Step One

Browse the Google Font Directory, and pick one you like. For the purposes of this article, I decided to go with Yanone Kaffeesatz.

Step Two

Add the correct code into the head section of your website, to include the CSS required to import the font. When using the font directory, Google will give you all the code you need to be able to use the font you want. For Yanone Kaffeesatz, this is the code that it gave me:

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css' />

Step Three

Once you've included that line of code in between your site's head tags, you can now use the font you've selected in your CSS just like any other font. Just in case if anything goes wrong, I've also decided to include a couple of fallback fonts.

.foo {
    font-family: 'Yanone Kaffeesatz', Arial, serif;
    /* All your other CSS properties here
       or above, doesn't matter */
}

Because text using fonts included using the Google Font API are simply treated as normal text, you can also style your fonts however you like, such as with things like text shadows. Just make sure you don't go too far; I think we all know what it looks like when hundreds of styles are applied to a single block of text.

Currently the selection of fonts is rather limited, but hopefully this will improve over time, as more and more fonts are added to the directory.

So to conclude this post, here is an example of Yanone Kaffeesatz, one of the fonts included in the Google Font API.

Forums are also great for adding to an existing website, to create a community around it, and to have a quicker way to publicly interact with and answer questions of users than simply posting to a blog. If you have some spare time, you can also use that time for managing the forum, and building a community of members and readers.

Before I got interested in blogs (FWebDe is actually my first), I was first interested more in forums. While they weren't hugely successful, with only about 300 members, I've learned a few things about managing an online community.

There are many tips about getting more members and monetizing forums, but design is a topic that is often ignored, or at least given less importance than on say, a blog. Anyone should know that one of the first things that potential members see is the design, and that it has to give a good first impression, and attract their attention to read more, or to register.

Usability

Usability is extremely important for forum designs, because they are highly interactive, with many different features for doing things such as creating topics and replying to posts. You could say that they are much more interactive than blogs or static websites, where users are mainly reading posts.

The General Layout

The general layout of a forum is very important, and it should be consistent throughout. It should also keep a similar basic layout to other forums, for the sake of usability. For most forums, the most common kinds of layout will be the the best anyway.

The Single-Column Layout

One think you don't see too often on regular sites is a single-column layout. Normally, there is a sidebar or two, or sometimes even three. Forums are where you usually start to see simpler single-column layouts.

A good forum layout will put a lot of focus on the posts, because the ultimate goal is generally to have users interacting with their content, and with each other. On busy forums, hundreds of posts can be added every hour. With such fast content generation, it's a good idea to put some emphasis on it. Content is King, and forums can have a lot of it.

Sidebars

An alternative to the single-column layout that you can see sometimes is to add a sidebar next to the board index. You can see this in use at the SitePoint forums. This can be especially useful if you have many categories, and would like to list them all in a more compact way.

A sidebar can also be used for displaying a login box, user information and forum statistics, like how it is done at TalkFreelance.

Sidebars were actually introduced in IP.Board version 3.0. Some love it, some hate it, but you should try out a sidebar, and see how that works on your forum.

The Table-Based Layout

I think that forums are one place where you could get away with using tables for layout.

Before you run away, screaming, you should notice that the common forum layout basically is a table. You have separate columns with some general information about each forum.

• The name of the forum
• A short description of what it's about
• The number of topics
• The number of posts
• Information about the latest post

And then, you have a row for each forum or category. Sometimes there is even a little icon indicating if that forum has recently been posted in.

The Front Page

Most forums usually have a (relatively) simple front page, displaying the board index with a table of forums and categories, often with board information, news and statistics closer to the footer.

One thing that you'll often see on forums is a separate front page from the board index, containing the latest news, recent topics and posts, and other information for quick access. This can be very useful if you have a huge community with new posts every few minutes.

Displaying User Information

Not so much anymore, but it is sometimes debated whether the poster's information should be displayed vertically or horizontally. They are both good options, and you should try them both out and see what you, and your users like best.

The decision mainly depends on what kinds of information you want to display next to each post. A horizontal user information area can be good if you're only displaying a bit of basic information. Information commonly displayed next to each post include:

• The user's name, with a link to their profile
• Their avatar
• Their current rank
• Their post count
• The date they registered

However, if you would like to display a bit more information without looking too cluttered, vertical is generally a better idea.

User Signatures

It is also a good idea to place some restrictions on user signatures. In addition to not allowing inappropriate material, filling it with tons of links is generally not looked upon kindly.

I've even seen some forums that have disabled images in signatures, leaving only a link and a bit of text. I think that this can be a good idea, because nobody really cares about the image in a person's signature. If someone is interested in their site, they'll probably just click on a link.

Another commonly used technique for displaying signatures is to only have each poster's signature to display once per page. That way, if somebody posts many times in one topic, readers aren't bothered with seeing the exact same signature over and over again.

A Few Things To Remember

When working on the design for a forum, here are a few things to think about.

Avoid Excess Clutter

This goes for any design, and also for forums. Extra clutter, including ads, news boxes and extra widgets can seriously get in the way of the content. Because the content is the main focus of a community, if you don't put that first, potential new members won't have much of a reason to register.

A common source of clutter that I see is shoutboxes. They are boxes, usually at the top of the page, that are used for members to quickly post messages to the entire forum. I'd say if you need to send a message to tons of people, consider using Twitter instead.

Maximize Readability

Readability is an important step to put your content, and your community forward. General readability rules apply: Avoid tiny text, add good amounts of spacing, ensure good contrast, and choose a good font.

One thing to remember: Don't always use dark themes. Light text on a dark background is often difficult to read, and dark text on a dark background is even worse. This is usually seen on gaming forums, which I can understand, but there is more to games than darkness.

Place the Search Box In a Prominent Location

Newbies are often berated for not searching before they post. You should give them an easier time, and make the search box prominent and easy to use. I've seen some forums hide search boxes behind JavaScript pull-downs, and it looks like they're just trying to give new users a hard time.

But it's such a cool effect, you say? This one little bit of usability can have a huge impact on your community.

By hiding the search box, new users won't be able to find the information they need, and will instead start a new topic asking their question, and they can be openly yelled at for not searching first. Guests to the site will see that topic, and will see that forum as an angry, YouTube-like community, costing you many new members.

Conclusion

What do you think of forums? Do you frequent forums often, or do you run a forum? Do you know of any examples of great forum designs? Be sure to leave a comment.

I'll be doing a follow-up to this post, including some examples of effective forum designs. In the meantime, you can subscribe to the RSS feed, or to updates via Email, to be notified of the next posts at FWebDe.

Update: See some excellent examples of effective forum designs!