Notes, How Tos, Things To Remember, Things I'll soon forget

Toying around with Backbone.js At $work, we've been using more and more backbone.js  to create a more responsive front end experience and help the dev team manage the code. I like backbone.js and find that its it is very helpful to seperate data and code on the client. But I've found that it challenges me to think in different ways. I find it helpful to create an app so I did :) Introducing Brewers Radio Finder Over the years, i've often driven between Milwaukee and St. Paul, MN. While on the drive, there are areas of the state where finding the close Brewer's radio station is tough and figuring out which station is the closest to you is difficult when looking at the map from Brewers Radio network . Am I currently closer to Reedsburg or Portage? The app is pretty simple, you can type in or give it your current location and it will show the 3 closest Brewers radio stations to you.  You can check it out at http://radiofinder.leecarmichael.com/ .  ...

As I spend time learning  Backbone  I've found some unexpected things (to me probably not to others). Today I found that even though  Backbone  fetch allows you to pass in typical jQuery  ajax  options (like success or error handlers), it will alter what parameters are passed back to those handlers. In jQuery Here is an example of plain jane ajax call (in older style jQuery before renaming of events): In backbone handler In backbone fetch changes up what you receive. It is nicely stated in that section: The  options  hash takes  success  and  error  callbacks which will both be passed  (collection, response, options)  as arguments. I only read that like 3 times before i actually saw that note :) Here is an example of backbone success handler: The one really nice part of the different parameters is that backbone gives you objects instead of raw-ish data. This means if you need to create two dif...

Altering Template Toolkit's INCLUDE_PATH in Dancer This just came up on Dancer 's mailing list and I've been sitting on this code (and post) for a few months since the project I was working on didn't need it. Basically Dancer's Template Toolkit view requires you completely alter it or use the default setting. This is pain if you just want to add to it but not have to manage all the changes. I created a new TT view class, to get inside the TT init and add to the INCLUDE_PATH instead of replace it. The code was a bit involved and I extended it a bit by adding a customization flag in each environment (if needed). On to the code Here is the code and config that i used to do this Disclaimer I don't recall all the other issues that i ran into while doing this. It was over 6 months ago but post questions if you have them __END__

Bring together the parts I was able to find complete documentation on running dancer  with nginx using FastCGI. In the dancer deployment  it discusses using Apache and fastcgi or nginx with proxy. Often, using nginx as proxy to starman(or some other plack webserver) is probably the right thing. But sometimes using fastcgi is good idea too :) I'm running some benchmarks but it seems like memory usage is a bit smaller with FCGI but I still need to do more digging on this. Make it so Lets get all the parts install and then configure them Install the Parts Note: These parts will be very dependent on your system. I'm assuming a debian/ubuntu system below. First you need to have nginx and dancer installed. For nginx i would recommend doing something like: apt-get install nginx or building and install from source.  Next, install need Perl modules: cpanm + Dancer's Makefile.PL I like to install using Dancer's app generated Makefile.PL along with cpanm ...

Dancer does lots of great things. It has a nice clean way to define routes to handle AJAX routes using the plugin Dancer::Plugin::Ajax . ajax routes are defined in a clear way: ajax '/stuff' => sub { # do work and return }; This plugin technique allows for clear way to separate between ajax and other types of actions for the same route. ajax '/stuff' => sub { # do ajax-y stuff here }; get '/stuff' => sub { # handle html response }; Unfortunately, the one negative with Dancer::Plugin::Ajax is that is assumes all responses will be XML. A quick fix is to manually set the content type in each ajax handler. ajax '/stuff' => sub { content_type('application/json'); # do work }; or add set it as a general option in your main before hook or in each prefix route handler like: package WebApp; hook before => sub { if ( request->is_ajax ) { content_type('application/json'); } }; ...

Do what needs to be done We recently launched a new home page and the designed used a responsive image slider called Blueberry . Well there were a few issues with navigation and I needed to be able to make sure to have the slider start to slide automatically and then stop while playing a YouTube video. I need to fix the problem with navigation causing a speed up and unreliable timing while showing slides. I extended it to support being stopped and started. Since the project appears to be on hiatus (no changes in a year even though it has a few  github issues ), I forked it on github  to fix the event issue and add the ability to stop/start slider. Blueberry + YouTube sitting in a tree I found it to be a bit of challenge to update the site to support pausing the image slider when the YouTube video that is linked in through iframe started and stop being played. I found to get the correct permissions and callback into the player I needed to use the YouTube iFrame...

A bit of background Template toolkit is a powerful and mature Perl  based templating engine. It is designed to be output format agnostic and used (or able to be used) with most of the Perl based Web application frameworks like Dancer , Catalyst and CGI::Application . TT Tip #1 - Simple html attribute macro In this tip, i'll combine using a TT macro with HTML plugin to create a simple macro to add active class to html element. code TT code: (put in top of template or shared TT file pulled in with PROCESS or INCLUDE) [% USE HTML %] [% MACRO active GET HTML.attributes( 'class' => 'active' ) %] Usage in a template: <ul id="navBar"> <li [% active IF page.name == 'home' %]>Home</li> <li [% active IF page.name == 'about' %]>about</li> <li [% active IF page.name == 'contact' %]>contact</li> </ul> In this case, when page.name matches then macro will drop in ...