Category Archives: Web Development

Anything web development stuff!

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:
http://blog.teamtreehouse.com/introduction-neat-semantic-sass-grid

and

https://webdesign.tutsplus.com/articles/6-essential-bourbon-neat-mixins–cms-24894

and

If you want to accelerate your SASS development even further:
https://www.sitepoint.com/5-ways-improve-sass-bourbon/

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: http://blog.danyll.com/setting-up-express-with-nginx-and-pm2/

– 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: http://angular-ui.github.io

And the link to a tutorial by Bee Kalliger: https://youtu.be/bSy_eTK1MkU?list=PLGwTv1L2yi5jovGz3OFO3lL7ZrmZ1D2so

Or video down below:

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.

Parent.call(this)

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!