Web Tools Weekly Issue #71 (Enumerable Properties, JS Libs, GitHub Tools, Uncats)

Issue #71 (Enumerable Properties, JS Libs, GitHub Tools, Uncats)11/27/14

I've looked around for a number of definitions for enumerable vs. non-enumerable properties in JavaScript. The best I found is David Flanagan's in JavaScript: The Definitive Guide. He says: "Built-in methods that objects inherit are not enumerable, but the properties that your code adds to objects are enumerable."

The following code snippet demonstrates that objects in JavaScript can have both kinds of properties, accessible with different methods, and we can add a non-enumerable property if needed:

myObj = { 
  color: 'blue',
  size: 'small', 
  height: 10
};

console.log(Object.getOwnPropertyNames(myObj));
// ["color", "size", "height"]

Object.defineProperty(myObj, 'name', {
  value: 'ObjectName',
  enumerable: false
});

console.log(Object.getOwnPropertyNames(myObj));
// ["color", "size", "height", "name"]

console.log(Object.keys(myObj));
// ["color", "size", "height"]

(View on JS Bin)

To summarize, here's what we're doing in the code above:

Create an object with three custom properties.
List the properties in the console.
Define a new property that's non-enumerable
List the properties again
List them with a method that doesn't have access to non-enumerable properties.

Three different methods are used in this example: Object.getOwnPropertyNames(), Object.defineProperty(), and Object.keys(). The Object.defineProperty() method lets us set our own custom property, in which we can also define whether the property is enumerable.

The Object.getOwnPropertyNames() method is used twice, to demonstrate that it displays our custom property. Notice, however, that when we use Object.keys(), the non-enumerable property is not in the output.

All three of these methods are part of ES5, and thus available in IE9+. The only exception is defineProperty(), which is available in IE8 but only on DOM elements, not on custom objects.

There's much more info on these concepts on MDN:

Now on to this week's tools!

Support Web Tools Weekly: 384 pages of CSS for $7

JavaScript Frameworks and Libraries

Blip
"A lightweight JavaScript library that wraps the Web Audio API, abstracting away the AudioContext, and simplifying node creation and audio routing."

laroux.js
"A jQuery substitute for modern browsers and mobile devices."

client-storage
"Namespaced client storage for AngularJS. Writes to localStorage, with cookie fallback. No external dependencies other than Angular core; does not depend on ngCookies."

Espresso.js
A tiny MVC framework inspired by Backbone and React with a focus on simplicity and speed, for crafting user interfaces.

LokiJS
A fast, in-memory document-oriented datastore for node.js and the browser.

Paperclip.js
"Compiled templates for the Browser, and NodeJS. A simple, yet powerful reactive template engine built for speed, and extensibility."

FKit
"A functional programming toolkit for JavaScript. It provides many functions for solving common problems with functions, objects, arrays, and strings."

HTMLjs
"A JavaScript MVVM (a modern variant of MVC) framework that makes it easier to create rich, desktop-like user interfaces with JavaScript."

verb
"A CAD Library for the Web." Pretty impressive on-page examples.

way.js
"A simple, lightweight, persistent, framework-agnostic JavaScript library that allows you to bind DOM elements to an in-memory datastore (with no to little JS code)."

Skate
"A tiny, performant, syntactic-sugar for binding behaviour to custom and existing elements without ever having to worry about when your element is inserted into the DOM."

soma.js
"A framework created to build scalable and maintainable JavaScript applications" and giving you "tools to create a loosely-coupled architecture broken down into smaller pieces."

Git, GitHub, and Command-Line Tools

Astral
"Pulls down all of your starred repositories on GitHub and allows you to organize them using one or more tags."

gist-it
"Lets you take a file from your GitHub repository and embed it into any webpage, just like a gist. Syntax highlighting by google-code-prettify."

Gitinfo
"Get info about a local GitHub repository. Gitinfo is designed to be used during the runtime of the script. Querying the data such as 'branch' will reflect the local state of the repository."

LastPass CLI
"C99 command line interface to LastPass.com... designed to run on GNU/Linux, Cygwin and Mac OS X."

maim
Allows you to take a screenshot of your desktop, or a predetermined region or window of your desktop, and save it in any format.

github-todos
"A git hook to convert your TODOs into GitHub issues."

Bug life
"A visualization of repository issues from 2 perspectives: Amount of issues labels during the lifespan of the repo; Lifespan of an issue (since creation until closing)."

slap
"A Sublime-like terminal-based text editor that strives to make editing from the terminal easier."

Codetree
"GitHub Issues, Managed. Sprinkles just enough functionality on top of GitHub issues to eliminate the need for a bloated project management app."

The Uncategorizables

Themosis Framework
"A framework for WordPress developers. Build custom websites and applications with WordPress."

Hooks
"Get desktop notifications with JavaScript, PHP, and Swift."

LinkTexting
"Add a text-to-download form to your app website so your users can text themselves a download link."

CipherShed
"Free ... encryption software for keeping your data secure and private."

MightyName
A random available domain name generator.

VMUX
"Truly private conversations. Secure peer-to-peer text, audio and video chats in your browser."

SlideCaptain
"Enables you to insert nearly any web content into your presentation. With SlideCaptain, your presentations come alive with nearly any content from the web."

Support Web Tools Weekly: 384 pages of CSS for $7

A Tweet for Thought

Congrats to Smashing Magazine for reaching a virtual perfect score on PageSpeed Insights for both desktop and mobile. Now the rest of us need to get to work on accomplishing the same!

Suggestions / Corrections

Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.

Before I Go...

Everyone should check out snapnote.io, a ridiculously easy way to add annotations to any image and then share it with someone or download it.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly