I had no idea what would happen to me that day. It was my last day working for a client in Berlin. I came to the office to work and have a small goodbye party on the sunny terrace. This was the first time in the psychical office, before that I have, like almost everybody else, been working from home.

I had bought my laptop just a year before. It was the most expensive Macbook Pro 16" with 8 Intel CPU cores and it costed 3600 €. It was quite an investment. It was driven by the theoretical argument that if I save just 10 min a day it would, given my high salary, it would pay itself off. With an hourly rate of 100 €, 10 min is 16€ a day. That is 80 € a week and 320 € a month. Utilizing this argument, I am sure many would be forced to upgrade to the newest Macbooks with M1 cores. And likely again with the arrival of the improved M2 cores.

Sublime Editor is build for writing and reading code. However the urge to write down your thoughts on different matters might come and for this Sublime Editor offers excellent support. Both out of the box and with a few useful packages.

Opposite to coding, where concise code blocks and programing logic becomes more readable through highlighting and linting tools, writing is easier with fewer colors, larger text and line height.

Redux is a popular library used to manage global application state, at least the claim. Lots of developers struggle to understand what Redux does and how to use it properly. When saying global state most developers would intrinsically imagine a simple library lifting up individual states into a shared global object. This isn’t Redux. Although Redux is a small library (2kB, including dependencies), the documentation and the complimentary libraries required makes it comprehensive. For experienced and inaugurated developers redux.js.org it’s a well-written and detailed guide that covers every aspect of Redux, for others it’s opaque and overly complex. An complexity that is also increasing present in React and which the upcoming Svelte framework highlights.

It’s that time again where I have to prepare for job interviews. Since companies aren’t looking quirky originals, you need to learn what to say to look attractive. And have some answers to the common questions.

#### How do you approach complex problems?

There isn’t one approach since complex problems are different. Here are some common ones:

• structural/architectural problems as the application matures should be handled together with the team, since everyone has a stake in the app and should be heard. These problems arrives gradual and shouldn’t be handled with rash abstractions, but rather initial observance so that there is enough foundation to assess the problem on. Thus the problem will likely be fairly well known to team members before a meeting. Give some thoughts on possible solutions before, call a meeting and listen to input and solutions from team members.

Originally the plan was to get familiar with Next.js and Prisma by making a simple boilerplate for it. Turns out a few commands is all it takes to generate a basic working app. Let’s get started and add Next.js:

npx create-next-app my-app

To add Typescript run touch tsconfig.json && yarn dev and Next.js will generate the needed files and install packages. Then add Prisma:

yarn add -D @prisma/cli
yarn prisma init

Prisma created a .env file with the database connection url. dotenvenc npm package can be used to generate an encrypted .env.enc file containing the production variables. Locally .env can be filled by hand (Primsa requires a .env file and doesn’t support having separate for .env.production and .env.staging).

Hiding or showing a element with React is as simple as an if statement deciding whether to print it or not. However often you want to be able to animate the transition, so that it smoothly closes or opens. To avoid cluttering the various components with this animation logic, extract the logic into a hook:

/**
 * Returns the variables needed to animate a open and close functionality via height
 * @param  {Boolean} isOpen:   boolean is the element initially open
 * @param  {Number}  duration: number duration in ms
 */
function useHeightAnimation(isOpen = false, duration = 350) {
  const contentRef = React.useRef(); // Inner wrapper that keeps the height if the outer animated is closed
  const [height, setHeight] = React.useState(isOpen ? 'auto' : 0);

  const handleClick = () => {
    const contentRect = contentRef.current.getBoundingClientRect();

    // Set the height so the element has an initial height to transition from
    setHeight(`${contentRect.height}px`);

    // Set the new desired height, either 0px or full height from the innerRef
    setTimeout(() => setHeight(height === 0 ? `${contentRect.height}px` : 0));

    setTimeout(
      () => {
        if (height === 0) {
          // Set the height to "auto" to prevent issues with resizing when fully opened
          setHeight('auto');
        }
      },
      duration,
      height,
    );
  };

  return { height, handleClick, contentRef };
}

The hook can be used like:

Features that allow the user to fire multiple requests quickly and where only the latest request is relevant, should build in an abort controller. A typical example of this is a search filter allowing the user to quickly select and deselect filters. With each clicked filter the application will fire another request to server and update the search results. As requests for previously selected filters are irrelevant, it makes no sense for the browser trying to resolve them all. On the contrary it can slow down the application considerably, especially if the requests payload is large and/or the Internet connection slow. Not to mention to avoid racing conditions.

Although it is clearly not in fashion at the moment, deploying websites on a VPS (virtual private server) or regular server for that matter, without any containerization and orchestration is both fast and easy. I have been running my private VPS (with Ubuntu 16.06) for years without much sweat. Using the command line to install and configure a server is both easy and powerful once you know the basic. No need to bother with a fancy UI layer or the limitions it often imposes.