Anatomy of a React component
My vision for how every React component should look
421
8 min.
The SSG standard defines requirements for the semantics, accessibility, and logic of Git.
A commit message should be structured as follows:
<type>([scope]): <brief description>
[Commit body]
[Footer(s)]
Type - commit classification:
Scope is optional and indicates the affected part of the project (e.g., ui, api, auth):
feat(api): Added a new endpoint for users
Description describes the changes, preferably in the imperative mood, no more than 50 characters.
Body explains what has been changed and why.
The footer is used for Breaking Changes, incompatible changes are indicated with BREAKING CHANGE: or feat!, for example, feat!: deprecated api methods removed, as well as for links to issues, such as Closes #123.
The pipeline handles formatting, commit validation, and safe branch merging.
npm i -D \
husky \
lint-staged \
@commitlint/cli \
@commitlint/config-conventional \
@commitlint/types \
conventional-changelog-conventionalcommits \
@archoleat/commitlint-define-configLint-staged checks only staged changes:
export default {
'*': 'prettier --write',
'src/**/*.{tsx,ts}': 'eslint --fix',
'src/**/*.scss': 'stylelint --fix',
};Commitlint checks commit formatting and allowed types:
import { defineConfig } from '@archoleat/commitlint-define-config';
export default defineConfig({
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [
2,
'always',
[
'build',
'chore',
'ci',
'docs',
'feat',
'fix',
'perf',
'refactor',
'revert',
'spec',
'style',
],
],
},
});You can view the defineConfig plugin here
There is a bug in Husky where, if a commit fails validation, changes may sometimes be lost!
Staging changes:
git add .Creating a commit:
git commit -m "feat(header): added theme toggle button"pre-commit:
lint-staged is run, Prettier, ESLint, and Stylelint fix errors in the indexed files, and then the fixed files are re-added to the index.
commit-msg:
commitlint checks that the commit message complies with the Conventional Commits guidelines.
Result:
The commit is successfully completed if all checks pass, otherwise, the commit is rejected with an error message.
My vision for how every React component should look
421
8 min.
The SST standard defines requirements for the semantics, accessibility, and logic of tabs
62
7 min.
The SSF-U standard defines requirements for the semantics, accessibility, and logic of fullscreen
248
2 min.
The SSA standard defines requirements for the semantics, accessibility, and logic of accordion
258
2 min.
An Analysis of Critical Web Design Mistakes. Why Sliders, Autoplay, and Slow-Loading Pages Reduce Conversion Rates and Rankings on Google
232
2 min.
The SSP standard defines requirements for the semantics, accessibility, and logic of pagination
240
1 min.