Angular Grid

Niall Crosby sent in Angular Grid (GitHub: ceolter/angular-grid, License: MIT), a library for managing tables of data with Angular. It supports sorting, filtering, column resizing, CSS themes, and search. There’s even an example that extends the cell renderer to show a file browser view.

Like other data tables, you can specify the columns with JSON and then fetch JSON data from the server to populate the table. Here’s a short Angular example that uses $http to fetch the JSON:

React Native Introduction Tutorial

John Wu has written an introduction to using React Native with iOS apps. It includes details on how to use it with CocoaPods, and how to wire up the JavaScript view code.

If you’re new to Objective-C and just want to get React Native up and running, then this should help because it walks through all of the necessary setup details. Installing CocoaPods isn’t too hard (it’s an Objective-C package manager), so as long as you can compile and run basic iOS apps you should be good to go. There’s also a sample application on GitHub.

Flow

If you like strongly typed languages, then there are more options than ever for JavaScript. Other than TypeScript, a major new tool is Flow (GitHub: facebook/flow, License: BSD) from Facebook. Flow allows you to annotate code with comments to get type checking – this is known as weak mode. You can also use real type annotations, which means you’ll have to use the Flow transpiler to deploy code.

Flow is written with OCaml, and it’s available through the OPAM package manager (opam install flowtype).

If you want type checking without completely changing JavaScript, then you may like TypeScript. There’s even a Flux and React demo:

In this case study, we take an existing React project and attempt to have Flow be able to successfully type check its code. While it will not be an automatic, run the Flow type-checker only one time win, we will show that it does not need to be painful to use Flow on your existing projects.

You Gotta Love Frontend Conference

The You Gotta Love Frontend Conference is being held in Tel Aviv from June 8th through to June 9th, 2015. Tickets are available from 750 NIS, which is about $190. The speakers include Douglas Crockford, Lea Verou, and Martin Kleppe, so it sounds like it’ll be worth attending!

jQuery Conference: San Francisco

Famo.us is hosting a jQuery Conference in San Francisco on June 22nd and 23rd:

Famo.us, the JavaScript framework for building beautiful, high-performance web and mobile UIs, is hosting a jQuery conference on June 22nd - 23rd, 2015 at the Regency Ballroom in San Francisco, CA. Tickets go on sale April 1st at 10am PST. We are releasing a limited number of Super Early Bird tickets for $150. After they sell out, we will offer attendees an Early Bird ticket for a week at $225, before the General Admission tickets go on sale for $350.

This is the official jQuery San Francisco conference, which has its own site here: jquerysf.com.

The developers at Facebook have been showing off React Native for a few months, but it’s finally been released on GitHub: facebook/react-native. I went to a Facebook tech talk about React Native earlier this month, and as someone who has experience developing iOS apps, I was extremely excited about it.

React Native lets you write React components with JSX that are converted to native views. In the Facebook tech talk, they basically described it as being close to ReactJS but with a few functions changed to output native view code instead of DOM elements. That means React Native apps include a JavaScript runtime. It also uses a flexbox layout model and styling. Styles are not written in CSS but instead use JavaScript objects that will make you think of a JSON version of CSS. Here’s an example:

Changing views doesn’t require recompilation, you see live updates in the iOS simulator

No recompilation is necessary after fixing crashes that are limited to the JavaScript portion of the project

The way I understood React Native was that it would replace the view and “view model” layer of an application. You could theoretically write a lot of JavaScript instead of Objective-C, but it seems better to treat it more like front-end development in a web application. The React Native documentation states that it’s designed to work with custom native views:

It is certainly possible to create a great app using React Native without writing a single line of native code, but React Native is also designed to be easily extended with custom native views and modules - that means you can reuse anything you’ve already built, and can import and use your favorite native libraries. To create a simple module in iOS, create a new class that implements the RCTBridgeModule protocol, and add RCT_EXPORT to the function you want to make available in JavaScript.

There’s a getting started guide which should help you if you just want to try it out right now, but you’ll need to be familiar with Xcode and iOS development.

An Android version is coming, and but will require that your Android apps include the JavaScript runtime. The iOS version is slightly slicker in that the JavaScript runtime is available as part of Apple’s standard libraries (JavaScriptCore).

Standard

Adopting standard style means ranking the importance of community conventions higher than personal style, which does not make sense for 100% of projects and development cultures. At the same time, open source can be a hostile place for newbies. Setting up clear, automated contributor expectations makes a project healthier.

Be aware that one of the choices is no semicolons, which I don’t believe is popular enough to be considered a “community convention”. However, key contributors in the Node community do advocate dropping semicolons, so things seem to be moving that way.

This project uses eslint and contains the .eslintrc file so you don’t have to worry about it. In fact, the idea of settling on a standard style guide for a project is sensible and something that can be automated rather than left to the PR/code review stage.

Node 0.12.1

Yesterday Node 0.12.1 was released. It has OpenSSL fixes for security vulnerabilities that include a DoS. Two fixes are ranked as high, and nine are marked as moderate.

io.js just hit version 1.6.2. The recent io.js releases have had tls and http fixes, but there are other very interesting changes if you dig into the changelog. For example, the Node binary can now be invoked with a list of modules to preload:

iojs -r foo -r /bar/baz.js -r quux

This is equivalent to:

require('foo');require('/bar/baz.js');require('quux');

The reason I like this is it means environment-specific modules can be loaded without changing your code. You could use this to load modules that instrument the runtime with debugging and logging functionality.

With the recent release 1.3.14 instantaneous-browserification, Angular introduced better support for those using Browserify. Thank you to everyone who worked on that issue, and especially to Ben Clinkinbeard for his unflagging dedication in getting it in.

I prefer reading AngularJS code with CommonJS modules, so it would be cool to see AngularJS module maintainers using Browserify for modules on npm.

DIY: JavaScript that Compiles to a Makefile

I’ve used Gulp and Grunt to manage client-side builds, but as someone who used to write makefiles I’ll admit to wishing everyone just used make. Well, now maybe we can, with Vittorio Zaccaria’s DIY (GitHub: vzaccaria/diy, License: BSD, npm: diy).

Here’s a sample configuration file:

generateProject(_=>{_.collectSeq("all",_=>{_.collect("build",_=>{/* specify how to build files */})_.collect("deploy",_=>{/* specify how to deploy files */}})})

DIY is a DSL for describing build processes. The generateProject function is used to wrap calls to various methods that describe build steps. The final makefile is generated by using babel, so you just have to type babel configure.js | node. Once you’ve got a makefile you can invoke the targets that were defined by calls to the collect method.

This module gets top marks for using Babel and for generating something that’s friendly for Unix grumps like me.

Typescript-Deferred

What if you want TypeScript-friendly promises? Typescript-Deferred (GitHub: DirtyHairy/typescript-deferred, License: MIT, npm: typescript-deferred) by Christian Speckner is a Promises/A+ implementation written in TypeScript. The author says nobody needs another promises implementation, but this implementation is pretty cool: it has no dependencies, and fully implements the specification.

// A promise for a number that resolves to 10varpromise:tsd.PromiseInterface<number>=tsd.when<number>(10);// A promise that adopts the state of some other thenable that wraps a value// of type sometypevarpromise:tsd.PromiseInterface<number>=tsd.when<sometype>(someThenable);

Christian suggests that this will be useful if you want to embed a small promises implementation into your own libraries.

Each shape is defined by a series of sequential characters, and a new shape is started as soon as you skip a character in the above list. So the first shape could be defined by the series ‘123456’, then the next shape with ‘89ABCDEF’, the next with ‘HIJKLMNOP’, etc. The simplest method +imageWithASCIIRepresentation:color:shouldAntialias: will draw and fill each shape with the passed color (there is also a block-based method for more options).

Earle Castledine has developed a JavaScript version called Cocoscii that can generate DOM images. The API is based around template strings:

The basics are, you fill a grid with the ordered markers … Any other characters are ignored.

If the numbers are sequential, they become a path. If you skip a number, then a new path starts. If a number is repeated twice, it becomes a line. If a number is repeated more than twice, it becomes a circle that fits inside the bounding box of all the points.

This sounds like a potentially hacker-friendly way of generating icons and simple game animations. I imagine it would be pretty easy to use it with effects like gradients and drop shadow.

Maybe there’s even some way of extending the principle to something like Monodraw?

Interdimensional

Interdimensional (GitHub: vodkabears/Interdimensional, License: MIT, npm: interdimensional, Bower: interdimensional) by Ilya Makarov is a library for responding to gyroscope events on devices that support the deviceorientation event. The demo site will start responding to tilts when you tap the polygon icon at the bottom-left of the screen.

The library’s behaviour can be tweaked by changing the PPD option (pixels per difference between tilts), and there’s also an insensitivity option for the minimum difference between tilts.

To start using spatial scrolling, call Interdimensional.charge. The library will emit events on the document object, so you can detect when the feature is enabled (interdimensional:charge), and if it wasn’t possible to enable it (interdimensional:fail).

Package Quality

Package Quality by Alex Fernández is a service that evaluates npm packages based on npm and GitHub metrics. It’s ideal if you want to quickly compare several competing packages.

The source is on GitHub (alexfernandez/package-quality) and the project is written with Express and MongoDB. The readme for the project has more details about how package quality is determined. The authors admit that any such measurements are potentially problematic, but they explain how version, downloads, and repo quality is measured so you can see what the numbers really mean.

For years I’ve wanted to make a WebGL version of Elite (or maybe Elite II). The technical trick to making it really compelling and native to the web would be if it streamed data with WebSocket to the client… maybe huge persistent galaxies could live on clusters of Node/io.js servers!

I’m never going to have the time to make anything like that, but Ben Nolan’s SceneVR project (GitHub: bnolan/scenevr, License: BSD, npm: scenevr) seems like a fun way of experimenting with interconnected virtual reality worlds. The demo allows you to walk around a 3D world with links to various games. There’s a Pac-Man game, a chess game, and some other cool stuff as well.

It works by streaming XML data to the browser from a Node server. The server uses Express, and the scenes rendered on the client use HTML-like markup with CSS:

AniCollection

I usually write CSS animations by failing to remember the syntax and then copy and pasting examples until it works the way I want. In times like that a handy directory of CSS animations is essential. AniCollection (GitHub: anicollection/anicollection, License: MIT) by Dariel Noel is big collection of CSS animations. Each animation has a preview and the associated CSS in an easy copy and pastable format.

varfetch=require('superfetch');fetch.get('http://example.com').then(function(body){// when the status code begins with "2", the response body will be returned.}).catch(function(response){// otherwise, the whole response(including headers) is returned.});

You can use fetch.get.option to set options, and you can chain calls to option if you like. The request and response objects can be transformed with callbacks, and the author has included unit tests written with Mocha.

0.10.37 and io.js 1.5.1

Node 0.10.37 was released on Saturday. This updates uv, domains, buffer, console, v8, and http. The uv update fixes a security issue which allowed attackers to gain elevated privileges due to the way setuid and setgid were used.

Node and Real-time Finance

The first part covers the background and architecture of the project, and the second part goes into the build system. It sounds like the third part will expand on client/server code sharing, so presumably it’ll feature some of the author’s experiences with isomorphic templates and view models.

Comws

What if you like Koa’s generator-based middleware but don’t want to use Koa? Andrea Parodi has created Comws (GitHub: shes/comws, License: MIT, npm: comws), a library based on co that you can use with any Node application.

To use it, create an instance of CoMws and then add generators to the middleware stack:

A few years ago, Firefox and Chrome added support for styles to log messages. This means you can call console.log with an additional CSS option. I’ve noticed a few libraries and frameworks using this to good effect for debugging messages, but an idea that’s new to me is combining Markdown with logging.

Logdown (GitHub: caiogondim/logdown, License: MIT, npm: logdown) by Caio Gondim is a module that lets you include Markdown in logs for both the browser and server. It can do the basics, like italic and bold, but the thing that I really like is including code.

To use it, instantiate a new Logdown instance, and then just log as you would with console.log:

StringFormatter

Simon Blackwell sent me StringFormatter (GitHub: anywhichway/stringformatter, License: MIT), a string formatting library that aims to go beyond the new ECMAScript string templates. It’s a bit like sprintf formatting, but includes some more complex features:

Numerical type formatting

Date formatting

CSS styles

Conditional formatting

Caching

It can handle expressions like currency as well, which is ideal for web applications when you want to display multiple currency formats. You can use StringFormatter.register to register a formatting for a type. For example, if you had a date formatter object you could associate it with Date like this: StringFormatter.register(Date, dateFormatter, 'Date').

The usual way to format a string is with StringFormatter.format, but you can use StringFormatter.polyfill() to add string formatting to the String object. Format strings are represented with JavaScript-inspired syntax:

StringFormatter.format("The time is now {Date: {format:'hh:mm'}} and I have {number: {fixed: 2, currency: '$'}}.",newDate('2015-03-13T10:01:27.284Z'),50.25);

All format options accept an additional style string, which causes the output to be wrapped in span elements with inline styles.

Ideally this library should be used with a templating system to really cut down on format invocation boilerplate. Simon has included an example for the Ractive template engine.

Hapi.js in Action

Hapi.js in Action by Matt Harrison is a book that’s dedicated to web development with Hapi.js. It has been released as an early access edition, and pricing starts at $35.99 for the eBook. The planned content includes authentication, building modular applications with plugins, testing, production, proxies, and creating streaming services.

Hapi.js in Action teaches you how to build modern Node-driven applications using Hapi.js. Packed with examples, this book takes you from your first simple server through the skills you’ll need to build a complete application. In it, you’ll learn how to build websites and APIs, implement caching, authentication, validation, error handling, and a lot more. You’ll also explore vital techniques for production applications, such as testing, monitoring, error handling, deployment, and documentation.

The first chapter is available for free, and early access supporters can get chapters two and three as well.

FullStack 2015

FullStack 2015 is an event that’s all about JavaScript, Node, and the Internet of Things, that will be held in London on 25th to 27th June. Tickets start at £375 for early bird tickets.

There’s currently a FullStack call for papers, so if you’re interested in speaking at the conference you’ve got a week to apply.

Prüfer

Johnathan Leppert wanted a way to generate complex DOM structures for UI performance testing. He decided to use the Prüfer sequence, and created a Node module that can generate random trees of data (GitHub: jleppert/prufer, License: MIT).

Here’s an example of the usage:

varprufer=require('prufer');// to make a tree, supply a series of integersvartree=prufer([3,3,3,4]);// you'll get back an array of edgesconsole.log(tree);

I thought the Prüfer sequence sounded like a cool way to do this – it might be useful for lots of Node-related stream tools.

Calendar Base

Wesley de Souza sent in a module for generating calendars as arrays of objects. The module is called Calendar Base (GitHub: WesleydeSouza/calendar-base, License: MIT, npm: calendar-base). To use it, you just need to instantiate a new calendar:

varcal=newCalendar({siblingMonths:true});cal.getCalendar(2015,5);

The arrays it generates have objects like this: { day: 31, weekDay: 0, month: 4, year: 2015, siblingMonth: true }. It also has methods for changing the start date, and selecting the current date.

It reminds me of typing cal in Unix, which is still how I use calendars instead of using a fancy desktop application…

Your First Meteor Application

Sponsored Content This post is about a book that we think will appeal to DailyJS readers.

David Turnbull sent me Your First Meteor Application, a highly focused, beginner-friendly introduction to Meteor. One thing that’s cool about this is book is David updates it regularly when Meteor changes.

CommonJS React Components

What do you do if you want to create reusable isomorphic CommonJS React components? You can install React with npm, but what’s the ideal pattern for structuring these components? How should the CSS be managed?

This proof-of-concept uses events for all interactions, so knowledge of the internal library and its dependencies is not required. You can use styling through require statements – component specific styling is scoped to the component.

It uses webpack and live reload, so it should fit in with a modern Node-based toolchain.

Using CommonJS modules and events should appeal to Node programmers who want to make reusable client-side components. If you’re a little lost with React in Node, or CommonJS and React, then this repository will give you a head start.

WebComponents

Interest in WebComponents is growing, but unless you’re involved with them it can be hard to see the benefits. Leon Revill has been working with them, and has written an article that outlines the basics of how to create WebComponents and why they’re exciting. From What are WebComponents and why are they important?:

Once WebComponents are properly supported and established you should be able to write a WebComponent that can be used in all of your projects regardless of the other technologies used. Forget writing plugins for jQuery, directives for AngularJS and addons for Ember.js. Write once use many. This has a huge benefit and in my mind is one of the most significant benefits of WebComponents.

The article includes technical examples and addresses some concerns about the divergence between X-Tag, Polymer and Bosonic.

io.js

Last Friday, io.js 1.5.0 was released, which is another major milestone for the project. It introduces a new Buffer.prototype.indexOf method, which is like Array.prototype.indexOf. This is implemented in node_buffer.cc, and works with strings and numbers.

Last week Rodd Vagg posted a comment about io.js on DailyJS to say that the ARMv8 support is separate to the earlier Node support for ARMv6 and 7, and it actually sounds quite significant. According to last week’s release notes, Linaro has contributed hardware to help io.js with ARMv8:

this is an entirely new architecture from ARM that adds 64-bit support which they are heavily pursuing the server market with. io.js (Node) + ARMv8 on the server is an amazing opportunity and ARM have been lending their support to the io.js project to make this work.

64bit ARM means more RAM in Android phones and tablets, which is great. But what about servers – are we going to be able to use low-powered clusters of powerful ARM machines? Linaro has details on its ARM servers, and has an application form for people to request access to try them out. Linaro says it’s planning to use servers are based on Opteron A1100 Cortex-A57, and X-Gene.

npm and jQuery

The npm weekly update points to yet another npm and jQuery plugin article. This one talks about how to make your own jQuery plugins make better use of npm. This includes referencing stylesheets in package.json and CommonJS compatibility.

error-system

Something I like to do in my Node-based web apps is include an errors.js file that subclasses Error with constructors named after HTTP errors. It makes it easier for me to pass the right error into next (in Express/Connect) so the error gets passed along to a centralised error handler. The way I do it is basic old skool JavaScript, so I’ve been looking for ways to improve it

Fomichev Kirill noticed Rod Vagg created node-errno. Rodd’s module includes errors for libuv and Node, so you can check error codes with expressions like require('errno').code.ENOTEMPTY. You can also use it as a command-line tool for checking Node errors, and it has an API for making custom errors. The custom errors include the call stack, and it allows error hierarchies to be created.

Inspired by this, Fomichev made error-system (GitHub: fanatid/error-system, License: MIT, npm: error-system). It’s similar to Rodd’s module, but is designed specifically for creating custom errors. If you were making a web application, you could make a class for request errors like this:

This is exactly what I wanted when I made my original errors.js file. I particularly like the numbered arguments in Fomichev’s module because it cuts down the amount of boilerplate when compared to my solution.

Slideout.js

Slideout.js (GitHub: mango/slideout, License: MIT, npm: slideout) by Guille Paz is a touch-based slideout navigation menu for mobile applications. It doesn’t use any dependencies, and the markup is sensible. It has CSS transforms and transitions, and uses native scrolling.

The markup is based on HTML5 tags, so you can define the navigation panel with a nav element. It works in most browsers, and the base version of IE is 10.

The JavaScript API uses a Slideout constructor function, and it accepts options for animations, duration, and the necessary DOM elements.

One nice thing about this library is there are lots of ways to install it: npm, spm, bower, and component are all supported.

Shipit vs Flightplan

I’ve written about Shipit and Flightplan, but I haven’t yet used both deployment solutions for anything serious. John Munsch has written a long post about his experiences using both Shipit and Flightplan with a DigitalOcean server:

I did everything from start to finish myself and I felt duly proud about having built something from scratch and launched it no matter how small it was. The tasks covered by my scripts were: initial machine configuration, updating of Ubuntu (mainly to get security fixes), deployment, and creating a SSH shell to the remote server.

Using a cheap VM can be very affordable if you want to host your own email, web services, and maybe use it for IRC. Deployment is naturally more work than something like Heroku, but Shipit and Flightplan can really streamline things.

John’s article compares the pros and cons of each library, and he’s included the scripts he used for deployment.

We present SoundWave, a technique that leverages the speaker and microphone already embedded in most commodity devices to sense in-air gestures around the device. To do this, we generate an inaudible tone, which gets frequency-shifted when it reflects off moving objects like the hand. We measure this shift with the microphone to infer various gestures. In this note, we describe the phenomena and detection algorithm, demonstrate a variety of gestures, and present an informal evaluation on the robustness of this approach across different devices and people.

Daniel’s version uses HTML5 and includes several examples, including page scrolling and a theremin. The source uses the audio API and typed arrays. I haven’t fully figured out the source, but I think it emits tones from the left and right speakers and then compares the result from the mic to figure out movement.

This is one of the best hacks I’ve seen for a while, and although the tone makes the applications limited the fact it works at all is fascinating!

This partnership has been very productive and rewarding experience for us, and as part of this collaboration, we’re happy to announce that Angular 2 will now be built with TypeScript. We’re looking forward to seeing what people will be able to do with these new tools and continuing to work with the Angular team to improve the experience for Angular developers.

Now AtScript development has been abandoned in favour of TypeScript, what does this mean for Angular developers? There’s a TodoMVC TypeScript Angular 2.0 example project on GitHub, which uses JavaScript for the main code. To use it, you’ll need to download the new Angular 2.0 code separately.

Hopefully this shift will result in a more future-proof Angular, but it’s hard to tell if switching to TypeScript now is a good idea, given the interest in ES6 and ES7.

Comparing Angular 1.x and 2.0

In case you’re excited/worried/apathetic about the previous news, Shawn McKay sent in a post that compares angular 2.0 with 1.x:

Angular 2.0 looks fantastic. It’s not ready yet, but you can play around with it today. Checkout the GitHub for more. There are also some examples available, such as ng2do.

The post explains how to set up Angular 2.0 and outlines the major new features. If you’re also working with React, then you might want to read more about the new DOM handling:

“2.0: In many ways, Angular 2.0 seems to handle DOM style manipulation with something similar to React.js’s virtual DOM, which they referred to in a recent presentation as the “view”. In response to a recent question about ‘Angular Native?’, Misko mentioned that this View could be run on a web worker or even potentially on native.”

Recently there have been several exciting projects that provide support for upcoming ES6 and ES7 features. One way of implementing parsers like this is with a context-free grammar. A popular way to do this is with Jison, but Gabriele Cannata sent in a new library called Jacob (GitHub: Canna71/Jacob, License: ISC, npm: jacob).

This means you can define your language or DSL, validate code written with it, and produce abstract syntax trees that can be used to write compilers.

I’ve written very basic grammar files with Jison before, and I’ve found that it takes practice to get the hang of it. The best place to get started is with real examples, so have a look at the Jacob examples folder. Also, the JSON definition on the json.org site will help you to understand how something you’re familiar with maps to a formal grammar.

If you’ve ever wondered how people write things like transpilers in a formal and structured way, then it’s worth checking out Jison and Jacob.

npm: Roadmap for 3, Using jQuery Modules

The npm roadmap has been updated with details on npm. This includes multi-stage installation, improvements to shrinkwrap, and progress bars. There’s an entry that aims to solve the front-end tooling problem, and I noticed shipping HTML and CSS is mentioned. I prefer a Browserify/npm-based workflow, but I’ve always found this stage less than elegant, so it’ll be interesting to see what happens there.

io.js 1.4.3

There was a new io.js release (1.4.3) on Monday, which has quite a big fix for streams on Windows and the beginnings of ARM support. The 1.4.x branch was released at 1.4.1 due to a libuv bug in 1.4.0. This branch adds newer versions of V8, npm, and libuv, but also has improvements for process, stream, and http.

For more details on io.js and npm changes, you can look at the changelogs on GitHub:

They’re both nicely annotated with links to commits, and summarise major changes.

NoDent

In my DailyJS email backlog I found NoDent (GitHub: MatAtBread/nodent, License: BSD-2-Clause, npm: nodent). It’s a small module that adds support for the proposed aysnc and await keywords. They’re not too hard to learn, and once you get used to them they can make asynchronous code more readable.

The basic idea is to mark asynchronous functions with the async keyword, and then use the await keyword before they’re called.

This will cause execution to wait until tellYouLater returns. I’ve used async/await in C#, and it works well for methods that return a single value (rather than an observable with a sequence of values).

The author’s readme has lots of examples of uses and abuses, so it’s worth reading if you seriously want async/await now.