That is why I was pleasantly surprised to see the new passwords keyboard in the Playbook OS 2.0 update:

As you can see, the keyboard contains an extra row compared to the normal keyboard for numbers. Most of my passwords contain numbers, and on iOS switching between the normal and the numeric keyboard for entering passwords is a bit of a pain. Glad to see how RIM solved this and I hope the other smartphone and tablet manufactures follow soon.

The keyboard will automatically be triggered when a password field receives focus.

The conference was at the Amsterdam RAI Convention centre and via my employer Hyves I could easily get a ticket, although I was only able to attend a single day.

In general, I was quite impressed with the event. It was very well organized and the sessions were quite diverse, though they could have been somewhat more in-depth.

It was obvious from the conference that RIM wants to push the BlackBerry Playbook as a device that’s great to develop for. All presentations and demos were ran from a Playbook and all attending developers were given a Playbook to take home. Several speakers pointed out that the Playbook allows remote web debugging with the web inspector, in a similar fashion as the iPhone simulator allows (although with the Playbook you can debug on an actual device).

I attended sessions mostly on web topics such as Phonegap / BlackBerry Webworks, HTML5 canvas, CSS frameworks for creating transitions and animations and one on the Cloud9 in browser IDE. A non-technical session I attended was “Working with Bloggers and Media,” in which a panel of bloggers discussed their motivations for writing an article on an app or not, and what you can do to make this easier for them, and what points in the app life cycle can be used for generating publicity. Contained a wealth of useful advice and case studies.

In particular, the presentation on the Financial Times web app was very impressive. This apps allows you to browse the Financial Times content on many types of mobile devices and also off line. The app is very similar to the Hyves mobile that I have been working on, except that the FT app has much better support for using it off line. I really liked the trick to convert base64 encoded images to a different encoding that uses all the available space in UTF-16 encoding so that you can cram an image in less characters in the HTML5 localStorage for offline caching and retrieval.

I am not sure if RIM is going to make it with all the iOS and Android competition, but at least the BlackBerry DevCon was really great.

I will start with an overview of all keyboards and conclude with some modifiers that can change the behavior of text input fields.

Default text keyboards

These are the default keyboards you will get when you use a plain, vanilla <input type=”text” /> field.

You can get these keyboards by just adding a normal <input type=”text” /> field to your web page. You can get the optional Go button if you put the <input /> element in a <form /> element that has an action attribute (value is not important). When the users presses to Go button, the form will be submitted. You can capture this event by observing the submit event on the form. It is not possible to get the Go button in a <textarea /> element, you will always get the first keyboard with the return button.

Email, URL and numeric / special characters keyboard

You can trigger these keyboards with the <input type=”email” />, <input type=”url” /> and <input type=”number” /> input elements.

These keyboards are a variation of the regular keyboards (picture of URL keyboard not included). The email keyboard offers easy access to the @-sign and disables autocorrect and autocapitalization for the keyboard, which is pretty useful for a dedicated email field. It can be triggered by using the <input type=”email” /> tag.

The URL keyboard (picture not included) has an additional button for inserting “.com”. It is the same keyboard that you use in Mobile Safari for entering URLs. If you want to use this keyboard, use an <input type=”url” /> tag.

The special characters keyboard can triggered by using an <input type=”number” /> tag. Even though you cannot enter non-decimal character in most desktop browsers with this type of input, on iPhone you can enter any character (you can switch back to normal keyboard layout by using the ABC button).

For all three keyboard layouts goes that you can add a Go button if you wrap the <input /> element in a <form /> element with an action attribute.

Numeric keyboards

iOS 5 offers two numeric keyboards on iPhone: one for entering phone numbers and one for entering digits only.

These two variants of the same keyboard serve specialized functions. This first keyboard kan be used to enter phone numbers: it has dedicated buttons for each digit and offers a button for special phone characters such as +, * and #. An iPhone user cannot switch back to a different keyboard layout if you use this one. It is triggered by creating an <input type=”tel” /> element.

The second variant is the same but lacks the button for entering non-digit characters. You can trigger this keyboard layout by using the HTML5 pattern=”[0-9]*” attribute. pattern is an attribute that can be used on elements to specify a regular expression that the input value has to match. This particular regular expression means “a character between 0 and 9, repeated 0 or more times”. The type of input can be both “text”, “number” or “tel”. Full example: .

You cannot have  a “Go” button with these two layouts.

Bonus: the search keyboard

iOS offers a dedicated keyboard for searches as it is a common task:

It is the same as the normal text keyboard layout but here the “Go” button has been replaced with a “Search” button. Another difference is that the <input /> element is styled differently: it has rounded corners. You can trigger it by creating an <input type=”search” /> element in a <form /> element with an action attribute.

Auto correction and auto capitalization

Autocorrection (the little balloons that pop up when you mistype a word) can also be controlled per <input /> element. There are few reasons to disable it, but it is useful to turn it of for fields where the user has to enter a username, since these are often words not in a dictionary. You can control it by setting the autocorrect attribute to “on” or “off”.

The same goes for auto capitalization. If you have a field that for some reason should not start with a capital letter (other than an email or url field) you can control this feature with the autocapitalization attribute.

Apple has some pretty interesting documentation on how to design a form in Mobile Safari.

Auto focus

You can control the focus of an <input /> element by using the autofocus=”on” attribute. The element will then receive focus. This means that the keyboard will show up and the user can immediately start typing. Unfortunately it is not possible to have a web app or web page open with the focus already on a field (you cannot set focus from the onload or ondomready events). This is because many web sites use this technique and it would be really annoying to surf the web with this feature enabled.

Conclusion

Using the correct keyboard will lower the effort the user has to put into filling out your form. It will make your web app feel more like a native app. It is really useful and almost free, so there are few reasons not to use it. Older browsers will ignore the special attributes and type values so these advanced types are backwards compatible too.

If you have any questions or feel like I missed a keyboard layout, please leave a comment.

HipHop is Facebook’s open source C++ compiler for PHP. HipHop (also known as HPHP) will compile your PHP code to highly optimized C++ code, which you can then compile (with g++) into a big binary that will run your web site (it includes a web server). If you want to know more about Hiphop and how it was created, you can check out the Facebook Engineering Blog article or the Github project.

After its introduction many bloggers have written background articles regarding Hiphop but few seem to have actually used it in a production environment. At Hyves, we use HipHop to run our web servers and our daemons, which are also written in in PHP. In this blog, I will detail some of our experiences and results.

Compiler and interpreter

Hiphop includes both and interpreter and a compiler. This is something that is not frequently mentioned in blog posts on Hiphop. The interpreter (called HPHPi) can be used for developing, thus saving you the hassle and the delays associated with compiling every time you change a single file. In general is has the same behavior as the compiled version of Hiphop. It is a bit slower than using PHP with an opcode cache, but it is not that bad and with a fast laptop it is still workable.

The compiler can be used to create an optimized binary for your code base. The Hyves code base is in the order of 3.5M LOC in PHP. The conversion from PHP to C++ has to be done by a single server, but we use a dedicated cluster of sixteen servers for compiling the C++ source code to an executable binary. This takes about seven minutes including the building (e.g. minimizing style sheets and javascript).

The resulting binary is approximately 500MB size. This cannot be deployed to our web servers in a serial fashion, as copying it would take too long. To deploy this to our web servers, we use a bittorent based p2p deploy system. In case of an emergency, we can roll out a fix in approximately ten minutes to our 300 web servers.

Update: Facebook just released a JIT compiling VM for Hiphop.

Behavioral differences

The HPHP interpreter, the compiled version and the official PHP binary all have slightly different behavior. HipHop is about 99% compatible with pure PHP. 99% times 3.5M LOC is a lot of problems. If you want to run HipHop, make sure that your unit tests are ran against all three versions automatically or you will drive yourself and your team members insane, especially in a mixed PHP / HPHP environment.

Some PHP 5.3 stuff is still not completely supported in Hiphop, such as namespaces, of which at the moment nearly every feature is broken. Extensions such as PHP’s SOAP extension have been ported but some behavior differences exist between the different runtimes.

Converting the Hyves code base to run on HipHop took a big effort, several of our software engineers worked on this projects for months.

Hiphop has some really cool features. There is a call_user_func_async() function (it does exactly what it says), and you can have two versions of you web site running at the same time, so that you can deploy a new version without downtime. Also, you can catch fatal (E_FATAL) errors with their stack traces with HPHP, a feature sorely lacking from PHP.

There is only sparse online documentation of these specific features so you will have to figure a lot of it our by reading the source code.

Performance

Performance of our Hiphop enabled web site has been very good. In particular our API has strongly benefited, with API calls being twice times as fast and requiring only a quarter of the cpu power compared to plain PHP. This has resulted in much faster mobile clients and better performance of the parts of our web site that use internal API calls.

In the top graph you can see our web servers 95% and 99% response times. We enabled HipHop for all our web servers in March 2011. The higher response times just before the switch are due to internal network congestions because of some issues with the first versions p2p deploy system we used.

The bottom graph shows the CPU load of our web servers, which has dropped by a factor of four after the switch to HipHop. This will enable us deprecate a big portion of our web servers in the future, resulting in high savings on hosting and power.

Open source

HipHop is an open source project, available on Github. If you file a bug, Facebook’s maintainers can be pretty responsive, well reported bugs can be fixed in a matter of days. Of course you can always fix it yourself on Github and try to get the fix pulled into the project.

Al though Facebook has reported that WordPress and Mediawiki are experimenting with HipHop, not many people actually seem to be using Hiphop in production. For now, the community is pretty small outside of Facebook.

Also Hyves contributed to the HipHop project, we contributed (among other things) bug reports, a number of bugfixes and the ability to use distcc so you can compile your web site on multiple machines.

Conclusion

All in all the switch to HipHop has been a big success for Hyves. Al though switching comes with a steep cost in terms of implementation and tooling, for a big web site such as Hyves it is definitely worth the effort. If you do not have at least a few dozen web servers, you should strongly consider buying more hardware in favor of spending a lot of effort on making Hiphop work for you.

Update

The original version of this article at the Hyves Product Development Blog made it to the front page of Hacker News.

Remote debugging UIWebView with the iOS simulator

For a little while people have figured out how to enable the remove inspector in iOS applications. With this trick, you can get a Webkit inspector (Opt+Cmd+I) for a UIWebView running in an app on the iPhone simulator. This will give you Weinre like abilities but it works much more reliably. Then, it didn’t take long before someone came up with an app to do all the GDB debugger attaching for you.

However, enabling the Webkit remote inspector is a private API call and if you have it in your application when you submit it to the App Store, your application will be rejected. Also, it only works on the simulator, if it runs on a device you cannot access the remote inspector because of firewall rules.

An easy solution is to include some precompiler directives that will only add the private API call when you compiled your app for the iOS simulator:

#if (TARGET_IPHONE_SIMULATOR)
    [NSClassFromString(@"WebView") _enableRemoteInspector]; // Private API call.
#endif

You need to import the TargetConditionals.h file too:

#ifdef __APPLE__
    #include "TargetConditionals.h"
#endif

You can access the remote inspector by loading your app in the iOS simulator and navigating to http://localhost:9999/.

Unfortunately, this feature is only available in the Google Chrome browser.

Included are a short reminder of what character sets are, how to use them, collation, best practices and common pitfalls. Finally, there are some tips for debugging issues with character sets.

If you have any questions after viewing this presentation, please ask.

1. Set the Eval.EnableXHP to true to that XHP will work on the interpreter if you need that. This will enable the XHP processor which will convert xml syntax to the __xhp classes.
2. Get the XHP PHP extension from https://github.com/facebook/xhp
3. Copy the files in the php-lib/ folder to your project
4. Include them in the source files where you want to use XHP.

One condition has to be met before it is possible to use multiple threads to process an iterator: each processing operation on an item in the operator must be independent on the other items. The typical PHP function to use in such cases is array_map(), which allows you to run a function over each item in an array. array_map() prohibits you to access other items in the iterator while processing an item, so the order of execution is not important.

In the past it has been very hard to effectively use parallelization in PHP. However, with Facebook’s Hiphop Facebook engineers have added the option to create threads in PHP using the call_user_func_async() function.

Some caveats apply:

• You can only create two extra threads, next to the main thread that is already running. Creating more threads doesn’t have any effects.
• Creating additional threads is expensive, so you have to carefully consider if it is worthwhile to use them.
• Unlike all other functions in PHP that accept functions as arguments, the call_user_func_async() does not accept anonymous functions as arguments. You need to pass in a string or array callback.
• The call_user_func_async() function is currently deprecated in HipHop and will issue a warning when called.

call_user_func_async() and array_map() can be combined into a parallel version of array_map(). This can be done by splitting the iterator in equal parts and then running the iterator over each part, each part in a separate thread. Finally, you need to put all the pieces back together (synchronize) by calling end_user_func_async() for each thread.

You can find my implementation at GitHub.

In practice the use of this function is limited: the maximum number of threads is three and there is quite a high cost for creating threads. However for complex processing or processing that calls external services (such as databases) that block it might be worth the extra effort.

After its introduction many bloggers have written background articles regarding Hiphop but few seem to have actually used it in a production environment. I have and here are some of my thoughts on working with Hiphop in such an environment.

Speed

Hiphop includes both and interpreter and a compiled version. This is something that is not frequently mentioned in blog posts about Hiphop. The interpreter (called HPHPi) can be used for developing, thus saving you the hassle and the delays associated with compiling every time you change a single file. (Compiling a simple 10 line script takes about one minute. This is probably because the web server has to be compiled too and this component is a few orders of magnitude more complex than my PHP script). In general is has the same behavior as the compiled version of Hiphop. It is a bit slower than using PHP with an opcode cache, but it is not that bad and with a fast laptop it is still workable.

The compiled version is really fast, at least a few times faster than using PHP with fastcgi. Also, Hiphop has become already three times as fast since it has been released in Februari 2010. So the speed is really, really good.

Behavioral differences

The HPHP interpreter, the compiled version and the official PHP interpreter will all give you ever so slightly different behavior. So make sure that your unit tests are ran against all three versions automatically or you will drive yourself and your team members insane, especially in a mixed PHP / HPHP environment.

Some PHP 5.3 stuff is still not completely supported in Hiphop, such as namespaces, of which at the moment nearly every feature is broken. Support for anonymous functions have only recently been added. Extensions such as PHP’s SOAP extension have been ported but some behavior varies between the variants. Small stuff mostly. For example, if you get a SoapFault exception somewhere, in PHP the exception will contain the message from the SOAP response, but in HPHP the exception will contain the entire SOAP response.

If you want to write scripts that are PHP and HPHP compatible, you will need to write some if statements here and there. Definitely test all your code against the compiled, interpreted and official PHP binary.

Features

Hiphop has some really cool features. There is a call_user_func_async() function (it does exactly what it says), and you can have two versions of you web site running at the same time, so that you can deploy a new version without downtime. Also, you can catch fatal (E_FATAL) errors with their stack traces with HPHP, a feature sorely lacking from PHP. There is only sparse online documentation of these specific features, but you can set up your own documentation server.

Among these new features, HPHP introduces some new errors that can occur in your scripts, mostly when you do strange stuff which you are not supposed to some datatypes., but PHP still allows. For example, in PHP this will not throw any errors: $var = null; $var['foo'] = ‘bar’;. In HPHP, this will throw an E_NOTICE. I will leave it as an exercise to the reader to decide which of the two behaviors actually is preferred. In general, HPHP is more strict and less forgiving, so that will probably cause latent bugs in your project to rise to the surface.

You gain some, you loose some: some PHP features such as fastcgi_finish_request() are not available under Hiphop. If you want any of the non included PHP extensions, you will have to port them to C++ yourself. Since they are already in C, it is not hard but you still need to do it.

Open source

One of the great things about Hiphop is that is is an open source project. The code for Hiphop is shared on Github. If you file a bug, Facebook’s maintainers can be pretty responsive. I filed a one (behavior difference from PHP for anonymous functions) and it was fixed four days later. Of course you can always fix it yourself on Github and try to get the fix pulled into the project. Not many people are actually using Hiphop in production, so the community is pretty small outside of Facebook.

Conclusions

Facebook’s Hiphop is really, really fast and offers useful features. However, you can imaging that with the behavioral differences and the changes you will need to your build and deploy process it may or may not be worth it for your web site.