Planet JavaScript Last Update: Monday, 05. January 2015 07:00

DailyJS - Jan 02

Curl Converter, aja.js, sneakpeek

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 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 Romuald' })
  .on('200', function(response) {})
  .go();

It also supports some DOM manipulation:

aja()
  .url('/views/page.html')
  .into('.container')
  .go();

It comes with tests that can be run with Grunt, and the readme has more examples for things like posting data.

sneakpeek

If you’re looking for a library to hide the header when the page is scrolled, then sneakpeek (GitHub: antris/sneakpeek, License: MIT, npm: sneakpeek) is nice because it’s small, installable with npm, and has no external dependencies.

It’s a bit like headroom.js, but easier to use with Browserify.

over a year ago

DailyJS - Dec 31

JavaScript: 2014 in Review

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? Gul 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 like more people than ever are using npm for client-side development as well, so it’ll be interesting to see if Bower still occupies its niche in 2015.

Speaking of 2015, I expect to see more people using ES6 features. We’ve already seen several libraries that use generators to make synchronous-style APIs for client-side modules, and server-side databases. Generators seem hard to learn so it’ll take a while for these APIs to catch on.

There’s still scepticism and even irritation in the Node community about ES6 modules. We’ve spent years writing CommonJS modules and happen to like the syntax, so ES6 modules are a hard pill to swallow. There’s a gist from 2013 about Node and ES6 modules that has comments from well-known Node programmers, and since then es6-module-loader by Guy Bedford has appeared. This library is a polyfill that provides System.import for loading ES6 modules. Guy wrote a great article, Practical Workflows for ES6 Modules with lots of details on ES6 modules from a Node programmer’s perspective.

I don’t think 2015 will see a big Node/ES6 module controversy, though. It seems like CommonJS modules are here to stay, and perhaps eventually we’ll start using both formats.

Another potential controversy is the future of Node forks. io.js got a of initial attention, but it seems to have cooled off over the last fortnight. But I think forks are positive and I’m excited to see what people do with alternative takes on Node.

If you do anything in 2015, please make more libraries and frameworks. We don’t want a totalitarian open source community, we want a big wonderful mess, because open source is an ongoing conversation with no truly right solutions.

over a year ago

Mozilla Hacks - Dec 29

2014: Mozilla Hacks looks back

Wherever you live, it’s a season of work holidays, school vacations, year-end blog posts, and lists. The Hacks blog will be back in early January 2015 to continue writing for developers about the products and technologies created by Mozilla and by builders of the Open Web around the world. In the (chronological) list below, we […] over a year ago

Wherever you live, it’s a season of work holidays, school vacations, year-end blog posts, and lists. The Hacks blog will be back in early January 2015 to continue writing for developers about the products and technologies created by Mozilla and by builders of the Open Web around the world.

In the (chronological) list below, we celebrate some 2014 milestones and memorable moments for Mozilla, Firefox, and the web platform:

  • The new improved Firefox Sync launched early in 2014, built atop Firefox Accounts. Here’s a deeper look at the new Sync protocol.
  • Mozilla worked with the Apache Cordova team to integrate Firefox OS with Cordova’s open source device APIs, enabling mobile app developers to access native device functions from JavaScript, and release Cordova apps for the Firefox OS platform. Cordova is the underlying software in Adobe PhoneGap: the integration made it possible for PhoneGap developers to easily port their apps to the Firefox Marketplace.
  • Mozilla Research made great progress on Servo, a prototype browser engine. Servo is written in Rust, a systems programming language designed to support concurrency and parallelism for modern hardware. Another Big Milestone for Servo—Acid2 was reported in the spring.
  • Australis was the codename for our major redesign of the Firefox Desktop browser, which launched in late April. Designer Stephen Horlander wrote a post about the process, titled (Re)Designing Firefox.
  • The summer release of Firefox 31 brought new capabilities for game developers, including access to emscripten for compiling to JavaScript. In Resources for HTML5 game developers, we described some of the tools and techniques for coding and debugging sophisticated, performant HTML5 games. On the Mozilla blog, we featured the first commercial games to leverage asm.js, demonstrating the readiness of HTML5 as a game platform.
  • In October, we shared a Preview of Firefox Hello, a WebRTC-powered voice/video chat service.
  • As part of the festivities surrounding Firefox’s 10th birthday, Mozilla Research launched MozVR to help bring virtual reality to the Web. Grab your oculi and hold on to your hats.
  • At the same time, the Firefox Developer Tools team released Firefox Developer Edition, the first browser created specifically for developers. Though still in its early days, the Developer Edition features Valence, an integrated add-on to let you develop and debug your app across multiple browsers and devices, as well as WebIDE, providing an editing environment for app development and remote debugging.
  • The evolution of asm.js continued with the release of Massive, an open source benchmarking tool that measures asm.js performance specifically. You can run Massive here.
  • Mozilla and partners announced the formation of the Internet Security Research Group (ISRG) and launched the Let’s Encrypt initiative. Let’s Encrypt is a new Certificate Authority that’s free, automated, and open. It’s due to arrive in summer 2015.
  • Our friends at Telenor introduced Gonzo, an ongoing project which explores the use of Firefox OS as an embedded platform. Telenor engineer and Firefox OS evangelist Jan Jongboom is hacking together a wireless camera and sharing what he learns along the way.
  • Firefox OS Expands to Nearly 30 Countries – It’s been an expansive year. At last count, Firefox OS is now up and running on 16 smartphones offered in 29 countries. And in December news, Mozilla and KDDI announced the release of Japan’s first Firefox OS smartphone, which went on sale on December 25. The Fx0 is the first high-spec Firefox OS smartphone and it’s a beauty!

If you’re interested in writing for the Hacks blog in 2015, we’d love to hear from you. Email us. In the meantime, have a safe and hacky holiday!

over a year ago

DailyJS - Dec 26

Dynamic-json-resume, JSnoX

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 i 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

What do you do if you like React but dislike JSX? Shawn Price sent in his coworker’s project, JSnoX (GitHub: af/JSnoX, License: MIT, npm: jsnox), which provides a simple React markup API that works in pure JavaScript:

var d = require('jsnox')(React)
var LoginForm = React.createClass({
  submitLogin: function() { ... },

  render: function() {
    return d('form[method=POST]', { onSubmit: this.submitLogin }, [
      d('h1.form-header', 'Login'),
      d('input:email[name=email]', { placeholder: 'Email' }),
      d('input:password[name=pass]', { placeholder: 'Password' }),
      d(MyOtherComponent, { myProp: 'foo' }),
      d('button:submit', 'Login')
    ]);
  }
});

This API sidesteps the issue of JavaScript’s lack of multiline string handling for embedded templates, while not requiring too much fiddly syntax for handling DOM attributes.

over a year ago

Node.js Blog - Dec 24

Node v0.10.35 (Stable)

2014.12.22, Version 0.10.35 (Stable)

  • tls: re-add 1024-bit SSL certs removed by f9456a2 (Chris Dickinson)

  • timers: don't close interval timers when unrefd (Julien Gilli)

  • timers: don't mutate unref list while iterating it (Julien Gilli)

Source Code: nodejs.org/dist/v0.10.35/node-v0.10.35.tar.gz

Macintosh Install over a year ago

2014.12.22, Version 0.10.35 (Stable)

  • tls: re-add 1024-bit SSL certs removed by f9456a2 (Chris Dickinson)

  • timers: don't close interval timers when unrefd (Julien Gilli)

  • timers: don't mutate unref list while iterating it (Julien Gilli)

Source Code: http://nodejs.org/dist/v0.10.35/node-v0.10.35.tar.gz

Macintosh Installer (Universal): http://nodejs.org/dist/v0.10.35/node-v0.10.35.pkg

Windows Installer: http://nodejs.org/dist/v0.10.35/node-v0.10.35-x86.msi

Windows x64 Installer: http://nodejs.org/dist/v0.10.35/x64/node-v0.10.35-x64.msi

Windows x64 Files: http://nodejs.org/dist/v0.10.35/x64/

Linux 32-bit Binary: http://nodejs.org/dist/v0.10.35/node-v0.10.35-linux-x86.tar.gz

Linux 64-bit Binary: http://nodejs.org/dist/v0.10.35/node-v0.10.35-linux-x64.tar.gz

Solaris 32-bit Binary: http://nodejs.org/dist/v0.10.35/node-v0.10.35-sunos-x86.tar.gz

Solaris 64-bit Binary: http://nodejs.org/dist/v0.10.35/node-v0.10.35-sunos-x64.tar.gz

Other release files: http://nodejs.org/dist/v0.10.35/

Website: http://nodejs.org/docs/v0.10.35/

Documentation: http://nodejs.org/docs/v0.10.35/api/

Shasums:

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

98f61cb09685ed45f2db6e0fc5ccbdd273204091  node-v0.10.35-darwin-x64.tar.gz
8616029e0bb79dea1a974f97e42399fe24d3f4d7  node-v0.10.35-darwin-x86.tar.gz
3a202a749492e48542d2c28220e43ef6dae084bc  node-v0.10.35-linux-x64.tar.gz
c71823a584aa4cc778d73ff4ea89ed2b6f0ac250  node-v0.10.35-linux-x86.tar.gz
56f2837da0cf1a302e7b3e6da770fba875a13a62  node-v0.10.35-sunos-x64.tar.gz
d5713e3933a4ddfd9573a5326a2a5043fb50184f  node-v0.10.35-sunos-x86.tar.gz
fca0fcf21a0dcd4ae02b319804a99e3cfeb83ee3  node-v0.10.35-x86.msi
3781eae7bcbf55d87b528b3a0b3c9524f94e66a4  node-v0.10.35.pkg
bcad4ebf56516676f93b28377f03d3b3ea52795c  node-v0.10.35.tar.gz
16a363d39f08fa5119f3ca82dcd08a6d67110bcb  node.exe
43197d7d92e9a6eead6060288173941041dac9a4  node.exp
c0cc751dcc915234b15cfc210cdd459b78148435  node.lib
9ff7f9e7959c196a97cc53400d86602da7f5a74d  node.pdb
bfc708da1114ac539cd43738145d8cc1f5e39f6f  openssl-cli.exe
f54d55939d9493f934dc36baa169429df8fb47f4  openssl-cli.pdb
c95e8041b5b16488eb2522fa072061690f6ef0cb  x64/node-v0.10.35-x64.msi
7f31dd9c636e658f7386e8f8b2ef3be885158c55  x64/node.exe
6df8b6b95024e5f0bd7f39cd5a83341ae227e8aa  x64/node.exp
82fa5ea193f4aac3267b58c8c5f581952ae46fea  x64/node.lib
e6e4df82798d36343f0f0e872a36d15172e86f70  x64/node.pdb
ae6917172865a8fa3ddfdf3bc93a863043742fa9  x64/openssl-cli.exe
b9bb9409cbf63c20b2c2e7db9f5f323cfd400771  x64/openssl-cli.pdb
-----BEGIN PGP SIGNATURE-----
Version: GnuPG/MacGPG2 v2.0.22 (Darwin)
Comment: GPGTools - http://gpgtools.org

iEYEARECAAYFAlSYki4ACgkQfTP/nQJGQG0BYQCeNpRS2Bj8IJPfRomoaXMJgr+f
p/IAoOukOg36PqphzVe2C2kEUcIxb2H1
=fA07
-----END PGP SIGNATURE-----
over a year ago

DailyJS - Dec 23

Particle Paintings, AMD to CommonJS with Recast

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 over a year ago

Particture

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 that shows how to convert a project to CommonJS: Converting a project from AMD to CJS with Recast. The AST is traversed to find AMD definitions, and then converted into equivalent CommonJS dependencies.

It’s possible that Node developers may end up doing something like this if ES6 modules become the norm, although I suspect ES6’s export and import statements will need manual intervention to take advantage of import obj from lib.

over a year ago

DailyJS - Dec 22

Holiday Reading for JavaScript Programmers

If you’re lucky enough to be enjoying a festive holiday right now, then you’re probably starting to get bored of Christmas movies and long dark teatimes of the soul. Rather than knuckling down with the family to watch Elf for the umpteenth time, why not load up your favourite reading device with some programming books and articles?

Angus Croll sent in a copy o over a year ago

Hemingway and JavaScript

If you’re lucky enough to be enjoying a festive holiday right now, then you’re probably starting to get bored of Christmas movies and long dark teatimes of the soul. Rather than knuckling down with the family to watch Elf for the umpteenth time, why not load up your favourite reading device with some programming books and articles?

Angus Croll sent in a copy of his book If Hemingway Wrote JavaScript (No Starch Press, $15.95), which makes comparisons between literary figures and programming styles. This book started as a blog post about Hemingway, and there are amusing posts on his blog, like Animals writing JavaScript. I thought it would be hard to stretch the original idea out into an entire book, but Angus uses the concept to explore the broader question of how we write and think about JavaScript:

JavaScript has plenty in common with natural language. It is at its most expressive when combining simple idioms in original ways; its syntax, which is limited yet flexible, promotes innovation without compromising readability. And, like natural language, it’s ready to write. Some of JavaScript’s more baroque cousins must be edited with an IDE (integrated development environment—a sort of Rube Goldberg machine for coding). JavaScript needs nothing more than a text file and an open mind.

The question of style in programming is usually approached with defensive trepidation, but the literary conceit allows Angus to present different stylistic ideas without judging them. For example, Virginia Woolf’s poetic stream of consciousness is recreated with a mix of long lines and flexible use of semicolons:

If the semicolon is the period of JavaScript, then the comma operator is its semicolon. Programmer Woolf loves the comma operator, and in her happy numbers solution, she uses it to excess. The result is a dreamy, melancholic form of JavaScript (is there any other?) made dreamier still by the heavy, almost dangerous level of n alliteration and some gorgeously expressive pairings. In To the Lighthouse, Woolf writes of night’s shadows: “They lengthen; they darken”; in her happy numbers solution we get the wistfully poetic numerals.shift(), numerals.length.

I commute across London everyday and read to pass the time. Over the years I’ve moved from pulp sci-fi to 20th century modernists and the classics, so this book is ideal for me. I’m not sure how many literary programmers there are, however, so this is definitely a novelty that I will cherish.

Other readers have also recently sent in some interesting resources that you might like to read over the holiday. Thai Pangsakulyanont’s JavaScript for Automation Cookbook contains examples for Apple’s new scripting system that allows you to control Yosemite applications with JavaScript. It includes iTunes, Safari, system events, and how to use CommonJS modules with Browserify, so you can actually make maintainable automation scripts.

Eugene Abrosimov sent in a big list of Backbone.js tutorials, articles, videos, and examples. There should be a few things on there to load up Instapaper/Pocket if you use Backbone.

And, just over a week ago I received the first print of my book, Node.js in Practice (Manning, $39.99). I wrote it with Marc Harter, and we’ve designed the book for intermediate to advanced Node developers. Our publisher, Manning, also publishes Node.js in Action (Manning, $35.99) which is well suited to new Node programmers.

over a year ago

DailyJS - Dec 19

Rantjs, Avatar, esformatter

Rantjs

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-transit

 
 over a year ago
   

Rantjs

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.

Avatar

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 */

$('#avatar').avatar({
  useGravatar: false,
  initials: 'MC'
});

esformatter

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.

over a year ago

DailyJS - Dec 18

React Roundup: rc-calendar, D3 React Reusable Charts, tcomb-form

rc-calendar

rc-calendar (GitHub: react-component/calendar, License: MIT) by yiminghe is a port of kissyteam/date-picker that allows you to render calendars with React.render(<Calendar />, container). It has props for locale, showing today, and the select/blur events, and it includes some examples and tests.

The supported locales are en-us and zh-cn, so you can a over a year ago

rc-calendar

rc-calendar (GitHub: react-component/calendar, License: MIT) by yiminghe is a port of kissyteam/date-picker that allows you to render calendars with React.render(<Calendar />, container). It has props for locale, showing today, and the select/blur events, and it includes some examples and tests.

The supported locales are en-us and zh-cn, so you can actually display a Chinese calendar UI. It also supports aria and keyboard accessibility.

D3 React Reusable Charts

d3rrc

D3 React Reusable Charts (GitHub: jdarling/d3rrc, License: MIT, npm: d3rrc) by Jeremy Darling is a graph library that supports bar charts, pie charts, scatter charts, and time series. It allows you to use a LineChart element. This code is taken from the multi-line chart example:

React.render(
  <LineChart
    chart-height="320"
    chart-seriesNames={seriesNames}
    chart-seriesValues={seriesValues}
    chart-pointNames={pointNames}
    chart-pointValues={pointValues}
    chart-lineInterpolation="cardinal"
    data={data}
  />,
  document.getElementById('output')
);

React makes graphs quite clean by allowing you to mix the markup and JavaScript data. For more examples, take a look at the full d3rrc example list.

tcomb-form

tcomb-form (GitHub: gcanti/tcomb-form, License: MIT) by Giulio Canti is a UI library for making forms. As we all know, making forms is web development drudgery, so anything to take the pain away is welcome. Giulio’s library is “domain driven”, which means it’s able to generate a form based on the domain model.

There’s a personal form example that shows the kind of form I’ve spent all too much time creating in the past. The source uses a kind of strongly typed model definition approach:

var t = require('tcomb-form');

var Gender = t.enums({
  M: 'Male',
  F: 'Female'
});

var Country = t.enums({
  US: 'United States',
  IT: 'Italy'
});

var Person = t.struct({
  fullName: t.Str,
  nickname: t.maybe(t.Str),
  gender: Gender,
  country: Country,
  tags: t.list(t.Str)
});

var Form = t.form.create(Person, {
  auto: 'labels',
  fields: {
    gender: {
      factory: t.form.radio
    }
  }
});

You don’t have to use this to define the actual models in your application. With this library, it might be better to use a lightweight model/view model approach, so you’d treat the tcomb models as view models that define the behaviour specific to forms.

over a year ago

jQuery Blog - Dec 17

Improving the Pointer Events Polyfill

Today, we’re excited to announce that Google has transferred its Pointer Events polyfill to the jQuery Foundation. This polyfill was originally written by Google’s Polymer team but since Google has chosen to put their Pointer Event implementation on hold, we engaged to ensure that the polyfill is maintained and continues to be a tool developers … Continue reading → over a year ago

Today, we’re excited to announce that Google has transferred its Pointer Events polyfill to the jQuery Foundation. This polyfill was originally written by Google’s Polymer team but since Google has chosen to put their Pointer Event implementation on hold, we engaged to ensure that the polyfill is maintained and continues to be a tool developers can use as a path to the eventual native implementation in all browsers. Many thanks to Google and the Polymer Team for allowing us to build off their work and continue development.

The jQuery Foundation has been, and continues to be a strong proponent of standards and we are specifically strong proponents of the Pointer Events standard because it will simplify the way web developers handle user interactions. Today developers are saddled with two very different event models for mouse and touch, even though they share many similarities. The result is often code that has a myriad of special cases, particularly when the device itself generates “fake” mouse events from touches. The jQuery Foundation hopes to drive developer adoption of this unified event system. Our goal is to have all browsers implement this standard natively.

Just yesterday, the W3C took the Pointer Events specification to the Proposed Recommendation stage. This makes Pointer Events one step closer to a finished standard and gives browsers a solid base on which to implement these APIs. Some browsers have even begun their implementation. Unsurprisingly Internet Explorer, where the first implementation of Pointer Events began before being submitted to the W3C for standardization, has implemented Pointer Events and Firefox has a branch of their code base implementing Pointer Events which they intend to port to all version of Firefox. Both of these implementations recently passed 100% of the Pointer Events test suite so implementation is progressing nicely.

We want to thank Microsoft Open Technologies for their hard work on Pointer Events and their continued support. We also want to thank IBM, Mozilla, Google, Dojo and the many other organizations and individuals that have helped and continue to help make developers lives easier through the creation, fostering and promotion of new standards like Pointer Events. If you want to get involved or just want to start using Pointer Events in your projects, head over to the new Pointer Events repo and check it out.

over a year ago

Mozilla Hacks - Dec 16

Pseudo elements, promise inspection, raw headers, and much more – Firefox Developer Edition 36

Firefox 36 was just uplifted to the Developer Edition channel, so let’s take a look at the most important Developer Tools changes in this release. We will also cover some changes from Firefox 35 since it was released shortly before the initial Developer Edition announcement. There is a lot to talk about, so let’s get […] over a year ago

Firefox 36 was just uplifted to the Developer Edition channel, so let’s take a look at the most important Developer Tools changes in this release. We will also cover some changes from Firefox 35 since it was released shortly before the initial Developer Edition announcement. There is a lot to talk about, so let’s get right to it.

Inspector

You can now inspect ::before and ::after pseudo elements.  They behave like other elements in the markup tree and inspector sidebars. (35, development notes)

before-after-inspection

There is a new “Show DOM Properties” context menu item in the markup tree. (35, development notes, documentation about this feature on MDN)

show-dom-properties

The box model highlighter now works on remote targets, so there is a full-featured highlighter even when working with pages on Firefox for Android or apps on Firefox OS. (36, development notes, and technical documentation for building your own custom highlighter)

Shadow DOM content is now visible in the markup tree; note that you will need to set dom.webcomponents.enabled to true to test this feature (36, development notes, and see bug 1053898 for more work in this space).

We borrowed a useful feature from Firebug and are now allowing more paste options when right clicking a node in the markup tree.  (36, development notes, documentation about this feature on MDN)

paste-options

Some more changes to the Inspector included in Firefox 35 & 36:

  • Deleting a node now selects the previous sibling instead of the parent (36, development notes)
  • There is higher contrast for the currently hovered node in the markup view (36, development notes)
  • Hover over a CSS selector in the computed view to highlight all the nodes that match that selector on the page. (35, development notes)

Debugger / Console

DOM Promises are now inspectable. You can inspect the promises state and value at any moment. (36, development notes)

promise-inspection

The debugger now recognizes and works with eval’ed sources. (36, development notes)

Eval’ed sources support the //# sourceURL=path.js syntax, which will make them appear as a normal file in the debugger and in stack traces reported by Error.prototype.stack. See this post: http://fitzgeraldnick.com/weblog/59/ for much more information. (36, development notes,  more development notes)

Console statements now include the column number they originated from. (36, development notes)

WebIDE

You are now able to connect to Firefox for Android from the WebIDE.  See documentation for debugging firefox for android on MDN.  (36, development notes).

We also made some changes to improve the user experience in the WebIDE:

  • Bring up developer tools by default when I select a runtime app / tab (35, development notes)
  • Re-select project on connect if last project is runtime app (35, development notes)
  • Auto-select and connect to last used runtime if available (35, development notes)
  • Font resizing (36, development notes)
  • You can now adding a hosted app project by entering the base URL (eg: “http://example.com”) instead of requiring the full path to the manifest.webapp file (35, development notes)

Network Monitor

We added a plain request/response headers view to make it easier to view and copy the raw headers on a request. (35, development notes)

net-headers-raw

Here is a list of all the bugs resolved for Firefox 35 and all the bugs resolved for Firefox 36.

Do you have feedback, bug reports, feature requests, or questions? As always, you can comment here, add/vote for ideas on UserVoice or get in touch with the team at @FirefoxDevTools on Twitter.

over a year ago

Mozilla Hacks - Dec 15

Mozilla and Web Components: Update

Editor’s note: 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 […] over a year ago

Editor’s note: 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.

Mozilla has been working on Web Components — a technology encompassing HTML imports, custom elements, and shadow DOM — for a while now and testing this approach in Gaia, the frontend of Firefox OS. Unfortunately, our feedback into the standards process has not always resulted in the changes required for us to ship Web Components. Therefore we decided to reevaluate our stance with members of the developer community.

We came up with the following tentative plan for shipping Web Components in Firefox and we would really appreciate input from the developer community as we move this forward. Web Components changes a core aspect of the Web Platform and getting it right is important. We believe the way to do that is by having the change be driven by the hard learned lessons from JavaScript library developers.

  • Mozilla will not ship an implementation of HTML Imports. We expect that once JavaScript modules — a feature derived from JavaScript libraries written by the developer community — is shipped, the way we look at this problem will have changed. We have also learned from Gaia and others, that lack of HTML Imports is not a problem as the functionality can easily be provided for with a polyfill if desired.
  • Mozilla will ship an implementation of custom elements. Exposing the lifecycle is a very important aspect for the creation of components. We will work with the standards community to use Symbol-named properties for the callbacks to prevent name collisions. We will also ensure the strategy surrounding subclassing is sound with the latest work on that front in JavaScript and that the callbacks are sufficiently capable to describe the lifecycle of elements or can at least be changed in that direction.
  • Mozilla will ship an implementation of shadow DOM. We think work needs to be done to decouple style isolation from event retargeting to make event delegation possible in frameworks and we would like to ensure distribution is sufficiently extensible beyond Selectors. E.g Gaia would like to see this ability.

Our next steps will be working with the standards community to make these changes happen, making sure there is sufficient test coverage in web-platform-tests, and making sure the specifications become detailed enough to implement from.

So please let us know what you think here in the comments or directly on the public-webapps standards list!

over a year ago

DailyJS - Jan 01

Node Roundup: nchat, hulken, cult

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 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, and you’ll need to write an options.json file to use it on the command-line.

cult

Cult (GitHub: typicode/cult, License: MIT, npm: cult) is a tool that monitors changes to a gulpfile and then reloads Gulp. You can run it on the command-line, and it uses the chalk library for pretty output. The readme has an example for supporting gulpfiles that are split across multiple files.

over a year ago

DailyJS - Dec 30

React-Grid-Layout, Angular Debug Bar and Reading Position

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 s 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 allows you to including a new element, angular-debug-bar, to show some statistics about the current page. This includes a count of $watch and $listener items, DOM objects, and page load time. Each metric is defined with a registerPlugin method, so you might be able to add new metrics although I haven’t tried that myself.

angular-rpi is based on the Reading Position Indicator post from CSS-Tricks. It shows a bar at the top of the page as you scroll the document:

RPI

You can use it with the rpi directive. Both projects have a demo that you can run locally. If you want to edit the progress bar styles, then you can use the .scss file and run npm install ; bower install ; gulp.

over a year ago

DailyJS - Dec 29

ngKookies, preCode.js

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 $ko 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 so you’ve probably run into the issue where human-readable HTML doesn’t work well with pre elements if initial indentation is included.

preCode.js (License: MIT) Leon Sorokin is a small script that finds <pre><code> blocks and strips the leading and proceeding whitespace, so syntax highlighters should be able to display code properly.

It’s written using the standard DOM API, so it shouldn’t need any dependencies. It’ll also fix whitespace in textarea as well.

over a year ago

DailyJS - Dec 25

Holiday Hacking: Apps

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 the 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:

To the uninitiated, Vim for a touchscreen sounds horrible, but it’s actually pretty good – because it’s modal you can enter Command-line mode with : and leave with the escape key easily enough. If you’re an experienced Vim user then it can be revealing to think about the mnemonics for commands rather than relying on muscle memory.

I also found that the big programming video services have iOS and Android apps, so you can study a new programming language, framework, or library:

I’ve actually used the Pluralsight app on Android during my commute to help me learn enough C# to implement the Windows portion of a Node/Windows/iOS/Mac application I work on professionally.

Because tablet operating systems support browsers, then there are a lot of apps that wrap the built-in JavaScript interpreter to allow you to practice writing JavaScript. For example:

And you can even write Node on iOS with Node - JavaScript Interpreter. There are manuals for Node on the Play Store as well. Or you can get a more broad manual management app like Dash. I found Dash useful for looking up Mozilla’s JavaScript documentation, and Node’s, when I was working offline on my Node book.

Apple and Google’s book stores also sell many technical books from the popular computer science book publishers, so you should be able to find something to do while your parents argue and your partner is walking the dog, wrangling toddlers, or snoozing after too much turkey.

over a year ago

DailyJS - Dec 24

Node Roundup: 0.10.35, Prettiest, Artisan Validator

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 c 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 how many times it has been run:

var data = require('prettiest')();

data.count = data.count || 0;
data.count++;
console.log('I have been run', data.count, ' times.');

I’ve often wanted to persist data in command-line scripts, but didn’t want to bother with sqlite or JSON file serialisation, so this seems ideal for such cases. And even if you want the locking behaviour, your scripts can still be asynchronous.

Artisan Validator

Connor Peet is on a quest to create a simple and well-documented data validator for Node. Artisan Validator (GitHub: MCProHosting/artisan-validator, License: MIT, npm: artisan-validator) allows you to define rules that get validated against objects, so you can easily hook it into a Node web application:

var validator = require('artisan-validator')();
var rules = {
  username: ['required', 'between: 4, 30', 'alphanumeric'],
  password: ['required', 'longer: 5'],
  acceptTOS: ['required', 'boolean: true']
};

validator.try(req.body, rules).then(function (result) {
  if (result.failed) {
    res.json(400, result.errors);
  } else {
    registerAccount();
  }
});

You can add custom validators with validator.validators.add, but there are quite a few built-in rules that cover JavaScript types, and various string and date formats. The error messages can be localised as well.

over a year ago

Mozilla Hacks - Dec 22

You can’t go wrong watching JavaScript talks

Late last week, I was collecting suggestions for year-end Hacks blog posts. As she headed out for the winter holidays, apps engineer Soledad Penadés gifted me “a bunch of cool talks I watched this year.” In fact, it’s a curated collection of presentations from JSConf, JSConf EU, and other recent developer conferences. Presenters include notable […] over a year ago

Late last week, I was collecting suggestions for year-end Hacks blog posts. As she headed out for the winter holidays, apps engineer Soledad Penadés gifted me “a bunch of cool talks I watched this year.”

In fact, it’s a curated collection of presentations from JSConf, JSConf EU, and other recent developer conferences. Presenters include notable Mozillians and opinionated friends: hackers, JavaScripters, teachers, preachers, and hipsters. Many talks come with links to slides. They cover diverse topics: software development, developer culture and practices, developer tools, open source, JavaScript, CSS, new APIs.

Part 1: Sole’s list

Part 2: Making video better on Firefox

Binge-watching JavaScript talks not your idea of a holiday break? If you’re watching video at all, Mozilla could use your help improving the video experience on Firefox.

Here’s how you can contribute: Download Firefox Nightly, and help us test the implementation of Media Source Extensions (MSE) to support YouTube videos running in HTML5. Over recents weeks, Firefox engineers have been working hard addressing top bugs. To get this into the hands of users as quickly as possible, we need more help testing the experience. Here’s a detailed description of the testing task, thanks to Bugmaster Liz Henry from the QA team.

File bugs using this link. Describe your platform, OS, and the steps needed to reproduce the problem.

Thank you for helping to make the Firefox Desktop video experience awesome. See you in the new year.

over a year ago

Addy Osmani - Dec 20

JavaScript Application Architecture On The Road To 2015

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 → 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 over a year ago

jQuery Blog - Dec 18

jQuery 1.11.2 and 2.1.3 Released – Safari Fail-Safe Edition

Season’s greetings! After a thoughtful review of the Naughty and Nice lists, we have decided to leave a small present under the tree to finish 2014: jQuery 1.11.2 and 2.1.3! These releases include several bug fixes to make your cross-browser development experience better. The most significant fix in this release is a workaround for a … Continue reading → over a year ago

Season’s greetings! After a thoughtful review of the Naughty and Nice lists, we have decided to leave a small present under the tree to finish 2014: jQuery 1.11.2 and 2.1.3! These releases include several bug fixes to make your cross-browser development experience better.

The most significant fix in this release is a workaround for a serious querySelector bug in Safari 8.0 and 7.1. When this bug popped up we were hopeful that it would be fixed in patch releases but that did not happen. Apple is by far the least transparent browser maker, and we have very little information about when the Webkit patch for this bug might be pulled into Safari. As a result, we have decided to patch this in Sizzle, the selector engine used by jQuery.

A bug like this one emphasizes the benefit of using a library like jQuery rather than going directly to the DOM APIs. Even modern browsers can suffer from bugs that aren’t fixed for a long time, and there are still cross-browser feature differences with several browsers in wide use such as Android 2.3. Special-case code for obscure browser issues can seem unnecessary until you spend a day trying to debug a problem in your own code caused by one. Or worse, lose a paying customer because they couldn’t use your site from their old phone.

Another bug that makes it difficult for us to test jQuery on iOS 8 is that the user agent of the simulator is incorrect so the iOS 8 simulator is not recognized by our unit test infrastructure. The fix for that issue is very simple but Apple won’t tell us if we can count on it being done. For now we’re doing our iOS 8 testing manually.

In addition, this release includes several changes inside jQuery to avoid holding onto DOM elements unnecessarily. Although the old code generally wouldn’t cause things to run incorrectly, web pages might run slowly and use more memory than necessary.

You may notice that we skipped a patch release number in the 2.x branch. We didn’t actually skip it, we built it and found a problem that caused problems when jQuery was used with node. (Many thanks to Denis Sokolov for letting us know immediately and prodding us to fix it!) Rather than shipping those files to the other CDNs, we decided to create new releases.

As far as the potential for compatibility or regression issues, we believe this is a very low-risk upgrade for anyone currently using 1.11.1 or 2.1.1. We are making this release ahead of jQuery 3.0 to ensure that you can use a Safari-safe version of jQuery without the need to review your code for compatibility with changes being anticipated in jQuery 3.0. If you do encounter bugs, in upgrading from the previous version, please let us know.

You can include these files directly from the jQuery CDN if you like, or copy them to your own local server. The 1.x branch includes support for IE 6/7/8 and the 2.x branch does not.

https://code.jquery.com/jquery-1.11.2.js

https://code.jquery.com/jquery-2.1.3.js

These updates are already available as the current versions on npm and Bower. Information on all the ways to get jQuery is available at https://jquery.com/download/. Public CDNs receive their copies today, please give them a few days to post the files and don’t be impatient. If you’re anxious to get a quick start, just use the files on our CDN until they have a chance to update.

Many thanks to all of you who participated in this release by testing, reporting bugs, or submitting patches, including Chris Antaki, Denis Sokolov, Jason Bedard, Julian Aubourg, Liang Peng, Michał Gołębiowski, Oleg Gaidarenko, PashaG, Richard Gibson, Rodrigo Rosenfeld Rosas, Timmy Willison, and TJ VanToll.

Since the last release of jQuery we have moved from a Trac installation to GitHub issues, so there are currently tickets for this release in both bug trackers. References to the Trac tickets have been migrated to GitHub issues, however, so you can use this GitHub Issues query to review all the tickets.

Thanks for all your support, and see you at jQuery 3.0!

over a year ago

Node.js Blog - Dec 17

Node v0.10.34 (Stable)

2014.12.17, Version 0.10.34 (Stable)

  • uv: update to v0.10.30

  • zlib: upgrade to v1.2.8

  • child_process: check execFile args is an array (Sam Roberts)

  • child_process: check fork args is an array (Sam Roberts)

  • crypto: update root certificates (Ben Noordhuis)

  • domains: fix issues with abort on uncaught ( over a year ago

2014.12.17, Version 0.10.34 (Stable)

  • uv: update to v0.10.30

  • zlib: upgrade to v1.2.8

  • child_process: check execFile args is an array (Sam Roberts)

  • child_process: check fork args is an array (Sam Roberts)

  • crypto: update root certificates (Ben Noordhuis)

  • domains: fix issues with abort on uncaught (Julien Gilli)

  • timers: Avoid linear scan in _unrefActive. (Julien Gilli)

  • timers: fix unref() memory leak (Trevor Norris)

  • v8: add api for aborting on uncaught exception (Julien Gilli)

  • debugger: fix when using "use strict" (Julien Gilli)

Source Code: http://nodejs.org/dist/v0.10.34/node-v0.10.34.tar.gz

Macintosh Installer (Universal): http://nodejs.org/dist/v0.10.34/node-v0.10.34.pkg

Windows Installer: http://nodejs.org/dist/v0.10.34/node-v0.10.34-x86.msi

Windows x64 Installer: http://nodejs.org/dist/v0.10.34/x64/node-v0.10.34-x64.msi

Windows x64 Files: http://nodejs.org/dist/v0.10.34/x64/

Linux 32-bit Binary: http://nodejs.org/dist/v0.10.34/node-v0.10.34-linux-x86.tar.gz

Linux 64-bit Binary: http://nodejs.org/dist/v0.10.34/node-v0.10.34-linux-x64.tar.gz

Solaris 32-bit Binary: http://nodejs.org/dist/v0.10.34/node-v0.10.34-sunos-x86.tar.gz

Solaris 64-bit Binary: http://nodejs.org/dist/v0.10.34/node-v0.10.34-sunos-x64.tar.gz

Other release files: http://nodejs.org/dist/v0.10.34/

Website: http://nodejs.org/docs/v0.10.34/

Documentation: http://nodejs.org/docs/v0.10.34/api/

Shasums:

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

8df2fdb333dd8edee59ceaf72738e3773c7863e6  node-v0.10.34-darwin-x64.tar.gz
03168c2157baff928a397b85d8a7e6731b270f9a  node-v0.10.34-darwin-x86.tar.gz
f064a252827c8129126f0e8ab3c8bf46f92506ec  node-v0.10.34-linux-x64.tar.gz
fe0343f97c35aeb2c72bfd997dafde947ff44c23  node-v0.10.34-linux-x86.tar.gz
4b3ccf37886f8056800ed174688c8782f9857d52  node-v0.10.34-sunos-x64.tar.gz
ea891434436ed91d806201eb329d3c98f7e3c6b6  node-v0.10.34-sunos-x86.tar.gz
7609d6dda6071e499a54656bbf85f16ed097c106  node-v0.10.34-x86.msi
56e2aec59ac526d3daf607c7f50c2faf3e857cff  node-v0.10.34.pkg
a342eb4d653ab48ba016c0c0c259565c822881cc  node-v0.10.34.tar.gz
c71dce9dd3f3fbff34506a4edc3e37c59e31d7bd  node.exe
ffc836802c3b2e25b38f4f73c0f044fef345e152  node.exp
3e24f9c69826f320d303795c3564994e4311879f  node.lib
8ccb4fdaaaec797e0762cea38112af5456fe3f7e  node.pdb
fa0d0c098f475d6e1d6ad74c301a2361a9ac9888  openssl-cli.exe
72772212ff62ecbf76ca468f402184e3f364de51  openssl-cli.pdb
c54153231d0003792c4431cea38b9cb733a142b5  x64/node-v0.10.34-x64.msi
b84684c92ed41a883452eb65a3010223378eb1ca  x64/node.exe
c95e2dd11dc216c4b2d5a76852d2a0e7a8b247bc  x64/node.exp
41db33520c33c576e4591771c371ae5f2644cadf  x64/node.lib
d2ebec3f34e1a7e7969bfbe3330140f253b3cf9c  x64/node.pdb
b678c997ad7747c4c35dc8c8362730fca5bad97c  x64/openssl-cli.exe
f38f6eaae3aa2b11f3835b67f2dce04f4fc0fab8  x64/openssl-cli.pdb
-----BEGIN PGP SIGNATURE-----
Version: GnuPG/MacGPG2 v2.0.22 (Darwin)
Comment: GPGTools - http://gpgtools.org

iEYEARECAAYFAlSR/MIACgkQfTP/nQJGQG3ViACcC47u19WHh+vC4rfwJOoaRBFq
4fUAnAm48HaJGYQ3sUlJlEq68LCwJfgL
=yduE
-----END PGP SIGNATURE-----
over a year ago

DailyJS - Dec 17

Node Roundup: watch-network, MailDev, node-notifier

watch-network

If you use something like Docker or Vagrant and want to listen for file notifications over the network, then watch-network (GitHub: efacilitation/watch-network, License: MIT, npm: watch-network) by Johannes Becker might come in handy. It can be used with Gulp, so you could run Gulp tasks when a specific network notification comes in.

Here’s a basic example:

over a year ago

watch-network

If you use something like Docker or Vagrant and want to listen for file notifications over the network, then watch-network (GitHub: efacilitation/watch-network, License: MIT, npm: watch-network) by Johannes Becker might come in handy. It can be used with Gulp, so you could run Gulp tasks when a specific network notification comes in.

Here’s a basic example:

var watch = WatchNetWork({
  configs: [{
    patterns: 'lib/*.coffee',
    tasks: 'something:important',
    onLoad: true
  }]
});

watch.task('something:important', function(changedFiles) {
  // ..
});

watch.initialize();

Here’s the use-case that Johannes described:

Scenario: You use Vagrant/VirtualBox in your workflow to have services and configurations in an encapsulated environment. For developing purposes you now sync a local directory into the VM using vboxfs, nfs, rsync or similar. In your VM you want to use watcher facilities for developing-concerns, but for some reason triggering inotify over the network seems to be troublesome or unreliable.

MailDev

MailDev

If you’ve ever felt like handling emails in web applications is messy, and you don’t feel like your emails are as good as they could be, then you’re not alone! I always feel like emails are annoying to develop, so I thought MailDev (GitHub: djfarrelly/maildev, License: MIT, npm: maildev) looked interesting. This module helps you test your project’s generated emails during development with a responsive web interface. It has a Node API, and there’s even a REST API so you could integrate it with other services.

Emails are displayed with WebSockets, so you don’t have to keep refreshing, and it’ll show HTML, text, and attachments.

I currently send all the generated emails to a temporary directory, then open them up when I need to. MailDev seems like a much better solution.

node-notifier

Mikael Brevik sent in node-notifier (GitHub: mikaelbr/node-notifier, License: MIT, npm: node-notifier), in response to the recent mention of trayballoon. Node-notifier tries to smooth out the differences between each platform, so you can use notification features that are present on all platforms more easily. It also supports actions on notifications.

Mikael notes that it works with node-webkit, which is cool if you’re making Node desktop apps, and it supports the following notification systems:

  • Mac: Notification Center, Growl
  • Windows: Toasters, trayballoon
  • Linux: notify-osd

Here’s an example:

var notifier = require('node-notifier');
notifier.notify({
  'title': 'My notification',
  'message': 'Hello, there!'
});
over a year ago

DailyJS - Dec 16

JavaScript Developer Survey 2014: Results

The JavaScript Developer Survey has now closed. As always the results are available to the community for further analysis:

  • Summary
  • Raw spreadsheet data (gzipped CSV)
  • Results for 2013
  • Results for 2012
♦ Browser-based developers are still the majority.

97% of readers write client-side code, while 56% said they write server-side over a year ago

The JavaScript Developer Survey has now closed. As always the results are available to the community for further analysis:

Browser-based developers are still the majority.

97% of readers write client-side code, while 56% said they write server-side code. Last year server-side development was at 28%. I’d like to think that the interest and adoption of technologies like Node will contribute to the direction of ECMAScript, because some proposals seem to go against the strides that have already been made in the Node community (the module system, for example).

The DailyJS readership is very experienced (27% said 5-10 years), so perhaps I should do more to cover advanced topics?

78% of readers said they don’t use a language that compiles to JavaScript – both this year and last year. I’ve written more about technologies like TypeScript this year, partly because I respect that project in particular, but Dart is also compelling. However, Dart was one of the least popular compile-to languages (1%). TypeScript is more popular (5%), but CoffeeScript is still the most popular (16%).

It turns out most people like semi-colons. I think they’re going to stick around in the JavaScript community because they’re used in so many other languages, but it’s always possible that styles will change over time. According to the survey results, the stylistic choices are actually similar to some of the more popular JavaScript style guides.

ES6 features are getting popular: 24% said they use ES6. I suspect that more people actually do use them, because 'use strict' is something I’ve seen in lots of JavaScript best practice articles. Also, Node frameworks like Koa use cool features like generators quite well, so I think this figure will grow over the next year.

Testing: 29% said they write tests. I was interested to see that PhantomJS is a very popular test environment (38%). I’ve mentioned many times on DailyJS that I struggle a little bit when it comes to this type of testing, because the tests seem to become brittle and break over time. However, the number of people that use PhantomJS is close to Node, so presumably most people have found a way to make it work well enough.

Jasmine and Mocha are still the most popular test frameworks, and Karma is gaining on them now as well.

61% use JSHint for static analysis. That’s 2608 people, which surprised me because I don’t often use a linter. I think it might be down to people verifying open source client-side JavaScript, but it would be interesting to find out exactly why people are motivated to lint JavaScript.

Gulp (35%) is already almost as popular as Grunt (47%). It’s amazing how quickly Gulp has been adopted, although I’ve found I can understand Gulp more readily than Grunt scripts.

When it comes to client-side dependencies, CommonJS with Browserify is at 20%, with plain old files at 30%. I think that’s interesting because Browserify is my preferred solution, but I often use plain old files because I’m working on a legacy project where Browserify is a luxury we don’t have time for.

AngularJS is strangely popular (49%). I’ve noticed that many in the JavaScript community regard React (16%) as the latest hot framework and see it as an alternative to Angular, but they do different things so I prefer to use the appropriate tool for each project. Meteor is a lot less popular than the hype had me believe (6%), but it’s possible that DailyJS readers don’t like Meteor. It’s worth noting that Backbone.js is popular, with 31%.

SublimeText won the editor wars, although a fair few readers use IDEs like IntelliJ and Visual Studio.

The most popular minimum IE is IE 9. I find that’s interesting because I still get asked to support 8 for corporate networks that can’t seem to untangle themselves from web-based legacy software (do any readers use ADP for example?)

Here are the top “other” programming languages:

  1. PHP
  2. Java
  3. C#/.NET

I still find it strange that PHP is so popular, although it’s 6 on the TIOBE index, and this is primarily a web development blog after all.

Thanks to everyone who took part in the survey! If you’d like me to run another rather than waiting for a whole year, then get in touch with your ideas.

over a year ago

DailyJS - Dec 15

Survey Closed, Predicates, Shackles

Survey Closed

The JavaScript Developer Survey 2014 has now closed. I received some updates for the survey to the GitHub repository, so you should see those the next time I run it. Thanks for the contributions!

I’ll work on writing up the results and post again when they’re ready.

Predicates

Predicates (GitHub: wookieb/predicates, License: MIT, npm: predicates) over a year ago

Survey Closed

The JavaScript Developer Survey 2014 has now closed. I received some updates for the survey to the GitHub repository, so you should see those the next time I run it. Thanks for the contributions!

I’ll work on writing up the results and post again when they’re ready.

Predicates

Predicates (GitHub: wookieb/predicates, License: MIT, npm: predicates) by Łukasz Kużyński is a set of tools for type checking and assertions. For example:

var is = require('predicates');

is.string(1); // false
is.string('test'); // true
is.undefinedOr(is.string, undefined); // true

Assertions look like this:

var assertName = createAssert(is.string, 'Name must be a string');

var Person = function(name, surname, age) {
  assertName(name);
  assertSurname(surname);
  assertAge(age);
}

new Person('Tom', 'Welling', 33); // OK!

The Predicates API guide has a list of each available method, and there’s also an interesting API design document that provides some background to the project.

Shackles

Shackles (GitHub: metaraine/shackles, License: ISC, npm: shackles) by Raine Lourie is a module for adding chaining to another library. Imagine if Underscore didn’t support chaining. You could use Shackles to create a fluent API, like this:

var chain = shackles(_);

var result = chain([1,2,3])
  .map(function (x) { return x*x })
  .filter(function (x) { return x > 2 })
  .value(); // [4,9]

You can insert values at any point in the chain with tap, and there’s also a log method that prints values with console. Logging can be overridden as well.

over a year ago
pluto/1.3.2 - Ruby/2.0.0 (2014-11-13/x86_64-linux) on Sinatra/1.4.5 (production)