Less for beginners

After long time I came back to post for LESS what I learnt.

LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site. LESS is a dynamic style sheet language that extends the capability of CSS. LESS is also cross browser friendly.

What is a CSS Preprocessor?

CSS Preprocessors do not replace CSS. In fact, preprocessors simply give us extra functionality such as variables, mixins, operations and functions with which we can streamline how we create and manage CSS files.

Preprocessors allow us to define properties once and then reuse them throughout our project in a much more dynamic way that plain CSS can’t.

What is LESS?

LESS is a relatively new preprocessor, being only about 4 years old. It's often compared to SASS, a slightly older preprocessor.Both LESS and SASS have their roots in the Ruby programming language but are now used much more widely. LESS is now based on Javascript.People use LESS in order to create a pre-determined set of colors for their site. They can define a particular style once and then re-use it wherever needed.

It enables customizable, manageable and reusable style sheet for web site. LESS is a dynamic style sheet language that extends the capability of CSS. LESS is also cross browser friendly.

CSS Preprocessor is a scripting language that extends CSS and gets compiled into regular CSS syntax, so that it can be read by your web browser. It provides functionalities like variables, functions, mixins and operations that allows you to build dynamic CSS.

History

LESS was designed by Alexis Sellier in 2009. LESS is an open source. First version of LESS was written in Ruby and in the later version it is replaced by JavaScript.

Features

·         Cleaner and more readable code can be written in an organized way.

·         We can define styles and it can be reused throughout the code.

·         LESS is based on JavaScipt and is super set of CSS.

·         LESS is an agile tool that sorts out the problem of code redundancy.

Advantages

·        LESS easily generates CSS that works across the browsers.

·        LESS enables you to write cleaner and well organized code by using nesting.

·        Maintenance can be achieved faster by the use of variables.

·        LESS enables you to reuse the whole classes easily by referencing them in your rule sets.

·        LESS provides the use of operations that makes coding faster and saves time.

Disadvantages

·        It takes time to learn if you are new to CSS preprocessing.

·        Due to the tight coupling between the modules, more efforts should be taken to reuse and/or test dependent modules.

·        LESS has less framework compared to older preprocessor like SASS, which consists of frameworks Compass, Gravity and Susy.

How to install LESS?

·         Step(1):We need NodeJs to run LESS examples. To download NodeJs, open the link https://nodejs.org/en/

·         Step(2): Next, run the setup to install the Node.js on your system.

·         Step(3): Next, install LESS on the server via NPM(Node package manager). Run the following command into the command prompt.

npm install  –g less

·         Step(4): Next, after successful installation of LESS, you will see following lines on the command prompt –

·         -- less@2.6.1

·           +-- errno@0.1.4

·           | `-- prr@0.0.0

·           +-- graceful-fs@4.1.3

·           +-- image-size@0.4.0

·           +-- mime@1.3.4

·           +-- mkdirp@0.5.1

·           | `-- minimist@0.0.8

·           +-- promise@7.1.1

·           | `-- asap@2.0.3

·           +-- request@2.69.0

·           | +-- aws-sign2@0.6.0

·           | +-- aws4@1.3.2

·           | | `-- lru-cache@4.0.0

·           | |   +-- pseudomap@1.0.2

·           | |   `-- yallist@2.0.0

·           | +-- bl@1.0.3

·           | | `-- readable-stream@2.0.6

·           | |   +-- core-util-is@1.0.2

·           | |   +-- inherits@2.0.1

·           | |   +-- isarray@1.0.0

·           | |   +-- process-nextick-args@1.0.6

·           | |   +-- string_decoder@0.10.31

·           | |   `-- util-deprecate@1.0.2

·           | +-- caseless@0.11.0

·           | +-- combined-stream@1.0.5

·           | | `-- delayed-stream@1.0.0

·           | +-- extend@3.0.0

·           | +-- forever-agent@0.6.1

·           | +-- form-data@1.0.0-rc4

·           | | `-- async@1.5.2

·           | +-- har-validator@2.0.6

·           | | +-- chalk@1.1.1

·           | | | +-- ansi-styles@2.2.0

·           | | | | `-- color-convert@1.0.0

·           | | | +-- escape-string-regexp@1.0.5

·           | | | +-- has-ansi@2.0.0

·           | | | | `-- ansi-regex@2.0.0

·           | | | +-- strip-ansi@3.0.1

·           | | | `-- supports-color@2.0.0

·           | | +-- commander@2.9.0

·           | | | `-- graceful-readlink@1.0.1

·           | | +-- is-my-json-valid@2.13.1

·           | | | +-- generate-function@2.0.0

·           | | | +-- generate-object-property@1.2.0

·           | | | | `-- is-property@1.0.2

·           | | | +-- jsonpointer@2.0.0

·           | | | `-- xtend@4.0.1

·           | | `-- pinkie-promise@2.0.0

·           | |   `-- pinkie@2.0.4

·           | +-- hawk@3.1.3

·           | | +-- boom@2.10.1

·           | | +-- cryptiles@2.0.5

·           | | +-- hoek@2.16.3

·           | | `-- sntp@1.0.9

·           | +-- http-signature@1.1.1

·           | | +-- assert-plus@0.2.0

·           | | +-- jsprim@1.2.2

·           | | | +-- extsprintf@1.0.2

·           | | | +-- json-schema@0.2.2

·           | | | `-- verror@1.3.6

·           | | `-- sshpk@1.7.4

·           | |   +-- asn1@0.2.3

·           | |   +-- dashdash@1.13.0

·           | |   | `-- assert-plus@1.0.0

·           | |   +-- ecc-jsbn@0.1.1

·           | |   +-- jodid25519@1.0.2

·           | |   +-- jsbn@0.1.0

·           | |   `-- tweetnacl@0.14.1

·           | +-- is-typedarray@1.0.0

·           | +-- isstream@0.1.2

·           | +-- json-stringify-safe@5.0.1

·           | +-- mime-types@2.1.10

·           | | `-- mime-db@1.22.0

·           | +-- node-uuid@1.4.7

·           | +-- oauth-sign@0.8.1

·           | +-- qs@6.0.2

·           | +-- stringstream@0.0.5

·           | +-- tough-cookie@2.2.2

·           | `-- tunnel-agent@0.4.2

·           `-- source-map@0.5.3

What is REST? What is RESTful API's

The REST stands for " REpresentational State Transfer".

• Resource-based vs action-based in some other services systems
• Representations that are pass back client server
• Six Constrains : of restful architecture
• Uniform interface
• Stateless
• Client server
• Cacheability
• Layed system
• Code on demand

       The rest is Resource Based.

• things vs actions
• Nouns vs verbs
• Versus SOAP-RPC
• Indentified by URIs
• Multiple URIs may refer to some resource
• Separate from their representation(s)

                         Representations

• How resources get manipulated
• Part of the resource state
• Transferred between client and server
• Typical JSON or XML

Ex:

• Resource : person 
• Service    : Contact information (GET)
• Representation :
• name, address, phone number, email
• JSON or XML format (Most commonly JSON format)

                                     Architectural Format

                            Uniform Interface

• It defines the interface between client and server
• simplifies and decouples the architecture
• Fundamental to RESTful design

               this means:

      

                   HTTP verbs (GET,PUT,POST,DELETE)

                   URIs (resource name)

                   HTTP response (status, body)

                             Stateless

• Server Contains no client state
• Each request contains enough context to process the message
• self-descriptive message
• Any session state is held on the client

                              Server

• we assume a disconnected system
• separation of concerns
• really defines what user interface and what services. 
• Uniform interface is the link between the two
• understanding that the restful client-server

                             Cacheable

• Server responses (representations) are cacheable
• Implicity
• Explicity
• Negotiated

                               Layered System

• Client can't assume direct connection to server
• software to hardware intermediaries between client and server
• Improves scalability

                               Code on Demand

• Server can temporarily extend client
• Transfer  logic to client
• Client executes logic

                        Ex:

                               Java applets

                               Java Script

• The only optional constraint

Compliance with REST Constraints allows

• Scalability
• Visibility
• Simplicity
• Portability
• Modifiability
• Reliability

 

How to face interview. Attitude is everything