So, here is the situation. I have a text file where I want to extract a sub-match for lines that match the whole regular expression. As an example, we can take the output from mysqldump which is the sql statements to recreate a database. It can look like this:

CREATE TABLE `offercalc_fields` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `price` double NOT NULL,
  `offer_slug` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Now I’d like to match all lines that contains “CREATE TABLE” and then extract the string between ` and `. A regular expression with group matching is easy:

CREATE TABLE `(.+)`

Getting just the matching lines is easy with grep, assuming the text file is named “dump.sql”:

grep -Po 'CREATE TABLE `(.+)`' dump.sql

The grep options means:

• -P to turn on Perl-compatible regular expressions (which I always want)
• -o to specify that grep should not output the whole matching line, but only the matching part of the line

However, this still outputs too much. “CREATE TABLE” and the enclosing ` and ` characters will still be included in the output from grep. Here it would be really handy if you could specify a group match to the -o option. Like “-o1″ to output the first group match. Unfortunately this is not supported.

So how to solve this problem?

Use look-ahead and look-behind with grep

My first solution is to put everything before the group match inside a look-ahead and everything after the group match inside a look-behind. The downside is that look-ahead and look-behinds in regular expressions must be constant strings (no regular expressions inside the look-ahead/behind).

Look-ahead in regular expressions look like “(?<=Hello)” where “Hello” is the string to match. Look-behind in regular expressions look like “(?=Hello)” where “Hello” is the string to match. So the solution is:

grep -Po '(?<=CREATE TABLE `).+(?=`)' dump.sql

Now grep only prints the matching part of the line and with look-ahead/behind I’ve managed to exclude the strings before and after my target from the match.

Use substitute and print commands inside of sed

Another command that can help me is sed. Sed knows about group matches in the context of the substitute command inside of sed. Combining this with the print command in sed, I get the same result with the following command:

sed -nr 's/CREATE TABLE `(.+)`.*/\1/p' dump.sql

The regular expression is easier to write here since we are not constrained to look-ahead/behind. If you don’t know the sed command I first need to explain the following parts:

• -n option prevents the default behavior of sed to print all lines (not just matching)
• -r option turns on “extended regular expression” which means I don’t have to escape as much inside of the regular expression (roughly equivalent to the “-P” option I used for grep)
• s/ is the substitute command
• Everything after this up until the next / is the matching regular expression
• /\1/ is the substitution that replaces the match in the line
• \1 in the substitution means the first group match, which is our target here
• /p at the end tells sed to print the resulted line (after the substition), this is needed since I turned off the default output of all lines with “-n”

Note that since it is a substitution operation (and not an extract operation), I need to make sure that the regular expression matches the whole line by ending it with “.*”. Otherwise any text before or after the regular expression would still be included in the output.

That means that I’m also assuming that “CREATE TABLE” is at the beginning of the line. I could improve the command by being explicit about this using “^”:

sed -nr 's/^CREATE TABLE `(.+)`.*/\1/p' dump.sql

Conclusion

Which solution is the best depends on the original text lines. I think that grep is easier if there is a lot more before and/or after the group match that might be harder to match against in sed (since sed must match the whole line in the regular expression). But for all other cases, I think the sed solution looks a little cleaner when I don’t have to use the look-ahead/behind expressions.

Please feel free to give feedback in the comments if there are even better ways to do this in Bash with standard GNU commands.

git archive --remote git@bitbucket.org:myusername/myrepo.git HEAD file-to-retrieve.rb | tar -x

The steps are quite simple. Assuming I’m in the master branch with a few commits I’d like to rewind but keep the code that I have in a new branch.

1. Create a new branch for the current code

git branch new-experiments

2. Determine how far back I’d like to rewind master

git log

When looking at the log, find the last commit I want to keep and make a note of its hash tag. It will be used in the next step.

3. Rewind/move master back to found commit

git reset --hard ab15cd26

4. Go back to where I was by checking out the newly created branch

git checkout new-experiments

5. Also, I got an error message when I tried to push these changes to a central repository (Github) for the master branch. So I needed to force the push with:

git push --force github master

That’s it!

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.

The second day is about the mobile web development.

Wolfram Kriesing – Cross-platform mobile apps.

• From Uxebu.
• App vs widget.
• Chosen name is “Html5 Apps”. Named by PPK. Better sale with html5 in the name.
• Makers of Event Ninja.
• bit.ly/distimo-appstores
• eventninja.net/webkit/
• Feels like iPhone native.
• TouchScroll is a JavaScript and css3-based scroller.
• yourappshop.com selling web apps for mobile, just iPhone currently.
• W3C Widget contains alyout, design, ajax, config.xml, icon in a zip renamed to “.wgt” file extension.
• Using Dojo.
• No great tools.
• You can stay on your desktop as long as you need.
• Opera DragonFly can debug on the phone.
• Runtime coming to Android, N60. TV widget has appeared.
• W3C Specification, JIL Specification, BONDI.
• Vodafone offering JIL.
• JavaScript is becoming first class citizen on phones via widgets.
• Platform adaptions.
• Blackberry will switch to WebKit.
• PhoneGap filling the gap since all phones don’t support everything natively.
• PhoneGap is open source. PhoneGap+SDK is about 240 kB.
• Dojo-mobile. Have to optimize js-libs. Took apart dojo, Just what you need. dojo-webkit-mobile.js.
• bit.ly/webdev-events
• [Mentions YQL.]
• Can stay offline – no roaming charges.
• Is loving Google Calendar as a data store.
• Titanium. Custom tags, not as good. Just iPhone, Android and Blackberry.

Mikael Kindborg – The New Mobile Web – A Web of Scripted Applications

• From Dynamic.
• MoSync, tools for cross platform programs.
• Magic Words game written in Smalltalk.
• JavaScript rediscovered, similar to Lisp.
• CoffeeScript.
• Theme: What happens when you go late bound.
• Showing artist doing lego sculptures. brickartist.com. Nathan Sawaya.
• Spredsheets are actuall an example of a functional programming model.
• wpri.org doing research.
• DroidScript by Micke.
• Clamato project is Smalltalk implemented in JavaScript.
• Seaside, code browser in web browser. [Nice demo. Would be nice to do in .NET]
• DroidScript is open source. Based on Mozilla Rhino.
• No byte code generation on Android. Would be needed for subclassing.
• Typing code on desktop and sending via tcp to phote to run it. Can open urls. [Smart!]
• DragonFly editor.
• Access to native via packages.
• With Smalltalk you select some thing and run it. Considered old today.
• divineprogrammer.se.

Claes Nilsson and Thomas Bailey – The phone in the cloud

From Sony Ericsson, main sponsor.

• Claes Nilsson first. Doing device APIs.
• The phone as a service.
• Main place is W3C DAP APIs.
• All define JavaScript API.
• One approach is to use trusted control widgets, like Android, BONDI, JIL.
• Implicit user consent is other way to go.
• Just drafts. No candidates yet.
• In addition policy based.
• Google suggested REST http as API to local phone.
• [Interesting! Why not all APIs accessible by REST?]
• Powerbox another suggestion/submission by Google.
• Example, user selects images from cloud services or local gallery in phone.
• Same code in web application.
• Powerbox gives access to resources posted anywhere, including local.
• Thomas Bailey. What to do here and now. PlayNow is Sony Ericsson app store.
• PhoneGap only Android+Symbian [In Sony Ericsson products.]
• Simplifying html development with PhoneGap. Sony Ericsson WebSDK has a small ide in the browser. Not necessary with Eclipse for PhoneGap development. Proof of concept (beta).
• WARP = Web Applicaiton Runtime

Tom Hughes-Croucher – Mobile Data – How to avoid the latency trap when using web services

• From Yahoo.
• Microwaves and baby monitors fuck up wifi. Interference.
• Ofcom in UK = Swedish Post och Telestyrelsen.
• Up to 90% bandwidth used on protocol.
• 1, 6 and 11 channels for every device. All others overlap.
• Reduce sequential requests. Gzip.
• Yahoo Performenace Guidelines.
• Mike Belshe researches page load times.
• Browserscope.org
• Maximize concurrent requests with labjs.com.
• Packet research from Yahoo.
• YQL bindings to services. (Don’t like XML/RPC based Dave Winer.)
• YQL is a unified interface to web services. Self-describing. [Feels a bit like fluiddb?]
• Help bundle lots of requests into a single one.

Tom Blackmore – Handling spatial data on the web

• Formed own company Arctic Tiger. Did mapping for hitta.se. Geobased solutions.
• We can remove a lot of questions in user interfaces with knowing geolocation data.
• Your phone has better accuracy than car navigator, thanks to AGPS.
• W3C Geolocation API (the html5 name).
• navigator.geolocation, watchPosition. Don’t forget clearWatch.
• getCurrentPosition(usePos, posErr, { enableHighAccuracy” : true });
• geo.js code.google.com/p/geo-location-javascript
• Done via TurboGears in older Android.
• Lantmäteriet, cost for single internet public facing site, one purpose, one company, is 1,3 MSEK.
• Google Maps. Yahoo Geoplanet Data. OpenStreetMap (creative commons). GeoNames (good zips).
• Spatial databases, PostGIS, SpatialLite, GeoCouchDB.
• github.com/vmx/couchdb
• ST-Contains, ST-GeometryFromText
• 2 decimals in lat/long is about 1 kilometer precision.

Nikolai Onken – Human APIs, expanding the mobile web to the real world

• From Uxebo.
• Dojo committer.
• Gordon JavaScript for Flash.
• Raphael cool lib.
• blog.uxebo.com, humanapi.org
• Arduino board.

Michael Mahemoff – HTML5 gives you wings

• From ajaxpatterns and ajaxian.org.
• Just been to uxcamp Europe.
• Automatic persistance is new ux pattern.
• piratepad.
• Jolicloud.
• Cross-origin Resource Sharing (html5).
• Application Cache (html5).
• 3.ly/timer
• <html manifest=”timer.manifest”>
• Cache manifest. Fallback network.
• window.applicationCache.status, localStorage, sessionStorage tied to the domain.
• WebSQL Data. IndexedDB soon.
• JSON.stringify, JSON.parse
• localStorage strings only right now. Events.
• Same application can be opened in multiple tabs and communicate with each other.
• <a rel=”pingback”>

Henk Jurriens – Building linked data applications for the iPhone

• Data sets. DBPedia, GeoName, FADF.
• Linked data is about semantic web.
• URI. RDF. SPARQL.
• RDFa names things with URIs.
• Dublin Core. FOAF.
• data.gov. BBC.
• Drupal and WordPress uses linked data. Also Facebook.
• jQTouch.js, iProcessing.js, Lodsy.

Tim Caswell – Node.js powered mobile apps for end-to-end JavaScript development

• Ryan is creator of Node.js.
• Creator of node framework Connect.
• Built-in filter modules. Data providers.
• Single stack model.

A bit shorter in the wrap-up of the conference, but a good two days.

The first day is about the front-end and back-end of web development.

Robert Nyman – HTML5

Overview of HTML5 with a slight focus to the actual HTML and not so much all the new apis.

• In 200 the WhatWG group was formed from Mozilla, Opera and Apple out of dissatisfaction with the W3C work on next HTML. Now Google is also a member of WhatWG.
• HTML5 is about semantics, accessibility and apis.
• <!DOCTYPE html> Note that there is no version in doctype declaration.
• HTML5 isn’t necessarily XHTML. HTML5 interprets the html in a friendly mannor.
• For XHTML no doctype is needed. Must have correct contenttype from server.
• Many new input types: color, week range, search. Default to text if type is unknown/unimplemented by browser.
• <meta charset=”utf-8″>
• <header role=”banner”> Headers can occur multiple times in the page (for sections within the page).
• Role attribute can be used by screen readers.
• <nav role=”navigation”> Encloses the primary navigation structure of the site.
• <article> <section> <header> <hgroup> <h2>title</h2>
• An article element’s content should make sense outside the page context.
• <aside role=”complimentary”>, <footer>
• Problem with ajax and accessibility. aria-attributes. aria-live. aria-relevant. WAI-ARIA Live Regions.
• Video. “Without Flash we wouldn’t have youtube”, “Things can actually coexist”, “Not everything has to kill something”
• video element can follow with several source elements for different codecs. First one supported will be used by browser. object-element fallback can also be used for Flash etc.
• WebM project made everyone happy. Will get hardware acceleration. Matters how content providers will support WebM. “Is optimistic about WebM”. Kaltura and more.
• Canvas. getContent(“2d”). A “3d” context is also coming. shadowBlur. rotate.
• explorercanvas by Emil is canvas for MSIE, translates canvas to VML. Now hired by Google.
• Mozilla Bespin is text editor on the web with syntax highlighting.
• Geolocation sort of bundled but not part of official specifikation.
• Watch dot box on Google Maps if your browser (Firefox) supports geolocation.
• Cross document messaging.
• Drag’n drop. Reverse engineered from old MSIE. Not liked. May change.
• Nice that HTML5 is here today. Google.com uses HTML5. Hired the guy working on the specification.
• Sjoerd Visscher, html5 shiv(?). IE8 does not recognize new elements like article as css styleable. But if the page calls document.createElement for the element name, it does! The return value of createElement can be thrown away.
• IE9 looks much better. Nice stuff.

Stefan Pettersson – Developing Large-Scale JavaScript Web Sites

Not so technical/concret, but still a good overview of some things to think about for web sites with heavy loads (and I would think, even good for small sites).

• Worked with Netlight, Aftonbladet. Did the map for http://www.hitta.se.
• Getting questions from customers wanting to “do it like Google does”. Sites with lots of traffic, much content, much functionality, complex mess.
• Read books by Steve Souders on JavaScript performance (by O’Reilly).
• Establish an architecture. Best practices. A way to work.
• New job type “front-end engineer” in the middle.
• Load scripts on demand.
• Load scripts after rendering.
• Cache renewal, append build number to url.
• XHR or JSONP? Go JSONP. For cross-site-scripting solutions.
• Go with REST.
• Use YUI3 for dependencies, module loading. Has sandbox.
• Static content servers like LiteHttp. Cookieless. Cache friendly headers. Gzip.
• Don’t put onclick in tags, attach event by jquery or other framework.
• Progressive enhancements.
• Pixelperfect in all browsers? Drop it! Too muc work. Sample with pin “bubble” for hitta.se.
• Avoid putting things in global namespace.
• Module pattern. Simulating missing private/public distinction in JavaScript.
• Know the client. Embrace the client. Peer code reviews.
• Build and deploy: Aggregate. Minify. (Preprocessor.) Automation.
• Now working for Expansive Worlds.

Alexander Lang – Designing domain models with document databases

Some patterns on how to design the domain model for a document database.

• Creator of Couch Potato.
• Don’t understands why MongoDB gets so much attension.
• Every document has an id.
• Get info by url. CouchDB has builtin http server.
• Polymorphic associations.
• Reporting.
• Map function. function(doc) { … emit(doc.id, <value>); }
• Reduce function. function(key, values) { }
• Nested attributes (3D forms).
• Sample with survery, questions, choices.
• Copy versus associations.
• Because map reduce is built in, query code can analyze.
• Always fast through static indexes.
• Indexes are built on reads, not writes. Writes not expensive at all.

Rik Arends – Developing applications in the cloud

Showing a complete development IDE in the browser. Not available publicly just yet.

• From ajax.org, which are 15 people.
• Doing JavaScript Charting and Live Markup.
• Collaborative applications in the cloud. Refering to Google Docs.
• Google BigTable map/reduce.
• MongoDB soon autosharding. Redis.
• [Nosql is actually sql without transactions, joins and predetermined schemas.]
• Yahoo Geolocation Service.
• Timeslider.
• EtherPad.
• Ajax.org Cloud IDE. Integrated with github.com. Demonstration a user interface in the browser. Looks a lot like Visual Studio with forms editor, property lists etc. Debugging.
• Testing ui is hard. Selenium.
• Chrome has socket open over which you can do debugging.
• Sample with node.js and socket. Using GoogleGears like extension for now. Hoping that browsers will expose internal debug apis.
• Next: read/write github, php, ruby, python, addon tooling, share code fragments.
• Editor bindings.
• @cloudeide for preview.

Daniel Glazman – Browser War 2010

A frenchmen showing languages skills in Swedish too. Inside W3C working groups.

• Creator of Nvu. Did the styling engine of Netscape/Mozilla.
• CEO of Disruptive Innovations.
• W3C CSS working group co-chairman.
• Blink and marqee tags are two proofs of the existence of the devil.
• Handling bloody disputes from company strategists.
• Must admin IE9 is very promising.
• Never so many contributions to the working groups as today.
• XHTML2 was big failure. Not backwards compatible.
• “Reinventing HTML” by Tim Berners-Lee
• HTML-WG => WhatWG 2006-10-27
• HTML5 2009-10-06
• HTML5: The most unreadable specification I have read in 20 years of standardization. Lots of internal links. The language.
• Bluegriffin is new editor.
• CSS2 object model was really bad with holes in the specification.
• Canvas is going to shake the game industry too.
• Impressed by Mozilla Bespin. Using frame buffer.
• Properietary formats are doomed.
• No flexible box model (yet).
• Please stop supporting IE6.
• JavaScript toolkits will have a hard time fighting for existence will new CSS3 support for transitions and animations.
• Tensions in the standards communities.
• Mozilla gets 80% of its revenue from Google. What will happen with that with regards to Chrome?
• Infamous Apple tag <meta name=”viewport” />

Dylan Schiemann – Programming to patterns

• Working with SitePen, Dojo.
• Dojo 2.0 drops support for IE6/7. 50% less code.
• Comparisions between Dojo and MooTools.
• Mixins with Dojo.

Sergey Ilinsky – Managing complex client-side GUI Apps the right way

• Creator of Ample SDK.
• XBL2 doesn’t look to happen.
• Put everything in script tags.
• Declarative UI in the xml.
• Open Source GUI frameworks ExtJS, Dojo, Qooxdoo, jQuery UI.
• Events for removal in the document level.
• Ample has a DOM and the browser has its DOM.
• Div elements are not enough for datepickers and listviews.

Mark Wubben – Building browser extensions with Chrome.

• Much easier than on Firefox with XUL and XPCom.
• chrome://extensions/
• An extension is a folder with a manifest.json file in it. Must have a name and a version.
• Content scripts = User scripts from Greasemonkey (Aaron Boodman).
• Isolated worlds.
• Content scripts run in separate contexts, but shares the DOM.
• Use events to communicate between scripts/extensions.
• Sample: expand bit.ly urls on Twitter.
• Background pages.
• [Maybe someone should make a Firefox extension to read/run Chrome extensions for compatiblity between the browsers.]
• [Secure also means less flexible.]
• Chrome APIs.
• Page actions. Browser actions. Popups.
• Browser actions can talk between extensions.
• Desktop notifications (in WebKit).
• Url permissions shown on install.
• [What's "Allow incognito" in extension configuration.]
• 11born.net/swdc
• Someone has done something for Mozilla JetPack.

Malte Ubl – Getting started with node.js

• The web is changing. We’re doing i/o wrong.
• Comet.
• JavaScript is popping up as a library language for the first time.
• CommonJS, goal of server side JavaScript.
• Node.js is all about non-blocking operations on the server. [Like .NET asynchronous requests.]
• No breaking changes anymore to Node.js.
• nonblocking.io
• Cloud provider for Node.js.
• Dependent on Python.
• No Windows binary (yet), not a true Posix platform.

Patrick Chanezon – Google for developers

• AppEngine for business.
• Infrastructure As A Service = Amazon.
• Platform As A Servuce = Google AppEngine [Windows Azure].
• If you have an OpenID support and a notion of separate domains, you can integrate with Google App Marketplace.
• Prediction API.
• The APIs for Google Storage is the same as for Amazon S3, just change the domain. Adds a few features.

Chris Heilmann – Clever re-use of web technologies

• From Yahoo.
• Nobody cares what the html looks like.
• Problems is that we love our technologies. Truism.
• Play to push the envelope.
• Not everyone has JavaScript on in their browsers.
• Drag and drop is still confusing for a lot of users.
• iPad is not the end of web design as we know it.
• Not everything is solved with jQuery.
• Issues in html5+css3: security, hardware access, native rich controls, layout, internationalization, accessibility, media.
• A lot of “using newest technology” is a lame excuse for not architecting our solutions.
• Yeah, we annoy people with open technology [not better than to annoy with closed technologies].
• Progressive enhancement.
• If you put a button on a web page that doesn’t work, you’ve broken a promise to your user [cause JavaScript is off].
• Companies happy about Facebook blocking IE6.
• developer-evangelism.com, wait-till-i.com.
• Doesn’t matter what Apple makes since is is a religion and not a company. I buy 2nd and 3rd generation products these days.

Source code for this blog post is available as a complete Eclipse project at http://github.com/mikeplate/ListViewDemo (zip download link in upper right corner).

An Activity with an expanding ListView and a docked TextView

If you have an activity that will only contain a single ListView control, you can derive your activity from the ListActivity instead of Activity. However, I think I might like to show some extra info below my ListView so I chose to have a separate ListView object. My activity layout looks like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical"
  >
  <ListView
    android:id="@+id/list"
    android:layout_width="fill_parent"
    android:layout_height="0px"
    android:layout_weight="1"
    />
  <TextView
    android:id="@+id/footer"
    android:layout_width="fill_parent"
    android:layout_height="60dip"
    android:text="@string/footer"
    android:padding="4dip"
    android:background="#FF666666"
    />
</LinearLayout>

And I need the layout for items in the ListView (listitem.xml):

<?xml version="1.0" encoding="utf-8"?>
<TextView
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:textSize="24dip"
  android:padding="8dip"
  />

Note a nice trick that I’ve used to get the TextView to “dock” at the bottom with a definied height, and have the ListView automatically fill out the rest of the height. This kind of thinking is important since Android devices can have different resolutions. The trick is to set the layout_height to zero pixels and the layout_weight to one (default is zero). Not sure about the logic behind that, but it works!

In order to have something to put into my ListView, I created a few country names in a string array as a resource and I sort that array before adding it to the ListView with the ArrayAdapter object. (Check out source code link above for this content.)

public class ListViewDemoActivity extends Activity {
  private String[] Countries;

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    Countries = getResources().getStringArray(R.array.countries);
    Arrays.sort(Countries);

    ListView list = (ListView)findViewById(R.id.list);
    ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.listitem, Countries);
    list.setAdapter(adapter);
    registerForContextMenu(list);
  }
}

Creating a ContextMenu in Android

When the user long-clicks, the event onCreateContextMenu is fired for the control that the user is clicking. For me, that is the ListView control. But since I don’t want to write a custom ListView-derived class, I want to catch that event in my activity. There does not seem to be any bubbling going on. Events fired in a child control does not bubble up to the parent if they are unhandled.

But obviously, the api designers have thought of this since there is a special method for this situation. Call the registerForContextMenu in your activity for this! This will actually make sure your overridden methods for both onCreateContextMenu and onContextItemSelected is called for the ListView-events as we’ll see soon.

Next, we’ll provide the implementation of onCreateContextMenu. Here I want to ensure that the event comes from the ListView and if so, I want to determine on which item in the ListView the user long-clicked.

@Override
public void onCreateContextMenu(ContextMenu menu, View v,
    ContextMenuInfo menuInfo) {
  if (v.getId()==R.id.list) {
    AdapterView.AdapterContextMenuInfo info = (AdapterView.AdapterContextMenuInfo)menuInfo;
    menu.setHeaderTitle(Countries[info.position]);
    String[] menuItems = getResources().getStringArray(R.array.menu);
    for (int i = 0; i<menuItems.length; i++) {
      menu.add(Menu.NONE, i, i, menuItems[i]);
    }
  }
}

As you can see, the argument of type ContextMenuInfo can actually change depending on what type of control is sending the event. For ListViews, the class you need to type cast into is AdapterView.AdapterContextMenuInfo. From there I used the position, which in my case corresponds to the index into the string-array. From the array I retrieve the string for that particular item and use as title for the menu. Then you can of course add all the menu commands you like. For the demo, I defined another string array as a resource with the commands I want to add.

When creating the menu items with the add-call, I specify that I don’t want any grouping of the items (Menu.NONE) and that the order and id of the item is the same (i). The last argument to add is the text to display for the item.

Responding to selected MenuItem

If the user dismisses the context menu (for instance, by back button) you don’t need to do anything. But for catching the actual selection of one of the items, you need to override onContextItemSelected.

@Override
public boolean onContextItemSelected(MenuItem item) {
  AdapterView.AdapterContextMenuInfo info = (AdapterView.AdapterContextMenuInfo)item.getMenuInfo();
  int menuItemIndex = item.getItemId();
  String[] menuItems = getResources().getStringArray(R.array.menu);
  String menuItemName = menuItems[menuItemIndex];
  String listItemName = Countries[info.position];

  TextView text = (TextView)findViewById(R.id.footer);
  text.setText(String.format("Selected %s for item %s", menuItemName, listItemName));
  return true;
}

The MenuItem argument holds all information that you need. The ContextMenuInfo object that got sent to onCreateContextMenu is still there and still needs type casting. Or I guess you could have saved that info in the activity between the calls, but I didn’t.

The id of the menu item selected is the same as the index into the string array of menu item texts for me. Instead of just outputting the menu command name and the list item text in a TextView, you would most likely have a big switch statement on menuItemIndex.

This was my first blog post and code demo for the Android platform. I hope it won’t be the last! The goal is to build upon this demo and/or other demos in my investigations of the Android platform. Please let me know in the comments if you have even better methods or code patterns that solves problems like this.