Web Tools Weekly
What a Tool!

Issue #189  (delete operator, JS Utils, Sass, Text Editors)03/02/17

Find Out What You're Worth with Salary Info Up Front
Hired.com has 6000+ employers trying to hire front-end developers. Fill out just 1 profile and companies will apply to you.
Find out more here

JavaScript's delete operator is a handy one to understand and be cautious about, so here's a quick summary of it along with some of its quirks.

The delete operator allows you to remove a property from an object. In the following code I'm removing the "one" property:

let myObj = one: "one", two: truethree: };

delete myObj.one;


/* [object Object] { three: 3, two: true } */

View on JS Bin

The delete operator has a return value, a Boolean representing whether the property was removed. So, from the previous code, if I logged the delete line, it would return "true".

Another quirk is the fact that delete will return true even if you try to remove a non-existent property. I guess this is kind of like it's saying "item is not there" even if the action wasn't performed at that moment.
let myObj = {
  one: "one",
  two: true,
  three: 3

console.log(delete myObj.four); // still logs true

View on JS Bin

Technically, variables and functions defined with var, let, and const are properties of the global window object (assuming JavaScript in the browser). However, using delete on these is not allowed. In non-strict mode, such an operation will return false and the item won't be deleted. In strict mode, you'll get a syntax error. This happens because these properties are considered non-configurable.

The last point I'll mention here is demonstrated in the next code example, when using delete with arrays:
let myArrayOne = ['one', 'two', 'three', 'four'],
    myArrayTwo = ['one', 'two', 'three', 'four'];

// remove Array element from each array
// using 2 different techniques
myArrayOne[2] = undefined;
delete myArrayTwo[2];

// same result, both have item as undefined
console.log(myArrayOne, myArrayTwo);

// length = 4 for both

// But the item doesn't exist in one array
console.log(2 in myArrayOne); // true
console.log(2 in myArrayTwo); // false

View on JS Bin

As you can see, although the delete operator can be used to remove an item from an array, the result is slightly different from setting an array item to undefined. There's lots more info on delete in MDN's article.

Now on to this week's tools!
Did you buy my previous JavaScript/DOM tips book? I've released a new one...
NEW E-BOOK! Volume 2 of JavaScript & DOM Tips

JavaScript Utilities and Modules

Typewriter JS
A simple yet powerful native JavaScript plugin for a cool typewriter effect.

A tiny (511 byte) template engine that uses virtual DOM and some principles of the React library.

A declarative REST data loader for React + Redux.

Format large numbers in several human-readable ways. Designed for incremental games.

Library that works with Redux to validate and store values from inputs and forms.

$(document).ready() for the 21st century.

A tree data structure that emits events on updates, even if the modification is triggered by one of the leaves, making it easier to think in a reactive way.

A minimal event library for Node.js and browser.

A JavaScript interpretation of the Ruby library Scientist, a library for carefully refactoring critical paths.

Allows you to subscribe to changes in any part of Redux state.

Lambda functions over S3 objects with concurrency control (each, map, reduce, filter).

Bare minimum fetch polyfill in 500 bytes.

Functional client-side router in ~570 bytes, built on the HTML5 History API.

JavaScript library to easily add annotation functionality to any web page.

Sass and Preprocessor Tools

SCSS Only Slider
Responsive card slider with pure SCSS.

CSS George
Built on top of Less. Turns its compile-time variables into native CSS variables that can be changed at runtime in the browser.

Sass mixin to use CSS Custom Properties with Sass.

A Sass library designed to help you build based on a grid system.

The popular preprocessor Mac app is now at version 3.x.

A Windows GUI for Less.js. Website also includes an online Less compiler.

Crunch 2
Mac, Windows, and Linux app that lets you write Less, Sass, CoffeeScript, Markdown, and then automatically saves CSS, JavaScript, and HTML.

Text Editors and Code Playgrounds

A foolproof HTML editor prototype, still experimental, but the purpose is to allow easier editing/creating of HTML documents.

The goal of this project is to produce a version of Atom that runs in Chrome from Atom's source that is as faithful to the desktop version as possible.

Mustard Cutter
A helper tool for selecting common JavaScript feature tests.

Eclipse Che
A developer workspace server and cloud IDE.

A text editor using the GTK+ toolkit with basic features of an integrated development environment.

A simple web based Integrated Development Environment, mostly a simple file system tree with a text editor called ACE.

A really neat online responsive email template builder. Site also includes ready-made templates.

Vim React Snippets
A Vim snippet library for React in ES6.

prettier-eslint for Atom
Atom package to format your JavaScript using Prettier and ESLint.

A Tweet for Thought

Start with this Tweet and follow the thread through each nested tweet. You'll feel so much better about your own limitations! (Here's another starting point and here's the Tweet that started it all.)

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

The webcomponents.org website has been revamped and redesigned.

Thanks to all for subscribing and reading!

Keep tooling,