# Panimula sa Mga Wika ng Programming at Modernong Kasangkapan ng Developer
Maligayang pagdating sa kapanapanabik na mundo ng programming! Sa araling ito, ipakikilala sa iyo ang mga pangunahing konsepto na nagbibigay-buhay sa bawat website, app, at digital na karanasan na ginagamit mo araw-araw. Matutuklasan mo kung ano ang mga wika ng programming, paano ito gumagana, at bakit ito ang pundasyon ng ating digital na mundo.
Maaaring mukhang misteryoso ang programming sa simula, ngunit isipin mo ito bilang pag-aaral ng isang bagong wika – isang wika na nagbibigay-daan sa iyo na makipag-usap sa mga computer at maisakatuparan ang iyong mga malikhaing ideya. Kung nais mong gumawa ng mga website, lumikha ng mga mobile app, o i-automate ang mga pang-araw-araw na gawain, ang pag-unawa sa mga wika ng programming ang unang hakbang mo patungo sa digital na pagkamalikhain at paglutas ng problema.
Sa araling ito, susuriin mo ang mahahalagang kasangkapan na ginagamit ng mga modernong web developer araw-araw. Mula sa mga code editor na tumutulong sa iyong magsulat ng malinis at epektibong code hanggang sa mga browser na nagbibigay-daan sa iyong subukan at ayusin ang iyong mga likha, magkakaroon ka ng hands-on na karanasan sa parehong mga propesyonal na kasangkapan na ginagamit ng mga developer sa mga nangungunang kumpanya ng teknolohiya sa buong mundo.
> Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz
[Pre-lecture quiz](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
## Ano ang Matututunan Mo
Sa komprehensibong panimula na ito, matutuklasan mo:
- **Ano ang programming at bakit ito mahalaga** – Pag-unawa sa papel ng programming sa paglikha ng mga digital na solusyon
- **Mga uri ng wika ng programming at ang kanilang mga gamit** – Pagsusuri sa iba't ibang wika mula sa JavaScript hanggang Python
- **Mga pangunahing elemento ng isang programa** – Pag-aaral ng mga pundasyon na nagpapagana sa code
- **Modernong software at mga kasangkapan para sa mga propesyonal na developer** – Pagkakaroon ng hands-on na karanasan sa parehong mga kasangkapan na ginagamit sa industriya
> 💡 **Tip sa Pag-aaral**: Huwag mag-alala sa pag-memorize ng lahat! Magpokus sa pag-unawa sa mga konsepto – masasanay at maipapatibay mo ang mga ideyang ito sa buong kurikulum.
> Maaari mong kunin ang araling ito sa [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
## Ano ang Programming?
Ang programming (kilala rin bilang coding o software development) ay ang proseso ng paglikha ng mga instruksyon na nagsasabi sa isang computer, smartphone, o anumang digital na aparato kung ano ang eksaktong gagawin. Isipin mo ito na parang pagsusulat ng isang detalyadong recipe – ngunit sa halip na gumawa ng cookies, gumagawa ka ng mga website, laro, mobile app, o kahit mga kontrol para sa smart home.
Ang mga instruksyon na ito ay isinusulat sa mga espesyal na wika na tinatawag na **mga wika ng programming**, na nagsisilbing tulay sa pagitan ng pag-iisip ng tao at pagproseso ng computer. Habang ang mga computer ay nauunawaan lamang ang binary code (1s at 0s), ang mga wika ng programming ay nagbibigay-daan sa atin na magsulat ng mga instruksyon sa paraang mas nababasa at lohikal para sa tao.
Ang bawat digital na karanasan na iyong ginagamit ay nagsimula bilang code ng isang tao: ang app ng social media na iyong ini-scroll, ang GPS na gumagabay sa iyong pagmamaneho, kahit ang simpleng calculator sa iyong telepono. Kapag natutunan mong mag-program, natututo kang lumikha ng mga digital na solusyon na maaaring magbigay ng solusyon sa mga totoong problema at gawing mas madali ang buhay para sa milyun-milyong tao.
✅ **Mabilis na Hamon sa Pananaliksik**: Sino ang itinuturing na unang computer programmer sa mundo? Maglaan ng sandali upang hanapin ito – maaaring magulat ka sa sagot!
## Mga Wika ng Programming
Tulad ng mga tao na nagsasalita ng iba't ibang wika tulad ng Ingles, Espanyol, o Mandarin, ang mga computer ay maaaring makaunawa ng iba't ibang wika ng programming. Ang bawat wika ng programming ay may sariling syntax (mga panuntunan sa gramatika) at idinisenyo para sa mga partikular na uri ng gawain, na ginagawang mas angkop ang ilang wika para sa ilang trabaho kaysa sa iba.
Ang mga wika ng programming ay nagsisilbing tagasalin sa pagitan ng mga ideya ng tao at mga aksyon ng computer. Pinapayagan nila ang mga developer na magsulat ng mga instruksyon na parehong nababasa ng tao at maipapatupad ng computer. Kapag nagsusulat ka ng code sa isang wika ng programming, ang espesyal na software ay nagko-convert ng iyong mga instruksyon sa binary code na talagang nauunawaan ng mga computer.
### Mga Sikat na Wika ng Programming at Kanilang Mga Gamit
| Wika | Pinakamainam Para sa | Bakit Sikat |
|------|----------------------|-------------|
| **JavaScript** | Web development, user interfaces | Tumatakbo sa mga browser at nagbibigay-buhay sa mga interactive na website |
| **Python** | Data science, automation, AI | Madaling basahin at matutunan, may makapangyarihang mga library |
| **Java** | Enterprise applications, Android apps | Hindi nakadepende sa platform, matibay para sa malalaking sistema |
| **C#** | Windows applications, game development | Malakas na suporta mula sa Microsoft ecosystem |
| **Go** | Cloud services, backend systems | Mabilis, simple, idinisenyo para sa modernong computing |
### Mataas na Antas vs. Mababang Antas na Wika
Ang mga wika ng programming ay umiiral sa isang spectrum mula sa **mababang antas** (mas malapit sa machine code) hanggang sa **mataas na antas** (mas malapit sa wika ng tao):
- **Mababang antas na wika** (tulad ng Assembly o C) ay nangangailangan ng mas kaunting hakbang sa pagsasalin ngunit mas mahirap para sa tao na basahin at isulat
- **Mataas na antas na wika** (tulad ng JavaScript, Python, o C#) ay mas nababasa at may mas malalaking komunidad, na ginagawang perpekto para sa karamihan ng modernong development
> 💡 **Isipin ito sa ganitong paraan**: Ang mababang antas na wika ay parang direktang pakikipag-usap sa computer sa sarili nitong wika, habang ang mataas na antas na wika ay parang may bihasang tagasalin na nagbabago ng iyong pang-araw-araw na wika sa computer-speak.
### Paghahambing ng Mga Wika ng Programming sa Aksyon
Upang maipakita ang pagkakaiba sa pagitan ng mataas na antas at mababang antas na wika, tingnan natin ang parehong gawain na isinulat sa dalawang magkaibang paraan. Ang parehong halimbawa ng code sa ibaba ay bumubuo ng sikat na Fibonacci sequence (kung saan ang bawat numero ay ang kabuuan ng dalawang naunang numero: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34...).
**Mataas na antas na wika (JavaScript) – Madaling maunawaan ng tao:**
```javascript
// Step 1: Basic Fibonacci setup
const fibonacciCount = 10;
let current = 0;
let next = 1;
console.log('Fibonacci sequence:');
```
**Narito ang ginagawa ng code na ito:**
- **Magdeklara** ng constant upang tukuyin kung ilang Fibonacci numbers ang nais nating buuin
- **Mag-initialize** ng dalawang variable upang subaybayan ang kasalukuyan at susunod na mga numero sa sequence
- **Itakda** ang mga panimulang halaga (0 at 1) na tumutukoy sa pattern ng Fibonacci
- **Ipakita** ang isang header message upang tukuyin ang output
```javascript
// Step 2: Generate the sequence with a loop
for (let i = 0; i < fibonacciCount; i++) {
console.log(`Position ${i + 1}: ${current}`);
// Calculate next number in sequence
const sum = current + next;
current = next;
next = sum;
}
```
**Paghiwa-hiwalay kung ano ang nangyayari dito:**
- **Mag-loop** sa bawat posisyon sa ating sequence gamit ang `for` loop
- **Ipakita** ang bawat numero kasama ang posisyon nito gamit ang template literal formatting
- **Kalkulahin** ang susunod na numero ng Fibonacci sa pamamagitan ng pagdaragdag ng kasalukuyan at susunod na mga halaga
- **I-update** ang ating mga tracking variable upang lumipat sa susunod na iteration
```javascript
// Step 3: Modern functional approach
const generateFibonacci = (count) => {
const sequence = [0, 1];
for (let i = 2; i < count; i++) {
sequence[i] = sequence[i - 1] + sequence[i - 2];
}
return sequence;
};
// Usage example
const fibSequence = generateFibonacci(10);
console.log(fibSequence);
```
**Sa itaas, nagawa natin ang mga sumusunod:**
- **Lumikha** ng reusable function gamit ang modernong arrow function syntax
- **Bumuo** ng array upang i-store ang kumpletong sequence sa halip na ipakita isa-isa
- **Ginamit** ang array indexing upang kalkulahin ang bawat bagong numero mula sa mga naunang halaga
- **Ibalik** ang kumpletong sequence para sa flexible na paggamit sa ibang bahagi ng ating programa
**Mababang antas na wika (ARM Assembly) – Madaling maunawaan ng computer:**
```assembly
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
```
Mapapansin mo kung paano ang bersyon ng JavaScript ay halos parang mga instruksyon sa Ingles, habang ang bersyon ng Assembly ay gumagamit ng mga cryptic na utos na direktang kumokontrol sa processor ng computer. Parehong nagagawa ang eksaktong parehong gawain, ngunit ang mataas na antas na wika ay mas madaling maunawaan, isulat, at panatilihin ng tao.
**Mga pangunahing pagkakaiba na mapapansin mo:**
- **Pagkabasa**: Ang JavaScript ay gumagamit ng mga deskriptibong pangalan tulad ng `fibonacciCount` habang ang Assembly ay gumagamit ng mga cryptic na label tulad ng `r0`, `r1`
- **Mga Komento**: Ang mataas na antas na wika ay hinihikayat ang mga paliwanag na komento na ginagawang mas madaling maunawaan ang code
- **Estruktura**: Ang lohikal na daloy ng JavaScript ay tumutugma sa kung paano iniisip ng tao ang mga problema nang hakbang-hakbang
- **Pagpapanatili**: Ang pag-update ng bersyon ng JavaScript para sa iba't ibang pangangailangan ay simple at malinaw
✅ **Ang Fibonacci sequence** ay [tinukoy](https://en.wikipedia.org/wiki/Fibonacci_number) bilang isang hanay ng mga numero kung saan ang bawat numero ay ang kabuuan ng dalawang naunang numero, simula sa 0 at 1. Ang pattern na ito ay madalas na lumalabas sa kalikasan, mula sa mga talulot ng bulaklak hanggang sa mga spiral na shell!
## Mga Elemento ng Isang Programa
Ngayon na nauunawaan mo kung ano ang mga wika ng programming, tuklasin natin ang mga pangunahing bahagi na bumubuo sa anumang programa. Isipin ang mga elementong ito bilang gramatika at bokabularyo ng programming – kapag naintindihan mo ang mga konseptong ito, magagawa mong magbasa at magsulat ng code sa anumang wika.
### Mga Pahayag: Ang Pangunahing Instruksyon
Ang **pahayag** ay isang solong instruksyon sa isang programa, tulad ng isang pangungusap sa wika ng tao. Ang bawat pahayag ay nagsasabi sa computer na magsagawa ng isang partikular na aksyon. Tulad ng mga pangungusap na nagtatapos sa mga tuldok, ang mga pahayag ay may mga partikular na paraan upang ipahiwatig kung saan nagtatapos ang isang instruksyon at nagsisimula ang susunod (nagkakaiba ito depende sa wika ng programming).
```javascript
// Basic statements that perform single actions
const userName = "Alex";
console.log("Hello, world!");
const sum = 5 + 3;
```
**Narito ang ginagawa ng code na ito:**
- **Magdeklara** ng constant variable upang i-store ang pangalan ng isang user
- **Ipakita** ang isang greeting message sa console output
- **Kalkulahin** at i-store ang resulta ng isang mathematical operation
```javascript
// Statements that interact with web pages
document.title = "My Awesome Website";
document.body.style.backgroundColor = "lightblue";
```
**Hakbang-hakbang, narito ang nangyayari:**
- **Baguhin** ang pamagat ng webpage na lumalabas sa browser tab
- **Palitan** ang kulay ng background ng buong page body
### Mga Variable: Pag-iimbak ng Impormasyon
Ang **mga variable** ay tulad ng mga lalagyan na may label na nagtatago ng impormasyon na kailangang tandaan ng iyong programa. Tulad ng pagsusulat ng listahan ng grocery sa papel at pag-refer dito, ang mga variable ay nagbibigay-daan sa mga programa na mag-imbak ng data at gamitin ito sa ibang pagkakataon. Ang mga variable ay may natatanging pangalan at ang kanilang nilalaman ay maaaring magbago habang tumatakbo ang programa.
```javascript
// Step 1: Creating basic variables
const siteName = "Weather Dashboard";
let currentWeather = "sunny";
let temperature = 75;
let isRaining = false;
```
**Pag-unawa sa mga konsepto:**
- **I-store** ang mga hindi nagbabagong halaga sa mga `const` na variable (tulad ng pangalan ng site)
- **Gamitin** ang `let` para sa mga halaga na maaaring magbago sa buong programa
- **Mag-assign** ng iba't ibang uri ng data: mga string (text), numero, at boolean (true/false)
- **Pumili** ng mga deskriptibong pangalan na nagpapaliwanag kung ano ang nilalaman ng bawat variable
```javascript
// Step 2: Working with objects to group related data
const weatherData = {
location: "San Francisco",
humidity: 65,
windSpeed: 12
};
```
**Sa itaas, nagawa natin ang mga sumusunod:**
- **Lumikha** ng isang object upang pagsama-samahin ang mga kaugnay na impormasyon ng panahon
- **Organisahin** ang maraming piraso ng data sa ilalim ng isang pangalan ng variable
- **Gamitin** ang mga key-value pair upang malinaw na lagyan ng label ang bawat piraso ng impormasyon
```javascript
// Step 3: Using and updating variables
console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`);
console.log(`Wind speed: ${weatherData.windSpeed} mph`);
// Updating changeable variables
currentWeather = "cloudy";
temperature = 68;
```
**Unawain ang bawat bahagi:**
- **Ipakita** ang impormasyon gamit ang template literals na may syntax na `${}`
- **I-access** ang mga property ng object gamit ang dot notation (`weatherData.windSpeed`)
- **I-update** ang mga variable na dineklara gamit ang `let` upang ipakita ang mga nagbabagong kondisyon
- **Pagsamahin** ang maraming variable upang makabuo ng makabuluhang mga mensahe
```javascript
// Step 4: Modern destructuring for cleaner code
const { location, humidity } = weatherData;
console.log(`${location} humidity: ${humidity}%`);
```
**Ang kailangan mong malaman:**
- **Kunwari** ang mga partikular na property mula sa mga object gamit ang destructuring assignment
- **Lumikha** ng mga bagong variable nang awtomatiko gamit ang parehong mga pangalan ng key ng object
- **Pinasimple** ang code sa pamamagitan ng pag-iwas sa paulit-ulit na dot notation
### Daloy ng Kontrol: Paggawa ng Desisyon
Kadalasan, kailangang gumawa ng desisyon ang mga programa batay sa iba't ibang sitwasyon. Ang **mga pahayag ng daloy ng kontrol** (tulad ng `if...else`) ay nagbibigay-daan sa mga programa na pumili ng iba't ibang landas, na ginagawang matalino at tumutugon sa mga nagbabagong kondisyon.
```javascript
// Step 1: Basic conditional logic
const userAge = 17;
if (userAge >= 18) {
console.log("You can vote!");
} else {
const yearsToWait = 18 - userAge;
console.log(`You'll be able to vote in ${yearsToWait} year(s).`);
}
```
**Narito ang ginagawa ng code na ito:**
- **Suriin** kung ang edad ng user ay pumasa sa kinakailangan para makaboto
- **Isagawa** ang iba't ibang code blocks batay sa resulta ng kondisyon
- **Kalkulahin** at ipakita kung gaano katagal bago maging kwalipikado sa pagboto kung wala pang 18
- **Magbigay** ng partikular at kapaki-pakinabang na feedback para sa bawat sitwasyon
```javascript
// Step 2: Multiple conditions with logical operators
const userAge = 17;
const hasPermission = true;
if (userAge >= 18 && hasPermission) {
console.log("Access granted: You can enter the venue.");
} else if (userAge >= 16) {
console.log("You need parent permission to enter.");
} else {
console.log("Sorry, you must be at least 16 years old.");
}
```
**Paghiwa-hiwalay kung ano ang nangyayari dito:**
- **Pagsamahin** ang maraming kondisyon gamit ang `&&` (at) operator
- **Lumikha** ng hierarchy ng mga kondisyon gamit ang `else if` para sa maraming sitwasyon
- **I-handle** ang lahat ng posibleng kaso gamit ang huling `else` statement
- **Magbigay** ng malinaw at maaksiyong feedback para sa bawat iba't ibang sitwasyon
```javascript
// Step 3: Concise conditional with ternary operator
const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet";
console.log(`Status: ${votingStatus}`);
```
**Ang kailangan mong tandaan:**
- **Gamitin** ang ternary operator (`? :`) para sa simpleng dalawang opsyon na kondisyon
- **Isulat** ang kondisyon muna, kasunod ng `?`, pagkatapos ang true result, pagkatapos `:`, pagkatapos ang false result
- **I-apply** ang pattern na ito kapag kailangan mong mag-assign ng mga halaga batay sa mga kondisyon
```javascript
// Step 4: Handling multiple specific cases
const dayOfWeek = "Tuesday";
switch (dayOfWeek) {
case "Monday":
case "Tuesday":
case "Wednesday":
case "Thursday":
case "Friday":
console.log("It's a weekday - time to work!");
break;
case "Saturday":
case "Sunday":
console.log("It's the weekend - time to relax!");
break;
default:
console.log("Invalid day of the week");
}
```
**Ang code na ito ay nagagawa ang mga sumusunod:**
- **Itugma** ang halaga ng variable sa maraming partikular na kaso
- **Pagsama-samahin** ang mga magkatulad na kaso (mga araw ng trabaho vs. mga araw ng pahinga)
- **Isagawa** ang tamang code block kapag may natagpuang tugma
- **Isama** ang `default` na kaso upang i-handle ang mga hindi inaasahang halaga
- **Gamitin** ang mga `break` statement upang pigilan ang code na magpatuloy sa susunod na kaso
> 💡 **Analohiya sa totoong buhay**: Isipin ang daloy ng kontrol tulad ng GPS na nagbibigay sa iyo ng direksyon. Maaaring sabihin nito, "Kung may trapiko sa Main Street, dumaan sa highway." Ang mga programa ay gumagamit ng parehong uri ng lohikal na kondisyon upang tumugon sa iba't ibang sitwasyon.
✅ **Susunod**: Mas malalim mong susuriin ang mga konseptong ito at matutunan kung paano ito epektibong gamitin sa mga susunod na aralin. Huwag mag-alala sa pag-memorize ng lahat ngayon – magpokus sa pag-unawa sa kabuuang larawan!
## Mga Kasangkapan ng Propesyon
Tulad ng isang karpintero na nangangailangan ng de-kalidad na mga kasangkapan upang makagawa ng magagandang kasangkapan, ang mga web developer ay umaasa sa mga espesyal na software at workflows upang makalikha ng kamangha-manghang mga digital na karanasan. Sa seksyong ito, matutuklasan mo ang mahahalagang kasangkapan na
Ang mga modernong code editor ay nag-aalok ng kahanga-hangang hanay ng mga tampok na dinisenyo upang mapataas ang iyong produktibidad:
| Tampok | Ano ang Ginagawa | Bakit Nakakatulong |
|--------|------------------|--------------------|
| **Syntax Highlighting** | Kulayan ang iba't ibang bahagi ng iyong code | Ginagawang mas madali ang pagbabasa ng code at pagtukoy ng mga error |
| **Auto-completion** | Nagmumungkahi ng code habang nagta-type | Pinapabilis ang pag-code at binabawasan ang mga typo |
| **Debugging Tools** | Tumutulong sa paghahanap at pag-aayos ng mga error | Nakakatipid ng oras sa pag-troubleshoot |
| **Extensions** | Nagdaragdag ng mga espesyal na tampok | I-customize ang iyong editor para sa anumang teknolohiya |
| **AI Assistants** | Nagmumungkahi ng code at mga paliwanag | Pinapabilis ang pag-aaral at produktibidad |
> 🎥 **Video Resource**: Gusto mo bang makita ang mga tool na ito sa aksyon? Tingnan ang [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) para sa isang komprehensibong overview.
#### Mga Inirerekomendang Editor para sa Web Development
**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Libre)
- Pinakasikat sa mga web developer
- Napakahusay na ecosystem ng extension
- May built-in na terminal at Git integration
- **Mga kailangang extension**:
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-powered na mga mungkahi sa code
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Real-time na kolaborasyon
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Awtomatikong pag-format ng code
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Tukuyin ang mga typo sa iyong code
**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Bayad, libre para sa mga estudyante)
- Advanced na debugging at testing tools
- Matalinong code completion
- Built-in na version control
**Cloud-Based IDEs** (Iba't ibang presyo)
- [GitHub Codespaces](https://github.com/features/codespaces) - Buong VS Code sa iyong browser
- [Replit](https://replit.com/) - Mahusay para sa pag-aaral at pagbabahagi ng code
- [StackBlitz](https://stackblitz.com/) - Instant, full-stack web development
> 💡 **Tip sa Pagsisimula**: Magsimula sa Visual Studio Code – ito ay libre, malawakang ginagamit sa industriya, at may malaking komunidad na gumagawa ng mga kapaki-pakinabang na tutorial at extension.
### Mga Web Browser: Ang Iyong Laboratoryo sa Pagsusuri
Ang mga web browser ay higit pa sa mga tool para sa pag-browse sa internet – ang mga ito ay mga sopistikadong development environment na tumutulong sa iyo na bumuo, sumubok, at mag-optimize ng mga web application. Ang bawat modernong browser ay may kasamang makapangyarihang developer tools (DevTools) na nagbibigay ng malalim na pananaw sa kung paano gumagana ang iyong code.
**Bakit mahalaga ang mga browser para sa web development:**
Kapag gumagawa ka ng website o web application, kailangan mong makita kung paano ito mukhang at gumagana sa totoong mundo. Ang mga browser ay hindi lamang nagpapakita ng iyong trabaho kundi nagbibigay din ng detalyadong feedback tungkol sa performance, accessibility, at mga potensyal na isyu.
#### Mga Tool ng Browser Developer (DevTools)
Ang mga modernong browser ay may kasamang komprehensibong development suites:
| Kategorya ng Tool | Ano ang Ginagawa | Halimbawa ng Paggamit |
|--------------------|------------------|-----------------------|
| **Element Inspector** | Tingnan at i-edit ang HTML/CSS nang real-time | Ayusin ang styling para makita ang agarang resulta |
| **Console** | Tingnan ang mga error message at subukan ang JavaScript | I-debug ang mga problema at mag-eksperimento sa code |
| **Network Monitor** | Subaybayan kung paano naglo-load ang mga resources | I-optimize ang performance at loading times |
| **Accessibility Checker** | Subukan para sa inclusive na disenyo | Siguraduhing gumagana ang iyong site para sa lahat ng user |
| **Device Simulator** | I-preview sa iba't ibang laki ng screen | Subukan ang responsive design nang hindi kailangan ng maraming device |
#### Mga Inirerekomendang Browser para sa Development
- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Industry-standard na DevTools na may malawak na dokumentasyon
- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Mahusay na CSS Grid at accessibility tools
- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Batay sa Chromium na may mga resource ng Microsoft para sa developer
> ⚠️ **Mahalagang Tip sa Pagsusuri**: Laging subukan ang iyong mga website sa iba't ibang browser! Ang gumagana nang perpekto sa Chrome ay maaaring magmukhang iba sa Safari o Firefox. Ang mga propesyonal na developer ay nagsusuri sa lahat ng pangunahing browser upang matiyak ang pare-parehong karanasan ng user.
### Mga Tool sa Command Line: Ang Gateway ng Power User
Ang command line (tinatawag ding terminal o shell) ay maaaring mukhang nakakatakot sa simula – ito ay isang itim na screen na may teksto lamang! Ngunit huwag hayaang lokohin ka ng simpleng hitsura nito. Ang command line ay isa sa mga pinakamakapangyarihang tool sa toolkit ng isang developer, na nagbibigay-daan sa iyo upang magsagawa ng mga kumplikadong gawain gamit ang simpleng mga text command.
**Bakit mahal ng mga developer ang command line:**
Habang ang mga graphical interface ay mahusay para sa maraming gawain, ang command line ay mahusay sa automation, precision, at bilis. Maraming mga development tool ang pangunahing gumagana sa pamamagitan ng command line interfaces, at ang pag-aaral na gamitin ang mga ito nang mahusay ay maaaring lubos na mapabuti ang iyong produktibidad.
```bash
# Step 1: Create and navigate to project directory
mkdir my-awesome-website
cd my-awesome-website
```
**Ano ang ginagawa ng code na ito:**
- **Gumawa** ng bagong direktoryo na tinatawag na "my-awesome-website" para sa iyong proyekto
- **Mag-navigate** sa bagong likhang direktoryo upang simulan ang trabaho
```bash
# Step 2: Initialize project with package.json
npm init -y
# Install modern development tools
npm install --save-dev vite prettier eslint
npm install --save-dev @eslint/js
```
**Hakbang-hakbang, narito ang nangyayari:**
- **I-initialize** ang bagong Node.js project na may default settings gamit ang `npm init -y`
- **I-install** ang Vite bilang modernong build tool para sa mabilis na development at production builds
- **Magdagdag** ng Prettier para sa awtomatikong pag-format ng code at ESLint para sa pagsusuri ng kalidad ng code
- **Gamitin** ang `--save-dev` flag upang markahan ang mga ito bilang development-only dependencies
```bash
# Step 3: Create project structure and files
mkdir src assets
echo 'My SiteHello World
' > index.html
# Start development server
npx vite
```
**Sa itaas, ginawa natin ang:**
- **Pag-aayos** ng ating proyekto sa pamamagitan ng paglikha ng hiwalay na mga folder para sa source code at assets
- **Pagbuo** ng basic na HTML file na may tamang istruktura ng dokumento
- **Pag-simula** ng Vite development server para sa live reloading at hot module replacement
#### Mga Mahahalagang Tool sa Command Line para sa Web Development
| Tool | Layunin | Bakit Kailangan Mo Ito |
|------|---------|-------------------------|
| **[Git](https://git-scm.com/)** | Version control | Subaybayan ang mga pagbabago, makipagtulungan sa iba, i-backup ang iyong trabaho |
| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime & package management | Patakbuhin ang JavaScript sa labas ng mga browser, mag-install ng mga modernong development tool |
| **[Vite](https://vitejs.dev/)** | Build tool & dev server | Napakabilis na development na may hot module replacement |
| **[ESLint](https://eslint.org/)** | Kalidad ng code | Awtomatikong tukuyin at ayusin ang mga problema sa iyong JavaScript |
| **[Prettier](https://prettier.io/)** | Pag-format ng code | Panatilihing pare-pareho ang format at nababasa ang iyong code |
#### Mga Opsyon na Partikular sa Platform
**Windows:**
- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Moderno, mayaman sa tampok na terminal
- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Makapangyarihang scripting environment
- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Tradisyunal na Windows command line
**macOS:**
- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Built-in na terminal application
- **[iTerm2](https://iterm2.com/)** - Pinahusay na terminal na may advanced na mga tampok
**Linux:**
- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Standard na Linux shell
- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Advanced na terminal emulator
> 💻 = Pre-installed sa operating system
> 🎯 **Path ng Pag-aaral**: Magsimula sa mga basic na command tulad ng `cd` (change directory), `ls` o `dir` (list files), at `mkdir` (create folder). Magpraktis gamit ang mga modernong workflow command tulad ng `npm install`, `git status`, at `code .` (binubuksan ang kasalukuyang direktoryo sa VS Code). Habang nagiging komportable ka, natural mong matutunan ang mas advanced na mga command at mga teknik sa automation.
### Dokumentasyon: Ang Iyong Compass sa Pag-aaral
Ang dokumentasyon ay parang pagkakaroon ng isang maalam na mentor na available 24/7. Kapag nakatagpo ka ng mga bagong konsepto, kailangang maunawaan kung paano gumagana ang isang tool, o gustong tuklasin ang mga advanced na tampok, ang de-kalidad na dokumentasyon ay nagiging iyong roadmap sa tagumpay.
**Bakit mahalaga ang dokumentasyon:**
Ang mga propesyonal na developer ay gumugugol ng malaking bahagi ng kanilang oras sa pagbabasa ng dokumentasyon – hindi dahil hindi nila alam ang kanilang ginagawa, kundi dahil ang web development landscape ay mabilis na nagbabago kaya't ang pananatiling napapanahon ay nangangailangan ng patuloy na pag-aaral. Ang mahusay na dokumentasyon ay tumutulong sa iyo na maunawaan hindi lamang *paano* gamitin ang isang bagay, kundi *bakit* at *kailan* ito gamitin.
#### Mga Mahahalagang Resource ng Dokumentasyon
**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)**
- Ang gold standard para sa dokumentasyon ng web technology
- Komprehensibong mga gabay para sa HTML, CSS, at JavaScript
- May kasamang impormasyon sa compatibility ng browser
- Nagtatampok ng mga praktikal na halimbawa at interactive na demo
**[Web.dev](https://web.dev)** (by Google)
- Mga modernong best practices sa web development
- Mga gabay sa pag-optimize ng performance
- Mga prinsipyo ng accessibility at inclusive na disenyo
- Mga case study mula sa mga totoong proyekto
**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)**
- Mga resource sa development ng Edge browser
- Mga gabay sa Progressive Web App
- Mga insight sa cross-platform development
**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)**
- Mga structured na kurikulum sa pag-aaral
- Mga video course mula sa mga eksperto sa industriya
- Mga hands-on na coding exercise
> 📚 **Strategiya sa Pag-aaral**: Huwag subukang i-memorize ang dokumentasyon – sa halip, matutong mag-navigate dito nang mahusay. I-bookmark ang mga madalas gamitin na reference at magpraktis sa paggamit ng mga search function upang mabilis na mahanap ang tiyak na impormasyon.
✅ **Ehersisyo sa Pagmuni-muni**: Pag-isipan kung paano maaaring magkaiba ang mga tool sa web development mula sa mga tool sa web design. Isaalang-alang kung paano maaaring magkaiba ang mga tampok sa accessibility, kakayahan sa responsive design, at mga collaborative workflow sa pagitan ng dalawang tungkulin. Ang paghahambing na ito ay makakatulong sa iyo na maunawaan ang mas malawak na ecosystem ng paglikha ng web!
## Hamon sa GitHub Copilot Agent 🚀
Gamitin ang Agent mode upang kumpletuhin ang sumusunod na hamon:
**Deskripsyon:** Tuklasin ang mga tampok ng isang modernong code editor o IDE at ipakita kung paano ito maaaring mapabuti ang iyong workflow bilang isang web developer.
**Prompt:** Pumili ng isang code editor o IDE (tulad ng Visual Studio Code, WebStorm, o isang cloud-based IDE). Maglista ng tatlong tampok o extension na tumutulong sa iyo na magsulat, mag-debug, o mag-maintain ng code nang mas mahusay. Para sa bawat isa, magbigay ng maikling paliwanag kung paano ito nakakatulong sa iyong workflow.
---
## 🚀 Hamon
**Tuklasin ang Iba't Ibang Programming Language**
Ngayon na nauunawaan mo ang mga pangunahing kaalaman ng programming languages, sumisid nang mas malalim sa kanilang natatanging mga katangian at gamit. Pumili ng tatlong programming languages mula sa iba't ibang kategorya (hal., web development, mobile development, data science, systems programming) at saliksikin ang kanilang natatanging mga tampok.
**Ang iyong gawain:**
1. **Ihambing ang mga istilo ng syntax**: Hanapin ang parehong simpleng gawain (tulad ng paggawa ng variable o pag-print ng "Hello World") na isinulat sa iyong napiling mga wika
2. **Kilalanin ang natatanging lakas**: Ano ang nagpapasikat sa bawat wika? Anong mga problema ang dinisenyo nitong lutasin?
3. **Tuklasin ang mga komunidad**: Tingnan ang laki at aktibidad ng komunidad ng developer ng bawat wika
4. **Isaalang-alang ang mga path ng pag-aaral**: Aling wika ang tila pinaka-approachable para sa isang baguhan, at bakit?
**Bonus na hamon**: Subukang maghanap ng mga halimbawa ng malalaking website, app, o system na ginawa gamit ang bawat wika. Baka magulat ka kung ano ang nagpapatakbo sa iyong mga paboritong digital na karanasan!
> 💡 **Tip sa Pag-aaral**: Huwag mag-alala tungkol sa pag-unawa sa lahat ng detalye ng syntax – mag-focus sa pagkilala sa mga pattern at pagkakaiba sa kung paano nilalapitan ng bawat wika ang paglutas ng problema.
## Post-Lecture Quiz
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/)
## Review & Self Study
**Palalimin ang Iyong Pag-unawa**
Maglaan ng oras upang tuklasin ang mga konseptong natutunan sa pamamagitan ng mas malalim na pagsisid sa mga tool at wika na pinaka-interesante sa iyo:
**Paggalugad sa Programming Language:**
- Bisitahin ang mga opisyal na website ng 2-3 programming languages na nabanggit sa aralin
- Subukan ang mga online coding playground tulad ng [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), o [Replit](https://replit.com/) upang mag-eksperimento sa simpleng code
- Basahin ang tungkol sa kasaysayan at mga tagalikha ng iyong paboritong programming language – ang pag-unawa sa "bakit" sa likod ng disenyo ng isang wika ay tumutulong sa iyong gamitin ito nang mas epektibo
**Pagpapakilala sa Tool:**
- I-download at i-install ang Visual Studio Code (kung hindi mo pa nagagawa)
- Tuklasin ang Extensions marketplace at mag-install ng ilang inirerekomendang extension
- Buksan ang Developer Tools ng iyong browser at maglaan ng ilang minuto sa paggalugad sa iba't ibang tab at tampok
**Koneksyon sa Komunidad:**
- Sundan ang mga komunidad ng developer sa mga platform tulad ng [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), o [GitHub](https://github.com/)
- Manood ng mga beginner-friendly na programming video sa YouTube o mga coding tutorial platform
- Isaalang-alang ang pagsali sa mga lokal na meetups o online na komunidad na nakatuon sa web development
> 🎯 **Tandaan**: Ang layunin ay hindi upang agad na ma-master ang lahat, kundi upang bumuo ng pamilyaridad sa landscape ng mga tool at konsepto na makakaharap mo habang patuloy kang natututo ng web development.
## Takdang-Aralin
[Reading the Docs](assignment.md)
> Tandaan: Kapag pumipili ng mga tool para sa iyong takdang-aralin, huwag pumili ng mga editor, browser, o command line tools na nakalista na sa itaas. Magtuon sa mga tool na kasalukuyang ginagamit, malawakang tinatangkilik, at may matibay na suporta mula sa komunidad o opisyal na suporta.
---
**Paunawa**:
Ang dokumentong ito ay isinalin gamit ang AI translation service na [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.