diff --git a/translations/id/.co-op-translator.json b/translations/id/.co-op-translator.json index 70759545c..0edc028dd 100644 --- a/translations/id/.co-op-translator.json +++ b/translations/id/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2025-11-06T11:41:21+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T12:51:16+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "id" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T17:51:05+00:00", + "translation_date": "2026-03-06T13:05:28+00:00", "source_file": "AGENTS.md", "language_code": "id" }, @@ -516,8 +516,8 @@ "language_code": "id" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T17:47:18+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T12:47:54+00:00", "source_file": "README.md", "language_code": "id" }, diff --git a/translations/id/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/id/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 42f5fe83f..f9e050010 100644 --- a/translations/id/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/id/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,183 +1,180 @@ -# Pengantar Bahasa Pemrograman dan Alat Pengembang Modern +# Pengenalan Bahasa Pemrograman dan Alat Pengembang Modern -Hai, calon pengembang! πŸ‘‹ Boleh saya ceritakan sesuatu yang masih membuat saya merinding setiap hari? Kamu akan segera menyadari bahwa pemrograman bukan hanya tentang komputer – ini adalah kekuatan super nyata untuk mewujudkan ide-ide terliarmu! +Hai, calon pengembang! πŸ‘‹ Boleh aku kasih tahu sesuatu yang selalu membuatku merinding setiap hari? Kamu akan segera menemukan bahwa pemrograman bukan hanya tentang komputer – ini tentang memiliki kekuatan super nyata untuk mewujudkan ide liar terbaikmu! -Kamu tahu momen ketika kamu menggunakan aplikasi favoritmu dan semuanya terasa pas? Ketika kamu menekan sebuah tombol dan sesuatu yang benar-benar ajaib terjadi yang membuatmu berpikir, "Wow, bagaimana mereka MELAKUKAN itu?" Nah, seseorang seperti kamu – mungkin sedang duduk di kedai kopi favoritnya jam 2 pagi dengan espresso ketiga – menulis kode yang menciptakan keajaiban itu. Dan ini yang akan membuatmu takjub: di akhir pelajaran ini, kamu tidak hanya akan memahami bagaimana mereka melakukannya, tetapi kamu juga akan ingin mencobanya sendiri! +Kamu tahu momen saat kamu menggunakan aplikasi favoritmu dan semuanya terasa pas? Saat kamu mengetuk sebuah tombol dan sesuatu yang benar-benar ajaib terjadi yang membuatmu berkata "wow, bagaimana mereka MELAKUKANNYA?" Nah, seseorang seperti kamu – mungkin sedang duduk di kedai kopi favoritnya jam 2 pagi dengan espresso ketiga – menulis kode yang menciptakan keajaiban itu. Dan ini akan membuatmu tercengang: di akhir pelajaran ini, kamu tidak hanya akan mengerti bagaimana mereka melakukannya, tapi kamu akan sangat ingin mencobanya sendiri! -Dengar, saya benar-benar mengerti jika pemrograman terasa menakutkan sekarang. Ketika saya pertama kali mulai, saya benar-benar berpikir kamu harus menjadi jenius matematika atau sudah coding sejak usia lima tahun. Tapi ini yang benar-benar mengubah perspektif saya: pemrograman persis seperti belajar berbicara dalam bahasa baru. Kamu mulai dengan "halo" dan "terima kasih," lalu berkembang hingga memesan kopi, dan sebelum kamu menyadarinya, kamu sedang berdiskusi filosofis yang mendalam! Bedanya, kali ini kamu berbicara dengan komputer, dan jujur saja? Mereka adalah mitra percakapan paling sabar yang pernah ada – mereka tidak pernah menghakimi kesalahanmu dan selalu bersemangat untuk mencoba lagi! +Dengar, aku mengerti jika pemrograman terasa menakutkan sekarang. Saat pertama kali aku mulai, aku benar-benar mengira kamu harus menjadi jenius matematika atau sudah coding sejak umur lima tahun. Tapi ini yang benar-benar mengubah perspektifku: pemrograman persis seperti belajar berbicara dalam bahasa baru. Kamu mulai dengan "halo" dan "terima kasih," lalu berkembang ke memesan kopi, dan sebelum kamu sadar, kamu sudah berdiskusi filsafat yang mendalam! Bedanya, di sini kamu mengobrol dengan komputer, dan sejujurnya? Mereka adalah pasangan ngobrol paling sabar yang pernah kamu temui – mereka tak pernah menghakimi kesalahanmu dan selalu antusias mencoba lagi! -Hari ini, kita akan menjelajahi alat-alat luar biasa yang membuat pengembangan web modern tidak hanya mungkin, tetapi juga sangat adiktif. Saya berbicara tentang editor, browser, dan alur kerja yang sama persis yang digunakan pengembang di Netflix, Spotify, dan studio aplikasi indie favoritmu setiap hari. Dan ini bagian yang akan membuatmu ingin menari kegirangan: sebagian besar alat profesional kelas industri ini sepenuhnya gratis! +Hari ini, kita akan menjelajahi alat luar biasa yang membuat pengembangan web modern bukan hanya mungkin, tapi benar-benar adiktif. Aku berbicara tentang editor, browser, dan alur kerja yang sama persis yang digunakan pengembang di Netflix, Spotify, dan studio aplikasi indie favoritmu setiap hari. Dan ini bagian yang akan membuatmu menari bahagia: sebagian besar alat standar profesional ini benar-benar gratis! ![Intro Programming](../../../../translated_images/id/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Your Programming Journey Today - section Discover - What is Programming: 5: You - Programming Languages: 4: You - Tools Overview: 5: You - section Explore - Code Editors: 4: You - Browsers & DevTools: 5: You - Command Line: 3: You - section Practice - Language Detective: 4: You - Tool Exploration: 5: You - Community Connection: 5: You + title Perjalanan Pemrograman Anda Hari Ini + section Temukan + Apa itu Pemrograman: 5: You + Bahasa Pemrograman: 4: You + Ikhtisar Alat: 5: You + section Jelajahi + Editor Kode: 4: You + Peramban & Alat Pengembang: 5: You + Baris Perintah: 3: You + section Latihan + Detektif Bahasa: 4: You + Eksplorasi Alat: 5: You + Koneksi Komunitas: 5: You ``` +## Mari Kita Lihat Apa yang Sudah Kamu Ketahui! -## Mari Lihat Apa yang Sudah Kamu Ketahui! +Sebelum kita mulai ke hal seru, aku penasaran – apa yang sudah kamu ketahui tentang dunia pemrograman ini? Dan dengar, jika kamu melihat pertanyaan-pertanyaan ini dan berpikir "Aku benar-benar tidak tahu apa-apa tentang ini," itu bukan hanya oke, tapi sempurna! Itu berarti kamu berada di tempat yang tepat. Anggap kuis ini seperti pemanasan sebelum olahraga – kita hanya memanaskan otot otakmu! -Sebelum kita masuk ke hal-hal seru, saya penasaran – apa yang sudah kamu ketahui tentang dunia pemrograman ini? Dan dengar, jika kamu melihat pertanyaan-pertanyaan ini sambil berpikir "Saya benar-benar tidak tahu apa-apa tentang ini," itu bukan hanya oke, itu sempurna! Itu berarti kamu berada di tempat yang tepat. Anggap kuis ini seperti peregangan sebelum olahraga – kita hanya memanaskan otakmu! +[Ikuti kuis pra-pelajaran](https://ff-quizzes.netlify.app/web/) -[Ikuti kuis pra-pelajaran](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +## Petualangan yang Akan Kita Lakukan Bersama -## Petualangan yang Akan Kita Jalani Bersama +Oke, aku benar-benar bersemangat untuk apa yang akan kita jelajahi hari ini! Serius, aku berharap bisa melihat wajahmu saat beberapa konsep ini mulai klik. Ini adalah perjalanan luar biasa yang akan kita lakukan bersama: -Oke, saya benar-benar bersemangat tentang apa yang akan kita jelajahi hari ini! Serius, saya berharap bisa melihat wajahmu ketika beberapa konsep ini mulai masuk akal. Berikut adalah perjalanan luar biasa yang akan kita lalui bersama: +- **Apa sebenarnya pemrograman itu (dan mengapa ini hal paling keren!)** – Kita akan menemukan bagaimana kode secara harfiah adalah sihir tak terlihat yang menggerakkan segala sesuatu di sekitarmu, mulai dari alarm yang entah kenapa tahu hari Senin pagi sampai algoritma yang secara sempurna mengkurasi rekomendasi Netflix-mu +- **Bahasa pemrograman dan kepribadian menakjubkan mereka** – Bayangkan masuk ke sebuah pesta di mana setiap orang memiliki kekuatan super yang benar-benar berbeda dan cara menyelesaikan masalah yang unik. Begitulah dunia bahasa pemrograman, dan kamu akan senang bertemu mereka! +- **Blok bangunan fundamental yang membuat keajaiban digital terjadi** – Anggap ini seperti set LEGO kreatif terbaik. Setelah kamu mengerti bagaimana potongan-potongan ini menyatu, kamu akan menyadari kamu bisa membangun apa pun yang kamu bayangkan +- **Alat profesional yang akan membuatmu merasa seperti baru diberi tongkat penyihir** – Aku tidak berlebihan – alat-alat ini benar-benar akan membuatmu merasa seperti punya kekuatan super, dan bagian terbaiknya? Mereka sama yang dipakai para profesional! -- **Apa sebenarnya pemrograman itu (dan mengapa ini hal paling keren!)** – Kita akan menemukan bagaimana kode adalah sihir tak terlihat yang menggerakkan segalanya di sekitarmu, mulai dari alarm yang entah bagaimana tahu ini hari Senin hingga algoritma yang dengan sempurna mengkurasi rekomendasi Netflix-mu -- **Bahasa pemrograman dan kepribadian mereka yang luar biasa** – Bayangkan masuk ke sebuah pesta di mana setiap orang memiliki kekuatan super dan cara menyelesaikan masalah yang berbeda. Itulah dunia bahasa pemrograman, dan kamu akan menyukai pertemuan dengan mereka! -- **Blok bangunan fundamental yang membuat keajaiban digital terjadi** – Anggap ini sebagai set LEGO kreatif terbaik. Setelah kamu memahami bagaimana potongan-potongan ini cocok, kamu akan menyadari bahwa kamu bisa membangun apa saja yang kamu impikan -- **Alat profesional yang akan membuatmu merasa seperti baru saja diberikan tongkat sihir** – Saya tidak berlebihan di sini – alat-alat ini benar-benar akan membuatmu merasa seperti memiliki kekuatan super, dan bagian terbaiknya? Ini adalah alat yang sama yang digunakan para profesional! +> πŸ’‘ **Ini dia:** Jangan pikirkan untuk menghafal semuanya hari ini! Saat ini, aku hanya ingin kamu merasakan percikan semangat tentang apa yang mungkin. Detailnya akan melekat secara alami saat kita berlatih bersama – begitulah cara belajar yang nyata! -> πŸ’‘ **Ini yang penting**: Jangan berpikir untuk mencoba menghafal semuanya hari ini! Saat ini, saya hanya ingin kamu merasakan semangat tentang apa yang mungkin. Detailnya akan melekat secara alami saat kita berlatih bersama – begitulah cara belajar yang sebenarnya terjadi! +> Kamu bisa mengikuti pelajaran ini di [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -> Kamu bisa mengikuti pelajaran ini di [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +## Jadi Sebenarnya Apa Itu *Pemrograman*? -## Jadi Apa Sebenarnya *Pemrograman* Itu? +Oke, mari kita jawab pertanyaan sejuta dolar: apa sebenarnya pemrograman? -Baiklah, mari kita bahas pertanyaan jutaan dolar: apa sebenarnya pemrograman itu? +Aku akan memberi cerita yang benar-benar mengubah cara pikirku tentang hal ini. Minggu lalu, aku mencoba menjelaskan kepada ibuku bagaimana menggunakan remote TV pintar baru kami. Aku menangkap diriku berkata seperti "Tekan tombol merah, tapi bukan tombol merah besar, tombol merah kecil di kiri... tidak, kiri yang lain... oke, sekarang tahan selama dua detik, bukan satu, bukan tiga..." Kedengarannya familiar? πŸ˜… -Saya akan memberikan cerita yang benar-benar mengubah cara saya memandang ini. Minggu lalu, saya mencoba menjelaskan kepada ibu saya cara menggunakan remote TV pintar baru kami. Saya mendapati diri saya mengatakan hal-hal seperti "Tekan tombol merah, tapi bukan tombol merah besar, tombol merah kecil di sebelah kiri... tidak, kiri yang satunya... oke, sekarang tahan selama dua detik, bukan satu, bukan tiga..." Kedengarannya familiar? πŸ˜… +Itulah pemrograman! Seni memberikan instruksi yang sangat rinci dan langkah demi langkah kepada sesuatu yang sangat kuat tapi harus dijelaskan dengan sempurna. Bedanya, bukan menjelaskan ke ibumu (yang bisa bertanya "tombol merah yang mana?!"), kamu menjelaskan ke komputer (yang melakukan persis apa yang kamu katakan, walaupun yang kamu katakan mungkin bukan yang kamu maksud). -Itulah pemrograman! Ini adalah seni memberikan instruksi yang sangat rinci, langkah demi langkah, kepada sesuatu yang sangat kuat tetapi membutuhkan semuanya dijelaskan dengan sempurna. Bedanya, alih-alih menjelaskan kepada ibumu (yang bisa bertanya "tombol merah yang mana?!"), kamu menjelaskan kepada komputer (yang hanya melakukan persis seperti yang kamu katakan, bahkan jika apa yang kamu katakan tidak sepenuhnya seperti yang kamu maksud). +Ini yang membuatku terkesan ketika pertama belajar: komputer sebenarnya cukup sederhana pada inti-nya. Mereka hanya mengerti dua hal – 1 dan 0, yang pada dasarnya "ya" dan "tidak" atau "nyala" dan "mati." Itu saja! Tapi inilah yang menjadi ajaib – kita tidak harus berbicara dalam 1 dan 0 seperti di The Matrix. Di situ muncul **bahasa pemrograman** yang menolong. Mereka seperti penerjemah terbaik dunia yang mengubah pikiran manusia biasa menjadi bahasa komputer. -Ini yang membuat saya takjub ketika pertama kali mempelajarinya: komputer sebenarnya cukup sederhana pada intinya. Mereka hanya memahami dua hal – 1 dan 0, yang pada dasarnya hanya "ya" dan "tidak" atau "hidup" dan "mati." Itu saja! Tapi di sinilah letak keajaibannya – kita tidak perlu berbicara dalam 1s dan 0s seperti di The Matrix. Di sinilah **bahasa pemrograman** datang untuk menyelamatkan. Mereka seperti memiliki penerjemah terbaik di dunia yang mengambil pikiran manusia normalmu dan mengubahnya menjadi bahasa komputer. +Dan ini yang masih membuatku merinding setiap pagi saat bangun: secara harfiah *segala sesuatu* digital dalam hidupmu dimulai dari seseorang seperti kamu, mungkin duduk dengan piyama dan secangkir kopi, mengetik kode di laptopnya. Filter Instagram yang membuatmu tampak sempurna? Seseorang membuat kodenya. Rekomendasi yang membawamu ke lagu favorit barumu? Seorang pengembang membangun algoritmanya. Aplikasi yang membantumu membagi tagihan makan malam dengan teman? Ya, seseorang berpikir "ini mengganggu, aku yakin bisa memperbaikinya" dan kemudian... mereka melakukannya! -Dan ini yang masih membuat saya merinding setiap pagi ketika saya bangun: secara harfiah *semua* hal digital dalam hidupmu dimulai dengan seseorang seperti kamu, mungkin sedang duduk di piyama dengan secangkir kopi, mengetik kode di laptop mereka. Filter Instagram yang membuatmu terlihat sempurna? Seseorang mengkodekan itu. Rekomendasi yang membawamu ke lagu favorit baru? Seorang pengembang membangun algoritma itu. Aplikasi yang membantu kamu membagi tagihan makan malam dengan teman-teman? Ya, seseorang berpikir "ini merepotkan, saya yakin saya bisa memperbaikinya" dan kemudian... mereka melakukannya! +Saat kamu belajar pemrograman, kamu tidak hanya memperoleh keterampilan baru – kamu menjadi bagian dari komunitas luar biasa pembuat solusi yang menghabiskan hari-hari mereka berpikir, "Bagaimana jika aku bisa membangun sesuatu yang membuat hari seseorang sedikit lebih baik?" Jujur, apa yang lebih keren dari itu? -Ketika kamu belajar pemrograman, kamu tidak hanya mempelajari keterampilan baru – kamu menjadi bagian dari komunitas luar biasa pemecah masalah yang menghabiskan hari-hari mereka berpikir, "Bagaimana jika saya bisa membangun sesuatu yang membuat hari seseorang sedikit lebih baik?" Jujur saja, apakah ada yang lebih keren dari itu? +βœ… **Tugas Mencari Fakta Menarik**: Ini sesuatu yang sangat keren untuk dicari saat kamu ada waktu luang – siapa yang kamu kira adalah programmer komputer pertama di dunia? Aku beri petunjuk: mungkin bukan orang yang kamu kira! Cerita di balik orang ini benar-benar menarik dan memperlihatkan bahwa pemrograman selalu soal pemecahan masalah kreatif dan berpikir di luar kotak. -βœ… **Berburu Fakta Menarik**: Ini sesuatu yang sangat keren untuk dicari ketika kamu punya waktu luang – menurutmu siapa programmer komputer pertama di dunia? Saya akan memberikan petunjuk: mungkin bukan orang yang kamu harapkan! Cerita di balik orang ini sangat menarik dan menunjukkan bahwa pemrograman selalu tentang pemecahan masalah kreatif dan berpikir di luar kotak. - -### 🧠 **Waktunya Refleksi: Bagaimana Perasaanmu?** +### 🧠 **Waktu Cek: Bagaimana Perasaanmu?** **Luangkan waktu untuk merenung:** -- Apakah ide "memberikan instruksi kepada komputer" sekarang masuk akal bagimu? +- Apakah ide "memberikan instruksi ke komputer" sekarang masuk akal buatmu? - Bisakah kamu memikirkan tugas sehari-hari yang ingin kamu otomatisasi dengan pemrograman? -- Pertanyaan apa yang muncul di benakmu tentang seluruh konsep pemrograman ini? +- Pertanyaan apa yang mulai muncul di benakmu tentang hal pemrograman ini? -> **Ingat**: Sangat normal jika beberapa konsep masih terasa kabur sekarang. Belajar pemrograman seperti belajar bahasa baru – butuh waktu bagi otakmu untuk membangun jalur saraf itu. Kamu sudah melakukan yang hebat! +> **Ingat**: Normal jika beberapa konsep terasa membingungkan sekarang. Belajar pemrograman itu seperti belajar bahasa baru – membutuhkan waktu untuk otak membangun jalur saraf itu. Kamu sudah melakukan dengan baik! -## Bahasa Pemrograman Seperti Berbagai Rasa Keajaiban +## Bahasa Pemrograman Itu Seperti Rasa-Rasa Sihir yang Berbeda -Oke, ini mungkin terdengar aneh, tapi tetaplah bersama saya – bahasa pemrograman itu seperti berbagai jenis musik. Pikirkan: ada jazz, yang halus dan improvisasi, rock yang kuat dan langsung, klasik yang elegan dan terstruktur, dan hip-hop yang kreatif dan ekspresif. Setiap gaya memiliki suasana sendiri, komunitas penggemar yang penuh semangat, dan masing-masing sempurna untuk suasana hati dan kesempatan yang berbeda. +Oke, ini akan terdengar aneh, tapi ikuti aku – bahasa pemrograman sangat mirip dengan berbagai jenis musik. Pikirkanlah: ada jazz yang santai dan improvisasi, rock yang kuat dan langsung, klasik yang elegan dan terstruktur, dan hip-hop yang kreatif dan ekspresif. Setiap gaya punya vibe sendiri, komunitas penggemar penuh semangat sendiri, dan masing-masing cocok untuk suasana dan kesempatan berbeda. -Bahasa pemrograman bekerja persis sama! Kamu tidak akan menggunakan bahasa yang sama untuk membangun game mobile yang menyenangkan seperti yang kamu gunakan untuk menganalisis data iklim dalam jumlah besar, seperti kamu tidak akan memainkan death metal di kelas yoga (yah, sebagian besar kelas yoga setidaknya! πŸ˜„). +Bahasa pemrograman bekerja dengan cara yang sama! Kamu tidak akan memakai bahasa yang sama untuk membuat game mobile seru dengan bahasa yang kamu pakai untuk mengolah data iklim dalam jumlah besar, sama seperti kamu tidak akan memainkan death metal di kelas yoga (yah, sebagian besar kelas yoga deh! πŸ˜„). -Tapi ini yang benar-benar membuat saya takjub setiap kali saya memikirkannya: bahasa-bahasa ini seperti memiliki penerjemah paling sabar dan brilian di dunia yang duduk tepat di sebelahmu. Kamu bisa mengekspresikan ide-ide kamu dengan cara yang terasa alami bagi otak manusia, dan mereka menangani semua pekerjaan yang sangat kompleks untuk menerjemahkan itu ke dalam 1s dan 0s yang sebenarnya diucapkan komputer. Ini seperti memiliki teman yang sangat fasih dalam "kreativitas manusia" dan "logika komputer" – dan mereka tidak pernah lelah, tidak pernah butuh istirahat kopi, dan tidak pernah menghakimi kamu karena bertanya pertanyaan yang sama dua kali! +Tapi ini yang selalu membuatku terkagum setiap kali memikirkannya: bahasa-bahasa ini seperti memiliki penerjemah paling sabar dan jenius di dunia duduk tepat di sampingmu. Kamu bisa mengekspresikan ide dengan cara yang terasa alami untuk otak manusia, dan mereka mengurus semua kerja keras rumit menerjemahkan itu ke 1 dan 0 yang sebenarnya komputer pahami. Seperti punya teman yang fasih dalam "kreativitas manusia" dan "logika komputer" – dan mereka tidak pernah lelah, tidak perlu istirahat kopi, dan tidak pernah menghakimi kamu bertanya hal sama dua kali! -### Bahasa Pemrograman Populer dan Penggunaannya +### Bahasa Pemrograman Populer dan Kegunaannya ```mermaid mindmap - root((Programming Languages)) - Web Development + root((Bahasa Pemrograman)) + Pengembangan Web JavaScript - Frontend Magic - Interactive Websites + Sihir Frontend + Situs Web Interaktif TypeScript - JavaScript + Types - Enterprise Apps + JavaScript + Tipe + Aplikasi Perusahaan Data & AI Python - Data Science - Machine Learning - Automation + Ilmu Data + Pembelajaran Mesin + Otomasi R - Statistics - Research - Mobile Apps + Statistik + Penelitian + Aplikasi Mobile Java Android - Enterprise + Perusahaan Swift iOS - Apple Ecosystem + Ekosistem Apple Kotlin - Modern Android - Cross-platform - Systems & Performance + Android Modern + Lintas Platform + Sistem & Kinerja C++ - Games - Performance Critical + Game + Kritis Kinerja Rust - Memory Safety - System Programming + Keamanan Memori + Pemrograman Sistem Go - Cloud Services - Scalable Backend + Layanan Cloud + Backend yang Dapat Diskalakan ``` - | Bahasa | Terbaik Untuk | Mengapa Populer | -|--------|---------------|-----------------| -| **JavaScript** | Pengembangan web, antarmuka pengguna | Berjalan di browser dan mendukung situs web interaktif | -| **Python** | Ilmu data, otomatisasi, AI | Mudah dibaca dan dipelajari, pustaka yang kuat | -| **Java** | Aplikasi perusahaan, aplikasi Android | Platform-independen, kokoh untuk sistem besar | +|----------|----------|------------------| +| **JavaScript** | Pengembangan web, antarmuka pengguna | Berjalan di browser dan menggerakkan situs interaktif | +| **Python** | Ilmu data, otomatisasi, AI | Mudah dibaca dan dipelajari, perpustakaan kuat | +| **Java** | Aplikasi perusahaan, aplikasi Android | Independen platform, kuat untuk sistem besar | | **C#** | Aplikasi Windows, pengembangan game | Dukungan ekosistem Microsoft yang kuat | | **Go** | Layanan cloud, sistem backend | Cepat, sederhana, dirancang untuk komputasi modern | -### Bahasa Tingkat Tinggi vs. Tingkat Rendah +### Bahasa Tingkat Tinggi vs Bahasa Tingkat Rendah -Oke, ini adalah konsep yang benar-benar membuat otak saya "meledak" ketika saya pertama kali belajar, jadi saya akan berbagi analogi yang akhirnya membuat saya mengerti – dan saya sangat berharap ini membantu kamu juga! +Oke, ini sebenarnya konsep yang membuat otakku mentok ketika pertama belajar, jadi aku akan membagikan analogi yang akhirnya membuatnya klik untukku – dan aku harap ini juga membantu kamu! -Bayangkan kamu mengunjungi negara di mana kamu tidak berbicara bahasanya, dan kamu sangat perlu menemukan kamar mandi terdekat (kita semua pernah mengalaminya, kan? πŸ˜…): +Bayangkan kamu mengunjungi negara di mana kamu tidak bisa bahasanya, dan kamu sangat perlu menemukan kamar mandi terdekat (kita semua pasti pernah di situ, kan? πŸ˜…): -- **Pemrograman tingkat rendah** seperti belajar dialek lokal dengan sangat baik sehingga kamu bisa berbicara dengan nenek yang menjual buah di sudut jalan menggunakan referensi budaya, slang lokal, dan lelucon dalam yang hanya dimengerti oleh seseorang yang tumbuh di sana. Sangat mengesankan dan sangat efisien... jika kamu kebetulan fasih! Tapi cukup membingungkan ketika kamu hanya mencoba menemukan kamar mandi. +- **Pemrograman tingkat rendah** seperti belajar dialek lokal sedemikian rupa sehingga kamu bisa ngobrol dengan nenek yang jual buah di sudut jalan menggunakan referensi budaya, bahasa gaul lokal, dan lelucon dalam yang hanya dipahami orang yang tumbuh di sana. Sangat mengesankan dan sangat efisien... jika kamu fasih! Tapi cukup membingungkan ketika hanya ingin cari kamar mandi. -- **Pemrograman tingkat tinggi** seperti memiliki teman lokal yang luar biasa yang langsung mengerti kamu. Kamu bisa mengatakan "Saya benar-benar perlu menemukan kamar mandi" dalam bahasa Inggris biasa, dan mereka menangani semua terjemahan budaya dan memberikan arahan dengan cara yang masuk akal bagi otak non-lokalmu. +- **Pemrograman tingkat tinggi** seperti punya teman lokal hebat yang mengerti kamu. Kamu bisa bilang "Aku benar-benar perlu kamar mandi" dalam bahasa Inggris biasa, dan dia yang urus terjemahan budaya dan memberimu petunjuk dengan cara yang masuk akal untuk otak non-lokalmu. Dalam istilah pemrograman: -- **Bahasa tingkat rendah** (seperti Assembly atau C) memungkinkan kamu memiliki percakapan yang sangat rinci dengan perangkat keras komputer yang sebenarnya, tetapi kamu harus berpikir seperti mesin, yang... yah, mari kita katakan itu adalah perubahan mental yang cukup besar! -- **Bahasa tingkat tinggi** (seperti JavaScript, Python, atau C#) memungkinkan kamu berpikir seperti manusia sementara mereka menangani semua "bahasa mesin" di belakang layar. Plus, mereka memiliki komunitas yang sangat ramah penuh dengan orang-orang yang ingat bagaimana rasanya menjadi pemula dan benar-benar ingin membantu! +- **Bahasa tingkat rendah** (seperti Assembly atau C) membolehkanmu memiliki percakapan sangat rinci dengan perangkat keras komputer, tapi kamu perlu berpikir seperti mesin, yang... ya, mari kita katakan itu perubahan mental besar! +- **Bahasa tingkat tinggi** (seperti JavaScript, Python, atau C#) membolehkan kamu berpikir seperti manusia sementara mereka yang urus semua bahasa mesin di belakang layar. Plus, mereka punya komunitas yang sangat ramah, penuh orang yang ingat bagaimana rasanya jadi pemula dan benar-benar ingin membantu! -Tebak mana yang akan saya sarankan untuk kamu mulai? πŸ˜‰ Bahasa tingkat tinggi seperti memiliki roda bantu yang tidak pernah benar-benar ingin kamu lepaskan karena mereka membuat seluruh pengalaman jauh lebih menyenangkan! +Tebak bahasa mana yang akan aku sarankan untuk kamu mulai? πŸ˜‰ Bahasa tingkat tinggi seperti roda latihan yang kamu tak pernah benar-benar ingin lepaskan karena membuat pengalaman belajar jadi jauh lebih menyenangkan! ```mermaid flowchart TB - A["πŸ‘€ Human Thought:
'I want to calculate Fibonacci numbers'"] --> B{Choose Language Level} + A["πŸ‘€ Pikiran Manusia:
'Saya ingin menghitung angka Fibonacci'"] --> B{Pilih Tingkat Bahasa} - B -->|High-Level| C["🌟 JavaScript/Python
Easy to read and write"] - B -->|Low-Level| D["βš™οΈ Assembly/C
Direct hardware control"] + B -->|Tingkat Tinggi| C["🌟 JavaScript/Python
Mudah dibaca dan ditulis"] + B -->|Tingkat Rendah| D["βš™οΈ Assembly/C
Kontrol perangkat keras langsung"] - C --> E["πŸ“ Write: fibonacci(10)"] - D --> F["πŸ“ Write: mov r0,#00
sub r0,r0,#01"] + C --> E["πŸ“ Tulis: fibonacci(10)"] + D --> F["πŸ“ Tulis: mov r0,#00
sub r0,r0,#01"] - E --> G["πŸ€– Computer Understanding:
Translator handles complexity"] + E --> G["πŸ€– Pemahaman Komputer:
Penerjemah menangani kerumitan"] F --> G - G --> H["πŸ’» Same Result:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["πŸ’» Hasil Sama:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` +### Aku Akan Tunjukkan Kenapa Bahasa Tingkat Tinggi Jauh Lebih Ramah -### Biarkan Saya Tunjukkan Mengapa Bahasa Tingkat Tinggi Lebih Ramah +Oke, aku akan menunjukkan sesuatu yang secara sempurna memperlihatkan mengapa aku jatuh cinta dengan bahasa tingkat tinggi, tapi sebelumnya – aku perlu kamu janji sesuatu. Saat kamu melihat contoh kode pertama, jangan panik! Kode itu memang seharusnya tampak menakutkan. Itu memang poin yang ingin aku buat! -Baiklah, saya akan menunjukkan sesuatu yang dengan sempurna menunjukkan mengapa saya jatuh cinta dengan bahasa tingkat tinggi, tetapi pertama – saya butuh kamu berjanji sesuatu. Ketika kamu melihat contoh kode pertama itu, jangan panik! Itu memang dimaksudkan untuk terlihat menakutkan. Itulah poin yang ingin saya sampaikan! +Kita akan melihat tugas yang sama ditulis dalam dua gaya yang benar-benar berbeda. Keduanya membuat apa yang disebut deret Fibonacci – pola matematika indah di mana setiap angka adalah jumlah dua angka sebelumnya: 0, 1, 1, 2, 3, 5, 8, 13... (Fakta menyenangkan: kamu akan menemukan pola ini di mana-mana di alam – spiral biji bunga matahari, pola buah pinus, bahkan cara galaksi terbentuk!) -Kita akan melihat tugas yang sama persis ditulis dalam dua gaya yang sangat berbeda. Keduanya menciptakan apa yang disebut deret Fibonacci – ini adalah pola matematika yang indah di mana setiap angka adalah jumlah dari dua angka sebelumnya: 0, 1, 1, 2, 3, 5, 8, 13... (Fakta menarik: kamu akan menemukan pola ini di mana-mana di alam – spiral biji bunga matahari, pola kerucut pinus, bahkan cara galaksi terbentuk!) - -Siap melihat perbedaannya? Ayo mulai! +Siap melihat bedanya? Ayo! **Bahasa tingkat tinggi (JavaScript) – Ramah manusia:** ```javascript -// Step 1: Basic Fibonacci setup +// Langkah 1: Pengaturan dasar Fibonacci const fibonacciCount = 10; let current = 0; let next = 1; @@ -185,32 +182,32 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**Inilah yang dilakukan kode ini:** -- **Mendeklarasikan** konstanta untuk menentukan berapa banyak angka Fibonacci yang ingin kita hasilkan -- **Menginisialisasi** dua variabel untuk melacak angka saat ini dan berikutnya dalam deret -- **Menetapkan** nilai awal (0 dan 1) yang mendefinisikan pola Fibonacci -- **Menampilkan** pesan header untuk mengidentifikasi output kita +**Ini yang dilakukan kode ini:** +- **Deklarasikan** konstanta untuk menentukan berapa banyak angka Fibonacci yang ingin kita buat +- **Inisialisasi** dua variabel untuk melacak angka sekarang dan berikutnya dalam deret +- **Atur** nilai awal (0 dan 1) yang mendefinisikan pola Fibonacci +- **Tampilkan** pesan header untuk mengenali output kita ```javascript -// Step 2: Generate the sequence with a loop +// Langkah 2: Hasilkan urutan dengan sebuah loop for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Calculate next number in sequence + // Hitung angka berikutnya dalam urutan const sum = current + next; current = next; next = sum; } ``` -**Memecah apa yang terjadi di sini:** -- **Melakukan loop** melalui setiap posisi dalam deret menggunakan `for` loop -- **Menampilkan** setiap angka dengan posisinya menggunakan format literal template -- **Menghitung** angka Fibonacci berikutnya dengan menambahkan nilai saat ini dan berikutnya -- **Memperbarui** variabel pelacakan kita untuk melanjutkan ke iterasi berikutnya +**Menjelaskan apa yang terjadi:** +- **Loop** melalui setiap posisi dalam deret menggunakan `for` loop +- **Tampilkan** setiap angka dengan posisinya menggunakan template literal +- **Hitung** angka Fibonacci berikutnya dengan menjumlahkan nilai sekarang dan berikutnya +- **Perbarui** variabel pelacakan untuk melanjutkan ke iterasi berikutnya ```javascript -// Step 3: Modern functional approach +// Langkah 3: Pendekatan fungsional modern const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -221,16 +218,16 @@ const generateFibonacci = (count) => { return sequence; }; -// Usage example +// Contoh penggunaan const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**Dalam kode di atas, kita telah:** -- **Membuat** fungsi yang dapat digunakan kembali menggunakan sintaks fungsi panah modern -- **Membangun** array untuk menyimpan seluruh deret daripada menampilkan satu per satu +**Di atas, kita telah:** +- **Membuat** fungsi yang bisa digunakan ulang dengan sintaks fungsi panah modern +- **Membangun** array untuk menyimpan deret lengkap alih-alih menampilkan satu per satu - **Menggunakan** indeks array untuk menghitung setiap angka baru dari nilai sebelumnya -- **Mengembalikan** deret lengkap untuk penggunaan fleksibel di bagian lain program kita +- **Mengembalikan** deret lengkap untuk penggunaan fleksibel di bagian lain program **Bahasa tingkat rendah (ARM Assembly) – Ramah komputer:** @@ -259,63 +256,63 @@ back add r0,r1 end ``` -Perhatikan bagaimana versi JavaScript hampir seperti membaca instruksi dalam bahasa Inggris, sementara versi Assembly menggunakan perintah yang sulit dipahami yang langsung mengontrol prosesor komputer. Keduanya menyelesaikan tugas yang sama persis, tetapi bahasa tingkat tinggi jauh lebih mudah dipahami, ditulis, dan dipelihara oleh manusia. +Perhatikan bahwa versi JavaScript membacanya hampir seperti instruksi bahasa Inggris, sementara versi Assembly menggunakan perintah misterius yang langsung mengendalikan prosesor komputer. Keduanya menyelesaikan tugas yang sama persis, tapi bahasa tingkat tinggi jauh lebih mudah dipahami, ditulis, dan dirawat manusia. -**Perbedaan utama yang akan kamu perhatikan:** -- **Keterbacaan**: JavaScript menggunakan nama deskriptif seperti `fibonacciCount` sementara Assembly menggunakan label yang sulit dipahami seperti `r0`, `r1` -- **Komentar**: Bahasa tingkat tinggi mendorong penggunaan komentar penjelas yang membuat kode lebih mudah dipahami -- **Struktur**: Alur logis JavaScript sesuai dengan cara manusia berpikir tentang masalah secara langkah demi langkah -- **Pemeliharaan**: Memperbarui versi JavaScript untuk kebutuhan yang berbeda sangatlah mudah dan jelas +**Perbedaan utama yang kamu perhatikan:** +- **Keterbacaan**: JavaScript menggunakan nama deskriptif seperti `fibonacciCount` sementara Assembly menggunakan label yang sulit dimengerti seperti `r0`, `r1` +- **Komentar**: Bahasa tingkat tinggi mendorong komentar penjelasan yang membuat kode terdokumentasi secara mandiri +- **Struktur**: Alur logis JavaScript sesuai dengan cara manusia berpikir tentang masalah langkah demi langkah +- **Pemeliharaan**: Memperbarui versi JavaScript untuk kebutuhan yang berbeda itu sederhana dan jelas -βœ… **Tentang deret Fibonacci**: Pola angka yang sangat indah ini (di mana setiap angka adalah jumlah dari dua angka sebelumnya: 0, 1, 1, 2, 3, 5, 8...) benar-benar muncul *di mana-mana* di alam! Kamu bisa menemukannya di spiral bunga matahari, pola pada kerucut pinus, lengkungan cangkang nautilus, bahkan pada cara cabang pohon tumbuh. Sangat menakjubkan bagaimana matematika dan kode dapat membantu kita memahami dan menciptakan kembali pola yang digunakan alam untuk menciptakan keindahan! +βœ… **Tentang deret Fibonacci**: Pola angka yang sangat indah ini (di mana setiap angka sama dengan jumlah dua angka sebelumnya: 0, 1, 1, 2, 3, 5, 8...) muncul secara harfiah *di mana-mana* di alam! Kamu akan menemukannya di spiral bunga matahari, pola kerucut pinus, cara cangkang nautilus melengkung, dan bahkan cara cabang pohon tumbuh. Sungguh menakjubkan bagaimana matematika dan kode bisa membantu kita memahami dan mereplikasi pola-pola yang digunakan alam untuk menciptakan keindahan! -## Komponen Dasar yang Membuat Keajaiban Terjadi +## Blok Bangunan yang Membuat Keajaiban Terjadi -Baiklah, sekarang setelah kamu melihat seperti apa bahasa pemrograman dalam aksi, mari kita bahas bagian-bagian fundamental yang membentuk setiap program yang pernah ditulis. Anggap ini sebagai bahan-bahan penting dalam resep favoritmu – setelah kamu memahami apa fungsi masing-masing, kamu akan bisa membaca dan menulis kode dalam hampir semua bahasa! +Baiklah, sekarang setelah kamu melihat seperti apa bahasa pemrograman dalam aksi, mari kita uraikan bagian fundamental yang membentuk setiap program yang pernah ditulis. Anggap ini sebagai bahan penting dalam resep favoritmu – setelah kamu mengerti fungsi masing-masing, kamu akan bisa membaca dan menulis kode di hampir semua bahasa! -Ini seperti belajar tata bahasa pemrograman. Ingat saat di sekolah kamu belajar tentang kata benda, kata kerja, dan cara menyusun kalimat? Pemrograman memiliki versi tata bahasanya sendiri, dan jujur saja, ini jauh lebih logis dan mudah daripada tata bahasa Inggris! πŸ˜„ +Ini agak seperti mempelajari tata bahasa pemrograman. Ingat waktu sekolah ketika kamu belajar tentang kata benda, kata kerja, dan cara menyusun kalimat? Pemrograman punya versi tata bahasanya sendiri, dan jujur saja, itu jauh lebih logis dan memaafkan daripada tata bahasa Inggris! πŸ˜„ -### Pernyataan: Instruksi Langkah Demi Langkah +### Pernyataan: Instruksi Langkah-demi-Langkah -Mari kita mulai dengan **pernyataan** – ini seperti kalimat individu dalam percakapan dengan komputer. Setiap pernyataan memberi tahu komputer untuk melakukan satu hal spesifik, seperti memberikan arahan: "Belok kiri di sini," "Berhenti di lampu merah," "Parkir di tempat itu." +Mari mulai dengan **pernyataan** – ini seperti kalimat individu dalam percakapan dengan komputer. Setiap pernyataan memberitahu komputer untuk melakukan satu hal spesifik, seperti memberi petunjuk arah: "Belok kiri di sini," "Berhenti di lampu merah," "Parkir di tempat itu." -Yang saya suka dari pernyataan adalah betapa mudahnya dibaca. Lihat ini: +Yang saya suka dari pernyataan adalah biasanya mereka sangat mudah dibaca. Lihat ini: ```javascript -// Basic statements that perform single actions +// Pernyataan dasar yang melakukan tindakan tunggal const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` -**Inilah yang dilakukan kode ini:** +**Ini yang dilakukan kode ini:** - **Mendeklarasikan** variabel konstan untuk menyimpan nama pengguna -- **Menampilkan** pesan sambutan ke output konsol -- **Menghitung** dan menyimpan hasil dari operasi matematika +- **Menampilkan** pesan sapaan ke output konsol +- **Menghitung** dan menyimpan hasil operasi matematika ```javascript -// Statements that interact with web pages +// Pernyataan yang berinteraksi dengan halaman web document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**Langkah demi langkah, inilah yang terjadi:** +**Langkah demi langkah, ini yang terjadi:** - **Mengubah** judul halaman web yang muncul di tab browser -- **Mengganti** warna latar belakang seluruh halaman +- **Mengganti** warna latar belakang seluruh bodi halaman ### Variabel: Sistem Memori Programmu -Oke, **variabel** adalah salah satu konsep favorit saya untuk diajarkan karena sangat mirip dengan hal-hal yang sudah kamu gunakan setiap hari! +Oke, **variabel** sebenarnya adalah salah satu konsep favorit saya untuk diajarkan karena sangat mirip dengan hal-hal yang sudah kamu gunakan setiap hari! -Pikirkan daftar kontak di ponselmu sebentar. Kamu tidak menghafal nomor telepon semua orang – sebaliknya, kamu menyimpan "Ibu," "Sahabat," atau "Tempat Pizza yang Buka Sampai Jam 2 Pagi" dan membiarkan ponselmu mengingat nomor sebenarnya. Variabel bekerja persis seperti itu! Mereka seperti wadah berlabel di mana programmu dapat menyimpan informasi dan mengambilnya nanti menggunakan nama yang masuk akal. +Pikirkan tentang daftar kontak ponselmu sebentar. Kamu tidak menghafal nomor telepon semua orang – sebaliknya, kamu menyimpan "Ibu," "Teman Terbaik," atau "Tempat Pizza yang Antar Hingga Jam 2 Pagi" dan membiarkan ponselmu mengingat nomor sebenarnya. Variabel bekerja dengan cara yang sama! Mereka seperti wadah berlabel dimana programmu bisa menyimpan informasi dan mengambilnya kembali nanti dengan nama yang masuk akal. -Yang keren adalah: variabel dapat berubah saat programmu berjalan (itulah sebabnya disebut "variabel" – lihat apa yang mereka lakukan di sini?). Sama seperti kamu mungkin memperbarui kontak tempat pizza itu saat menemukan tempat yang lebih baik, variabel dapat diperbarui saat programmu mempelajari informasi baru atau saat situasi berubah! +Yang keren banget: variabel bisa berubah saat programmu berjalan (makanya namanya "variabel" – lihat caranya bermain kata!). Sama seperti kamu mungkin memperbarui kontak tempat pizza saat menemukan yang lebih baik, variabel bisa diperbarui saat programmu mendapatkan informasi baru atau situasi berubah! -Biarkan saya tunjukkan betapa sederhananya ini: +Mari saya tunjukkan betapa sederhananya ini: ```javascript -// Step 1: Creating basic variables +// Langkah 1: Membuat variabel dasar const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; @@ -324,12 +321,12 @@ let isRaining = false; **Memahami konsep ini:** - **Menyimpan** nilai yang tidak berubah dalam variabel `const` (seperti nama situs) -- **Menggunakan** `let` untuk nilai yang dapat berubah sepanjang program -- **Menetapkan** berbagai jenis data: string (teks), angka, dan boolean (benar/salah) -- **Memilih** nama deskriptif yang menjelaskan apa yang terkandung dalam setiap variabel +- **Menggunakan** `let` untuk nilai yang bisa berubah sepanjang program +- **Menetapkan** tipe data berbeda: string (teks), angka, dan boolean (true/false) +- **Memilih** nama deskriptif yang menjelaskan isi setiap variabel ```javascript -// Step 2: Working with objects to group related data +// Langkah 2: Bekerja dengan objek untuk mengelompokkan data terkait const weatherData = { location: "San Francisco", humidity: 65, @@ -337,17 +334,17 @@ const weatherData = { }; ``` -**Dalam kode di atas, kita telah:** -- **Membuat** objek untuk mengelompokkan informasi cuaca terkait -- **Mengorganisasi** beberapa potongan data di bawah satu nama variabel -- **Menggunakan** pasangan kunci-nilai untuk memberi label pada setiap potongan informasi dengan jelas +**Pada contoh di atas, kita:** +- **Membuat** objek untuk mengelompokkan informasi cuaca terkait bersama-sama +- **Mengorganisir** beberapa data di bawah satu nama variabel +- **Menggunakan** pasangan kunci-nilai untuk memberi label setiap data dengan jelas ```javascript -// Step 3: Using and updating variables +// Langkah 3: Menggunakan dan memperbarui variabel console.log(`${siteName}: Today is ${currentWeather} and ${temperature}Β°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Updating changeable variables +// Memperbarui variabel yang dapat diubah currentWeather = "cloudy"; temperature = 68; ``` @@ -356,31 +353,31 @@ temperature = 68; - **Menampilkan** informasi menggunakan template literal dengan sintaks `${}` - **Mengakses** properti objek menggunakan notasi titik (`weatherData.windSpeed`) - **Memperbarui** variabel yang dideklarasikan dengan `let` untuk mencerminkan kondisi yang berubah -- **Menggabungkan** beberapa variabel untuk membuat pesan yang bermakna +- **Menggabungkan** beberapa variabel untuk membuat pesan bermakna ```javascript -// Step 4: Modern destructuring for cleaner code +// Langkah 4: Destrukturisasi modern untuk kode yang lebih bersih const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` **Yang perlu kamu ketahui:** -- **Menarik** properti spesifik dari objek menggunakan penugasan destrukturisasi -- **Membuat** variabel baru secara otomatis dengan nama yang sama seperti kunci objek -- **Menyederhanakan** kode dengan menghindari notasi titik yang berulang +- **Mengekstrak** properti spesifik dari objek menggunakan assignment destrukturisasi +- **Membuat** variabel baru otomatis dengan nama yang sama seperti kunci objek +- **Menyederhanakan** kode dengan menghindari notasi titik yang berulang-ulang -### Alur Kontrol: Mengajari Programmu untuk Berpikir +### Alur Kontrol: Mengajarkan Programmu Berpikir -Oke, di sinilah pemrograman menjadi sangat menakjubkan! **Alur kontrol** pada dasarnya mengajari programmu bagaimana membuat keputusan cerdas, persis seperti yang kamu lakukan setiap hari tanpa memikirkannya. +Oke, di sinilah pemrograman jadi benar-benar menakjubkan! **Alur kontrol** pada dasarnya mengajarkan programmu bagaimana membuat keputusan cerdas, persis seperti yang kamu lakukan setiap hari tanpa harus berpikir keras. -Bayangkan ini: pagi ini kamu mungkin melalui sesuatu seperti "Jika hujan, saya akan membawa payung. Jika dingin, saya akan memakai jaket. Jika saya terlambat, saya akan melewatkan sarapan dan mengambil kopi di jalan." Otakmu secara alami mengikuti logika if-then ini puluhan kali setiap hari! +Bayangkan ini: pagi ini kamu mungkin melewati sesuatu seperti "Kalau hujan, saya akan mengambil payung. Kalau dingin, saya akan memakai jaket. Kalau saya terlambat, saya akan melewatkan sarapan dan minum kopi di jalan." Otakmu secara alami mengikuti logika if-then ini puluhan kali setiap hari! -Inilah yang membuat program terasa cerdas dan hidup daripada hanya mengikuti skrip yang membosankan dan dapat diprediksi. Mereka benar-benar dapat melihat situasi, mengevaluasi apa yang terjadi, dan merespons dengan tepat. Ini seperti memberi programmu otak yang dapat beradaptasi dan membuat pilihan! +Ini yang membuat program terasa cerdas dan hidup, bukan hanya menjalankan skrip membosankan dan bisa diprediksi. Mereka benar-benar bisa melihat situasi, mengevaluasi apa yang terjadi, dan merespons dengan tepat. Seperti memberikan otak pada program yang bisa beradaptasi dan membuat pilihan! -Ingin melihat betapa indahnya ini bekerja? Biarkan saya tunjukkan: +Mau lihat betapa indahnya ini bekerja? Mari saya tunjukkan: ```javascript -// Step 1: Basic conditional logic +// Langkah 1: Logika kondisional dasar const userAge = 17; if (userAge >= 18) { @@ -391,14 +388,14 @@ if (userAge >= 18) { } ``` -**Inilah yang dilakukan kode ini:** -- **Memeriksa** apakah usia pengguna memenuhi persyaratan untuk memilih -- **Menjalankan** blok kode yang berbeda berdasarkan hasil kondisi -- **Menghitung** dan menampilkan berapa lama hingga memenuhi syarat memilih jika di bawah 18 tahun -- **Memberikan** umpan balik spesifik dan bermanfaat untuk setiap skenario +**Ini yang dilakukan kode ini:** +- **Memeriksa** apakah usia pengguna memenuhi syarat memilih +- **Menjalankan** blok kode berbeda berdasarkan hasil kondisi +- **Menghitung** dan menampilkan berapa lama sampai memenuhi syarat memilih jika kurang dari 18 +- **Memberikan** umpan balik spesifik dan membantu untuk tiap skenario ```javascript -// Step 2: Multiple conditions with logical operators +// Langkah 2: Beberapa kondisi dengan operator logika const userAge = 17; const hasPermission = true; @@ -411,25 +408,25 @@ if (userAge >= 18 && hasPermission) { } ``` -**Memecah apa yang terjadi di sini:** +**Menguraikan apa yang terjadi di sini:** - **Menggabungkan** beberapa kondisi menggunakan operator `&&` (dan) -- **Membuat** hierarki kondisi menggunakan `else if` untuk beberapa skenario -- **Menangani** semua kemungkinan kasus dengan pernyataan `else` terakhir -- **Memberikan** umpan balik yang jelas dan dapat ditindaklanjuti untuk setiap situasi yang berbeda +- **Membuat** hierarki kondisi menggunakan `else if` untuk banyak skenario +- **Menangani** semua kemungkinan dengan pernyataan `else` terakhir +- **Memberikan** umpan balik yang jelas dan dapat ditindaklanjuti untuk setiap situasi berbeda ```javascript -// Step 3: Concise conditional with ternary operator +// Langkah 3: Kondisional singkat dengan operator ternary const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**Yang perlu kamu ingat:** -- **Menggunakan** operator ternary (`? :`) untuk kondisi dua opsi sederhana -- **Menulis** kondisi terlebih dahulu, diikuti oleh `?`, lalu hasil benar, lalu `:`, lalu hasil salah -- **Menerapkan** pola ini saat kamu perlu menetapkan nilai berdasarkan kondisi +**Yang perlu diingat:** +- **Menggunakan** operator ternary (`? :`) untuk kondisi dua pilihan yang sederhana +- **Menulis** kondisi terlebih dahulu, lalu `?`, hasil benar, lalu `:`, hasil salah +- **Menerapkan** pola ini saat perlu menetapkan nilai berdasarkan kondisi ```javascript -// Step 4: Handling multiple specific cases +// Langkah 4: Menangani beberapa kasus spesifik const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -449,57 +446,56 @@ switch (dayOfWeek) { } ``` -**Kode ini mencapai hal berikut:** -- **Mencocokkan** nilai variabel dengan beberapa kasus spesifik -- **Mengelompokkan** kasus serupa bersama-sama (hari kerja vs. akhir pekan) -- **Menjalankan** blok kode yang sesuai saat kecocokan ditemukan -- **Menyertakan** kasus `default` untuk menangani nilai yang tidak terduga -- **Menggunakan** pernyataan `break` untuk mencegah kode melanjutkan ke kasus berikutnya +**Kode ini melakukan hal berikut:** +- **Mencocokkan** nilai variabel terhadap beberapa kasus spesifik +- **Mengelompokkan** kasus serupa bersama (hari kerja vs akhir pekan) +- **Menjalankan** blok kode yang tepat saat ditemukan kecocokan +- **Menyertakan** kasus `default` untuk menangani nilai tak terduga +- **Menggunakan** pernyataan `break` untuk mencegah kode lanjut ke kasus berikutnya -> πŸ’‘ **Analogi dunia nyata**: Pikirkan alur kontrol seperti memiliki GPS paling sabar di dunia yang memberikanmu arahan. Mungkin mengatakan "Jika ada kemacetan di Jalan Utama, ambil jalan tol. Jika ada konstruksi yang menghalangi jalan tol, coba rute pemandangan." Program menggunakan logika kondisional yang sama untuk merespons dengan cerdas terhadap situasi yang berbeda dan selalu memberikan pengalaman terbaik kepada pengguna. +> πŸ’‘ **Analogi dunia nyata**: Anggap alur kontrol seperti GPS paling sabar di dunia yang memberimu petunjuk arah. Mungkin berkata "Jika ada kemacetan di Jalan Utama, ambil jalan tol. Jika konstruksi menghalangi jalan tol, coba jalur pemandangan." Program menggunakan logika kondisional sama seperti itu untuk merespon cerdas berbagai situasi dan selalu memberi pengguna pengalaman terbaik. -### 🎯 **Pemeriksaan Konsep: Penguasaan Komponen Dasar** +### 🎯 **Cek Konsep: Menguasai Blok Bangunan** -**Mari kita lihat sejauh mana pemahamanmu tentang dasar-dasar:** -- Bisakah kamu menjelaskan perbedaan antara variabel dan pernyataan dengan kata-katamu sendiri? -- Pikirkan skenario dunia nyata di mana kamu akan menggunakan keputusan if-then (seperti contoh pemilihan kita) -- Apa satu hal tentang logika pemrograman yang mengejutkanmu? +**Yuk cek sejauh mana pemahamanmu tentang dasar-dasar:** +- Bisakah kamu jelaskan perbedaan antara variabel dan pernyataan dengan kata-katamu sendiri? +- Pikirkan skenario dunia nyata di mana kamu akan menggunakan keputusan if-then (seperti contoh pemilihan) +- Apa satu hal tentang logika pemrograman yang membuatmu terkejut? -**Peningkat kepercayaan diri cepat:** +**Penyemangat cepat:** ```mermaid flowchart LR - A["πŸ“ Statements
(Instructions)"] --> B["πŸ“¦ Variables
(Storage)"] --> C["πŸ”€ Control Flow
(Decisions)"] --> D["πŸŽ‰ Working Program!"] + A["πŸ“ Pernyataan
(Instruksi)"] --> B["πŸ“¦ Variabel
(Penyimpanan)"] --> C["πŸ”€ Alur Kontrol
(Keputusan)"] --> D["πŸŽ‰ Program Berfungsi!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` +βœ… **Apa yang akan datang selanjutnya**: Kita akan bersenang-senang menyelami lebih dalam konsep-konsep ini saat kita melanjutkan perjalanan luar biasa ini bersama! Sekarang, fokus saja pada perasaan semangat tentang semua kemungkinan menakjubkan di depanmu. Keterampilan dan teknik spesifik akan melekat secara alami saat kita berlatih bersama – saya janji ini akan jauh lebih menyenangkan dari yang kamu kira! -βœ… **Yang akan datang**: Kita akan bersenang-senang mendalami konsep-konsep ini saat kita melanjutkan perjalanan luar biasa ini bersama! Saat ini, fokuslah pada perasaan antusias tentang semua kemungkinan luar biasa di depanmu. Keterampilan dan teknik spesifik akan melekat secara alami saat kita berlatih bersama – saya janji ini akan jauh lebih menyenangkan daripada yang kamu bayangkan! +## Alat-Alat Pilihan -## Alat yang Digunakan +Baiklah, ini benar-benar membuat saya sangat bersemangat sampai hampir tidak bisa menahan diri! πŸš€ Kita akan membahas alat luar biasa yang akan membuatmu merasa seperti baru saja diberikan kunci pesawat luar angkasa digital. -Baiklah, ini adalah bagian di mana saya sangat bersemangat sampai hampir tidak bisa menahan diri! πŸš€ Kita akan membahas alat-alat luar biasa yang akan membuatmu merasa seperti baru saja diberikan kunci ke pesawat luar angkasa digital. +Kamu tahu bagaimana koki punya pisau yang seimbang sempurna dan terasa seperti bagian dari tangannya? Atau bagaimana musisi punya gitar yang tampaknya langsung bernyanyi saat mereka menyentuhnya? Nah, para pengembang punya versi alat ajaib ini, dan ini yang akan membuatmu tercengang – sebagian besar dari alat ini benar-benar gratis! -Kamu tahu bagaimana seorang koki memiliki pisau yang seimbang sempurna yang terasa seperti perpanjangan dari tangan mereka? Atau bagaimana seorang musisi memiliki gitar yang seolah-olah bernyanyi saat mereka menyentuhnya? Nah, pengembang memiliki versi alat ajaib ini, dan inilah yang akan benar-benar membuatmu takjub – sebagian besar dari mereka benar-benar gratis! +Saya sampai melompat-lompat karena membagikan ini padamu, sebab alat-alat ini benar-benar sudah merevolusi cara kita membuat perangkat lunak. Kita berbicara tentang asisten pengkodean bertenaga AI yang bisa membantu menulis kode (saya tidak bercanda!), lingkungan cloud di mana kamu bisa membangun aplikasi lengkap dari mana saja dengan Wi-Fi, dan alat debugging yang begitu canggih seolah-olah punya penglihatan sinar-X untuk programmu. -Saya hampir melompat dari kursi saya memikirkan untuk berbagi ini denganmu karena mereka benar-benar merevolusi cara kita membangun perangkat lunak. Kita berbicara tentang asisten pengkodean bertenaga AI yang dapat membantu menulis kode (saya tidak bercanda!), lingkungan cloud di mana kamu dapat membangun aplikasi lengkap dari mana saja dengan Wi-Fi, dan alat debugging yang begitu canggih sehingga seperti memiliki penglihatan sinar-X untuk programmu. - -Dan inilah bagian yang masih membuat saya merinding: ini bukan "alat pemula" yang akan kamu tinggalkan. Ini adalah alat profesional yang sama persis yang digunakan pengembang di Google, Netflix, dan studio aplikasi indie yang kamu sukai saat ini. Kamu akan merasa seperti seorang profesional saat menggunakannya! +Dan bagian yang masih membuat saya merinding: ini bukan alat "pemula" yang bakal kamu tinggalkan nantinya. Ini adalah alat tingkat profesional yang sama yang digunakan pengembang di Google, Netflix, dan studio aplikasi indie yang kamu sukai saat ini juga. Kamu akan merasa seperti profesional saat memakainya! ```mermaid graph TD - A["πŸ’‘ Your Idea"] --> B["⌨️ Code Editor
(VS Code)"] - B --> C["🌐 Browser DevTools
(Testing & Debugging)"] - C --> D["⚑ Command Line
(Automation & Tools)"] - D --> E["πŸ“š Documentation
(Learning & Reference)"] - E --> F["πŸš€ Amazing Web App!"] + A["πŸ’‘ Ide Anda"] --> B["⌨️ Editor Kode
(VS Code)"] + B --> C["🌐 DevTools Browser
(Pengujian & Debugging)"] + C --> D["⚑ Command Line
(Otomasi & Alat)"] + D --> E["πŸ“š Dokumentasi
(Belajar & Referensi)"] + E --> F["πŸš€ Aplikasi Web Hebat!"] - B -.-> G["πŸ€– AI Assistant
(GitHub Copilot)"] - C -.-> H["πŸ“± Device Testing
(Responsive Design)"] - D -.-> I["πŸ“¦ Package Managers
(npm, yarn)"] - E -.-> J["πŸ‘₯ Community
(Stack Overflow)"] + B -.-> G["πŸ€– Asisten AI
(GitHub Copilot)"] + C -.-> H["πŸ“± Pengujian Perangkat
(Desain Responsif)"] + D -.-> I["πŸ“¦ Manajer Paket
(npm, yarn)"] + E -.-> J["πŸ‘₯ Komunitas
(Stack Overflow)"] style A fill:#fff59d style F fill:#c8e6c9 @@ -508,189 +504,190 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` - ### Editor Kode dan IDE: Sahabat Digital Barumu -Mari kita bicara tentang editor kode – ini akan menjadi tempat favoritmu untuk menghabiskan waktu! Anggap mereka sebagai tempat perlindungan pribadi untuk coding di mana kamu akan menghabiskan sebagian besar waktumu membuat dan menyempurnakan kreasi digitalmu. +Mari kita bahas editor kode – ini benar-benar akan menjadi tempat favorit baru untuk bersantai! Anggap ini sebagai tempat suci pengkodean pribadimu di mana kamu akan menghabiskan sebagian besar waktu membuat dan menyempurnakan karya digitalmu. -Tapi inilah yang benar-benar ajaib tentang editor modern: mereka bukan hanya editor teks mewah. Mereka seperti memiliki mentor coding paling brilian dan mendukung yang duduk di sebelahmu 24/7. Mereka menangkap kesalahan ketikmu sebelum kamu menyadarinya, menyarankan perbaikan yang membuatmu terlihat seperti jenius, membantu memahami apa yang dilakukan setiap bagian kode, dan beberapa dari mereka bahkan dapat memprediksi apa yang akan kamu ketik dan menawarkan untuk menyelesaikan pemikiranmu! +Tapi yang benar-benar ajaib dari editor modern: mereka bukan hanya editor teks biasa. Mereka seperti memiliki mentor pengkodean paling cerdas dan suportif duduk di sebelahmu 24/7. Mereka menangkap kesalahan ketik sebelum kamu menyadarinya, menyarankan perbaikan yang membuatmu terlihat jenius, membantu kamu memahami fungsi setiap potongan kode, dan beberapa bahkan bisa memprediksi apa yang akan kamu ketik berikutnya dan menawarkan menyelesaikan kalimatmu! -Saya ingat saat pertama kali menemukan auto-completion – saya benar-benar merasa seperti hidup di masa depan. Kamu mulai mengetik sesuatu, dan editor-mu berkata, "Hei, apakah kamu memikirkan fungsi ini yang melakukan persis apa yang kamu butuhkan?" Rasanya seperti memiliki pembaca pikiran sebagai teman coding! +Saya ingat pertama kali menemukan auto-completion – saya benar-benar merasa seperti hidup di masa depan. Kamu mulai mengetik sesuatu, dan editor berkata, "Hei, apakah kamu sedang memikirkan fungsi ini yang melakukan persis yang kamu butuhkan?" Rasanya seperti punya pembaca pikiran sebagai teman pengkodean! -**Apa yang membuat editor ini begitu luar biasa?** +**Apa yang membuat editor ini luar biasa?** Editor kode modern menawarkan berbagai fitur mengesankan yang dirancang untuk meningkatkan produktivitasmu: -| Fitur | Apa yang Dilakukan | Mengapa Membantu | -|-------|--------------------|------------------| -| **Penyorotan Sintaks** | Memberi warna pada bagian kode yang berbeda | Membuat kode lebih mudah dibaca dan menemukan kesalahan | -| **Auto-completion** | Menyarankan kode saat kamu mengetik | Mempercepat pengkodean dan mengurangi kesalahan ketik | -| **Alat Debugging** | Membantu menemukan dan memperbaiki kesalahan | Menghemat waktu berjam-jam untuk pemecahan masalah | -| **Ekstensi** | Menambahkan fitur khusus | Menyesuaikan editor untuk teknologi apa pun | -| **Asisten AI** | Menyarankan kode dan penjelasan | Mempercepat pembelajaran dan produktivitas | +| Fitur | Fungsinya | Mengapa Berguna | +|-------|-----------|-----------------| +| **Syntax Highlighting** | Memberi warna pada bagian kode berbeda | Membuat kode lebih mudah dibaca dan menemukan error | +| **Auto-completion** | Menyaran kan kode saat mengetik | Mempercepat pengkodean dan mengurangi typo | +| **Debugging Tools** | Membantu menemukan dan memperbaiki kesalahan | Menghemat waktu troubleshooting | +| **Extensions** | Menambahkan fitur khusus | Menyesuaikan editor untuk teknologi apapun | +| **AI Assistants** | Menyarankan kode dan penjelasan | Mempercepat pembelajaran dan produktivitas | -> πŸŽ₯ **Sumber Video**: Ingin melihat alat-alat ini beraksi? Lihat [video Tools of the Trade](https://youtube.com/watch?v=69WJeXGBdxg) untuk gambaran lengkap. +> πŸŽ₯ **Sumber Video**: Mau lihat alat-alat ini dalam aksi? Tonton [video Tools of the Trade](https://youtube.com/watch?v=69WJeXGBdxg) untuk gambaran lengkap. -#### Editor yang Direkomendasikan untuk Pengembangan Web +#### Editor Rekomendasi untuk Pengembangan Web **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Gratis) - Paling populer di kalangan pengembang web - Ekosistem ekstensi yang sangat baik - Terminal bawaan dan integrasi Git -- **Ekstensi wajib**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Saran kode berbasis AI - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Kolaborasi waktu nyata - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Format kode otomatis - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Menangkap kesalahan ketik dalam kode +- **Ekstensi wajib:** + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - saran kode berbasis AI + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - kolaborasi waktu nyata + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - format kode otomatis + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - menangkap typo kode **[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Berbayar, gratis untuk pelajar) -- Alat debugging dan pengujian yang canggih -- Penyelesaian kode yang cerdas +- Alat debugging dan pengujian canggih +- Penyelesaian kode cerdas - Kontrol versi bawaan -**IDE Berbasis Cloud** (Berbagai harga) -- [GitHub Codespaces](https://github.com/features/codespaces) - VS Code lengkap di browsermu +**IDE Berbasis Cloud** (Beragam harga) +- [GitHub Codespaces](https://github.com/features/codespaces) - VS Code lengkap di browser - [Replit](https://replit.com/) - Bagus untuk belajar dan berbagi kode - [StackBlitz](https://stackblitz.com/) - Pengembangan web full-stack instan -> πŸ’‘ **Tips Memulai**: Mulailah dengan Visual Studio Code – ini gratis, banyak digunakan di industri, dan memiliki komunitas besar yang membuat tutorial dan ekstensi yang bermanfaat. +> πŸ’‘ **Tips Memulai**: Mulailah dengan Visual Studio Code – gratis, banyak digunakan di industri, dan punya komunitas besar yang membuat tutorial dan ekstensi berguna. -### Browser Web: Laboratorium Rahasia Pengembanganmu +### Peramban Web: Laboratorium Pengembangan Rahasiamu -Oke, bersiaplah untuk benar-benar takjub! Kamu tahu bagaimana kamu menggunakan browser untuk menggulir media sosial dan menonton video? Nah, ternyata mereka menyembunyikan laboratorium pengembang yang luar biasa ini selama ini, hanya menunggu untuk kamu temukan! +Oke, bersiaplah untuk dibuat terpesona! Kamu tahu kan selama ini kamu menggunakan peramban untuk menggulir media sosial dan menonton video? Ternyata mereka menyembunyikan laboratorium pengembang rahasia yang luar biasa ini selama ini, menunggu untuk kamu temukan! -Setiap kali kamu mengklik kanan pada halaman web dan memilih "Inspect Element," kamu membuka dunia tersembunyi alat pengembang yang sebenarnya lebih kuat daripada beberapa perangkat lunak mahal yang dulu saya bayar ratusan dolar. Rasanya seperti menemukan bahwa dapur biasa memiliki laboratorium koki profesional di balik panel rahasia! -Pertama kali seseorang menunjukkan saya DevTools browser, saya menghabiskan waktu sekitar tiga jam hanya dengan mengklik sana-sini sambil berkata, "TUNGGU, INI BISA LAKUKAN ITU JUGA?!" Anda benar-benar bisa mengedit situs web apa pun secara real-time, melihat seberapa cepat semuanya dimuat, menguji tampilan situs Anda di berbagai perangkat, dan bahkan debug JavaScript seperti seorang profesional. Ini benar-benar luar biasa! +Setiap kali kamu klik kanan di halaman web dan memilih "Inspect Element," kamu membuka dunia tersembunyi alat pengembang yang jujur lebih kuat daripada beberapa perangkat lunak mahal yang pernah saya bayar ratusan dolar. Rasanya seperti menemukan bahwa dapur biasa kamu ternyata menyembunyikan laboratorium koki profesional di balik panel rahasia! +Pertama kali seseorang menunjukkan DevTools browser kepada saya, saya menghabiskan sekitar tiga jam hanya mengklik sana-sini sambil berkata, "TUNGGU, BISA BEGITU JUGA?!" Anda benar-benar bisa mengedit situs web apa pun secara real-time, melihat dengan tepat seberapa cepat semuanya dimuat, menguji bagaimana tampilan situs Anda di perangkat berbeda, dan bahkan melakukan debug JavaScript seperti seorang profesional. Ini benar-benar luar biasa! **Inilah mengapa browser adalah senjata rahasia Anda:** -Saat Anda membuat situs web atau aplikasi web, Anda perlu melihat bagaimana tampilannya dan cara kerjanya di dunia nyata. Browser tidak hanya menampilkan hasil kerja Anda tetapi juga memberikan umpan balik mendetail tentang kinerja, aksesibilitas, dan potensi masalah. +Saat Anda membuat situs web atau aplikasi web, Anda perlu melihat bagaimana tampilannya dan berperilaku di dunia nyata. Browser tidak hanya menampilkan karya Anda tetapi juga memberikan umpan balik rinci tentang performa, aksesibilitas, dan masalah potensial. #### Alat Pengembang Browser (DevTools) -Browser modern memiliki suite pengembangan yang sangat lengkap: +Browser modern menyertakan rangkaian pengembangan yang lengkap: | Kategori Alat | Fungsinya | Contoh Penggunaan | -|---------------|-----------|-------------------| +|---------------|--------------|------------------| | **Element Inspector** | Melihat dan mengedit HTML/CSS secara real-time | Menyesuaikan gaya untuk melihat hasil langsung | -| **Console** | Melihat pesan error dan menguji JavaScript | Debug masalah dan bereksperimen dengan kode | -| **Network Monitor** | Melacak bagaimana sumber daya dimuat | Mengoptimalkan kinerja dan waktu pemuatan | +| **Console** | Melihat pesan kesalahan dan menguji JavaScript | Debug masalah dan bereksperimen dengan kode | +| **Network Monitor** | Melacak bagaimana sumber daya dimuat | Mengoptimalkan performa dan waktu muat | | **Accessibility Checker** | Menguji desain inklusif | Memastikan situs Anda dapat digunakan oleh semua pengguna | -| **Device Simulator** | Pratinjau di berbagai ukuran layar | Menguji desain responsif tanpa banyak perangkat | +| **Device Simulator** | Pratinjau pada berbagai ukuran layar | Menguji desain responsif tanpa perangkat banyak | #### Browser yang Direkomendasikan untuk Pengembangan -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - DevTools standar industri dengan dokumentasi yang luas -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Alat CSS Grid dan aksesibilitas yang luar biasa -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Dibangun di atas Chromium dengan sumber daya pengembang dari Microsoft +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - DevTools standar industri dengan dokumentasi lengkap +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Alat CSS Grid dan aksesibilitas yang sangat baik +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Dibangun di atas Chromium dengan sumber daya pengembang Microsoft -> ⚠️ **Tip Penting untuk Pengujian**: Selalu uji situs web Anda di beberapa browser! Apa yang bekerja sempurna di Chrome mungkin terlihat berbeda di Safari atau Firefox. Pengembang profesional menguji di semua browser utama untuk memastikan pengalaman pengguna yang konsisten. +> ⚠️ **Tips Pengujian Penting**: Selalu uji situs web Anda di berbagai browser! Apa yang berjalan sempurna di Chrome mungkin tampak berbeda di Safari atau Firefox. Pengembang profesional menguji di semua browser utama untuk memastikan pengalaman pengguna yang konsisten. -### Alat Command Line: Gerbang Menuju Kekuatan Super Developer -Baiklah, mari kita jujur tentang command line, karena saya ingin Anda mendengar ini dari seseorang yang benar-benar mengerti. Saat pertama kali melihatnya – layar hitam yang menakutkan dengan teks berkedip – saya benar-benar berpikir, "Tidak, sama sekali tidak! Ini terlihat seperti sesuatu dari film hacker tahun 1980-an, dan saya jelas tidak cukup pintar untuk ini!" πŸ˜… +### Alat Baris Perintah: Gerbang Menuju Kekuatan Super Pengembang -Tapi inilah yang saya harap seseorang katakan kepada saya saat itu, dan yang saya katakan kepada Anda sekarang: command line tidak menakutkan – sebenarnya ini seperti berbicara langsung dengan komputer Anda. Anggap saja seperti perbedaan antara memesan makanan melalui aplikasi mewah dengan gambar dan menu (yang mudah dan nyaman) versus masuk ke restoran lokal favorit Anda di mana koki tahu persis apa yang Anda suka dan bisa membuat sesuatu yang sempurna hanya dengan Anda berkata "kejutan saya dengan sesuatu yang luar biasa." +Oke, mari kita jujur sebentar tentang baris perintah, karena saya ingin Anda mendengarnya dari seseorang yang benar-benar mengerti. Ketika pertama kali saya melihatnya – hanya layar hitam menakutkan dengan teks berkedip – saya benar-benar berpikir, "Tidak, sama sekali tidak! Ini terlihat seperti sesuatu dari film hacker tahun 1980-an, dan saya pasti tidak cukup pintar untuk ini!" πŸ˜… -Command line adalah tempat para pengembang merasa seperti penyihir sejati. Anda mengetik beberapa kata ajaib (oke, itu hanya perintah, tapi rasanya ajaib!), tekan enter, dan BOOM – Anda telah membuat struktur proyek, menginstal alat-alat canggih dari seluruh dunia, atau menerbitkan aplikasi Anda ke internet untuk dilihat jutaan orang. Setelah Anda merasakan kekuatan itu, rasanya benar-benar adiktif! +Tapi inilah yang saya harap seseorang katakan kepada saya saat itu, dan yang saya katakan kepada Anda sekarang: baris perintah tidak menakutkan – sebenarnya seperti berbicara langsung dengan komputer Anda. Anggaplah ini seperti perbedaan antara memesan makanan lewat aplikasi mewah dengan gambar dan menu (yang mudah dan nyaman) dibandingkan masuk ke restoran lokal favorit Anda di mana kokinya tahu persis apa yang Anda suka dan bisa membuatkan sesuatu yang sempurna hanya dengan Anda berkata "kejutan sesuatu yang luar biasa." -**Mengapa command line akan menjadi alat favorit Anda:** +Baris perintah adalah tempat para pengembang merasa seperti penyihir sejati. Anda mengetik beberapa kata yang tampak ajaib (oke, sebenarnya perintah biasa, tapi terasa ajaib!), tekan enter, dan BOOM – Anda telah membuat seluruh struktur proyek, memasang alat kuat dari seluruh dunia, atau meluncurkan aplikasi Anda ke internet agar jutaan orang melihat. Setelah Anda merasakan kekuatan itu, jujur sangat adiktif! -Meskipun antarmuka grafis bagus untuk banyak tugas, command line unggul dalam hal otomatisasi, presisi, dan kecepatan. Banyak alat pengembangan bekerja terutama melalui antarmuka command line, dan belajar menggunakannya dengan efisien dapat secara dramatis meningkatkan produktivitas Anda. +**Mengapa baris perintah akan menjadi alat favorit Anda:** + +Meskipun antarmuka grafis bagus untuk banyak tugas, baris perintah unggul dalam otomatisasi, presisi, dan kecepatan. Banyak alat pengembangan bekerja terutama melalui antarmuka baris perintah, dan mempelajarinya dengan efisien dapat meningkatkan produktivitas Anda secara dramatis. ```bash -# Step 1: Create and navigate to project directory +# Langkah 1: Buat dan navigasi ke direktori proyek mkdir my-awesome-website cd my-awesome-website ``` -**Apa yang dilakukan kode ini:** +**Inilah yang dilakukan kode ini:** - **Membuat** direktori baru bernama "my-awesome-website" untuk proyek Anda -- **Masuk** ke direktori yang baru dibuat untuk mulai bekerja +- **Masuk** ke dalam direktori yang baru dibuat untuk mulai bekerja ```bash -# Step 2: Initialize project with package.json +# Langkah 2: Inisialisasi proyek dengan package.json npm init -y -# Install modern development tools +# Instal alat pengembangan modern npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` **Langkah demi langkah, inilah yang terjadi:** -- **Menginisialisasi** proyek Node.js baru dengan pengaturan default menggunakan `npm init -y` -- **Menginstal** Vite sebagai alat build modern untuk pengembangan cepat dan build produksi -- **Menambahkan** Prettier untuk format kode otomatis dan ESLint untuk pemeriksaan kualitas kode -- **Menggunakan** flag `--save-dev` untuk menandai ini sebagai dependensi khusus pengembangan +- **Inisialisasi** proyek Node.js baru dengan pengaturan default menggunakan `npm init -y` +- **Pasang** Vite sebagai alat build modern untuk pengembangan cepat dan produksi +- **Tambahkan** Prettier untuk format kode otomatis dan ESLint untuk pemeriksaan kualitas kode +- **Gunakan** flag `--save-dev` untuk menandai ini sebagai dependensi pengembangan saja ```bash -# Step 3: Create project structure and files +# Langkah 3: Buat struktur dan berkas proyek mkdir src assets echo 'My Site

Hello World

' > index.html -# Start development server +# Mulai server pengembangan npx vite ``` -**Dalam kode di atas, kita telah:** -- **Mengorganisasi** proyek dengan membuat folder terpisah untuk kode sumber dan aset +**Dalam kode di atas, kami telah:** +- **Mengorganisir** proyek dengan membuat folder terpisah untuk kode sumber dan aset - **Menghasilkan** file HTML dasar dengan struktur dokumen yang benar -- **Memulai** server pengembangan Vite untuk live reloading dan hot module replacement +- **Menjalankan** server pengembangan Vite untuk live reload dan hot module replacement -#### Alat Command Line Penting untuk Pengembangan Web +#### Alat Baris Perintah Esensial untuk Pengembangan Web | Alat | Tujuan | Mengapa Anda Membutuhkannya | -|------|--------|-----------------------------| -| **[Git](https://git-scm.com/)** | Kontrol versi | Melacak perubahan, berkolaborasi dengan orang lain, mencadangkan pekerjaan Anda | -| **[Node.js & npm](https://nodejs.org/)** | Runtime JavaScript & manajemen paket | Menjalankan JavaScript di luar browser, menginstal alat pengembangan modern | -| **[Vite](https://vitejs.dev/)** | Alat build & server pengembangan | Pengembangan super cepat dengan hot module replacement | -| **[ESLint](https://eslint.org/)** | Kualitas kode | Secara otomatis menemukan dan memperbaiki masalah dalam JavaScript Anda | -| **[Prettier](https://prettier.io/)** | Format kode | Menjaga kode Anda tetap terformat dan mudah dibaca | +|------|---------|-----------------| +| **[Git](https://git-scm.com/)** | Kontrol versi | Melacak perubahan, kolaborasi, backup pekerjaan | +| **[Node.js & npm](https://nodejs.org/)** | Runtime JavaScript & manajemen paket | Menjalankan JavaScript di luar browser, pasang alat pengembangan modern | +| **[Vite](https://vitejs.dev/)** | Alat build & server dev | Pengembangan cepat dengan hot module replacement | +| **[ESLint](https://eslint.org/)** | Kualitas kode | Temukan dan perbaiki masalah JavaScript secara otomatis | +| **[Prettier](https://prettier.io/)** | Format kode | Jaga kode Anda konsisten dan mudah dibaca | #### Opsi Khusus Platform **Windows:** - **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Terminal modern dengan fitur lengkap - **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** πŸ’» - Lingkungan scripting yang kuat -- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** πŸ’» - Command line tradisional Windows +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** πŸ’» - Baris perintah Windows tradisional **macOS:** - **[Terminal](https://support.apple.com/guide/terminal/)** πŸ’» - Aplikasi terminal bawaan -- **[iTerm2](https://iterm2.com/)** - Terminal yang ditingkatkan dengan fitur canggih +- **[iTerm2](https://iterm2.com/)** - Terminal yang ditingkatkan dengan fitur lanjutan **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** πŸ’» - Shell standar Linux +- **[Bash](https://www.gnu.org/software/bash/)** πŸ’» - Shell Linux standar - **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Emulator terminal canggih -> πŸ’» = Sudah terinstal di sistem operasi +> πŸ’» = Sudah terpasang di sistem operasi -> 🎯 **Jalur Pembelajaran**: Mulailah dengan perintah dasar seperti `cd` (mengubah direktori), `ls` atau `dir` (daftar file), dan `mkdir` (membuat folder). Latih dengan perintah alur kerja modern seperti `npm install`, `git status`, dan `code .` (membuka direktori saat ini di VS Code). Seiring Anda semakin nyaman, Anda akan secara alami mempelajari perintah yang lebih canggih dan teknik otomatisasi. +> 🎯 **Jalur Pembelajaran**: Mulailah dengan perintah dasar seperti `cd` (pindah direktori), `ls` atau `dir` (daftar file), dan `mkdir` (buat folder). Berlatih dengan perintah alur kerja modern seperti `npm install`, `git status`, dan `code .` (membuka direktori saat ini di VS Code). Saat Anda semakin nyaman, Anda akan secara alami mempelajari perintah dan teknik otomatisasi yang lebih maju. -### Dokumentasi: Mentor Belajar yang Selalu Tersedia -Baiklah, saya akan berbagi rahasia kecil yang akan membuat Anda merasa jauh lebih baik sebagai pemula: bahkan pengembang paling berpengalaman menghabiskan sebagian besar waktu mereka membaca dokumentasi. Dan itu bukan karena mereka tidak tahu apa yang mereka lakukan – itu sebenarnya tanda kebijaksanaan! +### Dokumentasi: Mentor Belajar Anda yang Selalu Tersedia -Anggap dokumentasi sebagai akses ke guru paling sabar dan berpengetahuan di dunia yang tersedia 24/7. Terjebak pada masalah jam 2 pagi? Dokumentasi ada di sana dengan pelukan virtual hangat dan jawaban yang Anda butuhkan. Ingin belajar tentang fitur baru yang keren yang sedang dibicarakan semua orang? Dokumentasi mendukung Anda dengan contoh langkah demi langkah. Mencoba memahami mengapa sesuatu bekerja seperti itu? Anda tahu – dokumentasi siap menjelaskannya dengan cara yang akhirnya membuat Anda mengerti! +Oke, saya akan membagikan rahasia kecil yang akan membuat Anda merasa jauh lebih baik sebagai pemula: bahkan pengembang paling berpengalaman menghabiskan sebagian besar waktunya membaca dokumentasi. Dan itu bukan karena mereka tidak tahu apa yang mereka lakukan – itu sebenarnya tanda kebijaksanaan! -Inilah sesuatu yang benar-benar mengubah perspektif saya: dunia pengembangan web bergerak sangat cepat, dan tidak ada (saya maksud benar-benar tidak ada!) yang mengingat semuanya. Saya telah melihat pengembang senior dengan pengalaman lebih dari 15 tahun mencari sintaks dasar, dan Anda tahu apa? Itu bukan memalukan – itu pintar! Ini bukan tentang memiliki ingatan yang sempurna; ini tentang mengetahui di mana menemukan jawaban yang dapat diandalkan dengan cepat dan memahami cara menerapkannya. +Anggaplah dokumentasi seperti memiliki akses ke guru paling sabar dan berpengetahuan di dunia yang tersedia 24/7. Terjebak pada masalah jam 2 pagi? Dokumentasi hadir dengan pelukan virtual hangat dan jawaban yang tepat Anda butuhkan. Mau belajar fitur baru keren yang sedang ramai dibicarakan? Dokumentasi mendukung Anda dengan contoh langkah demi langkah. Mencoba memahami mengapa sesuatu bekerja seperti itu? Anda benar – dokumentasi siap menjelaskannya sampai Anda benar-benar paham! -**Di sinilah keajaiban sebenarnya terjadi:** +Ini sesuatu yang benar-benar mengubah perspektif saya: dunia pengembangan web bergerak sangat cepat, dan tidak ada siapa pun (benar-benar tidak ada!) yang menghafal semuanya. Saya pernah melihat pengembang senior dengan pengalaman 15+ tahun mencari sintaks dasar, dan tahu apa? Itu bukan memalukan – itu pintar! Bukan soal menghafal sempurna; ini soal tahu di mana menemukan jawaban yang dapat dipercaya dengan cepat dan memahami cara menggunakannya. -Pengembang profesional menghabiskan sebagian besar waktu mereka membaca dokumentasi – bukan karena mereka tidak tahu apa yang mereka lakukan, tetapi karena lanskap pengembangan web berkembang begitu cepat sehingga tetap terkini membutuhkan pembelajaran terus-menerus. Dokumentasi yang baik membantu Anda memahami tidak hanya *bagaimana* menggunakan sesuatu, tetapi juga *mengapa* dan *kapan* menggunakannya. +**Inilah tempat keajaiban sebenarnya terjadi:** + +Pengembang profesional menghabiskan banyak waktu membaca dokumentasi – bukan karena tidak tahu apa yang dilakukan, tetapi karena lanskap pengembangan web berkembang begitu cepat sehingga tetap up-to-date membutuhkan pembelajaran terus-menerus. Dokumentasi bagus membantu Anda memahami bukan hanya *bagaimana* menggunakan sesuatu, tetapi *mengapa* dan *kapan* menggunakannya. #### Sumber Dokumentasi Penting **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** - Standar emas untuk dokumentasi teknologi web -- Panduan lengkap untuk HTML, CSS, dan JavaScript +- Panduan komprehensif untuk HTML, CSS, dan JavaScript - Termasuk informasi kompatibilitas browser -- Menampilkan contoh praktis dan demo interaktif +- Menyediakan contoh praktis dan demo interaktif **[Web.dev](https://web.dev)** (oleh Google) - Praktik terbaik pengembangan web modern -- Panduan optimasi kinerja -- Prinsip desain inklusif dan aksesibilitas +- Panduan optimasi performa +- Prinsip aksesibilitas dan desain inklusif - Studi kasus dari proyek dunia nyata **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** @@ -700,159 +697,159 @@ Pengembang profesional menghabiskan sebagian besar waktu mereka membaca dokument **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** - Kurikulum pembelajaran terstruktur -- Kursus video dari pakar industri -- Latihan coding langsung +- Kursus video dari para ahli industri +- Latihan pengkodean langsung -> πŸ“š **Strategi Belajar**: Jangan mencoba menghafal dokumentasi – sebaliknya, pelajari cara menavigasinya dengan efisien. Tandai referensi yang sering digunakan dan latih menggunakan fungsi pencarian untuk menemukan informasi spesifik dengan cepat. +> πŸ“š **Strategi Belajar**: Jangan mencoba menghafal dokumentasi – sebaliknya, pelajari cara menavigasi dengan efisien. Tandai referensi yang sering digunakan dan latih menggunakan fungsi pencarian untuk menemukan informasi spesifik dengan cepat. -### πŸ”§ **Cek Penguasaan Alat: Apa yang Menarik Perhatian Anda?** +### πŸ”§ **Pemeriksaan Penguasaan Alat: Apa yang Membekas Pada Anda?** -**Luangkan waktu sejenak untuk mempertimbangkan:** -- Alat mana yang paling Anda ingin coba pertama kali? (Tidak ada jawaban yang salah!) -- Apakah command line masih terasa menakutkan, atau Anda mulai penasaran? -- Bisakah Anda membayangkan menggunakan DevTools browser untuk mengintip di balik layar situs web favorit Anda? +**Luangkan waktu untuk mempertimbangkan:** +- Alat mana yang paling Anda ingin coba dulu? (Tidak ada jawaban salah!) +- Apakah baris perintah masih terasa menakutkan, atau Anda semakin penasaran? +- Bisakah Anda membayangkan menggunakan DevTools browser untuk mengintip sisi dalam situs favorit Anda? ```mermaid -pie title "Developer Time Spent With Tools" - "Code Editor" : 40 - "Browser Testing" : 25 - "Command Line" : 15 - "Reading Docs" : 15 +pie title "Waktu Pengembang yang Di Habiskan Dengan Alat" + "Editor Kode" : 40 + "Pengujian Browser" : 25 + "Baris Perintah" : 15 + "Membaca Dokumen" : 15 "Debugging" : 5 ``` +> **Wawasan menyenangkan**: Sebagian besar pengembang menghabiskan sekitar 40% waktunya di editor kode, tapi perhatikan berapa banyak waktu yang dihabiskan untuk pengujian, belajar, dan memecahkan masalah. Pemrograman bukan hanya tentang menulis kode – ini tentang menciptakan pengalaman! -> **Wawasan menarik**: Sebagian besar pengembang menghabiskan sekitar 40% waktu mereka di editor kode, tetapi perhatikan berapa banyak waktu yang dihabiskan untuk pengujian, pembelajaran, dan pemecahan masalah. Pemrograman bukan hanya tentang menulis kode – ini tentang menciptakan pengalaman! - -βœ… **Bahan untuk dipikirkan**: Berikut sesuatu yang menarik untuk direnungkan – bagaimana menurut Anda alat untuk membangun situs web (pengembangan) mungkin berbeda dari alat untuk mendesain tampilannya (desain)? Ini seperti perbedaan antara menjadi arsitek yang merancang rumah indah dan kontraktor yang benar-benar membangunnya. Keduanya sangat penting, tetapi membutuhkan kotak alat yang berbeda! Pemikiran seperti ini benar-benar akan membantu Anda melihat gambaran besar bagaimana situs web tercipta. +βœ… **Bahan renungan**: Ini sesuatu yang menarik untuk dipikirkan – menurut Anda, alat membangun situs web (pengembangan) mungkin berbeda apa ya dengan alat mendesain bagaimana tampilannya (desain)? Ini seperti perbedaan antara arsitek yang merancang rumah indah dan kontraktor yang membangunnya. Keduanya penting, tetapi membutuhkan kotak peralatan berbeda! Jenis pemikiran ini akan membantu Anda melihat gambaran besar bagaimana situs web menjadi hidup. -## Tantangan Agen GitHub Copilot πŸš€ +## Tantangan GitHub Copilot Agent πŸš€ Gunakan mode Agen untuk menyelesaikan tantangan berikut: -**Deskripsi:** Jelajahi fitur editor kode modern atau IDE dan tunjukkan bagaimana itu dapat meningkatkan alur kerja Anda sebagai pengembang web. +**Deskripsi:** Jelajahi fitur editor kode modern atau IDE dan tunjukkan bagaimana alat itu dapat meningkatkan alur kerja Anda sebagai pengembang web. -**Prompt:** Pilih editor kode atau IDE (seperti Visual Studio Code, WebStorm, atau IDE berbasis cloud). Daftar tiga fitur atau ekstensi yang membantu Anda menulis, debug, atau memelihara kode lebih efisien. Untuk masing-masing, berikan penjelasan singkat tentang bagaimana itu bermanfaat bagi alur kerja Anda. +**Prompt:** Pilih editor kode atau IDE (seperti Visual Studio Code, WebStorm, atau IDE berbasis cloud). Daftar tiga fitur atau ekstensi yang membantu Anda menulis, debug, atau memelihara kode dengan lebih efisien. Untuk masing-masing, berikan penjelasan singkat bagaimana itu menguntungkan alur kerja Anda. --- ## πŸš€ Tantangan -**Baiklah, detektif, siap untuk kasus pertama Anda?** +**Oke, detektif, siap untuk kasus pertama Anda?** -Sekarang setelah Anda memiliki dasar yang luar biasa ini, saya punya petualangan yang akan membantu Anda melihat betapa beragam dan menariknya dunia pemrograman. Dan dengar – ini bukan tentang menulis kode dulu, jadi tidak ada tekanan di sana! Anggap diri Anda sebagai detektif bahasa pemrograman dalam kasus pertama yang sangat menarik! +Sekarang Anda telah memiliki fondasi hebat ini, saya punya petualangan yang akan membantu Anda melihat betapa beragam dan menariknya dunia pemrograman sesungguhnya. Dan dengarkan – ini bukan soal menulis kode dulu, jadi jangan merasa tertekan! Anggap diri Anda sebagai detektif bahasa pemrograman pada kasus pertama yang seru ini! -**Misi Anda, jika Anda memilih untuk menerimanya:** -1. **Jadilah penjelajah bahasa**: Pilih tiga bahasa pemrograman dari dunia yang benar-benar berbeda – mungkin satu yang membangun situs web, satu yang membuat aplikasi seluler, dan satu yang menganalisis data untuk para ilmuwan. Temukan contoh tugas sederhana yang sama yang ditulis dalam setiap bahasa. Saya jamin Anda akan benar-benar kagum melihat betapa berbeda mereka bisa terlihat saat melakukan hal yang sama! +**Misi Anda, jika Anda memutuskan untuk menerimanya:** +1. **Jadilah penjelajah bahasa:** Pilih tiga bahasa pemrograman dari dunia yang benar-benar berbeda – mungkin satu yang membangun situs web, satu yang membuat aplikasi seluler, dan satu yang mengolah data untuk ilmuwan. Temukan contoh tugas sederhana yang sama ditulis dalam setiap bahasa. Saya jamin Anda akan sangat takjub melihat betapa berbeda tampilannya walaupun melakukan hal yang sama! -2. **Ungkap cerita asal mereka**: Apa yang membuat setiap bahasa istimewa? Berikut fakta keren – setiap bahasa pemrograman diciptakan karena seseorang berpikir, "Anda tahu apa? Harus ada cara yang lebih baik untuk menyelesaikan masalah ini." Bisakah Anda mencari tahu apa masalah itu? Beberapa cerita ini benar-benar menarik! +2. **Ungkap cerita asal-usulnya:** Apa yang membuat setiap bahasa istimewa? Ini fakta keren – setiap bahasa pemrograman dibuat karena seseorang berpikir, "Tahu nggak? Harus ada cara lebih baik untuk menyelesaikan masalah spesifik ini." Bisakah Anda cari tahu masalah apa yang mereka selesaikan? Beberapa cerita ini benar-benar menarik! -3. **Temui komunitasnya**: Lihat bagaimana ramah dan penuh semangat komunitas setiap bahasa. Beberapa memiliki jutaan pengembang yang berbagi pengetahuan dan saling membantu, yang lain lebih kecil tetapi sangat erat dan mendukung. Anda akan menyukai melihat kepribadian berbeda yang dimiliki komunitas ini! +3. **Temui komunitasnya:** Lihat seberapa ramah dan antusias komunitas masing-masing bahasa. Beberapa punya jutaan pengembang berbagi ilmu dan saling membantu, yang lain lebih kecil tapi sangat kompak dan suportif. Anda akan senang melihat berbagai kepribadian komunitas ini! -4. **Ikuti insting Anda**: Bahasa mana yang terasa paling mudah didekati bagi Anda saat ini? Jangan stres tentang membuat pilihan "sempurna" – cukup dengarkan insting Anda! Tidak ada jawaban yang salah di sini, dan Anda selalu bisa menjelajahi yang lain nanti. +4. **Ikuti intuisi Anda:** Bahasa mana yang terasa paling mudah didekati bagi Anda sekarang? Jangan khawatir soal memilih yang "sempurna" – cukup dengarkan insting Anda! Tidak ada jawaban salah di sini, dan Anda selalu bisa menjelajahi lainnya nanti. -**Pekerjaan detektif bonus**: Cari tahu situs web atau aplikasi besar apa yang dibangun dengan setiap bahasa. Saya jamin Anda akan terkejut mengetahui apa yang menggerakkan Instagram, Netflix, atau game seluler yang tidak bisa Anda hentikan! +**Kerja bonus detektif:** Cari tahu situs web atau aplikasi besar apa saja yang dibangun dengan masing-masing bahasa. Saya jamin Anda akan terkejut mengetahui apa yang menjalankan Instagram, Netflix, atau game seluler favorit Anda yang tidak bisa berhenti dimainkan! -> πŸ’‘ **Ingat**: Anda tidak mencoba menjadi ahli dalam salah satu bahasa ini hari ini. Anda hanya mengenal lingkungan sebelum memutuskan di mana Anda ingin menetap. Luangkan waktu Anda, nikmati, dan biarkan rasa ingin tahu Anda memandu Anda! +> πŸ’‘ **Ingat**: Anda tidak mencoba menjadi ahli di salah satu bahasa hari ini. Anda hanya mengenal lingkungan di sekitarnya sebelum memutuskan tempat yang ingin Anda jadikan markas. Santai saja, bersenang-senanglah, dan biarkan rasa ingin tahu memandu Anda! -## Mari Rayakan Apa yang Telah Anda Temukan! +## Mari Rayakan Apa yang Sudah Anda Temukan! -Wow, Anda telah menyerap begitu banyak informasi luar biasa hari ini! Saya benar-benar bersemangat melihat seberapa banyak dari perjalanan luar biasa ini yang melekat pada Anda. Dan ingat – ini bukan ujian di mana Anda harus mendapatkan semuanya dengan sempurna. Ini lebih seperti perayaan semua hal keren yang telah Anda pelajari tentang dunia yang menarik ini yang akan Anda masuki! +Astaga, Anda telah menyerap begitu banyak informasi hebat hari ini! Saya benar-benar bersemangat melihat seberapa banyak dari perjalanan menakjubkan ini yang sudah Anda ingat. Dan ingat – ini bukan ujian yang harus sempurna. Ini lebih seperti perayaan semua hal keren yang sudah Anda pelajari tentang dunia menarik yang akan Anda masuki! -[Ambil kuis pasca-pelajaran](https://ff-quizzes.netlify.app/web/) -## Tinjauan & Belajar Mandiri +[Ikuti kuis pasca-pembelajaran](https://ff-quizzes.netlify.app/web/) -**Luangkan waktu untuk menjelajahi dan bersenang-senang!** +## Ulasan & Belajar Mandiri -Hari ini kamu telah mempelajari banyak hal, dan itu adalah sesuatu yang patut dibanggakan! Sekarang saatnya bagian yang menyenangkan – menjelajahi topik yang menarik perhatianmu. Ingat, ini bukan tugas – ini adalah petualangan! +**Luangkan waktu untuk mengeksplorasi dan bersenang-senang!** +Anda telah melangkah jauh hari ini, dan itu adalah sesuatu yang patut dibanggakan! Sekarang saatnya bagian yang menyenangkan – menjelajahi topik-topik yang memicu rasa penasaran Anda. Ingat, ini bukan pekerjaan rumah – ini adalah petualangan! -**Mendalami hal yang membuatmu bersemangat:** +**Menyelami lebih dalam apa yang membuat Anda bersemangat:** -**Praktik langsung dengan bahasa pemrograman:** -- Kunjungi situs resmi dari 2-3 bahasa yang menarik perhatianmu. Setiap bahasa memiliki kepribadian dan ceritanya sendiri! -- Coba beberapa playground coding online seperti [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), atau [Replit](https://replit.com/). Jangan takut untuk bereksperimen – kamu tidak akan merusak apa pun! -- Baca tentang bagaimana bahasa favoritmu diciptakan. Serius, beberapa cerita asal-usulnya sangat menarik dan akan membantumu memahami mengapa bahasa tersebut bekerja seperti itu. +**Berinteraksi langsung dengan bahasa pemrograman:** +- Kunjungi situs resmi 2-3 bahasa yang menarik perhatian Anda. Masing-masing memiliki kepribadian dan kisahnya sendiri! +- Coba beberapa playground coding online seperti [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), atau [Replit](https://replit.com/). Jangan takut bereksperimen – Anda tidak akan merusak apa pun! +- Baca tentang bagaimana bahasa favorit Anda terbentuk. Serius, beberapa cerita asal usul ini sangat menarik dan akan membantu Anda memahami mengapa bahasa bekerja seperti itu. -**Kenali alat-alat barumu:** -- Unduh Visual Studio Code jika belum – ini gratis dan kamu pasti akan menyukainya! -- Luangkan beberapa menit untuk menjelajahi marketplace Extensions. Ini seperti toko aplikasi untuk editor kodenya! -- Buka Developer Tools di browsermu dan klik di sana-sini. Jangan khawatir jika belum memahami semuanya – cukup kenali apa saja yang ada di sana. +**Mengenal alat baru Anda:** +- Unduh Visual Studio Code jika Anda belum melakukannya – ini gratis dan Anda akan menyukainya! +- Luangkan beberapa menit untuk menjelajahi marketplace Extensions. Ini seperti toko aplikasi untuk editor kode Anda! +- Buka Developer Tools browser Anda dan klik-clic saja. Jangan khawatir memahami semuanya – cukup kenali apa yang ada di sana. **Bergabung dengan komunitas:** -- Ikuti beberapa komunitas pengembang di [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), atau [GitHub](https://github.com/). Komunitas pemrograman sangat ramah terhadap pemula! -- Tonton beberapa video coding yang ramah pemula di YouTube. Ada banyak kreator hebat di luar sana yang mengingat bagaimana rasanya memulai. -- Pertimbangkan untuk bergabung dengan meetup lokal atau komunitas online. Percayalah, pengembang senang membantu pemula! +- Ikuti beberapa komunitas pengembang di [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), atau [GitHub](https://github.com/). Komunitas pemrograman sangat ramah terhadap pendatang baru! +- Tonton beberapa video coding ramah pemula di YouTube. Ada banyak pembuat konten hebat di luar sana yang ingat bagaimana rasanya memulai. +- Pertimbangkan bergabung dengan meetups lokal atau komunitas online. Percayalah, para pengembang senang membantu pendatang baru! -> 🎯 **Dengar, ini yang ingin aku sampaikan**: Kamu tidak diharapkan menjadi ahli coding dalam semalam! Saat ini, kamu hanya sedang mengenal dunia luar biasa yang akan kamu masuki. Luangkan waktu, nikmati perjalanan, dan ingat – setiap pengembang yang kamu kagumi dulu pernah berada di posisi yang sama seperti kamu sekarang, merasa bersemangat dan mungkin sedikit kewalahan. Itu sangat normal, dan itu berarti kamu sedang melakukannya dengan benar! +> 🎯 **Dengar, ini yang saya ingin Anda ingat**: Anda tidak diharapkan menjadi ahli coding dalam semalam! Saat ini, Anda baru mengenal dunia luar biasa yang akan menjadi bagian Anda. Santai saja, nikmati perjalanan, dan ingat – setiap pengembang yang Anda kagumi dulu juga pernah duduk tepat di tempat Anda sekarang, merasa bersemangat dan mungkin sedikit kewalahan. Itu sangat normal, dan itu berarti Anda melangkah dengan benar! ## Tugas -[Reading the Docs](assignment.md) +[Membaca Dokumentasi](assignment.md) -> πŸ’‘ **Sedikit dorongan untuk tugasmu**: Aku sangat ingin melihatmu menjelajahi beberapa alat yang belum kita bahas! Lewati editor, browser, dan alat command line yang sudah kita bicarakan – ada seluruh dunia alat pengembangan luar biasa di luar sana yang menunggu untuk ditemukan. Cari yang aktif dipelihara dan memiliki komunitas yang hidup dan membantu (biasanya alat seperti ini memiliki tutorial terbaik dan orang-orang yang paling mendukung saat kamu mengalami kesulitan dan membutuhkan bantuan). +> πŸ’‘ **Sedikit dorongan untuk tugas Anda**: Saya sangat ingin melihat Anda menjelajahi beberapa alat yang belum kita bahas! Lewatkan editor, browser, dan alat baris perintah yang sudah kita bicarakan – ada semesta alat pengembangan luar biasa lainnya yang menunggu untuk ditemukan. Cari yang aktif dipelihara dan memiliki komunitas yang hidup dan membantu (biasanya mereka punya tutorial terbaik dan orang-orang paling suportif saat Anda mengalami kebuntuan dan butuh bantuan ramah). --- -## πŸš€ Garis Waktu Perjalanan Pemrogramanmu +## πŸš€ Garis Waktu Perjalanan Pemrograman Anda -### ⚑ **Yang Bisa Kamu Lakukan dalam 5 Menit ke Depan** -- [ ] Tandai 2-3 situs web bahasa pemrograman yang menarik perhatianmu -- [ ] Unduh Visual Studio Code jika belum -- [ ] Buka DevTools di browsermu (F12) dan klik di sana-sini di situs web mana saja +### ⚑ **Apa yang Bisa Anda Lakukan Dalam 5 Menit ke Depan** +- [ ] Tandai 2-3 situs bahasa pemrograman yang menarik perhatian Anda +- [ ] Unduh Visual Studio Code jika belum dilakukan +- [ ] Buka DevTools browser Anda (F12) dan klik-klick di sembarang situs web - [ ] Bergabung dengan satu komunitas pemrograman (Dev.to, Reddit r/webdev, atau Stack Overflow) -### ⏰ **Yang Bisa Kamu Capai dalam Satu Jam** -- [ ] Selesaikan kuis pasca-pelajaran dan refleksikan jawabanmu -- [ ] Pasang VS Code dengan ekstensi GitHub Copilot -- [ ] Coba contoh "Hello World" di 2 bahasa pemrograman yang berbeda secara online -- [ ] Tonton video "Day in the Life of a Developer" di YouTube -- [ ] Mulai pekerjaan detektif bahasa pemrogramanmu (dari tantangan) +### ⏰ **Apa yang Bisa Anda Capai Dalam Satu Jam Ini** +- [ ] Selesaikan kuis pasca-pelajaran dan renungkan jawaban Anda +- [ ] Siapkan VS Code dengan ekstensi GitHub Copilot +- [ ] Coba contoh "Hello World" di 2 bahasa pemrograman berbeda secara online +- [ ] Tonton video "Sehari Dalam Kehidupan Seorang Pengembang" di YouTube +- [ ] Mulai pekerjaan detektif bahasa pemrograman Anda (dari tantangan) -### πŸ“… **Petualangan Selama Seminggu** +### πŸ“… **Petualangan Anda Selama Seminggu** - [ ] Selesaikan tugas dan jelajahi 3 alat pengembangan baru - [ ] Ikuti 5 pengembang atau akun pemrograman di media sosial -- [ ] Coba membuat sesuatu kecil di CodePen atau Replit (bahkan hanya "Hello, [Nama Kamu]!") +- [ ] Coba bangun sesuatu yang kecil di CodePen atau Replit (bahkan hanya "Hello, [Nama Anda]!") - [ ] Baca satu posting blog pengembang tentang perjalanan coding seseorang -- [ ] Bergabung dengan meetup virtual atau tonton pembicaraan tentang pemrograman -- [ ] Mulai belajar bahasa pilihanmu dengan tutorial online +- [ ] Ikuti meetup virtual atau tonton ceramah pemrograman +- [ ] Mulai belajar bahasa pilihan Anda dengan tutorial online -### πŸ—“οΈ **Transformasi Selama Sebulan** -- [ ] Buat proyek kecil pertamamu (bahkan halaman web sederhana pun sudah cukup!) +### πŸ—“οΈ **Transformasi Anda Selama Sebulan** +- [ ] Bangun proyek kecil pertama Anda (bahkan halaman web sederhana sudah dihitung!) - [ ] Berkontribusi pada proyek open-source (mulai dengan perbaikan dokumentasi) -- [ ] Mentor seseorang yang baru memulai perjalanan pemrogramannya -- [ ] Buat situs web portofolio pengembangmu +- [ ] Mentori seseorang yang baru memulai perjalanan pemrogramannya +- [ ] Buat situs portofolio pengembang Anda - [ ] Terhubung dengan komunitas pengembang lokal atau kelompok belajar -- [ ] Mulai merencanakan tonggak pembelajaran berikutnya +- [ ] Mulai rencanakan tonggak pembelajaran berikutnya ### 🎯 **Refleksi Akhir** -**Sebelum melanjutkan, luangkan waktu untuk merayakan:** -- Apa satu hal tentang pemrograman yang membuatmu bersemangat hari ini? -- Alat atau konsep mana yang ingin kamu eksplorasi pertama kali? -- Bagaimana perasaanmu tentang memulai perjalanan pemrograman ini? -- Apa satu pertanyaan yang ingin kamu tanyakan kepada pengembang saat ini? +**Sebelum melanjutkan, luangkan waktu merayakan:** +- Apa satu hal tentang pemrograman yang membuat Anda bersemangat hari ini? +- Alat atau konsep apa yang ingin Anda eksplorasi duluan? +- Bagaimana perasaan Anda tentang memulai perjalanan pemrograman ini? +- Apa satu pertanyaan yang ingin Anda tanyakan kepada pengembang sekarang? ```mermaid journey - title Your Confidence Building Journey - section Today + title Perjalanan Membangun Kepercayaan Dirimu + section Hari Ini Curious: 3: You Overwhelmed: 4: You Excited: 5: You - section This Week + section Minggu Ini Exploring: 4: You Learning: 5: You Connecting: 4: You - section Next Month + section Bulan Depan Building: 5: You Confident: 5: You Helping Others: 5: You ``` - -> 🌟 **Ingat**: Setiap ahli dulunya adalah pemula. Setiap pengembang senior dulu pernah merasa persis seperti yang kamu rasakan sekarang – bersemangat, mungkin sedikit kewalahan, dan pasti penasaran dengan apa yang mungkin dicapai. Kamu berada di lingkungan yang luar biasa, dan perjalanan ini akan menjadi luar biasa. Selamat datang di dunia pemrograman yang menakjubkan! πŸŽ‰ +> 🌟 **Ingatlah**: Setiap ahli dulu adalah pemula. Setiap pengembang senior pernah merasakan persis seperti Anda sekarang – bersemangat, mungkin sedikit kewalahan, dan tentu penasaran tentang apa yang mungkin dilakukan. Anda berada dalam lingkaran luar biasa, dan perjalanan ini akan sangat mengagumkan. Selamat datang di dunia pemrograman yang menakjubkan! πŸŽ‰ --- + **Penafian**: -Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diketahui bahwa terjemahan otomatis dapat mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa penerjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau interpretasi 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 berupaya untuk memberikan terjemahan 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 sangat penting, disarankan menggunakan terjemahan profesional oleh 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/AGENTS.md b/translations/id/AGENTS.md index 1e2e5161a..15bfc7bc2 100644 --- a/translations/id/AGENTS.md +++ b/translations/id/AGENTS.md @@ -2,23 +2,23 @@ ## Gambaran Proyek -Ini adalah repositori kurikulum pendidikan untuk mengajarkan dasar-dasar pengembangan web kepada pemula. Kurikulum ini merupakan kursus komprehensif selama 12 minggu yang dikembangkan oleh Microsoft Cloud Advocates, menampilkan 24 pelajaran praktis yang mencakup JavaScript, CSS, dan HTML. +Ini adalah repositori kurikulum edukasi untuk mengajarkan dasar-dasar pengembangan web kepada pemula. Kurikulum ini adalah kursus komprehensif selama 12 minggu yang dikembangkan oleh Microsoft Cloud Advocates, menampilkan 24 pelajaran praktis yang mencakup JavaScript, CSS, dan HTML. ### Komponen Utama -- **Konten Pendidikan**: 24 pelajaran terstruktur yang disusun dalam modul berbasis proyek +- **Konten Edukasi**: 24 pelajaran terstruktur yang diorganisir dalam modul berbasis proyek - **Proyek Praktis**: Terrarium, Permainan Mengetik, Ekstensi Browser, Permainan Luar Angkasa, Aplikasi Perbankan, Editor Kode, dan Asisten Chat AI -- **Kuis Interaktif**: 48 kuis dengan 3 pertanyaan masing-masing (penilaian sebelum/sesudah pelajaran) -- **Dukungan Multi-bahasa**: Terjemahan otomatis untuk lebih dari 50 bahasa melalui GitHub Actions +- **Kuis Interaktif**: 48 kuis dengan 3 pertanyaan setiap kuis (penilaian sebelum/sesudah pelajaran) +- **Dukungan Multi-bahasa**: Terjemahan otomatis untuk 50+ bahasa melalui GitHub Actions - **Teknologi**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (untuk proyek AI) ### Arsitektur - Repositori edukasi dengan struktur berbasis pelajaran -- Setiap folder pelajaran berisi README, contoh kode, dan solusi -- Proyek mandiri di direktori terpisah (quiz-app, berbagai proyek pelajaran) -- Sistem penerjemahan menggunakan GitHub Actions (co-op-translator) -- Dokumentasi disajikan via Docsify dan tersedia dalam format PDF +- Folder setiap pelajaran berisi README, contoh kode, dan solusi +- Proyek mandiri dalam direktori terpisah (quiz-app, berbagai proyek pelajaran) +- Sistem terjemahan menggunakan GitHub Actions (co-op-translator) +- Dokumentasi disajikan melalui Docsify dan tersedia dalam format PDF ## Perintah Setup @@ -84,8 +84,8 @@ python api.py 2. **Clone fork Anda** secara lokal 3. **Buat cabang baru** untuk perubahan Anda 4. Lakukan perubahan pada konten pelajaran atau contoh kode -5. Uji setiap perubahan kode di direktori proyek terkait -6. Ajukan pull request sesuai panduan kontribusi +5. Uji perubahan kode di direktori proyek terkait +6. Kirim pull request sesuai panduan kontribusi ### Untuk Pembelajar @@ -93,7 +93,7 @@ python api.py 2. Navigasi ke direktori pelajaran secara berurutan 3. Baca file README untuk setiap pelajaran 4. Selesaikan kuis sebelum pelajaran di https://ff-quizzes.netlify.app/web/ -5. Kerjakan contoh kode dalam folder pelajaran +5. Kerjakan contoh kode di folder pelajaran 6. Selesaikan tugas dan tantangan 7. Ikuti kuis setelah pelajaran @@ -101,8 +101,8 @@ python api.py - **Dokumentasi**: Jalankan `docsify serve` di root (port 3000) - **Quiz App**: Jalankan `npm run dev` di direktori quiz-app -- **Proyek**: Gunakan ekstensi VS Code Live Server untuk proyek HTML -- **API Proyek**: Jalankan `npm start` di direktori API masing-masing +- **Proyek**: Gunakan ekstensi Live Server di VS Code untuk proyek HTML +- **Proyek API**: Jalankan `npm start` di direktori API terkait ## Instruksi Pengujian @@ -111,10 +111,10 @@ python api.py ```bash cd quiz-app npm run lint # Periksa masalah gaya kode -npm run build # Verifikasi build berhasil +npm run build # Verifikasi pembangunan berhasil ``` -### Pengujian Bank API +### Pengujian API Bank ```bash cd 7-bank-project/api @@ -124,28 +124,28 @@ node server.js # Verifikasi server mulai tanpa kesalahan ### Pendekatan Pengujian Umum -- Ini adalah repositori edukasi tanpa pengujian otomatis lengkap +- Ini adalah repositori edukasi tanpa pengujian otomatis menyeluruh - Pengujian manual fokus pada: - Contoh kode berjalan tanpa error - Tautan di dokumentasi berfungsi dengan benar - - Build proyek selesai dengan sukses + - Proyek berhasil dibangun - Contoh mengikuti praktik terbaik -### Pemeriksaan Pra-pengajuan +### Pemeriksaan Sebelum Pengiriman -- Jalankan `npm run lint` di direktori dengan package.json +- Jalankan `npm run lint` di direktori dengan file package.json - Verifikasi tautan markdown valid - Uji contoh kode di browser atau Node.js -- Periksa bahwa terjemahan mempertahankan struktur yang benar +- Cek bahwa terjemahan mempertahankan struktur yang tepat ## Pedoman Gaya Kode ### JavaScript - Gunakan sintaks ES6+ modern -- Ikuti konfigurasi ESLint standar yang disediakan di proyek +- Ikuti konfigurasi ESLint standar dalam proyek - Gunakan nama variabel dan fungsi yang bermakna untuk kejelasan edukasi -- Tambahkan komentar menjelaskan konsep untuk pembelajar +- Tambahkan komentar yang menjelaskan konsep untuk pembelajar - Format menggunakan Prettier jika dikonfigurasi ### HTML/CSS @@ -153,39 +153,39 @@ node server.js # Verifikasi server mulai tanpa kesalahan - Elemen HTML5 semantik - Prinsip desain responsif - Konvensi penamaan kelas yang jelas -- Komentar menjelaskan teknik CSS untuk pembelajar +- Komentar yang menjelaskan teknik CSS untuk pembelajar ### Python - Pedoman gaya PEP 8 - Contoh kode yang jelas dan edukatif -- Tipe hint jika membantu pembelajaran +- Type hint jika membantu proses pembelajaran ### Dokumentasi Markdown -- Hierarki heading yang jelas -- Blok kode dengan spesifikasi bahasa -- Tautan ke sumber daya tambahan -- Tangkapan layar dan gambar di direktori `images/` -- Teks alternatif untuk gambar guna aksesibilitas +- Hirarki heading yang jelas +- Blok kode dengan penentuan bahasa +- Tautan ke sumber tambahan +- Screenshot dan gambar di direktori `images/` +- Teks alt untuk gambar demi aksesibilitas -### Organisasi Berkas +### Organisasi File -- Pelajaran bernomor berurutan (1-getting-started-lessons, 2-js-basics, dll.) +- Pelajaran bernomor secara berurutan (1-getting-started-lessons, 2-js-basics, dll) - Setiap proyek memiliki direktori `solution/` dan sering `start/` atau `your-work/` - Gambar disimpan di folder `images/` khusus pelajaran -- Terjemahan di struktur `translations/{kode-bahasa}/` +- Terjemahan di struktur `translations/{language-code}/` -## Build dan Deployment +## Pembangunan dan Deploy -### Deployment Quiz App (Azure Static Web Apps) +### Deploy Quiz App (Azure Static Web Apps) quiz-app dikonfigurasi untuk deployment Azure Static Web Apps: ```bash cd quiz-app npm run build # Membuat folder dist/ -# Menerapkan melalui alur kerja GitHub Actions saat push ke main +# Menerapkan melalui workflow GitHub Actions saat push ke main ``` Konfigurasi Azure Static Web Apps: @@ -193,10 +193,10 @@ Konfigurasi Azure Static Web Apps: - **Lokasi output**: `dist` - **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### Generasi PDF Dokumentasi +### Pembuatan PDF Dokumentasi ```bash -npm install # Instal docsify-to-pdf +npm install # Pasang docsify-to-pdf npm run convert # Hasilkan PDF dari docs ``` @@ -207,7 +207,7 @@ npm install -g docsify-cli # Instal Docsify secara global docsify serve # Jalankan di localhost:3000 ``` -### Build Proyek Spesifik +### Build Spesifik Proyek Setiap direktori proyek mungkin memiliki proses build sendiri: - Proyek Vue: `npm run build` membuat bundle produksi @@ -218,14 +218,14 @@ Setiap direktori proyek mungkin memiliki proses build sendiri: ### Format Judul Gunakan judul yang jelas dan deskriptif menunjukkan area perubahan: -- `[Quiz-app] Tambahkan kuis baru untuk pelajaran X` +- `[Quiz-app] Tambah kuis baru untuk pelajaran X` - `[Lesson-3] Perbaiki typo di proyek terrarium` -- `[Translation] Tambahkan terjemahan Spanyol untuk pelajaran 5` +- `[Translation] Tambah terjemahan Spanyol untuk pelajaran 5` - `[Docs] Perbarui instruksi setup` ### Pemeriksaan Wajib -Sebelum mengajukan PR: +Sebelum mengirim PR: 1. **Kualitas Kode**: - Jalankan `npm run lint` di direktori proyek terkait @@ -239,44 +239,44 @@ Sebelum mengajukan PR: - Uji semua tautan markdown - Verifikasi referensi gambar berfungsi -4. **Review Konten**: - - Koreksi ejaan dan tata bahasa +4. **Tinjauan Konten**: + - Baca ulang untuk ejaan dan tata bahasa - Pastikan contoh kode benar dan edukatif - Verifikasi terjemahan mempertahankan makna asli ### Persyaratan Kontribusi -- Setujui Microsoft CLA (pemeriksaan otomatis di PR pertama) +- Setuju dengan Microsoft CLA (cek otomatis di PR pertama) - Ikuti [Kode Etik Open Source Microsoft](https://opensource.microsoft.com/codeofconduct/) - Lihat [CONTRIBUTING.md](./CONTRIBUTING.md) untuk panduan detail -- Cantumkan nomor isu di deskripsi PR jika berlaku +- Referensikan nomor isu di deskripsi PR jika berlaku ### Proses Review -- PR akan direview oleh pemelihara dan komunitas -- Kejelasan edukasi diutamakan -- Contoh kode harus mengikuti praktik terbaik saat ini -- Terjemahan direview untuk keakuratan dan kesesuaian budaya +- PR direview oleh maintainers dan komunitas +- Kejelasan edukasi diprioritaskan +- Contoh kode harus mengikuti praktik terbaik terkini +- Terjemahan direview untuk akurasi dan kesesuaian budaya ## Sistem Terjemahan ### Terjemahan Otomatis - Menggunakan GitHub Actions dengan workflow co-op-translator -- Menerjemahkan ke 50+ bahasa secara otomatis -- Berkas sumber di direktori utama -- Berkas terjemahan di direktori `translations/{kode-bahasa}/` +- Menerjemahkan ke 50+ bahasa otomatis +- File sumber di direktori utama +- File terjemahan di direktori `translations/{language-code}/` ### Menambahkan Perbaikan Terjemahan Manual -1. Temukan berkas di `translations/{kode-bahasa}/` -2. Lakukan perbaikan sambil mempertahankan struktur +1. Temukan file di `translations/{language-code}/` +2. Lakukan perbaikan sambil menjaga struktur 3. Pastikan contoh kode tetap berfungsi -4. Uji konten kuis yang telah dilokalisasi +4. Uji konten kuis yang dilokalisasi ### Metadata Terjemahan -Berkas terjemahan menyertakan header metadata: +File terjemahan menyertakan header metadata: ```markdown **Penafian**: -Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk akurasi, harap diperhatikan bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sahih. Untuk informasi penting, disarankan menggunakan terjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran 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 mencapai ketepatan, harap diketahui bahwa terjemahan otomatis dapat mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber otoritatif. Untuk informasi penting, disarankan menggunakan jasa penerjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang salah yang timbul dari penggunaan terjemahan ini. \ No newline at end of file diff --git a/translations/id/README.md b/translations/id/README.md index 79cbb1f03..b9b211f20 100644 --- a/translations/id/README.md +++ b/translations/id/README.md @@ -12,16 +12,16 @@ # Pengembangan Web untuk Pemula - Kurikulum -Pelajari dasar-dasar pengembangan web dengan kursus komprehensif 12 minggu kami oleh Microsoft Cloud Advocates. Setiap 24 pelajaran mendalami JavaScript, CSS, dan HTML melalui proyek langsung seperti terarium, ekstensi browser, dan game luar angkasa. Ikuti kuis, diskusi, dan tugas praktis. Tingkatkan keterampilan Anda dan optimalkan retensi pengetahuan dengan pedagogi berbasis proyek yang efektif. Mulai perjalanan pemrograman Anda hari ini! +Pelajari dasar-dasar pengembangan web dengan kursus komprehensif selama 12 minggu oleh Microsoft Cloud Advocates. Setiap dari 24 pelajaran menyelami JavaScript, CSS, dan HTML melalui proyek langsung seperti terrarium, ekstensi browser, dan permainan luar angkasa. Ikuti kuis, diskusi, dan tugas praktis. Tingkatkan keterampilan dan optimalkan retensi pengetahuan Anda dengan pedagogi berbasis proyek kami yang efektif. Mulai 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 berikut untuk mulai 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. **Clone Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Bergabung Dengan Azure AI Foundry Discord dan temui para ahli serta pengembang lain**](https://discord.com/invite/ByRwuEEgH4) +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) +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 sesama pengembang**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 Dukungan Multi-Bahasa @@ -30,51 +30,61 @@ Ikuti langkah-langkah berikut untuk mulai menggunakan sumber daya ini: [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-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](./README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-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) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) -> **Ingin Clone Secara Lokal?** - -> Repository ini mencakup lebih dari 50 terjemahan bahasa yang secara signifikan meningkatkan ukuran unduhan. Untuk clone tanpa terjemahan, gunakan sparse checkout: +> **Lebih suka Clone Lokal?** +> +> Repositori ini mencakup 50+ terjemahan bahasa yang secara signifikan menambah ukuran unduhan. Untuk meng-clone tanpa terjemahan, gunakan sparse checkout: +> +> **Bash / macOS / Linux:** > ```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. +> +> **CMD (Windows):** +> ```cmd +> 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 memberikan Anda semua yang Anda butuhkan untuk menyelesaikan kursus dengan unduhan yang jauh lebih cepat. -**Jika Anda ingin bahasa terjemahan tambahan didukung, daftar tersedia [di sini](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**Jika Anda ingin bahasa terjemahan tambahan didukung, daftar bahasa tersedia 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) -#### πŸ§‘β€πŸŽ“ _Apakah Anda seorang siswa?_ +#### πŸ§‘β€πŸŽ“ _Apakah kamu seorang pelajar?_ -Kunjungi [**halaman Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) tempat Anda akan menemukan sumber daya pemula, paket siswa, dan bahkan cara mendapatkan voucher sertifikat gratis. Ini adalah halaman yang ingin Anda tandai dan periksa dari waktu ke waktu karena kontennya kami ganti setiap bulan. +Kunjungi [**halaman Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) dimana kamu akan menemukan sumber daya pemula, paket pelajar hingga cara mendapatkan voucher sertifikat gratis. Ini adalah halaman yang ingin kamu tandai dan periksa secara berkala karena kami akan mengganti konten tiap bulan. ### πŸ“£ Pengumuman - Tantangan mode GitHub Copilot Agent baru untuk diselesaikan! -Tantangan Baru ditambahkan, cari "GitHub Copilot Agent Challenge πŸš€" di sebagian besar bab. Itu 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 lainnya. +Tantangan baru ditambahkan, cari "GitHub Copilot Agent Challenge πŸš€" di sebagian besar bab. Itu adalah tantangan baru untuk Anda selesaikan menggunakan GitHub Copilot dan mode Agent. Jika Anda belum pernah menggunakan mode Agent sebelumnya, mode ini mampu tidak hanya menghasilkan teks tetapi juga dapat membuat dan mengedit file, menjalankan perintah, dan lainnya. ### πŸ“£ Pengumuman - _Proyek Baru untuk dibangun menggunakan Generative AI_ -Proyek Asisten AI baru baru saja ditambahkan, cek di [proyek](./9-chat-project/README.md) +Proyek Asisten AI baru saja ditambahkan, cek [proyek](./9-chat-project/README.md) -### πŸ“£ Pengumuman - _Kurikulum Baru_ mengenai Generative AI untuk JavaScript baru saja dirilis +### πŸ“£ Pengumuman - _Kurikulum Baru_ tentang Generative AI untuk JavaScript baru saja dirilis -Jangan lewatkan kurikulum Generative AI baru kami! +Jangan lewatkan kurikulum Generative AI terbaru kami! Kunjungi [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk memulai! ![Background](../../translated_images/id/background.148a8d43afde5730.webp) -- Pelajaran mencakup semuanya dari dasar hingga RAG. -- Berinteraksi dengan karakter historis menggunakan GenAI dan aplikasi pendamping kami. -- Narasi yang seru dan menyenangkan, Anda akan melakukan perjalanan waktu! +- Pelajaran meliputi semuanya dari dasar hingga RAG. +- Berinteraksi dengan tokoh historis menggunakan GenAI dan aplikasi pendamping kami. +- Narasi yang menyenangkan dan menarik, Anda akan melakukan perjalanan waktu! ![character](../../translated_images/id/character.5c0dd8e067ffd693.webp) -Setiap pelajaran mencakup tugas yang harus diselesaikan, pemeriksaan pengetahuan, dan tantangan untuk membimbing Anda mempelajari topik seperti: -- Prompting dan rekayasa prompt -- Pengembangan aplikasi teks dan gambar +Setiap pelajaran termasuk tugas yang harus diselesaikan, pemeriksaan pengetahuan dan tantangan untuk membimbing Anda mempelajari topik seperti: +- Prompt dan rekayasa prompt +- Aplikasi teks dan gambar yang dihasilkan - Aplikasi pencarian Kunjungi [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk memulai! @@ -83,131 +93,130 @@ Kunjungi [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk ## 🌱 Memulai -> **Para Pengajar**, kami telah [menyediakan beberapa saran](for-teachers.md) tentang cara menggunakan kurikulum ini. Kami sangat menginginkan umpan balik Anda [di forum diskusi kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **Guru**, kami telah [menyediakan beberapa saran](for-teachers.md) tentang cara menggunakan kurikulum ini. Kami sangat menghargai masukan Anda [di forum diskusi kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Pembelajar](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, untuk setiap pelajaran, mulailah dengan kuis pra-ceramah dan lanjutkan dengan membaca materi ceramah, menyelesaikan berbagai aktivitas, dan periksa pemahaman Anda dengan kuis pasca-ceramah. +**[Pelajar](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, untuk setiap pelajaran, mulailah dengan kuis pra-lecture dan lanjutkan dengan membaca materi kuliah, menyelesaikan berbagai aktivitas dan periksa pemahaman Anda dengan kuis pasca-lecture. -Untuk meningkatkan pengalaman belajar Anda, hubungkan dengan teman sejawat Anda untuk bekerja pada 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 sejawat Anda untuk mengerjakan proyek bersama! Diskusi dianjurkan di [forum diskusi kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) dimana tim moderator kami akan tersedia menjawab pertanyaan Anda. -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 bahan belajar tambahan. +Untuk memperdalam pendidikan, kami sangat menyarankan menjelajahi [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) untuk materi studi tambahan. ### πŸ“‹ Menyiapkan lingkungan Anda -Kurikulum ini memiliki lingkungan pengembangan yang siap pakai! Saat Anda memulai, Anda dapat memilih menjalankan kurikulum di [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). +Kurikulum ini sudah memiliki lingkungan pengembangan siap dipakai! Saat Anda memulai Anda dapat memilih menjalankan kurikulum di [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 repository Anda -Untuk memudahkan menyimpan pekerjaan Anda, disarankan agar Anda membuat salinan repository ini. 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. +#### Buat repositori Anda +Agar Anda mudah menyimpan pekerjaan Anda, disarankan membuat salinan sendiri dari repositori ini. Anda dapat melakukannya dengan mengklik tombol **Use this template** di bagian atas halaman ini. Ini akan membuat repositori baru di akun GitHub Anda dengan salinan kurikulum. Ikuti langkah-langkah ini: -1. **Fork Repository**: Klik tombol "Fork" di pojok kanan atas halaman ini. -2. **Clone Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +1. **Fork Repositori**: Klik tombol "Fork" di pojok kanan atas halaman ini. +2. **Clone Repositori**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` #### Menjalankan kurikulum di Codespace -Di salinan repository yang Anda buat, klik tombol **Code** dan pilih **Open with Codespaces**. Ini akan membuat Codespace baru untuk Anda bekerja. +Di salinan repositori yang Anda buat, klik tombol **Code** dan pilih **Open with Codespaces**. Ini akan membuat Codespace baru untuk Anda kerjakan. ![Codespace](../../translated_images/id/createcodespace.0238bbf4d7a8d955.webp) #### 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 Perdagangan](../../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. - -Rekomendasi kami adalah menggunakan [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) sebagai editor, 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). - +Untuk menjalankan kurikulum ini secara lokal di komputer Anda, Anda membutuhkan editor teks, browser dan alat baris perintah. Pelajaran pertama kami, [Pengenalan Bahasa Pemrograman dan Alat Perdagangan](../../1-getting-started-lessons/1-intro-to-programming-languages), akan memandu Anda melalui berbagai opsi masing-masing alat agar Anda dapat memilih yang paling cocok. -1. Clone repository Anda ke komputer. Anda dapat melakukannya dengan mengklik tombol **Code** dan menyalin URL: +Rekomendasi kami adalah menggunakan [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) sebagai editor Anda, yang juga dilengkapi dengan [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Anda dapat mengunduh Visual Studio Code [di sini](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +1. Kloning repositori Anda ke komputer Anda. Anda dapat melakukannya dengan mengklik tombol **Code** dan menyalin URL: [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: + + 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 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 kloning. +2. Buka folder tersebut 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 melihat pratinjau halaman HTML di dalam Visual Studio Code +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - untuk melihat pratinjau halaman HTML 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: - sketchnote opsional -- video tambahan opsional +- video pelengkap opsional - kuis pemanasan sebelum pelajaran - pelajaran tertulis -- untuk pelajaran berbasis proyek, panduan langkah demi langkah tentang cara membangun proyek tersebut +- untuk pelajaran berbasis proyek, panduan langkah demi langkah cara membangun proyek - pemeriksaan pengetahuan - tantangan -- bacaan tambahan -- tugas +- bacaan pelengkap +- penugasan - [kuis pasca-pelajaran](https://ff-quizzes.netlify.app/web/) -> **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 dideploy ke Azure; ikuti instruksi di folder `quiz-app`. +> **Catatan tentang kuis**: Semua kuis terdapat di folder Quiz-app, total 48 kuis dengan tiga pertanyaan setiapnya. Mereka 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 | Pelajaran Terkait | Penulis | -| :-: | :------------------------------------------------------: | :-----------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------- | :-----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Memulai | Pengantar Pemrograman dan Alat-alat Perdagangan | Pelajari dasar-dasar yang mendasari sebagian besar bahasa pemrograman dan tentang perangkat lunak yang membantu pengembang profesional dalam pekerjaannya | [Pengantar Bahasa Pemrograman dan Alat-alat Perdagangan](./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-dasar JS | Tipe Data JavaScript | Dasar-dasar tipe data JavaScript | [Tipe Data](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | Dasar-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-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-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, 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, 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) | JavaScript Closures, manipulasi DOM | Bangun JavaScript untuk membuat terrarium berfungsi sebagai antarmuka seret/jatuhkan, fokus pada closures dan manipulasi DOM | [JavaScript Closures, manipulasi DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | Membangun Permainan Mengetik | Pelajari cara menggunakan event keyboard untuk menggerakkan logika aplikasi JavaScript Anda | [Pemrograman Berbasis Event](./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 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, performa web | Gunakan proses latar belakang browser untuk mengelola ikon ekstensi; pelajari tentang performa web dan beberapa optimasi yang dilakukan | [Tugas Latar Belakang dan Performa](./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 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 canvas | Pelajari tentang Canvas API, yang digunakan untuk menggambar elemen ke layar | [Menggambar ke Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](./6-space-game/solution/README.md) | Memindahkan elemen ke sekitar layar | Temukan bagaimana elemen dapat bergerak menggunakan koordinat kartesian dan Canvas API | [Memindahkan Elemen Sekitar](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](./6-space-game/solution/README.md) | Deteksi Tabrakan | Membuat elemen bertabrakan dan bereaksi satu sama lain menggunakan penekanan tombol dan menyediakan fungsi pending untuk memastikan performa game | [Deteksi Tabrakan](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](./6-space-game/solution/README.md) | Menjaga skor | Melakukan perhitungan matematika berdasarkan status dan performa 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 Routing dalam Web App | Pelajari cara membuat kerangka arsitektur situs web multipage menggunakan routing dan template HTML | [Template HTML dan Routing](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banking App](./7-bank-project/solution/README.md) | Membangun Form 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 Pengambilan dan Penggunaan Data | Bagaimana data mengalir masuk dan keluar 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 State | Pelajari bagaimana aplikasi Anda menyimpan state dan cara mengelolanya secara programatik | [Manajemen State](./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 | Pengenalan Pemrograman dan Alat Kerja | Pelajari dasar-dasar yang mendasari sebagian besar bahasa pemrograman dan perangkat lunak yang membantu pengembang profesional melakukan pekerjaan mereka | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Memulai | 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 and 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 di 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 menata 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 drag/drop, fokus pada closure 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) | Membangun 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 bagaimana browser bekerja, sejarahnya, dan cara membuat elemen pertama dari ekstensi browser | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Membangun form, 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, performa web | Gunakan proses latar belakang browser untuk mengelola ikon ekstensi; pelajari tentang performa 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 Lanjutan dengan JavaScript | Pelajari tentang Pewarisan menggunakan baik Kelas maupun Komposisi dan 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 Canvas API, yang digunakan untuk menggambar elemen ke 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 bisa bergerak menggunakan koordinat kartesian dan Canvas API | [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 performa game | [Collision Detection](./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 performa permainan | [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 mereset 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 Routing 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) | Membangun Form Login dan Registrasi | Pelajari tentang membangun form 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, 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 State | Pelajari bagaimana aplikasi Anda mempertahankan state dan cara mengelolanya secara programatis | [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 -Kurikulum kami dirancang dengan dua prinsip pedagogis utama dalam pikiran: +Kurikulum kami dirancang dengan dua prinsip pedagogis 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 permainan mengetik, terrarium virtual, ekstensi browser ramah lingkungan, game gaya space invader, dan aplikasi perbankan untuk bisnis. Pada akhir rangkaian ini, siswa akan mendapatkan 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 penyerang luar angkasa, dan aplikasi perbankan untuk bisnis. Pada akhir seri, siswa akan memiliki pemahaman mendalam tentang pengembangan web. -> πŸŽ“ Anda dapat mengikuti beberapa pelajaran pertama dalam kurikulum ini sebagai [Jalur Belajar](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) di Microsoft Learn! +> πŸŽ“ 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! -Dengan memastikan bahwa konten selaras dengan proyek, proses menjadi lebih menarik bagi siswa dan retensi konsep akan ditingkatkan. Kami juga menulis beberapa pelajaran pengantar dalam dasar-dasar JavaScript untuk memperkenalkan konsep, disertai dengan video dari koleksi tutorial video "[Seri Pemula untuk: 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 selaras dengan proyek, proses menjadi lebih menarik bagi siswa dan retensi konsep akan meningkat. Kami juga menulis beberapa pelajaran pengantar 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 untuk kurikulum ini. -Selain itu, kuis dengan tingkat tekanan rendah sebelum kelas menetapkan niat siswa terhadap pembelajaran topik, sementara kuis kedua setelah kelas memastikan retensi lebih lanjut. Kurikulum ini dirancang agar fleksibel dan menyenangkan dan dapat diambil secara keseluruhan atau sebagian. Proyek dimulai dari yang sederhana dan menjadi semakin kompleks pada akhir siklus 12 minggu. +Selain itu, kuis berkategori 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 dan dapat diikuti secara keseluruhan atau sebagian. Proyek dimulai kecil dan menjadi semakin kompleks pada akhir siklus 12 minggu. -Meskipun kami sengaja menghindari memperkenalkan kerangka kerja JavaScript untuk berkonsentrasi pada keterampilan dasar yang dibutuhkan sebagai pengembang web sebelum mengadopsi kerangka kerja, langkah selanjutnya yang baik untuk menyelesaikan kurikulum ini adalah mempelajari tentang Node.js melalui koleksi video lain: "[Seri Pemula untuk: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Meskipun kami sengaja menghindari memperkenalkan framework JavaScript untuk berkonsentrasi pada keterampilan dasar yang dibutuhkan sebagai pengembang web sebelum mengadopsi framework, langkah selanjutnya yang baik untuk menyelesaikan kurikulum ini adalah mempelajari 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 pedoman [Kode Etik](CODE_OF_CONDUCT.md) dan [Kontribusi](CONTRIBUTING.md) kami. Kami menyambut umpan balik konstruktif Anda! +> Kunjungi [Kode Etik](CODE_OF_CONDUCT.md) dan panduan [Kontribusi](CONTRIBUTING.md) kami. Kami menyambut masukan konstruktif Anda! -## 🧭 Akses offline +## 🧭 Akses Offline -Anda dapat menjalankan dokumentasi ini secara offline dengan menggunakan [Docsify](https://docsify.js.org/#/). Fork repo ini, [pasang Docsify](https://docsify.js.org/#/quickstart) di mesin lokal Anda, dan kemudian di folder root repo ini, ketik `docsify serve`. Situs web akan dilayani 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, [pasang 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 - PDF dari semua pelajaran dapat ditemukan [di sini](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). ## πŸŽ’ Kursus Lainnya -Tim kami memproduksi kursus lain! Lihatlah: + +Tim kami menghasilkan kursus lain! Cek: ### LangChain @@ -216,7 +225,7 @@ Tim kami memproduksi kursus lain! Lihatlah: [![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) --- -### Azure / Edge / MCP / Agents +### Azure / Edge / MCP / Agen [![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) @@ -251,11 +260,11 @@ Tim kami memproduksi kursus lain! Lihatlah: ## Mendapatkan Bantuan -Jika Anda mengalami kesulitan atau memiliki pertanyaan tentang membangun aplikasi AI. Bergabunglah dengan pembelajar dan pengembang berpengalaman dalam diskusi tentang MCP. Ini adalah komunitas yang mendukung di mana pertanyaan dipersilakan dan pengetahuan dibagikan secara bebas. +Jika Anda mengalami kesulitan atau memiliki pertanyaan tentang membangun aplikasi AI. Bergabunglah dengan sesama pembelajar dan pengembang berpengalaman dalam diskusi tentang MCP. Ini adalah komunitas yang mendukung di mana pertanyaan diterima dan pengetahuan dibagikan dengan bebas. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Jika Anda memiliki umpan balik produk atau mengalami kesalahan saat membangun, kunjungi: +Jika Anda memiliki umpan balik produk atau menemui 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) @@ -267,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 berusaha untuk akurasi, harap diketahui bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sahih. Untuk informasi penting, disarankan menggunakan jasa terjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau salah tafsir 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 mencapai akurasi, harap diperhatikan bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sahih. Untuk informasi penting, disarankan menggunakan jasa terjemahan profesional oleh 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/ms/.co-op-translator.json b/translations/ms/.co-op-translator.json index b386e3ed8..de1761edd 100644 --- a/translations/ms/.co-op-translator.json +++ b/translations/ms/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2025-11-06T12:03:24+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T12:57:07+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "ms" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T18:03:26+00:00", + "translation_date": "2026-03-06T13:06:45+00:00", "source_file": "AGENTS.md", "language_code": "ms" }, @@ -516,8 +516,8 @@ "language_code": "ms" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T17:54:17+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T12:53:17+00:00", "source_file": "README.md", "language_code": "ms" }, 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 81253d763..2d9facfff 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 @@ -1,183 +1,181 @@ # Pengenalan kepada Bahasa Pengaturcaraan dan Alat Pembangun Moden + +Hai di sana, bakal pembangun! πŸ‘‹ Boleh saya beritahu sesuatu yang masih membuat saya teruja setiap hari? Anda bakal menemui bahawa pengaturcaraan bukan sekadar tentang komputer – ia tentang memiliki kuasa super sebenar untuk menghidupkan idea liar anda! -Hai, bakal pembangun! πŸ‘‹ Boleh saya kongsikan sesuatu yang masih membuatkan saya teruja setiap hari? Anda akan menemui bahawa pengaturcaraan bukan sekadar tentang komputer – ia adalah kuasa luar biasa untuk merealisasikan idea-idea liar anda! +Anda tahu saat ketika anda menggunakan aplikasi kegemaran dan semuanya berjalan lancar? Bila anda tekan butang dan sesuatu yang benar-benar ajaib berlaku yang membuat anda berkata "wah, macam mana mereka BUAT itu?" Sebenarnya, seseorang seperti anda – mungkin sedang duduk di kedai kopi kegemaran mereka jam 2 pagi dengan espresso ketiga mereka – telah menulis kod yang mencipta keajaiban itu. Dan ini yang akan mengejutkan anda: menjelang akhir pelajaran ini, anda bukan sahaja akan faham bagaimana mereka melakukannya, tetapi anda akan teruja untuk mencubanya sendiri! -Anda tahu saat itu apabila anda menggunakan aplikasi kegemaran anda dan semuanya berfungsi dengan sempurna? Apabila anda menekan butang dan sesuatu yang sangat ajaib berlaku sehingga membuatkan anda berkata "wow, macam mana mereka BUAT ni?" Nah, seseorang seperti anda – mungkin sedang duduk di kedai kopi kegemaran mereka pada pukul 2 pagi dengan espresso ketiga mereka – menulis kod yang mencipta keajaiban itu. Dan inilah yang akan mengejutkan anda: pada akhir pelajaran ini, anda bukan sahaja akan memahami bagaimana mereka melakukannya, tetapi anda akan teruja untuk mencubanya sendiri! +Dengar, saya faham jika pengaturcaraan terasa mencabar sekarang. Bila saya mula-mula bermula, saya benar-benar fikir anda perlu jadi genius matematik atau sudah menulis kod sejak umur lima tahun. Tetapi inilah yang mengubah pandangan saya sepenuhnya: pengaturcaraan sebenarnya seperti belajar bercakap dalam bahasa baru. Anda mula dengan "hello" dan "terima kasih," kemudian berinjak ke memesan kopi, dan sebelum anda sedar, anda sedang berborak falsafah yang mendalam! Kecuali dalam kes ini, anda berborak dengan komputer, dan jujur? Mereka adalah rakan perbualan paling sabar yang pernah anda ada – mereka tidak pernah menghukum kesilapan anda dan mereka sentiasa teruja untuk cuba lagi! -Dengar, saya faham sepenuhnya jika pengaturcaraan terasa menakutkan sekarang. Ketika saya mula-mula belajar, saya benar-benar fikir anda perlu menjadi genius matematik atau telah mula mengatur sejak kecil. Tetapi inilah yang mengubah perspektif saya sepenuhnya: pengaturcaraan sebenarnya seperti belajar bercakap dalam bahasa baru. Anda mula dengan "hello" dan "terima kasih," kemudian beralih kepada memesan kopi, dan sebelum anda sedar, anda sedang berbincang tentang falsafah yang mendalam! Kecuali dalam kes ini, anda bercakap dengan komputer, dan jujurnya? Mereka adalah rakan bicara yang paling sabar – mereka tidak pernah menghakimi kesilapan anda dan sentiasa bersedia untuk mencuba lagi! - -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! +Hari ini, kita akan teroka alat luar biasa yang menjadikan pembangunan web moden bukan sahaja mungkin, tetapi sangat ketagih. 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 ini bahagian yang akan membuat anda menari kegembiraan: kebanyakan alat profesional ini adalah PERCUMA! ![Intro Programming](../../../../translated_images/ms/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Your Programming Journey Today + title Perjalanan Pengaturcaraan Anda Hari Ini section Discover - What is Programming: 5: You - Programming Languages: 4: You - Tools Overview: 5: You + Apa itu Pengaturcaraan: 5: You + Bahasa Pengaturcaraan: 4: You + Gambaran Alat: 5: You section Explore - Code Editors: 4: You - Browsers & DevTools: 5: You - Command Line: 3: You + Penyunting Kod: 4: You + Pelayar & Alat Pembangun: 5: You + Baris Perintah: 3: You section Practice - Language Detective: 4: You - Tool Exploration: 5: You - Community Connection: 5: You + Detektif Bahasa: 4: You + Eksplorasi Alat: 5: You + Sambungan Komuniti: 5: You ``` +## Mari Kita Lihat Apa Yang Anda Sudah Tahu! -## Mari Lihat Apa yang Anda Sudah Tahu! +Sebelum kita melompat ke perkara menyeronokkan, saya ingin tahu – apa yang sudah anda tahu tentang dunia pengaturcaraan ini? Dan dengar, jika anda melihat soalan-soalan ini dan fikir "Saya betul-betul langsung tak faham apa-apa," itu bukan sahaja okay, ia sempurna! Itu bermaksud anda berada di tempat yang betul. Anggap kuiz ini seperti regangan sebelum senaman – kita cuma memanaskan otot otak! -Sebelum kita melompat ke bahagian yang menyeronokkan, saya ingin tahu – apa yang anda sudah tahu tentang dunia pengaturcaraan ini? Dan dengar, jika anda melihat soalan-soalan ini dan berfikir "Saya benar-benar tidak tahu apa-apa tentang ini," itu bukan sahaja okay, tetapi sempurna! Itu bermakna anda berada di tempat yang betul. Anggap kuiz ini seperti regangan sebelum bersenam – kita hanya memanaskan otak! +[Ambil kuiz pra-pelajaran](https://ff-quizzes.netlify.app/web/) -[Ambil kuiz pra-pelajaran](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) -## Pengembaraan yang Akan Kita Lalui Bersama +## Pengembaraan Yang Akan Kita Jalani Bersama -Baiklah, saya benar-benar teruja tentang apa yang akan kita terokai hari ini! Serius, saya berharap saya dapat melihat wajah anda apabila beberapa konsep ini mula masuk akal. Inilah perjalanan luar biasa yang akan kita lalui bersama: +Baiklah, saya betul-betul teruja dengan apa yang akan kita teroka hari ini! Serius, saya harap saya dapat lihat wajah anda bila beberapa konsep ini klik. Ini perjalanan luar biasa yang akan kita lalui bersama: -- **Apa sebenarnya pengaturcaraan (dan kenapa ia perkara paling hebat!)** – Kita akan menemui bagaimana kod adalah sihir yang tidak kelihatan yang menggerakkan segala-galanya di sekeliling anda, daripada penggera yang tahu ia pagi Isnin hingga algoritma yang menyusun cadangan Netflix anda dengan sempurna -- **Bahasa pengaturcaraan dan keperibadian mereka yang menakjubkan** – Bayangkan anda masuk ke pesta di mana setiap orang mempunyai kuasa luar biasa dan cara menyelesaikan masalah yang berbeza. Itulah dunia bahasa pengaturcaraan, dan anda akan suka mengenali mereka! -- **Blok asas yang membuat keajaiban digital berlaku** – Anggap ini sebagai set LEGO kreatif yang terbaik. Setelah anda memahami bagaimana kepingan ini sesuai bersama, anda akan sedar bahawa anda boleh membina apa sahaja yang anda impikan -- **Alat profesional yang akan membuatkan anda rasa seperti mendapat tongkat sihir** – Saya tidak berlebihan di sini – alat ini akan membuatkan anda rasa seperti mempunyai kuasa luar biasa, dan bahagian terbaik? Ia adalah alat yang sama digunakan oleh profesional! +- **Apa sebenarnya pengaturcaraan itu (dan kenapa ia paling hebat!)** – Kita akan terokai bagaimana kod sebenarnya adalah sihir tidak kelihatan yang memacu segala-galanya di sekitar anda, dari loceng penggera yang entah bagaimana tahu ini pagi Isnin ke algoritma yang secara sempurna menyusun cadangan Netflix anda +- **Bahasa pengaturcaraan dan personalitinya yang menakjubkan** – Bayangkan masuk ke parti di mana setiap orang mempunyai kuasa super dan cara menyelesaikan masalah yang berbeza-beza. Begitulah dunia bahasa pengaturcaraan, dan anda akan suka berjumpa mereka! +- **Blok binaan asas yang menjadikan sihir digital berlaku** – Bayangkan ini sebagai set LEGO kreatif utama. Setelah anda faham bagaimana bahagian ini bergabung, anda akan sedar anda boleh bina apa sahaja yang anda bayangkan +- **Alat profesional yang akan membuat anda rasa seperti baru diberi tongkat ahli sihir** – Saya tidak berlebih-lebihan – alat ini benar-benar akan membuat anda rasa seperti mempunyai kuasa super, dan bahagian terbaik? Ia sama yang digunakan oleh para pro! -> πŸ’‘ **Inilah perkara penting**: Jangan fikir untuk menghafal semuanya hari ini! Sekarang, saya hanya mahu anda merasakan semangat tentang apa yang mungkin. Perincian akan melekat secara semula jadi apabila kita berlatih bersama – begitulah cara pembelajaran sebenar berlaku! +> πŸ’‘ **Ini sebenarnya:** Jangan cuba hafal semua hari ini! Sekarang ini, saya cuma mahu anda rasa percikan teruja tentang apa yang mungkin berlaku. Butiran akan melekat secara semula jadi bila kita berlatih bersama – begitulah pembelajaran sebenar terjadi! -> Anda boleh mengambil pelajaran ini di [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> Anda boleh ambil pelajaran ini di [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -## Jadi Apa Sebenarnya *Pengaturcaraan*? +## Jadi Apa Sebenarnya *Pengaturcaraan* Itu? -Baiklah, mari kita jawab soalan bernilai jutaan dolar: apa sebenarnya pengaturcaraan? +Baiklah, mari kita jawab soalan bernilai juta dolar ini: apa itu pengaturcaraan sebenarnya? -Saya akan kongsikan cerita yang mengubah cara saya berfikir tentang ini. Minggu lepas, saya cuba menerangkan kepada ibu saya bagaimana menggunakan alat kawalan jauh TV pintar baru kami. Saya mendapati diri saya berkata perkara seperti "Tekan butang merah, tetapi bukan butang merah besar, butang merah kecil di sebelah kiri... bukan, kiri anda yang satu lagi... okay, sekarang tahan selama dua saat, bukan satu, bukan tiga..." Kedengaran biasa? πŸ˜… +Saya akan beritahu cerita yang mengubah cara saya fikir tentang ini. Minggu lepas, saya cuba terangkan kepada ibu saya cara guna alat kawalan jauh TV pintar baru kami. Saya dapati saya berkata "Tekan butang merah, tapi bukan butang merah besar, butang merah kecil di sebelah kiri... tidak, sebelah kiri yang lain... okay, sekarang tahan selama dua saat, bukan satu, bukan tiga..." Kedengaran akrab? πŸ˜… -Itulah pengaturcaraan! Ia adalah seni memberikan arahan yang sangat terperinci, langkah demi langkah kepada sesuatu yang sangat berkuasa tetapi memerlukan segalanya dijelaskan dengan sempurna. Kecuali bukannya menerangkan kepada ibu anda (yang boleh bertanya "butang merah yang mana?!"), anda menerangkan kepada komputer (yang hanya melakukan apa yang anda katakan, walaupun apa yang anda katakan tidak betul-betul seperti yang anda maksudkan). +Itulah pengaturcaraan! Ia seni memberikan arahan yang sangat terperinci, langkah demi langkah kepada sesuatu yang sangat kuat tetapi perlu semuanya dijelaskan dengan lengkap. Kecuali, bukan menerangkan kepada ibu anda (yang boleh tanya "butang merah yang mana?!"), anda menerangkan kepada komputer (yang hanya buat tepat apa yang anda suruh, walaupun apa yang anda kata bukan apa yang anda maksudkan). -Inilah yang mengejutkan saya apabila saya mula belajar: komputer sebenarnya sangat mudah pada dasarnya. Mereka hanya memahami dua perkara – 1 dan 0, yang pada dasarnya hanya "ya" dan "tidak" atau "hidup" dan "mati." Itu sahaja! Tetapi inilah yang menjadikannya ajaib – kita tidak perlu bercakap dalam 1s dan 0s seperti dalam The Matrix. Di sinilah **bahasa pengaturcaraan** datang untuk menyelamatkan. Mereka seperti mempunyai penterjemah terbaik di dunia yang mengambil pemikiran manusia biasa anda dan menukarkannya kepada bahasa komputer. +Ini yang buat saya terkejut bila mula belajar: komputer sebenarnya sangat mudah dari segi asasnya. Mereka hanya faham dua perkara – 1 dan 0, yang asasnya adalah "ya" dan "tidak" atau "hidup" dan "mati." Itu sahaja! Tapi inilah yang jadi magik – kita tidak perlu bercakap dalam 1 dan 0 seperti dalam The Matrix. Di sinilah **bahasa pengaturcaraan** membantu. Ia seperti mempunyai penterjemah terbaik dunia yang mengambil pemikiran manusia biasa anda dan tukar jadi bahasa komputer. -Dan inilah yang masih membuatkan saya teruja setiap pagi apabila saya bangun: secara literal *segala-galanya* digital dalam hidup anda bermula dengan seseorang seperti anda, mungkin sedang duduk dalam pakaian tidur dengan secawan kopi, menaip kod di laptop mereka. Penapis Instagram yang membuatkan anda kelihatan sempurna? Seseorang mengatur itu. Cadangan yang membawa anda kepada lagu kegemaran baru anda? Seorang pembangun membina algoritma itu. Aplikasi yang membantu anda membahagikan bil makan malam dengan rakan? Ya, seseorang berfikir "ini menjengkelkan, saya rasa saya boleh menyelesaikan ini" dan kemudian... mereka melakukannya! +Dan ini yang masih buat saya teruja setiap pagi bila bangun: hampir *segala-galanya* digital dalam hidup anda bermula dengan seseorang seperti anda, mungkin sedang duduk dalam baju tidur dengan secawan kopi, menaip kod di laptop mereka. Penapis Instagram yang buat anda nampak sempurna? Seseorang yang tulis kod itu. Cadangan yang membawa anda ke lagu kegemaran baru? Pembangun yang bina algoritma itu. Aplikasi yang bantu anda pecah bil makan malam dengan kawan? Ya, seseorang fikir "ini menyusahkan, saya percaya saya boleh baikinya" dan kemudian... mereka buat! -Apabila anda belajar mengatur, anda bukan sahaja mempelajari kemahiran baru – anda menjadi sebahagian daripada komuniti luar biasa penyelesai masalah yang menghabiskan hari mereka berfikir, "Bagaimana jika saya boleh membina sesuatu yang membuatkan hari seseorang menjadi lebih baik?" Jujurnya, adakah perkara yang lebih hebat daripada itu? +Bila anda belajar pengaturcaraan, anda bukan sekadar belajar kemahiran baru – anda menjadi sebahagian daripada komuniti hebat penyelesai masalah yang habiskan masa mereka berfikir, "Bagaimana kalau saya boleh bina sesuatu yang buat hari seseorang jadi lebih baik sikit?" Jujur, ada apa yang lebih hebat daripada itu? -βœ… **Fakta Menarik**: Inilah sesuatu yang sangat menarik untuk anda cari apabila ada masa lapang – siapa yang anda fikir adalah pengaturcara komputer pertama di dunia? Saya akan beri petunjuk: ia mungkin bukan orang yang anda jangkakan! Cerita di sebalik orang ini sangat menarik dan menunjukkan bahawa pengaturcaraan sentiasa tentang penyelesaian masalah kreatif dan berfikir di luar kotak. +βœ… **Cari Fakta Menarik**: Ini sesuatu yang sangat menarik untuk dicari bila ada masa lapang – siapa yang anda fikir adalah pengaturcara komputer pertama dunia? Saya akan beri petunjuk: mungkin bukan yang anda jangkakan! Cerita tentang orang ini sangat menarik dan tunjuk pengaturcaraan sentiasa tentang kreativiti menyelesaikan masalah dan berfikir di luar kotak. -### 🧠 **Masa Semak: Bagaimana Perasaan Anda?** +### 🧠 **Masa Semakan: Bagaimana Perasaan Anda?** -**Luangkan masa untuk merenung:** -- Adakah idea "memberi arahan kepada komputer" masuk akal kepada anda sekarang? -- Bolehkah anda fikirkan tugas harian yang anda ingin automasikan dengan pengaturcaraan? -- Apa soalan yang muncul dalam fikiran anda tentang pengaturcaraan ini? +**Luangkan masa untuk fikir:** +- Adakah idea "memberi arahan kepada komputer" kini masuk akal? +- Boleh kah anda fikirkan tugas harian yang ingin anda automatikkan dengan pengaturcaraan? +- Apa soalan yang muncul dalam fikiran anda tentang perkara pengaturcaraan ini? -> **Ingat**: Ia sangat normal jika beberapa konsep masih kabur sekarang. Belajar pengaturcaraan adalah seperti belajar bahasa baru – ia mengambil masa untuk otak anda membina laluan neural tersebut. Anda sedang melakukan yang terbaik! +> **Ingat:** Normal sahaja jika beberapa konsep rasa keliru sekarang. Belajar pengaturcaraan seperti belajar bahasa baru – ambil masa untuk otak bina laluan saraf. Anda buat dengan baik! -## Bahasa Pengaturcaraan Seperti Pelbagai Rasa Magik +## Bahasa Pengaturcaraan Seperti Rasa-Rasa Sihir Berbeza -Baiklah, ini mungkin kedengaran pelik, tetapi ikut saya – bahasa pengaturcaraan adalah seperti pelbagai jenis muzik. Fikirkan: anda ada jazz, yang lancar dan improvisasi, rock yang kuat dan langsung, klasik yang elegan dan terstruktur, dan hip-hop yang kreatif dan ekspresif. Setiap gaya mempunyai suasana tersendiri, komuniti peminat yang bersemangat, dan setiap satu sesuai untuk mood dan keadaan yang berbeza. +Baiklah, ini mungkin kedengaran pelik, tetapi ikut saya – bahasa pengaturcaraan banyak seperti genre muzik yang berbeza. Fikirkan: ada jazz yang lancar dan spontan, rock yang kuat dan terus-terang, klasik yang anggun dan teratur, dan hip-hop yang kreatif dan ekspresif. Setiap gaya ada suasana sendiri, komuniti peminat yang bersemangat, dan setiap satu sesuai untuk mood dan acara berbeza. -Bahasa pengaturcaraan berfungsi dengan cara yang sama! Anda tidak akan menggunakan bahasa yang sama untuk membina permainan mudah alih yang menyeronokkan seperti yang anda gunakan untuk menganalisis data iklim yang besar, sama seperti anda tidak akan memainkan muzik death metal di kelas yoga (baik, kebanyakan kelas yoga! πŸ˜„). +Bahasa pengaturcaraan berfungsi sama! Anda tak akan guna bahasa yang sama untuk bina permainan mudah alih yang menyeronokkan dengan bahasa yang anda guna untuk analisis data iklim yang besar, sama seperti anda tak akan main death metal dalam kelas yoga (baiklah, kebanyakan kelas yoga! πŸ˜„). -Tetapi inilah yang benar-benar mengejutkan saya setiap kali saya memikirkannya: bahasa-bahasa ini seperti mempunyai penterjemah yang paling sabar dan bijak di dunia duduk di sebelah anda. Anda boleh menyatakan idea anda dengan cara yang terasa semula jadi kepada otak manusia anda, dan mereka mengendalikan semua kerja kompleks untuk menukarkannya kepada 1s dan 0s yang sebenarnya difahami oleh komputer. Ia seperti mempunyai rakan yang fasih dalam kedua-dua "kreativiti manusia" dan "logik komputer" – dan mereka tidak pernah letih, tidak pernah memerlukan rehat kopi, dan tidak pernah menghakimi anda kerana bertanya soalan yang sama dua kali! +Tapi ini yang betul-betul buat saya kagum setiap kali saya fikir: bahasa-bahasa ini seperti ada penterjemah paling sabar dan bijak di dunia duduk di sebelah anda. Anda boleh ungkap idea dengan cara yang semula jadi pada otak manusia anda, dan mereka uruskan kerja kompleks menterjemah itu ke dalam 1 dan 0 yang komputer faham. Macam ada kawan yang fasih kedua-dua "kreativiti manusia" dan "logik komputer" – dan mereka tak pernah penat, tak perlu rehat kopi, dan tak pernah marah bila anda tanya soalan sama dua kali! ### Bahasa Pengaturcaraan Popular dan Kegunaannya ```mermaid mindmap - root((Programming Languages)) + root((Bahasa Pengaturcaraan)) Web Development JavaScript - Frontend Magic - Interactive Websites + Magik Frontend + Laman Web Interaktif TypeScript - JavaScript + Types - Enterprise Apps + JavaScript + Jenis + Aplikasi Perusahaan Data & AI Python - Data Science - Machine Learning - Automation + Sains Data + Pembelajaran Mesin + Automasi R - Statistics - Research + Statistik + Penyelidikan Mobile Apps Java Android - Enterprise + Perusahaan Swift iOS - Apple Ecosystem + Ekosistem Apple Kotlin - Modern Android - Cross-platform + Android Moden + Rentas Platform Systems & Performance C++ - Games - Performance Critical + Permainan + Kritikal Prestasi Rust - Memory Safety - System Programming + Keselamatan Memori + Pengaturcaraan Sistem Go - Cloud Services - Scalable Backend + Perkhidmatan Awan + Backend Skala Besar ``` - | Bahasa | Terbaik Untuk | Kenapa Ia Popular | -|--------|---------------|-------------------| -| **JavaScript** | Pembangunan web, antara muka pengguna | Berfungsi dalam pelayar dan menggerakkan laman web interaktif | +|----------|----------|------------------| +| **JavaScript** | Pembangunan web, antara muka pengguna | Berjalan dalam pelayar dan menggerakkan laman web interaktif | | **Python** | Sains data, automasi, AI | Mudah dibaca dan dipelajari, perpustakaan yang kuat | -| **Java** | Aplikasi perusahaan, aplikasi Android | Bebas platform, kukuh untuk sistem besar | +| **Java** | Aplikasi perusahaan, aplikasi Android | Platform-independen, kukuh untuk sistem besar | | **C#** | Aplikasi Windows, pembangunan permainan | Sokongan ekosistem Microsoft yang kuat | | **Go** | Perkhidmatan awan, sistem backend | Pantas, mudah, direka untuk pengkomputeran moden | -### Bahasa Tingkat Tinggi vs. Tingkat Rendah +### Bahasa Tahap Tinggi vs Tahap Rendah -Baiklah, ini adalah konsep yang benar-benar membuatkan otak saya bingung apabila saya mula belajar, jadi saya akan kongsikan analogi yang akhirnya membuatkan saya faham – dan saya benar-benar berharap ia membantu anda juga! +Baiklah, ini sebenarnya konsep yang buat minda saya 'pecah' bila mula belajar, jadi saya nak kongsi analogi yang akhirnya buat saya faham – dan saya harap ia membantu anda juga! -Bayangkan anda melawat negara di mana anda tidak bercakap bahasa tersebut, dan anda sangat perlu mencari tandas terdekat (kita semua pernah mengalami ini, kan? πŸ˜…): +Bayangkan anda melawat negara yang bahasa mereka anda tak tahu, dan anda sangat perlu cari tandas terdekat (kita semua pernah lalui, kan? πŸ˜…): -- **Pengaturcaraan tingkat rendah** adalah seperti belajar dialek tempatan dengan sangat baik sehingga anda boleh berbual dengan nenek yang menjual buah di sudut jalan menggunakan rujukan budaya, slang tempatan, dan jenaka dalaman yang hanya difahami oleh seseorang yang membesar di sana. Sangat mengagumkan dan sangat efisien... jika anda kebetulan fasih! Tetapi agak mengelirukan apabila anda hanya cuba mencari tandas. +- **Pengaturcaraan tahap rendah** macam belajar dialek tempatan sehingga anda boleh berborak dengan nenek yang jual buah di sudut menggunakan rujukan budaya, bahasa pasar, dan jenaka dalaman yang hanya orang tempatan faham. Sangat mengagumkan dan sangat cekap... jika anda memang fasih! Tapi agak memeningkan bila anda cuma mahu cari tandas. -- **Pengaturcaraan tingkat tinggi** adalah seperti mempunyai rakan tempatan yang hebat yang benar-benar memahami anda. Anda boleh berkata "Saya sangat perlu mencari tandas" dalam bahasa Inggeris biasa, dan mereka mengendalikan semua terjemahan budaya dan memberikan arahan dengan cara yang masuk akal kepada otak bukan tempatan anda. +- **Pengaturcaraan tahap tinggi** macam ada kawan tempatan yang faham anda betul-betul. Anda cakap "Saya betul-betul perlu cari tandas" dalam Bahasa Inggeris biasa, dan mereka uruskan semua terjemahan budaya dan bagi arah yang masuk akal untuk otak bukan tempatan anda. Dalam istilah pengaturcaraan: -- **Bahasa tingkat rendah** (seperti Assembly atau C) membolehkan anda berbual dengan sangat terperinci dengan perkakasan komputer sebenar, tetapi anda perlu berfikir seperti mesin, yang... baiklah, mari kita katakan ia adalah perubahan mental yang besar! -- **Bahasa tingkat tinggi** (seperti JavaScript, Python, atau C#) membolehkan anda berfikir seperti manusia sementara mereka mengendalikan semua bahasa mesin di belakang tabir. Tambahan pula, mereka mempunyai komuniti yang sangat mesra penuh dengan orang yang ingat bagaimana rasanya menjadi baru dan benar-benar ingin membantu! +- **Bahasa tahap rendah** (seperti Assembly atau C) membenarkan anda berinteraksi secara sangat terperinci dengan perkakasan sebenar komputer, tetapi anda perlu fikir macam mesin, yang... mari kita kata satu perubahan mental yang besar! +- **Bahasa tahap tinggi** (seperti JavaScript, Python, atau C#) membenarkan anda berfikir macam manusia sementara mereka uruskan bahasa mesin di belakang tabir. Selain itu, mereka ada komuniti sangat mesra yang pernah jadi pemula dan benar-benar mahu membantu! -Agak jelas yang mana satu saya akan cadangkan anda mulakan, kan? πŸ˜‰ Bahasa tingkat tinggi adalah seperti mempunyai roda latihan yang anda tidak pernah mahu tanggalkan kerana ia menjadikan keseluruhan pengalaman lebih menyeronokkan! +Teka bahasa mana saya cadangkan anda mula dengan? πŸ˜‰ Bahasa tahap tinggi macam roda latihan yang anda tak mahu tanggalkan sebab ia buat pengalaman belajar lebih menyeronokkan! ```mermaid flowchart TB - A["πŸ‘€ Human Thought:
'I want to calculate Fibonacci numbers'"] --> B{Choose Language Level} + A["πŸ‘€ Pemikiran Manusia:
'Saya mahu mengira nombor Fibonacci'"] --> B{Pilih Tahap Bahasa} - B -->|High-Level| C["🌟 JavaScript/Python
Easy to read and write"] - B -->|Low-Level| D["βš™οΈ Assembly/C
Direct hardware control"] + B -->|Tahap Tinggi| C["🌟 JavaScript/Python
Mudah dibaca dan ditulis"] + B -->|Tahap Rendah| D["βš™οΈ Assembly/C
Kawalan terus perkakasan"] - C --> E["πŸ“ Write: fibonacci(10)"] - D --> F["πŸ“ Write: mov r0,#00
sub r0,r0,#01"] + C --> E["πŸ“ Tulis: fibonacci(10)"] + D --> F["πŸ“ Tulis: mov r0,#00
sub r0,r0,#01"] - E --> G["πŸ€– Computer Understanding:
Translator handles complexity"] + E --> G["πŸ€– Pemahaman Komputer:
Penterjemah mengendalikan kerumitan"] F --> G - G --> H["πŸ’» Same Result:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["πŸ’» Keputusan Sama:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` +### Saya Nak Tunjukkan Kenapa Bahasa Tahap Tinggi Lebih Mesra -### Biarkan Saya Tunjukkan Kenapa Bahasa Tingkat Tinggi Lebih Mesra - -Baiklah, saya akan tunjukkan sesuatu yang sempurna untuk menunjukkan kenapa saya jatuh cinta dengan bahasa tingkat tinggi, tetapi pertama – saya perlukan anda berjanji sesuatu. Apabila anda melihat contoh kod pertama itu, jangan panik! Ia sepatutnya kelihatan menakutkan. Itulah intipati yang saya cuba sampaikan! +Baiklah, saya nak tunjuk sesuatu yang jelas menunjukkan kenapa saya jatuh cinta pada bahasa tahap tinggi, tapi dulu – saya perlukan anda janji sesuatu. Bila lihat contoh kod pertama, jangan panik! Ia sepatutnya nampak menakutkan. Itu memang poin saya! -Kita akan melihat tugas yang sama ditulis dalam dua gaya yang berbeza. Kedua-duanya mencipta apa yang dipanggil urutan Fibonacci – ia adalah corak matematik yang indah di mana setiap nombor adalah jumlah dua nombor sebelumnya: 0, 1, 1, 2, 3, 5, 8, 13... (Fakta menarik: anda akan menemui corak ini di mana-mana dalam alam semula jadi – lingkaran biji bunga matahari, corak kon pain, malah cara galaksi terbentuk!) +Kita akan lihat tugasan yang sama ditulis dalam dua gaya berbeza. Kedua-duanya cipta apa yang dipanggil urutan Fibonacci – pola matematik indah di mana setiap nombor adalah jumlah dua nombor sebelum itu: 0, 1, 1, 2, 3, 5, 8, 13... (Fakta menarik: pola ini ada di mana-mana dalam alam semula jadi – putaran biji bunga matahari, corak buah pinus, malah cara galaksi terbentuk!) -Bersedia untuk melihat perbezaannya? Mari kita mulakan! +Sedia nak lihat perbezaannya? Mari! -**Bahasa tingkat tinggi (JavaScript) – Mesra manusia:** +**Bahasa tahap tinggi (JavaScript) – Mesra manusia:** ```javascript -// Step 1: Basic Fibonacci setup +// Langkah 1: Persediaan asas Fibonacci const fibonacciCount = 10; let current = 0; let next = 1; @@ -185,32 +183,32 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**Inilah yang dilakukan oleh kod ini:** -- **Mengisytiharkan** satu constant untuk menentukan berapa banyak nombor Fibonacci yang kita mahu hasilkan -- **Memulakan** dua pembolehubah untuk menjejaki nombor semasa dan seterusnya dalam urutan -- **Menetapkan** nilai permulaan (0 dan 1) yang menentukan corak Fibonacci -- **Memaparkan** mesej tajuk untuk mengenal pasti output kita +**Ini yang kod ini lakukan:** +- **Isytiharkan** satu tetap untuk tentukan berapa banyak nombor Fibonacci kita nak hasilkan +- **Mula** dengan dua pembolehubah untuk jejak nombor sekarang dan seterusnya dalam urutan +- **Tetapkan** nilai permulaan (0 dan 1) yang menentukan pola Fibonacci +- **Papar** mesej header untuk kenal pasti output kita ```javascript -// Step 2: Generate the sequence with a loop +// Langkah 2: Jana urutan dengan gelung for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Calculate next number in sequence + // Kira nombor seterusnya dalam urutan const sum = current + next; current = next; next = sum; } ``` -**Memecahkan apa yang berlaku di sini:** -- **Mengulang** setiap kedudukan dalam urutan kita menggunakan `for` loop -- **Memaparkan** setiap nombor dengan kedudukannya menggunakan format literal templat -- **Mengira** nombor Fibonacci seterusnya dengan menambah nilai semasa dan seterusnya -- **Mengemas kini** pembolehubah penjejakan kita untuk bergerak ke iterasi seterusnya +**Terangkan apa yang berlaku di sini:** +- **Ulang** untuk setiap kedudukan dalam urutan menggunakan gelung `for` +- **Papar** setiap nombor dengan kedudukannya menggunakan format template literal +- **Kira** nombor Fibonacci seterusnya dengan tambah nilai sekarang dan seterusnya +- **Kemas kini** pembolehubah untuk bergerak ke iterasi seterusnya ```javascript -// Step 3: Modern functional approach +// Langkah 3: Pendekatan fungsional moden const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -221,18 +219,18 @@ const generateFibonacci = (count) => { return sequence; }; -// Usage example +// Contoh penggunaan const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**Dalam kod di atas, kita telah:** -- **Mencipta** fungsi boleh guna semula menggunakan sintaks fungsi anak panah moden -- **Membina** array untuk menyimpan urutan lengkap daripada memaparkan satu persatu -- **Menggunakan** pengindeksan array untuk mengira setiap nombor baru daripada nilai sebelumnya -- **Mengembalikan** urutan lengkap untuk kegunaan fleksibel dalam bahagian lain program kita +**Dalam contoh di atas, kita:** +- **Cipta** fungsi boleh guna semula menggunakan sintaks fungsi anak panah moden +- **Bina** senarai untuk simpan urutan penuh daripada hanya paparkan satu demi satu +- **Guna** indeks senarai untuk kira setiap nombor baru dari nilai sebelum +- **Pulangkan** urutan penuh untuk kegunaan fleksibel dalam bahagian lain program kita -**Bahasa tingkat rendah (ARM Assembly) – Mesra komputer:** +**Bahasa tahap rendah (ARM Assembly) – Mesra komputer:** ```assembly area ascen,code,readonly @@ -259,63 +257,63 @@ back add r0,r1 end ``` -Perhatikan bagaimana versi JavaScript hampir seperti arahan dalam bahasa Inggeris, sementara versi Assembly menggunakan arahan yang sukar difahami yang secara langsung mengawal pemproses komputer. Kedua-duanya menyelesaikan tugas yang sama, tetapi bahasa tingkat tinggi jauh lebih mudah untuk manusia fahami, tulis, dan selenggara. +Perhatikan bagaimana versi JavaScript baca hampir seperti arahan dalam Bahasa Inggeris, manakala versi Assembly menggunakan arahan cryptic yang mengawal terus pemproses komputer. Kedua-duanya capai tugas yang sama, tetapi bahasa tahap tinggi jauh lebih mudah difahami, ditulis, dan diselenggara oleh manusia. -**Perbezaan utama yang anda akan perhatikan:** -- **Kebolehbacaan**: JavaScript menggunakan nama deskriptif seperti `fibonacciCount` sementara Assembly menggunakan label yang sukar difahami seperti `r0`, `r1` -- **Komen**: Bahasa pengaturcaraan tahap tinggi menggalakkan komen penjelasan yang menjadikan kod lebih mudah difahami -- **Struktur**: Aliran logik JavaScript sepadan dengan cara manusia berfikir tentang masalah secara langkah demi langkah -- **Penyelenggaraan**: Mengemas kini versi JavaScript untuk keperluan yang berbeza adalah mudah dan jelas +**Perbezaan utama yang anda perhatikan:** +- **Kebolehbacaan**: JavaScript menggunakan nama yang deskriptif seperti `fibonacciCount` manakala Assembly menggunakan label yang sukar difahami seperti `r0`, `r1` +- **Komen**: Bahasa aras tinggi menggalakkan komen penerangan yang menjadikan kod itu sendiri sebagai dokumentasi +- **Struktur**: Aliran logik JavaScript sepadan dengan cara manusia berfikir tentang masalah satu demi satu +- **Penyelenggaraan**: Mengemas kini versi JavaScript untuk keperluan berbeza adalah mudah dan jelas -βœ… **Tentang urutan Fibonacci**: Corak nombor yang sangat cantik ini (di mana setiap nombor adalah jumlah dua nombor sebelumnya: 0, 1, 1, 2, 3, 5, 8...) muncul *di mana-mana* dalam alam semula jadi! Anda boleh menemukannya dalam lingkaran bunga matahari, corak kon pain, cara cengkerang nautilus melengkung, dan bahkan dalam cara cabang pokok tumbuh. Sangat menakjubkan bagaimana matematik dan kod dapat membantu kita memahami dan mencipta semula corak yang digunakan alam untuk mencipta keindahan! +βœ… **Mengenai siri Fibonacci**: Corak nombor yang sangat indah ini (di mana setiap nombor adalah jumlah dua nombor sebelumnya: 0, 1, 1, 2, 3, 5, 8...) muncul secara harfiah *di mana-mana* dalam alam semula jadi! Anda akan menjumpainya dalam lingkaran bunga matahari, corak biji pinus, cara cengkerang nautilus melengkung, dan malah dalam cara dahan pokok tumbuh. Memang menakjubkan bagaimana matematik dan kod boleh membantu kita memahami dan menghasilkan semula corak yang digunakan alam untuk mencipta keindahan! -## Blok Asas yang Membuat Keajaiban Terjadi +## Blok Bangunan Yang Membuat Keajaiban Berlaku -Baiklah, sekarang setelah anda melihat bagaimana bahasa pengaturcaraan berfungsi, mari kita pecahkan bahagian asas yang membentuk setiap program yang pernah ditulis. Anggaplah ini sebagai bahan penting dalam resipi kegemaran anda – setelah anda memahami apa yang dilakukan oleh setiap satu, anda akan dapat membaca dan menulis kod dalam hampir semua bahasa! +Baiklah, sekarang anda telah melihat bagaimana bahasa pengaturcaraan berfungsi dalam tindakan, mari kita pecahkan bahagian asas yang membentuk hampir setiap program yang pernah ditulis. Anggaplah ini sebagai bahan penting dalam resipi kegemaran anda – apabila anda memahami apa yang setiap satu lakukan, anda akan dapat membaca dan menulis kod dalam hampir mana-mana bahasa! -Ini seperti belajar tatabahasa pengaturcaraan. Ingat semasa di sekolah anda belajar tentang kata nama, kata kerja, dan cara menyusun ayat? Pengaturcaraan mempunyai versi tatabahasa sendiri, dan jujurnya, ia jauh lebih logik dan mudah daripada tatabahasa Bahasa Inggeris! πŸ˜„ +Ini agak seperti belajar tatabahasa pengaturcaraan. Ingat masa di sekolah apabila anda belajar tentang kata nama, kata kerja, dan bagaimana menyusun ayat? Pengaturcaraan mempunyai versi tatabahasa sendiri, dan jujurnya, ia jauh lebih logik dan memaafkan berbanding tatabahasa Bahasa Inggeris! πŸ˜„ -### Pernyataan: Arahan Langkah Demi Langkah +### Penyataan: Arahan Langkah demi Langkah -Mari kita mulakan dengan **pernyataan** – ini seperti ayat individu dalam perbualan dengan komputer anda. Setiap pernyataan memberitahu komputer untuk melakukan satu perkara tertentu, seperti memberikan arahan: "Belok kiri di sini," "Berhenti di lampu merah," "Parkir di tempat itu." +Mari mulakan dengan **penyataan** – ini seperti ayat tunggal dalam perbualan dengan komputer anda. Setiap penyataan memberitahu komputer untuk melakukan satu perkara tertentu, seperti memberi arahan: "Belok kiri di sini," "Berhenti di lampu merah," "Parkir di tempat itu." -Apa yang saya suka tentang pernyataan adalah betapa mudah dibacanya. Lihat ini: +Apa yang saya suka tentang penyataan adalah betapa biasanya mudah dibaca. Lihat ini: ```javascript -// Basic statements that perform single actions +// Pernyataan asas yang melaksanakan tindakan tunggal const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` -**Inilah yang dilakukan oleh kod ini:** -- **Mengisytiharkan** pembolehubah tetap untuk menyimpan nama pengguna -- **Memaparkan** mesej ucapan ke output konsol -- **Mengira** dan menyimpan hasil operasi matematik +**Ini yang dibuat oleh kod ini:** +- **Isytihar** pembolehubah tetap untuk menyimpan nama pengguna +- **Paparkan** mesej salam ke output konsol +- **Kira** dan simpan hasil operasi matematik ```javascript -// Statements that interact with web pages +// Kenyataan yang berinteraksi dengan halaman web document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**Langkah demi langkah, inilah yang berlaku:** -- **Mengubah** tajuk laman web yang muncul di tab pelayar -- **Menukar** warna latar belakang keseluruhan badan halaman +**Langkah demi langkah, ini yang berlaku:** +- **Ubah** tajuk halaman web yang muncul di tab pelayar +- **Tukar** warna latar belakang seluruh badan halaman ### Pembolehubah: Sistem Memori Program Anda -Baiklah, **pembolehubah** adalah salah satu konsep kegemaran saya untuk diajar kerana ia sangat mirip dengan perkara yang anda gunakan setiap hari! +Baiklah, **pembolehubah** sebenarnya adalah salah satu konsep kegemaran saya untuk diajar kerana ia sangat mirip dengan perkara yang anda gunakan setiap hari! -Fikirkan senarai kenalan telefon anda sebentar. Anda tidak menghafal nombor telefon semua orang – sebaliknya, anda menyimpan "Ibu," "Kawan Baik," atau "Tempat Pizza Yang Hantar Sampai 2 Pagi" dan biarkan telefon anda mengingat nombor sebenar. Pembolehubah berfungsi dengan cara yang sama! Ia seperti bekas berlabel di mana program anda boleh menyimpan maklumat dan mengambilnya kemudian menggunakan nama yang masuk akal. +Fikirkan tentang senarai kontak telefon anda seketika. Anda tidak menghafal nombor telefon setiap orang – sebaliknya, anda menyimpan "Ibu," "Kawan Baik," atau "Tempat Pizza Yang Menghantar Sehingga 2 Pagi" dan biar telefon anda mengingat nombor sebenar. Pembolehubah berfungsi dengan cara yang sama! Mereka seperti bekas berlabel di mana program anda boleh menyimpan maklumat dan mengambilnya semula menggunakan nama yang sebenar bermakna. -Inilah yang sangat menarik: pembolehubah boleh berubah semasa program anda berjalan (itulah sebabnya ia dipanggil "pembolehubah" – faham maksudnya?). Sama seperti anda mungkin mengemas kini kenalan tempat pizza itu apabila anda menemui tempat yang lebih baik, pembolehubah boleh dikemas kini apabila program anda mempelajari maklumat baru atau apabila keadaan berubah! +Ini yang sangat menarik: pembolehubah boleh berubah sewaktu program anda berjalan (oleh itu nama "pembolehubah" – nampak tak apa yang mereka buat?). Sama seperti anda mungkin mengemas kini kontak tempat pizza itu apabila anda temui tempat yang lebih baik, pembolehubah boleh dikemas kini apabila program anda mempelajari maklumat baru atau apabila keadaan berubah! -Biar saya tunjukkan betapa mudahnya ini: +Biarkan saya tunjukkan betapa mudahnya ini: ```javascript -// Step 1: Creating basic variables +// Langkah 1: Mewujudkan pembolehubah asas const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; @@ -323,13 +321,13 @@ let isRaining = false; ``` **Memahami konsep ini:** -- **Simpan** nilai yang tidak berubah dalam pembolehubah `const` (seperti nama laman web) +- **Simpan** nilai yang tidak berubah dalam pembolehubah `const` (seperti nama tapak) - **Gunakan** `let` untuk nilai yang boleh berubah sepanjang program anda -- **Tetapkan** jenis data yang berbeza: teks (string), nombor, dan boolean (benar/palsu) -- **Pilih** nama deskriptif yang menjelaskan apa yang terkandung dalam setiap pembolehubah +- **Tugaskan** jenis data berbeza: rentetan (teks), nombor, dan boolean (betul/salah) +- **Pilih** nama yang deskriptif yang menjelaskan apa yang setiap pembolehubah simpan ```javascript -// Step 2: Working with objects to group related data +// Langkah 2: Bekerja dengan objek untuk mengelompokkan data berkaitan const weatherData = { location: "San Francisco", humidity: 65, @@ -337,50 +335,50 @@ const weatherData = { }; ``` -**Dalam kod di atas, kita telah:** -- **Mencipta** objek untuk mengelompokkan maklumat cuaca yang berkaitan -- **Mengatur** beberapa bahagian data di bawah satu nama pembolehubah -- **Menggunakan** pasangan kunci-nilai untuk melabelkan setiap bahagian maklumat dengan jelas +**Dalam contoh di atas, kita telah:** +- **Buat** objek untuk mengumpul maklumat cuaca berkaitan +- **Susun** pelbagai data di bawah satu nama pembolehubah +- **Gunakan** pasangan kunci-nilai untuk memberi label setiap maklumat dengan jelas ```javascript -// Step 3: Using and updating variables +// Langkah 3: Menggunakan dan mengemas kini pembolehubah console.log(`${siteName}: Today is ${currentWeather} and ${temperature}Β°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Updating changeable variables +// Mengemas kini pembolehubah yang boleh diubah currentWeather = "cloudy"; temperature = 68; ``` -**Mari kita fahami setiap bahagian:** +**Mari fahami setiap bahagian:** - **Paparkan** maklumat menggunakan literal templat dengan sintaks `${}` - **Akses** sifat objek menggunakan notasi titik (`weatherData.windSpeed`) - **Kemas kini** pembolehubah yang diisytiharkan dengan `let` untuk mencerminkan keadaan yang berubah -- **Gabungkan** beberapa pembolehubah untuk mencipta mesej yang bermakna +- **Gabungkan** beberapa pembolehubah untuk membuat mesej yang bermakna ```javascript -// Step 4: Modern destructuring for cleaner code +// Langkah 4: Pemecahan moden untuk kod yang lebih kemas const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**Apa yang perlu anda tahu:** -- **Ekstrak** sifat tertentu daripada objek menggunakan penugasan destruktur -- **Cipta** pembolehubah baru secara automatik dengan nama yang sama seperti kunci objek -- **Permudahkan** kod dengan mengelakkan notasi titik berulang +**Apa yang anda perlu tahu:** +- **Ekstrak** sifat tertentu dari objek menggunakan penugasan destruktur +- **Buat** pembolehubah baru secara automatik dengan nama yang sama seperti kunci objek +- **Permudahkan** kod dengan mengelakkan penggunaan notasi titik berulang ### Aliran Kawalan: Mengajar Program Anda Berfikir -Baiklah, di sinilah pengaturcaraan menjadi sangat menakjubkan! **Aliran kawalan** pada dasarnya mengajar program anda bagaimana membuat keputusan pintar, sama seperti yang anda lakukan setiap hari tanpa berfikir. +Baiklah, di sinilah pengaturcaraan jadi sangat menakjubkan! **Aliran kawalan** adalah mengajar program anda bagaimana membuat keputusan bijak, sama seperti yang anda lakukan setiap hari tanpa perlu berfikir. -Bayangkan ini: pagi tadi anda mungkin melalui sesuatu seperti "Jika hujan, saya akan ambil payung. Jika sejuk, saya akan pakai jaket. Jika saya terlambat, saya akan abaikan sarapan dan ambil kopi dalam perjalanan." Otak anda secara semula jadi mengikuti logik jika-maka ini berpuluh-puluh kali setiap hari! +Bayangkan ini: pagi ini anda mungkin melalui sesuatu seperti "Jika hujan, saya akan ambil payung. Jika sejuk, saya akan pakai jaket. Jika lambat, saya akan tinggalkan sarapan dan ambil kopi dalam perjalanan." Otak anda secara semula jadi mengikuti logik jika-kemudian ini berpuluh kali setiap hari! -Inilah yang membuat program terasa pintar dan hidup daripada hanya mengikuti skrip yang membosankan dan boleh diramal. Mereka sebenarnya boleh melihat situasi, menilai apa yang sedang berlaku, dan bertindak balas dengan sewajarnya. Ia seperti memberikan program anda otak yang boleh menyesuaikan diri dan membuat pilihan! +Ini yang membuat program rasa pintar dan hidup, bukannya hanya mengikuti skrip membosankan dan boleh dijangka. Mereka sebenarnya boleh melihat keadaan, menilai apa yang sedang berlaku, dan memberi tindak balas yang sesuai. Ia seperti memberi program anda otak yang boleh menyesuaikan diri dan membuat pilihan! -Mahukan contoh bagaimana ini berfungsi dengan indah? Biar saya tunjukkan: +Nak tengok betapa hebatnya ini berfungsi? Mari saya tunjukkan: ```javascript -// Step 1: Basic conditional logic +// Langkah 1: Logik bersyarat asas const userAge = 17; if (userAge >= 18) { @@ -391,14 +389,14 @@ if (userAge >= 18) { } ``` -**Inilah yang dilakukan oleh kod ini:** +**Ini yang dibuat oleh kod ini:** - **Periksa** jika umur pengguna memenuhi syarat mengundi -- **Laksanakan** blok kod yang berbeza berdasarkan hasil keadaan -- **Kira** dan paparkan berapa lama sehingga layak mengundi jika di bawah 18 tahun -- **Berikan** maklum balas yang spesifik dan berguna untuk setiap senario +- **Jalankan** blok kod berbeza berdasarkan hasil keadaan +- **Kira** dan paparkan berapa lama lagi sehingga layak mengundi jika bawah 18 +- **Berikan** maklum balas khusus yang membantu untuk setiap senario ```javascript -// Step 2: Multiple conditions with logical operators +// Langkah 2: Pelbagai syarat dengan operator logik const userAge = 17; const hasPermission = true; @@ -412,24 +410,24 @@ if (userAge >= 18 && hasPermission) { ``` **Memecahkan apa yang berlaku di sini:** -- **Gabungkan** beberapa keadaan menggunakan operator `&&` (dan) -- **Cipta** hierarki keadaan menggunakan `else if` untuk beberapa senario -- **Tangani** semua kes yang mungkin dengan pernyataan `else` terakhir -- **Berikan** maklum balas yang jelas dan boleh diambil tindakan untuk setiap situasi yang berbeza +- **Gabungkan** pelbagai syarat menggunakan operator `&&` (dan) +- **Bina** hierarki syarat menggunakan `else if` untuk berbilang senario +- **Tangani** semua kemungkinan dengan penyataan `else` terakhir +- **Berikan** maklum balas yang jelas dan boleh bertindak untuk setiap situasi berbeza ```javascript -// Step 3: Concise conditional with ternary operator +// Langkah 3: Syarat ringkas dengan operator ternari const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**Apa yang perlu anda ingat:** -- **Gunakan** operator ternari (`? :`) untuk keadaan dua pilihan yang mudah -- **Tulis** keadaan terlebih dahulu, diikuti oleh `?`, kemudian hasil benar, kemudian `:`, kemudian hasil palsu -- **Gunakan** corak ini apabila anda perlu menetapkan nilai berdasarkan keadaan +**Apa yang anda perlu ingat:** +- **Gunakan** operator terner (`? :`) untuk syarat dua pilihan mudah +- **Tulis** syarat dulu, ikut dengan `?`, kemudian hasil benar, kemudian `:`, kemudian hasil salah +- **Gunakan** corak ini apabila mahu tugaskan nilai berdasarkan syarat ```javascript -// Step 4: Handling multiple specific cases +// Langkah 4: Mengendalikan pelbagai kes khusus const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -450,56 +448,55 @@ switch (dayOfWeek) { ``` **Kod ini mencapai perkara berikut:** -- **Padankan** nilai pembolehubah dengan beberapa kes tertentu -- **Kelompokkan** kes yang serupa bersama-sama (hari kerja vs. hujung minggu) -- **Laksanakan** blok kod yang sesuai apabila padanan ditemui +- **Padankan** nilai pembolehubah dengan beberapa kes spesifik +- **Kumpulkan** kes yang serupa (hari bekerja lawan hujung minggu) +- **Jalankan** blok kod yang tepat apabila ada padanan - **Sertakan** kes `default` untuk menangani nilai yang tidak dijangka -- **Gunakan** pernyataan `break` untuk mengelakkan kod terus ke kes seterusnya +- **Gunakan** penyataan `break` untuk mengelakkan kod terus ke kes seterusnya -> πŸ’‘ **Analogi dunia nyata**: Fikirkan aliran kawalan seperti mempunyai GPS yang paling sabar di dunia memberikan anda arahan. Ia mungkin berkata "Jika ada trafik di Jalan Utama, ambil lebuh raya sebagai gantinya. Jika pembinaan menghalang lebuh raya, cuba laluan pemandangan." Program menggunakan logik bersyarat yang sama untuk bertindak balas dengan bijak terhadap situasi yang berbeza dan sentiasa memberikan pengalaman terbaik kepada pengguna. +> πŸ’‘ **Analogi dunia sebenar**: Fikirkan aliran kawalan seperti mempunyai GPS yang paling sabar di dunia memberi arahan. Ia mungkin berkata "Jika ada trafik di Jalan Utama, ambil lebuh raya sebagai gantinya. Jika pembinaan menghalang lebuh raya, cuba laluan yang indah." Program menggunakan jenis logik bersyarat yang sama untuk memberi maklum balas secara bijak kepada pelbagai situasi dan sentiasa memberikan pengguna pengalaman terbaik. -### 🎯 **Semakan Konsep: Penguasaan Blok Asas** +### 🎯 **Semakan Konsep: Penguasaan Blok Bangunan** -**Mari lihat sejauh mana anda memahami asas-asas ini:** -- Bolehkah anda menerangkan perbezaan antara pembolehubah dan pernyataan dengan kata-kata anda sendiri? -- Fikirkan senario dunia nyata di mana anda akan menggunakan keputusan jika-maka (seperti contoh mengundi kita) -- Apa satu perkara tentang logik pengaturcaraan yang mengejutkan anda? +**Mari kita lihat sejauh mana pemahaman anda tentang asas:** +- Boleh tak terangkan perbezaan antara pembolehubah dan penyataan dengan kata-kata anda sendiri? +- Fikirkan satu senario dunia sebenar di mana anda akan gunakan keputusan if-then (seperti contoh pengundian kita) +- Apa satu perkara mengenai logik pengaturcaraan yang buat anda terkejut? -**Peningkatan keyakinan cepat:** +**Peningkat keyakinan cepat:** ```mermaid flowchart LR - A["πŸ“ Statements
(Instructions)"] --> B["πŸ“¦ Variables
(Storage)"] --> C["πŸ”€ Control Flow
(Decisions)"] --> D["πŸŽ‰ Working Program!"] + A["πŸ“ Pernyataan
(Arahan)"] --> B["πŸ“¦ Pembolehubah
(Simpanan)"] --> C["πŸ”€ Aliran Kawalan
(Keputusan)"] --> D["πŸŽ‰ Program Berfungsi!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` +βœ… **Apa yang akan datang**: Kita akan berseronok meneroka lebih mendalam tentang konsep ini sambil meneruskan perjalanan luar biasa ini bersama! Sekarang, fokus saja pada rasa keterujaan tentang semua kemungkinan menakjubkan yang menanti anda. Kemahiran dan teknik khusus akan terhasil secara semula jadi apabila kita berlatih bersama – saya janji ini akan jadi lebih menyeronokkan dari yang anda sangka! -βœ… **Apa yang akan datang**: Kita akan berseronok mendalami konsep-konsep ini semasa kita meneruskan perjalanan luar biasa ini bersama-sama! Buat masa ini, fokuslah pada perasaan teruja tentang semua kemungkinan hebat yang menanti anda. Kemahiran dan teknik khusus akan melekat secara semula jadi semasa kita berlatih bersama – saya janji ini akan jauh lebih menyeronokkan daripada yang anda jangkakan! - -## Alat yang Digunakan +## Alat Perdagangan -Baiklah, ini adalah bahagian di mana saya sangat teruja sehingga hampir tidak dapat mengawal diri saya! πŸš€ Kita akan bercakap tentang alat luar biasa yang akan membuatkan anda merasa seperti baru sahaja diberikan kunci kepada kapal angkasa digital. +Baiklah, ini sebenarnya buat saya sangat teruja sampai tak sabar nak berkongsi! πŸš€ Kita akan bercakap tentang alat luar biasa yang akan buat anda rasa seolah-olah baru saja diberi kunci ke kapal angkasa digital. -Anda tahu bagaimana seorang chef mempunyai pisau yang seimbang dengan sempurna yang terasa seperti lanjutan tangan mereka? Atau bagaimana seorang pemuzik mempunyai gitar yang seolah-olah menyanyi sebaik sahaja mereka menyentuhnya? Nah, pembangun mempunyai versi alat ajaib ini, dan inilah yang akan membuatkan anda kagum – kebanyakannya adalah percuma! +Anda tahu bagaimana chef ada pisau yang seimbang sempurna yang terasa seperti sambungan tangan mereka? Atau bagaimana pemuzik ada gitar yang seolah-olah bernyanyi sebaik sahaja disentuh? Baiklah, pembangun ada versi alat ajaib mereka sendiri, dan inilah yang akan benar-benar mengejutkan anda – kebanyakannya percuma sepenuhnya! -Saya hampir melompat dari kerusi saya memikirkan untuk berkongsi ini dengan anda kerana ia telah merevolusikan cara kita membina perisian. Kita bercakap tentang pembantu pengkodan berkuasa AI yang boleh membantu menulis kod anda (saya tidak bergurau!), persekitaran awan di mana anda boleh membina aplikasi sepenuhnya dari mana-mana sahaja dengan Wi-Fi, dan alat debugging yang sangat canggih sehingga ia seperti mempunyai penglihatan X-ray untuk program anda. +Saya secara harfiah teruja untuk berkongsi ini dengan anda kerana ia telah merevolusikan cara kita membina perisian. Kita bercakap tentang pembantu pengekodan berkuasa AI yang boleh membantu menulis kod anda (saya tak bergurau!), persekitaran awan di mana anda boleh bina aplikasi penuh dari mana-mana sahaja dengan Wi-Fi, dan alat menyahpepijat yang sangat canggih seolah-olah ada penglihatan sinar-X untuk program anda. -Dan inilah bahagian yang masih membuatkan saya meremang: ini bukan "alat pemula" yang akan anda tinggalkan. Ini adalah alat profesional yang sama yang digunakan oleh pembangun di Google, Netflix, dan studio aplikasi indie yang anda suka pada saat ini. Anda akan merasa seperti seorang profesional menggunakannya! +Dan bahagian yang masih membuat saya berdebar: ini bukan "alat untuk pemula" yang akan anda tinggalkan bila dah maju. Ini adalah alat profesional yang sama yang digunakan oleh pembangun di Google, Netflix, dan studio aplikasi indie kegemaran anda ketika ini. Anda akan rasa sangat pro menggunakan mereka! ```mermaid graph TD - A["πŸ’‘ Your Idea"] --> B["⌨️ Code Editor
(VS Code)"] - B --> C["🌐 Browser DevTools
(Testing & Debugging)"] - C --> D["⚑ Command Line
(Automation & Tools)"] - D --> E["πŸ“š Documentation
(Learning & Reference)"] - E --> F["πŸš€ Amazing Web App!"] + A["πŸ’‘ Idea Anda"] --> B["⌨️ Penyunting Kod
(VS Code)"] + B --> C["🌐 Alat Pembangun Pelayar
(Ujian & Penyahpepijatan)"] + C --> D["⚑ Baris Arahan
(Automasi & Alat)"] + D --> E["πŸ“š Dokumentasi
(Pembelajaran & Rujukan)"] + E --> F["πŸš€ Apl Web Luar Biasa!"] - B -.-> G["πŸ€– AI Assistant
(GitHub Copilot)"] - C -.-> H["πŸ“± Device Testing
(Responsive Design)"] - D -.-> I["πŸ“¦ Package Managers
(npm, yarn)"] - E -.-> J["πŸ‘₯ Community
(Stack Overflow)"] + B -.-> G["πŸ€– Pembantu AI
(GitHub Copilot)"] + C -.-> H["πŸ“± Ujian Peranti
(Reka Bentuk Responsif)"] + D -.-> I["πŸ“¦ Pengurus Pakej
(npm, yarn)"] + E -.-> J["πŸ‘₯ Komuniti
(Stack Overflow)"] style A fill:#fff59d style F fill:#c8e6c9 @@ -508,176 +505,177 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` +### Penyunting Kod dan IDE: Sahabat Digital Baru Anda -### Editor Kod dan IDE: Sahabat Digital Baru Anda +Mari kita bercakap tentang penyunting kod – ini benar-benar akan jadi tempat kegemaran baru anda untuk melepak! Anggapkan mereka sebagai sanctuary pengaturcaraan peribadi di mana anda akan habiskan masa paling banyak hasilkan dan sempurnakan ciptaan digital anda. -Mari kita bercakap tentang editor kod – ini akan menjadi tempat kegemaran baru anda untuk menghabiskan masa! Anggaplah mereka sebagai tempat perlindungan pengkodan peribadi anda di mana anda akan menghabiskan sebahagian besar masa anda mencipta dan menyempurnakan ciptaan digital anda. +Tapi inilah yang sangat ajaib tentang penyunting moden: mereka bukan sahaja editor teks biasa. Mereka seperti mempunyai mentor pengekodan yang paling bijak dan penyokong sentiasa di sebelah anda 24/7. Mereka tangkap kesilapan taip sebelum anda sedar, cadangkan penambahbaikan yang membuat anda kelihatan genius, bantu anda faham apa yang setiap bahagian kod buat, dan sesetengahnya boleh jangka apa yang anda mahu taip dan tawarkan habiskan fikiran anda! -Tetapi inilah yang benar-benar ajaib tentang editor moden: mereka bukan sekadar editor teks mewah. Mereka seperti mempunyai mentor pengkodan yang paling bijak dan menyokong duduk di sebelah anda 24/7. Mereka menangkap kesalahan ketik anda sebelum anda menyedarinya, mencadangkan penambahbaikan yang membuatkan anda kelihatan seperti seorang genius, membantu anda memahami apa yang dilakukan oleh setiap bahagian kod, dan beberapa daripadanya bahkan boleh meramalkan apa yang akan anda taip dan menawarkan untuk menyelesaikan pemikiran anda! +Saya ingat bila pertama kali saya jumpa auto-completion – saya rasa macam hidup dalam masa depan. Anda mula taip sesuatu, penyunting anda kata, "Eh, adakah anda fikir tentang fungsi ini yang buat apa yang anda perlukan?" Macam ada pembaca fikiran sebagai rakan pengekodan! -Saya masih ingat ketika pertama kali menemui auto-completion – saya benar-benar merasa seperti hidup di masa depan. Anda mula menaip sesuatu, dan editor anda berkata, "Hei, adakah anda memikirkan fungsi ini yang melakukan apa yang anda perlukan?" Ia seperti mempunyai pembaca fikiran sebagai rakan pengkodan anda! +**Apa yang buat penyunting ini sangat hebat?** -**Apa yang membuatkan editor ini begitu luar biasa?** +Penyunting kod moden menawarkan pelbagai ciri yang mengagumkan direka untuk meningkatkan produktiviti anda: -Editor kod moden menawarkan pelbagai ciri yang mengagumkan yang direka untuk meningkatkan produktiviti anda: +| Ciri | Apa Yang Dilakukan | Kenapa Ia Membantu | +|---------|--------------|--------------| +| **Penyorotan Sintaks** | Warnakan bahagian kod berbeza | Memudahkan baca kod dan kesilapan dikesan | +| **Auto-selesaian** | Cadangkan kod semasa taip | Mempercepat pengekodan dan kurangkan kesilapan taip | +| **Alat Penyahpepijatan** | Bantu cari dan betulkan kesilapan | Jimatkan jam penyelesaian masalah | +| **Sambungan** | Tambah ciri khusus | Sesuaikan penyunting untuk teknologi apa pun | +| **Pembantu AI** | Cadangkan kod dan penerangan | Mempercepat pembelajaran dan produktiviti | -| Ciri | Apa yang Dilakukan | Mengapa Ia Membantu | -|------|---------------------|---------------------| -| **Penyorotan Sintaks** | Mewarnakan bahagian kod yang berbeza | Memudahkan kod dibaca dan kesalahan dikesan | -| **Auto-completion** | Mencadangkan kod semasa anda menaip | Mempercepat pengkodan dan mengurangkan kesalahan ketik | -| **Alat Debugging** | Membantu anda mencari dan membetulkan kesalahan | Menjimatkan masa penyelesaian masalah | -| **Sambungan** | Menambah ciri khusus | Menyesuaikan editor anda untuk sebarang teknologi | -| **Pembantu AI** | Mencadangkan kod dan penjelasan | Mempercepat pembelajaran dan produktiviti | +> πŸŽ₯ **Sumber Video**: Nak tengok alat-alat ini beraksi? Tonton [video Tools of the Trade](https://youtube.com/watch?v=69WJeXGBdxg) untuk gambaran menyeluruh. -> πŸŽ₯ **Sumber Video**: Mahu melihat alat ini beraksi? Lihat [video Alat yang Digunakan](https://youtube.com/watch?v=69WJeXGBdxg) untuk gambaran keseluruhan yang komprehensif. - -#### Editor yang Disyorkan untuk Pembangunan Web +#### Penyunting Disyorkan untuk Pembangunan Web **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Percuma) - Paling popular di kalangan pembangun web -- Ekosistem sambungan yang sangat baik +- Ekosistem sambungan yang cemerlang - Terminal terbina dalam dan integrasi Git -- **Sambungan yang mesti ada**: +- **Sambungan wajib ada**: - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Cadangan kod berkuasa AI - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Kolaborasi masa nyata - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Pemformatan kod automatik - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Menangkap kesalahan ketik dalam kod anda + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Format kod automatik + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Tangkap salah eja dalam kod anda **[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Berbayar, percuma untuk pelajar) -- Alat debugging dan pengujian yang canggih -- Penyelesaian kod pintar +- Alat penyahpepijatan dan ujian lanjutan +- Penyiapan kod pintar - Kawalan versi terbina dalam -**IDE Berasaskan Awan** (Pelbagai harga) +**IDE Berasaskan Awan** (Harga pelbagai) - [GitHub Codespaces](https://github.com/features/codespaces) - VS Code penuh dalam pelayar anda -- [Replit](https://replit.com/) - Hebat untuk belajar dan berkongsi kod -- [StackBlitz](https://stackblitz.com/) - Pembangunan web full-stack segera +- [Replit](https://replit.com/) - Bagus untuk belajar dan berkongsi kod +- [StackBlitz](https://stackblitz.com/) - Pembangunan web penuh serta-merta -> πŸ’‘ **Tip Memulakan**: Mulakan dengan Visual Studio Code – ia percuma, digunakan secara meluas dalam industri, dan mempunyai komuniti besar yang mencipta tutorial dan sambungan yang berguna. +> πŸ’‘ **Tip Memulakan**: Mula dengan Visual Studio Code – ia percuma, digunakan secara meluas dalam industri, dan mempunyai komuniti besar yang menghasilkan tutorial dan sambungan berguna. ### Pelayar Web: Makmal Pembangunan Rahsia Anda -Baiklah, bersiaplah untuk terkejut sepenuhnya! Anda tahu bagaimana anda menggunakan pelayar untuk menatal media sosial dan menonton video? Nah, ternyata mereka telah menyembunyikan makmal rahsia pembangun yang luar biasa ini sepanjang masa, hanya menunggu anda untuk menemukannya! +Baiklah, bersiaplah untuk minda anda benar-benar dikejutkan! Anda tahu bagaimana anda gunakan pelayar untuk tatal media sosial dan tonton video? Sebenarnya mereka menyembunyikan makmal pembangun rahsia yang luar biasa ini sepanjang masa, hanya menunggu anda untuk temui! -Setiap kali anda klik kanan pada halaman web dan memilih "Inspect Element," anda membuka dunia alat pembangun tersembunyi yang sebenarnya lebih kuat daripada beberapa perisian mahal yang pernah saya bayar ratusan dolar untuk. Ia seperti menemui bahawa dapur biasa anda telah menyembunyikan makmal chef profesional di belakang panel rahsia! -Kali pertama seseorang tunjukkan saya DevTools pelayar, saya habiskan masa tiga jam hanya klik sana sini sambil berkata, "TUNGGU, IA BOLEH BUAT ITU JUGA?!" Anda boleh edit mana-mana laman web secara langsung, lihat betapa pantas semuanya dimuatkan, uji bagaimana laman anda kelihatan pada pelbagai peranti, dan bahkan debug JavaScript seperti seorang profesional. Ia benar-benar mengagumkan! +Setiap kali anda klik kanan pada halaman web dan pilih "Inspect Element," anda membuka dunia tersembunyi alat pembangun yang sebenarnya lebih kuat daripada beberapa perisian mahal yang saya pernah bayar ratusan ringgit. Ia seperti menemui bahawa dapur lama anda rupanya menyembunyikan makmal chef profesional di belakang panel rahsia! +Pertama kali seseorang menunjukkan saya DevTools pelayar, saya menghabiskan kira-kira tiga jam hanya klik-keliling dan berkata "TUNGGU, IA BOLEH BUAT ITU JUGA?!" Anda boleh secara literal mengedit mana-mana laman web secara masa nyata, melihat dengan tepat betapa cepatnya segala-galanya dimuatkan, menguji bagaimana rupa tapak anda pada peranti yang berbeza, dan bahkan debug JavaScript seperti seorang profesional total. Ia sungguh menakjubkan! -**Kenapa pelayar adalah senjata rahsia anda:** +**Inilah sebab mengapa pelayar adalah senjata rahsia anda:** -Apabila anda mencipta laman web atau aplikasi web, anda perlu melihat bagaimana ia kelihatan dan berfungsi di dunia sebenar. Pelayar bukan sahaja memaparkan hasil kerja anda tetapi juga memberikan maklum balas terperinci tentang prestasi, kebolehaksesan, dan isu-isu yang berpotensi. +Apabila anda mencipta laman web atau aplikasi web, anda perlu melihat bagaimana rupa dan kelakuannya di dunia sebenar. Pelayar bukan sahaja memaparkan hasil kerja anda tetapi juga memberikan maklum balas terperinci tentang prestasi, aksesibiliti, dan isu-isu yang berpotensi. #### Alat Pembangun Pelayar (DevTools) -Pelayar moden dilengkapi dengan suite pembangunan yang komprehensif: +Pelayar moden termasuk suite pembangunan yang menyeluruh: -| Kategori Alat | Apa yang Dilakukan | Contoh Penggunaan | -|---------------|--------------------|------------------| -| **Element Inspector** | Lihat dan edit HTML/CSS secara langsung | Laraskan gaya untuk melihat hasil segera | -| **Console** | Lihat mesej ralat dan uji JavaScript | Debug masalah dan bereksperimen dengan kod | -| **Network Monitor** | Jejak bagaimana sumber dimuatkan | Optimumkan prestasi dan masa pemuatan | -| **Accessibility Checker** | Uji reka bentuk inklusif | Pastikan laman anda berfungsi untuk semua pengguna | -| **Device Simulator** | Pratonton pada pelbagai saiz skrin | Uji reka bentuk responsif tanpa banyak peranti | +| Kategori Alat | Apa Yang Ia Lakukan | Contoh Kes Penggunaan | +|---------------|--------------------|----------------------| +| **Pemeriksa Elemen** | Lihat dan sunting HTML/CSS secara masa nyata | Laraskan gaya untuk melihat keputusan serta-merta | +| **Konsol** | Lihat mesej ralat dan uji JavaScript | Debug masalah dan cuba kod | +| **Pemantau Rangkaian** | Jejak bagaimana sumber dimuat | Optimumkan prestasi dan masa memuat | +| **Pemeriksa Aksesibiliti** | Uji reka bentuk inklusif | Pastikan tapak anda berfungsi untuk semua pengguna | +| **Simulator Peranti** | Pratonton pada saiz skrin yang berbeza | Uji reka bentuk responsif tanpa perlu banyak peranti | -#### Pelayar yang Disyorkan untuk Pembangunan +#### Pelayar Disyorkan untuk Pembangunan - **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - DevTools standard industri dengan dokumentasi yang luas -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Alat CSS Grid dan kebolehaksesan yang cemerlang -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Dibina atas Chromium dengan sumber pembangunan Microsoft +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Alat hebat untuk CSS Grid dan aksesibiliti +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Dibina atas Chromium dengan sumber pembangun Microsoft + +> ⚠️ **Petua Ujian Penting**: Sentiasa uji laman web anda dalam pelbagai pelayar! Apa yang berfungsi dengan sempurna di Chrome mungkin kelihatan berbeza di Safari atau Firefox. Pembangun profesional menguji merentas semua pelayar utama untuk memastikan pengalaman pengguna yang konsisten. -> ⚠️ **Tip Penting untuk Ujian**: Sentiasa uji laman web anda dalam pelbagai pelayar! Apa yang berfungsi dengan sempurna dalam Chrome mungkin kelihatan berbeza dalam Safari atau Firefox. Pembangun profesional menguji di semua pelayar utama untuk memastikan pengalaman pengguna yang konsisten. -### Alat Baris Perintah: Gerbang Anda ke Kuasa Pembangun +### Alat Baris Perintah: Pintu Masuk Anda Kepada Kuasa Super Pembangun -Baiklah, mari kita jujur tentang baris perintah, kerana saya mahu anda dengar ini daripada seseorang yang benar-benar faham. Kali pertama saya melihatnya – hanya skrin hitam yang menakutkan dengan teks berkelip – saya benar-benar fikir, "Tidak, tidak sama sekali! Ini kelihatan seperti sesuatu dari filem penggodam tahun 1980-an, dan saya pasti tidak cukup bijak untuk ini!" πŸ˜… +Baiklah, mari kita jujur di sini tentang baris perintah, kerana saya mahu anda dengar ini dari seseorang yang benar-benar faham. Apabila saya pertama kali melihatnya – hanya skrin hitam menakutkan dengan teks berkedip – saya secara literal fikir, "Tidak, langsung tidak! Ini nampak macam dari filem penggodam 1980-an, dan saya memang tidak cukup bijak untuk ini!" πŸ˜… -Tetapi inilah yang saya harap seseorang beritahu saya dahulu, dan apa yang saya beritahu anda sekarang: baris perintah tidak menakutkan – ia sebenarnya seperti berbual secara langsung dengan komputer anda. Fikirkan ia seperti perbezaan antara memesan makanan melalui aplikasi mewah dengan gambar dan menu (yang mudah dan senang) berbanding masuk ke restoran tempatan kegemaran anda di mana chef tahu apa yang anda suka dan boleh menyediakan sesuatu yang sempurna hanya dengan anda berkata "kejutan saya dengan sesuatu yang hebat." +Tetapi inilah yang saya harap seseorang beritahu saya dulu, dan yang saya beritahu anda sekarang: baris perintah tidak menakutkan – ia sebenarnya seperti berbual secara langsung dengan komputer anda. Fikirkan ia seperti perbezaan antara memesan makanan melalui aplikasi mewah dengan gambar dan menu (yang mudah dan senang) berbanding berjalan masuk ke restoran tempatan kegemaran anda di mana cef tahu dengan tepat apa yang anda suka dan boleh menghidangkan sesuatu yang sempurna hanya dengan anda berkata "kejutan saya dengan sesuatu yang hebat." -Baris perintah adalah tempat pembangun pergi untuk merasa seperti ahli sihir sebenar. Anda taip beberapa perkataan yang kelihatan ajaib (baiklah, mereka hanya arahan, tetapi mereka terasa ajaib!), tekan enter, dan BOOM – anda telah mencipta struktur projek keseluruhan, memasang alat yang hebat dari seluruh dunia, atau melancarkan aplikasi anda ke internet untuk dilihat oleh jutaan orang. Setelah anda merasai kuasa itu, ia benar-benar ketagihan! +Baris perintah adalah tempat pembangun merasa seperti ahli sihir sebenar. Anda taip beberapa perkataan yang kelihatan ajaib (baiklah, ia cuma arahan, tetapi ia terasa ajaib!), tekan enter, dan BOOM – anda telah mencipta struktur projek keseluruhan, memasang alat berkuasa dari seluruh dunia, atau melancarkan aplikasi anda ke internet untuk berjuta-juta orang lihat. Setelah anda merasai kuasa itu buat kali pertama, secara jujur sangat ketagihan! **Kenapa baris perintah akan menjadi alat kegemaran anda:** -Walaupun antara muka grafik hebat untuk banyak tugas, baris perintah cemerlang dalam automasi, ketepatan, dan kelajuan. Banyak alat pembangunan berfungsi terutamanya melalui antara muka baris perintah, dan belajar menggunakannya dengan cekap boleh meningkatkan produktiviti anda secara dramatik. +Walaupun antara muka grafik bagus untuk banyak tugas, baris perintah unggul dalam automasi, ketepatan, dan kelajuan. Banyak alat pembangunan berfungsi terutamanya melalui antara muka baris perintah, dan mempelajari cara menggunakannya dengan cekap boleh meningkat produktiviti anda secara mendadak. ```bash -# Step 1: Create and navigate to project directory +# Langkah 1: Cipta dan navigasi ke direktori projek mkdir my-awesome-website cd my-awesome-website ``` -**Apa yang kod ini lakukan:** +**Ini yang kod ini lakukan:** - **Cipta** direktori baru bernama "my-awesome-website" untuk projek anda - **Navigasi** ke dalam direktori yang baru dicipta untuk mula bekerja ```bash -# Step 2: Initialize project with package.json +# Langkah 2: Inisialisasi projek dengan package.json npm init -y -# Install modern development tools +# Pasang alat pembangunan moden npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Langkah demi langkah, inilah yang berlaku:** +**Langkah demi langkah, ini yang berlaku:** - **Inisialisasi** projek Node.js baru dengan tetapan lalai menggunakan `npm init -y` -- **Pasang** Vite sebagai alat binaan moden untuk pembangunan dan binaan produksi yang pantas +- **Pasang** Vite sebagai alat bina moden untuk pembangunan dan binaan produksi cepat - **Tambah** Prettier untuk pemformatan kod automatik dan ESLint untuk pemeriksaan kualiti kod -- **Gunakan** flag `--save-dev` untuk menandakan ini sebagai kebergantungan pembangunan sahaja +- **Gunakan** bendera `--save-dev` untuk menandakan ini sebagai kebergantungan khusus pembangunan ```bash -# Step 3: Create project structure and files +# Langkah 3: Cipta struktur projek dan fail mkdir src assets echo 'My Site

Hello World

' > index.html -# Start development server +# Mulakan server pembangunan npx vite ``` -**Dalam kod di atas, kami telah:** +**Dalam di atas, kami telah:** - **Susun** projek kami dengan mencipta folder berasingan untuk kod sumber dan aset -- **Hasilkan** fail HTML asas dengan struktur dokumen yang betul -- **Mulakan** pelayan pembangunan Vite untuk pemuatan semula langsung dan penggantian modul panas +- **Jana** fail HTML asas dengan struktur dokumen yang betul +- **Mulakan** pelayan pembangunan Vite untuk pengecasan semula langsung dan penggantian modul panas #### Alat Baris Perintah Penting untuk Pembangunan Web -| Alat | Tujuan | Kenapa Anda Perlukan | -|------|--------|-----------------------| +| Alat | Tujuan | Kenapa Anda Perlu Ia | +|------|--------|---------------------| | **[Git](https://git-scm.com/)** | Kawalan versi | Jejak perubahan, bekerjasama dengan orang lain, sandarkan kerja anda | | **[Node.js & npm](https://nodejs.org/)** | Runtime JavaScript & pengurusan pakej | Jalankan JavaScript di luar pelayar, pasang alat pembangunan moden | -| **[Vite](https://vitejs.dev/)** | Alat binaan & pelayan pembangunan | Pembangunan pantas dengan penggantian modul panas | -| **[ESLint](https://eslint.org/)** | Kualiti kod | Cari dan baiki masalah dalam JavaScript anda secara automatik | -| **[Prettier](https://prettier.io/)** | Pemformatan kod | Pastikan kod anda diformat secara konsisten dan mudah dibaca | +| **[Vite](https://vitejs.dev/)** | Alat bina & pelayan pembangunan | Pembangunan pantas dengan penggantian modul panas | +| **[ESLint](https://eslint.org/)** | Kualiti kod | Cari dan betulkan masalah dalam JavaScript anda secara automatik | +| **[Prettier](https://prettier.io/)** | Pemformatan kod | Kekalkan kod anda sentiasa format dan mudah dibaca | -#### Pilihan Khusus Platform +#### Pilihan Spesifik Platform **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Terminal moden yang kaya dengan ciri +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Terminal moden, kaya ciri - **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** πŸ’» - Persekitaran skrip yang berkuasa -- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** πŸ’» - Baris perintah tradisional Windows +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** πŸ’» - Baris perintah Windows tradisional **macOS:** - **[Terminal](https://support.apple.com/guide/terminal/)** πŸ’» - Aplikasi terminal terbina dalam -- **[iTerm2](https://iterm2.com/)** - Terminal yang dipertingkatkan dengan ciri-ciri maju +- **[iTerm2](https://iterm2.com/)** - Terminal dipertingkat dengan ciri lanjutan **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** πŸ’» - Shell standard Linux -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Emulator terminal yang maju +- **[Bash](https://www.gnu.org/software/bash/)** πŸ’» - Shell Linux standard +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Emulator terminal canggih + +> πŸ’» = Terpasang secara lalai dalam sistem operasi -> πŸ’» = Pra-pasang pada sistem operasi +> 🎯 **Jalur Pembelajaran**: Mula dengan arahan asas seperti `cd` (tukar direktori), `ls` atau `dir` (senaraikan fail), dan `mkdir` (cipta folder). Amalkan dengan arahan aliran kerja moden seperti `npm install`, `git status`, dan `code .` (buka direktori semasa dalam VS Code). Apabila anda semakin selesa, anda akan secara semula jadi mempelajari arahan lebih maju dan teknik automasi. -> 🎯 **Laluan Pembelajaran**: Mulakan dengan arahan asas seperti `cd` (tukar direktori), `ls` atau `dir` (senarai fail), dan `mkdir` (cipta folder). Berlatih dengan arahan aliran kerja moden seperti `npm install`, `git status`, dan `code .` (buka direktori semasa dalam VS Code). Apabila anda semakin selesa, anda akan secara semula jadi mempelajari arahan yang lebih maju dan teknik automasi. -### Dokumentasi: Mentor Pembelajaran Anda yang Sentiasa Ada +### Dokumentasi: Mentor Pembelajaran Anda Yang Sentiasa Ada -Baiklah, saya ingin berkongsi satu rahsia kecil yang akan membuatkan anda berasa lebih baik sebagai seorang pemula: walaupun pembangun yang paling berpengalaman menghabiskan sebahagian besar masa mereka membaca dokumentasi. Dan itu bukan kerana mereka tidak tahu apa yang mereka lakukan – ia sebenarnya tanda kebijaksanaan! +Baiklah, saya nak kongsi rahsia kecil yang akan buat anda rasa lebih baik tentang menjadi seorang pemula: malah pembangun yang paling berpengalaman menghabiskan sebahagian besar masa mereka membaca dokumentasi. Dan itu bukan kerana mereka tidak tahu apa yang mereka buat – sebenarnya itu tanda kebijaksanaan! -Fikirkan dokumentasi sebagai mempunyai akses kepada guru yang paling sabar dan berpengetahuan di dunia yang tersedia 24/7. Terperangkap dengan masalah pada pukul 2 pagi? Dokumentasi ada dengan pelukan maya yang hangat dan jawapan yang tepat yang anda perlukan. Mahu belajar tentang beberapa ciri baru yang menarik yang semua orang bicarakan? Dokumentasi menyokong anda dengan contoh langkah demi langkah. Cuba memahami mengapa sesuatu berfungsi seperti itu? Anda tahu – dokumentasi sedia untuk menerangkannya dengan cara yang akhirnya membuatkan anda faham! +Fikirkan dokumentasi sebagai akses kepada guru paling penyabar dan berpengetahuan di dunia yang sentiasa tersedia 24/7. Terperangkap dengan masalah jam 2 pagi? Dokumentasi ada dengan pelukan maya hangat dan jawapan tepat yang anda perlukan. Nak belajar tentang ciri baru yang semua orang bercakap? Dokumentasi sentiasa membantu dengan contoh langkah demi langkah. Cuba faham kenapa sesuatu berfungsi seperti itu? Anda dah teka – dokumentasi bersedia menerangkannya dengan cara yang akhirnya buat anda faham! -Inilah sesuatu yang benar-benar mengubah perspektif saya: dunia pembangunan web bergerak dengan sangat pantas, dan tiada siapa (saya maksudkan benar-benar tiada siapa!) menghafal semuanya. Saya pernah melihat pembangun senior dengan pengalaman lebih dari 15 tahun mencari sintaks asas, dan anda tahu apa? Itu bukan memalukan – itu bijak! Ia bukan tentang mempunyai ingatan yang sempurna; ia tentang mengetahui di mana untuk mencari jawapan yang boleh dipercayai dengan cepat dan memahami bagaimana untuk menggunakannya. +Ini sesuatu yang benar-benar mengubah perspektif saya: dunia pembangunan web bergerak sangat pantas, dan tiada siapa (saya maksudkan langsung tiada!) yang menghafal semua perkara. Saya lihat pembangun senior dengan pengalaman lebih 15 tahun mencari semula sintaks asas, dan anda tahu apa? Itu bukan memalukan – itu pintar! Ia bukan tentang ingatan yang sempurna; ia tentang tahu di mana untuk cari jawapan boleh dipercayai dengan cepat dan faham cara nak guna. -**Di sinilah keajaiban sebenar berlaku:** +**Inilah tempat magik sebenar berlaku:** -Pembangun profesional menghabiskan sebahagian besar masa mereka membaca dokumentasi – bukan kerana mereka tidak tahu apa yang mereka lakukan, tetapi kerana landskap pembangunan web berkembang dengan begitu pesat sehingga untuk kekal terkini memerlukan pembelajaran berterusan. Dokumentasi yang hebat membantu anda memahami bukan sahaja *bagaimana* menggunakan sesuatu, tetapi juga *kenapa* dan *bila* menggunakannya. +Pembangun profesional menghabiskan sebahagian besar masa mereka membaca dokumentasi – bukan sebab mereka tidak tahu apa yang mereka buat, tetapi kerana lanskap pembangunan web berkembang begitu pantas sehingga untuk kekal terkini memerlukan pembelajaran berterusan. Dokumentasi yang baik membantu anda faham bukan sahaja *bagaimana* menggunakan sesuatu, tetapi *kenapa* dan *bila* nak gunakannya. #### Sumber Dokumentasi Penting @@ -685,174 +683,174 @@ Pembangun profesional menghabiskan sebahagian besar masa mereka membaca dokument - Standard emas untuk dokumentasi teknologi web - Panduan komprehensif untuk HTML, CSS, dan JavaScript - Termasuk maklumat keserasian pelayar -- Menampilkan contoh praktikal dan demo interaktif +- Mempunyai contoh praktikal dan demo interaktif **[Web.dev](https://web.dev)** (oleh Google) - Amalan terbaik pembangunan web moden - Panduan pengoptimuman prestasi -- Prinsip reka bentuk inklusif dan kebolehaksesan +- Prinsip aksesibiliti dan reka bentuk inklusif - Kajian kes dari projek dunia sebenar **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** - Sumber pembangunan pelayar Edge - Panduan Progressive Web App -- Wawasan pembangunan merentas platform +- Wawasan pembangunan lintas platform **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Kurikulum pembelajaran yang terstruktur +- Kurikulum pembelajaran terstruktur - Kursus video dari pakar industri -- Latihan pengekodan secara langsung +- Latihan pengkodan praktikal -> πŸ“š **Strategi Belajar**: Jangan cuba menghafal dokumentasi – sebaliknya, belajar bagaimana untuk menavigasinya dengan cekap. Tandakan rujukan yang sering digunakan dan berlatih menggunakan fungsi carian untuk mencari maklumat tertentu dengan cepat. +> πŸ“š **Strategi Belajar**: Jangan cuba menghafal dokumentasi – sebaliknya, pelajari cara melayarinya dengan cekap. Tandai rujukan yang kerap digunakan dan amalkan menggunakan fungsi carian untuk mencari maklumat spesifik dengan cepat. -### πŸ”§ **Semakan Penguasaan Alat: Apa yang Menarik Minat Anda?** +### πŸ”§ **Semak Kemahiran Alat: Apa Yang Resonates Dengan Anda?** -**Luangkan masa untuk mempertimbangkan:** -- Alat mana yang paling anda teruja untuk cuba dahulu? (Tiada jawapan yang salah!) -- Adakah baris perintah masih terasa menakutkan, atau anda mula ingin tahu tentangnya? -- Bolehkah anda bayangkan menggunakan DevTools pelayar untuk mengintip di sebalik tabir laman web kegemaran anda? +**Luangkan masa untuk fikirkan:** +- Alat mana yang paling anda teruja untuk cuba dahulu? (Tiada jawapan salah!) +- Adakah baris perintah masih rasa menakutkan, atau anda jadi ingin tahu tentangnya? +- Bolehkah anda bayangkan menggunakan DevTools pelayar untuk mengintip di sebalik tirai laman web kegemaran anda? ```mermaid -pie title "Developer Time Spent With Tools" - "Code Editor" : 40 - "Browser Testing" : 25 - "Command Line" : 15 - "Reading Docs" : 15 - "Debugging" : 5 +pie title "Masa Pembangun Dihabiskan Dengan Alat" + "Penyunting Kod" : 40 + "Ujian Pelayar" : 25 + "Baris Perintah" : 15 + "Membaca Dokumen" : 15 + "Mengesan Ralat" : 5 ``` +> **Info menarik**: Kebanyakan pembangun menghabiskan kira-kira 40% masa mereka dalam editor kod mereka, tapi perhatikan berapa banyak masa yang digunakan untuk ujian, pembelajaran, dan penyelesaian masalah. Pengaturcaraan bukan hanya menulis kod – ia tentang mereka pengalaman! -> **Pandangan menarik**: Kebanyakan pembangun menghabiskan kira-kira 40% masa mereka dalam editor kod mereka, tetapi perhatikan berapa banyak masa yang digunakan untuk ujian, pembelajaran, dan penyelesaian masalah. Pengaturcaraan bukan hanya tentang menulis kod – ia tentang mencipta pengalaman! - -βœ… **Makanan untuk difikirkan**: Inilah sesuatu yang menarik untuk direnungkan – bagaimana anda fikir alat untuk membina laman web (pembangunan) mungkin berbeza daripada alat untuk mereka bentuk bagaimana ia kelihatan (reka bentuk)? Ia seperti perbezaan antara menjadi arkitek yang mereka bentuk rumah yang indah dan kontraktor yang sebenarnya membinanya. Kedua-duanya penting, tetapi mereka memerlukan kotak alat yang berbeza! Pemikiran seperti ini benar-benar akan membantu anda melihat gambaran besar bagaimana laman web dihidupkan. +βœ… **Makanan untuk difikirkan**: Ini sesuatu yang menarik untuk direnungkan – bagaimana anda fikir alat untuk membina laman web (pembangunan) mungkin berbeza dari alat untuk mereka bagaimana ia nampak (reka bentuk)? Ia seperti perbezaan antara seorang arkitek yang mereka rumah cantik dan kontraktor yang sebenarnya membinanya. Kedua-duanya penting, tapi mereka perlukan kotak alat yang berbeza! Cara berfikir ini akan sangat membantu anda melihat gambaran besar bagaimana laman web menjadi hidup. ## Cabaran Ejen GitHub Copilot πŸš€ -Gunakan mod Ejen untuk menyelesaikan cabaran berikut: +Gunakan mod Ejen untuk melengkapkan cabaran berikut: -**Deskripsi:** Terokai ciri-ciri editor kod moden atau IDE dan tunjukkan bagaimana ia boleh meningkatkan aliran kerja anda sebagai pembangun web. +**Deskripsi:** Terokai ciri-ciri editor kod moden atau IDE dan tunjukkan bagaimana ia boleh memperbaiki aliran kerja anda sebagai pembangun web. -**Arahan:** Pilih editor kod atau IDE (seperti Visual Studio Code, WebStorm, atau IDE berasaskan awan). Senaraikan tiga ciri atau sambungan yang membantu anda menulis, debug, atau menyelenggara kod dengan lebih cekap. Untuk setiap satu, berikan penjelasan ringkas tentang bagaimana ia memberi manfaat kepada aliran kerja anda. +**Arahan:** Pilih editor kod atau IDE (seperti Visual Studio Code, WebStorm, atau IDE berasaskan awan). Senaraikan tiga ciri atau sambungan yang membantu anda menulis, debug, atau menyelenggara kod dengan lebih cekap. Untuk setiap satu, berikan penjelasan ringkas bagaimana ia menguntungkan aliran kerja anda. --- ## πŸš€ Cabaran -**Baiklah, detektif, bersedia untuk kes pertama anda?** +**Baiklah, detektif, sedia untuk kes pertama anda?** -Sekarang setelah anda mempunyai asas yang hebat ini, saya ada satu pengembaraan yang akan membantu anda melihat betapa pelbagai dan menariknya dunia pengaturcaraan. Dan dengar – ini bukan tentang menulis kod lagi, jadi tiada tekanan di situ! Anggap diri anda sebagai detektif bahasa pengaturcaraan dalam kes pertama yang menarik! +Kini anda sudah mempunyai asas hebat ini, saya ada pengembaraan yang akan membantu anda lihat betapa pelbagai dan menariknya dunia pengaturcaraan sebenarnya. Dan dengar – ini bukan tentang menulis kod lagi, jadi jangan risau! Anggap diri anda sebagai detektif bahasa pengaturcaraan dalam kes pertama yang sangat menarik! -**Misi anda, jika anda memilih untuk menerimanya:** -1. **Jadi penjelajah bahasa**: Pilih tiga bahasa pengaturcaraan dari alam semesta yang berbeza – mungkin satu yang membina laman web, satu yang mencipta aplikasi mudah alih, dan satu yang menganalisis data untuk saintis. Cari contoh tugas mudah yang sama ditulis dalam setiap bahasa. Saya janji anda akan kagum melihat betapa berbezanya mereka walaupun melakukan perkara yang sama! +**Misi anda, jika anda setuju menerimanya:** +1. **Jadilah peneroka bahasa**: Pilih tiga bahasa pengaturcaraan dari alam berbeza sama sekali – mungkin satu yang bina laman web, satu yang cipta aplikasi mudah alih, dan satu yang mengira data untuk saintis. Cari contoh tugasan sama yang ditulis dalam setiap bahasa. Saya janji anda akan sangat kagum bagaimana berbeza rupa mereka walaupun buat perkara tepat sama! -2. **Selidik asal usul mereka**: Apa yang membuatkan setiap bahasa istimewa? Inilah fakta menarik – setiap bahasa pengaturcaraan dicipta kerana seseorang berfikir, "Anda tahu apa? Pasti ada cara yang lebih baik untuk menyelesaikan masalah ini." Bolehkah anda cari apa masalah itu? Beberapa cerita ini benar-benar menarik! +2. **Dedahkan cerita asal usul mereka**: Apa yang buat setiap bahasa istimewa? Ini fakta menarik – setiap bahasa pengaturcaraan dicipta kerana ada orang fikir, "Tahu tak? Pasti ada cara yang lebih baik untuk selesaikan masalah tertentu ini." Bolehkah anda cari apa masalah itu? Sesetengah cerita ini memang sangat menarik! -3. **Kenali komuniti mereka**: Lihat bagaimana mesra dan bersemangat setiap komuniti bahasa. Ada yang mempunyai jutaan pembangun yang berkongsi pengetahuan dan saling membantu, ada yang lebih kecil tetapi sangat erat dan menyokong. Anda pasti akan suka melihat keperibadian berbeza yang dimiliki oleh komuniti ini! +3. **Kenali komuniti mereka**: Lihat betapa mesra dan bersemangat komuniti setiap bahasa. Ada yang mempunyai berjuta pembangun berkongsi ilmu dan saling membantu, ada yang lebih kecil tapi sangat rapat dan menyokong. Anda pasti suka lihat personaliti berbeza setiap komuniti! -4. **Ikut gerak hati anda**: Bahasa mana yang paling mudah didekati untuk anda sekarang? Jangan stres tentang membuat pilihan "sempurna" – hanya dengar naluri anda! Tiada jawapan yang salah di sini, dan anda sentiasa boleh meneroka yang lain kemudian. +4. **Ikut gerak hati anda**: Bahasa mana yang rasa paling mesra untuk anda sekarang? Jangan stres nak buat pilihan "sempurna" – ikut sahaja naluri! Tiada jawapan salah di sini, dan anda boleh selidik yang lain kemudian. -**Kerja detektif bonus**: Lihat jika anda boleh mengetahui laman web atau aplikasi utama yang dibina dengan setiap bahasa. Saya jamin anda akan terkejut mengetahui apa yang menggerakkan Instagram, Netflix, atau permainan mudah alih yang tidak boleh anda berhenti mainkan! +**Kerja detektif tambahan**: Cuba cari laman web atau aplikasi utama yang dibina dengan setiap bahasa. Saya jamin anda akan terkejut belajar apa yang memacu Instagram, Netflix, atau permainan mudah alih yang anda tak boleh berhenti main tu! -> πŸ’‘ **Ingat**: Anda tidak cuba menjadi pakar dalam mana-mana bahasa ini hari ini. Anda hanya mengenali kawasan itu sebelum anda memutuskan di mana anda mahu menetap. Luangkan masa anda, berseronoklah dengannya, dan biarkan rasa ingin tahu anda memandu anda! +> πŸ’‘ **Ingat**: Anda tidak cuba jadi pakar dalam mana-mana bahasa hari ini. Anda cuma nak kenal kawasan sekitar sebelum buat keputusan nak mulakan di mana. Ambil masa, berseronok, dan biar keingintahuan memandu anda! -## Mari Raikan Apa yang Anda Temui! +## Mari Raikan Apa Yang Anda Telah Temui! -Wah, anda telah menyerap begitu banyak maklumat yang luar biasa hari ini! Saya benar-benar teruja untuk melihat berapa banyak perjalanan hebat ini yang melekat dengan anda. Dan ingat – ini bukan ujian di mana anda perlu mendapatkan semuanya dengan sempurna. Ini lebih seperti perayaan semua perkara hebat yang telah anda pelajari tentang dunia yang menarik ini yang akan anda terokai! +Wah, anda telah menyerap begitu banyak maklumat hebat hari ini! Saya sungguh teruja nak lihat berapa banyak daripada perjalanan menakjubkan ini yang melekat dalam fikiran anda. Dan ingat – ini bukan ujian di mana anda perlu sempurna semuanya. Ini lebih kepada sambutan semua perkara hebat yang anda telah pelajari tentang dunia menarik yang bakal anda ceburi ini! [Ambil kuiz selepas pelajaran](https://ff-quizzes.netlify.app/web/) -## Kajian & Pembelajaran Sendiri -**Luangkan masa untuk meneroka dan berseronok dengannya!** +## Ulasan & Belajar Sendiri -Anda telah belajar banyak hari ini, dan itu sesuatu yang patut dibanggakan! Sekarang tiba bahagian yang menyeronokkan – meneroka topik yang menarik minat anda. Ingat, ini bukan kerja rumah – ini adalah satu pengembaraan! +**Ambil masa anda untuk menjelajah dan berseronokwith it!** +Anda telah menempuh banyak perkara hari ini, dan itu sesuatu yang patut dibanggakan! Kini tiba bahagian yang menyeronokkan – meneroka topik yang mencetuskan rasa ingin tahu anda. Ingat, ini bukan kerja rumah – ini adalah pengembaraan! -**Selami lebih dalam apa yang menarik minat anda:** +**Selami lebih dalam apa yang menggembirakan anda:** -**Cuba sendiri dengan bahasa pengaturcaraan:** -- Lawati laman web rasmi 2-3 bahasa yang menarik perhatian anda. Setiap satu mempunyai keunikan dan ceritanya sendiri! -- Cuba beberapa platform kod dalam talian seperti [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), atau [Replit](https://replit.com/). Jangan takut untuk mencuba – anda tidak akan merosakkan apa-apa! -- Baca tentang bagaimana bahasa kegemaran anda dicipta. Serius, beberapa cerita asal ini sangat menarik dan akan membantu anda memahami mengapa bahasa berfungsi seperti yang mereka lakukan. +**Berinteraksi dengan bahasa pengaturcaraan:** +- Lawati laman web rasmi 2-3 bahasa yang menarik perhatian anda. Setiap satu mempunyai personaliti dan cerita tersendiri! +- Cuba beberapa padang permainan pengaturcaraan dalam talian seperti [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), atau [Replit](https://replit.com/). Jangan takut untuk bereksperimen – anda tidak akan memecahkan apa-apa! +- Baca tentang bagaimana bahasa kegemaran anda tercipta. Serius, sesetengah cerita asal ini sangat menarik dan akan membantu anda memahami mengapa bahasa berfungsi seperti yang mereka lakukan. **Biasakan diri dengan alat baru anda:** - Muat turun Visual Studio Code jika anda belum melakukannya – ia percuma dan anda pasti akan menyukainya! -- Luangkan beberapa minit melayari pasaran Extensions. Ia seperti kedai aplikasi untuk editor kod anda! -- Buka Alat Pembangun di pelayar anda dan klik sekitar. Jangan risau tentang memahami semuanya – hanya biasakan diri dengan apa yang ada. +- Luangkan beberapa minit melayari pasaran Extensions. Ia seperti kedai aplikasi untuk penyunting kod anda! +- Buka Alat Pembangun penyemak imbas anda dan klik sahaja sekeliling. Jangan risau jika anda tidak memahami semuanya – biasakan diri dengan apa yang ada di sana. -**Sertai komuniti:** +**Bergabung dengan komuniti:** - Ikuti beberapa komuniti pembangun di [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), atau [GitHub](https://github.com/). Komuniti pengaturcaraan sangat mesra kepada pendatang baru! -- Tonton beberapa video pengaturcaraan mesra pemula di YouTube. Terdapat begitu banyak pencipta hebat di luar sana yang ingat bagaimana rasanya baru bermula. -- Pertimbangkan untuk menyertai pertemuan tempatan atau komuniti dalam talian. Percayalah, pembangun suka membantu pendatang baru! +- Tonton beberapa video pengaturcaraan mesra pemula di YouTube. Terdapat banyak pencipta hebat di luar sana yang masih mengingati bagaimana rasanya mula belajar. +- Pertimbangkan untuk menyertai perjumpaan tempatan atau komuniti dalam talian. Percayalah, pembangun suka membantu pendatang baru! -> 🎯 **Dengar, ini yang saya mahu anda ingat**: Anda tidak dijangka menjadi pakar pengaturcaraan dalam sekelip mata! Sekarang, anda hanya mula mengenali dunia baru yang menakjubkan ini yang akan anda sertai. Luangkan masa anda, nikmati perjalanan ini, dan ingat – setiap pembangun yang anda kagumi pernah berada di tempat yang sama seperti anda sekarang, merasa teruja dan mungkin sedikit keliru. Itu sangat normal, dan itu bermakna anda sedang melakukannya dengan betul! +> 🎯 **Dengar, ini yang saya mahu anda ingat**: Anda tidak dijangka menjadi ahli sihir pengaturcaraan dalam semalam! Sekarang, anda hanya sedang mengenali dunia baru yang menakjubkan yang akan anda sertai. Ambil masa anda, nikmati perjalanan ini, dan ingat – setiap pembangun yang anda kagumi suatu masa dahulu duduk di tempat yang sama seperti anda sekarang, berasa teruja dan mungkin sedikit terbeban. Itu adalah normal, dan itu bermakna anda sedang melakukan dengan betul! ## Tugasan -[Reading the Docs](assignment.md) +[Membaca Dokumen](assignment.md) -> πŸ’‘ **Sedikit dorongan untuk tugasan anda**: Saya sangat ingin melihat anda meneroka beberapa alat yang belum kita bincangkan! Abaikan editor, pelayar, dan alat baris perintah yang telah kita bincangkan – terdapat seluruh alam semesta alat pembangunan yang luar biasa di luar sana yang menunggu untuk diterokai. Cari yang aktif dikemas kini dan mempunyai komuniti yang meriah dan membantu (ini biasanya mempunyai tutorial terbaik dan orang yang paling menyokong apabila anda menghadapi masalah dan memerlukan bantuan mesra). +> πŸ’‘ **Sedikit dorongan untuk tugasan anda**: Saya sangat ingin melihat anda meneroka beberapa alat yang belum kita bincangkan! Langkau penyunting, penyemak imbas, dan alat baris arahan yang telah kita bincangkan – ada sebuah alam yang sangat hebat dengan alat pembangunan yang menunggu untuk diterokai. Cari yang sentiasa dikemaskini dan mempunyai komuniti yang aktif dan membantu (mereka biasanya ada tutorial terbaik dan orang paling sokong apabila anda menghadapi masalah dan memerlukan bantuan mesra). --- ## πŸš€ Garis Masa Perjalanan Pengaturcaraan Anda -### ⚑ **Apa Yang Boleh Anda Lakukan Dalam 5 Minit Seterusnya** -- [ ] Tandakan laman web 2-3 bahasa pengaturcaraan yang menarik perhatian anda +### ⚑ **Apa Yang Boleh Anda Lakukan Dalam 5 Minit Akan Datang** +- [ ] Tandakan 2-3 laman web bahasa pengaturcaraan yang menarik perhatian anda - [ ] Muat turun Visual Studio Code jika anda belum melakukannya -- [ ] Buka DevTools pelayar anda (F12) dan klik sekitar mana-mana laman web +- [ ] Buka DevTools penyemak imbas anda (F12) dan klik sekeliling mana-mana laman web - [ ] Sertai satu komuniti pengaturcaraan (Dev.to, Reddit r/webdev, atau Stack Overflow) -### ⏰ **Apa Yang Boleh Anda Capai Dalam Satu Jam** +### ⏰ **Apa Yang Boleh Anda Capai Dalam Jam Ini** - [ ] Lengkapkan kuiz selepas pelajaran dan renungkan jawapan anda -- [ ] Pasang VS Code dengan sambungan GitHub Copilot -- [ ] Cuba contoh "Hello World" dalam 2 bahasa pengaturcaraan secara dalam talian -- [ ] Tonton video "Sehari dalam Kehidupan Seorang Pembangun" di YouTube -- [ ] Mulakan penyelidikan detektif bahasa pengaturcaraan anda (daripada cabaran) +- [ ] Pasang sambungan GitHub Copilot dalam VS Code +- [ ] Cuba contoh "Hello World" dalam 2 bahasa pengaturcaraan berbeza secara dalam talian +- [ ] Tonton video "Sehari Dalam Kehidupan Seorang Pembangun" di YouTube +- [ ] Mulakan kerja penyiasatan bahasa pengaturcaraan anda (daripada cabaran) -### πŸ“… **Pengembaraan Sepanjang Minggu Anda** -- [ ] Lengkapkan tugasan dan terokai 3 alat pembangunan baru +### πŸ“… **Pengembaraan Anda Sepanjang Minggu** +- [ ] Lengkapkan tugasan dan teroka 3 alat pembangunan baru - [ ] Ikuti 5 pembangun atau akaun pengaturcaraan di media sosial - [ ] Cuba bina sesuatu yang kecil di CodePen atau Replit (walaupun hanya "Hello, [Nama Anda]!") -- [ ] Baca satu pos blog pembangun tentang perjalanan pengaturcaraan seseorang -- [ ] Sertai pertemuan maya atau tonton ceramah pengaturcaraan -- [ ] Mulakan pembelajaran bahasa pilihan anda dengan tutorial dalam talian - -### πŸ—“οΈ **Transformasi Sepanjang Bulan Anda** -- [ ] Bina projek kecil pertama anda (walaupun laman web mudah dikira!) -- [ ] Sumbang kepada projek sumber terbuka (mulakan dengan pembaikan dokumentasi) -- [ ] Mentor seseorang yang baru memulakan perjalanan pengaturcaraan mereka +- [ ] Baca satu catatan blog pembangun tentang perjalanan pengaturcaraan seseorang +- [ ] Sertai perjumpaan maya atau tonton ceramah pengaturcaraan +- [ ] Mula belajar bahasa pilihan anda dengan tutorial dalam talian + +### πŸ—“οΈ **Transformasi Anda Sepanjang Sebulan** +- [ ] Bina projek kecil pertama anda (walaupun sekadar halaman web mudah!) +- [ ] Sumbang kepada projek sumber terbuka (mula dengan pembaikan dokumentasi) +- [ ] Bimbing seseorang yang baru bermula perjalanan pengaturcaraan mereka - [ ] Cipta laman web portfolio pembangun anda -- [ ] Berhubung dengan komuniti pembangun tempatan atau kumpulan belajar -- [ ] Mulakan perancangan untuk pencapaian pembelajaran seterusnya +- [ ] Sambungkan dengan komuniti pembangun tempatan atau kumpulan belajar +- [ ] Mulakan perancangan penanda aras pembelajaran seterusnya ### 🎯 **Pemeriksaan Refleksi Akhir** **Sebelum anda teruskan, luangkan masa untuk meraikan:** - Apa satu perkara tentang pengaturcaraan yang membuat anda teruja hari ini? -- Alat atau konsep mana yang ingin anda terokai dahulu? -- Bagaimana perasaan anda tentang memulakan perjalanan pengaturcaraan ini? -- Apa satu soalan yang ingin anda tanyakan kepada seorang pembangun sekarang? +- Alat atau konsep mana yang anda ingin terokai dahulu? +- Bagaimana perasaan anda mengenai permulaan perjalanan pengaturcaraan ini? +- Apa satu soalan yang anda ingin tanya kepada pembangun sekarang? ```mermaid journey - title Your Confidence Building Journey - section Today + title Perjalanan Membina Keyakinan Anda + section Hari Ini Curious: 3: You Overwhelmed: 4: You Excited: 5: You - section This Week + section Minggu Ini Exploring: 4: You Learning: 5: You Connecting: 4: You - section Next Month + section Bulan Depan Building: 5: You Confident: 5: You Helping Others: 5: You ``` - -> 🌟 **Ingat**: Setiap pakar pernah menjadi pemula. Setiap pembangun senior pernah merasa seperti anda sekarang – teruja, mungkin sedikit keliru, dan pasti ingin tahu tentang apa yang mungkin. Anda berada dalam syarikat yang hebat, dan perjalanan ini akan menjadi luar biasa. Selamat datang ke dunia pengaturcaraan yang menakjubkan! πŸŽ‰ +> 🌟 **Ingat**: Setiap pakar pernah menjadi pemula. Setiap pembangun kanan pernah berasa seperti anda sekarang – teruja, mungkin sedikit terbeban, dan pasti ingin tahu tentang apa yang mungkin dilakukan. Anda berada dalam syarikat yang hebat, dan perjalanan ini akan menjadi luar biasa. Selamat datang ke dunia pengaturcaraan yang menakjubkan! πŸŽ‰ --- + **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 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, terjemahan profesional oleh manusia adalah disyorkan. 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/AGENTS.md b/translations/ms/AGENTS.md index a251e98a5..82372c7a2 100644 --- a/translations/ms/AGENTS.md +++ b/translations/ms/AGENTS.md @@ -2,46 +2,46 @@ ## Gambaran Projek -Ini adalah repositori kurikulum pendidikan untuk mengajar asas pembangunan web kepada pemula. Kurikulum ini adalah kursus komprehensif selama 12 minggu yang dibangunkan oleh Microsoft Cloud Advocates, menampilkan 24 pelajaran praktikal yang merangkumi JavaScript, CSS, dan HTML. +Ini adalah repositori kurikulum pendidikan untuk mengajar asas pembangunan web kepada pemula. Kurikulum ini merupakan kursus komprehensif selama 12 minggu yang dibangunkan oleh Microsoft Cloud Advocates, menampilkan 24 pelajaran praktikal yang merangkumi JavaScript, CSS, dan HTML. ### Komponen Utama -- **Kandungan Pendidikan**: 24 pelajaran tersusun yang diatur dalam modul berasaskan projek -- **Projek Praktikal**: Terrarium, Permainan Mengetik, Sambungan Pelayar, Permainan Angkasa, Aplikasi Perbankan, Penyunting Kod, dan Pembantu Sembang AI -- **Kuiz Interaktif**: 48 kuiz dengan 3 soalan setiap satu (penilaian sebelum/selepas pelajaran) -- **Sokongan Pelbagai Bahasa**: Terjemahan automatik untuk lebih 50+ bahasa melalui GitHub Actions -- **Teknologi**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (untuk projek AI) +- **Kandungan Pendidikan**: 24 pelajaran terstruktur yang dianjurkan dalam modul berasaskan projek +- **Projek Praktikal**: Terrarium, Permainan Mengetik, Sambungan Penyemak Imbas, Permainan Angkasa, Aplikasi Perbankan, Penyunting Kod, dan Pembantu Sembang AI +- **Kuis Interaktif**: 48 kuis dengan 3 soalan setiap satu (penilaian pra/sesudah pelajaran) +- **Sokongan Pelbagai Bahasa**: Terjemahan automatik untuk lebih 50 bahasa melalui GitHub Actions +- **Teknologi**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (untuk projek AI) ### Seni Bina -- Repositori pendidikan dengan struktur berasaskan pelajaran -- Setiap folder pelajaran mengandungi README, contoh kod, dan penyelesaian -- Projek berdiri sendiri dalam direktori berasingan (quiz-app, pelbagai projek pelajaran) -- Sistem terjemahan menggunakan GitHub Actions (co-op-translator) -- Dokumentasi disediakan melalui Docsify dan tersedia dalam format PDF +- Repositori pendidikan dengan struktur berasaskan pelajaran +- Setiap folder pelajaran mengandungi README, contoh kod, dan penyelesaian +- Projek berdiri sendiri dalam direktori berasingan (quiz-app, pelbagai projek pelajaran) +- Sistem terjemahan menggunakan GitHub Actions (co-op-translator) +- Dokumentasi disajikan melalui Docsify dan boleh didapati sebagai PDF -## Perintah Penyediaan +## Arahan Persediaan -Repositori ini utamanya untuk penggunaan kandungan pendidikan. Untuk bekerja dengan projek tertentu: +Repositori ini terutama untuk penggunaan kandungan pendidikan. Untuk bekerja dengan projek tertentu: -### Penyediaan Repositori Utama +### Persediaan Repositori Utama ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### Penyediaan Aplikasi Kuiz (Vue 3 + Vite) +### Persediaan Aplikasi Kuis (Vue 3 + Vite) ```bash cd quiz-app npm install -npm run dev # Mula pelayan pembangunan +npm run dev # Mulakan pelayan pembangunan npm run build # Bina untuk pengeluaran npm run lint # Jalankan ESLint ``` -### API Projek Perbankan (Node.js + Express) +### API Projek Bank (Node.js + Express) ```bash cd 7-bank-project/api @@ -51,7 +51,7 @@ npm run lint # Jalankan ESLint npm run format # Format dengan Prettier ``` -### Projek Sambungan Pelayar +### Projek Sambungan Penyemak Imbas ```bash cd 5-browser-extension/solution @@ -80,37 +80,37 @@ python api.py ### Untuk Penyumbang Kandungan -1. **Fork repositori** ke akaun GitHub anda -2. **Clone fork anda** secara tempatan -3. **Cipta cawangan baru** untuk perubahan anda -4. Buat perubahan pada kandungan pelajaran atau contoh kod -5. Uji sebarang perubahan kod dalam direktori projek berkaitan -6. Hantar permintaan tarik mengikut garis panduan sumbangan +1. **Fork repositori** ke akaun GitHub anda +2. **Clone fork anda** secara tempatan +3. **Buat cawangan baru** untuk perubahan anda +4. Buat perubahan pada kandungan pelajaran atau contoh kod +5. Uji sebarang perubahan kod dalam direktori projek yang berkaitan +6. Hantar permintaan tarik (pull requests) mengikut garis panduan sumbangan ### Untuk Pelajar -1. Fork atau clone repositori -2. Navigasi ke direktori pelajaran secara berurutan -3. Baca fail README untuk setiap pelajaran -4. Lengkapkan kuiz pra-pelajaran di https://ff-quizzes.netlify.app/web/ -5. Ikuti contoh kod dalam folder pelajaran -6. Selesaikan tugasan dan cabaran -7. Ambil kuiz pasca-pelajaran +1. Fork atau clone repositori +2. Navigasi ke direktori pelajaran secara berurutan +3. Baca fail README untuk setiap pelajaran +4. Lengkapkan kuis pra-pelajaran di https://ff-quizzes.netlify.app/web/ +5. Kerjakan contoh kod dalam folder pelajaran +6. Lengkapkan tugasan dan cabaran +7. Ambil kuis pasca-pelajaran -### Pembangunan Secara Langsung +### Pembangunan Masa Nyata -- **Dokumentasi**: Jalankan `docsify serve` di root (port 3000) -- **Aplikasi Kuiz**: Jalankan `npm run dev` dalam direktori quiz-app -- **Projek**: Gunakan sambungan VS Code Live Server untuk projek HTML -- **Projek API**: Jalankan `npm start` dalam direktori API yang sesuai +- **Dokumentasi**: Jalankan `docsify serve` di direktori root (port 3000) +- **Aplikasi Kuis**: Jalankan `npm run dev` di direktori quiz-app +- **Projek**: Gunakan sambungan VS Code Live Server untuk projek HTML +- **Projek API**: Jalankan `npm start` di direktori API masing-masing ## Arahan Ujian -### Ujian Aplikasi Kuiz +### Ujian Aplikasi Kuis ```bash cd quiz-app -npm run lint # Periksa isu gaya kod +npm run lint # Semak masalah gaya kod npm run build # Sahkan binaan berjaya ``` @@ -118,86 +118,86 @@ npm run build # Sahkan binaan berjaya ```bash cd 7-bank-project/api -npm run lint # Periksa isu gaya kod -node server.js # Sahkan server bermula tanpa ralat +npm run lint # Semak isu gaya kod +node server.js # Sahkan pelayan bermula tanpa ralat ``` -### Pendekatan Ujian Am +### Pendekatan Ujian Umum -- Ini adalah repositori pendidikan tanpa ujian automatik menyeluruh -- Ujian manual fokus pada: - - Contoh kod berjalan tanpa ralat - - Pautan dalam dokumentasi berfungsi dengan betul - - Pembinaan projek selesai dengan jayanya - - Contoh mengikuti amalan terbaik +- Ini adalah repositori pendidikan tanpa ujian automatik menyeluruh +- Ujian manual memberi tumpuan kepada: + - Contoh kod berjalan tanpa ralat + - Pautan dalam dokumentasi berfungsi dengan betul + - Pembinaan projek selesai dengan berjaya + - Contoh mengikuti amalan terbaik -### Semakan Pra-Hantar +### Pemeriksaan Pra-Penghantaran -- Jalankan `npm run lint` dalam direktori yang mempunyai package.json -- Sahkan pautan markdown sah -- Uji contoh kod dalam pelayar atau Node.js -- Periksa bahawa terjemahan mengekalkan struktur yang betul +- Jalankan `npm run lint` dalam direktori dengan package.json +- Sahkan pautan markdown adalah sah +- Uji contoh kod dalam pelayar atau Node.js +- Semak bahawa terjemahan mengekalkan struktur yang betul ## Garis Panduan Gaya Kod ### JavaScript -- Gunakan sintaks moden ES6+ -- Ikuti konfigurasi ESLint standard yang disediakan dalam projek -- Gunakan nama pemboleh ubah dan fungsi yang bermakna untuk kejelasan pendidikan -- Tambah komen yang menerangkan konsep untuk pelajar -- Format menggunakan Prettier jika dikonfigurasikan +- Gunakan sintaks ES6+ moden +- Ikuti konfigurasi ESLint standard yang disediakan dalam projek +- Gunakan nama pembolehubah dan fungsi yang bermakna untuk kejelasan pendidikan +- Tambah komen yang menerangkan konsep untuk pelajar +- Format menggunakan Prettier jika dipasang ### HTML/CSS -- Elemen semantic HTML5 -- Prinsip reka bentuk responsif -- Konvensyen penamaan kelas yang jelas -- Komen yang menerangkan teknik CSS untuk pelajar +- Elemen HTML5 semantik +- Prinsip reka bentuk responsif +- Konvensyen penamaan kelas yang jelas +- Komen yang menerangkan teknik CSS untuk pelajar ### Python -- Garis panduan gaya PEP 8 -- Contoh kod yang jelas dan pendidikan -- Petunjuk jenis (type hints) di mana berguna untuk pembelajaran +- Garis panduan gaya PEP 8 +- Contoh kod yang jelas dan pendidikan +- Petunjuk jenis (type hints) jika berguna untuk pembelajaran ### Dokumentasi Markdown -- Hierarki tajuk yang jelas -- Blok kod dengan spesifikasi bahasa -- Pautan kepada sumber tambahan -- Tangkapan layar dan imej dalam direktori `images/` -- Teks alt untuk imej bagi aksesibiliti +- Hirarki tajuk yang jelas +- Blok kod dengan penentuan bahasa +- Pautan ke sumber tambahan +- Tangkapan skrin dan gambar di direktori `images/` +- Teks alt untuk imej untuk aksesibiliti -### Penyusunan Fail +### Organisasi Fail -- Pelajaran dinomborkan secara berurutan (1-getting-started-lessons, 2-js-basics, dll.) -- Setiap projek ada direktori `solution/` dan sering `start/` atau `your-work/` -- Imej disimpan dalam folder `images/` khusus pelajaran -- Terjemahan dalam struktur `translations/{language-code}/` +- Pelajaran bernombor secara berurutan (1-getting-started-lessons, 2-js-basics, dll.) +- Setiap projek mempunyai direktori `solution/` dan selalunya `start/` atau `your-work/` +- Gambar disimpan dalam folder `images/` khusus pelajaran +- Terjemahan dalam struktur `translations/{language-code}/` -## Pembinaan dan Penghantaran +## Pembinaan dan Penerapan -### Penghantaran Aplikasi Kuiz (Azure Static Web Apps) +### Penerapan Aplikasi Kuis (Azure Static Web Apps) -Aplikasi kuiz dikonfigurasikan untuk penghantaran Azure Static Web Apps: +quiz-app dikonfigurasikan untuk penerapan Azure Static Web Apps: ```bash cd quiz-app npm run build # Membuat folder dist/ -# Melakukan penyebaran melalui aliran kerja GitHub Actions apabila tolak ke main +# Menghantar melalui aliran kerja GitHub Actions pada tolak ke main ``` -Konfigurasi Azure Static Web Apps: -- **Lokasi aplikasi**: `/quiz-app` -- **Lokasi output**: `dist` -- **Aliran kerja**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +Konfigurasi Azure Static Web Apps: +- **Lokasi App**: `/quiz-app` +- **Lokasi Output**: `dist` +- **Aliran Kerja**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` ### Penjanaan PDF Dokumentasi ```bash npm install # Pasang docsify-to-pdf -npm run convert # Hasilkan PDF daripada docs +npm run convert # Jana PDF dari docs ``` ### Dokumentasi Docsify @@ -207,76 +207,76 @@ npm install -g docsify-cli # Pasang Docsify secara global docsify serve # Hidangkan pada localhost:3000 ``` -### Pembinaan Projek-Spesifik +### Pembinaan Khusus Projek -Setiap direktori projek mungkin mempunyai proses pembinaan sendiri: -- Projek Vue: `npm run build` menghasilkan bundel untuk pengeluaran -- Projek statik: Tiada langkah pembinaan, fail dihidangkan terus +Setiap direktori projek mungkin mempunyai proses pembinaan tersendiri: +- Projek Vue: `npm run build` menghasilkan bundel produksi +- Projek statik: Tiada langkah pembinaan, fail terus disajikan ## Garis Panduan Permintaan Tarik ### Format Tajuk -Gunakan tajuk yang jelas dan deskriptif yang menunjukkan bidang perubahan: -- `[Quiz-app] Tambah kuiz baru untuk pelajaran X` -- `[Lesson-3] Betulkan kesalahan taip dalam projek terrarium` -- `[Translation] Tambah terjemahan Sepanyol untuk pelajaran 5` -- `[Docs] Kemas kini arahan penyediaan` +Gunakan tajuk yang jelas dan deskriptif yang menunjukkan kawasan perubahan: +- `[Quiz-app] Tambah kuis baru untuk pelajaran X` +- `[Lesson-3] Betulkan salah eja dalam projek terrarium` +- `[Translation] Tambah terjemahan Sepanyol untuk pelajaran 5` +- `[Docs] Kemas kini arahan persediaan` -### Semakan Wajib +### Pemeriksaan Diperlukan Sebelum menghantar PR: -1. **Kualiti Kod**: - - Jalankan `npm run lint` dalam direktori projek berkaitan - - Betulkan semua ralat dan amaran linting +1. **Kualiti Kod**: + - Jalankan `npm run lint` dalam direktori projek yang terjejas + - Betulkan semua ralat dan amaran lint -2. **Pengesahan Pembinaan**: - - Jalankan `npm run build` jika berkenaan - - Pastikan tiada ralat pembinaan +2. **Pengesahan Pembinaan**: + - Jalankan `npm run build` jika sesuai + - Pastikan tiada ralat pembinaan -3. **Pengesahan Pautan**: - - Uji semua pautan markdown - - Sahkan rujukan imej berfungsi +3. **Pemeriksaan Pautan**: + - Uji semua pautan markdown + - Sahkan rujukan imej berfungsi -4. **Semakan Kandungan**: - - Semak ejaan dan tatabahasa - - Pastikan contoh kod betul dan pendidikan - - Sahkan terjemahan mengekalkan makna asal +4. **Semakan Kandungan**: + - Semak ejaan dan tatabahasa + - Pastikan contoh kod betul dan pendidikan + - Sahkan terjemahan mengekalkan makna asal ### Keperluan Sumbangan -- Setuju dengan Microsoft CLA (semakan automatik pada PR pertama) -- Ikuti [Kod Etika Sumber Terbuka Microsoft](https://opensource.microsoft.com/codeofconduct/) -- Rujuk [CONTRIBUTING.md](./CONTRIBUTING.md) untuk garis panduan terperinci -- Rujukkan nombor isu dalam penerangan PR jika sesuai +- Bersetuju dengan Microsoft CLA (semakan automatik pada PR pertama) +- Ikuti [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) +- Lihat [CONTRIBUTING.md](./CONTRIBUTING.md) untuk garis panduan terperinci +- Rujuk nombor isu dalam penerangan PR jika berkenaan ### Proses Semakan -- PR disemak oleh penyelenggara dan komuniti -- Kejelasan pendidikan diutamakan -- Contoh kod harus mengikuti amalan terbaik semasa -- Terjemahan disemak untuk ketepatan dan kesesuaian budaya +- PR disemak oleh penyelenggara dan komuniti +- Kejelasan pendidikan diprioritikan +- Contoh kod harus mengikuti amalan terbaik semasa +- Terjemahan disemak untuk ketepatan dan kesesuaian budaya ## Sistem Terjemahan ### Terjemahan Automatik -- Menggunakan GitHub Actions dengan aliran kerja co-op-translator -- Menerjemah ke 50+ bahasa secara automatik -- Fail sumber dalam direktori utama -- Fail terjemahan dalam direktori `translations/{language-code}/` +- Menggunakan GitHub Actions dengan aliran kerja co-op-translator +- Menterjemah ke 50+ bahasa secara automatik +- Fail sumber dalam direktori utama +- Fail terjemahan dalam direktori `translations/{language-code}/` ### Menambah Penambahbaikan Terjemahan Manual -1. Cari fail dalam `translations/{language-code}/` -2. Buat penambahbaikan sambil mengekalkan struktur -3. Pastikan contoh kod kekal berfungsi -4. Uji sebarang kandungan kuiz berlokalisasi +1. Cari fail dalam `translations/{language-code}/` +2. Buat penambahbaikan sambil mengekalkan struktur +3. Pastikan contoh kod kekal berfungsi +4. Uji sebarang kandungan kuis berlokal ### Metadata Terjemahan -Fail terjemahan termasuk pengepala metadata: +Fail terjemahan termasuk pengepala metadata: ```markdown ``` -## Pengesanan Ralat dan Penyelesaian Masalah +## Penyahpepijatan dan Penyelesaian Masalah -### Isu Lazim +### Isu Biasa -**Aplikasi kuiz gagal bermula**: -- Semak versi Node.js (disarankan v14+) -- Padam `node_modules` dan `package-lock.json`, jalankan `npm install` lagi -- Semak konflik port (default: Vite guna port 5173) +**Aplikasi kuis gagal bermula**: +- Semak versi Node.js (disyorkan v14+) +- Padamkan `node_modules` dan `package-lock.json`, kemudian jalankan `npm install` semula +- Semak konflik port (lalai: Vite menggunakan port 5173) -**Pelayan API tidak bermula**: -- Sahkan versi Node.js memenuhi minimum (node >=10) -- Semak jika port sudah digunakan -- Pastikan semua kebergantungan dipasang dengan `npm install` +**Pelayan API tidak bermula**: +- Pastikan versi Node.js memenuhi minimum (node >=10) +- Semak jika port sudah digunakan +- Pastikan semua pergantungan dipasang dengan `npm install` -**Sambungan pelayar tidak dimuat**: -- Sahkan manifest.json diformat dengan betul -- Periksa konsol pelayar untuk ralat -- Ikuti arahan pemasangan sambungan khusus pelayar +**Sambungan penyemak imbas tidak dimuatkan**: +- Pastikan manifest.json diformat dengan betul +- Semak konsol penyemak imbas untuk ralat +- Ikuti arahan pemasangan sambungan khusus pelayar -**Isu projek sembang Python**: -- Pastikan pakej OpenAI dipasang: `pip install openai` -- Sahkan pembolehubah persekitaran GITHUB_TOKEN diset -- Semak kebenaran akses Model GitHub +**Isu projek sembang Python**: +- Pastikan pakej OpenAI dipasang: `pip install openai` +- Semak pembolehubah persekitaran GITHUB_TOKEN disetkan +- Semak kebenaran akses GitHub Models -**Docsify tidak menghidangkan dokumen**: -- Pasang docsify-cli secara global: `npm install -g docsify-cli` -- Jalankan dari direktori root repositori -- Pastikan `docs/_sidebar.md` wujud +**Docsify tidak memaparkan dokumentasi**: +- Pasang docsify-cli secara global: `npm install -g docsify-cli` +- Jalankan dari direktori root repositori +- Semak bahawa `docs/_sidebar.md` wujud ### Petua Persekitaran Pembangunan -- Gunakan VS Code dengan sambungan Live Server untuk projek HTML -- Pasang sambungan ESLint dan Prettier untuk format konsisten -- Gunakan DevTools pelayar untuk debug JavaScript -- Untuk projek Vue, pasang sambungan Vue DevTools pelayar +- Gunakan VS Code dengan sambungan Live Server untuk projek HTML +- Pasang sambungan ESLint dan Prettier untuk format konsisten +- Gunakan DevTools penyemak imbas untuk penyahpepijatan JavaScript +- Untuk projek Vue, pasang sambungan Vue DevTools penyemak imbas ### Pertimbangan Prestasi -- Bilangan fail terjemahan besar (50+ bahasa) menjadikan klon penuh besar -- Gunakan klon cetek jika hanya bekerja pada kandungan: `git clone --depth 1` -- Kecualikan terjemahan dari carian semasa bekerja pada kandungan Bahasa Inggeris -- Proses pembinaan mungkin lambat pada run pertama (npm install, bina Vite) +- Bilangan fail terjemahan yang banyak (50+ bahasa) menyebabkan klon penuh besar +- Gunakan shallow clone jika hanya bekerja pada kandungan: `git clone --depth 1` +- Kecualikan terjemahan dari carian ketika bekerja pada kandungan Inggeris +- Proses pembinaan mungkin perlahan pada larian pertama (npm install, binaan Vite) ## Pertimbangan Keselamatan ### Pembolehubah Persekitaran -- Kunci API tidak harus dikomit ke repositori -- Gunakan fail `.env` (sudah ada dalam `.gitignore`) -- Dokumentasikan pembolehubah persekitaran yang diperlukan dalam README projek +- Kekunci API tidak harus dimasukkan ke repositori +- Gunakan fail `.env` (sudah dalam `.gitignore`) +- Dokumentasikan pembolehubah persekitaran yang diperlukan dalam README projek ### Projek Python -- Gunakan persekitaran maya: `python -m venv venv` -- Kekalkan kebergantungan dikemas kini -- Token GitHub harus mempunyai kebenaran minimum yang diperlukan +- Gunakan persekitaran maya: `python -m venv venv` +- Kemas kini pergantungan secara berkala +- Token GitHub harus mempunyai kebenaran minimum yang diperlukan -### Akses Model GitHub +### Akses GitHub Models -- Personal Access Tokens (PAT) diperlukan untuk Model GitHub -- Token perlu disimpan sebagai pembolehubah persekitaran -- Jangan sekali-kali komit token atau kelayakan +- Token Akses Peribadi (PAT) diperlukan untuk GitHub Models +- Token harus disimpan sebagai pembolehubah persekitaran +- Jangan sekali-kali masukkan token atau kelayakan ke repositori ## Nota Tambahan ### Sasaran Audiens -- Pemula sepenuhnya dalam pembangunan web -- Pelajar dan pembelajar kendiri -- Guru menggunakan kurikulum dalam bilik darjah -- Kandungan direka untuk kebolehaksesan dan pembinaan kemahiran secara berperingkat +- Pemula sepenuhnya dalam pembangunan web +- Pelajar dan pembelajar kendiri +- Guru yang menggunakan kurikulum dalam kelas +- Kandungan direka untuk kebolehaksesan dan pembinaan kemahiran secara berperingkat ### Falsafah Pendidikan -- Pendekatan pembelajaran berasaskan projek -- Pemeriksaan ilmu kerap (kuiz) -- Latihan pengkodan secara praktikal -- Contoh aplikasi dunia sebenar -- Tumpuan pada asas sebelum kerangka +- Pendekatan pembelajaran berasaskan projek +- Semakan pengetahuan berkala (kuis) +- Latihan pengkodan praktikal +- Contoh aplikasi dunia sebenar +- Fokus pada asas sebelum menggunakan rangka kerja ### Penyelenggaraan Repositori -- Komuniti aktif pelajar dan penyumbang -- Kemas kini berkala ke kebergantungan dan kandungan -- Isu dan perbincangan dipantau oleh penyelenggara -- Kemas kini terjemahan automatik melalui GitHub Actions +- Komuniti pelajar dan penyumbang yang aktif +- Kemas kini berkala pada pergantungan dan kandungan +- Isu dan perbincangan dipantau oleh penyelenggara +- Kemas kini terjemahan automatik melalui GitHub Actions ### Sumber Berkaitan -- [Modul Microsoft Learn](https://docs.microsoft.com/learn/) -- [Sumber Student Hub](https://docs.microsoft.com/learn/student-hub/) -- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) disyorkan untuk pelajar -- Kursus tambahan: AI Generatif, Sains Data, ML, kurikulum IoT tersedia +- [Modul Microsoft Learn](https://docs.microsoft.com/learn/) +- [Sumber Student Hub](https://docs.microsoft.com/learn/student-hub/) +- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) disyorkan untuk pelajar +- Kursus tambahan: AI Generatif, Sains Data, ML, kurikulum IoT tersedia -### Bekerja Dengan Projek Spesifik +### Bekerja dengan Projek Tertentu -Untuk arahan terperinci mengenai projek individu, lihat fail README dalam: -- `quiz-app/README.md` - Aplikasi kuiz Vue 3 -- `7-bank-project/README.md` - Aplikasi perbankan dengan pengesahan -- `5-browser-extension/README.md` - Pembangunan sambungan pelayar -- `6-space-game/README.md` - Pembangunan permainan berasaskan canvas -- `9-chat-project/README.md` - Projek pembantu sembang AI +Untuk arahan terperinci projek individu, rujuk fail README di: +- `quiz-app/README.md` - aplikasi kuis Vue 3 +- `7-bank-project/README.md` - aplikasi perbankan dengan pengesahan +- `5-browser-extension/README.md` - pembangunan sambungan penyemak imbas +- `6-space-game/README.md` - pembangunan permainan berasaskan kanvas +- `9-chat-project/README.md` - projek pembantu sembang AI ### Struktur Monorepo -Walaupun bukan monorepo tradisional, repositori ini mengandungi beberapa projek bebas: -- Setiap pelajaran berdiri sendiri -- Projek tidak berkongsi kebergantungan -- Bekerja pada projek individu tanpa menjejaskan yang lain -- Klon keseluruhan repo untuk pengalaman kurikulum penuh +Walaupun bukan monorepo tradisional, repositori ini mengandungi pelbagai projek berdikari: +- Setiap pelajaran berdiri sendiri +- Projek tidak berkongsi pergantungan +- Kerja pada projek individu tanpa menjejaskan yang lain +- Klon keseluruhan repo untuk pengalaman kurikulum penuh --- -**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 maklum bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber rujukan yang sah. Untuk maklumat penting, terjemahan profesional oleh manusia adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini. +**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 maklum bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidakakuratan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber rujukan yang sah. Untuk maklumat 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 diff --git a/translations/ms/README.md b/translations/ms/README.md index 11093ca0d..fb76cf51f 100644 --- a/translations/ms/README.md +++ b/translations/ms/README.md @@ -12,202 +12,206 @@ # Pembangunan Web untuk Pemula - Kurikulum -Pelajari asas-asas pembangunan web dengan kursus komprehensif 12 minggu kami oleh Microsoft Cloud Advocates. Setiap 24 pelajaran menelusuri JavaScript, CSS, dan HTML melalui projek praktikal seperti terrarium, peluasan pelayar, dan permainan angkasa lepas. Sertai kuiz, perbincangan, dan tugasan praktikal. Tingkatkan kemahiran anda dan optimakan pengekalan ilmu dengan pedagogi berasaskan projek yang berkesan. Mulakan perjalanan pengkodan anda hari ini! +Pelajari asas-asas pembangunan web dengan kursus komprehensif 12-minggu oleh Microsoft Cloud Advocates. Setiap 24 pelajaran menyelami JavaScript, CSS, dan HTML melalui projek praktikal seperti terrarium, sambungan pelayar, dan permainan angkasa lepas. Sertai kuiz, perbincangan, dan tugasan praktikal. Tingkatkan kemahiran anda dan optimalkan penyerapan pengetahuan dengan pedagogi berasaskan projek kami yang efektif. Mula 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 ini untuk mula menggunakan sumber ini: +Ikuti langkah-langkah berikut untuk bermula 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) -2. **Clone Repositori**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Sertai Azure AI Foundry Discord dan temui pakar serta pembangun rakan sebaya**](https://discord.com/invite/ByRwuEEgH4) +2. **Klon Repositori**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**Sertai Discord Azure AI Foundry dan jumpa pakar serta pembangun lain**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 Sokongan Pelbagai Bahasa -#### Disokong melalui GitHub Action (Automatik & Sentiasa Dikemas Kini) +#### Disokong melalui GitHub Action (Automatik & Sentiasa Terkini) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-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) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](./README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-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) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) -> **Lebih Suka Clone Secara Tempatan?** - -> Repositori ini merangkumi lebih 50 terjemahan bahasa yang secara signifikan menambah saiz muat turun. Untuk clone tanpa terjemahan, gunakan sparse checkout: +> **Lebih suka Klon Secara Tempatan?** +> +> Repositori ini termasuk lebih 50+ terjemahan bahasa yang secara signifikan meningkatkan saiz muat turun. Untuk klon tanpa terjemahan, gunakan sparse checkout: +> +> **Bash / macOS / Linux:** > ```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 memberikan anda segala yang diperlukan untuk menamatkan kursus dengan muat turun yang lebih pantas. +> +> **CMD (Windows):** +> ```cmd +> 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 memberikan anda segala yang anda perlukan untuk menyelesaikan kursus dengan muat turun yang jauh lebih pantas. -**Jika anda ingin mempunyai bahasa terjemahan tambahan yang disokong, senarai terdapat [di sini](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**Jika anda ingin menambah bahasa terjemahan tambahan yang disokong disenaraikan [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) #### πŸ§‘β€πŸŽ“ _Adakah anda seorang pelajar?_ -Lawati [**halaman Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) di mana anda akan menemui sumber untuk pemula, pek Pelajar dan juga cara untuk mendapatkan baucar sijil percuma. Ini adalah halaman yang anda mahu tandakan dan semak dari masa ke masa kerana kami menukar kandungan setiap bulan. +Lawati [**halaman Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) di mana anda akan menemui sumber pemula, pek Pelajar dan juga cara untuk mendapatkan baucar sijil percuma. Ini adalah halaman yang anda patut tandakan dan semak dari semasa ke semasa kerana kandungan akan ditukar setiap bulan. -### πŸ“£ Pengumuman - Cabaran Mod Agen GitHub Copilot Baru untuk disiapkan! +### πŸ“£ Pengumuman - Cabaran mod Agen GitHub Copilot baru untuk diselesaikan! -Cabaran Baru ditambah, cari "GitHub Copilot Agent Challenge πŸš€" di kebanyakan bab. Itu adalah cabaran baru untuk anda selesaikan menggunakan GitHub Copilot dan mod Agen. Jika anda belum pernah menggunakan mod Agen sebelum ini, ia bukan sahaja mampu menjana teks tetapi juga boleh membuat dan mengedit fail, menjalankan arahan dan banyak lagi. +Cabaran Baru ditambah, cari "GitHub Copilot Agent Challenge πŸš€" dalam kebanyakan bab. Itu adalah cabaran baru untuk anda selesaikan menggunakan GitHub Copilot dan mod Agen. Jika anda belum pernah menggunakan mod Agen, ia bukan sahaja mampu menjana teks tetapi juga boleh mencipta dan menyunting fail, menjalankan arahan dan banyak lagi. -### πŸ“£ Pengumuman - _Projek Baharu untuk dibina menggunakan Generative AI_ +### πŸ“£ Pengumuman - _Projek Baru untuk dibina menggunakan Generative AI_ -Projek Pembantu AI baharu baru saja ditambah, lihat [projek](./9-chat-project/README.md) +Projek Pembantu AI baru telah ditambah, semak [projek](./9-chat-project/README.md) -### πŸ“£ Pengumuman - _Kurikulum Baharu_ tentang Generative AI untuk JavaScript baru dikeluarkan +### πŸ“£ Pengumuman - _Kurikulum Baru_ mengenai Generative AI untuk JavaScript baru sahaja dikeluarkan -Jangan terlepas kurikulum Generative AI baharu kami! +Jangan terlepas kurikulum Generative AI baru kami! -Lawati [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk mula! +Lawati [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk bermula! ![Background](../../translated_images/ms/background.148a8d43afde5730.webp) -- Pelajaran merangkumi segala dari asas hingga RAG. -- Berinteraksi dengan watak sejarah menggunakan GenAI dan aplikasi teman kami. -- Naratif yang menyeronokkan dan menarik, anda akan mengembara masa! +- Pelajaran merangkumi segala-galanya dari asas hingga RAG. +- Berinteraksi dengan watak sejarah menggunakan GenAI dan aplikasi pendamping kami. +- Naratif yang menyeronokkan dan menarik, anda akan 'mengembara masa'! ![character](../../translated_images/ms/character.5c0dd8e067ffd693.webp) - -Setiap pelajaran termasuk tugasan untuk disiapkan, pemeriksaan pengetahuan dan cabaran untuk membimbing anda dalam topik seperti: +Setiap pelajaran termasuk tugasan untuk diselesaikan, pemeriksaan pengetahuan dan cabaran untuk membimbing anda mempelajari topik seperti: - Prompting dan kejuruteraan prompt -- Penjanaan aplikasi teks dan gambar -- Aplikasi carian +- Penjanaan aplikasi teks dan imej +- Aplikasi pencarian -Lawati [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk mula! +Lawati [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) untuk bermula! +## 🌱 Memulakan +> **Guru-guru**, kami telah [sertakan beberapa cadangan](for-teachers.md) tentang cara menggunakan kurikulum ini. Kami sangat mengalu-alukan maklum balas anda [di forum perbincangan kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -## 🌱 Mula Bermula +**[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 ceramah, melengkapkan pelbagai aktiviti dan periksa kefahaman anda dengan kuiz pasca-ceramah. -> **Guru**, kami telah [menyertakan beberapa cadangan](for-teachers.md) tentang bagaimana menggunakan kurikulum ini. Kami ingin menerima maklum balas anda [di forum perbincangan kami](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +Untuk meningkatkan pengalaman pembelajaran anda, berhubung dengan rakan sekelas untuk bekerjasama dalam projek bersama! 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. -**[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 periksa pemahaman anda dengan kuiz pasca-ceramah. - -Untuk meningkatkan pengalaman pembelajaran anda, berhubung dengan rakan sekelas anda untuk bekerja pada projek bersama! Perbincangan digalakkan di [forum perbincangan](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) kami di mana pasukan moderator kami akan tersedia untuk 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 melanjutkan pendidikan anda, kami sangat mengesyorkan meneroka [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) bagi bahan pembelajaran tambahan. ### πŸ“‹ Menyediakan persekitaran anda -Kurikulum ini mempunyai persekitaran pembangunan yang sudah siap! Semasa anda bermula, anda boleh memilih untuk menjalankan kurikulum dalam [Codespace](https://github.com/features/codespaces/) (_persekitaran berasaskan pelayar, tiada pemasangan diperlukan_), atau secara tempatan di komputer anda menggunakan penyunting teks seperti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Kurikulum ini telah menyediakan persekitaran pembangunan siap sedia! Apabila anda bermula anda boleh memilih untuk menjalankan kurikulum dalam [Codespace](https://github.com/features/codespaces/) (_persekitaran berasaskan pelayar tanpa perlu pasang apa-apa_), atau secara tempatan pada komputer anda menggunakan penyunting teks seperti [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). -#### Buat repositori anda -Untuk memudahkan anda menyimpan kerja anda, adalah disarankan agar anda membuat salinan repositori ini sendiri. Anda boleh melakukannya dengan mengklik butang **Use this template** di bahagian atas halaman. Ini akan membuat repositori baru dalam akaun GitHub anda dengan salinan kurikulum. +#### Cipta repositori anda +Untuk memudahkan anda menyimpan kerja anda, disyorkan anda mencipta salinan anda sendiri repositori ini. Anda boleh lakukan ini dengan mengklik butang **Use this template** di atas halaman ini. Ini akan mencipta repositori baru dalam akaun GitHub anda dengan salinan kurikulum. -Ikuti langkah ini: +Ikuti langkah berikut: 1. **Fork Repositori**: Klik pada butang "Fork" di sudut atas-kanan halaman ini. -2. **Clone Repositori**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +2. **Klon Repositori**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` #### Menjalankan kurikulum dalam Codespace -Dalam salinan repositori yang anda buat, klik butang **Code** dan pilih **Open with Codespaces**. Ini akan mencipta Codespace baharu untuk anda bekerja. +Dalam salinan repositori ini yang anda cipta, klik butang **Code** dan pilih **Open with Codespaces**. Ini akan mencipta Codespace baru untuk anda bekerja. ![Codespace](../../translated_images/ms/createcodespace.0238bbf4d7a8d955.webp) -#### Menjalankan kurikulum secara tempatan di komputer anda - -Untuk menjalankan kurikulum ini secara tempatan 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 yang paling sesuai untuk anda. +#### Menjalankan kurikulum secara tempatan pada komputer anda -Cadangan kami ialah 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) terbina dalam. Anda boleh muat turun Visual Studio Code [di sini](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Untuk menjalankan kurikulum ini secara tempatan pada 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 bagi setiap alat ini supaya anda boleh pilih yang paling sesuai. - -1. Clone repositori anda ke komputer anda. Anda boleh melakukannya dengan mengklik butang **Code** dan menyalin URL: +Cadangan kami adalah untuk 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). +1. Klon 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 perintah 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 melakukan ini dengan mengklik **File** > **Open Folder** dan memilih folder yang baru anda klon. - +2. Buka folder tersebut dalam Visual Studio Code. Anda boleh melakukannya dengan mengklik **File** > **Open Folder** dan memilih folder yang baru sahaja anda klon. > Sambungan Visual Studio Code yang disyorkan: > > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - untuk pratonton halaman HTML dalam Visual Studio Code -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - untuk membantu anda menulis kod dengan lebih cepat +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - untuk membantu anda menulis kod dengan lebih pantas -## πŸ“‚ Setiap pelajaran termasuk: +## πŸ“‚ Setiap pelajaran merangkumi: - sketchnote pilihan - video tambahan pilihan - kuiz pemanasan sebelum pelajaran - pelajaran bertulis -- untuk pelajaran berasaskan projek, panduan langkah demi langkah untuk membina projek -- pemeriksaan pengetahuan +- untuk pelajaran berasaskan projek, panduan langkah demi langkah tentang cara membina projek +- semakan pengetahuan - cabaran - bacaan tambahan - tugasan - [kuiz selepas pelajaran](https://ff-quizzes.netlify.app/web/) -> **Nota tentang kuiz**: Semua kuiz terkandung dalam folder Quiz-app, 48 kuiz keseluruhan dengan tiga soalan setiap satu. Ia tersedia [di sini](https://ff-quizzes.netlify.app/web/) aplikasi kuiz boleh dijalankan secara tempatan atau diterapkan ke Azure; ikuti arahan dalam folder `quiz-app`. +> **Nota tentang kuiz**: Semua kuiz terkandung dalam folder Quiz-app, 48 kuiz keseluruhan dengan tiga soalan setiap satu. Ia tersedia [di sini](https://ff-quizzes.netlify.app/web/). aplikasi kuiz boleh dijalankan secara tempatan atau dipasang di Azure; ikut arahan dalam folder `quiz-app`. ## πŸ—ƒοΈ Pelajaran -| | Nama Projek | Konsep Diajarkan | Objektif Pembelajaran | Pelajaran Berkaitan | Pengarang | -| :-: | :----------------------------------------------------: | :--------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :-----------------------: | -| 01 | Memulakan | Pengenalan kepada Pengaturcaraan dan Alat-alat Kerja | Pelajari asas di sebalik kebanyakan bahasa pengaturcaraan dan tentang perisian yang membantu pembangun profesional melakukan kerja mereka | [Pengenalan kepada Bahasa Pengaturcaraan dan Alat-alat Kerja](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Memulakan | Asas GitHub, termasuk bekerjasama dalam kumpulan | Cara menggunakan GitHub dalam projek anda, cara berkolaborasi dengan orang lain dalam 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 | 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 Amalan | Bina HTML untuk membuat 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 | Bina CSS untuk menghias terrarium dalam talian, fokus pada asas CSS termasuk membuat 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 | Bina JavaScript untuk menjadikan terrarium berfungsi sebagai antara muka seret/jatuh, 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) | Bina Permainan Mengetik | Pelajari cara menggunakan acara papan kekunci untuk mengendalikan logik aplikasi JavaScript anda | [Pengaturcaraan Berasaskan Acara](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Sambungan Pelayar Hijau](./5-browser-extension/solution/README.md) | Bekerja dengan Pelayar | Pelajari cara 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 pemboleh ubah dalam storan tempatan | Bina elemen JavaScript sambungan pelayar anda untuk memanggil API menggunakan pemboleh ubah yang disimpan dalam storan tempatan | [API, Borang, dan Storan Tempatan](./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 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 Lanjutan dengan JavaScript | Pelajari 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 pada kanvas | Pelajari tentang API Canvas, yang digunakan untuk melukis elemen pada 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 sekeliling skrin | Ketahui bagaimana elemen boleh bergerak menggunakan koordinat cartesian 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 antara satu sama lain menggunakan tekan 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) | 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) | Mengakhiri dan memulakan semula permainan | Pelajari tentang mengakhiri dan memulakan semula permainan, termasuk membersihkan aset dan menetapkan semula nilai pemboleh ubah | [Syarat Pengakhiran](./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 | Pelajari cara membuat struktur asas 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) | Bina Borang Log Masuk dan Pendaftaran | Pelajari 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 Mendapat dan Menggunakan Data | Cara data mengalir masuk dan keluar dari aplikasi anda, cara mendapatkannya, menyimpannya, dan memusnahkannya | [Data](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Aplikasi Perbankan](./7-bank-project/solution/README.md) | Konsep Pengurusan Keadaan | Pelajari cara aplikasi anda mengekalkan keadaan dan cara mengurusnya secara program | [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 | +| | Nama Projek | Konsep yang Diajarkan | Objektif Pembelajaran | Pelajaran Berkaitan | Pengarang | +| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | Memulakan | Pengenalan kepada Pengaturcaraan dan Alat Perdagangan | Pelajari asas berdasarkan kebanyakan bahasa pengaturcaraan dan tentang perisian yang membantu pembangun profesional melakukan kerja 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 bekerja dalam pasukan | Cara menggunakan GitHub dalam projek anda, cara bekerjasama dengan orang lain dalam asas kod | [Pengenalan kepada GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Memulakan | Kebolehaksesan | Pelajari asas kebolehaksesan web | [Asas Kebolehaksesan](./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 | Bina HTML untuk membuat terrarium dalam talian, menumpukan 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 | Bina CSS untuk menyerlahkan terrarium dalam talian, menumpukan pada asas CSS termasuk membuat 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 | Bina JavaScript untuk menjadikan terrarium berfungsi sebagai antara muka seret/lepas, menumpukan 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) | Bina Permainan Mengetik | Pelajari cara menggunakan acara papan kekunci untuk mendorong logik aplikasi JavaScript anda | [Pengaturcaraan Berasaskan Acara](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bekerja dengan Pelayar | Pelajari cara pelayar berfungsi, sejarahnya, dan cara membina elemen pertama pelanjutan pelayar | [Mengenai Pelayar](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Membina borang, memanggil API dan menyimpan pemboleh ubah dalam storan tempatan | Bina elemen JavaScript pelanjutan pelayar anda untuk memanggil API menggunakan pemboleh ubah yang disimpan dalam storan tempatan | [API, Borang, dan Storan Tempatan](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Proses latar belakang dalam pelayar, prestasi web | Gunakan proses latar belakang pelayar untuk mengurus ikon pelanjutan; pelajari tentang prestasi web dan beberapa pengoptimuman untuk menjadikan | [Tugas Latar Belakang dan Prestasi](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | Pembangunan Permainan Lanjutan dengan JavaScript | Pelajari tentang Warisan 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 | [Space Game](./6-space-game/solution/README.md) | Melukis ke kanvas | Pelajari tentang API Kanvas, digunakan untuk melukis elemen ke skrin | [Melukis ke Kanvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | Menggerakkan elemen di sekeliling skrin | Temui bagaimana elemen boleh mendapat pergerakan menggunakan koordinat kartesian dan API Kanvas | [Menggerakkan Elemen](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | Pengesanan pertembungan | Membuat elemen bertembung dan bertindak balas antara satu sama lain menggunakan kekunci tekan dan menyediakan fungsi penyejukkan untuk memastikan prestasi permainan | [Pengesanan Pertembungan](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | Menjaga skor | Melakukan pengiraan matematik berdasarkan status dan prestasi permainan | [Menjaga Skor](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | Menamatkan dan memulakan semula permainan | Pelajari tentang menamatkan dan memulakan semula permainan, termasuk membersihkan aset dan menetapkan semula nilai pemboleh ubah | [Keadaan Tamat](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](./7-bank-project/solution/README.md) | Templat HTML dan Laluan dalam Aplikasi Web | Pelajari cara membuat kerangka 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 | [Banking App](./7-bank-project/solution/README.md) | Bina Borang Log Masuk dan Pendaftaran | Pelajari tentang membina borang dan mengendalikan rutin pengesahan | [Borang](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | Kaedah Mendapat dan Menggunakan Data | Bagaimana data mengalir masuk dan keluar dari aplikasi anda, bagaimana untuk mendapatkannya, menyimpan, dan membuangnya | [Data](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | Konsep Pengurusan Keadaan | Pelajari bagaimana aplikasi anda mengekalkan keadaan dan bagaimana menguruskannya secara program | [Pengurusan Keadaan](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../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 | [AI Assistants](./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 dalam fikiran: +Kurikulum kami direka dengan dua prinsip pedagogi utama: * pembelajaran berasaskan projek * kuiz kerap -Program ini mengajar asas JavaScript, HTML, dan CSS, serta alat dan teknik terkini yang digunakan oleh pembangun web hari ini. Pelajar akan berpeluang mendapat pengalaman praktikal dengan membina permainan menaip, terrarium maya, sambungan pelayar mesra alam, permainan gaya penyerang angkasa, dan aplikasi perbankan untuk perniagaan. Pada akhir siri ini, pelajar akan mempunyai pemahaman yang kukuh tentang pembangunan web. - -> πŸŽ“ 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! +Program ini mengajarkan asas JavaScript, HTML, dan CSS, serta alat dan teknik terkini yang digunakan oleh pembangun web masa kini. Pelajar akan berpeluang mengembangkan pengalaman secara langsung dengan membina permainan menaip, terrarium maya, pelanjutan pelayar mesra alam, permainan gaya penyerang angkasa, dan aplikasi perbankan untuk perniagaan. Pada akhir siri ini, pelajar akan memperoleh pemahaman yang kukuh mengenai pembangunan web. -Dengan memastikan kandungan selari dengan projek, proses menjadi lebih menarik untuk pelajar dan pemahaman 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)", yang beberapa pengarangnya menyumbang kepada kurikulum ini. +> πŸŽ“ Anda boleh mengikuti beberapa pelajaran pertama dalam kurikulum ini sebagai [Jalan Pembelajaran](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) di Microsoft Learn! -Selain itu, kuiz berisiko rendah sebelum kelas menetapkan niat pelajar untuk mempelajari 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 menjelang pengakhiran kitar 12 minggu. +Dengan memastikan bahawa kandungan selaras dengan projek, proses pembelajaran menjadi lebih menarik untuk pelajar dan daya ingatan 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)", yang mana beberapa pengarangnya menyumbang kepada kurikulum ini. -Walaupun kami sengaja mengelakkan memperkenalkan rangka kerja JavaScript untuk menumpukan pada kemahiran asas yang diperlukan sebagai pembangun web sebelum mengadopsi rangka kerja, satu langkah seterusnya yang baik untuk melengkapkan kurikulum ini ialah belajar tentang Node.js melalui satu lagi koleksi video: "[Siri Pemula kepada: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Selain itu, kuiz sama ada ringkas sebelum kelas menetapkan niat pelajar terhadap pembelajaran topik, sementara kuiz kedua selepas kelas memastikan pemahaman lebih lanjut. Kurikulum ini direka untuk menjadi fleksibel dan menyeronokkan serta boleh diambil secara keseluruhan atau sebahagian. Projek bermula kecil dan menjadi semakin rumit pada penghujung kitaran 12 minggu. -> Lawati [Kod Etika](CODE_OF_CONDUCT.md) dan garis panduan [Menyumbang](CONTRIBUTING.md) kami. Kami mengalu-alukan maklum balas membina anda! +Walaupun kami sengaja mengelakkan pengenalan rangka kerja JavaScript untuk menumpukan pada kemahiran asas yang diperlukan sebagai pembangun web sebelum menggunakan rangka kerja, langkah seterusnya yang baik selepas 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! ## 🧭 Akses luar talian -Anda boleh menjalankan dokumentasi ini secara luar talian dengan menggunakan [Docsify](https://docsify.js.org/#/). Fork repositori ini, [pasang Docsify](https://docsify.js.org/#/quickstart) pada mesin tempatan anda, dan kemudian di folder root repositori ini, taip `docsify serve`. Laman web akan dihidangkan pada port 3000 di localhost anda: `localhost:3000`. +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 di folder akar repo ini, taip `docsify serve`. Laman web akan dihidangkan pada port 3000 pada lokalhos anda: `localhost:3000`. ## πŸ“˜ PDF - -PDF untuk 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! Lihatlah: + +Pasukan kami menghasilkan kursus lain! Lihat: ### LangChain @@ -251,11 +255,11 @@ Pasukan kami menghasilkan kursus lain! Lihatlah: ## Mendapatkan Bantuan -Jika anda tersekat atau mempunyai sebarang soalan tentang membina aplikasi AI. Sertai pelajar lain dan pemaju berpengalaman dalam perbincangan mengenai MCP. Ia adalah komuniti yang menyokong di mana soalan dialu-alukan dan pengetahuan dikongsi dengan bebas. +Jika anda tersekat atau mempunyai sebarang pertanyaan tentang membina aplikasi AI. Sertai pelajar lain dan pembangun berpengalaman dalam perbincangan tentang MCP. Ia adalah komuniti sokongan di mana soalan dialu-alukan dan pengetahuan dikongsi dengan bebas. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Jika anda mempunyai maklum balas produk atau kesilapan 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) @@ -267,5 +271,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 hendaklah dianggap sebagai sumber yang sah. Untuk maklumat penting, terjemahan profesional oleh manusia 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 ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang sahih. Untuk maklumat penting, 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 diff --git a/translations/tl/.co-op-translator.json b/translations/tl/.co-op-translator.json index 2b12e297c..3930d8486 100644 --- a/translations/tl/.co-op-translator.json +++ b/translations/tl/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2025-11-03T13:47:42+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T13:04:22+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "tl" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T18:04:36+00:00", + "translation_date": "2026-03-06T13:08:03+00:00", "source_file": "AGENTS.md", "language_code": "tl" }, @@ -516,8 +516,8 @@ "language_code": "tl" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T17:57:47+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T12:59:29+00:00", "source_file": "README.md", "language_code": "tl" }, diff --git a/translations/tl/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/tl/1-getting-started-lessons/1-intro-to-programming-languages/README.md index cd081627b..f1dca8c6c 100644 --- a/translations/tl/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/tl/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,105 +1,105 @@ -# Panimula sa Mga Wika ng Programming at Modernong Developer Tools +# Panimula sa Programming Languages at Modernong Developer Tools -Kamusta, hinaharap na developer! πŸ‘‹ Pwede ba akong magbahagi ng isang bagay na palaging nagbibigay sa akin ng kilig araw-araw? Malapit mo nang matuklasan na ang programming ay hindi lang tungkol sa mga computer – ito ay parang pagkakaroon ng superpowers para maisakatuparan ang mga pinakamalupit mong ideya! +Kumusta, hinaharap na developer! πŸ‘‹ Pwede ba kitang sabihing isang bagay na nagpapamanhid sa akin araw-araw? Malapit mo nang matuklasan na ang programming ay hindi lang tungkol sa mga kompyuter – ito ay tungkol sa pagkakaroon ng tunay na mga superpowers para buhayin ang pinakakatiwang-tawang ideya mo! -Alam mo yung sandali na ginagamit mo ang paborito mong app at parang ang lahat ay perpektong gumagana? Kapag pinindot mo ang isang button at may nangyayaring sobrang astig na magpapaisip sa'yo ng "wow, paano nila NAGAWA yun?" Well, may isang tao na katulad mo – marahil nakaupo sa paborito nilang coffee shop ng alas-dos ng umaga na may pangatlong tasa ng espresso – ang nagsulat ng code na lumikha ng mahika na iyon. At eto ang magpapasabog ng utak mo: sa pagtatapos ng araling ito, hindi mo lang maiintindihan kung paano nila ginawa iyon, kundi magiging excited ka na subukan ito mismo! +Alam mo ba yung sandali kapag ginagamit mo ang paborito mong app at lahat ay perpektong nagkakasya? Kapag itinap mo ang isang button at may mangyaring isang bagay na kahima-himala na magpapasabi sa'yo ng, "wow, paano nila 'yun ginawa?" Aba, isang taong katulad mo – malamang nasa paboritong coffee shop niya ng alas-dos ng umaga na may pangatlong espresso – ang nagsulat ng code na gumawa ng magic na 'yon. At heto ang magpapakuha ng iyong hininga: sa pagtatapos ng aralin na ito, hindi lang mo mauunawaan kung paano nila ginawa iyon, kundi ikaw ay magkakaroon ng kagustuhang subukan ito mismo! -Alam mo, naiintindihan ko kung bakit nakakatakot ang programming sa simula. Noong nagsimula ako, akala ko kailangan mong maging isang math genius o marunong mag-code mula limang taong gulang. Pero eto ang nagbago ng pananaw ko: ang programming ay parang pag-aaral ng bagong wika. Nagsisimula ka sa "hello" at "thank you," tapos natututo kang mag-order ng kape, at bago mo malaman, nakikipag-usap ka na tungkol sa malalalim na pilosopikal na usapan! Pero sa kasong ito, nakikipag-usap ka sa mga computer, at sa totoo lang? Sila ang pinaka-pasensyosong kausap – hindi sila humuhusga sa mga pagkakamali mo at palaging handang subukan ulit! +Tingnan mo, nauunawaan ko kung ang programming ay nakakatakot sa ngayon. Noong nagsimula ako, inisip ko talaga na kailangan mong maging isang math genius o kaya ay nagsimula ka nang mag-code mula pagkabata. Pero heto ang nagbago sa pananaw ko: ang programming ay katulad ng pag-aaral makipag-usap sa isang bagong wika. Nagsisimula ka sa "hello" at "thank you," pagkatapos ay hanggang sa umorder ng kape, at hindi mo namamalayan, nakikipag-usap ka na sa mga malalalim na pilosopikal na usapan! Pero sa kasong ito, nakikipag-usap ka sa mga kompyuter, at totoo? Sila ang pinakapasyenteng kasamahan sa usapan na makakasama mo – hindi nila hinuhusgahan ang iyong mga pagkakamali at palaging excited na subukan muli! -Ngayon, sisilipin natin ang mga kamangha-manghang tools na ginagawang posible ang modernong web development – at sobrang nakakaadik! Pinag-uusapan natin ang parehong editors, browsers, at workflows na ginagamit ng mga developer sa Netflix, Spotify, at sa paborito mong indie app studio araw-araw. At eto ang magpapasayaw sa'yo: karamihan sa mga propesyonal-grade, industry-standard tools na ito ay ganap na libre! +Ngayon, sisilipin natin ang mga kamangha-manghang tools na nagpapaganap ng modernong web development β€” hindi lang posible, kundi nakakaadik pa. Pinag-uusapan ko mismo ang mga eksaktong editors, browsers, at workflows na ginagamit ng mga developer sa Netflix, Spotify, at paborito mong indie app studio araw-araw. At heto ang bahagi na magpapasayaw sa'yo sa tuwa: karamihan sa mga professional-grade, industry-standard tools na ito ay ganap na libre! ![Intro Programming](../../../../translated_images/tl/webdev101-programming.d6e3f98e61ac4bff.webp) -> Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Your Programming Journey Today - section Discover - What is Programming: 5: You - Programming Languages: 4: You - Tools Overview: 5: You - section Explore - Code Editors: 4: You - Browsers & DevTools: 5: You + title Ang Iyong Paglalakbay sa Programming Ngayon + section Tuklasin + Ano ang Programming: 5: You + Mga Wika ng Programming: 4: You + Pangkalahatang-ideya ng Mga Kasangkapan: 5: You + section Galugarin + Mga Editor ng Code: 4: You + Mga Browser at DevTools: 5: You Command Line: 3: You - section Practice + section Magpraktis Language Detective: 4: You - Tool Exploration: 5: You - Community Connection: 5: You + Pagsisiyasat ng Kasangkapan: 5: You + Koneksyon sa Komunidad: 5: You ``` +## Tingnan Natin Kung Ano Na ang Alam Mo! -## Tingnan Natin Kung Ano na ang Alam Mo! +Bago tayo sumabak sa mga masayang bahagi, nais kong malaman – ano na ba ang alam mo tungkol sa mundo ng programming? At pakinggan mo, kung tinitingnan mo ang mga tanong na ito at iniisip mong "Wala talaga akong alam dito," ayos lang 'yan, perpekto nga! Ibig sabihin, nasa tamang lugar ka. Isipin mo ang quiz na ito bilang pag-stretch bago mag-ehersisyo – nagpapainit lang tayo ng brain muscles! -Bago tayo sumabak sa masayang bahagi, curious ako – ano na ang alam mo tungkol sa mundo ng programming? At pakinggan mo, kung tinitingnan mo ang mga tanong na ito at iniisip na "Wala akong ideya sa kahit ano dito," hindi lang okay iyon, kundi perpekto! Ibig sabihin nasa tamang lugar ka. Isipin ang quiz na ito na parang stretching bago mag-workout – pinapainit lang natin ang mga brain muscles! +[Take the pre-lesson quiz](https://ff-quizzes.netlify.app/web/) -[Kunin ang pre-lesson quiz](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) -## Ang Pakikipagsapalaran na Pupuntahan Natin Magkasama +## Ang Pakikipagsapalaran na Sasamahan Natin Ngayon -Okay, sobrang excited ako sa mga bagay na matutuklasan natin ngayon! Seryoso, gusto kong makita ang mukha mo kapag naintindihan mo ang ilang mga konsepto. Narito ang kamangha-manghang paglalakbay na pupuntahan natin: +Okay, sobra akong excited sa kung ano ang ating susuriin ngayon! Seryoso, sana makita ko ang iyong reaksiyon kapag may mga konsepto na biglang lumalabas sa iyo. Heto ang kahanga-hangang paglalakbay na sasamahan natin: -- **Ano ang programming (at bakit ito ang pinakamalupit na bagay kailanman!)** – Matutuklasan natin kung paano ang code ay literal na invisible magic na nagpapagana sa lahat ng bagay sa paligid mo, mula sa alarm na somehow alam na Lunes ng umaga hanggang sa algorithm na perpektong pumipili ng mga rekomendasyon sa Netflix mo -- **Mga wika ng programming at ang kanilang mga kahanga-hangang personalidad** – Isipin mo na parang pumasok ka sa isang party kung saan ang bawat tao ay may iba't ibang superpowers at paraan ng paglutas ng mga problema. Ganyan ang mundo ng programming languages, at magugustuhan mo silang makilala! -- **Ang mga pangunahing bahagi na gumagawa ng digital magic** – Isipin mo ito na parang ultimate creative LEGO set. Kapag naintindihan mo kung paano magkasya ang mga piraso, mare-realize mo na pwede kang gumawa ng kahit ano na iniisip mo -- **Mga propesyonal na tools na magpaparamdam sa'yo na parang binigyan ka ng wand ng wizard** – Hindi ako nagiging dramatic dito – ang mga tools na ito ay talagang magpaparamdam sa'yo na may superpowers ka, at ang pinakamagandang bahagi? Pareho ang ginagamit ng mga propesyonal! +- **Ano ba talaga ang programming (at bakit ito ang pinakakulit na bagay!)** – Tuklasin natin kung paano ang code ay literal na invisible magic na nagpapagana sa lahat ng bagay sa paligid mo, mula sa alarm na somehow alam na Lunes na ngayong umaga hanggang sa algorithm na perpektong pinipili ang mga rekomendasyon mo sa Netflix +- **Mga programming language at ang kanilang mga kamangha-manghang personalidad** – Isipin na pumapasok ka sa isang party kung saan bawat tao ay may iba't ibang superpowers at paraan ng paglutas ng problema. Ganyan ang mundo ng programming languages, at magugustuhan mo silang makilala! +- **Mga pangunahing sangkap na bumubuo ng digital magic** – Isipin mo ito bilang pinaka-kamangha-manghang LEGO set. Kapag naintindihan mo kung paano nag-uugnay ang mga piyesa, malalaman mong literally kayang itayo ang kahit ano na naiisip ng iyong imahinasyon +- **Mga propesyonal na tools na magpaparamdam sa'yo na para kang nabigyan ng wand ng wizard** – Hindi ako nagbibitiw ng drama dito – gagawing parang may superpowers ka talaga ng mga tools na ito, at ang pinakamahusay pa? Gamit din ito ng mga pro! -> πŸ’‘ **Eto ang bagay**: Huwag mo nang isipin na kailangan mong kabisaduhin ang lahat ngayon! Sa ngayon, gusto ko lang maramdaman mo ang excitement tungkol sa kung ano ang posible. Ang mga detalye ay natural na tatatak habang nagpa-practice tayo – ganito ang tunay na pag-aaral! +> πŸ’‘ **Heto ang mahalaga**: Huwag mo munang subukang tandaan ang lahat ngayon! Sa ngayon, gusto ko lang maramdaman mo ang spark ng excitement sa mga posibilidad. Kusang tatatak sa iyo ang mga detalye habang tayo ay nagsasanay nang magkasama – ganyan ang totoong pagkatuto! -> Pwede mong kunin ang araling ito sa [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> Pwede mong kunin ang araling ito sa [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -## Ano nga ba ang *Programming*? +## Ano Nga Ba Talaga ang Programming? -Sige, sagutin natin ang tanong na milyon ang halaga: ano nga ba ang programming? +Sige, sagutin natin ang mahalagang tanong: ano ba talaga ang programming? -Magbibigay ako ng kwento na nagbago ng pananaw ko tungkol dito. Noong nakaraang linggo, sinubukan kong ipaliwanag sa nanay ko kung paano gamitin ang bagong remote ng aming smart TV. Nahuli ko ang sarili kong nagsasabi ng mga bagay tulad ng "Pindutin ang pulang button, pero hindi yung malaking pulang button, yung maliit na pulang button sa kaliwa... hindi, sa kabila mong kaliwa... okay, ngayon pindutin mo ng dalawang segundo, hindi isa, hindi tatlo..." Pamilyar ba? πŸ˜… +Ibibigay ko sa'yo ang isang kuwento na nagbago nang lubusan ng pananaw ko tungkol dito. Noong nakaraang linggo, sinubukan kong ipaliwanag sa nanay ko kung paano gamitin ang bagong smart TV remote namin. Napansin kong nasasabi ko ng mga katulad nito, "Pindutin ang pulang button, pero hindi yung malaking pulang button, yung maliit na pulang button sa kaliwa... hindi, yung kabila mong kaliwa... okay, hawakan mo ngayon ng dalawang segundo, hindi isa, hindi tiga..." Pamilyar ba ito? πŸ˜… -Yan ang programming! Ito ang sining ng pagbibigay ng sobrang detalyado, step-by-step na mga instruksyon sa isang bagay na napaka-powerful pero kailangan ng lahat ng bagay na ipaliwanag nang perpekto. Pero sa halip na ipaliwanag sa nanay mo (na pwedeng magtanong ng "alin sa pulang button?!"), ipinaliwanag mo ito sa computer (na gagawin lang ang eksaktong sinabi mo, kahit na hindi eksaktong iyon ang ibig mong sabihin). +Iyan ang programming! Sining ng pagbibigay ng sobrang detalyadong mga hakbang-hakbang na tagubilin sa isang bagay na napakalakas ngunit kailangan ng lahat ng nasa detalye. Ngunit imbes na ipaliwanag mo ito sa nanay mo (na pwedeng magtanong ng "Aling pulang button?!"), ipinaliwanag mo ito sa kompyuter (na ginagawa lang ng eksakto ang sinasabi mo, kahit hindi mo ibig sabihin ng husto). -Eto ang nagpasabog ng utak ko noong una kong natutunan ito: ang mga computer ay talagang simple sa kanilang core. Literal na naiintindihan lang nila ang dalawang bagay – 1 at 0, na basically ay "oo" at "hindi" o "on" at "off." Yun lang! Pero eto ang nagiging magical – hindi natin kailangang magsalita sa 1s at 0s na parang nasa The Matrix tayo. Dito pumapasok ang **programming languages**. Parang pagkakaroon ng pinakamahusay na tagasalin sa mundo na nagko-convert ng mga normal na human thoughts mo sa computer language. +Hele, ito ang nagpahanga sa akin nang una kong matutunan ito: ang mga kompyuter ay talagang simple sa pinakapangunahing antas. Naiintindihan lang nila ang dalawa – 1 at 0, na halos "oo" at "hindi" o "bukas" at "patay." Iyon na lang! Ngunit dito nagiging mahika – hindi natin kailangang magsalita sa 1s at 0s na parang nasa The Matrix tayo. Dito pumapasok ang **programming languages** para tumulong. Sila ang parang pinakamahusay na tagapagsalin ng mundo na kinukuha ang iyong normal na mga ideya at isinasalin ito sa wika ng kompyuter. -At eto ang nagbibigay pa rin sa akin ng kilig tuwing umaga: literal na *lahat* ng digital sa buhay mo ay nagsimula sa isang tao na katulad mo, marahil nakasuot ng pajama na may tasa ng kape, nagta-type ng code sa kanilang laptop. Yung Instagram filter na nagpapaganda sa'yo? May nag-code niyan. Yung rekomendasyon na nagdala sa'yo sa bagong paborito mong kanta? Isang developer ang gumawa ng algorithm na iyon. Yung app na tumutulong sa'yo na hatiin ang bayarin sa hapunan kasama ang mga kaibigan? Yep, may nag-isip ng "ang hassle nito, siguro pwede ko itong ayusin" at pagkatapos... ginawa nila! +At heto ang nagbibigay sa akin ng tunay na kilabot tuwing umaga pag gising ko: literal na *lahat* ng digital sa iyong buhay ay nagsimula sa isang tao na katulad mo, malamang nakaupo sa kanilang pajama na may tasa ng kape, nagtatype ng code sa kanilang laptop. Yung Instagram filter na nagpapaganda sayo? May gumawa niyan. Yung rekomendasyong nagdala sa'yo sa bagong paborito mong kanta? Ang developer ang gumawa ng algorithm na iyon. Yung app na tutulong sa'yo hatiin ang bayarin sa hapunan kasama ang mga kaibigan? Oo, may nag-isip ng "naiinis ako dito, kaya kaya kong ayusin ito" at nagawa! -Kapag natutunan mong mag-program, hindi ka lang nakakakuha ng bagong skill – nagiging bahagi ka ng kamangha-manghang komunidad ng mga problem-solvers na iniisip araw-araw, "Paano kaya kung makakagawa ako ng isang bagay na magpapasaya sa araw ng iba?" Sa totoo lang, may mas cool pa ba sa ganun? +Kapag natutunan mong mag-program, hindi ka lang natututo ng bagong kasanayan – nagiging bahagi ka ng isang kahanga-hangang komunidad ng mga tagalutas ng problema na ginugugol ang araw nila sa pag-iisip, "Paano kaya makabuo ako ng isang bagay na gagawing mas maganda ang araw ng isang tao?" Seryoso, may mas cool pa ba d'yan? -βœ… **Huntahan ng Fun Fact**: Eto ang sobrang astig na hanapin kapag may libreng oras ka – sino sa tingin mo ang unang computer programmer sa mundo? Bibigyan kita ng hint: baka hindi mo inaasahan! Ang kwento sa likod ng taong ito ay sobrang fascinating at nagpapakita na ang programming ay palaging tungkol sa creative problem-solving at pag-iisip sa labas ng kahon. +βœ… **Fun Fact Hunt**: Heto ang isang napaka-cool na dapat mong hanapin kapag may libreng oras ka – sino kaya ang unang computer programmer sa mundo? Bibigyan kita ng hint: hindi ito yung inaasahan mo! Ang kuwento tungkol sa taong ito ay kamangha-mangha at nagpapakita na ang programming ay palaging tungkol sa malikhaing paglutas ng problema at pag-iisip sa labas ng kahon. -### 🧠 **Check-in Time: Kamusta ang Pakiramdam Mo?** +### 🧠 **Oras ng Check-in: Kumusta Ka Na?** -**Mag-reflect saglit:** -- Naiintindihan mo na ba ang ideya ng "pagbibigay ng instruksyon sa mga computer"? -- May maisip ka bang pang-araw-araw na gawain na gusto mong i-automate gamit ang programming? -- Anong mga tanong ang bumubuo sa isip mo tungkol sa programming? +**Maglaan ng sandali at pag-isipan:** +- Naiintindihan mo na ba ang ideya ng "pagbibigay ng tagubilin sa mga kompyuter" ngayon? +- Ano ang isang araw-araw na gawain na gusto mong automate gamit ang programming? +- Ano ang mga tanong na sumisibol sa isipan mo tungkol sa programming? -> **Tandaan**: Normal lang kung may mga konsepto na medyo malabo pa ngayon. Ang pag-aaral ng programming ay parang pag-aaral ng bagong wika – kailangan ng oras para mabuo ng utak mo ang mga neural pathways. Ang galing mo! +> **Tandaan**: Normal lang kung medyo malabo pa ang ilang konsepto ngayon. Ang pag-aaral ng programming ay parang pag-aaral ng bagong wika – kailangan ng oras para mabuo ng utak mo ang mga neural pathways. Magaling ka na! -## Ang Mga Programming Languages ay Parang Iba't Ibang Flavors ng Mahika +## Ang Programming Languages ay Parang Iba't Ibang Lasa ng Mahika -Okay, medyo weird ito pero sundan mo ako – ang mga programming languages ay parang iba't ibang uri ng musika. Isipin mo: may jazz, na smooth at improvisational, rock na powerful at straightforward, classical na elegant at structured, at hip-hop na creative at expressive. Ang bawat style ay may sariling vibe, sariling komunidad ng passionate fans, at bawat isa ay perpekto para sa iba't ibang mood at okasyon. +Okay, medyo kakaiba itong marinig, pero sundan mo lang ako – ang programming languages ay parang iba't ibang uri ng musika. Isipin mo: meron kang jazz na smooth at improbisasyonal, rock na makapangyarihan at direktang pakinggan, classical na elegante at may istruktura, at hip-hop na malikhain at ekspresibo. Ang bawat estilo ay may kanya-kanyang vibe, komunidad ng mahihilig, at tama para sa iba't ibang mood at okasyon. -Ganyan din ang programming languages! Hindi mo gagamitin ang parehong language para gumawa ng masayang mobile game na gagamitin mo para mag-crunch ng massive na climate data, tulad ng hindi mo tutugtugin ang death metal sa yoga class (well, karamihan ng yoga classes anyway! πŸ˜„). +Ganyan din ang pag-andar ng programming languages! Hindi mo gagamitin ang parehong wika para gumawa ng masayang mobile game na gagamitin mo naman sa pagproseso ng napakalaking datos ng klima, katulad ng di mo aawitin ang death metal sa yoga class (kahit karamihan ng yoga classes lang! πŸ˜„). -Pero eto ang sobrang nakakabaliw tuwing iniisip ko ito: ang mga languages na ito ay parang pagkakaroon ng pinaka-pasensyosong, pinakamatalinong interpreter sa mundo na laging nasa tabi mo. Pwede mong ipahayag ang mga ideya mo sa paraang natural sa utak ng tao, at sila ang bahala sa sobrang komplikadong trabaho ng pag-convert nito sa 1s at 0s na naiintindihan ng mga computer. Parang may kaibigan ka na fluent sa parehong "human creativity" at "computer logic" – at hindi sila napapagod, hindi kailangan ng coffee breaks, at hindi ka hinuhusgahan sa paulit-ulit na tanong! +Pero ito ang palaging nagpapahanga sa akin tuwing naiisip ko ito: ang mga wikang ito ay parang may pinaka-pasyenteng, matalinong interpreter sa mundo na nakaupo sa tabi mo. Puwede mong ipahayag ang mga ideya mo sa paraan na natural sa tao mong utak, at sila ang humahawak sa napaka-komplikadong gawain ng pagsasalin nito sa 1s at 0s na talagang nauunawaan ng kompyuter. Parang may kaibigang dalubhasa sa parehong "human creativity" at "computer logic" – at hindi sila napapagod, hindi kailangan ng coffee breaks, at hindi ka hinuhusgahan kapag paulit-ulit mong tinanong ang parehong tanong! -### Mga Popular na Programming Languages at Kanilang Gamit +### Mga Sikat na Programming Languages at Kanilang Gamit ```mermaid mindmap root((Programming Languages)) Web Development JavaScript - Frontend Magic + Salamangka sa Frontend Interactive Websites TypeScript JavaScript + Types Enterprise Apps Data & AI Python - Data Science + Agham ng Datos Machine Learning - Automation + Awtomasyon R - Statistics - Research + Estadistika + Pananaliksik Mobile Apps Java Android @@ -108,76 +108,74 @@ mindmap iOS Apple Ecosystem Kotlin - Modern Android + Makabagong Android Cross-platform Systems & Performance C++ - Games + Laro Performance Critical Rust - Memory Safety + Kaligtasan sa Memorya System Programming Go Cloud Services Scalable Backend ``` - -| Wika | Pinakamahusay Para sa | Bakit Popular | -|------|-----------------------|---------------| -| **JavaScript** | Web development, user interfaces | Tumatakbo sa browsers at nagpapagana ng interactive websites | -| **Python** | Data science, automation, AI | Madaling basahin at matutunan, malalakas na libraries | +| Language | Pinakamainam Para sa | Bakit Ito Popular | +|----------|----------------------|-------------------| +| **JavaScript** | Web development, user interfaces | Tumatakbo sa browsers at nagpapatakbo ng interactive websites | +| **Python** | Data science, automation, AI | Madaling basahin at pag-aralan, maraming makapangyarihang libraries | | **Java** | Enterprise applications, Android apps | Platform-independent, matibay para sa malalaking sistema | | **C#** | Windows applications, game development | Malakas na suporta mula sa Microsoft ecosystem | -| **Go** | Cloud services, backend systems | Mabilis, simple, dinisenyo para sa modernong computing | +| **Go** | Cloud services, backend systems | Mabilis, simple, disenyo para sa modernong computing | ### High-Level vs. Low-Level Languages -Okay, eto ang konsepto na talagang nagpaikot ng utak ko noong nagsimula ako, kaya ibabahagi ko ang analogy na nagpa-click sa akin – at sana makatulong din sa'yo! +Okay, ito ang konsepto na sumira sa utak ko nung una akong nagsimula, kaya ibabahagi ko ang analogy na sa wakas ay naintindihan ko – sana makatulong din ito sa'yo! -Isipin mo na bumisita ka sa isang bansa kung saan hindi mo alam ang wika, at desperately kailangan mong hanapin ang pinakamalapit na banyo (lahat tayo napunta na sa ganitong sitwasyon, di ba? πŸ˜…): +Isipin mong bumisita ka sa isang bansa kung saan hindi ka marunong magsalita ng wika, at desperado kang hanapin ang pinakamalapit na banyo (naranasan na nating lahat ito, 'di ba? πŸ˜…): -- **Low-level programming** ay parang pag-aaral ng lokal na dialect nang sobrang husay na kaya mong makipag-usap sa lola na nagtitinda ng prutas sa kanto gamit ang cultural references, lokal na slang, at inside jokes na naiintindihan lang ng mga lumaki doon. Sobrang impressive at sobrang efficient... kung fluent ka! Pero medyo overwhelming kapag naghahanap ka lang ng banyo. +- **Low-level programming** ay parang pag-aaral ng lokal na dialekto nang husto upang makipag-usap sa lola na nagtitinda ng prutas na gumagamit ng mga lokal na salita, slang, at mga biro na tanging mga tunay na lumaki doon lang ang makakaintindi. Sobrang kahanga-hanga at epektibo... kung bihasa ka nga! Pero sobrang overwhelming kung ang hanap mo lang ay banyo. -- **High-level programming** ay parang pagkakaroon ng amazing na lokal na kaibigan na gets ka. Pwede mong sabihin "Kailangan ko talagang hanapin ang restroom" sa plain English, at sila ang bahala sa cultural translation at magbibigay ng direksyon sa paraang naiintindihan ng utak mo. +- **High-level programming** ay parang may kamangha-manghang lokal na kaibigan na nakakaintindi sa'yo. Puwede mong sabihin sa plain English na "Kailangan ko talaga ng banyo," at siya ang hahawak sa pagsasalin ng kultura at pagbibigay ng direksyon sa paraang maiintindihan ng iyong utak na hindi lokal. -Sa programming terms: -- **Low-level languages** (tulad ng Assembly o C) ay nagbibigay-daan sa'yo na magkaroon ng sobrang detalyadong usapan sa actual hardware ng computer, pero kailangan mong mag-isip na parang makina, na... well, sabihin na lang natin na malaking mental shift ito! -- **High-level languages** (tulad ng JavaScript, Python, o C#) ay nagbibigay-daan sa'yo na mag-isip na parang tao habang sila ang bahala sa machine-speak sa likod ng eksena. Plus, may mga sobrang welcoming na komunidad na puno ng mga tao na naaalala kung paano maging bago at talagang gustong tumulong! +Sa programming: +- **Low-level languages** (tulad ng Assembly o C) ay nagbibigay daan sa'yo na magkaroon ng napakadetalyadong pag-uusap sa hardware ng kompyuter mismo, pero kailangan mong mag-isip na parang makina, at well, malaking mental shift 'yan! +- **High-level languages** (tulad ng JavaScript, Python, o C#) ay pinapayagan kang mag-isip gaya ng tao habang sila ang nag-aasikaso ng pagsasalita ng makina sa likod ng mga eksena. Bukod dito, may mga napaka-welcoming na komunidad ng mga tao na naaalala kung paano maging baguhan at talagang nais tumulong! -Hulaan mo kung alin ang irerekomenda kong simulan mo? πŸ˜‰ Ang high-level languages ay parang training wheels na hindi mo gustong tanggalin dahil mas enjoyable ang buong experience! +Hulaan mo kung alin ang ire-rekomenda kong simulang gamitin? πŸ˜‰ Ang high-level languages ay parang may training wheels ka na ayaw mo nang tanggalin dahil ginagawa nitong mas masaya ang buong experience! ```mermaid flowchart TB - A["πŸ‘€ Human Thought:
'I want to calculate Fibonacci numbers'"] --> B{Choose Language Level} + A["πŸ‘€ Kaisipan ng Tao:
'Gusto kong kwentahin ang mga Fibonacci number'"] --> B{Piliin ang Antas ng Wika} - B -->|High-Level| C["🌟 JavaScript/Python
Easy to read and write"] - B -->|Low-Level| D["βš™οΈ Assembly/C
Direct hardware control"] + B -->|Mataas na Antas| C["🌟 JavaScript/Python
Madaling basahin at isulat"] + B -->|Mababang Antas| D["βš™οΈ Assembly/C
Direktang kontrol sa hardware"] - C --> E["πŸ“ Write: fibonacci(10)"] - D --> F["πŸ“ Write: mov r0,#00
sub r0,r0,#01"] + C --> E["πŸ“ Isulat: fibonacci(10)"] + D --> F["πŸ“ Isulat: mov r0,#00
sub r0,r0,#01"] - E --> G["πŸ€– Computer Understanding:
Translator handles complexity"] + E --> G["πŸ€– Pag-unawa ng Kompyuter:
Tagasalin ang humahawak ng komplikasyon"] F --> G - G --> H["πŸ’» Same Result:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["πŸ’» Parehong Resulta:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` +### Ipapakita Ko Sa Iyo Kung Bakit Mas Friendly ang High-Level Languages -### Ipakita Ko sa'yo Kung Bakit Mas Friendly ang High-Level Languages - -Alright, ipapakita ko sa'yo ang isang bagay na perpektong nagpapakita kung bakit na-inlove ako sa high-level languages, pero una – kailangan mo akong pangakuan ng isang bagay. Kapag nakita mo ang unang code example, huwag kang mag-panic! Dapat itong mukhang intimidating. Yan ang punto na ginagawa ko! +Sige, ipapakita ko sa'yo ang isang bagay na malinaw na nagpapakita kung bakit na-in love ako sa high-level languages, pero bago iyon – kailangan mo munang pangako. Kapag nakita mo ang unang halimbawa ng code, huwag kang mag-panic! Nakakakita ito ng nakakatakot. Iyan ang eksaktong punto na gusto kong ipakita! -Titingnan natin ang parehong task na isinulat sa dalawang magkaibang style. Parehong gumagawa ng tinatawag na Fibonacci sequence – ito ay isang magandang mathematical pattern kung saan ang bawat numero ay ang kabuuan ng dalawang nauna: 0, 1, 1, 2, 3, 5, 8, 13... (Fun fact: makikita mo ang pattern na ito literal na kahit saan sa kalikasan – sunflower seed spirals, pinecone patterns, kahit ang paraan ng pagbuo ng mga galaxy!) +Titingnan natin ang parehong gawain na isinulat sa dalawang ganap na magkaibang estilo. Pareho nilang nililikha ang tinatawag na Fibonacci sequence – isang magandang pattern sa matematika kung saan ang bawat numero ay ang kabuuan ng dalawang nauna: 0, 1, 1, 2, 3, 5, 8, 13... (Fun fact: makikita mo ang pattern na ito kahit saan sa kalikasan – sa spiral ng mga sunflower seeds, pattern ng mga pinecones, pati sa pagkabuo ng mga galaxy!) -Handa ka na bang makita ang pagkakaiba? Tara na! +Handa ka nang makita ang pagkakaiba? Tara! -**High-level language (JavaScript) – Friendly sa Tao:** +**High-level language (JavaScript) – Madaling maintindihan:** ```javascript -// Step 1: Basic Fibonacci setup +// Hakbang 1: Pangunahing pagsasaayos ng Fibonacci const fibonacciCount = 10; let current = 0; let next = 1; @@ -185,32 +183,32 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**Eto ang ginagawa ng code na ito:** -- **Magdeklara** ng constant para tukuyin kung ilang Fibonacci numbers ang gusto nating i-generate -- **Mag-initialize** ng dalawang variables para i-track ang kasalukuyan at susunod na numero sa sequence -- **Mag-set up** ng starting values (0 at 1) na nagde-define ng Fibonacci pattern -- **Mag-display** ng header message para tukuyin ang output natin +**Ito ang ginagawa ng code na ito:** +- **Nagdeklara** ng constant para tukuyin kung ilang Fibonacci numbers ang gustong gawin +- **Nag-initialize** ng dalawang variables para subaybayan ang kasalukuyan at susunod na numero sa sequence +- **Nagdagdag** ng panimulang halaga (0 at 1) na tumutukoy sa Fibonacci pattern +- **Nagpakita** ng header message para malaman ang output ```javascript -// Step 2: Generate the sequence with a loop +// Hakbang 2: Bumuo ng sunod-sunod gamit ang loop for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Calculate next number in sequence + // Kalkulahin ang susunod na numero sa sunod-sunod const sum = current + next; current = next; next = sum; } ``` -**Paghiwa-hiwalay ng nangyayari dito:** -- **Mag-loop** sa bawat posisyon sa sequence gamit ang `for` loop -- **Mag-display** ng bawat numero kasama ang posisyon nito gamit ang template literal formatting -- **Mag-calculate** ng susunod na Fibonacci number sa pamamagitan ng pagdagdag ng kasalukuyan at susunod na values -- **Mag-update** ng tracking variables para lumipat sa susunod na iteration +**Paglabag sa mga nangyayaring ito:** +- **Ulit-ulitin** ang bawat posisyon sa sequence gamit ang `for` loop +- **Ipakita** ang bawat numero kasama ang posisyon gamit ang template literal formatting +- **Kalkulahin** ang susunod na Fibonacci number sa pagdaragdag ng kasalukuyan at susunod na halaga +- **I-update** ang mga variable na sumusubaybay upang lumipat sa susunod na iteration ```javascript -// Step 3: Modern functional approach +// Hakbang 3: Makabagong functional na pamamaraan const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -221,18 +219,18 @@ const generateFibonacci = (count) => { return sequence; }; -// Usage example +// Halimbawa ng paggamit const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**Sa itaas, ginawa natin ang:** -- **Paglikha** ng reusable function gamit ang modernong arrow function syntax -- **Pagbuo** ng array para i-store ang buong sequence sa halip na i-display isa-isa -- **Paggamit** ng array indexing para i-calculate ang bawat bagong numero mula sa mga naunang values -- **Pag-return** ng buong sequence para sa flexible na paggamit sa ibang bahagi ng programa +**Sa itaas, ginawa natin:** +- **Gumawa** ng reusable na function gamit ang modernong arrow function syntax +- **Nagtayo** ng array para i-store ang buong sequence sa halip na ipakita isa-isa +- **Ginamit** ang array indexing para kalkulahin ang bawat bagong numero mula sa mga naunang halaga +- **Ibinalik** ang buong sequence para sa flexible na paggamit sa ibang bahagi ng programa natin -**Low-level language (ARM Assembly) – Friendly sa Computer:** +**Low-level language (ARM Assembly) – Para sa kompyuter:** ```assembly area ascen,code,readonly @@ -259,127 +257,127 @@ back add r0,r1 end ``` -Pansinin kung paano ang JavaScript version ay parang English instructions, habang ang Assembly version ay gumagamit ng cryptic commands na direktang kumokontrol sa processor ng computer. Parehong nagagawa ang parehong task, pero ang high-level language ay mas madaling maintindihan, isulat, at i-maintain. +Pansinin kung paano ang JavaScript version ay halos parang English instructions habang ang Assembly version ay gumagamit ng mga cryptic na command na direktang kumokontrol sa processor ng kompyuter. Parehong nagagawa ang parehong gawain, pero ang high-level language ay mas madali maintindihan, isulat, at i-maintain ng mga tao. -**Mga pangunahing pagkakaiba na mapapansin mo:** -- **Readability**: Ang JavaScript ay gumagamit ng mga descriptive names tulad ng `fibonacciCount` habang ang Assembly ay gumagamit ng cryptic labels tulad ng `r0`, `r1` -- **Mga Komento**: Ang mga high-level na wika ay nagtataguyod ng mga paliwanag na komento na nagpapadali sa pag-unawa ng code. -- **Estruktura**: Ang lohikal na daloy ng JavaScript ay tumutugma sa paraan ng pag-iisip ng tao tungkol sa mga problema nang hakbang-hakbang. -- **Pagpapanatili**: Ang pag-update ng bersyon ng JavaScript para sa iba't ibang pangangailangan ay madali at malinaw. +**Pangunahing pagkakaiba na mapapansin mo:** +- **Nababasa nang madali**: Gumagamit ang JavaScript ng mga naglalarawang pangalan tulad ng `fibonacciCount` habang ang Assembly ay gumagamit ng cryptic na mga label tulad ng `r0`, `r1` +- **Mga Komento**: Hinikayat ng mga high-level na wika ang mga paliwanag na komento na nagpapadokumentaryo sa code mismo +- **Estruktura**: Ang lohikal na daloy ng JavaScript ay tumutugma sa paraan ng pag-iisip ng mga tao ng sunud-sunod na hakbang ng problema +- **Pagpapanatili**: Ang pag-update ng bersyon ng JavaScript para sa iba't ibang mga pangangailangan ay diretso at malinaw -βœ… **Tungkol sa Fibonacci sequence**: Ang napakagandang pattern ng numero na ito (kung saan ang bawat numero ay katumbas ng kabuuan ng dalawang nauna: 0, 1, 1, 2, 3, 5, 8...) ay literal na makikita *kahit saan* sa kalikasan! Makikita mo ito sa mga spiral ng sunflower, mga pattern ng pinecone, ang kurba ng mga shell ng nautilus, at maging sa paraan ng paglaki ng mga sanga ng puno. Nakakamangha kung paano nakakatulong ang matematika at code sa pag-unawa at paglikha ng mga pattern na ginagamit ng kalikasan upang lumikha ng kagandahan! +βœ… **Tungkol sa Fibonacci sequence**: Ang kahanga-hangang pattern na numerong ito (kung saan ang bawat numero ay katumbas ng suma ng dalawang nauna nito: 0, 1, 1, 2, 3, 5, 8...) ay literal na makikita *kahit saan* sa kalikasan! Makikita mo ito sa mga spiral ng sunflower, pattern ng pinecone, paraan ng pagkakurba ng nautilus shell, at maging sa paraan ng paglaki ng mga sanga ng puno. Nakakamangha kung paano makatutulong ang matematika at code upang maunawaan at makalikha muli ng mga pattern na ginagamit ng kalikasan para lumikha ng kagandahan! -## Ang Mga Pundasyon na Gumagawa ng Mahika +## Ang Mga Pangunahing Bahagi na Nagbibigay ng Salamangka -Sige, ngayong nakita mo na kung paano gumagana ang mga programming language, talakayin natin ang mga pangunahing bahagi na bumubuo sa bawat program na kailanman isinulat. Isipin ang mga ito bilang mahahalagang sangkap sa iyong paboritong recipe – kapag naintindihan mo kung ano ang ginagawa ng bawat isa, magagawa mong magbasa at magsulat ng code sa halos anumang wika! +Sige, ngayon na nakita mo na kung ano ang hitsura ng mga programming language sa aksyon, pag-usapan natin ang mga pundamental na bahagi ng halos bawat programang naisulat kailanman. Isipin mo ito bilang mga mahalagang sangkap sa iyong paboritong ulam – kapag naintindihan mo kung ano ang ginagawa ng bawat isa, magagawa mong magbasa at magsulat ng code sa halos anumang wika! -Parang pag-aaral ng grammar ng programming. Naalala mo ba noong nasa paaralan ka at natutunan mo ang tungkol sa mga pangngalan, pandiwa, at kung paano bumuo ng mga pangungusap? Ang programming ay may sarili nitong bersyon ng grammar, at sa totoo lang, mas lohikal at mas madaling intindihin kaysa sa grammar ng Ingles! πŸ˜„ +Para itong pag-aaral ng gramatika ng programming. Naalala mo noong nasa paaralan ka pa at natutunan ang tungkol sa mga pangngalan, pandiwa, at kung paano gumawa ng mga pangungusap? Ang programming ay may sarili nitong bersyon ng gramatika, at sa totoo lang, mas lohikal at maawain ito kumpara sa gramatika ng Ingles! πŸ˜„ -### Mga Pahayag: Ang Hakbang-hakbang na Instruksyon +### Mga Pahayag: Mga Hakbang-hakbang na Tagubilin -Magsimula tayo sa **mga pahayag** – ang mga ito ay parang mga indibidwal na pangungusap sa isang pag-uusap sa iyong computer. Ang bawat pahayag ay nagsasabi sa computer na gawin ang isang partikular na bagay, parang nagbibigay ng direksyon: "Lumiko sa kaliwa dito," "Huminto sa pulang ilaw," "Mag-park sa lugar na iyon." +Simulan natin sa **mga pahayag** – parang mga indibidwal na pangungusap sa isang pag-uusap sa iyong computer. Bawat pahayag ay nagsasabi sa computer na gawin ang isang partikular na bagay, parang nagbibigay ng mga direksyon: "Lumiko ka sa kaliwa dito," "Huminto sa pulang ilaw," "Mag-park sa lugar na iyon." -Ang gusto ko sa mga pahayag ay kung gaano kadaling basahin ang mga ito. Tingnan mo ito: +Ang gusto ko sa mga pahayag ay ang karaniwang pagiging madaling basahin nila. Tingnan mo ito: ```javascript -// Basic statements that perform single actions +// Mga pangunahing pahayag na nagsasagawa ng iisang aksyon const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` - -**Narito ang ginagawa ng code na ito:** -- **Magdeklara** ng constant variable para mag-imbak ng pangalan ng user -- **Magpakita** ng greeting message sa console output -- **Magkalkula** at mag-imbak ng resulta ng isang mathematical operation + +**Ganito ang ginagawa ng code na ito:** +- **Magdeklara** ng isang constant variable para sa pangalan ng user +- **Ipakita** ang greeting message sa console output +- **Kalkulahin** at iimbak ang resulta ng isang matematikal na operasyon ```javascript -// Statements that interact with web pages +// Mga pahayag na nakikipag-ugnayan sa mga pahina ng web document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` - -**Hakbang-hakbang, narito ang nangyayari:** -- **Baguhin** ang pamagat ng webpage na lumalabas sa browser tab -- **Palitan** ang kulay ng background ng buong page body + +**Sunod-sunod, ito ang nangyayari:** +- **Baguhin** ang pamagat ng webpage na nakikita sa browser tab +- **Palitan** ang kulay ng background ng buong katawan ng pahina ### Mga Variable: Sistema ng Memorya ng Iyong Programa -Okay, **mga variable** ay isa sa mga paborito kong konsepto na ituro dahil ang mga ito ay parang mga bagay na ginagamit mo na araw-araw! +O sige, ang **mga variable** ay isa sa mga paborito kong konsepto na ituro dahil talagang parang mga bagay na ginagamit mo na araw-araw! -Isipin ang listahan ng mga contact sa iyong telepono. Hindi mo naman kabisado ang mga numero ng lahat – sa halip, sine-save mo ang "Nanay," "Best Friend," o "Pizza Place na Bukas Hanggang 2 AM" at hinahayaan ang telepono mo na tandaan ang aktwal na mga numero. Ganito rin gumagana ang mga variable! Ang mga ito ay parang mga lalagyan na may label kung saan maaaring mag-imbak ng impormasyon ang iyong programa at kunin ito gamit ang pangalan na may kahulugan. +Isipin mo ang listahan ng kontak sa iyong telepono. Hindi mo kailangang alalahanin ang bawat numero ng telepono – sa halip, sine-save mo ang "Nanay," "Pinakamatalik na Kaibigan," o "Pizza Place That Delivers Until 2 AM" at hinahayaan mong alalahanin ng iyong telepono ang aktwal na mga numero. Ganon din ang mga variable! Mga lalagyan na may label kung saan pwedeng mag-imbak ng impormasyon ang iyong programa at kunin ito mamaya gamit ang pangalang madaling maintindihan. -Narito ang talagang cool: ang mga variable ay maaaring magbago habang tumatakbo ang iyong programa (kaya nga tinawag na "variable" – gets mo ba?). Parang ina-update mo ang contact ng pizza place kapag nakahanap ka ng mas maganda, ang mga variable ay maaaring ma-update habang natututo ang iyong programa ng bagong impormasyon o habang nagbabago ang mga sitwasyon! +Ang talagang astig dito: maaaring magbago ang mga variable habang tumatakbo ang iyong programa (kaya 'variable' ang pangalan – nakikita mo?). Parang pag-update mo ng contact sa pizza place kapag may mas magandang napuntahan, puwedeng baguhin ang mga variable habang natututo ang programa ng bagong impormasyon o nagbabago ang mga sitwasyon! -Hayaan mo akong ipakita kung gaano kasimple ito: +Ipakikita ko sa'yo kung gaano ito kapadaling gawin: ```javascript -// Step 1: Creating basic variables +// Hakbang 1: Gumagawa ng mga pangunahing variable const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` - -**Pag-unawa sa mga konsepto:** -- **Mag-imbak** ng mga hindi nagbabagong halaga sa `const` variables (tulad ng pangalan ng site) -- **Gamitin** ang `let` para sa mga halaga na maaaring magbago sa buong programa -- **Mag-assign** ng iba't ibang uri ng data: strings (text), numbers, at booleans (true/false) -- **Pumili** ng mga deskriptibong pangalan na nagpapaliwanag kung ano ang nilalaman ng bawat variable + +**Pag-unawa sa mga konseptong ito:** +- **Imbak** ang mga hindi nagbabagong halaga gamit ang `const` variables (tulad ng pangalan ng site) +- **Gamitin** ang `let` para sa mga halagang puwedeng magbago habang tumatakbo ang programa +- **Mag-assign** ng iba't ibang uri ng data: strings (teksto), numero, at boolean (true/false) +- **Pumili** ng mga naglalarawang pangalan na nagpapaliwanag kung ano ang nilalaman ng bawat variable ```javascript -// Step 2: Working with objects to group related data +// Hakbang 2: Paggawa sa mga object para pagsamahin ang magkakaugnay na datos const weatherData = { location: "San Francisco", humidity: 65, windSpeed: 12 }; ``` - -**Sa itaas, ginawa natin ang:** -- **Lumikha** ng object para pagsama-samahin ang mga kaugnay na impormasyon ng panahon -- **Ayusin** ang maraming piraso ng data sa ilalim ng isang pangalan ng variable -- **Gamitin** ang key-value pairs para malinaw na ma-label ang bawat piraso ng impormasyon + +**Sa itaas, ginawa natin:** +- **Lumikha** ng isang object para pagsamahin ang mga kaugnay na impormasyon ng weather +- **Iayos** ang maraming piraso ng data sa ilalim ng iisang pangalan ng variable +- **Gamitin** ang mga key-value pairs para malinaw na pangalanan ang bawat bahagi ng impormasyon ```javascript -// Step 3: Using and updating variables +// Hakbang 3: Paggamit at pag-update ng mga variable console.log(`${siteName}: Today is ${currentWeather} and ${temperature}Β°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Updating changeable variables +// Pag-update ng mga nababagong variable currentWeather = "cloudy"; temperature = 68; ``` - -**Unawain natin ang bawat bahagi:** -- **Ipakita** ang impormasyon gamit ang template literals na may `${}` syntax -- **I-access** ang mga property ng object gamit ang dot notation (`weatherData.windSpeed`) -- **I-update** ang mga variable na dineklara gamit ang `let` para ipakita ang nagbabagong kondisyon -- **Pagsamahin** ang maraming variable para makagawa ng makabuluhang mga mensahe + +**Unawain natin bawat bahagi:** +- **Ipakita** ang impormasyon gamit ang template literals na may `${}` syntax +- **I-access** ang mga property ng object gamit ang dot notation (`weatherData.windSpeed`) +- **I-update** ang mga variable na dineklara gamit ang `let` para ipakita ang nagbabagong kalagayan +- **Pagsamahin** ang maraming variable para makalikha ng makahulugang mga mensahe ```javascript -// Step 4: Modern destructuring for cleaner code +// Hakbang 4: Modernong destructuring para sa mas malinis na kodigo const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` + +**Mga kailangang malaman:** +- **I-extract** ang mga espesyal na property mula sa mga object gamit ang destructuring assignment +- **Lumikha** ng mga bagong variable nang awtomatiko gamit ang mga parehong pangalan tulad ng mga key ng object +- **Papasimplehin** ang code sa pamamagitan ng pag-iwas sa paulit-ulit na dot notation -**Ang kailangan mong malaman:** -- **Kunwari** ang mga partikular na property mula sa mga object gamit ang destructuring assignment -- **Lumikha** ng mga bagong variable nang awtomatiko gamit ang parehong mga pangalan ng key ng object -- **Pagandahin** ang code sa pamamagitan ng pag-iwas sa paulit-ulit na dot notation - -### Control Flow: Turuan ang Iyong Programa na Mag-isip +### Control Flow: Pagtuturo sa Iyong Programa na Mag-isip -Okay, dito nagiging sobrang kamangha-mangha ang programming! **Control flow** ay ang pagtuturo sa iyong programa kung paano gumawa ng matatalinong desisyon, katulad ng ginagawa mo araw-araw nang hindi mo namamalayan. +Sige, dito talagang nakakamangha ang programming! Ang **control flow** ay parang pagtuturo sa iyong programa kung paano gumawa ng matalinong mga desisyon, katulad ng ginagawa mo araw-araw kahit hindi mo iniisip. -Isipin ito: ngayong umaga malamang na dumaan ka sa ganito, "Kung umuulan, magdadala ako ng payong. Kung malamig, magsusuot ako ng jacket. Kung late na ako, hindi na ako mag-aalmusal at bibili na lang ng kape sa daan." Ang utak mo ay natural na sumusunod sa ganitong if-then logic nang maraming beses araw-araw! +Isipin mo ito: kaninang umaga marahil nag-isip ka ng mga katulad nito, "Kung umuulan, kukuha ako ng payong. Kung malamig, magsusuot ako ng jacket. Kung nahuhuli ako, hindi na ako kakain ng almusal at kukuha na lang ng kape sa daan." Natural na sinusunod ng iyong utak ang ganitong if-then logic nang maraming beses bawat araw! -Ito ang nagpaparamdam sa mga programa na matalino at buhay sa halip na sumusunod lang sa isang boring na script. Maaari nilang tingnan ang isang sitwasyon, suriin kung ano ang nangyayari, at tumugon nang naaangkop. Parang binibigyan mo ang iyong programa ng utak na maaaring umangkop at gumawa ng mga desisyon! +Ito ang dahilan kung bakit parang may katalinuhan ang mga programa at hindi lang sumusunod sa nakababagot, predictable na script. Kaya nilang tingnan ang sitwasyon, suriin ang nangyayari, at tumugon ng naaayon. Parang binibigyan mo ang iyong programa ng utak na kaya nitong mag-adapt at gumawa ng mga pagpili! -Gusto mo bang makita kung gaano kaganda ang gumagana nito? Hayaan mo akong ipakita: +Gusto mo bang makita kung gaano ito kaganda gumana? Ipakikita ko sa’yo: ```javascript -// Step 1: Basic conditional logic +// Hakbang 1: Pangunahing lohika ng kundisyon const userAge = 17; if (userAge >= 18) { @@ -389,15 +387,15 @@ if (userAge >= 18) { console.log(`You'll be able to vote in ${yearsToWait} year(s).`); } ``` - -**Narito ang ginagawa ng code na ito:** -- **Suriin** kung ang edad ng user ay nakakatugon sa kinakailangan para bumoto -- **Ipatupad** ang iba't ibang code blocks batay sa resulta ng kondisyon -- **Kalkulahin** at ipakita kung gaano katagal bago maging kwalipikado sa pagboto kung wala pang 18 -- **Magbigay** ng tiyak at kapaki-pakinabang na feedback para sa bawat sitwasyon + +**Ganito ang ginagawa ng code na ito:** +- **Suriin** kung ang edad ng user ay sapat na para bumoto +- **Isakatuparan** ang iba't ibang mga block ng code depende sa resulta ng kondisyon +- **Kalkulahin** at ipakita kung gaano katagal hanggang maging karapat-dapat sa pagboto kung wala pa sa 18 +- **Magbigay** ng tiyak at kapaki-pakinabang na feedback para sa bawat scenario ```javascript -// Step 2: Multiple conditions with logical operators +// Hakbang 2: Maramihang mga kondisyon gamit ang mga lohikal na operator const userAge = 17; const hasPermission = true; @@ -409,26 +407,26 @@ if (userAge >= 18 && hasPermission) { console.log("Sorry, you must be at least 16 years old."); } ``` - -**Paghiwa-hiwalay kung ano ang nangyayari dito:** -- **Pagsamahin** ang maraming kondisyon gamit ang `&&` (and) operator -- **Lumikha** ng hierarchy ng mga kondisyon gamit ang `else if` para sa maraming sitwasyon -- **I-handle** ang lahat ng posibleng kaso gamit ang huling `else` statement -- **Magbigay** ng malinaw at maaksiyong feedback para sa bawat iba't ibang sitwasyon + +**Suriin natin kung ano ang nangyayari dito:** +- **Pagsamahin** ang maraming kondisyon gamit ang `&&` (at) operator +- **Gumawa** ng hierarchy ng mga kondisyon gamit ang `else if` para sa iba't ibang mga scenario +- **Hawakan** ang lahat ng posibleng kaso gamit ang huling `else` na pahayag +- **Magbigay** ng malinaw at maaksyong feedback para sa bawat ibang sitwasyon ```javascript -// Step 3: Concise conditional with ternary operator +// Hakbang 3: Maikling kondisyon gamit ang ternary operator const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` - -**Ang kailangan mong tandaan:** -- **Gamitin** ang ternary operator (`? :`) para sa simpleng dalawang opsyon na kondisyon -- **Isulat** ang kondisyon muna, kasunod ang `?`, pagkatapos ang true result, pagkatapos ang `:`, pagkatapos ang false result -- **I-apply** ang pattern na ito kapag kailangan mong mag-assign ng mga halaga batay sa mga kondisyon + +**Kailangang tandaan:** +- **Gamitin** ang ternary operator (`? :`) para sa simpleng dalawang-opisyong mga kondisyon +- **Isulat** ang kondisyon muna, sinusundan ng `?`, pagkatapos ang true result, pagkatapos ay `:`, at pagkatapos ang false result +- **I-apply** ang pattern na ito kapag kailangan mong mag-assign ng halaga base sa mga kondisyon ```javascript -// Step 4: Handling multiple specific cases +// Hakbang 4: Paghawak ng maraming partikular na kaso const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -447,58 +445,57 @@ switch (dayOfWeek) { console.log("Invalid day of the week"); } ``` + +**Nagagawa ng code na ito:** +- **Itugma** ang halaga ng variable sa maraming tiyak na kaso +- **I-grupo** ang magkatulad na mga kaso (mga araw sa trabaho vs. weekend) +- **Isagawa** ang angkop na block ng code kapag may nahanap na tugma +- **Isama** ang `default` na kaso para hawakan ang hindi inaasahang mga halaga +- **Gamitin** ang mga `break` na pahayag upang pigilan ang code na magpatuloy sa susunod na kaso -**Ang code na ito ay nagagawa ang mga sumusunod:** -- **Itugma** ang halaga ng variable sa maraming partikular na kaso -- **Pagsamahin** ang mga magkatulad na kaso (weekdays vs. weekends) -- **Ipatupad** ang naaangkop na code block kapag may natagpuang tugma -- **Isama** ang `default` case para sa mga hindi inaasahang halaga -- **Gamitin** ang `break` statements para pigilan ang code na magpatuloy sa susunod na kaso - -> πŸ’‘ **Analohiya sa Totoong Buhay**: Isipin ang control flow na parang ang pinaka-mahinahon na GPS na nagbibigay sa iyo ng direksyon. Maaari nitong sabihin, "Kung may trapiko sa Main Street, dumaan sa highway. Kung may construction sa highway, subukan ang scenic route." Ang mga programa ay gumagamit ng eksaktong parehong uri ng conditional logic para tumugon nang matalino sa iba't ibang sitwasyon at palaging magbigay sa mga user ng pinakamahusay na karanasan. +> πŸ’‘ **Halimbawa mula sa totoong mundo**: Isipin ang control flow na parang pinaka-mapagpasensyang GPS sa mundo na nagbibigay sa'yo ng mga direksyon. Sabi nito, "Kung may traffic sa Main Street, dumaan ka na lang sa highway. Kung may konstruksiyon na sumasakop sa highway, subukan mo ang tanawin na ruta." Ginagamit ng mga programa ang eksaktong ganitong conditional logic upang tumugon nang matalino sa mga iba't ibang sitwasyon at palaging ibigay ang pinakamahusay na karanasan sa mga gumagamit. -### 🎯 **Pag-check ng Konsepto: Mastery ng Mga Pundasyon** +### 🎯 **Pagsusulit sa Konsepto: Pagsasanay ng Mga Pangunahing Bahagi** -**Tingnan natin kung paano ka sa mga pundasyon:** -- Kaya mo bang ipaliwanag ang pagkakaiba ng variable at pahayag sa sarili mong mga salita? -- Mag-isip ng isang sitwasyon sa totoong buhay kung saan gagamit ka ng if-then na desisyon (tulad ng halimbawa sa pagboto) -- Ano ang isang bagay tungkol sa lohika ng programming na nagulat ka? +**Tingnan natin kung paano mo nauunawaan ang mga pundasyon:** +- Kaya mo bang ipaliwanag ang pagkakaiba ng variable at pahayag gamit ang sarili mong salita? +- Mag-isip ng tunay na sitwasyon kung saan gagamitin mo ang if-then decision (tulad ng halimbawa tungkol sa pagboto) +- Ano ang isang bagay tungkol sa lohika ng programming na ikinagulat mo? -**Mabilis na pampalakas ng kumpiyansa:** +**Mabilis na pampalakas ng loob:** ```mermaid flowchart LR - A["πŸ“ Statements
(Instructions)"] --> B["πŸ“¦ Variables
(Storage)"] --> C["πŸ”€ Control Flow
(Decisions)"] --> D["πŸŽ‰ Working Program!"] + A["πŸ“ Mga Pahayag
(Mga Panuto)"] --> B["πŸ“¦ Mga Baryabol
(Imbakan)"] --> C["πŸ”€ Daloy ng Kontrol
(Mga Desisyon)"] --> D["πŸŽ‰ Gumaganang Programa!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 -``` +``` +βœ… **Ano ang susunod na darating**: Magkakaroon tayo ng malaking saya habang lalalim pa tayo sa mga konseptong ito habang nagpapatuloy ang ating kamangha-manghang paglalakbay! Sa ngayon, ituon mo muna ang sarili sa excitement tungkol sa lahat ng mga kamangha-manghang posibilidad na naghihintay sa'yo. Kusang matututunan ang mga espesipikong kasanayan at teknik habang magkasama tayong nagsasanay – nangangako ako na magiging mas masaya ito kaysa sa inaasahan mo! -βœ… **Ang susunod na darating**: Magkakaroon tayo ng sobrang saya sa paglalim sa mga konseptong ito habang patuloy ang kamangha-manghang paglalakbay na ito! Sa ngayon, mag-focus lang sa pakiramdam ng excitement tungkol sa lahat ng mga kamangha-manghang posibilidad sa hinaharap. Ang mga partikular na kasanayan at teknika ay natural na mananatili habang tayo ay nagsasanay nang magkasama – ipinapangako ko na magiging mas masaya ito kaysa sa inaasahan mo! +## Mga Kagamitan sa Trabaho -## Mga Kasangkapan sa Trabaho +Sige, dito na talaga ako nagiging sobrang excited na halos hindi ko na mapigilan ang sarili ko! πŸš€ Pag-uusapan natin ang mga kahanga-hangang kagamitan na magpaparamdam sa'yo na parang nabigyan ka ng susi sa isang digital na spaceship. -Sige, dito ako sobrang excited na halos hindi ko mapigilan ang sarili ko! πŸš€ Pag-uusapan natin ang mga kamangha-manghang kasangkapan na magpaparamdam sa iyo na parang binigyan ka ng susi sa isang digital spaceship. +Alam mo kung paano ang chef ay may mga perpektong balanse na kutsilyo na parang bahagi na ng kanilang mga kamay? O kung paanong ang isang musikero ay may gitarang parang kumakanta sa galaw lamang ng kanilang kamay? Sa mga developer, meron kaming sariling bersyon ng mga ganitong mahikang kagamitan, at ito ang magpapahanga sa’yo nang labis – karamihan sa mga ito ay libre! -Alam mo kung paano ang isang chef ay may mga perpektong balanseng kutsilyo na parang extension ng kanilang mga kamay? O kung paano ang isang musikero ay may isang gitara na parang kumakanta sa sandaling hawakan nila ito? Well, ang mga developer ay may sarili naming bersyon ng mga mahiwagang kasangkapan, at narito ang magpapamangha sa iyo – karamihan sa mga ito ay ganap na libre! +Halos tumatalon ako sa upuan sa saya na maibahagi ito sa'yo dahil binago nito nang husto kung paano tayo bumubuo ng software. Pinag-uusapan natin ang mga AI-powered na katuwang sa pagsulat ng code (hindi ako nagbibiro!), mga cloud environments kung saan maaari kang bumuo ng buong applications mula sa kahit saan basta may Wi-Fi, at mga debugging tools na sobrang sopistikado na parang may X-ray vision ka para sa iyong mga programa. -Halos tumatalon ako sa upuan ko sa pag-iisip na ibahagi ang mga ito sa iyo dahil lubos nilang binago kung paano kami bumubuo ng software. Pinag-uusapan natin ang mga AI-powered coding assistants na maaaring tumulong sa pagsulat ng iyong code (hindi ako nagbibiro!), mga cloud environment kung saan maaari kang bumuo ng buong aplikasyon mula sa kahit saan basta may Wi-Fi, at mga debugging tools na sobrang sopistikado na parang may X-ray vision para sa iyong mga programa. - -At narito ang bahagi na nagbibigay pa rin sa akin ng kilabot: ang mga ito ay hindi "beginner tools" na iyong lalampasan. Ang mga ito ay eksaktong parehong mga kasangkapan na ginagamit ng mga developer sa Google, Netflix, at sa indie app studio na gusto mo sa mismong sandaling ito. Magiging pakiramdam mo na parang isang pro sa paggamit ng mga ito! +At ito ang bahagi na nagpapahanga sa akin: hindi ito mga "kagamitan para sa nagsisimula" na lalampasan mo lang. Ito ang eksaktong mga professional-grade na kagamitan na ginagamit ng mga developer sa Google, Netflix, at sa indie app studio na paborito mo sa kasalukuyan. Parang sobra kang magiging propesyonal sa paggamit nila! ```mermaid graph TD - A["πŸ’‘ Your Idea"] --> B["⌨️ Code Editor
(VS Code)"] - B --> C["🌐 Browser DevTools
(Testing & Debugging)"] - C --> D["⚑ Command Line
(Automation & Tools)"] - D --> E["πŸ“š Documentation
(Learning & Reference)"] - E --> F["πŸš€ Amazing Web App!"] + A["πŸ’‘ Ang Iyong Ideya"] --> B["⌨️ Code Editor
(VS Code)"] + B --> C["🌐 Browser DevTools
(Pagsusuri at Pag-debug)"] + C --> D["⚑ Command Line
(Awtomasyon at Mga Kasangkapan)"] + D --> E["πŸ“š Dokumentasyon
(Pagkatuto at Sanggunian)"] + E --> F["πŸš€ Kamangha-manghang Web App!"] B -.-> G["πŸ€– AI Assistant
(GitHub Copilot)"] - C -.-> H["πŸ“± Device Testing
(Responsive Design)"] + C -.-> H["πŸ“± Pagsusuri ng Device
(Responsive Design)"] D -.-> I["πŸ“¦ Package Managers
(npm, yarn)"] - E -.-> J["πŸ‘₯ Community
(Stack Overflow)"] + E -.-> J["πŸ‘₯ Komunidad
(Stack Overflow)"] style A fill:#fff59d style F fill:#c8e6c9 @@ -506,156 +503,155 @@ graph TD style H fill:#f3e5f5 style I fill:#ffccbc style J fill:#e8eaf6 -``` +``` +### Mga Code Editor at IDE: Mga Bagong Digital na Kaibigan Mo -### Mga Code Editor at IDE: Ang Iyong Bagong Digital na Kaibigan +Pag-usapan natin ang mga code editor – ito talaga ang magiging bagong paborito mong lugar na titirhan! Isipin mo ito bilang iyong personal na sanctuary sa coding kung saan mo ginugugol ang karamihan ng oras mo sa paglikha at pagpapahusay ng iyong mga digital na likha. -Pag-usapan natin ang mga code editor – ang mga ito ay seryosong magiging iyong bagong paboritong lugar na tambayan! Isipin ang mga ito bilang iyong personal na coding sanctuary kung saan gugugol ka ng karamihan ng iyong oras sa paglikha at pagperpekto ng iyong mga digital na likha. +Ngunit ang talagang mahika ng mga modernong editor: hindi lang sila basta mga magandang text editor. Parang may pinakamahusay na sumusuportang mentor sa coding na nakaupo lang sa tabi mo 24/7. Nahuhuli nila ang iyong mga typo bago mo pa mapansin, nagmumungkahi ng mga pag-ayos na magpapagawa sa'yo na parang henyo, tinutulungan kang maintindihan kung ano ang ginagawa ng bawat bahagi ng code, at may ilan na maaari pang hulaan kung ano ang susulat mo at nag-aalok na tapusin ang mga naiisip mo! -Pero narito ang talagang mahiwaga tungkol sa mga modernong editor: hindi lang sila magarbong text editor. Parang may pinakamatalino, supportive na coding mentor na nakaupo sa tabi mo 24/7. Nahuhuli nila ang iyong mga typo bago mo pa mapansin, nagmumungkahi ng mga pagpapabuti na magpaparamdam sa iyo na parang henyo, tumutulong sa iyo na maunawaan kung ano ang ginagawa ng bawat piraso ng code, at ang ilan sa kanila ay maaaring hulaan pa kung ano ang susunod mong itatype at mag-alok na tapusin ang iyong iniisip! +Naalala ko noong unang beses kong natuklasan ang auto-completion – ang pakiramdam ko ay para akong nasa hinaharap. Sisimulan mo lang magsulat, saka sasabihin ng editor, "Uy, ito ba ang function na iniisip mo na gumagawa ng eksaktong kailangan mo?" Parang may reader ng isip bilang coding buddy mo! -Naalala ko noong una kong natuklasan ang auto-completion – literal na pakiramdam ko ay nasa hinaharap na ako. Nagsisimula kang mag-type ng isang bagay, at sinasabi ng editor mo, "Hoy, iniisip mo ba ang function na ito na eksaktong kailangan mo?" Parang may mind reader bilang coding buddy mo! +**Ano ang gumagawa sa mga editor na ito na kamangha-mangha?** -**Ano ang nagpapaganda sa mga editor na ito?** +Nag-aalok ang mga modernong code editor ng kahanga-hangang mga katangian na idinisenyo para mapabilis ang iyong produktibidad: -Ang mga modernong code editor ay nag-aalok ng kahanga-hangang hanay ng mga tampok na idinisenyo upang mapalakas ang iyong produktibidad: +| Katangian | Ano ang Ginagawa Nito | Bakit Ito Nakakatulong | +|---------|--------------|--------------| +| **Syntax Highlighting** | Kulayan ang iba't ibang bahagi ng iyong code | Ginagawa itong mas madaling basahin at tuklasin ang mga error | +| **Auto-completion** | Nagmumungkahi ng code habang nagsusulat ka | Pinapabilis ang coding at binabawasan ang typo | +| **Debugging Tools** | Tinutulungan kang mahanap at ayusin ang mga error | Nagtitipid ng oras sa pag-troubleshoot | +| **Extensions** | Nagdaragdag ng mga specialized na feature | Inaangkop ang iyong editor para sa anumang teknolohiya | +| **AI Assistants** | Nagmumungkahi ng code at paliwanag | Pinapabilis ang pagkatuto at produktibidad | -| Tampok | Ano ang Ginagawa Nito | Bakit Ito Nakakatulong | -|-------|-----------------------|-----------------------| -| **Syntax Highlighting** | Kulayan ang iba't ibang bahagi ng iyong code | Ginagawang mas madali ang pagbabasa ng code at makita ang mga error | -| **Auto-completion** | Nagmumungkahi ng code habang nagta-type ka | Pinapabilis ang pag-code at binabawasan ang mga typo | -| **Mga Tool sa Debugging** | Tumutulong sa paghahanap at pag-aayos ng mga error | Nakakatipid ng oras sa pag-troubleshoot | -| **Mga Extension** | Nagdaragdag ng mga espesyal na tampok | I-customize ang editor para sa anumang teknolohiya | -| **AI Assistants** | Nagmumungkahi ng code at mga paliwanag | Pinapabilis ang pag-aaral at produktibidad | +> πŸŽ₯ **Video Resource**: Gusto mo bang makita ang mga gamit na ito sa aksyon? Tignan ang [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) para sa isang komprehensibong overview. -> πŸŽ₯ **Video Resource**: Gusto mo bang makita ang mga tool na ito sa aksyon? Tingnan ang [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) para sa isang komprehensibong overview. +#### Mga Inirekomendang Editor para sa Web Development -#### Mga Inirerekomendang Editor para sa Web Development +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Libre) +- Pinaka-popular sa mga web developer +- Mahusay na ecosystem ng extension +- Built-in na terminal at Git integration +- **Mga kailangang extension**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-powered na mga mungkahing code + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Kooperasyon sa real-time + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automatic na pag-format ng code + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Tagahanap ng typo sa code -**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Libre) -- Pinakapopular sa mga web developer -- Napakahusay na extension ecosystem -- Built-in terminal at Git integration -- **Mga kailangang extension**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-powered code suggestions - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Real-time collaboration - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automatic code formatting - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Nag-detect ng mga typo sa iyong code +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Bayad, libre para sa mga estudyante) +- Advanced na debugging at testing tools +- Matalinong auto completion ng code +- Built-in na version control -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (May bayad, libre para sa mga estudyante) -- Advanced debugging at testing tools -- Intelligent code completion -- Built-in version control +**Cloud-Based IDEs** (Iba't ibang presyo) +- [GitHub Codespaces](https://github.com/features/codespaces) - Buong VS Code sa browser mo +- [Replit](https://replit.com/) - Magaling para sa pag-aaral at pagbabahagi ng code +- [StackBlitz](https://stackblitz.com/) - Instant, full-stack na web development -**Cloud-Based IDEs** (Iba't ibang presyo) -- [GitHub Codespaces](https://github.com/features/codespaces) - Buong VS Code sa iyong browser -- [Replit](https://replit.com/) - Maganda para sa pag-aaral at pagbabahagi ng code -- [StackBlitz](https://stackblitz.com/) - Instant, full-stack web development +> πŸ’‘ **Tip sa Pagsisimula**: Magsimula sa Visual Studio Code – libre ito, malawak ang paggamit sa industriya, at may malaking komunidad na gumagawa ng mga kapaki-pakinabang na tutorial at extension. -> πŸ’‘ **Tip sa Pagsisimula**: Magsimula sa Visual Studio Code – ito ay libre, malawakang ginagamit sa industriya, at may malaking komunidad na gumagawa ng mga kapaki-pakinabang na tutorial at extension. +### Mga Web Browser: Iyong Sekretong Laboratoryo sa Pag-unlad -### Mga Web Browser: Ang Iyong Lihim na Laboratoryo sa Pag-develop +O sige, maghanda kang ma-wow nang husto! Alam mo kung paano mo ginagamit ang mga browser para mag-scroll sa social media at manood ng mga video? Ito pala ay itinago ang isang kahanga-hangang sekretong laboratoryo para sa mga developer na buong panahon ay naghihintay lang na madiskubre mo! -Okay, maghanda para sa isang mind-blowing na karanasan! Alam mo kung paano mo ginagamit ang mga browser para mag-scroll sa social media at manood ng mga video? Well, lumalabas na may tinatago silang kamangha-manghang lihim na laboratoryo ng developer na naghihintay lang na matuklasan mo! +Tuwing nag-right-click ka sa isang webpage at pinili ang "Inspect Element," binubuksan mo ang isang nakatagong mundo ng mga developer tools na tunay na mas makapangyarihan kaysa sa ilang mahal na software na dating binabayaran ko ng daan-daang dolyar. Para itong matuklasan na ang karaniwan mong kusina ay may itinatagong propesyonal na laboratoryo ng chef sa likod ng isang lihim na panel! +Nang unang ipakita sa akin ng isang tao ang browser DevTools, ginugol ko ang halos tatlong oras na nagki-click lang at nagsabing "HINTAY, KAYA NITO YAN?!" Literal mong ma-e-edit ang kahit anong website nang real-time, makita kung gaano kabilis mag-load ang lahat, subukan kung paano itsura ang site mo sa iba't ibang device, at maging debug ang JavaScript na parang pro na talaga. Talagang nakakagulat! -Tuwing mag-right-click ka sa isang webpage at piliin ang "Inspect Element," binubuksan mo ang isang nakatagong mundo ng mga developer tools na mas makapangyarihan pa kaysa sa ilang mahal na software na dati kong binabayaran ng daan-daang dolyar. Parang natuklasan mo na ang iyong ordinaryong kusina ay may nakatagong laboratoryo ng propesyonal na chef sa likod ng isang lihim na panel! -Noong unang ipinakita sa akin ang browser DevTools, ginugol ko ang halos tatlong oras sa kakaklik at sinasabi, "WAIT, KAYA NIYA RIN YUN?!" Literal na pwede mong i-edit ang kahit anong website nang real-time, makita kung gaano kabilis mag-load ang lahat, subukan kung paano ang hitsura ng site mo sa iba't ibang device, at kahit i-debug ang JavaScript na parang isang pro. Talagang nakakagulat! +**Ito ang dahilan kung bakit browsers ang iyong lihim na sandata:** -**Narito kung bakit ang mga browser ang iyong lihim na sandata:** +Kapag gumawa ka ng website o web application, kailangan mong makita kung paano ito itsura at asal sa totoong mundo. Hindi lang ipinapakita ng browsers ang iyong gawa, nagbibigay din ito ng detalyadong feedback tungkol sa performance, accessibility, at mga posibleng isyu. -Kapag gumagawa ka ng website o web application, kailangan mong makita kung paano ito tumatakbo sa totoong mundo. Hindi lang ipinapakita ng mga browser ang iyong gawa, nagbibigay din sila ng detalyadong feedback tungkol sa performance, accessibility, at mga posibleng isyu. +#### Browser Developer Tools (DevTools) -#### Mga Tool ng Browser Developer (DevTools) +Kasama sa mga modernong browser ang kumpletong development suites: -Ang mga modernong browser ay may kasamang komprehensibong development suites: - -| Kategorya ng Tool | Ano ang Ginagawa Nito | Halimbawa ng Paggamit | -|--------------------|-----------------------|-----------------------| -| **Element Inspector** | Tingnan at i-edit ang HTML/CSS nang real-time | Ayusin ang styling para makita agad ang resulta | -| **Console** | Tingnan ang mga error message at subukan ang JavaScript | I-debug ang mga problema at mag-eksperimento sa code | +| Tool Category | Ano ang Ginagawa Nito | Halimbawa ng Paggamit | +|---------------|----------------------|----------------------| +| **Element Inspector** | Tingnan at i-edit ang HTML/CSS nang real-time | Ayusin ang estilo para makita agad ang resulta | +| **Console** | Tingnan ang mga error message at subukan ang JavaScript | I-debug ang mga problema at magsubok ng code | | **Network Monitor** | Subaybayan kung paano naglo-load ang mga resources | I-optimize ang performance at oras ng pag-load | -| **Accessibility Checker** | Subukan ang inclusive design | Siguraduhing gumagana ang site mo para sa lahat ng user | -| **Device Simulator** | I-preview sa iba't ibang laki ng screen | Subukan ang responsive design nang hindi kailangan ng maraming device | +| **Accessibility Checker** | Subukan ang inclusive design | Siguraduhing gumagana ang site para sa lahat ng user | +| **Device Simulator** | Tingnan sa iba't ibang sukat ng screen | Subukan ang responsive design nang hindi nangangailangan ng maraming device | #### Mga Inirerekomendang Browser para sa Development -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Standard na DevTools sa industriya na may malawak na dokumentasyon -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Mahusay na CSS Grid at accessibility tools -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Batay sa Chromium na may mga resource mula sa Microsoft para sa mga developer +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Industry-standard DevTools na may malawak na dokumentasyon +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Napakahusay sa CSS Grid at accessibility tools +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Naka-base sa Chromium na may mga developer resources ng Microsoft -> ⚠️ **Mahalagang Tip sa Pagsusuri**: Laging subukan ang iyong mga website sa iba't ibang browser! Ang gumagana nang perpekto sa Chrome ay maaaring magmukhang iba sa Safari o Firefox. Ang mga propesyonal na developer ay nagsusuri sa lahat ng pangunahing browser upang matiyak ang pare-parehong karanasan ng user. +> ⚠️ **Mahalagang Tip sa Pagsusuri**: Palaging subukan ang iyong mga website sa maraming browser! Ang gumagana nang perpekto sa Chrome ay maaaring magmukhang iba sa Safari o Firefox. Sinusubukan ng mga propesyonal na developer sa lahat ng pangunahing browser para siguraduhin ang consistent na karanasan. -### Mga Tool sa Command Line: Ang Iyong Gateway sa Developer Superpowers +### Mga Command Line Tools: Ang Iyong Gate papuntang Developer Superpowers -Okay, magpakatotoo tayo tungkol sa command line, dahil gusto kong marinig mo ito mula sa isang taong talagang nakakaintindi. Noong una ko itong nakita – isang nakakatakot na itim na screen na may kumikislap na teksto – literal na naisip ko, "Hindi, hindi talaga! Mukha itong galing sa pelikula ng hacker noong 1980s, at siguradong hindi ako matalino para dito!" πŸ˜… +Sige, magkaroon tayo ng isang tapat na usapan tungkol sa command line, dahil gusto kong marinig mo ito mula sa isang taong tunay na nakakaintindi. Nang una kong makita ito – yung nakakatakot na itim na screen na kumikislap ang text – literal kong inisip, "Hindi, hindi talaga! Para ito sa pelikula ng hacker noong 1980s, at hindi ako sapat ang talino para dito!" πŸ˜… -Pero narito ang gusto kong sana sinabi sa akin noon, at sinasabi ko sa'yo ngayon: ang command line ay hindi nakakatakot – para kang nakikipag-usap nang direkta sa iyong computer. Isipin mo ito na parang pagkakaiba ng pag-order ng pagkain sa isang fancy app na may mga larawan at menu (na maganda at madali) kumpara sa pagpunta sa paborito mong lokal na restaurant kung saan alam ng chef ang gusto mo at kayang magluto ng perpekto sa simpleng pagsabi mo ng "surprise me with something amazing." +Pero heto ang gusto kong sana ay nasabi sa akin noon, at ngayon sinasabi ko sa iyo: hindi nakakatakot ang command line – parang isang direktang pag-uusap mo sa iyong computer ito. Isipin mo ito na parang pagkakaiba ng pag-order ng pagkain sa isang fancy na app na may mga larawan at menu (na madali at maganda) kumpara sa pagpasok mo sa paborito mong local na kainan kung saan kilala ng chef ang gusto mo at kayang lutuin agad ang espesyal na sorpresa sa sinabi mo lang na "surprise me with something amazing." -Ang command line ang lugar kung saan ang mga developer ay parang wizard. Magta-type ka ng ilang tila mahiwagang salita (okay, mga command lang sila, pero parang mahiwaga!), pindutin ang enter, at BOOM – nakagawa ka ng buong istruktura ng proyekto, naka-install ng makapangyarihang mga tool mula sa iba't ibang panig ng mundo, o na-deploy ang app mo sa internet para makita ng milyon-milyong tao. Kapag naranasan mo ang kapangyarihang iyon, talagang nakakaadik! +Dito sa command line pumupunta ang mga developer para maramdaman ang kanilang kapangyarihan. Magta-type ka lang ng ilang tila mahiwagang salita (okay, mga command lang sila, pero parang mahiwaga!), pindutin ang enter, at BOOM – nakagawa ka na ng buong project structure, naka-install ng mga makapangyarihang tools mula sa buong mundo, o nailunsad ang app mo sa internet para makita ng milyun-milyong tao. Kapag natikman mo na ang kapangyarihang iyon, adik ka na talaga! -**Bakit magiging paborito mo ang command line:** +**Bakit magiging paborito mong tool ang command line:** -Habang maganda ang graphical interfaces para sa maraming gawain, ang command line ay mahusay sa automation, precision, at bilis. Maraming development tools ang pangunahing gumagana sa pamamagitan ng command line interfaces, at ang pag-aaral kung paano gamitin ang mga ito nang epektibo ay maaaring lubos na mapabuti ang iyong produktibidad. +Habang maganda ang graphical interfaces para sa maraming gawain, nangingibabaw ang command line sa automation, katumpakan, at bilis. Maraming development tools ang gumagana gamit ang command line interfaces, at ang pag-aaral gamitin ito nang mahusay ay makakapagpataas nang husto ng iyong produktibidad. ```bash -# Step 1: Create and navigate to project directory +# Hakbang 1: Gumawa at mag-navigate sa direktoryo ng proyekto mkdir my-awesome-website cd my-awesome-website ``` **Ano ang ginagawa ng code na ito:** -- **Gumawa** ng bagong directory na tinatawag na "my-awesome-website" para sa iyong proyekto -- **Mag-navigate** sa bagong directory para simulan ang trabaho +- **Gumawa** ng bagong direktoryo na tinatawag na "my-awesome-website" para sa iyong proyekto +- **Pumaroon** sa bagong likhang direktoryo para simulan ang trabaho ```bash -# Step 2: Initialize project with package.json +# Hakbang 2: I-initialize ang proyekto gamit ang package.json npm init -y -# Install modern development tools +# Mag-install ng mga modernong kasangkapan sa pag-develop npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Hakbang-hakbang, narito ang nangyayari:** -- **I-initialize** ang bagong Node.js project gamit ang default settings sa pamamagitan ng `npm init -y` +**Hakbang-hakbang, ganito ang nangyayari:** +- **I-initialize** ang bagong Node.js project gamit ang default na settings gamit ang `npm init -y` - **I-install** ang Vite bilang modernong build tool para sa mabilis na development at production builds -- **Magdagdag** ng Prettier para sa automatic code formatting at ESLint para sa code quality checks -- **Gamitin** ang `--save-dev` flag para markahan ang mga ito bilang development-only dependencies +- **Idagdag** ang Prettier para sa automatic na pag-format ng code at ESLint para sa pagsusuri ng kalidad ng code +- **Gamitin** ang flag na `--save-dev` para markahan ito bilang development-only na dependencies ```bash -# Step 3: Create project structure and files +# Hakbang 3: Gumawa ng istruktura ng proyekto at mga file mkdir src assets echo 'My Site

Hello World

' > index.html -# Start development server +# Simulan ang development server npx vite ``` -**Sa itaas, ginawa natin ang:** -- **Inayos** ang proyekto sa pamamagitan ng paggawa ng hiwalay na mga folder para sa source code at assets -- **Nag-generate** ng basic HTML file na may tamang istruktura ng dokumento +**Sa itaas, ginawa namin ang mga sumusunod:** +- **Inayos** ang proyekto sa pamamagitan ng paggawa ng hiwalay na folders para sa source code at assets +- **Nagawa** ng basic na HTML file na may tamang istruktura ng dokumento - **Sinimulan** ang Vite development server para sa live reloading at hot module replacement #### Mahahalagang Command Line Tools para sa Web Development | Tool | Layunin | Bakit Kailangan Mo Ito | -|------|---------|-------------------------| -| **[Git](https://git-scm.com/)** | Version control | Subaybayan ang mga pagbabago, makipagtulungan sa iba, i-backup ang iyong trabaho | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime & package management | Patakbuhin ang JavaScript sa labas ng browser, mag-install ng modernong development tools | -| **[Vite](https://vitejs.dev/)** | Build tool & dev server | Napakabilis na development na may hot module replacement | -| **[ESLint](https://eslint.org/)** | Code quality | Awtomatikong hanapin at ayusin ang mga problema sa iyong JavaScript | -| **[Prettier](https://prettier.io/)** | Code formatting | Panatilihing maayos at nababasa ang iyong code | +|------|---------|-----------------------| +| **[Git](https://git-scm.com/)** | Version control | Subaybayan ang mga pagbabago, makipagtulungan, at backup ang trabaho | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime at package management | Patakbuhin ang JavaScript sa labas ng browser, i-install ang modernong development tools | +| **[Vite](https://vitejs.dev/)** | Build tool at dev server | Napakabilis na development na may hot module replacement | +| **[ESLint](https://eslint.org/)** | Kalidad ng code | Awtomatikong hanapin at ayusin ang mga problema sa iyong JavaScript | +| **[Prettier](https://prettier.io/)** | Pag-format ng code | Panatilihing konsistent ang format at nababasang mabuti ang code | -#### Mga Opsyon na Specific sa Platform +#### Mga Platform-Specific na Opsyon **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Moderno, mayaman sa feature na terminal -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** πŸ’» - Makapangyarihang scripting environment +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Moderno at maraming feature na terminal +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** πŸ’» - Malakas na scripting environment - **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** πŸ’» - Tradisyunal na Windows command line **macOS:** - **[Terminal](https://support.apple.com/guide/terminal/)** πŸ’» - Built-in na terminal application -- **[iTerm2](https://iterm2.com/)** - Pinahusay na terminal na may advanced features +- **[iTerm2](https://iterm2.com/)** - Pinalawak na terminal na may advanced features **Linux:** - **[Bash](https://www.gnu.org/software/bash/)** πŸ’» - Standard na Linux shell @@ -663,194 +659,194 @@ npx vite > πŸ’» = Pre-installed sa operating system -> 🎯 **Learning Path**: Simulan sa mga basic na command tulad ng `cd` (change directory), `ls` o `dir` (list files), at `mkdir` (gumawa ng folder). Magpraktis gamit ang mga modernong workflow command tulad ng `npm install`, `git status`, at `code .` (binubuksan ang kasalukuyang directory sa VS Code). Habang nagiging komportable ka, natural mong matututunan ang mas advanced na mga command at automation techniques. +> 🎯 **Learning Path**: Magsimula sa mga basic command tulad ng `cd` (palitan ng directory), `ls` o `dir` (ipakita ang mga files), at `mkdir` (gumawa ng folder). Mag-ensayo gamit ang modernong workflow commands gaya ng `npm install`, `git status`, at `code .` (bubuksan ang kasalukuyang directory sa VS Code). Kapag naging komportable ka na, natural mong matututunan ang mas advanced na mga command at automation techniques. -### Dokumentasyon: Ang Iyong Palaging Available na Mentor sa Pag-aaral +### Dokumentasyon: Ang Iyong Laging Nariyan na Learning Mentor -Okay, hayaan mo akong magbahagi ng isang lihim na magpapagaan ng pakiramdam mo bilang baguhan: kahit ang pinaka-experienced na mga developer ay gumugugol ng malaking bahagi ng kanilang oras sa pagbabasa ng dokumentasyon. At hindi ito dahil hindi nila alam ang kanilang ginagawa – ito ay tanda ng karunungan! +Sige, ibabahagi ko sa iyo ang isang maliit na sikreto na magpapagaan ng loob mo bilang isang baguhan: kahit ang pinaka-experienced na developer ay gumugugol ng malaking bahagi ng kanilang oras sa pagbabasa ng dokumentasyon. At hindi ito dahil hindi nila alam ang ginagawa nila – ito ay palatandaan ng karunungan! -Isipin ang dokumentasyon na parang may access ka sa mga pinaka-mahinahon at may kaalaman na guro sa mundo na available 24/7. Nahihirapan sa isang problema ng alas-dos ng umaga? Nandiyan ang dokumentasyon na may mainit na virtual na yakap at eksaktong sagot na kailangan mo. Gusto mong matutunan ang isang cool na bagong feature na pinag-uusapan ng lahat? Nandiyan ang dokumentasyon na may step-by-step na mga halimbawa. Sinusubukang intindihin kung bakit gumagana ang isang bagay sa ganitong paraan? Tama ka – handa ang dokumentasyon na ipaliwanag ito sa paraang magpapaklik sa'yo! +Isipin ang dokumentasyon na parang may access ka sa mga pinakapasyenteng at madalas sanang mga guro na available 24/7. Nabarahan ka ng problema sa alas-dos ng madaling araw? Naroon ang dokumentasyon na may mainit-init na virtual na yakap at eksaktong sagot na kailangan mo. Gusto mong matutunan ang tungkol sa pinakabagong feature na pinag-uusapan ng lahat? Sagot ka ng dokumentasyon na may step-by-step na mga halimbawa. Sinusubukan mong intindihin kung bakit gumagana ang isang bagay sa ganoong paraan? Siyempre, nandiyan ang dokumentasyon para ipaliwanag ito nang sa wakas ay mag-click sa iyo! -Narito ang isang bagay na lubos na nagbago ng aking pananaw: ang mundo ng web development ay gumagalaw nang napakabilis, at walang sinuman (ibig sabihin, wala talaga!) ang nagtatago ng lahat sa memorya. Nakita ko ang mga senior developer na may 15+ taon ng karanasan na naghahanap ng basic syntax, at alam mo kung ano? Hindi iyon nakakahiya – iyon ay matalino! Hindi ito tungkol sa pagkakaroon ng perpektong memorya; ito ay tungkol sa pag-alam kung saan makakahanap ng maaasahang sagot nang mabilis at pag-unawa kung paano ito ilapat. +Narito ang isang bagay na talagang nagbago ng aking pananaw: ang mundo ng web development ay napakabilis ang takbo, at wala (ibig sabihin, walang sinuman!) ang naka-memorize lahat. Nakita ko na ang mga senior developers na may higit 15 taong karanasan ay naghahanap pa rin ng basic syntax, at alam mo ba? Hindi ito nakakahiya – ito ay matalino! Hindi ito tungkol sa perfect memory; ito ay tungkol sa kung saan mabilis kang makakahanap ng maaasahang sagot at kung paano ito ilalapat. -**Narito kung saan nangyayari ang tunay na magic:** +**Dito nagaganap ang tunay na mahika:** -Ang mga propesyonal na developer ay gumugugol ng malaking bahagi ng kanilang oras sa pagbabasa ng dokumentasyon – hindi dahil hindi nila alam ang kanilang ginagawa, kundi dahil ang web development landscape ay mabilis na nagbabago kaya't ang pananatiling updated ay nangangailangan ng patuloy na pag-aaral. Ang mahusay na dokumentasyon ay tumutulong sa iyo na maunawaan hindi lang *paano* gamitin ang isang bagay, kundi *bakit* at *kailan* ito gamitin. +Ang mga propesyonal na developer ay gumugugol ng malaking bahagi ng kanilang oras sa pagbabasa ng dokumentasyon – hindi dahil hindi nila alam ang ginagawa nilang trabaho, kundi dahil napakabilis na nagbabago ang landscape ng web development kaya't ang manatiling up-to-date ay nangangailangan ng patuloy na pag-aaral. Mahusay na dokumentasyon ang tumutulong sa iyo na maintindihan hindi lang *paano* gagamitin ang isang bagay, kundi *bakit* at *kailan* gagamitin ito. -#### Mahahalagang Dokumentasyon na Resources +#### Mahahalagang Documentation Resources **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Ang gold standard para sa dokumentasyon ng web technology +- Ang gold standard para sa web technology documentation - Komprehensibong gabay para sa HTML, CSS, at JavaScript -- May kasamang impormasyon sa browser compatibility -- Nagtatampok ng mga praktikal na halimbawa at interactive na demo +- Kasama ang impormasyon tungkol sa compatibility ng browser +- May praktikal na mga halimbawa at interactive demos -**[Web.dev](https://web.dev)** (by Google) -- Mga modernong best practices sa web development -- Mga gabay sa performance optimization +**[Web.dev](https://web.dev)** (mula sa Google) +- Mga best practice para sa modernong web development +- Mga gabay sa pag-optimize ng performance - Mga prinsipyo ng accessibility at inclusive design -- Mga case study mula sa mga totoong proyekto +- Mga case study mula sa totoong proyekto **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Mga resource para sa Edge browser development -- Mga gabay sa Progressive Web App -- Mga insight sa cross-platform development +- Mga resources para sa pag-develop ng Edge browser +- Mga gabay para sa Progressive Web Apps +- Insights sa cross-platform development **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Mga structured learning curricula -- Mga video course mula sa mga eksperto sa industriya +- Structured na mga kurikulum sa pag-aaral +- Mga video courses mula sa eksperto sa industriya - Mga hands-on coding exercises -> πŸ“š **Study Strategy**: Huwag subukang i-memorize ang dokumentasyon – sa halip, matutong i-navigate ito nang epektibo. I-bookmark ang mga madalas gamitin na reference at magpraktis sa paggamit ng search functions para mabilis na mahanap ang partikular na impormasyon. +> πŸ“š **Strategiya sa Pag-aaral**: Huwag subukang i-memorize ang dokumentasyon – sa halip, matutong mag-navigate nito nang mahusay. I-bookmark ang mga madalas gamitin na references at magsanay sa paggamit ng search functions para mabilis makahanap ng partikular na impormasyon. -### πŸ”§ **Tool Mastery Check: Ano ang Nakakaengganyo sa Iyo?** +### πŸ”§ **Tool Mastery Check: Ano ang Pinakanakakaresonate sa Iyo?** -**Maglaan ng sandali para pag-isipan:** -- Aling tool ang pinaka-nakaka-excite subukan muna? (Walang maling sagot!) -- Ang command line ba ay nakakatakot pa rin, o interesado ka na dito? -- Naiisip mo bang gamitin ang browser DevTools para silipin ang likod ng paborito mong mga website? +**Maglaan ng sandali para isipin:** +- Aling tool ang pinakagusto mong subukan muna? (Walang maling sagot!) +- Nakakatakot pa rin ba ang command line, o naiintriga ka na ba rito? +- Maiimagine mo bang gamitin ang browser DevTools para tignan ang likod ng mga paborito mong website? ```mermaid -pie title "Developer Time Spent With Tools" - "Code Editor" : 40 - "Browser Testing" : 25 - "Command Line" : 15 - "Reading Docs" : 15 - "Debugging" : 5 +pie title "Oras na Ginugol ng Developer sa mga Kagamitan" + "Editor ng Kodigo" : 40 + "Pagsubok sa Browser" : 25 + "Linyang Pangkomando" : 15 + "Pagbabasa ng Dokumento" : 15 + "Pag-aayos ng Mali" : 5 ``` +> **Masayang insight**: Karamihan sa mga developer ay gumugugol ng mga 40% ng kanilang oras sa code editor, pero mapapansin mo na malaking bahagi ng oras ay napupunta sa pagsubok, pag-aaral, at paglutas ng problema. Ang programming ay hindi lang tungkol sa pagsusulat ng code – ito ay tungkol sa paggawa ng mga karanasan! -> **Nakakatuwang insight**: Karamihan sa mga developer ay gumugugol ng halos 40% ng kanilang oras sa kanilang code editor, pero pansinin kung gaano karaming oras ang napupunta sa pagsusuri, pag-aaral, at paglutas ng problema. Ang programming ay hindi lang tungkol sa pagsusulat ng code – ito ay tungkol sa paglikha ng mga karanasan! - -βœ… **Pag-isipan ito**: Narito ang isang kawili-wiling bagay na pag-isipan – paano mo iniisip na ang mga tool para sa paggawa ng mga website (development) ay maaaring naiiba sa mga tool para sa pagdidisenyo kung paano ito magmumukha (design)? Parang ang pagkakaiba ng pagiging arkitekto na nagdidisenyo ng magandang bahay at ang kontraktor na talagang gumagawa nito. Parehong mahalaga, pero kailangan ng magkaibang toolbox! Ang ganitong uri ng pag-iisip ay talagang makakatulong sa iyo na makita ang mas malaking larawan kung paano nabubuo ang mga website. +βœ… **Saloobin na dapat pag-isipan**: Narito ang isang bagay na dapat mong pagnilayan – paano kaya nagkakaiba ang mga tools para sa paggawa ng website (development) sa mga tools para sa pagdisenyo ng hitsura nito (design)? Para itong pagkakaiba ng arkitekto na nagdidisenyo ng magandang bahay at ng kontraktor na gumagawa nito. Parehong mahalaga, pero kailangan nila ng magkakaibang toolbox! Ang ganitong paraan ng pag-iisip ay talagang makakatulong sa iyo na makita ang mas malaking larawan kung paano nabubuo ang mga website. -## Hamon ng GitHub Copilot Agent πŸš€ +## GitHub Copilot Agent Challenge πŸš€ -Gamitin ang Agent mode para kumpletuhin ang sumusunod na hamon: +Gamitin ang Agent mode para tapusin ang sumusunod na hamon: -**Deskripsyon:** Tuklasin ang mga feature ng isang modernong code editor o IDE at ipakita kung paano nito mapapabuti ang iyong workflow bilang isang web developer. +**Deskripsyon:** Tuklasin ang mga tampok ng isang modernong code editor o IDE at ipakita kung paano nito mapapabuti ang iyong workflow bilang web developer. -**Prompt:** Pumili ng code editor o IDE (tulad ng Visual Studio Code, WebStorm, o isang cloud-based IDE). Maglista ng tatlong feature o extension na tumutulong sa iyo na magsulat, mag-debug, o mag-maintain ng code nang mas epektibo. Para sa bawat isa, magbigay ng maikling paliwanag kung paano ito nakakatulong sa iyong workflow. +**Prompt:** Pumili ng code editor o IDE (tulad ng Visual Studio Code, WebStorm, o isang cloud-based IDE). Ilahad ang tatlong features o extensions na tumutulong sa iyo na magsulat, mag-debug, o mag-maintain ng code nang mas epektibo. Para sa bawat isa, magbigay ng maikling paliwanag kung paano nito pinapabuti ang iyong workflow. --- ## πŸš€ Hamon -**Alright, detective, handa ka na ba sa iyong unang kaso?** +**Sige, detective, handa ka na ba sa iyong unang kaso?** -Ngayon na mayroon kang kahanga-hangang pundasyon, mayroon akong adventure na makakatulong sa iyo na makita kung gaano ka-diverse at kamangha-mangha ang programming world. At pakinggan mo – hindi pa ito tungkol sa pagsusulat ng code, kaya walang pressure doon! Isipin mo ang sarili mo bilang isang programming language detective sa iyong unang exciting na kaso! +Ngayon na meron ka nang napakagandang pundasyon, may isang adventure ako na makakatulong sa iyo na makita kung gaano talaga kahalaga at kaiba-iba ang mundo ng programming. At tandaan – hindi pa ito tungkol sa pagsusulat ng code, kaya walang pressure! Isipin mo ang sarili mo bilang isang programming language detective sa iyong unang kapanapanabik na kaso! -**Ang iyong misyon, kung pipiliin mong tanggapin ito:** -1. **Maging isang language explorer**: Pumili ng tatlong programming languages mula sa ganap na magkaibang mundo – marahil isa na gumagawa ng mga website, isa na gumagawa ng mga mobile app, at isa na nagpoproseso ng data para sa mga siyentipiko. Maghanap ng mga halimbawa ng parehong simpleng gawain na isinulat sa bawat wika. Pangako, mamamangha ka sa kung gaano sila kaiba habang ginagawa ang parehong bagay! +**Ang iyong misyon, kung tatanggapin mo ito:** +1. **Maging isang language explorer**: Pumili ng tatlong programming languages mula sa ganap na magkakaibang uniberso – siguro isang ginagamit para gumawa ng website, isang para sa paggawa ng mobile apps, at isang para sa pagproseso ng data para sa siyentipiko. Humanap ng mga halimbawa ng parehong simpleng gawain na nakasulat sa bawat wika. Pahangaing talaga ang sarili mo kung gaano sila kaiba habang pareho ang ginagawa! -2. **Tuklasin ang kanilang origin stories**: Ano ang nagpapasikat sa bawat wika? Narito ang isang cool na fact – bawat programming language ay nilikha dahil may nag-isip, "Alam mo ba? Dapat may mas magandang paraan para lutasin ang partikular na problemang ito." Kaya mo bang alamin kung ano ang mga problemang iyon? Ang ilan sa mga kuwentong ito ay talagang nakakatuwa! +2. **Alamin ang kanilang mga pinagmulan**: Ano ang nagpapaspecial sa bawat wika? Narito ang isang cool na katotohanan – bawat programming language ay ginawa dahil may nag-isip, "Alam mo, dapat may mas maganda pang paraan para lutasin ang partikular na problemang ito." Maiintindihan mo ba kung ano ang mga problemang iyon? Ang ilan sa mga kuwentong ito ay talagang nakakapanabik! -3. **Kilalanin ang mga komunidad**: Tingnan kung gaano ka-welcoming at passionate ang komunidad ng bawat wika. Ang iba ay may milyon-milyong developer na nagbabahagi ng kaalaman at tumutulong sa isa't isa, ang iba naman ay mas maliit pero sobrang close-knit at supportive. Magugustuhan mo ang makakita ng iba't ibang personalidad ng mga komunidad na ito! +3. **Kilalanin ang mga community**: Tingnan kung gaano kasarap at passionate ang bawat community ng mga language na ito. Ang iba ay may milyon-milyong developer na nagbabahagi ng kaalaman at nagtutulungan, ang iba naman ay mas maliit pero napakalapit at supportive. Magugustuhan mo ang iba't ibang personalidad ng mga komunidad na ito! -4. **Sundin ang iyong kutob**: Aling wika ang pinaka-approachable para sa iyo ngayon? Huwag mag-stress sa paggawa ng "perpektong" pagpili – sundin lang ang iyong instincts! Walang maling sagot dito, at palagi mong pwedeng tuklasin ang iba sa hinaharap. +4. **Sundin ang gut feeling mo**: Aling language ang pinaka-comfortable sa pakiramdam mo ngayon? Huwag mag-alala tungkol sa paggawa ng "perfect" na desisyon – pakinggan lang ang instincts mo! Talagang walang maling sagot dito, at maaari kang mag-explore ng iba pang wika mamaya. -**Bonus detective work**: Subukan mong tuklasin kung anong mga major websites o apps ang ginawa gamit ang bawat wika. Sigurado akong magugulat ka sa malaman kung ano ang nagpapatakbo sa Instagram, Netflix, o sa mobile game na hindi mo matigil sa paglalaro! +**Bonus detective work**: Tingnan kung makikita mo kung anong mga major websites o apps ang ginawa gamit ang bawat language. Garantiya, magugulat ka sa malalaman mo kung ano ang nagpapagana sa Instagram, Netflix, o yung mobile game na hindi mo mapigilang laruin! -> πŸ’‘ **Tandaan**: Hindi mo sinusubukang maging eksperto sa alinman sa mga wikang ito ngayon. Kilalanin mo lang ang lugar bago ka magdesisyon kung saan mo gustong mag-setup. Maglaan ng oras, mag-enjoy, at hayaan ang iyong curiosity na gabayan ka! +> πŸ’‘ **Tandaan**: Hindi mo kailangang maging eksperto sa alinman sa mga wikang ito ngayon. Kilalanin mo lang muna ang paligid bago ka magdesisyon kung saan ka magtatayo ng shop. Maglaan ng oras, magsaya, at hayaan ang iyong curiosity ang maggabay sa iyo! -## Ipagdiwang ang Iyong Natuklasan! +## Ipagdiwang natin ang Iyong Natuklasan! -Grabe, ang dami mong natutunan ngayong araw! Excited akong makita kung gaano karami sa kahanga-hangang paglalakbay na ito ang nanatili sa iyo. At tandaan – hindi ito isang pagsusulit kung saan kailangan mong maging perpekto. Mas parang selebrasyon ito ng lahat ng cool na bagay na natutunan mo tungkol sa kamangha-manghang mundong papasukin mo! +Grabe, ang dami mong natutunan na kahanga-hanga ngayon! Talagang excited ako na makita kung gaano karami ang tumatak sa iyo sa kahanga-hangang paglalakbay na ito. At tandaan – hindi ito isang pagsusulit kung saan kailangang perfect ang iyong sagot. Isa itong selebrasyon ng lahat ng cool na bagay na natutunan mo tungkol sa kahanga-hangang mundong ito na iyong susubukan! -[Kunin ang post-lesson quiz](https://ff-quizzes.netlify.app/web/) -## Review & Pag-aaral sa Sarili +[Take the post-lesson quiz](https://ff-quizzes.netlify.app/web/) -**Maglaan ng oras para mag-explore at mag-enjoy!** +## Review & Self Study -Marami kang natutunan ngayong araw, at dapat mo itong ipagmalaki! Ngayon ang masayang bahagi – ang pag-explore sa mga paksa na nagpasiklab ng iyong interes. Tandaan, hindi ito takdang-aralin – ito ay isang pakikipagsapalaran! +**Maglaan ng oras para mag-explore at magsaya!** +Nasaklaw mo ang maraming bagay ngayon, at iyon ay isang bagay na dapat ipagmalaki! Ngayon naman ay ang masayang bahagi – ang pagsaliksik sa mga paksang nagpalakas ng iyong kuryosidad. Tandaan, ito ay hindi takdang-aralin – ito ay isang pakikipagsapalaran! -**Mas malalim na pag-aaral sa mga bagay na kinagigiliwan mo:** +**Sumisid nang mas malalim sa mga bagay na nagpapasaya sa iyo:** -**Subukan ang mga programming language:** -- Bisitahin ang mga opisyal na website ng 2-3 programming language na nagustuhan mo. Bawat isa ay may sariling personalidad at kwento! -- Subukan ang mga online coding playground tulad ng [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), o [Replit](https://replit.com/). Huwag matakot mag-eksperimento – wala kang masisira! -- Magbasa tungkol sa kung paano nagsimula ang paborito mong programming language. Totoo, ang ilan sa mga kwentong ito ay nakakatuwa at makakatulong sa iyong maunawaan kung bakit gumagana ang mga language sa ganitong paraan. +**Magsanay gamit ang mga programming language:** +- Bisitahin ang mga opisyal na website ng 2-3 na mga lengguwaheng nakatawag-pansin sa iyo. Bawat isa ay may kanya-kanyang personalidad at kwento! +- Subukan ang ilang online coding playgrounds tulad ng [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), o [Replit](https://replit.com/). Huwag matakot mag-eksperimento – hindi mo masisira ang kahit ano! +- Basahin kung paano nagsimula ang iyong paboritong lengguwahe. Talaga, ang ilan sa mga kwento ng pinagmulan ay kawili-wili at makakatulong sa iyo na maunawaan kung bakit gumagana ang mga lengguwahe sa ganoong paraan. -**Sanayin ang sarili sa mga bagong tools:** -- I-download ang Visual Studio Code kung hindi mo pa nagagawa – libre ito at magugustuhan mo ito! -- Maglaan ng ilang minuto para mag-browse sa Extensions marketplace. Para itong app store para sa iyong code editor! -- Buksan ang Developer Tools ng iyong browser at mag-click-click lang. Huwag mag-alala kung hindi mo pa naiintindihan ang lahat – magpakilala ka lang sa kung ano ang nandiyan. +**Magsanay gamit ang mga bagong kagamitan:** +- I-download ang Visual Studio Code kung hindi mo pa nagagawa – libre ito at tiyak na magugustuhan mo! +- Maglaan ng ilang minuto sa pag-browse sa Extensions marketplace. Parang app store ito para sa iyong code editor! +- Buksan ang Developer Tools ng iyong browser at mag-click-click lang. Huwag mag-alala kung hindi mo maintindihan lahat – maging pamilyar ka lang sa mga naroon. **Sumali sa komunidad:** -- Sundan ang ilang developer communities sa [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), o [GitHub](https://github.com/). Ang programming community ay sobrang welcoming sa mga baguhan! -- Manood ng mga beginner-friendly coding videos sa YouTube. Maraming magagaling na creators na naaalala kung paano magsimula. -- Isaalang-alang ang pagsali sa mga local meetups o online communities. Maniwala ka, mahilig tumulong ang mga developer sa mga baguhan! +- Sundan ang ilang mga developer communities sa [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), o [GitHub](https://github.com/). Napaka-welcome ng komunidad ng programming sa mga bagong salta! +- Manood ng mga beginner-friendly coding videos sa YouTube. Maraming mahusay na mga creator na naaalala kung ano ang maging nagsisimula pa lang. +- Isaalang-alang ang pagsali sa mga lokal na meetups o online communities. Maniwala ka, gustong-gusto ng mga developer na tumulong sa mga bagong salta! -> 🎯 **Pakinggan, ito ang gusto kong tandaan mo**: Hindi inaasahan na magiging coding wizard ka agad-agad! Sa ngayon, kinikilala mo pa lang ang kamangha-manghang mundo na magiging bahagi mo. Maglaan ng oras, mag-enjoy sa paglalakbay, at tandaan – bawat developer na hinahangaan mo ay minsan ding nasa eksaktong posisyon mo ngayon, excited at maaaring medyo nalilito. Normal lang yan, at ibig sabihin tama ang ginagawa mo! +> 🎯 **Pakinggan, ito ang nais kong tandaan mo**: Hindi inaasahan na maging coding wizard ka agad-agad! Sa ngayon, nakikilala mo pa lang ang kahanga-hangang bagong mundong ito na papasukan mo. Huwag magmadali, sulitin ang paglalakbay, at tandaan – bawat developer na hinahangaan mo ay minsang nakaupo mismo kung saan ka naroon ngayon, masaya at baka medyo nala-loka pa. Normal iyon, at nangangahulugan na tama ang ginagawa mo! -## Takdang-Aralin +## Assignment -[Pagbabasa ng Docs](assignment.md) +[Reading the Docs](assignment.md) -> πŸ’‘ **Kaunting tulong para sa iyong takdang-aralin**: Gustung-gusto kong makita kang mag-explore ng mga tools na hindi pa natin napag-uusapan! Iwasan ang mga editors, browsers, at command line tools na natalakay na natin – mayroong buong kamangha-manghang uniberso ng mga development tools na naghihintay na ma-discover. Hanapin ang mga actively maintained tools na may vibrant at helpful na communities (karaniwang may pinakamahusay na tutorials at supportive na tao kapag kailangan mo ng tulong). +> πŸ’‘ **Isang maliit na paalala para sa iyong takdang-aralin**: Gustong-gusto kong makita kang magsaliksik ng ilang mga tool na hindi pa natin natalakay! I-skip muna ang mga editor, browser, at command line tools na napagusapan na natin – mayroong isang buong kamangha-manghang uniberso ng mga kahanga-hangang development tools na naghihintay lang na matuklasan. Maghanap ng mga aktibong pinapanatili at may buhay at tumutulong na komunidad (karaniwan silang may pinakamahusay na mga tutorial at pinakamatulungin na tao kapag ikaw ay natigil at kailangang humingi ng tulong). --- -## πŸš€ Timeline ng Iyong Programming Journey +## πŸš€ Ang Iyong Timeline sa Paglalakbay sa Programming -### ⚑ **Ano ang Pwede Mong Gawin sa Susunod na 5 Minuto** -- [ ] I-bookmark ang 2-3 programming language websites na nagustuhan mo +### ⚑ **Mga Magagawa Mo sa Susunod na 5 Minuto** +- [ ] I-bookmark ang 2-3 na mga website ng programming languages na nakatawag-pansin sa iyo - [ ] I-download ang Visual Studio Code kung hindi mo pa nagagawa -- [ ] Buksan ang DevTools ng iyong browser (F12) at mag-click-click sa kahit anong website +- [ ] Buksan ang DevTools ng iyong browser (F12) at mag-click sa kahit anong website - [ ] Sumali sa isang programming community (Dev.to, Reddit r/webdev, o Stack Overflow) -### ⏰ **Ano ang Pwede Mong Makamit sa Loob ng Isang Oras** -- [ ] Kumpletuhin ang post-lesson quiz at pag-isipan ang iyong mga sagot -- [ ] I-set up ang VS Code gamit ang GitHub Copilot extension -- [ ] Subukan ang "Hello World" example sa 2 magkaibang programming language online -- [ ] Manood ng "Day in the Life of a Developer" video sa YouTube -- [ ] Simulan ang iyong programming language detective work (mula sa challenge) - -### πŸ“… **Ang Iyong Pakikipagsapalaran sa Loob ng Isang Linggo** -- [ ] Kumpletuhin ang takdang-aralin at mag-explore ng 3 bagong development tools -- [ ] Sundan ang 5 developers o programming accounts sa social media -- [ ] Subukan ang paggawa ng isang maliit na bagay sa CodePen o Replit (kahit "Hello, [Your Name]!") -- [ ] Magbasa ng isang developer blog post tungkol sa coding journey ng isang tao -- [ ] Sumali sa isang virtual meetup o manood ng programming talk -- [ ] Simulan ang pag-aaral ng napiling language gamit ang online tutorials - -### πŸ—“οΈ **Ang Iyong Transformasyon sa Loob ng Isang Buwan** -- [ ] Gumawa ng iyong unang maliit na proyekto (kahit simpleng webpage ay pwede!) -- [ ] Mag-contribute sa isang open-source project (simulan sa documentation fixes) -- [ ] Mag-mentor ng isang tao na nagsisimula pa lang sa programming journey -- [ ] Gumawa ng iyong developer portfolio website -- [ ] Kumonekta sa mga local developer communities o study groups +### ⏰ **Mga Magagawa Mo na Sa Isang Oras na Ito** +- [ ] Tapusin ang post-lesson quiz at magmuni-muni sa iyong mga sagot +- [ ] I-setup ang VS Code gamit ang extension na GitHub Copilot +- [ ] Subukan ang isang "Hello World" na halimbawa sa 2 magkaibang programming languages online +- [ ] Manood ng video na "Day in the Life of a Developer" sa YouTube +- [ ] Simulan ang iyong pagtuklas sa programming language (mula sa hamon) + +### πŸ“… **Iyong Linggong Pakikipagsapalaran** +- [ ] Tapusin ang takdang-aralin at tuklasin ang 3 bagong development tools +- [ ] Sundan ang 5 developer o programming accounts sa social media +- [ ] Subukang gumawa ng maliit na proyekto sa CodePen o Replit (kahit "Hello, [Your Name]!" lang!) +- [ ] Basahin ang isang developer blog post tungkol sa paglalakbay ng isang programmer +- [ ] Sumali sa virtual meetup o manood ng programming talk +- [ ] Simulan ang pag-aaral ng napiling lengguwahe gamit ang mga online tutorials + +### πŸ—“οΈ **Buwanang Pagbabago Mo** +- [ ] Gumawa ng iyong unang maliit na proyekto (kahit simpleng webpage lang!) +- [ ] Mag-ambag sa isang open-source project (simulan sa mga dokumentasyon) +- [ ] Mag-mentor ng isang taong nagsisimula pa lang sa programming +- [ ] Gumawa ng portfolio website para sa developer mo +- [ ] Kumonekta sa mga lokal na komunidad ng developer o study groups - [ ] Simulan ang pagpaplano ng iyong susunod na learning milestone -### 🎯 **Final Reflection Check-in** +### 🎯 **Panghuling Pagmumuni-muni** -**Bago ka magpatuloy, maglaan ng sandali para magdiwang:** -- Ano ang isang bagay tungkol sa programming na nagpasaya sa iyo ngayong araw? -- Aling tool o konsepto ang gusto mong i-explore muna? -- Ano ang nararamdaman mo tungkol sa pagsisimula ng programming journey na ito? +**Bago ka magpatuloy, maglaan ng sandali upang magdiwang:** +- Ano ang isa sa mga bagay tungkol sa programming na nagpasiya sa iyo ngayon? +- Anong tool o konsepto ang gusto mong tuklasin muna? +- Paano ang pakiramdam mo tungkol sa pagsisimula ng paglalakbay na ito sa programming? - Ano ang isang tanong na gusto mong itanong sa isang developer ngayon? ```mermaid journey - title Your Confidence Building Journey - section Today - Curious: 3: You - Overwhelmed: 4: You + title Ang Iyong Paglalakbay sa Pagpapalakas ng Kumpiyansa + section Ngayon + Mausisa: 3: You + Nawala sa Lakas ng Damdamin: 4: You Excited: 5: You - section This Week - Exploring: 4: You - Learning: 5: You - Connecting: 4: You - section Next Month - Building: 5: You - Confident: 5: You - Helping Others: 5: You + section Sa Linggong Ito + Nag-eeksplora: 4: You + Nag-aaral: 5: You + Nakikipag-ugnayan: 4: You + section Sa Susunod na Buwan + Nagtatayo: 5: You + Kumpiyansa: 5: You + Tumatulong sa Iba: 5: You ``` - -> 🌟 **Tandaan**: Bawat eksperto ay minsang naging baguhan. Bawat senior developer ay minsang naramdaman ang eksaktong nararamdaman mo ngayon – excited, maaaring medyo nalilito, at tiyak na curious sa mga posibilidad. Nasa maganda kang kumpanya, at ang paglalakbay na ito ay magiging kamangha-mangha. Maligayang pagdating sa kahanga-hangang mundo ng programming! πŸŽ‰ +> 🌟 **Tandaan**: Bawat eksperto ay minsang nagsimula bilang baguhan. Bawat senior developer ay minsang naramdaman ang eksaktong nararamdaman mo ngayon – excited, maaaring medyo natalo, at siguradong mausisa tungkol sa mga posibleng gawin. Kasama ka sa kahanga-hangang grupo, at ang paglalakbay na ito ay magiging pambihira. Maligayang pagdating sa kahanga-hangang mundo ng programming! πŸŽ‰ --- -**Paunawa**: -Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagama't sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na mapagkakatiwalaang pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito. \ No newline at end of file + +**Pahayag ng Pagsuway**: +Ang dokumentong ito ay naisalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat nagsusumikap kami para sa katumpakan, pakitandaan na ang awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o di-tumpak na bahagi. Ang orihinal na dokumento sa kanyang sariling wika ang dapat ituring na pangunahing sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na maaaring magmula sa paggamit ng pagsasaling ito. + \ No newline at end of file diff --git a/translations/tl/AGENTS.md b/translations/tl/AGENTS.md index 8bb8b073c..352b50bbe 100644 --- a/translations/tl/AGENTS.md +++ b/translations/tl/AGENTS.md @@ -2,27 +2,27 @@ ## Project Overview -Ito ay isang repositoryo ng edukasyonal na kurikulum para sa pagtuturo ng mga pundasyon ng web development sa mga baguhan. Ang kurikulum ay isang komprehensibong 12-linggong kurso na binuo ng Microsoft Cloud Advocates, na nagtatampok ng 24 na praktikal na mga aralin na sumasaklaw sa JavaScript, CSS, at HTML. +Ito ay isang edukasyonal na curriculum repository para sa pagtuturo ng mga pundasyon ng web development sa mga nagsisimula. Ang curriculum ay isang komprehensibong 12-linggong kurso na binuo ng Microsoft Cloud Advocates, na nagtatampok ng 24 na praktikal na mga aralin na sumasaklaw sa JavaScript, CSS, at HTML. ### Key Components -- **Educational Content**: 24 na nakaayos na mga aralin na organisado sa mga module na nakabase sa proyekto +- **Educational Content**: 24 na nakaayos na aralin na pinaghihiwalay sa mga proyekto - **Practical Projects**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, at AI Chat Assistant -- **Interactive Quizzes**: 48 mga pagsusulit na may tig-3 tanong bawat isa (pagsusuri bago/pagkatapos ng aralin) -- **Multi-language Support**: Automated na pagsasalin para sa 50+ na mga wika gamit ang GitHub Actions -- **Technologies**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (para sa mga AI na proyekto) +- **Interactive Quizzes**: 48 na pagsusulit na may tig-3 tanong bawat isa (pre/post-lesson na pagtatasa) +- **Multi-language Support**: Awtomatikong pagsasalin para sa mahigit 50 na mga wika gamit ang GitHub Actions +- **Technologies**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (para sa AI na mga proyekto) ### Architecture -- Repositoryo ng edukasyonal na may istrukturang nakabase sa aralin +- Educational repository na may istrakturang nakabase sa aralin - Bawat folder ng aralin ay naglalaman ng README, mga halimbawa ng code, at mga solusyon -- Mga standalone na proyekto sa magkakahiwalay na direktoryo (quiz-app, iba't ibang mga proyekto ng aralin) +- Nakahiwalay na mga proyekto sa magkakahiwalay na direktoryo (quiz-app, iba't ibang aralin na proyekto) - Sistema ng pagsasalin gamit ang GitHub Actions (co-op-translator) -- Dokumentasyon na sinuserve gamit ang Docsify at available bilang PDF +- Dokumentasyon na hinahatid sa pamamagitan ng Docsify at makukuha bilang PDF ## Setup Commands -Ang repositoryong ito ay pangunahing para sa pagkonsumo ng edukasyonal na nilalaman. Para magtrabaho sa mga partikular na proyekto: +Ang repositoryong ito ay pangunahing para sa pagkonsumo ng edukasyonal na nilalaman. Para sa pagtatrabaho sa mga partikular na proyekto: ### Main Repository Setup @@ -37,7 +37,7 @@ cd Web-Dev-For-Beginners cd quiz-app npm install npm run dev # Simulan ang development server -npm run build # I-build para sa produksyon +npm run build # Gumawa para sa produksyon npm run lint # Patakbuhin ang ESLint ``` @@ -56,7 +56,7 @@ npm run format # I-format gamit ang Prettier ```bash cd 5-browser-extension/solution npm install -# Sundin ang mga partikular na tagubilin sa pag-load ng extension para sa browser +# Sundin ang mga tagubilin sa pag-load ng extension na partikular sa browser ``` ### Space Game Projects @@ -72,37 +72,37 @@ npm install ```bash cd 9-chat-project/solution/backend/python pip install openai -# Itakda ang GITHUB_TOKEN na variable ng kapaligiran +# Itakda ang environment variable na GITHUB_TOKEN python api.py ``` ## Development Workflow -### For Content Contributors +### Para sa mga Nagbibigay ng Nilalaman -1. **I-fork ang repositoryo** sa iyong GitHub account -2. **I-clone ang iyong fork** nang lokal +1. **I-fork ang repository** sa iyong GitHub account +2. **I-clone ang iyong fork** sa lokal na makina 3. **Gumawa ng bagong branch** para sa iyong mga pagbabago -4. Gawin ang mga pagbabago sa nilalaman ng aralin o mga halimbawa ng code -5. Subukan ang anumang mga pagbabago sa code sa mga kaukulang direktoryo ng proyekto -6. Mag-submit ng pull requests ayon sa mga panuntunan ng kontribusyon +4. Gumawa ng mga pagbabago sa nilalaman ng aralin o mga halimbawa ng code +5. Subukan ang anumang mga pagbabago sa code sa mga kaugnay na direktoryo ng proyekto +6. Mag-submit ng pull requests ayon sa mga gabay sa kontribusyon -### For Learners +### Para sa mga Nag-aaral -1. I-fork o i-clone ang repositoryo +1. Mag-fork o mag-clone ng repository 2. Pumunta sa mga direktoryo ng aralin nang sunud-sunod 3. Basahin ang mga README file para sa bawat aralin -4. Kumpletuhin ang pre-lesson quizzes sa https://ff-quizzes.netlify.app/web/ -5. Trabahuhin ang mga halimbawa ng code sa mga folder ng aralin -6. Kumpletuhin ang mga assignments at challenges -7. Sagutan ang post-lesson quizzes +4. Kumpletuhin ang mga pre-lesson quiz sa https://ff-quizzes.netlify.app/web/ +5. Trabahuin ang mga halimbawa ng code sa mga folder ng aralin +6. Kumpletuhin ang mga takdang-aralin at hamon +7. Sagutan ang mga post-lesson quiz ### Live Development - **Dokumentasyon**: Patakbuhin ang `docsify serve` sa root (port 3000) -- **Quiz App**: Patakbuhin ang `npm run dev` sa direktoryo ng quiz-app +- **Quiz App**: Patakbuhin ang `npm run dev` sa quiz-app directory - **Mga Proyekto**: Gamitin ang VS Code Live Server extension para sa mga HTML na proyekto -- **API Projects**: Patakbuhin ang `npm start` sa mga kaukulang API na direktoryo +- **API Projects**: Patakbuhin ang `npm start` sa kani-kaniyang API directories ## Testing Instructions @@ -110,82 +110,82 @@ python api.py ```bash cd quiz-app -npm run lint # Suriin ang mga isyu sa istilo ng code -npm run build # Tiyaking matagumpay ang build +npm run lint # Suriin ang mga isyu sa estilo ng code +npm run build # Tiyakin na matagumpay ang build ``` ### Bank API Testing ```bash cd 7-bank-project/api -npm run lint # Suriin para sa mga isyu sa estilo ng code +npm run lint # Suriin ang mga isyu sa estilo ng code node server.js # Tiyakin na nagsisimula ang server nang walang mga error ``` -### General Testing Approach +### Pangkalahatang Paraan ng Pagsubok -- Ito ay isang edukasyonal na repositoryo na walang komprehensibong automated na mga pagsubok +- Ito ay isang edukasyonal na repository na walang komprehensibong awtomatikong pagsusuri - Ang manu-manong pagsusuri ay nakatuon sa: - - Ang mga halimbawa ng code ay tumatakbo nang walang mga error - - Gumagana nang tama ang mga link sa dokumentasyon - - Nakumpleto nang matagumpay ang build ng mga proyekto - - Sumusunod ang mga halimbawa sa mga pinakamahusay na kasanayan + - Pagpapatakbo ng mga halimbawa ng code nang walang error + - Tamang pagtatrabaho ng mga link sa dokumentasyon + - Matiyak ang matagumpay na pagbuo ng proyekto + - Pagsunod ng mga halimbawa sa pinakamahusay na praktis -### Pre-submission Checks +### Mga Pagsusuri Bago Mag-submit - Patakbuhin ang `npm run lint` sa mga direktoryong may package.json -- Suriin ang mga markdown link kung valid +- Siguraduhin na valid ang mga markdown link - Subukan ang mga halimbawa ng code sa browser o Node.js -- Siguraduhing ang mga pagsasalin ay may tamang istruktura +- Suriin na nananatili ang tamang istraktura sa mga pagsasalin ## Code Style Guidelines ### JavaScript - Gumamit ng modernong ES6+ na sintaks -- Sundin ang mga karaniwang ESLint na configuration na ibinigay sa mga proyekto +- Sundin ang karaniwang ESLint na mga konfigurasyon na ibinigay sa mga proyekto - Gumamit ng makahulugang mga pangalan ng variable at function para sa kalinawan ng edukasyon -- Magdagdag ng mga komento na nagpapaliwanag ng mga konsepto para sa mga nag-aaral -- I-format gamit ang Prettier kung ito ay naka-configure +- Magdagdag ng mga paliwanag na komentaryo para sa mga nag-aaral +- I-format gamit ang Prettier kung naka-konfigure ### HTML/CSS -- Mga semantikong HTML5 na elemento -- Mga prinsipyo ng responsive na disenyo -- Malinaw na mga konbensiyon sa pag-ninilay ng klase -- Mga komento na nagpapaliwanag ng mga teknik sa CSS para sa mga nag-aaral +- Semantic na mga elemento ng HTML5 +- Mga prinsipyong responsive design +- Malinaw na naming ng klase +- Mga komentaryong nagpapaliwanag ng mga teknik sa CSS para sa mga nag-aaral ### Python -- Mga patnubay sa istilo ng PEP 8 +- Mga PEP 8 na gabay sa estilo - Malinaw, edukasyonal na mga halimbawa ng code -- Mga type hint kung nakakatulong sa pagkatuto +- Type hints kung kinakailangan para sa pag-aaral ### Markdown Documentation -- Malinaw na hierarkiya ng mga heading -- Mga code block na may pagtukoy ng wika -- Mga link sa karagdagang mga mapagkukunan -- Mga screenshot at mga imahe sa mga direktoryong `images/` +- Malinaw na hierarchy ng mga heading +- Mga code block na may espesipikasyon ng wika +- Mga link sa karagdagang mga sanggunian +- Mga screenshot at imahe sa mga direktoryong `images/` - Alt text para sa mga imahe para sa accessibility -### File Organization +### Organisasyon ng File -- Mga aralin na inanumero nang sunud-sunod (1-getting-started-lessons, 2-js-basics, atbp.) -- Bawat proyekto ay may `solution/` at kadalasang `start/` o `your-work/` na mga direktoryo -- Mga imahe na iniimbak sa mga lesson-specific na `images/` folder -- Mga pagsasalin sa istrukturang `translations/{language-code}/` +- Ang mga aralin ay may sunud-sunod na bilang (1-getting-started-lessons, 2-js-basics, atbp.) +- Bawat proyekto ay may `solution/` at madalas may `start/` o `your-work/` na mga direktoryo +- Mga imahe ay nakaimbak sa mga lesson-specific na `images/` folder +- Mga pagsasalin ay nasa `translations/{language-code}/` na istraktura ## Build and Deployment ### Quiz App Deployment (Azure Static Web Apps) -Ang quiz-app ay naka-configure para sa Azure Static Web Apps na deployment: +Ang quiz-app ay naka-konfigura para sa Azure Static Web Apps deployment: ```bash cd quiz-app -npm run build # Lumilikha ng dist/ na folder -# Nagde-deploy gamit ang GitHub Actions workflow sa push sa main +npm run build # Lumilikha ng folder na dist/ +# Naglalaan gamit ang GitHub Actions workflow sa pag-push sa main ``` Azure Static Web Apps configuration: @@ -197,86 +197,86 @@ Azure Static Web Apps configuration: ```bash npm install # I-install ang docsify-to-pdf -npm run convert # Gumawa ng PDF mula sa mga docs +npm run convert # Gumawa ng PDF mula sa docs ``` ### Docsify Documentation ```bash -npm install -g docsify-cli # I-install ang Docsify nang pangkalahatan +npm install -g docsify-cli # I-install ang Docsify sa buong sistema docsify serve # I-serve sa localhost:3000 ``` ### Project-specific Builds -Bawat direktoryo ng proyekto ay maaaring may sarili nitong build process: -- Mga Vue na proyekto: `npm run build` ay lumilikha ng production bundles -- Mga static na proyekto: Walang build step, direktang i-serve ang mga files +Maaaring may sariling build process ang bawat direktoryo ng proyekto: +- Vue projects: `npm run build` ay lumilikha ng production bundles +- Static projects: Walang build step, diretso na pag-serve ng mga file ## Pull Request Guidelines ### Title Format -Gumamit ng malinaw, deskriptibong mga pamagat na naglalarawan sa bahagi ng pagbabago: -- `[Quiz-app] Magdagdag ng bagong quiz para sa aralin X` -- `[Lesson-3] Ayusin ang typo sa terrarium project` -- `[Translation] Magdagdag ng pagsasalin sa Spanish para sa aralin 5` -- `[Docs] I-update ang mga tagubilin sa setup` +Gumamit ng malinaw, nakapagsasaysay na mga pamagat na nagpapakita ng bahagi ng pagbabago: +- `[Quiz-app] Add new quiz for lesson X` +- `[Lesson-3] Fix typo in terrarium project` +- `[Translation] Add Spanish translation for lesson 5` +- `[Docs] Update setup instructions` ### Required Checks -Bago magsumite ng PR: +Bago mag-submit ng PR: -1. **Kalidad ng Code**: - - Patakbuhin ang `npm run lint` sa mga naapektuhang direktoryo ng proyekto - - Ayusin lahat ng linting errors at warnings +1. **Code Quality**: + - Patakbuhin ang `npm run lint` sa mga apektadong direktoryo ng proyekto + - Ayusin ang lahat ng linting errors at warnings -2. **Pag-verify ng Build**: +2. **Build Verification**: - Patakbuhin ang `npm run build` kung naaangkop - - Siguraduhin walang error sa build + - Siguraduhing walang error sa build -3. **Pagpapatunay ng Link**: +3. **Link Validation**: - Subukan lahat ng markdown links - Siguraduhin gumagana ang mga image references -4. **Pagsusuri ng Nilalaman**: - - Basahin para sa spelling at grammar - - Siguraduhin tama ang mga halimbawa ng code at edukasyonal - - I-verify na ang mga pagsasalin ay nagpapanatili ng orihinal na kahulugan +4. **Content Review**: + - I-proofread para sa spelling at grammar + - Siguraduhing tama at edukasyonal ang mga sample code + - Tingnan na ang mga pagsasalin ay nananatili ang orihinal na kahulugan ### Contribution Requirements -- Sumang-ayon sa Microsoft CLA (automated na tseke sa unang PR) -- Sundin ang [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) -- Tingnan ang [CONTRIBUTING.md](./CONTRIBUTING.md) para sa detalyadong mga gabay -- I-reference ang mga numero ng isyu sa PR description kung naaangkop +- Sumang-ayon sa Microsoft CLA (awtomatikong tseke sa unang PR) +- Sundan ang [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) +- Tingnan ang [CONTRIBUTING.md](./CONTRIBUTING.md) para sa detalyadong gabay +- Ilahad ang mga numero ng isyu sa deskripsyon ng PR kung naaangkop ### Review Process -- Ang mga PR ay nirerebyu ng mga maintainer at komunidad -- Pinapangunahan ang kalinawan sa edukasyon -- Dapat sundin ng mga halimbawa ng code ang kasalukuyang mga pinakamahusay na kasanayan -- Ang mga pagsasalin ay sinusuri para sa katumpakan at angkop na kultura +- Ang mga PR ay nirerepaso ng mga maintainers at ng komunidad +- Pinag-iibayo ang kalinawan sa edukasyon +- Ang mga halimbawa ng code ay dapat sumunod sa kasalukuyang pinakamahusay na praktis +- Ang mga pagsasalin ay nirerepaso para sa katumpakan at angkop na kultura ## Translation System ### Automated Translation -- Gumagamit ng GitHub Actions kasama ang co-op-translator workflow -- Nagsasalin sa 50+ na mga wika nang awtomatiko -- Mga source file sa mga pangunahing direktoryo -- Mga naisaling file sa `translations/{language-code}/` na mga direktoryo +- Gumagamit ng GitHub Actions na may co-op-translator workflow +- Sinasalin sa mahigit 50 na mga wika nang awtomatiko +- Mga source file ay nasa pangunahing mga direktoryo +- Mga isinaling file ay nasa `translations/{language-code}/` na mga direktoryo ### Adding Manual Translation Improvements 1. Hanapin ang file sa `translations/{language-code}/` -2. Gawin ang mga pagpapabuti habang pinapanatili ang istruktura +2. Gawin ang mga pagpapabuti habang pinapanatili ang istraktura 3. Siguraduhing gumagana pa rin ang mga halimbawa ng code -4. Subukan ang anumang lokal na content ng quiz +4. Subukan ang anumang lokal na nilalaman ng quiz ### Translation Metadata -Ang mga naisaling file ay may metadata header: +Ang mga isinaling file ay may metadata header: ```markdown -**Paalala**: -Ang dokumentong ito ay isinalin gamit ang serbisyong AI na pagsasalin na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat nagsusumikap kami para sa katumpakan, pakatandaan na ang awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o di-katumpakan. Ang orihinal na dokumento sa kanyang likas na wika ang dapat ituring na pangunahing sanggunian. Para sa mahahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na maaaring magmula sa paggamit ng pagsasaling ito. +**Pagtatangi**: +Ang dokumentong ito ay isinalin gamit ang AI na serbisyo sa pagsasalin [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga error o hindi pagkakatugma. Ang orihinal na dokumento sa sariling wika nito ang dapat ituring na pangunahing sanggunian. Para sa mga mahahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na maaaring magmula sa paggamit ng pagsasaling ito. \ No newline at end of file diff --git a/translations/tl/README.md b/translations/tl/README.md index 8a7a38227..66069945d 100644 --- a/translations/tl/README.md +++ b/translations/tl/README.md @@ -1,190 +1,220 @@ -# Web Development para sa mga Nagsisimula - Isang Kurikulum +[![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) -Matutunan ang mga pangunahing kaalaman sa web development sa aming 12-linggong komprehensibong kurso mula sa Microsoft Cloud Advocates. Bawat isa sa 24 na aralin ay sumisid sa JavaScript, CSS, at HTML sa pamamagitan ng mga hands-on na proyekto tulad ng terrariums, browser extensions, at space games. Makilahok sa mga pagsusulit, talakayan, at praktikal na mga gawain. Pagbutihin ang iyong mga kasanayan at i-optimize ang iyong pagkatuto gamit ang aming epektibong project-based pedagogy. Simulan ang iyong paglalakbay sa coding ngayon! +[![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) + +# Pagsisimula sa Web Development - Isang Kurikulum + +Matutunan ang mga pundasyon ng web development sa aming 12-linggong komprehensibong kurso mula sa Microsoft Cloud Advocates. Bawat isa sa 24 na aralin ay sumisid sa JavaScript, CSS, at HTML sa pamamagitan ng mga hands-on na proyekto tulad ng terrariums, browser extensions, at space games. Makilahok sa mga pagsusulit, talakayan, at praktikal na gawain. Pahusayin ang iyong mga kakayahan at i-optimize ang pag-alala ng kaalaman gamit ang aming epektibong project-based pedagogy. Simulan ang iyong paglalakbay sa pag-coding ngayon! Sumali sa Azure AI Foundry Discord Community -Sundin ang mga hakbang na ito upang makapagsimula gamit ang mga resources na ito: -1. **I-fork ang Repositoryo**: I-click ang -2. **I-clone ang Repositoryo**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Sumali sa Azure AI Foundry Discord at makipagkita sa mga eksperto at kapwa developer**](https://discord.com/invite/ByRwuEEgH4) +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -### 🌐 Multi-Language Support +Sundin ang mga hakbang na ito para makapagsimula gamit ang mga resources na ito: +1. **I-Fork ang Repository**: I-click ang [![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. **I-Clone ang Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +3. [**Sumali sa Azure AI Foundry Discord at makilala ang mga eksperto at kapwa mga developer**](https://discord.com/invite/ByRwuEEgH4) -#### Sinusuportahan sa pamamagitan ng GitHub Action (Awtomatiko at Palaging Napapanahon) +### 🌐 Suporta para sa Maramihang Wika -[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-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) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-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)](./README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) +#### Sinusuportahan sa pamamagitan ng GitHub Action (Automated at Palaging Napapanahon) -> **Mas gusto mo bang Mag-clone Lokal?** + +[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-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) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-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)](./README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) -> Kasama sa repositoryong ito ang 50+ na pagsasalin ng wika na malaki ang dagdag sa laki ng ida-download. Para mag-clone nang walang mga pagsasalin, gamitin ang sparse checkout: +> **Mas gusto mo bang Mag-Clone Locally?** +> +> Ang repository na ito ay naglalaman ng 50+ na pagsasalin sa wika na nagpapalaki ng laki ng pag-download. Para mag-clone nang walang mga pagsasalin, gamitin ang sparse checkout: +> +> **Bash / macOS / Linux:** > ```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' > ``` -> Bibigyan ka nito ng lahat ng kailangan mo upang matapos ang kurso nang mas mabilis ang pag-download. +> +> **CMD (Windows):** +> ```cmd +> 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" +> ``` +> +> Binibigyan ka nito ng lahat ng kailangan mo para matapos ang kurso nang mas mabilis ang pag-download. + -**Kung nais mong magkaroon ng karagdagang mga suportadong wika para sa pagsasalin, nakalista ito [dito](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**Kung nais mo ng karagdagang mga suportadong wika ng pagsasalin ay naka-lista [dito](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) #### πŸ§‘β€πŸŽ“ _Estudyante ka ba?_ -Bisitahin ang [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) kung saan makakahanap ka ng mga panimulang resources, Student packs, at pati mga paraan upang makakuha ng libreng voucher para sa sertipiko. Ito ang pahina na gusto mong i-bookmark at tingnan paminsan-minsan dahil nagpapalit-palit tayo ng nilalaman buwan-buwan. +Bisitahin ang [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) kung saan makikita mo ang mga panimulang resources, Student packs at pati na rin ang mga paraan para makakuha ng libreng certificate voucher. Ito ang pahina na dapat mong i-bookmark at balikan paminsan-minsan dahil buwan-buwan naming pinapalitan ang mga nilalaman. -### πŸ“£ Paunawa - Mga bagong hamon sa GitHub Copilot Agent mode na dapat tapusin! +### πŸ“£ Anunsyo - Bagong GitHub Copilot Agent mode challenges na dapat tapusin! -May bagong hamon na idinagdag, hanapin ang "GitHub Copilot Agent Challenge πŸš€" sa karamihan ng mga kabanata. Ito ay isang bagong hamon para sa iyo upang matapos gamit ang GitHub Copilot at Agent mode. Kung hindi mo pa nagamit ang Agent mode dati, kaya nitong hindi lang gumawa ng teksto kundi makatulong sa paggawa at pag-edit ng mga file, pagpapatakbo ng mga command, at marami pang iba. +May bagong Challenge na idinagdag, hanapin ang "GitHub Copilot Agent Challenge πŸš€" sa karamihan ng mga kabanata. Ito ay isang bagong hamon para sa iyo na tapusin gamit ang GitHub Copilot at Agent mode. Kung hindi mo pa nagamit ang Agent mode dati, kaya nitong hindi lang bumuo ng teksto kundi lumikha at mag-edit ng mga file, magpatakbo ng mga command at marami pang iba. -### πŸ“£ Paunawa - _Bagong Proyekto na gagawin gamit ang Generative AI_ +### πŸ“£ Anunsyo - _Bagong Proyekto na gagawin gamit ang Generative AI_ -May bagong AI Assistant project na idinagdag, tingnan ito sa [proyekto](./9-chat-project/README.md) +Kamakailan ay nadagdag ang bagong AI Assistant project, tingnan ito sa [proyekto](./9-chat-project/README.md) -### πŸ“£ Paunawa - _Bagong Kurikulum_ tungkol sa Generative AI para sa JavaScript ang bagong inilabas +### πŸ“£ Anunsyo - _Bagong Kurikulum_ sa Generative AI para sa JavaScript ay bagong inilabas na Huwag palampasin ang aming bagong Generative AI curriculum! -Bisitahin ang [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) upang makapagsimula! +Bisitahin ang [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para makapagsimula! ![Background](../../translated_images/tl/background.148a8d43afde5730.webp) -- Mga aralin na sumasaklaw mula sa mga batayan hanggang RAG. -- Makipag-ugnayan sa mga makasaysayang karakter gamit ang GenAI at ang aming companion app. -- Masaya at nakakatuwang naratibo, ikaw ay magta-time travel! +- Mga aralin na sumasaklaw mula sa mga batayan hanggang sa RAG. +- Makipag-ugnayan sa mga makasaysayang tauhan gamit ang GenAI at ang kasama naming app. +- Masaya at nakakaaliw na kwento, maglalakbay ka sa panahon! ![character](../../translated_images/tl/character.5c0dd8e067ffd693.webp) -Bawat aralin ay may kasamang gawain na tapusin, isang knowledge check, at isang hamon upang gabayan ka sa pag-aaral ng mga paksang tulad ng: -- Prompting at prompt engineering -- Pagbuo ng mga text at image app + +Bawat aralin ay may kasamang gawain na dapat tapusin, pagsusulit sa kaalaman at hamon upang gabayan ka sa pag-aaral ng mga paksang tulad ng: +- Pagbuo ng prompt at prompt engineering +- Pagbuo ng apps para sa teksto at larawan - Search apps -Bisitahin ang [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) upang makapagsimula! +Bisitahin ang [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para makapagsimula! -## 🌱 Pagsisimula -> **Mga Guro**, mayroon kaming [ilang mga mungkahi](for-teachers.md) kung paano gamitin ang kurikulum na ito. Ikalulugod naming makatanggap ng inyong feedback [sa aming discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Mga Mag-aaral](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para sa bawat aralin, magsimula sa isang pre-lecture na pagsusulit at sundan ito sa pagbabasa ng materyal ng lektyur, pagtapos sa mga iba't ibang gawain, at pagsuri ng inyong pag-unawa sa post-lecture na pagsusulit. +## 🌱 Paano Magsimula -Para palalimin ang iyong karanasan sa pag-aaral, makipag-ugnayan sa iyong mga kaklase para sabay na magtrabaho sa mga proyekto! Inaanyayahan ang mga talakayan sa aming [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) kung saan ang aming mga moderator ay handang sagutin ang iyong mga tanong. +> **Guro**, mayroong kaming [ilang mga mungkahi](for-teachers.md) kung paano gamitin ang kurikulum na ito. Masaya kaming marinig ang iyong puna [sa aming discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -Para palawigin pa ang iyong edukasyon, mariin naming inirerekomenda ang pagtuklas sa [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para sa karagdagang mga materyales sa pag-aaral. +**[Mga Mag-aaral](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, sa bawat aralin, simulan sa isang pre-lecture quiz at sundan ito sa pagbasa ng lecture material, pagtapos ng iba't ibang mga aktibidad at pagtsek ng iyong pag-unawa gamit ang post-lecture quiz. -### πŸ“‹ Pag-set up ng iyong kapaligiran +Para mapahusay ang iyong karanasan sa pag-aaral, makipag-ugnayan sa iyong mga kapwa mag-aaral upang magtrabaho sa mga proyekto nang magkakasama! Ang mga diskusyon ay hinihikayat sa aming [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) kung saan ang aming mga moderator ay nasa handang sumagot sa iyong mga tanong. -Handa na ang development environment para sa kurikulum na ito! Sa pagsisimula mo, maaari mong piliing patakbuhin ang kurikulum sa isang [Codespace](https://github.com/features/codespaces/) (_isang browser-based, hindi na kailangan mag-install na kapaligiran_), o local sa iyong computer gamit ang isang text editor tulad ng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Para lalong mapalawak ang iyong edukasyon, lubos naming inirerekomenda ang pag-explore sa [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para sa karagdagang mga materyales sa pag-aaral. + +### πŸ“‹ Pagsasaayos ng iyong kapaligiran + +Ang kurikulum na ito ay may nakahandang development environment! Sa pag-simula, maaari kang pumili na patakbuhin ang kurikulum sa isang [Codespace](https://github.com/features/codespaces/) (_isang browser-based, hindi na kailangan ng install na environment_), o lokal sa iyong computer gamit ang text editor tulad ng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). #### Gumawa ng iyong repositoryo -Para madali mong maisave ang iyong trabaho, inirerekomenda na gumawa ka ng sarili mong kopya ng repositoryong ito. Magagawa mo ito sa pamamagitan ng pag-click sa button na **Use this template** sa itaas ng pahina. Lilikha ito ng bagong repositoryo sa iyong GitHub account na may kopya ng kurikulum. +Para madali mong masave ang iyong trabaho, inirerekomenda na gumawa ka ng sarili mong kopya ng repositoryo na ito. Maaari mong gawin ito sa pamamagitan ng pag-click sa button na **Use this template** sa itaas ng pahina. Lilikha ito ng bagong repositoryo sa iyong GitHub account na may kopya ng kurikulum. Sundin ang mga hakbang na ito: -1. **I-fork ang Repositoryo**: I-click ang "Fork" button sa kanang itaas na bahagi ng pahinang ito. -2. **I-clone ang Repositoryo**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +1. **I-Fork ang Repository**: I-click ang "Fork" na button sa itaas-kanang bahagi ng pahinang ito. +2. **I-Clone ang Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` #### Pagpapatakbo ng kurikulum sa isang Codespace -Sa iyong kopya ng repositoryong nilikha mo, i-click ang **Code** button at piliin ang **Open with Codespaces**. Lilikha ito ng bagong Codespace para sa iyong trabahuhin. +Sa kopya mo ng repositoryo na ginawa mo, i-click ang button na **Code** at piliin ang **Open with Codespaces**. Lilikha ito ng bagong Codespace para sa iyong trabaho. ![Codespace](../../translated_images/tl/createcodespace.0238bbf4d7a8d955.webp) -#### Pagpapatakbo ng kurikulum local sa iyong computer - -Para patakbuhin ang kurikulum na ito sa iyong computer, kakailanganin mo ang isang text editor, browser, at command line tool. Ang aming unang aralin, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), ay gagabay sa'yo sa iba't ibang mga opsyon para sa bawat isa sa mga tool na ito upang makapili ka ng pinakaangkop para sa'yo. +#### Pagpapatakbo ng kurikulum lokal sa iyong computer -Inirerekumenda namin ang paggamit ng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) bilang iyong editor, na may built-in ding [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Maaari mong i-download ang Visual Studio Code [dito](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Para mapatakbo ang kurikulum na ito lokal sa iyong computer, kakailanganin mo ng isang text editor, isang browser at isang command line tool. Ang unang aralin namin, [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages), ay gagabay sa iyo sa iba't ibang mga opsyon para sa bawat isa sa mga ito upang mapili mo kung ano ang pinakamahusay para sa iyo. -1. I-clone ang iyong repositoryo sa iyong computer. Maaari mo itong gawin sa pamamagitan ng pag-click sa **Code** button at pagkopya ng URL: +Ang aming rekomendasyon ay gamitin ang [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) bilang editor mo, na may kasamang built-in na [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Maaari mong i-download ang Visual Studio Code [dito](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +1. I-clone ang iyong repositoryo sa iyong computer. Magagawa mo ito sa pamamagitan ng pag-click sa **Code** na button at pagkopya ng URL: [CodeSpace](./images/createcodespace.png) + Pagkatapos, buksan ang [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) sa loob ng [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) at patakbuhin ang sumusunod na utos, palitan ang `` ng URL na iyong kinopya: ```bash git clone ``` -2. Buksan ang folder sa Visual Studio Code. Maaari mong gawin ito sa pamamagitan ng pag-click sa **File** > **Open Folder** at pagpili sa folder na kaklone mo lang. +2. Buksan ang folder sa Visual Studio Code. Magagawa mo ito sa pamamagitan ng pag-click sa **File** > **Open Folder** at pagpili ng folder na kaklone mo lang. -> Inirerekomendang mga extension ng Visual Studio Code: +> Inirerekomendang mga extension sa Visual Studio Code: > -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para makita ang preview ng mga pahina ng HTML sa loob ng Visual Studio Code -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para makatulong sa mas mabilis na pagsulat ng code +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para i-preview ang mga HTML na pahina sa loob ng Visual Studio Code +> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para tulungan kang magsulat ng code nang mas mabilis ## πŸ“‚ Kasama sa bawat aralin: - opsyonal na sketchnote -- opsyonal na karagdagang video -- pre-lesson warmup quiz +- opsyonal na dagdag na video +- pre-lesson warmup na pagsusulit - nakasulat na aralin -- para sa mga araling proyekto, hakbang-hakbang na gabay kung paano buuin ang proyekto -- mga knowledge check +- para sa mga araling nakabatay sa proyekto, mga hakbang-hakbang na gabay kung paano gawin ang proyekto +- pagsusuri ng kaalaman - isang hamon -- karagdagang babasahin -- asignatura +- dagdag na babasahin +- takdang-aralin - [post-lesson quiz](https://ff-quizzes.netlify.app/web/) -> **Isang paalala tungkol sa mga pagsusulit**: Lahat ng pagsusulit ay nilalaman sa folder ng Quiz-app, 48 kabuuang pagsusulit na may tig-tatlong tanong bawat isa. Available ang mga ito [dito](https://ff-quizzes.netlify.app/web/); ang quiz app ay maaaring patakbuhin nang lokal o i-deploy sa Azure; sundin ang mga tagubilin sa `quiz-app` folder. +> **Tungkol sa mga pagsusulit**: Lahat ng mga pagsusulit ay nasa Quiz-app na folder, may kabuuang 48 pagsusulit na tig-tatlong tanong bawat isa. Makikita ang mga ito [dito](https://ff-quizzes.netlify.app/web/); ang quiz app ay maaaring patakbuhin nang lokal o ideploy sa Azure; sundin ang mga tagubilin sa `quiz-app` na folder. ## πŸ—ƒοΈ Mga Aralin -| | Pangalan ng Proyekto | Mga Konseptong Itinuro | Mga Layunin sa Pagkatuto | Kaugnay na Aralin | May-akda | -| :-: | :--------------------------------------------------------------: | :-------------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Pagsisimula | Panimula sa Programming at Mga Kagamitan sa Industriya | Matutunan ang mga pangunahing pundasyon sa likod ng karamihan sa mga programming language at tungkol sa software na tumutulong sa mga propesyonal na developer | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Pagsisimula | Mga Batayan ng GitHub, kasama ang pagtatrabaho sa isang koponan | Paano gamitin ang GitHub sa iyong proyekto, paano makipagtulungan sa iba sa isang code base | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| | Pangalan ng Proyekto | Mga Konsepto na Itinuturo | Mga Layunin sa Pagkatuto | Nauugnay na Aralin | May Awtor | +| :-: | :---------------------------------------------------------------: | :------------------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :------------------------: | +| 01 | Pagsisimula | Panimula sa Programming at Mga Kagamitan sa Trabaho | Matutunan ang mga pangunahing pundasyon sa likod ng karamihan ng mga programming language at tungkol sa software na tumutulong sa mga propesyonal na developer sa kanilang trabaho | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Pagsisimula | Mga Batayan ng GitHub, kasama ang pakikipagtulungan sa grupo | Paano gamitin ang GitHub sa iyong proyekto, paano makipagtulungan sa iba sa isang code base | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | | 03 | Pagsisimula | Accessibility | Matutunan ang mga batayan ng web accessibility | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS Basics | Mga Uri ng Data sa JavaScript | Ang mga batayan ng mga uri ng data sa JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS Basics | Mga Function at Method | Matuto tungkol sa mga function at method upang pamahalaan ang daloy ng lohika ng isang aplikasyon | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | -| 06 | JS Basics | Paggawa ng mga Desisyon gamit ang JS | Matuto kung paano gumawa ng mga kondisyon sa iyong code gamit ang mga pamamaraan sa paggawa ng desisyon | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS Basics | Arrays at Loops | Gamitin ang data gamit ang arrays at loops sa JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML sa Praktis | Bumuo ng HTML upang makalikha ng online terrarium, nakatuon sa pagbuo ng layout | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS sa Praktis | Bumuo ng CSS upang istilohan ang online terrarium, nakatuon sa mga batayan ng CSS kabilang ang paggawa ng pahina na tumutugon | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Bumuo ng JavaScript upang mag-fungsyon ang terrarium bilang isang drag/drop interface, nakatuon sa closures at DOM manipulation | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | Bumuo ng Isang Typing Game | Matutunan kung paano gamitin ang mga event ng keyboard upang paandarin ang lohika ng iyong JavaScript app | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Paggawa sa mga Browser | Matutunan kung paano gumagana ang mga browser, ang kasaysayan nito, at kung paano mag-scaffold ng mga unang elemento ng isang browser extension | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Pagbuo ng form, pagtawag sa API at pag-iimbak ng mga variable sa local storage | Bumuo ng mga elemento ng JavaScript ng iyong browser extension upang tumawag ng API gamit ang mga variable na nakaimbak sa local storage | [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) | Mga background process sa browser, pagganap ng web | Gamitin ang mga background process ng browser upang pamahalaan ang icon ng extension; alamin ang tungkol sa pagganap ng web at ilang mga optimisasyon upang mapabilis | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Space Game](./6-space-game/solution/README.md) | Mas Advanced na Pagbuo ng Laro gamit ang JavaScript | Matuto tungkol sa Inheritance gamit ang parehong Classes at Composition at ang Pub/Sub pattern, bilang paghahanda sa paggawa ng laro | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Space Game](./6-space-game/solution/README.md) | Pagguho sa canvas | Matuto tungkol sa Canvas API, na ginagamit upang mag-drawing ng mga elemento sa screen | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](./6-space-game/solution/README.md) | Paggalaw ng mga elemento sa paligid ng screen | Tuklasin kung paano nagkakaroon ng galaw ang mga elemento gamit ang cartesian coordinates at ang Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](./6-space-game/solution/README.md) | Pag-detect ng collision | Pahintulutan ang mga elemento na magbanggaan at mag-react sa isa't isa gamit ang keypresses at magbigay ng cooldown function upang matiyak ang pagganap ng laro | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](./6-space-game/solution/README.md) | Pagpapanatili ng puntos | Gawin ang mga kalkulasyon batay sa status ng laro at pagganap | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Space Game](./6-space-game/solution/README.md) | Pagtatapos at muling pagsisimula ng laro | Matutunan ang tungkol sa pagtatapos at muling pagsisimula ng laro, kabilang ang paglilinis ng mga asset at pag-reset ng mga variable values | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Banking App](./7-bank-project/solution/README.md) | Mga HTML Template at Routing sa isang Web App | Matutunan kung paano lumikha ng scaffolding ng multipage website gamit ang routing at HTML template | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banking App](./7-bank-project/solution/README.md) | Bumuo ng Login at Registration Form | Matuto tungkol sa pagbuo ng mga form at paghawak ng mga validation routine | [Forms](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Banking App](./7-bank-project/solution/README.md) | Mga Paraan ng Pagkuha at Paggamit ng Datos | Paano dumadaloy ang datos papasok at palabas ng iyong app, paano ito kunin, i-imbak, at alisin | [Data](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Banking App](./7-bank-project/solution/README.md) | Mga Konsepto ng State Management | Matutunan kung paano hinahawakan ng iyong app ang state at kung paano ito pamahalaan programmatically | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | Paggamit ng VScode | Matutunang Gumamit ng code editor | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI Assistants](./9-chat-project/README.md) | Paggamit ng AI | Matutong bumuo ng sariling AI assistant | [AI Assistant project](./9-chat-project/README.md) | Chris | +| 04 | Mga Batayan ng JS | Mga Uri ng Datos sa JavaScript | Mga batayan ng mga uri ng datos sa JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | Mga Batayan ng JS | Mga Function at MΓ©todo | Matuto tungkol sa mga function at mΓ©todo upang pamahalaan ang daloy ng lohika ng aplikasyon | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine at Christopher | +| 06 | Mga Batayan ng JS | Paggawa ng mga Desisyon gamit ang JS | Matutunan kung paano gumawa ng mga kundisyon sa iyong code gamit ang mga pamamaraan sa paggawa ng desisyon | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | Mga Batayan ng JS | Mga Arrays at Loops | Gumamit ng datos gamit ang mga array at loops sa JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | Praktis sa HTML | Buuhin ang HTML para gumawa ng online terrarium, na nakatuon sa paggawa ng layout | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | Praktis sa CSS | Buuhin ang CSS para istayl ang online terrarium, na nakatuon sa mga batayan ng CSS kabilang ang paggawa ng responsive na pahina | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Buuhin ang JavaScript para gawing gumana ang terrarium bilang drag/drop interface, na nakatuon sa closures at DOM manipulation | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typing Game](./4-typing-game/solution/README.md) | Gumawa ng Typing Game | Matutunan kung paano gamitin ang mga keyboard events upang patakbuhin ang lohika ng iyong JavaScript app | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Paggamit ng mga Browser | Matutunan kung paano gumagana ang mga browser, ang kasaysayan nito, at paano mag-scaffold ng mga unang elemento ng isang browser extension | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Paggawa ng form, pagtawag ng API at pag-iimbak ng mga variable sa local storage | Buuhin ang mga elemento ng JavaScript ng iyong browser extension upang tumawag ng API gamit ang mga variable na nakaimbak sa local storage | [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) | Mga background process sa browser, performance ng web | Gamitin ang mga background process ng browser para pamahalaan ang icon ng extension; matuto tungkol sa performance ng web at ilang optimizations para mapabuti | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | Mas advanced na pag-develop ng laro gamit ang JavaScript | Matuto tungkol sa Inheritance gamit parehong Classes at Composition at ang Pub/Sub pattern, bilang paghahanda sa paggawa ng laro | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./6-space-game/solution/README.md) | Pagdibuho sa canvas | Matutunan ang Canvas API, na ginagamit sa pagguhit ng mga elemento sa screen | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | Paggalaw ng mga elemento sa screen | Tuklasin kung paano nagkakaroon ng galaw ang mga elemento gamit ang cartesian coordinates at ang Canvas API | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | Collision detection | Gawing magbanggaan at mag-react ang mga elemento sa isa't isa gamit ang keypresses at magbigay ng cooldown function para mapanatili ang performance ng laro | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | Pagbantay ng score | Gawin ang mga kalkulasyon batay sa status at performance ng laro | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | Pagtatapos at muling pagsisimula ng laro | Matutunan ang pagtatapos at muling pagsisimula ng laro, kabilang ang paglilinis ng mga asset at pag-reset ng mga halaga ng variable | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](./7-bank-project/solution/README.md) | Mga HTML Template at Ruta sa isang Web App | Matutunan kung paano gumawa ng scaffold ng arkitektura ng isang multipage website gamit ang routing at mga HTML template | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banking App](./7-bank-project/solution/README.md) | Gumawa ng Login at Registration Form | Matutunan ang paggawa ng mga form at paghawak ng mga validation routines | [Forms](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | Mga Pamamaraan ng Pagkuha at Paggamit ng Datos | Paano dumadaloy ang mga datos papasok at palabas ng iyong app, paano ito kunin, imbakin, at itapon | [Data](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | Mga Konsepto ng Pamamahala ng Estado | Matutunan kung paano pinapanatili ng iyong app ang estado at paano ito pamahalaan sa programmatic na paraan | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../8-code-editor) | Paggamit ng VScode | Matutunan kung paano Gamitin ang isang code editor| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI Assistants](./9-chat-project/README.md) | Paggamit ng AI | Matutunan kung paano gumawa ng sarili mong AI assistant | [AI Assistant project](./9-chat-project/README.md) | Chris | ## 🏫 Pedagohiya -Ang aming kurikulum ay dinisenyo batay sa dalawang pangunahing prinsipyo sa pagtuturo: +Ang aming kurikulum ay dinisenyo na may dalawang pangunahing prinsipyo sa pagtuturo: * pagkatuto batay sa proyekto -* madalas na mga pagsusulit - -Itinuturo ng programa ang mga pundasyon ng JavaScript, HTML, at CSS, pati na rin ang mga pinakabagong kagamitan at teknik na ginagamit ng mga web developer ngayon. Magkakaroon ang mga estudyante ng pagkakataon na magkaroon ng praktikal na karanasan sa pamamagitan ng paggawa ng isang typing game, virtual terrarium, eco-friendly browser extension, laro gaya ng space invader, at isang banking app para sa mga negosyo. Sa pagtatapos ng serye, magkakaroon ang mga estudyante ng matibay na pang-unawa sa pag-develop ng web. +* madalas na pagsusulit -> πŸŽ“ Maaari mong kunin ang mga unang aralin sa kurikulum na ito bilang [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) sa Microsoft Learn! +Itinuturo ng programa ang mga pundasyon ng JavaScript, HTML, at CSS, pati na rin ang mga pinakabagong kagamitan at teknik na ginagamit ng mga web developer sa kasalukuyan. Magkakaroon ang mga estudyante ng pagkakataon na magkaroon ng praktikal na karanasan sa pamamagitan ng paggawa ng isang typing game, virtual terrarium, eco-friendly browser extension, space-invader-style na laro, at isang banking app para sa mga negosyo. Sa pagtatapos ng serye, magkakaroon ang mga estudyante ng matibay na pag-unawa sa web development. -Sa pamamagitan ng pagtiyak na ang nilalaman ay tugma sa mga proyekto, mas nagiging kawili-wili ang proseso para sa mga estudyante at mas napapalakas ang pag-alala sa mga konsepto. Sumulat din kami ng ilang panimulang aralin sa mga batayan ng JavaScript upang ipakilala ang mga konsepto, na sinamahan ng video mula sa koleksyon na "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", na ang ilan sa mga may-akda ay nag-ambag sa kurikulum na ito. +> πŸŽ“ Maari mong kunin ang mga unang ilang aralin sa kurikulum na ito bilang isang [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) sa Microsoft Learn! -Bukod dito, isang mababang-pader na pagsusulit bago ang klase ang nagsisilbing intensyon ng estudyante sa pag-aaral ng isang paksa, habang ang pangalawang pagsusulit pagkatapos ng klase ay nagsisiguro ng karagdagang pagkatuto. Dinisenyo ang kurikulum na ito upang maging flexible at masaya, maaari itong kunin nang buo o bahagi lamang. Ang mga proyekto ay nagsisimula sa maliit at unti-unting lumalalim sa pagiging kumplikado hanggang sa pagtatapos ng 12-linggong yugto. +Sa pamamagitan ng pagtiyak na ang nilalaman ay naaayon sa mga proyekto, ginagawang mas nakaka-engganyo ang proseso para sa mga estudyante at mapapalakas ang pag-alala sa mga konsepto. Nagsulat din kami ng ilang mga panimulang aralin sa mga batayan ng JavaScript upang ipakilala ang mga konsepto, na sinamahan ng video mula sa koleksyon ng video tutorial na "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", na ilan sa mga may-akda nito ay nag-ambag sa kurikulum na ito. -Habang sinasadya naming iwasan ang pagpapakilala ng JavaScript frameworks upang magpokus sa mga pangunahing kakayahan na kailangan bilang isang web developer bago gumamit ng framework, ang isang magandang susunod na hakbang sa pagtatapos ng kurikulum na ito ay ang matutunan ang tungkol sa Node.js sa pamamagitan ng isa pang koleksyon ng mga video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Bukod dito, ang isang mababang-peligro na pagsusulit bago ang klase ay nagtatalaga ng layunin ng estudyante patungkol sa pag-aaral ng isang paksa, habang ang pangalawang pagsusulit pagkatapos ng klase ay nagsisiguro ng mas matagal na pag-alala. Dinisenyo ang kurikulum na ito upang maging flexible at masaya at maaaring kunin nang buo o bahagi lamang. Ang mga proyekto ay nagsisimula sa maliit at nagiging mas kumplikado sa pagtatapos ng 12-linggong siklo. -> Bisitahin ang aming [Code of Conduct](CODE_OF_CONDUCT.md) at [Contributing](CONTRIBUTING.md) na mga patnubay. Malugod naming tinatanggap ang iyong mga konstruktibong puna! +Habang sinadya naming iwasan ang pagpapakilala ng JavaScript frameworks upang magpokus sa mga pangunahing kasanayan na kailangan bilang isang web developer bago gumamit ng framework, isang magandang susunod na hakbang sa pagtapos ng kurikulum na ito ay ang pag-aaral tungkol sa Node.js sa pamamagitan ng isa pang koleksyon ng mga video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +> Bisitahin ang aming [Code of Conduct](CODE_OF_CONDUCT.md) at [Contributing](CONTRIBUTING.md) na mga gabay. Tinatanggap namin ang iyong makabuluhang puna! ## 🧭 Offline na pag-access -Maaari mong patakbuhin ang dokumentasyong ito nang offline gamit ang [Docsify](https://docsify.js.org/#/). I-fork ang repo, [i-install ang Docsify](https://docsify.js.org/#/quickstart) sa iyong lokal na makina, at pagkatapos sa root folder ng repo na ito, i-type ang `docsify serve`. Ihahain ang website sa port 3000 sa iyong localhost: `localhost:3000`. +Maaari mong patakbuhin ang dokumentasyong ito offline gamit ang [Docsify](https://docsify.js.org/#/). I-fork ang repo na ito, [i-install ang Docsify](https://docsify.js.org/#/quickstart) sa iyong lokal na makina, at sa root folder ng repo na ito, i-type ang `docsify serve`. Ang website ay ihahain sa port 3000 sa iyong localhost: `localhost:3000`. ## πŸ“˜ PDF +Maaaring mahanap ang PDF ng lahat ng mga aralin [dito](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). -Isang PDF ng lahat ng mga aralin ay matatagpuan [dito](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). +## πŸŽ’ Iba Pang Kurso -## πŸŽ’ Iba Pang Mga Kurso Ang aming koponan ay gumagawa ng iba pang mga kurso! Tingnan ang: @@ -229,21 +259,21 @@ Ang aming koponan ay gumagawa ng iba pang mga kurso! Tingnan ang: ## Pagkuha ng Tulong -Kung ikaw ay natigil o may mga katanungan tungkol sa paggawa ng mga AI app. Sumali sa mga kapwa mag-aaral at mga may karanasang developer sa mga talakayan tungkol sa MCP. Ito ay isang suportadong komunidad kung saan malugod na tinatanggap ang mga tanong at malayang naibabahagi ang kaalaman. +Kung ikaw ay naipit o may mga tanong tungkol sa paggawa ng mga AI app. Sumali sa mga kapwa mag-aaral at may karanasang mga developer sa talakayan tungkol sa MCP. Ito ay isang sumusuportang komunidad kung saan malugod ang mga tanong at malayang ibinabahagi ang kaalaman. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Kung mayroon kang feedback sa produkto o mga error habang nagtatayo, bisitahin ang: +Kung mayroon kang puna sa produkto o mga error habang nagtatayo, bisitahin: [![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) ## Lisensya -Ang repositoryong ito ay lisensyado sa ilalim ng MIT license. Tingnan ang [LICENSE](../../LICENSE) file para sa karagdagang impormasyon. +Ang repositoryong ito ay lisensyado sa ilalim ng MIT license. Tingnan ang [LICENSE](../../LICENSE) na file para sa karagdagang impormasyon. --- -**Paunawa**: -Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat nagsusumikap kami para sa katumpakan, pakitandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o di-tumpak na impormasyon. Ang orihinal na dokumento sa kanyang sariling wika ang dapat ituring na pinakaawtoritatibong sanggunian. Para sa mahahalagang impormasyon, inirerekomenda ang propesyonal na pagsasaling-tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na nagmula sa paggamit ng pagsasaling ito. +**Pababala**: +Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat aming pinagsisikapan ang kawastuhan, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o di-tumpak na bahagi. Ang orihinal na dokumento sa wikang likas nito ang dapat ituring na pangunahing sanggunian. Para sa mahahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na maaaring magmula sa paggamit ng pagsasaling ito. \ No newline at end of file