pomeh/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This is a feedback for the article at http://buildnewgames.com/sprite-animation/. It contains code review, bug fixes and sort of improvements.
First of all, the article concerned contains a lot of jsfiddle demonstration. I think it's really nice as we can see the code, see the result and make our change as we like. But it seems like the usage of jsfiddle may  be improved. Here is the trick: jsfiddle has 3 "fields" where we can type code (for HTML, CSS, and Javascript). So please stop writing every things like this http://jsfiddle.net/dariusk/wa8eV/light/, that's insane. What is easier to read between this http://jsfiddle.net/pomeh/tQE89/ and this http://jsfiddle.net/pomeh/tQE89/1/ ? If you pay attention to the source, I've modified the onload function to make it an anonymous one. Here is why and what happens, and here are some solutions, from worst to best.
Also, you should be aware that jsfiddle output all your HTML code inside the <body> tag, so you can't (and don't have to) type in your own <html>, <head> <body> and so on tags. It will only produce invalid HTML code: have a look to the source code of this page http://jsfiddle.net/dariusk/wa8eV/show/ (this is also visible in the file "view-source for dariusk-wa8eV-show.html" present in this gist). Notice the tag soup like </head><body><!doctype html><html>, it hurts !
The resize thing is not working. The onresize method does not exist, it's only resize. Check it out.
The image loading also contains errors. See what's wrong.

  
## view-source for dariusk-wa8eV-show.html
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by dariusk</title>

  <script type='text/javascript' src='/js/lib/mootools-core-1.4.5-nocompat.js'></script>

  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>

  </style>


<script type='text/javascript'>//<![CDATA[


//]]>

</script>


</head>
<body>
  <!doctype html>
<html>
  <script type='text/javascript'>
    var canvas = null;
    function onload() {
      canvas = document.getElementById('gameCanvas');
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = '#000000';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#333333';
      ctx.fillRect(canvas.width / 3, canvas.height / 3,
                   canvas.width / 3, canvas.height / 3);
    }
  </script>
<body onload='onload()' style='position: absolute; padding:0; margin:0; height: 100%; width:100%'>

<canvas id="gameCanvas"></canvas>

</body>
</html>

</body>


</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title> - jsFiddle demo by dariusk</title>

	<script type='text/javascript' src='/js/lib/mootools-core-1.4.5-nocompat.js'></script>

	<link rel="stylesheet" type="text/css" href="/css/normalize.css">
	<link rel="stylesheet" type="text/css" href="/css/result-light.css">

	<style type='text/css'>

	</style>



	<script type='text/javascript'>//<![CDATA[


	//]]>

	</script>


	</head>
	<body>
	<!doctype html>
	<html>
	<script type='text/javascript'>
	var canvas = null;
	function onload() {
	canvas = document.getElementById('gameCanvas');
	var ctx = canvas.getContext("2d");
	ctx.fillStyle = '#000000';
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	ctx.fillStyle = '#333333';
	ctx.fillRect(canvas.width / 3, canvas.height / 3,
	canvas.width / 3, canvas.height / 3);
	}
	</script>
	<body onload='onload()' style='position: absolute; padding:0; margin:0; height: 100%; width:100%'>

	<canvas id="gameCanvas"></canvas>

	</body>
	</html>

	</body>


	</html>