Web Tools Weekly
Tools for Web Developers

Issue #387  (Generators, React, Git/CLI, Uncats)12/17/20

Cubbit Personal Cloud
Sync store and share your files with Cubbit Cloud. Enjoy the highest security standards and stop paying monthly fees for the cloud storage space. Spoiler: there’s a big discount dedicated to Web Tools Weekly’s readers! 👇
Discover the Offer
Cubbit Personal Cloud

Up until now, I've never looked much into JavaScript's Generator functions. They were introduced way back in ES6, so there's really no excuse for not being familiar with them at this point! So let's do a quick crash course in JavaScript Generators.

MDN's article on the subject describes them and their practicality quite nicely:

"Generators are functions that can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances."

That's pretty cool! Off hand, I can't necessarily think of any specific examples where I wanted a function to do this, but I can certainly see where it can come in handy once it's in my knowledge toolbox.

I'll create a simple interactive demo to illustrate what a Generator does. The demo will include the following Generator function:

function* valuesLogger() {
  yield op.innerHTML = "Nothing";
  yield op.innerHTML = input.value;
  yield op.innerHTML = input.value;
  yield op.innerHTML = input.value;

Notice the function* syntax which tells the JavaScript engine that I want this to be a generator function. Notice also the yield keywords being used on multiple lines in the function body.

The demo has an input field and a button. The button will call the following code each time it's pressed:


The myGenerator variable is a reference to the valuesLogger() generator function. When the function is initially called, the Generator's iterator object is returned. When the button is pushed, the iterator object's next() method executes the function body up until it finds a yield keyword, then it exits the function. Each subsequent press enters the function body where it left off, again looking for the next yield.

View the full demo here

You can change the text in the input field after each button press. Notice also the logs in the console in addition to the values shown on the page. The console is logging each next() method's return value, which is an object containing:

  • The value returned when the iterator exits the function
  • A done property that indicates if the iterator has "yielded" its last value
If any of this is new and somewhat confusing, just mess around with the code a little and it'll make more sense. What I've discussed here is just the basics so I'll try to discuss more about Generators in subsequent tips.

Now on to this week's tools!

React Tools

Cubbit Personal Cloud
Sync store and share your files with Cubbit Cloud. Enjoy the highest security standards and stop paying monthly fees for the cloud storage space. Spoiler: there’s a big discount dedicated to Web Tools Weekly’s readers! sponsored 

Monaco editor wrapper for easy one-line integration with React apps without the need to use webpack's (or any other module bundler's) configuration files.

A React component for documentation sites that allow Markdown snippets to include live React examples edited in real time.

A simple and customizable notifications system for React (e.g. toast messages, alerts, popovers, etc).


React component to embed an Instagram feed.

Adds a neat animated flipping effect to a number that increases or decreases on the page.

Component wrapper for doing a collapse/expand effect on an element on the page with varying content, size, etc.

A small React hook to turn elements into fully renderable and editable content surfaces, like code editors, using contenteditable.

React Awesome Reveal
React components to add reveal animations using the Intersection Observer API and CSS animations.

Modern file-upload components and hooks for React.

A React component that adds inline auto-complete hints to form inputs.

React Flow
Now at version 8+. Customizable library for building interactive node-based editors, flow charts and diagrams.

Now at version 5+. Display PDFs in your React app as easily as if they were images.

Git, GitHub, and CLI Tools

Tech Productivity Newsletter
The best articles and tools, hand-picked, for tech professionals who want to be more productive.  promoted

GitHub API authentication library for JavaScript and Node.js.

Browser extension that makes navigating a GitLab repository feel like a breeze by providing a familiar tree structure.

Boring Cyborg
A GitHub bot to automatically label pull requests and issues and perform all the boring operations that you don't want to do.

Minimal, blazing-fast, and infinitely customizable prompt for any shell.


80s Retrowave
A retro color scheme for Windows terminal.

Git User Switch
CLI Tool to easily switch the current Git user, email, and signing key.

Reuse GitHub Actions workflows across repositories.

WinApps for Linux
Run Windows apps such as Microsoft Office/Adobe in Linux (Ubuntu/Fedora) and GNOME/KDE as if they were a part of the native OS.

A GitHub Action to allow you to cache dependencies and build outputs to improve workflow execution time.

Repo Analytics
Thorough analytics for your GitHub repositories that includes better traffic data and user analysis.

GitHub Spray
A CLI to generate sprays for your GitHub contribution history graph.

Now at version 3+. The effortless Git GUI for Windows, Mac, and Linux.

Refined GitHub
Now at version 20+, getting regular updates. Browser extension that simplifies the GitHub interface and adds useful features.

The Uncategorizables

An easy way to share and collaborate on links (built by a 14 year-old developer!).

Elasticsearch supercharged. Create relevant search experiences with NoCode, JavaScript UI components or REST APIs.

Analytics for data-driven websites. Grow your website right with the analytics toolkit that's simple, scalable, and respects the privacy of your visitors.

A timeline maker to create a beautiful online timeline for free. The premium version allows you to embed timelines on your website.

Password-free, privacy-first login authentication that’s free.

Online tool to provide fonts and CSS snippets for self-hosting using Google fonts.

Build Instant APIs from Google Sheets. Gives you an instant backend solution for all your coding projects.

A pluggable web architecture for the modern data-driven web-app, decentralized and running completely in the browser.

Create websites on your phone (iOS and Android), no programming skills required.

A screen mirroring tool that apparently allows you to mirror across platforms and devices.

Now at version 5+. A command line tool to help build, run, and test browser extensions using WebExtensions (the standard for building browser plugins and add-ons).

A Tweet for Thought

Some people just can't let go.

A Tweet for Thought

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

If you're designing or developing game UIs, you'll definitely want to check out Game UI Database, a showcase of video game UI screenshots that are categorized and searchable.

Thanks to all for subscribing and reading!

Keep tooling,