Room Drop Flyer

This is a two-sided flyer that illustrates the problem Nolio are trying to solve. The packages move through the production line from the agile developer to the automated QA robot and then get accumulated at IT operations that can’t keep up. The backside of the flyer invites people to the Nolio booth for a chance to win a free iPad2.

Summit Feed

The summit feed is basically a minisite that contains a description of the summit and a Twitter feed from the summit.

Poster & Sign

Here are an additional poster and sign we designed. The poster for the booth has clean typography with a quote from Gartner, the poster was printed on huge 56 inch paper and placed as illustrated below.

The sign basically invites people to the booth.

Installing Subversion

Subversion allows you to manage code, collaborate and deploy versions safely, this not required but very recommended. The installation is fairly easy:

apt-get install subversion

We would also recommend using a remote repository like Beanstalk and manage your deployments better.

Installing Webmin

Webmin is a nice open source control panel for your server, very similar in function to cPanel or Plesk. The installation is pretty straight forward:

dpkg --install webmin_1.550_all.deb

The install will be done automatically to /usr/share/webmin, the administration username set to root and the password to your current root password. You should now be able to login to Webmin at the URL http://ip.address:10000/.

If you encounter dependency issues, just type in the following:

apt-get install perl libnet-ssleay-perl openssl libauthen-pam-perl libpam-runtime libio-pty-perl apt-show-versions

If you haven’t installed the dpkg package by now, just type in:

apt-get install dpkg

And then repeat the process.

ClamAV – Antivirus

Web servers are often vulnerable to attacks from viruses, trojans and worms. It important to check your server regularly and often. ClamAV is a free antivirus available for Linux. Just type the following to install ClamAV:

apt-get install clamav

To scan files:

clamscan -R /folder_name

To update virus database:

freshclam

IP Tables Firewall

IP Tables is a pretty basic firewall software that allows you block off ports. To install IP Tables, just type:

apt-get install iptables

How to use IP Tables

First, if you wish, create a whitelist (IP passes through firewall) or blacklist (packets from IP always dropped):

nano /usr/local/etc/whitelist.txt

And/Or:

nano /usr/local/etc/blacklist.txt

Add to these files IP addresses that you’d like to accept or block, one IP address per line.

Create firewall.sh Script
Then put the following in /etc/init.d/firewall.sh, and edit to fit your needs:

#!/bin/sh
#
## Quick n Dirty Firewall
#
## List Locations
#
WHITELIST=/usr/local/etc/whitelist.txt
BLACKLIST=/usr/local/etc/blacklist.txt
#
## Specify ports you wish to use.
#
ALLOWED="22 25 53 80 443 465 587 993"
#
## Specify where IP Tables is located
#
IPTABLES=/sbin/iptables
#
## Clear current rules
#
$IPTABLES -F
echo 'Clearing Tables F'
$IPTABLES -X
echo 'Clearing Tables X'
$IPTABLES -Z
echo 'Clearing Tables Z'
echo 'Allowing Localhost'
#Allow localhost.
$IPTABLES -A INPUT -t filter -s 127.0.0.1 -j ACCEPT
#
## Whitelist
#
for x in `grep -v ^# $WHITELIST | awk '{print $1}'`; do
        echo "Permitting $x..."
        $IPTABLES -A INPUT -t filter -s $x -j ACCEPT
done
#
## Blacklist
#
for x in `grep -v ^# $BLACKLIST | awk '{print $1}'`; do
        echo "Denying $x..."
        $IPTABLES -A INPUT -t filter -s $x -j DROP
done
#
## Permitted Ports
#
for port in $ALLOWED; do
        echo "Accepting port TCP $port..."
        $IPTABLES -A INPUT -t filter -p tcp --dport $port -j ACCEPT
done
for port in $ALLOWED; do
        echo "Accepting port UDP $port..."
        $IPTABLES -A INPUT -t filter -p udp --dport $port -j ACCEPT
done
$IPTABLES -A INPUT -m state --state RELATED,ESTABLISHED -j ACCEPT
$IPTABLES -A INPUT -p udp -j DROP
$IPTABLES -A INPUT -p tcp --syn -j DROP

Give the script proper permissions:

chmod 700 /etc/init.d/firewall.sh

And start your firewall:

/etc/init.d/firewall.sh

General Security and Maintenance Tips

Daily Database Backups

Use Webmin scheduled cron jobs in order to backup your DB on a daily basis:

mysqldump --opt --user=USER --password=PASSWORD --databases DBNAME --default-character-set=utf8 | gzip > /var/backups/db-`date +\%Y-\%m-\%d`.sql.gz

Just replace USER with username, PASSWORD with password and DBNAME with the database you want to backup. You can also –all-databases instead of DBNAME to backup your entire database. If your backups take too much space, you may want to consider a script to erase old backups.

Bind MySQL to Local Connections Only

Though sometimes necessary, enabling remote connections to your database is not recommended. If you do enable remote connections to your database, make sure they are made only via trusted IP addresses.

Restrict SSH Connections

SSH connections enable command line access to your server thus an insecure SSH port (22 by default) may pose a huge security risk. Here are a few pointers regarding SSH connections:

1. Disable root log-in to your server. Create another user with root privileges and use it to log-in, this way you’ll still need to enter your password before certain commands.
2. If possible, restrict SSH log-in to trusted IP addresses:

iptables -A INPUT -m state --state NEW -m tcp -p tcp --dport 22 --source [accepted ip address here] -j ACCEPT

Check For Viruses Daily

Use Webmin to setup a daily virus check on your /var/www directory with ClamAV. Also, make sure that your virus DB is updated

Install Fail2Ban

Fail2ban is a simple script that blocks users for 10 minutes after more than 5 failed log-in attempts.

apt-get install fail2ban

Summary

This concludes our setup, it’s important to mention that this process has never been tried from start to end but a reconstruction of a previous setup. So if you encounter problems, have any suggestions please leave us a comment and share your thoughts with us.

One last thing, I’d like to give a big thanks to our friends at Forrst who helped us with some great advice on the security section.

We’ve decided to write this post after a long and tedious process of installing a fully featured web server for one of our projects. This post, the first in a series of 2, will walk you through the entire process of creating a working and stable web server on Rackspace cloud servers. First, lets examine the final setup:

1. Linux Ubuntu 10.04
2. Apache2 – Web server
3. PHP5 – PHP scripting language
4. MySQL 5 – MySQL database server
5. PhpMyAdmin – Web-based database admin software
6. Postfix – MTA (Mail Transfer Agent)
7. ClamAV – Antivirus
8. Webmin – Open source server control panel
9. Subversion

Before we dive right in, let’s update the necessary packages for Debian with:

apt-get install update

Installing Apache2 + PHP5

Apache and PHP go together like pees and carrots. They are surprisingly easy to set-up, just type:

apt-get install apache2 php5 libapache2-mod-php5

After the installation is done, your web folder will be: /var/www. To check weather PHP is installed, just create a .php file in this folder with:

phpinfo();

Point your browser to your server’s IP address + file name: http://ip.address/your.filename

Enabling extra modules for PHP

Sometimes your application will require extra functions the standard PHP5 package might not have. Here are a few common and useful packages:

1. php5-gd – GD Library, useful for image manipulation
2. php5-cli – Command line PHP, useful for Cron tasks

To install either one, you can type:

apt-get install package-name

Mod Rewrite with .htaccess

Enabling mod_rewrite in Apache allows you to use clean URL’s. Use the following command to enable mod rewrite:

a2enmod rewrite

After enabling mod_rewrite, make sure Apache can use it by editing the following file:

nano /etc/apache2/sites-enabled/default

Find the AllowOverride directive and change it from None to All. After making these changes, restart Apache.

/etc/init.d/apache2 restart

Note: In order to use mod_rewrite, just upload your .htaccess and give it 644 permissions.

Installing MySQL 5 database server

MySQL is a crucial part of almost any web application. In order to install MySQL, your server must have at least 256 RAM, otherwise you may get a “cannot connect to mysql.sock” error. Let’s go ahead and install MySQL:

apt-get install mysql-server mysql-client php5-mysql

The MySQL configuration file is located at: /etc/mysql/my.cnf.

Installing PhpMyAdmin

PhpMyAdmin is web-based management software for MySQL. In order to install PhpMyAdmin just type in:

apt-get install phpmyadmin

The PhpMyAdmin configuration file is located at: /etc/phpmyadmin folder. Now restart Apache and point your browser to: http://your.ip/phpmyadmin.

Installing Postfix

Postfix is widely considered a better replacement for Sendmail. Let’s examine how to set-up Postfix only as a mail transfer agent (MTA) thus allowing your application to send mail via PHP. First, make sure your domain has valid MX records set-up as: mail.your.domain. Then, type in the following line:

apt-get install postfix

You will need to install also the mailutils package:

apt-get install mailutils

Your Postfix configuration file will be located at: /etc/postfix/main.cf. Make sure the myorigin parameter in the configuration file is set like this:

myorigin = mail.server

Check if Postfix is active.

postfix status

If not, activate it:

postfix start

Make sure port 25 is not blocked and that Postfix is listening at that port, you can use:

telnet localhost 25

Or

netstat -pant

To check general port activity. Note that sometimes after installing Postfix, your server will require a reboot before being able to send mail, especially if you’ve tried installing other MTA’s.

Installing VSFTP

Installing an FTP server will allow you to upload files more easily to you web server. VSFTP is a simple, secure and fast FTP server. Let’s examine how to install it correctly:

apt-get install vsftpd

Configuration file is located at: /etc/vsftpd.conf. Change the following settings in /etc/vsftpd.conf so that you allow local users and allow write using ftp.

local_enable=YES and write_enable=YES

Before you connect using ftp client, you will need to create local users and group. Do not upload files using root. CD to /home/ and create a symbolic link to /var/www as this is the public HTML folder.

ln -s /var/www www

Change ownership /var/www to user:

chown -R /var/www

Change to 755 permissions:

chmod -R 755 /var/www

Now you can connect to FTP and upload files. Once you upload all necessary files in the public HTML folder, make sure all the files have 755 permission as otherwise you will get permission denied/forbidden error from Apache.

End of part 1

In this post we’ve pretty much covered everything you need to do in order to get your web server going. The next post will cover how to setup your domains, development environment and general security suggestions. If you tried using this post to setup your server, let us know how it went.

The Code

The plug-in code basically uses the jQuery.load() function to load external information. Once activated the plug-in will load the link’s content to a designated modal window. This technique allows for graceful degradation and is used as best practice for loading external content. The actual modal window is actually very simple and can be designed any way you like, we avoided adding elements automatically to allow maximum flexibility.

Basic Usage

The usage is pretty straight forward, just download jquery.modal.js or jquery.modal.min.js, plug them in and follow these instructions:

The JavaScript

$('a[rel="modal"]').simplemodal();

The HTML

<a href="your-link-here.php" rel="modal">Click me</a>

The CSS

/* Loaded from the plug-in */
#simplemodal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(x.png) repeat top left; z-index: 1000; text-align: center; display: none; }
/* Loaded from the link */
#modal { position: relative; width: 680px; margin: 5% auto; background: #000; padding: 1.5em; text-align: left; }

The PHP

/**
 * $_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest'
 * This is used in case the page is accessed normally
 */
<?php if($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest'){ ?>
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Example</title>
</head>
<body>
<?php } ?>
<div id="modal">
	My modal window
</div>
<?php if($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest'){ ?>
</body>
</html>
<?php } ?>

Your turn to share

Let us know if this code has been helpful and what’s your intake on modal windows.

What is a “Parallax Effect”?

Wikipedia describes the parallax effect as “an apparent displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines”. But I refer to it as “The cool effect that you can control by moving the mouse!”.

The Code & Logic

Here is the full code:

var movementStrength = 15;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$("html").mousemove(function(e){
		  var pageX = e.pageX - ($(window).width() / 2);
		  var pageY = e.pageY - ($(window).height() / 2);
		  var newvalueX = width * pageX * -1;
		  var newvalueY = height * pageY * -1;
		  $('body').css("background-position", newvalueX+"px "+newvalueY+"px");
});

Now, I will explain each part:

var movementStrength = 15;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();

Here I create a variable called “movementStrength”. This variable determines the maximum amount of movement which I allow the designated object to move in pixels. So in this case I’ve decided to limit this object (in this case the html body tag) to 15 pixels on each side (left / right / up / down).

The parallax moves in relation to a relative space, in this case the window or the screen size. So by dividing the movementStrength value with each of the correlating height and width values I can determine how many pixels is 1 movement point.

In this case 1 movement point on a 1920×1080 resolution (on the X axis) is 0.0078125 pixels, so if you move 0.0078125 pixels 1920 times you will get a total of 15 pixels – the threshold we set.

$("html").mousemove(function(e){
	...
});

Since I want my effect to move with the mouse I will call the function that will cause the actual effect using the jQuery “mousemove” event. Now lets look on how the actual function works:

$("html").mousemove(function(e){
	var pageX = e.pageX - ($(window).width() / 2);
	var pageY = e.pageY - ($(window).height() / 2);
	var newvalueX = width * pageX * -1;
	var newvalueY = height * pageY * -1;
	$('body').css("background-position", newvalueX+"px "+newvalueY+"px");
});

Now I want to know where the mouse is, in relation to a point of focus (which in this case is the center of the screen).

var pageX = e.pageX - ($(window).width() / 2);

Here I define a variable called pageX and I fill it with the current distance of the mouse from the focus point (the window width / 2 i.e the center of the screen).

var newvalueX = width * pageX * -1;

Afterwards I the this relative value multiply it with the width movement point value (if you remember movementStrength/ScreenWidth = 1 horizontal movement point) and I multiply it with -1 so that I can create a mirror movement of the mouse instead of a following movement.

$('body').css("background-position", newvalueX+"px "+newvalueY+"px");

In the end I use the new position values to change the background position of the designated DOM element.
In this case I chose to move only the background, but I can move an entire element just as well.

This is a basic implementation of the parallax effect. To make it more interesting try implementing the effect on more then 1 element changing the movementStrength to from the closest visually to the farthest (closest gets the bigger value) and you can make a nice 3D effect.

I hope you’ve enjoyed this quick tutorial. If you did, please comment, tweet or share this tutorial with your friends!

Step 1 – Prepare the frames
Prepare your frame using image sprites, it doesn’t matter how many, just keep the image in reasonable size.

Step 2 – Place the image using CSS
Position the image, in our case it is very simple. The background is static, whereas the head is positioned absolutely on top of it.

/* main item */
#mainitem { height:420px; position:relative; background: url(../img/robo_bg.png) no-repeat top left; }
#head { height: 121px; width: 118px; position: absolute; top: 81px; left:407px; background: url(../img/robo_head.png) no-repeat top left;   }

Step 3 – Animate the sprites
Now it is time to animate the sprites using JS. Place the code at the bottom of the document.

Define a variable to start the animation and another for the time.

/** Robot Animation **/
var z = doAnimation();
var t;

Define the function that will call the animation after a specific interval, in our case 400 milliseconds. This has to be a function so the process could be repeated.

function doAnimation(){
    t = setTimeout(animateRobo, 400);
}

Define the actual animation function, in our case the frames are random but you can do it however you like to. See that after we change backgrounds we call doAnimation again so the process repeats it self.

/* Credit to VI for simplification */
function animateRobo() {
    var num = Math.floor(Math.random()*5);
    $('#head').css('background-position', '0 -' + (num * 121) + 'px');
    var x = doAnimation();
}

Step 4 – Adding a stop function (optional)
Even though not necessary, sometimes you might want to stop the animation. Just enter the following function to stop and reset the animation.

function stopAnimation(){
	clearTimeout(t);
	$("#head").css("background-position", "bottom left");
	return false;
}

Then you can add the actual event:

$("a.your-selector").hover(function(){ stopAnimation() }, function(){ doAnimation() });

Putting it all together

Here is an example of the full source code:

/** Robot Animation **/
var z = doAnimation();
var t;
function doAnimation(){
    t = setTimeout(animateRobo, 400);
}
/* Credit to VI for simplification */
function animateRobo() {
    var num = Math.floor(Math.random()*5);
    $('#head').css('background-position', '0 -' + (num * 121) + 'px');
    var x = doAnimation();
}
function stopAnimation(){
	clearTimeout(t);
	$("#head").css("background-position", "bottom left");
	return false;
}
$("a.demo").hover(function(){ stopAnimation() }, function(){ doAnimation() });

Demo

This tutorial can be viewed on Release Engineer For Hire. If you liked this tutorial or have any questions, let us know so, just post a comment below or Tweet us.

1. Write your content for people

Forget about optimizing your content for search engines, when users reach your website they need a clear message, not a programmed one.

2. Fill your meta tags

The most important meta tags are the title and description. They are what we eventually see in search results. Try to give each page a different title and keep your naming system consistent. Keep both description and title in reasonable sizes and relevant to each pages’ content.

3. Use clean URL

A standard feature most systems allow today. Try to make use of it. Keep the names short and consistent. If you must use spacing between words use a “-” instead of “_”.

4. Don’t avoid using any technology (Flash)

Saying that any technology is bad for search engines is plain bullshit. Use it if it’s needed, use it if it makes your conversion rate go up and use it if it’s the best solution around. That being said, prefer using native browser technologies for interactive elements, use Flash for movie players.

5. Use semantics in your content

Good semantics makes your code more readable for search engines. Use native HTML elements to wrap your content. It makes it more readable and better looking for search engines. When doing this, try to wrap phrases instead of words.

Good example:

<h1>Coding for search engines</h1>
<p><a href="#">Lorem ipsum vix alii constituam</a> signiferumque no, ea pri movet omnes, in his malorum sensibus. Dicunt eirmod vix cu, eruditi denique recusabo ut sit.
<strong>Commune liberavisse signiferumque</strong> ex mei, cu viderer indoctum has.</p>

Bad example:

<span class="header">Coding for search engines</span>
Lorem ipsum vix alii constituam signiferumque no, ea pri movet omnes,
in his malorum sensibus. Dicunt eirmod vix cu, eruditi denique recusabo ut sit.
Commune liberavisse signiferumque ex mei, cu viderer indoctum has.

6. Avoid using shortcuts

There are shortcuts to SEO, commonly referred to as black hat SEO. Avoid these methods and avoid the people who use them, they probably are people who look for shortcuts in life as well.

7. It’s all about fine tuning

Avoid drastic changes. Try to change each small portion at a time, measure the results and repeat the process. This way you’ll be able to keep track of what’s working and what’s not.

8. Use social networks

Use social networks like Facebook and Twitter to generate links to your website. Try to think of a creative way of doing it instead of just harvesting “likes” or picking at your friends. A good place to start is to have a noticeable “share” button on your website.

9. Validate your website’s code

Though not the most important aspect, you still want to make sure the search-bots are reading your website as its meant. When editing content it often happens that tags get displaced and create code errors. Use the W3C validation tool in order to check your website is up to standard.

10. Do a keywords research

Use Google AdWords keywords tool and Google Trends to determine which keywords are more relevant to your website and which have the largest search volume. When applicable try to use these keywords on your meta titles, description, headers and content.

11. Use online tools

Register your site to Google Webmasters Tools and Google Analytics. It will help you analyze your progress better.

12. Have a sitemap

Both for Google, commonly known as sitemap.xml and for actual users who want to see what’s going on. Update your sitemap whenever you delete or add a page, it will help you avoid broken links.

13. Have a 404 page

In short, be ready when the search-bots start clicking broken links. Provide links back to your homepage and other important pages on your website. Here’s an example of our 404 page.

14. Site performance is key

Make sure your website loads fast and I’m not talking about testing it on your lame connection at the office. Use professional tools to examine your websites’ load speed. Try to implement the suggestions as much as you can, load speed affect bounce rate directly.

15. Concentrate your efforts locally

It’s usually faster and easier to target a local audience with SEO. Use a local domain and a local language on your domain. Avoid adding other languages unless it’s absolutely necessary, if you’re audience is global use English.

16. Create your own perspective

There is a tons of information about SEO on the web. Read as much as you can to develop your own view on things. But try not to get too confused or caught up with the importance of SEO and remember that SEO is only one aspect of web marketing.

17. Know when to hire professionals

Hire professionals only if the following applies: a large portion of your target audience comes from the internet, you have fierce competition, you do not have the time to look after it yourself and you have the budget for it. Otherwise it will be a waste of your time.

18. Be patient

If you did hire professionals or started yourself, be patient – these things take time. The longer your website is out there, the better it’s recognized by search engines.

19. Further reading

If you decided to go with the “do it yourself” method, don’t be lazy, explore the subject further. A good start would be reading blogs like SEOMOZ or SEOBOOK.

What do you think?

We realize that some of what’s written here will not be acceptable by all SEO professionals. This is just our sane view, meant to help site owners and webmasters to make better informed decisions about their websites, so let us know what you think.

Important note: in order to use this module and allow credit card payments through your website you have to make sure that the correct steps have been taken:

1. You are a client of Easycard.
2. You have an SSL certificate installed on you server.

Download

Downloading is currently distributed freely under the GPL license. You can download the module by clicking here. If you would like to request a feature or send feedback please post a comment below or tweet us.