Category Archives: Professional

Single Page Web Applications Book Review

code, Professional, ,
Single Page Web Applications
JavaScript end-to-end
Michael S. Mikowski and Josh C. Powell

Set those frameworks aside – for the moment – and roll up your sleeves, Single Page Web Applications, by Michael Mikowksi and Josh Powell is the equivalent of eating your spinach. With nothing but javascript, jQuery and a couple plug-ins, and a database, they take you step by step through the process of building a out a javascript end-to-end single page chat application.

Coming from a class based coding language, I had this down in spades. But how to build complex apps in a proto-type functional coding language like Javascript without diving into a world a of pain?

The authors employ a repeating MVC pattern for architecting their code. If you’ve ever built anything of complexity – nothing new there. But if not, this is a good place to grok that concept.

But it’s the particulars of Javascript that of interest of course. Before they dive in the deep end – there are some javascript uniqueness to to tackle. I think I can say, that after reading this book, I finally, truly get closure.

In this book you learn to build feature modules – with well defined APIs and strong isolation. They start simple and add complexity and are careful to explain their reasoning all they way through.

Only once in this book did a hit a wall and that was setting up the MongoDb database on a mac.  I posted my issue on the discussion forum and got a quick response from the author.

I’m re-reading this book so that I can truly grok the concepts and techniques – and thereby sketch out and build well defined and scoped feature modules of any sort – a day planner, a slide show, a video player – that can be popped into the larger application with minimum fuss.

Buy this book. Read it – read it again – and jump on the discussion forum.

 

Javascript/CSS animation test – Oscillating dot animation

code, demo, Professional, , ,

A test using greensock GASP and jquery – with:

Note that the animation plays  choppy on older mobile devices when the alpha is tweened.

var MYAPP={};
$(document).ready(function() {
	MYAPP._body = $('body');
	for (var i=0; i<100; i++) {
		initSQ(i);
	}
	$(window).on('resize', onResize);
	//get query string value
	if ($.url().param("tweenAlpha") == 'true') {
		MYAPP.tweenAlpha=true;
	} else {
		MYAPP.tweenAlpha=false;
	}
	onResize();
});
function onResize(){
	var origX = $(document).width()/2;
	var origY = $(document).height()/2;
	if (MYAPP.tweenAlpha) {
		TweenMax.set($("div.bip") , {x:origX, y:origY, opacity:0});
	} else {
		TweenMax.set($("div.bip") , {x:origX, y:origY});
	}
	$("div.bip").each(function(index, element) {
	   if (origX < origY) {
		   rad = origX/2;
	   } else {
		   rad = origY/2;
	   }
		var ang = Math.random()*2*Math.PI;
		var x2 = (rad)*Math.sin(ang) +  origX;
		var y2 = (rad)*Math.cos(ang)  +  origY;
		TweenMax.to(element , 2, {x:x2, y:y2, opacity:1, delay: index*.01, repeat:-1, yoyo:true});
    });
}
function initSQ(i){
	MYAPP._body.append("

");
}