Web Tools Weekly
What a Tool!

Issue #313  (Productivity, CSS/HTML, GraphQL/DBs, React)07/18/19

Advertisement via ThoughtLeaders
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.
Stop job searching. Join Hired.

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 

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

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.

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

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

VSCode extension that introduces a CSS properties sidebar into VSCode.

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.

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 

Displays JSON files in a flat format.

Minimal hooks-first GraphQL client.

Normalizes nested JSON according to a schema.

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

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

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.

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

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

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

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.

A starter kit for developing Chrome extensions with 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 dashboard made with Material UI’s components, React, and powered by create-react-app to boost your app development process.

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

React hook for making isomorphic HTTP requests.

Refreshed Windows 95 style UI components for your React app.

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,