Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

June 11 2012

Optimising CoffeeScript files with r.js - Unexpected character

When trying to optimise a coffeescript project with the latest r.js optimiser from the requirejs npm module I ran into the following error

Cannot uglify file: /path/to/main.js. Skipping it. Error is: Unexpected character '' (line: 363, col: 3, pos: 15612)

I downloaded the uglify-js package which r.js is using here to minify the script. Running it on the file in question in the output directory of the r.js build process gave me more information - specifically that uglify is dying on the character sequence  ï»¿ - a utf-8 byte order mark.

It turns out these marks were being input by an incorrectly configured template in visual studio. After looking into it, it appears that the BOM isn't necessary or recommended in UTF-8 encoded files.

It follows that the quickest (and dirtiest) way is to simply strip these characters from files we wish to minify.

grep -lZr $'\357\273\277' . | xargs -0 -l sed -i -e $'s/\357\273\277//g'

This command is using the grep and sed commands (by way of xargs) to A) find all files containing the BOM and B) remove the mark from those files inplace.

The call to grep has the options -lZr set ( l = only display filenames in the result, Z = separate the results with \0, r = search recursively from the path provided - in this case "." ) which we pipe to xargs and call sed once for each filename. The scary looking $'\357\273\277' is simply the ï»¿ escaped. We use the $ to get the shell to expand the escaped codes - otherwise grep and sed will interpret the escaped characters as a back reference to something already matched (which we don't want).

Because we're using a simple shell script to invoke the r.js command, we can throw this command in there to do some preprocessing work on our source files. Ideally, this would be in a rake/make/cakefile but this fits my needs right now.

May 25 2012

downloading an image in nodejs

Tip: You have to listen to the data event and assemble your image it whilst it's streaming in

April 24 2012

Coffeescript, RequireJS, and You! Part One

best friends together at last!

So you want to create a javascript application with some kind of non trivial complexity, but separating the functionality out into different script files gets hairy. You need to forward declare certain functions before you execute certain functions, and things need to be loaded before they can be displayed. 

Then when you add CoffeeScript into the mix you've got a whole new set of problems. Ultimately you want one big file containing the logic of your application, but unless you've passed your discrete .coffee files to the coffee compiler (or included them in the head of your html) in a specific order, you won't be able to execute functions before they've been declared. 

oh no save me, RequireJS 

What RequireJS does in this situation is provide a solution to the dependency problem mentioned above. What you do is create your separate script files to the AMD format, which tells you to explicitly mention the files (modules) that each script file depends upon. You do this by wrapping your script in a call to the function definewhere the parameters passed to define reference the dependencies of your new script. 

By returning from this define function, you decide what to expose from this module when it's requested by something else. This is similar to the exports.blah = ExportedObject format within CommonJS. If we manipulate exactly what is returned we can expose any number of class definitions, functions or arbitrary values that we choose.

Let's Go


We're going to make a test project to understand how to make these things work together. This will give us an idea of how to structure our application in a way that removes the problems of dependency resolution. The first thing we'll need to do is to get the required libraries to run RequireJS with CoffeeScript. The specific files we need are as follows:

  • The RequireJS library
  • The CoffeeScript plugin for RequireJS
  • The latest coffee-script.js compiler (for use with the above plugin)

  • Next we'll create some folders for our application, and for the sake of this example we'll organise the above files that we've downloaded as follows. 

    Our file layout on disk
    Next we'll create our html file for loading the scripts, this'll be nothing more than a standard html document with a script tag in the head to load the require.js library.

    Note the data-main attribute on the script tag. This is specific to RequireJS, and it defines the entry point to our application. What we're doing is telling RequireJS where the first file we want to execute is located, in this case it's at "src/main.js" (we've intentionally left out the .js suffix on this path). 

    We could set this to be anywhere in the directory tree, but it's important that the coffee-script.js and cs.js files are located in the same place as the entry point. Also at this point we want to rename coffee-script.js to CoffeeScript.js. This is a requirement specific to the cs.js plugin.

    Now we'll create a simple main.js file for use in our application. We'll make sure it follows the AMD format by wrapping everything in a define call, and because we don't yet depend on anything it'll be straightforward.

    Our tree should now look like this:

    From here we can serve the files from the root of the project, and we should see our message output in the console for the index page.

    It's humble, but that little message means we've almost configured everything correctly, and we can finally get down to writing the logic of our application. whoopty doo!

    The application

    We'll create a simple test application in coffeescript. Let's make it simple and add some text to the dom when the user clicks on the page. We'll do it in three steps

    • populate the dom with a super cool html button
    • bind to a click event and write to the console
    • bind to the same event and add some text to the page
    For demonstrating how to organise an application, we'll also experiment with different ways of returning values from a module to show how we can expose different objects.

    Adding a button to the page

    We'll do this by creating a module which simply adds a standard button element to the page. We'll call into this module from our main.js module utilising the CoffeeScript plugin we have sitting nicely in the src folder.

    As before, we've created a file that follows the AMD format. This is implemented via wrapping the entire module in a define call. The empty array is to say that this module depends on nothing, and the empty parameter list for the function reflects that we aren't passing any dependencies in.

    What's happening here is that within the define call we are saying "here comes a module with no dependencies" - then within that function we are defining a single function which manipulates the dom to add a button to the document

    input = document.createElement "button"
    input.innerText = "Super Cool Test Button!"
    input.setAttribute "id", "the-button"
    document.body.appendChild "input"

    Because this is CoffeeScript, the last expression of a function is returned. In this case, the last expression within the define call is the definition the function above - the one that adds the button. This means that when we import this module elsewhere, all we are importing is the function above. Which we're going to do now!

    In this case we've imported the module we just created and associated it with the parameter AddButton. Now within the context of main.js we have access to whatever we exported, which in this case was the single function we defined. By executing it directly we're performing the add button functionality.


    Next let's look at something less trivial than adding a button, and instead organise our classes into something resembling a traditional application.

      March 17 2012

      rise from your grave!

      it's time to resurrect a blog..

      February 12 2011

      6993 c140 420
      Browser Testing
      Reposted fromcalltopower calltopower
      7038 53a9 420
      Nanoputians are a series of organic molecules whose structural formulae appear human. The compounds consist of two benzene rings connected via a few carbon atoms as the body, four acetylene units each carrying an alkyl group at their ends which represents the hands and legs, and a 1,3-dioxolane ring as the head.
      Reposted fromunenlaaakso unenlaaakso
      7198 3455 420

      (by kyra)

      Reposted fromhellspawn hellspawn
      Reposted fromJustCausa JustCausa

      February 11 2011

      9518 8733 420
      Reposted fromgivota givota

      February 07 2011

      8200 5bc6 420
      Wedding invitation
      Reposted fromlalandia lalandia
      8747 4634 420
      Reposted frompanzzzzzzz panzzzzzzz
      8769 fe05 420
      Reposted frompodziemna podziemna
      Reposted fromdreptak dreptak viaMnemoSyn MnemoSyn
      0334 4d7b
      Reposted fromtrstnx trstnx viadashi dashi

      January 31 2011

      4161 437a 420


      Sonic Spinball japanese box art - Mega Drive / Genesis, 1993.

      [ More Sonic japanese box art ]

      Reposted fromkosherx kosherx
      Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
      Could not load more posts
      Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
      Just a second, loading more posts...
      You've reached the end.

      Don't be the product, buy the product!