Skip to content

Vol.264

Kota Furusawa

Slow Code HATES him! Optimising a web app from 1 to 60fps Jump to heading

1fps の Web アプリを 60fps まで改善した話 Jump to heading

Steven 氏は、マインスイーパーとその問題を解決するロジックを開発したが、出来上がったものは非常に遅く、100x100 のマインスイーパーを解決するのに時間がかかりすぎていることに気づいた。この問題を解決するべく、svelte で実装し直したが、そのパフォーマンスは改善されず、問題の根幹は JavaScript の実装にあると考え、ステップ・バイ・ステップでそのパフォーマンス改善を進めていく。その過程の思考とソースコードを公開しており、どのような改善を行いどれほどの改善が行われたかを詳細に紹介している。

  • ボトムアップなデータ構造にする
  • 不必要なレイアウトを取り除く
  • 必要最小限の装飾にする(各セルのボーダーを取り除く)
  • ある程度のまとまりごとにレイヤーを分ける
  • キャンバスで実装する

Headings & Accessibility | TPG – The Accessibility Experts Jump to heading

見出しとアクセシビリティ Jump to heading

この記事では、Web コンテンツアクセシビリティガイドライン（WCAG）2.1 の達成基準のドキュメントを参考にし、見出しの実装に関するガイドを行う。

  • ビジュアルな見出しは、それにふさわしいマークアップする必要がある
  • 見出しは簡潔で説明的でなければならず、過度な装飾をさける
  • h1 見出し要素は、レベル AA に準拠させるために必須ではないが、アクセシビリティを高めるためのベストプラクティスではある
  • 見出しレベルを順番に使用することは、レベル AA に準拠するために必須ではないが、アクセシビリティを高めるためのベストプラクティスではある
  • レベル AA に準拠するには、小見出しのマークアップは必要はないが、レベル AAA に準拠するためには必要である

Adventures in CSS Semi-Transparency Land | CSS-Tricks Jump to heading

CSS の半透明について Jump to heading

CSS では半透明のオーバーレイを作成できるが、それを 2 枚重ねたとき、どのような見た目になるのか。その計算式と実際のサンプル実装を紹介しながら、違いを明らかにしていく

The History of the URL Jump to heading

URL や DNS、HTTP、Port など、Web の通信について、その歴史的経緯などをも踏まえて紹介していく。

Test Double | Our Blog | Necessary & Sufficient Jump to heading

テストは実際のプロダクトのコードに比べて優先順には低いが、その重要性や責任は非常に大きい。そのテストを習得するのが難しいのは、テストスイートの目的が明らかでは無いからであると Justin 氏は指摘する。この記事では、いくつかのポイントを抑え、テストスイートを設計し、それが投資するに値するということを証明する過程を紹介する。

In Brief Jump to heading