Category Archives: Web Development

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.

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 :)

Aug 19 2012

Developing Accessible Web Applications

Posted on by

Accessible web applications provide means for people with disabilities to view, understand, and perform all the major tasks with the application. In short, applications that are equally usable for everyone. It is one of the important factors to a successful application especially for enterprise software.

WAI, stands for Web Accessibility Initiative, is a group of individuals and organizations dedicate to improve the web accessibility. ARIA stands for Accessible Rich Internet Applications. WAI-ARIA refers to the Accessible Rich Internet Applications specification and its latest version is WAI-ARIA 1.0 published in 2011.

HTML is not made for achieving accessibility with its limited variation of tags and HTML5 addresses this issue with the semantic tags. I have a blog post about HTML5 semantic structure. Here are a few other things you should make sure when developing an accessible application.

Keyboard Navigation
Users should be able to navigate through the web application and perform available tasks with keyboard. Tabbing is the common way to get to the element. Make sure the order of tabbing is correct visually and logically but not all the elements should be included in the tabbing sequence. Imagine that you need to tab through all the cells in a table before getting to the next page action element. The elements with action should have the tabindex as 0 or positive values while the others should be set to -1. Besides tabbing, arrows keys with combination of control or shift keys are also used in keyboard navigation but since it’s not standard, they should be documented so the user will know about them. Users should be able to tell the focused element with border.

Use of Color
Using high contrast colors is not just for the need of people with color-deficient vision, it makes it easier and more comfortable to read the content for everyone. Also, applications should not rely solely on color to convey important meaning. For example, an warning message should not be just displayed in red but also needs the term “warning”.

CSS Sprites
CSS sprites are background images so they won’t be shown on high contrast mode. If you haven’t checked out HCM, you can switch to it with shortcut shift + left Alt + PrtScr on Windows. Labels should be provided for the missing sprite images and they should perform the some action as the image.

Role and States
A Screen reader used to just read out all content on the page but it is now enhanced with the ability to response to the semantic web. Adding roles and states to the document so the screen reader can focus on only the important elements so it’s easier to understood by the listeners. For example, a node with role as presentation, an image node or table node, means it is just for page layout and does not have actions specified. A check box’s state can be set as “aria-checked” and it will be picked up by the screen reader.

More detailed advice with examples can be found on WAI-ARIA 1.0 Authoring Practices. One of the reasons that enterprise software favors Dojo Web Toolkit is that all the widgets in the library have been tested for Dojo accessibility requirements and it’s well documented in each widget. Dijit can detect the high contrast mode and apply the style with class “dijit_a11y” so you should utilize that class to add additional styling for your custom widgets in HCM.