Issue #348 (Productivity, CSS/HTML, React, Build Tools)03/19/20
What's happening around the world right now is unprecedented, but I don't think I have to tell you that. Wherever you are, I hope you and our family members are healthy and I hope you've been able to continue some semblance of work, assuming you're able to do your job remotely, as most developers probably are.
I think most of us that didn't previously work remotely will be looking for or recommending new tools for our remote teams, and even the occasional article on remote work life and work culture will be greatly beneficial.
Productivity is essential during the current pandemic
Over the past year, I've been curating a second newsletter that you might enjoy if you've been newly converted to remote work. It's called Tech Productivity, and it's always a brief newsletter with about 10-12 links that include productivity-related tools (like video conferencing, Slack plugins, note taking apps, etc.) as well as productivity-related articles.
Some of the articles cover things like brain science while others are just simple tip-based posts on freelancing and working on side projects. Basically, any kind of content that can help tech workers be more productive. And if you're missing the "productivity tools" category that I used to include in this newsletter, well those tools are now in Tech Productivity, so this one can stay focused on developer-related tools.
Now on to this week's tools!
|
CSS and HTML Tools
Have Happier, More Productive Video Meetings
Team.video makes it easier and faster for remote teams to work together by offering user friendly video meetings with agendas, collaborative notes, and emoji responses. No download required and it’s free to use. via Syndicate
Remake
A framework to build web apps and prototypes using nothing but HTML. Editable areas, sortable items, sign-up/log in functionality, and more.
Aeon
A lightweight date time picker built with web components that can be used anywhere.
Selectors Explained
Interactive online tool to translate CSS selectors into plain English.
Utopia
A one-stop resource for implementing fluid responsive designs, allowing you to elegantly scale type and space without breakpoints.
Neumorphism.io
Generate CSS for elements that have 'soft UI' (i.e. 3D box shadows and lighting).
PurgeCSS
Now at version 2+. Too to remove unused CSS as part of your development workflow.
Leonardo
Generate colors based on a desired contrast ratio.
Tailwind Colors
Color configuration tool for Tailwind CSS, the popular CSS utility framework.
FasterChrome
A Chrome extension that implements instant.page, the popular link pre-loading library, to make page loads and navigation feel faster.
Generate Color
Simple online tool to generate a graduated color palette from one or two predefined color.
|
React Tools
Tech Productivity Newsletter
A brief newsletter featuring tools and articles for remote work, work culture, learning science, and more – all to help you be more productive. promoted
usePlaceCage
A React hook for placecage.com, the image placeholder service that inserts images of, you guessed it, Nicolas Cage.
React Query Devtools
Debugging tool for React Query, the library of React hooks for fetching, caching, and updating asynchronous data in React.
Venti
A global state solution for React.
React Nice Dates
A responsive, touch-friendly, and modular date picker library.
React Google Static Maps
A React wrapper for Google's Static Maps API.
Craft.js
In Beta. A React framework for building powerful and feature-rich drag-n-drop page editors.
react-suspense-fetch
A primitive library for React Suspense Render-as-You-Fetch.
Drab
A React CLI that makes it easier to do monotonous tasks like creating a component or page with styles, creating a service, or creating a hook.
use-axios-client
Make requests with Axios (the promise-based HTTP client for the browser and node) using React hooks.
use-tensorflow
A React hook for TensorFlow.js (the JavaScript library for machine learning to detect objects and poses easily.
|
Build Tools, Bundlers, etc.
Tech Productivity Newsletter
A brief newsletter featuring tools and articles for remote work, work culture, learning science, and more – all to help you be more productive. promoted
esbuild
An extremely fast JavaScript bundler and minifier. Built with Go, but I don't believe that is a barrier to entry for those who don't use Go.
Create Next App
The easiest way to create a React app with server-side rendering via Next.js.
Yarn
The popular package manager alternative to npm is now at version 2+.
why-npm-i-so-long
A small utility to help troubleshoot when installing npm dependencies takes a long time.
vue-loader
A webpack loader for Vue single-file components.
svelvet
A CLI Svelte compiler and watcher that works with Snowpack, the popular build tool.
one-click.js
One click, offline, CommonJS modules in the browser.
Gasket
Framework maker for JavaScript applications, building and scaffolding boilerplate as well as essential elements for libraries and layers of apps to integrate together during runtime.
antd-dayjs-webpack-plugin
A webpack plugin for Day.js, the immutable date library alternative to Moment.js.
shoulders
Quickly view a list of open issues for the open-source packages that your project depends on.
|
A Tweet for Thought
As Kelly Vaughn points out, the current pandemic might lead to some interesting new changes to the work force, even after things have improved and things start running normally again.
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...
With some extra home time nowadays, you might enjoy Radiooooo, the musical time machine.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
