Issue #288 (Array.sort(), CSS/HTML, Text Editors, JS Libs)01/24/19
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:
- 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
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
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.
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.
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.
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.
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.
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
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.
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.
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!