DEV Community: Luteya Coulston

Fixing Next js "ReferenceError: document is not defined"

Luteya Coulston — Fri, 26 Mar 2021 14:38:53 +0000

I came across this error while learning next js and I couldn't understand what I did wrong. The error is thrown because document is only available inside the browser and not on the server. Next js executes this code on the server side and that's why the error is thrown.
In this tutorial I'll show you three ways on how to solve this issue.
Solution 1:
Since the window is part of the browser, we can wrap our code inside an if statement. If you check on the console the type of window it returns object. The following code illustrates this:

if (typeof window === 'object') {
// Check if document is finally loaded
   document.addEventListener("DOMContentLoaded", function () {
       alert('Finished loading')
     });
  }

Solution 2:
Since nextjs uses reactjs we can use the useEffect hook which checks if component has mounted or updated. Here is an example.

import {useEffect} from "react";

useEffect(() => {
    alert('Finished loading');
  }, []);

Note that I passed [] as a second argument, this is because useEffect watches what has changed which in this case I just want to check if the document has completed loading. If you don't pass it it will keep executing let's say we you click on an internal link it will keep alerting. Check documentation

Solution 3:
I read that this is a deprecated method but I just decided to add this in case you come across it somewhere. I'll be using the process.browser method

if (process.browser) {
    document.addEventListener("DOMContentLoaded", function () {
       alert('Finished loading');
     });
   }

Fixing "Unexpected token \u0000 in JSON at position.." error

Luteya Coulston — Sun, 21 Feb 2021 07:35:53 +0000

I had this error while creating a react app but most of the solutions I found didn't solve the error and I thought I should write this for future reference.

You have to clean cache for the error to go away as it's corrupt. The following are ways of doing it inside a terminal.
For npm:

npm cache verify

If it still doesn't work try:

npm cache clean --force

For yarn:

yarn cache clean

How to make a collage using Javascript: Part 3 (Downloading the collage)

Luteya Coulston — Sun, 07 Feb 2021 16:21:07 +0000

Read first two parts here:

First let's define a function for downloading the image:

/**
 * Generate image from the canvas then downloads it.
 */
1 function downloadImage() {
2    const dataSrc = cvns.toDataURL("image/png");
3    let hiddenLink = document.querySelector("#hidden-link");
4    hiddenLink.setAttribute("href", dataSrc);
5    hiddenLink.setAttribute(
6      "download",
7      `collage${new Date().getMilliseconds()}`
8    );
9    hiddenLink.click();
10  }

HTMLCanvasElement.toDataURL() as explained by MDN,

returns returns a data URI containing a representation of the image in the format specified by the type parameter.

On line 2 we add the type as image/png even though that's the default, you can add even as jpg.
On line 4 we add the href to the hidden link and put the dataSrc as the url. We also add the attribute of download and a name which starts with collage.
The hidden link is in the index.html file.
Still that won't work as we need to paint the main canvas but first we need to prevent the default of download button so it won't redirect.
Add to upload.js

downloadButton.addEventListener("click", function (e) {
    e.preventDefault();
    paintThenDownload(downloadImage);
  });

We then define the paintThenDownload button.
Add to upload.js:

 /**
 * Paints the canvas then call the function to download image.
 * @param callback Function
 */
function paintThenDownload(callback) {
    let img1 = document.querySelector("#img-1");
    let img2 = document.querySelector("#img-2");
    let query = window.location.search;
    let pickedTemplate = query.split("=")[1];

    if (img1 !== null && img2 !== null) {
      if (pickedTemplate === "1") {
        template_1(img1, img2, "main");
      } else if (pickedTemplate === "2") {
        template_2(img1, img2, "main");
      } else if (pickedTemplate === "3") {
        template_3(img1, img2, "main");
      } else {
        template_1(img1, img2, "main");
      }
    }
    callback();
  }

It's the same as the previewCollage function on the last section but this one receives a callback function and the templates third parameter is main and not preview.
The function is called and passed to the downloadImage function when the downloadButton is clicked.
That's it, I hope you found that worth your time.

How to make a collage using Javascript: Part 2 (Javascript section)

Luteya Coulston — Sun, 07 Feb 2021 16:15:58 +0000

Note: This is a part two, if you need the starting files check part 1: starting files

If you were keen on the index.html files on the last section, the template links did not have a href attribute. That's because I wanted to do it dynamically, so create an index.js file and paste the following code:

"use strict";
const chooseLinks = document.querySelectorAll(".choose");
chooseLinks.forEach(function (link, index) {
    link.setAttribute("href", "upload.html?t=" + (index + 1));
});

The links had a class of choose, the above code stores them in an htmlcollection which can be traversed using a loop. In this case I use a forEach loop that takes in the parameters of link and index. Note that an htmlcollection is just like an array which starts at 0 so in setting the attribute, we add 1 to the index as there is no template 0.
The ?t= part is the query parameter which look at later.

Inside index.html, add link to the upload.js file

Add toindex.html before closing the body tag:

<script src="./index.js"></script>
<script src="./upload.js"></script>

That's all about the index.js, now create upload.js file and inside it we'll declare the following variables.

upload.js:

"use strict";
/**Maximum number of files to upload */
const maxFiles = 2;
const inputElement = document.querySelector("#files");
const downloadButton = document.querySelector("#downloadButton");
const previewButton = document.querySelector("#previewButton");
const hiddenImages = document.querySelector("#hidden-images");
/**main canvas */
const cvns = document.querySelector("#cvns");
/**preview canvas */
const preview = document.querySelector("#preview");
/**main canvas context */
const ctx = cvns.getContext("2d");
/**preview canvas context */
const previewCtx = preview.getContext("2d");

Since we're not using any database, we need a place to store our uploaded images, localStorage is good but some images can be bigger than the localStorage limit. Now that's why there's a declared hiddenImages variables, when uploading the images they will appended inside the hiddenImages element. If you check styles.css #hidden-images has a display of none.
Also, before painting the canvas, we need a context which for in case is 2d. You can refer to MDN for in-depth explanation on canvas context.
Here's the function for saving the images, add it to upload.js without the line numbers.

/**
 * Saves the uploaded image in the dom.
 */
1 function saveImages() {
2    let uploadedFile = inputElement.files;
3    for (let index = 0; index < maxFiles; index++) {
4      if (uploadedFile[index]) {
5        const reader = new FileReader();
6        reader.readAsDataURL(uploadedFile[index]);
7        reader.onloadend = function () {
8          let src = this.result;
9          let img = document.createElement("img");
10          img.setAttribute("src", src.toString());
11         img.setAttribute("id", `img-${index + 1}`);
12          hiddenImages.append(img);
13        };
14      }
15    }
  }

The input element for uploading the images was stored inside the inputElement variable. Input form element of type file have a property of files which we have stored in uploadedFile variable on line 2 then loop through it twice to access the two images that will be uploaded.
On line 5 we store a FileReader object inside the reader variable. FileReader is an object that enables that can read file data just as it's name says. Check documentation here.
FileReader has some event handlers and one one of them is the onloadend which is triggered after file is read.
On line 7 we define the function to be triggred. The FileReader will return a a result and we store it inside the local variable src. Then on line 9 we dynamicaly create an image element and set it's source and id on line 10 - 11. Each image will now have an id of img-1 and img-2 respectively.
Our function is now finished but we need to call it when images are uploaded, how do we do that? It easy look:

inputElement.addEventListener("change", saveImages);

Whenever our input changes, it will be called.
The next thing we need to do is painting on the canvas but before that let me highlight on how the canvas draws images.
The following snippet is a sample of how it works:

context.drawImage(image, dx, dy, dWidth, dHeight);

The dx and dy parameters are x and y axis while the dWidth and dHeight are the image width and height respectively.
NOTE:The canvas x and y axis starts at the top-left corner.
Let's draw template 1..
Add inside upload.js:

function template_1(img1, img2, show) {
  if (show.toLowerCase() === "preview") {
    /**preview canvas */
    previewCtx.drawImage(img1, 0, 0, 275, 275); //first image
    previewCtx.drawImage(img2, 100, 100, 137.5, 137.5); //second image
  } else if (show.toLowerCase() === "main") {
    /**main canvas */
    ctx.drawImage(img1, 0, 0, 550, 550); //first image
    ctx.drawImage(img2, 200, 200, 275, 275); //second image
  }
}

It takes three parameters, two images and a show parameter. If show is defined as preview then it draws on the smaller canvas and if show is main it draws on the bigger canvas. Note the context used are the ones we defined as previewCtx and ctx at the start.
Template 2 is also the same just different x and y axis.

function template_2(img1, img2, show) {
  if (show.toLowerCase() === "preview") {
    /**preview canvas */
    previewCtx.drawImage(img1, 0, 0, 137.5, 275); //first image
    previewCtx.drawImage(img2, 137.5, 0, 137.5, 275); //second image
  } else if (show.toLowerCase() === "main") {
    /**main canvas */
    ctx.drawImage(img1, 0, 0, 275, 550); //first image
    ctx.drawImage(img2, 275, 0, 275, 550); //second image
  }
}

Template 3 is as followed:

function template_3(img1, img2, show) {
  if (show.toLowerCase() === "preview") {
    /**preview canvas */
    previewCtx.drawImage(img1, 0, 0, 275, 137.5); //first image
    previewCtx.drawImage(img2, 0, 137.5, 275, 137.5); //second image
  } else if (show.toLowerCase() === "main") {
    /**main canvas */
    ctx.drawImage(img1, 0, 0, 550, 275); //first image
    ctx.drawImage(img2, 0, 275, 550, 275); //second image
  }
}

Let's write a function of previewing the collage and then on the next last chapter we'll see how to download from the canvas.
First we'll prevent the previewButton from redirect as that is the default behaviour of links.
Add to upload.js:

previewButton.addEventListener("click", (e) => {
  e.preventDefault();
  preview.style.display = "block";
  previewCollage();
});

The preview canvas was also hidden, on clicking as you can see above we display it then we call the previewCollage function which we define next.
Add to upload.js without the line numbers:

/**paints the preview canvas. */
1 function previewCollage() {
2  let img1 = document.querySelector("#img-1");
3  let img2 = document.querySelector("#img-2");
4  let query = window.location.search;
5  let pickedTemplate = query.split("=")[1];
6
7  if (img1 !== null && img2 !== null) {
8    if (pickedTemplate === "1") {
9      template_1(img1, img2, "preview");
10    } else if (pickedTemplate === "2") {
11      template_2(img1, img2, "preview");
12    } else if (pickedTemplate === "3") {
13      template_3(img1, img2, "preview");
14    } else {
15      template_1(img1, img2, "preview");
16    }
17  }
18 }

Remember at the start when we dynamically added links to the chooseLinks variable inside the index.js file. Now the links had a url path like upload.html?t=index + 1. The ?t part as I said is the query parameter/search. To get it you can try on the console to write:

location.search
>"?t=2" //returns

To get the number we use split which will return an array as on line 5 . Since we used '=' to split, the array returned will be like:

['?t','1']

Now the template picked can be found on index 1 as arrays start at index 0.
If it doesn't make sense try and re-read or as me in the comments I'll reply. Next section is downloading the collage.

How to make a collage using Javascript: Part 1 (Starter files)

Luteya Coulston — Sun, 07 Feb 2021 13:13:49 +0000

Google defines collage as the following:

a piece of art made by sticking various different materials such as photographs and pieces of paper or fabric on to a backing.

As you already know there are applications for making a collage like photogrid and pizap among many but I find it fun just to make things on my own and improve my experience as a self-taught web developer. It will contain just basic templates but you can add more features if you want.
I will use vanilla javascript on this project the main project I made it using typescript. You can find the complete project source code on this repository. The Javascript files are in the dist folder while the typescript files are in the src folder.

Let's begin with the setup..
Create an index.html file and paste the following code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Collage maker</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
<!-- Will display if Javascript is turned off -->
    <noscript>
        <div id="no-js">
            <p>You need to enable Javascript to use this site</p>
        </div>
    </noscript>
    <div class="container">
        <h1>Choose template</h1>
        <div id="templates">
            <div class="template template-1">
                <div id="t-in-1"></div>
            </div>
            <a class="choose">Choose this <img src="./pointer.svg" alt="up arrow" class="pointer"></a>
            <div class="template template-2">
                <div id="t-in-2"></div>
            </div>
            <a class="choose">Choose this <img src="./pointer.svg" alt="up arrow" class="pointer"></a>
            <div class="template template-3">
                <div id="t-in-3"></div>
            </div>
            <a class="choose">Choose this <img src="./pointer.svg" alt="up arrow" class="pointer"></a>
        </div>
    </div>
    <footer>
        <p>Made with ❤ by <a id="git-link" href="https://github.com/coulKe">Luteya Coulston</a></p>
    </footer>

</body>

</html>

</html>

The above code contains the current only 3 templates available for making a collage. The svg images can be download in the git repository but it's only for decoration really not a must.
Then create an upload.html file with the following code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload - Collage maker</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
<!-- Will display if Javascript is turned off -->
    <noscript>
        <div id="no-js">
            <p>You need to enable Javascript to use this site</p>
        </div>
    </noscript>
    <div class="container">
        <div id="upload-view">
            <form>
                <label for="files">Upload photos:</label> <br>
                <input type="file" id="files" multiple> //Note the multiple attribute
            </form>
            <a href="" id="previewButton">Preview</a>
            <a href="" id="downloadButton">Download Collage</a>
            <canvas id="preview" width="275px" height="275px"></canvas>
            <canvas id="cvns" width="550px" height="550px"></canvas>
        </div>
        <div id="hidden-images"></div>
        <a id="hidden-link" href="#" hidden></a>
    </div>
</body>

</html>

It's just a basic html file with an input file, some links and two canvases. The first canvas with the id of preview will be used is smaller in size and will be used to preview the collage after files are uploaded while the second canvas with the id of cvns will be used to generate the image that will be downloaded as we'll see later on.
We'll then create a style.css file to style our html file, it's not the best of design but we'll with it 😁

* {
    box-sizing: border-box;
  }
  #no-js {
    text-align: center;
    padding: 1rem;
    font-weight: bold;
    font-size: large;
    color: #ffffff;
    background-color: rgb(85, 0, 0);
  }
  body {
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
  }
  #git-link {
    color: #ffffff;
    text-decoration: none;
  }
  #git-link:hover {
    text-decoration: underline;
  }
  footer {
    text-align: center;
    font-weight: bold;
    padding: 0.5rem;
    color: #ffffff;
    background-color: #000000;
  }
  h1 {
    text-align: center;
  }
  .container {
    counter-reset: template;
  }
  #templates {
    text-align: center;
  }
  .choose,
  #previewButton,
  #downloadButton {
    text-decoration: none;
    display: inline-block;
    padding: 0.5rem;
    background-color: #000000;
    color: #ffffff;
    font-weight: bold;
    border-radius: 4px;
  }
  .choose {
    margin: 4px;
  }
  .pointer {
    width: 15px;
    height: 15px;
  }
  .template {
    position: relative;
    margin: auto;
    background-color: #f3f3ff;
    border: 1px solid grey;
    width: 250px;
    height: 250px;
    margin-bottom: 6px;
  }

  .template::before {
    content: counter(template) ")";
    counter-increment: template;
    position: absolute;
    font-weight: bold;
    top: 0;
    left: -25px;
  }

  #t-in-1 {
    border: 1px solid grey;
    background-color: inherit;
    width: 120px;
    height: 120px;
    position: absolute;
    bottom: 30px;
    right: 30px;
  }

  #t-in-2 {
    border-left: 1px solid grey;
    background-color: inherit;
    width: 125px;
    height: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
  }

  #t-in-3 {
    border-bottom: 1px solid grey;
    background-color: inherit;
    width: 100%;
    height: 125px;
    position: absolute;
    top: 0px;
  }
  /*Upload page*/
  #upload-view {
    padding: 1rem;
    max-width: 800px;
    margin: auto;
    text-align: center;
  }
  #hidden-images,
  canvas {
    display: none;
  }
  canvas {
    margin: auto;
  }
  #img-1 {
    width: 50%;
    height: 100%;
    object-fit: cover;
  }
  #img-2 {
    width: 50%;
    height: 100%;
    object-fit: cover;
  }
  label {
    display: block;
    font-weight: bold;
    font-size: larger;
  }
  #previewButton,
  #downloadButton {
    margin: 8px;
  }

So far so good, the next part will deal with javascript because if I put it here it will be too long. See you on the other side(part 2).

CSS FILTER ON THE BACKGROUND ELEMENT

Luteya Coulston — Wed, 03 Feb 2021 13:27:06 +0000

I once while practicing just decided to make a photo editor app using react you can check the code here, while on the research I ended up discovering about CSS filters. It's a way of applying filters (obviously) to an html element.
On this tutorial I will show you how to create a filter on a background element. Something like the cover image.
The complete demo can be downloaded on codepen

First we'll create an html file called index.html with basic styling.

<body>
    <div class="content">
        <h1>Backdrop test</h1>
        <p>Just a demo on the CSS backdrop-filter</p>
    </div>
<style>
body {
            margin: 0px;
            background-image: 
                url('https://source.unsplash.com/600x800');
            display: flex;
            height: 100vh;
            width: 100vw;
        }

        .content {
            margin: auto;
            align-self: center;
            width: 50%;
            background-color: #fff;
            padding: 2rem;
        }
</style>
</body>

The body here is our background element with a background image linked inside the style tags and other styles for basic design.

You probably already know about the Css filter tag but if we use that, the whole body element and the content area will be applied the filters too.
To only apply filters on the background, we use backdrop-filter which uses the values of the normal filter tag. So let's do that, inside the body styles, we'll add a backdrop-filter style as seen below:

body{
    backdrop-filter: blur(90px);/*added here after other styles*/
}

Something to look out for:

There are browsers like opera mini as seen here which doesn't support CSS filters, how do you solve that you may ask.

To avoid such surprises, it's better to check for support before applying. We can do that using the CSS @supports as seen below.

background-color: #fff;
   @supports (backdrop-filter: blur()) {
    background-color: transparent; /*Has to be transparent*/
    backdrop-filter: blur(100px) contrast(90%);
  }

Note: Here I have used a background image so adding a background color isn't necessary here but there are situations where you have no background image then you better apply a background color and inside the @supports check you apply a transparent background color.
Check MDN for the documentation.
I hope you find this useful, have a nice day 🙂