Odd WebKit Bug with <SPAN> Elements

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.

The problem:

I have a horizontal slider (custom HTML/JS) component, and content within a separate HTML <span> should be updated when the slider value changes. The JavaScript seemed to be working properly, I could see console.log output that showed events were being dispatched, but the UI wouldn’t display what I was seeing in the debugging tools. Instead, the UI would update sporadically with a value, but not consistently, and not for every time that I updated the HTML DOM.

The solution:

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!

US Census Browser v2.0

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 is currently available for:

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

The source code for the US Census Browser has also been updated on github: https://github.com/triceam/US-Census-Browser

To learn more about app-UI, check out my page here: http://www.tricedesigns.com/2012/04/24/introducing-app-ui/

Enjoy!

Introducing app-UI

I’d like to take a moment and introduce app-UI, a new open source application framework that I’ve been working on.

app-UI is a collection of reusable “application container” user interface components that may be helpful to web and mobile developers for creating interactive applications using HTML and JavaScript, especially those targeting mobile devices. app-UI is a continual work in progress – it was born out of the necessity to have rich & native-feeling interfaces in HTML/JS experiences, and it works great with PhoneGap applications (http://www.phonegap.com). app-UI can easily be styled/customized using CSS.

Disclaimer: Please keep in mind that things will change as the project is improved and matured – this is a beta/early prototype.

All of app-UI was created using HTML, CSS, & JavaScript. All animations are rendered using CSS3 translate3d, so that they are hardware accelerated (where supported). app-UI works well on iOS, Android and BlackBerry browsers (others not tested), and works well on the latest releases of most desktop browsers (I know it does not work on old versions of IE).


Why?

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…).


Application Containers

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.

ViewNavigator

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.

Samples:

SplitViewNavigator

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.

Samples:

SlidingView

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.

Samples:

Just swipe horizontally with a finger or the mouse…


Bugs & Features

No software is ever bug-free. If you encounter an issue, have feedback, or have feature requests, please log them at: https://github.com/triceam/app-UI/issues

-OR-

Fork it, fix it, and send me a pull request.

Please do not just complain.


Real World Usage

You can see this framework in the following real-world apps:

If you have built your own app using this framework, please let me know! (@andytrice on twitter)


Download

Get started with app-UI today! Just browse to http://triceam.github.com/app-UI/, read the details, download a copy, and start building your own apps!

If you’re building something cool with it, then let me know! I’d love to hear about it.