Diving into React.JS. Just completed this fantastic tutorial by Wesbos that walks you through building an online store.
Category Archives: Professional
SVG Animation w/ Grunt Icon
Vue.js wattage calculator
This started as an AngularJS tutorial on Lynda.com. I re-wrote is in Vue.js – using webpack and vue-loader.
Dial in the lumens, kW hour cost and hours.
See the code on GitHub
WordPress site for NOLA arts organization
Word Press site for New Orleans Airlift project – the Music Box Village.
Using Genesis theme framework.
current gig
I’m currently under contract for a year working with ReelFeed.tv – helping to develop their VPAID applications.
Built WordPress site for Artist Mike Ross
Fizz Buzz Spiral Layout Demo
Fizz-Buzz is a basic coding exercise that can be done in any language.
- lays out boxes in a spiral pattern
- uses GSAP to animate into place
- utilizes the revealing module pattern
Code available on GitHub.
Single Page Web Applications Book Review

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.
Fancybox and Vimeo
I was getting privacy errors when trying to display my Vimeo videos in my fancybox gallery.
The fix was to link to get the embed tag from Vimeo and pull out the href link. Use that in fancybox rather than the share link.
Javascript/CSS animation test – Oscillating dot animation
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(" "); }