Web Tools #387 - ES6 Generators, React Tools, Git/CLI, Uncats

Advertisement

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:

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

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

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

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

react-instagram-embed
React component to embed an Instagram feed.

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

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

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

react-uploady
Modern file-upload components and hooks for React.

react-autocomplete-hint
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.

React-PDF
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

auth.js
GitHub API authentication library for JavaScript and Node.js.

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

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

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

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

Vershd
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

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

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

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

ChronoFlo
A timeline maker to create a beautiful online timeline for free. The premium version allows you to embed timelines on your website.
 
AuthUse
Password-free, privacy-first login authentication that’s free.

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

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

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

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

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

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

 

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 everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  /  Patreon /  GitHub Sponsors