Web Tools #396 - Frameworks, JS Utils, React

In case you missed it, Wes Bos recently launched an update to his super-famous course Fullstack Advanced React & GraphQL. If you've previously purchased the course, the update is totally free. This is great because doing React in this kind of full-stack environment definitely takes a while to master. With new changes to the technologies, it can help to go back through the lessons again.

As Wes explains on the site:

"The course has been entirely updated and re-recorded for the latest in React.js, Hooks, Apollo 3 and the Keystone Headless CMS."

The course walks you through building a full stack online clothing store called "Sick Fits", complete with full shopping cart functionality and search. The final part of the course focuses on testing.

Full disclosure: If you purchase the course using the links here, I'll get a cut, so consider it another way to help support this newsletter – and you get a quality product in return. If that particular course is a little out of your league (it's currently out of mine!) you can try one of the others he offers:

• Beginner JavaScript
• React for Beginners
• ES6 for Everyone
• Master Gatsby

All courses have a money-back guarantee and offer free updates for life. Wes's are definitely the best courses on the market. I've literally never heard anyone say anything bad about their experience with his products.
 

Now on to this week's tools!

Front-end Frameworks

Landy
A free React landing page template designed for developers and startups.

Windmill UI
A set of components that includes an admin dashboard template, a PWA-ready React dashboard, and a library of React components for building interfaces.

Next.js Course Template
A Next.js template for creating interactive courses with React.

Tailwind UI Kit
250+ free components and templates based on Tailwind CSS 2.0 and compatible with React, Vue, and Angular apps.

Statik UI
Not free, but this is another Tailwind-based library of fully responsive UI kits and fast code starters to help you build websites in no-time.

Wicked Blocks
An open source growing collection of layout blocks and components built with Tailwind 2 and ready to copy/paste into your projects.

UIsual
Free landing page templates in grayscale (so they're ready to customize), built with plain HTML and CSS, no JavaScript.
 
Vitesse
An extremely opinionated Vite starter template that includes file-based routing, component auto-importing, markdown, internationalization, PWA, Tailwind, and more.

Equal UI
A Vue 3 components library with 30+ components, based on TypeScript and a custom design system.

Devfolio
A modern and production-ready personal portfolio plus blog template built with Gatsby and Tailwind.

Release Radar:

• Kickstand UI - Design system now at version 2+
• React-Boostrap - Now at version 1.5+
• PrimeReact - Now at version 6+

JavaScript Utilities

post-me
Communicate with Web Workers and other windows using a simple Promise based API.

tidy.js
Includes a slew of functions for tidying up your data. Sort of like Underscore.js for data wrangling.
 
Cheval
Copy to clipboard using JavaScript without writing any code. Just include the script and the necessary HTML.

Tagger
Zero-dependency, vanilla JavaScript utility for adding 'tagging' functionality to a form input.

Encrypt Storage
A wrapper for Local Storage that provides a little more security by encrypting the stored data with crypto-js.

Smoldash
A tiny Lodash alternative that aims to be a smaller with modern browsers in mind.

RevoGrid
A spreadsheet-like component compatible with popular JavaScript frameworks and boasting better performance due to fewer DOM updates.

chunkify
Utility to split an iterable (like an array) into evenly sized chunks. Possibly useful for splitting very large groupings for better performance.

Handtrack.js
A library for prototyping real-time hand detection directly in the browser.

TS Belt
A library for functional programming in TypeScript that solves the problem of the existence of both undefined and null.

React Tools

google-pay-button
React component and custom element that enables use of the Google Pay API in your app.

react-use-scrollspy
React Hook to automatically update navigation based on scroll position.

use-count-up
React/React Native component and hook to animate counting up or down to a number.

uniforms
A React library for building forms from any schema, with support for all schemas and themes.

react-hot-toast
A lightweight, customizable, and beautiful notifications library for React, for producing "toast" notification messages.
 
ReacType
A visual prototyping tool for React to visualize your app architecture dynamically, employing a drag-and-drop canvas display and a real-time component code preview.

react-rnd
A React component to make an element resizable and draggable.

Remotion
A suite of libraries for creating videos programmatically using React.

react-blessed
A React custom renderer for an old project called blessed, a high-level terminal interface library for Node.js.

react-hcaptcha
A React-based drop-in replacement for reCAPTCHA that protects user privacy, rewards websites, and helps companies get their data labeled.

Homebase React
Makes state management painless by enabling you to plug a relational graph database into your React application with just three lines of code.
 

A Tweet for Thought

I never thought the Flash vs. HTML5 debate would resurface again, but here it is. Lars makes some good points here.

 

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 looking to earn a tech certification but don't have much of a budget right now, you'll want to check out Free Certifications, a GitHub repo containing a curated list of free courses and certifications.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  |  Patreon  |  GitHub Sponsors  |  E-Books  |  Advertise