5 ms·

Checked the "No Tears HTML5 Game Development Tutorial" at http://docs.webplatform.org/wiki/tutorials/canvas_notearsgame http://docs.webplatform.org/wiki/tutoria

by Jare 14y ago

Checked the "No Tears HTML5 Game Development Tutorial" at http://docs.webplatform.org/wiki/tutorials/canvas_notearsgame http://docs.webplatform.org/wiki/tutorials/canvas_notearsgam... and: - "Because this is a No Tears guide, we'll use jQuery" - Use setInterval() rather than requestAnimationFrame(). - Questionable class-like implementation. Granted the original HTML5rocks! post is over a year and a half old, but bad code and bad practices are NOT helping the cause.

Cushman 14y ago
It's a wiki. Why not fix it?
- tedunangst 14y ago
  Unless the linked article is incorrect, only authorized employees are able to edit it. So like, it's an article, why not read it? [my bad, it looks like maybe anybody can edit it after registering.]
  - Cushman 14y ago
    I don't see how the red text "Web Platform Docs is an open wiki that anyone can help improve. See the getting started guide[0] to learn more." in the alert box at the top of the page could be more clear. [0]http://docs.webplatform.org/wiki/WPD:Getting_Started http://docs.webplatform.org/wiki/WPD:Getting_Started First sentence: "Anyone can contribute to WPD."
    - tedunangst 14y ago
      I only read the article (which implies only employees will be editing the wiki), then went to the wiki itself later.
- yuhong 14y ago
  Yep, the site says clearly that it is in alpha.
wwwtyro 14y ago
I am not being argumentative when I ask this, I just want more details about this bullet: > - Questionable class-like implementation. Can you just lay it all out right here? What is wrong (or suboptimal) with the implementation, what alternatives would you prefer, etc. Everything that is behind that bullet, I want to hear it!
- Jare 14y ago
  Instead of using prototypes and functions shared among all instances of the same type of object, it uses closures for each instance. The coding style is also questionable, with everything referencing a variable named 'I'. It works, but in my opinion it is absolutely not a correct way to write code. In any case, OOP and class-style programming in Javascript is a large topic.
  - doomslice 14y ago
    As you suggest, there are several schools of thought about how best to provide class-style programming. By using a closure instead of prototypes, you can have "true" private properties and functions. If you use prototype, you'll need to use a convention to mark something as private and hope the developers respect that (marking it with an underscore is common). In my experience, someone will ignore the convention and then something will break when you change or remove your "private" variable.
    - Jare 14y ago
      If the code was using those or other advantages of the pattern (like easier subclassing, methods already bound to the instance, etc) consistently, it would make sense. As it is, it just does ugly things like using 'I' and 'this' without any thought or pattern I can discern.
    - skybrian 14y ago
      Style is one thing, but if you use closures, you have to be a lot more careful about memory leaks.
  - 14y ago
jonursenbach 14y ago
What's wrong with using jQuery?
- leeoniya 14y ago
  jQuery, while hugely popular, is not a standard.
  - dmorgan 14y ago
    You might want to lookup the term "de-facto standard": http://en.wikipedia.org/wiki/De_facto_standard http://en.wikipedia.org/wiki/De_facto_standard
    - leeoniya 14y ago
      your condescending tone aside, jQuery's API and vendor support is subject to change, especially in the coming months. last i heard, 50% usage also means 50% non-usage. you are also assuming that the target is a web browser, which is what jQuery is meant for. jQuery has no bearing on firefox extension programming, nodejs programming, or upcoming win8 RT and Firefox OS programming.
      - dmorgan 14y ago
        >your condescending tone aside, jQuery's API and vendor support is subject to change, especially in the coming months. last i heard, 50% usage also means 50% non-usage. I'm afraid the points you make are not gonna help with my condescending tone. 50% usage? That's a HUGE success for a de-facto standard. There are even _official_ standards with much LESS use (SOAP comes to mind). So, the "50% non usage" part means absolutely nothing. >you are also assuming that the target is a web browser, which is what jQuery is meant for. jQuery has no bearing on firefox extension programming, nodejs programming, or upcoming win8 RT and Firefox OS programming Even if that was true, it would be irrelevant. Yes, a standard is only a standard is some SPECIFIC field. RS-232 is a standard, but has no bearing on, say, building construction. And those ANSI Screw size standards have no bearing at all in software: http://www.engineersedge.com/screw_threads_chart.htm http://www.engineersedge.com/screw_threads_chart.htm That doesn't make them any less standard. That said, your examples are also false. jQuery can and IS used in nodejs AND in firefox extension programming. And presummably Firefox OS programming. Some examples: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-scrape-web-pages-with-node-js-and-jquery/ http://net.tutsplus.com/tutorials/javascript-ajax/how-to-scr... http://stackoverflow.com/questions/491490/how-to-use-jquery-in-firefox-extension http://stackoverflow.com/questions/491490/how-to-use-jquery-...
rmrfrmrf 14y ago
I get your point, but you should remember that we all have learned things the "wrong" way for the sake of brevity before we moved on to learning the best way. Despite the flaws, I still think the tutorial is a great introduction to breaking down the steps of creating a game.
- Jare 14y ago
  Absolutely! I can look back at the set of tutorials that I myself wrote while I was learning JavaScript and HTML5, and there's a bunch of stuff that makes me blush now - including among other things using jQuery and this quote: "Learn jQuery and love it." For the sake of completeness (and cannon fodder for anyone who wants to criticize) it's here: http://www.iguanademos.com/Jare/docs/html5/Lessons/ http://www.iguanademos.com/Jare/docs/html5/Lessons/ My concern was perhaps due to expectations about the quality of the site's content, as people were talking about where it stood compared to w3schools and even MDN.
simonsarris 14y ago
Yeah this looks awful. No syntax highlighting either, which is odd because its basically automatic these days (rainbow.js or any of a million plugins). It's also surprising that they resorted to a screenshot instead of just putting the playable game on the page. I think the use of setInterval is fine because it keeps the code very short compared to the requestAnimationFrame shim, but there should definitely be mention of it. Hopefully I can add my tutorials to this site (which I think are much cleaner) when I'm finally done with my (blocking) larger projects.

by Jare 14y ago

Cushman 14y ago

It's a wiki. Why not fix it?

tedunangst 14y ago
Unless the linked article is incorrect, only authorized employees are able to edit it. So like, it's an article, why not read it? [my bad, it looks like maybe anybody can edit it after registering.]
- Cushman 14y ago
  I don't see how the red text "Web Platform Docs is an open wiki that anyone can help improve. See the getting started guide[0] to learn more." in the alert box at the top of the page could be more clear. [0]http://docs.webplatform.org/wiki/WPD:Getting_Started http://docs.webplatform.org/wiki/WPD:Getting_Started First sentence: "Anyone can contribute to WPD."
  - tedunangst 14y ago
    I only read the article (which implies only employees will be editing the wiki), then went to the wiki itself later.
yuhong 14y ago
Yep, the site says clearly that it is in alpha.

wwwtyro 14y ago

I am not being argumentative when I ask this, I just want more details about this bullet: > - Questionable class-like implementation. Can you just lay it all out right here? What is wrong (or suboptimal) with the implementation, what alternatives would you prefer, etc. Everything that is behind that bullet, I want to hear it!

Jare 14y ago
Instead of using prototypes and functions shared among all instances of the same type of object, it uses closures for each instance. The coding style is also questionable, with everything referencing a variable named 'I'. It works, but in my opinion it is absolutely not a correct way to write code. In any case, OOP and class-style programming in Javascript is a large topic.
- doomslice 14y ago
  As you suggest, there are several schools of thought about how best to provide class-style programming. By using a closure instead of prototypes, you can have "true" private properties and functions. If you use prototype, you'll need to use a convention to mark something as private and hope the developers respect that (marking it with an underscore is common). In my experience, someone will ignore the convention and then something will break when you change or remove your "private" variable.
  - Jare 14y ago
    If the code was using those or other advantages of the pattern (like easier subclassing, methods already bound to the instance, etc) consistently, it would make sense. As it is, it just does ugly things like using 'I' and 'this' without any thought or pattern I can discern.
  - skybrian 14y ago
    Style is one thing, but if you use closures, you have to be a lot more careful about memory leaks.
- 14y ago

jonursenbach 14y ago

What's wrong with using jQuery?

leeoniya 14y ago
jQuery, while hugely popular, is not a standard.
- dmorgan 14y ago
  You might want to lookup the term "de-facto standard": http://en.wikipedia.org/wiki/De_facto_standard http://en.wikipedia.org/wiki/De_facto_standard
  - leeoniya 14y ago
    your condescending tone aside, jQuery's API and vendor support is subject to change, especially in the coming months. last i heard, 50% usage also means 50% non-usage. you are also assuming that the target is a web browser, which is what jQuery is meant for. jQuery has no bearing on firefox extension programming, nodejs programming, or upcoming win8 RT and Firefox OS programming.
    - dmorgan 14y ago
      >your condescending tone aside, jQuery's API and vendor support is subject to change, especially in the coming months. last i heard, 50% usage also means 50% non-usage. I'm afraid the points you make are not gonna help with my condescending tone. 50% usage? That's a HUGE success for a de-facto standard. There are even _official_ standards with much LESS use (SOAP comes to mind). So, the "50% non usage" part means absolutely nothing. >you are also assuming that the target is a web browser, which is what jQuery is meant for. jQuery has no bearing on firefox extension programming, nodejs programming, or upcoming win8 RT and Firefox OS programming Even if that was true, it would be irrelevant. Yes, a standard is only a standard is some SPECIFIC field. RS-232 is a standard, but has no bearing on, say, building construction. And those ANSI Screw size standards have no bearing at all in software: http://www.engineersedge.com/screw_threads_chart.htm http://www.engineersedge.com/screw_threads_chart.htm That doesn't make them any less standard. That said, your examples are also false. jQuery can and IS used in nodejs AND in firefox extension programming. And presummably Firefox OS programming. Some examples: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-scrape-web-pages-with-node-js-and-jquery/ http://net.tutsplus.com/tutorials/javascript-ajax/how-to-scr... http://stackoverflow.com/questions/491490/how-to-use-jquery-in-firefox-extension http://stackoverflow.com/questions/491490/how-to-use-jquery-...

rmrfrmrf 14y ago

I get your point, but you should remember that we all have learned things the "wrong" way for the sake of brevity before we moved on to learning the best way. Despite the flaws, I still think the tutorial is a great introduction to breaking down the steps of creating a game.

Jare 14y ago
Absolutely! I can look back at the set of tutorials that I myself wrote while I was learning JavaScript and HTML5, and there's a bunch of stuff that makes me blush now - including among other things using jQuery and this quote: "Learn jQuery and love it." For the sake of completeness (and cannon fodder for anyone who wants to criticize) it's here: http://www.iguanademos.com/Jare/docs/html5/Lessons/ http://www.iguanademos.com/Jare/docs/html5/Lessons/ My concern was perhaps due to expectations about the quality of the site's content, as people were talking about where it stood compared to w3schools and even MDN.

simonsarris 14y ago

Yeah this looks awful. No syntax highlighting either, which is odd because its basically automatic these days (rainbow.js or any of a million plugins). It's also surprising that they resorted to a screenshot instead of just putting the playable game on the page. I think the use of setInterval is fine because it keeps the code very short compared to the requestAnimationFrame shim, but there should definitely be mention of it. Hopefully I can add my tutorials to this site (which I think are much cleaner) when I'm finally done with my (blocking) larger projects.