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:


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 very first backbone app

At work, we thought we would try to integrate a mini backbone app into the main site. We chose to take the out log in status on the header into a backbone app.

So what is Backbone.js?

Backbone.js is a JavaScript frontend framework that provides structure for your application code, the event-based communication for your application, and the necessary interconnectedness for your data, application logic, and user interface. Simply put, Backbone.js allows us to develop applications much easier and better (more scalable, reusable, and modular code).

What stood out to me straight away is the structure of setting up a Backbone app. As I have been writing php for some time, I am familiar with MVC structure and so I was immediately intrigued. There are many different ways you can design and make your own decisions with the architecture for your app in Backbone.js.

Great reads to get started

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)

TGIF: Thank Google – It’s Fun

Craig Henneberry, our UX Design Lead showed me a few google “easter eggs” for some Friday fun! Search the following on Google:

  1. Tilt
  2. Blink Tag
  3. do a barrell roll

They work on a mobile device too! Pretty funky, eh?

Now here’s the most impressive one… On Google Images, search for:

Now go and play a retro video game in your spare time on google! Too bad this one is not responsive but probably a good thing for me… I could be here all day!

Sources: BuzzFeed – 18 Cool Internet Tricks You Didn’t Know About