Author Archives: Ying

May 18 2013

Things I didn’t Know about Chrome DevTools

Posted on by

I have been using Firebug as my debugging tool since I started web development. Firebug has been very helpful and the one thing I knew Chrome DevTools has that Firebug doesn’t is performance profiling which helps finding signs of memory leaks on a web page. I have wanted to take the free course Explore and Master Chrome DevTools for a while and I finally cross it out of my to-do list. It took me about four hours to complete the course and I have learned a few cool features of Chrome DevTools that I didn’t know about.

Explore and Master DevTools

  • Ways of get a DOM node
    Besides using the magnifier to select the DOM node on the web page, you can use the jQuery style of getting the DOM node with “$” sign. For example, $(“#name”) will give you the DOM node with id as name. If you select a DOM node in the Elements tab, you can then type in “$0″ in the Console tab to get the DOM node. On the other hand, you can type “inspect($0)” in the Console tab to show the DOM node in the Element tab.
  • Show style for different states
    lunapic_136720788190059_6There is a Toggle Element States option in the Elements -> Styles tab which will open the section for you to set the element state to active, focus, hover, and visited. I found this very helpful to debug the style issue for these states as the style definitions won’t be shown in the Styles tab unless they are in that state.
  • Dynamical editing source files and data source and view the change history
    You can edit CSS files or JavaScript files under the Sources tab. Right click in the file, you will see the option “Local modifications…” to see the change history and revert them. While we are used to editing CSS files, dynamically being able to update JavaScript is very useful.
  • Save updated file locally
    The changes were saved in the Chrome local storage if you edit them in the Sources tab and you can also save the updated files in your computer and override the original ones.
  • Events/Frames view in Timeline
    Frames view in Timeline
    The Timeline tab provides three types of views for the recording: Events, Frames, and Memory. The Events/Frames view shows the time spent on HTML parsing(blue), JavaScript rendering(yellow), style calculation(purple), and CSS rendering(green). The memory view is for detecting the sign of memory leaks.
  • Other plugins
    Page speed: It’s similar to YSlow. It gives you the suggestions of improving performance. After it’s installed, it’s will be shown as a new tab in the devTools.
    Google Closure: Compress multiple JavaScript files into one to reduce the number of HTTP requests.

Above are just new things that I learned in the class and I enjoyed taking this interactive class. Visit this link for more details about how to improve the performance of your application with Chrome DevTools.

Mar 17 2013

CSS3 Selectors

Posted on by

CSS3 came with a new set of selectors providing more ways to specify the DOM elements to apply the styling. Utilizing them can save some DOM manipulation done by JavaScript which makes your app run more efficiently. While many of the CSS3 properties are not supported by IE version 9 or below, most of the CSS3 selectors with only a few exceptions are supported by IE9. Make sure you are aware of them and start using them whenever you can.

  • Attribute Selectors 
    [data-action-type ^= "add"] - the element with data-action-type attribute and the value starts with "add".
[data-action-type $= "add"] - the element with data-action-type attribute and the value ends with "add".
[data-action-type *= "add"] - the element with data-action-type attribute and the value contains "add".
  • Combinator 
    F ~ E   - the element that's following element F  
E + F   - the element that's immediately following element F (CSS2)
  • Pseudo-class Selectors 
    E:target                - the element that was targeted. 
E:empty                 - the element that has no children
E:not(s)                - the element that does not match CSS selector s
 
E:nth-child(n) 	        - the n-th child of the element 	
E:nth-child(odd) 	- the odd number child of the element. Can be even as well.
E:nth-last-child(n) 	- the n-th child from the last one of the element
E:first-child 	        - first child of the element (CSS2)	
E:last-child 	        - last child of the element 
E:only-child 	        - only child of the element 

E:nth-of-type(n) 	- the n-th element of E's type 	
E:nth-last-of-type(n)   - the n-th element from the last one of the type
E:first-of-type 	- first element of the type 	
E:last-of-type 	        - last element of the type 
E:only-of-type 	        - the only element of the type

    Below is an example of a tab container without using JavaScript. Click on the tab title to view the content. The default tab can be selected by adding the hash tag in the URL.

  • Other CSS1/2 Selectors you may have missed 
    E[data-action-type]     - the element that has data-action-type attribute
E::first-line           - first line of the element
E::first-letter         - first character of the element
E::before               - add content before the element
E::after                - add content after the element

Related readings:
CSS3 specification: w3.org/TR/css3-selectors/#simple-selectors
CSS3 and HTML5 browser support: findmebyip.com/litmus

Dec 27 2012

Google APIs

Posted on by

I have been thinking what I should write about for a while. Believe it or not, even though I have two weeks off from work during this holiday season, I still want to do what I do at work – building applications. This blog post is about Google APIs, specifically the Books API with which I built a simple book search application. While there are a lot of APIs available out there, Google APIs is pretty cool to try out.

Currently, there are 55 available APIs on Google APIs Console including Analytics API, Drive API, and YouTube Analytics API. Most APIs have request limits for free usage but some of them are available only with pricing plan such as Google Cloud SQL and Google Maps Geolocation API. The usage of API access is tracked by the API key generated on the website and you can view the quotas and report as well.

Google Books API allows you to perform CRUD operations on Google Books database with the proper authorization. The search scope can be the whole database or specific users’ both custom and pre-defined bookshelves like books they marked as favorites or read. Operations to retrieve user private data require OAuth token which can be easily generated on the Google API access page. The book concepts are easy to understand except that a book is given a term “volume” in the API.

For the coding part, you will need to request a script from Google API website. 

//load script to access Google API
<script src="https://apis.google.com/js/client.js?onload=onLoadCallback"> </script>

Once the script is loaded, you can configure the client object for the query request that you are making. 

function onLoadCallback(){
   var _this = this;
   //in this example, the param for API is "books" and the param for API version is 'v1' 
   this.client.load('books', 'v1', function (data) {
      //specify your API key       
      _this.client.setApiKey("{Your API key}");
   });
}

Now you can send any search requests with different parameters. The parameter “fields” defines the data fields to be returned. It’s important because without it, a large object with the complete information of books will be returned. You will never need so much information for your application and it would decrease the performance significantly. 

var params = {
          //fields to return. return full information by default.
          fields:"items(volumeInfo/title, volumeInfo/authors,volumeInfo/publishedDate, 
                  volumeInfo/description, volumeInfo/imageLinks/thumbnail)",
          //maximum number of results to return. 10 by default
          maxResults:15,
          //sorting method. "relevance" by default
          orderBy:"newest"
    },
    restRequest = this.client.request({
          //specify the query request. 
          //the path below will return maximum number of 15 books 
          //with information matching "javascript" ordered by the most recent published date
          path:"/books/v1/volumes?q=javascript" + "&fields=" + params.fields 
               + "&maxResults=" + params.maxResults + "&orderBy=" + params.orderBy
    });

//sent the request
restRequest.execute(function (resp) {
   //use the return data 
});

With the proper data, you can build so many amazing applications. Google Books API is one of the easy-to-use APIs that I have used but there are a lot more features that I want to add to my Book Search with Google Books API application. If I ever run out of ideas for blogging, that’s what I am going to do :)