A tribute to Squoosh and Icomoon
The tools I had fun to use and the one I couldn't find
When I'm working on the new landing page of Synaps Media, -again- I needed a few tools to do some tasks. I always find great tools, make the job and then forget it. When next project comes, I look for bookmarks, history and everywhere, but I always miss some of them. So this time, I decided to put some notes to a great place that I can't miss; my blog.
Optimizing images with Squoosh
This is a great tool. It works on browser, it works on client-side (means your images don't go anywhere), it's open-source, it doesn't have any annoying ads, no-need to register and results are impressive. I converted many large png/jpeg images to webp and avif formats with it during this work. Definitely suggested!
Icon works - Icomoon (still!)
I used Fontawesome for most of the icons in the page, but didn't want to import whole font library for just around 30 icons. First I tried to use SVG files directly, but it was too much work without any benefit over using font file for me. While looking for a tool to create a custom font, I came across to Icomoon. I remember using Icomoon maybe 10 years ago and surprised that it still works with same clear interface.
I think it didn't have any updates since a while, so it didn't support WOFF2 format. But I easily converted TTF file to WOFF2 with another online tool named CloudConvert. So, instead of 300kb of resources to show about 30 icons, now I'm using 6kb. That's a great!
The tool I couldn't find
I spent a lot of time to make this image:
I really thought, there should be an app or service that creates this automatically. Give a web address, and then get screenshots of it in some operating systems with realistic device frames. But I couldn't find any. Then I downloaded some device bezels from Apple resources, got some screenshots from iOS and iPadOS simulators, put everything together in image editor (which I use Affinity Designer). I liked the result but I still think I should not need to spend 3+ hours to achieve this very common thing (maybe a product idea?).
Nevertheless, working on a pure frontend work, with a responsive, modern tech was fun. And I'm confident for both functional and technical results.
