Web development

How to beautify a JSON

JavaScript-logo
Some time ago I need beautify a JSON in a textarea and I found that JSON.stringify() provides a parameter to specify the String to use as a space, so you can set a tab or number of spaces at each JSON level.

Let’s see:

// This insert tabs at each level
JSON.stringify(jsonObject, null, "\t");
 
// This put two spaces at each level
JSON.stringify(jsonObject, null, 2);

Read more JSON.stringify()

Standard
Web development

How to failover to a local file if a CDN fails with RequireJS

requirejs-logo

 

To use a CDN is recommended for speed and a better performance but for example, what happens if a CDN fails or you want to enable offline mode?

If you are using RequireJS there is a way to do this, let’s see a simple example.

Failover system

Just add another route to the same object

requirejs.config({
  enforceDefine: true,
  paths: {
    jquery: [
      '//ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min',
      'js/jquery-2.0.0.min' 
    ] 
  } 
});

So if the first route fails, RequireJS will try to load the second one (and so on…).

Using it

There is no change about handling the variables

require(['jquery'], function($) {
  // Use $ normally...
});

Read more about config fallbacks
More information RequireJS API

Standard
Web development

Uncaught TypeError: Cannot call method ‘replace’ of null (underscore.js:768)

Uncaught TypeError: Cannot call method ‘replace’ of null (underscore.js:768)

Cause

This error is throw when a Backbone View receive an invalid String as template, in template() function.

template: _.template($('.invalidSelector').html())

How to fix

  • Check the String is not null and not empty
  • If you are using jQuery, check the selector and the result of html()

More info Backbone View template() documentation

Standard
Web development

How to use BackboneJS templates in Jade

There is a problem when using BackboneJS templates in Jade, because of syntax. An example:

The problem

Example.html

div(style="display: none;")#example
    a(id='document_<%= id >') <%= title >

Example.js

var SampleView = Backbone.View.extend({
    template: _.template($('#example').html()), 
    render: function() { 
        var template = this.template({ 
            id: this.model.id, 
            title: this.model.get('title') 
        });
        $(this.el).html(template); 
        return this; 
    } 
});

This doesn’t work because Jade is compiling the content and the variables disappear.

The solution

There are a few tags that Jade doesn’t compile it: script and style.

When you use script, remember include the attribute type=’text/template’ else its code will be evaluate as Javascript and it will be generate error messages.

The example working:

script(type='text/template')#example
    a(id='document_<%= id >') <%= title >

More info Jade documentation

Standard