DEV Community: Lukas Polak

Using faker.js on Next.js API route

Lukas Polak — Sun, 04 Apr 2021 14:54:56 +0000

Next.js provides a neat functionality to create API routes. Any file inside pages/api will be treated as an API endpoint instead of a page.

So let's create an API endpoint with dynamic faker.js data.

First, we need to initialize a Next.js app - yarn create next-app faker-js-on-next-js-api-route command is here to rescue! And because I prefer a type safety and I like TypeScript, we will initialize it as well.

With touch tsconfig.json (file will be populated after running yarn run dev command), we will create a config file for TypeScript. With yarn add --dev typescript @types/react, we will install all the dependency that we will need.

The next thing that we need to do is rename every file extension from .js to .tsx. After renaming, we can stage our files and commit them.

git add -A && git commit -m "initialize typescript"

Our project has styles that we will not need for this kind of project, so I will remove the styles folder and Remove .css imports from pages/_app.tsx and pages/index.tsx files. Also, I have removed all the unnecessary code from the pages/index.tsx file, so it looks like this:

// pages/index.tsx

export default function Home() {
  return (
    <div>
      <h1>Hello, Vercel!</h1>
    </div>
  )
}

To keep our changes more granular I'm committing here as well

git add -A && git commit -m "remove styles"

Next, we will rename pages/api/hello.tsx to pages/api/customers.tsx and we will install faker.js dependecy with yarn add faker and type definitions with yarn add @types/faker -D

Now, let's edit our customers.tsx file. We need to import a faker instance and then default export our function, which accepts req (An instance of http.IncomingMessage) and res(An instance of http.ServerResponse) parameters. Both req and res have some helper functions and middlewares on top of the HTTP classes.

To generate customers, we need to create an empty new array. To the arrayLength parameter, we will pass 10 (We will make this dynamic later on). Then we need to spread the newly created array to an empty array to make it iterable. Then we are going to map through this array. We will omit the value parameter by passing the _, and we will use the index to see the current index of the object. We will return an object which will look like this:

const customer = {
  index,
  name: faker.name.findName(), // generate the fake name
  city: faker.address.city(), // generate the fake city
}

Last but not least, we need to set the response status to 200 (OK) and then return a JSON response with our customer's data (we need to stringify customers object with the JSON.stringify() method).

// pages/api/customers.tsx

import faker from 'faker'

export default (req, res) => {
  const customers = [...new Array(10)].map((_, index) => {
    return {
      index,
      name: faker.name.findName(),
      city: faker.address.city(),
    }
  })

  res.status(200).json(JSON.stringify(customers))
}

If we go to http://localhost:3000/api/customers (If you are using a different port replace this URL), we will see that we get the data.

Now let's make the data more dynamic, at least the length. Instead of hardcoded arrayLength, we will receive a limit from the request body (if limit won't be provided, we will use fallback value, e.g. 10).

First, we need to define a limit constant and check if it was provided in the body. If not, we will use 10.

const limit = JSON.parse(req.body)?.limit ?? 10

Then we can safely replace [...new Array(10)] with [...new Array(limit)]

After this refactoring, you can test it with Postman, Insomnia, or your other favorite tool, or you can stay with me for a little bit longer and test it within the app.

Inside the pages/index.tsx file, We will create a state for our data. We will use the useEffect hook that will be run only on the initial mount (empty dependency array). Within useEffect we will create an async fetchData function that will fetch our /api/customers api endpoint. We will pass a stringified object with our limit key to the body of the' fetch' function options. Then we will return a JSON representation of the response. Next, we will call the fetchData function, and in the then method we will set the state with incoming data.

I'm not handling errors here for simplicity, and I'm assuming that if there is no data in the state, the state should be loading.

// pages/index.tsx

import { useEffect, useState } from 'react'

export default function Home() {
  const [data, setData] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('/api/customers', {
        method: 'POST',
        body: JSON.stringify({
          limit: 100,
        }),
      })

      return response.json()
    }

    fetchData().then((data) => {
      setData(data)
    })
  }, [])

  return (
    <div>
      <h1>Hello, Vercel!</h1>
      {!data ? '...loading' : <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  )
}

And that's it! Pretty simple right? Hopefully, you find this article, and feel free to contact me if you have any questions or feedback!

See you next time!

How to host Express app on Vercel

Lukas Polak — Sat, 03 Apr 2021 12:39:04 +0000

Disclaimer: Vercel configuration file uses legacy builds and routes properties.

Last week I needed to host a simple Express app somewhere, and I decided to host it on Vercel because of the excellent Developer Experience.

Here are the steps that I needed to do to make it possible:

First, we need to create a project directory. I decided to name it vercel-express and then change the directory to a newly-created directory.

# create a directory
mkdir vercel-express

# change directory
cd vercel-express

Then we will initialize git and add the node_modules directory to .gitignore.

# initialize git
git init

# add the `node_modules` directory to `.gitignore`
echo node_modules >> .gitignore

Next, we need to set up a new package. We are using the -y flag to skip the questionnaire.

npm init -y

Then we will create an index.js file and populate it.

# create a new `index.js` file
touch index.js

// ./index.js
const express = require('express')

const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello, Vercel!')
})

app.listen(port, () => {
  console.log(`Express app hosted on Vercel listening at port ${port}`)
})

To run an express app, we need to create a custom vercel.json config file.

touch vercel.json

// ./vercel.json
{
  "version": 2,
  "builds": [
    {
      "src": "./index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/"
    }
  ]
}

After populating the index.js and vercel.json files, we can stage all of the files and commit them.

git add -A && git commit -m "Initial commit"

If you want to change the name for the main branch from master to main, simply run the git branch -m master main command.

For pushing code to the existing repository, follow the following code.

git remote add origin https://github.com/LukasPolak/vercel-express.git
git branch -M main
git push -u origin main

The Vercel config file includes legacy properties, but it works like a charm when writing this. Maybe in the future, I will update the tutorial with the recommended properties.

Fundamentals of Testing in TypeScript #3

Lukas Polak — Sat, 03 Apr 2021 08:57:03 +0000

In the previous article, we created a specialized expect function that returns an object with assertions, but one of our assertion function's side effects is that as soon as one assertion fails, it throws an error, so other tests do not run. A testing framework exists to help the developer identify what is broken as soon as possible. We can ensure that we will provide more helpful error messages and by running all of our tests.

Let's create our own test function to encapsulate our automated tests and abstract them. Also, we want to ensure that we will run all the tests with more helpful error messages.

Our test function will accept a title of the test and a callback.

Because our test function can throw an error, we will wrap it in a try-catch statement. Inside the try block, we will call our callback, and if the callback throws an error, we will log it out.

To help a developer identify which functionality is broken, we will log the title. For better visibility, we are adding ✅ and ❌ emojis.

const test = <T>(title: string, callback: () => T) => {
  try {
    callback()
    console.log(`✅ ${title}`)
  } catch (error) {
    console.error(`❌ ${title}`)
    console.error(error)
  }
}

Now let's encapsulate our assertion to a function and pass it as a callback to our test function.

test('add function', () => expect(add(8, 16)).toBe(24))
test('subtract function', () => expect(subtract(32, 16)).toBe(16))

Now, we can rerun our test file, but we need to look into the console instead of the tests tab.
It is now clearly visible that the problem is inside our add function, not in the subtract.

❌ add function
Error: -8 is not equal to 24

✅ subtract function

Fundamentals of Testing in TypeScript #2

Lukas Polak — Thu, 01 Apr 2021 14:54:27 +0000

In the previous article we written our first testing assertion.

In this article we will abstract our assertion, which will help us with readability and avoiding unnecessary code duplication.

Our testing assertion is imperative. It would be appropriate to write a thin layer of abstraction to make it more universal. So first, we will write a simple function to encapsulate our assertion.

Our function expect will accept the value parameter. It will return an object with the assertion toBe, which accepts expected as a parameter.
Inner implementation of the toBe function will be the same as our previous article's assertion.

const expect = <T>(value: T) => {
  return {
    toBe(expected: T) {
      if (value !== expected) {
        throw new Error(`${value} is not equal to ${expected}`)
      }
    },
  }
}

Now we can remove code duplication and make our code more universal.

//...

expect(add(8, 16)).toBe(24)

expect(subtract(32, 16)).toBe(16)

If we rerun our tests, we will get the same error message. At the most basic level, our function takes a value, and then it returns an object with specialized assertion. Currently, we have only a toBe assertion. Still, we can easily create a toEqual for deep equality check, or toBeLessThan and toBeGreaterThan for comparing numbers.

Fundamentals of Testing in TypeScript #1

Lukas Polak — Wed, 31 Mar 2021 16:18:56 +0000

First, we need to get a fundamental understanding of what an automated test is in TypeScript.

A test is a code that throws an error when the actual result of something does not match the expected result.

The tests can be more complicated when dealing with code that is dependent on the state (component needs to be in the document before you can fire a browser event, or data needs to be fetched before interacting with the component). Nevertheless, it is relatively easy to test pure functions.

Pure function will always return the same output for a given input and not change the state around it.

We have a bug inside a sum function. Instead of adding, it subtracts. We can quickly fix that, but we want to write an automated test to make sure that we will not reencounter this bug.

export const add = (a: number, b: number): number => {
  return a - b
}

We are expecting that the result constant will be 24, so create a new variable expectedResult with that value for better readability.

let result = add(8, 16)
let expectedResult = 24

We can say if the result is not equal to the expectedResult throw an error that says result does not match an expectedResult with some hints:

if (result !== expectedResult) {
  throw new Error(`${result} is not equal to ${expectedResult}`)
}

The thrown error will be: -8 is not equal to 24

If we replace the minus symbol with a plus inside the add function, our test passes without throwing any error. This is the most fundamental part of a test.

export const add = (a: number, b: number): number => {
  return a + b // Test will pass now 🔥
}

To get more familiarity with this, we can add another function subtract.

export const subtract = (a: number, b: number): number => {
  return a - b
}

For simplicity, we will copy-paste our conditional assertion.

// ...

result = subtract(32, 16)
expectedResult = 16

if (result !== expectedResult) {
  throw new Error(`${result} is not equal to ${expectedResult}`)
}

This time, our tests are passing without an error.

Errors should be as helpful as possible to quickly identify where the problem is and fix it.

CodeSandbox playground:

Why I joined the "Blogging for Devs" course

Lukas Polak — Sun, 07 Mar 2021 14:37:39 +0000

Why did I sign up

I have seen plenty of recommendations for the "Blogging for Devs" course by @monicalent. Still, the primary reason why I joined is that I wanted to share my knowledge. I think that sharing knowledge is an important part not only for communities but also for personal growth; and why is that? It is because when you want to explain something to others, you need to dig deeper. A lot deeper. To understand some topics, you need to understand the nuances and edge-cases.

I always struggled with the "I do not have enough followers to generate enough traction or interest" mindset. Still, Monica is presenting a way how to start blogging without an existing audience.

What's my motivation for blogging

As I mentioned in the previous section, I want to share knowledge and my perspective on some topics (closely connected to web development, but probably also about my daily life). I wanted to have a blog for a longer time, but it always failed:

on my mindset - I do not have a big-enough audience to share it
on my perfectionism - I haven't found a theme that would match my expectations and that it would be flexible enough to edit it to my taste. I have tried to start with minimal-blog (I struggled a bit with customization) and then with novela (I wanted something more simple and performant - maybe their memoir theme would be better, but in time of writing this post, it is not yet released).

Of course, I tried to create a custom blogging theme on my own, but I always failed - I wanted to make it perfect, but after some time, I lost my dedication to work on this. I want to release a post about my tech stack for blogging, so follow me on Twitter @TheLukasPolak if you want to know more.

What do I want to learn with this course

Everything and fast! But now, seriously. What do I want to learn from Monica? How to start with blogging without an audience and how to build an audience. So far, it is pretty good. I have been confused at the beginning with the "Syndication," i.e., canonical URLs, but now it makes sense to me. I'm looking forward to the next emails.

What next?

I will release a "review" on Monica's course in the upcoming weeks, so do not forget to follow me if you want to know more! But I can tell you, it is worth it! Even if it would be paid! Monica is a great instructor/host. I like her style of writing, and I admire her sharing and reports.

Till next time!

Sources

Metaprogramming

Lukas Polak — Wed, 03 Mar 2021 19:35:05 +0000

Abstraction (i.e., implementation hiding) is a generalization process - taking a concrete implementation and making it applicable to different, somewhat related data types.

Originally published on http://tidbit.dev/

Abstraction

Lukas Polak — Wed, 03 Mar 2021 19:34:30 +0000

Abstraction (i.e., implementation hiding) is a generalization process - taking a concrete implementation and making it applicable to different, somewhat related data types.

Originally published on http://tidbit.dev/

Generalization

Lukas Polak — Wed, 03 Mar 2021 19:32:31 +0000

Generalization is the process of removing the repeated or obvious parts and hiding them behind an abstraction.

Originally published on http://tidbit.dev/

Tidbit.dev

Lukas Polak — Wed, 03 Mar 2021 19:31:47 +0000

TidBit /'tid.bit/ means a small piece of interesting information or a small dish of pleasant-tasting food. A bit, on the other hand, is a basic unit of information in computing.

This project aims to provide easy definitions of terms that you can use in your daily developer life.

Difference between function and method keywords

Lukas Polak — Sat, 12 Sep 2020 10:39:53 +0000

A method is a function that belongs to the object. Methods have a "receiver" while functions do not.

const someObject = {
  someMethod: function () {
    console.log('Hello, World!');
  },
};

// method call
someObject.someMethod(); // `someObject` is a receiver, `someMethod` is a method

const someFunction = someObject.someMethod;

// function invocation
someFunction(); // JavaScript functions are invoked without a receiver, using parenthesis syntax

function helloWorld() {
  console.log('Hello, World!');
}

helloWorld(); // logs "Hello, World!"

// When a function is declared on the global scope, it becomes a property of a global object
// The `window` is the receiver of `helloWorld,` which would make `helloWorld` a method and not a function. However, in JavaScript, it is still considered a function.
window.helloWorld(); // logs "Hello, World!"

First-class object, first-class function, higher-order function, first-order function, second-order function

Lukas Polak — Sat, 12 Sep 2020 09:48:08 +0000

The first-class object, sometimes referred to as a first-class citizen, is an object that supports every operation allowed on other objects. First-class objects can be stored in a variable, can be passed as an argument to the functions, can be returned by the function, can be stored in a data structure, can hold own properties and methods.

The first-class function is treated as an object, so it has state and behavior, and it can be passed as an argument to the function and returned from the function. In JavaScript, functions are objects, so this is the reason why the first-class function supports the same operations as objects.

// function definition
function logName(name) {
  console.log(name);
}

// function invocation
logName('Lukas'); // logs 'Lukas'

// stored as variable
const logNameAlt = logName;
logNameAlt('Lukas'); // logs 'Lukas'

// first-order function (`callback`) being passed in as argument
function higherOrderFunction(callback) {
  return callback; // first-order function being returned
}

const logNameHigher = higherOrderFunction(logName);
logNameHigher('Lukas'); // logs 'Lukas'

// stored in a data structure
const helpersArr = [logName];
const helpersObj = { logName };
helpersArr[0]('Lukas'); // logs 'Lukas'
helpersObj.logName('Lukas'); // logs 'Lukas'

// hold own property
logName.customProperty = 'Polak';
console.log(logName.customProperty); // logs 'Polak'

The higher-order function accepts a function as an argument, returns a function, or both. The higher-order function uses first-order functions, and the higher-order function is a first-order function themself.

The first-order function accepts a function as an argument.

The second-order function accepts a function that accepts a function.