Flexbox for Mobile Web Layout

I was reading about Flexbox earlier from this article on CSS-Tricks and I found it extremely useful for a typical mobile web layout that you can see in below. The key feature from Flexbox that I found particularly useful is the ability to create containers that can fill the remaining space, which until recently, was achieved using JavaScript measuring and resizing on many mobile web framesworks (such as Dojo). The drawback with this JavaScript solution is that not only is it slow and irresponsive, but also unable to detect size change of surrounding elements, making software far more complex. So I looked up the availability of Flexbox on caniuse.com and pleasantly found it to be quite ready (at least in my personal opinion). I managed to implement a Flexbox based layout for a mobile web app I was working on and tested it on my arsenal of test devices. In this article I’d like to share my results and discuss the differences between each mobile browser. You may be aware that there are alternative mobile web layouts that are much more popular. I will discuss these near the end of this article.

Minimal Modularized Web Components Demo

A few months ago I came across the following video from this year’s Google I/O. Long story short, Web Components are browser vendor’s way of implementing GUI widgets, except now they are trying to make their API publically accessible and standardize into HTML5. I became extremely excited, because it could effectively replace all of the existing JavaScript GUI frameworks out there with an elegant, organized, encapsulated fashion supported natively. At this point I was heavily involved in development with Dojo and its way of making widgets. Perhaps a bit too much. (I literaly have Dojo 1.9 source code setup as a project in my Sublime Text 2, and studied it extensively.) I have a bit of love-hate relationship with Dojo, and I wanted to see a native way of implementing widgets.

Web Components were so cutting edge at the time (actually even at the time of this writing) that you literally have to download the nightly build of Chromium, enable bunch of experimental features explicitly, and you still only have a patchy support of it. In this post, I’d like to discuss the current state of Web Components, and show you a mininal modularized demo. I say modularized, I mean breaking it down into as many files as possible.

Using Weinre

Weinre (pronounced like “winery”) is a lovely tool to provide JavaScript console and DOM tree inspection for remote devices that don’t ship with a remote debugger. I’ve been using it for quite a while especially when I got issues with Android’s legacy WebView. (I say legacy, because the new WebView on Android 4.4 KitKat is now implemented with Chromium and has built-in remote debugger, but the older one doesn’t.) I’d like to discuss some things to watch out for when using Weinre as well as some tips.