
### Narrow down string consts

```typescript
// I normally used the following declaration and let typescript interfere myString: string[]
const myString = ['apple', 'banana', 'orange']

// But if you go with this instead
const myString = ['apple', 'banana', 'orange'] as const
// Tyescript now types myString as readonly ['apple', 'banana', 'orange']

// If you now want to use this
const myFunction = (arg: typeof myString[number]) = {}
```

### Typeguard 

```typescript

interface MyType {
  foo: number
}

const isMyType = (arg: any): arg is MyType => {
  return arg.foo !== undefined
}

/**
 * Sample usage of the User Defined Type Guard
 */
function doStuff(arg: Foo | Bar) {
    if (isMyType(arg)) {
        console.log(arg.foo); // OK
        console.log(arg.bar); // Error!
    }
    else {
        console.log(arg.foo); // Error!
        console.log(arg.bar); // OK
    }
}
```

Let's start by loading all images within a folder:

```javascript
const imagesDirectory = path.join(
  process.cwd(),
  `public/products/${product.id}`
)

// Wrap the readdir in a try-catch block, otherwise the build will fail because of a unhandled exception.
try {
  const productImagePaths = await fs.readdir(imagesDirectory)

  return {
    props: {
      images: productImagePaths.map((path, index) => ({
        path: `/products/${product.id}/${path}`,
      })),
    },
  }
} catch (error) {
  console.warn(
    `Image ${product.name} has no images under /public/product/[id]!`
  )
  return {
    props: {
      images: [],
  }
}
```

### Part Two: Generate a BlueDataURL

The Nextjs Image Component provides a prop called `blurDataURL` to show a very blurry version of the image while the actual image is loading. To generate this URL I use [Plaiceholder](https://plaiceholder.co/):

```javascript
const imagesDirectory = path.join(
  process.cwd(),
  `public/products/${product.id}`
)

// Wrap the readdir in a try-catch block, otherwise the build will fail because of a unhandled exception.
try {
  const productImagePaths = await fs.readdir(imagesDirectory)

  /**
   * Create blurDataURLs (base64) as image placeholders
   */

  const blurDataURLs = await Promise.all(
    productImagePaths.map(async src => {
      const { base64 } = await getPlaiceholder(`/products/${product.id}/${src}`)
      return base64
    })
  ).then(values => values)

  return {
    props: {
      images: productImagePaths.map((path, index) => ({
        path: `/products/${product.id}/${path}`,
        blurDataURL: blurDataURLs[index],
      })),
    },
  }
} catch (error) {
  console.warn(
    `Image ${product.name} has no images under /public/product/[id]!`
  )
  return {
    props: {
      images: [],
    },
  }
}
```

### Part Three: Make it look sexy

Now it's time to use the image source and blurDataURL with the Nextjs image component.

```javascript
// Use whichever styling solution you want. But it is important to add 'transition' to the Image component
const AnimatedImage = styled(Image, {
  transition: ".3s",
});

const ProductPage = ({ images }) => {
      <ImageContainer>
        {images.length ? (
          <AnimatedImage
            src={images[0].path}
            layout="fill"
            objectFit="cover"
            alt={images[0].path}
            placeholder="blur"
            blurDataURL={images[0].blurDataURL}
          />
        ) : (
          <Image
            src={PlaceholderImage}
            layout="fill"
            objectFit="cover"
            alt="placeholder"
          />
        )}
      </ImageContainer>
  );
};
```

The important parts are:
- `placeholder` need to be `blur`
- `blurDataURL` needs to be the base64 string generated by plaiceholder

I use `layout="fill"`, that's why the actual image size is not that important to me. If you need this data you can use [sharp's metadata](https://sharp.pixelplumbing.com/api-input#metadata) for this.

Typescript Stuff I Often Use


The [Nextjs Image Component](https://nextjs.org/docs/basic-features/image-optimization) is awesome. It does a lot of magic. To leverage the full magic of the image component it is required to `import` the image that needs to be enchanted.

```javascript
import PictureOfMeOnTheBeach from "public/PictureOfMeOnTheBeach.png"
```

Now Nextjs will do the following:

- Get the actual `width` and `height` of the image and provide it to the `img` element.
- Generate a `blurDataURL` and show it until the actual image is loaded.

As stated above this only works if you `import` the image. I know two cases where you aren't able to do this:

1. Dynamically loaded: If you don't know the exact images at build time.
2. Remote image: If you retrieve the image from a remote location.

I recently experienced the first problem and here is how I dealt with it.

### Part One: Dynamically load images

Let's start by loading all images within a folder:

```javascript
const imagesDirectory = path.join(
  process.cwd(),
  `public/products/${product.id}`
)

// Wrap the readdir in a try-catch block, otherwise the build will fail because of a unhandled exception.
try {
  const productImagePaths = await fs.readdir(imagesDirectory)

  return {
    props: {
      images: productImagePaths.map((path, index) => ({
        path: `/products/${product.id}/${path}`,
      })),
    },
  }
} catch (error) {
  console.warn(
    `Image ${product.name} has no images under /public/product/[id]!`
  )
  return {
    props: {
      images: [],
  }
}
```

### Part Two: Generate a BlueDataURL

The Nextjs Image Component provides a prop called `blurDataURL` to show a very blurry version of the image while the actual image is loading. To generate this URL I use [Plaiceholder](https://plaiceholder.co/):

```javascript
const imagesDirectory = path.join(
  process.cwd(),
  `public/products/${product.id}`
)

// Wrap the readdir in a try-catch block, otherwise the build will fail because of a unhandled exception.
try {
  const productImagePaths = await fs.readdir(imagesDirectory)

  /**
   * Create blurDataURLs (base64) as image placeholders
   */

  const blurDataURLs = await Promise.all(
    productImagePaths.map(async src => {
      const { base64 } = await getPlaiceholder(`/products/${product.id}/${src}`)
      return base64
    })
  ).then(values => values)

  return {
    props: {
      images: productImagePaths.map((path, index) => ({
        path: `/products/${product.id}/${path}`,
        blurDataURL: blurDataURLs[index],
      })),
    },
  }
} catch (error) {
  console.warn(
    `Image ${product.name} has no images under /public/product/[id]!`
  )
  return {
    props: {
      images: [],
    },
  }
}
```

### Part Three: Make it look sexy

Now it's time to use the image source and blurDataURL with the Nextjs image component.

```javascript
// Use whichever styling solution you want. But it is important to add 'transition' to the Image component
const AnimatedImage = styled(Image, {
  transition: ".3s",
});

const ProductPage = ({ images }) => {
      <ImageContainer>
        {images.length ? (
          <AnimatedImage
            src={images[0].path}
            layout="fill"
            objectFit="cover"
            alt={images[0].path}
            placeholder="blur"
            blurDataURL={images[0].blurDataURL}
          />
        ) : (
          <Image
            src={PlaceholderImage}
            layout="fill"
            objectFit="cover"
            alt="placeholder"
          />
        )}
      </ImageContainer>
  );
};
```

The important parts are:
- `placeholder` need to be `blur`
- `blurDataURL` needs to be the base64 string generated by plaiceholder

I use `layout="fill"`, that's why the actual image size is not that important to me. If you need this data you can use [sharp's metadata](https://sharp.pixelplumbing.com/api-input#metadata) for this.

The Nextjs image component is awesome. But I had some issues using it with dynamically loaded (within getStaticProps) images. Here is how I dealt with it.

The Nextjs Image Component


While the official installation process at [usefathom.com](https://usefathom.com/ref/Q0QUXX) references a blog post by [Vercel](https://vercel.com/guides/deploying-nextjs-using-fathom-analytics-with-vercel) which describes the required steps pretty good, I sill had to add some thoughts myself. Here are things I'm going to cover in this post:

- Install the fathom-client
- Store the tracking identifier in an environment variable

## Install the fathom-client

First, you need to log into or signup at [usefathom.com](https://usefathom.com/ref/Q0QUXX) and create a site. After this you need to add a script tag to your website or you use a client library instead. I would recommend the following library: [fathom-client](https://github.com/derrickreimer/fathom-client).

```bash
yarn add fathom-client
```

This lib provides three functions:

- [load()](https://github.com/derrickreimer/fathom-client#loadsiteid-string-opts-object) - Injects the Fathom script into the DOM and lets you set some config
- [trackPageview()](https://github.com/derrickreimer/fathom-client#trackpageviewopts-object) - Tracks a page view
- [trackGoal()](https://github.com/derrickreimer/fathom-client#trackgoalcode-string-cents-number) - Tracks custom goals

All this needs to be implemented in a custom `_app.js` file like so:

```javascript
//within pages/_app.js
import { useRouter } from "next/router";
import { useEffect } from "react";
import * as Fathom from "fathom-client";

function App({ Component, pageProps }) {

  //...

  const router = useRouter();

  useEffect(() => {
    Fathom.load("your-tracking-id", {
      // Including domains is optional, but I would recommend it as it will only count page views and events on this domains. Dev environments will be excluded with this config.
      includedDomains: ["yourdomain.com"],
    });

    function onRouteChangeComplete() {
      Fathom.trackPageview();
    }
    // Record a pageview when route changes
    router.events.on("routeChangeComplete", onRouteChangeComplete);

    // Unassign event listener
    return () => {
      router.events.off("routeChangeComplete", onRouteChangeComplete);
    };
  }, [router.events]);

  //...
```

## Store the tracking identifier in a environment variable

It's really not a good idea to store your keys (even if they are no secrets) within your source code. To store them within the environment here is what you need to do:

```javascript
//within pages/_app.js
import { useRouter } from "next/router";
import { useEffect } from "react";
import * as Fathom from "fathom-client";

function App({ Component, pageProps }) {

  //...

  const router = useRouter();

  useEffect(() => {
    // Test if the fathom key is available within process.env
     if (process.env.NEXT_PUBLIC_FATHOM) {
       // !!! Don't forget the NEXT_PUBLIC_* since only this will make the variable available to your frontend
        Fathom.load(process.env.NEXT_PUBLIC_FATHOM, {
          includedDomains: ["yourdomain.com"],
        });
      } else {
        // If it is not available, print a message.
        console.warn("Tried to load Fathom but no key was provided.");
      }

    function onRouteChangeComplete() {
      Fathom.trackPageview();
    }
    // Record a pageview when route changes
    router.events.on("routeChangeComplete", onRouteChangeComplete);

    // Unassign event listener
    return () => {
      router.events.off("routeChangeComplete", onRouteChangeComplete);
    };
  }, [router.events]);

  //...
```

If you want to track goals, like newsletter signups or checkouts call the [trackGoal()](https://github.com/derrickreimer/fathom-client#trackgoalcode-string-cents-number) function whereever you like.

While it should [not be required](https://usefathom.com/compliance) to add a annoying cookie notice when using Fathom, you probably should update your privacy policy text on your website. Fathom has a nice [little snippet](https://usefathom.com/docs/legal/privacy-policy-sample) which can be easily added to your website.


I used Google Analytics for almost forever. But since GDPR requires you to add a notfication if you use cookies I switched to Fathom. Here is how to add it to a Next.js app.

Add Fathom to your Next.js App


In React it's all about components and passing data between those components around. When I started with React it felt naturally to me. But there was allways this one question: What should I do, if I want to make data accessibel to all, or let's say alot of my components? - "Just use the React Context API" is what the offical docs say. While it sounds simple, I needed some time to really understand how the whole context thing works. Here is my take to explain it.

Before we get into it, here is a corresponding [codesandbox](https://codesandbox.io/s/learning-react-context-04z7f').

## A simple (static) context

The first thing to do is to create the actual context:

```javascript
export const MyContext = React.createContext(
  "Sorry, I'm not a child of MyContext.Provider.😭"
)
```

When calling the createContext function you need to provide a default value. This value is used when a component does not have a matching provider above it in the component tree. In an real world this value is never used, it's only for testing purpose where there is not parent component. Knowing this you could assign it to null oder undefinied. But I think it is a lot easier to debug issues if this value is not null or undefinied in the first place. That's why I like to pass a string a shows me that there is something wrong. Of course you could also use this for fallback scenarios.

Note that we export MyContext. That is neccessary because we will need to reference this variable the components that want to consume the context.

Once you created the context, you place it within the component tree. You do this by placing a Provider in the component tree:

```javascript
;<MyContext.Provider value="Hey, I'm a child of MyContext.Provider 😊">
  <MyComponent />
</MyContext.Provider>

{
  /* The MyWrongComponent is not a child of the MyContextProvider, because of this it will not be able to consume the context. */
}
;<MyWrongComponent />
```

Now what is happening here:

- By placing MyContext.Provider we set the context frame. All components below this component are able to use the context value. Component on the same level or above in the component tree won't be able to use the context. If components from outside this frame want to consume the context, they will receive the value passed when we called React.createContext('this value').
- MyComponent would be able to consume the context.
- The prop value="Hey, I'm a child of MyContext.Provider 😊" sets the actual initial value.

If MyComponent should be able to consume the context it needs to do this:

```javascript
import { MyContext } from "../path/to/MyContext"

function MyComponent() {
  // This component consumes the context by using React.useContext.
  const contextValue = React.useContext(MyContext)
  return <div>MyComponent: {contextValue}</div>
}
```

Let me explain:

- First we need to import the MyContext variable to reference it in our component.
- Then we call React.useContext(MyContext) and assign it to a variable.

## Read and write the context

Now you got a somewhat static context. What if you would like to change the context? For this, you just need to assign a let's say state and a function to set the state:

```javascript
const [count, setCount] = React.useState(0)

;<MyDynamicContext.Provider value={{ count, setCount }}>
  <MyDynamicComponent />
</MyDynamicContext.Provider>
```

```javascript
function MyDynamicComponent() {
  const { count, setCount } = React.useContext(MyDynamicContext)
  return (
    <>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>Add</button>
    </>
  )
}
```

While the React Context API is a pretty cool thing, you should use it sparingly as the [official docs](https://reactjs.org/docs/context.html#before-you-use-context) say.

If you want to get a littlebit deeper into the whole context thing I defintly recommend the following sources:

- [Kent C. Dodds ofcourse.](https://kentcdodds.com/blog/how-to-use-react-context-effectively/)
- [Robin has some really awesome stuff on his blog.](https://www.robinwieruch.de/react-context/)


While it sounds simple, I needed some time to really understand how the whole context thing works. Here is my take to explain it.

Just a tiny intro to the React Context API


Getting started in a new job in an enterprise? I have changed jobs several times, and based on my experiences I wrote down some thoughts. While a general appliciable checklist is possible, individual onboarding in an enterprise is paramount. Unfortunately, there is a huge gap between great onbording and the onboarding processes I experienced. That's why it is really important to have your own onboarding plan.

Here are my thoughts on getting started in a new enterprise job.

## Get to know your human environment

To integrate yourself as fast as possible, it is crucial that you know the people around you and their place in the organization. Every company should have something like a [organization chart](https://www.google.com/url?sa=i&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FOrganizational_chart&psig=AOvVaw3TjwUPGpRKuDbKDiiorl3B&ust=1592404866842000&source=images&cd=vfe&ved=0CA0QjhxqFwoTCIiK_sbIhuoCFQAAAAAdAAAAABAD). Ask or for it or look for it by yourself. Print it out and put it into you notebook (if you have one). I personally like to take notes when I meet those people for the first time and make notes directly the organizational chart. Something like "Young guy with glasses. Knows alot about finances." What will look a little bit creepy will help you remember the people around you better, and will help you to build organizational connections. This is a crucial part of your initial experience as already mentioned in one of my [previous posts](/blog/two-books-for-young-professionals-in-an-enterprise-world).

## Get to know your technical environment

Major enterprises work because of processes and standards. The faster you get to know them, the faster you will be able to deliver good work. By that I refer to all processes you could somehow initiate or benefit from. Sometimes companies have process maps internally available for any employee and sometimes the process is something everybody talks about but nobody actually understands. Therefore it is really important to truly understand the process, and even more important to use the process for your needs. If it is not documented, then you should document it yourself.
While processes feel stiff, they most of the time work. Because of this they are avoided and bypassed by the majority. If you know how the really work, it is your chance to really create value for your team and the enterprise.

## Get to know your mission from any level

Enterprises have strategies, missions and visions. While they are intended to give the company purpose and influence actions, there is often a huge gap between what the company would like to be and what the company actually is. Don't be misled by those externally communicated strategies. Ask you leader: what is really the purpose and role of your organization? What is your role? Why did they hire you? The answers to these questions should guide your action.


Three things I would recommend everyone entering a new job or position.

Individual Onboarding in a New Enterprise Job


Right after school, I had no idea what to do. The one goal I had, passed down from my parents, was to find a good, stable job that paid well. While searching for learning opportunities to further my education, I came across a work/study offer from Deutsche Telekom. They said it was part intern, part study program, and I had actually no clue what that meant, but I applied anyway. I had two job interviews but was very poorly prepared for either one. But they hired me anyway, God only knows why. Looking back now, I would like to thank the people that hired me. 🙏🏻

The study part of the program was well organized and straight forward, so it took a lot of pressure off me, as I knew exactly what I needed to study at any point in time.

This gave me the chance to focus on the work side of the program, and learn how life worked within a huge enterprise. The practical world of work is completely different than the theoretical world of science. In the business world, humans and processes play a huge and important role, which I didn’t learn in the theoretical world of science. There were two really important things that I learned within the early phase of my career and two books that helped me to deal with that.

## First,...

...thriving in an enterprise depends a lot on how well you get along with other people and how well you function in the system. By that, I don’t mean trite things like _“being a team player”_. I mean really building relationships with people and being reliable. It’s about building a reputation so that people know that you are the one who solves problems and pushes the enterprise forward. In many ways, it’s a form of [social engineering](<https://en.wikipedia.org/wiki/Social_engineering_(political_science)>) (the political science one, not the security one). That’s why the book [Making Friends and Influencing People by Dale Carnegie](https://amzn.to/2MKXaOe) was so helpful to me.

While it's always good to be very knowledgable in your field, you can achieve a lot with good social engineering. Dale Carnegie shows how successful people throughout history have influenced people around them by using easy to learn techniques, like remembering and calling colleagues by their name.

## Second,...

...success within an enterprise requires the ability to sell other people on your ideas. The primary tool used in business to visually sell your ideas is Microsoft PowerPoint (or any other presentation tool). Got an idea? Build a PowerPoint presentation to showcase it! Need a decision? Use PowerPoint to illustrate the different options and demonstrate why your proposed option is the best. Want to plan the next team event? You guessed it, PowerPoint. Building PowerPoint presentations and other visual assets is an important thing to master in the business world. That’s where the book, [Graphics design: the new basics](https://amzn.to/3cLBGv7) helped me immensely.

It covers the basics of color theory, layouts, and the other details of graphic design you will need to know to create compelling presentations. The concepts I learned in that book still help me to this day. For example, I learned that excellent visuals will more than compensate for minor mistakes in your work. Taking the time to read this book will definitely pay off.

Any thoughts? Just send me a message on [Twitter](https://twitter.com/zeekrey_). I love to read every single comment.


These two books helped me as a young professional in an enterprise world


I recently wrote some [Cypress](https://www.cypress.io/) tests for a project using [Firebase](https://firebase.google.com/). While most of it was pretty straight forward, I had trouble testing the authentication flow. Signing up is not a problem, but before or after the test case, the corresponding test user needs to be deleted. The problem is that the Firebase Admin SDK needed to accomplish this needs a node.js environment.

## Initializing the Firebase Admin SDK

The first thing I found was the [Cypress-Firebase](https://github.com/prescottprue/cypress-firebase) lib. The project is well documented and up-to-date, but I realized it wouldn't help me with the initial problem - deleting the test user after the test run. So I searched for another way, and I found that Cypress allows you to call a node script right from the test case itself. And that's what I will show you how to do.

The [cy.exec](https://docs.cypress.io/api/commands/exec.html) function allows us to run a system command. So, why not call a node script that initializes the firebase admin SDK and deletes our test user?

```javascript
// clearFirebase.js
var admin = require('firebase-admin')
var app = admin.initializeApp()

admin
    .auth()
    .getUserByEmail(<theEmail>)
    .then(function (userRecord) {
        admin
            .auth()
            .deleteUser(userRecord.uid)
            .then(function () {
                console.log('Successfully deleted user')
                process.exit(0)
            })
            .catch(function (error) {
                console.log(error.code)
                process.exit(1)
            })
    })
    .catch(function (error) {
        console.log('Error fetching user data:', error)
        process.exit(1)
    })
```

In order to use the admin SDK, you have to initialize it with credentials. If you initialize it in the way I just showed you, the credential file needs to be linked to a local environment variable like so: `export GOOGLE_APPLICATION_CREDENTIALS="/home/user/service-account-file.json"`. You can read more about [initializing here](https://firebase.google.com/docs/admin/setup#initialize-sdk).

## Clear state and delete the test user

Deleting the test user is pretty basic, and you can read more about how to accomplish that in the offical [firebase docs](https://firebase.google.com/docs/auth/admin/manage-users#delete_a_user). But the missing piece is: `.getUserByEmail(<theEmail>)`. Our cypress test needs to somehow provide a user identifier to the script. To make this possible, we can pass an environment variable to the script:

```javascript
//yourtest.spec.js
cy.exec('node ./cypress/cleanupFirebase.js', {
    // user.email comes from a fixture file but you can use a simple string as well
    env: { email: user.email }
}).then((result) => {
    //Just for debugging
    console.log(result.code)
    console.log(result.stderr)
    console.log(result.stdout)
})
```

While this will work, there is still a small issue. The test state (in this case, the existence of the test user) should be cleaned ~~both~~ before ~~and after~~ the test run, because your test case should always be mounted on a clean and stable state (well, I also clean the state afterwards just to cleanup my test database, although this shouldn't be necessary). The [cypress docs](https://docs.cypress.io/guides/references/best-practices.html#Using-after-or-afterEach-hooks) say that you should always clean the state before testing, so if the test user doesn't exit, the firebase.auth will throw an error. However, since we want to continue our test case, we need to handle this error in the following way:

```javascript
// clearFirebase.js
.catch(function (error) {
        if (error.code === 'auth/user-not-found') process.exit(0)
        console.log('Error fetching user data:', error)
        process.exit(1)
    })
```

Now we can catch the _auth/user-not-found_ error code and resume our test case if the user already exists. You can find the whole script here: [the gist](https://gist.github.com/zeekrey/4ca1a768ec4cc5793c3f41c88ee66eb2).

To be honest, I don't like E2E testing the whole system. It takes a lot of initial time and is pretty fragile. That's why I like to test only major and happy user paths end to end, and focus on unit and integration testing. I definitely recommend reading more about testing at the awesome [Kent C. Dodds blog](https://kentcdodds.com/blog/write-tests).


How to test the firebase user authentication with Cypress.

Blog