What a Tool!

Issue #201  (RegExp properties, JS Libraries, Testing/Debugging, Data)


A regular expression object, or RegExp, has a number of different methods and properties available to it. The most common ones are probably the exec() and test() methods. But as shown in the following code block, there are some interesting properties that you might not be familiar with:

let myRegExp = /example/ig;

// The flags property
console.log(
  myRegExp.flags
); // "gi"

// The global property
console.log(
  myRegExp.global
); // true

let myRegExp2 = /example/i;
console.log(
  myRegExp2.global
); // false

// The source property
let myRegExp3 = /([A-Z])/g;

console.log(
  myRegExp3.source
); // "([A-Z])"

// The multiline property
let myRegExp4 = /([A-Z])/m;
console.log(
  myRegExp4.multiline
); // true

JS Bin demo

In the code I've used five different properties available to gain info from a regular expression object. As many of you might know, using flags is a common technique when constructing regular expressions. In four of the five examples, I've used properties related to flags.

The flags property, for example, allows me to list the flags used. Notice they come back in alphabetical order, rather than in the order used in the regular expression. Each of the other three flags examples return a Boolean to tell me if that specific flag was used.

Finally, the one non-flags property I used is the source property. This one returns a string that contains the source text of the regular expression object.

Browser support for these is mostly good, with some exceptions. You can get more info on these on the MDN page on the RegExp object, and from there you can view the individual articles to see browser support.

Now on to this week's tools!
Support Web Tools Weekly on Patreon!
Monthly supporters of $10 or more will get a copy of both my JS/DOM e-books and my CSS e-book package.

JavaScript Library Tools & Plugins

Vue Loop
Infinite content loop for Vue.

Eagle.js
A hackable slideshow framework built with Vue.js.

react2angular
The easiest way to embed React components in Angular 1 apps.

ngx-database
A feature-rich yet lightweight data-table crafted for Angular 4 and beyond.

Angular Gauge
A highly customizable gauge directive for Angular JS apps and dashboards.

VMS
A Vue.js 2.0 Content Management System.

Element
A Vue 2.0 based component library for developers, designers and product managers.

Depercolator
Tool for converting CoffeeScript to idiomatic JavaScript and JSX.

Testing and Debugging Tools

maybe-you-meant
Catch deceptive prop typos in your react apps.

SessionStack
See your web app defects through a user’s eyes. Watch users live and record/replay. Log client and server data.

speedracer
A perf runner, like a test runner, but for performance. It runs in Chrome (headlessly if possible) and produces reports on JavaScript execution, rendering, and FPS.

Load Speed Test
Analyze a site's load speed from various international test servers.

Sitespeed.io
Now at version 5.x. A set of Open Source tools that helps make your web pages faster.

marky
JavaScript timer based on performance.mark() and performance.measure(), providing high-resolution timings as well as nice Dev Tools visualizations.

Service Worker Detector
Chrome extension. Detects if a website registers a Service Worker by reading the navigator.serviceWorker.controller property.

consolemd
Conversion tool that brings Markdown-like syntax to the browser console. 

Support Web Tools Weekly on Patreon
Contribute $10 or more and get two JS/DOM e-books + my CSS e-book package.

Databases, Content, etc.

Yak
Set up a blog effortlessly using Dropbox.

getsy
A simple browser/client-side web scraper.

google-docs-add-on
Publish to WordPress from Google Docs.

json2react
Use JSON to create React stateless components.

usql
A universal command-line interface for SQL databases.

PrexView
Transform your data from XML or JSON to high quality, beautiful and readable documents in PDF, HTML, PNG or JPG.

Myjson
A simple JSON store for your web or mobile app.

A Tweet for Thought

If you're experienced with unit tests, you might find this amusing.
 

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

Boilrplate is a curated directory of (you guessed it) boilerplates to help you kick off your projects.
 


Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly