Using Twitter Bootstrap with Node.js, Express and Jade

Posted on Sun 24 February 2013 in HowTo • Tagged with Bootstrap, css, Express, Jade, Javascript, NodeJs, npm, twitter, Ubuntu

I've decided to write this post as a note to myself. I'm still learning Node.js and digging into Express/Jade, but I've read many people using the nice Twitter Bootstrap and I was wondering if there was a way to integrate all these technologies. The short answer is: yes, we can!

Note: once again, I'm not a Node.js expert and surely there are other ways to achieve this task (for example there is a Node.js module called twitter-bootstrap, but I haven't tried it). This tutorial is based on another tutorial I found, but it was not very updated and it had a more complicated way to install Bootstrap, so I decided to write a new one basing it on the original http://www.rs.au.com/31/how-to-install-bootstrap-v2-0-2-in-expressjs-v3-0-0

Preparing the environment

I will assume that you're running any Linux distribution (in my case I'm using Ubuntu 12.10, but feel free to use your own distribution). Be sure to have installed a recent version of nodejs and npm packages (I'm using Node.js 0.8.20 and npm 1.2.11).

Create a project folder and install the required dependencies

mkdir node-bootstrap
cd node-bootstrap
npm install express
npm install jade

Create the basic project structure with Express

[email protected]:~/Documents/sviluppo/nodejs/node-bootstrap$ node_modules/express/bin/express nodebootstrap

create : nodebootstrap
create : nodebootstrap/package.json
create : nodebootstrap/app.js
create : nodebootstrap/public
create : nodebootstrap/public/javascripts
create : nodebootstrap/public/images
create : nodebootstrap/public/stylesheets
create : nodebootstrap/public/stylesheets/style.css
create : nodebootstrap/routes
create : nodebootstrap/routes/index.js
create : nodebootstrap/routes/user.js
create : nodebootstrap/views
create : nodebootstrap/views/layout.jade
create : nodebootstrap/views/index.jade

install dependencies:
$ cd nodebootstrap && npm install

run the app:
$ node app

You should already have installed all the needed dependencies, even without executing npm install, anyway executing it won't hurt.

Download and install Bootstrap

Download Twitter Boostrap from the official website http://twitter.github.com/bootstrap/assets/bootstrap.zip and unzip it under the nodebootstrap/public folder.

Bootstrap integration with Jade template system

At this point you need to edit the views/layout.jade file and include the references to Bootsrap

html
  head
    title= title
    link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css')
    link(rel='stylesheet', href='/bootstrap/css/bootstrap-responsive.min.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js')
    script(src='/bootstrap/js/bootstrap.min.js')
  body
    block content

Test the Bootstrap integration

At this point we will modify views/index.jade that is the default template used to render the index

extends layout

    block content
      div.top
        form.form-horizontal(method="post", id="loginForm")
          label Username
          input.span3(id="username", type="text", name="User", placeholder="Enter your username")
          label Password
          input.span3(id="password", type="password", name="Password")
          input.btn(type="submit", value="Log In")
      div.container
        div.content
          table.table.table-striped
            thead
              tr
                th Table
                th Heading
            tbody
              tr
                td Blah
                td Test
              tr
                td Hello
                td World

      div.footer

Now go back to the terminal and execute the app:

[email protected]:~/Documents/sviluppo/nodejs/node-bootstrap/nodebootstrap$ node app.js
Express server listening on port 3000

Open your favourite browse and visit http://localhost:3000 to see your first Bootstrap + Node.js application app and running.


Twitter client for Maemo in Qt + Python: call for developers and UI designers

Posted on Mon 22 February 2010 in Linux, Maemo (EN), MeeGo, Programmazione, Python, Qt • Tagged with maemo, MeeGo, N900, nokia, Python, Qt, twitter

Introduction

My name's Andrea Grandi, I'm italian and I'm a Maemo user/lover/contributor since the Nokia 770. I love Python as development language and few months ago I also gave some contributions to the PyMaemo project.

In these days I had the idea to start writing a Twitter client for Maemo with a precise direction in my mind. I'll try to explain all my reasons here. First of all I've to thank the author of Mauku client. I use it since its first version and I'm quite happy with it. Then, why do I want to write another one?

  1. Maemo (MeeGo) is moving to Qt and for this reason I'm going to use Qt, while Mauku uses Gtk.
  2. I'm learning Qt and what is better than writing a complete (but not too complex) application to learn better?
  3. Mauku is not free as lot of people could think. Reading the source codeyou find this "You are NOT allowed to modify or redistribute the source code.", while I want to write a client and release it under GPL2 or GPL3 license.
  4. Mauku is not updated since some months and we have no news about it.
  5. I love Python and I like to write free software in this language.
  6. I want to give to Maemo a stronger contribute.

My request for help

Before lot of people start writing their own client resulting in 4-5 twitter clients for Maemo, why don't we join our strength and work to a common project? I'm not a Python expert nor a Qt one, but I've some experience as project/team leader and since this is not a complex project, I would be glad to lead it. So, I'm looking for Python developers, Qt developers, UI designers and whoever want to contribute to this project. I still have to find a good name and logo for this application.

Who want to help me?