Issue #339  (Chrome A11y Tab, Frameworks, Build Tools, React)01/16/20

In case you didn't know, Chrome's developer tools allow you to select an element in the Elements pane and then view that element's accessibility info in a tab called "Accessibility". The Accessibility tab is one of the info tabs available in place of Styles, Computed, etc:

When an element is selected, you'll get a view of the Accessibility Tree, any Aria attributes, as well as any computed accessibility roles (e.g. a header element will show "Role: banner" in the "Computed Properties" section). You can see this in the screen grab below:

This is helpful because If you expect an element to have a particular role by default, you can confirm this in your developer tools.

On a related note, browsers generally make an educated guess as to whether a table element is a data table or not, which you can see by examining the tables in this CodePen. Try removing a row from the 20 row table and notice what happens to that table's "role" in the Accessibility tab. For a full explanation of what's happening behind the scenes, check out this slide deck. (Hat tip to Sara Soueidan for tweeting about this).
 

Now on to this week's tools!

Front-end Frameworks

Dumbass
Make components from cross-browser web standards without thinking too hard. No JSX, no Shadow DOM, no fancy frameworks.

react-typescript-chrome-extension-starter
A Chrome Extension starter kit built with React, TypeScript, SCSS, Storybook, ESLint, Jest, Bootstrap, and webpack.

Leaf PHP
Not a front-end framework, but seems attractive to front-end devs: Create clean, simple, and powerful web applications and APIs quickly.

sscaffold
Modern, lightweight CSS library that builds on the efforts of previous libraries like Milligram, Skeleton, and Normalize.

React Milkshake
Skip writing boilerplate code and build high-performance React apps faster.

Redux Toolkit
The official, opinionated, batteries-included toolset for efficient Redux development.

React Rainbow Components
A collection of React components (e.g. accordion, breadcrumb, pagination, etc.) to reliably help you build your application in a snap.

Cube.js Templates
Open-source, ready-to-use front-end analytics apps. Pick your favorite framework, charting library, and UI kit, then the template will wire it all together and configure it to work with the Cube.js backend.

Drop-in Minimal CSS
Interactive page that lets you test run different drop-in CSS frameworks like Bulma, Picnic, Paper, etc.

Spectrum CSS
An open-source implementation of Spectrum, Adobe’s design system. Includes components and resources to make applications more cohesive.

Courses by Wes Bos (Master Packages!) on Sale for $97:
 

 

Build Tools, Bundlers, etc.

Snowpack
Build modern web apps (using React, Vue, etc.) without a bundler. No more waiting for your bundler to rebuild your site every time you hit save.

craco
"Create React App Configuration Override". An easy and comprehensible configuration layer for create-react-app.

klap
A zero config, zero dependency bundler for tiny JavaScript packages.

Bitrise
Continuous integration and delivery built for mobile: Automate iOS and Android builds, testing, and deployment from your first install.

leanweb
A toolset for generating a web components-based project.

fix-es-imports
Fixes your ES import paths from Node-style to explicit filenames.

Volta
A hassle-free way to manage your JavaScript command-line tools with seamless, per-project version switching, support for multiple package managers, and more.

Depcheck
VSCode extension. Highlight unused dependencies in package.json to help declutter your project.

Madge
A developer tool for generating a visual graph of your module dependencies, finding circular dependencies, and other useful info.

pretty-quick
Runs Prettier on your changed files via Git or Mercurial.

preset-modules
A Babel preset that enables async/await, tagged templates, arrow functions, destructured and rest parameters, and more, in all modern browsers (88% of traffic).

crass
A CSS minifier that you can use programmatically via an API or CLI or using an online tool.

React Tools

Beautiful React Hooks
A collection of beautiful and useful React hooks to speed-up your components and hooks development.

Kea
Now at version 1+. A smart data layer for React apps, built on top of Redux.

React Adaptive Loading Hooks & Utilities
A suite of React hooks and utilities to deliver experiences best suited to a user's device and network constraints.

React-Spring Visualizer
Create, edit, and visualize animations built using react-spring, the popular physics-based animation library.

React Cosmos
A dev environment for building scalable, high-quality user interfaces.

Redux-Leaves
Aims to make Redux easier to learn and quicker to scale.

react-micro-reducer
A React reducer hook, with a "micro"-reducer style, made for a Typescript world.

react-zen
A tiny set of utilities to let you easily consume asynchronous data in your React components (e.g. to load and display data from a REST API).

React useAnimations Icons
A collection of free animated open source icons for React (the React version of useAnimations).

A Tweet for Thought

I hate that many popular article/blog sites today don't have RSS feeds (*cough* Dev.to *cough*). Seems crazy to me. This thread by Chris Coyier is a nice reminder that RSS is still alive and well.
 

Got a Tool Suggestion?

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

I recently discovered Kit, which allows YouTubers, bloggers, etc., to create shoppable collections of their favorite products (grouped into "kits") so their followers can buy the tools they use. Pretty neat if you're in the market for a new camera, mic, or other device and want to know what your favorite creator is using.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris