Web Tools Weekly Issue #101 (replace() with function, Sass Tools, JS Utils, Uncats)

Issue #101 (replace() with function, Sass Tools, JS Utils, Uncats)06/25/15

Support this week's primary sponsor:

Recreating an error is vitally important to fixing it. Try our powerful event recording system and capture context about your application, network, and visitor actions that led to an error. We call this Error Telemetry, and it's like having a airplane's BlackBox for your webapp.

JavaScript's String.replace() method is pretty powerful when used with regular expressions. As in the following example, you can pass a regular expression as the first argument to determine what part of the string should be replaced:

var myString = 'EXAMPLEstring';

			var myNewString = myString.replace(/[A-Z]/g, '0');

			console.log(myNewString); // "0000000string"

In the above example, I'm replacing each uppercase letter with a zero, and the result of the log is in the comment in the code.

But maybe you didn't know that the replace() method can take as its second argument a function instead of the string you want to insert in place of the found uppercase letters. For example:

function replaceFunc (a, b, c) {

			  console.log(a, b, c); // will log for each match

			  return a.toLowerCase();

			}

			var myOtherString = myString.replace(/[A-Z]/g, replaceFunc);

			console.log(myOtherString); // "examplestring"

(See demo here)

Notice the replaceFunc() function that's called as the second argument. This allows you to not only find a specific match, but to manipulate each match and then return a new value after dealing with the found substring. In this case, I'm just pointlessly converting each matched uppercase letter to lowercase, which results in the entire string being logged in lowercase on the final line. There are much more powerful things you can do here, but this should server to demonstrate how this feature works.

Here are some notes on this technique:

Notice my function expects three arguments. This could be more, depending on how many "capture" groups I've included in my regular expression. I don't have any, so the function doesn't expect any more than three arguments. The capture groups would be arguments 2, 3, 4, etc.
The first argument (a) is always the full text of the match.
Since I have no capture groups, the second argument (b) is the zero-based index of the match within the string.
The final argument (c) is the full text of the string being searched.
As shown in the demo, because the match is global (using the "g" identifier in the RegEx), the three arguments are logged for each match, so this produces 21 logs.

This feature certainly adds a lot of power to the replace() method. There's more info on this on the MDN page. Hat tip to the book Secrets of the JavaScript Ninja for this tidbit!

Now on to this week's tools!

Sass and Preprocessor Tools

Sass Boilerplate
"A boilerplate for Sass projects using the 7-1 architecture pattern."

Flex Grid Framework
A grid framework that uses flexbox and is written in Stylus.

Sassy-validation
A Sass data type validation library.

Sass Maps Plus
"Advanced map and list-map functions for all versions of Sass."

Sassy-exists
"Sass micro library for existence checks."

sass-vary
A Sass mixin for consistent theming with BEM modifiers, body classes, and more.

Frame Based Animation
"A Sass @mixin for creating traditional frame-based animations, especially with SVG. Think gifs, but scalable and with more control over combining animations together."

SassyTester
"A minimalistic function tester in Sass."

Outline
A Sass-based, simple CSS starter responsive boilerplate for any new web project.

animate-scss
"A Sassy version of Dan Eden's Animate.css."

70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF)

JavaScript Utilities and MIni Libraries

angular-storage
A client-side storage solution for AngularJS. Uses localStorage with ngCookies fallback, let's you save objects, preserves data types, and employs caching.

Marklib
A plugin that lets you add highlighting ability to paragraphs on a page.

RegExp.escape
"Returns a string with escaped regular expression characters for use within a regular expression."

iconate.js
"Transform your icons with trendy animations."

XTemplate
"A simple JavaScript library to manage HTML Fragments templates."

msngr.js
"A small library for facilitating communication between components through abstract messages within the same application be it server or client side."

local-storage
"A simplified localStorage API that just works."

is.js
"Check your data against regular expressions or known keywords."

70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF)

The Uncategorizables

Diff.io
"Difference as a service. A simple API to quantify and visualize differences."

codeprinter
An online tool to make printing code easier, avoiding some of the problems associated with printing from a text editor.

deepstream.io
"A scalable server for realtime web apps."

Wappalyzer
A Firefox/Chrome/Opera extension that that uncovers the technologies used on websites. It detects content management systems, eCommerce platforms, web servers, JavaScript frameworks, analytics tools and many more.

Caddy
"The HTTP/2 web server made for anyone."

VersionPress
Version control for WordPress. Now at version 1.x.

Carnival
"An unobtrusive, developer-friendly way to add comments to any web site."

A Tweet for Thought

Šime Vidas has a great idea for a UI to improve the experience in dealing with enabling/disabling flags in Chrome.

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...

Here's something ambitious: Recalll, an all-in-one answers engine for explorers, researchers, and programmers.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly