Issue #271  (Regex Engine, Text Editors, JS Utils, Mobile Tools)09/27/18

The Fast and Visual Way to Understand Your Users Hotjar is everything your team needs to: ✓ Get ‘in-the-moment’ visual feedback ✓ See how people are really using your site ✓ Uncover insights to make the right changes Try it for free today

A while ago I came across an article published last year called Build a Regex Engine in Less than 40 Lines of Code by Nick Drane that I thought was worth including in this week's intro.

This is just a really neat, step-by-step tutorial that writes a rudimentary regular expression engine in JavaScript. Though it's not perfect, the final code is available to install via npm for testing.

This is one of those articles that won't have any direct practical use. But I love articles like this because the concepts and problem solving are valuable training for anyone trying to master JavaScript.

It starts out fairly easy to follow but gets a little more complex towards the second half. By analyzing his code, you'll better understand a number of concepts including how the return statement works in functions, recursive functions (i.e. functions that call themselves), use of various string methods like slice(), and how to write some super-elegant code.

Now, I'm not crazy about all the choices he makes (e.g. omitting curly braces in some if/else constructs), but overall this is a great little exercise in writing clean, functional code. Well worth a read.

Now on to this week's tools!

Text Editors, Code Playgrounds, IDEs

The Fast and Visual Way to Understand Your Users
Hotjar is everything your team needs to get ‘in-the-moment’ visual feedback, see how people are really using your site, and uncover insights to make the right changes.    sponsored via Syndicate 

Nodebook
An in-browser REPL supporting many programming languages.

p5.js Web Editor
An online editor for p5.js, a JavaScript library for creating graphic and interactive experiences.

Web Maker
Now at version 3+ (details). A blazing fast and offline web playground in your browser.

Asynchronous Lint Engine
A plugin for providing linting in NeoVim 0.2.0+ and Vim 8 while you edit your text files, and acts as a Vim Language Server Protocol client.

Pulumi
Create, deploy, and manage cloud native applications and infrastructure in your favorite language, using an open source platform that enables sharing, reuse, and safe and predictable changes in a team environment.

prism-react-renderer
A lean Prism highlighter component for React. Comes with everything to render Prism.js highlighted code directly to React (Native) elements, global-pollution-free.

vimclip
A tiny script to spawn your favorite $EDITOR and leave what you typed in your clipboard. A poor man's vim-anywhere.

TinyEditor
A functional HTML/CSS/JS editor in less than 400 bytes.

PredictEd
A Windows-based rich edit control based text editor with text prediction and other smart features.

Solis
Mac app. A Live Design Output that integrates seamlessly with your favourite code editor. Real-time, multi-viewport previewing of HTML, CSS, SCSS and LESS as you write it.

JavaScript Utilities

BeerSlider
A vanilla JavaScript keyboard accessible plugin for any before-after comparison of two images.

Highway
A lightweight (2.2k gzip'd), robust, modern, and flexible library to create Ajax navigations with beautiful transitions.

Microjob
A tiny wrapper for Node.js threads, intended to perform heavy CPU loads using anonymous functions.

T-Writer.js
Native typewriter effect, without compromises or dependencies.

Lazyestload.js
Yet another lazy load image library, this one coming in at 400 bytes.

check-links
Fast utility that robustly checks an array of URLs for live-ness.

Splitting.js
Micro-library to split an element by words, characters, children, and more, populated with CSS variables.

TweenJS
A simple but powerful JavaScript library for tweening and animating HTML5 and JavaScript properties. Works stand-alone or integrated with EaselJS.

zlFetch
A library that makes the Fetch API a breeze.

fastdom
Eliminates layout thrashing by batching DOM read/write operations (~600 bytes minified and gzip'd).

Reworm
The simplest way to manage state. Forget about actions, connections, reducers, and a lot of boilerplate to create and manage states.

regexgen.macro
Convert your set of strings to optimized RegExps at build time.

Mobile Tools and React Native

SuperSlide.js
A flexible, smooth, GPU-accelerated sliding menu for your next web app.

react-native-paper
Cross-platform Material Design for React Native.

iDevice.js
A library you can include in your code to tell you which iOS device is being used right now, based on its GPU and screen size.

responsiveDevices.css
Responsive CSS Device frames for your landing pages.

rnset
A framework that integrates a number of different React Native components that you can easily pick from.

Teaset
A UI library for React Native. Provides 20+ pure JS/ES6 components, focusing on content display and action control.

pwa-connection-type
A tiny service worker script to change image quality based on connection type (2G, 3G, etc).

web-riimote
Turn your smartphone into a 3D controller with only a web app.

RevenueCat
The best way to build your mobile subscription business. Complete mobile subscription toolkit for your business.

react-native-ui-lib
UI toolset and components library for React Native.

A Tweet for Thought

This bookstore has its categories organized quite well I'd say.
 

Send Me Your Tools!

Made something? Send links via Direct Message on 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...

MockRabbit is a platform for programmer job interview practice. You upload your resume and AI technology will prepare questions based on your skills.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris