Thursday, July 10, 2014

Bootstrapped Liferay Language selector (Take 2)

I’ve found issues with the usual embed code so I rolled my own using Velocity, feel free to use and abuse:

<script src=”https://gist.github.com/htmlr/fdede9d227f8c2e5d080.js”></script>

Thursday, June 19, 2014

Email creation a little easier thanks to Campaign Monitors INLINER tool

IMHO asking most front-end developer to code an EDMs is offensive. It’s a step back in time as opposed to the shiny new HTM5/CSS3 playground due to the fact most email clients your going to probably target (E.g. Outlook 2000-2010) only support very basic HTML and it ends up being a case of nesting HTML tables, spacer images and a whole lot of inline CSS -  a very laborsome and error prone task .  Luckily Campaign Monitor’s Inliner tool makes it a little less tedious as it will inject all your CSS inline which let’s you keep your CSS in one spot (i.e. the head of your document) whilst you develop and fine tuning.

Note: If you’re using Campaign Monitor it actually gives you the option to do this when you upload your HTML which is nice.

http://inliner.cm/

Happy EDM building……NOT!

Monday, June 2, 2014

Easy file comparison on Mac using FileMerge

If you’ve got  Xcode installed on your Mac it has a handy inbuilt tool called FileMerge which lets you check for differences between 2 files. 

Here’s how to create an alias to FileMerge so you don’t need to boot Xcode everytime:

  • Go to Macintosh HD > Applications
  • Right-click Xcode.app
  • Click Show Package Contents
  • Go to Contents > Applications
  • Right-click Filemerge.app
  • Click Make Alias
  • You will need to type your password
  • Move the alias to your dock or desktop
Wednesday, May 21, 2014

Fixing jQuery UI Autocomplete issue within fixed container

As experienced by others, I came across an issue whereby my jQuery UI Autocomplete dropdown was acting like a fixed element and not scrolling with the rest of the form.

Here’s 2 options for fixing it depending on your situation:

During initialization

$( ".selector" ).autocomplete({ appendTo: "#someElem" });


..or after initialization

$('.ui-autocomplete').each(function(){
$(this).autocomplete('option','appendTo', $(this).parent());
});
Tuesday, April 29, 2014

Overcoming Internet Explorer compatibility mode

Occasionally life throws you a curve ball, once such example was a recent deployment for a very important client. After spending a lot of time  testing the UI in IE 8 and reassuring the client  we press the button on the new site launch. Within minutes I had a very cranky client come back to me complaining the site did not work in IE 8 and the world was about to end. Turned out to be a minor layout issue nevertheless I was stumped. The user was definitely running IE 8 . After further investigation I discovered the affected user was running IE 8 in IE 7 compatibility mode but can’t remember enabling this - undoubtedly this was done to support some other internal legacy system. Luckily theres a meta tag for this but there are some important points for implementing this tag

<meta http-equiv=”X-UA-Compatible” content=”IE=EDGE” />

A few points to note:

  • Understand if you specify an earlier version that will impact all HTML/CSS - E.g. rounded corners wouldn’t work if you specified content=”IE8” if your running IE 9  
  • Ensure this is the first tag after the <head> as IE 9 will throw errors

Examples:

Run the latest mode available:

<meta http-equiv=”X-UA-Compatible” content=”IE=EDGE” />

Run as IE 7:

<meta http-equiv=”X-UA-Compatible” content=”IE=IE7” />

Try running as IE 8 first, then fallback to IE 7:

<meta http-equiv=”X-UA-Compatible” content=”IE=IE8,IE7” />

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.

https://www.google.com/doubleclick/studio/swiffy/

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

http://animatron.com/

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  */
margin:0;
padding:0;
}

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:

Velocity

    <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>
   </a>
   <ul class="dropdown-menu drop-from-right" role="menu" aria-labelledby="language-selector">
    $taglibLiferay.language("fm",null,"languageId",1)
   </ul>
</div>
    
    

jQuery (usually placed in main.js)

    $(".taglib-language-list-text").each(function() { 
	$(this).wrap("li");
    });