Lineman helps you build fat-client JavaScript apps #

As more and more web application logic moves into the browser, better tools are needed to manage the front-end development process.

Enter Lineman, which harnesses the power of Node.js and Grunt to compile your assets, run specs when you save files, deploy your app, and perform a host of other helpful tasks for you.

Lineman is a combination productivity tool and build tool. It has templates for many popular JavaScript frameworks (Backbone, Angular, Ember, etc.), and makes testing super easy by including Testem, which is a powerful test runner.

Interested, but not ready to npm install -g lineman quite yet? Check out the demo screencast first!

Lineman — a project by Test Double — is MIT licensed and hosted on GitHub.

#91: Discover Meteor.js with Sacha Greif

Adam Stacoviak and Andrew Thorp talk with Sacha Greif about his new book Discover Meteor, Meteor.js, sustaining open source and more. You can tune-in LIVE on Tuesday’s at 5pm CST. SachaGreif.com Discover Meteor – Learn how to build real-time JavaScript web apps Telescope, an open-source social news app built with Meteor DiscoverMeteor/Microscope · GitHub Sidebar: […]

Heckle, the Jekyll clone in node.js #

The why:

I like the approach to managing a site taken by Jekyll. A lot.

I don’t like Ruby, and I don’t like strict logic-less templates. Jekyll is Ruby with Liquid as the templating engine.

Heckle is JavaScript with Mold (programmable template extravaganza) as the templating engine.

If you feel how Marijn feels and you don’t like Ruby, or strict logic-less templates — you should checkout Heckle. Marijn also asks that you not use Heckle at this point IF you want something stable and finished. It’s a work in progress.

Check out the source, or learn more about Heckle’s origins.

Moment.js is a Swiss Army Knife for dealing with Time in JavaScript #

Judging from how many stars Moment.js has garnered on GitHub, you may already know about it. But for those who haven’t, Moment.js is Tim Wood’s highly polished and well-documented JavaScript library for parsing, validating, manipulating, and formatting dates.

It runs in the browser or Node.js, supports many languages, has a great API, and has saved this Changelogger countless hours over the years. Here are a few example uses from the project’s homepage:

moment().startOf('day').fromNow();
moment().add('days', 10).calendar();
moment().format("MMM Do YY");

The library weighs in at just 5.5kb and recently reached version 2.0, so if you haven’t looked at it in awhile now’s the time to check it out once again!

Bring your server side debug logging into the browser with Chrome Logger #

If you find yourself jumping back and forth between Chrome’s Dev Tools and a terminal displaying your server side request logs, Craig Campbell’s Chrome Logger might be just the thing you need!

It’s a Chrome extension which lets you see your server side logs right in the browser. There are currently libraries for:

Is your server side language/environment of choice not on that list? Don’t worry, Chrome Logger uses an open and published protocol so you can easily write client libraries of your own!

See the project’s home page for more info or check under the hood if you’re curious about how it all works.

Chart.js — Beautiful client side graphs to visualise your data using HTML5 canvas #

Chart.js

Sexy charts can really make a good data driven UI that much better. One thing that designers struggle with is creating sexy charts and graphs that their developer counterparts can actually implement without having to write it all from scratch.

Chart.js, from Nick Browne, makes it easy to visualize your data using HTML’s <canvas> tag and create great looking charts that are fully customizable. With 6 charts to choose from — you’re able to visualise your data with various animated charts that look great on retina displays too.

Check out the source and the docs to get up to speed. There’s a node port too.

Mantri.js is a new JavaScript Dependency System #

Thanasis Polychronak has released a new JavaScript Dependency System called Mantri. You may be asking yourself, why create yet another JavaScript Dependency System? Well, straight from the home page:

Medium to Large web applications require a robust system to manage their dependencies. While module loaders excel at interoperating with external libraries, they can become difficult to work with when used as dependency systems. A new system should allow the code to be easily tested, debuged and get out of the way after the build process. Meet Mantri!

A few quick points:

  • It leverages Namespaces
  • It’s written in Node and is available in the npm registry
  • There is a grunt plugin (although it’s recommended to install the CLI)
  • Mantri leaves no footprint in production
  • … And more!

Instead of writing up another Getting Started, I would rather point you to the website for Mantri! He did a great job writing a getting started article, as well as documenting the API.

As usual, you can view the homepage or view the source on GitHub.

otr.js: Off The Record Protocol in JavaScript #

Before we talk about otr.js, we have to talk about crypto in JavaScript. It’s important to discuss issues with cryptography, because bugs are much more severe than in ‘normal’ code. If your Rails app has a bug, maybe some emails don’t get sent out. If your crypto has a flow, your secrets are all wide open.

So, before discussing a JavaScript crypto library, I must point you to the first line of the README:

This library hasn’t been properly vetted by security researchers. Do not use in life and death situations!

Furthermore, for more on the issues of crypto and JavaScript specifically, I refer you to this post by Matasano Security, whose opinions I trust when it comes to security.


Okay, now that we’ve got that out of the way, let’s talk about otr.js! OTR is a protocol which allows you to have private conversations over IM. As you may guess, otr.js is an implementation of this protocol in JavaScript.

There’s a lot of setup required, so please read the README, but once you’ve got it set up, it’s pretty easy to use:

var newmsg = "Message to userA."
buddy.sendMsg(newmsg)

Not that hard, right? There’s a ton of different options, though they are pretty well-documented. What is odd though, is that apparently messages aren’t encrypted at first; you must call

buddy.sendQueryMsg()

to make that happen. I believe this is because the OTR protocol itself allows for unencrypted messages, and otr.js seems to be a lower-level library that others will build upon, rather than something you’d use directly.

Why the future of the web is real-time (6 months w/ Meteor)

Special thanks to Sacha Greif for contributing this post. It originally appeared here on The Changelog. When Meteor was first announced in April 2012, the announcement’s Hacker News thread quickly rose to the first spot on the homepage and remained there for a good while. It ended up being one of the site’s most popular […]

Install Node.js and npm using Homebrew on OS X

If you’re looking for an easy to follow guide on installing Node.js and npm on OS X, the default method is to download a pre-built installer for your platform, install it, and make sure it’s on your $PATH. But, if you’re a Homebrew fan like me and prefer to install all of your packages with […]

to-markdown is an HTML to Markdown converter written in JavaScript #

From the readme:

There are a couple of known issues surrounding blockquotes in lists (and perhaps vice versa) — #2; and also how to handle HTML elements outside of the markdown subset (keep them/strip them?) — #3.

But this looks like a useful HTML to Markdown converter written in JavaScript. While this might just be a basic implementation that’s not yet fully bulletproof, creator Dom Christie says, “contributions are welcome.”

Check out the source on GitHub and the hosted demo that lets you paste in HTML and get back the Markdown output.

JWalk, a command-line JSON inspector #

Sometimes inspecting JSON files can be a huge pain, which is exactly why Nate Kohari is created JWalk, a tiny NPM package that makes JSON inspection incredibly simple. First we will need a file to work with, if you don’t have one, simply run this at the command line to get some of our tweets @thechangelog in JSON format.

> curl -G -d count=5 -d include_rts=1 http://api.twitter.com/1/statuses/user_timeline/thechangelog.json > sample.json

You will need node.js and NPM installed to use JWalk, but the setup process is simple:

> npm -g install coffee-script
> npm -g install jwalk

After installing jwalk, start up an interactive session (using our sample JSON file):

> jwalk sample.json

The command set is limited, but it amounts to exactly what you need for inspection:

  • cd: jump into a specific node
  • ls: view the contents of the current node
  • exit: leave the session

For example, if you want to see the text of the first tweet returned from our cURL:

> cd 0
> cd text
> ls

Bower is a package manager for the web #

I have yet to use this, considering I just found out about this project this evening. I had actually stumbled onto this project after stumbling onto Nicolas Gallagher’s little collection of utility CSS classes called SUIT.

When looking at SUIT, I noticed something different in its installation instructions bower install suit-utils which I found a bit odd cause SUIT is just a CSS library, not a Ruby Gem or something dynamic … so why the CLI install instruction?

Similar to Ruby’s Gemfile or Node’s package.json

Bower is a package manager for the web. But what does that mean? Similar to Ruby’s Gemfile or Node’s package.json, with Bower you can create a component.json file in your project’s root, specifying all of its dependencies.

Right now, when you are managing dependencies in your projects, such as JavaScript libraries, it’s all manual. Bower aims to change that.

Basically, Bower is a generic tool which resolves dependencies and locks down packages to a version. It runs over Git, and is package-agnostic. A package may contain JavaScript, CSS, images, or whatever and it doesn’t rely on any particular transport and lets you easily install those assets and manages dependencies for you.

Usage

Bower can install packages by name, Git endpoint, URL or local path. Here are a few examples:

bower install jquery
bower install git://github.com/maccman/package-jquery.git
bower install http://code.jquery.com/jquery-1.7.2.js
bower install ./repos/jquery

Build Status

For more details checkout Bower’s homepage or dive into the source code.

Hyperspider – Declarative HATEOAS API crawler for Node.js #

Interesting project from Jed Schmidt to roll up resources in hypertext APIs:

Give it a list of url patterns, and it will recursively crawl your hypertext HTTP API, streaming back every matching endpoint.

var hyperspider = require("hyperspider")

var options = {
  host: "mytwitterclone.biz",
  path: [
    "/users/jed",
    "/users/jed/following",
    "/users/*"
  ]
})

hyperspider(options, function(err, data) {
  // data is an array with the result entities of 6 endpoints:
  // 1. /users/jedschmidt
  // 2. /users/jedschmidt/following
  // 3. /users/janl
  // 4. /users/cramforce
  // 5. /users/hblank
  // 6. /users/theophani
})

Source on GitHub.

Nodefront – Node.js-powered rapid front-end development utility #

Nodefront from Karthik Viswanathan aims to make a front-end developer’s life easier. Built in Node.js, Nodefront bundles a local web server for serving up HTML, CSS, and JavaScript assets and supports live reloading via web sockets. Additionally it ships with a command line interface:

  • nodefront compile – Compiles Jade and Stylus files to HTML and CSS. Can compile upon modification, serve files on localhost, and even automatically refresh the browser/styles when files are changed.

  • nodefront fetch – Automatically fetches CSS/JS libraries for use in your project. Provides an interactive mode to add new libraries.

  • nodefront insert – Inserts CSS/JS libraries directly into your HTML or Jade files.

  • nodefront minify – Minifies CSS and JS files. Can also optimize JPG and PNG images.

Karthik has put together a twenty minute screencast for a full demonstration.

Check out the project web site or source on GitHub for more.

Episode 0.8.3 – Cloud 9 IDE with Ruben Daniels and Matt Pardee

Wynn caught up with Ruben and Matt from Cloud 9 to talk about what’s new with their IDE in the cloud. Items mentioned in the show: Ruben Daniels is the CEO of Cloud9. Matt Pardee is a developer & evangelist for Cloud9. Tim Caswell was on a previous episode is an employee at Cloud9. Cloud9 […]

Nodist – Node version manager for Windows #

Nodist from Marcel Klehr aims to be an easy way to switch between Node.js versions on Windows. Inspired by TJ’s n and aiming to improve on nvmw’s global-only switching, Nodist ships with a nice command line interface:

Usage:

    nodist                         List all installed node versions.
    nodist list
    nodist ls

    nodist <version>               Use the specified node version globally (downloads the executable, if necessary).
    nodist latest                  Use the latest available node version globally (downloads the executable, if necessary).

    nodist add <version>           Download the specified node version.
    nodist + <version>

    nodist run <version> -- <file> Run <file> with the specified node version (downloads the executable, if necessary).
    nodist r <version> -- <file>

    nodist rm <version>            Uninstall the specified node version.
    nodist - <version>

    nodist --help                  Display this help

    nodist -v                      Display nodist version

Examples:

    nodist 0.8.1                   Use node v0.8.1 globally
    nodist v0.5.10                 Use node v0.5.10 globally
    nodist r 0.8.1 -- foo.js -s    Run `foo.js -s` with node v0.8.1, regardless of the global version
    nodist - 0.5.10                Uninstall node v0.5.10

See the README for installation and usage.

Jam – JavaScript package management for the browser #

Caolan McMahon, the creator of Async, has released a new project called Jam. After using this project for a short while, I can say this project has huge potential. It is a package management tool that allows you to install, use and compile (minify) JavaScript libraries. Jam is a browser-focused project that uses RequireJS (AMD Modules) to load your website’s requirements.

Installation is simple:

npm install -g jamjs

Likewise, installing libraries is easy:

jam install jquery

Finally, you use the RequireJS to include the libraries:

<script src="jam/require.js"></script>
<script>
  require(['query'], function($){
    console.log("jQuery loaded!");
  });
</script>

One of the coolest features is the compilation, which will package all (optionally a specific set) of your libraries with RequireJS and allow you to load the optimized library as one optimized file.

jam compile jam/compiled.min.js

Then include compiled.min.js instead of require.js, the rest works like before:

<script src="jam/compiled.min.js"></script>
<script>
  require(['query'], function($){
    console.log("optimized jQuery loaded!");
  });
</script>

If you have a library you would like added as a package, feel free to fork the project and add it in. If, in the process, you run into conflicts or issues with NPM’s package.json, Caolan wants to hear about it!

Head on over to the project page or browse the source on GitHub.

Grunt, a command line build tool for JavaScript #

Grunt is a project that allows you to use JavaScript to configure and run command line tasks. It is installed as an npm module, and very simple to get started with. If you have Node.js and npm installed, simply run:

npm install -g grunt

Some of the common tasks include: JavaScript Lint, QUnit,
minify, JSHint and file concatenation.

Any project that has grunt.js in it’s root (or subdirectories) can use grunt tasks. An example configuration to use grunt lint:

module.exports = function(grunt){
  grunt.initConfig({
    lint: {
      all: ['grunt.js', 'lib/**/*.js''test/**/*.js']
    }
  });
};

Whenever you run grunt lint in this project, the array of files (grunt.js, every JavaScript file in lib/ and every JavaScript file in test/) will be run through JavaScript Lint.

For some extra grunts and giggles, you can checkout grunt’s own gruntfile. They showcase some common uses and are very self explanatory.

As a disclaimer, grunt is currently in beta, and could possibly (will probably) change before 1.0. The good news is the changes will be based on your feedback. Head on over to GitHub to browse the source code and help get this project to it’s final release!

#80: Lua, Luvit, want some more of it, with Tim Caswell

Wynn caught up with Tim Caswell to talk about Luvit, his new project that provides Lua bindings for libuv. Items mentioned in the show: Adam is recently hitched to the lovely Heather. Tim Caswell is a long time friend of the show, creator of the How to Node blog. Lua is a powerful, fast, lightweight, […]

markx – Convert Markdown, Jade, and more to static HTML with Node.js #

Markx from Greg Allen is a command line tool for creating static web sites from Markdown and Jade and includes built in live preview and syntax highlighting.

# convert markdown and code blocks to html
$ markx blog.md > blog.html

# convert jade to html
$ markx index.jade > index.html

# convert markdown with jade template to html
$ markx --template template.jade blog.md > blog.html

# live preview of your markdown file
$ markx --preview 8001 blog.md

# live preview of your markdown file with a custom header/footer
$ markx --preview 8001 --head head.html --foot foot.html blog.md

Syntax highlighting is provided by Ivan Sagalaev’s Highlight.js which supports most of the usual suspects.

Check the source on GitHub for installation and usage.