I chose NPM as my package manager since it comes bundled with node and so I decided to try out NPM workspaces as my MonoRepo approach.

So here are my takeaways

1. Setup

• The NPM workspaces Monorepo has one root dir with one package.json which defines the workspaces, but besides this it is more or less empty. The package.json defines a workspace directory which contains the sub projects.
  As of now you can’t use npm init for this but have to create the main package.json manually.

  "name": "workspaces-example",
  "workspaces": [
    "packages/*"
  ],

• The sub projects each have their own package.json with all necessary dependencies for this specific project. The sub projects can be initialised by npm init -w packages/cli
• To add dependencies you can add the workspace to the npm add command and the dependency will be added to the respective package.json:
  npm add commander -w packages/cli
  To install dependencies, run npm i from the root directory. This will install all deps of all workspaces in a node_modules folder in the root directory, but none in the projects in the workspaces folder. This already is a win because it will avoid having dependency duplettes.
  However if you have conflicting versions of the same dependency in your packages, you will have a separate node_modules directory with the only the specific version for this single package.

2. Development

• Updating dependencies can happen just like adding dependencies:
  npm update commander -w packages/cli
• When you need different versions of a dependency in your workspaces, NPM will create a new node_modules folder in the one divergating workspace with only the dependency where you have the different version.
• When you need to share code between workspaces you can import code from one package of the workspaces in another package just as a normal dependency from the NPM registry.
  For example when you want to share types in a typescript project you can add a types workspace and just import in the other workspaces files.
  import {Name} from "types";
• It is probably good practice to add shortcut scripts to your main package.json to run commands of your workspaces. So you don’t need to change to the workspaces directory, which is of course still possible.

  "scripts": {
    "hello-cli": "npm --workspace=@workspaces-example/cli run hello",
    "hello-web": "npm --workspace=@workspaces-example/web run hello"
  }

3. Deploy

• Deploying from a Monrepo needs to take the different packages into account, which need to be deployed separately but from the same CI config.
  For Github Actions i used a path directive which changes to the package directory and runs instructions there.
  with:
path: packages/astro
• Other prefabricated actions like f.e. actions/deploy-pages have a
  working-directory: ./packages/astro
  directive which have the same effect.

You can check out the example project here: https://github.com/ivoba/npm-workspaces-example

One probably does not necessarily need a Monorepo for this example, but it is good to know that Monorepos are quite simple to achieve just with NPM, in case you need to.

So i wanted to try it myself and migrated a former gulp build to esbuild.

But as it showed the gulp build was not so modern, as it was just Sass and Javascript minification. No ES6, No React, no JSX with inline styles.

So Esbuild was not working out of the box but needed some extra config and the Sass plugin.

npm i -d esbuild esbuild-plugin-sass

Also I had to rewrite the Javascript to use ES6 modules, but this was fortunatly easy.

When using a plugin we need to create our own build file and configure esbuild to use the Sass plugin.
esbuild.js:

const esbuild = require('esbuild');
const sassPlugin = require('esbuild-plugin-sass');

esbuild.build({
  entryPoints: ["main.js"],
  bundle: true,
  minify: true,
  format: 'iife',
  platform: 'browser',
  outfile:"main.min.js",
  plugins: [sassPlugin()]
}).catch((err) => {
  console.log(err)
})

Ok, but where are the Sass files now?
With ES6 you can import styles and then esbuild & the sassPlugin can follow this path from the entrypoint file and create the CSS file from the source Sass file.

So in main.js import the styles:

import $ from 'jquery'
import './style.scss'
...

Now you can call the esbuild.js file:

node ./esbuild.js

(Yeah no file watchers here, just manual trigger ;))

This will bundle the javascript to main.min.js and also create a main.min.css file.

Then include this in your HTML

<link rel="stylesheet" href="/main.min.css"> 
<script src="/main.min.js"></script>

and you are done. :)

Try this gist!

First create your bower.json file and run bower install

{
  "name": "bower-masonry-imagesloaded-requirejs",
  "version": "0.0.0",
  "dependencies": {
    "requirejs": "~2.1.8",
    "jquery": "~1.10.2",
    "masonry": "~3.1.2",
    "imagesloaded": "~3.0.4"
  }
}

Then configure require.js

require.config({
    paths: {
        jquery: '../bower_components/jquery/jquery',
        eventie: '../bower_components/eventie',
        'doc-ready': '../bower_components/doc-ready',
        eventEmitter: '../bower_components/eventEmitter',
        'get-style-property': '../bower_components/get-style-property',
        'get-size': '../bower_components/get-size',
        'matches-selector': '../bower_components/matches-selector',
        outlayer: '../bower_components/outlayer',
        masonry: '../bower_components/masonry',
        imagesloaded: '../bower_components/imagesloaded'
    }
});

and then code the app:

define(['masonry/masonry', 'imagesloaded/imagesloaded'], function(Masonry, imagesLoaded) {
    $(document).ready(function() {
        var container = document.querySelector('#masonry');
        imagesLoaded(container, function() {
           var msnry = new Masonry(container, {
               columnWidth: 200,
                gutter: 20,
                itemSelector: '.item',
                isFitWidth: true
           });
             
       });
    });
});

Its scrabbled together from http://masonry.desandro.com/appendix.html and various StackOverflow posts.

http://jsfiddle.net/QMeuV/1/embedded/result/

Its hosted on jsfiddle.net and enables you to create Bookmarklets which use jQuery based on the code i found here:
http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/

It also features Javascript Syntax Highlighting using http://codemirror.net/.

*UPDATE*
this tool now (also) lives on https://github.com/gherkins/bookmarklet-generator

As I moved the code to github this week, I wanted to give a quick overview of the project and its technical underlyings, just in case someone might be interested :)

As the title of this post might already suggest, its about selecting and layering loops from audiofiles hosted on soundcloud.com and thereby creating new music.

Those collections of layered loops are called a session. Sessions can be created anonymously by everyone and are auto-saved on every action. By distributing the URL of a session other users can join and every action is synced between all users in realtime.
(complete mayhem, indeed :)

The application is built with HTML5 and JS w/ jQuery using the soundcloud API on the client side and runs on node.js & mongoDB with express, socket.io and mongoose on the server side.

I basically started the project to find out if you could play multiple loops asynchronous and synced with low latency using the Web Audio API while collaboratively working together with multiple users in realtime. 

As that turned out to be not only possible but performed real nicely, the experiment then developed in somewhat of an application and finally got a name and a face.

There’s a whole lot of things i’d like to implement / refactor and do when i get some time on my hands, as

– adding a “record” feature to record, save and export created sessions as audiofiles

– rewriting the client side with backbone.js (as things got a bit messy …)

– adding some audio effects to the tracks

– write some tests

I’d appreciate any form of contribution as much as any questions or feedback on the project :)

Feel free to check out the live version at  http://mashcloud.net/ or the sources at https://github.com/gherkins/mashcloud

(If there is more extensive documentation available concerning assetic + CompassFilter, please stop reading on and let me know!)

If you take a look at the filter class itself (it is CompassFilter in the generic Assetic\Filter namespace), you should recognise several option values that you can use in your application wide config.yml file.

But first you have to install the framework plugin following these instructions.

After adding the framework plugin by ruby’s own package manager “gem” (hopefully replaced by composer in the near future ;-)) by typing something like

$ gem install zurb-foundation

the only thing remaining to do is to load the framework plugin by assetic. To do so, put the folloging lines to your config.yml assetic section (as you would do it when using the compass command line interface, refer to the output of

$ compass help compile

.)

The yaml file should look like this:

assetic:
    read_from: %kernel.root_dir%/web
    debug: %kernel.debug%
    use_controller: %kernel.debug%
    filters:
        compass:
            plugins: ['zurb-foundation'] 
            # load foundation                                     
            # framework as you would do by typing
            # $ compass compile --require 
            # zurb-foundation [...]
            # [ ... ]

Now you should be able to import the foundation library files by using the @import statement in your *.sass/*.scss files:

@import "foundation";

Have fun!

Starting with Apache and mod_proxy, i ended up with a plain node solution, which i really like.

Let’s take a quick look on some different approaches out there:

—1—

Using apache on port 80 as a proxy

ProxyPass /nodeurls/ http://localhost:9000/
ProxyPassReverse /nodeurls/ http://localhost:9000/

via stackoverflow

— no websockets
++ probably the easiest way to integrate with your running AMPP-stack

—2—

Using a node.js app on port 80 as a Wrapper for other node apps.

express.createServer()
  .use(express.vhost('hostname1.com', require('/path/to/hostname1').app)
  .use(express.vhost('hostname2.com', require('/path/to/hostname2').app)
.listen(80)

via stackoverflow

++ you can use websockets on port 80
— apps crash/restart/stop globally
–what about your apache or the like?

—3—

Using node.js with node-http-proxy on port 80

var http = require('http')
, httpProxy = require('http-proxy');

httpProxy.createServer({
  hostnameOnly: true,
  router: {
    //web-development.cc
    'www.my-domain.com': '127.0.0.1:3001',
    'www.my-other-domain.de' : '127.0.0.1:3002'
  }
}).listen(80);

++ proxy websockets to any port
— you might need to move your old web server to another port

The really cool thing about using node-http-proxy is its capability of proxying websockets.
So you can have your apps running independtly on different ports while serving everything to the user over port 80 and use stuff like socket.io.

Since i’m new to node.js and miles away from beeing a admin, any feedback is highly appreciated :)

jsPerf

Its basically a online benchmark tool for testing different approaches in javascript.
It covers some important aspects of benchmarking, that your homemade bench probably wont have like milliseconds accuracy & statistical analysis.
The tests are run on your browser and the results will feed the “browserscope”. A graph of the “highest known results” for the participating browsers.
So we can see some kind of comparison.

Almost all classic concurrent approaches are covered, my favorites are:

String concatenation

JavaScript Template Engines, in this revision its: juicer, mustache, ejohn, kissy, nTenjin
( yes it has revisions :) )

switchClass OR removeClass and addClass

fastest jQuery selectors to remove class

See if you can find some, you struggled with lately:
http://jsperf.com/browse

JsPerf has some further interesting options like
autorun
append #run to the URL of the test case

filters for the browserscope
filters are: popular, all, desktop, family, major, minor, mobile, prerelease

chart types of browserscope
append #chart=table to the test case’s URL
types are: bar(default), table, column, line, and pie

Give it a try, daily!

Here are some things that come real hany when you are working with jade.

This one really saved my mental health in more than one case.
Just paste your HTML and you get nice and clean jade code:

http://html2jade.aaron-powell.com/

If you are using Netbeans, make sure you don’t miss to install the beautifully working plugin for .jade files.

https://github.com/lumenlunae/jade-netbeans-syntax-highlighting

If you are developing in PHP and want to check out jade anyway, check this out:

No seriously, check THIS:

https://github.com/everzet/jade.php

I’m running OSX 10.7.3 with macports which usually does the job, but  Google’s V8 Javascript Engine is not available as a port yet.

So… homebrew to the rescue:

installed it:

/usr/bin/ruby -e "$(/usr/bin/curl -fsSL https://raw.github.com/gist/323731)"

and installed v8

brew install v8

wait, this seems too easy.

PECL installed some beta version of the PHP extension.

sudo pecl install channel://pecl.php.net/v8js-0.1.2

added

extension=v8js.so

to the php.ini file.

und bitteschön:

$v8 = new V8Js();
var_dump($v8->executeString("

//hey i'm Javascript Code

//INSIDE PHP !

//wow.
var hello = 'Hallo';

function helloWorld( string ){
return hello + ' ' + string;
}

helloWorld('World');

"));

Such things might come in handy one day, you know.