Posted by & filed under books, JavaScript, JQuery.

  • Author: Giulio Bai
  • publisher: packt publishing
  • pages: 261

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.

Book: Jquery Plugin development

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

Posted by & filed under JavaScript, JQuery.

check the canvas snow demo

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.

image of the canvas snowstorm

And of course round snow flakes appear much more realistic

Posted by & filed under CSS, JavaScript, JQuery.

check snowstorm demo

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

screenshot of the snowstorm

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.

Posted by & filed under books.

Last weekend I finished the book “Code Complete 2” by. It was a book which I was interested in for a long. Luckily I found it on the bookshelf of my new employer. It is not the kind of book to finish in a weekend, it took me 2 month ( besides work and my family ). Most of the book is fun to read and well written, mainly because the content of the book is realistic and highly recognizable.
The beginning of the book starts is about the principle “measure twice, cut once”. Make sure you understand the requirements and that they are realistic.
The middle and the largest part provides us with a ton of coding best practices for any language, how to write logic, readable and performing code. During the whole book best practices are funded with (scientific) research data, which made it harder for me to ignore en neglect the best practices, which is a good thing.

The last main section of the book describes best practices to improve just written or existing applications. How the debug and refactor and a major requirement how to development collaborative. The last part of this section is not the least, is describes what the developers/ programmers personality and attitude should be to keep yourself motivated and highly skilled. It also discusses how to deal with managers, and how to keep your cost estimations to stand strong. instead of pleasing the client at first with a low price but begging for more budget to complete the project in the end.

Overall the best ( 6 year old! ) book I have read to increase my knowledge on software development. I would recommend it to ( front-end )webdevelopers who get involved in an increasing codebase as well as experienced programmers.

Book Details

  • Book: Code Complete 2
  • Author: Steve McConnel
  • publisher: Microsoft Press
  • pages: 860

Posted by & filed under JQuery.

I made this plug in while I was playing arround with jQuery. I am trying to transfer my flash skills to html. Learning actionscript started with a bouncing ball class. Therefore I tried to create the same in jQuery.

And here it is the boucingelement plugin. It was fun to make and you could do a lot of useless stuf with it. Like the form example on this page. Click in one of the input fields to start the plugin

$('#password').bouncingElement();

or with parameters

$('#password').bouncingElement({ xpos: 80, ypos: 95, speedX: 1, speedY: 3, fps: 15 });

The main code is very basic as you can see in the snippet below. A simple setInterval functionin the plugin provides the animation you can change the speed by setting the fps parameter or or the speedX/ speedY parameter. It is important to position the bouncing elements absolute.

// change the position
o.xpos += o.speedX;
o.ypos += o.speedY;
ball.css("left", o.xpos);
ball.css("top", o.ypos);

// reverse the speed if the element hits the boundary
if (o.xpos < 0 || o.xpos > (canvas.width() - ball.width()))
{
o.speedX *= -1;
}

if (o.ypos < 0 || o.ypos > (canvas.height() - ball.height()))
{
o.speedY *= -1;
}

You can get the plugin and an example here.