Shiny Blog

CSS Minification on the Fly

2010-01-27T08:49:54Z

Introduction

So, I recently took the habit to fire Google’s Page Speed to learn about my websites performances and looking for ways to optimize them for my particular hosting solution and for the benefits of my readership (you).

One of the recommendation was to minify CSS. We (web workers) have all encountered JavaScript minification. This became a common task to do at the pre launch phase.

Assets minification is great, it’s saves bandwidth and reduces latency, however there is a downside, you need to keep copies of the original files if you want to keep any formating.

That’s where I come with a simple solution to minify on the fly any css embedded in your site. This will involve a little knowledge of PHP and Apache rewrite rules.

The PHP minifier

Ok, I don’t like to reinvent the wheel when I know such a wheel exists. So I borrowed and slightly edited the php css minifer published on lateralcode.com.

[sourcecode lang="php"]
header( "Content-type: text/css" );

$file = isset( $_GET[ 'css' ] ) ? $_GET[ 'css' ] : '';

$content = file_get_contents( $_SERVER['DOCUMENT_ROOT'] . $file );
echo minify( $content );

function minify( $css ) {
	$css = preg_replace( '#\s+#', ' ', $css );
	$css = preg_replace( '#/\*.*?\*/#s', '', $css );
	$css = str_replace( '; ', ';', $css );
	$css = str_replace( ': ', ':', $css );
	$css = str_replace( ' {', '{', $css );
	$css = str_replace( '{ ', '{', $css );
	$css = str_replace( ', ', ',', $css );
	$css = str_replace( '} ', '}', $css );
	$css = str_replace( ';}', '}', $css );

	return trim( $css );
}

[/sourcecode]

The Rewrite Rules

I saved my minifier PHP script into a directory named /m/ on my site’s root. All I want know is to minify all my css files without having to edit all the link tags and @import in my code. So I’ve written this rewrite rule to pass any request to a file ending in .css to my PHP minifier; It’s not a redirect it’s just a rewriting so I can keep my paths unmodified.

[sourcecode lang="bash"]
	# Avoids infinite loops
	RewriteCond %{REQUEST_URI}	!^/m/$

	# Pass the complete path to any css file to the php minifier
	RewriteRule ^/(.*\.css)$	/m/index.php?css=$1 [NC]
[/sourcecode]

WordPress Tests

Here’s the results for a request against a typical WordPress installation with a couple plugins installed :

CSS minified

CSS not minified

Here is the comparison chart of the gains on a typical request:

CSS Minifier Benefits Comparison Chart

Latency tests are not extremely accurate since it may varies depending on network connection. I, however, constated significants performances boost and on very few hosts, an unexplained drop in latency performance. My guess is that the latency was introduced by the computations in the PHP minifier script on very busy servers.

Enhancements

This “hack” is not perfect as is. You might want to generate a cache of the minified CSS files to save a significant amount of CPU cycles. Here is the modified PHP CSS minifier vastly inspired by Quick and Dirty PHP Caching article (snipe.net).

My Apache is configured to send GZIPed content whenever possible so, I dropped the part about compression and merged the different CSS minification functions to get the best out of them.

[sourcecode lang="php"]

header("Content-type: text/css");
header("Cache-Control: no-cache, must-revalidate");

$file = isset( $_GET[ 'css' ] ) ? $_GET[ 'css' ] : '';

$cachefile = 'cache/'.basename($file);
$cachetime = 24 *  60 * 60;

if (file_exists($cachefile)
&& (time() - $cachetime < filemtime($cachefile))) {
        header("Expires: " .
			gmdate("D, d M Y H:i:s", filemtime($cachefile) + $cachetime) .
			" GMT", true);
        include($cachefile);
        exit;
}

ob_start(); // start the output buffer

$fp = fopen($cachefile, 'w'); // open the cache file for writing

$content = file_get_contents( $_SERVER['DOCUMENT_ROOT'] . $file );
echo minify($content);
echo "/* Cached ".date('jS F Y H:i', filemtime($cachefile))." */";
// save the contents of output buffer to the file
fwrite($fp, ob_get_contents());
fclose($fp);

ob_end_flush(); // Send the output to the browser

function minify($data) {
    $data = preg_replace( '#/\*.*?\*/#s', '', $data );
    // remove single line comments, like this, from // to \\n
    $data = preg_replace('/(\/\/.*\n)/', '', $data);
    // remove new lines \\n, tabs and \\r
    $data = preg_replace('/(\t|\r|\n)/', '', $data);
    // replace multi spaces with singles
    $data = preg_replace('/(\s+)/', ' ', $data);
    //Remove empty rules
    $data = preg_replace('/[^}{]+{\s?}/', '', $data);
    // Remove whitespace around selectors and braces
    $data = preg_replace('/\s*{\s*/', '{', $data);
    // Remove whitespace at end of rule
    $data = preg_replace('/\s*}\s*/', '}', $data);
    // Just for clarity, make every rules 1 line tall
    $data = preg_replace('/}/', "}\n", $data);
    $data = str_replace( ';}', '}', $data );
    $data = str_replace( ', ', ',', $data );
    $data = str_replace( '; ', ';', $data );
    $data = str_replace( ': ', ':', $data );
    $data = preg_replace( '#\s+#', ' ', $data );

    return $data;
}
[/sourcecode]

More Enhancements

Well, we are now saving all minified css files into our cache so we can read from these cached files for all the next requests for 24 hours thus completly anihilating the latency problem on busy servers. That done I restored the Browser Caching leverage by adding an Expires header related to each files generation time + the cache lifetime.

But Wait, There is more! Cache Control

Addionaly, as web developers we will need something to deactivate this caching behavior. Deactivating it completly is just as easy as removing the Apache rewrite rules. But what we might find very handy is to regenerate the cache if the master CSS file has been modified.

The PHP CSS Minifier script becomes then:

[sourcecode lang="php"]
$time_start = microtime_float();

header("Content-type: text/css");
header("X-Powered-by: CSS Minifier v0.1", true);
header("Cache-Control: no-cache, must-revalidate");

$file = isset( $_GET[ 'css' ] ) ? $_GET[ 'css' ] : '';

$cachefile = 'cache/'.basename($file);
$cachetime = 24 *  60 * 60;

$age = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);

header("X-Original-Generated-At: " . nicetime($age));

if (file_exists($cachefile)
&& (time() - $cachetime < filemtime($cachefile))) {
        header("Expires: " .
			gmdate("D, d M Y H:i:s", filemtime($cachefile) + $cachetime) .
			" GMT", true);
 $time_end = microtime_float();
 $time = $time_end - $time_start;
 header("Cache-Status: cached");
 header("X-Runtime: ". $time . "sec");

 include($cachefile);
 exit;
}

header("Cache-Status: regenerated");
ob_start(); // start the output buffer
$fp = fopen($cachefile, 'w'); // open the cache file for writing

$content = file_get_contents( $_SERVER['DOCUMENT_ROOT'] . $file );
echo minify($content);
echo "/* Cached ".date('jS F Y H:i', filemtime($cachefile))." */";
fwrite($fp, ob_get_contents()); // save the contents of output buffer to the file
fclose($fp); // close the file

$time_end = microtime_float();
$time = $time_end - $time_start;
header( "X-Runtime: ". $time . "sec" );

ob_end_flush(); // Send the output to the browser

function minify($data) {
 $data = preg_replace( '#/\*.*?\*/#s', '', $data );
 // remove single line comments, like this, from // to \\n
 $data = preg_replace('/(\/\/.*\n)/', '', $data);
 // remove new lines \\n, tabs and \\r
 $data = preg_replace('/(\t|\r|\n)/', '', $data);
 // replace multi spaces with singles
 $data = preg_replace('/(\s+)/', ' ', $data);
 //Remove empty rules
 $data = preg_replace('/[^}{]+{\s?}/', '', $data);
 // Remove whitespace around selectors and braces
 $data = preg_replace('/\s*{\s*/', '{', $data);
 // Remove whitespace at end of rule
 $data = preg_replace('/\s*}\s*/', '}', $data);
 // Just for clarity, make every rules 1 line tall
 $data = preg_replace('/}/', "}\n", $data);
 $data = str_replace( ';}', '}', $data );
 $data = str_replace( ', ', ',', $data );
 $data = str_replace( '; ', ';', $data );
 $data = str_replace( ': ', ':', $data );
 $data = preg_replace( '#\s+#', ' ', $data );

 return $data;
}

function microtime_float() {
 list($usec, $sec) = explode(" ", microtime());
 return ((float)$usec + (float)$sec);
}

function nicetime($date)
{
 if(empty($date)) {
 return "No date provided";
 }

 $periods         = array(
							"second", "minute", "hour",
							"day", "week", "month", "year", "decade"
					);
 $lengths         = array(
							"60","60","24","7",
							"4.35","12","10"
					);

 $now             = time();
 $unix_date         = $date;

 // check validity of date
 if(empty($unix_date)) {
 return "Bad date";
 }

 // is it future date or past date
 if($now > $unix_date) {
 $difference     = $now - $unix_date;
 $tense         = "ago";

 } else {
 $difference     = $unix_date - $now;
 $tense         = "from now";
 }

 for($j = 0; $difference >= $lengths[$j]
		&& $j < count($lengths)-1; $j++) {
 	$difference /= $lengths[$j];
 }

 $difference = round($difference);

 if($difference != 1) {
 $periods[$j].= "s";
 }

 return "$difference $periods[$j] {$tense}";
}

[/sourcecode]

Note the additional HTTP headers to keep track of cache statuses. Here's how to test the whole functionalities:

1 . No cache available

CSS Minifier No Cache

2 . File is already cache:

CSS Minifier Cached File

3 . Master CSS file has been modified:

CSS Master Modified

As you can see, the different HTTP headers : Cache-Status, X-Original-Generated-At and X-Runtime helps to determine if the cache is functioning properly. When statisfied, it's safe to remove those lines in production code.

Conclusion

These ~100 lines of php will saves you a lot a bits.

Update

I created a new project on google code to host the code of my PHP CSS minifier. Along with a complete rewrite in OO PHP, you will be able to download the latest sources from the CSS Shrink project.

Spread the word:

PSD template to Wordpress Theme from Scratch

PSD template to WordPress Theme from Scratch

2010-01-25T09:16:48Z

Clean & Detailed PSD template to WordPress Theme from Scratch

In this tutorial I’ll guide you in the process to transform a Photoshop^TM PSD template to a complete XHTML and CSS site build. In the process you will learn how to slice the PSD, how to reproduce some photoshop layer styles using CSS3 and how to easily implement CSS sprites. You will not find any cross browser hacks or tricks because, this topic would require a complete tutorial by itself and this is not the purpose of this tutorial.

Final image result

WordPress Setup

In order to have a complete preview of what can go into a WordPress blog I use a resource from wpcandy.com: Easier Theme Development with Sample WordPress Content this archive contains a complete dummy content like blockquotes, lists, and floating images that are common to blogs and that need to be supported in every theme you release.

Simply download and extract the archive then go to the WordPress Dashboard and Tools > Import choose «Wordpress» and upload the extracted «posts.xml» file.

We now have a solid content base that will prevent us to omit something in our CSS/XHTML design process so we can now focus on slicing and theming our new WordPress blog!

Starting from default WordPress theme

A common usage if you do not already made a subsequent amount of WordPress themes is to start from the default one, Kubrick. First thing to do is to clear the style.css and insert the well known CSS reset by Eric Meyer.

You should obtain something very similar to this as a result:

Do you notice the background image still visible in our reseted layout ? The Kubrick theme inserts this CSS at runtime after a sidebar detection. Let’s remove it. Open the file «/wordpress/wp-content/themes/default/header.php» and remove the inline style block mentioning the #page id.
It should looks like this :
[sourcecode language='php']

[/sourcecode]
Remove this block and as well as the «rtl.css» and «screenshot.png» files and everything in «images/», I will not cover the Right To Left implementation in this tutorial and we will replace the screenshot at the very end.

Main zones analysis

Here are the top level zones identified in our Photoshop template :

To build a theme we need to first define the zones we will implement, starting by large containers, slowly focusing on smaller elements. Here are the first elements I identified.

Our theme features by default the following top level elements: #header, #content, #sidebar and #footer all contained in the main wrapper: #page

That’s almost complete, but our layout features a navigation bar. We will have to add a CSS hook for this one, open up «/wordpress/wp-content/themes/default/header.php» in your favorite editor if you closed it and add the following code a the end of file.

[sourcecode language='php']

>
Firebug (F12).
Using the DOM Inspector tool (),
select the header zone (id=header).

Once the node selected, right click (ctrl+click on Macintosh) in the «Style» tab on the right
firebug panel and choose «Edit Element Style …».

You can now preview all CSS changes you make in live.

Enter the following directives :

[sourcecode language='css']
background: transparent url(images/header-bg.png) repeat-x scroll 0 0;
height:116px;
[/sourcecode]

Once done and satisfied with the result, save the generated CSS into our theme main stylesheets document: «/wordpress/wp-content/themes/default/style.css»

[sourcecode language='css']
#header {
background: transparent url(images/header-bg.png) repeat-x scroll 0 0;
height:116px;
}
[/sourcecode]

Back to Photoshop, hide all groups except for the background and create a new horizontal guide at 116px
(if not already exists) and grab a selection from this guide to just under the background gradient

Enter the following directives in your «style.css» file:

[sourcecode language='css']
body {
background: #663300 url(images/bg.jpg) no-repeat scroll center 116px;
font-family:”Myriad Pro”, helvetica, arial, sans-serif;
line-height:1.7em;
}
[/sourcecode]

Then build the footer like you did for the header :

Then, style it :

[sourcecode language='css']
#footer {
background: transparent url(images/footer-bg.png) repeat-x scroll 0 0;
height:295px;
clear:both;
}

[/sourcecode]

And style the wrapper div and the common elements while you’re at it:

[sourcecode language='css']
#wrapper {
margin: 0 auto;
width:970px;
}

a {
color:#FFFFFF;
text-decoration:none;
}

[/sourcecode]

Navigation

The default WordPress content we used to seed our favorite blogging engine features hierarchized pages. This is an unique occasion for us to style and add some fancy drop down menu with jQuery.

For a start the styling is not rocket science :

[sourcecode language='css']

/* Prevents blocks to hang side by side */
#content {
clear:both;
}

#navigation li
{
display:block;
float:left;
line-height:35px;
min-width:100px;
text-align:center;
position:relative;
padding-left:5px;
padding-right:5px;
height:33px;
background:transparent url(images/navigation-separator.png) no-repeat scroll 0 0;
}

/* Hiding sub menu items */
#navigation li ul {
display:none;
}
[/sourcecode]

To slice our navigation background images we must, hide all groups except for Navigation one. Start with the left part of the navigation bar:

Once saved, transform the selection in order to make a narrow selection, that will be the main navigation background.

That done you can now slice the tab separator then style the navigation elements:

[sourcecode language='css']
#navigation {
background: transparent url(images/nav-left.png) no-repeat scroll 0 0;
padding-left:11px;
}

#navigation ul {
background: transparent url(images/nav-middle.png) repeat-x scroll 0 0;
height:44px;
}

#navigation li:hover, #navigation li ul li:hover {
background:transparent url(images/navigation-hover.png) no-repeat scroll 0 0;
}

[/sourcecode]

You may need to adjust your padding and height if necessary, it only depends on your sliced images sizes.

For example, I added a left padding of 11 pixels to my navigation div because I don’t want the background of the element inside it to hide it’s content.

Take a look at the difference:

It speaks by itself.

Well, you may have noticed that I included a rule to handle the CSS :hover pseudo-class.

The code is not relevant, it just displays another image as the background of the tab. If there’s something you must pay attention to, is the hover image size. It must be at least longer than you longer tab, itself being conditioned by the longest title of your pages.

Here is a quick preview of what you will face if the hover image is too short:

This is one if not the only the counter part of using CSS sliding doors.

Displaying submenus using jQuery

First create a new folder named «/wordpress/wp-content/themes/default/js/» and install a fresh copy of jQuery inside along with a new file named «shiny-theme.js».
Open «/wordpress/wp-content/themes/default/footer.php» and just before the closing body tag, add the references to jQuery and shiny-theme.js:

[sourcecode language='php']

[/sourcecode]

You might want to take advantage of Google’s Ajax CDN to save bandwidth. In this case replace the jQuery reference by this one :

[sourcecode language='php']

[/sourcecode]

«Why in the footer?» You might ask. The answer is based on the assumption that any javascript that affects the DOM won’t be triggered until the DOM is fully parsed by the browser, generating errors otherwise. More important, having the javascripts in the footer avoid browsers stalling while rendering a page. Because it doesn’t have to download and parse huge files prior DOM rendering.

Styling submenus:

[sourcecode language='css']
#navigation li ul {
display:none;
left:0;
position:absolute;
top:33px;
height:auto;
}

#navigation li ul li {
background:transparent url(images/navigation-hover.png) repeat scroll 0 0;
}
[/sourcecode]

Open «/wordpress/wp-content/themes/default/js/shiny-theme.js» and paste the following snippet:

[sourcecode language='javascript']
$(document).ready(function(){

$(‘#navigation li’).hover(
function() {$(this).find(‘ul:first’).show();},
function() {$(this).find(‘ul:first’).hide();}
);

})
[/sourcecode]

Refresh your page and take a look at the result :

It’s nice, but it could be nicer using some CSS3 rules.

In the previous screenshot the li are not clearly diferenciated from the post content. It’s too flat, there’s no deepness. Let’s add some deepness using a couple CSS3 rules edit the ul selector to add two new browser specific rules :

[sourcecode language='css']
#navigation li ul {
display:none;
left:0;
position:absolute;
top:33px;
height:auto;

-moz-box-shadow:0 2px 5px #000000;
-webkit-box-shadow:0 2px 5px #000000;

}
[/sourcecode]

Then take a look at the result:

Voilà! Our design just took another dimension. With just only those two lines you are covering Firefox 3.1+, Safari 3+ and Chrome browsers. I don’t know about you but on my sites it’s a more than significant part of my audience.

The content and sidebar areas

Kubrick does not shows the sidebar while on a post or page and it displays the navigations links above the content element. Let’s change these behaviors by adding the following code just before the get_footer() call in «/wordpress/wp-content/themes/default/single.php»:

[sourcecode language='php']

[/sourcecode]

… And by removing the navigation snippet.

Let’s quickly lay some CSS rules to style our main content and sidebar.

[sourcecode language='css']
/*
The left margin of the #content element must be the same
as the #navigation left padding
*/
#content {
clear:both;
float:left;
margin:0 0 0 11px;
width:625px;
background-color:#ccc;
border: 1px solid #fff;
margin-bottom:20px;
padding:10px;
}

#content a {
color:#663300;
text-decoration:underline;
}

#sidebar {
background-color:#ccc;
border: 1px solid #fff;
margin-bottom:20px;
padding:10px;
float:left;
width:270px;
color:#666;
font-size:0.9em;
}

.post {
margin-bottom:20px;
}
[/sourcecode]

You should now have something very similar to the following screenshot when you browse a specific post:

Once formated properly, we should add the basic typography and formating rules.

[sourcecode language='css']
.post h2, .post h3, .post h4, .post h5, .post h6 {
color:#333333;
font-family:Georgia, “Times New Roman” ,serif;
font-style:italic;
margin-bottom:10px;
height:32px;
}

h2 {font-size:28px;}
h3 {font-size:24px;}
h4 {font-size:20px;}
h5 {font-size:16px;}
h6 {font-size:12px;}

.post {
margin-bottom:20px;
}

.post img {
background-color:#CCCCCC;
border:3px solid #AAAAAA;
margin-bottom:10px;
margin-top:10px;
padding:4px;
}

.alignright {
margin-left:10px;
}

.alignleft {
margin-right:10px;
}

.entry p {
text-align:justify;
}

.post blockquote {
border-bottom:3px solid #663300;
border-top:3px solid #663300;
font-style:oblique;
margin:1em;
}

.post ul, .post ol {
list-style-type:disc;
margin-left:1em;
}

.post ol {
list-style-type:decimal;
}

.post cite {
margin-left:1em;
}

textarea {
width:100%;
}

[/sourcecode]

You must now have something more readable:

Meta data

To stick to our PSD layout, we must move and edit the meta data informations, mainly the publication date and categories, to the top of the post area, just below the post title.

Open «/wordpress/wp-content/themes/default/single.php» and add the following code just after the_title() call

[sourcecode language='php']

Posted in
on
at
by

[/sourcecode]

Also remove the similar content in the .postmetadata block then style the newly created publication information in «/wordpress/wp-content/themes/default/style.css».

[sourcecode language='css']

.post-meta {
font-family:Georgia, “Times New Roman” ,serif;
font-style:italic;
font-size:14px;
margin-bottom:2em;
color: #888;
font-weight:bold;
}

.post-meta span {
font-style:normal;
font-weight:normal;
}
[/sourcecode]

Let’s refresh our browser to see our style publication informations:

Comments Bubble

The comment bubble will be as easy to slice and code, hide everything that is not the bubble itself then make a tight selection around it and make a merged copy (shift+ctrl+c) of it.

Create a new Photoshop document (ctrl+N) (it should be at the good size) then paste the bubble and Save for the web & devices.

Open «/wordpress/wp-content/themes/default/single.php» and add the following code just after our previous edition:

[sourcecode language='php']

Posted in
on
at
by

<div class=”comments-count”>
<?php comments_number(‘No Comments’, ‘One Comment’, ‘% Comments’ );?>
</div>
[/sourcecode]

Finally apply relevant CSS rules to this new div.comments-count element :

[sourcecode language='css']

.entry {
position: relative;

}
.entry .comments-count {
background:transparent url(images/comments-bubble.png) no-repeat scroll 0 0;
color:#FFFFFF;
height:37px;
position:absolute;
right:0;
font-size:12px;
text-align:center;
top:-32px;
width:110px;
}
[/sourcecode]

Post image

To finish the content area, we need to add two elements, the post image and the attached ribbon graphical element. To do so we will make use of WordPress custom fields. Slice the illustrative image from the PSD layout and save it in «/wordpress/wp-content/themes/default/default-post-image.jpg». Needless to say that making use of such feature generate a little bit more work when writing new posts.

Edit the post you are currently using as master then add the following informations in the Custom Fields area and update the post, or whatever is relevant to your installation path.

To get benefit from this new information, we will make use of the get_post_meta() function. Slice & save the illustrative image’s ribbon and shadow then open «/wordpress/wp-content/themes/default/single.php».

Add the following snippet just above the_content() call:

[sourcecode language='php']

&amp;amp;amp;amp;nbsp;
” alt=”” width=”630″ />

&amp;amp;amp;amp;nbsp;

[/sourcecode]

This is some additional markup conditioned by the presence of a post_image custom field in the post currently displayed. Basically, if there is no image associated with the post then do not display this part. As an exercise, you could also try an implement a default image to display in place of the post_image custom field.

Add the corresponding CSS formating and positioning in the stylesheets file :

[sourcecode language='css']

.post-image {
position: relative;
}

.post-image img {
border:1px solid #FFFFFF;
padding:0;
margin-bottom:0;
}

.ribbon {
background:transparent url(images/vertical-ribbon.png) no-repeat scroll center center;
height:100%;
left:-28px;
position:absolute;
width:44px;
}

.post-image-shadow {
background:transparent url(images/post-image-shadow.png) no-repeat scroll center top;
height:44px;
width:100%;
}

[/sourcecode]

The completed post design should now looks like this in your browser:

Author box

Open «/wordpress/wp-content/themes/default/single.php» in your favorite editor and place your cursor just before the comments_template() call. Paste the following code:

[sourcecode language='php']

&amp;amp;amp;amp;nbsp;

echo get_avatar(get_the_author_meta('ID'), $size='64', $default = get_option('home') . 'http://static.moblur.org/shinylittlething.com//wp-content/themes/default/images/avatar.png'); ?>

the_author_meta('description');
?>

[/sourcecode]

This is straight forward, display an horizontal line, display the header then display the author’s avatar and description. Edit the existing headers rule :

[sourcecode language='css']
.post h2, .post h3, .post h4, .post h5, .post h6,
h3#comments, #comments-description, #respond h3,
#author-bio, #author-bio-container h3 {
color:#333333;
font-family:Georgia, “Times New Roman” ,serif;
font-style:italic;
margin-bottom:10px;
height:32px;
}
[/sourcecode]

Then add the following rules to format the newly created markup:

[sourcecode language='css']
.author {
float:left;
}

.author .user-avatar {
margin-right:42px;
}

#author-bio {
font-size:12px;
font-style:italic;
line-height:1.5em;
}
[/sourcecode]

And we are done for this simple element.

Comments area

The slicing and coding will become a little it heavier in this step, we will adapt the existing «/wordpress/wp-content/themes/default/comments.php» to fit our needs.

Add a couple new selectors to the HTML Headers rules:

[sourcecode language='css']
.post h2, .post h3, .post h4, .post h5, .post h6, h3#comments, #comments-description {
color:#333333;
font-family:Georgia, “Times New Roman” ,serif;
font-style:italic;
margin-bottom:10px;
height:32px;
}
[/sourcecode]

Edit the text to fit the PSD layout by replacing the following code

[sourcecode language='php']

to “”

[/sourcecode]

[sourcecode language='php']

Comments () Participate!

[/sourcecode]

Then add the description line

[sourcecode language='php']
Take a look at the responses we’ve had to this article.
[/sourcecode]

Apply some CSS rules to the newly introduced elements.

[sourcecode language='css']

#comments-description {
font-weight:bold;
color:#666;
font-size:14px;
}

h3#comments {
margin-bottom:0;
}

h3#comments span {
float:right;
font-size:14px;
}

[/sourcecode]

Comments boxes

Let’s analyze our comment box, there’s a custom default avatar that is larger (64 x 64px) than the WordPress default one and the user name and comment are framed in a comic like bubble. Nothing to be scared of.

At this point you should know how to slice a PSD layout, I’ll not explain further how to slice the parts (default avatar, left arrow and horizontal line) we will need in this step, let’s instead focus on code. Open «/wordpress/wp-content/themes/default/functions.php» and delete everything under the register_sidebar conditional test and add the following function :

[sourcecode language='php']
function shinytheme_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment;
$urlHome = get_option(‘home’) . ‘/wp-content/themes/default/images/’;
?>

id=”li-comment-“>

$depth, ‘max_depth’ => $args['max_depth']))) ?>

&amp;amp;amp;amp;nbsp;

&amp;amp;amp;amp;nbsp;
comment_approved == ’0′) : ?>

[/sourcecode]

This function will be used as a replacement of the WordPress default comment display handling. Let's register it. Open «/wordpress/wp-content/themes/default/comments.php» then replace the wp_list_comments call by this one :

[sourcecode language='php']

[/sourcecode]

This instruction simply overrides the default WordPress comments display by a custom callback function.

All what is left concerning the comment boxes is the CSS. In «/wordpress/wp-content/themes/default/style.css», add the following rules:

[sourcecode language='css']
.comment-author {
float:left;
margin-right:10px;
}

.comment-text {
background-color:#E9E9E9;
border:1px solid #FFFFFF;
margin-bottom:30px;
margin-left:100px;
padding:10px;
position:relative;
}

.comment-text span {
font-size:12px;
color: #666;

}
.clear {
clear:both;
}

.left-arrow {
background:transparent url(images/left-arrow.png) no-repeat scroll center top;
height:26px;
left:-15px;
position:absolute;
top:3px;
width:19px;
}

.user-avatar {
border: 1px solid #aaa;
}

.hr {
background:transparent url(images/hr.png) no-repeat scroll center top;
height:2px;
margin:20px;
width:100%;
}

[/sourcecode]

And we are done, let's take a quick look at the result:

Comment form

We will now style the comment form to match as closely as possible our PSD layout.

Open «/wordpress/wp-content/themes/default/style.css» and move the textarea line above the is_user_logged_in() call:

[sourcecode language='php']

[/sourcecode]

Add the user (or default if not logged) avatar just inside the form#commentform element:

[sourcecode language='php']

global $current_user;
get_currentuserinfo();
echo get_avatar($current_user->ID, $size='64', $default = get_option('home') . 'http://static.moblur.org/shinylittlething.com//wp-content/themes/default/images/avatar.png'); ?>

[/sourcecode]

Wrap the rest in a div#comment-fields element:

[sourcecode language='php']

&amp;amp;amp;amp;nbsp;

Logged in as . Log out &amp;amp;amp;amp;raquo;

/>
Name

/>
Mail (will not be published)

Website

ID); ?>

[/sourcecode]

And format the elements using CSS:

[sourcecode language='css']
#comment-fields {
float:left;
margin-left:22px;
width:522px;
}

#comment-fields p {
position:relative;
}

#comment, #author, #email, #url{
border:1px solid #999999;
margin-bottom:20px;
width:505px;
padding:10px;
}

.left-arrow-white {
background:transparent url(images/left-arrow-white.png) no-repeat scroll center top;
height:26px;
left:-14px;
position:absolute;
top:6px;
width:19px;
}
[/sourcecode]

You should get something very similar to the following screenshot:

Some work's left in this area. Labels should appear inside the inputs and the submit button needs a background image.

Here is the content of the div#comments-fields element after a bit editing and Javascript magic:

[sourcecode language='php']

&amp;amp;amp;amp;nbsp;
onfocus="javascript:if(this.value == 'What\\'s on your mind ?'){this.value=''};"<br /> onblur="javascript:if(this.value==''){this.value='What\\'s on your mind ?'}"<br /> >What's on your mind ?

Logged in as . Log out &amp;amp;amp;amp;raquo;

onfocus="javascript:if(this.value == 'Your name '){this.value=''};"
onblur="javascript:if(this.value==''){this.value='Your name '}"
value=""
size="22" tabindex="1" />

onfocus="javascript:if(this.value == 'Mail (will not be published) '){this.value=''};"
onblur="javascript:if(this.value==''){this.value='Mail (will not be published) '}"
value=""
size="22" tabindex="2" />

onfocus="javascript:if(this.value == 'Website'){this.value=''};"
onblur="javascript:if(this.value==''){this.value='Website'}"
value=""
size="22" tabindex="3" />

ID); ?>

[/sourcecode]

Nothing especially hard to understand here, labels strings have been moved into inputs values and two javascript events have been added, let me explain this a bit further. onFocus & onBlur events are triggered when a user respectively enters or leaves an html field. The actions are rather simple too, it reads like this in pseudo code:

[sourcecode language='php']
onFocus, we clear the field so the user don't have to:

IF my.value == 'something' THEN
clear my.value
FI

onBlur, we reset the field to a known state so the onFocus event could be triggered again

IF my.value is empty THEN
my.value = 'something'
FI
[/sourcecode]

That's all for javascript, we could have go for some jQuery event binding too. I love jQuery, but I couldn't find any good argument for this particular usage apart from being unobtrusive. Anyway here the unobtrusive equivalent to our snippets:

[sourcecode language='javascript']
$(document).ready(function(){
$("#author").
bind('focus', function(){
if($(this).val() == "Your name") {
$(this).val('');
}
}).
bind('blur', function(){
if($(this).val() == "") {
$(this).val('Your name');
}
});

/* Rinse, repeat for other fields. */
});
[/sourcecode]

The only tricky part resides in fact, in the values filled using PHP. It might be confusing to beginners because it makes use in some cases of 2 ternary operations. Let's decompose this:

[sourcecode language='php']
echo (esc_attr($comment_author))==''?'Your name ' . (($req)?"(required)":""):esc_attr($comment_author);
[/sourcecode]

Is equivalent to :

[sourcecode language='javascript']
if (esc_attr($comment_author) == '') {
echo 'Your name ';
if($req != '') {
echo '(required)';
}
}
else {
echo esc_attr($comment_author)
}
[/sourcecode]

Ternary operators are bottled awesomeness when it comes to one liners.

Onto the submit button. You have two choices, going for a full alpha channel PNG24 version of it or a matted version in PNG8.

Each solution have it's own downside I'll explain them both and you'll have to choose by yourself what's better for your particular situation.

PNG24 is more flexible, let's say you want to change the background of your main content area, your button will follow the flow and you will not have to slice it again until you completely change your layout. This has a cost, in terms of bytes this button will be about 10kbytes. Which is kind of huge a en element of this size.

PNG8 on the other hand, will produce a smaller image, around 3kbytes, but you'll have to embed the background color information (Matte option in Photoshop Save for web & devices) thus limiting the uses for this graphical element and forcing you to re-export it each time you change it's background.

My choice will go to PNG24 and flexibility. So slice and export your button and style the input#submit element:

[sourcecode language='css']
#submit-container{
text-align:right;
}

#submit {
background:transparent url(images/add-comment.png) no-repeat scroll center top;
border:none;
height:68px;
text-indent:-100000px;
width:273px;
}

[/sourcecode]

To finish this area off we yet have to change to form title which reads «Leave a reply» to «Participate!»
Once done, your are finished with the comments area and you should have something very similar to the
following screenshot:

And for logged in users :

Header and Subscriptions

An important part if not the most, of every web design is the header. In our case it's composed of a logo with a tagline and the common subscriptions options you find on about every blog. We will edit the default header markup to fit our need. But first slice the PSD and save the following parts as files in «/wordpress/wp-content/themes/default/images/»:

Logo + tagline as 323 x 70px «logo.png»
Header Background gradient as 1 x 115px «inner-orange.png»
Separator as 2 x 78px «header-separator.png»
Twitter Subscription as 48 x 60px «twitter-sub.png»
eMail Subscription as 90 x 60px «email-sub.png»
Twitter Subscription as 57 x 60px «rss-sub.png»

Open «/wordpress/wp-content/themes/default/header.php» and replace the div#header element by the following code :

[sourcecode language='php']

[/sourcecode]

Nothing exceptional about the markup, try to keep a clean and as smaller as possible markup is my only advice. All elements layed out we need to style them, the logo must float on the left side of the header and the subscriptions at the exact opposite.

You might have noticed the link for email subscription is a "do_nothing" Javascription function. We will get back to this later in this chapter.

Be sure to check your the dimensions of your sliced images, depending on how you do it, you might not obtain the same size, thus involving a bit CSS editing. Anyway here the CSS for my slices of the headers elements:

[sourcecode language='css']
#headerimg {
background:transparent url(images/inner-orange.png) repeat-x scroll center center;
height:115px;
margin:0 auto;
width:952px;
}

#headerimg h1 {
float:left;
padding-top:20px;
padding-left:10px;
width:335px;
}

#subscriptions {
background:transparent url(images/header-separator.png) no-repeat scroll center left;
float:right;
margin-top:26px;
text-align:right;
width:600px;
}
[/sourcecode]

Only three elements, #headerimg is our container, it must be centered.
#headerimg h1 is the logo, it belong to the left side of #headerimg and must have a width setup in order to avoid overlapping over the #subscriptions elements, finally, the #subscriptions element belonging to the right of the header section.

All finished you should have a header section very similar to the following screenshot:

ShinyTheme Options Page

Having a subscription for your twitter feed is great, it's a no brainer on any blog. But you do not want the people using your theme have to hack into the code just to add their Twitter account.

We will now build the options page for our theme. The explained process will help you produce a clean, WordPress look & feel settings page for your theme. The only field I will explain is how to customize the blog's Twitter account for the corresponding subscription option.

Everything starts in «/wordpress/wp-content/themes/default/function.php», at the top of the file, before the sidebar registering, add the following php code :

[sourcecode language='php']
$themename = "ShinyTheme";
$shortname = "wpst";
$options = array (

array(
"name" => "Subscription Settings",
"type" => "title"
),

array(
"type" => "open"
),

array(
"name" => "Twitter account",
"desc" => "Enter the twitter account related to your blog.",
"id" => $shortname."_twitter_account",
"std" => "",
"type" => "text"
),

array(
"type" => "close"
)

);
[/sourcecode]

$themename variable is the display name of our theme accross the whole WordPress installation.
$shortname is the prefix for all our custom options fields.
$options The options array's arrays can be read as template blocks
- Index 0: The Title of the option page
- Index 1: The options opening. In our case it will correspond to a table tag opening.
- Index 2: An (or more) option field.
- Index 3: The options closing. This is where we will close the table tag opened
  at opening stage.

Add the generic options handling function :

[sourcecode language='php']

function shinytheme_add_admin() {
global
$themename,
$shortname,
$options;

if ($_GET['page'] == basename(__FILE__)) {
if ('save' == $_REQUEST['action']) {
foreach ($options as $value) {
update_option($value['id'], $_REQUEST[ $value['id']]);
}

foreach ($options as $value) {
if(isset($_REQUEST[$value['id']])) {
update_option($value['id'], $_REQUEST[ $value['id']]);
}
else {
delete_option($value['id']);
}
}

header("Location: themes.php?page=functions.php&amp;amp;amp;amp;saved=true");
die();

}
}

add_theme_page($themename." Settings", "".$themename." Settings", 'edit_themes', basename(__FILE__), 'shinytheme_admin');

}
[/sourcecode]

This function saves the parameters filled in the options form of our theme settings admin page. If you want to add different action handling it's the function you have to hack into.

Here comes the Beast.

If there's a thing I dislike concerning WordPress admin pages, it's how the markup is handled. I mean, if I learned one thing in more than ten years of web working, it's to separate content from logic.
This is clearly not the case when you glance at the following admin settings function:

[sourcecode language='php']
function shinytheme_admin() {
global
$themename,
$shortname,
$options;

if ($_REQUEST['saved']) {
echo '

'.$themename.' settings saved.

';
}

settings

}
[/sourcecode]

Anyway, it's how WordPress does things. As a side note, I've been greatly inspired from this blog post concerning the whole theme admin page building, I just simplified the code, stripped out the inline CSS and applied the core WordPress stylesheets in order to keep unity accross the administration panels.

One last thing to do is to actually register the admin function with WordPress itself:

[sourcecode language='php']
add_action('admin_menu', 'shinytheme_add_admin');
[/sourcecode]

And we are (almost) done! The appearance box should now displays the link to our settings page:

The settings page itself:

It's clean, it blends nicely with the whole WordPress administration panels and it's simple. Yet we only have one option but I'm sure you got the picture.

Now the time as come to make use of these specific informations in the ShinyTheme. Open «/wordpress/wp-content/themes/default/header.php» and add the following php code snippet just below the wp_head() call:

[sourcecode language='php']
// Making options available in the current function
global $options;

foreach ($options as $value) {
/*
Stores the result of get_settings() into a variable
to avoid multiple calls to the function
*/
$current_option = get_settings($value['id']);

$$value['id'] = ($current_option === false) ? $value['std'] : $current_option;
}
?>
[/sourcecode]

The last line worth a little bit more explanation. It creates a new variable named after $value['id'] content (See Variable variables in PHP documentation). e.g: if $value['id'] value is «hello», this will create a new variable named $hello with either $current_option or $value['std'] as value. Providing by this mean, a convenient way to handle default values by setting «std» in the $options array.

With that in mind it's not difficult to guess what variable will be assigned: $wpst_twitter_account wich is the id parameter of the $options array: 'id' => $shortname."_twitter_account".

All you have to do now is to add a conditional verification to display or not the Twitter subscription image and link. Open «/wordpress/wp-content/themes/default/header.php» and edit the div#header block:

[sourcecode language='php']

[/sourcecode]

And we are done for the theme options part. Let's look at the result:

The Sidebar

Here is the preview of what we are going to build in this section:

But first, we need to setup our widgetizable sidebar accordingly to the PSD layout:

To achieve the dotted effect on the sidebar headings we will not slice and export each heading separatly, nor we won't use any text replacement technique. Instead, we will use a pattern overlay applied over the headings, using CSS.

Created a new Photoshop document 2 x 2px transparent background and using the background color of the sidebar, reproduce the following pattern :

And save it for the web as «pattern.png».

Edit the register_sidebar() function in «/wordpress/wp-content/themes/default/functions.php» to add a bit of markup (bolded in the following snippet) to the headings wrappers so we can hook in CSS.

[sourcecode language='php']
register_sidebar(array(
'before_widget' => '

',
'before_title' => '

',
'after_title' => '

',
));
[/sourcecode]

CSS formating and positioning

[sourcecode language='css']
.widget {
margin-bottom:20px;
}

.widgettitle {
background:transparent url(images/sidebar-separator.png) no-repeat scroll center bottom;
color:#333;
margin-bottom:10px;
padding-bottom:5px;
position:relative;
}

.overlay {
background:transparent url(images/pattern.png) repeat scroll 0 0;
position:absolute;
height:1em;
left:0;
top:0;
width:100%;
}
[/sourcecode]

Here we are giving some breath to the widgets, and setting the newly created span elements on
top of the heading text. The effect is complete. You might want to try different patterns and colors in your
own designs.

Here are some examples:

Ok, nothing tricky anymore, let's style the rest of the sidebar:

[sourcecode language='css']
#s {
border:1px solid #999;
padding:10px;
}

#searchsubmit {
display:none;
}

#sidebar a {
color: #630;
text-decoration: underline;
}

#sidebar ul li ul li {
list-style-image:url(images/bullet.png);

}

#sidebar ul li ul {
margin-left: 20px;
}
[/sourcecode]

Let's keep the CSS at minimal styling. Here's the result:

The Footer

As is, wordpress comes with a default footer. Our PSD layout features rich content in this area. Let's completly rewrite the markup. Open «/wordpress/wp-content/themes/default/footer.php» and replace everything in div#footer element by the following HTML markup:

[sourcecode language='php']

About

Last Tweet

Elsewhere

[/sourcecode]

Apply the basic CSS for formating and positioning the floating boxes:

[sourcecode language='css']
#footer_container {
width:960px;
margin: 0 auto;
}

.footer_block {
float:left;
margin-top:10px;
min-height:230px;
width:320px;
}

.footer_block.separator {
background:transparent url(images/footer-separator.png) no-repeat scroll right top;
}

.footer_block h3 {
font-size:32px;
margin:10px;
padding:2px;
position:relative;
}
[/sourcecode]

Glance at the result:

See this Last Tweet box ? We will make use of a third party library provided by Twitter itself to display our lastest Twitter activity, however, we will need to get the Twitter Account setting from ou theme in order to query Twitter.

Due to variable scope, the newly created variables in the header won't be available in the footer, because it's two diferent functions and localy instancied variables stays local.

To resolve this issue, I could have copy/pasted the corresponding snippet from the header to the footer, thus repeating a complete portion of the code, and almost doubling it's maintenance time. Needless to says that this is a very bad pratice. Instead we have the option to either register those variables in the global namespace or to register them in the wrapping php object.

The cleaner way is always to not polute the global namespace. In our case we will add those variables in the $wp object, wich is the WordPress main object. Yet this is polution of WordPress object, but, it's a small price to pay compared to the time saved.

On to the code, open «/wordpress/wp-content/themes/default/header.php» and change the code that gets the custom options to this one:

[sourcecode language='php']
// Making options available in the current function
global $options;

foreach ($options as $value) {
if($value['id'] == '') {continue;}
/*
Stores the result of get_settings() into a variable
to avoid multiple calls to the function
*/
$current_option = get_settings($value['id']);
/* Save it in the Worpress oject to have this
information later in the script */
$wp->shinytheme[$value['id']] = ($current_option === false) ? $value['std'] : $current_option;
}
[/sourcecode]

We must also change the manner we display this information to reflect the changes:

[sourcecode language='php']
$wpst_twitter_account becomes : $wp->shinytheme['wpst_twitter_account']
[/sourcecode]

Back to the footer, add the following code in the "Last Tweet" column:

[sourcecode language='php']

And all is quiet ...

[/sourcecode]

Everything is now setup. The Last Tweet box will display a small informative text in case of failwhale or it will make a call to Twitter's server and display your last tweet.

Afterword

Worpress is such a great tool that I could go on talking about it for days. So I'll bring a consious ending to this tutorial. All I hope is that it helped you in some way. You may notice some mistakes I could have made. IF this is the case please contact me at nicolas dot crovatti at gmail dot com.

Spread the word:

Introducing twitterBatcher.com

2009-08-18T13:44:02Z

I’ve been working on a side project late weeks, let me introduce twitterBatcher.com!

I made this app to satisfy a personal need concerning Twitter. I found it was convenient to upload a bunch of text containing twitter IDs (@accounts) rather than add them manually.

It’s pretty handy on #FollowFriday to follow recommended friends of friends.

So, to solve this simple problem I made a simple app and voilà. twitterBatcher was born.

In a few words like in a few thousand: Try twitterBatcher now !

I’d also love to hear about your feedback ! Please leave comments to help me improve this twitter app!

Update : I just spawned a dedicated blog for twitterBatcher

Spread the word:

PyGame Tutorials Update

2009-08-14T08:24:31Z

So, I created a dedicated repository on github to host the source code of my PyGame Tutorials Serie

You can clone all the tutorials using the following command :

[sourcecode language='python']

git clone git://github.com/ncrovatti/Pygame-Tutorials.git

[/sourcecode]

You can also browse the complete sources and ressources from the github repository if you prefer.

Eventually you will be able to see the upcoming tutorials source code before their release.

Spread the word:

PyGame – Event Handling

2009-08-11T10:34:54Z

Introduction

To continue further into my PyGame exploration articles and tutorials, I’ll try to come up with a complete Shmup game as example. I already covered Animated sprites and Parallax Scrolling in 2D games as a start you can look at the PyGame tutorials list page to see them all.

The goal of this article is to combine what we have already learned into a single piece and add a new feature. For instance, this application will be featuring parallax background, animated sprites and we will add user inputs handling using PyGame’s events management.

Credits

As usual, I like to deserve credit where it’s due. I’d like to thank the following artists for their awesome work :

Clouds Brushes by ~JavierZhX

Fighter by ~PrinzEugn

Class evolution – The Fighter

Like Parallax class inherited from our base AnimatedSprite class in the previous article, we will create a new Fighter class (inheriting from AnimatedSprite class) and add specific members to handle it’s particular behaviors.

Let’s see some code first, I’ll go into explaining it just after.

[sourcecode language='python']
class Fighter(AnimatedSprite):
    def __init__(self, images, fps = 60):
        AnimatedSprite.__init__(self, images, fps)
        self.speed          = 600.
        self.default_speed  = self.speed
        self.location       = (100, RESOLUTION[1]/2)
        self.destination    = self.location
        self.stoping        = False
        '''
        The higher self.slowing_factor is,
        the longer it takes to stop a movement
        '''
        self.slowing_factor = 10.

        # Forward movement image - default
        self.image          = self._images[1]

    def event_handler(self, event):
      if event.type == KEYUP:
        self.stop(event.key)

      if event.type == KEYDOWN:
        self.move(pygame.key.name(event.key))  

    def update(self, t):
      # Slowing effect
      if self.stoping is True:
        self.speed -= self.speed/self.slowing_factor

      if self.stoping is False:
        self.speed = self.default_speed

    # Overriden to make use differently of the image's slices
    def move(self, direction):
      self.stoping = False
      W,H = RESOLUTION - self.image.get_size()
      x,y = self.location

      if direction == 'up':
        self.image = self._images[0]
        self.destination = Vector2(x, 0)

      elif direction == 'down':
        self.image = self._images[2]
        self.destination = Vector2(x, H)

      elif direction == 'left':
        self.destination = Vector2(0, y)

      elif direction == 'right':
        self.destination = Vector2(W, y)

    def stop(self, key):
      self.stoping = True
      W , H        = RESOLUTION - self.image.get_size()
      x , y        = self.destination
      xa, ya       = self.location
      w , h        = self.image.get_size()
      self.image   = self._images[1]

      # Stopping Y Axis Movements
      if key == K_UP:
        self.destination = Vector2(x, max(ya-h*self.slowing_factor, 0))

      if key == K_DOWN:
        self.destination = Vector2(x, min(ya+h*self.slowing_factor, H))

      # Stopping X Axis Movements
      if key == K_LEFT:
        self.destination = Vector2(max(xa-w*self.slowing_factor, 0), y)

      if key == K_RIGHT:
        self.destination = Vector2(min(xa+w*self.slowing_factor, W), y)

[/sourcecode]

New Members

stoping (boolean) is used to know at update time if we are, err, in the process of stoping our movement, wee need to be aware of this information to trigger a slowing down effect.

slowing_factor (float) determines the ship’s inertia, the higher inertia is, the longer it takes to stop a movement.

default_speed (float) is used to keep track of the original sprite’s speed and restore it when arrived to destination.

New Methods

event_handler method will make calls to appropriate method depending on the PyGame Event it received.

[sourcecode language='python']
    def event_handler(self, event):
      if event.type == KEYUP:
        self.stop(event.key)

      if event.type == KEYDOWN:
        self.move(pygame.key.name(event.key))
[/sourcecode]

The move method simply changes the destination of our fighter sprite according to the keyboards keys inputs it receives. Eventually, it also changes the fighter’s image to an inclined version of it when moving lateraly (since we are running from left to right in this game, the lateral moves are Up and Down arrows).

[sourcecode language='python']
    def move(self, direction):
      self.stoping = False
      W,H = RESOLUTION - self.image.get_size()
      x,y = self.location

      if direction == 'up':
        self.image = self._images[0]
        self.destination = Vector2(x,0)

      elif direction == 'down':
        self.image = self._images[2]
        self.destination = Vector2(x,H)

      elif direction == 'left':
        self.destination = Vector2(0,y)

      elif direction == 'right':
        self.destination = Vector2(W,y)
[/sourcecode]

The stop method stops the sprite’s movement according to keys releases and restore the default sprite image. To avoid the sprite’s getting off the screen, we need to limit the coordinates to values comprised into (RESOLUTION – sprite’s image size).

[sourcecode language='python']
    def stop(self, key):
      self.stoping = True
      W , H        = RESOLUTION - self.image.get_size()
      x , y        = self.destination
      xa, ya       = self.location
      w , h        = self.image.get_size()
      self.image   = self._images[1]

      # Stopping Y Axis Movements
      if key == K_UP:
        self.destination = Vector2(x, max(ya-h*self.slowing_factor, 0))

      if key == K_DOWN:
        self.destination = Vector2(x, min(ya+h*self.slowing_factor, H))

      # Stopping X Axis Movements
      if key == K_LEFT:
        self.destination = Vector2(max(xa-w*self.slowing_factor, 0), y)

      if key == K_RIGHT:
        self.destination = Vector2(min(xa+w*self.slowing_factor, W), y)
[/sourcecode]

Overriden Methods

The update method will be used to apply the slow down effect on movement stops.

[sourcecode language='python']
    def update(self, t):
      # Slowing effect
      if self.stoping is True:
        self.speed -= self.speed/self.slowing_factor

      if self.stoping is False:
        self.speed = self.default_speed
[/sourcecode]

Instantiating Entities

Let’s append a new instance of the Fighter class to the main loop to have it being updated, processed and rendered with other entities.

[sourcecode language='python']
...
  fghtr  = Fighter(fighter, 60)
  elements.append(fghtr)
...
[/sourcecode]

Since other objects doesn’t need to handle Events, we’ll only add the fighter’s event handling method call to the events polling loop.

[sourcecode language='python']
  for event in pygame.event.get():
    fghtr.event_handler(event)
[/sourcecode]

This way, our sprite will be able to receive input from player and it’s location, destination and image will be accordingly updated and rendered.

Source and Ressources

The PyGame application is available for download here :

: PyGame – Event Handling Demo

Dependencies:

Screenshot & Conclusion

Fighter in Action (click for full size)

That’s what’s closes this article. I hope it has been helpful in anyway to you. Provided code is not perfect at all and not optimized because like you eventually, I’m still learning ;)

In the next article I’m planning to cover Fighter’s firing abilities aka, bullet hell. Stay tuned!

class Fighter(AnimatedSprite):
def __init__(self, images, fps = 60):
AnimatedSprite.__init__(self, images, fps)
self.speed                    = 600.
self.default_speed   = self.speed
self.location            = (100, RESOLUTION[1]/2)
self.destination        = self.location
self.stoping               = False
”’
The higher self.slowing_factor is,
the longer it takes to stop a movement
”’
self.slowing_factor = 10.

# Forward movement image – default
self.image = self._images[1]

def event_handler(self, event):
if event.type == KEYUP:
pygame.event.pump()
pressed_keys = pygame.key.get_pressed()
if 1 not in pressed_keys:
self.stop(event.key)

if event.type == KEYDOWN:
self.move(pygame.key.name(event.key))

def update(self, t):
# Slowing effect
if self.stoping is True:
self.speed -= self.speed/self.slowing_factor

if self.stoping is False:
self.speed = self.default_speed

def move(self, direction):
# Overriden to make use differently of the image’s slices
self.stoping = False
W,H = RESOLUTION – self.image.get_size()
x,y = self.location

if direction == ‘up’:
self.image = self._images[0]
self.destination = Vector2(x,0)

elif direction == ‘down’:
self.image = self._images[2]
self.destination = Vector2(x,H)

elif direction == ‘left’:
self.destination = Vector2(0,y)

elif direction == ‘right’:
self.destination = Vector2(W,y)

def stop(self, key):
self.stoping = True
W,H                = RESOLUTION – self.image.get_size()
x, y                = self.destination
xa,ya            = self.location
w,h                =   self.image.get_size()
self.image    = self._images[1]

# Stopping Y Axis Movements
if key == K_UP:
self.destination = Vector2(x, max(ya-h*self.slowing_factor, 0))

if key == K_DOWN:
self.destination = Vector2(x, min(ya+h*self.slowing_factor, H))

# Stopping X Axis Movements
if key == K_LEFT:
self.destination = Vector2(max(xa-w*self.slowing_factor, 0), y)

if key == K_RIGHT:
self.destination = Vector2(min(xa+w*self.slowing_factor, W), y)

Spread the word:

PyGame – Parallax Scrolling in 2D games

2009-08-10T14:23:40Z

Hi fellow reader, to start this article let me define what Parallax Scrolling is :

Parallax scrolling is a special scrolling technique in computer graphics, seen first in the 1982 arcade game Moon Patrol. In this pseudo-3D technique, background images move by the “camera” slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion. The technique grew out of the multiplane camera technique used in traditional animation since the 1940s

I will reuse and adapt the AnimatedSprite Class from my previous article PyGame and Animated Sprites – Take 2 and create a new Class named Parallax that inherits from AnimatedSprite.

[sourcecode language='python']
class AnimatedSprite(pygame.sprite.Sprite):
    def __init__(self, images, fps = 10):
      pygame.sprite.Sprite.__init__(self)

      # Animation
      self._start       = pygame.time.get_ticks()
      self._delay       = 1000 / fps
      self._last_update = 0
      self._frame       = 0
      self._images      = images

      self.image        = self._images[self._frame]

      # Movement
      self.location     = (0,0)
      self.destination  = (0,0)
      self.heading      = None
      self.speed        = 0.

    def process(self, t):
      if self.speed > 0. and self.location != self.destination:
          destination              = self.destination - self.location
          distance                 = destination.get_length()
          self.heading             = destination.get_normalized()
          most_accurate_distance   = min(distance, t * self.speed)
          self.location           += most_accurate_distance * self.heading

    def update(self, t):
      if t - self._last_update > self._delay:
        self._frame += 1
        if self._frame >= len(self._images):
          self._frame = 0

        self.image = self._images[self._frame]
        self._last_update = t

    def render(self, screen):
      screen.blit(self.image, self.location)
[/sourcecode]

To handle movements of our parallax layers, we need to add some members to the base class. A movement is defined by the following variables :

Location, that will be continuously updated when in movement. Destination, in our case it will always be the same. Heading to face the right direction, in our case the direction will never change, finally the movement’s Speed in pixel by second.

To update all these values we need a process method that will update each element to it’s new location according to it’s speed.

For an analogy I’d say that a parallax is an image loop. To implement this loop we will override the default render method in a Parallax Class.

[sourcecode language='python']
class Parallax(AnimatedSprite):
    def __init__(self, images, fps = 30):
        AnimatedSprite.__init__(self, images, fps)

    # Overridding the default render method
    def render(self, screen):
      w,h = self.image.get_size()
      x,y = self.location
      W,H = RESOLUTION

      # Reseting original image location
      if abs(x) == w:
          self.location = Vector2(0, y)
          x = 0

      # Blitting the image loop
      if x - w < W:
        location = Vector2(x+w, y)
        screen.blit(self.image, location)

      screen.blit(self.image, self.location)
[/sourcecode]

Here is a quick schema to illustrate what is happening int the Parallax.render method :

Precisely when image A's right edge enters screen's clipping, blit another A image named A prime at location A.x + A.width.

Image Loop

When A's right edge is outside the screen clipping, reset it's location to initial position. A prime will automatically follow it.

Resetting the Loop

We are done. A image will repeat itself continuously.

Now to implement a parallax, you need at least two layers. So you'll add layers with an increased speed setting following this simple rule :

The closer an element is from the point of view, the faster it moves.

I bundled a Pygame application for you to download. My implementation is far from being perfect and I'd be interested in knowing about how you do it.

: Pygame Parallax Scrolling Demo

Dependencies:

Demo Preview:

Spread the word:

PyGame and Animated Sprites – Take 2

2009-07-23T07:06:46Z

I made a demo to better illustrate the topic covered in my previous post : PyGame and Animated Sprites

Here’s a screenshot of the application :

Animated Explosions Sprites

Download the Source code of the demo :

explosion-spritetar.tar.gz

Spread the word:

PyGame and Animated Sprites

2009-08-10T08:39:48Z

An animated sprite is a serie of the same image slightly modified and displayed at a certain framerate per second.

Explosion Sprite sampled from Remastered Tyrian Graphics @ Lost Garden

Sample 5 frames Sprite representation:

-----------------------------------------
|   1   |   2   |   3   |   4   |   5   |
| 16x16 | 16x16 | 16x16 | 16x16 | 16x16 |
|       |       |       |       |       |
-----------------------------------------

For a given framerate set to 30fps :

Frame 1 is blited at now()
Frame 2 blitted 1000/30 seconds after Frame 1
Frame 3 blitted 1000/30 seconds after Frame 2

and so on.

This gives the illusion of motion.

With PyGame you can load a set of images to an Animated Sprite Class or you can load a single image containing all your frames and slice it using PyGame’s Subsurface Method

I made an helper function to load and slice such sprites:

[sourcecode language='python']
def load_sliced_sprites(self, w, h, filename):
    '''
    Specs :
    	Master can be any height.
    	Sprites frames width must be the same width
    	Master width must be len(frames)*frame.width
    Assuming you ressources directory is named "ressources"
    '''
    images = []
    master_image = pygame.image.load(os.path.join('ressources', filename)).convert_alpha()

    master_width, master_height = master_image.get_size()
    for i in xrange(int(master_width/w)):
    	images.append(master_image.subsurface((i*w,0,w,h)))
    return images

[/sourcecode]

Use it like this :

[sourcecode language='python']
''' Asuming your frames have a 16x16 size '''
explosion_images = load_sliced_sprites(16, 16, 'explosions-sprite.png')
[/sourcecode]

explosion_images will then be an iterable list so you can use it with this kind of class courtesy of the excellent piman’s Sprites Tutorial :

[sourcecode language='python']
import pygame

class AnimatedSprite(pygame.sprite.Sprite):
    def __init__(self, images, fps = 10):
        pygame.sprite.Sprite.__init__(self)
        self._images = images

        # Track the time we started, and the time between updates.
        # Then we can figure out when we have to switch the image.
        self._start = pygame.time.get_ticks()
        self._delay = 1000 / fps
        self._last_update = 0
        self._frame = 0

        # Call update to set our first image.
        self.update(pygame.time.get_ticks())

    def update(self, t):
        # Note that this doesn't work if it's been more that self._delay
        # time between calls to update(); we only update the image once
        # then, but it really should be updated twice.

        if t - self._last_update > self._delay:
            self._frame += 1
            if self._frame >= len(self._images): self._frame = 0
            self.image = self._images[self._frame]
            self._last_update = t

[/sourcecode]

Happy Learning!

Spread the word:

Gama: Pythonic Shiny Thing

2009-07-21T13:09:23Z

Hello dear Shiny reader,

I just started learning Python a couple weeks ago. Well, I’m amazed. Pyhton’s Oriented Object Model is really flawless from my point of view. Multi-Heritance is like bottled awesomeness.

As a start project, I’m currently building a 2D RTS game/simulation named Gama using PyGame and GameObjects while following extremely good tutorials from It’s All Geek to Me, Will McGugan’s tech blog.

I learned some very interesting concept over here like : A.I. with State Machines, Pathfinding (not yet assimilated though) and Time Management I even bought Will’s book Beginning Game Development With Python and Pygame: From Novice to Professional.

Most of the game old school graphics come from the talented and generous Lost Garden

You can find the source code and ressources of the simulation on github or using this command :

git clone git://github.com/ncrovatti/Gama.git

Dependencies:

UPDATE

Here’s an in-game screenshot

Gama - In Game Screeshot showing Paths (click for full size)

Spread the word:

Multiple file upload using jQuery and Ruby on Rails Tutorial

2009-08-10T08:40:37Z

Outline

Today I’ll share with you how to solve problems relating to uploading multiple files and how to effectively use Ruby on Rails in combination with jQuery Form plugins to allow your users to upload a single file or multiple files without refreshing the page.

Since I don’t have any Windows or MacOS, the command lines shown in this tutorial
are known working on Debian linux system. I’m sure you will find your way for your specific OS!

The application will allow users to upload as many image files as they want and return the following information to them :

Relative paths to successfully uploaded files
Width and Height for each uploaded file

Prerequisites

To follow this tutorial you will need to install the Ruby on Rails framework on your system.
You will also need copies of jQuery and jQuery Form plugin.

Application & Server

You may want to skip this part if you are enabling multiple file upload for an existing Rails app.

Rails app creation from an empty directory :

[sourcecode language='shell']$ ruby rails myApplicationName[/sourcecode]

Server Spawn :

[sourcecode language='shell']$ ruby script/server[/sourcecode]

Or if you already have an application running here is how to spawn it on a different port :

[sourcecode language='shell']$ ruby script/server -p 3001[/sourcecode]

Scaffolding

First things first, model and controller Scaffolding :

[sourcecode language='shell']$ script/generate model UploadedFile
      exists  app/models/
      exists  test/unit/
      exists  test/fixtures/
      create  app/models/uploaded_file.rb
      create  test/unit/uploaded_file_test.rb
      create  test/fixtures/uploaded_files.yml
      create  db/migrate
      create  db/migrate/20090217221029_create_uploaded_files.rb[/sourcecode]

[sourcecode language='shell']$ script/generate controller Upload
      exists  app/controllers/
      exists  app/helpers/
      create  app/views/upload
      exists  test/functional/
      create  app/controllers/upload_controller.rb
      create  test/functional/upload_controller_test.rb
      create  app/helpers/upload_helper.rb[/sourcecode]

These simple “script/generate” commands generate the stub files for our application.

Application View

Let’s directly edit our view by setting up a simple HTML form and a container for our images in
app/views/upload/uploadfile.html.erb this file is not part of the Scaffolding, just go ahead and create it yourself :

[sourcecode language='html']

Multiple Files Upload Using Rails and jQuery

Files

        

        
        


Images
[/sourcecode]

The important things in the HTML are the form tag’s attributes :
the method must be "post" and the encoding type set to "multipart/form-data".
The “post” method allows unlimited size requests (compared to approximately 2000 characters maximum for the “get” method).
The multipart/form-data encoding type tells the application that we want to transfer some kind of non-ASCII or binary data.

Note that we could had achieved the very same result using the Rails Form Helper. Here are the required options for the helper :

[sourcecode language='ruby']<% form_for :upload, :html => { :multipart => true, :id => "upload_form" },
            :method => 'post',
            :url => { :action => "upload" } do |f| %>
  
<% end %>[/sourcecode]

I am assuming that you know how to include the jQuery library and Forms plugin in your default application javascript file.

Let’s move on and add the basic jQuery code to allow on-the-fly file fields creation :

[sourcecode language='javascript']// public/javascripts/application.js

$(document).ready(function() {
  $("#button").bind("click", function() {
    /* Generating unique id
    */
    var rand = Math.random().toString().split(".")[1];
    var input = ''
    $(this).before('
' + input );
  });

  /* Pushing the first input to the DOM
  */
  $("#button").trigger("click");

});[/sourcecode]

Since we will be using the DOM selector to bind functions to our user interface’s inputs,
we need to tell the browser to wait for the elements to be rendered
before executing any code contained in the ready() callback function.
This will avoid any Javascript interpreter complaint about null or non-existent
elements.

We do not want to enable the Forms plugin yet because it will be easier for us
in the developement process.

If you try to access your app now, Rails will complain about an unknown
action, we will have to edit our upload controler to insert a default action:

[sourcecode language='ruby']# app/controllers/upload_controller.rb

language UploadController < ApplicationController
  protect_from_forgery :only => [:create, :update, :destroy] 

  def index
     render :file => 'app/views/upload/uploadfile.html.erb'
  end
end[/sourcecode]

protect_from_forgery: Since we are not using the Rails Form Helper, we need to limit the use of the Authenticity Token for our controller.
The default index method displays the HTML file with our
HTML form located at app/views/upload/uploadfile.html.erb.

The index
method in Rails acts the same way as the default indexes files on web servers i.e: when
no methods are specified the index method will be executed.

At this point,you should have something very similar to this:

and you can add as many file fields as you want by clicking the “Add File” button.

Let’s get back to our code; did you spot the problem we will encounter here?

We have no way of knowing the names of the generated inputs thus making it difficult to differentiate them from other parameters
in the Ruby on Rails web service.

In order to recognize them among all the other possible parameters we will wrap them in an array. Simply modify the input variable in the javascript snippet:

[sourcecode language='javascript']// public/javascripts/application.js
var rand = Math.random().toString().split(".")[1];
var input = ''[/sourcecode]

That simple trick will allows us to use the Ruby’s each() function to loop through uploaded images.

Application Model

On to our UploadedFile model :

[sourcecode language='ruby']# app/models/uploaded_file.rb

require 'image_size.rb'

language UploadedFile < ActiveRecord::Base
  def self.save(id, upload)

    # skipping empty fields
    return false unless upload.blank?

    # The saved file name is composed of the unique id and original extension
    name =  id + "." + upload.original_filename.split(".").last 

    # target directory to save files
    directory = "public/images/users/"

    # create the file path
    path = File.join(directory, name)

    # write the file
    File.open(path, "wb") { |f| f.write(upload.read) }

    img = ImageSize.new(open(path))

    return {
      "width"     => img.get_width,
      "height"    => img.get_height,
      "filename"  => name
    }

  end
end[/sourcecode]

A point to note here. I have included the ImageSize lib. If you don’t have it installed yet proceed like this as root:

[sourcecode language='shell']# apt-get install libimage-size-ruby1.8[/sourcecode]

*or* my guess for Mac OS X and Windows (I can’t test these platforms) :

[sourcecode language='shell']# gem install imagesize[/sourcecode]

As you can see it’s pretty straight forward.

The save method takes only two arguments:

id which is our unique field name
upload which is the uploaded file reference

Application Controller

Let’s add the upload method to our UploadController controller.
This method will actually be our web service.

[sourcecode language='ruby']# app/controllers/upload_controller.rb

language UploadController < ApplicationController
  def index
     render :file => 'app/views/upload/uploadfile.html.erb'
  end

  def upload
      @post = [];

      params[:images].each { | id, image |
        result = UploadedFile.save(id, image);
        @post << result if result
      }

      respond_to do |format|
        format.html
      end
  end
end[/sourcecode]

The upload method creates an instance variable
(prefixed by @) @post to store our images data. An instance variable
differs from other variables in that it will be available to work with in our view.

Then, for each item in the params[:images] array (the one we created by
grouping all our images inputs) it will add a new entry to our
@post array.

As you can see, Ruby on Rails code is really easy to read and understand.

Routes

In order to access our newly created web service we have to create a named route.
A named route will allow us to give a name that fits our logical organisation
and to set various usage restrictions to our action.

Edit the config/routes.rb file to configure the routes :

[sourcecode language='ruby']# config/routes.rb

ActionController::Routing::Routes.draw do |map|
map.connect '/services/uploadr',
  :controller => 'upload',
  :action => 'upload',
  :conditions => {
    :method => :post
  }

  map.connect ':controller/:action/:id'
  map.connect ':controller/:action/:id.:format'
end[/sourcecode]

Ok, our upload action will now respond to the path /services/uploadr

and only for post requests.

Webservice's View

Our UploadController will need to use its corresponding view to send back its results to
the browser, just create it and insert the following snippet in it :

[sourcecode language='ruby']# app/view/upload/upload.html.erb

<% @post.each  do |image|  %>
  "/>
  

  <%= image["width"] %> x <%= image["height"] %>
  


<% end %>[/sourcecode]

This simple erb template renders all the information we planned to send back to the client with some formatting applied.

You can now test your newly created application using the form located in http://localhost:3000/upload/ if you kept the default settings.

Here's is a capture of a similar result after the form has been sent :

If images aren't showing up you may have a permission problem or a bug in your code.

Verify your RAILS_ROOT/public/images/users/ path to see if the
permissions are correct. If this does not resolve your problem please re-read
this tutorial again to ensure you did not miss a step.

The default HTML view for our upload controller is fine to preview our work so far;
but it might be hard to do anything with it with javascript.

We will now add a json format for this view. Json (JavaScript Object Notation )
is the (my) format of choice for client/server communication using XHR.
It is lightweight (lighter than XML), many server side programming and scripting
languages have JSON implementation either natively, using plugins or at least
libraries.

Finally it's native javascript language and this is an huge plus.

JSON communication

Let's implement this new format by editing our upload controller first :

[sourcecode language='ruby']# app/controllers/upload_controller.rb

language UploadController < ApplicationController
    protect_from_forgery :only => [:create, :update, :destroy] 

    def index
      render :file => 'app/views/upload/uploadfile.html.erb'
    end

    def upload
      @post = [];

      params[:images].each { | id, image |
        result = UploadedFile.save(id, image);
        @post << result if result
      }

      respond_to do |format|
        format.html
        format.js  { render :json => @post }
      end
    end

end[/sourcecode]

Implementing this new format is easy as 1,2,3 in the Rails framework, just add
this single line in our respond_to block :
format.js { render :json => @post }.
Literaly, this line of code will activate the automated json rendering of our @post

object and will send back the result with adequate HTTP headers and mime-type
to the client.

We have to modify the routes in order to point to the json format :

[sourcecode language='ruby']# config/routes.rb

ActionController::Routing::Routes.draw do |map|
  map.connect '/services/uploadr',
  	:controller => 'upload',
	  :action => 'upload',
	  :format => 'js',
	  :conditions => {
	    :method => :post
	  }

  map.connect ':controller/:action/:id'
  map.connect ':controller/:action/:id.:format'
end[/sourcecode]

Basicaly I just added the :format => 'js' parameter to our
previously created named route /services/uploadr. That's it!

You can now test your application again. Here is an example content of the generated file :

[sourcecode language='javascript'][
  {
    "filename": "38396648300918923.png",
    "height": 171,
    "width": 422
  },
  {
    "filename": "5770189283356341.png",
    "height": 165,
    "width": 549
  }
][/sourcecode]

Perfect, now if we add data into the @post object it will be
automagicaly serialized.

Front End

Now that our backend webservice is ready let's build our frontend in javascript and jQuery.

First we will activate the ajaxForm method from the Forms plugins
in our HTML form and bind a new function to our submit button.

Due to Forms plugins limitations using both files fields and JSON communication,
we will be forced to hack a bit; The JSON data will be returned wraped in <pre>
tags. Let's get rid of them and evaluate the string containing the JSON to transform
it into a JSON object.

[sourcecode language='javascript']// public/javascripts/application.js

$(document).ready(function() {
  $("#button").bind("click", function() {
    /* Generating unique id
    */
    var rand = Math.random().toString().split(".")[1];
    var input = ''
    $(this).before(input + '
');
  });

  /* Pushing the first input to the DOM
  */
  $("#button").trigger("click");

  /* Enabling Ajax form on #upload_form
  */
  $("#upload_form").ajaxForm();

  $("#upload_form").submit(function() {
    $(this).ajaxSubmit({
      dataType  : 'html',
      iframe 	  : true,
      success	  : function (data) {
        data = eval(data.replace("", "").replace("
", ""));

      }

    });

    return false;

  });

});[/sourcecode]

That done our data is ready to be processed on the client side. Let's go ahead

and add some functionality.
JSON data processing
With our new JSON object we are now able to display uploaded images to our image

container. All the code could be split up into functions or even wraped into an

object; this part depends on your project's requirements and/or on your personal coding rules.

I'll go for the inline code for this tutorial.
All the following code goes into the success callback function.
[sourcecode language='javascript']function (data) {
  files = eval(data.replace("", "").replace("
", ""));
  for(var i in files) {

    var id      = files[i].filename.split(".")[0];

    var img     = new Image();

    img.src     = "/images/users/" + files[i].filename;

    img.height  = files[i].height;

    img.width   = files[i].width;

    img.id      = "img_display_" + id
    $(".images_container").append(img);

    var $file = $("#upload_field_" + id);

    $file.next().remove();

    $file.remove();
  }
  if($("input[type*='file']").length == 0) {

    $("#button").trigger("click");

  }

}[/sourcecode]

What is this function doing ?
[sourcecode language='javascript']    var id      = files[i].filename.split(".")[0];
    var img     = new Image();
    img.src     = "/images/users/" + files[i].filename;
    img.height  = files[i].height;
    img.width   = files[i].width;
    img.id      = "img_display_" + id[/sourcecode]
Our data transformed into an object we can loop through it to display

the uploaded images. For each file a new Image object is created and it's properties filled with

what our webservice sent back.
We already know the path where we uploaded the images to, so we can complete the src attribute with the filename. Setting width and height and an id to later ease our manipulation on each image precisely.
[sourcecode language='javascript']    $(".images_container").append(img);
    var $file = $("#upload_field_" + id);
    $file.next().remove();
    $file.remove();[/sourcecode]
We are using the append() jQuery method to add the newly uploaded

file to our im ages container. We have to remove the remaining <br/>

tag next to our file field prior to delete the input itself to avoid any unwanted

blank space in our layout.
To prevent sending the same image the next time the user submit the form,

we are removing the file input.
[sourcecode language='javascript']  if($("input[type*='file']").length == 0) {
    $("#button").trigger("click");
  }[/sourcecode]
In order to keep our interface clean and usable, we are checking for remaining file fields; if none are found then we create one by triggering a simulated click on our "Add file" button.
Conclusion
This tutorial has explained how to upload multiple files using jQuery and a web service written in Ruby on rails. This application may ever be a start point for or a new component for an existing app. On top of that, the backend part could effectively be in whatever language you are comfortable with.
Credits
I couldn't safely close this tutorial without giving credits where it's due! I would like to particulary thank Mark Mcaulay and Peter Szinek for their great help, feedback and awesomeness!



Spread the word:


	
	
	
	
	
	
	
	
	




Related Posts
Enabling Dynamic Plugin Support for your JavaScript Application
8 Ajax Data Controls and Effects to Work with Tables
7 jQuery Plugins to Really Enhance Users Experience
6 Image Manipulation Plugins for jQuery You Should Know About
PSD template to Wordpress Theme from Scratch

Shiny Blog

CSS Minification on the Fly

Introduction

The PHP minifier

The Rewrite Rules

WordPress Tests

Enhancements

More Enhancements

But Wait, There is more! Cache Control

Conclusion

Update

Related Posts

PSD template to WordPress Theme from Scratch

Clean & Detailed PSD template to WordPress Theme from Scratch

Final image result

WordPress Setup

Starting from default WordPress theme

Main zones analysis

Navigation

Displaying submenus using jQuery

The content and sidebar areas

Meta data

Comments Bubble

Post image

Author box

Comments area

to “”

Comments () Participate!

Comments boxes

Comment form

Header and Subscriptions

ShinyTheme Options Page

settings

The Sidebar

', 'after_title' => '

The Footer

About

Last Tweet

Elsewhere

Afterword

Related Posts

Introducing twitterBatcher.com

Popular Posts

PyGame Tutorials Update

Related Posts

PyGame – Event Handling

Introduction

Credits

Class evolution – The Fighter

New Members

New Methods

Overriden Methods

Instantiating Entities

Source and Ressources

Screenshot & Conclusion

Related Posts

PyGame – Parallax Scrolling in 2D games

Related Posts

PyGame and Animated Sprites – Take 2

Related Posts

PyGame and Animated Sprites

Related Posts

Gama: Pythonic Shiny Thing

Related Posts

Multiple file upload using jQuery and Ruby on Rails Tutorial

Outline

Prerequisites

Application & Server

Scaffolding

Application View

Multiple Files Upload Using Rails and jQuery

Files

Images

Application Model

Application Controller

Routes

Webservice's View

JSON communication

Front End

JSON data processing

',
'after_title' => '