Bootstrap 3 Tips and Tricks

##Optionally Remove the Gutter Padding from Columns Bootstrap lets you customize and compile your own build based on your needs. This is anything from colors, container sizes, and to gutter padding size. However, sometimes you’ll come across an instance where you just want a single row with no padding. Most cases you’ll just individually select the column and kill off the padding with CSS. However, you can build your own utility class helper to do this on the fly....

November 29, 2014

My favourite Modules Pattern & JQuery Plugin boilerplates

###The Reavealing Module Pattern //define your app's namespace var app = app || {}; //your module inside 'app' namespace var app.myModule = (function ($) { // 'this' refers to global window //private variable var secret = { message: 'I am pretty awesome' }; //private function var _tellTheSecret = function() { return secret.message; } //public function function init() { //init the module base on the present of the element on the page if ($('#some-element')....

November 26, 2014

AngularJS - Differences between the service(), factory(), and provide() methods

In Angular, services are singleton objects that are created when necessary and are never cleaned up until the end of the application life-cycle (when the browser is closed). Controllers are destroyed and cleaned up when they are no longer needed. This is why we can’t dependably use controllers to share data across our application, especially when using routing Services are designed to be the glue between controllers, the minions of data, the slaves of functionality, the worker-bees of our application....

November 14, 2014

Cordova plugin for Google Play Game Service

Recently, i developed a small hybrid game using Ionic Framework and it requires me to have Leaderboard feature to display players highscore. Everything is fine with iOS, for a simple google search, you will find this plugin: cordova-plugin-game-center and intergrate it is pretty easy. When it come to Android, i did the search again, but i do not found any suitable plugin for my purpose. Only one repository on Github and it says ‘work in-progress’, but i didn’t see any progress at all....

September 24, 2014

CSS3: Translate3d vs Translate performance

Recently i’m develop a small game using Ionic Framework and there are a bit of movement inside the game that require me to use CSS3 transition. At first, i think using translate(x,y) will be faster because ‘3d’ is somehow overheaded for me. What i need is just ‘2d’. After experience the lagging in mobile device, i did some research on the internet and very supprised that translate3d(x,y,z) is faster in most of browser....

September 13, 2014

Google Image Layout

Recently, my project required me to implement an image gallery which has the layout look like Google Image Search, Flickr Explore, Google Plus Photo Gallery. They have a really nice looking gallery, with images aligned without croping, re-ordering, and the images scale by its ratio. I wonder how they did that, and after some investigation on the internet, i found a very nice solution. Which i will share with you here....

September 12, 2014

Rename your App in Cordova config.xml make the Build Failed

I’ve been struggling with XCode to make my app running after i renamed the project. ####To rename your iOS build: 1. run command: cordova platform rm ios 2. change your app name in *config.xml* 3. run command cordova platform add ios ####The platform will be create normally, plugins are installed. But XCode build states that there are some files missing You need this step to solved the problem: copy the ios src of the plugin to projektname/platforms/ios/Appname/Plugins/plugin....

August 28, 2014

How Pinterest construct their layout?

I love Pinterest because of the Pins layout. And recently, i developed a small Mobile App for choosing Hairstyles, i want to mimic Pinterest layout for my image gallery. And here is how Pinterest do it (the algorithm): #Beforehand: - Absolutely position the pin containers - Determine column width - Determine margin between columns (the gutter) #Setup an array: - Get the width of the parent container; calculate the # of columns that will fit - Create an empty array, with a length equaling the # of columns....

August 7, 2014

Angular’s dependency injection annotation process

Source: Todd Motto For those familiar with Angular’s dependency injection (DI), this post will dive into some of the “under the hood” methods that power the DI process. For those who aren’t familiar with the concept, DI is a way of asking for necessary dependencies instead of passing them. We merely tell a method, function, object what dependencies we want - and tucked away we get our dependencies given to us....

July 23, 2014

Correct way to integrate Cordova Plugin in AngularJS, Ionic Framework

If you are using Ionic Framework to develop your mobile app, even if it’s the simplest app, you need at least some cordova plugin to get your app work nicely. The first and most important is the Device Plugin, which will inform your Javascript application when the Device is ready. This is luckily, already handle by Ionic Framework itself, in your app.js file, just inject $ionicPlatform to your controller. For example:...

July 20, 2014