{"id":18890893,"url":"https://github.com/igrep/toy-browser-on-browser","last_synced_at":"2025-09-12T20:32:53.131Z","repository":{"id":250326379,"uuid":"832396608","full_name":"igrep/toy-browser-on-browser","owner":"igrep","description":"(For learning purpose) Toy browser that runs on your browser","archived":false,"fork":false,"pushed_at":"2024-09-07T04:47:22.000Z","size":1376,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-16T13:04:51.114Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/igrep.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-23T00:15:49.000Z","updated_at":"2024-09-07T04:47:25.000Z","dependencies_parsed_at":"2024-09-07T05:49:11.670Z","dependency_job_id":"8e762498-3c97-4ba0-94fc-0b54733d8865","html_url":"https://github.com/igrep/toy-browser-on-browser","commit_stats":null,"previous_names":["igrep/toy-browser-on-browser"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igrep%2Ftoy-browser-on-browser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igrep%2Ftoy-browser-on-browser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igrep%2Ftoy-browser-on-browser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igrep%2Ftoy-browser-on-browser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/igrep","download_url":"https://codeload.github.com/igrep/toy-browser-on-browser/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239867330,"owners_count":19710342,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T07:57:59.962Z","updated_at":"2025-02-20T15:41:27.682Z","avatar_url":"https://github.com/igrep.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Toy Browser on Browser\n\nブラウザーの仕組みを学ぶために実装した、ブラウザー上で動作するブラウザーエンジン + すごく荒削りなDOMエディターのおまけ付き。\n\n## Try!\n\n\u003chttps://toy-browser-on-browser.igreque.info/\u003e\n\n## スクリーンショット\n\n![screenshot2](./docs/screenshot2.png)\n\n## 参考\n\n- [ちいさな Web ブラウザを作ってみよう](https://browserbook.shift-js.info/) シリーズ\n- The \"Let's build a browser engine!\" series:\n    - [Let's build a browser engine! Part 4: Style](https://limpet.net/mbrubeck/2014/08/23/toy-layout-engine-4-style.html)\n    - [Let's build a browser engine! Part 5: Boxes](https://limpet.net/mbrubeck/2014/09/08/toy-layout-engine-5-boxes.html)\n    - [Let's build a browser engine! Part 6: Block layout](https://limpet.net/mbrubeck/2014/09/17/toy-layout-engine-6-block.html)\n    - [Let's build a browser engine! Part 7: Painting 101](https://limpet.net/mbrubeck/2014/11/05/toy-layout-engine-7-painting.html)\n- [askerry/toy-browser: A toy browser engine](https://github.com/askerry/toy-browser)\n\n## 主に参考にした \"Let's build a browser engine!\" との違い\n\n- CSSの値における単位は、何を指定していようと暗黙にpxとして解釈される\n- textなど、「TODO」としていたレイアウト処理の実装\n- `border-style: solid`に対応（`border-style`を指定しなかった場合の挙動が仕様により近い）\n- `border-top-color`などに対応\n\n## その他、学習のために盛り込んだ各種要素技術（と主な参考ページ）\n\n- OffscreenCanvas\n    - [オフスクリーンキャンバスを使ったJSのマルチスレッド描画 – スムーズなユーザー操作実現の切り札 - ICS MEDIA](https://ics.media/entry/19043/#offscreencanvas%E3%81%AE%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95)\n- React\n    - \u003chttps://ja.react.dev/\u003e\n- jotai-optics\n    - [Optics — Jotai, primitive and flexible state management for React](https://jotai.org/docs/extensions/optics)\n- Canvas\n    - [キャンバスのチュートリアル - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Figrep%2Ftoy-browser-on-browser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Figrep%2Ftoy-browser-on-browser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Figrep%2Ftoy-browser-on-browser/lists"}