From e00c0e2d718a6967f9f3d1f7b56f1b666118b2ff Mon Sep 17 00:00:00 2001 From: "localizeflow[bot]" Date: Wed, 7 Jan 2026 02:14:21 +0000 Subject: [PATCH] chore(i18n): sync translations with latest source changes (chunk 10/20, 100 files) --- .../id/3-terrarium/1-intro-to-html/README.md | 4 +- .../id/3-terrarium/2-intro-to-css/README.md | 6 +- .../3-intro-to-DOM-and-closures/README.md | 8 +- translations/id/3-terrarium/README.md | 41 +- .../id/3-terrarium/solution/README.md | 2 +- .../1-about-browsers/README.md | 10 +- .../2-forms-browsers-local-storage/README.md | 2 +- .../README.md | 6 +- translations/id/5-browser-extension/README.md | 2 +- .../id/5-browser-extension/solution/README.md | 4 +- .../solution/translation/README.fr.md | 4 +- .../solution/translation/README.hi.md | 4 +- .../solution/translation/README.it.md | 4 +- .../solution/translation/README.ja.md | 4 +- .../solution/translation/README.ms.md | 4 +- .../id/5-browser-extension/start/README.md | 4 +- .../2-drawing-to-canvas/README.md | 8 +- .../id/6-space-game/5-keeping-score/README.md | 2 +- .../7-bank-project/1-template-route/README.md | 2 +- .../id/7-bank-project/2-forms/README.md | 10 +- .../id/7-bank-project/3-data/README.md | 8 +- .../4-state-management/README.md | 4 +- .../4-state-management/assignment.md | 2 +- translations/id/7-bank-project/README.md | 2 +- .../1-using-a-code-editor/README.md | 16 +- .../1-using-a-code-editor/assignment.md | 6 +- translations/id/9-chat-project/README.md | 10 +- translations/id/README.md | 288 +++-- translations/id/for-teachers.md | 4 +- .../README.md | 2 +- .../2-github-basics/README.md | 4 +- .../3-accessibility/README.md | 2 +- .../ms/2-js-basics/1-data-types/README.md | 2 +- .../2-js-basics/2-functions-methods/README.md | 2 +- .../2-js-basics/3-making-decisions/README.md | 2 +- .../ms/2-js-basics/4-arrays-loops/README.md | 2 +- .../ms/3-terrarium/1-intro-to-html/README.md | 4 +- .../ms/3-terrarium/2-intro-to-css/README.md | 6 +- .../3-intro-to-DOM-and-closures/README.md | 8 +- translations/ms/3-terrarium/README.md | 41 +- .../ms/3-terrarium/solution/README.md | 2 +- .../1-about-browsers/README.md | 10 +- .../2-forms-browsers-local-storage/README.md | 2 +- .../README.md | 6 +- translations/ms/5-browser-extension/README.md | 2 +- .../ms/5-browser-extension/solution/README.md | 4 +- .../solution/translation/README.fr.md | 4 +- .../solution/translation/README.hi.md | 4 +- .../solution/translation/README.it.md | 4 +- .../solution/translation/README.ja.md | 4 +- .../solution/translation/README.ms.md | 4 +- .../ms/5-browser-extension/start/README.md | 4 +- .../2-drawing-to-canvas/README.md | 8 +- .../ms/6-space-game/5-keeping-score/README.md | 2 +- .../7-bank-project/1-template-route/README.md | 2 +- .../ms/7-bank-project/2-forms/README.md | 10 +- .../ms/7-bank-project/3-data/README.md | 8 +- .../4-state-management/README.md | 4 +- .../4-state-management/assignment.md | 2 +- translations/ms/7-bank-project/README.md | 2 +- .../1-using-a-code-editor/README.md | 16 +- .../1-using-a-code-editor/assignment.md | 6 +- translations/ms/9-chat-project/README.md | 10 +- translations/ms/README.md | 241 ++-- translations/ms/for-teachers.md | 4 +- .../README.md | 846 ++++++++----- .../2-github-basics/README.md | 757 ++++++----- .../3-accessibility/README.md | 1106 +++++++++++------ .../sw/10-ai-framework-project/README.md | 774 ++++++++---- .../sw/2-js-basics/1-data-types/README.md | 657 +++++++--- .../2-js-basics/2-functions-methods/README.md | 509 ++++++-- .../2-js-basics/3-making-decisions/README.md | 619 +++++++-- .../sw/2-js-basics/4-arrays-loops/README.md | 695 ++++++++--- .../sw/3-terrarium/1-intro-to-html/README.md | 564 ++++++--- .../sw/3-terrarium/2-intro-to-css/README.md | 625 +++++++--- .../3-intro-to-DOM-and-closures/README.md | 804 ++++++++---- translations/sw/3-terrarium/README.md | 43 +- .../sw/3-terrarium/solution/README.md | 2 +- translations/sw/4-typing-game/README.md | 282 ++++- .../sw/4-typing-game/typing-game/README.md | 618 ++++----- .../1-about-browsers/README.md | 529 ++++++-- .../2-forms-browsers-local-storage/README.md | 634 +++++++--- .../README.md | 639 +++++++--- translations/sw/5-browser-extension/README.md | 2 +- .../sw/5-browser-extension/solution/README.md | 4 +- .../solution/translation/README.fr.md | 4 +- .../solution/translation/README.hi.md | 4 +- .../solution/translation/README.it.md | 4 +- .../solution/translation/README.ja.md | 4 +- .../solution/translation/README.ms.md | 4 +- .../sw/5-browser-extension/start/README.md | 4 +- .../sw/6-space-game/1-introduction/README.md | 599 ++++++--- .../2-drawing-to-canvas/README.md | 591 ++++++--- .../3-moving-elements-around/README.md | 718 ++++++++--- .../4-collision-detection/README.md | 655 +++++++--- .../sw/6-space-game/5-keeping-score/README.md | 419 ++++++- .../sw/6-space-game/6-end-condition/README.md | 606 ++++++--- .../7-bank-project/1-template-route/README.md | 740 +++++++---- .../sw/7-bank-project/2-forms/README.md | 848 ++++++++----- .../sw/7-bank-project/3-data/README.md | 873 ++++++++----- 100 files changed, 12304 insertions(+), 5389 deletions(-) diff --git a/translations/id/3-terrarium/1-intro-to-html/README.md b/translations/id/3-terrarium/1-intro-to-html/README.md index 528ccd109..cc267bd5f 100644 --- a/translations/id/3-terrarium/1-intro-to-html/README.md +++ b/translations/id/3-terrarium/1-intro-to-html/README.md @@ -26,7 +26,7 @@ journey Build terrarium: 5: Student ``` -![Pengantar HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.id.png) +![Pengantar HTML](../../../../translated_images/webdev101-html.4389c2067af68e98.id.png) > Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac) HTML, atau HyperText Markup Language, adalah dasar dari setiap situs web yang pernah Anda kunjungi. Pikirkan HTML sebagai kerangka yang memberikan struktur pada halaman web – HTML menentukan di mana konten berada, bagaimana konten diatur, dan apa yang diwakili oleh setiap bagian. Sementara CSS nantinya akan "mendandani" HTML Anda dengan warna dan tata letak, dan JavaScript akan menghidupkannya dengan interaktivitas, HTML menyediakan struktur penting yang membuat semuanya menjadi mungkin. @@ -88,7 +88,7 @@ Anda akan membuat folder khusus untuk proyek terrarium Anda dan menambahkan file 4. Di panel Explorer, klik ikon "New File" 5. Beri nama file Anda `index.html` -![Explorer VS Code menunjukkan pembuatan file baru](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.id.png) +![Explorer VS Code menunjukkan pembuatan file baru](../../../../translated_images/vs-code-index.e2986cf919471eb9.id.png) **Opsi 2: Menggunakan Perintah Terminal** ```bash diff --git a/translations/id/3-terrarium/2-intro-to-css/README.md b/translations/id/3-terrarium/2-intro-to-css/README.md index fc735e670..3a141a850 100644 --- a/translations/id/3-terrarium/2-intro-to-css/README.md +++ b/translations/id/3-terrarium/2-intro-to-css/README.md @@ -30,7 +30,7 @@ journey Glass reflections: 5: Student ``` -![Pengantar CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.id.png) +![Pengantar CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a20.id.png) > Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac) Ingat bagaimana terrarium HTML Anda terlihat cukup sederhana? CSS adalah tempat kita mengubah struktur polos itu menjadi sesuatu yang menarik secara visual. @@ -205,7 +205,7 @@ body { Buka alat pengembang browser Anda (F12), navigasikan ke tab Elemen, dan inspeksi elemen `

` Anda. Anda akan melihat bahwa elemen tersebut mewarisi keluarga font dari body: -![font yang diwarisi](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.id.png) +![font yang diwarisi](../../../../translated_images/1.cc07a5cbe114ad1d.id.png) ✅ **Waktu Eksperimen**: Cobalah mengatur properti lain yang dapat diwarisi pada `` seperti `color`, `line-height`, atau `text-align`. Apa yang terjadi pada heading dan elemen lainnya? @@ -599,7 +599,7 @@ Siap meningkatkan terrarium Anda dengan refleksi kaca yang realistis? Teknik ini Anda akan membuat sorotan halus yang mensimulasikan bagaimana cahaya memantul dari permukaan kaca. Pendekatan ini mirip dengan bagaimana pelukis Renaisans seperti Jan van Eyck menggunakan cahaya dan refleksi untuk membuat kaca yang dilukis tampak tiga dimensi. Berikut adalah tujuan Anda: -![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.id.png) +![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.id.png) **Tantangan Anda:** - **Buat** bentuk oval putih atau berwarna terang untuk refleksi kaca diff --git a/translations/id/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/id/3-terrarium/3-intro-to-DOM-and-closures/README.md index 516579415..8e3549491 100644 --- a/translations/id/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/id/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -26,7 +26,7 @@ journey Complete terrarium: 5: Student ``` -![DOM dan sebuah closure](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.id.png) +![DOM dan sebuah closure](../../../../translated_images/webdev101-js.10280393044d7eaa.id.png) > Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac) Selamat datang di salah satu aspek paling menarik dari pengembangan web - membuat sesuatu menjadi interaktif! Document Object Model (DOM) adalah seperti jembatan antara HTML dan JavaScript Anda, dan hari ini kita akan menggunakannya untuk menghidupkan terrarium Anda. Ketika Tim Berners-Lee menciptakan browser web pertama, dia membayangkan web di mana dokumen bisa menjadi dinamis dan interaktif - DOM membuat visi itu menjadi mungkin. @@ -105,7 +105,7 @@ flowchart TD style Q fill:#ffebee ``` -![Representasi pohon DOM](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.id.png) +![Representasi pohon DOM](../../../../translated_images/dom-tree.7daf0e763cbbba92.id.png) > Representasi DOM dan markup HTML yang merujuk padanya. Dari [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -150,7 +150,7 @@ flowchart LR > 💡 **Memahami Penutupan**: Penutupan adalah topik penting dalam JavaScript, dan banyak pengembang menggunakannya selama bertahun-tahun sebelum sepenuhnya memahami semua aspek teoritisnya. Hari ini, kita fokus pada aplikasi praktis - Anda akan melihat penutupan muncul secara alami saat kita membangun fitur interaktif kita. Pemahaman akan berkembang saat Anda melihat bagaimana mereka menyelesaikan masalah nyata. -![Representasi pohon DOM](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.id.png) +![Representasi pohon DOM](../../../../translated_images/dom-tree.7daf0e763cbbba92.id.png) > Representasi DOM dan markup HTML yang merujuk padanya. Dari [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -598,7 +598,7 @@ Sekarang uji terrarium interaktif Anda! Buka file `index.html` Anda di browser w - **Dukungan lintas perangkat**: Berfungsi di desktop dan mobile - **Sadar kinerja**: Tidak ada kebocoran memori atau perhitungan redundan -![terrarium selesai](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.id.png) +![terrarium selesai](../../../../translated_images/terrarium-final.0920f16e87c13a84.id.png) --- diff --git a/translations/id/3-terrarium/README.md b/translations/id/3-terrarium/README.md index d823188c8..69debf700 100644 --- a/translations/id/3-terrarium/README.md +++ b/translations/id/3-terrarium/README.md @@ -1,45 +1,30 @@ -# Terrarium Saya: Proyek untuk Belajar tentang HTML, CSS, dan Manipulasi DOM menggunakan JavaScript 🌵🌱 +## Deploy Terrarium Anda -Sebuah meditasi kode kecil dengan fitur drag and drop. Dengan sedikit HTML, JS, dan CSS, Anda akan dapat membangun antarmuka web, mendesainnya, dan bahkan menambahkan berbagai interaksi sesuai keinginan Anda. - -![terrarium saya](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.id.png) - -# Pelajaran - -1. [Pengenalan HTML](./1-intro-to-html/README.md) -2. [Pengenalan CSS](./2-intro-to-css/README.md) -3. [Pengenalan DOM dan Penutupan JS](./3-intro-to-DOM-and-closures/README.md) - -## Kredit - -Ditulis dengan ♥️ oleh [Jen Looper](https://www.twitter.com/jenlooper) - -Terrarium yang dibuat menggunakan CSS terinspirasi dari kaca toples karya Jakub Mandra di [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY). - -Karya seni digambar tangan oleh [Jen Looper](http://jenlooper.com) dengan bantuan Procreate. - -## Publikasikan Terrarium Anda - -Anda dapat mempublikasikan terrarium Anda di web menggunakan Azure Static Web Apps. +Anda dapat mendeply, atau menerbitkan Terrarium Anda di web menggunakan **Azure Static Web Apps**. 1. Fork repositori ini -2. Tekan tombol ini +2. Tekan tombol ini 👇 -[![Tombol Deploy ke Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp) +[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp) -3. Ikuti panduan wizard untuk membuat aplikasi Anda. Pastikan Anda mengatur root aplikasi ke `/solution` atau root dari basis kode Anda. Tidak ada API dalam aplikasi ini, jadi Anda tidak perlu khawatir menambahkannya. Sebuah folder GitHub akan dibuat di repositori yang telah Anda fork, yang akan membantu layanan build Azure Static Web Apps untuk membangun dan mempublikasikan aplikasi Anda ke URL baru. +3. Ikuti panduan penyiapan untuk membuat aplikasi Anda. + - Atur **App root** ke `/solution` atau root dari kode Anda. + - Tidak ada API dalam aplikasi ini, jadi Anda bisa melewati konfigurasi API. + - Folder `.github` akan dibuat secara otomatis untuk membantu Azure Static Web Apps membangun dan menerbitkan aplikasi Anda. --- + **Penafian**: -Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berusaha untuk memberikan hasil yang akurat, harap diketahui bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa penerjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini. \ No newline at end of file +Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berusaha untuk memberikan terjemahan yang akurat, harap diingat bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang resmi dan sah. Untuk informasi yang krusial, disarankan menggunakan jasa penerjemah profesional manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau salah tafsir yang timbul dari penggunaan terjemahan ini. + \ No newline at end of file diff --git a/translations/id/3-terrarium/solution/README.md b/translations/id/3-terrarium/solution/README.md index 52b5b6acd..6de735b26 100644 --- a/translations/id/3-terrarium/solution/README.md +++ b/translations/id/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Sebuah meditasi kode kecil dengan fitur seret dan lepas. Dengan sedikit HTML, JS, dan CSS, Anda dapat membangun antarmuka web, menatanya, dan menambahkan interaksi. -![terrarium saya](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.id.png) +![terrarium saya](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.id.png) ## Kredit diff --git a/translations/id/5-browser-extension/1-about-browsers/README.md b/translations/id/5-browser-extension/1-about-browsers/README.md index 2f07e7e50..2912884a9 100644 --- a/translations/id/5-browser-extension/1-about-browsers/README.md +++ b/translations/id/5-browser-extension/1-about-browsers/README.md @@ -26,7 +26,7 @@ journey Polish experience: 5: Student ``` -![Sketchnote Browser](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.id.jpg) +![Sketchnote Browser](../../../../translated_images/browser.60317c9be8b7f84a.id.jpg) > Sketchnote oleh [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Kuis Pra-Pelajaran @@ -79,7 +79,7 @@ Proses ini mencerminkan bagaimana browser web pertama, WorldWideWeb, dirancang o ✅ **Sedikit sejarah**: Browser pertama disebut 'WorldWideWeb' dan dibuat oleh Sir Timothy Berners-Lee pada tahun 1990. -![browser awal](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.id.jpg) +![browser awal](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.id.jpg) > Beberapa browser awal, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Bagaimana Browser Memproses Konten Web @@ -198,7 +198,7 @@ quadrantChart Memahami proses pemasangan ekstensi membantu Anda mengantisipasi pengalaman pengguna saat mereka memasang ekstensi Anda. Proses pemasangan distandarisasi di browser modern, dengan variasi kecil dalam desain antarmuka. -![tangkapan layar browser Edge yang menunjukkan halaman edge://extensions terbuka dan menu pengaturan terbuka](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.id.png) +![tangkapan layar browser Edge yang menunjukkan halaman edge://extensions terbuka dan menu pengaturan terbuka](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.id.png) > **Penting**: Pastikan untuk mengaktifkan mode pengembang dan izinkan ekstensi dari toko lain saat menguji ekstensi Anda sendiri. @@ -313,10 +313,10 @@ Ini mengikuti prinsip pengungkapan progresif yang digunakan dalam desain antarmu ### Ikhtisar Tampilan Ekstensi **Tampilan Pengaturan** - Konfigurasi pengguna pertama kali: -![tangkapan layar ekstensi yang selesai terbuka di browser, menampilkan formulir dengan input untuk nama wilayah dan kunci API.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.id.png) +![tangkapan layar ekstensi yang selesai terbuka di browser, menampilkan formulir dengan input untuk nama wilayah dan kunci API.](../../../../translated_images/1.b6da8c1394b07491.id.png) **Tampilan Hasil** - Tampilan data jejak karbon: -![tangkapan layar ekstensi yang selesai menampilkan nilai penggunaan karbon dan persentase bahan bakar fosil untuk wilayah US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.id.png) +![tangkapan layar ekstensi yang selesai menampilkan nilai penggunaan karbon dan persentase bahan bakar fosil untuk wilayah US-NEISO.](../../../../translated_images/2.1dae52ff08042246.id.png) ### Membuat Formulir Konfigurasi diff --git a/translations/id/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/id/5-browser-extension/2-forms-browsers-local-storage/README.md index 68ba5b60d..bf0d29f69 100644 --- a/translations/id/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/id/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -268,7 +268,7 @@ stateDiagram-v2 ClearStorage --> FirstTime: Back to setup ``` -![Panel penyimpanan lokal](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.id.png) +![Panel penyimpanan lokal](../../../../translated_images/localstorage.472f8147b6a3f8d1.id.png) > ⚠️ **Pertimbangan Keamanan**: Dalam aplikasi produksi, menyimpan kunci API di LocalStorage menimbulkan risiko keamanan karena JavaScript dapat mengakses data ini. Untuk tujuan pembelajaran, pendekatan ini baik-baik saja, tetapi aplikasi nyata harus menggunakan penyimpanan sisi server yang aman untuk kredensial sensitif. diff --git a/translations/id/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/id/5-browser-extension/3-background-tasks-and-performance/README.md index 81c3792ce..b86ccf3ab 100644 --- a/translations/id/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/id/5-browser-extension/3-background-tasks-and-performance/README.md @@ -126,7 +126,7 @@ Untuk membuka Developer Tools di Edge, klik tiga titik di sudut kanan atas, lalu Mari kita coba ini. Buka sebuah situs web (Microsoft.com bekerja dengan baik untuk ini) dan klik tombol 'Record'. Sekarang segarkan halaman dan lihat profiler menangkap semua yang terjadi. Ketika Anda berhenti merekam, Anda akan melihat rincian mendetail tentang bagaimana browser 'menyusun', 'merender', dan 'melukis' situs tersebut. Ini mengingatkan saya pada bagaimana pusat kendali misi memantau setiap sistem selama peluncuran roket - Anda mendapatkan data waktu nyata tentang apa yang terjadi dan kapan. -![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.id.png) +![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01c.id.png) ✅ [Dokumentasi Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) memiliki banyak detail jika Anda ingin mendalami lebih jauh @@ -136,11 +136,11 @@ Pilih elemen dari timeline profil untuk memperbesar peristiwa yang terjadi saat Dapatkan snapshot performa halaman Anda dengan memilih bagian dari timeline profil dan melihat panel ringkasan: -![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.id.png) +![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad737.id.png) Periksa panel Event Log untuk melihat apakah ada peristiwa yang memakan waktu lebih dari 15 ms: -![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.id.png) +![Edge event log](../../../../translated_images/log.804026979f3707e0.id.png) ✅ Kenali profiler Anda! Buka developer tools di situs ini dan lihat apakah ada hambatan. Apa aset yang paling lambat dimuat? Yang tercepat? diff --git a/translations/id/5-browser-extension/README.md b/translations/id/5-browser-extension/README.md index 077743631..a25dc94d8 100644 --- a/translations/id/5-browser-extension/README.md +++ b/translations/id/5-browser-extension/README.md @@ -23,7 +23,7 @@ Ekstensi ini dapat digunakan secara ad hoc oleh pengguna setelah kunci API dan k ### Kredit -![ekstensi browser berwarna hijau](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.id.png) +![ekstensi browser berwarna hijau](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.id.png) ## Kredit diff --git a/translations/id/5-browser-extension/solution/README.md b/translations/id/5-browser-extension/solution/README.md index ff8be4fc2..a7dafaa31 100644 --- a/translations/id/5-browser-extension/solution/README.md +++ b/translations/id/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Menggunakan API C02 Signal dari tmrow untuk melacak penggunaan listrik, buat ekstensi browser sehingga Anda dapat memiliki pengingat langsung di browser Anda tentang seberapa berat penggunaan listrik di wilayah Anda. Menggunakan ekstensi ini secara ad hoc akan membantu Anda membuat keputusan berdasarkan informasi ini. -![screenshot ekstensi](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.id.png) +![screenshot ekstensi](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.id.png) ## Memulai @@ -31,7 +31,7 @@ npm run build Untuk menginstal di Edge, gunakan menu 'tiga titik' di sudut kanan atas browser untuk menemukan panel Ekstensi. Dari sana, pilih 'Load Unpacked' untuk memuat ekstensi baru. Buka folder 'dist' saat diminta, dan ekstensi akan dimuat. Untuk menggunakannya, Anda memerlukan kunci API untuk API CO2 Signal ([dapatkan di sini melalui email](https://www.co2signal.com/) - masukkan email Anda di kotak pada halaman ini) dan [kode untuk wilayah Anda](http://api.electricitymap.org/v3/zones) yang sesuai dengan [Electricity Map](https://www.electricitymap.org/map) (di Boston, misalnya, saya menggunakan 'US-NEISO'). -![menginstal](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.id.png) +![menginstal](../../../../translated_images/install-on-edge.78634f02842c4828.id.png) Setelah kunci API dan wilayah dimasukkan ke dalam antarmuka ekstensi, titik berwarna di bilah ekstensi browser seharusnya berubah untuk mencerminkan penggunaan energi di wilayah Anda dan memberikan petunjuk tentang aktivitas berat energi yang sesuai untuk Anda lakukan. Konsep di balik sistem 'titik' ini diberikan kepada saya oleh [ekstensi Energy Lollipop](https://energylollipop.com/) untuk emisi di California. diff --git a/translations/id/5-browser-extension/solution/translation/README.fr.md b/translations/id/5-browser-extension/solution/translation/README.fr.md index 095aa0f50..59318e698 100644 --- a/translations/id/5-browser-extension/solution/translation/README.fr.md +++ b/translations/id/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Dengan menggunakan API C02 Signal dari tmrow untuk memantau konsumsi listrik, buatlah ekstensi browser sehingga Anda dapat menerima pengingat langsung di browser Anda tentang konsumsi listrik di wilayah Anda. Penggunaan ekstensi ini akan membantu Anda membuat keputusan berdasarkan informasi tersebut. -![tangkapan layar ekstensi](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.id.png) +![tangkapan layar ekstensi](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.id.png) ## Memulai @@ -31,7 +31,7 @@ npm run build Untuk menginstal di Edge, gunakan menu 'tiga titik' di sudut kanan atas browser untuk menemukan panel Ekstensi. Dari sana, pilih 'Muat ekstensi yang tidak dikompresi' untuk memuat ekstensi baru. Buka folder 'dist' saat diminta, dan ekstensi akan dimuat. Untuk menggunakannya, Anda memerlukan kunci API untuk API CO2 Signal ([dapatkan di sini melalui email](https://www.co2signal.com/) - masukkan email Anda di kotak pada halaman tersebut) dan [kode untuk wilayah Anda](http://api.electricitymap.org/v3/zones) yang sesuai dengan [Peta Listrik](https://www.electricitymap.org/map) (di Boston, misalnya, saya menggunakan 'US-NEISO'). -![instalasi](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.id.png) +![instalasi](../../../../../translated_images/install-on-edge.78634f02842c4828.id.png) Setelah kunci API dan wilayah dimasukkan ke dalam antarmuka ekstensi, titik berwarna di bilah ekstensi browser akan berubah untuk mencerminkan konsumsi energi di wilayah Anda dan memberikan indikator tentang aktivitas yang sesuai untuk dilakukan berdasarkan konsumsi energi tersebut. Konsep di balik sistem 'titik' ini terinspirasi oleh [ekstensi Energy Lollipop](https://energylollipop.com/) untuk emisi di California. diff --git a/translations/id/5-browser-extension/solution/translation/README.hi.md b/translations/id/5-browser-extension/solution/translation/README.hi.md index bb832016c..29e13d5c7 100644 --- a/translations/id/5-browser-extension/solution/translation/README.hi.md +++ b/translations/id/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Menggunakan API CO2 Signal dari tmrow untuk melacak penggunaan listrik, ekstensi browser ini dirancang untuk memberikan pengingat tentang seberapa berat penggunaan listrik di wilayah Anda langsung di browser Anda. Dengan menggunakan ekstensi ini, Anda dapat membuat keputusan berdasarkan informasi tersebut untuk aktivitas Anda. -![Screenshot Ekstensi](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.id.png) +![Screenshot Ekstensi](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.id.png) ## Memulai @@ -31,7 +31,7 @@ npm run build Untuk menginstal di Edge, gunakan menu 'tiga titik' di pojok kanan atas browser untuk menemukan panel ekstensi. Dari sana, pilih 'Load Unpacked' untuk memuat ekstensi baru. Pada prompt, buka folder 'dist' dan ekstensi akan dimuat. Untuk menggunakannya, Anda memerlukan kunci API CO2 Signal ([dapatkan melalui email di sini](https://www.co2signal.com/) - masukkan email Anda di kotak pada halaman tersebut) dan [kode wilayah Anda](http://api.electricitymap.org/v3/zones) dari [Electricity Map](https://www.electricitymap.org/map) (misalnya, di Boston, saya menggunakan 'US-NEISO'). -![installing](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.id.png) +![installing](../../../../../translated_images/install-on-edge.78634f02842c4828.id.png) Setelah kunci API dan wilayah dimasukkan ke dalam antarmuka ekstensi, titik berwarna di bilah ekstensi browser Anda akan berubah untuk mencerminkan penggunaan energi di wilayah Anda dan memberikan indikator tentang aktivitas berat energi yang sesuai untuk dilakukan. Konsep sistem 'titik' ini terinspirasi oleh [Ekstensi Energy Lollipop](https://energylollipop.com/) untuk emisi di California. diff --git a/translations/id/5-browser-extension/solution/translation/README.it.md b/translations/id/5-browser-extension/solution/translation/README.it.md index a2fa8ad23..9cf173348 100644 --- a/translations/id/5-browser-extension/solution/translation/README.it.md +++ b/translations/id/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Kita akan menggunakan API Signal CO2 dari tmrow untuk memantau penggunaan listrik dan membuat ekstensi browser agar dapat memberikan pengingat langsung di browser tentang seberapa besar penggunaan listrik di wilayah kita. Penggunaan ekstensi ini akan membantu mengevaluasi aktivitas kita berdasarkan informasi tersebut. -![tangkapan layar ekstensi](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.id.png) +![tangkapan layar ekstensi](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.id.png) ## Memulai @@ -31,7 +31,7 @@ npm run build Untuk menginstal di Edge, gunakan menu "tiga titik" di sudut kanan atas browser untuk menemukan panel Ekstensi. Jika belum aktif, aktifkan Mode Pengembang (di bagian kiri bawah). Pilih "Muat tanpa kompresi" untuk memuat ekstensi baru. Buka folder "dist" saat diminta, dan ekstensi akan dimuat. Untuk menggunakannya, Anda memerlukan kunci API untuk API CO2 Signal (Anda dapat [memperolehnya melalui email di sini](https://www.co2signal.com/) - masukkan email Anda di kotak pada halaman tersebut) dan [kode untuk wilayah Anda](http://api.electricitymap.org/v3/zones) yang sesuai dengan [peta listrik](https://www.electricitymap.org/map) (misalnya, di Boston, "US-NEISO"). -![instalasi](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.id.png) +![instalasi](../../../../../translated_images/install-on-edge.78634f02842c4828.id.png) Setelah kunci API dan wilayah dimasukkan ke dalam antarmuka ekstensi, titik berwarna di bilah ekstensi browser seharusnya berubah untuk mencerminkan penggunaan energi di wilayah tersebut dan memberikan petunjuk tentang aktivitas berenergi tinggi yang sesuai untuk dilakukan. Konsep di balik sistem "titik" ini terinspirasi oleh [ekstensi Energy Lollipop](https://energylollipop.com/) untuk emisi di California. diff --git a/translations/id/5-browser-extension/solution/translation/README.ja.md b/translations/id/5-browser-extension/solution/translation/README.ja.md index 243ef6072..c8c8396ba 100644 --- a/translations/id/5-browser-extension/solution/translation/README.ja.md +++ b/translations/id/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Bangun ekstensi browser yang memungkinkan Anda menampilkan pengingat di browser tentang seberapa besar konsumsi listrik di wilayah Anda, menggunakan API CO2 Signal dari tmrow untuk melacak penggunaan listrik. Dengan menggunakan ekstensi ini secara ad-hoc, Anda dapat membuat keputusan berdasarkan informasi ini untuk aktivitas Anda. -![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.id.png) +![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.id.png) ## Memulai @@ -31,7 +31,7 @@ npm run build Untuk menginstalnya di Edge, temukan panel "Ekstensi" dari menu "tiga titik" di kanan atas browser. Dari sana, pilih "Load Unpacked" untuk memuat ekstensi baru. Ketika diminta, buka folder "dist", dan ekstensi akan dimuat. Untuk menggunakannya, Anda memerlukan API key dari CO2 Signal API ([dapatkan di sini melalui email](https://www.co2signal.com/) - masukkan email Anda di kotak pada halaman tersebut) dan [kode untuk wilayah Anda](http://api.electricitymap.org/v3/zones) yang sesuai dengan [Electricity Map](https://www.electricitymap.org/map) (misalnya, untuk Boston, gunakan 'US-NEISO'). -![installing](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.id.png) +![installing](../../../../../translated_images/install-on-edge.78634f02842c4828.id.png) Setelah Anda memasukkan API key dan wilayah Anda di antarmuka ekstensi, titik berwarna yang muncul di bilah ekstensi browser akan berubah, mencerminkan konsumsi energi di wilayah Anda. Ini akan membantu Anda menentukan aktivitas apa yang sesuai berdasarkan kebutuhan energi. Konsep sistem "titik" ini terinspirasi oleh [Energy Lollipop extension](https://energylollipop.com/) untuk emisi di California. diff --git a/translations/id/5-browser-extension/solution/translation/README.ms.md b/translations/id/5-browser-extension/solution/translation/README.ms.md index 1dce159a5..7c0dd44a6 100644 --- a/translations/id/5-browser-extension/solution/translation/README.ms.md +++ b/translations/id/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Menggunakan API Sinyal CO2 dari tmrow untuk memantau penggunaan listrik, buat ekstensi peramban sehingga Anda dapat menerima peringatan di peramban Anda tentang seberapa besar konsumsi listrik di wilayah Anda. Menggunakan ekstensi ini secara khusus akan membantu Anda membuat keputusan tentang aktivitas Anda berdasarkan informasi tersebut. -![tangkapan layar ekstensi peramban](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.id.png) +![tangkapan layar ekstensi peramban](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.id.png) ## Memulai @@ -31,7 +31,7 @@ npm run build Untuk menginstal di Edge, gunakan menu 'tiga titik' di sudut kanan atas peramban untuk menemukan panel Ekstensi. Dari sana, pilih 'Load Unpacked' untuk memuat ekstensi baru. Buka folder 'dist' saat diminta, dan ekstensi akan dimuat. Untuk menggunakannya, Anda memerlukan kunci API untuk API Sinyal CO2 ([dapatkan satu di sini melalui email](https://www.co2signal.com/) - masukkan email Anda di kotak pada halaman tersebut) dan [kode untuk wilayah Anda](http://api.electricitymap.org/v3/zones) yang sesuai dengan [Peta Listrik](https://www.electricitymap.org/map) (di Boston, misalnya, saya menggunakan 'US-NEISO'). -![sedang menginstal](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.id.png) +![sedang menginstal](../../../../../translated_images/install-on-edge.78634f02842c4828.id.png) Setelah kunci API dan wilayah dimasukkan ke antarmuka ekstensi, titik berwarna di bilah ekstensi peramban akan berubah untuk mencerminkan konsumsi energi di wilayah Anda dan memberikan petunjuk tentang aktivitas berat yang sesuai untuk Anda lakukan. Konsep di balik sistem 'titik' ini terinspirasi oleh [ekstensi peramban Energy Lollipop](https://energylollipop.com/) untuk emisi di California. diff --git a/translations/id/5-browser-extension/start/README.md b/translations/id/5-browser-extension/start/README.md index de51f294f..9dc498460 100644 --- a/translations/id/5-browser-extension/start/README.md +++ b/translations/id/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Menggunakan API C02 Signal dari tmrow untuk melacak penggunaan listrik, bangun sebuah ekstensi browser sehingga Anda dapat memiliki pengingat langsung di browser Anda tentang seberapa berat penggunaan listrik di wilayah Anda. Menggunakan ekstensi ini secara ad hoc akan membantu Anda membuat keputusan berdasarkan informasi ini. -![screenshot ekstensi](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.id.png) +![screenshot ekstensi](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.id.png) ## Memulai @@ -31,7 +31,7 @@ npm run build Untuk menginstal di Edge, gunakan menu 'tiga titik' di sudut kanan atas browser untuk menemukan panel Ekstensi. Dari sana, pilih 'Load Unpacked' untuk memuat ekstensi baru. Buka folder 'dist' saat diminta, dan ekstensi akan dimuat. Untuk menggunakannya, Anda memerlukan kunci API untuk API CO2 Signal ([dapatkan di sini melalui email](https://www.co2signal.com/) - masukkan email Anda di kotak pada halaman ini) dan [kode untuk wilayah Anda](http://api.electricitymap.org/v3/zones) yang sesuai dengan [Electricity Map](https://www.electricitymap.org/map) (misalnya, di Boston, saya menggunakan 'US-NEISO'). -![menginstal](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.id.png) +![menginstal](../../../../translated_images/install-on-edge.78634f02842c4828.id.png) Setelah kunci API dan wilayah dimasukkan ke dalam antarmuka ekstensi, titik berwarna di bilah ekstensi browser seharusnya berubah untuk mencerminkan penggunaan energi di wilayah Anda dan memberikan petunjuk tentang aktivitas berat energi apa yang sesuai untuk Anda lakukan. Konsep di balik sistem 'titik' ini terinspirasi oleh [ekstensi Energy Lollipop](https://energylollipop.com/) untuk emisi di California. diff --git a/translations/id/6-space-game/2-drawing-to-canvas/README.md b/translations/id/6-space-game/2-drawing-to-canvas/README.md index d6695499e..5fa611369 100644 --- a/translations/id/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/id/6-space-game/2-drawing-to-canvas/README.md @@ -108,7 +108,7 @@ quadrantChart UI Elements: [0.9, 0.1] ``` -![grid canvas](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.id.png) +![grid canvas](../../../../translated_images/canvas_grid.5f209da785ded492.id.png) > Gambar dari [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Untuk menggambar di elemen canvas, Anda akan mengikuti proses tiga langkah yang sama yang membentuk dasar dari semua grafik canvas. Setelah Anda melakukannya beberapa kali, ini menjadi kebiasaan: @@ -329,11 +329,11 @@ Anda akan membuat halaman web dengan elemen Canvas. Halaman tersebut harus menam - Kapal pahlawan - ![Kapal pahlawan](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.id.png) + ![Kapal pahlawan](../../../../translated_images/player.dd24c1afa8c71e9b.id.png) - 5*5 monster - ![Kapal monster](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.id.png) + ![Kapal monster](../../../../translated_images/enemyShip.5df2a822c16650c2.id.png) ### Langkah-langkah yang Direkomendasikan untuk Memulai Pengembangan @@ -470,7 +470,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { Hasil akhir seharusnya terlihat seperti ini: -![Layar hitam dengan seorang pahlawan dan 5*5 monster](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.id.png) +![Layar hitam dengan seorang pahlawan dan 5*5 monster](../../../../translated_images/partI-solution.36c53b48c9ffae2a.id.png) ## Solusi diff --git a/translations/id/6-space-game/5-keeping-score/README.md b/translations/id/6-space-game/5-keeping-score/README.md index 6fa3aa885..f0a40b9b6 100644 --- a/translations/id/6-space-game/5-keeping-score/README.md +++ b/translations/id/6-space-game/5-keeping-score/README.md @@ -160,7 +160,7 @@ sequenceDiagram ``` - **Sistem skor**: Setiap kapal musuh yang dihancurkan memberikan 100 poin (angka bulat lebih mudah dihitung secara mental oleh pemain). Skor ditampilkan di sudut kiri bawah. -- **Penghitung nyawa**: Pahlawan Anda memulai dengan tiga nyawa - standar yang ditetapkan oleh game arcade awal untuk menyeimbangkan tantangan dengan kemampuan bermain. Setiap tabrakan dengan musuh mengurangi satu nyawa. Kita akan menampilkan nyawa yang tersisa di sudut kanan bawah menggunakan ikon kapal ![gambar nyawa](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.id.png). +- **Penghitung nyawa**: Pahlawan Anda memulai dengan tiga nyawa - standar yang ditetapkan oleh game arcade awal untuk menyeimbangkan tantangan dengan kemampuan bermain. Setiap tabrakan dengan musuh mengurangi satu nyawa. Kita akan menampilkan nyawa yang tersisa di sudut kanan bawah menggunakan ikon kapal ![gambar nyawa](../../../../translated_images/life.6fb9f50d53ee0413.id.png). ## Mari Mulai Membangun! diff --git a/translations/id/7-bank-project/1-template-route/README.md b/translations/id/7-bank-project/1-template-route/README.md index 70c30cc1a..4179646fa 100644 --- a/translations/id/7-bank-project/1-template-route/README.md +++ b/translations/id/7-bank-project/1-template-route/README.md @@ -652,7 +652,7 @@ sequenceDiagram Menggunakan `history.pushState` menciptakan entri baru dalam riwayat navigasi browser. Anda dapat memeriksanya dengan menahan *tombol kembali* browser Anda, seharusnya menampilkan sesuatu seperti ini: -![Screenshot riwayat navigasi](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.id.png) +![Screenshot riwayat navigasi](../../../../translated_images/history.7fdabbafa521e064.id.png) Jika Anda mencoba mengklik tombol kembali beberapa kali, Anda akan melihat bahwa URL saat ini berubah dan riwayat diperbarui, tetapi template yang sama tetap ditampilkan. diff --git a/translations/id/7-bank-project/2-forms/README.md b/translations/id/7-bank-project/2-forms/README.md index 3e71a89b2..7c0474d24 100644 --- a/translations/id/7-bank-project/2-forms/README.md +++ b/translations/id/7-bank-project/2-forms/README.md @@ -295,7 +295,7 @@ Pertama, mari kita amati apa yang terjadi dengan pengiriman formulir dasar: 2. Amati perubahan di bilah alamat browser Anda 3. Perhatikan bagaimana halaman memuat ulang dan data muncul di URL -![Screenshot perubahan URL browser setelah mengklik tombol Register](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.id.png) +![Screenshot perubahan URL browser setelah mengklik tombol Register](../../../../translated_images/click-register.e89a30bf0d4bc9ca.id.png) ### Perbandingan Metode HTTP @@ -350,7 +350,7 @@ Mari kita konfigurasi formulir registrasi Anda untuk berkomunikasi dengan benar 2. **Klik** tombol "Create Account" 3. **Amati** respons server di browser Anda -![Jendela browser di alamat localhost:5000/api/accounts, menunjukkan string JSON dengan data pengguna](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.id.png) +![Jendela browser di alamat localhost:5000/api/accounts, menunjukkan string JSON dengan data pengguna](../../../../translated_images/form-post.61de4ca1b964d91a.id.png) **Apa yang harus Anda lihat:** - **Browser mengarahkan** ke URL endpoint API @@ -615,7 +615,7 @@ async function register() { 3. **Klik** "Buat Akun" 4. **Amati** pesan konsol dan umpan balik pengguna -![Screenshot menunjukkan pesan log di konsol browser](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.id.png) +![Screenshot menunjukkan pesan log di konsol browser](../../../../translated_images/browser-console.efaf0b51aaaf6778.id.png) **Apa yang harus Anda lihat:** - **Status pemuatan** muncul di tombol kirim @@ -790,7 +790,7 @@ Mari tingkatkan formulir registrasi Anda dengan validasi yang kuat yang memberik 3. **Coba** karakter khusus di bidang nama pengguna 4. **Masukkan** jumlah saldo negatif -![Screenshot menunjukkan kesalahan validasi saat mencoba mengirimkan formulir](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.id.png) +![Screenshot menunjukkan kesalahan validasi saat mencoba mengirimkan formulir](../../../../translated_images/validation-error.8bd23e98d416c22f.id.png) **Apa yang akan Anda amati:** - **Browser menampilkan** pesan validasi bawaan @@ -952,7 +952,7 @@ Tampilkan pesan kesalahan di HTML jika pengguna sudah ada. Berikut adalah contoh tampilan halaman login setelah ditambahkan beberapa gaya CSS: -![Screenshot halaman login setelah menambahkan gaya CSS](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.id.png) +![Screenshot halaman login setelah menambahkan gaya CSS](../../../../translated_images/result.96ef01f607bf856a.id.png) ## Kuis Pasca-Pelajaran diff --git a/translations/id/7-bank-project/3-data/README.md b/translations/id/7-bank-project/3-data/README.md index 1d844070f..b617a8a3a 100644 --- a/translations/id/7-bank-project/3-data/README.md +++ b/translations/id/7-bank-project/3-data/README.md @@ -160,7 +160,7 @@ sequenceDiagram Browser->>User: Displays new page (flash/reload) ``` -![Alur pembaruan dalam aplikasi multi-halaman](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.id.png) +![Alur pembaruan dalam aplikasi multi-halaman](../../../../translated_images/mpa.7f7375a1a2d4aa77.id.png) **Mengapa pendekatan ini terasa kaku:** - Setiap klik berarti membangun ulang seluruh halaman dari awal @@ -187,7 +187,7 @@ sequenceDiagram Browser->>User: Shows updated content (no reload) ``` -![Alur pembaruan dalam aplikasi satu halaman](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.id.png) +![Alur pembaruan dalam aplikasi satu halaman](../../../../translated_images/spa.268ec73b41f992c2.id.png) **Mengapa SPA terasa jauh lebih baik:** - Hanya bagian yang benar-benar berubah yang diperbarui (cerdas, bukan?) @@ -523,7 +523,7 @@ if (data.error) { Sekarang ketika Anda menguji dengan akun yang tidak valid, Anda akan melihat pesan kesalahan yang berguna langsung di halaman! -![Screenshot menunjukkan pesan kesalahan yang ditampilkan saat login](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.id.png) +![Screenshot menunjukkan pesan kesalahan yang ditampilkan saat login](../../../../translated_images/login-error.416fe019b36a6327.id.png) #### Langkah 4: Menjadi Inklusif dengan Aksesibilitas @@ -961,7 +961,7 @@ Siap membawa aplikasi perbankan Anda ke tingkat berikutnya? Mari buat aplikasi i Berikut tampilan dashboard yang sudah dipoles: -![Screenshot dari contoh hasil dashboard setelah styling](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.id.png) +![Screenshot dari contoh hasil dashboard setelah styling](../../../../translated_images/screen2.123c82a831a1d14a.id.png) Jangan merasa harus meniru ini persis - gunakan sebagai inspirasi dan buat versi Anda sendiri! diff --git a/translations/id/7-bank-project/4-state-management/README.md b/translations/id/7-bank-project/4-state-management/README.md index 8b086f999..9c65c9754 100644 --- a/translations/id/7-bank-project/4-state-management/README.md +++ b/translations/id/7-bank-project/4-state-management/README.md @@ -190,7 +190,7 @@ Seperti desain kompartemen Titanic yang tampak kokoh hingga beberapa kompartemen Alih-alih mengejar ekor kita sendiri, kita akan membuat sistem **manajemen state terpusat**. Anggap saja seperti memiliki satu orang yang sangat terorganisir yang bertanggung jawab atas semua hal penting: -![Skema yang menunjukkan aliran data antara HTML, tindakan pengguna, dan state](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.id.png) +![Skema yang menunjukkan aliran data antara HTML, tindakan pengguna, dan state](../../../../translated_images/data-flow.fa2354e0908fecc8.id.png) ```mermaid flowchart TD @@ -804,7 +804,7 @@ Tantangan ini akan membantu Anda berpikir seperti pengembang profesional yang me Berikut adalah contoh hasil setelah menyelesaikan tugas: -![Screenshot menunjukkan contoh dialog "Tambah transaksi"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.id.png) +![Screenshot menunjukkan contoh dialog "Tambah transaksi"](../../../../translated_images/dialog.93bba104afeb79f1.id.png) --- diff --git a/translations/id/7-bank-project/4-state-management/assignment.md b/translations/id/7-bank-project/4-state-management/assignment.md index ba2c4bed4..05f973741 100644 --- a/translations/id/7-bank-project/4-state-management/assignment.md +++ b/translations/id/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ Lihat [dokumentasi API server](../api/README.md) untuk: **Hasil yang Diharapkan:** Setelah menyelesaikan tugas ini, aplikasi perbankan Anda harus memiliki fitur "Tambah Transaksi" yang berfungsi penuh dan terlihat profesional: -![Screenshot yang menunjukkan contoh dialog "Tambah Transaksi"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.id.png) +![Screenshot yang menunjukkan contoh dialog "Tambah Transaksi"](../../../../translated_images/dialog.93bba104afeb79f1.id.png) ## Pengujian Implementasi Anda diff --git a/translations/id/7-bank-project/README.md b/translations/id/7-bank-project/README.md index 0daf650bb..60b04bdc6 100644 --- a/translations/id/7-bank-project/README.md +++ b/translations/id/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Dalam proyek ini, Anda akan belajar cara membangun bank fiksi. Pelajaran ini mencakup instruksi tentang cara merancang aplikasi web dan menyediakan rute, membuat formulir, mengelola state, serta mengambil data dari API yang memungkinkan Anda mendapatkan data bank. -| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.id.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.id.png) | +| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.id.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.id.png) | |--------------------------------|--------------------------------| ## Pelajaran diff --git a/translations/id/8-code-editor/1-using-a-code-editor/README.md b/translations/id/8-code-editor/1-using-a-code-editor/README.md index d08c8519a..23636a541 100644 --- a/translations/id/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/id/8-code-editor/1-using-a-code-editor/README.md @@ -185,7 +185,7 @@ Seperti bagaimana telepon Alexander Graham Bell menghubungkan lokasi yang jauh, Setelah semuanya dimuat, Anda akan melihat ruang kerja yang bersih dan indah yang dirancang untuk membuat Anda fokus pada hal yang penting – kode Anda! -![Antarmuka default VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.id.png) +![Antarmuka default VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.id.png) **Berikut tur singkatnya:** - **Activity Bar** (strip di sebelah kiri): Navigasi utama Anda dengan Explorer 📁, Pencarian 🔍, Source Control 🌿, Ekstensi 🧩, dan Pengaturan ⚙️ @@ -233,7 +233,7 @@ Ini sempurna saat Anda memulai dari awal di VSCode.dev dan ingin membuka reposit 1. Pergi ke [vscode.dev](https://vscode.dev) jika Anda belum ada di sana 2. Cari tombol "Open Remote Repository" di layar selamat datang dan klik - ![Buka repositori remote](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.id.png) + ![Buka repositori remote](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.id.png) 3. Tempelkan URL repositori GitHub mana pun (coba yang ini: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Tekan Enter dan lihat keajaibannya! @@ -242,7 +242,7 @@ Ini sempurna saat Anda memulai dari awal di VSCode.dev dan ingin membuka reposit Ingin merasa seperti penyihir kode? Coba pintasan keyboard ini: Ctrl+Shift+P (atau Cmd+Shift+P di Mac) untuk membuka Command Palette: -![Command Palette](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.id.png) +![Command Palette](../../../../translated_images/palette-menu.4946174e07f42622.id.png) **Command Palette seperti mesin pencari untuk semua yang bisa Anda lakukan:** - Ketik "open remote" dan itu akan menemukan pembuka repositori untuk Anda @@ -304,7 +304,7 @@ Seperti mengatur cetak biru di kantor arsitek, pembuatan file di VSCode.dev meng 3. Masukkan nama file termasuk ekstensi yang sesuai (`style.css`, `script.js`, `index.html`) 4. Tekan Enter untuk membuat file -![Membuat file baru](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.id.png) +![Membuat file baru](../../../../translated_images/create-new-file.2814e609c2af9aeb.id.png) **Konvensi penamaan:** - Gunakan nama deskriptif yang menunjukkan tujuan file @@ -322,7 +322,7 @@ Di sinilah kesenangan sebenarnya dimulai! Editor VSCode.dev penuh dengan fitur y 2. Mulai mengetik dan lihat VSCode.dev membantu Anda dengan warna, saran, dan deteksi kesalahan 3. Simpan pekerjaan Anda dengan Ctrl+S (Windows/Linux) atau Cmd+S (Mac) – meskipun juga menyimpan otomatis! -![Mengedit file di VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.id.png) +![Mengedit file di VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08.id.png) **Hal keren yang terjadi saat Anda mengkode:** - Kode Anda diberi warna sehingga mudah dibaca @@ -343,7 +343,7 @@ Seperti bagaimana arkeolog membuat catatan rinci tentang lapisan penggalian, Git 2. File yang dimodifikasi muncul di bagian "Changes" 3. Kode warna menunjukkan jenis perubahan: hijau untuk penambahan, merah untuk penghapusan -![Melihat perubahan di Source Control](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.id.png) +![Melihat perubahan di Source Control](../../../../translated_images/working-tree.c58eec08e6335c79.id.png) **Menyimpan pekerjaan Anda (alur kerja commit):** @@ -438,7 +438,7 @@ Marketplace ekstensi sangat terorganisir, jadi Anda tidak akan tersesat saat men 2. Jelajahi atau cari sesuatu yang spesifik 3. Klik apa pun yang terlihat menarik untuk mempelajari lebih lanjut -![Antarmuka marketplace ekstensi](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.id.png) +![Antarmuka marketplace ekstensi](../../../../translated_images/extensions.eca0e0c7f59a10b5.id.png) **Apa yang akan Anda temukan di sana:** @@ -491,7 +491,7 @@ Sebagian besar ekstensi memiliki pengaturan yang dapat Anda sesuaikan agar beker 3. Pilih "Pengaturan Ekstensi" dari dropdown 4. Sesuaikan hingga terasa pas untuk alur kerja Anda -![Menyesuaikan pengaturan ekstensi](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.id.png) +![Menyesuaikan pengaturan ekstensi](../../../../translated_images/extension-settings.21c752ae4f4cdb78.id.png) **Hal-hal umum yang mungkin ingin Anda sesuaikan:** - Bagaimana kode Anda diformat (tab vs spasi, panjang baris, dll.) diff --git a/translations/id/8-code-editor/1-using-a-code-editor/assignment.md b/translations/id/8-code-editor/1-using-a-code-editor/assignment.md index ea0494b7a..15c8f8819 100644 --- a/translations/id/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/id/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ Karena VSCode.dev membutuhkan setidaknya satu file untuk membuka repositori, kit 4. **Tulis** pesan commit: "Tambahkan struktur HTML awal" 5. **Klik** "Commit new file" untuk menyimpan perubahan Anda -![Membuat file awal di GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.id.png) +![Membuat file awal di GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056.id.png) **Apa yang dicapai oleh pengaturan awal ini:** - **Membangun** struktur dokumen HTML5 yang tepat dengan elemen semantik @@ -104,7 +104,7 @@ Setelah fondasi repositori Anda dibuat, mari beralih ke VSCode.dev untuk pekerja ✅ **Indikator keberhasilan**: Anda akan melihat file proyek Anda di sidebar Explorer dan `index.html` tersedia untuk diedit di area editor utama. -![Proyek dimuat di VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.id.png) +![Proyek dimuat di VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.id.png) **Apa yang akan Anda lihat di antarmuka:** - **Sidebar Explorer**: **Menampilkan** file dan struktur folder repositori Anda @@ -448,7 +448,7 @@ Ekstensi meningkatkan pengalaman pengembangan Anda dengan menyediakan kemampuan **Hasil langsung setelah instalasi:** Setelah CodeSwing diinstal, Anda akan melihat preview langsung dari website resume Anda muncul di editor. Ini memungkinkan Anda melihat dengan tepat bagaimana tampilan situs Anda saat Anda membuat perubahan. -![Ekstensi CodeSwing menampilkan preview langsung](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.id.png) +![Ekstensi CodeSwing menampilkan preview langsung](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.id.png) **Memahami antarmuka yang ditingkatkan:** - **Tampilan terpisah**: **Menampilkan** kode Anda di satu sisi dan preview langsung di sisi lain diff --git a/translations/id/9-chat-project/README.md b/translations/id/9-chat-project/README.md index d8dc0617c..82dc65d40 100644 --- a/translations/id/9-chat-project/README.md +++ b/translations/id/9-chat-project/README.md @@ -61,7 +61,7 @@ print(response.choices[0].message.content) Berikut adalah tampilan proyek akhir Anda: -![Antarmuka aplikasi chat yang menunjukkan percakapan antara pengguna dan asisten AI](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.id.png) +![Antarmuka aplikasi chat yang menunjukkan percakapan antara pengguna dan asisten AI](../../../translated_images/screenshot.0a1ee0d123df681b.id.png) ## 🗺️ Perjalanan Belajar Anda Melalui Pengembangan Aplikasi AI @@ -194,7 +194,7 @@ mindmap **Prinsip Inti**: Pengembangan aplikasi AI menggabungkan keterampilan pengembangan web tradisional dengan integrasi layanan AI, menciptakan aplikasi cerdas yang terasa alami dan responsif bagi pengguna. -![Antarmuka GitHub Models AI Playground dengan pilihan model dan area pengujian](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.id.png) +![Antarmuka GitHub Models AI Playground dengan pilihan model dan area pengujian](../../../translated_images/playground.d2b927122224ff8f.id.png) **Inilah yang membuat playground sangat berguna:** - **Coba** berbagai model AI seperti GPT-4o-mini, Claude, dan lainnya (semuanya gratis!) @@ -204,7 +204,7 @@ mindmap Setelah Anda mencoba-coba sedikit, cukup klik tab "Code" dan pilih bahasa pemrograman Anda untuk mendapatkan kode implementasi yang Anda butuhkan. -![Pilihan playground menunjukkan opsi pembuatan kode untuk berbagai bahasa pemrograman](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.id.png) +![Pilihan playground menunjukkan opsi pembuatan kode untuk berbagai bahasa pemrograman](../../../translated_images/playground-choice.1d23ba7d407f4758.id.png) ## Menyiapkan Integrasi Backend Python @@ -2365,14 +2365,14 @@ Ingin mencoba proyek ini di lingkungan pengembangan cloud? GitHub Codespaces men - **Arahkan** ke [repository Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) - **Klik** "Use this template" di sudut kanan atas (pastikan Anda sudah masuk ke GitHub) -![Antarmuka pembuatan dari template yang menunjukkan tombol hijau "Use this template"](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.id.png) +![Antarmuka pembuatan dari template yang menunjukkan tombol hijau "Use this template"](../../../translated_images/template.67ad477109d29a2b.id.png) **Langkah 2: Luncurkan Codespaces** - **Buka** repository yang baru Anda buat - **Klik** tombol hijau "Code" dan pilih "Codespaces" - **Pilih** "Create codespace on main" untuk memulai lingkungan pengembangan Anda -![Antarmuka pembuatan codespace dengan opsi untuk meluncurkan lingkungan pengembangan cloud](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.id.png) +![Antarmuka pembuatan codespace dengan opsi untuk meluncurkan lingkungan pengembangan cloud](../../../translated_images/codespace.bcecbdf5d2747d3d.id.png) **Langkah 3: Konfigurasi Lingkungan** Setelah Codespace Anda dimuat, Anda akan memiliki akses ke: diff --git a/translations/id/README.md b/translations/id/README.md index d0649515b..0f3aff37d 100644 --- a/translations/id/README.md +++ b/translations/id/README.md @@ -1,130 +1,144 @@ -[![Lisensi GitHub](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) -[![Kontributor GitHub](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) -[![Masalah GitHub](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) -[![Permintaan Tarik GitHub](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) -[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) +[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) +[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) +[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) +[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) -[![Pengamat GitHub](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) -[![Fork GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) -[![Bintang GitHub](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) +[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) +[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) +[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) -[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) + +# Pengembangan Web untuk Pemula - Kurikulum + +Pelajari dasar-dasar pengembangan web dengan kursus komprehensif selama 12 minggu dari Microsoft Cloud Advocates. Setiap dari 24 pelajaran mendalami JavaScript, CSS, dan HTML melalui proyek langsung seperti terarium, ekstensi browser, dan permainan luar angkasa. Terlibat dengan kuis, diskusi, dan tugas praktis. Tingkatkan keterampilan Anda dan optimalkan retensi pengetahuan Anda dengan pedagogi berbasis proyek yang efektif. Mulailah perjalanan coding Anda hari ini! + +Bergabunglah dengan Komunitas Discord Azure AI Foundry + +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) + +Ikuti langkah-langkah ini untuk memulai menggunakan sumber daya ini: +1. **Fork Repository**: Klik [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +2. **Klon Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**Bergabunglah dengan Azure AI Foundry Discord dan temui ahli serta pengembang lainnya**](https://discord.com/invite/ByRwuEEgH4) -# Pengembangan Web untuk Pemula - Kurikulum +### 🌐 Dukungan Multi-Bahasa -Pelajari dasar-dasar pengembangan web dengan kursus 12 minggu yang komprehensif dari Microsoft Cloud Advocates. Setiap dari 24 pelajaran membahas JavaScript, CSS, dan HTML melalui proyek langsung seperti terrarium, ekstensi browser, dan permainan luar angkasa. Ikuti kuis, diskusi, dan tugas praktis. Tingkatkan keterampilan Anda dan optimalkan pemahaman Anda dengan pendekatan pembelajaran berbasis proyek kami yang efektif. Mulailah perjalanan coding Anda hari ini! +#### Didukung melalui GitHub Action (Otomatis & Selalu Terbaru) -Bergabunglah dengan Komunitas Discord Azure AI Foundry + +[Arab](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgaria](../bg/README.md) | [Burma (Myanmar)](../my/README.md) | [Cina (Sederhana)](../zh/README.md) | [Cina (Tradisional, Hong Kong)](../hk/README.md) | [Cina (Tradisional, Macau)](../mo/README.md) | [Cina (Tradisional, Taiwan)](../tw/README.md) | [Kroasia](../hr/README.md) | [Ceko](../cs/README.md) | [Denmark](../da/README.md) | [Belanda](../nl/README.md) | [Estonia](../et/README.md) | [Finlandia](../fi/README.md) | [Perancis](../fr/README.md) | [Jerman](../de/README.md) | [Yunani](../el/README.md) | [Ibrani](../he/README.md) | [Hindi](../hi/README.md) | [Hongaria](../hu/README.md) | [Indonesia](./README.md) | [Italia](../it/README.md) | [Jepang](../ja/README.md) | [Kannada](../kn/README.md) | [Korea](../ko/README.md) | [Lituania](../lt/README.md) | [Melayu](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Pidgin Nigeria](../pcm/README.md) | [Norwegia](../no/README.md) | [Persia (Farsi)](../fa/README.md) | [Polandia](../pl/README.md) | [Portugis (Brasil)](../br/README.md) | [Portugis (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Rumania](../ro/README.md) | [Rusia](../ru/README.md) | [Serbia (Sirilik)](../sr/README.md) | [Slowakia](../sk/README.md) | [Slovenia](../sl/README.md) | [Spanyol](../es/README.md) | [Swahili](../sw/README.md) | [Swedia](../sv/README.md) | [Tagalog (Filipina)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turki](../tr/README.md) | [Ukraina](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnam](../vi/README.md) -[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) +> **Lebih Suka Kloning Lokal?** -Ikuti langkah-langkah ini untuk mulai menggunakan sumber daya ini: -1. **Fork Repositori**: Klik [![Fork GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **Clone Repositori**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Bergabunglah dengan Azure AI Foundry Discord dan temui para ahli serta pengembang lainnya**](https://discord.com/invite/ByRwuEEgH4) +> Repository ini memiliki lebih dari 50 terjemahan bahasa yang secara signifikan meningkatkan ukuran unduhan. Untuk mengkloning tanpa terjemahan, gunakan sparse checkout: +> ```bash +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' +> ``` +> Ini memberi Anda semua yang Anda butuhkan untuk menyelesaikan kursus dengan unduhan yang jauh lebih cepat. + -### 🌐 Dukungan Multi-Bahasa +**Jika Anda ingin mendukung bahasa tambahan, daftar bahasa yang didukung tersedia [di sini](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** -#### Didukung melalui GitHub Action (Otomatis & Selalu Terbaru) +[![Buka di Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) - -[Arab](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgaria](../bg/README.md) | [Burma (Myanmar)](../my/README.md) | [Cina (Sederhana)](../zh/README.md) | [Cina (Tradisional, Hong Kong)](../hk/README.md) | [Cina (Tradisional, Makau)](../mo/README.md) | [Cina (Tradisional, Taiwan)](../tw/README.md) | [Kroasia](../hr/README.md) | [Ceko](../cs/README.md) | [Denmark](../da/README.md) | [Belanda](../nl/README.md) | [Estonia](../et/README.md) | [Finlandia](../fi/README.md) | [Prancis](../fr/README.md) | [Jerman](../de/README.md) | [Yunani](../el/README.md) | [Ibrani](../he/README.md) | [Hindi](../hi/README.md) | [Hungaria](../hu/README.md) | [Indonesia](./README.md) | [Italia](../it/README.md) | [Jepang](../ja/README.md) | [Korea](../ko/README.md) | [Lituania](../lt/README.md) | [Melayu](../ms/README.md) | [Marathi](../mr/README.md) | [Nepal](../ne/README.md) | [Norwegia](../no/README.md) | [Persia (Farsi)](../fa/README.md) | [Polandia](../pl/README.md) | [Portugis (Brasil)](../br/README.md) | [Portugis (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Rumania](../ro/README.md) | [Rusia](../ru/README.md) | [Serbia (Kiril)](../sr/README.md) | [Slovakia](../sk/README.md) | [Slovenia](../sl/README.md) | [Spanyol](../es/README.md) | [Swahili](../sw/README.md) | [Swedia](../sv/README.md) | [Tagalog (Filipina)](../tl/README.md) | [Tamil](../ta/README.md) | [Thailand](../th/README.md) | [Turki](../tr/README.md) | [Ukraina](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnam](../vi/README.md) - +#### 🧑‍🎓 _Apakah Anda seorang pelajar?_ -**Jika Anda ingin menambahkan bahasa terjemahan lainnya, daftar bahasa yang didukung tersedia [di sini](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +Kunjungi [**halaman Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) di mana Anda akan menemukan sumber daya pemula, paket pelajar, dan bahkan cara mendapatkan voucher sertifikat gratis. Ini adalah halaman yang ingin Anda tandai dan periksa dari waktu ke waktu karena kami mengganti konten setiap bulan. -[![Buka di Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +### 📣 Pengumuman - Tantangan mode GitHub Copilot Agent baru untuk diselesaikan! -#### 🧑‍🎓 _Apakah Anda seorang pelajar?_ +Tantangan Baru ditambahkan, cari "GitHub Copilot Agent Challenge 🚀" di sebagian besar bab. Itu adalah tantangan baru bagi Anda untuk diselesaikan menggunakan GitHub Copilot dan mode Agent. Jika Anda belum pernah menggunakan mode Agent sebelumnya, mode ini mampu tidak hanya menghasilkan teks tetapi juga membuat dan mengedit file, menjalankan perintah, dan banyak lagi. -Kunjungi [**Halaman Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) di mana Anda akan menemukan sumber daya untuk pemula, paket pelajar, dan bahkan cara mendapatkan voucher sertifikat gratis. Halaman ini adalah yang perlu Anda tandai dan periksa dari waktu ke waktu karena kontennya diperbarui setiap bulan. +### 📣 Pengumuman - _Proyek Baru untuk dibangun menggunakan Generative AI_ -### 📣 Pengumuman - Tantangan mode Agen GitHub Copilot baru untuk diselesaikan! +Proyek AI Assistant baru saja ditambahkan, lihat [proyek](./9-chat-project/README.md) -Tantangan baru ditambahkan, cari "Tantangan Agen GitHub Copilot 🚀" di sebagian besar bab. Ini adalah tantangan baru untuk Anda selesaikan menggunakan GitHub Copilot dan mode Agen. Jika Anda belum pernah menggunakan mode Agen sebelumnya, mode ini mampu tidak hanya menghasilkan teks tetapi juga membuat dan mengedit file, menjalankan perintah, dan banyak lagi. +### 📣 Pengumuman - _Kurikulum Baru_ tentang Generative AI untuk JavaScript baru saja dirilis -### 📣 Pengumuman - _Proyek Baru untuk Dibangun menggunakan Generative AI_ +Jangan lewatkan kurikulum Generative AI baru kami! -Proyek Asisten AI baru saja ditambahkan, cek [proyek](./09-chat-project/README.md) +Kunjungi [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk memulai! -### 📣 Pengumuman - _Kurikulum Baru_ tentang Generative AI untuk JavaScript baru saja dirilis +![Latar Belakang](../../translated_images/background.148a8d43afde5730.id.png) -Jangan lewatkan kurikulum Generative AI baru kami! +- Pelajaran mencakup segala sesuatu dari dasar hingga RAG. +- Berinteraksilah dengan karakter sejarah menggunakan GenAI dan aplikasi pendamping kami. +- Narasi yang menyenangkan dan menarik, Anda akan melakukan perjalanan waktu! -Kunjungi [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk memulai! +![karakter](../../translated_images/character.5c0dd8e067ffd693.id.png) -![Latar Belakang](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.id.png) -- Pelajaran mencakup segalanya dari dasar hingga RAG. -- Berinteraksi dengan tokoh sejarah menggunakan GenAI dan aplikasi pendamping kami. -- Narasi yang menyenangkan dan menarik, Anda akan melakukan perjalanan waktu! +Setiap pelajaran mencakup tugas untuk diselesaikan, pemeriksaan pengetahuan, dan tantangan untuk membimbing Anda mempelajari topik seperti: +- Prompting dan rekayasa prompt +- Pembuatan aplikasi teks dan gambar +- Aplikasi pencarian -![Karakter](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.id.png) +Kunjungi [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) untuk memulai! -Setiap pelajaran mencakup tugas untuk diselesaikan, pemeriksaan pengetahuan, dan tantangan untuk memandu Anda mempelajari topik seperti: -- Prompting dan rekayasa prompt -- Pembuatan aplikasi teks dan gambar -- Aplikasi pencarian -Kunjungi [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk memulai! -## 🌱 Memulai +## 🌱 Memulai -> **Guru**, kami telah [menyertakan beberapa saran](for-teachers.md) tentang cara menggunakan kurikulum ini. Kami akan senang mendengar umpan balik Anda [di forum diskusi kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **Guru**, kami telah [menyertakan beberapa saran](for-teachers.md) tentang cara menggunakan kurikulum ini. Kami ingin mendengar umpan balik Anda [di forum diskusi kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Pelajar](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, untuk setiap pelajaran, mulailah dengan kuis pra-kuliah dan lanjutkan dengan membaca materi kuliah, menyelesaikan berbagai aktivitas, dan periksa pemahaman Anda dengan kuis pasca-kuliah. +**[Pelajar](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, untuk setiap pelajaran, mulai dengan kuis pra-ceramah dan ikuti dengan membaca materi ceramah, menyelesaikan berbagai aktivitas, dan periksa pemahaman Anda dengan kuis pasca-ceramah. -Untuk meningkatkan pengalaman belajar Anda, hubungkan dengan teman-teman Anda untuk mengerjakan proyek bersama! Diskusi sangat dianjurkan di [forum diskusi kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) di mana tim moderator kami akan tersedia untuk menjawab pertanyaan Anda. +Untuk meningkatkan pengalaman belajar Anda, hubungkan dengan rekan Anda untuk mengerjakan proyek bersama! Diskusi sangat dianjurkan di [forum diskusi kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) di mana tim moderator kami akan siap menjawab pertanyaan Anda. -Untuk melanjutkan pendidikan Anda, kami sangat merekomendasikan menjelajahi [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) untuk bahan belajar tambahan. +Untuk memperdalam pendidikan Anda, kami sangat merekomendasikan menjelajahi [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) untuk materi studi tambahan. -### 📋 Menyiapkan lingkungan Anda +### 📋 Menyiapkan lingkungan Anda -Kurikulum ini memiliki lingkungan pengembangan yang siap digunakan! Saat Anda memulai, Anda dapat memilih untuk menjalankan kurikulum di [Codespace](https://github.com/features/codespaces/) (_lingkungan berbasis browser, tidak perlu instalasi_), atau secara lokal di komputer Anda menggunakan editor teks seperti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Kurikulum ini memiliki lingkungan pengembangan yang siap digunakan! Saat Anda memulai, Anda dapat memilih menjalankan kurikulum dalam [Codespace](https://github.com/features/codespaces/) (_lingkungan berbasis browser tanpa perlu instalasi_), atau secara lokal di komputer Anda menggunakan editor teks seperti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). -#### Buat repositori Anda -Agar Anda dapat dengan mudah menyimpan pekerjaan Anda, disarankan untuk membuat salinan repositori ini. Anda dapat melakukannya dengan mengklik tombol **Use this template** di bagian atas halaman. Ini akan membuat repositori baru di akun GitHub Anda dengan salinan kurikulum. +#### Buat repository Anda +Agar Anda mudah menyimpan pekerjaan Anda, disarankan agar Anda membuat salinan repository ini sendiri. Anda dapat melakukannya dengan mengklik tombol **Use this template** di bagian atas halaman. Ini akan membuat repository baru di akun GitHub Anda dengan salinan kurikulum. -Ikuti langkah-langkah ini: -1. **Fork Repositori**: Klik tombol "Fork" di sudut kanan atas halaman ini. -2. **Clone Repositori**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +Ikuti langkah-langkah ini: +1. **Fork Repository**: Klik tombol "Fork" di sudut kanan atas halaman ini. +2. **Klon Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### Menjalankan kurikulum di Codespace +#### Menjalankan kurikulum di Codespace -Di salinan repositori Anda yang telah dibuat, klik tombol **Code** dan pilih **Open with Codespaces**. Ini akan membuat Codespace baru untuk Anda bekerja. +Dalam salinan repository ini yang Anda buat, klik tombol **Code** dan pilih **Open with Codespaces**. Ini akan membuat Codespace baru untuk Anda bekerja di dalamnya. -![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.id.png) +![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.id.png) -#### Menjalankan kurikulum secara lokal di komputer Anda +#### Menjalankan kurikulum secara lokal di komputer Anda -Untuk menjalankan kurikulum ini secara lokal di komputer Anda, Anda memerlukan editor teks, browser, dan alat baris perintah. Pelajaran pertama kami, [Pengenalan Bahasa Pemrograman dan Alat yang Digunakan](../../1-getting-started-lessons/1-intro-to-programming-languages), akan memandu Anda melalui berbagai opsi untuk setiap alat ini agar Anda dapat memilih yang paling sesuai untuk Anda. +Untuk menjalankan kurikulum ini secara lokal di komputer Anda, Anda memerlukan editor teks, browser, dan alat baris perintah. Pelajaran pertama kami, [Pendahuluan tentang Bahasa Pemrograman dan Alat-Alat Dagang](../../1-getting-started-lessons/1-intro-to-programming-languages), akan memandu Anda melalui berbagai opsi untuk masing-masing alat ini agar Anda dapat memilih yang paling cocok untuk Anda. -Rekomendasi kami adalah menggunakan [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) sebagai editor Anda, yang juga memiliki [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) bawaan. Anda dapat mengunduh Visual Studio Code [di sini](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Rekomendasi kami adalah menggunakan [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) sebagai editor Anda, yang juga memiliki [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) bawaan. Anda dapat mengunduh Visual Studio Code [di sini](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). -1. Clone repositori Anda ke komputer Anda. Anda dapat melakukannya dengan mengklik tombol **Code** dan menyalin URL: - [CodeSpace](./images/createcodespace.png) +1. Klon repository Anda ke komputer Anda. Anda dapat melakukannya dengan mengklik tombol **Code** dan menyalin URL: - Kemudian, buka [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) di dalam [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) dan jalankan perintah berikut, mengganti `` dengan URL yang baru saja Anda salin: + [CodeSpace](./images/createcodespace.png) +Kemudian, buka [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) di dalam [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) dan jalankan perintah berikut, ganti `` dengan URL yang baru saja Anda salin: ```bash git clone ``` - -2. Buka folder di Visual Studio Code. Anda dapat melakukannya dengan mengklik **File** > **Open Folder** dan memilih folder yang baru saja Anda clone. -> Rekomendasi ekstensi Visual Studio Code: -> -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - untuk melihat pratinjau halaman HTML di dalam Visual Studio Code +2. Buka folder di Visual Studio Code. Anda dapat melakukannya dengan mengklik **File** > **Open Folder** dan memilih folder yang baru saja Anda kloning. + + +> Ekstensi Visual Studio Code yang direkomendasikan: +> +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - untuk pratinjau halaman HTML di dalam Visual Studio Code > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - untuk membantu Anda menulis kode lebih cepat ## 📂 Setiap pelajaran mencakup: @@ -133,45 +147,45 @@ Rekomendasi kami adalah menggunakan [Visual Studio Code](https://code.visualstud - video tambahan opsional - kuis pemanasan sebelum pelajaran - pelajaran tertulis -- untuk pelajaran berbasis proyek, panduan langkah demi langkah tentang cara membangun proyek +- untuk pelajaran berbasis proyek, panduan langkah demi langkah untuk membangun proyek - pemeriksaan pengetahuan - tantangan - bacaan tambahan - tugas -- [kuis setelah pelajaran](https://ff-quizzes.netlify.app/web/) +- [kuis pasca pelajaran](https://ff-quizzes.netlify.app/web/) -> **Catatan tentang kuis**: Semua kuis terdapat di folder Quiz-app, total 48 kuis dengan masing-masing tiga pertanyaan. Kuis tersedia [di sini](https://ff-quizzes.netlify.app/web/) dan aplikasi kuis dapat dijalankan secara lokal atau di-deploy ke Azure; ikuti instruksi di folder `quiz-app`. +> **Catatan tentang kuis**: Semua kuis terdapat dalam folder Quiz-app, total 48 kuis dengan tiga pertanyaan masing-masing. Kuis tersedia [di sini](https://ff-quizzes.netlify.app/web/) aplikasi kuis dapat dijalankan secara lokal atau diterapkan ke Azure; ikuti instruksi di folder `quiz-app`. ## 🗃️ Pelajaran -| | Nama Proyek | Konsep yang Diajarkan | Tujuan Pembelajaran | Tautan Pelajaran | Penulis | -| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------: | :----------------------: | -| 01 | Memulai | Pengantar Pemrograman dan Alat yang Digunakan | Pelajari dasar-dasar di balik sebagian besar bahasa pemrograman dan perangkat lunak yang membantu pengembang profesional bekerja | [Pengantar Bahasa Pemrograman dan Alat yang Digunakan](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Memulai | Dasar-dasar GitHub, termasuk bekerja dalam tim | Cara menggunakan GitHub dalam proyek Anda, cara berkolaborasi dengan orang lain pada basis kode | [Pengantar GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Memulai | Aksesibilitas | Pelajari dasar-dasar aksesibilitas web | [Dasar-dasar Aksesibilitas](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | Dasar JS | Tipe Data JavaScript | Dasar-dasar tipe data JavaScript | [Tipe Data](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | Dasar JS | Fungsi dan Metode | Pelajari tentang fungsi dan metode untuk mengelola alur logika aplikasi | [Fungsi dan Metode](./2-js-basics/2-functions-methods/README.md) | Jasmine dan Christopher | -| 06 | Dasar JS | Membuat Keputusan dengan JS | Pelajari cara membuat kondisi dalam kode Anda menggunakan metode pengambilan keputusan | [Membuat Keputusan](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | Dasar JS | Array dan Loop | Bekerja dengan data menggunakan array dan loop di JavaScript | [Array dan Loop](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML dalam Praktik | Bangun HTML untuk membuat terrarium online, dengan fokus pada membangun tata letak | [Pengantar HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS dalam Praktik | Bangun CSS untuk menata terrarium online, dengan fokus pada dasar-dasar CSS termasuk membuat halaman responsif | [Pengantar CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | Penutupan JavaScript, manipulasi DOM | Bangun JavaScript untuk membuat terrarium berfungsi sebagai antarmuka seret/lepas, dengan fokus pada penutupan dan manipulasi DOM | [Penutupan JavaScript, manipulasi DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | Membangun Game Mengetik | Pelajari cara menggunakan peristiwa keyboard untuk menggerakkan logika aplikasi JavaScript Anda | [Pemrograman Berbasis Peristiwa](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bekerja dengan Browser | Pelajari cara kerja browser, sejarahnya, dan cara membuat elemen pertama dari ekstensi browser | [Tentang Browser](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Membangun formulir, memanggil API, dan menyimpan variabel di penyimpanan lokal | Bangun elemen JavaScript dari ekstensi browser Anda untuk memanggil API menggunakan variabel yang disimpan di penyimpanan lokal | [API, Formulir, dan Penyimpanan Lokal](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Proses latar belakang di browser, kinerja web | Gunakan proses latar belakang browser untuk mengelola ikon ekstensi; pelajari tentang kinerja web dan beberapa optimasi untuk meningkatkan | [Tugas Latar Belakang dan Kinerja](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Space Game](./6-space-game/solution/README.md) | Pengembangan Game Lanjutan dengan JavaScript | Pelajari tentang Pewarisan menggunakan Kelas dan Komposisi serta pola Pub/Sub, sebagai persiapan untuk membangun game | [Pengantar Pengembangan Game Lanjutan](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Space Game](./6-space-game/solution/README.md) | Menggambar ke kanvas | Pelajari tentang API Kanvas, yang digunakan untuk menggambar elemen ke layar | [Menggambar ke Kanvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](./6-space-game/solution/README.md) | Memindahkan elemen di layar | Temukan cara elemen dapat bergerak menggunakan koordinat kartesian dan API Kanvas | [Memindahkan Elemen](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](./6-space-game/solution/README.md) | Deteksi tabrakan | Buat elemen bertabrakan dan bereaksi satu sama lain menggunakan penekanan tombol dan sediakan fungsi cooldown untuk memastikan kinerja game | [Deteksi Tabrakan](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](./6-space-game/solution/README.md) | Menjaga skor | Lakukan perhitungan matematika berdasarkan status dan kinerja game | [Menjaga Skor](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Space Game](./6-space-game/solution/README.md) | Mengakhiri dan memulai ulang game | Pelajari tentang mengakhiri dan memulai ulang game, termasuk membersihkan aset dan mengatur ulang nilai variabel | [Kondisi Akhir](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Banking App](./7-bank-project/solution/README.md) | Template HTML dan Rute dalam Aplikasi Web | Pelajari cara membuat kerangka arsitektur situs web multipage menggunakan routing dan template HTML | [Template HTML dan Rute](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banking App](./7-bank-project/solution/README.md) | Membangun Formulir Login dan Registrasi | Pelajari tentang membangun formulir dan menangani rutinitas validasi | [Formulir](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Banking App](./7-bank-project/solution/README.md) | Metode Mengambil dan Menggunakan Data | Bagaimana data mengalir masuk dan keluar dari aplikasi Anda, cara mengambilnya, menyimpannya, dan membuangnya | [Data](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Banking App](./7-bank-project/solution/README.md) | Konsep Manajemen Status | Pelajari cara aplikasi Anda mempertahankan status dan cara mengelolanya secara programatik | [Manajemen Status](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | Bekerja dengan VScode | Pelajari cara menggunakan editor kode | [Gunakan Editor Kode VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI Assistants](./9-chat-project/README.md) | Bekerja dengan AI | Pelajari cara membangun asisten AI Anda sendiri | [Proyek Asisten AI](./9-chat-project/README.md) | Chris | +| | Nama Proyek | Konsep yang Diajarkan | Tujuan Pembelajaran | Pelajaran Terkait | Penulis | +| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | Memulai | Pengantar Pemrograman dan Alat Kerja | Pelajari dasar-dasar yang mendasari sebagian besar bahasa pemrograman dan perangkat lunak yang membantu pengembang profesional melakukan pekerjaannya | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Memulai | Dasar-dasar GitHub, termasuk bekerja dengan tim | Cara menggunakan GitHub dalam proyek Anda, cara berkolaborasi dengan orang lain pada basis kode | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Memulai | Aksesibilitas | Pelajari dasar-dasar aksesibilitas web | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | Dasar JS | Tipe Data JavaScript | Dasar-dasar tipe data JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | Dasar JS | Fungsi dan Metode | Pelajari tentang fungsi dan metode untuk mengelola alur logika aplikasi | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine dan Christopher | +| 06 | Dasar JS | Membuat Keputusan dengan JS | Pelajari cara membuat kondisi dalam kode Anda menggunakan metode pengambilan keputusan | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | Dasar JS | Array dan Loop | Bekerja dengan data menggunakan array dan loop dalam JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML dalam Praktek | Bangun HTML untuk membuat terrarium online, fokus pada membangun tata letak | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS dalam Praktek | Bangun CSS untuk memformat terrarium online, fokus pada dasar-dasar CSS termasuk membuat halaman responsif | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | Penutupan JavaScript, manipulasi DOM | Bangun JavaScript untuk membuat terrarium berfungsi sebagai antarmuka seret/jatuh, fokus pada closures dan manipulasi DOM | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typing Game](./4-typing-game/solution/README.md) | Membuat Game Mengetik | Pelajari cara menggunakan event keyboard untuk menggerakkan logika aplikasi JavaScript Anda | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bekerja dengan Browser | Pelajari cara kerja browser, sejarahnya, dan cara membuat kerangka elemen pertama ekstensi browser | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Membangun formulir, memanggil API dan menyimpan variabel di penyimpanan lokal | Bangun elemen JavaScript dari ekstensi browser Anda untuk memanggil API menggunakan variabel yang disimpan di penyimpanan lokal | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Proses latar belakang di browser, kinerja web | Gunakan proses latar belakang browser untuk mengelola ikon ekstensi; pelajari tentang kinerja web dan beberapa optimasi untuk membuat | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | Pengembangan Game Tingkat Lanjut dengan JavaScript | Pelajari tentang Pewarisan menggunakan Kelas dan Komposisi serta pola Pub/Sub, sebagai persiapan untuk membangun sebuah game | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./6-space-game/solution/README.md) | Menggambar ke kanvas | Pelajari tentang API Canvas, digunakan untuk menggambar elemen pada layar | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | Memindahkan elemen di sekitar layar | Temukan bagaimana elemen dapat bergerak menggunakan koordinat kartesius dan API Canvas | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | Deteksi tabrakan | Buat elemen bertabrakan dan bereaksi satu sama lain menggunakan penekanan tombol dan menyediakan fungsi cooldown untuk memastikan kinerja game | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | Menyimpan skor | Lakukan perhitungan matematika berdasarkan status dan kinerja game | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | Mengakhiri dan memulai ulang game | Pelajari tentang mengakhiri dan memulai ulang game, termasuk membersihkan aset dan mengatur ulang nilai variabel | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](./7-bank-project/solution/README.md) | Template HTML dan Rute dalam Aplikasi Web | Pelajari cara membuat kerangka arsitektur situs web multipage menggunakan routing dan template HTML | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banking App](./7-bank-project/solution/README.md) | Membuat Formulir Login dan Pendaftaran | Pelajari tentang membangun formulir dan menangani rutin validasi | [Forms](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | Metode Mengambil dan Menggunakan Data | Bagaimana data mengalir masuk dan keluar dari aplikasi Anda, bagaimana mengambilnya, menyimpannya, dan membuangnya | [Data](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | Konsep Manajemen State | Pelajari bagaimana aplikasi Anda mempertahankan state dan cara mengelolanya secara programatik | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../8-code-editor) | Bekerja dengan VScode | Pelajari cara menggunakan editor kode | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI Assistants](./9-chat-project/README.md) | Bekerja dengan AI | Pelajari cara membangun asisten AI Anda sendiri | [AI Assistant project](./9-chat-project/README.md) | Chris | ## 🏫 Pedagogi @@ -179,22 +193,22 @@ Kurikulum kami dirancang dengan dua prinsip pedagogi utama: * pembelajaran berbasis proyek * kuis yang sering -Program ini mengajarkan dasar-dasar JavaScript, HTML, dan CSS, serta alat dan teknik terbaru yang digunakan oleh pengembang web saat ini. Siswa akan memiliki kesempatan untuk mengembangkan pengalaman langsung dengan membangun game mengetik, terrarium virtual, ekstensi browser ramah lingkungan, game bergaya space-invader, dan aplikasi perbankan untuk bisnis. Pada akhir seri, siswa akan memiliki pemahaman yang solid tentang pengembangan web. +Program ini mengajarkan dasar-dasar JavaScript, HTML, dan CSS, serta alat dan teknik terbaru yang digunakan oleh pengembang web saat ini. Siswa akan memiliki kesempatan untuk mengembangkan pengalaman langsung dengan membangun game mengetik, terrarium virtual, ekstensi browser ramah lingkungan, game gaya space-invader, dan aplikasi perbankan untuk bisnis. Pada akhir seri, siswa akan memiliki pemahaman yang kuat tentang pengembangan web. -> 🎓 Anda dapat mengikuti beberapa pelajaran pertama dalam kurikulum ini sebagai [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) di Microsoft Learn! +> 🎓 Anda dapat mengambil beberapa pelajaran pertama dalam kurikulum ini sebagai [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) di Microsoft Learn! -Dengan memastikan bahwa konten selaras dengan proyek, proses pembelajaran menjadi lebih menarik bagi siswa dan retensi konsep akan meningkat. Kami juga menulis beberapa pelajaran awal dalam dasar-dasar JavaScript untuk memperkenalkan konsep, dipasangkan dengan video dari koleksi tutorial video "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", beberapa penulisnya berkontribusi pada kurikulum ini. +Dengan memastikan bahwa konten sesuai dengan proyek, proses dibuat lebih menarik bagi siswa dan retensi konsep akan meningkat. Kami juga menulis beberapa pelajaran pemula dalam dasar-dasar JavaScript untuk memperkenalkan konsep, dipasangkan dengan video dari koleksi tutorial video "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", beberapa penulisnya berkontribusi pada kurikulum ini. -Selain itu, kuis dengan risiko rendah sebelum kelas menetapkan niat siswa untuk mempelajari topik, sementara kuis kedua setelah kelas memastikan retensi lebih lanjut. Kurikulum ini dirancang agar fleksibel dan menyenangkan serta dapat diambil secara keseluruhan atau sebagian. Proyek dimulai dari yang kecil dan menjadi semakin kompleks pada akhir siklus 12 minggu. +Selain itu, kuis dengan taruhan rendah sebelum kelas menetapkan niat siswa untuk mempelajari suatu topik, sedangkan kuis kedua setelah kelas memastikan retensi lebih lanjut. Kurikulum ini dirancang agar fleksibel dan menyenangkan serta dapat diambil secara keseluruhan atau sebagian. Proyek dimulai dari kecil dan menjadi semakin kompleks pada akhir siklus 12 minggu. -Meskipun kami sengaja menghindari memperkenalkan kerangka kerja JavaScript untuk berkonsentrasi pada keterampilan dasar yang diperlukan sebagai pengembang web sebelum mengadopsi kerangka kerja, langkah selanjutnya yang baik setelah menyelesaikan kurikulum ini adalah mempelajari tentang Node.js melalui koleksi video lainnya: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Meskipun kami sengaja menghindari memperkenalkan kerangka kerja JavaScript untuk fokus pada keterampilan dasar yang diperlukan sebagai pengembang web sebelum mengadopsi kerangka kerja, langkah selanjutnya yang baik untuk menyelesaikan kurikulum ini adalah belajar tentang Node.js melalui koleksi video lain: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -> Kunjungi [Kode Etik](CODE_OF_CONDUCT.md) dan pedoman [Kontribusi](CONTRIBUTING.md) kami. Kami menyambut umpan balik konstruktif Anda! +> Kunjungi pedoman [Code of Conduct](CODE_OF_CONDUCT.md) dan [Contributing](CONTRIBUTING.md) kami. Kami menyambut umpan balik konstruktif Anda! ## 🧭 Akses Offline -Anda dapat menjalankan dokumentasi ini secara offline dengan menggunakan [Docsify](https://docsify.js.org/#/). Fork repositori ini, [instal Docsify](https://docsify.js.org/#/quickstart) di mesin lokal Anda, lalu di folder root repositori ini, ketik `docsify serve`. Situs web akan disajikan di port 3000 di localhost Anda: `localhost:3000`. +Anda dapat menjalankan dokumentasi ini secara offline dengan menggunakan [Docsify](https://docsify.js.org/#/). Fork repo ini, [instal Docsify](https://docsify.js.org/#/quickstart) di mesin lokal Anda, lalu di folder root repo ini, ketik `docsify serve`. Situs web akan dilayani pada port 3000 di localhost Anda: `localhost:3000`. ## 📘 PDF @@ -202,55 +216,55 @@ PDF dari semua pelajaran dapat ditemukan [di sini](https://microsoft.github.io/W ## 🎒 Kursus Lainnya - -Tim kami juga memproduksi kursus lainnya! Lihat: +Tim kami menghasilkan kursus lain! Lihat: ### LangChain -[![LangChain4j untuk Pemula](https://img.shields.io/badge/LangChain4j%20untuk%20Pemula-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) -[![LangChain.js untuk Pemula](https://img.shields.io/badge/LangChain.js%20untuk%20Pemula-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) +[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) +[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) + --- ### Azure / Edge / MCP / Agen -[![AZD untuk Pemula](https://img.shields.io/badge/AZD%20untuk%20Pemula-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) -[![Edge AI untuk Pemula](https://img.shields.io/badge/Edge%20AI%20untuk%20Pemula-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![MCP untuk Pemula](https://img.shields.io/badge/MCP%20untuk%20Pemula-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) -[![AI Agen untuk Pemula](https://img.shields.io/badge/AI%20Agen%20untuk%20Pemula-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) +[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) +[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) --- - + ### Seri AI Generatif -[![AI Generatif untuk Pemula](https://img.shields.io/badge/AI%20Generatif%20untuk%20Pemula-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![AI Generatif (.NET)](https://img.shields.io/badge/AI%20Generatif%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) -[![AI Generatif (Java)](https://img.shields.io/badge/AI%20Generatif%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) -[![AI Generatif (JavaScript)](https://img.shields.io/badge/AI%20Generatif%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) +[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) +[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) +[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) --- - + ### Pembelajaran Inti -[![ML untuk Pemula](https://img.shields.io/badge/ML%20untuk%20Pemula-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) -[![Data Science untuk Pemula](https://img.shields.io/badge/Data%20Science%20untuk%20Pemula-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) -[![AI untuk Pemula](https://img.shields.io/badge/AI%20untuk%20Pemula-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) -[![Keamanan Siber untuk Pemula](https://img.shields.io/badge/Keamanan%20Siber%20untuk%20Pemula-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) -[![Pengembangan Web untuk Pemula](https://img.shields.io/badge/Pengembangan%20Web%20untuk%20Pemula-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) -[![IoT untuk Pemula](https://img.shields.io/badge/IoT%20untuk%20Pemula-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) -[![Pengembangan XR untuk Pemula](https://img.shields.io/badge/Pengembangan%20XR%20untuk%20Pemula-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) +[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) +[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) +[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) +[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) +[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) +[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) +[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) --- - + ### Seri Copilot -[![Copilot untuk Pemrograman Berpasangan AI](https://img.shields.io/badge/Copilot%20untuk%20Pemrograman%20Berpasangan%20AI-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) -[![Copilot untuk C#/.NET](https://img.shields.io/badge/Copilot%20untuk%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) -[![Petualangan Copilot](https://img.shields.io/badge/Petualangan%20Copilot-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) +[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) +[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) +[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) ## Mendapatkan Bantuan -Jika Anda mengalami kesulitan atau memiliki pertanyaan tentang membangun aplikasi AI, bergabunglah dengan sesama pelajar dan pengembang berpengalaman dalam diskusi tentang MCP. Ini adalah komunitas yang mendukung di mana pertanyaan diterima dan pengetahuan dibagikan secara bebas. +Jika Anda mengalami kesulitan atau memiliki pertanyaan tentang membangun aplikasi AI. Bergabunglah dengan sesama pelajar dan pengembang berpengalaman dalam diskusi tentang MCP. Ini adalah komunitas yang mendukung dimana pertanyaan disambut dan pengetahuan dibagikan dengan bebas. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Jika Anda memiliki masukan produk atau menemukan kesalahan saat membangun, kunjungi: +Jika Anda memiliki umpan balik produk atau menemukan kesalahan saat membangun kunjungi: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) @@ -262,5 +276,5 @@ Repositori ini dilisensikan di bawah lisensi MIT. Lihat file [LICENSE](../../LIC **Penafian**: -Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diperhatikan bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang berwenang. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa terjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau interpretasi yang salah yang timbul dari penggunaan terjemahan ini. +Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk memberikan terjemahan yang akurat, harap diingat bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang penting, disarankan menggunakan penerjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini. \ No newline at end of file diff --git a/translations/id/for-teachers.md b/translations/id/for-teachers.md index f53242c1b..d787468e7 100644 --- a/translations/id/for-teachers.md +++ b/translations/id/for-teachers.md @@ -42,10 +42,10 @@ Kurikulum ini mencakup paket yang dapat diimpor untuk alur kerja LMS umum. - Moodle Cloud memiliki dukungan Common Cartridge yang terbatas. Lebih baik gunakan file Moodle di atas, yang juga dapat diunggah ke Canvas. - Setelah diimpor, tinjau modul, tanggal jatuh tempo, dan pengaturan kuis agar sesuai dengan jadwal semester Anda. -![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.id.png) +![Moodle](../../translated_images/moodle.94eb93d714a50cb2.id.png) > Kurikulum di kelas Moodle -![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.id.png) +![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.id.png) > Kurikulum di Canvas ### Penggunaan repositori secara langsung (tanpa Classroom) diff --git a/translations/ms/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/ms/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 684f8c1d0..9cb360e7f 100644 --- a/translations/ms/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/ms/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ Dengar, saya faham sepenuhnya jika pengaturcaraan terasa menakutkan sekarang. Ke Hari ini, kita akan meneroka alat luar biasa yang menjadikan pembangunan web moden bukan sahaja mungkin, tetapi sangat menyeronokkan. Saya bercakap tentang editor, pelayar, dan aliran kerja yang sama yang digunakan oleh pembangun di Netflix, Spotify, dan studio aplikasi indie kegemaran anda setiap hari. Dan inilah bahagian yang akan membuatkan anda menari kegembiraan: kebanyakan alat profesional ini adalah percuma! -![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.ms.png) +![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.ms.png) > Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/ms/1-getting-started-lessons/2-github-basics/README.md b/translations/ms/1-getting-started-lessons/2-github-basics/README.md index ccb8baa47..f87d2fb4e 100644 --- a/translations/ms/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/ms/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ Saya tahu ini mungkin terasa banyak pada mulanya – malah, saya masih ingat men Kita akan melalui perjalanan ini bersama-sama, satu langkah pada satu masa. Tiada tergesa-gesa, tiada tekanan – hanya anda, saya, dan beberapa alat yang sangat hebat yang akan menjadi sahabat baru anda! -![Pengenalan kepada GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.ms.png) +![Pengenalan kepada GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.ms.png) > Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -610,7 +610,7 @@ Pertama, mari kita cari repositori (atau **repo**) di GitHub yang menarik minat ✅ Cara yang baik untuk mencari repo 'mesra pemula' adalah dengan [mencari tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Salin repo secara tempatan](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.ms.png) +![Salin repo secara tempatan](../../../../translated_images/clone_repo.5085c48d666ead57.ms.png) Terdapat beberapa cara untuk menyalin kod. Salah satu cara adalah dengan "clone" kandungan repositori, menggunakan HTTPS, SSH, atau menggunakan GitHub CLI (Command Line Interface). diff --git a/translations/ms/1-getting-started-lessons/3-accessibility/README.md b/translations/ms/1-getting-started-lessons/3-accessibility/README.md index ce9f7781f..dff4a5f65 100644 --- a/translations/ms/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/ms/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Membuat Laman Web yang Mesra Akses -![Semua Tentang Kebolehcapaian](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.ms.png) +![Semua Tentang Kebolehcapaian](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.ms.png) > Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/ms/2-js-basics/1-data-types/README.md b/translations/ms/2-js-basics/1-data-types/README.md index d0d6cd36d..76e26b1ef 100644 --- a/translations/ms/2-js-basics/1-data-types/README.md +++ b/translations/ms/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Asas JavaScript: Jenis Data -![Asas JavaScript - Jenis Data](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.ms.png) +![Asas JavaScript - Jenis Data](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.ms.png) > Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/ms/2-js-basics/2-functions-methods/README.md b/translations/ms/2-js-basics/2-functions-methods/README.md index 1d9bd284f..aa7da3528 100644 --- a/translations/ms/2-js-basics/2-functions-methods/README.md +++ b/translations/ms/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Asas JavaScript: Kaedah dan Fungsi -![Asas JavaScript - Fungsi](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.ms.png) +![Asas JavaScript - Fungsi](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.ms.png) > Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/ms/2-js-basics/3-making-decisions/README.md b/translations/ms/2-js-basics/3-making-decisions/README.md index 2eed2ea90..d58d81b3c 100644 --- a/translations/ms/2-js-basics/3-making-decisions/README.md +++ b/translations/ms/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Asas JavaScript: Membuat Keputusan -![Asas JavaScript - Membuat keputusan](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.ms.png) +![Asas JavaScript - Membuat keputusan](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.ms.png) > Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/ms/2-js-basics/4-arrays-loops/README.md b/translations/ms/2-js-basics/4-arrays-loops/README.md index 99cbd8142..3f0213af7 100644 --- a/translations/ms/2-js-basics/4-arrays-loops/README.md +++ b/translations/ms/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Asas JavaScript: Array dan Gelung -![Asas JavaScript - Array](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.ms.png) +![Asas JavaScript - Array](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.ms.png) > Nota sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/ms/3-terrarium/1-intro-to-html/README.md b/translations/ms/3-terrarium/1-intro-to-html/README.md index 39ae60a63..c541fe531 100644 --- a/translations/ms/3-terrarium/1-intro-to-html/README.md +++ b/translations/ms/3-terrarium/1-intro-to-html/README.md @@ -26,7 +26,7 @@ journey Build terrarium: 5: Student ``` -![Pengenalan kepada HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.ms.png) +![Pengenalan kepada HTML](../../../../translated_images/webdev101-html.4389c2067af68e98.ms.png) > Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac) HTML, atau HyperText Markup Language, adalah asas kepada setiap laman web yang pernah anda lawati. Fikirkan HTML sebagai rangka yang memberikan struktur kepada halaman web – ia menentukan di mana kandungan diletakkan, bagaimana ia diatur, dan apa yang setiap bahagian wakili. Walaupun CSS nanti akan "menghias" HTML anda dengan warna dan susunan, dan JavaScript akan menghidupkannya dengan interaktiviti, HTML menyediakan struktur penting yang menjadikan segalanya mungkin. @@ -88,7 +88,7 @@ Anda akan mencipta folder khusus untuk projek terrarium anda dan menambah fail H 4. Dalam panel Explorer, klik ikon "New File" 5. Namakan fail anda `index.html` -![Explorer VS Code menunjukkan penciptaan fail baru](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.ms.png) +![Explorer VS Code menunjukkan penciptaan fail baru](../../../../translated_images/vs-code-index.e2986cf919471eb9.ms.png) **Pilihan 2: Menggunakan Perintah Terminal** ```bash diff --git a/translations/ms/3-terrarium/2-intro-to-css/README.md b/translations/ms/3-terrarium/2-intro-to-css/README.md index 95f9e0e67..483839a27 100644 --- a/translations/ms/3-terrarium/2-intro-to-css/README.md +++ b/translations/ms/3-terrarium/2-intro-to-css/README.md @@ -30,7 +30,7 @@ journey Glass reflections: 5: Student ``` -![Pengenalan kepada CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.ms.png) +![Pengenalan kepada CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a20.ms.png) > Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac) Ingat bagaimana HTML terrarium anda kelihatan agak asas? CSS adalah tempat kita mengubah struktur biasa itu menjadi sesuatu yang menarik secara visual. @@ -205,7 +205,7 @@ body { Buka alat pembangun pelayar anda (F12), navigasi ke tab Elemen, dan periksa elemen `

` anda. Anda akan melihat bahawa ia mewarisi keluarga fon dari body: -![fon diwarisi](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.ms.png) +![fon diwarisi](../../../../translated_images/1.cc07a5cbe114ad1d.ms.png) ✅ **Masa Eksperimen**: Cuba tetapkan sifat lain yang boleh diwarisi pada `` seperti `color`, `line-height`, atau `text-align`. Apa yang berlaku pada tajuk dan elemen lain anda? @@ -599,7 +599,7 @@ Bersedia untuk meningkatkan terrarium anda dengan refleksi kaca yang realistik? Anda akan mencipta sorotan halus yang mensimulasikan bagaimana cahaya memantul dari permukaan kaca. Pendekatan ini serupa dengan bagaimana pelukis Renaissance seperti Jan van Eyck menggunakan cahaya dan pantulan untuk membuat kaca yang dilukis kelihatan tiga dimensi. Berikut adalah apa yang anda sasarkan: -![terrarium siap](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.ms.png) +![terrarium siap](../../../../translated_images/terrarium-final.2f07047ffc597d0a.ms.png) **Cabaran anda:** - **Cipta** bentuk bujur putih atau warna terang untuk refleksi kaca diff --git a/translations/ms/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/ms/3-terrarium/3-intro-to-DOM-and-closures/README.md index eb9599853..4d0ba0c84 100644 --- a/translations/ms/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/ms/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -26,7 +26,7 @@ journey Complete terrarium: 5: Student ``` -![DOM dan penutupan](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.ms.png) +![DOM dan penutupan](../../../../translated_images/webdev101-js.10280393044d7eaa.ms.png) > Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac) Selamat datang ke salah satu aspek paling menarik dalam pembangunan web - menjadikan sesuatu interaktif! Document Object Model (DOM) adalah seperti jambatan antara HTML dan JavaScript anda, dan hari ini kita akan menggunakannya untuk menghidupkan terrarium anda. Apabila Tim Berners-Lee mencipta pelayar web pertama, beliau membayangkan web di mana dokumen boleh menjadi dinamik dan interaktif - DOM menjadikan visi itu mungkin. @@ -105,7 +105,7 @@ flowchart TD style Q fill:#ffebee ``` -![Representasi pokok DOM](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.ms.png) +![Representasi pokok DOM](../../../../translated_images/dom-tree.7daf0e763cbbba92.ms.png) > Representasi DOM dan markup HTML yang merujuknya. Daripada [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -150,7 +150,7 @@ flowchart LR > 💡 **Memahami Penutupan**: Penutupan adalah topik penting dalam JavaScript, dan ramai pembangun menggunakannya selama bertahun-tahun sebelum memahami sepenuhnya semua aspek teori. Hari ini, kita fokus pada aplikasi praktikal - anda akan melihat penutupan muncul secara semula jadi semasa kita membina ciri interaktif kita. Pemahaman akan berkembang apabila anda melihat bagaimana ia menyelesaikan masalah sebenar. -![Representasi pokok DOM](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.ms.png) +![Representasi pokok DOM](../../../../translated_images/dom-tree.7daf0e763cbbba92.ms.png) > Representasi DOM dan markup HTML yang merujuknya. Daripada [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -598,7 +598,7 @@ Sekarang uji terrarium interaktif anda! Buka fail `index.html` anda dalam pelaya - **Sokongan merentas peranti**: Berfungsi pada desktop dan mudah alih - **Sedarkan prestasi**: Tiada kebocoran memori atau pengiraan berlebihan -![terrarium siap](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.ms.png) +![terrarium siap](../../../../translated_images/terrarium-final.0920f16e87c13a84.ms.png) --- diff --git a/translations/ms/3-terrarium/README.md b/translations/ms/3-terrarium/README.md index 35c204704..bdc0a0bcf 100644 --- a/translations/ms/3-terrarium/README.md +++ b/translations/ms/3-terrarium/README.md @@ -1,45 +1,30 @@ -# Terrarium Saya: Projek untuk belajar tentang HTML, CSS, dan manipulasi DOM menggunakan JavaScript 🌵🌱 +## Terbitkan Terrarium anda -Sebuah meditasi kod kecil dengan fungsi seret dan lepas. Dengan sedikit HTML, JS, dan CSS, anda akan dapat membina antara muka web, menggayakannya, dan bahkan menambah pelbagai interaksi pilihan anda. - -![terrarium saya](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.ms.png) - -# Pelajaran - -1. [Pengenalan kepada HTML](./1-intro-to-html/README.md) -2. [Pengenalan kepada CSS](./2-intro-to-css/README.md) -3. [Pengenalan kepada DOM dan Penutupan JS](./3-intro-to-DOM-and-closures/README.md) - -## Kredit - -Ditulis dengan ♥️ oleh [Jen Looper](https://www.twitter.com/jenlooper) - -Terrarium yang dibuat menggunakan CSS diilhamkan oleh balang kaca Jakub Mandra [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY). - -Karya seni dilukis tangan oleh [Jen Looper](http://jenlooper.com) dengan bantuan Procreate. - -## Terbitkan Terrarium Anda - -Anda boleh menerbitkan atau memaparkan terrarium anda di web menggunakan Azure Static Web Apps. +Anda boleh menerbitkan, atau memaparkan Terrarium anda di web menggunakan **Azure Static Web Apps**. 1. Fork repositori ini -2. Tekan butang ini +2. Tekan butang ini 👇 -[![Butang Terbitkan ke Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp) +[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp) -3. Ikuti panduan wizard untuk mencipta aplikasi anda. Pastikan anda menetapkan akar aplikasi kepada sama ada `/solution` atau akar pangkalan kod anda. Tiada API dalam aplikasi ini, jadi tidak perlu risau untuk menambahnya. Folder github akan dicipta dalam repositori yang telah anda fork, yang akan membantu perkhidmatan binaan Azure Static Web Apps membina dan menerbitkan aplikasi anda ke URL baharu. +3. Ikuti panduan penetapan untuk mencipta aplikasi anda. + - Tetapkan **App root** kepada sama ada `/solution` atau akar kod anda. + - Aplikasi ini tidak mempunyai API, jadi anda boleh langkau konfigurasi API. + - Folder `.github` akan dicipta secara automatik untuk membantu Azure Static Web Apps membina dan menerbitkan aplikasi anda. --- + **Penafian**: -Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Walaupun kami berusaha untuk memastikan ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat yang kritikal, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini. \ No newline at end of file +Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Walaupun kami berusaha untuk ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang sahih. Untuk maklumat penting, disyorkan untuk mendapatkan terjemahan profesional oleh manusia. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini. + \ No newline at end of file diff --git a/translations/ms/3-terrarium/solution/README.md b/translations/ms/3-terrarium/solution/README.md index 88b8a3f4c..03129b607 100644 --- a/translations/ms/3-terrarium/solution/README.md +++ b/translations/ms/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Sebuah meditasi kod kecil dengan fungsi seret dan lepas. Dengan sedikit HTML, JS, dan CSS, anda boleh membina antara muka web, menghiasnya, dan menambah interaksi. -![terrarium saya](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.ms.png) +![terrarium saya](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.ms.png) ## Kredit diff --git a/translations/ms/5-browser-extension/1-about-browsers/README.md b/translations/ms/5-browser-extension/1-about-browsers/README.md index 3e7a75a1a..ee917cda9 100644 --- a/translations/ms/5-browser-extension/1-about-browsers/README.md +++ b/translations/ms/5-browser-extension/1-about-browsers/README.md @@ -26,7 +26,7 @@ journey Polish experience: 5: Student ``` -![Sketchnote Penyemak Imbas](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.ms.jpg) +![Sketchnote Penyemak Imbas](../../../../translated_images/browser.60317c9be8b7f84a.ms.jpg) > Sketchnote oleh [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Kuiz Pra-Kuliah @@ -79,7 +79,7 @@ Proses ini mencerminkan bagaimana penyemak imbas pertama, WorldWideWeb, direka o ✅ **Sedikit sejarah**: Penyemak imbas pertama dipanggil 'WorldWideWeb' dan dicipta oleh Sir Timothy Berners-Lee pada tahun 1990. -![penyemak imbas awal](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.ms.jpg) +![penyemak imbas awal](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.ms.jpg) > Beberapa penyemak imbas awal, melalui [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Bagaimana Penyemak Imbas Memproses Kandungan Web @@ -198,7 +198,7 @@ quadrantChart Memahami proses pemasangan sambungan membantu anda menjangkakan pengalaman pengguna apabila orang memasang sambungan anda. Proses pemasangan adalah standard merentas penyemak imbas moden, dengan sedikit variasi dalam reka bentuk antara muka. -![tangkapan skrin penyemak imbas Edge menunjukkan halaman edge://extensions yang terbuka dan menu tetapan yang terbuka](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.ms.png) +![tangkapan skrin penyemak imbas Edge menunjukkan halaman edge://extensions yang terbuka dan menu tetapan yang terbuka](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.ms.png) > **Penting**: Pastikan untuk menghidupkan mod pembangun dan benarkan sambungan daripada kedai lain semasa menguji sambungan anda sendiri. @@ -313,10 +313,10 @@ Ini mengikuti prinsip pendedahan progresif yang digunakan dalam reka bentuk anta ### Gambaran Keseluruhan Paparan Sambungan **Paparan Persediaan** - Konfigurasi pengguna kali pertama: -![tangkapan skrin sambungan yang lengkap dibuka dalam penyemak imbas, memaparkan borang dengan input untuk nama kawasan dan kunci API.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.ms.png) +![tangkapan skrin sambungan yang lengkap dibuka dalam penyemak imbas, memaparkan borang dengan input untuk nama kawasan dan kunci API.](../../../../translated_images/1.b6da8c1394b07491.ms.png) **Paparan Hasil** - Paparan data jejak karbon: -![tangkapan skrin sambungan yang lengkap memaparkan nilai penggunaan karbon dan peratusan bahan api fosil untuk kawasan US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.ms.png) +![tangkapan skrin sambungan yang lengkap memaparkan nilai penggunaan karbon dan peratusan bahan api fosil untuk kawasan US-NEISO.](../../../../translated_images/2.1dae52ff08042246.ms.png) ### Membina Borang Konfigurasi diff --git a/translations/ms/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/ms/5-browser-extension/2-forms-browsers-local-storage/README.md index 0068be7ab..b50ec078a 100644 --- a/translations/ms/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/ms/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -268,7 +268,7 @@ stateDiagram-v2 ClearStorage --> FirstTime: Back to setup ``` -![Panel penyimpanan tempatan](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.ms.png) +![Panel penyimpanan tempatan](../../../../translated_images/localstorage.472f8147b6a3f8d1.ms.png) > ⚠️ **Pertimbangan Keselamatan**: Dalam aplikasi pengeluaran, menyimpan kunci API dalam LocalStorage menimbulkan risiko keselamatan kerana JavaScript boleh mengakses data ini. Untuk tujuan pembelajaran, pendekatan ini berfungsi dengan baik, tetapi aplikasi sebenar harus menggunakan penyimpanan pelayan yang selamat untuk kelayakan sensitif. diff --git a/translations/ms/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/ms/5-browser-extension/3-background-tasks-and-performance/README.md index d34bf93ef..b1cc78e65 100644 --- a/translations/ms/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/ms/5-browser-extension/3-background-tasks-and-performance/README.md @@ -126,7 +126,7 @@ Untuk membuka Alat Pembangun di Edge, klik tiga titik di sudut kanan atas, kemud Mari cuba ini. Buka laman web (Microsoft.com berfungsi dengan baik untuk ini) dan klik butang 'Rekod'. Sekarang segarkan halaman dan lihat profiler menangkap segala yang berlaku. Apabila anda berhenti merekod, anda akan melihat pecahan terperinci tentang bagaimana pelayar 'menykrip', 'merender', dan 'melukis' laman tersebut. Ia mengingatkan saya bagaimana pusat kawalan misi memantau setiap sistem semasa pelancaran roket - anda mendapat data masa nyata tentang apa yang berlaku dan bila. -![Profiler Edge](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.ms.png) +![Profiler Edge](../../../../translated_images/profiler.5a4a62479c5df01c.ms.png) ✅ Dokumentasi [Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) mempunyai banyak lagi butiran jika anda ingin mendalami lebih jauh @@ -136,11 +136,11 @@ Pilih elemen garis masa profil untuk memperbesar acara yang berlaku semasa halam Dapatkan gambaran prestasi halaman anda dengan memilih bahagian garis masa profil dan melihat panel ringkasan: -![Snapshot profiler Edge](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.ms.png) +![Snapshot profiler Edge](../../../../translated_images/snapshot.97750180ebcad737.ms.png) Periksa panel Log Acara untuk melihat jika ada acara yang mengambil masa lebih daripada 15 ms: -![Log acara Edge](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.ms.png) +![Log acara Edge](../../../../translated_images/log.804026979f3707e0.ms.png) ✅ Kenali profiler anda! Buka alat pembangun di laman ini dan lihat jika ada halangan. Apakah aset yang paling lambat dimuatkan? Yang paling pantas? diff --git a/translations/ms/5-browser-extension/README.md b/translations/ms/5-browser-extension/README.md index da0460be6..0bef6ee6b 100644 --- a/translations/ms/5-browser-extension/README.md +++ b/translations/ms/5-browser-extension/README.md @@ -23,7 +23,7 @@ Sambungan ini boleh dipanggil secara ad hoc oleh pengguna setelah kunci API dan ### Kredit -![sambungan pelayar berwarna hijau](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ms.png) +![sambungan pelayar berwarna hijau](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ms.png) ## Kredit diff --git a/translations/ms/5-browser-extension/solution/README.md b/translations/ms/5-browser-extension/solution/README.md index 662a42427..4bf0c83fa 100644 --- a/translations/ms/5-browser-extension/solution/README.md +++ b/translations/ms/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Menggunakan API C02 Signal daripada tmrow untuk menjejak penggunaan elektrik, bina sambungan pelayar supaya anda boleh mendapat peringatan terus di pelayar anda tentang seberapa berat penggunaan elektrik di kawasan anda. Menggunakan sambungan ini secara ad hoc akan membantu anda membuat keputusan berdasarkan maklumat ini. -![screenshot sambungan](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ms.png) +![screenshot sambungan](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ms.png) ## Memulakan @@ -31,7 +31,7 @@ npm run build Untuk memasang pada Edge, gunakan menu 'tiga titik' di sudut kanan atas pelayar untuk mencari panel Sambungan. Dari situ, pilih 'Load Unpacked' untuk memuatkan sambungan baru. Buka folder 'dist' apabila diminta, dan sambungan akan dimuatkan. Untuk menggunakannya, anda memerlukan kunci API untuk API CO2 Signal ([dapatkan satu di sini melalui emel](https://www.co2signal.com/) - masukkan emel anda di kotak pada halaman ini) dan [kod untuk kawasan anda](http://api.electricitymap.org/v3/zones) yang sepadan dengan [Electricity Map](https://www.electricitymap.org/map) (contohnya, di Boston, saya menggunakan 'US-NEISO'). -![memasang](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ms.png) +![memasang](../../../../translated_images/install-on-edge.78634f02842c4828.ms.png) Setelah kunci API dan kawasan dimasukkan ke dalam antara muka sambungan, titik berwarna di bar sambungan pelayar sepatutnya berubah untuk mencerminkan penggunaan tenaga di kawasan anda dan memberikan panduan tentang aktiviti berat tenaga yang sesuai untuk anda lakukan. Konsep di sebalik sistem 'titik' ini diilhamkan oleh [sambungan Energy Lollipop](https://energylollipop.com/) untuk pelepasan di California. diff --git a/translations/ms/5-browser-extension/solution/translation/README.fr.md b/translations/ms/5-browser-extension/solution/translation/README.fr.md index 791592271..655bd27d3 100644 --- a/translations/ms/5-browser-extension/solution/translation/README.fr.md +++ b/translations/ms/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Dengan menggunakan API C02 Signal daripada tmrow untuk menjejaki penggunaan elektrik, cipta sambungan penyemak imbas supaya anda boleh mendapat peringatan terus dalam penyemak imbas anda tentang penggunaan elektrik di kawasan anda. Penggunaan sambungan ini secara ad hoc akan membantu anda membuat keputusan berdasarkan maklumat tersebut. -![tangkapan skrin sambungan](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ms.png) +![tangkapan skrin sambungan](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ms.png) ## Memulakan @@ -31,7 +31,7 @@ npm run build Untuk memasang pada Edge, gunakan menu 'tiga titik' di sudut kanan atas penyemak imbas untuk mencari panel Sambungan. Dari situ, pilih 'Muatkan sambungan yang tidak dimampatkan' untuk memuatkan sambungan baharu. Buka folder 'dist' apabila diminta dan sambungan akan dimuatkan. Untuk menggunakannya, anda memerlukan kunci API untuk API CO2 Signal ([dapatkan satu melalui e-mel di sini](https://www.co2signal.com/) - masukkan e-mel anda dalam kotak di halaman ini) dan [kod untuk kawasan anda](http://api.electricitymap.org/v3/zones) yang sepadan dengan [Peta Elektrik](https://www.electricitymap.org/map) (contohnya, di Boston, saya menggunakan 'US-NEISO'). -![pemasangan](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ms.png) +![pemasangan](../../../../../translated_images/install-on-edge.78634f02842c4828.ms.png) Sebaik sahaja kunci API dan kawasan dimasukkan ke dalam antara muka sambungan, titik berwarna dalam bar sambungan penyemak imbas akan berubah untuk mencerminkan penggunaan tenaga di kawasan anda dan memberikan petunjuk tentang aktiviti yang menggunakan tenaga yang sesuai untuk dilakukan. Konsep di sebalik sistem 'titik' ini diilhamkan oleh [sambungan Energy Lollipop](https://energylollipop.com/) untuk pelepasan di California. diff --git a/translations/ms/5-browser-extension/solution/translation/README.hi.md b/translations/ms/5-browser-extension/solution/translation/README.hi.md index c3b0eef46..e97aa7556 100644 --- a/translations/ms/5-browser-extension/solution/translation/README.hi.md +++ b/translations/ms/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Menggunakan API C02 Signal dari tmrow untuk menjejak penggunaan elektrik, sambungan pelayar ini dibina untuk memberikan peringatan tentang seberapa berat penggunaan elektrik di kawasan anda semasa anda melayari internet. Dengan menggunakan sambungan ini, anda boleh membuat keputusan berdasarkan maklumat tersebut untuk aktiviti anda. -![Tangkap layar sambungan](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ms.png) +![Tangkap layar sambungan](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ms.png) ## Memulakan @@ -31,7 +31,7 @@ npm run build Untuk memasang di Edge, gunakan menu 'tiga titik' di sudut kanan atas pelayar untuk mencari panel sambungan. Dari situ, pilih 'Load Unpacked' untuk memuatkan sambungan baru. Pada prompt, buka folder 'dist' dan sambungan akan dimuatkan. Untuk menggunakannya, anda memerlukan kunci API CO2 Signal ([dapatkan melalui e-mel di sini](https://www.co2snal.com/) - masukkan e-mel anda dalam kotak di halaman tersebut) dan [kod kawasan anda](http://api.electricitymap.org/v3/zones) dari [Peta Elektrik](https://www.electricitymap.org/map) (contohnya, di Boston, saya menggunakan 'US-NEISO'). -![pemasangan](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ms.png) +![pemasangan](../../../../../translated_images/install-on-edge.78634f02842c4828.ms.png) Setelah kunci API dan kod kawasan dimasukkan ke dalam antara muka sambungan, titik berwarna pada bar sambungan pelayar sepatutnya berubah untuk mencerminkan penggunaan tenaga di kawasan anda dan memberikan indikator tentang aktiviti berat tenaga yang sesuai untuk dilakukan. Konsep sistem 'titik' ini diilhamkan oleh [Energy Lollipop Extension](https://energylollipop.com/) untuk pelepasan di California. diff --git a/translations/ms/5-browser-extension/solution/translation/README.it.md b/translations/ms/5-browser-extension/solution/translation/README.it.md index 3ff9659ab..cb091f36a 100644 --- a/translations/ms/5-browser-extension/solution/translation/README.it.md +++ b/translations/ms/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Anda akan menggunakan API Signal CO2 daripada tmrow untuk memantau penggunaan elektrik bagi mencipta sambungan penyemak imbas supaya anda boleh mendapatkan peringatan terus dalam penyemak imbas anda tentang betapa beratnya penggunaan elektrik di kawasan anda. Penggunaan sambungan ini secara ad hoc akan membantu menilai aktiviti anda berdasarkan maklumat ini. -![paparan sambungan](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ms.png) +![paparan sambungan](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ms.png) ## Untuk Bermula @@ -31,7 +31,7 @@ npm run build Untuk memasang pada Edge, gunakan menu "tiga titik" di sudut kanan atas penyemak imbas untuk mencari panel Sambungan. Jika belum diaktifkan, aktifkan Mod Pembangun (di bahagian bawah kiri). Pilih "Muatkan tanpa mampatan" untuk memuatkan sambungan baharu. Buka folder "dist" pada prompt dan sambungan akan dimuatkan. Untuk menggunakannya, anda memerlukan kunci API untuk API CO2 Signal (anda boleh [memperolehnya melalui e-mel di sini](https://www.co2signal.com/) - masukkan e-mel anda dalam kotak di halaman ini) dan [kod untuk kawasan anda](http://api.electricitymap.org/v3/zones) yang sepadan dengan [peta elektrik](https://www.electricitymap.org/map) (contohnya, di Boston, "US-NEISO"). -![pemasangan](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ms.png) +![pemasangan](../../../../../translated_images/install-on-edge.78634f02842c4828.ms.png) Setelah kunci API dan kawasan dimasukkan ke dalam antara muka sambungan, titik berwarna pada bar sambungan penyemak imbas sepatutnya berubah untuk mencerminkan penggunaan tenaga kawasan tersebut dan memberikan petunjuk tentang aktiviti penggunaan tenaga tinggi yang sesuai untuk dilakukan. Konsep di sebalik sistem "titik" ini telah diilhamkan oleh [sambungan Energy Lollipop](https://energylollipop.com/) untuk pelepasan di California. diff --git a/translations/ms/5-browser-extension/solution/translation/README.ja.md b/translations/ms/5-browser-extension/solution/translation/README.ja.md index 0f4eda3c5..cc745e2b8 100644 --- a/translations/ms/5-browser-extension/solution/translation/README.ja.md +++ b/translations/ms/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Gunakan API CO2 Signal daripada tmrow untuk menjejak penggunaan tenaga elektrik anda dan memaparkan peringatan di penyemak imbas tentang betapa tinggi penggunaan tenaga di kawasan anda. Sambungan penyemak imbas ini membolehkan anda membuat keputusan berdasarkan maklumat tersebut secara ad hoc. -![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ms.png) +![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ms.png) ## Pengenalan @@ -31,7 +31,7 @@ npm run build Untuk memasang di Edge, cari panel "Extensions" melalui menu "tiga titik" di bahagian atas kanan penyemak imbas. Dari situ, pilih "Load Unpacked" untuk memuatkan sambungan baharu. Apabila diminta, buka folder "dist" dan sambungan akan dimuatkan. Untuk menggunakannya, anda memerlukan kunci API CO2 Signal ([dapatkan di sini melalui e-mel](https://www.co2signal.com/) - masukkan e-mel anda di kotak pada halaman tersebut) dan [kod untuk kawasan anda](http://api.electricitymap.org/v3/zones) yang sesuai dengan [Electricity Map](https://www.electricitymap.org/map) (contohnya, di Boston gunakan 'US-NEISO'). -![installing](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ms.png) +![installing](../../../../../translated_images/install-on-edge.78634f02842c4828.ms.png) Setelah anda memasukkan kunci API dan kawasan ke dalam antara muka sambungan, titik berwarna yang dipaparkan di bar sambungan penyemak imbas akan berubah mengikut penggunaan tenaga di kawasan anda. Ini membantu anda menentukan aktiviti yang sesuai berdasarkan keperluan tenaga. Konsep sistem "titik" ini diilhamkan oleh sambungan [Energy Lollipop](https://energylollipop.com/) untuk pelepasan di California. diff --git a/translations/ms/5-browser-extension/solution/translation/README.ms.md b/translations/ms/5-browser-extension/solution/translation/README.ms.md index cbd6a9b65..d7c2d262f 100644 --- a/translations/ms/5-browser-extension/solution/translation/README.ms.md +++ b/translations/ms/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Menggunakan API Isyarat CO2 tmrow untuk memantau penggunaan elektrik, bina sambungan penyemak imbas supaya anda boleh menerima peringatan di penyemak imbas anda tentang tahap penggunaan elektrik di kawasan anda. Menggunakan sambungan ini secara khusus akan membantu anda membuat keputusan yang lebih bijak berdasarkan maklumat ini. -![tangkapan pelanjutan penyemak imbas](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ms.png) +![tangkapan pelanjutan penyemak imbas](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ms.png) ## Bermula Dari Sini @@ -31,7 +31,7 @@ npm run build Untuk memasang di Edge, gunakan menu 'tiga titik' di sudut kanan atas penyemak imbas untuk mencari panel Sambungan. Dari sana, pilih 'Load Unpacked' untuk memuatkan sambungan baru. Buka folder 'dist' apabila diminta, dan sambungan akan dimuatkan. Untuk menggunakannya, anda memerlukan kunci API untuk API Isyarat CO2 ([dapatkan satu di sini melalui e-mel](https://www.co2signal.com/) - masukkan e-mel anda di dalam kotak di halaman ini) dan [kod untuk wilayah anda](http://api.electricitymap.org/v3/zones) yang sesuai dengan [Peta Elektrik](https://www.electricitymap.org/map) (contohnya, di Boston, saya menggunakan 'US-NEISO'). -![sedang memuat turun](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ms.png) +![sedang memuat turun](../../../../../translated_images/install-on-edge.78634f02842c4828.ms.png) Setelah kunci API dan wilayah dimasukkan ke dalam antara muka sambungan, titik berwarna di bar sambungan penyemak imbas akan berubah untuk mencerminkan penggunaan tenaga di kawasan anda dan memberikan cadangan mengenai aktiviti berat yang sesuai untuk dilakukan. Konsep di sebalik sistem 'dot' ini diilhamkan oleh [sambungan penyemak imbas Lollipop Tenaga](https://energylollipop.com/) untuk pelepasan di California. diff --git a/translations/ms/5-browser-extension/start/README.md b/translations/ms/5-browser-extension/start/README.md index 622c1eeb3..7edca1890 100644 --- a/translations/ms/5-browser-extension/start/README.md +++ b/translations/ms/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Menggunakan API C02 Signal daripada tmrow untuk menjejak penggunaan elektrik, bina sambungan pelayar supaya anda boleh mendapat peringatan terus di pelayar anda tentang seberapa berat penggunaan elektrik di kawasan anda. Menggunakan sambungan ini secara ad hoc akan membantu anda membuat keputusan berdasarkan maklumat ini. -![screenshot sambungan](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.ms.png) +![screenshot sambungan](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ms.png) ## Memulakan @@ -31,7 +31,7 @@ npm run build Untuk memasang pada Edge, gunakan menu 'tiga titik' di sudut kanan atas pelayar untuk mencari panel Sambungan. Dari situ, pilih 'Load Unpacked' untuk memuatkan sambungan baru. Buka folder 'dist' apabila diminta, dan sambungan akan dimuatkan. Untuk menggunakannya, anda memerlukan kunci API untuk API CO2 Signal ([dapatkan satu di sini melalui emel](https://www.co2signal.com/) - masukkan emel anda di kotak pada halaman ini) dan [kod untuk kawasan anda](http://api.electricitymap.org/v3/zones) yang sepadan dengan [Peta Elektrik](https://www.electricitymap.org/map) (contohnya, di Boston, saya menggunakan 'US-NEISO'). -![memasang](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.ms.png) +![memasang](../../../../translated_images/install-on-edge.78634f02842c4828.ms.png) Setelah kunci API dan kawasan dimasukkan ke dalam antara muka sambungan, titik berwarna di bar sambungan pelayar sepatutnya berubah untuk mencerminkan penggunaan tenaga di kawasan anda dan memberikan anda petunjuk tentang aktiviti berat tenaga yang sesuai untuk dilakukan. Konsep di sebalik sistem 'titik' ini diilhamkan oleh [sambungan Energy Lollipop](https://energylollipop.com/) untuk pelepasan di California. diff --git a/translations/ms/6-space-game/2-drawing-to-canvas/README.md b/translations/ms/6-space-game/2-drawing-to-canvas/README.md index 2cd24a703..7856fe00a 100644 --- a/translations/ms/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/ms/6-space-game/2-drawing-to-canvas/README.md @@ -108,7 +108,7 @@ quadrantChart UI Elements: [0.9, 0.1] ``` -![grid kanvas](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.ms.png) +![grid kanvas](../../../../translated_images/canvas_grid.5f209da785ded492.ms.png) > Imej dari [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Untuk melukis pada elemen kanvas, anda akan mengikuti proses tiga langkah yang sama yang membentuk asas semua grafik kanvas. Setelah anda melakukannya beberapa kali, ia menjadi kebiasaan: @@ -329,11 +329,11 @@ Anda akan membina halaman web dengan elemen Kanvas. Ia harus memaparkan skrin hi - Kapal hero - ![Kapal hero](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.ms.png) + ![Kapal hero](../../../../translated_images/player.dd24c1afa8c71e9b.ms.png) - 5*5 raksasa - ![Kapal raksasa](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.ms.png) + ![Kapal raksasa](../../../../translated_images/enemyShip.5df2a822c16650c2.ms.png) ### Langkah yang Disyorkan untuk Memulakan Pembangunan @@ -470,7 +470,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { Hasil akhir sepatutnya kelihatan seperti ini: -![Skrin hitam dengan seorang hero dan 5*5 raksasa](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.ms.png) +![Skrin hitam dengan seorang hero dan 5*5 raksasa](../../../../translated_images/partI-solution.36c53b48c9ffae2a.ms.png) ## Penyelesaian diff --git a/translations/ms/6-space-game/5-keeping-score/README.md b/translations/ms/6-space-game/5-keeping-score/README.md index 7a36357ed..34522ae41 100644 --- a/translations/ms/6-space-game/5-keeping-score/README.md +++ b/translations/ms/6-space-game/5-keeping-score/README.md @@ -160,7 +160,7 @@ sequenceDiagram ``` - **Sistem mata**: Setiap kapal musuh yang dimusnahkan memberikan 100 mata (nombor bulat lebih mudah untuk pemain kira secara mental). Mata dipaparkan di sudut kiri bawah. -- **Pengiraan nyawa**: Wira anda bermula dengan tiga nyawa - satu standard yang ditetapkan oleh permainan arked awal untuk mengimbangi cabaran dengan kebolehmainan. Setiap perlanggaran dengan musuh mengurangkan satu nyawa. Kita akan memaparkan nyawa yang tinggal di sudut kanan bawah menggunakan ikon kapal ![imej nyawa](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.ms.png). +- **Pengiraan nyawa**: Wira anda bermula dengan tiga nyawa - satu standard yang ditetapkan oleh permainan arked awal untuk mengimbangi cabaran dengan kebolehmainan. Setiap perlanggaran dengan musuh mengurangkan satu nyawa. Kita akan memaparkan nyawa yang tinggal di sudut kanan bawah menggunakan ikon kapal ![imej nyawa](../../../../translated_images/life.6fb9f50d53ee0413.ms.png). ## Mari Mula Membina! diff --git a/translations/ms/7-bank-project/1-template-route/README.md b/translations/ms/7-bank-project/1-template-route/README.md index 7b72b7624..f5a0c35ac 100644 --- a/translations/ms/7-bank-project/1-template-route/README.md +++ b/translations/ms/7-bank-project/1-template-route/README.md @@ -652,7 +652,7 @@ sequenceDiagram Menggunakan `history.pushState` mencipta entri baru dalam sejarah navigasi pelayar. Anda boleh memeriksanya dengan menahan *butang mundur* pelayar anda, ia seharusnya memaparkan sesuatu seperti ini: -![Tangkap layar sejarah navigasi](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.ms.png) +![Tangkap layar sejarah navigasi](../../../../translated_images/history.7fdabbafa521e064.ms.png) Jika anda cuba klik pada butang mundur beberapa kali, anda akan melihat bahawa URL semasa berubah dan sejarah dikemas kini, tetapi templat yang sama terus dipaparkan. diff --git a/translations/ms/7-bank-project/2-forms/README.md b/translations/ms/7-bank-project/2-forms/README.md index e8523d550..7331a43f2 100644 --- a/translations/ms/7-bank-project/2-forms/README.md +++ b/translations/ms/7-bank-project/2-forms/README.md @@ -295,7 +295,7 @@ Pertama, mari kita perhatikan apa yang berlaku dengan penghantaran borang asas: 2. Perhatikan perubahan dalam bar alamat pelayar anda 3. Perhatikan bagaimana halaman dimuat semula dan data muncul dalam URL -![Tangkapan skrin perubahan URL pelayar selepas klik butang Daftar](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.ms.png) +![Tangkapan skrin perubahan URL pelayar selepas klik butang Daftar](../../../../translated_images/click-register.e89a30bf0d4bc9ca.ms.png) ### Perbandingan Kaedah HTTP @@ -350,7 +350,7 @@ Mari kita konfigurasikan borang pendaftaran anda untuk berkomunikasi dengan betu 2. **Klik** butang "Buat Akaun" 3. **Perhatikan** respons pelayan dalam pelayar anda -![Tetingkap pelayar di alamat localhost:5000/api/accounts, menunjukkan string JSON dengan data pengguna](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.ms.png) +![Tetingkap pelayar di alamat localhost:5000/api/accounts, menunjukkan string JSON dengan data pengguna](../../../../translated_images/form-post.61de4ca1b964d91a.ms.png) **Apa yang anda harus lihat:** - **Pelayar mengarahkan** ke URL endpoint API @@ -615,7 +615,7 @@ async function register() { 3. **Klik** "Buat Akaun" 4. **Perhatikan** mesej konsol dan maklum balas pengguna -![Tangkapan skrin menunjukkan mesej log dalam konsol pelayar](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.ms.png) +![Tangkapan skrin menunjukkan mesej log dalam konsol pelayar](../../../../translated_images/browser-console.efaf0b51aaaf6778.ms.png) **Apa yang anda patut lihat:** - **Keadaan pemuatan** muncul pada butang hantar @@ -790,7 +790,7 @@ Mari tingkatkan borang pendaftaran anda dengan pengesahan yang kukuh yang member 3. **Cuba** aksara khas dalam medan nama pengguna 4. **Masukkan** jumlah baki negatif -![Tangkapan skrin menunjukkan ralat pengesahan apabila cuba menghantar borang](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.ms.png) +![Tangkapan skrin menunjukkan ralat pengesahan apabila cuba menghantar borang](../../../../translated_images/validation-error.8bd23e98d416c22f.ms.png) **Apa yang anda akan perhatikan:** - **Pelayar memaparkan** mesej pengesahan asli @@ -952,7 +952,7 @@ Tunjukkan mesej ralat dalam HTML jika pengguna sudah wujud. Berikut adalah contoh bagaimana halaman log masuk akhir boleh kelihatan selepas sedikit gaya: -![Tangkapan skrin halaman log masuk selepas menambah gaya CSS](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.ms.png) +![Tangkapan skrin halaman log masuk selepas menambah gaya CSS](../../../../translated_images/result.96ef01f607bf856a.ms.png) ## Kuiz Selepas Kuliah diff --git a/translations/ms/7-bank-project/3-data/README.md b/translations/ms/7-bank-project/3-data/README.md index 5ff76764b..2d02f6eee 100644 --- a/translations/ms/7-bank-project/3-data/README.md +++ b/translations/ms/7-bank-project/3-data/README.md @@ -160,7 +160,7 @@ sequenceDiagram Browser->>User: Displays new page (flash/reload) ``` -![Aliran kerja kemas kini dalam aplikasi berbilang halaman](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.ms.png) +![Aliran kerja kemas kini dalam aplikasi berbilang halaman](../../../../translated_images/mpa.7f7375a1a2d4aa77.ms.png) **Kenapa pendekatan ini terasa tidak lancar:** - Setiap klik bermaksud membina semula keseluruhan halaman dari awal @@ -187,7 +187,7 @@ sequenceDiagram Browser->>User: Shows updated content (no reload) ``` -![Aliran kerja kemas kini dalam aplikasi halaman tunggal](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.ms.png) +![Aliran kerja kemas kini dalam aplikasi halaman tunggal](../../../../translated_images/spa.268ec73b41f992c2.ms.png) **Kenapa SPA terasa lebih baik:** - Hanya bahagian yang benar-benar berubah dikemas kini (bijak, bukan?) @@ -523,7 +523,7 @@ if (data.error) { Sekarang apabila anda menguji dengan akaun yang tidak sah, anda akan melihat mesej kesalahan yang berguna terus di halaman! -![Tangkapan skrin menunjukkan mesej kesalahan yang dipaparkan semasa log masuk](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.ms.png) +![Tangkapan skrin menunjukkan mesej kesalahan yang dipaparkan semasa log masuk](../../../../translated_images/login-error.416fe019b36a6327.ms.png) #### Langkah 4: Menjadi Inklusif dengan Kebolehaksesan @@ -961,7 +961,7 @@ Bersedia untuk membawa aplikasi perbankan anda ke tahap seterusnya? Mari jadikan Berikut adalah contoh bagaimana papan pemuka yang digilap boleh kelihatan: -![Tangkapan skrin hasil contoh papan pemuka selepas gaya](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.ms.png) +![Tangkapan skrin hasil contoh papan pemuka selepas gaya](../../../../translated_images/screen2.123c82a831a1d14a.ms.png) Jangan rasa seperti anda perlu meniru ini sepenuhnya - gunakan ia sebagai inspirasi dan jadikan ia milik anda! diff --git a/translations/ms/7-bank-project/4-state-management/README.md b/translations/ms/7-bank-project/4-state-management/README.md index 88dee718d..11dbf62fd 100644 --- a/translations/ms/7-bank-project/4-state-management/README.md +++ b/translations/ms/7-bank-project/4-state-management/README.md @@ -190,7 +190,7 @@ Seperti reka bentuk berkompartmen Titanic yang kelihatan kukuh sehingga beberapa Daripada mengejar ekor kita sendiri, kita akan mencipta sistem **pengurusan keadaan berpusat**. Anggaplah ia seperti mempunyai seorang yang sangat teratur yang bertanggungjawab ke atas semua perkara penting: -![Skema menunjukkan aliran data antara HTML, tindakan pengguna dan keadaan](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.ms.png) +![Skema menunjukkan aliran data antara HTML, tindakan pengguna dan keadaan](../../../../translated_images/data-flow.fa2354e0908fecc8.ms.png) ```mermaid flowchart TD @@ -803,7 +803,7 @@ Cabaran ini akan membantu anda berfikir seperti pembangun profesional yang mempe Berikut adalah contoh hasil selepas menyelesaikan tugasan: -![Tangkapan skrin menunjukkan contoh dialog "Tambah transaksi"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.ms.png) +![Tangkapan skrin menunjukkan contoh dialog "Tambah transaksi"](../../../../translated_images/dialog.93bba104afeb79f1.ms.png) --- diff --git a/translations/ms/7-bank-project/4-state-management/assignment.md b/translations/ms/7-bank-project/4-state-management/assignment.md index 24feec79a..1b0c1f5eb 100644 --- a/translations/ms/7-bank-project/4-state-management/assignment.md +++ b/translations/ms/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ Rujuk dokumentasi [API pelayan](../api/README.md) untuk: **Hasil Dijangka:** Selepas menyelesaikan tugasan ini, aplikasi perbankan anda sepatutnya mempunyai ciri "Tambah Transaksi" yang berfungsi sepenuhnya dan kelihatan profesional: -![Tangkap layar menunjukkan contoh dialog "Tambah transaksi"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.ms.png) +![Tangkap layar menunjukkan contoh dialog "Tambah transaksi"](../../../../translated_images/dialog.93bba104afeb79f1.ms.png) ## Ujian Pelaksanaan Anda diff --git a/translations/ms/7-bank-project/README.md b/translations/ms/7-bank-project/README.md index 1d1af7c3b..b882f7337 100644 --- a/translations/ms/7-bank-project/README.md +++ b/translations/ms/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Dalam projek ini, anda akan belajar cara membina bank fiksyen. Pelajaran ini merangkumi arahan tentang cara menyusun aplikasi web dan menyediakan laluan, membina borang, menguruskan keadaan, dan mendapatkan data daripada API yang membolehkan anda mengambil data bank. -| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.ms.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.ms.png) | +| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.ms.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.ms.png) | |--------------------------------|--------------------------------| ## Pelajaran diff --git a/translations/ms/8-code-editor/1-using-a-code-editor/README.md b/translations/ms/8-code-editor/1-using-a-code-editor/README.md index 60eab37c4..1aa301545 100644 --- a/translations/ms/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/ms/8-code-editor/1-using-a-code-editor/README.md @@ -185,7 +185,7 @@ Seperti bagaimana telefon Alexander Graham Bell menghubungkan lokasi yang jauh, Apabila semuanya dimuatkan, anda akan melihat ruang kerja yang bersih dan cantik yang direka untuk memastikan anda fokus pada perkara yang penting – kod anda! -![Antara muka lalai VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.ms.png) +![Antara muka lalai VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.ms.png) **Inilah lawatan kawasan anda:** - **Bar Aktiviti** (jalur di sebelah kiri): Navigasi utama anda dengan Explorer 📁, Carian 🔍, Kawalan Sumber 🌿, Sambungan 🧩, dan Tetapan ⚙️ @@ -233,7 +233,7 @@ Ini sesuai apabila anda baru bermula di VSCode.dev dan ingin membuka repositori 1. Pergi ke [vscode.dev](https://vscode.dev) jika anda belum berada di sana 2. Cari butang "Open Remote Repository" pada skrin selamat datang dan klik - ![Buka repositori jauh](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.ms.png) + ![Buka repositori jauh](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.ms.png) 3. Tampal mana-mana URL repositori GitHub (cuba yang ini: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Tekan Enter dan lihat keajaiban berlaku! @@ -242,7 +242,7 @@ Ini sesuai apabila anda baru bermula di VSCode.dev dan ingin membuka repositori Ingin berasa seperti ahli sihir pengekodan? Cuba pintasan papan kekunci ini: Ctrl+Shift+P (atau Cmd+Shift+P pada Mac) untuk membuka Palet Perintah: -![Palet Perintah](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.ms.png) +![Palet Perintah](../../../../translated_images/palette-menu.4946174e07f42622.ms.png) **Palet Perintah adalah seperti mempunyai enjin carian untuk semua yang anda boleh lakukan:** - Taip "open remote" dan ia akan mencari pembuka repositori untuk anda @@ -304,7 +304,7 @@ Seperti mengatur pelan di pejabat arkitek, penciptaan fail dalam VSCode.dev meng 3. Masukkan nama fail termasuk sambungan yang sesuai (`style.css`, `script.js`, `index.html`) 4. Tekan Enter untuk mencipta fail -![Mencipta fail baru](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.ms.png) +![Mencipta fail baru](../../../../translated_images/create-new-file.2814e609c2af9aeb.ms.png) **Konvensyen penamaan:** - Gunakan nama deskriptif yang menunjukkan tujuan fail @@ -322,7 +322,7 @@ Di sinilah keseronokan sebenar bermula! Editor VSCode.dev dipenuhi dengan ciri-c 2. Mula menaip dan lihat VSCode.dev membantu anda dengan warna, cadangan, dan pengesanan ralat 3. Simpan kerja anda dengan Ctrl+S (Windows/Linux) atau Cmd+S (Mac) – walaupun ia juga menyimpan secara automatik! -![Menyunting fail dalam VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.ms.png) +![Menyunting fail dalam VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08.ms.png) **Perkara menarik yang berlaku semasa anda mengekod:** - Kod anda akan diwarnakan dengan cantik supaya mudah dibaca @@ -343,7 +343,7 @@ Seperti bagaimana ahli arkeologi mencipta rekod terperinci lapisan penggalian, G 2. Fail yang diubah suai muncul dalam bahagian "Changes" 3. Pengekodan warna menunjukkan jenis perubahan: hijau untuk penambahan, merah untuk penghapusan -![Melihat perubahan dalam Kawalan Sumber](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.ms.png) +![Melihat perubahan dalam Kawalan Sumber](../../../../translated_images/working-tree.c58eec08e6335c79.ms.png) **Menyimpan kerja anda (aliran kerja komit):** @@ -438,7 +438,7 @@ Pasaran sambungan sangat teratur, jadi anda tidak akan tersesat mencari apa yang 2. Jelajah atau cari sesuatu yang spesifik 3. Klik pada apa sahaja yang kelihatan menarik untuk mengetahui lebih lanjut mengenainya -![Antara muka pasaran sambungan](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.ms.png) +![Antara muka pasaran sambungan](../../../../translated_images/extensions.eca0e0c7f59a10b5.ms.png) **Apa yang anda akan lihat di sana:** @@ -491,7 +491,7 @@ Kebanyakan sambungan datang dengan tetapan yang boleh anda ubah untuk membuatnya 3. Pilih "Tetapan Sambungan" dari menu dropdown 4. Laraskan perkara sehingga ia sesuai dengan aliran kerja anda -![Menyesuaikan tetapan sambungan](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.ms.png) +![Menyesuaikan tetapan sambungan](../../../../translated_images/extension-settings.21c752ae4f4cdb78.ms.png) **Perkara biasa yang mungkin anda mahu laraskan:** - Bagaimana kod anda diformatkan (tab vs ruang, panjang baris, dll.) diff --git a/translations/ms/8-code-editor/1-using-a-code-editor/assignment.md b/translations/ms/8-code-editor/1-using-a-code-editor/assignment.md index 5bb8da07b..5c9643eb2 100644 --- a/translations/ms/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/ms/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ Oleh kerana VSCode.dev memerlukan sekurang-kurangnya satu fail untuk membuka rep 4. **Tulis** mesej komit: "Tambah struktur HTML awal" 5. **Klik** "Commit new file" untuk menyimpan perubahan anda -![Mencipta fail awal di GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.ms.png) +![Mencipta fail awal di GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056.ms.png) **Apa yang dicapai oleh persediaan awal ini:** - **Menetapkan** struktur dokumen HTML5 yang betul dengan elemen semantik @@ -104,7 +104,7 @@ Sekarang repositori anda telah disediakan, mari beralih ke VSCode.dev untuk kerj ✅ **Petunjuk kejayaan**: Anda sepatutnya melihat fail projek anda di bar sisi Explorer dan `index.html` tersedia untuk diedit di kawasan editor utama. -![Projek dimuatkan di VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.ms.png) +![Projek dimuatkan di VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.ms.png) **Apa yang anda akan lihat dalam antara muka:** - **Bar sisi Explorer**: **Memaparkan** fail dan struktur folder repositori anda @@ -448,7 +448,7 @@ Sambungan meningkatkan pengalaman pembangunan anda dengan menyediakan keupayaan **Hasil segera selepas pemasangan:** Sebaik sahaja CodeSwing dipasang, anda akan melihat pratonton langsung laman web resume anda muncul dalam editor. Ini membolehkan anda melihat dengan tepat bagaimana laman web anda kelihatan semasa anda membuat perubahan. -![Sambungan CodeSwing menunjukkan pratonton langsung](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.ms.png) +![Sambungan CodeSwing menunjukkan pratonton langsung](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.ms.png) **Memahami antara muka yang dipertingkatkan:** - **Paparan berpecah**: **Memaparkan** kod anda di satu sisi dan pratonton langsung di sisi lain diff --git a/translations/ms/9-chat-project/README.md b/translations/ms/9-chat-project/README.md index 32619c9bf..e2c19a58d 100644 --- a/translations/ms/9-chat-project/README.md +++ b/translations/ms/9-chat-project/README.md @@ -61,7 +61,7 @@ print(response.choices[0].message.content) Inilah rupa projek siap anda: -![Antara muka aplikasi chat menunjukkan perbualan antara pengguna dan pembantu AI](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ms.png) +![Antara muka aplikasi chat menunjukkan perbualan antara pengguna dan pembantu AI](../../../translated_images/screenshot.0a1ee0d123df681b.ms.png) ## 🗺️ Perjalanan Pembelajaran Anda Melalui Pembangunan Aplikasi AI @@ -194,7 +194,7 @@ mindmap **Prinsip Teras**: Pembangunan aplikasi AI menggabungkan kemahiran pembangunan web tradisional dengan integrasi perkhidmatan AI, mencipta aplikasi pintar yang terasa semula jadi dan responsif kepada pengguna. -![Antara muka GitHub Models AI Playground dengan pilihan model dan kawasan ujian](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ms.png) +![Antara muka GitHub Models AI Playground dengan pilihan model dan kawasan ujian](../../../translated_images/playground.d2b927122224ff8f.ms.png) **Inilah yang membuatkan playground sangat berguna:** - **Cuba** model AI yang berbeza seperti GPT-4o-mini, Claude, dan lain-lain (semuanya percuma!) @@ -204,7 +204,7 @@ mindmap Setelah anda bermain-main sedikit, hanya klik tab "Code" dan pilih bahasa pengaturcaraan anda untuk mendapatkan kod pelaksanaan yang anda perlukan. -![Pilihan playground menunjukkan pilihan penjanaan kod untuk bahasa pengaturcaraan yang berbeza](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ms.png) +![Pilihan playground menunjukkan pilihan penjanaan kod untuk bahasa pengaturcaraan yang berbeza](../../../translated_images/playground-choice.1d23ba7d407f4758.ms.png) ## Menyediakan Integrasi Backend Python @@ -2363,14 +2363,14 @@ Ingin mencuba projek ini dalam persekitaran pembangunan awan? GitHub Codespaces - **Navigasi** ke [repositori Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) - **Klik** "Use this template" di sudut kanan atas (pastikan anda log masuk ke GitHub) -![Antara muka cipta dari templat menunjukkan butang hijau "Use this template"](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ms.png) +![Antara muka cipta dari templat menunjukkan butang hijau "Use this template"](../../../translated_images/template.67ad477109d29a2b.ms.png) **Langkah 2: Lancarkan Codespaces** - **Buka** repositori yang baru anda cipta - **Klik** butang hijau "Code" dan pilih "Codespaces" - **Pilih** "Create codespace on main" untuk memulakan persekitaran pembangunan anda -![Antara muka cipta codespace dengan pilihan untuk melancarkan persekitaran pembangunan awan](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ms.png) +![Antara muka cipta codespace dengan pilihan untuk melancarkan persekitaran pembangunan awan](../../../translated_images/codespace.bcecbdf5d2747d3d.ms.png) **Langkah 3: Konfigurasi Persekitaran** Sebaik sahaja Codespace anda dimuatkan, anda akan mempunyai akses kepada: diff --git a/translations/ms/README.md b/translations/ms/README.md index 46b8ffceb..f04b3115c 100644 --- a/translations/ms/README.md +++ b/translations/ms/README.md @@ -1,76 +1,86 @@ -[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) -[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) -[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) -[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) -[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) +[![Lesen GitHub](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) +[![Penyumbang GitHub](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) +[![Isu GitHub](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) +[![Permintaan tarik GitHub](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) +[![PRs Dialu-alukan](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) -[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) -[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) -[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) +[![Pemerhati GitHub](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) +[![Fork GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) +[![Bintang GitHub](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) # Pembangunan Web untuk Pemula - Kurikulum -Pelajari asas pembangunan web dengan kursus 12 minggu yang komprehensif oleh Microsoft Cloud Advocates. Setiap daripada 24 pelajaran meneroka JavaScript, CSS, dan HTML melalui projek praktikal seperti terrarium, sambungan pelayar, dan permainan angkasa. Sertai kuiz, perbincangan, dan tugasan praktikal. Tingkatkan kemahiran anda dan optimalkan pemahaman anda dengan pendekatan pembelajaran berasaskan projek yang efektif. Mulakan perjalanan pengkodan anda hari ini! +Pelajari asas-asas pembangunan web dengan kursus komprehensif selama 12 minggu oleh Microsoft Cloud Advocates. Setiap 24 pelajaran menyelami JavaScript, CSS, dan HTML melalui projek hands-on seperti terrarium, sambungan pelayar, dan permainan angkasa lepas. Sertai kuiz, perbincangan, dan tugasan praktikal. Tingkatkan kemahiran dan optimakan pengekalan pengetahuan anda dengan pedagogi berasaskan projek kami yang berkesan. Mulakan perjalanan pengkodan anda hari ini! Sertai Komuniti Discord Azure AI Foundry [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Ikuti langkah-langkah ini untuk mula menggunakan sumber ini: -1. **Fork Repositori**: Klik [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +Ikuti langkah-langkah ini untuk memulakan menggunakan sumber ini: +1. **Fork Repositori**: Klik [![Fork GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) 2. **Clone Repositori**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Sertai Azure AI Foundry Discord dan berhubung dengan pakar serta pembangun lain**](https://discord.com/invite/ByRwuEEgH4) +3. [**Sertai The Azure AI Foundry Discord dan temui pakar dan pembangun lain**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 Sokongan Pelbagai Bahasa -#### Disokong melalui GitHub Action (Automatik & Sentiasa Terkini) +#### Disokong melalui Tindakan GitHub (Automatik & Sentiasa Dikemaskini) -[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](./README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) +[Arab](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgaria](../bg/README.md) | [Burma (Myanmar)](../my/README.md) | [Cina (Dipermudahkan)](../zh/README.md) | [Cina (Tradisional, Hong Kong)](../hk/README.md) | [Cina (Tradisional, Macau)](../mo/README.md) | [Cina (Tradisional, Taiwan)](../tw/README.md) | [Kroasia](../hr/README.md) | [Czech](../cs/README.md) | [Denmark](../da/README.md) | [Belanda](../nl/README.md) | [Estonia](../et/README.md) | [Finland](../fi/README.md) | [Perancis](../fr/README.md) | [Jerman](../de/README.md) | [Greek](../el/README.md) | [Ibrani](../he/README.md) | [Hindi](../hi/README.md) | [Hungary](../hu/README.md) | [Indonesia](../id/README.md) | [Itali](../it/README.md) | [Jepun](../ja/README.md) | [Kannada](../kn/README.md) | [Korea](../ko/README.md) | [Lithuania](../lt/README.md) | [Melayu](./README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Pidgin Nigeria](../pcm/README.md) | [Norway](../no/README.md) | [Parsi (Farsi)](../fa/README.md) | [Poland](../pl/README.md) | [Portugis (Brazil)](../br/README.md) | [Portugis (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romania](../ro/README.md) | [Rusia](../ru/README.md) | [Serbia (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenia](../sl/README.md) | [Sepanyol](../es/README.md) | [Swahili](../sw/README.md) | [Sweden](../sv/README.md) | [Tagalog (Filipina)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turki](../tr/README.md) | [Ukrain](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnam](../vi/README.md) + +> **Lebih suka Clone Secara Tempatan?** + +> Repositori ini merangkumi lebih 50+ terjemahan bahasa yang meningkatkan saiz muat turun dengan ketara. Untuk clone tanpa terjemahan, gunakan sparse checkout: +> ```bash +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' +> ``` +> Ini memberi anda segala yang anda perlukan untuk melengkapkan kursus dengan muat turun yang jauh lebih pantas. -**Jika anda ingin menambah sokongan bahasa tambahan, senarai bahasa yang disokong boleh didapati [di sini](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**Jika anda ingin menyokong lebih banyak bahasa terjemahan, senarai sokongan tambahan terdapat [di sini](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** -[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +[![Buka dalam Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) #### 🧑‍🎓 _Adakah anda seorang pelajar?_ -Lawati [**Halaman Hub Pelajar**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) di mana anda akan menemui sumber untuk pemula, pakej pelajar dan juga cara mendapatkan baucar sijil percuma. Ini adalah halaman yang patut anda tandai dan periksa dari semasa ke semasa kerana kandungan akan ditukar setiap bulan. +Lawati [**Halaman Pusat Pelajar**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) di mana anda akan menemui sumber untuk pemula, Pakej Pelajar dan juga cara untuk mendapatkan baucar sijil percuma. Ini adalah halaman yang anda mahu tandai dan periksa dari semasa ke semasa kerana kami menukar kandungan setiap bulan. -### 📣 Pengumuman - Cabaran mod Agen GitHub Copilot baru untuk diselesaikan! +### 📣 Pengumuman - Cabaran Mod Agen GitHub Copilot baru untuk diselesaikan! -Cabaran baru ditambah, cari "Cabaran Agen GitHub Copilot 🚀" dalam kebanyakan bab. Ini adalah cabaran baru untuk anda selesaikan menggunakan GitHub Copilot dan mod Agen. Jika anda belum pernah menggunakan mod Agen sebelum ini, ia mampu bukan sahaja menjana teks tetapi juga mencipta dan mengedit fail, menjalankan arahan dan banyak lagi. +Cabaran baru ditambah, cari "GitHub Copilot Agent Challenge 🚀" dalam kebanyakan bab. Ini adalah cabaran baru untuk anda selesaikan menggunakan GitHub Copilot dan Mod Agen. Jika anda belum pernah menggunakan Mod Agen sebelum ini, ia boleh bukan sahaja menjana teks tetapi juga boleh mencipta dan menyunting fail, menjalankan arahan dan banyak lagi. -### 📣 Pengumuman - _Projek Baru untuk dibina menggunakan AI Generatif_ +### 📣 Pengumuman - _Projek Baru yang Dibina menggunakan AI Generatif_ -Projek Pembantu AI baru sahaja ditambah, lihat [projek](./09-chat-project/README.md) +Projek Pembantu AI baru sahaja ditambah, semak [projek](./9-chat-project/README.md) -### 📣 Pengumuman - _Kurikulum Baru_ mengenai AI Generatif untuk JavaScript baru sahaja dilancarkan +### 📣 Pengumuman - _Kurikulum Baru_ mengenai AI Generatif untuk JavaScript baru sahaja diterbitkan -Jangan lepaskan kurikulum AI Generatif baru kami! +Jangan terlepas kurikulum AI Generatif baru kami! Lawati [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk bermula! -![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.ms.png) +![Latar Belakang](../../translated_images/background.148a8d43afde5730.ms.png) -- Pelajaran yang merangkumi segalanya dari asas hingga RAG. +- Pelajaran merangkumi segala-galanya dari asas kepada RAG. - Berinteraksi dengan watak sejarah menggunakan GenAI dan aplikasi pendamping kami. -- Naratif yang menyeronokkan dan menarik, anda akan mengembara masa! +- Naratif yang menyeronokkan dan menarik, anda akan mengembara waktu! -![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.ms.png) +![watak](../../translated_images/character.5c0dd8e067ffd693.ms.png) -Setiap pelajaran termasuk tugasan untuk diselesaikan, semakan pengetahuan dan cabaran untuk membimbing anda mempelajari topik seperti: +Setiap pelajaran termasuk tugasan untuk diselesaikan, pemeriksaan pengetahuan dan cabaran untuk membimbing anda dalam mempelajari topik seperti: - Prompting dan kejuruteraan prompt - Penjanaan aplikasi teks dan imej - Aplikasi carian @@ -81,48 +91,48 @@ Lawati [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) un ## 🌱 Bermula -> **Guru**, kami telah [menyertakan beberapa cadangan](for-teachers.md) tentang cara menggunakan kurikulum ini. Kami menghargai maklum balas anda [di forum perbincangan kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **Guru**, kami telah [menyertakan beberapa cadangan](for-teachers.md) bagaimana menggunakan kurikulum ini. Kami sangat menghargai maklum balas anda [dalam forum perbincangan kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Pelajar](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, untuk setiap pelajaran, mulakan dengan kuiz pra-kuliah dan teruskan dengan membaca bahan kuliah, melengkapkan pelbagai aktiviti dan semak pemahaman anda dengan kuiz pasca-kuliah. +**[Pelajar](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, untuk setiap pelajaran, mulakan dengan kuiz pra-ceramah dan teruskan dengan membaca bahan kuliah, menyelesaikan pelbagai aktiviti dan memeriksa pemahaman anda dengan kuiz pasca-ceramah. -Untuk meningkatkan pengalaman pembelajaran anda, berhubung dengan rakan sebaya untuk bekerjasama dalam projek! Perbincangan digalakkan di [forum perbincangan kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) di mana pasukan moderator kami akan tersedia untuk menjawab soalan anda. +Untuk meningkatkan pengalaman pembelajaran anda, berhubung dengan rakan-rakan sekelas untuk bekerja bersama projek ini! Perbincangan digalakkan dalam [forum perbincangan kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) di mana pasukan moderator kami sedia menjawab soalan anda. -Untuk melanjutkan pendidikan anda, kami sangat mengesyorkan meneroka [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) untuk bahan kajian tambahan. +Untuk pendidikan lanjut, kami sangat mengesyorkan meneroka [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) untuk bahan pembelajaran tambahan. ### 📋 Menyediakan persekitaran anda -Kurikulum ini mempunyai persekitaran pembangunan yang sedia untuk digunakan! Semasa anda bermula, anda boleh memilih untuk menjalankan kurikulum ini dalam [Codespace](https://github.com/features/codespaces/) (_persekitaran berasaskan pelayar, tidak memerlukan pemasangan_), atau secara tempatan di komputer anda menggunakan editor teks seperti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Kurikulum ini mempunyai persekitaran pembangunan sedia digunakan! Semasa anda bermula, anda boleh memilih untuk menjalankan kurikulum dalam [Codespace](https://github.com/features/codespaces/) (_persekitaran berasaskan pelayar tanpa perlu pemasangan_), atau secara lokal di komputer anda menggunakan penyunting teks seperti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). #### Cipta repositori anda -Untuk memudahkan anda menyimpan kerja anda, disarankan agar anda mencipta salinan repositori ini. Anda boleh melakukannya dengan mengklik butang **Use this template** di bahagian atas halaman. Ini akan mencipta repositori baru dalam akaun GitHub anda dengan salinan kurikulum. +Untuk memudahkan anda menyimpan kerja anda, disyorkan agar anda mencipta salinan anda sendiri repositori ini. Anda boleh melakukannya dengan mengklik butang **Use this template** di bahagian atas halaman. Ini akan mencipta repositori baru dalam akaun GitHub anda dengan salinan kurikulum. -Ikuti langkah-langkah ini: -1. **Fork Repositori**: Klik pada butang "Fork" di sudut kanan atas halaman ini. +Ikuti langkah ini: +1. **Fork Repositori**: Klik butang "Fork" di sudut kanan atas halaman ini. 2. **Clone Repositori**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` #### Menjalankan kurikulum dalam Codespace -Dalam salinan repositori anda yang telah anda cipta, klik butang **Code** dan pilih **Open with Codespaces**. Ini akan mencipta Codespace baru untuk anda bekerja. +Dalam salinan repositori yang anda buat, klik butang **Code** dan pilih **Open with Codespaces**. Ini akan mencipta Codespace baru untuk anda bekerja. + +![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.ms.png) -![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.ms.png) +#### Menjalankan kurikulum secara lokal di komputer anda -#### Menjalankan kurikulum secara tempatan di komputer anda +Untuk menjalankan kurikulum ini secara lokal di komputer anda, anda memerlukan penyunting teks, pelayar dan alat baris perintah. Pelajaran pertama kami, [Pengenalan kepada Bahasa Pengaturcaraan dan Alat Perdagangan](../../1-getting-started-lessons/1-intro-to-programming-languages), akan membimbing anda melalui pelbagai pilihan untuk setiap alat ini supaya anda boleh memilih apa yang terbaik untuk anda. -Untuk menjalankan kurikulum ini secara tempatan di komputer anda, anda memerlukan editor teks, pelayar dan alat baris arahan. Pelajaran pertama kami, [Pengenalan kepada Bahasa Pengaturcaraan dan Alat Perdagangan](../../1-getting-started-lessons/1-intro-to-programming-languages), akan membimbing anda melalui pelbagai pilihan untuk setiap alat ini supaya anda boleh memilih yang paling sesuai untuk anda. +Saranan kami adalah menggunakan [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) sebagai penyunting anda, yang juga mempunyai [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) terbina dalam. Anda boleh muat turun Visual Studio Code [di sini](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). -Cadangan kami adalah menggunakan [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) sebagai editor anda, yang juga mempunyai [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) terbina dalam. Anda boleh memuat turun Visual Studio Code [di sini](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). 1. Clone repositori anda ke komputer anda. Anda boleh melakukannya dengan mengklik butang **Code** dan menyalin URL: [CodeSpace](./images/createcodespace.png) - - Kemudian, buka [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dalam [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) dan jalankan arahan berikut, gantikan `` dengan URL yang baru anda salin: + Kemudian, buka [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dalam [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) dan jalankan arahan berikut, menggantikan `` dengan URL yang baru anda salin: ```bash git clone ``` -2. Buka folder dalam Visual Studio Code. Anda boleh melakukannya dengan mengklik **File** > **Open Folder** dan memilih folder yang baru anda clone. +2. Buka folder di Visual Studio Code. Anda boleh lakukan ini dengan mengklik **File** > **Open Folder** dan memilih folder yang baru anda klon. > Sambungan Visual Studio Code yang disyorkan: @@ -136,123 +146,124 @@ Cadangan kami adalah menggunakan [Visual Studio Code](https://code.visualstudio. - video tambahan pilihan - kuiz pemanasan sebelum pelajaran - pelajaran bertulis -- untuk pelajaran berasaskan projek, panduan langkah demi langkah tentang cara membina projek -- semakan pengetahuan +- untuk pelajaran berasaskan projek, panduan langkah demi langkah cara membina projek +- pemeriksaan pengetahuan - cabaran - bacaan tambahan - tugasan -- [kuiz selepas pelajaran](https://ff-quizzes.netlify.app/web/) +- [kuiz pasca pelajaran](https://ff-quizzes.netlify.app/web/) -> **Nota tentang kuiz**: Semua kuiz terdapat dalam folder Quiz-app, sebanyak 48 kuiz dengan tiga soalan setiap satu. Ia boleh didapati [di sini](https://ff-quizzes.netlify.app/web/) dan aplikasi kuiz boleh dijalankan secara tempatan atau dideploy ke Azure; ikuti arahan dalam folder `quiz-app`. +> **Nota tentang kuiz**: Semua kuiz terkandung dalam folder Quiz-app, 48 kuiz kesemuanya dengan tiga soalan setiap satu. Ia boleh didapati [di sini](https://ff-quizzes.netlify.app/web/) aplikasi kuiz boleh dijalankan secara lokal atau diterapkan ke Azure; ikuti arahan dalam folder `quiz-app`. ## 🗃️ Pelajaran -| | Nama Projek | Konsep yang Diajarkan | Objektif Pembelajaran | Pelajaran Terkait | Penulis | -| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Memulakan Asas | Pengenalan kepada Pengaturcaraan dan Alat yang Digunakan | Belajar asas di sebalik kebanyakan bahasa pengaturcaraan dan tentang perisian yang membantu pembangun profesional melakukan kerja mereka | [Pengenalan kepada Bahasa Pengaturcaraan dan Alat yang Digunakan](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Memulakan Asas | Asas GitHub, termasuk bekerja dalam pasukan | Cara menggunakan GitHub dalam projek anda, cara bekerjasama dengan orang lain dalam kod asas | [Pengenalan kepada GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Memulakan Asas | Kebolehcapaian | Belajar asas kebolehcapaian web | [Asas Kebolehcapaian](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | Asas JS | Jenis Data JavaScript | Asas jenis data JavaScript | [Jenis Data](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | Asas JS | Fungsi dan Kaedah | Belajar tentang fungsi dan kaedah untuk mengurus aliran logik aplikasi | [Fungsi dan Kaedah](./2-js-basics/2-functions-methods/README.md) | Jasmine dan Christopher | -| 06 | Asas JS | Membuat Keputusan dengan JS | Belajar cara mencipta syarat dalam kod anda menggunakan kaedah membuat keputusan | [Membuat Keputusan](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | Asas JS | Array dan Gelung | Bekerja dengan data menggunakan array dan gelung dalam JavaScript | [Array dan Gelung](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML dalam Praktik | Membina HTML untuk mencipta terrarium dalam talian, dengan fokus pada membina susun atur | [Pengenalan kepada HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS dalam Praktik | Membina CSS untuk menggayakan terrarium dalam talian, dengan fokus pada asas CSS termasuk menjadikan halaman responsif | [Pengenalan kepada CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | Penutupan JavaScript, manipulasi DOM | Membina JavaScript untuk menjadikan terrarium berfungsi sebagai antara muka seret/lepas, dengan fokus pada penutupan dan manipulasi DOM | [Penutupan JavaScript, manipulasi DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Permainan Menaip](./4-typing-game/solution/README.md) | Membina Permainan Menaip | Belajar cara menggunakan acara papan kekunci untuk menggerakkan logik aplikasi JavaScript anda | [Pengaturcaraan Berasaskan Acara](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Pelanjutan Pelayar Hijau](./5-browser-extension/solution/README.md) | Bekerja dengan Pelayar | Belajar cara pelayar berfungsi, sejarahnya, dan cara membina elemen pertama pelanjutan pelayar | [Tentang Pelayar](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Pelanjutan Pelayar Hijau](./5-browser-extension/solution/README.md) | Membina borang, memanggil API dan menyimpan pembolehubah dalam storan tempatan | Membina elemen JavaScript pelanjutan pelayar anda untuk memanggil API menggunakan pembolehubah yang disimpan dalam storan tempatan | [API, Borang, dan Storan Tempatan](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Pelanjutan Pelayar Hijau](./5-browser-extension/solution/README.md) | Proses latar belakang dalam pelayar, prestasi web | Menggunakan proses latar belakang pelayar untuk mengurus ikon pelanjutan; belajar tentang prestasi web dan beberapa pengoptimuman untuk meningkatkan | [Tugas Latar Belakang dan Prestasi](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Permainan Angkasa](./6-space-game/solution/README.md) | Pembangunan Permainan yang Lebih Lanjutan dengan JavaScript | Belajar tentang Pewarisan menggunakan kedua-dua Kelas dan Komposisi serta corak Pub/Sub, sebagai persediaan untuk membina permainan | [Pengenalan kepada Pembangunan Permainan Lanjutan](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Permainan Angkasa](./6-space-game/solution/README.md) | Melukis ke kanvas | Belajar tentang API Kanvas, digunakan untuk melukis elemen ke skrin | [Melukis ke Kanvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Permainan Angkasa](./6-space-game/solution/README.md) | Menggerakkan elemen di sekitar skrin | Mengetahui cara elemen boleh bergerak menggunakan koordinat Cartesian dan API Kanvas | [Menggerakkan Elemen di Sekitar](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Permainan Angkasa](./6-space-game/solution/README.md) | Pengesanan perlanggaran | Membuat elemen bertembung dan bertindak balas antara satu sama lain menggunakan penekanan kekunci dan menyediakan fungsi cooldown untuk memastikan prestasi permainan | [Pengesanan Perlanggaran](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Permainan Angkasa](./6-space-game/solution/README.md) | Menyimpan skor | Melakukan pengiraan matematik berdasarkan status dan prestasi permainan | [Menyimpan Skor](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Permainan Angkasa](./6-space-game/solution/README.md) | Menamatkan dan memulakan semula permainan | Belajar tentang menamatkan dan memulakan semula permainan, termasuk membersihkan aset dan menetapkan semula nilai pembolehubah | [Keadaan Tamat](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Aplikasi Perbankan](./7-bank-project/solution/README.md) | Templat HTML dan Laluan dalam Aplikasi Web | Belajar cara mencipta rangka seni bina laman web berbilang halaman menggunakan laluan dan templat HTML | [Templat HTML dan Laluan](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Aplikasi Perbankan](./7-bank-project/solution/README.md) | Membina Borang Log Masuk dan Pendaftaran | Belajar tentang membina borang dan mengendalikan rutin pengesahan | [Borang](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Aplikasi Perbankan](./7-bank-project/solution/README.md) | Kaedah Mengambil dan Menggunakan Data | Bagaimana data mengalir masuk dan keluar dari aplikasi anda, cara mengambilnya, menyimpannya, dan membuangnya | [Data](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Aplikasi Perbankan](./7-bank-project/solution/README.md) | Konsep Pengurusan Keadaan | Belajar cara aplikasi anda mengekalkan keadaan dan cara menguruskannya secara programatik | [Pengurusan Keadaan](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Kod Pelayar/VScode](../../8-code-editor) | Bekerja dengan VScode | Belajar cara menggunakan editor kod| [Gunakan Editor Kod VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [Pembantu AI](./9-chat-project/README.md) | Bekerja dengan AI | Belajar cara membina pembantu AI anda sendiri | [Projek Pembantu AI](./9-chat-project/README.md) | Chris | +| | Nama Projek | Konsep Diajarkan | Objektif Pembelajaran | Pelajaran Berpaut | Pengarang | +| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :-----------------------: | +| 01 | Memulakan | Pengenalan Kepada Pengaturcaraan dan Alat Perdagangan | Pelajari asas di sebalik kebanyakan bahasa pengaturcaraan dan tentang perisian yang membantu pembangun profesional menjalankan tugas mereka | [Pengenalan Kepada Bahasa Pengaturcaraan dan Alat Perdagangan](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Memulakan | Asas GitHub, termasuk bekerjasama dalam pasukan | Cara menggunakan GitHub dalam projek anda, cara bekerjasama dengan orang lain pada pangkalan kod | [Pengenalan Kepada GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Memulakan | Kebolehcapaian | Pelajari asas kebolehcapaian web | [Asas Kebolehcapaian](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | Asas JS | Jenis Data JavaScript | Asas jenis data JavaScript | [Jenis Data](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | Asas JS | Fungsi dan Kaedah | Pelajari tentang fungsi dan kaedah untuk mengurus aliran logik aplikasi | [Fungsi dan Kaedah](./2-js-basics/2-functions-methods/README.md) | Jasmine dan Christopher | +| 06 | Asas JS | Membuat Keputusan dengan JS | Pelajari cara membuat syarat dalam kod anda menggunakan kaedah membuat keputusan | [Membuat Keputusan](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | Asas JS | Tatasusunan dan Gelung | Bekerja dengan data menggunakan tatasusunan dan gelung dalam JavaScript | [Tatasusunan dan Gelung](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML dalam Amalan | Bangunkan HTML untuk mencipta terrarium dalam talian, fokus pada membina susun atur | [Pengenalan kepada HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS dalam Amalan | Bangunkan CSS untuk gayakan terrarium dalam talian, fokus pada asas CSS termasuk menjadikan halaman responsif | [Pengenalan kepada CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | Penutupan JavaScript, manipulasi DOM | Bangunkan JavaScript untuk menjadikan terrarium berfungsi sebagai antara muka seret/lepas, fokus pada penutupan dan manipulasi DOM | [Penutupan JavaScript, manipulasi DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Permainan Mengetik](./4-typing-game/solution/README.md) | Membangun Permainan Mengetik | Pelajari cara menggunakan acara papan kekunci untuk menggerakkan logik aplikasi JavaScript anda | [Pengaturcaraan Berpandukan Acara](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Sambungan Pelayar Hijau](./5-browser-extension/solution/README.md) | Bekerja dengan Pelayar | Pelajari bagaimana pelayar berfungsi, sejarahnya, dan cara membina elemen pertama sambungan pelayar | [Mengenai Pelayar](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Sambungan Pelayar Hijau](./5-browser-extension/solution/README.md) | Membina borang, memanggil API dan menyimpan pembolehubah dalam storan lokal | Bina elemen JavaScript sambungan pelayar anda untuk memanggil API menggunakan pembolehubah yang disimpan dalam storan lokal | [API, Borang, dan Storan Lokal](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Sambungan Pelayar Hijau](./5-browser-extension/solution/README.md) | Proses latar belakang dalam pelayar, prestasi web | Gunakan proses latar belakang pelayar untuk mengurus ikon sambungan; pelajari tentang prestasi web dan beberapa pengoptimuman | [Tugas Latar Belakang dan Prestasi](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Permainan Angkasa](./6-space-game/solution/README.md) | Pembangunan Permainan Lebih Lanjutan dengan JavaScript | Pelajari tentang Pewarisan menggunakan Kelas dan Komposisi serta corak Pub/Sub, sebagai persiapan untuk membina permainan | [Pengenalan Kepada Pembangunan Permainan Lanjutan](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Permainan Angkasa](./6-space-game/solution/README.md) | Melukis pada kanvas | Pelajari tentang API Canvas, yang digunakan untuk melukis elemen ke skrin | [Melukis Pada Kanvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Permainan Angkasa](./6-space-game/solution/README.md) | Menggerakkan elemen di sekitar skrin | Temui cara elemen boleh bergerak menggunakan koordinat kartesian dan API Canvas | [Menggerakkan Elemen](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Permainan Angkasa](./6-space-game/solution/README.md) | Pengesanan perlanggaran | Buat elemen bertembung dan bertindak balas antara satu sama lain menggunakan kekunci dan sediakan fungsi penyejukan untuk memastikan prestasi permainan | [Pengesanan Perlanggaran](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Permainan Angkasa](./6-space-game/solution/README.md) | Menjaga skor | Lakukan pengiraan matematik berdasarkan status dan prestasi permainan | [Menjaga Skor](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Permainan Angkasa](./6-space-game/solution/README.md) | Menamat dan memulakan semula permainan | Pelajari tentang menamatkan dan memulakan semula permainan, termasuk membersihkan aset dan menetapkan semula nilai pembolehubah | [Keadaan Tamat](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Apl Perbankan](./7-bank-project/solution/README.md) | Template HTML dan Laluan dalam Aplikasi Web | Pelajari cara mencipta struktur antara muka laman web berbilang halaman menggunakan laluan dan template HTML | [Template HTML dan Laluan](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Apl Perbankan](./7-bank-project/solution/README.md) | Membangun Borang Log Masuk dan Pendaftaran | Pelajari tentang membina borang dan menangani rutin pengesahan | [Borang](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Apl Perbankan](./7-bank-project/solution/README.md) | Kaedah Mengambil dan Menggunakan Data | Cara data mengalir masuk dan keluar dari aplikasi anda, cara mendapatkannya, menyimpannya, dan membuangnya | [Data](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Apl Perbankan](./7-bank-project/solution/README.md) | Konsep Pengurusan Keadaan | Pelajari bagaimana aplikasi anda mengekalkan keadaan dan cara menguruskannya secara programatik | [Pengurusan Keadaan](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Kod Penyemak Imbas/VScode](../../8-code-editor) | Bekerja dengan VScode | Pelajari cara menggunakan penyunting kod| [Gunakan Penyunting Kod VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [Pembantu AI](./9-chat-project/README.md) | Bekerja dengan AI | Pelajari cara membina pembantu AI anda sendiri | [Projek Pembantu AI](./9-chat-project/README.md) | Chris | ## 🏫 Pedagogi -Kurikulum kami direka dengan dua prinsip pedagogi utama: +Kurikulum kami direka dengan dua prinsip pedagogi utama dalam fikiran: * pembelajaran berasaskan projek * kuiz yang kerap -Program ini mengajar asas JavaScript, HTML, dan CSS, serta alat dan teknik terkini yang digunakan oleh pembangun web masa kini. Pelajar akan berpeluang untuk mendapatkan pengalaman praktikal dengan membina permainan menaip, terrarium maya, pelanjutan pelayar mesra alam, permainan gaya penyerang angkasa, dan aplikasi perbankan untuk perniagaan. Menjelang akhir siri ini, pelajar akan memperoleh pemahaman yang kukuh tentang pembangunan web. +Program ini mengajar asas JavaScript, HTML, dan CSS, serta alat dan teknik terkini yang digunakan oleh pembangun web hari ini. Pelajar akan berpeluang mengembangkan pengalaman praktikal dengan membina permainan menaip, terrarium maya, sambungan pelayar mesra alam, permainan bergaya penyerang angkasa, dan aplikasi perbankan untuk perniagaan. Pada akhir siri ini, pelajar akan memperoleh pemahaman yang kukuh tentang pembangunan web. -> 🎓 Anda boleh mengambil beberapa pelajaran pertama dalam kurikulum ini sebagai [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) di Microsoft Learn! +> 🎓 Anda boleh mengambil beberapa pelajaran pertama dalam kurikulum ini sebagai [Jalur Pembelajaran](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) di Microsoft Learn! -Dengan memastikan kandungan selaras dengan projek, proses pembelajaran menjadi lebih menarik bagi pelajar dan pengekalan konsep akan dipertingkatkan. Kami juga menulis beberapa pelajaran permulaan dalam asas JavaScript untuk memperkenalkan konsep, digabungkan dengan video daripada koleksi tutorial video "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", beberapa penulisnya menyumbang kepada kurikulum ini. +Dengan memastikan kandungan sejajar dengan projek, proses ini dibuat lebih menarik untuk pelajar dan pengekalan konsep akan dipertingkatkan. Kami juga menulis beberapa pelajaran permulaan dalam asas JavaScript untuk memperkenalkan konsep, dipadankan dengan video dari koleksi tutorial video "[Siri Pemula kepada: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", beberapa pengarangnya menyumbang kepada kurikulum ini. -Selain itu, kuiz berisiko rendah sebelum kelas menetapkan niat pelajar untuk mempelajari topik, manakala kuiz kedua selepas kelas memastikan pengekalan yang lebih lanjut. Kurikulum ini direka untuk fleksibel dan menyeronokkan dan boleh diambil secara keseluruhan atau sebahagian. Projek bermula kecil dan menjadi semakin kompleks menjelang akhir kitaran 12 minggu. +Selain itu, kuiz berisiko rendah sebelum kelas menetapkan niat pelajar untuk belajar sesuatu topik, manakala kuiz kedua selepas kelas memastikan pengekalan lanjut. Kurikulum ini direka untuk menjadi fleksibel dan menyeronokkan dan boleh diambil secara keseluruhan atau sebahagian. Projek bermula kecil dan menjadi semakin kompleks pada akhir kitaran 12 minggu. -Walaupun kami sengaja mengelakkan memperkenalkan rangka kerja JavaScript untuk menumpukan pada kemahiran asas yang diperlukan sebagai pembangun web sebelum mengguna pakai rangka kerja, langkah seterusnya yang baik selepas melengkapkan kurikulum ini adalah belajar tentang Node.js melalui koleksi video lain: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Walaupun kami sengaja mengelakkan memperkenalkan rangka kerja JavaScript untuk memfokus pada kemahiran asas yang diperlukan sebagai pembangun web sebelum mengguna pakai rangka kerja, langkah seterusnya yang baik untuk melengkapkan kurikulum ini adalah mempelajari tentang Node.js melalui koleksi video lain: "[Siri Pemula kepada: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -> Lawati [Kod Etika](CODE_OF_CONDUCT.md) dan panduan [Menyumbang](CONTRIBUTING.md) kami. Kami mengalu-alukan maklum balas membina anda! +> Lawati [Kod Etika](CODE_OF_CONDUCT.md) dan panduan [Sumbangan](CONTRIBUTING.md) kami. Kami mengalu-alukan maklum balas membina anda! -## 🧭 Akses Luar Talian +## 🧭 Akses luar talian -Anda boleh menjalankan dokumentasi ini secara luar talian dengan menggunakan [Docsify](https://docsify.js.org/#/). Fork repo ini, [pasang Docsify](https://docsify.js.org/#/quickstart) pada mesin tempatan anda, dan kemudian dalam folder root repo ini, taip `docsify serve`. Laman web akan disediakan pada port 3000 di localhost anda: `localhost:3000`. +Anda boleh menjalankan dokumentasi ini tanpa sambungan internet dengan menggunakan [Docsify](https://docsify.js.org/#/). Fork repositori ini, [pasang Docsify](https://docsify.js.org/#/quickstart) pada mesin tempatan anda, dan kemudian di dalam folder akar repositori ini, taip `docsify serve`. Laman web akan dihidangkan pada port 3000 pada localhost anda: `localhost:3000`. ## 📘 PDF -PDF semua pelajaran boleh didapati [di sini](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). +PDF bagi semua pelajaran boleh didapati [di sini](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). ## 🎒 Kursus Lain - Pasukan kami menghasilkan kursus lain! Lihat: + ### LangChain -[![LangChain4j untuk Pemula](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) -[![LangChain.js untuk Pemula](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) +[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) +[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) + --- ### Azure / Edge / MCP / Ejen -[![AZD untuk Pemula](https://img.shields.io/badge/AZD%20untuk%20Pemula-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) -[![Edge AI untuk Pemula](https://img.shields.io/badge/Edge%20AI%20untuk%20Pemula-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![MCP untuk Pemula](https://img.shields.io/badge/MCP%20untuk%20Pemula-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) -[![Ejen AI untuk Pemula](https://img.shields.io/badge/Ejen%20AI%20untuk%20Pemula-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) +[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) +[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) --- - + ### Siri AI Generatif -[![AI Generatif untuk Pemula](https://img.shields.io/badge/AI%20Generatif%20untuk%20Pemula-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) -[![AI Generatif (.NET)](https://img.shields.io/badge/AI%20Generatif%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) -[![AI Generatif (Java)](https://img.shields.io/badge/AI%20Generatif%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) -[![AI Generatif (JavaScript)](https://img.shields.io/badge/AI%20Generatif%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) +[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) +[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) +[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) +[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) --- - + ### Pembelajaran Teras -[![ML untuk Pemula](https://img.shields.io/badge/ML%20untuk%20Pemula-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) -[![Sains Data untuk Pemula](https://img.shields.io/badge/Sains%20Data%20untuk%20Pemula-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) -[![AI untuk Pemula](https://img.shields.io/badge/AI%20untuk%20Pemula-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) -[![Keselamatan Siber untuk Pemula](https://img.shields.io/badge/Keselamatan%20Siber%20untuk%20Pemula-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) -[![Pembangunan Web untuk Pemula](https://img.shields.io/badge/Pembangunan%20Web%20untuk%20Pemula-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) -[![IoT untuk Pemula](https://img.shields.io/badge/IoT%20untuk%20Pemula-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) -[![Pembangunan XR untuk Pemula](https://img.shields.io/badge/Pembangunan%20XR%20untuk%20Pemula-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) +[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) +[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) +[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) +[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) +[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) +[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) +[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) --- - + ### Siri Copilot -[![Copilot untuk Pengaturcaraan Berpasangan AI](https://img.shields.io/badge/Copilot%20untuk%20Pengaturcaraan%20Berpasangan%20AI-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) -[![Copilot untuk C#/.NET](https://img.shields.io/badge/Copilot%20untuk%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) -[![Pengembaraan Copilot](https://img.shields.io/badge/Pengembaraan%20Copilot-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) +[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) +[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) +[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) ## Mendapatkan Bantuan -Jika anda menghadapi kesukaran atau mempunyai sebarang soalan tentang membina aplikasi AI, sertai pelajar lain dan pembangun berpengalaman dalam perbincangan tentang MCP. Ia adalah komuniti yang menyokong di mana soalan dialu-alukan dan pengetahuan dikongsi secara bebas. +Jika anda tersekat atau mempunyai sebarang pertanyaan mengenai membina aplikasi AI. Sertai pelajar lain dan pembangun berpengalaman dalam perbincangan tentang MCP. Ia adalah komuniti yang menyokong di mana soalan dialu-alukan dan pengetahuan dikongsi secara bebas. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Jika anda mempunyai maklum balas produk atau menghadapi ralat semasa membina, lawati: +Jika anda mempunyai maklum balas produk atau ralat semasa membina, lawati: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) @@ -264,5 +275,5 @@ Repositori ini dilesenkan di bawah lesen MIT. Lihat fail [LICENSE](../../LICENSE **Penafian**: -Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Walaupun kami berusaha untuk ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat penting, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini. +Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Walaupun kami berusaha untuk ketepatan, sila maklum bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya perlu dianggap sebagai sumber yang sahih. Untuk maklumat penting, disarankan terjemahan profesional oleh manusia. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini. \ No newline at end of file diff --git a/translations/ms/for-teachers.md b/translations/ms/for-teachers.md index 2ef794268..f64969b97 100644 --- a/translations/ms/for-teachers.md +++ b/translations/ms/for-teachers.md @@ -42,10 +42,10 @@ Kurikulum ini termasuk pakej yang boleh diimport untuk aliran kerja LMS yang bia - Moodle Cloud mempunyai sokongan Common Cartridge yang terhad. Lebih baik gunakan fail Moodle di atas, yang juga boleh dimuat naik ke Canvas. - Selepas import, semak modul, tarikh akhir, dan tetapan kuiz untuk disesuaikan dengan jadual penggal anda. -![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.ms.png) +![Moodle](../../translated_images/moodle.94eb93d714a50cb2.ms.png) > Kurikulum dalam kelas Moodle -![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.ms.png) +![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.ms.png) > Kurikulum dalam Canvas ### Penggunaan repositori secara langsung (tanpa Classroom) diff --git a/translations/sw/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/sw/1-getting-started-lessons/1-intro-to-programming-languages/README.md index e1aa5dd7b..c212bc40e 100644 --- a/translations/sw/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/sw/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,106 +1,190 @@ -# Utangulizi wa Lugha za Programu na Zana za Kisasa za Waendelezaji - -Habari, mendelezaji wa siku zijazo! 👋 Naweza kukuambia kitu ambacho bado kinanipa msisimko kila siku? Uko karibu kugundua kuwa programu si tu kuhusu kompyuta – ni kuhusu kuwa na nguvu za ajabu za kuleta mawazo yako ya ajabu kuwa hai! - -Unajua ule wakati unapotumia programu yako unayoipenda na kila kitu kinaenda sawa kabisa? Unapobonyeza kitufe na kitu cha kichawi kinatokea ambacho kinakufanya useme "wow, walifanyaje HILO?" Naam, mtu kama wewe – labda akiwa amekaa kwenye kahawa yake anayoipenda saa 2 asubuhi akiwa na espresso yake ya tatu – aliandika msimbo uliounda uchawi huo. Na hapa ndipo akili yako itakaposhangaa: kufikia mwisho wa somo hili, hutajua tu jinsi walivyofanya, lakini utakuwa na hamu ya kujaribu mwenyewe! - -Tazama, ninaelewa kabisa ikiwa programu inakutisha kwa sasa. Nilipoanza, nilidhani unahitaji kuwa na akili ya hesabu au kuwa umekuwa ukifanya programu tangu ulipokuwa na miaka mitano. Lakini hapa ndipo mtazamo wangu ulipobadilika kabisa: programu ni kama kujifunza kuzungumza katika lugha mpya. Unaanza na "habari" na "asante," kisha unajifunza kuagiza kahawa, na kabla hujajua, unakuwa na mijadala ya kina ya kifalsafa! Isipokuwa katika hali hii, unazungumza na kompyuta, na kwa kweli? Ni washirika wa mazungumzo wenye subira zaidi utakaowahi kuwa nao – hawahukumu makosa yako na daima wako tayari kujaribu tena! - -Leo, tutachunguza zana za ajabu zinazofanya maendeleo ya wavuti ya kisasa kuwa si tu yanayowezekana, bali yanayovutia sana. Ninazungumzia wahariri, vivinjari, na mtiririko wa kazi sawa kabisa ambao waendelezaji wa Netflix, Spotify, na studio yako ya programu ya indie wanatumia kila siku. Na hapa ndipo sehemu itakayokufanya ucheze kwa furaha: nyingi ya zana hizi za kiwango cha kitaalamu, za viwango vya sekta, ni bure kabisa! - -![Utangulizi wa Programu](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.sw.png) -> Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac) +# Utangulizi wa Lugha za Programu na Vifaa vya Kisasa vya Mwaendelezaji + +Hujambo, mtaalamu wa kesho! 👋 Naweza kukuambia kitu kinachoniletea baridi kila siku? Unakaribia kugundua kuwa programu siyo tu kuhusu kompyuta – ni kuhusu kuwa na nguvu za kichawi kuleta mawazo yako shupavu katika maisha! + +Unajua wakati unapotumia programu unayopenda na kila kitu kinakwenda vizuri? Unapobofya kitufe na kitu cha kichawi kinatokea kinachokufanya useme "wow, walifanyaje hivyo?" Naam, mtu kama wewe – labda amekaa kwenye kahawa anayopenda saa 2 asubuhi akiwa na espresso ya tatu – aliandika msimbo uliosababisha kichawi hicho. Na hapa ndipo utakapoanguka kustaajabishwa: mwishoni mwa somo hili, hutagundua tu jinsi walivyofanya, bali utataka pia kujaribu wewe mwenyewe! + +Tazama, naelewa kabisa kama programu inakuletea hofu sasa hivi. Nilipoanza, nilifikiri unatakiwa uwe genius wa hisabati au umekuwa ukifanya programu tangu umekuwa na miaka mitano. Lakini hii ilibadilisha kabisa mtazamo wangu: programu ni sawa na kujifunza kuzungumza katika lugha mpya. Unaanzia na "hello" na "thank you," kisha unaendelea kuagiza kahawa, na ghafla unazungumza mijadala ya mwanafalsafa! Ila katika hili, unazungumza na kompyuta, na kweli? Kompyuta ni washirika wa mazungumzo wenye subira sana – hawakufungii makosa yako laana na daima wanataka kujaribu tena! + +Leo, tutaangalia zana za ajabu zinazofanya maendeleo ya wavuti wa kisasa siyo tu kuwawezekana, bali kuwa kitu cha kuvutia sana. Ninazungumzia wahariri, vivinjari na njia za kazi sawa na zile zinazotumika na waendelezaji wa Netflix, Spotify, na studio yako ya programu unayopenda kila siku. Na hapa ni sehemu itakayokupeleka kucheza kwa furaha: wengi wa zana hizi za kitaalamu za kiwango cha viwanda ni bure kabisa! + +![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.sw.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) + +```mermaid +journey + title Safari Yako ya Uandishi wa Programu Leo + section Gundua + Nini Uandishi wa Programu: 5: You + Lugha za Uandishi wa Programu: 4: You + Muhtasari wa Vifaa: 5: You + section Chunguza + Wahariri wa Msimbo: 4: You + Vivinjari na Zana za Waendelezaji: 5: You + Mstari wa Amri: 3: You + section Fanya Mazoezi + Mpelelezi wa Lugha: 4: You + Uchunguzi wa Vifaa: 5: You + Muungano wa Jamii: 5: You +``` +## Tuchunguze Unachojua Tayari! -## Hebu Tuone Unachojua Tayari! +Kabla hatujaingia kwenye mambo ya kufurahisha, nina hamu ya kujua – tayari unajua nini kuhusu ulimwengu huu wa programu? Na sikiliza, kama unapoangalia maswali haya ukijiambia "hatuna wazo hata kidogo kuhusu haya," hiyo siyo tu sawa, ni nzuri kabisa! Hiyo ina maana uko mahali pale pa kuanzia. Fikiria hii kama kufanya mazoezi kabla ya mazoezi halisi – tunaandaa misuli ya ubongo! -Kabla hatujaanza na mambo ya kufurahisha, nina hamu – unajua nini tayari kuhusu ulimwengu huu wa programu? Na sikiliza, ikiwa unatazama maswali haya ukifikiria "Sina hata kidogo kuhusu haya," hiyo si tu sawa, ni kamilifu! Hii inamaanisha uko mahali sahihi kabisa. Fikiria jaribio hili kama kunyoosha kabla ya mazoezi – tunachochea tu misuli ya ubongo! +[Chukua mtihani wa kabla ya somo](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) -[Chukua jaribio la kabla ya somo](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) -## Safari Tunayoenda Pamoja +## Safari Tunayoanza Pamoja -Sawa, nina furaha sana kuhusu kile tutakachochunguza leo! Kwa kweli, natamani ningekuona uso wako wakati baadhi ya dhana hizi zinakubalika. Hii ndiyo safari ya ajabu tunayoenda pamoja: +Sawa, nina furaha sana kuhusu kile tutakachokigundua leo! Kwa kweli, ningependa kuona uso wako unavyotabasamu wakati baadhi ya dhana hizi zitakapoeleweka. Haya ni mambo makuu tunayoyachunguza pamoja: -- **Programu ni nini hasa (na kwa nini ni kitu cha kupendeza sana!)** – Tutagundua jinsi msimbo ni uchawi usioonekana unaoendesha kila kitu karibu nawe, kutoka kwa kengele inayojua kuwa ni Jumatatu asubuhi hadi algorithm inayokamilisha mapendekezo yako ya Netflix -- **Lugha za programu na tabia zao za kushangaza** – Fikiria kuingia kwenye sherehe ambapo kila mtu ana nguvu za kipekee na njia za kutatua matatizo. Hivyo ndivyo ulimwengu wa lugha za programu ulivyo, na utapenda kukutana nao! -- **Msingi wa ujenzi unaofanya uchawi wa kidijitali kutokea** – Fikiria haya kama seti ya LEGO ya ubunifu wa hali ya juu. Mara tu unapojua jinsi vipande hivi vinavyofanya kazi pamoja, utagundua kuwa unaweza kujenga chochote unachokiwaza -- **Zana za kitaalamu zitakazokufanya uhisi kama umekabidhiwa fimbo ya mchawi** – Sizungumzii kwa kuzidisha – zana hizi zitakufanya uhisi kama una nguvu za ajabu, na sehemu bora zaidi? Ni zile zile zinazotumiwa na wataalamu! +- **Programu ni nini hasa (na kwa nini ni jambo la kuvutia zaidi!)** – Tutagundua jinsi msimbo ni nguvu ya kichawi isiyoonekana inayotawaliya kila kitu kinachokuzunguka, kutoka saa yako ya kengele inayojua ni Jumatatu asubuhi hadi algorithm inayoakili mapendekezo yako ya Netflix +- **Lugha za programu na utu wao wa ajabu** – Fikiria unaingia kwenye sherehe ambapo kila mtu ana nguvu tofauti na njia za kutatua matatizo. Dunia ya lugha za programu ni kama hivyo, na utapenda kuwakutana nao! +- **Misingi ya msingi inayosababisha uchawi wa kidijitali kutokea** – Fikiria hivi kama seti ya LEGO bora kabisa ya ubunifu. Ukijua jinsi vipande hivi vinavyolingana, utaona unaweza kujenga chochote kinachotokana na mawazo yako +- **Zana za kitaalamu zitakazokufanya uhisi kama umepata fimbo ya mchawi** – Sio kujaa mbwembwe hapa – zana hizi zitakufanya uhisi kama una nguvu za kichawi, na sehemu nzuri? Ni zile zile zinazotumika na wataalamu! -> 💡 **Hili ndilo jambo**: Usifikirie hata kujaribu kukumbuka kila kitu leo! Kwa sasa, nataka tu uhisi msisimko wa kile kinachowezekana. Maelezo yatakaa kwa kawaida tunapojifunza pamoja – ndivyo kujifunza halisi kunavyotokea! +> 💡 **Hili ni jambo:** Usijaribu kumbuka yote leo! Sasa hivi, nataka ujisikie msisimko wa kile kinachowezekana. Maelezo yatajifunza kwa asili tukiwa tunazoezana – ndiyo jinsi mafunzo halisi yanavyotokea! > Unaweza kuchukua somo hili kwenye [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -## Kwa Hiyo Programu ni Nini Haswa? - -Sawa, hebu tushughulikie swali la mamilioni ya dola: programu ni nini, kweli? - -Nitakupa hadithi iliyobadilisha kabisa jinsi ninavyofikiria kuhusu hili. Wiki iliyopita, nilikuwa nikijaribu kumwelezea mama yangu jinsi ya kutumia rimoti mpya ya runinga yetu ya kisasa. Nilijikuta nikisema vitu kama "Bonyeza kitufe chekundu, lakini si kile kikubwa chekundu, kile kidogo chekundu upande wa kushoto... hapana, kushoto kwako... sawa, sasa shikilia kwa sekunde mbili, si moja, si tatu..." Inajulikana? 😅 - -Hiyo ni programu! Ni sanaa ya kutoa maelekezo ya kina, hatua kwa hatua kwa kitu chenye nguvu sana lakini kinahitaji kila kitu kuelezwa kwa ukamilifu. Isipokuwa badala ya kumwelezea mama yako (ambaye anaweza kuuliza "ni kitufe kipi chekundu?!"), unamwelezea kompyuta (ambayo hufanya tu kile unachosema, hata kama kile ulichosema si kile ulichomaanisha). - -Hapa ndipo akili yangu iliposhangaa nilipojifunza hili: kompyuta kwa kweli ni rahisi sana kwa msingi wake. Zinajua tu mambo mawili – 1 na 0, ambayo kimsingi ni "ndiyo" na "hapana" au "washa" na "zima." Hiyo tu! Lakini hapa ndipo uchawi unapoingia – hatuhitaji kuzungumza kwa 1 na 0 kama tuko kwenye The Matrix. Hapo ndipo **lugha za programu** zinakuja kuokoa. Ni kama kuwa na mtafsiri bora zaidi duniani ambaye huchukua mawazo yako ya kawaida ya kibinadamu na kuyabadilisha kuwa lugha ya kompyuta. - -Na hapa ndipo bado ninapata msisimko halisi kila asubuhi ninapoamka: kila kitu cha kidijitali maishani mwako kilianza na mtu kama wewe, labda akiwa amevaa pajama zake na kikombe cha kahawa, akiandika msimbo kwenye kompyuta yake ndogo. Kichujio cha Instagram kinachokufanya uonekane mzuri? Mtu alikiandika. Pendekezo lililokupeleka kwenye wimbo wako mpya unaoupenda? Mendelezaji alijenga algorithm hiyo. Programu inayokusaidia kugawanya bili za chakula cha jioni na marafiki? Ndio, mtu alifikiria "hili linakera, naweza kulitatua" kisha... wakafanya! - -Unapojifunza programu, huchukui tu ujuzi mpya – unakuwa sehemu ya jamii hii ya ajabu ya watatuzi wa matatizo ambao hutumia siku zao kufikiria, "Je, ningeweza kujenga kitu ambacho kinaboresha siku ya mtu kidogo tu?" Kwa kweli, kuna kitu chochote cha kupendeza zaidi ya hicho? - -✅ **Ukweli wa Kufurahisha**: Hapa kuna kitu cha kupendeza sana cha kutafuta wakati una nafasi – unadhani ni nani alikuwa mendelezaji wa kwanza wa kompyuta duniani? Nitakupa kidokezo: huenda si yule unayemtarajia! Hadithi ya mtu huyu ni ya kuvutia sana na inaonyesha kuwa programu daima imekuwa kuhusu kutatua matatizo kwa ubunifu na kufikiria nje ya boksi. - -## Lugha za Programu ni Kama Ladha Tofauti za Uchawi - -Sawa, hili litaonekana la ajabu, lakini endelea nami – lugha za programu ni kama aina tofauti za muziki. Fikiria: una jazz, ambayo ni laini na ya ubunifu, rock ambayo ni yenye nguvu na rahisi, classical ambayo ni maridadi na yenye muundo, na hip-hop ambayo ni ya ubunifu na ya kujieleza. Kila mtindo una vibe yake, jamii yake ya mashabiki wenye shauku, na kila moja ni kamilifu kwa hali na hafla tofauti. - -Lugha za programu zinafanya kazi kwa njia sawa kabisa! Husingetumia lugha sawa kujenga mchezo wa simu wa kufurahisha kama unavyotumia kuchambua data kubwa ya hali ya hewa, kama vile usingecheza death metal kwenye darasa la yoga (naam, darasa nyingi za yoga angalau! 😄). - -Lakini hapa ndipo akili yangu inashangaa kila wakati ninapofikiria kuhusu hili: lugha hizi ni kama kuwa na mtafsiri mwenye subira, mwenye akili sana anayekaa karibu nawe. Unaweza kueleza mawazo yako kwa njia inayohisi kuwa ya kawaida kwa ubongo wa kibinadamu, na wao hushughulikia kazi ngumu ya kutafsiri hiyo kuwa 1s na 0s ambazo kompyuta huzungumza. Ni kama kuwa na rafiki ambaye ni mtaalamu wa "ubunifu wa kibinadamu" na "mantiki ya kompyuta" – na hawachoki, hawahitaji mapumziko ya kahawa, na hawakuhukumu kwa kuuliza swali lile lile mara mbili! - -### Lugha Maarufu za Programu na Matumizi Yake - -| Lugha | Bora Kwa | Kwa Nini Ni Maarufu | -|-------|----------|---------------------| -| **JavaScript** | Maendeleo ya wavuti, interfaces za mtumiaji | Inaendesha kwenye vivinjari na inawezesha tovuti za maingiliano | +## Hivyo Basi, Programu Ni Nini Kweli? + +Sawa, tujiandae kukabiliana na swali la pesa milioni: programu ni nini, kweli? + +Nitakuambia hadithi iliyobadilisha kabisa mtazamo wangu kuhusu hili. Wiki iliyopita, nilijaribu kumweleza mama yangu jinsi ya kutumia kidhibiti TV yetu mpya smart. Nilijikuta nikisema vitu kama "Bonyeza kitufe cheupe, lakini si kitufe kikubwa cheupe, ni kidogo upande wa kushoto... hapana, upande mwingine wa kushoto... sawa, sasa shikilia kwa sekunde mbili, si moja, si tatu..." Inajulikana? 😅 + +Hiyo ndiyo programu! Ni sanaa ya kutoa maagizo ya kina, hatua kwa hatua kwa kitu chenye nguvu lakini kinahitaji kila kitu kieleweke vizuri. Badala ya kumweleza mama yako (anaweza kuuliza "kitufe cheupe kipi?!"), unamweleza kompyuta (inafanya tu kile unachosema, hata kama hicho siyo ile ulichomaanisha). + +Hili lilenishangaza nilipolijifunza kwanza: kompyuta ni rahisi hasa ndani yake. Zinachambua vitu viwili tu – 1 na 0, ambayo ni sawa na "ndiyo" na "hapana" au "zima" na "zimewashwa". Hiyo tu! Lakini hapa ndipo kina kichawi kinapoanza – hatuhitaji kuzungumza kwa 1 na 0 kama tunavyofanya katika The Matrix. Hapo ndipo **lugha za programu** zinapokuja kuokoa hali. Ni kama kuwa na mkalimani bora duniani anayechukua mawazo yako ya kawaida ya binadamu na kuyatafsiri kwa lugha ya kompyuta. + +Na hili linanilia baridi kila asubuhi ninapoamka: kila kitu kidijitali katika maisha yako kilianzishwa na mtu kama wewe, labda amekaa mavazi ya kulala na kikombe cha kahawa, akiandika msimbo kwenye kompyuta yake ndogo. Filteri ya Instagram inayokufanya uonekane mzuri? Mtu aliandika msimbo huo. Mapendekezo yaliyokupeleka kwenye wimbo wako mpya mpendwa? Mtaalamu alijenga algorithm hiyo. Programu inayokusaidia kugawanya bili za chakula na marafiki? Vilevile, mtu aliyedhani "hili linanichosha, nitaweza kulitatua" na kisha... wakafanya! + +Unapojifunza programu, hauchagui tu ujuzi mpya – unajiunga na jamii hii ya ajabu ya watu wanaotafuta kutatua matatizo walioko siku nzima wakijiuliza, "Je, naweza kujenga kitu kitakachofanya mtu afurahie kidogo zaidi?" Kwa kweli, kuna jambo lolote la kuvutia zaidi kuliko hilo? + +✅ **Tamasha la Habari za Kufurahisha:** Hapa kuna kitu kizuri cha kutafiti unachopata muda – unafikiri ni nani alianza kuandika programu ya kompyuta duniani? Nitakupa dalili: labda si mtu unayemsubiria! Hadithi ya mtu huyu ni ya kusisimua sana na inaonyesha kuwa programu daima imekuwa kuhusu ubunifu wa kutatua matatizo na kufikiria nje ya kawaida. + +### 🧠 **Wakati wa Kukagua: Unaonaje?** + +**Chukua muda kutafakari:** +- Je, wazo la "kutoa maagizo kwa kompyuta" linaeleweka kwako sasa? +- Unaweza kufikiria kazi ya kila siku unayotaka kuiboresha kwa programu? +- Maswali yapi yanakutokea kuhusu jambo hili zima la programu? + +> **Kumbuka:** Ni kawaida kabisa kama baadhi ya dhana zinakuletea msukosuko sasa. Kujifunza programu ni sawa na kujifunza lugha mpya – inahitaji muda kwa ubongo wako kujenga njia za neva. Unaendelea vizuri sana! + +## Lugha za Programu Zimefananishwa na Ladha Tofauti za Uchawi + +Sawa, hili litawasikika la ajabu, lakini uko pamoja nami – lugha za programu ni kama aina tofauti za muziki. Fikiria: una jazz, ambayo ni laini na ya kubembeleza, rock yenye nguvu na ya moja kwa moja, classical nzuri na yenye muundo, na hip-hop ya ubunifu na ya kueleza hisia. Kila mtindo una vibe yake, jamii yake ya mashabiki, na kila mmoja ni mzuri kwa hali tofauti na hafla. + +Lugha za programu zinafanya kazi sawa! Hutaweka lugha moja kujenga mchezo wa simu wa kufurahisha unavyotumia kusindika data kubwa za hali ya hewa, kama vile hautakacheza death metal katika darasa la yoga (labda si katika darasa zote za yoga! 😄). + +Lakini hii kila mara inanishangaza: lugha hizi ni kama kuwa na mfasiri mwerevu na mwenye subira zaidi duniani anakakaa kando yako. Unaweza kueleza mawazo yako kwa njia inayofaa ubongo wako wa binadamu, nao wanashughulikia kazi ngumu sana ya kutafsiri maneno hayo kuwa 1 na 0 ambao kompyuta husema. Ni kama kukaa na rafiki anayezungumza vizuri sana "ubunifu wa binadamu" na "mantiki ya kompyuta" – na hawachoki, hawahitaji mapumziko ya kahawa, wala hawakufungii maswali mara mbili! + +### Lugha Maarufu za Programu na Matumizi Yao + +```mermaid +mindmap + root((Lugha za Kuprogramu)) + Web Development + JavaScript + Uchawi wa Mbele + Tovuti Zinazoshirikiana + TypeScript + JavaScript + Aina + Programu za Shirika + Data & AI + Python + Sayansi ya Takwimu + Kujifunza kwa Mashine + Uendeshaji wa Kiotomatiki + R + Takwimu + Utafiti + Mobile Apps + Java + Android + Shirika + Swift + iOS + Mfumo wa Apple + Kotlin + Android ya Kisasa + Mtandao wa Majukwaa Mbalimbali + Systems & Performance + C++ + Michezo + Utendaji Muhimu + Rust + Usalama wa Kumbukumbu + Uandishi wa Mfumo + Go + Huduma za Wingu + Sehemu ya Nyuma Inayozidi Kukua +``` +| Lugha | Bora Kwa | Kwa Nini Inapendwa | +|----------|----------|------------------| +| **JavaScript** | Maendeleo ya mtandao, matumizi ya mtumiaji | Inaendesha kwenye vivinjari na inaua websites zinazojibu | | **Python** | Sayansi ya data, otomatiki, AI | Rahisi kusoma na kujifunza, maktaba zenye nguvu | -| **Java** | Programu za biashara, programu za Android | Huru kwa jukwaa, imara kwa mifumo mikubwa | -| **C#** | Programu za Windows, maendeleo ya michezo | Msaada mkubwa wa mfumo wa Microsoft | -| **Go** | Huduma za wingu, mifumo ya nyuma | Haraka, rahisi, iliyoundwa kwa kompyuta ya kisasa | - -### Lugha za Kiwango cha Juu vs. Kiwango cha Chini - -Sawa, hili lilikuwa dhana iliyovunja akili yangu nilipoanza kujifunza, kwa hivyo nitashiriki mfano uliofanya hatimaye nielewe – na ninatumaini sana itakusaidia pia! - -Fikiria unatembelea nchi ambapo hujui lugha, na unahitaji sana kupata choo cha karibu (sote tumewahi kuwa hapo, sivyo? 😅): - -- **Programu ya kiwango cha chini** ni kama kujifunza lahaja ya eneo hilo vizuri sana kiasi kwamba unaweza kuzungumza na bibi anayeuza matunda pembezoni kwa kutumia marejeleo ya kitamaduni, misemo ya eneo hilo, na utani wa ndani ambao mtu aliyekulia hapo tu angeelewa. Inavutia sana na yenye ufanisi... ikiwa unajua lugha hiyo! Lakini inachosha sana wakati unajaribu tu kupata choo. - -- **Programu ya kiwango cha juu** ni kama kuwa na rafiki wa eneo hilo ambaye anakuelewa. Unaweza kusema "Nahitaji sana kupata choo" kwa Kiingereza rahisi, na wao hushughulikia tafsiri zote za kitamaduni na kukupa maelekezo kwa njia inayofanya akili kwa ubongo wako usio wa eneo hilo. - -Katika maneno ya programu: -- **Lugha za kiwango cha chini** (kama Assembly au C) hukuruhusu kuwa na mazungumzo ya kina sana na vifaa halisi vya kompyuta, lakini unahitaji kufikiria kama mashine, ambayo ni... vizuri, wacha tuseme ni mabadiliko makubwa ya akili! -- **Lugha za kiwango cha juu** (kama JavaScript, Python, au C#) hukuruhusu kufikiria kama binadamu huku wakishughulikia mazungumzo yote ya mashine nyuma ya pazia. Zaidi ya hayo, zina jamii za kukaribisha sana zilizojaa watu wanaokumbuka jinsi ilivyokuwa kuwa mpya na wanataka kweli kusaidia! - -Unadhani ni zipi nitakazopendekeza uanze nazo? 😉 Lugha za kiwango cha juu ni kama kuwa na magurudumu ya mafunzo ambayo hutaki kamwe kuyaondoa kwa sababu yanayafanya uzoefu mzima kuwa wa kufurahisha zaidi! - -### Hebu Nikuonyeshe Kwa Nini Lugha za Kiwango cha Juu Ni Rafiki Zaidi +| **Java** | Programu za biashara, apps za Android | Haina utegemezi kwa jukwaa, imara kwa mifumo mikubwa | +| **C#** | Programu za Windows, maendeleo ya michezo | Msaada mkubwa kutoka ekosistimu ya Microsoft | +| **Go** | Huduma za wingu, mifumo ya nyuma | Haraka, rahisi, imetengenezwa kwa kompyuta za kisasa | + +### Lugha za Ngazi ya Juu vs. Ngazi ya Chini + +Sawa, hili lilikuwa dhana iliyonifanya nifikirie sana nikiwa namjifunza, kwa hiyo nitakushirikisha mfano uliomsababisha nifahamu – na natumai pia utakupatia mwanga! + +Fikiria unasafiri nchi ambako husemi lugha yao, na unahitaji kwa dharura kupata choo kilicho karibu (sote tumesonga hivyo, sivyo? 😅): + +- **Programu za ngazi ya chini** ni sawa na kujifunza lahaja za eneo hadi uweze kuzungumza na bibi anayeuza matunda kona akitumia mafumbo ya kitamaduni, mžio wa mtaa, na vichekesho vya ndani ambavyo mtu aliyekulia hapo ndie atakayafahamu. Ni ya kushangaza na yenye ufanisi sana... ikiwa uko mzuri katika hiyo! Lakini ni mzito unapojaribu tu kupata choo. + +- **Programu za ngazi ya juu** ni kama kuwa na rafiki mzuri wa huko anayekuelewa. Unaweza kusema "Nahitaji kabisa kupata choo" kwa Kingereza rahisi, nao wanashughulikia tafsiri zote za kitamaduni na kukupa maelekezo yanayofaa ubongo wako usiojua lugha. + +Katika lugha ya programu: +- **Lugha za ngazi ya chini** (kama Assembly au C) zinakuwezesha kuzungumza kwa maelezo kwa vifaa halisi vya kompyuta, lakini unatakiwa ufikirie kama mashine, ambacho... ni mabadiliko makubwa ya mawazo! +- **Lugha za ngazi ya juu** (kama JavaScript, Python, au C#) zinakuwezesha kufikiria kama binadamu wakati zinashughulikia lugha ya mashine nyuma. Zaidi ya hayo, zina jamii za watu wanaokukaribisha kwa ukarimu waliokumbuka jinsi ilivyokuwa kuwa mpya na wana hamu kweli ya kusaidia! + +Vipi unadhani nitakushauri uanze na zipi? 😉 Lugha za ngazi ya juu ni kama magurudumu ya mafunzo ambayo hutaki kuondoa kamwe kwa sababu zinafanya uzoefu kuwa mzuri zaidi! + +```mermaid +flowchart TB + A["👤 Mawazo ya Binadamu:
'Nataka kuhesabu nambari za Fibonacci'"] --> B{Chagua Kiwango cha Lugha} + + B -->|High-Level| C["🌟 JavaScript/Python
Rahisi kusoma na kuandika"] + B -->|Low-Level| D["⚙️ Assembly/C
Udhibiti wa moja kwa moja wa vifaa"] + + C --> E["📝 Andika: fibonacci(10)"] + D --> F["📝 Andika: mov r0,#00
sub r0,r0,#01"] + + E --> G["🤖 Uelewa wa Kompyuta:
Mfasiri hushughulikia ugumu"] + F --> G + + G --> H["💻 Matokeo Sawa:
0, 1, 1, 2, 3, 5, 8, 13..."] + + style C fill:#e1f5fe + style D fill:#fff3e0 + style H fill:#e8f5e8 +``` +### Niruhusu Nikuonyeshe Kwa Nini Lugha za Ngazi ya Juu ni Marafiki Zaidi -Sawa, nitakuonyesha kitu kinachoonyesha kikamilifu kwa nini nilipenda lugha za kiwango cha juu, lakini kwanza – nahitaji uniahidi kitu. Unapoona mfano wa kwanza wa msimbo, usishtuke! Inatakiwa ionekane ya kutisha. Hiyo ndiyo hoja ninayotoa! +Sawa, nitakuonyesha kitu kinachoelezea vizuri kwa nini nilipenda lugha za ngazi ya juu, lakini kwanza – nataka uahidi kitu. Unapoona mfano wa kwanza wa msimbo, usitoke hofu! Inapaswa kuonekana kama inavunja moyo kidogo. Hilo ndilo ninalolielezea! -Tutatazama kazi ile ile iliyoandikwa kwa mitindo miwili tofauti kabisa. Zote zinaunda kinachoitwa mlolongo wa Fibonacci – ni muundo huu mzuri wa kihesabu ambapo kila namba ni jumla ya mbili zilizopita: 0, 1, 1, 2, 3, 5, 8, 13... (Ukweli wa kufurahisha: utapata muundo huu kila mahali katika asili – mizunguko ya mbegu za alizeti, mifumo ya maganda ya pinecone, hata jinsi galaksi zinavyoundwa!) +Tutatazama kazi sawa ikifanywa kwa mitindo miwili tofauti kabisa. Zote mbili zinaunda kile kinachoitwa mfuatano wa Fibonacci – ni mfano mzuri wa hisabati ambapo kila namba ni jumla ya zilizo mbili kabla yake: 0, 1, 1, 2, 3, 5, 8, 13... (Habari ya kufurahisha: utaona mfano huu katika asili kila mahali – mizunguko ya mbegu za sunflower, michoro ya magovu, hata namna magalaxi zinavyojengwa!) -Uko tayari kuona tofauti? Twende! +Tayari kuona tofauti? Twende! -**Lugha ya kiwango cha juu (JavaScript) – Rafiki kwa binadamu:** +**Lugha ya ngazi ya juu (JavaScript) – Rafiki wa binadamu:** ```javascript -// Step 1: Basic Fibonacci setup +// Hatua ya 1: Mpangilio wa msingi wa Fibonacci const fibonacciCount = 10; let current = 0; let next = 1; @@ -108,32 +192,32 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**Hii ndiyo msimbo unavyofanya:** -- **Tangaza** constant ili kubainisha idadi ya namba za Fibonacci tunazotaka kuzalisha -- **Anzisha** vigezo viwili kufuatilia namba za sasa na zinazofuata katika mlolongo -- **Weka** thamani za kuanzia (0 na 1) zinazofafanua muundo wa Fibonacci -- **Onyesha** ujumbe wa kichwa kutambua matokeo yetu +**Hiki nifanyacho msimbo huu:** +- **Tangaza** thabiti kuainisha ni namba ngapi za Fibonacci tunazotaka kuunda +- **Anzisha** vigezo viwili kufuatilia namba ya sasa na inayofuata katika mfuatano +- **Weka** thamani za mwanzo (0 na 1) zinazofafanua muundo wa Fibonacci +- **Onyesha** ujumbe wa kichwa ili kutambua matokeo yetu ```javascript -// Step 2: Generate the sequence with a loop +// Hatua ya 2: Tengeneza mlolongo kwa kutumia mduara for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Calculate next number in sequence + // Hesabu nambari inayofuata katika mlolongo const sum = current + next; current = next; next = sum; } ``` -**Kufafanua kinachotokea hapa:** -- **Rudia** kila nafasi katika mlolongo wetu kwa kutumia `for` loop +**Kuvunja kile kinachotokea hapa:** +- **Rudi** kwa kila nafasi katika mfuatano kwa kutumia `for` loop - **Onyesha** kila namba na nafasi yake kwa kutumia muundo wa template literal -- **Hesabu** namba inayofuata ya Fibonacci kwa kuongeza thamani za sasa na zinazofuata -- **Sasisha** vigezo vyetu vya kufuatilia ili kuendelea na mzunguko unaofuata +- **Hesabu** namba inayofuata ya Fibonacci kwa kuongeza namba ya sasa na inayofuata +- **Sasa** bora vigezo vyetu kufuata mchakato mwingine ```javascript -// Step 3: Modern functional approach +// Hatua ya 3: Mbinu ya kisasa ya kazi const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -144,18 +228,18 @@ const generateFibonacci = (count) => { return sequence; }; -// Usage example +// Mfano wa matumizi const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**Katika hapo juu, tumefanya:** -- **Tengeneza** kazi inayoweza kutumika tena kwa kutumia sintaksia ya kisasa ya kazi ya mshale -- **Jenga** safu ya kuhifadhi mlolongo kamili badala ya kuonyesha moja moja -- **Tumia** faharasa ya safu ili kuhesabu kila namba mpya kutoka kwa thamani za awali -- **Rudisha** mlolongo kamili kwa matumizi rahisi katika sehemu nyingine za programu yetu +**Hapo juu, tume:** +- **Tengeneza** kazi inayoweza kutumika tena kwa kutumia sintaksia ya mishale ya kisasa +- **Jenga** orodha kuhifadhi mfuatano wote badala ya kuonyesha namba moja baada ya nyingine +- **Tumia** kuorodheshwa kwa orodha kufanikisha hesabu za namba mpya kutoka kwa thamani zilizopita +- **Rudisha** mfuatano kamili kwa matumizi tofauti sehemu nyingine kwenye programu yetu -**Lugha ya kiwango cha chini (ARM Assembly) – Rafiki kwa kompyuta:** +**Lugha ya ngazi ya chini (ARM Assembly) – Rafiki wa kompyuta:** ```assembly area ascen,code,readonly @@ -182,61 +266,63 @@ back add r0,r1 end ``` -Angalia jinsi toleo la JavaScript linavyosomwa karibu kama maelekezo ya Kiingereza, wakati toleo la Assembly linatumia amri za fumbo zinazodhibiti moja kwa moja processor ya kompyuta. Zote zinatimiza kazi ile ile, lakini lugha ya kiwango cha juu ni rahisi zaidi kwa binadamu kuelewa, kuandika, na kudumisha. +Angalia jinsi toleo la JavaScript linavyosoma karibuni kama maagizo ya Kiingereza, huku toleo la Assembly likitumika amri za fumbo zinazosimamia processor ya kompyuta moja kwa moja. Zote zimefanya kazi ile ile, lakini lugha ya ngazi ya juu ni rahisi kwa wanadamu kuelewa, kuandika, na kudumisha. -**Tofauti kuu utakazoziona:** -- **Usomaji**: JavaScript hutumia majina ya kuelezea kama `fibonacciCount` wakati Assembly hutumia lebo za fumbo kama `r0`, `r1` -- **Maoni**: Lugha za kiwango cha juu zinahimiza maoni ya kuelezea yanayofanya msimbo kuwa wa kujieleza -- **Muundo**: Mtiririko wa kimantiki wa JavaScript unafanana na jinsi binadamu wanavyofikiria kuhusu matatizo hatua kwa hatua -- **Matengenezo**: Kusasisha toleo la JavaScript kwa mahitaji tofauti ni rahisi na wazi -✅ **Kuhusu mfululizo wa Fibonacci**: Mpangilio huu wa namba wa kuvutia sana (ambapo kila namba ni jumla ya mbili zilizopita: 0, 1, 1, 2, 3, 5, 8...) unapatikana kila mahali katika asili! Utauona kwenye mizunguko ya alizeti, muundo wa maganda ya mvinje, jinsi magamba ya nautilus yanavyopinda, na hata jinsi matawi ya miti yanavyokua. Ni ajabu jinsi hesabu na programu zinavyoweza kutusaidia kuelewa na kuunda upya mifumo ambayo asili hutumia kuunda uzuri! +**Tofauti kuu utakazogundua:** +- **Soma kwa urahisi**: JavaScript inatumia majina ya kuelezea kama `fibonacciCount` wakati Assembly inatumia lebo za fumbo kama `r0`, `r1` +- **Maoni**: Lugha za ngazi ya juu zinahimiza maoni ya ufafanuzi yanayofanya msimbo uwe na maandishi ya kujieleza peke yake +- **Muundo**: Mtiririko wa mantiki wa JavaScript unalingana na jinsi binadamu wanavyofikiria matatizo hatua kwa hatua +- **Matunzo**: Kusasisha toleo la JavaScript kwa mahitaji tofauti ni rahisi na wazi -## Msingi Unaofanya Uchawi Utokee +✅ **Kuhusu mfuatano wa Fibonacci**: Muundo huu mzuri kabisa wa nambari (ambapo kila nambari ni jumla ya mbili zilizo mbele yake: 0, 1, 1, 2, 3, 5, 8...) unapatikana kabisa *kila mahali* katika asili! Utauona katika mizunguko ya maua ya jua, mifumo ya mkungu wa maganda ya mfirka, jinsi maganda ya samaki wa baharini yanavyokunja, hata jinsi matawi ya miti yanavyokua. Ni kitu cha kushangaza sana jinsi hisabati na msimbo vinavyotusaidia kuelewa na kuunda tena mifumo ambayo asili hutumia kuonyesha uzuri! -Sawa, sasa kwa kuwa umeona jinsi lugha za programu zinavyoonekana kazini, hebu tuangalie vipande vya msingi vinavyounda kila programu iliyowahi kuandikwa. Fikiria hivi kama viungo muhimu katika mapishi unayopenda – ukielewa kila moja inafanya nini, utaweza kusoma na kuandika programu karibu katika lugha yoyote! -Hii ni kama kujifunza sarufi ya programu. Kumbuka ulipokuwa shuleni ulipojifunza kuhusu nomino, vitenzi, na jinsi ya kuunda sentensi? Programu ina toleo lake la sarufi, na kwa kweli, ni la kimantiki zaidi na lenye msamaha kuliko sarufi ya Kiingereza ilivyokuwa! 😄 +## Vitu Vinavyounda Uchawi Hufanyika -### Kauli: Maelekezo Hatua kwa Hatua +Sawa, sasa umeona jinsi lugha za programu zinavyoonekana zinapotekelezwa, hebu tushambaze vipengele vya msingi vinavyounda kila programu iliyowahi kuandikwa. Fikiria hili kama viungo muhimu katika mapishi yako unayopenda – mara utakapojua kila kimo kinachofanya kazi gani, utaweza kusoma na kuandika msimbo katika karibu lugha yoyote! -Tuanzie na **kauli** – hizi ni kama sentensi za kibinafsi katika mazungumzo na kompyuta yako. Kila kauli inaambia kompyuta kufanya jambo moja maalum, kama kutoa maelekezo: "Geuka kushoto hapa," "Simama kwenye taa nyekundu," "Paki kwenye nafasi ile." +Hii ni kama kujifunza sarufi ya programu. Kumbuka shuleni ulipojifunza kuhusu nomino, vitenzi, na jinsi ya kutengeneza sentensi? Programu zina toleo la sarufi yao wenyewe, na ukweli ni kwamba ni mantiki zaidi na yenye msamaha kuliko sarufi ya Kiingereza ilivyowahi kuwa! 😄 -Kinachonivutia kuhusu kauli ni jinsi zinavyosomeka kwa urahisi. Angalia hii: +### Matamko: Maelekezo Hatua kwa Hatua + +Tuanze na **matamko** – haya ni kama sentensi katika mazungumzo na kompyuta yako. Kila tamko linaeleza kompyuta kufanya jambo moja maalum, kama kutoa maelekezo: "Geuka kushoto hapa," "Simama kwa taa nyekundu," "Paki kwenye sehemu hiyo." + +Ninachopenda kuhusu matamko ni jinsi yanavyosomeka kwa urahisi. Angalia hii: ```javascript -// Basic statements that perform single actions +// Taarifa za msingi zinazofanya vitendo vya moja kwa moja const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` -**Hii ndiyo kazi ya msimbo huu:** -- **Tangaza** kigezo cha kudumu kuhifadhi jina la mtumiaji -- **Onyesha** ujumbe wa salamu kwenye matokeo ya console -- **Hesabu** na hifadhi matokeo ya operesheni ya kihesabu +**Hivi ndivyo msimbo huu unavyofanya kazi:** +- **Tangaza** kigezo kisichobadilika kuhifadhi jina la mtumiaji +- **Onyesha** ujumbe wa salamu kwenye kielekezi cha console +- **Hesabu** na uhifadhi matokeo ya operesheni ya hisabati ```javascript -// Statements that interact with web pages +// Tamko ambalo linaingiliana na kurasa za wavuti document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**Hatua kwa hatua, kinachotokea ni:** -- **Badilisha** kichwa cha ukurasa kinachoonekana kwenye tab ya kivinjari -- **Badilisha** rangi ya mandharinyuma ya mwili wa ukurasa mzima +**Hatua kwa hatua, hivi ndivyo vinavyoendelea:** +- **Badilisha** kichwa cha ukurasa kinachoonekana kwenye kichupo cha kivinjari +- **Badilisha** rangi ya nyuma ya mwili mzima wa ukurasa ### Vigezo: Mfumo wa Kumbukumbu wa Programu Yako -Sawa, **vigezo** ni moja ya dhana ninazopenda sana kufundisha kwa sababu ni kama vitu unavyotumia kila siku! +Sawa, **vigezo** kwa kweli ni mojawapo ya dhana ninazopenda kufundisha kwa sababu ni kama vitu unavyotumia kila siku! -Fikiria orodha ya mawasiliano kwenye simu yako kwa sekunde. Huhifadhi namba za simu za kila mtu kichwani – badala yake, unaandika "Mama," "Rafiki wa Karibu," au "Mahali pa Pizza Inayofika Mpaka Saa 8 Usiku" na unaruhusu simu yako ikumbuke namba halisi. Vigezo vinafanya kazi kwa njia sawa kabisa! Ni kama vyombo vilivyowekwa alama ambapo programu yako inaweza kuhifadhi taarifa na kuipata baadaye kwa kutumia jina linaloeleweka. +Fikiria orodha ya majina kwenye simu yako kwa sekunde. Huwezi kumbuka nambari za kila mtu – badala yake, unahifadhi "Mama," "Rafiki wa karibu," au "Kiwango cha Pizza Kinachowasili Hadi Saa 8 Usiku" na simu yako huhifadhi nambari halisi. Vigezo hufanya kazi kwa njia ile ile! Ni kama vyombo vilivyo na lebo ambavyo programu yako inaweza kuhifadhi taarifa ndani na kuvichukua baadaye kwa kutumia jina linaloeleweka. -Kinachovutia: vigezo vinaweza kubadilika kadri programu yako inavyoendelea (ndiyo maana vinaitwa "vigezo" – unaona walichofanya hapo?). Kama vile unavyoweza kusasisha mawasiliano ya mahali pa pizza unapogundua mahali bora zaidi, vigezo vinaweza kusasishwa kadri programu yako inavyopata taarifa mpya au hali zinavyobadilika! +Hapa ndiyo jambo la kuvutia: vigezo vinaweza kubadilika programu inapotekelezwa (ndio maana ya jina "variable" – unaona walivyofanya?). Kama unavyoweza kusasisha mawasiliano ya pizzeria ukigundua mahali bora zaidi, vigezo vinaweza kubadilishwa programu inapojifunza au hali zikibadilika! -Hebu nikuonyeshe jinsi hii inavyoweza kuwa rahisi na nzuri: +Hebu nikuonyeshe jinsi hii ni rahisi sana: ```javascript -// Step 1: Creating basic variables +// Hatua 1: Kuunda vigezo vya msingi const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; @@ -244,13 +330,13 @@ let isRaining = false; ``` **Kuelewa dhana hizi:** -- **Hifadhi** thamani zisizobadilika kwenye vigezo vya `const` (kama jina la tovuti) -- **Tumia** `let` kwa thamani zinazoweza kubadilika katika programu yako -- **Weka** aina tofauti za data: mistari (maandishi), namba, na booleans (kweli/siyo kweli) -- **Chagua** majina yanayoelezea kinachohifadhiwa na kila kigezo +- **Hifadhi** thamani zisizobadilika katika vigezo vya `const` (kama jina la tovuti) +- **Tumia** `let` kwa thamani zinazobadilika katika programu yako +- **Toa** aina tofauti za data: nyuzi (maneno), nambari, na boolean (kweli/sikuwa kweli) +- **Chagua** majina ya kueleza yaliyotaja kile kila kigezo kinachohifadhi ```javascript -// Step 2: Working with objects to group related data +// Hatua ya 2: Kufanya kazi na vitu kuandaa data zinazohusiana const weatherData = { location: "San Francisco", humidity: 65, @@ -258,50 +344,50 @@ const weatherData = { }; ``` -**Katika hili, tumefanya:** -- **Unda** kitu cha kuunganisha taarifa zinazohusiana za hali ya hewa pamoja +**Juu ya hapo, tume:** +- **Tengeneza** kitu ili kuunganisha taarifa za hali ya hewa zinazohusiana - **Panga** vipande vingi vya data chini ya jina moja la kigezo -- **Tumia** jozi za funguo-thamani kuonyesha kila kipande cha taarifa kwa uwazi +- **Tumia** jozi za funguo na thamani kuweka lebo wazi kwa kila kipande cha taarifa ```javascript -// Step 3: Using and updating variables +// Hatua ya 3: Kutumia na kusasisha vigezo console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Updating changeable variables +// Kusasisha vigezo vinavyobadilika currentWeather = "cloudy"; temperature = 68; ``` **Hebu tuelewe kila sehemu:** -- **Onyesha** taarifa kwa kutumia maandishi ya kiolezo na sintaksia ya `${}` -- **Fikia** mali za kitu kwa kutumia noti ya nukta (`weatherData.windSpeed`) -- **Sasisha** vigezo vilivyotangazwa na `let` kuonyesha hali zinazobadilika -- **Unganisha** vigezo vingi kuunda ujumbe wenye maana +- **Onyesha** taarifa kwa kutumia mistari ya kiolezo na sintaksia ya `${}` +- **Pata** mali za kitu kwa kutumia alama ya doa (`weatherData.windSpeed`) +- **Sasisha** vigezo vilivyotangazwa kwa `let` kuonyesha hali zinazobadilika +- **Changanya** vigezo vingi kutengeneza ujumbe wenye maana ```javascript -// Step 4: Modern destructuring for cleaner code +// Hatua ya 4: Uvunjaji wa kisasa kwa msimbo safi zaidi const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` **Unachohitaji kujua:** -- **Chukua** mali maalum kutoka kwa vitu kwa kutumia mgawanyo wa kigezo -- **Unda** vigezo vipya moja kwa moja kwa majina sawa na funguo za vitu -- **Rahisisha** msimbo kwa kuepuka noti ya nukta inayojirudia +- **Chukua** mali maalum kutoka kwa vitu kwa kutumia mgawanyiko wa ugawaji +- **Tengeneza** vigezo vipya moja kwa moja kwa majina sawa na funguo za kitu +- **Rahisisha** msimbo kwa kuepuka kutumia alama ya doa mara kwa mara ### Mtiririko wa Udhibiti: Kufundisha Programu Yako Kufikiria -Sawa, hapa ndipo programu inakuwa ya kushangaza kabisa! **Mtiririko wa udhibiti** ni kimsingi kufundisha programu yako jinsi ya kufanya maamuzi ya busara, kama unavyofanya kila siku bila hata kufikiria. +Sawa, hapa ndipo programu inapoanza kuwa ya kushangaza kabisa! **Mtiririko wa udhibiti** ni kama kufundisha programu yako jinsi ya kufanya maamuzi bora, kama unavyoyafanya kila siku bila hata kufikiria. -Fikiria hili: asubuhi hii labda ulipitia kitu kama "Ikiwa mvua inanyesha, nitachukua mwavuli. Ikiwa kuna baridi, nitavaa koti. Ikiwa nimechelewa, nitakosa kifungua kinywa na kuchukua kahawa njiani." Ubongo wako hufuata mantiki hii ya ikiwa-basi mara kadhaa kila siku! +Fikiria hili: asubuhi hii labda ulipitia kitu kama "Ikiwa mvua inanyesha, nitachukua mwavuli. Ikiwa ni baridi, nitavaa koti. Ikiwa ninachelewa, nitaruka chakula cha asubuhi na kuchukua kahawa njiani." Ubongo wako hufuata mfumo huu wa ikiwa-basi mara nyingi kila siku! -Hii ndiyo inafanya programu zionekane na akili na hai badala ya kufuata tu mpangilio wa kuchosha na wa kutabirika. Zinaweza kuangalia hali, kutathmini kinachotokea, na kujibu ipasavyo. Ni kama kutoa programu yako ubongo unaoweza kubadilika na kufanya chaguo! +Hii ndio inafanya programu kuwa na akili na hai badala ya kufuata tu maandishi ya kawaida na yasiyobadilika. Zinatoa uwezo wa kutathmini hali, kuamua kinachotokea, na kuonyesha majibu yanayofaa. Ni kama kumnyima programu yako ubongo unaoweza kuendana na kufanya uchaguzi! -Unataka kuona jinsi hii inavyofanya kazi kwa uzuri? Hebu nikuonyeshe: +Unataka kuona jinsi hii inavyofanya kazi kwa urembo? Hebu nikuonyeshe: ```javascript -// Step 1: Basic conditional logic +// Hatua 1: Mantiki ya msingi ya masharti const userAge = 17; if (userAge >= 18) { @@ -312,14 +398,14 @@ if (userAge >= 18) { } ``` -**Hii ndiyo kazi ya msimbo huu:** -- **Angalia** ikiwa umri wa mtumiaji unakidhi hitaji la kupiga kura -- **Tekeleza** vizuizi tofauti vya msimbo kulingana na matokeo ya hali -- **Hesabu** na onyesha muda uliosalia hadi kufikia umri wa kupiga kura ikiwa chini ya miaka 18 +**Hivi ndivyo msimbo huu unavyofanya kazi:** +- **Angalia** kama umri wa mtumiaji unakidhi sharti la kupiga kura +- **Tekeleza** sehemu tofauti za msimbo kulingana na matokeo ya hali +- **Hesabu** na onyesha muda hadi mtu aweze kupiga kura akihitaji zaidi ya 18 - **Toa** maoni maalum na ya msaada kwa kila hali ```javascript -// Step 2: Multiple conditions with logical operators +// Hatua ya 2: Masharti mengi na vibonye vya kiakili const userAge = 17; const hasPermission = true; @@ -332,25 +418,25 @@ if (userAge >= 18 && hasPermission) { } ``` -**Kuchambua kinachotokea hapa:** -- **Unganisha** hali nyingi kwa kutumia operator ya `&&` (na) -- **Unda** mpangilio wa hali kwa kutumia `else if` kwa hali nyingi -- **Shughulikia** hali zote zinazowezekana kwa kauli ya mwisho ya `else` -- **Toa** maoni wazi na yanayoweza kutekelezwa kwa kila hali tofauti +**Kueleza kinachotokea hapa:** +- **Changanua** masharti mengi kwa kutumia kiendeshaji `&&` (na) +- **Tengeneza** ngazi ya masharti kwa kutumia `else if` kwa matukio mengi +- **Shughulikia** kesi zote zinazowezekana kwa matamko ya mwisho `else` +- **Toa** maoni wazi na yanayotekelezeka kwa kila hali tofauti ```javascript -// Step 3: Concise conditional with ternary operator +// Hatua ya 3: Masharti mafupi kwa kutumia mtendaji wa ternary const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` **Unachohitaji kukumbuka:** -- **Tumia** operator ya ternary (`? :`) kwa hali rahisi za chaguo mbili -- **Andika** hali kwanza, ikifuatiwa na `?`, kisha matokeo ya kweli, kisha `:`, kisha matokeo ya siyo kweli -- **Tumia** muundo huu unapohitaji kuweka thamani kulingana na hali +- **Tumia** kiendeshaji cha ternary (`? :`) kwa masharti rahisi yenye chaguo mbili +- **Andika** hali kwanza, ikifuatiwa na `?`, kisha matokeo ya kweli, kisha `:`, kisha matokeo ya uongo +- **Tumia** muundo huu wakati unahitaji kugawa thamani kulingana na masharti ```javascript -// Step 4: Handling multiple specific cases +// Hatua ya 4: Kushughulikia kesi nyingi maalum const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -370,232 +456,286 @@ switch (dayOfWeek) { } ``` -**Msimbo huu unatimiza yafuatayo:** -- **Linganisha** thamani ya kigezo dhidi ya hali maalum nyingi -- **Unganisha** hali zinazofanana pamoja (siku za kazi dhidi ya wikendi) -- **Tekeleza** kizuizi sahihi cha msimbo wakati hali inapatikana -- **Jumuisha** hali ya `default` kushughulikia thamani zisizotarajiwa -- **Tumia** kauli za `break` kuzuia msimbo kuendelea kwenye hali inayofuata - -> 💡 **Mfano wa maisha halisi**: Fikiria mtiririko wa udhibiti kama kuwa na GPS yenye subira zaidi duniani inayokupa maelekezo. Inaweza kusema "Ikiwa kuna msongamano wa magari kwenye Barabara Kuu, chukua barabara ya mchepuko. Ikiwa ujenzi unazuia barabara ya mchepuko, jaribu njia ya mandhari." Programu hutumia mantiki ya hali ya ikiwa-basi kutoa majibu ya busara kwa hali tofauti na daima kuwapa watumiaji uzoefu bora zaidi. - -✅ **Kinachokuja mbele**: Tutakuwa na furaha kubwa kuchunguza zaidi dhana hizi tunapoendelea na safari hii ya ajabu pamoja! Kwa sasa, zingatia tu kuhisi msisimko kuhusu uwezekano wote wa kushangaza ulio mbele yako. Ujuzi na mbinu maalum zitakaa kwa urahisi tunapojifunza pamoja – naahidi hii itakuwa ya kufurahisha zaidi kuliko unavyotarajia! - -## Zana za Kazi - -Sawa, hapa ndipo ninapopata msisimko kiasi kwamba siwezi kujizuia! 🚀 Tunakaribia kuzungumzia zana za ajabu ambazo zitakufanya uhisi kama umekabidhiwa funguo za chombo cha anga cha kidijitali. - -Unajua jinsi mpishi anavyokuwa na visu vilivyokamilika kabisa vinavyohisi kama sehemu ya mikono yao? Au jinsi mwanamuziki anavyokuwa na gitaa moja linaloonekana kuimba mara tu wanapoligusa? Naam, watengenezaji wa programu wana toleo letu la zana hizi za kichawi, na hapa ndipo utakaposhangazwa kabisa – nyingi ya zana hizi ni bure kabisa! - -Nakaribia kuruka kwenye kiti changu nikifikiria kushiriki haya nawe kwa sababu zana hizi zimebadilisha kabisa jinsi tunavyotengeneza programu. Tunazungumzia wasaidizi wa programu wanaotumia AI ambao wanaweza kusaidia kuandika msimbo wako (sizungumzii utani!), mazingira ya wingu ambapo unaweza kujenga programu nzima kutoka mahali popote penye Wi-Fi, na zana za kutatua matatizo zilizo na teknolojia ya hali ya juu kiasi kwamba ni kama kuwa na uwezo wa kuona ndani ya programu zako. - -Na hapa ndipo sehemu inayonipa msisimko: hizi si "zana za wanaoanza" ambazo utazipita. Hizi ni zana za kiwango cha kitaalamu ambazo watengenezaji wa Google, Netflix, na studio ya programu unayoipenda wanatumia hivi sasa. Utajihisi kama mtaalamu unapotumia zana hizi! - -### Wahariri wa Msimbo na IDEs: Rafiki Zako wa Kidijitali +**Msimbo huu unatekeleza yafuatayo:** +- **Linganya** thamani ya kigezo dhidi ya kesi maalum nyingi +- **Kusanya** kesi zinazofanana pamoja (siku za wiki dhidi ya wikendi) +- **Tekeleza** sehemu sahihi ya msimbo pale tukio linapopatikana +- **Jumlisha** kesi ya `default` kushughulikia thamani zisizotarajiwa +- **Tumia** matamko ya `break` kuzuia msimbo kuendelea kwenye kesi inayofuata + +> 💡 **Mfano wa ulimwengu halisi**: Fikiria mtiririko wa udhibiti kama GPS mwenye subira zaidi duniani akikuongoza. Inaweza kusema "Ikiwa kuna msongamano barabarani Main Street, chukua njia kuu badala yake. Ikiwa ujenzi unazui njia kuu, jaribu njia ya mandhari." Programu hutumia mantiki kama hii ya masharti kujibu kwa busara hali tofauti na kuwapatia watumiaji uzoefu bora zaidi kila mara. + +### 🎯 **Kukagua Dhana: Ustadi wa Vitu Vinavyojengwa** + +**Tuwone jinsi unavyoendelea na msingi:** +- Unaweza kuelezea tofauti kati ya kigezo na tamko kwa maneno yako mwenyewe? +- Fikiria tukio halisi ambalo ungeweza kutumia uamuzi wa ikiwa-basi (kama mfano wetu wa kupiga kura) +- Ni jambo gani moja kuhusu mantiki ya programu lililokushtua? + +**Kudhibiti kujiamini kwa haraka:** +```mermaid +flowchart LR + A["📝 Taarifa
(Maelekezo)"] --> B["📦 Vigezo
(Hifadhi)"] --> C["🔀 Mtiririko wa Udhibiti
(Maamuzi)"] --> D["🎉 Programu Inayofanya Kazi!"] + + style A fill:#ffeb3b + style B fill:#4caf50 + style C fill:#2196f3 + style D fill:#ff4081 +``` +✅ **Kinachokuja baadaye**: Tutaendelea na furaha kubwa kujifunza dhana hizi kwa kina katika safari hii ya ajabu pamoja! Kwa sasa, zingatia tu kuhisi msisimko kuhusu fursa zote za ajabu zilizo mbele yako. Ujuzi na mbinu maalum zitakwenda kushika asili unapoendelea kutekeleza pamoja nami – naahidi hii itakuwa ya kufurahisha zaidi kuliko unavyoweza kufikiria! + +## Vifaa vya Kazi + +Sawa, hapa ndio ninapojawa msisimko usioweza kujificha! 🚀 Tutazungumzia zana za ajabu zitakazokufanya ujisikie kama umepewa funguo za chombo cha anga la kidijitali. + +Unajua vile mpishi anavyo kuwa na visu vilivyopimwa vyema vinavyofanya kama kweli ni sehemu ya mikono yao? Au mpiga gitaa kuwa na gitaa moja inayopiga nyimbo mara anapoigusa? Sawa, waendelezaji wana toleo lao la zana hizi za kichawi, na hapa ndipo utakaposhtushwa kabisa – nyingi wao ni bure kabisa! + +Mimi hivi sasa ninainuka kiti kwa kufikiria kushiriki hizi kwa sababu zimebadilisha kabisa jinsi tunavyojenga programu. Tunazungumzia msaada wa kuandika msimbo unaotumia AI (sihutaji usemi!), mazingira ya wingu ambapo unaweza kujenga programu nzima mahali popote ulipo na Wi-Fi, na zana za kuondoa hitilafu zenye kufikia kiwango cha kuona kwa sarafu kwa programu zako. + +Na hapa ndio sehemu inayonipa baridi ya msisimko: hizi si zana za "wanzo" utakazokua nazo. Hizi ni zana sawa za kitaalamu zinazotumiwa sasa hivi na waendelezaji Google, Netflix, na studio ya programu za indie unazopenda. Utajisikia kama mtaalamu sana kuzitumia! + +```mermaid +graph TD + A["💡 Wazo Lako"] --> B["⌨️ Mhariri wa Msimbo
(VS Code)"] + B --> C["🌐 Zana za Mvumbuzi wa Kivinjari
(Upimaji & Usahihishaji)"] + C --> D["⚡ Amri ya Mstari
(Uendeshaji wa Mifumo & Zana)"] + D --> E["📚 Nyaraka
(Kujifunza & Marejeleo)"] + E --> F["🚀 Tovuti Bora!"] + + B -.-> G["🤖 Msaidizi wa AI
(GitHub Copilot)"] + C -.-> H["📱 Upimaji wa Vifaa
(Ubunifu unaolingana)"] + D -.-> I["📦 Wasimamizi wa Pakiti
(npm, yarn)"] + E -.-> J["👥 Jamii
(Stack Overflow)"] + + style A fill:#fff59d + style F fill:#c8e6c9 + style G fill:#e1f5fe + style H fill:#f3e5f5 + style I fill:#ffccbc + style J fill:#e8eaf6 +``` +### Wahariri wa Msimbo na IDEs: Marafiki Wako Wapya Kidijitali -Hebu tuzungumzie wahariri wa msimbo – hizi zitakuwa mahali unayopenda zaidi kukaa! Fikiria kama patakatifu pako binafsi la programu ambapo utatumia muda mwingi ukitengeneza na kuboresha ubunifu wako wa kidijitali. +Tuzungumze kuhusu wahariri wa msimbo – hawa kweli wanakaribia kuwa sehemu unayopenda kupita popote! Fikiria ni makazi yako binafsi ya kuandika msimbo ambapo utatumia muda mwingi kutengeneza na kuboresha kazi zako za kidijitali. -Lakini hapa ndipo uchawi wa wahariri wa kisasa unapoonekana: si wahariri wa maandishi tu. Ni kama kuwa na mshauri wa programu mwenye akili zaidi na mwenye msaada anayekaa karibu nawe masaa 24/7. Wanakutahadharisha kuhusu makosa ya herufi kabla hujayaona, wanapendekeza maboresho yanayokufanya uonekane kama mtaalamu, wanakusaidia kuelewa kila kipande cha msimbo, na baadhi yao hata wanatabiri unachotaka kuandika na kutoa mapendekezo ya kumalizia mawazo yako! +Lakini hapa ni pepo la kisasa juu ya wahariri: siyo wahariri wa maandishi tu wa kawaida. Ni kama kuwa na mshauri wa programu mwenye akili sana na msaada karibu nawe saa 24/7. Wanakukuta makosa kabla hujayaona, kupendekeza maboresho yanayokufanya uonekane mwerevu, kusaidia kuelewa kila kipande cha msimbo, na baadhi yao hata hupredict ni nini ungeandika kisha hutoa kumalizia mawazo yako! -Nakumbuka nilipogundua mara ya kwanza kukamilisha kiotomatiki – nilihisi kama ninaishi katika siku za usoni. Unaandika kitu, na mhariri wako anasema, "Hey, ulikuwa unafikiria kuhusu kazi hii inayofanya kile unachohitaji?" Ni kama kuwa na msomaji wa mawazo kama rafiki wa programu! +Nakumbuka nilipogundua auto-completion mara ya kwanza – nilihisi nafanya kazi huko siku zijazo. Unaanza kuandika kitu, na mhariri wako husema, "Hey, ungekuwa unafikiria kuhusu hii function ambayo inafanya hasa unachohitaji?" Ni kama kuwa na mtu asomao mawazo yako kuwa rafiki yako wa kuandika msimbo! -**Ni nini kinachofanya wahariri hawa kuwa wa ajabu?** +**Nini hufanya wahariri hawa kuwa wa ajabu hivi?** -Wahariri wa kisasa wa msimbo hutoa vipengele vya kuvutia vilivyoundwa kuongeza tija yako: +Wahariri wa msimbo wa kisasa hutoa vipengele vya kuvutia vilivyobuniwa kuongeza utendaji wako: -| Kipengele | Kazi Yake | Kwa Nini Inasaidia | -|-----------|-----------|--------------------| -| **Uwekaji Rangi wa Sintaksia** | Rangi sehemu tofauti za msimbo wako | Hufanya msimbo usomeke kwa urahisi na kugundua makosa | -| **Kukamilisha Kiotomatiki** | Mapendekezo ya msimbo unapoandika | Huongeza kasi ya kuandika msimbo na kupunguza makosa ya herufi | -| **Zana za Kutatua Matatizo** | Hukusaidia kugundua na kurekebisha makosa | Huokoa masaa ya kutatua matatizo | -| **Viongezeo** | Ongeza vipengele maalum | Badilisha mhariri wako kwa teknolojia yoyote | -| **Wasaidizi wa AI** | Pendekeza msimbo na maelezo | Huongeza kasi ya kujifunza na tija | +| Kipengele | Kazi Yake | Kwanini Inasaidia | +|---------|--------------|--------------| +| **Uangazaji wa Sintaksia** | Rangi sehemu tofauti za msimbo wako | Hufanya msimbo kusomeka kwa urahisi na kugundua makosa | +| **Auto-completion** | Hupendekeza msimbo unapoandika | Huongeza kasi ya kuandika na hupunguza makosa ya tahajia | +| **Zana za Kuondoa Hitilafu** | Husaidia kupata na kurekebisha makosa | Huokoa muda mwingi wa kutatua matatizo | +| **Nyongeza (Extensions)** | Ongeza vipengele maalum | Badilisha mhariri wako kwa teknolojia yoyote | +| **Msaidizi wa AI** | Hupendekeza msimbo na maelezo | Huongeza kasi ya kujifunza na utendakazi | -> 🎥 **Rasilimali ya Video**: Unataka kuona zana hizi kazini? Tazama [video ya Zana za Kazi](https://youtube.com/watch?v=69WJeXGBdxg) kwa muhtasari wa kina. +> 🎥 **Rasilimali ya Video**: Unataka kuona zana hizi zikifanya kazi? Angalia [Video ya Tools of the Trade](https://youtube.com/watch?v=69WJeXGBdxg) kwa muhtasari kamili. -#### Wahariri Wanaopendekezwa kwa Maendeleo ya Wavuti +#### Wahariri Waliopendekezwa kwa Maendeleo ya Mtandao **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Bure) -- Maarufu zaidi miongoni mwa watengenezaji wa wavuti -- Mfumo bora wa viongezeo +- Maarufu zaidi miongoni mwa waendelezaji wavuti +- Mfumo bora wa nyongeza - Terminal iliyojengwa ndani na ushirikiano wa Git -- **Viongezeo vya lazima**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Mapendekezo ya msimbo yanayotumia AI - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Ushirikiano wa wakati halisi - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Uundaji wa msimbo kiotomatiki - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Kugundua makosa ya herufi kwenye msimbo wako - -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Malipo, bure kwa wanafunzi) -- Zana za hali ya juu za kutatua matatizo na kupima -- Kukamilisha msimbo kwa akili +- **Nyongeza muhimu:** + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - mapendekezo ya msimbo yanayotolewa na AI + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - ushirikiano wa wakati halisi + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - upangaji wa msimbo kiotomatiki + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - kugundua makosa ya tahajia katika msimbo wako + +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Inalipiwa, bure kwa wanafunzi) +- Zana za hali ya juu za kuondoa hitilafu na upimaji +- Ukomo wa msimbo wenye akili - Udhibiti wa toleo uliojengwa ndani -**IDEs Zinazotegemea Wingu** (Bei mbalimbali) -- [GitHub Codespaces](https://github.com/features/codespaces) - VS Code kamili kwenye kivinjari chako -- [Replit](https://replit.com/) - Nzuri kwa kujifunza na kushiriki msimbo -- [StackBlitz](https://stackblitz.com/) - Maendeleo ya wavuti ya haraka, kamili +**IDEs za Kwenye Wingu** (Bei mbalimbali) +- [GitHub Codespaces](https://github.com/features/codespaces) - VS Code kamili kupitia kivinjari chako +- [Replit](https://replit.com/) - Bora kwa kujifunza na kushiriki msimbo +- [StackBlitz](https://stackblitz.com/) - Maendeleo ya wavuti ya haraka na kamili -> 💡 **Kidokezo cha Kuanza**: Anza na Visual Studio Code – ni bure, inatumika sana katika sekta, na ina jamii kubwa inayounda mafunzo na viongezeo vya msaada. +> 💡 **Ushauri wa Kuanzisha**: Anza na Visual Studio Code – ni bure, inatumiwa sana katika sekta, na ina jamii kubwa inayounda mafunzo na nyongeza zinazosaidia. -### Vivinjari vya Wavuti: Maabara Yako ya Siri ya Maendeleo -Sawa, jiandae kushangazwa kabisa! Unajua jinsi ulivyokuwa ukitumia vivinjari kuvinjari mitandao ya kijamii na kutazama video? Naam, inaonekana vimekuwa vikificha maabara ya siri ya watengenezaji yenye nguvu sana muda wote huu, ikisubiri tu ugundue! +### Vivinjari vya Mtandao: Maabara Yako ya Siri ya Maendeleo -Kila wakati unapobofya kulia kwenye ukurasa wa wavuti na kuchagua "Inspect Element," unafungua ulimwengu wa siri wa zana za watengenezaji ambazo kwa kweli zina nguvu zaidi kuliko baadhi ya programu za gharama kubwa ambazo nilikuwa nikilipa mamia ya dola kwa ajili yake. Ni kama kugundua kuwa jikoni yako ya kawaida imeficha maabara ya mpishi wa kitaalamu nyuma ya paneli ya siri! +Sawa, jiandae kushtuka kabisa! Unajua vile umekuwa ukitumia vivinjari kugonga mitandao ya kijamii na kutazama video? Sasa, zimekuwa zikificha maabara hii ya siri ya waendelezaji wakati wote, zikikusubiri ugundue! -Mara ya kwanza mtu aliponionyesha DevTools za kivinjari, nilitumia kama masaa matatu nikibonyeza huku na kule nikisema "SUBIRI, INAWEZA KUFANYA HILO PIA?!" Unaweza kuhariri tovuti yoyote papo hapo, kuona jinsi kila kitu kinavyopakia haraka, kupima jinsi tovuti yako inavyoonekana kwenye vifaa tofauti, na hata kutatua matatizo ya JavaScript kama mtaalamu kamili. Ni ajabu kabisa! +Kila mara unabonyeza kitufe cha kulia kwenye ukurasa wa wavuti na kuchagua "Inspekta Kipengele," unafungua dunia iliyofichwa ya zana za waendelezaji ambazo kwa kweli zina nguvu zaidi kuliko programu ghali nilizolipia mamia ya dola zamani. Ni kama kugundua jikoni lako la kawaida lina maabara ya mpishi mtaalamu nyuma ya paneli ya siri! +Mara ya kwanza mtu alinionyesha browser DevTools, nilitumia kama saa tatu nikibofya hapa na pale na kusema "SAA, INAWEZA KUFANYA HIVYO PIA?!" Unaweza kuhariri tovuti yoyote kwa wakati halisi, kuona haraka kabisa mambo yote yanapotapakaa, kujaribu jinsi tovuti yako inavyoonekana kwenye vifaa tofauti, na hata kutambua makosa ya JavaScript kama mtaalamu kweli. Ni ajabu kabisa! **Hii ndiyo sababu vivinjari ni silaha yako ya siri:** -Unapounda tovuti au programu ya wavuti, unahitaji kuona jinsi inavyoonekana na kujiendesha katika ulimwengu halisi. Vivinjari si tu vinaonyesha kazi yako bali pia vinatoa maoni ya kina kuhusu utendaji, upatikanaji, na masuala yanayoweza kutokea. +Unapoanzisha tovuti au programu ya wavuti, unahitaji kuona jinsi inavyoonekana na tabia zake katika ulimwengu halisi. Vivinjari havionyeshi tu kazi yako bali pia hutoa maoni ya kina kuhusu utendaji, upatikanaji, na matatizo yanayoweza kutokea. -#### Zana za Watengenezaji wa Kivinjari (DevTools) +#### Zana za Mwandishi za Vivinjari (DevTools) -Vivinjari vya kisasa vinajumuisha suites za maendeleo za kina: +Vivinjari vya kisasa vina seti kamili za maendeleo: -| Kategoria ya Zana | Kazi Yake | Mfano wa Matumizi | -|-------------------|-----------|-------------------| -| **Kichunguzi cha Kipengele** | Tazama na hariri HTML/CSS papo hapo | Rekebisha muundo ili kuona matokeo ya haraka | -| **Console** | Tazama ujumbe wa makosa na jaribu JavaScript | Tatua matatizo na jaribu msimbo | -| **Network Monitor** | Fuatilia jinsi rasilimali zinavyopakiwa | Boresha utendaji na muda wa kupakia | -| **Accessibility Checker** | Jaribu muundo jumuishi | Hakikisha tovuti yako inafanya kazi kwa watumiaji wote | -| **Device Simulator** | Onyesha kwenye ukubwa tofauti wa skrini | Jaribu muundo unaojibika bila vifaa vingi | +| Kategoria ya Zana | Inafanya Nini | Mfano wa Matumizi | +|-------------------|--------------|--------------------| +| **Kikagua Kipengele** | Tazama na hariri HTML/CSS kwa wakati halisi | Rekebisha mtindo kuona matokeo mara moja | +| **Konsoli** | Tazama ujumbe wa makosa na jaribu JavaScript | Tambua matatizo na jaribu msimbo | +| **Kisimamia Mtandao** | Fuatilia jinsi rasilimali zinavyopakuliwa | Boresha utendaji na muda wa kupakia | +| **Kikagua Upatikanaji** | Jaribu muundo wa ujumuishaji | Hakikisha tovuti yako inafanyakazi kwa watumiaji wote | +| **Mfananishi wa Vifaa** | Angalia kwenye saizi tofauti za skrini | Jaribu muundo unaojibu bila vifaa vingi | #### Vivinjari Vinavyopendekezwa kwa Maendeleo -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - DevTools ya kiwango cha sekta na nyaraka za kina +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - DevTools za kiwango cha viwandani zenye nyaraka za kina - **[Firefox](https://developer.mozilla.org/docs/Tools)** - Zana bora za CSS Grid na upatikanaji -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Imejengwa kwenye Chromium na rasilimali za Microsoft kwa watengenezaji +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Jengwa juu ya Chromium na rasilimali za waendelezaji wa Microsoft -> ⚠️ **Kidokezo Muhimu cha Kupima**: Daima jaribu tovuti zako kwenye vivinjari vingi! Kinachofanya kazi kikamilifu kwenye Chrome kinaweza kuonekana tofauti kwenye Safari au Firefox. Watengenezaji wa kitaalamu hupima kwenye vivinjari vyote vikuu ili kuhakikisha uzoefu wa mtumiaji unaolingana. +> ⚠️ **Kumbuka Muhimu kwa Upimaji**: Daima jaribu tovuti zako kwenye vivinjari vingi! Kile kinachofanya kazi vizuri Chrome kinaweza kuonekana tofauti Safari au Firefox. Waendelezaji wataalamu hujaribu kwenye vivinjari vyote vikubwa kuhakikisha uzoefu wa mtumiaji uko sawa. -### Zana za Laini ya Amri: Njia Yako ya Uwezo wa Watengenezaji +### Zana za Amri: Mlango Wako wa Nguvu za Mwandishi -Sawa, hebu tuwe wakweli kabisa kuhusu laini ya amri, kwa sababu nataka usikie hili kutoka kwa mtu anayeelewa kweli. Nilipoiona kwa mara ya kwanza – skrini nyeusi ya kutisha yenye maandishi yanayowaka – nilifikiria, "Hapana, kabisa siwezi! Hii inaonekana kama kitu kutoka kwenye filamu ya udukuzi ya miaka ya 1980, na hakika mimi si mwerevu wa kutosha kwa hili!" 😅 +Sawa, tufanye kipindi cha uwazi kabisa hapa kuhusu mstari wa amri, kwa maana nataka usikilize kutoka kwa mtu anayeuelewa kweli. Nilipouona mara ya kwanza – ni skrini nyeusi yenye maandishi yanayang'aa – nilifikiri, "Hapana, kabisa hapana! Hii inaonekana kama kitu kutoka filamu ya wadukuzi ya miaka ya 1980, na mimi si mwerevu vya kutosha kwa hili!" 😅 -Lakini hapa kuna kitu ambacho ningetamani mtu angeniambia wakati huo, na ambacho nakwambia sasa hivi: laini ya amri si ya kutisha – kwa kweli ni kama kuwa na mazungumzo ya moja kwa moja na kompyuta yako. Fikiria kama tofauti kati ya kuagiza chakula kupitia programu ya kifahari yenye picha na menyu (ambayo ni rahisi na nzuri) dhidi ya kuingia kwenye mgahawa wa eneo lako ambapo mpishi anajua unachopenda na anaweza kutengeneza kitu bora kwa kusema tu "nishangaze na kitu cha ajabu." +Lakini hapa ni kile ningependa mtu kunisema wakati huo, na ninachokuambia sasa hivi: mstari wa amri si wa kutisha – ni kama kuwa na mazungumzo ya moja kwa moja na kompyuta yako. Fikiria kama tofauti kati ya kuagiza chakula kupitia app ya kisasa yenye picha na menyu (ambayo ni nzuri na rahisi) dhidi ya kuingia kwenye mgahawa wako maarufu ambapo mpishi anajua hasa unachopenda na anaweza kuandaa kitu kamili kwa sema tu "nishangaze na kitu kizuri." -Laini ya amri ni mahali ambapo watengenezaji huenda kuhisi kama wachawi halisi. Unaandika maneno machache yanayoonekana ya kichawi (sawa, ni amri tu, lakini yanahisi kama uchawi!), bonyeza enter, na BOOM – umeunda miundo ya miradi nzima, umeweka zana zenye nguvu kutoka kote ulimwenguni, au umeweka programu yako mtandaoni kwa mamilioni ya watu kuona. Mara tu unapopata ladha ya nguvu hiyo, ni kweli inavutia! +Mstari wa amri ndio mahali pa watengenezaji kujisikia kama wachawi kabisa. Unaandika maneno machache yanayoonekana ya kichawi (sipigani, ni amri tu, lakini yanahisi ya kichawi!), bonyeza enter, na BOOM – umeunda muundo mzima wa mradi, kusanidi zana zenye nguvu kutoka sehemu mbalimbali duniani, au kupeleka programu yako mtandaoni kwa mamilioni ya watu kuiona. Ukipata ladha ya kwanza ya nguvu hiyo, ni tabia ya kuvuta sana! -**Kwa nini laini ya amri itakuwa zana yako unayoipenda:** +**Kwa nini mstari wa amri utakuwa zana yako ya kipenzi:** -Wakati interfaces za picha ni nzuri kwa kazi nyingi, laini ya amri inang'aa katika otomatiki, usahihi, na kasi. Zana nyingi za maendeleo hufanya kazi hasa kupitia interfaces za laini ya amri, na kujifunza kuzitumia kwa ufanisi kunaweza kuboresha uzalishaji wako kwa kiasi kikubwa. +Wakati interfaces za picha ni nzuri kwa kazi nyingi, mstari wa amri ufanisi katika uendeshaji kiotomatiki, usahihi, na kasi. Zana nyingi za maendeleo hufanya kazi hasa kupitia interface za mstari wa amri, na kujifunza kuzitumia kwa ufanisi kunaweza kuboresha uzalishaji wako sana. ```bash -# Step 1: Create and navigate to project directory +# Hatua ya 1: Tengeneza na elekea kwenye saraka ya mradi mkdir my-awesome-website cd my-awesome-website ``` -**Hii inafanya nini:** -- **Inaunda** saraka mpya inayoitwa "my-awesome-website" kwa mradi wako -- **Inasogea** ndani ya saraka mpya iliyoundwa ili kuanza kufanya kazi +**Hivi ndivyo msimbo huu unavyofanya:** +- **Tengeneza** saraka mpya iitwayo "my-awesome-website" kwa mradi wako +- **Ingia** ndani ya saraka mpya kuanza kazi ```bash -# Step 2: Initialize project with package.json +# Hatua 2: Anzisha mradi na package.json npm init -y -# Install modern development tools +# Sakinisha zana za kisasa za maendeleo npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Hatua kwa hatua, kinachotokea:** -- **Inaanzisha** mradi mpya wa Node.js na mipangilio ya msingi kwa kutumia `npm init -y` -- **Inasakinisha** Vite kama zana ya kisasa ya ujenzi kwa maendeleo ya haraka na ujenzi wa uzalishaji -- **Inaongeza** Prettier kwa muundo wa msimbo wa kiotomatiki na ESLint kwa ukaguzi wa ubora wa msimbo -- **Inatumia** bendera ya `--save-dev` kuashiria haya kama utegemezi wa maendeleo tu +**Hatua kwa hatua, hili ndilo linalotokea:** +- **anzisha** mradi mpya wa Node.js kwa mipangilio ya default kwa kutumia `npm init -y` +- **sanidi** Vite kama zana ya kisasa ya kujenga kwa maendeleo ya haraka na kujenga uzalishaji +- **ongeza** Prettier kwa urembo wa msimbo kiotomatiki na ESLint kwa ukaguzi wa ubora wa msimbo +- **tumia** bendera `--save-dev` kuonyesha hizi ni tegemezi kwa maendeleo pekee ```bash -# Step 3: Create project structure and files +# Hatua ya 3: Unda muundo wa mradi na faili mkdir src assets echo 'My Site

Hello World

' > index.html -# Start development server +# Anzisha seva ya maendeleo npx vite ``` -**Katika hapo juu, tumefanya:** -- **Tumeandaa** mradi wetu kwa kuunda folda tofauti kwa msimbo wa chanzo na mali -- **Tumetengeneza** faili ya msingi ya HTML yenye muundo sahihi wa hati -- **Tumeanza** seva ya maendeleo ya Vite kwa upakiaji wa moja kwa moja na uingizwaji wa moduli ya haraka +**Juu tume:** +- **Panga** mradi wetu kwa kuunda folda tofauti kwa msimbo chanzo na mali +- **Tengeneza** faili la HTML la msingi lenye muundo sahihi wa nyaraka +- **anzisha** seva ya maendeleo ya Vite kwa uhuishaji wa moja kwa moja na kubadilisha moduli joto -#### Zana Muhimu za Laini ya Amri kwa Maendeleo ya Wavuti +#### Zana Muhimu za Mstari wa Amri kwa Maendeleo ya Wavuti | Zana | Kusudi | Kwa Nini Unaihitaji | -|------|---------|-----------------| -| **[Git](https://git-scm.com/)** | Udhibiti wa toleo | Fuatilia mabadiliko, shirikiana na wengine, hifadhi kazi yako | -| **[Node.js & npm](https://nodejs.org/)** | Mazingira ya JavaScript & usimamizi wa kifurushi | Endesha JavaScript nje ya vivinjari, weka zana za kisasa za maendeleo | -| **[Vite](https://vitejs.dev/)** | Zana ya ujenzi & seva ya maendeleo | Maendeleo ya haraka sana na uingizwaji wa moduli ya haraka | -| **[ESLint](https://eslint.org/)** | Ubora wa msimbo | Pata na rekebisha matatizo katika JavaScript yako kiotomatiki | -| **[Prettier](https://prettier.io/)** | Muundo wa msimbo | Weka msimbo wako ukiwa na muundo thabiti na rahisi kusoma | +|-------|---------|--------------------| +| **[Git](https://git-scm.com/)** | Udhibiti wa toleo | Fuatilia mabadiliko, shirikiana na wengine, tengeneza nakala za kazi yako | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime & usimamizi wa kifurushi | Endesha JavaScript nje ya vivinjari, sanidi zana za maendeleo za kisasa | +| **[Vite](https://vitejs.dev/)** | Zana ya kujenga & seva ya maendeleo | Maendeleo ya kasi sana na uhuishaji wa moduli joto | +| **[ESLint](https://eslint.org/)** | Ubora wa msimbo | Pata na rekebisha matatizo ya JavaScript kiotomatiki | +| **[Prettier](https://prettier.io/)** | Urembo wa msimbo | Hifadhi msimbo wako ukiwa na muundo thabiti na wa kusomeka | -#### Chaguo Maalum kwa Jukwaa +#### Chaguo Maalum kwa Mifumo **Windows:** - **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Terminal ya kisasa yenye vipengele vingi -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Mazingira yenye nguvu ya maandishi -- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Laini ya amri ya jadi ya Windows +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Mazingira ya uandishi wa script yenye nguvu +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Mstari wa amri wa kawaida wa Windows **macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Programu ya terminal iliyojengwa ndani +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Programu ya terminal iliyo ndani ya mfumo - **[iTerm2](https://iterm2.com/)** - Terminal iliyoboreshwa yenye vipengele vya hali ya juu **Linux:** - **[Bash](https://www.gnu.org/software/bash/)** 💻 - Shell ya kawaida ya Linux -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Emulator ya terminal ya hali ya juu +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Emuleta terminal ya hali ya juu -> 💻 = Imewekwa awali kwenye mfumo wa uendeshaji +> 💻 = Imejumuishwa tayari kwenye mfumo wa uendeshaji -> 🎯 **Njia ya Kujifunza**: Anza na amri za msingi kama `cd` (badilisha saraka), `ls` au `dir` (orodhesha faili), na `mkdir` (unda folda). Fanya mazoezi na amri za mtiririko wa kazi wa kisasa kama `npm install`, `git status`, na `code .` (inafungua saraka ya sasa kwenye VS Code). Unapokuwa na ujasiri zaidi, utajifunza amri za hali ya juu na mbinu za otomatiki kwa kawaida. +> 🎯 **Njia ya Kujifunza**: Anza na amri za msingi kama `cd` (badilisha saraka), `ls` au `dir` (orodhesha faili), na `mkdir` (tengeneza folda). Fanya mazoezi na amri za mtiririko wa kazi wa kisasa kama `npm install`, `git status`, na `code .` (fungua saraka ya sasa katika VS Code). Unapozoea, utaweza kujifunza amri za hali ya juu na mbinu za uendeshaji kiotomatiki kwa urahisi. -### Nyaraka: Mwalimu Wako wa Kujifunza Anayepatikana Kila Wakati +### Nyaraka: Mshauri Wako wa Kujifunza Ukiwa Hapo Siku zote -Sawa, hebu nikupe siri ndogo ambayo itakufanya uhisi vizuri zaidi kuhusu kuwa mwanzilishi: hata watengenezaji wenye uzoefu hutumia muda mwingi kusoma nyaraka. Na hiyo si kwa sababu hawajui wanachofanya – kwa kweli ni ishara ya hekima! +Sawa, ngojea niambie siri kidogo itakayokufanya ujisikie vizuri kuwa mmwanzo: hata waendelezaji wenye uzoefu zaidi hutumia sehemu kubwa ya muda wao kusoma nyaraka. Na si kwa sababu hawajui wanachofanya – ni ishara ya hekima! -Fikiria nyaraka kama kuwa na walimu wenye uvumilivu zaidi, wenye maarifa, wanaopatikana 24/7. Umekwama kwenye tatizo saa 2 asubuhi? Nyaraka zipo na jibu sahihi unalohitaji. Unataka kujifunza kuhusu kipengele kipya cha kuvutia ambacho kila mtu anazungumzia? Nyaraka zina msaada wako na mifano ya hatua kwa hatua. Unajaribu kuelewa kwa nini kitu kinafanya kazi jinsi kinavyofanya? Umefikiria – nyaraka ziko tayari kuelezea kwa njia ambayo hatimaye inakufanya uelewe! +Fikiria nyaraka kama kuwa na ufikiaji wa walimu mwenye subira, wenye maarifa, waliopo kila wakati 24/7. Unakumbwa na shida saa 2 usiku? Nyaraka zipo na pambazuko la virtual lenye joto na jibu halisi unalohitaji. Unataka kujifunza kuhusu kipengele kipya kinachozungumziwa na kila mtu? Nyaraka zinakuunga mkono kwa mifano ya hatua kwa hatua. Unajaribu kuelewa kwa nini kitu kinafanya kazi jinsi kinavyo? Umekisia – nyaraka ziko tayari kueleza kwa njia inayokuleta mwangaza! -Hapa kuna kitu ambacho kilibadilisha kabisa mtazamo wangu: ulimwengu wa maendeleo ya wavuti unabadilika haraka sana, na hakuna mtu (namaanisha kabisa hakuna mtu!) anayekumbuka kila kitu. Nimewaona watengenezaji wakuu wenye uzoefu wa zaidi ya miaka 15 wakitafuta sintaksia ya msingi, na unajua nini? Hiyo si aibu – ni busara! Sio kuhusu kuwa na kumbukumbu kamilifu; ni kuhusu kujua wapi pa kupata majibu ya kuaminika haraka na kuelewa jinsi ya kuyatumia. +Hapa kuna kitu kilichobadilisha kabisa mtazamo wangu: ulimwengu wa maendeleo ya wavuti unasogea kwa kasi sana, na hakuna mtu (yaani hakuna mtu!) anayekumbuka kila kitu. Nimeona waendelezaji wa ngazi ya juu wenye miaka 15+ ya uzoefu wakitafuta sintaksia za msingi, na unajua nini? Hiyo si aibu – ni busara! Siyo kuhusu kumbukumbu kamili; ni kujua wapi kupata majibu ya kuaminika haraka na kuelewa jinsi ya kuyatumia. -**Hapa ndipo uchawi halisi unapotokea:** +**Hapa ndipo uchawi wa kweli unapotokea:** -Watengenezaji wa kitaalamu hutumia sehemu kubwa ya muda wao kusoma nyaraka – si kwa sababu hawajui wanachofanya, lakini kwa sababu mazingira ya maendeleo ya wavuti yanabadilika haraka sana kiasi kwamba kubaki na ujuzi kunahitaji kujifunza endelevu. Nyaraka nzuri hukusaidia kuelewa si tu *jinsi* ya kutumia kitu, lakini *kwa nini* na *lini* utumie. +Waendelezaji wataalamu hutumia sehemu kubwa ya muda wao kusoma nyaraka – si kwa sababu hawajui wanachofanya, lakini kwa sababu mandhari ya maendeleo ya wavuti hubadilika haraka kiasi kwamba kuendelea kuwa wa kisasa kunahitaji kujifunza endelevu. Nyaraka bora zinakusaidia kuelewa si tu *jinsi* ya kutumia kitu, bali *kwa nini* na *lini* utakitumia. #### Rasilimali Muhimu za Nyaraka **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** - Kiwango cha dhahabu cha nyaraka za teknolojia ya wavuti -- Mwongozo wa kina wa HTML, CSS, na JavaScript -- Inajumuisha taarifa za utangamano wa vivinjari -- Ina mifano ya vitendo na maonyesho ya maingiliano - -**[Web.dev](https://web.dev)** (na Google) -- Mazoea bora ya maendeleo ya wavuti ya kisasa -- Mwongozo wa uboreshaji wa utendaji -- Kanuni za upatikanaji na muundo jumuishi +- Miongozo kamili ya HTML, CSS, na JavaScript +- Inajumuisha taarifa za ulinganifu wa vivinjari +- Ina mifano ya vitendo na maonyesho ya kuingiliana + +**[Web.dev](https://web.dev)** (kwa Google) +- Vigezo bora vya maendeleo ya wavuti ya kisasa +- Miongozo ya kuboresha utendaji +- Kanuni za upatikanaji na muundo ujumuishi - Masomo ya kesi kutoka miradi halisi **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** - Rasilimali za maendeleo ya kivinjari cha Edge -- Miongozo ya Programu za Wavuti Zinazoendelea -- Maarifa ya maendeleo ya majukwaa mbalimbali +- Miongozo ya Programu za Wavuti Inayopiga Mbele +- Maarifa juu ya maendeleo ya mseto wa majukwaa **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Mitaala ya kujifunza iliyopangwa +- Mitaala ya kujifunza yenye muundo - Kozi za video kutoka kwa wataalamu wa sekta -- Mazoezi ya vitendo ya kuandika msimbo +- Mazoezi ya msimbo wa vitendo + +> 📚 **Mbinu ya Kujifunza**: Usijaribu kukumbuka nyaraka – badala yake, jifunze jinsi ya kuzitafuta kwa ufanisi. Weka alama rasilimali zinazotumika mara kwa mara na fanya mazoezi ya kutumia kazi za utafutaji kupata taarifa maalum kwa haraka. + +### 🔧 **Kazia Zana: Ni Nini Kinaendana na Wewe?** + +**Chukua muda kufikiria:** +- Ni zana gani unayo hamu ya kutumia kwanza? (Hakuna jibu baya!) +- Je, mstari wa amri bado unahisi kutisha, au unavutiwa na hivyo? +- Unaweza kufikiria kutumia browser DevTools kuangalia siri za nyuma za tovuti zako za kupenda? -> 📚 **Mkakati wa Kujifunza**: Usijaribu kukariri nyaraka – badala yake, jifunze jinsi ya kuvinjari kwa ufanisi. Weka alama za kumbukumbu za marejeleo yanayotumika mara kwa mara na fanya mazoezi ya kutumia kazi za utafutaji kupata taarifa maalum haraka. +```mermaid +pie title "Muda wa Mendevu Kutumika na Vifaa" + "Mhariri wa Msimbo" : 40 + "Kujaribu Kivinjari" : 25 + "Mstari wa Amri" : 15 + "Kusoma Nyaraka" : 15 + "Kukaguzi Kasoro" : 5 +``` +> **Maarifa ya kufurahisha**: Waendelezaji wengi hutumia takriban 40% ya wakati wao ndani ya mhariri wao wa msimbo, lakini angalia muda mwingi unaotumika kwa upimaji, kujifunza, na kutatua matatizo. Programu si tu kuandika msimbo – ni kutengeneza uzoefu! -✅ **Chakula cha kufikiria**: Hapa kuna jambo la kufikiria – unafikiri zana za kujenga tovuti (maendeleo) zinaweza kuwa tofauti vipi na zana za kubuni jinsi zinavyoonekana (muundo)? Ni kama tofauti kati ya kuwa mbunifu wa majengo anayebuni nyumba nzuri na mkandarasi anayejenga kweli. Zote ni muhimu, lakini zinahitaji masanduku tofauti ya zana! Fikra za aina hii zitakusaidia kuona picha kubwa ya jinsi tovuti zinavyokuja kuwa. +✅ **Kukuza mawazo**: Hapa kuna jambo la kufikiria – unaonaje zana za kujenga tovuti (maendeleo) zinavyotofautiana na zana za kubuni muonekano wake (buni)? Ni kama tofauti kati ya kuwa mbunifu wa majengo anayetengeneza nyumba nzuri na mkandarasi anayejenga kweli. Zote ni muhimu, lakini zinahitaji boksi tofauti za zana! Fikra hii itakusaidia kuona picha kubwa ya jinsi tovuti zinavyooanwa. -## Changamoto ya Wakala wa GitHub Copilot 🚀 +## Changamoto ya GitHub Copilot Agent 🚀 -Tumia hali ya Wakala kukamilisha changamoto ifuatayo: +Tumia hali ya Agent kukamilisha changamoto ifuatayo: -**Maelezo:** Chunguza vipengele vya mhariri wa msimbo wa kisasa au IDE na onyesha jinsi inaweza kuboresha mtiririko wako wa kazi kama mtengenezaji wa wavuti. +**Maelezo:** Chunguza vipengele vya mhariri wa msimbo wa kisasa au IDE na onyesha jinsi vinaweza kuboresha mtiririko wako wa kazi kama mwendelezaji wa wavuti. -**Kichocheo:** Chagua mhariri wa msimbo au IDE (kama Visual Studio Code, WebStorm, au IDE inayotegemea wingu). Orodhesha vipengele au viendelezi vitatu vinavyokusaidia kuandika, kutatua matatizo, au kudumisha msimbo kwa ufanisi zaidi. Kwa kila moja, toa maelezo mafupi ya jinsi inavyonufaisha mtiririko wako wa kazi. +**Ombi:** Chagua mhariri wa msimbo au IDE (kama Visual Studio Code, WebStorm, au IDE ya wingu). Orodhesha vipengele au nyongeza tatu zinazokusaidia kuandika, kutambua makosa, au kudumisha msimbo kwa ufanisi zaidi. Kwa kila moja, toa maelezo mafupi kuhusu jinsi inavyoboresha mtiririko wako wa kazi. --- @@ -603,61 +743,121 @@ Tumia hali ya Wakala kukamilisha changamoto ifuatayo: **Sawa, mpelelezi, uko tayari kwa kesi yako ya kwanza?** -Sasa kwa kuwa una msingi huu mzuri, nina adventure ambayo itakusaidia kuona jinsi ulimwengu wa programu ulivyo tofauti na wa kuvutia. Na sikiliza – hii si kuhusu kuandika msimbo bado, kwa hivyo hakuna shinikizo hapo! Fikiria kama wewe ni mpelelezi wa lugha ya programu kwenye kesi yako ya kwanza ya kusisimua! - -**Ujumbe wako, ikiwa utachagua kuukubali:** -1. **Kuwa mpelelezi wa lugha**: Chagua lugha tatu za programu kutoka ulimwengu tofauti kabisa – labda moja inayojenga tovuti, moja inayounda programu za simu, na moja inayochakata data kwa wanasayansi. Tafuta mifano ya kazi rahisi sawa iliyoandikwa katika kila lugha. Nakuhakikishia utashangazwa kabisa na jinsi zinavyoweza kuonekana tofauti huku zikifanya jambo lile lile! +Sasa umejenga msingi mzuri, nina adventure itakayokusaidia kuona jinsi ulimwengu wa programu ulivyo tofauti na kupendeza kweli. Na sikiliza – hii siyo kuhusu kuandika msimbo bado, hivyo usijisikie shinikizo! Fikiria kama mpelelezi wa lugha za programu kwenye kesi yako ya kwanza ya kusisimua! -2. **Gundua hadithi zao za asili**: Ni nini kinachofanya kila lugha kuwa maalum? Hapa kuna ukweli wa kuvutia – kila lugha ya programu iliundwa kwa sababu mtu alifikiria, "Unajua nini? Lazima kuwe na njia bora ya kutatua tatizo hili maalum." Je, unaweza kugundua matatizo hayo yalikuwa nini? Baadhi ya hadithi hizi ni za kuvutia kweli! +**Kazi yako, ukikubali:** +1. **Kuwa mchunguzi wa lugha**: Chagua lugha tatu za programu kutoka kwa dunia tofauti kabisa – labda moja inayojenga tovuti, moja inayounda apps za simu, na moja inayochambua data kwa wanasayansi. Tafuta mifano ya kazi rahisi sawa imeandikwa katika kila lugha. Naahidi utashangaa sana jinsi zinavyotofautiana huku zikifanya kitu kimoja kabisa! -3. **Kutana na jamii zao**: Angalia jinsi kila jamii ya lugha ilivyo ya kukaribisha na yenye shauku. Baadhi zina mamilioni ya watengenezaji wanaoshirikiana maarifa na kusaidiana, zingine ni ndogo lakini zenye mshikamano mkubwa na msaada. Utapenda kuona tabia tofauti ambazo jamii hizi zina! +2. **Gundua hadithi zao za asili**: Nini kinachofanya kila lugha kuwa ya kipekee? Hapa kuna jambo la baridi – kila lugha ya programu iliumbwa kwa sababu mtu alifikiri, "Unajua? Lazima kuna njia bora ya kutatua tatizo hili maalum." Je, unaweza kubaini matatizo hayo? Hadithi hizi ni za kusisimua kweli! -4. **Fuata hisia zako**: Ni lugha gani inahisi kuwa rahisi kwako sasa hivi? Usijali kuhusu kufanya chaguo "kamili" – sikiliza tu hisia zako! Hakuna jibu lisilo sahihi hapa, na unaweza kuchunguza nyingine baadaye. +3. **Kutana na jumuiya**: Angalia jinsi jumuiya ya kila lugha inavyokaribisha na yenye shauku. Baadhi zina mamilioni ya waendelezaji wanaoshirikiana na kusaidiana, wengine ni wadogo lakini wa karibu na wenye msaada mkubwa. Utapenda kuona tabia tofauti za jumuiya hizi! -**Kazi ya ziada ya upelelezi**: Angalia kama unaweza kugundua ni tovuti au programu gani kuu zinajengwa kwa kila lugha. Nakuhakikishia utashangazwa kujua kinachowezesha Instagram, Netflix, au ile programu ya simu ambayo huwezi kuacha kucheza! +4. **Fuata hisia zako**: Ni lugha gani inayoonekana inakukaribisha zaidi kwa sasa? Usijali juu ya kuchagua sahihi kabisa – sikiliza tu hisia zako! Hakuna jibu baya hapa, na unaweza kamwe kuchunguza nyingine baadaye. -> 💡 **Kumbuka**: Hujaribu kuwa mtaalamu wa lugha yoyote leo. Unajifunza tu kuhusu mazingira kabla ya kuamua wapi unataka kuanzisha. Chukua muda wako, furahia, na acha udadisi wako uongoze! +**Kazi ya ziada ya mpelelezi**: Angalia kama unaweza kugundua ni tovuti au apps gani kubwa zimejengwa kwa kila lugha. Nahakikishia utashangaa kujua ni nini kinaendesha Instagram, Netflix, au mchezo wa simu ambao huwezi kuacha kucheza! -## Hebu Tusherehekee Ulichogundua! +> 💡 **Kumbuka**: Huhuji kugeuka mtaalamu wa lugha hizi leo. Unajifunza tu mtaa kabla ya kuamua wapi unataka kuanzisha duka. Chukua muda wako, furahia, na ruhusu udadisi wako uongoze! -Mungu wangu, umepata maarifa mengi ya ajabu leo! Nimefurahi sana kuona ni kiasi gani cha safari hii ya kushangaza kimekufikia. Na kumbuka – hii si mtihani ambapo unahitaji kupata kila kitu kwa usahihi. Hii ni zaidi kama sherehe ya mambo yote mazuri ambayo umejifunza kuhusu ulimwengu huu wa kuvutia unaotaka kuingia! +## Tusherehekee Uliyegundua! -[Chukua jaribio la baada ya somo](https://ff-quizzes.netlify.app/web/) +Mungu wangu, umejifunza mambo mengi ya kushangaza leo! Nimefurahi kweli kuona kiasi gani cha safari hii kubwa umekumbatia. Na kumbuka – hii si mtihani unaotakiwa kufanikisha kila kitu kwa ukamilifu. Hii ni sherehe ya mambo yote mazuri uliyofahamu kuhusu dunia hii ya kusisimua unayoanza kuingia ndani! +[Chukua jaribio baada ya somo](https://ff-quizzes.netlify.app/web/) ## Mapitio & Kujifunza Binafsi **Chukua muda wako kuchunguza na kufurahia!** -Umefunika mambo mengi leo, na hilo ni jambo la kujivunia! Sasa inakuja sehemu ya kufurahisha – kuchunguza mada ambazo zimekuchochea udadisi wako. Kumbuka, hii si kazi ya nyumbani – ni adventure! +Umeshughulikia mengi leo, na hilo ni jambo la kujivunia! Sasa kuna sehemu ya kufurahisha – kuchunguza mada zilizoanzisha hamu yako. Kumbuka, hii si kazi za nyumbani – ni adventure! -**Chunguza zaidi kile kinachokuvutia:** +**Chunguza kwa undani zaidi kile kinachokufurahisha:** -**Fanya mazoezi na lugha za programu:** -- Tembelea tovuti rasmi za lugha 2-3 ambazo zimevutia umakini wako. Kila moja ina tabia yake na hadithi! -- Jaribu baadhi ya uwanja wa kucheza wa msimbo mtandaoni kama [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), au [Replit](https://replit.com/). Usihofu kujaribu – huwezi kuvunja chochote! -- Soma kuhusu jinsi lugha yako unayoipenda ilivyokuja kuwa. Kwa kweli, baadhi ya hadithi hizi za asili ni za kuvutia na zitakusaidia kuelewa kwa nini lugha zinafanya kazi jinsi zinavyofanya. +**Jaribu lugha za programu:** +- Tembelea tovuti rasmi za lugha 2-3 zilizokuvutia. Kila moja ina tabia na hadithi yake! +- Jaribu mizinga ya kuandika nambari mtandaoni kama [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), au [Replit](https://replit.com/). Usisite kujaribu – huwezi kuvunjika kitu chochote! +- Soma jinsi lugha yako unayopenda ilivyotokea. Kwa kweli, baadhi ya hadithi hizi za asili ni za kuvutia na zitakusaidia kuelewa kwa nini lugha zinafanya kazi kama zinavyofanya. **Jifunze kutumia zana zako mpya:** -- Pakua Visual Studio Code ikiwa bado hujafanya – ni bure na utaipenda! -- Tumia dakika chache kuvinjari soko la Viendelezi. Ni kama duka la programu kwa mhariri wako wa msimbo! -- Fungua Zana za Watengenezaji za kivinjari chako na bonyeza tu. Usijali kuhusu kuelewa kila kitu – zoea tu kilichopo. +- Pakua Visual Studio Code kama bado hujapakia – ni bure na utapenda! +- Tumia dakika chache vinjari Soko la Extensions. Ni kama duka la programu kwa mhariri wako wa nambari! +- Fungua Zana za Mjenzi wa kivinjari chako na bonyeza sehemu mbali mbali. Usijali kuelewa kila kitu – jifunze tu na mambo yaliyopo. **Jiunge na jamii:** -- Fuata baadhi ya jamii za watengenezaji kwenye [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), au [GitHub](https://github.com/). Jamii ya programu ni ya kukaribisha sana kwa wanaoanza! -- Tazama video za coding za wanaoanza kwenye YouTube. Kuna waandishi wengi wazuri ambao wanakumbuka jinsi ilivyokuwa kuanza safari yao. -- Fikiria kujiunga na mikutano ya ndani au jumuiya za mtandaoni. Niamini, watengenezaji wanapenda kusaidia wanaoanza! +- Fuata jamii za waendelezaji kwenye [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), au [GitHub](https://github.com/). Jamii ya uandishi wa programu ni marafiki sana kwa wapya! +- Tazama video za kuanzia kuandika nambari kwenye YouTube. Kuna waumbaji wengi wazuri wanaokumbuka jinsi ilivyokuwa kuanza. +- Waza kujiunga na mikutano ya karibu au jamii mtandaoni. Ni kweli, waendelezaji wanapenda kusaidia wapya! + +> 🎯 **Sikiliza, hapa ni kile nataka ukumbuke**: Huiruhusiwi kuwa mchawi wa kuandika nambari usiku moja! Sasa hivi, unajifunza tu kuhusu dunia hii mpya ya kushangaza unayoanza kujiingiza. Chukua muda wako, furahia safari, na kumbuka – kila mendelezaji unayemheshimu alikuwa hapo ulipo sasa hivi, akisikia msisimko na labda kidogo kukosa uwezo. Hilo ni la kawaida kabisa, na ina maana unafanya vizuri! -> 🎯 **Sikiliza, hapa kuna jambo nataka ukumbuke**: Haupaswi kutarajiwa kuwa mtaalamu wa coding mara moja! Kwa sasa, unajifunza tu kuhusu ulimwengu huu wa ajabu ambao unakaribia kuwa sehemu yake. Chukua muda wako, furahia safari, na kumbuka – kila mtengenezaji unayemvutia alikuwa mara moja amekaa mahali ulipo sasa, akihisi msisimko na labda kidogo kuzidiwa. Hilo ni jambo la kawaida kabisa, na linamaanisha unafanya vizuri! +## Kazi ya Nyumbani -## Kazi +[Reading the Docs](assignment.md) -[Usomaji wa Nyaraka](assignment.md) +> 💡 **Kichocheo kidogo kwa kazi yako ya nyumbani**: Ningependa sana kukuona ukichunguza zana ambazo hatujazifunza bado! Ruka wahariri, vivinjari, na zana za mstari wa amri tulizozizungumza – kuna ulimwengu mzima wa zana za maendeleo nzuri kabisa zinasubiri kugunduliwa. Tafuta zile zinazotunzwa kwa ufanisi na zina jamii za kuishi na msaada (hizi huwa na mafunzo bora na watu wenye msaada wa hali ya juu ukiwa umefungwa na unahitaji msaada mzuri). -> 💡 **Kidokezo kidogo kwa kazi yako**: Ningependa sana kukuona ukichunguza baadhi ya zana ambazo hatujazungumzia bado! Epuka wahariri, vivinjari, na zana za mstari wa amri ambazo tayari tumeshazungumzia – kuna ulimwengu mzima wa zana za maendeleo za ajabu huko nje zinazongoja kugunduliwa. Tafuta zile ambazo zinadumishwa kikamilifu na zina jumuiya zenye nguvu na msaada (hizi huwa na mafunzo bora na watu wenye msaada zaidi wakati bila shaka utakwama na kuhitaji msaada wa kirafiki). +--- + +## 🚀 Ratiba Yako ya Safari ya Kujifunza Programu + +### ⚡ **Unachoweza Kufanya Katika Dakika 5 Zijazo** +- [ ] Hifadhi tovuti 2-3 za lugha za programu zilizokuvutia +- [ ] Pakua Visual Studio Code kama bado hujafanya hivyo +- [ ] Fungua DevTools za kivinjari chako (F12) na bonyeza sehemu yoyote ya tovuti +- [ ] Jiunge na jumuiya moja ya waendelezaji (Dev.to, Reddit r/webdev, au Stack Overflow) + +### ⏰ **Unachoweza Kufanikisha Saa Hii** +- [ ] Kamili mtihani baada ya somo na tafakari majibu yako +- [ ] Sanidi VS Code na nyongeza ya GitHub Copilot +- [ ] Jaribu mfano wa "Hello World" katika lugha 2 tofauti mtandaoni +- [ ] Tazama video ya "Siku Maisha ya Mendelezaji" kwenye YouTube +- [ ] Anza kufanya upelelezi wa lugha yako ya programu (kutoka changamoto) + +### 📅 **Adventure Yako ya Wiki Nzima** +- [ ] Kamili kazi ya nyumbani na chunguza zana 3 mpya za maendeleo +- [ ] Fuata waendelezaji 5 au akaunti za programu kwenye mitandao ya kijamii +- [ ] Jaribu kujenga kitu kidogo kwenye CodePen au Replit (hata tu "Hello, [Jina Lako]!") +- [ ] Soma blogu moja ya mendelezaji kuhusu safari ya mtu binafsi ya kuandika nambari +- [ ] Jiunge na mkutano mtandaoni au angalia hotuba ya programu +- [ ] Anza kujifunza lugha uliyoteua kwa mafunzo mtandaoni + +### 🗓️ **Mabadiliko Yako ya Mwezi Mzima** +- [ ] Jenga mradi wako wa kwanza mdogo (hata tovuti rahisi ni nzuri!) +- [ ] Changia mradi wa open-source (anza na marekebisho ya nyaraka) +- [ ] Fundisha mtu anayeanza safari ya kuandika nambari +- [ ] Tengeneza tovuti yako ya portfolio ya mendelezaji +- [ ] Unganisha na jamii za mendelezaji wa karibu au vikundi vya masomo +- [ ] Anza kupanga lengo lako lijalo la kujifunza + +### 🎯 **Chunguza Mafanikio ya Mwisho** + +**Kabla hujaendelea, chukua muda kusherehekea:** +- Ni jambo gani moja kuhusu kuandika nambari lililokufurahisha leo? +- Ni zana au dhana gani unataka kuchunguza kwanza? +- Unajisikia vipi kuanza safari hii ya programu? +- Ni swali gani moja ungependa kumuuliza mendelezaji sasa hivi? + +```mermaid +journey + title Safari Yako ya Kujenga Kujiamini + section Leo + Curious: 3: You + Overwhelmed: 4: You + Excited: 5: You + section Wiki Hii + Exploring: 4: You + Learning: 5: You + Connecting: 4: You + section Mwezi Ujao + Building: 5: You + Confident: 5: You + Helping Others: 5: You +``` +> 🌟 **Kumbuka**: Kila mtaalamu alikuwa mwanzoni. Kila mendelezaji mkuu alikuwa akijihisi kama unavyohisi sasa – msisimko, labda kidogo kupotea, na kila wakati na hamu kujua ni nini kinachowezekana. Uko katika kampuni nzuri sana, na safari hii itakuwa ya kushangaza. Karibu katika dunia ya ajabu ya programu! 🎉 --- -**Kanusho**: -Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati asilia katika lugha yake ya asili inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii. \ No newline at end of file + +**Taarifa ya Kukataa**: +Nyaraka hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kuhakikisha usahihi, tafadhali fahamuni kwamba tafsiri za kiotomatiki zinaweza kuwa na makosa au kasoro za usahihi. Nyaraka asilia katika lugha yake ya asili inapaswa kuzingatiwa kama chanzo cha uthibitisho. Kwa taarifa muhimu, tafsiri ya mtaalamu wa lugha inashauriwa. Sisi hatuwajibiki kwa maelewano mabaya au tafsiri zisizofaa zinazotokana na matumizi ya tafsiri hii. + \ No newline at end of file diff --git a/translations/sw/1-getting-started-lessons/2-github-basics/README.md b/translations/sw/1-getting-started-lessons/2-github-basics/README.md index e5aeeafcc..d6bda5e6f 100644 --- a/translations/sw/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/sw/1-getting-started-lessons/2-github-basics/README.md @@ -1,170 +1,209 @@ # Utangulizi wa GitHub -Habari, mtaalamu wa baadaye! 👋 Uko tayari kujiunga na mamilioni ya waandaaji programu duniani? Nimefurahi sana kukutambulisha kwa GitHub – fikiria kama mtandao wa kijamii kwa waandaaji programu, isipokuwa badala ya kushiriki picha za chakula chako cha mchana, tunashiriki misimbo na kujenga mambo ya ajabu pamoja! +Hujambo, msanidi programu wa baadaye! 👋 Uko tayari kuungana na mamilioni ya wapenzi wa programu duniani kote? Nina hamu sana kukutambulisha kwa GitHub – fikiria kama jukwaa la mitandao ya kijamii kwa wapenzi wa programu, isipokuwa badala ya kushiriki picha za chakula chako, tunashiriki msimbo na kuunda mambo mazuri pamoja! -Hili ndilo linanivutia sana: kila programu kwenye simu yako, kila tovuti unayotembelea, na zana nyingi utakazojifunza kutumia zilitengenezwa na timu za waandaaji programu wakishirikiana kwenye majukwaa kama GitHub. Hiyo programu ya muziki unayoipenda? Mtu kama wewe alichangia kuijenga. Hiyo mchezo usiyoweza kuacha kucheza? Ndio, labda ilijengwa kwa ushirikiano wa GitHub. Na sasa WEWE unakwenda kujifunza jinsi ya kuwa sehemu ya jamii hiyo ya ajabu! +Hiki ndicho kinachonishangaza: kila app kwenye simu yako, kila tovuti unayotembelea, na zana nyingi utakazojifunza kutumia zimetengenezwa na timu za wapenzi wa programu wakishirikiana kwenye majukwaa kama vile GitHub. App ya muziki unayopenda? Mtu kama wewe alichangia. Mchezo huo usioachwa chini? Ndiyo, huenda umetengenezwa kwa ushirikiano wa GitHub. Na sasa WEWE uta jifunza jinsi ya kuwa sehemu ya jamii hiyo ya kushangaza! -Najua hii inaweza kuonekana kama mengi mwanzoni – kwa kweli, nakumbuka nilipotazama ukurasa wangu wa kwanza wa GitHub nikifikiria "Hii yote ina maana gani?" Lakini jambo ni hili: kila mtaalamu wa programu alianza mahali ulipo sasa. Mwishoni mwa somo hili, utakuwa na hifadhi yako mwenyewe ya GitHub (fikiria kama maonyesho ya mradi wako binafsi mtandaoni), na utajua jinsi ya kuhifadhi kazi yako, kushiriki na wengine, na hata kuchangia miradi inayotumiwa na mamilioni ya watu. +Najua linaweza kuhisi mengi mwanzoni – hata mimi nilikumbuka nikitazama ukurasa wangu wa kwanza wa GitHub nikiwa na mawazo “Hii yote inamaanisha nini?” Lakini jambo ni hili: kila msanidi programu alianza mahali ulipo sasa hivi. Mwishoni mwa somo hili, utakuwa na hazina yako ya GitHub (fikiri kama jukwaa lako la kuonyesha miradi ulio nayo kwenye wingu), na utajua jinsi ya kuhifadhi kazi yako, kuishirikisha wengine, na hata kuchangia miradi inayotumiwa na mamilioni ya watu. -Tutachukua safari hii pamoja, hatua kwa hatua. Hakuna haraka, hakuna shinikizo – ni wewe, mimi, na zana za kuvutia ambazo zitakuwa marafiki zako wapya wa karibu! +Tutachukua safari hii pamoja, hatua kwa hatua. Hakuna haraka, hakuna msongo – ni wewe, mimi, na zana mzuri zitakazokufanya marafiki wako wapya! -![Utangulizi wa GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.sw.png) +![Utangulizi wa GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.sw.png) > Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac) -## Maswali ya Awali ya Somo -[Maswali ya awali ya somo](https://ff-quizzes.netlify.app) +```mermaid +journey + title Safari Yako ya GitHub Leo + section Setup + Install Git: 4: You + Create Account: 5: You + First Repository: 5: You + section Master Git + Local Changes: 4: You + Commits & Pushes: 5: You + Branching: 4: You + section Collaborate + Fork Projects: 4: You + Pull Requests: 5: You + Open Source: 5: You +``` +## Mtihani Kabla ya Mhadhara +[Mtihani kabla ya mhadhara](https://ff-quizzes.netlify.app) ## Utangulizi -Kabla ya kuingia kwenye mambo ya kusisimua, hebu tuandae kompyuta yako kwa ajili ya uchawi wa GitHub! Fikiria hili kama kupanga vifaa vyako vya sanaa kabla ya kuunda kazi ya sanaa – kuwa na zana sahihi tayari hufanya kila kitu kuwa rahisi na cha kufurahisha zaidi. +Kabla hatujaingia kwenye mambo ya kusisimua, hebu tukamuweke kompyuta yako tayari kwa uchawi wa GitHub! Fikiria kama kuandaa vifaa vyako vya sanaa kabla ya kuunda kazi bora – kuwa na zana sahihi tayari hufanya kila kitu kuwa rahisi na kufurahisha zaidi. -Nitakutembeza hatua kwa hatua katika kila hatua ya maandalizi, na naahidi siyo ngumu kama inavyoonekana mwanzoni. Ikiwa kuna kitu hakieleweki mara moja, ni kawaida kabisa! Nakumbuka nilipokuwa naandaa mazingira yangu ya kwanza ya maendeleo na kuhisi kama nilikuwa najaribu kusoma maandishi ya kale. Kila mtaalamu wa programu amewahi kuwa mahali ulipo sasa, akijiuliza kama anafanya sawa. Siri ni kwamba: ikiwa uko hapa unajifunza, tayari unafanya sawa! 🌟 +Nitakuonyesha kila hatua ya kusanidi binafsi, na naahidi siogopi kama inavyoonekana mwanzoni. Ikiwa jambo fulani halieleweki mara moja, hiyo ni kawaida kabisa! Nilikumbuka nianze kusanidi mazingira yangu ya kwanza ya maendeleo na kuhisi kama ninajaribu kusoma maandishi ya zamani. Kila msanidi programu amewahi kuwa mahali ulipo sasa hivi, akijiuliza kama anafanya vizuri. Habari njema: ikiwa uko hapa kujifunza, tayari unafanya vizuri! 🌟 -Katika somo hili, tutajadili: +Katika somo hili, tutajifunza: -- kufuatilia kazi unayofanya kwenye kompyuta yako +- kufuatilia kazi unayofanya kwenye mashine yako - kufanya kazi kwenye miradi na wengine -- jinsi ya kuchangia programu za chanzo huria +- jinsi ya kuchangia kwenye programu za chanzo huria ### Mahitaji ya Awali -Hebu tuandae kompyuta yako kwa ajili ya uchawi wa GitHub! Usijali – maandalizi haya ni kitu unachohitaji kufanya mara moja tu, na kisha utakuwa tayari kwa safari yako yote ya programu. +Tuweke kompyuta yako tayari kwa uchawi wa GitHub! Usijali – usanidi huu ni jambo moja tu unalotakiwa kufanya, kisha utakuwa tayari kwa safari yako yote ya kuandika msimbo. -Sawa, hebu tuanze na msingi! Kwanza, tunahitaji kuangalia kama Git tayari ipo kwenye kompyuta yako. Git kimsingi ni kama kuwa na msaidizi mwenye akili nyingi anayekumbuka kila mabadiliko unayofanya kwenye misimbo yako – bora zaidi kuliko kubonyeza Ctrl+S kila sekunde mbili (sote tumewahi kufanya hivyo!). +Sawa, tuanze na misingi! Kwanza, tunahitaji kuangalia kama Git tayari iko kwenye kompyuta yako. Git ni sawa na kuwa na msaidizi mwerevu ambaye anakumbuka kila mabadiliko tunayofanya kwenye msimbo wetu – bora zaidi kuliko kubonyeza Ctrl+S kila sekunde mbili (sisi sote tumewahi kutokea hapo!). -Hebu tuone kama Git tayari imewekwa kwa kuandika amri hii ya kichawi kwenye terminal yako: +Tuweke tuchunguze ikiwa Git tayari imewekwa kwa kuandika amri hii ya kichawi kwenye terminal yako: `git --version` -Ikiwa Git bado haipo, usijali! Nenda tu kwenye [download Git](https://git-scm.com/downloads) na ipakue. Mara tu unapokuwa umeiweka, tunahitaji kuitambulisha Git kwako vizuri: +Kama Git bado haipo, usijali! Nenda tu [pakua Git](https://git-scm.com/downloads) na upakue. Baada ya kuiweka, tunahitaji kumtambulisha Git wewe vizuri: -> 💡 **Maandalizi ya Mara ya Kwanza**: Amri hizi zinaambia Git wewe ni nani. Taarifa hii itaambatanishwa na kila commit unayofanya, kwa hivyo chagua jina na barua pepe unayojisikia vizuri kushiriki hadharani. +> 💡 **Usanidi wa Mara ya Kwanza**: Amri hizi zinaambia Git wewe ni nani. Habari hii itahusishwa na kila commit unayofanya, hivyo chagua jina na barua pepe unayotaka kuzishirikisha kwa umma. ```bash git config --global user.name "your-name" git config --global user.email "your-email" ``` - -Ili kuangalia kama Git tayari imewekwa unaweza kuandika: + +Ili kuangalia kama Git tayari imepangwa unaweza kuandika: ```bash git config --list ``` + +Pia utahitaji akaunti ya GitHub, mhariri wa msimbo (kama Visual Studio Code), na utahitaji kufungua terminal yako (au: command prompt). -Pia utahitaji akaunti ya GitHub, mhariri wa misimbo (kama Visual Studio Code), na utahitaji kufungua terminal yako (au: command prompt). - -Tembelea [github.com](https://github.com/) na unda akaunti ikiwa bado huna, au ingia na ujaze wasifu wako. +Tafuta [github.com](https://github.com/) na unda akaunti ikiwa bado huna, au ingia na ujaze wasifu wako. -💡 **Ushauri wa Kisasa**: Fikiria kuweka [SSH keys](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) au kutumia [GitHub CLI](https://cli.github.com/) kwa urahisi wa uthibitisho bila nywila. +💡 **Ushauri wa kisasa**: Fikiria usanidi wa [funguo za SSH](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) au kutumia [GitHub CLI](https://cli.github.com/) kwa urahisi zaidi wa kuthibitisha bila nywila. -✅ GitHub siyo hifadhi pekee ya misimbo duniani; kuna nyingine, lakini GitHub ndiyo inayojulikana zaidi. +✅ GitHub sio hazina pekee ya msimbo duniani; zingine zipo, lakini GitHub ni maarufu zaidi. ### Maandalizi -Utahitaji folda yenye mradi wa misimbo kwenye kompyuta yako ya ndani (laptop au PC), na hifadhi ya umma kwenye GitHub, ambayo itatumika kama mfano wa jinsi ya kuchangia miradi ya wengine. +Utahitaji folda yenye mradi wa msimbo kwenye mashine yako ya ndani (kompyuta mpakato au PC), na hazina ya wazi (public repository) kwenye GitHub, ambayo itatumika kama mfano wa jinsi ya kuchangia miradi ya wengine. -### Kuhifadhi Misimbo Yako Salama +### Kuhifadhi Msimbo Wako Salama -Hebu tuzungumze kuhusu usalama kwa muda – lakini usijali, hatutakufanya uhisi kuzidiwa na mambo ya kutisha! Fikiria mazoea haya ya usalama kama kufunga gari lako au nyumba yako. Ni tabia rahisi zinazokuwa za kawaida na kulinda kazi yako ngumu. +Tuzungumze kuhusu usalama kwa muda – lakini usijali, hatutakulemea kwa mambo ya kuogopesha! Fikiria mbinu hizi za usalama kama kufunga gari lako au nyumba. Ni tabia rahisi zinazokuwa kawaida na zinazohifadhi kazi yako kwa usalama. -Tutakuonyesha njia za kisasa, salama za kufanya kazi na GitHub tangu mwanzo. Kwa njia hii, utajenga tabia nzuri ambazo zitakusaidia vizuri katika kazi yako ya programu. +Tutakuonyesha mbinu za kisasa, salama za kutumia GitHub tangu mwanzo. Hii itakusaidia kuendeleza tabia nzuri ambazo zitakutumikia vyema katika taaluma yako ya kuandika msimbo. -Unapofanya kazi na GitHub, ni muhimu kufuata mazoea bora ya usalama: +Unapofanya kazi na GitHub, ni muhimu kufuata mbinu bora za usalama: -| Eneo la Usalama | Mazoea Bora | Kwa Nini Ni Muhimu | -|------------------|-------------|--------------------| -| **Uthibitisho** | Tumia SSH keys au Personal Access Tokens | Nywila si salama sana na zinatolewa | -| **Uthibitisho wa Hatua Mbili** | Washa 2FA kwenye akaunti yako ya GitHub | Inaongeza safu ya ziada ya ulinzi wa akaunti | -| **Usalama wa Hifadhi** | Usikubali taarifa nyeti | Funguo za API na nywila hazipaswi kuwa kwenye hifadhi za umma | -| **Usimamizi wa Vitegemezi** | Washa Dependabot kwa masasisho | Inahakikisha vitegemezi vyako ni salama na vimesasishwa | +| Eneo la Usalama | Mbinu Bora | Kwa Nini Ni Muhimu | +|-----------------|------------|--------------------| +| **Uthibitishaji** | Tumia funguo za SSH au Personal Access Tokens | Nywila ni hatari na zinaondolewa taratibu | +| **Uthibitishaji wa Vipindi Viwili** | Washa 2FA kwenye akaunti yako ya GitHub | Inatoa kinga ya ziada kwa akaunti | +| **Usalama wa Hazina** | Usihifadhi taarifa nyeti kwa commit | Funguo za API na nywila hazipaswi kuwa kwenye hazina za umma | +| **Usimamizi wa Tegemezi** | Washa Dependabot kwa masasisho | Huhakikisha tegemezi zako ziko salama na zimesasishwa | -> ⚠️ **Kumbusho Muhimu la Usalama**: Usikubali funguo za API, nywila, au taarifa nyingine nyeti kwenye hifadhi yoyote. Tumia mazingira ya kutofautisha na faili za `.gitignore` kulinda data nyeti. +> ⚠️ **Kumbusho Muhimu la Usalama**: Usihifadhi funguo za API, nywila, au taarifa nyingine nyeti katika hazina yoyote. Tumia mabadiliko ya mazingira (environment variables) na faili za `.gitignore` kulinda taarifa nyeti. -**Maandalizi ya Kisasa ya Uthibitisho:** +**Usanidi wa Uthibitishaji wa Kisasa:** ```bash -# Generate SSH key (modern ed25519 algorithm) +# Tengeneza funguo za SSH (algorithmi ya kisasa ya ed25519) ssh-keygen -t ed25519 -C "your_email@example.com" -# Set up Git to use SSH +# Weka Git itumie SSH git remote set-url origin git@github.com:username/repository.git ``` - -> 💡 **Ushauri wa Wataalamu**: SSH keys huondoa hitaji la kuingiza nywila mara kwa mara na ni salama zaidi kuliko njia za jadi za uthibitisho. + +> 💡 **Ushauri Bora**: Funguo za SSH zinahakikisha hauhitajiki kuingiza nywila mara nyingi na ni salama kuliko mbinu za kawaida za uthibitishaji. --- -## Kusimamia Misimbo Yako Kama Mtaalamu - -Sawa, HII ndiyo sehemu ambapo mambo yanakuwa ya kusisimua sana! 🎉 Tunakaribia kujifunza jinsi ya kufuatilia na kusimamia misimbo yako kama wataalamu wanavyofanya, na kwa kweli, hii ni moja ya mambo ninayopenda kufundisha kwa sababu ni mabadiliko makubwa. - -Fikiria hivi: unaandika hadithi ya kushangaza, na unataka kufuatilia kila rasimu, kila mabadiliko mazuri, na kila "subiri, hiyo ni nzuri!" wakati njiani. Hivyo ndivyo Git inavyofanya kwa misimbo yako! Ni kama kuwa na daftari la kusafiri kwa wakati ambalo linakumbuka KILA KITU – kila neno, kila mabadiliko, kila "oops, hiyo iliharibu kila kitu" ambalo unaweza kurekebisha mara moja. - -Nitakuwa mkweli – hii inaweza kuhisi kuzidiwa mwanzoni. Nilipoanza, nilifikiria "Kwa nini siwezi tu kuhifadhi faili zangu kama kawaida?" Lakini niamini: mara Git itakapokufungukia (na itafunguka!), utakuwa na moja ya nyakati hizo za mwangaza ambapo unafikiria "Nilifanyaje programu bila hii?" Ni kama kugundua unaweza kuruka wakati umekuwa ukitembea kila mahali maisha yako yote! - -Tuseme una folda ya ndani yenye mradi wa misimbo na unataka kuanza kufuatilia maendeleo yako ukitumia git - mfumo wa kudhibiti toleo. Watu wengine hulinganisha kutumia git na kuandika barua ya mapenzi kwa nafsi yako ya baadaye. Kusoma ujumbe wa commit siku, wiki, au miezi baadaye utaweza kukumbuka kwa nini ulifanya uamuzi, au "kurudisha nyuma" mabadiliko - yaani, unapokuwa unaandika ujumbe mzuri wa "commit". - -### Kazi: Unda Hifadhi Yako ya Kwanza! +## Kusimamia Msimbo Wako Kama Mtaalamu + +Sawa, HII ndio sehemu ambayo mambo yanakuwa ya kusisimua kweli! 🎉 Tutaweza kujifunza jinsi ya kufuatilia na kusimamia msimbo wako kama wataalamu hufanya, na kweli, hii ni mojawapo ya mambo ninayopenda kufundisha kwa sababu hubadilisha mchezo kabisa. + +Fikiria hivi: unaandika hadithi ya kushangaza, na unataka kufuatilia kila rasimu, kila marekebisho mazuri, na kila “ngoja, hiyo ni akili ya ajabu!” wakati katika safari yako. Hiyo ndiyo Git hufanya kwa msimbo wako! Ni kama kuwa na daftari la kusafiri wakati lililo bora kabisa linalokumbuka KILA KITU – kila tugizo la kibodi, kila mabadiliko, kila wakati wa “oops, hilo limetatiza yote” ambao unaweza kufuta papo hapo. + +Nitasema kweli – hii inaweza kuhisi ngumu mwanzoni. Nilipanzia, nilifikiria “Kwa nini siwezi kuhifadhi faili zangu kama kawaida?” Lakini niamini hili: mara Git itakapokueleweka (na itakueleweka!), utakuwa na wakati wa kufikiria “Nilivyoweza KODI bila hili kabla?” Ni kama kugundua unaweza kuruka wakati ulitembea kila mahali maisha yako yote! + +Tuseme una folda kwenye kompyuta yako yenye mradi wa msimbo na unataka kuanza kufuatilia maendeleo yako ukitumia git – mfumo wa kudhibiti toleo la msimbo. Watu wengine hufananisha kutumia git na kuandika barua ya upendo kwa nafsi yako ya baadaye. Kusoma ujumbe wako wa commit siku, wiki, au miezi baadaye kutakuwezesha kukumbuka kwa nini ulifanya uamuzi fulani, au “kurudisha nyuma” mabadiliko – yaani, pale unapobandika ujumbe mzuri wa commit. + +```mermaid +flowchart TD + A[📁 Faili Zako za Mradi] --> B{Je Ni Git Repository?} + B -->|Hapana| C[git init] + B -->|Ndiyo| D[Fanya Mabadiliko] + C --> D + D --> E[git add .] + E --> F["git commit -m 'message'"] + F --> G[git push] + G --> H[🌟 Msimbo Kwenye GitHub!] + + H --> I{Unataka Kushirikiana?} + I -->|Ndiyo| J[Fork & Clone] + I -->|Hapana| D + J --> K[Tengeneza Tawi] + K --> L[Fanya Mabadiliko] + L --> M[Omba Mvuto] + M --> N[🎉 Kuchangia!] + + style A fill:#fff59d + style H fill:#c8e6c9 + style N fill:#ff4081,color:#fff +``` +### Kazi: Unda Hazina Yako ya Kwanza! -> 🎯 **Dhamira Yako (na ninasisimka kwa ajili yako!)**: Tunakwenda kuunda hifadhi yako ya kwanza ya GitHub pamoja! Kufikia mwisho wa hapa, utakuwa na kona yako ndogo ya mtandao ambapo misimbo yako inaishi, na utakuwa umefanya "commit" yako ya kwanza (hiyo ni lugha ya waandaaji programu kwa kuhifadhi kazi yako kwa njia ya akili sana). -> -> Hii ni wakati maalum sana – unakaribia kujiunga rasmi na jamii ya kimataifa ya waandaaji programu! Bado nakumbuka msisimko wa kuunda hifadhi yangu ya kwanza na kufikiria "Wow, kweli ninafanya hili!" +> 🎯 **Kazi Yako (na nina hamu sana kwako!)**: Tutaunda hazina yako ya kwanza ya GitHub pamoja! Mwisho wa haya, utakuwa na kona yako ndogo ya mtandao ambapo msimbo wako utaishi, na utakuwa umefanya "commit" yako ya kwanza (hiyo ni lugha ya msanidi programu ya kuhifadhi kazi yako kwa njia ya mwerevu). +> +> Hili ni tukio la kipekee kweli – uko njiani kujiunga rasmi na jamii ya kimataifa ya wapenzi wa programu! Bado nakumbuka hisia ya kuunda hazina yangu ya kwanza na kufikiria "Wow, nashangaza kweli!" -Hebu tuendelee na safari hii pamoja, hatua kwa hatua. Chukua muda wako kwa kila sehemu – hakuna zawadi kwa haraka, na naahidi kila hatua itakuwa na maana. Kumbuka, kila nyota wa programu unayempenda aliwahi kukaa mahali ulipo, akijiandaa kuunda hifadhi yake ya kwanza. Si hilo ni la kuvutia? +Tupitie tukio hili pamoja, hatua kwa hatua. Chukua muda wako kwa kila sehemu – hakuna zawadi kwa haraka, na naahidi kila hatua itakuwa na maana. Kumbuka, kila nyota wa kuandika msimbo unayemheshimu alikuwa amekaa mahali ulipo sasa, akikaribia kuunda hazina yao ya kwanza. Je, si baraka? -> Tazama video -> -> [![Video ya misingi ya Git na GitHub](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4) +> Angalia video +> +> [![Msingi wa Git na GitHub video](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4) -**Hebu Tufanye Hili Pamoja:** +**Tufanye Hii Pamoja:** -1. **Unda hifadhi yako kwenye GitHub**. Nenda GitHub.com na tafuta kitufe cha kijani kibichi **New** (au alama ya **+** kwenye kona ya juu kulia). Bonyeza na uchague **New repository**. +1. **Unda hazina yako kwenye GitHub**. Nenda GitHub.com na tafuta kitufe kijani angavu cha **New** (au alama ya **+** kwenye kona ya juu kulia). Bonyeza na chagua **New repository**. - Hivi ndivyo unavyofanya: - 1. Peana hifadhi yako jina – lifanye kuwa na maana kwako! - 1. Ongeza maelezo ikiwa unataka (hii husaidia wengine kuelewa mradi wako unahusu nini) - 1. Amua ikiwa unataka iwe ya umma (kila mtu anaweza kuiona) au ya binafsi (kwa ajili yako tu) - 1. Ninapendekeza kuangalia kisanduku cha kuongeza faili ya README – ni kama ukurasa wa mbele wa mradi wako - 1. Bonyeza **Create repository** na sherehekea – umeunda hifadhi yako ya kwanza! 🎉 + Hapa ni kile cha kufanya: + 1. Wape hazina yako jina – lifanye kuwa jambo lenye maana kwako! + 1. Ongeza maelezo ikiwa unataka (hii husaidia wengine kuelewa mradi wako ni nini) + 1. Amua ikiwa unataka iwe wazi kwa wote (kila mtu aione) au binafsi (kwako wewe pekee) + 1. Napendekeza ukaangalia kisanduku cha kuongeza faili la README – ni kama ukurasa wa mbele wa mradi wako + 1. Bonyeza **Create repository** na sherehekea – umeunda hazina yako ya kwanza! 🎉 -2. **Elekea kwenye folda ya mradi wako**. Sasa hebu tufungue terminal yako (usijali, si ya kutisha kama inavyoonekana!). Tunahitaji kuambia kompyuta yako mahali faili za mradi wako zipo. Andika amri hii: +2. **Nenda kwenye folda ya mradi wako**. Sasa fungua terminal yako (usijali, haogopi kama inavyoonekana!). Tunahitaji kuambia kompyuta yako faili za mradi wako ziko wapi. Andika amri hii: ```bash cd [name of your folder] ``` - - **Tunachofanya hapa:** - - Kimsingi tunasema "Hey kompyuta, nipeleke kwenye folda ya mradi wangu" - - Hii ni kama kufungua folda maalum kwenye desktop yako, lakini tunafanya kwa amri za maandishi + + **Tunachofanya hapa:** + - Kimsingi tunasema "Hey kompyuta, niongoze kwenye folda yangu ya mradi" + - Hii ni sawa na kufungua folda maalum kwenye desktop yako, lakini tunafanya kwa amri za maandishi - Badilisha `[name of your folder]` na jina halisi la folda ya mradi wako -3. **Geuza folda yako kuwa hifadhi ya Git**. Hapa ndipo uchawi unapotokea! Andika: +3. **Geuza folda yako kuwa hazina ya Git**. Hapa ndipo uchawi unaanza! Andika: ```bash git init ``` + + **Hii ndio ilitokea (mambo mazuri!):** + - Git imeunda folda fiche `.git` kwenye mradi wako – hutaiwona, lakini ipo! + - Folda yako ya kawaida sasa ni "hazina" inayoweza kufuatilia kila mabadiliko unayofanya + - Fikiria kama umeipa folda yako nguvu za kumbukumbu kila kitu - **Hapa ndipo kilichotokea (mambo ya kuvutia!):** - - Git imeunda folda ya siri `.git` kwenye mradi wako – huwezi kuiona, lakini ipo! - - Folda yako ya kawaida sasa ni "hifadhi" inayoweza kufuatilia kila mabadiliko unayofanya - - Fikiria kama kutoa folda yako nguvu za kipekee za kukumbuka kila kitu - -4. **Angalia kinachoendelea**. Hebu tuone Git inafikiria nini kuhusu mradi wako kwa sasa: +4. **Angalia kinachoendelea**. Tuweke tuchunguze kile Git kinafikiri kuhusu mradi wako sasa hivi: ```bash git status ``` - - **Kuelewa kinachosemwa na Git:** + + **Kuelewa kile Git inachokuambia:** - Unaweza kuona kitu kinachoonekana kama hiki: + Huenda ukaona jambo kama hili: ```output Changes not staged for commit: @@ -174,103 +213,103 @@ Hebu tuendelee na safari hii pamoja, hatua kwa hatua. Chukua muda wako kwa kila modified: file.txt modified: file2.txt ``` + + **Usijali! Hii inamaanisha:** + - Faili zilizo **nyekundu** ni faili zilizo na mabadiliko lakini bado hazijatayarishwa kuhifadhiwa + - Faili zilizo **kijani** (unapoziona) tayari ziko tayari kuhifadhiwa + - Git inakusaidia kwa kukuambia kile unachoweza kufanya baadaye - **Usiogope! Hii inamaanisha:** - - Faili za **nyekundu** ni faili ambazo zina mabadiliko lakini haziko tayari kuhifadhiwa bado - - Faili za **kijani** (ukiziona) ziko tayari kuhifadhiwa - - Git inakuwa msaada kwa kukuambia hasa unachoweza kufanya baadaye + > 💡 **Ushauri bora**: Amri `git status` ni rafiki yako mkubwa! Tumia wakati wowote ukiwa na shaka kuhusu kile kinachoendelea. Ni sawa na kumuuliza Git "Hey, hali ya sasa ni gani?" - > 💡 **Ushauri wa Wataalamu**: Amri ya `git status` ni rafiki yako bora! Tumia wakati wowote unapochanganyikiwa kuhusu kinachoendelea. Ni kama kuuliza Git "Hey, hali ikoje sasa?" - -5. **Andaa faili zako kwa kuhifadhi** (hii inaitwa "staging"): +5. **Tayarisha faili zako kuhifadhi (hii huitwa "staging")**: ```bash git add . ``` + + **Tulichofanya sasa hivi:** + - Tumeambia Git "Hey, nataka kuingiza faili zote zangu kwenye kuhifadhi kijacho" + - `.` ni sawa na kusema "kila kitu kwenye folda hii" + - Sasa faili zako zimeshapangwa na ziko tayari kwa hatua inayofuata - **Tulichofanya:** - - Tuliambia Git "Hey, nataka niweke FAILI ZOTE kwenye hifadhi inayofuata" - - `.` ni kama kusema "kila kitu kwenye folda hii" - - Sasa faili zako ziko "staged" na ziko tayari kwa hatua inayofuata - - **Unataka kuchagua zaidi?** Unaweza kuongeza faili maalum tu: + **Unataka kuwa makini zaidi?** Unaweza kuongeza faili maalum tu: ```bash git add [file or folder name] ``` + + **Kwa nini ungependa kufanya hivyo?** + - Wakati mwingine unataka kuhifadhi mabadiliko yanayohusiana pamoja + - Husaidia kupanga kazi yako katika sehemu za mantiki + - Hufanya iwe rahisi kuelewa kilichobadilika na lini - **Kwa nini unaweza kutaka kufanya hivi?** - - Wakati mwingine unataka kuhifadhi mabadiliko yanayohusiana pamoja - - Inakusaidia kupanga kazi yako katika sehemu za kimantiki - - Inafanya iwe rahisi kuelewa kilichobadilika na lini - - **Umebadilisha mawazo?** Usijali! Unaweza kuondoa faili kutoka kwa "staged" kama hivi: + **Umebadilisha mawazo?** Usijali! Unaweza kuondoa faili kutoka kwenye staging kama hii: ```bash - # Unstage everything + # Ondoa kila kitu kwenye hatua git reset - # Unstage just one file + # Ondoa faili moja tu kwenye hatua git reset [file name] ``` + + Usijali – hili halifuti kazi yako, linaondoa faili kwenye orodha ya "zako tayari kuhifadhiwa". - Usijali – hii haifuti kazi yako, inachukua tu faili kutoka kwenye "hifadhi inayofuata". - -6. **Hifadhi kazi yako milele** (kutengeneza commit yako ya kwanza!): +6. **Hifadhi kazi yako milele (kutengeneza commit yako ya kwanza!):** ```bash git commit -m "first commit" ``` - - **🎉 Hongera! Umefanya commit yako ya kwanza!** + + **🎉 Hongera! Umefanya commit yako ya kwanza!** - **Hapa ndipo kilichotokea:** - - Git ilichukua "picha" ya faili zako zote zilizowekwa kwenye hatua hii halisi - - Ujumbe wako wa commit "first commit" unaelezea kuhusu hatua hii ya kuhifadhi - - Git ilitoa ID ya kipekee kwa picha hii ili uweze kuipata wakati wowote baadaye + **Hili ndilo lililotokea:** + - Git ilichukua "picha" ya kila faili ulizoweka staging kwa wakati huu + - Ujumbe wako wa commit "first commit" unaeleza kuhusu hii pointi ya kuhifadhi + - Git ilitoa ndiyo ID ya kipekee kwa picha hii ili iwe rahisi kuitafuta baadaye - Umeanza rasmi kufuatilia historia ya mradi wako! - > 💡 **Ujumbe wa commit wa baadaye**: Kwa commit zako zijazo, kuwa na maelezo zaidi! Badala ya "updated stuff", jaribu "Ongeza fomu ya mawasiliano kwenye ukurasa wa mwanzo" au "Rekebisha hitilafu ya menyu ya urambazaji". Nafsi yako ya baadaye itakushukuru! + > 💡 **Ujumbe wa commit wa baadaye**: Kwa commits zako zijazo, jaribu kuwa na maelezo zaidi! Badala ya "updated stuff", jaribu "Ongeza fomu ya mawasiliano kwenye ukurasa wa nyumbani" au "Rekebisha hitilafu ya menyu ya urambazaji". Nafsi yako ya baadaye itakushukuru! -7. **Unganisha mradi wako wa ndani na GitHub**. Kwa sasa, mradi wako upo tu kwenye kompyuta yako. Hebu tuunganishe na hifadhi yako ya GitHub ili uweze kushiriki na dunia! +7. **Unganisha mradi wako wa ndani na GitHub**. Sasa mradi wako bado uko kwenye kompyuta yako peke yake. Tuchunguze kuunganisha kwenye hazina yako ya GitHub ili uweze kuihifadhi kwa ulimwengu! - Kwanza, nenda kwenye ukurasa wa hifadhi yako ya GitHub na nakili URL. Kisha rudi hapa na andika: + Kwanza, nenda kwenye ukurasa wa hazina yako ya GitHub na nakili URL. Kisha rudi hapa na uandike: ```bash git remote add origin https://github.com/username/repository_name.git ``` - (Badilisha URL hiyo na URL halisi ya hifadhi yako!) + (Badilisha URL hiyo na URL halisi ya hazina yako!) - **Hapa ndipo kilichotokea:** - - Tumeunda muunganisho kati ya mradi wako wa ndani na hifadhi yako ya GitHub - - "Origin" ni jina la utani tu kwa hifadhi yako ya GitHub – ni kama kuongeza mawasiliano kwenye simu yako - - Sasa Git yako ya ndani inajua wapi pa kutuma msimbo wako unapokuwa tayari kuushiriki + **Tulichofanya sasa hivi:** + - Tulitengeneza muunganisho kati ya mradi wako wa ndani na ghala lako la GitHub + - "Origin" ni nadra tu kwa ghala lako la GitHub – ni sawa na kuongeza mpenzi kwenye simu yako + - Sasa Git ya ndani inajua ni wapi ya kutuma msimbo wako unapokuwa tayari kuushiriki - 💡 **Njia rahisi zaidi**: Ikiwa umeweka GitHub CLI, unaweza kufanya hili kwa amri moja: + 💡 **Njia rahisi**: Ikiwa una GitHub CLI imewekwa, unaweza kufanya hili kwa amri moja: ```bash gh repo create my-repo --public --push --source=. ``` -8. **Tuma msimbo wako kwenye GitHub** (wakati mkubwa!): +8. **Tuma msimbo wako GitHub** (wakati mkubwa!): ```bash git push -u origin main ``` - **🚀 Hii ndiyo! Unapakia msimbo wako kwenye GitHub!** + **🚀 Hii ndio! Unapakia msimbo wako GitHub!** - **Kinachotokea:** - - Mabadiliko yako yanatoka kwenye kompyuta yako kwenda GitHub - - Bendera ya `-u` inaweka muunganisho wa kudumu ili usukumo wa baadaye uwe rahisi + **Kinachojiri:** + - Malipo yako yanasafiri kutoka kompyuta yako hadi GitHub + - Bendera `-u` inaweka muunganisho wa kudumu ili mawasilisho ya baadaye yawe rahisi - "main" ni jina la tawi lako kuu (kama folda kuu) - Baada ya hili, unaweza tu kuandika `git push` kwa upakiaji wa baadaye! - 💡 **Kumbuka haraka**: Ikiwa tawi lako linaitwa kitu kingine (kama "master"), tumia jina hilo. Unaweza kuangalia kwa `git branch --show-current`. + 💡 **Kumbuka haraka**: Ikiwa tawi lako lina jina tofauti (kama "master"), tumia jina hilo badala. Unaweza kuangalia kwa `git branch --show-current`. -9. **Mpangilio wako mpya wa kila siku wa usimbaji** (hapa ndipo inakuwa ya kuvutia!): +9. **Mdundo wako mpya wa kila siku wa uandishi wa msimbo** (hapa ndipo unapoanza kuutamani!): - Kuanzia sasa, kila unapofanya mabadiliko kwenye mradi wako, una hatua hizi tatu rahisi za kufuata: + Kuanzia sasa, kila wakati unapofanya mabadiliko kwenye mradi wako, una ngoma rahisi ya hatua tatu: ```bash git add . @@ -278,310 +317,460 @@ Hebu tuendelee na safari hii pamoja, hatua kwa hatua. Chukua muda wako kwa kila git push ``` - **Hii inakuwa mapigo ya moyo wa usimbaji wako:** + **Hii inakuwa mapigo ya moyo ya uandishi wako wa msimbo:** - Fanya mabadiliko mazuri kwenye msimbo wako ✨ - - Yape nafasi kwa `git add` ("Hey Git, zingatia mabadiliko haya!") - - Yahifadhi kwa `git commit` na ujumbe wa kuelezea (wewe wa baadaye atakushukuru!) - - Yashiriki na dunia kwa kutumia `git push` 🚀 - - Rudia tena – kwa kweli, hii inakuwa ya kawaida kama kupumua! - - Napenda mtiririko huu kwa sababu ni kama kuwa na sehemu nyingi za kuhifadhi katika mchezo wa video. Umefanya mabadiliko unayopenda? Yathibitishe! Unataka kujaribu kitu hatari? Hakuna shida – unaweza kurudi kwenye uhifadhi wako wa mwisho ikiwa mambo yataenda vibaya! - - > 💡 **Kidokezo**: Unaweza pia kutaka kutumia faili ya `.gitignore` ili kuzuia faili ambazo hutaki kufuatilia zisionekane kwenye GitHub - kama faili ya maelezo unayohifadhi kwenye folda hiyo hiyo lakini haina nafasi kwenye hifadhi ya umma. Unaweza kupata templeti za faili za `.gitignore` kwenye [.gitignore templates](https://github.com/github/gitignore) au kuunda moja kwa kutumia [gitignore.io](https://www.toptal.com/developers/gitignore). + - Yazae (stage) kwa `git add` ("Hey Git, zingatia mabadiliko haya!") + - Yahifadhi na ujumbe wa kufafanua kwa `git commit` (wewe wa baadaye utashukuru!) + - Ya mshiriki na ulimwengu kwa kutumia `git push` 🚀 + - Rudia na rudia – kwa kweli, hii inakuwa rahisi kama kupumua! + + Ninapenda mtiririko huu wa kazi kwa sababu ni kama kuwa na pointi kadhaa za kuokoa ndani ya mchezo wa video. Umefanya mabadiliko unayopenda? Commiti! Unataka kujaribu kitu hatari? Hakuna shida – kila wakati unaweza kurudi kwenye commit yako ya mwisho ikiwa mambo yataenda mrama! + + > 💡 **Ubunifu**: Pia unaweza kutaka kutumia faili la `.gitignore` ili kuzuia faili ambazo hutaki kufuatiliwa kuonekana GitHub - kama vile faili la noti unalohifadhi katika folda hiyo hiyo lakini halina mahali katika ghala la umma. Unaweza kupata templeti za faili `.gitignore` kwenye [.gitignore templates](https://github.com/github/gitignore) au kutengeneza moja kwa kutumia [gitignore.io](https://www.toptal.com/developers/gitignore). + +### 🧠 **Kuingia Mara ya Kwanza Ghalani: Ilikuwa Vipi?** + +**Chukua muda kusherehekea na kufikiria:** +- Ilikuwa vipi kuona msimbo wako ukaonekana GitHub kwa mara ya kwanza? +- Hatua gani ilikuonekana ngumu zaidi, na ipi ilionekana rahisi kwa mshangao? +- Je, unaweza kuelezea tofauti kati ya `git add`, `git commit`, na `git push` kwa maneno yako mwenyewe? + +```mermaid +stateDiagram-v2 + [*] --> LocalFiles: Unda mradi + LocalFiles --> Staged: git add . + Staged --> Committed: git commit + Committed --> GitHub: git push + GitHub --> [*]: Mafanikio! 🎉 + + note right of Staged + Fayela tayari kuhifadhi + end note + + note right of Committed + Picha ya hali imetengenezwa + end note +``` +> **Kumbuka**: Hata waendelezaji wenye uzoefu mara nyingine huwezi kukumbuka amri zake zote. Kuwa na mtiririko huu wa kazi kama kumbukumbu ya misuli inahitaji mazoezi – unafanya vizuri! -#### Mitiririko ya kisasa ya Git +#### Mitiririko ya Kazi ya Git ya Kisasa Fikiria kutumia mbinu hizi za kisasa: -- **Conventional Commits**: Tumia muundo wa ujumbe wa uhifadhi uliosimamiwa kama `feat:`, `fix:`, `docs:`, nk. Jifunze zaidi kwenye [conventionalcommits.org](https://www.conventionalcommits.org/) -- **Atomic commits**: Fanya kila uhifadhi uwakilishe mabadiliko moja ya kimantiki -- **Frequent commits**: Hifadhi mara kwa mara na ujumbe wa kuelezea badala ya uhifadhi mkubwa, wa nadra +- **Mawasilisho ya Kawaida (Conventional Commits)**: Tumia muundo wa ujumbe wa commit uliosanifiwa kama `feat:`, `fix:`, `docs:`, nk. Jifunze zaidi kwenye [conventionalcommits.org](https://www.conventionalcommits.org/) +- **Commiti ndogo ndogo**: Fanya kila commit iwe mfano wa mabadiliko ya mantiki moja +- **Commiti nyingi**: Commit mara kwa mara kwa ujumbe unaofafanua badala ya commit kubwa, isiyo mara kwa mara -#### Ujumbe wa uhifadhi +#### Ujumbe wa commit -Mstari mzuri wa somo la uhifadhi wa Git unakamilisha sentensi ifuatayo: -Ikiwa itatumika, uhifadhi huu uta +Mstari mzuri wa kichwa cha commit ya Git hujaza sentensi ifuatayo: +Ikiwa itatekelezwa, commit hii itafanya -Kwa somo tumia hali ya amri, wakati wa sasa: "badilisha" si "imebadilishwa" wala "inabadilisha". -Kama ilivyo kwenye somo, kwenye mwili (hiari) pia tumia hali ya amri, wakati wa sasa. Mwili unapaswa kujumuisha motisha ya mabadiliko na kulinganisha hii na tabia ya awali. Unafafanua `kwa nini`, si `jinsi`. +Kwa kichwa tumia kitenzi katika hali ya amri, wakati wa sasa: "badilisha" sio "imebadilika" wala "mabadiliko". +Kama katika kichwa, pia tumia kitenzi katika hali ya amri, wakati wa sasa mwilini (hiari). Mwili unapaswa kujumuisha sababu ya mabadiliko na kulinganisha na tabia ya awali. Unaeleza `kwa nini`, sio `jinsi`. -✅ Chukua dakika chache kuzunguka GitHub. Je, unaweza kupata ujumbe mzuri wa uhifadhi? Je, unaweza kupata mmoja wa kiwango cha chini sana? Ni taarifa gani unadhani ni muhimu zaidi na ya manufaa kufikisha kwenye ujumbe wa uhifadhi? +✅ Chukua dakika chache kuvinjari GitHub. Je, unaweza kupata ujumbe mzuri sana wa commit? Je, unaweza kupata ujumbe mdogo kabisa? Ni taarifa gani unadhani ni muhimu na yenye manufaa zaidi kuwasilishwa katika ujumbe wa commit? -## Kufanya kazi na Wengine (Sehemu ya Kufurahisha!) +## Kufanya Kazi na Wengine (Sehemu ya Kufurahisha!) -Shikilia kofia yako kwa sababu HII ndiyo ambapo GitHub inakuwa ya kichawi kabisa! 🪄 Umejifunza kusimamia msimbo wako mwenyewe, lakini sasa tunaingia kwenye sehemu ninayopenda zaidi – kushirikiana na watu wa ajabu kutoka kote ulimwenguni. +Shikilia kofia yako kwa sababu HII ndio sehemu GitHub inakuwa ya kichawi kabisa! 🪄 Umetawala usimamizi wa msimbo wako, lakini sasa tunaingia sehemu niliyopenda zaidi – kushirikiana na watu wa kushangaza kutoka sehemu zote za dunia. -Fikiria hili: unaamka kesho na kuona kwamba mtu huko Tokyo ameboresha msimbo wako wakati ulikuwa umelala. Kisha mtu huko Berlin anarekebisha hitilafu ambayo umekuwa ukikwama nayo. Kufikia alasiri, msanidi programu huko São Paulo ameongeza kipengele ambacho hata hukuwahi kufikiria. Hiyo siyo hadithi ya kisayansi – hiyo ni Jumanne tu katika ulimwengu wa GitHub! +Fikiria hii: unaamka kesho na kuona mtu Tokyo ameongeza uboreshaji kwenye msimbo wako huku umelala. Kisha mtu Berlin anarekebisha hitilafu iliyokufanya kusuasua. Alasiri, mtaalamu wa São Paulo ameongeza kipengele ambacho hukuwahi kufikiri. Hiyo si sayansi ya kubuni – ni tu Jumanne katika ulimwengu wa GitHub! -Kinachonifanya niwe na furaha sana ni kwamba ujuzi wa kushirikiana unaojifunza sasa? Hizi ni mbinu SAWA ambazo timu huko Google, Microsoft, na kampuni unazozipenda hutumia kila siku. Hujifunzi tu zana nzuri – unajifunza lugha ya siri inayofanya ulimwengu mzima wa programu kufanya kazi pamoja. +Kinachonifanya nisisimke ni kwamba ujuzi wa ushirikiano unaojiandaa kujifunza? Hii ni MITIRIRIKO HAISI sawa ambayo timu katika Google, Microsoft, na startups ulizopenda hutumia kila siku. Haujifunzi tu zana nzuri – unajifunza lugha ya siri inayofanya ulimwengu mzima wa programu kufanya kazi pamoja. -Kwa kweli, mara tu unapopata msisimko wa kuwa na mtu kuunganisha ombi lako la kwanza la kuvuta, utaelewa kwa nini wasanidi programu wanakuwa na shauku sana kuhusu chanzo wazi. Ni kama kuwa sehemu ya mradi mkubwa zaidi, wa ubunifu zaidi wa timu duniani! +Kwa kweli, mara utakapopata furaha ya mtu kuchanganya ombi lako la kuleta msimbo la kwanza, utaelewa kwanini waendelezaji wanavutiwa sana na chanzo huria. Ni kama kuwa sehemu ya mradi mkubwa zaidi wa ubunifu wa timu duniani! > Tazama video > -> [![Video ya misingi ya Git na GitHub](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8) - -Sababu kuu ya kuweka vitu kwenye GitHub ilikuwa kufanya iwezekane kushirikiana na wasanidi programu wengine. - -Katika hifadhi yako, nenda kwenye `Insights > Community` ili kuona jinsi mradi wako unavyolinganishwa na viwango vya jamii vinavyopendekezwa. +> [![Git and GitHub basics video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8) + +Sababu kubwa ya kuweka vitu GitHub ilikuwa kuwezesha kushirikiana na waendelezaji wengine. + +```mermaid +flowchart LR + A[🔍 Tafuta Mradi] --> B[🍴 Nakili Hifadhidata] + B --> C[📥 Nakili kwa Ndani] + C --> D[🌿 Unda Tawi] + D --> E[✏️ Fanya Mabadiliko] + E --> F[💾 Hifadhi Mabadiliko] + F --> G[📤 Sogeza Tawi] + G --> H[🔄 Unda Ombi la Kuunganisha] + H --> I{Ukaguzi wa Msimamizi} + I -->|✅ Imekubaliwa| J[🎉 Unganisha!] + I -->|❓ Mabadiliko Yameombwa| K[📝 Fanya Marekebisho] + K --> F + J --> L[🧹 Safisha Matawi] + + style A fill:#e3f2fd + style J fill:#e8f5e8 + style L fill:#fff3e0 +``` +Katika ghala lako, nenda `Insights > Community` kuona jinsi mradi wako unavyolinganishwa na viwango vinavyopendekezwa vya jamii. -Unataka kufanya hifadhi yako ionekane kitaalamu na ya kuvutia? Nenda kwenye hifadhi yako na bonyeza `Insights > Community`. Kipengele hiki kizuri kinaonyesha jinsi mradi wako unavyolinganishwa na kile jamii ya GitHub inachokiona kama "mazoea mazuri ya hifadhi." +Unataka ghala lako lionekane kitaalamu na kukaribisha? Nenda kwenye ghala lako na bofya `Insights > Community`. Kipengele hiki kizuri kinaonyesha jinsi mradi wako unavyolinganishwa na kile jamii ya GitHub inachokiona kama "mbinu nzuri za ghala." -> 🎯 **Kufanya Mradi Wako Kung'aa**: Hifadhi iliyoandaliwa vizuri na nyaraka nzuri ni kama kuwa na duka safi, la kuvutia. Inaonyesha watu kwamba unajali kazi yako na inawafanya wengine kutaka kuchangia! +> 🎯 **Kufanya Mradi Wako Uchwe Macho**: Ghala lililopangwa vizuri lenye nyaraka nzuri ni kama kuwa na duka safi, linalokaribisha. Linawaambia watu unathamini kazi yako na kuwafanya wengine watake kuchangia! -**Hivi ndivyo hifadhi inavyokuwa ya ajabu:** +**Haya ndiyo yanayofanya ghala kuwa bora:** | Kitu cha Kuongeza | Kwa Nini Ni Muhimu | Kinachokufanyia | -|-------------------|-------------------|-----------------| -| **Maelezo** | Muonekano wa kwanza ni muhimu! | Watu wanajua mara moja mradi wako unafanya nini | -| **README** | Ukurasa wa mbele wa mradi wako | Kama mwongozo wa kirafiki kwa wageni wapya | -| **Miongozo ya Kuchangia** | Inaonyesha unakaribisha msaada | Watu wanajua hasa jinsi wanavyoweza kukusaidia | +|-------------------|--------------------|-----------------| +| **Maelezo** | Mtazamo wa kwanza ni muhimu! | Watu wanajua mara moja mradi wako unafanya nini | +| **README** | Ukurasa wa mbele wa mradi wako | Kama mwongozaji mwenye kirafiki kwa wageni wapya | +| **Miongozo ya Kuchangia** | Inaonyesha unakaribisha msaada | Watu wanajua hasa jinsi wanavyoweza kusaidia | | **Kanuni za Maadili** | Inaunda nafasi ya kirafiki | Kila mtu anahisi kukaribishwa kushiriki | -| **Leseni** | Uwazi wa kisheria | Wengine wanajua jinsi wanavyoweza kutumia msimbo wako | -| **Sera ya Usalama** | Inaonyesha unawajibika | Inaonyesha mazoea ya kitaalamu | +| **Leseni** | Uwiano wa kisheria | Wengine wanajua jinsi wanavyoweza kutumia msimbo wako | +| **Sera ya Usalama** | Inaonyesha wewe ni mwekezaji | Inaonyesha mbinu za kitaalamu | -> 💡 **Kidokezo cha Kitaalamu**: GitHub hutoa templeti za faili zote hizi. Unapounda hifadhi mpya, angalia masanduku ili kuunda faili hizi moja kwa moja. +> 💡 **Ushauri wa Mtaalamu**: GitHub hutoa templeti za faili zote hizi. Unapotengeneza ghala jipya, angalia masanduku kuunda faili hizi moja kwa moja. **Vipengele vya Kisasa vya GitHub vya Kuchunguza:** -🤖 **Otomatiki & CI/CD:** -- **GitHub Actions** kwa majaribio ya kiotomatiki na usambazaji -- **Dependabot** kwa masasisho ya kiotomatiki ya utegemezi +🤖 **Otomasishaji & CI/CD:** +- **GitHub Actions** kwa majaribio na usambazaji wa kiotomatiki +- **Dependabot** kwa masasisho ya mara kwa mara ya utegemezi -💬 **Jamii & Usimamizi wa Mradi:** -- **GitHub Discussions** kwa mazungumzo ya jamii zaidi ya masuala +💬 **Jamii & Usimamizi wa Miradi:** +- **GitHub Discussions** kwa mazungumzo ya jamii zaidi ya matatizo - **GitHub Projects** kwa usimamizi wa mradi wa mtindo wa kanban -- **Sheria za ulinzi wa tawi** za kutekeleza viwango vya ubora wa msimbo +- **Sheria za ulinzi wa matawi** kuhakikisha viwango vya ubora wa msimbo + +Rasilimali zote hizi zitasaidia kuingiza wanachama wapya wa timu. Na hizo kwa kawaida ndizo mambo ambayo wachangiaji wapya huangalia kabla hata ya kuangalia msimbo wako, kutambua kama mradi wako ndilo mahali sahihi kwao kutumia muda wao. -Rasilimali hizi zote zitasaidia kuingiza wanachama wapya wa timu. Na hizi ndizo kawaida vitu ambavyo wachangiaji wapya huangalia kabla hata ya kuangalia msimbo wako, ili kujua ikiwa mradi wako ni mahali sahihi pa kutumia muda wao. +✅ Faili za README, ingawa zinachukua muda kuandaa, mara nyingi huachwa na waajiri wa shughuli nyingi. Je, unaweza kupata mfano wa README yenye maelezo mazuri sana? Kumbuka: kuna baadhi ya [zana za kusaidia kutengeneza READMEs nzuri](https://www.makeareadme.com/) ambazo unaweza kutaka kujaribu. -✅ Faili za README, ingawa zinachukua muda kuandaa, mara nyingi hupuuzwa na waangalizi wenye shughuli nyingi. Je, unaweza kupata mfano wa moja iliyoelezea hasa? Kumbuka: kuna [zana za kusaidia kuunda README nzuri](https://www.makeareadme.com/) ambazo unaweza kupenda kujaribu. +### Kazi: Changanya Msimbo -### Kazi: Unganisha msimbo fulani +Nyaraka za kuchangia husaidia watu kuchangia kwenye mradi. Inafafanua aina za michango unayotafuta na mchakato unavyofanya kazi. Wachangiaji watahitaji kupitia hatua kadhaa ili waweze kuchangia ghala lako GitHub: -Nyaraka za kuchangia husaidia watu kuchangia mradi. Inaelezea ni aina gani za michango unayotafuta na jinsi mchakato unavyofanya kazi. Wachangiaji watahitaji kupitia mfululizo wa hatua ili waweze kuchangia kwenye hifadhi yako ya GitHub: -1. **Kufork hifadhi yako** Labda utataka watu _kufork_ mradi wako. Kufork inamaanisha kuunda nakala ya hifadhi yako kwenye wasifu wao wa GitHub. -1. **Clone**. Kutoka hapo wataiga mradi kwenye kompyuta yao ya ndani. -1. **Unda tawi**. Utataka kuwaomba waunde _tawi_ kwa kazi yao. -1. **Kuzingatia mabadiliko yao kwenye eneo moja**. Waombe wachangiaji kuzingatia michango yao kwenye kitu kimoja kwa wakati mmoja - kwa njia hiyo nafasi za kuweza _kuunganisha_ kazi yao ni kubwa. Fikiria wanaandika marekebisho ya hitilafu, kuongeza kipengele kipya, na kusasisha majaribio kadhaa - vipi ikiwa unataka, au unaweza tu kutekeleza 2 kati ya 3, au 1 kati ya 3 mabadiliko? +1. **Kufork ghala lako** Huenda unataka watu waforke mradi wako. Kufork ina maana ya kuunda nakala ya ghala lako kwenye wasifu wao wa GitHub. +1. **Kukopa (Clone)**. Kutoka hapo watakopa mradi kwa mashine yao ya ndani. +1. **Tengeneza tawi**. Utawataka waumba tawi la kazi yao. +1. **Lenga mabadiliko yao sehemu moja**. Waombe wachangiaji waelekeze michango yao kwa jambo moja kwa wakati - hivyo nafasi za wewe kuweza kuchanganya kazi zao ni kubwa. Fikiria wanapandika suluhisho la hitilafu, kuongeza kipengele kipya, na kusasisha majaribio kadhaa – vipi ikiwa unataka, au unaweza tu kutekeleza 2 kati ya 3, au 1 kati ya 3 mabadiliko? -✅ Fikiria hali ambapo matawi ni muhimu sana kwa kuandika na kusafirisha msimbo mzuri. Ni matumizi gani unayoweza kufikiria? +✅ Fikiria hali ambapo matawi ni muhimu sana kwa ajili ya kuandika na kupeleka msimbo mzuri. Unafikiri matukio yapi yanaweza kutokea? -> Kumbuka, kuwa mabadiliko unayotaka kuona duniani, na unda matawi kwa kazi yako mwenyewe pia. Uhifadhi wowote unaofanya utakuwa kwenye tawi ambalo umechagua "kuingia" kwa sasa. Tumia `git status` kuona ni tawi gani hilo. +> Kumbuka, kuwa mabadiliko unayotaka kuona duniani, na tengeneza matawi kwa kazi zako pia. Commiti yoyote utakayofanya itafanyika kwenye tawi ambalo umechagua kwa sasa. Tumia `git status` kuona ni tawi gani hilo. -Hebu tuendelee kupitia mtiririko wa mchango wa mchangiaji. Fikiria mchangiaji tayari ame _fork_ na _clone_ hifadhi hivyo ana hifadhi ya Git tayari kufanyiwa kazi, kwenye kompyuta yake ya ndani: +Tuangalie mtiririko wa mchangiaji. Thibitisha mchangiaji amefork na kukopa ghala hivyo ana Git repo tayari kufanyiwa kazi kwenye mashine yao ya ndani: -1. **Unda tawi**. Tumia amri `git branch` kuunda tawi ambalo litakuwa na mabadiliko wanayokusudia kuchangia: +1. **Tengeneza tawi**. Tumia amri `git branch` kutengeneza tawi litakalo kuwa na mabadiliko wanayokusudia kuchangia: ```bash git branch [branch-name] ``` - > 💡 **Njia ya Kisasa**: Unaweza pia kuunda na kubadili tawi jipya kwa amri moja: + > 💡 **Njia ya Kisasa**: Pia unaweza kuunda na kubadili tawi mpya kwa amri moja: ```bash git switch -c [branch-name] ``` -1. **Badilisha kwenye tawi la kazi**. Badilisha kwenye tawi lililobainishwa na usasishe saraka ya kazi kwa `git switch`: +1. **Badili kwa tawi la kazi**. Badilisha kwa tawi lililotajwa na sasisha saraka ya kazi kwa `git switch`: ```bash git switch [branch-name] ``` - > 💡 **Kumbuka ya Kisasa**: `git switch` ni mbadala wa kisasa wa `git checkout` wakati wa kubadilisha matawi. Ni wazi zaidi na salama kwa wanaoanza. + > 💡 **Kumbuka ya Kisasa**: `git switch` ni mbadala wa kisasa kwa `git checkout` wakati wa kubadilisha matawi. Ni wazi na salama zaidi kwa wanaoanza. -1. **Fanya kazi**. Kwa wakati huu unataka kuongeza mabadiliko yako. Usisahau kumwambia Git kuhusu hilo kwa amri zifuatazo: +1. **Fanya kazi**. Hapa unataka kuongeza mabadiliko yako. Usisahau kuambia Git kuhusu hili kwa amri zifuatazo: ```bash git add . git commit -m "my changes" ``` - > ⚠️ **Ubora wa Ujumbe wa Uhifadhi**: Hakikisha unatoa uhifadhi wako jina zuri, kwa ajili yako na kwa msimamizi wa hifadhi unayesaidia. Kuwa maalum kuhusu kile ulichobadilisha! + > ⚠️ **Ubora wa Ujumbe wa Commitment**: Hakikisha unampa commit jina zuri, kwa ajili yako na msimamizi wa ghala unayemsaidia. Kuwa mahususi kuhusu uliyobadilisha! -1. **Unganisha kazi yako na tawi la `main`**. Wakati fulani unamaliza kazi na unataka kuunganisha kazi yako na ile ya tawi la `main`. Tawi la `main` linaweza kuwa limebadilika wakati huo kwa hivyo hakikisha unalisasisha kwanza na amri zifuatazo: +1. **Changanya kazi yako na tawi `main`**. Hapo unamaliza kazi na unataka kuichanganya na tawi la `main`. Tawi la `main` linaweza kuwa limebadilika kwa sasa hivyo hakikisha una updates za hivi karibuni kwa amri zifuatazo: ```bash git switch main git pull ``` - Kwa wakati huu unataka kuhakikisha kwamba mizozo yoyote, hali ambapo Git haiwezi _kuunganisha_ mabadiliko kwa urahisi inatokea kwenye tawi lako la kazi. Kwa hivyo endesha amri zifuatazo: + Hapa unataka kuhakikisha hatari zozote za migongano (konflikti), hali ambapo Git hawezi kuunganisha kwa urahisi mabadiliko hutokea kwenye tawi lako la kazi. Kwa hiyo tumia amri zifuatazo: ```bash git switch [branch_name] git merge main ``` - Amri ya `git merge main` italeta mabadiliko yote kutoka `main` kwenye tawi lako. Tunatumaini unaweza tu kuendelea. Ikiwa sivyo, VS Code itakuonyesha wapi Git _imechanganyikiwa_ na unarekebisha faili zilizoathiriwa ili kusema ni maudhui gani yaliyo sahihi zaidi. + Amri `git merge main` italeta mabadiliko yote kutoka `main` kwenye tawi lako. Tunatumaini utaweza kuendelea tu. Ikiwa si hivyo, VS Code itakuambia Git imesumbuliwa wapi na utabadilisha faili zilizoathiriwa ili kusema ni maudhui gani ni sahihi zaidi. - 💡 **Njia mbadala ya kisasa**: Fikiria kutumia `git rebase` kwa historia safi zaidi: + 💡 **Mbadala wa Kisasa**: Fikiria kutumia `git rebase` kwa historia safi: ```bash git rebase main ``` - Hii inacheza tena uhifadhi wako juu ya tawi kuu la hivi karibuni, ikitengeneza historia ya mstari. + Hii huweka commits zako juu ya tawi la mwisho la main, kuunda historia ya mstari moja. -1. **Tuma kazi yako kwenye GitHub**. Kutuma kazi yako kwenye GitHub inamaanisha mambo mawili. Kusukuma tawi lako kwenye hifadhi yako na kisha kufungua PR, Ombi la Kuvuta. +1. **Tuma kazi yako GitHub**. Kutuma kazi yako GitHub kunamaanisha vitu viwili. Kusukuma tawi lako kwa ghala lako na kisha kufungua PR, Ombi la Pull. ```bash git push --set-upstream origin [branch-name] ``` - Amri hapo juu inaunda tawi kwenye hifadhi yako ya kufork. + Amri hapo juu hutengeneza tawi kwenye ghala lako la fork. + +### 🤝 **Ukaguzi wa Ujuzi wa Ushirikiano: Uko Tayari Kufanya Kazi na Wengine?** + +**Tuchunguze hali yako kuhusu ushirikiano:** +- Je, wazo la kufork na maombi ya pull request linaeleweka kwako sasa? +- Nini kimoja kuhusu kufanya kazi na matawi unayotaka kufanyia mazoezi zaidi? +- Je, unajisikia vizuri kiasi gani kuhusu kuchangia mradi wa mtu mwingine? + +```mermaid +mindmap + root((Ushirikiano wa Git)) + Branching + Mashami ya vipengele + Mashami ya marekebisho ya mdudu + Kazi za majaribio + Pull Requests + Mapitio ya msimbo + Majadiliano + Upimaji + Best Practices + Ujumbe wazi wa commit + Mabadiliko madogo yenye lengo + Nyaraka nzuri +``` +> **Kuimarisha Kujiamini**: Kila msanidi programu unayemheshimu alikuwa mshtuko kuhusu ombi lao la kwanza la pull request. Jamii ya GitHub ni ya kukaribisha sana kwa wanaoanza! -1. **Fungua PR**. Kisha, unataka kufungua PR. Unafanya hivyo kwa kwenda kwenye hifadhi ya kufork kwenye GitHub. Utaona dalili kwenye GitHub ambapo inauliza ikiwa unataka kuunda PR mpya, unabonyeza hiyo na unapelekwa kwenye kiolesura ambapo unaweza kubadilisha kichwa cha ujumbe wa uhifadhi, kutoa maelezo yanayofaa zaidi. Sasa msimamizi wa hifadhi uliyofork ataona PR hii na _vidole vimevukwa_ wataithamini na _kuunganisha_ PR yako. Sasa wewe ni mchangiaji, hongera :) +1. **Fungua PR**. Ifuatayo, unataka kufungua PR. Unafanya hivyo kwa kuingia kwenye ghala la fork kwenye GitHub. Utaona dalili GitHub inapouliza ikiwa unataka kutengeneza PR mpya, bonyeza hapo na utaelekezwa kwenye kiolesura ambapo unaweza kubadilisha kichwa cha ujumbe wa commit, kumpa maelezo mazuri zaidi. Sasa msimamizi wa ghala ulichofork atatazama PR hii na _tumia vidole wako kuombea_ watathamini na _kuunganisha_ PR yako. Sasa wewe ni mchangiaji, poa :) - 💡 **Kidokezo cha Kisasa**: Unaweza pia kuunda PRs kwa kutumia GitHub CLI: + 💡 **Ushauri wa Kisasa**: Pia unaweza kutengeneza PR kwa kutumia GitHub CLI: ```bash gh pr create --title "Your PR title" --body "Description of changes" ``` - 🔧 **Mazoea bora kwa PRs**: - - Unganisha masuala yanayohusiana kwa kutumia maneno kama "Fixes #123" - - Ongeza picha za skrini kwa mabadiliko ya UI + 🔧 **Mazingira Bora kwa PRs**: + - Unganisha na matatizo yanayohusiana kwa kutumia maneno muhimu kama "Fixes #123" + - Ongeza picha za mabadiliko ya UI - Omba wakaguzi maalum - Tumia PR za rasimu kwa kazi inayofanyika - - Hakikisha ukaguzi wote wa CI unakamilika kabla ya kuomba ukaguzi - -1. **Safisha**. Inachukuliwa kuwa mazoea mazuri _kusafisha_ baada ya kufanikiwa kuunganisha PR. Unataka kusafisha tawi lako la ndani na tawi ulilosukuma kwenye GitHub. Kwanza hebu tulifute kwa ndani kwa amri ifuatayo: + - Hakikisha lahatheka za CI zimepitwa kabla ya kuomba ukaguzi +1. **Safisha**. Inachukuliwa kuwa mbinu nzuri kusafisha _baada ya kuunganisha PR kwa mafanikio_. Unataka kusafisha tawi lako la eneo la kazi pamoja na tawi ulilotuma kwenye GitHub. Kwanza tuifute eneo la kazi kwa amri ifuatayo: ```bash git branch -d [branch-name] ``` - Hakikisha unakwenda kwenye ukurasa wa GitHub wa hifadhi ya kufork na kuondoa tawi la mbali ulilosukuma kwake. - -`Pull request` inaonekana kama neno la kijinga kwa sababu kwa kweli unataka kusukuma mabadiliko yako kwenye mradi. Lakini msimamizi (mmiliki wa mradi) au timu kuu inahitaji kuzingatia mabadiliko yako kabla ya kuunganisha na tawi "kuu" la mradi, kwa hivyo kwa kweli unaomba uamuzi wa mabadiliko kutoka kwa msimamizi. + Hakikisha unaenda kwenye ukurasa wa GitHub wa repo lililochakuliwa kisha uondoe tawi la mbali ulilotuma hapo. -Ombi la kuvuta ni mahali pa kulinganisha na kujadili tofauti zilizoletwa kwenye tawi na ukaguzi, maoni, majaribio yaliyojumuishwa, na zaidi. Ombi zuri la kuvuta linafuata takriban sheria sawa na ujumbe wa uhifadhi. Unaweza kuongeza rejeleo kwa suala kwenye ufuatiliaji wa masuala, wakati kazi yako kwa mfano inarekebisha suala. Hii inafanywa kwa kutumia `#` ikifuatiwa na namba ya suala lako. Kwa mfano `#97`. -🤞Vidole vimevukwa kwamba ukaguzi wote utapita na mmiliki wa mradi ataunganisha mabadiliko yako kwenye mradi🤞 +`Pull request` inaonekana kama neno la kuchekesha kwa sababu kweli unataka kusukuma mabadiliko yako kwenye mradi. Lakini mtunzaji (mwenye mradi) au timu kuu wanahitaji kuzingatia mabadiliko yako kabla ya kuziunganisha na tawi "kuu" la mradi, kwa hivyo kwa kweli unamuomba mtunzaji kufikiria mabadiliko. -Sasisha tawi lako la kazi la ndani na mabadiliko yote mapya kutoka kwenye tawi la mbali linalolingana kwenye GitHub: +Pull request ni mahali pa kulinganisha na kujadili tofauti zilizojumuishwa kwenye tawi kwa kupitia mapitio, maoni, mitihani iliyojumuishwa, na mengineyo. Pull request nzuri hufuata kanuni kama zile za ujumbe wa commit. Unaweza kuongeza rejeleo kwa tatizo kwenye msimami wa masuala, kwa mfano kazi yako ikiweka tatizo fulani. Hii hufanywa kwa kutumia `#` ikifuatiwa na nambari ya tatizo lako. Kwa mfano `#97`. -`git pull` - -## Kuchangia kwa Open Source (Fursa Yako ya Kuleta Mabadiliko!) - -Je, uko tayari kwa kitu ambacho kitakushangaza kabisa? 🤯 Hebu tuzungumze kuhusu kuchangia kwenye miradi ya open source – na ninapata msisimko tu kufikiria kushiriki hili nawe! +🤞Mikotoko mikwinyo kwamba ukaguzi wote utapita na mmiliki wa mradi ataunganisha mabadiliko yako kwenye mradi🤞 -Hii ni fursa yako ya kuwa sehemu ya kitu cha kipekee sana. Fikiria kuboresha zana ambazo mamilioni ya watengenezaji hutumia kila siku, au kurekebisha hitilafu kwenye programu ambayo marafiki zako wanapenda. Hiyo si ndoto tu – hiyo ndiyo maana ya kuchangia kwenye open source! +Sasisha tawi lako la sasa la eneo la kazi kwa commits zote mpya kutoka kwenye tawi la mbali linalolingana kwenye GitHub: -Hiki ndicho kinachonipa msisimko kila ninapofikiria: kila zana moja uliyojifunza nayo – mhariri wako wa msimbo, mifumo tutakayoichunguza, hata kivinjari unachosoma hiki ndani – ilianza na mtu kama wewe akifanya mchango wake wa kwanza. Yule mtengenezaji mahiri aliyeunda kiendelezi unachopenda cha VS Code? Wakati mmoja walikuwa mwanzilishi akibonyeza "create pull request" kwa mikono inayotetemeka, kama vile unavyotarajia kufanya. - -Na hapa ndipo sehemu nzuri zaidi: jamii ya open source ni kama kukumbatiana kwa pamoja kwa mtandao. Miradi mingi hutafuta kwa bidii wanaoanza na ina masuala yaliyopewa alama "good first issue" mahsusi kwa watu kama wewe! Walezi wa miradi wanapendezwa sana wanapoona wachangiaji wapya kwa sababu wanakumbuka hatua zao za kwanza. +`git pull` -Hujifunzi tu kuandika msimbo hapa – unajiandaa kujiunga na familia ya kimataifa ya wajenzi wanaoamka kila siku wakifikiria "Tunawezaje kuboresha ulimwengu wa kidijitali kidogo zaidi?" Karibu kwenye klabu! 🌟 +## Kuchangia Chanzo Huria (Fursa Yako Kuleta Mbadala!) + +Je, uko tayari kwa jambo litakalokuangua akili kabisa? 🤯 Tujadili kuchangia miradi ya chanzo huria – na ninapata vipu vya gandu kwa kufikiri kuhusu kushiriki hili nawe! + +Hii ni fursa yako ya kuwa sehemu ya jambo la kipekee kabisa. Fikiria kuboresha zana ambazo mamilioni ya watengenezaji hutumia kila siku, au kurekebisha hitilafu katika programu ambayo marafiki zako wanapenda. Hii si ndoto tu – ndiyo maana ya mchango wa chanzo huria! + +Hapa ndiyo kinachonipa uoga kila mara ninapofikiri juu yake: kila zana ulicyojifunza nayo – mhariri wako wa maandishi, mifumo tutakayotafuta, hata kivinjari unachosoma hii – ilianza na mtu kama wewe akifanya mchango wake wa kwanza kabisa. Mtaalamu huyu mzuri aliyeunda kifungu chako unachopenda cha VS Code? Hawa walikuwa mwanzo wakibonyeza "create pull request" kwa mikono tete, kama unavyotarajia sasa. + +Na sehemu nzuri zaidi ni hii: jamii ya chanzo huria ni kama kifuata nyoyo kikubwa cha mtandao. Miradi mingi inatafuta wapya na ina masuala yaliyoandikwa "good first issue" hasa kwa watu kama wewe! Watunzaji wanafurahi kweli wanapomuona mchango mpya kwa sababu wanakumbuka hatua zao za mwanzo. + +```mermaid +flowchart TD + A[🔍 Chunguza GitHub] --> B[🏷️ Tafuta "tatizo nzuri la kwanza"] + B --> C[📖 Soma Miongozo ya Kuchangia] + C --> D[🍴 Ficha Hifadhi] + D --> E[💻 Tengeneza Mazingira ya Ndani] + E --> F[🌿 Unda Tawi la Kipengele] + F --> G[✨ Fanya Mchango Wako] + G --> H[🧪 Jaribu Mabadiliko Yako] + H --> I[📝 Andika Kiapo Kifafikacho] + I --> J[📤 Sogeza & Unda PR] + J --> K[💬 Shirikiana na Maoni] + K --> L[🎉 Imeunganishwa! Wewe ni Mchangiaji!] + L --> M[🌟 Tafuta Tatizo Lijalo] + + style A fill:#e1f5fe + style L fill:#c8e6c9 + style M fill:#fff59d +``` +Hapa, humjifunzi tu kuandika msimbo – unajiandaa kujiunga na familia ya wamiliki wa miradi duniani kote ambao huamka kila siku wakiuliza "Je, tunawezaje kuboresha kidogo dunia ya kidijitali?" Karibu kwenye klabu! 🌟 -Kwanza, hebu tupate hifadhi (au **repo**) kwenye GitHub inayokuvutia na ambayo ungependa kuchangia mabadiliko. Utataka kunakili yaliyomo kwenye mashine yako. +Kwanza, tukutafute hifadhidata (au **repo**) kwenye GitHub inayokuvutia na unayotaka kuchangia mabadiliko. Utataka kuiga yaliyomo kwenye mashine yako. -✅ Njia nzuri ya kupata hifadhi zinazofaa kwa wanaoanza ni [kutafuta kwa alama 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). +✅ Njia nzuri ya kupata repozitori zinazofaa wanaoanza ni [kutafuta kwa alama 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Nakili hifadhi kwa ndani](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.sw.png) +![Nakili repo kiasili](../../../../translated_images/clone_repo.5085c48d666ead57.sw.png) -Kuna njia kadhaa za kunakili msimbo. Njia moja ni "kuiga" yaliyomo ya hifadhi, kwa kutumia HTTPS, SSH, au kutumia GitHub CLI (Command Line Interface). +Kuna njia kadhaa za kunakili msimbo. Njia moja ni "clone" yaliyomo kwenye hifadhidata, ukitumia HTTPS, SSH, au CLI ya GitHub (Kiolesura cha Amri). -Fungua terminal yako na iga hifadhi kama hivi: +Fungua terminal yako na kloni hifadhidata kama ifuatavyo: ```bash -# Using HTTPS +# Kutumia HTTPS git clone https://github.com/ProjectURL -# Using SSH (requires SSH key setup) +# Kutumia SSH (inahitaji usanidi wa ufunguo wa SSH) git clone git@github.com:username/repository.git -# Using GitHub CLI +# Kutumia GitHub CLI gh repo clone username/repository ``` -Ili kufanya kazi kwenye mradi, nenda kwenye folda sahihi: +Ili kufanyia kazi mradi, badilisha kwenda folda sahihi: `cd ProjectURL` -Unaweza pia kufungua mradi mzima kwa kutumia: -- **[GitHub Codespaces](https://github.com/features/codespaces)** - Mazingira ya maendeleo ya wingu ya GitHub na VS Code kwenye kivinjari -- **[GitHub Desktop](https://desktop.github.com/)** - Programu ya GUI kwa operesheni za Git -- **[GitHub.dev](https://github.dev)** - Bonyeza kitufe cha `.` kwenye hifadhi yoyote ya GitHub kufungua VS Code kwenye kivinjari -- **VS Code** na kiendelezi cha GitHub Pull Requests +Unaweza pia kufungua mradi wote kwa kutumia: +- **[GitHub Codespaces](https://github.com/features/codespaces)** - Mazingira ya maendeleo ya mawingu ya GitHub na VS Code kwenye kivinjari +- **[GitHub Desktop](https://desktop.github.com/)** - Programu ya GUI kwa shughuli za Git +- **[GitHub.dev](https://github.dev)** - Bonyeza kitufe `.` kwenye repo yoyote ya GitHub kufungua VS Code kwenye kivinjari +- VS Code na ugani wa GitHub Pull Requests -Mwisho, unaweza kupakua msimbo kwenye folda iliyobanwa. +Mwisho, unaweza kupakua msimbo kwenye folda imefungwa kwa zipu. -### Mambo machache ya kuvutia kuhusu GitHub +### Mambo mengine ya kuvutia kuhusu GitHub -Unaweza kuweka nyota, kutazama na/au "fork" hifadhi yoyote ya umma kwenye GitHub. Unaweza kupata hifadhi zako zilizowekewa nyota kwenye menyu ya kushuka ya juu-kulia. Ni kama kuweka alama ya kurasa, lakini kwa msimbo. +Unaweza kutoa nyota, kuangalia au "fork" hifadhidata yoyote ya umma kwenye GitHub. Unaweza kupata hifadhidata ulizoweka nyota kwenye menyu ya juu-kulia yenye menyu kunjuzi (drop-down). Ni kama kuweka kitambulisho cha kurudi, lakini kwa msimbo. -Miradi ina kifuatilia masuala, mara nyingi kwenye GitHub katika kichupo cha "Issues" isipokuwa imeonyeshwa vinginevyo, ambapo watu hujadili masuala yanayohusiana na mradi. Na kichupo cha Pull Requests ni mahali ambapo watu hujadili na kukagua mabadiliko yanayoendelea. +Miradi ina msimami wa masuala, kimsingi kwenye GitHub kwenye kichupo cha "Issues" isipokuwa kama imedhabitiwa vinginevyo, ambapo watu hujadili masuala yanayohusiana na mradi. Na kichupo cha Pull Requests ndicho ambacho watu hujadili na kupitia mabadiliko yanayoendelea. -Miradi inaweza pia kuwa na majadiliano katika vikao, orodha za barua pepe, au njia za mazungumzo kama Slack, Discord au IRC. +Miradi inaweza pia kuwa na mijadala kwenye majukwaa, orodha za barua pepe, au kwenye chaneli za mazungumzo kama Slack, Discord au IRC. 🔧 **Vipengele vya kisasa vya GitHub**: -- **GitHub Discussions** - Jukwaa la mazungumzo ya jamii lililojengwa ndani -- **GitHub Sponsors** - Kusaidia walezi kifedha -- **Kichupo cha Usalama** - Ripoti za udhaifu na ushauri wa usalama -- **Kichupo cha Actions** - Tazama mtiririko wa kazi otomatiki na CI/CD -- **Kichupo cha Insights** - Takwimu kuhusu wachangiaji, ahadi, na afya ya mradi -- **Kichupo cha Projects** - Zana za usimamizi wa miradi zilizojengwa ndani ya GitHub +- **GitHub Discussions** - Jukwaa lililojengwa kwa mazungumzo ya jamii +- **GitHub Sponsors** - Msaada wa kifedha kwa watunzaji +- **Kichupo cha Usalama** - Ripoti za uwazi wa usalama na viambatanisho vya usalama +- **Kichupo cha Actions** - Tazama mikondo ya kazi ya moja kwa moja na mizunguko ya CI/CD +- **Kichupo cha Insights** - Takwimu kuhusu wachangiaji, commits, na afya ya mradi +- **Kichupo cha Projects** - Zana za usimamizi wa miradi zilizo ndani ya GitHub -✅ Angalia hifadhi yako mpya ya GitHub na jaribu mambo kadhaa, kama kuhariri mipangilio, kuongeza taarifa kwenye hifadhi yako, kuunda mradi (kama bodi ya Kanban), na kuweka GitHub Actions kwa otomatiki. Kuna mengi unaweza kufanya! +✅ Tazama hifadhidata yako mpya ya GitHub na jaribu mambo machache, kama kuhariri mipangilio, kuongeza taarifa kwenye repo, kuanzisha mradi (kama bodi ya Kanban), na kusanidi GitHub Actions kwa ajili ya automatisering. Kuna mengi unayoweza kufanya! --- -## 🚀 Changamoto +## 🚀 Changamoto -Sawa, ni wakati wa kujaribu nguvu zako mpya za GitHub! 🚀 Hapa kuna changamoto itakayokufanya uelewe kila kitu kwa njia ya kuridhisha zaidi: +Sawa, ni wakati wa kujaribu nguvu zako mpya za GitHub! 🚀 Hapa kuna changamoto itakayofanya kila kitu kifanye kazi kwa njia ya kusisimua: -Chukua rafiki (au yule mwanafamilia ambaye kila mara huuliza unafanya nini na "vitu vyote vya kompyuta" hivi) na anza safari ya pamoja ya kuandika msimbo! Hapa ndipo uchawi halisi hutokea – unda mradi, wacha waifork, tengeneza matawi kadhaa, na unganisha mabadiliko kama wataalamu mnaokuwa. +Chukua rafiki (au mwanafamilia aliyejikuta siku zote akiuliza unafanya nini na mambo yote haya ya "kompyuta") na uanze ushirikiano wa kuandika msimbo pamoja! Hapa ndipo maajabu halisi yanapotokea – tengeneza mradi, waruhusu wafanye fork, tengeneza matawi, na unganisha mabadiliko kama wataalamu mnavyokuwa. -Sitakuficha – labda mtacheka wakati fulani (hasa mnapojaribu kubadilisha mstari mmoja), labda mtashangaa kidogo, lakini hakika mtakuwa na nyakati za "aha!" za kushangaza zinazofanya kujifunza yote kuwa na thamani. Zaidi ya hayo, kuna kitu maalum kuhusu kushiriki muunganiko wa kwanza uliofanikiwa na mtu mwingine – ni kama sherehe ndogo ya jinsi mlivyofika mbali! +Sitakuficha – labda mtacheka wakati fulani (hasa mnapojaribu kubadilisha mstari uleule), labda mtaweza kubweta kichwa kwa kuchanganyikiwa, lakini hakika mtapata wakati mzuri wa "aha!" ambao hufanya mafunzo yote kuwa ya thamani. Zaidi, kuna jambo zuri la kushiriki kuunganishwa kwako kwa mara ya kwanza kwa mtu mwingine – ni kama sherehe ndogo ya mafanikio yako! -Huna rafiki wa kuandika msimbo bado? Usijali kabisa! Jamii ya GitHub imejaa watu wenye ukarimu sana wanaokumbuka jinsi ilivyokuwa kuwa mpya. Tafuta hifadhi zilizo na lebo za "good first issue" – kimsingi zinasema "Hey wanaoanza, njoo mjifunze nasi!" Hiyo ni ya kushangaza kiasi gani? +Huna bado rafiki wa kuandika msimbo? Usijali kabisa! Jamii ya GitHub imejaa watu wenye ukarimu ambao wanakumbuka kile cha kuwa wapya. Tafuta hifadhidata zilizo na lebo ya "good first issue" – ni kiasili kusema "Hey waliani, njoo ujifunze nasi!" Hiyo ni nzuri kiasi gani? -## Jaribio la Baada ya Somo -[Jaribio la baada ya somo](https://ff-quizzes.netlify.app/web/en/) +## Mtihani Baada ya Kozi +[Mtihani baada ya kozi](https://ff-quizzes.netlify.app/web/en/) -## Mapitio & Endelea Kujifunza +## Kagua & Endelea Kujifunza -Phew! 🎉 Tazama wewe – umeshinda misingi ya GitHub kama bingwa halisi! Ikiwa ubongo wako unahisi umejaa kidogo sasa, hiyo ni kawaida kabisa na kwa kweli ni ishara nzuri. Umejifunza zana ambazo zilinichukua wiki kujisikia vizuri nazo nilipoanza. +Haa! 🎉 Tazama wewe – umemaliza misingi ya GitHub kama bingwa wa kweli! Ikiwa akili yako inahisi imejaa sasa hivi, hiyo ni kawaida kabisa na ni dalili nzuri. Umejifunza zana ambazo zilinichukua wiki kadhaa kupata uhakika nikiwa mwanzo. -Git na GitHub ni zana zenye nguvu sana (kama, nguvu sana), na kila mtengenezaji ninayemjua – ikiwa ni pamoja na wale wanaoonekana kama wachawi sasa – walilazimika kufanya mazoezi na kujikwaa kidogo kabla ya kila kitu kuingia akilini. Ukweli kwamba umemaliza somo hili ina maana tayari uko njiani kuelekea kufahamu baadhi ya zana muhimu zaidi katika mkoba wa zana wa mtengenezaji. +Git na GitHub ni zana zenye nguvu sana (kwa kweli sana), na kila mtaalamu ninayemjua – ikiwemo wale wanaonekana kama wachawi sasa – walilazimika kuzoezana na kushindwa kidogo kabla ya kuelewa vyema. Ukweli kwamba umefikia somo hili una maana tayari uko njiani kumudu baadhi ya zana muhimu zaidi katika kifaa cha msanidi programu. -Hapa kuna rasilimali za kushangaza kabisa zitakazokusaidia kufanya mazoezi na kuwa bora zaidi: +Hapa kuna rasilimali bora kabisa kukusaidia kufanya mazoezi na kuwa bora zaidi: -- [Mwongozo wa kuchangia kwa programu ya open source](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – Ramani yako ya kuleta mabadiliko -- [Karatasi ya mkato ya Git](https://training.github.com/downloads/github-git-cheat-sheet/) – Weka hii karibu kwa marejeleo ya haraka! +- [Mwongozo wa kuchangia programu za chanzo huria](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – Ramani yako ya njia ya kuleta mabadiliko +- [Karatasi ya mbinu za Git](https://training.github.com/downloads/github-git-cheat-sheet/) – Ibe tayari kwa marejeo ya haraka! -Na kumbuka: mazoezi huleta maendeleo, si ukamilifu! Kadri unavyotumia Git na GitHub, ndivyo inavyokuwa ya kawaida zaidi. GitHub imeunda kozi za maingiliano za kushangaza zinazokuruhusu kufanya mazoezi katika mazingira salama: +Na kumbuka: mazoezi hufanya maendeleo, si ukamilifu! Kadri unavyotumia Git na GitHub, ndivyo inavyokuwa za kawaida. GitHub imeandaa kozi za maingiliano zinazokuza mazoezi katika mazingira salama: - [Utangulizi wa GitHub](https://github.com/skills/introduction-to-github) -- [Wasiliana kwa kutumia Markdown](https://github.com/skills/communicate-using-markdown) +- [Wasiliana kutumia Markdown](https://github.com/skills/communicate-using-markdown) - [Kurasa za GitHub](https://github.com/skills/github-pages) - [Kusimamia migogoro ya muunganiko](https://github.com/skills/resolve-merge-conflicts) -**Unahisi kuwa na ujasiri? Angalia zana hizi za kisasa:** -- [Nyaraka za GitHub CLI](https://cli.github.com/manual/) – Kwa wakati unataka kujisikia kama mchawi wa mstari wa amri -- [Nyaraka za GitHub Codespaces](https://docs.github.com/en/codespaces) – Andika msimbo kwenye wingu! -- [Nyaraka za GitHub Actions](https://docs.github.com/en/actions) – Otematiki kila kitu -- [Mazoea bora ya Git](https://www.atlassian.com/git/tutorials/comparing-workflows) – Pandisha kiwango cha mtiririko wako wa kazi +**Unahisi ujasiri? Tazama zana hizi za kisasa:** +- [Nyaraka za GitHub CLI](https://cli.github.com/manual/) – Kwa wakati unataka kuhisi kama mtaalamu wa amri za mstari +- [Nyaraka za GitHub Codespaces](https://docs.github.com/en/codespaces) – Andika msimbo kwenye mawingu! +- [Nyaraka za GitHub Actions](https://docs.github.com/en/actions) – Fanya kila jambo kiotomatiki +- [Mazoezi bora ya Git](https://www.atlassian.com/git/tutorials/comparing-workflows) – Pandisha kiwango chako cha mtiririko wa kazi + +## Changamoto ya GitHub Copilot Agent 🚀 -## Changamoto ya Wakala wa GitHub Copilot 🚀 +Tumia hali ya Agent kukamilisha changamoto ifuatayo: -Tumia hali ya Wakala kukamilisha changamoto ifuatayo: +**Maelezo:** Tengeneza mradi wa ushirikiano wa maendeleo ya wavuti unaoonyesha mchakato kamili wa GitHub uliyojifunza katika somo hili. Changamoto hii itakusaidia kufanya mazoezi ya uundaji wa hifadhidata, vipengele vya ushirikiano, na miongozo ya kisasa ya Git katika mazingira halisi. -**Maelezo:** Unda mradi wa maendeleo ya wavuti wa kushirikiana unaoonyesha mtiririko kamili wa GitHub uliyojifunza katika somo hili. Changamoto hii itakusaidia kufanya mazoezi ya uundaji wa hifadhi, vipengele vya ushirikiano, na mtiririko wa kazi wa Git wa kisasa katika hali halisi. +**Onyo:** Unda hifadhidata mpya ya umma ya GitHub kwa mradi rahisi wa "Rasilimali za Maendeleo ya Wavuti". Hifadhidata ipaswa kuwa na faili la README.md lililoandikwa vizuri linaloorodhesha zana na rasilimali muhimu za maendeleo ya wavuti, zikiainishwa kwa makundi (HTML, CSS, JavaScript, n.k.). Sanidi hifadhidata kwa viwango vya jamii ikijumuisha leseni, miongozo ya kuchangia, na msimbo wa maadili. Unda matawi mawili ya vipengele: moja kwa kuongezea rasilimali za CSS na jingine kwa rasilimali za JavaScript. Fanya commits kwenye kila tawi zikiwa na ujumbe wa commit unaoelezea, kisha tengeneza pull requests kuunganisha mabadiliko kwenye tawi kuu. Washa vipengele vya GitHub kama Issues, Discussions, na sanidi mtiririko rahisi wa GitHub Actions kwa ukaguzi wa moja kwa moja. -**Kichocheo:** Unda hifadhi mpya ya umma ya GitHub kwa mradi rahisi wa "Rasilimali za Maendeleo ya Wavuti". Hifadhi inapaswa kujumuisha faili ya README.md iliyopangwa vizuri inayoorodhesha zana na rasilimali muhimu za maendeleo ya wavuti, zilizopangwa kwa kategoria (HTML, CSS, JavaScript, nk). Weka hifadhi na viwango sahihi vya jamii ikiwa ni pamoja na leseni, miongozo ya kuchangia, na kanuni za maadili. Unda angalau matawi mawili ya vipengele: moja kwa kuongeza rasilimali za CSS na nyingine kwa rasilimali za JavaScript. Fanya ahadi kwa kila tawi na ujumbe wa ahadi unaoelezea, kisha unda maombi ya muunganiko ili kuunganisha mabadiliko kurudi kwenye tawi kuu. Washa vipengele vya GitHub kama Masuala, Majadiliano, na weka mtiririko wa kazi wa GitHub Actions wa ukaguzi wa otomatiki. +## Kazi -## Kazi +Dhamira yako, endapo utakubali: Kamilisha kozi ya [Utangulizi wa GitHub](https://github.com/skills/introduction-to-github) kwenye GitHub Skills. Kozi hii ya maingiliano itakuwezesha kutekeleza yote uliyojifunza katika mazingira salama na yaliyoongozwa. Zaidi, utapata beji nzuri ukimaliza! 🏅 -Dhamira yako, ikiwa utaamua kuikubali: Kamilisha kozi ya [Utangulizi wa GitHub](https://github.com/skills/introduction-to-github) kwenye Ujuzi wa GitHub. Kozi hii ya maingiliano itakuruhusu kufanya mazoezi ya kila kitu ulichojifunza katika mazingira salama, yanayoongozwa. Zaidi ya hayo, utapata beji nzuri unapomaliza! 🏅 +**Una hisia ya changamoto zaidi?** +- Sanidi uthibitishaji wa SSH kwa akaunti yako ya GitHub (hakuna tena nywila!) +- Jaribu kutumia GitHub CLI kwa shughuli zako za kila siku za Git +- Unda hifadhidata na mtiririko wa kazi wa GitHub Actions +- Chunguza GitHub Codespaces kwa kufungua hifadhidata hii kama mhariri wa mawingu -**Unahisi kuwa tayari kwa changamoto zaidi?** -- Weka uthibitisho wa SSH kwa akaunti yako ya GitHub (hakuna nywila tena!) -- Jaribu kutumia GitHub CLI kwa operesheni zako za kila siku za Git -- Unda hifadhi yenye mtiririko wa kazi wa GitHub Actions -- Chunguza GitHub Codespaces kwa kufungua hifadhi hii katika mhariri wa wingu +--- + +## 🚀 Ratiba Yako ya Uwezo wa GitHub + +### ⚡ **Unachoweza Kufanya Katika Dakika 5 Zijazo** +- [ ] Toa nyota kwa hifadhidata hii na miradi mingine 3 inayokuvutia +- [ ] Sanidi uthibitishaji wa vipengele viwili kwenye akaunti yako ya GitHub +- [ ] Unda README rahisi kwa hifadhidata yako ya kwanza +- [ ] Fuata watengenezaji 5 wanaokutia moyo + +### 🎯 **Unachoweza Kufanikisha Saa Hii** +- [ ] Kamilisha mtihani baada ya kozi na fikiria juu ya safari yako ya GitHub +- [ ] Sanidi funguo za SSH kwa uthibitishaji bila nywila GitHub +- [ ] Tengeneza commit yako ya maana ya kwanza na ujumbe mzuri wa commit +- [ ] Chunguza kichupo cha "Explore" cha GitHub kugundua miradi maarufu +- [ ] Fanya mazoezi ya kuchukua fork ya hifadhidata na kufanya mabadiliko madogo + +### 📅 **Safari Yako ya GitHub ya Wiki Mmoja** +- [ ] Kamilisha kozi za GitHub Skills (Utangulizi wa GitHub, Markdown) +- [ ] Fanya pull request yako ya kwanza kwenye mradi wa chanzo huria +- [ ] Sanidi tovuti ya GitHub Pages kuonyesha kazi yako +- [ ] Jiunge na majadiliano ya GitHub kwenye miradi unayovutiwa nayo +- [ ] Unda hifadhidata yenye viwango vya jamii vinavyostahili (README, Leseni, n.k.) +- [ ] Jaribu GitHub Codespaces kwa maendeleo ya mawingu + +### 🌟 **Mabadiliko Yako ya Mwezi Mmoja** +- [ ] Changia kwenye miradi 3 mbalimbali ya chanzo huria +- [ ] Saidia mtu mpya kuingia GitHub (lipia mbele!) +- [ ] Sanidi mikondo otomatiki kwa GitHub Actions +- [ ] Tengeneza wavuti ya maonyesho ya michango yako ya GitHub +- [ ] Shiriki kwenye Hacktoberfest au matukio mengine ya jamii +- [ ] Kuwa mtunzaji wa mradi wako mwenyewe ambapo wengine wanachangia + +### 🎓 **Ukaguzi wa Mwisho wa Uwezo wa GitHub** + +**Sherehekea mafanikio yako:** +- Nini kipengele unachokipenda zaidi kuhusu kutumia GitHub? +- Ni kipengele gani cha ushirikiano kinachokufanya ufurahie zaidi? +- Je, unahisije kuhusu kuchangia chanzo huria sasa? +- Ni mradi gani wa kwanza ungependa kuchangia? + +```mermaid +journey + title Safari Yako ya Kujiamini GitHub + section Leo + Nervous: 3: You + Curious: 4: You + Excited: 5: You + section Wiki Hii + Practicing: 4: You + Contributing: 5: You + Connecting: 5: You + section Mwezi Ujao + Collaborating: 5: You + Leading: 5: You + Inspiring Others: 5: You +``` +> 🌍 **Karibu kwenye jamii ya wamiliki wa mradi wa kimataifa!** Sasa una zana za kushirikiana na mamilioni ya wamiliki wa mradi duniani kote. Mchango wako wa kwanza unaweza kuonekana mdogo, lakini kumbuka - kila mradi mkubwa wa chanzo huria ulianza na mtu aliyefanya commit yake ya kwanza kabisa. Suwali sio kama utaathiri, bali ni mradi upi mzuri utafaidika na mtazamo wako wa kipekee kwanza! 🚀 -Kumbuka: kila mtaalamu alikuwa mwanzilishi. Unaweza kufanya hili! 💪 +Kumbuka: kila mtaalamu alikuwa mwanzo. Unaweza! 💪 --- -**Kanusho**: -Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii. \ No newline at end of file + +**Ugawaji wa Majukumu**: +Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI [Co-op Translator](https://github.com/Azure/co-op-translator). Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za moja kwa moja zinaweza kuwa na makosa au upungufu wa usahihi. Hati asilia katika lugha yake ya asili inapaswa kuchukuliwa kama chanzo cha kuaminika. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatubeba jukumu lolote kwa makosa au tafsiri potofu zinazoweza kutokana na matumizi ya tafsiri hii. + \ No newline at end of file diff --git a/translations/sw/1-getting-started-lessons/3-accessibility/README.md b/translations/sw/1-getting-started-lessons/3-accessibility/README.md index 140c00b55..1a12b1dc9 100644 --- a/translations/sw/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/sw/1-getting-started-lessons/3-accessibility/README.md @@ -1,207 +1,324 @@ -# Kuunda Kurasa za Wavuti Zinazoweza Kufikiwa +# Kuunda Kurasa za Wavuti Zenye Ufikiaji Rahisi -![Yote Kuhusu Ufikiaji](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.sw.png) +![Yote Kuhusu Ufikiaji Rahisi](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.sw.png) > Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac) -## Maswali ya Awali ya Somo -[Maswali ya awali ya somo](https://ff-quizzes.netlify.app/web/) +```mermaid +journey + title Safari Yako ya Kujifunza Ufikiaji + section Msingi + Kuelewa Watumiaji: 5: You + Zana za Kupima: 4: You + Kanuni za POUR: 5: You + section Jenga Ujuzi + HTML ya Semantiki: 4: You + Ubunifu wa Kuona: 5: You + Mbinu za ARIA: 4: You + section Mazoezi ya Mtaalam + Urambazaji wa Kibodi: 5: You + Ufikiaji wa Fomu: 4: You + Upimaji wa Duniani: 5: You +``` +## Mtihani wa Kabla ya Mwaliko +[Mtihani wa kabla ya mwaliko](https://ff-quizzes.netlify.app/web/) -> Nguvu ya Wavuti iko katika ulimwengu wake. Ufikiaji kwa kila mtu bila kujali ulemavu ni kipengele muhimu. +> Nguvu ya Wavuti iko katika ulimwengu wake wote. Upatikanaji kwa kila mtu bila kujali ulemavu ni kipengele muhimu. > -> \- Sir Timothy Berners-Lee, Mkurugenzi wa W3C na mvumbuzi wa Wavuti ya Ulimwenguni +> \- Sir Timothy Berners-Lee, Mkurugenzi wa W3C na mvumbuzi wa World Wide Web -Hili linaweza kukushangaza: unapojenga tovuti zinazoweza kufikiwa, hauwasaidii tu watu wenye ulemavu—unafanya wavuti kuwa bora kwa kila mtu! +Hapa kuna kitu ambacho kinaweza kukushangaza: unapounda tovuti zinazopatikana kwa wote, hutawasaidia tu watu wenye ulemavu—bali unafanya wavuti kuwa bora kwa kila mtu! -Je, umewahi kuona zile sehemu za kupanda kwenye pembe za barabara? Zilikuwa zimetengenezwa awali kwa ajili ya viti vya magurudumu, lakini sasa zinasaidia watu wenye mikokoteni ya watoto, wafanyakazi wa usafirishaji wenye mikokoteni, wasafiri wenye mizigo inayovutwa, na hata waendesha baiskeli. Hivyo ndivyo muundo wa wavuti unaoweza kufikiwa unavyofanya kazi—suluhisho zinazosaidia kikundi kimoja mara nyingi huishia kufaidisha kila mtu. Inapendeza, sivyo? +Je, umewahi kuona zile mionyo ya mtaa kwenye pembe za barabara? Awali zilikuwa zimetengenezwa kwa ajili ya viti vya magurudumu, lakini sasa zinawasaidia watu wenye strollers, wafanyakazi wa usambazaji wa mizigo, wasafiri wenye vali zenye magurudumu, na pia wanaume wa baiskeli. Hivyo ndizo funguo za usanifu wa wavuti za kupata ufikiaji rahisi—madhubuti yanayowasaidia kundi moja mara nyingi hufaidi kila mtu. Hilo si wazo zuri kabisa? -Katika somo hili, tutachunguza jinsi ya kuunda tovuti zinazofanya kazi kwa kila mtu, bila kujali jinsi wanavyotumia wavuti. Utajifunza mbinu za vitendo ambazo tayari zimejumuishwa katika viwango vya wavuti, utajaribu zana za kupima, na utaona jinsi ufikiaji unavyofanya tovuti zako kuwa rahisi kutumia kwa watumiaji wote. +Katika somo hili, tutachunguza jinsi ya kuunda tovuti ambazo kweli zinafanya kazi kwa kila mtu, bila kujali wanavyotembelea wavuti. Utagundua mbinu za vitendo ambazo tayari zimejengwa ndani ya viwango vya wavuti, utajifunza kutumia zana za upimaji, na utaona jinsi ufikiaji rahisi unavyofanya tovuti zako zifae kutumika kwa watumiaji wote. -Mwisho wa somo hili, utakuwa na ujasiri wa kufanya ufikiaji kuwa sehemu ya kawaida ya mtiririko wako wa maendeleo. Uko tayari kuchunguza jinsi chaguo za muundo wa kufikiria zinaweza kufungua wavuti kwa mabilioni ya watumiaji? Twende! +Mwisho wa somo hili, utakuwa na uhakika wa kufanya ufikiaji kuwa sehemu ya kawaida ya mtiririko wako wa maendeleo. Tayari kuchunguza jinsi maamuzi ya kubuni kwa makini yanavyoweza kufungua wavuti kwa mabilioni ya watumiaji? Twende! -> Unaweza kuchukua somo hili kwenye [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! +```mermaid +mindmap + root((Ufikiaji wa Wavuti)) + Users + Screen readers + Keyboard navigation + Voice control + Magnification + Technologies + HTML semantics + ARIA attributes + CSS focus indicators + Keyboard events + Benefits + Watazamaji wengi + SEO bora + Uzingatiaji wa sheria + Ubunifu wa ulimwengu wote + Testing + Automated tools + Manual testing + User feedback + Real assistive tech +``` +> Unaweza kufuata somo hili kwenye [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! -## Kuelewa Teknolojia za Usaidizi +## Kuelewa Teknolojia Za Kusaidia -Kabla ya kuanza kuandika msimbo, hebu tuchukue muda kuelewa jinsi watu wenye uwezo tofauti wanavyopitia wavuti. Hii si nadharia tu—kuelewa mifumo halisi ya urambazaji kutakufanya kuwa msanidi bora zaidi! +Kabla hatujaanza kuandika msimbo, tuchukue muda kuelewa jinsi watu wenye uwezo tofauti wanavyopata uzoefu wa wavuti. Hii si nadharia tu—kuelewa mifumo hii halisi ya kuvinjari kutakufanya kuwa mtaalamu bora zaidi! -Teknolojia za usaidizi ni zana za kushangaza zinazosaidia watu wenye ulemavu kuingiliana na tovuti kwa njia ambazo zinaweza kukushangaza. Mara tu unapopata jinsi teknolojia hizi zinavyofanya kazi, kuunda uzoefu wa wavuti unaoweza kufikiwa kunakuwa rahisi zaidi. Ni kama kujifunza kuona msimbo wako kupitia macho ya mtu mwingine. +Teknolojia za kusaidia ni zana za kushangaza ambazo husaidia watu wenye ulemavu kuingiliana na tovuti kwa njia ambazo zinaweza kukushangaza. Ukipata namna teknolojia hizi zinavyofanya kazi, kuunda uzoefu wa wavuti unaopatikana kwa wote kutakuwa rahisi zaidi kuelewa. Ni kama kujifunza kuona msimbo wako kwa macho ya mtu mwingine. -### Wasomaji wa Skrini +### Wasomaji wa skrini -[Wasomaji wa skrini](https://en.wikipedia.org/wiki/Screen_reader) ni vipande vya teknolojia vilivyo na ustadi mkubwa vinavyogeuza maandishi ya kidijitali kuwa sauti au matokeo ya maandishi ya braille. Ingawa hutumiwa hasa na watu wenye ulemavu wa kuona, pia ni msaada mkubwa kwa watumiaji wenye matatizo ya kujifunza kama vile dyslexia. +[Wasomaji wa skrini](https://en.wikipedia.org/wiki/Screen_reader) ni vifaa vya kiteknolojia vyenye ufanisi ambavyo hubadilisha maandishi ya kidijitali kuwa matamshi au matokeo ya braille. Wakati wanatumika hasa kwa watu wenye ulemavu wa kuona, pia ni msaada mkubwa kwa watumiaji wenye matatizo ya kujifunza kama dyslexia. -Ninapenda kufikiria msomaji wa skrini kama kuwa na msimulizi mwenye akili sana anayesoma kitabu kwako. Husoma maudhui kwa sauti kwa mpangilio wa kimantiki, hutangaza vipengele vya kuingiliana kama "kitufe" au "kiungo," na hutoa njia za mkato za kibodi za kuruka kwenye ukurasa. Lakini hapa kuna jambo—wasomaji wa skrini wanaweza kufanya uchawi wao tu ikiwa tutajenga tovuti zenye muundo sahihi na maudhui yenye maana. Hapo ndipo unapoingia kama msanidi! +Napenda kufikiria wasomaji wa skrini kama kuwa msimulizi mzuri sana anayeimba kitabu kwako. Huwanadi maudhui kwa sauti kwa mpangilio wa mantiki, hutangaza vipengele vinavyoshirikisha kama "kitufe" au "kiungo," na hutoa njia za mkato za kibodi za kuruka kuruka ukurasa. Lakini hapa ni kitu—wasomaji wa skrini wanaweza kufanya maajabu yao tu ikiwa tunaunda tovuti zikiwa na muundo sahihi na maudhui yenye maana. Hapa ndipo unapoingia wewe kama mtaalamu wa maendeleo! -**Wasomaji wa skrini maarufu kwenye majukwaa mbalimbali:** -- **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (bure na maarufu zaidi), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (iliyojengwa ndani) -- **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (iliyojengwa ndani na yenye uwezo mkubwa) -- **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (iliyojengwa ndani) -- **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (bure na chanzo wazi) +**Wasomaji maarufu wa skrini kwenye majukwaa mbalimbali:** +- **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (bure na maarufu zaidi), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (imejengwa ndani) +- **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (imejengwa ndani na yenye uwezo mkubwa) +- **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (imejengwa ndani) +- **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (bure na chanzo huria) -**Jinsi wasomaji wa skrini wanavyosoma maudhui ya wavuti:** +**Jinsi wasomaji wa skrini wanavyovinjari maudhui ya wavuti:** -Wasomaji wa skrini hutoa mbinu nyingi za urambazaji zinazofanya kuvinjari kuwa rahisi kwa watumiaji wenye uzoefu: -- **Usomaji wa mfululizo**: Husoma maudhui kutoka juu hadi chini, kama kufuata kitabu -- **Urambazaji wa alama**: Kuruka kati ya sehemu za ukurasa (kichwa, nav, kuu, footer) -- **Urambazaji wa vichwa**: Kuruka kati ya vichwa ili kuelewa muundo wa ukurasa -- **Orodha za viungo**: Kutengeneza orodha ya viungo vyote kwa ufikiaji wa haraka -- **Udhibiti wa fomu**: Kusogea moja kwa moja kati ya sehemu za kuingiza na vitufe +Wasomaji wa skrini hutoa mbinu nyingi za kuvinjari ambazo hufanya kuvinjari kuwa rahisi kwa watumiaji wenye uzoefu: +- **Kusoma kwa mfuatano**: Husoma maudhui kutoka juu hadi chini, kama kufuata kitabu +- **Kuvinjari kwa alama za maeneo**: Kuruka kati ya sehemu za ukurasa (kichwa, nav, kuu, futi) +- **Kuvinjari kwa vichwa**: Kuruka kati ya vichwa kuelewa muundo wa ukurasa +- **Orodha za viungo**: Tengeneza orodha ya viungo vyote kwa upatikanaji wa haraka +- **Dhibiti za fomu**: Vinjari moja kwa moja kati ya maeneo ya kuingiza na vitufe -> 💡 **Hili linanishangaza**: 68% ya watumiaji wa wasomaji wa skrini husogea hasa kwa vichwa ([Utafiti wa WebAIM](https://webaim.org/projects/screenreadersurvey9/#finding)). Hii ina maana muundo wa vichwa vyako ni kama ramani kwa watumiaji—unapopata muundo sahihi, unawasaidia watu kupata njia yao haraka zaidi! +> 💡 **Hiki ni kitu kilichondhihirisha akili yangu**: 68% ya watumiaji wa wasomaji wa skrini huvinjari zaidi kwa vichwa ([Utafiti wa WebAIM](https://webaim.org/projects/screenreadersurvey9/#finding)). Hii ina maana muundo wa vichwa ni kama ramani ya watumiaji—ukifanya vibaya unawasaidia watu kupata njia haraka zaidi kupitia maudhui yako! -### Kujenga Mtiririko wa Kupima +### Kuunda mtiririko wako wa upimaji -Habari njema ni kwamba kupima ufikiaji kwa ufanisi hakuhitaji kuwa jambo la kutisha! Utataka kuchanganya zana za kiotomatiki (ni nzuri sana katika kugundua masuala dhahiri) na kupima kwa mikono. Hapa kuna mbinu ya kimfumo ambayo nimegundua inagundua masuala mengi bila kutumia siku nzima: +Hapa kuna habari njema—upimaji mzuri wa ufikiaji hauhitaji kuwa mzito! Utataka kuunganisha zana za kiotomatiki (ni bora kwa kugundua matatizo dhahiri) na baadhi ya upimaji wa mkono. Hapa kuna mbinu ya kisistemati ambayo nimegundua hugundua matatizo mengi bila kutumia muda mwingi sana: -**Mtiririko muhimu wa kupima kwa mikono:** +**Mtiririko muhimu wa upimaji wa mkono:** ```mermaid -graph TD - A[Start Testing] --> B{Keyboard Navigation} - B --> C[Tab through all interactive elements] - C --> D{Screen Reader Testing} - D --> E[Test with NVDA/VoiceOver] - E --> F{Zoom Testing} - F --> G[Zoom to 200% and test functionality] - G --> H{Color/Contrast Check} - H --> I[Verify all text meets contrast ratios] - I --> J{Focus Management} - J --> K[Ensure focus indicators are visible] - K --> L[Testing Complete] +flowchart TD + A[🚀 Anza Kupima] --> B{⌨️ Uvinjari wa Kibodi} + B --> C[Tumia Tab kupitia vitu vyote vinavyoweza kushirikiana] + C --> D{🎧 Upimaji wa Kisomaji cha Skrini} + D --> E[Jaribio na NVDA/VoiceOver] + E --> F{🔍 Upimaji wa Kubadili Ukubwa} + F --> G[Badilisha ukubwa hadi 200% na upime utendaji] + G --> H{🎨 Ukaguzi wa Rangi/Mwingiliano} + H --> I[Thibitisha kuwa maandishi yote yanatimiza viwango vya mng’ao] + I --> J{👁️ Usimamizi wa Kuzingatia} + J --> K[Hakikisha viashirio vya kuzingatia vinaonekana] + K --> L[✅ Upimaji Umeisha] + + style A fill:#e3f2fd + style L fill:#e8f5e8 + style B fill:#fff3e0 + style D fill:#f3e5f5 + style F fill:#e0f2f1 + style H fill:#fce4ec + style J fill:#e8eaf6 ``` +**Orodha ya ukaguzi hatua kwa hatua:** +1. **Kuvinjari kwa kibodi**: Tumia tu Tab, Shift+Tab, Enter, Space, na funguo za Mshale +2. **Upimaji wa wasomaji wa skrini**: Washa NVDA, VoiceOver, au Narrator na vinjari ukiwa na macho yako yamefumba +3. **Upimaji wa kunazana**: Pima kwa viwango vya kunazana 200% na 400% +4. **Uhakiki wa mchanganyiko wa rangi**: Angalia maandishi yote na vipengele vya UI +5. **Upimaji wa dalili za umakini**: Hakikisha vipengele vyote vinavyoshirikisha vina dalili za umakini zinazoonekana -**Orodha ya kupima hatua kwa hatua:** -1. **Urambazaji wa kibodi**: Tumia tu Tab, Shift+Tab, Enter, Space, na funguo za mshale -2. **Kupima wasomaji wa skrini**: Washa NVDA, VoiceOver, au Narrator na usogee ukiwa umefumba macho -3. **Kupima kwa kukuza**: Jaribu viwango vya kukuza 200% na 400% -4. **Uthibitishaji wa utofauti wa rangi**: Angalia maandishi yote na vipengele vya UI -5. **Kupima viashiria vya umakini**: Hakikisha vipengele vyote vya kuingiliana vina hali za umakini zinazoonekana +✅ **Anza na Lighthouse**: Fungua DevTools za kivinjari chako, endesha ukaguzi wa ufikiaji wa Lighthouse, kisha tumia matokeo kuongoza maeneo yako ya upimaji wa mkono. -✅ **Anza na Lighthouse**: Fungua DevTools ya kivinjari chako, fanya ukaguzi wa ufikiaji wa Lighthouse, kisha tumia matokeo kuongoza maeneo yako ya kupima kwa mikono. +### Zana za kunazana na kuongezea ukubwa -### Zana za kukuza na kukuza +Unajua jinsi unavyopiga kidole kunazana kwenye simu yako wakati maandishi ni madogo sana, au kuziangalia macho kidogo kwenye skrini ya kompyuta chini ya mwanga mkali? Watumiaji wengi hutegemea zana za kuongeza ukubwa kufanya maudhui yawe rahisi kusoma kila siku. Hii ni pamoja na watu wenye upofu mdogo, wazee, na mtu yeyote aliyewahi kujaribu kusoma tovuti nje. -Unajua jinsi unavyobana ili kukuza kwenye simu yako wakati maandishi ni madogo sana, au unakaza macho kwenye skrini ya kompyuta ndogo katika mwangaza mkali wa jua? Watumiaji wengi hutegemea zana za kukuza ili kufanya maudhui yasomeke kila siku. Hii inajumuisha watu wenye uoni hafifu, wazee, na yeyote aliyewahi kujaribu kusoma tovuti nje. +Teknolojia za kisasa za kunazana zimeendelea zaidi ya kuongeza ukubwa tu. Kuelewa jinsi zana hizi zinavyofanya kazi kutakusaidia kuunda muundo unaojibadilisha ambao unabaki kuwa bora na kuvutia hata wakati wa kunazana kwa kiwango chochote. -Teknolojia za kisasa za kukuza zimebadilika zaidi ya kufanya vitu kuwa vikubwa tu. Kuelewa jinsi zana hizi zinavyofanya kazi kutakusaidia kuunda miundo inayojibika ambayo inabaki kuwa ya kazi na ya kuvutia katika kiwango chochote cha kukuza. +**Uwezo wa kunazana wa vivinjari vya kisasa:** +- **Kunazana kwa ukurasa**: Hupanua maudhui yote kwa uwiano (maandishi, picha, muundo) - hii ni njia inayopendekezwa +- **Kunazana kwa maandishi pekee**: Huongeza ukubwa wa fonti huku ikidumisha muundo wa awali +- **Kidonge cha kunazana**: Mvuto wa kugusa kwenye simu kwa kuongeza ukubwa kwa muda mfupi +- **Msaada wa kivinjari**: Vivinjari vyote vya kisasa vina msaada wa kunazana hadi 500% bila kuvunja utendaji -**Uwezo wa kisasa wa kukuza kivinjari:** -- **Kukuza ukurasa**: Hukadiria maudhui yote kwa uwiano (maandishi, picha, muundo) - hii ndiyo njia inayopendekezwa -- **Kukuza maandishi pekee**: Huongeza ukubwa wa fonti huku ukihifadhi muundo wa awali -- **Kubana ili kukuza**: Msaada wa ishara ya simu kwa kukuza kwa muda -- **Msaada wa kivinjari**: Vivinjari vyote vya kisasa vinaunga mkono kukuza hadi 500% bila kuvunja utendaji +**Programu maalum za kuongeza ukubwa:** +- **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (imejengwa ndani), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) +- **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (imejengwa ndani na sifa za hali ya juu) -**Programu maalum za kukuza:** -- **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (iliyojengwa ndani), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) -- **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (iliyojengwa ndani na vipengele vya hali ya juu) +> ⚠️ **Tafakari za Ubunifu**: WCAG inahitaji maudhui kubaki na kazi hata kama yamepandishwa ukubwa hadi 200%. Kiwango hiki, kusogea upande hadi upande kunapaswa kuwa kidogo, na vipengele vyote vinavyoshirikisha vinapaswa kubaki vinapatikana. -> ⚠️ **Fikiria Muundo**: WCAG inahitaji kwamba maudhui yabaki ya kazi yanapokuzwa hadi 200%. Katika kiwango hiki, kusogeza kwa usawa kunapaswa kuwa kidogo, na vipengele vyote vya kuingiliana vinapaswa kubaki kufikiwa. +✅ **Pima muundo wako unaojibadilisha**: Panua kivinjari chako hadi 200% na 400%. Je, muundo wako unajibadilisha kwa neema? Je, bado unaweza kufikia kila utendakazi bila kuchuja sana? -✅ **Jaribu muundo wako unaojibika**: Kukuza kivinjari chako hadi 200% na 400%. Je, muundo wako unabadilika kwa uzuri? Je, bado unaweza kufikia utendaji wote bila kusogeza kupita kiasi? +## Zana za Kisasa za Upimaji wa Ufikiaji Rahisi -## Zana za Kisasa za Kupima Ufikiaji +Sasa unapoelewa jinsi watu wanavyovinjari wavuti kwa kutumia teknolojia za kusaidia, tuchunguza zana zinazokusaidia kuunda na kupima tovuti zinazo patikana kwa wote. -Sasa kwa kuwa umeelewa jinsi watu wanavyosogea kwenye wavuti kwa kutumia teknolojia za usaidizi, hebu tuchunguze zana zinazokusaidia kujenga na kupima tovuti zinazoweza kufikiwa. +Fikiria hivi: zana za kiotomatiki ni nzuri kugundua matatizo dhahiri (kama kukosekana kwa maandishi ya alt), wakati upimaji wa mkono unakusaidia kuhakikisha tovuti yako inahisi nzuri kutumika katika dunia halisi. Pamoja, zinakupa uhakika kwamba tovuti zako zinatumika kwa kila mtu. -Fikiria hivi: zana za kiotomatiki ni nzuri katika kugundua masuala dhahiri (kama maandishi ya alt yaliyokosekana), wakati kupima kwa mikono kunakusaidia kuhakikisha tovuti yako inahisi vizuri kutumia katika ulimwengu halisi. Pamoja, zinakupa ujasiri kwamba tovuti zako zinafanya kazi kwa kila mtu. +### Upimaji wa mchanganyiko wa rangi -### Kupima utofauti wa rangi +Hapa kuna habari njema: mchanganyiko wa rangi ni mojawapo ya matatizo ya kawaida ya ufikiaji rahisi, lakini pia ni miongoni mwa rahisi kutatuliwa. Mchanganyiko mzuri hufaidisha kila mtu—kuanzia watumiaji wenye ulemavu wa kuona hadi watu wanaojaribu kusoma simu zao pwani. -Habari njema: utofauti wa rangi ni mojawapo ya masuala ya kawaida ya ufikiaji, lakini pia ni mojawapo ya rahisi kurekebisha. Utofauti mzuri unafaidisha kila mtu—kutoka kwa watumiaji wenye ulemavu wa kuona hadi watu wanaojaribu kusoma simu zao pwani. +**Matakwa ya mchanganyiko wa WCAG:** -**Mahitaji ya utofauti wa WCAG:** +| Aina ya Maandishi | WCAG AA (Chini) | WCAG AAA (Imboreshwa) | +|-----------|-------------------|---------------------| +| **Maandishi ya kawaida** (chini ya 18pt) | uwiano wa 4.5:1 | uwiano wa 7:1 | +| **Maandishi makubwa** (18pt+ au 14pt+ yenye herufi nzito) | uwiano wa 3:1 | uwiano wa 4.5:1 | +| **Vipengele vya UI** (vitufe, mipaka ya fomu) | uwiano wa 3:1 | uwiano wa 3:1 | -| Aina ya Maandishi | WCAG AA (Kiwango cha chini) | WCAG AAA (Iliyoboreshwa) | -|-------------------|----------------------------|--------------------------| -| **Maandishi ya kawaida** (chini ya 18pt) | Uwiano wa utofauti wa 4.5:1 | Uwiano wa utofauti wa 7:1 | -| **Maandishi makubwa** (18pt+ au 14pt+ bold) | Uwiano wa utofauti wa 3:1 | Uwiano wa utofauti wa 4.5:1 | -| **Vipengele vya UI** (vitufe, mipaka ya fomu) | Uwiano wa utofauti wa 3:1 | Uwiano wa utofauti wa 3:1 | +**Zana muhimu za upimaji:** +- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - Programu ya desktop yenye chaguo la rangi +- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Mtandaoni na maoni ya papo hapo +- [Stark](https://www.getstark.co/) - Kiendelezi cha zana za kubuni kwa Figma, Sketch, Adobe XD +- [Accessible Colors](https://accessible-colors.com/) - Tafuta rangi zinazo patikana kwa watu wote -**Zana muhimu za kupima:** -- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - Programu ya kompyuta yenye kiondoa rangi -- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Kivinjari cha wavuti chenye maoni ya papo hapo -- [Stark](https://www.getstark.co/) - Programu-jalizi ya zana ya muundo kwa Figma, Sketch, Adobe XD -- [Accessible Colors](https://accessible-colors.com/) - Tafuta paleti za rangi zinazoweza kufikiwa +✅ **Tengeneza mchanganyiko bora wa rangi**: Anza na rangi za chapa yako na tumia zana za mchanganyiko kuunda mabadiliko yanayopatikana. Andika hizi kama tokeni za rangi za mfumo wako wa kubuni unaopatikana. -✅ **Jenga paleti bora za rangi**: Anza na rangi za chapa yako na tumia vihakiki vya utofauti kuunda tofauti zinazoweza kufikiwa. Hati hizi kama tokeni za rangi zinazoweza kufikiwa za mfumo wako wa muundo. +### Ukaguzi kamili wa ufikiaji rahisi -### Ukaguzi wa kina wa ufikiaji +Upimaji bora zaidi wa ufikiaji rahisi unaunganisha mbinu nyingi. Hakuna zana moja inayogundua yote, hivyo kuunda utaratibu wa upimaji kwa njia mbalimbali huhakikisha ukaguzi wa kina. -Kupima ufikiaji kwa ufanisi zaidi kunachanganya mbinu nyingi. Hakuna zana moja inayogundua kila kitu, kwa hivyo kujenga utaratibu wa kupima kwa mbinu mbalimbali huhakikisha chanjo ya kina. +**Upimaji wa kivinjari (umejengwa ndani ya DevTools):** +- **Chrome/Edge**: Ukaguzi wa ufikiaji wa Lighthouse + Paneli ya Ufikiaji +- **Firefox**: Mchunguzi wa Ufikiaji na mtazamo wa mti wa kina +- **Safari**: Tabu ya ukaguzi kwenye Web Inspector na simulizi ya VoiceOver -**Kupima kwa kivinjari (iliyojengwa ndani ya DevTools):** -- **Chrome/Edge**: Ukaguzi wa ufikiaji wa Lighthouse + paneli ya Ufikiaji -- **Firefox**: Inspekta ya Ufikiaji yenye mwonekano wa mti wa kina -- **Safari**: Kichupo cha ukaguzi katika Web Inspector na simulizi ya VoiceOver - -**Viendelezi vya kupima kitaalamu:** -- [axe DevTools](https://www.deque.com/axe/devtools/) - Kupima kiotomatiki kwa kiwango cha tasnia +**Viongezeo vya kitaalamu vya upimaji:** +- [axe DevTools](https://www.deque.com/axe/devtools/) - Ukaguzi wa kiotomatiki wa viwango vya sekta - [WAVE](https://wave.webaim.org/extension/) - Maoni ya kuona na kuonyesha makosa -- [Accessibility Insights](https://accessibilityinsights.io/) - Suite ya kupima ya Microsoft +- [Accessibility Insights](https://accessibilityinsights.io/) - Suite kamili ya upimaji ya Microsoft + +**Amri za mstari na ushirikiano wa CI/CD:** +- [axe-core](https://github.com/dequelabs/axe-core) - Maktaba ya JavaScript kwa upimaji wa kiotomatiki +- [Pa11y](https://pa11y.org/) - Zana ya upimaji wa ufikiaji kwa amri za mstari +- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Alama za ufikiaji wa kiotomatiki + +> 🎯 **Lengo la upimaji**: Lenga alama ya ufikiaji ya Lighthouse ya 95+ kama msingi wako. Kumbuka, zana za kiotomatiki hugundua tu takriban 30-40% ya matatizo ya ufikiaji—upimaji wa mkono bado ni muhimu! -**Mstari wa amri na ujumuishaji wa CI/CD:** -- [axe-core](https://github.com/dequelabs/axe-core) - Maktaba ya JavaScript kwa kupima kiotomatiki -- [Pa11y](https://pa11y.org/) - Zana ya kupima ufikiaji wa mstari wa amri -- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Upimaji wa alama za ufikiaji kiotomatiki +### 🧠 **Kukagua Ujuzi wa Upimaji: Tayari Kupata Matatizo?** -> 🎯 **Lengo la Kupima**: Lenga alama ya ufikiaji ya Lighthouse ya 95+ kama msingi wako. Kumbuka, zana za kiotomatiki zinagundua takriban 30-40% ya masuala ya ufikiaji—kupima kwa mikono bado ni muhimu! +**Tuitaone jinsi unavyo jisikia kuhusu upimaji wa ufikiaji:** +- Ni njia gani ya upimaji inayokuonekana kufaa zaidi kwako kwa sasa? +- Je, unaweza kufikiria kutumia tu kibodi kuvinjari siku nzima? +- Ni kizuizi kipi cha ufikiaji rahisi ambacho umepitia binafsi mtandaoni? + +```mermaid +pie title "Matatizo ya Ufikiaji Yaliyogunduliwa na Njia Mbali Mbali" + "Vyombo vya Kielektroniki" : 35 + "Ujaribu wa Mikono" : 40 + "Maoni ya Watumiaji" : 25 +``` +> **Kiongezaji wa kujiamini**: Wapimaji wa kitaalamu wa ufikiaji hutumia mchanganyiko huu halisi wa mbinu. Unajifunza mazoea ya kiwango cha sekta! -## Kujenga Ufikiaji Kuanzia Mwanzo +## Kujenga Ufikiaji Rahisi Kutoka Mwanzoni -Ufunguo wa mafanikio ya ufikiaji ni kuujenga katika msingi wako tangu siku ya kwanza. Najua ni rahisi kufikiria "Nitaongeza ufikiaji baadaye," lakini hiyo ni kama kujaribu kuongeza njia ya kupanda kwenye nyumba baada ya kujengwa tayari. Inawezekana? Ndiyo. Rahisi? Sio sana. +Ufikiaji rahisi hufanikiwa kwa kuujenga kwenye msingi wako tangu siku ya kwanza. Najua ni rahisi kudhani "Nitaongeza ufikiaji baadaye," lakini hiyo ni kama kujaribu kuongeza kizingiti cha wheelchair kwenye nyumba baada ya kujengwa. Inawezekana? Ndiyo. Rahisi? Sio kweli. -Fikiria ufikiaji kama kupanga nyumba—ni rahisi zaidi kujumuisha ufikiaji wa viti vya magurudumu katika mipango yako ya awali ya usanifu kuliko kurekebisha kila kitu baadaye. +Fikiria ufikiaji rahisi kama kupanga nyumba—ni rahisi zaidi kujumuisha upatikanaji wa kiti cha magurudumu kwenye mipango yako ya awali ya usanifu kuliko kubadilisha kila kitu baadaye. -### Kanuni za POUR: Msingi wako wa ufikiaji +### Kanuni za POUR: Msingi wako wa ufikiaji rahisi -Miongozo ya Maudhui ya Ufikiaji wa Wavuti (WCAG) imejengwa kuzunguka kanuni nne za msingi zinazojumuisha POUR. Usijali—hizi si dhana za kitaaluma za kuchosha! Kwa kweli ni miongozo ya vitendo ya kuunda maudhui yanayofanya kazi kwa kila mtu. +Miongozo ya Ufikiaji wa Maudhui ya Wavuti (WCAG) imejengwa kwa misingi minne ya msingi inayojulikana kama POUR. Usijali—hizi si dhana za maktaba za kitaaluma! Ni miongozo ya vitendo ya kuunda maudhui yanayofanya kazi kwa kila mtu. -Mara tu unapopata jinsi POUR inavyofanya kazi, kufanya maamuzi ya ufikiaji kunakuwa rahisi zaidi. Ni kama kuwa na orodha ya kiakili inayokuongoza katika chaguo zako za muundo. Hebu tuivunje: +Ukifanya kazi na POUR, kufanya maamuzi kuhusu ufikiaji rahisi kutakuwa rahisi zaidi kuelewa. Ni kama kuwa na orodha ya ukaguzi wa akili inayoongoza chaguzi zako za kubuni. Hebu tugawanye: -**🔍 Inayoweza Kutambulika**: Habari lazima iweze kuwasilishwa kwa njia ambazo watumiaji wanaweza kuzitambua kupitia hisia zao zinazopatikana +```mermaid +flowchart LR + A[🔍 INAWEZEKANA KUONEKANA
Je, watumiaji wanaweza kuihisi?] --> B[🎮 INAWEZEKANA KUTUMIA
Je, watumiaji wanaweza kuitumia?] + B --> C[📖 INAWEZEKANA KUELEWA
Je, watumiaji wanaweza kuelewa?] + C --> D[💪 IMARA
Je, inafanya kazi kila mahali?] + + A1[Maandishi ya Alt
Maelezo ya sauti
Tofauti] --> A + B1[Kuingia kwa kibodi
Hakuna shambulio la kifafa
Muda wa mipaka] --> B + C1[Lugha wazi
Inayotabirika
Msaada wa makosa] --> C + D1[Msimbo halali
Inayolingana
Imara kwa siku zijazo] --> D + + style A fill:#e1f5fe + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 +``` +**🔍 Kutambulika**: Taarifa lazima ziwasilishwe kwa njia ambazo watumiaji wanaweza kuziona kupitia hisia zao zilizopo - Toa mbadala wa maandishi kwa maudhui yasiyo ya maandishi (picha, video, sauti) -- Hakikisha utofauti wa rangi wa kutosha kwa maandishi yote na vipengele vya UI -- Toa manukuu na nakala za maudhui ya multimedia -- Buni maudhui yanayobaki ya kazi yanapopunguzwa hadi 200% -- Tumia sifa nyingi za hisia (si rangi pekee) kuwasilisha habari +- Hakikisha mchanganyiko wa rangi wa kutosha kwa maandishi yote na vipengele vya UI +- Toa manukuu na waraka wa maandishi kwa maudhui ya multimedia +- Buni maudhui ambayo yanabaki na utendaji wakati yanapopakuliwa ukubwa hadi 200% +- Tumia sifa nyingi za hisia (sio rangi tu) kuwasilisha taarifa + +**🎮 Kufikia**: Vipengele vyote vya kiolesura vinapaswa kufikiwa kupitia mbinu za kuingiza zilizopo + +- Fanya utendaji wote upatikane kupitia kuvinjari kwa kibodi pekee +- Wape watumiaji muda wa kutosha kusoma na kuingiliana na maudhui +- Epuka maudhui yanayosababisha kifafa au matatizo ya vestibular +- Saidia watumiaji kuvinjari kwa ufanisi na muundo wazi na alama za maeneo +- Hakikisha vipengele vinavyoshirikisha vina ukubwa wa madhumuni unaotosheleza (minimum 44px) + +**📖 Kueleweka**: Taarifa na utendakazi wa UI vinapaswa kuwa wazi na kueleweka + +- Tumia lugha wazi na rahisi inayofaa hadhira yako +- Hakikisha maudhui yanaonekana na kufanya kazi kwa njia zinazotarajiwa na thabiti +- Toa maelekezo wazi na ujumbe za makosa kwa ingizo la mtumiaji +- Msaidie watumiaji kuelewa na kusahihisha makosa katika fomu +- Panga maudhui kwa mpangilio wa kusoma wenye mantiki na mpangilio wa taarifa + +**💪 Imara**: Maudhui lazima yafanye kazi kwa kuaminika kupitia teknolojia mbalimbali na vifaa vya kusaidia + +- **Tumia HTML halali, ya maana kama msingi wako** +- **Hakikisha uendeshaji na teknolojia za kusaidia za sasa na za baadaye** +- **Fuata viwango vya wavuti na mazoea bora ya alama** +- **Jaribu katika vivinjari tofauti, vifaa, na zana za kusaidia** +- **Panga yaliyomo ili yaanguke polepole pale vipengele vya hali ya juu havitiwi maana** -**🎮 Inayoweza Kufanya Kazi**: Vipengele vyote vya kiolesura lazima viweze kufanya kazi kupitia mbinu za kuingiza zinazopatikana +### 🎯 **Ukaguzi wa Kanuni za POUR: Kufanya Ize** -- Fanya utendaji wote uweze kufikiwa kupitia urambazaji wa kibodi -- Toa muda wa kutosha kwa watumiaji kusoma na kuingiliana na maudhui -- Epuka maudhui yanayosababisha mshtuko au matatizo ya vestibular -- Saidia watumiaji kusogea kwa ufanisi kwa muundo wazi na alama -- Hakikisha vipengele vya kuingiliana vina ukubwa wa kutosha wa lengo (44px minimum) +**Fikiria haraka kuhusu misingi:** +- Je, unaweza kufikiria kipengele cha tovuti kinachoshindwa kila kanuni ya POUR? +- Ni kanuni ipi inayohisi kuwa ya asili kwako kama msanidi programu? +- Kanuni hizi zinaweza kuboresha muundo kwa kila mtu vipi, si kwa watumiaji walio na ulemavu tu? -**📖 Inayoweza Kueleweka**: Habari na utendaji wa UI lazima iwe wazi na rahisi kueleweka +```mermaid +quadrantChart + title MATRITI YA MABADILIKO YA PRINCIPLES ZA POUR + x-axis Juhudi Ndogo --> Juhudi Kuu + y-axis Athari Ndogo --> Athari Kuu + quadrant-1 Mafanikio ya Haraka + quadrant-2 Miradi Mikubwa + quadrant-3 Fikiria Baadaye + quadrant-4 Mkazo Mkakati + + Alt Text: [0.2, 0.9] + Color Contrast: [0.3, 0.8] + Semantic HTML: [0.4, 0.9] + Keyboard Nav: [0.6, 0.8] + ARIA Complex: [0.8, 0.7] + Screen Reader Testing: [0.7, 0.6] +``` +> **Kumbuka**: Anza na maboresho yenye athari kubwa na juhudi ndogo. HTML ya kihisia na maandishi ya alt hukupa ongezeko kubwa la upatikanaji kwa juhudi ndogo! -- Tumia lugha wazi, rahisi inayofaa kwa hadhira yako -- Hakikisha maudhui yanaonekana na kufanya kazi kwa njia zinazoeleweka, thabiti -- Toa maelekezo wazi na ujumbe wa makosa kwa pembejeo za mtumiaji -- Saidia watumiaji kuelewa na kurekebisha makosa katika fomu -- Panga maudhui kwa mpangilio wa kusoma wa kimantiki na muundo wa habari +## Kuunda Muundo wa Kuonekana Unaopatikana -**💪 Imara**: Maudhui lazima yafanye kazi kwa uaminifu katika teknolojia tofauti na vifaa vya usaidizi +Muundo mzuri wa kuonekana na upatikanaji huenda sambamba. Unapobuni ukiwa na upatikanaji akilini, mara nyingi unagundua kwamba vikwazo hivi hutoa suluhisho safi na maridadi zaidi linalonufaisha watumiaji wote. -- T -Rangi ni zana yenye nguvu ya mawasiliano, lakini haipaswi kamwe kuwa njia pekee ya kuwasilisha taarifa muhimu. Kubuni zaidi ya rangi huunda uzoefu thabiti na jumuishi unaofanya kazi katika hali nyingi. +Tuchunguze jinsi ya kuunda miundo inayovutia kwa macho inayofaa kwa kila mtu, bila kujali uwezo wao wa kuona au hali wanavyotazama yaliyomo yako. -**Kubuni kwa tofauti za kuona rangi:** +### Mikakati ya rangi na upatikanaji wa kuona -Takriban asilimia 8 ya wanaume na asilimia 0.5 ya wanawake wana aina fulani ya tofauti ya kuona rangi (mara nyingi huitwa "upofu wa rangi"). Aina za kawaida ni: -- **Deuteranopia**: Ugumu wa kutofautisha nyekundu na kijani -- **Protanopia**: Nyekundu inaonekana hafifu zaidi -- **Tritanopia**: Ugumu na rangi ya bluu na njano (nadra) +Rangi ni zana yenye nguvu kwa mawasiliano, lakini haitakiwi kuwa njia pekee ya kutoa taarifa muhimu. Kubuni zaidi ya rangi huunda uzoefu thabiti, jumuishi unaofanya kazi katika hali zaidi. + +**Buni kwa ajili ya tofauti za kuona rangi:** + +Takriban asilimia 8 ya wanaume na 0.5% ya wanawake wana aina fulani ya tofauti ya kuona rangi (mara nyingi huitwa "kupofu rangi"). Aina zinazojulikana zaidi ni: +- **Deuteranopia**: Ugumu kutofautisha nyekundu na kijani +- **Protanopia**: Nyekundu inaonekana dhaifu zaidi +- **Tritanopia**: Ugumu na buluu na manjano (adimu) **Mikakati jumuishi ya rangi:** @@ -230,19 +347,19 @@ Takriban asilimia 8 ya wanaume na asilimia 0.5 ya wanawake wana aina fulani ya t } ``` -**Zaidi ya mahitaji ya msingi ya utofauti wa rangi:** -- Jaribu chaguo zako za rangi kwa kutumia simulizi za upofu wa rangi -- Tumia mifumo, textures, au maumbo pamoja na alama za rangi -- Hakikisha hali za mwingiliano zinabaki kutambulika bila rangi -- Fikiria jinsi muundo wako unavyoonekana katika hali ya utofauti wa juu +**Zaidi ya mahitaji ya msingi ya mlinganyo wa rangi:** +- Jaribu uchaguzi wako wa rangi na simulator za upofu wa rangi +- Tumia mifumo, muundo, au maumbo sambamba na rangi +- Hakikisha hali za mwingiliano zinaweza kutofautishwa bila rangi +- Fikiria jinsi muundo wako unaonekana katika hali ya mkanganyiko wa juu -✅ **Jaribu upatikanaji wa rangi yako**: Tumia zana kama [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) kuona jinsi tovuti yako inavyoonekana kwa watumiaji wenye aina tofauti za kuona rangi. +✅ **Jaribu upatikanaji wa rangi zako**: Tumia zana kama [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) kuona jinsi tovuti yako inavyoonekana kwa watumiaji wenye aina tofauti za kuona rangi. -### Viashiria vya umakini na muundo wa mwingiliano +### Viashirio vya umakini na muundo wa mwingiliano -Viashiria vya umakini ni sawa na mshale wa kidijitali—vinaonyesha watumiaji wa kibodi walipo kwenye ukurasa. Viashiria vya umakini vilivyobuniwa vizuri vinaboresha uzoefu kwa kila mtu kwa kufanya mwingiliano kuwa wazi na wa kutabirika. +Viashirio vya umakini ni sawa na mshale wa kidijitali—vinaonyesha wapiga kibodi wapi wako kwenye ukurasa. Viashirio vya umakini vilivyo vizuri huongeza uzoefu kwa kila mtu kwa kufanya mwingiliano wazi na unaotarajiwa. -**Mazoea bora ya kisasa ya viashiria vya umakini:** +**Mambo ya kufuata kwa viashirio vya umakini vya kisasa:** ```css /* Enhanced focus styles that work across browsers */ @@ -271,23 +388,44 @@ button:focus:not(:focus-visible) { } ``` -**Mahitaji ya viashiria vya umakini:** -- **Uonekano**: Lazima iwe na uwiano wa utofauti wa angalau 3:1 na vipengele vinavyozunguka +**Mahitaji ya kiashirio cha umakini:** +- **Kuonekana**: Lazima iwe na mlinganyo wa angalau 3:1 na vitu vinavyozunguka - **Upana**: Unene wa angalau 2px kuzunguka kipengele chote -- **Uendelevu**: Inapaswa kubaki kuonekana hadi umakini uhamie mahali pengine -- **Utofauti**: Lazima iwe tofauti kwa macho kutoka kwa hali nyingine za UI +- **Kubaki**: Inapaswa kubaki kuonekana hadi umakini uhamie mahali pengine +- **Tofauti**: Lazima ionekane tofauti kwa macho kutoka kwa hali zingine za UI -> 💡 **Ushauri wa Kubuni**: Viashiria bora vya umakini mara nyingi hutumia mchanganyiko wa muhtasari, kivuli cha kisanduku, na mabadiliko ya rangi ili kuhakikisha uonekano katika mandhari tofauti. +> 💡 **Ushauri wa Kubuni**: Viashirio bora vya umakini mara nyingi hutumia mchanganyiko wa mipaka, kivuli cha kisanduku, na mabadiliko ya rangi kuhakikisha kuonekana kwa mandhari na muktadha tofauti. -✅ **Kagua viashiria vya umakini**: Tembea kupitia tovuti yako kwa kutumia kibodi na angalia ni vipengele vipi vina viashiria vya umakini vilivyo wazi. Je, kuna vyovyote ambavyo ni vigumu kuona au havipo kabisa? +✅ **Kagua viashirio vya umakini**: Tumia Tab kuzunguka kwenye tovuti yako na angalia vipengele vyenye viashirio vya umakini vya wazi. Kuna vishawishi vingi vigumu kuiona au havipo kabisa? -### HTML ya Kisemantiki: Msingi wa upatikanaji +### HTML ya Kihisia: Msingi wa Upatikanaji -HTML ya kisemantiki ni kama kutoa teknolojia za kusaidia mfumo wa GPS kwa tovuti yako. Unapotumia vipengele sahihi vya HTML kwa madhumuni yake yaliyokusudiwa, kimsingi unatoa ramani ya kina kwa wasomaji wa skrini, kibodi, na zana nyingine kusaidia watumiaji kuvinjari kwa ufanisi. +HTML ya kihisia ni kama kumpa teknolojia za msaada mfumo wa GPS wa tovuti yako. Unapotumia vipengele sahihi vya HTML kwa madhumuni hayo, unatoa kwa zana kama wasomaji wa skrini, vibodi, na zingine ramani ya kina kusaidia watumiaji kusafiri kwa ufanisi. -Hapa kuna mfano ulionigusa sana: HTML ya kisemantiki ni tofauti kati ya maktaba iliyoandaliwa vizuri yenye kategoria wazi na alama za msaada dhidi ya ghala ambapo vitabu vimesambazwa kiholela. Sehemu zote zina vitabu sawa, lakini ungependa kujaribu kutafuta kitu wapi? Sahihi! +Hapa kuna mufano uliogusa: html ya kihisia ni tofauti kati ya maktaba iliyoandaliwa vyema yenye makundi wazi na alama za msaada dhidi ya ghala ambapo vitabu vinaachwa kiholela. Pamoja na kwamba pande zote zina vitabu sawa, ni ipi ungapendelea kutafuta kitu? -**Misingi ya muundo wa ukurasa unaopatikana:** +```mermaid +flowchart TD + A[🏠 Hati ya HTML] --> B[📰 kichwa] + A --> C[🧭 nav] + A --> D[📄 kuu] + A --> E[📋 miguuko] + + B --> B1[h1: Jina la Tovuti
Nembo & chapa] + C --> C1[ul: Urambazaji
Viungo vikuu] + D --> D1[makala: Yaliyomo
sehemu: Sehemu ndogo] + D --> D2[aside: Ukanda wa upande
Yaliyohusiana] + E --> E1[nav: Viungo vya miguuko
Taarifa za Haki miliki] + + D1 --> D1a[h1: Kichwa cha ukurasa
h2: Sehemu kuu
h3: Sehemu ndogo] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 +``` +**Vipengele vya kujenga muundo wa ukurasa unaopatikana:** ```html @@ -342,36 +480,62 @@ Hapa kuna mfano ulionigusa sana: HTML ya kisemantiki ni tofauti kati ya maktaba ``` -**Kwa nini HTML ya kisemantiki hubadilisha upatikanaji:** +**Kwa nini HTML ya kihisia hubadilisha upatikanaji:** + +| Kipengele cha Kihisia | Madhumuni | Faida kwa Msomaji wa Skrini | +|-----------------------|-----------|-----------------------------| +| `
` | Kichwa cha ukurasa au sehemu | "Maeneo ya bendera" - urambazaji haraka juu | +| `