[Web Tool] SpriteMe

Recently, I read two books about performance article "High performance web sites: essential knowledge for frontend engineers"[1] and "Even Faster Web Sites: Essential Knowledge for Frontend Engineers"[2] by Steve Souders.

hat two books are very good books let you can understand how to increase web performance. I found few web tools in my searching. SpriteMe is one my want to share you guys. What is SpriteMe?

Background images make pages look good, but also make them slower. Each background image is an extra HTTP request. There's a fix: combine background images into a CSS sprite. But creating sprites is hard, requiring arcane knowledge and lots of trial and error. SpriteMe removes the hassles with the click of a button.

Reference

• High performance web sites: essential knowledge for frontend engineers [1]
• Even Faster Web Sites: Essential Knowledge for Frontend Engineers [2]
• SpriteMe

Read More

Rearrange Blogger Template Related Post & Add New Features

Today i spent few time to modify Blogger template like:

• Rearrange related posts code.
• prettyprint code syntax highlight.
• Adding FancyBox lightBox and modify new.

I will keep on arranging my Blogger template and help it can more friendly. There had three parts on the above list. Second list is google code pretttify. I change my code syntax from syntaxhighligher to google-code-prettify. Google-code-prettify is using easier than syntaxhighlighter. You can just include two file(prettify.js & prettify.css) add function to execute prettify. Done!! Third list is FancyBox lightBox jQuery plugin. If you are familiar with jQuery. I think it's easy to add that plugin to your web page. About first list is what i want to share how do i arrange the Related Posts.

Related Posts

Until now, Blogger haven't support related posts in your blogger template. If you want to add that feature, you have to modify some template code and add few javascript function to do that.

Scenario

How does related posts work? The scenario is easy to understand. When you want to write new post, you will add Labels for this post on the bottom of Blogger editor. You add tags for the post you wrote. When web user visit your blog, related posts feature will list other relation posts following post content by specific tag. (you have three types can show related posts on your blog depending Blogger template pageType: 'item', 'archive', or 'index').[1]

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=RelatedLabels&amp;max-results=10&quot;'
    type='text/javascript'>
    </script>
</b:if>

I want to show related posts in user view specific page. So, i assign pageType is 'item'. As you can see. you can receive specific tag post content by callback function using Google Data Protocol[2]. Following is complete code to get all tage you add.

<b:loop values='data:post.labels' var='label'>
<!-- Fixed for Related Posts -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=RelatedLabels&amp;max-results=10&quot;'
  type='text/javascript'>
  </script>
</b:if>
</b:loop>

Finial, you need to render those data to web page. You can have simple function to do that like this.

After solving how receive data from Blogger template Layout data and render to web page. The key point of Related posts is parse data you need.

We receive Blogger template Layout data by callback function and return JSON data. The render data include post url, post title and post date (depending what you need). It's better to keep value in an object. Object is easier to understand and manipulate.

function RelatedLabels(json) {
var entries = json.feed.entry;
for (var key in entries) {
if (entries[key]) {
var item = {};
item.title = entries[key].title.$t;
item.url = entries[key].link[4].href;
item.date = entries[key].published.$t.substr(0, 10);
relatedPosts.push(item);
}
}
}

You might add multiple tags in different posts, and therefore might receive the same post in different tag by loop. There are many solutions to solve duplicate post in an object.

I push related post in one object. We can extend Array.prototype.push() function to detect should we add this post to our object. If you are familiar with Javascript syntax. It's simple to manipulate DOM using Javascript like document.write(). If you concern web page performance, you should decrease manipulate DOM directly[3]. Following is complete code.

var relatedPosts = [];
relatedPosts.push = function (data) {
 var _push = true;
 var length = this.length;
 for (var i = 0; i < length; i++) {
     if (this[i].url == data.url) _push = false;
 }
 if (_push) return Array.prototype.push.call(this, data);
 else return this;
}

function RelatedLabels(json) {
 var entries = json.feed.entry;
 for (var key in entries) {
     if (entries[key]) {
         var item = {};
         item.title = entries[key].title.$t;
         item.url = entries[key].link[4].href;
         item.date = entries[key].published.$t.substr(0, 10);
         relatedPosts.push(item);
     }
 }
}

function ShowRelatedPosts(PostUrl) {
 var count = 0;
 var eleLi, link, date, fragment = document.createDocumentFragment();
 for (var key in relatedPosts) {
     if (typeof(relatedPosts[key].url) != 'undefined' && relatedPosts[key].url != PostUrl && count < 5) {
         eleLi = document.createElement('li');
         link = document.createElement('a');
         date = document.createTextNode(' (' + relatedPosts[key].date + ')');
         link.setAttribute('href', relatedPosts[key].url);
         link.innerHTML = relatedPosts[key].title;
         eleLi.appendChild(link);
         eleLi.appendChild(date);
         fragment.appendChild(eleLi);

         count++;
     }
 }
 var eleOl = document.createElement('ol');
 eleOl.appendChild(fragment);
 document.getElementById('relatedPosts').appendChild(eleOl);
}

reference

• Blogger Layout Data Tages [1]
• Google Data Protocol Reference [2]
• Speeding up JavaScript :Working with the DOM [3]

Read More

Inner Google Docs Quickly View Alternate URL by Chrome Extensions

If you paid your attention at Google Docs service, you will found Google Docs team announce few new feature like View online files using Google Doc Viewer, Shared folders and more in Google Docs, Taking charge of your document sharing etc. One of my favorite new feature is Google Docs Viewer. Google Docs Viewer let you quickly view documents online without leaving your browser. You don't need to download it if you just want quick it.

Google Docs Viewer is a very convenience tool let you increase browser experience. But, it's still have few restrained. It's just support three file format: PDF documents, PowerPoint presentations, and TIFF files now. Beside file type part, you need put documents on the internet.

I like search documents on the internet when i don't know somethings. I type keyword in search engine and combine search file type. Google search engine started support QuickView new feature few weeks ago. It does work very well. But, there isn't every pdf or ppt item has QuickView button on the list. It's a easy way to solve this problem. Copy target doucment URL and paste it in Google Docs Quickly View. Then, Done!! It sounds great, right? Not at all, how could we do this job more convenience. I choose Chorme Extensions.

What's Chrome Extensions?

Extensions are small software programs that can modify and enhance the functionality of Google Chrome.

You write them using web technologies like HTML, JavaScript, and CSS. So if you know how to write web pages, you already know most of what you need to know to write extensions." - Defintion in Google Chrome Extension: Development Documentation

The Basic of Chrome Extentsion

"An extension is a zipped bundle of files — HTML, CSS, JavaScript, images, and anything else you need — that adds functionality to the Google Chrome browser. Extensions are essentially web pages, and they can use all the APIs that the browser provides to web pages, from XMLHttpRequest to JSON to HTML5 local storage.

Many extensions add UI to Google Chrome, in the form of toolstrips (toolbar additions) or page actions (clickable badges in the address bar). Extensions can also interact programmatically with browser features such as bookmarks and tabs. To interact with web pages or servers, extensions can use content scripts or cross-origin XMLHttpRequests." - OverView

As you can see above paragraph. We can almost do anythng you want from add Google Chrome UI to use content script to manipulate DOM tree. How do we slove problem we told in Chrome extension? The scenario is very simple. Using content script manipulate DOM tree and innert Google Docs Quick View URL in each target document.

Content Script

Content scripts are JavaScript files that run in the context of web pages. By using the standard Document Object Model (DOM)," - Content Script

At my last post. There has a new search engine let you can search PDF file type ebooks. So, i holp content script can execute in two part. "Google Search Engine" and "PDFBooks search engine". First, we need to get target documnet url in DOM tree. There are few tools can help me to inspect current location in DOM Tree. I chose Google Chrome Developr tools (Ctrl+Shift+J).

PDFBooks

Google Search Engine

if (doc.URL.toString().match(/^http:\/\/www.google.com/)) {
    links = doc.querySelectorAll('h3 > a.l');
}
if (doc.URL.toString().match(/^http://pdfbook-s.com/)) {
    links = doc.querySelectorAll('div#menu + a');
}

We inspect target documents url by querySelectorAll.

for (var i = 0, len = links.length; i < len; i++) {
    var link = links[i];
    if (link.toString().match(/pdf$/) || link.toString().match(/ppt$/)) {
        var docViewer = document.createElement('a');
        docViewer.setAttribute('href', 'http://docs.google.com/viewer?url=' + link);
        docViewer.setAttribute('target', 'blank');

        var favicon = document.createElement('img');
        favicon.src = 'http://docs.google.com/favicon.ico';

        docViewer.appendChild(favicon);
        link.parentNode.insertBefore(docViewer, link);
    }
}

Then, we can parse each hyperlink to insert alternate Google Docs Quick View URL if hyperlink has "PDF" or "PPT" keyword in a simple loop.

Registered your content script

Content script needs to register in a extension's manifest.json file. like so:

{
  "name": "Insert Google Doc Quickly View URL", 
  "version": "0.1",
  "description": "Insert Google Docs Quickly View for PDF & PPT file format link",
  "content_scripts": [
    {
      "matches": [
        "http://www.google.com/search*",
        "http://www.google.com.tw/search*",
        "http://pdfbook-s.com/*"
      ],
      "js": ["insert_docs_quickly_view_url.js"]
    }
  ]
}

Everything you done. What's different after using this extension.

Reference

1. Google Chrome Extensions: Developer Documentation
2. pdfBooks - Pdf Books search engine

Download: insert_docs_quickly_view_url.js

Download: insert_docs_quickly_view_url.crx

Read More

PDFBooks

I think you guys have searched any kink file type in Google search engine or others search engine. I often search PDF file on the Internet like PDF, PPT etc. It's a good choice to research something you don't know on the Internet. You might get few information on the way!!

There has another way you can find many PDF file type books on the specific search engine. It's PDFBooks. Type the keyword you want and click the search button. You will get PDF file type list. You can download that file to your local disk or view it online (It's using Scribd flash viewer).

Link

1. PDFBooks

Read More

JSONC Of Picasa Web Ablum

What is JSON and JSONC?

JSON, short for JavaScript Object Notation, is a lightweight computer data interchange format. It is a text-based, human-readable format for representing simple data structures and associative arrays (called objects). - wiki

JSONC: Clean, Compact, and Customizable. Minimize the number of JavaScript objects

You guys might have used a lot of JSON data in your web page, web application etc. If you are familiar with Blogger template, you might ever received your Picasa web album JSON format data by calling Javascript function in your blogger by using this URL

http://picasaweb.google.com/data/feed/api/user/userID?alt=json&callback=?

Whatever you receive JSON data by Javascript callback function or jQuery Ajax callback funtion. You need to parse callback json data and get the data what you need. There are too many objects in that data. It's a little complicate to get current fields you need.

Google Data Protocol support JSONC data format return in Google Web Album. That let you guys can receive data from Google Web Album more easy than before. What do we receive the JSONC format data. Changing feed URL to

http://picasaweb.google.com/data/feed/api/user/userID?v=2&alt=jsonc&callback=?

Conclusion

It's a easy way to receive your Google Web Album data by modify feed URL arguments. The simple object data means you can decrease callback response time and increase the web page performance. If you are interested in performance articles, you should read following link

Reference

1. Data APIs Version 2 Migration Guide
2. Evolution of the Google Data Protocol: New Features for Building more Efficient Applications

Read More