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 d8ccb51661..96240c4162 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,8 +1,8 @@ B{Choose Language Level} + + B -->|High-Level| C["🌟 JavaScript/Python
Easy to read and write"] + B -->|Low-Level| D["⚙️ Assembly/C
Direct hardware control"] + + C --> E["📝 Write: fibonacci(10)"] + D --> F["📝 Write: mov r0,#00
sub r0,r0,#01"] + + E --> G["🤖 Computer Understanding:
Translator handles complexity"] + F --> G + + G --> H["💻 Same Result:
0, 1, 1, 2, 3, 5, 8, 13..."] + + style C fill:#e1f5fe + style D fill:#fff3e0 + style H fill:#e8f5e8 +``` ### Biarkan Saya Tunjukkan Mengapa Bahasa Tingkat Tinggi Lebih Ramah -Baiklah, saya akan menunjukkan sesuatu yang dengan sempurna menunjukkan mengapa saya jatuh cinta dengan bahasa tingkat tinggi, tetapi pertama – saya perlu kamu berjanji sesuatu. Ketika kamu melihat contoh kode pertama, jangan panik! Itu memang dimaksudkan untuk terlihat menakutkan. Itulah poin yang ingin saya sampaikan! +Baiklah, saya akan menunjukkan sesuatu yang dengan sempurna menunjukkan mengapa saya jatuh cinta dengan bahasa tingkat tinggi, tetapi pertama – saya butuh kamu berjanji sesuatu. Ketika kamu melihat contoh kode pertama itu, jangan panik! Itu memang dimaksudkan untuk terlihat menakutkan. Itulah poin yang ingin saya sampaikan! Kita akan melihat tugas yang sama persis ditulis dalam dua gaya yang sangat berbeda. Keduanya menciptakan apa yang disebut deret Fibonacci – ini adalah pola matematika yang indah di mana setiap angka adalah jumlah dari dua angka sebelumnya: 0, 1, 1, 2, 3, 5, 8, 13... (Fakta menarik: kamu akan menemukan pola ini di mana-mana di alam – spiral biji bunga matahari, pola kerucut pinus, bahkan cara galaksi terbentuk!) @@ -113,7 +197,7 @@ console.log('Fibonacci sequence:'); **Inilah yang dilakukan kode ini:** - **Mendeklarasikan** konstanta untuk menentukan berapa banyak angka Fibonacci yang ingin kita hasilkan - **Menginisialisasi** dua variabel untuk melacak angka saat ini dan berikutnya dalam deret -- **Menyiapkan** nilai awal (0 dan 1) yang mendefinisikan pola Fibonacci +- **Menetapkan** nilai awal (0 dan 1) yang mendefinisikan pola Fibonacci - **Menampilkan** pesan header untuk mengidentifikasi output kita ```javascript @@ -155,7 +239,7 @@ console.log(fibSequence); - **Membuat** fungsi yang dapat digunakan kembali menggunakan sintaks fungsi 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** seluruh deret untuk penggunaan fleksibel di bagian lain program kita +- **Mengembalikan** deret lengkap untuk penggunaan fleksibel di bagian lain program kita **Bahasa tingkat rendah (ARM Assembly) – Ramah komputer:** @@ -184,25 +268,26 @@ back add r0,r1 end ``` -Perhatikan bagaimana versi JavaScript hampir seperti instruksi dalam bahasa Inggris, sementara versi Assembly menggunakan perintah yang sulit dipahami yang langsung mengontrol prosesor komputer. Keduanya menyelesaikan tugas yang sama persis, tetapi bahasa tingkat tinggi jauh lebih mudah dipahami, ditulis, dan dipelihara oleh manusia. +Perhatikan bagaimana versi JavaScript hampir seperti membaca instruksi dalam bahasa Inggris, sementara versi Assembly menggunakan perintah yang sulit dipahami yang langsung mengontrol prosesor komputer. Keduanya menyelesaikan tugas yang sama persis, tetapi bahasa tingkat tinggi jauh lebih mudah dipahami, ditulis, dan dipelihara oleh manusia. **Perbedaan utama yang akan kamu perhatikan:** - **Keterbacaan**: JavaScript menggunakan nama deskriptif seperti `fibonacciCount` sementara Assembly menggunakan label yang sulit dipahami seperti `r0`, `r1` -- **Komentar**: Bahasa tingkat tinggi mendorong komentar penjelasan yang membuat kode terdokumentasi sendiri -- **Struktur**: Alur logis JavaScript sesuai dengan cara manusia memikirkan masalah langkah demi langkah -- **Pemeliharaan**: Memperbarui versi JavaScript untuk persyaratan yang berbeda sangatlah mudah dan jelas -✅ **Tentang Deret Fibonacci**: Pola angka yang sangat indah ini (di mana setiap angka adalah jumlah dari dua angka sebelumnya: 0, 1, 1, 2, 3, 5, 8...) muncul di *mana-mana* di alam! Kamu bisa menemukannya di spiral bunga matahari, pola pada kerucut pinus, cara cangkang nautilus melengkung, bahkan dalam cara cabang pohon tumbuh. Sangat menakjubkan bagaimana matematika dan kode dapat membantu kita memahami dan menciptakan kembali pola-pola yang digunakan alam untuk menciptakan keindahan! +- **Komentar**: Bahasa tingkat tinggi mendorong penggunaan komentar penjelas yang membuat kode lebih mudah dipahami +- **Struktur**: Alur logis JavaScript sesuai dengan cara manusia berpikir tentang masalah secara langkah demi langkah +- **Pemeliharaan**: Memperbarui versi JavaScript untuk kebutuhan yang berbeda sangatlah mudah dan jelas + +✅ **Tentang deret Fibonacci**: Pola angka yang sangat indah ini (di mana setiap angka adalah jumlah dari dua angka sebelumnya: 0, 1, 1, 2, 3, 5, 8...) benar-benar muncul *di mana-mana* di alam! Kamu bisa menemukannya di spiral bunga matahari, pola pada kerucut pinus, lengkungan cangkang nautilus, bahkan pada cara cabang pohon tumbuh. Sangat menakjubkan bagaimana matematika dan kode dapat membantu kita memahami dan menciptakan kembali pola yang digunakan alam untuk menciptakan keindahan! ## Komponen Dasar yang Membuat Keajaiban Terjadi -Baiklah, sekarang setelah kamu melihat bagaimana bahasa pemrograman bekerja, mari kita bahas bagian-bagian fundamental yang membentuk setiap program yang pernah ditulis. Anggap ini seperti bahan-bahan penting dalam resep favoritmu – setelah kamu memahami fungsi masing-masing, kamu akan bisa membaca dan menulis kode dalam hampir semua bahasa! +Baiklah, sekarang setelah kamu melihat seperti apa bahasa pemrograman dalam aksi, mari kita bahas bagian-bagian fundamental yang membentuk setiap program yang pernah ditulis. Anggap ini sebagai bahan-bahan penting dalam resep favoritmu – setelah kamu memahami apa fungsi masing-masing, kamu akan bisa membaca dan menulis kode dalam hampir semua bahasa! -Ini seperti belajar tata bahasa pemrograman. Ingat saat di sekolah kamu belajar tentang kata benda, kata kerja, dan cara menyusun kalimat? Pemrograman memiliki versi tata bahasanya sendiri, dan jujur saja, ini jauh lebih logis dan mudah dipahami daripada tata bahasa Inggris! 😄 +Ini seperti belajar tata bahasa pemrograman. Ingat saat di sekolah kamu belajar tentang kata benda, kata kerja, dan cara menyusun kalimat? Pemrograman memiliki versi tata bahasanya sendiri, dan jujur saja, ini jauh lebih logis dan mudah daripada tata bahasa Inggris! 😄 -### Pernyataan: Instruksi Langkah-demi-Langkah +### Pernyataan: Instruksi Langkah Demi Langkah -Mari kita mulai dengan **pernyataan** – ini seperti kalimat individu dalam percakapan dengan komputermu. Setiap pernyataan memberi tahu komputer untuk melakukan satu hal spesifik, seperti memberikan arahan: "Belok kiri di sini," "Berhenti di lampu merah," "Parkir di tempat itu." +Mari kita mulai dengan **pernyataan** – ini seperti kalimat individu dalam percakapan dengan komputer. Setiap pernyataan memberi tahu komputer untuk melakukan satu hal spesifik, seperti memberikan arahan: "Belok kiri di sini," "Berhenti di lampu merah," "Parkir di tempat itu." Yang saya suka dari pernyataan adalah betapa mudahnya dibaca. Lihat ini: @@ -226,15 +311,15 @@ document.body.style.backgroundColor = "lightblue"; **Langkah demi langkah, inilah yang terjadi:** - **Mengubah** judul halaman web yang muncul di tab browser -- **Mengubah** warna latar belakang seluruh halaman +- **Mengganti** warna latar belakang seluruh halaman ### Variabel: Sistem Memori Programmu Oke, **variabel** adalah salah satu konsep favorit saya untuk diajarkan karena sangat mirip dengan hal-hal yang sudah kamu gunakan setiap hari! -Pikirkan daftar kontak di ponselmu sebentar. Kamu tidak menghafal nomor telepon semua orang – sebagai gantinya, kamu menyimpan "Ibu," "Sahabat," atau "Tempat Pizza yang Buka Sampai Jam 2 Pagi" dan membiarkan ponselmu mengingat nomor sebenarnya. Variabel bekerja persis seperti itu! Mereka seperti wadah berlabel di mana programmu dapat menyimpan informasi dan mengambilnya nanti menggunakan nama yang masuk akal. +Pikirkan daftar kontak di ponselmu sebentar. Kamu tidak menghafal nomor telepon semua orang – sebaliknya, kamu menyimpan "Ibu," "Sahabat," atau "Tempat Pizza yang Buka Sampai Jam 2 Pagi" dan membiarkan ponselmu mengingat nomor sebenarnya. Variabel bekerja persis seperti itu! Mereka seperti wadah berlabel di mana programmu dapat menyimpan informasi dan mengambilnya nanti menggunakan nama yang masuk akal. -Yang benar-benar keren adalah: variabel dapat berubah saat programmu berjalan (itulah asal nama "variabel" – lihat apa yang mereka lakukan di sini?). Sama seperti kamu mungkin memperbarui kontak tempat pizza itu saat menemukan tempat yang lebih baik, variabel dapat diperbarui saat programmu mempelajari informasi baru atau saat situasi berubah! +Yang keren adalah: variabel dapat berubah saat programmu berjalan (itulah sebabnya disebut "variabel" – lihat apa yang mereka lakukan di sini?). Sama seperti kamu mungkin memperbarui kontak tempat pizza itu saat menemukan tempat yang lebih baik, variabel dapat diperbarui saat programmu mempelajari informasi baru atau saat situasi berubah! Biarkan saya tunjukkan betapa sederhananya ini: @@ -261,7 +346,7 @@ const weatherData = { }; ``` -**Dalam contoh di atas, kita telah:** +**Dalam kode di atas, kita telah:** - **Membuat** objek untuk mengelompokkan informasi cuaca terkait - **Mengorganisasi** beberapa potongan data di bawah satu nama variabel - **Menggunakan** pasangan kunci-nilai untuk memberi label pada setiap potongan informasi dengan jelas @@ -297,11 +382,11 @@ console.log(`${location} humidity: ${humidity}%`); Oke, di sinilah pemrograman menjadi sangat menakjubkan! **Alur kontrol** pada dasarnya mengajari programmu bagaimana membuat keputusan cerdas, persis seperti yang kamu lakukan setiap hari tanpa memikirkannya. -Bayangkan ini: pagi ini kamu mungkin melalui sesuatu seperti "Jika hujan, saya akan membawa payung. Jika dingin, saya akan memakai jaket. Jika saya terlambat, saya akan melewatkan sarapan dan membeli kopi di jalan." Otakmu secara alami mengikuti logika jika-maka ini puluhan kali setiap hari! +Bayangkan ini: pagi ini kamu mungkin melalui sesuatu seperti "Jika hujan, saya akan membawa payung. Jika dingin, saya akan memakai jaket. Jika saya terlambat, saya akan melewatkan sarapan dan mengambil kopi di jalan." Otakmu secara alami mengikuti logika if-then ini puluhan kali setiap hari! -Inilah yang membuat program terasa cerdas dan hidup, bukan hanya mengikuti skrip yang membosankan dan dapat diprediksi. Mereka benar-benar dapat melihat situasi, mengevaluasi apa yang terjadi, dan merespons dengan tepat. Ini seperti memberi programmu otak yang dapat beradaptasi dan membuat pilihan! +Inilah yang membuat program terasa cerdas dan hidup daripada hanya mengikuti skrip yang membosankan dan dapat diprediksi. Mereka benar-benar dapat melihat situasi, mengevaluasi apa yang terjadi, dan merespons dengan tepat. Ini seperti memberi programmu otak yang dapat beradaptasi dan membuat pilihan! -Ingin melihat bagaimana ini bekerja dengan indah? Biarkan saya tunjukkan: +Ingin melihat betapa indahnya ini bekerja? Biarkan saya tunjukkan: ```javascript // Step 1: Basic conditional logic @@ -318,7 +403,7 @@ if (userAge >= 18) { **Inilah yang dilakukan kode ini:** - **Memeriksa** apakah usia pengguna memenuhi persyaratan untuk memilih - **Menjalankan** blok kode yang berbeda berdasarkan hasil kondisi -- **Menghitung** dan menampilkan berapa lama hingga kelayakan memilih jika di bawah 18 tahun +- **Menghitung** dan menampilkan berapa lama hingga memenuhi syarat memilih jika di bawah 18 tahun - **Memberikan** umpan balik spesifik dan bermanfaat untuk setiap skenario ```javascript @@ -347,7 +432,7 @@ const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**Yang perlu diingat:** +**Yang perlu kamu ingat:** - **Menggunakan** operator ternary (`? :`) untuk kondisi dua opsi sederhana - **Menulis** kondisi terlebih dahulu, diikuti oleh `?`, lalu hasil benar, lalu `:`, lalu hasil salah - **Menerapkan** pola ini saat kamu perlu menetapkan nilai berdasarkan kondisi @@ -380,25 +465,62 @@ switch (dayOfWeek) { - **Menyertakan** kasus `default` untuk menangani nilai yang tidak terduga - **Menggunakan** pernyataan `break` untuk mencegah kode melanjutkan ke kasus berikutnya -> 💡 **Analogi dunia nyata**: Pikirkan alur kontrol seperti memiliki GPS paling sabar di dunia yang memberikan arahan. Mungkin mengatakan "Jika ada kemacetan di Jalan Utama, ambil jalan tol sebagai gantinya. Jika ada konstruksi yang menghalangi jalan tol, coba rute pemandangan." Program menggunakan logika kondisional yang sama untuk merespons secara cerdas terhadap situasi yang berbeda dan selalu memberikan pengalaman terbaik kepada pengguna. +> 💡 **Analogi dunia nyata**: Pikirkan alur kontrol seperti memiliki GPS paling sabar di dunia yang memberikanmu arahan. Mungkin mengatakan "Jika ada kemacetan di Jalan Utama, ambil jalan tol. Jika ada konstruksi yang menghalangi jalan tol, coba rute pemandangan." Program menggunakan logika kondisional yang sama untuk merespons dengan cerdas terhadap situasi yang berbeda dan selalu memberikan pengalaman terbaik kepada pengguna. -✅ **Yang akan datang berikutnya**: Kita akan bersenang-senang mendalami konsep-konsep ini saat kita melanjutkan perjalanan luar biasa ini bersama! Saat ini, fokuslah pada perasaan antusias tentang semua kemungkinan luar biasa di depanmu. Keterampilan dan teknik spesifik akan melekat secara alami saat kita berlatih bersama – saya janji ini akan jauh lebih menyenangkan daripada yang kamu bayangkan! +### 🎯 **Pemeriksaan Konsep: Penguasaan Komponen Dasar** +**Mari kita lihat sejauh mana pemahamanmu tentang dasar-dasar:** +- Bisakah kamu menjelaskan perbedaan antara variabel dan pernyataan dengan kata-katamu sendiri? +- Pikirkan skenario dunia nyata di mana kamu akan menggunakan keputusan if-then (seperti contoh pemilihan kita) +- Apa satu hal tentang logika pemrograman yang mengejutkanmu? -## Alat yang Digunakan - -Baiklah, ini adalah bagian di mana saya sangat bersemangat hingga hampir tidak bisa menahan diri! 🚀 Kita akan membahas alat-alat luar biasa yang akan membuatmu merasa seperti baru saja diberikan kunci ke pesawat luar angkasa digital. - -Kamu tahu bagaimana seorang koki memiliki pisau yang seimbang sempurna yang terasa seperti perpanjangan dari tangan mereka? Atau bagaimana seorang musisi memiliki gitar yang seolah-olah bernyanyi saat mereka menyentuhnya? Nah, pengembang memiliki versi alat ajaib ini, dan inilah yang akan membuatmu terkejut – sebagian besar dari mereka benar-benar gratis! +**Peningkat kepercayaan diri cepat:** +```mermaid +flowchart LR + A["📝 Statements
(Instructions)"] --> B["📦 Variables
(Storage)"] --> C["🔀 Control Flow
(Decisions)"] --> D["🎉 Working Program!"] + + style A fill:#ffeb3b + style B fill:#4caf50 + style C fill:#2196f3 + style D fill:#ff4081 +``` -Saya hampir melompat dari kursi memikirkan untuk berbagi ini denganmu karena mereka benar-benar merevolusi cara kita membangun perangkat lunak. Kita berbicara tentang asisten pengkodean bertenaga AI yang dapat membantu menulis kode (saya tidak bercanda!), lingkungan cloud di mana kamu dapat membangun aplikasi lengkap dari mana saja dengan Wi-Fi, dan alat debugging yang sangat canggih sehingga seperti memiliki penglihatan sinar-X untuk programmu. +✅ **Yang akan datang**: Kita akan bersenang-senang mendalami konsep-konsep ini saat kita melanjutkan perjalanan luar biasa ini bersama! Saat ini, fokuslah pada perasaan antusias tentang semua kemungkinan luar biasa di depanmu. Keterampilan dan teknik spesifik akan melekat secara alami saat kita berlatih bersama – saya janji ini akan jauh lebih menyenangkan daripada yang kamu bayangkan! -Dan inilah bagian yang masih membuat saya merinding: ini bukan "alat pemula" yang akan kamu tinggalkan. Ini adalah alat profesional kelas atas yang digunakan oleh pengembang di Google, Netflix, dan studio aplikasi indie yang kamu sukai saat ini. Kamu akan merasa seperti seorang profesional saat menggunakannya! +## Alat yang Digunakan +Baiklah, ini adalah bagian di mana saya sangat bersemangat sampai hampir tidak bisa menahan diri! 🚀 Kita akan membahas alat-alat luar biasa yang akan membuatmu merasa seperti baru saja diberikan kunci ke pesawat luar angkasa digital. + +Kamu tahu bagaimana seorang koki memiliki pisau yang seimbang sempurna yang terasa seperti perpanjangan dari tangan mereka? Atau bagaimana seorang musisi memiliki gitar yang seolah-olah bernyanyi saat mereka menyentuhnya? Nah, pengembang memiliki versi alat ajaib ini, dan inilah yang akan benar-benar membuatmu takjub – sebagian besar dari mereka benar-benar gratis! + +Saya hampir melompat dari kursi saya memikirkan untuk berbagi ini denganmu karena mereka benar-benar merevolusi cara kita membangun perangkat lunak. Kita berbicara tentang asisten pengkodean bertenaga AI yang dapat membantu menulis kode (saya tidak bercanda!), lingkungan cloud di mana kamu dapat membangun aplikasi lengkap dari mana saja dengan Wi-Fi, dan alat debugging yang begitu canggih sehingga seperti memiliki penglihatan sinar-X untuk programmu. + +Dan inilah bagian yang masih membuat saya merinding: ini bukan "alat pemula" yang akan kamu tinggalkan. Ini adalah alat profesional yang sama persis yang digunakan pengembang di Google, Netflix, dan studio aplikasi indie yang kamu sukai saat ini. Kamu akan merasa seperti seorang profesional saat menggunakannya! + +```mermaid +graph TD + A["💡 Your Idea"] --> B["⌨️ Code Editor
(VS Code)"] + B --> C["🌐 Browser DevTools
(Testing & Debugging)"] + C --> D["⚡ Command Line
(Automation & Tools)"] + D --> E["📚 Documentation
(Learning & Reference)"] + E --> F["🚀 Amazing Web App!"] + + B -.-> G["🤖 AI Assistant
(GitHub Copilot)"] + C -.-> H["📱 Device Testing
(Responsive Design)"] + D -.-> I["📦 Package Managers
(npm, yarn)"] + E -.-> J["👥 Community
(Stack Overflow)"] + + style A fill:#fff59d + style F fill:#c8e6c9 + style G fill:#e1f5fe + style H fill:#f3e5f5 + style I fill:#ffccbc + style J fill:#e8eaf6 +``` ### Editor Kode dan IDE: Sahabat Digital Barumu -Mari kita bicara tentang editor kode – ini akan menjadi tempat favorit barumu untuk menghabiskan waktu! Anggap mereka sebagai tempat perlindungan pribadi untuk coding di mana kamu akan menghabiskan sebagian besar waktumu membuat dan menyempurnakan kreasi digitalmu. +Mari kita bicara tentang editor kode – ini akan menjadi tempat favoritmu untuk menghabiskan waktu! Anggap mereka sebagai tempat perlindungan pribadi untuk coding di mana kamu akan menghabiskan sebagian besar waktumu membuat dan menyempurnakan kreasi digitalmu. Tapi inilah yang benar-benar ajaib tentang editor modern: mereka bukan hanya editor teks mewah. Mereka seperti memiliki mentor coding paling brilian dan mendukung yang duduk di sebelahmu 24/7. Mereka menangkap kesalahan ketikmu sebelum kamu menyadarinya, menyarankan perbaikan yang membuatmu terlihat seperti jenius, membantu memahami apa yang dilakukan setiap bagian kode, dan beberapa dari mereka bahkan dapat memprediksi apa yang akan kamu ketik dan menawarkan untuk menyelesaikan pemikiranmu! @@ -410,7 +532,7 @@ Editor kode modern menawarkan berbagai fitur mengesankan yang dirancang untuk me | Fitur | Apa yang Dilakukan | Mengapa Membantu | |-------|--------------------|------------------| -| **Penyorotan Sintaks** | Memberi warna pada bagian-bagian kode | Membuat kode lebih mudah dibaca dan kesalahan lebih mudah ditemukan | +| **Penyorotan Sintaks** | Memberi warna pada bagian kode yang berbeda | Membuat kode lebih mudah dibaca dan menemukan kesalahan | | **Auto-completion** | Menyarankan kode saat kamu mengetik | Mempercepat pengkodean dan mengurangi kesalahan ketik | | **Alat Debugging** | Membantu menemukan dan memperbaiki kesalahan | Menghemat waktu berjam-jam untuk pemecahan masalah | | **Ekstensi** | Menambahkan fitur khusus | Menyesuaikan editor untuk teknologi apa pun | @@ -422,10 +544,10 @@ Editor kode modern menawarkan berbagai fitur mengesankan yang dirancang untuk me **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Gratis) - Paling populer di kalangan pengembang web -- Ekosistem ekstensi yang luar biasa +- Ekosistem ekstensi yang sangat baik - Terminal bawaan dan integrasi Git - **Ekstensi wajib**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Saran kode bertenaga AI + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Saran kode berbasis AI - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Kolaborasi waktu nyata - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Format kode otomatis - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Menangkap kesalahan ketik dalam kode @@ -440,32 +562,31 @@ Editor kode modern menawarkan berbagai fitur mengesankan yang dirancang untuk me - [Replit](https://replit.com/) - Bagus untuk belajar dan berbagi kode - [StackBlitz](https://stackblitz.com/) - Pengembangan web full-stack instan -> 💡 **Tips Memulai**: Mulailah dengan Visual Studio Code – gratis, banyak digunakan di industri, dan memiliki komunitas besar yang membuat tutorial dan ekstensi yang bermanfaat. +> 💡 **Tips Memulai**: Mulailah dengan Visual Studio Code – ini gratis, banyak digunakan di industri, dan memiliki komunitas besar yang membuat tutorial dan ekstensi yang bermanfaat. ### Browser Web: Laboratorium Rahasia Pengembanganmu -Oke, bersiaplah untuk benar-benar terkejut! Kamu tahu bagaimana kamu menggunakan browser untuk menggulir media sosial dan menonton video? Nah, ternyata mereka menyembunyikan laboratorium pengembang rahasia yang luar biasa selama ini, hanya menunggu untuk kamu temukan! +Oke, bersiaplah untuk benar-benar takjub! Kamu tahu bagaimana kamu menggunakan browser untuk menggulir media sosial dan menonton video? Nah, ternyata mereka menyembunyikan laboratorium pengembang yang luar biasa ini selama ini, hanya menunggu untuk kamu temukan! -Setiap kali kamu klik kanan pada halaman web dan memilih "Inspect Element," kamu membuka dunia tersembunyi alat pengembang yang sebenarnya lebih kuat daripada beberapa perangkat lunak mahal yang dulu saya bayar ratusan dolar. Rasanya seperti menemukan bahwa dapur biasa kamu menyembunyikan laboratorium koki profesional di balik panel rahasia! +Setiap kali kamu mengklik kanan pada halaman web dan memilih "Inspect Element," kamu membuka dunia tersembunyi alat pengembang yang sebenarnya lebih kuat daripada beberapa perangkat lunak mahal yang dulu saya bayar ratusan dolar. Rasanya seperti menemukan bahwa dapur biasa memiliki laboratorium koki profesional di balik panel rahasia! +Pertama kali seseorang menunjukkan saya DevTools browser, saya menghabiskan waktu sekitar tiga jam hanya dengan mengklik sana-sini sambil berkata, "TUNGGU, INI BISA LAKUKAN ITU JUGA?!" Anda benar-benar bisa mengedit situs web apa pun secara real-time, melihat seberapa cepat semuanya dimuat, menguji tampilan situs Anda di berbagai perangkat, dan bahkan debug JavaScript seperti seorang profesional. Ini benar-benar luar biasa! -Pertama kali seseorang menunjukkan DevTools browser kepada saya, saya menghabiskan waktu sekitar tiga jam hanya dengan mengklik dan berkata "TUNGGU, ITU BISA MELAKUKAN ITU JUGA?!" Kamu bisa mengedit situs web apa pun secara real-time, melihat seberapa cepat semuanya dimuat, menguji bagaimana situsmu terlihat di perangkat yang berbeda, dan bahkan debugging JavaScript seperti seorang profesional. Sangat menakjubkan! +**Inilah mengapa browser adalah senjata rahasia Anda:** -**Inilah mengapa browser adalah senjata rahasiamu:** - -Saat kamu membuat situs web atau aplikasi web, kamu perlu melihat bagaimana tampilannya dan berperilaku di dunia nyata. Browser tidak hanya menampilkan karyamu tetapi juga memberikan umpan balik terperinci tentang kinerja, aksesibilitas, dan potensi masalah. +Saat Anda membuat situs web atau aplikasi web, Anda perlu melihat bagaimana tampilannya dan cara kerjanya di dunia nyata. Browser tidak hanya menampilkan hasil kerja Anda tetapi juga memberikan umpan balik mendetail tentang kinerja, aksesibilitas, dan potensi masalah. #### Alat Pengembang Browser (DevTools) -Browser modern menyertakan suite pengembangan yang komprehensif: +Browser modern memiliki suite pengembangan yang sangat lengkap: -| Kategori Alat | Apa yang Dilakukan | Contoh Penggunaan | -|---------------|--------------------|------------------| +| Kategori Alat | Fungsinya | Contoh Penggunaan | +|---------------|-----------|-------------------| | **Element Inspector** | Melihat dan mengedit HTML/CSS secara real-time | Menyesuaikan gaya untuk melihat hasil langsung | -| **Konsol** | Lihat pesan error dan uji JavaScript | Debug masalah dan bereksperimen dengan kode | -| **Network Monitor** | Lacak bagaimana sumber daya dimuat | Optimalkan kinerja dan waktu pemuatan | -| **Accessibility Checker** | Uji desain yang inklusif | Pastikan situs Anda dapat digunakan oleh semua pengguna | -| **Device Simulator** | Pratinjau di berbagai ukuran layar | Uji desain responsif tanpa banyak perangkat | +| **Console** | Melihat pesan error dan menguji JavaScript | Debug masalah dan bereksperimen dengan kode | +| **Network Monitor** | Melacak bagaimana sumber daya dimuat | Mengoptimalkan kinerja dan waktu pemuatan | +| **Accessibility Checker** | Menguji desain inklusif | Memastikan situs Anda dapat digunakan oleh semua pengguna | +| **Device Simulator** | Pratinjau di berbagai ukuran layar | Menguji desain responsif tanpa banyak perangkat | #### Browser yang Direkomendasikan untuk Pengembangan @@ -475,18 +596,17 @@ Browser modern menyertakan suite pengembangan yang komprehensif: > ⚠️ **Tip Penting untuk Pengujian**: Selalu uji situs web Anda di beberapa browser! Apa yang bekerja sempurna di Chrome mungkin terlihat berbeda di Safari atau Firefox. Pengembang profesional menguji di semua browser utama untuk memastikan pengalaman pengguna yang konsisten. +### Alat Command Line: Gerbang Menuju Kekuatan Super Developer -### Alat Command Line: Gerbang Menuju Kekuatan Super Pengembang - -Baiklah, mari kita jujur sepenuhnya tentang command line, karena saya ingin Anda mendengar ini dari seseorang yang benar-benar mengerti. Ketika saya pertama kali melihatnya – hanya layar hitam yang menakutkan dengan teks berkedip – saya benar-benar berpikir, "Tidak, sama sekali tidak! Ini terlihat seperti sesuatu dari film hacker tahun 1980-an, dan saya jelas tidak cukup pintar untuk ini!" 😅 +Baiklah, mari kita jujur tentang command line, karena saya ingin Anda mendengar ini dari seseorang yang benar-benar mengerti. Saat pertama kali melihatnya – layar hitam yang menakutkan dengan teks berkedip – saya benar-benar berpikir, "Tidak, sama sekali tidak! Ini terlihat seperti sesuatu dari film hacker tahun 1980-an, dan saya jelas tidak cukup pintar untuk ini!" 😅 -Tapi inilah yang saya harap seseorang katakan kepada saya saat itu, dan yang saya katakan kepada Anda sekarang: command line itu tidak menakutkan – sebenarnya seperti berbicara langsung dengan komputer Anda. Anggap saja seperti perbedaan antara memesan makanan melalui aplikasi mewah dengan gambar dan menu (yang mudah dan nyaman) versus masuk ke restoran lokal favorit Anda di mana koki tahu persis apa yang Anda suka dan bisa membuat sesuatu yang sempurna hanya dengan Anda mengatakan "kejutan saya dengan sesuatu yang luar biasa." +Tapi inilah yang saya harap seseorang katakan kepada saya saat itu, dan yang saya katakan kepada Anda sekarang: command line tidak menakutkan – sebenarnya ini seperti berbicara langsung dengan komputer Anda. Anggap saja seperti perbedaan antara memesan makanan melalui aplikasi mewah dengan gambar dan menu (yang mudah dan nyaman) versus masuk ke restoran lokal favorit Anda di mana koki tahu persis apa yang Anda suka dan bisa membuat sesuatu yang sempurna hanya dengan Anda berkata "kejutan saya dengan sesuatu yang luar biasa." -Command line adalah tempat para pengembang merasa seperti penyihir sejati. Anda mengetik beberapa kata yang tampaknya ajaib (oke, itu hanya perintah, tapi rasanya ajaib!), tekan enter, dan BOOM – Anda telah membuat struktur proyek, menginstal alat-alat canggih dari seluruh dunia, atau menerapkan aplikasi Anda ke internet untuk dilihat jutaan orang. Begitu Anda merasakan kekuatan itu, itu benar-benar membuat ketagihan! +Command line adalah tempat para pengembang merasa seperti penyihir sejati. Anda mengetik beberapa kata ajaib (oke, itu hanya perintah, tapi rasanya ajaib!), tekan enter, dan BOOM – Anda telah membuat struktur proyek, menginstal alat-alat canggih dari seluruh dunia, atau menerbitkan aplikasi Anda ke internet untuk dilihat jutaan orang. Setelah Anda merasakan kekuatan itu, rasanya benar-benar adiktif! **Mengapa command line akan menjadi alat favorit Anda:** -Meskipun antarmuka grafis bagus untuk banyak tugas, command line unggul dalam hal otomatisasi, presisi, dan kecepatan. Banyak alat pengembangan bekerja terutama melalui antarmuka command line, dan belajar menggunakannya secara efisien dapat secara dramatis meningkatkan produktivitas Anda. +Meskipun antarmuka grafis bagus untuk banyak tugas, command line unggul dalam hal otomatisasi, presisi, dan kecepatan. Banyak alat pengembangan bekerja terutama melalui antarmuka command line, dan belajar menggunakannya dengan efisien dapat secara dramatis meningkatkan produktivitas Anda. ```bash # Step 1: Create and navigate to project directory @@ -508,10 +628,10 @@ npm install --save-dev @eslint/js ``` **Langkah demi langkah, inilah yang terjadi:** -- **Inisialisasi** proyek Node.js baru dengan pengaturan default menggunakan `npm init -y` -- **Instal** 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 hanya untuk pengembangan +- **Menginisialisasi** proyek Node.js baru dengan pengaturan default menggunakan `npm init -y` +- **Menginstal** Vite sebagai alat build modern untuk pengembangan cepat dan build produksi +- **Menambahkan** Prettier untuk format kode otomatis dan ESLint untuk pemeriksaan kualitas kode +- **Menggunakan** flag `--save-dev` untuk menandai ini sebagai dependensi khusus pengembangan ```bash # Step 3: Create project structure and files @@ -523,21 +643,21 @@ npx vite ``` **Dalam kode di atas, kita telah:** -- **Mengorganisasi** proyek kita dengan membuat folder terpisah untuk kode sumber dan aset -- **Membuat** file HTML dasar dengan struktur dokumen yang benar -- **Memulai** server pengembangan Vite untuk pemuatan ulang langsung dan penggantian modul secara dinamis +- **Mengorganisasi** proyek dengan membuat folder terpisah untuk kode sumber dan aset +- **Menghasilkan** file HTML dasar dengan struktur dokumen yang benar +- **Memulai** server pengembangan Vite untuk live reloading dan hot module replacement #### Alat Command Line Penting untuk Pengembangan Web | Alat | Tujuan | Mengapa Anda Membutuhkannya | -|------|---------|-----------------| -| **[Git](https://git-scm.com/)** | Kontrol versi | Lacak perubahan, berkolaborasi dengan orang lain, cadangkan pekerjaan Anda | -| **[Node.js & npm](https://nodejs.org/)** | Runtime JavaScript & manajemen paket | Jalankan JavaScript di luar browser, instal alat pengembangan modern | -| **[Vite](https://vitejs.dev/)** | Alat build & server pengembangan | Pengembangan super cepat dengan penggantian modul secara dinamis | -| **[ESLint](https://eslint.org/)** | Kualitas kode | Temukan dan perbaiki masalah dalam JavaScript Anda secara otomatis | -| **[Prettier](https://prettier.io/)** | Format kode | Jaga agar kode Anda tetap konsisten dan mudah dibaca | +|------|--------|-----------------------------| +| **[Git](https://git-scm.com/)** | Kontrol versi | Melacak perubahan, berkolaborasi dengan orang lain, mencadangkan pekerjaan Anda | +| **[Node.js & npm](https://nodejs.org/)** | Runtime JavaScript & manajemen paket | Menjalankan JavaScript di luar browser, menginstal alat pengembangan modern | +| **[Vite](https://vitejs.dev/)** | Alat build & server pengembangan | Pengembangan super cepat dengan hot module replacement | +| **[ESLint](https://eslint.org/)** | Kualitas kode | Secara otomatis menemukan dan memperbaiki masalah dalam JavaScript Anda | +| **[Prettier](https://prettier.io/)** | Format kode | Menjaga kode Anda tetap terformat dan mudah dibaca | -#### Pilihan Platform Spesifik +#### Opsi Khusus Platform **Windows:** - **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Terminal modern dengan fitur lengkap @@ -556,16 +676,17 @@ npx vite > 🎯 **Jalur Pembelajaran**: Mulailah dengan perintah dasar seperti `cd` (mengubah direktori), `ls` atau `dir` (daftar file), dan `mkdir` (membuat folder). Latih dengan perintah alur kerja modern seperti `npm install`, `git status`, dan `code .` (membuka direktori saat ini di VS Code). Seiring Anda semakin nyaman, Anda akan secara alami mempelajari perintah yang lebih canggih dan teknik otomatisasi. - ### Dokumentasi: Mentor Belajar yang Selalu Tersedia -Baiklah, saya ingin berbagi rahasia kecil yang akan membuat Anda merasa jauh lebih baik sebagai pemula: bahkan pengembang paling berpengalaman menghabiskan banyak waktu mereka membaca dokumentasi. Dan itu bukan karena mereka tidak tahu apa yang mereka lakukan – itu sebenarnya tanda kebijaksanaan! +Baiklah, saya akan berbagi rahasia kecil yang akan membuat Anda merasa jauh lebih baik sebagai pemula: bahkan pengembang paling berpengalaman menghabiskan sebagian besar waktu mereka membaca dokumentasi. Dan itu bukan karena mereka tidak tahu apa yang mereka lakukan – itu sebenarnya tanda kebijaksanaan! + +Anggap dokumentasi sebagai akses ke guru paling sabar dan berpengetahuan di dunia yang tersedia 24/7. Terjebak pada masalah jam 2 pagi? Dokumentasi ada di sana dengan pelukan virtual hangat dan jawaban yang Anda butuhkan. Ingin belajar tentang fitur baru yang keren yang sedang dibicarakan semua orang? Dokumentasi mendukung Anda dengan contoh langkah demi langkah. Mencoba memahami mengapa sesuatu bekerja seperti itu? Anda tahu – dokumentasi siap menjelaskannya dengan cara yang akhirnya membuat Anda mengerti! -Anggaplah dokumentasi sebagai akses ke guru yang paling sabar dan berpengetahuan di dunia yang tersedia 24/7. Terjebak pada masalah jam 2 pagi? Dokumentasi ada di sana dengan pelukan virtual hangat dan jawaban yang Anda butuhkan. Ingin belajar tentang fitur baru yang keren yang sedang dibicarakan semua orang? Dokumentasi mendukung Anda dengan contoh langkah demi langkah. Mencoba memahami mengapa sesuatu bekerja seperti itu? Anda tahu – dokumentasi siap menjelaskannya dengan cara yang akhirnya membuat Anda mengerti! +Inilah sesuatu yang benar-benar mengubah perspektif saya: dunia pengembangan web bergerak sangat cepat, dan tidak ada (saya maksud benar-benar tidak ada!) yang mengingat semuanya. Saya telah melihat pengembang senior dengan pengalaman lebih dari 15 tahun mencari sintaks dasar, dan Anda tahu apa? Itu bukan memalukan – itu pintar! Ini bukan tentang memiliki ingatan yang sempurna; ini tentang mengetahui di mana menemukan jawaban yang dapat diandalkan dengan cepat dan memahami cara menerapkannya. **Di sinilah keajaiban sebenarnya terjadi:** -Pengembang profesional menghabiskan sebagian besar waktu mereka membaca dokumentasi – bukan karena mereka tidak tahu apa yang mereka lakukan, tetapi karena dunia pengembangan web berkembang begitu cepat sehingga tetap terkini membutuhkan pembelajaran terus-menerus. Dokumentasi yang bagus membantu Anda memahami tidak hanya *bagaimana* menggunakan sesuatu, tetapi juga *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 berkembang begitu cepat sehingga tetap terkini membutuhkan pembelajaran terus-menerus. Dokumentasi yang baik membantu Anda memahami tidak hanya *bagaimana* menggunakan sesuatu, tetapi juga *mengapa* dan *kapan* menggunakannya. #### Sumber Dokumentasi Penting @@ -593,8 +714,25 @@ Pengembang profesional menghabiskan sebagian besar waktu mereka membaca dokument > 📚 **Strategi Belajar**: Jangan mencoba menghafal dokumentasi – sebaliknya, pelajari cara menavigasinya dengan efisien. Tandai referensi yang sering digunakan dan latih menggunakan fungsi pencarian untuk menemukan informasi spesifik dengan cepat. -✅ **Bahan untuk dipikirkan**: Berikut sesuatu yang menarik untuk direnungkan – bagaimana menurut Anda alat untuk membangun situs web (pengembangan) mungkin berbeda dari alat untuk merancang tampilannya (desain)? Ini seperti perbedaan antara menjadi arsitek yang merancang rumah yang indah dan kontraktor yang benar-benar membangunnya. Keduanya sangat penting, tetapi membutuhkan kotak alat yang berbeda! Pemikiran seperti ini akan sangat membantu Anda melihat gambaran besar bagaimana situs web tercipta. +### 🔧 **Cek Penguasaan Alat: Apa yang Menarik Perhatian Anda?** + +**Luangkan waktu sejenak untuk mempertimbangkan:** +- Alat mana yang paling Anda ingin coba pertama kali? (Tidak ada jawaban yang salah!) +- Apakah command line masih terasa menakutkan, atau Anda mulai penasaran? +- Bisakah Anda membayangkan menggunakan DevTools browser untuk mengintip di balik layar situs web favorit Anda? + +```mermaid +pie title "Developer Time Spent With Tools" + "Code Editor" : 40 + "Browser Testing" : 25 + "Command Line" : 15 + "Reading Docs" : 15 + "Debugging" : 5 +``` + +> **Wawasan menarik**: Sebagian besar pengembang menghabiskan sekitar 40% waktu mereka di editor kode, tetapi perhatikan berapa banyak waktu yang dihabiskan untuk pengujian, pembelajaran, dan pemecahan masalah. Pemrograman bukan hanya tentang menulis kode – ini tentang menciptakan pengalaman! +✅ **Bahan untuk dipikirkan**: Berikut sesuatu yang menarik untuk direnungkan – bagaimana menurut Anda alat untuk membangun situs web (pengembangan) mungkin berbeda dari alat untuk mendesain tampilannya (desain)? Ini seperti perbedaan antara menjadi arsitek yang merancang rumah indah dan kontraktor yang benar-benar membangunnya. Keduanya sangat penting, tetapi membutuhkan kotak alat yang berbeda! Pemikiran seperti ini benar-benar akan membantu Anda melihat gambaran besar bagaimana situs web tercipta. ## Tantangan Agen GitHub Copilot 🚀 @@ -602,7 +740,7 @@ Gunakan mode Agen untuk menyelesaikan tantangan berikut: **Deskripsi:** Jelajahi fitur editor kode modern atau IDE dan tunjukkan bagaimana itu dapat meningkatkan alur kerja Anda sebagai pengembang web. -**Prompt:** Pilih editor kode atau IDE (seperti Visual Studio Code, WebStorm, atau IDE berbasis cloud). Daftar tiga fitur atau ekstensi yang membantu Anda menulis, debug, atau memelihara kode lebih efisien. Untuk masing-masing, berikan penjelasan singkat tentang bagaimana itu menguntungkan alur kerja Anda. +**Prompt:** Pilih editor kode atau IDE (seperti Visual Studio Code, WebStorm, atau IDE berbasis cloud). Daftar tiga fitur atau ekstensi yang membantu Anda menulis, debug, atau memelihara kode lebih efisien. Untuk masing-masing, berikan penjelasan singkat tentang bagaimana itu bermanfaat bagi alur kerja Anda. --- @@ -610,51 +748,50 @@ Gunakan mode Agen untuk menyelesaikan tantangan berikut: **Baiklah, detektif, siap untuk kasus pertama Anda?** -Sekarang setelah Anda memiliki dasar yang luar biasa ini, saya punya petualangan yang akan membantu Anda melihat betapa beragam dan menariknya dunia pemrograman. Dan dengarkan – ini bukan tentang menulis kode dulu, jadi tidak ada tekanan di sana! Anggap saja Anda sebagai detektif bahasa pemrograman dalam kasus pertama yang menarik! +Sekarang setelah Anda memiliki dasar yang luar biasa ini, saya punya petualangan yang akan membantu Anda melihat betapa beragam dan menariknya dunia pemrograman. Dan dengar – ini bukan tentang menulis kode dulu, jadi tidak ada tekanan di sana! Anggap diri Anda sebagai detektif bahasa pemrograman dalam kasus pertama yang sangat menarik! **Misi Anda, jika Anda memilih untuk menerimanya:** -1. **Jadi penjelajah bahasa**: Pilih tiga bahasa pemrograman dari dunia yang benar-benar berbeda – mungkin satu untuk membangun situs web, satu untuk membuat aplikasi seluler, dan satu untuk menganalisis data untuk ilmuwan. Temukan contoh tugas sederhana yang sama ditulis dalam setiap bahasa. Saya jamin Anda akan sangat terkejut melihat betapa berbedanya mereka meskipun melakukan hal yang sama! +1. **Jadilah penjelajah bahasa**: Pilih tiga bahasa pemrograman dari dunia yang benar-benar berbeda – mungkin satu yang membangun situs web, satu yang membuat aplikasi seluler, dan satu yang menganalisis data untuk para ilmuwan. Temukan contoh tugas sederhana yang sama yang ditulis dalam setiap bahasa. Saya jamin Anda akan benar-benar kagum melihat betapa berbeda mereka bisa terlihat saat melakukan hal yang sama! 2. **Ungkap cerita asal mereka**: Apa yang membuat setiap bahasa istimewa? Berikut fakta keren – setiap bahasa pemrograman diciptakan karena seseorang berpikir, "Anda tahu apa? Harus ada cara yang lebih baik untuk menyelesaikan masalah ini." Bisakah Anda mencari tahu apa masalah itu? Beberapa cerita ini benar-benar menarik! -3. **Temui komunitasnya**: Lihat betapa ramah dan bersemangatnya komunitas setiap bahasa. Ada yang memiliki jutaan pengembang yang berbagi pengetahuan dan saling membantu, ada yang lebih kecil tetapi sangat erat dan mendukung. Anda akan senang melihat kepribadian berbeda yang dimiliki komunitas ini! +3. **Temui komunitasnya**: Lihat bagaimana ramah dan penuh semangat komunitas setiap bahasa. Beberapa memiliki jutaan pengembang yang berbagi pengetahuan dan saling membantu, yang lain lebih kecil tetapi sangat erat dan mendukung. Anda akan menyukai melihat kepribadian berbeda yang dimiliki komunitas ini! -4. **Ikuti insting Anda**: Bahasa mana yang menurut Anda paling mudah didekati saat ini? Jangan stres tentang membuat pilihan yang "sempurna" – cukup dengarkan insting Anda! Tidak ada jawaban yang salah di sini, dan Anda selalu bisa menjelajahi yang lain nanti. +4. **Ikuti insting Anda**: Bahasa mana yang terasa paling mudah didekati bagi Anda saat ini? Jangan stres tentang membuat pilihan "sempurna" – cukup dengarkan insting Anda! Tidak ada jawaban yang salah di sini, dan Anda selalu bisa menjelajahi yang lain nanti. -**Pekerjaan detektif bonus**: Lihat apakah Anda bisa menemukan situs web atau aplikasi besar apa yang dibangun dengan setiap bahasa. Saya jamin Anda akan terkejut mengetahui apa yang mendukung Instagram, Netflix, atau game seluler yang tidak bisa Anda hentikan! +**Pekerjaan detektif bonus**: Cari tahu situs web atau aplikasi besar apa yang dibangun dengan setiap bahasa. Saya jamin Anda akan terkejut mengetahui apa yang menggerakkan Instagram, Netflix, atau game seluler yang tidak bisa Anda hentikan! -> 💡 **Ingat**: Anda tidak mencoba menjadi ahli dalam bahasa-bahasa ini hari ini. Anda hanya mencoba mengenal lingkungan sebelum memutuskan di mana Anda ingin menetap. Luangkan waktu Anda, nikmati, dan biarkan rasa ingin tahu Anda memandu Anda! +> 💡 **Ingat**: Anda tidak mencoba menjadi ahli dalam salah satu bahasa ini hari ini. Anda hanya mengenal lingkungan sebelum memutuskan di mana Anda ingin menetap. Luangkan waktu Anda, nikmati, dan biarkan rasa ingin tahu Anda memandu Anda! ## Mari Rayakan Apa yang Telah Anda Temukan! -Wow, Anda telah menyerap begitu banyak informasi luar biasa hari ini! Saya benar-benar bersemangat melihat seberapa banyak dari perjalanan luar biasa ini yang telah melekat pada Anda. Dan ingat – ini bukan ujian di mana Anda harus mendapatkan semuanya dengan sempurna. Ini lebih seperti perayaan dari semua hal keren yang telah Anda pelajari tentang dunia yang menarik ini yang akan Anda masuki! - -[Ikuti kuis setelah pelajaran](https://ff-quizzes.netlify.app/web/) +Wow, Anda telah menyerap begitu banyak informasi luar biasa hari ini! Saya benar-benar bersemangat melihat seberapa banyak dari perjalanan luar biasa ini yang melekat pada Anda. Dan ingat – ini bukan ujian di mana Anda harus mendapatkan semuanya dengan sempurna. Ini lebih seperti perayaan semua hal keren yang telah Anda pelajari tentang dunia yang menarik ini yang akan Anda masuki! +[Ambil kuis pasca-pelajaran](https://ff-quizzes.netlify.app/web/) ## Tinjauan & Belajar Mandiri -**Luangkan waktu untuk menjelajahi dan bersenang-senang dengannya!** +**Luangkan waktu untuk menjelajahi dan bersenang-senang!** -Anda telah menempuh banyak hal hari ini, dan itu adalah sesuatu yang patut dibanggakan! Sekarang saatnya bagian yang menyenangkan – menjelajahi topik yang memicu rasa ingin tahu Anda. Ingat, ini bukan pekerjaan rumah – ini adalah petualangan! +Hari ini kamu telah mempelajari banyak hal, dan itu adalah sesuatu yang patut dibanggakan! Sekarang saatnya bagian yang menyenangkan – menjelajahi topik yang menarik perhatianmu. Ingat, ini bukan tugas – ini adalah petualangan! -**Mendalami hal yang membuat Anda bersemangat:** +**Mendalami hal yang membuatmu bersemangat:** **Praktik langsung dengan bahasa pemrograman:** -- Kunjungi situs web resmi dari 2-3 bahasa yang menarik perhatian Anda. Masing-masing memiliki 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 untuk bereksperimen – Anda tidak bisa merusak apa pun! -- Baca tentang bagaimana bahasa favorit Anda diciptakan. Serius, beberapa cerita asal ini sangat menarik dan akan membantu Anda memahami mengapa bahasa bekerja seperti itu. +- Kunjungi situs resmi dari 2-3 bahasa yang menarik perhatianmu. Setiap bahasa memiliki kepribadian dan ceritanya sendiri! +- Coba beberapa playground coding online seperti [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), atau [Replit](https://replit.com/). Jangan takut untuk bereksperimen – kamu tidak akan merusak apa pun! +- Baca tentang bagaimana bahasa favoritmu diciptakan. Serius, beberapa cerita asal-usulnya sangat menarik dan akan membantumu memahami mengapa bahasa tersebut bekerja seperti itu. -**Kenali alat baru Anda:** -- Unduh Visual Studio Code jika Anda belum melakukannya – ini gratis dan Anda akan menyukainya! -- Luangkan beberapa menit menjelajahi marketplace Ekstensi. Ini seperti toko aplikasi untuk editor kode Anda! -- Buka Developer Tools di browser Anda dan klik di sekitar. Jangan khawatir tentang memahami semuanya – cukup kenali apa yang ada di sana. +**Kenali alat-alat barumu:** +- Unduh Visual Studio Code jika belum – ini gratis dan kamu pasti akan menyukainya! +- Luangkan beberapa menit untuk menjelajahi marketplace Extensions. Ini seperti toko aplikasi untuk editor kodenya! +- Buka Developer Tools di browsermu dan klik di sana-sini. Jangan khawatir jika belum memahami semuanya – cukup kenali apa saja yang ada di sana. -**Bergabunglah 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 kepada pemula! -- Tonton beberapa video coding untuk pemula di YouTube. Ada banyak kreator hebat di luar sana yang mengingat bagaimana rasanya memulai dari awal. -- Pertimbangkan untuk bergabung dengan meetup lokal atau komunitas online. Percayalah, para developer senang membantu pendatang baru! +**Bergabung dengan komunitas:** +- Ikuti beberapa komunitas pengembang di [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), atau [GitHub](https://github.com/). Komunitas pemrograman sangat ramah terhadap pemula! +- Tonton beberapa video coding yang ramah pemula di YouTube. Ada banyak kreator hebat di luar sana yang mengingat bagaimana rasanya memulai. +- Pertimbangkan untuk bergabung dengan meetup lokal atau komunitas online. Percayalah, pengembang senang membantu pemula! -> 🎯 **Dengar, ini yang ingin saya sampaikan**: Kamu tidak diharapkan menjadi ahli coding dalam semalam! Saat ini, kamu hanya sedang mengenal dunia baru yang luar biasa ini, yang akan segera menjadi bagian dari hidupmu. Nikmati prosesnya, nikmati perjalanannya, dan ingat – setiap developer yang kamu kagumi dulu pernah berada di posisi yang sama seperti kamu sekarang, merasa bersemangat dan mungkin sedikit kewalahan. Itu sangat normal, dan itu berarti kamu sedang berada di jalur yang benar! +> 🎯 **Dengar, ini yang ingin aku sampaikan**: Kamu tidak diharapkan menjadi ahli coding dalam semalam! Saat ini, kamu hanya sedang mengenal dunia luar biasa yang akan kamu masuki. Luangkan waktu, nikmati perjalanan, dan ingat – setiap pengembang yang kamu kagumi dulu pernah berada di posisi yang sama seperti kamu sekarang, merasa bersemangat dan mungkin sedikit kewalahan. Itu sangat normal, dan itu berarti kamu sedang melakukannya dengan benar! @@ -662,9 +799,69 @@ Anda telah menempuh banyak hal hari ini, dan itu adalah sesuatu yang patut diban [Reading the Docs](assignment.md) -> 💡 **Sedikit dorongan untuk tugasmu**: Saya sangat ingin melihat kamu menjelajahi beberapa alat yang belum kita bahas! Lewati editor, browser, dan alat command line yang sudah kita bicarakan – ada seluruh dunia alat pengembangan yang luar biasa di luar sana yang menunggu untuk ditemukan. Cari alat yang aktif dipelihara dan memiliki komunitas yang hidup serta mendukung (biasanya alat seperti ini memiliki tutorial terbaik dan orang-orang yang paling membantu saat kamu pasti akan mengalami kesulitan dan membutuhkan bantuan yang ramah). +> 💡 **Sedikit dorongan untuk tugasmu**: Aku sangat ingin melihatmu menjelajahi beberapa alat yang belum kita bahas! Lewati editor, browser, dan alat command line yang sudah kita bicarakan – ada seluruh dunia alat pengembangan luar biasa di luar sana yang menunggu untuk ditemukan. Cari yang aktif dipelihara dan memiliki komunitas yang hidup dan membantu (biasanya alat seperti ini memiliki tutorial terbaik dan orang-orang yang paling mendukung saat kamu mengalami kesulitan dan membutuhkan bantuan). + +--- + +## 🚀 Garis Waktu Perjalanan Pemrogramanmu + +### ⚡ **Yang Bisa Kamu Lakukan dalam 5 Menit ke Depan** +- [ ] Tandai 2-3 situs web bahasa pemrograman yang menarik perhatianmu +- [ ] Unduh Visual Studio Code jika belum +- [ ] Buka DevTools di browsermu (F12) dan klik di sana-sini di situs web mana saja +- [ ] Bergabung dengan satu komunitas pemrograman (Dev.to, Reddit r/webdev, atau Stack Overflow) + +### ⏰ **Yang Bisa Kamu Capai dalam Satu Jam** +- [ ] Selesaikan kuis pasca-pelajaran dan refleksikan jawabanmu +- [ ] Pasang VS Code dengan ekstensi GitHub Copilot +- [ ] Coba contoh "Hello World" di 2 bahasa pemrograman yang berbeda secara online +- [ ] Tonton video "Day in the Life of a Developer" di YouTube +- [ ] Mulai pekerjaan detektif bahasa pemrogramanmu (dari tantangan) + +### 📅 **Petualangan Selama Seminggu** +- [ ] Selesaikan tugas dan jelajahi 3 alat pengembangan baru +- [ ] Ikuti 5 pengembang atau akun pemrograman di media sosial +- [ ] Coba membuat sesuatu kecil di CodePen atau Replit (bahkan hanya "Hello, [Nama Kamu]!") +- [ ] Baca satu posting blog pengembang tentang perjalanan coding seseorang +- [ ] Bergabung dengan meetup virtual atau tonton pembicaraan tentang pemrograman +- [ ] Mulai belajar bahasa pilihanmu dengan tutorial online + +### 🗓️ **Transformasi Selama Sebulan** +- [ ] Buat proyek kecil pertamamu (bahkan halaman web sederhana pun sudah cukup!) +- [ ] Berkontribusi pada proyek open-source (mulai dengan perbaikan dokumentasi) +- [ ] Mentor seseorang yang baru memulai perjalanan pemrogramannya +- [ ] Buat situs web portofolio pengembangmu +- [ ] Terhubung dengan komunitas pengembang lokal atau kelompok belajar +- [ ] Mulai merencanakan tonggak pembelajaran berikutnya + +### 🎯 **Refleksi Akhir** + +**Sebelum melanjutkan, luangkan waktu untuk merayakan:** +- Apa satu hal tentang pemrograman yang membuatmu bersemangat hari ini? +- Alat atau konsep mana yang ingin kamu eksplorasi pertama kali? +- Bagaimana perasaanmu tentang memulai perjalanan pemrograman ini? +- Apa satu pertanyaan yang ingin kamu tanyakan kepada pengembang saat ini? + +```mermaid +journey + title Your Confidence Building Journey + section Today + Curious: 3: You + Overwhelmed: 4: You + Excited: 5: You + section This Week + Exploring: 4: You + Learning: 5: You + Connecting: 4: You + section Next Month + Building: 5: You + Confident: 5: You + Helping Others: 5: You +``` + +> 🌟 **Ingat**: Setiap ahli dulunya adalah pemula. Setiap pengembang senior dulu pernah merasa persis seperti yang kamu rasakan sekarang – bersemangat, mungkin sedikit kewalahan, dan pasti penasaran dengan apa yang mungkin dicapai. Kamu berada di lingkungan yang luar biasa, dan perjalanan ini akan menjadi luar biasa. Selamat datang di dunia pemrograman yang menakjubkan! 🎉 --- **Penafian**: -Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diketahui bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang penting, disarankan menggunakan jasa penerjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau interpretasi yang keliru yang timbul dari penggunaan terjemahan ini. \ No newline at end of file +Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diketahui bahwa terjemahan otomatis dapat mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa penerjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau interpretasi yang keliru yang timbul dari penggunaan terjemahan ini. \ No newline at end of file diff --git a/translations/id/1-getting-started-lessons/2-github-basics/README.md b/translations/id/1-getting-started-lessons/2-github-basics/README.md index d95fc988cf..3ca647d936 100644 --- a/translations/id/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/id/1-getting-started-lessons/2-github-basics/README.md @@ -1,8 +1,8 @@ B{Is it a Git Repository?} + B -->|No| C[git init] + B -->|Yes| D[Make Changes] + C --> D + D --> E[git add .] + E --> F["git commit -m 'message'"] + F --> G[git push] + G --> H[🌟 Code on GitHub!] + + H --> I{Want to collaborate?} + I -->|Yes| J[Fork & Clone] + I -->|No| D + J --> K[Create Branch] + K --> L[Make Changes] + L --> M[Pull Request] + M --> N[🎉 Contributing!] + + style A fill:#fff59d + style H fill:#c8e6c9 + style N fill:#ff4081,color:#fff +``` + ### Tugas: Buat Repositori Pertama Anda! > 🎯 **Misi Anda (dan saya sangat bersemangat untuk Anda!)**: Kita akan membuat repositori GitHub pertama Anda bersama-sama! Pada saat kita selesai di sini, Anda akan memiliki sudut kecil internet Anda sendiri tempat kode Anda tinggal, dan Anda akan membuat "commit" pertama Anda (itu istilah pengembang untuk menyimpan pekerjaan Anda dengan cara yang sangat cerdas). > -> Ini benar-benar momen yang istimewa – Anda akan secara resmi bergabung dengan komunitas pengembang global! Saya masih ingat kegembiraan membuat repo pertama saya dan berpikir "Wow, saya benar-benar melakukan ini!" +> Ini benar-benar momen yang spesial – Anda akan secara resmi bergabung dengan komunitas pengembang global! Saya masih ingat kegembiraan membuat repo pertama saya dan berpikir "Wow, saya benar-benar melakukannya!" -Mari kita jalani petualangan ini bersama, langkah demi langkah. Luangkan waktu Anda di setiap bagian – tidak ada hadiah untuk terburu-buru, dan saya janji setiap langkah akan masuk akal. Ingat, setiap bintang coding yang Anda kagumi pernah duduk persis di tempat Anda berada, akan membuat repositori pertama mereka. Betapa kerennya itu? +Mari kita jalani petualangan ini bersama-sama, langkah demi langkah. Luangkan waktu Anda di setiap bagian – tidak ada hadiah untuk terburu-buru, dan saya janji setiap langkah akan masuk akal. Ingat, setiap bintang coding yang Anda kagumi pernah duduk persis di tempat Anda berada, akan membuat repositori pertama mereka. Betapa kerennya itu? -> Lihat video +> Tonton video > > [![Video dasar Git dan GitHub](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4) -**Mari Lakukan Ini Bersama:** +**Mari Lakukan Ini Bersama-sama:** 1. **Buat repositori Anda di GitHub**. Kunjungi GitHub.com dan cari tombol hijau cerah **New** (atau tanda **+** di sudut kanan atas). Klik dan pilih **New repository**. @@ -154,15 +195,15 @@ Mari kita jalani petualangan ini bersama, langkah demi langkah. Luangkan waktu A **Inilah yang baru saja terjadi (hal yang cukup keren!):** - Git baru saja membuat folder tersembunyi `.git` di proyek Anda – Anda tidak akan melihatnya, tetapi itu ada! - Folder biasa Anda sekarang menjadi "repositori" yang dapat melacak setiap perubahan yang Anda buat - - Anggap saja seperti memberi folder Anda kekuatan super untuk mengingat segalanya + - Anggap ini seperti memberi folder Anda kekuatan super untuk mengingat segalanya -4. **Periksa apa yang sedang terjadi**. Mari kita lihat apa yang dipikirkan Git tentang proyek Anda saat ini: +4. **Periksa apa yang sedang terjadi**. Mari kita lihat apa yang Git pikirkan tentang proyek Anda saat ini: ```bash git status ``` - **Memahami apa yang dikatakan Git kepada Anda:** + **Memahami apa yang Git katakan kepada Anda:** Anda mungkin melihat sesuatu yang terlihat seperti ini: @@ -178,9 +219,9 @@ Mari kita jalani petualangan ini bersama, langkah demi langkah. Luangkan waktu A **Jangan panik! Inilah artinya:** - File dalam **merah** adalah file yang memiliki perubahan tetapi belum siap untuk disimpan - File dalam **hijau** (ketika Anda melihatnya) sudah siap untuk disimpan - - Git membantu dengan memberi tahu Anda apa yang bisa Anda lakukan selanjutnya + - Git membantu dengan memberi tahu Anda persis apa yang bisa Anda lakukan selanjutnya - > 💡 **Tip pro**: Perintah `git status` adalah sahabat Anda! Gunakan kapan saja Anda bingung tentang apa yang sedang terjadi. Ini seperti bertanya pada Git "Hei, apa situasinya sekarang?" + > 💡 **Tip pro**: Perintah `git status` adalah sahabat Anda! Gunakan kapan saja Anda bingung tentang apa yang sedang terjadi. Ini seperti bertanya kepada Git "Hei, apa situasinya sekarang?" 5. **Siapkan file Anda untuk disimpan** (ini disebut "staging"): @@ -190,10 +231,10 @@ Mari kita jalani petualangan ini bersama, langkah demi langkah. Luangkan waktu A **Apa yang baru saja kita lakukan:** - Kita memberi tahu Git "Hei, saya ingin menyertakan SEMUA file saya dalam penyimpanan berikutnya" - - `.` seperti mengatakan "semua di folder ini" + - `.` seperti mengatakan "semua dalam folder ini" - Sekarang file Anda "staged" dan siap untuk langkah berikutnya - **Ingin lebih selektif?** Anda bisa menambahkan file tertentu saja: + **Ingin lebih selektif?** Anda dapat menambahkan hanya file tertentu: ```bash git add [file or folder name] @@ -202,9 +243,9 @@ Mari kita jalani petualangan ini bersama, langkah demi langkah. Luangkan waktu A **Mengapa Anda mungkin ingin melakukan ini?** - Kadang-kadang Anda ingin menyimpan perubahan terkait bersama-sama - Ini membantu Anda mengatur pekerjaan Anda ke dalam bagian logis - - Memudahkan untuk memahami apa yang berubah dan kapan + - Membuatnya lebih mudah untuk memahami apa yang berubah dan kapan - **Berubah pikiran?** Tidak masalah! Anda bisa membatalkan staging file seperti ini: + **Berubah pikiran?** Tidak masalah! Anda dapat menghapus file dari tahap seperti ini: ```bash # Unstage everything @@ -214,7 +255,7 @@ Mari kita jalani petualangan ini bersama, langkah demi langkah. Luangkan waktu A git reset [file name] ``` - Jangan khawatir – ini tidak menghapus pekerjaan Anda, hanya mengeluarkan file dari tumpukan "siap disimpan". + Jangan khawatir – ini tidak menghapus pekerjaan Anda, hanya mengeluarkan file dari "siap untuk disimpan". 6. **Simpan pekerjaan Anda secara permanen** (membuat commit pertama Anda!): @@ -225,14 +266,14 @@ Mari kita jalani petualangan ini bersama, langkah demi langkah. Luangkan waktu A **🎉 Selamat! Anda baru saja membuat commit pertama Anda!** **Inilah yang baru saja terjadi:** - - Git mengambil "snapshot" dari semua file yang Anda stage pada saat ini + - Git mengambil "snapshot" dari semua file yang telah Anda stage pada saat ini - Pesan commit Anda "first commit" menjelaskan tentang apa titik penyimpanan ini - Git memberikan snapshot ini ID unik sehingga Anda selalu dapat menemukannya nanti - Anda secara resmi mulai melacak sejarah proyek Anda! > 💡 **Pesan commit di masa depan**: Untuk commit berikutnya, jadilah lebih deskriptif! Alih-alih "updated stuff", coba "Tambahkan formulir kontak ke halaman utama" atau "Perbaiki bug menu navigasi". Diri Anda di masa depan akan berterima kasih! -7. **Hubungkan proyek lokal Anda ke GitHub**. Saat ini, proyek Anda hanya ada di komputer Anda. Mari kita hubungkan ke repositori GitHub Anda sehingga Anda bisa membagikannya dengan dunia! +7. **Hubungkan proyek lokal Anda ke GitHub**. Saat ini, proyek Anda hanya ada di komputer Anda. Mari kita hubungkan ke repositori GitHub Anda sehingga Anda dapat membagikannya dengan dunia! Pertama, pergi ke halaman repositori GitHub Anda dan salin URL-nya. Lalu kembali ke sini dan ketik: @@ -241,13 +282,12 @@ Mari kita jalani petualangan ini bersama, langkah demi langkah. Luangkan waktu A ``` (Ganti URL itu dengan URL repositori Anda yang sebenarnya!) +**Apa yang baru saja kita lakukan:** +- Kita telah membuat koneksi antara proyek lokal Anda dan repositori GitHub Anda +- "Origin" hanyalah nama panggilan untuk repositori GitHub Anda – seperti menambahkan kontak ke ponsel Anda +- Sekarang Git lokal Anda tahu ke mana harus mengirim kode Anda saat Anda siap membagikannya - **Apa yang baru saja kita lakukan:** - - Kami telah membuat koneksi antara proyek lokal Anda dan repositori GitHub Anda - - "Origin" hanyalah nama panggilan untuk repositori GitHub Anda – seperti menambahkan kontak ke ponsel Anda - - Sekarang Git lokal Anda tahu ke mana harus mengirim kode Anda saat Anda siap membagikannya - - 💡 **Cara lebih mudah**: Jika Anda telah menginstal GitHub CLI, Anda dapat melakukan ini dengan satu perintah: +💡 **Cara lebih mudah**: Jika Anda memiliki GitHub CLI terinstal, Anda bisa melakukannya dengan satu perintah: ```bash gh repo create my-repo --public --push --source=. ``` @@ -258,19 +298,19 @@ Mari kita jalani petualangan ini bersama, langkah demi langkah. Luangkan waktu A git push -u origin main ``` - **🚀 Ini dia! Anda sedang mengunggah kode Anda ke GitHub!** - - **Apa yang terjadi:** - - Commit Anda sedang dikirim dari komputer Anda ke GitHub - - Flag `-u` membuat koneksi permanen sehingga pengiriman di masa depan menjadi lebih mudah - - "main" adalah nama cabang utama Anda (seperti folder utama) - - Setelah ini, Anda hanya perlu mengetik `git push` untuk pengunggahan berikutnya! +**🚀 Ini dia! Anda sedang mengunggah kode Anda ke GitHub!** + +**Apa yang sedang terjadi:** +- Komit Anda sedang "berjalan" dari komputer Anda ke GitHub +- Flag `-u` membuat koneksi permanen sehingga pengiriman berikutnya lebih mudah +- "main" adalah nama cabang utama Anda (seperti folder utama) +- Setelah ini, Anda hanya perlu mengetik `git push` untuk unggahan berikutnya! - 💡 **Catatan cepat**: Jika cabang Anda memiliki nama lain (seperti "master"), gunakan nama tersebut. Anda dapat memeriksanya dengan `git branch --show-current`. +💡 **Catatan cepat**: Jika cabang Anda memiliki nama lain (seperti "master"), gunakan nama itu. Anda bisa memeriksanya dengan `git branch --show-current`. 9. **Ritme coding harian baru Anda** (di sinilah semuanya menjadi adiktif!): - Mulai sekarang, setiap kali Anda membuat perubahan pada proyek Anda, Anda memiliki tiga langkah sederhana ini: +Mulai sekarang, setiap kali Anda membuat perubahan pada proyek Anda, Anda memiliki tiga langkah sederhana ini: ```bash git add . @@ -278,34 +318,60 @@ Mari kita jalani petualangan ini bersama, langkah demi langkah. Luangkan waktu A git push ``` - **Ini menjadi detak jantung coding Anda:** - - Buat beberapa perubahan keren pada kode Anda ✨ - - Stage perubahan dengan `git add` ("Hei Git, perhatikan perubahan ini!") - - Simpan dengan `git commit` dan pesan deskriptif (masa depan Anda akan berterima kasih!) - - Bagikan dengan dunia menggunakan `git push` 🚀 - - Ulangi – serius, ini menjadi alami seperti bernapas! - - Saya suka alur kerja ini karena seperti memiliki beberapa titik penyimpanan dalam permainan video. Membuat perubahan yang Anda sukai? Commit! Ingin mencoba sesuatu yang berisiko? Tidak masalah – Anda selalu dapat kembali ke commit terakhir jika terjadi masalah! +**Ini menjadi detak jantung coding Anda:** +- Buat beberapa perubahan keren pada kode Anda ✨ +- Stage perubahan dengan `git add` ("Hei Git, perhatikan perubahan ini!") +- Simpan dengan `git commit` dan pesan deskriptif (masa depan Anda akan berterima kasih!) +- Bagikan dengan dunia menggunakan `git push` 🚀 +- Ulangi terus – serius, ini menjadi semudah bernapas! + +Saya suka alur kerja ini karena seperti memiliki beberapa titik penyimpanan dalam permainan video. Membuat perubahan yang Anda sukai? Komit! Ingin mencoba sesuatu yang berisiko? Tidak masalah – Anda selalu bisa kembali ke komit terakhir jika ada masalah! + +> 💡 **Tip**: Anda mungkin juga ingin menggunakan file `.gitignore` untuk mencegah file yang tidak ingin Anda lacak muncul di GitHub - seperti file catatan yang Anda simpan di folder yang sama tetapi tidak cocok untuk repositori publik. Anda dapat menemukan template untuk file `.gitignore` di [.gitignore templates](https://github.com/github/gitignore) atau membuatnya menggunakan [gitignore.io](https://www.toptal.com/developers/gitignore). + +### 🧠 **Check-in Repositori Pertama: Bagaimana Rasanya?** + +**Luangkan waktu untuk merayakan dan merenung:** +- Bagaimana rasanya melihat kode Anda muncul di GitHub untuk pertama kalinya? +- Langkah mana yang terasa paling membingungkan, dan mana yang terasa mengejutkan mudah? +- Bisakah Anda menjelaskan perbedaan antara `git add`, `git commit`, dan `git push` dengan kata-kata Anda sendiri? + +```mermaid +stateDiagram-v2 + [*] --> LocalFiles: Create project + LocalFiles --> Staged: git add . + Staged --> Committed: git commit + Committed --> GitHub: git push + GitHub --> [*]: Success! 🎉 + + note right of Staged + Files ready to save + end note + + note right of Committed + Snapshot created + end note +``` - > 💡 **Tip**: Anda mungkin juga ingin menggunakan file `.gitignore` untuk mencegah file yang tidak ingin Anda lacak muncul di GitHub - seperti file catatan yang Anda simpan di folder yang sama tetapi tidak memiliki tempat di repositori publik. Anda dapat menemukan template untuk file `.gitignore` di [.gitignore templates](https://github.com/github/gitignore) atau membuatnya menggunakan [gitignore.io](https://www.toptal.com/developers/gitignore). +> **Ingat**: Bahkan pengembang berpengalaman kadang-kadang lupa perintah yang tepat. Membuat alur kerja ini menjadi memori otot membutuhkan latihan - Anda sudah melakukan yang hebat! #### Alur kerja Git modern Pertimbangkan untuk mengadopsi praktik modern ini: -- **Conventional Commits**: Gunakan format pesan commit yang standar seperti `feat:`, `fix:`, `docs:`, dll. Pelajari lebih lanjut di [conventionalcommits.org](https://www.conventionalcommits.org/) -- **Atomic commits**: Buat setiap commit mewakili satu perubahan logis -- **Frequent commits**: Commit sering dengan pesan deskriptif daripada commit besar yang jarang +- **Conventional Commits**: Gunakan format pesan komit yang standar seperti `feat:`, `fix:`, `docs:`, dll. Pelajari lebih lanjut di [conventionalcommits.org](https://www.conventionalcommits.org/) +- **Komit atomik**: Buat setiap komit mewakili satu perubahan logis +- **Komit sering**: Komit sering dengan pesan deskriptif daripada komit besar yang jarang -#### Pesan commit +#### Pesan komit -Baris subjek pesan commit Git yang hebat melengkapi kalimat berikut: -Jika diterapkan, commit ini akan +Baris subjek pesan komit Git yang hebat melengkapi kalimat berikut: +Jika diterapkan, komit ini akan Untuk subjek gunakan bentuk imperatif, waktu sekarang: "ubah" bukan "diubah" atau "mengubah". -Seperti pada subjek, di badan (opsional) juga gunakan bentuk imperatif, waktu sekarang. Badan harus mencakup motivasi untuk perubahan dan membandingkan ini dengan perilaku sebelumnya. Anda menjelaskan `mengapa`, bukan `bagaimana`. +Seperti pada subjek, di badan (opsional) juga gunakan bentuk imperatif, waktu sekarang. Badan harus mencakup motivasi untuk perubahan dan kontras ini dengan perilaku sebelumnya. Anda menjelaskan `mengapa`, bukan `bagaimana`. -✅ Luangkan beberapa menit untuk menjelajahi GitHub. Bisakah Anda menemukan pesan commit yang benar-benar bagus? Bisakah Anda menemukan yang sangat minimal? Informasi apa yang menurut Anda paling penting dan berguna untuk disampaikan dalam pesan commit? +✅ Luangkan beberapa menit untuk menjelajahi GitHub. Bisakah Anda menemukan pesan komit yang benar-benar hebat? Bisakah Anda menemukan yang sangat minimal? Informasi apa yang menurut Anda paling penting dan berguna untuk disampaikan dalam pesan komit? ## Bekerja dengan Orang Lain (Bagian Seru!) @@ -313,9 +379,9 @@ Pegang topi Anda karena INI adalah saat GitHub menjadi benar-benar ajaib! 🪄 A Bayangkan ini: Anda bangun besok dan melihat seseorang di Tokyo meningkatkan kode Anda saat Anda tidur. Kemudian seseorang di Berlin memperbaiki bug yang membuat Anda buntu. Pada sore hari, seorang pengembang di São Paulo menambahkan fitur yang bahkan tidak pernah Anda pikirkan. Itu bukan fiksi ilmiah – itu hanya hari Selasa di dunia GitHub! -Yang membuat saya sangat bersemangat adalah keterampilan kolaborasi yang akan Anda pelajari? Ini adalah alur kerja YANG SAMA persis yang digunakan tim di Google, Microsoft, dan startup favorit Anda setiap hari. Anda tidak hanya belajar alat yang keren – Anda belajar bahasa rahasia yang membuat seluruh dunia perangkat lunak bekerja bersama. +Yang membuat saya sangat bersemangat adalah keterampilan kolaborasi yang akan Anda pelajari? Ini adalah alur kerja YANG SAMA persis yang digunakan tim di Google, Microsoft, dan startup favorit Anda setiap hari. Anda tidak hanya belajar alat yang keren – Anda belajar bahasa rahasia yang membuat seluruh dunia perangkat lunak bekerja bersama. -Serius, begitu Anda merasakan sensasi seseorang menggabungkan pull request pertama Anda, Anda akan mengerti mengapa para pengembang sangat bersemangat tentang open source. Rasanya seperti menjadi bagian dari proyek tim terbesar dan paling kreatif di dunia! +Serius, begitu Anda merasakan sensasi seseorang menggabungkan pull request pertama Anda, Anda akan mengerti mengapa pengembang sangat bersemangat tentang open source. Rasanya seperti menjadi bagian dari proyek tim terbesar dan paling kreatif di dunia! > Tonton video > @@ -323,9 +389,29 @@ Serius, begitu Anda merasakan sensasi seseorang menggabungkan pull request perta Alasan utama untuk meletakkan sesuatu di GitHub adalah untuk memungkinkan kolaborasi dengan pengembang lain. +```mermaid +flowchart LR + A[🔍 Find Project] --> B[🍴 Fork Repository] + B --> C[📥 Clone to Local] + C --> D[🌿 Create Branch] + D --> E[✏️ Make Changes] + E --> F[💾 Commit Changes] + F --> G[📤 Push Branch] + G --> H[🔄 Create Pull Request] + H --> I{Maintainer Review} + I -->|✅ Approved| J[🎉 Merge!] + I -->|❓ Changes Requested| K[📝 Make Updates] + K --> F + J --> L[🧹 Clean Up Branches] + + style A fill:#e3f2fd + style J fill:#e8f5e8 + style L fill:#fff3e0 +``` + Di repositori Anda, navigasikan ke `Insights > Community` untuk melihat bagaimana proyek Anda dibandingkan dengan standar komunitas yang direkomendasikan. -Ingin membuat repositori Anda terlihat profesional dan menarik? Pergilah ke repositori Anda dan klik `Insights > Community`. Fitur keren ini menunjukkan bagaimana proyek Anda dibandingkan dengan apa yang dianggap sebagai "praktik repositori yang baik" oleh komunitas GitHub. +Ingin membuat repositori Anda terlihat profesional dan ramah? Pergi ke repositori Anda dan klik `Insights > Community`. Fitur keren ini menunjukkan bagaimana proyek Anda dibandingkan dengan apa yang dianggap sebagai "praktik repositori yang baik" oleh komunitas GitHub. > 🎯 **Membuat Proyek Anda Bersinar**: Repositori yang terorganisir dengan baik dan dokumentasi yang baik seperti memiliki etalase yang bersih dan ramah. Ini menunjukkan bahwa Anda peduli dengan pekerjaan Anda dan membuat orang lain ingin berkontribusi! @@ -334,15 +420,15 @@ Ingin membuat repositori Anda terlihat profesional dan menarik? Pergilah ke repo | Apa yang Ditambahkan | Mengapa Penting | Apa yang Dilakukan untuk Anda | |-----------------------|-----------------|-------------------------------| | **Deskripsi** | Kesan pertama itu penting! | Orang tahu langsung apa yang dilakukan proyek Anda | -| **README** | Halaman depan proyek Anda | Seperti pemandu wisata ramah untuk pengunjung baru | -| **Panduan Kontribusi** | Menunjukkan Anda menyambut bantuan | Orang tahu persis bagaimana mereka dapat membantu Anda | +| **README** | Halaman depan proyek Anda | Seperti pemandu wisata yang ramah untuk pengunjung baru | +| **Panduan Kontribusi** | Menunjukkan Anda menyambut bantuan | Orang tahu persis bagaimana mereka bisa membantu Anda | | **Kode Etik** | Menciptakan ruang yang ramah | Semua orang merasa diterima untuk berpartisipasi | -| **Lisensi** | Kejelasan hukum | Orang lain tahu bagaimana mereka dapat menggunakan kode Anda | +| **Lisensi** | Kejelasan hukum | Orang lain tahu bagaimana mereka bisa menggunakan kode Anda | | **Kebijakan Keamanan** | Menunjukkan Anda bertanggung jawab | Menunjukkan praktik profesional | > 💡 **Pro Tip**: GitHub menyediakan template untuk semua file ini. Saat membuat repositori baru, centang kotak untuk secara otomatis menghasilkan file-file ini. -**Fitur GitHub Modern untuk Dijelajahi:** +**Fitur Modern GitHub untuk Dijelajahi:** 🤖 **Otomasi & CI/CD:** - **GitHub Actions** untuk pengujian dan penerapan otomatis @@ -359,20 +445,20 @@ Semua sumber daya ini akan bermanfaat untuk onboarding anggota tim baru. Dan ini ### Tugas: Gabungkan beberapa kode -Dokumen kontribusi membantu orang berkontribusi pada proyek. Ini menjelaskan jenis kontribusi apa yang Anda cari dan bagaimana prosesnya bekerja. Kontributor perlu melalui serangkaian langkah untuk dapat berkontribusi pada repositori Anda di GitHub: +Dokumen kontribusi membantu orang berkontribusi pada proyek. Ini menjelaskan jenis kontribusi apa yang Anda cari dan bagaimana prosesnya bekerja. Kontributor perlu melalui serangkaian langkah untuk dapat berkontribusi pada repo Anda di GitHub: -1. **Fork repositori Anda** Anda mungkin ingin orang-orang _fork_ proyek Anda. Forking berarti membuat replika repositori Anda di profil GitHub mereka. -1. **Clone**. Dari sana mereka akan meng-clone proyek ke mesin lokal mereka. -1. **Buat cabang**. Anda akan ingin meminta mereka membuat _cabang_ untuk pekerjaan mereka. -1. **Fokuskan perubahan mereka pada satu area**. Minta kontributor untuk berkonsentrasi pada satu hal dalam kontribusi mereka - dengan cara itu peluang Anda untuk _menggabungkan_ pekerjaan mereka lebih tinggi. Bayangkan mereka menulis perbaikan bug, menambahkan fitur baru, dan memperbarui beberapa tes - bagaimana jika Anda ingin, atau hanya dapat menerapkan 2 dari 3, atau 1 dari 3 perubahan? +1. **Forking repo Anda** Anda mungkin ingin orang-orang _fork_ proyek Anda. Forking berarti membuat replika repositori Anda di profil GitHub mereka. +1. **Clone**. Dari sana mereka akan mengkloning proyek ke mesin lokal mereka. +1. **Buat cabang**. Anda ingin meminta mereka membuat _cabang_ untuk pekerjaan mereka. +1. **Fokuskan perubahan mereka pada satu area**. Minta kontributor untuk memusatkan kontribusi mereka pada satu hal pada satu waktu - dengan cara itu peluang Anda untuk _menggabungkan_ pekerjaan mereka lebih tinggi. Bayangkan mereka menulis perbaikan bug, menambahkan fitur baru, dan memperbarui beberapa tes - bagaimana jika Anda ingin, atau hanya dapat menerapkan 2 dari 3, atau 1 dari 3 perubahan? -✅ Bayangkan situasi di mana cabang sangat penting untuk menulis dan mengirimkan kode yang baik. Kasus penggunaan apa yang dapat Anda pikirkan? +✅ Bayangkan situasi di mana cabang sangat penting untuk menulis dan mengirimkan kode yang baik. Kasus penggunaan apa yang bisa Anda pikirkan? -> Catatan, jadilah perubahan yang ingin Anda lihat di dunia, dan buat cabang untuk pekerjaan Anda sendiri juga. Commit apa pun yang Anda buat akan dibuat di cabang tempat Anda saat ini "checked out". Gunakan `git status` untuk melihat cabang mana itu. +> Catatan, jadilah perubahan yang ingin Anda lihat di dunia, dan buat cabang untuk pekerjaan Anda sendiri juga. Komit apa pun yang Anda buat akan dibuat di cabang tempat Anda saat ini "checked out". Gunakan `git status` untuk melihat cabang mana itu. -Mari kita melalui alur kerja kontributor. Anggaplah kontributor telah _fork_ dan _clone_ repositori sehingga mereka memiliki repositori Git yang siap untuk dikerjakan, di mesin lokal mereka: +Mari kita melalui alur kerja kontributor. Anggaplah kontributor telah _forked_ dan _cloned_ repo sehingga mereka memiliki repo Git yang siap untuk dikerjakan, di mesin lokal mereka: -1. **Buat cabang**. Gunakan perintah `git branch` untuk membuat cabang yang akan berisi perubahan yang mereka maksudkan untuk berkontribusi: +1. **Buat cabang**. Gunakan perintah `git branch` untuk membuat cabang yang akan berisi perubahan yang ingin mereka kontribusikan: ```bash git branch [branch-name] @@ -398,9 +484,9 @@ Mari kita melalui alur kerja kontributor. Anggaplah kontributor telah _fork_ dan git commit -m "my changes" ``` - > ⚠️ **Kualitas Pesan Commit**: Pastikan Anda memberikan nama yang baik untuk commit Anda, baik untuk kepentingan Anda maupun pemelihara repositori yang Anda bantu. Jelaskan secara spesifik apa yang Anda ubah! + > ⚠️ **Kualitas Pesan Komit**: Pastikan Anda memberikan nama yang baik untuk komit Anda, baik untuk kepentingan Anda maupun pemelihara repo yang Anda bantu. Jadilah spesifik tentang apa yang Anda ubah! -1. **Gabungkan pekerjaan Anda dengan cabang `main`**. Pada suatu saat Anda selesai bekerja dan Anda ingin menggabungkan pekerjaan Anda dengan cabang `main`. Cabang `main` mungkin telah berubah sementara itu jadi pastikan Anda memperbaruinya terlebih dahulu ke versi terbaru dengan perintah berikut: +1. **Gabungkan pekerjaan Anda dengan cabang `main`**. Pada suatu saat Anda selesai bekerja dan Anda ingin menggabungkan pekerjaan Anda dengan cabang `main`. Cabang `main` mungkin telah berubah sementara itu jadi pastikan Anda pertama-tama memperbaruinya ke yang terbaru dengan perintah berikut: ```bash git switch main @@ -416,21 +502,47 @@ Mari kita melalui alur kerja kontributor. Anggaplah kontributor telah _fork_ dan Perintah `git merge main` akan membawa semua perubahan dari `main` ke cabang Anda. Semoga Anda bisa langsung melanjutkan. Jika tidak, VS Code akan memberi tahu Anda di mana Git _bingung_ dan Anda hanya perlu mengubah file yang terpengaruh untuk mengatakan konten mana yang paling akurat. - 💡 **Alternatif Modern**: Pertimbangkan menggunakan `git rebase` untuk riwayat yang lebih bersih: + 💡 **Alternatif modern**: Pertimbangkan menggunakan `git rebase` untuk riwayat yang lebih bersih: ```bash git rebase main ``` - Ini memutar ulang commit Anda di atas cabang utama terbaru, menciptakan riwayat yang linier. + Ini memutar ulang komit Anda di atas cabang utama terbaru, menciptakan riwayat yang linear. -1. **Kirim pekerjaan Anda ke GitHub**. Mengirim pekerjaan Anda ke GitHub berarti dua hal. Mendorong cabang Anda ke repositori Anda dan kemudian membuka PR, Pull Request. +1. **Kirim pekerjaan Anda ke GitHub**. Mengirim pekerjaan Anda ke GitHub berarti dua hal. Mendorong cabang Anda ke repo Anda dan kemudian membuka PR, Pull Request. ```bash git push --set-upstream origin [branch-name] ``` - Perintah di atas membuat cabang di repositori yang telah Anda fork. + Perintah di atas membuat cabang di repo yang Anda fork. + +### 🤝 **Pemeriksaan Keterampilan Kolaborasi: Siap Bekerja dengan Orang Lain?** + +**Mari kita lihat bagaimana perasaan Anda tentang kolaborasi:** +- Apakah ide tentang forking dan pull request masuk akal bagi Anda sekarang? +- Apa satu hal tentang bekerja dengan cabang yang ingin Anda latih lebih banyak? +- Seberapa nyaman Anda merasa berkontribusi pada proyek orang lain? + +```mermaid +mindmap + root((Git Collaboration)) + Branching + Feature branches + Bug fix branches + Experimental work + Pull Requests + Code review + Discussion + Testing + Best Practices + Clear commit messages + Small focused changes + Good documentation +``` -1. **Buka PR**. Selanjutnya, Anda ingin membuka PR. Anda melakukannya dengan menavigasi ke repositori yang telah Anda fork di GitHub. Anda akan melihat indikasi di GitHub di mana ia bertanya apakah Anda ingin membuat PR baru, Anda klik itu dan Anda dibawa ke antarmuka di mana Anda dapat mengubah judul pesan commit, memberikan deskripsi yang lebih sesuai. Sekarang pemelihara repositori yang Anda fork akan melihat PR ini dan _semoga_ mereka menghargai dan _menggabungkan_ PR Anda. Anda sekarang adalah kontributor, yay :) +> **Peningkat kepercayaan diri**: Setiap pengembang yang Anda kagumi pernah merasa gugup tentang pull request pertama mereka. Komunitas GitHub sangat ramah kepada pendatang baru! + +1. **Buka PR**. Selanjutnya, Anda ingin membuka PR. Anda melakukannya dengan menavigasi ke repo yang di-fork di GitHub. Anda akan melihat indikasi di GitHub di mana ia bertanya apakah Anda ingin membuat PR baru, Anda klik itu dan Anda dibawa ke antarmuka di mana Anda dapat mengubah judul pesan komit, memberikan deskripsi yang lebih sesuai. Sekarang pemelihara repo yang Anda fork akan melihat PR ini dan _semoga_ mereka akan menghargai dan _menggabungkan_ PR Anda. Anda sekarang adalah kontributor, yay :) 💡 **Tip Modern**: Anda juga dapat membuat PR menggunakan GitHub CLI: ```bash @@ -443,45 +555,65 @@ Mari kita melalui alur kerja kontributor. Anggaplah kontributor telah _fork_ dan - Minta reviewer tertentu - Gunakan PR draft untuk pekerjaan yang sedang berlangsung - Pastikan semua pemeriksaan CI lulus sebelum meminta review - -1. **Bersihkan**. Dianggap sebagai praktik yang baik untuk _membersihkan_ setelah Anda berhasil menggabungkan PR. Anda ingin membersihkan baik cabang lokal Anda maupun cabang yang Anda dorong ke GitHub. Pertama, hapus secara lokal dengan perintah berikut: +1. **Bersihkan**. Merupakan praktik yang baik untuk _membersihkan_ setelah Anda berhasil menggabungkan PR. Anda perlu membersihkan cabang lokal Anda dan cabang yang Anda dorong ke GitHub. Pertama, hapus cabang lokal dengan perintah berikut: ```bash git branch -d [branch-name] ``` - Pastikan Anda pergi ke halaman GitHub untuk repositori yang telah Anda fork dan hapus cabang remote yang baru saja Anda dorong ke sana. + Pastikan Anda pergi ke halaman GitHub untuk repo yang telah di-fork dan hapus cabang remote yang baru saja Anda dorong. -`Pull request` terdengar seperti istilah yang aneh karena sebenarnya Anda ingin mendorong perubahan Anda ke proyek. Tetapi pemelihara (pemilik proyek) atau tim inti perlu mempertimbangkan perubahan Anda sebelum menggabungkannya dengan cabang "main" proyek, jadi Anda sebenarnya meminta keputusan perubahan dari pemelihara. +`Pull request` mungkin terdengar seperti istilah yang aneh karena sebenarnya Anda ingin mendorong perubahan Anda ke proyek. Namun, pemelihara (pemilik proyek) atau tim inti perlu mempertimbangkan perubahan Anda sebelum menggabungkannya dengan cabang "main" proyek, jadi Anda sebenarnya meminta keputusan perubahan dari pemelihara. -Pull request adalah tempat untuk membandingkan dan mendiskusikan perbedaan yang diperkenalkan pada cabang dengan ulasan, komentar, tes terintegrasi, dan lainnya. Pull request yang baik mengikuti aturan yang kurang lebih sama seperti pesan commit. Anda dapat menambahkan referensi ke masalah di pelacak masalah, ketika pekerjaan Anda misalnya memperbaiki suatu masalah. Ini dilakukan dengan menggunakan `#` diikuti oleh nomor masalah Anda. Misalnya `#97`. -🤞Semoga semua pemeriksaan berhasil dan pemilik proyek menyetujui perubahan yang kamu buat ke dalam proyek🤞 +Pull request adalah tempat untuk membandingkan dan mendiskusikan perbedaan yang diperkenalkan pada cabang dengan ulasan, komentar, tes terintegrasi, dan lainnya. Pull request yang baik mengikuti aturan yang kurang lebih sama seperti pesan commit. Anda dapat menambahkan referensi ke sebuah isu di pelacak isu, misalnya ketika pekerjaan Anda memperbaiki sebuah isu. Ini dilakukan dengan menggunakan `#` diikuti oleh nomor isu Anda. Contohnya `#97`. -Perbarui cabang kerja lokalmu saat ini dengan semua commit baru dari cabang remote yang sesuai di GitHub: - -`git pull` +🤞Semoga semua pemeriksaan lulus dan pemilik proyek menggabungkan perubahan Anda ke dalam proyek🤞 -## Berkontribusi pada Open Source (Kesempatanmu untuk Memberikan Dampak!) +Perbarui cabang kerja lokal Anda saat ini dengan semua commit baru dari cabang remote yang sesuai di GitHub: -Siap untuk sesuatu yang akan benar-benar membuatmu takjub? 🤯 Mari kita bicara tentang berkontribusi pada proyek open source – dan aku merinding hanya dengan memikirkan untuk berbagi ini denganmu! - -Ini adalah kesempatanmu untuk menjadi bagian dari sesuatu yang luar biasa. Bayangkan memperbaiki alat yang digunakan jutaan pengembang setiap hari, atau memperbaiki bug di aplikasi yang disukai teman-temanmu. Itu bukan hanya mimpi – itulah yang dimaksud dengan kontribusi open source! - -Inilah yang selalu membuatku merinding setiap kali memikirkannya: setiap alat yang telah kamu pelajari – editor kode, framework yang akan kita eksplorasi, bahkan browser tempat kamu membaca ini – semuanya dimulai dari seseorang seperti kamu yang membuat kontribusi pertama mereka. Pengembang brilian yang membuat ekstensi VS Code favoritmu? Mereka dulu adalah pemula yang mengklik "create pull request" dengan tangan gemetar, persis seperti yang akan kamu lakukan. +`git pull` -Dan inilah bagian yang paling indah: komunitas open source itu seperti pelukan besar di internet. Sebagian besar proyek secara aktif mencari pendatang baru dan memiliki masalah yang diberi tag "good first issue" khusus untuk orang-orang seperti kamu! Para pemelihara proyek benar-benar bersemangat ketika melihat kontributor baru karena mereka ingat langkah pertama mereka sendiri. +## Berkontribusi pada Open Source (Kesempatan Anda untuk Memberi Dampak!) + +Siap untuk sesuatu yang akan benar-benar mengejutkan Anda? 🤯 Mari kita bicara tentang berkontribusi pada proyek open source – dan saya merinding hanya memikirkan untuk berbagi ini dengan Anda! + +Ini adalah kesempatan Anda untuk menjadi bagian dari sesuatu yang benar-benar luar biasa. Bayangkan memperbaiki alat yang digunakan jutaan pengembang setiap hari, atau memperbaiki bug di aplikasi yang disukai teman-teman Anda. Itu bukan hanya mimpi – itulah yang dimaksud dengan kontribusi open source! + +Inilah yang membuat saya merinding setiap kali memikirkannya: setiap alat yang Anda pelajari – editor kode Anda, framework yang akan kita eksplorasi, bahkan browser tempat Anda membaca ini – dimulai dengan seseorang persis seperti Anda yang membuat kontribusi pertama mereka. Pengembang brilian yang membangun ekstensi VS Code favorit Anda? Mereka dulu pemula yang mengklik "create pull request" dengan tangan gemetar, persis seperti yang akan Anda lakukan. + +Dan inilah bagian yang paling indah: komunitas open source seperti pelukan terbesar di internet. Sebagian besar proyek secara aktif mencari pendatang baru dan memiliki isu yang diberi label "good first issue" khusus untuk orang seperti Anda! Pemelihara benar-benar bersemangat ketika mereka melihat kontributor baru karena mereka ingat langkah pertama mereka sendiri. + +```mermaid +flowchart TD + A[🔍 Explore GitHub] --> B[🏷️ Find "good first issue"] + B --> C[📖 Read Contributing Guidelines] + C --> D[🍴 Fork Repository] + D --> E[💻 Set Up Local Environment] + E --> F[🌿 Create Feature Branch] + F --> G[✨ Make Your Contribution] + G --> H[🧪 Test Your Changes] + H --> I[📝 Write Clear Commit] + I --> J[📤 Push & Create PR] + J --> K[💬 Engage with Feedback] + K --> L[🎉 Merged! You're a Contributor!] + L --> M[🌟 Find Next Issue] + + style A fill:#e1f5fe + style L fill:#c8e6c9 + style M fill:#fff59d +``` -Kamu tidak hanya belajar coding di sini – kamu sedang mempersiapkan diri untuk bergabung dengan keluarga global pembangun yang setiap hari bangun dengan berpikir "Bagaimana kita bisa membuat dunia digital menjadi sedikit lebih baik?" Selamat datang di klub! 🌟 +Anda tidak hanya belajar kode di sini – Anda sedang mempersiapkan diri untuk bergabung dengan keluarga global pembangun yang bangun setiap hari dengan berpikir "Bagaimana kita bisa membuat dunia digital sedikit lebih baik?" Selamat datang di klub! 🌟 -Pertama, mari kita cari repositori (atau **repo**) di GitHub yang menarik minatmu dan ingin kamu kontribusikan perubahan. Kamu perlu menyalin kontennya ke mesinmu. +Pertama, mari kita temukan repositori (atau **repo**) di GitHub yang menarik bagi Anda dan ingin Anda kontribusikan perubahan. Anda akan ingin menyalin kontennya ke mesin Anda. -✅ Cara yang baik untuk menemukan repo yang ramah pemula adalah dengan [mencari tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). +✅ Cara yang baik untuk menemukan repo yang 'ramah pemula' adalah dengan [mencari berdasarkan tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). ![Salin repo secara lokal](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.id.png) -Ada beberapa cara untuk menyalin kode. Salah satunya adalah dengan "mengkloning" konten repositori, menggunakan HTTPS, SSH, atau menggunakan GitHub CLI (Command Line Interface). +Ada beberapa cara untuk menyalin kode. Salah satu caranya adalah "mengkloning" konten repositori, menggunakan HTTPS, SSH, atau menggunakan GitHub CLI (Command Line Interface). -Buka terminalmu dan kloning repositori seperti ini: +Buka terminal Anda dan kloning repositori seperti ini: ```bash # Using HTTPS git clone https://github.com/ProjectURL @@ -493,95 +625,155 @@ git clone git@github.com:username/repository.git gh repo clone username/repository ``` -Untuk bekerja pada proyek, pindah ke folder yang sesuai: +Untuk bekerja pada proyek, pindah ke folder yang benar: `cd ProjectURL` -Kamu juga bisa membuka seluruh proyek menggunakan: +Anda juga dapat membuka seluruh proyek menggunakan: - **[GitHub Codespaces](https://github.com/features/codespaces)** - Lingkungan pengembangan cloud GitHub dengan VS Code di browser - **[GitHub Desktop](https://desktop.github.com/)** - Aplikasi GUI untuk operasi Git - **[GitHub.dev](https://github.dev)** - Tekan tombol `.` pada repo GitHub mana pun untuk membuka VS Code di browser - **VS Code** dengan ekstensi GitHub Pull Requests -Terakhir, kamu bisa mengunduh kode dalam folder yang dikompresi. +Terakhir, Anda dapat mengunduh kode dalam folder yang dikompresi. ### Beberapa hal menarik tentang GitHub -Kamu bisa memberi bintang, mengikuti, dan/atau "fork" repositori publik mana pun di GitHub. Kamu bisa menemukan repositori yang kamu beri bintang di menu drop-down kanan atas. Ini seperti menandai, tapi untuk kode. +Anda dapat memberi bintang, menonton, dan/atau "fork" repositori publik mana pun di GitHub. Anda dapat menemukan repositori yang Anda beri bintang di menu drop-down kanan atas. Ini seperti menandai, tetapi untuk kode. -Proyek memiliki pelacak masalah, biasanya di GitHub pada tab "Issues" kecuali dinyatakan lain, tempat orang-orang mendiskusikan masalah terkait proyek. Dan tab Pull Requests adalah tempat orang-orang mendiskusikan dan meninjau perubahan yang sedang berlangsung. +Proyek memiliki pelacak isu, biasanya di GitHub di tab "Issues" kecuali dinyatakan lain, tempat orang-orang mendiskusikan isu terkait proyek. Dan tab Pull Requests adalah tempat orang-orang mendiskusikan dan meninjau perubahan yang sedang berlangsung. -Proyek juga mungkin memiliki diskusi di forum, milis, atau saluran obrolan seperti Slack, Discord, atau IRC. +Proyek mungkin juga memiliki diskusi di forum, milis, atau saluran obrolan seperti Slack, Discord, atau IRC. 🔧 **Fitur modern GitHub**: -- **Diskusi GitHub** - Forum bawaan untuk percakapan komunitas +- **GitHub Discussions** - Forum bawaan untuk percakapan komunitas - **GitHub Sponsors** - Mendukung pemelihara secara finansial -- **Tab Keamanan** - Laporan kerentanan dan saran keamanan +- **Tab Security** - Laporan kerentanan dan saran keamanan - **Tab Actions** - Lihat alur kerja otomatis dan pipeline CI/CD - **Tab Insights** - Analitik tentang kontributor, commit, dan kesehatan proyek - **Tab Projects** - Alat manajemen proyek bawaan GitHub -✅ Jelajahi repo GitHub barumu dan coba beberapa hal, seperti mengedit pengaturan, menambahkan informasi ke repo, membuat proyek (seperti papan Kanban), dan mengatur GitHub Actions untuk otomatisasi. Ada banyak hal yang bisa kamu lakukan! +✅ Jelajahi repo GitHub baru Anda dan coba beberapa hal, seperti mengedit pengaturan, menambahkan informasi ke repo Anda, membuat proyek (seperti papan Kanban), dan mengatur GitHub Actions untuk otomatisasi. Ada banyak yang bisa Anda lakukan! --- ## 🚀 Tantangan -Baiklah, saatnya menguji kemampuan GitHub barumu yang cemerlang! 🚀 Berikut adalah tantangan yang akan membuat semuanya terasa sangat memuaskan: +Baiklah, saatnya menguji kekuatan GitHub baru Anda! 🚀 Berikut adalah tantangan yang akan membuat semuanya terasa sangat memuaskan: -Ajak seorang teman (atau anggota keluarga yang selalu bertanya apa yang kamu lakukan dengan semua "hal komputer" ini) dan mulailah petualangan coding kolaboratif bersama! Di sinilah keajaiban nyata terjadi – buat proyek, biarkan mereka fork, buat beberapa cabang, dan gabungkan perubahan seperti profesional yang sedang kamu latih. +Ajak seorang teman (atau anggota keluarga yang selalu bertanya apa yang Anda lakukan dengan semua "hal komputer" ini) dan lakukan petualangan coding kolaboratif bersama! Di sinilah keajaiban nyata terjadi – buat proyek, biarkan mereka fork, buat beberapa cabang, dan gabungkan perubahan seperti profesional yang sedang Anda menjadi. -Aku tidak akan berbohong – kamu mungkin akan tertawa di beberapa titik (terutama saat kalian berdua mencoba mengubah baris yang sama), mungkin menggaruk kepala karena bingung, tetapi kamu pasti akan memiliki momen "aha!" yang luar biasa yang membuat semua pembelajaran ini sepadan. Plus, ada sesuatu yang istimewa tentang berbagi keberhasilan merge pertama dengan orang lain – ini seperti perayaan kecil tentang sejauh mana kamu telah berkembang! +Saya tidak akan berbohong – Anda mungkin akan tertawa di suatu saat (terutama ketika Anda berdua mencoba mengubah baris yang sama), mungkin menggaruk kepala Anda karena bingung, tetapi Anda pasti akan memiliki momen "aha!" yang luar biasa yang membuat semua pembelajaran ini berharga. Plus, ada sesuatu yang istimewa tentang berbagi penggabungan pertama yang sukses dengan orang lain – ini seperti perayaan kecil atas seberapa jauh Anda telah melangkah! -Belum punya teman coding? Tidak masalah! Komunitas GitHub penuh dengan orang-orang yang sangat ramah yang ingat bagaimana rasanya menjadi pemula. Cari repositori dengan label "good first issue" – mereka pada dasarnya mengatakan "Hei pemula, ayo belajar bersama kami!" Betapa kerennya itu? +Belum punya teman coding? Tidak masalah sama sekali! Komunitas GitHub penuh dengan orang-orang yang sangat ramah yang ingat bagaimana rasanya menjadi baru. Cari repositori dengan label "good first issue" – mereka pada dasarnya mengatakan "Hei pemula, mari belajar bersama kami!" Betapa kerennya itu? ## Kuis Pasca-Kuliah [Kuis pasca-kuliah](https://ff-quizzes.netlify.app/web/en/) -## Tinjauan & Terus Belajar +## Tinjau & Terus Belajar -Wah! 🎉 Lihat dirimu – kamu baru saja menaklukkan dasar-dasar GitHub seperti seorang juara sejati! Jika otakmu terasa sedikit penuh sekarang, itu sangat normal dan jujur adalah tanda yang baik. Kamu baru saja mempelajari alat-alat yang membutuhkan waktu berminggu-minggu untuk aku pahami saat pertama kali memulai. +Wah! 🎉 Lihat Anda – Anda baru saja menaklukkan dasar-dasar GitHub seperti seorang juara sejati! Jika otak Anda terasa sedikit penuh sekarang, itu sepenuhnya normal dan jujur merupakan tanda yang baik. Anda baru saja mempelajari alat yang membutuhkan waktu berminggu-minggu untuk saya merasa nyaman saat saya mulai. -Git dan GitHub sangatlah kuat (serius, sangat kuat), dan setiap pengembang yang aku kenal – termasuk mereka yang sekarang terlihat seperti penyihir – harus berlatih dan tersandung sedikit sebelum semuanya terasa klik. Fakta bahwa kamu telah menyelesaikan pelajaran ini berarti kamu sudah berada di jalur untuk menguasai beberapa alat terpenting dalam toolkit seorang pengembang. +Git dan GitHub sangat kuat (serius, sangat kuat), dan setiap pengembang yang saya kenal – termasuk yang sekarang terlihat seperti penyihir – harus berlatih dan tersandung sedikit sebelum semuanya klik. Fakta bahwa Anda telah menyelesaikan pelajaran ini berarti Anda sudah dalam perjalanan untuk menguasai beberapa alat terpenting dalam toolkit pengembang. -Berikut adalah beberapa sumber yang sangat fantastis untuk membantumu berlatih dan menjadi lebih hebat lagi: +Berikut adalah beberapa sumber daya yang sangat fantastis untuk membantu Anda berlatih dan menjadi lebih hebat lagi: -- [Panduan berkontribusi pada perangkat lunak open source](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – Peta jalanmu untuk memberikan dampak +- [Panduan berkontribusi pada perangkat lunak open source](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – Peta jalan Anda untuk membuat perbedaan - [Cheatsheet Git](https://training.github.com/downloads/github-git-cheat-sheet/) – Simpan ini untuk referensi cepat! -Dan ingat: latihan membuat kemajuan, bukan kesempurnaan! Semakin sering kamu menggunakan Git dan GitHub, semakin alami rasanya. GitHub telah membuat beberapa kursus interaktif yang luar biasa yang memungkinkanmu berlatih di lingkungan yang aman: +Dan ingat: latihan membuat kemajuan, bukan kesempurnaan! Semakin sering Anda menggunakan Git dan GitHub, semakin alami rasanya. GitHub telah membuat beberapa kursus interaktif yang luar biasa yang memungkinkan Anda berlatih di lingkungan yang aman: - [Pengantar GitHub](https://github.com/skills/introduction-to-github) - [Berkomunikasi menggunakan Markdown](https://github.com/skills/communicate-using-markdown) - [GitHub Pages](https://github.com/skills/github-pages) -- [Mengelola konflik merge](https://github.com/skills/resolve-merge-conflicts) +- [Mengelola konflik penggabungan](https://github.com/skills/resolve-merge-conflicts) **Merasa petualang? Coba alat modern ini:** -- [Dokumentasi GitHub CLI](https://cli.github.com/manual/) – Untuk saat kamu ingin merasa seperti penyihir command-line -- [Dokumentasi GitHub Codespaces](https://docs.github.com/en/codespaces) – Coding di cloud! +- [Dokumentasi GitHub CLI](https://cli.github.com/manual/) – Untuk saat Anda ingin merasa seperti penyihir command-line +- [Dokumentasi GitHub Codespaces](https://docs.github.com/en/codespaces) – Kode di cloud! - [Dokumentasi GitHub Actions](https://docs.github.com/en/actions) – Otomatiskan semuanya -- [Praktik terbaik Git](https://www.atlassian.com/git/tutorials/comparing-workflows) – Tingkatkan permainan alur kerjamu +- [Praktik terbaik Git](https://www.atlassian.com/git/tutorials/comparing-workflows) – Tingkatkan permainan alur kerja Anda ## Tantangan Agen GitHub Copilot 🚀 Gunakan mode Agen untuk menyelesaikan tantangan berikut: -**Deskripsi:** Buat proyek pengembangan web kolaboratif yang menunjukkan alur kerja GitHub lengkap yang telah kamu pelajari dalam pelajaran ini. Tantangan ini akan membantumu berlatih pembuatan repositori, fitur kolaborasi, dan alur kerja Git modern dalam skenario dunia nyata. +**Deskripsi:** Buat proyek pengembangan web kolaboratif yang menunjukkan alur kerja GitHub lengkap yang telah Anda pelajari dalam pelajaran ini. Tantangan ini akan membantu Anda berlatih pembuatan repositori, fitur kolaborasi, dan alur kerja Git modern dalam skenario dunia nyata. -**Prompt:** Buat repositori GitHub publik baru untuk proyek sederhana "Sumber Daya Pengembangan Web". Repositori harus mencakup file README.md yang terstruktur dengan baik yang mencantumkan alat dan sumber daya pengembangan web yang berguna, diorganisasi berdasarkan kategori (HTML, CSS, JavaScript, dll.). Atur repositori dengan standar komunitas yang tepat termasuk lisensi, panduan kontribusi, dan kode etik. Buat setidaknya dua cabang fitur: satu untuk menambahkan sumber daya CSS dan satu lagi untuk sumber daya JavaScript. Lakukan commit ke setiap cabang dengan pesan commit yang deskriptif, lalu buat pull request untuk menggabungkan perubahan kembali ke main. Aktifkan fitur GitHub seperti Issues, Discussions, dan atur alur kerja GitHub Actions dasar untuk pemeriksaan otomatis. +**Prompt:** Buat repositori GitHub publik baru untuk proyek "Sumber Daya Pengembangan Web" sederhana. Repositori harus mencakup file README.md yang terstruktur dengan baik yang mencantumkan alat dan sumber daya pengembangan web yang berguna, diorganisasikan berdasarkan kategori (HTML, CSS, JavaScript, dll.). Atur repositori dengan standar komunitas yang tepat termasuk lisensi, panduan kontribusi, dan kode etik. Buat setidaknya dua cabang fitur: satu untuk menambahkan sumber daya CSS dan satu lagi untuk sumber daya JavaScript. Lakukan commit ke setiap cabang dengan pesan commit yang deskriptif, lalu buat pull request untuk menggabungkan perubahan kembali ke main. Aktifkan fitur GitHub seperti Issues, Discussions, dan atur alur kerja GitHub Actions dasar untuk pemeriksaan otomatis. ## Tugas -Misi kamu, jika kamu memilih untuk menerimanya: Selesaikan kursus [Pengantar GitHub](https://github.com/skills/introduction-to-github) di GitHub Skills. Kursus interaktif ini akan memungkinkanmu berlatih semua yang telah kamu pelajari di lingkungan yang aman dan terarah. Plus, kamu akan mendapatkan lencana keren saat selesai! 🏅 +Misi Anda, jika Anda memilih untuk menerimanya: Selesaikan kursus [Pengantar GitHub](https://github.com/skills/introduction-to-github) di GitHub Skills. Kursus interaktif ini akan memungkinkan Anda berlatih semua yang telah Anda pelajari di lingkungan yang aman dan terarah. Plus, Anda akan mendapatkan lencana keren saat selesai! 🏅 -**Siap untuk tantangan lebih lanjut?** -- Atur autentikasi SSH untuk akun GitHub-mu (tidak perlu lagi kata sandi!) -- Coba gunakan GitHub CLI untuk operasi Git harianmu +**Merasa siap untuk tantangan lebih lanjut?** +- Atur otentikasi SSH untuk akun GitHub Anda (tidak perlu lagi kata sandi!) +- Coba gunakan GitHub CLI untuk operasi Git harian Anda - Buat repositori dengan alur kerja GitHub Actions - Jelajahi GitHub Codespaces dengan membuka repositori ini di editor berbasis cloud -Ingat: setiap ahli dulunya adalah pemula. Kamu pasti bisa! 💪 +--- + +## 🚀 Garis Waktu Penguasaan GitHub Anda + +### ⚡ **Apa yang Dapat Anda Lakukan dalam 5 Menit Berikutnya** +- [ ] Beri bintang pada repositori ini dan 3 proyek lain yang menarik bagi Anda +- [ ] Atur otentikasi dua faktor pada akun GitHub Anda +- [ ] Buat README sederhana untuk repositori pertama Anda +- [ ] Ikuti 5 pengembang yang pekerjaannya menginspirasi Anda + +### 🎯 **Apa yang Dapat Anda Capai dalam Satu Jam** +- [ ] Selesaikan kuis pasca-pelajaran dan refleksikan perjalanan GitHub Anda +- [ ] Atur kunci SSH untuk otentikasi GitHub tanpa kata sandi +- [ ] Buat commit pertama Anda yang bermakna dengan pesan commit yang hebat +- [ ] Jelajahi tab "Explore" GitHub untuk menemukan proyek yang sedang tren +- [ ] Latih fork repositori dan buat perubahan kecil + +### 📅 **Petualangan GitHub Anda Selama Seminggu** +- [ ] Selesaikan kursus GitHub Skills (Pengantar GitHub, Markdown) +- [ ] Buat pull request pertama Anda ke proyek open source +- [ ] Atur situs GitHub Pages untuk memamerkan pekerjaan Anda +- [ ] Bergabunglah dengan Diskusi GitHub pada proyek yang Anda minati +- [ ] Buat repositori dengan standar komunitas yang tepat (README, Lisensi, dll.) +- [ ] Coba GitHub Codespaces untuk pengembangan berbasis cloud + +### 🌟 **Transformasi Anda Selama Sebulan** +- [ ] Berkontribusi pada 3 proyek open source yang berbeda +- [ ] Mentor seseorang yang baru di GitHub (berikan kembali!) +- [ ] Atur alur kerja otomatis dengan GitHub Actions +- [ ] Bangun portofolio yang menampilkan kontribusi GitHub Anda +- [ ] Ikuti Hacktoberfest atau acara komunitas serupa +- [ ] Menjadi pemelihara proyek Anda sendiri yang dikontribusikan oleh orang lain + +### 🎓 **Pemeriksaan Akhir Penguasaan GitHub Anda** + +**Rayakan sejauh mana Anda telah melangkah:** +- Apa hal favorit Anda tentang menggunakan GitHub? +- Fitur kolaborasi mana yang paling membuat Anda bersemangat? +- Seberapa percaya diri Anda merasa tentang berkontribusi pada open source sekarang? +- Proyek pertama apa yang ingin Anda kontribusikan? + +```mermaid +journey + title Your GitHub Confidence Journey + section Today + Nervous: 3: You + Curious: 4: You + Excited: 5: You + section This Week + Practicing: 4: You + Contributing: 5: You + Connecting: 5: You + section Next Month + Collaborating: 5: You + Leading: 5: You + Inspiring Others: 5: You +``` + +> 🌍 **Selamat datang di komunitas pengembang global!** Anda sekarang memiliki alat untuk berkolaborasi dengan jutaan pengembang di seluruh dunia. Kontribusi pertama Anda mungkin tampak kecil, tetapi ingat - setiap proyek open source besar dimulai dengan seseorang yang membuat commit pertama mereka. Pertanyaannya bukan apakah Anda akan memberi dampak, tetapi proyek luar biasa apa yang akan mendapat manfaat dari perspektif unik Anda pertama kali! 🚀 + +Ingat: setiap ahli dulunya adalah pemula. Anda pasti bisa! 💪 --- **Penafian**: -Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diketahui bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang penting, disarankan menggunakan jasa penerjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang timbul dari penggunaan terjemahan ini. \ No newline at end of file +Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diketahui bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang penting, disarankan menggunakan jasa penerjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau interpretasi yang keliru yang timbul dari penggunaan terjemahan ini. \ No newline at end of file diff --git a/translations/id/1-getting-started-lessons/3-accessibility/README.md b/translations/id/1-getting-started-lessons/3-accessibility/README.md index 601bdf7e4c..72374a7fbc 100644 --- a/translations/id/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/id/1-getting-started-lessons/3-accessibility/README.md @@ -1,31 +1,73 @@ -# Membuat Halaman Web yang Mudah Diakses +# Membuat Halaman Web yang Dapat Diakses ![Semua Tentang Aksesibilitas](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.id.png) > Sketchnote oleh [Tomomi Imura](https://twitter.com/girlie_mac) -## Kuis Pra-Pelajaran -[Kuis pra-pelajaran](https://ff-quizzes.netlify.app/web/) +```mermaid +journey + title Your Accessibility Learning Adventure + section Foundation + Understanding Users: 5: You + Testing Tools: 4: You + POUR Principles: 5: You + section Build Skills + Semantic HTML: 4: You + Visual Design: 5: You + ARIA Techniques: 4: You + section Master Practice + Keyboard Navigation: 5: You + Form Accessibility: 4: You + Real-world Testing: 5: You +``` + +## Kuis Sebelum Pelajaran +[Kuis sebelum pelajaran](https://ff-quizzes.netlify.app/web/) > Kekuatan Web terletak pada universalitasnya. Akses oleh semua orang, terlepas dari disabilitas, adalah aspek yang penting. > > \- Sir Timothy Berners-Lee, Direktur W3C dan penemu World Wide Web -Ada sesuatu yang mungkin mengejutkan Anda: saat Anda membangun situs web yang mudah diakses, Anda tidak hanya membantu orang dengan disabilitas—Anda sebenarnya membuat web lebih baik untuk semua orang! +Ada sesuatu yang mungkin mengejutkan Anda: saat Anda membangun situs web yang dapat diakses, Anda tidak hanya membantu orang dengan disabilitas—Anda sebenarnya membuat web lebih baik untuk semua orang! + +Pernah melihat potongan trotoar di sudut jalan? Awalnya dirancang untuk kursi roda, tetapi sekarang membantu orang dengan kereta bayi, pekerja pengiriman dengan troli, pelancong dengan koper beroda, dan pengendara sepeda juga. Begitulah cara desain web yang dapat diakses bekerja—solusi yang membantu satu kelompok sering kali akhirnya bermanfaat bagi semua orang. Keren, kan? -Pernahkah Anda memperhatikan potongan trotoar di sudut jalan? Awalnya dirancang untuk kursi roda, tetapi sekarang membantu orang dengan kereta bayi, pekerja pengiriman dengan troli, pelancong dengan koper beroda, dan pengendara sepeda juga. Begitulah cara desain web yang mudah diakses bekerja—solusi yang membantu satu kelompok sering kali akhirnya bermanfaat bagi semua orang. Keren, kan? +Dalam pelajaran ini, kita akan menjelajahi cara membuat situs web yang benar-benar bekerja untuk semua orang, tidak peduli bagaimana mereka menjelajahi web. Anda akan menemukan teknik praktis yang sudah terintegrasi dalam standar web, mencoba alat pengujian, dan melihat bagaimana aksesibilitas membuat situs Anda lebih mudah digunakan oleh semua pengguna. -Dalam pelajaran ini, kita akan menjelajahi cara membuat situs web yang benar-benar berfungsi untuk semua orang, tidak peduli bagaimana mereka menjelajahi web. Anda akan menemukan teknik praktis yang sudah terintegrasi dalam standar web, mencoba alat pengujian, dan melihat bagaimana aksesibilitas membuat situs Anda lebih mudah digunakan oleh semua pengguna. +Pada akhir pelajaran ini, Anda akan memiliki kepercayaan diri untuk menjadikan aksesibilitas sebagai bagian alami dari alur kerja pengembangan Anda. Siap menjelajahi bagaimana pilihan desain yang bijaksana dapat membuka web untuk miliaran pengguna? Mari kita mulai! -Pada akhir pelajaran ini, Anda akan memiliki kepercayaan diri untuk menjadikan aksesibilitas sebagai bagian alami dari alur kerja pengembangan Anda. Siap untuk menjelajahi bagaimana pilihan desain yang bijaksana dapat membuka web untuk miliaran pengguna? Mari kita mulai! +```mermaid +mindmap + root((Web Accessibility)) + Users + Screen readers + Keyboard navigation + Voice control + Magnification + Technologies + HTML semantics + ARIA attributes + CSS focus indicators + Keyboard events + Benefits + Wider audience + Better SEO + Legal compliance + Universal design + Testing + Automated tools + Manual testing + User feedback + Real assistive tech +``` > Anda dapat mengikuti pelajaran ini di [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! @@ -33,13 +75,13 @@ Pada akhir pelajaran ini, Anda akan memiliki kepercayaan diri untuk menjadikan a Sebelum kita mulai coding, mari luangkan waktu untuk memahami bagaimana orang dengan kemampuan berbeda benar-benar mengalami web. Ini bukan hanya teori—memahami pola navigasi dunia nyata ini akan membuat Anda menjadi pengembang yang jauh lebih baik! -Teknologi bantu adalah alat yang luar biasa yang membantu orang dengan disabilitas berinteraksi dengan situs web dengan cara yang mungkin mengejutkan Anda. Setelah Anda memahami cara kerja teknologi ini, menciptakan pengalaman web yang mudah diakses menjadi jauh lebih intuitif. Ini seperti belajar melihat kode Anda melalui mata orang lain. +Teknologi bantu adalah alat yang luar biasa yang membantu orang dengan disabilitas berinteraksi dengan situs web dengan cara yang mungkin mengejutkan Anda. Setelah Anda memahami cara kerja teknologi ini, menciptakan pengalaman web yang dapat diakses menjadi jauh lebih intuitif. Ini seperti belajar melihat kode Anda melalui mata orang lain. ### Pembaca layar -[Pembaca layar](https://en.wikipedia.org/wiki/Screen_reader) adalah teknologi canggih yang mengubah teks digital menjadi output suara atau braille. Meskipun terutama digunakan oleh orang dengan gangguan penglihatan, mereka juga sangat membantu bagi pengguna dengan gangguan belajar seperti disleksia. +[Pembaca layar](https://en.wikipedia.org/wiki/Screen_reader) adalah teknologi canggih yang mengubah teks digital menjadi output suara atau braille. Meskipun terutama digunakan oleh orang dengan gangguan penglihatan, mereka juga sangat membantu bagi pengguna dengan disabilitas belajar seperti disleksia. -Saya suka menganggap pembaca layar seperti narator yang sangat pintar yang membacakan buku untuk Anda. Ia membaca konten dengan suara keras dalam urutan logis, mengumumkan elemen interaktif seperti "tombol" atau "tautan," dan menyediakan pintasan keyboard untuk berpindah-pindah halaman. Tapi inilah masalahnya—pembaca layar hanya bisa bekerja dengan baik jika kita membangun situs web dengan struktur yang tepat dan konten yang bermakna. Di sinilah peran Anda sebagai pengembang! +Saya suka menganggap pembaca layar seperti memiliki narator yang sangat pintar membaca buku untuk Anda. Ia membaca konten dengan suara keras dalam urutan logis, mengumumkan elemen interaktif seperti "tombol" atau "tautan," dan menyediakan pintasan keyboard untuk melompat-lompat di halaman. Tapi inilah masalahnya—pembaca layar hanya bisa bekerja dengan baik jika kita membangun situs web dengan struktur yang tepat dan konten yang bermakna. Di sinilah peran Anda sebagai pengembang! **Pembaca layar populer di berbagai platform:** - **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (gratis dan paling populer), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (bawaan) @@ -49,39 +91,47 @@ Saya suka menganggap pembaca layar seperti narator yang sangat pintar yang memba **Cara pembaca layar menavigasi konten web:** -Pembaca layar menyediakan beberapa metode navigasi yang membuat browsing efisien bagi pengguna berpengalaman: -- **Membaca berurutan**: Membaca konten dari atas ke bawah, seperti membaca buku +Pembaca layar menyediakan beberapa metode navigasi yang membuat penjelajahan efisien bagi pengguna berpengalaman: +- **Pembacaan berurutan**: Membaca konten dari atas ke bawah, seperti membaca buku - **Navigasi landmark**: Melompat antar bagian halaman (header, nav, main, footer) - **Navigasi heading**: Melompat antar heading untuk memahami struktur halaman - **Daftar tautan**: Menghasilkan daftar semua tautan untuk akses cepat -- **Kontrol formulir**: Langsung menavigasi antar bidang input dan tombol +- **Kontrol formulir**: Menavigasi langsung antar bidang input dan tombol -> 💡 **Ini sesuatu yang mengejutkan saya**: 68% pengguna pembaca layar terutama menavigasi dengan heading ([Survei WebAIM](https://webaim.org/projects/screenreadersurvey9/#finding)). Ini berarti struktur heading Anda seperti peta jalan bagi pengguna—ketika Anda melakukannya dengan benar, Anda benar-benar membantu orang menemukan jalan mereka di sekitar konten Anda dengan lebih cepat! +> 💡 **Ini yang mengejutkan saya**: 68% pengguna pembaca layar menavigasi terutama melalui heading ([Survei WebAIM](https://webaim.org/projects/screenreadersurvey9/#finding)). Ini berarti struktur heading Anda seperti peta jalan bagi pengguna—ketika Anda melakukannya dengan benar, Anda benar-benar membantu orang menemukan jalan mereka di sekitar konten Anda lebih cepat! ### Membangun alur kerja pengujian Anda -Berita baiknya adalah—pengujian aksesibilitas yang efektif tidak harus membingungkan! Anda akan ingin menggabungkan alat otomatis (mereka hebat dalam menangkap masalah yang jelas) dengan beberapa pengujian langsung. Berikut pendekatan sistematis yang menurut saya menangkap sebagian besar masalah tanpa memakan waktu seharian: +Berita baik—pengujian aksesibilitas yang efektif tidak harus membingungkan! Anda akan ingin menggabungkan alat otomatis (mereka sangat bagus untuk menangkap masalah yang jelas) dengan beberapa pengujian langsung. Berikut pendekatan sistematis yang menurut saya menangkap sebagian besar masalah tanpa memakan waktu seharian: **Alur kerja pengujian manual yang penting:** ```mermaid -graph TD - A[Start Testing] --> B{Keyboard Navigation} +flowchart TD + A[🚀 Start Testing] --> B{⌨️ Keyboard Navigation} B --> C[Tab through all interactive elements] - C --> D{Screen Reader Testing} + C --> D{🎧 Screen Reader Testing} D --> E[Test with NVDA/VoiceOver] - E --> F{Zoom Testing} + E --> F{🔍 Zoom Testing} F --> G[Zoom to 200% and test functionality] - G --> H{Color/Contrast Check} + G --> H{🎨 Color/Contrast Check} H --> I[Verify all text meets contrast ratios] - I --> J{Focus Management} + I --> J{👁️ Focus Management} J --> K[Ensure focus indicators are visible] - K --> L[Testing Complete] + K --> L[✅ Testing Complete] + + style A fill:#e3f2fd + style L fill:#e8f5e8 + style B fill:#fff3e0 + style D fill:#f3e5f5 + style F fill:#e0f2f1 + style H fill:#fce4ec + style J fill:#e8eaf6 ``` **Daftar periksa pengujian langkah demi langkah:** 1. **Navigasi keyboard**: Gunakan hanya Tab, Shift+Tab, Enter, Space, dan tombol panah -2. **Pengujian pembaca layar**: Aktifkan NVDA, VoiceOver, atau Narrator dan navigasi dengan mata tertutup +2. **Pengujian pembaca layar**: Aktifkan NVDA, VoiceOver, atau Narrator dan navigasikan dengan mata tertutup 3. **Pengujian zoom**: Uji pada tingkat zoom 200% dan 400% 4. **Verifikasi kontras warna**: Periksa semua teks dan komponen UI 5. **Pengujian indikator fokus**: Pastikan semua elemen interaktif memiliki status fokus yang terlihat @@ -90,9 +140,9 @@ graph TD ### Alat zoom dan pembesaran -Anda tahu bagaimana kadang-kadang Anda mencubit untuk memperbesar di ponsel Anda ketika teks terlalu kecil, atau menyipitkan mata di layar laptop Anda di bawah sinar matahari terang? Banyak pengguna mengandalkan alat pembesaran untuk membuat konten dapat dibaca setiap hari. Ini termasuk orang dengan gangguan penglihatan, orang tua, dan siapa saja yang pernah mencoba membaca situs web di luar ruangan. +Anda tahu bagaimana kadang-kadang Anda mencubit untuk memperbesar di ponsel Anda saat teks terlalu kecil, atau menyipitkan mata di layar laptop Anda di bawah sinar matahari terang? Banyak pengguna mengandalkan alat pembesaran untuk membuat konten dapat dibaca setiap hari. Ini termasuk orang dengan gangguan penglihatan, orang dewasa yang lebih tua, dan siapa saja yang pernah mencoba membaca situs web di luar ruangan. -Teknologi zoom modern telah berkembang melampaui sekadar memperbesar. Memahami cara kerja alat ini akan membantu Anda menciptakan desain responsif yang tetap fungsional dan menarik pada tingkat pembesaran apa pun. +Teknologi zoom modern telah berkembang melampaui sekadar membuat sesuatu lebih besar. Memahami cara kerja alat ini akan membantu Anda menciptakan desain responsif yang tetap fungsional dan menarik pada tingkat pembesaran apa pun. **Kemampuan zoom browser modern:** - **Zoom halaman**: Menskalakan semua konten secara proporsional (teks, gambar, tata letak) - ini adalah metode yang disukai @@ -106,17 +156,17 @@ Teknologi zoom modern telah berkembang melampaui sekadar memperbesar. Memahami c > ⚠️ **Pertimbangan Desain**: WCAG mengharuskan konten tetap fungsional saat diperbesar hingga 200%. Pada tingkat ini, pengguliran horizontal harus minimal, dan semua elemen interaktif harus tetap dapat diakses. -✅ **Uji desain responsif Anda**: Zoom browser Anda hingga 200% dan 400%. Apakah tata letak Anda beradaptasi dengan baik? Bisakah Anda tetap mengakses semua fungsionalitas tanpa pengguliran berlebihan? +✅ **Uji desain responsif Anda**: Perbesar browser Anda hingga 200% dan 400%. Apakah tata letak Anda beradaptasi dengan baik? Bisakah Anda tetap mengakses semua fungsionalitas tanpa pengguliran berlebihan? ## Alat Pengujian Aksesibilitas Modern -Sekarang setelah Anda memahami bagaimana orang menavigasi web dengan teknologi bantu, mari kita jelajahi alat yang membantu Anda membangun dan menguji situs web yang mudah diakses. +Sekarang setelah Anda memahami bagaimana orang menavigasi web dengan teknologi bantu, mari kita jelajahi alat yang membantu Anda membangun dan menguji situs web yang dapat diakses. -Anggap saja seperti ini: alat otomatis sangat bagus untuk menangkap masalah yang jelas (seperti teks alt yang hilang), sementara pengujian langsung membantu Anda memastikan situs Anda terasa nyaman digunakan di dunia nyata. Bersama-sama, mereka memberi Anda kepercayaan diri bahwa situs Anda berfungsi untuk semua orang. +Anggap saja seperti ini: alat otomatis sangat bagus untuk menangkap masalah yang jelas (seperti teks alt yang hilang), sementara pengujian langsung membantu Anda memastikan situs Anda nyaman digunakan di dunia nyata. Bersama-sama, mereka memberi Anda kepercayaan diri bahwa situs Anda bekerja untuk semua orang. ### Pengujian kontras warna -Berita baiknya adalah: kontras warna adalah salah satu masalah aksesibilitas yang paling umum, tetapi juga salah satu yang paling mudah diperbaiki. Kontras yang baik menguntungkan semua orang—dari pengguna dengan gangguan penglihatan hingga orang yang mencoba membaca ponsel mereka di pantai. +Berita baik: kontras warna adalah salah satu masalah aksesibilitas yang paling umum, tetapi juga salah satu yang paling mudah diperbaiki. Kontras yang baik menguntungkan semua orang—dari pengguna dengan gangguan penglihatan hingga orang yang mencoba membaca ponsel mereka di pantai. **Persyaratan kontras WCAG:** @@ -130,9 +180,9 @@ Berita baiknya adalah: kontras warna adalah salah satu masalah aksesibilitas yan - [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - Aplikasi desktop dengan pemilih warna - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Berbasis web dengan umpan balik instan - [Stark](https://www.getstark.co/) - Plugin alat desain untuk Figma, Sketch, Adobe XD -- [Accessible Colors](https://accessible-colors.com/) - Temukan palet warna yang mudah diakses +- [Accessible Colors](https://accessible-colors.com/) - Temukan palet warna yang dapat diakses -✅ **Bangun palet warna yang lebih baik**: Mulailah dengan warna merek Anda dan gunakan pemeriksa kontras untuk membuat variasi yang mudah diakses. Dokumentasikan ini sebagai token warna yang mudah diakses dalam sistem desain Anda. +✅ **Bangun palet warna yang lebih baik**: Mulailah dengan warna merek Anda dan gunakan pemeriksa kontras untuk membuat variasi yang dapat diakses. Dokumentasikan ini sebagai token warna yang dapat diakses dalam sistem desain Anda. ### Audit aksesibilitas yang komprehensif @@ -149,27 +199,60 @@ Pengujian aksesibilitas yang paling efektif menggabungkan beberapa pendekatan. T - [Accessibility Insights](https://accessibilityinsights.io/) - Suite pengujian komprehensif dari Microsoft **Integrasi Command-line dan CI/CD:** -- [axe-core](https://github.com/dequelabs/axe-core) - Perpustakaan JavaScript untuk pengujian otomatis +- [axe-core](https://github.com/dequelabs/axe-core) - Library JavaScript untuk pengujian otomatis - [Pa11y](https://pa11y.org/) - Alat pengujian aksesibilitas berbasis command-line - [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Penilaian aksesibilitas otomatis > 🎯 **Tujuan Pengujian**: Targetkan skor aksesibilitas Lighthouse 95+ sebagai baseline Anda. Ingat, alat otomatis hanya menangkap sekitar 30-40% masalah aksesibilitas—pengujian manual tetap penting! +### 🧠 **Cek Keterampilan Pengujian: Siap Menemukan Masalah?** + +**Mari kita lihat bagaimana perasaan Anda tentang pengujian aksesibilitas:** +- Metode pengujian mana yang menurut Anda paling mudah didekati saat ini? +- Bisakah Anda membayangkan menggunakan navigasi hanya dengan keyboard selama sehari penuh? +- Apa satu hambatan aksesibilitas yang pernah Anda alami secara pribadi secara online? + +```mermaid +pie title "Accessibility Issues Caught by Different Methods" + "Automated Tools" : 35 + "Manual Testing" : 40 + "User Feedback" : 25 +``` + +> **Peningkat kepercayaan diri**: Penguji aksesibilitas profesional menggunakan kombinasi metode ini. Anda sedang mempelajari praktik standar industri! + ## Membangun Aksesibilitas dari Awal -Kunci keberhasilan aksesibilitas adalah membangunnya ke dalam fondasi Anda sejak hari pertama. Saya tahu menggoda untuk berpikir "Saya akan menambahkan aksesibilitas nanti," tetapi itu seperti mencoba menambahkan ramp ke rumah setelah rumah itu selesai dibangun. Mungkin? Ya. Mudah? Tidak terlalu. +Kunci keberhasilan aksesibilitas adalah membangunnya ke dalam fondasi Anda sejak hari pertama. Saya tahu menggoda untuk berpikir "Saya akan menambahkan aksesibilitas nanti," tetapi itu seperti mencoba menambahkan ramp ke rumah setelah selesai dibangun. Mungkin? Ya. Mudah? Tidak benar-benar. Anggap aksesibilitas seperti merencanakan rumah—jauh lebih mudah untuk memasukkan aksesibilitas kursi roda dalam rencana arsitektur awal Anda daripada merombak semuanya nanti. -### Prinsip POUR: Fondasi aksesibilitas Anda +### Prinsip POUR: Fondasi Aksesibilitas Anda -Pedoman Konten Web yang Mudah Diakses (WCAG) dibangun di sekitar empat prinsip dasar yang disebut POUR. Jangan khawatir—ini bukan konsep akademis yang kaku! Mereka sebenarnya adalah panduan praktis untuk membuat konten yang berfungsi untuk semua orang. +Pedoman Aksesibilitas Konten Web (WCAG) dibangun di sekitar empat prinsip dasar yang membentuk POUR. Jangan khawatir—ini bukan konsep akademis yang kaku! Mereka sebenarnya pedoman praktis untuk membuat konten yang bekerja untuk semua orang. -Setelah Anda memahami POUR, membuat keputusan aksesibilitas menjadi jauh lebih intuitif. Ini seperti memiliki daftar periksa mental yang memandu pilihan desain Anda. Mari kita bahas: +Setelah Anda memahami POUR, membuat keputusan aksesibilitas menjadi jauh lebih intuitif. Ini seperti memiliki daftar mental yang memandu pilihan desain Anda. Mari kita uraikan: + +```mermaid +flowchart LR + A[🔍 PERCEIVABLE
Can users sense it?] --> B[🎮 OPERABLE
Can users use it?] + B --> C[📖 UNDERSTANDABLE
Can users get it?] + C --> D[💪 ROBUST
Does it work everywhere?] + + A1[Alt text
Captions
Contrast] --> A + B1[Keyboard access
No seizures
Time limits] --> B + C1[Clear language
Predictable
Error help] --> C + D1[Valid code
Compatible
Future-proof] --> D + + style A fill:#e1f5fe + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 +``` **🔍 Dapat Dipersepsi**: Informasi harus dapat disajikan dengan cara yang dapat dirasakan pengguna melalui indra yang tersedia -- Sediakan alternatif teks untuk konten non-teks (gambar, video, audio) +- Berikan alternatif teks untuk konten non-teks (gambar, video, audio) - Pastikan kontras warna yang cukup untuk semua teks dan komponen UI - Tawarkan teks dan transkrip untuk konten multimedia - Desain konten yang tetap fungsional saat diperbesar hingga 200% @@ -180,7 +263,7 @@ Setelah Anda memahami POUR, membuat keputusan aksesibilitas menjadi jauh lebih i - Pastikan semua fungsionalitas dapat diakses melalui navigasi keyboard - Berikan pengguna waktu yang cukup untuk membaca dan berinteraksi dengan konten - Hindari konten yang menyebabkan kejang atau gangguan vestibular -- Bantu pengguna menavigasi dengan struktur dan landmark yang jelas +- Bantu pengguna menavigasi dengan efisien melalui struktur dan landmark yang jelas - Pastikan elemen interaktif memiliki ukuran target yang memadai (minimal 44px) **📖 Dapat Dipahami**: Informasi dan operasi UI harus jelas dan mudah dipahami @@ -189,33 +272,61 @@ Setelah Anda memahami POUR, membuat keputusan aksesibilitas menjadi jauh lebih i - Pastikan konten muncul dan beroperasi dengan cara yang dapat diprediksi dan konsisten - Berikan instruksi dan pesan kesalahan yang jelas untuk input pengguna - Bantu pengguna memahami dan memperbaiki kesalahan dalam formulir -- Atur konten dengan urutan membaca yang logis dan hierarki informasi +- Susun konten dengan urutan membaca yang logis dan hierarki informasi + +**💪 Tangguh**: Konten harus bekerja dengan andal di berbagai teknologi dan perangkat bantu -**💪 Kuat**: Konten harus bekerja secara andal di berbagai teknologi dan perangkat bantu +- **Gunakan HTML semantik yang valid sebagai fondasi Anda** +- **Pastikan kompatibilitas dengan teknologi bantu saat ini dan masa depan** +- **Ikuti standar web dan praktik terbaik untuk markup** +- **Uji di berbagai browser, perangkat, dan alat bantu** +- **Susun konten agar tetap berfungsi dengan baik meskipun fitur canggih tidak didukung** + +### 🎯 **Pemeriksaan Prinsip POUR: Membuatnya Berkesan** + +**Refleksi cepat tentang dasar-dasar:** +- Bisakah Anda memikirkan fitur situs web yang gagal memenuhi setiap prinsip POUR? +- Prinsip mana yang paling alami bagi Anda sebagai pengembang? +- Bagaimana prinsip-prinsip ini dapat meningkatkan desain untuk semua orang, bukan hanya pengguna disabilitas? + +```mermaid +quadrantChart + title POUR Principles Impact Matrix + x-axis Low Effort --> High Effort + y-axis Low Impact --> High Impact + quadrant-1 Quick Wins + quadrant-2 Major Projects + quadrant-3 Consider Later + quadrant-4 Strategic Focus + + Alt Text: [0.2, 0.9] + Color Contrast: [0.3, 0.8] + Semantic HTML: [0.4, 0.9] + Keyboard Nav: [0.6, 0.8] + ARIA Complex: [0.8, 0.7] + Screen Reader Testing: [0.7, 0.6] +``` -- Gunakan HTML yang valid dan semantik sebagai fondasi Anda -- Pastikan kompatibilitas dengan teknologi bantu saat ini dan masa depan -- Ikuti standar web dan praktik terbaik untuk markup -- Uji di berbagai browser, perangkat, dan alat bantu -- Struktur konten sehingga tetap berfungsi dengan baik saat fitur canggih tidak didukung +> **Ingat**: Mulailah dengan perbaikan berdampak tinggi dan usaha rendah. HTML semantik dan teks alternatif memberikan peningkatan aksesibilitas terbesar dengan usaha paling sedikit! -## Menciptakan Desain Visual yang Mudah Diakses +## Membuat Desain Visual yang Aksesibel -Desain visual yang baik dan aksesibilitas berjalan beriringan. Saat Anda mendesain dengan aksesibilitas dalam pikiran, Anda sering menemukan bahwa batasan ini mengarah pada solusi yang lebih bersih dan elegan yang menguntungkan semua pengguna. +Desain visual yang baik dan aksesibilitas berjalan beriringan. Saat Anda mendesain dengan mempertimbangkan aksesibilitas, sering kali Anda menemukan bahwa batasan ini menghasilkan solusi yang lebih bersih dan elegan yang menguntungkan semua pengguna. -Mari kita jelajahi cara menciptakan desain yang menarik secara visual yang berfungsi untuk semua orang, terlepas dari kemampuan visual mereka atau kondisi di mana mereka melihat konten Anda. +Mari kita jelajahi cara menciptakan desain visual yang menarik yang dapat diakses oleh semua orang, terlepas dari kemampuan visual mereka atau kondisi di mana mereka melihat konten Anda. ### Strategi warna dan aksesibilitas visual -Warna adalah alat komunikasi yang kuat, tetapi seharusnya tidak pernah menjadi satu-satunya cara untuk menyampaikan informasi penting. Merancang di luar warna menciptakan pengalaman yang lebih tangguh dan inklusif yang dapat berfungsi dalam berbagai situasi. + +Warna sangat kuat untuk komunikasi, tetapi seharusnya tidak pernah menjadi satu-satunya cara untuk menyampaikan informasi penting. Mendesain melampaui warna menciptakan pengalaman yang lebih tangguh dan inklusif yang berfungsi dalam lebih banyak situasi. **Desain untuk perbedaan penglihatan warna:** Sekitar 8% pria dan 0,5% wanita memiliki beberapa bentuk perbedaan penglihatan warna (sering disebut "buta warna"). Jenis yang paling umum adalah: - **Deuteranopia**: Kesulitan membedakan merah dan hijau - **Protanopia**: Merah tampak lebih redup -- **Tritanopia**: Kesulitan dengan biru dan kuning (jarang terjadi) +- **Tritanopia**: Kesulitan dengan biru dan kuning (langka) -**Strategi warna yang inklusif:** +**Strategi warna inklusif:** ```css /* ❌ Bad: Using only color to indicate status */ @@ -285,19 +396,41 @@ button:focus:not(:focus-visible) { **Persyaratan indikator fokus:** - **Visibilitas**: Harus memiliki rasio kontras setidaknya 3:1 dengan elemen sekitarnya -- **Lebar**: Ketebalan minimal 2px di sekitar seluruh elemen +- **Lebar**: Ketebalan minimum 2px di seluruh elemen - **Persistensi**: Harus tetap terlihat hingga fokus berpindah ke tempat lain - **Pembedaan**: Harus secara visual berbeda dari status UI lainnya -> 💡 **Tips Desain**: Indikator fokus yang baik sering menggunakan kombinasi outline, box-shadow, dan perubahan warna untuk memastikan visibilitas di berbagai latar belakang dan konteks. +> 💡 **Tip Desain**: Indikator fokus yang hebat sering menggunakan kombinasi outline, box-shadow, dan perubahan warna untuk memastikan visibilitas di berbagai latar belakang dan konteks. + +✅ **Audit indikator fokus**: Tab melalui situs web Anda dan catat elemen mana yang memiliki indikator fokus yang jelas. Apakah ada yang sulit dilihat atau hilang sama sekali? -✅ **Audit indikator fokus**: Gunakan tombol Tab untuk menjelajahi situs web Anda dan catat elemen mana yang memiliki indikator fokus yang jelas. Apakah ada yang sulit dilihat atau bahkan tidak ada? +### HTML Semantik: Fondasi Aksesibilitas -### HTML Semantik: Fondasi aksesibilitas +HTML semantik seperti memberikan teknologi bantu sistem GPS untuk situs web Anda. Saat Anda menggunakan elemen HTML yang tepat untuk tujuan yang dimaksudkan, Anda pada dasarnya menyediakan pembaca layar, keyboard, dan alat lainnya dengan peta rinci untuk membantu pengguna menavigasi dengan efektif. -HTML semantik seperti memberikan teknologi bantu sistem GPS untuk situs web Anda. Ketika Anda menggunakan elemen HTML yang tepat untuk tujuan yang dimaksudkan, Anda pada dasarnya memberikan pembaca layar, keyboard, dan alat lainnya peta rinci untuk membantu pengguna menavigasi dengan efektif. +Berikut analogi yang benar-benar mengena bagi saya: HTML semantik adalah perbedaan antara perpustakaan yang terorganisir dengan baik dengan kategori yang jelas dan tanda yang membantu versus gudang tempat buku tersebar secara acak. Kedua tempat memiliki buku yang sama, tetapi mana yang lebih Anda pilih untuk mencari sesuatu? Tepat! -Berikut adalah analogi yang benar-benar membuat saya mengerti: HTML semantik adalah perbedaan antara perpustakaan yang terorganisir dengan kategori yang jelas dan tanda-tanda yang membantu dibandingkan dengan gudang tempat buku-buku tersebar secara acak. Kedua tempat memiliki buku yang sama, tetapi mana yang akan Anda pilih untuk mencari sesuatu? Tepat sekali! +```mermaid +flowchart TD + A[🏠 HTML Document] --> B[📰 header] + A --> C[🧭 nav] + A --> D[📄 main] + A --> E[📋 footer] + + B --> B1[h1: Site Name
Logo & branding] + C --> C1[ul: Navigation
Primary links] + D --> D1[article: Content
section: Subsections] + D --> D2[aside: Sidebar
Related content] + E --> E1[nav: Footer links
Copyright info] + + D1 --> D1a[h1: Page title
h2: Major sections
h3: Subsections] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 +``` **Blok bangunan struktur halaman yang dapat diakses:** @@ -361,24 +494,51 @@ Berikut adalah analogi yang benar-benar membuat saya mengerti: HTML semantik ada | `
` | Header halaman atau bagian | "Landmark banner" - navigasi cepat ke atas | | `