The JavaScript blog.


desktop atom articles electron isomorphic

Awesome Electron, Modernising Client-Side Code

Posted on .

Awesome Electron


Electron is the web-based desktop framework that was originally developed for GitHub's Atom editor. It seems to be catching on, so Sindre Sorhus is compiling a list of Electron applications in Awesome Electron.

The list includes Monu by Max Ogden, which is a process monitoring menu bar application for Mac OS X, and some simpler tools like a Gulp task runner.

Sindre has also made generator-electron, a Yeoman generator for Electron applications. To create your own desktop application with Yeoman, just run:

npm install --global generator-electron  
yo electron  

Modernising Client-Side Code, the Isomorphic Way

Kevin Grager from Algolia (Search API - YC14) shared an article about how they modernised a Node application: Modern JavaScript libraries: the isomorphic way:

Our JavaScript and Node.js API clients were implemented 2 years ago and were now lacking of all modern best practices ... This blog post is a summary of the three main challenges we faced while modernizing our JavaScript client.

It's pretty detailed and tells a story that you don't usually hear: the team looked at weaknesses in their project's design by writing tests. Then they rewrote parts of it using newer techniques, finally converting client-side code to be isomorphic.


ui react atom ide

React in Atom, JSX Control Statements, Baobab

Posted on .

I seem to have a huge backlog of React-related submissions to the DailyJS inbox, so you might see more React libraries than usual over the next few weeks. There's no conspiracy to promote React, it's just that readers seem interested in it!

React in Atom

React in Atom

Jaakko Lukkari sent in atom-react (GitHub: orktes/atom-react, License: MIT), a plugin for the Atom IDE that adds features for React. The main features are syntax highlighting, indentation, code folding, snippets, JSX reformatting, HTML to JSX conversion, and autocomplete.

The documentation has videos of each of the main features. This plugin was based on sublime-react, which is a pretty popular Sublime package.

JSX Control Statements

Asaf Katz sent in JSX Control Statements (GitHub: valtech-au/jsx-control-statements, License: MIT, npm: jsx-control-statements) by Alex Gilleran. This adds control statements like If Else and For each:

<If condition={this.props.condition === 'blah'}>  
<Else />  

Loops look like this:

<For each="blah" of={this.props.blahs}>  
  <span key={blah}>{blah + this.somethingElse}</span>

JSX doesn't have If-Else, and due to how React works the author has decided to implement these features using JSTransform. This guards against early evaluation during parsing. The readme has a more detailed explanation and examples for Webpack and Node-JSX.


Asaf Katz also sent Baobab. Baobab (GitHub: Yomguithereal/baobab, License: MIT) by Guillaume Plique is a JavaScript data tree supporting cursors. It's inspired by Clojure zippers, and can be used with React through mixins.

Cursors allow you to listen for changes nested within trees, so if your UI is data-driven then you can react to changes to specific parts of objects.

Asaf said that Christian Alfoni's blog post on Baobab really sells the library: Plant a Baobab tree in your flux application:

A Baobab tree is strictly the state of your application. All of it. Everything exists in one tree. What makes this tree so special is that any changes will trigger an event, but not as you might expect.

Christian uses Baobab with a flux architecture by creating a state tree with Baobab and then rendering the UI with React. The article explains all of the main terminology, so if you're not used to thinking about Flux, React, immutability and state, then you should get a lot out of this article.


graphics plugins text atom

Rantjs, Avatar, esformatter

Posted on .


Rantjs (GitHub: svenanders/Rantjs, License: ISC, npm: rantjs) by Sven Anders Robbestad is a library for procedurally generating text. It takes a formatted constructor and then generates suitable sentences:

var rantjs = require('rantjs');  
var rant = new rantjs.SimpleRant;  
var sentence = rant.rantConstructor('<firstname male> likes to <verb-transitive> <noun.plural> with <pron poss male> pet <noun-animal> on <timenoun dayofweek plural>.');

console.log(sentence); // 'Sean likes to chop parrots with his pet cat on Saturdays.'  

There are a lot of supported tags, with subgroups, so you can generate a activity video or adv emotion. You can also add your own tags.

The author suggests that this might be useful for generating random text in games, but I think it might also work well for generating random admin area sample text in a blog or CMS, and for creating text to use in testing.


If you're looking for a way to generate default avatars, then take a look at Avatar (GitHub: MatthewCallis/avatar, License: MIT, npm: avatar-initials) by Matthew Callis. It can show the user's initials in a styled or unstyled avatar, or optionally fall back to a Gravatar instead.

To use it, just instantiate Avatar with the container element:

var avatar = new Avatar(document.getElementById('avatar'), {  
  useGravatar: false,
  initials: 'MC'

/* or */

  useGravatar: false,
  initials: 'MC'


Sindre Sorhus sent in atom-esformatter (GitHub: indresorhus/atom-esformatter, License: MIT), an Atom editor package for formatting JavaScript with esformatter. Esformatter itself supports lots of options for formatting JavaScript, like the indentation characters, line breaks, and whitespace handling.

Sindre's Atom package lets you run esformatter from the Command Palette by typing esformatter, and you can run it on a selection or the whole file.

Esformatter supports plugins, so you can change its behaviour by loading other Node modules. There's a list of plugins and also a plugin wish list. Sindre notes that it can be used with Gulp and Grunt, which might be a good way of processing open source JavaScript according to your project's style guide before you release it.


reactive atom

Moving Atom To React

Posted on .

There's a post on the Atom blog about some performance improvements that you can optionally enable: Moving Atom To React. It discusses how Facebook's React library was used to improve the performance of the text editing component:

Right out of the box, React's virtual DOM got us a long way toward our goal of treating the DOM with kid gloves. Though we worked with raw DOM nodes in a few places for performance and measurement reasons, it offered a declarative abstraction that relieved us of the tedious state management typically associated with DOM updates. In addition, React's well-defined reconciliation strategy and lifecycle hooks made it easy to reason about the sequencing of the manual DOM interactions we did have to perform.

With the React editor, these kinds of changes can now be performed with the new decorations API. Decorations allow metadata to be associated with markers, instructing the editor to render classes on lines and line numbers, or draw highlight regions. Using decorations is faster and more convenient than manual DOM interactions, and we plan on introducing more APIs for common DOM interactions going forward.

This highlights several things that React is good at:

  • It's relatively small and self-contained, so you can drop it into an existing project
  • The virtual DOM is fast
  • It helps to improve managing state

I've been using Knockout for a while now, and I'm even thinking about using RxJS for some projects. However, after reading this I think a combination of Knockout and React might work well for the messier parts in my Knockout view models that deal with the DOM.


audio editors encoding mp3 ogg atom

Browser Audio Encoding, Atom Open Source

Posted on .


Joe Sullivan sent in vorbis.js (GitHub: itsjoesullivan/libvorbis.js, License: MIT), a project based on several others that produces Ogg Vorbis from PCM data. It uses Emscripten, and has an event-based API. There's a full example in the readme, which demonstrates how to configure the necessary memory buffers and encoding options.

Joe has also made a project called iago that can stream Ogg using web workers.

If licensing issues don't put you off, take a look at libmp3lame.js by Andreas Krennmair. Again, this project makes use of Emscripten to port parts of lame to JavaScript.

Atom is Open Source

Atom is now free and open source. The announcement includes the minor revelation that there are now over 800 Atom packages.

I've seen people on Twitter running the Linux version, but people are still dubious about Atom's performance and the 2 MB file limit. Making it open source seems like a solid first step to creating sustained interest, but it has a Google Wave feel about it.