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

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #416 • July 8, 2021

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

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:

Image Settings in ImageKit.io
Image Settings in ImageKit.io

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.

URL structure for doing on-the-fly transformations
URL structure for doing on-the-fly transformations

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.

Crop, Resize, and Rotate options for image editing
Crop, resize, and rotate options for image editing in ImageKit.io

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.

External Storage Integrations with ImageKit.io
External storage Integrations with ImageKit.io

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.

External Storage Providers you can integrate with ImageKit.io
External storage providers you can integrate with ImageKit.io

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.
 
CSS Layout Generator

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:

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-easy-crop

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:

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.
 
Jamstack Deploy

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.
 
A Tweet for Thought
 

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

Older messages

Web Tools #414 - Frameworks, JS Utils, Uncats

Thursday, June 24, 2021

Web Tools Weekly WEB VERSION Issue #414 • June 24, 2021 Advertisement IntersectionObserver Examples Practical, real world React examples of Intersection Observer. • No external JavaScript or CSS

Web Tools #413 - DebugBear, VS Code, Build Tools, React

Thursday, June 17, 2021

Web Tools Weekly WEB VERSION Issue #413 • June 17, 2021 The following intro is a paid product review for DebugBear, a Lighthouse-based website speed monitoring tool that provides in-depth reports for

Web Tools #412 - Git/CLI, Media/SVG, Jamstack

Thursday, June 10, 2021

Web Tools Weekly WEB VERSION Issue #412 • June 10, 2021 Advertisement Engineering Leaders Need to Know How to Structure a Remote Hiring Process A new era of remote work suddenly arrived and managers

Web Tools #411 - Frameworks, Testing Tools, JS Utilities, Polymorphism

Thursday, June 3, 2021

Web Tools Weekly WEB VERSION Issue #411 • June 3, 2021 Advertisement Learn How Remote Pair Programming Can Increase Your Team's Efficiency Suddenly, the future of work materialized, and when your

Web Tools #410 - bfcache, CSS Tools, Vue Tools, Uncats

Thursday, May 27, 2021

Web Tools Weekly WEB VERSION Issue #410 • May 27, 2021 Advertisement Cloudways Hosting A managed cloud hosting platform for digital agencies, developers, and e-commerce businesses offering simplicity,

Alpine.js Weekly #69

Saturday, July 24, 2021

Alpine plugins are dropping, keep an eye on Caleb Porzio's announcements. 🥳 New Alpine Plugin: Persist 🍾 Easily persist data across page loads by using a nifty little decorator function: $persist()

Olympics: Scammers are trying to cash in on the Olympic Games

Saturday, July 24, 2021

Smart Cities Robotic Challenge; KDE is to Linux what 7 was to Windows Subscription | Read Online | Twitter Facebook LinkedIn Top Story of the Day July 23, 2021 Top Story of the Day Scammers offer

Weekly Xamarin - Issue 313

Saturday, July 24, 2021

Moar MAUI! Weekly Xamarin View on the Web Archives ISSUE 313 24th July 2021 KYM PHILLPOTTS G'day Everyone, We are now on the downhill slope towards MUAI releases and you can really see it in the

[Python Dependency Pitfalls] "Re-inventing the wheel" disease

Saturday, July 24, 2021

Hey there, PyPI, the Python packaging repository, now contains more than 100000 third-party packages in total. That's an *overwhelming* number of packages to choose from... And this feeling of

The Plastic World of RealSelf

Saturday, July 24, 2021

Cyberbits #10: “The TripAdvisor of Boob Jobs” ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

The Framework Laptop is now shipping — BirdNet – Identify Birds by Sound — and AWS's Egregious Egress

Friday, July 23, 2021

Issue #473 — Top 20 stories of July 24, 2021 Issue #473 — July 24, 2021 You receive this email because you are subscribed to Hacker News Digest. You can open it in the browser if you prefer. 1 The

Daily Crunch - Bitcoin 'is a big part of our future,' says Twitter CEO Jack Dorsey

Friday, July 23, 2021

TechCrunch Newsletter TechCrunch logo The Daily Crunch logo Friday, July 23, 2021 • By Alex Wilhelm Hello and welcome to Daily Crunch for July 23, 2021. It's been an interesting week for the crypto

Software Testing Weekly - Issue 81

Friday, July 23, 2021

Do you ask the right questions? View on the Web Archives ISSUE 81 July 23rd 2021 COMMENT Welcome to the 81st issue! Here's one thing I'd like to highlight this week. It's a meaningful post

The Dial-Up Volunteer Army 💾

Friday, July 23, 2021

How AOL was built on a an army of unpaid volunteers. Here's a version for your browser. Hunting for the end of the long tail • July 23, 2021 Today in Tedium: In some ways, social media started with

JSK Daily for Jul 23, 2021

Friday, July 23, 2021

JSK Daily for Jul 23, 2021 View this email in your browser A community curated daily e-mail of JavaScript news Snapshot Testing for Frontends There are many types of software testing. Among these, one