Node Tutorial Part 13
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:
- Part 1: Introduction
- Part 2: Installation and Skeleton App, source code commit: 4ea936b
- Part 3: RESTful Methods and Testing, source code commit: 39e66cb
- Part 4: Templates, Partials, Creating and Editing Documents, source code commit: f66fdb
- Part 5: Authentication, Sessions, Access Control Middleware, source code commit: 03fe9b
- Part 6: Interface Basics, source code commit: f2261c
- Part 7: Node Library Versions, Jade Tricks, Error Pages, source code commit: 929f5
- Part 8: Flash Messages and Helpers, source code commit: 841a49
- Part 9: Remember Me, source code commit: 1904c
- Part 10: Markdown, source code commit: 11d33
- Part 11: Better Testing, source code commit: 6a269ce
- Part 12: Updating Mongoose, source code commit: 2a8725
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!
