Matt DesLauriers

creative developer

Page 2

Rapid Prototyping in JavaScript

Twitter: [@mattdesl](

This is a brief introduction to my current workflow for small, self-contained browser demos and prototypes.

screen cast of a typical prototyping session

Many modules are easy enough to unit test and develop entirely in the console (e.g. with nodemon and tape). This post is not about those modules, but instead, about the ones that are harder to unit test, and harder to visualize in a console alone. Some examples:

  • google-panorama-equirectangular - stitching equirectangular panoramas from Google Street View
  • touch-scroll-physics - integration for bouncing scroll panels and grids
  • glsl-film-grain - a film grain shader
  • perspective-camera - generic 3D perspective camera utilities
  • word-wrapper - word wrapping for custom 2D glyph rendering
  • three-bmfont-text - high quality text rendering in ThreeJS


The aim of this workflow is to

Continue reading →

Motion Graphics for the Web

Lately I’ve been thinking a lot about tooling for the web. Mostly, about how much it sucks, and how far away we are from the aesthetic of other industries, like games, film, and offline motion graphics in general.


screenshot of “Where Things Come From”

Shorts and reels like “Where Things Come From”, we think things’ 2013 Reel, and “Designed by Apple” demonstrate a visual fidelity which seems near impossible to replicate with interactive web content. Yet, the technology is all there: CSS for common elements and typography, SVG for shapes and strokes, and Canvas/WebGL for more advanced effects.

Why do rich websites and online experiences so often fall short of this aesthetic? There’s a few reasons, but I’d say the strongest is that we lack time-based animation tools for HTML5 content. Without these tools, the animations are left up to the developers to implement. And, let’s be

Continue reading →

Faster & Cleaner Module Workflow

I’ve noticed when writing lots of small modules that the process of creating new modules and repositories can be a little tedious and error-prone. Automating the process makes things more efficient, produces consistent and clean repositories, and also forces me into the mindset of documenting and testing early on.

Here are some suggestions, tools and scripts that have improved my workflow. I’m going to presume OSX throughout this article, since I don’t use Windows.

example readme for a small module

 terminal basics

The best way to improve efficiency when working with npm modules is to get more familiar with terminal commands. You might already know cd and ls, but here’s a few other goodies:

  • tab key will auto-complete a path to the next folder; double-tap to list all paths that match the input
  • up/down arrow keys to repeat previous commands
  • Ctrl + A and Ctrl + E to jump to the

Continue reading →

to semicolon or not to semicolon

This is one part of an ongoing (and opinionated) style guide for modern front-end JavaScript development. Stay tuned for more: @mattdesl.


It took me longer than I care to admit to realize that semicolons are optional in JavaScript. In fact, they are often rather useless.

Automatic semi-colon insertion (ASI for short) exists in all browsers/minifiers worth your time. Knowing the rules for ASI are incredibly simple:

  1. Use a new line character instead of a semi-colon to terminate a statement.
  2. If a line begins with one of these characters: - + [ ( /, you should either precede the character with a semi-colon, or put a semi-colon on the previous line.

Linting tools can warn us about these gotchas when we choose to use ASI in our code.

These three snippets are equivalent. Which one you like best is a matter of personal taste, akin to how you take your coffee. A few months

Continue reading →

array slinging in JavaScript

This is one part of an ongoing style guide for modern front-end JavaScript development. Stay tuned for more: @mattdesl.

Functional programming may be a nebulous concept to some front-end developers, but even learning the basics can greatly improve the readability and flexibility of your code. Here we’ll take a brief look at filter, map, etc and how they can lead to cleaner and more “functional” code.

Briefly explained:

  • filter creates a new array with only the elements that pass the test of our given function
  • map creates a new array where the elements are the result of calling our given function

Full details in the docs. You should also get comfortable with reduce, reduceRight, some and every.

For example, let’s say we have a list of person objects and we are trying to filter them by age:

var persons = [ 
    { name: "Will", age: 15 },
    { name: "John", age: 49 },

Continue reading →

Browserify vs. Webpack

It’s amazing, and slightly terrifying, how the landscape of JavaScript and its tooling can change in the blink of an eye. But, right now, we have a pretty good thing going with npm and browserify. We get thousands of useful functions and modules that compose well together, promote the Unix philosophy of small and decoupled tools, and blur the lines between “browser” and “client” (e.g. see headless-gl). And, amazingly, we can utilize all of these modules without worrying about paths, version hell, or cumbersome configuration files.

Webpack seems like an amazing tool, and does present some great features (hot module replacement, code splitting, sync vs. async requires, etc). However, it does not promote code re-use in the way that NPM and Browserify does. It encourages a “whole new way” of writing modules and often requires manually-maintained config files. This is essentially a step

Continue reading →

modular and versioned GLSL

a WebGL demo of glsl-lut, for efficient color transforms on the GPU. source code here


  • Intro
  • glslify
    • Installing Dependencies
    • Compiling The Shader
    • Relative Requires
  • Example Modules
  • The Awesomeness of NPM
  • Unit Testing
  • Extras
  • As a Source Transform


NPM and Node are brilliant tools for pushing JavaScript and web development forward. They have drastically changed the landscape; introducing the concept of small and composable modules, semantic versioning, and automatic dependency management. Gone are the days of “copy-pasting” snippets, fear of new versions, and manually maintaining vendor paths. Installing a dependency has never been easier:

npm install querystring --save

But now it’s starting to make some shifts in other areas; namely, game and graphics programming with GLSL. For the uninitiated, Browserify is a neat tool which statically analyzes your code for

Continue reading →