Issue #105 (exec(), JS Utils, Preprocessors, Multimedia)
(Skip to the tools section below)
console.log(/p.*g/.test('programming')); // true
console.log(/p.*g/.test('pickles')); // false
The first string ("programming") matches the regular expression, whereas the second string ("pickles") doesn't. That's just a simple way to test RegExp matches. I talked a little more about pattern matching way back in issue 12, where I also mentioned the exec() method.
What's interesting about exec(), in contrast to test(), instead of just returning true or false, the return value is an array (similar to the match() method on strings). MDN gives the following example, which I've slightly modified:
var re = /quick\s(brown).+?(jumps)/ig;
var result = re.exec(
'The Quick Brown Fox Jumps Over The Lazy Dog'
//["Quick Brown Fox Jumps", "Brown", "Jumps"]
console.log(result.index); // 4
// "The Quick Brown Fox Jumps Over The Lazy Dog"
(JS Bin demo)
You can see that when a match is found, the RegExp object itself is updated. MDN's exec() article has a nice table displaying the results of this example, which helps to show what's happening and why the returned array ends up like it does.
The array items from the second item and up are the parenthesized matches, so the array size is essentially unlimited. In this case, there are two parenthesized captures "brown" and "jumps", so those are added to the array. Also, the index property gives you the index of the match and the input property is the original string.
The only warning about using exec() is the fact that's it's slower than other methods, so only use it if you have no other choice.
Now on to this week's tools!
Angular directive that allows you to declare sortable tables and to add pagination with very little effort.
"A collection (starting with statusButton) of promise-aware Angular directives that make it easy to bind UI elements to the progress and eventual outcome of a promise."
"Using these properties you can create a custom scrolling indicator or a navigation menu precisely reflecting the scrolling state:"
"Simple slide presentation library. Responsive scaling and markdown ready."
An easy way to create web notifications.
"A collection of dialog animations with React.js"
"A feature-rich but lightweight ES6 AngularJS Data Table crafted for large data sets."
"A slim, site-wide progress bar for AngularJS."
ReactJS based presentation library.
"A spring that solves your animation problems."
Sass and Preprocessor Tools
"A list of CSS variables linking color names to hexadecimal values, usable with postCSS or with your favourite CSS preprocessor."
A Sass-based flexible grid system.
"PostCSS plugin to rewrite CSS gradients code with existing vendor prefixes."
"PostCSS plugin to rewrite code with existing vendor prefixes for flexbox code (especially -webkit-)."
a PostCSS plugin that transforms the W3C's CSS Nesting Module Level 3 syntax to more compatible CSS.
Sass Colour Function Calculator
"A tool for calculating the Sass colour function required to get from one colour to another."
"The Sass implementation of lodash."
A hackable Sass-based form reset for consistent, cross-browser forms.
The unofficial Sass version of Skeleton, the popular responsive boilerplate.
"The saving time grid in Sass."
"A robust and powerful framework for building complex data visualization widgets in SVG."
React Asset Loader
"React component for loading images and videos without affecting the page load speed."
"An open-source chart and map framework for realtime data."
Pure Dolby® audio on any platform.
A Tweet for Thought
Chris Coyier with a dark and humorous look at IoT.
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...
Thanks to all for subscribing and reading!