Issue #331  (Tooling Survey, Testing, React, JSON/DB)11/21/19

This Platform is Making Management of Apple Devices Easy Jamf Now is a cloud-based solution for teams to manage Apple devices via remote setup and configuration.  Manage up to 3 devices for free, forever. Add more for just $2 per device, per month. Sign up today

If you like checking out data on Front-end tooling, you'll want to take a look at the latest results from Ashley Nolan's annual Front-End Tooling Survey.

Her are some of the things that caught my eye:

• Sass usage is still on the increase (almost 12%), which surprised me because I would have thought it was pretty stagnant.
• 15.4% of respondents have never heard of PostCSS.
• Bootstrap is on the decline and "no framework" is on the increase (though only slightly).
• CSS-in-JS had a 7.6% increase but 55.3% of respondents still don't use a CSS-in-JS tool.
• Flexbox and Grid usage are way up.
• NPM Scripts as a task runner had a 16.4% increase while almost all other task runners are on the decline.
• React usage is up 4.8% and jQuery is way down, though it's still at 36.8% usage, which seems a little high.

There's tons more data to analyze. Some of this might come in handy to bring up at a team meeting, if there's a tool you've been wanting to use that's pretty popular but that your team hasn't picked up yet
 

Now on to this week's tools!
 

Testing and Debugging Tools

An Affordable Platform to Manage Apple Devices
Jamf Now is a cloud-based solution for teams to manage Apple devices via remote setup and configuration.  Manage up to 3 devices for free, forever. Add more for just $2 per device, per month.    Sponsored  

Dark Mode Screenshot
A Puppeteer script takes a screenshot of a webpage in light and dark mode.

Fuzzit
A service platform that fuzzes your code continuously to find bugs and vulnerabilities before the bad guys do.

RegexGuide
A learning tool to help you write regular expressions. Useful for beginners but also for writing the expressions.

Fit on a Floppy
Online testing tool to see if your website 'fits on a floppy' (1.44 MB or smaller).

react-screenshot-test
A dead simple library to screenshot test React components.

trace-console-log
Command line tool to find stray console.log lines in your code.

No Mouse Days
A package that disables the mouse cursor one day a week so you can test keyboard accessibility as a team.

Courgette Testing
Simple UI testing for your team. Consists of a screenshot tool along with multiple browsers on various platforms for end-to-end app testing.

Monitornator
Server monitoring made simple. See how your servers are doing in real-time, get alerted when there is something off, and analyze the performance of your infrastructure over time.

LocalStack
Provides an easy-to-use test/mocking framework for developing Cloud applications. It spins up a testing environment on your local machine that provides the same functionality and APIs as the real AWS cloud environment.

React Tools

Tech Productivity Newsletter
A brief weekly newsletter featuring productivity tools, articles, and resources for tech pros.  promoted

react-interactive-paycard
A responsive credit card form with smooth and sweet micro-interactions. Includes number formatting, validation, and automatic card type detection.

react-change-highlight
A React component to highlight changes in the wrapped component to enhance the UX (e.g. selecting options in a form).

useCustomElement
Custom hook to bridge Custom Elements (Web Components) to React.

React Query
Hooks for fetching, caching and updating asynchronous data in React.

react-gesture-stack
An animated stack view for the web similar to that found in iOS.

watermark-enhancer
Adds a watermark to your React components.

Shards Dashboard Lite React
A free React admin dashboard template pack featuring a modern design system and lots of custom templates and components.

React95
A React component library inspired by Windows 95.

react-infinite-list
A React component to render infinite, onScroll fetched, data lists.

next
A configurable component library for the web built on React.

JSON, Databases, Etc.

local-storage-hook
A React hook for local storage.

readme-jsx
A package that lets you write your README documentations in JSX, opening a multitude of new possibilities and opportunities to get creative.

GROQ
Specification for GROQ (Graph-Relational Object Queries), a query language and execution engine made at Sanity, Inc, for filtering and projecting JSON documents.

jsonhome
Online JSON formatter, editor, and validator.

Simple Scraper
Chrome extension. Extract data from any website in seconds. Download instantly, scrape in the cloud, or create an API.

RxDB
Now at version 8+. A NoSQL-database for JavaScript applications, including web, hybrid apps, electron apps, and Node.js.

Draqula
A GraphQL client for React apps that don't need everything. It provides only the essential React hooks for building apps.

JSON Server
Get a full fake REST API with zero coding in less than 30 seconds.

JSONBase
API-based JSON storage with 100kb per payload.

A Tweet for Thought

This is pretty neat: Tim Cameron lost his wallet and someone came up with a really creative way to contact him (some similar stories in the thread as well).
 

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

Inspect This Snake is so creative! It's the old cell phone snake game built into the browser's developer tools.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris