Chris Brandrick at Frontend Focus requested me to share 5 instruments, libraries or packages that I like for the newest difficulty of the publication. It was laborious to slender it down to simply 5! So I assumed I’d share the complete long-list with you right here, in no explicit order.
I hate having to spend hours configuring a brand new mission once I simply need to leap straight into some code, which is why Parcel is my go-to bundler. It’s “zero config”, and makes it fast and simple to arrange tasks.
WebPageTest measures your website’s efficiency, and has lately added a brand new characteristic, Carbon Management, which helps to measure the CO2 impression, together with suggestions for lowering it.
I in some way missed this one off the unique listing, regardless of utilizing it for almost each mission. Utopia (by James Gilyead and Trys Mudford) offers configurable set of CSS customized properties for fluid sizing and typography, with choices to make use of a modular scale. It’s a godsend, and helps to keep away from writing media queries far and wide!
Embedded movies could be answerable for efficiency issues (and CO2 emissions) of a website. This package deal by Paul Irish ensures they’re solely loaded upon interplay, offering a greater (quicker) person expertise.
Jake Archibald’s instrument for minifying and compressing SVGs is indispensable for any developer working with SVG.
A extremely cool playground that can assist you perceive how SVG path syntax works.
This straightforward instrument takes an SVG and converts it to a base64 encodes URL, to be used in CSS properties resembling background-image and mask-image.
Firefox is my major growth browser and has a bunch of helpful inspection instruments for working with CSS, together with a coloration distinction accessibility checker, inspectors for fonts, format and animation, a modifications panel, validity and compatibility checkers. It was too laborious to choose only one favorite characteristic!
Lea Verou’s visualizer for cubic bezier easing curves for CSS animations is one I take advantage of repeatedly for crafting extra natural-looking animations.
This VS Code extension allows straightforward switching between completely different .env recordsdata in a mission.
A instrument by Fershad Irani for checking in case your third-party scripts use inexperienced internet hosting.
Construct instruments could be configured to compress photos, however we will scale back power use much more by not importing massive photos within the first place! Tiny PNG squooshes not simply PNG recordsdata, however JPG and WebP too, with no seen lack of high quality.
An extension for VS Code that exhibits the scale of your JS imports in a file. It helps you turn out to be conscious of the worst offenders, and contemplate extra light-weight options.
For those who work with information visualisation on the net you’ll doubtless already know D3.js. However I needed to incorporate it right here because it’s an awesome library, and one which I take advantage of virtually daily of my working life at Ada Mode. Along with information viz, it has helpful modules for working with arrays, date and time formatting, SVG basically, and rather more.
I’m positive I’m lacking a bunch! What are your favorite instruments? Let me know!
