I stumbled upon a really odd bug in my current project, which I can only attribute to the WebKit browser engine, since I was able to recreate this in a UIWebView on iOS (in PhoneGap) and in Chrome on OS X – WebKit is the common engine in both. It’s a bizarre issue that is really easy to fix, but was dumbfounding since the user interface was not displaying what I was seeing in the WebKit debugging tools. I figured I’d share, in case anyone else runs into the same issue.
Set the CSS “display” property on the <span> element to “inline-block”, and everything works properly. This was a really strange issue since I could see the HTML DOM updates, but the actual UI wasn’t being updated.
If my description doesn’t seem to be making any sense, check it out in the video below. Keep an eye on the HTML DOM structure, as well as the rendered output.
Unfortunately, it took way longer than I would have hoped to fix such a seemingly simple issue. Hopefully this saves you some time if you run into it too!
I am happy to announce the US Census Browser version 2.0! Back in December of 2011, I released the US Census Browser as an open source application intended to demonstrate principles for enterprise-class data visualization and applications developed with web standards. This version has some fairly substantial changes – See the video below to check out features in the latest version:
Version 2.0 of the US Census Browser has some substantial changes, including:
Completely new & redesigned UI layer, using app-UI. app-UI is an open source framework for application view-navigators that mimic native mobile applications. Using the app-UI SplitViewNavigator, the US Census Browser now supports both landscape and portrait orientations.
Switched from Google Maps to Open Street Map using OpenLayers. Users of the Census Browser maxed out my Google Maps account! That is 25,000 map loads within a 24 hour period! WOW! I switched to the free Open Street Maps solution, which doesn’t have any usage/bandwidth limitations. With this change I was also able to add interactive maps.
Updated to Twitter Bootstrap 2.0. The app is now using new UI styles and components which are now available in Twitter Bootstrap version 2.0
I’d like to take a moment and introduce app-UI, a new open source application framework that I’ve been working on.
Disclaimer: Please keep in mind that things will change as the project is improved and matured – this is a beta/early prototype.
You might be wondering “why create this?” when there are other open source alternatives like jQuery Mobile. The primary motivation for creating app-UI was to have reusable application containers that are highly performant, and do not force any prescriptive development paradigms. With respect to animations/transitions, app-UI outperforms the alternatives, particularly on mobile devices.
app-UI can be used with many different existing frameworks – app-UI only requires jQuery as a solution accelerator framework. It will work with existing UI widget frameworks (jQuery UI, Twitter Bootstrap, etc…), and will work with existing templating frameworks (Moustache, Knockout, Handlebars, etc…).
app-UI currently has three application containers, and at this time it is not intended to be a complete UI widget framework.
Please see the “samples” directory for usage scenarios – there is no documentation yet.
The ViewNavigator component allows you to create mobile experiences with an easily recognizable mobile UI paradigm. You use this to push & pop views from the stack.
The SplitViewNavigator component allows you to create tablet experiences with an easily recognizable mobile UI paradigm. The SplitViewNavigator allows you to have side-by-side content in the landscape orientation, and the sidebar is hidden in portrait orientation.
The SlidingView allows content to slide to the side using a horizontal swipe gesture, revealing a navigation container “underneath”. This is very similar to the behavior in Facebook’s iPad application.
Just swipe horizontally with a finger or the mouse…