Google Universal Analytics happy and sad

Google recently release Universal Analytics. It requires some code changes but I think the new developer interface is going to be quite a bit more usable.

https://developers.google.com/analytics/devguides/collection/analyticsjs/

Happy

New API – The best change I see (in the first 10 minutes of looking) is the change from flat arrays to dictionary/hash/associative arrays for configuring options. Event tracking code just got much easier to follow. Cool!

Callbacks – Now can have better knowledge when tracking has completed its execution. I’m sure that lots of data got lost when trying to trigger custom events on form submission.

Variables/Namespaces -I do not have to rely on the mysterious _gaq variable. You can now name your own Analytics variable. I probably wasn’t ever going to create my own _gaq var.

User Timing – it appears that Universal Analytics has some features for tracking the time it takes for pages to load. Rather than diving into my own logs, Analytics will profile performance for me? Excelente!

Sad

I may have to re-code some significant stuff that uses the old Google Analytics.

undefined is not a function when Dynamically loading Google Maps API v3

Long story short: Don’t be fancy when you dynamically inject your Google API script call into the DOM. Inject it to the BODY of your document using plain javascript.

I was struggling mightily with getting the Google Maps API to load on-demand today for my wife’s old Android 2.1.x device. The maps worked on every other conceivable device. Everything would load but mysteriously the maps would never load. I looked at it a long time but it’s really tough to debug older Android browsers because I can only look at the console output through the terminal using adb.

Every time the map tried to load I would get this message in the adb terminal.

Console: TypeError: Result of expression 'n.google.maps.Load' [undefined] is not a function. http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/12/8a/%7Bmain,places%7D.js:42

I was trying to inject the Google script into the HEAD portion of DOM using jQuery. THIS DID NOT WORK!

script = document.createElement("SCRIPT")
script.src = "http://maps.googleapis.com/maps/api/js?key=#{APIKEY}&libraries=places&sensor=true&callback=#{callback}"
script.type = "text/javascript"
script.id = "googlemapscript"
$("head").append(script) // < -- this will NOT WORK!!!
document.body.appendChild(script) // <-- use regular injection to fix your Woes!

My boilerplate setup for WordPress

When setting up a WordPress site, these are the first plugins that I install on every project.

  • Google Analyticator
  • Google XML sitemaps – for SEO
  • Social (by MailChimp) – to cross post into Twitter & Facebook
  • Google Adsense PLugin (by BestWebSoft)

Lately as my WordPress needs have grown I am finding these plugins to be more and more useful

  • Posts 2 Posts – many-to-many relationship for WP. 
  • RSS Multi importer
  • Comprehensive Google Map plugin
  • Related posts (by Zemanta)

Reference

WordPress vs Django for content prototype

Smashing Magazine has an article on how to create a custom post type in WordPress.

I was considering building out a content website with Django+Mezzanine but I think it will be much more cost effective if I can get away with a custom post type on WordPress.

I would much prefer to use Python + Django but the time and costs are prohibitive and it would only make sense if I were going to go heavy-duty on with the relational databases. Optimistically with my beginner to mid-level experience it would take 5-6 hours to set up a proper Django server. Here’s what I would have to do to create a Django based system:

  • get a VPS ($15/month)
  • Install all necessary Python + Django packages [1 hour to for virtualenvs & finding all dependencies]
  • setup nginx/apache with proper proxies etc [2 hours because I haven’t set this up in a while]
  • install & configure Postgres database [2 hours because Postgres is always messed up]
  • remain open to all kinds of security flaws since I don’t know how to lock down firewalls and other VPS stuff.
  • Now I can start development.

With WordPress I can (hopefully) build my plugins and have everything hosted by standard webhosts that are much more affordable. WordPress plugin on the other hand

  • pick a cheap shared webhost [$5/month]
  • install WordPress through cPanel->Fanstastico [10 minutes]
  • Find & install 5-6 plugins in my personal “boilerplate” [1 hour with WP plugin system]
  • start my own plugin development

Obviously these two systems are not an apples-to-apples comparison. A shared webhost WP site could probably only handle a small fraction of the traffic that even a half-assed Django setup would be able to handle. And, if traffic started to grow you could get kicked off that shared webhost (this has happened to me). Plus, your site would never survive a slashdot (reddit) tidal wave.

But at the end of the day I just need a CMS on which I can add some basic bells and whistles. WordPress will satisfy that need cheaply and easily for 95% of my purposes.

jQuery Deferred

The jQuery concept of Deferred objects feels a bit more complicated than what I used to do with MochiKit‘s Async library. It could simply be the naming conventions that jQuery has chosen.

Deferred asynchronous calls can be used for more than AJAX!

Most of the jQuery examples is that the authors choose AJAX-based calls for examples on how the Deferred objects work. Rather than doing a series of setInterval and setTimeout things to check for animations to be completed or animations to finish I can use Deferred calls to reliably tell me that the variables that I want are ready to rock and roll.

Best tutorials so far

Deferred is kind of hard to explain but this is the simplest way I can try:

  • You instantiate a Deferred object in a function that you want to be asynchronous. (AJAX calls are Deferred but not all Deferred are AJAX)
  • a [promise()] allows other variables & functions subscribe to notifications that Deferred is done or failed
  • Deferred.resolve() tells all subscribers of the Deferred that the Deferred is done executing
  • Functions passed into Deferred.done() will be executed if

In various parts of your code you can allow other variables to wait for an outcome Deferred

doSomethingWhenDeferredIsDoneDoingWhatItNeedsToDo = d.promise()

Notes from first project using Backbone Marionette

I really enjoy using Backbone.Marionette.

I was recently tasked with a pretty exciting opportunity at work: build a cross platform mobile web app. This project has been (still is) incredibly challenging for me because I’ve never built anything like this before. It’s probably the most complex JavaScript I’ve ever written and I was able to build a reasonably decent app from the ground up thanks to a few technologies and frameworks that made my life infinitely easier:

  • Backbone.js framework
  • Backbone.Marionette framework
  • Jade javascript templates
  • (Iced) CoffeeScript
  • Stylus CSS
  • jQuery Mobile
  • jQuery + underscore (prereqs anyway)
  • Mobile Boiler Plate
  • Modernizr
  • cdnjs (This has almost all of the above libraries on a CDN! Free! Magnificent.)
  • a handful of utilities (makefiles, etc.) that our build engineer created in-house to package things up real nicely.

Figuring out how to use Backbone and Marionette took a long time for me to grasp but now that I’m comfortable using them I feel like I have the tools and skills necessary to build some cool stuff in the future. Maybe not GMail in complexity nor 8-bit Nintendo Emulator coolness but give me an API and some time, I’ll be able to whip up something that could be pretty neat.

 

Important Resources that helped me understand Marionette

These tutorials and code samples helped me the most when trying to pick up a new framework. I don’t watch a lot of screencasts because they tend to be really slow and I can’t copy-paste the code samples.

Tutorial: a full Backbone.Marionette application – is the first tutorial that I found that actually helped me wrap my head around Marionette. The code is easy to read and well explained. Downside — the structure and style are slightly different from the patterns that Derrick Bailey, creator of Marionette,  uses in his examples. The tutorial is slightly old and does not take advantage of newer features that have been added to Marionette (for instance, AMD-style loading). Nevertheless, this tutorial is what got me used to the basic elements of Marionette. Mr. Bailey’s blogs regarding Marionette are well written but they only started to make sense after 1-2 days of staring at this tutorial first.

Addy Osmani’s TodoMVC implemented in Marionette – A useful example of how to use Marionette but I find the JavaScript AMD code extremely hard to follow because all the code is spread around in different files. The order in which the various modules get included on the page matter.

Stack Overflow questions answered by Derrick Bailey – Back to Mr. Bailey… he is active/proactive in Stack Overflow and he often provides insightful answers and comments to many of the questions about backbone.marionette. It will benefit you to look beyond the big green check “Accepted Answer” blocks to seek out Mr. Bailey’s comments in any S.O. thread.

Backbone Marionette Docs in Github – the documentation is extensive and well written. The problem is that there are so many modules available to use it’s hard to know where to get started. In my first non-trivial Marionette app I only used half of the modules in my code (some of the modules are base classes but I didn’t specifically call them). The Marionette components that I used:

  • Marionette.ItemView
  • Marionette.CompositeView
  • Marionette.Layout
  • Marionette.Region
  • Marionette.AppRouter
  • Marionette.Application.Module
  • Marionette.Application — just 1 instance but it provides the foundation for everything else.
  • Backbone.View — I was easily able to adapt a View I had written before to work fine with Marionette. It would be possible to break my View into ItemView + CompositeView but not worth the time.
  • Backbone.Model — a building block
  • Backbone.Collection — a building block

I chose the jQuery Mobile (jQM) framework to help me organize my HTML and take advantage of its transitions and animation libraries. With a little bit of planning jQuery Mobile has turned out to compliment Marionette, I did however have to throw out a lot of jQM’s default JavaScript behavior.

My app architecture in a nutshell:

  • Marionette.Application is the starting point, basically a singleton to get things started.
  • My Marionette.Application provides a single point of contact for application-level event handling and tying together all of the component pieces of my various Backbone/Marionette Views and Controllers.

In the jQM paradigm Pages are a fundamental component. Each Page is demarcated by a <div data-role="page">. I have 3 basic jQM Pages. Each layout had a unique layout and imagine the wireframe looks something like below:

  • a start page (id=start)
  • a search page (id=search)
  • and a google map page (id=gmap)
Rough layout

Rough layout

Since I had these 3 pages, it made sense to define each as a Region in Marionette. Although a Region has all kinds of bells and whistles I can get a way with using these top-level Page Regions to only hide/show an individual page.

  • Each jQuery Mobile HTML block corresponds to its own Application.Module to maintain separation for the logic of my various views.
  • jQuery Mobile Page. Each Layout has multiple Region areas within. Notice how I have nested Regions by having Region > Layout > Region(s)
  • I get whatever content I need (in this case AJAX data from an API) whereby Backbone.Collection (i.e. a SQL table) contains many Backbone.Models (i.e. individual table rows)
  • ItemView is a View for individual Backbone.Model objects
  • In this case I use a CompositeView for my Backbone.Collection.
  • As a Collection contains multiple Models, so too does a CompositeView contain multiple ItemViews
  • A “show” call to Application.Region.Layout.SubRegion.show(CollectionCompositeView) will automatically cause the entire collection to render whereby the CompositeView wraps all of the individually rendered ItemView HTML. (think UL>LI*5, or TABLE>TR*5). The rendered aggregate HTML block will then be rendered into the region, replacing anything that was there before (may be override available)