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!

Advertisements

HackTank – Introducing Oracle

HipagesGroup held their very first hackathon a few days ago and it was extremely exciting. This hackathon is slightly different to any other hackathon – it has a twist. We have combined concepts from SharkTank into our hackathaon where the company invited some of the board members to be the advisers and judges for the event. We presented our ‘business’ idea of what we would like to build in front of the board members on the first day where they gave us advice based on their expertise. We had 48 hours to complete the project and present it back to the board members. The race is on!

I teamed up with 3 others to get out Oracles, a NLP (natural language processing) classifier and an image recognition classifier built in AngularJS and Ionic framework, an open source front-end SDK for developing hybrid mobile apps with HTML5. It was my first time using the ionic framework but it was absolutely easy to use – I would truly recommend anyone who hasn’t checked out Ionic to have a try. We loaded our data into Metamind.io, to build our classifier, based on deep learning algorithms. As for our image recognition classifier, we used the CloudSight API.

Although we didn’t win as a team, I was extremely humbled to be announced the winner of the Inaugural Above and Beyond Award by our VP of Engineering and VP of Product.

hacktank

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:

I heart Handlebars

I was assigned an extremely exciting project at work the other day. We would like to make our articles section of hipages.com.au responsive – 100% mobile first responsive! We were excited to be using the new infrastructure built with node.js. I worked alongside our engineering excellence developer, Siyang Bi to create the ‘holy grail’ approach, as Airbnb calls it, it runs on both sides of the wire, serving up real HTML on first pageload, but then kicking off a client-side JavaScript app as users interacts with the app. This means we use the same template for both server side and client side. We did this with handlebar templates.

Write your own Register Helpers

A handy tip I got taught was to look at the built-in helpers for handlebars in the git and write your own based of theirs as a starting point.

Great Reads

Digging Angular

After diving into backbone last month, I thought it’s time to have a look at AngularJS. What’s the hype with AngularJS? Why is it a popular choice for large scale websites? I often ask people at meet-ups whether their company uses Backbone, Ember and/or Angular and quite a few people usually reply with ‘Angular’. My next question usually would be why they have decided to choose AngularJS and majority of the responses is that AngularJS is backed by Google and that there is a wider support and documentation.

AngularJS is considered a new paradigm for web development. Why? Well, here are some Angular vocabulary and examples to show you just how powerful Angular can be…

Directives

One of the first observations I made when I first started looking into Angular was the statement on the AngularJS website; “AngularJS is what HTML would have been” – that’s a pretty strong and bold statement! AngularJS allows you to ‘extend’ the HTML vocabulary. You can set your own ‘directives‘; custom attributes and elements.

<html ng-app="ngApp">

The ng-app attribute in the html tag above is an example of a directive which is used to auto-boostrap the application. This is commonly forgotten by beginners.

Data Binding

The two way data binding in Angular is extremely powerful and simple – it’s automatic synchronisation! When the model changes, so does the view.

<input type="text" ng-model="firstName" />
hi {{firstName}}!

Filters

AngularJS comes with many handy filters built-in. Filters allow you to manipulate and filter the presentation of your views. You can apply Angular filters directly by extending the bindings in your HTML views

{{ 12 | currency }}

The Code School “AngularJS Tutorial for Beginners” is also a great way to get an insight of what it’s like to code in Angular.

There are still lots to learn in AngularJS – will definitely write more as I dive deeper… stay tuned!

It takes time to ‘git’ it

At work, we have been transitioning our codebase from SVN to Github. With ten years of legacy, we thought it would be a lengthy process but with the right team of people, dedication and perseverance, it can be done and it’s not as overwhelming as you think!

If you’re new to Git, you can get some pretty handy tools like Atlassian’s SourceTree to help visualize your changes through an interface but if you’re like me, (trying to put my geek hat on here) and like to type in the Terminal, then the GitHub Help docs and Atlassian’s Git Basics (I truly recommend them!) may help you get started.

Some Quick Git Terminology

(The definitions below are taken from GitHub and Atlassian Git Tutorials)

  • Fork – A fork is a copy of a repository. Forking a repository allows you to freely experiment with changes without affecting the original project.
  • Branch – A branch represents an independent line of development. Branches serve as an abstraction for the edit/stage/commit process. You can think of them as a way to request a brand new working directory, staging area, and project history. New commits are recorded in the history for the current branch, which results in a fork in the history of the project.

Quick Git Cheatsheat for Dummies

I find that these are the commands I tend to use most days… this is a guide to help get you started only ;p

  • git clone [github repo]
  • git add [your file(s)]
  • git commit -m “[your commit comments]”
  • git remote -v
  • git remote add upstream [github repo]
  • git push origin [branch name]
  • git pull upstream master

Some other useful Reads and Resources: