DEV Community: Tuan Phung ⚡️

Dynamic social card with Vercel OG Image Generation

Tuan Phung ⚡️ — Fri, 06 Jan 2023 09:09:59 +0000

This blog was originally posted on my personal website 👉 phung.io

Introduction

In this quick tutorial, I will show you how to create an image like this one below using the Vercel Image Generation API for your social media posts

Inspiration from fullstackheroes.com

Vercel Image Generation API

To get started we need to install the @og/vercel package from npm

npm install @og/vercel

Next, create a new file called og-image.ts in the root of your project. This file will be used to generate the image.

import { ImageResponse } from '@vercel/og'

export const config = {
  runtime: 'edge',
}

export default function handler(req) {
  try {
    const { searchParams } = new URL(req.url)
    const website = 'phung.io'

    // dynamic params
    const title = searchParams.get('title')?.slice(0, 100)
    const published = searchParams.get('published')

    return new ImageResponse(
      (
        <div tw="h-full w-full flex bg-white border-blue-500 border-[16px]">
          <div tw="flex flex-col justify-between w-full h-full p-20">
            <div tw="flex flex-col">
              <div tw="text-[32px]">{published}</div>
              <h1 tw="text-[64px]">{title}</h1>
            </div>
            <div tw="flex flex-row">
              <img
                src="https://phung.io/static/images/logo.jpeg"
                tw="w-20 h-20 rounded-full"
                alt="tuan-phung"
              />
              <div tw="flex flex-col pl-8">
                <div tw="text-[32px]">Tuan Phung</div>
                <div tw="text-[24px] text-blue-700">{website}</div>
              </div>
            </div>
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 630,
      }
    )
  } catch (e) {
    console.log(`${e.message}`)
    return new Response(`Failed to generate the image`, {
      status: 500,
    })
  }
}

and then we can call our API with the following URL


const siteUrl = 'https://phung.io'

const encodedTitle = encodeURIComponent(title)
const encodedDate = encodeURIComponent(formatDate(publishedAt) + ' | ' + readingTime.text)

const autoOgImage = `${siteMetadata.siteUrl}/api/og?title=${encodedTitle}&published=${encodedDate}`

<meta property="og:image" content={url} key={autoOgImage} />
<meta property="og:url" content={autoOgImage} />

Here are more links related to @og/vercel

Thanks for reading

Let me know in the comments section what you think about this article. If you love it, you know what to do! Share it with your friends and colleagues.

If you want me to cover some topics in the next post, DM me on twitter @tuanphung_, or if you have any suggestions, feel free to comment below.

See ya next time and keep on hacking ✌

Set up a free Nextjs blog with Notion and Tailwind in 10 min

Tuan Phung ⚡️ — Tue, 06 Sep 2022 18:00:06 +0000

Github repository - Github repository with the codebase
Default demo blog - Deployed from main branch
My personal site - The source code that I use to power my website

What features are in the blog starter:

✨ Features

✅ Setup takes only a few minutes (single file config) 💪
✅ Newsletter subscription via Convertkit API
✅ Simple analytics with Umami
✅ Automatic OG social images with Tailwind template
✅ Automatic pretty URLs
✅ Excellent page speed
✅ Optimized for Next.js and Vercel

Getting started

Whenever I’m writing a new blog, like this one, I’m using notion for drafting. Wouldn’t it be cool just to be able to switch the tag in notion to published and have it live on your blog?

This will be a tutorial on how you can create your own blog powered by Notion, Nextjs, and Tailwind.

Notion setup

The first step would be to create an API key. You can follow the Notions Getting Started Guide where we will able to generate a new API key, which we will need for the env file as NOTION_SECRET

For posting new blog articles, I already made a read template, so we can simply duplicate it and start writing articles.

Once we cloned the blog template, we need DATABASE_ID which can be taken from the URL. It is the id after xxx.notion.site/

Forking the codebase

Click here to fork the code base and pull the repository

npm install && npm run

The first time you run the blog, you will get an error of missing API key, that’s because we haven't updated the .env file.

The last thing we need to do to make the blog work is to rename .env.example to env and update the variables

# Notion secret integration
NOTION_SECRET=
# Database id from cloned template
BLOG_DATABASE_ID=

# Convertkit subscription (Optional)
NEXT_PUBLIC_CONVERTKIT_FORM_ID=
NEXT_PUBLIC_CONVERTKIT_API_KEY=

# Umami analytics (Optional)
UMAMI_ID=

If we did everything right, we should be able to see the working blog 🎉

# Convertkit subscription (Optional)
NEXT_PUBLIC_CONVERTKIT_FORM_ID=
NEXT_PUBLIC_CONVERTKIT_API_KEY=

# Umami analytics (Optional)
UMAMI_ID=
If we did everything right, we should be able to see the working blog 🎉

A visual depiction of what is being written about

Thanks for reading

Let me know in the comments section how you feel about this generators series. If you love it, you know what to do! Share it with your friends and colleagues.

🌟 Stars on Github and feedback is appreciated! 👍

If you want me to cover some topics in the next post, DM me twitter @tuanphungcz, or if you have any suggestions, feel free to comment below.

See ya next time and keep on hacking ✌

Monitoring stack for your frontend application

Tuan Phung ⚡️ — Thu, 10 Dec 2020 23:34:01 +0000

You and your team had been working hard to meet the deadline for launching your app. Now comes the part where you need to analyze the user's behavior. The next step is to iterate on your product to increase your sales or conversion rate. Apart from that, you need to also maintain your application and do bug fixes. To achieve that, we need some proper tools.

I will share with you the monitoring stack which I'm using in my projects. These tools helped me to increased sales and I was able to catch all the bugs in the applications.

Google analytics

This is the most popular and free digital known out there. It provides you with tracking and understanding of your website. Thanks to it, you know who is visiting your site and where they come from. I use it for tracking the users and analyzing the flows but it has also a ton of other features.

Hotjar

This is my favorite one. It makes video recording per each visitor to record the user behavior. It is like you can watch users using your website by standing behind their back. Now you have a clear and visual understanding of what is happening on your website. With that knowledge, you know exactly what is preventing the conversion rate. Other features worth mentioning are heatmaps, form analysis, feedback polls.

Google optimize

A tool that helps you to do AB testing quick and easy. You can set in percentage the ratio for the split test. I used to test our new features measure which brings more revenue or has a better conversion rate.

Sentry

My go-to monitoring and error tracking application. Without that, I won't be able to identify issues in realtime. Also, it can give you error traceback so it makes it easier for debugging.

Logentries

This is a log management tool. Sometimes, when sentry is not even enough. You need to dig deeper into the bug, the logs will serve you as a UI search and do some piping

Drift

This is your live chat tool for support and sales. Many of you know Intercom as an alternative. But Intercom can be quite expensive and that's is why I prefer Drift which offers the free version.

Conclusion

These tools can give you a better understanding of your product. Where the goal is to figure out the weak points to improve them and to achieve your goals. I would definitely tell you to use some of these tools. By having these insights, it can save you money and development time.

What is your monitoring stack? Are there any other tools worth mentioning? Drop me a comment on what you are using in your company.

Canceling promises with Generators in ES6 Javascript

Tuan Phung ⚡️ — Mon, 20 May 2019 10:48:18 +0000

In my previous blog post about I explained the basics about generators in ES6 Javascript. If you haven't read you can check it out here 👉Understanding generators in ES6 Javacsript

Many of you asked for a real-life use case of generators so I'm going to show one of the problems that I have encountered.

Introduction

But in order to explain the problem I have to tell a few words about our product Mews Navigator that we're working on.

The Navigator allows you to check-in online, securely storing your credit card details and giving you full control over the information that you want to share.

So now, imagine that you are doing the online check-in via the app and you are proceeding to the payment step.

So once you click on the next button, you would see a loader and then a list of your payment cards, quite straight forward, right?

Rendering the payment route

Actually, it's a bit more complex under the hood. There are a few steps that need to be resolved before the component is rendered.

// Let's say user goes to this url:
// www.mews.li/navigator/check-in/payment/:reservationId

// 1. This will check if the user is signed in.
// If yes go render <Dashboard /> if not go to <SignIn />
authAction(); // async

// 2. We need to fetch the reservations
fetchReservations(); // async

// 3. We need to check if `reservationId` and
// route itself is valid (If all checks pass go to next one)
isReservationIdValid({ reservations, currentReservation }); // sync

// 4. Fetch paymentcards
fetchPaymentCards(); // async

// 5. Fetching hotel entitites
fetchHotels(); // async

// 6. Some of hotels uses PCI proxy vault, if it does,
// we need to initialize PCI proxy script.
doesHotelUsePciProxy({ hotels, hotelId }); // sync

// 7. Fetch and init the script
initPciProxy(); // async

We have a few checks and some APIs fetching before rendering the component.

The catch is that if any of these checks could fail and based on which checks to fail, we would redirect to a specific case.

So how to solve this without using any external libraries? Remember last time, when I showed you this example?

function* avengersGenerator() {
  yield "Hulk"; // Pausing the execution
  yield "Thor";
  yield "Iron man";
  return "Ultron"; // Exiting of finishing the generator
  yield "Spiderman";
}

const iterator = avengersGenerator();

iterator.next();

View source code in codesandbox

Have a look at the return statement. This would stop the execution and ignore everything that is after the return statement.

This could give us the possibility to iterate over promises and cancel anywhere in a promise chain.

Proof of concept

Let's create something that is general enough for our use case to solve this case in the routing. The main points were:

Able to deal with sync and async functions (API calls)
The code returned redirect as soon as some of the checks fail.
General enough so we can reuse for other routes as well.

So I opened code sandbox and I come up with this solution 👉 Codesandbox

As you can see in the console, we have multiple actions and some checks. We can move around the check that is supposed to fail and the rest of the code is not executing.

View the source code in codesandbox

And here is the example of implementation for the payment step route in the code.

function* paymentRouteGenerator() {
  yield authAction();
  yield fetchReservations();
  yield isReservationIdValid();

  yield fetchPaymentCards();
  yield fetchHotels();
  yield doesHotelUsePciProxy({ hotelId });
  yield initPciProxy();
}

const CHECK_IN_PAYMENT_ROUTE = {
  name: Route.CheckInPayment,
  path: "/:reservationId",
  action: resolveAction(
    generatorWrapper(paymentRouteGenerator),
    renderComponent(() => <CheckInPaymentStep />)
  )
};

I had to write a handler for our generator. This is a place where the magic happens. I have explained every step below in the comments.

const generatorWrapper = generator => context => {
  // 1. Creating an iterator
  const iterator = generator(context);

  // 3. This function except yielded as a argument
  const handle = yielded => {
    const handleWithRedirectCheck = route => {
      // 4. Here is where the magic happens, we check if there is a redirect, if yes,
      // it would redirect (cancel) and will not execute the rest of the generator
      if (get("redirect", route)) {
        return route;
      }
      // Otherwise continue
      return handle(iterator.next());
    };
    // Exit if we are at the end of the generator
    if (yielded.done) {
      return;
    }

    // Handling the async case if action/check is a promise
    if (isPromise(yielded.value)) {
      return yielded.value.then(handleWithRedirectCheck);
    }
    // If its not a promise, we can call handleWithRedirectCheck directly
    return handleWithRedirectCheck(yielded.value);
  };

  // 2. Handling the iterator
  return handle(iterator.next());
};

View the source code in codesandbox

For now, I'm just playing with it, so if you have any idea how to solve this in a nicer way, definitely let me know. 😉

Thanks for reading

Let me know in the comments section how you feel about this generators series. If you love it, you know what to do! Share it with your friends and colleagues.

If you want me to cover some topics in the next post, DM me on here on dev.to or on twitter @phung_cz, or if you have any suggestions, feel free to comment below.

See ya next time and keep on hacking ✌

Have a look on what are we building @ Mews systems we are also hiring devs and people for other positions. DM me if you have any questions.

Understanding Generators in ES6 Javascript

Tuan Phung ⚡️ — Mon, 13 May 2019 22:48:00 +0000

Maybe you have heard about this feature in ES6 or you just didn’t have time to play with it.

It is something, that I have learned a few days ago and it's super cool.

Let me explain it to you in a few steps.

So Generators looks like a normal function, but it allows us to pause the execution of the function and continue it later.

So below you can see an example of the generator and we will break it down to see how it works:

function* avengersGenerator() { // Declaring the generator
  yield "Hulk"; // Pausing the execution
  yield "Thor";
  yield "Iron man";
  return "Ultron"; // Example of finishing the generator
  yield "Spiderman";
}

const iterator = avengersGenerator(); // Creating iterator

iterator.next(); // Iterating on the generator

Source code on codesandbox.io

Declaring the generator

Generators look similar to a normal function, the only difference is we have to define an * (asterisk) after the word function.

function* avengersGenerator() {
  ...
}

Yield it!

We can yield the function, which basically would stop the execution of the function when it gets to the first yield.

function* avengersGenerator() {
  yield "Hulk" // The execution would pause here.
  yield "Iron man" // When we resume we would start here.
}

Creating the iterator

On iterator, we can call. So by this, we will prepare our generator for action.

const iterator = avengersGenerator();

Next method

This enables us to continue the execution of the function. Also, this method provides us with the object with the yielded value and whether the generator has yielded its last value, as a boolean.

iterator.next(); // [1] Object {value: "Hulk", done: false}
iterator.next(); // [2] Object {value: "Thor", done: false}
iterator.next(); // [3] Object {value: "Iron man", done: false}
iterator.next(); // [4] Object {value: undefined, done: true}

Return / Exiting

Once a return is being called, it would finish the generator. It basically sets the done property to true.

function* avengersGenerator() {
  yield "Hulk";
  return "Ultron"; // Example of finishing the generator
  yield "Thor"; //  Sad Thor and Spiderman wouldn't be called
  yield "Spiderman";
}

iterator.next(); // [1] Object {value: "Hulk", done: false}
iterator.next(); // [2] Object {value: "Ultron", done: true}

In my opinion, generators are quite a cool thing to play with or at least to know what it does.

In the next post, I will explain, how generators helped me to solve one case at my work thanks to the possibility to cancel the promise when needed with generators in ES6.

UPDATE 1: I finally got some time to write another blogpost about generators, so here it goes 👉 Canceling promises with generators in ES6 Javascript

Thanks for reading

Let me know in the comments section how you feel about this generators series. If you love it, you know what to do! Share it with your friends and colleagues.

If you want me to cover some topics in the next post, DM me on here on dev.to or on twitter @phung_cz, or if you have any suggestions, feel free to comment below.

See ya next time and keep on hacking ✌