One common technique that is completely doable with CSS, but which still remains in the realm of jQuery and other Javascript techniques, is animated dropdown menus.

For an example of what we will be making, you can see the demo.

Create the HTML

We can start by creating a simple unordered list, however because of the way this menu works, the structure must be a bit different from your standard navigation hierarchy. For this to work, the parent of a sub-menu should be its first item.

<div id="nav-wrapper">
    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li>
            <ul class="subnav">
                <li><a href="#">Parent</a></li>
                <li><a href="#">Child 1</a></li>
                <li><a href="#">Child 2</a></li>
            </ul>
        </li>
        <li>
            <ul class="subnav">
                <li><a href="#">Parent 2</a></li>
                <li><a href="#">Child 3</a></li>
                <li><a href="#">Child 4</a></li>
            </ul>
        </li>
    </ul>
</div>

Style it With CSS

#nav-wrapper {
    position: relative;
 
    height: 40px;
    width: 700px;
 
    background: url('nav-bg.png') top left repeat-x;
    border: 1px solid #ccc;
 
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}
 
ul {
    height: 30px;
    margin: 0; padding: 0;
    position: absolute;
}
 
ul li {
    line-height: 30px;
    float: left;
    list-style-type: none;
    margin: 0; padding: 0;
    font-size: 18px;
}
 
ul li a {
    display: block;
    height: 30px;
    padding: 5px 10px;
}
 
#nav a, #nav a:link, #nav a:visited {
    color: #555;
    text-decoration: none;
}

Here I used a simple gradient image for the menu background. You could also take this a step further and use CSS3 gradients for the background, instead of having to use an image. But that's a subject for another tutorial.

This will style the top level of the navigation hierarchy, making it look something like this:

It still doesn't look to great yet, because we haven't applied any styles to the sub-menus yet.

.subnav {
    height: 40px;
    overflow: hidden;
 
    z-index: 9999;
    margin: 0; padding: 0;
}
 
.subnav:hover {
    height: 120px;
}
 
.subnav li {
    clear: left;
    height: 30px;
    z-index: 9999;
    background: #ddd;
    width: 100%;
    height: 25px;
    font-size: 14px;
    line-height: 20px;
}
 
.subnav li:first-child {
    clear: none;
    background: transparent;
    margin: 0 0 11px 0;
    font-size: 18px;
    line-height: 30px;
    height: 30px;
}
 
.subnav li:first-child a {
    padding: 5px 10px;
}
 
.subnav li a {
    height: 15px;
    padding: 5px;
}
 
.subnav li:last-child {
    border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    overflow: hidden;
}

I won't go into detail about what each individual property does, so I'll just cover some of the more important ones.

Basically, this CSS sets the height of each .subnav to the same height as the main menu bar, cutting off the rest below it. The first item of each sub-menu is then styled to match the top-level items, so that nobody can tell the difference.

At this point, hovering over a parent item should cause its children to display below it. This is how slightly older browsers which do not yet suport CSS3 transitions should display the navigation menu.

Apply the Transitions

Now to make this menu about a million times more awesome. To create a smooth transition between the two states, the following properties can be added to .subnav:

.subnav {
    transition: height 0.2s linear;
    -webkit-transition: height 0.2s linear;
    -moz-transition: height 0.2s linear;
    -o-transition: height 0.2s linear;
}

The first value for transition is the property to be animated, in this case it's height. Next is the duration of the animation in seconds. The third value is the timing function for the animation. linear creates a smooth, even transition between both states. ease is another good one you might want to try.

The transition property is repeated with the same values for each different browser that supports it.

Here is a demo of the final CSS3 animated dropdown navigation menu.

Well there you have it, a pure CSS animated dropdown menu. The best thing about this method is that if your users don't have a browser that supports CSS3 transitions, they can still use your navigation menu perfectly fine, as opposed to many Javascript-based techniques.

What would you add to this navigation menu? Maybe support for multiple levels, or maybe use fancier animations? Leave your answer in the comments.

Depending on your employer, you may not have the freedom to design or develop according to your thought process, and having to conform to a script and work with a team could become stressful over a period of time if you’re a free spirited bird who likes to fly solo.

However, before you jump into the freelance industry, there are a few things you need to be prepared for:

• No matter how talented you are, jobs and clients will not be queuing up at your doorstep, at least not in the beginning.
• You must be prepared to do a substantial bit of legwork before you’re able to sink your teeth into a design/development project that is worth your talent - you must be able to sell yourself before you secure a project.
• You may need to work at less than the going rate in order to establish a good portfolio.
• It’s a good thing when you’re able to set your own timings and schedules, but if you want to meet deadlines and earn the respect of your clients, you must be disciplined and dedicated to the job and be able to stick to your schedule in spite of the many distractions you’re bound to have.
• It could be stressful worrying about finding clients on a regular basis.
• You would have to haggle with clients over payment, before and after securing the project; not every designer/developer is good with finances, so negotiating payment could prove to be a trying exercise.
• All these factors could mean that you don’t have as much time or the concentration necessary to work on your design as you would like to.

It may not work for everyone, but in general, it pays to work for an agency first before branching out on your own. The experience will help you not just build your portfolio but also develop discipline towards the job – because freelancers can set their own timings, they sometimes tend to procrastinate and so fail to meet deadlines.

Besides, you also gain contacts in the industry and can work on building a network which will help you get clients on a regular basis and which will help spread your reputation as a credible and skilled designer/developer.

This guest post is contributed by Bailey Digger, she writes on the topic of web design degree. She welcomes your comments at her email id: baileydigger189(@)gmail(.)com.

SQLite has lately been a very good choice as a database to use for applications you write. If you don't plan on needing to scale up to the extremely high levels of applications that require something "heavier", you may want to give SQLite a try. And the SQLite libraries also come preinstalled with PHP, allowing you to get started using it right away.

Why Use SQLite?

SQLite is obviously best known for how lightweight it can be. Of course, they couldn't call it SQLite without it being at least lighter than most other databases.

The main difference between SQLite and other database systems, such as MySQL and PostgreSQL, is that it can be run completely without having to run the database on a separate server process. Instead, an entire SQLite database can be stored inside a single file, which can be accessed directly by an application.

SQLite can also be described as being "zero-configuration". SQLite doesn't require anything to be installed before it is used, and it does not rely on a separate server process that needs to be configured.

So, if this is enough to convince you to give SQLite a try, then let's get started, shall we?

Getting Started

The SQLite libraries included with PHP make it very easy to get started coding right away. Let's get started with some of the easier things.

Creating a Database

You can create a database and execute queries in SQLite just as you would in MySQL. The first thing to do to create your database is to open up a terminal and navigate to where you want your database to be located.

Then, start up the SQLite command-line interface with a command similar to this:

sqlite3 database.db

If everything goes fine, you should be greeted with a command prompt like this.

SQLite version 3.6.22
Enter ".help" for instructions
Enter SQL statements terminated with a ";"
sqlite>

Here you can type in your SQL statements to build your database. For now, we'll just create a couple of tables to work with in PHP later.

CREATE TABLE posts (
    id INTEGER PRIMARY_KEY AUTO_INCREMENT,
    title TEXT,
    content TEXT
);

Connecting to a Database

There are some differences that I have noticed between SQLite 2 and SQLite 3, which can cause some small problems. Because of this, I've found that using PDO is probably the easiest way to connect to an SQLite database.

try {
    $db = new PDO('sqlite:/path/to/database.db');
} catch (Exception $e) {
    die($e);
}

In the PDO object we can specify the first parameter, which is the database driver and the path to the database itself, separated by a colon. If you want to write to the database at all, you need to first make sure that the user running the server has write permissions to the database file.

The code is wrapped in a try/catch statement as a good practice, just in case if we encounter any errors.

Executing Queries

Now you can use all of the standard PDO methods with SQLite to manipulate your database. This actually works in a very similar way to what you would do with a MySQL database. For example, to get your posts from the database:

$posts = $db->prepare('SELECT * FROM posts;');
$posts->execute();

And once the content being retrieved from the database is stored in $posts, it's a simple matter of displaying the data.

echo '<ul>';
while ($post = $posts->fetchObject()) {
    echo '<li>' . $post->content . '</li>';
}
echo '</ul>';

An Example

In this example, we have a simple form to insert data in to the database we created earlier. I've added some comments to show examples of both fetching data from the database, and inserting data using prepared statements.

< ?php
// PHP SQLite3 demo
 
// Connect to the database with PDO
try {
    $db = new PDO('sqlite:/var/www/sqlite/database.db');
} catch (Exception $e) {
    die ($e);
}
 
// Insert a post into the DB
if (isset($_POST['title']) && isset($_POST['content'])) {
    try {
        // Create a prepared statement
        $stmt = $db->prepare("INSERT INTO POSTS (title, content) VALUES (:title, :content);");
        $stmt->bindParam(':title', $title);
        $stmt->bindParam(':content', $content);
 
        // Fill in the values
        $title = $_POST['title'];
        $content = $_POST['content'];
        $stmt->execute();
    } catch (Exception $e) {
        die ($e);
    }
}
 
// Get posts from database
try {
    $posts = $db->prepare('SELECT * FROM posts;');
    $posts->execute();
} catch (Exception $e) {
    die ($e);
}
 
?>
 
<h1>Posts - SQLite Example</h1>
 
< ?php while ($post = $posts->fetchObject()): ?>
 
    <h2>< ?php echo $post->title ?></h2>
    < ?php echo $post->content ?>
 
< ?php endwhile; ?>
 
<hr />
 
<h2>Add new Post</h2>
<form action="" method="post">
 
    <p>
        <label for="title">Title:</label>
        <input type="text" name="title" />
    </p>
 
    <p>
        <textarea name="content" rows="8" cols="50"></textarea>
    </p>
 
    <p>
        <input type="submit" name="submit" value="Submit" />
    </p>
 
</form>

As always, if you have any questions, be sure to let us know in the comments section of this post.

• 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?