chore(i18n): sync translations with latest source changes (chunk 2/3, 766 changes)

pull/1670/head
localizeflow[bot] 1 week ago
parent f2b4f9d4a1
commit 7dbece10bf

@ -0,0 +1,860 @@
{
"moodle.94eb93d714a50cb2.webp": {
"original_hash": "0d04a6ef1ac524b452d5a0aae3f45bee",
"translation_date": "2026-01-15T15:38:12+00:00",
"source_file": "teaching-files/moodle.png",
"language_code": "mo"
},
"canvas.fbd605ff8e5b8aff.webp": {
"original_hash": "29556305738d345dd023554d788d5477",
"translation_date": "2026-01-15T15:38:41+00:00",
"source_file": "teaching-files/canvas.png",
"language_code": "mo"
},
"install-on-edge.78634f02842c4828.webp": {
"original_hash": "6224aad8f1cd252da83c2808ff5c7a4e",
"translation_date": "2026-01-15T15:39:00+00:00",
"source_file": "5-browser-extension/install-on-edge.png",
"language_code": "mo"
},
"extension-screenshot.0e7f5bfa110e92e3.webp": {
"original_hash": "4fdd1d3fdbc9ac2c2932f83847a5e4b8",
"translation_date": "2026-01-15T15:39:28+00:00",
"source_file": "5-browser-extension/extension-screenshot.png",
"language_code": "mo"
},
"createcodespace.0238bbf4d7a8d955.webp": {
"original_hash": "4f504323085308f4a0e7b5bfb37e16d7",
"translation_date": "2026-01-15T15:39:37+00:00",
"source_file": "images/createcodespace.png",
"language_code": "mo"
},
"favicon.37b561214b36d454.webp": {
"original_hash": "228faa6584f8ba1f7e9a75e3200112e9",
"translation_date": "2026-01-15T15:39:37+00:00",
"source_file": "images/favicon.png",
"language_code": "mo"
},
"character.5c0dd8e067ffd693.webp": {
"original_hash": "076bbb4d25a17982c81973b8dba9d4fa",
"translation_date": "2026-01-15T15:39:46+00:00",
"source_file": "images/character.png",
"language_code": "mo"
},
"clone_repo.6a202fb230ab6bdd.webp": {
"original_hash": "9261d014674312eece91deae958538cf",
"translation_date": "2026-01-15T15:39:52+00:00",
"source_file": "images/clone_repo.png",
"language_code": "mo"
},
"background.148a8d43afde5730.webp": {
"original_hash": "5a50f015fb466782c69063ffebb256de",
"translation_date": "2026-01-15T15:40:02+00:00",
"source_file": "images/background.png",
"language_code": "mo"
},
"screenshot.e7a5ad659e364568.webp": {
"original_hash": "c562c1fdc9d73658456e02b873e4dff9",
"translation_date": "2026-01-15T15:40:09+00:00",
"source_file": "images/screenshot.png",
"language_code": "mo"
},
"browser.60317c9be8b7f84a.webp": {
"original_hash": "aa4461fec006d86899864d991b50cc74",
"translation_date": "2026-01-15T15:40:44+00:00",
"source_file": "sketchnotes/browser.jpg",
"language_code": "mo"
},
"webdev101-html.4389c2067af68e98.webp": {
"original_hash": "23bf24ecb0e72f0c6c835824dec5ee54",
"translation_date": "2026-01-15T15:41:15+00:00",
"source_file": "sketchnotes/webdev101-html.png",
"language_code": "mo"
},
"webdev101-programming.d6e3f98e61ac4bff.webp": {
"original_hash": "adf4dac4d350592773dbdba8ebaaa262",
"translation_date": "2026-01-15T15:41:52+00:00",
"source_file": "sketchnotes/webdev101-programming.png",
"language_code": "mo"
},
"webdev101-github.8846d7971abef6f9.webp": {
"original_hash": "412ec8fc404fead25f314e2fdb564548",
"translation_date": "2026-01-15T15:42:17+00:00",
"source_file": "sketchnotes/webdev101-github.png",
"language_code": "mo"
},
"webdev101-css.3f7af5991bf53a20.webp": {
"original_hash": "9de1dc14864697c82395b02f31a72aec",
"translation_date": "2026-01-15T15:42:51+00:00",
"source_file": "sketchnotes/webdev101-css.png",
"language_code": "mo"
},
"webdev101-js-functions.be049c4726e94f8b.webp": {
"original_hash": "ec4279b1b2191fa07a83e78a97e81f29",
"translation_date": "2026-01-15T15:43:20+00:00",
"source_file": "sketchnotes/webdev101-js-functions.png",
"language_code": "mo"
},
"webdev101-js-decisions.69e1b20f272dd1f0.webp": {
"original_hash": "5e49a0b9b4149f782a4378354ba7fd56",
"translation_date": "2026-01-15T15:43:51+00:00",
"source_file": "sketchnotes/webdev101-js-decisions.png",
"language_code": "mo"
},
"webdev101-a11y.8ef3025c858d897a.webp": {
"original_hash": "3f5220c5d502a906028b8a85245cc6da",
"translation_date": "2026-01-15T15:44:25+00:00",
"source_file": "sketchnotes/webdev101-a11y.png",
"language_code": "mo"
},
"webdev101-js-datatypes.4cc470179730702c.webp": {
"original_hash": "20fda1612cc0e8d20e6be01ffc28e5f7",
"translation_date": "2026-01-15T15:44:53+00:00",
"source_file": "sketchnotes/webdev101-js-datatypes.png",
"language_code": "mo"
},
"webdev101-js.10280393044d7eaa.webp": {
"original_hash": "fe1f154de74b31fdeb9a6df40e7ad5e1",
"translation_date": "2026-01-15T15:45:22+00:00",
"source_file": "sketchnotes/webdev101-js.png",
"language_code": "mo"
},
"webdev101-js-arrays.439d7528b8a29455.webp": {
"original_hash": "564c9e2d7f8e5a3b7e23570df300c732",
"translation_date": "2026-01-15T15:45:46+00:00",
"source_file": "sketchnotes/webdev101-js-arrays.png",
"language_code": "mo"
},
"create-new-file.2814e609c2af9aeb.webp": {
"original_hash": "cf6df76faeac2d92904e5d877b7bdf69",
"translation_date": "2026-01-15T15:45:51+00:00",
"source_file": "8-code-editor/images/create-new-file.png",
"language_code": "mo"
},
"create-new-file-pb.0797800d977ec3eb.webp": {
"original_hash": "c149c42e04132f2409651425d6924ffa",
"translation_date": "2026-01-15T15:46:02+00:00",
"source_file": "8-code-editor/images/create-new-file-pb.png",
"language_code": "mo"
},
"extension-settings.21c752ae4f4cdb78.webp": {
"original_hash": "fd7ebcb5d84c78047026ab3337908306",
"translation_date": "2026-01-15T15:46:22+00:00",
"source_file": "8-code-editor/images/extension-settings.png",
"language_code": "mo"
},
"after-codeswing-extension-pb.0ebddddcf73b5509.webp": {
"original_hash": "861d59ec65a7334c5f3a4c02dfe22ceb",
"translation_date": "2026-01-15T15:47:35+00:00",
"source_file": "8-code-editor/images/after-codeswing-extension-pb.png",
"language_code": "mo"
},
"create-a-fork.297ab42b4bd0af99.webp": {
"original_hash": "10712b80e3dcfa7c44fb8820a6ff3ad3",
"translation_date": "2026-01-15T15:47:40+00:00",
"source_file": "8-code-editor/images/create-a-fork.png",
"language_code": "mo"
},
"open-remote-repository.bd9c2598b8949e7f.webp": {
"original_hash": "777c01a9242da7d5d0e1b037df9c86f9",
"translation_date": "2026-01-15T15:47:43+00:00",
"source_file": "8-code-editor/images/open-remote-repository.png",
"language_code": "mo"
},
"extensions.eca0e0c7f59a10b5.webp": {
"original_hash": "a6c9c8f51d3edd917262e53664f08441",
"translation_date": "2026-01-15T15:47:48+00:00",
"source_file": "8-code-editor/images/extensions.png",
"language_code": "mo"
},
"edit-a-file-pb.263555922c14fc52.webp": {
"original_hash": "5c52723d35259eadd110d0c720a87b04",
"translation_date": "2026-01-15T15:48:24+00:00",
"source_file": "8-code-editor/images/edit-a-file-pb.png",
"language_code": "mo"
},
"palette-menu.4946174e07f42622.webp": {
"original_hash": "7387b91076790084ec8828866e88c6ce",
"translation_date": "2026-01-15T15:48:28+00:00",
"source_file": "8-code-editor/images/palette-menu.png",
"language_code": "mo"
},
"open-palette-menu.46dda01084738da8.webp": {
"original_hash": "1860e80bf0534b9d54ef0fcb7e1a9f9e",
"translation_date": "2026-01-15T15:48:34+00:00",
"source_file": "8-code-editor/images/open-palette-menu.png",
"language_code": "mo"
},
"default-vscode-dev.5d06881d65c1b323.webp": {
"original_hash": "146fecc3a9da37cb1d5c9d628cd94996",
"translation_date": "2026-01-15T15:48:41+00:00",
"source_file": "8-code-editor/images/default-vscode-dev.png",
"language_code": "mo"
},
"project-on-vscode.dev.e79815a9a95ee7fe.webp": {
"original_hash": "35de4bc32ea66a11f919671558e07d52",
"translation_date": "2026-01-15T15:48:46+00:00",
"source_file": "8-code-editor/images/project-on-vscode.dev.png",
"language_code": "mo"
},
"new-file-github.com.c886796d800e8056.webp": {
"original_hash": "2e0ddd0dad4734e3968b70907df9c052",
"translation_date": "2026-01-15T15:49:00+00:00",
"source_file": "8-code-editor/images/new-file-github.com.png",
"language_code": "mo"
},
"working-tree.c58eec08e6335c79.webp": {
"original_hash": "bf2608b4302123a00a8e7b1b6a430b4a",
"translation_date": "2026-01-15T15:49:10+00:00",
"source_file": "8-code-editor/images/working-tree.png",
"language_code": "mo"
},
"working-tree-pb.6cd43e5076f23ba3.webp": {
"original_hash": "f6b14887694745dd143a09bd60b74185",
"translation_date": "2026-01-15T15:49:21+00:00",
"source_file": "8-code-editor/images/working-tree-pb.png",
"language_code": "mo"
},
"extension-details.9f8f1fd4e9eb2de5.webp": {
"original_hash": "f57d2e246e6ba8a58463d7573640d714",
"translation_date": "2026-01-15T15:49:41+00:00",
"source_file": "8-code-editor/images/extension-details.png",
"language_code": "mo"
},
"edit-a-file.52c0ee665ef19f08.webp": {
"original_hash": "c28903236d60be6bba3f3848ea368c63",
"translation_date": "2026-01-15T15:49:46+00:00",
"source_file": "8-code-editor/images/edit-a-file.png",
"language_code": "mo"
},
"canvas_grid.5f209da785ded492.webp": {
"original_hash": "8da354720ffbfd778571aa17402de890",
"translation_date": "2026-01-15T15:49:49+00:00",
"source_file": "6-space-game/2-drawing-to-canvas/canvas_grid.png",
"language_code": "mo"
},
"partI-solution.36c53b48c9ffae2a.webp": {
"original_hash": "fbbd263368f61f8ed3a86c4571e6810b",
"translation_date": "2026-01-15T15:49:51+00:00",
"source_file": "6-space-game/2-drawing-to-canvas/partI-solution.png",
"language_code": "mo"
},
"spritesheet.bec82852290b14ee.webp": {
"original_hash": "d593b0f366e9efd2f2b3ef18e7eb2d0c",
"translation_date": "2026-01-15T15:49:52+00:00",
"source_file": "6-space-game/solution/spritesheet.png",
"language_code": "mo"
},
"laserRed.e86e8fb629c6026e.webp": {
"original_hash": "6f0626e9839beb9d9a82ff40699aabfd",
"translation_date": "2026-01-15T15:49:52+00:00",
"source_file": "6-space-game/4-collision-detection/your-work/assets/laserRed.png",
"language_code": "mo"
},
"enemyShip.b9626ed228a17a32.webp": {
"original_hash": "2a41854e0eaa974e8619298f3b333e11",
"translation_date": "2026-01-15T15:49:53+00:00",
"source_file": "6-space-game/4-collision-detection/your-work/assets/enemyShip.png",
"language_code": "mo"
},
"player.680ea4c619b54fe1.webp": {
"original_hash": "952e66c2dd458cfd6e82052f7123a97b",
"translation_date": "2026-01-15T15:49:53+00:00",
"source_file": "6-space-game/4-collision-detection/your-work/assets/player.png",
"language_code": "mo"
},
"life.466df3b1692a244a.webp": {
"original_hash": "9a5d93e699071693b15b7b157f760a90",
"translation_date": "2026-01-15T15:49:54+00:00",
"source_file": "6-space-game/4-collision-detection/your-work/assets/life.png",
"language_code": "mo"
},
"laserRed.cae9ab24ea9b18fd.webp": {
"original_hash": "6f0626e9839beb9d9a82ff40699aabfd",
"translation_date": "2026-01-15T15:49:54+00:00",
"source_file": "6-space-game/4-collision-detection/solution/assets/laserRed.png",
"language_code": "mo"
},
"enemyShip.add7036e1c3c3014.webp": {
"original_hash": "2a41854e0eaa974e8619298f3b333e11",
"translation_date": "2026-01-15T15:49:54+00:00",
"source_file": "6-space-game/4-collision-detection/solution/assets/enemyShip.png",
"language_code": "mo"
},
"player.c99c25d54a615ca0.webp": {
"original_hash": "952e66c2dd458cfd6e82052f7123a97b",
"translation_date": "2026-01-15T15:49:55+00:00",
"source_file": "6-space-game/4-collision-detection/solution/assets/player.png",
"language_code": "mo"
},
"life.65a2aaceca875284.webp": {
"original_hash": "9a5d93e699071693b15b7b157f760a90",
"translation_date": "2026-01-15T15:49:56+00:00",
"source_file": "6-space-game/4-collision-detection/solution/assets/life.png",
"language_code": "mo"
},
"enemyShip.22cbee6ea27a5809.webp": {
"original_hash": "2a41854e0eaa974e8619298f3b333e11",
"translation_date": "2026-01-15T15:49:56+00:00",
"source_file": "6-space-game/2-drawing-to-canvas/your-work/assets/enemyShip.png",
"language_code": "mo"
},
"player.47bc9de0714c723d.webp": {
"original_hash": "952e66c2dd458cfd6e82052f7123a97b",
"translation_date": "2026-01-15T15:49:57+00:00",
"source_file": "6-space-game/2-drawing-to-canvas/your-work/assets/player.png",
"language_code": "mo"
},
"enemyShip.5df2a822c16650c2.webp": {
"original_hash": "2a41854e0eaa974e8619298f3b333e11",
"translation_date": "2026-01-15T15:49:57+00:00",
"source_file": "6-space-game/2-drawing-to-canvas/solution/assets/enemyShip.png",
"language_code": "mo"
},
"player.dd24c1afa8c71e9b.webp": {
"original_hash": "952e66c2dd458cfd6e82052f7123a97b",
"translation_date": "2026-01-15T15:49:58+00:00",
"source_file": "6-space-game/2-drawing-to-canvas/solution/assets/player.png",
"language_code": "mo"
},
"laserRed.69730edd76f0b3bd.webp": {
"original_hash": "6f0626e9839beb9d9a82ff40699aabfd",
"translation_date": "2026-01-15T15:49:58+00:00",
"source_file": "6-space-game/6-end-condition/your-work/assets/laserRed.png",
"language_code": "mo"
},
"enemyShip.4fbf2889e6129db4.webp": {
"original_hash": "2a41854e0eaa974e8619298f3b333e11",
"translation_date": "2026-01-15T15:49:59+00:00",
"source_file": "6-space-game/6-end-condition/your-work/assets/enemyShip.png",
"language_code": "mo"
},
"player.606f85953e5e564e.webp": {
"original_hash": "952e66c2dd458cfd6e82052f7123a97b",
"translation_date": "2026-01-15T15:49:59+00:00",
"source_file": "6-space-game/6-end-condition/your-work/assets/player.png",
"language_code": "mo"
},
"life.78b6e96a3003767e.webp": {
"original_hash": "9a5d93e699071693b15b7b157f760a90",
"translation_date": "2026-01-15T15:50:00+00:00",
"source_file": "6-space-game/6-end-condition/your-work/assets/life.png",
"language_code": "mo"
},
"laserRed.2040e11f55c0a40a.webp": {
"original_hash": "6f0626e9839beb9d9a82ff40699aabfd",
"translation_date": "2026-01-15T15:50:00+00:00",
"source_file": "6-space-game/6-end-condition/solution/assets/laserRed.png",
"language_code": "mo"
},
"enemyShip.1a1354d7988de290.webp": {
"original_hash": "2a41854e0eaa974e8619298f3b333e11",
"translation_date": "2026-01-15T15:50:00+00:00",
"source_file": "6-space-game/6-end-condition/solution/assets/enemyShip.png",
"language_code": "mo"
},
"player.137ee0e47f895ffc.webp": {
"original_hash": "952e66c2dd458cfd6e82052f7123a97b",
"translation_date": "2026-01-15T15:50:01+00:00",
"source_file": "6-space-game/6-end-condition/solution/assets/player.png",
"language_code": "mo"
},
"life.86d843ce9c23289c.webp": {
"original_hash": "9a5d93e699071693b15b7b157f760a90",
"translation_date": "2026-01-15T15:50:01+00:00",
"source_file": "6-space-game/6-end-condition/solution/assets/life.png",
"language_code": "mo"
},
"laserRed.e58ef8db2585dfbe.webp": {
"original_hash": "6f0626e9839beb9d9a82ff40699aabfd",
"translation_date": "2026-01-15T15:50:02+00:00",
"source_file": "6-space-game/5-keeping-score/your-work/assets/laserRed.png",
"language_code": "mo"
},
"enemyShip.321ecb1b4eb21f2c.webp": {
"original_hash": "2a41854e0eaa974e8619298f3b333e11",
"translation_date": "2026-01-15T15:50:02+00:00",
"source_file": "6-space-game/5-keeping-score/your-work/assets/enemyShip.png",
"language_code": "mo"
},
"player.2887422f6982c3cd.webp": {
"original_hash": "952e66c2dd458cfd6e82052f7123a97b",
"translation_date": "2026-01-15T15:50:03+00:00",
"source_file": "6-space-game/5-keeping-score/your-work/assets/player.png",
"language_code": "mo"
},
"life.2a159298dd98f4ef.webp": {
"original_hash": "9a5d93e699071693b15b7b157f760a90",
"translation_date": "2026-01-15T15:50:03+00:00",
"source_file": "6-space-game/5-keeping-score/your-work/assets/life.png",
"language_code": "mo"
},
"laserRed.b583dc1728eb8581.webp": {
"original_hash": "6f0626e9839beb9d9a82ff40699aabfd",
"translation_date": "2026-01-15T15:50:03+00:00",
"source_file": "6-space-game/5-keeping-score/solution/assets/laserRed.png",
"language_code": "mo"
},
"enemyShip.035a46787bff658c.webp": {
"original_hash": "2a41854e0eaa974e8619298f3b333e11",
"translation_date": "2026-01-15T15:50:04+00:00",
"source_file": "6-space-game/5-keeping-score/solution/assets/enemyShip.png",
"language_code": "mo"
},
"player.391fed427ede24f5.webp": {
"original_hash": "952e66c2dd458cfd6e82052f7123a97b",
"translation_date": "2026-01-15T15:50:05+00:00",
"source_file": "6-space-game/5-keeping-score/solution/assets/player.png",
"language_code": "mo"
},
"life.6fb9f50d53ee0413.webp": {
"original_hash": "9a5d93e699071693b15b7b157f760a90",
"translation_date": "2026-01-15T15:50:05+00:00",
"source_file": "6-space-game/5-keeping-score/solution/assets/life.png",
"language_code": "mo"
},
"preview.9215f0a010074476.webp": {
"original_hash": "6eaab6a69de1fa433e822578652c7287",
"translation_date": "2026-01-15T15:50:07+00:00",
"source_file": "6-space-game/solution/spaceArt/preview.jpg",
"language_code": "mo"
},
"meteorBig.1e452b3ad7af50ad.webp": {
"original_hash": "07f37816512f563dd68780fdee2e30a6",
"translation_date": "2026-01-15T15:50:08+00:00",
"source_file": "6-space-game/solution/spaceArt/png/meteorBig.png",
"language_code": "mo"
},
"meteorSmall.0d729bc71c12d41f.webp": {
"original_hash": "ebabf6690cc614f9e33f019c356166fa",
"translation_date": "2026-01-15T15:50:08+00:00",
"source_file": "6-space-game/solution/spaceArt/png/meteorSmall.png",
"language_code": "mo"
},
"laserRed.d81ce4986f87c251.webp": {
"original_hash": "6f0626e9839beb9d9a82ff40699aabfd",
"translation_date": "2026-01-15T15:50:09+00:00",
"source_file": "6-space-game/solution/spaceArt/png/laserRed.png",
"language_code": "mo"
},
"enemyShip.deb0477a7312f54d.webp": {
"original_hash": "2a41854e0eaa974e8619298f3b333e11",
"translation_date": "2026-01-15T15:50:09+00:00",
"source_file": "6-space-game/solution/spaceArt/png/enemyShip.png",
"language_code": "mo"
},
"player.57b3107c03012695.webp": {
"original_hash": "952e66c2dd458cfd6e82052f7123a97b",
"translation_date": "2026-01-15T15:50:10+00:00",
"source_file": "6-space-game/solution/spaceArt/png/player.png",
"language_code": "mo"
},
"laserGreenShot.e4fbfc4714c08a5b.webp": {
"original_hash": "cb6ed500c16736a41998e4cd0c467df7",
"translation_date": "2026-01-15T15:50:11+00:00",
"source_file": "6-space-game/solution/spaceArt/png/laserGreenShot.png",
"language_code": "mo"
},
"life.27144b6d4bfdea76.webp": {
"original_hash": "9a5d93e699071693b15b7b157f760a90",
"translation_date": "2026-01-15T15:50:12+00:00",
"source_file": "6-space-game/solution/spaceArt/png/life.png",
"language_code": "mo"
},
"laserGreen.89904f0f49945560.webp": {
"original_hash": "ddf7102c86fc3ec46037714c60091851",
"translation_date": "2026-01-15T15:50:12+00:00",
"source_file": "6-space-game/solution/spaceArt/png/laserGreen.png",
"language_code": "mo"
},
"laserRedShot.c39d066745996a71.webp": {
"original_hash": "1f1048184aab9d405e9f7d067a57af01",
"translation_date": "2026-01-15T15:50:12+00:00",
"source_file": "6-space-game/solution/spaceArt/png/laserRedShot.png",
"language_code": "mo"
},
"enemyUFO.bf8585e4e8dcdb68.webp": {
"original_hash": "18198bef76e4882928e4092344d0fb98",
"translation_date": "2026-01-15T15:50:13+00:00",
"source_file": "6-space-game/solution/spaceArt/png/enemyUFO.png",
"language_code": "mo"
},
"shield.1b9412b7ca6610ab.webp": {
"original_hash": "a672dc1a5f905918272bb58f1e236340",
"translation_date": "2026-01-15T15:50:14+00:00",
"source_file": "6-space-game/solution/spaceArt/png/shield.png",
"language_code": "mo"
},
"playerDamaged.181703f652fd5176.webp": {
"original_hash": "9d71aebe7303edd536064fb0f5e2ae82",
"translation_date": "2026-01-15T15:50:15+00:00",
"source_file": "6-space-game/solution/spaceArt/png/playerDamaged.png",
"language_code": "mo"
},
"playerRight.e4825f489e29f737.webp": {
"original_hash": "1c7b03f73e1d6ed74955357680cb05cb",
"translation_date": "2026-01-15T15:50:15+00:00",
"source_file": "6-space-game/solution/spaceArt/png/playerRight.png",
"language_code": "mo"
},
"playerLeft.0f928412e66ba5d9.webp": {
"original_hash": "40a42047b8ee49c6dd87c981e98d4d2e",
"translation_date": "2026-01-15T15:50:16+00:00",
"source_file": "6-space-game/solution/spaceArt/png/playerLeft.png",
"language_code": "mo"
},
"backgroundColor.e19c3c60768150c8.webp": {
"original_hash": "b3e10fe033f615ec9d3580cce61eae09",
"translation_date": "2026-01-15T15:50:16+00:00",
"source_file": "6-space-game/solution/spaceArt/png/Background/backgroundColor.png",
"language_code": "mo"
},
"starBig.72e9c6d0d18f363d.webp": {
"original_hash": "4e8f1abc8b48d75990117ea8b6207842",
"translation_date": "2026-01-15T15:50:17+00:00",
"source_file": "6-space-game/solution/spaceArt/png/Background/starBig.png",
"language_code": "mo"
},
"starBackground.a897b8acb1b0587d.webp": {
"original_hash": "cca00ba0b9e73859ab5bb928d5ca2fa2",
"translation_date": "2026-01-15T15:50:20+00:00",
"source_file": "6-space-game/solution/spaceArt/png/Background/starBackground.png",
"language_code": "mo"
},
"starSmall.ed78b961dbcd0898.webp": {
"original_hash": "609bf88a971475818f95816b8cf71508",
"translation_date": "2026-01-15T15:50:20+00:00",
"source_file": "6-space-game/solution/spaceArt/png/Background/starSmall.png",
"language_code": "mo"
},
"speedLine.5bcabb93f48b5ae1.webp": {
"original_hash": "ef791dbe8ea2e21cf697831e203803d5",
"translation_date": "2026-01-15T15:50:21+00:00",
"source_file": "6-space-game/solution/spaceArt/png/Background/speedLine.png",
"language_code": "mo"
},
"nebula.55c2933d36d035d3.webp": {
"original_hash": "e0fa4f86653c6fe97bc77271c46241c2",
"translation_date": "2026-01-15T15:50:22+00:00",
"source_file": "6-space-game/solution/spaceArt/png/Background/nebula.png",
"language_code": "mo"
},
"laserRed.381bc5555491ce67.webp": {
"original_hash": "6f0626e9839beb9d9a82ff40699aabfd",
"translation_date": "2026-01-15T15:50:22+00:00",
"source_file": "6-space-game/3-moving-elements-around/your-work/assets/laserRed.png",
"language_code": "mo"
},
"enemyShip.b39a140287683bf7.webp": {
"original_hash": "2a41854e0eaa974e8619298f3b333e11",
"translation_date": "2026-01-15T15:50:23+00:00",
"source_file": "6-space-game/3-moving-elements-around/your-work/assets/enemyShip.png",
"language_code": "mo"
},
"player.3c4f50182552a73a.webp": {
"original_hash": "952e66c2dd458cfd6e82052f7123a97b",
"translation_date": "2026-01-15T15:50:23+00:00",
"source_file": "6-space-game/3-moving-elements-around/your-work/assets/player.png",
"language_code": "mo"
},
"laserRed.e66e29ace6666064.webp": {
"original_hash": "6f0626e9839beb9d9a82ff40699aabfd",
"translation_date": "2026-01-15T15:50:23+00:00",
"source_file": "6-space-game/3-moving-elements-around/solution/assets/laserRed.png",
"language_code": "mo"
},
"enemyShip.62983ed4bfb2220f.webp": {
"original_hash": "2a41854e0eaa974e8619298f3b333e11",
"translation_date": "2026-01-15T15:50:24+00:00",
"source_file": "6-space-game/3-moving-elements-around/solution/assets/enemyShip.png",
"language_code": "mo"
},
"player.bfe14f110bddf56d.webp": {
"original_hash": "952e66c2dd458cfd6e82052f7123a97b",
"translation_date": "2026-01-15T15:50:25+00:00",
"source_file": "6-space-game/3-moving-elements-around/solution/assets/player.png",
"language_code": "mo"
},
"localstorage.472f8147b6a3f8d1.webp": {
"original_hash": "7706ccb87a13a08250f315f03140bc61",
"translation_date": "2026-01-15T15:50:36+00:00",
"source_file": "5-browser-extension/2-forms-browsers-local-storage/images/localstorage.png",
"language_code": "mo"
},
"snapshot.97750180ebcad737.webp": {
"original_hash": "9db2fa7afcc1d258ec1a130cef145f94",
"translation_date": "2026-01-15T15:50:43+00:00",
"source_file": "5-browser-extension/3-background-tasks-and-performance/images/snapshot.png",
"language_code": "mo"
},
"profiler.5a4a62479c5df01c.webp": {
"original_hash": "40b8a4d9f47e2f3e18aa2e814a15356c",
"translation_date": "2026-01-15T15:51:16+00:00",
"source_file": "5-browser-extension/3-background-tasks-and-performance/images/profiler.png",
"language_code": "mo"
},
"log.804026979f3707e0.webp": {
"original_hash": "4c5e39f339781db01641b77b6b2d6026",
"translation_date": "2026-01-15T15:51:26+00:00",
"source_file": "5-browser-extension/3-background-tasks-and-performance/images/log.png",
"language_code": "mo"
},
"earlybrowsers.d984b711cdf3a42d.webp": {
"original_hash": "810a4d2348668e25289029c5cfcb67bd",
"translation_date": "2026-01-15T15:51:35+00:00",
"source_file": "5-browser-extension/1-about-browsers/images/earlybrowsers.jpg",
"language_code": "mo"
},
"2.1dae52ff08042246.webp": {
"original_hash": "3995628a6a986308859d0cb6eed8d787",
"translation_date": "2026-01-15T15:51:48+00:00",
"source_file": "5-browser-extension/1-about-browsers/images/2.png",
"language_code": "mo"
},
"install-on-edge.d68781acaf0b3d3d.webp": {
"original_hash": "6224aad8f1cd252da83c2808ff5c7a4e",
"translation_date": "2026-01-15T15:52:10+00:00",
"source_file": "5-browser-extension/1-about-browsers/images/install-on-edge.png",
"language_code": "mo"
},
"1.b6da8c1394b07491.webp": {
"original_hash": "6b12479c2e6a54160867fa8945c04082",
"translation_date": "2026-01-15T15:52:20+00:00",
"source_file": "5-browser-extension/1-about-browsers/images/1.png",
"language_code": "mo"
},
"history.7fdabbafa521e064.webp": {
"original_hash": "445d71bea6a747dfe547df7eea846439",
"translation_date": "2026-01-15T15:52:26+00:00",
"source_file": "7-bank-project/1-template-route/history.png",
"language_code": "mo"
},
"screen1.baccbba0f1f93364.webp": {
"original_hash": "92c8fa2dbe566c4e19c98a9e7de6faa6",
"translation_date": "2026-01-15T15:52:32+00:00",
"source_file": "7-bank-project/images/screen1.png",
"language_code": "mo"
},
"screen2.123c82a831a1d14a.webp": {
"original_hash": "43b7f2857d5f758394e443df8fbc31cf",
"translation_date": "2026-01-15T15:52:43+00:00",
"source_file": "7-bank-project/images/screen2.png",
"language_code": "mo"
},
"click-register.e89a30bf0d4bc9ca.webp": {
"original_hash": "ef9688313524664fad6ab9b0e080c758",
"translation_date": "2026-01-15T15:52:43+00:00",
"source_file": "7-bank-project/2-forms/images/click-register.png",
"language_code": "mo"
},
"form-post.61de4ca1b964d91a.webp": {
"original_hash": "7e95c76a8ea2e82bceea70aae89f2360",
"translation_date": "2026-01-15T15:52:50+00:00",
"source_file": "7-bank-project/2-forms/images/form-post.png",
"language_code": "mo"
},
"validation-error.8bd23e98d416c22f.webp": {
"original_hash": "d614ce6b24e2583901da9038297fe327",
"translation_date": "2026-01-15T15:52:53+00:00",
"source_file": "7-bank-project/2-forms/images/validation-error.png",
"language_code": "mo"
},
"result.96ef01f607bf856a.webp": {
"original_hash": "e83c44a0fcaa7720ce32eb71d53d5250",
"translation_date": "2026-01-15T15:52:59+00:00",
"source_file": "7-bank-project/2-forms/images/result.png",
"language_code": "mo"
},
"browser-console.efaf0b51aaaf6778.webp": {
"original_hash": "8d6c5077d1f133d27c65c0014ef503a9",
"translation_date": "2026-01-15T15:53:06+00:00",
"source_file": "7-bank-project/2-forms/images/browser-console.png",
"language_code": "mo"
},
"login-error.416fe019b36a6327.webp": {
"original_hash": "ea96ed372d7a4c37ee2df3f0352f79d1",
"translation_date": "2026-01-15T15:53:10+00:00",
"source_file": "7-bank-project/3-data/images/login-error.png",
"language_code": "mo"
},
"mpa.7f7375a1a2d4aa77.webp": {
"original_hash": "021255b74f0b79b0c286c163c210ef3d",
"translation_date": "2026-01-15T15:53:15+00:00",
"source_file": "7-bank-project/3-data/images/mpa.png",
"language_code": "mo"
},
"spa.268ec73b41f992c2.webp": {
"original_hash": "3d3d7273070c2ddab04458fbb084ad4a",
"translation_date": "2026-01-15T15:53:20+00:00",
"source_file": "7-bank-project/3-data/images/spa.png",
"language_code": "mo"
},
"dialog.93bba104afeb79f1.webp": {
"original_hash": "c56b5ad7eb8c4df4b3ed8a99bf67e6e2",
"translation_date": "2026-01-15T15:53:28+00:00",
"source_file": "7-bank-project/4-state-management/images/dialog.png",
"language_code": "mo"
},
"data-flow.fa2354e0908fecc8.webp": {
"original_hash": "c9b82b42fa1973b3b7bfad9c7128c24c",
"translation_date": "2026-01-15T15:53:31+00:00",
"source_file": "7-bank-project/4-state-management/images/data-flow.png",
"language_code": "mo"
},
"screenshot_gray.0c796099a1f9f25e.webp": {
"original_hash": "324b7bff7867c38e100d0acad18ed53d",
"translation_date": "2026-01-15T15:53:35+00:00",
"source_file": "3-terrarium/images/screenshot_gray.png",
"language_code": "mo"
},
"vs-code-index.e2986cf919471eb9.webp": {
"original_hash": "ed8437cb2629b95551fff5e5d72ef4f5",
"translation_date": "2026-01-15T15:53:39+00:00",
"source_file": "3-terrarium/1-intro-to-html/images/vs-code-index.png",
"language_code": "mo"
},
"dom-tree.7daf0e763cbbba92.webp": {
"original_hash": "579f4ae298ff15a357def7f442671847",
"translation_date": "2026-01-15T15:53:51+00:00",
"source_file": "3-terrarium/3-intro-to-DOM-and-closures/images/dom-tree.png",
"language_code": "mo"
},
"terrarium-final.0920f16e87c13a84.webp": {
"original_hash": "324b7bff7867c38e100d0acad18ed53d",
"translation_date": "2026-01-15T15:53:56+00:00",
"source_file": "3-terrarium/3-intro-to-DOM-and-closures/images/terrarium-final.png",
"language_code": "mo"
},
"plant7.194d5a42fcf5a88c.webp": {
"original_hash": "b7a1e35f9946cb04440ce620c34f201d",
"translation_date": "2026-01-15T15:54:08+00:00",
"source_file": "3-terrarium/solution/images/plant7.png",
"language_code": "mo"
},
"plant9.8fe614c01ded1b1e.webp": {
"original_hash": "a9655c162938a27c63d48ac675061e2b",
"translation_date": "2026-01-15T15:54:20+00:00",
"source_file": "3-terrarium/solution/images/plant9.png",
"language_code": "mo"
},
"plant8.7b247809ab0eb492.webp": {
"original_hash": "3eb38c747aaf33ce7aa70b58a31b62a8",
"translation_date": "2026-01-15T15:54:41+00:00",
"source_file": "3-terrarium/solution/images/plant8.png",
"language_code": "mo"
},
"plant1.a876180d8659acb9.webp": {
"original_hash": "e08f9b0f46f6d9d7c9949d4c3e590694",
"translation_date": "2026-01-15T15:54:48+00:00",
"source_file": "3-terrarium/solution/images/plant1.png",
"language_code": "mo"
},
"plant14.908791477a46eb7f.webp": {
"original_hash": "349b8e5a33d1221bef4a4ac3bb439bb9",
"translation_date": "2026-01-15T15:55:02+00:00",
"source_file": "3-terrarium/solution/images/plant14.png",
"language_code": "mo"
},
"plant6.ca4ff8372e6676b1.webp": {
"original_hash": "6932fdb455fcae5b324b129367d2f56a",
"translation_date": "2026-01-15T15:55:09+00:00",
"source_file": "3-terrarium/solution/images/plant6.png",
"language_code": "mo"
},
"plant11.0ce0081b0ef17aa1.webp": {
"original_hash": "68346dbd1ae03331b0a87025c3e8e9e2",
"translation_date": "2026-01-15T15:55:23+00:00",
"source_file": "3-terrarium/solution/images/plant11.png",
"language_code": "mo"
},
"plant10.2f2c47804ae52dd3.webp": {
"original_hash": "dba97454882c2796c52a33c403db61f7",
"translation_date": "2026-01-15T15:55:34+00:00",
"source_file": "3-terrarium/solution/images/plant10.png",
"language_code": "mo"
},
"plant13.37d6ab2e2481421f.webp": {
"original_hash": "5cac561d7596ee631c4d02436d8f6998",
"translation_date": "2026-01-15T15:55:47+00:00",
"source_file": "3-terrarium/solution/images/plant13.png",
"language_code": "mo"
},
"plant4.3b78072b427727c6.webp": {
"original_hash": "c523205855d0691a9a0161c6abca983c",
"translation_date": "2026-01-15T15:55:56+00:00",
"source_file": "3-terrarium/solution/images/plant4.png",
"language_code": "mo"
},
"plant3.06efdd0fa0c4b115.webp": {
"original_hash": "7e40e6f14cf52f7d75ed42320817b044",
"translation_date": "2026-01-15T15:56:03+00:00",
"source_file": "3-terrarium/solution/images/plant3.png",
"language_code": "mo"
},
"plant5.8ec58b18ac336fa8.webp": {
"original_hash": "bcf5f2eacd7da3fe6b07c857d7f5a2ce",
"translation_date": "2026-01-15T15:56:11+00:00",
"source_file": "3-terrarium/solution/images/plant5.png",
"language_code": "mo"
},
"plant2.9e45efea224115b0.webp": {
"original_hash": "24beefd3dcca66085b44d3ae5d9758e1",
"translation_date": "2026-01-15T15:56:21+00:00",
"source_file": "3-terrarium/solution/images/plant2.png",
"language_code": "mo"
},
"plant12.6b934c4312a00228.webp": {
"original_hash": "dafacde8e7a0b56c4baaabe88b4f90e2",
"translation_date": "2026-01-15T15:56:27+00:00",
"source_file": "3-terrarium/solution/images/plant12.png",
"language_code": "mo"
},
"terrarium-final.2f07047ffc597d0a.webp": {
"original_hash": "c669f9222e16690bb2015ce86bb4739c",
"translation_date": "2026-01-15T15:56:30+00:00",
"source_file": "3-terrarium/2-intro-to-css/images/terrarium-final.png",
"language_code": "mo"
},
"1.cc07a5cbe114ad1d.webp": {
"original_hash": "fc436b6749801dd90d0558ae92d56b60",
"translation_date": "2026-01-15T15:56:33+00:00",
"source_file": "3-terrarium/2-intro-to-css/images/1.png",
"language_code": "mo"
},
"clone_repo.5085c48d666ead57.webp": {
"original_hash": "28c00f3d5861ab95d188b4f6a2d337df",
"translation_date": "2026-01-15T15:56:39+00:00",
"source_file": "1-getting-started-lessons/2-github-basics/images/clone_repo.png",
"language_code": "mo"
},
"codespace.bcecbdf5d2747d3d.webp": {
"original_hash": "ff86a65511122ddb448e092969566b0a",
"translation_date": "2026-01-15T15:56:44+00:00",
"source_file": "9-chat-project/assets/codespace.png",
"language_code": "mo"
},
"playground.d2b927122224ff8f.webp": {
"original_hash": "4152bb8cd5f23e73d58b3beb52919477",
"translation_date": "2026-01-15T15:57:14+00:00",
"source_file": "9-chat-project/assets/playground.png",
"language_code": "mo"
},
"playground-choice.1d23ba7d407f4758.webp": {
"original_hash": "1c2e88cad7aad10922b4de1e87f1a47f",
"translation_date": "2026-01-15T15:57:18+00:00",
"source_file": "9-chat-project/assets/playground-choice.png",
"language_code": "mo"
},
"template.67ad477109d29a2b.webp": {
"original_hash": "a184e4c012fd4fca9ab3c552df87bd0c",
"translation_date": "2026-01-15T15:57:21+00:00",
"source_file": "9-chat-project/assets/template.png",
"language_code": "mo"
},
"screenshot.0a1ee0d123df681b.webp": {
"original_hash": "f909b463a14ff6542a816470f68bfac3",
"translation_date": "2026-01-15T15:57:44+00:00",
"source_file": "9-chat-project/assets/screenshot.png",
"language_code": "mo"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 193 KiB

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScript အခြေခံ: ဒေတာအမျိုးအစားများ
![JavaScript အခြေခံ - ဒေတာအမျိုးအစားများ](../../../../translated_images/my/webdev101-js-datatypes.4cc470179730702c.png)
![JavaScript အခြေခံ - ဒေတာအမျိုးအစားများ](../../../../translated_images/my/webdev101-js-datatypes.4cc470179730702c.webp)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScript အခြေခံ: Methods နှင့် Functions
![JavaScript Basics - Functions](../../../../translated_images/my/webdev101-js-functions.be049c4726e94f8b.png)
![JavaScript Basics - Functions](../../../../translated_images/my/webdev101-js-functions.be049c4726e94f8b.webp)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScript အခြေခံ: ဆုံးဖြတ်ချက်များလုပ်ခြင်း
![JavaScript အခြေခံ - ဆုံးဖြတ်ချက်များလုပ်ခြင်း](../../../../translated_images/my/webdev101-js-decisions.69e1b20f272dd1f0.png)
![JavaScript အခြေခံ - ဆုံးဖြတ်ချက်များလုပ်ခြင်း](../../../../translated_images/my/webdev101-js-decisions.69e1b20f272dd1f0.webp)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScript အခြေခံ: Arrays နှင့် Loops
![JavaScript Basics - Arrays](../../../../translated_images/my/webdev101-js-arrays.439d7528b8a29455.png)
![JavaScript Basics - Arrays](../../../../translated_images/my/webdev101-js-arrays.439d7528b8a29455.webp)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -26,7 +26,7 @@ journey
Build terrarium: 5: Student
```
![HTML ကိုမိတ်ဆက်ခြင်း](../../../../translated_images/my/webdev101-html.4389c2067af68e98.png)
![HTML ကိုမိတ်ဆက်ခြင်း](../../../../translated_images/my/webdev101-html.4389c2067af68e98.webp)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, သို့မဟုတ် HyperText Markup Language ဟာ သင်သွားရောက်ခဲ့တဲ့ website တစ်ခုချင်းစီရဲ့ အခြေခံအဆောက်အအုံပဲဖြစ်ပါတယ်။ HTML ကို website ရဲ့ အရိုးတစ်ခုလိုပဲ စဉ်းစားနိုင်ပါတယ် content ကိုဘယ်မှာထားမလဲ၊ ဘယ်လိုစီမံမလဲ၊ အစိတ်အပိုင်းတစ်ခုချင်းစီက ဘာကိုကိုယ်စားပြုလဲဆိုတာကို သတ်မှတ်ပေးပါတယ်။ CSS က HTML ကို အရောင်နဲ့ layout တွေဖြင့် "အဝတ်အစား" ဝတ်ပေးမှာဖြစ်ပြီး၊ JavaScript ကတော့ interactivity ဖြင့် "အသက်" ပေးမှာဖြစ်ပါတယ်။ HTML က အခြေခံအဆောက်အအုံကိုပေးပြီး အခြားအရာတွေကိုဖြစ်နိုင်စေပါတယ်။
@ -88,7 +88,7 @@ HTML code ကိုစတင်မလုပ်ခင်မှာ သင့် te
4. Explorer pane မှာ "New File" icon ကို click လုပ်ပါ
5. သင့် file ကို `index.html` လို့အမည်ပေးပါ
![VS Code Explorer showing new file creation](../../../../translated_images/my/vs-code-index.e2986cf919471eb9.png)
![VS Code Explorer showing new file creation](../../../../translated_images/my/vs-code-index.e2986cf919471eb9.webp)
**Option 2: Terminal Commands ကိုအသုံးပြုခြင်း**
```bash

@ -30,7 +30,7 @@ journey
Glass reflections: 5: Student
```
![CSS ကိုမိတ်ဆက်ခြင်း](../../../../translated_images/my/webdev101-css.3f7af5991bf53a20.png)
![CSS ကိုမိတ်ဆက်ခြင်း](../../../../translated_images/my/webdev101-css.3f7af5991bf53a20.webp)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
HTML သင့်ရဲ့ terrarium အခြေခံပုံစံကို သတိရပါသလား? CSS က plain structure ကို visually appealing ဖြစ်အောင် ပြောင်းလဲပေးမယ်။
@ -205,7 +205,7 @@ body {
Browser ရဲ့ developer tools (F12) ကိုဖွင့်ပြီး Elements tab ကိုသွားပါ။ သင့်ရဲ့ `<h1>` element ကို inspect လုပ်ပါ။ `<body>` element ကနေ font family ကို inherit လုပ်ထားတာကိုတွေ့ပါလိမ့်မယ်:
![inherited font](../../../../translated_images/my/1.cc07a5cbe114ad1d.png)
![inherited font](../../../../translated_images/my/1.cc07a5cbe114ad1d.webp)
**Experiment Time**: `<body>` element မှာ `color`, `line-height`, `text-align` လို inheritable property တွေကို set လုပ်ကြည့်ပါ။ Heading နဲ့ အခြား element တွေမှာ ဘာတွေဖြစ်သွားလဲ?
@ -531,7 +531,7 @@ Terrarium ကိုလက်တွေ့ကျတဲ့ glass reflections နဲ
Light က glass surfaces တွေမှာဘယ်လိုပြန်လည်ထင်ရလဲဆိုတာ simulation လုပ်တဲ့ subtle highlights တွေကိုဖန်တီးပါမယ်။ Renaissance painters တွေက Jan van Eyck လိုမျိုး light နဲ့ reflection ကိုအသုံးပြုပြီး painted glass ကို three-dimensional ဖြစ်အောင်လုပ်ခဲ့သလိုမျိုးပါ။ သင့်ရဲ့ရည်မှန်းချက်ကတော့:
![finished terrarium](../../../../translated_images/my/terrarium-final.2f07047ffc597d0a.png)
![finished terrarium](../../../../translated_images/my/terrarium-final.2f07047ffc597d0a.webp)
**သင့်ရဲ့ challenge:**
- **Subtle white or light-colored oval shapes** ကို glass reflections အတွက်ဖန်တီးပါ

@ -26,7 +26,7 @@ journey
Complete terrarium: 5: Student
```
![DOM and a closure](../../../../translated_images/my/webdev101-js.10280393044d7eaa.png)
![DOM and a closure](../../../../translated_images/my/webdev101-js.10280393044d7eaa.webp)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
ဝင်ရောက်ကြိုဆိုပါတယ်။ ဒီနေ့မှာတော့ ဝက်ဘ်ဒီဇိုင်းကို အပြောင်းအလဲဖြစ်စေတဲ့ အပိုင်းတစ်ခုကို လေ့လာမှာဖြစ်ပါတယ်။ Document Object Model (DOM) ဟာ HTML နဲ့ JavaScript အကြားက တံတားတစ်ခုလိုဖြစ်ပြီး၊ ဒီနေ့မှာတော့ သင့် terrarium ကို အသက်ဝင်အောင်လုပ်ဖို့ အသုံးပြုမှာပါ။ Tim Berners-Lee က ပထမဆုံး ဝက်ဘ်ဘရောက်ဇာကို ဖန်တီးတဲ့အခါ၊ စာရွက်စာတမ်းတွေကို dynamic နဲ့ interactive ဖြစ်စေတဲ့ ဝက်ဘ်ကို ရည်ရွယ်ခဲ့ပါတယ်။ DOM က အဲဒီရည်မှန်းချက်ကို အကောင်အထည်ဖော်ပေးပါတယ်။
@ -105,7 +105,7 @@ flowchart TD
style Q fill:#ffebee
```
![DOM tree representation](../../../../translated_images/my/dom-tree.7daf0e763cbbba92.png)
![DOM tree representation](../../../../translated_images/my/dom-tree.7daf0e763cbbba92.webp)
> DOM နဲ့ HTML markup ကို ကိုယ်စားပြုထားတဲ့ပုံ။ [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) မှ
@ -150,7 +150,7 @@ flowchart LR
> 💡 **Closures ကိုနားလည်ခြင်း**: JavaScript မှာ closures ဟာ အရေးကြီးတဲ့အကြောင်းအရာတစ်ခုဖြစ်ပြီး၊ developer အများစုဟာ အနှစ်များစွာ အသုံးပြုပြီးမှသာ အကြောင်းအရာအားလုံးကို အပြည့်အဝ နားလည်နိုင်ပါတယ်။ ဒီနေ့မှာတော့ practical application ကို အဓိကထားပြီး interactive features တွေကို တည်ဆောက်တဲ့အခါ closures တွေကို သဘာဝအတိုင်း တွေ့မြင်ရမှာဖြစ်ပါတယ်။ နားလည်မှုတွေဟာ အကောင်အထည်ဖော်တဲ့နည်းလမ်းတွေကို မြင်ရင်းဖြစ်လာပါလိမ့်မယ်။
![DOM tree representation](../../../../translated_images/my/dom-tree.7daf0e763cbbba92.png)
![DOM tree representation](../../../../translated_images/my/dom-tree.7daf0e763cbbba92.webp)
> DOM နဲ့ HTML markup ကို ကိုယ်စားပြုထားတဲ့ပုံ။ [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) မှ
@ -531,7 +531,7 @@ Dragging system သည် CSS property key နှစ်ခုကို manipulat
- **Cross-device support**: Desktop နှင့် mobile တွင်အလုပ်လုပ်သည်
- **Performance conscious**: Memory leak မရှိဘဲ calculation များကိုထပ်မလုပ်ပါ
![finished terrarium](../../../../translated_images/my/terrarium-final.0920f16e87c13a84.png)
![finished terrarium](../../../../translated_images/my/terrarium-final.0920f16e87c13a84.webp)
---

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
အနည်းငယ်သော drag and drop code-meditation ဖြစ်ပါတယ်။ HTML, JS နှင့် CSS အနည်းငယ်ကို အသုံးပြုပြီး web interface တစ်ခုကို တည်ဆောက်၊ အလှဆင်ပြီး အပြန်အလှန်လုပ်ဆောင်မှုများ ထည့်သွင်းနိုင်ပါတယ်။
![my terrarium](../../../../translated_images/my/screenshot_gray.0c796099a1f9f25e.png)
![my terrarium](../../../../translated_images/my/screenshot_gray.0c796099a1f9f25e.webp)
## အကျေးဇူးတင်စကား

@ -26,7 +26,7 @@ journey
Polish experience: 5: Student
```
![Browser sketchnote](../../../../translated_images/my/browser.60317c9be8b7f84a.jpg)
![Browser sketchnote](../../../../translated_images/my/browser.60317c9be8b7f84a.webp)
> Sketchnote by [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## မိမိကိုယ်ကိုစမ်းမေးမေးခွန်း
@ -79,7 +79,7 @@ Web browser ဆိုတာက အလွန်တိုးတက်တဲ့ doc
**သမိုင်းအနည်းငယ်**: ပထမဆုံး browser ကို 'WorldWideWeb' လို့ခေါ်ပြီး Sir Timothy Berners-Lee က 1990 ခုနှစ်မှာ ဖန်တီးခဲ့ပါတယ်။
![early browsers](../../../../translated_images/my/earlybrowsers.d984b711cdf3a42d.jpg)
![early browsers](../../../../translated_images/my/earlybrowsers.d984b711cdf3a42d.webp)
> Some early browsers, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Web Content ကို Browser တွေ ဘယ်လိုလုပ်ဆောင်သလဲ
@ -198,7 +198,7 @@ quadrantChart
Extension installation လုပ်ဆောင်မှုကို နားလည်ခြင်းက သင့် extension ကို install လုပ်တဲ့ user တွေရဲ့ အတွေ့အကြုံကို ခန့်မှန်းနိုင်စေပါတယ်။ Installation လုပ်ဆောင်မှုက ခေတ်မီ browser တွေမှာ interface design အနည်းငယ်ကွဲပြားမှုနဲ့ standardized ဖြစ်ပါတယ်။
![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/my/install-on-edge.d68781acaf0b3d3d.png)
![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/my/install-on-edge.d68781acaf0b3d3d.webp)
> **အရေးကြီး**: Developer mode ကို toggle လုပ်ပြီး သင့်ကိုယ်တိုင်ဖန်တီးတဲ့ extensions တွေကို စမ်းသပ်တဲ့အခါ၊ အခြား store တွေက extensions တွေကို ခွင့်ပြုပါ။
@ -313,10 +313,10 @@ User interface components တွေကို ဖန်တီးပါမယ်
### Extension Views Overview
**Setup View** - First-time user configuration:
![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/my/1.b6da8c1394b07491.png)
![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/my/1.b6da8c1394b07491.webp)
**Results View** - Carbon footprint data display:
![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/my/2.1dae52ff08042246.png)
![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/my/2.1dae52ff08042246.webp)
### Configuration Form ကို ဖန်တီးခြင်း

@ -268,7 +268,7 @@ stateDiagram-v2
ClearStorage --> FirstTime: Back to setup
```
![Local storage pane](../../../../translated_images/my/localstorage.472f8147b6a3f8d1.png)
![Local storage pane](../../../../translated_images/my/localstorage.472f8147b6a3f8d1.webp)
> ⚠️ **Security Consideration**: Production application တွေမှာ LocalStorage မှာ API key တွေကိုသိမ်းဆည်းထားခြင်းက security risk ဖြစ်ပါတယ်။ JavaScript က data ကို access လုပ်နိုင်တဲ့အတွက်ပါ။ သင်ယူရေးအတွက်တော့ ဒီနည်းလမ်းကအဆင်ပြေပါတယ်၊ ဒါပေမယ့် အစစ်အမှန် application တွေမှာ sensitive credentials တွေကို secure server-side storage မှာသိမ်းဆည်းသင့်ပါတယ်။

@ -126,7 +126,7 @@ Edge မှာ Developer Tools ကိုဖွင့်ဖို့၊ အပေ
စမ်းကြည့်ရအောင်။ Website တစ်ခုကိုဖွင့်ပါ (Microsoft.com ကောင်းပါတယ်) 'Record' button ကိုနှိပ်ပါ။ အခုတော့ page ကို refresh လုပ်ပြီး profiler က ဖြစ်ပျက်နေတဲ့အရာတွေကို capture လုပ်တာကိုကြည့်ပါ။ Recording ကိုရပ်လိုက်တဲ့အခါ browser က site ကို 'scripts', 'renders', 'paints' လုပ်ပုံကို အကြမ်းဖျင်းဖော်ပြထားတဲ့ breakdown ကိုတွေ့ပါလိမ့်မယ်။ Rocket launch အတွင်း mission control က system တစ်ခုချင်းစီကို monitor လုပ်ပုံလိုမျိုးပါပဲ - ဘာတွေဖြစ်နေတယ်၊ ဘယ်အချိန်မှာဖြစ်တယ်ဆိုတာ real-time data ရပါတယ်။
![Edge profiler](../../../../translated_images/my/profiler.5a4a62479c5df01c.png)
![Edge profiler](../../../../translated_images/my/profiler.5a4a62479c5df01c.webp)
✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) မှာပိုမိုနက်နက်ရှိုင်းရှိုင်းလေ့လာနိုင်ပါတယ်
@ -136,11 +136,11 @@ Profile timeline ရဲ့ element တွေကို select လုပ်ပြ
Profile timeline ရဲ့ အပိုင်းတစ်ခုကို select လုပ်ပြီး summary pane မှာ page performance ရဲ့ snapshot ကိုကြည့်ပါ:
![Edge profiler snapshot](../../../../translated_images/my/snapshot.97750180ebcad737.png)
![Edge profiler snapshot](../../../../translated_images/my/snapshot.97750180ebcad737.webp)
Event Log pane မှာ event တစ်ခုခု 15 ms ထက်ပိုကြာနေမလားဆိုတာစစ်ပါ:
![Edge event log](../../../../translated_images/my/log.804026979f3707e0.png)
![Edge event log](../../../../translated_images/my/log.804026979f3707e0.webp)
✅ Profiler ကိုနားလည်ပါ! ဒီ site ရဲ့ developer tools ကိုဖွင့်ပြီး bottleneck တွေရှိမရှိကြည့်ပါ။ ဘာ asset က slowest-loading ဖြစ်နေလဲ? Fastest-loading asset ကဘာလဲ?

@ -23,7 +23,7 @@ CO_OP_TRANSLATOR_METADATA:
### အားကျမှုများ
![အစိမ်းရောင် ဘရောက်ဇာ အက်စတင်ရှင်း](../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.png)
![အစိမ်းရောင် ဘရောက်ဇာ အက်စတင်ရှင်း](../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.webp)
## အားကျမှုများ

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrow ရဲ့ C02 Signal API ကို အသုံးပြုပြီး လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို စောင့်ကြည့်နိုင်ရန် browser extension တစ်ခု တည်ဆောက်ပါ။ ဒါက region ရဲ့ လျှပ်စစ်ဓာတ်အားအသုံးပြုမှု အလေးအနက်ကို သတိပေးချက်အဖြစ် browser ထဲမှာ ရှိနေစေမှာဖြစ်ပါတယ်။ ဒီ extension ကို အခါအားလျော်စွာ အသုံးပြုခြင်းက သင့်ရဲ့ လုပ်ဆောင်မှုများအပေါ် အချက်အလက်အခြေခံပြီး ဆုံးဖြတ်ချက်များ ချမှတ်နိုင်ရန် အထောက်အကူဖြစ်စေပါမယ်။
![extension screenshot](../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.png)
![extension screenshot](../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.webp)
## စတင်အသုံးပြုခြင်း
@ -31,7 +31,7 @@ npm run build
Edge browser မှာ install လုပ်ရန်အတွက် browser ရဲ့ အပေါ်ဘက်ညာထောင့်မှာရှိတဲ့ 'three dot' menu ကို အသုံးပြုပြီး Extensions panel ကို ရှာပါ။ 'Load Unpacked' ကို ရွေးချယ်ပြီး extension အသစ်တစ်ခုကို load လုပ်ပါ။ prompt မှာ 'dist' folder ကို ဖွင့်ပြီး extension ကို load လုပ်ပါ။ အသုံးပြုရန်အတွက် CO2 Signal ရဲ့ API key ([ဒီမှာ email ဖြင့် ရယူပါ](https://www.co2signal.com/) - ဒီ page မှာ သင့် email ကို box ထဲမှာ ထည့်ပါ) နှင့် [Electricity Map](https://www.electricitymap.org/map) ရဲ့ [region code](http://api.electricitymap.org/v3/zones) ကို ထည့်ရန် လိုအပ်ပါမယ်။ ဥပမာအားဖြင့် Boston မှာ 'US-NEISO' ကို အသုံးပြုပါတယ်။
![installing](../../../../translated_images/my/install-on-edge.78634f02842c4828.png)
![installing](../../../../translated_images/my/install-on-edge.78634f02842c4828.webp)
API key နှင့် region code ကို extension interface ထဲမှာ input လုပ်ပြီးနောက် browser extension bar ရဲ့ အရောင် dot က region ရဲ့ လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို ပြသပြီး သင့်အတွက် လျှပ်စစ်ဓာတ်အားများအသုံးပြုရမည့် လုပ်ဆောင်မှုများအပေါ် pointer တစ်ခု ပေးပါမယ်။ ဒီ 'dot' system ရဲ့ concept ကို [Energy Lollipop extension](https://energylollipop.com/) မှ California emissions အတွက် ရရှိခဲ့ပါတယ်။

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrow ၏ C02 Signal API ကို အသုံးပြု၍ လျှပ်စစ်စွမ်းအင်သုံးစွဲမှုကို ချက်ချင်းစောင့်ကြည့်နိုင်ရန် သင့်ဘရောက်ဇာတွင် သတိပေးချက်တစ်ခုရရှိစေရန် ဘရောက်ဇာအတွက် Extension တစ်ခု ဖန်တီးပါ။ ဒီအထူး Extension ကို အသုံးပြုခြင်းဖြင့် သင့်ဒေသရှိ လျှပ်စစ်စွမ်းအင်သုံးစွဲမှုအခြေအနေအပေါ် မူတည်ပြီး သင့်လုပ်ဆောင်မှုများအတွက် ပိုမိုသင့်တော်သော ဆုံးဖြတ်ချက်များ ချမှတ်နိုင်စေပါမည်။
![Extension Screenshot](../../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.png)
![Extension Screenshot](../../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.webp)
## စတင်ရန်
@ -31,7 +31,7 @@ npm run build
Edge တွင် ထည့်သွင်းရန်အတွက် ဘရောက်ဇာ၏ အပေါ်ယံညာဘက်ရှိ 'သုံးချက်' မီနူးကို အသုံးပြု၍ Extensions ပန်းနယ်ကို ရှာပါ။ အဲဒီနေရာမှ 'Unpacked Extension ကို Load လုပ်ရန်' ကို ရွေးချယ်ပြီး Extension အသစ်တစ်ခုကို ထည့်သွင်းပါ။ Prompt တွင် 'dist' ဖိုလ်ဒါကို ဖွင့်ပြီး Extension ကို Load လုပ်ပါ။ အသုံးပြုရန်အတွက် CO2 Signal API အတွက် API Key တစ်ခုလိုအပ်ပါမည် ([ဒီမှာ အီးမေးလ်ဖြင့် ရယူပါ](https://www.co2signal.com/) - ဒီစာမျက်နှာရှိ အကွက်ထဲတွင် သင့်အီးမေးလ်ကို ထည့်သွင်းပါ) နှင့် [Electricity Map](https://www.electricitymap.org/map) တွင် သင့်ဒေသအတွက် [Zone Code](http://api.electricitymap.org/v3/zones) ကို ရယူပါ။ (ဥပမာ - Boston အတွက် 'US-NEISO' ကို အသုံးပြုပါ။)
![Installation](../../../../../translated_images/my/install-on-edge.78634f02842c4828.png)
![Installation](../../../../../translated_images/my/install-on-edge.78634f02842c4828.webp)
API Key နှင့် ဒေသကုဒ်ကို Extension Interface ထဲတွင် ထည့်သွင်းပြီးပါက ဘရောက်ဇာ၏ Extension Bar တွင် ရောင်စုံအမှတ်တစ်ခုသည် သင့်ဒေသရှိ လျှပ်စစ်စွမ်းအင်သုံးစွဲမှုအခြေအနေကို ပြသရန် ပြောင်းလဲသွားပါမည်။ ထို့အပြင် သင့်အတွက် သင့်တော်သော စွမ်းအင်သုံးစွဲမှုဆိုင်ရာ လုပ်ဆောင်မှုများကို အကြံပြုနိုင်မည်ဖြစ်သည်။ ဒီ 'အမှတ်' စနစ်၏ အကြံကို [Energy Lollipop Extension](https://energylollipop.com/) မှ ကယ်လီဖိုးနီးယားရှိ အထူးထုတ်လွှင့်မှုများအတွက် ရယူထားပါသည်။

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
မီးစက်သုံးစွဲမှုကို ထိန်းချုပ်ရန် tmrow ရဲ့ C02 Signal API ကို အသုံးပြုပြီး၊ သင့်ဘရောက်ဇာမှာ သင့်ဒေသရဲ့ မီးစက်သုံးစွဲမှုအခြေအနေကို သတိပေးနိုင်တဲ့ ဘရောက်ဇာအက်စ်တင်ရှင်းတစ်ခုကို တည်ဆောက်ခြင်း။ ဒီအက်စ်တင်ရှင်းကို သုံးခြင်းက သင့်လုပ်ဆောင်မှုတွေကို ဒီအချက်အလက်အပေါ်အခြေခံပြီး ဆုံးဖြတ်နိုင်ဖို့ အထောက်အကူပြုပါလိမ့်မယ်။
![အက်စ်တင်ရှင်း စကရင်ရှော့ ](../../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.png)
![အက်စ်တင်ရှင်း စကရင်ရှော့ ](../../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.webp)
## စတင်ခြင်း
@ -31,7 +31,7 @@ npm run build
Edge မှာ ထည့်သွင်းဖို့အတွက်၊ ဘရောက်ဇာရဲ့ အပေါ်ယာဘက်ထောင့်မှာရှိတဲ့ 'သုံးချက်' မီနူးကို အသုံးပြုပြီး အက်စ်တင်ရှင်း panel ကို ရှာပါ။ အဲဒီနေရာက 'Load Unpacked' ကို ရွေးပြီး အသစ်ထည့်သွင်းပါ။ Prompt မှာ 'dist' ဖိုလ်ဒါကို ဖွင့်ပြီး အက်စ်တင်ရှင်းကို ထည့်သွင်းပါ။ အသုံးပြုဖို့အတွက် သင့်မှာ CO2 Signal ရဲ့ API ([ဒီမှာ အီးမေးလ်နဲ့ ရယူပါ](https://www.co2snal.com/)) API key တစ်ခုလိုအပ်ပါမယ်။ [သင့်ဒေသရဲ့ code](http://api.electricitymap.org/v3/zones) ကို [Electricity Map](https://www.electricitymap.org/map) မှာ ရှာပါ (ဥပမာ၊ Boston မှာဆိုရင် 'US-NEISO' ကို အသုံးပြုပါတယ်)။
![ထည့်သွင်းခြင်း](../../../../../translated_images/my/install-on-edge.78634f02842c4828.png)
![ထည့်သွင်းခြင်း](../../../../../translated_images/my/install-on-edge.78634f02842c4828.webp)
API key နဲ့ ဒေသ code ကို အက်စ်တင်ရှင်း interface မှာ ထည့်သွင်းပြီးသွားရင်၊ ဘရောက်ဇာအက်စ်တင်ရှင်း bar မှာရှိတဲ့ အရောင်ပွင့်လုံးက သင့်ဒေသရဲ့ မီးစက်သုံးစွဲမှုအခြေအနေကို ပြသဖို့ ပြောင်းလဲသင့်ပြီး၊ မီးစက်သုံးစွဲမှုများတဲ့ လုပ်ဆောင်မှုတွေကို သင့်အတွက် သင့်တော်မယ်ဆိုတာကို သတိပေးပါလိမ့်မယ်။ ဒီ 'dot' စနစ်ရဲ့ အကြောင်းအရင်းကို ကယ်လီဖိုးနီးယားရဲ့ ထုတ်လွှတ်မှုအတွက် [Energy Lollipop Extension](https://energylollipop.com/) မှာ အကြံဉာဏ်ရခဲ့တာပါ။

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrow ရဲ့ Signal CO2 API ကို အသုံးပြုပြီး လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို စောင့်ကြည့်ကာ သင့်ရဲ့ ဘရောက်ဇာတွင် တိုက်ရိုက် သတိပေးချက်ရနိုင်ရန် ဘရောက်ဇာအတွက် extension တစ်ခု ဖန်တီးပါမည်။ ဒီ extension ကို အသုံးပြုခြင်းအားဖြင့် သင့်ရဲ့ လုပ်ဆောင်မှုများကို အချက်အလက်များအပေါ် အခြေခံပြီး အကဲဖြတ်နိုင်ပါမည်။
![extension screenshot](../../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.png)
![extension screenshot](../../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.webp)
## စတင်ရန်
@ -31,7 +31,7 @@ npm run build
Edge တွင် install လုပ်ရန်အတွက် ဘရောက်ဇာ၏ အပေါ်ယံညာဘက်ရှိ "သုံးချက်" menu ကို အသုံးပြု၍ Extensions panel ကို ရှာပါ။ Developer Mode ကို (ဘရောက်ဇာ၏ ဘေးဘက်အောက်ခြေတွင်) ဖွင့်ထားရန် လိုအပ်ပါသည်။ "Load unpacked" ကို ရွေးချယ်ပြီး extension အသစ်တစ်ခုကို load လုပ်ပါ။ Prompt တွင် "dist" ဖိုလ်ဒါကို ဖွင့်ပြီး extension ကို load လုပ်ပါမည်။ အသုံးပြုရန် CO2 Signal API အတွက် API key တစ်ခုလိုအပ်ပါမည် ([ဒီမှာ e-mail ဖြင့် ရယူနိုင်ပါသည်](https://www.co2signal.com/) - ဒီစာမျက်နှာတွင် သင့် e-mail ကို box ထဲတွင် ထည့်ပါ) နှင့် [electricity map](https://www.electricitymap.org/map) တွင် သင့်ဒေသနှင့် ကိုက်ညီသော [region code](http://api.electricitymap.org/v3/zones) (ဥပမာ Boston တွင် "US-NEISO")။
![installation](../../../../../translated_images/my/install-on-edge.78634f02842c4828.png)
![installation](../../../../../translated_images/my/install-on-edge.78634f02842c4828.webp)
API key နှင့် region ကို extension interface တွင် ထည့်ပြီးနောက် ဘရောက်ဇာ၏ extension bar တွင်ရှိသော အရောင်အမှတ်အသားသည် ဒေသ၏ လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို ပြသရန် ပြောင်းလဲသင့်ပါမည်။ ထို့အပြင် အမြင့်မားသော စွမ်းအင်အသုံးပြုမှု လုပ်ဆောင်မှုများကို မည်သို့လုပ်ဆောင်ရမည်ကို အညွှန်းပေးပါမည်။ ဒီ "အမှတ်" စနစ်၏ အခြေခံแนวคิดကို [Energy Lollipop extension](https://energylollipop.com/) မှ California emissions အတွက် ပံ့ပိုးပေးထားပါသည်။

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrow ရဲ့ C02 Signal API ကို အသုံးပြုပြီး သင့်ဒေသရဲ့ လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို ဘရောက်ဇာပေါ်မှာ သတိပေးချက်အဖြစ် ပြသနိုင်ရန် အက်စ်တင်ရှင်းတစ်ခုကို တည်ဆောက်ပါ။ ဒီအက်စ်တင်ရှင်းကို အလွတ်သုံးနိုင်ပြီး ဒီအချက်အလက်အပေါ် အခြေခံပြီး သင့်လုပ်ဆောင်မှုများကို ဆုံးဖြတ်နိုင်ပါသည်။
![extension screenshot](../../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.png)
![extension screenshot](../../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.webp)
## စတင်ရန်
@ -31,7 +31,7 @@ npm run build
Edge မှာ ထည့်သွင်းဖို့အတွက် ဘရောက်ဇာရဲ့ အပေါ်ဘက်ညာဖက်မှာရှိတဲ့ "၃ ခုတိုင်" menu ကို နှိပ်ပြီး "Extensions" panel ကို ရှာပါ။ အဲဒီနေရာက "Load Unpacked" ကို ရွေးပြီး အက်စ်တင်ရှင်းအသစ်ကို load လုပ်ပါ။ prompt မှာ "dist" ဖိုလ်ဒါကို ဖွင့်ပါ။ အက်စ်တင်ရှင်းကို load လုပ်ပြီးပါပြီ။ အသုံးပြုဖို့ CO2 Signal API ရဲ့ API key ([ဒီမှာ email နဲ့ ရယူပါ](https://www.co2signal.com/) - ဒီစာမျက်နှာမှာ email ကို box ထဲထည့်ပါ) နဲ့ [Electricity Map](https://www.electricitymap.org/map) ရဲ့ သင့်ဒေသအတွက် [code](http://api.electricitymap.org/v3/zones) လိုအပ်ပါတယ် (ဥပမာ - Boston မှာ 'US-NEISO' ကို အသုံးပြုပါတယ်)။
![installing](../../../../../translated_images/my/install-on-edge.78634f02842c4828.png)
![installing](../../../../../translated_images/my/install-on-edge.78634f02842c4828.webp)
API key နဲ့ ဒေသ code ကို အက်စ်တင်ရှင်း interface မှာ ထည့်သွင်းပြီးရင် ဘရောက်ဇာရဲ့ extension bar မှာ ပြသတဲ့ အရောင်အမှတ်လေးက သင့်ဒေသရဲ့ လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို အခြေခံပြီး သင့်လုပ်ဆောင်မှုအတွက် သင့်တော်တဲ့ အချက်အလက်ကို ပြသပေးပါမယ်။ ဒီ "dot" system ရဲ့ အကြံဉာဏ်ကို ကယ်လီဖိုးနီးယားပြည်နယ်ရဲ့ [Energy Lollipop extension](https://energylollipop.com/) ကပေးခဲ့တာဖြစ်ပါတယ်။

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
CO2 Signal API ကို အသုံးပြု၍ လျှပ်စစ်ဓာတ်အား အသုံးပြုမှုကို စစ်ဆေးပြီး၊ သင့်ဒေသ၏ လျှပ်စစ်ဓာတ်အား အသုံးပြုမှု အခြေအနေကို သတိပေးချက်အဖြစ် သင့် browser မှာ ရရှိနိုင်အောင် browser extension တစ်ခုကို တည်ဆောက်ပါ။ ဒီ extension ကို အသုံးပြုခြင်းက သင့်လုပ်ဆောင်မှုများကို ဒီအချက်အလက်အပေါ် အခြေခံပြီး စဉ်းစားနိုင်ရန် အထောက်အကူဖြစ်စေပါမည်။
![browser extension screenshot](../../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.png)
![browser extension screenshot](../../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.webp)
## စတင်ရန်
@ -31,7 +31,7 @@ npm run build
Edge မှာ install လုပ်ရန်အတွက် browser ရဲ့ ညာဘက်အပေါ်ထောင့်မှာရှိတဲ့ 'သုံးခုတိုင်' menu ကို အသုံးပြု၍ Extensions panel ကို ရှာပါ။ 'Load Unpacked' ကို ရွေးပြီး extension အသစ်ကို load လုပ်ပါ။ 'dist' folder ကို ဖွင့်ပြီး extension ကို load လုပ်ပါ။ အသုံးပြုရန်အတွက် CO2 Signal API အတွက် API key ([ဒီမှာ email ဖြင့် ရယူပါ](https://www.co2signal.com/) - ဒီ page ရဲ့ box ထဲမှာ သင့် email ကို ထည့်ပါ) နှင့် [သင့်ဒေသအတွက် code](http://api.electricitymap.org/v3/zones) ကို [Electricity Map](https://www.electricitymap.org/map) မှာ ရှာပါ။ (ဥပမာ Boston မှာ 'US-NEISO' ကို အသုံးပြုပါ။)
![installing](../../../../../translated_images/my/install-on-edge.78634f02842c4828.png)
![installing](../../../../../translated_images/my/install-on-edge.78634f02842c4828.webp)
API key နှင့် region code ကို extension interface မှာ ထည့်ပြီးနောက် browser extension bar ရဲ့ အရောင် dot က သင့်ဒေသရဲ့ လျှပ်စစ်ဓာတ်အား အသုံးပြုမှုကို ပြသပြီး သင့်လုပ်ဆောင်မှုများအတွက် အကြံပေးချက်များကို ပေးပါမည်။ ဒီ 'dot' စနစ်ရဲ့ အကြောင်းအရင်းကို [Energy Lollipop browser extension](https://energylollipop.com/) မှ California အတွက် concept အဖြစ် ရရှိခဲ့ပါသည်။

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrow ရဲ့ C02 Signal API ကို အသုံးပြုပြီး လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို စောင့်ကြည့်နိုင်ရန် browser extension တစ်ခု တည်ဆောက်ပါ။ ဒါကို သင့် browser မှာ တိုက်ရိုက် သတိပေးအဖြစ် အသုံးပြုနိုင်ပါတယ်။ ဒီ extension ကို အခါအားလျော်စွာ အသုံးပြုခြင်းက သင့်ရဲ့ လုပ်ဆောင်မှုတွေကို ဒီအချက်အလက်အပေါ် အခြေခံပြီး ဆုံးဖြတ်နိုင်ဖို့ အထောက်အကူဖြစ်စေပါလိမ့်မယ်။
![extension screenshot](../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.png)
![extension screenshot](../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.webp)
## စတင်အသုံးပြုခြင်း
@ -31,7 +31,7 @@ npm run build
Edge browser မှာ install လုပ်ဖို့အတွက် browser ရဲ့ အပေါ်ဘက်ညာထောင့်မှာရှိတဲ့ 'three dot' menu ကို အသုံးပြုပြီး Extensions panel ကို ရှာပါ။ 'Load Unpacked' ကို ရွေးချယ်ပြီး extension အသစ်တစ်ခုကို load လုပ်ပါ။ prompt မှာ 'dist' folder ကို ဖွင့်ပြီး extension ကို load လုပ်ပါ။ အသုံးပြုဖို့အတွက် CO2 Signal ရဲ့ API key ([ဒီမှာ email ဖြင့် ရယူပါ](https://www.co2signal.com/) - ဒီစာမျက်နှာမှာ သင့် email ကို box ထဲမှာ ထည့်ပါ) နဲ့ [Electricity Map](https://www.electricitymap.org/map) ရဲ့ သင့်ဒေသကို ကိုယ်စားပြုတဲ့ [region code](http://api.electricitymap.org/v3/zones) ကို ထည့်သွင်းဖို့ လိုအပ်ပါမယ်။ ဥပမာအားဖြင့် Boston မှာ 'US-NEISO' ကို အသုံးပြုပါတယ်။
![installing](../../../../translated_images/my/install-on-edge.78634f02842c4828.png)
![installing](../../../../translated_images/my/install-on-edge.78634f02842c4828.webp)
API key နဲ့ region ကို extension interface မှာ input လုပ်ပြီးရင် browser extension bar ရဲ့ အရောင် dot က သင့်ဒေသရဲ့ လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို ပြောင်းလဲပြသပေးပါလိမ့်မယ်။ ဒါက သင့်အတွက် လျှပ်စစ်ဓာတ်အားများစွာ အသုံးပြုရမယ့် လုပ်ဆောင်မှုတွေကို ဘယ်လိုလုပ်ဆောင်ရမလဲဆိုတာ အညွှန်းပေးပါလိမ့်မယ်။ ဒီ 'dot' စနစ်ရဲ့ အကြံဉာဏ်ကို [Energy Lollipop extension](https://energylollipop.com/) က California emissions အတွက် ပေးခဲ့တာဖြစ်ပါတယ်။

@ -97,7 +97,7 @@ mindmap
ပြီးစီးသော ရလဒ်သည် အောက်ပါအတိုင်း ဖြစ်သင့်သည်-
![အနက်ရောင်မျက်နှာပြင်တွင် သူရဲကောင်းနှင့် 5*5 အမှုးများ](../../../../translated_images/my/partI-solution.36c53b48c9ffae2a.png)
![အနက်ရောင်မျက်နှာပြင်တွင် သူရဲကောင်းနှင့် 5*5 အမှုးများ](../../../../translated_images/my/partI-solution.36c53b48c9ffae2a.webp)
## ဖြေရှင်းချက်

@ -160,7 +160,7 @@ sequenceDiagram
```
- **အမှတ်ပေးစနစ်**: ရန်သူသင်္ဘောတစ်စင်းကို ဖျက်ဆီးတိုင်း ၁၀၀ အမှတ်ရရှိမယ် (အလွယ်တကူ စိတ်ထဲမှာတွက်နိုင်ဖို့အတွက် round number တွေက ပိုမိုလွယ်ကူပါတယ်။) အမှတ်ကို ဘေးဘက်အောက်ထောင့်မှာ ပြသပါမယ်။
- **အသက်ရေတွက်စနစ်**: သင့် hero က အသက်သုံးခုနဲ့ စတင်ပါမယ် - စိန်ခေါ်မှုနဲ့ ကစားနိုင်စွမ်းကို ချိန်ညှိဖို့ arcade ဂိမ်းအစောပိုင်းတွေက သတ်မှတ်ထားတဲ့ standard တစ်ခုပါ။ ရန်သူနဲ့ တိုက်မိတိုင်း အသက်တစ်ခုဆုံးရှုံးရပါမယ်။ ကျန်ရှိတဲ့ အသက်တွေကို သင်္ဘော icon တွေကို အသုံးပြုပြီး ဘေးဘက်အောက်ထောင့်မှာ ပြသပါမယ် ![life image](../../../../translated_images/my/life.6fb9f50d53ee0413.png)။
- **အသက်ရေတွက်စနစ်**: သင့် hero က အသက်သုံးခုနဲ့ စတင်ပါမယ် - စိန်ခေါ်မှုနဲ့ ကစားနိုင်စွမ်းကို ချိန်ညှိဖို့ arcade ဂိမ်းအစောပိုင်းတွေက သတ်မှတ်ထားတဲ့ standard တစ်ခုပါ။ ရန်သူနဲ့ တိုက်မိတိုင်း အသက်တစ်ခုဆုံးရှုံးရပါမယ်။ ကျန်ရှိတဲ့ အသက်တွေကို သင်္ဘော icon တွေကို အသုံးပြုပြီး ဘေးဘက်အောက်ထောင့်မှာ ပြသပါမယ် ![life image](../../../../translated_images/my/life.6fb9f50d53ee0413.webp)။
## တည်ဆောက်ဖို့ အဆင်သင့်ဖြစ်ပါပြီ!

@ -541,7 +541,7 @@ sequenceDiagram
`history.pushState` ကို အသုံးပြုကာ browser ရဲ့ navigation history မှာ entry အသစ်တွေကို ဖန်တီးနိုင်ပါတယ်။ Browser ရဲ့ *back button* ကို နှိပ်ထားပြီး စစ်ဆေးကြည့်ပါ၊ navigation history က ဒီလိုပုံစံတစ်ခုကို ပြသသင့်ပါတယ်:
![Navigation history ရဲ့ screenshot](../../../../translated_images/my/history.7fdabbafa521e064.png)
![Navigation history ရဲ့ screenshot](../../../../translated_images/my/history.7fdabbafa521e064.webp)
Back button ကို အကြိမ်အများကြိမ် click လုပ်ကြည့်ပါ၊ လက်ရှိ URL က ပြောင်းလဲပြီး history က update လုပ်သွားမယ်၊ ဒါပေမယ့် အတူတူ template ကိုပဲ ပြသနေပါမယ်။

@ -295,7 +295,7 @@ Submit button ကိုနှိပ်တဲ့အခါမှာ ဘာတွ
2. Browser ရဲ့ address bar မှာ ပြောင်းလဲမှုတွေကို သတိထားပါ
3. Page reload ဖြစ်ပြီး data တွေ URL မှာ ပေါ်လာတာကို သတိထားပါ
![Register button ကိုနှိပ်ပြီး browser URL ပြောင်းလဲမှု screenshot](../../../../translated_images/my/click-register.e89a30bf0d4bc9ca.png)
![Register button ကိုနှိပ်ပြီး browser URL ပြောင်းလဲမှု screenshot](../../../../translated_images/my/click-register.e89a30bf0d4bc9ca.webp)
### HTTP Method တွေကို နှိုင်းယှဉ်ခြင်း
@ -502,7 +502,7 @@ async function register() {
3. **"Create Account" ကို နှိပ်ပါ**
4. **Console messages နှင့် user feedback ကို ကြည့်ရှုပါ**
![Browser console တွင် log message ကို ပြသထားသော screenshot](../../../../translated_images/my/browser-console.efaf0b51aaaf6778.png)
![Browser console တွင် log message ကို ပြသထားသော screenshot](../../../../translated_images/my/browser-console.efaf0b51aaaf6778.webp)
**သင်မြင်ရမည့်အရာများ:**
- **Loading state** submit button တွင် ပေါ်လာသည်
@ -677,7 +677,7 @@ Registration form ကို robust validation ဖြင့် user experience
3. **Special character များကို** username field တွင် စမ်းသပ်ပါ
4. **Negative balance amount ကို** input လုပ်ပါ
![Validation error ကို ပြသထားသော screenshot](../../../../translated_images/my/validation-error.8bd23e98d416c22f.png)
![Validation error ကို ပြသထားသော screenshot](../../../../translated_images/my/validation-error.8bd23e98d416c22f.webp)
**သင်မြင်ရမည့်အရာများ:**
- **Browser သည်** native validation message များကို ပြသသည်
@ -825,7 +825,7 @@ timeline
CSS အလှဆင်မှုများထည့်ပြီးနောက် login စာမျက်နှာ၏ နောက်ဆုံးပုံစံကို အောက်ပါပုံကဲ့သို့ ရနိုင်ပါသည် -
![CSS အလှဆင်မှုများထည့်ပြီးနောက် login စာမျက်နှာ၏ screenshot](../../../../translated_images/my/result.96ef01f607bf856a.png)
![CSS အလှဆင်မှုများထည့်ပြီးနောက် login စာမျက်နှာ၏ screenshot](../../../../translated_images/my/result.96ef01f607bf856a.webp)
## Post-Lecture Quiz

@ -160,7 +160,7 @@ sequenceDiagram
Browser->>User: Displays new page (flash/reload)
```
![Update workflow in a multi-page application](../../../../translated_images/my/mpa.7f7375a1a2d4aa77.png)
![Update workflow in a multi-page application](../../../../translated_images/my/mpa.7f7375a1a2d4aa77.webp)
**ဒီနည်းလမ်းက ဘာလို့ clunky ဖြစ်ခဲ့သလဲ:**
- Click တစ်ချက်တိုင်းက page တစ်ခုလုံးကို ပြန်တည်ဆောက်ရတာ
@ -187,7 +187,7 @@ sequenceDiagram
Browser->>User: Shows updated content (no reload)
```
![Update workflow in a single-page application](../../../../translated_images/my/spa.268ec73b41f992c2.png)
![Update workflow in a single-page application](../../../../translated_images/my/spa.268ec73b41f992c2.webp)
**SPA တွေက ဘာလို့ ပိုကောင်းသလဲ:**
- တကယ်ပြောင်းလဲလိုတဲ့ အပိုင်းတွေကိုသာ update လုပ်တာ (smart, right?)
@ -500,7 +500,7 @@ if (data.error) {
Invalid account ဖြင့်စမ်းသပ်ပါက၊ Error message ကို page ပေါ်မှာပေါ်လာတာကိုမြင်ရပါမည်!
![Login အတွင်း error message ပြသထားသော screenshot](../../../../translated_images/my/login-error.416fe019b36a6327.png)
![Login အတွင်း error message ပြသထားသော screenshot](../../../../translated_images/my/login-error.416fe019b36a6327.webp)
#### အဆင့် 4: Accessibility ဖြင့်ပါဝင်မှုရှိစေခြင်း
@ -815,7 +815,7 @@ Agent mode ကို အသုံးပြု၍ အောက်ပါ challenge
ဒီလို polished dashboard တစ်ခုကို ရနိုင်ပါမည်:
![Screenshot of an example result of the dashboard after styling](../../../../translated_images/my/screen2.123c82a831a1d14a.png)
![Screenshot of an example result of the dashboard after styling](../../../../translated_images/my/screen2.123c82a831a1d14a.webp)
ဒီအတိုင်းတိတိမလုပ်ရပါ - အကြံဉာဏ်အဖြစ် အသုံးပြုပြီး သင့်စိတ်ကြိုက် ပြောင်းလဲပါ!

@ -188,7 +188,7 @@ Titanic ၏ compartmentalized design ကဲ့သို့၊ ပြဿနာမ
ကျွန်ုပ်တို့သည် **centralized state management** system တစ်ခုကို ဖန်တီးမည်။ ၎င်းသည် အရေးကြီးသောအရာအားလုံးကို စီမံခန့်ခွဲသော တစ်ဦးတည်းသော လူတစ်ဦးကဲ့သို့ဖြစ်သည်:
![HTML, user actions နှင့် state အကြား data flows ကို ပြသသော schema](../../../../translated_images/my/data-flow.fa2354e0908fecc8.png)
![HTML, user actions နှင့် state အကြား data flows ကို ပြသသော schema](../../../../translated_images/my/data-flow.fa2354e0908fecc8.webp)
```mermaid
flowchart TD

@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA:
**မျှော်လင့်ရသော ရလဒ်:**
ဒီအလုပ်ကို ပြီးမြောက်ပြီးနောက် သင့်ဘဏ်အက်ပ်တွင် အလှဆင်ထားပြီး အကျိုးရှိသော "ငွေစာရင်း ထည့်သွင်းရန်" လုပ်ဆောင်ချက်တစ်ခု ပါဝင်မည်ဖြစ်ပြီး အောက်ပါပုံစံအတိုင်း လုပ်ဆောင်မှုနှင့် အပြင်အဆင်များကို ပေးစွမ်းနိုင်ရမည်-
![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/my/dialog.93bba104afeb79f1.png)
![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/my/dialog.93bba104afeb79f1.webp)
## သင့်အကောင်အထည်ဖော်မှုကို စမ်းသပ်ခြင်း

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
ဒီပရောဂျက်မှာ သင်ဟာ စိတ်ကူးယဉ်ဘဏ်တစ်ခုကို ဘယ်လိုတည်ဆောက်ရမယ်ဆိုတာကို သင်ယူနိုင်ပါမယ်။ ဒီသင်ခန်းစာတွေမှာ ဝက်ဘ်အက်ပ်ကို ဘယ်လိုပုံစံချပြီး လမ်းကြောင်းတွေထည့်ရမယ်၊ ဖောင်တွေတည်ဆောက်ရမယ်၊ state ကို စီမံခန့်ခွဲရမယ်၊ API ကနေ ဒေတာကို ရယူပြီး ဘဏ်ရဲ့ ဒေတာကို ဘယ်လိုရယူရမယ်ဆိုတာကို ရှင်းပြထားပါတယ်။
| ![Screen1](../../../translated_images/my/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/my/screen2.123c82a831a1d14a.png) |
| ![Screen1](../../../translated_images/my/screen1.baccbba0f1f93364.webp) | ![Screen2](../../../translated_images/my/screen2.123c82a831a1d14a.webp) |
|--------------------------------|--------------------------------|
## သင်ခန်းစာများ

@ -185,7 +185,7 @@ Alexander Graham Bell ရဲ့ Telephone က အကွာအဝေးကို
အရာအားလုံး Load လုပ်ပြီးနောက်မှာ သင့် Code ကို အာရုံစိုက်နိုင်အောင် Design လုပ်ထားတဲ့ ရိုးရှင်းပြီး လှပတဲ့ Workspace ကို တွေ့ပါမယ်။
![Default VSCode.dev interface](../../../../translated_images/my/default-vscode-dev.5d06881d65c1b323.png)
![Default VSCode.dev interface](../../../../translated_images/my/default-vscode-dev.5d06881d65c1b323.webp)
**Neighborhood Tour:**
- **Activity Bar** (ဘယ်ဘက် Strip): Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩, Settings ⚙️
@ -233,7 +233,7 @@ VSCode.dev မှာ Fresh Start လုပ်ပြီး Specific Repository
1. [vscode.dev](https://vscode.dev) ကို သွားပါ
2. Welcome Screen မှာ "Open Remote Repository" Button ကို ရှာပြီး Click လုပ်ပါ
![Open remote repository](../../../../translated_images/my/open-remote-repository.bd9c2598b8949e7f.png)
![Open remote repository](../../../../translated_images/my/open-remote-repository.bd9c2598b8949e7f.webp)
3. GitHub Repository URL ကို Paste လုပ်ပါ (ဒီ URL ကို စမ်းကြည့်ပါ: `https://github.com/microsoft/Web-Dev-For-Beginners`)
4. Enter ကို နှိပ်ပြီး Magic ဖြစ်တာကို ကြည့်ပါ!
@ -242,7 +242,7 @@ VSCode.dev မှာ Fresh Start လုပ်ပြီး Specific Repository
Coding Wizard လို ခံစားချင်ပါသလား? Ctrl+Shift+P (Mac မှာ Cmd+Shift+P) Shortcut ကို စမ်းကြည့်ပါ:
![Command Palette](../../../../translated_images/my/palette-menu.4946174e07f42622.png)
![Command Palette](../../../../translated_images/my/palette-menu.4946174e07f42622.webp)
**Command Palette က Coding အတွက် Search Engine လိုပါပဲ:**
- "open remote" လို့ ရိုက်လိုက်တာနဲ့ Repository Opener ကို ရှာပေးပါမယ်
@ -304,7 +304,7 @@ Architect ရဲ့ Office မှာ Blueprints တွေကို စီမံ
3. Appropriate Extension (`style.css`, `script.js`, `index.html`) ပါတဲ့ Filename ကို ရိုက်ပါ
4. Enter ကို နှိပ်ပြီး File ကို ဖန်တီးပါ
![Creating a new file](../../../../translated_images/my/create-new-file.2814e609c2af9aeb.png)
![Creating a new file](../../../../translated_images/my/create-new-file.2814e609c2af9aeb.webp)
**Naming Conventions:**
- File ရဲ့ ရည်ရွယ်ချက်ကို ဖော်ပြတဲ့ Descriptive
@ -374,7 +374,7 @@ Extension marketplace က အလွန်စီမံထားပြီး သ
2. Browse လုပ်ပါ သို့မဟုတ် အထူးတစ်ခုခုကို ရှာဖွေပါ
3. စိတ်ဝင်စားစရာကောင်းတဲ့ အရာကို နှိပ်ပြီး အသေးစိတ်ကို ကြည့်ပါ
![Extension marketplace interface](../../../../translated_images/my/extensions.eca0e0c7f59a10b5.png)
![Extension marketplace interface](../../../../translated_images/my/extensions.eca0e0c7f59a10b5.webp)
**အဲဒီမှာ တွေ့ရမှာ:**
@ -427,7 +427,7 @@ Extension အများစုမှာ သင့် workflow အလိုက
3. Dropdown မှ "Extension Settings" ကို ရွေးပါ
4. သင့် workflow အလိုက် အဆင်ပြေတဲ့အထိ ညှိပါ
![Customizing extension settings](../../../../translated_images/my/extension-settings.21c752ae4f4cdb78.png)
![Customizing extension settings](../../../../translated_images/my/extension-settings.21c752ae4f4cdb78.webp)
**သင့်အနေနဲ့ ညှိချင်နိုင်တဲ့ အရာများ:**
- Code formatting (tabs vs spaces, line length, စသည်တို့)

@ -78,7 +78,7 @@ VSCode.dev သည် Repository ကို ဖွင့်ရန် အနည်
4. Commit Message ရေးပါ: "Add initial HTML structure"
5. "Commit new file" ကို Click လုပ်ပြီး သင့်ပြောင်းလဲမှုများကို Save လုပ်ပါ
![Creating initial file on GitHub](../../../../translated_images/my/new-file-github.com.c886796d800e8056.png)
![Creating initial file on GitHub](../../../../translated_images/my/new-file-github.com.c886796d800e8056.webp)
**ဒီ Initial Setup က ဘာတွေကို အကောင်အထည်ဖော်ထားသလဲ:**
- HTML5 Document Structure ကို Semantic Elements ဖြင့် Properly Establish လုပ်ထားသည်
@ -104,7 +104,7 @@ VSCode.dev သည် Repository ကို ဖွင့်ရန် အနည်
**Success Indicator**: Explorer Sidebar တွင် သင့် Project Files တွေကို မြင်ရပြီး Main Editor Area တွင် `index.html` ကို Edit လုပ်နိုင်ပါမည်။
![Project loaded in VSCode.dev](../../../../translated_images/my/project-on-vscode.dev.e79815a9a95ee7fe.png)
![Project loaded in VSCode.dev](../../../../translated_images/my/project-on-vscode.dev.e79815a9a95ee7fe.webp)
**Interface တွင် မြင်ရမည့်အရာများ:**
- **Explorer Sidebar**: **သင့် Repository Files နှင့် Folder Structure ကို ပြသသည်**
@ -448,7 +448,7 @@ Extensions များသည် Development Experience ကို တိုး
**Installation ပြီးနောက် ရရှိသော ရလဒ်များ:**
CodeSwing Install ပြီးပါက သင့် Resume Website ၏ Live Preview ကို Editor တွင် မြင်ရပါမည်။ သင့် Site ရဲ့ အလှပဆုံးပုံစံကို Changes များလုပ်နေစဉ် မြင်နိုင်ပါသည်။
![CodeSwing extension showing live preview](../../../../translated_images/my/after-codeswing-extension-pb.0ebddddcf73b5509.png)
![CodeSwing extension showing live preview](../../../../translated_images/my/after-codeswing-extension-pb.0ebddddcf73b5509.webp)
**Enhanced Interface ကို နားလည်ခြင်း:**
- **Split View**: **Code ကို တစ်ဖက်၊ Live Preview ကို တစ်ဖက်တွင် ပြသသည်**

@ -61,7 +61,7 @@ print(response.choices[0].message.content)
သင့်ရဲ့ အပြီးသတ် project ဟာ ဒီလိုပုံစံရှိပါမယ်:
![Chat app interface showing conversation between user and AI assistant](../../../translated_images/my/screenshot.0a1ee0d123df681b.png)
![Chat app interface showing conversation between user and AI assistant](../../../translated_images/my/screenshot.0a1ee0d123df681b.webp)
## 🗺️ AI Application Development ရဲ့ သင့်ရဲ့ လေ့လာရေးခရီး
@ -194,7 +194,7 @@ mindmap
**Core Principle**: AI application development ဟာ traditional web development skills တွေကို AI service integration နဲ့ ပေါင်းစပ်ပြီး သုံးစွဲသူတွေကို သဘာဝနဲ့ တုံ့ပြန်မှုကောင်းတဲ့ intelligent applications တွေ ဖန်တီးပေးပါတယ်။
![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/my/playground.d2b927122224ff8f.png)
![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/my/playground.d2b927122224ff8f.webp)
**Playground ရဲ့ အသုံးဝင်မှု**:
- **စမ်းသပ်**: GPT-4o-mini, Claude နဲ့ အခြား AI models တွေကို စမ်းသပ်နိုင်တယ် (အခမဲ့!)
@ -204,7 +204,7 @@ mindmap
Playground ကို အနည်းငယ် စမ်းသပ်ပြီးရင် "Code" tab ကို နှိပ်ပြီး သင့် programming language ကို ရွေးပြီး implementation code ကို ရယူနိုင်ပါတယ်။
![Playground choice showing code generation options for different programming languages](../../../translated_images/my/playground-choice.1d23ba7d407f4758.png)
![Playground choice showing code generation options for different programming languages](../../../translated_images/my/playground-choice.1d23ba7d407f4758.webp)
## Python Backend Integration ကို Setup လုပ်ခြင်း
@ -2107,14 +2107,14 @@ mindmap
- [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) သို့ **သွားပါ**
- GitHub တွင် login လုပ်ထားသည်ကို သေချာစွာ **စစ်ဆေးပြီး** "Use this template" ကို အပေါ်ယံညာဘက်တွင် **နှိပ်ပါ**
![Create from template interface showing the green "Use this template" button](../../../translated_images/my/template.67ad477109d29a2b.png)
![Create from template interface showing the green "Use this template" button](../../../translated_images/my/template.67ad477109d29a2b.webp)
**အဆင့် ၂: Codespaces ကို စတင်ပါ**
- သင့် newly created repository ကို **ဖွင့်ပါ**
- အစိမ်းရောင် "Code" ခလုတ်ကို **နှိပ်ပြီး** "Codespaces" ကို **ရွေးပါ**
- "Create codespace on main" ကို **ရွေးပြီး** development environment ကို စတင်ပါ
![Create codespace interface with options for launching cloud development environment](../../../translated_images/my/codespace.bcecbdf5d2747d3d.png)
![Create codespace interface with options for launching cloud development environment](../../../translated_images/my/codespace.bcecbdf5d2747d3d.webp)
**အဆင့် ၃: Environment Configuration**
သင့် Codespace load ပြီးလျှင် သင်သည် အောက်ပါအရာများကို အသုံးပြုနိုင်ပါမည်-

@ -72,13 +72,13 @@ Azure AI Foundry Discord Community တွင် ပါဝင်ဆောင်
စတင်ရန် [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) သို့ သွားပါ!
![Background](../../translated_images/my/background.148a8d43afde5730.png)
![Background](../../translated_images/my/background.148a8d43afde5730.webp)
- အခြေခံမှ RAG အထိ အကြောင်းအရာ များကို ဖွင့်ပြသသည်။
- GenAI နှင့် ကျွန်ုပ်တို့ ရှေ့ဆောင် app ဖြင့် သမိုင်းပုဂ္ဂိုလ်များနှင့် ဝိုင်းယှဉ် ဆက်သွယ်နိုင်သည်။
- ပျော်ရွှင်မှုနှင့် စိတ်ဝင်စားဖွယ်ရာ အသံစဉ်၊ သင့်အနေဖြင့် အချိန်ခရီးသွားနေပါသည်။
![character](../../translated_images/my/character.5c0dd8e067ffd693.png)
![character](../../translated_images/my/character.5c0dd8e067ffd693.webp)
ချင်းချင်း သင်ခန်းစာတိုင်းတွင် လေ့ကျင့်ခန်းတစ်ခုကို ပြီးမြောက်စေရန်၊ နောက်တစ်ခုမှာ အသိပညာ စစ်ဆေးမှုတစ်ခုပြုလုပ်ရန်နှင့် မိမိဆိုင်ရာ သင်ယူမှုအကြောင်းအရာများ အတွက် စိန်ခေါ်မှု တစ်ခု ရှိပါသည်-
@ -115,7 +115,7 @@ Azure AI Foundry Discord Community တွင် ပါဝင်ဆောင်
သင်ဖန်တီးထားသော Repository မိတ္တူတွင် **Code** ခလုတ်ကို နှိပ်ပြီး **Open with Codespaces** ကို ရွေးချယ်ပါ။ ၎င်းသည် သင်အလုပ်လုပ်ရန် Codespace အသစ် တစ်ခု ဖန်တီးပေးပါလိမ့်မည်။
![Codespace](../../translated_images/my/createcodespace.0238bbf4d7a8d955.png)
![Codespace](../../translated_images/my/createcodespace.0238bbf4d7a8d955.webp)
#### သင်၏ ကွန်ပြူတာတွင် သင်ခန်းစာများကို ပြေးရန်

@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA:
- Moodle Cloud တွင် Common Cartridge support အကန့်အသတ်ရှိသည်။ Canvas တွင်လည်း upload လုပ်နိုင်သော Moodle file ကို အသုံးပြုရန် ဦးစားပေးပါ။
- Import ပြီးနောက် modules, due dates, quiz settings များကို သင်၏ term schedule နှင့် ကိုက်ညီစေရန် ပြန်လည်သုံးသပ်ပါ။
![Moodle](../../translated_images/my/moodle.94eb93d714a50cb2.png)
![Moodle](../../translated_images/my/moodle.94eb93d714a50cb2.webp)
> Moodle classroom အတွင်းရှိ သင်ခန်းစာများ
![Canvas](../../translated_images/my/canvas.fbd605ff8e5b8aff.png)
![Canvas](../../translated_images/my/canvas.fbd605ff8e5b8aff.webp)
> Canvas အတွင်းရှိ သင်ခန်းစာများ
### Repo ကို တိုက်ရိုက်အသုံးပြုခြင်း (Classroom မပါ)

@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA:
आज, हामी ती अद्भुत उपकरणहरूको अन्वेषण गर्नेछौं जसले आधुनिक वेब विकासलाई सम्भव मात्र होइन, गम्भीर रूपमा लत लाग्ने बनाउँछ। म त्यही सम्पादकहरू, ब्राउजरहरू, र वर्कफ्लोहरूको कुरा गर्दैछु जुन नेटफ्लिक्स, स्पोटिफाई, र तपाईंको मनपर्ने इन्डी एप स्टुडियोका डेभलपरहरूले हरेक दिन प्रयोग गर्छन्। र यहाँ तपाईंलाई खुशीको नाच गर्न बनाउने भाग छ: यी पेशेवर-ग्रेड, उद्योग-मानक उपकरणहरूको अधिकांश पूर्ण रूपमा निःशुल्क छन्!
![प्रोग्रामिङ परिचय](../../../../translated_images/ne/webdev101-programming.d6e3f98e61ac4bff.png)
![प्रोग्रामिङ परिचय](../../../../translated_images/ne/webdev101-programming.d6e3f98e61ac4bff.webp)
> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा
```mermaid

@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA:
हामी यो यात्रा सँगै गर्नेछौं, एक कदममा। कुनै हतार छैन, कुनै दबाब छैन केवल तपाईं, म, र केही साँच्चै चिसो उपकरणहरू जुन तपाईंको नयाँ साथी बन्नेछन्!
![GitHub परिचय](../../../../translated_images/ne/webdev101-github.8846d7971abef6f9.png)
![GitHub परिचय](../../../../translated_images/ne/webdev101-github.8846d7971abef6f9.webp)
> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा
```mermaid
@ -594,7 +594,7 @@ flowchart TD
✅ 'सुरुवाती-अनुकूल' रिपोजिटरीहरू खोज्नको लागि [ट्याग 'good-first-issue' द्वारा खोज्नुहोस्](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)।
![रिपो स्थानीय रूपमा प्रतिलिपि गर्नुहोस्](../../../../translated_images/ne/clone_repo.5085c48d666ead57.png)
![रिपो स्थानीय रूपमा प्रतिलिपि गर्नुहोस्](../../../../translated_images/ne/clone_repo.5085c48d666ead57.webp)
कोड प्रतिलिपि गर्ने धेरै तरिकाहरू छन्। एउटा तरिका भनेको रिपोजिटरीको सामग्री "क्लोन" गर्नु हो, HTTPS, SSH, वा GitHub CLI (कमाण्ड लाइन इन्टरफेस) प्रयोग गरेर।

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# पहुँचयोग्य वेबपेजहरू बनाउने
![पहुंचयोग्यता सम्बन्धी सबै कुरा](../../../../translated_images/ne/webdev101-a11y.8ef3025c858d897a.png)
![पहुंचयोग्यता सम्बन्धी सबै कुरा](../../../../translated_images/ne/webdev101-a11y.8ef3025c858d897a.webp)
> स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा
```mermaid

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# जाभास्क्रिप्ट आधारभूत: डाटा प्रकारहरू
![जाभास्क्रिप्ट आधारभूत - डाटा प्रकारहरू](../../../../translated_images/ne/webdev101-js-datatypes.4cc470179730702c.png)
![जाभास्क्रिप्ट आधारभूत - डाटा प्रकारहरू](../../../../translated_images/ne/webdev101-js-datatypes.4cc470179730702c.webp)
> स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा
```mermaid

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# जाभास्क्रिप्ट आधारभूत: मेथड्स र फङ्सन्स
![जाभास्क्रिप्ट आधारभूत - फङ्सन्स](../../../../translated_images/ne/webdev101-js-functions.be049c4726e94f8b.png)
![जाभास्क्रिप्ट आधारभूत - फङ्सन्स](../../../../translated_images/ne/webdev101-js-functions.be049c4726e94f8b.webp)
> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा
```mermaid

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# जाभास्क्रिप्ट आधारभूत: निर्णय लिनु
![जाभास्क्रिप्ट आधारभूत - निर्णय लिनु](../../../../translated_images/ne/webdev101-js-decisions.69e1b20f272dd1f0.png)
![जाभास्क्रिप्ट आधारभूत - निर्णय लिनु](../../../../translated_images/ne/webdev101-js-decisions.69e1b20f272dd1f0.webp)
> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# जाभास्क्रिप्ट आधारभूत: एरेहरू र लूपहरू
![जाभास्क्रिप्ट आधारभूत - एरेहरू](../../../../translated_images/ne/webdev101-js-arrays.439d7528b8a29455.png)
![जाभास्क्रिप्ट आधारभूत - एरेहरू](../../../../translated_images/ne/webdev101-js-arrays.439d7528b8a29455.webp)
> स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा
```mermaid

@ -26,7 +26,7 @@ journey
Build terrarium: 5: Student
```
![HTML को परिचय](../../../../translated_images/ne/webdev101-html.4389c2067af68e98.png)
![HTML को परिचय](../../../../translated_images/ne/webdev101-html.4389c2067af68e98.webp)
> स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा
HTML, वा हाइपरटेक्स्ट मार्कअप भाषा, तपाईंले कहिल्यै भ्रमण गरेको प्रत्येक वेबसाइटको आधार हो। HTML लाई वेब पृष्ठहरूको संरचना दिने कंकालको रूपमा सोच्नुहोस् यसले सामग्री कहाँ जान्छ, कसरी व्यवस्थित हुन्छ, र प्रत्येक टुक्राले के प्रतिनिधित्व गर्दछ भनेर परिभाषित गर्दछ। CSS ले पछि तपाईंको HTML लाई रंग र लेआउटको साथ "सजाउनेछ", र जाभास्क्रिप्टले अन्तरक्रियात्मकता संग यसलाई जीवनमा ल्याउनेछ, HTML ले सबै कुरा सम्भव बनाउने आवश्यक संरचना प्रदान गर्दछ।
@ -88,7 +88,7 @@ HTML कोडमा प्रवेश गर्नु अघि, तपाई
4. एक्सप्लोरर प्यानमा, "नयाँ फाइल" आइकन क्लिक गर्नुहोस्
5. तपाईंको फाइललाई `index.html` नाम दिनुहोस्
![VS कोड एक्सप्लोरर नयाँ फाइल सिर्जना देखाउँदै](../../../../translated_images/ne/vs-code-index.e2986cf919471eb9.png)
![VS कोड एक्सप्लोरर नयाँ फाइल सिर्जना देखाउँदै](../../../../translated_images/ne/vs-code-index.e2986cf919471eb9.webp)
**विकल्प २: टर्मिनल कमाण्डहरू प्रयोग गर्दै**
```bash

@ -30,7 +30,7 @@ journey
Glass reflections: 5: Student
```
![CSS को परिचय](../../../../translated_images/ne/webdev101-css.3f7af5991bf53a20.png)
![CSS को परिचय](../../../../translated_images/ne/webdev101-css.3f7af5991bf53a20.webp)
> स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा
तपाईंको HTML टेरारियम कति सामान्य देखिन्थ्यो भन्ने सम्झनुहुन्छ? CSS ले त्यो साधारण संरचनालाई दृश्यात्मक रूपमा आकर्षक बनाउने काम गर्छ।
@ -205,7 +205,7 @@ body {
तपाईंको ब्राउजरको डेभलपर टूल्स (F12) खोल्नुहोस्, एलिमेन्ट्स ट्याबमा जानुहोस्, र तपाईंको `<h1>` तत्व निरीक्षण गर्नुहोस्। तपाईंले देख्नुहुनेछ कि यसले शरीरबाट फन्ट परिवार इनहेरिट गर्छ:
![इनहेरिट गरिएको फन्ट](../../../../translated_images/ne/1.cc07a5cbe114ad1d.png)
![इनहेरिट गरिएको फन्ट](../../../../translated_images/ne/1.cc07a5cbe114ad1d.webp)
**प्रयोग समय**: `<body>` मा `color`, `line-height`, वा `text-align` जस्ता अन्य इनहेरिटेबल गुणहरू सेट गर्न प्रयास गर्नुहोस्। तपाईंको हेडिङ र अन्य तत्वहरूमा के हुन्छ?
@ -564,7 +564,7 @@ Agent मोड प्रयोग गरेर निम्न चुनौत
तपाईंले हल्का रंगका अण्डाकार आकारहरू सिर्जना गर्नुहुनेछ जसले ग्लास रिफ्लेक्सनलाई नक्कल गर्छ। यो प्रविधि Renaissance चित्रकारहरू जस्तै Jan van Eyck ले चित्रित ग्लासलाई तीन-आयामीय देखाउन प्रकाश र रिफ्लेक्सन प्रयोग गरेको जस्तै हो। तपाईंले निम्न लक्ष्य राख्नुहुनेछ:
![finished terrarium](../../../../translated_images/ne/terrarium-final.2f07047ffc597d0a.png)
![finished terrarium](../../../../translated_images/ne/terrarium-final.2f07047ffc597d0a.webp)
**तपाईंको चुनौती:**
- **सिर्जना गर्नुहोस्** ग्लास रिफ्लेक्सनका लागि हल्का रंगका अण्डाकार आकारहरू

@ -26,7 +26,7 @@ journey
Complete terrarium: 5: Student
```
![DOM र क्लोजर](../../../../translated_images/ne/webdev101-js.10280393044d7eaa.png)
![DOM र क्लोजर](../../../../translated_images/ne/webdev101-js.10280393044d7eaa.webp)
> स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा
वेब विकासको सबैभन्दा रोचक पक्षमा स्वागत छ - चीजहरूलाई अन्तरक्रियात्मक बनाउने! डकुमेन्ट अब्जेक्ट मोडेल (DOM) तपाईंको HTML र जाभास्क्रिप्ट बीचको पुल जस्तै हो, र आज हामी यसलाई तपाईंको टेरारियमलाई जीवन्त बनाउन प्रयोग गर्नेछौं। जब टिम बर्नर्स-लीले पहिलो वेब ब्राउजर बनाएका थिए, उनले वेबलाई गतिशील र अन्तरक्रियात्मक बनाउन सक्ने दस्तावेजहरूको कल्पना गरेका थिए - DOM ले त्यो दृष्टिकोणलाई सम्भव बनाउँछ।
@ -105,7 +105,7 @@ flowchart TD
style Q fill:#ffebee
```
![DOM ट्री प्रतिनिधित्व](../../../../translated_images/ne/dom-tree.7daf0e763cbbba92.png)
![DOM ट्री प्रतिनिधित्व](../../../../translated_images/ne/dom-tree.7daf0e763cbbba92.webp)
> DOM र HTML मार्कअपको प्रतिनिधित्व जसले यसलाई सन्दर्भित गर्छ। [ओल्फा नासराओई](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) बाट
@ -150,7 +150,7 @@ flowchart LR
> 💡 **क्लोजर बुझ्दै**: क्लोजरहरू जाभास्क्रिप्टमा महत्त्वपूर्ण विषय हुन्, र धेरै विकासकर्ताहरूले तिनीहरूलाई पूर्ण रूपमा सैद्धान्तिक पक्षहरू बुझ्नुअघि वर्षौंसम्म प्रयोग गर्छन्। आज, हामी व्यावहारिक अनुप्रयोगमा केन्द्रित छौं - तपाईंले अन्तरक्रियात्मक सुविधाहरू निर्माण गर्दा क्लोजरहरू स्वाभाविक रूपमा देखा पर्ने देख्नुहुनेछ। बुझाइ वास्तविक समस्याहरू समाधान गर्ने तरिकामा देखेर विकास हुनेछ।
![DOM ट्री प्रतिनिधित्व](../../../../translated_images/ne/dom-tree.7daf0e763cbbba92.png)
![DOM ट्री प्रतिनिधित्व](../../../../translated_images/ne/dom-tree.7daf0e763cbbba92.webp)
> DOM र HTML मार्कअपको प्रतिनिधित्व जसले यसलाई सन्दर्भित गर्छ। [ओल्फा नासराओई](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) बाट
@ -556,7 +556,7 @@ function stopElementDrag() {
- **क्रस-डिभाइस समर्थन**: डेस्कटप र मोबाइलमा काम गर्छ
- **प्रदर्शन सचेत**: कुनै मेमोरी लीक वा अनावश्यक गणनाहरू छैनन्
![समाप्त टेरारियम](../../../../translated_images/ne/terrarium-final.0920f16e87c13a84.png)
![समाप्त टेरारियम](../../../../translated_images/ne/terrarium-final.0920f16e87c13a84.webp)
---

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
सानो ड्र्याग र ड्रप कोड-मेडिटेसन। थोरै HTML, JS, र CSS प्रयोग गरेर तपाईं वेब इन्टरफेस बनाउन, यसलाई स्टाइल गर्न, र अन्तरक्रिया थप्न सक्नुहुन्छ।
![मेरो टेरारियम](../../../../translated_images/ne/screenshot_gray.0c796099a1f9f25e.png)
![मेरो टेरारियम](../../../../translated_images/ne/screenshot_gray.0c796099a1f9f25e.webp)
## श्रेय

@ -26,7 +26,7 @@ journey
Polish experience: 5: Student
```
![ब्राउजर स्केच नोट](../../../../translated_images/ne/browser.60317c9be8b7f84a.jpg)
![ब्राउजर स्केच नोट](../../../../translated_images/ne/browser.60317c9be8b7f84a.webp)
> स्केच नोट [वसिम चेघम](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) द्वारा
## प्रि-लेक्चर क्विज
@ -79,7 +79,7 @@ mindmap
**थोरै इतिहास**: पहिलो ब्राउजर 'वर्ल्डवाइडवेब' भनिन्थ्यो र यो सर टिमोथी बर्नर्स-लीले १९९० मा निर्माण गरेका थिए।
![प्रारम्भिक ब्राउजरहरू](../../../../translated_images/ne/earlybrowsers.d984b711cdf3a42d.jpg)
![प्रारम्भिक ब्राउजरहरू](../../../../translated_images/ne/earlybrowsers.d984b711cdf3a42d.webp)
> केही प्रारम्भिक ब्राउजरहरू, [करेन म्याकग्रेन](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) मार्फत
### ब्राउजरहरूले वेब सामग्री कसरी प्रक्रिया गर्छन्
@ -198,7 +198,7 @@ quadrantChart
एक्सटेन्सन स्थापना प्रक्रिया बुझ्नाले तपाईंलाई प्रयोगकर्ताहरूले तपाईंको एक्सटेन्सन स्थापना गर्दा अनुभव गर्ने कुराको पूर्वानुमान गर्न मद्दत गर्छ। स्थापना प्रक्रिया आधुनिक ब्राउजरहरूमा मानकीकृत छ, इन्टरफेस डिजाइनमा साना भिन्नताहरूका साथ।
![एज ब्राउजरको स्क्रिनशट जसमा edge://extensions पृष्ठ र सेटिङ मेनु खुला छ](../../../../translated_images/ne/install-on-edge.d68781acaf0b3d3d.png)
![एज ब्राउजरको स्क्रिनशट जसमा edge://extensions पृष्ठ र सेटिङ मेनु खुला छ](../../../../translated_images/ne/install-on-edge.d68781acaf0b3d3d.webp)
> **महत्वपूर्ण**: आफ्नो एक्सटेन्सन परीक्षण गर्दा डेभलपर मोड अन गर्नुहोस् र अन्य स्टोरहरूबाट एक्सटेन्सनहरू अनुमति दिन सुनिश्चित गर्नुहोस्।
@ -313,10 +313,10 @@ project-root/
### एक्सटेन्सन दृश्यहरूको अवलोकन
**सेटअप दृश्य** - पहिलो पटक प्रयोगकर्ता कन्फिगरेसन:
![सम्पन्न एक्सटेन्सनको स्क्रिनशट जसले क्षेत्र नाम र API कीको लागि इनपुटहरू भएको फारम देखाउँछ।](../../../../translated_images/ne/1.b6da8c1394b07491.png)
![सम्पन्न एक्सटेन्सनको स्क्रिनशट जसले क्षेत्र नाम र API कीको लागि इनपुटहरू भएको फारम देखाउँछ।](../../../../translated_images/ne/1.b6da8c1394b07491.webp)
**परिणाम दृश्य** - कार्बन फुटप्रिन्ट डेटा प्रदर्शन:
![सम्पन्न एक्सटेन्सनको स्क्रिनशट जसले US-NEISO क्षेत्रको लागि कार्बन प्रयोग र फोसिल इन्धन प्रतिशतको मानहरू देखाउँछ।](../../../../translated_images/ne/2.1dae52ff08042246.png)
![सम्पन्न एक्सटेन्सनको स्क्रिनशट जसले US-NEISO क्षेत्रको लागि कार्बन प्रयोग र फोसिल इन्धन प्रतिशतको मानहरू देखाउँछ।](../../../../translated_images/ne/2.1dae52ff08042246.webp)
### कन्फिगरेसन फारम निर्माण गर्दै

@ -268,7 +268,7 @@ stateDiagram-v2
ClearStorage --> FirstTime: Back to setup
```
![लोकल स्टोरेज प्यान](../../../../translated_images/ne/localstorage.472f8147b6a3f8d1.png)
![लोकल स्टोरेज प्यान](../../../../translated_images/ne/localstorage.472f8147b6a3f8d1.webp)
> ⚠️ **सुरक्षा विचार**: उत्पादन अनुप्रयोगहरूमा, लोकल स्टोरेजमा API कुञ्जीहरू भण्डारण गर्दा सुरक्षा जोखिमहरू हुन्छन् किनभने जाभास्क्रिप्टले यो डाटामा पहुँच गर्न सक्छ। सिक्ने उद्देश्यका लागि, यो दृष्टिकोण ठीक छ, तर वास्तविक अनुप्रयोगहरूले संवेदनशील प्रमाणपत्रहरूको लागि सुरक्षित सर्भर-साइड स्टोरेज प्रयोग गर्नुपर्छ।

@ -126,7 +126,7 @@ flowchart LR
यसलाई प्रयास गरौं। एउटा वेबसाइट खोल्नुहोस् (Microsoft.com राम्रो काम गर्दछ) र 'रिकर्ड' बटन क्लिक गर्नुहोस्। अब पृष्ठलाई रिफ्रेस गर्नुहोस् र प्रोफाइलरले के भइरहेको छ भनेर क्याप्चर गर्न हेर्नुहोस्। जब तपाईं रेकर्डिङ रोक्नुहुन्छ, तपाईंले ब्राउजरले साइटलाई 'स्क्रिप्ट', 'रेन्डर', र 'पेन्ट' गर्ने तरिकाको विस्तृत विवरण देख्नुहुनेछ। यो मिशन कन्ट्रोलले रकेट प्रक्षेपणको समयमा प्रत्येक प्रणालीलाई अनुगमन गर्ने तरिकाको जस्तै हो - तपाईंलाई वास्तविक समयमा के भइरहेको छ र कहिले भइरहेको छ भन्ने डेटा प्राप्त हुन्छ।
![एज प्रोफाइलर](../../../../translated_images/ne/profiler.5a4a62479c5df01c.png)
![एज प्रोफाइलर](../../../../translated_images/ne/profiler.5a4a62479c5df01c.webp)
✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) मा थप विवरणहरू छन् यदि तपाईं गहिराइमा जान चाहनुहुन्छ भने।
@ -136,11 +136,11 @@ flowchart LR
प्रोफाइल टाइमलाइनको एक भाग चयन गरेर र सारांश प्यान हेरेर तपाईंको पृष्ठको प्रदर्शनको स्न्यापशट प्राप्त गर्नुहोस्:
![एज प्रोफाइलर स्न्यापशट](../../../../translated_images/ne/snapshot.97750180ebcad737.png)
![एज प्रोफाइलर स्न्यापशट](../../../../translated_images/ne/snapshot.97750180ebcad737.webp)
इभेन्ट लग प्यान जाँच गर्नुहोस् कि कुनै इभेन्ट १५ मिलिसेकेन्ड भन्दा लामो समय लागेको छ कि छैन:
![एज इभेन्ट लग](../../../../translated_images/ne/log.804026979f3707e0.png)
![एज इभेन्ट लग](../../../../translated_images/ne/log.804026979f3707e0.webp)
✅ तपाईंको प्रोफाइलरलाई चिन्नुहोस्! यस साइटमा डेभलपर टूल्स खोल्नुहोस् र कुनै पनि बाधाहरू छन् कि छैनन् हेर्नुहोस्। सबैभन्दा ढिलो लोड हुने सम्पत्ति के हो? सबैभन्दा छिटो?

@ -23,7 +23,7 @@ CO_OP_TRANSLATOR_METADATA:
### क्रेडिट्स
![हरियो ब्राउजर एक्स्टेन्सन](../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.png)
![हरियो ब्राउजर एक्स्टेन्सन](../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.webp)
## क्रेडिट्स

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrow को C02 Signal API प्रयोग गरेर बिजुलीको प्रयोग ट्र्याक गर्न, एउटा ब्राउजर एक्स्टेन्सन बनाउनुहोस् जसले तपाईंलाई तपाईंको क्षेत्रको बिजुली प्रयोगको भार कस्तो छ भनेर ब्राउजरमै सम्झना दिलाउन सक्छ। यो एक्स्टेन्सनलाई अनियमित रूपमा प्रयोग गर्दा तपाईंले यस जानकारीको आधारमा आफ्नो गतिविधिहरूको निर्णय लिन मद्दत गर्नेछ।
![एक्स्टेन्सन स्क्रिनसट](../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.png)
![एक्स्टेन्सन स्क्रिनसट](../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.webp)
## सुरु गर्न
@ -31,7 +31,7 @@ npm run build
Edge मा स्थापना गर्न, ब्राउजरको माथिल्लो दायाँ कुनामा रहेको 'तीन डट' मेनु प्रयोग गरेर Extensions प्यानल खोज्नुहोस्। त्यहाँबाट, 'Load Unpacked' चयन गरेर नयाँ एक्स्टेन्सन लोड गर्नुहोस्। प्रम्प्टमा 'dist' फोल्डर खोल्नुहोस् र एक्स्टेन्सन लोड हुनेछ। यसलाई प्रयोग गर्न, तपाईंलाई CO2 Signal को API को लागि API key ([यहाँ इमेल मार्फत प्राप्त गर्नुहोस्](https://www.co2signal.com/) - यस पृष्ठमा आफ्नो इमेल बक्समा प्रविष्ट गर्नुहोस्) र [Electricity Map](https://www.electricitymap.org/map) सँग सम्बन्धित [तपाईंको क्षेत्रको कोड](http://api.electricitymap.org/v3/zones) चाहिन्छ (उदाहरणका लागि, बोस्टनमा, म 'US-NEISO' प्रयोग गर्छु)।
![स्थापना गर्दै](../../../../translated_images/ne/install-on-edge.78634f02842c4828.png)
![स्थापना गर्दै](../../../../translated_images/ne/install-on-edge.78634f02842c4828.webp)
एक पटक API key र क्षेत्र एक्स्टेन्सन इन्टरफेसमा प्रविष्ट गरेपछि, ब्राउजर एक्स्टेन्सन बारमा रहेको रङ्गीन डटले तपाईंको क्षेत्रको ऊर्जा प्रयोगलाई प्रतिबिम्बित गर्न परिवर्तन गर्नेछ र तपाईंलाई ऊर्जा-गहन गतिविधिहरूको लागि उपयुक्त सल्लाह दिनेछ। यो 'डट' प्रणालीको अवधारणा मलाई [Energy Lollipop एक्स्टेन्सन](https://energylollipop.com/) बाट क्यालिफोर्नियाको उत्सर्जनका लागि प्रेरित गरिएको हो।

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrow को C02 Signal API प्रयोग गरेर बिजुली खपत ट्र्याक गर्दै, एउटा ब्राउजर एक्स्टेन्सन बनाउनुहोस् जसले तपाईंलाई तपाईंको क्षेत्रको बिजुली खपतको बारेमा सिधै ब्राउजरमा सम्झना दिन्छ। यो विशेष एक्स्टेन्सनको प्रयोगले तपाईंलाई यी जानकारीहरूको आधारमा तपाईंको गतिविधिहरूको बारेमा निर्णय लिन मद्दत गर्नेछ।
![एक्स्टेन्सनको स्क्रिनसट](../../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.png)
![एक्स्टेन्सनको स्क्रिनसट](../../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.webp)
## सुरु गर्न
@ -31,7 +31,7 @@ npm run build
Edge मा स्थापना गर्न, ब्राउजरको माथिल्लो दायाँ कुनामा रहेको 'तीन बिन्दु' मेनु प्रयोग गरेर Extensions प्यानल खोज्नुहोस्। त्यहाँबाट, 'लोड अनजिप्ड एक्स्टेन्सन' चयन गरेर नयाँ एक्स्टेन्सन लोड गर्नुहोस्। प्रॉम्प्टमा 'dist' फोल्डर खोल्नुहोस्, र एक्स्टेन्सन लोड हुनेछ। यसलाई प्रयोग गर्न, तपाईंलाई CO2 Signal API को लागि API की चाहिन्छ ([यहाँ ईमेल मार्फत प्राप्त गर्नुहोस्](https://www.co2signal.com/) - यो पृष्ठमा रहेको बाकसमा तपाईंको ईमेल प्रविष्ट गर्नुहोस्) र तपाईंको क्षेत्रको लागि [कोड](http://api.electricitymap.org/v3/zones) जुन [बिजुलीको नक्सा](https://www.electricitymap.org/map) सँग मेल खान्छ (उदाहरणका लागि, बोस्टनमा, म 'US-NEISO' प्रयोग गर्छु)।
![स्थापना](../../../../../translated_images/ne/install-on-edge.78634f02842c4828.png)
![स्थापना](../../../../../translated_images/ne/install-on-edge.78634f02842c4828.webp)
एक पटक API की र क्षेत्र एक्स्टेन्सन इन्टरफेसमा प्रविष्ट गरेपछि, ब्राउजरको एक्स्टेन्सन बारमा रहेको रङ्गीन बिन्दु तपाईंको क्षेत्रको ऊर्जा खपतलाई प्रतिबिम्बित गर्न परिवर्तन हुनुपर्छ र तपाईंलाई ऊर्जा-गहन गतिविधिहरूको बारेमा संकेत दिनुपर्छ जुन तपाईंले गर्न उपयुक्त ठान्न सक्नुहुन्छ। यो 'बिन्दु' प्रणालीको अवधारणा मलाई [Energy Lollipop एक्स्टेन्सन](https://energylollipop.com/) बाट क्यालिफोर्नियाका उत्सर्जनहरूको लागि प्रेरित भएको हो।

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrow को CO2 सिग्नल एपीआई प्रयोग गरेर बिजुलीको उपयोग ट्र्याक गर्ने ब्राउज़र एक्सटेंशन बनाउनुहोस्, जसले तपाईंलाई तपाईंको क्षेत्रको बिजुलीको उपयोग कत्तिको भारी छ भनेर रिमाइन्डर दिन्छ। यो एक्सटेंशन प्रयोग गर्दा, तपाईंले यस जानकारीको आधारमा आफ्नो गतिविधिहरूमा निर्णय लिन सक्नुहुन्छ।
![एक्सटेंशन स्क्रिनशट](../../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.png)
![एक्सटेंशन स्क्रिनशट](../../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.webp)
## सुरु गर्न
@ -31,7 +31,7 @@ npm run build
एज ब्राउज़रमा इन्स्टल गर्न, ब्राउज़रको माथिल्लो दायाँ कुनामा रहेको 'तीन डट' मेनु प्रयोग गरेर एक्सटेंशन प्यानल खोज्नुहोस्। त्यहाँबाट, 'लोड अनप्याक्ड' विकल्प छान्नुहोस्। प्रॉम्प्टमा 'dist' फोल्डर खोल्नुहोस्, र एक्सटेंशन लोड हुनेछ। यसलाई प्रयोग गर्न, तपाईंलाई CO2 सिग्नलको एपीआई ([यहाँ ईमेल मार्फत प्राप्त गर्नुहोस्](https://www.co2snal.com/) - यो पृष्ठमा आफ्नो ईमेल बक्समा प्रविष्ट गर्नुहोस्) र [आफ्नो क्षेत्रको कोड](http://api.electricitymap.org/v3/zones) [इलेक्ट्रिसिटी म्याप](https://www.electricitymap.org/map) बाट आवश्यक हुनेछ (उदाहरणका लागि, बोस्टनमा, म 'US-NEISO' प्रयोग गर्छु)।
![installing](../../../../../translated_images/ne/install-on-edge.78634f02842c4828.png)
![installing](../../../../../translated_images/ne/install-on-edge.78634f02842c4828.webp)
एक पटक एपीआई कुंजी र क्षेत्र एक्सटेंशन इन्टरफेसमा इनपुट गरेपछि, ब्राउज़र एक्सटेंशन बारमा रहेको रंगीन डटले तपाईंको क्षेत्रको ऊर्जा उपयोगलाई प्रतिबिम्बित गर्नुपर्छ र तपाईंलाई संकेत दिनुपर्छ कि ऊर्जा-गहन गतिविधिहरू तपाईंको प्रदर्शनका लागि उपयुक्त छन् कि छैनन्। यो 'डट' प्रणालीको अवधारणा मलाई क्यालिफोर्नियाको उत्सर्जनका लागि [एनर्जी लॉलीपप एक्सटेंशन](https://energylollipop.com/) बाट प्रेरित भएको हो।

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrow को Signal C02 API प्रयोग गरेर आफ्नो क्षेत्रको विद्युत उपयोगको निगरानी गर्न ब्राउजर एक्सटेन्सन बनाइनेछ। यसले तपाईंको ब्राउजरमा सिधै स्मरण गराउने सुविधा दिनेछ कि तपाईंको क्षेत्रको विद्युत उपयोग कति भारी छ। यो विशेष एक्सटेन्सन प्रयोग गर्दा तपाईं आफ्नो गतिविधिहरूलाई यी जानकारीको आधारमा मूल्याङ्कन गर्न सक्नुहुन्छ।
![एक्सटेन्सनको स्क्रिनशट](../../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.png)
![एक्सटेन्सनको स्क्रिनशट](../../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.webp)
## सुरु गर्न
@ -31,7 +31,7 @@ npm run build
Edge मा स्थापना गर्न, ब्राउजरको माथिल्लो दायाँ कुनामा रहेको "तीन बिन्दु" मेनु प्रयोग गरेर एक्सटेन्सन प्यानल खोज्नुहोस्। यदि सक्रिय छैन भने, डेभलपर मोड (तल बायाँ) सक्रिय गर्नुहोस्। "अनप्याक्ड लोड" चयन गरेर नयाँ एक्सटेन्सन लोड गर्नुहोस्। प्रम्प्टमा "dist" फोल्डर खोल्नुहोस् र एक्सटेन्सन लोड हुनेछ। प्रयोग गर्नका लागि, तपाईंलाई CO2 Signal API को लागि API की चाहिन्छ (तपाईं [यहाँ इमेल मार्फत प्राप्त गर्न सक्नुहुन्छ](https://www.co2signal.com/) - यस पृष्ठमा आफ्नो इमेल बक्समा राख्नुहोस्) र [म्याप इलेक्ट्रिसिटी](https://www.electricitymap.org/map) अनुसार आफ्नो क्षेत्रको [कोड](http://api.electricitymap.org/v3/zones) (उदाहरणका लागि, बोस्टनमा "US-NEISO")।
![स्थापना](../../../../../translated_images/ne/install-on-edge.78634f02842c4828.png)
![स्थापना](../../../../../translated_images/ne/install-on-edge.78634f02842c4828.webp)
एकपटक API की र क्षेत्र एक्सटेन्सनको इन्टरफेसमा राखेपछि, ब्राउजरको एक्सटेन्सन बारमा रहेको रंगीन बिन्दु क्षेत्रको ऊर्जा उपयोगलाई प्रतिबिम्बित गर्न परिवर्तन हुनेछ। यसले उच्च ऊर्जा खपत गतिविधिहरूको उपयुक्तता बारे संकेत दिनेछ। यो "बिन्दु" प्रणालीको अवधारणा [Energy Lollipop एक्सटेन्सन](https://energylollipop.com/) बाट क्यालिफोर्नियाको उत्सर्जनका लागि प्रेरित गरिएको हो।

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrow को C02 सिग्नल API प्रयोग गरेर तपाईंको क्षेत्रको विद्युत उपयोगको मात्रा ट्र्याक गर्नका लागि ब्राउजरमा रिमाइन्डरको रूपमा देखाउन सकिने ब्राउजर एक्सटेन्सन निर्माण गर्नुहोस्। यो एक्सटेन्सनलाई प्रयोग गरेर, तपाईं आफ्नो गतिविधि यस जानकारीको आधारमा निर्णय गर्न सक्नुहुन्छ।
![extension screenshot](../../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.png)
![extension screenshot](../../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.webp)
## सुरु गर्न
@ -31,7 +31,7 @@ npm run build
Edge मा स्थापना गर्न, ब्राउजरको माथिल्लो दायाँ कुनामा रहेको "तीन डट" मेनुबाट "Extensions" प्यानल खोज्नुहोस्। त्यहाँबाट "Load Unpacked" चयन गरेर नयाँ एक्सटेन्सन लोड गर्नुहोस्। प्रम्प्टमा "dist" फोल्डर खोल्दा एक्सटेन्सन लोड हुनेछ। प्रयोग गर्नका लागि, CO2 सिग्नल API को API की ([यहाँ इमेल मार्फत प्राप्त गर्नुहोस्](https://www.co2signal.com/) - यो पेजको बक्समा इमेल प्रविष्ट गर्नुहोस्) र [Electricity Map](https://www.electricitymap.org/map) मा तपाईंको क्षेत्रको [code](http://api.electricitymap.org/v3/zones) आवश्यक छ (उदाहरणका लागि, बोस्टनमा 'US-NEISO' प्रयोग गरिन्छ)।
![installing](../../../../../translated_images/ne/install-on-edge.78634f02842c4828.png)
![installing](../../../../../translated_images/ne/install-on-edge.78634f02842c4828.webp)
API की र क्षेत्र विस्तार इन्टरफेसमा प्रविष्ट गरेपछि, ब्राउजरको एक्सटेन्सन बारमा देखिने रंगीन डट परिवर्तन हुनेछ, जसले तपाईंको क्षेत्रको ऊर्जा उपयोगलाई प्रतिबिम्बित गर्नेछ। यसले तपाईंलाई कुन प्रकारको ऊर्जा आवश्यक पर्ने गतिविधि गर्न उपयुक्त छ भनेर संकेत गर्नेछ। यो "डट" प्रणालीको अवधारणा मलाई क्यालिफोर्नियाको उत्सर्जनको लागि [Energy Lollipop extension](https://energylollipop.com/) बाट प्रेरित गरेको हो।

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
C02 सिग्नल API प्रयोग गरेर विद्युत प्रयोगको निगरानी गर्न, ब्राउजर एक्सटेन्सन बनाउनुहोस् ताकि तपाईं आफ्नो क्षेत्रको विद्युत प्रयोगको गम्भीरता बारे ब्राउजरमा चेतावनी प्राप्त गर्न सक्नुहुन्छ। यो एक्सटेन्सन प्रयोग गर्दा तपाईंलाई यो जानकारीको आधारमा आफ्नो गतिविधिहरूको निर्णय गर्न मद्दत गर्नेछ।
![ब्राउजर एक्सटेन्सनको स्क्रिनशट](../../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.png)
![ब्राउजर एक्सटेन्सनको स्क्रिनशट](../../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.webp)
## यहाँबाट सुरु गर्नुहोस्
@ -31,7 +31,7 @@ npm run build
Edge मा स्थापना गर्न, ब्राउजरको दायाँ माथिको कुनामा रहेको 'तीन बिन्दु' मेनु प्रयोग गरेर एक्सटेन्सन प्यानल खोज्नुहोस्। त्यहाँबाट, 'Load Unpacked' चयन गरेर नयाँ एक्सटेन्सन लोड गर्नुहोस्। अनुरोधमा 'dist' फोल्डर खोल्नुहोस् र एक्सटेन्सन लोड हुनेछ। यसलाई प्रयोग गर्न, तपाईंलाई CO2 सिग्नल API को लागि API किज चाहिन्छ ([यहाँ इमेल मार्फत प्राप्त गर्नुहोस्](https://www.co2signal.com/) - यो पृष्ठमा रहेको बक्समा आफ्नो इमेल राख्नुहोस्) र [तपाईंको क्षेत्रको कोड](http://api.electricitymap.org/v3/zones) जुन [इलेक्ट्रिसिटी म्याप](https://www.electricitymap.org/map) सँग मेल खान्छ (उदाहरणका लागि, बोस्टनमा, मैले 'US-NEISO' प्रयोग गरेको छु)।
![डाउनलोड गर्दै](../../../../../translated_images/ne/install-on-edge.78634f02842c4828.png)
![डाउनलोड गर्दै](../../../../../translated_images/ne/install-on-edge.78634f02842c4828.webp)
API किज र क्षेत्र एक्सटेन्सनको इन्टरफेसमा प्रविष्ट गरेपछि, ब्राउजर एक्सटेन्सन बारमा रहेको रंगीन बिन्दु तपाईंको क्षेत्रको ऊर्जा प्रयोगलाई प्रतिबिम्बित गर्न परिवर्तन हुनेछ र तपाईंलाई उपयुक्त गतिविधिहरूको सिफारिस दिनेछ। 'डट' प्रणालीको अवधारणा मलाई [क्यालिफोर्नियाको लागि एनर्जी ललिपप ब्राउजर एक्सटेन्सन](https://energylollipop.com/) बाट प्रेरित गरिएको हो।

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrow को C02 Signal API प्रयोग गरेर बिजुलीको प्रयोग ट्र्याक गर्न, एउटा ब्राउजर एक्स्टेन्सन बनाउनुहोस् जसले तपाईंलाई तपाईंको क्षेत्रको बिजुली प्रयोगको भारबारे ब्राउजरमै सम्झना दिन्छ। यो एक्स्टेन्सनलाई अनियमित रूपमा प्रयोग गर्दा तपाईंले यस जानकारीको आधारमा आफ्नो गतिविधिहरूको निर्णय लिन मद्दत गर्नेछ।
![extension screenshot](../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.png)
![extension screenshot](../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.webp)
## सुरु गर्न
@ -31,7 +31,7 @@ npm run build
Edge मा स्थापना गर्न, ब्राउजरको माथिल्लो दायाँ कुनामा रहेको 'तीन डट' मेनु प्रयोग गरेर Extensions प्यानल खोज्नुहोस्। त्यहाँबाट, 'Load Unpacked' चयन गरेर नयाँ एक्स्टेन्सन लोड गर्नुहोस्। प्रम्प्टमा 'dist' फोल्डर खोल्नुहोस् र एक्स्टेन्सन लोड हुनेछ। यसलाई प्रयोग गर्न, तपाईंलाई CO2 Signal को API को लागि API key ([यहाँ इमेलमार्फत प्राप्त गर्नुहोस्](https://www.co2signal.com/) - यस पृष्ठमा आफ्नो इमेल बक्समा प्रविष्ट गर्नुहोस्) र [Electricity Map](https://www.electricitymap.org/map) सँग सम्बन्धित [तपाईंको क्षेत्रको कोड](http://api.electricitymap.org/v3/zones) आवश्यक हुनेछ (उदाहरणका लागि, बोस्टनमा म 'US-NEISO' प्रयोग गर्छु)।
![installing](../../../../translated_images/ne/install-on-edge.78634f02842c4828.png)
![installing](../../../../translated_images/ne/install-on-edge.78634f02842c4828.webp)
एक पटक API key र क्षेत्र एक्स्टेन्सन इन्टरफेसमा प्रविष्ट गरेपछि, ब्राउजर एक्स्टेन्सन बारमा रहेको रङ्गीन डटले तपाईंको क्षेत्रको ऊर्जा प्रयोगलाई प्रतिबिम्बित गर्न परिवर्तन गर्नेछ र तपाईंलाई ऊर्जा-गहन गतिविधिहरूको लागि उपयुक्त सल्लाह दिनेछ। यो 'डट' प्रणालीको अवधारणा मलाई [Energy Lollipop एक्स्टेन्सन](https://energylollipop.com/) बाट क्यालिफोर्नियाको उत्सर्जनका लागि प्रेरित गरिएको हो।

@ -108,7 +108,7 @@ quadrantChart
UI Elements: [0.9, 0.1]
```
![क्यानभासको ग्रिड](../../../../translated_images/ne/canvas_grid.5f209da785ded492.png)
![क्यानभासको ग्रिड](../../../../translated_images/ne/canvas_grid.5f209da785ded492.webp)
> छवि [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) बाट
क्यानभास तत्वमा चित्रण गर्न, तपाईंले क्यानभास ग्राफिक्सको आधार बनाउने तीन-चरण प्रक्रिया पछ्याउनुहुनेछ। तपाईंले यो केही पटक गरेपछि, यो स्वाभाविक बन्छ:
@ -329,11 +329,11 @@ flowchart TD
- हिरो जहाज
![हिरो जहाज](../../../../translated_images/ne/player.dd24c1afa8c71e9b.png)
![हिरो जहाज](../../../../translated_images/ne/player.dd24c1afa8c71e9b.webp)
- 5*5 राक्षस
![राक्षस जहाज](../../../../translated_images/ne/enemyShip.5df2a822c16650c2.png)
![राक्षस जहाज](../../../../translated_images/ne/enemyShip.5df2a822c16650c2.webp)
### विकास सुरु गर्न सिफारिस गरिएका चरणहरू
@ -414,7 +414,7 @@ const STOP_X = START_X + FORMATION_WIDTH;
तयार परिणाम यसरी देखिनुपर्छ:
![कालो स्क्रिनमा एक नायक र ५*५ राक्षसहरू](../../../../translated_images/ne/partI-solution.36c53b48c9ffae2a.png)
![कालो स्क्रिनमा एक नायक र ५*५ राक्षसहरू](../../../../translated_images/ne/partI-solution.36c53b48c9ffae2a.webp)
## समाधान

@ -160,7 +160,7 @@ sequenceDiagram
```
- **स्कोरिङ प्रणाली**: प्रत्येक नष्ट गरिएको शत्रु जहाजले १०० पोइन्ट्स प्रदान गर्दछ (राउन्ड नम्बरहरू खेलाडीहरूले मानसिक रूपमा गणना गर्न सजिलो हुन्छ)। स्कोर तलको बायाँ कुनामा देखाइन्छ।
- **जीवन काउन्टर**: तपाईंको हिरो तीन जीवनहरूसँग सुरु हुन्छ - प्रारम्भिक आर्केड गेमहरूले चुनौती र खेल्न योग्यताको सन्तुलन गर्न स्थापना गरेको मानक। प्रत्येक शत्रुसँगको टक्करले एक जीवन खर्च हुन्छ। बाँकी जीवनहरू तलको दायाँ कुनामा जहाज आइकनहरू प्रयोग गरेर देखाइन्छ ![life image](../../../../translated_images/ne/life.6fb9f50d53ee0413.png)।
- **जीवन काउन्टर**: तपाईंको हिरो तीन जीवनहरूसँग सुरु हुन्छ - प्रारम्भिक आर्केड गेमहरूले चुनौती र खेल्न योग्यताको सन्तुलन गर्न स्थापना गरेको मानक। प्रत्येक शत्रुसँगको टक्करले एक जीवन खर्च हुन्छ। बाँकी जीवनहरू तलको दायाँ कुनामा जहाज आइकनहरू प्रयोग गरेर देखाइन्छ ![life image](../../../../translated_images/ne/life.6fb9f50d53ee0413.webp)।
## निर्माण सुरु गरौं!

@ -614,7 +614,7 @@ sequenceDiagram
`history.pushState` प्रयोग गरेर ब्राउजरको नेभिगेसन history मा नयाँ प्रविष्टिहरू सिर्जना हुन्छ। तपाईंले आफ्नो ब्राउजरको *back button* थिचेर जाँच गर्न सक्नुहुन्छ, यसले केही यस्तो देखाउनु पर्छ:
![नेभिगेसन history को स्क्रिनशट](../../../../translated_images/ne/history.7fdabbafa521e064.png)
![नेभिगेसन history को स्क्रिनशट](../../../../translated_images/ne/history.7fdabbafa521e064.webp)
यदि तपाईं back बटन केही पटक क्लिक गर्नुहुन्छ भने, तपाईं देख्नुहुनेछ कि हालको URL परिवर्तन हुन्छ र history अपडेट हुन्छ, तर उही template प्रदर्शन भइरहन्छ।

@ -295,7 +295,7 @@ graph TD
2. तपाईंको ब्राउजरको ठेगाना पट्टीमा परिवर्तनहरू अवलोकन गर्नुहोस्
3. पृष्ठ पुनः लोड भएको र URL मा डेटा देखा परेको नोट गर्नुहोस्
![दर्ता बटन क्लिक गरेपछि ब्राउजरको URL परिवर्तनको स्क्रिनसट](../../../../translated_images/ne/click-register.e89a30bf0d4bc9ca.png)
![दर्ता बटन क्लिक गरेपछि ब्राउजरको URL परिवर्तनको स्क्रिनसट](../../../../translated_images/ne/click-register.e89a30bf0d4bc9ca.webp)
### HTTP विधिहरूको तुलना
@ -350,7 +350,7 @@ graph TD
2. **"खाता सिर्जना गर्नुहोस्" बटन क्लिक गर्नुहोस्**
3. **तपाईंको ब्राउजरमा सर्भर प्रतिक्रिया अवलोकन गर्नुहोस्**
![ब्राउजर विन्डो, ठेगाना localhost:5000/api/accounts मा, JSON स्ट्रिङ देखाउँदै प्रयोगकर्ता डेटा सहित](../../../../translated_images/ne/form-post.61de4ca1b964d91a.png)
![ब्राउजर विन्डो, ठेगाना localhost:5000/api/accounts मा, JSON स्ट्रिङ देखाउँदै प्रयोगकर्ता डेटा सहित](../../../../translated_images/ne/form-post.61de4ca1b964d91a.webp)
**तपाईंले के देख्नुहुन्छ:**
- **ब्राउजर पुनःनिर्देशन** API अन्तबिन्दु URL मा
@ -554,7 +554,7 @@ async function register() {
3. **क्लिक गर्नुहोस्** "खाता सिर्जना गर्नुहोस्"
4. **कन्सोल सन्देशहरू र प्रयोगकर्ता प्रतिक्रिया अवलोकन गर्नुहोस्**
![ब्राउजर कन्सोलमा देखिएको लग सन्देशको स्क्रिनशट](../../../../translated_images/ne/browser-console.efaf0b51aaaf6778.png)
![ब्राउजर कन्सोलमा देखिएको लग सन्देशको स्क्रिनशट](../../../../translated_images/ne/browser-console.efaf0b51aaaf6778.webp)
**तपाईंले के देख्नुहुन्छ:**
- **लोडिङ स्थिति** सबमिट बटनमा देखा पर्छ
@ -729,7 +729,7 @@ input:focus:invalid {
3. **प्रयोगकर्ता नाम फिल्डमा विशेष क्यारेक्टरहरू प्रयास गर्नुहोस्**
4. **नकारात्मक ब्यालेन्स रकम प्रविष्ट गर्नुहोस्**
![फारम सबमिट गर्न प्रयास गर्दा देखिएको मान्यता त्रुटि](../../../../translated_images/ne/validation-error.8bd23e98d416c22f.png)
![फारम सबमिट गर्न प्रयास गर्दा देखिएको मान्यता त्रुटि](../../../../translated_images/ne/validation-error.8bd23e98d416c22f.webp)
**तपाईंले के अवलोकन गर्नुहुन्छ:**
- **ब्राउजरले** देशी मान्यता सन्देशहरू देखाउँछ
@ -867,7 +867,7 @@ timeline
थप शैलीहरू थपेपछि अन्तिम लगइन पृष्ठ कस्तो देखिन सक्छ भन्ने उदाहरण यहाँ छ:
![CSS शैलीहरू थपेपछि लगइन पृष्ठको स्क्रिनशट](../../../../translated_images/ne/result.96ef01f607bf856a.png)
![CSS शैलीहरू थपेपछि लगइन पृष्ठको स्क्रिनशट](../../../../translated_images/ne/result.96ef01f607bf856a.webp)
## पोस्ट-व्याख्यान क्विज

@ -160,7 +160,7 @@ sequenceDiagram
Browser->>User: Displays new page (flash/reload)
```
![मल्टि-पेज एप्लिकेसनमा अपडेट वर्कफ्लो](../../../../translated_images/ne/mpa.7f7375a1a2d4aa77.png)
![मल्टि-पेज एप्लिकेसनमा अपडेट वर्कफ्लो](../../../../translated_images/ne/mpa.7f7375a1a2d4aa77.webp)
**किन यो विधि असहज लाग्थ्यो:**
- प्रत्येक क्लिकले सम्पूर्ण पृष्ठलाई पुनः निर्माण गर्नुपर्थ्यो
@ -187,7 +187,7 @@ sequenceDiagram
Browser->>User: Shows updated content (no reload)
```
![सिंगल-पेज एप्लिकेसनमा अपडेट वर्कफ्लो](../../../../translated_images/ne/spa.268ec73b41f992c2.png)
![सिंगल-पेज एप्लिकेसनमा अपडेट वर्कफ्लो](../../../../translated_images/ne/spa.268ec73b41f992c2.webp)
**किन SPA हरू धेरै राम्रो लाग्छन्:**
- केवल वास्तवमा परिवर्तन भएका भागहरू अपडेट हुन्छन् (स्मार्ट, हैन?)
@ -510,7 +510,7 @@ if (data.error) {
अब जब तपाईंले अमान्य खाता प्रयोग गरेर परीक्षण गर्नुहुन्छ, तपाईंले पृष्ठमा नै उपयोगी त्रुटि सन्देश देख्नुहुनेछ!
![लगइनको क्रममा देखाइएको त्रुटि सन्देशको स्क्रिनशट](../../../../translated_images/ne/login-error.416fe019b36a6327.png)
![लगइनको क्रममा देखाइएको त्रुटि सन्देशको स्क्रिनशट](../../../../translated_images/ne/login-error.416fe019b36a6327.webp)
#### चरण 4: पहुँचयोग्यताको साथ समावेशी बन्नुहोस्
@ -902,7 +902,7 @@ Agent मोड प्रयोग गरेर निम्न चुनौत
यहाँ स्टाइलिङ पछि ड्यासबोर्डको उदाहरण परिणाम कस्तो देखिन्छ:
![ड्यासबोर्डको स्टाइलिङ पछि उदाहरण परिणामको स्क्रिनसट](../../../../translated_images/ne/screen2.123c82a831a1d14a.png)
![ड्यासबोर्डको स्टाइलिङ पछि उदाहरण परिणामको स्क्रिनसट](../../../../translated_images/ne/screen2.123c82a831a1d14a.webp)
यसलाई ठ्याक्कै मेल गर्नुपर्छ भन्ने महसुस नगर्नुहोस् - यसलाई प्रेरणाको रूपमा प्रयोग गर्नुहोस् र यसलाई आफ्नो बनाउनुहोस्!

@ -186,7 +186,7 @@ mindmap
हामी हाम्रो टाउको घुमाउने सट्टा, **केन्द्रीयकृत स्टेट म्यानेजमेन्ट** प्रणाली सिर्जना गर्नेछौं। यसलाई सबै महत्त्वपूर्ण कुराहरूको जिम्मामा एकदमै व्यवस्थित व्यक्तिको रूपमा सोच्नुहोस्:
![HTML, प्रयोगकर्ता कार्यहरू र स्टेट बीचको डेटा प्रवाह देखाउने स्किमा](../../../../translated_images/ne/data-flow.fa2354e0908fecc8.png)
![HTML, प्रयोगकर्ता कार्यहरू र स्टेट बीचको डेटा प्रवाह देखाउने स्किमा](../../../../translated_images/ne/data-flow.fa2354e0908fecc8.webp)
```mermaid
flowchart TD

@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA:
**अपेक्षित परिणाम:**
यो असाइनमेन्ट पूरा गरेपछि, तपाईंको बैंकिङ एपमा पूर्ण रूपमा कार्यात्मक "ट्रान्जेक्सन थप्नुहोस्" सुविधा हुनेछ जसले व्यावसायिक रूपमा देखिन्छ र व्यवहार गर्दछ:
![उदाहरण "ट्रान्जेक्सन थप्नुहोस्" संवाद देखाउने स्क्रिनशट](../../../../translated_images/ne/dialog.93bba104afeb79f1.png)
![उदाहरण "ट्रान्जेक्सन थप्नुहोस्" संवाद देखाउने स्क्रिनशट](../../../../translated_images/ne/dialog.93bba104afeb79f1.webp)
## तपाईंको कार्यान्वयन परीक्षण गर्दै

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
यस परियोजनामा, तपाईंले एक काल्पनिक बैंक कसरी निर्माण गर्ने भनेर सिक्नुहुनेछ। यी पाठहरूले वेब एपको लेआउट कसरी बनाउने र रुटहरू प्रदान गर्ने, फारमहरू निर्माण गर्ने, स्टेट व्यवस्थापन गर्ने, र API बाट डेटा कसरी ल्याउने भन्ने निर्देशनहरू समावेश गर्दछ, जसबाट तपाईं बैंकको डेटा प्राप्त गर्न सक्नुहुन्छ।
| ![Screen1](../../../translated_images/ne/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/ne/screen2.123c82a831a1d14a.png) |
| ![Screen1](../../../translated_images/ne/screen1.baccbba0f1f93364.webp) | ![Screen2](../../../translated_images/ne/screen2.123c82a831a1d14a.webp) |
|--------------------------------|--------------------------------|
## पाठहरू

@ -185,7 +185,7 @@ VSCode.dev यी क्षमताहरूलाई तपाईंको ब
सबै कुरा लोड भएपछि, तपाईंले एक सुन्दर रूपमा सफा कार्यक्षेत्र देख्नुहुनेछ जुन तपाईंलाई महत्त्वपूर्ण कुरामा केन्द्रित राख्न डिजाइन गरिएको छ तपाईंको कोड!
![डिफल्ट VSCode.dev इन्टरफेस](../../../../translated_images/ne/default-vscode-dev.5d06881d65c1b323.png)
![डिफल्ट VSCode.dev इन्टरफेस](../../../../translated_images/ne/default-vscode-dev.5d06881d65c1b323.webp)
**यहाँ तपाईंको छिमेकको भ्रमण छ:**
- **एक्टिभिटी बार** (बायाँपट्टि पट्टी): तपाईंको मुख्य नेभिगेसन एक्सप्लोरर 📁, खोज 🔍, स्रोत नियन्त्रण 🌿, एक्सटेन्सन 🧩, र सेटिङ ⚙️ सहित
@ -233,7 +233,7 @@ flowchart TB
1. [vscode.dev](https://vscode.dev) मा जानुहोस् यदि तपाईं त्यहाँ हुनुहुन्न भने
2. स्वागत स्क्रीनमा "ओपन रिमोट रिपोजिटरी" बटन खोज्नुहोस् र यसलाई क्लिक गर्नुहोस्
![रिमोट रिपोजिटरी खोल्नुहोस्](../../../../translated_images/ne/open-remote-repository.bd9c2598b8949e7f.png)
![रिमोट रिपोजिटरी खोल्नुहोस्](../../../../translated_images/ne/open-remote-repository.bd9c2598b8949e7f.webp)
3. कुनै पनि GitHub रिपोजिटरी URL पेस्ट गर्नुहोस् (यो प्रयास गर्नुहोस्: `https://github.com/microsoft/Web-Dev-For-Beginners`)
4. इन्टर थिच्नुहोस् र जादू हेर्नुहोस्!
@ -242,7 +242,7 @@ flowchart TB
कोडिङ जादूगर जस्तो महसुस गर्न चाहनुहुन्छ? यो किबोर्ड सर्टकट प्रयास गर्नुहोस्: Ctrl+Shift+P (वा Mac मा Cmd+Shift+P) कमाण्ड प्यालेट खोल्न:
![कमाण्ड प्यालेट](../../../../translated_images/ne/palette-menu.4946174e07f42622.png)
![कमाण्ड प्यालेट](../../../../translated_images/ne/palette-menu.4946174e07f42622.webp)
**कमाण्ड प्यालेट भनेको तपाईंले गर्न सक्ने सबै कुराको लागि खोज इन्जिन जस्तै हो:**
- "ओपन रिमोट" टाइप गर्नुहोस् र यसले रिपोजिटरी ओपनर तपाईंको लागि फेला पार्छ
@ -304,7 +304,7 @@ flowchart TB
3. उपयुक्त एक्सटेन्सन सहित फाइल नाम प्रविष्ट गर्नुहोस् (`style.css`, `script.js`, `index.html`)
4. फाइल सिर्जना गर्न इन्टर थिच्नुहोस्
![नयाँ फाइल सिर्जना गर्दै](../../../../translated_images/ne/create-new-file.2814e609c2af9aeb.png)
![नयाँ फाइल सिर्जना गर्दै](../../../../translated_images/ne/create-new-file.2814e609c2af9aeb.webp)
**नामकरण परम्पराहरू:**
- फाइल उद्देश्य संकेत गर्ने वर्णनात्मक नामहरू प्रयोग गर्नुहोस्
@ -322,7 +322,7 @@ flowchart TB
2. टाइप गर्न सुरु गर्नुहोस् र VSCode.dev ले तपाईंलाई रंग, सुझाव, र त्रुटि स्पटिङको साथ मद्दत गरेको हेर्नुहोस्
3. Ctrl+S (Windows/Linux) वा Cmd+S (Mac) सँग आफ्नो काम बचत गर्नुहोस् यद्यपि यसले स्वचालित रूपमा पनि बचत गर्दछ!
![VSCode.dev मा फाइलहरू सम्पादन गर्दै](../../../../translated_images/ne/edit-a-file.52c0ee665ef19f08.png)
![VSCode.dev मा फाइलहरू सम्पादन गर्दै](../../../../translated_images/ne/edit-a-file.52c0ee665ef19f08.webp)
**कोड गर्दा हुने चाखलाग्दो कुराहरू:**
- तपाईंको कोड सु
@ -392,7 +392,7 @@ Extension Marketplace धेरै राम्रोसँग व्यवस
2. वरिपरि ब्राउज गर्नुहोस् वा केही विशेष खोज्नुहोस्
3. चासो लाग्ने कुनै पनि कुरामा क्लिक गरेर थप जानकारी प्राप्त गर्नुहोस्
![Extension marketplace interface](../../../../translated_images/ne/extensions.eca0e0c7f59a10b5.png)
![Extension marketplace interface](../../../../translated_images/ne/extensions.eca0e0c7f59a10b5.webp)
**त्यहाँ के देख्नुहुन्छ:**
@ -445,7 +445,7 @@ Extension Marketplace धेरै राम्रोसँग व्यवस
3. Dropdown बाट "Extension Settings" चयन गर्नुहोस्
4. तपाईको workflow अनुसार चीजहरू समायोजन गर्नुहोस्
![Customizing extension settings](../../../../translated_images/ne/extension-settings.21c752ae4f4cdb78.png)
![Customizing extension settings](../../../../translated_images/ne/extension-settings.21c752ae4f4cdb78.webp)
**तपाईले समायोजन गर्न चाहन सक्ने सामान्य कुराहरू:**
- तपाईको कोड कसरी फर्म्याट हुन्छ (tabs vs spaces, line length, आदि)

@ -78,7 +78,7 @@ VSCode.dev लाई रिपोजिटरी खोल्न कम्ति
4. कमिट सन्देश लेख्नुहोस्: "Add initial HTML structure"
5. "Commit new file" क्लिक गरेर परिवर्तनहरू सुरक्षित गर्नुहोस्
![GitHub मा आरम्भिक फाइल सिर्जना गर्दै](../../../../translated_images/ne/new-file-github.com.c886796d800e8056.png)
![GitHub मा आरम्भिक फाइल सिर्जना गर्दै](../../../../translated_images/ne/new-file-github.com.c886796d800e8056.webp)
**यो आरम्भिक सेटअपले के पूरा गर्दछ:**
- HTML5 कागजात संरचना सेम्यान्टिक तत्वहरूसँग स्थापना गर्दछ
@ -104,7 +104,7 @@ VSCode.dev लाई रिपोजिटरी खोल्न कम्ति
**सफलता संकेतक**: तपाईंले आफ्नो परियोजना फाइलहरू Explorer साइडबारमा देख्नुहुनेछ र `index.html` मुख्य सम्पादक क्षेत्रमा सम्पादनको लागि उपलब्ध हुनेछ।
![VSCode.dev मा परियोजना लोड गरिएको](../../../../translated_images/ne/project-on-vscode.dev.e79815a9a95ee7fe.png)
![VSCode.dev मा परियोजना लोड गरिएको](../../../../translated_images/ne/project-on-vscode.dev.e79815a9a95ee7fe.webp)
**इन्टरफेसमा तपाईंले के देख्नुहुनेछ:**
- **Explorer साइडबार**: **तपाईंको रिपोजिटरी फाइलहरू र फोल्डर संरचना देखाउँछ**
@ -448,7 +448,7 @@ li:before {
**स्थापनापछि तत्काल परिणामहरू:**
CodeSwing स्थापना भएपछि, तपाईंले आफ्नो रिजुम वेबसाइटको लाइभ पूर्वावलोकन सम्पादकमा देख्नुहुनेछ। यसले तपाईंलाई परिवर्तनहरू गर्दा तपाईंको साइट कस्तो देखिन्छ भन्ने देख्न अनुमति दिन्छ।
![CodeSwing एक्सटेन्सनले लाइभ पूर्वावलोकन देखाउँदै](../../../../translated_images/ne/after-codeswing-extension-pb.0ebddddcf73b5509.png)
![CodeSwing एक्सटेन्सनले लाइभ पूर्वावलोकन देखाउँदै](../../../../translated_images/ne/after-codeswing-extension-pb.0ebddddcf73b5509.webp)
**सुधारिएको इन्टरफेसको समझ:**
- **स्प्लिट भ्यू**: **तपाईंको कोड एक पक्षमा र लाइभ पूर्वावलोकन अर्को पक्षमा देखाउँछ**

@ -61,7 +61,7 @@ print(response.choices[0].message.content)
तपाईंको समाप्त परियोजना यस्तो देखिनेछ:
![च्याट एप इन्टरफेसमा प्रयोगकर्ता र एआई सहायक बीचको संवाद देखाउँदै](../../../translated_images/ne/screenshot.0a1ee0d123df681b.png)
![च्याट एप इन्टरफेसमा प्रयोगकर्ता र एआई सहायक बीचको संवाद देखाउँदै](../../../translated_images/ne/screenshot.0a1ee0d123df681b.webp)
## 🗺️ एआई अनुप्रयोग विकासको माध्यमबाट तपाईंको सिक्ने यात्रा
@ -1628,14 +1628,14 @@ mindmap
- **[Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)** मा जानुहोस्
- **शीर्ष-दायाँ कुनामा "Use this template" क्लिक गर्नुहोस्** (पक्का गर्नुहोस् कि तपाईं GitHub मा लगइन हुनुहुन्छ)
![टेम्प्लेटबाट सिर्जना गर्ने इन्टरफेस जसमा हरियो "Use this template" बटन देखिन्छ](../../../translated_images/ne/template.67ad477109d29a2b.png)
![टेम्प्लेटबाट सिर्जना गर्ने इन्टरफेस जसमा हरियो "Use this template" बटन देखिन्छ](../../../translated_images/ne/template.67ad477109d29a2b.webp)
**चरण २: Codespaces सुरु गर्नुहोस्**
- **तपाईंको नयाँ सिर्जित रिपोजिटरी खोल्नुहोस्**
- **हरियो "Code" बटन क्लिक गर्नुहोस् र "Codespaces" चयन गर्नुहोस्**
- **"Create codespace on main" चयन गर्नुहोस्** ताकि तपाईंको विकास वातावरण सुरु होस्
![Codespace सिर्जना गर्ने इन्टरफेस जसमा क्लाउड विकास वातावरण सुरु गर्ने विकल्पहरू छन्](../../../translated_images/ne/codespace.bcecbdf5d2747d3d.png)
![Codespace सिर्जना गर्ने इन्टरफेस जसमा क्लाउड विकास वातावरण सुरु गर्ने विकल्पहरू छन्](../../../translated_images/ne/codespace.bcecbdf5d2747d3d.webp)
**चरण ३: वातावरण कन्फिगरेसन**
तपाईंको Codespace लोड भएपछि, तपाईंले पहुँच पाउनुहुनेछ:

@ -58,13 +58,13 @@ Azure AI Foundry Discord समुदायमा सामेल हुनु
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) मा जानुहोस् र सुरु गर्नुहोस्!
![Background](../../translated_images/ne/background.148a8d43afde5730.png)
![Background](../../translated_images/ne/background.148a8d43afde5730.webp)
- आधारदेखि RAG सम्म सबै कुरा समेट्ने पाठहरू।
- GenAI र हाम्रो सहायक एप प्रयोग गरी ऐतिहासिक पात्रहरूसँग अन्तरक्रिया गर्नुहोस्।
- रमाइलो र आकर्षक कथावस्तु, तपाईं समय यात्रा गर्दै हुनुहुन्छ!
![character](../../translated_images/ne/character.5c0dd8e067ffd693.png)
![character](../../translated_images/ne/character.5c0dd8e067ffd693.webp)
प्रत्येक पाठमा असाइन्मेन्ट पूरा गर्ने, ज्ञान जाँच गर्ने र चुनौतीहरू छन् जसले तपाईंलाई यी विषयहरू सिक्न मार्गनिर्देशन गर्छन्:
- प्रॉम्प्टिङ र प्रॉम्प्ट इन्जिनियरिङ
@ -100,7 +100,7 @@ Azure AI Foundry Discord समुदायमा सामेल हुनु
तपाईंले सिर्जना गरेको यस रिपोजिटरीको प्रतिलिपिमा, **Code** बटन क्लिक गरी **Open with Codespaces** चयन गर्नुहोस्। यसले तपाईँका लागि नयाँ Codespace सिर्जना गर्नेछ।
![Codespace](../../translated_images/ne/createcodespace.0238bbf4d7a8d955.png)
![Codespace](../../translated_images/ne/createcodespace.0238bbf4d7a8d955.webp)
#### आफ्नै कम्प्युटरमा यस पाठ्यक्रम चलाउन

@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA:
- Moodle Cloud मा सीमित Common Cartridge समर्थन छ। माथिको Moodle फाइललाई प्राथमिकता दिनुहोस्, जसलाई Canvas मा पनि अपलोड गर्न सकिन्छ।
- आयातपछि, आफ्नो टर्म तालिकासँग मेल खाने गरी मोड्युलहरू, म्यादहरू, र क्विज सेटिङहरू समीक्षा गर्नुहोस्।
![Moodle](../../translated_images/ne/moodle.94eb93d714a50cb2.png)
![Moodle](../../translated_images/ne/moodle.94eb93d714a50cb2.webp)
> Moodle कक्षामा पाठ्यक्रम
![Canvas](../../translated_images/ne/canvas.fbd605ff8e5b8aff.png)
![Canvas](../../translated_images/ne/canvas.fbd605ff8e5b8aff.webp)
> Canvas मा पाठ्यक्रम
### रिपोजिटरीलाई प्रत्यक्ष रूपमा प्रयोग गर्नुहोस् (Classroom बिना)

@ -17,7 +17,7 @@ Luister, ik snap het helemaal als programmeren nu nog intimiderend lijkt. Toen i
Vandaag gaan we de geweldige tools verkennen die moderne webontwikkeling niet alleen mogelijk maken, maar ook verslavend leuk. Ik heb het over dezelfde editors, browsers en workflows die ontwikkelaars bij Netflix, Spotify en je favoriete indie-appstudio elke dag gebruiken. En hier komt het deel dat je een vreugdedansje laat doen: de meeste van deze professionele, industrienorm-tools zijn helemaal gratis!
![Intro Programmering](../../../../translated_images/nl/webdev101-programming.d6e3f98e61ac4bff.png)
![Intro Programmering](../../../../translated_images/nl/webdev101-programming.d6e3f98e61ac4bff.webp)
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -17,7 +17,7 @@ Ik weet dat dit in het begin misschien wat overweldigend lijkt ik herinner m
We gaan deze reis samen maken, stap voor stap. Geen haast, geen druk alleen jij, ik, en een paar echt coole tools die je nieuwe beste vrienden gaan worden!
![Intro tot GitHub](../../../../translated_images/nl/webdev101-github.8846d7971abef6f9.png)
![Intro tot GitHub](../../../../translated_images/nl/webdev101-github.8846d7971abef6f9.webp)
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -604,7 +604,7 @@ Laten we eerst een repository (of **repo**) op GitHub vinden die je interesseert
✅ Een goede manier om 'beginner-vriendelijke' repos te vinden is door [te zoeken op de tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
![Een repo lokaal kopiëren](../../../../translated_images/nl/clone_repo.5085c48d666ead57.png)
![Een repo lokaal kopiëren](../../../../translated_images/nl/clone_repo.5085c48d666ead57.webp)
Er zijn verschillende manieren om code te kopiëren. Een manier is om de inhoud van de repository te "clonen", met behulp van HTTPS, SSH, of de GitHub CLI (Command Line Interface).

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# Toegankelijke Webpagina's Maken
![Alles Over Toegankelijkheid](../../../../translated_images/nl/webdev101-a11y.8ef3025c858d897a.png)
![Alles Over Toegankelijkheid](../../../../translated_images/nl/webdev101-a11y.8ef3025c858d897a.webp)
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScript Basisprincipes: Gegevenstypen
![JavaScript Basisprincipes - Gegevenstypen](../../../../translated_images/nl/webdev101-js-datatypes.4cc470179730702c.png)
![JavaScript Basisprincipes - Gegevenstypen](../../../../translated_images/nl/webdev101-js-datatypes.4cc470179730702c.webp)
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScript Basis: Methoden en Functies
![JavaScript Basis - Functies](../../../../translated_images/nl/webdev101-js-functions.be049c4726e94f8b.png)
![JavaScript Basis - Functies](../../../../translated_images/nl/webdev101-js-functions.be049c4726e94f8b.webp)
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScript Basis: Beslissingen nemen
![JavaScript Basis - Beslissingen nemen](../../../../translated_images/nl/webdev101-js-decisions.69e1b20f272dd1f0.png)
![JavaScript Basis - Beslissingen nemen](../../../../translated_images/nl/webdev101-js-decisions.69e1b20f272dd1f0.webp)
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScript Basis: Arrays en Lussen
![JavaScript Basis - Arrays](../../../../translated_images/nl/webdev101-js-arrays.439d7528b8a29455.png)
![JavaScript Basis - Arrays](../../../../translated_images/nl/webdev101-js-arrays.439d7528b8a29455.webp)
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -26,7 +26,7 @@ journey
Build terrarium: 5: Student
```
![Introductie tot HTML](../../../../translated_images/nl/webdev101-html.4389c2067af68e98.png)
![Introductie tot HTML](../../../../translated_images/nl/webdev101-html.4389c2067af68e98.webp)
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, of HyperText Markup Language, is de basis van elke website die je ooit hebt bezocht. Zie HTML als het skelet dat structuur geeft aan webpagina's het bepaalt waar de inhoud komt, hoe het georganiseerd is en wat elk onderdeel betekent. Terwijl CSS later je HTML "aankleedt" met kleuren en lay-outs, en JavaScript het tot leven brengt met interactiviteit, biedt HTML de essentiële structuur die alles mogelijk maakt.
@ -88,7 +88,7 @@ Je maakt een speciale map voor je terrariumproject en voegt je eerste HTML-besta
4. Klik in het Explorer-paneel op het pictogram "New File"
5. Noem je bestand `index.html`
![VS Code Explorer toont het maken van een nieuw bestand](../../../../translated_images/nl/vs-code-index.e2986cf919471eb9.png)
![VS Code Explorer toont het maken van een nieuw bestand](../../../../translated_images/nl/vs-code-index.e2986cf919471eb9.webp)
**Optie 2: Gebruik Terminalcommando's**
```bash

@ -30,7 +30,7 @@ journey
Glass reflections: 5: Student
```
![Introductie tot CSS](../../../../translated_images/nl/webdev101-css.3f7af5991bf53a20.png)
![Introductie tot CSS](../../../../translated_images/nl/webdev101-css.3f7af5991bf53a20.webp)
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
Weet je nog hoe je HTML-terrarium er vrij basic uitzag? Met CSS transformeren we die eenvoudige structuur tot iets visueel aantrekkelijks.
@ -205,7 +205,7 @@ body {
Open de ontwikkelaarstools van je browser (F12), ga naar het tabblad Elements en inspecteer je `<h1>`-element. Je zult zien dat het de lettertypefamilie van het body-element erft:
![geërfd lettertype](../../../../translated_images/nl/1.cc07a5cbe114ad1d.png)
![geërfd lettertype](../../../../translated_images/nl/1.cc07a5cbe114ad1d.webp)
**Experimenteren**: Probeer andere overerfbare eigenschappen in te stellen op `<body>` zoals `color`, `line-height` of `text-align`. Wat gebeurt er met je koptekst en andere elementen?
@ -599,7 +599,7 @@ Klaar om je terrarium te verbeteren met realistische glans op glas? Deze technie
Je gaat subtiele highlights creëren die simuleren hoe licht reflecteert op glasoppervlakken. Deze aanpak is vergelijkbaar met hoe Renaissance-schilders zoals Jan van Eyck licht en reflectie gebruikten om geschilderd glas driedimensionaal te laten lijken. Dit is wat je wilt bereiken:
![finished terrarium](../../../../translated_images/nl/terrarium-final.2f07047ffc597d0a.png)
![finished terrarium](../../../../translated_images/nl/terrarium-final.2f07047ffc597d0a.webp)
**Jouw uitdaging:**
- **Creëer** subtiele witte of lichtgekleurde ovale vormen voor de glans op het glas

@ -26,7 +26,7 @@ journey
Complete terrarium: 5: Student
```
![DOM en een closure](../../../../translated_images/nl/webdev101-js.10280393044d7eaa.png)
![DOM en een closure](../../../../translated_images/nl/webdev101-js.10280393044d7eaa.webp)
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
Welkom bij een van de meest boeiende aspecten van webontwikkeling - interactief maken! Het Document Object Model (DOM) is als een brug tussen je HTML en JavaScript, en vandaag gaan we het gebruiken om je terrarium tot leven te brengen. Toen Tim Berners-Lee de eerste webbrowser creëerde, stelde hij zich een web voor waar documenten dynamisch en interactief konden zijn - de DOM maakt die visie mogelijk.
@ -105,7 +105,7 @@ flowchart TD
style Q fill:#ffebee
```
![DOM boomrepresentatie](../../../../translated_images/nl/dom-tree.7daf0e763cbbba92.png)
![DOM boomrepresentatie](../../../../translated_images/nl/dom-tree.7daf0e763cbbba92.webp)
> Een representatie van de DOM en de HTML-markup die ernaar verwijst. Van [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -150,7 +150,7 @@ flowchart LR
> 💡 **Closures begrijpen**: Closures zijn een belangrijk onderwerp in JavaScript, en veel ontwikkelaars gebruiken ze jarenlang voordat ze alle theoretische aspecten volledig begrijpen. Vandaag richten we ons op praktische toepassing - je zult zien dat closures natuurlijk ontstaan terwijl we onze interactieve functies bouwen. Begrip zal zich ontwikkelen naarmate je ziet hoe ze echte problemen oplossen.
![DOM boomrepresentatie](../../../../translated_images/nl/dom-tree.7daf0e763cbbba92.png)
![DOM boomrepresentatie](../../../../translated_images/nl/dom-tree.7daf0e763cbbba92.webp)
> Een representatie van de DOM en de HTML-markup die ernaar verwijst. Van [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -598,7 +598,7 @@ Test nu jouw interactieve terrarium! Open je `index.html`-bestand in een webbrow
- **Ondersteuning voor meerdere apparaten**: Werkt op desktop en mobiel
- **Prestatiebewust**: Geen geheugenlekken of overbodige berekeningen
![afgewerkt terrarium](../../../../translated_images/nl/terrarium-final.0920f16e87c13a84.png)
![afgewerkt terrarium](../../../../translated_images/nl/terrarium-final.0920f16e87c13a84.webp)
---

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Een kleine drag-and-drop code-meditatie. Met een beetje HTML, JS en CSS kun je een webinterface bouwen, deze stylen en interactie toevoegen.
![mijn terrarium](../../../../translated_images/nl/screenshot_gray.0c796099a1f9f25e.png)
![mijn terrarium](../../../../translated_images/nl/screenshot_gray.0c796099a1f9f25e.webp)
## Credits

@ -26,7 +26,7 @@ journey
Polish experience: 5: Student
```
![Browser sketchnote](../../../../translated_images/nl/browser.60317c9be8b7f84a.jpg)
![Browser sketchnote](../../../../translated_images/nl/browser.60317c9be8b7f84a.webp)
> Sketchnote door [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## Pre-Les Quiz
@ -79,7 +79,7 @@ Dit proces weerspiegelt hoe de eerste webbrowser, WorldWideWeb, werd ontworpen d
**Een beetje geschiedenis**: De eerste browser heette 'WorldWideWeb' en werd in 1990 gemaakt door Sir Timothy Berners-Lee.
![vroegtijdige browsers](../../../../translated_images/nl/earlybrowsers.d984b711cdf3a42d.jpg)
![vroegtijdige browsers](../../../../translated_images/nl/earlybrowsers.d984b711cdf3a42d.webp)
> Enkele vroegtijdige browsers, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Hoe Browsers Webinhoud Verwerken
@ -198,7 +198,7 @@ quadrantChart
Het begrijpen van het installatieproces van extensies helpt je de gebruikerservaring te anticiperen wanneer mensen je extensie installeren. Het installatieproces is gestandaardiseerd in moderne browsers, met kleine variaties in interfaceontwerp.
![screenshot van de Edge-browser die de open edge://extensions-pagina en het open instellingenmenu toont](../../../../translated_images/nl/install-on-edge.d68781acaf0b3d3d.png)
![screenshot van de Edge-browser die de open edge://extensions-pagina en het open instellingenmenu toont](../../../../translated_images/nl/install-on-edge.d68781acaf0b3d3d.webp)
> **Belangrijk**: Zorg ervoor dat je ontwikkelaarsmodus inschakelt en extensies van andere winkels toestaat bij het testen van je eigen extensies.
@ -313,10 +313,10 @@ Dit volgt het principe van progressieve onthulling dat sinds de vroege dagen van
### Overzicht van Extensie Weergaven
**Setup Weergave** - Configuratie voor eerste gebruik:
![screenshot van de voltooide extensie geopend in een browser, met een formulier met invoervelden voor regio en API-sleutel.](../../../../translated_images/nl/1.b6da8c1394b07491.png)
![screenshot van de voltooide extensie geopend in een browser, met een formulier met invoervelden voor regio en API-sleutel.](../../../../translated_images/nl/1.b6da8c1394b07491.webp)
**Resultaten Weergave** - Weergave van CO2-voetafdrukgegevens:
![screenshot van de voltooide extensie die waarden toont voor CO2-gebruik en percentage fossiele brandstoffen voor de regio US-NEISO.](../../../../translated_images/nl/2.1dae52ff08042246.png)
![screenshot van de voltooide extensie die waarden toont voor CO2-gebruik en percentage fossiele brandstoffen voor de regio US-NEISO.](../../../../translated_images/nl/2.1dae52ff08042246.webp)
### Het Configuratieformulier Bouwen

@ -268,7 +268,7 @@ stateDiagram-v2
ClearStorage --> FirstTime: Back to setup
```
![Local storage pane](../../../../translated_images/nl/localstorage.472f8147b6a3f8d1.png)
![Local storage pane](../../../../translated_images/nl/localstorage.472f8147b6a3f8d1.webp)
> ⚠️ **Beveiligingsoverweging**: In productie-applicaties brengt het opslaan van API-sleutels in LocalStorage beveiligingsrisico's met zich mee, omdat JavaScript toegang heeft tot deze gegevens. Voor leerdoeleinden werkt deze aanpak prima, maar echte applicaties zouden veilige server-side opslag moeten gebruiken voor gevoelige inloggegevens.

@ -126,7 +126,7 @@ Om Developer Tools in Edge te openen, klik je op die drie puntjes rechtsboven, g
Laten we dit uitproberen. Open een website (Microsoft.com werkt goed hiervoor) en klik op die 'Opnemen'-knop. Vernieuw nu de pagina en bekijk hoe de profiler alles vastlegt wat er gebeurt. Wanneer je stopt met opnemen, zie je een gedetailleerde uitsplitsing van hoe de browser de site 'script', 'rendert' en 'schildert'. Het doet me denken aan hoe de missiecontrole elk systeem monitort tijdens een raketlancering - je krijgt realtime gegevens over precies wat er gebeurt en wanneer.
![Edge profiler](../../../../translated_images/nl/profiler.5a4a62479c5df01c.png)
![Edge profiler](../../../../translated_images/nl/profiler.5a4a62479c5df01c.webp)
✅ De [Microsoft Documentatie](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) heeft veel meer details als je dieper wilt duiken.
@ -136,11 +136,11 @@ Selecteer elementen van de profieltijdlijn om in te zoomen op gebeurtenissen die
Krijg een momentopname van de prestaties van je pagina door een deel van de profieltijdlijn te selecteren en naar het samenvattingspaneel te kijken:
![Edge profiler snapshot](../../../../translated_images/nl/snapshot.97750180ebcad737.png)
![Edge profiler snapshot](../../../../translated_images/nl/snapshot.97750180ebcad737.webp)
Controleer het Event Log-paneel om te zien of een gebeurtenis langer dan 15 ms duurde:
![Edge event log](../../../../translated_images/nl/log.804026979f3707e0.png)
![Edge event log](../../../../translated_images/nl/log.804026979f3707e0.webp)
✅ Leer je profiler kennen! Open de ontwikkelaarstools op deze site en kijk of er knelpunten zijn. Wat is het langzaamst ladende bestand? Het snelste?

@ -23,7 +23,7 @@ Deze extensie kan ad hoc door een gebruiker worden opgeroepen zodra een API-sleu
### Credits
![een groene browserextensie](../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.png)
![een groene browserextensie](../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.webp)
## Credits

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Gebruik de CO2 Signal API van tmrow om het elektriciteitsverbruik bij te houden en bouw een browserextensie zodat je direct in je browser een herinnering hebt over hoe zwaar het elektriciteitsverbruik in jouw regio is. Door deze extensie ad hoc te gebruiken, kun je beter beslissingen nemen over je activiteiten op basis van deze informatie.
![extensie screenshot](../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.png)
![extensie screenshot](../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.webp)
## Aan de slag
@ -31,7 +31,7 @@ npm run build
Om de extensie op Edge te installeren, gebruik je het menu met de 'drie stippen' rechtsboven in de browser om het Extensies-paneel te vinden. Selecteer daar 'Load Unpacked' om een nieuwe extensie te laden. Open de 'dist'-map wanneer hierom wordt gevraagd en de extensie wordt geladen. Om het te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([hier via e-mail verkrijgen](https://www.co2signal.com/) - voer je e-mailadres in het veld op deze pagina in) en de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO').
![installeren](../../../../translated_images/nl/install-on-edge.78634f02842c4828.png)
![installeren](../../../../translated_images/nl/install-on-edge.78634f02842c4828.webp)
Zodra de API-sleutel en regio zijn ingevoerd in de interface van de extensie, zou de gekleurde stip in de browserextensiebalk moeten veranderen om het energieverbruik in jouw regio weer te geven. Het geeft je een aanwijzing over welke energie-intensieve activiteiten geschikt zijn om uit te voeren. Het concept achter dit 'stip'-systeem is geïnspireerd door de [Energy Lollipop extensie](https://energylollipop.com/) voor emissies in Californië.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Met behulp van de CO2 Signal API van tmrow om het elektriciteitsverbruik te volgen, maak je een browserextensie zodat je direct in je browser een herinnering kunt krijgen over het elektriciteitsverbruik in jouw regio. Het gebruik van deze ad-hoc extensie helpt je om je activiteiten te beoordelen op basis van deze informatie.
![extensie screenshot](../../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.png)
![extensie screenshot](../../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.webp)
## Aan de slag
@ -31,7 +31,7 @@ npm run build
Om de extensie op Edge te installeren, gebruik je het menu met de 'drie puntjes' in de rechterbovenhoek van de browser om het Extensies-paneel te vinden. Selecteer daar 'Uitgepakte extensie laden' om een nieuwe extensie te laden. Open de map 'dist' wanneer daarom wordt gevraagd, en de extensie wordt geladen. Om de extensie te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([verkrijg er hier een via e-mail](https://www.co2signal.com/) - voer je e-mailadres in het veld op deze pagina in) en de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO').
![installatie](../../../../../translated_images/nl/install-on-edge.78634f02842c4828.png)
![installatie](../../../../../translated_images/nl/install-on-edge.78634f02842c4828.webp)
Zodra de API-sleutel en de regio zijn ingevoerd in de extensie-interface, zou het gekleurde puntje in de extensiebalk van de browser moeten veranderen om het energieverbruik in jouw regio weer te geven. Dit geeft je een indicatie van welke energie-intensieve activiteiten op dat moment geschikt zijn. Het concept achter dit 'puntensysteem' is geïnspireerd door de [Energy Lollipop extensie](https://energylollipop.com/) voor emissies in Californië.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Met behulp van de CO2 Signal API van tmrow om het elektriciteitsverbruik te volgen, bouwen we een browser-extensie die je eraan herinnert hoe zwaar het elektriciteitsverbruik in jouw regio is. Door deze extensie te gebruiken, kun je op basis van deze informatie beslissingen nemen over je activiteiten.
![Extensie Screenshot](../../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.png)
![Extensie Screenshot](../../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.webp)
## Aan de slag
@ -31,7 +31,7 @@ npm run build
Om te installeren in Edge, gebruik het 'drie-puntjes'-menu in de rechterbovenhoek van de browser om het extensiepaneel te vinden. Kies daar 'Ongepakte extensie laden'. Open de 'dist'-map in de prompt en de extensie wordt geladen. Om het te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([verkrijgbaar via e-mail hier](https://www.co2signal.com/) - voer je e-mailadres in het vak op die pagina in) en [de code voor jouw regio](http://api.electricitymap.org/v3/zones) van [Electricity Map](https://www.electricitymap.org/map) (bijvoorbeeld, in Boston gebruik ik 'US-NEISO').
![installeren](../../../../../translated_images/nl/install-on-edge.78634f02842c4828.png)
![installeren](../../../../../translated_images/nl/install-on-edge.78634f02842c4828.webp)
Zodra de API-sleutel en regio in de extensie-interface zijn ingevoerd, zou de gekleurde stip in de browser-extensiebalk moeten veranderen om het energieverbruik in jouw regio weer te geven. Dit geeft je een indicatie van welke energie-intensieve activiteiten geschikt zijn op dat moment. Het idee achter dit 'stip'-systeem is geïnspireerd door de [Energy Lollipop-extensie](https://energylollipop.com/) voor emissies in Californië.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
We zullen de Signal CO2 API van tmrow gebruiken om het elektriciteitsverbruik te monitoren en een browserextensie te maken. Zo kun je direct in je browser een herinnering krijgen over hoe zwaar het elektriciteitsverbruik in jouw regio is. Het gebruik van deze op maat gemaakte extensie helpt je om je activiteiten te evalueren op basis van deze informatie.
![screenshot van de extensie](../../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.png)
![screenshot van de extensie](../../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.webp)
## Aan de Slag
@ -31,7 +31,7 @@ npm run build
Om de extensie in Edge te installeren, gebruik je het menu met de "drie puntjes" in de rechterbovenhoek van de browser om het Extensies-paneel te vinden. Als het nog niet is ingeschakeld, zet dan de Ontwikkelaarsmodus aan (linksonder). Selecteer "Uitgepakte extensie laden" om een nieuwe extensie te laden. Open de map "dist" in het prompt, en de extensie wordt geladen. Om het te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API (je kunt er [hier via e-mail een krijgen](https://www.co2signal.com/) - voer je e-mailadres in het veld op deze pagina in) en de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [elektriciteitskaart](https://www.electricitymap.org/map) (bijvoorbeeld, in Boston is dat "US-NEISO").
![installatie](../../../../../translated_images/nl/install-on-edge.78634f02842c4828.png)
![installatie](../../../../../translated_images/nl/install-on-edge.78634f02842c4828.webp)
Zodra de API-sleutel en de regio zijn ingevoerd in de interface van de extensie, zou het gekleurde puntje in de browserextensiebalk moeten veranderen om het energieverbruik van de regio weer te geven. Het biedt ook een aanwijzing over welke energie-intensieve activiteiten geschikt zijn om uit te voeren. Het concept achter dit "puntensysteem" is geïnspireerd door de [Energy Lollipop-extensie](https://energylollipop.com/) voor emissies in Californië.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Bouw een browserextensie die, met behulp van de CO2 Signal API van tmrow, het energieverbruik in jouw regio bijhoudt en dit als een herinnering op je browser weergeeft. Door deze extensie ad-hoc te gebruiken, kun je je activiteiten baseren op deze informatie.
![extension screenshot](../../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.png)
![extension screenshot](../../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.webp)
## Aan de slag
@ -31,7 +31,7 @@ npm run build
Om de extensie in Edge te installeren, ga je naar het "drie stippen"-menu rechtsboven in de browser en zoek je het paneel "Extensies". Kies daar "Load Unpacked" en laad de nieuwe extensie. Wanneer je wordt gevraagd, open je de "dist"-map om de extensie te laden. Om de extensie te gebruiken, heb je een API-sleutel van de CO2 Signal API nodig ([hier via e-mail verkrijgen](https://www.co2signal.com/) - voer je e-mailadres in het vak op die pagina in) en een [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (bijvoorbeeld, voor Boston gebruik je 'US-NEISO').
![installing](../../../../../translated_images/nl/install-on-edge.78634f02842c4828.png)
![installing](../../../../../translated_images/nl/install-on-edge.78634f02842c4828.webp)
Wanneer je de API-sleutel en regio invoert in de extensie-interface, verandert de gekleurde stip die in de extensiebalk van je browser wordt weergegeven. Deze stip weerspiegelt het energieverbruik in jouw regio en geeft aan welke activiteiten geschikt zijn op basis van het energieverbruik. Het concept van dit "stip"-systeem is geïnspireerd door de [Energy Lollipop extension](https://energylollipop.com/) voor emissies in Californië.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Gebruik de CO2 Signal API van tmrow om het elektriciteitsverbruik te monitoren en bouw een browserextensie waarmee je waarschuwingen kunt ontvangen over hoe zwaar het elektriciteitsverbruik in jouw regio is. Het gebruik van deze extensie helpt je om je activiteiten beter af te stemmen op deze informatie.
![screenshot van browserextensie](../../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.png)
![screenshot van browserextensie](../../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.webp)
## Aan de Slag
@ -31,7 +31,7 @@ npm run build
Om de extensie in Edge te installeren, gebruik je het menu met de 'drie puntjes' in de rechterbovenhoek van de browser om het Extensies-paneel te vinden. Kies daar 'Load Unpacked' om een nieuwe extensie te laden. Open de 'dist'-map wanneer hierom wordt gevraagd en de extensie wordt geladen. Om de extensie te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([verkrijg er een via e-mail hier](https://www.co2signal.com/) - voer je e-mailadres in het veld op deze pagina in) en [de code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO').
![bezig met downloaden](../../../../../translated_images/nl/install-on-edge.78634f02842c4828.png)
![bezig met downloaden](../../../../../translated_images/nl/install-on-edge.78634f02842c4828.webp)
Zodra de API-sleutel en regio zijn ingevoerd in de interface van de extensie, zal de gekleurde stip in de browserextensiebalk veranderen om het energieverbruik in jouw regio weer te geven en je een indicatie geven van welke zware activiteiten geschikt zijn om te doen. Het idee achter dit 'stip'-systeem is geïnspireerd door [de Energy Lollipop browserextensie](https://energylollipop.com/) voor de uitstoot in Californië.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Met behulp van de CO2 Signal API van tmrow om elektriciteitsgebruik bij te houden, bouw je een browserextensie zodat je direct in je browser een herinnering hebt over hoe zwaar het elektriciteitsgebruik in jouw regio is. Door deze extensie ad hoc te gebruiken, kun je beter beslissingen nemen over je activiteiten op basis van deze informatie.
![extensie screenshot](../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.png)
![extensie screenshot](../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.webp)
## Aan de slag
@ -31,7 +31,7 @@ npm run build
Om de extensie op Edge te installeren, gebruik je het menu met de 'drie puntjes' rechtsboven in de browser om het Extensiepaneel te vinden. Selecteer daar 'Load Unpacked' om een nieuwe extensie te laden. Open de map 'dist' wanneer daarom wordt gevraagd, en de extensie wordt geladen. Om de extensie te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([hier aanvragen via e-mail](https://www.co2signal.com/) - voer je e-mailadres in op deze pagina) en de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO').
![installeren](../../../../translated_images/nl/install-on-edge.78634f02842c4828.png)
![installeren](../../../../translated_images/nl/install-on-edge.78634f02842c4828.webp)
Zodra de API-sleutel en regio zijn ingevoerd in de interface van de extensie, zou de gekleurde stip in de browserextensiebalk moeten veranderen om het energiegebruik in jouw regio weer te geven. Het geeft je ook een aanwijzing over welke energie-intensieve activiteiten geschikt zijn om te doen. Het idee achter dit 'stip'-systeem is geïnspireerd door de [Energy Lollipop-extensie](https://energylollipop.com/) voor emissies in Californië.

@ -108,7 +108,7 @@ quadrantChart
UI Elements: [0.9, 0.1]
```
![het raster van de canvas](../../../../translated_images/nl/canvas_grid.5f209da785ded492.png)
![het raster van de canvas](../../../../translated_images/nl/canvas_grid.5f209da785ded492.webp)
> Afbeelding van [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Om op het canvas-element te tekenen, volg je hetzelfde drie-stappenproces dat de basis vormt van alle canvasgraphics. Zodra je dit een paar keer hebt gedaan, wordt het een tweede natuur:
@ -329,11 +329,11 @@ Je gaat een webpagina maken met een Canvas-element. Het moet een zwart scherm va
- Heldenschip
![Heldenschip](../../../../translated_images/nl/player.dd24c1afa8c71e9b.png)
![Heldenschip](../../../../translated_images/nl/player.dd24c1afa8c71e9b.webp)
- 5*5 monster
![Monsterschip](../../../../translated_images/nl/enemyShip.5df2a822c16650c2.png)
![Monsterschip](../../../../translated_images/nl/enemyShip.5df2a822c16650c2.webp)
### Aanbevolen stappen om te beginnen met ontwikkelen
@ -470,7 +470,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
Het eindresultaat zou er zo uit moeten zien:
![Zwart scherm met een held en 5*5 monsters](../../../../translated_images/nl/partI-solution.36c53b48c9ffae2a.png)
![Zwart scherm met een held en 5*5 monsters](../../../../translated_images/nl/partI-solution.36c53b48c9ffae2a.webp)
## Oplossing

@ -160,7 +160,7 @@ sequenceDiagram
```
- **Puntensysteem**: Elk vernietigd vijandelijk schip levert 100 punten op (ronde getallen zijn gemakkelijker voor spelers om mentaal te berekenen). De score wordt weergegeven in de linkerbenedenhoek.
- **Leventeller**: Je held begint met drie levens - een standaard die door vroege arcadespellen werd vastgesteld om uitdaging en speelbaarheid in balans te brengen. Elke botsing met een vijand kost één leven. We tonen de resterende levens in de rechterbenedenhoek met scheepsiconen ![life image](../../../../translated_images/nl/life.6fb9f50d53ee0413.png).
- **Leventeller**: Je held begint met drie levens - een standaard die door vroege arcadespellen werd vastgesteld om uitdaging en speelbaarheid in balans te brengen. Elke botsing met een vijand kost één leven. We tonen de resterende levens in de rechterbenedenhoek met scheepsiconen ![life image](../../../../translated_images/nl/life.6fb9f50d53ee0413.webp).
## Laten we beginnen met bouwen!

@ -652,7 +652,7 @@ sequenceDiagram
Het gebruik van `history.pushState` creëert nieuwe invoeren in de navigatiegeschiedenis van de browser. Je kunt dat controleren door de *terugknop* van je browser ingedrukt te houden, het zou er ongeveer zo uit moeten zien:
![Screenshot van navigatiegeschiedenis](../../../../translated_images/nl/history.7fdabbafa521e064.png)
![Screenshot van navigatiegeschiedenis](../../../../translated_images/nl/history.7fdabbafa521e064.webp)
Als je een paar keer op de terugknop klikt, zie je dat de huidige URL verandert en de geschiedenis wordt bijgewerkt, maar dezelfde template blijft worden weergegeven.

@ -295,7 +295,7 @@ Laten we eerst observeren wat er gebeurt bij een basisformulierverzending:
2. Observeer de veranderingen in de adresbalk van je browser
3. Merk op hoe de pagina opnieuw laadt en gegevens in de URL verschijnen
![Screenshot van de URL-verandering in de browser na het klikken op de Registreren-knop](../../../../translated_images/nl/click-register.e89a30bf0d4bc9ca.png)
![Screenshot van de URL-verandering in de browser na het klikken op de Registreren-knop](../../../../translated_images/nl/click-register.e89a30bf0d4bc9ca.webp)
### Vergelijking van HTTP-methoden
@ -350,7 +350,7 @@ Laten we je registratieformulier configureren om correct te communiceren met de
2. **Klik** op de knop "Account aanmaken"
3. **Observeer** de serverrespons in je browser
![Een browservenster op het adres localhost:5000/api/accounts, met een JSON-string met gebruikersgegevens](../../../../translated_images/nl/form-post.61de4ca1b964d91a.png)
![Een browservenster op het adres localhost:5000/api/accounts, met een JSON-string met gebruikersgegevens](../../../../translated_images/nl/form-post.61de4ca1b964d91a.webp)
**Wat je zou moeten zien:**
- **Browser verwijst** naar de API-eindpunt-URL
@ -615,7 +615,7 @@ async function register() {
3. **Klik** op "Account aanmaken"
4. **Observeer** de consoleberichten en gebruikersfeedback
![Screenshot met logbericht in de browserconsole](../../../../translated_images/nl/browser-console.efaf0b51aaaf6778.png)
![Screenshot met logbericht in de browserconsole](../../../../translated_images/nl/browser-console.efaf0b51aaaf6778.webp)
**Wat je zou moeten zien:**
- **Laadstatus** verschijnt op de verzendknop
@ -790,7 +790,7 @@ Laten we je registratieformulier verbeteren met robuuste validatie die een uitst
3. **Probeer** speciale tekens in het gebruikersnaamveld
4. **Voer** een negatief saldo in
![Screenshot met validatiefout bij het proberen het formulier in te dienen](../../../../translated_images/nl/validation-error.8bd23e98d416c22f.png)
![Screenshot met validatiefout bij het proberen het formulier in te dienen](../../../../translated_images/nl/validation-error.8bd23e98d416c22f.webp)
**Wat je zult zien:**
- **Browser toont** native validatiemeldingen
@ -952,7 +952,7 @@ Toon een foutmelding in de HTML als de gebruiker al bestaat.
Hier is een voorbeeld van hoe de uiteindelijke inlogpagina eruit kan zien na wat styling:
![Screenshot van de inlogpagina na het toevoegen van CSS-stijlen](../../../../translated_images/nl/result.96ef01f607bf856a.png)
![Screenshot van de inlogpagina na het toevoegen van CSS-stijlen](../../../../translated_images/nl/result.96ef01f607bf856a.webp)
## Quiz na de les

@ -160,7 +160,7 @@ sequenceDiagram
Browser->>User: Displays new page (flash/reload)
```
![Update workflow in een multi-page applicatie](../../../../translated_images/nl/mpa.7f7375a1a2d4aa77.png)
![Update workflow in een multi-page applicatie](../../../../translated_images/nl/mpa.7f7375a1a2d4aa77.webp)
**Waarom deze aanpak onhandig aanvoelde:**
- Elke klik betekende dat de hele pagina opnieuw moest worden opgebouwd
@ -187,7 +187,7 @@ sequenceDiagram
Browser->>User: Shows updated content (no reload)
```
![Update workflow in een single-page applicatie](../../../../translated_images/nl/spa.268ec73b41f992c2.png)
![Update workflow in een single-page applicatie](../../../../translated_images/nl/spa.268ec73b41f992c2.webp)
**Waarom SPA's zoveel beter aanvoelen:**
- Alleen de delen die daadwerkelijk zijn veranderd worden bijgewerkt (slim, toch?)
@ -523,7 +523,7 @@ if (data.error) {
Nu, wanneer je test met een ongeldig account, zie je een nuttige foutmelding direct op de pagina!
![Screenshot van de foutmelding die wordt weergegeven tijdens het inloggen](../../../../translated_images/nl/login-error.416fe019b36a6327.png)
![Screenshot van de foutmelding die wordt weergegeven tijdens het inloggen](../../../../translated_images/nl/login-error.416fe019b36a6327.webp)
#### Stap 4: Inclusief zijn met toegankelijkheid
@ -961,7 +961,7 @@ Klaar om je bankingapp naar een hoger niveau te tillen? Laten we ervoor zorgen d
Hier is hoe een gepolijst dashboard eruit zou kunnen zien:
![Screenshot van een voorbeeldresultaat van het dashboard na styling](../../../../translated_images/nl/screen2.123c82a831a1d14a.png)
![Screenshot van een voorbeeldresultaat van het dashboard na styling](../../../../translated_images/nl/screen2.123c82a831a1d14a.webp)
Voel je niet verplicht om dit precies na te maken - gebruik het als inspiratie en maak er je eigen versie van!

@ -190,7 +190,7 @@ Net als het compartimentontwerp van de Titanic dat robuust leek totdat meerdere
In plaats van achter de feiten aan te lopen, gaan we een **gecentraliseerd state management** systeem creëren. Denk eraan als één echt georganiseerd persoon die verantwoordelijk is voor alle belangrijke zaken:
![Schema dat de datastromen toont tussen de HTML, gebruikersacties en state](../../../../translated_images/nl/data-flow.fa2354e0908fecc8.png)
![Schema dat de datastromen toont tussen de HTML, gebruikersacties en state](../../../../translated_images/nl/data-flow.fa2354e0908fecc8.webp)
```mermaid
flowchart TD
@ -803,7 +803,7 @@ Deze uitdaging helpt u te denken als een professionele ontwikkelaar die zowel ge
Hier is een voorbeeldresultaat na het voltooien van de opdracht:
![Screenshot van een voorbeeld "Transactie toevoegen"-dialoogvenster](../../../../translated_images/nl/dialog.93bba104afeb79f1.png)
![Screenshot van een voorbeeld "Transactie toevoegen"-dialoogvenster](../../../../translated_images/nl/dialog.93bba104afeb79f1.webp)
---

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save