giovedì 19 settembre 2013

How to upload WordPress Blog to New Domain or Location from localhost or Old Domain

For blogger who self-hosts the WordPress blog publishing system on a web hosting server with own registered domain name, sometimes, you may decide to reorganize the blog link URL to make it tidier or to reflect new focus or theme of the blog. If you decide to change the URL or link location of your WordPress blog due to changing of domain name (such as from http://www.old-domain.com/ to http://www.new-domain.com/) or the blog to another directory location (such as from http://www.domain.com/ to http://www.domain.com/blog/), there are some steps that should be done to ensure the proper migration and no breaking links.

The tricky part when moving WordPress blog to another location is that WordPress is using absolute path in URL link instead of relative path in URL link location when stores some parameters in database. Within blog posts’ contents itself, users may also use the old URLs when creating reference backlinks. All these values in the database will need to be changed when WordPress is moved. The following guide will show you which database fields that has references or values related to blog’s URLs that you want to modify. Note that this guide is not about how to move WordPress blog from one server or host to another new hosting service.

Once the blog has been moved (all files copy over in case of moving location or server or new domain name properly propagated across Internet for new domain name), the first thing to change is to tell WordPress the new blog location (wp-config.php should be no changes, and .htaccess file should be also no changes. If for some reason mod_rewrite rules for friendly URLs no longer works, you can always regenerate the .htaccess file via WP Administration’s Update Permalinks page).
This value can be changed via WordPress Options page, but if you no longer able to access to old blog URL, you have to modify the value via MySQL database.
Note: The guide uses SQL statements based on MySQL replace() function to modify the database. To run SQL queries, login to MySQL database that houses WordPress tables via phpMyAdmin or login to the DB server and run MySQL client as root.

To update WordPress options with the new blog location, use the following SQL command:

UPDATE wp_options SET option_value = replace(option_value, 'http://www.old-domain.com', 'http://www.new-domain.com') WHERE option_name = 'home' OR option_name = 'siteurl';

After that you will need to fix URLs of the WordPress posts and pages, which translated from post slug, and stored in database wp_posts table as guid field. The URL values in this field are stored as absolute URLs instead of relative URLs, so it needs to be changed with the following SQL query:

UPDATE wp_posts SET guid = replace(guid, 'http://www.old-domain.com','http://www.new-domain.com');

If you have linked internally within blog posts or pages with absolute URLs, these links will point to wrong locations after you move the blog location. Use the following SQL commands to fix all internal links to own blog in all WordPress posts and pages:

UPDATE wp_posts SET post_content = replace(post_content, 'http://www.old-domain.com', 'http://www.new-domain.com');

Browse through WordPress blog to check if everything is okay. You also need to re-login to WP Administration as authentication cookie has now became invalid due to different domain.

Fixing WordPress’ Plugin FTL download permissions (WordPress 3.3.1 on CentOS Linux)

Hav­ing trou­ble with Word­Press’ auto update fea­ture? Con­fronting errors like "could not copy file…"  or is Word­Press ask­ing for FTP information?


Your prob­lem is most likely server per­mis­sions. If you have shell access to your own VPS/dedicated server, use the lines below. If you’re using a shared host­ing setup, try option #4 below, or con­tact your admin­is­tra­tor for help.

Option #1: chmod 777

Sure, you could CHMOD 777 your whole site. That would tech­ni­cally work, but it’s switch­ing per­mis­sions when­ever you need to update is incon­ve­nient. And, leav­ing per­mis­sions this way leaves you open to a whole host of secu­rity issues.
chmod -R 777  (Not Secure!)

Option #2: apache file permission

This gives apache full per­mis­sions. This works, but if you use FTP, users no longer have per­mis­sions to write files. No good! I want my FTP access intact.
chown -R apache:apache  (No FTP!)

Option #3: apache /w group permissions

I cre­ated a “word­press” group and added my FTP users to it and gave the wp-content direc­tory group write per­mis­sions. It’s a bit of a com­pro­mise, but it worked for me.
groupadd wordpress
useradd -G wordpress 
chmod -R 775 /wp-content/
chown -R apache:wordpress 

Option #4: wp-config constants

Another option for those who are unable to change file per­mis­sions, and/or have a rel­a­tively new ver­sion of Word­Press, is to bypass enter­ing FTP infor­ma­tion by defin­ing your FTP info in your wp-config.php file. More infor­ma­tion can be found in the Word­Press codex.
define('FS_METHOD', 'ftpext');
define('FTP_BASE', '/path/to/wordpress/');
define('FTP_CONTENT_DIR', '/path/to/wordpress/wp-content/');
define('FTP_PLUGIN_DIR ', '/path/to/wordpress/wp-content/plugins/');
define('FTP_USER', 'username'); 
define('FTP_PASS', 'password');
define('FTP_HOST', 'ftp.example.org');

mercoledì 11 settembre 2013

Install Apache2 With PHP5 And MySQL Support On CentOS 6.2 (LAMP)

1 Preliminary Note

In this tutorial I use the hostname server1.example.com with the IP address 192.168.0.100. These settings might differ for you, so you have to replace them where appropriate.

2 Installing MySQL 5

To install MySQL, we do this:

yum install mysql mysql-server

Then we create the system startup links for MySQL (so that MySQL starts automatically whenever the system boots) and start the MySQL server:

chkconfig --levels 235 mysqld on
/etc/init.d/mysqld start

Set passwords for the MySQL root account:

mysql_secure_installation
[root@server1 ~]# mysql_secure_installation




NOTE: RUNNING ALL PARTS OF THIS SCRIPT IS RECOMMENDED FOR ALL MySQL
      SERVERS IN PRODUCTION USE!  PLEASE READ EACH STEP CAREFULLY!


In order to log into MySQL to secure it, we'll need the current
password for the root user.  If you've just installed MySQL, and
you haven't set the root password yet, the password will be blank,
so you should just press enter here.

Enter current password for root (enter for none):
OK, successfully used password, moving on...

Setting the root password ensures that nobody can log into the MySQL
root user without the proper authorisation.

Set root password? [Y/n]
 <-- nbsp="" span="">
New password: <-- nbsp="" span="" yourrootsqlpassword="">
Re-enter new password: <-- nbsp="" span="" yourrootsqlpassword="">
Password updated successfully!
Reloading privilege tables..
 ... Success!


By default, a MySQL installation has an anonymous user, allowing anyone
to log into MySQL without having to have a user account created for
them.  This is intended only for testing, and to make the installation
go a bit smoother.  You should remove them before moving into a
production environment.

Remove anonymous users? [Y/n]
 <-- nbsp="" span="">
 ... Success!

Normally, root should only be allowed to connect from 'localhost'.  This
ensures that someone cannot guess at the root password from the network.

Disallow root login remotely? [Y/n]
 <-- nbsp="" span="">
 ... Success!

By default, MySQL comes with a database named 'test' that anyone can
access.  This is also intended only for testing, and should be removed
before moving into a production environment.

Remove test database and access to it? [Y/n]
 <-- nbsp="" span="">
 - Dropping test database...
 ... Success!
 - Removing privileges on test database...
 ... Success!

Reloading the privilege tables will ensure that all changes made so far
will take effect immediately.

Reload privilege tables now? [Y/n]
 <-- nbsp="" span="">
 ... Success!

Cleaning up...

All done!  If you've completed all of the above steps, your MySQL
installation should now be secure.

Thanks for using MySQL!


[root@server1 ~]#


3 Installing Apache2

Apache2 is available as a CentOS package, therefore we can install it like this:

yum install httpd

Now configure your system to start Apache at boot time...

chkconfig --levels 235 httpd on

... and start Apache:

/etc/init.d/httpd start

Now direct your browser to http://192.168.0.100, and you should see the Apache2 placeholder page:




Apache's default document root is /var/www/html on CentOS, and the configuration file is /etc/httpd/conf/httpd.conf. Additional configurations are stored in the /etc/httpd/conf.d/ directory.

4 Installing PHP5

We can install PHP5 and the Apache PHP5 module as follows:

yum install php

We must restart Apache afterwards:

/etc/init.d/httpd restart
 

5 Testing PHP5 / Getting Details About Your PHP5 Installation

The document root of the default web site is /var/www/html. We will now create a small PHP file (info.php) in that directory and call it in a browser. The file will display lots of useful details about our PHP installation, such as the installed PHP version.

vi /var/www/html/info.php



Now we call that file in a browser (e.g. http://192.168.0.100/info.php):


As you see, PHP5 is working, and it's working through the Apache 2.0 Handler, as shown in the Server API line. If you scroll further down, you will see all modules that are already enabled in PHP5. MySQL is not listed there which means we don't have MySQL support in PHP5 yet.

6 Getting MySQL Support In PHP5

To get MySQL support in PHP, we can install the php-mysql package. It's a good idea to install some other PHP5 modules as well as you might need them for your applications. You can search for available PHP5 modules like this:

yum search php

Pick the ones you need and install them like this:

yum install php-mysql php-gd php-imap php-ldap php-mbstring php-odbc php-pear php-xml php-xmlrpc

Now restart Apache2:

/etc/init.d/httpd restart

Now reload http://192.168.0.100/info.php in your browser and scroll down to the modules section again. You should now find lots of new modules there, including the MySQL module:



7 phpMyAdmin

phpMyAdmin is a web interface through which you can manage your MySQL databases.
First we enable the RPMforge repository on our CentOS system as phpMyAdmin is not available in the official CentOS 6.2 repositories:

Import the RPMforge GPG key:

rpm --import http://dag.wieers.com/rpm/packages/RPM-GPG-KEY.dag.txt

On x86_64 systems: 

yum install http://pkgs.repoforge.org/rpmforge-release/rpmforge-release-0.5.2-2.el6.rf.x86_64.rpm

On i386 systems:

yum install http://pkgs.repoforge.org/rpmforge-release/rpmforge-release-0.5.2-2.el6.rf.i686.rpm

phpMyAdmin can now be installed as follows:

yum install phpmyadmin

Now we configure phpMyAdmin. We change the Apache configuration so that phpMyAdmin allows connections not just from localhost (by commenting out the stanza):

vi /etc/httpd/conf.d/phpmyadmin.conf

#
#  Web application to manage MySQL
#

#
#  Order Deny,Allow
#  Deny from all
#  Allow from 127.0.0.1
#

Alias /phpmyadmin /usr/share/phpmyadmin
Alias /phpMyAdmin /usr/share/phpmyadmin
Alias /mysqladmin /usr/share/phpmyadmin

Next we change the authentication in phpMyAdmin from cookie to http:
vi /usr/share/phpmyadmin/config.inc.php

[...]
/* Authentication type */
$cfg['Servers'][$i]['auth_type'] = 'http';
[...]

Restart Apache:

/etc/init.d/httpd restart 

Afterwards, you can access phpMyAdmin under http://192.168.0.100/phpmyadmin/:


martedì 3 settembre 2013

Install SugarCRM on Ubuntu

Installed required packages

• LAMP (Apache, MySQL and PHP)
• libapache2-mod-php5
• libapache2-mod-perl2
• php5-cli
• php5-common
• php5-curl
• php5-dev
• php5-gd
• php5-imap
• php5-ldap
• unzip
• php5-mhash
• php5-mysql
• php5-odbc
• curl
• libwww-perl
• imagemagick


Install all the required packages using the following commands

sudo apt-get install apache2
sudo apt-get install mysql-server
sudo apt-get install libapache2-mod-php5 libapache2-mod-perl2
sudo apt-get install php5 php5-cli php5-common php5-curl php5-dev php5-gd php5-imap php5-ldap unzip
sudo apt-get install php5-mhash php5-mysql php5-odbc curl libwww-perl imagemagick

Creating Database for SugarCRM

mysql -u root –p

Then type your MySQL password and run this command

mysql> create database sugarcrm;
mysql> exit

Installed SugarCRM

Now you need to go to your webserver document root directory (default location is /var/www) or your choice…
cd /var/www

Download SugarCRM
wget http://dl.sugarforge.org/sugarcrm/2SugarCE5.5.1GA/SugarCE5.5.1GA/SugarCE-5.5.1.zip

Now unzip file for using this command
unzip SugarCE-5.5.1.zip

Changed the folder name
sudo mv SugarCE-5.5.1.zip sugarcrm

Changed the ownership of this folder
sudo chown –Rf apacheuser:apachegroup and folder name like….
sudo chown –Rf www-data:www-data sugarcrm

Give Write permitions for apache on some of SugarCRM Files

cd /var/www/sugarcrm
sudo chmod 766 config.php
sudo chmod 766 custom
sudo chmod -R 766 data
sudo chmod -R 766 cache
sudo chmod -R 766 modules

Need for some changing to edit the php.ini file using the following command
Location of php.ini file

sudo nano /etc/php5/apache2/php.ini

Change
;memory_limit = 16M
to
memory_limit = 50M

Change
;upload_max_filesize = 2M
to
upload_max_filesize = 10M

Restart web server using the following command
sudo /etc/init.d/apache2 restart

Configure sugarCRM

Now open your webbrowser and enter the following address

http://domain-name or server-ip/sugarcrm/install.php

Please let me know in case any problem regarding this setup…..

martedì 13 agosto 2013

Configure msmtp to work with gmail on linux

Test environment
  • Mac OS X 10.6, Mutt 1.4.2.3i
  • Ubuntu 12.04 LTS, Mutt 1.5.21
Install it on Ubuntu
sudo apt-get install mutt -y

Send mail

Mail service provider settings

QQMail

Settings -> Accounts -> POP3/IMAP/SMTP/Exchange Service -> Options 
 
check 'POP3/SMTP Service'
 
Install SMTP client [msmtp] [http://msmtp.sourceforge.net]

sudo apt-get install msmtp msmtp-mta -y
sudo apt-get install msmtp ca-certificates 
 
create or update ~/.muttrc

set editor="emacs -nw "
set sendmail="/usr/sbin/sendmail"
set sendmail_wait=10
 
create or update ~/.msmtprc

defaults
tls on
tls_starttls on
tls_certcheck on
tls_trust_file /etc/ssl/certs/ca-certificates.crt
logfile /tmp/msmtp.log
account default              
host smtp.gmail.com
port 587                     
from my_account@gmail.com
auth on                     
user my_account
password secret
 
 
change configuration file's permission

chmod 600 ~/.msmtprc
 
send mail

echo 'content' | mutt -s 'subject' -- to_some_one@test.com
 
send mail with attachment

echo 'content' | mutt -s 'subject' -a /tmp/attach.zip -- to_some_one@test.com

sabato 3 agosto 2013

How to Install Oracle Java 7 update 25 on Ubuntu 12.10 Linux

Abstract

This blog entry will guide you through the step-by-step installation of Java on Ubuntu. I selected Oracle Java 7 update 25 and Ubuntu Linux 12.10 32 bit for this post.

Introduction

Installing Java on Linux follows the download-extract-configure pattern. We will begin by downloading Oracle Java from Oracle’s website, extracting the download in the appropriate folder, and finally informing Ubuntu about the newly installed version of Java.

Step 1: Verify that you do not already have the correct version of Java installed.

Open your console window and enter the following command:


java –version 

If you get the following result, you already have Java 7 update 25 installed and can ignore the rest of the steps:


java version 1.7.0_25
Java(TM) SE Runtime Environment (build 1.7.0_25-b15)
Java HotSpot(TM) Client VM (build 23.25-b01, mixed mode)

Step 2: Download Oracle Java.

New release of Java are featured on the main Java download page.
If Java 7 update 25 is no longer featured, you can find the download by following the Previous Releases link found on the main download page.
Open the Java download page in your browser and download jdk-7u25-linux-i586.bin.
Make a note of the folder to which you downloaded the file. For further reference in this blog, I will call this folder the “downloads folder”.

Step 3: Create the installation folder.

The usr/lib/jvm is the default installation location of the Java JDK. Enter the following command in your console to create this folder, if it does not already exist:
1
sudo mkdir -p /usr/lib/jvm
The –p option ensures that all folders in the mkdir path are created.

Step 4: Navigate to the “downloads folder”.

If you downloaded the file to your Home folder, you can use the following command:


cd ~/

or substitute "~/" with the path to the “downloads folder”.

Step 5: Move the downloaded archive to the installation folder.


sudo mv jdk-7u25-linux-i586.tar.gz /usr/lib/jvm

Step 6: Navigate to the “installation folder”.


cd /usr/lib/jvm

Step 7: Unpack the tarball archives.

sudo tar zxvf jdk-7u25-linux-i586.tar.gz


If you want to conserve space you may delete the tarball archives.

sudo rm jdk-7u25-linux-i586.tar.gz

Step 8: Display the contents of the installation folder.


ls -l

Response:


jdk1.7.0_25

Make a note of the newly created folder names.

Step 9: Inform Ubuntu where your Java installation is located.



sudo update-alternatives --install "/usr/bin/javac" "javac" "/usr/lib/jvm/jdk1.7.0_25/bin/javac" 1
sudo update-alternatives --install "/usr/bin/java" "java" "/usr/lib/jvm/jdk1.7.0_25/bin/java" 1

Step 10: Inform Ubuntu that this is your default Java installation.



sudo update-alternatives --set "javac" "/usr/lib/jvm/jdk1.7.0_25/bin/javac"
sudo update-alternatives --set "java" "/usr/lib/jvm/jdk1.7.0_25/bin/java"

Step 11: Update your system-wide PATH.

Edit your /etc/profile file using:


sudo nano /etc/profile

Add the following entries to the bottom of your /etc/profile file:





JAVA_HOME=/usr/lib/jvm/jdk1.7.0_25
PATH=$PATH:$JAVA_HOME/bin
export JAVA_HOME
export PATH

Save your /etc/profile file using CTRL + X.

Step 12: Reload your system-wide PATH.


. /etc/profile

Step 13: Test your new installation.


java -version

Response:

java version 1.7.0_25Java(TM) SE Runtime Environment (build 1.7.0_25-b15)Java HotSpot(TM) Client VM (build 23.25-b01, mixed mode)
 

javac -version

Response:
 

javac 1.7.0_25

Step 14: Congratulations! You have just installed Oracle Java on Ubuntu Linux!

venerdì 5 luglio 2013

WordPress Solution: Failed to connect to FTP Server localhost:21

During a recent installation of WordPress 3.3 on my local Linux (Ubuntu) box, I attempted to change the theme and was met with an error I was unfamiliar with. The installation fails and gives the error:

Failed to connect to FTP Server localhost:21


It then asks you to enter your FTP hostname, username, and password. Various resources on the web suggested I use my Ubuntu login while others said my WordPress admin account information. Neither of these worked.

As it turns out, WordPress 3.3 (and apparently earlier versions as well) installed on Ubuntu Linux require the owner:group of the wordpress directory to be www-data:www-data.

How To Fix It

  1. Open a terminal and traverse to your WordPress directory on your localhost. For me the command is: cd /home/cillosis/mysites/wordpress 
  2. Run this command: sudo chown -R www-data:www-data * 
  3. You should now be able to install themes and plugins. Enjoy!

giovedì 23 maggio 2013

Knowledge Base - Apache Optimization

The default Apache settings that cPanel sets upon install are definitely something that can be improved on. With a few small tweaks, the efficiency with which Apache runs with can be greatly improved.

Please noted: This article assumes that you are using a Linux server running Apache and cPanel or Plesk, and that you are familiar with editing files from the command line.


To start, open the Apache configuration file and finding the directives section. On a cPanel server, it will be located in /usr/local/apache/conf/. On a Plesk server, it will be in /etc/httpd/conf/. If you are using vi or vim: once you open the file, you can find the directives by scrolling through the file, or by typing forward-slash ‘/’ and typing the exact string that you are looking for (search is case specific).

[root@host /] vim /usr/local/apache/conf/httpd.conf

or

[root@host /] vim /etc/httpd/conf/httpd.conf

or

  nano /etc/apache2/apache2.conf

This list is a composite of the settings we will be reviewing from fresh install on a cPanel server:

Timeout 300
KeepAlive On
MaxKeepAliveRequests 100
KeepAliveTimeout 15
MinSpareServers 5
MaxSpareServers 10
StartServers 5
MaxClients 150
MaxRequestsPerChild 0


Please note, the settings that we will review in this article are by no means a complete list of tweakable options in the Apache configuration file. The settings we will be focusing on are the ones that control how Apache handles webpage requests.

Timeout
Timeout 300
Usually this value doesn’t require editing and a default of 300 is sufficient. Lowering the ‘Timeout’ value will cause a long running script to terminate earlier than expected.
On virtualized servers like VPS servers, lowering this value to 100 can help improve performance.


KeepAlive
KeepAlive On
This setting should be “On” unless the server is getting requests from hundreds of IPs at once.
High volume and/or load balanced servers should have this setting disabled (Off) to increase connection throughput.


MaxKeepAliveRequests
MaxKeepAliveRequests 100
This setting limits the number of requests allowed per persistent connection when KeepAlive is on. If it is set to 0, unlimited requests will be allowed.
It is recommended to keep this value at 100 for virtualized accounts like VPS accounts. On dedicated servers it is recommended that this value be modified to 150.


KeepAliveTimeout
KeepAliveTimeout 15
The number of seconds Apache will wait for another request before closing the connection. Setting this to a high value may cause performance problems in heavily loaded servers. The higher the timeout, the more server processes will be kept occupied waiting on connections with idle clients.

It is recommended that this value be lowered to 5 on all servers.


MinSpareServers
MinSpareServers 5
This directive sets the desired minimum number of idle child server processes. An idle process is one which is not handling a request. If there are fewer spareservers idle then specified by this value, then the parent process creates new children at a maximum rate of 1 per second. Setting this parameter to a large number is almost always a bad idea.
Liquidweb recommends adjusting the value for this setting to the following:

Virtualized server, ie VPS 5
Dedicated server with 1-2GB RAM 10
Dedicated server with 2-4GB RAM 20
Dedicated server with 4+ GB RAM 25

MaxSpareServers
MaxSpareServers 10
The MaxSpareServers directive sets the desired maximum number of idle child server processes. An idle process is one which is not handling a request. If there are more than MaxSpareServers idle, then the parent process will kill off the excess processes.
The MaxSpareServers value should be set as double the value that is set in MinSpareServers.


StartServers
StartServers 5
This directivesets the number of child server processes created on startup. This value should mirror what is set in MinSpareServers.


MaxClients
MaxClients 150
This directive sets the limit on the number of simultaneous requests that will be served. Any connection attempts over the specified limit will be queued. Once a process is freed at the end of a different request, the queued connection will then be served.
For virtualized servers such as VPS accounts, it is recommended to keep this value at 150. For all dedicated servers the recommended value for this setting is 250.

MaxRequestsPerChild
MaxRequestsPerChild 0
This directive sets the limit on the number of requests that an individual child server process will handle. After the number of requests reaches the value specified, the child process will die. When this value is set at 0, then the process will never expire.
Liquidweb recommends adjusting the value for this setting to the following:

Virtualized server, ie VPS 300
Dedicated server with 1-4GB RAM 500
Dedicated server with 4+GB RAM 1000

domenica 7 aprile 2013

How to use sessions on Google App Engine with Python and gae-sessions?

Google App Engine with Python does not provide built in session capabilities. This step by step walkthrough sets up a Google App Engine app using the lightweight gae-sessions utility.

1. Download gae-sessions

Download the gae-sessions code from https://github.com/dound/gae-sessions/

2. Create your app directory

Create a directory for your application. I’ll be using gaesessiontest/

3. Copy gaesessions to your app

From the gae-sessions download file, copy the gaesessions/ directory to your app directory.

4. Create your app.yaml file

Within your app directory create an app.yaml file with the contents:
application: gaesessiontest
version: 1
runtime: python
api_version: 1
 
handlers:
- url: /.*
  script: main.py

5. Create your appengine_config.py file

Within your app directory create an appengine_config.py file with the contents:
from gaesessions import SessionMiddleware
def webapp_add_wsgi_middleware(app):
    app = SessionMiddleware(app, cookie_key="You must change this")
    return app

6. Change the cookie_key

Change the cookie_key value to a secret combination of characters.

7. Create your main.py file

Within your app directory create a main.py file with the contents:
import os
 
from google.appengine.ext import webapp
from google.appengine.ext.webapp.util import run_wsgi_app
from google.appengine.ext.webapp import template
 
from gaesessions import get_current_session
 
class MainPage(webapp.RequestHandler):
    def get(self):
 
        # Get the current session        
        session = get_current_session()
 
        # Get the value of the counter,
        # defaulting to 0 if not present
        counter = session.get('counter', 0)
 
        # Increment the counter
        session['counter'] =  counter + 1 
 
        context = {
             "counter": counter 
        }
 
        path = os.path.join(os.path.dirname(__file__), 'index.html')
        self.response.out.write(template.render(path, context))
 
application = webapp.WSGIApplication(
                                     [('/', MainPage)],
                                     debug=True)
 
def main():
    run_wsgi_app(application)
 
if __name__ == "__main__":
    main()

8. Create your index.html file

Within your app directory create an index.html file with the contents:

<html lang="en">
<head>
<title>GAE Sessions</title>
</head>
<body>
Counter = {{ counter}}
</body>
</html>

9. Run your application

My GAE installation is located in /opt/google_appengine/ so I start the application with the command:
/opt/google_appengine/dev_appserver.py gaesessiontest

10. View your app

Open your browser and go to http://localhost:8080/. You should see a counter that increments each time you refresh the page.
This entry was posted in Google App Engine and tagged , , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.

Another 10 Interesting JavaScript Features

I previously posted about 10 Interesting JavaScript Features. Here’s ten more JavaScript features that I’ve recently found interesting.

1. Dynamically call object methods

Javascript objects can contain functions as object members. Object members can be referenced using square bracket [] notation. Combining these ideas together we can dynamically call object methods:

var foo = {
 one: function() { console.log("one") },
 two: function() { console.log("two") }
};
 
var ok = true;
var result = foo[ok ? "one" : "two"]();
 
console.log( result ); // Prints "one"

2. Multi line strings

You can create multi-line strings in JavaScript by terminating lines that should be continued with a backslash:

var s = "Goodbye \
cruel \
world";
 
console.log( s === "Goodbye cruel world" ); // true

3. Recursion in anonymous functions

JavaScript allows functions to be created that have no names. These are called anonymous functions. A recursive function is one that calls itself, but how does a function call itself if it has no name?
First let’s consider a small program that applies a factorial function to numbers in an array.

// Our recursive factorial function
var factorial = function(n) {
    return n<=1 ? 1 : n * factorial(n-1);
};
 
// Function that applies a function to each element of the array
var applyTo = function(array,fn) {
 var i=0, len=0;
 for (i=0, len=array.length; i<len; i++) {
  array[i] = fn( array[i] );
 }
 return array;
};
 
// Test our function
var result = applyTo( [2,4,6], factorial );
 
console.log( result ); // Prints [2, 24, 720]
 
Rather that defining the factorial function separately, we can define it inline as a parameter to the applyTo() function call.

var result = applyTo([2,4,6], 
                     function(n) {
                         return n<=1 ? 1 : n * ???WhatGoesHere???(n-1);
                     }
                 );
 
Previously, JavaScript allowed us to replace the ???WhatGoesHere??? part with arguments.callee, which was a reference to the current function.

var result = applyTo([2,4,6], 
                     function(n) {
                         return n<=1 ? 1 : n * arguments.callee(n-1);
                     }
                 );
 
This method still works in modern browsers but has been deprecated, so remember what it means but don’t use it.
The new method allows us to name our inline functions.

var result = applyTo([2,4,6], 
                     function fact(n) {
                         return n<=1 ? 1 : n * fact(n-1);
                     }
                 );

4. Short cuts with ‘or’ and ‘and’ operators

When you or together several variables in a statement, JavaScript will return first ‘truthy’ value it finds (see previous post about truthy values). This is useful when you want to use a default value if an existing variable is undefined.

// Create an empty person object with no properties
var person = {};
 
// person.firstName is undefined, so it returns 'unknown'
var name = person.firstName || 'unknown';
 
// Prints 'unknown'
console.log(name);
 
In contrast, the and operator returns the last element, but only if all of the expressions are truthy, else it returns undefined.

var o = {};
o.x = 1;
o.y = 2;
o.z = 3;
 
var n = o.x && o.y && o.z;
 
// Prints 3
console.log(n);

5. A note about ‘undefined’

It turns out that undefined is not a JavaScript keyword, instead undefined is a global variable, which in browsers is defined as window.undefined.
It is not uncommon to see code that tests if a variable is undefined like this:

if (someObject.x === undefined) {
    // do something
}
 
Which is the same as writing

if (someObject.x === window.undefined) {
    // do something
}
 
If by some chance your window.undefined variable is modified then checks for undefined like this will fail. No conscientious developer would ever do this intentionally, but it may happen by accident causing hard to find bugs, like this:

var o = {};
window[o.name] = 'unknown'; // BLAM!, window.undefined is now a string
 
A better way to test for undefined is to use the typeof operator. Typeof an undefined variable will always return the string ‘undefined’.

// Good way to test for undefined
if (typeof someObject.x === 'undefined') {
    // do something
}

6. Return statement

The return statement needs it’s value to be on the same line as the return keyword. This may cause problem depending on your coding style. For example

// This is ok
return x;
 
// This returns undefined
return
    x;
 
// This is ok
return {
    result:'success'
}
 
// This returns undefined
return
{
    result:'success'
}
 
This behaviour is due to JavaScript’s automatic semicolon insertion.

7. Length of a function

JavaScript functions have a length property that provides a count of the number of arguments the function expects.

function foo(a,b,c) {
}
 
console.log( foo.length ); // Prints 3

8. The plus operator

The plus operator can be used to easily convert anything into a number by simply prefixing the value with “+”.

console.log( +"0xFF" );  // 255
console.log( +"010" );   // 10 
console.log( +null );    // 0
console.log( +true );    // 1
console.log( +false );   // 0
 
This is actually a just a nice shortcut for using the Number() function.

9. Object property names can be any string

JavaScript object members can have any string as their name.

var o = {
    "What the!": 'a',
    "Hash": 'b',
    "*****": 'c'
};
 
for (var key in o) {
    console.log( key );
}
Which prints:
What the!
Hash
*****

10. The ‘debugger’ statement

In the past we were limited to using alert() statements to debug our JavaScript. After that we were rescued with the much more sane console.log(). Things have come a long way and we now have solid line debugging available in modern browsers.
However, there is one addition to our debugging arsenal which I’ve found particularly invaluable when debugging JavaScript in Internet Explorer; the debugger statement.
When you add the debugger statement to your code the browser will stop execution and open the debugging environment ready for you to continue stepping through your code.
This is moderately useful on Chrome, Firefox and Safari but I have found essential for debugging IE.
Note that within IE, this statement only works in IE7 and above and you need to first start the debug mode.
OK, so that’s 10 features, but just one more thing to wrap up which is not really a JavaScript feature.

JavaScript Coding Coventions

If you’re not following a JavaScript coding convention then here are a couple to get you started:
This entry was posted in JavaScript and tagged . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Should you use semicolons in JavaScript?

There has been a quite a bit of chatter recently on whether or not you should use semicolons in your JavaScript code.

JavaScript provides a feature called Automatic Semicolon Insertion (ASI). For the most part there are rarely problems in omitting semicolons, but there are a few cases where semicolons are required to prevent syntax errors or resolve code ambiguities.


A site that triggered a lot of chatter was aresemicolonsnecessaryinjavascript.com which boldly states ‘NO’. The author is really trying to explain we should not just include semicolons everywhere due a fear that our code might break in some environments or parsers (such as JavaScript minifiers). Others are also continuing the same point that we should better understand why semicolons in JavaScript are optional.

Douglas Crockford, a leading expert in JavaScript recommends using semicolons at the end of every simple statement and his ubiqitious JavaScript code quality tool, JSLint, by default expects semicolons to be inserted. A poll on Stack Overflow strongly recommends using semicolons everywhere.

Lastly, I found Armin Ronacher’s post on dealing with JavaScript’s automatic semicolon insertion to be most useful. In particular his summary where he writes:
Are Semicolons Necessary in Javascript? Despite popular belief the answer is "sometimes" and not "no". But to save yourself time and troubles, just place them all the time. Not only will it save yourself some headaches, your code will also look more consistent. Because there will be situations where a semicolon becomes necessary to resolve ambiguities.
So what will I be doing? My vote goes to following Douglas Crockford’s JavaScript coding guidelines for now and I’ll be happily including semicolons in my code.

If you are interested, there are also a couple of discussions on Reddit regarding these couple of posts; Dealing with JavaScript’s automatic semicolon insertion and Are semicolons necessary in JavaScript?.

This entry was posted in JavaScript and tagged , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.

Creating namespaces in JavaScript

In the past it was very common to see global variables in snippets of JavaScript code across the web, such as:

name = "Spock";
function greeting() {
 return "Hello " + name;
}
 
A better approach is to place all of your code within a namespace; an object that contains all of your code and helps to prevent name clashes with JavaScript code written by others.

The simplest method of creating a namespace is to use an object literal.

var foo = {};
foo.name = "Spock";
foo.greeting = function() {
 return "Hello " + foo.name;
}
 
This can also be specified using a different syntax.

var foo = {
 
 name: "Spock",
 
 greeting: function() {
  return "Hello " + foo.name;
 }
 
};
 
This approach is better that having outright global variables, but it exposes everything within the namespace as global. In other words both foo.name and foo.greeting are available everywhere.

Another problem with this approach is that greeting needs to refer to ‘foo.name’ rather than just ‘name’.

Another method of creating a namespace is through the use of a self executing function.

var foo = (function(){
 
 // Create a private variable
 var name = "Spock";
 
 // Create a private function
 var greeting = function() {
  return "Hello " + name;
 };
 
 // Return an object that exposes our greeting function publicly
 return {
  greeting: greeting
 };
 
})();
 
Here, when the function is executed it creates a private variable and a private inner function. The inner function can refer to the private variable directly. The main function then returns an object literal containing a reference to the greeting private function – this then exposes the greeting function as a public function so we can call it via the foo namespace.

console.log(foo.greeting() === "Hello Spock"); // true
 
This post was inspired by a good post from David B. Calhoun about spotting outdated JavaScript.

Preventing Hotlinking with Nginx and NodeJS

If you are running a NodeJS site via Nginx then you may be using proxy_pass to route requests from Nginx to Node.

If you’d like to also prevent hot linking then you might like to first have a read of Marcel Eichner’s post on preventing hot linking which this post is based on.

Then you can use a slightly modified version of that code which includes the proxy_pass directive in both of the location sections.

server {
    server_name yourdomain.com www.yourdomain.com;
    location ~* (\.jpg|\.png|\.gif)$ {
        valid_referers none blocked yourdomain.com www.yourdomain.com ~\.google\. ~\.yahoo\. ~\.bing\. ~\.facebook\. ~\.fbcdn\.;
        if ($invalid_referer) {
            return 403;
        }
        proxy_pass http://127.0.0.1:8123;
    }
    location / {
        proxy_pass http://127.0.0.1:8123;
    }
}
 
Some notes about this code:
In the valid_referers line, ‘blocked’ allows Referers that have been blocked by a firewall, ‘none’ allows requests with no Referer.

This is then followed by a list of domains and domain patterns that are also allowed. Google, Bing, etc are allowed for their image bots to access your site.

Decoding jQuery – domManip: DOM Manipulation

In the Decoding jQuery series, we will break down every single method in jQuery, to study the beauty of the framework, as an appreciation to the collective/creative geniuses behind it.



Inside manipulation.js within the jQuery source, there is an interesting internal method named

domManip, this is mainly used for methods like: .append(), .prepend(), .before() and .after().
domManip: function( args, table, callback ) {
  //...
}
 
Using fragment
In domManip, jQuery first checks if we are dealing with fragment node. In DOM, there are 12 different node types, and the one jQuery is checking is type 11 (Node.DOCUMENT_FRAGMENT_NODE == 11).
If we’re in a fragment, just use it, otherwise, building a new one using jQuery.buildFragment.
 
if ( jQuery.support.parentNode && parent && parent.nodeType === 11 && parent.childNodes.length === this.length ) {
    results = { fragment: parent };
} else {
    results = jQuery.buildFragment( args, this, scripts );
}
 
jQuery.buildFragment
Let’s take out jQuery.buildFragment and see what it does. The method comes with excellent explanation that talks about what each block of code does:

1. nodes may contain either an explicit document object, a jQuery collection or context object. The following checks if nodes[0] contains a valid object to assign to doc

if ( nodes && nodes[0] ) {
  doc = nodes[0].ownerDocument || nodes[0];
}
 
2. Ensure that an attr object doesn’t incorrectly stand in as a document object, Chrome and Firefox seem to allow this to occur and will throw exception
if ( !doc.createDocumentFragment ) {
  doc = document;
}
With the above check, the script will then fragment
if ( !fragment ) {
  fragment = doc.createDocumentFragment();
  jQuery.clean( args, doc, fragment, scripts );
}
 
3. To check if an element is cacheable. The method only caches “small” (1/2 KB) HTML strings that are associated with the main document. Cloning options loses the selected state, so it doesn’t cache them. IE 6 doesn’t like it when you put object or embed elements in a fragment. Also, WebKit does not clone ‘checked’ attributes on cloneNode, so it doesn’t cache them either. Lastly, IE6, 7, 8 will not correctly reuse cached fragments that were created from unknown elements.

if ( args.length === 1 && typeof first === "string" && first.length < 512 && doc === document &&
    first.charAt(0) === "<" && !rnocache.test( first ) &&
    (jQuery.support.checkClone || !rchecked.test( first )) &&
    (jQuery.support.html5Clone || !rnoshimcache.test( first )) ) {
 
    cacheable = true;
 
    cacheresults = jQuery.fragments[ first ];
    if ( cacheresults && cacheresults !== 1 ) {
      fragment = cacheresults;
    }
  }
 
The following script does the caching once it’s determined cacheable:

if ( cacheable ) {
  jQuery.fragments[ first ] = cacheresults ? fragment : 1;
}
 
Appending script
I first discovered this while inserting a script tag using jQuery and inspect the element without seeing this. This is because within the domManip, there is a check for script elements.

if ( scripts.length ) {
  jQuery.each( scripts, function( i, elem ) {
    if ( elem.src ) {
      jQuery.ajax({
        type: "GET",
        global: false,
        url: elem.src,
        async: false,
        dataType: "script"
      });
    } else {
      jQuery.globalEval( ( elem.text || elem.textContent || elem.innerHTML || "" ).replace( rcleanScript, "/*$0*/" ) );
    }
 
    if ( elem.parentNode ) {
      elem.parentNode.removeChild( elem );
    }
  });
}
 
This check does 4 things here:
1. first it detects and loop through all the script elements
2. if the script element has a src attribute, then jQuery uses jQuery ajax to load the script
3. if the script is embedded, jQuery uses jQuery.globalEval to evaluate the script
4. it removed the child from the parent element