Sunday, 14 September 2014

NodeJS progress and the mighty Bootstrap

Since writing my last post I have spent some more time with NodeJS.
Things I have done:

  • I created an API using Express using this article to create some bears - http://scotch.io/tutorials/javascript/build-a-restful-api-using-node-and-express-4) 
  • I added a favicon using this - https://github.com/expressjs/serve-favicon
  • I pondered Jade as my view engine and then quickly decided that Handlebars would be much easier as I was already very familiar - https://github.com/ericf/express-handlebars
As you can see progress is good. 

Unfortunately, next came the bit I always dread, trying to set out an effective design for the website. I struggle as a designer. At university I got familiar Photoshop and Illustrator, and while I really liked doing it at the time, sadly I have not kept up with the evolution of the software since. Luckily I can just prototype and see where it...

...Mild panic began to build.... oh god what about phones and tablets! As if deciding on a design isn't hard enough, I have to think responsive! Anyway - thank god for the kind people/companies of open source. Luckily we have Zurb Foundation and Bootstrap. Zurb Foundation is fantastic, but as I am already familiar with Zurb I thought I would use Bootstrap.

I am not going to bore you with all the details but provide you with my gotcha's list:

  • By default Node does not permit the public directory to be accessed. I wanted to do this so I could access the bootstrap files which were stored in public/libs. If you would like to store your bower packages in a custom directory rather than the default like me, create a .bowerrc file in your route directory with no file name, if unsure check this. Then add the following: 
    {
          "directory": "public/libs"
    }
  • To access the public directory for styles and scripts:
    app.use(express.static(__dirname + '/public'));
  • To use in your views:
    <script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>
  • Use navbar-static-top rather than navbar-fixed-top. This is a new class as of Bootstrap 3.0, it addresses the problem wherein the navbar sits over the content of the page.

No comments:

Post a Comment