Syntax

for (counter; condition; counter modifier)
{
	// Looping code goes here.
}

The counter is just a variable. The condition sets how many times the code should execute. The counter modifier determines how the counter is modified each loop.

For example, if we wanted to output the numbers 1-10 with a linebreak in between each of them we’d do this:

for ($i = 1; $i < 11; $i++)
{
	echo $i . "\n";
}

As you can see $i increments AFTER the code is executed. If it executed before the result would be 0-9.

Further Examples

Say we had an array, and we wanted to list off the values, separated by a new line. We would do the following:

$array = array("foo", "baz", "foobar", "foobaz");
$count = count($array);
for ($i = 0; $i < $count; $i++)
{
	echo $array[$i], "\n";
}

That would output:

foo
baz
foobar
foobaz

However, you might think you’re clever and try doing this:

$array = array("foo", "baz", "foobar", "foobaz");
for ($i = 0; $i < count($array); $i++)
{
	echo $array[$i], "\n";
}

Though you save a line by doing this and it has the same output, you’re also counting the number of entries in $array each time it loops, which is bad for performance. Though you most likely wouldn’t notice it in such a small array, you definitely would if it has 100+ entrie; this is why you should count an array before hand when using the PHP for loop.

You’re also not limited to just incrementing the variable either, for example you could do this:

for ($i = 0; $i < 51; $i = $i + 10)
{
	echo $i . "\n";
}

Which would output:

0
10
20
30
40
50

The for loop can be very useful, but make sure you use it correctly. If you’re unsure of the efficiency of your code you can always try the while loop.

foreach Loop

The foreach loop is very similar to the for loop but it’s meant specifically for arrays. We don’t recommend using it for large amounts of data since it tends to be slow.

Here’s the syntax:

foreach ($array as $value)
{
	// Execute code here
}

So if we wanted to down our above array example with foreach we’d just do this:

$array = array("foo", "baz", "foobar", "foobaz");
foreach ($array as $value)
{
	echo $value, "\n";
}

Again, we strongly recommend you do not use this where performance counts as it’s slower than the regular for loop.

We hope you beginners enjoyed this article!

Do meta keywords & description improve search engine rank?

The short answer: no they do not. Meta keywords are generally not worth your time to add. However the meta description is often used by Google to display the site page’s description instead of it automatically generating something based off the page’s content. This does not however make your web page rank any higher. In case you don’t know how to make a meta description you just do the following:

<meta name="description" content="You put your site's description here." />

Is using meta redirects a good idea?

Yes and no, depending on the circumstances. If your site has moved and you want to redirect people to your new site I would not advise you to use it unless you don’t have access to a server side language such as PHP. Google automatically ignores pages that are redirects and does not follow where the page redirects to. It’d be a much better choice to send a redirection header, which Google does follow. You can do so in PHP like this:

header('Location: http://newsite.example.com');

If you would like to know how to make meta redirects and don’t know already you can use the following HTML snippet:

<meta http-equiv="Refresh" content="10;url=http://www.example.com" />

You can replace “10″ with the number of seconds you’d like the page to wait before redirecting.
In conclusion, avoid meta redirects if possible.

Is stopping bots from indexing certain pages OK to do with meta tags?

It is OK, but you have to realize a couple things:
1) Only the ‘friendly’ bots (such as Google, Yahoo and MSN) will not index the page.
2) Using robots.txt is much easier to do than individually adding a meta tag to each page you don’t want search engines to index.

For those who don’t know how to use meta tags to stop search engines from indexing a page you add this to the section:

<meta name="robots" content="NOINDEX" />

What are some other uses of the meta tag?

The meta tag has many other uses in addition to the ones mentioned above. For example you can add copyrights like this:

<meta name="copyright" CONTENT="&copy; 2010 My Company">

You can also declare character sets which will let your site validate (assuming there are no other errors) like this:

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

If you want ONLY Google not to index your page you can do this:

<meta name="GOOGLEBOT" content="NOARCHIVE" />

We hope this article helped you out, leave a comment if you wish, telling us of any additional meta tag knowledge you’d like to add.

Resources

• Meta Tag Builder
• List of Meta Tags

wordwrap()

wordwrap() will, as the name suggests, wrap words. After a specified amount of characters you can separate words with characters you choose. Here’s the basic format:

wordwrap($string, $char, $separator);

Example:

$string = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
echo wordwrap($string, 50, "\n");
/* Outputs:
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
*/

money_format()

money_format() is a useful function which will let you format a number to be displayed like money. The PHP manual shows the available formatting options.

Example:

$amount = 9999.99;
setlocale(LC_MONETARY, 'en_US');
echo money_format("%n", $amount); // Outputs "USD 9,999.99"

similar_text()

similar_text() allows you to figure out how similar two strings are. Here’s the way you call it:

similar_text($string1, $string2, $refvar);

$refvar will be assigned to the percent similarity of the two strings. 100 being that they’re the same and 0 being that they’re nothing alike.

Example:

similar_text("html", "tricks", $ref);
echo $ref; // Outputs 20
similar_text("html", "xml", $ref);
echo $ref; // Outputs 57.142857142857
similar_text("html", "html", $ref);
echo $ref; // Outputs 100

highlight_string()

highlight_string() provides syntax highlighting for PHP code. It’s very easy to use:

highlight_string($code);

Example:

$code = '<?php
echo $x . "hello, world!";
?>';
highlight_string($code);

This example would output the following:

<?php
echo $x . "hello, world!";
?>



metaphone()

Last but not least, metaphone() takes a string and returns an approximate pronunciation of it.

Example:

echo metaphone('tricks'); // Outputs "TRKS"
echo metaphone('website'); // Outputs "WBST"

Are we missing any functions? Share any obscure but useful PHP functions that you know about in a comment below. We hope these helped you!

We’ll assume that this script is open to the public and anyone can see the algorithm we use – so how do we make it uncrackable and non-bruteforcable?

The answer is randomly generated salts. We’ll randomly generate a salt, store it in a database along with the username, hashed password and any other user associated information, and then generate their hashed password based off of the salt and password.

When we check to see if they have a valid username/password we will check the database for the username the user supplied (via cookies or when logging in), pull out the password salt, hash the password that they have given with the salt and see if it fits the hash in the database.

The Code

First we’ll need to create a database (we’ll be using MySQL) and create a table within it. We’ll call the database “app” and the table “users”. For our intents and purposes we will only have three fields: the user ID, the username, and the hashed password. The user ID field will be auto incrementing. To create the table we will execute the following SQL:

CREATE TABLE `app`.`users` (
`uid` INT NOT NULL AUTO_INCREMENT ,
`username` TEXT NOT NULL ,
`hash` TEXT NOT NULL ,
`salt` TEXT NOT NULL ,
PRIMARY KEY ( `uid` )
)

Now we’re going to create a function which will register the user, first hashing the inputted password. We’re going to use the uniqid() function to generate the salt. To create the hash based off the salt we’ll use crypt(). Here’s the code:

function register($user, $password)
{
    $salt = uniqid(mt_rand()); // Create a salt based off the time, prefixed with a random number.
    $hash = crypt($password, $salt); // Generate the hash.
}

Next in the function we insert the data into our table.

// We'll escape the input before this

$con = mysql_connect("localhost","peter","abc123"); // Fill in database server, username and password
if (!$con)
{
  die('Could not connect: ' . mysql_error());
}

mysql_select_db('app', $con);

mysql_query("INSERT INTO users (username, hash, salt)
VALUES ('$user', '$hash', '$salt')");

mysql_close($con);

All together now:

function register($user, $password)
{
    $salt = uniqid(mt_rand()); // Create a salt based off the time, prefixed with a random number.
    $hash = crypt($password, $salt); // Generate the hash.
    // Prepare the data for the database
    $salt = mysql_real_escape_string($salt);
    $hash = mysql_real_escape_string($hash);
    $user2 = mysql_real_escape_string($user);
    $con = mysql_connect("localhost","peter","abc123");
    if (!$con)
    {
       die('Could not connect: ' . mysql_error());
    }
    mysql_select_db('app', $con);
    mysql_query("INSERT INTO users (username, hash, salt)
    VALUES ('$user2', '$hash', '$salt')");
    mysql_close($con);
}

Now we need a function which checks to see if the user supplied info (which would normally be stored in cookies or used during login) is valid. We’ll need to know their inputted username and password.

First we’ll connect to the database and find the salt and password hash given the username. To do this we’ll use the following SQL:

SELECT hash, salt
FROM users
WHERE username = '$username'

function validateUser($username, $password)
{
    $user = mysql_real_escape_string($username);
    $con = mysql_connect("localhost","peter","abc123");
    if (!$con)
    {
       die('Could not connect: ' . mysql_error());
    }
    mysql_select_db('app', $con);
    $info = mysql_query("SELECT hash, salt FROM users WHERE username = '$user");
    $row = mysql_fetch_row($info);
    mysql_close($con);
}

Now that we’ve selected the proper row, the hash is stored in $row[0] and the salt is stored in $row[1]. For clarity’s sake we’ll assign them to $hash and $salt.

$hash = $row[0];
$salt = $row[1];

Next we’ll hash the password using $salt and check to see if it matches $hash.

$hashCheck = crypt($password, $salt);
if ($hashCheck == $hash)
{
    // The user provided a valid username and password.
}

And the final function:

function validateUser($username, $password)
{
    $user = mysql_real_escape_string($username);
    $con = mysql_connect("localhost","peter","abc123");
    if (!$con)
    {
       die('Could not connect: ' . mysql_error());
    }
    mysql_select_db('app', $con);
    $info = mysql_query("SELECT hash, salt FROM users WHERE username = '$user'");
    $row = mysql_fetch_row($info);
    mysql_close($con);
    $hash = $row[0];
    $salt = $row[1];
    $hashCheck = crypt($password, $salt);
    if ($hashCheck == $hash)
    {
        // The user provided a valid username and password.
    }
}

There you have it! A secure way to create and verify password hashes in PHP, perfect for any user system. I hope you enjoyed this article and feel free to leave a comment!

1. Marquees

Marquees were nice back in the 90s, but now they’re annoying and have been deprecated and removed as of HTML5. Readers don’t want to have to wait for the text to scroll so that they can read it all; they want the information now so that they can skip parts that they aren’t interested in.

2. Background Music

Background music is extremely annoying, especially if it automatically plays and/or you can’t stop it. No, we don’t all want to hear your favorite song. Trust us, your website will not gain traffic if you add background music.

3. Tons of Fonts

Having over 2-3 fonts on one page doesn’t look good. You want to focus on content and readability, not how many fonts you can stuff into one page.

4. Text Links

Text links are a very obnoxious way for you to monetize your sites. Visitors don’t want to accidentally bring up a dialog box whenever they accidentally hover over some word. Stick with traditional ads for your visitors sake.

5. Ads with Sound

Though it’s great that I just won a new iPod I don’t want to hear ads making noise. People go to your site for information, most people tolerate static ads but ads making noise is just too much, especially if your visitor is listening to music.

6. Splash Pages

Splash pages are simply irritating and they make one more step for the user to get to the content. No, they don’t make your website look professional.

7. Popups

Popups are terribly annoying, they shift the focus away from your site and if I see popups on a site it makes me want to leave.

8. Frame based Designs

Frames are terribly annoying when you’re trying to navigate through a website. Why? Because the back and forward buttons never work properly and if you try to open a link in a new tab you only open that frame, not the rest of the site.

We hope you don’t use any of these terrible elements of the web in the future. Are we missing something? Leave a comment telling us what features you think should be avoided.

When developing sites or projects, it helps to have an organized folder structure so that you can go back and find files easier, as well as have others easily understand how the website’s code works. We’ll also retain files in most of the commonly used folders so that every time you make a new site, you don’t have to rewrite practically identical code.

Folders

The first step is to figure out what folders we want to separate our code and media into. I find it best having a folder for CSS, a folder for JavaScript, and a folder for images.

Let’s start out with this:

• css
• js
• images

This isn’t bad for a folder structure, but if your site uses images for the layout and images for other things such as a gallery, it is also nice to separate content further like so:

• css
• js
• images
  • layout

If you work with PHP and like to separate your PHP code over several files, you might also want to add an includes folder..

Files

Now that you have your folder setup figured out, let’s move on to the files. We’ll go over what we should put (and not put) in each folder.

css
Two files will go in the CSS folder, but you can always adjust this to your own needs. I always use a reset CSS stylesheet such as the YUI Reset CSS or Meyer Web’s reset, as well as a style.css, where all the CSS code goes.

Additionally, you may also want to add stylesheets for other media such as a print.css file.

Now we have this:

• css
  • style.css
  • reset.css
• js
• images
  • layout

js

What you put in the JavaScript folder really depends on what you use the most. You may wish to put a JavaScript framework in it such as jQuery or YUI, or design enhancing scripts such as Cufon.js, or even something you made yourself.

images
The images folder will be left empty unless you tend to reuse certain graphics such as an AJAX spinner.

The index file

The index file (homepage) will vary based on what types of technologies you use and websites you make. For example, if you added jQuery to the JavaScript folder you’ll probably link to it in the index file.

The first thing to do is determine the ideal extension for the index file. If you work with PHP a lot make it index.php. If you just use static code you can name it index.html.

The next matter is to determine which doctype you’ll be using. You can find a list of doctypes here. We will be using XHTML 1.0 Strict.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<link href="./css/reset.css" rel="stylesheet" />
<link href="./css/style.css" rel="stylesheet" />
</head>
<body>

</body>
</html>

Of course, yours will almost certainly vary a bit.

Here is the final folder architecture:

• index.php
• css
  • style.css
  • reset.css
• js
• images
  • layout

And there you have it! A good start for your next site’s file structure. Got an even better idea? Leave a comment.

Creating websites is a complicated process and many coders can develop bad practices while creating them. Here’s 5 things not to do while web coding.

Use a transitional doctype

Using the HTML 4.01 “loose” doctype or the XHTML 1.0 Transitional doctype is a bad way to start a website. Instead, code with the strict doctype. Some validation errors are silenced with the transitional doctypes and can cause problems later on.

Write the CSS and HTML simultaneously

When making a website, you should always fully write the HTML markup before even starting on the CSS. If you write them at the same time you can often lose your train of thought and it could take longer than it should to code the website.

Use tables for the layout

Tables were never meant to be used for the layout. Not only do tables make your markup ugly but they render slowly and make your code hard to maintain. Do not use tables for your layout!

Make classes and IDs with capital letters

The CSS can become terribly hard to maintain if you have some capital letters in your classes & IDs. Just don’t do it.

Make inline JavaScript and CSS

Writing JavaScript and CSS in the HTML files is a bad idea, since every time you go to a page you have to re-download the CSS and JavaScript if they’re not external. If they are external browsers can cache them and will not have to load them again.

I hope you enjoyed these tips. Am I missing something? Leave a comment below telling me what it is.

PHP is a very complex language and unfortunately at times it can be quite slow. Here are some easy things you can do that can speed up your application.

Stop using foreach()

foreach() has been proven by several benchmarks to be extremely slow. Do not use it under any circumstances. Here’s an example of an inefficient piece of code which uses foreach():

$myArray = array(1, 2, 3, 4);
foreach ($myArray as $value) {
     echo $value;
}

Instead, just use regular for.

$myArray = array(1, 2, 3, 4);
$amount = count($myArray);
for ($i = 0; $i <= $amount; $i++) {
    echo $myArray[$i];
}

They do exactly the same thing, but the second one is much faster.

Avoid Double Quotes

Double quotes (” “) should only be used when needed, otherwise you should use single quotes. Double quotes search for variables within the string which takes up time; and if there’s no variables within the string then it’s pointless to use double quotes.

Use echo Efficiently

If you do this:

echo "Hello" . $myVar;

PHP has to concatenate “Hello” and the value of $myVar, and then output it.

However, if you use a comma like this:

echo "Hello", $myVar;

PHP does not have to concatenate the “Hello” and $myVar, instead it just outputs both of them.

Calculate the array size before hand

I often see code like this:

$myArray = array(1, 2, 3, 4);
for ($i = 0; $i <= count($myArray); $i++) {
    echo $myArray[$i];
}

The problem? Every iteration $myArray is recounted. This is a huge waste of time. Instead, use this:

$myArray = array(1, 2, 3, 4);
$amount = count($myArray);
for ($i = 0; $i <= $amount; $i++) {
    echo $myArray[$i];
}

Install APC

APC, or Alternative PHP Cache is a free addon to PHP which speeds up PHP by caching its opcodes. I highly recommend it for any site with a large audience.

So there you have it, 5 easy ways to make your application run faster, I hope these helped you and make sure to leave a comment!

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<p>Content</p>
</body>
</html>

HTML5

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<p>Content</p>
</body>
</html>

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
</head>
<body>
<p>Content</p>
</body>
</html>

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
</head>
<body>
<p>Content</p>
</body>
</html>

We hope these templates save you some time!

Rounded Corners

Everybody loves rounded corners. But Internet Explorer 8 and below does not support this at all. Luckily Curvy Corners makes cross-browser round corners easy. It uses CSS3 on browsers that have it and JavaScript on those which don’t.

Box Shadows

Due to an IE specific script, box shadows are easy to create on Internet Explorer.

.box-shadow {
	box-shadow: 10px 10px 20px #000; /* Define the regular box shadow */
	behavior: url('ie-css3.htc'); /* Include the IE script */
}

Download ie-css3.htc

Just make sure you put the ie-css3.htc in the same directory as the CSS file, and don’t forget to add the -moz- and -webkit- prefixes for other browsers!

Selectors

CSS3 introduces a lot of nice selectors, but Internet Explorer 8 and below supports none of them. Fortunately, there is a script which adds a lot of the cool CSS3 selectors to IE. Just download the script from here and link to it in your HTML code.

Gradients

Gradients in Internet Explorer are surprisingly simple using their proprietary “filter” property.

.gradient {
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FFFFFF, endColorstr=#000000);
}

You can replace #FFFFFF with the first color and #000000 with the other color.

Things made possible by CSS3 are certainly available in Internet Explorer if you take the time to support IE. So the question is, is it worth giving IE users the same eye candy as Firefox, Webkit and Opera users?