Chris Brandrick at Frontend Focus asked me to share five tools, libraries or packages that I love for the latest issue of the newsletter. It was hard to narrow it down to just five! So I thought I’d share the full long-list with you here, in no particular order.
Parcel
I hate having to spend hours configuring a new project when I just want to jump straight into some code, which is why Parcel is my go-to bundler. It’s “zero config”, and makes it quick and easy to set up projects.
WebPageTest: Carbon Control
WebPageTest measures your site’s performance, and has recently added a new feature, Carbon Control, which helps to measure the CO2 impact, along with tips for reducing it.
Utopia
I somehow missed this one off the original list, despite using it for nearly every project. Utopia (by James Gilyead and Trys Mudford) provides configurable set of CSS custom properties for fluid sizing and typography, with options to use a modular scale. It’s a godsend, and helps to avoid writing media queries all over the place!
Lite YouTube Embed
Embedded videos can be responsible for performance problems (and CO2 emissions) of a site. This package by Paul Irish ensures they are only loaded upon interaction, providing a better (faster) user experience.
SVG OMG
Jake Archibald’s tool for minifying and compressing SVGs is indispensable for any developer working with SVG.
SVG Path Visualizer
A really cool playground to help you understand how SVG path syntax works.
URL Encoder for SVG
This simple tool takes an SVG and converts it to a base64 encodes URL, for use in CSS properties such as background-image and mask-image.
Firefox Dev Tools
Firefox is my primary development browser and has a bunch of handy inspection tools for working with CSS, including a color contrast accessibility checker, inspectors for fonts, layout and animation, a changes panel, validity and compatibility checkers. It was too hard to pick just one favourite feature!
Cubic Bezier
Lea Verou’s visualizer for cubic bezier easing curves for CSS animations is one I use regularly for crafting more natural-looking animations.
ENV Switcher for VS Code
This VS Code extension enables easy switching between different .env files in a project.
Are my third parties green?
A tool by Fershad Irani for checking if your third-party scripts use green hosting.
Tiny PNG
Build tools can be configured to compress images, but we can reduce energy use even more by not uploading large images in the first place! Tiny PNG squooshes not just PNG files, but JPG and WebP too, with no visible loss of quality.
Import Cost for VS Code
An extension for VS Code that shows the size of your JS imports in a file. It helps you become aware of the worst offenders, and consider more lightweight alternatives.
D3
If you work with data visualisation on the web you’ll likely already know D3.js. But I wanted to include it here as it’s a great library, and one that I use almost every day of my working life at Ada Mode. In addition to data viz, it has useful modules for working with arrays, date and time formatting, SVG in general, and much more.
I’m sure I’m missing a bunch! What are your favourite tools? Let me know!
Webmentions for this page
About webmentionsLikes: 0
Reposts: 0
Mentions: 3