DEV Community: Aimeri Baddouh

Are we overusing SPAs?

Aimeri Baddouh — Tue, 12 May 2020 13:20:50 +0000

On my daily job I work on a typical Rails monolith app that uses rail for the API and business logic layer, and serves a SPA built in React.
The more my team and I work on the SPA side, the more I have the feeling that we are only really using the dynamic content loading and routing parts of a SPA, and the team that originally built this app could have gotten away with a much simple approach of using Rails views with sprinkles of React for the niceties it provides, like component state management, styled components, component libraries and so on.

I was first introduced to programming through JavaScript, and not very long after my initial introduction, I picked up React, and most online tutorials focused on building SPAs, so I had a hammer and everything looked like a nail. These days I am very reluctant to build a single page application for my own projects, and tend to only build a SPA when I want a completely decoupled API, but that is rarely the case, as the added complexity almost never adds enough benefits to justify it.

What do you guys think? Are we as an industry overusing SPAs, or are there legitimate reasons to always rebuild the browser's apis inside our javascript applications?

Good projects for learning functional programming

Aimeri Baddouh — Mon, 28 Oct 2019 13:17:31 +0000

It seems like functional programming is getting a lot of attention these days, and I'm not immune to the hype train. I've been getting started with Elm, and have started learning a little bit of Haskell and Elixir, but I would love to have a few concrete, easy for beginners, projects to start getting familiar with this new paradigm.

In Elm I already have a few projects I had worked on while learning Javascript so I'll try implementing those in Elm as well. Things such as tic-tac-toe, flip card games, and so on.

However, since I tend to be more front-end focused, it is always a little hard for me to think of good back-end projects, so for you folks that have been focusing on back-end, especially with a functional language, what would be good projects in your opinion?

The Importance of Perseverance

Aimeri Baddouh — Thu, 17 Oct 2019 23:48:46 +0000

As developers, I imagine we've all been there. It is the beginning of our coding journey; we have all these ideas of fun projects we could do and every new idea is a potential new breakthrough.
That is a great feeling, and one of the reasons why some people turn to programming. Making things is fun!

What is ${!fun} is failing at our treasured personal projects. I am confident enough to wait for whoever doesn't have at least one abandoned project to cast the first stone. We talk more about good project ideas for beginners. The topic I'd like to explore today is the importance of trying again when you abandon a project.

First, I would like to get something out of the way. There are myriad reasons why one would abandon a project, but I am talking specifically about abandoning a project that turned out to be too hard and frustrating.

My story

When I first started learning to code I had a pet project that I spent hours working on. I wanted a simple way of adding pixel art on the screen.
I had a few requirements in mind for it too:

It had to be in Javascript (since that is what I was learning at the time)
I wanted to be able to turn it into a library at some point
I wanted to stay away from frameworks if possible
I had some fun using Excel for pixel art making, and had written a small JSON generator in vbscript. I wanted to use my proprietary format to feed the script with the data it needed for the pixel art.

With the exception of the last item, this list of requirements isn't anything out of the ordinary. My JSON file was not super complex either. Here is a sample of the generated JSON output from my Excel VBScript:

[
  {
    "name":"Computer",
    "pixelMap": [
      [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
      [0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
      [1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
      [1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1],
      [1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1],
      [1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1],
      [1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1],
      [1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1],
      [1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
      [0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
      [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
      [0, 1, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1, 0],
      [1, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1],
      [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1],
      [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0]
      ],
    "iconHeight": 15,
    "iconWidth": 15
  },
  {
    "name":"Apple",
    "pixelMap": [
      [0,0,0,0,1,1,0,0,0,0,0,0,0,0,0],
      [0,0,0,0,0,0,1,0,0,0,0,0,0,0,0],
      [0,0,0,0,0,0,0,1,0,0,0,0,0,0,0],
      [0,0,0,1,1,1,0,1,0,1,1,1,0,0,0],
      [0,0,1,1,1,1,1,1,1,1,1,1,1,0,0],
      [0,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
      [0,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
      [0,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
      [0,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
      [0,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
      [0,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
      [0,0,1,1,1,1,1,1,1,1,1,1,1,0,0],
      [0,0,0,1,1,1,1,1,1,1,1,1,0,0,0],
      [0,0,0,0,1,1,1,0,1,1,1,0,0,0,0],
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
    ],
    "iconHeight": 15,
    "iconWidth": 15 
  },
  {
    "name":"Cat",
    "pixelMap": [
      [0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
      [1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1],
      [1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1],
      [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
      [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
      [1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1],
      [1, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 1],
      [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
      [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
      [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
      [1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1],
      [1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1],
      [0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
      [0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0],
      [0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0]
    ],
    "iconHeight": 15,
    "iconWidth": 15 
  }
]

Nothing to really write home about, but it had some important information for my purposes: It had the width and height of each icon, along with a matrix of 0s and 1s that I could use in my code.

With my data in hand I could start coding, finally!

My code - First version

After a few days of exploring, I had a very naive first version of the code. The only problem? It didn't work. Actually, it displayed a lot of promising behavior, but it didn't look right, and I was too inexperienced to separate what was wrong. In my mind, this result was nothing but a failure:

So close yet so far away!

This is the code that produced that result, please pardon my mess:


document.addEventListener('DOMContentLoaded', function () {main();});

function main() {
  loadIconsFromServer('https://example.com/fake/path/icons.json');

}

const loadIconsFromServer = url=> {  
  fetch(url)
    .then(res => res.text())
    .then(body => {
      drawCanvas(body);
    });
};

const drawCanvas = loadIconsFromServerResponse => {
  imgPixel = JSON.parse(loadIconsFromServerResponse);
  var i = imgPixel.length;

  while (i--){
    styleCanvas(imgPixel[i].name, imgPixel[i].iconHeight, imgPixel[i].iconWidth);
    drawIcon(imgPixel[i].name, 
             imgPixel[i].iconHeight, 
             imgPixel[i].iconWidth, 
             imgPixel[i].pixelMap);
  }
}

const styleCanvas = (className, canvasHeight, canvasWidth) => {
  var canvasStyleSizePosition = "height:20vh; width:20vh; margin:0 auto;"
  var canvasStyleDisplay = "display:grid;" 
  var canvasStyleGridColumns = "grid-template-columns:repeat(" + canvasHeight + ", 1fr);"
  var canvasStyleGridRows = "grid-template-rows:repeat(" + canvasWidth + ", 1fr)"
  var canvasStyle = canvasStyleSizePosition + 
                    canvasStyleDisplay + 
                    canvasStyleGridColumns + 
                    canvasStyleGridRows;
  var canvasObjects = document.getElementsByClassName(className);
  for (i = 0; i < canvasObjects.length; i++){
    canvasObjects[i].setAttribute("style", canvasStyle);
  } 
}

const drawIcon = (className, row, column, pixelOn) => {
  var gridDivStyle = [];
  var iconNameCount = document.getElementsByClassName(className);
  for (i = 0; i < row; i++) {
    gridDivStyle.push([]); //initializes array rows
    for (j = 0; j < column; j++) {
      gridDivStyle[i][j] = "col-" + i + "-row-" + j;
      for (k=0; k < iconNameCount.length; k++){
        var gridDiv = document.createElement("div");
        var iconName = document.getElementsByClassName(className);

        gridDiv.className = gridDivStyle[i][j];
        iconName[k].appendChild(gridDiv);

        if (pixelOn[i][j]) { 

          var pixelOnClass = "col-" + i + "-row-" + j;
          var pixelOnObject = document.getElementsByClassName(pixelOnClass);
          var pixelOnStyle = "background-color:limegreen;"

          for (l = 0; l < pixelOnObject.length; l++){
            pixelOnObject[l].setAttribute("style", pixelOnStyle);
          }
        }
      } 
    }
  }
}

There's plenty to criticize about this code, but this is the benefit of hindsight. At that point I tried fixing the code for days on end, never feeling like I was getting anywhere near close to figuring out why my pixelated masterwork was eluding me. Unsurprisingly, I quit working on that project.

The prodigal son - Returning to my code

I continued my learning over the course of the next year, building your usual variety of beginner friendly projects, and the projects that got too ambitious were met with the same fate as my first project. My project graveyard was growing almost as big as my portfolio at this point.
I didn't see the problem in letting go of those projects that no longer brought me joy. However, not all abandoned projects were abandoned for that reason. I kept looking back at my first project and wondering if I could finally slay that beast, and conquer my first real failure, now armed with the wisdom and skills honed through the year.

I opened up my old pen in codepen, and glanced at the code, feeling like nothing could stop me. I had spent a whole year learning new things, so I had to be ready, right?

Spaghetti dinner anyone?

As I felt my confidence waning with every new line, I tried to keep my wits about me. I could spot a few issues with my previous code, and I could see clear places where things could be improved a lot. So I started writing code again, with no plan, and just winging it as I went along, fixing what I could.

When I was done this was the final result! Are you ready for it?

womp womp

What? Another failure! And this seemed related to my original bug. But I didn't understand what I was doing. I didn't understand the DOM very well, nor did I understood promises, so I used async/await instead (another example of my initial lack of understanding of Javascript's inner workings), and a litany of poor choices were sprinkled across my code. I had a hammer, and all my problems looked like nails to me.

You can see it for yourself what a year apart can do for a codebase:

async function main() {
  let icons = await loadIconsFromServer(
    "https://example.com/path/to/icons.json"
  );
  icons.map(icon => {
    let { name, pixelMap, iconHeight, iconWidth } = icon;
    drawCanvas(name, pixelMap, iconHeight, iconWidth);
  });
}

const loadIconsFromServer = async function(url) {
  return fetch(url)
    .then(res => res.text())
    .then(iconsArray => {
      return JSON.parse(iconsArray);
    });
};

const drawCanvas = (name, pixelMap, iconHeight, iconWidth) => {
  styleCanvas(name, iconHeight, iconWidth);
  drawIcon(name, iconHeight, iconWidth, pixelMap);
};

const styleCanvas = (className, canvasHeight, canvasWidth) => {
  let canvasStyleSizePosition = "height:20vh; width:20vh; margin:0 auto;";
  let canvasStyleDisplay = "display:grid;";
  let canvasStyleGridColumns =
    "grid-template-columns:repeat(" + canvasHeight + ", 1fr);";
  let canvasStyleGridRows =
    "grid-template-rows:repeat(" + canvasWidth + ", 1fr)";
  let canvasStyle =
    canvasStyleSizePosition +
    canvasStyleDisplay +
    canvasStyleGridColumns +
    canvasStyleGridRows;
  let canvasObjects = Array.from(document.querySelectorAll("." + className));
  canvasObjects.map(function(obj) {
    obj.setAttribute("style", canvasStyle);
  });
};

let drawIcon = (className, row, column, pixelOn) => {
  let gridDivStyle = [];
  let iconName = document.querySelectorAll("." + className);
  let iconNameCount = iconName.length;

  for (let i = 0; i < row; i++) {
    gridDivStyle.push([]); //initializes array rows
    for (let j = 0; j < column; j++) {
      gridDivStyle[i][j] = "col-" + i + "-row-" + j;
      for (let k = 0; k < iconNameCount; k++) {
        let gridDiv = document.createElement("div");
        gridDiv.className = gridDivStyle[i][j];
        iconName[k].appendChild(gridDiv);
        if (pixelOn[i][j]) {
          let pixelOnClass = "col-" + i + "-row-" + j;
          let pixelOnObject = document.querySelectorAll("." + pixelOnClass);
          let pixelOnStyle = "background-color:limegreen;";

          for (let l = 0; l < pixelOnObject.length; l++) {
            pixelOnObject[l].setAttribute("style", pixelOnStyle);
          }
        }
      }
    }
  }
};

main();

At this point I didn't know what else to do, so I followed a familiar pattern: I abandoned my project once again.

The Third Time - It's always the charm

It's been over two years since I originally dreamed up my pixel icon generator, and since then I've learned a lot, and even started working full time as a developer. By now I felt not only confident, but also I understood what my previous code was doing! This was a huge win, so armed with this newfound energy I decided to tackle my problem a third time. However, before I even started I decided to spend some time determining how my application should work, what were some of the behaviors I wanted it to present, and what were some of the sensible places I could separate the code apart.

When I was done this time a lot of things had changed under the hood. My pixel icon creator had changed, but that was because I had changed myself. As I grew in my coding skills, so did my code grow in maturity. I was more seasoned and could see the progress clearly.
More importantly, however, is the fact that the feeling of success over having finally conquered my own hydra chipped away at the impostor syndrome! I felt as if I was a capable developer, because I was able to finally fix a bug I tried my hands at for years.

I think it is easy to not see your own progression when the scale of the problems you're trying to solve grow with your skills. And this is the take-away I want to leave you with: Working on abandoned projects can help you see your own personal growth over the years.

Here is the result of my final code:

Pixels! Pixels everywhere!

And if you're curious about the actual final version of the code:

(async () => {
  const iconDivs: HTMLDivElement[] = Array.from(
    document.querySelectorAll("div[class^=sc-icon]")
  );
  iconDivs.forEach(async (icon: HTMLDivElement) => {
    const iconName: string = cssClassExtractor(icon);
    icon.replaceWith(await iconGenerator(iconName));
  });
})();

interface IIcon {
  name: string;
  pixelMap: number[];
  iconHeight: number;
  iconWidth: number;
  failedToFetch?: boolean;
  errorMessage?: string;
}

function cssClassExtractor(icon: HTMLDivElement): string {
  return icon.classList.value.split("-").pop();
}

async function loadIconsFromServer(url: RequestInfo): Promise<IIcon[]> {
  let request: Response, iconArray: IIcon[];
  try {
    request = await fetch(url);
    iconArray = await request.json();
  } catch ({ message }) {
    return [
      {
        name: "",
        pixelMap: [],
        iconHeight: 0,
        iconWidth: 0,
        failedToFetch: true,
        errorMessage: message
      }
    ];
  }
  return iconArray;
}

async function iconGenerator(iconName: string): Promise<HTMLDivElement> {
  const iconSheets: IIcon[] = await loadIconsFromServer(
    "https://example.com/path/to/icons.json"
  );
  const currentIcon: IIcon = iconSheets.filter(
    iconSheet => iconSheet.name.toUpperCase() === iconName.toUpperCase()
  )[0];
  let gridDivStyle = [];
  const icon: HTMLDivElement = document.createElement("div");
  icon.setAttribute(
    "style",
    `height:20vh;
    width:20vh;
    margin:0 auto;
    display:grid; 
    grid-template-columns:repeat(${currentIcon.iconHeight}, 1fr); 
    grid-template-rows:repeat(${currentIcon.iconWidth}, 1fr)`
  );

  for (let i = 0; i < currentIcon.iconHeight; i++) {
    gridDivStyle.push([]);
    for (let j = 0; j < currentIcon.iconWidth; j++) {
      gridDivStyle[i][j] = "col-" + i + "-row-" + j;
      let gridDiv = document.createElement("div");
      gridDiv.className = gridDivStyle[i][j];
      if (currentIcon.pixelMap[i][j]) {
        gridDiv.setAttribute("style", "background-color:limegreen;");
      }
      icon.append(gridDiv);
    }
  }
  return icon;
}

How to fix "Always open in " not working in Firefox Multi-Account Containers

Aimeri Baddouh — Fri, 04 Oct 2019 14:36:24 +0000

If, like me, you just decided to explore all the goodness that Mozilla has been developing for Firefox, you might have come across their Tab Container concept:

"Multi-Account Containers is a Firefox add-on that lets you separate your work, shopping or personal browsing without having to clear your history, log in and out, or use multiple browsers. It's an improved version of the Containers feature built into Firefox Nightly and the completed Firefox Containers Test Pilot experiment."

"Multi-Account Containers | Firefox Help"

This is a great feature if you want to keep your work tabs and personal tabs separate from each other, but manage them from the same window. Each container will remember its own sessions, will have its own local and session storage, and allow for certain domains to be marked to "Always open using ".

What was my surprise when I tried to mark DEV to always open using my Personal container only to find out that when I tried to open it in a new Default tab it would ignore my settings for the website!

After some digging I came across the solution on a Github post:
" Websites using ServiceWorkers can't be assigned #822"

They offer a quick workaround for this that involves essentially un-registering the service worker for DEV, and next time you try to open the website again it will open in its correct container.

This is a helpful workaround to know as with more and more PWAs around and create-react-app and other CLIs automatically generating serviceworkers for us, this bug will probably come up again and again until and if a fix is ever found.

Quickly generating a Dockerized Rails development environment

Aimeri Baddouh — Thu, 03 Oct 2019 19:36:54 +0000

The motivator for this small quality of life "hack" came from the frustration of managing all possible variables of creating a new Rails project. Every time I wanted to test a new tutorial or course, I had to worry about the already existing versions of Rails, Ruby, and npm packages.The obvious solution for my problem is to containerize my test applications.
This is just a quick script to help bootstrap this process by spinning up a temporary docker container, generating a new Rails application, and writing the Dockerfile and docker-compose.yaml files to the newly created application folder.
Append this function to the end of your ~/.zshrc or ~/.bashrc

generate_rails_project() {
    docker run -it --rm -v "$PWD":/"$1" -w /"$1" ruby:latest /bin/bash -c "curl\ 
-sL https://deb.nodesource.com/setup_12.x | bash && apt-get install -y nodejs &&\ 
npm i -g yarn && gem install rails && rails new $1 $2"
    echo "FROM ruby:latest
\n
\n
RUN mkdir /"$1"
WORKDIR /"$1"
\n
RUN apt-get update
RUN curl -sL https://deb.nodesource.com/setup_12.x | bash -
RUN apt-get install -y nodejs
RUN npm i -g yarn
RUN gem install bundler
\n
\n
COPY Gemfile /"$1"/Gemfile
COPY Gemfile.lock /"$1"/Gemfile.lock
RUN bundle install
COPY . /"$1"
" > "$1"/Dockerfile
    echo "version: '3.6'
services:
    $1:
        build:
            context: .
        volumes:
            - .:/"$1"
        ports:
            - '3000:3000'
        command: bash -c \"rm -f tmp/pids/server.pid && bundle exec rails s -p 3000\
-b '0.0.0.0'\"" > "$1"/docker-compose.yaml
}

You might want to alias this function to something that is quicker to use. I'll go with nrp for new rails project:

# I'm adding this at the very end of my ~/.zshrc, after the new function
alias nrp=generate_rails_project

to make changes available immediately, run:

source ~/.zshrc

or if you're not running the ZSH shell:

source ~/.bashrc

To use this new alias:

nrp my_project
cd my_project
docker-compose up --build

in a new tab you can start your IDE and issue commands to the docker container like so:

code .
docker-compose run my_project rails generate controller Welcome index

You can also start a new Rails API application as such:

nrp my_project --api

Things to note:

This script will use the latest version of Ruby and Rails available
You need docker and docker compose installed for this setup to work
This setup should work as is on most linux distros and on OSX, but for Windows 10 you will probably need to configure this in the WSL or git bash
This script should not be used for generating production applications. The intent of this script is to quickly bootstrap new projects for test environments.

Resume Critique

Aimeri Baddouh — Tue, 16 Apr 2019 14:24:29 +0000

I just saw a post by @ryanmdoyle requesting help with his resume, and I figured I could use some help as well. Some of the advice people gave was really solid, and I have already implemented some of it, but I believe I have a LOT of room for growth.

Please be as nitpicky as possible!

And PDF: https://drive.google.com/open?id=1pQY1SWWVmX9uY3v9BEM7gnv2myYxWkdr

PS: I've seen a lot of comments about pictures in resume. That will probably be the first edit for mine.

The Hero's Journey and the User Experience

Aimeri Baddouh — Fri, 12 Apr 2019 16:05:40 +0000

We've all been there: We click on a link, the website loads, and we are immediately lost in information. Text everywhere without any meaningful organization, pictures sprinkled here and there, and ads everywhere. Even worse, the website doesn't give us any of the information we are looking for!

Example of a website that showcases how bad the user experience can be. Credits to https://www.theworldsworstwebsiteever.com/

Why are so many websites and applications so hard to use and navigate? One of the many things that go into a good design is the story, or the user journey. A user knows when they come across a well designed site when they feel like they participate in the story the page is trying to tell.

Humans have an innate appreciation for good storytelling, and the study of what makes a good story involve multiple disciplines of study, going from narratology, to psychoanalysis and psychology. One way we could look at the user experience when utilizing a website is in terms of the Hero's Journey, popularized by Joseph Campbell in his book The Hero with a Thousand Faces.

Campbell outline seventeen stages in his book, dividing the world of the hero in two: The known world and the unknown world. The journey starts with the hero in their home town, or the known world, where everything is familiar to them, until they receive a call to action which takes them into the unknown world. Once on the other side of the journey the hero is changed, and even after they return home they are not the same anymore. They see the world in a new way.

In this interesting website you go from the comfort of your home to finding out all about access to clean water on a journey that takes you to even outer space. The journey ends back at home with you forever changed. Courtesy of https://www.everylastdrop.co.uk

How does the Hero's Journey relate to the user experience in developing a good website or application? Consider their journey through your website. Even how we describe parts of the website alludes to a larger narrative: We have page hero sections, call to action, and the ultimate goal is to convey information in order to change the user when they reach the end. If the user takes a passive stance while perusing the site interest will dwindle. This doesn't mean fancy animations and renaissance-style drawings on a website, but it does mean a clear journey from a place of comfort to the user through the unknown (the information being conveyed) all the way to the end of the journey where the user is changed by the new information.

Apple takes their consumer on an informative journey through all the new features of their new iPhone in a clean and direct way. Credit to https://www.apple.com/iphone-x/

So, next time you are designing any interaction with the user, consider the hero's journey, and take the user on a journey of their own!

Using Puppeteer to make animated GIFs of page scrolls

Aimeri Baddouh — Sat, 23 Mar 2019 00:55:09 +0000

In this how-to we will be using Puppeteer, a headless Google Chrome instance, to make animated GIFs of user interactions with websites.

Everylastdrop.co.uk is perfect to showcase scroll animations!

For the purposes of this tutorial we will only use scrolling, but with Puppeteer the possibilities are only limited to your imagination. Let's get started!
The first step is to make sure you have nodeJS installed. Open your terminal of choice and type:

node --version

Checking Node version

Any node version above 8 should work for this tutorial. If you don't have node installed yet, head over to https://nodejs.org/ and download the most recent version.
Let's go ahead and create our working directory. I'll call mine puppeteer-gif-caster but you can name yours anything you want.

mkdir puppeteer-gif-caster
cd puppeteer-gif-caster

We also need to initiate our NodeJS project. Let's take the quick approach and accept all the defaults provided to us by node:

npm init -y

Our package.json

The defaults for node use index.js as its entry point for this project, so let's go ahead and create that file as well!

touch index.js

Now we can open this file using our preferred code editor. I'll be using Microsoft's VS Code, but feel free to use your editor of choice.

code .

VS Code with our working folder opened

Next thing we need to do is to install our dependencies for this project. For this particular tutorial we will use the following npm packages:

puppeteer
gif-encoder (the library we are using to create a gif from the screenshots taken by puppeteer)
get-pixels (gif-encoder expects an array of pixels to buffer each of the frames. This library returns the pixel arrays of pngs, bmps, and jpegs)

Go ahead and install them by running:

npm install puppeteer gif-encoder get-pixels

This process will take a little while to complete. Once it's completed open your package.json and check that the dependencies are now listed under the appropriate section:

Our package.json with all dependencies installed

Ok, we are finally ready to start coding! Since this project is just meant as an example we will be coding our gif caster inside an IIFE (Immediately invoked function expression), meaning that all the code inside this function will be invoked when we run our file using node. The signature of an IIFE is:

(function())();

This would be equivalent of writing your code like this:

myFunction() {
    //code goes here
};

myFunction();

Let's start by declaring your constants and variables and instantiating our dependencies:

const puppeteer = require('puppeteer');
const GIFEncoder = require('gif-encoder');
const fs = require('fs'); /* we will need access to the file system. Fortunately
Node allows us to do that by using the file system library out of the box, hence
why we didn't need to install it with npm.*/
const getPixels = require('get-pixels');

const encoder = new GIFEncoder(width, height);
const workDir = './temp/'; /* we will create a temporary folder to work with
puppeteer's screenshots until we export the gif image. */
const file = require('fs').createWriteStream('mygif.gif'); /* we will need a 
stream to add the frames of the gift to, so let's go ahead and create a write
stream using the fs library. */

It's a good idea to check and make sure that our working directory exists first, and if not, we should create it:

if (!fs.existsSync(workDir)) {
  fs.mkdirSync(workDir);
};

We also need to configure our gif encoder with the parameters it will use when creating our gif. Let's go ahead and do that now:

encoder.setFrameRate(60);
encoder.pipe(file); /* we will pipe the encoded pictures into the stream we
created earlier */
encoder.setQuality(40); /* the quality ranges from 10 to 90 with 10 being the
highest */
encoder.setDelay(500);
encoder.writeHeader();
encoder.setRepeat(0); /* how many times the gif will loop. 0 is infinite loop. */

/* Let's go ahead and start puppeteer and have it ready for our screenshot request */
const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();

You can read more about the specific settings for each parameter by checking gif-encoder's github documentation: https://github.com/twolfson/gif-encoder

At this point we are almost ready to get started! We just need a few helper functions to help us handle adding each screenshot as a frame in our gif, and cleaning up the screenshot files after we've created our gifs. Let's do that now.

I will start with the addToGif() function since this is the more involved function. addToGif() takes two parameters: an array of pictures and a counter (since we will be recurring through this function until all the images in the array have been added to the gif). Let's declare that function:

function addToGif(images, counter = 0) {

};

Next we need to call getPixels() to extract the array of pixels from each screenshot we will create. getPixels() expects two parameters: a single image, and a callback function that handles the pixels extracted and any errors received in the process. Let's pass the images from our array to getPixels():

function addToGif(images, counter = 0) {
  getPixels(images[counter], function (err, pixels) {

  });
};

Two main things need to happen in the callback function: We need to add the pixels to the gif encoder, and we need to check whether we have added all the pictures in the array yet or not. Thanks to getPixels() adding the frame to our gif becomes as easy as just passing the pixel data to our encoder:

function addToGif(images, counter = 0) {
  getPixels(images[counter], function (err, pixels) {
    encoder.addFrame(pixels.data);
    encoder.read();
  });
};

Now we need to check whether or not our counter has the same size of the number of items in our images array (-1 since arrays start at 0), and if so we need to tell the encoder we are done, otherwise we need to increase the counter and call the addToGif() function again:

function addToGif(images, counter = 0) {
  getPixels(images[counter], function (err, pixels) {
    encoder.addFrame(pixels.data);
    encoder.read();
    if (counter === images.length - 1) {
      encoder.finish();
    }
    else {
      addToGif(images, ++counter);
    }
  });
};

This function is almost ready. But wait! What are we going to do with all of the leftover screenshots? We can't just leave them everywhere! Let's go ahead and create a cleanUp() helper function and implement it inside our addToGif(). cleanUp() will take an array of files and a callback function, and for each file in the array it will delete the file. When no files are left in the array the callback will run and we will program it to delete the working directory, log our progress in the console, and exit the node process:

function cleanUp(listOfPNGs, callback) {
  let i = listOfPNGs.length;
  listOfPNGs.forEach(function (filepath) {
    fs.unlink(filepath, function (err) {
      i--;
      if (err) {
        callback(err);
        return;
      } else if (i <= 0) {
        callback(null);
      }
    });
  });
};

Let's implement cleanUp() in our addToGif() function and handle the cleanUp() callback:

function addToGif(images, counter = 0) {
  getPixels(images[counter], function (err, pixels) {

    encoder.addFrame(pixels.data);
    encoder.read();
    if (counter === images.length - 1) {
      encoder.finish();
      cleanUp(images, function (err) {
        if (err) {
          console.log(err);
        } else {
          fs.rmdirSync(workDir);
          console.log('Gif created!');
          process.exit(0);
        }
      });

    } else {
      addToGif(images, ++counter);
    }
  });
};

The last helper function we need will handle the scrolling of the page in puppeteer. The idea is simple. We just need a function that tells puppeteer to scroll the page by a certain amount before we take the next screenshot. We can send javascript code that puppeteer will execute on the headless browser for us by calling page.evaluate() and passing a function we want executed on the browser. Something like this should suit our needs perfectly:

async function scrollPage() {
  await page.evaluate(async () => {
    window.scrollBy(0, 100);
  });
}

Phew! That was a lot of preparation, but we are now ready to start our AmazingGIFMaker™! Let's start by defining the size of our viewport and telling puppeteer to browse to the page we are trying to capture:

await page.setViewport({ width: 800, height: 600 });
await page.goto('https://en.wikipedia.org/wiki/JavaScript'); /* We are using
wikipedia's entry for JavaScript for this example, but feel free to try any other website. 
Everylastdrop.co.uk is a good one to play with the window.scrollBy method from above! */

We can take as many screenshots as we need to make sure the gif gives the illusion of scrolling. I've settled on 60 as being a good number but feel free to play around with this number. Just remember that the more screenshots you have, the larger your gif size will be. Let's create a for loop that will loop 60 times, and it will take a screenshot, scroll the page, and repeat:

for (let i = 0; i < 60; i++) {
  await page.screenshot({ path: workDir + i + ".png" });
  await scrollPage();
}

Then we can just close puppeteer. We have all the screenshots we need at this point and can just use our helper functions from this point on:

await browser.close();

We have a folder containing 60 PNG images, so now we need to add those to an array, and pass that array to our addToGif() function. To create the list of PNGs let's read our working directory, remove the extension, sort the file names by ascending order, and add the full path and extension back to each item of the array:

let listOfPNGs = fs.readdirSync(workDir)
  .map(a => a.substr(0, a.length - 4) + '')
  .sort(function (a, b) { return a - b })
  .map(a => workDir + a.substr(0, a.length) + '.png');

We can finally call our addToGif() function passing the array of screenshots and wait for our gif to be generated!

Here's how the full code looks like. Take the code for a spin and have fun creating animated gifs of any pages you choose!

(async () => {
  const puppeteer = require('puppeteer');
  const GIFEncoder = require('gif-encoder');
  const encoder = new GIFEncoder(800, 600);
  const fs = require('fs');
  const getPixels = require('get-pixels');
  const workDir = './temp/';
  let file = require('fs').createWriteStream('mygif.gif');
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  if (!fs.existsSync(workDir)) {
    fs.mkdirSync(workDir);
  };

  // Setup gif encoder parameters
  encoder.setFrameRate(60);
  encoder.pipe(file);
  encoder.setQuality(40);
  encoder.setDelay(500);
  encoder.writeHeader();
  encoder.setRepeat(0);

  // Helper functions declaration
  function addToGif(images, counter = 0) {
    getPixels(images[counter], function (err, pixels) {

      encoder.addFrame(pixels.data);
      encoder.read();
      if (counter === images.length - 1) {
        encoder.finish();
        cleanUp(images, function (err) {
          if (err) {
            console.log(err);
          } else {
            fs.rmdirSync(workDir);
            console.log('Gif created!');
            process.exit(0);
          }
        });

      } else {
        addToGif(images, ++counter);
      }
    });
  };

  function cleanUp(listOfPNGs, callback) {
    let i = listOfPNGs.length;
    listOfPNGs.forEach(function (filepath) {
      fs.unlink(filepath, function (err) {
        i--;
        if (err) {
          callback(err);
          return;
        } else if (i <= 0) {
          callback(null);
        }
      });
    });
  };

  async function scrollPage() {
    await page.evaluate(async () => {
      window.scrollBy(0, 100);
    });
  }

  await page.setViewport({ width: 800, height: 600 });
  await page.goto('https://en.wikipedia.org/wiki/JavaScript');

  for (let i = 0; i < 60; i++) {
    await page.screenshot({ path: workDir + i + ".png" });
    await scrollPage();
  }

  await browser.close();

  let listOfPNGs = fs.readdirSync(workDir)
    .map(a => a.substr(0, a.length - 4) + '')
    .sort(function (a, b) { return a - b })
    .map(a => workDir + a.substr(0, a.length) + '.png');

  addToGif(listOfPNGs);
})();

Our animated screenshot in action