 | | Issue #320 • September 5, 2019 | | I often notice developers sharing links to demos, tools, and other apps that include flickering, flashing, or blinking colors or animations. My first thought in these cases is how this would affect someone prone to seizures, so if I share something like that I always try to warn users.
I recently stumbled across MDN's article Web accessibility for seizures and physical reactions, which all developers should bookmark and study in full. Below are some interesting quotes from that well-sourced piece.
"[S]eizures most definitely can be and are fatal, and developers and designers are incredibly important to making the web a safer place for those with sensitivities to photosensitive or musicogenic triggers."
"You don't even need an image or video to cause harm. A <div> element set to change color and luminosity at high frequency, easily done via JavaScript, can cause real harm. And, flickering can occur everywhere. For example, 'spinners' commonly used to display while pages load, can easily 'flicker' while spinning."
"Parallax effects can cause disorientation. Use parallax effects with caution; if you must use them, ensure the user has a control to turn them off."
"All animations are potentially dangerous. As designers and developers our responsibility is to ensure we do no harm either intentionally or unintentionally. If we must include something that has the potential to cause harm, it is vital to prevent users from accidentally encountering the harmful content, and to provide ways for users to prevent and control animations mitigating potential harm."
Lots to think about and test if you're producing content that has the potential to cause harm to those with one of the conditions mentioned in the article.
Now on to this week's tools!
| Testing and Debugging Tools Senior Frontend Engineer (100% Remote)
Close is looking for experienced full-time, remote Frontend Developers who have a strong understanding of web technologies and want to help design, implement, and launch major user-facing features. Find out more here! sponsored
Backlinks
Find out who links to your website and to your competition's site with this free backlink checker. Use it to build links and boost your rankings.
Kontrast
Chrome and Firefox extension. Quickly check and adjust contrast in real time in your browser to meet WCAG 2.0 standards.
MailSlurp
Unlimited private email addresses. Send and receive email in code. Email Servers for developers and QA teams with modern APIs and Developer SDKs.
cypress-axe
Custom commands for Cypress (the testing framework) to run accessibility checks with axe-core (accessibility engine for automated Web UI testing).
jscodeshift
A toolkit from Facebook for running codemods over multiple JavaScript or TypeScript files.
React Developer Tools
The popular Chrome and Firefox extension is now at version 3+ (details).
Embrace
Allows mobile teams to find every error, accurately recreate every session on command, and fix bugs in minutes not days.
eslint-plugin-unicorn
Various awesome ESLint rules.
Uptrends
The ultimate monitoring tool to stay in control of the uptime, performance, and functionality of your websites, APIs, and servers.
React Testing Library
Builds on top of DOM Testing Library by adding APIs for working with React components. | Media Tools Compress PNG/JPG
Compress your PNG/JPG files by up to 80% and retain full transparency.
Remix Icon
A set of open-source neutral-style SVG system symbols elaborately crafted for designers and developers, free for personal and commercial use.
meSpeak.js
A 100% client-side JavaScript text-to-speech library based on the speak.js project.
SVG-edit
Now at version 5+ (details). A fast, web-based, JavaScript-driven SVG drawing editor that works in any modern browser.
youtube-dl-interactive
A youtube-dl wrapper that helps you Interactively select the quality and format of your download.
Harmonious Studio
Create background music for videos, games, podcasts, etc.
React Native Chart Kit
Line charts, bezier line charts, progress rings, bar charts, pie charts, and more for React Native.
Spectrum
A cross-platform image transcoding library that can easily be integrated into an Android or iOS project to efficiently perform common image operations.
Recharts
Now at version 1.6. A composable charting library built on React components.
Enpose
The simple screenshot bot. Create your own dynamic images via a simple, URL-based API. | The Uncategorizables Tech Productivity Newsletter
Looking for productivity tools? I've moved most of them to my new brief weekly newsletter on productivity in tech. promoted
Secret
The first platform of exclusive offers on a curated list of services and software for startups and others to kickstart and grow their business.
CodeStream
The knowledge base for your codebase and team chat for developers. Makes it easy for teams to build, share, and retain knowledge of their codebase.
Linear
An issue tracker to manage software development and track bugs with an unrivalled user experience. Optimized for speed, efficiency and performance.
Nolt
Feedback management software and roadmap tool. Collect feedback in a central place that your users will love.
Hotpot
A simpler alternative to Photoshop, focused on business users like developers and entrepreneurs.
Flare
A powerful design and animation tool that allows designers and developers to easily add high-quality animation to their apps and games.
WPThemeDoc
Easily create beautiful, simple to use, and easily extendable documentation for your WordPress themes.
URL to PDF Microservice
Web page PDF/PNG rendering done right. Self-hosted service for rendering receipts, invoices, or any content.
Stripe Terminal
Currently US-only. Extends your online presence into the physical world, enabling you to build your own in-person checkout. | A Tweet for Thought Just another CSS joke on Twitter – an original one though! 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... YouTube Decade lets you watch the most viewed YouTube videos posted on the current day ten years ago. You can also go back to a previous day, but there doesn't seem to be a way to deep link to older video sets.
Thanks to everyone for subscribing and reading! Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
PayPal.me/WebToolsWeekly | |
0 коммент.: