Issue #313 (Productivity, CSS/HTML, 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
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.
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.
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).
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.
Displays JSON files in a flat format.
Minimal hooks-first GraphQL client.
Normalizes nested JSON according to a schema.
The powerful, in-browser CSV parser is now at version 5+ (details).
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.
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.