Planet JavaScript

Monday, January 5, 2015

Axel Rauschmayer (②ality – JavaScript and more) @ München › Germany

ECMAScript 6: maps and sets 13:36 • over a year ago

Among others, the following four data structures are new in ECMAScript 6: Map, WeakMap, Set and WeakSet. This blog post explains how they work.

Map

JavaScript has always had a very spartan standard library. Sorely missing was a data structure for mapping values to values. The best you can get in ECMAScript 5 is a map from strings to arbitrary values, by abusing objects. Even then there are several pitfalls that can trip you up.

The Map data structure in ECMAScript 6 lets you use arbitrary values as keys and is highly welcome.

Basic operations

Working with single entries:

    > let map = new Map();
    
    > map.set('foo', 123);
    > map.get('foo')
    123
    
    > map.has('foo'

Web Components Articles

Introduction to HTML Imports 00:00 • over a year ago

Template, Shadow DOM, and Custom Elements enable you to build UI components easier than before. But it's not efficient to load each resources such as HTML, CSS and JavaScript separately.

Deduping dependencies isn't easy either. To load a library like jQuery UI or Bootstrap today requires using separate tags for JavaScript, CSS, and Web Fonts. Things get even more complex if you deal with Web Components with multiple dependencies.

HTML Imports allow you to load those resources as an aggregated HTML file.

Using HTML Imports

In order to load an HTML file, add a link tag with an import in the rel attribute and an href that contains a path to the HTML file. For example, if you want to loa

Alex Young (DailyJS) @ London › England

Databound, Typist 00:00 • over a year ago

Databound

If you use Ruby on Rails, then you might like this Rails REST library wrapped: Databound (GitHub: Nedomas/databound, License: MIT, npm: databound, Bower: databound) by Domas Bitvinskas. The API looks a bit like the Rails syntax for database models:

User = new Databound('/users')

User.where({ name: 'John' }).then(function(users) {
  alert('Users called John');
});

User.find(15).then(function(user) {
  print('User no. 15: ' + user.name);
});

User.create({ name: 'Peter' }).then(function(user) {
  print('I am ' + user.name + ' from database');
});

Install it with npm, Bower, or as part of a Rails asset pipeline. The author also notes that you can use it with Ang

Friday, January 2, 2015

Alex Young (DailyJS) @ London › England

Curl Converter, aja.js, sneakpeek 00:00 • over a year ago

Curl Converter

Chrome’s “Copy as cURL” menu item is useful, but what if you want to duplicate the same request with Node? Curl Converter (GitHub: NickCarneiro/curlconverter, License: MIT, npm: curlconverter) by Nick Carneiro can convert between cURL syntax and Node’s popular request module. It also supports Python, and can be installed with npm.

aja.js

aja.js (Bower: aja, npm: aja, License: MIT) by Bertrand Chevrier is an Ajax library that supports JSON and JSONP. It can be used to load large chunks of HTML or JSON, and can be installed with npm or Bower.

The API is fluent, so it can be used as a REST client like this:

aja()
  .method('GET')
  .url('/api/customer')
  .data({ firstname: 'John R

Thursday, January 1, 2015

Alex Young (DailyJS) @ London › England

Node Roundup: nchat, hulken, cult 00:00 • over a year ago

nchat

nchat (GitHub: irrationalistic/nchat, npm: nchat) by Chris Rolfs is a terminal-based chat application that uses WebSocket, which means it’s easier to use on networks where IRC might be blocked.

Notifications are supported on Mac OS X, and the client can run as the server so you only need to install nchat itself. It supports a few IRC-style commands, like /users, and you can deploy it to hosting providers like Heroku.

hulken

Hulken (GitHub: hulken, License: MIT, npm: hulken) by Johan Hellgren is a stress testing tool for HTTP services. It can make GET and POST requests, and can be configured to send dynamic payloads.

You can use hulken as a command-line tool, or a Node module. The documentation includes all of the supported options,

Wednesday, December 31, 2014

Peter-Paul Koch (Quirks Blog) @ Amsterdam › Netherlands

A new Microsoft browser? 13:02 • over a year ago

Recently the news broke that Microsoft may be working on another browser instead of IE. After reviewing the available evidence I’ve come to the conclusion that, although Microsoft is making a few adjustments, and a name change for IE might be a good idea, the new browser will essentially be IE12. Still, I think we web developers should support the “new browser” narrative.

It seems the decision was taken to fork Trident, Microsoft’s rendering engine. One version will essentially be IE11 with all backward-compatible bells and whistles, while the other one will be IE12, although it may carry a different name and will sport a new interface and support extensions. (IE extensions, that is. Not Chrome or Firefox extensions.)

The idea seems to be that Wind

Alex Young (DailyJS) @ London › England

JavaScript: 2014 in Review 00:00 • over a year ago

I can’t keep up with the libraries that people send to DailyJS – there are just too many! I’ve always felt like this is a good thing: it’s a sign the community is creative and works hard to solve problems in interesting new ways.

It’s hard to decide on a framework or library for a particular task: should you use Koa, Express, or Hapi on the server? Gulp or Grunt as a build system? Then there’s client-side development, with its rich set of libraries. This year alone I’ve used React, Angular, Knockout, and Backbone.

One of the reasons there are so many Node modules is npm is so good. There’s still room for improvement, and the npm blog has been useful for tracking new and upcoming changes to the package manager. It seems

Tuesday, December 30, 2014

Alex Young (DailyJS) @ London › England

React-Grid-Layout, Angular Debug Bar and Reading Position 00:00 • over a year ago

React-Grid-Layout

Samuel Reed sent in React-Grid-Layout (GitHub: strml/react-grid-layout, License: MIT), a grid system that is responsive. It requires React but doesn’t require any other library (including jQuery).

You can use the ReactGridLayout custom element in templates which allows you to cleanly specify how many rows and columns you’d like. It also supports props for columns, rows, responsive breakpoints, and layout change events.

Although the author states it has fewer features than Packery or Gridster, it supports some cool stuff like vertical auto-packing and dragging and resizing.

Angular Debug Bar and Reading Position Indicator

Maciej Rzepiński sent in two useful Angular projects:

  • angular-debug-bar (GitHub:

Monday, December 29, 2014

Alex Young (DailyJS) @ London › England

ngKookies, preCode.js 00:00 • over a year ago

ngKookies

ngKookies (GitHub: voronianski/ngKookies, License: MIT, npm: ngkookies) by Dmitri Voronianski is a replacement for the Angular $cookieStore provider. It’s a port of jquery-cookie that helps work around angular.js issue 950.

After loading it, you can set cookies with $kookies.set('name', 'value') and read them with $kookies.get. You can also delete cookies with $kookies.remove.

Each method accepts an options object that can include the path and expires arguments. You can also store JSON objects as cookies with $kookiesProvider.config.json = true.

preCode.js

Have you ever written a blog engine or CMS that has to display source code? If s

Sunday, December 28, 2014

Axel Rauschmayer (②ality – JavaScript and more) @ München › Germany

Symbols in ECMAScript 6 12:26 • over a year ago

Symbols are a new primitive type in ECMAScript 6 [1]. This blog post explains how they work.

A new primitive type

ECMAScript 6 introduces a new primitive type: symbols. They are tokens that serve as unique IDs. You create symbols via the factory function Symbol() (which is loosely similar to String returning strings if called as a function):

    let symbol1 = Symbol();

Symbol() has an optional string-valued parameter that lets you give the newly created symbol a description:

    > let symbol2 = Symbol('symbol2');
    > String(symbol2)
    'Symbol(symbol2)'

Every symbol returned by Symbol() is unique, every symbol has its own identity:

    > symbol1 === symbol2
    false


Friday, December 26, 2014

Alex Young (DailyJS) @ London › England

Dynamic-json-resume, JSnoX 00:00 • over a year ago

Dynamic-json-resume

I don’t know about you, but I hate putting together my résumé. I start to focus too much on the presentation even though you’re meant to keep it simple. Dynamic-json-resume (GitHub: jrm2k6/dynamic-json-resume, License: MIT, npm: json-resume-dynamic) by Jeremy Dagorn is a module for generating résumés from a simple JSON format. You can output PDFs, and use it with a Node application.

Because your CV is now represented by a structured data format, you can reuse it in other places. For example, your personal website could render it in a sidebar.

James Long’s article, Removing User Interface Complexity, or Why React is Awesome, inspired the project. React seems like the perfect way to manipulate and render your JSON CV.

JSnoX

Thursday, December 25, 2014

Alex Young (DailyJS) @ London › England

Holiday Hacking: Apps 00:00 • over a year ago

What do you do when you leave your computer/laptop at home while you visit family for the holidays? I always do this, thinking that it’ll be better to spend some quality time with the family, but there are moments where people are doing their own thing and I wish I had a laptop to play with some code.

These days of course many of us tote around tablets or large phones, so there is some potential for hacking or at least learning about new programming techniques. One of my favourite apps is actually Vim, which you can get for iOS and Android:

  • Vim by Applidium for iOS
  • Vim Touch for Android

To the uninitiated, Vim for a touchscreen sounds horrible, but it’s actually pretty good – because it’s modal you can enter Com

Wednesday, December 24, 2014

Alex Young (DailyJS) @ London › England

Node Roundup: 0.10.35, Prettiest, Artisan Validator 00:00 • over a year ago

Node 0.10.35

Node 0.10.35 was released today, which has some changes to timers relating to the unref behaviour:

  • timers: don’t close interval timers when unrefd (Julien Gilli)
  • timers: don’t mutate unref list while iterating it (Julien Gilli)

This was released soon after 0.10.34, which updated v8, uv, zlib, and some core modules including child_process and crypto.

Prettiest

What if you want to prevent a command-line script from executing more than once? Prettiest (GitHub: punkave/prettiest, License: MIT, npm: prettiest) from P’unk Avenue LLC combines data storage and locking, and should work well for Node command-line scripts made with modules like ShellJS.

This is the simplest example – it will track ho

Tuesday, December 23, 2014

Alex Young (DailyJS) @ London › England

Particle Paintings, AMD to CommonJS with Recast 00:00 • over a year ago

Particture

Tadeu Zagallo sent in a Canvas experiment that uses typed arrays, optimised sorting algorithms, and inlining and bitwise operators to boost performance. The Particture demo allows you to use your webcam for the source image, and draws images with a cool trail effect.

The repository at tadeuzagallo/particture has the source, and it uses dat.gui for the controls.

Recast

Many readers seem to be searching for solutions to the module refactor problem, where older projects are refactored to use modern module systems. Dustan Kasten wanted to convert projects that use AMD to CommonJS, and he’s used Recast to do this, through the recast-to-cjs project that is published by his company (Skookum Digital Works).

Dustan has written an article

Sunday, December 21, 2014

Axel Rauschmayer (②ality – JavaScript and more) @ München › Germany

ECMAScript 6: new OOP features besides classes 10:57 • over a year ago

Classes [2] are the major new OOP feature in ECMAScript 6 [1]. However, it also includes new features for object literals and new utility methods in Object. This blog post describes them.

New features of object literalsMethod definitions

In ECMAScript 5, methods are properties whose values are functions:

    var obj = {
        myMethod: function () {
            ···
        }
    };

In ECMAScript 6, methods are still function-valued properties, but there is now a more compact way of defining them:

    let obj = {
        myMethod() {
            ···
        }
    };

Getters and setters continue to work as they did in ECMAScript 5 (note how syntactically similar they are to method definitions):

    let obj = {
       

Saturday, December 20, 2014

Addy Osmani @ London › England

JavaScript Application Architecture On The Road To 2015 00:39 • over a year ago

In my new write-up on Medium, I look at the state of application architecture in the JavaScript community as we ebb our way towards 2015. In it, I talk about composition, functional boundaries, modularity, immutable data structures, CSP channels and … Continue reading →

Thursday, December 18, 2014

Axel Rauschmayer (②ality – JavaScript and more) @ München › Germany

One JavaScript: avoiding versioning in ECMAScript 6 19:56 • over a year ago

What is the best way to add new features to a language? This blog post describes the approach taken by ECMAScript 6 [3], the next version of JavaScript. It is called One JavaScript, because it avoids versioning.

Versioning

In principle, a new version of a language is a chance to clean it up, by removing outdated features or by changing how features work. That means that new code doesn’t work in older implementations of the language and that old code doesn’t work in a new implementation. Each piece of code is linked to a specific version of the language. Two approaches are common for dealing with versions being different.

First, you can take an “all or nothing” approach and demand that, if a code base wants to use the new version, it must be upgraded completely. Python took

Monday, December 15, 2014

Web Components Articles

Mozilla and Web Components: Update 00:00 • over a year ago

Mozilla has a long history of participating in standards development. The post below shows a real-time slice of how standards are debated and adopted. The goal is to update developers who are most affected by implementation decisions we make in Firefox. We are particularly interested in getting feedback from JavaScript library and framework developers.

Web Components Presentations

Web Components + Backbone: A Game-Changing Combination 00:00 • over a year ago

Web Components promise to change how we think about modularity on the web, and when combined with the structure and organization of Backbone.js we can create portable, dynamic, encapsulated UI modules that fit into any web application.

Web Components open up new, low-level interfaces for developers to create modules on the web with Custom Elements, HTML Templates, HTML Imports, and the Shadow DOM. These are exciting new technologies for web modularity, but on their own they can provide neither the rich interactivity nor maintainable structure we’ve come to expect in our JavaScript web applications. Other JS libraries are already exploring mechanisms for integrating Web Components, but Backbone.js, with its light-weight, flexible API, is in a unique position to pr

Tuesday, December 9, 2014

Axel Rauschmayer (②ality – JavaScript and more) @ München › Germany

Meta programming with ECMAScript 6 proxies 09:11 • over a year ago

This blog post explains the ECMAScript 6 (ES6) feature proxies. Proxies enable you to intercept and customize operations performed on objects (such as getting properties). They are a meta programming feature.

The code in this post occasionally uses other ES6 features. Consult “Using ECMAScript 6 today” for an overview of all of ES6.

Before we can get into what proxies are and why they are useful, we first need to understand what meta programming is.

Programming versus meta programming

In programming, there are levels:

  • At the base level (also called: application level), code processes user input.
  • At the meta level, code processes base level code.

Base and meta

Tuesday, December 2, 2014

Thomas Fuchs (mir.aculo.us) @ Philadelphia, PA › United States

Thanks to Retinafy.me readers, $1,044 go to kids in Ferguson! 12:04 • over a year ago

Last Tuesday, I’ve started a little Thanksgiving charity drive to get some money together for kids in Ferguson. I couldn’t be happier that I’ve sold $1,044 worth of my book Retinafy.me with 100% of this going to Donors Choose projects in Ferguson, MO. (I’m coming up for the payment processor fees out of my own […]

Web Components Articles

What's next for X-Tag project 00:00 • over a year ago

Many things happened since Mozilla first announced its solution to bring Web Components capabilities to all modern browsers.

To continue our interview series we invited Daniel Buchner, creator of the X-Tag library, to explain how everything started and what's coming next.

Two years ago you made your first talk presenting X-Tag at Mozilla. What were your motivations to build it?

My motivation for writing X-Tag was two fold:

I. Create a polyfill for the Custom Elements spec. I saw this spec as the real foundation of Web Components - the other specs enhance the guts (Shadow DOM, Templates) and distribution (Imports) of custom elements.

II. I saw the Custom Elements API as a raw canvas that provided awesome lifecycle hooks and prototype defin

Monday, December 1, 2014

HTML5 Rocks

Introduction to Service Worker: How to use Service Worker 00:00 • over a year ago

Service Worker will revolutionize the way we build for the web. Learn about what it is, why it is important and how to use it.

Sunday, November 30, 2014

Thomas Fuchs (mir.aculo.us) @ Philadelphia, PA › United States

Get retinafied and support kids in need! 14:48 • over a year ago

Up to and including Monday December 1, 100% of sales of my Retina Web ebook will go to Donors Choose projects in Ferguson, MO. These kids need our help! Thank you! Get your copy now!
pluto/1.3.2 - Ruby/2.0.0 (2014-11-13/x86_64-linux) on Rails/4.2.0 (production)