Web Tools Weekly
What a Tool!

Issue #335  (Build a React, JS Utils, Media, Vue)12/19/19

If you really want to delve into the building blocks of a library like React, Rodrigo Pombo wrote a really nice step by step walk through on how to build a library like React in his article: Build your own React.

It might sound intimidating at first, but it's not too complex and I love the interactive way that the article displays the code blocks in the sidebar. Very different!

Build Your Own React
Rodrigo Pombo recreates this code in vanilla JavaScript

And if you're still in the mood for advanced React content, Wes Bos's Advanced React course is currently on sale. He's in the process of updating the course to include React Hooks and some GraphQL updates, but those updates will be free if you've already purchased the course.

And finally, a post on my blog from a few months ago on learning React might also interest you. It's more or less a link dump of tons of resources that aim to get you more than just superficial knowledge of building stuff in React.

Now on to this week's tools!

JavaScript Modules and Utilities

JavaScript for Beginners (Video Course)
50% off during course launch! A fun, exercise heavy approach to learning Modern JavaScript from scratch. This might be Wes Bos's best course yet!   promoted 

A simple choice-driven chatbot framework in less than 100 lines of vanilla JavaScript.

Node library for handling Gmail API push notifications using Google APIs Node.js Client.

A JavaScript library that makes your face look at the mouse pointer. Ideal for resumes or team sites. Yes, it's as weird as it sounds.

Animated typing in ~400 bytes of JavaScript, with no dependencies, emoji support, smart delete, pausing, and more.

Automatically adds deep anchor links onto any web page (e.g. to make headings deep linkable in articles). No need to set up IDs or worry about URLs and it won't touch existing IDs.

Turn a path string such as `/user/:name` into a regular expression.

Now at version 1+. Program a page to react to scroll changes (e.g. by adding classes, animations, callbacks, etc).

Express-like routing as Custom Element or standalone.

A tiny utility to recursively list all (total) files in a directory.

2kb modular JavaScript library alternative to SwiperJS (carousel/slider) with the same modern API.

Lo-fi, powerful, community-driven string manipulation library.

Media Tools (SVG, Images, etc.)

Tech Productivity
A brief weekly newsletter for tech professionals. Features articles, tips, and tools for improved productivity.   promoted

A small (3.36KB gzipped) JavaScript library that lets you draw using LEGO®-like brick shapes on an HTML Canvas element.

Set of 100 open source illustrations in AI, SVG, PNG, and EPS format.

Create amazing and fully customizable Gantt charts in no time. Unlimited styles, resizable, and includes version history.

chart.xkcd component for Vue. It's a chart library that plots sketchy, cartoony or hand-drawn styled charts.

Fresh Folk
Illustration library of people and objects, free for commercial and personal use.

Set of 70 e-commerce related icons, each in four different weights, downloadable as SVG or PNG.

Diagram generation tool. Describe your diagrams with a simple text language and automatically generate an image you can export.

Automated website screenshots service, image thumbnailer, and website-to-PDF tool.

A JavaScript library to create pretty flowcharts with ease.

Get Waves
Online tool to create and customize "wave" graphics in SVG format.

Open Doodles
Free sketch illustrations in PNG and SVG format.

Vue Tools

Tech Productivity
A brief weekly newsletter for tech professionals. Features articles, tips, and tools for improved productivity.   promoted

Reactivesearch for Vue
Vue version of Reactivesearch (ElasticSearch), UI components for building data-driven search experiences.

Use paginated resources in your Vue or Vuex app with ease.

Vue Fullscreen Lightbox
Vue version of fslightbox.js, a fullscreen lightbox component.

A simple but flexible implementation of toast-style notifications for Vue.js.

Use and implement your Vuex store with TypeScript types. Compatible with the Vue 3 composition API.

Vuex alternative based on Vue.observable().

Now at version 4+.  Standard tooling for rapid Vue.js development.

Vue Currency Input
Easy input of currency formatted numbers for Vue.js.

Official Vue.js component for CKEditor 5, the popular embeddable rich-text WYSIWYG editor.

Web APIs implemented as Vue.js composition functions.

Vue-based library that allows you to generate schema-driven forms with ease.

Easy and beautiful charts with Chart.js and Vue.

A Tweet for Thought

This is great advice for hiring a [insert JS library of the week] developer.

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

The SQL Murder Mystery is a self-directed lesson to learn SQL concepts and commands and a fun game for experienced SQL users to solve an intriguing crime.

Thanks to all for subscribing and reading!

Keep tooling,