DEV Community: femtowork Inc.

How to Send i18n HTML Emails from Scripts Using React Email

femtowork Inc. — Fri, 24 May 2024 14:05:24 +0000

Introduction

React Email is a convenient tool that allows you to design HTML emails using React components. It supports styling with Tailwind and can automatically convert to Plain Text for email clients that don't support HTML emails, making it easier to manage emails. There are a few configurations required when sending emails using React Email from a script(such batch script), and I will share the idea here.

Challenges

TypeScript constraints
Since we need to handle React components, errors occur in .ts files.
- i18n settings If the email content is multilingual, i18n-related settings are required.

Solutions

Change the script extension to .tsx

With the tsx command, it is possible to execute .tsx files.

npm exec tsx ./scripts/send-mail.tsx

i18n settings Set up i18next and react-i18next, then wrap the React component with I18nextProvider to render it.

Example Code

// scripts/send-mail.tsx
import path, { join } from 'path'
import { fileURLToPath } from 'url'
import i18next from 'i18next'
import Backend from 'i18next-fs-backend'
import { I18nextProvider } from 'react-i18next'
import { renderAsync } from '@react-email/components'
import EmailComponent from './EmailComponent'

const lang = 'en'
const namespaces = ['common', 'mail']
const __dirname = path.dirname(fileURLToPath(import.meta.url)) // current directory

await i18next.use(Backend).init({
ns: namespaces,
lng: lang,
backend: {
loadPath: join(__dirname, '../public/locales/{{lng}}/{{ns}}.json'), // locale file path
},
})

const t = i18next.t // usable as the t function

const { html, text } = await renderReactEmail(
<I18nextProvider i18n={i18next}>
<EmailComponent />
</I18nextProvider>
)

// Send mail using html and text

async function renderReactEmail(react: ReactElement) {
const [html, text] = await Promise.all([
renderAsync(react),
renderAsync(react, { plainText: true }),
])
return { html, text }
}

Conclusion

We introduced a method for sending multilingual React emails from a script.

Efficient Data Management with Prisma, Fly.io, and LiteFS Configuration

femtowork Inc. — Thu, 23 May 2024 01:00:44 +0000

Introduction

Fly.io is a cloud platform that allows developers to easily deploy scalable applications. In this article, we will introduce how to manage databases effectively in an application using Remix, Prisma, and LiteFS on Fly.io.

What is LiteFS?

LiteFS is a replication tool for SQLite databases, designed for use in distributed environments. It operates in the same environment as the application, ensuring fast data reading and low latency. Additionally, with automatic scaling features, it offers low scaling costs and high availability. Distributed SQLite is one of the technologies gaining attention due to increasing demands for fast response times.

Limitations and Challenges of SQLite

SQLite is a lightweight and easy-to-use database, but because it lacks a daemon process, checking and modifying data on the server requires accessing the application container and operating on the command line. For MySQL or PostgreSQL, you can use port forwarding to the DB server and DB client GUI apps (e.g., Sequel Ace, pgAdmin) to manipulate the data on the server, but this is difficult with SQLite.

Utilizing Prisma Studio

Prisma Studio is a database management tool provided by Prisma that allows you to visually manipulate data in your browser. If your application uses Prisma as an ORM during development, utilizing Prisma Studio for data management is convenient.

Configuration Steps

Connect to the Application Container

First, connect to the Fly.io server using SSH.

fly ssh console -a {your_application_name}

Start Prisma Studio

Next, start Prisma Studio.

npx prisma studio

Set Up Port Forwarding

Set up port forwarding to access Prisma Studio locally.

fly proxy 5555:5555 -a {your_application_name}

Access the Forwarded Local Port

Open your browser and access the following URL.

http://localhost:5555

Security Considerations

Starting and Stopping Studio

In a properly operated service, there are not many cases where database investigation or manipulation is necessary. It is not desirable to always keep Prisma Studio running from both a security and memory efficiency perspective, so it is recommended to start it only when necessary.

Use Non-Public Ports

Make sure to use a non-public port that cannot be accessed externally when starting Prisma Studio. Check your fly.toml configuration carefully.

Conclusion

By leveraging LiteFS, a distributed SQLite, you can build scalable and high-performance applications. This article introduced how to efficiently manage data using Prisma Studio while considering security to address the data management challenges of SQLite.

How to Improve Team Development Efficiency with Effective Use of Pull Requests and Code Comments

femtowork Inc. — Wed, 22 May 2024 02:37:41 +0000

Introduction

In programming, while it is ideal to convey information solely through source code, there are limitations. This is especially true in team development, where pull requests (PRs) and source code comments become essential. This article explains the appropriate use and differentiation of these tools.

Importance of Pull Requests

PRs are a means to show code changes to the team and receive reviews. The main goal is to improve code quality.

Readers of Pull Requests

There are primarily two types of readers for PRs:

Code Reviewers: Those who review the PR
Code Modifiers: Those who investigate the PR to understand the history of code changes

Information to Include in a Pull Request

Purpose of the Change: Why the change was made
Main Changes: Overview of the modifications
Scope: Range of the modifications
Testing: Items tested and verification points
Design/Implementation Considerations: Background of technical decisions
Related Issues: Information on related tickets

Basically, include explanations that span multiple files or modifications, rather than what can be explained in code. If code explanations are necessary, it is preferable to write source code comments as mentioned later. However, if not suitable, supplement with inline review comments on the PR for easier understanding.

Importance of Source Code Comments

Source code comments are written to explain the behavior and intent of the code. The goal is to enable the reader to efficiently use and modify the code.

Readers of Source Code

There are also two types of readers for source code:

Code Users: Those who want to know how to correctly use the code
Code Modifiers: Those who modify the code to avoid bugs

Information to Include in Source Code Comments

Purpose of Functions and Classes: What the function or class is for
Usage of Functions and Classes: Typical usage examples of classes or functions
Explanation of Complex Processes: Explanation of difficult-to-understand logic or algorithms
Notes and TODOs: Points to improve or be aware of in the future
External Reference Resources: URLs of referenced pages, etc.

Source code comments should pertain to specific files. Again, there is no need to rewrite what can be expressed in the code.

Conclusion

PRs and source code comments play an important role in team development. By understanding and appropriately using each, we can achieve improved code quality and efficient communication.