Forem: Ryota Murakami

I've just released git-gpt-commit v0.9.0! 🎉

Ryota Murakami — Mon, 12 May 2025 20:37:23 +0000

I've just released git-gpt-commit v0.9.0 — a Git extension that uses OpenAI's GPT models to automatically generate commit messages via the git gpt commit command.

📺 Demo Video

What’s New in v0.9.0 ✨

🚀 Support for GPT-4o

The default model has been upgraded to OpenAI’s GPT-4o.
This model is known for its blazing-fast response speed (about twice as fast as GPT-4.1), allowing it to generate commit messages in an instant.
It’s also very cost-efficient, at half the price of GPT-4-turbo.

🌐 Language Selection Command

Previously, only English was supported. Now, with:

git gpt lang

You can choose from 12 languages for your commit messages:
English, Spanish, Japanese, French, German, Italian, Korean, Chinese (Simplified & Traditional), Dutch, Russian, and Brazilian Portuguese.

🏷️ Prefix Toggle Command

Previously, there was no option to add prefixes to your commits. Now, with:

git gpt prefix

You can toggle the inclusion of commit prefixes like feat:, fix:, or refactor:.

🔑 API Key Management

Previously, you had to write your API key in a .env file in your project directory. Now, with:

git gpt open-api-key

You can now safely add and manage your OpenAI API key directly from the CLI.
The traditional .env method is still supported as well.

⚙️ Configuration Management

git gpt config

You can now view all your current settings at once.
Checking and updating configuration has never been easier.

How to Use

Once installed, start by registering your OpenAI API key using the command above.

Then, just stage your changes with git add, and run:

git gpt commit

The tool will analyze the staged changes, send them to the GPT model, and generate a context-aware commit message.
You can accept the suggestion as-is or cancel and write your own message if you'd prefer.

Installation

You’ll need an OpenAI API key.

npm install -g @laststance/git-gpt-commit

Why I Created git-gpt-commit

While IDEs like VSCode and Cursor offer AI-assisted commit message generation, I couldn’t find a CLI tool that does the same — and that’s where I spend most of my time working with Git.
Sometimes I just don’t feel like coming up with a message, so I wanted to make the process easier 😅

Most of the features I personally wanted are now implemented, so I’m pretty happy with this release.
If you have ideas to make it even better, feel free to send a PR — I’d love to see your contributions! 😄

Links: GitHub｜npm

Update eslint-config-ts-prefixer@v0.23.3

Ryota Murakami — Thu, 17 Aug 2023 10:28:00 +0000

Here is original post

I've published eslint-config-ts-prefixer@v0.23.3.

eslint-config-ts-prefixer is ESLint rule set that integrated prettier as one of ESLint rule and specialized fixable rule set.
And

📦 Zero extend for explicit rules.
💅 Prettier integration, specialized fixable import rules.
✅ Meamingful rules code behavior.

I added these new rules this update.
One of my favorite rule is @typescript-eslint/promise-function-async.\
This is available --fix so auto adding async keyword property position.

1. @typescript-eslint/no-misused-new

This rule enforces that constructors within classes are marked with the new keyword.

// Bad
interface Foo {
  new (): Foo;
}

// Good
class Foo {
  constructor() {}
}

2. @typescript-eslint/no-misused-promises

This rule avoids using promises in places not designed to handle them.

// Bad
addEventListener('click', async () => {
  await doSomethingAsync();
});

// Good
addEventListener('click', () => {
  doSomethingAsync();
});

3. @typescript-eslint/promise-function-async

This rule requires any function or method that returns a Promise to be marked async.

// Bad
function foo(): Promise<void> {
  return Promise.resolve();
}

// Good
async function foo(): Promise<void> {
  return;
}

4. no-await-in-loop

This rule disallows await inside of loops.

// Bad
for (let i = 0; i < 10; i++) {
  await asyncFunction()
}

// Good
const promises = []
for (let i = 0; i < 10; i++) {
  promises.push(asyncFunction())
}
await Promise.all(promises)

5. no-return-await

This rule disallows unnecessary return await.

// Bad
async function foo() {
  return await bar()
}

// Good
async function foo() {
  return bar()
}

6. prefer-promise-reject-errors

This rule requires using Error objects as Promise rejection reasons.

// Bad
Promise.reject('something went wrong')

// Good
Promise.reject(new Error('something went wrong'))

7. require-atomic-updates

This rule disallows assignments that can lead to race conditions due to usage of await or yield.

// Bad
async function foo() {
  c = a + b
  await somethingAsync()
  c = c + 1 // This might be an outdated value of c
}

// Good
async function foo() {
  const temp = a + b
  await somethingAsync()
  c = temp + 1
}

Thank you for all yours.
Really welcome ESLint & TS setting improvement feedback!

vite-rtk-query update

Ryota Murakami — Wed, 16 Aug 2023 21:58:00 +0000

here is original post

I've just updated vite-rtk-query.

React Router(v6) setup

Added React Router and redux-first-history.

redux-first-history allow dispatch page transition witihin React Router.

CSS Modules nesting

Added postcss-nesting for more convenient styling with CSS Modules.
For skip Redux peer depencency error, please use npm i --force option!

Thank you for all users.

Diving into Chrome Extension Development: 3 Essential Resources

Ryota Murakami — Sat, 22 Jul 2023 05:44:00 +0000

Hey there, aspiring Chrome extension developers! Feeling a bit lost on where to start? Don't worry, we've got you covered. Here are three essential links that will guide you through the process. Just follow them in order, and you'll be on your way to creating your very own Chrome extension.

Chrome Extension Developer Guide - This is the official guide from Google that covers everything you need to know about creating Chrome extensions.

Chrome Extension Samples - This is a collection of sample extensions that you can use as a starting point for your own extension.

Chrome Extension Boilerplate - This is a boilerplate project that provides a basic structure for building Chrome extensions.

Best of luck, and happy coding!

Testing React DnD by React Testing Library

Ryota Murakami — Tue, 01 Sep 2020 15:09:47 +0000

This post show how to testing React DnD Chessboard App with React Testing Library.

full code example is here.
https://github.com/laststance/react-testing-library-react-dnd-chessboard-example

Example Code

Knight.tsx



import React from 'react'
import { ItemTypes knightImage} from './Game'
import { useDrag, DragPreviewImage } from 'react-dnd'

const Knight: React.FC = () => {
  const [{ isDragging }, drag, preview] = useDrag({
    item: { type: ItemTypes.KNIGHT },
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
  })

  return (
    <>
      <DragPreviewImage connect={preview} src={knightImage} />
      <div
        ref={drag}
        style={{
          display: 'block',
          opacity: isDragging ? 0.5 : 1,
          fontSize: '64px',
          fontWeight: 'bold',
          cursor: 'move',
        }}
      >
        ♘
      </div>
    </>
  )
}

export default Knight

BoardSquare.tsx



Drop area side
import React from 'react'
import Square from './Square'
import Overlay from './Overlay'
import { canMoveKnight, moveKnight, X, Y } from './Game'
import { ItemTypes } from './Game'
import { useDrop } from 'react-dnd'

interface Props {
  x: X
  y: Y
  index: number
}

const BoardSquare: React.FC<Props> = ({ x, y, index, children }) => {
  const black = (x + y) % 2 === 1
  const [{ isOver, canDrop }, drop] = useDrop({
    accept: ItemTypes.KNIGHT,
    drop: () => moveKnight(x, y),
    canDrop: () => canMoveKnight(x, y),
    collect: (monitor) => ({
      isOver: !!monitor.isOver(),
      canDrop: !!monitor.canDrop(),
    }),
  })

  return (
    <div
      role="gridcell"
      ref={drop}
      data-testid={children ? 'KnightPosition: ' + index : index}
      style={{
        position: 'relative',
        width: '100%',
        height: '100%',
      }}
    >
      <Square black={black}>{children}</Square>
      {isOver && !canDrop && <Overlay color="red" data-testid="RedOverlay" />}
      {!isOver && canDrop && (
        <Overlay color="yellow" data-testid="YellowOverlay" />
      )}
      {isOver && canDrop && (
        <Overlay color="green" data-testid="GreenOverlay" />
      )}
    </div>
  )
}

export default BoardSquare

integration.test.tsx



import React from 'react'

import '../index.css'

import { render, screen, fireEvent } from '@testing-library/react'

import Board from '../Board'

import { observe, KnightPosition, releaseObserver } from '../Game'

function dragAndDrop(knight: HTMLElement, cell: HTMLElement) {

  fireEvent.dragStart(knight)

  fireEvent.dragEnter(cell)

  fireEvent.dragOver(cell)

  fireEvent.drop(cell)

}

function dragHold(knight: HTMLElement, cell: HTMLElement) {

  fireEvent.dragStart(knight)

  fireEvent.dragEnter(cell)

  fireEvent.dragOver(cell)

}

beforeEach(() => {

  /*


Every time Knight initial position: "57"
and Knight droppable positions are "40", "42", "51"
when you got all cells with screen.getAllByRole('gridcell')
*/
observe((knightPosition: KnightPosition) =>
render(<Board knightPosition={knightPosition} />)
)
})



afterEach(() => {

  releaseObserver()

})

test('should exist Knight with certain visual on board', () => {

  const Knight = screen.getByText('♘')

const display = window.getComputedStyle(Knight).getPropertyValue('display')

  const opacity = window.getComputedStyle(Knight).getPropertyValue('opacity')

  const fontSize = window.getComputedStyle(Knight).getPropertyValue('font-size')

  const fontWeight = window

    .getComputedStyle(Knight)

    .getPropertyValue('font-weight')

  const cursor = window.getComputedStyle(Knight).getPropertyValue('cursor')

expect({

    display: display,

    opacity: opacity,

    fontSize: fontSize,

    fontWeight: fontWeight,

    cursor: cursor,

  }).toStrictEqual({

    display: 'block',

    opacity: '1',

    fontSize: '64px',

    fontWeight: 'bold',

    cursor: 'move',

  })

})

test('should board have 64 cells', () => {

  const boardSquares = screen.getAllByRole('gridcell')

  expect(boardSquares.length).toBe(64) // chessboard ragnge is 8 * 8

})

test("Knight initial position is 'index 57' of all cell array", () => {

  expect(screen.getByTestId('KnightPosition: 57')).toHaveTextContent('♘')

})

test('testing the moment of dragging hold', () => {

  const knight = screen.getByText('♘')

  const boardSquares = screen.getAllByRole('gridcell')

  const knightPosition = boardSquares[57]

dragHold(knight, knightPosition)

// Yellow cell is knight moving range

  const KnightDropableSquares = screen.getAllByTestId('YellowOverlay')

// Initially knight can move to 3 position

  expect(KnightDropableSquares.length).toBe(3)

// Yellow color css check

  KnightDropableSquares.forEach((square) => {

    expect(square).toHaveStyle('backgroundColor: yellow')

  })

// Red cell is current knight position when hold dragging

  expect(screen.getByTestId('RedOverlay')).toHaveStyle('backgroundColor: red')

})

describe('Knight can drag and drop initial moving range', () => {

  // Knight initially has moving position 'index: 40 42 51' of 64 cell array

  test('gridcell[40]', () => {

    const knight = screen.getByText('♘')

    const yellowCell40 = screen.getAllByRole('gridcell')[40]

    dragAndDrop(knight, yellowCell40)

    expect(screen.getByTestId('KnightPosition: 40')).toHaveTextContent('♘')

  })

test('gridcell[42]', () => {

    const knight = screen.getByText('♘')

    const yellowCell42 = screen.getAllByRole('gridcell')[42]

    dragAndDrop(knight, yellowCell42)

    expect(screen.getByTestId('KnightPosition: 42')).toHaveTextContent('♘')

  })

test('gridcell[51]', () => {

    const knight = screen.getByText('♘')

    const yellowCell51 = screen.getAllByRole('gridcell')[51]

    dragAndDrop(knight, yellowCell51)

    expect(screen.getByTestId('KnightPosition: 51')).toHaveTextContent('♘')

  })

})

test('Knight can not drop not yellow cell', () => {

  const knight = screen.getByText('♘')

  const whiteCell = screen.getByTestId('0')

  const blackCell = screen.getByTestId('1')

  expect(whiteCell.firstChild).toHaveStyle('background-color: white;')

  expect(blackCell.firstChild).toHaveStyle('background-color: black;')

dragAndDrop(knight, whiteCell)

expect(screen.getByTestId('KnightPosition: 57')).toHaveTextContent('♘')

dragAndDrop(knight, blackCell)

expect(screen.getByTestId('KnightPosition: 57')).toHaveTextContent('♘')

})

Problem

React DnD abstract Standard Drag Web API but React Testing Library using Standard Web API to testing browser event(see Firing Event)

I don't know which React DnD API tied together Web API(onDragstart etc),
so might be we need infer those mapping or check by Chrome Devtools debug.

Let's Debug which Browser Event firing

Describe with Chessboard Example App and Chrome Devtools.

1. Open `Source` tab on Chrome Devtools

And then find out Event Listener Breakpoints pan from furthermost to the right.

2. Check the Event that you should debug

In the following image dragEnd is selected.

This meant setup ready breakpoint whole screen dragEnd event.

3. Doing your debug target action on the Browser

In the following image Browser stopped by breakpoint when you start and stop drag item, and showing triggered Event Listener.

Therefore when you have any behavior that implement by React DnD and you want to write testing with React Testing Library,
you have to investigate which Event Listener tied together with that.

Conclusion

I think this post is a little bit niche topic though, I'm glad to could be helpful for someone who has relevant issue.

And I've thought through that important knowledge is fundamentally and basics things of web technology rather than specific library.

Thank you for reading the article!
See you next time! 🤗

What the benefit immutable on the state management?

Ryota Murakami — Thu, 16 Jan 2020 05:16:18 +0000

Many React forks has interested immutable like Immer but I don't understand what the benefit immutable on the state management.

Application state is fundamentally mutable for handle user interaction etc.

I guess some forks using immutable solution without technical reason like cargo cult.
But I want to know those certainly use cases, so I'm glad to feel free comment your usage if any immutable solution user read this article! 🤗

Copy And Paste is violation law of DRY?

Ryota Murakami — Wed, 16 Oct 2019 06:52:01 +0000

Todays article doesn't push DRY exaggeratedly. The tendency I like that!

By chance I see below post that has good advise about DRY...
https://dev.to/mohanarpit/coding-practices-your-future-self-will-love-you-for-ohe

At the time, pulled trigger neuron connection belongs to my take on DRY!!🧠🧠🧠

Copy And Paste is violation law of DRY?

Copy And Paste is make clone something written once.

Human don't repeat first typing keyboard.

Honestly I like shared noting rather than traditional DRY practice that sharing code as mush as possible.

I'm Webdev JavaScript person but I'm curious your thought come from variety background!

And welcome simply Yes or No comments as a answer for Copy And Paste is violation law of DRY?

Thank you reading!😆😆😆

I'm so excited about Ionic React!

Ryota Murakami — Tue, 15 Oct 2019 04:15:51 +0000

Breaking Announcing
https://ionicframework.com/blog/announcing-ionic-react/

This is what I have been waiting for 😆😆😆
I had a experience that react-native dev, but it's so far away web development experience despite exactly sure that is React.

I' ll definitely be prototyping with Ionic React!

I'm loving No Abstraction Transactional Script

Ryota Murakami — Sat, 05 Oct 2019 12:08:20 +0000

At First, we are already using "high-level language" which is strongly abstracted very well for human readable.
And more we're using Libraries, Frameworks many cases.

I prefer if you can accomplish intuitive code easily without abstraction.

When I have to write code for accomplish some task, I'll just start from create single file and write code step by step from to top to bottom. That top to bottom code is flat and can read as same as Natural Language like English.
Finally adding test code on order to check is it can accomplish task correctly, that's all nothing wrong.

Wise people's sophisticated design pattern code is difficult to read most cases.

In the Programming World has been have famous best practice that avoid goto statement.

That general opinion says "jumping place to place causing make confusable code" as a one of the reason.
However typically highly abstracted code are tend to digging and jumping tons of files and many methods, interfaces, implementation classes, where come from data, where come from callback, track event dispatcher/subscriber mechanics etc...

Source code is all consisted by character, design pattern is graphical diagram, It is a completely different concept and format.
However, we think that the shiny design patterns described in cool and easy-to-understand diagrams can be easily applied to source code composed of strings.
I think this is actually professional skills matter.

My favorite abstraction I've ever seen is jQuery API.
That's insanely extreme magical spell of CSS, EventHandler, BrowserCompatibiliy, CalculateAnimation without abstraction.

Node.js "Look! Here are Non-blocking I/O, Event Loop!!" People "Cool!!😍"

Ryota Murakami — Wed, 11 Sep 2019 16:24:51 +0000

Node.js "But now people looks like enthuse for How to write Asynchronous process as same as Synchronous processing you know, async/await etc..."

Me "I guess human brain works well with step by step, blocking I/O, Synchronous end up 🤯"

PHP, Python, Ruby "Come On!! You can do it, over here!! 🤗"

I don't want to see posts like "Which Framework is Winner?"

Ryota Murakami — Thu, 27 Jun 2019 13:27:06 +0000

I happened to see my past post, but the quality is awful.
Below is the link 📲

I am a React Developer.
The title is totally doesn't make sense me at Sep 14, 2018 ʅ（◞‿◟）ʃ

Anyway I'd like to write my opinion again.

Behind this article, there is a context of those days.
That is Vue Passes React's Star Count on GitHub.

So I wanna claim that to be clear, Library authors doesn't have working motivation sort of who want to dominate the market share.
They are focusing on how to provide the way for enhance software development.

Conclusion

We don't have to post like "Which Framework is Winner?".
Because there is no looser, there are various way of software development.
I think It's so colorful 🌈

I am a React Developer.

Ryota Murakami — Fri, 14 Sep 2018 08:54:44 +0000

Despite I pretty favor Rails + turbolinks, jQuery will have been being my trusted bullet ever.

Sometime when I playground a little web interaction I’m getting data binding on nobuild process with new Vue().

It isn’t competitive battle for market shares😀

Forem: Ryota Murakami

I've just released git-gpt-commit v0.9.0! 🎉

What’s New in v0.9.0 ✨

🚀 Support for GPT-4o

🌐 Language Selection Command

🏷️ Prefix Toggle Command

🔑 API Key Management

⚙️ Configuration Management

How to Use

Installation

Why I Created git-gpt-commit

Update eslint-config-ts-prefixer@v0.23.3

1. @typescript-eslint/no-misused-new

2. @typescript-eslint/no-misused-promises

3. @typescript-eslint/promise-function-async

4. no-await-in-loop

5. no-return-await

6. prefer-promise-reject-errors

7. require-atomic-updates

vite-rtk-query update

React Router(v6) setup

CSS Modules nesting

Diving into Chrome Extension Development: 3 Essential Resources

Testing React DnD by React Testing Library

Example Code

Problem

Let's Debug which Browser Event firing

1. Open Source tab on Chrome Devtools

2. Check the Event that you should debug

3. Doing your debug target action on the Browser

Conclusion

What the benefit immutable on the state management?

Copy And Paste is violation law of DRY?

Copy And Paste is violation law of DRY?

I'm so excited about Ionic React!

I'm loving No Abstraction Transactional Script

Node.js "Look! Here are Non-blocking I/O, Event Loop!!" People "Cool!!😍"

I don't want to see posts like "Which Framework is Winner?"

Conclusion

I am a React Developer.

1. Open `Source` tab on Chrome Devtools