When you’re building a front end project, unless you’re committing very often, you probably want to see your progress for historical reasons.  Like the famous saying, there’s a tool for that.  TLapse is a NPM module that allows you to start a server in the background and periodically take screenshots of your website with your desired dimensions.

To install the tool, run

npm install -g tlapse

start your web server for your project, let say it runs on localhost:3000, you would run the following to allow tlapse to listen to it:

tlapse --every 1m --directory ./screens -- localhost:3000 1366x768

the command above will take screenshots sized at 1366×768 pixels and place them in screens folder every minute.  The command is smart enough to NOT take screenshots if it detects no difference within the last time interval.

If you want tlapse to take screenshot of a specific selector, you can do so like this:

tlapse --every 1m --directory ./screens -- localhost:3000 1366x768 --selector='.my-container'

from my experience, the selector feature isn’t very robust, I would often get cropped images and sometimes it simply doesn’t render anything from the selector.  Since the project is open source, I encourage you all to contribute to it.

Options

Since TLapse is built on top of pageres-cli, you can pass any parameter from pageres into the command line.

-v, --verbose

Verbose output to see errors if you need to troubleshoot.

-c, --crop

Crop to the set height.

$ pageres todomvc.com 1024x768 --crop
-d, --delay=<number>

Delay screenshot capture.

$ pageres todomvc.com 1024x768 --delay=3
--filename=<template>

Custom filename.

$ pageres todomvc.com 1024x768 --filename='<%= date %> - <%= url %>'
--selector=<element>

Capture DOM element.

$ pageres yeoman.io 1366x768 --selector='.page-header'
--hide=<element>

Hide DOM element. Can be set multiple times.

$ pageres yeoman.io 1366x768 --hide='.page-header'
--no-crop

Override a global crop option within a group.

$ pageres [ yeoman.io 1366x768 --no-crop ] todomvc.com 1024x768 --crop
--css=<string>

Apply custom CSS to the webpage. Specify some CSS or the path to a CSS file.

$ pageres todomvc.com --css='body { background: red; }'
$ pageres todomvc.com --css='style.css'
--cookie=<cookie>

Browser cookie. Can be set multiple times.

$ pageres yeoman.io --cookie='foo=bar'
--header=<header>

Custom HTTP request header. Can be set multiple times.

$ pageres yeoman.io --header='Cache-Control: no-cache'
--username=<username>

Username for HTTP auth.

--password=<password>

Password for HTTP auth.

--scale=<number>

Scale webpage n of times.

--format=<string>

Image format. Either png (default) or jpg.

--user-agent=<string>

Custom user agent.

For more info about pageres-cli, check it out at: https://github.com/sindresorhus/pageres-cli

I find TLapse useful to reference changes you made to the front end of your project, and it’s especially useful if you want to string all the images together to create a time lapse website GIF for your client or your team!