Smashing Themes

Best practices for deployment and development of CSS and JS files

designcode — Sun, 06 Sep 2009 11:06:54 +0000

When working on a big size web based application, static files (Javascripts, Stylesheets and Images) are something you should handle with care. While you’re back-end can be a breeze for server, a front-end without best practices can cause your website to load slow thus resulting in loosing visitors/customers. There are many tips that can make your website load much faster and In this article I am going to write about how you can adopt those techniques.

Load Stylesheets JS Files in correct places

When writing markup you should make sure that you have all you stylesheets in the document HEAD, consider the following example:




 
 My site title

On some browsers, Internet explorer precisely, you must have noticed that when opening a site, you see a white page and whole content appears suddenly. This is caused by putting stylesheets outside HEAD of the document. According to Yahoo Developers Network, putting stylesheets outside HEAD prohibits progressive rendering in many browsers, including Internet Explorer.

SCRIPTS case in totally different with stylesheet’s. You should put the scripts at the end of the document, right after BODY ideally. Scripts don’t allow parallel downloads, with means if you have a 70 KB javascript file in your HEAD, rest of the stuff on page like images or stylesheets will have to wait until that javascript is downloaded on client. In most of the cases, its not easy to move SCRIPTS to bottom, but if you are working on a project from scratch you should write your code with this pratice in mind.

Write correct CSS and Javascript

Avoid writing inline CSS and Javascript, instead make those that external. Javascript and CSS files are cached by browsers resulting quick page loading. On the other hand, CSS and Javascript coded in HTML document gets downloaded every time page is loaded. And even apart from speed issues, its a bad development practice to mix up different stuff in one file. Don’t use garbage like CSS expressions or BS like DEFER (use I hate IE).

Include minimum Javascript and CSS files

Instead of including multiple CSS and JS files, you should include one master file for each, like instead of including prototype.js, effects.js, modules.js as separate file, include a single file something like common,js that contains the code all above three files.

The problem with this practice is that it increases development time if you put all code in a single file. Or if you are making separate files for development and merge those at time of deployment, that itself is a big problem. At the end of this article, I will suggest a solution for this problem, I am sure you’ll find that deadly useful.

Use compressed Javascript and CSS

Compressing the Javascript and CSS can also help in reducing load time of web pages. You can use following online tools to compress the your files.

You can imagine that a 100KB file compressed to 60KB will be faster in download.

Problems and the Solution

But the main issue with compressing the files is that it can result in increased time of deployment. You can’t write, edit or understand Javascript in a single line, so before deployment you have to compress your files before uploading. To make the development and deployment cycle a bit smooth, I have adopted a technique which I archived by extending the great article written here.

Basically, rather than using the static files after compressing and minimizing the static content into one files ourselves manually, I am using the server side to do that all stuff. A PHP script will include different files as a singe file, compress those file and will send the output to those files. Following the code of file static.php

//static.php

// Change folowing path to according to your needs
$_pathToStatic = '/home/mysite/templates/static/';

$_type = $_GET['type'];
$_load = explode(',', $_GET['load']);

if($_type == 'css')
{
	header('Content-type: text/css');
	$ext = '.css';
}
else
{
	header('Content-type: text/javascript');
	$ext = '.js';
}

ob_start("compress");

function compress($buffer)
{
	/* remove comments */
	$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
	/* remove tabs, spaces, newlines, etc. */
	$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
	return $buffer;
}

foreach($_load as $load)
{
	$_file = $_pathToStatic.trim($load).$ext;
	if(file_exists($_file))
		include($_file);
}

 ob_end_flush();

The above file basically takes the parameter of which and what type files to include. On the bases parameters, script includes those files from the directory defined in line 2, compress the content and send to browser. So this way, your web page makes only one request for both CSS and Javascript and gets the output in compressed form. You don’t have to write all CSS and JS in one file, and have to compress that when deploying.

Now to use the above file, use the following code,

In the type parameter, you have to enter either css or js, based on what files you are including. And load parameter takes the comma separated values of files to be included.

As most of the browsers don’t cache dynamic files (like .php), so there are chances that files included this way will be download on every request. To prevent this, we can use Apache’s rewrite rule.

RewriteEngine on
RewriteRule ^static.([a-z]+)$ static.php?type=$1 [QSA]

Now you’re code to include files now look like

If you find any bugs/problems/suggestions or do some improvements, please do share those with us by commenting.

Admin avatars not showing up in comments after switching the admin user?

designcode — Thu, 03 Sep 2009 07:26:50 +0000

Lets say, you posted 5 posts and 3 comments with user admin with the same user. Your email address for this user was x@yoursite.com. Now you read the WordPress admin security article here and decided that you should delete the admin user.

Create another administrator in the admin area.

Log out of the back end.

Log in as the new user.

Delete the old admin from the user list.
A second user gives greater security: that name will be displayed in all future published articles and commentaries, and the name of the actual administrator will never be displayed on blog pages and therefore never communicated to the outside world.

When you’ve done it, everything seems to be fine. Except your avatar is not showing up in the comments you made. Changing the email address of the new user won’t work. Now you have to do a bit of manual work.

In order to solve this issue, you will have to connect to your database. You can use phpMyAdmin for it. Go to phpMyAdmin, select your WordPress database and click on the SQL Tab

At this stage you should know two variables,

Your table Prefix
You can find the table prefix in wp-congfig.php, search for $table_prefix = ‘XXX_’, and copy its value (XXX_ without quotes).
User ID of your newly created admin user
If that was the second user you added, it must be a 2, but if you are not sure, enter the following query in the Text box right under SQL tab, as shown in above image.
```
select ID from XXX_users where user_login = 'YOURNEWUSERNAMEHERE'
```

Replace the XXX_ with your Table prefix and click the GO button, right under the text box. This will get you a table on next page like in the image below

Copy the number marked with red circle, and now you have your new user’s ID. Lets proceed with fixing the avater part. Go back to previous page on your browser and enter the following SQL in the text box,

update XXX_comments set user_id = Y where user_id = 1

Replace the Y with the ID you got in the last step and press the GO button. This should fix the problem you were having. Feel free to post in comments any questions you may have.

40+ killer logos based on text

designcode — Fri, 28 Aug 2009 04:54:19 +0000

Usually logos have some graphics and text together but below we are presenting a showcase of some clever and creative logo designs that are based on text only, yet they reflect the concepts fully.

These logos are made by putting some rotation, color, angel, width, height or size of simple Numbers and Characters. As a designer, we always need inspiration just like breakfast, so I hope this list will bring some inspiration to my readers.

Showcase of Logos based on Text

Last but not the least

I spent more than 3 hours in searching for such logos, browsed 100s of pages, so please help us spread the link by ReTweeting and Digging the article. If you think that I have missed a logo, that should have been in the list, post the link in comments, I’ll be more than happy to add that in the list.

Credits
Following websites were great source of help in compiling above list.

Themes downloaded 175+ times

designcode — Sun, 23 Aug 2009 05:07:27 +0000

Thank you all for liking our free wordpress themes. Just in a short time of 20 days, all of our free wordpress themes were downloaded 175+ times. Following are statistics,

We are working on two new free wordpress themes, which we are planning to release next Month. We will soon post the screenshots.

WordPress custom fields: Usage and Tips

designcode — Sat, 15 Aug 2009 18:45:51 +0000

WordPress allows the authors to attach the extra fields. These custom fields are basically the random data that you don’t to mix with the Post text. For instance you want to add a thumbnail to each post or want to display your Mood at the end of every post. In this tutorial, I am going to show you how can add Custom Fields, and then use it in your Themes. I will also add some examples to make you understand in a more better way.

How to add Custom Field?

You can add a custom field when writing a new Page/Post or editing an existing Page/Post. There is a whole section with the name Custom Fields in that Page, look at the image below.

As you can see there are two things in the section. First Name of the Custom Field and second is the Value of Custom Field. Let say you want to add a thumbnail to your post, enter “tn” in Name field and the url of the thumbnail in the Value Field. Look at the image below.

Now click the Add Custom Field button. Congratulations, you have added the custom field. It was pretty simple wasn’t it? One thing important that I’d like to tell you that you can use the same name for multiple custom fields. For instance, if you want two thumbnails to be added as custom fields, you can either use two different names (tn1 and tn2) for both images or you can us “tn” for both fields.

Once you have added the Custom Field, WordPress starts showing the most used Custom Fields Names in a drop down box in the custom field section, if you want to enter a new Name, you can click the enter new link, that will allow you to add a new Name.

How to use Custom Fields in the Themes

Now you’ve added your Custom Fields, questions is how you can use those fields inside your theme. You can use the following two functions in order to retreive key values.

get_post_meta
get_post_custom_values

I recommend using get_post_custom_values because this function is useful if you wish to access a custom field that is not unique, ie. has more than 1 value associated with it. Also use this function inside The Loop. Now lets see how we will get the thumbnail values we set when writing the post,

while (have_posts()) :
	the_post();
	$tn = get_post_custom_values("tn");
	print '';
endwhile;

Practical Uses of Custom Fields

There are literally hundreds of usage of custom fields. Guys have used it in plugins, the famous WP Post Rating also utilizes custom fields. Following are a few examples,

1- Post Thumbnails
This is the best and most common use of custom field (in my opinion). A thumbnail adds a value to your layout and post itself. Many blogs shows small images with post excerpts. A few examples are DoshDosh.com, Hongkiat.com Smashing Theme’s blog also uses the Custom Fields to display thumbnails against each post. You can see a live preview here.

In order to show a thumbnails, go to “Media Library” and upload the thumbnail you want to use. Now add a custom field with name thumbnail and in value of the field, enter the URL of image you just uploaded.

Open your theme files (index.php, archive.php, category.php or single.php) and get the value of thumbnail and print that in image’s src attribute,

while (have_posts()) :
	the_post();
	$thumbnail = get_post_custom_values("thumbnail");
	print '';
endwhile;

2- Show specific posts on Home Page
You are running your portfolio on a WordPress powered website and you want to show your featured work on the home page. You can do the trick with the help of Custom Fields. Edit the post you wants to show on home page and add a custom field, call it “featured” and set its value to “true“. Open index.php in your theme’s folder and right after the call of get_header(); function, put the following code

get_header();
query_posts('meta_key=featured&meta_value=true');

This code will only fetch the posts that has the featured custom field. You can also limit the number of posts fetched here by using showpost parameter. You code should look like

get_header();
query_posts('showposts=X&meta_key=featured&meta_value=true');

Replace the X with the number of posts you want to show on home page.

There are many other usages of custom fields which I am going to share with you soon in another post. I hope you found the above tips and tricks useful. BTW I am master in typo mistakes, if you find (I am sure you will) please let me know

How not to get more twitter followers

designcode — Thu, 06 Aug 2009 19:42:56 +0000

There are many comprehensive guides on how you can get more followers to your Twitter account. Following are a few examples.

How to Get More Twitter Followers: Some Methods That Work by Dosh Dosh
Kevin Rose: 10 Ways To Increase Your Twitter Followers by Kevin Rose of Digg

But there are still some ways that you should avoid on all cost even if those methods are getting you loads of followers. A few days ago, a friend of mine on Facebook posted a link of site tweeterfollow.com, with title get 500 followers a day. Out of curiosity, I went to the site and saw a simple login form, but before blindly signing in with my Twitter account, I thought I should look their terms and privacy policy. I found a link with title Rules located at tweeterfollow.com/rules.php. I was stunned after looking their RULES, read yourself and you’ll be stunned yourself.

You have to add all vip users and 20 regular users to join the train.
We may use your account to promote our services, with the exception of VIP account.
The fee for VIP is non-refundable.
After payment, give us up to 6 hours to update your VIP status.

Yes you read it right. They may use your account to promote their accounts. First of all why on Earth they are storing users password when they are using the APIs? Secondly they are saving your passwords un-encrypted. I run a search on Internet about this website and found some horror stories. On GetSatisfaction.com, one person is saying,

How can I unsubscribe to tweeterfollow.com? There is not option for me to opt out.

Another guys is having a much big trouble.

I’m with you…I “unsubscribed” and changed my password on Twitter, and now I’m locked out of my Twitter account because I have too many attempts…I can only assume all the attempts are tweeterfollow trying to log in under my username and password!!! Ugh!

So beware, not only for this website but any other website that is asking for your other website login credentials. BTW, tweeteradder.com is another third class hijacking service.

How to remove categories from the_category function in Wordpress

designcode — Wed, 05 Aug 2009 18:30:31 +0000

You might needed this hack if you want to use a single installation of WordPress for multiple sections. the_category() is WordPress Template Tag that displays a link to the category or categories a post belongs to. If you want to eliminate a specific category from the string returned by the_category, you can use the add_filter() to achieve that.

For Instance you don’t want to show the category Uncategorized and Private, in order to do so first put the paste code at the end of your functions.php located in your current theme folder.

function the_category_filter($thelist,$separator=' ') {
	if(!defined('WP_ADMIN')) {
		//Category Names to exclude
		$exclude = array('Uncategorized', 'Private');

		$cats = explode($separator,$thelist);
		$newlist = array();
		foreach($cats as $cat) {
			$catname = trim(strip_tags($cat));
			if(!in_array($catname,$exclude))
				$newlist[] = $cat;
		}
		return implode($separator,$newlist);
	} else {
		return $thelist;
	}
}
add_filter('the_category','the_category_filter', 10, 2);

The above code will exclude the categories you added in $exclude on line 4. Now if you want to eliminate the categories on base of Category ID instead of Category Name (which, in my opinion is a better approach), you’ll need the following code.

function the_category_filter($thelist,$separator=' ') {
	if(!defined('WP_ADMIN')) {
		//Category IDs to exclude
		$exclude = array(1,5);

		$exclude2 = array();
		foreach($exclude as $c) {
			$exclude2[] = get_cat_name($c);
		}

		$cats = explode($separator,$thelist);
		$newlist = array();
		foreach($cats as $cat) {
			$catname = trim(strip_tags($cat));
			if(!in_array($catname,$exclude2))
				$newlist[] = $cat;
		}
		return implode($separator,$newlist);
	} else {
		return $thelist;
	}
}
add_filter('the_category','the_category_filter', 10, 2);

On line 4, you can put the Category IDs you wants to eliminate.
Happy Blogging!

Points to consider before choosing web hosting

designcode — Sun, 02 Aug 2009 11:38:08 +0000

First thing you should know about this post is, THIS IS NOT A PAID REVIEW OR POST OR WHATEVER. This articles is based on my experience over the past 4 years.

Choosing the company that is going to hold and save you website data is one of the most critical part. If you really want to grow yourself online and you are serious with your online business, then web hosting is the first thing you should really worry about. You can actually get the good web hosting easily if you have big money but with limited budget, its pretty hard to find the honest hosting. I can still remember my first website, how it gain the popularity and traffic and how it went down (thanks to the cheap hosting). In the last 6 years, I tried several web hosting services, from local web hosting providers to many renowned companies. Most of those were a nightmare. I want to share a few points which I learned in the past years.

1- CHEAP HOSTING (beware of this phrase)

Most of the people steps into WWW world, search for web hosting with this keyword and they get loads of results. Many companies claiming on their website that offer ultra cheap hosting with excellent support and blah blah. What does that exactly mean? What does they mean when they say cheap? Their service, support or what? Let me tell you one thing, bandwidth is not free. That is bought for money so did other stuff like space etc. You could find many hosting companies offering 5GB storage space and 50 GB of data transfer for just 2$s per month. Trust me if you know about server things, this will look like a joke to you. A few popular one even offer UNLIMITED STORAGE SPACE AND UNLIMITED BANDWIDTH. What they don’t mention in the feature chart is the CPU and RAM usage you are allowed to use. They tell you about this when you see a page instead of your website, that says

You’re site is suspended due to violation of our terms of our services.

What the hell??? You worked hard to build the traffic for your website and when traffic started to arrive, they put this page. You email hosting support and they tell that your website was using high amount of CPU and RAM.

You need to understand here that you can’t use all the unlimited bandwidth or even 50 GB, because if you’re site is getting that much traffic, their server can’t bear that much traffic, and its time for you upgrade.

Conclusion: Before buying cheap hosting (cheap in terms of price) you should focus on what you exactly needed at the starting stage, not what unlimited stuff they are offering because you’re not going to use their unlimited stuff anyway.

2- Company Existence

These days, most of the guys think that web hosting is a good business so they just jump into this field after buying a dedicated server with CPanel and starts advertising their service on various forums etc. What they don’t understand that web hosting is a very complex kind of business and only pros can manage this business. Soon, the server maintenance and other things starts to become out of their control and you wake up one day to see your website gone from the WWW world.

Conclusion: Better check if the hosting company have a physical address and a phone number so that you have surety that you bought the service from some real world people.

3- Read Reviews before buying

You found a web hosting company, their website is just awesome, cool looking and all that. They’re offering almost all the things you needed. You emailed the support your queries, got reply from ‘em in 1 hour. You are impressed and you think you’re ready to buy. This is where you are committing a mistake, they’re not cool just because they look cool to you. Many people are annoyed with them already. Fortunately, there are many honest websites on Internet that are community driven and have bunch of discussions on web hosting. Webhostingtalk.com, CNET webhosting reviews, webhostingunleashed.com are one of those websites. Before you place an order, do a strong search on these websites to check what other people are saying.

Conclusion: Be patient. See what are the opinions of their customers.

4- Bandwidth

According to this link, Facebook is spending $7.8 Million per year on their bandwidth. Bandwidth is one of the core of the hosting business, 90% hosting companies actually resell bandwidth.

Lets suppose you find a hosting company that is real, now the problem which rises here is that they’ll gonna take good care of bandwidth. At this point you have to be aware that how they charge for the bandwidth. Most of the companies start charging big amount after you have used your monthly quota. For example you were allotted a quota of 300 GB of data transfer per month for lets say 50$s per moth, at the end of the month you have already used 325 GB of bandwidth. Now you’re thinking they’ll charge you a few extra bucks for the extra bandwidth you used. You are terribly wrong. They could charge you 1$ for each extra GB you have used. This is true, I have experience this case in the past. Following is the screen shot of the Invoice I received at the end of the month from my hosting company.

This invoice was a nightmare to me, I thought I’d lost all the profit I earned from my websites. However I emailed the support and asked why on earth they didn’t informed me that I have already used my quota and put the bandwidth exceed page when I used all my bandwidth. They told me that they know that for a customer website up-time is very important and many other reasons, however I end up paying 250 USD, terminated the hosting contract and closed my websites.

Another blunder that I did was not checking my bandwidth meter, not checking the right meter to be more precise. I was checking the bandwidth usage at AWSTATS provided by CPanel and I was good according to that. However the AWSTATS doesn’t show the total Inbound + Outbound traffic. In most of the cases you don’t have to worry about inbound bandwidth as its consumption is usually very low (FTP, file uploads etc) but I was running proxy websites so my inbound bandwidth consumption was almost equal to that of outbound. So together, it made a huge number and huge problem for me .

Conclusion: You should know how much bandwidth you’re going to use and keep an eye on your bandwidth meter and upgrade to the right account before you have to pay the big amount.

5- Are you buying the right package?

If you have bought a package that was smaller than your usage, you’ll know that soon (your host will shut your site). You can’t run proxy or social networking websites with good traffic on a shared hosting. But make sure you’re not buying something that you’ll never use. Like buying a VPS for just running 2-3 directory websites or a small ecommerce website, or you are wasting your money.

Conclusion: Don’t waste your money or website by purchasing hosting services that is bigger or smaller than your needs.

Some Recommended Companies

With all these hosting scams around, there are still companies that take your business seriously. Following are a few web hosting companies that I will suggest based on what kind of hosting you needed. Please note that none of the following urls have any kind of affiliate or referral links.

I have used all the above web hosting services either personally or for my clients and I found their service reliable and honest. I hope this article will help you from stumbling into the problems that I faced when I started.

10 best WordPress social network plugins

designcode — Sat, 01 Aug 2009 15:31:35 +0000

If you go for searching for Twitter or Flickr plugins, you can literally finds 100s. But its hard to check every tool one by one and then select. Some plugins are really easy to use, but not all plugins are made with ease of use in mind. I am sharing a list of plugins that can be used to interact with your social networking accounts and contacts. They are easy and don’t sucks.

1- Easy Retweet

Easy ReTweet is a WordPress Plugin, which let’s you add retweet or Tweet this buttons for your WordPress posts, together with the retweet count. In my opinion its one of the best plugin to get traffic from Twitter to your posts. This plugin allows freedom of usage and can be used in three ways. Checkout the plugin page for more information.

2- WP to Twitter

The WP-to-Twitter plugin posts a Twitter status update from your WordPress blog using the Cli.gs URL shortening service to provide a link back to your post from Twitter. This way you don’t have to update your Twitter status manually after publishing a post.

3- Twitter Blog

Twitter Blog will not only tweet about your blog post, but it will also check hourly for public replies to that tweet and add them as comments to your post. That enables you to convert your WordPress blog into twitter powered micro-blog.

4- Share This

The ShareThis WordPress plugin provides a simple way for users to add your post to many social bookmarking sites, or to send a link to your post via email, AIM, Facebook, Twitter and more.

5- FriendFeed Widget

This plugin allows you to add a sidebar widget to your theme where you can show a list of your recent online activity, with the data provided by Friendfeed.

6- WP-FacebookConnect

WP-FacebookConnect adds Facebook functionality to WordPress using the Facebook Connect APIs. It provides single sign-on, avatars, and News Feed publication of comments. While this plugin brings a tremendous functionality to your blog, be advised that is requires some changes in your theme files.

7- Twitter for Wordpress

Twitter for WordPress displays yours latest tweets in your WordPress blog. Its simple, customizable and widget ready. Simply upload plugin in your plugin directory, activate plugin and you are ready to go. If you use WordPress widgets, just drag the widget into your sidebar and configure, otherwise you just have to use small code in your theme to display your public Twitter messages.

8- flickr RSS

This plugin for WordPress allows you to display Flickr photos on your weblog. It supports user, set, favorite, group and community photostreams, and is relatively easy to setup and configure via a settings panel. The plugin also has cache support, allowing you to save thumbnails on your own server. This plugin is also widget ready, which means you can simply drag the widget into your sidebar and show your Flickr photos on your blog.

9- WordPress Flickr Manager

Inserting images into posts could never have been easier. If you have installed this plugin you can use your Flickr photos in your post directly from WordPress. Simply click on an image from the added ‘Flickr Manager’ panel on the edit page and it will automatically be inserted into your post.

10- del.icio.us for WordPress

del.icio.us for WordPress displays your latest del.icio.us bookmarks in your WordPress blog. Written by the same guy who wrote Twitter for Wordpress, shares all the properties of that plugin. Easy to use and widget ready. If you are a Delicious addict and wanna show off, that plugin even supports multiple widgets.

Free WordPress themes based on themes

designcode — Sat, 01 Aug 2009 08:50:16 +0000

Yes you read it right, that isn’t a typo error. The title reads “WordPress themes based on themes“. The best part of the WordPress is its Themes. You can port your WordPress blog to work as any kind of website just using Themes. Some designers have gone beyond the simple themes, they adopted the look and feel from famous web apps, browsers, even desktop applications and created the WordPress themes upon those designs. Here are a few of those themes.