Nettuts+

10 Templates that Solve Problems for Web Developers

Jarel Remick — Fri, 27 Nov 2009 10:30:29 +0000

We live in a web centric world right now, and if you haven’t already, you’ll most likely be facing website related dilemma(s). For example, maybe you need an email template to send out your company newsletter(s) but you don’t have the first clue as to how to create one let alone create one that works with all major clients, looks outstanding and is easy to customize and reuse.

Or maybe you need a stylish but functional admin panel for a client whom you’ve just built a complex CMS for, but you aren’t a designer. There are an infinite number of possible problems you could be facing and fortunately, there are solutions.

1. Airmail! – Customizable Email Template

“Airmail is a professionally built and designed custom HTML email template! Perfect for just about anyone – usable for everything from newsletters to eFlyers to whitepapers.”

2. Simpla Admin – Flexible & User Friendly Admin skin

“Simpla Admin is a professional template with a beautiful and user friendly interface. With various smart and intuitive jQuery functions, navigating the interface is a breeze.”

3. CleanMail – Email Template Package – 5 Colors!

“CleanMail is a simple yet sexy email template package with 5 different color schemes!”

4. WordPress Wiki Theme

“If you’re looking for a Knowledge Base or Wiki for your company but don’t want or need a full blown Wiki Application. This is the theme for you. Built with a custom Frequently Asked Questions plugin to help extend the functionality of your web site. The plugin acts as a custom write panel that displays in essence short FAQs below posts in their respective categories. The FAQs are searchable and paginate and are not required.”

5. Marketplace Community WordPress Theme

“Marketplace is a both clean and stylish WordPress theme with the intent and focus on creating a community site for industry news, tutorials, etc. This theme includes many popular built in features seen in today’s industry leading community sites. This themes comes with 5 different color options to choose from.”

6. vCard Professional Portfolio

“This is a professional and clean vCard based on Tim Van Damme’s website. With this design you can use almost any background.”

7. Sleek Server Error Pages

“This is a clean, web 2.0 design for website / server error pages. It is flexible and very easy to customize. It comes with 5 of the most common error pages (404, 403, 401, 500 and 503) but it’s very easy to add more if needed. All text is real text so adding more pages is a breeze, no image editing required.”

8. NEOTERIC—The Ultimate Under Construction Page!

“NEOTERIC is a clean single page ‘Under Construction/Coming Soon’ template in 10 SKINS designed to keep your users up to date on your site’s progress.”

9. Under Construction Page with Twitter & Pie Graph!

“Make sure your visitors know whats going on with this Under construction site template that features a feed of your latest tweets (which can be easily removed if you dont use twitter) and a pie chart that is easy to change to reflect your progress!”

10. Minimo – A minimal one page portfolio theme

“Minimo is a simple and attractive one page portfolio showcase theme. This theme is built using the 960.gs grid system framework, giving it a structured and professional look and features custom designed icons. Included is a form mail script, so the entire site works out of the box, simply add your destination email address.”

Conclusion

When working on projects for your clients, what kinds of templates do you find yourself most in need of? Thanks for reading!

You Don’t Know Anything About Regular Expressions: A Complete Guide

Jeffrey Way — Thu, 26 Nov 2009 10:30:28 +0000

Regular expressions can be scary…really scary. Fortunately, once you memorize what each symbol represents, the fear quickly subsides. If you fit the title of this article, there’s much to learn! Let’s get started.

Section 1: Learning the Basics

The key to learning how to effectively use regular expressions is to just take a day and memorize all of the symbols. This is the best advice I can possibly offer. Sit down, create some flash cards, and just memorize them! Here are the most common:

. – Matches any character, except for line breaks if dotall is false.
* – Matches 0 or more of the preceding character.
+ – Matches 1 or more of the preceding character.
? – Preceding character is optional. Matches 0 or 1 occurrence.
\d – Matches any single digit
\w – Matches any word character (alphanumeric & underscore).
[XYZ] – Matches any single character from the character class.
[XYZ]+ – Matches one or more of any of the characters in the set.
$ – Matches the end of the string.
^ – Matches the beginning of a string.
[^a-z] – When inside of a character class, the ^ means NOT; in this case, match anything that is NOT a lowercase letter.

Yep – it’s not fun, but just memorize them. You’ll be thankful if you do!

Tools

You can be certain that you’ll want to rip your hair out at one point or another when an expression doesn’t work, no matter how much it should – or you think it should! Downloading the RegExr Desktop app is essential, and is really quite fun to fool around with. In addition to real-time checking, it also offers a sidebar which details the definition and usage of every symbol. Download it!.

Section 2: Regular Expressions for Dummies: Screencast Series

The next step is to learn how to actually use these symbols! If video is your preference, you’re in luck! Watch the five lesson video series, “Regular Expressions for Dummies.”

Section 3: Regular Expressions and JavaScript

In this final section, we’ll review a handful of the most important JavaScript methods for working with regular expressions.

1. Test()

This one accepts a single string parameter and returns a boolean indicating whether or not a match has been found. If you don’t necessarily need to perform an operation with the a specific matched result – for instance, when validating a username – “test” will do the job just fine.

Example

var username = 'JohnSmith';
alert(/[A-Za-z_-]+/.test(username)); // returns true

Above, we begin by declaring a regular expression which only allows upper and lower case letters, an underscore, and a dash. We wrap these accepted characters within brackets, which designates a character class. The “+” symbol, which proceeds it, signifies that we’re looking for one or more of any of the preceding characters. We then test that pattern against our variable, “JohnSmith.” Because there was a match, the browser will display an alert box with the value, “true.”

2. Split()

You’re most likely already familiar with the split method. It accepts a single regular expression which represents where the “split” should occur. Please note that we can also use a string if we’d prefer.

var str = 'this is my string';
alert(str.split(/\s/)); // alerts "this, is, my, string"

By passing “\s” – representing a single space – we’ve now split our string into an array. If you need to access one particular value, just append the desired index.

var str = 'this is my this string';
alert(str.split(/\s/)[3]); // alerts "string"

3. Replace()

As you might expect, the “replace” method allows you to replace a certain block of text, represented by a string or regular expression, with a different string.

Example

If we wanted to change the string “Hello, World” to “Hello, Universe,” we could do the following:

var someString = 'Hello, World';
someString = someString.replace(/World/, 'Universe');
alert(someString); // alerts "Hello, Universe"

It should be noted that, for this simple example, we could have simply used .replace(’World’, ‘Universe’). Also, using the replace method does not automatically overwrite the value the variable, we must reassign the returned value back to the variable, someString.

Example 2

For another example, let’s imagine that we wish to perform some elementary security precautions when a user signs up for our fictional site. Perhaps we want to take their username and remove any symbols, quotation marks, semi-colons, etc. Performing such a task is trivial with JavaScript and regular expressions.

var username = 'J;ohnSmith;@%';
username = username.replace(/[^A-Za-z\d_-]+/, '');
alert(username); // JohnSmith;@%

Given the produced alert value, one might assume that there was an error in our code (which we’ll review shortly). However, this is not the case. If you’ll notice, the semi-colon immediately after the “J” was removed as expected. To tell the engine to continue searching the string for more matches, we add a “g” directly after our closing forward-slash; this modifier, or flag, stands for “global.” Our revised code should now look like so:

var username = 'J;ohnSmith;@%';
username = username.replace(/[^A-Za-z\d_-]+/g, '');
alert(username); // alerts JohnSmith

Now, the regular expression searches the ENTIRE string and replaces all necessary characters. To review the actual expression – .replace(/[^A-Za-z\d_-]+/g, ”); – it’s important to notice the carot symbol inside of the brackets. When placed within a character class, this means “find anything that IS NOT…” Now, if we re-read, it says, find anything that is NOT a letter, number (represented by \d), an underscore, or a dash; if you find a match, replace it with nothing, or, in effect, delete the character entirely.

4. Match()

Unlike the “test” method, “match()” will return an array containing each match found.

Example

var name = 'JeffreyWay';
alert(name.match(/e/)); // alerts "e"

The code above will alert a single “e.” However, notice that there are actually two e’s in the string “JeffreyWay.” We, once again, must use the “g” modifier to declare a “global search.

var name = 'JeffreyWay';
alert(name.match(/e/g)); // alerts "e,e"

If we then want to alert one of those specific values with the array, we can reference the desired index after the parentheses.

var name = 'JeffreyWay';
alert(name.match(/e/g)[1]); // alerts "e"

Example 2

Let’s review another example to ensure that we understand it correctly.

var string = 'This is just a string with some 12345 and some !@#$ mixed in.';
alert(string.match(/[a-z]+/gi)); // alerts "This,is,just,a,string,with,some,and,some,mixed,in"

Within the regular expression, we created a pattern which matches one or more upper or lowercase letters – thanks to the “i” modifier. We also are appending the “g” to declare a global search. The code above will alert “This,is,just,a,string,with,some,and,some,mixed,in.” If we then wanted to trap one of these values within the array inside of a variable, we just reference the correct index.

var string = 'This is just a string with some 12345 and some !@#$ mixed in.';
var matches = string.match(/[a-z]+/gi);
alert(matches[2]); // alerts "just"

Splitting an Email Address

Just for practice, let’s try to split an email address – nettuts@tutsplus.com – into its respective username and domain name: “nettuts,” and “tutsplus.”

var email = 'nettuts@tutsplus.com';
alert(email.replace(/([a-z\d_-]+)@([a-z\d_-]+)\.[a-z]{2,4}/ig, '$1, $2')); // alerts "nettuts, tutsplus"

If you’re brand new to regular expressions, the code above might look a bit daunting. Don’t worry, it did for all of us when we first started. Once you break it down into subsets though, it’s really quite simple. Let’s take it piece by piece.

.replace(/([a-z\d_-]+)

Starting from the middle, we search for any letter, number, underscore, or dash, and match one ore more of them (+). We’d like to access the value of whatever is matched here, so we wrap it within parentheses. That way, we can reference this matched set later!

@([a-z\d_-]+)

Immediately following the preceding match, find the @ symbol, and then another set of one or more letters, numbers, underscore, and dashes. Once again, we wrap that set within parentheses in order to access it later.

\.[a-z]{2,4}/ig,

Continuing on, we find a single period (we must escape it with “\” due to the fact that, in regular expressions, it matches any character (sometimes excluding a line break). The last part is to find the “.com.” We know that the majority, if not all, domains will have a suffix range of two – four characters (com, edu, net, name, etc.). If we’re aware of that specific range, we can forego using a more generic symbol like * or +, and instead wrap the two numbers within curly braces, representing the minimum and maximum, respectively.

 '$1, $2')

This last part represents the second parameter of the replace method, or what we’d like to replace the matched sets with. Here, we’re using $1 and $2 to refer to what was stored within the first and second sets of parentheses, respectively. In this particular instances, $1 refers to “nettuts,” and $2 refers to “tutsplus.”

Creating our Own Location Object

For our final project, we’ll replicate the location object. For those unfamiliar, the location object provides you with information about the current page: the href, host, port, protocol, etc. Please note that this is purely for practice’s sake. In a real world site, just use the preexisting location object!

We first begin by creating our location function, which accepts a single parameter representing the url that we wish to “decode;” we’ll call it “loc.”

function loc(url) { }

Now, we can call it like so, and pass in a gibberish url :

var l = loc('http://www.somesite.com?somekey=somevalue&anotherkey=anothervalue#theHashGoesHere');

Next, we need to return an object which contains a handful of methods.

function loc(url) {
	return {

	}
}

Search

Though we won’t create all of them, we’ll mimic a handful or so. The first one will be “search.” Using regular expressions, we’ll need to search the url and return everything within the querystring.

return {
	search : function() {
		return url.match(/\?(.+)/i)[1];
               // returns "somekey=somevalue&anotherkey=anothervalue#theHashGoesHere"
	}
}

Above, we take the passed in url, and try to match our regular expressions against it. This expression searches through the string for the question mark, representing the beginning of our querystring. At this point, we need to trap the remaining characters, which is why the (.+) is wrapped within parentheses. Finally, we need to return only that block of characters, so we use [1] to target it.

Hash

Now we’ll create another method which returns the hash of the url, or anything after the pound sign.

hash : function() {
	return url.match(/#(.+)/i)[1]; // returns "theHashGoesHere"
},

This time, we search for the pound sign, and, once again, trap the following characters within parentheses so that we can refer to only that specific subset – with [1].

Protocol

The protocol method should return, as you would guess, the protocol used by the page – which is generally “http” or “https.”

protocol : function() {
	return url.match(/(ht|f)tps?:/i)[0]; // returns 'http:'
},

This one is slightly more tricky, only because there are a few choices to compensate for: http, https, and ftp. Though we could do something like – (http|https|ftp) – it would be cleaner to do: (ht|f)tps?
This designates that we should first find either an “ht” or the “f” character. Next, we match the “tp” characters. The final “s” should be optional, so we append a question mark, which signifies that there may be zero or one instance of the preceding character. Much nicer.

Href

For the sake of brevity, this will be our last one. It will simply return the url of the page.

href : function() {
	return url.match(/(.+\.[a-z]{2,4})/ig); // returns "http://www.somesite.com"
}

Here we’re matching all characters up to the point where we find a period followed by two-four characters (representing com, au, edu, name, etc.). It’s important to realize that we can make these expressions as complicated or as simple as we’d like. It all depends on how strict we must be.

Our Final Simple Function:

function loc(url) {
	return {
		search : function() {
			return url.match(/\?(.+)/i)[1];
		},

		hash : function() {
			return url.match(/#(.+)/i)[1];
		},

		protocol : function() {
			return url.match(/(ht|f)tps?:/)[0];
		},

		href : function() {
			return url.match(/(.+\.[a-z]{2,4})/ig);
		}
	}
}

With that function created, we can easily alert each subsection by doing:

var l = loc('http://www.net.tutsplus.edu?key=value#hash');

alert(l.href()); // http://www.net.tutsplus.com
alert(l.protocol()); // http:

...etc.

Conclusion

Thanks for reading! I’m Jeffrey Way…signing off.

Build an RSS Feed Reader with jQuery and jGFeed: New Plus Tutorial

Luis Montero — Wed, 25 Nov 2009 16:30:51 +0000

This PLUS tutorial and screencast will demonstrate how to use jQuery and the jGFeed plugin to fetch news feeds remotely and write the results into the existing markup. jGFeed is a jQuery plugin that allows you to retrieve ‘any’ RSS feed from ‘any’ host and return a JSON object for easy usage. Become a PLUS member.

Join Tuts Plus

For those unfamiliar, the family of TUTS sites runs a premium membership service called “TUTSPLUS”. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!

Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.

Top 20+ MySQL Best Practices

Burak Guzel — Wed, 25 Nov 2009 10:30:47 +0000

Database operations often tend to be the main bottleneck for most web applications today. It’s not only the DBA’s (database administrators) that have to worry about these performance issues. We as programmers need to do our part by structuring tables properly, writing optimized queries and better code. Here are some MySQL optimization techniques for programmers.

1. Optimize Your Queries For the Query Cache

Most MySQL servers have query caching enabled. It’s one of the most effective methods of improving performance, that is quietly handled by the database engine. When the same query is executed multiple times, the result is fetched from the cache, which is quite fast.

The main problem is, it is so easy and hidden from the programmer, most of us tend to ignore it. Some things we do can actually prevent the query cache from performing its task.

// query cache does NOT work
$r = mysql_query("SELECT username FROM user WHERE signup_date >= CURDATE()");

// query cache works!
$today = date("Y-m-d");
$r = mysql_query("SELECT username FROM user WHERE signup_date >= '$today'");

The reason query cache does not work in the first line is the usage of the CURDATE() function. This applies to all non-deterministic functions like NOW() and RAND() etc… Since the return result of the function can change, MySQL decides to disable query caching for that query. All we needed to do is to add an extra line of PHP before the query to prevent this from happening.

2. EXPLAIN Your SELECT Queries

Using the EXPLAIN keyword can give you insight on what MySQL is doing to execute your query. This can help you spot the bottlenecks and other problems with your query or table structures.

The results of an EXPLAIN query will show you which indexes are being utilized, how the table is being scanned and sorted etc…

Take a SELECT query (preferably a complex one, with joins), and add the keyword EXPLAIN in front of it. You can just use phpmyadmin for this. It will show you the results in a nice table. For example, let’s say I forgot to add an index to a column, which I perform joins on:

After adding the index to the group_id field:

Now instead of scanning 7883 rows, it will only scan 9 and 16 rows from the 2 tables. A good rule of thumb is to multiply all numbers under the “rows” column, and your query performance will be somewhat proportional to the resulting number.

3. LIMIT 1 When Getting a Unique Row

Sometimes when you are querying your tables, you already know you are looking for just one row. You might be fetching a unique record, or you might just be just checking the existence of any number of records that satisfy your WHERE clause.

In such cases, adding LIMIT 1 to your query can increase performance. This way the database engine will stop scanning for records after it finds just 1, instead of going thru the whole table or index.

// do I have any users from Alabama?

// what NOT to do:
$r = mysql_query("SELECT * FROM user WHERE state = 'Alabama'");
if (mysql_num_rows($r) > 0) {
	// ...
}

// much better:
$r = mysql_query("SELECT 1 FROM user WHERE state = 'Alabama' LIMIT 1");
if (mysql_num_rows($r) > 0) {
	// ...
}

4. Index the Search Fields

Indexes are not just for the primary keys or the unique keys. If there are any columns in your table that you will search by, you should almost always index them.

As you can see, this rule also applies on a partial string search like “last_name LIKE ‘a%’”. When searching from the beginning of the string, MySQL is able to utilize the index on that column.

You should also understand which kinds of searches can not use the regular indexes. For instance, when searching for a word (e.g. “WHERE post_content LIKE ‘%apple%’”), you will not see a benefit from a normal index. You will be better off using mysql fulltext search or building your own indexing solution.

5. Index and Use Same Column Types for Joins

If your application contains many JOIN queries, you need to make sure that the columns you join by are indexed on both tables. This affects how MySQL internally optimizes the join operation.

Also, the columns that are joined, need to be the same type. For instance, if you join a DECIMAL column, to an INT column from another table, MySQL will be unable to use at least one of the indexes. Even the character encodings need to be the same type for string type columns.

// looking for companies in my state
$r = mysql_query("SELECT company_name FROM users
	LEFT JOIN companies ON (users.state = companies.state)
	WHERE users.id = $user_id");

// both state columns should be indexed
// and they both should be the same type and character encoding
// or MySQL might do full table scans

6. Do Not ORDER BY RAND()

This is one of those tricks that sound cool at first, and many rookie programmers fall for this trap. You may not realize what kind of terrible bottleneck you can create once you start using this in your queries.

If you really need random rows out of your results, there are much better ways of doing it. Granted it takes additional code, but you will prevent a bottleneck that gets exponentially worse as your data grows. The problem is, MySQL will have to perform RAND() operation (which takes processing power) for every single row in the table before sorting it and giving you just 1 row.

// what NOT to do:
$r = mysql_query("SELECT username FROM user ORDER BY RAND() LIMIT 1");

// much better:

$r = mysql_query("SELECT count(*) FROM user");
$d = mysql_fetch_row($r);
$rand = mt_rand(0,$d[0] - 1);

$r = mysql_query("SELECT username FROM user LIMIT $rand, 1");

So you pick a random number less than the number of results and use that as the offset in your LIMIT clause.

7. Avoid SELECT *

The more data is read from the tables, the slower the query will become. It increases the time it takes for the disk operations. Also when the database server is separate from the web server, you will have longer network delays due to the data having to be transferred between the servers.

It is a good habit to always specify which columns you need when you are doing your SELECT’s.

// not preferred
$r = mysql_query("SELECT * FROM user WHERE user_id = 1");
$d = mysql_fetch_assoc($r);
echo "Welcome {$d['username']}";

// better:
$r = mysql_query("SELECT username FROM user WHERE user_id = 1");
$d = mysql_fetch_assoc($r);
echo "Welcome {$d['username']}";

// the differences are more significant with bigger result sets

8. Almost Always Have an id Field

In every table have an id column that is the PRIMARY KEY, AUTO_INCREMENT and one of the flavors of INT. Also preferably UNSIGNED, since the value can not be negative.

Even if you have a users table that has a unique username field, do not make that your primary key. VARCHAR fields as primary keys are slower. And you will have a better structure in your code by referring to all users with their id’s internally.

There are also behind the scenes operations done by the MySQL engine itself, that uses the primary key field internally. Which become even more important, the more complicated the database setup is. (clusters, partitioning etc…).

One possible exception to the rule are the “association tables”, used for the many-to-many type of associations between 2 tables. For example a “posts_tags” table that contains 2 columns: post_id, tag_id, that is used for the relations between two tables named “post” and “tags”. These tables can have a PRIMARY key that contains both id fields.

9. Use ENUM over VARCHAR

ENUM type columns are very fast and compact. Internally they are stored like TINYINT, yet they can contain and display string values. This makes them a perfect candidate for certain fields.

If you have a field, which will contain only a few different kinds of values, use ENUM instead of VARCHAR. For example, it could be a column named “status”, and only contain values such as “active”, “inactive”, “pending”, “expired” etc…

There is even a way to get a “suggestion” from MySQL itself on how to restructure your table. When you do have a VARCHAR field, it can actually suggest you to change that column type to ENUM instead. This done using the PROCEDURE ANALYSE() call. Which brings us to:

10. Get Suggestions with PROCEDURE ANALYSE()

PROCEDURE ANALYSE() will let MySQL analyze the columns structures and the actual data in your table to come up with certain suggestions for you. It is only useful if there is actual data in your tables because that plays a big role in the decision making.

For example, if you created an INT field for your primary key, however do not have too many rows, it might suggest you to use a MEDIUMINT instead. Or if you are using a VARCHAR field, you might get a suggestion to convert it to ENUM, if there are only few unique values.

You can also run this by clicking the “Propose table structure” link in phpmyadmin, in one of your table views.

Keep in mind these are only suggestions. And if your table is going to grow bigger, they may not even be the right suggestions to follow. The decision is ultimately yours.

11. Use NOT NULL If You Can

Unless you have a very specific reason to use a NULL value, you should always set your columns as NOT NULL.

First of all, ask yourself if there is any difference between having an empty string value vs. a NULL value (for INT fields: 0 vs. NULL). If there is no reason to have both, you do not need a NULL field. (Did you know that Oracle considers NULL and empty string as being the same?)

NULL columns require additional space and they can add complexity to your comparison statements. Just avoid them when you can. However, I understand some people might have very specific reasons to have NULL values, which is not always a bad thing.

From MySQL docs:

“NULL columns require additional space in the row to record whether their values are NULL. For MyISAM tables, each NULL column takes one bit extra, rounded up to the nearest byte.”

12. Prepared Statements

There are multiple benefits to using prepared statements, both for performance and security reasons.

Prepared Statements will filter the variables you bind to them by default, which is great for protecting your application against SQL injection attacks. You can of course filter your variables manually too, but those methods are more prone to human error and forgetfulness by the programmer. This is less of an issue when using some kind of framework or ORM.

Since our focus is on performance, I should also mention the benefits in that area. These benefits are more significant when the same query is being used multiple times in your application. You can assign different values to the same prepared statement, yet MySQL will only have to parse it once.

Also latest versions of MySQL transmits prepared statements in a native binary form, which are more efficient and can also help reduce network delays.

There was a time when many programmers used to avoid prepared statements on purpose, for a single important reason. They were not being cached by the MySQL query cache. But since sometime around version 5.1, query caching is supported too.

To use prepared statements in PHP you check out the mysqli extension or use a database abstraction layer like PDO.

// create a prepared statement
if ($stmt = $mysqli->prepare("SELECT username FROM user WHERE state=?")) {

	// bind parameters
    $stmt->bind_param("s", $state);

	// execute
    $stmt->execute();

	// bind result variables
    $stmt->bind_result($username);

	// fetch value
    $stmt->fetch();

    printf("%s is from %s\n", $username, $state);

    $stmt->close();
}

13. Unbuffered Queries

Normally when you perform a query from a script, it will wait for the execution of that query to finish before it can continue. You can change that by using unbuffered queries.

There is a great explanation in the PHP docs for the mysql_unbuffered_query() function:

“mysql_unbuffered_query() sends the SQL query query to MySQL without automatically fetching and buffering the result rows as mysql_query() does. This saves a considerable amount of memory with SQL queries that produce large result sets, and you can start working on the result set immediately after the first row has been retrieved as you don’t have to wait until the complete SQL query has been performed.”

However, it comes with certain limitations. You have to either read all the rows or call mysql_free_result() before you can perform another query. Also you are not allowed to use mysql_num_rows() or mysql_data_seek() on the result set.

14. Store IP Addresses as UNSIGNED INT

Many programmers will create a VARCHAR(15) field without realizing they can actually store IP addresses as integer values. With an INT you go down to only 4 bytes of space, and have a fixed size field instead.

You have to make sure your column is an UNSIGNED INT, because IP Addresses use the whole range of a 32 bit unsigned integer.

In your queries you can use the INET_ATON() to convert and IP to an integer, and INET_NTOA() for vice versa. There are also similar functions in PHP called ip2long() and long2ip().

$r = "UPDATE users SET ip = INET_ATON('{$_SERVER['REMOTE_ADDR']}') WHERE user_id = $user_id";

15. Fixed-length (Static) Tables are Faster

When every single column in a table is “fixed-length”, the table is also considered “static” or “fixed-length”. Examples of column types that are NOT fixed-length are: VARCHAR, TEXT, BLOB. If you include even just 1 of these types of columns, the table ceases to be fixed-length and has to be handled differently by the MySQL engine.

Fixed-length tables can improve performance because it is faster for MySQL engine to seek through the records. When it wants to read a specific row in a table, it can quickly calculate the position of it. If the row size is not fixed, every time it needs to do a seek, it has to consult the primary key index.

They are also easier to cache and easier to reconstruct after a crash. But they also can take more space. For instance, if you convert a VARCHAR(20) field to a CHAR(20) field, it will always take 20 bytes of space regardless of what is it in.

By using “Vertical Partitioning” techniques, you can separate the variable-length columns to a separate table. Which brings us to:

16. Vertical Partitioning

Vertical Partitioning is the act of splitting your table structure in a vertical manner for optimization reasons.

Example 1: You might have a users table that contains home addresses, that do not get read often. You can choose to split your table and store the address info on a separate table. This way your main users table will shrink in size. As you know, smaller tables perform faster.

Example 2: You have a “last_login” field in your table. It updates every time a user logs in to the website. But every update on a table causes the query cache for that table to be flushed. You can put that field into another table to keep updates to your users table to a minimum.

But you also need to make sure you don’t constantly need to join these 2 tables after the partitioning or you might actually suffer performance decline.

17. Split the Big DELETE or INSERT Queries

If you need to perform a big DELETE or INSERT query on a live website, you need to be careful not to disturb the web traffic. When a big query like that is performed, it can lock your tables and bring your web application to a halt.

Apache runs many parallel processes/threads. Therefore it works most efficiently when scripts finish executing as soon as possible, so the servers do not experience too many open connections and processes at once that consume resources, especially the memory.

If you end up locking your tables for any extended period of time (like 30 seconds or more), on a high traffic web site, you will cause a process and query pileup, which might take a long time to clear or even crash your web server.

If you have some kind of maintenance script that needs to delete large numbers of rows, just use the LIMIT clause to do it in smaller batches to avoid this congestion.

while (1) {
	mysql_query("DELETE FROM logs WHERE log_date <= '2009-10-01' LIMIT 10000");
	if (mysql_affected_rows() == 0) {
		// done deleting
		break;
	}
	// you can even pause a bit
	usleep(50000);
}

18. Smaller Columns Are Faster

With database engines, disk is perhaps the most significant bottleneck. Keeping things smaller and more compact is usually helpful in terms of performance, to reduce the amount of disk transfer.

MySQL docs have a list of Storage Requirements for all data types.

If a table is expected to have very few rows, there is no reason to make the primary key an INT, instead of MEDIUMINT, SMALLINT or even in some cases TINYINT. If you do not need the time component, use DATE instead of DATETIME.

Just make sure you leave reasonable room to grow or you might end up like Slashdot.

19. Choose the Right Storage Engine

The two main storage engines in MySQL are MyISAM and InnoDB. Each have their own pros and cons.

MyISAM is good for read-heavy applications, but it doesn't scale very well when there are a lot of writes. Even if you are updating one field of one row, the whole table gets locked, and no other process can even read from it until that query is finished. MyISAM is very fast at calculating SELECT COUNT(*) types of queries.

InnoDB tends to be a more complicated storage engine and can be slower than MyISAM for most small applications. But it supports row-based locking, which scales better. It also supports some more advanced features such as transactions.

20. Use an Object Relational Mapper

By using an ORM (Object Relational Mapper), you can gain certain performance benefits. Everything an ORM can do, can be coded manually too. But this can mean too much extra work and require a high level of expertise.

ORM's are great for "Lazy Loading". It means that they can fetch values only as they are needed. But you need to be careful with them or you can end up creating to many mini-queries that can reduce performance.

ORM's can also batch your queries into transactions, which operate much faster than sending individual queries to the database.

Currently my favorite ORM for PHP is Doctrine. I wrote an article on how to install Doctrine with CodeIgniter.

21. Be Careful with Persistent Connections

Persistent Connections are meant to reduce the overhead of recreating connections to MySQL. When a persistent connection is created, it will stay open even after the script finishes running. Since Apache reuses it's child processes, next time the process runs for a new script, it will reuse the same MySQL connection.

mysql_pconnect() in PHP

It sounds great in theory. But from my personal experience (and many others), this features turns out to be not worth the trouble. You can have serious problems with connection limits, memory issues and so on.

Apache runs extremely parallel, and creates many child processes. This is the main reason that persistent connections do not work very well in this environment. Before you consider using the mysql_pconnect() function, consult your system admin.

Building an Image Gallery with Progressive Enhancement

Andrew Burgess — Tue, 24 Nov 2009 10:30:18 +0000

Who doesn’t love to completely trick out their website with neat features? But what happens when your viewers aren’t using the latest browser, or they have JavaScript turned off? In today’s tutorial, you’ll learn how to create a image gallery that will work in almost all environments, using progressive enhancement techniques.

Introduction

So what exactly is progressive enhancement? Formally, it is this:

Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page. (Wikipedia).

Progressive enhancement is the opposite of graceful degradation, where you build your site/app with all the features, and then make sure it looks good and functions decently in older browsers. With progressive enhancement, we’ll lay a solid foundation for our image gallery that will work no matter where you view it. Then, we’ll layer on eye-candy and functionality until we’ve got a good-looking, well-functioning image gallery. Let’s begin!

What we’re After

Here’s what we want to end up with: if all the bells and whistles are turned on, we’ll be able to drag our images around to view them; it will be a very basic simulation of a stack of photos on your coffee table. When you click on one, it will slide open to reveal some details about the image. If JavaScript is turned off, we’ll have a nice grid of image to choose from; clicking them will take us to a page with a larger version of the image and the details. If there’s no CSS support, we’ll get an ugly (but working) list of the images.

Here’s a screen-shot of our final product:

Laying the Foundation: POSH

We start with some plain old semantic HTML. This is our foundation, since every browser out there is good at parsing HTML.

index.htm




	
	Progressively Enhanced Image Gallery


	
			Click on an image below to view it!

That’s it; pretty basic stuff, eh? No browser worth that title should have a problem with it. And this is our finished first layer. No, it’s not pretty, but that wasn’t our goal: we wanted something that will work everywhere, no matter what. A few things to notice about this code: firstly, it’s semantic, as we said it should be. You might wonder about the divs inside the list items. What’s up with them? Even though we’re starting with the bare bones, we are anticipating that most of our viewers will have JavaScript enabled, in which case we’ll need those divs. We could insert them with jQuery, but since we do expect them to be used most of the time, it’s easier to hard-code it in. The other thing to notice is that it’s usable. Try viewing it in Lynx, or another text-only browser:

By the way, the pages linked to in the HTML above will be available in the downloadable source; they’re all similar to this:

Themeforest MarketPlace by Envato

ThemeForest

Themeforest offers: HTML Templates, WordPress, Joomla, Flash Sites, PSD Templates, Javascript, PHP Scripts

On a real site, you’d surround this with your site template, but it’s just fine for our purposes.

Dressing the Structure: CSS

Although semantic HTML is nice, it looks a bit bare. Let’s dress it up with some CSS. Of course, we first have to reference the stylesheet:

We’ll level the playing field first with a stripped-down Meyer reset:

/* Meyer's Reset */
html, body, div, h1, h2, h4, p, a, img, ul, li
{ margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
/* remember to define focus styles! */
:focus { outline: 0; }
body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
/* END Meyer's Reset */

Now we have to style our gallery for use without JavaScript. We’ll start with some general elements and background styling:

body{
	font:13px/1.5 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif; /* <-- from 960.gs text.css */
	background: #36b4dd;
}
h1 { font-size: 30px; }
#container > h1 { padding: 10px;}
h4 { font-size: 20px; padding-bottom:10px;}

Now we’ll take care of our heading and list items.

#container h1 {
	padding: 10px;
}
#images li {
	float:left;
	background:#ececec;
	border:1px solid #ccc;
	margin:10px;
	width: 256px;
	padding: 10px;
	overflow: hidden;
}
#images li div {
	width: 512px;
	overflow:hidden;
}
#images li a {
	float:left;
}
#images li div.info {
	width: 246px;
	padding:0 0 0 10px;
	float:left;
}

You’ll notice that we’ve set a width on our list elements. We need to do that for our JavaScript functionality; that’s also why overflow:hidden is set. This is easy in our case, because I’ve made all the images the same width. If yours are different widths, you’ll probably have to set the width for each list item with JavaScript. That will work because the CSS only version doesn’t require the width. The div directly inside our list item (that wraps all the content) is 512px wide, with overflow hidden. We’ve floated our anchor to the left so we can float the div.info to the left beside it, as you see further on.

So, here are the fruits of our labours so far:

We’ll come back to CSS in a bit; but now, let’s turn to the JavaScript!

Adding the Functionality: JavaScript

We’ll be using jQuery here; so start by importing that from Google’s CDN. We’ll also need the jQueryUI library. We could get that from Google as well, but we don’t need the whole library. I’ve downloaded a copy from the jQueryUI site, with just the core and the draggable components, which is all we’ll need. You can do whichever you prefer.

Before we start coding, let’s determine what we need to do.

The h1 we’ve hard-coded provides instruction for the non-JavaScript version. We’ll remove this and add different instructions.
We need to configure the dragging on the list elements; we’ll add a splash of fun: when the user releases the list item, it will slide a bit further and slow down (sounds like an iEffect). Like we said earlier, it’s supposed to be somewhat like a stack of photos on a table.
When a list item is clicked, it should ‘slide open,’ doubling in width. Before it does, however, we’ll send an Ajax call to get the page that the user would go to if JavaScript wasn’t enabled. Then, we’ll get the values we want from that page and plug them into our list item in a div. We’ll check for this div before making the call, though, so if the user has already clicked on it, we won’t send another request.

Alright, open up a script tag and let’s code!

var imgs;

$(document).ready(function () {

});

$(window).load(function () {

});

We’ll start by creating a global variable: an array of the list items (well, it will be an array soon). Then, we set up event handlers for a) when the DOM is ready, and b) when the window is finished loading. The effect we’ll do when the window loads (which I haven’t told you about yet) doesn’t require that we wait until then, but I think it will be nicer when the images have been loaded.

Now, this code goes in our document.ready function:

var  drag = {};
$('h1').remove();
$('#images').append('Toss the images around; if you see one you like, click on it!');

imgs = $('#images li');

Should be straightforward: we create an object that will hold some details about out dragging; then we remove the h1, append a list item with new instructions to our list, and put all the list items in our imgs variable.

Now we’ll build our dragging functionality. Really it’s as simple as this:

imgs.draggable();

But we’re going to add a few options. Here’s the code; persue it yourself and then we’ll stroll through it.

imgs.draggable({
			stack : { group : '#images li', min : 1},
			start : function () {
				$this = $(this);
				if($this.attr("id") === 'instructions') { $this.fadeOut().remove(); }

				imgs.each(function () {
				var $this = $(this);
				if($this.width() !== 256) {
					$this.stop().animate({width : 256 }).removeClass('top');
				}
			});

			drag.startTime = new Date();
			drag.startPos = $this.position();
		},
		stop : function () {
			var $this = $(this), top, left, time;
			drag.endTime = new Date();
			drag.endPos = $this.position();
			drag.leftOffset = drag.endPos.left - drag.startPos.left;
			drag.topOffset  = drag.endPos.top  - drag.startPos.top;

			time = (drag.endTime.getTime() - drag.startTime.getTime()) /60;

			top  = (drag.topOffset / time).toString();
			left = (drag.leftOffset / time).toString();

			$this.animate({
				top : '+=' + top,
				left: '+=' + left
			});
		}

});

We’ve added three properties to our draggable options object: stack, start, and stop. Stack controls the z-index of a group of objects, and takes an object with two properties of its own: group and min. Group is a jQuery selector; in our case, it’s the list items. Min is the minimum z-index any items in the group can take. So now, when you drag an item, it comes to the top of the pile.

The start function is run when you begin to drag an item. We start by caching $(this). Then, we check to see if the list item we grabbed has an id of ‘instructions.’ If it does, we fade it out and remove it. Then, we loop over each list item and if we find any that aren’t 256px wide, we animate the width to 256px and remove the class of ‘top.’ What’s ‘top’ do? We’ll style it in a few minutes, but it just gives the user some visual feedback when they click an item. After that, we do something very important: we set two properties on our drag object. One (startTime) is the time the dragging started, and the other (startPos) is the position the item started at. We’ll use this information to create our effect when the dragging stops.

Lastly, we have the stop function, which predicably runs when user stops dragging. Again, we start by caching $(this), as well as creating a few other variables we’ll give values to in a moment. Next, we put our end time and position into drag.endTime and drag.endPosition. Then we calculate our left and top offset by subtracting where we were from where we are; we can do this with the top and left properties that the position object has. Now for the slowing down animate logic: you could get very complicated with this algorithm, but we’re just going to keep it simple. We’ll find the time the drag took by subtracting our startTime from our endTime; the getTime method returns the number of milleseconds since 1970/01/01, so the difference is in milleseconds Then, we divide that value by 60, which I came up with through trial and error. On an average drag, this sets our time variable somewhere between 2 and 3. Then we divide our top and left offset by time, and convert those values to string, saving them in top and left. Finally, we animate the dragged list item, incrementing (that’s what ‘+=’ does) the value by top or left. At this point, you should be able to drag the images around and get our effect.

However, clicking the images will bring you to a new page. So let’s set up our click event handler.

imgs.click(function () {
			var $this = $(this);

		if ($this.attr('id') === 'instructions') {
			$this.fadeOut().remove();
		}
		else {
			if($this.width() !== 256) {
				$this.stop().animate({width : 256 }).removeClass('top');
			}
			else {
				if (!($this.find('.info').length)) {
					$.ajax({
						url : $this.find('a').attr('href'),
						dataType : 'html',
						success : function (data) {
							var $d = $(data),
								head = $d.filter('h1'),
								para = $d.filter('p');

							$this.children('div').append('').find(".info").append(head, para);
						},
						error : function () {
							var msg = 'Oops!
It looks like there been a problem; we can\'t get this info right now.';
							$this.children('div').append('').find(".info").html(msg);
						}
					});
				}
				$this.css({'zIndex' : 8 })
					 .stop()
					 .animate({ width : 512})
					 .addClass('top')
						.siblings().removeClass('top')
								   .stop()
								   .animate({width : 256})
										.filter(function () { return $(this).css('zIndex') === '8' }).css({'zIndex' : 7});
			}
		}
		return false;
	});

Standard operating procedure today: begin by caching $(this). Once again, we check for the id of instructions; if it’s there, we fadeOut and remove the item. If its not there, we check the width of the element: if it isn’t 256px, that means this item has already been clicked, so we animate the width down to 256 and remove our top class (yes, we’ll get there). If the element is 256px wide, we check for a child element with the class of info. We can do this my calling the find method on the element, pass in the selector we’re looking for, and get the length property. If this element doesn’t exist, the result will be 0, which is a false value, so we wrap that in parentheses and use a ! to switch the boolean. Now, if there aren’t any child elements with a class of info, we’ll step into this block, which is our ajax call.

$.ajax() takes an object parameter, and we’ll use four properties: url, datatype, success, and error. Url and datatype are obvious: we simply find the anchor in our list item and set url to its href; our datatype is html. If our ajax call is successful, we’ll take the data we get, which is the entire HTML contents of the page, and turn it into a jQuery object. Then, we can filter out the heading and paragraph that we know we have there. Then we simply get the div inside our list item, append a div.info, and append the heading and paragraph to that. If our request fails, we’ll show an error message by a similar process, using the error function. After our ajax call, we want to perform some styling and animation on our list item. First, we want to set the z-index to 8, or any number higher than the number of draggable items we have. Then we want to stop all current animations on this list item and animate the width to 512px. Lastly, we’ll add that top class. Next, we get all the siblings, which are the other list items. We’ll stop any animation on them and then animate them to 256px wide. Finally, we’ll filter out only the elements with a z-index of 8 and change their z-index to 7. This allows the currently cliked list item to come ot the top. Right at the end, we return false, so we stay on our current page (because even though this is a click function on a list item, the users will most likely click our anchor-wrapped image inside the list item).

So that’s our click handler; only one piece of JavaScript left. If you give our example a try now, you’ll see it works … kind of. Whenever you click a list item to open it, it opens, but you’ll notice a rather shifty problem. It’s because the list items are floated to the left; let’s take care of that in our window ready handler.

$(window).load(function () {
	var $w = $(window);
	imgs.css({	position : 'absolute',
			left : $w.width() / 2 - imgs.width(),
			top  : $w.height() / 2- imgs.height() });
	for(var i = 0; imgs[i]; i++ ) {
		$(imgs[i]).animate({	left : '+=' + Math.random()*150,
						top  : '+=' + Math.random()*150 });
	}
});

If you’ve followed pretty well so far, you won’t flinch here: we simply use the jQuery’s css method to set the positioning to absolute and stack all the images so their right edges are aligned to the middle of the viewport, and their bottom edges are aligned to the vertical middle. Then we use a for loop to recurse over each list item and randomly animate it right and down. This creates the effect of a stack of images being scattered.

So that’s it for the JavaScript! Now, when a user loads the page, they should see something like this (after animation) :

Final Touches: CSS3

We could end there, but we want to reward those who use forward-thinking browsers, so it’s back to the CSS for a few minutes. And, yes, we’ll look at the top class.

The first thing we’ll do is add rounded corners to the selector #images li.

border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;

Then the top class, which list items only have when they are ‘open,’ looks like this:

.top {
	box-shadow:0 0 10px #000;
	-moz-box-shadow:0 0 10px #000;
	-webkit-box-shadow:0 0 30px #000;
}

Nothing incredibly fancy, but a few nice refinements nonetheless.

Closing Comments

Well, that’s it. We should now have an image gallery that works decently without CSS or JavaScript, but takes full advantage of them where those technologies are available. So, how would you improve our gallery? Let’s hear it in the comments!

20+ Brand New and Incredibly Useful WordPress Plugins

Ivor Padilla — Mon, 23 Nov 2009 19:41:14 +0000

With more than 7000+ plugins, WordPress is the most extendable Content Management System available; in fact, “WordPress is infinitely extensible” as Matt Mullenweg says. In this post, we’ll examine twenty-one really useful plugins to take your blog to the next level.

1. Drag To Share

“Drag to share is the newest trend in social sharing. Just drag an image and drop it into any social website to share the whole page in real time. Most notably, this effect is being used by Mashable. The plugin was developed with the source files created by Dan Wellman. Read more here ”

First Name	Last Name
Jeffrey	Way
Sean	Hodge
Adam	Miller
Ian	Yates
Adrian	Try
Caleb	Aylsworth

Nettuts+

10 Templates that Solve Problems for Web Developers

1. Airmail! – Customizable Email Template

2. Simpla Admin – Flexible & User Friendly Admin skin

3. CleanMail – Email Template Package – 5 Colors!

4. WordPress Wiki Theme

5. Marketplace Community WordPress Theme

6. vCard Professional Portfolio

7. Sleek Server Error Pages

8. NEOTERIC—The Ultimate Under Construction Page!

9. Under Construction Page with Twitter & Pie Graph!

10. Minimo – A minimal one page portfolio theme

Conclusion

You Don’t Know Anything About Regular Expressions: A Complete Guide

Section 1: Learning the Basics

Tools

Section 2: Regular Expressions for Dummies: Screencast Series

Section 3: Regular Expressions and JavaScript

1. Test()

Example

2. Split()

3. Replace()

Example

Example 2

4. Match()

Example

Example 2

Splitting an Email Address

Creating our Own Location Object

Search

Hash

Protocol

Href

Our Final Simple Function:

Conclusion

Build an RSS Feed Reader with jQuery and jGFeed: New Plus Tutorial

Join Tuts Plus

Top 20+ MySQL Best Practices

1. Optimize Your Queries For the Query Cache

2. EXPLAIN Your SELECT Queries

3. LIMIT 1 When Getting a Unique Row

4. Index the Search Fields

5. Index and Use Same Column Types for Joins

6. Do Not ORDER BY RAND()

7. Avoid SELECT *

8. Almost Always Have an id Field

9. Use ENUM over VARCHAR

10. Get Suggestions with PROCEDURE ANALYSE()

11. Use NOT NULL If You Can

12. Prepared Statements

13. Unbuffered Queries

14. Store IP Addresses as UNSIGNED INT

15. Fixed-length (Static) Tables are Faster

16. Vertical Partitioning

17. Split the Big DELETE or INSERT Queries

18. Smaller Columns Are Faster

19. Choose the Right Storage Engine

20. Use an Object Relational Mapper

21. Be Careful with Persistent Connections

Building an Image Gallery with Progressive Enhancement

Introduction

What we’re After

Laying the Foundation: POSH

index.htm

Click on an image below to view it!

ThemeForest

Dressing the Structure: CSS

Adding the Functionality: JavaScript

Toss the images around; if you see one you like, click on it!

Oops!

Final Touches: CSS3

Closing Comments

20+ Brand New and Incredibly Useful WordPress Plugins

1. Drag To Share

2. Paginator

3. TypeKit Plugin for WordPress

4. Custom Coming Soon Page

5. Custom Class Selector

6. PHP-Widgetify

7. Pretty Comments