• Author: Alex MacCaw
• publisher: O’Reilly Media
• pages: 280

Introduction

A book to create javascript applications for the intermediate javascript developer. This book gives you a kickstart, helps you choose the right framework, and architectural choices for your application

Review

The book has a fast pace, no thoroughly introduction of MVC, I think this is justified. MVC has been explained a lot of times the last decade. The author of this book explains a lot of modern frameworks en modern technologies

This book is not for the novice javscript developers even the intermediate developers can have a hard task grasping the contents of this book. You need to understand the core of javascript and jQuery as well as design patterns, at least a couple of them to get the most out of this book.

Personally for me the topic of this book is a bit overkill for the web applications I develop. Hence if the scale of my webapps grows more complex I will definitely turn to this book. It will explain a lot of usefull state of the art Javascript MVC frameworks.

After explaining several ways of working with events in javascript application the author starts digging into MVC. First a chapter on Models and ORM (Object-relational mapping) and how to populate your model with external data. Offline as well as online storage of the model is also described in this chapter. The next chapter is about the controller, the best ways of event delegation and accessing the views. And finally the views itself, with modern js templating techniques. After the MVC foundation Spine.js and Backbone.js are introduced and explained. Two of the most known patterns for small ( spine.js ) to large ( Backbone.js ) web applications.

I also liked to addional information on modern topics like LESS ans CSS 3 and NodeJS. For me this was pure complementary information, and I had rather seen some more introduction in the beginning.

Bottom line

JavaScript Web Application is a must have book to plan and develop larger applications. It tells you everything you need to know to structure a application, but I think it would hjelp to read other book before this book to get the most out of it, for example Javascript Patterns. The books product page

1. The windows node server, nodejs.exe download at http://nodejs.org
2. A hello world node script ( example.js )
3. A command promt, set at the same locations as the script en node server
4. And of course a browser

Hello World script

Save the script below as example.js in the same directory as the downloaded node.exe file.

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end('<h1>Hello Nodejs</h1>');
}).listen(1337, "127.0.0.1");
console.log('Server running at http://127.0.0.1:1337/');

Start your first node script

Now all you need to do are the following steps.

1. Start node.exe
2. execute the script with the command prompt: node example.js
3. browse to the node server wich is running at: http://127.0.0.1:1337/

Your screen should be comparable to the screenshot below

I hope this was as easy for you as it was for me. For now I hope to wire some more intersting blog posts about Node on Windows, for example Node on IIS, but in the next post I will explore node.js a bit deeper

• Author: Raffaele Cecco
• publisher: O’Reilly Media
• pages: 280

Introduction

A pleasant book written by an author with lots of experience. The examples are fun, and realistic. The tempo of the book is easy to follow for intermediate JavaScript developers.

Review

I like that the book begins with a DHTML example, this makes the reader really understand the fact that building the web is possible with many tools and that each tool has its cons and pros. The newest toys ( canvas, webgl etc ) aren’t necessarily the best or the fastest to build a proper user experience. In the beginning of the book the reader get acquainted with; the browser landscape, sprites, framerates and best practices for working with the DOM which is a pain for performance. The code examples are clear and luckily without excessive comments, which makes the example easy to read for the more experienced developers which are books target group.

The next chapters concern page enhancing techniques like scrolling effects, ui-libraries and shows the best way to create user interface elements form scratch. Al these chapters are a fine introduction for the more performance hungry subjects of games.

The second part of the book dicusses games, staring with a DHTML version of space invaders. This game example incorporates a lot previeous learned techniques en demonstrates the power and performance of well used DHTML.

Of course the power of the newer toys are easy to see with the examples in the book for example the ( recursive ) tree example is a brilliant example of the performance of the canvas element. The bigger part of this book emphasizes on the canvas element. The book clearly demonstrates the posibillities and raw power of the element.

The following chapters cover mobile javascript graphics, phonegap and the Google Charts API.
At first the mix of topics seemed strange to me, however the chapter were really fun to read and I will definitilly use Google Charts in upcoming projects if needed. jQuery Mobile is equally interesting, though personally I would probably take a more responsive way in the future with embedding the touch events into a global library for websites.

Bottom line

this book definitely is a fun read supported by excellent examples for medior to advanced javascript developers who develop applications at his moment, the author makes use of contemporary, but proven libraries and API’s . Which is a plus these days with swift innovation cycles.

The books product page

• Author: Steve Fulton, Jeff Fulton
• publisher: O’Reilly Media
• pages: 652

Summary

Finally one extensive book over the Canvas element. This should attract the more creative ( Javascript ) programmers. I find it hard to describe the entry level of this book, however I get the feeling that novice to medior (JavaScript) developers should get along with the book.

Review

I like the introduction of the all the canvas properties, the authors filled the book with easy to follow comprehensive examples. The examples let the reader experiment with the features of Canvas. Most of the examples have some minor cross-browser issues since the canvas element is not stable yet, but the book describes these issues open and sincere which I liked. After the reader gets acquainted with the canvas element the books start with game programming and animation mathematics. The animations and math reminds me of former actionscript book, but still I learned a lot from these chapters. Flash cannot be compared one-on-one with canvas regarding; performance, animation, collision detection and resource management.

After the game sections the book briefly touches mobile applications with phoneGap and 3d with webGL. I liked these sections but I am not sure if these sections are relevant for this book.

But still the canvas is an amazing element and this books opens up a new world in html, for example chapter 5 shows some impressive examples of how easy it is to combine video with canvas; transformations, bitmap filtering its all possible. It is exiting to see that every new browser generation will be faster and will open new possibilities.

It would be nice to see some additional information in the next edition regarding business applications, for example how to overcome sandbox issues when uploading images to canvas.

Conclusion

But overall I can recommend this book to every developer who wants to be creative with the web. This book provides a solid path for developing Canvas games/ applications with a solid performance. The books product page

For a larger project of mine i needed to find a way to rotate cavas elements on mousedrag. So here’s my attempt to create this user interface functionality.

Source and example

Watch the demo

Seperate steps

First I divided the script into logical steps to simplify the problem.

1. create a update function for the canvas.
2. setup the mousehandlers to register the “drag” event
3. create a helper function to calculate the angle between 2 coordinates

The key for this functionality is that the starting angle of the drag always differs. This causes the canvas drawing to jump to unwanted angles if the script does not compensate for this.

$( model.cnv ).mousedown(function(event){
    // calculate click angle minus the last angle
    var clickAngle = getAngle(cX + offX, cY + offY, event.clientX, event.clientY )
       - model.angle;
    $( model.cnv ).bind("mousemove", clickAngle, function(event){
      // calculate move angle minus the angle onclick
      model.angle =  ( getAngle( cX + offX, cY + offY, event.clientX, event.clientY  )
       - clickAngle);
      updateRectangle(model.angle);
    });
});

I have not tested the script with other shapes than rectangles and squares, but the script should work fine as long as the canvas elements have ‘bounding box’ with a width and height. Of course this example is a starting point and the interface could use some custom cursors or icons.

• Author: David Flanagan
• publisher: O’Reilly Media
• pages: 1100

Summary

Novice to advanced this book will open the web as your playground, a full course on JavaScript including the new features and API’s of HTML5. It will be hard to find any topic about JavaScript which not discussed in this book.

Review

First a short introduction about me as the reviewer of this extensive Javascript book. I have worked with JavaScript for about 6 years, the last 2 years I dived more deeply into JavaScript, the main reason for this is freedom. I was mentally unrestricted in Flash and Actionscript 3, and I needed to free my mind for javascript as well.

Before this book I have read two other O’Reilly JavaScript publications; JavaScript the good parts and Javascript Patterns. Both excellent books to get a firm grasp of : structure, development and best practices of JavaScript.

For me the timing was right to dig deeper into the “framework” of JavaScript.

It immediately became clear that a lot of research has been packed into this book. The first sections explains the core features of Javascript this should get the reader quickly programming JavaScript in a right way. It is nice to see that the code examples in this section are short and self explanatory.

I read the second part with a lot of fun, this section fully prepares developers for ECMAScript 5 and HTLM 5. I learned a lot of new stuff and browser specific details. Possible pitfalls implementing new standards are clearly described. Some of the chapters I really liked were: Handling Events (17), Scripted Media and Graphics ( 21 ) and HTML5 API’s (22).

The reference is very handy, I already have used it a lot of times. It is nice to have good reference, it’s a fast, reliable and up-to-date way to look things up once familliair with the reference layout. Most times faster than a google request. With the confidence of getting clear and concise code examples.

To conclude this review I can say that this book is a must have for every “future-eager” front-end developer. This book reminds me of my worn “Essential Actionscript 3.0” book. “Essential Javascript” a.k.a Javascript the definitive guide 6th Edition can be bought O’Reilly .

Source and example

Watch the demo

Thinking about the menu I had several strategies.

• Create a canvas for each menu item
• Create one canvas which contains the menu items and one moving canvas for the hover animation

I chose for the latter one because i had the feeling that the performance would be better with large menu’s. Of course more creative menu’s can be be created with separate canvas elements for each menu item.

The script consist of three parts.

• Reading out the html and building the menu and creating the animation canvas.
• Event handling.
• Tracking the mouse position for button clicks and hover states.

This way it is possible again to create irritating accessible menu’s . Luckily most clients nowadays avoids animating menu. But trends are known to die end come back again. I still need to find a proper way to position canvas elements and offsetting the origin for mouse calculations.

Introduction

Previous month Packt Publishing send me a request by e-mail for a book review. Of course I was honoured and since the book fitted nicely in my main interest, namely webdevelopment, I read the book and wrote the review below.

First impression, a good book with a fast pace. First three global chapters, then on to the fun stuff creating plugins.

Review

The first three chapters provide a concise but clear introduction to the jQuery API and how to create plugins. The rest of the book describes the creation of plugins in different categories. For example images, audio or form plugins. I really liked this setup, the instructions are very clear and only describe the core of the plugin’s, sometimes with a little added CSS. The advantage of this approach that it is easy for beginners to understand the inner workings of existing plugins. With this understanding it will be easy to expand the plugins to the requirements of the reader. The past years I have used and modified a lot of plugins, I wish I had a book like this from the start.

Even with the experience of a few years of jquery the book is a nice recapitulation of the inner working of the plugins used daily. This book also reminded of some forgotten plugins I wanted to check out.

Another aspect I liked is that the author starts including a custom jquery.center.js plugin to be used in the gallery plugin ( chapter 4 ) and the video plugin ( chapter 6 ) right from the start, this teaches DRY right from the start ( of course with the cost of additional HTTPRequests, but that’s another topic ).

After the first half of the book the plugins get slightly more complex. During these chapters the author familiarizes the reader with more complex jQuery subjects like: custom filters, regular expressions and regular JavaScript. It is nice to see that regular Javascript is used when possible, it is good that the author shows how elegant it is to use Javascript inside jQuery. To my opinion too many developers try to avoid regular Javascript if possible, that a shame because the real power comes with jQuery and JavaScript together.

The last chapter is fun to the the author discusses some of his favourite plugins. The showcased plugin are either very useful and easy to use or display the possible power of jQuery/ Javascript.

Overall this book is a perfect addition to a jQuery learning book. It teaches the creation of jQuery plugins as well as the structure and thoughts behind common plugins. This knowledge comes in very handy exploring the vast amount of jQuery plugins.

if you’re interested, you can buy the book at Packt publishing.

Chapters

1. What is jQuery About?
2. Plugins Basics
3. Our First jQuery Plugin
4. Media Plugins: Images Plugins
5. Media Plugins: Audio Plugins
6. Media Plugins: Video Plugins
7. Form Plugins
8. User Interface Plugins
9. User Interface Plugins: Tooltip Plugins
10. User Interface Plugins: Menu and Navigation Plugins
11. Animation Plugins
12. Utility Plugins
13. Top jQuery Plugins

In one of my last posts I created a snow storm with jquery and div elements, one disadvantages Of course is that the flakes are square. one advantage is that using divs makes it far more easier to create a creative snowstorm. For example the script could be easily recreated in a snow-tagcloud. Therefore I decides to recreate a snowstorm example this time however with the html5 canvas tag.
Beside the features I was curious about the performance of the animation. I expected the Canvas element to outrun jQuery and the DOM, in terms of animation. And indeed I ran both scripts with 1000 flakes and the canvas animation run much smoother.

And of course round snow flakes appear much more realistic

Inspired by the current weather in the Netherlands I wanted to make snow with jQuery. A year Ago I would have used flash for this task, and I still believe flash is better for this specific job ( anyone fancies square snow flakes ). However I think the animation still stands strong. Of course the parallax effect and the opacity make the snowstorm realistic as well as the mousemove handler which makes it possible to change the wind direction.

the plugin itself is relatively small and can be found in scripts.js file, I did not make a separate plugin file because this snowstorm plugin is only a start, and most users would customize it extensively

The plugin follows the following steps.

1. interpret the options, and use them in local variables and objects

settings = jQuery.extend({
        width: 640,
        height: 480,
        viewColor: '#000000',
        flakes: 100
    }, settings);

    //plugin vars
    var view = this;
    var xOffset = 0;
    var extendedWidth = settings.width*2;

2. create and style the view container

// setView
    var cssObj = {
      'background-color' : settings.viewColor,
      'width' : settings.width,
      'height' : settings.height,
      'margin' : '0px',
      'padding' : '0px',
      'overflow': 'hidden',
      'position': 'relative'
    }
    view.css(cssObj);

3. add a mousemove handler to the view container

// create the mouse move handler
    view.bind("mousemove", function(event)
    {
       xOffset = event.clientX - (settings.width/2) ;
    });

4. create the flakes in a for loop

 //Add the flakes
    for( var i = 0; i < settings.flakes; i++ )
    {
       // extend the possible x beyond the view
       var tx =  Math.ceil(  Math.random()* extendedWidth);
       var ty = ( Math.ceil( Math.random()*50 ) ) -150;
       var tsize = Math.ceil( Math.random()*10 + 4 );
       var topacity = tsize * 0.1;
       snowFlake( i, tx, ty, tsize, tsize, topacity);
    }

5. Each flake starts it own animation function which call itself again

//Animate each flake
    function animateFlake( flake )
    {
        // animate
        var flakeDelay = Math.ceil( Math.random()*7000 );
        var distanceY  = settings.height + 20;
        var ySpeed =  Math.ceil( (1/flake.width() )*20000 );
        flake.delay(flakeDelay).animate({
          "top": distanceY,
          "left": ("+="+xOffset)
        }, ySpeed, function()
        {
            //reset flake position
            var cssResetObj = {
              'top': ( -flake.width() + 'px'),
              'left': Math.ceil(  ( Math.random()* extendedWidth)- (settings.width*0.5)  )
            }
            flake.css(cssResetObj);
            animateFlake( flake );
          });
    }

My next steps

After this experiment i want to to realize the same snowstorm with canvas. I am interested in the difference in performance. Of course Canvas should be way way faster because it lacks all the DOM hassle. And it would be possible to create much nicer snowflakes then white squares.