Matt DesLauriers

creative developer

Page 2


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.

readme
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.


 semicolons

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

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

 Contents

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

 Intro

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 →