There’s an increasingly very long list of tools out there to help developers. Here’s some of those I find interesting.

resource.fyi

Is a huge list of useful resources listed in categories such as APIs, colours and gradients, design inspiration, design tools, dev tools, hosting, icons, logos, marketing, stock photos and more.

What Devs Need

In the same vein as resource.fyi but more dev, less design focused.

MDN Border Image Generator

Is a great tool for creating CSS border code. You can upload an image or load one from a url and tweak various border-image properties and see exactly what they do. Then just cut’n’paste the CSS it spits out at the bottom. Demonstrated in a Kevin Powell video.

CSS Layout

A selection of commonly used layouts for single components to whole pages and divided into different sections: display, layout, input, feedback and navigation.

CSS Scan shapes

A great little selection of pre made CSS shapes like trianges, stars, arrows, tooltips, starburst and more. Just click the shape to copy the code to the clipboard.

Open Props

A CSS library of custom properties by Adam Argyle. There are 12 categories from colours, gradients, shadows and typography to animation borders, media queries and masks. See Adam discuss his creation on React Wednesdays.

Media Query Style

A quick way to get media queries such as @media (hover: hover), dark mode, reduced motion etc..

Umami web stats

Is a free and open source web site analytics app. You install and host yourself as a static site then set up as many web sites and you want plus user accounts to view the sites. Works with Netlify, Versel and many other static hosts. Built with Next JS.

My first experience didn’t go well as the build failed on Netlify. Not figured out why yet.

Images and Graphics

SVG Repo

Has a great selection of SVG’s ideal for icons and even includes multiple logo icons for Hugo.

CSS.gg icons

Another very popular source of icons available in SVG and sprites.

UI Gradients

Great selection of premade gradients from light to dark colours. View full screen, rotate the gradients and cut’n’paste the CSS.

URL to screenshots

If you want a screenshot of a web site at a certain resolution this is not bad.

Choose the resolution you want the screenshot from (1920x1080 down to 1024x768) then choose the size you want the finished image which can be down to 100px wide.

Upscayl

Is a downloadable app that uses AI to increase the size of images or sharpen blurred ones. Works with Linux, Windows and Mac but you need a separate GPU which it uses.

I used the Windows version and it’s a mix of good and bad. The good is that it can create fantastic images … sometimes. Sometimes though it fails and you need to close the app from the task manager as it appears stuck with a warning dialogue box. Sometimes it can be really slow. One image I tried to sharpen took well over an hour and wasn’t much different to the original. But overall a thumbs up from me if you use it on the right, usually smaller, images.