diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 1e10e7ad..110623ca 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -185,8 +185,8 @@ Compare some programming languages. What are some of the unique traits of JavaSc ## Review & Self Study -Study a bit on the different languages available to the programmer. Try to write a line in one language, and then redo it in two others. What do you learn? +Study a bit on the different languages available to the programmer. Try to write a line in one language, and then redo it in two others. What do you learn? -## Assignment +## Assignment [Reading the Docs](assignment.md) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ms.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ms.md new file mode 100644 index 00000000..44914eb6 --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ms.md @@ -0,0 +1,190 @@ +# Pengenalan Bahasa Pengaturcaraan dan Alat Perdagangan + +Pelajaran ini merangkumi asas bahasa pengaturcaraan. Topik yang anda akan belajar di sini dapat mengaplikasikan untuk kebanyakan bahasa pengaturcaraan moden hari ini. Pada bahagian 'Alat Perdagangan', anda akan belajar bagaimana mengenai perisian berguna yang membantu anda sebagai pembangun. + +![Intro Programming](../webdev101-programming.png) +> Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac) + +## Kuiz Pra-Kuliah +[Kuiz Pra-Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1) + +## Pengenalan + +Dalam bab ini, kita akan belajar: + +- Apa itu pengaturcaraan? +- Jenis bahasa pengaturcaraan +- Elemen asas program +- Perisian dan perkakas yang berguna untuk pembangun profesional + +## Apa itu pengaturcaraan? + +Pengaturcaraan (juga dikenali sebagai pengekodan) adalah proses menulis arahan ke peranti, seperti komputer atau peranti mudah alih. Kami menulis arahan ini dengan bahasa pengaturcaraan, yang kemudian ditafsirkan oleh peranti. Set arahan ini dapat disebut dengan pelbagai nama, tetapi *program*, *program komputer*, *aplikasi (app)*, dan *boleh dilaksanakan* ialah beberapa nama yang popular. + +*Program* boleh menjadi apa-apa sahaja yang ditulis dengan kod; laman web, permainan, dan aplikasi telefon adalah program. Walaupun mungkin kita boleh membuat program tanpa menulis kod, logik yang mendasari ditafsirkan ke peranti dan logik itu kemungkinan besar ditulis dengan kod. Program yang *melaksanakan kod* ialah dedefinisikan sebagai program yang sedang menjalankan arahan. Peranti yang anda sedang gunakan untuk membaca pelajaran ini sedang menjalankan program sendiri untuk mencetakkan pada skrin anda. + +βœ… Lakukan sedikit pengajian: siapakah yang dianggap sebagai pengaturcara komputer pertama di dunia? + +## Bahasa Pengaturcaraan + +Bahasa pengaturcaraan berfungsi untuk tujuan utama: bagi pembangun untuk membina arahan untuk menghantar ke peranti. Peranti hanya dapat memahami binari (1s dan 0s), dan *untuk kebanyakan* pembangun itu bukan kaedah yang sangat efisien untuk berkomunikasi. Bahasa pengaturcaraan adalah wahana berkomunikasi antara manusia dan komputer. + +Bahasa pengaturcaraan terdapat dalam format-format yang berbeza dan mungkin mempunyai tujuan yang berbeza. Sebagai contoh, ('JavaScript') digunakan terutamanya untuk aplikasi web dan ('Bash') digunakan terutamanya untuk sistem operasi. + +*Bahasa tahap rendah* biasanya memerlukan langkah yang lebih sedikit berbanding daripada *bahasa tahap tinggi* agar peranti dapat menafsirkan arahan. Walau bagaimanapun, apa yang menjadikan bahasa peringkat tinggi menjadi popular adalah kebolehbacaan dan sokongannya. ('JavaScript') dianggap bahasa tahap tinggi. + +Kod berikut akan menggambarkan perbezaan antara bahasa tahap tinggi dengan ('JavaScript') dan bahasa tahap rendah dengan kod pemasangan ARM. + +```javascript +let number = 10 +let n1 = 0, n2 = 1, nextTerm; + +for (let i = 1; i <= number; i++) { + console.log(n1); + nextTerm = n1 + n2; + n1 = n2; + n2 = nextTerm; +} +``` + +```c + area ascen,code,readonly + entry + code32 + adr r0,thumb+1 + bx r0 + code16 +thumb + mov r0,#00 + sub r0,r0,#01 + mov r1,#01 + mov r4,#10 + ldr r2,=0x40000000 +back add r0,r1 + str r0,[r2] + add r2,#04 + mov r3,r0 + mov r0,r1 + mov r1,r3 + sub r4,#01 + cmp r4,#00 + bne back + end +``` + +Percaya atau tidak, *mereka berdua melakukan perkara yang sama*: mencetak urutan Fibonacci hingga 10. + +βœ… Urutan Fibonacci [didefinisikan] (https://en.wikipedia.org/wiki/Fibonacci_number) sebagai satu set nombor sehingga setiap nombor adalah jumlah dari dua nombor sebelumnya, bermula dari 0 dan 1. + +## Elemen Asas Program + +Satu arahan dalam program dipanggil *pernyataan* dan biasanya akan mempunyai watak atau jarak baris yang menandakan di mana arahan itu berakhir, atau *diterminasikan*. Bagaimanakah program ditamatkan berbeza-beza dengan setiap bahasa. + +Sebilangan besar program bergantung pada penggunaan data dari pengguna atau di tempat lain, di mana pernyataan mungkin bergantung pada data untuk melaksanakan arahan. Data dapat mengubah bagaimana program berperilaku, sehingga bahasa pengaturcaraan dilengkapi dengan cara untuk menyimpan data sementara yang dapat digunakan kemudian. Data ini dipanggil *pemboleh ubah* (*Variable*). Pemboleh ubah ialah pernyataan yang memerintahkan peranti menyimpan data dalam ingatannya. Pemboleh ubah dalam program serupa dengan ('algebra'), di mana mereka mempunyai nama yang unik dan nilainya mungkin berubah dari semasa ke semasa. + +Ada kemungkinan beberapa penyataan tidak akan dilaksanakan oleh peranti. Ini biasanya berdasarkan reka bentuk apabila ditulis oleh pembangun atau secara tidak sengaja apabila berlaku kesalahan yang tidak dijangka. Jenis kawalan aplikasi ini menjadikannya lebih mantap dan dapat dikendalikan. Biasanya perubahan kawalan ini berlaku apabila keputusan tertentu dipenuhi. Pernyataan umum dalam bahasa pengaturcaraan moden untuk mengawal bagaimana program dijalankan adalah pernyataan `if..else`. + +βœ… Anda akan belajar lebih mendalam tentang jenis pernyataan ini dalam pelajaran seterusnya + +## Alat Perdagangan + +[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade") + +Dalam bahagian ini, anda akan belajar tentang beberapa perisian yang mungkin berguna bagi anda semasa memulakan perjalanan pengembangan profesional anda. + +**Persekitaran pengembangan** ('development enviroment') ialah sekumpulan alat dan ciri unik yang sering digunakan oleh pembangun semasa menulis perisian. Sebilangan alat ini telah disesuaikan untuk keperluan khusus pembangun, dan mungkin berubah dari masa ke masa jika pembangun mengubah keutamaan dalam kerja atau projek peribadi, atau ketika mereka menggunakan bahasa pengaturcaraan yang berbeda. Persekitaran pembangunan sama uniknya dengan pemaju yang menggunakannya. + +### Editor + +Salah satu alat yang paling penting untuk pembangunan perisian adalah ('editor'). ('Editor') ialah tempat anda menulis kod anda dan kadang kala anda akan menjalankan kod anda. + +Pembangun bergantung pada editor untuk beberapa sebab tambahan: + +- *Debugging* Mencari bug dan kesilapan dengan melangkah ke kod, baris demi baris. Beberapa editor mempunyai kemampuan debug, atau dapat disesuaikan dan ditambahkan untuk bahasa pengaturcaraan tertentu. +- *Penyorotan sintaks* Menambah warna dan format teks ke kod, menjadikannya lebih mudah dibaca. Sebilangan besar editor membenarkan penyorotan sintaks yang disesuaikan. +- *Sambungan dan Integrasi* Penambahan yang dikhususkan untuk pembangun, oleh pemaju, untuk akses ke alat tambahan yang tidak terdapat dalam penyunting asas. Sebagai contoh, banyak pembangun juga memerlukan cara untuk mendokumentasikan kod mereka dan menerangkan cara kerjanya dan akan memasang pelanjutan pemeriksaan ejaan untuk memeriksa kesalahan ketik. Sebilangan besar penambahan ini dimaksudkan untuk digunakan dalam editor tertentu, dan kebanyakan editor datang dengan cara untuk mencari sambungan yang tersedia. +- *Penyesuaian* Sebilangan besar editor sangat disesuaikan, dan setiap pembangun akan mempunyai persekitaran pembangunan unik mereka sendiri yang sesuai dengan keperluan mereka. Banyak juga yang membenarkan pembangun membuat peluasan mereka sendiri. + +- [Visual Studio Code](https://code.visualstudio.com/) + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack) + - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) +- [Atom](https://atom.io/) + - [spell-check](https://atom.io/packages/spell-check) + - [teletype](https://atom.io/packages/teletype) + - [atom-beautify](https://atom.io/packages/atom-beautify) + +### Penyemak Imbas + + Alat penting lain ialah penyemak imbas. Pembangun web bergantung pada penyemak imbas untuk melihat bagaimana kod mereka berjalan di web, ia juga digunakan untuk melihat elemen visual dari laman web yang ditulis dalam editor, seperti HTML. + + Banyak penyemak imbas dilengkapi dengan *developer tools* (DevTools) yang mengandungi sekumpulan ciri dan maklumat berguna untuk membantu pembangun mengumpulkan dan menangkap pandangan penting mengenai aplikasinya. Contohnya: Sekiranya halaman web mempunyai kesilapan, kadang-kadang bermanfaat untuk mengetahui kapan halaman tersebut berlaku. DevTools dalam penyemak imbas boleh dikonfigurasi untuk menangkap maklumat ini. + +### Penyemak Imbas Popular dan DevTools + +- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium) +- [Chrome](https://developers.google.com/web/tools/chrome-devtools/) +- [Firefox](https://developer.mozilla.org/docs/Tools) + +### Alat Command Line + +Sebahagian pembangun lebih suka paparan yang kurang grafik untuk tugas harian mereka dan bergantung kepada baris perintah untuk mencapainya. Membangunkan kod memerlukan sebilangan besar menaip, dan sebilangan pembangun memilih untuk tidak mengganggu aliran mereka pada papan kekunci dan akan menggunakan pintasan papan kekunci untuk menukar antara tetingkap desktop, mengerjakan fail yang berbeza, dan menggunakan alat. Sebilangan besar tugas dapat diselesaikan dengan tetikus, tetapi satu manfaat menggunakan baris perintah adalah banyak yang dapat dilakukan dengan alat baris perintah tanpa perlu menukar antara tetikus dan papan kekunci. Manfaat yang lain daripada baris perintah ialah mereka boleh dikonfigurasi dan anda dapat menukar konfigurasi yang sesuai untuk anda, mengubahnya kemudian, dan juga mengimportnya ke mesin pengembangan baru. Kerana persekitaran pembangunan sangat unik bagi setiap pembangun, ada yang akan menghindari penggunaan baris perintah, ada yang akan bergantung sepenuhnya, dan ada yang lebih suka gabungan kedua-duanya. + +### Pilihan Command Line Popular + +Pilihan untuk ('command line') akan berbeza berdasarkan sistem operasi yang anda mengguna. + +*πŸ’» = sudah dimuat turun dalam sistem operasi.* + +#### Windows + +- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) πŸ’» +- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (Juga dikenali sebagai CMD) πŸ’» +- [Windows Terminal](https://docs.microsoft.com/windows/terminal/) +- [mintty](https://mintty.github.io/) + +#### MacOS + +- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) πŸ’» +- [iTerm](https://iterm2.com/) +- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7) + +#### Linux + +- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) πŸ’» +- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html) +- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7) + +#### Popular Command Line Tools + +- [Git](https://git-scm.com/) (πŸ’» Dimuat turun pada kebanyakkan sistem operasi) +- [NPM](https://www.npmjs.com/) +- [Yarn](https://classic.yarnpkg.com/en/docs/cli/) + +### Dokumentasi + +Apabila pembangun ingin mempelajari sesuatu yang baru, kemungkinan besar mereka akan beralih ke dokumentasi untuk mengetahui cara menggunakannya. Pembangun sering bergantung pada dokumentasi untuk membimbing mereka bagaimana menggunakan alat dan bahasa dengan betul, dan juga untuk mendapatkan pengetahuan yang lebih mendalam tentang cara ia berfungsi. + +#### Dokumentasi Popular untuk Pembangunan Web + +- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Frontend Masters](https://frontendmasters.com/learn/) + +βœ… Lakukan penyelidikan: Sekarang setelah anda mengetahui asas-asas persekitaran pembangun web, membandingkan dan membezakannya dengan persekitaran pereka web. + +--- + +## πŸš€ Cabaran + +Bandingkan beberapa bahasa pengaturcaraan. Apa ciri unik JavaScript berbanding dengan Java? Bagaimanakah dengan COBOL vs. Go? + +## Kuiz Pasca Kuliah +[Kuiz Pasca Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2) + +## Mengkaji sendiri & Belajar sendiri + +Belajar sedikit mengenai bahasa yang disediakan untuk pengaturcara. Cuba menulis baris dalam satu bahasa pengaturcaraan, dan kemudian membuat semula dalam dua bahasa pengaturcaraan lain. Apakah yang anda pelajari? + +## Tugasan + +[Membaca Dokumentasi](assignment.ms.md) \ No newline at end of file diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ms.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ms.md new file mode 100644 index 00000000..c687eb01 --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ms.md @@ -0,0 +1,10 @@ +# Membaca Docs + +## Arahan +Terdapat banyak alat yang mungkin diperlukan oleh pembangun web adalah di [Dokumentasi MDN untuk perkakas sisi pelanggan](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Pilih 3 alat yang tidak diliputi dalam pelajaran, terangkan mengapa pembangun web menggunakannya, dan mencari alat yang terdapat dalam kategori ini dan kongsikan dokumentasinya. Jangan menggunakan contoh alat yang sama pada MDN. + +## Rubrik + +Contoh | Mencukupi | Usaha Lagi +--- | --- | -- | +|Terangkan mengapa pembangun web menggunakan alat| Terangkan bagaimana dan mengapa pembangun akan menggunakan alat| Tidak menyebut bagaimana atau mengapa pembangun menggunakan alat | \ No newline at end of file diff --git a/1-getting-started-lessons/2-github-basics/translations/README.ms.md b/1-getting-started-lessons/2-github-basics/translations/README.ms.md new file mode 100644 index 00000000..0cb56e2f --- /dev/null +++ b/1-getting-started-lessons/2-github-basics/translations/README.ms.md @@ -0,0 +1,318 @@ +# Pengenalan Tentang GitHub + +Pelajaran ini merangkumi pengetahuan asas tentang GitHub, dan adalah salah satu platform untuk menjadi tuan rumah dan menguruskan perubahan pada kod anda. + +![Intro to GitHub](../images/webdev101-github.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) + +## Kuiz Pra-Kuliah +[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3) + +## Pengenalan + +Dalam pelajaran ini, kita akan belajar tentang: + +- mengesan kerja yang anda lakukan di mesin anda +- membuat projek dengan orang lain +- bagaimanakah menyumbang kepada perisian sumber terbuka + +### Prasyarat + +Sebelum bermula, anda perlu memeriksa sama ada Git dipasang dalam komputer anda. Dalam terminal menaip: +`git --version` + +Sekiranya Git tidak dipasang, [memuat turun Git](https://git-scm.com/downloads). Kemudian, siapkan profil Git anda di terminal: +* `git config --global user.name "your-name"` +* `git config --global user.email "your-email"` + +Untuk memeriksa sama ada Git sudah dikonfigurasi, anda boleh menaip: +`git config --list` + +Anda juga memerlukan akaun GitHub, penyunting kod (seperti Visual Studio Code), dan anda perlu membuka terminal anda (atau: command prompt). + +Navigasi ke [github.com] (https://github.com/) dan buat akaun jika anda belum melakukannya, atau log masuk dan isi profil anda. + +βœ… GitHub bukan satu-satunya repositori kod di dunia; ada yang lain, tetapi GitHub adalah yang paling terkenal. + +### Persediaan + +Anda memerlukan kedua-dua folder dengan projek kod pada mesin tempatan anda (komputer riba atau PC), dan repositori awam di GitHub, yang akan menjadi contoh bagaimana menyumbang kepada projek orang lain. + +--- + +## Pengurusan Kod + +Katakan anda mempunyai folder secara tempatan dengan beberapa projek kod dan anda ingin mula mengesan kemajuan anda menggunakan git - sistem kawalan versi. Sebilangan orang membandingkan menggunakan git dengan menulis surat cinta untuk diri masa depan anda. Membaca mesej komit anda beberapa hari atau minggu atau bulan kemudian anda akan dapat mengingat mengapa anda membuat keputusan, atau "memutar balik (rollback)" perubahan - iaitu ketika anda menulis "pesan komit (commit messages)" yang baik. + +### Tugasan: Buat repositori dan kod komit + +1. **Buat satu repository di GitHub**. Di GitHub.com, pada tab repositori, atau dari bar navigasi di sebelah kanan atas, cari butang **repo baru (new repo)**. + + 1. Beri nama repositori (folder) anda + 1. Pilih **repositori kreat (create repository)**. + +1. **Navigasi ke folder kerja anda**. Di terminal anda, beralih ke folder (juga dikenali sebagai direktori) yang ingin anda mulakan penjejakan. Jenis: + + ```bash + cd [name of your folder] + ``` + +1. **Memulakan git repositori**. Dalam jenis projek anda: + + ```bash + git init + ``` + +1. **Periksa status**. Untuk memeriksa status repositori anda: + + ```bash + git status + ``` + + the output can look something like this: + + ```output + Changes not staged for commit: + (use "git add ..." to update what will be committed) + (use "git checkout -- ..." to discard changes in working directory) + + modified: file.txt + modified: file2.txt + ``` + + Biasanya perintah `git status` memberitahu anda perkara seperti fail apa yang siap disimpan_ ke repo atau mempunyai perubahan di atasnya yang mungkin anda mahu berterusan. + +1. **Tambahkan semua fail untuk penjejakan** + Ini juga disebut sebagai fail pementasan / menambahkan fail ke kawasan pementasan (staging area). + + ```bash + git add . + ``` + + Argumen `git add` plus `.` menunjukkan bahawa semua fail & perubahan anda untuk dijejaki. + +1. **Tambahkan fail terpilih untuk dijejaki** + + ```bash + git add [file or folder name] + ``` + + Ini membantu kita untuk menambahkan fail yang dipilih hanya ke kawasan pementasan ketika kita tidak ingin melakukan semua fail sekaligus. + +1. **Lepaskan semua fail** + + ```bash + git reset + ``` + + Perintah ini membantu kita untuk melepaskan semua fail sekaligus. + +1. **Lepaskan fail yang tertentu** + + ```bash + git reset [file or folder name] + ``` + + Perintah ini membantu kita untuk melepaskan hanya fail yang tertentu sekaligus yang tidak ingin kita sertakan untuk komit berikutnya. + +1. **Meneruskan kerja anda**. Pada masa ini anda telah menambahkan fail ke yang disebut _staging area_. Salah satu tempat di mana Git mengesan fail anda. Untuk melakukan perubahan itu kekal, anda perlu _commit_ fail itu. Untuk melakukannya anda perlu membuat _commit_ dengan perintah `git commit`. _commit_ mewakili titik simpanan dalam sejarah repo anda. Menaip perintah tersebut untuk membuat _commit_: + + ```bash + git commit -m "first commit" + ``` + + Untuk komit semua fail anda, menaip mesej "komit pertama (first commit)". Untuk mesej komit pada masa kelak, anda ingin lebih terperinci dalam penerangan anda untuk menyampaikan jenis perubahan yang telah anda buat. + +1. **Sambungkan repo Git tempatan anda dengan GitHub**. Repo Git adalah bagus dalam mesin anda tetapi pada satu ketika anda ingin mempunyai sandaran fail anda di suatu tempat dan juga mengundang orang lain untuk bekerja dengan anda di repo anda. Salah satu tempat yang bagus untuk melakukannya adalah di GitHub. Ingatlah bahawa kita sudah membuat repo di GitHub jadi satu-satunya perkara yang perlu kita lakukan ialah menghubungkan repo Git tempatan kita dengan GitHub. Perintah ini `git remote add` akan membuat tugasan tersebut. Menaip perintah tersebut: + + > Perhatikan, sebelum anda mengetik perintah, pergi ke halaman repo GitHub anda untuk mencari URL repositori. Anda akan menggunakannya dalam arahan di bawah. Gantikan `repository_name` degan GitHub URL. + + ```bash + git remote add origin https://github.com/username/repository_name.git + ``` + + Ini membuat _remote_, atau sambungan, bernama "origin" yang menunjuk ke repositori GitHub yang anda buat sebelumnya. + +1. **Hantar fail tempatan ke GitHub**. Setakat ini anda telah membuat _connection_ antara repo tempatan dan repo GitHub. Marilah hantarkan fail-fail ini ke GitHub dengan perintah berikut `git push`, seperti di bawah: + + ```bash + git push -u origin main + ``` + + Perintah ini menghantar komit anda di cawangan "utama" (main branch) anda ke GitHub. + +1. **Untuk menambahkan perubahan lain**. Sekiranya anda ingin terus membuat perubahan dan menghantar ke GitHub, anda hanya perlu menggunakan tiga arahan berikut: + + ```bash + git add . + git commit -m "type your commit message here" + git push + ``` + + >Tip, Anda mungkin juga mahu mengadopsi fail `.gitignore` untuk mengelakkan fail yang tidak ingin anda lacak muncul di GitHub - seperti fail nota yang anda simpan di folder yang sama tetapi tidak mempunyai tempat di repositori awam. Anda boleh mencari templat untuk `.gitignore` fail pada [.gitignore templates](github.com/github/gitignore). + +#### Mesej Komit + +Baris subjek Git komit yang hebat melengkapkan ayat berikut: +Sekiranya berlaku, komit ini akan + +Untuk subjek gunakan keharusan, ketegangan sekarang: "perubahan" tidak "berubah" atau "perubahan". +Seperti dalam subjek, dalam badan (pilihan) juga menggunakan keharusan, sekarang tegang. Tubuh harus merangkumi motivasi untuk perubahan dan membezakannya dengan tingkah laku sebelumnya. Anda menerangkan `mengapa`, bukan `bagaimana`. + +βœ… Luangkan masa beberapa minit untuk melayari GitHub. Bolehkah anda menemui mesej komit yang sangat hebat? Bolehkah anda mencari yang paling minimum? Maklumat apa yang anda fikir paling penting dan berguna untuk disampaikan dalam pesanan komited? + +### Tugas: Kolaborasi + +Sebab utama meletakkan perkara di GitHub adalah untuk memungkinkan untuk berkolaborasi dengan pemaju lain. + +## Melakukan projek dengan orang lain + +Dalam repositori anda, arahkan ke `Insights> Community` untuk melihat bagaimana projek anda dibandingkan dengan standard komuniti yang disyorkan. + + Berikut adalah beberapa perkara yang dapat meningkatkan repo GitHub anda: + - **Penerangan**. Adakah anda menambah keterangan untuk projek anda? + - **README**. Adakah anda menambah README? GitHub memberikan panduan untuk menulis [README](https://docs.github.com/articles/about-readmes/). + - **Garis panduan penyumbang**. Adakah projek anda mempunyai [cGaris panduan penyumbang](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), + - **Tatakelakuan**. a [Tatakelakuan](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), + - **Lesen**. Yang paling penting, ialah [lesen](https://docs.github.com/articles/adding-a-license-to-a-repository/)? + + +Semua sumber ini akan memberi manfaat kepada ahli pasukan baru. Dan ini biasanya merupakan jenis perkara yang dilihat oleh penyumbang baru bahkan sebelum melihat kod anda, untuk mengetahui sama ada projek anda adalah tempat yang tepat untuk mereka menghabiskan masa. + +βœ… README fail, walaupun memerlukan masa untuk disiapkan, sering diabaikan oleh penyelenggara yang sibuk. Bolehkah anda mencari contoh yang sangat deskriptif? Catatan: ada beberapa [alat untuk membantu mencipta README yang baik](https://www.makeareadme.com/) yang anda boleh cuba. + +### Tugas: Gabungkan beberapa kod + +Menyumbang kepada dokumen membantu orang menyumbang dalam projek tersebut. Ini menerangkan jenis sumbangan yang anda cari dan bagaimana prosesnya berjalan. Penyumbang perlu melalui beberapa langkah untuk dapat menyumbang kepada repo anda di GitHub: + + +1. **Memalsukan repo anda** Anda mungkin mahu orang membuat projek anda. Memalsukan (_fork_) bermaksud membuat replika repositori anda di profil GitHub mereka. +1. **Klon**. Dari sana mereka akan mengklonkan projek ke mesin tempatan mereka. +1. **Buat branch**. Anda ingin meminta mereka membuat branch (_branch_) untuk kerja mereka. +1. **Fokus perubahan mereka pada satu kawasan**. Minta penyumbang memusatkan sumbangan mereka pada satu perkara pada satu masa - dengan cara itu peluang yang anda dapat _merge_ dalam pekerjaan mereka adalah lebih tinggi. Bayangkan mereka menulis perbaikan pepijat, menambah ciri baru, dan mengemas kini beberapa ujian - bagaimana jika anda mahu, atau hanya dapat melaksanakan 2 dari 3, atau 1 dari 3 perubahan? + +βœ… Bayangkan keadaan di mana branch sangat penting untuk menulis dan menghantar kod yang baik. Apa kes penggunaan yang boleh anda fikirkan? + +> Perhatikan, jadikan perubahan yang ingin anda lihat di dunia, dan buatlah cawangan untuk karya anda sendiri juga. Segala komit yang anda buat akan dibuat di cabang tempat Anda sedang "check out" gunakan `git status` untuk melihat cabang mana. + +Mari melalui aliran kerja penyumbang. Anggaplah penyumbang telah _forked_ dan _cloned_ repo sehingga mereka mempunyai repo Git yang siap diusahakan, di mesin tempatan mereka: + +1. **Membuat branch**. Guna perintah `git branch` untuk membuat branch baharu seperti berikut: + + ```bash + git branch [branch-name] + ``` + +1. **Tukar ke working branch**. Tukar ke branch yang ditentukan dan kemas kini direktori kerja dengan `git checkout`: + + ```bash + git checkout [branch-name] + ``` + +1. **Membuat kerja**. Pada ketika ini anda ingin menambahkan perubahan anda. Jangan lupa memberitahu Git mengenainya dengan arahan berikut: + + ```bash + git add . + git commit -m "my changes" + ``` + + Pastikan anda memberikan ayat dengan baik kepada komit anda, demi anda dan juga penjaga repo yang anda bantu. + +1. **Gabungkan kerja anda dengan `main` branch**. Pada satu ketika anda selesai bekerja dan anda ingin menggabungkan kerja anda dengan `main` branch. `main` branch mungkin telah berubah sementara itu, pastikan anda mengemas kini terlebih dahulu kepada yang terbaru dengan arahan berikut: + + ```bash + git checkout main + git pull + ``` + + Pada ketika ini anda ingin memastikan bahawa apa-apa _conflicts_, keadaan di mana Git tidak dapat dengan mudah _combine_ perubahan berlaku di working branch anda. Oleh itu, jalankan arahan berikut: + + ```bash + git checkout [branch_name] + git merge main + ``` + + Ini akan membawa semua perubahan dari `main` ke branch anda dan semoga anda dapat meneruskannya. Sekiranya tidak, VS Code akan memberitahu anda di mana Git _confused_ dan anda hanya mengubah fail yang terjejas untuk mengatakan kandungan mana yang paling tepat. + +1. **Hantar kerja anda ke GitHub**. Menghantar karya anda ke GitHub bermaksud dua perkara. Menolak branch anda ke repo anda dan kemudian membuka PR, Tarik Permintaan (Pull Request). + + ```bash + git push --set-upstream origin [branch-name] + ``` + + Perintah di atas membuat branch untuk forked repo. + +1. **Buka Tarik Permintaan (Pull Request)** Seterusnya, anda mahu membuka tarik permintaan (Pull Request). Anda melakukannya dengan menavigasi ke repo bercabang di GitHub. Anda akan melihat petunjuk di GitHub di mana ia bertanya sama ada anda mahu membuat tarik permintaan (Pull Request) baru, anda mengkliknya dan anda akan dibawa ke antara muka di mana anda boleh menukar tajuk mesej komit, berikan keterangan yang lebih sesuai. Sekarang penyelenggara repo yang anda garpu akan melihat PR ini dan _fingers crossed_ mereka akan menghargai dan _merge_ tarik permintaan (Pull Request) anda. Anda telah menjadi penyumbang, yay:) + +1. **Bersihkan**. Menjadikan amalan baik untuk _cleanup_ selepas anda. Anda mahu membersihkan local branch dan branch yang anda dorong ke GitHub. Pertama marilah hapuskannya secara tempatan dengan arahan berikut: + + ```bash + git branch -d [branch-name] + ``` + + Pastikan anda pergi ke halaman GitHub untuk forked repo seterusnya dan keluarkan branch terpencil yang baru anda tolak. + +`Tarik Permintaan (Pull request)` nampaknya istilah yang tidak bermoral kerana anda benar-benar mahu mendorong perubahan anda ke projek. Tetapi penyelenggara (pemilik projek) atau pasukan inti perlu mempertimbangkan perubahan anda sebelum menggabungkannya dengan "main" branch projek, jadi anda benar-benar meminta keputusan perubahan dari penyelenggara. + +Tarik permintaan (Pull Request) adalah tempat untuk membandingkan dan membincangkan perbezaan yang diperkenalkan di cabang dengan ulasan, komen, ujian bersepadu, dan banyak lagi. Tarik permintaan (Pull Request) yang baik mengikuti kira-kira peraturan yang sama dengan pesanan pesanan. Anda dapat menambahkan rujukan ke masalah dalam pelacak masalah, ketika pekerjaan Anda misalnya menyelesaikan masalah. Ini dilakukan dengan menggunakan `#` diikuti dengan jumlah masalah (issue) anda. Contohnya `# 97`. + +🀞 Jari memintas bahawa semua cek lulus dan pemilik projek menggabungkan perubahan anda ke dalam projek🀞 + +Kemas kini working branch tempatan anda sekarang dengan semua komit baru dari branch terpencil yang sesuai di GitHub: + +`git pull` + +## Bagaimanakah menyumbang kepada sumber terbuka + +Pertama, marilah kita cari repositori - atau: repo - di GitHub yang menarik bagi anda dan yang anda ingin menyumbang perubahan. Anda mahu menyalin kandungannya ke mesin kami. + +βœ… Kaedah yang baik untuk mencari repo 'mesra pemula (beginner-friendly)' adalah dengan [cari mengikut tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). + +![Salin repo secara tempatan](images/clone_repo.png) + +Terdapat beberapa cara menyalin kod. Salah satu cara adalah dengan "mengklon" kandungan repositori, menggunakan HTTPS, SSH, atau menggunakan GitHub CLI (Command Line Interface). + +Buka terminal dan klon repo seperti di bawah: +`git clone https://github.com/ProjectURL` + +Untuk kerja dengan projek tersebut, tukar the fail kanan: +`cd ProjectURL` + +And juga boleh membuka keseluruhan projek dengan [Codespaces](https://github.com/features/codespaces), Penyunting kod terbitan GitHub / persekitaran pengembangan awan, atau [GitHub Desktop](https://desktop.github.com/). + +Akhirnya, anda boleh memuat turun kod dalam bentuk zip. + +### Beberapa perkara menarik mengenai GitHub + +Anda boleh membintangi, menonton, dan / atau "fork" mana-mana repositori awam di GitHub. Anda boleh mencari repositori berbintang anda di menu lungsur kanan atas. Ia seperti penanda buku, tetapi untuk kod. + +Projek mempunyai pelacak masalah, kebanyakannya di GitHub di tab "Isu" kecuali dinyatakan sebaliknya, di mana orang membincangkan masalah yang berkaitan dengan projek. Dan tab Tarik Permintaan adalah tempat orang membincangkan dan mengkaji perubahan yang sedang berlangsung. + +Projek mungkin juga ada perbincangan di forum, senarai surat, atau saluran sembang seperti Slack, Discord atau IRC. + +βœ… Lihatlah repo GitHub baru anda dan cuba beberapa perkara, seperti menyunting tetapan, menambahkan maklumat ke repo anda, dan membuat projek (seperti papan Kanban). Banyak yang boleh anda lakukan! + +--- + +### πŸš€ Cabaran + +Berpasangan dengan rakan untuk mengerjakan kod masing-masing. Buat projek secara kolaboratif, fork kod, buat branch dan gabungkan perubahan. + +## Kuiz Pasca Kuliah +[Kuiz Pasca Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/4) + +## Mengkaji dan belajar sendiri + +Membaca tentang [menyumbang kepada sumber terbuka](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). + +[Git nota](https://training.github.com/downloads/github-git-cheat-sheet/). + +Berlatih, berlatih, berlatih. GitHub mempunyai jalan pembelajaran yang hebat yang tersedia melalui [lab.github.com](https://lab.github.com/): + +- [Minggu pertama di GitHub](https://lab.github.com/githubtraining/first-week-on-github) + +Anda juga akan menemui makmal yang lebih maju. + +## Tugasan + +Selesaikan [Minggu pertama di GitHub (training lab)](https://lab.github.com/githubtraining/first-week-on-github) \ No newline at end of file diff --git a/1-getting-started-lessons/3-accessibility/translations/README.ms.md b/1-getting-started-lessons/3-accessibility/translations/README.ms.md new file mode 100644 index 00000000..20afd58f --- /dev/null +++ b/1-getting-started-lessons/3-accessibility/translations/README.ms.md @@ -0,0 +1,220 @@ +# Membuat Halaman Web yang Boleh Diakses + +![Semua Tentang Kebolehcapaian](../webdev101-a11y.png) +> Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac) + +## Kuiz Pra Kuliah +[Kuiz Pra Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/5) + +> Kekuatan Web berada dalam kesejagatannya. Akses oleh semua orang tanpa mengira kecacatan adalah aspek penting. +> +> \- Sir Timothy Berners-Lee, Pengarah W3C dan penemu World Wide Web + +Petikan ini dengan jelas menunjukkan pentingnya membuat laman web yang boleh diakses. Aplikasi yang tidak dapat diakses oleh semua orang adalah definisi pengecualian. Sebagai pembangun laman web, kita harus sentiasa mempunyai fikiran aksesibiliti. Dengan fokus ini dari awal, anda akan dapat memastikan semua orang dapat mengakses halaman yang anda buat. Dalam pelajaran ini, anda akan mengetahui tentang alat yang dapat membantu anda memastikan bahawa aset web anda dapat diakses dan bagaimana membina dengan mempertimbangkan kebolehcapaian. + +## Alat untuk digunakan + +### Pembaca skrin + +Salah satu alat kebolehcapaian yang terkenal ialah pembaca skrin. + +[Pembaca Skrin](https://en.wikipedia.org/wiki/Screen_reader) adalah pelanggan yang biasa digunakan untuk mereka yang mengalami masalah penglihatan Semasa kita menghabiskan masa untuk memastikan penyemak imbas menyampaikan maklumat yang ingin kita kongsi dengan betul, kita juga harus memastikan pembaca skrin melakukan perkara yang sama. + +Pada asasnya, pembaca skrin akan membaca halaman dari atas ke bawah dengan didengar. Sekiranya halaman anda semua teks, pembaca akan menyampaikan maklumat dengan cara yang serupa dengan penyemak imbas. Sudah tentu, laman web jarang hanya teks; mereka akan mengandungi pautan, grafik, warna, dan komponen visual lain. Perhatian mesti diambil untuk memastikan bahawa maklumat ini dibaca dengan betul oleh pembaca skrin. + +Setiap pembangun web harus membiasakan diri dengan pembaca skrin. Seperti yang dinyatakan di atas, ini adalah pelanggan yang akan digunakan pengguna anda Sama seperti anda mengetahui bagaimana penyemak imbas beroperasi, anda harus mengetahui cara pembaca skrin beroperasi. Nasib baik pembaca skrin dimasukkan ke dalam kebanyakan sistem operasi, dan banyak penyemak imbas mengandungi sambungan untuk meniru pembaca skrin. + +βœ… Cuba pelanjutan atau alat penyemak imbas pembaca skrin. Yang hanya berfungsi pada Windows ialah [JAWS](https://webaim.org/articles/jaws/). Penyemak imbas juga mempunyai alat bawaan yang dapat digunakan untuk tujuan ini; cuba [alat penyemak imbas Edge yang berfokus kebolehaksesan ini](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features). + +### Pemeriksa Kontras + +Warna di laman web perlu dipilih dengan teliti untuk menjawab keperluan pengguna buta warna atau orang yang mengalami kesukaran untuk melihat warna kontras rendah. + +βœ… Uji laman web yang anda gemari untuk penggunaan warna dengan pelanjutan penyemak imbas seperti [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). Apakah anda telah belajar? + +### Lighthouse + +Di kawasan alat pembangun penyemak imbas (developer tool area) anda, anda akan menemui alat Lighthouse. Alat ini penting untuk mendapatkan pandangan pertama mengenai kebolehaksesan (serta analisis lain) dari laman web. Walaupun penting untuk tidak bergantung sepenuhnya pada Lighthouse, skor 100% sangat membantu sebagai asas. + +βœ… Cari Lighthouse pada panel alat pembangun penyemak imbas anda dan jalankan analisis di mana-mana laman web. Apakah yang anda telah cari? + +## Reka bentuk untuk kebolehcapaian + +Kebolehcapaian adalah topik yang agak besar. Untuk membantu anda, terdapat banyak sumber yang ada. + +- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers) + +Walaupun kami tidak dapat merangkumi setiap aspek dalam membuat laman web yang dapat diakses, berikut adalah beberapa prinsip utama yang ingin anda laksanakan. Merancang halaman yang dapat diakses dari awal **selalu** lebih mudah daripada kembali ke halaman yang ada untuk menjadikannya mudah diakses. + +## Prinsip paparan yang baik + +### Palet warna selamat + +Orang melihat dunia dengan cara yang berbeza, dan ini termasuk warna. Semasa memilih skema warna untuk laman web anda, anda harus memastikannya dapat diakses oleh semua orang. Salah satu alat yang hebat [untuk menghasilkan palet warna ialah Warna Selamat](http://colorsafe.co/). + +βœ… Kenalpasti laman web yang sangat bermasalah dalam penggunaan warnanya. Kenapa? + +### Sorot teks dengan betul + +Menonjolkan teks mengikut warna, [font weight](https://developer.mozilla.org/docs/Web/CSS/font-weight), atau [text decoration](https://developer.mozilla.org/docs/Web/CSS/text-decoration) tidak memberitahu pembaca skrin mengenai kepentingannya. Sesuatu perkataan boleh dicetak tebal kerana itu adalah kata kunci, atau kerana kata pertama dan pereka memutuskan bahawa perkataan itu harus tebal. + +Apabila frasa tertentu perlu diserlahkan, gunakan elemen `` atau ``. Ini akan menunjukkan kepada pembaca skrin bahawa item tersebut penting. + +### Guna HTML dengan betul + +Dengan CSS dan JavaScript, elemen boleh kelihatan seperti jenis kawalan. `` dapat digunakan untuk membuat `