Web-Dev-For-Beginners/translations/tl/1-getting-started-lessons/1-intro-to-programming-languages/README.md

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

Pre-Lecture Quiz

Pre-lecture quiz

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!

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:

// 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

// 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

// 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:

 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 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).

// 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

// 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.

// 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

// 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

// 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

// 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.

// 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

// 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

// 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

// 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 para sa isang komprehensibong overview.

Mga Inirerekomendang Editor para sa Web Development

Visual Studio Code (Libre)

• Pinakasikat sa mga web developer
• Napakahusay na ecosystem ng extension
• May built-in na terminal at Git integration
• Mga kailangang extension:
  • GitHub Copilot - AI-powered na mga mungkahi sa code
  • Live Share - Real-time na kolaborasyon
  • Prettier - Awtomatikong pag-format ng code
  • Code Spell Checker - Tukuyin ang mga typo sa iyong code

JetBrains 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 - Buong VS Code sa iyong browser
• Replit - Mahusay para sa pag-aaral at pagbabahagi ng code
• StackBlitz - 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 - Industry-standard na DevTools na may malawak na dokumentasyon
• Firefox - Mahusay na CSS Grid at accessibility tools
• Edge - 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.

# 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

# 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

# Step 3: Create project structure and files
mkdir src assets
echo '<!DOCTYPE html><html><head><title>My Site</title></head><body><h1>Hello World</h1></body></html>' > 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	Version control	Subaybayan ang mga pagbabago, makipagtulungan sa iba, i-backup ang iyong trabaho
Node.js & npm	JavaScript runtime & package management	Patakbuhin ang JavaScript sa labas ng mga browser, mag-install ng mga modernong development tool
Vite	Build tool & dev server	Napakabilis na development na may hot module replacement
ESLint	Kalidad ng code	Awtomatikong tukuyin at ayusin ang mga problema sa iyong JavaScript
Prettier	Pag-format ng code	Panatilihing pare-pareho ang format at nababasa ang iyong code

Mga Opsyon na Partikular sa Platform

Windows:

• Windows Terminal - Moderno, mayaman sa tampok na terminal
• PowerShell 💻 - Makapangyarihang scripting environment
• Command Prompt 💻 - Tradisyunal na Windows command line

macOS:

• Terminal 💻 - Built-in na terminal application
• iTerm2 - Pinahusay na terminal na may advanced na mga tampok

Linux:

• Bash 💻 - Standard na Linux shell
• KDE Konsole - 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)

• 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 (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

• Mga resource sa development ng Edge browser
• Mga gabay sa Progressive Web App
• Mga insight sa cross-platform development

Frontend Masters Learning Paths

• 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

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, JSFiddle, o Replit 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, Stack Overflow, o GitHub
• 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

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. 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.