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

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 :)

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.

Cross Browser Helper

Html 5 Validator (en)

http://html5.validator.nu/

Html5 Browser capability test (en)

http://html5test.com/

Html readyness – fancy browser comparison (en)

http://html5readiness.com/

Modernizr – Cross-Browser Html5 & CSS3 Support (en)

http://www.modernizr.com/

Html5Shiv – Html5 for IE (en)

http://code.google.com/p/html5shiv/

IE-7 js – Standard complient IE 7 (en)

http://code.google.com/p/ie7-js/

Html 5 CSS-Reset (en)

http://html5reset.org/
http://html5doctor.com/html-5-reset-stylesheet/

HTML 5 Boilerplate – Best Practices, Scripts und Server-Konfigurationen

http://html5boilerplate.com/ (en)
http://de.html5boilerplate.com/ (de)

Audio/Video

Html 5 Audio and Video – What you must know (en)

http://net.tutsplus.com/tutorials/html-css-techniques/html5-audio-and-video-what-you-must-know/

Video accessiblity (en)

http://wearehugh.com/public/2010/08/html5-video-accessibility/Your text to link…

Canvas

Reference Guide (de)

http://canvas.quaese.de/

Canvas beginners guides (en)

http://www.brighthub.com/internet/web-development/articles/38744.aspx
http://www.visitmix.com/Articles/Translating-CANVAS-with-HTML5

Canvas demos & tutorials (en)

http://www.canvasdemos.com/

Cookbooks & Tutorials

Html 5 cheatsheet

http://websitesetup.org/html5-cheat-sheet/

WHATWG Weblog (en)

http://blog.whatwg.org/

Html 5 laboratory (en)

http://www.html5laboratory.com/

Dive into Html 5 (en)

http://diveintohtml5.org/

Html5 Playground (en)

http://www.html5rocks.com/

Tag reference (en)

http://www.w3schools.com/html5/html5_reference.asp

Fancy tag reference (en)

http://joshduck.com/periodic-table.html

Html5 Techniques – Ultimate collection of tutorials (en)

http://www.tutoriallounge.com/2010/11/html5-techniques-ultimate-collection-of-tutorials/

Useful html 5 code snippets (en)

http://www.onextrapixel.com/2010/11/15/useful-html5-code-snippets-you-can-use-today/

Geolocation using the Google API (en)

http://papermashup.com/html5-geo-location-using-the-google-api/

Fun with html5 forms

http://thinkvitamin.com/code/fun-with-html5-forms/

Blog-Artikel & andere Quellen

Webkrauts Artikel zum Thema (de)

http://www.webkrauts.de/category/html5-einfuehrung/

What beautiful Html5 code looks like (en)

http://css-tricks.com/what-beautiful-html-code-looks-like/

48 Flash killing HTML 5 demos (en)

http://www.hongkiat.com/blog/48-excellent-html5-demos/

HTML 5 facts & myths (en)

http://www.smashingmagazine.com/2010/09/23/html5-the-facts-and-the-myths/

Learning to love html 5 (en)

http://www.smashingmagazine.com/2010/11/10/learning-to-love-html5/

Designing a html 5 layout from scratch (en)

http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

Bedient man sich herkömmlicher JavaScript-Technik, muss man mit aynchronen Ajax-Requests herumkaspern, sich mit Timeouts, Memory-Leaks und Cross-Domain-Sicherheitspolicen herumschlagen. Und auch hier kommt man nicht herum, den Server zu tweaken oder gleich einen zweiten aufzusetzen, der ausschließlich auf Polls oder Long-Polls trainiert ist.

Gerade in der PHP-Welt ist es nicht einfach, einen üblichen LAMP-Stack soweit zu bringen, dass so etwas auch unter Last funktioniert – Java ist da wie immer weiter und bietet mit JMS ein einheitliches Interface – da gibt es Software für den gewöhnlichen Servletcontainer, im Anwendungsserver muss das laut Spezifikation sogar im Lieferumfang enthalten sein.

Möchte man trotzdem mit “Bordmitteln” mal schnell eine Chatbox aufsetzen, führt Longpolling + Ajax eigentlich schnell zu einem akzeptablen Ergebnis – nichts für Millionen konkurrierende Zugriffe, aber immerhin eine nette Spielerei für zwischendurch. Wäre da nicht ständiges Warten auf die Response, das sich nach einiger Zeit einerseits mit einer merklichen Ruckelorgie bemerkbar macht oder gar den Mauszeiger in eine ewiglich drehende Sanduhr verwandelt.

HTML 5 to the rescue…

HTML 5 kann sogenannte Dedicated Worker – “echte” Workerthreads auf Betriebssystemebene, die man mit einer Zeile spawnen kann.

new Worker('meinScript.js')

Innerhalb eines Threads kann man lang laufende Rechenoperationen im Hintergrund verstecken – warum also nicht auch einen Ajax-Request? Allerdings haben diese Threads einen Nachteil: Aus Sicherheitsgründen laufen sie in einem klar abgegrenzten Scope, in dem sozusagen nichts vorhanden ist. Auch keine Referenz auf das document-Object der Elternseite. Das stoppt die meisten Javascript-Bibliotheken, wie bspw. JQuery. Man muss sich also mit Bordmitteln begnügen.

Eine Methode, die einen Worker initialisiert, könnte so aussehen:

    _initializeLongPoll: function()
    {
      var messenger = this;

      var worker = new Worker('my-ajax-worker.js');
        worker.onmessage = function(event)
        {
          var json = jQuery.parseJSON(event.data);
            
          // NEUE CHAT-NACHRICHT ERZEUGEN
          messenger.$_list.append($('<li class="messenger-list-item">'
            + '<strong class="messenger-list-item-author">' + json.author + '</strong>'
            + '<span class="messenger-list-item-message">' + json.text + '</span></li>'));
        };
    }

“my-ajax-worker.js” ist ausschließlich für den Ajax-Request zuständig. Hier wird ein dynamisches Javascript in einem Symfony-Projekt generiert:

    
    var onLoad = function()
    {
      var output = httpRequest.responseText;
      if (output) {
       
        // DELEGIERT DIE RESPONSE ZURÜCK.
        postMessage(output.trim());
        
        // ERZEUGE NEUEN XmlHttpRequest
        httpRequest = initRequest();
      }
    };

    // WIR SPAREN UND DEN X-BROWSER XmlHttpRequest-KRAM
    var httpRequest = initRequest();

Details zum serverseitigen Script möchte ich an dieser Stelle vernachlässigen, im Grunde funktioniert es folgendermaßen: Es arbeitet so lange, bis eine Änderung festzustellen ist. Erst bei Änderung wird die Response an den Client ausgeliefert (darum heißt es “Long-Polling”, weil ein Request ganz schön lange dauern kann):

while(true)
{
  if(newData())
  {
    return getNewData()
  }
  sleep(5);
}

Der Kram funktioniert natürlich nur in HTML5-Browsern, die das Worker-Objekt unterstützen. Dazu zählen Firefox 3.6, Google Chrome und natürlich Safari. Ob Opera es beherrscht, weiß ich nicht, ob der IE 8 es beherrscht, bezweifle ich. Aber wie gesagt: Es ist nur eine Spielerei und keine produktiv geeignete Anwendung. Demnächst schau ich mir auch mal die WebSocket API an…

Known Issues

Vorsicht mit session_start() und konkurrierenden (asynchronen) HTTP-Zugriffen. Im User-Sessionscope wird der Apache immer auf das Schließen einer Session warten, bis er dem nächsten Request erlaubt, die Session wieder “aufzunehmen”. Und im Normalfall dauert eine User-Session genau so lange wie die Request-Lifetime. Das führt dazu, dass bei 4 gleichzeitig abgefeuerten XmlHttpRequests diese trotzdem als Stack nach dem FIFO-Prinzip abgehandelt werden. Man verliert somit den Vorteil der Asynchronität. Es ist also zwingend erforderlich, die Session bereits vor dem Long-Poll-Loop abzuschließen (durch den Aufruf von session_write_close();

* Logs all JavaScript errors (local or remote)
* Provides a stack trace to find the cause in all browsers
* Groups errors by cause
* Development and Production modes
* RSS feeds for errors

Einfach einbinden via Javascript im Seitenheader. Dann kriegt man schöne Statistiken über Javascript Fehler mit Browser und OS Infos, Mail-Notifications usw.

Ein bißchen wie Google Analytics.

Das ganze ist (noch) kostenlos während der betaPhase.

Auf die Idee clientseitige Fehler via Ajax auf dem Server zu loggen, wäre ich irgendwie garnicht gekommen. Andere Leute schon.
Trotzdem wundert es mich in Nachhinein fast dass es da nichts verbreiteteres gibt.
Das schreit ja eigentlich nach einem Symfony Plugin, oder?

:)