Web Tools #416 - ImageKit.io, CSS Tools, React, Jamstack

The following intro is a paid product review for ImageKit.io, a global image CDN with built-in optimization, real-time transformations, and more.

In the last few years, there's been a big push in ensuring images (which are known to be the largest resources on many websites) are delivered fast and in an optimized fashion. Many apps and websites are taking advantage of Content Delivery Networks (CDN) to help with this.

ImageKit.io is an all-in-one CDN that offers some great features that I'll discuss here, including:

• Real-time Image Optimization
• Real-time Image Transformations (e.g. resizing, cropping, etc.)
• External Storage Integrations

Let's take a look at the optimization service first.

If you're like me, your current workflow might include a multi-step and multi-app process that requires optimizing images manually (or as part of a build process), along with deploying those images to some kind of cloud provider or CDN.

ImageKit.io makes this process so much easier by offering automatic image optimization as part of their CDN service. Once you've got your account set up (which, by the way, is free for up to 20GB bandwidth per month!), go to the "Image Settings" menu option and you'll see the optimizations available:

From there you can choose to have automatic image format optimization (which doesn't change the image URL), device-based optimization, and on-the-fly image compression — i.e. you select a level of compression before delivery.

The file format conversion is a really great feature. Basically, you add the file to your media library and you can then set it up to automatically deliver the most optimized file type to each device. For example, WebP for Chrome and AVIF for devices that support that format.

Another powerful feature of ImageKit.io is the ability to do real-time transformations by simply adding parameters to any image URL, which you can see demonstrated in the graphic below.

As an example, I've uploaded a single high-resolution image that has the following URL:

https://ik.imagekit.io/​impressivewebs/fox_ztCv4pxXbW.jpg

That's a full high-res image that I don't want being downloaded on all devices. I can use the following variations of the image by simply changing the path:

https://ik.imagekit.io/​impressivewebs/tr:w-800,h-532/fox_ztCv4pxXbW.jpg

https://ik.imagekit.io/​impressivewebs/tr:w-600/fox_ztCv4pxXbW.jpg

https://ik.imagekit.io/​impressivewebs/tr:w-400/fox_ztCv4pxXbW.jpg

Notice the width and height values represented by "w" and "h". I can also choose to do the same thing using query string values:

https://ik.imagekit.io/​impressivewebs/fox_ztCv4pxXbW.jpg?tr=w-800,h-532

Again, no need to edit the image in the editor, just use the original image as a base, then apply the transformation in real-time by editing the URL.

Other on-the-fly transformations include:

• Image and text overlays (e.g. for adding water marks)
• Blur effect (e.g. for placeholders while a larger image is loading)
• Smart cropping for responsive images

As a bonus, you can also do custom image transformations from within your own dedicated Media Library. This means you can edit images using tools similar to those found in common image editors like Photoshop.

Once you've uploaded an image to your media library, you can choose from options like crop, resize, and rotate, as shown in the screenshot below.

In fact, the image editor is newly overhauled and new features were pushed out this week.

The last thing I'll cover here is the fact that you can integrate your existing external storage provider with ImageKit.io. This is extremely useful because it's not easy to move your team's entire media library to a new storage service. Using ImageKit.io means there's no need to change services — just integrate your existing provider.

In my example, I've integrated one of my buckets from my AWS account, which I normally use for my image storage. I can then use the following URL format to reference any of the images in my bucket:

https://ik.imagekit.io/imagekit-id/tr:w-600,h-275/my-file-name.png

The "imagekit-id" part of the URL would be the name of the origin as I've defined it when I set up the bucket integration.

This is a really neat feature and it's possible not only with AWS but also Google Cloud, Digital Ocean, and more.

When combined with the Media Library feature, ImageKit.io really is a powerful set of tools for hosting, optimizing, and delivering your media content.

If you'd like to give ImageKit.io a test run, you can check out the options on their pricing plans page. As mentioned earlier, the free forever plan allows up to 20GB per month in bandwidth usage, which is a great deal for any project looking for a new solution for managing and delivering media content.

So check out ImageKit.io if you're in the market for a fast and feature-rich CDN service. With their free plan, and no credit card required, I'm sure you won't be disappointed with their service.

Now on to this week's tools!
 

CSS and HTML Tools

Mobile Palette Generator
A color palette generator that generates secondary and accent colors based on a primary color you provide. Shows you a preview of the color scheme on mobile UIs.

Uniform CSS
An easy to use utility-first CSS framework built in Sass, designed to help you gain the full power of functional CSS.

React CSS Theme Switcher
A CSS-based theme switcher for React projects (e.g. for toggling dark/light modes).

CSS Layout Generator
A multi-featured layout generator for producing all sorts of custom layouts using either Grid Layout or Flexbox syntax. Includes lots of options for fine-grained control over the output.
 
Tailwindo
A PHP tool to convert Your CSS framework (currently Bootstrap) classes in HTML/PHP files to equivalent Tailwind CSS classes.

css-select
A CSS selector compiler/engine that turns CSS selectors into functions that test if elements match them.

Fower
Another framework-agnostic CSS-in-JS option, this one featuring atomic props, support for TypeScript, and more.

Fluid Typography
Online tool to style text that scales with the window size so that your headings look great on any screen.

On the Release Radar:

• xstyled - CSS-in-JS library now at version 3+
• Plaiceholder - Image placeholders now at version 2+
• Angular Flex-Layout - Flexbox for Angular, now at v12+

React Tools

use-file-picker
A file-picker component similar to the native File API, with various options for building some advanced file selection and file reading functionality.

react-highlight-within-textarea
React component for highlighting bits of text within a textarea element.

react-insta-stories
A React component for Instagram-like stories, with similar tap functionality.

sweetalert2-react-content
Official SweetAlert2 enhancer adding support for React elements as content.

react-easy-crop
A React component to allow the user to custom-crop images or videos then display the result. The demo is really nice!
 
react-simple-flowchart
A simple React.js flowchart component based on flowchart.js.

react-swipeable-views
A React component to build swipeable UIs (e.g. sliders, tab components, scrolling sections, etc).

React Image & Video Lightbox
React lightbox component that supports images and videos. Optimized for mobile UIs but also works nicely on desktop.

React Transliterate
Transliteration component for React with support for over 30 languages and uses the Google Input Tools API.

react-img-carousel
A flexible image carousel built with React.js that renders a carousel with support for lazy loading, autoplay, infinite scrolling, touch events, and more.

React CSV Downloader
A simple React component to allow downloading of CSV files.

On the Release Radar:

• react-native-ratings - Star ratings now at v8+
• React SimpleMDE - SimleMDE wrapper now at v5+
• react-froala-wysiwyg - Now at v4+

Jamstack, Site Builders, etc.

Graphite
A next generation online website builder carefully crafted with web designers’ best interests in mind. Use familiar graphic editor tools to create and publish professional grade pages without working with any code.

Nextra
In early development. A Next.js-based static site generator that supports Markdown with React components (MDX), file-system based routing, built-in syntax highlighting, internationalization, and more.

Jamstack Deploy
Monitors the performance of PaaS providers from 20+ locations so you can measure which fits better for your Jamstack app.
 
Hugo PaperMod
A theme based on hugo-paper to add more features and customizations to the original.

Smooth DOC
A ready-to-use Gatsby theme to build documentation pages for your project.

cstate
Fast, backwards compatible (IE8+), tiny, and simple status page built with Hugo. Completely free with Netlify, comes with Netlify CMS, a read-only API, and other useful features.

Bear
A privacy-first, no-nonsense, super-fast blogging platform. No trackers, no JavaScript, no stylesheets.

AppGyver
Professional no-code platform, enabling you to build apps for all form factors, including mobile, desktop, browser, TV and others.

gatsby-plugin-optimize-svgs
A Gatsby Plugin that uses svgo under the hood to minify SVGs output to the filesystem during the build.
 

A Tweet for Thought

Janna Bastow with a 2019 tweet thread that discusses the problems with product roadmaps. Might be useful if you're a founder currently working on something without a productive roadmap.
   

Send Me Your Tools!

Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
 

Before I Go...

Feels is a frustrating game for those who love emojis and Where's Waldo? books.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Want to get notified of new issues via Twitter, Telegram, or Messenger? You can sign up using a service called Reachme.

Support this newsletter:
PayPal.me  /  Patreon / GitHub Sponsors  /  E-Books / Buy Me a Coffee