About

同じことを繰り返さないための備忘録として、自分の知識を周りと共有するためのプチナレッジベースとして書いている技術ブログです。 一応技術ブログですがゲームや VR、ガジェット等関係ないことも書かれる可能性があります。

書いているひと

株式会社 Impressive に所属しているフロントエンドエンジニアです。 主にフロントエンドのおしごとがメインですがそれ以外もやります。

• GitHub: @pocka
• Twitter: @pockaquel

サイトのしくみ

Next.js を使って静的出力しています。 各記事は Markdown で書かれており、Remark と Rehype を使って HAST (HTML の AST、構文木) をビルド時に生成、rehype-reactを使ってランタイムで React コンポーネントとして表示しています。 詳細は GitHub 上のソースコードを参照してください。

使用フォント

適用文字種別	フォント
ラテン (英数字)	Inter
等幅ラテン (英数字)	Ubuntu Mono
日本語	Noto Sans JP

CSS

スクラッチで書いています。 コンポーネントのスタイルは基本的にレイアウトのみで、要素セレクタでスタイルを当てる漢 CSS です。

Vertical Rhythm を使って縦のレイアウトを揃えています。 要素に当たっている calc(var(--baseline) * Nrem) でリズムを整えています。

シンタックスハイライト

Markdown のビルド時に Prism.js でハイライトしています。CSS のテーマは prism-themes の a11y-dark を使っています。