Web Tools #414 - Frameworks, JS Utils, Uncats

Advertisement

In case you missed it, last year Chrome's DevTools added a new feature that comes in handy for some very specific accessibility testing: The ability to emulate vision deficiencies to mimic how users with color blindness or blurred vision see your pages.

It's not the easiest feature to find but once you find it, you'll notice some other useful testing features in the same area of DevTools. The "Emulate vision deficiencies" option is found by doing the following:

• Open DevTools (F12) on any web page
• Open the Console Drawer by hitting ESC or selecting "Show console drawer" inside the three-dot option menu (top right of DevTools)
• Inside the Console Drawer, choose "Rendering" from the three-dot option menu (top left of Console Drawer)
• Scroll down to "Emulate vision deficiencies" in the Rendering sub-panel

As you can see in the screenshot, you can choose from 4 types of vision deficiencies to emulate:

• Blurred vision
• Protanopia (difficulty with perceiving red)
• Deuteranopia (difficulty with perceiving green)
• Tritanopia (difficulty with perceiving blue)
• Achromatopsia (absence of color vision, seeing only grays)

A nice feature to keep in mind to add to your accessibility toolbox and workflow. For a little more detail on this subject, see Addy Osmani's post on the subject from last year.

Now on to this week's tools!

Front-end Frameworks

IntersectionObserver Examples
Practical, real world React examples of Intersection Observer. No external JavaScript or CSS libraries used in the examples. Each example is available as a React component. Easy to understand. Reusable patterns.  sponsored 

Windmill React UI
A React component library based on Tailwind CSS that includes dark theme using a single prop and tested for accessibility.

Flame
A fast and simple framework, inspired by the Elm architecture, for building web applications in PureScript.

vite-vue3-starter
A Vue 3 starter template to build projects with Vite, Typescript, ESLint, and Prettier.

Vuestic UI
An open Source UI Library for Vue 3 that includes 50+ responsive components, keyboard accessibility, and can be used with other component libraries without conflict.

DaisyUI
A library of pure CSS Tailwind components that are easy to theme and customize and include RTL support.

next-portfolio-dev
A Next.js template to serve as a starter for a portfolio website, built with TypeScript, deploy via Vercel, and configured with ESLint and Prettier.

Elementz
A React Component library that has about 10 components, including a full-featured responsive table component.

Venus
A design system with 2000+ components & 250+ styles for Figma that includes a free and pro version.

Express-JWT-Boilerplate
A stateless and scalable Express Rest API boilerplate integrating JSON Web Tokens, Docker, MongoDB, rate limiting, load balancing, and more.

govuk-react
An implementation of the GOV.UK Design System in React using CSS-in-JS with object notation (with styled-components).

On the Release Radar:

• UI Kitten - React Native library now at version 5+
• Lit - Web components library at version 1+
• Pure.css - Remember this one? At version 2+
• MDB - Material/Bootstrap now at version 3+

JavaScript Utilities

Mediamodifier Mockups
Don't waste time creating mockups from scratch. Use Mediamodifier's intuitive drag-and-drop tools and thousands of pre-built templates to make beautiful designs and product mockups in seconds.  sponsored 

Nano Stores
A tiny state manager for React, Preact, Vue, Svelte, and vanilla JS that uses many atomic stores and direct manipulation.

mini-typescript
A miniature model of the Typescript compiler, intended to teach the structure of the real Typescript compiler.

Twitter API Client
A user-friendly client library for Node and the browser, for interacting with the Twitter API.

Notistack
A library that makes it easy to display notifications on your web apps. Highly customizable and enables you to stack snackbars/toasts on top of one another.
 
Inputmask
A library that creates an input mask on form fields, helping the user by ensuring a predefined format. Also includes a jQuery plugin.

Handy.js
Makes defining and recognizing custom hand poses in WebXR a snap.

threads.js
A web workers and worker threads library designed for modern JS and TypeScript.

slide-element
A small library for hiding and showing elements in a sliding fashion using native CSS animations (i.e. jQuery's slideUp/Down/Toggle in vanilla JS).

js-tokens
A tiny, regex powered, lenient, almost spec-compliant JavaScript tokenizer that never fails.

active-win
Utility to get metadata about the active window (title, ID, bounds, owner, etc).

Observable Store
A simple way to manage state in Angular, React, Vue.js and other front-end applications.

On the Release Radar:

• Handsontable - Data grid now at version 9+
• mo.js - Motion graphics library now at version 1+

The Uncategorizables

Mediamodifier Design Maker
A quick, easy, and cost-effective way to create professional-looking materials of all kinds. No need for services like Fiverr for quick designs – just use Mediamodifier's drag-and-drop builder along with their huge selection of design templates.  sponsored 

NGINXConfig
The easiest way to configure a performant, secure, and stable Nginx server.

Auxl
A native API client for macOS that provides a node-based system for a whole new way to organise, test, and develop APIs.

Dotenv Linter
A lightning-fast linter for .env files, written in Rust.

Web Scraper API
Scrape the web with proxies, CAPTCHA solving, headless browsers, and more, to avoid being blocked.

csvbox.io
CSV file importer for your web app, SaaS, or API.

reCAPTCHAme
A reCAPTCHA and hCAPTCHA token verification service, completely free.

tinu.be
URL shortener and QR code generator. Shorten your links, generate QR codes, and track number of visits all from a single source.

IcePanel
System docs for visual people. Design structured diagrams, built to increase your teams trust in your docs.
 
RecordCast
Web-based, free screen recording and video editing app that offers 3 recording modes.

Smoothix
A Chrome extension to display data analytics on your websites, from different sources (Google Analytics, Facebook, etc.)

Nyxt
A web browser that features jumping to document headings, fuzzy tabs, mouseless navigation, smart bookmarks, and more.

Kopia
Fast and secure open-source backups. Encrypted, deduplicated, and compressed data backups using your own cloud storage.
 

In case you didn't know, I've moved most "Productivity Tools" to my other newsletter: Tech Productivity. Includes tools, articles, and tips on productivity and remote work—and the website has a fresh new design!

A Tweet for Thought

Craig Abbott explains why WCAG compliance alone isn't enough to create accessible websites and apps.

 

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

Here's a forum discussion you didn't know you needed: The toilet paper dilemma, a physics discussion on why it's better to roll your toilet paper over instead of under.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Want to get notified of new issues via Twitter, Telegram, or Messenger? You can sign up using a service called Reachme.

Support this newsletter:
PayPal.me  /  Patreon / GitHub Sponsors  /  E-Books / Buy Me a Coffee