AWS: VPC detailed explanation and use cases

Virtual Private Cloud in Amazon Web Service.

Fundamentals in creating your own Virtual Data Center using VPC in AWS. I have always wonder as a developer how would your audience consume your product? I thought of AWS (IaaS), then you got EC2, a virtual machine that can service any request you set it up to. But to build a whole bunch of them and provides different services to your customers or your internal consumption, that would look like a data center that we know naturally, only the know-how people can establish and a simple developer such as ourselves is a huge challenge to difficult to near impossible.

Enter VPC(Virtual Private Cloud). The author above puts a very thorough explanation on how to use it and what is.

Also you might wanna have read through this the difference between VPN, VPS, VPC:
Credit to the Authors who put a lot of effort to creating reference and tutorials like this for us new comers!

Hello Semantic UI Front-End Framework!

While doing my own quick template as I am experimenting with variety of frame work available including bootstrap, bourbon neat (sass), I find myself just nit picking every features that each framework has.

Bootstrap is good but it didnt let me choose any particular feature I want, for example the nav-bar in Bootstrap seems pretty generic, I want the behavior but I dont want the look and feel. I suddenly remember Semantic UI and its looking pretty promising from way back since 2013.

It lets you nit pick like I said any features you like including their grid responsive system similar to bootstrap grid system. It also have themes you can choose and combine with your current template which is really neat.

Check out this website for incorporating it in your project be it React, Nodejs or angularjs or just normal template project like I am doing now

More coming up.

Shorthand CSS Rule Reference

Im having trouble understanding and memorizing short-hand rule so I thought I made myself a quick reference.

background: (color) (image: use url()) (repeat: repeat-x,y,no-repeat) (attachment: scroll,fixed,local,initial,inherit) (position(x,y): in pixels or left top right bottom combination of 2s, or center)

border: (width) (style) (color | initial | inherit)

border-radius: (top-left-radius) (top-right-radius) (bottom-right-radius) (bottom-left-radius)

columns: (width | auto) (column count | initial | inherit)

flex: (grow: 0 - N) (shrink: 0 do not shrink) (basis: this is the width, auto | initial | inherit | value px %)

flex-flow: (direction: row,row-reverse,column,column-reverse,initial,inherit) (wrap: wrap, nowrap, wrap-reverse, initial, inherit)

font: (font-style) (font-variant font-weight) (font-size/line-height) (font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit)

@font-face: (font-name) (url)
Note: use any font-name and reference them to your css eg. .my-container{ font-family: font-name }
position: No shorthand for position use SASS mixin.

transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay)

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!

2018 © Ideas, designs and algorithms