DEV Community: Bartosz Gordon

Configure nginx for Gatsby 404 error page

Bartosz Gordon — Tue, 08 Jun 2021 21:05:05 +0000

During Gatsby page development, when you hit a page that doesn't exist, you encounter a screen similar to the one below.

If you created a custom 404 page, for example in src/pages/404.js, you can click the Preview custom 404 page to display it. Entering the /404 route will do the job as well.

In production, however, the 404 page doesn't get handled by itself unless you use a dedicated hosting service for Gatsby pages. That's because Gatsby's development server is no longer present. The production bundle is just a bunch of static files. Making use of a web server (like nginx) to serve the production page forces you to configure the error pages yourself.

Disclaimer: the following nginx configuration is pretty basic, don't use it in production.

Let's assume your blog is hosted on the personalblog.com domain and is served from the /var/www/blog directory on port 80.

server {
        listen 80;
        root /var/www/blog;
        server_name personalblog.com www.personalblog.com;
        location / {
                try_files $uri $uri/ =404;
        }
}

After entering a route that doesn't exist in your production Gatsby site, nginx displays its default 404 error page.

Adding the error_page 404 /404; line makes nginx redirect to the /404 route in case of a 404 error. Your custom Gatsby 404 page will be displayed.

server {
        listen 80;
        root /var/www/blog;
        server_name personalblog.com www.personalblog.com;
        error_page 404 /404;
        location / {
                try_files $uri $uri/ =404;
        }
}

Visit the error_page docs section to explore the rest of the configuration options.

One-liner to sum up numbers from a CSV file

Bartosz Gordon — Mon, 07 Jun 2021 20:18:03 +0000

This is the shopping.csv CSV file that we will be working with throughout this blog post.

item,price
rice,2.49
potatos,1.49
pasta,3.79

The goal is to create a one-line bash script that prints the sum of the prices in the file above, which is 7.77.

Step: 1. Print the file content

$ cat shopping.csv

This command prints the file content without modifications.
It gives us a way to redirect - pipe - the output to another command in the next step.

Output:

item,price
rice,2.49
potatos,1.49
pasta,3.79

Step: 2. Cut the first line

There are many ways to achieve it, but we use the tail +n syntax.

In our case, it takes all the lines until the end of the file, starting from the second line.

$ cat shopping.csv | tail +2

Output:

rice,2.49
potatos,1.49
pasta,3.79

Step: 3. Cut the first column

awk splits each line by a separator defined by the option -F.
In our case, it's the comma.
Then it prints the second column from every row.

$ cat shopping.csv | tail +2 | awk -F , '{print $2}'

Output:

2.49
1.49
3.79

Step: 4. Concatenate the prices

xargs is used to "squash" the lines into a single string, separating them by space.

$ cat shopping.csv | tail +2 | awk -F , '{print $2}' | xargs

Output:

2.49 1.49 3.79

Step: 5. Replace spaces with pluses

The sed expression replaces the escaped space with + in the entire string (globally - g).

$ cat shopping.csv | tail +2 | awk -F , '{print $2}' | xargs | sed -e 's/\ /+/g'

Output:

2.49+1.49+3.79

Step: 6. Perform the calculation

bc is a simple calculator that you can use interactively or by piping an equation into it.

$ cat shopping.csv | tail +2 | awk -F , '{print $2}' | xargs | sed -e 's/\ /+/g' | bc

Output:

7.77

Multiple Postgres databases in a single Docker container

Bartosz Gordon — Thu, 07 Nov 2019 22:42:35 +0000

This will be a short one.

The official Postgres Docker image supports a few environment variables. One of them, POSTGRES_DB, is responsible for holding a database name. However, if you want your container to include more than one database (e.g app and app_test), you have to reach for different solutions.

One of them is to create a bash script that sets up multiple databases by psql command. Postgres will execute it on database startup inside the container. An example of such script, create-multiple-postgresql-databases.sh, can be found here. Credits to mrts at Github.

You can place it in whatever project directory you want, although pg-init-scripts/ might be a good starting point. Then, to make the script visible and executable by Postgres, it has to be mounted to the /docker-entrypoint-initdb.d container directory.

To mount a host directory to a container directory, we have to use volumes.

Syntax: <host directory>:<container directory>.

WARNING: You cannot mount a single file to a directory, it works just for directories.

Final docker-compose.yml:

version: "3.7"
services:
  db:
    container_name: "app_db"
    image: "postgres:11.5-alpine"
    volumes:
      - ./pg-init-scripts:/docker-entrypoint-initdb.d
    environment:
      - POSTGRES_USER=${DB_USER}
      - POSTGRES_PASSWORD=${DB_PASSWORD}
      - POSTGRES_MULTIPLE_DATABASES=app,app_test

The ${DB_USER} syntax means that the DB_USER value is read from automatically loaded .env file placed inside the same directory as docker-compose.yml.

Corresponding .env:

DB_USER=someuser
DB_PASSWORD=somepassword

Remember, you shouldn't commit .env files! Create and commit .env-example file with empty secret values instead.

If you want to use a different path (e.g .env-docker), define env_file in docker-compose.yml:

env_file:
  - ./.env-docker

Now, with every piece in place, run docker-compose up to start the service.

Happy coding!

How to figure out a name for your next project?

Bartosz Gordon — Sun, 27 Oct 2019 12:46:46 +0000

I have a confession to make. I'm unable to work on a project unless it has a name. So the ability to verbalize an idea is a crucial part of my side projects. It also makes it easier to manage them in productivity tools of all kinds.

In the beginning, I have to speak of something. There's no definitive guide for finding names, and what works for me, doesn't have to work for you. Still, techniques I describe below are rather universal and applying them will increase your chances.

Straight to the point, I am going to explain my thought process by example.

How to figure out a name for your next project?

Let's say we want to find a name for a new shiny habit tracking app.

Setup

It's important to design your environment in a way that it's least likely to distract you. Switch off your phone, don't look at Twitter, and tidy up your desk. Grab something to write on and something to write with. I prefer physical notebooks, but do whatever suits you.

It may be a good idea to set up a timer for, say, 10-20 minutes.
This will be your creative freedom time!

Have a few deep breaths.

Ready, steady, go! The clock is ticking.

Keywords

The first thing I do is writing a list of keywords describing the idea.
Usually, less than ten of them are enough.

For example:
— habit
— tracking
— measurement
— progress
— beating procrastination
— atomic
— automation

Associations

The next step is to create a list of whatever associations you may have for every keyword you listed.

For example:
— habit (action, cycle, loop)
— tracking (follower, chart, line)
— measurement (ruler, meter, mile)
— progress (growth, steady, bar, chain)
— beating procrastination (boxer, kick, bite, beat)
— atomic (proton, neutron, small, tiny, electron)
— automation (machine, computer, bot, robot, terminator)

At this point, you have already established a solid base to produce lots of different names. The next step is to jot down every possible idea that comes to your mind. The important thing is not to judge any of them, not now. You can use the techniques I've listed below.

Techniques

— combine words
— skip some letters
— change order of letters
— double some letters
— think about emotions or feelings connected to some keyword/association
— think about other languages (French, Latin, German, you name it)
— think abstractly, have more associations
— look through your window
— look at your surroundings

To give you a sense of what can be an output of following them: habitline, habeat, smallbites, hauto, measurebot, habitto, habitree, neutrica, habiterminator (ok, this one is terrible :D).

As soon as your timer plays the final sound, put off your pen, close your notebook or your note-taking app. Let your brain cool down after this crazy run. Don't look at the list for at least an hour. Let your relaxed thinking come in to play.

Review

The final step is to review your ideas. You can judge them now.
Underline the good ones, strike through the bad ones. If you have found your Holy Grail, the job had been already done! If you haven't, you can reiterate on the good ones, or repeat the process.

Thinking outside the box

As you can imagine, not every app/company figured out their name using a technique like this. Sometimes, it doesn't have to be descriptive at all. Think about names like “Apple” for a tech company or “Amazon” for an e-commerce marketplace company. That's another route to take. There's no silver bullet.

We can increase our creativity through exercise, like any other muscle.
It's worth training, so go to the “gym” and enjoy your creative time.

PS. Buy domain names as soon as possible ;)

Happy brainstorming!

Let's write a useImageZoom React hook

Bartosz Gordon — Sat, 29 Jun 2019 08:40:28 +0000

In this article, I am going to present a basic React hook responsible for handling image "zoom" functionality.

What we are going to build

The goal is to create a useImageZoom hook that provides three handlers:

zoom in
zoom out
reset zoom

Bearing that in mind, we can already plan the API that hook may expose.

const [zoomStyles, handlers] = useImageZoom();

Following prevailing convention, it returns a two-element array.

A first element is a style object applied to an image, and the second element contains the aforementioned handlers.

Hook implementation

// App.jsx

import React from "react":

function useImageZoom(maxZoomLevel = 5) {
  const minZoomLevel = 1;

  const [zoomLevel, setZoomLevel] = React.useState(minZoomLevel);

  function zoomIn() {
    setZoomLevel(zoomLevel =>
      zoomLevel < maxZoomLevel ? zoomLevel + 1 : zoomLevel
    );
  }

  function zoomOut() {
    setZoomLevel(zoomLevel =>
      zoomLevel > minZoomLevel ? zoomLevel - 1 : minZoomLevel
    );
  }

  function resetZoom() {
    setZoomLevel(minZoomLevel);
  }

  const zoomStyles = {
    transform: `scale(${zoomLevel})`,
  };

  const handlers = {
    zoomIn,
    zoomOut,
    resetZoom
  }

  return [zoomStyles, handlers];
}

A few words about the implementation.

If we want CSS to handle the image scaling, we need to use transform property and passscale(x) as a value. By default, x equals 1, so we assign 1 to the minZoomLevel variable.

maxZoomLevel is the only parameter that hook accepts, defaults to 5.

In zoomIn and zoomOut functions we respectively increase and decrease the zoom level, but keeping it in maxZoomLevel and minZoomLevel boundary.

resetZoom simply sets the minZoomLevel value.

Usage

// App.jsx

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

// function useImageZoom(maxZoomLevel = 5) {
//   ...
// }

function App() {
  const [zoomStyles, handlers] = useImageZoom();

  return (
    <div className="app">
      <div className="buttons">
        <button onClick={handlers.zoomIn}>Zoom in</button>
        <button onClick={handlers.zoomOut}>Zoom out</button>
      </div>
      <div className="preview">
        <img
          style={{ ...zoomStyles }}
          onClick={handlers.resetZoom}
          src="https://placeimg.com/150/150/arch"
          alt="preview box"
        />
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

/* styles.css */

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: sans-serif;
  text-align: center;
}

.buttons {
  margin-top: 50px;
}

.preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  width: 300px;
  margin-top: 50px;
  background: #eee;
  overflow: auto;
  position: relative;
}

Let's see it in action.

As you may have noticed, we have a problem. Both sides of the image get incrementally cropped as we zoom in.

Improvements

The issue is that transform-origin's initial value equals "50% 50%", which is equivalent to the center of a given image. To get a sense of what this property does, please refer to this page.

To apply the solution, change zoomStyles object to the following:

const zoomStyles = {
  transform: `scale(${zoomLevel})`,
  transformOrigin: "top left"
};

Let's see what happens.

Ok, the image does not get cropped, but there is another problem. Have you noticed that there is a blank space on the left and at the top part of the preview box? We can force the image to fill the whole available space but still preserving the initial centered position.

We can do it by positioning the image absolutely in the top left corner of the preview box but only if zoom level greater than 1 is applied.

Change zoomStyles object to the following:

const zoomStyles = {
  transform: `scale(${zoomLevel})`,
  transformOrigin: "top left",
  position: zoomLevel > 1 ? "absolute" : undefined,
  top: zoomLevel > 1 ? 0 : undefined,
  left: zoomLevel > 1 ? 0 : undefined
};

Voilà, it works!

The final version is available on codesandbox.

In the next article, we are going to make useImageZoom hook more flexible and easier to use. Stay tuned!

Simplify repetitive Jest test cases with test.each

Bartosz Gordon — Mon, 06 May 2019 20:02:47 +0000

Problem

From time to time, I run into a situation, where most of my test cases follow a similar sequence of steps. This scenario most often happens while unit testing helpers/utility functions. Given certain arguments, check if the actual result is equal to the expected result. Over and over again. As the number of cases grows, the test suite can get bloated.

Contrived example ahead:

const add = (a, b) => a + b;

describe("'add' utility", () => {
  it("given 2 and 2 as arguments, returns 4", () => {
    const result = add(2, 2);
    expect(result).toEqual(4);
  });
  it("given -2 and -2 as arguments, returns -4", () => {
    const result = add(-2, -2);
    expect(result).toEqual(-4);
  });
  it("given 2 and -2 as arguments, returns 0", () => {
    const result = add(2, -2);
    expect(result).toEqual(0);
  });
});

Solution

I thought about an abstraction to avoid this kind of boilerplate, and after a few google searches, I found the test.each Jest utility.

This helper encourages you to create the array of cases, where you store arguments and expected results, and then iterate through the entire array to run the tested function and assert the results.

Example with test.each:

const add = (a, b) => a + b;

const cases = [[2, 2, 4], [-2, -2, -4], [2, -2, 0]];

describe("'add' utility", () => {
  test.each(cases)(
    "given %p and %p as arguments, returns %p",
    (firstArg, secondArg, expectedResult) => {
      const result = add(firstArg, secondArg);
      expect(result).toEqual(expectedResult);
    }
  );
});

Notes

Benefits:

easier to add new tests cases
less boilerplate

Possible drawback:

more abstractions, some people may find it unnecessary

I find it worthwhile to write a comment about the items of the cases array to increase readability and reduce mental effort.

  // first argument, second argument, expected result
  const cases = [[2, 2, 4], [-2, -2, -4], [2, -2, 0]];

How do I identify my knowledge gaps and learn?

Bartosz Gordon — Sat, 26 Jan 2019 08:24:29 +0000

In this article, I'm going to present you my workflow for gathering topics and a way to efficiently learn them.

No one knows everything, that's certain. Every day, I find myself not knowing something, be it a syntax, concept or a pattern. Some missing answers are one google (or duckduckgo) search away, so it would probably be a waste of memory and effort to learn by heart anything I'm able to find under one minute.
But what about concepts? Yeah, most of them are impossible to be "found" in a very short time and require a significant amount of learning effort.

Disclaimer: it's a documentation of my processes — they work for me, but not necessarily must suit you.

Identifying knowledge gaps.

If I want to become better in some field, I need to know what I don't know. I answered the following questions and tried not to be overly specific. It's still early stage of the entire process, and I wanted to see a big picture only.

What new technology/concept would be certainly profitable in my day to day job in the next 3-6 months?
What field do I want to deepen my knowledge in?
What piece of technology/concept excites me and makes me want to try it?

After writing the answers down, I gave myself a couple of days to digest it and to remove some unnecessary/outdated points. After tidying up, I progressed to the next point.

Refinement

At first, my list looked like this:

1. What new technology/concept would be certainly profitable in my day to day job in the next 3-6 months?

* TypeScript
* Docker
* Observables
* state charts/finite automata

2. What field do I want to **deepen** my knowledge in?

* maintainable CSS and accessibility
* new React patterns (hooks, Suspense)
- better testing (JS/React)
* Git
* more of an advanced vanilla JS and functional concepts/patterns
* Bash scripting
* Vim/Tmux workflow
* UNIX command line programs (sed, grep, awk, etc.)
* RegExps
* Vue
* Nginx

3. What piece of technology/concept **excites** me and makes me want to try it?

* GraphQL
* Rust/Go/Elixir
* basic machine learning algorithms
* designing and prototyping with Figma
* D3.js

The next thing I did was prioritization. I sorted each of the three lists by the importance of a topic.

When I start learning about a new thing, there is so much going on in my head. I wanted to find a technique to help me feel less overwhelmed and to be able to tackle a few smaller problems instead of one big one.

What is probably obvious, a point sounding like "Docker" at first doesn't seem approachable, but a question "How to set up a Docker container for a Node.js app printing "Hello world" to the console?" seems like a good starting point.

To track my journey, I created a git repository and the README file became my "Roadmap for 2019". I extracted every point from the list to a separate section, so I can add questions to each of them.

That's the important part: as fast as I identify a question, I add it to the list under the matching section to keep it up to date.

An example of how a basic section could look like:

# TypeScript (0/5)

* How to set up React app with TypeScript?
* How to add types for primitive values like string/number/boolean to a single variable?
* How to type objects?
* How to type functions? What about optional and default parameters?
* What's the difference between type/interface?
* How to type React classes and function components?
* What is a type inference?
* What are generic types and how to use them?

and so on...

I tried to get out of my head as many points as possible. It was very freshening to see those questions in one place. I realized that after I answer them, I can be kind of fluent in TypeScript. Awesome!

I refine my Roadmap (almost) every day, it includes rephrasing and breaking down the questions to make them more approachable and specific.

Learning

It gives me the most value when I apply the knowledge to some real-life project or create some sort of snippet with it (a way of avoiding "dry" learning).

In order to retain my Q&As, I create a separate markdown file for each section from the Roadmap. Every time I learn something, I write it to the corresponding file. It gives me easy access every time later. Keep it practical.

An example of the answer looks like the following one.

**What is a difference between arguments and parameters?**

Parameters are variables in funcion definition.

function add(x, y) { // x and y are parameters
  return x + y;
}

Arguments are variables passed down to a function in place of parameters.

add(2, 3); // arguments

I schedule one major item from the Roadmap for each day. It's great if I manage to learn more than that, but the world is not perfect and neither am I. That's definitely enough, still making progress anyways. Imagine learning 365 concepts/techniques in one year, apart from the job or university!

It's important to make it clear when and where I'm going to spend my time studying. Make it as easy as possible to establish this routine as your habit. The last thing before closing my laptop in the evening is turning on a text editor and a browser. Then in the morning after I wake up and have my morning routine, I sit at the desk and learn for at least 20 minutes.

After 2-3 weeks, I'm able to set up a Docker container for Node.js & MongoDB projects, I can type intermediate React/Redux & Redux/Hooks apps, and got better at my Vim/Tmux workflow (it includes in bash scripting).
I was also able to clearly (it was the feedback I got) explain some non-trivial git and HTML&CSS concepts to a beginner (and learnt more of an accessibility myself). All of this apart from the things I learnt in my day to day job.

Small pieces compound.

Regarding the topic of habits, I recommend the "Atomic Habits" book by James Clear, it helped me a ton in coming up with my workflow.

BONUS: you can try to create ANKI card decks for remembering concepts that you learn. You can learn more about spaced repetition here.

Going (almost) mouseless: browsers

Bartosz Gordon — Sat, 19 Jan 2019 09:47:00 +0000

In this post, I'm going to use the Firefox browser's shortcuts as an example. Most of them should work in other — webkit based — browsers too. Prefix for given shortcut may differ based on the operating system.

Originally posted on Medium.

Why even bother?

The reason I'm writing this article is that I see a field for improvement when it comes to performance during "standard" — mostly mouse-based — navigation.

Of course, not every piece of software has shortcuts, and that's absolutely fine. I imagine using e.g a graphic design app without mouse could be problematic and inefficient. But most of the time, given program shares a handful of them.

The good example may be your browser.

In this article, you're going to learn just enough of shortcuts to perform most frequent tasks like tabs and windows management or powerful text editing. They're grouped into 4 lessons, so you can approach them incrementally.

After you give your navigation control over to the keyboard, you will (probably) never look back.
Being able to do the aforementioned things without:

moving your hands off the keyboard to the mouse
placing the cursor
getting your hands back on the keyboard improved my workflow and speed tremendously. This approach shines the most when you're performing many of operations in the row. Saved seconds add up!

Process of learning

The way I approach learning a new set of shortcuts:

write down a few of the shortcuts you want to learn
put them in a visible place — a wallpaper/note/post-it card near your desk
practice until you get comfortable with them.

Then repeat the entire process starting from the first point. After some time, your muscle memory will make it a no-brainer for you.

Tab management

LEVEL 1

Open a new tab — Ctrl + T
Close current tab — Ctrl + W
Restore last closed tab — Ctrl + Shift + T
Open a new window — Ctrl + N
Reload a page — Ctrl + R

These five commands should already improve your tab management speed. As a bonus point, you can refresh a current tab, and restore the previously closed tab, nerves saved!

LEVEL 2

Go to the n-th tab — Alt + N (works for 1st-8th tab)
Go to the last tab — Alt + 9
Move current tab to the left — Ctrl + Shift + PgUp
Move current tab to the right right — Ctrl + Shift + PgDn
Focus address line — Ctrl + L

With this five shortcuts, you will be able to focus given tab and move around the tabs themselves. As a bonus point, accessing the address line has been made easier.

LEVEL 3

Go to the next focusable element on page — Tab
Go to the previous focusable element on page — Shift + Tab
Go back to the previous page — Ctrl + [
Go forward to the next page — Ctrl + ]
Open a new private window — Ctrl + Shift + P

By this level, you'll be able to jump between links, inputs, and other interactive elements on the page. Also, you can navigate back and forth in the current tab browsing history. Wanna open a new private window? You've got it.

LEVEL 4

Go to the next word — Ctrl + Arrow Right (when editing text)
Go to the previous word — Ctrl + Arrow Left
Go to the last word — Ctrl + A + Arrow Right
Go to the first word — Ctrl + A + Arrow Left
Open history — Ctrl + H

This set of shortcuts will make you more proficient during text navigation.

BONUS: In case you're familiar with VI/VIM, I recommend using an extension that emulates its keybindings. You'll probably find a decent one for your browser. Although usually it's not a one to one mapping.