Cliperado

Automated website screenshots, for user docs & marketing

No Employees
Founders Code
Solo Founder
B2B
Content
Productivity
SaaS
Utilities

Cliperado solves the maintenance burden of screenshots. Keep your screenshots up-to-date automatically for easy to follow user docs and beautiful marketing images.

December 2021 Adding Dark mode support, for the interface #2

Cliperado.com has dark mode support for the interface now.

First, the interface uses tailwind now, instead of bootstrap.
The homepage was already in dark mode available, based on the user preferences. On the web app side, we want our users to be able to choose between the light and dark mode.

Tailwind doesn't support this, so the frontend is now also choice based. But as long as the user did not select a dark or light theme in, the homepage will follow the user system preferences. This is done by a simple script, that is provided by tailwind. It is very easy to implement.

Inspriration

Dribbble and iOS offer great inspiration and best practices developing a consistent dark theme.
Along the way, we made the colors more consistent.

  • Blue button for the primary actions.
  • Orange for help information.
  • Yellow for onboarding and news indicator.
  • Brand green for the logo and avatars.
  • Red for destructive actions
  • Purple for errors

What is next

Adding support for dark mode in Cliperado screenshots. With this, cliperado is able to take screenshots in dark mode and serve these based on the user's preferences.

November 2021 Canvas performance improvements

In Cliperado you can create clips from screenshots. Clips are smaller cuts outs/ crops of the screenshot. On clips, you can add markup, such as boxes and arrows, etc.

To create the clips we've made a simple drawing interface. It looks a bit like Adobe XD. Cliperado Draw Interface

To draw any kind of shape, we use a canvas. The great thing about a canvas is that you can grab the pixels and store these as an image. This is the perfect solution for us.

The problem with Canvas is that if it is quite large, the performance is pretty bad. We take full page screenshots in retina resolution, so the canvas can be 2.560px * 20.000px. This is way too big for a smooth performance. The refresh rate drops to maybe 1 or 2 frames a second on modern hardware.

How we fixed Canvas performance

There is actually only one way to fix it. That is using a smaller canvas. But we still want to be able to show the large images. There is a great trick for this.

  1. We determine the maximum size of the canvas based on the screen resolution. You can use this canvas as a sort of window for the screenshot.
  2. Create a div that is the height of the large screenshot. This forces the browser to overflow and create scrollbars.
  3. By observing the scroll event, you can use the scroll offset of the large div as the offset for the screenshot painted in the canvas. This is fast, as the browser only has to repaint a smaller canvas.
  4. Compensate the canvas position in the large div by setting the position offset based on the scroll offset. This makes the canvas stay in the same place, giving the user the idea, the screenshot is scrolled.
November 2021 Adding WebP support for Clips, to save bandwidth

We've implemented WebP support for clips, last week. WebP is the way better version of PNG.

What is WebP?

WebP is a newer image format that can create both lossy and lossless compressed images
WebP combines the best features of many other image formats (JPEG, PNG, and GIF) together. WebP offers file sizes that are around 40% / 50% smaller than PNG without much of a quality loss. It has transparency support like PNG, and the ability to animate images like the GIFs.

Why is WebP better

The main reason is that creates smaller images with comparable quality

Which browsers can use WebP

95.8% of the current web browser usage has WebP support, according to caniuse.com.
Edge, Chrome, Safari, Firefox and Opera have WebP support.

What about other browsers

You have to serve older browser PNG or JPEG images. You can do this on the server side via content negotiation. If the browser supports WebP image, Cliperado sends the WebP version of the clip. Otherwise, it sends the PNG version.

How to set up content negotiation.

The browser sends an Accept header to indicate to the server which formats are supported. For instance: Accept: image/avif,image/webp,/

A simple PHP based implementation

Which checks if the browser accepts WebP and the server support creating WebP images


if (
	isset($_SERVER['HTTP_ACCEPT']) &&
	strpos($_SERVER['HTTP_ACCEPT'], 'image/webp') !== false &&
	function_exists('imagewebp')
) {
	return true;
} else {
	return false;
} 

##Simple content negotiation for Nginx

#set '$suffix' to '.webp' if the
#Accept-header contains “webp”
map $http_accept $suffix {
	  "~*webp" ".webp";
}

#if a '.jpeg'-file is requested, try
#'.jpeg${suffix}' instead; if that does
#not exist, return the '.jpeg'-file

location ~* .jpeg$ {
	try_files $uri$suffix $uri $uri/ =404;
} 

What about AVIF

AVIF is a newer compression format. It is supported by Chrome, Opera and Firefox. It supports DHR images and is the preferred format by NETFLIX. But for our use case, server screenshots, it doesn't offer benefits over WebP

October 2018 Prepping for Dark mode

We have finally taken the step to support dark mode in Cliperado.

What we start with

The interface is built on Bootstrap CSS. With a ton of custom utility like classes. On heavy custom pages, such as the sitemap index page, we put CSS definitions in the page. This is to reduce the overall CSS size and reduce the bleeding impact on other pages. We know this is not ideal, but it ships.

What we want

Cliperado's front end uses the prefers-color-scheme media, to auto set the color scheme. Because we don't want our website visitor to have to choose their preferred color.

For the app interface, we want to give the user the option to choose between dark or light mode, independent of their prefers-color-scheme. We want this because the users' help or marketing pages might not support dark mode. And they need to be able to check if the clips and markup look good in both color schemes, without leaving Cliperado.

What we did so far

We've switched to Tailwind CSS. Tailwind has great support for dark mode out of the box.
We started with plain Tailwind, and only copied over the absolute minimum number of classes from our old setup. Our own utilities are replaced with Tailwind native utilities, as much as possible.

We've replaced all our own layout utilities with Tailwind. In the process, we moved away from floats in favor of flexbox.

CSS icons need special attention. Glyphicons are replaced with inline Heroicons. Custom icons are cleanup to allow the use of the "currentColor" for the fill and stroke.

Cliperado is not a single Page App. It uses old school server reloads that render HTML and push it to the client. On interaction heavy pages, such as the Actions Editor, we use Vue. On most other pages, we use plain old jQuery. To clean this up, and more easily distinguish between style class and selector classes, we started to prepend selector classes with "js-".

What we still have to do

Actually implement dark mode for the app side.

Our interface consists of 3 parts, the background color, the foreground color and separator/ border colors.

How we are going to do this

We'll start with implementing the color scheme switcher. Once we have this, it is super easy to test if the dark and light mode look good.

We'll create a test page, with all the different background and foreground color combinations, including all the icons. This will probably result in 5 to 10 general color combinations. We'll either implement these with a global find and replace to inline the dark:mode color options, or we'll create some color utility classes.

June 2018 Cliperado Idea

Cliperado started as a spinoff from one of my other SAAS, while saving my 11th screenshot and thinking of a good name.

We wanted to add screenshots to our docs, not a few, but hundreds of screenshots. To explain features, with minimal text, in easy to follow step-by-step guides. Like IKEA and LEGO do it, just look at the image, follow the arrows and tada, you’re done. The main goals were to reduce the support volume, but also create great-looking marketing material. One of the best ways to sell is to explain.

Screenshots are awesome, but man, it is so much work to add just a few. Let alone maintain them. And you’ve probably seen more than a few outdated screenshots in docs of services you use. You get right? Maintaining screenshots is virtually impossible. Your UX/UI changes all the time.

Cliperado fixes that.

About

Cliperado solves the maintenance burden of screenshots. Keep your screenshots up-to-date automatically for easy to follow user docs and beautiful marketing images.