DEV Community: Kazuki Yonemoto

Next-Stage: A Modern Next.js Starter Template for AI-Driven Development

Kazuki Yonemoto — Tue, 11 Mar 2025 15:09:17 +0000

Next-Stage is a cutting-edge starter template built on Next.js, designed specifically for developers looking to leverage modern web development practices with AI-assisted workflows.

This template combines the latest technologies and best practices to provide a robust foundation for building type-safe, performant web applications.

Demo: https://next-stage-demo.vercel.app/

🛠️ Technology Stack

Category	Technology
Framework	Next.js (App Router)
Language	TypeScript
Package Manager	Bun
API Framework	Hono
UI Components	shadcn/ui
Styling	Tailwind CSS
Form Management	React Hook Form
Validation	Zod
Linting & Formatting	Biome
Markup Linting	Markuplint
E2E Testing	Playwright
Supply Chain Security	Bun Security Scanner

🔑 Key Features

Type-Safe Development Environment

Next-Stage provides end-to-end type safety throughout your application:

TypeScript Integration: Built with TypeScript strict mode for comprehensive type checking
Zod Validation: Schema-based validation for forms and API requests with type inference
TypeScript-Safe API Responses: Structured API response types for consistent client-server communication

Modern Frontend Architecture

The template leverages the latest in frontend development:

Next.js with App Router: Utilizing React Server Components and the latest features
React: The latest React with improved performance and new features
Tailwind CSS: Next-generation utility-first CSS framework
shadcn/ui Components: Beautiful, accessible UI components built with Radix UI

Robust API Layer with Hono

Next-Stage features a powerful API implementation using Hono:

Efficient Routing: Clean API route organization with Hono's routing system
Request Validation: Integrated Zod validation via @hono/zod-validator
RPC Implementation: Type-safe Remote Procedure Call functionality for seamless client-server communication

Advanced Form Handling

The template includes a comprehensive form management solution:

React Hook Form: Performant, flexible form management with minimal re-renders
Zod Integration: Type-safe form validation through @hookform/resolvers

Supply Chain Security

Next-Stage implements proactive protection against supply chain attacks:

Bun Security Scanner: Configurable security scanning before package installation (uses @socketsecurity/bun-security-scanner by default)
Minimum Release Age: Enforces a 1-day waiting period for new package versions to allow community detection of malicious packages

Developer Experience Optimizations

Next-Stage prioritizes developer productivity:

Bun Package Manager: Fast, all-in-one JavaScript runtime and package manager
Turbopack: Default bundler in Next.js for lightning-fast builds and hot module replacement
Biome: Modern, fast JavaScript/TypeScript linting and formatting (replaces ESLint + Prettier)
Markuplint: JSX/TSX markup linting for high-quality, accessible UI components
Playwright: End-to-end testing with browser automation

🤖 AI-Driven Development

Next-Stage is built with AI-assisted development in mind, providing comprehensive support for multiple AI coding tools.

Universal AI Agent Support

The project includes AGENTS.md following the agents.md standard — a universal format that works across all AI coding agents and tools.

Supported AI Tools

AI Editors

Editor	Configuration Location
Cursor	`.cursor/rules/`
Windsurf	`.windsurf/rules/`
GitHub Copilot	`.github/copilot-instructions.md`
Kiro	`.kiro/steering/`

AI CLI Tools

Tool	Configuration File
Claude Code	`CLAUDE.md`
Google Gemini CLI	`GEMINI.md`

Rule File Hierarchy

The project maintains a hierarchical rule system for consistent AI-driven development:

Base Rules (_llm-rules/ directory):
- core-rule.md: Core task execution methodology
- nextjs-rule.md: Next.js specific development patterns
- test-rule.md: Testing guidelines and best practices
Universal Format:
- AGENTS.md: Universal format following agents.md standard
Tool-Specific Files:
- CLAUDE.md, GEMINI.md, and generated editor-specific rules

Generating Editor-Specific Rules

# Generate rules for specific editors
bun run rules:cursor
bun run rules:windsurf
bun run rules:copilot
bun run rules:kiro

# Generate rules for all supported editors
bun run rules

Next.js DevTools MCP Integration

This project includes Next.js DevTools MCP integration for AI coding assistants that support the Model Context Protocol (MCP).

Key MCP Features:

MCP tools for automating Next.js upgrades and Cache Components setup
Pre-configured prompts for common Next.js development tasks
Direct access to Next.js documentation and best practices
Browser automation integration with Playwright
Access to internal state, diagnostics, and errors from running dev servers

📁 Project Structure

next-stage/
├── public/               # Static assets
├── src/
│   ├── app/              # App Router routes
│   │   ├── _components/  # Page-specific components
│   │   ├── _styles/      # Page-specific styles
│   │   ├── layout.tsx    # Root layout
│   │   └── page.tsx      # Home page
│   ├── components/       # Reusable UI components
│   │   ├── layout/       # Layout components (header, footer)
│   │   └── ui/           # shadcn/ui components
│   ├── config/           # Configuration files
│   ├── lib/              # Utility functions
│   └── types/            # Type definitions
├── e2e/                  # E2E tests (Playwright)
├── _llm-rules/           # Base rules for AI-assisted development
├── _llm-docs/            # Documentation for AI-assisted development
├── _tasks/               # Build tasks and scripts
├── AGENTS.md             # Universal AI agent instructions
├── CLAUDE.md             # Claude CLI specific instructions
├── GEMINI.md             # Gemini CLI specific instructions
└── ...                   # Config files

Colocation Pattern

Next-Stage implements the colocation pattern for better organization:

Page-specific resources: Components, actions, and hooks are located within the page directory using underscore prefixes (_components/, _actions/, _hooks/)
Cross-cutting resources: Domain-independent components are kept in top-level directories
Clear separation: Underscore prefixes distinguish page-specific directories from route segments

🚀 Getting Started

1. Clone the Repository

bunx create-next-app@latest my-app --example https://github.com/Kazuki-tam/next-stage

2. Install Dependencies

cd my-app
bun install

3. Environment Setup (Optional)

cp .env.example .env.local
# Edit .env.local with your environment variables

4. Start the Development Server

bun dev

5. Open Your Browser

Navigate to http://localhost:3000 to see your application running.

📋 Available Commands

Command	Description
`bun dev`	Start development server
`bun build`	Build for production
`bun start`	Start production server
`bun run lint`	Run all linters
`bun run format`	Format code with Biome
`bun run check`	Run linting, formatting, and type checking
`bun run test:unit`	Run unit tests
`bun run test:e2e`	Run E2E tests with Playwright
`bun run test:e2e:ui`	Run E2E tests with UI mode
`bun run rules`	Generate AI editor rules

🚢 Deployment

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out the Next.js deployment documentation for more details.

✅ Conclusion

Next-Stage provides a solid foundation for modern web application development with Next.js. Its focus on:

Type Safety: End-to-end TypeScript with Zod validation
Developer Experience: Fast builds with Turbopack and Bun
AI-Driven Development: Comprehensive support for AI coding tools
Modern Stack: React, Tailwind CSS, and the latest ecosystem

Whether you're building a small project or a large-scale application, Next-Stage gives you the tools and patterns needed to succeed, with a special emphasis on leveraging AI assistance to accelerate your development workflow.

Take the next step in your web development journey with Next-Stage!

How to Display Cart Attributes Information Using Shopify Checkout UI Extensions

Kazuki Yonemoto — Fri, 16 Aug 2024 15:25:07 +0000

Traditionally, additional scripts were commonly used to display cart attributes on the thank you page of Shopify stores. However, this method is now deprecated, and the use of Checkout Extensibility is recommended.

Checkout Extensibility upgrade guide

To display cart attributes on the thank you page or order status page using Checkout Extensibility, the process is slightly more complex than the traditional method, but can be implemented with the following steps:

Create a custom app using Checkout UI extensions
Create a UI component to output cart attribute values
Modify the configuration file
Launch the custom app in a local environment
Deploy the custom app

1. Create a Custom App Using Checkout UI Extensions

Checkout Extensibility offers several features for customization purposes. In this case, we'll use Checkout UI extensions.

Checkout UI extensions is a feature for extending the UI of the checkout page, allowing you to display components on the thank you page or order status page. Previously only available for Shopify Plus plan, it's now accessible for Basic plan and above.

There are restrictions on the scope of Checkout UI extensions depending on the plan.
Details are provided in the Summary section.

Set up the custom app development environment with an Extension-only app. If you already have a custom app, you can start from the generate extension step.

An Extension-only app is an app that doesn't have an app screen in the Shopify admin panel and is specialized for extensions. The entire extension app is hosted on Shopify, so there's no need to prepare separate infrastructure for the app. You can develop it with a feeling similar to CLI theme building.

Build an extension-only app

This guide assumes the use of Shopify CLI. If you're new to it, please check the Shopify CLI official documentation for installation instructions.

Use the following command to initialize the custom app:

pnpm create @shopify/app

Answer the prompts to set up your project name, installation store, etc. We'll proceed with a TypeScript environment here.

Once the project is created, navigate to the target directory and run:

pnpm shopify app generate extension

When asked which type of extension to create, select Checkout UI.
Name your extension and initialize it. We'll proceed with a React TypeScript environment.

Necessary files should now be generated in the extensions directory.

2. Create a UI Component to Output Cart Attribute Values

Once the custom app development environment is set up, create a UI component to output cart attribute values.

Prerequisites

To retrieve cart attribute values, you need to implement a form using cart attributes on the cart page. Adjust the attribute names according to your expected cart attributes.

Let's implement an example where delivery date and time information is managed by cart attributes.

We assume the cart attribute names are set as follows:

delivery_date: Desired delivery date
delivery_time: Desired delivery time

This article doesn't cover how to set up cart attributes in detail, but please refer to the following document to set up a form on the cart page:

https://shopify.dev/docs/api/liquid/objects/cart#cart-attributes

Open the Checkout.tsx file and edit it as follows:

import {
  Heading,
  BlockStack,
  Text,
  useTranslate,
  useAttributeValues,
  reactExtension,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension("purchase.thank-you.block.render", () => (
  <Extension />
));

function Extension() {
  const translate = useTranslate();
  const [delivery_date, delivery_time] = useAttributeValues([
    "delivery_date",
    "delivery_time",
  ]);

  return (
    <BlockStack
      padding="tight"
      border="base"
      cornerRadius="base"
      background="base"
    >
      <Heading>{translate("title")}</Heading>
      <Text size="base">
        {translate("deliveryDate")}: {delivery_date || "Not specified"}
      </Text>
      <Text size="base">
        {translate("deliveryTime")}: {delivery_time || "Not specified"}
      </Text>
    </BlockStack>
  );
}

Components

The following components are used, but feel free to change them as needed:

Heading: Output heading
Text: Output text
BlockStack: Stack elements vertically

https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components

React Hooks

The following hooks are used:

useTranslate (optional): Multilingual support
useAttributeValues: Retrieve attribute values

The useTranslate hook is used for multilingual support, so you can omit it if not needed. If you use it, modify the file information in the locales folder as follows:

// extensions/extension-name/locales/en.default.json
{
  "title": "Delivery Date and Time",
  "deliveryDate": "Delivery Date",
  "deliveryTime": "Delivery Time"
}

useAttributeValues is necessary to retrieve cart attribute values. Use it by specifying attribute names as follows:

const [delivery_date, delivery_time] = useAttributeValues([
    "delivery_date",
    "delivery_time",
  ]);

https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/attributes/useattributevalues

reactExtension is a required function for outputting components. Specify the target as the first argument. The target indicates where the extension will be applied.

Here, we specify purchase.thank-you.block.render to output on the thank you page.

https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/block/purchase-thank-you-block-render

3. Modify the Configuration File

Open the shopify.extension.toml file and modify the target. Note that you need to register the target in the toml file as well as in the component.

# extensions/extension-name/shopify.extension.toml
[[extensions.targeting]]
module = "./src/Checkout.tsx"
target = "purchase.thank-you.block.render"

4. Launch the Custom App in a Local Environment

Launch the custom app in a local environment:

pnpm dev

After launching, press p to open the preview and confirm that the cart attribute values are displayed on the thank you page.

› Press p │ preview in your browser

You can also display cart attribute values on the order status page by adding an extension and changing the target.

export default reactExtension(
  "customer-account.order-status.block.render",
  () => <Extension />
);

[[extensions.targeting]]
module = "./src/Checkout.tsx"
target = "customer-account.order-status.block.render"

https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/block/customer-account-order-status-block-render

5. Deploy the Custom App

Once development in the local environment is complete, deploy the custom app:

pnpm run deploy

Confirm that the app is reflected in the "App Management" section of the Partner Dashboard. Install the app in your store and check it. A customization path is set up in the "Checkout" section of the store admin panel.

Add the app block and confirm that the elements are displayed.

Note

The components available in Checkout UI extensions are strictly limited. Therefore, you cannot use custom UI components or HTML tags.

Even if you write unavailable tags and errors occur, no error messages will be displayed on the front-end screen. It's recommended to check the terminal for error messages regularly.

Summary

We've introduced how to display cart attribute values using Checkout UI extensions. By using Checkout Extensibility, you can achieve safer and more flexible customization.

However, the applicable range differs depending on the plan, so please check the available range before proceeding with implementation. The content introduced in this article is available for Basic plans and above. (As of August 16, 2024)

https://help.shopify.com/en/manual/checkout-settings/customize-checkout-configurations

Automating Slack Notifications for Google Forms Responses: A Simple Guide Using Google Apps Script (GAS) and Slack App

Kazuki Yonemoto — Mon, 18 Dec 2023 02:39:09 +0000

You may want to notify your internal Slack channels when responses are received from Google Forms. While there are several approaches to implementation, including using integration tools, this article introduces a method using Google Apps Script (GAS) and Slack App.

I personally recommend this method for its simplicity and flexibility.

This article involves some programming, but it is presented in a way that even non-engineers can easily implement by copy-pasting.

The necessary steps for implementation are as follows:

Creating a Google Form
Creating a Slack App
Creating a Google Apps Script
Setting up Google Apps Script Triggers
Testing

Creating a Google Form

First, create a form. You are free to set up the form items as you like. Here, I created a form with the following items:

Name of person in Charge: Short Text
Email Address: Short Text
Content of Inquiry: Long Text

https://www.google.com/intl/en_us/forms/about/

Creating a Slack App

Click the link below and select Create New App.
https://api.slack.com/apps

Choose From scratch, register the app name and workspace.

Set up the app display settings. You can choose any content you like.

From the admin panel's left sidebar, select Incoming Webhooks, turn it ON to activate. Click Add New Webhook to Workspace, and select the channel to receive notifications.

Copy and save the Webhook URL of the activated channel.

Creating a Google Apps Script

Create a script to forward responses from Google Forms to Slack. Open the script editor from the form you created earlier.

Copy and paste the following code into the editor, replacing SLACK_WEBHOOK_URL with the Webhook URL you copied earlier. Save the file as sendSlack.gs.

Be careful not to disclose the Webhook URL to unauthorized persons.

function sendSlackMessage(body) {
  const SLACK_WEBHOOK_URL = "replace this";
  if (body.length === 0) {
    return;
  }

  const options = {
    headers: {
      "Content-Type": "application/json",
    },
    method: "post",
    payload: JSON.stringify({
      text: body,
    }),
  };

  try {
    UrlFetchApp.fetch(SLACK_WEBHOOK_URL, options);
  } catch (error) {
    Logger.log("Error sending Slack message: " + error.toString());
  }
};

function createMessageBody(itemResponses) {
  let body = "Please check the following inquiry.";

  itemResponses.forEach(response => {
    const question = response.getItem().getTitle();
    const answer = response.getResponse();
    body += "\n\n【" + question + "】\n\n" + answer;
  });

  return body;
}

function main(e) {
  const itemResponses = e.response.getItemResponses();
  const body = createMessageBody(itemResponses);
  sendSlackMessage(body);
}

Setting up Google Apps Script Triggers

Set up a trigger so that the process you just created is executed when a response is received in the Google Form. Select Triggers from the left nav, then click Add Trigger. Set it up as follows and save.

Function to execute: main
Execute the deployment: Head
Event source: Form
Event type: On form submit

Testing

You are now ready. When you submit a response from the Google Form, a notification should arrive in the Slack channel.

Conclusion

Using Google Apps Script and Slack App allows direct integration without external tools. This reduces setup effort and makes customizing notifications and processing methods easier.

Using ChatGPT to customize the processing is also recommended. I hope this article contributes to your life hacks.

How to use GPT-3 in Google Apps Script

Kazuki Yonemoto — Tue, 24 Jan 2023 16:43:14 +0000

How to use GPT-3 in Google Apps Script

GPT-3 (Generative Pre-trained Transformer 3) is a state-of-the-art language generation model developed by OpenAI. It has been trained on a diverse range of internet text and can generate human-like text on a wide range of topics.

Why don't you use GPT-3 in Google Sheets? It's definitely useful if you could make it possible.

I prepared two options to use GPT-3 with Google Sheets. You can follow the tutorial according to your purpose and skill set.

Clone the sample sheet which has already deployed scripts.
Create a new sheet and deploy scripts from your local development environment.

Create your account at OpenAI

You need to create an account at the first.
https://openai.com/api/

Access to OpenAI API keys, create a new secret key and copy it to your clipboard.

1. Clone the sample sheet which has already deployed scripts

You can clone this sample sheet if you want to use GPT-3 function immediately without deployment.

📈 gas-gpt3-sample

Note: You need to set the OpenAI API key into script properties even though you cloned the sample sheet.

How to set the OpenAI API key into script properties

Open your Apps Script project.
At the left, click Project Settings The icon for project settings.
To add the first property, under Script Properties click Add script property.
To add second and subsequent properties, under Script Properties click Edit script properties > Add script property.
For Property, enter the key name. The key name is must be OPENAI_API_KEY.
For Value, enter the secret key you generated before.

2. Create a new sheet and deploy scripts from your local development environment

Creating a repository from this template and cloning the repository.

📖 gas-gpt-starter

You need to install Deno if you want to deploy and develop in your local environment.

Deno v1.29.4 or higher

🦕 How to install Deno

Check out how to use and follow the documentaion.

📖 gas-gpt-starter: How to use

3. GPT-3 function

Authorize this project's script by execution
Use GPT3() in your Google Workspace

GPT3(prompt, maxTokens, model, temperature)

// Example 1 on Google Sheets
=GPT3("Hello, world!")

// Example 2 on Google Sheets
=GPT3(A1, 200)

// Example 3 on Google Sheets
=GPT3(A1, 300, "text-babbage-001", 0.5)

Parameters

prompt: The prompt to generate completions for, encoded as a string, array of strings, array of tokens, or array of token arrays.
maxTokens: The maximum number of tokens to generate in the completion.
model: ID of the model to use.
temperature: What sampling temperature to use. Higher values means the model will take more risks.

Conclusion

The combination between GPT-3 and Google Sheets is really useful. I hope this article will help you improve your productivity.

Sending ideas into Google Sheets by emoji reaction from Slack channel

Kazuki Yonemoto — Sat, 22 Oct 2022 14:39:22 +0000

Slack is one of the favorite messaging apps for businesses.
It gives us a chatroom shared among all members of an organization.

Have you ever wanted to save good ideas posted in Slack channel into Google Sheets?

Zapier makes it possible.

📖 Learn more Zapier

1. Sign up for Zapier

Open this link and create your account.
Zapier | sign up

2. Create a workflow

You can use this workflow have been already set up.

Create a row in Google Sheets from Slack messages with new reactions

Connect Slack and Google Sheets by following the guide Zapier shows.

Create a new sheet in Google Sheets when you see the bellow screen.

You need to add header items like this and delete rows after the second row.

Contributor	Idea
Message user name	Message text

Set Message user name and Message text received from slack into the input fields of Zapier.

3. Test workflow action

Let's test your workflow action!

4. Publish your workflow

Publish your workflow after the workflow test.

Conclusion

I hope this tutorial will help your team to collect ideas and issues.

How to run Whisper on Google Colaboratory

Kazuki Yonemoto — Fri, 23 Sep 2022 13:11:59 +0000

Whisper is a general-purpose speech recognition model open-sourced by OpenAI.

According to the official article, the automatic speech recognition system is trained on 680,000 hours of multilingual and multitask supervised data collected from the web.

📖 Introducing Whisper

I was surprised by Whisper’s high accuracy and ease of use.
Whisper provides so useful command line that you can feel free to try it.

📖 Command-line usage

I'll present how to run Whisper on Google Colaboratory here.
You can refer to this Colab notebook if you want to try Whisper immediately on Google Colaboratory.

📖 Colaboratory whisper-mock-en

Create a new Colab notebook

You need to crate a new Colab notebook from your Google Drive at the first.

You have to make sure your notebook is using a GPU. To do that, change a runtime type to GPU from the menu.

Install package

You need to install a package like the following line to run Whisper.

# Install packages
!pip install git+https://github.com/openai/whisper.git

Add folders

Add this code to create new folders when you click the play button.

import os

# Add folders
checkContentFolder = os.path.exists("content")
checkDownLoadFolder = os.path.exists("download")
if not checkContentFolder:
  os.mkdir("content")
if not checkDownLoadFolder:
  os.mkdir("download")

Upload an audio file

You have to upload at least an audio file into the content folder after you've installed packages and added folders.

Transcription with Python

You can modify the file name of the audio and target language to translate.

import whisper

fileName = "sample.m4a"
lang = "en"
model = whisper.load_model("base")

# Load audio
audio = whisper.load_audio(f"content/{fileName}")
audio = whisper.pad_or_trim(audio)

mel = whisper.log_mel_spectrogram(audio).to(model.device)

# Output the recognized text
options = whisper.DecodingOptions(language=lang, without_timestamps=True)
result = whisper.decode(model, mel, options)
print(result.text)

# Write into a text file
with open(f"download/{fileName}.txt", "w") as f:
  f.write(f"▼ Transcription of {fileName}\n")
  f.write(result.text)

Download a transcription file

It would be easy to download a transcription file if you added this code.

from google.colab import files
!zip -r download.zip download
files.download("download.zip")

Let's run Whisper on Google Colaboratory

Let's check how your code works on Colab notebook.
I prepared a Colab notebook to use Whisper, so you can copy this notebook.

📖 Colaboratory whisper-mock-en

Conclusion

I hope this tutorial got you to generate your first transcription.

Pure Liquid, a starter kit for static websites with Liquid template

Kazuki Yonemoto — Sun, 18 Sep 2022 16:32:13 +0000

There are a lot of template engines for static websites and dynamic websites. It takes time to learn a new template engine, especially for junior developers.

I wanted to standardize using the same template engine picked from Pug, EJS, Liquid, and so on in the project team to solve the issue.

It's been increased to build e-commerce sites with Shopify recently in my team. Shopify adopts Liquid as a template engine for theme development and introduces it to third-party developers.

Liquid is a template language created by Shopify, but you actually can leverage it to develop other products than Shopify.

For example, it might be more productive that you could develop a static website with Liquid if you usually build e-commerce sites with Shopify.

I made a starter kit for static websites and Jamstack with the liquid template from the above point of view.

Pure Liquid

The name of starter kit is "Pure Liquid".
Pure Liquid enables you to develop a website more effectively than before if you are a theme developer for Shopify.
You can also choose the Jamstack pattern in this kit.

💧 Pure Liquid

Features

Built-in static site generator
Breaking HTML smaller files with Liquid
HTML Validation with HTML-validate
Lint TS files with ESLint
Lint SCSS files with Stylelint
Format code with prettier
Compress images
Creating SVG sprites
Built-in test runner with Jest and Playwright

Requirements

You need to follow these requirements below. I recommend you to use Yarn as a package manager.

Quick overview

You can set up a static website by running one command.
Please replace <YOUR-PROJECT-NAME> with your own.

yarn create pure-liquid <YOUR-PROJECT-NAME>

You are ready to develop, so follow the below commands to start.

cd <YOUR-PROJECT-NAME> && yarn build && yarn start

You'll see a default page when you access http://localhost:8080.

Thank you!

I appreciate you for reading this article through to the end.
I'll be trying to keep this starter kit as up-to-date as possible. Cheers!

How to make a reminder posts messages from Google Sheets to Slack

Kazuki Yonemoto — Mon, 29 Aug 2022 09:15:00 +0000

You sometimes would like to remind something from Google Sheets you usually manage if you are a heavy Google Sheets user.

I'll introduce how to make a reminder that posts messages from Google Sheets to Slack.

This video shows our goal in this tutorial.

Prerequisites

You need to follow the below prerequisite before you start this tutorial.

Create a new sheet in Google sheets
Create a workspace or join an existing workspace in Slack
Use gas-sheets2slack

Settings of Google Sheets

Create a sheet to post messages to Slack.

Notification	Title	Content	Url
2022/08/29	Sample title	This is a sample text.	https://dev.to/

Open Apps Script from within Google Sheets.

📖 Lean more Extending Google Sheets

Get the script ID in Apps Script.
⚠️ Save the ID to use it in development.

Settings of Slack apps

Open https://api.slack.com/apps and click “Create New App”.

Select "From scratch".

Set up display information as you want.

In your left sidebar, navigate to "Incoming Webhooks" and then activate it.

Add new webhook to workspace and copy webhook URL.
⚠️ Save the webhook URL to use it in development.

Google Apps Script

We want to use Apps Script to post messages from Google Sheets regularly.

I prepared a template for this project, so you don't have to spend extra time to develop.

👉 gas-sheets2slack

1. Clone template

Open the repository and click Use this template.

Clone the repository and install dependencies.

yarn install

2. Login Google account

Authorize management of your Google account's Apps Script projects.

yarn clasp login

3. Create files

Create a .clasp.json at the root, and then add these settings.
Open App script from your spreadsheet and check out a script Id at the setting page.

{
  "scriptId": "<SCRIPT_ID>",
  "rootDir": "./dist"
}

Create a .env at the root, and then add "SLACK_WEBHOOK_URL".

SLACK_WEBHOOK_URL=<SLACK_WEBHOOK_URL>

4. Upload a script project

Upload your script project's files from your local with this command.

yarn deploy

Click "Add trigger" from the trigger menu.
Set up these options like this.

Apps Script finds out if the list has a notification date the same as today from your sheet every day.
Apps Script posts a message when it finds out the date same as today.

Run Apps Script

Run "main.gs" in the editor menu and check out if you can receive a message in your slack channel.

Conclusion

I hope this tutorial will help you to enhance your reminder flow.

👉 gas-sheets2slack

Starter template for Shopify email notifications

Kazuki Yonemoto — Thu, 11 Aug 2022 09:59:00 +0000

Shopify provides you with default email templates that you can customize, so you don't need to make them from scratch.

However, you sometimes would like to edit their content and design. You need to know the liquid template language created by Shopify and written in Ruby in that case.

It's so hard to customize email templates in Liquid without any developmental environment at local that I've created a starter template that you can preview email templates at local.

🚀 shopify-email-notification

Features

Previewing notification mails at local server
Hot reloading of local server
Referring to default email templates which Shopify provides
Based on Liquid templates
Editable notification variables
TypeScript support
Multi language support (English and Japanese)
Built in useful commands

Requirements

How to use

You can directly generate a new repository from this repository.

🚀 shopify-email-notification

Please click "Use this template".

Clone your project repository

Clone the repository you generated from shopify-email-notification.

git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

Install packages

Install all dependencies for a project with bellow command.

pnpm install

Create a `.env` file (Optional)

Create a .env at the root, and then add your shopify admin url. Replace your-shop-name with yours.

ADMIN_URL=https://your-shop-name.myshopify.com/admin/

Start development

Start your project in development mode.

pnpm start

Open http://localhost:4000, and then you can preview notification templates.

You can also open your store admin page with this command instantly.

pnpm admin

I recommend you use the format command because it notifies your syntax errors.

pnpm format

That's all to do before you start your project.

I recommend you check out the command list before you get started.

📖 Useful command list

Thank you!

I hope that shopify-email-notification is helpful for you.

How to build a knowledge system with Slack and Notion

Kazuki Yonemoto — Sat, 16 Apr 2022 10:53:10 +0000

Have you ever felt like managing information flows more efficiently if you usually use Slack?

I want to share tips to manage information by Slack and Notion in this article.

Knowledge system by Slack and Notion

You need to follow the below prerequisite before you start this tutorial.

Slack paid plan
Slack account
Notion account
Google account
Google sheets

We actually need Google sheets to post messages to Notion from Slack.

Settings of Notion

Create a table to stock information.

Question: title
Answer: rich_text
URL: url
Tags: multi_select

Get a database's ID in Notion.
📖 Lean more Notion databases

Use Copy link to view from the menu.

https://www.notion.so/{workspace_name}/{database_id}?v={view_id}

⚠️ Save the ID to use it in development.

In your left sidebar, navigate to Settings & Members and then the Integrations tab.

Click "Develop your own integrations".

Click the + New integration button.

Setup settings of integration.

Copy the internal integration token.

⚠️ Save the token to use it in development.

Invite the integration which you created from the share menu.

Settings of Google Sheets

Create a sheet to recieve messages from Slack and post them to Notion.

Question	Answer	URL	Tags
sample text	sample text	https://dev.to/	sample, tags

Open Apps Script from within Google Sheets.

📖 Lean more Extending Google Sheets

Get the script ID in Apps Script.

⚠️ Save the ID to use it in development.

Settings of Slack

We'll make an automation task with Workflow Builder in Slack.
📖 Lean more Workflow Builder

Create a new workflow.

Workflow steps

Follow this order and set up these settings.

Emoji reaction
Send a form
Add a spreadsheet row
Send a message

1. Emoji reaction

Choose "Emoji reaction" to start this workflow.
Feel free to select it.

This workflow starts when someone adds the emoji reactions in the channel you've selected.

2. Send a form

Select "Send a form" and add Questions like this below.

Question: Long answer
Answer: Long answer
URL: Short answer
Tags: Short answer

Make Question and Answer to be required.

3. Add a spreadsheet row

We can use Google Sheets for Workflow Builder to save and manage messages.

📖 Lean more Google Sheets for Workflow Builder

Choose "Add a spreadsheet row" from workflow options.

4. Send a message

Create a message to respond to users.

Let's test the workflow in your slack channel.

Of course, it's still not possible to post the message from Slack to Notion.

Deploy Google Apps Script

We need to deploy Apps Script to post the message via Google Sheets from Slack to Notion.

I prepared a template for this project, so you don't have to spend extra time to develop.

https://github.com/Kazuki-tam/gas-slack2notion

1. Clone template

Open the repository and click Use this template.

Clone the repository and install dependencies.

Install Clasp at first if you haven't done it yet.

npm install -g @google/clasp

yarn install

📖 Learn More Clasp

2. Login google account

Authorize management of your Google account's Apps Script projects.

npx clasp login

3. Create files

Create a .clasp.json at the root, and then add these settings.
Open App script from your spreadsheet and check out a script Id at the setting page.

{
  "scriptId": "<SCRIPT_ID>",
  "rootDir": "./dist"
}

Create a .env at the root, and then add your token and database id.

NOTION_TOKEN=<YOUR_NOTION_TOKEN>
DATABASE_ID=<YOUR_DATABASE_ID>

4. Upload a script project

Upload your script project's files from your local with this command.

yarn deploy

To set up an installable trigger, click on the Trigger menu.
Click on it to add a trigger.

Set up these options like this.

Test workflow

That's all you have to setup to create this project's workflow. Check if it works without problems.

Conclusion

It's really important to share your knowledge and experience in your team and company. I hope this tutorial will help you to enhance your knowledge system.

Starter kit for Shopify theme developers

Kazuki Yonemoto — Mon, 07 Mar 2022 04:45:08 +0000

I've created a starter kit for Shopify theme developers.
You can customize a theme and build a new one from scratch efficiently.

I've prepared two starter kits to develop the Shopify theme. I recommend you use shopify-quick-theme-mix if you want to connect your Shopify store with the GitHub repository.

🚀 shopify-quick-theme
🚀 shopify-quick-theme-mix

We've always used Shopify Slate and Shopify Theme Kit to develop the Shopify theme.

Shopify recommends using Shopify CLI at working on Online Store 2.0 especially. (2023/10)

📖 Choosing between Shopify CLI and Theme Kit

These starter kits work on Shopify CLI fundamentally.

Requirements

Node v22 or higher
Shopify CLI v3 or higher

Please refer to Install Shopify CLI if you haven't installed Shopify CLI yet.

Features

Abstracting Shopify CLI command
Bundle files with Rspack
Transpile SCSS to CSS
Lint TS files with Biome
Built-in test runner with Vitest and Playwright

How to use

You can directly generate a new repository from this repository.

🚀 shopify-quick-theme
🚀 shopify-quick-theme-mix

Please click "Use this template".

Clone your project repository

Clone the repository you generated from shopify-quick-theme or shopify-quick-theme-mix.

git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

Install packages

Install all dependencies for a project with bellow command.

pnpm install

Create a .env file

Create a .env file at the root directory, and then add your SHOPIFY_FLAG_STORE value at least. Replace the placeholder YOUR_STORE_NAME with your actual store name.

SHOPIFY_FLAG_STORE=YOUR_STORE_NAME

Create a new theme

Use newTheme command to create a new theme from scratch. This command creates a copy of Dawn.

pnpm newTheme

Customize an existing theme

Use pull:new command to customize an existing theme.

pnpm pull:new

Add CSS and JavaScript into your theme files

Add these tags in <head></head> section.

{{ 'custom-style.css' | asset_url | stylesheet_tag }}

<script src="{{ 'custom-script.js' | asset_url }}" defer></script>

Start development

Run a start command.

pnpm dev

GitHub integration

shopify-quick-theme doesn't support the Shopify GitHub integration because Shopify allows only branches that match the default Shopify theme folder structure. I recommend you to use git subtree or shopify-quick-theme-mix.

shopify-quick-theme-mix supports Shopify GitHub integration.

That's all to do before you start your project🎉.

How to send emails to multiple addresses at once from Google Sheets

Kazuki Yonemoto — Sun, 27 Feb 2022 04:00:23 +0000

I recommend you to check out this article if you are looking for a tool to send emails to multiple addresses.

I want to share how to make a tool to send a lot of emails at once with Google Sheets and Google Apps Script in this article.

Create a new spreadsheet

Prepare a new spreadsheet at first and create two sheets like below.

Email List
Email Content

Email List Sheet

Write down a title and descriptions in the first row, and then fill the items' names in the second row.

No.	Company	Department	Person in charge	Email address
1	Test Inc.	QA	Test Name	`example@test.com`
2	Smaple Inc.	Marketing	Sample Name	`example@test2.com`

Click on Insert > Drawing from within Google Sheets.
Make a send button as you like and assign a main script.

📖 Add A Google Sheets Button To Run Scripts

Email Content Sheet

Create this table and fill the content of the email you want to send.
If you want to specify multiple CCs and BCCs, connect them with commas.

You can also use these variables to change each content as send emails.

Company: {COMPANY}
Department: {DEPARTMENT}
Person in charge: {PIC}

Item	Description
Test email address	`example@test.com`
CC	`example@testcc.com`
BCC	`example@testbcc.com`
Body	Email content

Click on Insert > Drawing from within Google Sheets.
Make a test email button as you like and assign a testEmail script.

Prepare Apps Script

Open Apps Script from within Google Sheets.

📖 Extending Google Sheets

Use this template if you would like to customize Google Apps Script.

🗂 gas-spreadsheet-mail

Otherwise create a sendEmail.gs, and then copy and paste this code.

function main(){}(()=>{"use strict";var e,t,a,r={708:(e,t,a)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.getUserName=void 0,t.getUserName=function(){var e=Session.getActiveUser(),t=ContactsApp.getContact(e.toString());return{fullName:t.getFullName(),familyName:t.getFamilyName(),givenName:t.getGivenName()}}},598:(e,t,a)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.sendEmailToAll=void 0;var r=a(708);t.sendEmailToAll=function(e,t,a,n){var i=SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Email Content"),l=SpreadsheetApp.getUi(),o=(0,r.getUserName)(),s=o.fullName,c=o.familyName,u=o.givenName;if(i){for(var d="",p="",m="",g="",f=i.getLastRow()-1,v=0;v<f;v++){var h=i.getRange(2+v,1).getValue(),A=i.getRange(2+v,2).getValue();"CC"===h&&(m=A),"BCC"===h&&(g=A),"Subject"===h&&(d=A.replace("{COMPANY}",t).replace("{DEPARTMENT}",a).replace("{PIC}",n)),"Body"===h&&(p=A.replace("{COMPANY}",t).replace("{DEPARTMENT}",a).replace("{PIC}",n).replace("{MY_FULL_NAME}",s).replace("{MY_FAMILY_NAME}",c).replace("{MY_LAST_NAME}",u))}var E={cc:m,bcc:g};GmailApp.sendEmail(e,d,p,E)}else l.alert("🚨 The sheet name may be incorrect. It should be Email Content.")}},690:(e,t,a)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.checkDuplicate=void 0,t.checkDuplicate=function(e){return e.filter((function(e,t,a){return a.indexOf(e)===t&&t!==a.lastIndexOf(e)}))}},506:(e,t,a)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.validateEmail=void 0,t.validateEmail=function(e){return/^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]+.[A-Za-z0-9]+$/.test(e)}}},n={};function i(e){var t=n[e];if(void 0!==t)return t.exports;var a=n[e]={exports:{}};return r[e](a,a.exports,i),a.exports}i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),e=i(598),t=i(506),a=i(690),i.g.main=function(){var r=SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Email List"),n=SpreadsheetApp.getUi(),i=Browser.msgBox("Confirmation","Are you sure to send email？👀",Browser.Buttons.YES_NO);if(r&&"yes"==i){for(var l=2,o=3,s=4,c=5,u=r.getLastColumn(),d=1;d<=u;d++){var p=r.getRange(2,d).getValue();"Company"===p&&(l=d),"Department"===p&&(o=d),"Person in charge"===p&&(s=d),"Email address"===p&&(c=d)}var m=r.getLastRow()-2,g=[],f=[],v=[];for(d=0;d<m;d++){var h=r.getRange(3+d,l).getValue(),A=r.getRange(3+d,o).getValue(),E=r.getRange(3+d,s).getValue(),N=r.getRange(3+d,c).getValue(),y={company:h,department:A,pic:E,address:N};(0,t.validateEmail)(N)?(g.push(y),f.push(N)):""===N||(0,t.validateEmail)(N)||v.push(N)}if(v.length>0)return n.alert("🚨 Invalid email address: ".concat(v.join(", ")));var _=(0,a.checkDuplicate)(f);if(_.length>0)return n.alert("🚨 Duplicate email address: ".concat(_.join(", ")));g.forEach((function(t){""!=t.address&&(0,e.sendEmailToAll)(t.address,t.company,t.department,t.pic)})),n.alert("📤 Sent email","It's done!",n.ButtonSet.OK)}else"no"==i?n.alert("Send canceled!"):n.alert("🚨 The sheet name may be incorrect. It should be Email List.")}})();

🗂 sendEmail.gs

Create one more script file named testEmail.gs in Apps Script.

function testEmail(){}(()=>{"use strict";var e,t,a={598:(e,t)=>{t.__esModule=!0,t.sendEmailToAll=void 0,t.sendEmailToAll=function(e,t,a,r){var i=SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Email Content"),n=SpreadsheetApp.getUi();if(i){for(var l="",o="",s="",d="",c=i.getLastRow()-1,p=0;p<c;p++){var g=i.getRange(2+p,1).getValue(),u=i.getRange(2+p,2).getValue();"CC"===g&&(s=u),"BCC"===g&&(d=u),"Subject"===g&&(l=u),"Body"===g&&(o=u.replace("{COMPANY}",t).replace("{DEPARTMENT}",a).replace("{PIC}",r))}var m={cc:s,bcc:d};GmailApp.sendEmail(e,l,o,m),n.alert("📤 Sent email","It's done!",n.ButtonSet.OK)}else n.alert("🚨 The sheet name may be incorrect. It should be Email Content.")}},506:(e,t)=>{t.__esModule=!0,t.validateEmail=void 0,t.validateEmail=function(e){return/^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]+.[A-Za-z0-9]+$/.test(e)}}},r={};function i(e){var t=r[e];if(void 0!==t)return t.exports;var n=r[e]={exports:{}};return a[e](n,n.exports,i),n.exports}i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),e=i(598),t=i(506),i.g.testEmail=function(){var a=SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Email Content"),r=SpreadsheetApp.getUi();if(a){for(var i="",n=a.getLastRow()-1,l=0;l<n;l++){var o=a.getRange(2+l,1).getValue(),s=a.getRange(2+l,2).getValue();"Test email address"===o&&""!==s&&(i=s)}(0,t.validateEmail)(i)?(0,e.sendEmailToAll)(i,"Test Inc.","QA","Test Name"):r.alert("🚨 Invalid email address!")}}})();

🗂 testEmail.gs

Test Apps Script

That's all to set up the script. Let's send emails to confirm it is not a problem with this tool.

Notes

You need to pay attention to Gmail sending limits when you use Google Apps Script to send emails.

https://support.google.com/a/answer/166852?hl=en