misc.laboradian.com

Webに関する実験コンテンツ一覧

未分類

1. ブラウザのベンチマーキング
2. cache-test/
3. アニメーションSVG。/ ある要素の背景画像をウィンドウに固定して表示する。
4. table width test
5. Gentelella の解析
6. dat.GUI を使ったサンプルページ001 (/dat-gui-sample/001/)（廃止）
   • 古いページでモバイル非対応なので廃止。
7. DataTables を使ってみる
8. DataTables で行と列を固定する
9. DataTables (+ Bootstrap 3) で行と列を固定する
10. e-Stat サンプル
11. e-Stat を使ったページのサンプル001
12. firebase/1/ (403)
13. Firebase Test 2
14. Speedtest (example6.html をそのまま使った場合)
15. Speedtest (example6.html を一部変更して使用した場合)
16. FUTURE IMPERFECT
17. ZEROFOUR
18. js-sample/window-opener-test/ (403)
19. milkcocoa/pc/ (403)
20. milkcocoa/sp/ (403)
21. Hello, p5.js!!
22. PDF 埋め込みテスト
23. PDF 埋め込みテスト1
24. PDF 埋め込みテスト2
25. PDF 埋め込みテスト3
26. 定期的に動く画像のサンプル001
27. simplest-page-1.php
28. simplest-page-2.php
29. simplest-page-3.html
30. simplest-page-3.php
31. simplest-page-4.php
32. pubnub/ (403)
33. qrcode-reader-page/ (external link)
34. トランザクション課題 (エラーになる)
35. test001
36. alert を無限に表示し続ける
37. 素数計算でブラウザに負荷をかける
38. Return PNG by PHP
39. timesheet/
40. TweenMax を使ったサンプルページ001
41. ウェブページにアクセスした1回目だけ要素を動かすサンプル001
42. WebGLが使える環境かどうかを判定する
43. WebP Test
44. WordPress の機能を使って独自のPHPファイルにヘッダーとフッターを追加する (error)
45. あなたのブラウザが送信した情報
46. Source Map Test using UglifyJS2 and Sass
47. コントラスト テスト

Web

1. Hello AMP World!
2. amp/001/b.html
3. 検索結果に対する AMP テスト
4. Canvas に回転した画像を表示するサンプル001
5. IntersectionObserver API Test
6. document に関する DOMイベントの発生タイミングを調査する
7. Intersection Observer API を使った画像の遅延読み込みサンプル
8. Intersection Observer API を使った動画の遅延読み込みサンプル
9. loading 属性のブラウザ対応テスト
   • 画像をひたすら埋め込んだだけのページ(loading属性なし)
   • 画像をひたすら埋め込んだだけのページ(loading="auto")
   • 画像をひたすら埋め込んだだけのページ(loading="lazy")
10. ファーストビューにある画像に loading="lazy" をセットするべきか？
11. requestAnimationFrame が呼び出される間隔を測定する
12. My IP address (HTML)
13. My IP address (Text)
14. rel="preload" のテストページ
15. rel="preload" のテストページ2
16. rel="preload" をどう書くか？
17. rel="prefetch" のテストページ
18. Service Worker Cache Test 3
19. Service Worker Cache Test 4
20. Service Worker Cache Test 5
21. Service Worker の状態変化テスト
22. Push API Test (Service Worker)
23. Web Storage API のサンプル001
24. Web Workers API のサンプル001
25. Canvas と WebGL のサンプル001
26. OpenID Connect Test 1
27. そのブラウザのサードパーティ Cookie が有効かどうかテストする
28. 3rd party cookie test (Samesite)
29. Storage Access API Test (3rd-party cookieを許可するための機能)
30. Google マップ 埋め込みテスト
31. リダイレクトのテスト
32. notifications-test/ (403)
33. Notification API Test
34. The Native File System API テスト
35. Osano の Cookie Consent Test
    • Osano の Cookie Consent Test（知らせるだけ）
    • Osano の Cookie Consent Test (Opt-Out)
    • Osano の Cookie Consent Test (Opt-In)
36. Web Components
    • Shadow DOM を使ってみる
    • template と slot を使ってみる
    • <script> in <template> のテスト
    • Web Components の実験 その１
    • Web Components の実験 その２
    • HowTo: Components – howto-checkbox を試す
    • HowTo: Components – howto-tabs を試す
    • HowTo: Components – howto-tooltip を試す
    • サンプルその１
    • Vue.js のサンプルを Web Components で実装する
    • 単独のCSSファイルを Shadow DOM で利用する
    • Polymer のサンプル
    • CSS Shadow Parts (Web Components) を試す
    • Constructable Stylesheet Objects を試す
37. Tagged templates を試す
38. CSRF対策トークンの実験
39. クリックジャッキングの実験
40. HTTPS/HTTP 混在テスト（画像ファイルのみ）
41. HTTPS/HTTP 混在テスト２（CSS, JS, Image, Iframe）
42. CORS の プリフライト・リクエストを観察する
43. 文字列コピーのテスト
44. Cookie 上書きテスト
45. Screen Wake Lock API を試す
46. Web Development for Beginners に関するページ
47. Performance Timeline
    • User Timing API を使って、特定の処理に掛かった時間を計測する
    • Navigation Timing API を使う
    • Resource Timing API を使って、リソースの読み込みに掛かった時間を計測する
    • Layout Instability API を使ってレイアウトシフトを検出する
48. ページトップ位置にある画像とLCPのテスト
49. インラインの <style> 内から Source Map ファイルを使うテスト
50. DevTools の Performance パネルを使って Chrome の動作を検証する
51. ES6(ES2015)以上をサポートしているブラウザとそうでないブラウザを分けてスクリプトを読み分ける
52. requestIdleCallback を使ってリソースを読み込ませる
53. facade を使って YouTube 動画を埋め込む (YouTube Lite Embed)
54. COOP, COEP をテストする (window.open())
55. DOM Event Listeners が発生する順番を観察する
56. Eye Dropper API を使ってみる
57. Navigator.registerProtocolHandler()を使うテスト
58. dialog 要素を使ってみる
59. PHP + SQLite : POSTで値を登録する
60. Sanitizer API を使ってみる
61. リダイレクトのテスト
    • 301リダイレクトのテスト
    • JavaScriptによるリダイレクトのテスト
    • meta refresh によるリダイレクトのテスト
62. Permissions-Policy header の効果を観察する
63. スケルトンスクリーンを実装する
64. Document Picture-in-Picture APIを使ってみる
65. Webページ読み込み時のイベントを観察する

Web performance

1. ファーストビュー上の画像とLCPの関係についてテスト
2. Web Vitals patterns: Responsive Images を試す
3. Web Vitals patterns: Animated Footer を試す
4. Web Vitals patterns: Modal を試す
5. Web Vitals patterns: Sticky Footer を試す
6. Web Vitals patterns: Infinite Scroll を試す
7. Web Vitals patterns: Third-party fonts を試す
8. Web Vitals patterns の Placeholders を試す
9. Web Vitals patterns の Video を試す
10. Web Vitals patterns の GIF-style video を試す
11. 大量に画像が貼っていあるページのパフォーマンスを観察する
12. 遅れて画像が読み込まれ、Layout Shift が起きるサンプルページ
13. bfcache の動作を観察する
14. web-vitals.js を使いINPの情報を取得する
15. Server Timing の実験

HTTP(S)

1. HTTPメソッドの動作を見るためのサンプル001
2. HTTP Range Header Test
3. Basic認証をテスト (foo:password)
4. Digest認証をテスト (foo:password)
5. 418 I'm a teapot を返してみる

HTML

1. dot dir test 1
2. タイトルとその内容を複数個並べるときに使用するHTMLタグを比較する
3. Picture 要素のテスト
4. srcset 属性の実験
5. srcset と sizes 属性の実験(1)
6. srcset と sizes 属性の実験(2)
7. srcset と sizes 属性の実験(3)
8. srcset と sizes 属性の実験(4)
9. img要素の width, height 属性新仕様と srcset を同時に使ってみる (2020年)
10. img要素の width, height 属性新仕様と srcset を同時に使ってみる (2020年) その2
11. img要素の width, height 属性新仕様と srcset を同時に使ってみる (2020年) その3
12. img要素の width, height 属性新仕様と srcset を同時に使ってみる (2021年) その4
13. max-width:100%;height:auto; のテスト
14. sizes 属性、width 属性、CSS の width プロパティの実験
15. sizes属性なしでsrcset属性にw単位を使ってみるテスト
16. meta tag (copyright) のテスト
17. dl要素内にdiv要素を使ってみる
18. プライム記号と似た記号たち
19. ウェブページ上で右クリックを禁止する
20. ウェブページ上で cut copy paste を禁止する
21. 1行目のインデントについて
22. HTML その他（ちょっとしたHTMLを試す）
23. モバイル端末用ブラウザでツールチップ表示する。etc. (touch イベントなど)
24. input要素のいろいろな属性を試す
25. menu要素を試す
26. img要素を試す(with placeholders)
27. データURLでsvg要素を埋め込む
28. 上下左右中央寄せ(CSS)
29. サインインフォームのベストプラクティスを試す
30. ボタンがあるだけのページ
31. HTMLの capture属性を試す
32. text/markdown Media Type を試す
33. formの動きを観察するためのページ
34. details要素のname属性を試す
35. hreflangを試す
36. XHTML 1.0 Transitional なページを実装する
37. HTML 4.01 Transitional (システム識別子有り) なページを実装する
38. HTML 4.01 Transitional (システム識別子無し) なページを実装する

CSS

1. Bulma sample
2. CSS Flexible Box Layout Module のサンプルページ001
3. Flexbox を使ってページ全体を中央寄せにするテスト
4. Semantic UI を試すページ1
5. CSS: ol 要素の先頭番号のデザインを変更する
6. Font size names
7. CSS Grid Layout を試す
8. CSS Grid Layout を試す (2)
9. CSS Grid Layout を試す (3)
10. CSS Grid Layout を試す (4) 固定幅中央寄せ、レスポンシブ
11. CSS Grid Layout + レスポンシブ(1)
12. Tailwind Test 001
13. CSS: サイズの単位である %とvwの比較
14. Bootstrap 4.3 を日本語向けに設定する
15. prefers-color-scheme (CSS) を試す
16. CSS による余白設定の実験
17. :target 疑似クラス
18. CSS Properties and Values API をテストする（カスタムプロパティ）
19. CSS Writing Models を使って縦書きしてみる
20. CSS: background に URL を指定した場合の挙動をテストする
21. Box Model を変更する box-sizing プロパティ
22. margin の相殺
23. CSS: Scrollbar に関連するプロパティ
24. CSSカウンターを使ってみる
25. CSSカウンターで見出し番号を振る
26. CSS: aspect-ratio プロパティを使ってみる
27. CLSスコアを実験するページ(floatレイアウト)
28. CLSスコアを実験するページ(Gridレイアウト)
29. テーブルのラベル行を sticky 表示する
30. 丸番号付きのリストをCSSで実現する
31. CSSで吹き出しを表現する
32. 絶対配置を使わないCSSのテスト
33. CSSカスタムプロパティのサンプルページ
34. 『「CSS完全に理解した」でCSS完全に理解する』を試す
35. scroll-behavior を試す
36. scroll-margin-top を試す
37. backdrop-filter を試す
38. text-align-last を試す
39. overscroll-behavior-y を試す
40. CSS: Individual transform properties を試す
41. CSS: overflow-clip-margin プロパティを試す
42. CSS: Container queries と :has() を試す
43. CSS: perspective を試す
44. CSS: display: contents を試す
45. CSS: 文字と画像の縦中央寄せを実験する
46. CSS Container Queries を試す

フォント

1. font-test/1/ (403)
2. Web Font に対する font-display のテスト
3. Web Font に対する font-display のテスト2
4. TypeSquare を使ってみる
5. Google Fonts を使う（外部リンク利用）
6. Google Fonts を使う（フォントファイルをサブセット化して利用）
7. Font Awesome 5 を使ってみる

アイコン

1. Material Icons Test
2. Material Icons (All Themes) Sample
3. Icons8 の Free Icons を使ってみる

JavaScript

1. highlight.js
   • highlight.js を Web Workers で使う
   • CDN で highlight.js を使う
   • highlightjs-line-numbers.js を使って行番号を表示する
   • highlight.js のスタイルのコントラストをテストする
2. 時間とともに風景画像の色が変わっていくサンプル001
3. JavaScript ファイルの読み込みと実行のタイミングを調べる(async, defer)
4. Dynamic Import Test
5. Dynamic Import Test 2
6. Static Import Test
7. Static Import Test
8. JavaScript で a 要素を追加する
9. JavaScript でスライドを作ってみる001
10. JavaScriptで回線速度測定
11. MathJax のテスト
12. 月の満ち欠けのシミュレーション
13. NASA Open APIs の実験
14. Prism を使ってみる(1)
15. React + Redux のサンプル002
16. React + Redux のサンプル003: Example: Reddit API
17. React + Redux のシンプルなサンプル001
18. JavaScriptファイル読み込みテスト1
19. JavaScriptファイル読み込みテスト2
20. JavaScriptファイル読み込みテスト3
21. JavaScriptファイル読み込みテスト4
22. Redux の非同期処理サンプル001
23. Redux + React Router を使ったサンプルページ001
24. スロットマシーンのサンプル001 (slot-machine-sample001)
25. スロットマシーンのサンプル002 (Canvas版) (slot-machine-sample002)
26. スロットマシーンのサンプル003 (slot-machine-sample003)
27. スロットマシーンのサンプル003 (offline対応版) (slot-machine-sample003/tree/offline)
28. スロットマシーンのサンプル003 (offline対応版) (slot-machine-sample003)
29. スロットマシーンのサンプル003 (PWAインストール対応版) (slot-machine-sample003/tree/offline)
30. jQueryを使ったタイマーのサンプル
31. viewport(width=device-width) のサイズを得る
32. webpack + react + redux + mini.css のサンプル001
33. webpack 3.x を使ったページのサンプル
34. PostCSS をコマンドラインから使う (postcss-cli)
35. ES6 Generator に関するメモ
36. Web Share API テスト
37. Yellow Fade のサンプル
38. JavaScript でHTTP(S)リクエストを送信する
39. JavaScript: ブラウザが、クラスのプライベートフィールドに対応しているかチェックする
40. ブラウザのタブに日付・時刻を表示する
    • Web Components 版
    • Web Components 版その２
    • Web Components 版その３
    • Web Components 版その４
    • シンプル時計 (Web Components)
41. addEventListener() に渡すコールバック関数内で、自分自身を removeEventListener() する
42. Mutation Observer Test
43. Luminous を使ってみる
44. lit-html を試す
45. カスタムイベントを使う
46. ECMAScript 2015 で導入された class 構文
47. JavaScript で CSS を追加する
48. ユーザー・インタラクションをトリガーとして .css / .js を読み込む
49. ScrollHint を使ってみる
50. barba.js (pjax) を使ってみる
51. <noscript> のテスト
52. Import maps のテスト
53. Google Maps のテスト
54. Bento Components を試す
55. AbortController を試す
56. JavaScript でフォームをサブミットするテスト
57. htmxを使ってみる
58. Three.js で立方体を描く
59. GSAPを使い、スクロールに合わせて要素をフェードインさせる
60. RELLAXを使い、パララックスを実装する

Vue

1. vue.js の学習001
2. vue.js の学習002
3. Vue コンポーネントの基本
4. DOM Based XSS 1
5. Vuetify を CDN で利用するテスト
6. vue-rate-it のテスト

PHP

1. php-json-api/
2. PHP のPDO (MySQL) を使うサンプル001
3. PHP: スーパーグローバル(変数)を上書きしてみる
4. PHP: password_verify() 関数の動作テスト
5. Set-Cookie Test
6. PHP: __destruct() のテスト１
7. PHP から SQLite を使う
8. PHP + SQLite を利用してアクセスカウンターを作る
9. PHP: セッションクッキーを観察する
10. PHP: http: と https: で使えるセッションクッキーを観察する
11. PHP: セッション情報をデータベースに保存する
12. ローカルプロキシツールを使って送信したパラメータ値を観察する
13. ブラウザの戻るボタンについて調査する
14. PHP: ファイルアップロードの処理
15. PHP: ob_start() によるバッファのスタック構造を検証する
16. Twig を使ってみる
17. UUIDを生成する
18. IETF Datatracker でRFCを検索する（Chrome のサイト内検索用にリダイレクトする. いつ停止するか分かりません.）

Security

1. Same-site cookie test 1
2. iframe sandbox test (read)
3. XSS Test1
4. XSS Auditor が有効かどうかチェックする
5. CSP Level 2 の出力例
6. CSP Level 3 (Strict CSP) を利用する
7. RPO の実験
8. XST の実験
9. Subresource Integrity (SRI) の実験

その他

1. 読み込みテスト用ページ

ページを作成する際の心がけ

• How to create a Minimal, Reproducible Example - Help Center - Stack Overflow

作成中のページ

• trustedTypes を試す
• CSS: focus-visible擬似クラスを試す
• CSS: content-visibility プロパティ
• Service Worker の動きを観察する
• Performance Timeline Test
• LitElement を試す
• webcomponents.org で公開されているカスタム要素を使ってみる
• CSS Containment のテスト
• TypeScriptのテスト
• ウェブページ上でクイズを出す その１

ボツになったページ

• OWASP Testing Guide 4.0 について
• CSSを2段階で読む (LCP対策)

おまけ

HTML入門

• 教材そのもので学ぶ Web入門

数学

• 整数に関する覚書
• 順列・組み合わせに関する覚書

その他

• HTML手書きのススメ
• Anki アプリについて
• Anki: 次回の間隔[日]の算出シミュレーション（復習フェーズ）
• 歴史上の出来事の順番を当てる
• 元素周期表
• 英語の単語やフレーズを調べる
• RFC to read