Translate your website with Google Website Translator

Oftentimes we want to support multiple languages in our websites. One "easy" way is to keep one separate resource bundle for each language we support, but this isn't as simple as it seems. First you need a tag / mapping mechanism to match labels in your pages with tags in the property files (frameworks like JSF already provide it) but then you need to maintain multiple sets of labels. Any new field / screen etc will require changes all resource bundles, which can quickly become a burden. In many cases this burden may be  acceptable in exchange for full control and performance, but in other cases we can use Google's Website Translator tool.

Follow these steps to find out how to easily include a styled language selector into your website, and to remove the Google Website Translator toolbar. I recently applied these steps in Eventfy and the final result looks like this:

Hide input type file from older iOS devices

I recently added support for user image upload in Eventfy. You can find more details and screenshots here.

Safari mobile in iOS devices like iPhone and iPad do not yet support file uploads and render input type file disabled. It may change with the upcoming update to iOS 6, but until then our web applications must take that limitation into account.

I wanted to hide the file update controls in iOS and show a note in its place. Instead of checking the browser version I am simply checking the state of the input file, which may also cover other devices with similar limitations.

The code below describes how to set it up with jQuery, but it is simple to do the same with plain Javascript.

1. HTML part:

<div id="imageUploadDiv" class="control-group">
 <label class="control-label" for="imageUpload">Image</label>
 <div class="controls">
   <input id="imageUploadInt" name="imageUploadInt" class="input-file" type="file" />
   <p class="help-block">You can optionally include a picture or image in your invite</p>
   <span id="imgPreview" class="thumbnail" style="display:none;width: 250px;"></span>
 </div>
</div>
<div id="imageUploadiOSWarning" class="alert alert-info" style="display: none;">
 <button type="button" class="close" data-dismiss="alert">×</button>
 <strong>Note</strong> Image upload isn't supported by iOS before version 6.0
</div>

2. Javascript / jQuery part:

<script>
$(document).ready(function(){
    if ($("#imageUploadInt").prop("disabled")) { 
        $('#imageUploadiOSWarning').show();
        $('#imageUploadDiv').hide();
    }
}
</script>

In this simple example DIV "imageUploadInt" is presented by default. But as soon the document loads we check if the input file was automatically disabled by the browser, and if so we hide "imageUploadInt" and show instead DIV "imageUploadiOSWarning".

Note: this DIV structure and CSS classes are defined in Twitter Bootstrap. You can find more about Bootstrap control forms here, on section 'Validation States'.

Update: I tested the image upload function in Eventfy yesterday (9/19) with iOS 6 and this code works great. Now users can upload pictures (if their device supports it), otherwise they are presented with a message explaining why the control is disabled.

Here are some screenshots to show how it works with iOS 6:

Input type file is enabled with iOS 6

Photo selection

Photo uploaded to Eventfy

This blog is back

After a (too) long hiatus I finally decided to get rid of the cobwebs and write here again. I didn't have lots of cool ideas to discuss so I decided to start a new pet project to give me some inspiration. After few weekends this is what I came up with:

1. Eventfy (http://www.eventfy.com), a simple web tool to setup events. You can use Eventfy instead of group emails to organize and track events. You can even setup conditional events like those poker (or RPG) games you can't confirm yet because you're not sure enough people will show up. In this case, once enough people confirm their presence Eventfy automatically notifies everybody that the game is on. If not enough people confirmed by the deadline you set Eventfy sends an event cancellation note to all invited. Thanks to responsive design techniques all functions work great from computers and from small devices like smartphones and tables.
2. Pingr (http://pingr.eventfy.com), a basic web-based availability monitoring tool. Just enter a URL from your site and Pingr will monitor it for you. If the site goes down or performance (ping or download speed) drops below normal thresholds it will quickly send you a notification.
3. Eventfy Blog (http://blog.eventfy.com), where I will post updates about anything hosted in the Eventfy.com domain.

These are quite simple projects but they are mobile-friendly (the screens won't look crappy on smaller screens and as such users won't have to zoom in / out in iPhone and iPad) and  it can transparently scale to meet the demand (hosted on Google App Engine's PaaS solution).

Check out after the break all the different topics I am planning to discuss here soon, all inspired from my experiences with Google cloud platform, public internet domains, responsive websites, HTML5, Twitter Bootstrap, jQuery and more.