Using Grunt to Extract Server-Side Includes From Generated Pages

At the company I work at, I’ve introduced my team of developers to the wonderful workflow of Yeoman (http://yeoman.io/) with Grunt and Bower.

Since we’re a creative services agency our deliverable varies from client-to-client and project-to-project. In some engagements, our deliverables only include client-side HTML, CSS and JS. To speed up development we often use PHP to facilitate the generation of pages, but then deliver the resulting HTML output.

Read more

JavaScript Immediately Run Functions

Immediately run functions (IRF) provide a mechanism in JavaScript to encapsulate an environment and protect it from external tinkering. One obvious benefit is that you’re able to create private variables and functions by controlling the environment your code runs in.

Baseline example

Here is a simple example which declares the variable answer and assigns it the value 42. Then, the example alerts a dynamic statement made from the String "The answer is " and the current value of answer. Go ahead and run this example now to see the alert.

<script type="text/javascript">
var answer = 42;
function ex0() {
  alert("The answer is " + answer);
}
</script>

Run Example

Now let’s try and mutate the value of answer. We’ll use the Firebug plugin for Firefox here, but this will also work using similar tools for Safari, Chrome and Internet Explorer.

Open Firebug now and click on the “DOM” tab as highlighted in the image below. Next, scroll though the list looking for the variable answer. Finally, scan over to the second column and edit the value by double-clicking it and changing it to something else. After you’ve completed those steps try running this example again to see the alert message display a different statement than before.

See how to protect this variable after the break

BrowserQuest massively multiplayer RPG written in HTML5 with Node.js

BrowserQuest is a classic style video game written in HTML5 and Javascript by LittleWorkshop and Mozilla.

The game makes use of HTML5′s Web Workers to enable fast two-way communication between the browser and the server which is essential for a massively multiplayer game. This is achieved with HTML5 in the browser and Node.js server using the websocket-server module. HTML5′s localStorage is used to store your character’s progress. The various graphics layers (background, characters, gui) are rendered to individual HTML5 canvases from a 2D engine.

Video and links after the break

 Scroll to top