Tagged “tool”
Motion One: The Web Animations API for everyone
A new animation library, built on the Web Animations API for the smallest filesize and the fastest performance.
Accessible Color Generator
There are many colour contrast checking tools but I like this one from Erik Kennedy (of Learn UI Design) a lot. It features an intuitive UI using simple, human language that mirrors the task I’m there to achieve, and it’s great that if your target colour doesn’t have sufficient contrast to meet accessibility guidelines it will intelligently suggest alternatives that do.
SVG Gobbler
SVG Gobbler is a browser extension that finds the vector content on the page you’re viewing and gives you the option to download, optimize, copy, view the code, or export it as an image.
Astro
Astro looks very interesting. It’s in part a static site builder (a bit like Eleventy) but it also comes with a modern (revolutionary?) developer experience which lets you author components as web components or in a JS framework of your choice but then renders those to static HTML for optimal performance. Oh, and as far as I can tell theres no build pipeline!
Astro lets you use any framework you want (or none at all). And if most sites only have islands of interactivity, shouldn’t our tools optimize for that?
clipboard.js - Copy to clipboard without Flash
Here’s a handy JS package for “copy to clipboard” functionality that’s lightweight and installable from npm.
Inspire.js
Lean, hackable, extensible slide deck framework
I’ve been on the lookout for a lightweight, web standards based slide deck solution for a while and this one from Lea Verou could well be perfect.
Dragula - Browser drag-and-drop so simple it hurts
Here’s a nice, lightweight and framework-free drag and drop UI solution, that’s sure to come in handy.
Drag and drop so simple it hurts
SVG Crop
Here’s a handy-looking tool for the SVG editing toolkit.
Remove blank space from around any SVG instantly.
Diffchecker - Online diff tool
Diffchecker is a diff tool to compare text differences between two text files.
Meta Tags - Preview, Edit and Generate
A handy tool which lets you type in a URL then inspects that page’s meta tags and shows you how it will be presented on popular websites.
Assistiv Labs
A tool for testing how accessible your experience is on various assistive technologies – perhaps “like BrowserStack but for screen readers”?
Assistiv Labs remotely connects you to real assistive technologies, like NVDA, VoiceOver, and TalkBack, using any modern web browser.
VisualSitemaps: Autogenerate Beautiful Sitemaps and Screenshots
A great tool for automatically generating a visual sitemap (visual because it attaches a screenshot to each node) for any given website.
Simply enter a URL and get a thumbnail-based visual architecture of the entire site.
Merch Table
A neat online tool (with a positive goal) which lets you paste in a link to one of your Spotify playlists then lets you know which of the tracks or albums are available to buy on Bandcamp.
Big picture performance analysis using Lighthouse Parade (on Cloud Four)
I like the sound of this performance analysis tool from the clever folks at Cloud Four, especially because it covers your entire site rather than just a single page.
Lighthouse Parade is a Node.js command line tool that crawls a domain and gathers lighthouse performance data for every page. With a single command, the tool will crawl an entire site, run a Lighthouse report for each page, and then output a spreadsheet with the aggregated data.
My DevTools Cheatsheet
Here’s a (work in progress) list of useful (Mac) Browser DevTools tips, tricks and keyboard shortcuts for my reference and yours. This is a work in progress and I’ll update it as I go.
My Screen Reader Cheatsheet
Here’s a list of useful Screen Reader commands and tips for my reference and yours. This is a work in progress and I’ll update it as I go.
Docsify – a magical Documentation Website generator
docsify generates your documentation website on the fly. Unlike GitBook, it does not generate static html files. Instead, it smartly loads and parses your Markdown files and displays them as a website.
itty.bitty
Here’s an interesting tool for creating and sharing small-ish web pages without having to build a website or organise hosting.
itty.bitty takes html (or other data), compresses it into a URL fragment, and provides a link that can be shared. When it is opened, it inflates that data on the receiver’s side.
Introducing Rome
We’re excited to announce the first beta release and general availability of the Rome linter for JavaScript and TypeScript. This is the beginning of an entire suite of tools. Rome is not only a linter, but also a compiler, bundler, test runner, and more, for JavaScript, TypeScript, HTML, JSON, Markdown, and CSS. We aim to unify the entire frontend development toolchain.
The Simplest Way to Load CSS Asynchronously (Filament Group)
Scott Jehl of Filament Group demonstrates a one-liner technique for loading external CSS files without them delaying page rendering.
Color Theme Switcher (on mxb.dev)
Max shows us how to build a colour theme switcher to let users customise your website. He uses a combination of Eleventy, JSON, Nunjucks with macros, a data attribute on the html element, CSS custom properties and a JavaScript based switcher.
Sass and clamp (on Adactio: Journal)
Given what we can now do with CSS, do we still need Sass?
Sass was the hare. CSS is the tortoise. Sass blazed the trail, but now native CSS can achieve much the same result.
SVG Backgrounds – Create Customizable, Hi-Def, and Scalable Backgrounds.
SVGs enable full-screen hi-res visuals with a file-size near 5KB and
are well-supported by all modern browsers. What's not to love?
Font Match
A font pairing app that helps you match fonts – useful for pairing a webfont with a suitable fallback. You can place the fonts on top of each other, side by side, or in the same line. You can adjust your fallback font’s size and position to get a great match.
Font style matcher
If you’re using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you’ve chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths. This tool helps you do exactly that.
How to use npm as a build tool
Kieth Cirkel explains how using npm to run the scripts field of package.json is a great, simple alternative to more complex build tools. The article is now quite old but because it contains so many goodies, and since I’ve been using the approach more and more (for example to easily compile CSS on my personal website), it’s definitely worth bookmarking and sharing.
npm’s scripts directive can do everything that these build tools can, more succinctly, more elegantly, with less package dependencies and less maintenance overhead.
Tooled Up: A brief history of SaaS tools we've loved (and lost) (FreeAgent Grinding Gears Blog)
I thought it might be interesting to look back through the years at how the tools in Engineering have changed as our company has grown from 3 to over 240 (and engineering to over 100), and to give a shout out to (some of!) those tools that we consider crucial to our workflow today – especially in these most unusual times where most of the world is working remotely.
grep.app
grep.app searches code from over a half million public repositories on GitHub.
Screen - Work together like you're in the same room
Fast screen sharing with multiplayer control, drawing & video.
Are My Colours Accessible?
Colour contrast and the use of colour is extremely important for certain groups of people with varying levels of visional impairment. Building upon the excellent Colorable, I wanted more context around the result. When you share the outcome with your colleagues, all the results, rules and what you’re aiming for, is easily understandable for when you have those awkward conversations with designers and marketers. Accessibility doesn’t have to be ugly.
My VS Code Cheatsheet
Here’s a list of useful (Mac-based) VS Code tips for my reference and yours.
You Don't Need
A nice list of tips and tools on how to use simpler browser standards and APIs to avoid the added weight of unnecessary JavaScript and libraries.
RegExr: Learn, Build, and Test RegEx
RegExr is an online tool to learn, build, & test Regular Expressions.
Layered, Smooth box-shadow generator (on brumm.af)
Inspired by Tobias Bjerrome’s blog post Smoother & sharper shadows with layered box-shadows
Carbon
Create and share beautiful images of your source code. Start typing or drop a file into the text area to get started.
WAVE Web Accessibility Evaluation Tool
The featured article in this week’s Accessibility Weekly newsletter was on recent improvements to the WAVE suite of accessibility testing tools.
I can’t remember using WAVE before, however just one quick test of fuzzylogic.me using their online tool revealed an accessibility issue with the linked SVG logo in the header. A great catch, now fixed, from which I learned something new. I’ll certainly be adding WAVE to my accessibility testing toolbox from here on in.
WAVE is a suite of evaluation tools that help authors make their web content more accessible to individuals with disabilities. WAVE can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content. Our philosophy is to focus on issues that we know impact end users, facilitate human evaluation, and to educate about web accessibility.
Get Waves
I’ve been admiring the wave effect at the foot of banners on Netlify’s website and had noted that they were achieved using SVG. So this tool which helps you “make waves” is pretty timely!
Cookie Consent by Osano
The most popular drop-in solution to the EU Cookie Law requirements.
Real Favicon Generator
Knowing how best to serve, size and format favicons and other icons for the many different device types and operating systems can be a minefield. My current best practice approach is to create a 260px × 260px (or larger) source icon then upload it to Real Favicon Generator.
webmention.app: automate your outgoing webmentions
webmention.app is a great new project by Remy Sharp. He created it because he noticed that while adding webmentions to your site is relatively straightforward, sending outgoing webmentions is less so.
'Easy Sass' extension for Visual Studio Code (from wojciechsura on GitHub)
Automatically compiles SASS/SCSS files to .css and .min.css upon saving. You may also quickly compile all SCSS/SASS files in your project.
Cloudinary
Cloudinary is a very handy tool for image and video upload, storage, optimisation and CDN.
Store, transform, optimize, and deliver all your media assets with easy-to-use APIs, widgets, or user interface.
Image Color
A handy tool for identifying colours – provided in numerous different CSS-ready formats – and creating a complimentary colour palette from an image you upload or provide as a URL.
Gifox 2 for Mac - Delightful GIF Recording and Sharing App
When watching presentations recently I’ve noticed that a few speakers use this tool to generate animated images for their slides.
Gifox is a menu bar app that records your screen into animated GIFs – a great compromise between static images and full-size videos.
TunnelBear – VPN Software for Bears
I was introduced to this smile-inducing website by Val Head’s An Event Apart Talk “Building more expressive projects”.
See all tags.