Issue #291 (ES6 Maps keys, JS Utils, Build Tools, React)02/14/19
Many of you have probably already read about and used ES6's Map features, which is similar to Sets. With this feature, you have access to methods like map.clear(), map.delete(), map.set(), map.get(), and so on.
One thing that's mentioned about ES6 Maps that make them superior to the old object literals as maps technique is the fact that keys using object literals are always coerced to strings, whereas Maps allow you to use any value, including functions, objects, or any primitive. You can even use a DOM object as a key.
Here's some example code that uses three different objects as keys in an ES6 Map:
|
let myMap = new Map(),
myFunc = function () {
return true;
},
myArray = [1, 2, 3];
myMap.set(myFunc, 'This is the function value.');
myMap.set(document, 'This is the document value.');
myMap.set(myArray, 'This is the array value.');
console.log( myMap.get(myFunc) );
console.log( myMap.get(document) );
console.log( myMap.get(myArray) );
|
Try it on CodePen
As you can see, the myMap object has keys that include a function, an array, and even the document object.
I'm not entirely sure how practical or useful it would be to do this sort of thing. I'm assuming the idea here is that you're not changing the value of the document object (or the function, or the array), but you're merely associating some value with that specific object, so you can reference that value later for whatever reason.
Whatever the case, you can see how Maps are much more powerful and flexible compared to the old method of mimicking maps using object literals.
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 + 3 long-form articles
|
|
JavaScript Utilities
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
split-on-first
Split a string on the first occurrence of a given separator, instead of all occurrences as done with String.split().
flexsearch
Next-generation full text search library for the browser and Node.
x-spreadsheet
A canvas-based JavaScript spreadsheet.
primeval
A tiny (128B) utility to check if a value is a prime number.
Formee
A small (532B) library for handling form elements.
string-similarity
Finds degree of similarity between two strings, based on something called Dice's Coefficient.
Shiki
A beautiful syntax highlighter that uses TextMate grammar to tokenize strings, and colors the tokens with VSCode themes.
txi
A small, focused full-text indexing and search for any JavaScript application.
switchcase
Declarative and functional alternative to switch and if/then/else branches, supporting literals, functional tests, regular expressions, object pattern matching, and routing.
instant.page
Utility that uses just-in-time preloading to load a page just before a user clicks to it, to improve page speed and conversion rates.
i18n-literally
A simple way to introduce internationalization to your JavaScript.
Magic Grid
A simple, lightweight JavaScript library for dynamic grid layouts.
Glorious Demo
An easy way to create animate code samples, useful for slide decks and presentations.
|
Build Tools, Bundlers, Task Runners, etc.
updtr
Update outdated npm modules with zero pain.
@pika/pack
npm package building, reimagined. Helps you build amazing packages without the hassle.
npm-size
Get the install size of an npm package.
import-http
Import modules from URL instead of local node_modules.
TypeScript ESLint
Monorepo for all the tooling that enables ESLint to support TypeScript.
wpk
A friendly, intuitive, and intelligent CLI for webpack.
packtracker.io
webpack bundle analysis for every commit.
swc
A super-fast transpiler/compiler that serves as an alternative to Babel, for converting modern JavaScript for larger browser support.
Jetpack
A thin wrapper around webpack, and can be extended with any of the webpack configuration, to create a smoother developer experience.
mhy
A zero-config, out-of-the-box, multi-purpose toolbox and development environment.
rescripts
Use the latest react-scripts with custom configurations for Babel, ESLint, TSLint, webpack, etc.
|
|
Recommended Reading for Developers
|
React Tools
AST i18n
Easily migrate your existing React codebase to use internationalization.
react-peer
Send data to someone else's browser as easy as using setState().
svg-loaders-react
A React adaptation of Sam Herbert's library of SVG loaders.
use-dark-mode
A custom React Hook to help you implement a "dark mode" component for your application. The user setting persists via localStorage.
react-page-progress
Component that tracks a users progress through a page as they scroll via a thin loading bar at the top of the viewport.
react-with-gesture
Bread-and-butter utility for component-tied mouse/touch gestures in React.
react-emojione
A tiny library to use emojis in React.
React Plain Router
A 2kb React router that works exactly as expected with native JavaScript.
Sky
React component for interactive backgrounds.
react-code-input
React component for entering and validating a PIN code.
React Simple Img
A React image lazy loader that uses the IntersectionObserver API.
react-big-scheduler
A scheduler and resource planning component built for React and made for modern browsers (IE10+).
|
|
