I love IE Conditional Comments… said no one ever!

Although it’s considered bad practice, sometimes we are left with no choice but to use IE conditional comments.

When you run into problems like style sheet limits in IE9 and below; supporting a maximum of 4095 rules per stylesheet, 31 @imports or having @import nesting up to 4 levels, you really don’t have a choice but to use IE conditional comments to split up your CSS file. Here is when IE conditional comments can be handy. (I would try to avoid it as much as possible though!)

Maintaining IE specific stylesheets can be a pain, especially for the scenario I’ve mentioned above like splitting up your CSS purely for IE. This can easily be solved by using grunt to compile your CSS into separate files. 

For those of you, like me, who do have to deal with these workarounds, here are some useful links:

One thing to note though that the condition comment for non IE browsers is a slightly different syntax!

CRO and A/B Testing

HipagesGroup has recently introduced OKRs through all the departments. OKR (Objectives and Key Results) is exactly what it stands for: Objectives – goals that tell you where to go and Key Results – indicate how you will get to your goal for each objective. Our company OKR has been closely linked to Growth.

I was very privileged to be assigned into the Growth focus team where we created a CRO (Conversion Rate Optimization) pod consisting of our VP of Product, a product manager, myself and another developer. Our aim is to push out two CRO A/B tests a day and in the last few weeks, I am beginning to really appreciate and understand what Growth Hacking is all about.

  1. Analyse data to get insights on where the opportunities for conversions are on the site
  2. Look at user behaviour
  3. Come up with a hypothesis of how we can increase conversions
  4. Create an A/B test based on our hypothesis
  5. Analyse data of A/B test and the process starts again…

Once you get familiar with the process and deploy a few tests, it can get quite addictive. After the last few weeks, I find myself chasing those test results, wanting to know whether the tests we rolled out have moved the needle. The results for one of our CRO tests, aimed for the increase in mobile traffic, show that we have raised the conversion rate from 3% to 6% – that is a whopping 3% increase in conversions! CRO has now become one of my passions! Feel free to drop me a line if you have any questions or would like to discuss anything CRO.

Some other useful Reads and Resources:

Girl Geek Sydney @ hipagesGroup – Networking, Talks and Ping Pong!

hipagesGroup is hosting Girl Geeks meetup this month! Come along for a night of lightning talks, activities, food, drinks, ping pong and geek challenge with amazing prizes up for grabs! Register now


I will be speaking again… ‘How to move away from 10 years of legacy code’. It will be a fantastic night…

My first experience as a speaker

My 2 cents for speaking in front of a crowd…

For my 29th birthday this year, I tried something out of my comfort zone; speaking in front of a crowd… but not just any ordinary crowd, it was a bunch of people who shares the same passion as me. It was a great experience all round. At first it was nerve wrecking, the idea of sharing my experience and knowledge with people from the same industry. Many nights preparing, thinking about what to say, how to present and deliver my points across and then wondering whether people will be judgemental. At the end of the day, we are our own worst critic. It was exhilarating speaking up and realizing a lot of people have also gone through the same obstacles as me, understood where I was coming from and wanting to know about my journey.

Speaking at industry meetups are brilliant to share your ideas around. You may find that someone has already tackled a challenge you are experiencing and can give some valuable advice! Don’t be shy, I encourage all of you to try it 😉

Some photos of the night and my speech.

SydCSS - View from in front the crowd
SydCSS – View from in front the crowd

Grrrrrunt… I wish I met you earlier…

Thanks to my new manager, Chris Iona, we have put aside time to experiment with a new tech stack at hipagesGroup! All that time in the past few years spent on concatenating, obfuscating, minifying and versioning files along with slow and manual deployment processes… gee, I wish I have been introduced to Grrrrunt earlier! It may have taken some time for me to get on the band wagon, but it’s better to be late than never!

So what is Grunt?

Grunt is a Javascript Task Runner which helps you automate repetitive tasks and simplify chores. To experiment with Grunt, you will first need to get familiar with npm (node package manager) and node.js.

Here are some helpful links to help you get started:

I would personally recommend the following plugins:

My 2 cents on icon fonts

Craig, our UX Design Lead, recommended we transition to icon fonts last year and since then, my love for icon fonts just keeps growing! I could go on and on about the benefits of using icon fonts…

  • great for responsive web design and retina display
  • less maintenance on your sprite sheets
  • can all be controlled with CSS – colors, sizes, shadows

Get on the band wagon. Implement icon fonts onto your sites! Here are a few resources to help you get started:

Tips on implementation

  • Make sure your fonts are served from the same domain or enable CORS
  • Remember to version your font file in your CSS if you’ve added or modified your icon list
  • [My Fav] Use pseudo elements to stack multiple fonts (a.k.a stackicons) on top of one another
  • Convert SVGs into icon fonts in IcoMoon (click on Import)

Speaker for SydCSS June Meetup

Thanks to the encouragement of Fiona Chan, I have put my hand up to be a speaker for the June SydCSS meetup! What better than to share my experience and journey of frontend development in the last 5 years at hipagesGroup? It is all still a learning curve for me every day but I like it that way. Web development is ever-changing and evolving, how do we pick the ‘least wrong tool’? 10 years code, 3 frameworks, 1 developer… How do we move away from 10 years of legacy code? Counting down the days… ok I better go and get my slides ready now…