Yujian Yao

Software Engineer

Some Handy Web Development Tricks

25March2012

Canvas Experiments Gomoku In HTML5

In this post, I would like to share some small but useful tricks I found in web development.

Set up a simple server locally.

For front-end web developers, setting up a PHP and mess around with all the web configurations is just inconvenient. But certain features, like XHttpRequest and web workers, are just not supported by some browsers when the page is accessed locally. Luckily Python has a really interesting utility:
```
python -m SimpleHTTPServer 8000
```
Run this in the directory of the web page, and you can access it on 127.0.0.1:8000!
Speed up animations

This is just a trick to force the browser to enable GPU acceleration on the element - the effect of it is especially significant on mobile browsers like mobile safari:
```
.animate{
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
```
Force IE to render your page with a better engine

Sometimes even using the html5 doctype is not enough for our quirky IE. So it's a good idea to have this meta tag in the html header:
```
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
```
This will force IE to render the page with the lastest engine available. What's more, it will enable chrome frame if it's installed.
Make your ::active work on mobile browsers

Add a ontouchstart event to the body tag, as shown below:
```
<body ontouchstart="">
	stuff here
</body>
```