Web Tools #436 - JS Courses, Frontend Frameworks, SVG, JSON/DB

Advertisement

It's possible you're going to have some down time in December, so if you're looking to refine, update, or supplement your current coding skills, now is a good time to check out deals on web development courses.

The ones I always recommend are from Wes Bos who, as usual, is having his annual half-price sale on all his courses. All the links here are affiliate links, so I'll get a cut if you make a purchase – just another way you can support this newsletter.

• Master Gatsby - Build modern websites with React, Gatsby and friends. Learn to use a headless CMS, Scoped CSS, and Serverless Functions.
• Beginner JavaScript - A fun, exercise heavy approach to learning Modern JavaScript from scratch. This one is for absolute beginners to intermediate devs who want to absolutely nail their JS Fundamentals.
• Advanced React and GraphQL - Build a full-stack online store in React.js, Keystone.js, Apollo, GraphQL, Next.js and Stripe with server-side rendering and JWT based authentication.
• React For Beginners - the best way to get up to speed on React fundamentals
• ES6+ For Everyone - Recently updated to include Async + Await. An update for anyone familiar with JavaScript but looking to update to the modern syntax and features.
• Learn Node - Build a Server Side application and learn the ins-and-outs of Express, Routing, Middlewares, session-based auth, and MongoDB.

And Wes just announced that he's currently working on updates to the Advanced React course (some of which has already been pushed out). Any course you've purchased gets free updates for life, and Wes is always keeping his up to date.

He also announced that he's working on a new course covering TypeScript. You can sign up to get notified when that's ready, but I'll definitely mention it here when it's out.

Now on to this week's tools!

Front-end Frameworks

Testim.io
Testim is an AI-powered UI test automation tool that gives developers an easy way to author and maintain cross-browser tests. Spend less time creating, editing, and updating UI tests and more time innovating in your app. Start testing for FREE. sponsored 

Layout Patterns
From Google Developers' web.dev, a collection of layout patterns built using modern CSS APIs that will help you build common interfaces such as cards, dynamic grid areas, and full-page layouts.

Pico.css
A minimal CSS framework for semantic HTML. Elegant styles for all natives HTML elements without classes, and dark mode automatically enabled.

Dripsy
Unstyled, responsive UI primitives for React Native and web. Includes TypeScript support, a simple API, dark mode, theming features, atomic classes, and more.

Hydrogen
In developer preview. A React-based front-end framework that includes structure, components, and tooling for building custom storefronts in Shopify.

Semi Design
A modern, comprehensive, flexible design system that gives you all modular blocks you need to build sensible web apps and SaaS products.

Xtend UI
A powerful front-end library of Tailwind components enhanced by vanilla JavaScript that helps you build interfaces with advanced interactions and animations.

Vant
A set of 65+ lightweight mobile UI components built on Vue, written in TypeScript, with each component averaging about 1kb in size minified and gzip'd.

React Native Universal Monorepo
A React Native boilerplate supporting multiple platforms: Android, iOS, macOS, Windows, web, browser extensions, and Electron.

React Landing Page Template
A simple React single-page landing page templates for startups/companies.

React-Portfolio
A cookie-cutter React portfolio template suited for GitHub Pages, built with Chakra UI. Just edit data.json and config.ts to fit your needs.

Media Tools (SVG, Audio, Video, etc.)

GIMTEC
A weekly newsletter to grow as a software engineer. A new article every week that links the tools and technology we use every day with fundamental topics of Computer Science.  sponsored 

Svelte Cubed
A component library for Svelte to create beautiful, high-performance 3D apps with the Three.js, the popular WebGL framework.

emojimix
This is kind of bizarre but cool. Select two emojis and this tool will spit out a combination emoji (downloadable as SVG). I was able to produce a cheese octopus.

Lorem.space
An API for placeholder images that lets you select the category of image to display (random furniture, album cover, book cover, face, etc).
 
DOM to SVG
Library to convert a given HTML DOM node into an accessible SVG "screenshot".

Iconsax
A set of icons in 6 different formats (.css, .xd, .sketch, .ai, .svg, .fig) that's part of the Vuesax framework.

PassionHacks
A library of various free illustrations: flat, isometric, and animated, available as SVG, AI, and PNG (some require email signup).

fast-png
A PNG image decoder and encoder written entirely in JavaScript.

llline
Create a random fancy line graphic by plotting a few points then customizing opacity, stroke, roundness, etc., before downloading as SVG (code or file).

Compressio
An open-source online web app to batch compress images (max 10 images, 50MB) with a few options (lossless, quality, metadata). Also includes an API.

react-chartjs-2
React components for Chart.js, the popular charting library, compatible with Chart.js versions 2 and 3.

app.icns
140 minimal geometric icons of various commonly-used apps (iTunes, Chrome, Safari, Messenger, etc), in PNG, ICNS, and SVG format.
 

JSON Tools, Databases, GraphQL, etc.

GIMTEC
A weekly newsletter to grow as a software engineer. A new article every week that links the tools and technology we use every day with fundamental topics of Computer Science.  sponsored 

graphql-live-query
Real-time GraphQL Live Queries with JavaScript with any schema or transport.

caffeine
A very basic REST service for JSON data, enough for prototyping and MVPs. No need to set up a database, CORS enabled, and more.

Mercurius
A multi-featured GraphQL adapter for Fastify (the Node.js framework).

Arctype
The SQL client and database management tool for Windows, with a free plan for solo developers and small teams.
 
react-native-json-tree
A React Native JSON viewer component based on react-json-tree that supports iterable objects.

MangoDB
An open-source alternative to MongoDB, so you can avoid MongoDB's SSPL license and go fully open source.

Database Client for Visual Studio Code
A VS Code extension database client that supports MySQL/MariaDB, Microsoft SQL Server, PostgreSQL, SQLite, MongoDB, Redis, and ElasticSearch.

Tiny Schema Validator
A JSON schema validator with excellent type inference for JavaScript and TypeScript.

Woodlot
Older project. An all-in-one JSON logging utility that supports ExpressJS HTTP logging, custom logging, provides multi-format output and an easy to use events API.

SHMIG
Another old one. A database migration tool written in Bash, consisting of just one file.
 

Commercial Apps and Classifieds

These are commercial (non-free) tools, paid classifieds, and affiliate links. You can submit a link for consideration or you can buy a classified link (will be marked "ad").

Mubert - Generate royalty-free music for videos and other content.

Morning Brew - A daily newsletter to keep you informed & entertained. ad 

Template Surf - Responsive and customizable HTML templates.

Descript - All-in-one audio and video editing, as easy as a document.

Lloyd - A career copilot for young professionals. Try it for free. ad 

Doppler - Sync environment variables across devices and teams at scale.

DB Commander - A series of database clients for iPad, iPhone and Mac.
 

A Tweet for Thought

An interesting performance tidbit from Harry Roberts on how CSS resources like fonts and background images are requested by the browser.

 

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 like the look of the famous Penguin Classics book series, you can generate your own custom book cover using this Penguin Classics Cover Generator.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  /  Patreon / GitHub Sponsors  /  E-Books / Buy Me a Coffee