From d9fe1c6ee93dcc9b11afec2df82322e0e4063062 Mon Sep 17 00:00:00 2001 From: Marc Duiker Date: Mon, 16 Nov 2020 22:44:44 +0100 Subject: [PATCH 001/250] Halfway through the NL translation of 1-getting started. --- .../translations/README.nl.md | 193 ++++++++++++++++++ 1 file changed, 193 insertions(+) create mode 100644 1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md new file mode 100644 index 00000000..56ea1076 --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md @@ -0,0 +1,193 @@ +# Introductie van Programmeertalen en Bijbehorend Vakgereedschap + +Deze les beschrijft de basis over programmeertalen. De onderwerpen zijn van toepassing op de meeste hedendaagse programeertalen. In het 'Vakgereedschap' onderdeel leer je over nuttige toepassingen die je helpen als ontwikkelaar. + +![Introductie Programmeren](webdev101-programming.png) +> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) + +## Pre-Lecture Quiz + +[Pre-lecture quiz](1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md) + +## Introductie + +In deze les hebben we het over: + +- Wat is programmeren? +- Verschillende programmeertaal typen. +- Basis elementen van een programma. +- Nuttige toepassingen en gereedschap voor de professionele ontwikkelaar. + +## Wat is programmeren? + +Programmeren (ook wel coderen genoemd) is het process van het schrijven van instructies naar een apparaat, zoals een computer of een mobieltje. We schrijven deze instructies met een programmeertaal, welke wordt geinterpreteerd door het apparaat. Deze sets van instructies staan bekend onder verschillende namen zoals; *programma*, *computer programma*, *applicatie (app)*, en *executable*. + +Een *programma* kan van alles zijn wat met code is geschreven; websites, spellen, en mobiele apps zijn programmas. Hoewel het mogelijk is om een programma te maken zonder code te schrijven, is de onderliggende logica, dat wordt geinterpreteerd door het apparaat, hoogstwaarschijnlijk wel geschreven met code. Een programma dat *draait* of *code uitvoert* voert instructies uit. Het apparaat wat je nu gebruikt om deze les te volgen draait een programma om deze tekst op het scherm te tonen. + +✅ Doe wat onderzoek: wie wordt gezien als werelds eerste computer programmeur? + +## Programmeertalen + +Programmeertalen hebben maar één hoofddoel: het voor ontwikkelaars mogelijk maken om instructies te sturen naar een apparaat. Apparaten begrijpen slechts binaire instructies (1-en en 0-en), en voor de meeste ontwikkelaars is dit niet een erg efficiente manier om instructies te schrijven. Programmeertalen zijn daarom een mooi communicatiemiddel tussen mensen en computers. + +Programmeertalen zijn er in verschillende uitvoeringen en hebben soms specifieke doeleinden. Javascript wordt bijvoorbeeld voornamelijk gebruikt voor webapplicaties terwijl Bash hoofdzakelijk wordt gebruikt voor operating systemen. + +*Lagere programmertalen* hebben over het algemeen minder stappen nodig dan *hogere programmeertalen* om door een apparaat geinterpreteerd te worden. Hogere programmeertalen zijn echter populairder omdat ze veel leesbaarder zijn. Een voorbeeld van een hogere programmeertaal is Javascript. + +Het volgende codevoorbeeld laat het verschil zien tussen een hogere (Javascript) en een lagere (ARM assembly) programeertaal. + +```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 +``` + +Geloof het of niet maar beide codevoorbeelden *doen exact hetzelfde*: het printen van een Fibonacci reeks tot en met het tiende getal. + +✅ Een Fibonacci reeks is [gedefinieerd](https://nl.wikipedia.org/wiki/Rij_van_Fibonacci) als een set van getallen waarvan elk getal de som is van de vorige twee getallen, beginnend met 0 en 1. + +## Elementen van een programma + +Een enkele instructie in een programma wordt ook wel *statement* genoemd en bevat vaak een karakter of witruimte om aan te geven waar de instructie begint en eindigt. Hoe een programma eindigt varieert per programmertaal. + +De meeste programma's zijn afhankelijk van gegevens, die ofwel door een gebruiker wordt ingevoerd, ofwel ergens vandaan wordt gehaald. De statements zijn afhankelijk van deze data om instructies uit te voeren. Data is van invloed hoe een programma reageert. Daarom hebben programmeertalen een manier een tijdelijk data op te slaan om later weer gebruikt te worden. Deze data wordt ook wel *variabelen* genoemd. Variabeled zijn statements die een apparaat een instructie geven om de data op te slaan in het geheugen van het apparaat. Variabelen in programma's zijn gelijkwaardig aan hun tegenhanger in algebra. Ook daar hebben variabelen een unieke naam en kan de waarde veranderen in de loop der tijd. + +Niet alle statements in een programma worden altijd uitgevoerd. Dit is meestal zo bedacht door de ontwikkelaar of het treed onbedoelt op bij onverwachte fouten. Het is een vorm van controle in een applicatie dat het robuuster en onderhoudbaarder maakt. De keuze in welke statements worden uitgevoerd hangt vaak af van de data en of dit aan bepaalde condities voldoet. Een veelvoorkomend statement in een moderne programmeertaal om te controle van een programma te beinvloeden is het `if..else` statement. + +✅ Je leert meer over het `if..else` statement in de volgende lessen. + +## Vakgereedschap + +[![Vakgereedschap](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Vakgereedschap") + +In dit onderdeel leer je welke applicaties je wellicht handig vindt om mee te werken als je je professionele ontwikkel carriere start. + +Een **ontwikkelomgeving** is een unieke set van applicaties wat een ontwikkelaar regelmatig gebruikt om software te schrijven. Sommige van deze applicaties zijn aangepast voor de specifieke eisen die de ontwikkelaar heeft en kunnen veranderen over de tijd. Dit kan te maken hebben met het type werk wat de ontwikkelaar uitvoert, bijvoorbeeld persoonlijke projecten versus projecten voor werk, of als ze een andere programmeertaal moeten gebruiken. Ontwikkelomgevingen zijn zo uniek als de ontwikkelaars die ze gebruikten. + +### Editors + +One of the most crucial tools for software development is the editor. Editors are where you write your code and sometimes where you will run your code. + +Developers rely on editors for a few additional reasons: + +- *Debugging* Discovering bugs and errors by stepping through code, line by line. Some editors have debugging capabilities, or can be customized and added for specific programming languages. +- *Syntax highlighting* Adds colors and text formatting to code, makes it easier to read. Most editors allow customized syntax highlighting. +- *Extensions and Integrations* Additions that are specialized for developers, by developers, for access to additional tools that aren't built into the base editor. For example, many developers also need a way to document their code and explain how it works and will install a spell check extension to check for typos. Most of these additions are intended for use within a specific editor, and most editors come with a way to search for available extensions. +- *Customization* Most editors are extremely customizable, and each developer will have their own unique development environment that suits their needs. Many also allow developers to create their own extension. + +#### Popular Editors and Web Development Extensions + +- [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) + +### Browsers + +Another crucial tool is the browser. Web developers rely on the browser to observe how their code runs on the web, it's also used to view visual elements of a web page that are written in the editor, like HTML. + +Many browsers come with *developer tools* (DevTools) that contain a set of helpful features and information to assist developers to collect and capture important insights about their application. For example: If a web page has errors, it's sometimes helpful to know when they occurred. DevTools in a browser can be configured to capture this information. + +#### Popular Browsers and 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) + +### Command Line Tools + +Some developers prefer a less graphical view for their daily tasks and rely on the command line to achieve this. Developing code requires a significant amount of typing, and some developers prefer to not disrupt their flow on the keyboard and will use keyboard shortcuts to swap between desktop windows, work on different files, and use tools. Most tasks can be completed with a mouse, but one benefit of using the command line is that a lot can be done with command line tools without the need of swapping between the mouse and keyboard. Another benefit of the command line is that they're configurable and you can save your custom configuration, change it later, and also import it to new development machines. Because development environments are so unique to each developer, some will avoid using the command line, some will rely on it entirely, and some prefer a mix of the two. + +### Popular Command Line Options + +Options for the command line will differ based on the operating system you use. + +*💻 = comes preinstalled on the operating system.* + +#### 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) (also known as 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/) (💻 on most operating sytems) +- [NPM](https://www.npmjs.com/) +- [Yarn](https://classic.yarnpkg.com/en/docs/cli/) + +### Documentation + +When a developer wants to learn something new, they'll most likely turn to documentation to learn how to use it. Developers rely on documentation often to guide them through how to use tools and languages properly, and also to gain deeper knowledge of how it works. + +#### Popular Documentation on Web Development + +- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Frontend Masters](https://frontendmasters.com/learn/) + +✅ Do some research: Now that you know the basics of a web developer's environment, compare and contrast it with a web designer's environment. + +--- + +## 🚀 Challenge + +Compare some programming languages. What are some of the unique traits of JavaScript vs. Java? How about COBOL vs. Go? + +## Post-Lecture Quiz +[Post-lecture quiz](1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md) + +## 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? + +## Assignment + +[Reading the Docs](1-getting-started-lessons/1-intro-to-programming-languages/assignment.md) From 760b37797f472cbdcacf3a6afd88ce23539cbc8f Mon Sep 17 00:00:00 2001 From: hexatester Date: Wed, 18 Nov 2020 12:44:53 +0700 Subject: [PATCH 002/250] add indonesian translations --- .../.github/post-lecture-quiz.id.md | 18 ++ .../.github/pre-lecture-quiz.id.md | 17 ++ .../1-data-types/translations/README.id.md | 195 ++++++++++++++++++ .../translations/assignment.id.md | 11 + 4 files changed, 241 insertions(+) create mode 100644 2-js-basics/1-data-types/translations/.github/post-lecture-quiz.id.md create mode 100644 2-js-basics/1-data-types/translations/.github/pre-lecture-quiz.id.md create mode 100644 2-js-basics/1-data-types/translations/README.id.md create mode 100644 2-js-basics/1-data-types/translations/assignment.id.md diff --git a/2-js-basics/1-data-types/translations/.github/post-lecture-quiz.id.md b/2-js-basics/1-data-types/translations/.github/post-lecture-quiz.id.md new file mode 100644 index 00000000..61a8df5c --- /dev/null +++ b/2-js-basics/1-data-types/translations/.github/post-lecture-quiz.id.md @@ -0,0 +1,18 @@ +*Complete this quiz after the lesson by checking one answer per question.* + +1. Konstanta sama dengan `let` dan` var` untuk mendeklarasikan variabel kecuali + +- [ ] Konstanta harus diinisialisasi +- [ ] Konstanta dapat diubah +- [ ] Konstanta dapat ditetapkan kembali + +2. Numbers dan ____ adalah primitif JavaScript yang menangani data numerik + +- [ ] bigint +- [ ] boolean +- [ ] star + +3. String dapat berada di antara tanda kutip tunggal dan ganda + +- [ ] benar +- [ ] salah diff --git a/2-js-basics/1-data-types/translations/.github/pre-lecture-quiz.id.md b/2-js-basics/1-data-types/translations/.github/pre-lecture-quiz.id.md new file mode 100644 index 00000000..f29ae535 --- /dev/null +++ b/2-js-basics/1-data-types/translations/.github/pre-lecture-quiz.id.md @@ -0,0 +1,17 @@ +*Selesaikan kuis ini di kelas* + +1. Boolean adalah tipe data yang dapat Anda gunakan untuk menguji panjang string + +- [ ] benar +- [ ] salah + +2. Berikut ini adalah operasi yang dapat Anda lakukan pada string + +- [ ] concatenation +- [ ] appending +- [ ] splicing + +3. `==` dan `===` dapat dipertukarkan + +- [ ] benar +- [ ] salah diff --git a/2-js-basics/1-data-types/translations/README.id.md b/2-js-basics/1-data-types/translations/README.id.md new file mode 100644 index 00000000..283bc44b --- /dev/null +++ b/2-js-basics/1-data-types/translations/README.id.md @@ -0,0 +1,195 @@ +# JavaScript Basics: Data Types + +![Dasar-dasar JavaScript - Tipe data](../images/webdev101-js-datatypes.png) +> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac) + +## Kuis Pra-Kuliah +[Kuis pra-Kuliah](.github/pre-lecture-quiz.id.md) + +Pelajaran ini mencakup dasar-dasar JavaScript, bahasa yang menyediakan interaktivitas di web. + +[![Jenis data di JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Jenis data di JavaScript") + +Mari kita mulai dengan variabel dan tipe data yang mengisinya! + +## Variabel + +Variabel menyimpan nilai yang dapat digunakan dan diubah di seluruh kode Anda. + +Membuat dan **mendeklarasikan** variabel memiliki sintaks berikut **[kata kunci] [nama]**. Itu terdiri dari dua bagian: + +- **Kata kunci (Keywords)**. Kata kunci bisa `let` atau `var`. + + > Catatan, Mereka kata kunci `let` diperkenalkan di ES6 dan memberi variabel Anda apa yang disebut _block scope_. Anda disarankan untuk menggunakan `let` di atas `var`. Kami akan membahas cakupan blok lebih mendalam di bagian mendatang. +- **Nama variabel**, ini adalah nama yang Anda pilih sendiri. + +### Tugas - bekerja dengan variabel + +1. **Deklarasikan variabel**. Mari kita deklarasikan variabel menggunakan kata kunci `let`: + + ```javascript + let variabelSaya; + ``` + + `variabelSaya` sekarang telah dideklarasikan menggunakan kata kunci `let`. Saat ini tidak memiliki nilai. + +1. **Tetapkan nilai**. Simpan nilai dalam variabel dengan operator `=`, diikuti dengan nilai yang diharapkan. + + ```javascript + variabelSaya = 123; + ``` + + > Catatan: penggunaan `=` dalam pelajaran ini berarti kita menggunakan "operator penugasan (assignment operator)", yang digunakan untuk menetapkan nilai ke variabel. Itu *tidak menunjukkan kesetaraan*. + + `variabelSaya` sekarang telah *diinisialisasi (initialized)* dengan nilai 123. + +1. **Refaktor**. Ganti kode Anda dengan pernyataan berikut. + + ```javascript + let variabelSaya = 123; + ``` + + Di atas disebut inisialisasi _explisit_ saat variabel dideklarasikan dan diberi nilai pada saat yang sama. + +1. **Ubah nilai variabel**. Ubah nilai variabel dengan cara berikut: + + ```javascript + variabelSaya = 321; + ``` + + Setelah variabel dideklarasikan, Anda dapat mengubah nilainya di titik mana pun dalam kode Anda dengan operator `=` dan nilai baru. + + ✅ Cobalah! Anda dapat menulis JavaScript langsung di browser Anda. Buka jendela browser dan arahkan ke Alat Pengembang. Di konsol, Anda akan menemukan prompt; ketik `let variabelSaya = 123`, tekan enter, lalu ketik `variabelSaya`. Apa yang terjadi? Catatan, Anda akan mempelajari lebih lanjut tentang konsep ini di pelajaran berikutnya. + +## Konstanta (Constants) + +Deklarasi dan inisialisasi konstanta mengikuti konsep yang sama sebagai variabel, dengan pengecualian kata kunci `const`. Konstanta biasanya dideklarasikan dengan semua huruf besar. + +```javascript +const VARIABEL_SAYA = 123; +``` + +Konstanta mirip dengan variabel, dengan dua pengecualian: + +- **Harus punya nilai**. Konstanta harus diinisialisasi, atau kesalahan akan terjadi saat menjalankan kode. +- **Referensi tidak dapat diubah**. Referensi konstanta tidak dapat diubah setelah diinisialisasi, atau kesalahan akan terjadi saat menjalankan kode. Mari kita lihat dua contoh: + - **Nilai sederhana**. Berikut ini TIDAK diperbolehkan: + + ```javascript + const PI = 3; + PI = 4; // tidak diperbolehkan + ``` + + - **Referensi objek dilindungi**. Berikut ini TIDAK diperbolehkan. + + ```javascript + const obj = { a: 3 }; + obj = { b: 5 } // tidak diperbolehkan + ``` + + - **Nilai objek tidak dilindungi**. Berikut diperbolehkan: + + ```javascript + const obj = { a: 3 }; + obj.a = 5; // diperbolehkan + ``` + + Di atas Anda mengubah nilai objek tetapi bukan referensi itu sendiri, yang membuatnya diizinkan. + + > Catatan, `const` berarti referensi dilindungi dari penugasan ulang. Nilainya tidak _immutable_ dan bisa berubah, terutama jika itu adalah konstruksi kompleks seperti sebuah objek. + +## Tipe Data + +Variabel dapat menyimpan berbagai jenis nilai, seperti angka dan teks. Berbagai jenis nilai ini dikenal sebagai **tipe data**. Tipe data adalah bagian penting dari pengembangan perangkat lunak karena membantu pengembang membuat keputusan tentang bagaimana kode harus ditulis dan bagaimana perangkat lunak harus dijalankan. Selain itu, beberapa tipe data memiliki fitur unik yang membantu mengubah atau mengekstrak informasi tambahan dalam sebuah nilai. + +✅ Tipe Data juga disebut sebagai data primitif JavaScript, karena mereka adalah tipe data tingkat terendah yang disediakan oleh bahasa. Ada 6 tipe data primitif: string, number, bigint, boolean, undefined, dan symbol. Luangkan waktu sebentar untuk memvisualisasikan apa yang mungkin diwakili oleh masing-masing primitif ini. Apa itu `zebra`? Bagaimana dengan `0`? `true`? + +### Angka (Numbers) + +Pada bagian sebelumnya nilai `variabelSaya` adalah tipe data angka. + +`let variabelSaya = 123;` + +Variabel dapat menyimpan semua jenis angka, termasuk desimal atau angka negatif. Angka juga dapat digunakan dengan operator aritmatika, yang dibahas di [bagian selanjutnya](#Operator-Aritmatika). + +### Operator Aritmatika + +Ada beberapa jenis operator untuk digunakan saat menjalankan fungsi aritmatika, dan beberapa di antaranya tercantum di sini: + +| Simbol | Deskripsi | Contoh | +|--------|-----------------------------------------------------|--------------------------------------------| +| `+` | **Penjumlahan**: Menghitung jumlah dari dua angka | `1 + 2 //hasil yang diharapkan adalah 3` | +| `-` | **Pengurangan**: Menghitung selisih dua angka | `1 - 2 //hasil yang diharapkan adalah -1` | +| `*` | **Perkalian**: Menghitung hasil kali dua angka | `1 * 2 //hasil yang diharapkan adalah 2` | +| `/` | **Pembagian**: Menghitung hasil bagi dari dua angka | `1 / 2 //hasil yang diharapkan adalah 0.5` | +| `%` | **Sisa**: Menghitung sisa dari pembagian dua angka | `3 % 2 //hasil yang diharapkan adalah 1` | + +✅ Cobalah! Coba operasi aritmatika di konsol browser Anda. Apakah hasilnya mengejutkan Anda? + +### String + +String adalah kumpulan karakter yang berada di antara tanda kutip tunggal atau ganda. + +- `'Ini string'` +- `"Ini juga string"` +- `let myString = 'Ini adalah nilai string yang disimpan dalam variabel';` + +Ingatlah untuk menggunakan tanda kutip saat menulis string, atau JavaScript akan menganggapnya sebagai nama variabel. + +### Memformat String + +String bersifat tekstual, dan akan membutuhkan pemformatan dari waktu ke waktu. + +Untuk **menggabungkan (concatenate)** dua string atau lebih, atau menggabungkannya, gunakan operator `+`. + +```javascript +let myString1 = "Hello"; +let myString2 = "World"; + +myString1 + myString2 + "!"; //HelloWorld! +myString1 + " " + myString2 + "!"; //Hello World! +myString1 + ", " + myString2 + "!"; //Hello, World! + +``` + +✅ Mengapa `1 + 1 = 2` di JavaScript, tetapi` '1' + '1' = 11? `Pikirkanlah. Bagaimana dengan `'1' + 1`? + +**Template literals** adalah cara lain untuk memformat string, kecuali sebagai pengganti tanda kutip, digunakan backtick. Apa pun yang bukan teks biasa harus ditempatkan di dalam placeholder `${ }`. Ini termasuk variabel apa pun yang mungkin berupa string. + +```javascript +let myString1 = "Hello"; +let myString2 = "World"; + +`${myString1} ${myString2}!` //Hello World! +`${myString1}, ${myString2}!` //Hello World! +``` + +Anda dapat mencapai tujuan pemformatan Anda dengan salah satu metode, tetapi template literal akan menghormati spasi dan jeda baris apa pun. + +✅ Kapan Anda akan menggunakan template literal dibanding string biasa? + +### Boolean + +Boolean hanya dapat berupa dua nilai: `true` atau `false`. Boolean dapat membantu membuat keputusan tentang baris kode mana yang harus dijalankan ketika kondisi tertentu terpenuhi. Dalam banyak kasus, [operator](#operator) membantu pengaturan nilai Boolean dan Anda akan sering melihat dan menulis variabel yang diinisialisasi atau nilainya diperbarui dengan operator. + +- `let myTrueBool = true` +- `let myFalseBool = false` + +✅ Variabel dapat dianggap 'benar (truthy)' jika dievaluasi ke boolean `true`. Menariknya, di JavaScript, [semua nilai adalah benar (truthy) kecuali jika didefinisikan sebagai salah](https://developer.mozilla.org/en-US/docs/Glossary/Truthy). + +--- + +## 🚀 Tantangan + +JavaScript terkenal karena cara yang mengejutkan dalam menangani tipe data pada kesempatan tertentu. Lakukan sedikit riset tentang 'kejutaan' ini. Misalnya: sensitivitas kasus bisa menggigit! Coba ini di konsol Anda: `let usia = 1; let Usia = 2; usia == Usia` (meghasilkan `false` - kenapa?). Kejutan lain apa yang bisa kamu temukan? + +## Kuis Pasca-Kuliah +[Kuis pasca-kuliah](.github/post-lecture-quiz.id.md) + +## Review & Belajar Mandiri + +Lihat [daftar latihan JavaScript ini](https://css-tricks.com/snippets/javascript/) dan coba salah satunya. Apa yang kamu pelajari? + +## Tugas + +[Praktek Tipe Data](assignment.id.md) diff --git a/2-js-basics/1-data-types/translations/assignment.id.md b/2-js-basics/1-data-types/translations/assignment.id.md new file mode 100644 index 00000000..c36652d6 --- /dev/null +++ b/2-js-basics/1-data-types/translations/assignment.id.md @@ -0,0 +1,11 @@ +# Data Types Practice + +## Instructions + +Imagine you are building a shopping cart. Write some documentation on the data types that you would need to complete your shopping experience. How did you arrive at your choices? + +## Rubric + +| Kriteria | Teladan | Memenuhi Syarat | Perlu Perbaikan | +|----------|----------------------------------------------------------------------------------------|------------------------------|----------------------------| +| | Enam tipe data didaftar dan dieksplorasi secara rinci, mendokumentasikan penggunaannya | Empat tipe data dieksplorasi | Dua tipe data dieksplorasi | From bfe7a7b8220358de173d58496e40139893f40f43 Mon Sep 17 00:00:00 2001 From: hexatester Date: Wed, 18 Nov 2020 12:51:37 +0700 Subject: [PATCH 003/250] update 2-1 assignment.id --- 2-js-basics/1-data-types/translations/assignment.id.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/2-js-basics/1-data-types/translations/assignment.id.md b/2-js-basics/1-data-types/translations/assignment.id.md index c36652d6..7dd07a01 100644 --- a/2-js-basics/1-data-types/translations/assignment.id.md +++ b/2-js-basics/1-data-types/translations/assignment.id.md @@ -1,10 +1,10 @@ -# Data Types Practice +# Praktek Tipe Data -## Instructions +## Instruksi -Imagine you are building a shopping cart. Write some documentation on the data types that you would need to complete your shopping experience. How did you arrive at your choices? +Bayangkan Anda sedang membuat keranjang belanja. Tulislah beberapa dokumentasi tentang tipe data yang Anda perlukan untuk melengkapi pengalaman berbelanja Anda. Bagaimana Anda sampai pada pilihan Anda? -## Rubric +## Rubrik | Kriteria | Teladan | Memenuhi Syarat | Perlu Perbaikan | |----------|----------------------------------------------------------------------------------------|------------------------------|----------------------------| From b20b3b52c1daa5e725cd2e3e25305bfc18b98891 Mon Sep 17 00:00:00 2001 From: Marc Duiker Date: Wed, 18 Nov 2020 12:16:49 +0100 Subject: [PATCH 004/250] Finished introduction --- .../translations/README.nl.md | 84 +++++++++---------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md index 56ea1076..3fe44fdb 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md @@ -1,26 +1,26 @@ # Introductie van Programmeertalen en Bijbehorend Vakgereedschap -Deze les beschrijft de basis over programmeertalen. De onderwerpen zijn van toepassing op de meeste hedendaagse programeertalen. In het 'Vakgereedschap' onderdeel leer je over nuttige toepassingen die je helpen als ontwikkelaar. +Deze les beschrijft de basis over programmeertalen. De onderwerpen zijn van toepassing op de meeste hedendaagse programeertalen. In het 'Vakgereedschap' onderdeel leer je over nuttige toepassingen die je helpen als web ontwikkelaar. -![Introductie Programmeren](webdev101-programming.png) +![Introductie Programmeren](../webdev101-programming.png) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz -[Pre-lecture quiz](1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) ## Introductie In deze les hebben we het over: - Wat is programmeren? -- Verschillende programmeertaal typen. +- Verschillende typen programmeertalen. - Basis elementen van een programma. -- Nuttige toepassingen en gereedschap voor de professionele ontwikkelaar. +- Nuttige toepassingen en gereedschap voor de professionele web ontwikkelaar. ## Wat is programmeren? -Programmeren (ook wel coderen genoemd) is het process van het schrijven van instructies naar een apparaat, zoals een computer of een mobieltje. We schrijven deze instructies met een programmeertaal, welke wordt geinterpreteerd door het apparaat. Deze sets van instructies staan bekend onder verschillende namen zoals; *programma*, *computer programma*, *applicatie (app)*, en *executable*. +Programmeren (ook wel coderen genoemd) is het process van het schrijven van instructies voor een apparaat, zoals een computer of een mobieltje. We schrijven deze instructies met een programmeertaal, welke wordt geinterpreteerd door het apparaat. Deze sets van instructies staan bekend onder verschillende namen zoals; *programma*, *computer programma*, *applicatie (app)*, en *executable*. Een *programma* kan van alles zijn wat met code is geschreven; websites, spellen, en mobiele apps zijn programmas. Hoewel het mogelijk is om een programma te maken zonder code te schrijven, is de onderliggende logica, dat wordt geinterpreteerd door het apparaat, hoogstwaarschijnlijk wel geschreven met code. Een programma dat *draait* of *code uitvoert* voert instructies uit. Het apparaat wat je nu gebruikt om deze les te volgen draait een programma om deze tekst op het scherm te tonen. @@ -28,9 +28,9 @@ Een *programma* kan van alles zijn wat met code is geschreven; websites, spellen ## Programmeertalen -Programmeertalen hebben maar één hoofddoel: het voor ontwikkelaars mogelijk maken om instructies te sturen naar een apparaat. Apparaten begrijpen slechts binaire instructies (1-en en 0-en), en voor de meeste ontwikkelaars is dit niet een erg efficiente manier om instructies te schrijven. Programmeertalen zijn daarom een mooi communicatiemiddel tussen mensen en computers. +Programmeertalen hebben maar één hoofddoel: het voor ontwikkelaars mogelijk maken om instructies te sturen naar een apparaat. Apparaten begrijpen slechts binaire instructies (1-en en 0-en), en voor de meeste ontwikkelaars is dit niet een erg efficiënte manier om instructies te schrijven. Programmeertalen zijn daarom een mooi communicatiemiddel tussen mensen en computers. -Programmeertalen zijn er in verschillende uitvoeringen en hebben soms specifieke doeleinden. Javascript wordt bijvoorbeeld voornamelijk gebruikt voor webapplicaties terwijl Bash hoofdzakelijk wordt gebruikt voor operating systemen. +Programmeertalen zijn er in verschillende uitvoeringen en hebben soms specifieke doeleinden. Javascript wordt bijvoorbeeld voornamelijk gebruikt voor webapplicaties terwijl Bash hoofdzakelijk wordt gebruikt voor besturingssystemen. *Lagere programmertalen* hebben over het algemeen minder stappen nodig dan *hogere programmeertalen* om door een apparaat geinterpreteerd te worden. Hogere programmeertalen zijn echter populairder omdat ze veel leesbaarder zijn. Een voorbeeld van een hogere programmeertaal is Javascript. @@ -73,7 +73,7 @@ back add r0,r1 end ``` -Geloof het of niet maar beide codevoorbeelden *doen exact hetzelfde*: het printen van een Fibonacci reeks tot en met het tiende getal. +Geloof het of niet, maar beide codevoorbeelden *doen exact hetzelfde*: het printen van een Fibonacci reeks tot en met het tiende getal. ✅ Een Fibonacci reeks is [gedefinieerd](https://nl.wikipedia.org/wiki/Rij_van_Fibonacci) als een set van getallen waarvan elk getal de som is van de vorige twee getallen, beginnend met 0 en 1. @@ -81,9 +81,9 @@ Geloof het of niet maar beide codevoorbeelden *doen exact hetzelfde*: het printe Een enkele instructie in een programma wordt ook wel *statement* genoemd en bevat vaak een karakter of witruimte om aan te geven waar de instructie begint en eindigt. Hoe een programma eindigt varieert per programmertaal. -De meeste programma's zijn afhankelijk van gegevens, die ofwel door een gebruiker wordt ingevoerd, ofwel ergens vandaan wordt gehaald. De statements zijn afhankelijk van deze data om instructies uit te voeren. Data is van invloed hoe een programma reageert. Daarom hebben programmeertalen een manier een tijdelijk data op te slaan om later weer gebruikt te worden. Deze data wordt ook wel *variabelen* genoemd. Variabeled zijn statements die een apparaat een instructie geven om de data op te slaan in het geheugen van het apparaat. Variabelen in programma's zijn gelijkwaardig aan hun tegenhanger in algebra. Ook daar hebben variabelen een unieke naam en kan de waarde veranderen in de loop der tijd. +De meeste programma's zijn afhankelijk van gegevens, die ofwel door een gebruiker wordt ingevoerd, ofwel ergens vandaan wordt gehaald. De statements zijn afhankelijk van deze data om instructies uit te voeren. Data is van invloed hoe een programma reageert. Daarom hebben programmeertalen een manier om tijdelijk data op te slaan eat later weer gebruikt wordt. Deze data wordt ook wel *variabelen* genoemd. Variabelen zijn statements die een apparaat een instructie geven om de data op te slaan in het geheugen van het apparaat. Variabelen in programma's zijn gelijkwaardig aan hun tegenhanger in algebra. Ook daar hebben variabelen een unieke naam en kan de waarde veranderen in de loop der tijd. -Niet alle statements in een programma worden altijd uitgevoerd. Dit is meestal zo bedacht door de ontwikkelaar of het treed onbedoelt op bij onverwachte fouten. Het is een vorm van controle in een applicatie dat het robuuster en onderhoudbaarder maakt. De keuze in welke statements worden uitgevoerd hangt vaak af van de data en of dit aan bepaalde condities voldoet. Een veelvoorkomend statement in een moderne programmeertaal om te controle van een programma te beinvloeden is het `if..else` statement. +Niet alle statements in een programma worden altijd uitgevoerd. Dit is meestal zo bedacht door de ontwikkelaar of het treed onbedoeld op bij onverwachte fouten. Het is een vorm van controle in een applicatie, dat het robuuster en onderhoudbaarder maakt. De keuze in welke statements worden uitgevoerd hangt vaak af van de data en of dit voldoet aan bepaalde condities. Een veelvoorkomend statement in een moderne programmeertaal om de controle van een programma te beïnvloeden is het `if..else` statement. ✅ Je leert meer over het `if..else` statement in de volgende lessen. @@ -91,22 +91,22 @@ Niet alle statements in een programma worden altijd uitgevoerd. Dit is meestal z [![Vakgereedschap](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Vakgereedschap") -In dit onderdeel leer je welke applicaties je wellicht handig vindt om mee te werken als je je professionele ontwikkel carriere start. +In dit onderdeel leer je welke applicaties je wellicht handig vindt om mee te werken als je je professionele web ontwikkelaar carrière start. -Een **ontwikkelomgeving** is een unieke set van applicaties wat een ontwikkelaar regelmatig gebruikt om software te schrijven. Sommige van deze applicaties zijn aangepast voor de specifieke eisen die de ontwikkelaar heeft en kunnen veranderen over de tijd. Dit kan te maken hebben met het type werk wat de ontwikkelaar uitvoert, bijvoorbeeld persoonlijke projecten versus projecten voor werk, of als ze een andere programmeertaal moeten gebruiken. Ontwikkelomgevingen zijn zo uniek als de ontwikkelaars die ze gebruikten. +Een **ontwikkelomgeving** is een unieke set van applicaties wat een ontwikkelaar regelmatig gebruikt om software te schrijven. Sommige van deze applicaties zijn aangepast voor de specifieke eisen die de ontwikkelaar heeft en kunnen veranderen over de tijd. Dit kan te maken hebben met het type werk wat de ontwikkelaar uitvoert, bijvoorbeeld persoonlijke projecten versus projecten voor werk, of als er een andere programmeertaal moeten worden gebruikt. Ontwikkelomgevingen zijn zo uniek als de ontwikkelaars die ze gebruiken. ### Editors -One of the most crucial tools for software development is the editor. Editors are where you write your code and sometimes where you will run your code. +Een van de meest cruciale applicaties voor software ontwikkeling is de code editor. In een editor schrijf je je code en soms run je daar ook je code. -Developers rely on editors for a few additional reasons: +Ontwikkelaars gebruiken editors ook om de volgende redenen: -- *Debugging* Discovering bugs and errors by stepping through code, line by line. Some editors have debugging capabilities, or can be customized and added for specific programming languages. -- *Syntax highlighting* Adds colors and text formatting to code, makes it easier to read. Most editors allow customized syntax highlighting. -- *Extensions and Integrations* Additions that are specialized for developers, by developers, for access to additional tools that aren't built into the base editor. For example, many developers also need a way to document their code and explain how it works and will install a spell check extension to check for typos. Most of these additions are intended for use within a specific editor, and most editors come with a way to search for available extensions. -- *Customization* Most editors are extremely customizable, and each developer will have their own unique development environment that suits their needs. Many also allow developers to create their own extension. +- *Debugging* Het regel voor regel runnen van je code om bugs te ontdekken. Sommige editors hebben debugging mogelijkheden, of kunnen aangepast worden voor specifieke programmeertalen. +- *Syntax markering* Voegt kleuren en tekst opmaak toe aan code om het leesbaarder te maken. De meeste editors hebben de mogelijkheid om dit aan te passen naar je eigen smaak. +- *Extensies en Integraties* Uitbreidingen van de editor, speciaal voor ontwikkelaars en gemaakt door ontwikkelaars, om extra functionaliteiten toe te voegen die standaard niet in de editor inzitten. Bijvoorbeeld een spellingscontrole extensie wat documentatie kan controleren op spelfouten. Vaak zijn extensies ontwikkeld voor een specifieke code editor. De meeste editors bieden een zoekfunctie om relevante extensies te vinden. +- *Persoonlijke instellingen* De meeste editors hebben instellingen die volledig aan te passen zijn naar de wens van de ontwikkelaar. Elke ontwikkelaar zal daarom een unieke ontwikkelomgeving hebben wat voldoet aan hun specifieke wensen. -#### Popular Editors and Web Development Extensions +#### Populaire Editors en Web Ontwikkeling Extensies - [Visual Studio Code](https://code.visualstudio.com/) - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) @@ -119,30 +119,30 @@ Developers rely on editors for a few additional reasons: ### Browsers -Another crucial tool is the browser. Web developers rely on the browser to observe how their code runs on the web, it's also used to view visual elements of a web page that are written in the editor, like HTML. +Nog een zeer belangrijke applicatie is de webbrowser. Web ontwikkelaars zijn afhankelijk van de browser om na te gaan hoe hun code draait op het web. De browser wordt ook gebruikt om de visuele elementen van een web pagina weer te geven die geschreven zijn in de editor, zoals HTML. -Many browsers come with *developer tools* (DevTools) that contain a set of helpful features and information to assist developers to collect and capture important insights about their application. For example: If a web page has errors, it's sometimes helpful to know when they occurred. DevTools in a browser can be configured to capture this information. +Veel browsers hebben ingebouwd *ontwikkel gereedschap* (DevTools) waarmee ontwikkelaars makkelijk inzicht kunnen krijgen over hun applicatie. Bijvoorbeeld: als een webpagina fouten heeft, is het handig om te weten wanneer die fouten zijn opgetreden. In zo'n situatie kan DevTools kan geconfigureerd worden om deze informatie te verzamelen. -#### Popular Browsers and DevTools +#### Populaire Browsers en 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) -### Command Line Tools +### Command Line Gereedschap -Some developers prefer a less graphical view for their daily tasks and rely on the command line to achieve this. Developing code requires a significant amount of typing, and some developers prefer to not disrupt their flow on the keyboard and will use keyboard shortcuts to swap between desktop windows, work on different files, and use tools. Most tasks can be completed with a mouse, but one benefit of using the command line is that a lot can be done with command line tools without the need of swapping between the mouse and keyboard. Another benefit of the command line is that they're configurable and you can save your custom configuration, change it later, and also import it to new development machines. Because development environments are so unique to each developer, some will avoid using the command line, some will rely on it entirely, and some prefer a mix of the two. +Sommige ontwikkelaars hebben de voorkeur om minder grafische applicaties te gebruiken voor hun dagelijks werk. Zij gebruiken *command line applicaties* om hun werk te doen. Voor het schrijven van code is veel typewerk nodig, en aangezien sommige ontwikkelaars niet teveel afgeleid willen worden in hun keyboardgebruik maken zij daarom gebruik van keyboard shortcuts om bijvoorbeeld met verschillende bestanden te werken en tussen applicaties te wisselen. De meeste taken kunnen met een muis worden uitgevoerd, maar één van de voordelen van de command line is dat je heel veel kunt doen zonder te wisselen van keyboard en muis. Een bijkomend voordeel is dat command line applicaties aanpasbaar zijn en je deze naar wens kunt instellen. De instellingen kunnen opgeslagen worden op een andere computer weer herbruikt worden. Omdat elke ontwikkelaar een andere voorkeur heeft qua ontwikkelomgeving, gebruiken sommigen de command line nooit, sommigen doen juist alles ermee, en anderen gebruiken zowel de command line als grafische applicaties. -### Popular Command Line Options +### Populaire Command Lines -Options for the command line will differ based on the operating system you use. +Beschikbaarheid van command lines verschilt op basis van het besturingssysteem wat je gebruikt. -*💻 = comes preinstalled on the operating system.* +*💻 = is geïnstalleerd met het besturingssysteem.* #### 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) (also known as CMD) 💻 +- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (ook bekend als CMD) 💻 - [Windows Terminal](https://docs.microsoft.com/windows/terminal/) - [mintty](https://mintty.github.io/) @@ -158,36 +158,36 @@ Options for the command line will differ based on the operating system you use. - [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 +#### Populaire Command Line Applicaties -- [Git](https://git-scm.com/) (💻 on most operating sytems) +- [Git](https://git-scm.com/) (💻 op de meeste besturingssystemen) - [NPM](https://www.npmjs.com/) - [Yarn](https://classic.yarnpkg.com/en/docs/cli/) -### Documentation +### Documentatie -When a developer wants to learn something new, they'll most likely turn to documentation to learn how to use it. Developers rely on documentation often to guide them through how to use tools and languages properly, and also to gain deeper knowledge of how it works. +Wanneer een ontwikkelaar iets nieuws wil leren dan zullen ze waarschijnlijk de bijbehorende documentatie raadplegen. Ontwikkelaars zijn erg afhankelijk van goede documentatie, wat hun verder helpt om nieuwe programmeertalen of applicaties te gebruiken waardoor ze een beter inzicht krijgen hoe dit toe te passen in hun dagelijks werk. -#### Popular Documentation on Web Development +#### Populaire Documentatie over Web Ontwikkeling - [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) - [Frontend Masters](https://frontendmasters.com/learn/) -✅ Do some research: Now that you know the basics of a web developer's environment, compare and contrast it with a web designer's environment. +✅ Doe wat onderzoek: Nu je de basis weet van de omgeving van een web ontwikkelaar, probeer eens uit te zoeken in hoeverre dit verschilt van een omgeving voor een web designer. --- -## 🚀 Challenge +## 🚀 Uitdaging -Compare some programming languages. What are some of the unique traits of JavaScript vs. Java? How about COBOL vs. Go? +Vergelijk wat programmeertalen. Wat zijn unieke kenmerken van JavaScript vs. Java. En het verschil tussen COBOL en Go? ## Post-Lecture Quiz -[Post-lecture quiz](1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) -## Review & Self Study +## Review & Zelfstudie -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? +Bestudeer wat voor verschillende programmeertalen er zijn. Kies 3 talen en probeer een regel code te schrijven in elke taal. Wat heb je geleerd? -## Assignment +## Opdracht -[Reading the Docs](1-getting-started-lessons/1-intro-to-programming-languages/assignment.md) +[Lees de documentatie](../assignment.md) From 113486e32d8d26f219fb68e2c0e2fd9a141c9303 Mon Sep 17 00:00:00 2001 From: Marc Duiker Date: Wed, 18 Nov 2020 20:12:05 +0100 Subject: [PATCH 005/250] Fixed typos and text improvements --- .../translations/README.nl.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md index 3fe44fdb..203f8311 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md @@ -30,11 +30,11 @@ Een *programma* kan van alles zijn wat met code is geschreven; websites, spellen Programmeertalen hebben maar één hoofddoel: het voor ontwikkelaars mogelijk maken om instructies te sturen naar een apparaat. Apparaten begrijpen slechts binaire instructies (1-en en 0-en), en voor de meeste ontwikkelaars is dit niet een erg efficiënte manier om instructies te schrijven. Programmeertalen zijn daarom een mooi communicatiemiddel tussen mensen en computers. -Programmeertalen zijn er in verschillende uitvoeringen en hebben soms specifieke doeleinden. Javascript wordt bijvoorbeeld voornamelijk gebruikt voor webapplicaties terwijl Bash hoofdzakelijk wordt gebruikt voor besturingssystemen. +Programmeertalen zijn er in verschillende uitvoeringen en hebben soms specifieke doeleinden. JavaScript wordt bijvoorbeeld voornamelijk gebruikt voor webapplicaties terwijl Bash hoofdzakelijk wordt gebruikt voor besturingssystemen. -*Lagere programmertalen* hebben over het algemeen minder stappen nodig dan *hogere programmeertalen* om door een apparaat geinterpreteerd te worden. Hogere programmeertalen zijn echter populairder omdat ze veel leesbaarder zijn. Een voorbeeld van een hogere programmeertaal is Javascript. +*Lagere programmertalen* hebben over het algemeen minder stappen nodig dan *hogere programmeertalen* om door een apparaat geinterpreteerd te worden. Hogere programmeertalen zijn echter populairder omdat ze veel leesbaarder zijn. Een voorbeeld van een hogere programmeertaal is JavaScript. -Het volgende codevoorbeeld laat het verschil zien tussen een hogere (Javascript) en een lagere (ARM assembly) programeertaal. +Het volgende codevoorbeeld laat het verschil zien tussen een hogere (JavaScript) en een lagere (ARM assembly) programeertaal. ```javascript let number = 10 @@ -81,7 +81,7 @@ Geloof het of niet, maar beide codevoorbeelden *doen exact hetzelfde*: het print Een enkele instructie in een programma wordt ook wel *statement* genoemd en bevat vaak een karakter of witruimte om aan te geven waar de instructie begint en eindigt. Hoe een programma eindigt varieert per programmertaal. -De meeste programma's zijn afhankelijk van gegevens, die ofwel door een gebruiker wordt ingevoerd, ofwel ergens vandaan wordt gehaald. De statements zijn afhankelijk van deze data om instructies uit te voeren. Data is van invloed hoe een programma reageert. Daarom hebben programmeertalen een manier om tijdelijk data op te slaan eat later weer gebruikt wordt. Deze data wordt ook wel *variabelen* genoemd. Variabelen zijn statements die een apparaat een instructie geven om de data op te slaan in het geheugen van het apparaat. Variabelen in programma's zijn gelijkwaardig aan hun tegenhanger in algebra. Ook daar hebben variabelen een unieke naam en kan de waarde veranderen in de loop der tijd. +De meeste programma's zijn afhankelijk van gegevens, die ofwel door een gebruiker wordt ingevoerd, ofwel ergens vandaan wordt gehaald. De statements zijn afhankelijk van deze data om instructies uit te voeren. Data is van invloed hoe een programma reageert. Daarom hebben programmeertalen een manier om tijdelijk data op te slaan wat later weer gebruikt wordt. Deze data wordt ook wel *variabelen* genoemd. Variabelen zijn statements die een apparaat een instructie geven om de data op te slaan in het geheugen van het apparaat. Variabelen in programma's zijn gelijkwaardig aan hun tegenhanger in algebra. Ook daar hebben variabelen een unieke naam en kan de waarde veranderen in de loop der tijd. Niet alle statements in een programma worden altijd uitgevoerd. Dit is meestal zo bedacht door de ontwikkelaar of het treed onbedoeld op bij onverwachte fouten. Het is een vorm van controle in een applicatie, dat het robuuster en onderhoudbaarder maakt. De keuze in welke statements worden uitgevoerd hangt vaak af van de data en of dit voldoet aan bepaalde condities. Een veelvoorkomend statement in een moderne programmeertaal om de controle van een programma te beïnvloeden is het `if..else` statement. @@ -93,7 +93,7 @@ Niet alle statements in een programma worden altijd uitgevoerd. Dit is meestal z In dit onderdeel leer je welke applicaties je wellicht handig vindt om mee te werken als je je professionele web ontwikkelaar carrière start. -Een **ontwikkelomgeving** is een unieke set van applicaties wat een ontwikkelaar regelmatig gebruikt om software te schrijven. Sommige van deze applicaties zijn aangepast voor de specifieke eisen die de ontwikkelaar heeft en kunnen veranderen over de tijd. Dit kan te maken hebben met het type werk wat de ontwikkelaar uitvoert, bijvoorbeeld persoonlijke projecten versus projecten voor werk, of als er een andere programmeertaal moeten worden gebruikt. Ontwikkelomgevingen zijn zo uniek als de ontwikkelaars die ze gebruiken. +Een **ontwikkelomgeving** is een unieke set van applicaties wat een ontwikkelaar regelmatig gebruikt om software te schrijven. Sommige van deze applicaties zijn aangepast voor de specifieke eisen die de ontwikkelaar heeft en kunnen veranderen over de tijd. Dit kan te maken hebben met het type werk wat de ontwikkelaar uitvoert, bijvoorbeeld persoonlijke projecten versus projecten voor werk, of als er een andere programmeertaal moet worden gebruikt. Ontwikkelomgevingen zijn zo uniek als de ontwikkelaars die ze gebruiken. ### Editors @@ -129,7 +129,7 @@ Veel browsers hebben ingebouwd *ontwikkel gereedschap* (DevTools) waarmee ontwik - [Chrome](https://developers.google.com/web/tools/chrome-devtools/) - [Firefox](https://developer.mozilla.org/docs/Tools) -### Command Line Gereedschap +### Command Line Applicaties Sommige ontwikkelaars hebben de voorkeur om minder grafische applicaties te gebruiken voor hun dagelijks werk. Zij gebruiken *command line applicaties* om hun werk te doen. Voor het schrijven van code is veel typewerk nodig, en aangezien sommige ontwikkelaars niet teveel afgeleid willen worden in hun keyboardgebruik maken zij daarom gebruik van keyboard shortcuts om bijvoorbeeld met verschillende bestanden te werken en tussen applicaties te wisselen. De meeste taken kunnen met een muis worden uitgevoerd, maar één van de voordelen van de command line is dat je heel veel kunt doen zonder te wisselen van keyboard en muis. Een bijkomend voordeel is dat command line applicaties aanpasbaar zijn en je deze naar wens kunt instellen. De instellingen kunnen opgeslagen worden op een andere computer weer herbruikt worden. Omdat elke ontwikkelaar een andere voorkeur heeft qua ontwikkelomgeving, gebruiken sommigen de command line nooit, sommigen doen juist alles ermee, en anderen gebruiken zowel de command line als grafische applicaties. @@ -166,7 +166,7 @@ Beschikbaarheid van command lines verschilt op basis van het besturingssysteem w ### Documentatie -Wanneer een ontwikkelaar iets nieuws wil leren dan zullen ze waarschijnlijk de bijbehorende documentatie raadplegen. Ontwikkelaars zijn erg afhankelijk van goede documentatie, wat hun verder helpt om nieuwe programmeertalen of applicaties te gebruiken waardoor ze een beter inzicht krijgen hoe dit toe te passen in hun dagelijks werk. +Wanneer een ontwikkelaar iets nieuws wil leren dan zullen ze waarschijnlijk de bijbehorende documentatie (Docs) raadplegen. Ontwikkelaars zijn erg afhankelijk van goede documentatie, wat hun verder helpt om nieuwe programmeertalen of applicaties te gebruiken waardoor ze een beter inzicht krijgen hoe dit toe te passen in hun dagelijks werk. #### Populaire Documentatie over Web Ontwikkeling @@ -186,7 +186,7 @@ Vergelijk wat programmeertalen. Wat zijn unieke kenmerken van JavaScript vs. Jav ## Review & Zelfstudie -Bestudeer wat voor verschillende programmeertalen er zijn. Kies 3 talen en probeer een regel code te schrijven in elke taal. Wat heb je geleerd? +Bestudeer wat voor verschillende programmeertalen er zijn. Zoek in 3 talen een 'Hello World' voorbeeld op. Zo krijg je een goed idee wat er voor nodig is om tekst in de browser te tonen. ## Opdracht From 8cd4690b89ca200038f879bfe6738a2169919dea Mon Sep 17 00:00:00 2001 From: Marc Duiker Date: Wed, 18 Nov 2020 20:13:38 +0100 Subject: [PATCH 006/250] Added script --- .../1-intro-to-programming-languages/translations/README.nl.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md index 203f8311..bc240d7a 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md @@ -20,7 +20,7 @@ In deze les hebben we het over: ## Wat is programmeren? -Programmeren (ook wel coderen genoemd) is het process van het schrijven van instructies voor een apparaat, zoals een computer of een mobieltje. We schrijven deze instructies met een programmeertaal, welke wordt geinterpreteerd door het apparaat. Deze sets van instructies staan bekend onder verschillende namen zoals; *programma*, *computer programma*, *applicatie (app)*, en *executable*. +Programmeren (ook wel coderen genoemd) is het process van het schrijven van instructies voor een apparaat, zoals een computer of een mobieltje. We schrijven deze instructies met een programmeertaal, welke wordt geinterpreteerd door het apparaat. Deze sets van instructies staan bekend onder verschillende namen zoals; *programma*, *computer programma*, *applicatie (app)*, *script* en *executable*. Een *programma* kan van alles zijn wat met code is geschreven; websites, spellen, en mobiele apps zijn programmas. Hoewel het mogelijk is om een programma te maken zonder code te schrijven, is de onderliggende logica, dat wordt geinterpreteerd door het apparaat, hoogstwaarschijnlijk wel geschreven met code. Een programma dat *draait* of *code uitvoert* voert instructies uit. Het apparaat wat je nu gebruikt om deze les te volgen draait een programma om deze tekst op het scherm te tonen. From 2d2da0ec3a8a95ac39188be2910e1366f405e578 Mon Sep 17 00:00:00 2001 From: domi877 <45101945+domi877@users.noreply.github.com> Date: Sat, 21 Nov 2020 21:01:31 +0100 Subject: [PATCH 007/250] Update README.de.md --- 2-js-basics/translations/README.de.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-js-basics/translations/README.de.md b/2-js-basics/translations/README.de.md index 3306aa2b..780512e0 100644 --- a/2-js-basics/translations/README.de.md +++ b/2-js-basics/translations/README.de.md @@ -11,4 +11,4 @@ JavaScript ist die Sprache des Webs. In diesen vier Lektionen lernen Sie die Gru ### Credits -Diese Lektionen wurden mit ♥ ️von [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) und [Chris Noring](https://twitter.com/chris_noring) \ No newline at end of file +Diese Lektionen wurden mit ♥ ️von [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) und [Chris Noring](https://twitter.com/chris_noring) erstellt. From 633183542fc8dade7f16d91d6a9dc055a7255b66 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Fri, 27 Nov 2020 17:52:04 -0800 Subject: [PATCH 008/250] content updates to accessibility unit --- .../.github/pre-lecture-quiz.md | 2 +- .../3-accessibility/README.md | 38 ++++++++++++------- 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/1-getting-started-lessons/3-accessibility/.github/pre-lecture-quiz.md b/1-getting-started-lessons/3-accessibility/.github/pre-lecture-quiz.md index ea0928fe..a84ea3e5 100644 --- a/1-getting-started-lessons/3-accessibility/.github/pre-lecture-quiz.md +++ b/1-getting-started-lessons/3-accessibility/.github/pre-lecture-quiz.md @@ -6,7 +6,7 @@ - [ ] Deckhouse - [ ] Cleanhouse -2. You need a physical screen reader to test accessibility for visually-impaired users +2. You need a screen reader to test accessibility for visually-impaired users - [ ] true - [ ] false diff --git a/1-getting-started-lessons/3-accessibility/README.md b/1-getting-started-lessons/3-accessibility/README.md index 99723168..37ef9be9 100644 --- a/1-getting-started-lessons/3-accessibility/README.md +++ b/1-getting-started-lessons/3-accessibility/README.md @@ -22,9 +22,17 @@ One of the best-known accessibility tools are screen readers. At its most basic, a screen reader will read a page from top to bottom audibly. If your page is all text, the reader will convey the information in a similar fashion to a browser. Of course, web pages are rarely purely text; they will contain links, graphics, color, and other visual components. Care must be taken to ensure that this information is read correctly by a screen reader. -Every web developer should familiarize themselves with a screen reader. As highlighted above, it's the client your users will utilize. Much in the same way you're familiar with how a browser operates, you should learn how a screen reader operates. Fortunately screen readers are built into most operating systems, and many browsers contain extensions to emulate a screen reader. +Every web developer should familiarize themselves with a screen reader. As highlighted above, it's the client your users will utilize. Much in the same way you're familiar with how a browser operates, you should learn how a screen reader operates. Fortunately, screen readers are built into most operating systems. -✅ Try a screen reader browser extension or tool. One that works on Windows only is [JAWS](https://webaim.org/articles/jaws/). Browsers also have built-in tools that can be used for this purpose; check out [these accessibility-focused Edge browser tools](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features). +Some browsers also have built-in tools and extensions that can read text aloud or even provide some basic navigational features, such as [these accessibility-focused Edge browser tools](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features). These are also important accessibility tools, but function very differently from screen readers and they should not be mistaken for screen reader testing tools. + +✅ Try a screen reader and browser text reader. On Windows [Narrator](https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) is included by default, and [JAWS](https://webaim.org/articles/jaws/) and [NVDA](https://www.nvaccess.org/about-nvda/) can also be installed. On macOS and iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) is installed by default. + +### Zoom + +Another tool commonly used by people with vision impairments is zooming. The most basic type of zooming is static zoom, controlled through `Control + plus sign (+)` or by decreasing screen resolution. This type of zoom causes the entire page to resize, so using [responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) is important to provide a good user experience at increased zoom levels. + +Another type of zoom relies on specialized software to magnify one area of the screen and pan, much like using a real magnifying glass. On Windows, [Magnifier](https://support.microsoft.com/en-us/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) is built in, and [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) is a third-party magnification software with more features and a larger user base. Both macOS and iOS have a built-in magnification software called [Zoom](https://www.apple.com/accessibility/mac/vision/). ### Contrast checkers @@ -54,18 +62,16 @@ People see the world in different ways, and this includes colors. When selecting ✅ Identify a web site that is very problematic in its use of color. Why? -### Properly highlight text - -Highlighting text by color, [font weight](https://developer.mozilla.org/docs/Web/CSS/font-weight), or other [text decoration](https://developer.mozilla.org/docs/Web/CSS/text-decoration) does not inherently inform a screen reader of its importance. A word could be bold because it's a key word, or because its the first word and the designer decided it should be bold. - -When a particular phrase needs to be highlighted, use the `` or `` elements. These will indicate to a screen reader that those items are important. - ### Use the correct HTML -With CSS and JavaScript it's possible to make any element look like any type of control. `` could be used to create a `