Web Tools Weekly
What a Tool!

Issue #313  (Productivity, CSS Tools, GraphQL/DBs, React)

As I've previously mentioned, I recently started a sister newsletter to this one called Tech Productivity, which focuses on productivity-related tools and articles, but it's a brief newsletter (about 10-12 links max).

From researching articles on good management skills and team skills, the subject of how to improve a workplace has been on my mind lately. So here's a rough list of some suggestions of my own on how everyone can make the workplace a better environment for all:

  • Treat others the way you expect to be treated. Known as the Golden Rule, it can prevent so many problems in personal relationships.
  • Be humble. I've worked with people who were extremely talented but very egotistical. Not a great combination. I'd rather have 75% of the talent and 50% more humility.
  • Be a good listener. Don't always be the one telling everyone else how it is. People don't care how much you know until they know how much you care.
  • Treat everyone equally. Don't judge people on anything other than their abilities and/or qualifications. Everything else is just useless politics.
I'm sure there are lots of other suggestions you'd have on how to improve the workplace. These are just some of the primary ones that come to mind, and I'll be the first to admit that I haven't always done all of them as well as I'd like.
 

Now on to this week's tools!
 

CSS and HTML Tools

Who Loves Job Applications? No One.
Don't be a fool. Stop filling out endless job applications and try Hired – the #1 career marketplace for tech talent. It's simple, tell us about your dream job and we'll match you with top companies who will compete for you.    ad via ThoughtLeaders 

Darkmode.js
Add a dark-mode / night-mode to your website in a few seconds. This library uses the CSS mix-blend-mode property to create a dark mode on/off switch.

Old Terminal
HTML, CSS, and JavaScript template with a retro terminal UI look.

html-react-parser
HTML to React parser Node and the browser. Converts an HTML string to one or more React elements. Also an option to replace an element with your own.

Mavo
Now at version 0.2 (details). Create complex, reactive, persistent web applications by just writing HTML & CSS, without a single line of JavaScript and no server backend.

styled-components
The super popular CSS-in-JS solution is now at version 5+ (details).

Colorffy
Various resources for designers and devs. Includes pre-built color palettes, gradients, and templates, and more.

Fabulous
VSCode extension that introduces a CSS properties sidebar into VSCode.

mailgo
Script to add a custom menu that opens for mailto: links (which includes "open in Gmail", "Open in Outlook", etc).

Grid Wiz
Make a CSS Grid framework with custom browser support at the snap of a function.

Stylish
An app to build beautiful React styled components visually.

GraphQL Tools, Databases, JSON, etc.

JavaScript & DOM Scripting E-Books Bundle - $12.99
350+ pages of JavaScript and DOM tips explained via 240+ interactive demos, all recently updated with ES6 syntax. promoted 

catj
Displays JSON files in a flat format.

graphql-hooks
Minimal hooks-first GraphQL client.

Normalizr
Normalizes nested JSON according to a schema.

Papa Parse
The powerful, in-browser CSV parser is now at version 5+ (details).

dinoql
A customizable GraphQL style query language for interacting with JavaScript objects.

urql
Universal React Query Library. A blazing-fast GraphQL client, exposed as a set of ReactJS components.

GraphQL Code Generator
Generate code from your GraphQL schema with a single function call.

Fauna
A serverless database, now with native GraphQL. Add a full-featured transactional data store to your app in minutes.

Stein
Use Google Sheets as your no-setup database. Kick off projects, design custom Google Forms, and manage your content in a familiar interface.

GraphQL Query Rewriter
Seamlessly turn breaking GraphQL schema changes into non-breaking changes by rewriting queries in middleware.

React Tools

React-Date-Picker
Date picker component for React. Pick days, months, years, or even decades. Supports virtually any language and doesn't require moment.js.

use-clipboard-copy
Lightweight copy to clipboard hook for React.

React Scroll Parallax
React components to create parallax scroll effects for banners, images or any other DOM elements.

React Accessible Accordion
Now at version 3+ (details). React component for creating an Accordion that adheres to the WAI-ARIA spec for accessibility.

chrome-extension-starter-kit
A starter kit for developing Chrome extensions with React.

i18nize-react
Internationalize legacy react apps in a lunch break. Finds and replaces all the hardcoded string literals in your react project with i18n bindings.

react-material-dashboard
React dashboard made with Material UI’s components, React, and powered by create-react-app to boost your app development process.

react-fetching-library
Simple, powerful, and dependency-free fetching library for react with Hooks.

useFetch
React hook for making isomorphic HTTP requests.

React95
Refreshed Windows 95 style UI components for your React app.

Diluter
An automatic Redux reducer, taking the pain out of Redux.

A Tweet for Thought

Some thoughts from Tae'lur Alexis on the underappreciated value of non-traditional tech job candidates (e.g. self-taught).
 

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

Uibot is an experiment that creates variations of a user interface via AI. It's just an experiment, your job is safe.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly