Sunday, December 9, 2012

Moving from jquery tabs and iframes to jekyll

For the MyExpenses web site, I had used Jquery Tabs for navigating between the different sections, and contents that were also displayed from inside the app, like the user manual and the news were displayed in iframes. That worked well, but needed considerable tweaking through Javascript for
  • being able to link to individual sections and their subpages
  • resizing the iframe dynamically
It worked well, until I wanted to integrate Disqus commenting to the News which did not fit into the iframe where the News were displayed.
While looking for a solution, I discovered that Github pages, where the website is hosted, supports Jekyll, which is a mechanism for generating static pages from templates.
With the Jekyll, the navigation is now stored in one template, that is considerably simpler and easier to maintain than the Javascript code used before, and each time I push content to Github, the site is regenerated from this template. Manual and news are still generated from Docbook through XSLT stylesheets, but those output now the YAML header that Jekyll interprets.
The new interface now uses vertical tabs (the design needs to be polished, I admit), that make the whole site display better on the smartphone, and I no longer need a special navigation-less in-app display.
The added advantage: MyExpenses now can call Android's browser for displaying content and no longer relies on its own Webview, thus no longer needs the permission to access the Internet, which understandably is a stumbling block for security sensitive users when dealing with a financial application.

No comments:

Post a Comment