Easy Automatic File Backups with Borg | Ubuntu 18.04

Isaiah Nixon — Sun, 06 Sep 2020 06:35:34 +0000

"And when they ask us what we're doing,
you can say, We're remembering.
That's where we'll win out in the long run."
-- Ray Bradbury (Fahrenheit 451)

Cross post from my blog.

The Problem

Have you ever deleted a file and two days later needed to download it again? Have you ever done this with files that take forever to re-download? Me too...

The Solution

Create automated backups of your downloaded files.

This sounds like it could be cumbersome and resource-intensive. However, I recently discovered BorgBackup (Borg) and it was neither.

Step by Step

Also available as a Gist, and a YouTube walkthrough.

The following commands are set up for Ubuntu 18.04 but should translate to any major operating system without too much hassle.

Create a directory.

mkdir bkp

Install Borg.

sudo apt install borgbackup -y

Create the repository.

borg init --encryption none bkp/

Add crons job taking backups and cleaning up old ones.

crontab -e

Using your text editor, add the following lines:

0 12 * * * borg create ~/bkp::Downloads-$(date '+\%m-\%d-\%Y') ~/Downloads/
0 13 * * * borg prune -v --list --keep-within=7d ~/bkp

Note on Extraction:

When extracting files using Borg, the directory structure in the backup will be the true system path of the directory that you backed up. For this reason, you must specify the system path when extracting the backup to a folder other than the source folder. For example:

borg extract ../bkp::Downloads-09-05-2020 home/e/Downloads

On my system, this command extracts the Dowloads backup from September 5th to the current directory. However, your username probably won't be the letter e.

Conclusion

Borg has a lot of in-depth and well-developed features outside the scope of this use case. I look forward to setting up some more complex scenarios and creating more walkthroughs in the future. Hopefully, this helps you get started.

How to Make a Dynamic, Animated, and Responsive Canvas Element

Isaiah Nixon — Wed, 25 Mar 2020 06:45:42 +0000

When creating Where is Mars? I had data that I needed a visual representation of. I knew <canvas> was the answer. But, I didn't quite know how to get it there. It took a bit of research and trial-and-error but I made it work. I figured this could help someone else, so I thought I would share it here.

The Responsive Canvas

First, we need a canvas element.

    <canvas id="responsive-canvas"></canvas>

For me, CSS is the easiest way to place and size the canvas how I want.

    canvas#responsive-canvas {
      width: 100%;
      height: 100%;
      position: fixed;
      left: 0;
      top: 0;
      z-index: -1;
    }

Finally, we need a couple of JS variables to interact with this component.

    const c = document.getElementById("responsive-canvas");
    const ctx = c.getContext("2d");

Feed the Canvas its Own Size

The canvas size is controlled by CSS. As such, the context in JS doesn't know where to draw things. Run this function each time before drawing anything on the context:

    const setUpCanvas = () => {
            // Feed the size back to the canvas.
            c.width = c.clientWidth;
            c.height = c.clientHeight;
    };

Draw on the Canvas in Ratios

Whenever making a responsive canvas drawing, everything must be done in ratios. As such, it is important to know the minimum value between the width and the height:

    const min = Math.min(c.height, c.width);

This can be used to draw components that have the same relative size, no matter the screen. For example:

    ctx.fillStyle = "#FFAA1D";
    ctx.beginPath();
    ctx.arc((c.width/2), (c.height/2), (min * 0.04), 0, 2 * Math.PI);
    ctx.fill();

Tie the Drawing to Window Resize

The code for drawing components on the canvas should be wrapped in a function:

    const drawComponents = () => {
            /* Code for drawing on the canvas */
    };

This function, along with setUpCanvas() from the previous section should be called whenever the window is resized. You'll end up with something like this:

    window.addEventListener('resize', () => {
        // Clear the canvas.
        ctx.clearRect(0, 0, c.width, c.height);

        // Draw it all again.
        setUpCanvas();
        drawComponents();
    });

Animate Through Intervals

If you want to do any animations with the components, you will need your drawComponents() function to return the output of a setInterval() function. This will look something like this:

    const drawComponents = () => {
        /* Code for drawing on the canvas */

        // Return the animation interval.
        return setInterval(() => {
            /* Code for changes to canvas over time. */
        }, 100);
    };

Then you will want to capture this interval when drawComponents() is called and clear it away when the window is resized. Like so:

    setUpCanvas();
    let animationInterval = drawComponents();

    window.addEventListener('resize', () => {
        // Clear the canvas.
        ctx.clearRect(0, 0, c.width, c.height);

        // End the old animation.
        clearInterval(animationInterval);

        // Draw it all again.
        setUpCanvas();
        animationInterval = drawComponents();
    });

Dynamically Update the Data

In my case, I also wanted the data that the canvas represented to be updated every minute. First, add the data as an input to drawComponents():

    const drawComponents = (data) => {
        /* Code for drawing on the canvas, based on data */

        // Return the animation interval.
        return setInterval(() => {
            /* Code for changes to canvas over time. */
        }, 100);
    };

Then, take the logic from the window resize event, and make a general reset() function that takes the new data object, and an animation interval as inputs.

    const reset = (data, animationInterval) => {
        // Clear the canvas.
        ctx.clearRect(0, 0, c.width, c.height);

        // End the old animation.
        clearInterval(animationInterval);

        // Draw it all again.
        setUpCanvas();
        return drawComponents(data);
    };

Finally, your code should look something like this:

    setUpCanvas();
    let data = "";
    let animationInterval = drawComponents(data);

    setInterval(() => {
        // Update data.
        data = "cool new data";
        animationInterval = reset(data, animationInterval);
    }, 60000);

    window.addEventListener('resize', () => {
        animationInterval = reset(data, animationInterval);
    });

Final Code

You can see how the final code all came together in main.js.

Forem: Isaiah Nixon