The problem

Take a very simple html page with three elements, like these:

<h1>A</h1>
<h1>B</h1>
<h1>C</h1>

Now assume you would like to bind the click event to all of the h1-elements on the page. To prove that something happens, I will just add a word to the contents of the h1 element when it is clicked. The code looks like this:

var elements = document.getElementsByTagName("h1");
for (var i = 0; i<elements.length; i++) {
	var el = elements[i];
	el.addEventListener("click", function() {
		el.innerHTML += ", clicked";
	}, false);
}

I thought this would work. Turns out it doesn’t. If you run it, all clicks will add the word to the last element. Even when you click the A, the word will be added to the end of the last element with a C.

You can try it out using jsFiddle here.

My mistake was assuming that a closure was made inside of my function doing the “el.innerHTML” assignment, making sure that the “el” variable was frozen it time and would always refer to the value/element I had when the code was executed. But that is not so. The rule here is that no matter where you declare a variable in JavaScript with the “var” keyword, it will always act as though it was declared at the beginning of the innermost function anyway.

As a side example, these two code sections are the same when it comes to the scope of the “str” variable.

function my() {
    for (var i = 0; i<10; i++) {
        var str = i.toString();
    }
}

function my() {
    var str;
    for (var i = 0; i<10; i++) {
        str = i.toString();
    }
}

The solution

The way to freeze the “el” variable at the time of calling addEventLister, is to explicitly create a closure. A closure is a JavaScript function. The function is the only container that will freeze a variable at the time of execution, which is what a closure is, really.

This is one way of ensuring that the code works as expected:

var elements = document.getElementsByTagName("h1");
for (var i = 0; i<elements.length; i++) {
    (function(el) {
        el.addEventListener("click", function() {
            el.innerHTML += ", clicked";
        }, false);
    })(elements[i]);
}

Notice how the call to addEventListener is now wrapped in an anonymous function, and how that anonymous function is also called in the same statement, by putting the “(elements[i])” at the end.

You can verify that the solution works at jsFiddle here.

If you like, you can also extract the closure part into a separate function, which may improve the readability of the code. One such alternative solutions would be:

function handleClick(el, func) {
    el.addEventListener("click", function(ev) { func(el); }, false);
}

var elements = document.getElementsByTagName("h1");
for (var i = 0; i<elements.length; i++) {
    handleClick(elements[i], function(el) {
        el.innerHTML += ", clicked";
    });
}

Or even slightly more generic and succinct:

function createHandler(el) { return function(ev) { el.innerHTML += ", clicked"; }; };
var elements = document.getElementsByTagName("h1");
for (var i = 0; i<elements.length; i++) {
	var el = elements[i];
	el.addEventListener("click", createHandler(el), false);
}

One difference in the last example is that the closure encloses less of the code (only the assignment of innerHTML). Also note that the function “createHandler” is return an anonymous function in itself. It could be called a “factory” since it doesn’t execute any code, but just returns created functions that will be called later.

I guess what solution you use is dependent on what you are trying to do.

The goal

This is what I want for a specific directory:

• The user can create new directories and files
• The user can delete directories and files that the user has created (and thereby is owner of)
• The user cannot write to or delete specific pre-existing protected files and directories

My practical use case was an ftp+web server where I wanted users to upload and create directories all they want, but protect a readme.txt in the root and a pre-made sample in the demo directory.

First of all, removing write permissions and thereby blocking any updates is easy. That follows what I consider normal logic. By setting myself as owner and removing write permission for others, that was no problem. However, to my surprise, the user could still delete the now write-protected file and directory!

The problem is that on Linux, if you have write permissions to the directory where the files reside (or owns the directory), you always have permission to delete anything in there, regardless of anything else. And you need to give the user write permissions to the directory in order for them to create new files and update the files they have created.

The solution

There are two things you need to do besides setting the right permissions of the actual file or directory that you want to protect. Make sure that you:

• Set the sticky bit of the directory
• Set the owner of the directory to yourself (or any other higher authority)

So let’s make a few assumptions in order to show you the commands:

• The file to protect in the directory is named “readme.txt”
• The user that should have access to the directory is named “www-data”
• I’m an administrator on the machine and my user name is “mikael”

Having changed to the directory in question, I do the following as root:

chmod 1775 .
chown mikael:www-data .
chown mikael:www-data readme.txt

Note that the “1″ in the chmod command is what sets the sticky bit.

With the user having uploaded an image and created a directory named “test”, a listing should look like this:

drwxrwxr-t 3 mikael   www-data  4096 2011-11-16 04:43 .
drwxrwxr-x 5 mikael   mikael    4096 2011-11-08 16:13 ..
-rw-r--r-- 1 www-data www-data 79383 2011-11-16 03:51 logo.jpg
-rw-r--r-- 1 mikael   www-data    15 2011-11-16 04:11 readme.txt
drwx---r-x 2 www-data www-data  4096 2011-11-15 17:55 test

This works just the way I want. The ftp server runs as user “www-data” and the users logging in can upload files and create directories all they want but they can’t delete “readme.txt”.

I was looking at installing and configure ACLs on Linux (Access Control Lists) to solve the problem, but since this works I didn’t have to do that.

Turns out I had some more learning to do regarding SSL and certificates. At first, I thought that maybe the root certificate for this GeoTrust QuickSSL simply wasn’t available on Android. The sites explaining mobile browser support are pretty vague on where they will work. However, that was not the case. It was actually not that hard to fix once I found the correct information. The online chat support at CheapSSLs pointed me in the right direction, although it took some further investigation.

The solution

Two things need to be fixed for older Android versions, like 2.1. (The first one was sufficient for my newest version of 2.3.5.)

• Add GeoTrust intermediate certificate data to the end of your web site certificate
• Add GeoTrust CA certificate data to the end of previous step

Both of these certificate’s data are plain text that can be added to the end of your current web site certificate, probably named “.pem” or “.crt”. The GeoTrust intermediate certificate data (at time of writing) is:

-----BEGIN CERTIFICATE-----
MIID+jCCAuKgAwIBAgIDAjbSMA0GCSqGSIb3DQEBBQUAMEIxCzAJBgNVBAYTAlVT
MRYwFAYDVQQKEw1HZW9UcnVzdCBJbmMuMRswGQYDVQQDExJHZW9UcnVzdCBHbG9i
YWwgQ0EwHhcNMTAwMjI2MjEzMjMxWhcNMjAwMjI1MjEzMjMxWjBhMQswCQYDVQQG
EwJVUzEWMBQGA1UEChMNR2VvVHJ1c3QgSW5jLjEdMBsGA1UECxMURG9tYWluIFZh
bGlkYXRlZCBTU0wxGzAZBgNVBAMTEkdlb1RydXN0IERWIFNTTCBDQTCCASIwDQYJ
KoZIhvcNAQEBBQADggEPADCCAQoCggEBAKa7jnrNpJxiV9RRMEJ7ixqy0ogGrTs8
KRMMMbxp+Z9alNoGuqwkBJ7O1KrESGAA+DSuoZOv3gR+zfhcIlINVlPrqZTP+3RE
60OUpJd6QFc1tqRi2tVI+Hrx7JC1Xzn+Y3JwyBKF0KUuhhNAbOtsTdJU/V8+Jh9m
cajAuIWe9fV1j9qRTonjynh0MF8VCpmnyoM6djVI0NyLGiJOhaRO+kltK3C+jgwh
w2LMpNGtFmuae8tk/426QsMmqhV4aJzs9mvIDFcN5TgH02pXA50gDkvEe4GwKhz1
SupKmEn+Als9AxSQKH6a9HjQMYRX5Uw4ekIR4vUoUQNLIBW7Ihq28BUCAwEAAaOB
2TCB1jAOBgNVHQ8BAf8EBAMCAQYwHQYDVR0OBBYEFIz02ZMKR7wAoErOS3VuoLaw
sn78MB8GA1UdIwQYMBaAFMB6mGiNifurBWQMEX2qfWW4ysxOMBIGA1UdEwEB/wQI
MAYBAf8CAQAwOgYDVR0fBDMwMTAvoC2gK4YpaHR0cDovL2NybC5nZW90cnVzdC5j
b20vY3Jscy9ndGdsb2JhbC5jcmwwNAYIKwYBBQUHAQEEKDAmMCQGCCsGAQUFBzAB
hhhodHRwOi8vb2NzcC5nZW90cnVzdC5jb20wDQYJKoZIhvcNAQEFBQADggEBADOR
NxHbQPnejLICiHevYyHBrbAN+qB4VqOC/btJXxRtyNxflNoRZnwekcW22G1PqvK/
ISh+UqKSeAhhaSH+LeyCGIT0043FiruKzF3mo7bMbq1vsw5h7onOEzRPSVX1ObuZ
lvD16lo8nBa9AlPwKg5BbuvvnvdwNs2AKnbIh+PrI7OWLOYdlF8cpOLNJDErBjgy
YWE5XIlMSB1CyWee0r9Y9/k3MbBn3Y0mNhp4GgkZPJMHcCrhfCn13mZXCxJeFu1e
vTezMGnGkqX2Gdgd+DYSuUuVlZzQzmwwpxb79k1ktl8qFJymyFWOIPllByTMOAVM
IIi0tWeUz12OYjf+xLQ=
-----END CERTIFICATE-----

The GeoTurst CA certificate data (at the time of writing) is:

-----BEGIN CERTIFICATE-----
MIIDfTCCAuagAwIBAgIDErvmMA0GCSqGSIb3DQEBBQUAME4xCzAJBgNVBAYTAlVT
MRAwDgYDVQQKEwdFcXVpZmF4MS0wKwYDVQQLEyRFcXVpZmF4IFNlY3VyZSBDZXJ0
aWZpY2F0ZSBBdXRob3JpdHkwHhcNMDIwNTIxMDQwMDAwWhcNMTgwODIxMDQwMDAw
WjBCMQswCQYDVQQGEwJVUzEWMBQGA1UEChMNR2VvVHJ1c3QgSW5jLjEbMBkGA1UE
AxMSR2VvVHJ1c3QgR2xvYmFsIENBMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIB
CgKCAQEA2swYYzD99BcjGlZ+W988bDjkcbd4kdS8odhM+KhDtgPpTSEHCIjaWC9m
OSm9BXiLnTjoBbdqfnGk5sRgprDvgOSJKA+eJdbtg/OtppHHmMlCGDUUna2YRpIu
T8rxh0PBFpVXLVDviS2Aelet8u5fa9IAjbkU+BQVNdnARqN7csiRv8lVK83Qlz6c
JmTM386DGXHKTubU1XupGc1V3sjs0l44U+VcT4wt/lAjNvxm5suOpDkZALeVAjmR
Cw7+OC7RHQWa9k0+bw8HHa8sHo9gOeL6NlMTOdReJivbPagUvTLrGAMoUgRx5asz
PeE4uwc2hGKceeoWMPRfwCvocWvk+QIDAQABo4HwMIHtMB8GA1UdIwQYMBaAFEjm
aPkr0rKV10fYIyAQTzOYkJ/UMB0GA1UdDgQWBBTAephojYn7qwVkDBF9qn1luMrM
TjAPBgNVHRMBAf8EBTADAQH/MA4GA1UdDwEB/wQEAwIBBjA6BgNVHR8EMzAxMC+g
LaArhilodHRwOi8vY3JsLmdlb3RydXN0LmNvbS9jcmxzL3NlY3VyZWNhLmNybDBO
BgNVHSAERzBFMEMGBFUdIAAwOzA5BggrBgEFBQcCARYtaHR0cHM6Ly93d3cuZ2Vv
dHJ1c3QuY29tL3Jlc291cmNlcy9yZXBvc2l0b3J5MA0GCSqGSIb3DQEBBQUAA4GB
AHbhEm5OSxYShjAGsoEIz/AIx8dxfmbuwu3UOx//8PDITtZDOLC5MH0Y0FWDomrL
NhGc6Ehmo21/uBPUR/6LWlxz/K7ZGzIZOKuXNBSqltLroxwUCEm2u+WR74M26x1W
b8ravHNjkOR/ez4iyz0H7V84dJzjA1BOoa+Y7mHyhD8S
-----END CERTIFICATE-----

(Reference)

So now your pem or crt file should have 3 certificate sections in it. You need to reload you configuration to pick up the new certificate (nginx). I’m sure this can be applied for other certificate authorities too, just with other data that you’ll have to find for yourself.

Background

Evidently, desktop browsers, can find and download the intermediate certificate by their own and so it worked there from the start. I don’t know what the status of this issue is on iOS or other devices.

If I look at the properties of my web site certificate when I visit the site in a desktop browser I can clearly see that there are two parents to my certficiate. The first one being the “intermediate” certificate. And since they don’t seem to be found any other way by Android, it need to be added to the web site certificate as per the solution above.

This tool also helped me verify what I was missing from the start: http://www.sslshopper.com/ssl-checker.html

For the GeoTrust CA certificate (the root, the parent of the intermediate certificate) it seems it was changed 2010-12-09 which I guess is the reason why it was already available on Android 2.3.5 but not on 2.1 (at least not in the emulator). However, the new CA certificate can be chained in its turn to the “Equifax Secure Certificate Authority Root CA” which IS available on older Android versions like 2.1 and therefore it will work if you just add it to the end of your other two certificates. At least, this is how I assume it can be explained.

So now I can visit my site over https and not get any warnings neither on Android 2.3.5 or Android 2.1. And more importantly, my visitors can too! Happy days.

But no SNI, so not multiple certificates with same ip

Well, not perfect still, unfortunately. On my nginx box I have managed to install multiple certificates for the same ip address. I only have one single ip address on that virtual server (for the time being anyway). It has worked fine with desktop browsers, but while investigating the issue above, I also came across information about how this actually works. And why it doesn’t work on Android until version 4.0, of which we have no devices yet (at time of writing).

This works thanks to an extension called Server Name Indication, explained here http://en.wikipedia.org/wiki/Server_Name_Indication. This makes it possible for the browser to send the server name (host name / domain name of site) before the actual protection begins. And therefore it is possible for the web server to disinguish between sites and certificates on the same server and ip.

The bad news is that SNI has been slow to be incorporated in the Android OS and is simply not available on older versions than 4.0. At least it should be included in version 4.0 now.

What will happen when an pre-4.0 Android browser connects to the server, is that the browser will always only see the first/default certificate (however you might configure it in the web server). So it will still work for one https site, but for the others the user will get a warning that the certificate doesn’t correspond to the domain name.

The solution

In the Ubuntu console window, open the following file in your editor of choice:

sudo vim /etc/default/grub

Uncomment the following line and set another resolution for it, for instance 1024×768:

GRUB_GFXMODE=1024×768

Next, write this new information for the next boot with the command:

sudo update-grub2

And then reboot to see the effect:

sudo shutdown -r 0

Background information

First of all, the way http.sys works on newer Windows versions is a very useful feature. The reason behind http.sys is to have a single system service that listens on the all-important port 80 and be a mediator to different applications and services in the system that might like to handle incoming requests on port 80 but for different urls. What an integrated Windows application does, is use a Windows API for registering its own urls and then have them directed to itself. At the same time, there can be other applications also getting incoming requests to port 80 but for different registered urls.

The problem

The problem is that some (many?) open source project that have been compiled for Windows, does not use this http.sys API. Therefore, when they start up and try to bind to port 80, they will fail since it is occupied by http.sys. And I have to admit that I have no idea how easy or hard it would be to patch such a project to make that call on Windows and get the tcp/ip network stack to work with it.

Examples of such projects are:

• Apache HTTP Server
• Nginx

(Haven’t looked at how nodejs does it.)

The solution

Some solutions I’ve found suggests disabling http.sys, but that only works if you are sure you won’t have any use for Windows applications that do know about http.sys. I didn’t want to do that.

My suggested solution is instead to tell http.sys to bind to a specific ip-address, and then use any other ip-addresses on your system for Nginx (or whatever you are looking to install). It turns out this is possible via the netsh command line configuration tool in Windows (from version 7 anyway).

So, one way would be to add an extra ip address to your network configuration. But I chose instead to use the fact that every system nowadays has both an ipv4 and an ipv6 address. My solution is to bind http.sys to the ipv6 general address (named “::”) and thereby free up the local general ipv4 address (named “127.0.0.1″) for my Nginx server.

Telling http.sys to bind to the ipv6 general address is easy. Just run the follow command from a command prompt window as Administrator:

netsh http add iplisten ipaddress=::

It seems that the name “localhost” binds to the ipv6 address, actually “::1″, so from now on you can still get the http.sys applications and services via “http://localhost”. And if you install and run Nginx on port 80 it should start fine and be available at “http://127.0.0.1″. Or you could even edit your “C:\Windows\System32\drivers\etc\hosts” file and add the line:

127.0.0.1 local

Now having “localhost” for ipv6/http.sys and “local” for ipv4/Nginx.

My situation was pretty basic and maybe typical of a beginner in Git land. I had created a single extra branch from my master branch, named after the version I was working on. “3.1″ in this case. I had like 40 commits to the “3.1″ branch and no changes/commits to the master branch. The problem was that the version 3.1 had been released several commits ago. I had forgotten how to work with branches and continued to commit changes in the 3.1 branch, even though they belonged to the next 3.2 version.

So here are a few commands I ended up running to fix this. My goal was to get the master branch up to date, remove the commits from 3.1 branch that actually belonged to the next version and create the new 3.2 branch with those commits.

Merging branches

First step was to get the master branch up to date with all changes currently made to 3.1 branch. This is easy:

• git checkout master
• git merge 3.1

Note that you first change to the branch that should be updated and then tell Git to merge in the commits from another branch, in this case named “3.1″.

Also, since I hadn’t made any commits to the master branch, the merge is also called “fast-forward” since all changes can just be copied onto the master branch.

Listing commits and find a specific date

Next question was where I actually released version 3.1 and thereby where the 3.1 branch should be “cut”. For this I did:

• git show-branch --more=20 3.1
• git checkout 3.1
• git log --pretty=”format:%ci %h %s” -20

Actually, the “git show-branch” didn’t help as much as “git log”, but I kept them both here for reference. I find that Git is sometimes a bit inconsistent, like specifying the number of commits to show as “--more=20″ in one case and “-20″ in another case.

Using “git log” and the format specifier I found the last commit that truly belonged to 3.1. I then used the short commit name from the output (code %h, 7 hex digits) for the next step.

Removing commits from a branch

Note that I already have copied all of my commits, both before and after the release of 3.1, onto the master branch. Therefore I will not remove anything important in this step. However, in other situations I am permanently removing code changes from a branch with this command so be careful when you do it yourself.

Using the commit shortname from the previous step, the removal of all commits after a specific one can be done in a single command.

• git reset --hard 08d99c4

Also note that there will be no trace of the commits now removed. This was exactly what I wanted in this case. There is the “git revert” command for other scenarios (I think) where the actual change in the commit tree itself will be logged as a commit.

Since this repository is also hosted on a private server, there was an issue with pushing these changes to that server. The now changed branch (3.1) refused to be pushed. I guess this is to stop you from destroying other peoples work in that branch. Anyway, since I knew it was ok, I forced the push like:

• git push --all --force origin

Create a new version branch from master

This step I had done before, but for completeness my last commands were:

• git checkout master
• git branch 3.2

And off I went to continue development on the 3.2 branch.

Side note: I’m not really sure what the best practice is here regarding “leaving the master branch behind” when moving on with the 3.2 branch. Of course, once I release 3.2 I’ll repeat updating master with all 3.2 changes, but during the development the master branch is left alone in my scenario. Maybe is should be moved forward too? Something to investigate for me, or for the initiated reader to add as a comment.

Lets look at a few actions that can be performed in Vim:

• d to delete
• c to change (meaning delete followed by going into insert mode)
• v to select
• y to yank (meaning copy)

Lets then look at a few movements that can be performed in Vim:

• w for next word
• j for next line (or down arrow)
• f followed by single character for next occurrence on the current line, including the character
• t followed by single character for next occurrence on the current line, excluding the character
• 0 (zero) for start of current line (or home key)
• $ for end of current line (or end key)

Now consider that every action can be combined with every movement. So for every action, you can use any movement, and perform that action on the content covered by the movement.

A few examples:

• dw to delete the next word
• vt) to select everything until the next closing parenthesis on the current line
• c0 to change everything from the start of the current line to the cursor position
• yj to copy the rest of the current line and the beginning of the next line up to the cursor position

Also, every movement can be repeated by prefixing the movement with a number, describing the movement count. Note that some movements make no sense in repeating, like the start and end of the current line (the count will not have any extra effect). A few examples:

• d3w to delete the next three words
• v2t) to select everything until the second closing parenthesis on the current line

Isn’t it beautiful? So even though the chosen keyboard shortcuts, and their combinations, might seem strange in a single case, there is order and thought to how they was constructed. And this is also what makes vim kind of fun to use. You can always find new combinations to enhance your editing, combinations you’ve not thought of before. Constant room for improving your skills.

First of all I needed a few commands for my script. They were:

chown -R username:groupname dirname
chmod -R flags dirname

Where

• dirname is the name of the destination directory
• username is the name of the owner that will own the directory
• groupname is the name of the group that will own the directory
• flags is the numerical value for the permissions of the directory
• -R specifies that the operation will occur recursively for all children of the directory

Next step was to retrieve the current values for an existing file or directory that I know I wanted to copy the permissons from. For that, I can use the stat command with a format string:

stat -c%u:%g filename
stat -c%a filename

Where

• filename is the existing file (or directory)
• -c specifices that the output of the command should include and be formatted according to the following format
• %u means the id of the user that owns the file
• %g means the id of the group that owns the file
• %a means the numerical value for the permissions of the file

Next, I needed to provide the output of the stat commands as input (or part of the input) to the chown and chmod commands. This is done with Bash using the following notation:

command $(command-with-output)

This led me to the following commands:

chown -R $(stat -c%u:%g source) destination
chmod -R $(stat -c%a source) destination

If you specify your own source and destination, these commands can be run from the Bash prompt. But I also wanted to put them inside a Bash script so I didn’t have to do all this typing. I also added some validation and came up with the following script:

#!/bin/bash
if [ -z $1 ] || ([ ! -d $1 ] && [ ! -f $1 ]); then
  echo "Not a file or directory as first argument"
  exit 0
fi
if [ -z $2 ] || [ ! -d $2 ]; then
  echo "Not a directory as second argument"
  exit 0
fi
chown -R $(stat -c%u:%g $1) $2
chmod -R $(stat -c%a $1) $2

Some things to note from the script:

• -z is true if the following variable is empty (zero length)
• -d is true if the following variable is a directory
• -f is true if the following variable is a directory
• ! negates the condition
• || means “or” and && means “and”
• The semicolon before “then” is important, but can be omitted if “then” is moved to a line of its own

This script has served me well. I hope you’ll find it useful too.

My background is primarily in Microsoft.NET and Microsoft Visual Studio, so it did feel a little different when I first entered the world of Java and Android development. But once you get past those initial hurdles, it isn’t as different as you first might have thought.

These are the steps to get started with Android development on Windows. Should work on any Windows version, but I’m using Windows 7 64-bit.

1. Download and install Java SDK.
2. Download and unzip Android SDK.
3. Run “SDK Manager” from Android SDK to download the platform versions.
4. Download and unzip Eclipse.
5. Install the Android plugin for Eclipse and point to the Android SDK.

You can read the instructions here, or watch a screencast I made describing the same procedure:

http://vimeo.com/16392228

Download and install Java SDK

You’ll find the Java SDK here:

http://www.oracle.com/technetwork/java/javase/downloads/index.html

Click the “Download JDK” button and choose the Windows version you have from the Platform combobox. You don’t have to register to download. I ended up downloading a file called “jdk-6u22-windows-x64.exe”. Run it and accept all defaults to complete the installation.

Download and unzip Android SDK

The Android SDK doesn’t have an install executable, but rather a zip file and a utility called “SDK Manager.exe”. Begin by downloading the sdk from here:

http://developer.android.com/sdk/index.html

Unzip the file to any location you want. I put it in “C:\Android\SDK”. Inside that folder, you’ll find the executable “SDK Manager.exe”. Run it. Every time you run that application, it will look for updates to anything you’ve downloaded previously with the same tool. The first time it will default to download all platform versions of Android except the Google specific ones. I’d recommend selecting Cancel at this initial update dialog, and then download what you need from “Available packages” instead.

The Android platform has been released in several versions since its initial offering of version 1.0. Every Android application will require a specific version, but will of course work on all subsequent versions too (at least in a perfect world). Today, I recommend that you target version 2.1 as the least common denominator. But note that there might still be users and phones of at least version 1.6 that might be of interest to you. Anyway, this means that I would download version 2.1 and the latest version 2.2. They don’t really take up that much disk space (maybe ~100MB per version?), so it won’t hurt you too much to download them all either.

Also, every Android platform version comes in a “Android plain vanilla” variant and a “Google APIs” variant. The only differences between those two are that “Google APIs” variant will include the ability to use Google Maps component and some other Google specific APIs that some Android devices might not support. I found this naming to be a little strange at first, but note that “Google APIs” includes everything in “Android plain vanilla” too.

The point is that if your application doesn’t need things such as Google Map component, you will be targeting more devices if you choose to develop for “Android plain vanilla”. As far as I know, all commonly sold Android phones support the Google APIs and it is only simpler media players and maybe cheap tablets that might not have chosen to support Google APIs (since I assume the manufacturer pays licensing fees to Google for that).

Run “SDK Manager” from Android SDK to download the platform versions

So, running “SDK Manager”, cancelling on the first update dialog box, you’ll move on to “Available packages”. I recommend checking the following items and then click “Install selected”: (revision numbers can of course have changed since I wrote this)

• SDK Platform Android 2.2, API 8, revision 2
• SDK Platform Android 2.1, API 7, revision 2
• Samples for SDK API 8, revision 1
• Google APIs by Google Inc., Android API 8, revision 2
• Google APIs by Google Inc., Android API 7, revision 1
• Usb Driver package, revision 3
• Market Licensing package, revision 1

You’ll need to “Accept all” licenses and then the download should start. You might get a question if it is ok to restart ADB at the end of the installation procedure, which it is!

Download and unzip Eclipse

You don’t have to use Eclipse. You could stop here and use a command line utility from the Android SDK to create project skeletons and edit the files with any text file editor. But I think you’ll enjoy the full development environment of Eclipse, even though it seems to have gotten its share of complaints over the years.

Download Eclipse from here:

http://www.eclipse.org/downloads/

The first option of “Eclipse IDE for Java Developers” is what you want, and click the link to the right depending on what Windows version you’re on. I ended up downloading “eclipse-java-helios-SR1-win32-x86_64.zip”.

Eclipse doesn’t have an install at all. Just unzip the files into any folder you like and start the environment with “eclipse.exe”.

Install the Android plugin for Eclipse and point to the Android SDK

Inside Eclipse, you need to do a few things before you can create your first Android project. When you start Eclipse, you choose your “Workspace”. Just accept the default. This is the base folder where you will put all of your projects, and can of course be changed later on.

Now, do the following:

1. Select Help menu
2. Install new software
3. Add
4. Type any Name, like “Android”
5. Paste this address in Location: https://dl-ssl.google.com/android/eclipse/
6. OK
7. After a few seconds, the list should contain “Developer Tools” and there you’ll find “Android DDMS” and “Android Development Tools”.
8. Select both and then Next
9. Continue with the download and install. You’ll be asked to restart Eclipse at the end. Do that.

Back in Eclipse with the Android plugin now installed, you also need to:

1. Select Window menu
2. Preferences
3. Android
4. Click Browse button next to “SDK Location”
5. Point to the folder where you unzipped the Android SDK previously. For me, that would be “C:\Android\SDK” (where the “SDK Manager.exe” is located)
6. OK
7. Apply
8. After a few seconds the list should fill with the Android platforms you chose to download with “SDK Manager” previously
9. OK

That’s it!

Create your first Android project

Now you should be able to create your first Android project. Still in Eclipse:

1. Select File menu
2. New
3. Project
4. Android, Android Project
5. Next
6. Project name: My first project
7. Build Target, Target Name: check any platform version you’d like to start with
8. Application name: MyFirstProject
9. Package name: com.myname.MyFirstProject
10. Create Activity: (checked) MainActivity
11. Min SDK Version: (can be left empty)
12. Next
13. Finish (no test project for your first attempt)

Now, right-click the project name in the left pane and choose “Run as” and then “1 Android Application”. The emulator should start and after some time (it IS really slow to start), you’ll be running your first Android application. If the emulator starts, but not your application, just keep the emulator running and switch back to Eclipse and execute the “Run as” command again. Sometimes it fails on the first attempt.

Inspiration

I’m a developer and not a web designer, but that doesn’t keep me from learning and experimenting with html5 and css3 stuff. The inspiration for this web application came from some really good talks at Future of Web Design in London 2010. I wasn’t there, but purchased the recorded videos which I can recommend to all interested in web design (and web developers too, obviously). The recorded quality isn’t perhaps the best, but the speakers and the content made up for that. Especially Dan Cederholm and Denise Jacobs.

I wasn’t aware of the philosophies “Progressive enhancement” and/or “Graceful degradation” previously so this was a bit of a late awakening for me. Now I see what has been brewing in the web design and browser world for a while and why Microsoft finally was pushed to comply a lot better to all things css3 with Internet Explorer 9.

Then, of course, it’s another story that html5 and css3 are not standardized yet.

Building

Building this simple web application was also a good opportunity for me to really use a JavaScript user interface library since the application is client side only. I was choosing between jQuery UI and Dijit (Dojo’s ui library) and what made to go for Dijit was the fact that the mouse scroll wheel can be used on slider controls. I thought that made a nice feature when moving shadows and testing other numbers based properties.

I have mostly looked at jQuery previously, but I will investigate Dojo even further now with the good experiences I’ve had buildning CSS3 Playground.

The best specification of all css3 properties and browser support that I’ve found is Where can I use. I used that specification and the linked samples and documentation to learn about the specifics of the css3 styles that I wanted to support in the web application.

Use

So I recommend you try it out. I hope it will be a better way to try out some color and shadow combinations than to type the css manually and use your ordinary tools and previews. It will of course be of most use to you who know css pretty well, but has not had the time to check out css3 yet.

Add more preview boxes with the  button. When changing the styles, only the last box clicked will be affected. I didn’t want to distort the preview with a visual selection effect for the current box, so besides a small transparency animation when clicking other boxes, you won’t be able to see which box is actually the current one. Remove the current box with the  button.

Below the preview, you will see two collections of styles. The left one is the one you should use (copy and paste). It contains the styles for different browsers. The right one is read live from the browser of your choice and it might be interesting to see how different browsers actually chose to store the styles, but you should not copy and paste that part in your web pages and stylesheet files.

My favorite styles that I will start to use are the easy ones such as border radius and box shadow. Considering how easy they are, the difficulty will probably be not to overuse them.

http://css3.mikeplate.com

Updates

Web application was updated to version 1.1 on august 17 with the following:

• “Add”-button for adding as many boxes as you like and change their styles independently.
• “Delete”-button for removing any extra added boxes.
• Font selection. Either type the font(s) manually, or select from a few font stacks.
• Bold and/or italic styles.
• Bug fix where changing the contents removed the resizing capability.