Issue #231 (ES6 String Methods, JS Libs, JS Utils, Media)12/21/17
The Moneytizer
You want to have easy access to the latest header bidding technology? The Moneytizer provides a free, non-binding, turnkey platform to its publishers. If you have at least 20,000 unique visitors a month & the US is your top geo, Join our community!
|
|
With so much hoopla surrounding arrow functions, template literals, let and const, and other more mainstream ES6 features, there are a few minor additions to the language that have gone relatively unnoticed.
Three new string-related methods would fall under this category:
- String.includes() - Check if a string contains a specified string.
- String.startsWith() - Check if a string starts with a specified string
- String.endsWith() - Check if a string ends with a specified string
For the most part, these are more or less convenience upgrades to the often cumbersome-to-use indexOf() and lastIndexOf() methods. All three of the new methods return a Boolean, which simplifies their use compared to those other options that return -1 in place of "false" and the string's position in place of "true".
Example code:
|
const myString = 'Some example text.';
// Does myString contain given string
console.log( myString.includes('some') ); // false
console.log( myString.includes('Some') ); // true
// Does myString begin with given string
console.log( myString.startsWith('some') ); // false
console.log( myString.startsWith('Some') ); // true
// Does myString end with given string
console.log( myString.endsWith('text') ); // false
console.log( myString.endsWith('text.') ); // true
|
JS Bin demo
As shown in the code, the search is case sensitive, which you'd expect with string comparisons.
The includes() and startsWith() methods offer an optional parameter that defines where to start searching (default is 0). It's a little odd to use startsWith() in this way, but here's some code to show you how those work:
|
const myString = 'Some example text.';
// Start searching at specified position
console.log( myString.includes('Some', 1) ); // false
console.log( myString.includes('Some', 0) ); // true
// Start searching at position 5
console.log( myString.startsWith('ex', 5) ); // true
console.log( myString.startsWith('ex', 0) ); // false
|
JS Bin demo
Pretty simple to use. But note that in the latter two logs, I first start searching at position 5, which returns true because the string starts with the specified string at that position (i.e. not at the actual start of the string).
Finally, the endsWith() method takes an optional second parameter that redefines the length of the string for the purpose of this search. For example:
|
const myString = 'Some example text.';
console.log( myString.endsWith('text.') ); // true
console.log( myString.endsWith('ample') ); // false
console.log( /span>myString.endsWith('ample', 12) ); // true
|
JS Bin demo
The first two logs are clear. The string ends with "text.", so that returns true; bu it doesn't end with "ample" so it returns false. However, by telling the method that the string is 12 characters long, we effectively force it to think it ends with "ample", thus returning true.
These methods have strong modern browser support and MDN's articles include a polyfill for each one ( includes(), startsWith(), endsWith()), if you need deeper browser support.
Now on to this week's tools!
|
JavaScript Libraries and Frameworks
rapid.js
An ORM-like Interface and a router for your API requests. Create simple, reusable, and cleaner wrappers, define custom routes, and more for your API requests.
Voxelengine3
A Three.js WebGL voxel engine.
Angular
Google's popular web framework is now at version 5+.
Cherow
A very fast, standards-compliant, self-hosted ECMAScript parser with high focus on both performance and stability.
Chevrotain
A feature-rich parser building toolkit for JavaScript. It can be used to build parsers, compilers, and/or interpreters for various use cases.
Node.js
The popular server-side JavaScript runtime is now at version 9+.
jsdom
A JavaScript implementation of the WHATWG DOM and HTML standards, for use with node.js.
Viro Media
A platform for developers to rapidly build AR/VR applications. Supporting ARKit, ARCore, Cardboard, Daydream, Gear VR.
CxJS
Build enterprise JavaScript applications with ease. Provides a solid foundation that makes development more predictable. A perfect choice for large-scale applications such as CRM and ERP.
|
JavaScript Utilities
tweet-parser
A JavaScript module for parsing tweets into an array of entities.
Fetch Robot
Run fetch() through an iframe proxy to avoid dealing with CORS.
Cross Domain Utils
A set of utilities for dealing with cross-domain windows.
on-change
Watch an object or array for changes.
PDF Web Viewer
Add a PDF Web Viewer to Your Web App in No Time. View and annotate PDF files on the web. Works great on mobile and desktop. No server-side component required.
Reshader
A micro, highly-customisable JavaScript library to get variations (i.e. shades) of a specified color.
Superstruct
A simple and composable way to validate data in JavaScript. Makes it easy to define interfaces and then validate JavaScript data against them.
Lite Editor
A simple JavaScript WYSIWYG Editor. Focuses on inline elements, which suits block-based Content Management Systems.
z-pattern
Native pattern matching for JavaScript. Referred to as switch statement on steroids.
imaskjs
Vanilla JavaScript input mask for IE11+, for restricting form input. Includes React and Angular plugins.
remoteStorage.js
Library for storing user data locally in the browser, as well as connecting to remoteStorage servers and syncing data across devices and applications.
|
Media Tools
IconBros
700+ free and continuously growing high quality icons in SVG and PNG format.
Screen.rip
API to capture web page screenshots.
G2
A visualization grammar, a data-driven visual language with a high level of usability and scalability.
ECharts
A free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products.
Font Awesome
The popular icon set and toolkit is now at version 5+.
Literally Canvas
An extensible, open source (BSD-licensed), React-dependent HTML5 drawing widget, to embed drawing boards in web pages.
Bitmovin Video Player
An adaptive streaming HTML5 video player. The world's most intelligent and intuitive Adaptive Video Player. Play video with low delay and no buffering.
SQIP
SVG-based low quality image placeholder.
SVG Polygon Generator
CodePen by Varun Vachhar for generating custom polygons in SVG.
|
A Tweet for Thought
Here's a brief but accurate history of JavaScript's beginnings, in case you were wondering how it all got started.
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...
This is pretty neat: Reddit Favorites shows you the top books and products in various categories, linked to Amazon, based on how many times they were mentioned in comments on Reddit.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
