Improve your hero by changing the code in your “hero.js” and “helpers.js” files.
Those two files are used to manage your hero, run at the same time as all the other players.
You signup via Github, fork their hero repo, and commit/push logic changes. The game simulator runs once a day.
stats.js is a nifty little performance monitor:
This class provides a simple info box that will help you monitor your code performance.
– FPS Frames rendered in the last second. The higher the number the better.
– MS Milliseconds needed to render a frame. The lower the number the better.
– MB MBytes of allocated memory. (Run Chrome with –enable-precise-memory-info)
The FPS monitor looks like this:
Framework7 “Full Featured HTML Framework For Building iOS Apps”.
I’m starting a collection of these :-)
App.js, another “UI library for creating mobile webapps that behave like native apps”.
… a gathering of various implementations of the classic game Breakout in numerous different engines.
With source code for each version of Breakout.
Two weeks ago I mentioned using async/defer in scripts at the bottom is not enough. Growing with the Web has a nice visualization of how async and defer attributes work. Peter Beverloo has another here.
Keep in mind defer is broken in IE <= 9.
If you’ve ever felt like PhantomJS was too verbose, you may want to try NightmareJS. It is a wrapper around PhantomJS that uses English language style commands:
.type('input[title="Search"]', 'github nightmare')
You may remember one of the original webperf rules was to put scripts at the bottom.
Patrick Meenan on how it is supposed to work ( emphasis mine ):
– The preload scanner scans the whole document as it comes in and issues fetch requests.
– The main parser sends a signal when it reaches the start of the body and sends fetch requests for any resources it discoveres that are not already queued.
– The layout engine increases the priority of in-viewport visibile images when it does layout.
– The resource loader treats all script and css as critical, regardless of where it is discovered (in the head or at the end of the body). see crbug.com/317785
– Resource loader loads in 2 phases. The first (critical phase) delays non-critical resources except for 1 image at a time. Once the main parser reaches the body tag it removes the constraint and fetches everything.
TL;DR: don’t use defer for external scripts that can depend on eachother if you need IE <= 9 support
Even after 20 years of development there are days where browser environments still feel like the wild west.