diff --git a/translations/id/.co-op-translator.json b/translations/id/.co-op-translator.json index 0edc028dd..f44b6e615 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": "bec5e35642176d9e483552bfc82996d8", - "translation_date": "2026-03-06T12:51:16+00:00", + "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d", + "translation_date": "2026-03-27T19:17:05+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-03-06T13:05:28+00:00", + "translation_date": "2026-03-27T19:26:05+00:00", "source_file": "AGENTS.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 f9e050010..ecf2649d2 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,12 +1,12 @@ # Pengenalan Bahasa Pemrograman dan Alat Pengembang Modern -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! +Halo, calon pengembang masa depan! πŸ‘‹ Boleh saya ceritakan sesuatu yang masih membuat saya merinding setiap hari? Kamu akan segera menemukan bahwa pemrograman bukan hanya tentang komputer – ini tentang memiliki kekuatan super nyata untuk mewujudkan ide-ide terliarmu! -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! +Kamu tahu momen ketika kamu menggunakan aplikasi favorit dan semuanya terasa sangat tepat? Saat kamu mengetuk tombol dan sesuatu yang benar-benar ajaib terjadi sehingga membuatmu berkata "wow, bagaimana mereka MELAKUKANNYA?" Nah, seseorang seperti kamu – mungkin sedang duduk di kedai kopi favoritnya pukul 2 pagi sambil menyeruput espresso ketiga – yang menulis kode yang menciptakan keajaiban itu. Dan ini yang akan membuatmu terkagum: pada akhir pelajaran ini, kamu tidak hanya akan memahami bagaimana mereka melakukannya, tapi kamu juga akan ingin mencobanya sendiri! -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! +Dengar, saya benar-benar mengerti jika pemrograman terasa menakutkan sekarang. Saat pertama kali mulai, saya jujur berpikir kamu harus menjadi jenius matematika atau sudah coding sejak usia lima tahun. Tapi ini yang benar-benar mengubah pandangan saya: pemrograman persis seperti belajar berbicara dalam bahasa baru. Kamu mulai dengan "halo" dan "terima kasih," lalu belajar memesan kopi, dan sebelum kamu sadar, kamu sudah berdiskusi filsafat yang mendalam! Bedanya, di sini kamu berbicara dengan komputer, dan sungguh? Mereka adalah rekan bicara paling sabar yang pernah kamu temui – mereka tidak pernah menghakimi kesalahanmu dan selalu senang mencoba lagi! -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! +Hari ini, kita akan menjelajahi alat-alat luar biasa yang membuat pengembangan web modern tidak hanya mungkin, tapi benar-benar adiktif. Saya berbicara tentang editor, browser, dan alur kerja yang sama yang digunakan pengembang di Netflix, Spotify, dan studio aplikasi indie favoritmu setiap hari. Dan inilah bagian yang akan membuatmu menari kegirangan: sebagian besar alat profesional dan standar industri ini benar-benar gratis! ![Intro Programming](../../../../translated_images/id/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac) @@ -20,71 +20,72 @@ journey Ikhtisar Alat: 5: You section Jelajahi Editor Kode: 4: You - Peramban & Alat Pengembang: 5: You + Peramban & DevTools: 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 menyenangkan, saya penasaran – apa yang sudah kamu ketahui tentang dunia pemrograman ini? Dan dengarkan, jika kamu melihat pertanyaan-pertanyaan ini dan berpikir "Saya benar-benar tidak tahu apa-apa tentang ini," itu tidak hanya oke, itu sempurna! Itu berarti kamu berada di tempat yang tepat. Anggaplah kuis ini seperti pemanasan sebelum olahraga – kita hanya memanaskan otot otakmu! [Ikuti kuis pra-pelajaran](https://ff-quizzes.netlify.app/web/) -## Petualangan yang Akan Kita Lakukan 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: +## Petualangan yang Akan Kita Jalani 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! +Oke, saya benar-benar girang tentang apa yang akan kita jelajahi hari ini! Serius, saya ingin sekali melihat ekspresimu ketika beberapa konsep ini tiba-tiba nyambung. Ini perjalanan luar biasa yang akan kita tempuh bersama: -> πŸ’‘ **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! +- **Apa sebenarnya pemrograman itu (dan mengapa itu hal paling keren!)** – Kita akan menemukan bagaimana kode secara harafiah adalah sihir tak kasat mata yang menggerakkan segala sesuatu di sekitarmu, dari alarm yang entah bagaimana tahu kalau itu Senin pagi hingga algoritma yang secara sempurna mengkurasi rekomendasi Netflix-mu +- **Bahasa pemrograman dan kepribadian menakjubkan mereka** – Bayangkan kamu masuk ke sebuah pesta di mana setiap orang memiliki kekuatan super dan cara menyelesaikan masalah yang sangat berbeda. Itulah dunia bahasa pemrograman, dan kamu akan senang bertemu mereka! +- **Blok bangunan dasar yang membuat sihir digital terjadi** – Anggap ini seperti set LEGO kreatif terbaik. Setelah kamu memahami bagaimana potongan-potongan ini menyatu, kamu akan menyadari kamu benar-benar bisa membangun apa saja yang kamu bayangkan +- **Alat profesional yang akan membuatmu merasa seperti baru dipasangkan tongkat penyihir** – Saya tidak berlebihan – alat-alat ini benar-benar membuatmu merasa punya kekuatan super, dan bagian terbaiknya? Mereka adalah yang sama yang digunakan para profesional! -> 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)! +> πŸ’‘ **Ini dia:** Jangan coba menghafal semuanya hari ini! Sekarang, saya hanya ingin kamu merasakan percikan semangat tentang apa yang mungkin terjadi. Detail akan melekat secara alami saat kita berlatih bersama – begitulah cara belajar yang sebenarnya! -## Jadi Sebenarnya Apa Itu *Pemrograman*? +> Kamu bisa mengambil pelajaran ini di [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -Oke, mari kita jawab pertanyaan sejuta dolar: apa sebenarnya pemrograman? +## Jadi, 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? πŸ˜… +Baiklah, mari kita jawab pertanyaan jutaan dolar: apa sebenarnya pemrograman itu? -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). +Saya akan ceritakan sebuah kisah yang mengubah cara saya memandang ini. Minggu lalu, saya mencoba menjelaskan kepada ibu saya bagaimana menggunakan remote TV pintar baru kami. Saya menyadari saya berkata hal-hal seperti "Tekan tombol merah, tapi bukan tombol merah besar, tombol merah kecil di sebelah kiri... bukan, sebelah kiri satumu... oke, sekarang tahan dua detik, bukan satu, bukan tiga..." Kedengarannya familiar? πŸ˜… -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. +Itulah pemrograman! Seni memberikan instruksi sangat rinci langkah demi langkah kepada sesuatu yang sangat kuat tapi harus dijelaskan semuanya dengan sempurna. Bedanya, alih-alih menjelaskan kepada ibumu (yang bisa bertanya "tombol merah yang mana?!"), kamu menjelaskan kepada komputer (yang melakukan persis apa yang kamu katakan, bahkan jika apa yang kamu katakan tidak persis seperti yang kamu maksud). -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! +Ini yang membuat saya tercengang saat pertama belajar: komputer sebenarnya cukup sederhana pada intinya. Mereka hanya mengerti dua hal – 1 dan 0, yang pada dasarnya adalah "ya" dan "tidak" atau "nyala" dan "mati." Itu saja! Tapi ini yang membuatnya ajaib – kita tidak harus berbicara dalam 1 dan 0 seperti di film The Matrix. Di sinilah **bahasa pemrograman** datang sebagai penyelamat. Mereka seperti penerjemah terbaik di dunia yang mengubah pikiran manusia biasa menjadi bahasa komputer. -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? +Dan ini yang masih membuat saya merinding setiap pagi saat bangun: secara harafiah *semua* hal digital dalam hidupmu dimulai dari seseorang seperti kamu, mungkin sedang duduk di piyama dengan secangkir kopi, mengetik kode di laptop mereka. Filter Instagram yang membuatmu tampak sempurna? Seseorang yang menulis kodenya. Rekomendasi yang membawamu ke lagu favorit baru? Seorang pengembang yang membuat algoritmanya. Aplikasi yang membantumu membagi tagihan makan malam dengan teman? Ya, seseorang berpikir "ini menyebalkan, saya yakin bisa memperbaikinya" dan kemudian… mereka melakukannya! -βœ… **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. +Ketika kamu belajar pemrograman, kamu bukan hanya mendapatkan keterampilan baru – kamu menjadi bagian dari komunitas luar biasa para pemecah masalah yang menghabiskan hari-hari mereka dengan berpikir, "Bagaimana kalau saya membangun sesuatu yang membuat hari seseorang jadi sedikit lebih baik?" Jujur, apa yang lebih keren dari itu? -### 🧠 **Waktu Cek: Bagaimana Perasaanmu?** +βœ… **Fakta Menarik**: Ini sesuatu yang sangat keren untuk dicari saat kamu punya waktu luang – siapa menurutmu programmer komputer pertama di dunia? Saya beri petunjuk: mungkin bukan orang yang kamu kira! Cerita tentang orang ini sungguh menarik dan menunjukkan bahwa pemrograman selalu tentang pemecahan masalah kreatif dan berpikir di luar kotak. -**Luangkan waktu untuk merenung:** -- Apakah ide "memberikan instruksi ke komputer" sekarang masuk akal buatmu? +### 🧠 **Waktunya Mengecek: Bagaimana Perasaanmu?** + +**Luangkan waktu sejenak untuk merenung:** +- Apakah ide tentang "memberi instruksi kepada komputer" masuk akal bagimu sekarang? - Bisakah kamu memikirkan tugas sehari-hari yang ingin kamu otomatisasi dengan pemrograman? -- Pertanyaan apa yang mulai muncul di benakmu tentang hal pemrograman ini? +- Pertanyaan apa yang muncul di pikiranmu tentang segala hal tentang pemrograman ini? -> **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! +> **Ingat:** Sangat normal jika beberapa konsep terasa membingungkan saat ini. Belajar pemrograman seperti belajar bahasa baru – butuh waktu bagi otakmu untuk membangun jalur saraf itu. Kamu sudah melakukan dengan baik! -## Bahasa Pemrograman Itu Seperti Rasa-Rasa Sihir yang Berbeda +## Bahasa Pemrograman Seperti Berbagai Rasa Sihir -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. +Oke, ini mungkin terdengar aneh, tapi ikut aku ya – bahasa pemrograman itu seperti berbagai jenis musik. Pikirkan: kamu punya jazz yang halus dan improvisasional, rock yang kuat dan lugas, klasik yang anggun dan terstruktur, dan hip-hop yang kreatif dan ekspresif. Setiap gaya punya getaran sendiri, komunitas penggemar yang bersemangat, dan cocok untuk suasana dan kesempatan berbeda-beda. -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! πŸ˜„). +Bahasa pemrograman bekerja dengan cara yang sama! Kamu tidak akan menggunakan bahasa yang sama untuk membuat game mobile yang menyenangkan dengan yang kamu gunakan untuk mengolah data iklim dalam jumlah besar, seperti kamu tidak akan memainkan death metal di kelas yoga (yah, kebanyakan kelas yoga sih! πŸ˜„). -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! +Tapi ini yang selalu membuatku terkagum setiap kali memikirkannya: bahasa-bahasa ini seperti punya penerjemah paling sabar dan cerdas di dunia duduk tepat di sebelahmu. Kamu bisa mengungkapkan ide dengan cara yang alami bagi otak manusia, dan mereka mengurus semua pekerjaan rumit menerjemahkan itu ke dalam 1 dan 0 yang komputer benar-benar mengerti. Ini seperti punya teman yang benar-benar fasih dalam "kreativitas manusia" dan "logika komputer" – dan mereka tak pernah lelah, tak butuh istirahat kopi, dan tak pernah menghakimi jika kamu bertanya hal sama dua kali! -### Bahasa Pemrograman Populer dan Kegunaannya +### Bahasa Pemrograman Populer dan Penggunaannya ```mermaid mindmap root((Bahasa Pemrograman)) - Pengembangan Web + Web Development JavaScript Sihir Frontend Situs Web Interaktif @@ -95,11 +96,11 @@ mindmap Python Ilmu Data Pembelajaran Mesin - Otomasi + Otomatisasi R Statistik - Penelitian - Aplikasi Mobile + Riset + Mobile Apps Java Android Perusahaan @@ -109,52 +110,52 @@ mindmap Kotlin Android Modern Lintas Platform - Sistem & Kinerja + Systems & Performance C++ - Game - Kritis Kinerja + Permainan + Performa Kritis Rust Keamanan Memori Pemrograman Sistem Go Layanan Cloud - Backend yang Dapat Diskalakan + Backend Skala Besar ``` | Bahasa | Terbaik Untuk | Mengapa Populer | |----------|----------|------------------| | **JavaScript** | Pengembangan web, antarmuka pengguna | Berjalan di browser dan menggerakkan situs interaktif | -| **Python** | Ilmu data, otomatisasi, AI | Mudah dibaca dan dipelajari, perpustakaan kuat | +| **Python** | Data science, otomasi, AI | Mudah dibaca dan dipelajari, perpustakaan yang kuat | | **Java** | Aplikasi perusahaan, aplikasi Android | Independen platform, kuat untuk sistem besar | -| **C#** | Aplikasi Windows, pengembangan game | Dukungan ekosistem Microsoft yang kuat | +| **C#** | Aplikasi Windows, pengembangan game | Dukungan kuat dari ekosistem Microsoft | | **Go** | Layanan cloud, sistem backend | Cepat, sederhana, dirancang untuk komputasi modern | -### Bahasa Tingkat Tinggi vs Bahasa Tingkat Rendah +### Bahasa Tingkat Tinggi vs. Tingkat Rendah -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! +Oke, ini sebenarnya konsep yang membingungkan saya saat pertama belajar, jadi saya akan bagikan analogi yang akhirnya membuat saya paham – dan saya harap ini juga membantumu! -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? πŸ˜…): +Bayangkan kamu sedang mengunjungi negara dimana kamu tidak bisa bahasa lokal, dan kamu sangat butuh menemukan kamar mandi terdekat (kita semua pernah merasakan, kan? πŸ˜…): -- **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 rendah** seperti mempelajari dialek lokal sampai kamu bisa ngobrol dengan nenek penjual buah di pojok menggunakan referensi budaya, bahasa gaul lokal, dan lelucon dalam yang hanya dimengerti orang yang besar di sana. Sangat mengesankan dan sangat efisien... jika kamu memang fasih! Tapi sangat membingungkan kalau kamu cuma ingin menemukan kamar mandi. -- **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. +- **Pemrograman tingkat tinggi** seperti punya teman lokal yang hebat yang langsung mengerti. Kamu tinggal bilang "Saya sangat perlu cari kamar mandi" dalam bahasa Inggris sederhana, dan dia yang mengurus terjemahan budaya dan memberi petunjuk dengan cara yang masuk akal bagi otak non-lokalmu. Dalam istilah pemrograman: -- **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! +- **Bahasa tingkat rendah** (seperti Assembly atau C) membiarkan kamu berbicara sangat rinci dengan perangkat keras komputer sebenarnya, tapi kamu harus berpikir seperti mesin, yang... yah, mari bilang itu perpindahan mental besar! +- **Bahasa tingkat tinggi** (seperti JavaScript, Python, atau C#) membiarkan kamu berpikir seperti manusia sementara mereka mengurus semua bahasa mesin di belakang layar. Plus, mereka punya komunitas yang sangat ramah yang mengingat saat mereka baru belajar dan benar-benar ingin membantu! -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! +Tebak bahasa mana yang akan saya sarankan kamu mulai? πŸ˜‰ Bahasa tingkat tinggi seperti roda latihan yang sebenarnya tidak pernah ingin kamu lepaskan karena membuat pengalaman jadi jauh lebih menyenangkan! ```mermaid flowchart TB - A["πŸ‘€ Pikiran Manusia:
'Saya ingin menghitung angka Fibonacci'"] --> B{Pilih Tingkat Bahasa} + A["πŸ‘€ Pikiran Manusia:
'Saya ingin menghitung angka Fibonacci'"] --> B{Pilih Level Bahasa} B -->|Tingkat Tinggi| C["🌟 JavaScript/Python
Mudah dibaca dan ditulis"] - B -->|Tingkat Rendah| D["βš™οΈ Assembly/C
Kontrol perangkat keras langsung"] + B -->|Tingkat Rendah| D["βš™οΈ Assembly/C
Kontrol langsung perangkat keras"] C --> E["πŸ“ Tulis: fibonacci(10)"] D --> F["πŸ“ Tulis: mov r0,#00
sub r0,r0,#01"] - E --> G["πŸ€– Pemahaman Komputer:
Penerjemah menangani kerumitan"] + E --> G["πŸ€– Pemahaman Komputer:
Penerjemah menangani kompleksitas"] F --> G G --> H["πŸ’» Hasil Sama:
0, 1, 1, 2, 3, 5, 8, 13..."] @@ -163,18 +164,18 @@ flowchart TB style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### Aku Akan Tunjukkan Kenapa Bahasa Tingkat Tinggi Jauh Lebih Ramah +### Ayo Saya Tunjukkan Kenapa 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! +Oke, saya akan tunjukkan sesuatu yang sempurna memperlihatkan kenapa saya jatuh cinta dengan bahasa tingkat tinggi, tapi pertama – saya ingin kamu berjanji. Ketika kamu melihat contoh kode pertama, jangan panik! Ini memang dimaksudkan untuk terlihat menakutkan. Itu tepatnya yang ingin saya tunjukkan! -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 membuat yang disebut deret Fibonacci – pola matematika indah di mana setiap angka adalah jumlah dari dua angka sebelumnya: 0, 1, 1, 2, 3, 5, 8, 13... (Fakta seru: kamu akan menemukan pola ini di mana-mana di alam – spiral biji bunga matahari, pola kerucut pinus, bahkan cara galaksi terbentuk!) -Siap melihat bedanya? Ayo! +Siap untuk melihat perbedaannya? Mari kita mulai! **Bahasa tingkat tinggi (JavaScript) – Ramah manusia:** ```javascript -// Langkah 1: Pengaturan dasar Fibonacci +// Langkah 1: Penyiapan dasar Fibonacci const fibonacciCount = 10; let current = 0; let next = 1; @@ -183,10 +184,10 @@ console.log('Fibonacci sequence:'); ``` **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 +- **Mendeklarasikan** konstanta untuk menentukan berapa banyak angka Fibonacci yang ingin dibuat +- **Menginisialisasi** dua variabel untuk melacak angka saat ini dan berikutnya dalam deret +- **Mengatur** nilai awal (0 dan 1) yang mendefinisikan pola Fibonacci +- **Menampilkan** pesan header untuk mengenali keluaran kita ```javascript // Langkah 2: Hasilkan urutan dengan sebuah loop @@ -200,11 +201,11 @@ for (let i = 0; i < fibonacciCount; i++) { } ``` -**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 +**Menjelaskan apa yang terjadi di sini:** +- **Melakukan loop** lewat setiap posisi dalam deret menggunakan `for` loop +- **Menampilkan** setiap angka dengan posisinya menggunakan format template literal +- **Menghitung** angka Fibonacci berikutnya dengan menambahkan nilai saat ini dan berikutnya +- **Memperbarui** variabel pelacak untuk pindah ke iterasi berikutnya ```javascript // Langkah 3: Pendekatan fungsional modern @@ -223,9 +224,9 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**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 +**Dalam kode di atas, kita telah:** +- **Membuat** fungsi yang bisa digunakan ulang menggunakan sintaks panah modern +- **Membangun** array untuk menyimpan seluruh deret daripada 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 @@ -256,28 +257,27 @@ back add r0,r1 end ``` -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. +Perhatikan bagaimana versi JavaScript hampir seperti instruksi bahasa Inggris, sementara versi Assembly menggunakan perintah misterius yang langsung mengendalikan prosesor komputer. Keduanya melakukan tugas yang sama persis, tapi bahasa tingkat tinggi jauh lebih mudah dipahami, ditulis, dan dirawat oleh manusia. -**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 +**Perbedaan utama yang akan kamu perhatikan:** +- **Keterbacaan**: JavaScript menggunakan nama yang deskriptif seperti `fibonacciCount` sementara Assembly menggunakan label yang sulit dimengerti seperti `r0`, `r1` +- **Komentar**: Bahasa tingkat tinggi mendorong komentar penjelasan yang membuat kode menjadi terdokumentasi sendiri - **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 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! +- **Pemeliharaan**: Memperbarui versi JavaScript untuk kebutuhan yang berbeda sangatlah mudah dan jelas +βœ… **Tentang deret Fibonacci**: Pola angka yang luar biasa indah ini (di mana setiap angka adalah jumlah dari dua angka sebelumnya: 0, 1, 1, 2, 3, 5, 8...) muncul secara harfiah *di mana-mana* dalam alam! Kamu akan menemukannya pada spiral bunga matahari, pola kerucut pinus, cara cangkang nautilus melengkung, dan bahkan pada cara cabang pohon tumbuh. Sangat menakjubkan bagaimana matematika dan kode bisa membantu kita memahami dan menciptakan kembali pola yang digunakan alam untuk menciptakan keindahan! ## Blok Bangunan yang Membuat Keajaiban Terjadi -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! +Baiklah, sekarang setelah kamu melihat seperti apa bahasa pemrograman dalam praktik, mari kita bahas bagian dasar yang membentuk hampir setiap program yang pernah ditulis. Anggap saja ini sebagai bahan utama dalam resep favoritmu – begitu kamu mengerti fungsi masing-masing, kamu akan bisa membaca dan menulis kode dalam hampir semua bahasa! -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! πŸ˜„ +Ini seperti mempelajari tata bahasa pemrograman. Ingat waktu di sekolah dulu 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 mudah dibandingkan tata bahasa Inggris! πŸ˜„ -### Pernyataan: Instruksi Langkah-demi-Langkah +### Pernyataan: Instruksi Langkah demi Langkah -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." +Mari mulai dengan **pernyataan** – ini seperti kalimat individual dalam percakapan dengan komputer kamu. Setiap pernyataan memberitahu komputer untuk melakukan satu hal spesifik, seperti memberikan arahan: "Belok kiri di sini," "Berhenti di lampu merah," "Parkir di tempat itu." -Yang saya suka dari pernyataan adalah biasanya mereka sangat mudah dibaca. Lihat ini: +Yang saya suka dari pernyataan adalah bagaimana mereka biasanya mudah dibaca. Lihat ini: ```javascript // Pernyataan dasar yang melakukan tindakan tunggal @@ -286,10 +286,10 @@ console.log("Hello, world!"); const sum = 5 + 3; ``` -**Ini yang dilakukan kode ini:** -- **Mendeklarasikan** variabel konstan untuk menyimpan nama pengguna -- **Menampilkan** pesan sapaan ke output konsol -- **Menghitung** dan menyimpan hasil operasi matematika +**Berikut yang dilakukan kode ini:** +- **Deklarasikan** variabel konstan untuk menyimpan nama pengguna +- **Tampilkan** pesan sapaan di output konsol +- **Hitung** dan simpan hasil operasi matematis ```javascript // Pernyataan yang berinteraksi dengan halaman web @@ -297,19 +297,19 @@ document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**Langkah demi langkah, ini yang terjadi:** -- **Mengubah** judul halaman web yang muncul di tab browser -- **Mengganti** warna latar belakang seluruh bodi halaman +**Langkah demi langkah, berikut yang terjadi:** +- **Ubah** judul halaman web yang muncul di tab browser +- **Ganti** warna latar belakang seluruh badan halaman -### Variabel: Sistem Memori Programmu +### Variabel: Sistem Memori Program Kamu -Oke, **variabel** sebenarnya adalah salah satu konsep favorit saya untuk diajarkan karena sangat mirip dengan hal-hal yang sudah kamu gunakan setiap hari! +Oke, **variabel** jujur saja adalah salah satu konsep favorit saya untuk diajarkan karena sangat mirip dengan hal-hal yang kamu gunakan setiap hari! -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. +Pikirkan sejenak tentang daftar kontak di ponselmu. Kamu tidak menghafal nomor telepon semua orang – sebaliknya, kamu menyimpan "Ibu," "Teman Terbaik," atau "Tempat Pizza yang Antar Sampai Jam 2 Pagi" dan membiarkan ponselmu mengingat nomor sebenarnya. Variabel bekerja persis seperti itu! Mereka seperti wadah berlabel di mana program kamu dapat menyimpan informasi dan mengaksesnya kembali nanti dengan nama yang masuk akal. -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! +Yang keren banget: variabel bisa berubah saat program kamu berjalan (makanya namanya "variabel" – lihat permainan katanya?). Sama seperti kamu mungkin memperbarui kontak tempat pizza ketika menemukan tempat yang lebih baik, variabel bisa diperbarui saat program kamu mempelajari informasi baru atau situasi berubah! -Mari saya tunjukkan betapa sederhananya ini: +Biarkan saya tunjukkan betapa sederhananya ini: ```javascript // Langkah 1: Membuat variabel dasar @@ -320,10 +320,10 @@ let isRaining = false; ``` **Memahami konsep ini:** -- **Menyimpan** nilai yang tidak berubah dalam variabel `const` (seperti nama situs) -- **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 +- **Simpan** nilai yang tidak berubah dalam variabel `const` (seperti nama situs) +- **Gunakan** `let` untuk nilai yang bisa berubah selama program berjalan +- **Tentukan** tipe data berbeda: string (teks), angka, dan boolean (true/false) +- **Pilih** nama deskriptif yang menjelaskan isi setiap variabel ```javascript // Langkah 2: Bekerja dengan objek untuk mengelompokkan data terkait @@ -334,10 +334,10 @@ const weatherData = { }; ``` -**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 +**Pada kode di atas, kita:** +- **Buat** objek untuk mengelompokkan informasi cuaca terkait +- **Atur** beberapa data di bawah satu nama variabel +- **Gunakan** pasangan kunci-nilai untuk memberi label setiap informasi dengan jelas ```javascript // Langkah 3: Menggunakan dan memperbarui variabel @@ -349,32 +349,32 @@ currentWeather = "cloudy"; temperature = 68; ``` -**Mari kita pahami setiap bagian:** -- **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 bermakna +**Mari pahami tiap bagian:** +- **Tampilkan** informasi menggunakan template literal dengan sintaks `${}` +- **Akses** properti objek menggunakan notasi titik (`weatherData.windSpeed`) +- **Perbarui** variabel yang dideklarasikan dengan `let` untuk mencerminkan kondisi yang berubah +- **Gabungkan** beberapa variabel untuk membuat pesan bermakna ```javascript -// Langkah 4: Destrukturisasi modern untuk kode yang lebih bersih +// Langkah 4: Destructuring modern untuk kode yang lebih bersih const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**Yang perlu kamu ketahui:** -- **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 +**Yang perlu kamu tahu:** +- **Ekstrak** properti spesifik dari objek menggunakan destructuring assignment +- **Buat** variabel baru otomatis dengan nama yang sama seperti kunci objek +- **Permudah** kode dengan menghindari notasi titik yang berulang-ulang -### Alur Kontrol: Mengajarkan Programmu Berpikir +### Alur Kontrol: Mengajarkan Program Kamu Berpikir -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. +Oke, di sinilah pemrograman jadi benar-benar menakjubkan! **Alur kontrol** pada dasarnya mengajarkan program bagaimana membuat keputusan cerdas, persis seperti yang kamu lakukan setiap hari tanpa berpikir. -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! +Bayangkan ini: pagi ini kamu mungkin melewati sesuatu seperti "Jika hujan, saya akan membawa payung. Jika dingin, saya akan pakai jaket. Jika terlambat, saya akan melewatkan sarapan dan ambil kopi di jalan." Otakmu secara alami mengikuti logika if-then ini puluhan kali setiap hari! -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! +Ini yang membuat program terasa cerdas dan hidup, bukan hanya mengikuti skrip membosankan yang bisa diprediksi. Mereka benar-benar bisa melihat situasi, mengevaluasi apa yang terjadi, dan merespons dengan tepat. Seperti memberimu program sebuah otak yang bisa beradaptasi dan membuat pilihan! -Mau lihat betapa indahnya ini bekerja? Mari saya tunjukkan: +Ingin lihat bagaimana ini bekerja dengan indah? Saya tunjukkan: ```javascript // Langkah 1: Logika kondisional dasar @@ -388,11 +388,11 @@ if (userAge >= 18) { } ``` -**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 +**Kode ini melakukan:** +- **Cek** apakah usia pengguna memenuhi syarat pemilih +- **Jalankan** blok kode yang berbeda berdasarkan hasil kondisi +- **Hitung** dan tampilkan berapa lama sampai memenuhi syarat memilih jika di bawah 18 +- **Berikan** umpan balik spesifik dan membantu untuk tiap skenario ```javascript // Langkah 2: Beberapa kondisi dengan operator logika @@ -408,22 +408,22 @@ if (userAge >= 18 && hasPermission) { } ``` -**Menguraikan apa yang terjadi di sini:** -- **Menggabungkan** beberapa kondisi menggunakan operator `&&` (dan) -- **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 +**Menerangkan apa yang terjadi di sini:** +- **Gabungkan** kondisi dengan operator `&&` (dan) +- **Buat** hierarki kondisi menggunakan `else if` untuk beberapa skenario +- **Tangani** semua kemungkinan dengan pernyataan `else` terakhir +- **Berikan** umpan balik jelas dan dapat ditindaklanjuti untuk setiap situasi berbeda ```javascript -// Langkah 3: Kondisional singkat dengan operator ternary +// Langkah 3: Kondisional ringkas dengan operator ternary const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` **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 +- **Gunakan** operator ternary (`? :`) untuk kondisi dua pilihan sederhana +- **Tulis** kondisi dulu, diikuti `?`, lalu hasil benar, lalu `:`, lalu hasil salah +- **Terapkan** pola ini saat perlu menetapkan nilai berdasarkan kondisi ```javascript // Langkah 4: Menangani beberapa kasus spesifik @@ -446,23 +446,23 @@ switch (dayOfWeek) { } ``` -**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 +**Kode ini melakukan:** +- **Cocokkan** nilai variabel dengan berbagai kasus spesifik +- **Kelompokkan** kasus serupa (hari kerja vs. akhir pekan) +- **Jalankan** blok kode yang sesuai saat ada kecocokan +- **Sertakan** kasus `default` untuk menangani nilai tak terduga +- **Gunakan** pernyataan `break` untuk mencegah kode lanjut ke kasus berikutnya -> πŸ’‘ **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. +> πŸ’‘ **Analogi dunia nyata**: Anggap alur kontrol seperti GPS paling sabar di dunia yang memberimu arahan. Mungkin berkata "Jika ada kemacetan di Main Street, ambil jalan tol. Jika konstruksi menutup jalan tol, coba rute pemandangan." Program menggunakan logika kondisional yang sama persis untuk merespon dengan cerdas situasi berbeda dan selalu memberikan pengalaman terbaik bagi pengguna. -### 🎯 **Cek Konsep: Menguasai Blok Bangunan** +### 🎯 **Pengecekan Konsep: Penguasaan Blok Bangunan** -**Yuk cek sejauh mana pemahamanmu tentang dasar-dasar:** +**Mari lihat seberapa faham kamu tentang dasar-dasarnya:** - 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? +- Pikirkan skenario dunia nyata di mana kamu akan menggunakan keputusan if-then (seperti contoh pemilihan suara) +- Apa satu hal tentang logika pemrograman yang mengejutkanmu? -**Penyemangat cepat:** +**Peningkat kepercayaan diri singkat:** ```mermaid flowchart LR A["πŸ“ Pernyataan
(Instruksi)"] --> B["πŸ“¦ Variabel
(Penyimpanan)"] --> C["πŸ”€ Alur Kontrol
(Keputusan)"] --> D["πŸŽ‰ Program Berfungsi!"] @@ -472,24 +472,24 @@ flowchart LR 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! +βœ… **Apa yang akan datang**: Kita akan sangat bersenang-senang mempelajari lebih dalam konsep-konsep ini dalam perjalanan luar biasa bersama! Saat ini, cukup fokus pada rasa semangat untuk semua kemungkinan menakjubkan di depanmu. Keterampilan dan teknik spesifik akan mengalir alami saat kita berlatih bersama – saya janji ini akan jauh lebih menyenangkan dari yang kamu kira! -## Alat-Alat Pilihan +## Alat-Alat Kerja -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 jujur saja membuat saya sangat bersemangat sampai hampir tidak bisa menahan diri! πŸš€ Kita akan bicara tentang alat luar biasa yang akan membuatmu merasa seperti baru saja memegang kunci 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 koki punya pisau seimbang sempurna yang terasa seperti perpanjangan tangan mereka? Atau bagaimana musisi punya satu gitar yang seolah menyanyi saat mereka menyentuhnya? Nah, pengembang punya versi alat ajaib ini, dan inilah yang akan benar-benar mengejutkanmu – kebanyakan 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-lompat di kursi membayangkan membagikan ini ke kamu karena alat-alat ini benar-benar merevolusi cara kita membangun perangkat lunak. Kita bicara tentang asisten coding bertenaga AI yang bisa membantu menulis kode kamu (saya tidak bercanda!), lingkungan cloud di mana kamu bisa membangun aplikasi utuh dari mana saja dengan Wi-Fi, dan alat debugging yang begitu canggih mereka seperti punya penglihatan sinar-X untuk programmu. -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! +Dan ini bagian yang masih bikin merinding: ini bukan β€œalat pemula” yang bakal kamu tinggalkan. Ini adalah alat profesional yang sama yang digunakan pengembang di Google, Netflix, dan studio aplikasi indie yang kamu suka saat ini juga. Kamu akan merasa seperti pro menggunakan mereka! ```mermaid graph TD 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)"] + B --> C["🌐 Alat Pengembang Browser
(Pengujian & Debugging)"] + C --> D["⚑ Baris Perintah
(Otomatisasi & Alat)"] + D --> E["πŸ“š Dokumentasi
(Pembelajaran & Referensi)"] E --> F["πŸš€ Aplikasi Web Hebat!"] B -.-> G["πŸ€– Asisten AI
(GitHub Copilot)"] @@ -506,122 +506,121 @@ graph TD ``` ### Editor Kode dan IDE: Sahabat Digital Barumu -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. +Mari kita bicara soal editor kode – ini akan segera jadi tempat favoritmu! Anggap saja itu sebagai tempat suci coding pribadi di mana kamu akan menghabiskan sebagian besar waktu menyusun dan menyempurnakan karya digitalmu. -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! +Tapi keajaiban dari editor modern adalah: mereka bukan hanya editor teks biasa. Mereka seperti mentor coding paling cerdas dan suportif yang duduk di sampingmu 24/7. Mereka menangkap salah ketik sebelum kamu sadari, menyarankan perbaikan yang membuatmu tampak jenius, membantu kamu mengerti apa fungsi tiap potongan kode, dan beberapa bahkan bisa menebak apa yang akan kamu ketik dan menawarkan untuk menyelesaikan pikiranmu! -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! +Saya ingat waktu pertama kali menemukan auto-completion – rasanya seperti hidup di masa depan. Kamu mulai mengetik sesuatu, dan editor berkata, "Hei, apakah kamu pikirkan fungsi ini yang melakukan persis yang kamu butuhkan?" Seperti punya pembaca pikiran sebagai teman coding! **Apa yang membuat editor ini luar biasa?** -Editor kode modern menawarkan berbagai fitur mengesankan yang dirancang untuk meningkatkan produktivitasmu: +Editor kode modern menawarkan sederet fitur mengesankan untuk meningkatkan produktivitasmu: -| 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 | +| Fitur | Fungsi | Manfaat | +|---------|--------------|--------------| +| **Penyorotan Sintaks** | Memberi warna bagian kode berbeda | Membuat kode lebih mudah dibaca dan menemukan kesalahan | +| **Auto-completion** | Menyarankan kode saat mengetik | Mempercepat penulisan kode dan mengurangi salah ketik | +| **Alat Debugging** | Membantu menemukan dan memperbaiki kesalahan | Menghemat waktu troubleshooting berjam-jam | +| **Ekstensi** | Menambahkan fitur khusus | Menyesuaikan editor dengan teknologi apa pun | +| **Asisten AI** | Menyarankan kode dan penjelasan | Mempercepat pembelajaran dan produktivitas | -> πŸŽ₯ **Sumber Video**: Mau lihat alat-alat ini dalam aksi? Tonton [video Tools of the Trade](https://youtube.com/watch?v=69WJeXGBdxg) untuk gambaran lengkap. +> πŸŽ₯ **Sumber Video**: Ingin melihat alat ini bekerja? Tonton [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) untuk gambaran lengkap. -#### Editor Rekomendasi untuk Pengembangan Web +#### Editor yang Direkomendasikan 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 +- Ekosistem ekstensi yang luar biasa - 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 typo kode +- **Ekstensi wajib**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Saran kode bertenaga 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 otomatis kode + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Menangkap kesalahan ejaan di kode -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Berbayar, gratis untuk pelajar) +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Berbayar, gratis untuk mahasiswa) - Alat debugging dan pengujian canggih - Penyelesaian kode cerdas - Kontrol versi bawaan **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 +- [Replit](https://replit.com/) - Cocok untuk belajar dan berbagi kode - [StackBlitz](https://stackblitz.com/) - Pengembangan web full-stack instan -> πŸ’‘ **Tips Memulai**: Mulailah dengan Visual Studio Code – gratis, banyak digunakan di industri, dan punya komunitas besar yang membuat tutorial dan ekstensi berguna. - +> πŸ’‘ **Tip Memulai**: Mulailah dengan Visual Studio Code – gratis, banyak digunakan di industri, dan punya komunitas besar dengan tutorial dan ekstensi bermanfaat. -### Peramban Web: Laboratorium Pengembangan Rahasiamu +### Browser Web: Laboratorium Rahasia Pengembanganmu -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! +Oke, bersiaplah untuk terpesona! Kamu tahu kan selama ini pakai browser buat scroll media sosial dan nonton video? Ternyata mereka menyembunyikan laboratorium pengembang rahasia yang luar biasa selama ini, menunggu kamu menemukannya! -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! +Setiap kali kamu klik kanan pada halaman web dan pilih "Inspect Element," kamu membuka dunia tersembunyi alat pengembang yang jujur saja jauh lebih kuat daripada beberapa perangkat lunak mahal yang dulu saya bayar ratusan dolar. Seperti menemukan bahwa dapur biasa kamu sebenarnya menyimpan laboratorium koki profesional di balik panel rahasia! +Pertama kali seseorang menunjukkan DevTools browser kepada saya, saya menghabiskan sekitar tiga jam hanya mengklik sana-sini dan berkata, "TUNGGU, BISA KAYA GITU JUGA?!" Anda benar-benar bisa mengedit situs web mana pun secara real-time, melihat dengan tepat seberapa cepat semuanya dimuat, menguji bagaimana tampilan situs Anda di berbagai perangkat, dan bahkan melakukan debug JavaScript seperti seorang profesional sejati. Ini benar-benar menakjubkan! **Inilah mengapa browser adalah senjata rahasia Anda:** -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. +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 terperinci tentang kinerja, aksesibilitas, dan potensi masalah. #### Alat Pengembang Browser (DevTools) -Browser modern menyertakan rangkaian pengembangan yang lengkap: +Browser modern menyertakan satu set pengembangan lengkap: | Kategori Alat | Fungsinya | Contoh Penggunaan | -|---------------|--------------|------------------| -| **Element Inspector** | Melihat dan mengedit HTML/CSS secara real-time | Menyesuaikan gaya untuk melihat hasil langsung | +|---------------|-----------|------------------| +| **Element Inspector** | Melihat dan mengedit HTML/CSS secara real-time | Mengatur gaya untuk melihat hasil langsung | | **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 pada berbagai ukuran layar | Menguji desain responsif tanpa perangkat banyak | +| **Network Monitor** | Melacak bagaimana sumber daya dimuat | Optimalkan kinerja dan waktu muat | +| **Accessibility Checker** | Menguji desain inklusif | Memastikan situs Anda bekerja untuk semua pengguna | +| **Device Simulator** | Pratinjau di berbagai ukuran layar | Menguji desain responsif tanpa perangkat tambahan | #### Browser yang Direkomendasikan untuk Pengembangan -- **[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 +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - DevTools standar industri dengan dokumentasi 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 Chromium dengan sumber daya pengembang Microsoft -> ⚠️ **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. +> ⚠️ **Tips Penting Pengujian**: Selalu uji situs web Anda di berbagai browser! Apa yang bekerja dengan sempurna di Chrome mungkin berbeda tampilannya di Safari atau Firefox. Pengembang profesional menguji di semua browser utama untuk memastikan pengalaman pengguna yang konsisten. ### Alat Baris Perintah: Gerbang Menuju Kekuatan Super Pengembang -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!" πŸ˜… +Oke, mari kita bicara jujur tentang baris perintah, karena saya ingin Anda mendengar ini dari seseorang yang benar-benar mengerti. Saat pertama kali saya melihatnya – hanya layar hitam menakutkan dengan teks berkedip – saya benar-benar berpikir, "Tidak, sama sekali tidak! Ini seperti sesuatu dari film hacker tahun 1980-an, dan saya jelas tidak cukup pintar untuk ini!" πŸ˜… -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." +Tapi inilah yang saya harap seseorang telah katakan pada saya waktu itu, dan yang saya katakan pada Anda sekarang: baris perintah itu tidak menakutkan – sebenarnya seperti berbicara langsung dengan komputer Anda. Anggap saja seperti perbedaan antara memesan makanan lewat aplikasi canggih dengan gambar dan menu (yang nyaman dan mudah) versus masuk ke restoran lokal favorit di mana koki tahu persis apa yang Anda suka dan bisa membuat sesuatu yang sempurna hanya dengan Anda bilang "kejutan saya dengan sesuatu yang luar biasa." -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! +Baris perintah adalah tempat para pengembang merasa seperti penyihir sejati. Anda mengetik beberapa kata yang tampak ajaib (oke, itu hanya perintah, tapi terasa ajaib!), tekan enter, dan BOOM – Anda telah membuat seluruh struktur proyek, memasang alat kuat dari seluruh dunia, atau menerapkan aplikasi Anda ke internet agar jutaan orang melihatnya. Setelah Anda merasakan kekuatan itu, jujur saja, itu sangat adiktif! **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. +Meski antarmuka grafis bagus untuk banyak tugas, baris perintah unggul dalam otomatisasi, presisi, dan kecepatan. Banyak alat pengembangan bekerja utamanya melalui baris perintah, dan belajar menggunakannya dengan efisien bisa secara dramatis meningkatkan produktivitas Anda. ```bash -# Langkah 1: Buat dan navigasi ke direktori proyek +# Langkah 1: Buat dan masuk ke direktori proyek mkdir my-awesome-website cd my-awesome-website ``` -**Inilah yang dilakukan kode ini:** +**Ini yang dilakukan kode ini:** - **Membuat** direktori baru bernama "my-awesome-website" untuk proyek Anda -- **Masuk** ke dalam direktori yang baru dibuat untuk mulai bekerja +- **Masuk** ke direktori yang baru dibuat untuk mulai bekerja ```bash # Langkah 2: Inisialisasi proyek dengan package.json npm init -y -# Instal alat pengembangan modern +# Pasang alat pengembangan modern npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Langkah demi langkah, inilah yang terjadi:** +**Langkah demi langkah, ini yang terjadi:** - **Inisialisasi** proyek Node.js baru dengan pengaturan default menggunakan `npm init -y` -- **Pasang** Vite sebagai alat build modern untuk pengembangan cepat dan produksi +- **Pasang** Vite sebagai alat build modern untuk pengembangan cepat dan build produksi - **Tambahkan** Prettier untuk format kode otomatis dan ESLint untuk pemeriksaan kualitas kode -- **Gunakan** flag `--save-dev` untuk menandai ini sebagai dependensi pengembangan saja +- **Gunakan** flag `--save-dev` untuk menandai ini sebagai dependensi dev saja ```bash -# Langkah 3: Buat struktur dan berkas proyek +# Langkah 3: Buat struktur dan file proyek mkdir src assets echo 'My Site

Hello World

' > index.html @@ -629,31 +628,31 @@ echo 'My Site

Hello Wo npx vite ``` -**Dalam kode di atas, kami telah:** -- **Mengorganisir** proyek dengan membuat folder terpisah untuk kode sumber dan aset +**Di atas, kami telah:** +- **Mengorganisir** proyek kami dengan membuat folder terpisah untuk kode sumber dan aset - **Menghasilkan** file HTML dasar dengan struktur dokumen yang benar -- **Menjalankan** server pengembangan Vite untuk live reload dan hot module replacement +- **Memulai** server pengembangan Vite untuk live reload dan hot module replacement -#### Alat Baris Perintah Esensial untuk Pengembangan Web +#### Alat Baris Perintah Penting untuk Pengembangan Web | Alat | Tujuan | Mengapa Anda Membutuhkannya | -|------|---------|-----------------| -| **[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 | +|------|--------|-----------------------------| +| **[Git](https://git-scm.com/)** | Kontrol versi | Melacak perubahan, kolaborasi dengan orang lain, cadangkan pekerjaan Anda | +| **[Node.js & npm](https://nodejs.org/)** | Runtime JavaScript & manajemen paket | Menjalankan JavaScript di luar browser, memasang alat pengembangan modern | +| **[Vite](https://vitejs.dev/)** | Alat build & server dev | Pengembangan super cepat dengan hot module replacement | +| **[ESLint](https://eslint.org/)** | Kualitas kode | Temukan dan perbaiki masalah di JavaScript secara otomatis | +| **[Prettier](https://prettier.io/)** | Format kode | Menjaga kode Anda konsisten diformat dan mudah dibaca | -#### Opsi Khusus Platform +#### Pilihan 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)** πŸ’» - Baris perintah Windows tradisional +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Terminal modern lengkap fitur +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** πŸ’» - Lingkungan scripting kuat +- **[Command Prompt](https://learn.microsoft.com/windows-server/administration/windows-commands/windows-commands)** πŸ’» - Baris perintah tradisional Windows **macOS:** - **[Terminal](https://support.apple.com/guide/terminal/)** πŸ’» - Aplikasi terminal bawaan -- **[iTerm2](https://iterm2.com/)** - Terminal yang ditingkatkan dengan fitur lanjutan +- **[iTerm2](https://iterm2.com/)** - Terminal yang ditingkatkan dengan fitur canggih **Linux:** - **[Bash](https://www.gnu.org/software/bash/)** πŸ’» - Shell Linux standar @@ -661,28 +660,28 @@ npx vite > πŸ’» = Sudah terpasang di sistem operasi -> 🎯 **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. +> 🎯 **Jalur Pembelajaran**: Mulailah dengan perintah dasar seperti `cd` (ganti direktori), `ls` atau `dir` (daftar file), dan `mkdir` (buat folder). Praktikkan 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 menguasai perintah dan teknik otomatisasi yang lebih canggih. ### Dokumentasi: Mentor Belajar Anda yang Selalu Tersedia -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! +Oke, saya ingin berbagi rahasia kecil yang akan membuat Anda merasa jauh lebih baik tentang menjadi pemula: bahkan pengembang paling berpengalaman menghabiskan banyak waktu mereka membaca dokumentasi. Dan itu bukan karena mereka tidak tahu apa yang mereka lakukan – sebenarnya itu tanda kebijaksanaan! -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! +Pikirkan dokumentasi sebagai akses ke guru paling sabar dan berpengetahuan di dunia yang tersedia 24/7. Terjebak dalam masalah pukul 2 pagi? Dokumentasi ada di sana dengan pelukan virtual hangat dan jawaban yang tepat Anda butuhkan. Ingin belajar tentang fitur keren yang sedang dibicarakan semua orang? Dokumentasi mendukung Anda dengan contoh langkah demi langkah. Mencoba memahami mengapa sesuatu bekerja seperti itu? Anda benar – dokumentasi siap menjelaskan dengan cara yang akhirnya membuat Anda paham! -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. +Ada sesuatu yang sangat mengubah perspektif saya: dunia pengembangan web bergerak sangat cepat, dan tidak ada yang (benar-benar tidak ada!) menghafal semuanya. Saya pernah melihat pengembang senior dengan pengalaman 15+ tahun membuka referensi sintaks dasar, dan tahu apa? Itu bukan memalukan – itu cerdas! Ini bukan soal ingatan sempurna; ini soal tahu di mana menemukan jawaban terpercaya dengan cepat dan memahami cara menerapkannya. -**Inilah tempat keajaiban sebenarnya terjadi:** +**Di sinilah 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. +Pengembang profesional menghabiskan sebagian besar waktu mereka membaca dokumentasi – bukan karena mereka tidak tahu apa yang mereka lakukan, tetapi karena lanskap pengembangan web berubah begitu cepat sehingga mengikuti perkembangan membutuhkan pembelajaran berkelanjutan. Dokumentasi yang bagus membantu Anda memahami bukan hanya *bagaimana* menggunakan sesuatu, tapi *mengapa* dan *kapan* menggunakannya. #### Sumber Dokumentasi Penting **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** - Standar emas untuk dokumentasi teknologi web -- Panduan komprehensif untuk HTML, CSS, dan JavaScript -- Termasuk informasi kompatibilitas browser -- Menyediakan contoh praktis dan demo interaktif +- Panduan lengkap untuk HTML, CSS, dan JavaScript +- Menyertakan informasi kompatibilitas browser +- Menampilkan contoh praktis dan demo interaktif **[Web.dev](https://web.dev)** (oleh Google) - Praktik terbaik pengembangan web modern @@ -697,135 +696,135 @@ Pengembang profesional menghabiskan banyak waktu membaca dokumentasi – bukan k **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** - Kurikulum pembelajaran terstruktur -- Kursus video dari para ahli industri -- Latihan pengkodean langsung +- Kursus video dari ahli industri +- Latihan coding praktis -> πŸ“š **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. +> πŸ“š **Strategi Belajar**: Jangan coba menghafal dokumentasi – sebaliknya, pelajari cara menavigasinya dengan efisien. Tandai referensi yang sering digunakan dan latih penggunaan fungsi pencarian untuk menemukan informasi spesifik dengan cepat. -### πŸ”§ **Pemeriksaan Penguasaan Alat: Apa yang Membekas Pada Anda?** +### πŸ”§ **Cek Penguasaan Alat: Mana yang Membekas di 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? +- Alat mana yang paling Anda antusias coba pertama kali? (Tidak ada jawaban salah!) +- Apakah baris perintah masih terasa menakutkan, atau Anda mulai penasaran? +- Bisakah Anda membayangkan menggunakan DevTools browser untuk mengintip di balik layar situs favorit Anda? ```mermaid -pie title "Waktu Pengembang yang Di Habiskan Dengan Alat" +pie title "Waktu Pengembang yang Dihabiskan dengan Alat" "Editor Kode" : 40 - "Pengujian Browser" : 25 + "Pengujian Peramban" : 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 menyenangkan**: Kebanyakan pengembang menghabiskan sekitar 40% waktu mereka di editor kode, tapi perhatikan berapa banyak waktu yang digunakan untuk pengujian, belajar, dan memecahkan masalah. Pemrograman bukan hanya soal menulis kode – ini soal merancang pengalaman! -βœ… **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. +βœ… **Bahan renungan**: Ini hal menarik untuk dipertimbangkan – bagaimana menurut Anda alat untuk membangun situs web (pengembangan) mungkin berbeda dari alat untuk mendesain tampilannya (desain)? Ini seperti perbedaan antara arsitek yang mendesain rumah indah dan kontraktor yang benar-benar membangunnya. Keduanya krusial, tapi membutuhkan kotak alat yang berbeda! Pemikiran seperti ini benar-benar akan membantu Anda melihat gambaran besar tentang bagaimana situs web dihidupkan. -## Tantangan GitHub Copilot Agent πŸš€ +## GitHub Copilot Agent Challenge πŸš€ Gunakan mode Agen untuk menyelesaikan tantangan berikut: -**Deskripsi:** Jelajahi fitur editor kode modern atau IDE dan tunjukkan bagaimana alat itu dapat meningkatkan alur kerja Anda sebagai pengembang web. +**Deskripsi:** Jelajahi fitur editor kode modern atau IDE dan tunjukkan bagaimana hal 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 dengan lebih efisien. Untuk masing-masing, berikan penjelasan singkat bagaimana itu menguntungkan alur kerja Anda. +**Prompt:** Pilih editor kode atau IDE (seperti Visual Studio Code, WebStorm, atau IDE berbasis cloud). Daftarkan tiga fitur atau ekstensi yang membantu Anda menulis, debug, atau memelihara kode lebih efisien. Untuk setiap fitur, berikan penjelasan singkat tentang bagaimana hal itu menguntungkan alur kerja Anda. --- ## πŸš€ Tantangan -**Oke, detektif, siap untuk kasus pertama Anda?** +**Baiklah, detektif, siap untuk kasus pertama Anda?** -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! +Sekarang setelah Anda mendapatkan fondasi yang luar biasa ini, saya punya petualangan yang akan membantu Anda melihat betapa beragam dan menariknya dunia pemrograman sebenarnya. Dan dengar – ini bukan soal menulis kode dulu, jadi jangan stres! Anggap saja Anda detektif bahasa pemrograman dalam kasus pertama yang sangat menarik ini! -**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! +**Misi Anda, jika Anda memilih menerimanya:** +1. **Jadilah penjelajah bahasa**: Pilih tiga bahasa pemrograman dari alam semesta yang benar-benar berbeda – mungkin satu yang membangun situs web, satu yang membuat aplikasi seluler, dan satu yang memproses data untuk ilmuwan. Temukan contoh tugas sederhana yang sama ditulis dalam tiap bahasa. Saya janji Anda akan sangat kagum melihat betapa berbeda tampilannya meski melakukan hal yang sama persis! -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! +2. **Ungkap asal-usulnya**: Apa yang membuat setiap bahasa istimewa? Ini fakta keren – setiap bahasa pemrograman dibuat karena seseorang berpikir, "Tahukah kamu? Harus ada cara yang lebih baik untuk menyelesaikan masalah spesifik ini." Bisa Anda cari tahu apa masalah-masalah tersebut? Beberapa ceritanya sungguh menarik! -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! +3. **Temui komunitasnya**: Lihat seberapa ramah dan antusias komunitas tiap bahasa. Ada yang punya jutaan pengembang berbagi ilmu dan saling membantu, ada yang lebih kecil tapi sangat erat dan suportif. Anda pasti suka melihat kepribadian berbeda komunitas ini! -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. +4. **Ikuti insting Anda**: Bahasa mana yang saat ini terasa paling mudah didekati? Jangan khawatir memilih yang "sempurna" – dengarkan naluri Anda! Jujur tidak ada jawaban salah di sini, dan Anda selalu bisa menjelajahi yang lain nanti. -**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! +**Bonus pekerjaan detektif**: Coba cari tahu situs web atau aplikasi besar apa saja yang dibangun dengan tiap bahasa. Saya jamin Anda akan terkejut mengetahui apa yang menjalankan Instagram, Netflix, atau game seluler yang tidak bisa Anda berhenti mainkan itu! -> πŸ’‘ **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! +> πŸ’‘ **Ingat**: Anda tidak mencoba menjadi ahli dalam bahasa apa pun hari ini. Anda hanya mencoba mengenal lingkungan sebelum menentukan tempat Anda ingin berkarir. Luangkan waktu, bersenang-senang, dan biarkan rasa ingin tahu memandu Anda! -## Mari Rayakan Apa yang Sudah Anda Temukan! +## Mari Rayakan Apa yang Anda Temukan! -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! +Astaga, Anda sudah menyerap begitu banyak informasi luar biasa hari ini! Saya benar-benar antusias melihat seberapa banyak dari perjalanan menakjubkan ini yang melekat pada Anda. Dan ingat – ini bukan ujian agar Anda harus sempurna. Ini lebih seperti perayaan semua hal keren yang sudah Anda pelajari tentang dunia menarik yang akan segera Anda jelajahi! -[Ikuti kuis pasca-pembelajaran](https://ff-quizzes.netlify.app/web/) +[Ikuti kuis pasca-pelajaran](https://ff-quizzes.netlify.app/web/) ## Ulasan & Belajar Mandiri -**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! +**Luangkan waktu Anda untuk menjelajah dan bersenang-senang!** +Anda telah menempuh banyak hal hari ini, dan itu sesuatu yang patut dibanggakan! Sekarang saatnya bagian yang menyenangkan – menjelajahi topik yang membangkitkan rasa penasaran Anda. Ingat, ini bukan pekerjaan rumah – ini petualangan! -**Menyelami lebih dalam apa yang membuat Anda bersemangat:** +**Jelajahi lebih dalam apa yang membuat Anda bersemangat:** -**Berinteraksi langsung dengan bahasa pemrograman:** -- Kunjungi situs resmi 2-3 bahasa yang menarik perhatian Anda. Masing-masing memiliki kepribadian dan kisahnya sendiri! +**Praktikkan bahasa pemrograman:** +- Kunjungi situs resmi 2-3 bahasa yang menarik perhatian Anda. Masing-masing punya kepribadian dan cerita 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. +- Baca tentang bagaimana bahasa favorit Anda dibuat. Serius, beberapa cerita asal-usul ini sangat menarik dan akan membantu Anda memahami mengapa bahasa bekerja seperti itu. -**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. +**Kenali alat-alat baru Anda:** +- Unduh Visual Studio Code jika Anda belum melakukannya – gratis dan Anda pasti akan menyukainya! +- Luangkan beberapa menit untuk menelusuri Extensions marketplace. Itu seperti toko aplikasi untuk editor kode Anda! +- Buka Developer Tools browser Anda dan klik di sekitar. Jangan khawatir untuk 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 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! +- Ikuti beberapa komunitas pengembang di [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), atau [GitHub](https://github.com/). Komunitas pemrograman sangat menyambut pendatang baru! +- Tonton beberapa video coding ramah pemula di YouTube. Ada begitu banyak pembuat konten hebat yang mengingat bagaimana rasanya memulai. +- Pertimbangkan untuk bergabung dengan meetup lokal atau komunitas online. Percayalah, pengembang suka membantu pendatang baru! -> 🎯 **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! +> 🎯 **Dengar, ini yang ingin saya ingatkan**: Anda tidak diharapkan menjadi penyihir coding dalam semalam! Saat ini, Anda hanya sedang mengenal dunia baru yang luar biasa ini yang akan Anda masuki. Luangkan waktu Anda, nikmati perjalanannya, dan ingat – setiap pengembang yang Anda kagumi pernah duduk tepat di tempat Anda sekarang, merasa bersemangat dan mungkin sedikit kewalahan. Itu sangat normal, dan itu berarti Anda sedang melakukan dengan benar! ## Tugas -[Membaca Dokumentasi](assignment.md) +[Reading the Docs](assignment.md) -> πŸ’‘ **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). +> πŸ’‘ **Sedikit dorongan untuk tugas Anda**: Saya sangat ingin melihat Anda menjelajahi beberapa alat yang belum kita bahas! Lewati editor, browser, dan alat baris perintah yang sudah kita bicarakan – ada alam semesta luar biasa dari alat pengembangan hebat di luar sana yang menunggu untuk ditemukan. Cari yang aktif dipelihara dan memiliki komunitas yang hidup serta membantu (biasanya ini punya tutorial terbaik dan orang-orang paling mendukung saat Anda pasti terjebak dan butuh bantuan ramah). --- ## πŸš€ Garis Waktu Perjalanan Pemrograman Anda ### ⚑ **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 +- [ ] Tandai 2-3 situs web bahasa pemrograman yang menarik perhatian Anda +- [ ] Unduh Visual Studio Code jika belum +- [ ] Buka DevTools browser Anda (F12) dan klik di sekitar situs mana saja - [ ] Bergabung dengan satu komunitas pemrograman (Dev.to, Reddit r/webdev, atau Stack Overflow) ### ⏰ **Apa yang Bisa Anda Capai Dalam Satu Jam Ini** -- [ ] Selesaikan kuis pasca-pelajaran dan renungkan jawaban Anda +- [ ] Selesaikan kuis pasca-materi dan refleksikan 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) +- [ ] Coba contoh "Hello World" dalam 2 bahasa pemrograman berbeda secara online +- [ ] Tonton video "Sehari dalam Kehidupan Seorang Pengembang" di YouTube +- [ ] Mulai penyelidikan bahasa pemrograman Anda (dari tantangan) -### πŸ“… **Petualangan Anda Selama Seminggu** +### πŸ“… **Petualangan Mingguan Anda** - [ ] Selesaikan tugas dan jelajahi 3 alat pengembangan baru - [ ] Ikuti 5 pengembang atau akun pemrograman di media sosial -- [ ] Coba bangun sesuatu yang kecil di CodePen atau Replit (bahkan hanya "Hello, [Nama Anda]!") +- [ ] Coba buat sesuatu yang kecil di CodePen atau Replit (bahkan hanya "Hello, [Nama Anda]!") - [ ] Baca satu posting blog pengembang tentang perjalanan coding seseorang -- [ ] Ikuti meetup virtual atau tonton ceramah pemrograman +- [ ] Ikut meetup virtual atau tonton diskusi pemrograman - [ ] Mulai belajar bahasa pilihan Anda dengan tutorial online -### πŸ—“οΈ **Transformasi Anda Selama Sebulan** -- [ ] Bangun proyek kecil pertama Anda (bahkan halaman web sederhana sudah dihitung!) -- [ ] Berkontribusi pada proyek open-source (mulai dengan perbaikan dokumentasi) -- [ ] Mentori seseorang yang baru memulai perjalanan pemrogramannya +### πŸ—“οΈ **Transformasi Bulanan Anda** +- [ ] Bangun proyek kecil pertama Anda (bahkan halaman web sederhana saja sudah cukup!) +- [ ] Berkontribusi ke proyek open-source (mulai dari perbaikan dokumentasi) +- [ ] Menjadi mentor bagi seseorang yang baru memulai perjalanan pemrogramannya - [ ] Buat situs portofolio pengembang Anda -- [ ] Terhubung dengan komunitas pengembang lokal atau kelompok belajar -- [ ] Mulai rencanakan tonggak pembelajaran berikutnya +- [ ] Hubungkan dengan komunitas pengembang lokal atau kelompok belajar +- [ ] Mulai rencanakan tonggak belajar berikutnya ### 🎯 **Refleksi Akhir** -**Sebelum melanjutkan, luangkan waktu merayakan:** +**Sebelum Anda melanjutkan, luangkan waktu untuk merayakan:** - Apa satu hal tentang pemrograman yang membuat Anda bersemangat hari ini? -- Alat atau konsep apa yang ingin Anda eksplorasi duluan? +- Alat atau konsep apa yang ingin Anda jelajahi pertama kali? - Bagaimana perasaan Anda tentang memulai perjalanan pemrograman ini? - Apa satu pertanyaan yang ingin Anda tanyakan kepada pengembang sekarang? @@ -845,11 +844,11 @@ journey Confident: 5: You Helping Others: 5: You ``` -> 🌟 **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! πŸŽ‰ +> 🌟 **Ingatlah**: Setiap ahli dulunya pemula. Setiap pengembang senior pernah merasa seperti Anda sekarang – bersemangat, mungkin sedikit kewalahan, dan pasti penasaran tentang apa yang mungkin. Anda berada di perusahaan yang luar biasa, dan perjalanan ini akan sangat luar biasa. Selamat datang di dunia pemrograman yang menakjubkan! πŸŽ‰ --- **Penafian**: -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. +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 sah. Untuk informasi 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 15bfc7bc2..5ba6cd230 100644 --- a/translations/id/AGENTS.md +++ b/translations/id/AGENTS.md @@ -2,20 +2,20 @@ ## Gambaran Proyek -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. +Ini adalah repositori kurikulum pendidikan untuk mengajarkan dasar-dasar pengembangan web kepada pemula. Kurikulum ini adalah kursus lengkap selama 12 minggu yang dikembangkan oleh Microsoft Cloud Advocates, menampilkan 24 pelajaran langsung yang mencakup JavaScript, CSS, dan HTML. ### Komponen Utama -- **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 setiap kuis (penilaian sebelum/sesudah pelajaran) +- **Konten Edukasi**: 24 pelajaran terstruktur yang diorganisir ke dalam modul berbasis proyek +- **Proyek Praktis**: Terrarium, Permainan Mengetik, Ekstensi Peramban, Permainan Ruang Angkasa, Aplikasi Perbankan, Editor Kode, dan Asisten Chat AI +- **Kuis Interaktif**: 48 kuis dengan 3 pertanyaan masing-masing (penilaian sebelum/setelah 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 -- Folder setiap pelajaran berisi README, contoh kode, dan solusi +- Setiap folder 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 @@ -31,7 +31,7 @@ git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### Setup Quiz App (Vue 3 + Vite) +### Setup Aplikasi Kuis (Vue 3 + Vite) ```bash cd quiz-app @@ -51,15 +51,15 @@ npm run lint # Jalankan ESLint npm run format # Format dengan Prettier ``` -### Proyek Ekstensi Browser +### Proyek Ekstensi Peramban ```bash cd 5-browser-extension/solution npm install -# Ikuti petunjuk pemuatan ekstensi spesifik browser +# Ikuti instruksi pemuatan ekstensi spesifik browser ``` -### Proyek Permainan Luar Angkasa +### Proyek Permainan Ruang Angkasa ```bash cd 6-space-game/solution @@ -84,34 +84,34 @@ 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 perubahan kode di direktori proyek terkait -6. Kirim pull request sesuai panduan kontribusi +5. Uji perubahan kode di direktori proyek yang relevan +6. Ajukan pull request sesuai pedoman kontribusi ### Untuk Pembelajar 1. Fork atau clone repositori 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 di folder pelajaran +4. Kerjakan kuis sebelum pelajaran di https://ff-quizzes.netlify.app/web/ +5. Kerjakan contoh kode dalam folder pelajaran 6. Selesaikan tugas dan tantangan 7. Ikuti kuis setelah pelajaran ### Pengembangan Langsung - **Dokumentasi**: Jalankan `docsify serve` di root (port 3000) -- **Quiz App**: Jalankan `npm run dev` di direktori quiz-app -- **Proyek**: Gunakan ekstensi Live Server di VS Code untuk proyek HTML +- **Aplikasi Kuis**: Jalankan `npm run dev` di direktori quiz-app +- **Proyek**: Gunakan ekstensi Live Server VS Code untuk proyek HTML - **Proyek API**: Jalankan `npm start` di direktori API terkait ## Instruksi Pengujian -### Pengujian Quiz App +### Pengujian Aplikasi Kuis ```bash cd quiz-app npm run lint # Periksa masalah gaya kode -npm run build # Verifikasi pembangunan berhasil +npm run build # Verifikasi build berhasil ``` ### Pengujian API Bank @@ -124,26 +124,26 @@ node server.js # Verifikasi server mulai tanpa kesalahan ### Pendekatan Pengujian Umum -- Ini adalah repositori edukasi tanpa pengujian otomatis menyeluruh -- Pengujian manual fokus pada: +- Ini adalah repositori edukasi tanpa pengujian otomatis lengkap +- Pengujian manual berfokus pada: - Contoh kode berjalan tanpa error - - Tautan di dokumentasi berfungsi dengan benar - - Proyek berhasil dibangun + - Tautan dalam dokumentasi berfungsi dengan benar + - Build proyek berhasil - Contoh mengikuti praktik terbaik ### Pemeriksaan Sebelum Pengiriman -- Jalankan `npm run lint` di direktori dengan file package.json +- Jalankan `npm run lint` di direktori yang memiliki package.json - Verifikasi tautan markdown valid - Uji contoh kode di browser atau Node.js -- Cek bahwa terjemahan mempertahankan struktur yang tepat +- Periksa bahwa terjemahan mempertahankan struktur yang benar ## Pedoman Gaya Kode ### JavaScript - Gunakan sintaks ES6+ modern -- Ikuti konfigurasi ESLint standar dalam proyek +- Ikuti konfigurasi ESLint standar yang disediakan dalam proyek - Gunakan nama variabel dan fungsi yang bermakna untuk kejelasan edukasi - Tambahkan komentar yang menjelaskan konsep untuk pembelajar - Format menggunakan Prettier jika dikonfigurasi @@ -159,26 +159,26 @@ node server.js # Verifikasi server mulai tanpa kesalahan - Pedoman gaya PEP 8 - Contoh kode yang jelas dan edukatif -- Type hint jika membantu proses pembelajaran +- Petunjuk tipe jika membantu proses pembelajaran ### Dokumentasi Markdown -- Hirarki heading yang jelas -- Blok kode dengan penentuan bahasa +- Hirarki judul yang jelas +- Blok kode dengan spesifikasi bahasa - Tautan ke sumber tambahan -- Screenshot dan gambar di direktori `images/` +- Tangkapan layar dan gambar di direktori `images/` - Teks alt untuk gambar demi aksesibilitas ### Organisasi File -- Pelajaran bernomor secara berurutan (1-getting-started-lessons, 2-js-basics, dll) -- Setiap proyek memiliki direktori `solution/` dan sering `start/` atau `your-work/` +- Pelajaran diberi nomor secara berurutan (1-getting-started-lessons, 2-js-basics, dll.) +- Setiap proyek memiliki direktori `solution/` dan biasanya `start/` atau `your-work/` - Gambar disimpan di folder `images/` khusus pelajaran -- Terjemahan di struktur `translations/{language-code}/` +- Terjemahan dalam struktur `translations/{language-code}/` -## Pembangunan dan Deploy +## Build dan Deployment -### Deploy Quiz App (Azure Static Web Apps) +### Deployment Aplikasi Kuis (Azure Static Web Apps) quiz-app dikonfigurasi untuk deployment 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` -### Pembuatan PDF Dokumentasi +### Generasi PDF Dokumentasi ```bash -npm install # Pasang docsify-to-pdf +npm install # Instal docsify-to-pdf npm run convert # Hasilkan PDF dari docs ``` @@ -210,69 +210,69 @@ docsify serve # Jalankan di localhost:3000 ### Build Spesifik Proyek Setiap direktori proyek mungkin memiliki proses build sendiri: -- Proyek Vue: `npm run build` membuat bundle produksi +- Proyek Vue: `npm run build` menghasilkan bundel produksi - Proyek statis: Tidak ada langkah build, sajikan file langsung -## Panduan Pull Request +## Pedoman Pull Request ### Format Judul -Gunakan judul yang jelas dan deskriptif menunjukkan area perubahan: +Gunakan judul yang jelas dan deskriptif yang menunjukkan area perubahan: - `[Quiz-app] Tambah kuis baru untuk pelajaran X` -- `[Lesson-3] Perbaiki typo di proyek terrarium` +- `[Lesson-3] Perbaiki typo pada proyek terrarium` - `[Translation] Tambah terjemahan Spanyol untuk pelajaran 5` - `[Docs] Perbarui instruksi setup` ### Pemeriksaan Wajib -Sebelum mengirim PR: +Sebelum mengirimkan PR: 1. **Kualitas Kode**: - - Jalankan `npm run lint` di direktori proyek terkait - - Perbaiki semua error dan peringatan linting + - Jalankan `npm run lint` di direktori proyek yang terpengaruh + - Perbaiki semua error dan peringatan lint 2. **Verifikasi Build**: - - Jalankan `npm run build` jika berlaku + - Jalankan `npm run build` jika relevan - Pastikan tidak ada error build 3. **Validasi Tautan**: - Uji semua tautan markdown - Verifikasi referensi gambar berfungsi -4. **Tinjauan Konten**: +4. **Review Konten**: - Baca ulang untuk ejaan dan tata bahasa - Pastikan contoh kode benar dan edukatif - Verifikasi terjemahan mempertahankan makna asli ### Persyaratan Kontribusi -- 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 -- Referensikan nomor isu di deskripsi PR jika berlaku +- Setuju dengan Microsoft CLA (pemeriksaan otomatis pada PR pertama) +- Ikuti [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) +- Lihat [CONTRIBUTING.md](./CONTRIBUTING.md) untuk pedoman detail +- Referensikan nomor isu dalam deskripsi PR jika relevan ### Proses Review -- PR direview oleh maintainers dan komunitas -- Kejelasan edukasi diprioritaskan -- Contoh kode harus mengikuti praktik terbaik terkini -- Terjemahan direview untuk akurasi dan kesesuaian budaya +- PR direview oleh maintainer dan komunitas +- Kejelasan edukasi menjadi prioritas +- Contoh kode harus mengikuti praktik terbaik saat ini +- Terjemahan ditinjau untuk akurasi dan kesesuaian budaya ## Sistem Terjemahan ### Terjemahan Otomatis - Menggunakan GitHub Actions dengan workflow co-op-translator -- Menerjemahkan ke 50+ bahasa otomatis +- Menerjemahkan ke 50+ bahasa secara otomatis - File sumber di direktori utama - File terjemahan di direktori `translations/{language-code}/` ### Menambahkan Perbaikan Terjemahan Manual 1. Temukan file di `translations/{language-code}/` -2. Lakukan perbaikan sambil menjaga struktur +2. Lakukan perbaikan sambil mempertahankan struktur 3. Pastikan contoh kode tetap berfungsi -4. Uji konten kuis yang dilokalisasi +4. Uji konten kuis yang sudah dilokalisasi ### Metadata Terjemahan @@ -293,116 +293,116 @@ CO_OP_TRANSLATOR_METADATA: ### Masalah Umum -**Quiz app gagal mulai**: +**Aplikasi kuis gagal mulai**: - Periksa versi Node.js (disarankan v14+) -- Hapus `node_modules` dan `package-lock.json`, jalankan `npm install` lagi +- Hapus `node_modules` dan `package-lock.json`, jalankan `npm install` ulang - Periksa konflik port (default: Vite menggunakan port 5173) -**Server API tidak mau mulai**: -- Pastikan versi Node.js minimal (node >=10) +**Server API tidak mulai**: +- Pastikan versi Node.js memenuhi minimum (node >=10) - Periksa apakah port sudah digunakan -- Pastikan semua dependensi terpasang dengan `npm install` +- Pastikan semua dependensi sudah di-install dengan `npm install` -**Ekstensi browser tidak dimuat**: -- Pastikan manifest.json diformat dengan benar -- Periksa konsol browser untuk error -- Ikuti instruksi instalasi ekstensi sesuai browser +**Ekstensi peramban tidak dimuat**: +- Pastikan manifest.json terformat dengan benar +- Periksa console browser untuk error +- Ikuti instruksi instalasi ekstensi spesifik browser **Masalah proyek chat Python**: - Pastikan paket OpenAI terpasang: `pip install openai` -- Verifikasi variabel lingkungan GITHUB_TOKEN sudah diset -- Periksa izin akses GitHub Models +- Verifikasi variabel lingkungan GITHUB_TOKEN diset +- Periksa izin akses Model GitHub -**Docsify tidak menyajikan docs**: +**Docsify tidak menyajikan dokumentasi**: - Instal docsify-cli secara global: `npm install -g docsify-cli` -- Jalankan dari root repositori -- Pastikan `docs/_sidebar.md` ada +- Jalankan dari direktori root repositori +- Periksa keberadaan `docs/_sidebar.md` ### Tips Lingkungan Pengembangan - Gunakan VS Code dengan ekstensi Live Server untuk proyek HTML -- Pasang ekstensi ESLint dan Prettier untuk format konsisten +- Pasang ekstensi ESLint dan Prettier untuk konsistensi format - Gunakan DevTools browser untuk debugging JavaScript -- Untuk proyek Vue, pasang ekstensi Vue DevTools browser +- Untuk proyek Vue, pasang ekstensi Vue DevTools di browser ### Pertimbangan Performa -- Jumlah file terjemahan yang besar (50+ bahasa) membuat clone penuh besar -- Gunakan clone dangkal jika hanya mengerjakan konten: `git clone --depth 1` -- Kecualikan terjemahan dari pencarian saat bekerja pada konten bahasa Inggris -- Proses build mungkin lambat pada kali pertama (npm install, build Vite) +- Banyaknya file terjemahan (50+ bahasa) membuat clone penuh besar +- Gunakan clone dangkal jika hanya bekerja pada konten: `git clone --depth 1` +- Kecualikan terjemahan dari pencarian saat bekerja dengan konten Bahasa Inggris +- Proses build mungkin lambat pada first-run (npm install, build Vite) ## Pertimbangan Keamanan ### Variabel Lingkungan - Kunci API tidak boleh di-commit ke repositori -- Gunakan file `.env` (sudah ada dalam `.gitignore`) +- Gunakan file `.env` (sudah di `.gitignore`) - Dokumentasikan variabel lingkungan yang diperlukan di README proyek ### Proyek Python - Gunakan virtual environment: `python -m venv venv` -- Jaga dependensi tetap terupdate -- Token GitHub harus memiliki izin minimal yang diperlukan +- Jaga dependensi tetap terbaru +- Token GitHub harus memiliki izin minimum yang diperlukan -### Akses GitHub Models +### Akses Model GitHub -- Token Akses Personal (PAT) dibutuhkan untuk GitHub Models +- Personal Access Tokens (PAT) diperlukan untuk Model GitHub - Token harus disimpan sebagai variabel lingkungan - Jangan pernah commit token atau kredensial ## Catatan Tambahan -### Target Audiens +### Audiens Sasaran - Pemula lengkap dalam pengembangan web - Pelajar dan pembelajar mandiri -- Pengajar yang menggunakan kurikulum di kelas -- Konten dirancang agar aksesibel dan membangun keterampilan secara bertahap +- Guru yang menggunakan kurikulum di kelas +- Konten dirancang untuk aksesibilitas dan pembangunan keterampilan bertahap -### Filosofi Edukasi +### Filosofi Pendidikan - Pendekatan pembelajaran berbasis proyek -- Pemeriksaan pengetahuan secara berkala (kuis) +- Pemeriksaan pengetahuan yang sering (kuis) - Latihan coding langsung - Contoh aplikasi dunia nyata - Fokus pada dasar sebelum framework ### Pemeliharaan Repositori -- Komunitas pembelajar dan kontributor aktif +- Komunitas pembelajar dan kontributor yang aktif - Pembaruan rutin pada dependensi dan konten -- Isu dan diskusi dipantau oleh maintainers -- Pembaruan terjemahan otomatis melalui GitHub Actions +- Isu dan diskusi dipantau oleh maintainer +- Pembaruan terjemahan otomatis via GitHub Actions -### Sumber Daya Terkait +### Sumber Terkait - [Modul Microsoft Learn](https://docs.microsoft.com/learn/) -- [Sumber Daya Student Hub](https://docs.microsoft.com/learn/student-hub/) +- [Sumber Student Hub](https://docs.microsoft.com/learn/student-hub/) - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) direkomendasikan untuk pembelajar -- Kursus tambahan: AI Generatif, Data Science, ML, curriculum IoT tersedia +- Kursus tambahan: AI Generatif, Data Science, ML, kurikulum IoT tersedia ### Bekerja dengan Proyek Tertentu -Untuk instruksi rinci proyek individual, lihat file README di: +Untuk instruksi detail pada proyek individual, lihat file README di: - `quiz-app/README.md` - aplikasi kuis Vue 3 -- `7-bank-project/README.md` - aplikasi perbankan dengan otentikasi -- `5-browser-extension/README.md` - pengembangan ekstensi browser +- `7-bank-project/README.md` - aplikasi perbankan dengan autentikasi +- `5-browser-extension/README.md` - pengembangan ekstensi peramban - `6-space-game/README.md` - pengembangan game berbasis canvas - `9-chat-project/README.md` - proyek asisten chat AI ### Struktur Monorepo -Meskipun bukan monorepo tradisional, repositori ini berisi banyak proyek independen: +Meskipun bukan monorepo tradisional, repositori ini berisi banyak proyek mandiri: - Setiap pelajaran berdiri sendiri - Proyek tidak berbagi dependensi -- Bekerja pada proyek individual tanpa memengaruhi lainnya +- Kerjakan proyek individual tanpa memengaruhi yang lain - Clone seluruh repo untuk pengalaman kurikulum lengkap --- **Penafian**: -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. +Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk akurasi, harap diingat bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang paling sahih. Untuk informasi 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/ms/.co-op-translator.json b/translations/ms/.co-op-translator.json index de1761edd..6bf0214da 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": "bec5e35642176d9e483552bfc82996d8", - "translation_date": "2026-03-06T12:57:07+00:00", + "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d", + "translation_date": "2026-03-27T19:21:06+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-03-06T13:06:45+00:00", + "translation_date": "2026-03-27T19:27:15+00:00", "source_file": "AGENTS.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 2d9facfff..d9b008cad 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,12 +1,12 @@ # 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! -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! +Hai, bakal pembangun! πŸ‘‹ Boleh saya beritahu sesuatu yang masih membuat saya teruja setiap hari? Anda akan menemui bahawa pengaturcaraan bukan hanya tentang komputer – ia tentang mempunyai kuasa luar biasa untuk menghidupkan idea-idea liar anda! -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! +Anda tahu saat bila anda menggunakan aplikasi kegemaran anda dan semuanya berjalan lancar? Bila anda tekan butang dan sesuatu yang penuh magis berlaku yang membuat anda berkata "wow, bagaimana mereka BUAT itu?" 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 mengagumkan anda: menjelang akhir pelajaran ini, anda bukan sahaja akan faham bagaimana mereka melakukannya, tetapi anda akan tidak sabar untuk mencuba sendiri! -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! +Dengar, saya faham jika pengaturcaraan terasa menakutkan sekarang. Bila saya mula-mula bermula, saya benar-benar fikir anda perlu menjadi genius matematik atau telah menulis kod sejak berumur lima tahun. Tetapi ini yang benar-benar mengubah perspektif saya: pengaturcaraan adalah seperti belajar bercakap dalam bahasa baru. Anda mula dengan "hello" dan "terima kasih," kemudian belajar memesan kopi, dan sebelum anda sedar, anda sedang berbincang secara mendalam secara falsafah! Cuma dalam kes ini, anda berbual dengan komputer, dan jujur? Mereka adalah rakan berbual paling sabar yang pernah anda miliki – mereka tidak pernah menghakimi kesilapan anda dan sentiasa teruja untuk cuba lagi! + +Hari ini, kita akan meneroka alat hebat yang membuat pembangunan web moden bukan sahaja mungkin, tetapi sangat ketagihan. Saya bercakap tentang editor, pelayar, dan aliran kerja yang sama yang digunakan pembangun di Netflix, Spotify, dan studio aplikasi indie kegemaran anda setiap hari. Dan inilah 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) @@ -14,80 +14,80 @@ Hari ini, kita akan teroka alat luar biasa yang menjadikan pembangunan web moden ```mermaid journey title Perjalanan Pengaturcaraan Anda Hari Ini - section Discover - Apa itu Pengaturcaraan: 5: You + section Terokai + Apakah Pengaturcaraan: 5: You Bahasa Pengaturcaraan: 4: You - Gambaran Alat: 5: You - section Explore + Pengenalan Alat: 5: You + section Selidik Penyunting Kod: 4: You - Pelayar & Alat Pembangun: 5: You + Pelayar & DevTools: 5: You Baris Perintah: 3: You - section Practice + section Amalkan Detektif Bahasa: 4: You - Eksplorasi Alat: 5: You + Penjelajahan 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 mulakan dengan perkara menyeronokkan, saya ingin tahu – apa yang anda sudah tahu tentang dunia pengaturcaraan ini? Dan dengar, jika anda melihat soalan-soalan ini dan berfikir "Saya memang langsung tak tahu apa-apa tentang ini," itu bukan sahaja okay, ia sempurna! Itu bermakna anda berada di tempat yang betul. Anggap kuiz ini seperti regangan sebelum bersenam – kita cuma memanaskan otot otak! [Ambil kuiz pra-pelajaran](https://ff-quizzes.netlify.app/web/) -## Pengembaraan Yang Akan Kita Jalani Bersama +## Pengembaraan Yang Kita Akan 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: +Baiklah, saya benar-benar teruja dengan apa yang kita akan terokai hari ini! Serius, saya harap saya dapat lihat wajah anda bila beberapa konsep ini difahami. Berikut adalah perjalanan hebat yang kita bakal lalui bersama: -- **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! +- **Apa itu pengaturcaraan sebenarnya (dan mengapa ia benda paling hebat!)** – Kita akan terokai bagaimana kod adalah sihir tak kelihatan yang menggerakkan segala-galanya di sekeliling anda, dari penggera yang entah bagaimana tahu itu pagi Isnin hingga algoritma yang sempurna memilih rekomendasi Netflix anda +- **Bahasa pengaturcaraan dan personaliti mereka yang menakjubkan** – Bayangkan masuk ke sebuah parti di mana setiap orang mempunyai kuasa super dan cara menyelesaikan masalah yang berbeza. Begitulah dunia bahasa pengaturcaraan, dan anda pasti suka mengenali mereka! +- **Binaan asas yang membuat sihir digital berlaku** – Anggap ini sebagai set LEGO kreatif yang utama. Setelah anda faham bagaimana kepingan ini bersatu, anda akan sedar anda boleh bina apa sahaja yang imaginas anda impikan +- **Alat profesional yang akan membuat anda rasa seperti diberi tongkat ahli sihir** – Saya tidak berlebihan – alat ini benar-benar akan membuat anda rasa seperti mempunyai kuasa super, dan bahagian terbaik? Ia adalah alat yang sama yang digunakan oleh pakar! -> πŸ’‘ **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! +> πŸ’‘ **Ini perkara penting**: Jangan cuba ingat semuanya hari ini! Sekarang, saya mahu anda rasakan percikan keterujaan tentang apa yang mungkin. Maklumat akan melekat dengan sendiri apabila kita berlatih bersama – itulah cara pembelajaran sebenar berlaku! > 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* Itu? +## Jadi Apa Itu *Pengaturcaraan* Sebenarnya? -Baiklah, mari kita jawab soalan bernilai juta dolar ini: apa itu pengaturcaraan sebenarnya? +Baiklah, mari kita jawab soalan bernilai jutaan dolar: apa itu pengaturcaraan sebenar? -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? πŸ˜… +Saya akan beri cerita yang benar-benar mengubah cara saya berfikir tentang ini. Minggu lepas, saya cuba terangkan kepada ibu saya cara menggunakan alat kawalan jauh TV pintar baru kami. Saya dapati diri saya berkata seperti "Tekan butang merah, tapi bukan butang merah besar, butang merah kecil di sebelah kiri... bukan, sebelah kiri yang lain... baik, tahan selama dua saat, bukan satu, bukan tiga..." Kedengaran biasa? πŸ˜… -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). +Itulah pengaturcaraan! Ia seni memberi arahan yang sangat terperinci, langkah demi langkah kepada sesuatu yang sangat kuat tetapi perlu segala-galanya dijelaskan dengan sempurna. Cuma, bukannya menerangkan kepada ibu anda (yang boleh tanya "butang merah yang mana?!"), anda menerangkan kepada komputer (yang hanya melakukan tepat apa yang anda kata, walaupun apa yang anda kata bukan apa yang anda maksudkan). -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. +Inilah yang membuat saya terpesona bila saya belajar ini: komputer sebenarnya sangat mudah pada inti mereka. Mereka hanya faham dua perkara – 1 dan 0, yang sebenarnya bermaksud "ya" dan "tidak" atau "hidup" dan "mati." Itu sahaja! Tetapi inilah bahagian magis – kita tidak perlu bercakap dalam 1 dan 0 macam dalam The Matrix. Di sinilah **bahasa pengaturcaraan** datang membantu. Mereka macam penterjemah terbaik dunia yang mengubah fikiran manusia biasa anda ke dalam bahasa komputer. -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! +Dan ini masih membuat saya teruja setiap pagi bila bangun: literal *semua* benda digital dalam hidup anda bermula dengan seseorang seperti anda, mungkin sedang memakai pakaian tidur dengan secawan kopi, menaip kod di laptop mereka. Penapis Instagram yang buat anda nampak sempurna? Seseorang kod itu. Cadangan yang membawa anda kepada lagu kegemaran baru? Seorang pembangun buat algoritma itu. Aplikasi yang membantu anda bahagikan bil makan malam dengan kawan? Yep, seseorang fikir "ini menyusahkan, saya boleh betulkan" dan kemudian... mereka buat! -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? +Bila anda belajar pengaturcaraan, anda bukan sahaja belajar kemahiran baru – anda menjadi sebahagian daripada komuniti hebat penyelesai masalah yang menghabiskan hari mereka dengan bertanya, "Bagaimana kalau saya bina sesuatu yang buat hari seseorang lebih baik sedikit?" Jujur, ada apa-apa yang lebih hebat daripada itu? -βœ… **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. +βœ… **Misi Fakta Menarik**: Ini sesuatu yang sangat menarik untuk dicari bila ada masa lapang – siapa anda rasa insan pertama di dunia yang menjadi pengaturcara komputer? Saya beri petunjuk: mungkin bukan siapa yang anda jangka! Cerita tentang orang ini sangat menarik dan menunjukkan pengaturcaraan sentiasa tentang penyelesaian kreatif dan fikir luar kotak. -### 🧠 **Masa Semakan: Bagaimana Perasaan Anda?** +### 🧠 **Masa Semak: Bagaimana Perasaan Anda?** -**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? +**Luangkan masa untuk renungkan:** +- Adakah idea "memberi arahan kepada komputer" sudah jelas sekarang? +- Bolehkah anda fikirkan tugasan harian yang ingin anda automatikkan dengan pengaturcaraan? +- Apakah soalan yang terlintas dalam fikiran anda mengenai perkara pengaturcaraan ini? -> **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! +> **Ingat**: Adalah normal jika sesetengah konsep agak kabur sekarang. Belajar pengaturcaraan seperti belajar bahasa baru – otak anda perlukan masa untuk membina laluan neural itu. Anda buat dengan baik! -## Bahasa Pengaturcaraan Seperti Rasa-Rasa Sihir Berbeza +## Bahasa Pengaturcaraan Macam Rasa-Rasa Ajaib 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. +Baik, ini mungkin kedengaran pelik, tapi ikut saya – bahasa pengaturcaraan banyak macam jenis muzik yang berbeza. Fikirkan: anda ada jazz yang lembut dan improvisasi, rock yang kuat dan terus, klasik yang elegan dan tersusun, dan hip-hop yang kreatif dan ekspresif. Setiap gaya ada vibe sendiri, komuniti peminat yang bersemangat, dan setiap satu sesuai untuk mood dan majlis berbeza. -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! πŸ˜„). +Bahasa pengaturcaraan juga sama! Anda tak akan guna bahasa yang sama untuk buat permainan mudah alih yang seronok dengan bahasa untuk proses data iklim yang besar, sama macam anda takkan main death metal dalam kelas yoga (kebanyakan kelas yoga la πŸ˜„). -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! +Tapi inilah yang buat saya kagum setiap kali fikir: bahasa-bahasa ini macam penterjemah paling sabar dan bijak di dunia duduk sebelah anda. Anda boleh ungkapkan idea dengan cara yang semula jadi untuk otak manusia, dan mereka urus semua kerja rumit tukar itu ke dalam 1 dan 0 yang komputer faham. Macam kawan yang fasih dalam "kreativiti manusia" dan "logik komputer" – dan mereka tak penat, tak perlu rehat kopi, dan tak menghakimi kalau tanya soalan sama dua kali! -### Bahasa Pengaturcaraan Popular dan Kegunaannya +### Bahasa Pengaturcaraan Popular dan Kegunaan Mereka ```mermaid mindmap root((Bahasa Pengaturcaraan)) - Web Development + Pembangunan Web JavaScript - Magik Frontend + Sihir Hadapan Laman Web Interaktif TypeScript JavaScript + Jenis @@ -100,7 +100,7 @@ mindmap R Statistik Penyelidikan - Mobile Apps + Aplikasi Mudah Alih Java Android Perusahaan @@ -109,8 +109,8 @@ mindmap Ekosistem Apple Kotlin Android Moden - Rentas Platform - Systems & Performance + Merentas Platform + Sistem & Prestasi C++ Permainan Kritikal Prestasi @@ -119,31 +119,31 @@ mindmap Pengaturcaraan Sistem Go Perkhidmatan Awan - Backend Skala Besar + Backend Boleh Skala ``` -| Bahasa | Terbaik Untuk | Kenapa Ia Popular | +| Bahasa | Terbaik Untuk | Kenapa Popular | |----------|----------|------------------| -| **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 | Platform-independen, kukuh untuk sistem besar | +| **JavaScript** | Pembangunan web, antara muka pengguna | Berjalan dalam pelayar dan menguatkan laman web interaktif | +| **Python** | Sains data, automasi, AI | Mudah dibaca dan dipelajari, perpustakaan berkuasa | +| **Java** | Aplikasi perusahaan, aplikasi Android | Bebas platform, 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 | +| **Go** | Perkhidmatan awan, sistem backend | Pantas, ringkas, direka untuk pengkomputeran moden | -### Bahasa Tahap Tinggi vs Tahap Rendah +### Bahasa Tingkat Tinggi vs. Rendah -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! +Baik, ini sebenarnya konsep yang buat otak saya hampir hancur bila mula belajar, jadi saya akan kongsi analogi yang buat saya faham – saya harap ia juga membantu anda! -Bayangkan anda melawat negara yang bahasa mereka anda tak tahu, dan anda sangat perlu cari tandas terdekat (kita semua pernah lalui, kan? πŸ˜…): +Bayangkan anda melancong ke negara yang bahasa nya anda tidak faham, dan anda sangat perlu jumpa tandas terdekat (kita semua pernah kan? πŸ˜…): -- **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 tahap rendah** macam belajar dialek tempatan begitu baik sehingga anda boleh bersembang dengan nenek jual buah di sudut menggunakan rujukan budaya, slanga tempatan, dan gurauan dalaman yang hanya difahami mereka yang besar di situ. Sangat mengagumkan dan cekap... kalau anda fasih! Tapi agak sukar bila anda cuma mahu cari tandas. -- **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. +- **Pengaturcaraan tahap tinggi** macam ada kawan tempatan yang benar-benar faham anda. Anda boleh kata "Saya benar-benar perlu cari tandas" dalam Bahasa Inggeris, dan mereka urus semua terjemahan budaya dan beri arahan yang masuk akal untuk otak bukan tempatan anda. Dalam istilah pengaturcaraan: -- **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! +- **Bahasa tahap rendah** (seperti Assembly atau C) membenarkan anda berbual sangat terperinci dengan perkakasan komputer, tapi anda perlu berfikir seperti mesin, yang... mari kata ia satu perubahan mental besar! +- **Bahasa tahap tinggi** (seperti JavaScript, Python, atau C#) membenarkan anda berfikir seperti manusia sementara mereka urus semua bahasa mesin di belakang tabir. Plus, mereka ada komuniti yang sangat mesra penuh orang yang ingat macam mana jadi baru dan benar-benar mahu membantu! -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! +Teka bahasa mana yang saya cadangkan anda mula? πŸ˜‰ Bahasa tahap tinggi macam roda latihan yang anda tak mahu lepaskan sebab ia buat pengalaman lebih seronok! ```mermaid flowchart TB @@ -155,7 +155,7 @@ flowchart TB C --> E["πŸ“ Tulis: fibonacci(10)"] D --> F["πŸ“ Tulis: mov r0,#00
sub r0,r0,#01"] - E --> G["πŸ€– Pemahaman Komputer:
Penterjemah mengendalikan kerumitan"] + E --> G["πŸ€– Kefahaman Komputer:
Penterjemah mengendalikan kerumitan"] F --> G G --> H["πŸ’» Keputusan Sama:
0, 1, 1, 2, 3, 5, 8, 13..."] @@ -166,11 +166,11 @@ flowchart TB ``` ### Saya Nak Tunjukkan Kenapa Bahasa Tahap Tinggi Lebih Mesra -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! +Baik, saya nak tunjuk sesuatu yang jelaskan kenapa saya jatuh cinta dengan bahasa tahap tinggi, tapi pertama – saya perlu anda janji sesuatu. Bila anda lihat contoh kod pertama, jangan panik! Nampak mencabar memang tepat! -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!) +Kita akan lihat tugas yang sama ditulis dalam dua gaya yang berbeza. Kedua-duanya cipta apa yang dipanggil urutan Fibonacci – corak matematik cantik di mana setiap nombor adalah jumlah dua nombor sebelumnya: 0, 1, 1, 2, 3, 5, 8, 13... (Fakta menyeronokkan: corak ini ada di mana-mana dalam alam – spiral biji bunga matahari, corak kon pain, malah cara galaksi terbentuk!) -Sedia nak lihat perbezaannya? Mari! +Sedia nak tengok bezanya? Mari kita teruskan! **Bahasa tahap tinggi (JavaScript) – Mesra manusia:** @@ -183,14 +183,14 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**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 +**Inilah apa yang kod ini buat:** +- **Isytiharkan** pemalar untuk tentukan berapa banyak nombor Fibonacci yang nak dihasilkan +- **Mula** dua pemboleh ubah untuk jejak nombor semasa dan yang seterusnya dalam urutan +- **Tetapkan** nilai mula (0 dan 1) yang mentakrifkan corak Fibonacci +- **Paparkan** mesej tajuk untuk kenal pasti output kita ```javascript -// Langkah 2: Jana urutan dengan gelung +// Langkah 2: Hasilkan urutan dengan gelung for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); @@ -201,11 +201,11 @@ for (let i = 0; i < fibonacciCount; i++) { } ``` -**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 +**Jelaskan apa berlaku di sini:** +- **Ulang** bagi setiap posisi dalam urutan menggunakan gelung `for` +- **Paparkan** setiap nombor dengan posisinya menggunakan pemformatan template literal +- **Kira** nombor Fibonacci seterusnya dengan tambah nilai semasa dan berikutnya +- **Kemaskini** pemboleh ubah jejak untuk pergi ke ulang seterusnya ```javascript // Langkah 3: Pendekatan fungsional moden @@ -224,11 +224,11 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**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 +**Dalam kod atas, kita:** +- **Cipta** fungsi boleh guna semula menggunakan sintaks anak panah moden +- **Bina** senarai untuk simpan urutan lengkap dan bukan paparkan satu-satu +- **Guna** pengindeksan senarai untuk kira nombor baru dari nilai sebelumnya +- **Pulangkan** urutan lengkap untuk kegunaan fleksibel pada bahagian lain program **Bahasa tahap rendah (ARM Assembly) – Mesra komputer:** @@ -257,28 +257,28 @@ back add r0,r1 end ``` -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. +Perhatikan bagaimana versi JavaScript dibaca macam arahan Bahasa Inggeris, sementara versi Assembly menggunakan arahan tersulit yang kawal terus pemproses komputer. Kedua-duanya buat tugas sama, tapi bahasa tahap tinggi jauh lebih mudah untuk manusia faham, tulis, dan jaga. -**Perbezaan utama yang anda perhatikan:** +**Perbezaan utama yang anda akan 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 +- **Komen**: Bahasa peringkat tinggi menggalakkan komen penjelasan yang menjadikan kod itu mengandungi dokumentasi sendiri +- **Struktur**: Aliran logik JavaScript sepadan dengan cara manusia berfikir tentang masalah langkah demi langkah +- **Penyelenggaraan**: Mengemas kini versi JavaScript untuk keperluan yang berbeza adalah mudah dan jelas -βœ… **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! +βœ… **Mengenai urutan Fibonacci**: Corak nombor yang sangat cantik ini (di mana setiap nombor sama dengan jumlah dua nombor sebelumnya: 0, 1, 1, 2, 3, 5, 8...) muncul secara literal *di mana-mana* dalam alam semula jadi! Anda akan menjumpainya dalam lingkaran bunga matahari, corak kerucut pain, cara cengkerang nautilus melengkung, dan malah dalam cara cabang pokok tumbuh. Ia sangat mengagumkan bagaimana matematik dan kod boleh membantu kita memahami dan mencipta semula corak yang digunakan oleh alam untuk menghasilkan keindahan! ## Blok Bangunan Yang Membuat Keajaiban Berlaku -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! +Baiklah, sekarang anda telah melihat bagaimana bahasa pengaturcaraan kelihatan dalam tindakan, mari kita pecahkan bahagian asas yang membentuk setiap program yang pernah ditulis. Anggap ini sebagai bahan penting dalam resipi kegemaran anda – apabila anda memahami fungsi setiap satu, anda akan dapat membaca dan menulis kod dalam hampir mana-mana bahasa! -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! πŸ˜„ +Ini seumpama belajar tatabahasa pengaturcaraan. Ingat kembali di sekolah apabila anda belajar tentang kata nama, kata kerja, dan cara menyusun ayat? Pengaturcaraan mempunyai versi tatabahasanya sendiri, dan sebenarnya, ia jauh lebih logik dan mudah dimaafkan berbanding tatabahasa Bahasa Inggeris! πŸ˜„ -### Penyataan: Arahan Langkah demi Langkah +### Pernyataan: Arahan Langkah demi Langkah -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." +Mari mulakan dengan **pernyataan** – ini seperti ayat individu dalam perbualan dengan komputer anda. Setiap pernyataan memberitahu komputer untuk melakukan satu perkara tertentu, seperti memberi arahan: "Belok kiri sini," "Berhenti di lampu merah," "Parkir di tempat itu." -Apa yang saya suka tentang penyataan adalah betapa biasanya mudah dibaca. Lihat ini: +Apa yang saya suka tentang pernyataan ialah betapa biasanya ia mudah dibaca. Tengok ini: ```javascript // Pernyataan asas yang melaksanakan tindakan tunggal @@ -287,9 +287,9 @@ console.log("Hello, world!"); const sum = 5 + 3; ``` -**Ini yang dibuat oleh kod ini:** -- **Isytihar** pembolehubah tetap untuk menyimpan nama pengguna -- **Paparkan** mesej salam ke output konsol +**Berikut adalah apa yang kod ini lakukan:** +- **Isytiharkan** pembolehubah tetap untuk menyimpan nama pengguna +- **Paparkan** mesej sapaan ke output konsol - **Kira** dan simpan hasil operasi matematik ```javascript @@ -299,21 +299,21 @@ document.body.style.backgroundColor = "lightblue"; ``` **Langkah demi langkah, ini yang berlaku:** -- **Ubah** tajuk halaman web yang muncul di tab pelayar +- **Ubah** tajuk laman web yang muncul di tab pelayar - **Tukar** warna latar belakang seluruh badan halaman ### Pembolehubah: Sistem Memori Program Anda -Baiklah, **pembolehubah** sebenarnya 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 menyerupai perkara yang anda gunakan setiap hari! -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. +Fikirkan tentang senarai kenalan telefon anda sejenak. Anda tidak menghafal nombor telefon semua orang – sebaliknya, anda menyimpan "Ibu," "Kawan Baik," atau "Tempat Pizza Yang Hantar Sehingga 2 Pagi" dan biarkan telefon anda ingat nombor sebenar. Pembolehubah berfungsi dengan cara yang sama! Ia seperti bekas bermerek di mana program anda boleh menyimpan maklumat dan mengambilnya semula menggunakan nama yang benar-benar masuk akal. -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! +Apa yang sangat menarik: pembolehubah boleh berubah semasa program anda berjalan (oleh itu nama "pembolehubah" – faham tak maksudnya?). Seperti mana anda mungkin mengemaskini kenalan tempat pizza apabila jumpa tempat yang lebih baik, pembolehubah boleh dikemaskini apabila program anda belajar maklumat baru atau keadaan berubah! -Biarkan saya tunjukkan betapa mudahnya ini: +Saya tunjukkan bagaimana ini boleh jadi sangat mudah: ```javascript -// Langkah 1: Mewujudkan pembolehubah asas +// Langkah 1: Mencipta pembolehubah asas const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; @@ -322,9 +322,9 @@ let isRaining = false; **Memahami konsep ini:** - **Simpan** nilai yang tidak berubah dalam pembolehubah `const` (seperti nama tapak) -- **Gunakan** `let` untuk nilai yang boleh berubah sepanjang program anda -- **Tugaskan** jenis data berbeza: rentetan (teks), nombor, dan boolean (betul/salah) -- **Pilih** nama yang deskriptif yang menjelaskan apa yang setiap pembolehubah simpan +- **Guna** `let` untuk nilai yang boleh berubah sepanjang program anda +- **Tetapkan** jenis data berbeza: rentetan (teks), nombor, dan boolean (benar/salah) +- **Pilih** nama yang deskriptif yang menerangkan apa yang setiap pembolehubah simpan ```javascript // Langkah 2: Bekerja dengan objek untuk mengelompokkan data berkaitan @@ -335,10 +335,10 @@ const weatherData = { }; ``` -**Dalam contoh di atas, kita telah:** -- **Buat** objek untuk mengumpul maklumat cuaca berkaitan +**Dalam kod di atas, kami:** +- **Cipta** objek untuk mengumpulkan maklumat cuaca yang berkaitan - **Susun** pelbagai data di bawah satu nama pembolehubah -- **Gunakan** pasangan kunci-nilai untuk memberi label setiap maklumat dengan jelas +- **Guna** pasangan kunci-nilai untuk melabel setiap maklumat dengan jelas ```javascript // Langkah 3: Menggunakan dan mengemas kini pembolehubah @@ -351,31 +351,31 @@ temperature = 68; ``` **Mari fahami setiap bahagian:** -- **Paparkan** maklumat menggunakan literal templat dengan sintaks `${}` +- **Paparkan** maklumat menggunakan template literal 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 membuat mesej yang bermakna +- **Kemas kini** pembolehubah yang diistiharkan dengan `let` untuk mencerminkan keadaan berubah +- **Gabungkan** beberapa pembolehubah untuk buat mesej yang bermakna ```javascript -// Langkah 4: Pemecahan moden untuk kod yang lebih kemas +// Langkah 4: Penyahstrukturan moden untuk kod yang lebih kemas const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` **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 +- **Keluarkan** sifat tertentu dari objek menggunakan penetapan destruktur +- **Cipta** pembolehubah baru secara automatik dengan nama yang sama seperti kunci objek +- **Permudahkan** kod dengan mengelakkan notasi titik yang berulang ### Aliran Kawalan: Mengajar Program Anda 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. +Baiklah, di sinilah pengaturcaraan menjadi sangat mengagumkan! **Aliran kawalan** sebenarnya mengajar program anda bagaimana membuat keputusan bijak, sama seperti anda lakukan setiap hari tanpa perlu berfikir. -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! +Bayangkan ini: pagi tadi anda mungkin melalui sesuatu seperti "Jika hujan, saya bawa payung. Jika sejuk, saya pakai jaket. Jika saya lambat, saya langkau sarapan dan beli kopi dalam perjalanan." Otak anda secara semula jadi mengikuti logik if-then ini berulang kali setiap hari! -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! +Ini yang membuatkan program terasa pintar dan hidup, bukannya hanya ikut skrip membosankan yang boleh diramal. Mereka boleh melihat situasi, menilai apa yang berlaku, dan bertindak balas dengan tepat. Ia seperti memberikan otak kepada program anda yang boleh menyesuaikan diri dan membuat pilihan! -Nak tengok betapa hebatnya ini berfungsi? Mari saya tunjukkan: +Nak lihat betapa hebatnya ini berfungsi? Saya tunjukkan: ```javascript // Langkah 1: Logik bersyarat asas @@ -389,10 +389,10 @@ if (userAge >= 18) { } ``` -**Ini yang dibuat oleh kod ini:** +**Kod ini melakukan:** - **Periksa** jika umur pengguna memenuhi syarat mengundi -- **Jalankan** blok kod berbeza berdasarkan hasil keadaan -- **Kira** dan paparkan berapa lama lagi sehingga layak mengundi jika bawah 18 +- **Laksanakan** blok kod berbeza berdasarkan keputusan syarat +- **Kira** dan paparkan berapa lama sehingga layak mengundi jika bawah 18 - **Berikan** maklum balas khusus yang membantu untuk setiap senario ```javascript @@ -409,22 +409,22 @@ if (userAge >= 18 && hasPermission) { } ``` -**Memecahkan apa yang berlaku di sini:** -- **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 +**Pecahan apa yang terjadi di sini:** +- **Gabungkan** beberapa syarat menggunakan operator `&&` (dan) +- **Cipta** hirarki syarat menggunakan `else if` untuk pelbagai senario +- **Tangani** semua kemungkinan dengan pernyataan `else` terakhir +- **Berikan** maklum balas jelas dan boleh dilaksanakan untuk setiap situasi berbeza ```javascript -// Langkah 3: Syarat ringkas dengan operator ternari +// Langkah 3: Keadaan ringkas dengan operator ternari const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**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 +**Apa yang perlu anda ingat:** +- **Guna** operator ternari (`? :`) untuk syarat dua pilihan yang mudah +- **Tulis** syarat dahulu, diikuti `?`, kemudian keputusan benar, `:`, dan keputusan salah +- **Guna** corak ini apabila perlu tetapkan nilai berdasarkan syarat ```javascript // Langkah 4: Mengendalikan pelbagai kes khusus @@ -447,51 +447,51 @@ switch (dayOfWeek) { } ``` -**Kod ini mencapai perkara berikut:** -- **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** penyataan `break` untuk mengelakkan kod terus ke kes seterusnya +**Kod ini mencapai yang berikut:** +- **Padankan** nilai pembolehubah dengan beberapa kes tertentu +- **Kumpulkan** kes yang serupa bersama (hari bekerja vs hujung minggu) +- **Laksanakan** blok kod sesuai apabila padanan ditemui +- **Sertakan** kes `default` untuk tangani nilai tidak dijangka +- **Guna** pernyataan `break` untuk elakkan kod terus ke kes seterusnya -> πŸ’‘ **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. +> πŸ’‘ **Analogi dunia nyata**: Anggap aliran kawalan seperti GPS paling sabar di dunia memberi arahan kepada anda. Ia mungkin berkata "Jika ada kesesakan di Jalan Utama, ambil lebuh raya pula. Jika pembinaan menghalang lebuh raya, cuba laluan indah." Program menggunakan logik bersyarat yang sama untuk bertindak balas dengan bijak terhadap situasi yang berbeza dan sentiasa memberikan pengalaman terbaik kepada pengguna. ### 🎯 **Semakan Konsep: Penguasaan Blok Bangunan** -**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? +**Mari lihat bagaimana anda faham asas-asas:** +- Bolehkah anda terangkan perbezaan antara pembolehubah dan pernyataan dengan kata-kata anda sendiri? +- Fikirkan satu senario dunia sebenar di mana anda menggunakan keputusan if-then (seperti contoh mengundi kami) +- Apa satu perkara tentang logik pengaturcaraan yang mengejutkan anda? **Peningkat keyakinan cepat:** ```mermaid flowchart LR - A["πŸ“ Pernyataan
(Arahan)"] --> B["πŸ“¦ Pembolehubah
(Simpanan)"] --> C["πŸ”€ Aliran Kawalan
(Keputusan)"] --> D["πŸŽ‰ Program Berfungsi!"] + A["πŸ“ Pernyataan
(Arahan)"] --> B["πŸ“¦ Pemboleh Ubah
(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 seterusnya**: Kita akan berseronok menelusuri konsep ini dengan lebih mendalam semasa meneruskan perjalanan hebat ini bersama! Sekarang, fokus sahaja pada perasaan teruja dengan segala kemungkinan hebat di hadapan anda. Kemahiran dan teknik khusus akan datang secara semula jadi apabila kita berlatih bersama – saya janji ia akan jauh lebih menyeronokkan daripada yang anda jangkakan! -## Alat Perdagangan +## Alat-Alat Kerja -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. +Baiklah, ini sebenarnya tempat saya jadi sangat teruja sehingga sukar nak kawal diri! πŸš€ Kita akan bercakap tentang alat yang hebat yang akan buat anda rasa seperti baru dapat kunci kapal angkasa digital. -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! +Anda tahu macam mana tukang masak ada pisau seimbang sempurna yang rasa macam sambungan tangan mereka? Atau macam mana pemuzik ada gitar yang seolah-olah bernyanyi sebaik sahaja mereka sentuh? Baik, pembangun pun ada versi alat ajaib mereka sendiri, dan ini yang akan betul-betul buat anda terpukau – kebanyakan daripadanya adalah percuma! -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. +Saya hampir melompat di kerusi saya memikirkan nak kongsikan ini dengan anda sebab ia benar-benar mengubah cara kita bina perisian. Kita bercakap tentang pembantu pengekodan dipacu AI yang boleh bantu tulis kod anda (saya serius!), persekitaran awan di mana anda boleh bina aplikasi sepenuhnya dari mana-mana dengan Wi-Fi, dan alat penyahpepijat yang sangat canggih sehingga rasa macam ada penglihatan sinar-X untuk program anda. -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! +Dan ini bahagian yang masih buat saya bergetar: ini bukan "alat pemula" yang anda akan lambat-laun tinggalkan. Ini adalah alat tahap profesional yang sama yang pembangun di Google, Netflix, dan studio aplikasi indie kegemaran anda gunakan sekarang juga. Anda akan rasa macam pro gila menggunakan ini! ```mermaid graph TD A["πŸ’‘ Idea Anda"] --> B["⌨️ Penyunting Kod
(VS Code)"] - B --> C["🌐 Alat Pembangun Pelayar
(Ujian & Penyahpepijatan)"] - C --> D["⚑ Baris Arahan
(Automasi & Alat)"] + B --> C["🌐 Alat Pembangun Penyemak Imbas
(Ujian & Pembaikan Ralat)"] + C --> D["⚑ Baris Perintah
(Automasi & Alat)"] D --> E["πŸ“š Dokumentasi
(Pembelajaran & Rujukan)"] - E --> F["πŸš€ Apl Web Luar Biasa!"] + E --> F["πŸš€ Aplikasi Web Hebat!"] B -.-> G["πŸ€– Pembantu AI
(GitHub Copilot)"] C -.-> H["πŸ“± Ujian Peranti
(Reka Bentuk Responsif)"] @@ -507,107 +507,107 @@ graph TD ``` ### Penyunting 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 bincang tentang penyunting kod – ini benar-benar akan jadi tempat kegemaran baru anda! Anggap ia sebagai tempat perlindungan pengkodan peribadi di mana anda akan habiskan kebanyakan masa 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! +Tapi apa yang betul-betul ajaib tentang penyunting moden ialah mereka bukan sekadar penyunting teks biasa. Mereka seperti mentor pengkodan yang paling cerdas dan menyokong sentiasa berada di sebelah anda 24/7. Mereka tangkap kesilapan taip sebelum anda sedar, cadangkan penambahbaikan yang buat anda kelihatan seperti genius, bantu anda faham setiap baris kod, malah ada yang boleh ramal apa yang anda nak taip dan tawarkan lengkapi fikiran 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 ingat masa pertama kali jumpa auto-completion – saya rasa macam hidup di masa depan. Anda mula taip sesuatu, dan penyunting anda kata, "Eh, adakah anda maksud fungsi ini yang tepat anda perlukan?" Macam ada pembaca fikiran sebagai rakan pengkodan anda! -**Apa yang buat penyunting ini sangat hebat?** +**Apa yang buat penyunting ini hebat?** -Penyunting kod moden menawarkan pelbagai ciri yang mengagumkan direka untuk meningkatkan produktiviti anda: +Penyunting kod moden tawarkan pelbagai ciri hebat yang direka untuk tingkatkan 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 | +| **Pemfokusan Sintaks** | Warnakan bahagian kod anda yang berbeza | Mudahkan membaca kod dan kenal pasti kesilapan | +| **Pengisian Automatik** | Cadangkan kod semasa anda menaip | Cepatkan pengekodan dan kurang silap taip | +| **Alat Penyahpepijat** | Bantu cari dan baiki kesilapan | Jimat waktu menyelesaikan masalah | +| **Sambungan** | Tambah ciri khusus | Sesuaikan penyunting anda mengikut teknologi | +| **Pembantu AI** | Cadangkan kod dan penjelasan | Percepat 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**: Nak tengok alat ini beraksi? Tonton [Video Alat-Alat Kerja](https://youtube.com/watch?v=69WJeXGBdxg) untuk gambaran menyeluruh. #### 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 cemerlang +- Ekosistem sambungan yang hebat - Terminal terbina dalam dan integrasi Git - **Sambungan wajib ada**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Cadangan kod berkuasa AI + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Cadangan kod dipacu 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) - Format kod automatik - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Tangkap salah eja dalam kod anda + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Tangkap kesilapan taip dalam kod anda **[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Berbayar, percuma untuk pelajar) -- Alat penyahpepijatan dan ujian lanjutan -- Penyiapan kod pintar +- Alat penyahpepijat dan ujian lanjutan +- Pengisian kod pintar - Kawalan versi terbina dalam -**IDE Berasaskan Awan** (Harga pelbagai) +**IDE Berasaskan Awan** (Pelbagai harga) - [GitHub Codespaces](https://github.com/features/codespaces) - VS Code penuh dalam pelayar anda - [Replit](https://replit.com/) - Bagus untuk belajar dan berkongsi kod -- [StackBlitz](https://stackblitz.com/) - Pembangunan web penuh serta-merta +- [StackBlitz](https://stackblitz.com/) - Pembangunan web penuh serta merta -> πŸ’‘ **Tip Memulakan**: Mula dengan Visual Studio Code – ia percuma, digunakan secara meluas dalam industri, dan mempunyai komuniti besar yang menghasilkan tutorial dan sambungan berguna. +> πŸ’‘ **Petua Mula**: Mulakan dengan Visual Studio Code – ia percuma, digunakan secara meluas dalam industri, dan mempunyai komuniti besar yang buat tutorial dan sambungan yang membantu. ### Pelayar Web: Makmal Pembangunan Rahsia Anda -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! +Baiklah, bersiaplah untuk minda anda benar-benar terkejut! Anda tahu macam mana anda gunakan pelayar untuk layari media sosial dan tonton video? Sebenarnya ia menyembunyikan makmal pembangun rahsia yang hebat sepanjang masa, hanya menunggu untuk anda temui! -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! +Setiap kali anda klik kanan pada laman web dan pilih "Inspect Element," anda sedang membuka dunia alat pembangun tersembunyi yang sebenarnya lebih berkuasa daripada beberapa perisian mahal yang pernah saya bayar ratusan ringgit sebelum ini. Ia seperti menemui dapur biasa anda sebenarnya menyimpan makmal tukang masak profesional di belakang panel rahsia! +Kali pertama seseorang menunjukkan saya DevTools pelayar, saya habiskan masa kira-kira tiga jam hanya mengklik sekitar dan berkata "TUNGGU, IA BOLEH BUAT ITU JUGA?!" Anda boleh mengedit mana-mana laman web secara masa nyata, melihat dengan tepat seberapa pantas segala-galanya dimuatkan, menguji bagaimana laman anda kelihatan pada peranti yang berbeza, dan malah membetulkan JavaScript seperti seorang pro sepenuhnya. Ia benar-benar menakjubkan! -**Inilah sebab mengapa pelayar adalah senjata rahsia anda:** +**Ini sebab mengapa pelayar adalah senjata rahsia anda:** -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. +Apabila anda mencipta laman web atau aplikasi web, anda perlu melihat bagaimana ia kelihatan dan berperilaku dalam dunia nyata. Pelayar bukan sahaja memaparkan kerja anda tetapi juga menyediakan maklum balas terperinci tentang prestasi, aksesibiliti, dan isu berpotensi. #### Alat Pembangun Pelayar (DevTools) -Pelayar moden termasuk suite pembangunan yang menyeluruh: +Pelayar moden termasuk suite pembangunan yang lengkap: -| 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 | +| Kategori Alat | Apa Fungsinya | Contoh Penggunaan | +|---------------|--------------|------------------| +| **Pemeriksa Elemen** | Lihat dan edit HTML/CSS dalam masa nyata | Laraskan gaya untuk melihat hasil serta-merta | +| **Konsol** | Lihat mesej ralat dan uji JavaScript | Betulkan masalah dan cuba kod | +| **Pemantau Rangkaian** | Jejak bagaimana sumber dimuatkan | Optimumkan prestasi dan masa muat | +| **Pemeriksa Aksesibiliti** | Uji reka bentuk inklusif | Pastikan laman anda berfungsi untuk semua pengguna | +| **Simulator Peranti** | Pratonton pada saiz skrin berbeza | Uji reka bentuk responsif tanpa peranti pelbagai | #### 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 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 +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - DevTools standard industri dengan dokumentasi luas +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Alat CSS Grid dan aksesibiliti yang cemerlang +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Dibina di 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 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 merentasi semua pelayar utama untuk memastikan pengalaman pengguna yang konsisten. -### Alat Baris Perintah: Pintu Masuk Anda Kepada Kuasa Super Pembangun +### Alat Baris Perintah: Laluan Anda ke Kuasa Super Pembangun -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!" πŸ˜… +Baiklah, mari kita jujur tentang baris perintah, kerana saya mahu anda dengar ini dari seseorang yang benar-benar faham. Bila saya pertama kali melihatnya – hanya skrin hitam menakutkan dengan teks berkedip – saya benar-benar fikir, "Tidak, sama sekali tidak! Ini nampak seperti sesuatu dari filem penggodam tahun 1980-an, dan saya memang tak cukup pintar untuk ini!" πŸ˜… -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." +Tapi ini apa yang saya harap seseorang beritahu saya dulu, dan apa yang saya beritahu anda sekarang: baris perintah bukanlah menakutkan – ia sebenarnya seperti berborak terus dengan komputer anda. Fikirkan ia sebagai perbezaan antara memesan makanan melalui aplikasi mewah dengan gambar dan menu (yang mudah dan senang) berbanding masuk ke restoran tempatan kegemaran anda di mana cef tahu betul apa yang anda suka dan boleh masak sesuatu yang sempurna hanya dengan anda mengatakan "kejutan saya dengan sesuatu yang hebat." -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! +Baris perintah adalah tempat pembangun rasa seperti ahli sihir mutlak. Anda taip beberapa kata yang nampak magikal (baiklah, ia cuma arahan, tetapi rasanya magikal!), tekan enter, dan BOOM – anda telah mencipta struktur projek sepenuhnya, memasang alat berkuasa dari seluruh dunia, atau melancarkan aplikasi anda ke internet untuk jutaan orang lihat. Setelah anda merasai kuasa itu, ia benar-benar ketagih! -**Kenapa baris perintah akan menjadi alat kegemaran anda:** +**Kenapa baris perintah akan jadi alat kegemaran anda:** -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. +Walaupun antara muka grafik bagus untuk banyak tugas, baris perintah unggul dalam automasi, ketepatan, dan kelajuan. Banyak alat pembangunan berfungsi terutama melalui antara muka baris perintah, dan belajar menggunakannya dengan cekap boleh memperbaiki produktiviti anda dengan mendadak. ```bash -# Langkah 1: Cipta dan navigasi ke direktori projek +# Langkah 1: Buat dan pergi ke direktori projek mkdir my-awesome-website cd my-awesome-website ``` **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 +- **Masuk** ke dalam direktori baru yang dibuat untuk mula bekerja ```bash -# Langkah 2: Inisialisasi projek dengan package.json +# Langkah 2: Mulakan projek dengan package.json npm init -y # Pasang alat pembangunan moden @@ -615,100 +615,100 @@ npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Langkah demi langkah, ini yang berlaku:** +**Langkah demi langkah, inilah yang berlaku:** - **Inisialisasi** projek Node.js baru dengan tetapan lalai menggunakan `npm init -y` -- **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** bendera `--save-dev` untuk menandakan ini sebagai kebergantungan khusus pembangunan +- **Pasang** Vite sebagai alat bina moden untuk pembangunan cepat dan bina produksi +- **Tambah** Prettier untuk format kod automatik dan ESLint untuk pemeriksaan kualiti kod +- **Gunakan** bendera `--save-dev` untuk tandakan ini sebagai kebergantungan khusus pembangunan ```bash -# Langkah 3: Cipta struktur projek dan fail +# Langkah 3: Buat struktur projek dan fail mkdir src assets echo 'My Site

Hello World

' > index.html -# Mulakan server pembangunan +# Mulakan pelayan pembangunan npx vite ``` -**Dalam di atas, kami telah:** -- **Susun** projek kami dengan mencipta folder berasingan untuk kod sumber dan aset -- **Jana** fail HTML asas dengan struktur dokumen yang betul -- **Mulakan** pelayan pembangunan Vite untuk pengecasan semula langsung dan penggantian modul panas +**Dalam yang di atas, kami:** +- **Mengatur** projek dengan membuat folder terpisah untuk kod sumber dan aset +- **Menjana** fail HTML asas dengan struktur dokumen yang betul +- **Memulakan** pelayan pembangunan Vite untuk pemuatan semula langsung dan penggantian modul panas #### Alat Baris Perintah Penting untuk Pembangunan Web -| Alat | Tujuan | Kenapa Anda Perlu Ia | -|------|--------|---------------------| -| **[Git](https://git-scm.com/)** | Kawalan versi | Jejak perubahan, bekerjasama dengan orang lain, sandarkan kerja anda | +| Alat | Tujuan | Kenapa Anda Perlu | +|------|---------|-------------------| +| **[Git](https://git-scm.com/)** | Kawalan versi | Jejak perubahan, bekerjasama dengan orang lain, sandaran 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 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 | +| **[ESLint](https://eslint.org/)** | Kualiti kod | Cari dan baiki masalah dalam JavaScript anda secara automatik | +| **[Prettier](https://prettier.io/)** | Format kod | Kekalkan kod anda sentiasa diformat dengan konsisten dan mudah dibaca | #### Pilihan Spesifik Platform **Windows:** -- **[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 Windows tradisional +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Terminal moden penuh ciri +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** πŸ’» - Persekitaran skrip berkuasa +- **[Command Prompt](https://learn.microsoft.com/windows-server/administration/windows-commands/windows-commands)** πŸ’» - Baris perintah Windows tradisional **macOS:** - **[Terminal](https://support.apple.com/guide/terminal/)** πŸ’» - Aplikasi terminal terbina dalam -- **[iTerm2](https://iterm2.com/)** - Terminal dipertingkat dengan ciri lanjutan +- **[iTerm2](https://iterm2.com/)** - Terminal lanjutan dengan ciri-ciri hebat **Linux:** - **[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 +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Peniruan terminal lanjutan -> πŸ’» = Terpasang secara lalai dalam sistem operasi +> πŸ’» = Telah dipasang secara lalai 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**: 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 menguasai arahan lanjutan dan teknik automasi. -### Dokumentasi: Mentor Pembelajaran Anda Yang Sentiasa Ada +### Dokumentasi: Mentor Pembelajaran Yang Sentiasa Ada -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! +Baiklah, saya nak kongsi satu rahsia kecil yang akan buat anda rasa lebih selesa sebagai pemula: walaupun pembangun 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 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! +Fikirkan dokumentasi seperti mempunyai akses kepada guru paling sabar dan berpengetahuan di dunia yang sedia 24/7. Terperangkap pada masalah waktu 2 pagi? Dokumentasi ada dengan pelukan maya yang hangat dan tepat jawapan yang anda perlukan. Nak belajar tentang ciri baru yang semua orang bualkan? Dokumentasi sokong anda dengan contoh langkah demi langkah. Cuba fahami kenapa sesuatu berfungsi begini? Anda boleh teka – dokumentasi sedia terangkan dengan cara yang buat anda akhirnya faham! -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. +Ini sesuatu yang benar-benar ubah pandangan saya: dunia pembangunan web bergerak sangat cepat, dan tiada siapa (betul-betul tiada siapa!) yang ingat semua perkara. Saya lihat pembangun kanan dengan pengalaman 15+ tahun perlu semak sintaks asas, dan anda tahu apa? Itu bukan memalukan – itu pintar! Bukan tentang ingatan sempurna; ia tentang tahu di mana nak cari jawapan yang boleh dipercayai dengan cepat dan bagaimana untuk gunakan. -**Inilah tempat magik sebenar berlaku:** +**Inilah tempat keajaiban sebenar berlaku:** -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. +Pembangun profesional gunakan sebahagian besar masa mereka membaca dokumentasi – bukan sebab mereka tak tahu tapi sebab landskap pembangunan web sangat pantas berkembang dan untuk kekal kemas kini mereka perlu belajar berterusan. Dokumentasi yang bagus bantu anda faham bukan sahaja *bagaimana* guna sesuatu, tapi *kenapa* dan *bila* gunakannya. #### Sumber Dokumentasi Penting **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** - Standard emas untuk dokumentasi teknologi web -- Panduan komprehensif untuk HTML, CSS, dan JavaScript +- Panduan lengkap untuk HTML, CSS, dan JavaScript - Termasuk maklumat keserasian pelayar -- Mempunyai contoh praktikal dan demo interaktif +- Memiliki contoh praktikal dan demo interaktif **[Web.dev](https://web.dev)** (oleh Google) - Amalan terbaik pembangunan web moden -- Panduan pengoptimuman prestasi +- Panduan optimum prestasi - 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)** +**[Dokumentasi Pembangun Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** - Sumber pembangunan pelayar Edge - Panduan Progressive Web App -- Wawasan pembangunan lintas platform +- Pandangan pembangunan merentas platform **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** - Kurikulum pembelajaran terstruktur - Kursus video dari pakar industri -- Latihan pengkodan praktikal +- Latihan pengekodan amali -> πŸ“š **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. +> πŸ“š **Strategi Belajar**: Jangan cuba hafal dokumentasi – sebaliknya, belajar cara menavigasi dengan cekap. Tandai rujukan yang kerap digunakan dan amalkan guna fungsi carian untuk cari maklumat spesifik dengan cepat. -### πŸ”§ **Semak Kemahiran Alat: Apa Yang Resonates Dengan Anda?** +### πŸ”§ **Pemeriksaan Penguasaan Alat: Apa Yang Menyentuh 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? +**Luangkan masa memikirkan:** +- Alat mana paling anda teruja untuk cuba dahulu? (Tiada jawapan salah!) +- Adakah baris perintah masih nampak menakutkan, atau anda mula rasa ingin tahu? +- Boleh anda bayangkan menggunakan DevTools pelayar untuk intip di sebalik tabir laman web kegemaran anda? ```mermaid pie title "Masa Pembangun Dihabiskan Dengan Alat" @@ -716,70 +716,70 @@ pie title "Masa Pembangun Dihabiskan Dengan Alat" "Ujian Pelayar" : 25 "Baris Perintah" : 15 "Membaca Dokumen" : 15 - "Mengesan Ralat" : 5 + "Penyahpepijatan" : 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! +> **Wawasan menarik**: Kebanyakan pembangun menghabiskan kira-kira 40% masa mereka dalam editor kod, tapi lihat berapa banyak masa untuk menguji, belajar dan menyelesaikan masalah. Pengaturcaraan bukan hanya tentang menulis kod – ia tentang mencipta pengalaman! -βœ… **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. +βœ… **Makanan minda**: Ini sesuatu untuk difikirkan – bagaimana anda fikir alat untuk bina laman web (pembangunan) mungkin berbeza daripada alat untuk reka bentuk rupa (rekabentuk)? Ia macam beza antara arkitek yang mereka rumah cantik dan kontraktor yang bina betul-betul. Kedua-duanya penting, tapi perlukan kotak alat yang berbeza! Cara fikir macam ini sangat membantu anda nampak gambaran besar bagaimana laman web terhasil. ## Cabaran Ejen GitHub Copilot πŸš€ -Gunakan mod Ejen untuk melengkapkan cabaran berikut: +Gunakan mod Ejen untuk lengkapkan cabaran berikut: -**Deskripsi:** Terokai ciri-ciri editor kod moden atau IDE dan tunjukkan bagaimana ia boleh memperbaiki aliran kerja anda sebagai pembangun web. +**Deskripsi:** Terokai 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 bagaimana ia menguntungkan 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, membaiki, atau menyelenggara kod dengan lebih cekap. Untuk setiap satu, berikan penerangan ringkas bagaimana ia memberi manfaat kepada aliran kerja anda. --- ## πŸš€ Cabaran -**Baiklah, detektif, sedia untuk kes pertama anda?** +**Baiklah, detektif, bersedia untuk kes pertama anda?** -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! +Sekarang anda sudah ada asas hebat ini, saya ada pengembaraan yang akan bantu anda lihat betapa pelbagai dan menariknya dunia pengaturcaraan sebenarnya. Dan dengar – ini belum tentang menulis kod lagi, jadi jangan risau! Anggap diri anda sebagai detektif bahasa pengaturcaraan dalam kes pertama yang sangat menarik ini! -**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! +**Misi anda, sekiranya anda mahu terima:** +1. **Jadilah peneroka bahasa:** Pilih tiga bahasa pengaturcaraan dari alam yang sangat berbeza – mungkin satu untuk bina laman web, satu cipta aplikasi mudah alih, dan satu proses data untuk saintis. Cari contoh tugasan mudah yang sama ditulis dalam setiap bahasa. Saya janji anda akan terkejut betapa berbezanya ia boleh nampak walaupun buat perkara yang sama! -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! +2. **Temui kisah asal-usul mereka:** Apa yang buat setiap bahasa istimewa? Ini fakta menarik – setiap bahasa pengaturcaraan dicipta kerana seseorang fikir, "Tahukah? Mesti ada cara lebih baik untuk selesaikan masalah khusus ini." Bolehkah anda tahu masalah apa yang mereka cuba selesaikan? Sesetengah cerita ini memang menarik! -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! +3. **Kenali komuniti:** Lihat betapa mesra dan penuh semangat komuniti setiap bahasa. Ada yang ada jutaan pembangun berkongsi ilmu dan bantu satu sama lain, yang lain kecil tapi rapat dan sangat menyokong. Anda pasti suka lihat personaliti berbeza komuniti ni! -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. +4. **Ikut hati rasa:** Bahasa mana paling anda rasa mudah didekati sekarang? Jangan risau tentang buat pilihan "sempurna" – cuma ikuti naluri anda! Tiada jawapan salah di sini, dan anda sentiasa boleh teroka bahasa lain kemudian. -**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! +**Kerja detektif bonus:** Cuba cari apa laman web atau aplikasi utama dibina dengan setiap bahasa. Saya jamin anda akan terkejut bila tahu apa yang kuasakan Instagram, Netflix, atau permainan mudah alih kegemaran 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! +> πŸ’‘ **Ingat:** Anda bukan cuba jadi pakar bahasa hari ini. Anda cuma kenal kawasan dulu sebelum pilih tempat mahu mengatur tapak. Ambil masa, berseronok, dan biar rasa ingin tahu pimpin! -## Mari Raikan Apa Yang Anda Telah Temui! +## Mari Raikan Penemuan Anda! -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! +Wah, anda sudah serap begitu banyak maklumat hebat hari ini! Saya benar-benar teruja nak lihat berapa banyak perjalanan luar biasa ini melekat dalam diri anda. Dan ingat – ini bukan ujian untuk dapatkan semuanya sempurna. Ini lebih kepada sambutan semua perkara hebat yang anda pelajari tentang dunia menarik yang bakal anda ceburi! [Ambil kuiz selepas pelajaran](https://ff-quizzes.netlify.app/web/) -## Ulasan & Belajar Sendiri +## Semak & Belajar Sendiri -**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! +**Ambil masa anda untuk teroka dan berseronok!** +Anda telah menerokai banyak perkara hari ini, dan itu sesuatu yang patut dibanggakan! Kini tiba bahagian yang menyeronokkan – meneroka topik-topik yang membangkitkan rasa ingin tahu anda. Ingat, ini bukan kerja rumah – ini satu pengembaraan! -**Selami lebih dalam apa yang menggembirakan anda:** +**Selami lebih dalam apa yang membuat anda teruja:** -**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. +**Cuba sendiri dengan bahasa pengaturcaraan:** +- Lawati laman web rasmi 2-3 bahasa yang menarik perhatian anda. Setiap satu mempunyai personaliti dan kisahnya sendiri! +- Cuba beberapa taman permainan pengekodan dalam talian seperti [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), atau [Replit](https://replit.com/). Jangan takut untuk bereksperimen – anda tidak akan merosakkan apa-apa! +- Baca tentang bagaimana bahasa kegemaran anda tercipta. Serius, beberapa cerita asal-usul ini sangat menarik dan akan membantu anda memahami mengapa bahasa berfungsi dengan cara mereka. -**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 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. +**Biasakan diri dengan alat baharu anda:** +- Muat turun Visual Studio Code jika anda belum lagi – ia percuma dan anda pasti akan menyukainya! +- Luangkan beberapa minit melayari pasar Sambungan. Ia seperti kedai aplikasi untuk editor kod anda! +- Buka Alat Pembangun pelayar anda dan klik sebanyak mungkin. Jangan risau tentang memahami semuanya – hanya biasakan diri dengan apa yang ada. -**Bergabung dengan komuniti:** +**Sertai 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 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! +- Tonton beberapa video pengekodan mesra pemula di YouTube. Ada banyak pencipta hebat di luar sana yang ingat bagaimana rasanya untuk bermula. +- Pertimbangkan untuk menyertai pertemuan tempatan atau komuniti dalam talian. Percayalah, pembangun suka membantu pendatang baru! -> 🎯 **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! +> 🎯 **Dengar, ini yang saya mahu anda ingat**: Anda tidak dijangka menjadi pakar pengekodan dalam sekelip mata! Sekarang, anda baru sahaja mula mengenali dunia baru yang menakjubkan ini yang akan anda ceburi. Ambil masa anda, nikmati perjalanan ini, dan ingat – setiap pembangun yang anda kagumi dahulu duduk di tempat yang sama seperti anda sekarang, berasa teruja dan mungkin sedikit tertekan. Itu sangat normal, dan ia bermakna anda berada di landasan yang betul! @@ -787,52 +787,52 @@ Anda telah menempuh banyak perkara hari ini, dan itu sesuatu yang patut dibangga [Membaca Dokumen](assignment.md) -> πŸ’‘ **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). +> πŸ’‘ **Sedikit dorongan untuk tugasan anda**: Saya sangat ingin melihat anda meneroka beberapa alat yang belum kita bincangkan lagi! Langkau editor, pelayar, dan alat baris arahan yang sudah kita bualkan – ada satu alam semesta alat pembangunan hebat yang menanti untuk diterokai. Cari yang dikekalkan secara aktif dan mempunyai komuniti yang hidup dan membantu (biasanya mereka mempunyai tutorial terbaik dan orang yang paling menyokong apabila anda tersekat dan memerlukan bantuan mesra). --- ## πŸš€ Garis Masa Perjalanan Pengaturcaraan Anda -### ⚑ **Apa Yang Boleh Anda Lakukan Dalam 5 Minit Akan Datang** +### ⚑ **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 penyemak imbas anda (F12) dan klik sekeliling mana-mana laman web +- [ ] Muat turun Visual Studio Code jika anda belum lagi +- [ ] Buka DevTools pelayar anda (F12) dan klik di mana-mana laman web - [ ] Sertai satu komuniti pengaturcaraan (Dev.to, Reddit r/webdev, atau Stack Overflow) -### ⏰ **Apa Yang Boleh Anda Capai Dalam Jam Ini** +### ⏰ **Apa yang Boleh Anda Capai Dalam Jam Ini** - [ ] Lengkapkan kuiz selepas pelajaran dan renungkan jawapan anda -- [ ] Pasang sambungan GitHub Copilot dalam VS Code +- [ ] Sediakan VS Code dengan sambungan GitHub Copilot - [ ] 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) +- [ ] Tonton video "Sehari dalam Kehidupan Pembangun" di YouTube +- [ ] Mulakan kerja penyiasatan bahasa pengaturcaraan anda (dari cabaran) ### πŸ“… **Pengembaraan Anda Sepanjang Minggu** -- [ ] Lengkapkan tugasan dan teroka 3 alat pembangunan baru +- [ ] Lengkapkan tugasan dan terokai 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 catatan blog pembangun tentang perjalanan pengaturcaraan seseorang -- [ ] Sertai perjumpaan maya atau tonton ceramah pengaturcaraan +- [ ] Baca satu catatan blog pembangun mengenai perjalanan pengekodan seseorang +- [ ] Sertai pertemuan 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!) +### πŸ—“οΈ **Transformasi Anda Sepanjang Bulan** +- [ ] Bina projek kecil pertama anda (walaupun halaman web ringkas pun dikira!) - [ ] Sumbang kepada projek sumber terbuka (mula dengan pembaikan dokumentasi) -- [ ] Bimbing seseorang yang baru bermula perjalanan pengaturcaraan mereka -- [ ] Cipta laman web portfolio pembangun anda -- [ ] Sambungkan dengan komuniti pembangun tempatan atau kumpulan belajar -- [ ] Mulakan perancangan penanda aras pembelajaran seterusnya +- [ ] Bimbing seseorang yang baru memulakan perjalanan pengaturcaraan mereka +- [ ] Buat laman web portfolio pembangun anda +- [ ] Sambung dengan komuniti pembangun tempatan atau kumpulan belajar +- [ ] Mula merancang tahap 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 anda ingin terokai dahulu? -- Bagaimana perasaan anda mengenai permulaan perjalanan pengaturcaraan ini? -- Apa satu soalan yang anda ingin tanya kepada pembangun sekarang? +**Sebelum anda meneruskan, luangkan masa untuk meraikan:** +- Apakah satu perkara tentang pengaturcaraan yang membuat anda teruja hari ini? +- Alat atau konsep mana yang anda mahu teroka terlebih dahulu? +- Bagaimana perasaan anda tentang memulakan perjalanan pengaturcaraan ini? +- Apakah satu soalan yang anda ingin tanya kepada pembangun sekarang? ```mermaid journey - title Perjalanan Membina Keyakinan Anda + title Perjalanan Pembinaan Keyakinan Anda section Hari Ini Curious: 3: You Overwhelmed: 4: You @@ -846,11 +846,11 @@ journey Confident: 5: You Helping Others: 5: You ``` -> 🌟 **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! πŸŽ‰ +> 🌟 **Ingat**: Setiap pakar dahulu adalah seorang pemula. Setiap pembangun senior pernah merasa seperti anda sekarang – teruja, mungkin sedikit tertekan, dan pasti ingin tahu apa yang mungkin terjadi. 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 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. +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 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 82372c7a2..01d11bf20 100644 --- a/translations/ms/AGENTS.md +++ b/translations/ms/AGENTS.md @@ -2,13 +2,13 @@ ## Gambaran Projek -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. +Ini adalah repositori kurikulum pendidikan untuk mengajar asas pengembangan 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. ### Komponen Utama -- **Kandungan Pendidikan**: 24 pelajaran terstruktur yang dianjurkan dalam modul berasaskan projek +- **Kandungan Pendidikan**: 24 pelajaran terstruktur yang disusun 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) +- **Kuis Interaktif**: 48 kuiz dengan 3 soalan setiap satu (penilaian pra/pasca 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) @@ -18,11 +18,11 @@ Ini adalah repositori kurikulum pendidikan untuk mengajar asas pembangunan web k - 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 +- Dokumentasi disediakan melalui Docsify dan tersedia sebagai PDF -## Arahan Persediaan +## Perintah Persediaan -Repositori ini terutama untuk penggunaan kandungan pendidikan. Untuk bekerja dengan projek tertentu: +Repositori ini terutamanya untuk penggunaan kandungan pendidikan. Untuk bekerja dengan projek tertentu: ### Persediaan Repositori Utama @@ -37,7 +37,7 @@ cd Web-Dev-For-Beginners cd quiz-app npm install npm run dev # Mulakan pelayan pembangunan -npm run build # Bina untuk pengeluaran +npm run build # Bina untuk produksi npm run lint # Jalankan ESLint ``` @@ -81,28 +81,28 @@ python api.py ### Untuk Penyumbang Kandungan 1. **Fork repositori** ke akaun GitHub anda -2. **Clone fork anda** secara tempatan -3. **Buat cawangan baru** untuk perubahan anda +2. **Clone fork anda** ke mesin tempatan +3. **Buat cabang 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 +5. Uji sebarang perubahan kod dalam direktori projek berkaitan +6. Hantar pull request 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 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 +4. Lengkapkan kuiz pra-pelajaran di https://ff-quizzes.netlify.app/web/ +5. Selesaikan contoh kod dalam folder pelajaran +6. Selesaikan tugasan dan cabaran +7. Ambil kuiz pasca-pelajaran -### Pembangunan Masa Nyata +### Pembangunan Secara Langsung -- **Dokumentasi**: Jalankan `docsify serve` di direktori root (port 3000) -- **Aplikasi Kuis**: Jalankan `npm run dev` di direktori quiz-app +- **Dokumentasi**: Jalankan `docsify serve` di root (port 3000) +- **Aplikasi Kuis**: Jalankan `npm run dev` dalam direktori quiz-app - **Projek**: Gunakan sambungan VS Code Live Server untuk projek HTML -- **Projek API**: Jalankan `npm start` di direktori API masing-masing +- **Projek API**: Jalankan `npm start` dalam direktori API masing-masing ## Arahan Ujian @@ -110,7 +110,7 @@ python api.py ```bash cd quiz-app -npm run lint # Semak masalah gaya kod +npm run lint # Semak untuk isu gaya kod npm run build # Sahkan binaan berjaya ``` @@ -118,25 +118,25 @@ npm run build # Sahkan binaan berjaya ```bash cd 7-bank-project/api -npm run lint # Semak isu gaya kod +npm run lint # Semak masalah gaya kod node server.js # Sahkan pelayan bermula tanpa ralat ``` ### Pendekatan Ujian Umum - Ini adalah repositori pendidikan tanpa ujian automatik menyeluruh -- Ujian manual memberi tumpuan kepada: +- Ujian manual memfokus pada: - Contoh kod berjalan tanpa ralat - Pautan dalam dokumentasi berfungsi dengan betul - - Pembinaan projek selesai dengan berjaya + - Projek dibina dengan jayanya - Contoh mengikuti amalan terbaik -### Pemeriksaan Pra-Penghantaran +### Semakan Sebelum Penghantaran - 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 +- Semak terjemahan mengekalkan struktur yang betul ## Garis Panduan Gaya Kod @@ -144,117 +144,117 @@ node server.js # Sahkan pelayan bermula tanpa ralat - Gunakan sintaks ES6+ moden - Ikuti konfigurasi ESLint standard yang disediakan dalam projek -- Gunakan nama pembolehubah dan fungsi yang bermakna untuk kejelasan pendidikan +- Gunakan nama pemboleh ubah dan fungsi yang bermakna untuk kejelasan pendidikan - Tambah komen yang menerangkan konsep untuk pelajar -- Format menggunakan Prettier jika dipasang +- Format menggunakan Prettier jika dikonfigurasikan ### HTML/CSS - Elemen HTML5 semantik - Prinsip reka bentuk responsif - Konvensyen penamaan kelas yang jelas -- Komen yang menerangkan teknik CSS untuk pelajar +- Komen menerangkan teknik CSS untuk pelajar ### Python - Garis panduan gaya PEP 8 -- Contoh kod yang jelas dan pendidikan -- Petunjuk jenis (type hints) jika berguna untuk pembelajaran +- Contoh kod yang jelas dan berpendidikan +- Hint jenis di mana membantu pembelajaran ### Dokumentasi Markdown -- Hirarki tajuk yang jelas -- Blok kod dengan penentuan bahasa +- Hierarki tajuk yang jelas +- Blok kod dengan spesifikasi bahasa - Pautan ke sumber tambahan -- Tangkapan skrin dan gambar di direktori `images/` -- Teks alt untuk imej untuk aksesibiliti +- Tangkapan skrin dan imej dalam direktori `images/` +- Teks alt untuk imej bagi aksesibiliti -### Organisasi Fail +### Pengurusan Fail -- 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 +- Pelajaran bernombor secara berurutan (1-getting-started-lessons, 2-js-basics, dsb.) +- Setiap projek mempunyai direktori `solution/` dan biasanya `start/` atau `your-work/` +- Imej disimpan di folder `images/` khusus pelajaran - Terjemahan dalam struktur `translations/{language-code}/` -## Pembinaan dan Penerapan +## Pembinaan dan Penyebaran -### Penerapan Aplikasi Kuis (Azure Static Web Apps) +### Penyebaran Aplikasi Kuis (Azure Static Web Apps) -quiz-app dikonfigurasikan untuk penerapan Azure Static Web Apps: +quiz-app dikonfigurasikan untuk penyebaran Azure Static Web Apps: ```bash cd quiz-app npm run build # Membuat folder dist/ -# Menghantar melalui aliran kerja GitHub Actions pada tolak ke main +# Mengedarkan melalui aliran kerja GitHub Actions pada tekan ke main ``` Konfigurasi Azure Static Web Apps: -- **Lokasi App**: `/quiz-app` -- **Lokasi Output**: `dist` -- **Aliran Kerja**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +- **Lokasi aplikasi**: `/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 # Jana PDF dari docs +npm run convert # Jana PDF dari dokumen ``` ### Dokumentasi Docsify ```bash npm install -g docsify-cli # Pasang Docsify secara global -docsify serve # Hidangkan pada localhost:3000 +docsify serve # Hidangkan di localhost:3000 ``` -### Pembinaan Khusus Projek +### Pembinaan Projek Spesifik -Setiap direktori projek mungkin mempunyai proses pembinaan tersendiri: -- Projek Vue: `npm run build` menghasilkan bundel produksi -- Projek statik: Tiada langkah pembinaan, fail terus disajikan +Setiap direktori projek mungkin mempunyai proses binaannya sendiri: +- Projek Vue: `npm run build` mencipta bundel produksi +- Projek statik: Tiada langkah binaan, hidangkan fail terus -## Garis Panduan Permintaan Tarik +## Garis Panduan Pull Request ### Format Tajuk -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` +Gunakan tajuk yang jelas dan deskriptif menunjukkan bidang perubahan: +- `[Quiz-app] Tambah kuiz baru untuk pelajaran X` +- `[Lesson-3] Betulkan kesilapan ejaan dalam projek terrarium` +- `[Translation] Tambah terjemahan Bahasa Sepanyol untuk pelajaran 5` - `[Docs] Kemas kini arahan persediaan` -### Pemeriksaan Diperlukan +### Semakan Diperlukan Sebelum menghantar PR: 1. **Kualiti Kod**: - Jalankan `npm run lint` dalam direktori projek yang terjejas - - Betulkan semua ralat dan amaran lint + - Betulkan semua kesalahan dan amaran lint -2. **Pengesahan Pembinaan**: - - Jalankan `npm run build` jika sesuai - - Pastikan tiada ralat pembinaan +2. **Pengesahan Binaan**: + - Jalankan `npm run build` jika berkenaan + - Pastikan tiada kesalahan binaan -3. **Pemeriksaan Pautan**: +3. **Pengujian Pautan**: - Uji semua pautan markdown - Sahkan rujukan imej berfungsi -4. **Semakan Kandungan**: +4. **Ulasan Kandungan**: - Semak ejaan dan tatabahasa - - Pastikan contoh kod betul dan pendidikan - - Sahkan terjemahan mengekalkan makna asal + - Pastikan contoh kod betul dan berpendidikan + - Sahkan terjemahan mengekalkan maksud asal ### Keperluan Sumbangan -- 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 +- Setuju dengan Microsoft CLA (semakan automatik pada PR pertama) +- Ikut [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) +- Rujuk [CONTRIBUTING.md](./CONTRIBUTING.md) untuk garis panduan terperinci +- Rujuk nombor isu dalam deskripsi PR jika berkenaan ### Proses Semakan - PR disemak oleh penyelenggara dan komuniti -- Kejelasan pendidikan diprioritikan +- Kejelasan pendidikan diberi keutamaan - Contoh kod harus mengikuti amalan terbaik semasa - Terjemahan disemak untuk ketepatan dan kesesuaian budaya @@ -263,7 +263,7 @@ Sebelum menghantar PR: ### Terjemahan Automatik - Menggunakan GitHub Actions dengan aliran kerja co-op-translator -- Menterjemah ke 50+ bahasa secara automatik +- Menterjemah ke lebih 50 bahasa secara automatik - Fail sumber dalam direktori utama - Fail terjemahan dalam direktori `translations/{language-code}/` @@ -272,11 +272,11 @@ Sebelum menghantar PR: 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 +4. Uji sebarang kandungan kuiz yang dipersempitkan -### Metadata Terjemahan +### Meta Data Terjemahan -Fail terjemahan termasuk pengepala metadata: +Fail diterjemah termasuk pengepala meta data: ```markdown -**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. +**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 maklum bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya hendaklah 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/tl/.co-op-translator.json b/translations/tl/.co-op-translator.json index 3930d8486..8f0361efb 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": "bec5e35642176d9e483552bfc82996d8", - "translation_date": "2026-03-06T13:04:22+00:00", + "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d", + "translation_date": "2026-03-27T19:25:04+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-03-06T13:08:03+00:00", + "translation_date": "2026-03-27T19:28:22+00:00", "source_file": "AGENTS.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 f1dca8c6c..dee193cd0 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,102 +1,102 @@ -# Panimula sa Programming Languages at Modernong Developer Tools +# Panimula sa Mga Wika ng Programming at Mga Makabagong Tool para sa Developer + +Kumusta, hinaharap na developer! πŸ‘‹ Pwede ba kitang sabihan ng isang bagay na talagang nakakakilabot sa akin araw-araw? Malapit mo nang matuklasan na ang programming ay hindi lang tungkol sa mga computer – ito ay tungkol sa pagkakaroon ng tunay na mga superpower para buhayin ang iyong pinaka-wild na mga 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 ba yung sandaling ginagamit mo ang paborito mong app at parang perpektong tumutugma ang lahat? Kapag pinindot mo ang isang button at may nangyayaring bagay na talagang mahiwaga na magpapaisip sa'yo ng "wow, paano nila GINAWA yun?" Aba, may isang taong katulad mo lang – marahil ay nakaupo sa kanilang paboritong coffee shop ng alas-dose ng gabi na may third espresso – ang sumulat ng code na gumawa ng mahika na iyon. At ito ang magpapanga sa'yo: sa katapusan ng leksyon na ito, hindi mo lang maiintindihan kung paano nila ginawa, kundi magtataka kang subukan mo 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! +Tingnan mo, naiintindihan ko kung nakakakaba ang programming sa ngayon. Noong una kong nagsimula, inayawan ko talaga iniisip na kailangan mo maging math genius o nag-cocode ka na mula pagkabata. Pero ito ang ganap na nagbago ng pananaw ko: ang programming ay eksaktong parang pag-aaral ng bagong wika para makipag-usap. Nagsisimula ka sa "hello" at "thank you," tapos nagsasanay kang umorder ng kape, at bago mo malaman, may malalalim na usapan ka na! Maliban na lang na nakikipag-usap ka sa mga computer, at sa totoo lang? Sila ang pinaka-matiyagang kasama mo sa pag-uusap – hindi nila huhusgahan ang mga mali mo at laging masigasig na ulitin ang pagsubok! -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 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! +Ngayon, i-eexplore natin ang mga kamangha-manghang tool na nagpapagawa ng moderno at kaakit-akit na web development. Pinag-uusapan ko ang eksaktong parehong mga editor, browser, at workflows na ginagamit ng mga developer sa Netflix, Spotify, at paborito mong indie app studio araw-araw. At ito ang bahagi na magpapasayaw sa'yo ng saya: karamihan sa mga propesyonal at industry-standard na tool ay ganap na libre! ![Intro Programming](../../../../translated_images/tl/webdev101-programming.d6e3f98e61ac4bff.webp) -> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) +> Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey 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 Wika sa Programming: 4: You + Pangkalahatang Tanaw ng Mga Kagamitan: 5: You + section Suriin Mga Editor ng Code: 4: You Mga Browser at DevTools: 5: You Command Line: 3: You - section Magpraktis - Language Detective: 4: You - Pagsisiyasat ng Kasangkapan: 5: You + section Magsanay + Detective ng Wika: 4: You + Pagsasaliksik ng Kagamitan: 5: You Koneksyon sa Komunidad: 5: You ``` -## Tingnan Natin Kung Ano Na ang Alam Mo! +## Tingnan Natin Kung Ano ang Alam Mo Na! -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 ba ang alam mo tungkol sa mundo ng programming? At pakinggan mo, kung tinitingnan mo ang mga tanong na ito at iniisip na "Wala talaga akong ideya tungkol dito," ayos lang β€˜yan, perfect pa nga! Ibig sabihin nandito ka sa tamang lugar. Isipin mo ang quiz na ito parang paghahanda bago mag-ehersisyo – pinapainit lang natin ang mga muskulo ng utak! -[Take the pre-lesson quiz](https://ff-quizzes.netlify.app/web/) +[Subukan ang pre-lesson quiz](https://ff-quizzes.netlify.app/web/) ## Ang Pakikipagsapalaran na Sasamahan Natin Ngayon -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: +Okay, totoo lang sobrang saya ko sa mga pag-eexplore natin ngayon! Sana makita ko ang reaksyon mo kapag may mga konseptong biglang lumilinaw. Heto ang kamangha-manghang paglalakbay natin: -- **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! +- **Ano talaga ang programming (at bakit ito ang pinaka-cool!)** – Matutuklasan natin kung paano ang code ay literal na invisible na mahika na nagpapaandar ng lahat ng nakapaligid sa’yo, mula sa alarm na parang alam na Lunes na hanggang sa algorithm na perpektong pumipili ng mga rekomendasyon sa Netflix +- **Mga wikang programming at ang kanilang mga kamangha-manghang personalidad** – Ipagpaumanhin mo, isipin mong pumasok ka sa party kung saan ang bawat tao ay may kanya-kanyang superpower at solusyon sa problema. Ganyan ang mundo ng programming language, at mag-eenjoy kang makilala sila! +- **Mga pundamental na piraso na bumubuo ng digital na mahika** – Isipin ito bilang pinakamamahalin na LEGO set sa paglikha. Kapag naintindihan mo kung paano nag-uugnay ang mga ito, mapapagtanto mong maaari kang magtayo ng kahit ano sa imahinasyon mo +- **Mga propesyonal na tools na magpaparamdam sa’yo na may hawak kang wand ng mangkukulam** – Hindi ako nang-aapekto dito – talagang mararamdaman mong parang may superpowers ka, at ang pinakamagandang balita? Ginagamit ito ng mga propesyonal! -> πŸ’‘ **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! +> πŸ’‘ **Paalala**: Huwag mo munang piliting tandaan ang lahat ngayon! Sa ngayon, gusto ko lang maramdaman mo yung spark ng excitement tungkol sa mga posibleng gawin. Dadikit ang mga detalye habang magkakasama tayong nagpa-practice – ganyan talaga matututo nang tunay! -> 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)! +> Maaari 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 Talaga ang Programming? +## Ano nga ba talaga ang *Programming*? -Sige, sagutin natin ang mahalagang tanong: ano ba talaga ang programming? +Sige, harapin natin ang tanong na napakahalaga: ano nga ba ang programming? -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? πŸ˜… +May kwento akong babahaginan na lubos na nagbago ng pananaw ko dito. Kamakailan lang, tinatangka kong ipaliwanag sa nanay ko kung paano gamitin ang bago naming smart TV remote. Napansin ko na sinasabi ko na "Pindutin mo yung pulang button, pero hindi yung malaking pulang button, yung maliit na pulang button sa kaliwa... hindi, yung kabilang kaliwa mo... okay, hawakan mo ngayon ng dalawang segundo, hindi isa, hindi tatlo..." Parang familiar? πŸ˜… -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). +Iyon ang programming! Sining ng pagbibigay ng detalyadong, hakbang-hakbang na mga utos sa isang bagay na malakas ngunit kailangang ipaliwanag ng husto. Pero sa halip na ipaliwanag mo ito sa nanay mo (na maaaring magtanong ng "alin sa mga pulang button?!"), ipinapaliwanag mo ito sa computer (na ginagawa lang ang eksaktong sinabi mo, kahit na hindi iyon ang ibig mong sabihin). -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. +Ito ang pumukaw ng isip ko nung una kong natutunan: ang mga computer ay talagang simpleng mga makina sa pinaka-ugat. Nauunawaan nila ang dalawang bagay lang – 1 at 0, na parang "oo" at "hindi" o "bukas" at "patay." Iyon lang! Pero dito nagsisimula ang mahika – hindi natin kailangang magsalita sa 1s at 0s gaya ng nasa The Matrix tayo. Dito pumapasok ang **programming languages** para tumulong. Para silang pinakamagaling na tagasalin ng mundo na kumukuha ng normal mong mga ideya bilang tao at kino-convert ito sa wika ng computer. -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! +At ito pa ang talagang nakakakilabot sa akin tuwing umaga pag gising: literal *lahat* ng digital sa buhay mo ay nagsimula sa isang taong katulad mo, marahil nakasuot ng pajama may hawak ng tasa ng kape, nagta-type ng code sa laptop. Ang Instagram filter na nagpapaganda sa iyong itsura? May sumulat ng code niyan. Ang rekomendasyon na nagdala sa'yo sa bagong paboritong kanta? Isang developer ang bumuo ng algorithm na iyon. Ang app na tumutulong sa'yo hatiin ang bayarin sa kain ng mga kaibigan? Oo, may naisip na "nakakainis ito, sigurado akong kaya kong ayusin ito" at ginawa nga nila! -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? +Kapag natutunan mong mag-program, hindi ka lang nagkakaroon ng bagong kasanayan – nagiging bahagi ka ng kahanga-hangang komunidad ng mga tagasolver ng problema na araw-araw iniisip, "Paano kaya ako makakagawa ng bagay na makakatulong kahit kaunti sa araw ng iba?" Totoo, mayroon pa bang mas astig kaysa dyan? -βœ… **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. +βœ… **Masayang Paghahanap ng Katotohanan**: Heto ang isang napaka-astig na bagay na pwedeng mong hanapin kapag may libreng oras – sino kaya ang unang programmer ng mundo? Bibigyan kita ng clue: maaaring hindi siya yung inaasahan mo! Ang kwento ng taong ito ay talagang nakakatuwa at nagpapakita na ang programming ay laging tungkol sa malikhaing paglutas ng problema at pag-iisip sa labas ng kahon. -### 🧠 **Oras ng Check-in: Kumusta Ka Na?** +### 🧠 **Oras ng Pagsusuri: Kumusta ang Pakiramdam Mo?** -**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? +**Sandaling mag-isip:** +- Naiintindihan mo ba na ngayon ang ideya ng "pagbibigay ng mga utos sa computer"? +- Maiisip mo ba ang isang pang-araw-araw na gawain na gusto mong i-automate gamit ang programming? +- Anong mga tanong ang sumisiklab sa isip mo tungkol sa programming? -> **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! +> **Tandaan**: Normal lang na medyo malabo ang ilang konsepto ngayon. Ang pag-aaral ng programming ay parang pag-aaral ng bagong wika – kailangan ng panahon para makabuo ang utak ng mga koneksyon. Ayos ka lang at magaling ang ginagawa mo! -## Ang Programming Languages ay Parang Iba't Ibang Lasa ng Mahika +## Ang Mga Wika ng Programming ay Parang Iba't Ibang Lasa ng Mahika -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. +Okay, medyo kakaiba ang pag-iisip nito, pero samahan mo ako – ang mga wikang programming ay parang iba't ibang uri ng musika. Isipin mo: may jazz, na smooth at improvisational, rock na malakas at direkta, classical na elegant at istrukturado, at hip-hop na malikhaing nagpapa-express. Bawat istilo ay may sariling vibe, komunidad ng mga passionate na tagahanga, at perpekto para sa iba't ibang moods at okasyon. -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! πŸ˜„). +Ganoon din ang mga wikang programming! Hindi mo gagamitin ang parehong wika para gumawa ng masayang larong mobile na gagamitin para i-proseso ang malalaking data ng klima, katulad ng hindi ka magpapatugtog ng death metal sa yoga class (well, karamihan ng yoga class naman! πŸ˜„). -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! +Pero ito ang nagpapamangha sa akin sa tuwing naiisip ko: ang mga wikang ito ay parang ang pinaka-pasyenteng at talinong interpreter na katabi mo. Naipapahayag mo ang mga ideya sa paraang natural sa utak mo bilang tao, at sila ang nag-aasikaso ng sobrang komplikadong pagsasalin sa mga 1s at 0s na ginagamit ng mga computer. Parang may kaibigan kang bihasa sa parehong "malikhain bilang tao" at "lohika ng computer" – at hindi sila napapagod, hindi kailangan ng coffee breaks, at hindi hinuhusgahan kapag paulit-ulit kang nagtatanong! -### Mga Sikat na Programming Languages at Kanilang Gamit +### Mga Sikat na Programming Languages at Kanilang Mga Gamit ```mermaid mindmap root((Programming Languages)) Web Development JavaScript - Salamangka sa Frontend + Frontend Magic Interactive Websites TypeScript - JavaScript + Types - Enterprise Apps + JavaScript + Mga Uri + Mga Enterprise App Data & AI Python Agham ng Datos Machine Learning - Awtomasyon + Automation R Estadistika Pananaliksik @@ -108,46 +108,46 @@ mindmap iOS Apple Ecosystem Kotlin - Makabagong Android + Modernong Android Cross-platform Systems & Performance C++ - Laro + Mga Laro Performance Critical Rust - Kaligtasan sa Memorya + Memory Safety System Programming Go Cloud Services Scalable Backend ``` -| 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, disenyo para sa modernong computing | +| Wika | Pinakamainam Para sa | Bakit Sikat | +|----------|----------|------------------| +| **JavaScript** | Web development, user interfaces | Tumatakbo sa mga browser at nagpapaandar sa mga interactive na website | +| **Python** | Data science, automation, AI | Madaling basahin at aralin, may malakas na libraries | +| **Java** | Enterprise applications, Android apps | Hindi nakadepende sa platform, matibay para sa malalaking sistema | +| **C#** | Windows applications, paglalaro | Malakas ang suporta ng Microsoft ecosystem | +| **Go** | Cloud services, backend systems | Mabilis, simple, idinisenyo para sa modernong computing | -### High-Level vs. Low-Level Languages +### High-Level vs. Low-Level na Mga Wika -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! +Okay, ito talaga yung konseptong nasira ang utak ko nung nagsimula akong matuto, kaya babahaginan kita ng analogiyang sa wakas ay pumukaw ng pagkaunawa ko – at sana makatulong ito sa'yo rin! -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? πŸ˜…): +Isipin mo na bumisita ka sa isang bansa na hindi mo alam ang wika, at desperadong kailangan mong hanapin ang pinakamalapit na banyo (naranasan na nating lahat 'yan, di ba? πŸ˜…): -- **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. +- **Low-level programming** ay parang pag-aaral ng lokal na diyalekto nang sobrang galing para makipag-usap ka sa lola na nagtitinda sa kanto gamit ang mga cultural references, slang, at jokes na tanging mga nakatira doon lang ang nakakaintindi. Super kahanga-hanga at epektibo… kung bihasa ka! Pero napakahirap kapag naghahanap ka lang ng banyo. -- **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. +- **High-level programming** ay parang may kamangha-manghang lokal na kaibigan na nakakaintindi sa'yo. Pwede mong sabihin lang ang β€œKailangang-kailangan kong makahanap ng banyo” sa simpleng English, at siya na ang bahala sa pagsasalin at pagsasabi ng daan na maiintindihan ng utak mo na hindi taga-roon. 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! +- **Low-level languages** (tulad ng Assembly o C) pinahihintulutan kang makipag-usap nang detalyado sa hardware ng computer, pero kailangan mong mag-isip tulad ng makina, na… sabihin nating, malaking pagbabago ng mindset! +- **High-level languages** (tulad ng JavaScript, Python, o C#) pinapayagan kang mag-isip tulad ng tao habang sila ang nag-aasikaso sa lahat ng machine-speak sa likod. Bukod dito, may mga malalugod na komunidad sila, puno ng mga taong nakakaalala na sila ay baguhan din at totoong gustong tumulong! -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! +Hulaan mo kung alin ang irerekomenda kong simulan mo? πŸ˜‰ Ang mga high-level languages ay parang may gulong pang-training na ayaw mo nang tanggalin dahil ginagawa nilang mas masaya ang buong karanasan! ```mermaid flowchart TB - A["πŸ‘€ Kaisipan ng Tao:
'Gusto kong kwentahin ang mga Fibonacci number'"] --> B{Piliin ang Antas ng Wika} + A["πŸ‘€ Kaisipang Pantao:
'Gusto kong kalkulahin ang mga bilang ng Fibonacci'"] --> B{Pumili ng Antas ng Wika} B -->|Mataas na Antas| C["🌟 JavaScript/Python
Madaling basahin at isulat"] B -->|Mababang Antas| D["βš™οΈ Assembly/C
Direktang kontrol sa hardware"] @@ -155,7 +155,7 @@ flowchart TB C --> E["πŸ“ Isulat: fibonacci(10)"] D --> F["πŸ“ Isulat: mov r0,#00
sub r0,r0,#01"] - E --> G["πŸ€– Pag-unawa ng Kompyuter:
Tagasalin ang humahawak ng komplikasyon"] + E --> G["πŸ€– Pag-unawa ng Kompyuter:
Tagasalin ang humahawak sa komplikasyon"] F --> G G --> H["πŸ’» Parehong Resulta:
0, 1, 1, 2, 3, 5, 8, 13..."] @@ -164,15 +164,15 @@ flowchart TB style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### Ipapakita Ko Sa Iyo Kung Bakit Mas Friendly ang High-Level Languages +### Ipapakita Ko Sa'yo Bakit Mas Friendly ang High-Level Languages -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! +Okay, ipapakita ko sa’yo ang isang halimbawa na nagpapakita kung bakit na-in love ako sa high-level languages, pero bago iyon – pangako, ha. Kapag nakita mo ang unang code example, huwag mag-panic! Dapat lang niyang magmukhang nakakatakot. Iyan ay punto ko lang! -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!) +Titingnan natin ang parehong gawain na isinulat sa dalawang magkaibang estilo. Pareho silang gumagawa ng tinatawag na Fibonacci sequence – isang magandang matematikal na pattern kung saan ang bawat numero ay kabuuan ng dalawang nauna: 0, 1, 1, 2, 3, 5, 8, 13... (Fun fact: makikita mo ang pattern na ito sa buong kalikasan – spiral ng sunflower seeds, mga pattern ng pinecone, pati na sa pagbuo ng mga galaxies!) -Handa ka nang makita ang pagkakaiba? Tara! +Handa ka na bang makita ang pagkakaiba? Tara na! -**High-level language (JavaScript) – Madaling maintindihan:** +**High-level language (JavaScript) – Madaling maintindihan ng tao:** ```javascript // Hakbang 1: Pangunahing pagsasaayos ng Fibonacci @@ -183,32 +183,32 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**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 +**Ganito ang ginagawa ng code na ito:** +- **Declare** ng constant para tukuyin kung ilang Fibonacci numbers ang gusto nating gawin +- **Initialize** ng dalawang variable para subaybayan ang kasalukuyan at susunod na numero sa sequence +- **I-set up** ang panimulang values (0 at 1) na nagde-define ng Fibonacci pattern +- **Ipakita** ang header message para tukuyin ang output natin ```javascript -// Hakbang 2: Bumuo ng sunod-sunod gamit ang loop +// Hakbang 2: Bumuo ng pagkakasunod-sunod gamit ang isang loop for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Kalkulahin ang susunod na numero sa sunod-sunod + // Kalkulahin ang susunod na numero sa pagkakasunod-sunod const sum = current + next; current = next; next = sum; } ``` -**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 +**Hatiin natin ang nangyayari dito:** +- **Ulitin** ang bawat posisyon sa sequence gamit ang `for` loop +- **Ipakita** ang bawat numero kasabay ng posisyon gamit ang template literal formatting +- **Kalkulahin** ang susunod na Fibonacci number sa pamamagitan ng pagdagdag ng kasalukuyan at susunod na halaga +- **I-update** ang mga tracking variables para lumipat sa susunod na iteration ```javascript -// Hakbang 3: Makabagong functional na pamamaraan +// Hakbang 3: Makabagong punsiyonal na pamamaraan const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -225,12 +225,12 @@ console.log(fibSequence); ``` **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 +- **Gumawa** ng reusable function gamit ang modernong arrow function syntax +- **Bumuo** ng array upang itago ang kumpletong sequence sa halip na ipakita isa-isa +- **Gumamit** ng array indexing para kalkulahin ang bawat bagong numero base sa mga nauna +- **Ibalik** ang kumpletong sequence para magamit nang flexible sa iba pang bahagi ng programa -**Low-level language (ARM Assembly) – Para sa kompyuter:** +**Low-level language (ARM Assembly) – Madaling maintindihan ng computer:** ```assembly area ascen,code,readonly @@ -257,27 +257,27 @@ back add r0,r1 end ``` -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. +Pansinin kung paano halos parang English ang pagbasa ng JavaScript version, samantalang ang Assembly version ay gumagamit ng mga cryptic na utos na direktang nagkokontrol sa processor ng computer. Pareho silang nakakagawa ng eksaktong parehong gawain, pero mas madali para sa mga tao ang high-level language maintindihan, isulat, at pangalagaan. -**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 +**Mga pangunahing pagkakaiba na mapapansin mo:** +- **Kababasaang-madali**: Gumagamit ang JavaScript ng mga deskriptibong pangalan tulad ng `fibonacciCount` habang ang Assembly ay gumagamit ng mga cryptic na label tulad ng `r0`, `r1` +- **Mga Komento**: Hinikayat ng mga high-level na wika ang mga paliwanag na komento na nagpapadokumenta sa sarili ng code +- **Estruktura**: Ang lohikal na daloy ng JavaScript ay tumutugma sa paraan ng pag-iisip ng mga tao tungkol sa mga problema ng hakbang-hakbang +- **Pagpapanatili**: Ang pag-update ng bersyon ng JavaScript para sa iba't ibang pangangailangan ay diretso at malinaw -βœ… **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! +βœ… **Tungkol sa Fibonacci sequence**: Ang napakagandang pattern ng numero na ito (kung saan ang bawat numero ay katumbas ng suma ng dalawang nauna: 0, 1, 1, 2, 3, 5, 8...) ay literal na makikita *saanman* sa kalikasan! Makikita mo ito sa mga spiral ng sunflower, mga pattern ng pinecone, sa paikot ng mga kabibe ng nautilus, at maging sa paglaki ng mga sanga ng puno. Kamangha-mangha kung paano tinutulungan tayo ng matematika at code na maunawaan at muling likhain ang mga pattern na ginagamit ng kalikasan upang lumikha ng kagandahan! -## Ang Mga Pangunahing Bahagi na Nagbibigay ng Salamangka +## Ang Mga Pangunahing Bahagi Na Gumagawa ng Mahika -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! +Sige, ngayon na nakita mo kung paano gumagana ang mga programming na wika, hatiin natin ang mga pundamental na bahagi na bumubuo ng literal na bawat programang naisulat kailanman. Isipin mo ito bilang mga mahalagang sangkap sa iyong paboritong recipe – kapag naunawaan mo ang ginagawa ng bawat isa, magagawa mong magbasa at magsulat ng code sa halos anumang wika! -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! πŸ˜„ +Ito ay parang pag-aaral ng gramatika ng programming. Naalala mo ba noong nasa paaralan ka kapag tinuruan ka tungkol sa mga pangngalan, pandiwa, at kung paano bumuo ng mga pangungusap? May sarili ang programming na gramatika, at sa totoo lang, mas lohikal at mas mapagpatawad ito kumpara sa gramatika ng Ingles! πŸ˜„ ### Mga Pahayag: Mga Hakbang-hakbang na Tagubilin -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." +Magsimula tayo sa **mga pahayag** – para itong mga indibidwal na pangungusap sa usapan kasama ang iyong computer. Bawat pahayag ay nagsasabi sa computer na gawin ang isang partikular na bagay, parang pagbibigay 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 ang karaniwang pagiging madaling basahin nila. Tingnan mo ito: +Ang gusto ko sa mga pahayag ay kung gaano sila kadaling basahin karaniwan. Tingnan mo ito: ```javascript // Mga pangunahing pahayag na nagsasagawa ng iisang aksyon @@ -285,31 +285,31 @@ const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` - -**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 + +**Narito kung ano ang ginagawa ng code na ito:** +- **Ideklara** ang isang constant variable para itago ang pangalan ng user +- **Ipakita** ang greeting na mensahe sa console output +- **Ikwenta** at itago ang resulta ng isang matematikal na operasyon ```javascript -// Mga pahayag na nakikipag-ugnayan sa mga pahina ng web +// Mga pahayag na nakikipag-ugnayan sa mga web page document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` - -**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 +**Hakbang-hakbang, ito ang nangyayari:** +- **Baguhin** ang pamagat ng webpage na lumalabas sa tab ng browser +- **Palitan** ang kulay ng background ng buong katawan ng pahina + +### Mga Variable: Ang Memory System ng Iyong Programa -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! +Sige, ang **mga variable** ay isa talaga sa mga paborito kong konsepto na ituro dahil parang mga bagay sila na ginagamit mo araw-araw! -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. +Isipin mo ang contact list ng iyong telepono. Hindi mo ni-memorize ang numero ng telepono ng lahat – sa halip, sine-save mo ang "Nanay," "Pinakamatalik na Kaibigan," o "Pizza Place Na Nagde-deliver Hanggang 2 AM" at hayaan mong tandaan ng iyong telepono ang aktwal na mga numero. Ganon din ang mga variable! Parang mga lalagyan na may label kung saan maaaring mag-imbak ng impormasyon ang iyong programa at kunin ito mamaya gamit ang pangalan na may kabuluhan. -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! +Ang cool ay: pwedeng magbago ang mga variable habang tumatakbo ang iyong programa (kaya variable ang tawag – get it?). Parang ine-update mo ang contact ng pizza place kapag nakakita ka ng mas magaling na lugar, pwedeng baguhin ang mga variable habang natututo ang programa ng bagong impormasyon o habang nagbabago ang mga sitwasyon! -Ipakikita ko sa'yo kung gaano ito kapadaling gawin: +Ipakikita ko sa iyo kung gaano ito kapasimple: ```javascript // Hakbang 1: Gumagawa ng mga pangunahing variable @@ -318,26 +318,26 @@ let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` - -**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 + +**Pag-unawa sa mga konseptong ito:** +- **Itago** ang mga hindi nagbabagong halaga sa mga `const` na variable (tulad ng pangalan ng site) +- **Gamitin** ang `let` para sa mga halaga na maaaring magbago sa buong programa +- **Itakda** ang iba't ibang uri ng data: string (teksto), numero, at boolean (tama/mali) +- **Piliin** ang mga deskriptibong pangalan na nagpapaliwanag kung ano ang laman ng bawat variable ```javascript -// Hakbang 2: Paggawa sa mga object para pagsamahin ang magkakaugnay na datos +// Hakbang 2: Paggamit ng mga bagay para pagsamahin ang magkakaugnay na datos const weatherData = { location: "San Francisco", humidity: 65, windSpeed: 12 }; ``` - -**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 + +**Sa itaas, ginawa namin:** +- **Lumikha** ng isang object upang pagsamahin ang magkaugnay na impormasyon ng panahon +- **Inaayos** ang maraming piraso ng data sa ilalim ng isang pangalan ng variable +- **Gumamit** ng mga key-value pairs para malinaw na markahan ang bawat piraso ng impormasyon ```javascript // Hakbang 3: Paggamit at pag-update ng mga variable @@ -348,33 +348,33 @@ console.log(`Wind speed: ${weatherData.windSpeed} mph`); currentWeather = "cloudy"; temperature = 68; ``` - -**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 + +**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 upang lumikha ng makabuluhang mga mensahe ```javascript -// Hakbang 4: Modernong destructuring para sa mas malinis na kodigo +// Hakbang 4: Makabagong pagdidisimula para sa mas malinis na code 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 -### Control Flow: Pagtuturo sa Iyong Programa na Mag-isip +**Mga kailangan mong malaman:** +- **I-extract** ang mga tiyak na property mula sa mga object gamit ang destructuring assignment +- **Lumikha** ng mga bagong variable nang awtomatiko gamit ang parehong pangalan ng mga key ng object +- **Pasimplehin** ang code sa pamamagitan ng pag-iwas sa paulit-ulit na dot notation -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. +### Daloy ng Kontrol: Pagtuturo sa Iyong Programa na Mag-isip -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! +Sige, dito nakakabigla talaga ang programming! Ang **daloy ng kontrol** ay parang pagtuturo sa iyong programa kung paano gumawa ng matatalinong desisyon, katulad ng ginagawa mo araw-araw nang hindi pinag-iisipan. -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! +Isipin mo ito: ngayong umaga marahil dumaan ka sa mga ganitong bagay: "Kung umuulan, kukuha ako ng payong. Kung malamig, magsusuot ako ng jacket. Kung late ako, hahayaan kong hindi kumain ng almusal at kukuha na lang ng kape." Natural na sinusunod ng utak mo ang ganitong if-then na lohika maraming beses araw-araw! -Gusto mo bang makita kung gaano ito kaganda gumana? Ipakikita ko sa’yo: +Ito ang nagpapa-intelligent at buhay na buhay sa mga programa imbes na sumunod lang sila sa boring at predictable na script. Kaya nilang tingnan ang sitwasyon, suriin ang nangyayari, at tumugon ng tama. Parang binibigyan mo ng utak ang programa para makapag-adapt at makapili! + +Gusto mo bang makita kung gaano kaganda ito gumana? Ipakikita ko: ```javascript // Hakbang 1: Pangunahing lohika ng kundisyon @@ -387,12 +387,12 @@ if (userAge >= 18) { console.log(`You'll be able to vote in ${yearsToWait} year(s).`); } ``` - -**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 + +**Ganito ang ginagawa ng code na ito:** +- **Suriin** kung ang edad ng user ay pasok sa requirement sa pagboto +- **Patakbuhin** ang iba't ibang code block depende sa resulta ng kondisyon +- **Ikwenta** at ipakita kung gaano katagal bago maging karapat-dapat bumoto kapag wala pang 18 +- **Magbigay** ng tiyak at kapaki-pakinabang na feedback sa bawat senaryo ```javascript // Hakbang 2: Maramihang mga kondisyon gamit ang mga lohikal na operator @@ -407,26 +407,26 @@ if (userAge >= 18 && hasPermission) { console.log("Sorry, you must be at least 16 years old."); } ``` - -**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 + +**Hatiin natin ang nangyayari dito:** +- **Pagsamahin** ang maraming kundisyon gamit ang `&&` (at) operator +- **Gumawa** ng hierarchy ng kondisyon gamit ang `else if` para sa maraming senaryo +- **I-handle** ang lahat ng posibleng kaso gamit ang panghuling `else` statement +- **Magbigay** ng malinaw at naaaksyunang feedback para sa bawat iba't ibang sitwasyon ```javascript // Hakbang 3: Maikling kondisyon gamit ang ternary operator const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` - -**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 + +**Mga kailangan mong tandaan:** +- **Gamitin** ang ternary operator (`? :`) para sa simpleng dalawang pagpipilian na kondisyon +- **Isulat** muna ang kondisyon, kasunod ang `?`, ang true na resulta, `:`, pagkatapos ang false na resulta +- **Ilapat** ito kapag kailangan mong magtalaga ng mga halaga base sa mga kondisyon ```javascript -// Hakbang 4: Paghawak ng maraming partikular na kaso +// Hakbang 4: Paghawak ng maraming tiyak na kaso const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -445,55 +445,55 @@ 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 -> πŸ’‘ **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. +**Ang ginagawa ng code na ito ay:** +- **Itugma** ang halaga ng variable laban sa maraming tiyak na kaso +- **I-grupo** ang magkaparehong kaso (mga araw ng trabaho kumpara sa weekend) +- **Patakbuhin** ang tamang block ng code kapag may natagpuang tugma +- **Isama** ang `default` na kaso para hawakan ang mga hindi inaasahang mga halaga +- **Gamitin** ang `break` statements para pigilan ang pagpapatuloy ng code sa susunod na kaso + +> πŸ’‘ **Analohiya sa totoong mundo**: Isipin ang daloy ng kontrol na parang may pinaka-matiyagang GPS sa mundo na nagbibigay ng direksyon. Maaaring sabihin nito "Kung may traffic sa Main Street, dumaan ka sa highway na lang. Kung construction naman ang humaharang sa highway, subukan ang scenic route." Gumagamit ang mga programa ng ganitong uri ng conditional logic para tumugon ng matalino sa iba't ibang sitwasyon at palaging ibigay sa mga user ang pinakamahusay na karanasan. -### 🎯 **Pagsusulit sa Konsepto: Pagsasanay ng Mga Pangunahing Bahagi** +### 🎯 **Concept Check: Mastery ng Mga Pangunahing Bahagi** -**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? +**Tingnan natin kung paano ka mag-perform sa mga batayan:** +- Kaya mo bang ipaliwanag ang pagkakaiba sa pagitan ng variable at pahayag sa sarili mong mga salita? +- Isipin ang isang totoong senaryo kung saan gagamit ka ng if-then na desisyon (tulad ng halimbawa ng pagboto) +- Ano ang isang bagay tungkol sa lohika ng programming na naka-surprise sa iyo? -**Mabilis na pampalakas ng loob:** +**Mabilis na pampalakas ng loob:** ```mermaid flowchart LR - A["πŸ“ Mga Pahayag
(Mga Panuto)"] --> B["πŸ“¦ Mga Baryabol
(Imbakan)"] --> C["πŸ”€ Daloy ng Kontrol
(Mga Desisyon)"] --> D["πŸŽ‰ Gumaganang Programa!"] + A["πŸ“ Mga Pahayag
(Mga Tagubilin)"] --> 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! +``` +βœ… **Susunod na darating**: Magsasaya tayo ng todo sa pagtuklas nang mas malalim sa mga konseptong ito habang ipinagpapatuloy natin ang kahanga-hangang paglalakbay na ito! Sa ngayon, magpokus lang sa pagdamdam ng excitement tungkol sa lahat ng kamangha-manghang mga posibilidad sa harap mo. Dumaragdag ang mga espesipikong kasanayan at teknik habang nagsasanay tayo ng magkasama – pangako, magiging mas masaya ito kaysa sa inaasahan mo! ## Mga Kagamitan 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 talaga tine-thrill na hindi ko mapigilan ang sarili! πŸš€ Pag-uusapan natin ang mga kamangha-manghang kasangkapan na magpaparamdam sa iyo na parang hawak mo na ang mga susi sa isang digital na 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 ba ang isang chef ay may mga perpektong balanseng kutsilyo na para bang mga extension ng kanilang mga kamay? O ang isang musikero ay may gitara na parang umaawit sa sandaling hawakan nila? Well, ang mga developer ay may sarili nating bersyon ng mga mahiwagang kagamitan na ito, at ito ang magpapamangha talaga 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 hindi ako makahinga sa saya na ibahagi ito sa iyo dahil lubos nitong binago kung paano tayo gumagawa ng software. Pinag-uusapan natin ang mga AI-powered coding assistant na makakatulong sumulat ng iyong code (hindi ako nangbibiro!), mga cloud environment kung saan pwede kang bumuo ng buong aplikasyon sa literal na kahit saan basta may Wi-Fi, at mga debugging tool na sobrang sopistikado na parang may X-ray vision ka para sa iyong mga programa. -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! +At ito ang bahagi na nagpapakiliti pa rin sa akin: hindi ito mga "beginner tools" na lalampasan mo lang. Ito ang parehong professional-grade tools na ginagamit ng mga developer sa Google, Netflix, at ng paborito mong indie app studio ngayong sandali. Magiging pro ka talaga sa paggamit nito! ```mermaid graph TD 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)"] + D --> E["πŸ“š Dokumentasyon
(Pag-aaral at Sanggunian)"] E --> F["πŸš€ Kamangha-manghang Web App!"] B -.-> G["πŸ€– AI Assistant
(GitHub Copilot)"] - C -.-> H["πŸ“± Pagsusuri ng Device
(Responsive Design)"] + C -.-> H["πŸ“± Pagsusuri sa Device
(Resposibong Disenyo)"] D -.-> I["πŸ“¦ Package Managers
(npm, yarn)"] E -.-> J["πŸ‘₯ Komunidad
(Stack Overflow)"] @@ -503,120 +503,120 @@ 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 +``` +### Code Editors at IDEs: Ang Iyong Mga 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 – sila talaga ang magiging paborito mong lugar na tambayan! Isipin mo silang personal mong sanctuary ng coding kung saan marami kang oras na gugugulin sa paggawa at pagpapaganda 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! +Ngunit ito ang napakahalagang magic sa mga modernong editor: hindi lang sila basta mga kumpol ng text editor. Para silang pinaka-matalinong coding mentor na palaging nasa tabi mo 24/7. Nahuhuli nila ang mga typo mo bago mo pa man mapansin, nagmumungkahi ng mga improvements na ginagawa kang kamangha-mangha, tinutulungan kang maintindihan kung ano ang ginagawa ng bawat piraso ng code, at ang ilan sa kanila ay parang may kakayahang mahulaan ang susunod mong itatype at ialok 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 unang matuklasan ko ang auto-completion – para akong nasa future na. Magsisimula kang mag-type, tapos sasabihin ng editor mo, "Hoy, baka ito ang function na kailangan mo?" Parang may kasama kang mind reader na coding buddy! -**Ano ang gumagawa sa mga editor na ito na kamangha-mangha?** +**Ano ang nagpapahanga sa mga editor na ito?** -Nag-aalok ang mga modernong code editor ng kahanga-hangang mga katangian na idinisenyo para mapabilis ang iyong produktibidad: +Nag-aalok ang mga modernong code editor ng kahanga-hangang array ng mga tampok na dinisenyo upang pataasin 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 Tumatabang | +|---------|----------------------|---------------------| +| **Syntax Highlighting** | Kulayan ang iba't ibang bahagi ng iyong code | Pinapadali ang pagbabasa ng code at paghahanap ng errors | +| **Auto-completion** | Nagsusuggest ng code habang nagta-type ka | Pinapabilis ang pag-code at binabawasan ang typo | +| **Debugging Tools** | Tinutulungan kang hanapin at ayusin ang mga error | Nakakatipid ng oras sa pag-troubleshoot | +| **Extensions** | Nagdadagdag ng specialized na mga feature | Inaangkop ang editor mo sa anumang teknolohiya | +| **AI Assistants** | Nagsusuggest ng code at 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 tools na ito habang ginagamit? Pasulyapan mo ang [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) para sa komprehensibong overview. -#### Mga Inirekomendang Editor para sa Web Development +#### Inirerekomendang Editors 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 ecosystem ng mga extension +- May built-in na terminal at Git integration +- **Mga kinakailangang extension**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI na nagsusuggest ng code + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Real-time na kolaborasyon + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Awtomatikong pag-format ng code + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Nahuhuli ang mga typo sa 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/)** (Bayad, libre para sa mga estudyante) +- Advanced debugging at testing tools +- Matalinong code completion +- Built-in na 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 +**Mga Cloud-Based IDE** (Iba-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 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 – libre ito, malawakang ginagamit sa industriya, at may malaking komunidad na gumagawa ng kapakipakinabang na tutorials 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! +Sige, maghanda kang mamangha ng todo! Alam mo naman kung paano ginagamit mo ang browsers para mag-scroll sa social media at manood ng video? Aba, heto ang sikreto, tinatago nila ang napakagandang lihim ng mga developer tools na matagal nang hinihintay mong madiskubre! -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! +Bawat ulit na nag-right click ka sa isang webpage at pinili ang "Inspect Element," binubuksan mo ang isang nakatagong mundo ng mga developer tools na, sa totoo lang, ay mas makapangyarihan pa kaysa sa ibang mamahaling software na binayaran ko noon nang daang-daang dolyar. Parang nadiskubre mo na ang ordinaryong kusina mo ay may tinatagong propesyonal na laboratoryo ng chef sa likod ng isang sikreto na panel! +Nang unang ipinakita sa akin ang browser DevTools, gumugol ako ng halos tatlong oras na nagki-click lamang at sinasabi, "HINTAY, KAYA PALA NITO YAN?!" Literal mong ma-eedit ang anumang website nang real-time, makita kung gaano kabilis mag-load ang lahat, subukan kung paano itsura ng iyong site sa iba't ibang device, at kahit i-debug ang JavaScript na parang isang total na propesyonal. 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 gumawa ka ng website o web application, kailangan mong makita kung paano ito itsura at kumilos sa totoong mundo. Hindi lamang ipinapakita ng mga browser ang iyong gawa kundi nagbibigay din ng detalyadong feedback tungkol sa performance, accessibility, at mga posibleng isyu. #### Browser Developer Tools (DevTools) -Kasama sa mga modernong browser ang kumpletong development suites: +Kasama sa mga modernong browser ang komprehensibong development suites: | 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 | +|---------------|-----------------------|----------------------| +| **Element Inspector** | Tingnan at i-edit ang HTML/CSS nang real-time | Ayusin ang estilo upang makita ang agarang epekto | +| **Console** | Tingnan ang mga error messages at subukan ang JavaScript | I-debug ang mga problema at mag-eksperimento sa 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 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 | +| **Accessibility Checker** | Subukan ang inclusive design | Siguraduhing gumagana ang iyong site para sa lahat ng user | +| **Device Simulator** | Preview sa iba't ibang laki ng screen | Subukan ang responsive design nang hindi kailangan ng maraming device | -#### Mga Inirerekomendang Browser para sa Development +#### Inirerekomendang Browser para sa Development - **[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 +- **[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)** - Naka-base sa Chromium na may resources mula sa Microsoft para sa mga developer -> ⚠️ **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. +> ⚠️ **Mahalagang Tip sa Testing**: 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. Tinitiyak ng mga propesyonal na developer ang consistent na karanasan ng user sa lahat ng malaking browser. -### Mga Command Line Tools: Ang Iyong Gate papuntang Developer Superpowers +### Command Line Tools: Ang Iyong Pinto sa mga Superpowers ng Developer -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!" πŸ˜… +Sige, maging tapat tayo tungkol sa command line, dahil gusto kong marinig mo ito mula sa isang taong tunay na nakakaintindi. Nang una ko itong makita – yung nakakatakot na itim na screen na kumikindat ang mga teksto – literal kong naisip, "Hindi, hindi talaga! Parang galing ito sa pelikula ng hacker noong 1980s, at hindi ako sapat ang talino para dito!" πŸ˜… -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." +Pero ito ang wish ko na may nagsabi sa akin noon, at ito ang sinasabi ko sa iyo ngayon: hindi nakakatakot ang command line – parang direktang pag-uusap ito ng iyong computer. Isipin mo ito parang pagkakaiba sa pagitan ng pag-order ng pagkain sa isang pormal na app na may mga larawan at menu (na maganda at madali) kumpara sa pagpasok sa iyong paboritong lokal na restoran kung saan alam ng chef kung ano ang gusto mo at kaya niyang gumawa ng perfect na putahe sa pamamagitan lang ng pagsabi mo ng "surprise me with something amazing." -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! +Dito sa command line nararamdaman ng mga developer na parang mga wizard sila. Magta-type ka ng ilang tila mahiwagang salita (ok lang, mga command lang ito pero parang magic!), pindutin ang enter, at BOOM – nakagawa ka ng buong istruktura ng proyekto, nakapag-install ng makapangyarihang mga tool mula sa buong mundo, o naipadala ang iyong app sa internet para makita ng milyun-milyong tao. Kapag natikman mo na ang kapangyarihang iyon, madalas itong nakakaadik! **Bakit magiging paborito mong tool ang command line:** -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. +Habang mahusay ang mga graphical interface sa maraming gawain, nangingibabaw ang command line sa automation, presisyon, at bilis. Maraming development tool ang pangunahing ginagamit sa command line interfaces, at ang pag-aaral kung paano epektibong gamitin ito ay makakapagpabuti nang malaki sa iyong produktibidad. ```bash -# Hakbang 1: Gumawa at mag-navigate sa direktoryo ng proyekto +# Hakbang 1: Lumikha 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 direktoryo na tinatawag na "my-awesome-website" para sa iyong proyekto -- **Pumaroon** sa bagong likhang direktoryo para simulan ang trabaho +**Ganito ang ginagawa ng code na ito:** +- **Gumawa** ng bagong directory na tinatawag na "my-awesome-website" para sa iyong proyekto +- **Pumasok** sa bagong likhang directory upang magsimulang magtrabaho ```bash # Hakbang 2: I-initialize ang proyekto gamit ang package.json npm init -y -# Mag-install ng mga modernong kasangkapan sa pag-develop +# Mag-install ng mga makabagong kasangkapan sa pag-develop npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**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 -- **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 +**Hakbang-hakbang, ito ang nangyayari:** +- **Mag-initialize** ng bagong Node.js project gamit ang default na mga setting gamit ang `npm init -y` +- **Mag-install** ng Vite bilang modernong build tool para sa mabilis na development at production builds +- **Magdagdag** ng Prettier para sa awtomatikong pag-format ng code at ESLint para sa pagsusuri ng kalidad ng code +- **Gamitin** ang `--save-dev` flag upang markahan ang mga ito bilang mga dependency lamang sa development ```bash # Hakbang 3: Gumawa ng istruktura ng proyekto at mga file @@ -627,31 +627,31 @@ echo 'My Site

Hello Wo npx vite ``` -**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 +**Sa itaas, ginawa namin:** +- **Naayos** ang proyekto sa pamamagitan ng paggawa ng hiwalay na mga folder para sa source code at assets +- **Nagawa** ang isang 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 +#### Mahalagang 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, 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 | +| Tool | Layunin | Bakit Kailangan Ito | +|------|---------|--------------------| +| **[Git](https://git-scm.com/)** | Version control | Subaybayan ang mga pagbabago, makipagtulungan sa iba, mag-backup ng 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 JavaScript mo | +| **[Prettier](https://prettier.io/)** | Code formatting | Panatilihing consistent at madaling basahin ang format ng iyong code | -#### Mga Platform-Specific na Opsyon +#### Mga Opsyon Para sa Iba't Ibang Platform **Windows:** -- **[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 +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Moderno at maraming tampok na terminal +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** πŸ’» - Makapangyarihang scripting environment +- **[Command Prompt](https://learn.microsoft.com/windows-server/administration/windows-commands/windows-commands)** πŸ’» - Tradisyunal na Windows command line **macOS:** - **[Terminal](https://support.apple.com/guide/terminal/)** πŸ’» - Built-in na terminal application -- **[iTerm2](https://iterm2.com/)** - Pinalawak na terminal na may advanced features +- **[iTerm2](https://iterm2.com/)** - Pinalakas na terminal na may advanced na mga tampok **Linux:** - **[Bash](https://www.gnu.org/software/bash/)** πŸ’» - Standard na Linux shell @@ -659,123 +659,123 @@ npx vite > πŸ’» = Pre-installed sa operating system -> 🎯 **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. +> 🎯 **Learning Path**: Simulan sa mga basic na command tulad ng `cd` (palitan ang directory), `ls` o `dir` (ilista ang mga file), at `mkdir` (gumawa ng folder). Magpraktis sa mga modern workflow command tulad ng `npm install`, `git status`, at `code .` (binubuksan ang kasalukuyang directory sa VS Code). Habang nasasanay ka, natural mong matututunan ang mas advanced na mga command at automation techniques. -### Dokumentasyon: Ang Iyong Laging Nariyan na Learning Mentor +### Dokumentasyon: Ang Iyong Laging Nariyan na Mentor sa Pag-aaral -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! +Sige, ibabahagi ko ang isang maliit na sikreto na magpapagaan ng loob mo bilang isang baguhan: kahit na ang pinakamaraming karanasang developer ay gumugugol ng malaking bahagi ng kanilang oras sa pagbabasa ng dokumentasyon. At hindi ito dahil hindi nila alam ang ginagawa nila – tanda ito ng karunungan! -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! +Isipin ang dokumentasyon bilang pagkakaroon ng access sa pinakapasyensyang, pinakaalam na mga guro sa buong mundo na palaging available 24/7. Nahihirapan ka sa 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 tungkol sa bagong cool na feature na pinag-uusapan ng lahat? Suportado ka ng dokumentasyon sa pamamagitan ng step-by-step na mga halimbawa. Sinusubukan mong intindihin kung bakit gumagana ang isang bagay nang ganoon? Tama, nandiyan ang dokumentasyon upang ipaliwanag ito nang malinaw at mabilis mong maintindihan! -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 ang isang bagay na lubos na nagbago ng pananaw ko: ang mundo ng web development ay sobrang bilis ang paggalaw, at wala talagang, pero wala talaga kahit sino, ang nakaka-memorize ng lahat. Nakita ko ang mga senior developer na may 15+ taon ng karanasan na tumitingin pa rin sa basic syntax, at alam mo ba? Hindi ito nakakahiya – talino lang yan! Hindi ito tungkol sa perfect memory; ito ay tungkol sa pagiging marunong hanapin ang maaasahang sagot nang mabilis at maintindihan kung paano ito gamitin. **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 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. +Gumugugol ang mga propesyonal na developer ng malaking bahagi ng kanilang oras sa pagbabasa ng dokumentasyon – hindi dahil hindi nila alam ang ginagawa nila, kundi dahil ang landscape ng web development ay mabilis na nagbabago kaya kailangan ng tuloy-tuloy na pag-aaral. Ang mahusay na dokumentasyon ay tumutulong sa iyo na maintindihan hindi lang *paano* gamitin ang isang bagay, kundi *bakit* at *kailan* ito gagamitin. -#### Mahahalagang Documentation Resources +#### Mahalagang Dokumentasyon na Mapagkukunan **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Ang gold standard para sa web technology documentation -- Komprehensibong gabay para sa HTML, CSS, at JavaScript -- Kasama ang impormasyon tungkol sa compatibility ng browser -- May praktikal na mga halimbawa at interactive demos +- Ang gold standard para sa dokumentasyon ng web technology +- Kumpletong mga gabay para sa HTML, CSS, at JavaScript +- Kasama ang impormasyon tungkol sa browser compatibility +- May mga praktikal na halimbawa at interactive demos **[Web.dev](https://web.dev)** (mula sa Google) -- Mga best practice para sa modernong web development +- Mga modernong best practices sa web development - Mga gabay sa pag-optimize ng performance -- Mga prinsipyo ng accessibility at inclusive design +- Accessibility at mga prinsipyo ng inclusive design - Mga case study mula sa totoong proyekto **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Mga resources para sa pag-develop ng Edge browser -- Mga gabay para sa Progressive Web Apps -- Insights sa cross-platform development +- Mga resource para sa Edge browser development +- Mga gabay sa Progressive Web Apps +- Pananaw sa cross-platform development **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Structured na mga kurikulum sa pag-aaral -- Mga video courses mula sa eksperto sa industriya -- Mga hands-on coding exercises +- Mga structured learning curriculum +- Mga video course mula sa mga eksperto sa industriya +- Hands-on coding exercises -> πŸ“š **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. +> πŸ“š **Study Strategy**: Huwag pilitin na i-memorize ang dokumentasyon – sa halip, matutunan kung paano ito i-navigate nang epektibo. I-bookmark ang mga madalas gamiting reference at magpraktis ng paggamit ng search functions para mabilis makahanap ng tiyak na impormasyon. -### πŸ”§ **Tool Mastery Check: Ano ang Pinakanakakaresonate sa Iyo?** +### πŸ”§ **Tool Mastery Check: Ano ang Pinaka-naaantig sa Iyo?** -**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? +**Maglaan ng sandali para pag-isipan:** +- Anong tool ang pinaka-excited kang subukan muna? (Walang maling sagot!) +- Nakakatakot pa ba ang command line, o curious ka na dito? +- Maiisip mo bang gamitin ang browser DevTools para silipin ang likod ng pinto ng iyong paboritong mga website? ```mermaid -pie title "Oras na Ginugol ng Developer sa mga Kagamitan" - "Editor ng Kodigo" : 40 +pie title "Oras ng Developer na Ginugol sa Mga Kasangkapan" + "Tagapag-edit ng Kodigo" : 40 "Pagsubok sa Browser" : 25 - "Linyang Pangkomando" : 15 - "Pagbabasa ng Dokumento" : 15 - "Pag-aayos ng Mali" : 5 + "Linya ng Utos" : 15 + "Pagbasa ng Dokumento" : 15 + "Pag-debug" : 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! +> **Masayang insight**: Karamihan ng mga developer ay gumugugol ng 40% ng kanilang oras sa kanilang code editor, pero pansinin kung gaano karami ang nakalaan sa testing, pag-aaral, at paglutas ng problema. Ang programming ay hindi lang tungkol sa pagsusulat ng code – ito ay tungkol sa paglikha ng mga karanasan! -βœ… **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. +βœ… **Pagka-isip na pagkain**: Narito ang isang interesting na tanong – paano kaya magkaiba ang mga tools para sa pagbuo ng websites (development) mula sa mga tools para sa pagdisenyo ng kanilang hitsura (design)? Parang pagkakaiba ito ng isang arkitekto na gumuhit ng magandang bahay at contractor na siyang aktwal na nagtatayo nito. Pareho silang mahalaga ngunit kailangan ng magkaibang toolbox! Makakatulong talaga ang ganitong pag-iisip para makita mo ang mas malaking larawan kung paano nabubuhay ang mga website. ## GitHub Copilot Agent Challenge πŸš€ -Gamitin ang Agent mode para tapusin ang sumusunod na hamon: +Gamitin ang Agent mode upang kumpletuhin ang sumusunod na hamon: -**Deskripsyon:** Tuklasin ang mga tampok ng isang modernong code editor o IDE at ipakita kung paano nito mapapabuti ang iyong workflow bilang web developer. +**Paglalarawan:** Tuklasin ang mga tampok ng isang modernong code editor o IDE at ipakita kung paano nito mapapabuti ang iyong workflow bilang isang web developer. -**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. +**Prompt:** Pumili ng isang code editor o IDE (katulad ng Visual Studio Code, WebStorm, o isang cloud-based na IDE). Ilahad ang tatlong tampok 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. --- ## πŸš€ Hamon -**Sige, detective, handa ka na ba sa iyong unang kaso?** +**Sige, detektib, handa ka na ba sa iyong unang 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! +Ngayong nakuha mo na ang kahanga-hangang pundasyong ito, mayroon akong isang adventure na tutulong sa iyo upang makita kung gaano talaga kahalaga at kapana-panabik ang mundo ng programming. At pakinggan mo – 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 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! +1. **Maging isang language explorer**: Pumili ng tatlong programming languages mula sa magkakaibang mundo – siguro isa na gumagawa ng mga website, isa na gumagawa ng mobile apps, at isa na nag-a-analyze ng data para sa mga siyentipiko. Hanapin ang halimbawa ng parehong simpleng gawain na naisulat sa bawat wika. Seryoso, mabibighani ka kung paano iba-iba ang anyo habang pareho ang ginagawa! -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! +2. **Alamin ang kanilang pinagmulan**: Ano ang gumagawa sa bawat wika na espesyal? Narito ang isang cool na katotohanan – bawat programming language ay nilikha dahil may isang tao na naisip, "Alam mo, kailangang may mas maganda at mas epektibong paraan upang lutasin ang spesipikong problemang ito." Kaya kaya mo bang alamin kung ano ang mga problemang iyon? Ang ilan sa mga kwentong ito ay talaga namang nakakatuwa! -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! +3. **Kilalanin ang mga komunidad**: Tingnan kung gaano kagiliw at passionate ang bawat wika na komunidad. May ilan na milyon-milyong developers ang nagbabahagi ng kaalaman at nagtutulungan, mayroon din na mas maliit pero sobrang tight at supportive. Magugustuhan mo ang iba't ibang personalidad ng mga komunidad na ito! -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. +4. **Sundin ang iyong kutob**: Alin sa mga wika ang pinaka-accessible para sa iyo ngayon? Huwag mag-alala tungkol sa paggawa ng "perfect" na pagpili – makinig ka lang sa iyong pakiramdam! Walang maling sagot dito, at palagi kang pwedeng mag-explore pa ng iba sa hinaharap. -**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! +**Bonus detective task**: Tingnan kung matutuklasan mo kung anong mga malalaking website o app ang ginawa gamit ang bawat wika. Sigurado akong magugulat ka kapag nalaman mo kung ano ang nagpapatakbo ng Instagram, Netflix, o yung mobile game na hindi mo mapigilang laruin! -> πŸ’‘ **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! +> πŸ’‘ **Tandaan**: Hindi mo kailangang maging eksperto sa alinmang wikang ito ngayon. Nakikilala mo lang muna ang lugar bago magdesisyon kung saan mo gustong mag-focus. Mag-take it slow, mag-enjoy, at hayaan ang iyong curiosity ang maging guide mo! -## Ipagdiwang natin ang Iyong Natuklasan! +## Ipagdiwang Natin ang Iyong mga Natuklasan! -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! +Grabe, sobrang dami mong natutunan ngayong araw! Excited talaga akong makita kung gaano karami sa kahanga-hangang paglalakbay na ito ang tumatak sa iyo. At tandaan – hindi ito isang pagsusulit kung saan kailangan mong makuha lahat nang tama. Parang isang selebrasyon ito ng lahat ng cool na bagay na natutunan mo tungkol sa kahanga-hangang mundong ito na malapit mo nang simulan! -[Take the post-lesson quiz](https://ff-quizzes.netlify.app/web/) +[Kunwari quiz pagkatapos ng aralin](https://ff-quizzes.netlify.app/web/) -## Review & Self Study +## Review at Self Study -**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! +**Maglaan ng oras para mag-explore at mag-enjoy!** +Napakarami mo nang naabot ngayon, at ito ay isang bagay na dapat ipagmalaki! Ngayon, narito na ang masayang bahagi – ang pagsiyasat sa mga paksang nagpasigla ng iyong kuryusidad. Tandaan, hindi ito takdang-aralin – ito ay isang pakikipagsapalaran! -**Sumisid nang mas malalim sa mga bagay na nagpapasaya sa iyo:** +**Lalimang tuklasin ang mga bagay na nagpapasaya sa iyo:** -**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. +**Makipagpraktis sa mga programming language:** +- Bisitahin ang mga opisyal na website ng 2-3 wika na umakit sa iyong pansin. Bawat isa ay may kanya-kanyang personalidad at kwento! +- Subukan ang ilang online coding playgrounds gaya ng [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), o [Replit](https://replit.com/). Huwag matakot mag-eksperimento – hindi ka makakagawa ng mali! +- Basahin kung paano nagsimula ang paborito mong wika. Seryoso, ilan sa mga kwento ng pinagmulan nila ay kamangha-mangha at makakatulong sa iyo na maintindihan kung bakit sila gumagana sa ganitong paraan. -**Magsanay gamit ang mga bagong kagamitan:** +**Magpakasaya sa bagong mga gamit mo:** - 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. +- Maglaan ng ilang minuto para mag-browse sa Extensions marketplace. Ito'y parang app store para sa iyong code editor! +- Buksan ang Developer Tools ng iyong browser at mag-click lang sa paligid. Huwag mag-alala kung hindi mo agad maiintindihan lahat – makilala mo lang muna kung ano ang nariyan. **Sumali sa komunidad:** -- 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! +- Sundan ang ilang mga developer community sa [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), o [GitHub](https://github.com/). Ang komunidad ng mga programmer ay sobrang bukas-palad sa mga baguhan! +- Manood ng beginner-friendly na mga coding video sa YouTube. Napakaraming magagaling na mga creator na nakakaalala kung paano magsimula noon. +- Isaalang-alang ang pagsali sa mga lokal na meetup o online na komunidad. Maniwala ka, gustong-gusto ng mga developer na tumulong sa mga baguhan! -> 🎯 **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! +> 🎯 **Pakinggan mo, ito ang gusto kong tandaan mo**: Hindi inaasahan na magiging coding wizard ka agad-agad! Sa ngayon, nakakakilala ka lang ng kahanga-hangang bagong mundo na sasamahan mo. Maglaan ng oras, mag-enjoy sa paglalakbay, at tandaan – bawat developer na hinahangaan mo ay dating nasa katulad mong sitwasyon, sabik at baka medyo nabibigatan din. Normal lang 'yan, at ibig sabihin ay tama ang ginagawa mo! @@ -783,70 +783,70 @@ Nasaklaw mo ang maraming bagay ngayon, at iyon ay isang bagay na dapat ipagmalak [Reading the Docs](assignment.md) -> πŸ’‘ **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). +> πŸ’‘ **Kaunting tulak para sa iyong assignment**: Gustung-gusto kong makita kang mag-eksplora ng mga tool na hindi pa natin napag-usapan! I-skip mo na ang mga editor, browser, at command line tools na napagusapan na – may isang buong kamangha-manghang uniberso ng mga development tool na naghihintay na matuklasan. Hanapin ang mga aktibong pinananatili at may masigla, matulunging mga komunidad (karaniwan silang may pinakamahusay na mga tutorial at pinakasuportang tao kapag may kelangan kang tulong). --- -## πŸš€ Ang Iyong Timeline sa Paglalakbay sa Programming +## πŸš€ Ang Iyong Programming Journey Timeline -### ⚑ **Mga Magagawa Mo sa Susunod na 5 Minuto** -- [ ] I-bookmark ang 2-3 na mga website ng programming languages na nakatawag-pansin sa iyo +### ⚑ **Ano ang Maaari Mong Gawin sa Susunod na 5 Minuto** +- [ ] I-bookmark ang 2-3 website ng programming language na umakit sa iyo - [ ] I-download ang Visual Studio Code kung hindi mo pa nagagawa -- [ ] Buksan ang DevTools ng iyong browser (F12) at mag-click sa kahit anong website +- [ ] Buksan ang Developer Tools ng iyong browser (F12) at mag-click sa kahit anong website - [ ] Sumali sa isang programming community (Dev.to, Reddit r/webdev, o Stack Overflow) -### ⏰ **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 +### ⏰ **Ano ang Maaari Mong Makamit Ngayong Oras** +- [ ] Kumpletuhin ang post-lesson quiz at pag-isipan ang iyong mga sagot +- [ ] Isaayos ang VS Code gamit ang GitHub Copilot extension +- [ ] Subukan ang "Hello World" na halimbawa sa 2 iba't ibang programming language online - [ ] Manood ng video na "Day in the Life of a Developer" sa YouTube -- [ ] Simulan ang iyong pagtuklas sa programming language (mula sa hamon) +- [ ] Simulan ang iyong detective work para sa programming language (mula sa hamon) -### πŸ“… **Iyong Linggong Pakikipagsapalaran** -- [ ] Tapusin ang takdang-aralin at tuklasin ang 3 bagong development tools +### πŸ“… **Ang Iyong Linggo-Linggong Pakikipagsapalaran** +- [ ] Kumpletuhin ang assignment at tuklasin ang 3 bagong development tool - [ ] 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 +- [ ] Subukan bumuo ng isang maliit na proyekto sa CodePen o Replit (kahit "Hello, [Your Name]!" lang) +- [ ] Basahin ang isang developer blog post tungkol sa coding journey ng isang tao - [ ] Sumali sa virtual meetup o manood ng programming talk -- [ ] Simulan ang pag-aaral ng napiling lengguwahe gamit ang mga online tutorials +- [ ] Simulan ang pag-aaral ng iyong napiling wika gamit ang online tutorial -### πŸ—“οΈ **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 +### πŸ—“οΈ **Ang Iyong Buwanang Transformasyon** +- [ ] Bumuo ng iyong unang maliit na proyekto (kahit simpleng webpage lang!) +- [ ] Mag-ambag sa isang open-source project (simulan sa dokumentasyon) +- [ ] Maging mentor sa isang bagong programmer na nagsisimula pa lang +- [ ] Gumawa ng developer portfolio website mo +- [ ] Kumonekta sa lokal na mga developer community o study groups +- [ ] Simulang planuhin ang iyong susunod na learning milestone -### 🎯 **Panghuling Pagmumuni-muni** +### 🎯 **Pangwakas na Pagninilay** -**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? +**Bago ka magpatuloy, maglaan ng sandali para magdiwang:** +- Ano ang isang bagay tungkol sa programming na nagpasaya sa iyo ngayon? +- Alin sa mga tool o konsepto ang gusto mong unahin tuklasin? +- Ano ang pakiramdam mo sa pagsisimula ng programming journey na ito? +- Ano ang isang tanong na nais mong itanong sa isang developer ngayon? ```mermaid journey - title Ang Iyong Paglalakbay sa Pagpapalakas ng Kumpiyansa + title Ang Iyong Paglalakbay sa Pagbuo ng Kumpiyansa section Ngayon - Mausisa: 3: You - Nawala sa Lakas ng Damdamin: 4: You + Curious: 3: You + Overwhelmed: 4: You Excited: 5: You section Sa Linggong Ito - Nag-eeksplora: 4: You - Nag-aaral: 5: You - Nakikipag-ugnayan: 4: You + Exploring: 4: You + Learning: 5: You + Connecting: 4: You section Sa Susunod na Buwan - Nagtatayo: 5: You - Kumpiyansa: 5: You - Tumatulong sa Iba: 5: You + Building: 5: You + Confident: 5: You + Helping Others: 5: You ``` -> 🌟 **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! πŸŽ‰ +> 🌟 **Tandaan**: Bawat eksperto ay dating baguhan. Bawat senior developer ay nakaramdam ng katulad ng nararamdaman mo ngayon – sabik, baka medyo labis ang naiisip, at tiyak na mausisa tungkol sa mga posibleng mangyari. Nasa napakagandang samahan ka, at ang paglalakbay na ito ay magiging kamangha-mangha. Maligayang pagdating sa kahanga-hangang mundo ng programming! πŸŽ‰ --- -**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. +**Pahayag ng 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 kawastuhan. Ang orihinal na dokumento sa likas nitong wika ang dapat ituring na pinakapinagkukunan ng katotohanan. Para sa mahahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot para sa anumang hindi pagkakaintindihan o maling interpretasyon na nagmula sa paggamit ng pagsasaling ito. \ No newline at end of file diff --git a/translations/tl/AGENTS.md b/translations/tl/AGENTS.md index 352b50bbe..82c04386a 100644 --- a/translations/tl/AGENTS.md +++ b/translations/tl/AGENTS.md @@ -2,27 +2,27 @@ ## Project Overview -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. +Ito ay isang edukasyonal na repositoryo ng kurikulum para sa pagtuturo ng mga pundasyon ng pag-develop ng web sa mga nagsisimula. Ang kurikulum ay isang komprehensibong 12-linggong kurso na binuo ng Microsoft Cloud Advocates, na may 24 na hands-on na mga aralin na sumasaklaw sa JavaScript, CSS, at HTML. ### Key Components -- **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 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) +- **Nilalamang Edukasyonal**: 24 na istrukturadong mga aralin na inayos sa mga project-based na mga module +- **Praktikal na mga Proyekto**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, at AI Chat Assistant +- **Interaktibong mga Pagsusulit**: 48 na pagsusulit na may tig-3 tanong bawat isa (pre/post-lesson assessments) +- **Suporta sa Maramihang Wika**: Automated na mga pagsasalin para sa 50+ na mga wika sa pamamagitan ng GitHub Actions +- **Mga Teknolohiya**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (para sa mga AI na proyekto) ### Architecture -- Educational repository na may istrakturang nakabase sa aralin +- Edukasyonal na repositoryo na may lesson-based na istruktura - Bawat folder ng aralin ay naglalaman ng README, mga halimbawa ng code, at mga solusyon -- Nakahiwalay na mga proyekto sa magkakahiwalay na direktoryo (quiz-app, iba't ibang aralin na proyekto) +- Mga standalone na proyekto sa hiwalay na mga direktoryo (quiz-app, iba't ibang mga lesson na proyekto) - Sistema ng pagsasalin gamit ang GitHub Actions (co-op-translator) -- Dokumentasyon na hinahatid sa pamamagitan ng Docsify at makukuha bilang PDF +- Dokumentasyon na isinusilbi sa pamamagitan ng Docsify at available bilang PDF ## Setup Commands -Ang repositoryong ito ay pangunahing para sa pagkonsumo ng edukasyonal na nilalaman. Para sa pagtatrabaho sa mga partikular na proyekto: +Ang repositoryong ito ay pangunahing para sa pagkonsumo ng nilalamang edukasyonal. Para sa pagtatrabaho sa mga tiyak 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 # Gumawa para sa produksyon +npm run build # I-build 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 tagubilin sa pag-load ng extension na partikular sa browser +# Sundin ang mga tagubilin sa pag-load ng extension na tiyak sa browser ``` ### Space Game Projects @@ -78,31 +78,31 @@ python api.py ## Development Workflow -### Para sa mga Nagbibigay ng Nilalaman +### Para sa mga Content Contributors -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 +1. **I-fork ang repositoryo** sa iyong GitHub account +2. **I-clone ang iyong fork** nang lokal +3. **Gumawa ng bagong sangay (branch)** para sa iyong mga pagbabago 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 +5. Subukan ang anumang pagbabago sa code sa mga kaukulang direktoryo ng proyekto +6. Mag-submit ng mga pull request alinsunod sa mga patakaran sa kontribusyon ### Para sa mga Nag-aaral -1. Mag-fork o mag-clone ng repository -2. Pumunta sa mga direktoryo ng aralin nang sunud-sunod +1. I-fork o i-clone ang repositoryo +2. Mag-navigate sa mga direktoryo ng aralin nang sunud-sunod 3. Basahin ang mga README file para sa bawat aralin -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 +4. Kumpletuhin ang pre-lesson quizzes sa https://ff-quizzes.netlify.app/web/ +5. Gawin 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 +7. Kumuha ng mga post-lesson quizzes ### Live Development - **Dokumentasyon**: Patakbuhin ang `docsify serve` sa root (port 3000) -- **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 kani-kaniyang API directories +- **Quiz App**: Patakbuhin ang `npm run dev` sa quiz-app na direktoryo +- **Mga Proyekto**: Gumamit ng VS Code Live Server extension para sa mga HTML na proyekto +- **API Projects**: Patakbuhin ang `npm start` sa kaukulang mga direktoryo ng API ## Testing Instructions @@ -110,7 +110,7 @@ python api.py ```bash cd quiz-app -npm run lint # Suriin ang mga isyu sa estilo ng code +npm run lint # Suriin ang mga isyu sa istilo ng code npm run build # Tiyakin na matagumpay ang build ``` @@ -122,70 +122,70 @@ npm run lint # Suriin ang mga isyu sa estilo ng code node server.js # Tiyakin na nagsisimula ang server nang walang mga error ``` -### Pangkalahatang Paraan ng Pagsubok +### General Testing Approach -- Ito ay isang edukasyonal na repository na walang komprehensibong awtomatikong pagsusuri -- Ang manu-manong pagsusuri ay nakatuon sa: - - 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 +- Ito ay isang edukasyonal na repositoryo na walang komprehensibong automated tests +- Manual na pagsusuri ay nakatuon sa: + - Mga halimbawa ng code na tumatakbo nang walang error + - Mga link sa dokumentasyon na gumagana nang tama + - Matagumpay na pagtatapos ng mga build ng proyekto + - Ang mga halimbawa ay sumusunod sa pinakamahusay na mga kasanayan -### Mga Pagsusuri Bago Mag-submit +### Pre-submission Checks -- Patakbuhin ang `npm run lint` sa mga direktoryong may package.json -- Siguraduhin na valid ang mga markdown link +- Patakbuhin ang `npm run lint` sa mga direktoryo na may package.json +- Suriin ang mga markdown link kung wasto - Subukan ang mga halimbawa ng code sa browser o Node.js -- Suriin na nananatili ang tamang istraktura sa mga pagsasalin +- Suriin na ang mga pagsasalin ay napanatili ang tamang istruktura ## Code Style Guidelines ### JavaScript -- Gumamit ng modernong ES6+ na sintaks -- 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 paliwanag na komentaryo para sa mga nag-aaral -- I-format gamit ang Prettier kung naka-konfigure +- Gamitin ang modernong ES6+ na sintaks +- Sundan ang karaniwang konfigurasyon ng ESLint na ibinigay sa mga proyekto +- Gumamit ng makahulugang mga pangalan ng variable at function para sa kalinawan sa edukasyon +- Magdagdag ng mga komento na nagpapaliwanag ng mga konsepto para sa mga nag-aaral +- I-format gamit ang Prettier kung saan naka-configure ### HTML/CSS -- 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 +- Mga semantic na elemento ng HTML5 +- Mga prinsipyo ng responsive design +- Malinaw na mga convention sa pangalan ng klase +- Mga komento na nagpapaliwanag ng mga teknik sa CSS para sa mga nag-aaral ### Python -- Mga PEP 8 na gabay sa estilo +- Mga gabay sa estilo ng PEP 8 - Malinaw, edukasyonal na mga halimbawa ng code -- Type hints kung kinakailangan para sa pag-aaral +- Mga type hint kung makakatulong sa pagkatuto ### Markdown Documentation - 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 +- Mga blokeng code na may pagtukoy ng wika +- Mga link sa karagdagang mga mapagkukunan +- Mga screenshot at mga imahe sa mga direktoryo ng `images/` +- Alt text para sa mga larawan para sa accessibility -### Organisasyon ng File +### File Organization -- 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 +- Mga aralin na may bilang na sunud-sunod (1-getting-started-lessons, 2-js-basics, atbp.) +- Bawat proyekto ay may mga direktoryo na `solution/` at madalas ay `start/` o `your-work/` +- Mga imahe ay iniimbak sa lesson-specific na mga "images/" na folder +- Mga pagsasalin sa istruktura `translations/{language-code}/` ## Build and Deployment ### Quiz App Deployment (Azure Static Web Apps) -Ang quiz-app ay naka-konfigura para sa Azure Static Web Apps deployment: +Ang quiz-app ay naka-configure para sa Azure Static Web Apps deployment: ```bash cd quiz-app -npm run build # Lumilikha ng folder na dist/ -# Naglalaan gamit ang GitHub Actions workflow sa pag-push sa main +npm run build # Lumilikha ng dist/ folder +# Nagdedeploy gamit ang GitHub Actions workflow sa push sa main ``` Azure Static Web Apps configuration: @@ -203,21 +203,21 @@ npm run convert # Gumawa ng PDF mula sa docs ### Docsify Documentation ```bash -npm install -g docsify-cli # I-install ang Docsify sa buong sistema -docsify serve # I-serve sa localhost:3000 +npm install -g docsify-cli # I-install ang Docsify nang global +docsify serve # Ihain sa localhost:3000 ``` ### Project-specific Builds -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 +Maaaring may sariling proseso ng build bawat direktoryo ng proyekto: +- Vue projects: `npm run build` lumilikha ng mga production bundle +- Static projects: Walang build step, direkta na mag-serve ng mga file ## Pull Request Guidelines ### Title Format -Gumamit ng malinaw, nakapagsasaysay na mga pamagat na nagpapakita ng bahagi ng pagbabago: +Gumamit ng malinaw, deskriptibong mga pamagat na nagpapahiwatig 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` @@ -225,58 +225,58 @@ Gumamit ng malinaw, nakapagsasaysay na mga pamagat na nagpapakita ng bahagi ng p ### Required Checks -Bago mag-submit ng PR: +Bago magsumite ng PR: -1. **Code Quality**: - - Patakbuhin ang `npm run lint` sa mga apektadong direktoryo ng proyekto +1. **Kalidad ng Code**: + - Patakbuhin ang `npm run lint` sa mga direktoryo ng apektadong proyekto - Ayusin ang lahat ng linting errors at warnings -2. **Build Verification**: +2. **Pag-verify ng Build**: - Patakbuhin ang `npm run build` kung naaangkop - - Siguraduhing walang error sa build + - Siguraduhin na walang mga error sa build -3. **Link Validation**: - - Subukan lahat ng markdown links - - Siguraduhin gumagana ang mga image references +3. **Pag-validate ng Link**: + - Subukan lahat ng markdown link + - I-verify ang mga reference sa imahe na gumagana -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 +4. **Pagsusuri ng Nilalaman**: + - Proofread para sa spelling at grammar + - Siguraduhin na tama at edukasyonal ang mga halimbawa ng code + - I-verify na ang mga pagsasalin ay napanatili ang orihinal na kahulugan ### Contribution Requirements -- 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 +- Sumang-ayon sa Microsoft CLA (automated check 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 patakaran +- I-reference ang mga numero ng isyu sa deskripsyon ng PR kung naaangkop ### Review Process -- 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 +- Ang mga PR ay nire-review ng mga tagapangasiwa at komunidad +- Pinapahalagahan ang edukasyonal na kalinawan +- Ang mga halimbawa ng code ay dapat sumunod sa pinakabagong mga pinakamahusay na kasanayan +- Ang mga pagsasalin ay rerebyuhin para sa katumpakan at akmang kultura ## Translation System ### Automated Translation -- 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 +- Gumagamit ng GitHub Actions gamit ang co-op-translator workflow +- Nagta-translate sa 50+ na mga wika nang awtomatiko +- Mga source file sa mga pangunahing direktoryo +- Mga na-translate na file sa `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 istraktura -3. Siguraduhing gumagana pa rin ang mga halimbawa ng code -4. Subukan ang anumang lokal na nilalaman ng quiz +2. Gumawa ng mga pagpapabuti habang pinapanatili ang istruktura +3. Siguraduhin na ang mga halimbawa ng code ay nananatiling gumagana +4. Subukan ang anumang lokalized na quiz content ### Translation Metadata -Ang mga isinaling file ay may metadata header: +Ang mga na-translate na mga file ay may kasamang metadata header: ```markdown -**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. +**Disclaimer**: +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, pakatandaan na ang mga automated na pagsasalin ay maaaring may mga pagkakamali o kakulangan sa katumpakan. Ang orihinal na dokumento sa orihinal nitong wika ang dapat ituring na pangunahing sanggunian. Para sa mahahalagang impormasyon, inirerekomenda ang propesyonal na pagsasaling-tao. Hindi kami mananagot sa anumang mga maling pagkaunawa o maling interpretasyon na maaaring magmula sa paggamit ng pagsasaling ito. \ No newline at end of file