React Japan

Blog

Take your workflow to the next level with ESLint fix on save
React
Workflow

Take your workflow to the next level with ESLint fix on save

Prettier, ESLint, and Stylelint are amazing tools. When used together and fully configured, they dramatically improve the speed and efficiency that you and everyone on your team write code, improve the overall quality of code, reduce bugs, make code reviews quicker, and empower your entire team to focus on what really matters.

Steven Sacks
Steven Sacks
React Japan Founder
ESLint - Foundation
React
Workflow

ESLint - Foundation

The following are my recommendations for ESLint, Prettier, Stylelint, etc. These are the plugins with rulesets (with some customization) that will form the foundation of your ESLint setup.

Steven Sacks
Steven Sacks
React Japan Founder
ESLint - Sorting
React
Workflow

ESLint - Sorting

The sort order of imports, props, object keys, etc. is entirely subjective and even your own opinion about the best order in a particular context is subject to change over time. Enforcing alphanumeric sorting will keep your code organized and easier to read for everyone on your team.

Steven Sacks
Steven Sacks
React Japan Founder
ESLint - Situational rules
React
Workflow

ESLint - Situational rules

These ESLint rules are situational, depending on the tools you are using.

Steven Sacks
Steven Sacks
React Japan Founder
ESLint - Opinionated rules
React
Workflow

ESLint - Opinionated rules

These are rules which I did not include in the Foundation because they’re more opinionated. I’ll explain why I use them. Feel free to use them or not.

Steven Sacks
Steven Sacks
React Japan Founder
Localized link tags for SEO in Remix
i18n
SEO
Remix

Localized link tags for SEO in Remix

There are many aspects to building a site with content localized into multiple languages. To optimize SEO, your page needs link elements that point to the alternate localized versions. The solution is to use Remix’s meta function.

Steven Sacks
Steven Sacks
React Japan Founder
Empathetic Coding - Button Component
React

Empathetic Coding - Button Component

In this article, we’ll be creating a Button component from the ground up using an empathetic approach.

Steven Sacks
Steven Sacks
React Japan Founder
Empathetic Coding
React

Empathetic Coding

Soft skills are often mentioned in contrast to programming skills. However, soft skills can also be applied to the “hard skills” of programming by following a philosophy called "empathetic coding".

Steven Sacks
Steven Sacks
React Japan Founder