Sass – Bourbon – library useful mixins

Bourbon is gem library used for css to help developers and designers style their html.

To install the gem make sure ruby and gem is installed. Afterwards type:
@gem install bourbon

Then go to your sass/scss folder and bring up command line for it. and type: @bourbon install
it should create a folder with all your bourbon functionality and in your scss put `import ‘bourbon/bourbon’` at the beginning and you can code away with the help of mixin/functions for accelerated developing.

Bourbon: Useful Mixins
– background: tint(red, 40%); –> Mix with white
– background: shade(blue, 60%); –> mix with black
– .element {
@include position(relative, top right bottom left);
– size(20px); outputs width: 20px; height: 20px;

Check these beginners tutorial for using bourbon + neat:



If you want to accelerate your SASS development even further:

Credit to the authors.

Putting your NodeJS up for production, user consumption?

Now that I have a better understanding in how WebApps with NodeJS, it seems like a very daunting task having not deal with Apache/PHP technology anymore. As a PHP Developer myself its hard trying to wrap the idea of doing everything in Javascript, from logic to api calls.

It is expected that web technology will go in this direction, making the browser do all the work in the front-end side of things to asynchronously calling apis for data.

When your app is good to go, then what?? Put it up of course! How?? Its not like apache serving all dynamic and static files for you now.

Check this site out for reference as well:

– NginX
– Nodejs
– PM2
– Express
– Any database of your choosing, I found out that relational databases is not a very popular choice for developers in the Node Community, but you can use them and its base wholly on your preference and use cases.

Check the video below for reference.

What is DevOps?

A new term for new-comers or old timer like myself going back to their field. This term seem to be toss around anywhere I look, I found a video that would explain what it actually means and why it is important.

Summary: A DevOps is term where Developers and Operators collaborates to build a working system to eliminate issues that could arise when a feature needed by a developer isnt present on the platform a product they are implementing.The video below will explain further.

AngularUI: Companion suite for AngularJS

We all know that Angularjs is a framework solely for Front-End development and NodeJS for server-side stuff.

Coding from scratch to variety of features can really be a pain, but now with AngularUI a companion “plug ins” it takes all the drama and hassle from creating them from scratch. This is one I will definitely use for my projects .

There are lot more out there that an Angularjs developer can use. I also like to include to use Bower package manager to install them.

Here is the link to it:

And the link to a tutorial by Bee Kalliger:

Or video down below:

Challenge#1: Angularjs Shopping Cart

Here is a challenge to me. Create an Angularjs app using various technology that I have encountered during my learning.


  • AngularJS
  • Express
  • ejs templating
  • ui-bootstrap
  • Gulp for task runner and build
  • REST api call or database call using MySql
  • Sass for styling
  • NodeJS and other nodeJS plugin
  • GitHub

This is just a simple SPA(single page) where the app gets its products from a REST api call or a query to a mysql database, and presented to the visitor. The visitor will add items to the shopping cart, fill up a form and submit their details until the last check out page.

There is alot going on this application. I will also make a repository on Github so I can grab the project anywhere I use a different computer. My goal is to create the application within a month. And hopefully will teach me a whole lot more about AngularJS.

Wish me luck!

Javascript Inheritance

How do you do inheritance in Javascript? These 3 lines of code are the key:

Child.prototype = new Parent();

you assign the prototype of child to parent, to inherit parents prototype, methods and data.

Child.prototype.constructor = Child;

Then you assign the name of the child object, to its constructor property to give back its identity.

And inside the Child object constructor, you call the super class constructor, to take the context of “this” of the Child object into the Parent constructor. Here you can initialize any members of the parent object of the child property and control goes back to the child’s constructor and initialize the child property this time. Also known as Constructor Chaining.

Took me  awhile to understand it. I hope anyone reading this would get it the first time otherwise let me know!

2018 © Ideas, designs and algorithms