High Performance HTML5 Slides

Get Start with CoffeeScript

What is CoffeeScript?
For starter, it is a language that compiles to JavaScript prior to execution, so there’s no compilation at runtime. And let's quote from their website:-

The golden rule of CoffeeScript is: "It's just JavaScript". The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library seamlessly (and vice-versa). The compiled output is readable and pretty-printed, passes through JavaScript Lint without warnings, will work in every JavaScript implementation, and tends to run as fast or faster than the equivalent handwritten JavaScript.

For example

square = (x) -> x * x
cube   = (x) -> square(x) * x

will translate to

var cube, square;
square = function(x) {
  return x * x;
};
cube = function(x) {
  return square(x) * x;
};

There are some useful links you can take a look in order to understand or get familiar with it, if you will.

http://net.tutsplus.com/tutorials/javascript-ajax/rocking-out-with-coffeescript/

http://dailyjs.com/2011/05/30/code-review-coffeescript/

http://jashkenas.github.com/coffee-script/

High Performance CSS

Recently I looked at some people's code, and found out this css rule.

table.captain tbody tr td input[type="text"] { ... }

Do you see anything wrong here??  Well, not wrong, it is still valid and running fine. But in terms of efficiency, this one could not be very good. Why??  Please first read the following and try to understand how browser engine parse your css.

The browser render your css from left to right, and when it hit each "parent", it will asked a question "Does it match or not match?".  So the longer your rule is, the less efficient it will be.

Let me translate how the browser filter or render your css above.

1) input[type="text"] | Is there anything matched?  Yes, go to next step

2) Is the above element contained in a "td"? Yes, go to next step

3) Is the above element contained in a "tr"? Yes, go to the next step

... blah ...

And if you plan to write efficient (or high performance) css, you should first ask yourself a question:  Do I need all those category or selectors?  Can I simplify it and still get the results?  In other words, are the rules all necessary?


How about if I rewrote the above rules like the following?

table.captain td input[type="text"] { ... }

or even this one

.captain td input[type="text"] { ... }

Any of these rules will be much faster than the first one.

Note: 
There is a good blog entry about Efficient use of css - http://css-tricks.com/6386-efficiently-rendering-css/

HTML5 - Correct way to use section element

I found this link recently, it's a pretty good article talks about the correct way to use section element.  Since there are so many developers have mistaken the usage of this element, and I think it worth a blog entry on that :)

http://html5doctor.com/the-section-element/

In a nutshell, here is the basic rule of thumbs

• Don’t use it just as hook for styling or scripting; that’s a div
• Don’t use it if article, aside or nav is more appropriate
• Don’t use it unless there is naturally a heading at the start of the section

For more HTML5 resources

HTML5 Glossary

http://html5doctor.com/element-index/

HTML5 - edition for web developers

http://developers.whatwg.org/

Can I use

http://caniuse.com/

HTML5 Test
http://beta.html5test.com/

How to order you head section

http://blogs.msdn.com/b/ieinternals/archive/2011/07/18/optimal-html-head-ordering-to-avoid-parser-restarts-redownloads-and-improve-performance.aspx

Html5 headings and  accessibility 

http://www.brucelawson.co.uk/2009/headings-in-html-5-and-accessibility/

Efficiently Rendering CSS

http://css-tricks.com/6386-efficiently-rendering-css/

Dive Into HTML5

http://diveintohtml5.org/

HTML5 Rocks

http://slides.html5rocks.com/#landing-slide

Latest in HTML5

http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#1

The Expressive Web

http://beta.theexpressiveweb.com/

HTML5 WoW

http://www.htmlfivewow.com

Frontend Developer
http://www.front-end-developer.com/

Juude Blog about HTML5
http://juude.info/html5-layout.php

Best CSS3 Resources
http://www.linkedin.com/news?viewArticle=&articleID=784509223&gid=2071438&type=member&item=71538466&articleURL=http%3A%2F%2Fstylishwebdesigner%2Ecom%2F150-excellent-css3-tutorials-to-make-you-a-stylish-web-designer%2F&urlhash=U0xc&goback=%2Egde_2071438_member_71538466

10 Tools to simplify HTML5
http://www.catswhocode.com/blog/10-online-tools-to-simplify-html5-coding

The A to Z of Trending Web Development Technologies

WRITTEN BY AHMAD PERMESSUR.

This doesn’t mean you need to learn and use all possible web technologies and techniques listed in here. Mixing everything together eventually leaves holes big enough to drive a truck through. Instead, it’s common wisdom to use a technology only when it solves an issue.

If you’re curious about new web development technologies and techniques to use for your projects, then grab a cup of coffee and enjoy our A to Z of Trending Web Development Technologies & Tools.

A - Azure

Azure is Microsoft’s cloud services operating system that provides developers with on-demand compute and storage to host, scale and manage web application through Microsoft’s datacenters. The Windows Azure platform supports multiple languages including ASP.NET, Java, PHP and Ruby along with standards and protocols like SOAP, REST and XML. Other than its scalable hosting environment, Windows Azure also provides durable storage in the cloud and a content delivery network (CND).

B - BBC’s Glow JavaScript Library

BBC’s Glow JavaScript library allows developers to easily manipulate web pages, create animations and add sophisticated widgets to their web pages. It simplifies DOM manipulation and event handling by abstracting common tasks, hiding cross-browser issues, and providing a set of user interface widgets.

C - Closure

Closure is a set of tools developed by Google that help developers build rich web application with JavaScript that is both powerful and efficient. The Closure Compiler for instance, compiles JavaScript into a compact (minified version) and high-performance code. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls. These checks and optimizations help you write apps that are less buggy and easier to maintain.

D – Dragonfly

Dragonfly is a built-in debugging environment for the Opera browser. You can debug JavaScript, inspect or edit CSS / DOM elements on-the-fly and view errors on either your mobile or computer. It also supports monitoring for network activity. If you are a developer, or a designer, Opera Dragonfly has the tools to keep you covered. It is comparable to Firefox’s Firebug or Safari’s Web Inspector.

E - Erland

Erland is a programming language that was initially developed to create massive real-time telecom applications. However, it is slowly paving its away to power more web services. Facebook, for example, uses Erland to drive its chat system. There are several Erland frameworks aimed at developing web applications that are worth checking: ErlyWeb, Erland Web and the Nitrogen Project. http://sergioveiga.com/index.php/2009/12/02/erlang-on-nitro-erlang-web-development-tutorial-part-13/

F - Flash Catalyst

Flash Catalyst is interaction design software that allows designers to create user interface for Rich Internet Applications (RIA) easily without requiring extensive programming knowledge. Flash Catalyst supports import of graphics from graphic software and once the interface is created, it can be exported to Flash Builder. It is a pretty decent tool that aids in architecture applications prior to development.

G - Git

Git is a free, open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git clones are full-fledge repositories with complete history and revision tracking capabilities. With Git, branching and merging repositories is fast and easy to do.

H - HipHop

HipHop is a runtime compiler for PHP that transforms your PHP source code into highly optimized C++ to improve performance of server’s CPU usage. It was created by Facebook to save resources on its server and while it can substantially increase the speed of PHP applications, it is going to be only beneficial if you have a large-scale application.

I - ICEfaces

ICEfaces is an open source Ajax framework that enables Java EE application developers to create and deploy server-based rich Internet application using the Java language.

J - Jsoup

Jsoup is a Java library for working with real-world HTML. It provides a very convenient API for extracting and manipulating data, using the best of DOM, CSS, and jquery-like methods. You can for example use it to scrape data from a URL and find and extract data using DOM traversal and CSS selectors.

K - Kodigen

Kodingen is a cloud development environment combining an online code editor, cloud hosting along with both web-based access to file-system and FTP. It is free and provides developers with a feature-rich collaboration and social coding tools along with integration with a wide variety of existing frameworks and third party APIs. Kodingen also offers one-click installs for popular open source scripts like Drupal, Joomla and WordPress – great for testing something in a safe sanbox.

L - LightSwitch

LightSwitch is a new development tool in the Microsoft Visual Studio family that allows developers to build business applications for the cloud and desktop. By using pre-build templates and tools, you can quick create applicatison for Windows Client or Windows Azure without focusing much on writing code. LightSwitch creates Silverlight applications that can run in the browser, out-of-the-browser, or in the cloud.

M - MongoDB

MongoDB is a scalable, high-performance, open source, documented-oriented database. It is a NoSQL database whereby which data is not stored in fixed table schemas, but rather as collections of JSON-like documents. Many applications can thus model data in a more natural way, as data can be nested in complex hierarchies while being still query-able and indexable.

N - Node.js

Node.js is a server-side JavaScript environment based on Google’s V8 JavaScript engine. Unlike web server which establishes thread-based connections, Node.js is event-driven which helps execute a lot of requests concurrently very quickly without using much server resources.

O - OAuth

OAuth is basically an open protocol that allows secure API authorization in a simple and standard method from desktop, web and mobile applications. This technical definition may bamboozle many of you, but in a nutshell it is an authorization method that allows you to share your private information like photos, videos, contact list stored on one site with another site without having to disclose your username and password.

P - Plupload

Plupload is an upload handler that allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads. It has a powerful API that will allow you to further customize it.

Q - Qooxdoo

qooxdoo is a universal JavaScript framework that enables you to create applications for a wide range of platforms. With its object-oriented programming model you build rich, interactive applications (RIAs), native-like apps for mobile devices, lightweight traditional web applications or even applications to run outside the browser.

R – Redis

Redis is an open source, advanced key-value store, often referred to as a data structure server. Similar to MongoDB featured above, Redis is a NoSQL database with great performance and scalability. It can read and write really fast opening huge possibilities of new features for resource-constrained web applications.

S - SimpleGeo

SimpleGeo is a web service that allows developers to easily add location-aware features to their applications. They offer three geo services for developers: storage, context and places. All are priced depending on the number of API calls you make, but they have some free plans based on limits as well.

T - Titanium

Titanium is a free and open source framework for building native desktop and mobile applications using open web technologies (JavaScript, HTML and CSS). It also has support for PHP, Python and Ruby. You can create great applications for desktop and mobile without learning a new programming language. Through its SDKs, this tool does all the hard work under the hood and even provides interfaces to access native desktop and mobile APIs.

U - Umbraco

Umbraco is an open source ASP.NET content management system with the flexibility to run anything from small campaign to brochure sites right through to complex applications. It is easy to learn and use, making it perfect for web designers and developers alike. Unlike traditional CMS solutions, Umbraco has a powerful API and integrates well with .NET controls.

V - Varnish Cache

Varnish Cache is an open source, state of the art web application accelerator. You install it on your web server to cache your content that will eventually reduce your website’s load time. It does so by storing web pages in memory so web servers don’t have to create the same web page over and over again.

W - WebP

WebP is an open source image format created by Google. This new image format is aimed at further compressing lossy images to make them load faster all the while preserving quality and resolution. Google believes that images not compressed properly can significantly slow down a user’s web experience, especially on mobile devices.

Y - Yahoo! Query Language

Yahoo! Query Language, most commonly known as YQL, is a web service platform that provides an easy way to query and manipulate data across several API providers. It borrows its syntax from SQL and through a set of predefined data storage and mapping, it eliminates the need for you to learn how to call different APIs, thus making it easier to build and run applications with fewer line of codes. With YQL, you can for example easily pull list of images for a FlickR account, geo-locate businesses based on your user’s IP address or return weather results for a particular location.

Z - ZK

ZK is a highly productive open source Java framework for building amazing enterprise web and mobile applications with no JavaScript and little programming. ZK supports all major patterns of development such as MVC, data-binding, templating, among others.

Web Security Resources

http://code.google.com/edu/security/index.html

https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)

... more is coming

Try Catch Error Smartly

I assume you are not strange to "try, catch, error" in javascript (or in other programming langauge).  As you know, this "try, catch" thing is trying to maintain the quality of the code, to clean things up ... etc.  But it also could be the source of your error ( a programming bug by itself as well ).

Let's take a look at the following example  ( it's just arbitrary example ):

for(;;) {
  try {
     alert(parseInputNumber() + 1);
     break;
  } catch (e) {
     alert("something wrong in your code");
  }
}

Do you see a problem here, or potentially a problem?  What if the "parseInputNumber()"  throws the error?  And yes, if "parseInputNumber()" throws error, it will be catch and then go to the loop again, and it could never reach the "break" statement.  The programmer assumed the "parseInputNumber()" is always passed, and hope that it will break out of the for loop afterwards.

One way to solve this issue is to introduce an error type in the "parseInputNumber()" function, and if inside that function has error, it will throws that error type.  And we will need to rewrite our try catch block like the following:-

for(;;) {

  try {

     alert(parseInputNumber() + 1);

     break;

  } catch (e) {

     if(e != myCustomInvalidType) throw e;

     alert("something wrong in your code");

  }

}

In this way, you've just created an unhandled exceptions (if myCustomInvalidType is thrown), and it will make all the way throw to the bottom of the stack if you do not catch it. 

The above is just a simple and arbitrary example, but it states that your try catch block could be your problem if you use it carelessly.

Below are some extra notes (about try catch thing) for people who are new in javascript:-
- In javascript, you can clean up the resources (similar to how java did it) using finally.

try {
  // do some stuff
} finally {
  // last chance to clean the stuff
}

- You can throw custom error type by doing so:-

var myCustomErrorType = new Error("You have a custom error whatever");
throw myCustomErrorType;

Hopefully it covers the basic of the try catch thing in javascript, let me know if I'm missing some other important information :)

Scaling with MongoDB Slides

[Quote] Essential JavaScript Design Patterns For Beginners - By Addy Osmani

One of my coworkers posted this link lately of a pretty good introductory articles for javascript design pattern.  If you want to know more about design pattern, especially in javascript, then it is one of the links that you should take a look.  Enjoy!

http://addyosmani.com/resources/essentialjsdesignpatterns/book/