10 1 / 2013

Protip: BrowserStack local tunnel

You can now use the BrowserStack local tunnel from the command line. Just download the jar file from here.

Once done, copy it in your home folder and add this to your .profile :

function tunnel(){
  java -jar ~/.browserstack/BrowserStackTunnel.jar <KEY> localhost,$1,0;
}

You can now use the tunnel like so fromt he command line:

#: tunnel 3501

31 12 / 2012

24 11 / 2011

External Javascript optimizing

If you remember my post about the performance degradation of using external javascripts like Google Analytics, UserVoice or Intercom (All Those Services).

It seems I was not crazy after all because I found out CloudFlare and their optimizer service. In relation with their CDN and proxying, it allows to optimize your external resources without changing your app, code or provider.

I’ll give it a try.

24 10 / 2011

Structuring and organizing a Backbone.js app with Module

I created a simple one file project to help people structure their Backbone.js application. I called it module and you can find the source on Github here https://github.com/juggy/backbone-module

Backbone Module is a simple and elegant solution to load your in browser javascript dependencies. It leverages Backbone eventing and Underscore to bring even more goodness.

First of all, it is not a script loader like require.js or a bunch of other libraries. I believe you are better off loading a single monolitic file in the browser and have it cached instead of loading them all by yourself (and doing the browser’s job of optimizing the load).

You might say: “Excuse me mister, but, if I may object, a dependency loader is useless in a monolitic file” and to that I will answer “You are right, if you want to bang your head against the wall everytime you want to refactor something”.

The truth is that you do not develop a web app in a single javascript file. You create multiple files (each with it’s own scope), you assemble them and upload them to a CDN somewhere in the sky next to the moon. I use Jammit to do so in development.

When you do that and do not think about anything, you will end up with loading exceptions in the browser. Oh! that file should load before this one, let’s change the config. Oh! now it is this one. Back and forth and back and forth. No rapid development.

The solution I use is simple. You wrap each file in a Backbone.module call and reference them using that same Backbone.module call.

((mod)->
  #... my app code here
  mod.start = ->
    console.log "starting"
(Backbone.module("app")))

# ...
Backbone.module("app").start()

This is fine when you do not have any dependencies between your modules. When you have dependencies, you should use the define call:

Backbone.module("core/models").define 
  property: "Quote"
  depends: {"core/models" : "EventedModel"}
, (mod)->
  mod.Quote = mod.EventedModel.extend
    initialize: ->
     #...

So that reads: for the “core/models” modules define a property called “Quote” that will depend on the property “EventedModel” of the “core/model” module. You can also define multiple depedencies from multiple modules. That is pretty all there is to it.

My Backbone applications are usually built like that:

  • core
    • index.coffee (the main “core” module which references all sub module like “models”)
    • helpers
    • models
    • routers
    • views
    • templates
  • project
    • index.coffee
    • routers
    • models
  • quote
    • index.coffee
    • routers
    • models
  • invoice
    • index.coffee
    • routers
    • models

My index.coffee looks like this

((core)->

  _.extend core,
    views : core.module("core/views")
    models : core.module("core/models")
    helpers: core.module("core/helpers")
    routers: core.module("core/routers")

)(Backbone.module("core"))

Enjoy!

Tags:

Permalink 7 notes

29 9 / 2011

All those services…

You have a cool startup idea. You want to enhance other people’s web application or web site with metrics gathering, analytics, realtime data, two ways communication, chat, blinking or mustaches on cats. Who knows.

You build your startup and application. You do what everyone else is doing since (I believe) Google Analytics: they configure your application and get a code snippet. They install this snippet on their homepage, web app, whatever. Life is good. 

Problem is that you are not alone doing this. At Porkepic we happen to love using KISSmetrics, Google Analytics, Intercom and UserVoice. Four services that we use daily. Four services that each load a script. Four services with each a different loading mechanism: from the simple javascript include to the deferred loading multiline script. Two of those services generate DOM elements and load images, CSS.

We load tons of crap with those snippets. Javascripts, DOM, images, CSS. Some even include a complete jQuery version (!). Your browser have to load, parse, execute all of those files on each page load. (Some does a good job, but most do not even minimize their files.)

Not mentioning you have to maintain those scripts and includes within your code base.

This is a pain.

I am imagining a central service that would let you standardize these services behavior for your web app. You log into the service. You configure the different files you want to load, you configure if you are already using jQuery or JSON or anything like this on your web app already and you configure the loading mechanism you want to have.  Once that is done, the service goes and fetch all scripts, sanitize them (checks for duplicate scripts like jQuery), minimifies them and send them to a CDN to be served up to your app when needed. 

All the config happens in the service. After the initial setup on your application, there would be nothing else to do. 

What would be even more useful is that all those vendors standardize their practice to use such service and provide piece by piece code loading. So if you want to load the code to have a helpdesk widget to let your customer enter support message but do not want to load the code for the chat widget you could. 

Yeah. I am dreaming.

13 6 / 2011

Revert to last saved version in Backbone.js

Here is one simple code snippet in Coffeescript to revert easily from the last saved version in Backbone.js models:

Do not forget you have to call Skepic.EventedModel.prototype.initialize if you override initialize in your own model.

Permalink 2 notes

17 5 / 2011

How to render a full page template in a rake task with Rails 3

I stumbled upon this problem this week. There are many blog posts on how to do this in Rails 2, but not many for Rails 3 and most are broken in some ways. So I dug a little and found a nice solution.

First of all, Rails 3 is broken down into distinct modules that enables developer to pick and chose features and assemble them into something new. This is mostly what is happening with the new mailers. They include the features from a normal ActionController but in a different context. When you read the code of the mailers you will see that it includes a bunch of AbstractController modules. The same modules are also found in ActionController::Base. These are the basic building blocks to render templates in rails. 

So this is how I created this OfflineTemplate class that allows you to render anything offline, in a rake task or in a cron job. You can render a partial, a string, XML, json or a page including its layout. 

Comments on the implementation are welcome!

13 5 / 2011

andicrook-deactivated20120921 asked: Hello Julien

Thank you for responding to my question on stackoverflow

http://stackoverflow.com/questions/5964537/backbone-js-and-handling-errors-messages-from-rails

I wonder if you could please explain how to implement a custom Responder, for example where should such code live in a Rails project?

Thank you again

Andrew

Responders are new in Rails 3. You have to defined them in your project. I created a lib/js_responder.rb and used the code I put in StackOverflow. Your responder module must be itself in the Responders Rails module.

Permalink 1 note

09 5 / 2011

chinmaybijwe asked: hi Julien,
Thanks for your post on PDFKit and its middleware on Heroku. I am using rails 2.3.4 (I plan to upgrade soon), and I am running into the same problem that you mentioned about.
While I understand your solution, I'm still not clear where to place the assets.rb code. I have tried a few places, but it doesn't seem to work. Looking forward to your reply.
Thanks

It is an initializer, it needs to live in the config/initializers directory of your rails app.

27 4 / 2011