JGUIMONT>COM @juggy - Tumblr Blog

Posts

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

(via Instapaper)

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.

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](https://github.com/juggy/backbone-module) Backbone Module is a simple and elegant solution to load your in browser javascript dependencies. It leverages [Backbone](http://documentcloud.github.com/backbone/) eventing and [Underscore](http://documentcloud.github.com/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](http://documentcloud.github.com/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!

#code #javascript

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.

#saas #javascript #startup

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.

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!

Hello JulienThank you for responding to my question on stackoverflowhttp://stackoverflow.com/questions/5964537/backbone-js-and-handling-errors-messages-from-railsI 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 againAndrew

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.

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.

(via Instapaper)

Got my first commit on a open source project this week:

Zombie callbacks on inputs

Thanks assaf!

PDFKit and its middleware on Heroku

I run into this problem with PDFKit middleware where the PDF generation seems to hang indefinitely for no apparent reason on Heroku as well as locally when using Thin.

Wkhtmltopdf will load the HTML and then try to load all assets from it (js, css, images, etc.) On Heroku the asset is first served up by the rails server and when you have a single Dyno it will create a deadlock in the handling of the HTTP request. The user trying to access the pdf document will consume the Dynos and the PDF generator will wait for it. Deadlock.

Two ways around that:

Access the static files directly from the web server and not Rails

Access the static files locally

The first option requires some setup (cloudfront and such) and some actions at deployment. Overall this requires to much work.

The second option is the one I preferred. I used Rails asset_host to have all assets for a PDF generation fetch locally (file://). Here is the gist of it:

Works as intended! Hope this will save some people the time I spent on this.

(Note: You first have to follow Matt's instructions on how to install wkhtmltopdf on Heroku )

#pdfkit #rails #heroku

It is More than complicated to find a descriptive, powerful and nice name for a product/company. Even harder that when you cannot name something, it is like it doesn't exist yet.

(via Instapaper)

Trending Blogs

Recently Viewed Blogs

JGUIMONT>COM