Creating a React app with create-react-app

Tyler McGinnis, after having been involved in quite a lot of tutorials/courses/workshops teaching on how to build a React app: Throughout all of these workshops, one thing was consistent: getting started with a React application was pretty overwhelming, for both beginners and senior developers alike. I can confirm this I must say. The tutorials and …

Distributing your React Component as a Standalone Version

At work we’ve been building quite some stuff on top of React the past few months. We use Grunt (and more recently Webpack) to run browserify with the babelify transform to transpile our ES6 code into ES5. Earlier this week I came to the point where I wanted to distribute a built component as a …

15 Ways to Write Self-documenting JavaScript

A few handy pointers to keeping your code readable: Some programmers include comments as part of self-documenting code. In this article, we’ll only focus on code. Comments are important, but they’re a large topic to be covered separately. We can split the techniques for self-documenting code into three broad categories: structural, where the structure of …

From Coffeescript to ES6 ES2015

At work we used write most of JavaScript in Coffeescript. Used to. In our most recent projects we now write ES6 (in combination with Babel). In the transition from Coffeescript to ES6, I found these resources helpful: Moving to ES6 from CoffeeScript → CoffeeScript equivalents in ECMAScript6/ES2015 → Decaffeinate: CoffeeScript in, ES6 out → Decaffeinate …

audio-effects – Create Audio Effects Using the Web Audio API

Great stuff by Sam Bellen, in which me mimics the effect-pedals for guitars: Audio-effects is a JavaScript library to create audio effects using the Web Audio API. This library contains the Volume, Distortion, Delay, Flanger, Reverb, and Tremolo effects He recently gave a talk about this at JSConf Budapest 2016 and at a local Fronteers …

Draft.js – Rich Text Editor Framework for React

Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences. Draft.js makes it easy to build any type of rich text input, whether you’re just looking to support a few inline text styles or building a complex text editor for composing long-form articles. The …

Ionic Native

The successor to the aforementioned ngCordova: Ionic Native is a curated set of ES6/TypeScript wrappers for Cordova/PhoneGap plugins that make adding any native functionality you need to your Ionic, Cordova, or Web View mobile app easy. import {Geolocation} from 'ionic-native'; Geolocation.getCurrentPosition().then(pos => { console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude); }); let …

How to write your own Virtual DOM

The main part of Virtual DOM can be written in less than ~50 lines of code. […] When we change something in our Virtual DOM Tree, we get a new Virtual Tree. Algorithm compares these two trees (old and new), finds differences and makes only necessary small changes to real DOM so it reflects virtual. …

Down the Rabbit Hole: Javascript in Wonderland

Talk by Claudia Hernández, on a few of Javascript’s oddities and (un)expected behaviors: There’s a presentation embedded in this post. View it on Speaker Deck. For a language originally created in 10 days it surely has a lot of quirks and perks many JS developers are unaware of. Sometimes, it might even seem like we …