March 2013
0 posts
13 tags
Modular CSS preprocessing with rework
Several months ago I started a project named Rework, a very fast, simple, flexible, and modular CSS preprocessor. The biggest and most obvious question I get is how this tool compares to something like Stylus, LESS, or Sass, and why would you want to use it.
The simple answer is that Rework caters to a different audience, and provide you the flexibility to craft the preprocessor you want, not...
February 2013
3 posts
6 tags
December 2012
5 posts
2 tags
3 tags
Modular web applications with Node.js and Express →
This short screencast describes how you can use Express’ app mounting feature to create modular self-contained applications to construct your product.
4 tags
Creating components screencast →
This screencast walks through creation of web components and some fundamentals driving the movement. Improve your client-side workflow and help us build a strong foundation for the web!
4 tags
Web components introduction screencast →
An introduction into using the javascript implementation of components, walking through a quick example of how you might integrate them into your application. Note that this is the node implementation only, in the future hopefully we’ll have python, ruby, java, etcetera tools as well, all consuming the same things.
3 tags
Building a date picker component
First install component(1) with npm:
$ npm install -g component
Or if you don’t have node installed at all, on OSX execute:
$ (cd /usr/local && \
curl -L# http://nodejs.org/dist/v0.8.15/node-v0.8.15-darwin-x86.tar.gz \
| tar -zx --strip 1) \
&& npm install -g component \
&& printf "installed component(1) %s\n" $(component --version)
Next you’ll...
November 2012
1 post
4 tags
Monitoring processes with mon
mon is an extremely small, simple, and light-weight
alternative to monit for monitoring processes. Monit’s approach
of using a DSL is at times inflexible
and often annoying. Mon’s approach is to monitor only a single process, monitoring of several
require a mon instance per process, however reducing single points of failure.
This may sound like it’s a lot of work to manage,...
October 2012
2 posts
2 tags
Express 3.0
Express 3.0 is here (finally) and while it is mostly a refinement release,
between it and Connect 2.x there are some helpful new features. Sorry
for the massive delay! Been busy and wanted to get a reasonable amount
of documentation up on expressjs.com before
releasing, more docs will be coming soon.
Keep in mind that the goal of Express is to aid you with HTTP, not
to become a...
4 tags
September 2012
1 post
August 2012
3 posts
3 tags
Mocha 1.4.0
This is another relatively small release but still has some goodies!
.only()
By appending .only() Mocha will generate an internal .grep() call for you. This is very useful if you have a regression and a test-case fails. Instead of moving the test-case and associated code out in order to debug you can simply invoke it.only(title, callback) (for the BDD UI) and Mocha will ignore all others....
4 tags
2 tags
July 2012
4 posts
5 tags
Components
With the advent of numerous client-side JavaScript package managers, I wanted to write up some of my thoughts about the fragmentation that we have today, and some ways that I think we could really improve delivering packages a community. Keep in mind that these are only my opinions, everyone has done a great job and there’s a lot of cool work going on out there.
I think there are a few...
3 tags
git-extras introduction screencast
This screencast is an introduction to the git-extras project and covers the following commands:
git setup
git ignore
git summary
git effort
git changelog
git release
Git aliases
My personal git aliases as promised:
alias gd="git diff | mate"
alias ga="git add"
alias gbd="git branch -D"
alias gst="git status"
alias gca="git commit -a -m"
alias gm="git merge --no-ff"
alias gpt="git push...
2 tags
Page.js 1.2.0
Along with better API docs the page.js 1.2.0 is released, the client-side micro router.
The additions are subtle, the first is a ctx.querystring property exposing the query string, followed by the complimenting ctx.pathname to reference the ctx.path void of query string. @ovaillancourt also added support for passing query strings in the first place, which was arguably a bug, and added...
3 tags
Mocha 1.3.0
A relatively minor release this time but we’ve still got some cool new features!
Scrolling HTML reporter
The window will now scroll to follow along with larger test suites, and the statistics are fixed to the upper right-hand corner, a small but nice touch.
Custom reporters
Mocha has quite a few bundled reporters now, so future reporters that are not deemed important enough to provide...
June 2012
2 posts
1 tag
commander.c - C option parser
Every time I write a C program I end up rolling my own option parsing with a loop and strcmp(), so I figured it was time to port over commander.c from the original ruby commander, and there’s also a node.js port.
Commander.c is a super simple script that makes defining options declarative and does the dirty work for you, its usage looks like this:
#include <stdio.h>
#include...
4 tags
Mocha 1.2.0 - now with more nyan!
Nyan
@atsuya added an awesome new nyan reporter:
Client-side test initialization
You can now initialize a client-side test setup with the mocha init <path> command. This will copy over mocha.css, mocha.js and generate a default tests.html file for you.
Working browser example
A lot of people were asking for a working browser example to reference, so I added one to the bottom of...
May 2012
2 posts
3 tags
mocha 1.1.0
The Mocha javascript test framework version 1.1.0 is out. If you want a quick glance here’s the changelog:
Changelog
Added: check each mocha(1) arg for directories to walk
Added --recursive [tricknotes]
Added context for BDD [hokaccha]
Added styling for new clickable titles
Added clickable suite titles to HTML reporter
Added warning when strings are thrown as errors
Changed: green...
2 tags
mad(1) node.js pages
The node.js markdown documentation is now viewable in the terminal via mad(1):
Just use mad list to see which pages are available:
If you already have mad(1) installed simply run mad --update to grab these new pages, and view with mad node.http etc.
April 2012
3 posts
2 tags
Express 3.x alpha reference docs
Since I don’t have the Express 3.x site up yet I thought I would whip up a quick set of markdown docs from the source comments using dox.
To view these markdown docs in your terminal install mad(1):
$ cd /tmp && git clone --depth 1 git@github.com:visionmedia/mad.git && cd mad && make install
Update your mad-pages:
$ mad --update
Profit!
$ mad express
...
2 tags
Express 3.0.0 alpha1
I just released the first alpha, but beware! the documentation has not been updated. I wanted to defer a release until I had time to re-write the site, but meanwhile people have been using the master branch anyway, so we might as well make it official (and available via npm).
The alpha is by no means complete, some features still need adjusting, though mainly internal refactoring. The wiki...
2 tags
Going mad(1)
mad(1) is a tiny tool that allows you to view markdown manual pages. I’m a huge fan of man in general, but the format is pretty annoying and often converted from markdown, textile etc anyway. The output man produces is also pretty bad in my opinion, mainly whitespace issues.
This is just a quick 5 minute hack so follow if you’re interested or open an issue if you have some ideas!...
March 2012
4 posts
3 tags
Mocha 1.0
The Mocha JavaScript test framework has hit 1.0 with a bunch of great contributions from the community, here’s the change log:
Added js API. Closes #265
Added: initial run of tests with --watch. Closes #345
Added: mark location as a global on the CS. Closes #311
Added markdown reporter (github flavour)
Added: scrolling menu to coverage.html. Closes #335
Added source line to html...
4 tags
Redis Lua scripting is badass
Roughly a year ago Salvatore Sanfilippo the author of Redis
wrote a blog post
discussing the inclusion of Lua as a scripting language. I
finally decided to try this out, and let’s just say it’s pretty badass.
Lua is a great fit for Redis, they have similar philosophies, being simple,
small, and fast. Suppose for example you have 200,000 jobs, each represented
in Redis as a...
3 tags
Mocha string diffs
Mocha 0.14.0 adds a single feature - string diffs! This is a small but very handy feature for some. When the strings are small, Mocha will use a character diff, when consisting of several lines a line-numbered “gutter” is added and a word diff is used as shown in the following image:
This is very useful when authoring things like template engines, transpilers, and other...
February 2012
2 posts
2 tags
Connect 2.0
Connect 2.0 is here with new core middleware, miscellaneous improvements, and some new docs.
var app = connect()
.use(connect.logger('dev'))
.use(connect.static('public'))
.use(function(req, res){
res.end('hello world\n');
})
app.listen(3000);
HTTP and HTTPS
Previously connect.Server inherited from Node’s core net.Server, this made it difficult to provide both HTTP and...
4 tags
Mocha test coverage
The latest release of Mocha adds two new reporters, now totaling 13 packaged with the library. The two new ones are “json-cov” and “html-cov”, the latter inherits from the former in order to produce a single-page test coverage report.
If you’re curious what a live example looks like, check out this page.
Setup
With Node’s require.paths array out of the...
January 2012
2 posts
3 tags
Stylus gets @extend
@extend is a great little feature which originated in SASS, and now finds a home in Stylus. If you’ve ever written CSS like this, you know it can become quite the pain to maintain large lists of selectors:
.message,
.warning,
.error {
font-size: 14px;
padding: 5px 10px;
border: 1px solid #eee;
border-radius: 5px;
}
.warning {
color: yellow;
}
.error {
color: red;
}
@extend...
December 2011
1 post
4 tags
Why Stylus is the most CSS-like high-level... →
This short Vimeo screencast illustrates why Stylus is the most like CSS as a stylesheet “preprocessor”. More on Stylus here.
November 2011
3 posts
node "debug" module →
2 tags
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...
Batman vs Pedophile (vigilante justice) →
September 2011
3 posts
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...
3 tags
Stylus 0.15.1 - new property reference &...
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%...
2 tags
Connect 1.7.0 - fast static file memory cache and...
Be sure to update Connect to the latest release 1.7.0 for the following goodies!
staticCache() middleware
1.7.0 now provides a new middleware named staticCache(), acting as a memory cache on top of the regular static() middleware. Older versions of Connect used to provide memory caching, however it was baked right into static(), bloating the middleware more than necessary.
Benchmarks
The...
August 2011
3 posts
3 tags
Game prototyping with JavaScript & CSS3
I wanted to share a quick few-hour game prototype to hopefully inspire a few people! The industry let-alone browser-based games seem very lacking in imagination and storytelling, or maybe I’m just not looking hard enough ;) but I miss games like Grim Fandango.
Below is a screenshot of the demo, consisting of several DOM nodes to represent parts of the main character, the birds, and the...
4 tags
commander.js - nodejs command-line interfaces made...
Commander.js is a small node.js module allowing you to define options and interacte with the user’s terminal in a simple and natural way, inspired by the Ruby library of the same name.
Features
self-documenting code
auto-generated help
combined short flags (“-abc” == “-a -b -c”)
option defaults
option coercion
command parsing
prompts
Example
A basic...
6 tags
Introducing Texty & Super Agent screencast
In this 20 minute screencast we dive into the full-text Redis search library reds for nodejs, an introduction to the canvas-only text editing library Texty, discussing how you can style canvas drawings with CSS, and the “ajax with less suck” library superagent.
July 2011
3 posts
3 tags
Reds - light-weight full text search for nodejs...
Reds (red-s) is a very small (~300LOC) light-weight full text search library for node.js.
I wrote reds with Kue in mind, a priority job queue for node. I wanted to add search capabilities so you can easily find jobs by any of the arbitrary data provided, names, emails, anything.
API
You can use reds for multiple isolated search indexes, which is why you must pass a key to reds.createSearch(),...
2 tags
Jade Mixins & Includes
The latest release of Jade 0.13.0 adds mixins and includes. Jade users have longed for some method of static include, so it’s (finally) here, and compliments mixins nicely, allowing you to store mixins in one or more separate files.
Mixins
A mixin definition takes the form mixin <name> [( params )] block, where params is identical to JavaScript function params, simply a list, as...
2 tags
The Luna programming language
A few weeks ago I started implementing Luna, an elegant, expressive, and embeddable language written in ANSI C, with performance as a primary focus. For now it’s just a side project, but I thought it would be fun to blog about the different aspects as they unfold, building languages is a really fun process.
Goals
The current goals of Luna are the following:
small, simple, expressive,...
June 2011
1 post
3 tags
Styling Canvas Drawings With CSS
Today I implemented an idea to style canvas elements with CSS, I’ve never personally seen this done, and it’s not always practical, but in some cases it would be very handy. For example a text selection api may be comprised of several “elements”, the text, the caret, the selection range rect etc.
Let’s say by default, our drawing will look the image below:
...
May 2011
2 posts
4 tags
node recap #2
JSONSelect
This first library is JSONSelect. This library allows you to query JSON using css selectors! this seems like an obvious one, but I haven’t personally seen any other implementations.
It’s not node-specific, however it is JavaScript, so naturally it works with nodejs as well, and over all it’s just a neat concept. Suppose we have the following JSON:
JSONSelect
...
1 tag
node recap
Figured I would whip up a quick blog post during lunch to mention some recent additions / releases to node projects.
Express Mongoose
Aaron recently released express-mongoose which is a fantastic plugin for any of you using Mongoose allowing you to pass query promises directly to res.render(), res.partial(), and `res.send() calls, deferring rendering until complete.
For example you may...
