Date Archives → June 2015

Introducing Memamug, a small open-source app made with React and Rails-api

View the source or see it live

One of the biggest pains I hear from new and old developers alike is that once they’ve learned the basics of a new technology, they struggle to apply them to an actual project.

Actually, this isn’t just a problem I’ve heard about – I’ve experienced it myself. In particular, learning React has been as much about figuring out what to do with it as learning the API itself. So to cut a long story short – I’ve built a single-page app with React and Rails-api. And I’d like to share it with you. And it’s not a todo list!

Memamug is a tiny app to help you remember people you meet. However, putting it together wasn’t a tiny job. It demonstrates a number of patterns and techniques which apply to larger projects, including how to:

Continue reading →

Re-exporting ES6 modules

Still need a little help getting ES6 compiling smoothly? First find out how.

With the advent of Babel, ES6 modules have become a real option for organising code. Mapping your require statements to import and module.exports to export is intuitive and will get you up and running, but the syntax for doing anything else can be downright unexpected.

I ran into this today while translating index.coffee from numbat-ui to ES6. index.coffee follows a fairly common pattern for libraries – instead of defining anything interesting itself, it just re-exports the classes from component modules for consumption by the app using the library. Basically, doing this:

Continue reading →

Webpack Made Simple: Building ES6 & LESS with autorefresh

Update on 2015/11/08: Now works with Babel 6.0

Just want a starter kit? Clone webpack-black-triangle for something minimal, or the Unicorn Standard Starter Kit for the works.

There’s been a huge amount of press since ES6 was finalised as ES2015 – but for all the awesome features it adds, it won’t help you much if you can’t actually use it. The problem is that while ES6 is the future, the current crop of browsers are stuck in the past. Want proof? Give Chrome an arrow function, and it’ll give you this:

Chrome being stuck in the present

Of course, there is more to the story than this. You can use ES6 in the vast majority of modern browsers, but with a catch: you’ll need a build step. And while this has been a deal-breaker for many in the past, we’ve entered an age where it doesn’t have have to be.

Continue reading →

Announcing Maxim

tl;dr – Try Maxim by cloning react-black-triangle, it’ll only take two minutes!

One recurring theme lately is that a number of people have found themselves quite attached to flux‘s core idea of unidirectional data flow, while at the same time Facebook’s implementation of it hasn’t really won people’s hearts (and neither have many of the other same-thing-but-not-the-same-thing implementations).

I too have found myself in this position. I’ve been craving something which like flux is easy-to-reason about, but like rails is elegant and has enough well-defined conventions to prevent me from spending a stupid amount of time stuck in decision paralysis.

My first attempt at fixing this was producing a simple react starter kit with a custom Flux implementation, react-black-triangle. However, one thing lead to another, and the result was Maxim.

Continue reading →

Six essential JavaScript libraries

Have you ever found yourself searching through the 153,882 packages on npm (as of the time of writing), sure that there must be something which solves your problem, but bewildered by your inability to find it? You’re not alone!

The abundance of packages in the JavaScript ecosystem can at times feel more like a curse than a blessing – all the code in the world can’t help you if you don’t know where to find it. However, the great thing about well designed libraries is that you only need a few of them to get you a long way.

With that in mind, here are six of the libraries I use to solve problems in my web and node projects. In alphabetical order:

Continue reading →