Web Tools Weekly
What a Tool!

Issue #288  (Array.sort(), CSS/HTML, Text Editors, JS Libs)01/24/19

Advertisement via Syndicate
Percy: Automated Visual UI Testing
Replace time-consuming manual QA to catch visual UI bugs automatically.  Percy’s all-in-one visual testing platform makes it easy to review visual UI changes across browsers and responsive widths.
Sign up for free

As you might know, using Array.prototype.sort() is much more powerful and practical when it's used with the optional second parameter, compareFunction. This allows you to define the sort order, which helps when sorting numbers.

As MDN explains, without the second parameter, "the array is sorted according to each character's Unicode code point value, according to the string conversion of each element."

To demonstrate the weirdness of this method, which has been around since the first version of ECMAScript, I'll sort the following array, which contains a number of not-so-typical values:

let myArray = ['one', 'two', 'apple', 'mango', '', true, false, 'null', Infinity, NaN, null, 0, undefined, 6, 100, undefined, -3];

Examples here include:

  • Booleans
  • null
  • Infinity
  • Multiple undefined slots
  • Positive and negative integers

As mentioned, without the second parameter, all values will be sorted after being converted to strings. Here's the result when calling sort() on this array:


// ["", -3, 0, 100, 6, Infinity, NaN, "apple", false, "mango", "null", null, "one", true, "two", undefined, undefined]

Try it on CodePen

Things to note:

  • The empty string is sorted to the front
  • Numbers are next, but they aren't sorted numerically, the are sorted lexicographically
  • Infinity and NaN both come before "apple" because strings starting in uppercase will appear before any strings starting in lower case
  • "null" comes before null
  • true and false are treated as lowercase strings
  • All undefined slots are sorted to the back

Again, the best way to use Array.sort() is when incorporating the compareFunction parameter, but if you choose to use it without compareFunction, it's good to know some of these quirks.

Now on to this week's tools!

Buy my brand new JS/DOM e-book in EPUB, PDF, MOBI format!

JS & DOM Tips Volume 3 >

Includes 54 tips plus 3 long-form articles/guides
JavaScript E-Books

CSS and HTML Tools

Percy: Automated Visual UI Testing
Replace time-consuming manual QA to catch visual UI bugs automatically. Percy’s all-in-one visual testing platform makes it easy to review visual UI changes across browsers and responsive widths.     sponsored via Syndicate 

Immutable Styles
A library for styling web interfaces with a focus on predictability and robustness. Uses immutability to remove side effects often tied to CSS, allowing bugs to be caught ahead of time.

Developing an Accessibility Statement
WAI/W3C tool that helps you create an accessibility statement for your website or app. You can download the statement you created and further customize, style, and brand it.

CSS Feature Toggles
Chrome extension. A DevTools extension to toggle support of selected CSS features for testing progressive enhancement fallbacks.

Project Wallace
Analyze your CSS and keep track of changes in complexity and branding. Share your statistics with everyone in your team and get conversations going.

Preview tool for CSS background blend modes.

Embed any file into an encrypted, self-decrypting HTML file.

Color Koala
A color palette generator to help you create gorgeous colors for your projects.

Now at version 10+ (details). A performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles.

A gradient shape editor that helps you discover and explore the power of CSS gradients.

A webpack loader to create TypeScript declarations for CSS Modules.

JavaScript utility that allows you to create divs with animated, wiggly borders.

Custom Elements made available for any node, and through CSS selectors.

Wes Bos is Having a NEW YEAR Sale on all Courses:

Text Editors, IDEs, etc.

Bracket Pair Colorizer
VSCode extension that colors matching parentheses to help you identify paren pairs in deeply nested areas of code.

Like Sketch but with interactive components, box model layout, and React export.

All-language autocompleter for VSCode, Sublime, Vim, Atom, and Emacs. Uses machine learning to provide responsive, reliable, and relevant suggestions.

Cool Beans
An IDE distribution that packages the best there is in the Apache NetBeans ecosystem, polishes it, fixes minor annoyances and serves them to you in a clean bundle.

Chrome extension. Instant code editor/REPL under any YouTube video. Watch YouTube tutorials and write code at the same time.

VSCode extension that provides refactoring tools for your React, JavaScript, or Typescript code base.

A live editor with every package on npm. Quickly create JavaScript and Markdown demos that import any package on npm. No more messing with package.json and node_modules.

Mac app. A code playground and scratchpad to auto-evaluate JavaScript and import node modules with TypeScript and Babel support.

Write articles, code, notes or meeting minutes with friends – wherever they are. Ideal for extreme programming sessions, tutoring, and creative writing.

A complete text editor for your terminal, built with Rust.

Open in CodeSandbox
Chrome extension that adds an "open in CodeSandbox" button to GitHub repos.

Recommended Reading for Developers
Vue.js in Action   Get Programming with JavaScript Next   Progressive Web Apps
Have you written a book for developers that's available on Amazon? Reply to this email and let me know. I'll consider including it here. No charge.

JavaScript Libraries and Frameworks

A JavaScript library for running Open Neural Network Exchange (ONNX) models on browsers and on Node.js.

A better syntax for JavaScript. Read and write code using LenientJS syntax, save and load standard JavaScript.

A framework for writing mutable narratives, useful for creating games.

Now at version r100 (details). An easy to use, lightweight, 3D library that provides Canvas 2D, SVG, CSS3D, and WebGL renderers.

A template engine written in JavaScript. Write templates that are blazing fast and can be rendered in milliseconds, server-side or client-side.

Now at version 7+ (details). An insanely fast, React-like library for building high-performance user interfaces on both the client and server.

The mega-popular multi-platform app framework is also now at version 7+ (details).

A small multi-paradigm front-end library supporting: template literals in place of JSX, multi-root templates in HTML, t-for, t-foreach, optional two-way data binding, and lots more.

React done in 160 lines of JavaScript.

A Tweet for Thought

I can't argue with this.

Send Me Your Tools!

Made something? Send links via Direct Message on 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...

And speaking of text editors, this is really cool: Programming Fonts Test Drive is a playground that allows you to test out different monospace fonts often used for code editors and code samples in documentation.

Thanks to all for subscribing and reading!

Keep tooling,