The JavaScript blog.






libraries node modules components react-native react

React Component Playground, React Native Fish

Posted on .

React Component Playground

I have a backlog of React submissions, so I thought I'd work through them rather than spacing them out over a few weeks. First, React Component Playground (GitHub: FormidableLabs/component-playground, License: MIT, npm: component-playground) by Ken Wheeler is a React component that allows you to edit a React component with a live preview. You can try it out on the project's homepage -- see the button example near the top.

Normally with React/Angular/etc. you're constantly waiting for the build/refresh cycle, but with this project you can experiment a little bit to get results more quickly. As the example suggests, this is useful when working with React styles.

The same author also wrote nuka-carousel (GitHub: kenwheeler/nuka-carousel, License: MIT, npm: nuka-carousel), which is a React carousel component.

React Native Fish

Fish example

If you're looking for a fun React Native project, then check out Ivan Starkov's react-native-fish (GitHub: istarkov/react-native-fish). It's a graphical experiment that generates a trial of objects that looks like a fish. It's pure JavaScript and doesn't use any images.

It's interesting to see how React Native can be used to draw abstract things that aren't NSWhateverViews. I noticed that it uses arrays from the gl-matrix module, and immutable.


ES6 react material-design WebComponent

React Mount, Angular Material Design Dashboard

Posted on .

React Mount

If you want to use React more like web components, by including custom tags in HTML rather than JSX files, then take a look at Philipp Adrian's react-mount (GitHub: greenish/react-mount, License: MIT, npm: react-mount). All you need to do is define a React class with React.createClass, then mount it with React.mount. The HTML is then transformed to JSX by react-mount.

You can even nest components, so you can use it much the same way as you'd usually use React components. You can use expressions with curly braces to access props:

<translucent-component attribute={props.attribute}>  
    <p>Less than four list items? </b>{props.list.length <= 3 ? "Yes!" : "No!"}</b></p>
        {props.list.map(function(value, i){
            return <li key={i} >{value}</li>;

Angular Material Design Dashboard

Tushara Fernando has created a starting point for an Angular 1.3 Material Design application that uses ES6 and Karma/Protractor for tests: Excelian/Angular-Material-ECMA6-Dashboard.

The markup uses components, and there are components for alerts, a side menu, and a navigation bar. The way it uses ES6 modules with Angular is based on the GoCardless skeleton app.


functional node browser modules libraries reactive

Flyd: Reactive Functional Programming

Posted on .

When I see yet another reactive programming library, I think to myself "that's just not functional enough!" And the libraries that keep me interested in JavaScript are almost always pushing functional practices or static type checking.

Therefore I was interested to see Flyd (GitHub: paldepind/flyd, License: MIT, npm: flyd) by Simon Friis Vindum in my DailyJS inbox today. This project aims to model values that change over time using reactive and functional concepts without adding too much extra baggage.

Flyd is more functional than existing FRP libraries. Instead of methods it gives you curried functions with arguments in the order suitable for partial application. This gives more expressive power and modularity.

The building block in Flyd is streams. You can plug them in wherever a function is expected:

var clicks = flyd.stream();  
document.getElementById('button').addEventListener('click', clicks);  
var messages = flyd.stream();  
webSocket.onmessage = messages;  

Streams can depend on other streams, which is where the functional composition of Flyd comes in.

The author has provided some nice interactive examples that make the library easier to visualise. Take a look at the sum example to get started. And if you're interested in comparing to RxJS, then compare this Flyd code to functionally equivalent RxJS code.


node editors Microsoft

Visual Studio Code

Posted on .

Visual Studio Code

Yesterday Microsoft released Visual Studio Code, or VSCode for short. It's an editor for Windows, Linux, and Mac OS, and is aimed at web developers. That doesn't just mean ASP.NET, but also Node.js.

The Node features include IntelliSense, debugging, linting, and outlining. Some of these features extend to other web technologies, like HTML, CSS, LESS and SASS. And, it even understands tasks with bundled support for autodetecting Gulp files. On a Mac you can press Shift-CMD-P then search for "Run Tasks" to get a parsed list of Gulp tasks.

Visual Studio Code also has Git integration, which I found to be perfectly manageable although I still quickly reached for my terminal when doing anything beyond basic commits.

If you're not familiar with Microsoft's JavaScript-related technologies, then you'll need to familiarise yourself with some of the basic TypeScript concepts. For example, VSCode is capable of providing IntelliSense suggestions thanks to TypeScript definition files. These files contain metadata for JavaScript objects and function signatures. This makes sense when you consider Microsoft's languages, like C#, have details about types for method signatures. IntelliSense is able to provide a match for a method, but also make it more meaningful with details on the parameters based on the type.

To really make the most of VSCode, you'll need to find the right TypeScript definition files. Microsoft's Node tutorial explains how to quickly set this up for Node itself, but you can also help the editor provide IntelliSense for projects like Express and AngularJS. The way you do that is to install definition files, and the best source I know of is DefinitelyTyped. There's a package manager for definition files called TSD.

The editing features are comparable to Atom and Sublime Text -- VSCode supports bracket matching, multi-cursor editing, snippets, go to definition, go to symbol, gutter indicators, peek (a Visual Studio feature that shows you another file in a panel), split windows, find in project, and symbol renaming. It's very powerful and will strongly appeal to those of you with previous experience working in Windows-based editors.

I say Windows-based editors because the keyboard shortcuts, even on a Mac, are very reminiscent of Visual Studio. Some of the text selection and deletion shortcuts that I instinctively use in Mac-based editors do things that I didn't expect, so it'll take me a while to get used to VSCode.

Another issue I have is I don't like the typings folder that VSCode adds to the current directory for the TypeScript definition files. I'd rather that was system-wide, because I don't want to accidentally commit it to my project. I could add a global ignore for it, but the folder name seems too generic for that. Also, I really don't like the idea of adding code comments for the definition files, I'd much prefer the editor to remember which definition files I use for a given project.

VSCode is definitely an impressive editor. As a Vim user for over 15 I'm unlikely to switch, but I enjoyed trying it out, and the JavaScript support is compelling. It's worth trying if you're a JavaScript programmer.


libraries node modules markdown epub npm cms

Node Roundup: npm Scopes, AkashaEPUB, mdjson

Posted on .

npm Scopes

Since npm got private modules, it has supported scopes, because private modules are resolved based on your username. However, one thing that I didn't realise was scopes are available to everyone -- you don't have to use them for private modules. That means you can reuse an existing package name, which makes sense if the package name is generic enough.

This was mentioned in this week's npm weekly post, under "solving npm’s hard problem: naming packages":

As part of the private modules rollout last week, we introduced a new free feature: scopes for packages. If you’re a registered npm user then you already have a scope, so check out the post if you want to learn how to use it.

This will be handy if you want to distribute your own fork for existing modules through npm.


David Herron sent in AkashaEPUB (GitHub: akashacms/akashacms-epub, License: Apache 2.0, npm: akashacms-epub), a toolchain for constructing EPUB version 3 books. It allows you to write books using Markdown, and helps manage the asset files (CSS, images, fonts), and builds a correct EPUB3 file.

AkashaEPUB is built using AkashaCMS, which is a static site generator:

The goal for AkashaCMS is to provide most of the flexibility of a full scale CMS, incorporate modern JavaScript/CSS UI frameworks, while producing static HTML files, and skipping the administrative overhead of running a full CMS.

To use AkashaEPUB, you'll need Grunt and an EPUB to generate. There's a sample project and a skeleton. The following example will build the EPUB Guidebook that David Herron created:

npm install -g akashacms  
npm install -g grunt-cli  
git clone https://github.com/akashacms/epub-guide.git  
cd epub-guide  
npm install  
grunt doepub  


mdjson (GitHub: yoshuawuyts/mdjson, License: MIT, npm: mdjson) by Yoshua Wuyts is a module for generating JSON from Markdown. The properties in the JSON are based on the headings, which means you can use it to write JavaScript objects in a more friendly manner. This works particularly well with template strings:

  This part (before any headers) is ignored. Feel free
  to use this section for commentary on the file's purpose,
  if you wish.

  ## my heading
  oh wow, amazing

  ## another heading
  gorgeous copy, stunning

The output contains the original input and HTML:

  'my heading': {
    raw: 'oh wow, amazing',
    html: '<p>oh wow, amazing</p>'

  'another heading': {
    raw: 'gorgeous copy, stunning',
    html: '<p>gorgeous copy, stunning</p>'

I think this might be a cool way of converting Markdown to something more structured to store in a database for a CMS or static site generator.