DailyJS

Node Tutorial Part 13

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

tutorials server css node lmawa nodepad npm express stylus

Node Tutorial Part 13

Posted by Alex R. Young on .
Featured

tutorials server css node lmawa nodepad npm express stylus

Node Tutorial Part 13

Posted by Alex R. Young on .

Welcome to part 13 of Let's Make a Web App, a tutorial series about
building a web app with Node. This series will
walk you through the major areas you'll need to face when building your
own applications. These tutorials are tagged with
lmawa.

Previous tutorials:

Stylus

I wanted to improve Nodepad's interface, but seeing as there's been a
lot of interest in Stylus lately
I thought it might be good to switch to that while I was at it. Stylus
is a CSS shorthand language, with many powerful features like variables,
interpolation, mixins, and nested selectors.

Stylus can be installed with npm:

npm install stylus

Actually using it is fairly easy, it comes bundled with a middleware
layer for Connect:

var stylus = require('stylus');

app.configure(function() {
  // ...
  app.use(stylus.middleware({ src: __dirname + '/public' }));

Writing Stylus

In Stylus, white space is significant, but this allows us to drop
braces, colons, and semi-colons. That means our body style
can be rewritten like this:

body
  padding 0
  margin 0
  font 14px "Lucida Grande", "Helvetica Nueue", Arial, sans-serif

Another useful feature is variables. I looked through the file to find
repeated chunks of CSS and replaced them with variables. Variables are
written as variable-name = style:

active-colour = #dfe3ea
highlight-colour = #c5c5c5
faded-white = #f0f0f0
light-grey = #f6f6f6
medium-grey = #999
dark-grey = #666
black = #111
selected-colour = #8897ba

These are the colours that I pulled out of our original stylesheet. Now
we can write styles with these variables:

.outline-view
  position absolute
  width 250px
  background-color active-colour

In cases where we want to reuse variables and replace entire lines, we
can use functions:

glass-background()
  background light-grey url('/images/glass.png') repeat-x 50% 50%

grey-border()
  border-top 1px solid highlight-colour

#controls
  position absolute
  left 252px
  bottom 0
  height 30px
  grey-border()
  glass-background()

Functions can accept parameters as well:

centre-shadow(size, colour)
  -moz-box-shadow 0 0 size colour
  -webkit-box-shadow 0 0 size colour
  box-shadow 0 0 size colour

.flash .ui-corner-all
  width 300px
  margin 50px auto 0 auto
  padding 0 5px
  opacity 0.9
  font-weight bold
  centre-shadow(8px, light-grey)

Functions work as expected and can easily be combined with variables.

Bug Fixes

Meanwhile, Eiríkur Heiðar Nilsson helped
improve the LoginToken model. The save middleware always
replaced both the token and the series value were being updated, instead
of just the token:

  LoginToken.pre('save', function(next) {
    // Automatically create the tokens
    this.token = this.randomToken();

    // This is eirikurn's modification:
    if (this.isNew)
      this.series = this.randomToken();

    next();
  });

This is in reference to part 9 of the Nodepad
tutorials
where we
implemented "remember me" for the login form.

Conclusion

I think Stylus is a great way to make CSS more efficient. Take a look at
commit 0a70e40
to see how I switched to Stylus (the
diffs

will help). And, just so you know, switching to Stylus wasn't too hard
-- I basically did g/[{};:]/s///g in vim!