I should write something in respect to my money

January 15th, 2014

I pay a couple of dollars to godaddy everymonth, so…
How has my life been going lately?
Basically good. Trying to keep myself busy in order not to think the wasted.

Am I still the technical enthusiastic?
Probably, more practical than ever. Tech is used to serve people instead of being chased after.

How’s your work and life balance?
Too many changesin 2013, I actually haven’t prepared for those changes. I was given something that I was not expected. Trying my best to align my personal goals.

Do you satisfy? Why?
Satisfy what? No one would ever satisfy, at least for me. I thought there would be some tiny hope in my next decade plan, but quickly it vanished. I gave up upon something to exchange something but I lost this round. Not complaining. Just saying that I am more than capable of doing what I am doing but I am not convinced to stay peaceful and quiet. I decided to work harder and harder to construct myself a stage, a stage I can prove my capability and competency. I could not find enough words to express this feeling. Not even in my own mother language. That’s it.

How would you define yourself?
a project manager
a product manager
a graphic designer
an interior designer
a programmer
a florist
an entrepreneur
a bad salesman maybe?

Angel Flowery 我设计的永生花盒

Bookmark and Share

Thank you David!

January 14th, 2014

:p

Bookmark and Share

A SQL Parser for JavaScript to Query Front-end JSON Data

January 8th, 2013

Introduction

This idea comes from my daily work that is to build complex Web RIA. Over the past 5 years, web browsers capacity grows 1x times than before especially when Webkit based browsers came to the world. There are many concerns on how to leverage all that capacity provided by faster browsers. Meanwhile, the bandwidth grows tremendously all over the world. Asynchronization technology is adopted widely to enhance the User Experience.

Here comes a question.

How to make good use of the three advantages – Browser Capacity, Wider Bandwidth and Asynchronization?

More and more non-confidential or security concerned calculations are being moved to front-end. JavaScript is living a happiest life in this decade than ever and it continues to last.

We pre-cache larger data in front-end but then? How to tailor, modify, new, delete and operate them as we want and as easy as possible?

JQL – JavaScript Query Language is right here for you.

You may have heard about YQL (a cloud query service from Yahoo). JQL is different, it is not any cloud based alike. It is right in your client for you to narrow down or filter the results and deliver fastest experience for your end users.

Commercial

It goes with browsers, so no native application installation is needed.

For example:

Data like stock exchange has a sleep time everyday. They shall be cached in browser to save more bandwidth. JQL can be used to generate all kinds of metrics on those offline data in a browser!

I want it to be a sound Library in JavaScript World. Not for money, for reputation instead.

Technical Challenge

I am sorry to say there is no challenge for JQL. No extension required, low learning curve. People who are familiar with SQL would be able to learn and use JQL quickly.

Sample

This shows how easy and familiar the syntax is to developers.

sample_data is a large JSON data returned by server and cached in browser

select() is the start of the JQL functions chain which always returns the JQL object with specified columns

from() is the classic SQL statement implementation in JavaScript

where() is the classic SQL statement implementation in JavaScript

Code

click here to download jql code

I am still working on pushing it to Github.

Bookmark and Share

Front-end MVC with Ruby on Rails

November 3rd, 2010

To download this study, click here

Problem to Solve

It is a pain to maintain the JavaScript code of a product when the product is growing larger and heavier. And a project usually is a team work. How to maintain it and keep the code as less redundant as possible becomes an issue. My solution is small but I think it is great. It is an extension of RoR (Ruby on Rails) MVC.

Let me give it a name: FE-MVC

How it works

In short, using JavaScript to parse the URL to get controller name and action name then using naming convention to map and load matching JavaScript Object and Object Property.

Since it is working with Ruby on Rails so let’s use a sample to help you understand how it works.

  1. Assume that you have successfully set up your RoR runtime.
  2. There is a Controller named car_controller.rb and you have created both Action and View for factory which is a landing page for car controller. On which you would have a rich user interface to interact with this car factory.

Source code of car_controller.rb:

class CarController < ApplicationController

    def factory

    end

end
  1. Start server at 127.0.0.1 on port 3333 and launch it in browser. You will type
    http://127.0.0.1:3333/car/factory to see the user interface.
  2. There is a JavaScript file named RUNONCE.js will be run once at every time page is loaded. This file will parse the URL and tell browser to load a JavaScript file named car.js which is what I call FE-Controller. Then call the function factory which is one of the properties of car Object and what I call FE-Action. These activities are automatically running and executed by RUNONCE.js

Source code of car.js

car = {

    init: function(){}, // Activities running in every action of this controller. Usually we initialize elements like checking cookies and attaching events for global header and footer.

    factory: function(){}, // Activities running only in this action of car controller. Usually we render some special UI components or attaching events for some page specific objects.

    wash: function(mycar){ return mycar;} // customized “private” function

}

Runonce.js

//A default action mapping. sometimes there is no action specified by URL because the default action is set by routes.rb
__MAP_ROOT__ = ['car', 'factory'];

__MAP_ROUTE__ = [__MAP_ROOT__];

//__MAP_ROUTE__.push(['myNewController', 'defaultAction']);

__URL__ = window.location.href.replace(/\?.*$/, '').replace(/\/\d+\//, '/').replace(/\/\d+$/, '');

__BASE__ = __URL__.replace(/([https|http]:\/{2,3}[^:\/]+(?::\d+)*).*/,"$1");

__RAILS_CA__ = __URL__.replace(__BASE__,'').replace(/^(\/)/,'').replace(/\/$/,'');

if ( __RAILS_CA__ == '' ){

__RAILS_CA__ = __MAP_ROOT__;

} else {

__RAILS_CA__ = __RAILS_CA__.split('/');

for ( var i = 0 ; i < __MAP_ROUTE__.length ; i++ ){

if ( __RAILS_CA__[0] == __MAP_ROUTE__[i][0] ) {

if( typeof __RAILS_CA__[1] == 'undefined'){

__RAILS_CA__ = __MAP_ROUTE__[i]

}else if( __RAILS_CA__[1] == __MAP_ROUTE__[i][1] ){

__RAILS_CA__ = __MAP_ROUTE__[i]

}else{

}

};

}

}

__RAILS_CONTROLLER__ = __RAILS_CA__[0];

__RAILS_ACTION__  = __RAILS_CA__[1] == 'new' ? '_new' : __RAILS_CA__[1];

//*Load FE controller

document.write('<script type="text/javascript" src="/controllers/'+__RAILS_CONTROLLER__+'.js"></script>');

//*/

eval('if(typeof('+ __RAILS_CONTROLLER__ +') != "undefined"){$this = ' + __RAILS_CONTROLLER__ + '}');

$this.init();

//run specified action or default action

if(typeof(__RAILS_ACTION__) != 'undefined' && typeof($this) != 'undefined'){

eval('if(typeof($this.' + __RAILS_ACTION__ + ') != "undefined"){ $this.' + __RAILS_ACTION__ + '(); }');

}

Benefits

  1. Make every single piece of your JavaScript Object Oriented and manageable.
  2. In Eclipse based IDE, you will see your FE-Controller’s codes are well organized and totally viewable.
  3. With this, you are able to use $this object to call any function of car FE-Controller in
    http://127.0.0.1:3333/car/factory
    http://127.0.0.1:3333/car/create
    http://127.0.0.1:3333/car/delete
    http://127.0.0.1:3333/car/update
  4. You can also create a Controller named “utilities”, are you able to imagine the fun and pleasure applying FE-MVC?

Demo

Please go to http://itodo.it:3000 by using your favorite browser which has an inspector for example Google Chrome.

Note: This study is free of charge but please state author’s name when you want to share this study with others.

Bookmark and Share

The Localization of China Online Shopping Website

December 1st, 2010

Comparison of Objects

First of all, I used following websites in order to compare and get my personal analysis conclusions.
-
China online shopping website: taobao.com, 360buy.com, newegg.com.cn, amazon.com.cn, dangdang.com
US online shopping website: walmart.com, amazon.com, samsclub.com
-
Actually, amazon.com.cn should be kicked away from my list because they don’t even actually do any localization.

Analysis of China Online Shopping Website Characteristics

Because today we are talking about how to apply front-end technology, I am not going to mention too much about color preference, layout preference or font family preference. I am talking more about China users behaviors, device/hardware/OS/software characteristics and normal abnormal business competition related.
-
1. People all over the World are lazy, so do China people.
-
Because of laziness, we try to make their life easy and focus on learnability of our application. We must respect this point when we are doing localization.
-
2. China users internet age is young in average, the purpose of internet is more focused on entertainments such as listening to music, reading news, chatting and gaming. You can get such data easily from Google. And most people enjoy using C/S(Client Server). They have no idea about what UI Pattern is.
-
Because they don’t know UI Pattern, they may not even know why a 3D button is a clickable button. Some people may not be able to control their mouse track skillfully. For such users, their focus is how to move their cursor onto an interesting object. They almost forget there is two mouse buttons and a mouse wheels in their hands. For those kind of users, we need to increase the ocurrance of onmouseover events and reduce onclick events, or stop using ondblclick events. Now you won’t wonder why there are so many tab groups on China online shopping websites.
-
Yes, Tab Group is the best solution for them, just move the cursor over, yes, over it.
-
3. Almost every non-professional users install anti-virus software, they hardly know what an “exe” extension means for them. They have tons of threads and application in their Startup list. They don’t know how many CPU consuming applications are running bebind. Meanwhile, they are forced to use some stupid software and low performance browser like IE6 and IE7. I want to say, their low performance PC’s performance has been cut off upto another 50%. If you inject lots of flash animation and gif animation, it is really destructive to your website performance!
-
Because the overall device performance is low, so to reduce their CPU consumption on Flash and GIF animation can lower the risk users’ shutting the shopping page when they start to feel slow.
-
Because of the poor browser, a neat and well structured HTML code structure and optimized scripts can make the page perform a little better.
-
4. Concurrent links, this is a little embarrassed to tell, because China service providers limit users’ concurrent links to stop user sharing their broadband with other devices or tethering device. In another word, in China, less concurrent links do have impacts on improving performance. CSS Sprite is a good practice. Simplify and merge your JavaScript files are also good for your performance.
-
5. China users are still Chinese, their disposable income is too low. Some will shut the phone call within 59 second to avoid being charged for another minute. Why not using Comet technology and Push Server to have online Customer Service IM to win their comfort?
-
6. Group Shopping is very popular in China these days, making good use of real-time count-down will make users feel not alone. The feeling of being one of them is very strong. Group Shopping is more reasonable in China due to the large population and their group behavior.
-
7. China people like to live together since thousands years ago while US people like to live geographically apart which leads a personality difference. China likes crowed while US likes cool. China likes a webpage to have everything that makes them feel croweded. They don’t like large clearance in a webpage. But performance issue is coming when page has too many objects. If we can not get rid off objects, then we give up all the unneccesary textured background. Because complex background changing when scrolling the page is a large consumption of CPU. User will feel it.
-
8. Let’s talk about Social Network, Facebook and Twitter widget are popular in US while they are blocked by Great Firewall. There is still some ugly company like Baidu will “win” the game, but you can not neglect their existence and their users. Go integrate their widget on your product page and let them forward this very good product to their friends on Kaixin001 and Sina Micro Blog. Some big website in China are afraid of using that, yes! you are the first one!
-
In the end, I want to list all my points mentioned or not mention above:
-
1. Learnability is more important than being creative
2. More use of onmouseover events than onclick and ondblclick
3. Precache your tab groups
4. Reduce the number of animation
5. Use autocomplete to suggest keywords
6. Use SMS authentication to make them feel safe because they are not feeling safe in China
7. Use Comet/Push Server to establish your online Customer Service IM
8. Real-time count-down to make them feel they are together
9. Avoid using textured background for your crowded webpage
10. Use CSS Sprite and Simplify scripts
11. Use SNS to let people add and forward your products
-
You are very welcomed to exchange your ideas with me!
Thanks
Sam
Bookmark and Share

Web User Interface Best Practices in eCommerce

January 9th, 2011

First of all, I want to bring up a term UX (User Experience). It is an overall emotional feeling from a user after his using a service or a product.

Here we are talking about eCommerce website, so the UX means how happy a user feels after shopping or scanning on an eCommerce website. It can result in many aspects. Even the slow loading speed of the website under a fast connection would make a user unhappy.

Let’s see a simple model of eCommerce UX:

  • UX
    • Web User Interface
    • Localization
    • Performance
    • Security
    • Accessibility
    • Readability
    • More…

Web User Interface is a major factor among many important UX factors. This is the most direct touch with users. Upgrades of eCommerce website are business driven. However, some seasonal features will only work within a very short time window. Here comes a very tough question which everybody wants to know the answer to.

How to turn web features into practice
in shortest time and with best quality and confidents?

Since Web Design is emotional, many people want to add their ideas into the “final one”, rounds and rounds review meetings are held and the UI is still not satisfying enough. In order to meet the deadline, no one really feels confident in front of its debut.

Let’s continue to break down our UX model:

  • UX
    • Web User Interface
      • Web Design (Emotional)
      • Web UI Engineering (Rational)
  • Localization
  • Performance
  • Security
  • Accessibility
  • Readability
  • More…

Web Design and Web UI Engineering together forms up Web User Interface.  Web Design is emotional, that’s why it is difficult to measure and that’s also why rounds and rounds review meetings are held. Things need to be organized, we need to have specific topic for each review meeting other than a “Big Web Design Review” meeting.

So, what specific review meetings we should have
instead of having a “Big Web Design Review”?

  • UX
    • Web User Interface
      • Web Design (Emotional)
        • Look and Feel
          • High Level Look and Feel (review outputs)
          • Components Style Guideline (review outputs)
        • Content
          • Content Sections on a Specific Page (review outputs)
        • Behavior
          • UI Patterns (review outputs)
        • Web UI Engineering (Rational)

    Web Design is combined by three parts:

    Look and Feel – High Level Look and Feel

    In this part, we only review and finalize color theme, page size proportion, page columns and etc. Things we need to keep in mind are that do not gaze at every specific details and trouble ourselves to think too much about details. Stay a little far away from the monitor and watch the website. What we want from this meeting is an overall feeling of the website that whether the color theme is suitable for our products and services or not, whether this feeling is the feeling of our industry or not.

    The things we are reviewing can be 2 or 3 JPEG files created by same or different Web Designers. The outputs will be a color theme, a fake homepage and a fake product page with sizing and layouting information. Let’s vote and save one overall feeling.

    Look and Feel – Components Style Guideline

    In this part, we figure out the basic UI components styles. What a button looks like, a tab group looks like, a link looks like, a picture border looks like, a text paragraph font size is, a clearance area should have, a  content section looks like and etc. Having this Components Style Guideline in our hands, Web Designer’s productivity will boost. It is the DNA of our website.

    Content – Content Sections on a Specific Page

    Content is more page specific. List all the important pages.  For example: Homepage, Product Page, Search Page and etc. In this review meeting, we review what content sections we should have for Homepage except those global elements such as Page Header, Footer things. For example: in Homepage, we want to have Hot Products, Large Ad Module, User Login, Special Promotion, Hot Categories, FAQ and etc.

    Behavior – UI Patterns

    Behaviors might be slightly different among different regional users because of their language, society tradition, race, religion, education and the level of modernization. Do not risk being creative on this. Based upon tons of best practices, there are lots of patterns for human being’s behaviors.  If we follow these UI Patterns, we could save users effort learning how to use and browse our website. If we invent something new or difficult to understand, users may start to hate using our website or give up.

    What is a UI Pattern? For example: how a poll acts like, how a product rating acts like, how a product comment form acts like. There are many designers and developers collect, organize and maintain UI Patterns in some places.

    You can visit http://www.gogosam.com/category/user-experience/ui-pattern/ to download the reference we prepare for you. You may also find lots of reference website by visiting above link.

    Once we understand what UI Patterns are then we probably want to choose and create some for our website. In this meeting, we review what we have chosen from UI Patterns.

    By finishing above review meetings, basically we have almost everything ready to the next session – Web UI Engineering

    • UX
      • Web User Interface
        • Web Design (Emotional)
        • Web UI Engineering (Rational)
          • Modularized
            • Framework (Global)
              • Header
              • Footer
              • Column Containers
            • UI Components
              • Site Navigation
              • Search Component
              • Catalog
              • Flyout
              • Breadcrumbs
              • Pagination
              • Overlay
              • Tab Group
              • Button
              • More…
            • Content Sections
              • Hot Products
              • Large Ad Module
              • User Login
              • Special Promotion
              • Hot Categories
              • FAQ
              • More…
          • Internal Integration
          • External Integration (Cross Team)

    Web UI Engineering, it is a rational process, so we can slice the big project into many working pieces and utilize our resources most effectively. Every single piece has been modularized and they do not have many dependencies, so everybody can work simultaneously.

    Global Framework is ready. Header, Footer, Column Containers are ready. Site Navigation is ready. Search Component is ready… Hot Products is ready. FAQ is ready. What a wonderful moment! The website is like playing a puzzle game now. Let’s turn it into Internal Integration phase.

    Putting all Homepage parts into the Global Framework, bingo! Homepage is ready!
    Putting all Product parts into the Global Framework, bingo! Product Page is ready!
    … Ready! Ready! Ready!

    Till now, our Web User Interface is completed with mock data. Business people, UI Designers, JavaScript Developers, and HTML Developers have done a great job so far and they are ready to hand off it to Java Developers for an External Integration.

    External Integration here means, replacing all mock data with real data from database or real data proceeded by business logics.

    In the end, let’s take a look at the complete Web User Interface Design and Development Model under UX:

    • UX
      • Web User Interface
        • Web Design (Emotional)
          • Look and Feel
          • Content
          • Behavior
        • Web UI Engineering (Rational)
          • Modularized
            • Framework
            • UI Components
            • Content Sections
          • Internal Integration
          • External Integration (Cross Team)

      By applying our best practice into real development, we have a true story that design and develop a Prototype of eCommerce Website Homepage from scratch in 3 days!

      Bookmark and Share

      A floor plan done by Google Sketchup

      January 9th, 2013

      Maybe I would work as a interior designer someday?

      Bookmark and Share

      You need to know “Lorem Ipsum” being a UI Developer/UI Designer

      September 23rd, 2011

      Quickly go through following quotation from http://www.lipsum.com/

      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

      When I first time worked with the very professional UX team in Walmart.com, I was very curious about those text they are using in their wireframes and deliverables. By that time, I did not realize the importance of “Lorem Ipsum” and, no offense, once I thought they fellows are all Mexican since I have no idea about Spanish at all. A couple of days ago, you know, never too late to learn, I happened to google the keywords “Lorem Ipsum” and found that interesting site. Like a wiki page, they explained “Lorem Ipsum” well. Here I want to share with you. When I am developing UI Prototype, I am always wasting some time on thinking what sort of content I should put in to the HTML container like a <P> tag. If you put something like dummy dummy dummy it harms your business proposal. It is not serious and unprofessional to just put something like “dummy dummy dummy” or just leave a large empty area.

      A website product in design phase usually have  a lot of rounds of customer reviews. There are a lot of images and text paragraph, it is not wise to display lots of junk text and broken images. Your client may have bad impression on your work though they are as excellent as always. To make it better you may want to make good use of “Lorem Ipsum” and image placeholders. Here is what they look like:

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim porttitor diam et congue. Donec porttitor facilisis congue. Donec id dui tortor, non pellentesque purus. Quisque erat risus, aliquet ut congue ut, dictum quis velit. Vestibulum consectetur nisi ut odio suscipit dapibus. Ut nibh quam, euismod auctor rutrum quis, luctus a mi. Quisque eros dolor, tempus ac iaculis at, venenatis quis sem. Mauris lacus turpis, ornare quis blandit sed, sodales ut risus. Praesent volutpat quam est, quis euismod nulla. Sed felis leo, scelerisque vel feugiat in, fermentum eget diam. Quisque semper nisi sit amet dolor bibendum fermentum. Curabitur ut quam non ante facilisis vulputate. Nullam ipsum felis, volutpat ac gravida nec, consequat sit amet eros. Cras lorem elit, auctor id iaculis nec, semper sed felis.

      Nam auctor ullamcorper urna at viverra. Nunc placerat gravida diam, in dignissim tortor vehicula in. Quisque sed auctor nisi. Nunc in magna quam, eu bibendum elit. Sed faucibus sodales aliquet. Nam euismod tempus tellus vel luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vestibulum ultrices arcu, ac mollis libero consectetur vehicula. Vivamus gravida luctus libero, sed semper lectus tempus ut. Quisque dui tellus, venenatis vel volutpat eget, malesuada eget enim. Curabitur sapien lectus, feugiat aliquam adipiscing vel, rutrum eget augue. Vestibulum porttitor, risus at faucibus lacinia, nisi velit aliquet diam, porta suscipit mi elit vitae erat. Morbi non elit nibh. Quisque faucibus lobortis orci a bibendum. In vitae ante sit amet diam gravida pharetra. Vestibulum a ligula purus, at malesuada tortor.

      Feel lot better huh?

      Come on dude, go and try to generate some “Lorem Ipsum”.

      Bookmark and Share

      Non-IE browser users are not able to book train tickets online in China

      June 15th, 2011

      Translated by Samuel Wang (http://gogosam.com)

      Original From http://news.sina.com.cn/c/2011-06-15/084622643844.shtml

      Beijing-Tianjing city wide railway has started piloting Real Name Ticketing since this week. But some of the consumers reported to us that non-IE browser users are not able to book train tickets. Estimated that there are about 20 million internet users are not able to book train tickets online.

      Consumers reported that to buy Beijing-Tianjing city wide train ticket started with “C” online from Online Customer Service Center of China Railway (www.12306.cn), they always get either garbled text output or the prompt of unable to login directly. Journalist have tried Google Chrome, Firefox, Safari on Mac and Opera to sign in the website, but found that none of these browsers can sign in properly after clicking “buy ticket” option while IE9 and 360 do.

      Customer Service of China Railway has given an explanation on that, the website of Department of China Railway is developed for IE standard, only supporting IE6 and above.

      Baidu distributed a survey indicates that IE6 is still occupying a top ratio of 39.68% in browser market in China till the end of March 2011. The second is 360 safety browser, 18.57%. IE8 and IE7 are the third and fourth, then Sogou browser, Google Chrome, Tencent TT, Theworld, Maxthon and Firefox.

      Told by professionals that domestic browsers such as 360, Sogou and Maxthon are using dual-core mechanism to render the web pages in order to be compatible with those website designed and developed for IE6 such as Online Customer Service of China Railway. There are approximately 20 million internet users need to upgrade their browsers among 457 million Chinese internet users.

      Bookmark and Share

      Large-Scale Website UI Engineering Strategy – Chapter 1 – CDN (Content Delivery Network)

      June 7th, 2011

      CDN (Content Delivery Network)

      • Production
        • CDN
        • Compression and Minification
        • Cache and Pre-cache

      To talk about CDN, we must start talking about http first. The more http connections you have on your web page, the heavier load your server would have which means your application server/cluster would have less capacity and more memory and disk consumption. And from cost saving perspective, you will spend a large portion of expense on storage server/cluster so that your money will not be productive enough.

      What’s a connection?

      1. A style sheet containing CSS fragment is a connection
      2. A Javascript file containing framework and library is a connection
      3. A favorite icon for bookmarking is a connection
      4. A image file displayed on the page is a connection
      5. A flash animation is a set of connections

      There are more connections while above connections are most common for a website. We usually store them on a CDN server provided by a 3rd party CND service provider. There are tools for us to find out how many connections we have for our page, they are Google Chrome built-in inspector, Firebug for Firefox and Fiddler Web Debugger. Chrome is my favorite.

      In large-scale website, we always have separate runtime environments for different branches. In code level, we need a switch to turn on and off CDN just because CDN resources are not always synchronized with your development on a real timely basis. This switch shall always be designed to be configurable.

      If you need more information about CDN, please follow the link from Wikipedia
      http://en.wikipedia.org/wiki/Content_delivery_network

      Bookmark and Share

      Large-Scale Website UI Engineering Strategy – Introduction

      June 7th, 2011

      Do not have any clues how to build a solid front-end UI foundation for a large-scale website like Walmart.com or Amazon.com? Here I am going to show you as being a lead of HTML team, what to keep in mind and how to connect them altogether and build a great application with great flexibility, extendibility and of course, performance with confidence!

      Let’s see a structure of all the elements required by a large-scale website.

      • Production
        • CDN
        • Compression and Minification
        • Cache and Pre-cache
      • Development
        • CSS
        • Containers
        • Sprites
        • JavaScript
        • Cookie management
        • Handoff Directory
        • Tasks (Ruby or Perl)

      I will explain each of them in the following chapters, so after reading this you should have a big picture of these elements and be able to connect them together. What’s more important is you will also make your team work highly productive.

      Bookmark and Share

      HTML UI Engineering Consulting

      June 2nd, 2011

      Being an HTML Architect in one of the biggest software outsourcing company in China, I found it is difficult to hire qualified international and professional HTML developers or contractors. Also encountered difficulties finding good candidates when interviewing HTML developers from a world famous Indian software outsourcing company in California, United States. An idea came up in my mind. I want to open a business of HTML Consulting, training people who love to be HTML developer and providing world-class professional HTML developers to fill in software industry talent pool. I will train those talents in order to make them experienced enough to qualify HTML developers for Bleum, Infosys, Taobao, Walmart, Amazon, Twitter, Facebook, Yahoo and Google.

      Am I crazy? Nope.

      Is it realistic? Yep.

      I want to train learners full timely in a month excluding weekends, that’s saying 4 weeks or 20 days. Only train 5 persons at a time. 20 days to have 5 qualified, let’s say, Junior HTML Developer for the market.

      I will also hire sales persons to get in touch with recruiters in Head Hunting firms, training and referring these candidates to those companies.

      Meanwhile, I will also provide technical supports for those companies hiring that candidate from us.

      I have been swimming with this industry for more than 10 years. One of the bests in the world, I always thought myself this way. I want to do something great, I want to contribute to this industry. I have a systematical knowledge framework of how to engineer HTML and work with cross-team and cross-culture. I definitely want to leave something to the world. I have been thinking so long, shall I work for employers evaluate me very low? Shall I just quit some job and start looking for a new job, starting over and over again? No, definitely no! I still can contribute and broadcasting my best practices and best ideas on my own! I think I am better than anyone else in China to do this. It is a matter of time, I will make it.

      Bookmark and Share

      Technical Interview Quiz for HTML Developer and UI Developer

      April 6th, 2011

      Technical Interview Quiz for HTML Developer and UI Developer

      CSS Section

      Please answer following questions in order to test your tool-free skill of CSS.

      1. What CSS property allows you have multiple DIV stay in the same line?
      2. What do I mean when I’m developing with inline HTML?
      3. How many different ways you know can make an HTML Object hidden?
        1. display: none
        2. visibility: hidden
        3. opacity: 0
        4. Set absolute position out of the visible area
        5. Give me an example of CSS Shorthand
        6. When would you use padding and margin? Why?
        7. Please name some browsers that support PNG.
        8. Why do we use CSS Sprites?
        9. How to optimize CSS file?
        10. How to override a style inherited by its parent object?

      HTML Section

      Please answer following questions in order to test your fast prototyping skills.

      1. Why do we use DOCTYPE?
      2. Do you know about CDN (content delivery network)?
      3. Can you tell by default the difference between TH tag and TD tag? Do you know the use of BASE tag?
      4. How many line break related Tags do you know?
        Do you know the use of WBR tag and NOBR tag?
      5. What are the major attributes for IMG tag?
        1. height
        2. width
        3. align: absmiddle
        4. alt
        5. What’s Conditional Comment commonly used for in HTML?
        6. How many different ways do you have to build a rounded corner overlay?
        7. What images would you need to build a rounded corner box?
        8. Give a sample use of Semantic HTML

      DHTML Section (JS, HTTP, Cookies, RE, JQuery)

      Please answer following questions in order to test your scripting skills.

      1. Why do we sometimes use “var” to declare variables?
      2. Do you know about AJAX caching methodology?
      3. How to convert a float type number into integer type in JavaScript?
      4. How to set Cookies expiration in JavaScript?
      5. How to implement a simple JavaScript animation without JQuery?
      6. How many and what different loop statements are there in JavaScript?
      7. What’s the built-in order of parameters in JQuery each() function?
      8. How to get element positions by using JQuery api?
      9. How to append or insert an object in BODY tag with and without JQuery?
      10. How to dynamically set CSS styles in JQuery?
      11. How do I get all the names of the fields that have the same prefix?  (expect some regular expression related answer)
      12. What are the common practices when we are processing a form?
      13. What events will be involved in implementing a Drag and Drop in JavaScript Core Language?
      14. How do you debug your UI component?

      TOOL Section

      To be continued

      Bookmark and Share