Collab.js 0.4.0 is out

I’m glad to announce that a new version of collab.js (0.4.0) has been released today.

The build focuses on the following features:

  • Angular.js as the core client-side framework
  • Migration to Bootstrap 3.0.3
  • Upgrade of Font Awesome to version 4.0.3
  • SSL support
  • New card layout for user posts
  • Development process enhancements (configurations for JSHint, Grunt, Karma, etc)

Please refer to release notes for the full list of features and enhancements.

Card layout

With version 0.4.0 collab.js introduces card layout for user posts instead of a plain single-column list. New layout is highly responsive and automatically changes amount of columns based on available screen size. For example on large widescreen displays users may get 4 or more columns, 3 columns on tablets and single column on smartphones.


click to enlarge


Inline comments

All comments are displayed inline and are updated every time user expands corresponding area. Every card automatically enlarges and shrinks upon comments being toggled. For large amount of entries a scrollbar is enabled:


Contextual options

Every card entry has a menu with contextual options. It gets displayed as soon as user hovers mouse cursor over the card and provides access to various options.

Context menu

As of version 0.4.0 only ‘Mute post’ action is available for end users. The list of available commands will keep expanding within upcoming versions of collab.js.

Context Menu

New ‘Login’ and ‘Sign Up’ pages

Version 0.4.0 features completely new mobile-friendly ‘Login’ and ‘Sign Up’ pages.


Sign Up

Menu bar enhancements

With version 0.4.0 global sidebar element has been deprecated in favor of top menu bar that is more efficient when running collab.js on smaller screens (i.e. tablets or smartphones). Menu bar got better selection indication, access to search lists (dynamically updated dropdown menu) and enhanced settings menu:

Search Lists

Settings Menu


There was also a set of development process enhancements:

  • Grunt task runner support (used to minify CSS files, also performs minification and concatenation of JS files for production mode)
  • Custom JSHint configuration (used to share JSHint settings when using multiple platforms for testing and development)
  • Karma test runner configuration (initial configuration required to run client-side tests)

Full source code can be found here.


Announcing Masonry for node.js

I’m happy to announce that node.js version of ‘Masonry’ framework (branded as collab.js) has landed it’s GitHub repository.

Masonry is a starter kit for social-enabled web applications. To get more details about Masonry starter kit for ASP.NET MVC4 please refer to the following article.

Supported environments

Masonry.js supports both OSX and Windows development environments. In addition it contains support for Microsoft WebMatrix 2 for development and deployment/publishing, and uses only those NPM modules that do not require manual compilation steps in order to run on either OSX x64 or Windows 7 x64 systems.

Supported databases

Masonry.js features extensible provider-based model for data layer. It is extremely easy writing custom data providers or switching between them. At the moment of writing this article the following database engines are supported out-of-box:

  • Microsoft SQL Server
  • MySQL Server

Providers for Azure SQL, MongoDb and SQLite are in progress and will appear pretty soon.

Simple code maintenance

The Node.js version of Masonry provides a better code partitioning with the benefit of keeping the core implementation and modules up-to-date with less effort. Masonry views, routes and controllers are kept separately to avoid interference with your development process.

Great level of extensibility

With node.js and JavaScript you get extensibility for nearly everything out of box. With node.js you don’t need binary compilation of the project and so don’t need complex plugin layers with always limited APIs for discovery and initialization of extensions at run time.

In order to reduce the need modifying core Masonry files there is a set of lightweight contracts (via configuration files) to modify or extend key parts of the UI like brand/copyright information, sidebar/header links, etc. That means less time can be spent to keep Masonry up-to-date and more time for your own features.

Separate presentation and web api layers

The frontend is separated with a plain presentation layer and web api’s – set of RESTful services with JSON output by default. It becomes extremely easy switching between presentation layers and rendering engines, or building  completely different clients on the top of existing RESTful endpoints.

And many more…

You should expect more features and details soon. Meanwhile feel free raising issues and/or suggestions here.