DotNetSlackers Community

Back to blogging, but I moved

simoneb — Sun, 27 Nov 2011 22:50:00 GMT

I haven't been blogging for quite some time now, but I'm back to blogging at simonebu.posterous.com. There have been many changes in my professional life so the new topics I'll be blogging about may or may not be of interest, although I'd appreciate if you took the time to read through them!

There's a new rss feed, but for those who were following me already I will be pointing the current feed to the new one soon, so you don't need to change anything in your subscription. For those who weren't following me the new feed to subscribe is this one.

The (probably) never ending war of Chrome, FireFox, and IE

xxxd — Thu, 03 Nov 2011 18:34:00 GMT

Something interesting happened in October (yeh, stocks have been doing comparatively great): IE's share in global desktop browser usages has dropped to a perilous 52%. This, combined with its barely there mobile browser usage, brings its overall share below the 50% percentage mark.

Source: www.frelia.com

With interesting data invariably comes incessant probe of why.

Why so?

Some analysis pointed out the geek factor.

The tech community has abandoned IE in droves ever since they found the delicious toy of Firefox, which is dynamic and cool, decidely tech friendly and fast and active in development. It started the trend of multiple tabs, a wonderful array of extensions. It gives programmers Firebugs; Chrome joined the browser war in 2008, soon afterwards, tech people was attracted to it by its minimal interfaces and fast and smooth performance. Chrome came in late yet learn fast. It soon offered a wealth of tools and even more faster development cycle. I believe in no time, Chrome would reach 100 or Google (1 followed by 100 :)). Chrome also upended the browser game by building its V8 engine that fueled the Javascript engine speed war, throwing in its own script langauge.

More analysis dived into the browsers' differences in speed, interface, support for standards (ie., html5 and css3), privacy and security and Extensions.

In short, there is convergence among the browsers towards speedier, cleaner, more secure, and more customizable browsers. Surprise! With competition so fierce and stake so high, the best wins!

Speed-wise, Firefox and IE have greatly improved their speed so much so that Chrome actually is currently losing in this battle.

Interface-wise, Chorme started the minimumistic approach, Firefox and IE are taking notes. This minimum approach is actually catching fire in interface design. Google started it with its barebone google search, Facebook's home page also has the clean blue. Chrome, FireFox and IE also took great effor to allow tabs be informative yet non-obtusive, draggable and dockable. Work like a great app.

In terms of standards support, in the tech community, IE is always the object of ridicule. In support of HTML5 features, IE has been falling behind.

In extension offering, FireFox leads the way.

Under the hood - JavaScript Engines

JavaScript is currently the most important language. This in no small part is due to the quick rise and improvement of JavaScript engines, which in turn has made this browser war so intense and so interesting and so beneficial to all of us internet users.

The engine behind Chrome is V8 javascript engine. Copy Wikipedia here:

"V8 increases performance by compiling JavaScript to native machine code before executing it, rather than to execute bytecode or interpreting it. Further performance increases are achieved by employing optimization techniques such as inline caching. With these features, JavaScript applications running within V8 are said to have an effective speed comparable to a compiled binary."

Firefox has a rapid evolution line of JavaScript engine, started with Rhino, the very grandpa figure started at Netscape in 1997. After that, there are "monkeys" with mostly funny names: SpdierMonkey, TraceMonkey, JagerMonkey, IonMoney, then tamarin.

IE did not have any serious JavaScript engine until IE 9. Before that (IE 8 and earlier) it uses a script interpreter for running JavaScript. Now with IE 9 JavaScript engine, it provides features such as JavaScript background compliation and library optimization.

Parting words

So, in the global browser competition for more market share, IE is in steady decline yet still dominate the scene, FireFox is barely holding its ground, Chrome is rapidly rising. Still nothing is certain other than that the more they compete, the more we demand, the greater good will come out of it. Also, we, programmers, time to work harder to meet up the challenge.

Source:

Wikipedia: JavaScript Engine
The New JavaScript Engine in Internet Explorer 9
The End of an Era: Internet Explorer Drops Below 50 Percent of Web Usage
The End of an Era: Internet Explorer Drops Below 50 Percent of Web Usage
Chrome 10, Firefox 4.0, or IE9? The Browser Choice

Node.js, what is that?

xxxd — Wed, 26 Oct 2011 18:30:00 GMT

Node.js is just about the hottest new language on the horizon. It also has some puzzling catch-phrase such as "JavaScript on the server side". It is so hot and so puzzling that I am compelled to commit one hour to watch the video sit on the home page of Node.js web site.

One hour video is long by any standard, but the presentation guy and Node.js creator Ryan Dahl breezed it through without one single slide.

He joked, he coded and typed command lines, he demoed a crappy chat program written in about 5 lines using Node.js. (Ouch, this tech world was and still is dominated by wiz kids, almost chrismatic, not a bit nerdy.)

However I was still confused even after the one-hour video. What the heck is Node.js? Why on earth we have to create our own servers?

The statement in big font after the video does not seem to help much. As the following it goes:

"Node's goal is to provide an easy way to build scalable network programs. ... Node tells the operating system (through epoll, kqueue, /dev/poll, or select) that it should be notified when a new connection is made, and then it goes to sleep. If someone new connects, then it executes the callback. Each connection is only a small heap allocation."

???

Searching around, I found quite a lot of examples where cool guys flaunting their cool code, however little clear explanations.

Searching more, I found quite a lot of insights and analysis, predications and dismissions. A testimony of how Node.js has caught the short attention span of the highly excitable yet unforgiving tech community.

Eventually, I came to my senses (at least I think) what Node.js does, what makes it special.

1. Node.js handle things asynchronously. The word "asynchronous" has been a sort of cliche. The big A in AJAX, for example, stands for "Asynchronous". However, the asyc part of AJAX comes from the client side, in that client (a browser) sends requests to server and still serves the page while waiting for the server to come back for a response. The server process requests one at a time. To handle multiple requests, it spurns multiple threads.

When requests fly fast and numerous and from everywhere, the thread model falls short. Node.js tries to overcome the challenge by providing true asynchornousity. Instead of spawning a new OS thread for each request, Node.js uses one thread. The thread stays idle, however springs to action on events. On each event, the thread takes note, tasks it to one or more processes, then on with another request.

2. Node.js uses an event-driven model. Event-driven is also a cliche, however Node.js gives it some new substance. Best illustrated the point is the article that uses The Doctor’s Office Reception Line Analogy and fast food The Fast Food Restaurant Analogy. Node.js event-driven model is also closely tied with its async feature. Node.js does not allow blocking I/O, that is, it never stops and waits for I/O.

3. Node.js is server side javascript. Sort of. It adopts the syntax and event-driven concept of client side JavaScript, and strives to run "the same script" on both client and server side. However Node is not JavaScript, it is actully written in C, and it runs from command line in unix environment (support for windows is supposedly coming. There has not been a sincere effort). The underlying engine for Node.js is the V8 javascript engine (the same one that runs Google chrome).

4. Node.js is still very new, therefore it has a lot of forseen and unforseen potentials and pitfalls. For one, Node.js is still a very geeky, barebone creature, its library needs to be greatly fleshed out to become a framework of sophistication, upon which developers can readily develop rich web applications. Despite all the buzz and excitement surrounding Node.js, there still lacks high profile web applications built with Node.js.

5. Node is meant for something, but not everything. It is meant for fast and frequent web communications, it is not meant for heavy-duty data access and computation.

"Node has changed our mental image of what a server can be. It doesn't have to be running on a high-performance blade in an air-conditioned co-lo serving millions of requests and gigabytes of data. It can be in your pocket synchronizing your contacts whenever it finds Wi-Fi. It can be caching a web application for faster, local access. It can be a peer-to-peer web server. And it can be a number of things we haven't even thought of yet. "

The secrets of Node's success

Source:

The secrets of Node's success
Just what is Node.js?
Node.js

CSS Lint, harmful or useful?

xxxd — Mon, 24 Oct 2011 15:35:00 GMT

While they say closed garden is the lending trend in internet, to me, the internet still feels like an ever expanding infinite loop, or maze. Like a little kid, I really start out just to search for a shiny pebble, I end up going far and away and lost. I end up with a pocket full of things I am excited and confused about.

Finding css lint is like that. I was looking for some basic css truth, then along the way I read a dozen of other articles, css related or not. Then I stumbled into css lint. So I copied and pasted from my reportoire of css files, linted it. Wow, it threw up a vocano of warnings at me.

Source: Screen Shot of CSS lint of my css

Interesting. I scanned through them.

"Values of 0 shouldn't have units specified"; "Broken box model: using height with padding"; "Rule is empty" ...

Make sense, I was thinking, almost delighted. Wow, this could be my css "spell-check".

Then I was confused by other rules. "Don't using adjoining classes", "Don’t use IDs in selectors".

Really? What is wrong with using IDs in selectors?

A little search quickly led me to this highly provocative article CSS Lint is harmful, followed by fifty or so comments, mostly of them is a bit spiteful in tone.

So What are the CSS lint rules?

Parsing errors should be fixed
Don’t use adjoining classes
Remove empty rules
Use correct properties for a display
Don’t use too many floats
Don’t use too many web fonts
Don’t use too may font-size declarations
Don’t use IDs in selectors
Don’t qualify headings
Heading elements should have a consistent appearance across a site.
Heading styles should only be defined once
Be careful using width: 100%
Zero values don’t need units
Vendor prefixed properties should also have the standard
CSS gradients require all browser prefixes
Avoid selectors that look like regular expressions
Beware of broken box models

Source: Introducing CSS Lint

Among them, the most attacked is the rule of "Don’t use IDs in selectors".

"To suggest that you never use ID’s is simply throwing the baby out along with the dirty bath water. ID’s are extremely useful and you absolutely should use them. They are the fastest way a browser can select a given element. They are useful for in-page anchoring and if they’re already there in the markup then use them as style hooks. They are also, oddly enough, perfectly correct to use as long as they’re only ever one instance of that ID on any given page."

Source: CSS Lint is harmful

On with my search. I found a lot of people have dismissed this rule. As it is with almost everything, never say never. Reasons are probably: 1) it has been a common practice; 2) ID by definition is mean to be unique, therefore there is no ground for re-usability concern. And, what is the difference using ID selectors and class selectors.

However, there are also as many people as passionately depending the rule. Using ID selectors lead to a downward spiral into specificity; IDs are meant to be specific, yet css rules by default are meant to be abstract rules.

So my search got me into a heated debate as with so many aspects of the web, jQuery vs. Ext Js, Flash vs. Html5. So I decided to end my aimless wondering in this maze by ending the search, and take away home my rules:

1) css lint is not all evil or good, it is a good tool for you to get your css cleaner. Yes, always true are rules such as "no empty rules", "zero values need no units".

2) The "too many" rules are to your discretion. Only you should know whether there are too many fonts, too many floats. However, it is good to have a second opinion.

3) IDs in css selectors may not be too bad, at least probably not worth your effort of going back and rewriting your pass css rules. However, when you start a new project, when you find yourself define a set of rules just for one unique ID, think again.

Source:

CSS Lint
Don’t use ID selectors in CSS
CSS Lint is harmful
Don’t use IDs in CSS selectors?

2011 Internet Trends From Mary Meeker (Queen of Net)

xxxd — Fri, 21 Oct 2011 15:51:00 GMT

The following is from the 2011 internet trend report by Mary Meeker (known as "Queen of the Net") released from Web 2.0 Summit San Francisco, CA. The report is a wealth of insights and insightful charts and graphics.

For all of us who are in the thick of the tech world, the time is unprecedently exciting. It is going to be even better.

1. Globality – We Aren’t In Kansas Anymore…

Apple, Google, Amazon.com & Facebook Remain Mega-Leaders; yet the majority (81%) of their users are from overseas.
Chinese (& Russian) Companies Continue to Step Up. <
In 3 Years, China Added More Internet Users than Exist in USA… China / India / Nigeria / Russia / Iran = Biggest Adders

2. Mobile – Early Innings Growth, Still…

Breakthrough Communications Technologies / Services Can Breakout Even During Breakdown Times.
Despite Tremendous Ramp So Far, Smartphone Usage Still Has Huge Upside
iPods Changed Media Industry… iPhones Ramped Even Faster… iPad Growth Leaves “Siblings” in Dust
Android ‘Phone’ Adoption Has Ramped Even Faster than iPhone
Two Horse Races in Smartphones & Tablets, So Far
Mobile Usage, search and advertising all ramping up quickly in all geographies.

Source: Hierarchy of Needs Revisited

3. User Interface – Text -> Graphical -> Touch / Sound / Move

Before Steve Jobs, computers were utilitarian tools for computation; After Jobs, computers became beautiful objects we could use in thousands of ways to aim to make life better.
Natural User Interface Revolution – Now in Touch / Sound / Move Era
The Next Big Thing(s)? Those Two Big Things on the Sides of Your Head… Everything merges toward audio

Source: Online Audio

4. Commerce – Fast / Easy / Fun / Savings = More Important Than Ever…

eCommerce = Four Quarters of Accelerating Growth
eCommerce Continues to Gain Share from Offline… at 8% Share of USA Commerce with Lots of Headroom

Source: eCommerce Accelerating Growth

Old Magazine Paradigm Finally Comes Alive. Click & Buy (on mobile) can really empty your wallet fast…
In a Mobile-ized / Transparent World, price matters

Source: Local ECommerce is spurred by mobile development

5. Advertising – Lookin’ Good…

Google Paid Clicks & Cost-Per-Click Continue to Grow Rapidly;
Time Spent on Social Networking Sites Surpassed Portals. Social Networking CPMs is

6. Content Creation – Changed Forever

Content Commoditization – Value Shift from Creators to Aggregators

Source: Print Down

7. Technology / Mobile Leadership – Americans Should Be Proud

We are Living Through a Once Every 10-20 Years Technology Evolution – The Mobile Computing Cycle…
‘Made in USA’ Smartphone Operating Systems = 64% Share from 5% Five Years Ago
Still Early-Innings Era of Smart-Phones to Smarter-Phones

8. Mega-Trend of 21st Century = Empowerment of People via Connected Mobile Devices

Global Information Flow - Real-Time + Fast + Broad

Source: 16 Minutes Before / After Japan Earthquake on 3/11/11
Snapshots of @replies From & To Twitter Users in Japan
Global Information Flow – Remote Locations Getting Connected
Global Economies / People = Increasingly Connected / Co-Dependent

9. Authentic Identity – The Good / Bad / Ugly. But Mostly Good?

10. Economy – Lots of Uncertainty

Stock Market Volatility = 2x Historical Average
Consumer Confidence = Well Below Historical Average
USA Corporate Capital Spending Budgets = Being Revised Down
GDP Growth Forecasts = Being Revised Down
Stock Markets = Often Leading Indicators of Economic Activity Russia -33% from 52-Week High; Oil (-24%) / China (-23%) / Europe (-23%) / S&P500 (-12%) / Nasdaq (-9%)

Source:

INTERNET TRENDS – Web 2.0 Summit -San Francisco, CA - Mary Meeker (marym@kpcb.com) – October 18, 2011

Microsoft's Chinese problem with IE6

xxxd — Thu, 20 Oct 2011 16:08:00 GMT

Microsoft got to be so very tired of IE6, the once very popular child of their browser families, so much so that they set up a count-down website dedicated to the sole purpose of killing it.

Source: Microsoft IE 6 Count Down

Guess who is standing in the way? China. Chinese IE6 users have been trickling down, as of today it has about 28%. But 28% still makes a big bleeding heart in the above map. And any percentage of Chinese users can easily knock off the whole Europe or even America.

Right now the size of Chinese internet users stand at about 500 million users, and it is still growing. And its mobile users is even growing faster, it is estimated that the size of mobile users will surpass pc users as early as 2013.

Source: China Now Has Over 500 Million Net Users [CHART]

I can understand why the IE6 chinese users stick with IE6, because my parents are one of them. When they started gingerly with internet, I taught them to click the big blue E. They remembered ever since and they are afraid of making any changes, clicking on any popups that might bring in a flood of virus. The golden name of Microsoft somehow does not help much. Also, all they wanted is just to read their news, so why care about IE 6, or 7, or 9?

Ok, with that kind of mentality and the formiddable weight China carries, Microsoft has to continue its count down for at least a few years.

Source:

China Now Has Over 500 Million Net Users [CHART]
Microsoft IE 6 Count Down
Microsoft IE 6 Count Down
More Chinese netizens access internet via Mobile than PC

Tips to create robust selenium tests

xxxd — Wed, 19 Oct 2011 17:49:00 GMT

According to a survey of open source automation testing tools, Selenium is the most popular of them all. And it is getting more and more popular everyday. As a matter of fact, it is currently the only viable test tool to test website as a whole, because it can simulate running a website as a real user would do. And one set of tests can be run across differnt browsers.

Source:Selenium -Open Source Test Automation: An Overview

However browser testing is complicated, the ubiqutous injection of asynchorons AJAX only makes the situation worse. On top of its own quirkiness, Selenium has to deal all of the quirkiness of differnt browsers, the possible failure of http requests, etc.

Therefore, browser simulation does come with a cost and not all users (e.g., me) are happy. Some of the biggest challenges that Selenium have now are:

Test brittleness
Infrastrucuture maintenance
Test run-time during
Documentation

Source: Top 5 Challenges for Selenium Users (San Francisco Meetup)

Some of the much complained test brittleness can be avoided or alleviated by using some of the tips (I learned them from the presentation at Top Selenium Tips From The Sauce Codebase, who distilled the essence from the sucesses or failures 8 million tests):

1) Use implicit waits



        public IWebElement ImplicitWaitForElement(IWebDriver webDriver, String id, int timeout = 10)

        {

           

            webDriver.Manage().Timeouts().ImplicitlyWait(TimeSpan.FromSeconds(10));

            webDriver.Url = "http://somedomain/url_that_delays_loading";

            IWebElement myDynamicElement = webDriver.FindElement(By.Id(id));



            return myDynamicElement;

        }

2) Use explicit the right way

Never use static wait:

sleep (10)

(Why? Because a) it increases overhead, you make the webdriver wait no matter what; b) you can never predict what is the correct time interval.)

Instead, use a condition wait



  public IWebElement ExplicitWaitUntilForElement(IWebDriver webDriver, String id, int timeout = 10)

        {

            webDriver.Url = "http://somedomain/url_that_delays_loading";

            var wait = new WebDriverWait(webDriver, TimeSpan.FromSeconds(timeout));



            return wait.Until((d) => d.FindElement(By.Id("someDynamicElement")));

            

        }



 public void WaitforElementPresent(IWebDriver webDriver, String id, int timeout = 10)

        {

            //var sw = new Stopwatch();

            //sw.Start();



           

            for (int i = 0; i< 60; i++)

            {

               try

                {

                    if ((webDriver.FindElement(By.Id(id)).Enabled) == true)

                        break;

                    

                   Thread.Sleep(1);

                }



                catch (Exception)

                {

                    // Continue the loop, though it may throw an exception at first

                }

            }

            

        }

So the methods above instruct the web driver within a limited time range for an element to appear before giving up and report the error.

3) Create a magic login method

In a lot of selenium test cases, we call the same login method again to gain the entry to another password protected pages. Doing so has quite some drawbacks: a) Login failure will invariably cause the failure of the other tests; b) Overhead. If a login method takes, say 10 secs., then 100 tests would waste 1,000 secs on simply login.

So instead, the Sauce Lab teams to create a magic login page to allow automatic login, that is create VIP test account to allow unlimited access for inspection purposes.

Source:

Selenium -Open Source Test Automation: An Overview
WebDriver: Advanced Usage
Top Selenium Tips From The Sauce Codebase
Top 5 Challenges for Selenium Users (San Francisco Meetup)

Selenium - Page Object Pattern

CSS best practices or traps?

xxxd — Tue, 18 Oct 2011 16:32:00 GMT

Have developed numerous web site now, big and small, fancy and dumb, started clean or jumped in middle way. Sometimes I was responsible for the whole site (front UI and backend database), sometimes just the UI side. A lot of times, css has been treated in a ad-hoc fashion, as a result, css has grown into a mass of snarling classes and elements with funny ids, living across a great many css pages.

For example,
(To be fair to myself, the classes are tweaks from Ext original ones.)


#tagReviewMrcContainergrid  .x-grid3-hd.x-grid3-cell.x-grid3-td-1,
#tagReviewMrcContainergrid  .x-grid3-hd.x-grid3-cell.x-grid3-td-2,
#tagReviewMrcContainergrid  .x-grid3-hd.x-grid3-cell.x-grid3-td-3,
#tagReviewMrcContainergrid  .x-grid3-hd.x-grid3-cell.x-grid3-td-4,
#tagReviewMrcContainergrid  .x-grid3-hd.x-grid3-cell.x-grid3-td-5,
#tagReviewMrcContainergrid  .x-grid3-hd.x-grid3-cell.x-grid3-td-6
{
	
	background-image:url('../images/snipe-sprite.gif');
	background-position:right -91px;
	background-repeat:no-repeat;

}

Now whenever the site needs a face-lift or extreme make over, the old css will be the first one to be under the knife, be patched, shifted, or discarded. Oh, boy, the giant octopus with great many arms, where do I even start?

Facebook has had the same problem, and fortunately they got a css master Nicole Sullivan that is keen on keeping css simple and organized. Facebook is decidedly complex and feature rich, however, it is also decidedly and has a deceivingly simple clean look. It's css is simple and pleasant to read:


table.component_table {
    padding-left: 5px;
    padding-top: 5px;
}
table.component_table td.icons {
    text-align: center;
    vertical-align: middle;
    width: 20px;
}
table.component_table td.content {
    white-space: nowrap;
    width: 200px;
}

What are the problems? What are the traps that we stepped into however she managed to escape

In a presentation at Webstock conference, Nicole laid out the problems and some principles. The problems are with the majority of sites are:

Duplication of property value pairs
Duplication of elements
Growing specificity

According to her, the so-called best practices are actually the traps that trapped us to those problems.

Yes, we ought to follow the best practices with a grain of salt. Yeah, like everything, too much of anything is not such a good thing.So the so-called best practices under attack are:

1. Classitis

Classes are our friends. Seeing a lot of IDs is actually very bad. Run from this kind of code:

However, when define classes, try not made classes too narrow or too broad. That is to say, both extreme micro-managing and macro-managing are bad. Balance is the key.

2. Never add an non-semantic element

You want your content to be marked up in beautiful HTML that uses a diverse set of tags like P, UL, OL, LI, H1-6, strong, em. Add a few extra wrapper elements to keep your content nicely cordoned off from your containers or separate out decorative flourishes! Your HTML will be clean and your CSS predictable.

3. Never add a non-semantic class

Never want a class like "bigRedText" or "giantRedText".

CSS needs abstractions. We need to be able to solve a particular problem really well, and then allow people to go on using that solution long afterward.

3. Use decadent selectors

Never has more terrible advice been given (ok, ok, I exaggerate, but for CSS, this is as bad as it gets). The descendent selector is *only* appropriate between multiple nodes of the same object (say, a tab container and its’ tabs), and even then, only when you are absolutely certain that there will never be any markup changes. Very hard to guarantee, no?

4. Sites need to look exactly the same in every browser

Yes, it would be nice to look fancy across all browsers, but not all browsers are created equal, that is why, you should give up forcing a round corner on IE 6, or making your site look exactly the same pixel by pixel.

See Also

Our (CSS) Best Practices Are Killing US

Selenium - Page Object Pattern

xxxd — Fri, 14 Oct 2011 13:37:00 GMT

After bitching and moaning about the instability of Selenium, after searching high and low for alternatives, I am back to Selenium again, convinced it is still the best in town. Yep, it is flexible, it is free, it is being actively developed therefore improved by day. I can write my unit tests in C# or any other server languages. And it is getting more and more backings from major vendors. I can even take my tests to the Cloud, e.g., the SauceLab.

Enough of justifications.

Selenium Page Object Pattern

One of the test designs in Selenium that has gained more and more popularity is Page Object Pattern, the core of it is to wrap your page into classes with members and methods, and in testing. Then tests can call the methods to initiate any interactions with the page UI, the way normal users does, login, run report, click a button, etc. It is a OOO approach, and its advantages are:

- Clean separation between test code and page specific code.
- Single repository for the services or operations offered by individual page object.

So take an example of login, a normal selenium login test would be written as the following:

/***
 * Tests login feature
 */
public class Login {

        public void testLogin() {
                selenium.type("inputBox", "testUser");
                selenium.type("password", "my supersecret password");
                selenium.click("sign-in");
                selenium.waitForPageToLoad("PageWaitPeriod");
                Assert.assertTrue(selenium.isElementPresent("compose button"),
                                "Login was unsuccessful");
        }
}

Now with Page oject pattern design in mind, we would wrap the login page in its own object,

/**
 * Page Object encapsulates the Sign-in page.
 */
public class SignInPage {

        private Selenium selenium;

        public SignInPage(Selenium selenium) {
                this.selenium = selenium;
                if(!selenium.getTitle().equals("Sign in page")) {
                        throw new IllegalStateException("This is not sign in page, current page is: "
                                        +selenium.getLocation());
                }
        }

        /**
         * Login as valid user
         *
         * @param userName
         * @param password
         * @return HomePage object
         */
        public HomePage loginValidUser(String userName, String password) {
                selenium.type("usernamefield", userName);
                selenium.type("passwordfield", password);
                selenium.click("sign-in");
                selenium.waitForPageToLoad("waitPeriod");

                return new HomePage(selenium);
        }
}

And the new login test would be:

/***
 * Tests login feature
 */
public class TestLogin {

        public void testLogin() {
                SignInPage signInPage = new SignInPage(selenium);
                HomePage homePage = signInPage.loginValidUser("userName", "password");
                Assert.assertTrue(selenium.isElementPresent("compose button"),
                                "Login was unsuccessful");
        }
}

So now we get a suite of page objects with clearly defined methods and services and tests can issue their tests by calling services with appropriate parameters. The code is cleaner and more readable.

Some principles of Page Oject Pattern:

Page obect itself should never make any assertions or verification. This is the job of a test.
Page object, however, upon its initiation, should ensure all elements are loaded.
A page object does not need to represent an entire page, but only to capture the critical components and services that are to be tested.

See Also:

Test Design Considerations

How Google Guys get paid? How to be one of them?

xxxd — Thu, 13 Oct 2011 15:24:00 GMT

You know, I know that Google guys are paid pretty well. Do you remember in Sept. 2010, ALL Google employees got 10% raise? Now here is a pictures of what the best paid jobs in Google and roughly how much.

You probably already have known that it is incredibly hard to be part of Google, but how hard? Here is an overview:

INFOGRAPHIC: The Incredibly Difficult Process Of Getting Hired At Google

Feel good about IT job market. And Go Mobile!

xxxd — Wed, 12 Oct 2011 14:25:00 GMT

The national job market as a whole is depressing, but on the IT side, especially in the silicon valley, it is quite sunny.

Do you know that:

According to Dice's annual survey, the average Silicon Valley tech salary in 2010 rose nearly 3% to $99,028 a year. That compared with an increase of less than a 1% nationwide to $79,384 a year. Silicon Valley has been tops in tech salaries for at least the past six years, adds Dice.

- Local Technology Salaries Lead the Nation

IT layoffs have dropped to their lowest level in a decade, and demand for techies is expected to jump 32% by 2018.

And if you have time or opportunity, please go Mobile now, because Jobs connected to mobile applications is one of the fastest growing hiring requests on Dice.

And the six hottest new jobs in IT are:

Business architect:

The role of the business architect is to fashion high-level company strategy with technology in mind. Think MBA with an IT focus.

Data scientist

Not your regular sql data developers (though that is useful too), but data scientist that use data analytics to bring stategic insight therefore business opportunitites from the enormous data.

Social media architect

Social media does not just mean just Facebook and Twitter, but also IBM, Jive, and Yammer and a multitude of runner-ups. This creates a demand for IT pros with the specialized knowledge to build secure communities within a business network and between businesses and customers.

Mobile technology expert

Is not this obvious?

Enterprise mobile developer

What distinguishes enterprise dev positions from general mobile dev jobs is their focus on compliance and security, according to Stewart Tan of Accretive Solutions, an executive search firm and consultancy. "Building mobile apps, architecting mobile strategies, and securing those devices" are the top concerns facing the enterprise today.

Cloud architect

"There's so much positive momentum toward cloud integration," says Ron Gula, CEO of Tenable Network Security. "People who can really identify the architecture from a simplicity point of view are going to be in demand."

See Also:

The 6 hottest new jobs in IT

Google Dart: Javascript killer or just another language

xxxd — Tue, 11 Oct 2011 17:29:00 GMT

Oh, boy, don't we already have too many programming languages? Now Google is throwing Dart at JavaScript, the uniquituous script languages that runs at the heart of every browser on every platform. Every platform, mobile phones, mobile tablets, plus Macs and Pcs, that is exactly what makes Javascript a problem.

In the widely-read (maybe intentionally) leaked memo, Google declared that "JavaScript has has fundamental flaws that cannot be fixed merely by evolving the language" and they have taken two strategies to

a) Co-exist with JavaScript in the begining

b) Replace JavaScript eventually

The would-be advantanges or potential of Darts are (as claimed by Google and as Dart is still in its infancy):

a. OOO (object-oriented), structured and flexible;

b. familiar syntax like C++;

c. High performance across all platforms

So what are "the fundamental flaws" referred by Google?

According to Miller, is that it cannot be tooled and has inherent performance problems, thus rendering it inadequate for complex browser-based apps. "The cyclone of innovation is increasingly moving off the Web onto iOS and other closed platforms," Miller wrote. "The Web development community has been backed into using large amounts of JavaScript largely to work around the deficiencies in the platform.... Even smaller-scale apps written by hobbyist developers have to navigate a confusing labyrinth of frameworks and incompatible design patterns."

Keep throwing Darts, Google!

Dart: a language for structured web programming

Comics Time: How to detect a geek

xxxd — Fri, 07 Oct 2011 16:34:00 GMT

It does work without them

Why Geek loves gadget?

All of the above is from The Tech Comics section in http://itmanagement.earthweb.com

Tech comics

Apple Logo redesigned / Quoting Steve Jobs

xxxd — Thu, 06 Oct 2011 16:20:00 GMT

Apple logo redesigned. By a Hong Kong student.

“Being the richest man in the cemetery doesn’t matter to me … Going to bed at night saying we’ve done something wonderful… that’s what matters to me.”

[The Wall Street Journal, May 25, 1993]

“I’ll always stay connected with Apple. I hope that throughout my life I’ll sort of have the thread of my life and the thread of Apple weave in and out of each other, like a tapestry. There may be a few years when I’m not there, but I’ll always come back."

[Playboy, Feb. 1, 1985]

“You can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something — your gut, destiny, life, karma, whatever. This approach has never let me down, and it has made all the difference in my life.”

[Stanford commencement speech, June 2005]

“Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know when you find it. And, like any great relationship, it just gets better and better as the years roll on. So keep looking until you find it. Don’t settle.”

[Stanford commencement speech, June 2005]

"That's been one of my mantras – focus and simplicity. Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it's worth it in the end because once you get there, you can move mountains." – Business Week , 1998.

"Picasso had a saying: 'Good artists copy, great artists steal.' We have always been shameless about stealing great ideas … I think part of what made the Macintosh great was that the people working on it were musicians, poets, artists, zoologists and historians who also happened to be the best computer scientists in the world." – quote from a 1994 interview shared by Huffington Post .

"Remembering that I'll be dead soon is the most important tool I've ever encountered to help me make the big choices in life. Because almost everything – all external expectations, all pride, all fear of embarrassment or failure – these things just fall away in the face of death, leaving only what is truly important.

Remembering that you are going to die is the best way I know to avoid the trap of thinking you have something to lose. You are already naked. There is no reason not to follow your heart." – Stanford University commencement address, 1995.

The Apple of Steve Jobs

xxxd — Thu, 06 Oct 2011 14:39:00 GMT

In China, this is what People said about Steve Jobs and his apple

There are three APPLEs that have changed the world.

In Genesis, Eve ate the apple that was evil but seductive, and so did Adam, after which they discovered sin, and God punished them for their disobedience. And the life of suffering as we know it starts.

Newton, from observing an apple fall from a tree, discovered the Universal Law of Gravitation.

Then there is the Apple of Steve jobs that changed the world of personal computers, then the definition of a phone, the mobile industry.

This will be the web in the future

xxxd — Wed, 05 Oct 2011 16:56:00 GMT

Embrace the future and the unpredicability of the future.

Brad Frost spoke about the need to think beyond the present web landscape and start to think and work towards a web for the future.

Too bad, I cannot embed the slideshow or video. But some of the gist and quotes:

Smart content - People's capacity for BULLSHIT is rapidly dimining.

Web is everything and everywhere. Think about context. Think about the other 70% of use cases of the web, watching TV, waiting in Line, #Pooping (my favorite).

Think mobile. Think about mobile apps.

Go global, start from mobile. Mobile site can grow into a full-featured, mobile-first, adaptive web site. Desktop-only site is not scalable.

Do you swear while coding?

xxxd — Mon, 03 Oct 2011 21:35:00 GMT

When you code, hit a blocker, a bug, a wall, what do you do? You pull your hair, hit your head, search frantically online, beg for help, lose your sleep, or refuse to sleep ... what else? Do you swear? Yes, I do. But definitely not so publically, profusely and in writting, as in Github commit comments

It takes some *** to swear like this.

The same developer also had some statistics about which languages make you swear more.

It is C++.

C++ takes top honors, but just barely. Ruby and JavaScript are neck and neck behind C++. After that it drops off considerably with C, Java and C# placing in the middle. Python and PHP developers are either very happy about using those languages, or perhaps just very mild-mannered developers. Of course just because they don’t swear in commits doesn’t mean they don’t swear. As one commenter on Vos’s post says, “I program in Python, but all my cussing is related to IE.”

See Also:

http://www.webmonkey.com/2011/02/cussing-in-commits-which-programming-language-inspires-the-most-swearing/

JavaScript Debugger for FireFox, Chrome and IE

xxxd — Fri, 30 Sep 2011 17:17:00 GMT

What do you use for javascript debugging, element / DOM inspecting, css validation and checking, monitor network activy, etc.?

For FireFox, we use Firebug as well as the Web Developer extension.

Firebug:

Very easy to use. If you are not using it or think otherwise, it got to be your fault.

Web Developer Toolbar:

Use this to read and delete cookies, clear caches, enable or disable form elements, whatever.

For Chrome, I just learned there was Chrome debugger (short cut key: CTRL+Shift+J).

For IE, use IE developer toolbar. It is not as easy to use as FireBug, however, sometimes when things go wrong in nowhere else bug IE, you will have to resort to this tool for some insights.

Firefox 7 and the speed war among browsers

xxxd — Fri, 30 Sep 2011 00:28:00 GMT

Was it just yesterday Mozilla released FireFox 7, was it just last month it released Firefox 6?

What is new in FireFox 7? Nothing you can see. But Firefox 7 is said to have reduced memory usage by 50 percent, which is great news if you have 16 tabs open all the time.Like me, whenever I checked my process memory usage, Firefox is always on top.

FireFox7 is said to have much sped up too.

Probably not that much, in this article, Browser Speed Tests: Firefox 7, Chrome 14, Internet Explorer 9, and More, guess who wins? Opera! Does anyone even use Opera? But Anyway, here are some simple and hard and cold facts:

Quote from the Article:

Obviously, there's a lot more to browser choice than speed—variety of extensions, customizability, and so on—but when it comes to performance, here's how our favorite browsers. We gave each contender a point value for its placing in each of the above tests, then tallied up the totals and divided them by the total number of points each could have received.

Opera 11.51: 82%
Firefox 7: 73%
Internet Explorer 9: 47.5%
Chrome 14: 43%

Funny (and insightful) quotes about programming

xxxd — Wed, 28 Sep 2011 16:07:00 GMT

You never finish a program, you just stop working on it. -Anonymous

If the code doesn't bother you, don't bother it. -Anonymous

There is only one thing more painful than learning from experience and that is not learning from experience. - Archibald McLeish

Measuring programming progress by lines of code is like measuring aircraft building progress by weight.- Bill Gates - From wikiquotes.org

Fast, good, cheap: pick any two. -Anonymous

Pasting code from the internet into production code is like chewing gum found in the street. - Mike Johnson

Hacking is like sex. You get in, you get out, and hope that you didn't leave something that can be traced back to you. -Anonymous

Sometimes it pays to stay in bed on Monday, rather than spending the rest of the week debugging Monday's code. - Christopher Thompson

Walking on water and developing software from a specification are easy if both are frozen. -Edward V. Berard

Dot Net Kick

JavaScript Test Frameworks? Which one?

xxxd — Tue, 27 Sep 2011 21:05:00 GMT

JavaScript had been notorious for debugging, until we got Firebug.

How about unit test javascript code? I have been struggling with Selenium Test, are there any other choices? Turned out there are many, turned out I have no idea which one to choose.

Is it jsUnity?

Lightweight Universal JavaScript Testing Framework

jsUnity is a lightweight universal JavaScript testing framework that is context-agnostic. It doesn't rely on any browser capabilities and therefore can be run inside HTML, ASP, WSH or any other context that uses JavaScript/JScript/ECMAScript.

Could it be Jasmine?

Jasmine is a behavior-driven development framework for testing your JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.

describe("Jasmine", function() { it("makes testing JavaScript awesome!", function() { expect(yourCode).toBeLotsBetter(); }); });

How about YUI 2?

YUI Test is a testing framework for browser-based JavaScript solutions. Using YUI Test, you can easily add unit testing to your JavaScript solutions. While not a direct port from any specific xUnit framework, YUI Test does derive some characteristics from nUnit and JUnit.

Or Js-Test-Driver by Google?

(Quote from http://stackoverflow.com/questions/300855/looking-for-a-better-javascript-unit-test-tool)

pros:

Supports all major browsers/operating systems
Run on multiple clients at once
Don't need to run server/clients on development computer (no need for IE)
Run tests from command line (jar) (can be integrated in ant/maven)
Eclipse plugin
IntelliJ plugin
Supports multiple JavaScript test frameworks

cons:

Doesn't show results for os or browser version. Only browser names. It does however print out the version in the test results.
No history of previous test results

TestSwarm

(Quote from http://stackoverflow.com/questions/300855/looking-for-a-better-javascript-unit-test-tool)

John Resig (jQuery) has created a tool for distributed JavaScript testing, TestSwarm. Mainly for open source JavaScript projects, but TestSwarm is open source, so you can set up a server yourself for corporate testing. Although this might require that you to do some modifications.

pros:

    Supports all major browsers/operating systems
    Run on multiple clients at once
    Don't need to run server/clients on development computer (no need for IE)
    Automatic run tests on all clients when you commit something (or whenever you modify the script to run the tests)
    Show history of test results pr commit
    Supports multiple JavaScript test frameworks
    Have test results for OS and browser versions
    Crowdsource to test in a multitude of browsers

cons:

    Can not break your build through ant/maven
    Don't notice the test fail before commit
    No IDEplug-in

Finally, here comes Qunit

A powerful approach to test driven development in Javasscript. It's used by the jQuery project to test its code and plugins but is capable of testing any generic JavaScript code (and even capable of testing JavaScript code on the server-side).

QUnit is especially useful for regression testing: Whenever a bug is reported, write a test that asserts the existence of that particular bug. Then fix it and commit both. Every time you work on the code again, run the tests. If the bug comes up again - a regression - you'll spot it immediately and know how to fix it, because you know what code you just changed.

Anyone out there can decide on a winner?

Is not Selenium Web Driver buggy?

xxxd — Mon, 26 Sep 2011 19:29:00 GMT

The past six months, I have been using Selenium for automated tests on browsers, mainly IE and Firefox. The tests are run daily with an automated build and the results have been unstable therefore frustrating. The problems are:

a) Tests with IE are buggy. Sometimes, WebDriver.getPageSource() seems to skip some of the page source.

b) For the same test on the same page, WebDriver.findElement returns different results from moment to moment.

c) It is especially so with an AJAX page, because it cannot detect whethere an ajax call is complete.

There have been valiant effort trying to solve the problem, such as

http://blog.activelylazy.co.uk/2010/05/05/testing-asynchronous-applications-with-webdriver/

However, since it still takes selenium driver to run inderterministically, it can still variably come back and produce an error message.

There have been so much outcries about "unstable seleniums", that Google test team produces the post "http://googletesting.blogspot.com/2009/06/my-selenium-tests-arent-stable.html" defending Selenium. But, yes, Selenium is buggy.

2011 Digital 100: The World's Most Valuable Startups

xxxd — Fri, 23 Sep 2011 21:09:00 GMT

From http://www.businessinsider.com/2011-digital-100#ixzz1YoQHemzw

The top 10:

1. Facebook

2. Zynga

3. Groupon

4. Twitter

5. Dropbox

6. Wikipedia

7. Vente-Privee

8. LivingSocial

9. Craigslist

10. Palantir Technologies

Bits and pieces of css3

xxxd — Fri, 23 Sep 2011 20:18:00 GMT

The past few days, i have fast-fed and spma-fed myself css3. I love it. Why not? It has many cool features that you just pull them out of your pocket like a shiny coin.

Before css3, to do round corners, you have to have a load of javascript files and css files to get it to work; Drop shadows? Your best hope would be drop a pre-made image; Border made with an image, do not think about it! Pretty text with some customized fonts? No way, unless again you drop some borrowed javascripts in you file; Pretty text with shadows, No way!

Now after css3 ... (Officially, we are not quite in the era of after css3 yet. css3 is yet to become a w3c standard and some browsers only support a subset of the new features, while older browsers (e.g., ie, 7 & 8) support none of them.)

Still why not jump in knowing you have the cool stuff and there are almost always remedies for anything. As a web developer, sooner or later you will probably have to learn anyway.

Bits and pieces of what I have learned:

1. Layout

How to realize multiple column layout? Before we either use table or multiple floating divs, now in css we can simply say:

.threecols         {             columns: 3;             moz-column-width: 200px;             -webkit-column-width: 200px;             -moz-column-gap: 20px;             -webkit-column-gap: 20px;             -moz-column-rule: 1px solid #ddccb5;             -webkit-column-rule: 1px solid #ddccb5;         }

2. Round-corners

To have round corners, we only need to the border-radius property. This is probably a common-sense now as round-corners has been talked about over and over. .roundcorner         {             border-radius: 5px;             -moz-border-radius: 5px;             -webkit-border-radius: 5px;             background-color: #fff;             border: 2px solid #897048;             padding: 10px;             width: 310px;         }

3. Text special effects
        .text_stroke         {             font-size: 30pt;             color: #c00; /* text color */             -webkit-text-stroke: 1px #000; /* stroke color and weight */         }

        .text_wrap         {             word-wrap: break-word;             width: 200px;         }

        .text_shadow         {             color: #897048;             background-color: #fff;             text-shadow: 2px 2px 2px #ddccb5;             font-size: 30pt;         }

        .text_overflow         {             color: #897048;             font-size: 30pt;             overflow: ellipsis;             white-space: nowrap;             width: 12em;         }

To be continued ...

He's dead, Jim!

xxxd — Thu, 22 Sep 2011 15:38:00 GMT

Yesterday happened upon the death of "Jim", the blue screen of death of Chrome.

That reminded me the new "cute" death screen of windows 8.

That made me check out the very unimaginative and un-cute death screen of firefox.

That then reminded me of the much dreaded, not cute-at-all mother screen of death of all, the blue screen of death of earlier windows.