LESS - dynamic stylesheet language for developers

So less saved my soul :) Why ? And what is less ?

Let's start with our wiki definition:

LESS is a dynamic stylesheet language designed by Alexis Sellier.

The most important part of this definition is that less is dynamic stylesheet language.
Traditionally, CSS belongs to a group of languages called "declarative langugages". Declarative languages are those which describes computation in terms of what needs to be done and not how. That means that your responsibility as a developer is just to declare language constructs, that will be interpreted or compiled later.
Declarative languages have no notion of memory, which strictly separates them from imperative programming languages.
HTML and SQL are  examples of widely used declarative languages.
So you can't for example put a HTML  value in a variable and do some operation on that variable, without a help of imperative language.

But, with the help of less, we can treat our CSS values dynamically, and create more powerfull formatting for our apps.

Let't see some examples:

/*   assign a value to a variable, and use it everywhere */

@color: #eb5200;

p{
    color:@color;
}

div.main{
    color:@color;
}

/+ now both p, and div share a same color value */

Mixin is another powerfull feature of less:

/*basic class with variable value*/
.some_class{
    color:@color;
}

/*extend div.main class (mixin) with .some_class properties */
div.main{
    .some_class;
}

There are more advanced topics like nesting, mixpaths, arguments and functions which you can read here.

Css is more of a designers stuff.  I am not a designer,
 so less helped me  to do formatting part of development in  a more programmatic fashion.

Happy Coding.

color mixer app updated with rgb to hex converter

I changed a design of my color-mixer app, by adding rgb to hex convertor. Hex values can be seen and copied from the input field.

Here's a new code:

Html:

Red: 
Green:
Blue: 

And js:

// set body to listen for change event
document.body.addEventListener("change",function(){

    var red,green,blue,aaa,convert;

    //query dom elements
    red = document.querySelectorAll("input")[0];
    green = document.querySelectorAll("input")[1];
    blue = document.querySelectorAll("input")[2];
    val = [red.value,green.value,blue.value];

    //component to hex
    function compToHex(c) {
        var hex = c.toString(16);
            return hex.length == 1 ? "0" + hex : hex;
        };

    //rgb to hex
    function rgbToHex(a,b,c) {
            return "#" + compToHex(a) + compToHex(b) + compToHex(c);
        };

        //update input fields and page background
        convert = rgbToHex(parseInt(val[0]),parseInt(val[1]),parseInt(val[2]));
        document.body.style.background = convert;
        var h = document.getElementById("hex");
        h.value = convert;
});

Happy Coding

Chrome snippet extension

Since I am dedicated chrome developer  tools user ( especially console ), there are cases in which I need to type a long lines of repeating code.
Chrome has a nice snippet feature, which is hidden under settings icon.  To enable it just go to settings button ( in the bottom right corner ), then choose experiments and check the snippets support checkbox.

Now, when you open sources panel, there is a snippet area. Just create new snippet ( right click to open small menu ), enter you code and have fun.

Important note: you may have experimental extensions disabled. If so, just type about:flag in the address bar, and find experimental extensions api, which needs to be enabled.

Here is a screenshot from my snippet with  console panel opened:

Happy Coding

the power of vim folding

Code folding is very powerful technique, which is not so obvious. But when you see how folding can help you organize your code ( especially long nestings ) you'll start using immediately.

Of course, vim has a great support for folding.

Here are some commands ( in normal mode)

zf - create folding ( after selecting in visual mode)
za - toggle foldings
zc - fold close
zo - fold open
zE - remove all folding 

Here are some screencasts of folding a long function ( 100 lines of code ). To see a flow of folding, select an image, and then blogger will open nice gallery. After that just scroll througn images with middle mouse wheel.

Happy Coding

Cool HTML5 color slider with vanilla javascript (chrome only)

HTML5 is full of surprises. Here is a cool demo how to create custom color slider with only HTML5 and javaScript. But before we dive into creating slider, there are some thing that needs to be sad about HTML5.

First, HTML5 is job in progress. It is not standardized yet. That leads us to one big issue - browser support. Before doing some actuall work be sure to test in all modern browsers.
Here is one great resource that can help:

http://caniuse.com/#compare=ie+5.5,ie+6,ie+7,ie+8,ie+9,ie+10

Next, HTML5 together with CSS3  is bringing new refreshment to 20 year old technology. Now HTML is not just a markup language, which we use to outline our document. It is a platform for creating powerfull web applications. Some of main changes includes new structural tags ( header, section,artice ...) that are semantically focused and closer to users and clients. Also, there are new application specific tags ( video,audio... ), new form  elements ( email,range,color...).

Let's see out example. First html:

<ol>

<li><input type = "range" value = "0" id = "r" min = "0" max = "255"></li> 
<li><input type = "range" value = "0" id = "g" min = "0" max = "255"></li>
<li><input type = "range" value = "0" id = "b" min = "0" max = "255"></li>

</ol>

Put this html snippet somewhere inside body.

Now javascript. Place script in external file or between script tags:

// lets use new dom selectors
var r = document.querySelectorAll("input")[0];
var g = document.querySelectorAll("input")[1];
var b = document.querySelectorAll("input")[2];

// and functionality
// adding change event ( which fires on value change of input elements ) to body
document.body.addEventListener("change",function(){
    document.body.style.background = "rgb("
    + [r.value,g.value,b.value].join(",") // join values of sliders and update background color
    + ")";
});

Now, when you move the slider, background color of your page shoud change also.

Happy Coding.

mixins pattern

Javascript doesn't have support for muptiple inheritance.That means that objects by default can inherite only from one class (constructor). But because of expressive power of language, we can easily implement multiple inheritance with mixin pattern.

At the begining, let't quote Stoyan Stefanov from his book Javascript patterns:

Code reuse is the goal - inheritance is just one of options throughout we can achive code reuse

Lets see some code:

function mix() {// no parameters specified
    var arg, prop, child = {};
    for (arg = 0; arg < arguments.length; arg += 1) {// length
        for (prop in arguments[arg]) {// browse properties
            if (arguments[arg].hasOwnProperty(prop)) {// check if properties exists
                child[prop] = arguments[arg][prop]; //copy
            }
        }
    }
return child;
}

// call a function with mixed objects as arguments
var cake = mix(
    {eggs: 2, large: true},
    {butter: 1, salted: true},
    {flour: "3 cups"},
    {sugar: "sure!"}
);

As you can see, it is simple to copy properties with this  pattern, and emulate multiple inheritance.  One interesting thing in this pattern is that in function mix there are no paramaters, all the job is done with arguments.  First we detect arguments length, then check  if propeties exists and finally we copy them into new object. This example is also great because it uses nested loops and conditions.

Happy Coding.

Fun with type casting in javascript

Let's have some fun with type casting in javascript today :

Do you know what is:

"2" // string as we know

what about:

+"2" // number

but wait, what is this:

1 + +"2" //  3
1 - - "3" // 4

boolean:

+true // 1
+false // 0
-true // -1
-false // 0
!!true // true
!!false // false

meet miss tilde:

~true // -2
~~true // 1
~false // -1
~~false // 0
1 - ~true // 3
1 + ~~false // 1

a real fun:

- ~ -2 // -1
- ~false //1
- ~0 // 1
! ~ -2 // false
! ~ -1 //true

You just saw hidden treasure of our favourite language.

Happy Coding :)