In my day job I mainly code in Typescript, but every now and then I like to use python to parse some data and automate some stuff for me. I’m writing this guide as a future reference for myself and beginners who had never used pandas or PIL before.

I recently bought a board game here in Taiwan and it came with cards written in Chinese. I get together with friends from different countries and many of them can’t read Chinese so I decided to translate the cards. Luckily, there’s this amazing website for board game nerds called 

, that has a huge database of board games and people can upload files and other information related to the games. There I found an excel spreadsheet with all the cards in English.
I decided to parse the spreadsheet and generate labels for the cards so I could paste on top of the original Chinese text, here is how I did it.

  a super popular library for Python. I installed it using:

Now I need to parse the data in the spreadsheet into a 

, an array of dictionaries, containing the data for each card.

With pandas the first row of each column will be the column title, and you can access the column like this 

, so in my cards spreadsheet I can access the Name column by using 

However I also need to parse the cards row by row, so I will use pandas 

 method to loop through each row and add the card data to the card List like this:

That’s all the data we need from the spreadsheet, now we need to generate the labels.

We will use another highly popular library for generating the translated labels for the cards, it’s called 

modules.We will first set the fonts that we will be using and the image size in pixels, I used different fonts for the card’s name, type and ability fields:

 function to render the image, we will use the Image.new method to create the image, passing a color parameter to define the image’s background color. After we will use the 

module to draw a rectangle outline around the image and to render the text:

 property can have texts that are longer than the image’s width and the PIL library doesn’t handle multi-line text by default. So I did some searching and found a 

 from a question on Stack Overflow, we will need to import Python’s inbuilt 

, as well as the text to be rendered, the font to be used, text color and the text’s starting y-axis position relative to the image height. The function will then render the text lines using textwrap’s 

 method, which takes a width parameter that is the max number of characters per line. We will then render each line using the ImageDraw’s 

So now we just need to add the multi-line text function to our 

 method to save the image, setting the resolution and quality parameters:

This was my final result after I printed and glued the labels on the cards :

You can check the final code for this project 

Parsing spreadsheets and generating images with Python

 I explained how to use Vercel’s Image OG to generate images through API requests, I used it to dynamically generate thumbnails for blog posts. Now, in this last part I’ll quickly explain how to add the meta tags to your website and make sure they display properly.

In Next.js we put our meta tags inside the inbuilt Head component. We just need to import it in our component and put the meta tags in between like this :

In my case I’ve decided to put the Head component inside a Layout component, which carries layout that is consistent throughout all the pages of my blog, I added an 

that will later be passed to the OG API. Here is an example with the image meta tags I use :

As you can see we need to define the image’s URL, in the previous part we created our api endpoint at ‘api/og’ therefore we should specify the URL accordingly:

I added a condition to check the environment I’m running the app on, using localhost if in the development environment. I also added checks and fallbacks in case no title or no emoji was provided.

Now, we just need to pass the ogImageData props whenever the Layout component is used, in my post component it is used like this:

If we deploy our website now everything should be working, however if you try to post a link on social media you might not see your image yet, this can happen because the social media network’s 

might have already cached and older version of your website. To ensure your social media cards are displaying you can check the network’s own social media card debug tools:

In this blog post, we will learn how to add social media cards to our Next.js website by adding meta tags to the Head component. We will also use Vercel's Image OG to generate images through API requests and use them as thumbnails for our blog posts. Finally, we will cover how to deploy our website and use social media debug tools to ensure that our social media cards are displayed correctly.

Adding Social Cards Images to your meta tags in Next.Js

A binary tree is a tree data structure in which a node has up to two children nodes, left and right. The first node of a binary tree is usually called root, and the nodes that have no children are usually called leaves. The number of levels in a binary tree is usually called height.

There are many classifications for binary trees, for example a perfect binary tree is one where all nodes have two children except the last leaf nodes, a balanced binary tree is one where the difference in height between the left and right subtrees is not greater than 1 level. In Leetcode, most of the binary tree questions deal with Binary Search Tree, which are binary trees where the left child always has a lesser value than the node itself, and the right child always has a greater one.

In this article, I want to summarize some of the algorithms used for solving binary tree questions:

Depth First Search, or DFS, is an algorithm to traverse (to visit) all the nodes in graph-like structures. DFS traverses a binary tree vertically, checking all the nodes along one branch from the root to a leaf before backtracking to explore other branches. This approach allows DFS to fully explore the depth of one subtree before moving to another. It’s a common algorithm for traverse graphs, it uses a stack to add the nodes to be traversed and keeps a list of visited nodes to avoid visiting the same node twice, however since binary trees don’t have cycles, we don’t need to keep track of the visited nodes :

In here we are adding the values of every node in the tree to an array and returning it.

The order we add the nodes to the stack define the kind of traversal : 

The current algorithm we have performs a preorder traversal, it follows the order 

 to visit the nodes in the tree, meaning that the root node is visited first, than the left node and its subtree, then the right node. However, for easier understanding and readability, it’s much better to use a recursive approach :

In inorder traversal, we traverse the tree sweeping from the leftmost node to the right, following the order 

 so we need to change the order of our recursive calls:

In the resulting array, everything to the left of the root value belongs to the left subtree, everything to the right of the root belongs to the right subtree

In postorder traversal, we visit the nodes following the order 

, so we need to adjust the order of our recursive calls, once again :

In this way, in the result array, the root will be the last item.

Breadth First Search, or BFS, is an algorithm that traverses a graph-like structure by visiting a node’s closest neighbors first. In a binary tree BFS traverses the tree level by level using a queue data structure to keep track of nodes at the current level before moving to the next. This level-order traversal is useful for applications that need to process nodes layer by layer, such as finding the shortest path, calculating distances, or gathering nodes at each depth.

In this article, I want to summarize some of the algorithms used for solving binary tree questions

Algorithms for solving Binary Tree questions

 you have to work with multiple remote git accounts in one Windows machine, like GitHub, GitLab or BitBucket, here is how you can use SSH keys to always have access to pull and push from a specific repository.

To be able to use different accounts in your computer, we will set up some 

Go to the folder .ssh inside your Windows user folder, located at 

Generate a SSH key by typing this command :

Make sure you replace it with your own email address.

Your SSH key will be stored in a folder inside your Windows user directory like

Choose a name for the file to save the SSH key into:

You can just press enter and leave the passphrase empty :

You should see the ssh key file in the folder:

file with Notepad or VS Code and copy the ssh key from it. It should look something like this:

Login to where your git repository is hosted (here we are using GitLab) using the account you want to use the

with and add it to your profile, in GitLab click on Edit Profile, in Github the SSH keys are found under Settings:

Paste your SSH key, in Gitlab you will also need to set an expiration date(after this date the SSH key will become invalid and you’ll need to create a new one):

Now go back to the .ssh folder in your computer and open the config file with notepad or vs code, if the file does not exist just create a new file named config, without any file extensions. Inside the file let’s add a special host name to use our SSH key when using that GitLab account :

The IdentityFile is the path to your ssh key.

8.Clone git repository using the custom host

Now we are ready to use our ssh to clone in any repository associated with that account, all we have to do is to edit the SSH address of the repo to include our custom host, like this :


If you have already cloned the repository you can update the remote URL to your new host by running this command :

Using different Gitlab accounts

 that generates dynamic images that you can embed in your meta tags, the so called social cards, or for any other use really, your imagination is the limit and it’s really easy to set it up in Next.js.

How to set up Vercel OG in a Next.js project

First we start by installing the library :

Then we will need to create a new API endpoint, we can do that by creating a file inside an API folder in the pages folder:

I’m using Typescript here but if you want to use JavaScript only make sure to name your file 

In this file we need to declare a handler function that handles the API request, inside it we will return the 

function will take two parameters one is a React component that returns JSX, and the other is an options object, styles have to be inline and not all HTML elements and CSS properties are supported, you can check a list 

For defining the layout of your image I suggest you use Vercel’s provided 

and adjust the layout to your liking. My Images will accept emojis and text as parameters:

Once you are happy with your design you can then bring your HTML to your 

 file and adjust it accordingly, in my case I wanted to make the emoji field optional, so I added some conditional checking to adjust for its presence or absence:

However I want to use a custom font for my title and for the background I would like to render a random icon, which also comes from a font, generated with 

To generate a font we need to fetch it asynchronously, like this :

Then we will need to load it inside our function and declare it in our 

property that receives an array. This is the final code :

Et voilá! If you run your project locally, you should be able to generate your image by hitting the API at 

In the next part I’ll show you how to update your headers and meta-tags so social media like Twitter, Facebook and LinkedIn will display your image.

How to build an API that uses Vercel OG to generate images in Next.JS

Writings

Parsing spreadsheets and generating images with Python

Adding Social Cards Images to your meta tags in Next.Js

Algorithms for solving Binary Tree questions

Using different Gitlab accounts

Generating images with Vercel OG and Next.js