Issue #271 (Regex Engine, Text Editors, JS Utils, Mobile Tools)
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.
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
An in-browser REPL supporting many programming languages.
p5.js Web Editor
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.
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.
A lean Prism highlighter component for React. Comes with everything to render Prism.js highlighted code directly to React (Native) elements, global-pollution-free.
A tiny script to spawn your favorite $EDITOR and leave what you typed in your clipboard. A poor man's vim-anywhere.
A functional HTML/CSS/JS editor in less than 400 bytes.
A Windows-based rich edit control based text editor with text prediction and other smart features.
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.
Recommended Reading for Developers
A lightweight (2.2k gzip'd), robust, modern, and flexible library to create Ajax navigations with beautiful transitions.
A tiny wrapper for Node.js threads, intended to perform heavy CPU loads using anonymous functions.
Native typewriter effect, without compromises or dependencies.
Yet another lazy load image library, this one coming in at 400 bytes.
Fast utility that robustly checks an array of URLs for live-ness.
Micro-library to split an element by words, characters, children, and more, populated with CSS variables.
A library that makes the Fetch API a breeze.
Eliminates layout thrashing by batching DOM read/write operations (~600 bytes minified and gzip'd).
The simplest way to manage state. Forget about actions, connections, reducers, and a lot of boilerplate to create and manage states.
Convert your set of strings to optimized RegExps at build time.
Mobile Tools and React Native
A flexible, smooth, GPU-accelerated sliding menu for your next web app.
Cross-platform Material Design for React Native.
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.
Responsive CSS Device frames for your landing pages.
A framework that integrates a number of different React Native components that you can easily pick from.
A UI library for React Native. Provides 20+ pure JS/ES6 components, focusing on content display and action control.
A tiny service worker script to change image quality based on connection type (2G, 3G, etc).
Turn your smartphone into a 3D controller with only a web app.
The best way to build your mobile subscription business. Complete mobile subscription toolkit for your business.
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!