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

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:

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:

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!

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.

Blendy
Preview tool for CSS background blend modes.

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

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

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

css-modules-typescript-loader
A webpack loader to create TypeScript declarations for CSS Modules.

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

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

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.

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

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

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

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

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

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

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

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

JavaScript Libraries and Frameworks

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

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

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

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

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

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

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

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

Gooact
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,
Louis
webtoolsweekly.com
@LouisLazaris