Tuesday, April 15, 2014

Mobile web gotcha’s for Android and iOS

Been working on a mobile website, more of a retrofit unfortunately which IMHO is the worst kind of mobile web project . Here’s a few gotcha’s i’ve come across that I wanted to share to save the frustration of others:

  1. Android doesn’t like 3dtransforms on fixed elements (tested 2.3 - 4.1) 
  2. empty: rule persists when content is updated via innerHTML until you click again on another element (tested Android 4.1)
  3. iOS often only partially renders transparent overlays i..e the kind used for lightboxes until you move the screen or change orientation (tested iOS 5)
  4. iOS has a very annoying zoom like behaviour on form fields, unlike Android it seems to remain zoomed even on form submission causing various usability issues; e.g. user can’t often see any validation prompts at the top of the page (tested iOS 5)
  5. iOS and Android still seem to wait until the page is fully rendered  even if you have a meta redirect at the top (tested iOS  5. Android 2-4.1)
Monday, March 31, 2014

2 tools to ease the pain in moving from Flash to HTML5 

Swiffy beta -  Flash to HTML5 conversion tool, is excellent if you need to convert some old assets or want to stick to your current workflow in Flash. *Recently updated to work with Actionscript 3 but I haven’t tested it.


Animatron - Online based HTML5 animation tool that shares the familiar timeline/keyframe based animation which Flash designers are familiar with.


Tuesday, March 11, 2014

Liferay gotcha: 100% height breaks Iframe auto-resize

Recently one of our portal admins had been experiencing some odd behaviour when trying to configure portlets, whereby the permissions popup would keep resizing to infinity. Naturally we thought it was a script error or conflicting library and plugin but turns out the 100% height added to the HTML and Body (for a sticky footer) was the cause!

html, body {
height:100%; /* <—- remove this  */

Tuesday, February 25, 2014

Having SSL VPN connection issues? It could be your antivirus…

We use Juniper Network Connect for our SSL VPN at work which has been fine if you don’t mind having re-enable Java Applets after every major browser update. However, recently one issue that caught us by surprise is the VPN silently blocking traffic after successful login. Turns out it was due to client antivirus blocking security checks between both end points  of the connection resulting in the VPN blocking traffic unfortunately with no notice to the end user!

Anyway keep an eye out for that little chestnut!


Monday, February 24, 2014

Creating language selectors in Liferay using Velocity and Bootstrap

If you’ve ever had to add a language selector to your Liferay portal you’ve probably opted for default select box, but as you may know you are very limited in the way you can style select boxes using CS. A good alternative is to use the link display mode then wrap each link in a list item (LI) so you can create your very own dropdown using an unordred list (<UL></UL>).

Here’s how I’ve done this using the Bootstrap dropdown component:


    <div class="dropdown">
   <a class="dropdown-toggle" id="language-selector" role="button" data-toggle="dropdown" href="#">
    <span class="visuallyhidden"> $languageUtil.format($locale, "language",""):</span> <strong>$locale.getLanguage().toUpperCase() ($locale.getCountry().toUpperCase())</strong>
    <i class="-icon-caret-down"></i>
   <ul class="dropdown-menu drop-from-right" role="menu" aria-labelledby="language-selector">

jQuery (usually placed in main.js)

    $(".taglib-language-list-text").each(function() { 
Monday, February 17, 2014

Making sure Liferay shows your theme updates

Most Liferay developers would be familiar with the developer properties you first setup with your dev instance which turn off the inbuilt JS and CSS minifier and cache filters. However, in Liferay 6.1 is a slightly different best with some additional cache settings that come with the new Sass builder. Below are my recommendations for handling cache issues in Liferay 6.1:

Make sure the Sass Cache is refreshed for every deployment:

my-theme user$ ant clean deploy

Make sure asset timestamp’s are renewed -  the unique ID that gets created for each deployment that is appended to file URLs typically the CSS and JavaScript includes; E.g. main.css…?t=1234567 and main.js….?t=123432  - Liferay 6.1 has a nasty habit of not updating timestamps if you have the preservelastmodified config in your build config set to “true”.

Open your build config <plugins sdk>themes/build-theme-common.xml 
Find  preservelastmodified=”true” and change to preservelastmodified=”false” or remove it totally

Lastly, I recommend using browser incognito or private mode to limit caching

Wednesday, February 5, 2014

Swapping out the jQuery UI tab tabs - handy for responsive websites

jQuery UI is an excellent library of widgets, but it needs a little help when it comes to responsive sites as not all widgets are friendly on small device screens. One such widget is the Tabs.

You may get away with 1 or 2 tabs but if you have more and long labels you’ll find they won’t fit within the device screen real estate, often overflowing and breaking your nice responsive layout.

So what’s a simple workaround? Well one solution I came up, was to swap the tabs elements created by jQuery UI with a plain old Select box, as that will dropdown and often mobile devices have native UI that will open up allowing for easy selection.

Without further ado here’s my simple script:

View on JS Bin

Tuesday, January 21, 2014

Debugging JavaScript

Historically JavaScript has been written in a procedural fashion and this is typically how you’ll start out when you first start JavaScript development. Unfortunately procedural development, and working within one file often makes it very hard to debug errors, especially in older browsers such as IE 8 that lack developer tools.  So here are my top 5 recommendations:

  1. DO creating your code in pieces, working within a tool like JSFiddle where you can debug each piece in isolation using the JSHint debugging tools
  2. DO keep your code pieces in a self-invoking functions (function(){   <your code>  }()); so you don’t have collisions with similar variables or other functions in your file 
  3. DO take advantage of Strict Mode, at the top of your enclosure (i.e. self-invoking function or function)  when in development mode. This will tell modern browsers like Google Chrome and Firefox to show all errors/warnings
  4. DO use your browser console debugging tools available within modern browsers like Chrome and Firefox
  5. DO test in older browsers, as some features may not be available
Friday, January 17, 2014

CSS “featured” ribbon

Following on from my earlier post on Creating ribbons using CSS here’s another snippet for adding a “feature” ribbon overlay in the top left of an image:

Tuesday, December 24, 2013

Santatracker - Google fun