Updates
14th Sep 2012 :
1. Alternate method to install Yeoman using Chocolatey.
2. Github Yeoman windows issues link.

15th Sep 2012 :
1. Added description (Chocolatey method).

17th Feb 2013 :
1. On Feb 15th 2013 Yeoman 1.0 BETA released. Its not supported on windows yet. 

3rd March 2013 :
1. Yeoman 1.0 Beta can be installed on windows.

This post is for Yeoman 0.9 and a new beta version, Yeoman 1.0 Beta is available and installation instructions can be found here Yeoman 1.0 Beta installation on windows

What is Yeoman?

Its a tool to make the front-end development workflow easier. It includes tools and front-end frameworks that helps to create web apps quickly and easily.

Features

Initialize and scaffold a new project
Build & deploy app
Launch server, preview & live reload
Run automated tests using PhantomJS
Install & update packages
Customise your apps framwork
Genarator for chrome app

Introduction

Memoization is a technique used to cache result of a previously calculated value thus can avoid the need to recalculate.

Simplest example.

function square(num){
    return num*num;
}

square(10) //100

Each time when we call square(), value will re-calculate. Caching result is importent when we do CPU intensive tasks.

Re-writing above code using cache

I’m using both windows and mac. Sometimes I missed up with keyboard shortcuts. Both OS has its own plus and minus. Enter/Return key opens a folder in windows but it renames file/folder in mac, in windows double clicking on titlebar maximize window, but same thing minimizes window in mac (you have to enable it from preference > doc – “Double-click a windows titlebar to minimize”).

Global shortcuts

Quickly open finder

cmd + opt + spacebar = win + E

Today upgraded to OS X Mountain lion. It took around 8hr to download 4.37GB with my home connection. First glance its pretty impressive and it took hardly 25 min to install everything in my retina mac book pro.

TOC

Introduction
Process
Accessing developer tool
Shortcuts
Anatomy
    Navigation sidebar
        Resources panel
        Storage
        Instrument
        Search
        Issue
        Debug
        Breakpoint
        Log
    Content browser
    Details sidebar

Introduction

Safari 6 web developer tool has substantial makeover from previous versions. It helps to prototype, debug and optimize web sites and safari extensions.

Process

Web development process can be generalized as follows. Developer tool can accelerate this process.

Prototype Prototype using HTML, CSS & javascript. Safari Snippet editor can help to create and test code snippets / functional modules. Use web Inspector console to find any errors in the code. User agent switcher will help to quickly check code is working as expected in different browsers and devices. Open site in other browsers and devices directly from safari develop menu.

What is Codebase?

Codebase is a code snippet management tool. It has 2 parts – 1. Server side code 2. Dreamweaver extension.

Following like demonstrates how Codebase will function.

View codebase

Aim is to create a node package and publish it in npm registery. This is a simple example code with which you can understand all the process involved to create, install and publish node packages.

What is nodejs?

Hmm.. you will get plenty of good resources when you google it with this keyword. Start by installing it from here : nodejs

What is npm?

Node package manager and it is used to add or remove node applications. It came as a default package in newer node installations, both windows and mac. Install it on other platforms by refering this resource. Check out all the npm registry entries here.

Install your fevorite application – npm install app-name. Example:- npm install jsbeautify

Lets start with a demo (only works in chrome).

Weight scale

Usage

Drag and drop weight block into scale [over doted outline]. Double click to remove a weight. Demo uses jQuery for DOM manipulation, css3 rotation for needle movement.

HTML5 Drag and drop basics

Before implementing check the readiness of drag and drop Currently it better to use jQuery UI or other JavaScript libraries to do a better cross browser handling.

StyleDocco is a style guide and documentation generator. It parse CSS comments in your stylesheet and creates style guide based on the comments. Its a nodejs package and can install using npm install.

Example style document generated using styledocco – twitter bootstrap

Nodejs

It is JavaScript running on server using google’s V8 JavaScript engine. Download latest node installer (win/mac/source code) form nodejs.org & install it.

After installation open command prompt and type “node -v”. You will get the node version number.

in this post I’ll show you how to replace system fonts in windows with Roboto. Roboto is crafted for requirements of UI & high-resolution screens.