DEV Community: Moeki Kawakami

Integrating LLM into your Rails applications

Moeki Kawakami — Wed, 28 Jun 2023 09:02:18 +0000

LLM libraries are more prevalent in Python and TypeScript, and it seems that Ruby, which I will talk about this time, is still not as popular. However, I believe that a considerable number of people are developing applications with Rails and there is a strong demand to integrate LLM functionality into those applications. In the end, many people may feel that implementing LLMs with Python or TypeScript, which they are not familiar with, is not well-connected to their usual web development applications.

Current State of LLM Libraries (as of June 28, 2023)

First, let's summarize the current state of LLM libraries for Python and TypeScript, which are likely to have many users.

Python

TypeScript

Surprisingly, there are options for Ruby as well

Now let's introduce recommended libraries for Ruby.

Boxcars

BoxcarsAI/boxcars: Building applications with composability using Boxcars with LLM's. Inspired by LangChain.

Unlike Langchain, Boxcars offers a wide range of features for generating queries for LLMs, such as Google search, SQL, and ActiveRecord, rather than integration with a vector database. The experience of operating ActiveRecord with natural language is quite interesting.

Langchain.rb

andreibondarev/langchainrb: Build LLM-backed Ruby applications

This is an unofficial Ruby version of Langchain. It will eventually change its name, but for now, it is using this name. I am also involved in its development. In recent updates, integration with ActiveRecord has been added.

Hooks have been provided to update the data in the connected vector database in sync with updates on the ActiveRecord (RDB) side. For example, it looks like this:

class Product < ActiveRecord::Base
  vectorsearch provider: Langchain::Vectorsearch::Pinecone.new(
                 api_key: # ...
         environment: # ...
                 index_name: "Products",
                 llm: Langchain::LLM::OpenAI.new(api_key: # ...
               )

  after_save :upsert_to_vectorsearch
end

It's easy to imagine the integration with actual applications!

Baran

moekidev/baran: Text Splitter for Large Language Model (LLM) datasets.

Baran is a library I recently released for text splitting. Text splitting is quite common in the context of LLMs. It is an effective method to bypass the token limit of prompts and improve the accuracy of vector searches. For example, in Langchain, there is a module called Text Splitter.

Split by character | 🦜️🔗 Langchain

Baran is also used in Langchain.rb. It can split Markdown as well, and here's an example of how it works:

splitter = Baran::MarkdownSplitter.new
splitter.chunks(markdown)
# => [{ cursor: 0, text: "..." }, ...]

Although it may be an overstatement to use Langchain.rb just for text splitting, I created this library because there were situations where I wanted to perform text splitting.

ActivePinecone

moekidev/active_pinecone: ActiveRecord-esque base class that lets you use Pinecone. Enjoy development with LLM and Rails!

This is another library I recently released as part of the Active〇〇 series. It allows you to manipulate vector data models using an ActiveRecord-like interface.

For example, you can define a Recipe model like this:

class Recipe < ActivePinecone::Base
  vectorizes :title, :body
end

You can create and search for recipes with semantic search capabilities:

recipe = Recipe.create(
  title: "Hamburger",
  body: "...",
  author: "Kevin"
)

recipes = Recipe.search("How to make a hamburger")

recipes.first.title
# => "Hamburger"

It even comes with an assistant:

assistant = Recipe.assistant

reply = assistant.reply("How to make a hamburger)

reply.content
# => "OK！..."

reply.references
# [#<Recipe:0x000...>, ...]

It can be a fun experience!

Ruby's LLM contributions are still in progress

All these libraries have a relatively small number of contributors. As I mentioned earlier, personally, I believe that by promoting integration with Rails, we can increasingly enhance the compatibility with the applications developers work on regularly (although it may be more suitable for beginners). So I encourage everyone to participate and contribute!

Comparing Vercel Storage and Heroku

Moeki Kawakami — Mon, 15 May 2023 04:23:45 +0000

I tried Vercel Storage.

https://vercel.com/blog/vercel-storage

I compared it with an app that was running on Heroku.

It's Blitz.js, but please don't worry about that too much.

Diff

diff --git a/Procfile b/Procfile
deleted file mode 100644
index bc6eb1f..0000000
--- a/Procfile
+++ /dev/null
@@ -1,2 +0,0 @@
-release: npx blitz prisma migrate deploy
-web: npm run start:production
diff --git a/db/schema.prisma b/db/schema.prisma
index 0f8f549..3a35c9b 100644
--- a/db/schema.prisma
+++ b/db/schema.prisma
@@ -2,8 +2,9 @@
 // learn more about it in the docs: https://pris.ly/d/prisma-schema

 datasource db {
-  provider = "postgresql"
-  url      = env("DATABASE_URL")
+  provider          = "postgresql"
+  url               = env("POSTGRES_PRISMA_URL") // uses connection pooling
+  shadowDatabaseUrl = env("POSTGRES_URL_NON_POOLING") // used for migrations
 }

 generator client {
diff --git a/package.json b/package.json
index f6484ea..a1e0358 100644
--- a/package.json
+++ b/package.json
@@ -3,14 +3,13 @@
   "version": "1.0.0",
   "scripts": {
     "dev": "blitz dev",
-    "build": "blitz build",
+    "build": "blitz prisma migrate deploy && blitz build",
     "start": "blitz start",
     "studio": "blitz prisma studio",
     "lint": "eslint --ignore-path .gitignore --ext .js,.ts,.tsx .",
     "test": "vitest run --passWithNoTests",
     "test:watch": "vitest",
-    "prepare": "husky install",
-    "start:production": "blitz start --port $PORT"
+    "prepare": "husky install"
   },
   "prisma": {
     "schema": "db/schema.prisma"

Run migration with npm run build instead of Procfile
Replace with the recommended official env for Postgres URLs

Comparison between Heroku and Vercel

Comparison in this case.

	Vercel	Heroku
Migration	`npm run build`	`Procfile`
Deploy time	1m30s	4m
Performance	Good	Good
Pricing	Free (up to 1 Database)	$7.00 + $9.00

I didn't expect this comparison table to be realized.

Conclusion

It's nice. Keep up the good work, Vercel.

Should we use ORM?

Moeki Kawakami — Mon, 15 May 2023 04:20:17 +0000

Introduction

https://vercel.com/docs/storage/vercel-postgres

Upon the announcement of Vercel Postgres, I personally thought:

There will likely be more scenarios to use Postgres with Typescript
Started to become interested in the query builder called Kysely that Vercel provides as a wrapper
I've used Prisma before, but it can be difficult when dealing with complex queries
vercel/@postgres is a wrapper for pg. I want to question the premise of using a query builder or ORM in the first place

With these thoughts in mind, I decided to re-examine the ways to use SQL with Typescript in this article.

Components

Database Driver

Manually generates TCP packets and sends them to the database. It handles connecting to the database and managing the connection pool. At this level, you write raw SQL strings and pass them to the database, and receive responses from the database.

Examples:

Query Builder

Allows you to write SQL queries in Typescript.

Examples:

ORM

As the name suggests, it maps RDB records to application objects.

Examples:

Overall Flow

First, we will look at the opinions of those who use ORM vs query builders, and query builders vs drivers.
Thoughts
Practice

🙋‍♂️ Opinions of those who use ORM

Everyone is using it

There seems to be a lot of information out there. Is it due to ActiveRecord's contribution?

Easily switch databases

For example, if you are using an ORM that supports both Postgres and MySQL, you can "relatively" easily switch between the two (regardless of frequency).

ORM can convert object-oriented query methods to SQL

Applications are written in an object-oriented manner, so SQL can be written in that context
Focusing on describing the interface allows you to concentrate on business logic
It's impossible to manage database schema and objects (types) in a DRY manner

Mastering SQL strictly is difficult

Has robust transaction support
Guards against SQL injection vulnerabilities

Supports raw queries

This allows developers to also use raw queries as a means of writing queries.

Want to leverage the power of TypeScript

Autocomplete
Type checking

🙋‍♂️ Opinions of those who use query builders

Writing raw SQL is painful for dynamic queries

pg:

client.query(
  'INSERT INTO users(name, email) VALUES($1, $2) RETURNING *',
  [name, email],
  (err, res) => { /** .. */ }
)

Kysely:

kysely
  .selectFrom("users")
  .where("name", "=", name)
  .where("email", "=", email)

There are occasional queries that cannot be realized with ORM

There are queries that even the giant ActiveRecord cannot handle, and in the end, you have to write raw SQL.

Writing complex ORM descriptions can be inefficient (performance)

Kysely:

SELECT
  post.*, user.name AS user_name, user.email AS user_email
FROM
  post
LEFT JOIN
  user ON user.id = post.user_id
WHERE
post.category_id = ?;

Sequelize:

SELECT
  "category"."id", "category"."name", "user"."id" AS "user.id",
  "user"."name" AS "user.name", "user"."email" AS "user.email",
  "user->post"."category_id" AS "user.post.category_id",
  "user->post"."user_id" AS "user.post.user_id",
  "user->post"."unit" AS "user.post.unit"
FROM
  "user" AS "user"
LEFT OUTER JOIN (
  "post" AS "user->post"
  INNER JOIN "user" AS "user" on "user"."id"  = "user->post"."user_id"
) ON "category"."id"  = "user->post"."category_id"
WHERE
"category"."id"  = ?

Supports raw queries

This allows developers to also use raw queries when needed.

Want to utilize TypeScript's capabilities

Autocompletion
Type checking

🙋‍♂️ Opinions of those who use database drivers directly

Even if you learn a specific ORM or query builder, you cannot apply that knowledge across languages or libraries

For example, the descriptions are subtly different between Sequelize and Prisma, both Node.js libraries.

Sequelize:

const users = await user.findAll({ where: { name: "Kevin" } });
const user = users[0];
const id = user.dataValues.id;

Prisma:

const users = await db.user.findAll({ where: { name: "Kevin" } });
const user = users[0];
const id = user.id;

On the other hand, there are only a few dialects of SQL. By learning how to generate queries using raw SQL, you can easily switch between different languages.

Thoughts

What I felt

I don't want to learn ORM one by one
I want to be proficient in SQL
I want TypeScript to autocomplete
ORM doesn't reach the itchy spots

What I felt uneasy about

Transaction and SQL injection prevention when writing raw SQL
Wondering about the duplication of descriptions in the schema and type (object)

What I thought might not be a problem

Query builder specifications seem simple, so it's easy to learn

Preliminary conclusion

I want to try using a query builder
I still want to define the schema with Prisma

💪 Practical use of TypeScript (Kysely x Prisma)

For now, I'll define the schema with Prisma and write queries with Kysely!

There seems to be something like this, but I'll write it myself this time.
valtyr/prisma-kysely: 🪄 Generate Kysely types directly from your Prisma schema!

schema.prisma:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model User {
  id        Int       @id @default(dbgenerated("uuid()"))
  createdAt DateTime  @default(now())
  updatedAt DateTime  @updatedAt
  email     String    @unique
  name      String?
  posts     Post[]
}

model Post {
  id          Int      @id @default(dbgenerated("gen_random_uuid()"))
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  title       String
  body        String?
  user        User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  userId      Int
}

One thing to note here is the @default.
In Prisma, it's typically defined like this, but since this is a JS-based implementation, it will not be reflected in the actual database when inserting with Kysely.

@default(gen_random_uuid())

So, we'll use the SQL-based UUID like this:

- @default(uuid())
+ @default(dbgenerated("uuid()"))

Initialization of Kysely.
Here, we pass User and Post from @prisma/client to Kysely.

import { Pool } from "pg"
import { Kysely, PostgresDialect } from "kysely"
import { User, Post } from "@prisma/client"

interface Database {
  User: User
  Post: Post
}

const db = new Kysely<Database>({
  dialect: new PostgresDialect({
    pool: new Pool({
      connectionString: process.env.DATABASE_URL,
    }),
  }),
})

export { db as kysely }

Trying it out:

const posts = kysely
  .selectFrom("Post")
  .where("userId", "=", 1)
  .execute()

Summary

For now, I've tried leaving the schema and objects to Prisma and composing queries with Kysely. I'd like to try this for a while. If you have any additional information or advice, please let me know!

I have launched an AI Conversational UX Guide.

Moeki Kawakami — Fri, 28 Apr 2023 00:39:07 +0000

The proliferation of applications that use language models has caused application developers to consider the unknown conversational UX. This guide summarizes the characteristics of how language models behave in applications and provides guidelines for designing conversational UX.

uxaidev/AI-Conversational-UX-Guide: 💡 Guides, blogs and applications list for conversational UX

AI Conversational UX Guide - AI Conversational UX Guide

Idea: Converting from Relational Database to Vector Database

Moeki Kawakami — Sun, 16 Apr 2023 09:11:21 +0000

What is Vector Database?

Complex data is growing at break-neck speed. These are unstructured forms of data that include documents, images, videos, and plain text on the web. Many organizations would benefit from storing and analyzing complex data, but complex data can be difficult for traditional databases built with structured data in mind. Classifying complex data with keywords and metadata alone may be insufficient to fully represent all of its various characteristics.

Fortunately, Machine Learning (ML) techniques can offer a far more helpful representation of complex data by transforming it into vector embeddings. Vector embeddings describe complex data objects as numeric values in hundreds or thousands of different dimensions.

Vector databases are purpose-built to handle the unique structure of vector embeddings. They index vectors for easy search and retrieval by comparing values and finding those that are most similar to one another.

Vector Search is more powerful than structured data search with the rise of machine learning

With the release of the OpenAI API, tools such as Langchain, and vector database services such as Pinecone, the use of vector search has become much more accessible than ever before.

I see a lot of people starting to work with unstructured data in the past few months and experimenting a lot. So what about structured data?

The method introduced by LLM toolchains such as Langchain appears to be very simple, and that is to have the language model generate SQL queries. This looks amazing at first glance, but when you actually try it, it is simply like changing the SQL controller from wired to wireless, and the actual game image on the screen does not change at all. In other words, in contrast to vector search, which seems to return search results in a fairly natural way, relational database search seems to have been left behind by the times.

However, one can expect some people to say that they are structured for rigorous searches, and that it is not wrong to say that they do not respond adequately to natural language.

Is this really the case?

Main unstructured Document and the Time/Person associated with it

I think the documents and messages are the ones that suffer the most from this problem. This is because documents and messages themselves have a strong unstructured aspect, but they always contain information about when they were updated and who wrote them, so both unstructured and structured perspectives are necessary. I think this is related to the fact that ChatGPT confuses old and new information in some cases.

Of course, this is not so much of a problem when the document itself is likely to contain date and author information, as in the Web, but the problem is with internal documents and internal chats that are managed entirely in RDBs.

Proposed Solution

I have decided to take the following tentative steps to address this document chat issue. Embed relevant information in the text to be vectorized.

Title: {{title}}
Author: {{author}}
UpdatedAt: {{updatedAt}}
Body: {{boday}}

In my experiments, I was able to give reasonable answers to questions such as who is knowledgeable about which information and which information is correct.

This is a suggestion. I would like to hear your opinions.

Achieve streaming output like the ChatGPT mainframe

Moeki Kawakami — Sun, 09 Apr 2023 08:15:05 +0000

In this example, we use Langchain, but perhaps the original API alone can be used.

Welcome to LangChain | 🦜️🔗 Langchain

First, the server side.

import { ChatOpenAI } from "langchain/chat_models"
import { HumanChatMessage } from "langchain/schema"
import { CallbackManager } from "langchain/callbacks"

const api = (req, res, ctx) => {
  if (req.method !== "POST") return
  const input = req.body.input

  const chat = new ChatOpenAI({
    openAIApiKey: OPENAI_API_KEY,
    streaming: true
    callbackManager: CallbackManager.fromHandlers({
      async handleLLMNewToken(token: string) {
        res.write(token)
      },
    }),
  })

  await chat.call([new HumanChatMessage(input)])

  res.end()
})

The point is to enable streaming with streaming: true and write(). This is called Writable streams in Node.js and is enabled for files and responses.

When all the Langchain processing is done, we terminate it with end().

Next is the client side.

const reply = async (input) => {
  const decoder = new TextDecoder()

  const res = await fetch(ENDPOINT, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      input,
    }),
  })
  const reader = res?.body?.getReader()

  let output = ""

  while (true) {
    if (reader) {
      const { value, done } = await reader.read()
      if (done) break
      output += decoder.decode(value)
    }
  }
}

The point is getReader(). Also, we need to decode it, so we put that process in.

Hybrid of chat and document for your programming notes

Moeki Kawakami — Sat, 08 Apr 2023 06:43:08 +0000

Beta version of new documentation tool released.

https://www.ink-o.com

I have never been able to successfully use Notion or Evernote. Most of this is due to the difficulty in managing folders and files. For example, I sometimes end up at lunch time wondering if my daily notes should be separated by date or by topic. I would like to know how you all avoid these problems. It was difficult for me.

On the other hand, I find that I am very good at the flow of getting my thoughts out to chat tools like Slack. It often makes my work go much more smoothly. In Japanese, there is a reporting flow to manage, called "Minutes Reporting". What I do is practically the same as this, but in my case, I do it only to completely organize my mind.

However, most of the time, chat does not have the same high-level expression methods as markdown. For example, it lacks the functionality to leave code snippets or quotes.

So I came up with this hybrid of chat and documentation.
The idea came from my experience with ChatGPT, where you can use quite functional expressions while interacting with ChatGPT in a chat format. This was a great experience.

I also thought that with AI-based summary and search capabilities, perhaps the definition of information structures such as folders and files might be unnecessary.

We have not yet implemented AI support in this release, but perhaps that could make this tool more powerful. So I would like to solicit your ideas for this tool. We welcome your ideas in the following Github Discussions.

https://github.com/moekidev/ink-o/discussions

Trying Finch and introduce containerd

Moeki Kawakami — Thu, 01 Dec 2022 13:35:06 +0000

AWS announces Finch.

Introducing Finch: An Open Source Client for Container Development | AWS Open Source Blog

The author uses a Mac and uses Docker Desktop or colima x Docker CLI to realize a Docker development environment. Dcoker Desktop uses an internal HyperKit (macOS hypervisor) to launch a Linux VM and run dockerd in it. Docker Desktop is based on Lima, and it generates Lima configuration files, and it is used to run Linux.

Prepare Linux environment by generating Lima configuration file
Install Docker on Linux on Lima environment
Prepare an environment that allows transparent connection between Docker CLI on the host side (i.e., macOS side) and Docker on Linux on Lima

Docker development support is provided by doing the following. At this point, I was aware of Lima's existence, but the AWS article suggests that Lima itself is quite exciting.

What is the background behind Finch's announcement, i.e., the entry of Alternative Docker? To be honest, I have never actually used Kubernetes and am not familiar with it, so I recognized the story of Kunernetes quitting Docker when I started finding the following articles in the wake of this Finch.

Reference: Migration from Docker to containerd (NTT Tech Conference 2022 Presentation Report) | by Akihiro Suda | nttlabs | Medium

Looking at the details, it seems that Kubernetes used to touch Docker for managing containers on distributed environments, but in recent years, they started to use containerd directly.

!
https://speakerdeck.com/ktock/dockerkaracontainerdhefalseyi-xing?slide=7

Direct use of containerd? containerd? turns out I didn't know anything about container technology.
containerd was originally developed by Docker in 2015 as a daemon that provided basic container management capabilities under Docker. containerd's scope has gradually expanded and now seems to cover almost everything in the Docker Engine. For example, nerdctl is a CLI for containerd; the UX is almost identical to the Docker CLI, and Docker Compose is also supported (nerdctl compose).

Back to Kubernetes, according to CHANGELOG, there was a maintenance problem with Docker's Container Runtime Interface (CRI) called dockershim.

The kubelet uses a module called "dockershim" which implements CRI support for Docker and We encourage you to evaluate moving to a container runtime that is a We encourage you to evaluate moving to a container runtime that is a full-fledged implementation of CRI (v1alpha1 or v1 compliant) as they become available.

kubernetes/CHANGELOG-1.20.md at master - kubernetes/kubernetes

To summarize, containerd was born and derived from Docker and has expanded its own domain, containerd was chosen over Docker due to maintenance issues with Kubernetes, and there is now both a method and a reason to manage containerd directly. And against this backdrop, Finland's FinnServer has been gaining momentum. Before Finch, most containerd users would have used Lima directly.

In addition, the Finch article also mentions BuildKit, which should also be kept in mind. As before, I will focus on understanding the relationship with Docker. I remember myself, and I have seen things like DOCKER_BUILDKIT=1 docker build . I had a chance to see something likeDOCKER_BUILDKIT=1 docker build . This is a way to use BuildKit with Docker, which seems to have the following advantages over the Docker default build

Multiple stages of a build can be executed in parallel.
A mechanism (RUN --mount command in the Dockerfile) can be used to prevent sensitive information from being left in the build artifact (including cache)
Local files can be used for builds only
Remote files can be retrieved via SSH connection at build time
Build cache import/export
Distributed builds

I see. The build cache and parallel execution seem powerful, and I think we can assume that these features are available by default in Finch.

Now that you understand the significance of Finch, let's actually use it.

brew install finch

First, I tried to set up the configuration of finch, following the README as follows.

~/.finch/finch.yaml:

cpus: 8
memory: 8GiB

And initialize vm.

finch vm init

Now vm is up and running.
Next, we'll use Docker Compose, as well as the Docker CLI and nerdctl.

finch compose up

Here, I encountered some differences in behavior between Docker and containerd.

First, the abbreviated description of port was invalid.

  db:
    ports:
-     - 5432
+     - 5432:5432

The other error occurred when I tried to read a file outside of the context. This time, I had to change the location of the file.

  app:
     volumes:
-      - ~/.gitconfig:/root/.gitconfig
+      - ./.gitconfig:/root/.gitconfig

Other than that, it was the same as with Docker.

The above mentioned Finch helped me to deepen my understanding of containerd and technologies around containers. I feel that I will be able to catch the tide by gradually migrating to Finch in the future.

Technological selection is rhythm game!

Moeki Kawakami — Thu, 24 Nov 2022 11:50:42 +0000

I've been reading and learning a lot lately about technology selection from different teams.

There are many differences in technology selection between teams, one of which is how advanced they are.

Progressive vs Conservative

Whenever we talk about technology selection, it's always a hot topic.
Often the argument is, "It's too early to use this," or "Isn't this already out of date?" or "Isn't it too old?

In reading various articles about technology selection, I have found myself thinking.

What are the criteria that make you feel you are too advanced or too conservative in selecting a certain technology?

I'd like to dig deeper into this question.

What kind of technology selection do I consider too progressive?

For example, when I feel that a certain technology adoption is too advanced, it is when

Rudimentary PR or issues are accumulating.
I don't see any blogs out there that have tried it.
I read the documentation and there are too many new concepts to understand.

All these senses are relative and have to be compared with other libraries and frameworks, but I understood that rather that is the point.

What kind of technology selection do you feel is too conservative?

On the other hand, I feel too conservative in the following cases

PRs and issues are left unaddressed
A completely upwardly compatible library is being promoted.
The date of publication of the blog where you tried it is already long ago.

Choosing which UI to adopt may be a similar story

What is an easy-to-understand UI? I often ask myself, "What's the most common UI? This is because users do not use only our products. They use various applications in their daily lives and learn how to use computers on a daily basis.

In that context, old UI.

Black phone crux.
Floppy disk save symbols (do they still exist?)
scuumorphism (is this still around?)

and unseen UI will confuse users.
As well as avoiding these, we felt that we needed to follow other product and industry trends in technology selection.

Rhythm of Technology

Get into the rhythm of technology. Don't be too late or too early.

That's because technology is social.

How do you get into the rhythm of technology?

Dive into the actual library and language community
- Look in the repositories.
- Ask lots of questions.
- Contribute to things you like
Communicate with other teams
- Conferences
- Technical blog
- Hear about failures

I guess this is about right. Well, it's obvious, but you may need to pay attention to the following points.

Things that have nothing to do with the rhythm of technology.

My own impression

The feeling of touching the technology by yourself may possibly not be reliable.
Even if a framework is pleasant to touch for you, it may not be so for the world, and it may pass away as it is.

Innovativeness of the technology

If we can use that technology to solve all sorts of problems! but if the community is not fully developed, security risks and bugs may be addressed too late.

However, there are cases where too advanced or too conservative a choice is a good one.

I remember back in the day when Apple adopted flat design with iOS7 and got a lot of flak for it.
However, as is the case with many of the policies that Apple has advocated, flat design has become an airy UI that has somehow made its way into the world.
I think this is because Apple is a platformer. Platforms should work on challenging technologies that can break through the status quo and are easy to work on.

Conversely, there are times when too conservative a choice is a good one. On the other hand, there are times when being too conservative is a good choice, such as when a very high level of safety is required. For example, the cockpit of an airplane should be improved slowly and for a long time, because a new UI might cause confusion.

I think this is also true for technology selection. There are cases where exceptional choices should be made if safety is required or if it is a platformer of some kind.

Conclusion

Technology selection should be done according to the rhythm of the world.
Actually, the same can be said for UI.
There are cases where exceptional choices should be made.

Thank you.

Small effects of A/B testing on small websites

Moeki Kawakami — Tue, 15 Nov 2022 22:43:42 +0000

I have done A/B testing in my work. My impression after doing it is that A/B testing is very delicate and intricate, so it is very difficult to handle. I think there is a high possibility of failure. In this article, I would like to discuss why A/B testing is so difficult.

A/B testing is a method of testing two sites by delivering a pattern of appearance and functionality to a specified percentage of users, to see which pattern is more likely to achieve a given goal. The goals are, for example, page transitions, button clicks, conversions, etc. This is expected to be set appropriately depending on where the A/B test is conducted.

It is important to note that A/B testing can only tell us what is likely, it does not mean that the results will always be better when we actually release the product.

Now that I have given you an overview, I will talk about why this A/B testing is so difficult. First of all, let's talk about goal setting. For example, let's say you want to test a link that takes you to a form, and you set the number of times the link is pressed as the target value. At this point, it is important to note that even if the link is pressed more often in Pattern B, it does not necessarily mean that the number of completed conversions will be higher. In A/B testing, the business-critical metrics that you do not want to lower by making changes, such as the number of completed conversions, are called guardrail metrics.

A possible reason for the actual release of a pattern that performed well in A/B testing but did not affect conversions or had a negative impact is that this guardrail metric is being ignored.

Of course, it is best to set the final goal, the conversion completion rate, as the target for A/B testing, but there may be cases where the population of conversions is too small to test because the differences in goals are not significantly comparable. This is where guardrail metrics come into play, which is ultimately the same as setting the conversion completion rate as the A/B test goal. In other words, A/B testing will not work if the number of inflows and conversions are considerably low.

I believe this phenomenon often occurs with site changes themselves to begin with. For a website with a clear goal, such as an landing page, you should design the story of how the user achieves the goal. This is very important from a macro perspective.

If the number of inflows and conversions are low, we believe it is more effective to make changes to the story, such as fewer pages or a richer main visual, rather than small changes such as button decorations or wording.

Attaching database to static site on Next.js and Vercel

Moeki Kawakami — Tue, 08 Nov 2022 03:05:12 +0000

I recently added a like button to my website.

In the past, if I wanted to add a little database processing to a static website, I either had to change the app implementation from a static site generator to a server-side framework like Ruby on Rails, or I had to have another DB server and hit API. Site functionality affected the entire architecture.

However, this experiment made us realize that Next.js and Vercel have a very application-first philosophy that can extend the functionality of a website without major architectural changes.
This is largely due to the fact that Vercel is able to receive the Rest API with Serverless Function.

Let's see.

First, we will implement the UI.

import { useState } from 'react'
import { MdThumbUp } from 'react-icons/md'

export default function Component(props) {
  const [likeCount, setLikeCount] = useState(props.likeCount)
  const [liked, setLiked] = useState(false)
  const createLike = async () => {
    if (liked === false) {
      // TODO: create like
      setLikeCount(likeCount + 1)
      setLiked(true)
    }
  }
  return (
    <>
      <span className={liked ? 'text-blue-500' : undefined}>
        <span
          onClick={createLike}
          className="ml-4 mb-4 align-bottom cursor-pointer inline-block bg-white border-2 border-gray-800 rounded-full px-4">
          <MdThumbUp className="inline mr-2" />
          {likeCount}
        </span>
      </span>
      <span className="inline-block ml-4 mb-4 align-bottom">
        {liked && <span>Thank you!</span>}
      </span>
    </>
  )
}

Where the DB is concerned, TODO: create like

  const createLike = async () => {
    if (liked === false) {
      // TODO: create like
      setLikeCount(likeCount + 1)
      setLiked(true)
    }
  }

and likeCount.

const [likeCount, setLikeCount] = useState(props.likeCount)

Now, we will prepare PostgreSQL and Prisma, an ORM made with Node.js.

yarn add prisma

This is prisma/schema.prisma, schema file.
Like model is very simple.

// prisma/schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Like {
  id    Int     @id @default(autoincrement())
}

And we will generate and aplly migrations.

yarn run prisma migrate dev

Next, we will generate prisma client to access database.

yarn run prisma generate

Then, we will implement the part that actually accesses the database.

If you export a function called getServerSideProps (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps. So, we get like count on here and set props.

// pages/index.js

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

export default function Home(props) {
  //...
}

export async function getServerSideProps(context) {
  const likeCount = await prisma.like.count()
  return {
    props: { likeCount: likeCount }
  }
}

Then the update part of like. We will create post endpoint to create a like record

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

export default async function handler(req, res) {
  const like = await prisma.like.create()
  res.status(201).json(like)
}

and add the fetching process to callback.

  const createLike = async () => {
    if (liked === false) {
      fetch('/api/like/create')
      setLikeCount(likeCount + 1)
      setLiked(true)
    }
  }

This concludes the implementation part.

Next, let's set up Vercel to use Prisma and prepare a PostgreSQL server.

I have a PostgreSQL server at render.com.

Cloud Application Hosting for Developers | Render

Prisma has put together a method for deploying to
Vercel, so I will try to follow this.

How to deploy a Prisma app to Vercel

// package.json

{
  "scripts": {
    "vercel-build": "prisma generate && prisma migrate deploy && next build" 
  }
}

Then, we will environment variable for Prisma to Vercel.

render:

Vercel:

That's it!

We were able to add DB-based functionality to our site without major architectural changes. It was a very freeing development experience, and I think I understand a little bit of what Next.js and Vercel are trying to do.

Thank you for reading.

Portfolio with more than just technical content, vision and values

Moeki Kawakami — Sun, 06 Nov 2022 13:59:01 +0000

In this post, I will discuss my policy for updating my website.

https://moeki.dev/

It was to let visitors to my website know what I have in mind when I'm developing.

What I want people to see on my website are the people they may work with in the future or the people they work with in the community on a daily basis. What they really want to know is if I am someone they can be with and be inspired by.

My technical interests and skills do not tell you what I am thinking. So I put my vision and values on the website.

Technology for Living Your Own Way

I have been saved by technology. However, it has not saved my life or solved my problems. It has nurtured my creativity. Photography, music and software. Without computer technology, I would never have been able to actually put the ideas in my head into reality. It was a world where we could show our photos to many people without exhibition, and where we could make music without playing an instrument. I want to give back to computer technology.

In describe of my vision, I have included the story of how I came to it. Maybe someone who reads it will have a similar story and relate to it. Others may disagree with my view of technology. But that's okay. I wanted the website to have a role in communicating my character to visitors. I would be very happy if visitors took some kind of action (whether like or dislike). Also, knowing someone's vision allows us to discuss the vision behind a particular action instead of just criticizing it.

My Five Values

Starting with myself to improve my team

Starting with my neighbors to create a culture

Making minimal product first to get feedback

Looking at our daily development

Solving our own problems in our own way

"My Five Values" proclaims to visitors the way I work. It is important to know what kind of work style the people you work with prefer, because there are a way of working that suits some people and not others. It allows you to acknowledge and accept that your team's values and your personal values may not be perfectly aligned.
For example, when matching a team with an individual, the most important thing is to strongly identify with each other's values and to acknowledge that our values will never be in complete agreement with each other.

Technical interests and skills may perhaps be important in a temporary business exchange. I am not saying they are not important at all, and I love technology. I also have a strong desire to share it. But don't limit the content of your portfolio website to just that. Find people who not only trust your skills, but who share your way of working.

Thank you for reading.