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!

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

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

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

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

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

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

Path-to-RegExp
Turn a path string such as `/user/:name` into a regular expression.

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

a-route
Express-like routing as Custom Element or standalone.

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

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

Plexis
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

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

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

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

chart.xkcd-vue
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.

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

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

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

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

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

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

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

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

vue-stator
Vuex alternative based on Vue.observable().

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

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

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

useWeb
Web APIs implemented as Vue.js composition functions.

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

vue-chartjs
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,
Louis
webtoolsweekly.com
@LouisLazaris