DEV Community: Filipe Pinheiro

Low-code remote-friendly “Codenames”

Filipe Pinheiro — Mon, 28 Dec 2020 21:32:08 +0000

Board games are a perfect activity to do among friends. And one of the games I played with friends before being forced into lockdown was Codenames. There are some online options, but I find that manual actions help keep people engaged.

Codenames is a game of guessing which words in a set are related to a hint-word given by another player (the spymaster). There are two teams, the red and the blue, one player in each group is the spymaster, and the others are field agents.

To play a remote-friendly version of the game, we need to have a map card accessible to the spymasters and a 5x5 word grid accessible to everyone.

How can I use online services to enable and facilitate my friends to play codenames, even in lockdown?

For the map card I took a picture of the physical cards and at the start of each round the spymasters pick a card and decide its orientation.

Since everyone can see the 5x5 word grid we decided to use Miro. When field agents try to guess a word we use the shape background color to represent an innocent bystander (yellow), an opposing agent, or the assassin (black).

We spend 3 hours on a video call playing codenames, and with this setup, we reduced our distance and had a lot of fun.

Enhancements

The setup works, but we can improve the manual actions when setting up a new round:

create a random map card
create a 5x5 grid with random words

Create a Map Card

The map card has seven innocent bystanders (yellow), one assassin (black), nine items for the starting team and eight for the other team. A map card is also a 5x5 grid that matches the grid of words.

To create map cards, I created a web application using:

svelte, a framework to build web apps I wanted to try for a long time;
tailwindcss, a utility-first CSS framework, so the outcome is pleasant to look at;
vercel to deploy and serve the static files of the web app.

You can see a deployed version of the application at https://codenames.fampinheiro.vercel.app/ and check the code on GitHub.

Create a 5x5 Word Grid

Miro fits the purpose of showing the 5x5 word grid. However, the manual process of creating the grid with random words is tiresome. Can we automate the creation of the grid?

Looking through Miro documentation, we can use web-plugins to "modify objects on the board". We could create a web-plugin that on-demand would create a random 5x5 word grid at the start of each round.

To create a new application on Miro you need to get a developer team and then on user settings apps agree to the terms and conditions and create a new app.

The relevant settings for our web-plugin are the web-plugin link and the OAuth scopes.

The OAuth scopes depend on the type of interaction you want to have with the Miro SDK, in our case we need boards:read and boards:write.

Miro Web-plugin Page

"Web-plugins are JS scripts that run on boards in isolated iframes. The JS code of a web-plugin communicates with the Miro application via PostMessage using the Miro SDK." (source)

In this case, the web-plugin page imports the SDK script and extends the bottom bar with a new icon. The new icon, when clicked, fetches new words and place them on the board in a 5x5 grid.

You can check the source code for the web-plugin page on GitHub.

The only thing missing to make our web-plugin functional is to create an API that returns 25 different words every time we make a request.

Vercel Serverless Functions

Since we are already using vercel the most straightforward way to create the api is using the serverless functions service. The API gets the first 25 words on a randomized list of words and return them.

How to Play

A spymaster generate a new map card here (the link is shareable)
Use the web-plugin on Miro to generate a new 5x5 word grid
Play the game use the shape background when field agents try to guess words
Go to 1

Thoughts

Although the solution described is not complicated, it shows you don't need to jump to a complex architecture, you can leverage several services to deliver value to your users.

Product development combines systems thinking and software development, and you can try to get feedback from your users "glueing" services and tools together reducing the unknowns and uncertainties.

You can take advantage of the no-code and low-code services and tools rising in popularity to fulfil the primary purpose of a product, solve its users' problem. Use your toolbox to deliver value to your users, iterate and improve the value your product provides.

Consider DynamoDB for your next project

Filipe Pinheiro — Fri, 05 Jun 2020 11:16:16 +0000

DynamoDB is a key-value store and document database managed by Amazon Web Services (AWS). Usually, we use it when implementing a caching layer or an application with a simple data-model that uses key-value lookups to fetch data. The next couple of paragraphs walk you through some strategies and patterns to use DynamoDB to store your relational data.
Here is a quote that can be seen on the Amazon DynamoDB page.

Amazon DynamoDB is a key-value and document database that delivers single-digit millisecond performance at any scale. It’s a fully managed, multiregion, multimaster, durable database with built-in security, backup and restore, and in-memory caching for internet-scale applications. DynamoDB can handle more than 10 trillion requests per day and can support peaks of more than 20 million requests per second.

Since the pressure on data storage doesn’t increase overnight, the performance of DynamoDB at scale wasn’t the major selling point to use it.
However, I started considering DynamoDB due to the benefits associated with serverless architecture:

Simple provisioning;
Pay-per-use pricing;
and, a straightforward connections to a database (no connection pools).

The rising curiosity led me to research more about DynamoDB and learn about the patterns and strategies you can use for a wide variety of use-cases. Overall, what contributed to a change of mind regarding this AWS service was the single-table design concept, a way to represent multiple entities and model a relational model.

Single-table design

As an example, let’s model an application where a user can write content and others can like it. An essential part of the process is to understand the data access patterns and the entities of your application as they are the primary resources to decide how to shape our data.

Data Access Patterns

Create a post (organised by topic)
User can like a post (one like per user)
List the posts on a topic with the total number of likes
View user and liked posts

Entities

Our application has topics, posts, users and likes.

Before we start to model our data access patterns and entities to our table, we need to know how to access data on DynamoDB. In DynamoDB to retrieve items from a table:

You can get an item;
You can query items;
Or, you can scan every item on a table.

Let’s start by modelling the topic and their one-to-many relationship with posts. Unlike an SQL database, there is no way to join data from multiple tables. Still, there are multiple strategies to model one-to-many relationships being one of them, the one that we use, pre-joining your data into item collections.

Pre-join your data

To pre-join our data we use a composite primary key in our table (a composite primary key combines a partition key and a sort key).
In our case the partition key (PK) and sort key (SK) of topics and posts looks like this:

Note: A ksuid creates a sortable unique identifier.

We can use the topic PK and the query API to get a collection of items with the topic and the related posts.

The previous query returns the item collection highlighted in the image.

Note: Notice the existence of a type attribute on every item. The attribute makes our life easier when reading data or when we execute ETL tasks.

We can model the relationship between users and likes the same way we did for topics and posts to cover the “users can like posts” and ”view user and liked posts” access pattern. We use the same PK and SK to model this relationship.

There is, however, another access pattern related to likes, “list the posts on a topic with the total number of likes” that we need to model. We can’t use the item collection strategy because likes are in the users’ item collection, and posts are in the topics item collection (even if we could, scanning every item and count them isn’t optimal).

In a relational database, you solve this joining multiple tables and counting the likes regarding a particular post, in DynamoDB doing a scan to get this information is a no-go due to the told on performance (as your application scales, it gets slower) and in your wallet. The solution is to optimize your reads and keep a counter on the posts using a DynamoDB transaction.

Transactions in DynamoDB

DynamoDB provides an API to create transaction when reading and writing items to your table. In our case we use a transaction when writing a like to a post:

Put a like item ensuring it’s not a duplicate;
Increment the number of likes in the post.

With the previous snippet, every post has a counter with the number of likes on an item attribute available with every post. By using a small number of strategies and patterns, we were able to model a relational database into DynamoDB.

Let’s add one more access pattern so I can introduce you to another pattern and unlock new possibilities:

View a post and list the users that liked it

We already overloaded our primary key, so we can’t use it to reflect this access pattern, although we can use a global secondary index.

Global Secondary Index

Global secondary indexes allow us to define new access patterns using a completely different key structure. In our case, we use a secondary index to create an item collection around our post and likes. Remember, we can set the same partition key, ensuring we retrieve the related item when using the query API.

Note: We prefix our global secondary index (GSI) and give it a number to better identify them.

To query the data we specify the index name and the partition key. The snippet below return an item collection related to the post we want to fetch.

Recap

Let’s recap our composite keys for our entities.

Entity convention for primary key and global secondary index.
Note: It’s an excellent practice to document how we map each entity into our indexes for future reference.
To model a relational model into DynamoDB and take advantage of its performance at scale:

We used a single-table design with a composite primary key;
We pre-joined our data into item collection so we could query related information;
We used transaction to ensure our entities had relevant counters;
We used global secondary indexes to query our data to fit different access patterns.

Our table can be created with the following snippet. Notice that we define every attribute we want to be part of the indexes but separate the key schema into different parts of the creation request.

Final Thoughts

In this post, we just scratched the tip of the iceberg about DynamoDB but in case you are using a serverless architecture, an event-driven architecture, a micro-service architecture, or a macro-service architecture consider DynamoDB in your next application. Consider using DynamoDB in one of the domains of your application, create defined boundaries and you can model one per table to keep them decoupled.

Some people raise concerns about vendor lock-in, but, is it even a real problem? Most of us rely on what we know to overcome the problem we are facing. If we are already using and invested in Amazon Web Services, the fear of lock-in shouldn’t be the reason for not giving a try to DynamoDB. If DynamoDB is a tool that allows us to deliver value and have an application live, let’s use it.

DynamoDB doesn’t clear you from knowing the entities of your application and the access patterns to fetch the data, but with the right patterns, you can have a fast and scalable database without the management burden and cost.

Website with Notion

Filipe Pinheiro — Mon, 16 Mar 2020 11:57:08 +0000

A personal website is an opportunity to share your thoughts with the world. It is your piece of the internet where others can learn a bit more about you. I consider myself an accomplished engineer with an eye for design. Still, I struggled for years to be comfortable with my website appearance. Last week one thought came to mind — Is it that important?.

Are the looks of a personal website that important for an engineer?

In my case, I believe the content is more significant than aesthetics. Notion has the basic building blocks so I can focus on the content without bothering about look 'n' feel.

Notion comes with some cons:

I can't optimise SEO;
The pages location is tied to the path Notion generates;
It's not simple to get insights on user behaviour and behaviour;
The line-height could be more spacious.

Are the cons a show stopper?

No. I was never the type of person to own a personal blog, not having a suitable site has been my excuse for the past years. Let's see where not having to worry about the looks takes me. Writing more is the minimum value proposition of this change.

What is Notion?

They describe it better than I do.

The all-in-one workspace for your notes, tasks, wikis, and databases.

But don't be fooled. This simple mantra doesn't come close to explain the awesome things you can do with the building blocks the fantastic team behind notion brings to you.

Checkout the result of a my website with Notion.

👋

Filipe Pinheiro — Tue, 20 Aug 2019 09:33:37 +0000