Connect 1.8.0 - multipart support
Connect 1.8.0 is a tiny but substantial release because it adds multipart/form-data support via Felix Geisendörfer’s fantastic multipart parser formidable, it’s great and chances are you’re already using it!
The bodyParser() middleware now unifies multipart, json, and x-www-form-urlencoded parsing, providing the req.body object containing the parsed data. For security purposes the files are placed in a separate object, req.files, however just as accessible. A constant struggle that I’ve seen in the community is the concept of “missing” request data events so this will
prevent further confusion. The downside to this is that if you wish to report upload progress, or access files and fields as the request is streamed, you will have to use formidable directly.
Before this addition your use of formidable might look something like the following (with Express):
app.post('/someform', function(req, res, next){
var form = new formidable.IncomingForm;
form.parse(req, function(err, fields, files){
if (err) return next(err);
// do something with files.image etc
});
});
With the new bodyParser() all you need is:
app.use(express.bodyParser());
app.post('/some-form', function(req, res){
// do something with req.files.image
})
The middleware takes the same options that are mentioned on formidable’s GitHub repo page, so you can specify things like size limits, retaining extensions, the upload directory etc.
app.use(express.bodyParser({
uploadDir: '/tmp/uploads'
}));
That’s it! but I think this will cover well above the 80% use-case and prevent a lot of headaches that people have with the previous the inconsistencies.
Jade & Stylus 0.16.0 released
Jade 0.16.0
This release of Jade adds quite a few new features such block support for include, and template inheritance!
Extended grammar
Jade currently allows you to use JavaScript all over the place, rather than restricting a subset, or implement its own grammar. While this is flexible it tends to make templates look less like … templates! In an effort to make Jade more declarative I’ve added literal support for if, unless, while, until, iteration, assignments and others.
For example I consider it bad practice to define vars in a template, however if you must, you may have previously done something like this:
- var items = ['foo', 'bar', 'baz']
Jade now allows for assignment, where the right-hand operand is still a regular javascript expression:
items = ['foo', 'bar', 'baz']
As mentioned if and unless and friends are supported, so the following:
- if (!(foo && bar))
p stuff
May now be defined as:
unless foo && bar
p stuff
This rule applies to else[ if] as well:
if something
p foo
else if somethingElse
p bar
else
p baz
And finally iteration where each and for are interchangeable:
- items.forEach(function(item){
li= item
- })
each item in items
li= item
for item in items
li= item
each item, i in items
li #{i}: #{item}
each val, key in obj
li #{key}: #{val}
Include blocks
The include directive now supports blocks, so for example one could have head.jade defined as the following:
head
script(src='/javascripts/jquery.js')
Allowing you to either include the file as-is:
html
include head
body
h1 Title
or append to the last block defined, adding additional script tags:
html
include head
script(src='/javascripts/caustic.js')
script(src='/javascripts/app.js')
body
h1 Title
Template inheritance
Jade now supports template inheritance via the block and extends keywords. A block is simply a “block” (indented) of Jade that may be replaced within a child template, this process is recursive.
Jade blocks can provide default content if desired, however optional as shown below by block scripts, block content, and block foot.
// layout.jade
html
head
h1 My Site - #{title}
block scripts
script(src='/jquery.js')
body
block content
block foot
#footer
p some footer content
Now to extend the layout, simply create a new file and use the extends directive as shown below, giving the path (with or without the .jade extension). You may now define one or more blocks that will override the parent block content, note that here the foot block is not redefined and will output “some footer content”.
// index.jade
extends layout
block scripts
script(src='/jquery.js')
script(src='/pets.js')
block content
h1= title
each pet in pets
include pet
It’s also possible to override a block to provide additional blocks, as shown in the following example where content now exposes a sidebar and primary block for overriding, or the child template could override content all together.
// funky-layout.jade
extends layout
block content
.sidebar
block sidebar
p nothing
.primary
block primary
p nothing
For the rest of the changes and bug fixes check out the changelog.
Stylus 0.16.0
Fewer changes than the latest Jade however still some good ones!
:= operator
This new operator is an alias of ?= operator, because I think ?= is difficult to read in large quantities for configuration etc:
grid-columns ?= 16
grid-column-width ?= 40px
grid-gutter-width ?= 20px
extra-space ?= 40px
grid-columns := 16
grid-column-width := 40px
grid-gutter-width := 20px
extra-space := 40px
Adjusting color lightness
While the lighten(color, amount) and darken(color, amount) BIFs are still available, the + and - operators now provide the same functionality when used with percentages as illustrated below:
lighten(black, 50%)
// => #808080
black + 50%
// => #808080
fade-in() & fade-out() BIFs
These small built-in functions are defined in stylus as the following to adjust the opacity:
// decerase opacity by amount
fade-out(color, amount)
color - rgba(black, amount)
// increase opacity by amount
fade-in(color, amount)
color + rgba(black, amount)
For example:
fade-out(#eee, .5)
// => rgba(238,238,238,0.50);
fade-out(fade-out(#eee, .3), .5)
// => rgba(238,238,238,0.20);
Check out the changelog for the other bugfixes and additions.
Stylus 0.15.1 - new property reference & @keyframes fabrication features
Stylus 0.15.x adds a bunch of cool new functionality as well as some important bug fixes.
@keyframes fabrication
The new keyframes fabrication support automatically duplicates your @keyframes definitions to support vendor prefixes. Note that this is only a default, as shown below:
@-moz-keyframes foo {
0% {
color: #000;
}
100% {
color: #fff;
}
}
@-webkit-keyframes foo {
0% {
color: #000;
}
100% {
color: #fff;
}
}
@keyframes foo {
0% {
color: #000;
}
100% {
color: #fff;
}
}
one can tweak this functionality using the vendors list as shown in the following snippet which will only expand to the -webkit- vendor prefix.
vendors = moz official
@keyframes foo {
from {
color: black
}
to {
color: white
}
}
The vendors property may be utilized more in the future, and perhaps in frameworks like “nib” to unify configuration.
Property reference
The syntax @<property> has been introduced to reference values of existing properties. For example if you want to re-use values, you may typically do something like below instead of typing the value several times, also allowing you to use functions with w.
.button
width: w = 50px
height: w
The new property reference syntax allows you to treat properties as variables, which can also be accessed within mixins:
.button
width: 50px
height: @width
Comment compilation
When the compress option is true Stylus will not output single-line nor multi-line comments, which are commonly found used for licensing in stylesheet frameworks etc, so it’s useful to strip these out however you can now force output with the ! character /*!.
New built-in functions
The math functions cos() and sin() were added, as well as exposing PI.
Bug fixes
