DailyJS

DailyJS

The JavaScript blog.


Tagchrome
Featured

libraries design modules chrome lint

fixmyjs, Front-end Development Tools

Posted on .

fixmyjs

fixmyjs

Sindre Sorhus sent in fixmyjs (GitHub: jshint / fixmyjs, License: MIT, npm: fixmyjs) by Josh Perez. It automatically rewrites JavaScript based on linting rules. There's a command-line tool available through npm, and a web version.

It supports things like semi-colon insertion, case correction, missing curly braces, and removes debugger statements. Sindre said Addy Osmani wrote an article about it, where he points out some important things that fixmyjs can get wrong:

As mentioned earlier, the current version of the module uses Escodegen, which rewrites your source and doesn't take into account original styling information (i.e it will strip it). This makes it easier for the author to support complex new rules as they operate with an AST rather than relying on less reliable approaches like string replacement.

You can avoid this by using the legacy option.

If you use Atom, then you can install Sindre's Atom plugin for fixmyjs. It uses legacy by default, and can be run on a whole file or a selection.

56 Expert's Favourite Front-end Tools

Bauke Roesink sent in a big list of front-end development tools, picked by 56 experts. Coincidentally, I happened to notice Sindre Sorus is on the list.

Several people picked Chrome, probably because the development tools have progressed so much over the last year or so. It's increasingly common to see people testing design ideas or puzzling over CSS quirks by editing HTML and CSS in the inspector. I've recently started using the device emulation tab a lot for responsive designs as well.

Featured

testing node modules http npm chrome

Node Roundup: Newman, selenium-test-runner, ncc

Posted on .

Newman

Newman (GitHub: a85 / Newman, License: Apache, npm: newman) by Prakhar Srivastav is a command-line collection runner for Postman, the HTTP client for Chrome.

Newman allows you to easily run a collection, like this:

newman -u https://www.getpostman.com/collections/cb208e7e64056f5294e5 -e devenvironment.json  

In this example, -e is used to supply a JSON file that has configuration options for Postman's environment. Newman's readme has more examples and documentation.

selenium-test-runner

selenium-test-runner (GitHub: tkambler / selenium-runner, License: MIT) by Tim Ambler is a library for writing Selenium tests in a blocking style. It uses node-fibers so you can avoid promises and chained expressions.

ncc

ncc

ncc, or node-crome-canvas, (GitHub: indus / ncc, License: MIT, npm: ncc) by Stefan Keim, uses the Chrome remote debugging protocol to build a bridge to the native HTMlCanvasElement and its 2d-Context. That means you can send drawing operations from the server to Chrome.

Here's an example:

var ncc = require('ncc')

var canvas = ncc();

canvas.width = canvas.height = 256;

var ctx = canvas.getContext('2d');

ctx.fillStyle = 'slateGray';  
ctx.fillRect(28, 28, 200, 200)();  

Featured

chrome extensions browsers

Live Reloading Chrome Apps, Chrome Extensions with React, sendMessage Tutorial

Posted on .

Live Reloading Chrome Apps

The Chrome Store itself is a pile of rubbish apps with very few exceptions.

Working with Chrome extensions and apps is pleasant enough in some ways -- the JavaScript APIs are generally intuitive, and you can make native-feeling UIs without too much effort. However, the development experience feels a little bit dated and painful in places.

Konstantin Raev sent in Live Reloading Chrome Apps, an article about using Gulp with Chrome apps. It shows how live reloading isn't as easy as it could be, and how to fix it. There's also a full example on GitHub: bestander / clock-chrome-app-livereload-example.

Creating Chrome Extensions with React

Brandon Tilley sent in Creating Chrome Extensions with React:

If you're into client-side web development to any extent, you've probably heard of Facebook's React library. I was working on a Chrome extension, and decided to see how well React fit in to the development I was doing.

He also uses Browserify as well, which I'm interested in because I tried using RequireJS for sharing code between Chrome extensions and Firefox add-ons, and I struggled to get it to work in Firefox. My Firefox add-ons are using the Jetpack SDK rather than the old XUL way.

Passing data around in Chrome extensions

Passing data around in Chrome extensions by Erica Salvaneschi is an introduction to using chrome.runtime.sendMessage and addListener:

We wanted to get data from the current web page and then use it to populate a form that appears in a new window. It was easy to create a context menu item that triggered an event, but sending data based on the current page to the new window wasn't obvious.

You might find this useful if you're just getting into Chrome extensions and want more concrete examples than what Google provides.

Featured

jquery ui chrome galleries tables

Dynatable, nanoGallery, jQuery Audit

Posted on .

Dynatable

Dynatable

Dynatable (GitHub: JangoSteve / jquery-dynatable, License: AGPL or commercial) by Steve Schwartz is a library for displaying JSON data as friendly and efficient HTML tables. It provides a framework for searching, sorting, and filtering data. It uses jQuery, and can be invoked with $.dynatableSetup.

Dynatable can convert plain HTML tables into JSON. The properties for the JSON can be camelCase, but other styles are supported, including dashed and underscore. This is set with the table.defaultColumnIdStyle option.

JSON can also be fetched from a server. In this case you can use the dataset option:

$('#my-ajax-table').dynatable({
  dataset: {
    ajax: true,
    ajaxUrl: '/dynatable-ajax.json',
    ajaxOnLoad: true,
    records: []
  }
});

It expects a corresponding skeleton table node, with thead and tbody.

The documentation is thorough and includes examples for each of these things, and the other features provided by the library.

nanoGallery

Nobody's sent me a jQuery gallery for a while. nanoGALLERY (GitHub: Kris-B / nanoGALLERY, License: CC BY-NC 3.0) by Christophe Brisbois supports Flickr and Google+, and supports responsive layouts. You can get a gallery going with a Google account like this:

$('#elt').nanoGallery({
  kind: 'picasa',
  userID: 'you@example.com'
});

It comes with CSS, but you can theme it. It displays a gallery navigator using folders, so it could scale up quite well to a large collection.

Documentation for the main options and expected markup can be found in the project's readme file.

jQuery Audit

jQuery Audit (GitHub: zertosh / jquery-audit, License: MIT) by Andres Suarez is a Chrome Developer Tools extension for auditing jQuery. It adds a sidebar (under Elements) that includes details of delegated events and internal data.

The documentation has explanations of the main features, and instructions on how to use the extension properly. For example, you can dig into bound functions for event handlers which can be bound differently based on the library.

Featured

jquery chrome amd build

GitHub Avatar Chrome Extension, AMDClean

Posted on .

GitHub Avatar Chrome Extension

GitHub Avatar Chrome Extension

Writing Firefox add-ons or Chrome extensions can be off-putting for those of us who are good at JavaScript but not so great at browser plugin APIs. Anas Nakawa sent in chrome-github-avatars (GitHub: anasnakawa / chrome-github-avatars, License: MIT) which is a Chrome extension for displaying GitHub avatars on the news feed page.

It might seem like a modest extension, but the reason I liked it was he used a Yeoman generator. Anas' project includes all the stuff I'm familiar with, like Bower and jQuery, but also things that I'm not too familiar with, like Chrome's manifest.json. It seems cool that you can use tools popular in the JavaScript community to create browser plugins.

AMDClean

AMDClean (GitHub: gfranko / amdclean, License: MIT) by Greg Franko is a build tool for converting AMD code into standard JavaScript that works with RequireJS's optimiser.

By incorporating amdclean.js into the build process, there is no need for Require or Almond.

Since AMDclean rewrites your source code into standard JavaScript, it is a great fit for JavaScript library authors who want a tiny download in one file after using the RequireJS Optimizer.

So, you get great code cleanliness with AMD, reduced file sizes, improved code readability, and easy integration with other developers who may not use AMD.

Greg notes that it also supports Grunt, so it should be easy to drop into your existing projects.