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

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 :

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

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.

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.

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)

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.

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

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

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).

    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)

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).

    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)

Overriden Methods

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

    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

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.

...
  fghtr  = Fighter(fighter, 60)
  elements.append(fghtr)
...

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.

  for event in pygame.event.get():
    fghtr.event_handler(event)

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:

• PyGame >= 1.7.1
• GameObjects >= 0.0.2

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!

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.

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)

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.

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)

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:

• PyGame >= 1.7.1
• GameObjects >= 0.0.2

Demo Preview:

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

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 :

1. Frame 1 is blited at now()
2. Frame 2 blitted 1000/30 seconds after Frame 1
3. 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:

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

Use it like this :

''' Asuming your frames have a 16x16 size '''
explosion_images = load_sliced_sprites(16, 16, 'explosions-sprite.png')

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 :

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

Happy Learning!

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:

• PyGame >= 1.7.1
• GameObjects >= 0.0.2

UPDATE

Here’s an in-game screenshot

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

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 :

$ ruby rails myApplicationName

Server Spawn :

$ ruby script/server

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

$ ruby script/server -p 3001

Scaffolding

First things first, model and controller Scaffolding :

$ 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

$ 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

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 :

<!- app/views/upload/uploadfile.html.erb -->

<h1>Multiple Files Upload Using Rails and jQuery</h1>

<h3>Files</h3>
<form method="post" action="/services/uploadr"
    enctype="multipart/form-data"
    class="upload" id="upload_form">
        <br/>
        <input type="button" id="button" class="button" value="Add File" />
        <input type="submit" id="save" class="save" value="Upload" />
</form>

<h3>Images</h3>
<div lang="images_container"></div>

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 :

<% form_for :upload, :html => { :multipart => true, :id => "upload_form" },
            :method => 'post',
            :url => { :action => "upload" } do |f| %>
  <!--  add fields here -->
<% end %>

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 :

// public/javascripts/application.js

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

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

});

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:

# 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

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:

// public/javascripts/application.js
var rand = Math.random().toString().split(".")[1];
var input = '<input type="file" class="images['+rand+']" />'

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 :

# 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

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

# apt-get install libimage-size-ruby1.8

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

# gem install imagesize

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.

# 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

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 :

# 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

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 :

# app/view/upload/upload.html.erb

<% @post.each  do |image|  %>
  <img src="/images/users/<%= image["filename"] %>"/>
  <br/>
  <%= image["width"] %> x <%= image["height"] %>
  <br/>

<% end %>

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 :

# 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

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 :

# 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

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 :

[
  {
    "filename": "38396648300918923.png",
    "height": 171,
    "width": 422
  },
  {
    "filename": "5770189283356341.png",
    "height": 165,
    "width": 549
  }
]

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.

// public/javascripts/application.js

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

  /* 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("<pre>", "").replace("</pre>", ""));
      }
    });
    return false;
  });
});

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.

function (data) {
  files = eval(data.replace("<pre>", "").replace("</pre>", ""));

  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");
  }
}

What is this function doing ?

    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

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.

    $(".images_container").append(img);
    var $file = $("#upload_field_" + id);
    $file.next().remove();
    $file.remove();

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.

  if($("input[type*='file']").length == 0) {
    $("#button").trigger("click");
  }

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!

Welcome dear reader. Today I’m sharing with you my experience on how to be your own web host.

Before you read any further, I’ll ask you some questions to help you to determine if  you Should.

1. Do you have any knowledge about how internet is working ? I mean technical stuff like protocols, ports or DNS or,
2. Do you want to learn how it all works ?
3. Do you have a lot of time ?
4. Do you take the risk for your site ?

If you answered Yes to all these questions then you probably should do host your own website or blog from home, else you can still continue your reading for information or share this post with a friend who expressed this idea.

Note: I will not cover every parts of how to set up your host. It’s up to you to find the specific informations for your particular hardware, OS, ISP and router combination.

In this post I’ll try to cover what I learned the hard way,  what I actually found that works better.

1. Hardware

Rule 1 – Don’t go too cheap on hardware.  If you do, you will have to use your backups and that’s time consuming and coupled with heavy downtimes.

Rule 2 – Go silent. Nothing is worse than an old, noisy, dusty PC running continuously in your living room. As a personal choice I use a netbook as my server for hosting this very blog.

At the time of this article, Netbooks with SSD storage device are the most silent PC on the market and if applicable, their look and size will please your wife. On top of that, they are wifi enabled out of the box, wich is kind of really awesome if you want to stock your server in a remote place in your house.

If you don’t mind noise and dust, or if you can’t affoard anybetter go for an old PC, with the right OS and configuration even an old PC can revive and serve at it’s best.  For old hardware nothing better than a fresh linux distribution.

Tip: If you go for a netbook or a notebook as webserver, remove the battery pack so it won’t kill its longevity.

Tip: If you go for SSD storage also go for a noatime in your /etc/fstab, this will prevent a write for every read and decrease the  read time and increase longevity.

Tip: If you go for old hardware, go linux. Linux scales better, linux runs with low ressources, linux is better at web hosting from home, linux is free, linux is here, here and here, depending on your level.

2. Software

This choice is really up to you and what you want to host; Blog ? Gallery ? Portfolio ? Personal Sandbox ? Everything is now at your reach; Without any limitation except for your will to learn.

Nettuts contains a wide variety of tutorials that I know will grately help you in this task.

Note that, the backend softwares will be often dictated by the frontend software you choose. Be wise in your choices.

3. Monitoring

Every good server is monitored.  There’s plenty of tools to monitor your server, here’s a couple that are not hard to setup :

• Tobi Oetiker’s MRTG : Easy install and setup. Enough information to know what going on on about anything from Network traffic to Harddrive temperature.
• Snort : Network Intrusion Detection System (NIDS). This tool will help you to know and prevent supicious activity on your network, remember, you will be directly serving to the internet.
• Web stats : You may want to use Google analytics free service to monitor your visitors, but you maybe also want a log parser like Webalizer of Awstats to keep track of bandwidth and untracked files like MP3, images or videos.

4. Backup Strategies

The most important thing to do when you are your own webhost is to backup your data, wait, not exactly; the MOST important thing is to be able to actually RESTORE your backuped data. It’s may sounds funny but, hey, give it a try :)

Rule 1 – Be organized.

Rule 2 – Setup cronjobs that never forgets to do their dutty.

Rule 3 – Never trust hardware. Assume it will fail.

Here an example backup strategy you can use for your own blog :

Make archives of files once a day, if you have many sites, make a single archive for each of them. The filename must be named after the site’s name + day of the week combination.

Example: blog.shinylittlething.com-wd4.tar.gz

Make an archive for each databases following the sames rules :

Example: db-dump-wd4.bz2

Tip: You can find the day of the week in unix systems using the date command :  $ date +"%u"

Once the backup script is done, make it run once a day when your traffic is very low, possibly at night and upload everything to  a remote host or on a separate Harddrive. I do prefer to send all my data to a trusted host once a day but you might find handy to store everything on a USB pen aswell to allow offline data access.

You will end with a 7 days backups rotation of all your sensitive data.  You may want to have a longer period rotation if you have large storage you may want to use the day of the month.

5. Bandwidth Issues

ADSL. What important here is the “A”. That means Asymmetric. In other terms, if something eats up all your bandwidth in any direction, the other direction will be affected. That’s why you will have to carefully watch your bandwith.

Rule 1 – Shape your bandwith for certains tasks. Traffic shaping will be useful if you are planning to send your backup archives to a remote host. There’s many tools to achieve this. I personaly use a combination of tools depending on the tasks :

• lftp command line ftp client allows you to limit your upload rate for ftp transfert.
• mod_bandwidth may be used to control bandwidth on certain virtual hosts, like the one hosting all your rss feeds, per directory, or even per host to control spiders.

Rule 2 – Use a CDN. Here’s some free Content Delivery Networks :

• CoralCDN : Entirely free. Easy to setup. Might have slow response times. Use it for videos and content images (not layout images). I setup mine to reduce a light Reddit effect from the last week, my upload bandwitdh is caped at 72kb/s and I was using 50% of it. Here is what happened when I put a simple rewrite rule to redirect all the images requests to the CoralCDN. I put this up at around midnight on saturday the 21th, the upstream traffic drasticaly downed. I even had more visits on monday and was still under the saturday’s upload rates.

• Velocix : Add this to your watch list : They have a limited free solution in closed beta, limit is 32MB per file with a 500GB tranfert  hardcap per month. Wich is more than enough for a blog I guess.
• If you use a common javascript library I urge you to use the Google’s Ajax Library API. This tools will deliverthos heavy files to your clients for you. It will make you and your clients happy because every time they will visit a site that use this technique, they will already have thos files cached on their computer.  As a downside effects, If you use the same templates on your developement servers it will be a pain to work while offline.

Rule 3 – Downsize what can be downsized.

• HTTP Compression will compress all your compressible content on the fly. That means HTML, scripts, stylesheets and even ajax requests. mod_deflate is a good choice for web servers supporting apache modules.
• Minify your javascripts

6. Have fun learning!

Thanks for reading this article fellow reader. I hope it helped you in some way!

Hi fellow reader,

I recently came through a problem while working on a javascript framework on top of jQuery.  At one point, having one big javascript file containing all the application objects becomes hard to both naviguate and maintain.

From here you want to ease your developement process by splitting your main class in small, specialized, classes stored in different files and then includes all these files using <script> tags. This is not convenient, you will have HTTP connections overhead even before your page DOM is loaded and displayed.

You could eventually make use of a server side tool like the PHP library Minify to combine, minify and cache your javascript files. Hovewer I’ll talk about a system that dynamically and on-demand loads components using jQuery’s Ajax implementation.

Simple Javascript Class

Let’s start a simple Javascript Class :

var shinyObject = function() {

};

Extending our classe  with the saySomething() method :

shinyObject.saySomething = function() {
  alert("Something");
}

Ok,  in firebug console we can now type shinyObject.saySomething();  and the revelant code will be executed.

Plugin support

Warning, the following code is for concept demonstration pupose only on should not be used in production. Please disregard security concerns, this is not the point.

Onto creating our plugin module loader for our main class. Here is the new method :

shinyObject.loadPlugin = function(options) {
  this.plugin_path = "./";

  $.ajax(
    {
      type      : "get",
      url       : shinyObject.plugin_path + options.name + ".js",
      dataType  : "text",
      success   : function(code) {
        if(typeof shinyObject[options.name] != 'object') {
          var plugin = eval(code);
          if(typeof plugin == 'object') {
            shinyObject[options.name] = plugin;
          }
          else {
            alert("Impossible to load " + options.name + " module. Please check your module code syntax.");
          }
        }
      }
    }
  )

This snippet is rather easy to understand, the loadPlugin method take a single JSON object as argument, this is convenient because we will want to add more parameters later.  The name of an existing file is passed to the ajax() jQuery method and the results of this HTTP request is passed to a callback function.

If  shinyObject do not already have an instance of this particular plugin in its register table, then we evaluate the code. If the evaluated source code is a valid javascript object, we are affecting  it to a new entry in it’s register table, otherwise,  warn the developper of possible mistake in the plugin.

Creating a Plugin

To create a plugin for our appplication let’s create a new file in shinyObject.plugin_path  named saySomethingElse.js and put the following snippet inside :

(function () {
  var a_local_variable = "local variable is local";

  return {
    saySomethingElse = function() {

      alert("Something Else Matters!")
      alert("And you can use local variables because : " + a_local_variable);

    }
  }
})();

The important thing here is the self executing function notation :

(function () {
  /* code */
})();

This notation is making the difference between a simple library and an autoexecuting piece of code that returns an object.

Loading a Plugin

Will are now adding the loadPlugin() call to our the onReady event of the page:

$(document).ready(function() {
  shinyObject.loadPlugin({'name': 'saySomethingElse'});
}); 

Once the DOM ready for action, our shinyObject will automatically load its dependencies. If the code contained in your plugin do not have to deal with the DOM at all, you can safely make this call directly from the <head> part of your html document. Call me obessional programmer if you want, but I personaly find it more convenient to have everything initialized a the same place.

Using our Plugin

Once loaded successfuly, you can access your plugin’s public methods and properties like this :

/* Simple Method call */
shinyObject.saySomethingElse.saySomethingElse();
/*
Object.ModuleName.Method();
*/

As simple as 1, 2, 3.

Conclusion

What we achieved here is rather simple but can be extremely useful in nowadays web applications, even regarding performances. Let’s say we are building a big application with hundred of plugins that may be optional widgets for our users. The solution described at the begining of this article will generate a great overhead in both bandwith and HTTP requests prior page rendering.

Benefits of our dynamic plugins:

• Fast Page rendering
• Decoupled loading using Asyncronous HTTP
• Saves a part of the Bandwidth
• Easier library management for developpers

What about you dear reader ? What are your solutions for huge javascript libraries management and plugin support ? I’m really interested to know about it !