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/

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.

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.

1. Opera 11.51: 82%
2. Firefox 7: 73%
3. Internet Explorer 9: 47.5%
4. Chrome 14: 43%

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?

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.

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

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 ...

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.

In April 2011, Steve Jobs declared in an open letter Thoughts on Flash that Apple would no longer support flash, that "Flash was created during the PC era – for PCs and mice.", and it is not suited for mobile devices that is "about low power devices, touch interfaces and open web standards – all areas where Flash falls short." 

In Sept, Microsoft said it would dump plug-ins such as Adobe Flash from Internet Explorer 10 inWindows 8. 

And in the highly excitable little town of web and mobile development, the talk is all about html 5 and css3. The consensus is that whatever Flash can do, the joint force of html 5 and css 3 can do too, and better. The many new features in html 5, such as video, audio,  canvas, as well as the integration of SVG content are designed to make it easy to handle multiplemedia and graphics on the web without having to resort to proprietary plugins such as flash. 

The lightening-speed development of mobile devices, spear-headed by App, also quickly push Flash out of the way. 

Google, the king of the web of now, is also paving the way for HTML 5. Among all browsers, chorme offers the best support for HTML 5.  Chrome scores 341 out of possible 450 in the  html 5 standard test (Firefox 6.02 , 313; IE 9.0.8 came in a distant last with 141). In January, Google's YouTube has had its test run in html 5 only video service at http://www.youtube.com/html5. 

With the big players lead, a lot of newer and smaller web companies follow suit. A lot of them provide video services, such as SublimeVideo,  an HTML5 Video-Player-as-a-Service. Also Vimeo. Vimeo, like YouTube, is a popular site for sharing your videos that implemented HTML5 video playback early this year. Vimeo also uses an iFrame for HTML5 video embedding as it’s necessary for ads. For more, check out http://web.appstorm.net/roundups/media-roundups/10-great-html5-video-players/.

So there is some real shift away from flash. And what is wrong with Flash? Jobs' statements about Flash may have some truth. Also, it is said (http://optionkey.blogspot.com/2010/02/why-flash-will-die.html) that

Within the last year Flash has become the main vector for many malware attacks. Flash also has major issues with causing the CPU to max out, browsers crashing, and memory management. Flash is also not as good for SEO and can lower your ranking on search engines. 

Still, will flash die? Or maybe simply survive in a different form? Like suggested in this article How Adobe and Google are making sure Flash will never die, that to make near-ubiquitous plugins such as flash disappear into major browsers such as Chrome.

They'd be platform-independent; they'd be somewhat more secure; they'd potentially perform better; they'd update automatically. They'd still be plugins, from a software standpoint, but you, Joe Firefox, wouldn't be able to tell.

A lot is raving about the following: a very polished and interactive graphic representation of the timeline of the evolution of the web: mainly, the ever evolving and changing of web browsers and technologies that driven the web so far (http://evolutionofweb.appspot.com/).

I briefly searched the web, there are a quite some computer scientists, web designers and developers that were looking back the origin and evolution while predicting the future of the web.

There are articles tracing the evolution of web design.

http://blog.kissmetrics.com/evolution-of-web-design/

http://sixrevisions.com/web_design/the-evolution-of-web-design/

There are articles tracing the evolution or demise or rebirth of the major web entities, Apple, Microsoft, Amazon, CNN, etc. It missed the even bigger presence at the present: google, facebook, twitter, etc. Still, very informative.

 http://www.wakeuplater.com/website-building/evolution-of-websites-10-popular-websites.aspx

There are videos, articles looking into the future.

It is easy now to laugh the wrongs about these predications made in the past.

It is more amazeing how much they seemed to have got a lot right).

http://www.slideshare.net/mstrickland/the-evolution-of-web-30

http://youtu.be/bsNcjya56v8 (Damn, you tube video does not work here)

<iframe width="420" height="315" src="http://www.youtube.com/embed/bsNcjya56v8" frameborder="0" allowfullscreen></iframe>

Why should we use shorthand in css, or in anything at all? In short, it makes a file smaller therefore faster to load and more efficient.

My cheat-cheat sheet of some of the common short-hand are:

1. Shorthand hex colors.

RGB colors that are usually specified in 6 characters, such as #ffcc00, can be abbreviated as #fc0.  That is, for the 3 pairs of the color code in a hex color specification, if each pair has two identical color characters, we can use only one character for the pair. Therefore the color white #fffff can be shortedn as #fff.


2. border css style

borders can come in a all sorts of flavors that are results of different combinations of the three elements: width, style and color, and a shortened border style can be specified in the order the three elements too, so you often see border styles are written as the following:

.thinborder {1px solid #000}


3. background

css style for backgrounds can be verbose too and you can specify a background by its color (background-color), image (background-image), whether to repeat (background-repeat), background-position. We can specify all of the elements in one line:

.background {#fff url(bg.png) no-repeat center}


4. font

font can be tweaked in a million of ways too, including style, variant, weight, sise, inline-height, font family.

A short-handed font style can be like this:

.font {bold italic small-caps 10pt aria}


A cheat sheet below (found at http://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/)

5. List style

Often, to start with a clean slate, use the following:

list-style: none

list-style:none

List has 3 css attributes: type, position, image.

The default style for list is:

list-style:disc outside none

A short-handed list style specification is like this:

list-style: disc inside url (.../img.gif)

References:

http://www.qianduan.net/css-font-shorthand-attribute-handbook.html

The following is alternately translated from Chinese (http://tech.it168.com/a2011/0822/1235/000001235946.shtml) or copied and pasted some from the websites of the mentioned mobile web frameworks. 

Now that touch screens are replacing mice, mobile tablets are taking shots at traditional desktops, mobile web development become a high evolving arena.

The main characteristics of mobile web technologies:

• Touch screen event handling and UI selements.

• Cross-platform: for example iOS and Android.
  

• Lightweight.

• Heavy reliance on HTML5 and CSS3.

The following are the major mobile web technologies:

1. jQuery Mobile.

jQuery Mobile is currently the most popular mobile framework., it can help you quickly develop cross-platform, cross-browser apps.

2. Titanium Mobile

Appcelerator Titanium is a platform for developing mobile, tablet and desktop applications using web technologies.Titanium has an active developer community. Appcelerator Titanium is one of several phone web based application framework solutions allowing web developers to apply existing skills to create native applications for iPhone, BlackBerry and Android.

Titanium uses standards-based web technologies: HTML, CSS and Javascript, JQuery, AJAX Frameworks. It provides UI elements designed for iOS and Android, such as Table views, tabs, switches. It supports the interaction between cameras and file systems.

3. The-M-Project

The-M-Project takes advantage of HTML 5 and MVC.

It supports offline processing, so users can continue to work while data will be sync-ed when they are back on line.

4. JO.

Jo is called the simple app faramework for HTML5. it was made mainly for mobile apps, not websites.

5. xui.js

xui.js is a "A super micro tiny DOM library for authoring HTML5 mobile web applications."

6. EmbedJs

"EmbedJS is a JavaScript framework for embedded devices (mobile phones, TVs, etc.). It takes a different approach than other frameworks by shipping just the code needed for each device. That means, there's less code going over the wire, less code branching at runtime and less memory usage."

EmbedJs is based on Dojo Toolkit.

7 Senja Touch

Senja Touch is built specifically to leverage HTML5, CSS3. and Javascript for web apps.

2010 is a busy year for Web developers. On the UI side, HTML 5 was all raging fire, css3 became mature, Rails introduced 3.0, etc.

What is there for 2011?

1. Juery Mobile

JQuery now has become so widely used that when most people say JavaScript, they are talking about JQuery. With the rise and ever more popular use of tablet platforms such as IPad, Android tablet and mobile platforms such as iphone, android phones, jQuery mobile will become the first choice for the app development for those platforms.

2. Hardware-accelerrated web browsers

Web browswers of the newest generation, such as IE9, has used a variety of hardware-accelerrated technologies such as DirectX 10, therefore has greatly increased the speed and bandwidth of browers.

3. Node.js and other JavaScript libaries

Node.js has been called by many the javascript V8 engine. ode.js is a server-side JavaScript environment that uses an asynchronous event-driven model. This allows Node.js to get excellent performance based on the architectures of many Internet applications.

https://github.com/joyent/node/wiki

4. Real-time Clickstream Sharing

Click-Sharing Is Next Step in Social Media Sharing, predicated some forerunners in social media sites. As you surf through news stories, video clips and shopping sites, click-sharing services, which plug directly into your Web browser, allow you to share your "clickstream" with friends (or everyone, if you so choose), giving them the chance to check out the latest links to catch your eye. They also give you real-time access to your friends' online activity, letting you spot their favorite haunts and surprising finds. As people spend more and more time on social networking online, the service is catching on.

5. NoSQL Databases

he relational database model has prevailed for decades, but a new type of database — known as NoSQL — is gaining attention in the enterprise. Read the 10 things about NoSQL.

http://www.techrepublic.com/blog/10things/10-things-you-should-know-about-nosql-databases/1772

One of the string method in MS Ajax library is String.format. It works well in a statement like this:

alert(String.format("Format me now, first is {0}, second is {1}, third is {2}", "first", "second", "third"));

However, if you want to put the last three parameters in an array as such:

var values = new array();

values[0] = "first";

values[1] = "second";

values[2] = "third";

Then you run the statement again:

alert(String.format("Format me now, first is {0}, second is {1}, third is {2}", values));

You will found the alerted string is "Format me now, first is first, second, third, second is , third is "

Totally not what it should be.

So instead, we have to go back the old-timer javascript and do a replacement as such 

if (values.length > 0) {
                    url = "Format me now, first is {0}, second is {1}, third is {2}", 
                    for (var i = 0; i < values.length; i++) {
                        var exp = new RegExp('\\{' + (i) + '\\}', 'gm');
                        url = url.replace(exp, values);
                    }

Guess we all make mistakes.

var values = new array();

values[0] = "first";

values[1] = "second";

values[2] = "third";