Web Tools Weekly Issue #388 (Top Tools of 2020 (Part 1))

Issue #388 (Top Tools of 2020 (Part 1))12/24/20

This week and next week are down weeks work-wise for many of you, so these two issues will feature this newsletter's 60 most clicked tools of 2020. The tools are listed in reverse order so this issue's 30 tools are tools #60 – #31.

Thank you all for your support this past year. I remain committed to doing this newsletter every week (I haven't missed a week since it started!) and I don't plan for that to change in 2021. If you'd like to offer some support to the newsletter, here's a quick list of ways you can do that:

Open every issue and click the stuff that genuinely interests you. This really does help!
Make sure you add this newsletter to your email client's whitelist (or add to your contacts) to ensure it doesn't get into your spam folder.
Contribute to the newsletter:
Buy a web dev course (I get a cut if you use these links):
Buy my JavaScript/DOM E-books bundle

I hope all of you have a healthy end to your year, even though it's been a rough one for most, if not all of us.

Now on to the list of top tools of 2020!

Top Tools #60 – #51

Pikwizard
Library of over 1 million stock images and videos. Royalty free and safe for commercial use, with no attribution required.

Tailwind Starter Kit
Open Source add-on for Tailwind that features multiple HTML elements and comes with dynamic components for React, Vue, and Angular.

Spider
The easiest tool to scrape the internet. Simply point and click to turn websites into organized data and download them as JSON/CSV. No coding or configuration required.

Van11y
A collection of customizable, accessible scripts for rich interface elements, built using progressive enhancement.

CSS to TailwindCSS
An online tool to convert standards CSS to the best possible Tailwind CSS equivalents.

Radius
A collection of open-source tools and libraries that allow you to accelerate your design system.

Sail UI
Basic UI components for Tailwind CSS.

Control
100+ illustrations that can be customized via an online constructor to create the specific scene you're looking for.

Public APIs
A collection of free public APIs for software developers, categorized.

css-media-vars
A brand new way to write responsive CSS. Named breakpoints, DRY selectors, no scripts, no builds, vanilla CSS.

Top Tools #50 – #41

guijs
A multi-purpose native Windows and Mac app to help you manage your development projects. Has features for projects, package installation, script management, and more.

Wicked Templates
Tailwind CSS templates ready to customize out of the box. Helps you jumpstart your startup's landing page by providing you with easy to customize templates.

H3
A microframework to build client-side single-page applications (SPAs) in modern JavaScript.

Line Awesome
A free alternative to Font Awesome that consists of ~1380 flat line icons that offer complete coverage of the main Font Awesome icon set.

BEM Naming Cheat Sheet
A nicely designed guide to using the BEM naming method for your stylesheets.

Embla Carousel
A bare-bones, extensible carousel library with great fluid motion and awesome swipe precision. Library agnostic, dependency free, and open source.

Open Peeps
A hand-drawn illustration library to create scenes of people, each drawing available in PNG or SVG format.

CSS Section Separator Generator
A simple and interactive generator to add a fancy section separator to your pages.

Lion Web Components
A set of highly performant, accessible, and flexible web components that provide an unopinionated, white label layer that can be extended to your own layer of components.

Debug Visualizer
A VS Code extension for visualizing data structures while debugging. Works best with JavaScript/TypeScript. Also tested with C#, Java, and PHP. Works with any language that you can debug in VS Code.

Top Tools #40 – #31

Geist UI
An open source design system for building modern websites and applications. Includes support for React, Vue, and more.

sysend.js
A small library that allows you to send messages between pages that are open in the same browser. It also supports cross-domain communication and has no dependencies.

Hero Generator
Interactive tool to generate a hero image header section for a web page, a common pattern found on many designs.

Toy Faces
A fun diverse library of 3D avatars for your design mockups and commercial projects.

Halfmoon
Front-end framework with a built-in dark mode, designed for rapidly building beautiful dashboards and product pages.

V-Dashboard
Dashboard starter template built with Vite, Vue 3, Tailwind CSS, and TypeScript.

broider
Interactive tool for making "9-patch" borders. Draw on the page then copy the CSS that includes a data URI using border images.

Falcon
A free, open-source SQL editor with inline data visualization. Supports connecting to RedShift, MySQL, PostgreSQL, IBM DB2, Impala, MS SQL, Oracle, SQLite, and more.

Neumorphism.io
Generate CSS for elements that have 'soft UI' (i.e. 3D box shadows and lighting).

Meraki UI
Beautiful Tailwind CSS components that support RTL languages and fully responsive based on Flexbox and CSS Grid.

A Tweet for Thought

Fittingly, though undesirably, the 2nd most popular "Tweet for Thought" of 2020 was this CSS one:

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

Interestingly, that Tweet above by Adam is based on a "CSS jokes" trend that I started way back in 2011 that I rarely ever get credit for. It eventually became something called "CSS Puns" (which is a misnomer) but I originally called it CSS In Real Life. You can also see a bunch of prettified ones by Saijo George.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris