Measure
is Google’s tool for
testing your site in a number
of important categories, all from
the one placeTESTING &
DATA TOOLS
should satisfy your needs should
you require a slightly different
menu style in each project.
DropCSS
https://github.com/leeoniya/
dropcss
15
A fast JavaScript module
that compares a page’s
HTML to the CSS, then
returns the latter with unused code
removed, saving valuable bytes in
page load time. For more on unused
CSS, see the accompanying box.
CSSFX
https://cssfx.netlify.com
16
Yet another useful and
unique set of plug-and-
play CSS animations and
effects. This one includes a wide
variety of effects – some require
more than a single HTML element
but they’re easy to add to a project.
CSS Grid
Generator
https://cssgrid-generator.
netlify.com/
17
For anyone first getting
into the CSS Grid
standard, having a visual
helper will be a huge boost. This
generator is a great way to learn
the features and create practical
grid code for all your layouts.
Darkmode.js
https://darkmodejs.learn.uno/
18
There seems to be a dark
mode craze lately. This
project lets you add a
dark mode toggle to pages, utilising
CSS’s mix-blend-mode property to
handle the dark/light modes.
ARC Toolkit
https://paciellogroup.com/
toolkit/19
Chrome extension by the
Paciello Group that
integrates with DevTools
to provide extensive accessibility
testing as part of your development
and testing workflow.Clarity Dashboard
https://www.clarity.ms/20
A user-testing platform
from Microsoft. Add a
script to your page then
replay user sessions to see how
users interact with your site or app.GraphQL Editor
https://graphqleditor.com/21
This is a useful online
editor that enables you
to speed up the creationFor anyone
Ľuvw#
getting
into the
CSS Grid
standard, a
visual
helper is a
boost. CSS
Grid
Generator
is a great
way to
learn the
featuresof GraphQL schemas. GraphQL is a
popular new technology that serves
as a more efficient alternative to
using REST.jsonbox.io
https://jsonbox.io/22
Free JSON storage that
offers users the ability to
store, read and modify
JSON data over HTTP APIs using
various commands such as GET,
POST, PUT and DELETE.Accessibility
Insights
https://accessibilityinsights.io/23
A Chrome extension,
Edge add-on or native
Windows app to run
accessibility testing. You can do a
quick test for the most common
problems or show visual overlays on
a page to examine colour contrast,
ARIA landmarks and more.Measure
https://web.dev/measure/24
This one is part of
Google’s new developer
hub, providing a
one-stop online tool to test your
content for vital concerns such as
performance, accessibility, best
practices and SEO.50 incredible dev tools 2020