|
|
|
|
Issue #105 (exec(), JS Utils, Sass, Media)07/23/15
 |
Ptengine is a new generation web analytics software combining easy-to-use analytics features (event tracking, campaign tracking, conversions & funnels, page groups, etc.) and heatmaps to help you improve user experiences and increase website conversion rates.
Start your Free Trial now, no credit card required. |
If you've used regular expressions in JavaScript, you've probably used the test() method, which can be used to test if a string will match a specified regular expression. For example:
|
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'
);
console.log(result);
//["Quick Brown Fox Jumps", "Brown", "Jumps"]
console.log(result.index); // 4
console.log(result.input);
// "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!
JavaScript Utilities and Mini Libraries
angular-table
Angular directive that allows you to declare sortable tables and to add pagination with very little effort.
ngPromiseStatus
"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."
viewport.js
"Using these properties you can create a custom scrolling indicator or a navigation menu precisely reflecting the scrolling state:"
Talkie.js
"Simple slide presentation library. Responsive scaling and markdown ready."
NotifyMe
An easy way to create web notifications.
Boron
"A collection of dialog animations with React.js"
angular-data-table
"A feature-rich but lightweight ES6 AngularJS Data Table crafted for large data sets."
ngProgress
"A slim, site-wide progress bar for AngularJS."
queuer.js
"Run queue of tasks in JavaScript easily."
Complex.js
"Library to work with complex number arithmetic in JavaScript."
Spectacle
ReactJS based presentation library.
React-Motion
"A spring that solves your animation problems."
Sass and Preprocessor Tools
Crayon.css
"A list of CSS variables linking color names to hexadecimal values, usable with postCSS or with your favourite CSS preprocessor."
flexiblegs-scss-plus
A Sass-based flexible grid system.
PostCSS gradientfixer
"PostCSS plugin to rewrite CSS gradients code with existing vendor prefixes."
PostCSS Flexboxfixer
"PostCSS plugin to rewrite code with existing vendor prefixes for flexbox code (especially -webkit-)."
J2C
"A CSS preprocessor working from JavaScript objects. It provides a sizable subset of Sass in a tiny, single pass compiler."
PostCSS Nesting
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."
Sassdash
"The Sass implementation of lodash."
FormHack
A hackable Sass-based form reset for consistent, cross-browser forms.
Skeleton-Sass
The unofficial Sass version of Skeleton, the popular responsive boilerplate.
Herow
"The saving time grid in Sass."
Multimedia Tools
Svidget.js
"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."
Project EON
"An open-source chart and map framework for realtime data."
Simplemaps
"HTML5, JavaScript and Flash interactive maps of the USA and World. Easy to customize and install. Mobile-compatible."
Dolby Developer
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...
Sindre Sorhus has started a repo called Module Requests where you can get ideas for a JavaScript module or request one yourself.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
