
I ordered MacBook Pro 14" (M1 Pro, 2021). This post explain the reason why I choice it. Let's go.

## My current machine

It is MacBook Air M1 8GB of RAM. I didn't use container environment and need more 8GB of RAM. I want to try M1 Mac's high speed swapping.

## Mac vs Linux, Windows

I love Apple's hardware. For example, trackpad, keyboard, camera, display and speeker of Macbook. So, I choice Mac. MacBook have all function of computer. ProMotion have 120Hz of refresh reate at most!

## MacBook Pro M1 Pro vs MacBook Air M2

I like MacBook Air's light weight body and long battery. But MacBook Air M2 doesn't have 32GB of RAM version. I verified how many RAM is used in work (Docker, Chrome and VSCode). The result is about 20GB. So I wanted buy a 32GB model to afford it.

## M1 Pro vs M1 Max

M1 Max is not required. Compared to the M1 Max competitor it is more expensive.
And the M1 Max power supply is 96W. It is too big for me.


Ordered MacBook Pro 14" (M1 Pro, 2021)


Recently, I considered Astro indeed of Next.js as a blog implementation tool.

What I wanted to focus on most is UX. Which is a more comfortable way to browse pages?

Therefore, I verified their docs because the pages are implemented with their product.

- [Getting Started | Next.js](https://nextjs.org/docs/getting-started)
- [Getting Started 🚀 Astro Documentation](https://docs.astro.build/en/getting-started/)

The answer was very clear. I agree with Next.js docs, single page site. It's very comfortable. In Astro documentation, the first page load is quickly, but it is slowly when I click links. Next.js documentation is continuously light.

Finally, I decided that my blog is implemented with Next.js in the future. I made my decision based on my experience with the framework documentations. Will single-page sites become the standard? Or will the multi-page sites survive as a necessary and sufficient design?


Will single-page sites become the standard?


AWS announces Finch.

[Introducing Finch: An Open Source Client for Container Development | AWS Open Source Blog](https://aws.amazon.com/jp/blogs/opensource/introducing-finch-an-open-source-client-for-container-development/)

The author uses a Mac and uses Docker Desktop or [colima](https://github.com/abiosoft/colima) x Docker CLI to realize a Docker development environment. Dcoker Desktop uses an internal [ HyperKit](https://github.com/moby/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](https://medium.com/nttlabs/docker-to-containerd-4f3a56e6f2b6)

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](https://containerd.io/) directly.

![](https://miro.medium.com/max/1400/1*HL7tRfSRwv8fLleLRDvDXQ.webp)
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](https://github.com/containerd/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](https://github.com/kubernetes/kubernetes/blob/master/CHANGELOG/CHANGELOG-1.20.md#deprecation)

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](https://github.com/moby/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 like `DOCKER_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.

```yaml:~/.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.

```diff yaml:compose.yaml
  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.

```diff yaml:compose.yaml
  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.


Trying Finch and introduce containerd


I listened to this one and found it informative, so I summarized it here.

[29. The Aesthetic of Technology Selection (2) w/ twada | fukabori.fm](https://fukabori.fm/episode/29)

The overall story was that computing is developing and that the trends of distributed computing and centralized computing have been coming and going, and he summarized this broad historical trend.

The author's assumption is that he has been involved in the industry since 2019.

In this article, I will dig deeper and look at the terms in more detail.

## Good Old Web

First, we're talking about business systems and such using [Visual Basic](https://ja.wikipedia.org/wiki/Visual_Basic) and SQL servers. This was around 2000. It was described as a two-tier architecture, i.e., screen and SQL only. I thought this was somewhat similar to the development experience of [Next.js](https://nextjs.org/), which blurred the boundary between the server side and client side and made it look like a two-tier system.

Next, I heard that @t*wada had developed a monolithic [LAMP(Linux, Apache, MySQL, PHP)](<https://en.wikipedia.org/wiki/LAMP*(software_bundle)>) real estate search service. I heard that @t_wada had developed a real estate search service using I had heard of LAMP, but this was the first time I heard of an actual case study, so it was new to me. It was a time when browsers were doing a simple job of displaying HTML rendered by PHP. At the same time, not only PHP but also [Java Servlet](https://ja.wikipedia.org/wiki/Java_Servlet) and others were mainstream. This was around 2002.

Here, **there was a transition from a two-tier architecture of Visual Basic and SQL to a three-tier architecture with LAMP**. This is the beginning of the flow from centralized computing to distributed computing. And the trend toward distributed computing was further strengthened in the next section.

## Distributed Computing with EJB (Enterprise JavaBeans) and SOAP (Simple Object Access Protocol)

Business systems were complex and had many reusable parts, so there was a demand to connect multiple systems.

[EJBs (Enterprise Java Beans)](https://ja.wikipedia.org/wiki/Enterprise_JavaBeans), which are components that implement some kind of business logic, have appeared in the context of solving the above problems. EJB (Enterprise Java Beans)]() is a component that implements business logic.

[SOAP (Simple Object Access Protocol)](<https://ja.wikipedia.org/wiki/SOAP_(%E3%83%97%E3%83%AD%E3%83%88%E3%82%B3%E3%83%AB)>) is an implementation of the [XML](https://ja.wikipedia.org/wiki/Extensible_Markup_Language) based [RPC](https://ja.wikipedia.org/wiki/%E9%81%A0%E9%9A%94%E6%89%8B%E7%B6%9A%E3%81%8D%E5%91%BC%E5%87%BA%E3%81%97) protocol. It allows processes running on different languages and operating systems to communicate with each other via XML. Eventually, the specification became less and less simple, and there was an interesting statement that SOAP is not an abbreviation for Simple Oriented Access Protocol.

These ideas are based on the [SOA (Service-Oriented SOA (Service-Oriented Architecture)](https://ja.wikipedia.org/wiki/%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E6%8C%87%E5%90%91%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3) SOA refers to the construction of an entire system by considering software functions that correspond to a single business process as services, and linking these services together over a network. This has been reaffirmed with the rise of cloud computing. Specifically, if software is configured in units equivalent to a single business process and service interfaces are defined using open and standardized technical specifications, it is considered SOA.

[What is Service Oriented Architecture? Service Oriented Architecture Explained - AWS](https://aws.amazon.com/jp/what-is/service-oriented-architecture/)

## The Impact of Ruby on Rails' Transition to Monolithic

I didn't know much about [Ruby on Rails](https://rubyonrails.org/) when it first appeared, but I was convinced that it would be a shock if they released a video on how to create a blog in 10 minutes. I'll post the YouTube video that was also posted in the "Show note" page.

[(1) Ruby on Rails demo - YouTube](https://www.youtube.com/watch?v=Gzj723LkRJY)

In his talk about distribution and concentration, he mentioned that the key point of Ruby on Rails was "**Convention over Configuration**".
One of the major problems with SOA-based EJBs and SOAPs is that you have to write a lot of configuration **even though the configuration is meant to reflect a fixed set of commitments**. Ruby on Rails stood as the antithesis of that.

In fact, even in the pre-Ruby on Rails era, [Spring Framework](https://ja.wikipedia.org/wiki/Spring_Framework) and [Seasar](https://ja.wikipedia.org/wiki/Seasar), but these frameworks were also influenced by Ruby on Rails after its debut and were designed based on conventions.

## Web-based distributed systems

Ruby on Rails, a monolithic framework, was born out of the idea that distributed systems are difficult to implement.
**However, I realized that there was a successful distributed distributed system around me. That distributed system was actually the World Wide Web. **
The design of distributed systems began to shift from RPC to Web-based. Together with [Ajax](https://ja.wikipedia.org/wiki/Ajax), architectures for server-client and server-to-server interactions using JSON began to increase. In addition, with the advent of cloud computing, container technology, and continuous delivery, the trend toward distributed systems such as microservices has come around again.
Furthermore, the shift from server-driven API definitions to client-driven API definitions, symbolized by [GraphQL](https://graphql.org/) and [gRPC](https://grpc.io/), has reinforced the realization of microservices. From this point of view, GraphQL certainly emphasizes the lack of agreements between the server side and the client side.

## Impressions

There were a lot of things I didn't know, and I think it clearly reinforced my impression of ongoing technologies.
I would like to study spirals from other perspectives.


Spiral of decentralized and centralized


Recently, I have been reading and learning about the technology selection of 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, **good 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 the 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 and can tackle challenging technologies that can break through the status quo.

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.


Technological selection is rhythm game!


Have you ever had this experience: you pick up your iPhone, go to the home screen and say, "Huh? What were I trying to do?" . Simply put, the use of the iPhone has become **self-purposeful**. The iPhone was originally intended as a means to do something fun, but now it has become an end. Why is this happening? In fact, there is a secret in the applications you get from the store. **Twitter wants you to see ads, Netflix wants you to watch more videos, and Uber Eats wants you to order more food.** If you don't use it, they will delete your app or terminate your contract. When I first learned this secret, I bemoaned the unhealthy revenue patterns of the Internet world, but I am gradually realizing that this is not a recent phenomenon. It turns out that this is not a problem unique to the Internet, **but rather the nature of technology itself**. Technology has a proliferating system.

Indeed, the statement, "If you don't use it, they will delete your app or terminate your contract," could be applied to other technologies as well. Unbeknownst to us, it seems that private cars and public transportation are fighting each other for customers. Private car commercials tout how great it is for your life to be able to drive the way you want, while public transportation counteracts this with environmental concerns and safety. When you go to the dealership for an inspection, they talk about the next car you should drive and make appeals about how fuel-efficient your new car is. People who are already driving cars can no longer stay away from them. Attention is demanded.

- **Inducing Demanders to Use Technology**
  - Product and marketing design
  - Maintaining social relationships with other demanders
  - Attraction of relationships with suppliers

On the other hand, suppliers also cannot help but use technology. The world is flooded with applications for food and beverage chains that are not very useful. Companies will not be able to escape new initiatives due to the clever presentations of those promoting DX and the new applications of their competitors. In addition, companies promoting DX must be fascinated by the fun and potential of digital technology itself, and itch to spread it to the world. In summary, the following factors are likely to be at play

- **Inducing Suppliers to Adopt Technology**
  - Competition among companies
  - Sales by developers
  - Interest in the technology itself

I see. Putting these two aspects of demand and supply together, we can certainly imagine that technology has a proliferative nature. When a new technology is invented, such as printing, electrical signals, or engines, it tends to replace existing methods from one end to the other.

| Technology         | New Service/Media | Existing Service/Media |
| ------------------ | ----------------- | ---------------------- |
| Printing           | Reading           | Oral tradition         |
| Electrical signals | LP                | Concerts               |
| Engine             | Car               | Carriage               |
| Computer           | Streaming         | Movie Theater          |
| Internet           | SNS               | Business Cards         |

The pattern in which the use of technology-based services/media other than the Internet, such as SNS and Google, is self-purposed can also be seen. For example, driving, LP collection, reading pride, etc. These are examples of how the demand side is guided by the use of technology, which is also common to technologies other than the Internet. On the supply side, if a label's competitor releases a new LP, they will have to do the same to compete.

I see two problems with this obsession with technology on both the demand and supply sides.

1. **excessive replacement of technology**
2. **addiction due to the self-objectification of products and services**

**However, I thought here. Is there a pattern in which these problems are less likely to appear?**

It was about creative activities. In the case of creative activities, it may be possible to develop a healthy relationship with technology. That is, **the proliferative nature of technology becomes a relationship that supports creativity**. This is because the act of creativity itself **requires both exploration of the new (supply-side proliferation) and mastery of the means (demand-side proliferation)**. This can be clearly seen by shifting the previous table from the consumer to the creator perspective.

| Technology         | New Creative     | Existing Creative  |
| ------------------ | ---------------- | ------------------ |
| Printing           | Writing          | Oral Tradition     |
| Electrical signals | Sound recordings | Concerts           |
| Engine             | Car racing       | Horse racing       |
| Computer           | Adobe            | Handwriting Design |
| Internet           | YouTube posts    | 8mm film           |

For each new creative, I cannot speak of it as inferior or superior to the existing ones, but there is a joy that comes from having a new playground, and immersion in these technologies is often a good way to enhance creativity. In the case of writing, one must first become proficient in the art of writing. The more widespread the use of printed materials, the easier it is to improve one's writing skills. Writing also allows for a realism of dialogue and an optimal speed for each reader that could not be conveyed through oral tradition. This technique becomes more sophisticated the more books an author writes.

Summary.

- **Technology Proliferation System**
  - Inducing Demanders to Use Technology
  - Inducing Suppliers to Adopt Technology
- When consuming content or media, humans are often at the **mercy** of Technology Proliferation System
- In the case of creative activities, Technology Proliferation System often **enhances** creativity


Technology Proliferation System and Creative


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.


Small effects of A/B testing on small websites


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.

```jsx:components/like
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`

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

and `likeCount`.

```jsx:components/like
const [likeCount, setLikeCount] = useState(props.likeCount)
```

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

```bash
npm i prisma
```

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

```prisma: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.

```
npm run prisma migrate dev
```

Next, we will generate prisma client to access database.

```
npm 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.

```javascript: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

```javascript:api/like/create.js
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.

```jsx:components/like
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](https://render.com/)

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](https://www.prisma.io/docs/guides/deployment/deployment-guides/deploying-to-vercel)

```js:package.json
{
  "scripts": {
    "vercel-build": "prisma generate && prisma migrate deploy && next build"
  }
}
```

Then, we will environment variable for Prisma to 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.


Attaching database to static site on Next.js and Vercel


I have recently been experimenting with full stack app development using next.js and prisma. By the way, take a look at the prisma documentation.

[Integration testing with Prisma](https://www.prisma.io/docs/guides/testing/integration-testing)

> One way to simulate a real world environment is to use Docker to encapsulate a database and some test data. This can be spun up and torn down with the tests and so operate as an isolated environment away from your production databases.

> This guide assumes you have Docker and Docker Compose installed on your machine as well as Jest setup in your project.

I see what you're saying, but... Do you want to prepare that much for testing? I want to run tests more easily and nimbly.

And this is important, because the documentation does not tell us how to clean up the database easily for each test case, which makes the tests independent and changes their behavior depending on the order of the tests.

So let's do it.

In this case, we have prepared the following schema.

```prisma
datasource db {
  provider = "postgresql"
  url      = env("DB_URL")
}

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

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String
}
```

```
npx prisma generate
```

First, we can use Dotenv to specify the URL of the database for testing.

```
npm i -D dotenv
```

```
# .env.test
DB_URL=postgresql://user:password@127.0.0.1:5432/example-test
```

Next, we will define the test process. Here, let's use the "pre" and "post" functions of script.

```json
{
  "scripts": {
    "pretest": "pg_ctl -D db/pgdata start && dotenv -e .env.test -- prisma migrate dev",
    "test": "dotenv -e .env.test -- mocha",
    "posttest": "pg_ctl -D db/pgdata stop"
  }
}
```

The point here is to use Dotenv's API to use `.env.test`.

The last thing we need to do is clean up the database, which is the first thing we applied for. In the case of mocha, this is done with beforeEach, afterEach.

```javascript
import { PrismaClient } from '@prisma/client'

export class PrismaCleaner {
  constructor(prisma = new PrismaClient()) {
    this.prisma = prisma
    const propertyNames = Object.getOwnPropertyNames(prisma)
    this.modelNames = propertyNames.filter((name) => this.isModelName(name))
  }

  async clean() {
    console.log(`Database cleaning...`)
    return Promise.all(
      this.modelNames.map((modelName) => this.prisma[modelName].deleteMany())
    )
  }

  /**
   * @param {String} name
   * @returns {Boolean}
   */
  isModelName(name) {
    return !name.match(/^(_|\$)/)
  }
}
```

```javascript
import * as assert from 'assert'
import { PrismaCleaner } from '../index.js'
import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()
const cleaner = new PrismaCleaner()

describe('prisma-cleaner', () => {
  beforeEach(async () => {
    await cleaner.clean() # This
  })

  afterEach(async () => {
    await cleaner.clean() # This
  })

  describe('first creation', () => {
    it('creates a user', async () => {
      const user = await prisma.user.create({
        data: {
          name: 'John Lenon',
          email: 'john@example.com'
        }
      })
      assert.equal(user.name, 'John Lenon')
    })
  })

  describe('second creation', () => {
    it('creates a user', async () => {
      const user = await prisma.user.create({
        data: {
          name: 'John Wick',
          email: 'john@example.com'
        }
      })
      assert.equal(user.name, 'John Wick')
    })
  })
})
```

This is all you need to do.

By the way, I found several libraries for this database cleanup, but none of them worked perfectly.

- [emerleite/node-database-cleaner: The simplest way to clean your database after tests](https://github.com/emerleite/node-database-cleaner)
- [blazing-edge-labs/node-postgres-cleaner: Extremely simple way to clean your postgres database](https://github.com/blazing-edge-labs/node-postgres-cleaner)

For now, I'll just publish my library this time.

- [cc-kawakami/prisma-cleaner: Prisma Cleaner is a utility for cleaning database with Prisma in testing. You can use in Jest or Mocha, etc.](https://github.com/cc-kawakami/prisma-cleaner)

The Prisma development experience is not as bad as I thought it would be, but I feel that the testing environment is not yet ready, so I wanted to commit to it!

Thank you for reading.


Testing with Prisma


For CSS, there is https://purgecss.com.

But what about Sass?
You want to eliminate unused selectors not only from the built result, but also from the Sass source code.

I tried it. [cc-kawakami/uchini: Find unused Sass codes](https://github.com/cc-kawakami/uchini)

```bash
npm i -g uchini
```

("Uchini" is Japanese for unloading cargo from a ship that is about to sink.)

```bash
$ uchini ls --help
List CSS selectors usage

USAGE
  $ uchini ls --scss <value> --content <value> [--output
    <value>] [--unusedOnly]

FLAGS
  --content=<value> (required) Path to content file
  --output=<value> Path to output file
  --scss=<value> (required) Path to CSS file
  --unusedOnly Unused selectors only

DESCRIPTION
  List CSS selectors usage

EXAMPLES
  $ uchini ls --css path/to/css --content path/to/content --output path/to/output --unusedOnly
```

```bash
uchini ls --scss path/to/scss --content 'path/**/*.html' --output output.json
```

```json:output.json
[
  {
    "selector": ".header",
    "positions": [
      "frontend/stylesheets/_layout.scss:20:2"
    ]
  },
  {
    "selector": ".card",
    "positions": [
      "frontend/stylesheets/_card.scss:1:0"
    ]
  }
]
```

Internally we use the following.

- [sass - npm](https://www.npmjs.com/package/sass)
- [purgecss - npm](https://www.npmjs.com/package/purgecss)
- [source-map - npm](https://www.npmjs.com/package/source-map)

First, compile Sass.

```javascript
const compiled = sass.compile(scss, {
  style: 'compressed',
  sourceMap: true,
  logger: sass.Logger.silent
})
```

Then, the source-map creates a consumer.

```javascript
const consumer = await new sourceMap.SourceMapConsumer(compiled.sourceMap)
```

Next, we identify the CSS selectors that are not being used by purgecss.

```javascript
const rejectedCSS = await new PurgeCSS().purge({
  content: [content],
  css: [{ raw: css }],
  rejected: true
})[0].rejected
```

Then, the consumer can use the source map to traverse the Sass lines corresponding to a given line of CSS.

```javascript
const position = this.consumer.originalPositionFor({
  line: 1, // since the source map is a single line in compressed
  column: startOfSelector
})
```

That's it.

Thank you for reading.


Eliminating unused selectors from Sass


I deployed [WebDev Metrics](https://webdev-metrics.netlify.app/) to summarize the metrics that I feel measure the performance of software development teams in my work.

## Product Usability

Fewer barriers for users to achieve their goals. It can also be called a trusting relationship between the user and the product.

### Task Success Rate

Users will give up on their goals if they feel distrustful of the product or if it is too complicated to operate before they achieve their goals.

### Time-on-Task

The time to complete a goal is affected by how few operations are required to do so and the ease of understanding.
For example, if there are too many steps to complete a task, users will leave, and if it is too complicated, they will get tired of it.

### Search vs Navigation

Also, users do not want to control the product and retrieve information by themselves as much as possible. Aim for an experience that feels like information is falling from the sky.

### System Usability Scale

In addition to the results of user behavior and measurable indicators, direct feedback on the product may provide unexpected perspectives for evaluation. This evaluation should also be taken into account.

### Customer Satisfaction

Without directly asking users about their satisfaction, we cannot dispel the possibility that our product may be using devious methods to engage users. Such methods may discredit the service and the company in the long run.

Reference [The 7 most important UX KPIs and how to measure them - TestingTime](https://www.testingtime.com/en/blog/important-ux-kpis/)

## Development Performance

How much and how accurately the development team can do its job is the power to improve the product.

### Time to Restore Service

A method must be established to get the product out of a tight spot. We should not be in a hurry to start the recovery process, but rather follow a set procedure and start the recovery process in a good, prepared environment.

### Change Failure Rate

Consider ways to increase the accuracy of testing and the likelihood that errors can be detected before release. This is not craftsmanship.

### Lead Time for Changes

Once a method of improvement is determined, it must be immediately reflected in the product. It may be a good time to wait for the mechanical process over a cup of coffee, though.

### Deployment Frequency

A team that can make 10 changes in the same amount of time versus a team that can make 100 may have a 10-fold difference in the likelihood of a good product.

Reference [Use Four Keys metrics like change failure rate to measure your DevOps performance | Google Cloud Blog](https://cloud.google.com/blog/products/devops-sre/using-the-four-keys-to-measure-your-devops-performance?hl=en)

## Team Effectiveness

If the psychological aspect of the team is not fulfilled, nothing can begin. It is important to focus not on the team members, but on the relationship between them.

### Impact

Congrats to everyone for their contributions against the team. Please listen.

### Psychological Safety

This is a necessary condition for each member of the team to take on new and difficult tasks without fear of failure. Without it, it would be difficult to incorporate new technologies, or miss opportunities to not report failures and put them on the agenda as a team issue.

### Dependability

Responding with a smile when asked for help is as easy as creating a library with an easy-to-understand API.

### Structure and Clarity

When everyone knows what they are supposed to do and who their role is, there is no need for daily instructions.

### Meaning

Define a useful product for people. Then, gather members who agree with it.

Reference [re:Work - Guide: Understand team effectiveness](https://rework.withgoogle.com/guides/understanding-team-effectiveness/steps/introduction/#introduction)


Measuring webdev team performance


[thoughtbot/administrate](https://github.com/thoughtbot/administrate) is a well-known framework for administrative screen, but it's not developer friendly。I implement my own template files for Administrate, so when new Administrate version released, **it is hard to update Administrate because template file is changed.**

But administrative screens are very easy to commonize, so I want to use a framework or library.

I done this.

[cc-kawakami/micro-admin: A minimal Administration dashboard parts.](https://github.com/cc-kawakami/micro-admin)

It can be used with Ruby on Rails or other frameworks because I implemented with [trailblazer/cells](https://github.com/trailblazer/cells).

You can define `ApplicationDashboard`.

```ruby
class ApplicationDashboard < MicroAdmin::Dashboard::Base
    # もし Rails を使うなら
    self.view_paths = [Rails.root.join("app", "views", "dashboards")]
end
```

And you extends it, define dashboard classes for models and define attributes to show each screens.

```ruby
class UserDashboard < ApplicationDashboard
    def index_attributes
        [:id, :name]
    end

    def show_attributes
        [:id, :name]
    end

    def form_attributes
        [:name]
    end

    def model_class
        User
    end
end
```

It is a point, MicroAdmin does not have template for form items. So you must write template files for input or select , etc.

```html:/app/views/dashboards/user_dashboard/new/name.erb
<input type="text" name="name" class="form-control">
```

The `value` variable will come to the edit template.

```html:/app/views/dashboards/user_dashboard/edit/name.erb
<input type="text" name="name" value="<%= value %>" class="form-control">
```

It can be rendered by calling the following.

```ruby
smith = User.new(id: 1, name: "Smith")
james = User.new(id: 1, name: "James")
dashboard = UserDashboard.new
```

```erb
<%= dashboard.index([smith, james]) %>
```

```erb
<%= dashboard.show(smith) %>
```

```erb
<%= dashboard.new(errors: ["Name is required!"]) %>
```

```erb
<%= dashboard.edit(id: 1, values: {name: "Smith"}, errors: []) %>
```

As an example, the edit method output HTML like this.

```html
<header class="navbar border-bottom py-4">
  <h2 class="m-0">Create TestModel</h2>
  <div>
    <a href="/admin/user" class="btn btn-primary"> Back to index </a>
  </div>
</header>
<main class="p-4">
  <ul class="alert alert-danger">
    <li class="ml-3">Name is required</li>
  </ul>
  <form method="patch" action="/admin/user/1">
    <div class="mb-3">
      <label for="name" class="form-label">name</label>
      <input type="text" name="name" value="Smith" class="form-control" />
    </div>
  </form>
</main>
```

**And you can style the screens by loading Bootstrap!**

The points:

- the html of form item is customizable
- not only Ruby on Rails

Thank you.


The Admin Framework for Minimalist


**The problems with Sass were clear**. At the same time, **the new CSS specs were very clear and worth noting**. We tried to go back to pure CSS in light of this, but we ended up staying with it, so here's a summary of the process.

## Why are we using Sass in the first place?

This is how it was for me personally and the team. I think everyone is different in this area.

1. want to **nest** style rules when you want to style a tag without naming the class
2. want to **nest** style rules by section of content to increase visibility of source code
3. to **separate files** by purpose or content to improve searchability
4. define and reuse color patterns for large projects
5. define and reuse screen width values for **media queries**
6. large projects want to use `@extend` to **share** styles
7. some projects use `@mixin` to **share vendor prefixes** (though recently I've been using autoprefixer), **define style rules**, **share breakpoints**, etc.

## What's troubling you about Sass?

### 1. all features are preset.

**Functions that are not used are also preset**. If we as a team don't clarify the criteria of which features we want to use, there is a high possibility that **newly joined members will use every single feature** and make the review process difficult.

### 2. language implementations have been deprecated and need to be migrated.

- [Sass: LibSass is Deprecated](https://sass-lang.com/blog/libsass-is-deprecated)
- [Sass: Ruby Sass Has Reached End-Of-Life](https://sass-lang.com/blog/ruby-sass-is-unsupported)

In addition to Dart Sass, [Sass: Embedded Sass is Live](https://sass-lang.com/blog/embedded-sass-is-live)

### 3. Inherently, the policy of use tends to be unstable.

**Sass has a pragmatic policy that allows the specification to change to match CSS design theory that is considered useful in the real world**. The following features are in the process of being deprecated and will require changes to past code

#### `@import`

`@import` allows access to style conventions even when `@import` is used in a hierarchical manner, but this specification began to be seen as problematic, and `@use` was adopted as an alternative. This means that the style conventions can only be accessed in the file that invokes them.

[Sass: @import](https://sass-lang.com/documentation/at-rules/import)

### 4. possible conflicts with CSS body spec.

#### Division using `/`.

In CSS, there is a property that uses `/` as a delimiter.
In this case, Sass cannot distinguish whether the `/` is a delimiter or a divisor. As an alternative, we recommend `Math.div`.

[Sass: Breaking Change: Slash as Division](https://sass-lang.com/documentation/breaking-changes/slash-div)

## 🤔 By the way, what's going on with CSS?

[cssdb - CSS Database](https://cssdb.org/) defines stages** to standardization of new features, called **stages\*\*.

|Stage|Level|Maturity Level|
|:--:|:--:|:--:|Stage3
|Stage4|Standardized|High
|Stage3|Embraced|:
|Stage2|Allowable|:
|Stage1|Experimental|:
|Stage0|Aspirational|Low

It seems that as the Stage goes up, the browser support actually improves.
Also, [postcss-plugins/plugin-packs/postcss-preset-env](https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss- preset-env) allows you to comply with this stage and use features that will be standardized in the future.

It seems that there are quite a few features that we used to use in Sass.

| Sass              | CSS                          | PostCSS Plugin                |
| ----------------- | ---------------------------- | ----------------------------- |
| nesting           | nesting rule (stage 1)       | postcss-nesting               |
| file-splitting    | -                            | postcss-import                |
| color reuse       | custom property (stage 3)    | postcss-custom-property       |
| reuse media query | custom media query (stage 2) | postcss-custom-media          |
| class inheritance | under discussion             | postcss-extend                |
| Mixin             | under discussion [^1]        | postcss-mixins, postcss-apply |

[^1]: `@apply` is being discussed, but apparently there are technical issues that are making it difficult.

Please do some research on the notation of each rule.

### How to reproduce Mixin for different purposes

- Define common style rules => Do not adopt single class
- Common vendor prefix => Autoprefixer
- Common breakpoints => custom media query in CSS

## Low-stage rule specs are very unstable

The stage defined by W3C is not an official release version and its use is less stable.
**Low stage must also be taken into account that the specification is more likely to change or be REJECTED**.
Before one has little knowledge or experience with draft CSS, it is better to follow the default (stage 2) of postcss-preset-env.

For example, the nesting rule is still in stage 1, so the specification is likely to change. **If you implement it in postcss-preset-env, you may have to re-implement just the nesting part later**.

## Maybe it's too early to adopt postcss-preset-env.

It may still be too early to adopt postcss-preset-env after all the above discussion.
From now on.

- **We will use CanIUse and other tools to see how browsers support it**.
- **If the stage of the function we want to use reaches 4 and browser support is sufficient, we will adopt it**.
- **We will continue to adopt PostCSS for approaches other than CSS itself, such as autprexier**.

I think that is what I was thinking. Thank you very much.


Back to Pure CSS?


Error Reporting has recently evolved in many ways and has become a seamless service from notification to logging, so I will summarize the whole picture.

## Send errors to Error Reporting

If you are using GCP infrastructure, it will automatically pick up the errors.
If you are not using GCP infrastructure, check out the various libraries available.

## Manage error status

Error Reporting allows you to manage the status of errors.

- **Unresolved**
- **Confirmed**
- **Resolved**.

and if you want to set it as Confirmed, you can link to **Github Issue etc.** ## Notify via Slack or Email

## Notify errors via Slack or email

Error Reporting supports Slack and email notifications by default.
Notifications are based on the following criteria

- **New errors **occur
- When an error that has been resolved \*\*recurs
- **If you are notified **5 or more times**, you will not be notified of errors for **6 hours\*\*.

So, if you manage your error status properly.

- \*\*Notify only errors that need to be addressed (unknown/recurrent)
- **exclude** notification of errors that do not need to be addressed (in-process/unavoidable)
- **avoid frequent notifications**.

can be achieved.

Also, when combined with **Cloud Logging** (which automatically logs for errors) and **Cloud Monitoring**, you can.

- **notify you as an incident when an error occurs frequently that would not normally require action**.

can also be realized.
**For example, the policy "Too meny timeout" can be used to set up appropriate notifications in cases where timeouts are usually unavoidable and should be ignored, but are worrisome when there are too many of them. **

## Analyze errors

Error Reporting allows you to see a trace. You can analyze various things here.
However, you cannot see the status of the request, so you need to consider a different method.

## Logging errors

Error Reporting information is stored in Cloud Logging at the same time. By syncing this to Cloud Storage, you can store error information permanently.

Translated with www.DeepL.com/Translator (free version)


Google Cloud Error Reporting for error handling


In this article, we will consider together what a devops organization is and is not by looking at a simple question and how a "devops" organization responds to it.

### Q. What are some of the issue your organization or team has been facing lately?

In a devops organization, we are not bound by the best practices or definitions of any particular methodology, and we can face our own challenges.

_Example: the development team and the marketing team are not working together to provide optimal hospitality to users via ads. _

### Q. What have you changed recently in the way your organization or team works?

A devops organization tries to face challenges through trial and error. There is time for trial and error.

_Example: We recently set up a joint cross-functional meeting. _

### Q. Is there a place for members to share their failure/success stories with the organization?

Sharing stories can help to

- Increases transparency and builds trust within the team
- Colleagues can tell you how to prevent a damaging mistake before it is actually made
- More time available to solve new problems and encourage innovation.

_Example: Our development team has a meeting every morning to share what happened yesterday. _

### Q. Do one team and another use the same communication tools?

The fact that they use the same communication tools is a result of the two teams trying to communicate with each other. Two teams that do not communicate will not communicate just because they have Slack as a common tool.

_Example: The development team and the marketing team communicate through the same Slack channel and have a lively exchange of ideas. _

### Q. How many metrics do you have to measure your organization's success?

Insights into success.

_### e.g.) My organization measures conversion rates and the amount of user activity (PV, click events, etc.). We measure site latency. _

### Q. Is your organization's success measurement data publicly available?

If measurement data is publicly available, even employees without in-depth knowledge of operations (e.g., front-end engineers) can draw insights and decisions for iterative improvement.

_example) In my organization, Google Analytics data is publicly available to the development team, marketing team, stakeholders, and customers. However, outside of the development team, only some of the data is open to the public and does not lead to deeper insights. _

### Q. Are your organization's rules explicit?

Explicit rules allow new members to trace back the organization's past failures. Implicit rules are difficult for new members to notice and can lead to the same mistakes being repeated.

_Example: Our team's wiki summarizes how to do code reviews, what to check after deploying, etc. _

---

What were your organization's answers?

Thank you very much.


Is your organization a "devops" organization?


## Summary

- Even with a transpiler, **not all ECMAScript descriptions can be converted**.
- Even with ESLint, **not all ECMAScript descriptions can be linted**.

## Inspect!

When using ECMAScript, what does the transpiler convert and what does it parse?

- Verify what the transpiler converts and what it ignores
- Verify what ESLint parses and what it ignores

[cc-kawakami/transpilers-and-eslint-are-not-perfect](https://github.com/cc-kawakami/transpilers-and-eslint-are-not-perfect)

## Input for validation

- Code samples based on ES6 to ESNext standards
- Pick a function that you may have occasion to use

```javascript
/**
 * ES2015
 * ------------------------------------------------
 */
/** const, let */
const cst = 1
let lt = 2
console.log(cst)
console.log(lt)

/** Allow function */
const fn = () => {
  console.log('fn')
}

/** classes */
class Hoge {
  fuga () {
    console.log('fuga')
  }
}

/**
 * ES2016
 * ------------------------------------------------
 */
/** Array.prototype.includes */
const array = [1, 2, 3, 4, 5]
console.log(array.includes(2))

/** power operator */
console.log(2**2)

/**
 * ES2017
 * ------------------------------------------------
 */
/** Async functions */
async function log () {
  console.log('hoge')
}

/** Object.values() */
const obj = { hoge: 0, fuga: 1, piyo: 2 }
console.log(Object.values(obj))

/**
 * ES2018
 * ------------------------------------------------
 */
/** Spread Properties */
const hoge = { fuga: 'piyo' }
console.log({ .... .hoge })

/** RegExp named capture groups */
console.log(/(? <year>[0-9]{4})year/.test('2021'))

/** RegExp Lookbehind Assertions */
console.log(/(? <=[0-9]+)\. [0-9]+/.test('.34'))

/**
 * ES2019
 * ------------------------------------------------
 */
/** flat array methods */
console.log([[1, 2], 3, 4].flat())

/**
 * ES2020
 * ------------------------------------------------
 */
/** Optional chaining operator */
console.log(hoge?.fuga)

/**
 * ES2021
 * ------------------------------------------------
 */
/** Logical assignment operators */
console.log(a ||= b)

/** Numeric separators */
console.log(100_000_000)

/**
 * ESNext
 * ------------------------------------------------
 */
/** static class field */
class Foo {
  static bar = 1
}

console.log(Foo.bar)
```

## Target transpiler and settings

| No  |          name          |       target       |
| :-: | :--------------------: | :----------------: |
|  1  |  Babel / conservative  | - ( `> 1% in JP` ) |
|  2  |  Babel / progressive   | - ( `> 5% in JP` ) |
|  3  |   esbuild / default    |       ESNext       |
|  4  |  esbuild / to ES2017   |       ES2017       |
|  5  |         rollup         |   not transpile    |
|  6  | rollup-plugin-esbuild  |       ES2017       |
|  7  |  Typescript / default  |        ES3         |
|  8  | Typescript / to ES2017 |       ES2017       |

## Inspection results.

### Descriptions not converted by ALL transpiles

- **RegExp named capture groups (ES2018)**
- **RegExp Lookbehind Assertions (ES2018)**
- **Flat array methods (ES2019)**

### Descriptions that cannot be validated with ESLint

- **flat array methods (ES2019)**

---

## Other things I noticed

- esbuild reduces comments by default.

## (extra) execution time

| No  |          name          |       target       | time ( s ) |
| :-: | :--------------------: | :----------------: | :--------: |
|  1  |  Babel / conservative  | - ( `> 1% in JP` ) |    0.63    |
|  2  |  Babel / progressive   | - ( `> 5% in JP` ) |    0.53    |
|  3  |   esbuild / default    |       ESNext       |    0.31    |
|  4  |  esbuild / to ES2017   |       ES2017       |    0.18    |
|  5  |         rollup         |   not transpile    |    0.20    |
|  6  | rollup-plugin-esbuild  |       ES2017       |    0.27    |
|  7  |  Typescript / default  |        ES3         |    1.21    |
|  8  | Typescript / to ES2017 |       ES2017       |    1.36    |

## Reference

- [ESLint - Pluggable JavaScript linter](https://eslint.org/)
- [Babel - The compiler for next generation JavaScript](https://babeljs.io/)
- [esbuild - An extremely fast JavaScript bundler](https://esbuild.github.io/)
- [rollup.js](https://rollupjs.org/guide/en/)
- [egoist/rollup-plugin-esbuild: Use ESBuild with Rollup to transform ESNext and TypeScript code](https://github.com/egoist/rollup-plugin-esbuild)
- [TypeScript: JavaScript With Syntax For Types.](https://www.typescriptlang.org/)
- [ES6 to ES10 (es2015 to es2019) Summary - Qiita](https://qiita.com/ozoneboy/items/9c11ac3323ca94919052)


Javascript Transpiler and ESLint are NOT Perfect


**From the Minimum Viable Product** recommendations, there is a clear benefit to starting with a small product.

> Since developing a product with many features based on faulty assumptions (value proposition) also increases the cost and risk of failure, it is comparatively cheaper to gain insights from the MVP and gradually incorporate them into product development.

[Minimum viable product - Wikipedia](https://en.wikipedia.org/wiki/Minimum_viable_product)

**You only know what it is** when you build it. That means there is a lot to learn from a minimal product, not only for the customer, but for the developer as well.

Furthermore, I've been reading [Effective DevOps [Book]](https://www.oreilly.com/library/view/effective-devops/9781491926291/) recently, and here's a similar story in the context of changing organizations.

> Fixed thinking at the organizational level often occurs because there are multiple people who have bad memories of reform or are risk averse for various reasons.... It can be as small as correcting a wrong document... And it builds confidence that the change or reform will not only improve the situation, but will not necessarily cause major problems or service failures.

Yes... **Try small first to see what the team reform looks like, get feedback**. I'm with you. You can kind of imagine that suddenly expanding the big picture will result in team members becoming more skeptical of the new system. (**Is that really okay? Can you do it? **)

I have experienced this myself in my own recent work. I have felt the challenge that **teams tend** to think about measures based on how the creator wants the user to act, rather than how the user wants to act. So I put together a document talking about how the current issue is this, and measuring usability in this way. But the result was that **I myself wondered if this was really going to solve things? I began to have doubts about this**. I think this is due to the fact that I am afraid of the risk of changing the structure of the team.

#### What should we do?

Hmmm. What should I do in this case? I thought I would start tomorrow's meeting by proposing a policy based on how I want users to act. If that idea works, it would be easier to come up with the next measure based on a similar concept.

Around this point, I realized that \*\*starting small in size may be applicable to the way we work. I realized that it was a good idea. So I made up my own rules.

1. start from yourself
2. Start with your area of work
3. Start with a simple product
4. start from where you can get immediate feedback

That's all.


Small product and small task


After about 5 laps around Clean architecture since I came across [hanami/hanami: The web, with simplicity.](https://github.com/hanami/hanami), I'm finally getting it down in my gut, so I'll summarize.

#### It is difficult to understand while using a frameworks like Ruby on Rails

When using a framework, the outer moat of the Usecase in the [diagram](https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html) is filled in: Controller, View, and Model in the case of MVC, and Repository in the case of other patterns. Personally, I feel that if all three layers from the inner layer are integrated, they are the center of the application.

![Image description](/img/clean-architecture.jpg)

So I tried to implement each responsibility of the application using different libraries.

Here it is. [cc-kawakami/clean-architecture-minimal-app: A minimal Clean Architecture app](https://github.com/cc-kawakami/clean-architecture-minimal-app)

These are the libraries we used.

- Use Case: [utils/interactor.rb at v1.3.8 - hanami/utils](https://github.com/hanami/utils/blob/v1.3.8/lib/hanami/interactor.rb)
- Controller: [sinatra/sinatra: Classy web-development dressed in a DSL (official / canonical repo)](https://github.com/sinatra/sinatra)
- Serializer: [procore/blueprinter: Simple, Fast, and Declarative Serialization Library for Ruby](https://github.com/procore/blueprinter)
- Object Mapper: [rom-rb/rom: Data mapping and persistence toolkit for Ruby](https://github.com/rom-rb/rom)
- DB: [sparklemotion/sqlite3-ruby: Ruby bindings for the SQLite3 embedded database](https://github.com/sparklemotion/sqlite3-ruby)

#### "Let there be Entity."

We will attack from the heart of the architecture. First, Entity.

```ruby
class User
  attr_reader :id, :name, :email

  def initialize(id:, name:, email:)
    @id = id
    @name = name
    @email = email
  end
end
```

This is a plain ruby object. It defines what kind of information you want to handle in your business. In this case, we have a User Entity to manage users.

#### Next, the business logic of the app

This app will allow you to search users by ID.

```ruby
class FindUser
  include Hanami::Interactor

  expose :user

  def initialize(repository:, serializer:)
    @repository = repository
    @serializer = serializer
  end

  def call(id)
    begin
      # Find users
    rescue => e
      error!(e.class.name)
    end
  end
end
```

We now have a Use Case that looks like this. We can now define what purpose the app serves in the business: Repository, Serializer is an Adapter that fetches Entity and outputs it. This is used by Use Case.

#### Then, we can create the Interface Adapters.

Repository.

```ruby
class UserRepository < ROM::Repository[:users].
  commands :create

  def find(id)
    users.by_pk(id).map_to(User).one
  end
end
```

Controller.

```ruby
get "/users/:id" do
  find = FindUser.new.call(params["id"])

  if find.success?
    if find.user
      status 200
      body = find.user
    else
      status 404
      body = { error: "Not found!" }
    end
  else
    status 500
    body = { error: find.error }
  end

  json body
end
```

Serializer.

```ruby
class UserSerializer < Blueprinter::Base
  identifier :id

  fields :name, :email
end
```

We're all set.

Now we can write the details of the Use case that came up earlier.

```ruby
class FindUser
  include Hanami::Interactor

  expose :user

  def initialize(
    repository: UserRepository.new(App.new.rom),
    serializer: UserSerializer
  )
    @repository = repository
    @serializer = serializer
  end

  def call(id)
    begin
      user = @repository.find(id)
      @user = @serializer.render_as_hash(user)
    rescue => e
      error!(e.class.name)
    end
  end
end
```

#### Execute

```bash
$ curl http://127.0.0.1:9292/users/1
{"id":1, "email": "smith@exmaple.com", "name": "Smith"}
```

OK, so you get the sense that the HTTP request/response is just one of the **input/output details** of business logic.
Likewise, the DB is only one of the **implementations** of creating the User. DB and HTTP are **details**.

#### Difficult to mix responsibilities, No mixing of responsibilities

This design naturally leads to a design in which the details of DB, HTTP, HTML, and JSON are distributed in each direction of the circle, starting from the Use case. The above is all.

That's all. Thank you very much.


Understanding Clean Architecture with Small Ruby Libraries


The reason behind multi-stage builds is to reduce image size.

> It was actually very common to have one Dockerfile to use for development (which contained everything needed to build your application), and a slimmed-down one to use for production, which only contained your application and exactly what was needed to run it. This has been referred to as the “builder pattern”. Maintaining two Dockerfiles is not ideal.

[Multi-stage builds | Docker Documentation](https://docs.docker.com/build/building/multi-stage/)

However, in my case, the **build time** is more serious than the image size.
This is because the language I use most often is **scripting language**.

However, it seems that this multi-stage build, if used properly, can reduce the build time considerably.

Let's give it a try. Using a simple Ruby on Rails and Node.js asset environment as an example, we'll start with a single-stage build and try to improve from there.

```dockerfile
FROM ruby:3.1
RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash - && apt-get install -y nodejs
RUN npm install --global yarn@1.22.19
RUN gem install bundler
RUN mkdir -p /rails
WORKDIR /rails
COPY . .
RUN bundle install
RUN yarn install
RUN RAILS_ENV=production bundle exec rails assets:precompile
CMD ["bin/rails", "s"].
```

Finally, the rails

```dockerfile
RUN bundle install
RUN yarn install
RUN RAILS_ENV=production bundle exec rails assets:precompile
```

Done, but this is where it will most likely take the most time.
Even more annoying is that if any of the sources are modified, the

```dockerfile
COPY . .
```

The layer cache will be perged, so be sure to use

```dockerfile
RUN bundle install
RUN yarn install
RUN RAILS_ENV=production bundle exec rails assets:precompile
```

will be executed.
This is always the case due to the layer caching mechanism.

> Once the cache is invalidated, all subsequent Dockerfile commands generate new images and the cache is not used.

[Dockerfile Best practices for writing Dockerfiles](https://docs.docker.com/develop/develop-images/dockerfile_best-practices/)

To solve this problem, the next step is to prepare a `builder` stage.

```dockerfile
FROM ruby:3.1 as builder
WORKDIR /tmp
RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash - && apt-get install -y nodejs
RUN npm install --global yarn@1.22.19
RUN gem install bundler
COPY Gemfile Gemfile.lock . / /
RUN bundle install
COPY package.json yarn.lock . /
RUN yarn install
COPY app/assets app/assets
COPY app/javascript app/javascript
COPY bin bin
COPY config config
COPY Rakefile vite.config.ts . /
RUN RAILS_ENV=production bundle exec rails assets:precompile

FROM ruby:3.1 as app
RUN mkdir -p /rails
WORKDIR /rails
COPY --from=builder /usr/local/bundle /usr/local/bundle
COPY --from=builder /tmp/public/vite public/vite
COPY . .
CMD ["bin/rails", "s"].
```

Notable here.

```dockerfile
COPY --from=builder /usr/local/bundle /usr/local/bundle
COPY --from=builder /tmp/public/vite public/vite
COPY . .
```

`--from` allows you to copy files from other stages, but the **problem** is the `COPY` order\*\*.
First, you need to copy the potentially time-consuming

```dockerfile
COPY --from=builder /usr/local/bundle /usr/local/bundle
COPY --from=builder /tmp/public/vite public/vite
```

is written first, followed by:

```dockerfile
COPY . .
```

Now `bundle install` will not be executed unless one of the `Gemfile` `Gemfile.lock` is modified.

However, the problem remains.
If you change any of the `Gemfile` `Gemfile.lock`, it will even run `yarn install`.

So let's go to the final form for now.

```dockerfile
FROM ruby:3.1 as builder
RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash - && apt-get install -y nodejs
RUN npm install --global yarn@1.22.19

FROM ruby:3.1 as bundler
WORKDIR /tmp
RUN gem install bundler
COPY Gemfile Gemfile.lock . /tmp
RUN bundle install

FROM node as yarn
WORKDIR /tmp
COPY package.json yarn.lock . / / RUN yarn install
RUN yarn install

FROM builder as assets
WORKDIR /tmp
COPY --from=bundler /usr/local/bundle /usr/local/bundle
COPY --from=yarn /tmp/node_modules node_modules
COPY app/assets app/assets
COPY app/javascript app/javascript
COPY bin bin
COPY config config
COPY Rakefile Gemfile Gemfile.lock package.json yarn.lock vite.config.ts . /
RUN RAILS_ENV=production bundle exec rails assets:precompile

FROM ruby:3.1 as app
RUN mkdir -p /rails
WORKDIR /rails
COPY --from=bundler /usr/local/bundle /usr/local/bundle
COPY --from=assets /tmp/public/vite public/vite
COPY . .
CMD ["bin/rails", "s"].
```

👍

In this `Dockerfile`.

- **Controls caching by only capturing changes to files on which the executing process depends**.

which is achieved by the `Dockerfile`. Now, for example, if `Gemfile.lock` is changed, `yarn install` will not be executed.

**Furthermore**.

**You may have noticed that the `yarn` stage and the `bundler` stage are processed in parallel**.

The structure of the execution is

- `COPY --from=bundler /usr/local/bundle /usr/local/bundle`.
  - `RUN bundle install`.
- `COPY --from=bundler /usr/local/bundle /usr/local/bundle`
  - `--from=yarn /tmp/node_modules node_modules`
    - `RUN yarn install`.

and we can now run the necessary processes in parallel while resolving the `--from`!

---

- **Multi-stage builds can take full advantage of layer caching**.
- **Multi-stage builds can achieve parallel processing**.

Thank you for reading.


Using Docker's Multi-stage build to reduce build time


Dependabot was a hoarder.

I have tried various things to make use of Dependabot, and I will summarize them here.

## 1. make time for Dependabot

I decided to work on the Dependabot merge at the beginning of the month.

## 2. automatically set reviewer milestones

If you are set as a reviewer, you have to review.
If you set a milestone with a date, you will be motivated to do it in time. Maybe.

So, I set the following.

| Item      | Value                                         |
| --------- | --------------------------------------------- |
| Reviewer  | All                                           |
| milestone | `security-update-<month>` (8th of each month) |

The most important thing to be aware of is to set the maximum number of reviewers. **We have clearly stated our policy to increase the number of human eyes as much as possible**. However, depending on the nature of the team, it is possible that reviews may be arranged.

Also, it was difficult to set up Github Actions for each repository, so we decided to create one repository for Dependabot countermeasures and set it up from there by hitting the API.

## 3. create a TODO list

I made a TODO list of Dependabot PRs to be worked on for the month in an Issue. This will help us get a better overview and make it easier to look back\*\*.

## 4. Clearly state the rules

We have a set of uniform rules for working on Dependabot as a team.

- Note that Dependabot includes updates to **major versions**.
  - Most libraries have security updates in the latest major version
- Major and minor versions run **tests**.
- Check **release notes** for patched versions
- Keep a **warning list** of any previous updates that have caused problems

## 5. minimize the amount of PR in Dependabot

Libraries related to static site generators were skipped at this time as they are **not subject to user input** and therefore low risk.

---

These were the initiatives. Future issues to be addressed are.

- We would like to change the CI execution depending on the type of version being updated.
- We would like to have an award for a large number of reviews.

I would like to have an award for a lot of reviews. Thank you very much.


Using Dependabot seriously


Here it is. [cc-kawakami/shufu: Shufu is a simple Command as Code](https://github.com/cc-kawakami/shufu)

I think I wrote this when I wanted to define the configuration of command arguments and options.
I think I derived it when I was trying to achieve a simple Infrastructure as Code by defining the `gcloud` command as YAML.

Let's take a closer look.

The basics are as follows.

```ruby
require "shufu".

# Define the schema for the command
schema = {
  git: {
    commit: {
      amend: :flag,
      author: :equal
    }
  }
}

# Create command object from schema
command = Shufu::Command.new(schema)

# Passing a value corresponding to the schema to_s makes it a string!
p command.to_s({ amend: true, author: "cc-kawakami" })

# => "git commit --amend --author=cc-kawakami"
```

From here, you can expand, for example, by defining a schema for the `gcloud alpha storage buckets create` command, and then adding

```yaml
gcloud:
  alpha:
    storage:
      buckets:
        create:
          name: :param
          class: :equal
          bucket-level: :equal
          location: :equal
```

You can also define a value for it in the

```yaml
name: foobarbox
class: regional
bucket-level: 'on'
location: us-central1
```

Use Shufu.

```ruby
schema = YAML.load_file(schema_filepath)
values = YAML.load_file(value_filepath).map { |k, v| [k.to_sym, v] }.to_h
Shufu::Command.new(schema).to_s(values)
```

Then we have a simplified IaC!

Translated with www.DeepL.com/Translator (free version)


Command as Code


Vite uses `postcss-import` to achieve `@import`.

[Features | Vite](https://vitejs.dev/guide/features.html#css)

For example, suppose you have the following code.

```
src/
  ├── img/
  │ └── about-mainvisual.png
  └── css/
       ├── application.css
       └─ pages/
             └── about.css
```

```css:src/css/application.css
@import ". /pages/about.css"

main {
  background-color: white;
}
```

```css:src/css/pages/about.css
.about__mainvisual {
  background-image: url(... /... /img/about-mainvisual.png);
}
```

**This will not work. **

Resolve `@import`. 2.
Resolving `url()`.

Vite will process in the following order: 1.

So, at 1.

```css:src/css/application.css
.about_mainvisual {
  background-image: url(... /... /img/about-mainvisual.png);
}

main {
  background-color: white;
}
```

is equivalent to temporarily generating CSS that says.
So, if you use `url(...)', you will get `url(...)'. /... /img/about-mainvisual.png)` is wrong.

What should we do?
The correct answer is.

```diff css:src/css/pages/about.css
.about__mainvisual {
- background-image: url(... /... /img/about-mainvisual.png);
+ background-image: url(/img/about-mainvisual.png);
}
```

**Please specify absolute paths. That way, the solution is independent of the image's referent.
Here, it is assumed that the `root` setting of Vite is `src`. **

Translated with www.DeepL.com/Translator (free version)


Loading images from CSS on Vite


## Target audience.

- Anyone involved in site design.
- (It has not yet been decided whether we will delve deeply into specific measurement methods, etc. (The content may be geared toward technical experts.)

## Assumed Issues

- Not able to define user-pleasing content and easy-to-use functions.
  - Not sure of the criteria for "happy" and "easy to use".
- Cannot design to maximize user task completion rate
  - Only PV is defined as a task.
  - Only PV can be measured as a completion rate.

## Define "delightful" and "easy to use" for users

In general, usability tasks are considered to have excellent performance in the following indicators. Here, a task is an action that a user performs to reach a goal, such as reading content or using a function.

- _Task success rate_.
- _Time on task_.
- \_Use of search vs. navigation

see [5 UX KPIs You Need To Track - Every Interaction](https://www.everyinteraction.com/articles/5-ux-kpis-need-track/)

## Set up a goal attainment process

A goal attainment process consists of several steps that define how you want users to use your site. Each step is a task, but goal attainment can also be called a major task.

### Process for designing the site in more detail

Steps should be defined in as much detail as possible; thinking in terms of units of action, rather than PV, will allow for discussion of the content/functionality of the pages as well as the site structure.

- \_Bad: page views as a step.
- _Good: Search form item entry as a step_.

If you are using GA4, this step can be defined as any event, not just PV, e.g. scroll or click. The method for retrieving the event you want to use as a step is described below.

### Can there be more than one goal attainment process?

Few sites will have a single goal attainment process. The process may vary depending on user preferences, time of year, advertising, etc. In such cases, please define user types and pathways, and set up the corresponding processes.

## Design pages according to steps

Design the page and site structure based on the steps you expect users to take.
If there are multiple processes, they should be designed to satisfy all of them. If batting of processes occurs, adopt the design that works best for the one with the highest priority.
This practice would mean that content that does not impact the process is content that is not needed. However, it is impossible to cover all user behavior patterns, so there is no need to aim for perfection. However, when adding content, remember to ask the question, "Is it really effective in achieving our goals? If you do add content, however, remember to ask the question, "Is it really effective in helping me achieve my goals?

Also, please use the

- _Time on task_.
- _Use of search vs. navigation_.

in accordance with the following indicators

- Minimize the number of steps
- Complete the input as much as possible.
- Provide links instead of searches.

Provide links, not searches.

## Measuring the success rate of steps

As a basic practice, use the "Goal Achievement Process" in GA4's "Search" section.
Here, you

- You can define each step
- You can see the completion/abandonment rate of the steps

and can achieve the same results.

You can also combine the Tag Manager with GA4 to measure the following events

- Click events for all elements
  - HTML Elements
  - Text
  - Form values
  - Link destination
- Scroll rate
- Display of an element

## Improve the success rate of steps

Consider measures that will improve the success rate of each step. Focusing on steps with particularly low success rates or starting with the easiest to implement measures will reduce confusion about where to begin.

## Consider process changes

If you find it difficult to improve the success rate of a step, consider changing the process.

## Reference.

- [5 UX KPIs You Need To Track - Every Interaction](https://www.everyinteraction.com/articles/5-ux-kpis-need-track/)
- [Think about a more "effortless" experience for users | UX MILK](https://uxmilk.jp/82642)


Maximizing usability of web site


For example, let's say you want to embed a snippet of the tag manager into the production environment plus other environments for testing.

In the past I have implemented the following.

```erb
<% if Rails.env.production?
  <%# snippet for production %>
<% else %>
  <%# snippet for other environments %>
<% end %>
```

Hmmm. There was a problem with this.

- 👎 Can't verify if statement until deployed to production.
- 👎 Even if we can verify it with `RAILS_ENV=production`, we don't know what impact it will have elsewhere.

What about using environment variables instead?

```erb
<%= sanitize ENV[:GTM_HEAD_SNIPPET] %>
```

Good!
