Front-end workflow redefined talk at Coffee @ DBG are up now.

Front-end development is complex as we have to deal with diversified project environments. Tooling will help to ease our workflow.

This presentation is about creating component based web development. Modular web development with JADE, SCSS and JS.

Front-end Workflow Redefined

Front-end development workflow is becoming increasingly demanding as the complexity of the environment grows. Thankfully, there are many tools that can make your life as a front-end developer easier and perhaps, more rewarding.

The primary objective of this session is to get an idea about end-to-end front-end workflow and useful tools. We will discuss hot tools like Yeoman, Grunt and Bower. But the session is not limited to these tools - we will touch each phase of front-end development like boiler-plating, preprocessors, performance, documentation, code quality, reporting and architecture etc.

Tooling for modern web app development

Linktomob created with an aim to share link between multiple devices without any hassles. Switching links between mobile and desktop browsers is a difficult process. We face this issue when building responsive site, mobile apps/sites or like to view site on mobile device when you are on a desktop. In such situations we will mail link and open it on mobile device. But if we want to test that link on a friends device or on a public testing device, in such situation sharing the same link on magnitude of devices will be a Herculean task.

How to use it?

1. Go to http://linktomob.appspot.com/.
2. Enter your mail id and activate your account.
3. You will get a unique URL (http://linktomob.appspot.com/{id}) and a bookmarklet.
4. Drag n Drop bookmarklet into browser.
5. Go to any link and click on linktomob bookmarklet.
6. This will map the current url with your unique URL. You can access the site from any device using the link.

Features

1. No login.
2. No browser plugin or add-on installation. Browser bookmarklet for all browsers.
3. No app installation on mobile device.
4. Platform independent - works on iOS, Blackberry, Windows phone, Android, Nokia etc..
5. You have to remember only your linkmark url.

Linktomob URL structure

URL
http://linktomob.appspot.com/{id}
Eg: http://linktomob.appspot.com/1

list linkmarked urls
http://linktomob.appspot.com/{id}:{pageno}
Eg: http://linktomob.appspot.com/1:10

regenerate bookmark
http://linktomob.appspot.com/{id}/bookmark
Eg: http://linktomob.appspot.com/1/bookmark

April 8th 2013

Yomen normal installation (npm install) works fine now. No need to do extra steps for windows.

1. install -g yo grunt-cli bower
2. yo webapp
3. npm install && bower install
4. grunt

Introduction.

Yeoman 1.0 Beta out a few days ago. Its not officially supported on Windows, as of now we have to do some extra work to make it work on windows. Installing this version is simpler than previous Yeoman 0.9 on windows.

Don’t use Yeoman 1.0 Beta in production, it may have bugs.

In new version tools are divided into 3 category.

yo for scaffolding tools.
grunt 0.4.0 as build tool.
bower as package management tool.

Bower and Grunt 0.4.0 will work on windows. I faced problem when installing Mocha and Imagemin.

Installation

1. Install nodejs if its not installed.
2. Uninstall previously installed gruntjs.
3. Install yo, grunt-cli and bower using:- install -g yo grunt-cli bower

Note: You must install Compass if planned to use SASS/SCSS.

Create a project folder and open it in cmd.

type: yo webapp

It will ask you some questions about the type of the project. Once project created, open package.json and delete

"grunt-contrib-imagemin":"0.1.2"
"grunt-mocha":"~0.2.2"

Save it and run

npm install && bower install

Sit and relax, it will install all project dependencies. Run following command once installation completes.

npm install grunt-contrib-imagemin

It installs optipng and jpegtran. After installation open package.json and add “grunt-contrib-imagemin”:“0.1.2” in the list.

Now comes the hardest part : Mocha test suite installation.

Go to phantomjs.org and download phantomjs for windows and extract it in a folder named ‘phantom’. Its important to name it as phantom.

Run npm install grunt-mocha

Count on the messages and stop execution by pressing ctrl+c when you saw “Requesting…” (Terminate the batch job).

Open the following location, node_modules/grunt-mocha/node-modules/grunt-lib-phantomjs/node_modules/phantomjs/lib/ copy and paste phantom folder (extracted files from phantomjs.org) here.

Open package.json from project root folder and add “grunt-mocha”:“~0.2.2” back to the list. Close cmd and reopen it. Now everything in place and we can play with yeoman commands.

run grunt

This will generate production quality version of your app in dist folder.

Yo commands

yo webapp - creates project structure
grunt test - test against Mocha test suite
grunt server - runs your app in local server
grunt watch - watch modified fles and recompile it. 

More on Yeoman 1.0 beta Yeoman github documentation

Errors may encounter during installation

Some of the following issues may encounter during the installation.

Bower error status code of git :127

I got error 128 when I tried powershell.

Solution: add Git path in windows environment variables.

Error listen EADDRINUSE ….

Sometimes when you use grunt server, may encounter this error. This is because of the port is being used by another program. Find the program which uses the port.

netstat -aon | grep 35729 to filter the port and PID. Open task manager and kill the process. Run grunt server again.

Summary

Yeoman 1.0 Beta is simpler than previous version. There are differences in the way command supplies, previously to boot up local server we used ‘yeoman server’, but now it is ‘grunt server’. Yeoman, grunt and bower are separated in this version and it is more flexible than previous Yeoman 0.9.

Slidemote is a web app created for easy integration of remote control facility for html5 presentations.

Integration

1. Add following script in your presentation. <script type="text/javascript" src="http://slidemote.jit.su/slidemote.js#slidemote"></script>
2. Append your id at the end of the script (Eg: …slidemote.js#YOUR_ID ).
3. Goto - Slidemote.
4. Enter YOUR_ID & connect.
5. Slidemote currently supports (basic level) - revealjs, impressjs, deckjs and flowtime.

How it works?

Slidemote uses socketio to leverage websocket communication. Slidemote is hosted at Nodejitsu, a nodejs hosting service.

http://slidemote.jit.su/slidemote.js#id will communicate to server with your ID. Provide same id at “http://slidemote.jit.su”, it will establish a websocket connection.

Demo

Go to Slidemote and enter following key and press connect. Once connected you are able to control this presentation. It will take a few seconds to connect, be patient. Don’t refresh page, result will be a new key and you have to enter it again on ‘slidemote.jit.su’ to establish connection.

Key:

Other demos

Flowtime ImpressDeckjs

Screenshots

Revealjs controls

Deckjs & Impressjs controls

Flowtime controls

Video

This is a quick post on a simple technique I used to create responsive image. This is a javascript solution, but it will work in javascript disabled environment by using a noscript fallback. This technique will start with mobile image first & there is no need to parse and replace image sources.

I’m using google picasa as my image host. I can resize images dynamically by setting width/height in the url.

Responsive images demo

Eg: //lh3.googleusercontent.com/-Rw0hpxt70co/ULeX80ncW3I/AAAAAAAAE6g/kIDj6u1zdyI/s640/query-loader1.jpg

Setting s320 will create image with width/Height (resize proportionally) 320px. We can also pass width or height. Setting w320 will create an image with width 320px or passing h320 will constrain height of dynamically created image to 320px. Now we have our server, which can provide us different images sizes upon request.

You can use your own server methods or other resources like src.sencha.io to resize images on the fly.

Technique

Using css fluid image technique scale image to viewpot. Get the device size and insert image using script.

CSS

1
2
3
4
5

img {
  display: block;
  border: 0;
  max-width: 100%;
}

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<script>
    var cwResImg = function () {
  var cwBpArry = [1382, 992, 768, 480], //Image breakpoint arrays
      currIndex,
      cwResImgVal = Math.max(screen.width,screen.height),
      hdpi = window.devicePixelRatio > 1 ? window.devicePixelRatio : 1,
      rwdImgId = "rwdimg-"+Math.floor(Math.random()*1000),
      tpl='<img src="{src}" alt="{alt}" title="{title}" id="{rwdImgId}" {attributes}>';

  cwBpArry.push(cwResImgVal);
  cwBpArry.sort(function(a,b){return a-b});

  if(Array.prototype.indexOf){
      currIndex = cwBpArry.indexOf(cwResImgVal) + 1;
  }else{
      for(var i in cwBpArry){
          if(cwBpArry[i] === cwResImgVal){
              currIndex = parseInt(i)+1;
          }
      }        
  }

  cwBpArry[currIndex] = cwBpArry[currIndex] || cwBpArry[currIndex-1];

  var imgWid = Math.max.apply(Math, cwBpArry) <= cwBpArry[currIndex] ? cwBpArry[currIndex-2] : cwBpArry[currIndex];

  return {
      imgWid : imgWid,
      hdpi: hdpi,
      id:rwdImgId,
      rwdImg:function(arg){
          
          var src = arg.src || arguments[0] || '',
              src = src.replace(/\/s\d*\//, '/s'+imgWid * hdpi+'/'), //picasa image size replacing (s340 to device width)
              title = arg.title || arg.alt || arguments[1] || '',
              alt = arg.alt || arg.title || arguments[2] || arguments[1] || '',
              attributes = arg.attr || arguments[3] || '',
              img = tpl.replace('{src}',src).replace('{title}',title).replace('{alt}',alt).replace('{rwdImgId}',rwdImgId).replace('{attributes}',attributes);
              document.write(img)
      }
  };
}()
</script>

Paste it in your page header. This will set width of the screen into ‘cwResImg’ variable. You can set image breakpoints in this variable cwBpArry = [1382, 992, 768, 480];

HTML
Replace images in HTML with.

1
2
3
4
5
6
7
8
9
10

<noscript>
  <img src="http://lh6.googleusercontent.com/-nI33VLdtmFo/UN9MmPN6bHI/AAAAAAAAFEE/1uJBJ7-plEs/s720/Webpagetest-IE8-Octopress-Default-waterfall.png" alt="Responsive images test">
</noscript>
<script>
  cwResImg.rwdImg("http://lh6.googleusercontent.com/-nI33VLdtmFo/UN9MmPN6bHI/AAAAAAAAFEE/1uJBJ7-plEs/s450/Webpagetest-IE8-Octopress-Default-waterfall.png", 'Responsive images text script');

  ---or----

  cwResImg.rwdImg({src:'http://lh6.googleusercontent.com/-nI33VLdtmFo/UN9MmPN6bHI/AAAAAAAAFEE/1uJBJ7-plEs/s450/Webpagetest-IE8-Octopress-Default-waterfall.png', alt:'Responsive images text script', title:'Responsive images text script'});
</script>

It has two parts
1) noscript tag contains a standard image for fallback. If js is not supported, this image will show.

2) Script part
Syntax

1
2
3

cwResImg.rwdImg("src","alt","title","class='myclass'");
or
cwResImg.rwdImg({src:"src", alt:"alt",title:"title",attr:"class='myclass'"})

1

cwResImg.rwdImg("http://lh6.googleusercontent.com/-nI33VLdtmFo/UN9MmPN6bHI/AAAAAAAAFEE/1uJBJ7-plEs/s450/Webpagetest-IE8-Octopress-Default-waterfall.png","Responsive images text script","Responsive images text script");

JavaScript variable ‘cwResImg’ will replace by the max width of the device.

When page loads url will be like the following, if its a desktop with resolution more than 1382px

//lh6.googleusercontent.com/-IdiwvKGQ8Lk/UN9KOZvdW7I/AAAAAAAAFDk/iSvy1_SZrrM/s1382/RTT%2520Decodize%2520github.png

Demo

Responsive images

Performance and Bandwidth

After including this there is a noticeable performance improvement in iPhone waterfall view.

Before (11.866s)

After (8.841s)

Drawbacks
Messy HTML.
Accessibility

Speed and performance
Octopress framework uses Jekyll SSG (Static Site Generator) to build pages. All pages are static and no server side processing involved. Requested page can deliver instantaneously by the server into user’s machine.

Hosted at Github
Site is hosted on Github as Github Pages. Since its in Github, server uptime and response time are guaranteed.

Ease of use
After setting up everything, 2 steps involved in creating and publishing your next post

$ rake new_post["new post"]
$ rake deploy.

Markdown
Octopress uses Markdown. Its simple & clean as writing a text file/email.

Clear, simple & responsive Octopress theme
Octopress theme is responsive and fit nicely in tablet and phones. Theme built with HTML 5 Boilerplate(HB5) & SCSS.

Editor freedom
No more miss-formatted posts, adjustment ‘<br>’ or switching between ‘HTML’ and ‘Visual’ tab in wp post editor to align content correctly. You can use any text editor to write blog post.

No DB / No Dynamic pages
No DB, no dynamic pages, no routing etc.. Everything is static, so no server side processing costs involved.

Minimal page weight
Semantic markup and no unnecessary tag inclusion by cms.

Improved RTT
RTT (Round trip delay) are better and shorter now.

Old wordpress site

Octopress Github page

Tested using just-ping.com

No more plugin hassle
Bye bye to w3 total cache, SEO plugins, broken and heavy social plugins etc..

Version control and Collaboration
Pages are hosted in Github, version control comes naturally. Collaboration is possible through fork & pull requests.

More control over script loading
Its difficult to edit/delete scripts and css loaded by third party plugins in wordpress. In Octopress it like editing html file.

Better security
This site was hacked once. Wordpress has security flaws. Github is more secured than wordpress.

Preloaded plugins
Octopress comes with some default plugins - Disqus, Twitter, Delicious, Facebook, Pinterest, Analytics etc..

Migration options
You can switch from other blogging platforms (wp, drupal etc..) to octopress without much frustration.

Other SSG Options
If octopress sucks somewhere, other options are available Hacker news, List of SSG

Tips, SEO & performance

Migrating posts from wordpress
I have tried ‘WordPress to Jekyll Exporter’ but it didn’t worked for me. Since, I have manageable no of posts, I manually converted all of them into markdown. If you have too many posts, Exitwp may be a good option.

URL mapping
Octopress default permalink structure is /blog/:year/:month/:day/:title/. We have to set it right with old wp permalink structure. I changed it to /:categories/:title/. We can configure it in _config.yml.

Social links
Set all social, search, feed links configuration settings in _config.yml.

# Github repositories
github_user:
github_repo_count: 4
github_show_profile_link: true
github_skip_forks: true

# Twitter
twitter_user:
twitter_tweet_count: 4
twitter_show_replies: false
twitter_follow_button: true
twitter_show_follower_count: false
twitter_tweet_button: true

# Google +1
google_plus_one: true
google_plus_one_size: medium

# Google Plus Profile
# Hidden: No visible button, just add author information to search results
googleplus_user:
googleplus_hidden: false

# Pinboard
pinboard_user:
pinboard_count: 3

# Delicious
delicious_user:
delicious_count: 3

# Disqus Comments
disqus_short_name:
disqus_show_comment_count: false

# Google Analytics
google_analytics_tracking_id:

# Facebook Like
facebook_like: yes

SEO
Octopress won’t create keywords and description for each post. Added two new fields, keyword and description on each new post for better SEO optimizations.

---
layout: post
title: "Moving from Wordpress to Octopress redesign notes"
date: 2012-12-30 00:00
comments: true
categories: html

keywords: octopress, static site generators (SSG), performance, optimization, SEO octopress, wordpress, Jekyll, GitHub
description: Re-design note on migrating from wordpress to octopress. Note includes octopress optimization, octopress SEO tips.
---

Google analytics
Added google Analytics ID in _config.yml and included { % include google_analytics.html %} in custom footer. Otherwise google analytics won’t appear in all page.

# Google Analytics
google_analytics_tracking_id:

Disqus
Added Disqus shortname in ‘disqus_short_name:’ field. You must migrate all comments to new domain in order to appear it in new site. Login to your disqus account. Go to Admin > Migrate threads tab. Run domain migration wizard. It might take a full day to populate all comments in your blog.

_config.yml # Disqus Comments disqus_short_name: disqus_show_comment_count: false

login to disqus.com

Images and videos
I have hosted media on picasaweb google. Its better to host all your media like images and videos in flickr or google picasa.

Advantages of uploading images in picasa are
1) Images will be delivered from CDN (free).
2) Images will cache & resize on the fly.
3) We can create custom image sizes.
4) Optimize image by selecting image quality.

//lh3.googleusercontent.com/-Rw0hpxt70co/ULeX80ncW3I/AAAAAAAAE6g/kIDj6u1zdyI/s640/query-loader1.jpg

s640 - is the key. It will set image size to 640. Also, we can use w640 or h640. This values will restrict width and height respectively.

AAAAAAAAE6g/kIDj6u1zdyI/s100/query-loader1.jpg - width/height 100px
AAAAAAAAE6g/kIDj6u1zdyI/w200/query-loader1.jpg - width 200px
AAAAAAAAE6g/kIDj6u1zdyI/h50/query-loader1.jpg - height 50px

5) Automatic domain sharding by google for uploaded images.

Browser has restriction on concurrent connections per hostname (HTTP1.1 states its 2 connections, but modern browsers has more than that - check here. Advantage of domain sharding is browser can parallelly download more resources. Following are some locations from where image is fetching.

lh3.googleusercontent.com
lh4.googleusercontent.com
lh5.googleusercontent.com
lh6.googleusercontent.com

Performance improvements
All pages are static. HTML files will quickly downloaded into user’s machine. Following are some changes I made in default files to leverage performance.

1. Moved google font api file to top

includes/custom/head.html - file contains google fontface css. {% include custom/head.html %} moved above all scripts tag.

1
2
3
4
5
6
7
8

<link rel="canonical" href="">
<link href="/favicon.ico" rel="icon">
{ % include custom/head.html %} //Moved above all script tags
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<script src="/javascripts/modernizr-2.0.js"></script>
<script src="/javascripts/ender.js"></script>
<script src="/javascripts/octopress.js" type="text/javascript"></script>
<link href="/atom.xml" rel="alternate" title="Decodize" type="application/atom+xml">

Its always better to load css first.

II. Reduce SSL negotiation time by removing https: from image src. I’m using google picasa as my media host, so urls are https:// by default. I didn’t noticed SSL negotiation time in IE until I tested site in wepagetest.org.

https://lh3.googleusercontent.com/-myRXm2caL_w/UFGha2n2IMI/AAAAAAAAEeA/NuBd3P0YJ0Y/s700/Yeoman.png

Chrome dev tool won’t display this delay, since chrome SSL negotiations are unnoticeable.

Following is the webpage test result in IE

Before (8.087s)

After (4.019s)

III. Behavior of loading third party scripts. Following third party scripts are loading in this site

Google analytics
Twitter recent files
Facebook
Google+
Twitter share
Disqus

There will be a huge performance improvement when we load all the third-party scripts after pageload event. Octopress is using Social button BFFs to load scripts asynchronously (also async in script). But its not enough Check this link, third party scripts are still blocking or using network resources of the original site content. There is no use of loading third party script with out loading actual site contents first. So we have to load all social stuffs after page load.

Following waterfall is from an inside page.

Before optimization : Dom loaded [blue line] 18.330s and Start render at 4.312s

After optimization : Dom loaded [Blue line] 4.019s and Start render at 2.679s

When you compare above waterfalls, in second one all social and sharing scripts and resources initiated by them are start loading only after onload event.

When we insert third party scripts it not only loads and parse. It also requests another scripts and image resources. When we inserting it on document ready, our original site content is still loading. Third party resource requests will block network. It not only helps to reduce network requests but, also helps browser for better Garbage collection and faster painting. Quicker onload event help to execute our custom scripts on dom much earlier (eg: show/hide some element, show message etc..)

Changes made on following files inside source/_includes

twitter_sharing.html
google_plus_one.html
facebook_like.html
disqus.html
asides/twitter.html

I have used modified version of lazy loading third party scripts.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script>
(function(w, d, s) {
  function go(){
    var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.src = url; js.id = id;
    fjs.parentNode.insertBefore(js, fjs);
  };
    load('//connect.facebook.net/en_US/all.js#appId=272697932759946&xfbml=1', 'fbjssdk');
    load('https://apis.google.com/js/plusone.js', 'gplus1js');
    load('//platform.twitter.com/widgets.js', 'tweetjs');
  }
  if (w.addEventListener) { w.addEventListener("load", go, false); }
  else if (w.attachEvent) { w.attachEvent("onload",go); }
}(window, document, 'script'));
</script>

1) twitter_sharing.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>
  (function(w, d, s) {
    function go(){
      var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.src = url; js.id = id; js.async = true;
        fjs.parentNode.insertBefore(js, fjs);
      };
      load('http://platform.twitter.com/widgets.js', 'twitterwid');
    }
    if (w.addEventListener) { w.addEventListener("load", go, false); }
    else if (w.attachEvent) { w.attachEvent("onload",go); }
  }(window, document, 'script'));
</script>

2) asides/twitter.html

Twitter feeds will only start loading after page completely loaded.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script>
    (function(w, d, s) {
      function go(){
        var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.src = url; js.id = id; js.async = true;
        $(js).load(function(){
            getTwitterFeed("praveen_vijaya", , );
        });
        fjs.parentNode.insertBefore(js, fjs);
      };
        load('/javascripts/twitter.js', 'recentTweets');
      }
      if (w.addEventListener) { w.addEventListener("load", go, false); }
      else if (w.attachEvent) { w.attachEvent("onload",go); }
    }(window, document, 'script'));
</script>

3) disqus.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<script type="text/javascript">
  var disqus_shortname = '{ { site.disqus_short_name }}';
  { % if page.comments == true %}    
      // var disqus_developer = 1;
      var disqus_identifier = '{ { site.url }}{ { page.url }}';
      var disqus_url = '{ { site.url }}{ { page.url }}';
      var disqus_script = 'embed.js';
  { % else %}
      var disqus_script = 'count.js';
  { % endif %}

  (function(w, d, s) {
      function go(){
      var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
      if (d.getElementById(id)) {return;}
          js = d.createElement(s); js.src = url; js.id = id; js.async = true;
          fjs.parentNode.insertBefore(js, fjs);
      };
      load('http://' + disqus_shortname + '.disqus.com/' + disqus_script, 'discuss');
      }
  if (w.addEventListener) { w.addEventListener("load", go, false); }
  else if (w.attachEvent) { w.attachEvent("onload",go); }
  }(window, document, 'script'));
</script>

You can download all files from here and can replace your existing octopress files for better performance.

Summary

I’m really satisfied with octopress till now.

1.Using queryloader2 jquery plugin (Size 4.42 MB)

2.Normal page loading (Size 2.25 MB)

The images are requested by the parser and same resource is again requested by the script engine. Following methods can be used to create preloading effect.

Simple preloader

HTML

<body>
    <!-- Your HTML Code here -->
    <div id="loader"></div>
</body>

CSS

#loader{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background:#fff url(../images/preloader.gif) 50%;
}

JS

window.load = function(){ 
    var loader = document.getElementById('loader'); 
    loader.style.display = 'none';
}

Percentage preloader

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js">
<script src="preloader.js">

CSS

#loaderMask{
    text-align: center;
    padding-top: 20%;
}
#loaderMask span{
    font-size: 5em;

}

JS – preloader.js

$(document).ready(function () {
    "use strict"
    //indexOf support for IE8 and below. 
    if (!Array.prototype.indexOf){
      Array.prototype.indexOf = function(elt /*, from*/){
        var len = this.length >>> 0;

        var from = Number(arguments[1]) || 0;
        from = (from < 0)
             ? Math.ceil(from)
             : Math.floor(from);
        if (from < 0)
          from += len;

        for (; from < len; from++){
          if (from in this &&
              this[from] === elt)
            return from;
        }
        return -1;
      };
    }

    //bgImg for holding background images in the page & img array for images present in the document(<img src="">).
    var bgImg = [], img = [], count=0, percentage = 0;

    //Creating loader holder. 
    $('<div id="loaderMask"><span>0%</span></div>').css({
        position:"fixed",
        top:0,
        bottom:0,
        left:0,
        right:0,
        background:'#fff'
    }).appendTo('body');

    //Using jQuery filter method we parse all elemnts in the page and adds background image url & images src into respective arrays.
    $('*').filter(function() {

        var val = $(this).css('background-image').replace(/url\(/g,'').replace(/\)/,'').replace(/"/g,'');
        var imgVal = $(this).not('script').attr('src');

        //Getting urls of background images.
        if(val !== 'none' && !/linear-gradient/g.test(val) && bgImg.indexOf(val) === -1){
            bgImg.push(val)
        }

        //Getting src of images in the document.
        if(imgVal !== undefined && img.indexOf(imgVal) === -1){
            img.push(imgVal)
        }

    });

    //Merging both bg image array & img src array
    var imgArray = bgImg.concat(img); 

    //Adding events for all the images in the array.
    $.each(imgArray, function(i,val){ 
        //Attaching load event 
        $("<img />").attr("src", val).bind("load", function () {
            completeImageLoading();
        });

        //Attaching error event
        $("<img />").attr("src", val).bind("error", function () {
            imgError(this);
        });
    })

    //After each successful image load we will create percentage.
    function completeImageLoading(){
        count++;
        percentage = Math.floor(count / imgArray.length * 100);
        $('#loaderMask').html('<span>'+percentage + '%'+'</span>');

        //When percentage is 100 we will remove loader and display page.
        if(percentage === 100){
            $('#loaderMask').html('<span>100%</span>')
            $('#loaderMask').fadeOut(function(){
                $('#loaderMask').remove()
            })
        }
    }

    //Error handling - When image fails to load we will remove the mask & shows the page. 
    function imgError (arg) {
        $('#loaderMask').html("Image failed to load.. Loader quitting..").delay(3000).fadeOut(1000, function(){
            $('#loaderMask').remove();
        })
    }

});

Demo Site preloader demo

Download Site preloader source

PIXI Demo
PIXI Page
PIXI Download

Note: Demonstrated template is not mine.

Install

Include pixi.js, pixi.css and jQuery in your site.

<link rel="stylesheet" href="http://praveenvijayan.github.com/PIXI/code/pixi.min.css">

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script src="http://praveenvijayan.github.com/PIXI/code/pixi.min.js"></script>

Usage

Press G to activate the overlay. Drag n Drop design mockup/template into the overlay.

Press shift + &mouse; drag image to adjust.

Press 0-9 to set opacity.

Shortcuts

G Toggle overlay. Z Bring fornt or sent to back [z-index:0-9999]. ← Moves overlay image 1px left. → Moves overlay image 1px right. ↑ Moves overlay image 1px up. ↓ Moves overlay image 1px down. shift + Drag Moves overlay image. 0 – 9 Sets overlay opacity. P – Disables overlay’s pointer event. When pointer event is none, you can’t drag n drop images. Activate it (press ‘P’) when you want to inspect underlaing elements.

Browser support

PIXI uses HTML5 DnD, File API & Local storage to do things. It won’t work in IE. Tested in chrome & Firefox.

Sublime text 2 has so many brilliant features that saves time & effort. Sublime text 2 supports UTF-8, but right now it lacks capability to handle bidirectional languages like Arabic, Hebrew etc… Sublime BiDi Plugin will enable this shortcoming. Sublimes’s future version may support Right-To-Left Languages. Developers from MENA region will love this feature.

Mac

Windows

Installation

1. Clone it from github to your package directory.

   https://github.com/praveenvijayan/Sublime-Text-2-BIDI

Mac

Windows

Change your font in sublime user settings [Windows]

Set it to Arial or any other font that supports Arabic.

Usage

• Open document
• Press Ctrl+b or Tools > Bidirectional text

Notes

This plugin is in its early stage. I don’t know Arabic. I have tested using pattern matching.

Issues

Please post issues here : Sublime BiDi issues

Contribute

Thanks

https://github.com/MeirKriheli/python-bidi
https://github.com/mpcabd/python-arabic-reshaper.

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

More on Yeoman

Installation

MAC OSX & Linux Installations Yeoman site

Install Yeoman using Chocolatey (Method 1)

Chocolatey is a package manager for windows. Its like Linux apt-get. Once Chocolatey installed, you can install Chocolatey packages from windows cmd. Install Chocolatey & type cinst yeoman it will prompt you to install all necessary tools one by one.

Steps

1. Goto chocolatey.org Chocolatey NuGet is a Machine Package Manager, somewhat like apt-get, but built with windows in mind.

2. Open cmd & paste

   C:> @powershell -NoProfile -ExecutionPolicy unrestricted -Command “iex ((new-object net.webclient).DownloadString(‘http://bit.ly/psChocInstall’))” && SET PATH=%PATH%;%systemdrive%\chocolatey\bin

3. Type

   c:> cinst yeoman

It will fetch & install all dependent files.

Done!!

Yeoman installed on windows and now its time to play with yeoman commands. Close and reopen cmd.

C:> yeoman init –disable-insight

This will create bolierplate for your next application. To launch preview server and run application locally use yeoman server --disable-insight.

more commands

Windows (Method 2)

Prerequisites

This is a self-contained Windows-based installer that includes the Ruby language, an execution environment, important documentation, and more.

Download & install

Compass is an open-source CSS Authoring Framework.

Download & install

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

Download & install

Git is a free and open source distributed version control system

Download & install

PhantomJS is a headless WebKit with JavaScript API.

Download & Install – You have to add path in Windows Environment Variable.

The easiest way to use Git on Windows. [Optional]

Download & install

Python is a programming language that lets you work more quickly and integrate your systems more effectively.

Download & install

Steps

1.Download and install all above tools

There are 2 method to install Yeoman.
——a. Open command prompt & type C:\npm install yeoman
——b. You can install using Git

Clone Yeoman using git.

–Or–

If you have installed Github for windows tool. “Clone in windows” from Github Yeoman page.

Clicking on “Clone in Windows” will open up windows github tool.

After cloning right click and open files in explorer.

shift + right click inside the root folder. You will get an option “Open Command Window Here”.

npm install -g

You will get following screen if its a success.

Done!!

Working with Yeoman

yeoman init

yeoman init      # Initialize and scaffold a new project using generator templates
yeoman build     # Build an optimized version of your app, ready to deploy
yeoman server    # Launch a preview server which will begin watching for changes
yeoman test      # Run a Mocha test harness in a headless PhantomJS

yeoman install   # Install a package from the client-side package registry
yeoman uninstall # Uninstall the package
yeoman update    # Update a package to the latest version
yeoman list      # List the packages currently installed
yeoman search    # Query the registry for matching package names
yeoman lookup    # Look up info on a particular package

more commands and help

Github Yeoman Windows issue

File bugs & issues here github yeoman windows issue

Summary

Its a super cool tool that helps to streamline front-end workflow.

Resources

Yeoman home page
Yeoman Github page
Yeoman issues
Yeoman documentation

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

Method 1

function square(num){
  var result = '';
  if(!square.cache[num]){ 
     console.log("Computing value...");
     result = num*num;
     square.cache[num] = result;  
  }

  return square.cache[num];

}

square.cache = {}

square(10) //First time when we call this function. It calculates the value & cache it.
square(10) // Second time onwards it return the result from cache.
square(20) // square function will calculate again if its a new value.

Method 2 Using hasOwnProperty

This method is useful when there are multiple arguments.

var square = function(num){

            var key = Array.prototype.slice.call(num).join(""); 
            // This won’t work if argument send as Object. Eg:-  newFun({name:”my name”, age:20});

    if(!square.cache[key]){
        var result={};

                result = num *num;
        //Computation
          console.log("Computing value...");      
    square.cache[key] = result;
}

return square.cache[key];
}

square.cache = {};

Method 3 Using JSON.stringify, Array.join or argument.callee.

This method is useful when there are multiple arguments.

var square = function(num){

            var key = Array.prototype.slice.call(num).join(""); 
            // This won’t work if argument send as Object. Eg:-  newFun({name:”my name”, age:20});

    if(!square.cache[key]){
        var result={};

                result = num *num;
        //Computation
          console.log("Computing value...");      
    square.cache[key] = result;
}

return square.cache[key];
}

square.cache = {};

—-or—-

var square = function(num){
    var key = JSON.stringify(Array.prototype.slice.call(num));

    if(!square.cache[key]){
    var result={};
    //Computation
        console.log("Computing value..."); 
        result = num*num;
    square.cache[key] = result;
}

return square.cache[key];
}

square.cache = {};

—or—-

var  square = function(num){
    var thisFunc = arguments.callee, result;
           if(!thisFunc.cache[num]){
                   result = {}
                   //Computation
                   console.log("Computing value..."); 
                   result = num*num;
                   thisFunc.cache[num] = result;
           }
return thisFunc.cache[num];
}

square.cache = {}

Above method is not recommended since arguments.callee should be avoid and ECMAScript forbids use of arguments.callee() in strict mode.

Method 4

This will create a higher-order function called memoize() that accepts function and return a memoized version of it.

function memoize(f){
                var cache = {};

                return function(){

                    var key = JSON.stringify(Array.prototype.slice.call(arguments));

                    if(key in cache){
                        console.log('From cache...')
                        return cache[key]
                    }else{
                        console.log('Computing..')
                        return cache[key] = f.apply(this,arguments);
                    }

                }

            }

//Usage

var squareMem = memoize(square)
squareMem(10);//100

—Or—

Function.prototype.memoiz = function(){

               var cache = {}, self = this;

               return function(arg){

                   var key = JSON.stringify(Array.prototype.slice.call(arguments));

                   if(key in cache){
                        console.log('From cache...')
                        return cache[key]
                    }else{
                        console.log('Computing..')
                        return cache[key] = self(arg);
                    }

               }

            }

//Usage
var squareMem = square.memoiz()
squareMem(10); 
squareMem(20);
squareMem(30);
squareMem(40);
squareMem(50);

Under Closure section you can find all the cached results

memoiz.js is a memoization library hosted in Github.

References Faster javascript memoization Speed up your JavaScript, Part 3 A Better Javascript Memoizer

Global shortcuts

Quickly open finder

cmd + opt + spacebar = win + E

Close window cmd+w = crtl + w

Show desktop fn + f11 = win + D

Lock screen shift + ctrl + power = win + L

Force quit applications cmd+opt+esc = ctrl+shift+esc

Switch between opened application cmd+tab = ctrl+tab / win+tab

Switch between same application window cmd + ~

Increase volume or brightness by quarter increment shift+option+f12 – volume shift+opton+f2 – brightness

Show/Hide – Dock opt+cmd+D

Screen capture shift + cmd + 3 shift + cmd + 4

Finder shortcuts

Mac automatically refreshes every folder when something modifies [fails sometimes]. One annoying thing when working with finder is icons are not arranging automatically to grid.

There are a few ways to arrange items in finder. Clean up command will snap item to grid. Following key stocks will arrange items in a nice way and these are roughly equal to ‘Refresh’ (F5) in windows.

cmd+opt+1 – clean up by name
cmd+opt+2 - clean up by kind
cmd+opt+5 - clean up by date modified
cmd+opt+6 - clean up by size
cmd+opt+7 - clean up by type

Tip 1: Drag and release folder while pressing cmd will arrange folder/files to grid. Tip 2 : Press opt key & right click -> ‘Arrange by’ will change to ‘Sort by’. You can sort using name, kind, size etc..

Go to folder cmd+shift+G network cmd + K using terminal open Parent folder cmd + uparrow open folder cmd+down back cmd+[ forward cmd+]

Open folder cmd + downarrow or cmd+o = enter

Duplicate a file/folder cmd+D

Open a folder in terminal from finder. You can use either Drag n Drop folder into terminal icon or enable service “New terminal at folder” from Preference > keyboard. Right click on any folder and select “New terminal at folder” from the context menu.

$ open .

Hidden screencast tool

Quicktime has a screen capture tool.

Automator tips

Automator is a tool that helps to automate repeated tasks.

Copy file path

Some times you need to copy the path of a specified folder or file. You can use automator to copy the path.

1. Open automator
2. Select services
3. Change – “service receives selected” to “file or folder” in application to “Finder“.
4. Type “copy” in the filter section and drag n drop – “Copy to clipboard” to the workflow pane.
5. Save it as – “Copy file path”.

Now you can right click on any folder/file and can copy path. Assign a keyboard shortcut from Preference > keyboard.

Change image size

Batch renaming files

Tools

maximize window Right zoom is a little free tool that converts mac’s default maximize behavior to maximize window to all available screen space.

Quick look plugins Do a 3 finger tap on any file will reveal a quick view with some basic info. You can extend its capabilities using plugins. Check quick look plugin to find more details.

Quick look plugins

Resources

15 Automator and AppleScripts You Can’t Live Without 10 Awesome Uses for Automator Explained

Installation was smooth & fast.

After Installation I got an alert like this. Some programs are not compatible with OSX 10.8. Fortunately only program that is not compatible in my software lot was old Transmit FTP client.

Ater Installation notification center showed one more update

NetBeans 7.1.x was not working with Mountain Lion. In order to work java applications properly, you have to download latest Java version from Apple. Select java preference using spotlight, new java version will automatically install in your system [java version “1.6.0_33”].

NetBeans version 7.2 is available now for download. Which is more compatible with Mountain Lion. In order to install applications from other sources, you have to change a ‘security & privacy’ setting from preference.

Happy coding!!

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.

Test & debug Test in different browsers and platforms. Web Inspector shows all the bugs and structural error in the code. Console, issue navigator, Breakpoint navigator, database navigator & log will help to identify error.

Optimize Tune your site for blazing performance by minimizing load time and avoiding performance bottlenecks. Instrument navigator provides tool to analyze and profile site. It shows how much time it take to load a particular resource, site latency due to any server side scripts, missing resources, css selector performance, javascript evaluating and rendering time etc..

Accessing developer tool

By default developer tool is not activated. Activate it from preference > advanced tab pane.

Safari developer tool shortcuts

Web Inspector : cmd + opt + I [mac] ctrl + alt + I [win]

Console : cmd + opt + c [mac] ctrl + alt + c [win]

Clear console : cmd + K or ctrl+ L [mac] ctrl + L [win]

Debugger

Step Out : F8 or cmd + shift + ;

Step Into : F7 or cmd + ;

Step over : F6 or cmd + ‘

Continue : cmd +/ or cmd+shift+y

Anatomy

Web developer is divided into 3 main sections.

1. Navigation sidebar
2. Content browser
3. Details sidebar

Navigation sidebar

This pane hosts main sections of web developer tool. It has a global search to filter resources/items in the currently selected navigator item.

Example : typing “script” will reveal all file names contain script. *.min.js will filter all min javascripts.

Resource panel It shows all the resources used in current site – images, scripts, frames, stylesheets etc.

Storage Storage helps with debugging client side storage. You can inspect local key-value storage, offline application cache, web database and cookies. Now you can edit and delete local storage data. Indexed DB is missing. It is possible to execute SQL command against displayed database. One problem I noticed is the missing clear command.

Instrument Optimizing web site is a tedious job. You have to know which script is blocking the site, which resource is taking more bandwidth etc.. Instrument provides tool to mitigate optimization issues. Instruments gives us a total view of network requests, css layout calculations and rendering and javascript events involved.

1. Network Request Timeline
2. CSS Layout calculations
3. Javascript & Events

When network is selected content browser will show all the detailed list of resources that took the bandwidth & time to took to load. Hovering each item in content browser will bring a small icon that leads to the exact resource. Ex: image, js etc..

Click on the circle to profile your javascript or CSS to know what causes the site performance issue.

Search Search panel helps to search file contents.

Issue Issues will list all the site structural and script issues. It shows all the errors encounter during the site load.

Debug Script execution can be paused and examined in debug navigator.

Breakpoint From resource navigator you can set breakpoints and can view the variables and call stacks.

Log It is the real console. There is a quick console and a log navigator. You can execute all console commands & scripts here.

Content browser

Content browser will show contents based on the selection made on the Navigator sidebar. You can access DOM of the current site from the content browser.

Details sidebar

Based on the content browser selection this panel reveals the resource type, CSS properties, javascript events etc.. here.

Reference

Apple developer tool

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

How can I use it?

1. Host Codebase
2. Add snippets – Eg:”header”
3. Install Dreamweaver extension
4. Add server path to Codebase settings form DW commands menu [Commands > codebase > codebase settings] eg: http://codebase.decodize.com/getResult.php
5. Type h:header- to insert HTML of a snippet named “header”.

Where I can download the code?

Both server and Dreamweaver extension is opensource and can be downloaded from github.

View on Github

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

First node program

Prerequisite

Install nodejs Github account [Optional]

Objective

Create a nodejs application that reads a file and replace all the matching text in it with the one that you pass as an argument.

Eg:- readme.txt content – “Drink like a dog”

replaceme readme.txt dog cat

//out.txt – Drink like a cat

Agenda

Setting up base – folder structure Creating node modules and require it in other modules Read & write file using node Passing arguments from CLI Creating package.json Packaging application Adding users to npm registry Publishing application Uninstallling application from system Unpublishing application from npm registry

Setting up base – folder structure

Application’s folder structure as follows.

replaceme
   - bin
   --- replaceme.js
   - lib
   --- main.js
   --- replace.js
   package.json
   README.md

Open cmd and type mkdir replaceme && cd replaceme && mkdir bin && mkdir lib. Create replacement.js, main.js and replace.js inside respective folders.

Create replace function

var text = "To live long, eat like a cat, drink like a dog.";
var out = text.replace('cat','dog');
console.log(out);

Run it with

c:\>replaceme\lib\> <code>node replace.js</code>
//Output – To live long, eat like a dog, drink like a dog.

Node modules

Next step is to convert above code into a node module so that we can require it in other js/modules. Incuding an external javascript in our document is simple – require(‘modulejs’);.

//replaceme.js
exports.replaceme = function(text, vala, valb){
    function out(val){
        return text.replace(vala,valb);
    }
    return out(vala,valb);
}

exports.functionName – Its the simplest way to create a module & now replaceme is a module. We can import it in main.js as require(‘./replaceme’);

More informations on creating modules – check this link

c:\>replaceme\lib\> node
> re = require('./replaceme')
> re.replaceme("The text to replace","replace","add")
> The text to add

Our module is functioning now. Now create main.js.

//main.js

(function() {
    //Declaring variables  
    var fs, reptxt, filedata;

    //Requiring files
    fs = require('fs');
    reptxt = require ('./replaceme');

    //Reading file test.txt
    fs.readFile("../test.txt",'utf8',function(err,data){
      if(err) {
        console.error("Could not open file: %s", err);
        process.exit(1);
     }
     //Calling replacement function
     console.log(reptxt.replaceme(data,"npm","123"));
    });

}).call(this)

Main.js reads file content and passes the content to replaceme function. It will output replaced string.

Read file using node file module

Now we have to write its out put into a file and save it in the same dir. It is also possible to overwrite the same file.

//main.js

(function() {
    //Declaring variables  
    var fs, reptxt, filedata;

    //Requiring files
    fs = require('fs');
    reptxt = require ('./replaceme');

    //Reading files
    fs.readFile("../test.txt",'utf8',function(err,data){
      if(err) {
        console.error("Could not open file: %s", err);
        process.exit(1);
     }
     //Calling replacement function
     filedata = reptxt.replaceme(data,"npm","123");

     //Writing replaced text into a new file
    fs.writeFile("../out.txt", filedata, function(err){
            if(err) {
                console.error("Error saving file %s", err);
                process.exit(1);
            }
            console.log('out.txt file saved!');
        });

    });

}).call(this)

Now when we run node command node main.js you will see a new file named ‘out.txt’.

Passing arguments

We neeed to pass our filename as an argument. ‘process.argv’ used to catch arguments that passes through CLI. It gives us an array containing commandline arguments. We have to process this array & get the required values.

Here in our example we are passing 3 arguments ‘the file, keyword, replace word’ –

node main.js text.txt cat dog

This is the native way to parse commandline arguments. There are other libraries available for easy parsing of arguments [optimist, commander etc… ].

// print process.argv - node main.js ../text.txt cat dog
process.argv.forEach(function (val, index, array) {
  console.log(index + ': ' + val);
});

//Output
0: node
1: path/main.js
2: ../text.txt
3: cat
4: dog

We need 2,3 & 4 values. Note: its not a best practice to parsing parameter like this. Its better to use any node libraries.

(function() {
    //Declaring variables  
    var fs, reptxt, filedata;

    //Requiring files
    fs = require('fs');
    reptxt = require ('./replaceme');

    //Reading files
    fs.readFile(process.argv[2],'utf8',function(err,data){
      if(err) {
        console.error("Could not open file: %s", err);
        process.exit(1);
     }
     //Calling replacement function
     filedata = reptxt.replaceme(data,process.argv[3],process.argv[4]);

     //Writing replaced text into a new file
    fs.writeFile("../out.txt", filedata, function(err){
            if(err) {
                console.error("Error saving file", err);
                process.exit(1);
            }
            console.log('out.txt file saved!');
        });

    });

}).call(this)

Now we got 3 arguments ‘../text.txt, cat, dog’. node main.js ../text.txt cat dog this node command will read text.txt and replace all the “cat” text with “dog” and output the result in ‘out.txt’.

Bin folder – replaceme file

This file is the entry point. We point to this file from package.json.

#!/usr/bin/env node
var path = require('path');
var fs = require('fs');
var lib = path.join(path.dirname(fs.realpathSync(__filename)), '../lib');
require(lib + '/main.js');

Preparing to publish

Creating package.json

This text file contains all the information about the project, like project path, dependencies, author name, tags, bug tracking info etc.. To create a package.json run npm init command from the root folder. It will ask series of questions and finally it will create package.json file.

Our package.json file will look like this.

{
  "author": "praveen vijayan ",
  "name": "replaceme",
  "description": "Node commandline application to replace selected text in a file.",
  "version": "0.1.1",
  "repository": {
    "url": ""
  },
  "main": "./lib/main",
  "bin": {
    "replaceme": "./bin/replaceme"
  },
  "dependencies": {},
  "devDependencies": {},
  "optionalDependencies": {},
  "engines": {
    "node": "*"
  }
}

Add new user to npm registry

npm adduser 

Provide username & email address. This command will register a new user into npm registry.

Finally publish to npm registry

npm publish 

and test by installing it

npm install -g replaceme

Uninstall node package

npm uninstall -g replaceme

Unpublish from npm registry

npm unpublish replaceme@0.1.1

Upload files into github

It is not a compelsory part but it is a best practice to update your files to github and add links in package.json. Open README.md file created earlier and add basic info about your project using markdown syntax. Commit all files into git and activate issue tracker from account.

Download files

Download files

npm registry link

happy nodding :)

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.

HTML5 Drag and drop based on the Microsoft IE’s original implementation (IE5 and up). Image and links are dragabble by default in browsers. Proof? try drag and drop them in the address bar, you will be taken to the specified image/link. Set draggable=”true” in order to make other elements draggable.

HTML5 Drag and drop based on the Microsoft IE’s original implementation (IE5 and up). Image and links are dragabble by default in browsers. Proof? try drag and drop them in the address bar, you will be taken to the specified image/link. Set draggable=”true” in order to make other elements draggable.

<div draggable="true">Im a draggable content</div>

Okay, now about drop zone. There is no droppable=”true”!!. We have to handle it via javascript events. Following are the events related to DnD.

• dragstart
• drag
• dragenter
• dragleave
• dragover
• drop

• dragend

  Im a draggable content
  Drop area

Next step is to drop our dragged payload. We need 2 events (dragover and dragenter) in order to make an element drop capable.

<div draggable="true" id="drag">Im a draggable content</div>
<div id="dropzone">Drop area</div>
<script>
var elem = document.getElementById('drag'),
    dropZone = document.getElementById('dropzone');
    elem.addEventListener('dragstart', function(e){
      //Do whatever on when user start dragging.
    }, false);

elem.addEventListener('dragenter', function(e){
      //Things like visual cued for the drop zone can be added here.
    }, false);

elem.addEventListener('dragover', function(e){
     //Things like visual cued for the drop zone can be added here.
  }, false);

</script>

Now we have to do the actual drop. ‘dataTransfer’ holds the draged object. dataTransfer.getData(‘text/html’) will get you the actual dragged element.

var dropZone = document.getElementById('dropzone');
 elem.addEventListener('drop', function(e){
      e.preventDefault();
      dropZone.innerHTML = e.dataTransfer.getData('text/html');      
    }, false)

Summary

DnD spec is not completed & it is also painful to develop a cross browser DnD solution with pure API now.

Resources

Native HTML5 Drag and Drop – HTML5 Rocks Drag and drop html play ground Drag and Drop Mozilla MDN Article on useragentman.com

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.

After nodejs installation, install StyleDocco via npm (Node package manager). In windows open command prompt/mac terminal & type.

npm install -g styledocco

In mac you have to type

sudo npm install -g styledocco

It will install in few minute depending upon your connection speed.

Preparing stylesheet for documentation

Styledocco uses marked to parse & generate HTML. First we will check a simple stylesheet (example from author).

/* Provides extra visual weight and identifies the primary action in a set of buttons <br/> ``` &lt;button&gt;Primary&lt;/button&gt; ``` */ <br/>.btn.primary { background: blue; color: white; }

Save the css on your site folder. Now need a readme.md file. Create a text file and rename it to readme.md as save it on the same folder. In read me file you can use markdown to show the details about the style sheet. This readme will be the landing page of your style guide. Readme.md is required otherwise styledocco will throw an error.

Style guide creation

Syntax

styledocco [options] [INPUT]

Options

–name, -n Name of the project (required) –out, -o Output directory (default: “docs”) –tmpl Directory for custom docs.jade template (optional) –overwrite Overwrite existing files (docs.css) in target directory.

Usage

Open command prompt and type.

styledocco -n styleguide style.css

Styledocco will parse all comment in the document & create style guide based on the comments provided in your css file. Styledocco uses markdown syntax.

Your style document will create inside docs folder. If you want a different directory to store output files use -o in your styledocco create command (styledocco -n styleguide -o c:\styleguide style.css ). Open index.html form docs folder and you can see a botton and its style description.

Styledocco is also capable of parsing LESS, SASS & SCSS files and can generate style documents. Twitter bootstrap style guide is an example.

Use markdown syntax in your readme.md & stylesheet files. First & second level of heading will automatically split into sections. If you want to exclude a comment, that you wish not being parsed by Styledocco, add a few space in front of the comment.

Example -

/*This comment will parse by Styledocco*/
     /*No this is an internal style comment*/

Large web projects we can use style guide for future reference and optimization.

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.

Steps

1. Download the font from google android design center Robot font.

2. Install the font

1. Right click desktop & select personalize

1. Select window color

1. Select advanced appearance settings

1. Select Item drop down & Change font to Roboto for the following.

1. To change windows system font – type regedit on windows run. Goto HKEY_LOCAL_MACHINE > Software > Microsoft > Windows NT > CurrentVersion > FontSubstitutes

1. Restart