A web browser is a software application for retrieving, presenting and traversing internet.

WEB BROWSER

Mordern Browsers

Browser Internals

Want to Know more about your browser functioning -

www.html5rocks.com/en/tutorials/internals/howbrowserwork

Web Developer ??

As web developer how you can increase your productivity ?

Time is the key factor in staying productive

Use yours efficiently

Use css preprocessors

• SASS
• LESS
• STYLUS

CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain.

This is where a preprocessor can help.

SASS

Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.

CSS

SASS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

VARIABLES

CSS

SASS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

NESTING

CSS

SASS

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

MIXINS

CSS

SASS

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

EXTEND/INHERITANCE

CSS

SASS

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

OPERATORS

COMPASS

Why frontend developers love compass ?

1. Experience cleaner markup without presentational classes.
2. It’s chock full of the web’s best reusable patterns.
3. It makes creating sprites a breeze.
4. Compass mixins make CSS3 easy.
5. Create beautiful typographic rhythms.
6. Download and create extensions with ease.

SUSY

Build Web Layouts Easily with Susy 

Optimise Your Results

CSS Optimisation

• CSSMinify
• CSS Compressor
• YUI Compressor

TOOLS - 

Writing beautiful css

Javascript Optimisation

JS Minification

JS uglification

Optimal use of code.

Image Optimisation

1. Image Sprites
2. Use tools like smushit, imageoptimizer to reduce the size of images being rendered.

AUTOMATION

GRUNT

The Javascript Task Runner

module.exports = function(grunt) {

  grunt.initConfig({
    jshint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        globals: {
          jQuery: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['jshint']);

};

Sample Gruntfile.js

More resources for FRONTEND TOOLS

http://fredsarmento.me/frontend-tools/

https://github.com/codylindley/frontend-tools

THANK YOU