diff --git a/translations/lt/.co-op-translator.json b/translations/lt/.co-op-translator.json index b04ee16cf..50e29298b 100644 --- a/translations/lt/.co-op-translator.json +++ b/translations/lt/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "bec5e35642176d9e483552bfc82996d8", - "translation_date": "2026-03-06T17:16:43+00:00", + "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d", + "translation_date": "2026-03-27T23:07:04+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "lt" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-03-06T17:20:47+00:00", + "translation_date": "2026-03-27T23:10:41+00:00", "source_file": "AGENTS.md", "language_code": "lt" }, diff --git a/translations/lt/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/lt/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 18be5657b..6553047bd 100644 --- a/translations/lt/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/lt/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,12 +1,12 @@ # Įvadas į programavimo kalbas ir modernius kūrėjų įrankius - -Sveikas, būsimasis programuotojau! 👋 Ar galiu tau pasakyti kažką, kas man kiekvieną dieną sukelia šiurpuliukus? Tu ketini atrasti, kad programavimas nėra tik kompiuteriai – tai tikros supergalios, leidžiančios įgyvendinti tavo laukines idėjas! -Žinai tą akimirką, kai naudojiesi savo mėgstama programa ir viskas tiesiog veikia tobulai? Kai palieti mygtuką ir įvyksta kažkas stebuklingo, dėl ko sakai "oho, kaip jie TAI padarė?" Na, kažkas, panašus į tave – tikriausiai savo mėgstamoje kavinėje prie 2 val. nakties su trečiu espreso – parašė tą kodą, kuris sukūrė tą magiją. Ir štai kas tau privers sprogti protą: šios pamokos pabaigoje ne tik suprasi, kaip jie tai padarė, bet ir pats norėsi pabandyti! +Sveikas, būsimasis kūrėji! 👋 Ar galiu tau papasakoti kažką, kas kasdien man sukelia šiurpuliukus? Tu netrukus suprasi, kad programavimas nėra tik apie kompiuterius – tai tikros supergalios paversti savo beprotiškiausias idėjas realybe! -Žinok, suprantu, jei programavimas dabar atrodo bauginantis. Kai pradėjau, tikrai galvojau, kad reikia būti kažkokiu matematikos genijumi arba programuoti nuo penkerių metų. Tačiau štai kas visiškai pakeitė mano požiūrį: programavimas yra tarsi naujos kalbos mokymasis – pradedi nuo „labas“ ir „ačiū“, tuomet pereini prie kavos užsakymo ir netrukus jau vedi gilius filosofinius pokalbius! Tik šiuo atveju tu kalbiesi su kompiuteriais, o jie – kantriausi pašnekovai, kokius gali turėti – niekada nepeikia tavo klaidų ir visada noriai bando dar kartą! +Žinai tą akimirką, kai naudoji savo mėgstamą programėlę ir viskas tiesiog susiklosto puikiai? Kai paspaudi mygtuką ir įvyksta kažkas nepaprasto, kas privers tave sakyti „vau, kaip jie TAI PADARĖ?“ Na, kažkas panašaus kaip tu – tikriausiai sėdėdamas savo mėgstamame kavinės kampelyje 2 val. nakties su trečia espreso kava – parašė kodą, kuris sukūrė tą magiją. Ir štai kas tave sužavės: pamokos pabaigoje tu ne tik suprasi, kaip jie tai padarė, bet ir degsi noru tai išbandyti pats! -Šiandien pažvelgsime į nuostabius įrankius, kurie modernią žiniatinklio kūrimą paverčia ne tik įmanoma, bet ir labai įtraukią. Kalbu apie tuos pačius redaktorius, naršykles ir darbo procesus, kuriuos kasdien naudoja „Netflix“, „Spotify“ ir tavo mėgstamos nepriklausomos programėlių studijos kūrėjai. Ir štai dalykas, kuris privers tave šokti iš laimės: dauguma šių profesionalių pramonės standartų įrankių yra visiškai nemokami! +Žinok, visiškai suprantu, jei dabar programavimas atrodo bauginantis. Kai pradėjau, tikrai galvojau, kad reikia būti kokiu nors matematikos genijumi arba programuoti nuo penkerių metų. Bet štai kas visiškai pakeitė mano požiūrį: programavimas yra kaip mokytis kalbėti nauja kalba. Pradedi nuo „labas“ ir „ačiū“, vėliau užsakai kavą, ir netrukus jau vediesi gilius filosofinius pokalbius! Tik šiuo atveju tu kalbiesi su kompiuteriais, o jie yra kantriausi pokalbių draugai – niekada nepeikia tavo klaidų ir visada pasirengę bandyti dar kartą! + +Šiandien ištyrinėsime neįtikėtinus įrankius, kurie padaro šiuolaikinę interneto kūrimo praktiką ne tik įmanoma, bet ir labai patrauklia. Kalbu apie tą pačią redaktorių, naršyklių ir darbo procesų grupę, kurių kasdien naudojasi kūrėjai Netflix, Spotify ir tavo mėgstamos nepriklausomos programėlės studijos komandoje. Ir štai kas privers tave šokti iš džiaugsmo: dauguma šių profesionalių, pramonės standartų įrankių yra visiškai nemokami! ![Intro Programming](../../../../translated_images/lt/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote autorius [Tomomi Imura](https://twitter.com/girlie_mac) @@ -18,144 +18,144 @@ journey Kas yra programavimas: 5: You Programavimo kalbos: 4: You Įrankių apžvalga: 5: You - section Ištirkite + section Tyrinėti Kodo redaktoriai: 4: You Naršyklės ir kūrėjų įrankiai: 5: You Komandinė eilutė: 3: You section Praktika Kalbų detektyvas: 4: You Įrankių tyrinėjimas: 5: You - Bendruomenės ryšys: 5: You + Bendruomenės ryšiai: 5: You ``` -## Pažiūrėkime, ką jau žinai! +## Pažiūrėkime, ką tu jau žinai! -Prieš tai, kai pradėsime smagų turinį, man įdomu – ką tu jau žinai apie šį programavimo pasaulį? Ir žinok, jei žiūri į šiuos klausimus ir galvoji „aš iš tiesų neturiu jokio supratimo apie tai“, tai ne tik gerai, tai puiku! Tai reiškia, kad esi tiksliai ten, kur turi būti. Įsivaizduok šį testą kaip tempimą prieš treniruotę – mes tiesiog ruošiamės raumenims! +Prieš šokinėjant į smagius dalykus, man įdomu – ką tu jau žinai apie šį programavimo pasaulį? Ir klausyk, jei žiūrėdamas į šiuos klausimus galvoji „aš tiesiog visiškai neturiu jokios užuominos apie tai“, tai ne tik normalu, bet ir puiku! Tai reiškia, kad esi būtent reikiamoje vietoje. Galvok apie šį testą kaip apie tempimą prieš treniruotę – tiesiog šildome smegenų raumenis! -[Atlik išankstinį testą](https://ff-quizzes.netlify.app/web/) +[Atlik priešpamokinį testą](https://ff-quizzes.netlify.app/web/) -## Nuotykis, į kurį kartu įžengsime +## Nuotykis, kurį ketiname patirti kartu -Gerai, aš tikrai smarkiai džiaugiuosi tuo, ką šiandien tyrinėsime! Rimtai, norėčiau pamatyti tavo veidą, kai kai kurie iš šių koncepcijų įsižiebs. Štai nuostabi kelionė, kurią keliausime kartu: +Gerai, aš išties džiaugiuosi dėl to, ką šiandien ištyrinėsime! Rimtai, norėčiau matyti tavo veidą, kai kai kurie šie konceptai ims kristi į vietas. Štai nuostabus kelias, kurį žengiame kartu: -- **Kas iš tikrųjų yra programavimas (ir kodėl tai be galo šaunu!)** – Atraskime, kaip kodas tiesiogiai yra nematoma magija, kuri valdo viską aplinkui, nuo to žadintuvo, kuris kaip mat žino, kad yra pirmadienio rytas, iki algoritmo, kuris tobulai parenka tavo „Netflix“ rekomendacijas -- **Programavimo kalbos ir jų nuostabios asmenybės** – Įsivaizduok vakarėlį, kuriame kiekvienas turi skirtingas supergalias ir sprendžia problemas savaip. Būtent toks yra programavimo kalbų pasaulis, ir tu jas pamilsi! -- **Pagrindiniai pastato blokai, kurie kuria skaitmeninę magiją** – Įsivaizduok juos kaip tobulą kūrybinį LEGO rinkinį. Kai suprasi, kaip šios dalys dera kartu, suprasi, kad gali sukurti bet ką, ką tik sugalvoji -- **Profesionalūs įrankiai, dėl kurių jausiesi tarsi tau būtų įteikta burtininko lazdelė** – Aš čia nešališkas dramatiškumas – šie įrankiai tikrai leis tau jaustis, kad turi supergalias, o geriausia? Tai patys įrankiai, kuriuos naudoja profesionalai! +- **Kas iš tikrųjų yra programavimas (ir kodėl tai pats šauniausias dalykas!)** – Sužinosime, kaip kodas iš tikrųjų yra nematoma magija, valdanti viską aplink tave, nuo to žadintuvo, kuris kaip tyčia žino, kad pirmadienis rytoj, iki algoritmo, kuris tobulai atrenka tavo Netflix rekomendacijas +- **Programavimo kalbos ir jų nuostabūs charakteriai** – Įsivaizduok, kad ateini į vakarėlį, kuriame kiekvienas žmogus turi visiškai skirtingų supergalių ir sprendžia problemas skirtingais būdais. Taip yra ir programavimo kalbų pasaulyje, ir tau tikrai patiks jas pažinti! +- **Pagrindinės dalelės, kurios kuria skaitmeninę magiją** – Įsivaizduok šiuos kaip galutinį kūrybinį LEGO rinkinį. Kai suprasi, kaip šie gabalai dera kartu, suprasi, kad gali tiesiogiai sukurti bet ką, ką tik įsivaizduoji +- **Profesionalūs įrankiai, kurie privers jaustis lyg būtų atiduotas burtininko lazdelė** – Nesu dramatiškas – šie įrankiai tikrai suteiks tau supergalių jausmą, o geriausia? Tai tie patys, kuriuos naudoja profesionalai! -> 💡 **Svarbu**: Neskubėk šiandien visko įsiminti! dabar noriu, kad pajustum tą azartą, kas įmanoma. Detalės ateis natūraliai, kai kartu praktikavsimės – taip vyksta tikras mokymasis! +> 💡 **Štai ką tau pasakysiu**: Šiandien net nesistenk įsiminti visko! Dabar tiesiog noriu, kad pajustum tą jaudulį dėl to, kas įmanoma. Detalės natūraliai įstrigs, kai drauge praktikavsimės – štai kaip vyksta tikras mokymasis! -> Šią pamoką gali rasti [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> Šią pamoką gali atlikti [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) platformoje! -## Tai kas gi *yra* programavimas? +## Tai kas gi iš tiesų yra programavimas? -Gerai, imkimės milijono dolerių klausimo: kas iš tiesų yra programavimas? +Gerai, spręskime milijono vertės klausimą: kas iš tiesų yra programavimas? -Papasakosiu tau istoriją, kuri visiškai pakeitė mano požiūrį. Praėjusią savaitę bandžiau mamai paaiškinti, kaip naudotis mūsų nauju išmaniuoju televizoriaus nuotolinio valdymo pultu. Pagavau save sakant tokius žodžius: „Paspausk raudoną mygtuką, bet ne didįjį raudoną, o mažąjį raudoną kairėje... ne, tavo kitas kairėje... gerai, dabar laikyk du sekundes, ne vieną, ne tris...“ Skamba pažįstamai? 😅 +Paprasčiau pasakosiu istoriją, kuri visiškai pakeitė mano supratimą. Praeitą savaitę bandžiau paaiškinti savo mamai, kaip naudotis mūsų naujuoju išmaniu televizoriaus pultu. Pradėjau sakyti dalykus tipo „Paspausk raudoną mygtuką, bet ne didelį raudoną, o mažą raudoną kairėje... ne, tavo kitoje kairėje... gerai, dabar palaikyk du sekundes, ne vieną, ne tris...“ Skamba pažįstamai? 😅 -Tai yra programavimas! Tai menas duoti labai išsamius, žingsnis po žingsnio nurodymus kažkam galingam, bet kam reikia viską tiksliai išdėstyti. Tik vietoje to, kad aiškintum mamytei (kuri gali paklausti „kuri raudona mygtukė?!“), tu aiškini kompiuteriui (kuris tiesiog atlieka tai, ką sakai, net jei tai ne visiškai tas, ką turėjai omenyje). +Tai ir yra programavimas! Tai menas duoti nepaprastai detalias, žingsnis po žingsnio instrukcijas kažkam labai galingam, bet kam reikia viską labai tiksliai išdėstyti. Išskyrus tai, kad vietoje paaiškinimo mamai (kuri gali paklausti „kurią raudoną?!“), tu paaiškini kompiuteriui (kuris tiesiog daro būtent tai, ką sakai, net jei ne visai tai, ką turėjai omenyje). -Štai kas man atvertė akis, kai tik pradėjau mokytis: kompiuteriai iš tiesų yra gana paprasti savo esmėje. Jie supranta tik du dalykus – 1 ir 0, kas yra tiesiog „taip“ ir „ne“ arba „įjungta“ ir „išjungta“. Viskas! Bet štai kur prasideda magija – mums nereikia kalbėti tik 1 ir 0, tarsi būtume „Matricoje“. Čia į pagalbą ateina **programavimo kalbos**. Jos tarsi geriausias pasaulio vertėjas, kuris išverčia tavo paprastus žmogiškus mintis į kompiuterio kalbą. +Mano protą ištiko šokas, kai pirmą kartą supratau šią tiesą: kompiuteriai iš tikrųjų yra labai paprasti savo esmėje. Jie supranta tik du dalykus – 1 ir 0, kas iš esmės reiškia „taip“ ir „ne“ arba „įjungta“ ir „išjungta“. Tai viskas! Bet čia prasideda magija – mums nereikia kalbėti tik 1 ir 0 kaip Matrix filme. Čia ateina **programavimo kalbos** į pagalbą. Jos kaip geriausias pasaulio vertėjas, kuris paverčia tavo paprastus žmogaus mintis į kompiuterių kalbą. -Ir štai kas man kiekvieną rytą pažadina tikrus šiurpuliukus: tiesiog *viskas* skaitmeniniame pasaulyje prasidėjo nuo kažko panašaus į tave, tikriausiai pasislėpusio pižamoje su puodeliu kavos, kuris rašė kodą savo nešiojamame kompiuteryje. Tas Instagram filtras, kuris leidžia tau atrodyti nepriekaištingai? Kažkas jį sukūrė. Rekomendacija, kuri atvedė tave iki tavo naujos mėgstamos dainos? Programuotojas sukūrė tą algoritmą. Programėlė, kuri padeda suskaidyti vakarienės sąskaitas su draugais? Taip, kažkas pagalvojo „tai erzina, tikrai galėčiau tai išspręsti“ ir tada... jis tai padarė! +Ir štai kas man vis dar kas rytą sukelia šiurpuliukus: tiesiog *viskas* skaitmeniniame tavo gyvenime prasidėjo nuo kažko panašaus į tave, tikriausiai dėvint pižamą, gurkšnojančio kavą ir rašančio kodą savo nešiojamame kompiuteryje. Tą Instagram filtrą, kuris tave daro tobulą? Jį sukūrė kažkas. Rekomendaciją, kuria užkliuvai už savo naujos mėgstamos dainos? Algoritmą sukūrė kūrėjas. Programėlė, kuri padeda su draugais dalytis vakarienės sąskaitą? Taip, kažkas pagalvojo „tai erzina, gal aš galiu tai sutvarkyti“ ir tada... sutvarkė! -Išmokęs programuoti, ne tik įgiši naują įgūdį – tu tampi šios nuostabios problemų sprendėjų bendruomenės dalimi, kuri dienas leidžia galvodama: „O kas, jei galėčiau sukurti kažką, kas padaro kieno nors dieną bent šiek tiek geresnę?“ Svarstyk, ar yra kas nors šauniau už tai? +Kai mokaisi programuoti, tu ne tik įgyji naują įgūdį – tu tampi šios neįtikėtinos problemų sprendėjų bendruomenės dalimi, kuri kiekvieną dieną klausia savęs: „O kas, jei aš galėčiau sukurti kažką, kas truputį pagerintų kieno nors dieną?“ Rimtai, ar gali būti kas nors šauniau už tai? -✅ **Linksmas faktų medžioklė**: Štai kas smagu paieškoti, kai turėsi laisvą minutę – kas, tavo manymu, buvo pirmasis pasaulio kompiuterių programuotojas? Pasilenksiu į užuominą: tai gali būti ne tas, ko tikėjaisi! Šios asmenybės istorija yra be galo įkvepianti ir parodo, kad programavimas visada buvo susijęs su kūrybišku problemų sprendimu ir mąstymu už ribų. +✅ **Smagus faktų medžioklė**: Štai ką labai smagaus galima paieškoti laisvu metu – kas, tavo manymu, buvo pirmasis pasaulio kompiuterių programuotojas? Duosiu užuominą: tai gali būti ne tas, ko tikiesi! Šios asmenybės istorija be galo įdomi ir parodo, kad programavimas visada buvo apie kūrybinį problemų sprendimą ir mąstymą neįprastai. -### 🧠 **Patikrink, kaip jautiesi?** +### 🧠 **Patikra: Kaip jautiesi?** -**Skirk minutę apmąstymams:** -- Ar dabar tau prasminga idėja „duoti nurodymus kompiuteriams“? -- Ar gali pagalvoti apie kasdienę užduotį, kurią norėtum automatizuoti programuodamas? -- Kokie klausimai kyla tavo galvoje apie visą šitą programavimo dalyką? +**Skirk akimirką pagalvoti:** +- Ar tau dabar prasminga mintis „duoti instrukcijas kompiuteriams“? +- Ar gali įsivaizduoti kasdienę užduotį, kurią norėtum automatizuoti su programavimu? +- Kokie klausimai kyla galvoje apie visą šį programavimo dalyką? -> **Prisimink**: visiškai normalu, jei kai kurios sąvokos dabar atrodo miglotos. Programavimo mokymasis yra kaip naujos kalbos mokymasis – reikia laiko neurų keliams susiformuoti. Tu eini puikiai! +> **Prisimink**: Visiškai normalu, jei kai kurios sąvokos atrodo miglotos. Programavimas yra kaip mokytis naują kalbą – tavo smegenys turi laiko sukurti nervinius kelius. Tu darai puikų darbą! -## Programavimo kalbos – kaip skirtingi magijos skoniai +## Programavimo kalbos yra kaip skirtingi magijos skoniai -Gerai, tai skambės keistai, bet būk su manimi – programavimo kalbos daug kuo primena skirtingų muzikos stilių. Įsivaizduok: turi džiazą, kuris yra lygus ir improvizacinis, rokenrolą, kuris galingas ir tiesmukas, klasiką, kuri elegantiška ir struktūruota, ir hip-hopą, kuris kūrybingas ir ekspresyvus. Kiekvienas stilius turi savo nuotaiką, savo aistringų gerbėjų bendruomenę, ir kiekvienas yra tinkamas skirtingoms nuotaikoms ir progoms. +Gerai, tai skambės keistai, bet iškentėk – programavimo kalbos daug kuo panašios į skirtingų muzikos stilių rūšis. Pagalvok: yra džiazas, kuris švelnus ir improvizuojantis, rokas, kuris galingas ir tiesmukas, klasikinė muzika, kuri elegantiška ir struktūruota, ir hiphopas, kuris kūrybingas ir ekspresyvus. Kiekvienas stilius turi savo atmosferą, savo aistruolių bendruomenę, ir kiekvienas tinka skirtingoms nuotaikoms bei progoms. -Programavimo kalbos veikia būtent taip! Tu nenaudotum tos pačios kalbos smagiam mobiliam žaidimui kurti, kuriai apdoroti didžiulius klimato duomenų kiekius, kaip ir nesileistum groti death metalo jogos užsiėmime (na, daugumoje jogos užsiėmimų! 😄). +Programavimo kalbos veikia būtent taip pat! Tu juk nesinaudotum ta pačia kalba kuriant smagią mobilų žaidimą ir analizuojant milžiniškus klimato duomenų kiekius, taip pat kaip ir negrojėtum death metalo jogos užsiėmime (na, daugumoje jogos užsiėmimų! 😄). -Bet štai kas kiekvieną kartą man visiškai priverčia protą suktis: šios kalbos tarsi turi kantriausią, įspūdingiausią vertėją, kuris sėdi šalia tavęs. Tu gali išreikšti savo idėjas taip, kaip tavo žmogaus smegenims natūralu, o jis rūpinasi visa labai sudėtinga vertimo dalimi į 1 ir 0 kalbą, kuria iš tikrųjų kalba kompiuteriai. Tai tarsi draugas, kuris tobulai moka tiek „žmogišką kūrybiškumą“, tiek „kompiuterinę logiką“ – ir jis niekada nepavargsta, jam nereikia kavos pertraukų, ir jis niekada nepeikia, jei tu pakartotinai klausiu tą patį! +Bet štai kas mane sužavi kiekvieną kartą, kai apie tai galvoju: šios kalbos tarsi kantriausias ir geniali draugas-vertėjas pasaulyje sėdi šalia tavęs. Gali idėjas išreikšti taip, kaip natūralu tavo žmogaus smegenims, o jos sudėtingai verčia tai į 1 ir 0, kuriuos iš tikrųjų supranta kompiuteriai. Tai kaip turėti draugą, kuris puikiai kalba tiek „žmogiška kūryba“, tiek „kompiuterio logika“ – jis niekada nepavargsta, niekada neprašo kavos pertraukos ir niekada nesmerkia, jei užduodi tą patį klausimą du kartus! ### Populiarios programavimo kalbos ir jų paskirtys ```mermaid mindmap - root((Programavimo kalbos)) - Web kūrimas + root((Programavimo Kalbos)) + Web Development JavaScript - Frontendo magija - Interaktyvūs tinklalapiai + Frontend Magija + Interaktyvūs Tinklapių TypeScript - JavaScript + tipai - Įmonių programos - Duomenys ir DI + JavaScript + Tipai + Įmonių Programėlės + Data & AI Python - Duomenų mokslas - Mašininis mokymasis + Duomenų Mokslas + Mašininis Mokymasis Automatizavimas R Statistika Tyrimai - Mobiliosios programėlės + Mobile Apps Java - Android - Įmonių programos + Androidas + Įmonės Swift iOS - Apple ekosistema + Apple Ekosistema Kotlin - Modernus Android - Daugiaplatformis - Sistemos ir našumas + Modernus Androidas + Kryžminė Platforma + Systems & Performance C++ Žaidimai - Našumo kritinė vieta + Kritinė Veikimo Sparta Rust - Atminties saugumas - Sisteminė programinė įranga + Atminties Saugumas + Sisteminis Programavimas Go - Debesų paslaugos - Skalaujamas backendas + Debesų Paslaugos + Masto Prieinamumas Backend ``` -| Kalba | Geriausiai tinka | Kodėl populiari | -|-------|------------------|-----------------| -| **JavaScript** | Interneto kūrimas, vartotojo sąsajos | Veikia naršyklėse, valdo interaktyvias svetaines | +| Kalba | Geriausia | Kodėl populiari | +|----------|----------|------------------| +| **JavaScript** | Interneto kūrimas, vartotojo sąsajos | Veikia naršyklėse ir valdžioja interaktyvias svetaines | | **Python** | Duomenų mokslas, automatizavimas, DI | Lengva skaityti ir mokytis, galingos bibliotekos | -| **Java** | Įmonių programos, Android programėlės | Platformai nepriklausoma, tvirta didelėms sistemoms | -| **C#** | „Windows“ programos, žaidimų kūrimas | Stipri Microsoft ekosistema | -| **Go** | Debesų paslaugos, backend sistemos | Greita, paprasta, sukurta šiuolaikinei skaičiavimams | +| **Java** | Įmonių programos, Android aplikacijos | Nepriklausoma nuo platformos, stabili dideliems sistemoms | +| **C#** | Windows programos, žaidimų kūrimas | Stipri Microsoft ekosistema | +| **Go** | Debesų paslaugos, serverio dalis | Greita, paprasta, skirta moderniam kompiuterijimui | ### Aukšto lygio ir žemo lygio kalbos -Gerai, tai buvo tiesiog koncepcija, kuri išties sunaikino mano protą, kai pradėjau mokytis, todėl dalinsiuosi analogija, kuri pagaliau man leido tai suprasti – ir labai tikiuosi, kad ir tau padės! +Gerai, tai buvo konceptas, kuris pradžioje visiškai sulaužė mano smegenis, todėl pasidalinsiu analogija, kuri galiausiai man tai paaiškino – ir labai tikiuosi, kad padės ir tau! -Įsivaizduok, kad lankaisi šalyje, kurios kalbos nesupranti, ir desperatiškai reikia rasti artimiausią tualetą (mes visi per tą esame ėję, tiesa? 😅): +Įsivaizduok, kad lankaisi šalyje, kurios kalbos nemoki, ir desperatiškai nori surasti arčiausią tualetą (visi tai yra patyrę, tiesa? 😅): -- **Žemo lygio programavimas** yra tarsi mokėti vietinį dialektą taip gerai, kad gali kalbėtis su močiute, kuri prekiauja vaisiais kampe, naudodamas kultūrinius niuansus, vietinius žodžius ir vidinius juokelius, kuriuos supranta tik tie, kurie užaugo ten. Labai įspūdinga ir labai efektyvu... jei esi sklandus! Tačiau gana sudėtinga, kai tik nori rasti tualetą. +- **Žemo lygio programavimas** panašus į tai, kai taip gerai išmoksti vietinį dialektą, kad gali kalbėtis su močiute, pardavinėjančia vaisius, naudodamas kultūrines užuominas, vietinius šnekamosios kalbos posakius ir vidinius juokelius, kuriuos suprastų tik augęs toje vietovėje. Labai įspūdinga ir ypač efektyvu… jei esi laisvai kalbantis! Bet gana sudėtinga, kai tiesiog nori rasti tualetą. -- **Aukšto lygio programavimas** yra tarsi turėti nuostabų vietinį draugą, kuris tiesiog tave supranta. Gali pasakyti „man labai reikia surasti tualetą“ paprasta anglų kalba, o jis išverčia kultūrinius niuansus ir duoda tau nuorodas tokiu būdu, kuris tavo nenatūralioms smegenims visiškai aiškus. +- **Aukšto lygio programavimas** yra kaip turėti tą nuostabų vietinį draugą, kuris tave puikiai supranta. Gali tiesiog pasakyti „Man labai reikia rasti tualetą“ paprasta anglų kalba, o jis persimoko kultūrines subtilybes ir duoda tau suprantamas nuorodas, kurios suprantamos tavo nelokaliai smegenims. -Programavimo terminais: -- **Žemo lygio kalbos** (tokios kaip Asamblėja ar C) leidžia labai detaliai kalbėtis su kompiuterio aparatine įranga, tačiau reikalingas mašinos mąstymas, o tai... na, sakykime, didelis psichologinis šuolis! -- **Aukšto lygio kalbos** (pavyzdžiui, JavaScript, Python ar C#) leidžia galvoti kaip žmogui, o jos pačios rūpinasi visa mašinine kalba užkulisiuose. Be to, jos turi draugiškas bendruomenes, pilnas žmonių, kurie prisimena, kas buvo mokiniai ir tikrai nori padėti! +Programavimo terminologijoje: +- **Žemo lygio kalbos** (kaip Assembly ar C) leidžia tau labai detaliai bendrauti su kompiuterio aparatine įranga, tačiau turi mąstyti kaip mašina, kas yra... na, didelis protinis perėjimas! +- **Aukšto lygio kalbos** (kaip JavaScript, Python ar C#) leidžia tau mąstyti kaip žmogui, o jos užkulisiuose tvarko visą kalbą mašinai. Be to, jos turi nepaprastai draugiškas bendruomenes, kuriose pilna žmonių, prisimenančių, kaip buvo pradžioje, ir iš tikrųjų norinčių padėti! -Spėk, nuo kurių aš siūlau pradėti? 😉 Aukšto lygio kalbos yra tarsi mokomieji ratai, kurių tu tikrai nenori nuimti, nes jos daro visą patirtį daug smagesnę! +Spėk, kokias kalbas pasiūlysiu tau pradėti mokytis? 😉 Aukšto lygio kalbos yra tarsi mokomieji ratukai, kurių tu niekada nenorėsi nusimauti, nes jos labai palengvina visą patirtį! ```mermaid flowchart TB - A["👤 Žmogiška mintis:
'Noriu apskaičiuoti Fibonačio skaičius'"] --> B{Pasirinkite programavimo kalbos lygį} + A["👤 Žmogiška mintis:
'Noriu apskaičiuoti Fibonačio skaičius'"] --> B{Pasirinkite kalbos lygį} B -->|Aukšto lygio| C["🌟 JavaScript/Python
Lengva skaityti ir rašyti"] - B -->|Žemo lygio| D["⚙️ Assembly/C
Tiesioginė aparatinės įrangos kontrolė"] + B -->|Žemo lygio| D["⚙️ Asamblėja/C
Tiesioginis aparatūros valdymas"] C --> E["📝 Rašyti: fibonacci(10)"] D --> F["📝 Rašyti: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Kompiuterio supratimas:
Vertėjas valdo sudėtingumą"] + E --> G["🤖 Kompiuterio supratimas:
Vertėjas tvarko sudėtingumą"] F --> G G --> H["💻 Tas pats rezultatas:
0, 1, 1, 2, 3, 5, 8, 13..."] @@ -164,15 +164,15 @@ flowchart TB style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### Parodysiu, kodėl aukšto lygio kalbos tokios draugiškos +### Pasirodysiu, kodėl aukšto lygio kalbos yra daug draugiškesnės -Gerai, rodysiu tau pavyzdį, kuris puikiai parodo, kodėl aš pamėgau aukšto lygio kalbas, bet pirmiausiai – noriu, kad pažadėtum man kažką. Kai pamatysi pirmąk kodą, nepanikuok! Jis turi atrodyti bauginančiai. Ir tai yra būtent mano taikymas! +Gerai, dabar parodysiu tau ką nors, kas puikiai iliustruoja, kodėl aš įsimylėjau aukšto lygio kalbas, bet pirmiausia turi pažadėti man vieną dalyką. Kai pamatysi pirmą kodų pavyzdį, nesijaudink! Jis turi atrodyti kiek bauginančiai. Tai yra taikoma mano mintis! -Pažiūrėsime tą pačią užduotį, parašytą dviem visiškai skirtingais stiliais. Abu sukuria Fibonacci seką – tai gražus matematinis dėsnis, kai kiekvienas skaičius yra dviejų prieš jį esančių sumą: 0, 1, 1, 2, 3, 5, 8, 13... (Įdomybė: šį dėsningumą rasi tiesiog visur gamtoje – saulėgrąžų sėklų spiralėse, pušų kūgių raštuose, netgi galaktikų formavime!) +Pažiūrėsime tą pačią užduotį, parašytą dviem visiškai skirtingais stiliais. Abu kuria tai, ką vadiname Fibonačio seka – tai nuostabus matematinis modelis, kur kiekvienas skaičius yra dviejų prieš jį esančių skaičių suma: 0, 1, 1, 2, 3, 5, 8, 13... (Smagi detalė: šią seką galima rasti visur gamtoje – saulėgrąžos sėklų spiralėse, pušies kankorėžių raštuose ar net galaksijų formavime!) -Pasiruošęs pamatyti skirtumą? Eime! +Pasiruošęs pamatyti skirtumą? Pradėkime! -**Aukšto lygio kalba (JavaScript) – žmogui draugiška:** +**Aukšto lygio kalba (JavaScript) – Draugiška žmogui:** ```javascript // 1 žingsnis: Pagrindinis Fibonačio nustatymas @@ -183,32 +183,32 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**Šis kodas daro šiuos veiksmus:** -- **Deklaruoja** konstantą, kuri nurodo, kiek Fibonacci skaičių norime sugeneruoti -- **Inicializuoja** du kintamuosius, sekančius dabartinį ir kitą skaičių sekoje -- **Nustato** pradinius reikšmes (0 ir 1), kurios apibrėžia Fibonacci modelį -- **Pateikia** antraštę, kad pažymėtų rezultatus +**Štai ką šis kodas daro:** +- **Deklaruoja** konstantą, nurodančią, kiek Fibonačio skaičių norime sugeneruoti +- **Inicijuoja** du kintamuosius, kurie seka einamą ir kitą skaičius sekoje +- **Nustato** pradinius skaičius (0 ir 1), kurie apibrėžia Fibonačio modelį +- **Rodo** antraštę, identifikuojančią mūsų išvestį ```javascript -// 2 žingsnis: Sugeneruokite seką naudodami kilpą +// 2 žingsnis: Sukurkite seką naudojant ciklą for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Apskaičiuokite kitą skaičių sekoje + // Apskaičiuokite kitą sekos skaičių const sum = current + next; current = next; next = sum; } ``` -**Čia vyksta:** -- **Kartojamas ciklas** per kiekvieną sekos elementą naudojant `for` ciklą -- **Rodomas** kiekvienas skaičius su jo pozicija naudojant šablonines eilutes -- **Apskaičiuojamas** kitas Fibonacci skaičius, sudedant dabartinę ir kitą reikšmes -- **Atnaujinami** kintamieji, judant prie kitos iteracijos +**Išskaidome, kas čia vyksta:** +- **Kartojama** per kiekvieną poziciją sekoje naudojant `for` ciklą +- **Atvaizduojamas** kiekvienas skaičius su jo pozicija templatinių simbolių formatu +- **Apskaičiuojamas** kitas Fibonačio skaičius sudedant einamuosius ir kitus skaičius +- **Atnaujinami** stebėjimo kintamieji, kad pereitume į kitą iteraciją ```javascript -// 3 žingsnis: Šiuolaikinis funkcinis požiūris +// 3 žingsnis: Modernus funkcinis požiūris const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -225,12 +225,12 @@ console.log(fibSequence); ``` **Aukščiau mes:** -- **Sukūrėme** pakartotinai naudojamą funkciją, naudojant modernią rodyklės funkciją -- **Sukūrėme** masyvą, kuris saugo visą seką, o ne rodo skaičius pavieniui -- **Naudojome** masyvo indeksavimą, kad apskaičiuoti kiekvieną naują skaičių iš ankstesnių reikšmių -- **Gražiname** visą seką, kad ją būtų galima lanksčiai naudoti programos kituose vietose +- **Sukūrėme** pakartotinai naudojamą funkciją su modernaus rodyklių funkcijos sintakse +- **Sukaupėme** masyvą, kuriame saugoma visa seka vietoje atvaizdavimo po vieną +- **Panaudojome** masyvo indeksavimą kiekvienam naujam skaičiui apskaičiuoti pagal ankstesnius +- **Grąžiname** visą seką, kad ją būtų galima lanksčiai naudoti kitose programos dalyse -**Žemo lygio kalba (ARM Asamblėja) – kompiuteriui draugiška:** +**Žemo lygio kalba (ARM Assembly) – Draugiška kompiuteriui:** ```assembly area ascen,code,readonly @@ -257,77 +257,77 @@ back add r0,r1 end ``` -Atkreipk dėmesį, kaip JavaScript versija skaitosi beveik kaip angliški nurodymai, o Asamblėjos versija naudoja kriptinius komandas, kurios tiesiogiai valdo kompiuterio procesorių. Abi atlieka tą pačią užduotį, bet aukšto lygio kalba gerokai lengviau suprantama, rašoma ir prižiūrima žmogui. +Atkreipk dėmesį, kaip JavaScript versija beveik skaitosi kaip anglų kalbos instrukcijos, o Assembly versija naudoja paslaptingas komandas, kurios tiesiogiai valdo kompiuterio procesorių. Abu atlieka tą pačią užduotį, bet aukšto lygio kalba yra daug lengviau suprantama, rašoma ir prižiūrima žmonių. **Pagrindiniai skirtumai, kuriuos pastebėsi:** -- **Skaitymo paprastumas**: JavaScript naudoja aprašomuosius pavadinimus, tokius kaip `fibonacciCount`, o Assembly – paslėptus žymenis, tokius kaip `r0`, `r1` -- **Komentarai**: Aukšto lygio kalbos skatina aiškinamuosius komentarus, kurie daro kodą savidokumentuojančiu -- **Struktūra**: JavaScript loginė eiga atitinka žmonių mąstymą problemų sprendime žingsnis po žingsnio -- **Priežiūra**: JavaScript versijos atnaujinimas skirtingiems reikalavimams yra paprastas ir aiškus +- **Skaitymo paprastumas**: JavaScript naudoja apibūdinančius pavadinimus, kaip `fibonacciCount`, o Asamblėja – kriptinius žymenis, kaip `r0`, `r1` +- **Komentarai**: Aukšto lygio kalbos skatina aiškinamuosius komentarus, kurie padaro kodą savaiminiu dokumentu +- **Struktūra**: JavaScript loginė eiga atitinka, kaip žmonės mąsto apie problemas žingsnis po žingsnio +- **Priežiūra**: JavaScript versijos atnaujinimas pagal įvairius reikalavimus yra paprastas ir aiškus -✅ **Apie Fibonacci seką**: Šis visiškai nuostabus skaičių raštas (kur kiekvienas skaičius yra dviejų prieš jį esančių sumą: 0, 1, 1, 2, 3, 5, 8...) pasirodo tiesiog *visur* gamtoje! Jį rasite saulėgrąžų spiralėse, pušies kankorėžių raštuose, kaip vingiuoja nautilius kriauklės, net kaip auga medžių šakos. Labai įdomu, kaip matematika ir kodas gali padėti mums suprasti ir atkurti raštus, kuriuos gamta naudoja kuriant grožį! +✅ **Apie Fibonačio seką**: Šis gražiausias skaičių modelis (kur kiekvienas skaičius lygus dviejų prieš jį esančių sumai: 0, 1, 1, 2, 3, 5, 8...) pasirodo pažodžiui *kiekviename* gamtos kampelyje! Jį rasite saulėgrąžų spiralėse, pušies kūgų raštuose, nautilo kriauklių vingiuose ir net medžių šakų augime. Tai gana stulbinama, kaip matematika ir kodas gali padėti mums suprasti ir atkartoti gamtos naudojamus grožio modelius! -## Kūrimo blokai, kurie daro magiją +## Kūrimo blokai, kurie sukuria stebuklą -Gerai, dabar kai pamatėte, kaip atrodo programavimo kalbos praktiškai, suskaidykime pagrindines dalis, kurios sudaro tiesiog kiekvieną parašytą programą. Galvokite apie jas kaip esminius ingredientus savo mėgstamiausiame recepte – supratę, ką daro kiekvienas, galėsite skaityti ir rašyti kodą beveik bet kuria kalba! +Gerai, dabar, kai jau matėte, kaip atrodo programavimo kalbos veikime, išskaidykime pagrindinius elementus, sudarančius pažodžiui kiekvieną kada nors parašytą programą. Įsivaizduokite juos kaip esminius ingredientus jūsų mėgstamiausiame recepte – kai suprasite, ką kiekvienas daro, galėsite skaityti ir rašyti kodą beveik bet kuria kalba! -Tai kažkas panašaus į programavimo gramatikos mokymąsi. Prisiminkite mokykloje, kai mokėtės apie daiktavardžius, veiksmažodžius ir kaip sudaryti sakinius? Programavimas turi savo gramatikos versiją, ir tiesiog įdomu, kad ji yra daug logiškesnė ir atlaidesnė nei anglų kalbos gramatika! 😄 +Tai šiek tiek primena programavimo gramatikos mokymąsi. Prisiminkite mokykloje, kai mokėtės apie daiktavardžius, veiksmažodžius ir kaip sudėti sakinius? Programavimas turi savo gramatiką, ir, tiesą sakant, ji kur kas logiškesnė ir atlaidesnė nei anglų kalbos gramatika! 😄 -### Sakinių blokai: žingsnis po žingsnio instrukcijos +### Pareiškimai: žingsnis po žingsnio instrukcijos -Pradėkime nuo **sakinių** – jie kaip atskiros pastraipos pokalbyje su jūsų kompiuteriu. Kiekvienas sakinys liepia kompiuteriui atlikti vieną konkrečią užduotį, tarsi duotų kryptis: „Čia pasuk į kairę“, „Sustok prie raudono šviesoforo“, „Pastatyk automobilį tame taške.“ +Pradėkime nuo **pareiškimų** – tai tarsi atskiri sakiniai pokalbyje su jūsų kompiuteriu. Kiekvienas pareiškimas nurodo kompiuteriui padaryti vieną konkrečią užduotį, tarsi duodant instrukcijas: „Čia pasuk į kairę“, „Sustok prie raudono šviesoforo“, „Pastatyk automobilį ten“. -Man patinka sakiniai dėl jų skaitomumo. Pažiūrėkite: +Man patinka pareiškimai, nes jie paprastai labai suprantami. Pažiūrėkite į tai: ```javascript -// Pagrindinės instrukcijos, kurios atlieka vienkartinius veiksmus +// Pagrindinės instrukcijos, atliekamos vieną veiksmą const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` -**Štai ką šis kodas atlieka:** -- **Deklaruoja** konstantą kintamąjį vartotojo vardui saugoti -- **Rodo** pasveikinimo pranešimą konsolės išvestyje -- **Apskaičiuoja** ir išsaugo matematinės operacijos rezultatą +**Štai ką šis kodas daro:** +- **Deklaruoja** konstantą, kurioje saugomas vartotojo vardas +- **Rodo** pasveikinimo žinutę konsolės išvestyje +- **Apskaičiuoja** ir saugo matematinės operacijos rezultatą ```javascript -// Teiginiai, kurie sąveikauja su tinklalapiais +// Teiginiai, kurie sąveikauja su interneto puslapiais document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**Žingsnis po žingsnio, štai kas vyksta:** -- **Pakeičia** tinklalapio pavadinimą, rodoma naršyklės skirtelyje +**Žingsnis po žingsnio, kas vyksta:** +- **Pakeičia** tinklalapio antraštę, rodomą naršyklės skirtuke - **Pakeičia** viso puslapio fono spalvą ### Kintamieji: jūsų programos atminties sistema -Taip, **kintamieji** yra tikrai viena mano mėgstamiausių mokymo sąvokų, nes jie labai panašūs į dalykus, kuriuos jau naudojate kiekvieną dieną! +Gerai, **kintamieji** man yra viena iš pati mėgstamiausių temų mokyti, nes jie labai panašūs į dalykus, kuriuos jau naudojate kiekvieną dieną! -Pagalvokite apie savo telefono kontaktų sąrašą. Jūs neužsirašote visų numerių atmintinai – vietoje to išsaugote „Mama“, „Geriausias draugas“ arba „Pica, kuri pristato iki 2 valandos nakties“ ir telefone išsaugomi tik tikrieji numeriai. Kintamieji veikia visai taip pat! Tai kaip pažymėtos talpos, kuriose jūsų programa gali saugoti informaciją ir vėliau ją pasiimti naudodama pavadinimą, kuris iš tikrųjų prasmingas. +Įsivaizduokite savo telefono kontaktų sąrašą. Jūs neprisimenate visų telefono numerių – vietoj to išsaugote „Mama“, „Geriausias draugas“ ar „Picerija, kuri dirba iki 2 val. nakties“ ir leidžiate telefonui prisiminti tikruosius numerius. Kintamieji veikia lygiai taip pat! Jie tarsi pažymėti konteineriai, kuriuose jūsų programa gali laikyti informaciją ir vėliau ją atgaivinti pagal prasmę turintį pavadinimą. -Čia yra tai, kas tikrai nuostabu: kintamieji gali keistis programos veikimo metu (todėl ir pavadinimas „kintamasis“ – pamatykite, ką jie padarė?). Kaip jūs galėtumėte atnaujinti tą picos kontaktą radę dar geresnį restoraną, taip kintamieji gali būti atnaujinti, kai programa sužino naujos informacijos arba keičiasi sąlygos! +Ką yra labai šaunu: kintamieji gali keistis programai veikiant (todėl ir vadinami „kintamais“ – ar ne šaunu?). Kaip jūs atsinaujinate picų kontaktą, kai randate geresnį variantą, taip programoje kintamieji keičiasi, kai programa sužino naujų dalykų arba keičiasi sąlygos! -Leiskite parodyti, kaip gražiai paprasta tai gali būti: +Parodysiu, kaip paprastai tai atrodo: ```javascript -// 1 žingsnis: Kuriame pagrindinius kintamuosius +// 1 žingsnis: pagrindinių kintamųjų kūrimas const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` -**Šios sąvokos supratimas:** -- **Saugo** nekintamus duomenis `const` kintamuosiuose (pvz., svetainės pavadinimą) -- **Naudoja** `let` reikšmėms, kurios gali keistis programos metu -- **Priedija** skirtingus duomenų tipus: tekstus (string), skaičius, ir loginės reikšmės (boolean) -- **Pasirenka** aprašomuosius pavadinimus, kurie aiškiai paaiškina, ką kiekvienas kintamasis saugo +**Suprasti šiuos konceptus:** +- **Laikyti** nekintamas reikšmes naudodami `const` (pvz., svetainės pavadinimą) +- **Naudoti** `let` reikšmėms, kurios gali keistis visos programos metu +- **Priskirti** skirtingus duomenų tipus: tekstus, skaičius, loginės reikšmės (true/false) +- **Rinktis** apibūdinančius pavadinimus, kurie aiškiai pasako, ką kiekvienas kintamasis laiko ```javascript -// 2 žingsnis: Darbas su objektais susijusių duomenų grupavimui +// 2 žingsnis: Darbas su objektais, norint sugrupuoti susijusius duomenis const weatherData = { location: "San Francisco", humidity: 65, @@ -336,46 +336,46 @@ const weatherData = { ``` **Aukščiau mes:** -- **Sukūrėme** objektą, grupuojantį susijusią orų informaciją -- **Organizavome** kelis duomenis po vienu kintamojo pavadinimu -- **Naudojome** raktas–reikšmė poras, kad aiškiai pažymėtume kiekvieną duomenų elementą +- **Sukūrėme** objektą, kad sugrupuotume susijusią orų informaciją +- **Organizavome** kelis duomenų elementus po vienu kintamojo pavadinimu +- **Naudojome** raktas-reikšmė poras, kad aiškiai pažymėtume kiekvieną informaciją ```javascript -// 3 žingsnis: Kintamųjų naudojimas ir atnaujinimas +// 3 žingsnis: kintamųjų naudojimas ir atnaujinimas console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Kintamųjų, kuriuos galima keisti, atnaujinimas +// Keičiami kintamieji atnaujinami currentWeather = "cloudy"; temperature = 68; ``` **Paaiškinkime kiekvieną dalį:** -- **Rodyti** informaciją naudojant šablonines eilutes su `${}` sintakse -- **Pasiekti** objekto savybes naudojant taškinę notaciją (`weatherData.windSpeed`) -- **Atnaujinti** `let` deklaruotus kintamuosius, kad atspindėtų besikeičiančias sąlygas -- **Sujungti** kelis kintamuosius kuriant prasmingus pranešimus +- **Rodome** informaciją naudodami šabloninius tekstus su `${}` sintakse +- **Panaudojame** objekto savybes per taško notaciją (`weatherData.windSpeed`) +- **Atnaujiname** su `let` deklaruotus kintamuosius, kad atspindėtume pokyčius +- **Sujungiame** kelis kintamuosius, kad sukurtume prasmingas žinutes ```javascript -// 4 žingsnis: Modernus destruktūrizavimas švaresniam kodui +// 4 veiksmas: Šiuolaikinis dekonstruojimas švaresniam kodui const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` **Ką reikia žinoti:** -- **Išskirti** tam tikras objekto savybes naudojant destruktūrizavimo priskyrimą -- **Sukurti** naujus kintamuosius automatiškai su tokiais pat pavadinimais kaip objekto raktai -- **Supaprastinti** kodą vengiant pasikartojančios taškinės notacijos +- **Ištraukti** tam tikras savybes iš objektų naudojant destruktūrizacijos priskyrimą +- **Sukurti** naujus kintamuosius automatiškai su tais pačiais pavadinimais kaip objekto raktai +- **Supaprastinti** kodą vengiant daugkartinės taško notacijos -### Kontrolės srautas: mokome programą galvoti +### Kontrolės srautas: mokyti programą mąstyti -Gerai, čia programavimas tampa tikrai stulbinantis! **Kontrolės srautas** iš esmės reiškia mokyti programą priimti išmintingus sprendimus, tarsi kaip jūs darote kiekvieną dieną be jokių minčių. +Gerai, dabar programavimas tampa tiesiog stulbinančiai įdomus! **Kontrolės srautas** iš esmės yra jūsų programos mokymas priimti sumanius sprendimus, lygiai kaip jūs kiekvieną dieną tai darote be jokio mąstymo. -Įsivaizduokite: ryte galbūt manote „Jeigu lyja, pasiimsiu skėtį. Jei šalta, apsirengsiu striukę. Jei vėluoju, nepavalgysiu ir pasiimsiu kavos pakeliui.“ Jūsų smegenys natūraliai vykdo šią jeigu–tai logiką dešimtis kartų per dieną! +Įsivaizduokite: ryte tikriausiai galvojote „Jei lyja, pasiimsiu skėtį. Jei šalta, apsirengsiu striukę. Jei vėluoju, praleisiu pusryčius ir iškeliausiu pasiimti kavos.“ Jūsų smegenys natūraliai seka tokią jei-tada logiką dešimtis kartų per dieną! -Tai daro programas protingas ir gyvas, o ne tik seką nuobodžių, nuspėjamų komandų. Jos iš tiesų gali pažvelgti į situaciją, įvertinti, kas vyksta, ir tinkamai reaguoti. Tarsi suteiktumėte programai smegenis, kurios gali prisitaikyti ir priimti sprendimus! +Tai daro programas protingas ir gyvas, o ne tiesiog nuobodžiai vykdančias nuspėjamą scenarijų. Jos gali pažvelgti į situaciją, įvertinti, kas vyksta, ir tinkamai reaguoti. Tai tarsi suteikti programai smegenis, kurios gali prisitaikyti ir priimti sprendimus! -Norite pamatyti, kaip gražiai tai veikia? Leiskite parodyti: +Norite pamatyti, kaip gražiai tai veikia? Parodysiu: ```javascript // 1 žingsnis: Pagrindinė sąlyginė logika @@ -389,14 +389,14 @@ if (userAge >= 18) { } ``` -**Štai ką šis kodas daro:** -- **Tikrina**, ar vartotojo amžius atitinka balsavimo reikalavimą -- **Vykdo** skirtingus kodo blokus priklausomai nuo sąlygų rezultato -- **Apskaičiuoja** ir parodo, kiek dar laiko iki balsavimo teisės, jei vartotojas jaunesnis nei 18 -- **Suteikia** konkrečią, naudingą grįžtamąją informaciją kiekvienam atvejui +**Šis kodas daro:** +- **Tikrina**, ar vartotojo amžius atitinka balsavimo reikalavimus +- **Atlieka** skirtingus kodo blokus pagal sąlygos rezultatą +- **Apskaičiuoja** ir rodo, kiek laiko liko iki balsavimo galiojimo, jei vartotojas jaunesnis nei 18 +- **Pateikia** konkrečią, naudingą informaciją kiekvienam scenarijui ```javascript -// 2 žingsnis: Keli sąlygos su loginiais operatoriais +// 2 žingsnis: kelios sąlygos su loginiais operatoriais const userAge = 17; const hasPermission = true; @@ -409,25 +409,25 @@ if (userAge >= 18 && hasPermission) { } ``` -**Išskaidyti tai, kas čia vyksta:** +**Išskaidydami, kas vyksta:** - **Sujungia** kelias sąlygas naudodami `&&` (ir) operatorių -- **Kurti** daugiapakopį sąlygų hierarchiją naudodami `else if` keliems scenarijams -- **Apdoroti** visas galimas situacijas galutiniu `else` sakiniu -- **Pateikti** aiškią, veiksmingą grįžtamąją informaciją kiekvienai skirtingai situacijai +- **Sukuria** sąlygų hierarchiją su `else if` keliose situacijose +- **Tvarko** visas galimas situacijas paskutiniu `else` pareiškimu +- **Pateikia** aiškią ir veiksmingą grįžtamąją informaciją kiekvienam atvejui ```javascript -// 3 žingsnis: Trumpa sąlyga su ternarinis operatoriumi +// 3 žingsnis: Trumpa sąlyga su ternariniu operatoriumi const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**Ką reikia prisiminti:** -- **Naudoti** ternarinį operatorių (`? :`) paprastoms dviejų galimų variantų sąlygoms -- **Rašyti** sąlygą pirma, po to `?`, tada tiesos rezultatą, po to `:`, tada klaidos rezultatą -- **Taikyti** šį modelį, kai reikia priskirti reikšmes pagal sąlygas +**Svarbu atsiminti:** +- **Naudokite** ternarinį operatorių (`? :`) paprastoms dvejopoms sąlygoms +- **Rašykite** sąlygą pirmą, po jos `?`, tada tiesą atitinkantį rezultatą, po to `:`, tada netiesą atitinkantį rezultatą +- **Taikykite** šį šabloną, kai reikia priskirti reikšmes pagal sąlygas ```javascript -// 4 žingsnis: kelių specifinių atvejų tvarkymas +// 4 žingsnis: kelių konkrečių atvejų apdorojimas const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -448,54 +448,54 @@ switch (dayOfWeek) { ``` **Šis kodas atlieka:** -- **Suderina** kintamojo reikšmę su keliomis konkrečiomis situacijomis -- **Grupuoja** panašias bylas kartu (darbo dienos prieš savaitgalius) -- **Vykdo** tinkamą kodo bloką suradus atitikimą -- **Įtraukia** `default` atvejį netikėtoms reikšmėms apdoroti -- **Naudoja** `break` sakinius, kad kodas nesitęstų į kitą bylą +- **Palygina** kintamojo reikšmę su keliomis konkrečiomis reikšmėmis +- **Suriša** panašius atvejus kartu (darbo dienos prieš savaitgalius) +- **Atlieka** atitinkamą kodo bloką, kai randamas atitikmuo +- **Numato** `default` atvejį netikėtoms reikšmėms apdoroti +- **Naudoja** `break` pareiškimus, kad kodas neitų į kitą atvejį -> 💡 **Realus pavyzdys**: Pagalvokite apie kontrolės srautą kaip apie kantriausią pasaulyje GPS, kuris duoda jums nurodymus. Jis gali sakyti: „Jei pagrindinėje gatvėje spūstis, važiuokite automagistrale. Jei automagistralę uždaro statybos, bandykite vaizdingą maršrutą.“ Programos naudoja tokią pačią loginę sąlygų logiką, kad išmintingai reaguotų į skirtingas situacijas ir visuomet suteiktų vartotojams geriausią patirtį. +> 💡 **Reali gyvenimo analogija**: pagalvokite apie kontrolės srautą kaip apie pasaulio kantriausią GPS, kuris duoda nurodymus. Jis gali sakyti „Jei Main gatvėje eismas, važiuok greitkeliu. Jei greitkelį uždaro statybos, važiuok per vaizdingą maršrutą.“ Programos naudoja tą pačią loginę sąlygų logiką, kad išmintingai reaguotų į situacijas ir visuomet suteiktų vartotojams geriausią patirtį. -### 🎯 **Konceptų patikrinimas: pagrindų meistriškumas** +### 🎯 **Konceptų patikra: Kūrimo blokų meistriškumas** **Pažiūrėkime, kaip sekasi su pagrindais:** -- Ar galite paaiškinti skirtumą tarp kintamojo ir sakinio savo žodžiais? -- Sugalvokite realų scenarijų, kur panaudotumėte jeigu–tai sprendimą (kaip mūsų balsavimo pavyzdyje) -- Kas programavimo logikoje jus nustebino? +- Ar sugebate savo žodžiais paaiškinti skirtumą tarp kintamojo ir pareiškimo? +- Pagalvokite apie tikrą situaciją, kurje panaudotumėte jei-tada sprendimą (kaip balsavimo pavyzdyje) +- Kas apie programavimo logiką jus nustebino? -**Greitas pasitikėjimo pakilimas:** +**Greitas pasitikėjimo skatinimas:** ```mermaid flowchart LR - A["📝 Teiginiai
(Instrukcijos)"] --> B["📦 Kintamieji
(Saugojimas)"] --> C["🔀 Valdymo srautas
(Sprendimai)"] --> D["🎉 Veikianti Programa!"] + A["📝 Teiginiai
(Komandos)"] --> B["📦 Kintamieji
(Saugojimas)"] --> C["🔀 Valdymo srautas
(Sprendimai)"] --> D["🎉 Veikianti programa!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` -✅ **Ką darysime toliau**: Pradėsime smagiai gilintis į šias sąvokas ir tęsti šią nuostabią kelionę kartu! Dabar tiesiog susikoncentruokite į jaudulį dėl visų nuostabių galimybių, kurios laukia jūsų. Konkrečios įgūdžių ir technikos įsisavins natūraliai, kai praktikuosimės kartu – pažadu, tai bus daug smagiau, nei tikėjotės! +✅ **Ką darysime toliau**: kartu žengsime toliau šioje nuostabioje kelionėje! Dabar tiesiog pasimėgaukite jauduliu dėl visų nuostabių galimybių, kurios jūsų laukia. Konkretūs įgūdžiai ir technikos ateis natūraliai, kai kartu praktikuosimės – pažadu, kad tai bus daug smagiau nei galite tikėtis! ## Įrankiai darbui -Gerai, čia aš iš tiesų labai jaudinuosi ir vos neapsiverkiu iš džiaugsmo! 🚀 Kalbėsime apie neįtikėtinus įrankius, kurie leis jums jaustis, tarsi ką tik gavote rakto nuo skaitmeninės kosminės laivo taikymo. +Gerai, čia aš tiesiog negaliu sulaikyti savo džiugesio! 🚀 Kalbėsime apie nuostabius įrankius, kurie leis jums jaustis tarsi ką tik gavote skaitmeninės kosminės laivo raktus. -Žinote, kaip virėjas turi tobulai subalansuotus peilius, kurie jaučiasi tarsi jo rankos tęsinys? O muzikantas turi gitarą, kuri atrodo ima dainuoti vos ją palietus? Na, kūrėjai turi savo versiją tų magiškų įrankių, ir štai kas jus tiesiog pribloškia – dauguma jų visai nemokami! +Žinote, kaip šefas turi tobulai subalansuotus peilius, kurie atrodo tarsi rankų pratęsimas? Arba muzikantas turi gitarą, kuri tarsi pradeda dainuoti vos tik ją paliečia? Na, programuotojai turi savo versiją tų magiškų įrankių, ir štai kas jus visiškai sužavės – dauguma jų yra visiškai nemokami! -Negaliu nustygti vietoje, galvodamas apie galimybę dalintis jais su jumis, nes jie visiškai pakeitė, kaip kuriame programinę įrangą. Kalbame apie AI varomus kodo pagalbininkus, kurie gali padėti rašyti kodą (ir aš čia tikrai nejuokauju!), debesų aplinkas, kur galite kurti visas programas bet kur, kur yra Wi-Fi, ir tokį derinimo įrankių kompleksą, kad jie tarsi X-spinduliai jūsų programoms. +Aš beveik trypčioju vietoje, galvodamas, ką jums pasakysiu, nes šie įrankiai visiškai pakeitė, kaip mes kuriame programinę įrangą. Kalbame apie AI varomus kodavimo padėjėjus, kurie gali padėti rašyti jūsų kodą (rimtai!), debesų aplinkas, kur galite kurti visas programas iš bet kur turėdami Wi-Fi, bei tokias sudėtingas klaidų taisymo priemones, kad jos tarsi jūsų programų rentgeno akys. -Ir štai kas man vis dar kelia šiurpuliukus: tai tikrai nėra „pradedančiųjų įrankiai“, kuriuos greitai peraugsit. Tai tie patys profesionalaus lygio įrankiai, kuriuos šiuo metu naudoja Google, Netflix ir ta indie programėlių studija, kurią dievinate. Jūs jausitės tikru profesionalu, juos naudodami! +Ir štai dalis, kuri man vis dar sukelia šiurpuliukus: tai ne „pradedančiųjų“ įrankiai, kuriuos greitai peraugsite. Tai būtent tie profesionalūs įrankiai, kuriuos dabar naudoja Google, Netflix ir ta indie programėlių studija, kurią mylite. Jūs jausitės tiesiog profesionalu, naudodami juos! ```mermaid graph TD - A["💡 Jūsų idėja"] --> B["⌨️ Kodo redaktorius
(VS Code)"] - B --> C["🌐 Naršyklės kūrėjų įrankiai
(Testavimas ir derinimas)"] - C --> D["⚡ Komandinė eilutė
(Automatizavimas ir įrankiai)"] - D --> E["📚 Dokumentacija
(Mokymasis ir nuorodos)"] - E --> F["🚀 Nuostabi žiniatinklio programėlė!"] + A["💡 Jūsų Idėja"] --> B["⌨️ Kodo Redaktorius
(VS Code)"] + B --> C["🌐 Naršyklės DevTools
(Testavimas ir Derinimas)"] + C --> D["⚡ Komandinė Eilutė
(Automatizavimas ir Įrankiai)"] + D --> E["📚 Dokumentacija
(Mokymasis ir Nuorodos)"] + E --> F["🚀 Nuostabi Interneto Programa!"] - B -.-> G["🤖 DI asistentas
(GitHub Copilot)"] - C -.-> H["📱 Įrenginių testavimas
(Reaguojantis dizainas)"] - D -.-> I["📦 Paketo valdytojai
(npm, yarn)"] + B -.-> G["🤖 AI Asistentas
(GitHub Copilot)"] + C -.-> H["📱 Įrenginio Testavimas
(Reaguojantis Dizainas)"] + D -.-> I["📦 Paketų Tvarkyklės
(npm, yarn)"] E -.-> J["👥 Bendruomenė
(Stack Overflow)"] style A fill:#fff59d @@ -505,121 +505,121 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### Kodo redaktoriai ir IDE: jūsų naujieji skaitmeniniai draugai +### Kodo redaktoriai ir IDE: jūsų nauji skaitmeniniai draugai -Pakalbėkime apie kodo redaktorius – jie rimtai gali tapti jūsų mėgstamiausiomis vietomis praleisti laiką! Galvokite apie juos kaip savo asmeninę programavimo šventovę, kur praleisite daugiausia laiko, kurdami ir tobulindami savo skaitmeninius kūrinius. +Pakalbėkime apie kodo redaktorius – jie greitai taps jūsų mėgstamiausiomis vietomis! Įsivaizduokite juos kaip savo asmeninę programavimo šventovę, kurioje praleisite daugiausiai laiko kurdami ir tobulindami savo skaitmeninius kūrinius. -Bet štai kas yra tiesiog magiška apie modernius redaktorius: jie nėra vien tik išvaizdžūs teksto redaktoriai. Jie tarsi pats šviesiausias ir palaikantis programavimo mentorius, sėdintis šalia jūsų 24/7. Jie pagauna jūsų klaidas dar anksčiau, nei jas pastebite, pasiūlo patobulinimus, kurie jus padaro genijumi, padeda suprasti, ką daro kiekvienas kodo gabalas, ir kai kurie net gali nuspėti, ką ketinate rašyti, ir pasiūlyti baigti jūsų mintis! +Bet štai kas čia magiška apie šiuolaikinius redaktorius: tai ne tiesiog išmanūs teksto redaktoriai. Tai tarsi genialiausias ir palaikantis programavimo mentorius, kuris sėdi šalia jūsų 24/7. Jie pagauna jūsų rašybos klaidas dar prieš jums jas pastebint, siūlo patobulinimus, dėl kurių atrodote kaip genijus, padeda suprasti, ką kiekvienas kodo gabalas daro, o kai kurie net spėja, ką ketinate parašyti ir siūlo užbaigti jūsų mintis! -Prisimenu, kai pirmą kartą atradau automatinį užbaigimą – jaučiausi tarsi gyvenčiau ateityje. Pradedate rašyti, ir redaktorius sako: „Ei, ar galvojote apie šią funkciją, kuri daro būtent tai, ko jums reikia?“ Tarsi turėtumėte mintis skaitantį draugą! +Prisimenu, kai pirmą kartą atradau automatinį užbaigimą – tiesiog jaučiausi it gyvenčiau ateityje. Pradedate rašyti kažką, o redaktorius sako: „Ei, galvojote apie šią funkciją, kuri tiksliai atlieka tai, ko jums reikia?“ Tai tarsi turėti mintis skaitančią programavimo bičiulę! -**Kas daro šiuos redaktorius tokius neįtikėtinus?** +**Kas daro šiuos redaktorius tokius nuostabius?** -Modernūs kodo redaktoriai siūlo įspūdingą funkcijų rinkinį, skirtą padidinti jūsų produktyvumą: +Šiuolaikiniai kodo redaktoriai siūlo įspūdingą funkcijų spektrą, skirtą padidinti jūsų produktyvumą: -| Funkcija | Ką ji daro | Kodėl tai naudinga | +| Funkcija | Ką ji daro | Kam tai naudinga | |---------|--------------|--------------| -| **Sintaksės paryškinimas** | Spalvina skirtingas kodo dalis | Padeda lengviau skaityti kodą ir aptikti klaidas | -| **Automatinis užbaigimas** | Siūlo kodą rašant | Spartina kodavimą ir mažina klaidas | -| **Derinimo įrankiai** | Padeda rasti ir taisyti klaidas | Taupo daugybę problemų sprendimo laiko | -| **Pratęsimai** | Prideda specializuotas funkcijas | Leidžia pritaikyti redaktorių bet kokiai technologijai | -| **AI asistentai** | Siūlo kodą ir paaiškinimus | Pagreitina mokymąsi ir produktyvumą | +| **Sintaksės paryškinimas** | Spalvina skirtingas kodo dalis | Lengviau skaityti kodą ir pastebėti klaidas | +| **Automatinis užbaigimas** | Siūlo kodą rašant | Paspartina kodavimą ir sumažina klaidų | +| **Klaidų taisymo įrankiai** | Padeda rasti ir taisyti klaidas | Sutaupo daug laiko trikčių šalinimui | +| **Praplėtimai** | Prideda specializuotas funkcijas | Pritaiko redaktorių bet kokiai technologijai | +| **AI pagalbininkai** | Siūlo kodą ir paaiškinimus | Pagreitina mokymąsi ir darbą | -> 🎥 **Vaizdo įrašo šaltinis**: Norite pamatyti šiuos įrankius veikiant? Peržiūrėkite šį [Įrankių vaizdo įrašą](https://youtube.com/watch?v=69WJeXGBdxg) dėl išsamaus apžvalgos. +> 🎥 **Vaizdo įrašas**: Norite pamatyti šiuos įrankius veiksme? Peržiūrėkite šį [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) išsamiam apžvalgai. -#### Rekomenduojami redaktoriai interneto plėtrai +#### Rekomenduojami redaktoriai interneto kūrimui **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Nemokamas) - Populiariausias tarp interneto kūrėjų -- Puiki plėtinių ekosistema -- Integruotas terminalas ir Git palaikymas -- **Būtini plėtiniai**: +- Puiki praplatinimų ekosistema +- Integruota terminalas ir Git palaikymas +- **Privalomi praplėtimai**: - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) – AI varomi kodo pasiūlymai - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) – bendradarbiavimas realiuoju laiku + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) – bendradarbiavimas realiu laiku - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) – automatinis kodo formatavimas - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) – klaidų rašyboje tikrinimas kode + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) – klaidų tikrinimas kode **[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Mokamas, nemokamas studentams) -- Pažangūs derinimo ir testavimo įrankiai -- Išmanus kodo užbaigimas +- Pažangūs klaidų taisymo ir testavimo įrankiai +- Intelektualus kodo užbaigimas - Integruota versijų kontrolė -**Debesyse veikiantys IDE** (Įvairios kainos) -- [GitHub Codespaces](https://github.com/features/codespaces) – pilnas VS Code naršyklėje -- [Replit](https://replit.com/) – puiku mokymuisi ir kodo dalinimuisi -- [StackBlitz](https://stackblitz.com/) – momentinė pilno spektro interneto plėtra +**Debesų IDE** (Įvairios kainos) +- [GitHub Codespaces](https://github.com/features/codespaces) – pilnas VS Code jūsų naršyklėje +- [Replit](https://replit.com/) – puikus mokymuisi ir kodų dalijimuisi +- [StackBlitz](https://stackblitz.com/) – momentinis, pilno paketo interneto kūrimas -> 💡 **Pradžios patarimas**: Pradėkite su Visual Studio Code – jis nemokamas, plačiai naudojamas industrijoje ir turi milžinišką bendruomenę, kuri kuria naudingas pamokas ir pratęsimus. +> 💡 **Pradžios patarimas**: pradėkite nuo Visual Studio Code – jis nemokamas, plačiai naudojamas pramonėje ir turi milžinišką bendruomenę, kuri kuria naudingus mokymus ir praplėtimus. -### Interneto naršyklės: jūsų slaptasis kūrimo laboratorija +### Interneto naršyklės: jūsų paslaptinga kūrimo laboratorija -Gerai, pasiruoškite būti visiškai sužavėti! Žinote, kaip naršyklės naudojamos naršyti socialiniuose tinkluose ir žiūrėti vaizdo įrašus? Paaiškėjo, kad jos visą laiką slėpė nuostabią slapta kūrėjų laboratoriją, tik laukdamos, kol ją atrasite! +Gerai, pasiruoškite, kad protas gali būti visiškai sukrėstas! Žinote, kaip naršyklės naudojamos naršyti socialiniuose tinkluose ar žiūrėti vaizdo įrašus? Paaiškėjo, kad jos visą laiką slepia neįtikėtiną kūrėjo laboratoriją, kuri tik laukia, kol ją atrasite! -Kiekvieną kartą, kai paspaudžiate dešinį pelės mygtuką ant tinklalapio ir pasirenkate „Peržiūrėti elementą“, jūs atidarote paslėptą kūrėjų įrankių pasaulį, kuris yra nuoširdžiai galingesnis už kai kurią brangią programinę įrangą, už kurią anksčiau mokėjau šimtus dolerių. Tai tarsi atrasti, kad jūsų paprasta virtuvė slepia profesionalaus virėjo laboratoriją už slaptos panelės! -Pirmą kartą, kai man parodė naršyklės DevTools, praleidau maždaug tris valandas tiesiog spausdamas visur ir sakydamas „PALAU, JI TAI GALI DARYTI?!" Tu tiesiog gali realiu laiku redaguoti bet kurią svetainę, tiksliai matyti, kaip greitai viskas įsikrauna, išbandyti, kaip tavo svetainė atrodo skirtinguose įrenginiuose, ir netgi derinti JavaScript tarsi tikras profesorius. Tai absoliučiai pribloškianti patirtis! +Kiekvieną kartą, kai dešiniuoju pelės mygtuku spustelite interneto puslapį ir pasirenkate „Inspect Element“ (Tikrinti elementą), jūs atveriate slaptą kūrėjų įrankių pasaulį, kuris yra tiesiog galingesnis nei kai kurios brangios programos, už kurias anksčiau mokėjau šimtus dolerių. Tai tarsi atrasti, kad jūsų paprasta virtuvė slepia profesionalaus šefų laboratoriją už slapto skydelio! +Pirmą kartą, kai kas parodė man naršyklės kūrėjo įrankius (DevTools), aš praleidau apie tris valandas tiesiog spustelėdamas ir sakydamas „PALAUKE, AR TAI TIKRAI GALIMA DARYTI?“ Tu gali tiesiogiai redaguoti bet kurią svetainę realiuoju laiku, tiksliai matyti, kaip greitai viskas įsikrauna, testuoti, kaip tavo svetainė atrodo skirtinguose įrenginiuose, ir netgi vykdyti JavaScript derinimą kaip tikras profesionalas. Tai tiesiog stulbinama! **Štai kodėl naršyklės yra tavo slaptas ginklas:** -Kai kuri svetainę ar žiniatinklio programą, reikia matyti, kaip ji atrodo ir elgiasi realiame pasaulyje. Naršyklės ne tik rodo tavo darbą, bet ir suteikia detalią informaciją apie veikimą, prieinamumą ir galimas problemas. +Kai kuri svetainę ar žiniatinklio programą, reikia matyti, kaip ji atrodo ir veikia realiame pasaulyje. Naršyklės ne tik rodo tavo kūrinį, bet ir suteikia išsamų grįžtamąjį ryšį apie našumą, prieinamumą ir galimas problemas. -#### Naršyklės kūrėjų įrankiai (DevTools) +#### Naršyklės kūrėjo įrankiai (DevTools) -Šiuolaikinės naršyklės apima visapusiškas kūrimo priemonių rinkinius: +Šiuolaikinės naršyklės turi išsamias kūrimo priemonių komplektus: -| Įrankio kategorija | Ką ji daro | Naudojimo pavyzdys | -|--------------------|------------|--------------------| -| **Elementų inspektorius** | Realiojo laiko HTML/CSS peržiūra ir redagavimas | Koreguoti stilių, kad pamatytumėte akimirksniu rezultatus | -| **Konsolė** | Peržiūrėti klaidų pranešimus ir testuoti JavaScript | Derinti problemas ir eksperimentuoti su kodu | -| **Tinklo stebėjimas** | Stebėti kaip kraunasi resursai | Optimizuoti našumą ir įkėlimo laikus | -| **Prieinamumo tikrintuvas** | Tikrinti įtraukiantį dizainą | Užtikrinti, kad svetainė veiktų visiems vartotojams | -| **Įrenginio simuliatorius** | Peržiūra skirtingų ekranų dydžių | Išbandyti reaguojančio dizaino be kelių įrenginių | +| Įrankio kategorija | Ką daro | Pavyzdinė panaudojimo situacija | +|--------------------|---------|--------------------------------| +| **Elementų inspektorius** | Tiesiogiai peržiūrėti ir redaguoti HTML/CSS | Koreguoti dizainą, kad matyti akimirksniu pokyčius | +| **Konsolė** | Rodyti klaidų pranešimus ir testuoti JavaScript | Derinti problemas ir eksperimentuoti su kodu | +| **Tinklo stebėjimas** | Sekti, kaip įkeliami ištekliai | Optimizuoti veikimą ir įkėlimo laikus | +| **Prieinamumo tikrinimas** | Testuoti įtraukiantį dizainą | Užtikrinti, kad svetainė veiktų visiems naudotojams | +| **Įrenginio simuliatorius** | Peržiūrėti skirtingo ekrano dydžio rodinius | Testuoti atsakomąjį dizainą be kelių įrenginių | #### Rekomenduojamos naršyklės kūrimui -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** – pramonės standartas DevTools su išsamiomis dokumentacijomis -- **[Firefox](https://developer.mozilla.org/docs/Tools)** – puikios CSS Grid ir prieinamumo priemonės -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** – pastatytas ant Chromium, su Microsoft kūrėjų ištekliais +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Pramonės standartas su plačia dokumentacija +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Puikios CSS Grid ir prieinamumo priemonės +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Sukurta ant Chromium su Microsoft kūrėjo ištekliais -> ⚠️ **Svarbi testavimo patarimas**: Visada testuok savo svetaines keliuose naršyklėse! Kas puikiai veikia Chrome, gali atrodyti kitaip Safari ar Firefox. Profesionalūs kūrėjai testuoja visose pagrindinėse naršyklėse, kad užtikrintų nuoseklią vartotojo patirtį. +> ⚠️ **Svarbi testavimo patarimas:** Visada testuok savo svetaines keliuose naršyklėse! Kas puikiai veikia Chrome, gali atrodyti kitaip Safari ar Firefox. Profesionalūs kūrėjai testuoja visuose pagrindiniuose naršyklėse, kad užtikrintų vienodą naudotojų patirtį. -### Komandų eilutės įrankiai: tavo kelias gauti kūrėjo supergalių +### Komandų eilutės įrankiai: tavo kelias į kūrėjo supergalias -Gerai, turime visiškai sąžiningą akimirką apie komandų eilutę, nes noriu, kad išgirstum tai iš žmogaus, kuris tikrai tai supranta. Kai pirmą kartą ją pamačiau – tik tą bauginančią juodą ekraną su mirksinčiu tekstu – aš tiesiog pagalvojau: „Ne, tikrai ne! Tai atrodo kaip kažkas iš 1980-ųjų hakerių filmo, ir aš tikrai nesu pakankamai protingas tam!“ 😅 +Gerai, būkime visiškai atviri apie komandų eilutę, nes noriu, kad išgirstum tai iš kažko, kas tikrai supranta. Kai pirmą kartą ją pamačiau – šį baisų juodą ekraną su mirksinčiu tekstu – aš tiesiog pagalvojau: „Ne, visai ne! Tai atrodo kaip kas nors iš 1980-ųjų kibernetinio filmo, ir aš tikrai nepakankamai protingas tam!“ 😅 -Bet štai ką norėčiau, kad kas nors man būtų pasakęs tada, ir ką sakau tau dabar: komandų eilutė nėra baisi – tai iš tikrųjų tarsi tiesioginis pokalbis su tavo kompiuteriu. Įsivaizduok tai kaip skirtumą tarp užsakymo per įmantrų programėlę su paveikslėliais ir meniu (kas yra lengva ir patogu) ir įėjimo į tavo mėgstamą vietinį restoraną, kur šefas tiksliai žino, ką tau patinka, ir gali pagaminti kažką tobulo vien sakydamas „nustebink mane kažkuo nuostabiu“. +Bet štai ką norėčiau, kad kas man būtų pasakęs tada, ir ką sakau tau dabar: komandų eilutė nėra baisi – tai tarsi tiesioginis pokalbis su tavo kompiuteriu. Įsivaizduok, kad tai skirtumas tarp maisto užsakymo per elegantišką programėlę su paveikslėliais ir meniu (kas yra patogu ir paprasta) ir įėjimo į mėgstamą vietinį restoraną, kur virėjas tiksliai žino, ką tu mėgsti, ir gali paruošti kažką ypatingo, tik pasakius „ nustebink mane kuo nors įspūdingu.“ -Komandų eilutė yra vieta, kur kūrėjai jaučiasi lyg tikri raganiai. Parašai keletą atrodytų magiškų žodžių (gerai, tai tik komandos, bet jos jaučiasi magiškai!), paspaudi Enter ir BUM – sukuri visą projektų struktūrą, įdiegia galingus įrankius iš viso pasaulio arba išleidžia savo programėlę į internetą, kad milijonai žmonių galėtų ją pamatyti. Kai pirmą kartą paragauji galios, tai tikrai užkrečiama! +Komandų eilutė yra ten, kur kūrėjai jaučiasi tikrais burtininkais. Tu įvedi kelis stebuklingus žodžius (gerai, tie žodžiai yra komandos, bet jos atrodo stebuklingos!), spaudi enter, ir PAF – sukuri visą projektų struktūrą, įdiegia galingus įrankius iš viso pasaulio arba išleidžia savo aplikaciją internetui, kad milijonai žmonių ją pamatytų. Kai pirmą kartą pajusi šios galios skonį, tai būna tiesiog priklausomybę keliantis! **Kodėl komandų eilutė taps tavo mėgstamiausiu įrankiu:** -Nors grafinės sąsajos yra puikios daugeliui užduočių, komandų eilutė išsiskiria automatizacija, preciziškumu ir greitumu. Daugelis kūrimo įrankių daugiausia veikia per komandų eilutės sąsajas, o išmokti jas efektyviai naudotis gali žymiai pagerinti tavo produktyvumą. +Nors grafinės sąsajos yra puikios daugeliui užduočių, komandų eilutė išsiskiria automatizavimu, tikslumu ir greičiu. Daugelis kūrimo įrankių veikia daugiausia per komandų eilutę, o mokėjimas jas efektyviai naudoti gali žymiai pagerinti tavo produktyvumą. ```bash -# 1 žingsnis: Sukurkite ir eikite į projekto katalogą +# 1 žingsnis: Sukurkite ir pereikite į projekto katalogą mkdir my-awesome-website cd my-awesome-website ``` -**Ką daro šis kodas:** -- **Sukuria** naują aplanką pavadinimu „my-awesome-website“ tavo projektui -- **Pereina** į ką tik sukurtą aplanką, kad pradėtum darbą +**Štai ką daro šis kodas:** +- **Sukuria** naują katalogą pavadinimu „my-awesome-website“ tavo projektui +- **Pereina** į ką tik sukurtą katalogą, kad pradėtum darbą ```bash -# 2 žingsnis: inicializuoti projektą su package.json +# 2 žingsnis: Inicijuokite projektą su package.json npm init -y -# Įdiegti šiuolaikinius kūrimo įrankius +# Įdiekite šiuolaikinius kūrimo įrankius npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Žingsnis po žingsnio, kas vyksta:** -- **Inicijuoja** naują Node.js projektą su numatytosiomis reikšmėmis naudojant `npm init -y` -- **Įdiegia** Vite kaip modernų įrankį greitam kūrimui ir gamybos kompiliavimui -- **Prideda** Prettier automatinio kodo formatavimo ir ESLint kodo kokybės tikrinimų įrankius -- **Naudoja** `--save-dev` žymeklį, kad žymėtume tai kaip tik kūrimo priklausomybes +**Žingsnis po žingsnio, štai kas vyksta:** +- **Inicializuoja** naują Node.js projektą su numatytomis reikšmėmis naudodamas `npm init -y` +- **Įdiegia** Vite kaip modernų kūrimo įrankį greitam vystymui ir produkcijos rinkimams +- **Prideda** Prettier automatinio kodo formatavimo ir ESLint kodo kokybės tikrinimo tikslams +- **Naudoja** `--save-dev` žymeklį nurodant šias priklausomybes kaip tik vystymo metu reikalingas ```bash # 3 žingsnis: Sukurkite projekto struktūrą ir failus @@ -631,155 +631,155 @@ npx vite ``` **Aukščiau mes:** -- **Organizavome** projektą sukurdami atskirus aplankus šaltinio kodui ir ištekliams +- **Organizavome** projektą kurdami atskirus aplankus šaltinio kodui ir turiniui - **Sugeneravome** bazinį HTML failą su tinkama dokumento struktūra -- **Paleidome** Vite kūrimo serverį su tiesioginiu perkrovimu ir karštu modulių pakeitimu +- **Paleidome** Vite vystymo serverį su gyvu perkelimu ir karštu modulių keitimu #### Būtini komandų eilutės įrankiai žiniatinklio kūrimui -| Įrankis | Paskirtis | Kodėl tau to reikia | -|---------|-----------|--------------------| -| **[Git](https://git-scm.com/)** | Versijų valdymas | Sekti pasikeitimus, bendradarbiauti su kitais, kurti atsargines kopijas | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript paleidimo aplinka ir paketų valdymas | Vykdyti JavaScript už naršyklių ribų, įdiegti modernius kūrimo įrankius | -| **[Vite](https://vitejs.dev/)** | Build įrankis ir kūrimo serveris | Žaibiškai greitas kūrimas su karštu modulių pakeitimu | -| **[ESLint](https://eslint.org/)** | Kodo kokybė | Automatiškai rasti ir taisyti problemas tavo JavaScript kode | -| **[Prettier](https://prettier.io/)** | Kodo formatavimas | Išlaikyti kodą nuosekliai suformatuotą ir skaitomą | +| Įrankis | Paskirtis | Kodėl jo reikia | +|---------|-----------|----------------| +| **[Git](https://git-scm.com/)** | Versijų valdymas | Sekti pakeitimus, bendradarbiauti, kurti atsargines kopijas | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript vykdymas ir paketų valdymas | Vykdyti JavaScript už naršyklės ribų, įdiegti modernius kūrimo įrankius | +| **[Vite](https://vitejs.dev/)** | Kūrimo įrankis ir vystymo serveris | Žaibiškai greitas vystymas su karštu modulių perkėlimu | +| **[ESLint](https://eslint.org/)** | Kodo kokybė | Automatiškai rasti ir taisyti problemas JavaScript kode | +| **[Prettier](https://prettier.io/)** | Kodo formatavimas | Išlaikyti nuoseklų ir skaitomą kodo formatą | -#### Platformai specifinės parinktys +#### Specifinės platformos pasirinkimai **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** – moderni, pilna funkcijų terminalo programa -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 – galinga scenarijų rašymo aplinka -- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 – tradicinė Windows komandų eilutė +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Šiuolaikinis, su daugeliu funkcijų terminalas +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Galinga skriptų kūrimo aplinka +- **[Command Prompt](https://learn.microsoft.com/windows-server/administration/windows-commands/windows-commands)** 💻 - Tradicinė Windows komandų eilutė **macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 – įdiegta terminalo programa -- **[iTerm2](https://iterm2.com/)** – patobulinta terminalo programa su pažangiomis funkcijomis +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Integruota terminalo programa +- **[iTerm2](https://iterm2.com/)** - Išplėstinis terminalas su pažangiomis funkcijomis **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 – standartinė Linux apvalkalas -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** – pažangi terminalo emuliavimo programa +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Standartinė Linux apvalkalas +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Pažangus terminalo emuliatorius > 💻 = Iš anksto įdiegta operacinėje sistemoje -> 🎯 **Mokymosi kelias**: Pradėk nuo pagrindinių komandų kaip `cd` (keisti katalogą), `ls` arba `dir` (rodyti failų sąrašą) ir `mkdir` (sukurti aplanką). Praktikuok modernias darbo proceso komandas kaip `npm install`, `git status` ir `code .` (atidaro dabartinį aplanką VS Code). Kai tapsi labiau pasitikintis, natūraliai išmoksi sudėtingesnes komandas ir automatizavimo technikas. +> 🎯 **Mokymosi kelias:** Pradėk nuo pagrindinių komandų, tokių kaip `cd` (pakeisti katalogą), `ls` arba `dir` (peržiūrėti failus) ir `mkdir` (sukurti katalogą). Praktikuok modernias darbo komandas, tokias kaip `npm install`, `git status` ir `code .` (atidaryti dabartinį katalogą VS Code). Kai įgisite patirties, natūraliai išmoksite pažangias komandas ir automatizavimo būdus. -### Dokumentacija: tavo visada pasiekiamas mokymosi mentorius +### Dokumentacija: tavo visada pasiekiama mokymosi mentorė -Gerai, leisk man atskleisti mažą paslaptį, kuri tave privers jaustis daug geriau dėl to, kad esi pradedantysis: net ir patyrę kūrėjai didžiąją dalį savo laiko praleidžia skaitydami dokumentaciją. Ir ne todėl, kad jie nežino, ką daro – tai iš tikrųjų išminties ženklas! +Gerai, pasidalinsiu mažyte paslaptimi, kuri privers tave jaustis daug geriau, būnant pradedančiuoju: net patyrę kūrėjai praleidžia daug laiko skaitydami dokumentaciją. Ir tai ne todėl, kad jie nežino, ką daro – tai išminties ženklas! -Įsivaizduok dokumentaciją kaip prieigą prie kantriausių, žinomiausių mokytojų pasaulyje, kurie yra prieinami 24/7. Įstrigai prie problemos 2 val. nakties? Dokumentacija ten kaip jaukus virtualus apkabinimas ir tiksliai su atsakymu, kurio tau reikia. Nori sužinoti apie kokią nors naują šaunią funkciją, apie kurią visi šneka? Dokumentacija padės su žingsnis po žingsnio pavyzdžiais. Bandai suprasti, kodėl kažkas veikia būtent taip? Spėjai – dokumentacija paaiškins taip, kad tau pagaliau „užsidegs“! +Įsivaizduok dokumentaciją kaip prieigą prie kantriausių ir išmaniausių mokytojų pasaulyje, kurie yra prieinami 24/7. Užstrigei prie užduoties 2 val. nakties? Dokumentacija šalia su šiltu virtualiu apkabinimu ir būtent tuo atsakymu, kurio reikia. Nori sužinoti apie naują funkciją, apie kurią visi kalba? Dokumentacija tau padės su žingsnis po žingsnio pavyzdžiais. Bandai suprasti, kodėl kažkas veikia būtent taip? Atspėjai – dokumentacija paaiškins tokiu būdu, kad pagaliau viskas taps aišku! -Štai kas visiškai pakeitė mano požiūrį: žiniatinklio kūrimo pasaulis juda neįtikėtinai greitai, ir niekas (turiu omenyje visai niekas!) nepamena visko mintinai. Mačiau vyresnius techninius specialistus su daugiau nei 15 metų patirtimi žiūrėti į bazinę sintaksę, ir žinai ką? Tai nėra gėdinga – tai protinga! Svarbu ne turėti tobulą atmintį, o žinoti, kur greitai rasti patikimus atsakymus ir išmokti juos pritaikyti. +Štai kas visiškai pakeitė mano požiūrį: žiniatinklio kūrimo pasaulis juda labai greitai, ir niekas (turiu omeny visiškai niekas!) nesaugo visko atmintyje. Mačiau vyresnius kūrėjus su 15+ metų patirtimi ieškančius bazinės sintaksės ir žinai ką? Tai nėra gėda – tai protinga! Tai ne atminties turėjimo klausimas, o žinojimas, kur greitai rasti patikimus atsakymus ir suprasti, kaip juos taikyti. -**Štai kur iš tiesų vyksta stebuklai:** +**Štai kur slypi tikrasis stebuklas:** -Profesionalūs kūrėjai daug laiko praleidžia skaitydami dokumentaciją – ne todėl, kad nežino, ką daro, tačiau todėl, kad žiniatinklio kūrimo sritis vystosi taip sparčiai, jog norint išlikti šiuolaikišku reikia nuolatinio mokymosi. Gera dokumentacija padeda suprasti ne tik *kaip* kažką naudoti, bet ir *kodėl* bei *kada* tai daryti. +Profesionalūs kūrėjai daug laiko skiria dokumentacijos skaitymui – ne todėl, kad nežino, ką daro, bet todėl, kad žiniatinklio kūrimo aplinka besikeičia greitai ir norint būti aktualiu, reikia nuolatinio mokymosi. Puiki dokumentacija padeda suprasti ne tik *kaip* naudoti ką nors, bet ir *kodėl* bei *kada* tai daryti. -#### Būtiniausi dokumentacijos ištekliai +#### Būtinų dokumentacijos šaltinių sąrašas **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Aukso standartas žiniatinklio technologijų dokumentacijai -- Išsamūs vadovai HTML, CSS ir JavaScript temomis +- Aukso standartas žiniatinklio technologijų dokumentacijoje +- Išsamios gairės HTML, CSS ir JavaScript - Apima naršyklių suderinamumo informaciją -- Praktiniai pavyzdžiai ir interaktyvūs demonstravimai +- Pateikia praktinius pavyzdžius ir interaktyvius demonstravimus **[Web.dev](https://web.dev)** (Google) -- Šiuolaikinės žiniatinklio kūrimo gerosios praktikos +- Modernios žiniatinklio kūrimo gerosios praktikos gairės - Veikimo optimizavimo patarimai -- Prieinamumo ir integruoto dizaino principai -- Atvejų analizės iš realių projektų +- Prieinamumo ir įtraukaus dizaino principai +- Atvejo studijos iš realių projektų **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** - Edge naršyklės kūrimo ištekliai -- Progresyvios žiniatinklio programėlių vadovai +- Progresyviųjų žiniatinklio programų gairės - Kryžminės platformos kūrimo įžvalgos **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Struktūruotos mokymosi programos -- Vaizdo kursai iš pramonės ekspertų -- Praktiniai programavimo pratimai +- Struktūruoti mokymosi kursai +- Vaizdo pamokos iš pramonės ekspertų +- Praktinės kodavimo užduotys -> 📚 **Mokymosi strategija**: Nesistenk mintinai įsiminti dokumentacijos – vietoj to išmok, kaip ja naudotis efektyviai. Išsaugok mėgstamiausius šaltinius ir praktikuoksiie naudotis paieška, kad greitai rastum reikiamą informaciją. +> 📚 **Mokymosi patarimas:** Nereikia mokytis dokumentacijos mintinai – verčiau išmok mokytis ją efektyviai naršyti. Užsirašyk dažnai naudojamus šaltinius ir praktikuok paieškas, kad greitai rastum reikiamą informaciją. -### 🔧 **Įrankių meistriškumo patikra: kas tau įdomiausia?** +### 🔧 **Įrankių meistriškumo patikra: kas tau patinka?** **Skirk akimirką pagalvoti:** -- Kurį įrankį labiausiai norėtum išbandyti pirmiausiai? (Nėra klaidingo atsakymo!) -- Ar komandų eilutė dar atrodo bauginanti, ar jau esi smalsus ją išbandyti? -- Ar gali įsivaizduoti naudosi naršyklės DevTools, kad pažvelgtum už tavo mėgstamiausių svetainių uždangalo? +- Kurį įrankį norėtum išbandyti pirmiausia? (Teisingo atsakymo nėra!) +- Ar komandų eilutė vis dar kelia nerimą, ar jau esi smalsus ją išbandyti? +- Ar įsivaizduoji naudoti naršyklės DevTools, kad pažvelgtum už tavo mėgstamų svetainių uždangalo? ```mermaid -pie title "Laikas, kurį programuotojas praleidžia su įrankiais" +pie title "Programuotojo laikas su įrankiais" "Kodo redaktorius" : 40 "Naršyklės testavimas" : 25 "Komandinė eilutė" : 15 "Dokumentacijos skaitymas" : 15 "Derinimas" : 5 ``` -> **Įdomus faktas**: Dauguma kūrėjų apie 40% savo laiko praleidžia kodų redaktoriuje, bet pastebėk, kiek daug laiko skiriama testavimui, mokymuisi ir problemų sprendimui. Programavimas nėra tik kodo rašymas – tai patirčių kūrimas! +> **Smagus faktas:** Dauguma kūrėjų apie 40 % savo laiko praleidžia kodo redaktoriuje, bet pastebėk, kiek daug laiko praleidžiama testuojant, mokantis ir sprendžiant problemas. Programavimas nėra vien tik kodų rašymas – tai patirčių kūrimas! -✅ **Apmąstymui**: Štai įdomus klausimas – kaip manai, kuo skiriasi įrankiai svetainių kūrimui (programavimui) ir įrankiai dizainui (kaip jos atrodo)? Tai kaip skirtumas tarp architekto, kuris suprojektuoja gražų namą, ir rangovo, kuris jį realiai stato. Abu yra būtini, bet jiems reikia skirtingų įrankių! Šis mąstymas tikrai padės geriau suprasti, kaip svetainės įgauna gyvybę. +✅ **Mintims pamąstyti:** Štai įdomus klausimas – kaip manai, kuo skiriasi įrankiai, skirti kurti svetaines (vystymui), nuo įrankių, skirtų jų dizainui? Tai tarsi skirtumas tarp architekto, kuris suprojektuoja gražų namą, ir rangovo, kuris jį pastato. Abu svarbūs, bet reikia skirtingų įrankių! Tokie apmąstymai padės geriau suprasti, kaip svetainės „gimsta.“ ## GitHub Copilot agento iššūkis 🚀 -Naudok agento režimą, kad įvykdytum šį iššūkį: +Naudok Agent režimą, kad įvykdytum šį iššūkį: -**Aprašymas:** Išnagrinėk šiuolaikinio kodo redaktoriaus arba IDE galimybes ir parodyk, kaip jos pagerina tavo darbo eigą kaip žiniatinklio kūrėjo. +**Aprašymas:** Išnagrinėk šiuolaikinio kodo redaktoriaus ar IDE funkcijas ir parodyk, kaip jos gali pagerinti tavo darbą kaip žiniatinklio kūrėjo. -**Užduotis:** Pasirink kodo redaktorių arba IDE (pvz., Visual Studio Code, WebStorm ar debesyje veikiantį IDE). Išvardink tris funkcijas ar plėtinius, kurie tau padeda rašyti, derinti ar prižiūrėti kodą efektyviau. Kiekvienam pateik trumpą paaiškinimą, kaip tai pagerina tavo darbo eigą. +**Užklausa:** Pasirink kodo redaktorių arba IDE (pvz., Visual Studio Code, WebStorm ar debesų pagrindu veikiantį IDE). Išvardink tris funkcijas arba plėtinius, kurie padeda efektyviau rašyti, derinti ar palaikyti kodą. Kiekvienam trumpai paaiškink, kaip tai pagerina tavo darbą. --- ## 🚀 Iššūkis -**Gerai, detektyve, pasiruošęs pirmai bylai?** +**Gerai, detektyve, ar pasiruošęs savo pirmai bylai?** -Dabar, kai turi tvirtą pagrindą, turiu nuotykį, kuris padės tau pamatyti, kokia neįtikėtinai įvairove ir įdomybe pasižymi programavimo pasaulis. Ir klausyk – čia dar nesiruoši rašyti kodo, taigi jokių nervų! Galvok apie save kaip apie programavimo kalbų detektyvą savo pirmai įdomiausiai bylai! +Kadangi turi šį puikų pagrindą, turiu nuotykį, kuris padės tau pamatyti, kaip iš tiesų įvairus ir įdomus yra programavimo pasaulis. Ir klausyk – čia dar ne apie kodą, tai nelabai dėl to jaudinkis! Įsivaizduok, kad esi programavimo kalbų detektyvas savo pirmai įdomiai bylai! **Tavo misija, jei sutinki ją priimti:** -1. **Tapk kalbų tyrinėtoju**: Pasirink tris programavimo kalbas iš visiškai skirtingų pasaulių – gal vieną kuriantį svetaines, kitą mobiliosioms programėlėms kurti, o trečią – mokslininkų duomenų apdorojimui. Surask pavyzdžių, kaip atliekama ta pati paprasta užduotis kiekviena kalba. Pažadu, tu būsi absoliučiai nustebintas, kaip skiriasi jų atvaizdavimas, nors užduotis ta pati! +1. **Tapsk kalbų tyrinėtoju:** Pasirink tris programavimo kalbas iš visiškai skirtingų pasaulių – gal vieną, skirtą svetainių kūrimui, kitą, kuri sukuria mobiliąsias programėles, ir dar vieną, skirtą moksliniams duomenų apdorojimams. Surask tą patį paprastą uždavinį, parašytą kiekviena kalba. Pažadu, būsi nustebęs, kaip skirtingai jos gali atrodyti, nors daro tą patį! -2. **Atrask jų kilmės istorijas**: Kas daro kiekvieną kalbą ypatingą? Štai šaunus faktas – kiekviena programavimo kalba buvo sukurta, nes kažkas galvojo: „Žinai ką? Turi būti geresnis būdas išspręsti šią konkretų problemą.“ Ar gali atsekti, kokios tos problemos buvo? Kai kurios istorijos tikrai žavi! +2. **Išsiaiškink jų kilmės istorijas:** Kas kiekvieną kalbą padaro ypatinga? Štai įdomybė – kiekviena programavimo kalba atsirado, nes kažkas pagalvojo: „Žinai ką? Privalo būti geresnis būdas išspręsti šią konkrečią problemą.“ Ar sugebėsi atskleisti, kokios tos problemos buvo? Kai kurios istorijos yra tikrai žavios! -3. **Susipažink su bendruomenėmis**: Pažiūrėk, kaip svetingos ir aistringos yra kiekvienos kalbos bendruomenės. Kai kurios turi milijonus kūrėjų, kurie dalijasi žiniomis ir padeda vieni kitiems, kitos yra mažesnės, bet nepaprastai glaudžios ir palaikančios. Tau patiks matyti skirtingus šių bendruomenių charakterius! +3. **Susipažink su bendruomenėmis:** Pažiūrėk, kaip svetingos ir aistringos yra kiekvienos kalbos bendruomenės. Kai kurios jų turi milijonus kūrėjų dalijasi žiniomis ir padeda vieni kitiems, kitos yra mažesnės bet labai glaudžios ir palaikančios. Tau tikrai patiks matyti šių bendruomenių skirtingas „asmenybes“! -4. **Sek savo nuojauta**: Kuri kalba tau dabar atrodo prieinamesnė? Nesirūpink „tobulu“ pasirinkimu – tiesiog klausyk savo instinktų! Čia tikrai nėra klaidingo atsakymo ir vėliau visada gali išbandyti kitas. +4. **Sek savo intuicija:** Kuri kalba tau šiuo metu atrodo patraukliausia? Nesispausk dėl „tobulo“ pasirinkimo – tiesiog klausyk savo instinktų! Čia nėra neteisingo atsakymo, o vėliau visada gali išbandyti kitas. -**Papildomas detektyvinis darbas**: Pažiūrėk, ar sugebėsi rasti, kokios pagrindinės svetainės ar programėlės yra sukurtos kiekviena kalba. Galiu garantuoti, kad nustebsi sužinojęs, kas varo Instagram, Netflix ar tą mobilų žaidimą, kurį negali nustoti žaisti! +**Papildomas detektyvinis darbas:** Pažiūrėk, ar gali sužinoti, kokios pagrindinės svetainės ar aplikacijos yra sukurtos kiekviena kalba. Garantuoju, kad būsi nustebęs sužinojęs, kas palaiko Instagram, Netflix ar tą mobilią žaidimo programėlę, nuo kurios negali atitraukti akių! -> 💡 **Atmink:** Šiandien nenori tapti ekspertu nė vienoje iš šių kalbų. Tu tiesiog susipažįsti su kaimynyste prieš nuspręsdamas, kur įsikursi. Skirk laiko, smagiai leisk laiką ir leisk smalsumui vadovauti! +> 💡 **Prisimink:** Šiandien nesieki tapti ekspertu nė vienoje kalboje. Tiesiog susipažįsti su kaimynyste prieš priimdamas sprendimą, kur įsikurti. Skirk laiko, mėgaukis procesu ir leisk smalsumui tave vesti! -## Švęskime, ką atradai! +## Švęskime tai, ką atradai! -Oho, šiandien įsisavinai tiek daug nuostabios informacijos! Aš nuoširdžiai džiaugiuosi matydamas, kiek šios nuostabios kelionės liko su tavimi. Ir prisimink – tai nėra testas, kur turi būti tobulas. Tai labiau šventė visoms šaunioms žinioms, kurias sužinojai apie šį nuostabų pasaulį, į kurį pasiruošęs panerti! +Oho, šiandien sužinojai tiek daug nuostabios informacijos! Iš tiesų džiaugiuosi matydamas, kiek šio nuostabaus kelio sugebėjai įsisavinti. Ir prisimink – tai nėra testas, kurį reikia išlaikyti tobulai. Tai greičiau šventė visų tų šaunių dalykų, kuriuos išmokai apie šį žavų pasaulį, kuriame esi pasiruošęs panirti! -[Atlik pamokos testą](https://ff-quizzes.netlify.app/web/) +[Padaryk testą po pamokos](https://ff-quizzes.netlify.app/web/) ## Apžvalga ir savarankiškas mokymasis -**Skirk laiko tyrinėti ir mėgautis!** -Jūs šiandien nuėjote nemažą kelią, ir tai yra ką verta didžiuotis! Dabar ateina smagiausia dalis – tyrinėti temas, kurios sužadino jūsų smalsumą. Atminkite, tai nėra namų darbai – tai nuotykis! +**Skirk laiko tyrinėti ir smagiai praleisk laiką!** +Šiandien nuėjai ilgą kelią, ir tai yra priežastis didžiuotis! Dabar ateina smagi dalis – tyrinėti temas, kurios pažadino tavo smalsumą. Atmink, tai nėra namų darbai – tai nuotykis! -**Panirkite giliau į tai, kas jus stimuliuoja:** +**Gilinkis į tai, kas tave džiugina:** -**Praktikuokitės su programavimo kalbomis:** -- Aplankykite oficialias 2–3 kalbų svetaines, kurios patraukė jūsų dėmesį. Kiekviena turi savo asmenybę ir istoriją! -- Išbandykite kai kuriuos internetinius kodo žaidimo aikšteles, tokius kaip [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), arba [Replit](https://replit.com/). Nebijokite eksperimentuoti – nieko nesugadinsite! -- Perskaitykite, kaip atsirado jūsų mėgstamiausia kalba. Rimtai, kai kurios iš šių kilmės istorijų yra įdomios ir padės suprasti, kodėl kalbos veikia būtent taip. +**Praktikuokis su programavimo kalbomis:** +- Aplankyk oficialias 2-3 kalbų svetaines, kurios patraukė tavo dėmesį. Kiekviena iš jų turi savo charakterį ir istoriją! +- Išbandyk kai kurias internetines kodavimo platformas, tokias kaip [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) arba [Replit](https://replit.com/). Nebijok eksperimentuoti – nieko nesugadinsi! +- Paskaityk apie tavo mėgstamos kalbos atsiradimą. Rimtai, kai kurios jų kilmės istorijos yra labai įdomios ir padės suprasti, kodėl kalbos veikia būtent taip, kaip veikia. -**Susipažinkite su savo naujais įrankiais:** -- Atsisiųskite Visual Studio Code, jei dar to nepadarėte – jis nemokamas ir jums tikrai patiks! -- Skirkite kelias minutes naršyti Extensions marketplace. Tai tarsi programėlių parduotuvė jūsų kodo redaktoriui! -- Atidarykite naršyklės Developer Tools ir tiesiog spustelėkite čia ir ten. Nesijaudinkite, jei ne viską suprasite – tiesiog susipažinkite su tuo, kas yra. +**Prisipažink su savo naujais įrankiais:** +- Atsisiųsk Visual Studio Code, jei dar to nepadarei – jis yra nemokamas ir tau tikrai patiks! +- Skirk keletą minučių naršydamas Extensions parduotuvę. Tai lyg programėlių parduotuvė tavo kodo redaktoriui! +- Atidaryk naršyklės kūrėjų įrankius ir tiesiog paspaudinėk visur. Nesijaudink, jei visko nesuprasi – tiesiog susipažink su tuo, kas ten yra. -**Prisijunkite prie bendruomenės:** -- Sekite keletą programuotojų bendruomenių [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) ar [GitHub](https://github.com/). Programavimo bendruomenė labai draugiška naujokams! -- Žiūrėkite lengvai pradedantiesiems skirtus kodavimo vaizdo įrašus YouTube. Yra daug puikių kūrėjų, kurie atsimena, ką reiškia pradėti. -- Apsvarstykite galimybę prisijungti prie vietinių susitikimų ar internetinių bendruomenių. Pasitikėkite manimi, programuotojai dievina padėti naujokams! +**Prisijunk prie bendruomenės:** +- Sek keletą programuotojų bendruomenių [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) arba [GitHub](https://github.com/). Programuotojų bendruomenė yra labai draugiška naujokams! +- Žiūrėk pradedantiesiems skirtus kodavimo vaizdo įrašus YouTube. Yra daug puikių kūrėjų, kurie prisimena, kaip tai buvo pradėti. +- Apsvarstyk galimybę prisijungti prie vietinių susitikimų ar internetinių bendruomenių. Patikėk, programuotojai mėgsta padėti naujokams! -> 🎯 **Klausykite, ką noriu, kad prisimintumėte:** Nereikia per naktį tapti programavimo žinovu! Šiuo metu jūs tiesiog pažįstate šį nuostabų naują pasaulį, kuriame būsite. Skirkite laiko, mėgaukitės kelione ir prisiminkite – kiekvienas programuotojas, kuriuo žavitės, kažkada sėdėjo būtent ten, kur esate dabar, jausdamasis susijaudinęs ir galbūt šiek tiek apimtas streso. Tai visiškai normalu ir reiškia, kad darote viską teisingai! +> 🎯 **Klausyk, ką nori, kad prisimintum**: Nėra tikslo tapti programavimo žinovu per naktį! Šiuo metu tu tiesiog susipažįsti su nuostabiu nauju pasauliu, kuriame greitai tapsi. Skirk laiko, mėgaukis kelione ir prisimink – kiekvienas programuotojas, kurį gerbi, kažkada sėdėjo būtent ten, kur sėdi dabar, jausdamasis susijaudinęs ir gal šiek tiek priblokštas. Tai visiškai normalu ir reiškia, kad eini tinkamu keliu! @@ -787,70 +787,70 @@ Jūs šiandien nuėjote nemažą kelią, ir tai yra ką verta didžiuotis! Dabar [Reading the Docs](assignment.md) -> 💡 **Šiek tiek paskatinimo jūsų užduočiai:** Labai norėčiau pamatyti, kaip tyrinėjate kai kuriuos įrankius, apie kuriuos dar nekalbėjome! Praleiskite redaktorius, naršykles ir komandų eilutės įrankius, apie kuriuos jau kalbėjome – už šio horizonto yra visa nuostabi kūrimo įrankių visata, laukiančia būti atrasta. Ieškokite tų, kurie yra aktyviai palaikomi ir turi gyvybingas, pagalbą siūlančias bendruomenes (jie dažnai turi geriausius pamokymus ir draugiškiausius žmones, kai neišvengiamai įstringate ir reikia draugiškos pagalbos). +> 💡 **Šiek tiek paskatinimo tavo užduočiai**: Labai norėčiau pamatyti, kaip tyrinėsi kai kuriuos įrankius, apie kuriuos dar nekalbėjome! Praleisk redaktorius, naršykles ir komandų eilutės įrankius, apie kuriuos jau kalbėjome – ten yra visas nuostabus ir stebinantis platus kūrimo įrankių pasaulis, kuris laukia, kol jį atrasi. Ieškok tokių, kurie yra aktyviai prižiūrimi ir turi gyvybingas, draugiškas bendruomenes (tokie paprastai turi geriausias pamokas ir palaikančius žmones, kai reikės pagalbos). --- -## 🚀 Jūsų programavimo kelionės laiko juosta - -### ⚡ **Ką galite padaryti per artimiausias 5 minutes** -- [ ] Užsirašyti 2-3 programavimo kalbų svetaines, kurios patraukė jūsų dėmesį -- [ ] Atsisiųsti Visual Studio Code, jei dar nepadarėte -- [ ] Atidaryti naršyklės DevTools (F12) ir naršyti bet kurią svetainę -- [ ] Prisijungti prie vienos programavimo bendruomenės (Dev.to, Reddit r/webdev arba Stack Overflow) - -### ⏰ **Ką galite pasiekti per šią valandą** -- [ ] Atlikti po pamokos testą ir peržvelgti atsakymus -- [ ] Įdiegti VS Code su GitHub Copilot plėtiniu -- [ ] Išbandyti „Hello World“ pavyzdį 2 skirtingose programavimo kalbose internete -- [ ] Pažiūrėti „Programuotojo diena“ vaizdo įrašą YouTube -- [ ] Pradėti programavimo kalbos detektyvo darbą (pagal užduotį) - -### 📅 **Jūsų savaitės trukmės nuotykis** -- [ ] Atlikti užduotį ir išbandyti 3 naujus kūrimo įrankius -- [ ] Sekti 5 kūrėjus arba programavimo paskyras socialinėje medijoje -- [ ] Pamėginti sukurti kažką mažo CodePen arba Replit (net jei tik „Hello, [Jūsų vardas]!“) -- [ ] Perskaityti vieną kūrėjo tinklaraščio įrašą apie kieno nors programavimo kelionę -- [ ] Prisijungti prie virtualaus susitikimo arba pažiūrėti programavimo kalbą -- [ ] Pradėti mokytis pasirinktos kalbos su internetiniais pamokymais - -### 🗓️ **Jūsų mėnesio trukmės transformacija** -- [ ] Sukurti pirmą mažą projektą (net paprastas tinklalapis laikomas!) -- [ ] Prisidėti prie atvirojo kodo projekto (pradėti nuo dokumentacijos taisymų) -- [ ] Mentoriauti ką nors, kas tik pradeda programavimo kelią -- [ ] Sukurti savo kūrėjo portfolio svetainę -- [ ] Užmegzti ryšius su vietinėmis kūrėjų bendruomenėmis ar mokymosi grupėmis -- [ ] Pradėti planuoti kitą mokymosi etapą - -### 🎯 **Galutinė refleksija** - -**Prieš judėdami toliau, skirkite vieną akimirką pasidžiaugti:** -- Kas šiandien jus labiausiai sužadino programavimo srityje? -- Kurį įrankį ar koncepciją norite ištirti pirmiausia? -- Kaip jaučiatės pradėję šią programavimo kelionę? -- Koks klausimas norėtumėte užduoti programuotojui būtent dabar? +## 🚀 Tavo programavimo kelionės laiko planas + +### ⚡ **Ką gali padaryti per artimiausias 5 minutes** +- [ ] Užsirašyk 2-3 programavimo kalbų svetaines, kurios patraukė tavo dėmesį +- [ ] Atsisiųsk Visual Studio Code, jei dar to nepadarei +- [ ] Atidaryk naršyklės Developer Tools (F12) ir paspaudinėk bet kurioje svetainėje +- [ ] Prisijunk prie vienos programuotojų bendruomenės (Dev.to, Reddit r/webdev arba Stack Overflow) + +### ⏰ **Ką gali nuveikti šią valandą** +- [ ] Atlik pamokos testą ir apmąstyk atsakymus +- [ ] Įdiek VS Code su GitHub Copilot plėtiniu +- [ ] Išbandyk „Hello World“ pavyzdį 2 skirtingose programavimo kalbose internetu +- [ ] Pažiūrėk vaizdo įrašą „Diena programuotojo gyvenime“ YouTube +- [ ] Pradėk tyrinėti savo pasirinktų kalbų istoriją (pagal iššūkį) + +### 📅 **Tavo savaitės nuotykis** +- [ ] Atlik užduotį ir išbandyk 3 naujus kūrimo įrankius +- [ ] Sek 5 programuotojus arba programavimo paskyras socialiniuose tinkluose +- [ ] Pabandyk sukurti kažką mažo CodePen ar Replit (net jei tai tik „Sveikas, [Tavo Vardas]!“) +- [ ] Perskaityk vieną programuotojo tinklaraščio įrašą apie jo kelią į programavimą +- [ ] Prisijunk prie virtualaus susitikimo arba pažiūrėk programavimo kalbą +- [ ] Pradėk mokytis savo pasirinktos kalbos su internetinėmis pamokomis + +### 🗓️ **Tavo mėnesio pokyčiai** +- [ ] Sukurk pirmą mažą projektą (net paprastas internetinis puslapis tinka!) +- [ ] Prisidėk prie atvirojo kodo projekto (pradėk nuo dokumentacijos taisymų) +- [ ] Mentoruok tą, kuris tik pradeda programavimo kelią +- [ ] Sukurk savo programuotojo portfolio svetainę +- [ ] Užmegzk ryšius su vietinėmis programuotojų bendruomenėmis ar studijų grupėmis +- [ ] Pradėk planuoti kitą savo mokymosi tikslą + +### 🎯 **Galutiniai apmąstymai** + +**Prieš judėdamas toliau, skirk minutėlę šventimui:** +- Kas šiandien programavime tave labiausiai sužavėjo? +- Kurį įrankį arba koncepciją nori tyrinėti pirma? +- Kaip jaučies pradėdamas šią programavimo kelionę? +- Kokią vieną klausimą norėtum dabar užduoti programuotojui? ```mermaid journey - title Jūsų Pasitikėjimo Savimi Ugdymo Kelionė + title Jūsų Pasitikėjimo Savimi Kūrimo Kelionė section Šiandien - Curious: 3: You - Overwhelmed: 4: You - Excited: 5: You - section Šią Savaitę - Exploring: 4: You - Learning: 5: You - Connecting: 4: You - section Kitą Mėnesį - Building: 5: You - Confident: 5: You - Helping Others: 5: You + Smalsus: 3: You + Prislėgtas: 4: You + Susijaudinęs: 5: You + section Ši Savaitė + Tyrinėja: 4: You + Mokosi: 5: You + Prisijungia: 4: You + section Kitas Mėnuo + Kuria: 5: You + Pasitikintis: 5: You + Padeda Kitiems: 5: You ``` -> 🌟 **Prisiminkite:** Kiekvienas ekspertas kadaise buvo pradedantysis. Kiekvienas vyresnysis programuotojas kažkada jautėsi būtent kaip jūs dabar – susijaudinęs, galbūt šiek tiek apimtas streso ir tikrai smalsus, kas įmanoma. Jūs esate nuostabioje kompanijoje, o ši kelionė bus nepaprasta. Sveiki atvykę į nuostabų programavimo pasaulį! 🎉 +> 🌟 **Prisimink**: Kiekvienas ekspertas kažkada buvo pradedantysis. Kiekvienas vyresnysis programuotojas buvo būtent toks, kaip esi dabar – susijaudinęs, gal kiek priblokštas, bet tikrai smalsus, ką galima pasiekti. Tu esi nuostabioje kompanijoje, ir ši kelionė bus nepaprasta. Sveikas atvykęs į nuostabųjį programavimo pasaulį! 🎉 --- **Atsakomybės apribojimas**: -Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors stengiamės užtikrinti tikslumą, atkreipkite dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas gimtąja kalba laikomas autoritetingu šaltiniu. Svarbiai informacijai rekomenduojama kreiptis į profesionalų žmogišką vertimą. Mes neatsakome už jokius nesusipratimus ar klaidingus aiškinimus, kilusius naudojantis šiuo vertimu. +Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, atkreipkite dėmesį, kad automatizuoti vertimai gali turėti klaidų arba netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojamas profesionalus žmogaus vertimas. Mes neatsakome už jokius nesusipratimus ar neteisingus aiškinimus, kilusius naudojantis šiuo vertimu. \ No newline at end of file diff --git a/translations/lt/AGENTS.md b/translations/lt/AGENTS.md index b4c4244ac..2e0fe6efb 100644 --- a/translations/lt/AGENTS.md +++ b/translations/lt/AGENTS.md @@ -2,45 +2,45 @@ ## Projekto apžvalga -Tai yra edukacinio kurso saugykla, skirta pradedantiesiems mokyti pagrindų apie žiniatinklio kūrimą. Kursas yra išsamus 12 savaičių kursas, sukurtas Microsoft Cloud Advocates komandos, turintis 24 praktines pamokas, apimančias JavaScript, CSS ir HTML. +Tai mokomasis mokymo planas, skirtas pradedantiesiems mokyti pagrindus apie interneto kūrimą. Šis mokymo planas yra išsamus 12 savaičių kursas, sukurtas Microsoft Cloud Advocates komandos, apimantis 24 praktinius užsiėmimus apie JavaScript, CSS ir HTML. -### Pagrindiniai komponentai +### Pagrindinės dalys -- **Edukacinis turinys**: 24 struktūruotos pamokos, organizuotos į projektinius modulius -- **Praktiniai projektai**: Terariumas, Rašymo žaidimas, Naršyklės plėtinys, Kosminis žaidimas, Banko programa, Kodo redaktorius ir DI pokalbių asistentas -- **Interaktyvūs testai**: 48 testai po 3 klausimus kiekvienas (prieš- ir po pamokos vertinimai) -- **Daugiakalbė palaikymas**: Automatiniai vertimai į 50+ kalbų per GitHub Actions -- **Technologijos**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (DI projektams) +- **Mokomoji medžiaga**: 24 struktūrizuoti užsiėmimai, suskirstyti į projektinius modulius +- **Praktiniai projektai**: Terariumas, Spausdinimo žaidimas, Naršyklės plėtinys, Kosmoso žaidimas, Banko programa, Kodo redaktorius ir AI pokalbių asistentas +- **Interaktyvūs testai**: 48 testai po 3 klausimus kiekviename (prieš ir po pamokos vertinimai) +- **Daugiakalbė palaikymas**: Automatiniai vertimai į daugiau nei 50 kalbų per GitHub Actions +- **Technologijos**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI projektams) ### Architektūra -- Edukacinė saugykla su pamokų struktūra -- Kiekvienos pamokos aplanke yra README, kodo pavyzdžiai ir sprendimai -- Atskirti savarankiški projektai atskiruose kataloguose (quiz-app, įvairūs pamokų projektai) -- Vertimų sistema naudojanti GitHub Actions (co-op-translator) -- Dokumentacija teikiama per Docsify ir prieinama PDF formatu +- Mokomasis saugykla su pamokų struktūra +- Kiekviename pamokos kataloge yra README, kodo pavyzdžiai ir sprendimai +- Atskiri savarankiški projektai skirtinguose kataloguose (quiz-app, įvairūs pamokų projektai) +- Vertimų sistema, naudojanti GitHub Actions (co-op-translator) +- Dokumentacija teikiama per Docsify ir prieinama PDF formatu -## Nustatymo komandos +## Sąrankos komandos -Ši saugykla skirta daugiausia edukaciniam turiniui vartoti. Norint dirbti su specifiniais projektais: +Ši saugykla pirmiausia skirta mokomosios medžiagos naudojimui. Darbas su konkrečiais projektais: -### Pagrindinės saugyklos nustatymas +### Pagrindinė saugyklos sąranka ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` - -### Apklaustuko programėlės nustatymas (Vue 3 + Vite) + +### Quiz App sąranka (Vue 3 + Vite) ```bash cd quiz-app npm install npm run dev # Paleisti kūrimo serverį -npm run build # Sukurti gamybai -npm run lint # Paleisti ESLint +npm run build # Statyti gamybai +npm run lint # Vykdyti ESLint ``` - + ### Banko projekto API (Node.js + Express) ```bash @@ -50,24 +50,24 @@ npm start # Paleisti API serverį npm run lint # Vykdyti ESLint npm run format # Formatuoti su Prettier ``` - + ### Naršyklės plėtinių projektai ```bash cd 5-browser-extension/solution npm install -# Vadovaukitės naršyklės specifinėmis plėtinių įkėlimo instrukcijomis +# Laikykitės naršyklės specifinių plėtinių įkėlimo instrukcijų ``` - -### Kosminio žaidimo projektai + +### Kosmoso žaidimo projektai ```bash cd 6-space-game/solution npm install # Atidarykite index.html naršyklėje arba naudokite Live Server ``` - -### Pokalbių projekto (Python backend) nustatymai + +### Pokalbių projekto (Python backend) sąranka ```bash cd 9-chat-project/solution/backend/python @@ -75,208 +75,208 @@ pip install openai # Nustatykite GITHUB_TOKEN aplinkos kintamąjį python api.py ``` + +## Kūrimo darbo eiga -## Vystymo darbo eiga - -### Turinio bendradarbiams +### Turinio prisidedantiems -1. **Padarykite fork’ą** saugyklos į savo GitHub paskyrą -2. **Klonuokite savo fork’ą** vietoje -3. **Sukurkite naują šaką** savo pakeitimams -4. Keiskite pamokų turinį arba kodo pavyzdžius -5. Išbandykite kodo pakeitimus atitinkamuose projekto kataloguose -6. Pateikite pull request’us pagal indėlio taisykles +1. **Sukurti atšaką** saugyklos savo GitHub paskyroje +2. **Klonuoti atšaką** lokaliai +3. **Sukurti naują šaką** savo pakeitimams +4. Redaguoti pamokų turinį arba kodo pavyzdžius +5. Išbandyti kodo pakeitimus atitinkamuose projekto kataloguose +6. Pateikti pakeitimų užklausas pagal prisidėjimo gaires -### Besimokantiems +### Mokiniams -1. Padarykite fork arba klonuokite saugyklą -2. Nuosekliai pereikite per pamokų katalogus -3. Skaitykite kiekvienos pamokos README failus -4. Atlikite priešpamokinius testus adresu https://ff-quizzes.netlify.app/web/ -5. Dirbkite su kodo pavyzdžiais pamokų aplankuose -6. Atlikite užduotis ir iššūkius -7. Atlikite postpamokinius testus +1. Atšaka arba klonas saugyklos +2. Sekti pamokų katalogus eilės tvarka +3. Skaityti kiekvieno užsiėmimo README failus +4. Atlikti testus prieš pamoką adresu https://ff-quizzes.netlify.app/web/ +5. Dirbti su kodo pavyzdžiais pamokų kataloguose +6. Atlikti užduotis ir iššūkius +7. Atlikti testus po pamokos -### Gyvas vystymas +### Tiesioginis kūrimas -- **Dokumentacija**: Paleiskite `docsify serve` šakniniame aplanke (3000 prievadas) -- **Apklaustuko programėlė**: Paleiskite `npm run dev` quiz-app kataloge -- **Projektai**: Naudokite VS Code Live Server plėtinį HTML projektams -- **API projektai**: Paleiskite `npm start` atitinkuose API kataloguose +- **Dokumentacija**: paleisti `docsify serve` šakniniame kataloge (prievadas 3000) +- **Quiz App**: paleisti `npm run dev` quiz-app kataloge +- **Projektai**: naudoti VS Code Live Server plėtinį HTML projektams +- **API projektai**: paleisti `npm start` atitinkamuose API kataloguose ## Testavimo instrukcijos -### Apklaustuko programėlės testavimas +### Quiz App testavimas ```bash cd quiz-app -npm run lint # Patikrinkite kodo stiliaus klaidas -npm run build # Patikrinkite, ar statyba sėkminga +npm run lint # Patikrinkite kodo stiliaus problemas +npm run build # Patvirtinkite, kad kūrimas sėkmingas ``` - + ### Banko API testavimas ```bash cd 7-bank-project/api -npm run lint # Patikrinkite kodo stiliaus klaidas -node server.js # Patikrinkite, ar serveris paleidžiamas be klaidų +npm run lint # Patikrinti kodo stiliaus problemas +node server.js # Patvirtinti, kad serveris startuoja be klaidų ``` - + ### Bendras testavimo požiūris -- Tai edukacinė saugykla be išsamios automatizuotos testavimo sistemos -- Rankinis testavimas apima: - - Kodo pavyzdžiai veikia be klaidų - - Dokumentacijos nuorodos veikia tinkamai - - Projektų kompiliacijos vyksta sėkmingai - - Pavyzdžiai atitinka gerąsias praktikas +- Tai mokomasis saugykla be išsamių automatinių testų +- Rankinis testavimas daugiausia sutelktas į: + - Kodo pavyzdžiai veikia be klaidų + - Dokumentacijos nuorodos veikia tinkamai + - Projektų kūrimas sėkmingas + - Pavyzdžiai atitinka gerąsias praktikas -### Patikrinimai prieš pateikiant +### Prieš pateikiant patikrinimai -- Paleiskite `npm run lint` kataloguose su package.json -- Patikrinkite markdown nuorodų galiojimą -- Išbandykite kodo pavyzdžius naršyklėje arba Node.js -- Įsitikinkite, kad vertimai išlaiko tinkamą struktūrą +- Paleisti `npm run lint` kataloguose su package.json +- Patikrinti, ar markdown nuorodos galioja +- Išbandyti kodo pavyzdžius naršyklėje arba Node.js +- Patvirtinti, kad vertimai išlaiko tinkamą struktūrą ## Kodo stiliaus gairės ### JavaScript -- Naudokite modernią ES6+ sintaksę -- Laikykitės standartinių ESLint konfigūracijų projektuose -- Naudokite prasmingus kintamųjų ir funkcijų pavadinimus mokymosi tikslams -- Pridėkite komentarus, paaiškinančius koncepcijas mokiniams -- Formatuokite naudodami Prettier, kur nustatyta +- Naudoti modernią ES6+ sintaksę +- Laikytis standartinių ESLint konfigūracijų projektuose +- Naudoti prasmingus kintamųjų ir funkcijų pavadinimus mokymuisi +- Pridėti komentarus, paaiškinančius sąvokas mokiniams +- Formatuoti naudojant Prettier, kur tai konfigūruota ### HTML/CSS -- Semantiški HTML5 elementai -- Responvyvaus dizaino principai -- Aiškios klasės pavadinimų konvencijos -- Komentarai, paaiškinantys CSS technikas mokiniams +- Semantiški HTML5 elementai +- Reaguojantis dizainas +- Aiškios klasių pavadinimų konvencijos +- Komentarai, paaiškinantys CSS metodikas mokiniams ### Python -- PEP 8 stiliaus gairės -- Aiškūs, edukaciniai kodo pavyzdžiai -- Tipų anotacijos, jei naudingos mokymuisi +- PEP 8 stiliaus gairės +- Aiškūs, mokomieji kodo pavyzdžiai +- Rekomenduojami tipų užuominomis, kur naudingas mokymuisi ### Markdown dokumentacija -- Aiški antraščių hierarchija -- Kodo blokai su kalbos nurodymu -- Nuorodos į papildomus išteklius -- Ekrano nuotraukos ir paveikslėliai `images/` kataloguose -- Alt tekstas paveikslėliams prieinamumui užtikrinti +- Aiški antraščių hierarchija +- Kodo blokai su kalbos nurodymu +- Nuorodos į papildomus išteklius +- Ekrano nuotraukos ir vaizdai `images/` kataloguose +- Alternatyvus tekstas vaizdams prieinamumui -### Failų organizacija +### Failų organizavimas -- Pamokos numeruojamos nuosekliai (1-getting-started-lessons, 2-js-basics ir kt.) -- Kiekviename projekte yra `solution/` ir dažnai `start/` arba `your-work/` katalogai -- Paveikslėliai saugomi pamokų specifiniuose `images/` aplankuose -- Vertimai saugomi `translations/{language-code}/` struktūroje +- Pamokos numeruotos seka (1-getting-started-lessons, 2-js-basics ir t.t.) +- Kiekviename projekte yra `solution/` ir dažnai `start/` arba `your-work/` katalogai +- Vaizdai saugomi konkrečių pamokų `images/` aplankuose +- Vertimai `translations/{language-code}/` struktūroje ## Kūrimas ir diegimas -### Apklaustuko programėlės diegimas (Azure Static Web Apps) +### Quiz App diegimas (Azure Static Web Apps) -quiz-app yra sukonfigūruotas Azure Static Web Apps diegimui: +quiz-app konfigūruotas Azure Static Web Apps diegimui: ```bash cd quiz-app npm run build # Sukuria dist/ aplanką -# Diegia per GitHub Actions darbo eigą, kai pushinama į main šaką +# Diegia per GitHub Actions darbo eigą į pagrindinę šaką paspaudus ``` + +Azure Static Web Apps konfigūracija: +- **Programos vieta**: `/quiz-app` +- **Išvesties vieta**: `dist` +- **Darbo eiga**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -Azure Static Web Apps konfigūracija: -- **Programėlės vieta**: `/quiz-app` -- **Išvesties vieta**: `dist` -- **Vykdymo eiga**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` - -### Dokumentacijos PDF kūrimas +### Dokumentacijos PDF generavimas ```bash npm install # Įdiekite docsify-to-pdf -npm run convert # Sugeneruokite PDF iš docs +npm run convert # Sugeneruokite PDF iš dokumentų ``` - + ### Docsify dokumentacija ```bash -npm install -g docsify-cli # Įdiegti Docsify globaliai -docsify serve # Tarnauti localhost:3000 +npm install -g docsify-cli # Įdiekite Docsify globaliai +docsify serve # Aptarnauti localhost:3000 ``` + +### Projektų specifiniai kūrimo procesai -### Projektui būdingi kūrimo procesai - -Kiekvienas projekto katalogas gali turėti savo kūrimo procesą: -- Vue projektai: `npm run build` sukuria produkcinius paketus -- Statiniai projektai: be kūrimo žingsnio, failai pateikiami tiesiogiai +Kiekvienas projekto katalogas gali turėti savą kūrimo procesą: +- Vue projektai: `npm run build` sukuria produkcinius paketus +- Statiniai projektai: Nereikia kūrimo žingsnio, failai tiekiami tiesiogiai -## Pull request gairės +## Pull Request gairės ### Pavadinimo formatas -Naudokite aiškius, apibūdinančius pakeitimus pavadinimus: -- `[Quiz-app] Pridėti naują testą pamokai X` -- `[Lesson-3] Ištaisyta rašybos klaida terrarium projekte` -- `[Translation] Pridėtas ispanų kalbos vertimas pamokai 5` -- `[Docs] Atnaujintos nustatymo instrukcijos` +Naudoti aiškius, apibūdinančius pavadinimus, nurodančius pakeitimo sritį: +- `[Quiz-app] Add new quiz for lesson X` +- `[Lesson-3] Fix typo in terrarium project` +- `[Translation] Add Spanish translation for lesson 5` +- `[Docs] Update setup instructions` -### Būtini patikrinimai +### Reikalingi patikrinimai -Prieš pateikiant PR: +Prieš pateikiant PR: -1. **Kodo kokybė**: - - Paleiskite `npm run lint` atitinkamuose projekto kataloguose - - Ištaisyti visus lint klaidas ir įspėjimus +1. **Kodo kokybė**: + - Paleisti `npm run lint` paveiktuose projekto kataloguose + - Ištaisyti visas lint klaidas ir įspėjimus -2. **Kūrimo patikrinimas**: - - Jei taikoma, paleiskite `npm run build` - - Užtikrinkite, kad nėra kūrimo klaidų +2. **Kūrimo patikra**: + - Jeigu taikoma, paleisti `npm run build` + - Užtikrinti, kad nebūtų kūrimo klaidų -3. **Nuorodų patikra**: - - Patikrinkite visas markdown nuorodas - - Patikrinkite paveikslėlių nuorodas +3. **Nuorodų tikrinimas**: + - Išbandyti visas markdown nuorodas + - Patikrinti, ar vaizdų nuorodos veikia -4. **Turinio peržiūra**: - - Korektūra dėl rašybos ir gramatikos - - Užtikrinkite, kad kodo pavyzdžiai yra teisingi ir edukaciniai - - Patikrinkite, kad vertimai išlaiko originalią prasmę +4. **Turinio peržiūra**: + - Taisyti rašybos ir gramatikos klaidas + - Užtikrinti, kad kodo pavyzdžiai būtų teisingi ir mokomieji + - Patikrinti, kad vertimai atitinka originalią prasmę -### Indėlio reikalavimai +### Prisidėjimo reikalavimai -- Sutikite su Microsoft CLA (automatinis patikrinimas pirmojo PR metu) -- Laikykitės [Microsoft atvirojo kodo elgesio taisyklių](https://opensource.microsoft.com/codeofconduct/) -- Matykite [CONTRIBUTING.md](./CONTRIBUTING.md) išsamioms gairėms -- Jei taikoma, nurodykite problemų numerius PR apraše +- Sutikti su Microsoft CLA (automatinis patikrinimas pirmo PR metu) +- Laikytis [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) +- Perskaityti [CONTRIBUTING.md](./CONTRIBUTING.md) išsamioms gairėms +- Nurodyti atitinkamus problemų numerius PR aprašyme, jei taikoma ### Peržiūros procesas -- PR peržiūri prižiūrėtojai ir bendruomenė -- Prioritetas suteikiamas edukaciniam aiškumui -- Kodo pavyzdžiai turi atitikti šiuolaikines gerąsias praktikas -- Vertimai peržiūrimi dėl tikslumo ir kultūrinio tinkamumo +- PR peržiūri prižiūrėtojai ir bendruomenė +- Prioritetas skiriamas mokymosi aiškumui +- Kodo pavyzdžiai turi atitikti dabartines gerąsias praktikas +- Vertimai tikrinami dėl tikslumo ir kultūrinio atitikimo ## Vertimų sistema -### Automatizuotas vertimas +### Automatizuoti vertimai -- Naudoja GitHub Actions su co-op-translator workflow -- Automatiškai verčia į daugiau nei 50 kalbų -- Šaltinių failai pagrindiniuose kataloguose -- Išverstieji failai saugomi `translations/{language-code}/` kataloguose +- Naudoja GitHub Actions su co-op-translator darbo eiga +- Automatiškai verčia į daugiau nei 50 kalbų +- Šaltinių failai pagrindiniuose kataloguose +- Išversti failai `translations/{language-code}/` kataloguose -### Rankinių vertimo patobulinimų pridėjimas +### Rankinių vertimų patobulinimų pridėjimas -1. Raskite failą `translations/{language-code}/` kataloge -2. Atlikite patobulinimus išlaikydami struktūrą -3. Užtikrinkite, kad kodo pavyzdžiai lieka veikiantys -4. Išbandykite lokalizuotą testų turinį +1. Rasti failą `translations/{language-code}/` kataloge +2. Atlikti pataisas, išlaikant struktūrą +3. Užtikrinti, kad kodo pavyzdžiai veiktų +4. Išbandyti lokalizuotą testų turinį -### Vertimų meta duomenys +### Vertimų metaduomenys -Išverstieji failai turi meta antraštę: +Išversti failai turi metaduomenų antraštę: ```markdown ``` - + ## Derinimas ir trikčių šalinimas ### Dažnos problemos -**Apklaustuko programėlė nepaleidžiama**: -- Patikrinkite Node.js versiją (rekomenduojama v14+) -- Ištrinkite `node_modules` ir `package-lock.json`, tada paleiskite `npm install` iš naujo -- Patikrinkite, ar nėra prievado konfliktų (numatytasis: Vite naudoja prievadą 5173) +**Quiz app nepaleidžiamas**: +- Patikrinti Node.js versiją (rekomenduojama v14+) +- Ištrinti `node_modules` ir `package-lock.json`, paleisti `npm install` iš naujo +- Patikrinti prievadų konfliktus (numatyta: Vite naudoja 5173 prievadą) -**API serveris nepaleidžiamas**: -- Įsitikinkite, kad Node.js versija atitinka minimalų reikalavimą (node >=10) -- Patikrinkite, ar prievadas nėra užimtas -- Užtikrinkite, kad visos priklausomybės įdiegtos per `npm install` +**API serveris nepaleidžiamas**: +- Patvirtinti, kad Node.js versija atitinka reikalavimus (node >=10) +- Patikrinti, ar prievadas nėra užimtas +- Įsitikinti, kad visos priklausomybės įdiegtos su `npm install` -**Naršyklės plėtinys nesikrauna**: -- Patikrinkite, ar manifest.json yra tinkamai suformatuotas -- Patikrinkite naršyklės konsolę dėl klaidų -- Sekite naršyklės specifines plėtinių diegimo instrukcijas +**Naršyklės plėtinys neužsikrauna**: +- Patikrinti, ar manifest.json formatas teisingas +- Peržiūrėti naršyklės konsolę klaidų +- Vadovautis naršyklės plėtinio diegimo instrukcijomis -**Python pokalbių projekto problemos**: -- Įsitikinkite, kad įdiegta OpenAI paketas: `pip install openai` -- Patikrinkite, ar nustatytas GITHUB_TOKEN aplinkos kintamasis -- Patikrinkite prieigą prie GitHub modelių +**Python pokalbių projekto problemos**: +- Įsitikinti, kad įdiegta OpenAI biblioteka: `pip install openai` +- Patikrinti, ar nustatytas GITHUB_TOKEN aplinkos variable +- Patikrinti GitHub Models prieigos leidimus -**Docsify neišveda dokumentacijos**: -- Įdiekite docsify-cli globaliai: `npm install -g docsify-cli` -- Paleiskite iš saugyklos šaknies katalogo -- Patikrinkite, ar egzistuoja `docs/_sidebar.md` +**Docsify nedemonstruoja dokumentų**: +- Įdiegti docsify-cli globaliai: `npm install -g docsify-cli` +- Paleisti iš saugyklos šaknies +- Patikrinti, ar egzistuoja `docs/_sidebar.md` -### Vystymo aplinkos patarimai +### Kūrimo aplinkos patarimai -- Naudokite VS Code su Live Server plėtiniu HTML projektams -- Įdiekite ESLint ir Prettier plėtinius nuosekliam formatavimui -- Naudokitės naršyklės kūrimo įrankiais JavaScript derinimui -- Vue projektams įdiekite Vue DevTools naršyklės plėtinį +- Naudoti VS Code su Live Server plėtiniu HTML projektams +- Įdiegti ESLint ir Prettier plėtinius nuosekliam formatavimui +- Naudoti naršyklės DevTools JavaScript derinimui +- Vue projektams įdiegti Vue DevTools naršyklės plėtinį ### Veikimo našumas -- Daug išverstų failų (50+ kalbų) reiškia dideles pilnas kopijas -- Naudokite švelnų klonavimą, jei dirbate tik su turiniu: `git clone --depth 1` -- Išskirkite vertimus paieškose dirbdami su anglišku turiniu -- Kūrimo procesai gali būti lėti pirmame paleidime (npm install, Vite build) +- Daug išverstų failų (daugiau nei 50 kalbų) reiškia didelius klonus +- Naudoti sekliu klonavimą, jei dirbama tik su turiniu: `git clone --depth 1` +- Išskirti vertimus paieškose dirbant su anglų kalba +- Kūrimo procesai gali būti lėti pirmo paleidimo metu (npm install, Vite build) -## Saugumo svarstymai +## Saugumo aspektai ### Aplinkos kintamieji -- API raktai neturi būti įtraukti į saugyklą -- Naudokite `.env` failus (jau įtraukti į `.gitignore`) -- Dokumentuokite reikiamus aplinkos kintamuosius projektuose README +- API raktai neturi būti saugomi saugykloje +- Naudoti `.env` failus (jau įtraukta į `.gitignore`) +- Dokumentuoti reikalingus aplinkos kintamuosius README failuose ### Python projektai -- Naudokite virtualias aplinkas: `python -m venv venv` -- Laikykite priklausomybes atnaujintas -- GitHub token’ai turi turėti minimalias reikalingas teises +- Naudoti virtualias aplinkas: `python -m venv venv` +- Laikyti priklausomybes atnaujintas +- GitHub tokenai turi turėti minimalias reikalingas teises -### GitHub modelių prieiga +### GitHub Models prieiga -- Reikalingi asmeniniai prieigos token’ai (PAT) GitHub modeliams -- Token’ai saugomi kaip aplinkos kintamieji -- Niekada neįtraukite token’ų ar prisijungimo duomenų į saugyklą +- Reikalingi asmeniniai prieigos tokenai (PAT) GitHub Models +- Tokenai laikomi aplinkos kintamuosiuose +- Niekuomet neįtraukti tokenų ar prisijungimo duomenų į saugyklą ## Papildomos pastabos ### Tikslinė auditorija -- Visiškai pradedantieji žiniatinklio kūrime -- Studentai ir savarankiški besimokantieji -- Mokytojai, naudojantys kursą klasėse -- Turinys sukurtas prieinamumui ir palaipsniui įgūdžių tobulinimui +- Absoliutūs pradedantieji interneto kūrime +- Studentai ir savarankiški mokymosi dalyviai +- Mokytojai, naudojantys mokymo planą klasėse +- Turinys pritaikytas prieinamumui ir palaipsniui įgūdžių ugdymui -### Edukacinė filosofija +### Mokymosi filosofija -- Mokymasis projekte pagrindu -- Dažni žinių patikrinimai (testai) -- Praktinės kodo užduotys -- Realūs pavyzdžiai ir taikymas -- Akcentas į pagrindus prieš karkasus +- Projektinis mokymasis +- Dažni žinių patikrinimai (testai) +- Praktiniai programavimo užsiėmimai +- Realūs taikymo pavyzdžiai +- Dėmesys pagrindams prieš karkasus ### Saugyklos priežiūra -- Aktyvi besimokančiųjų ir bendradarbių bendruomenė -- Reguliarūs atnaujinimai priklausomybėms ir turiniui -- Problemos ir diskusijos prižiūrimos migratorių -- Vertimų atnaujinimai automatizuoti per GitHub Actions +- Aktyvi mokinių ir prisidedančių bendruomenė +- Reguliarūs priklausomybių ir turinio atnaujinimai +- Problemos ir diskusijos prižiūrimos vykdytojų +- Vertimų atnaujinimai automatizuoti per GitHub Actions ### Susiję ištekliai -- [Microsoft Learn moduliai](https://docs.microsoft.com/learn/) -- [Studentų centras](https://docs.microsoft.com/learn/student-hub/) -- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) rekomenduojamas besimokantiesiems -- Papildomi kursai: Generatyvioji DI, Duomenų mokslas, ML, IoT kursai +- [Microsoft Learn moduliai](https://docs.microsoft.com/learn/) +- [Studentų centro ištekliai](https://docs.microsoft.com/learn/student-hub/) +- Rekomenduojama naudoti [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) mokymuisi +- Papildomi kursai: generatyvus AI, duomenų mokslas, ML, IoT -### Darbas su specifiniais projektais +### Darbas su konkrečiais projektais -Išsamios instrukcijos apie atskirus projektus yra README failuose: -- `quiz-app/README.md` - Vue 3 apklaustuko programa -- `7-bank-project/README.md` - Banko programa su autentifikacija -- `5-browser-extension/README.md` - Naršyklės plėtinių kūrimas -- `6-space-game/README.md` - Canvas pagrindu sukurtas žaidimas -- `9-chat-project/README.md` - DI pokalbių asistento projektas +Išsamias instrukcijas apie atskirus projektus žr. README failuose: +- `quiz-app/README.md` - Vue 3 viktorinos programa +- `7-bank-project/README.md` - Banko programa su autentifikacija +- `5-browser-extension/README.md` - Naršyklės plėtinių kūrimas +- `6-space-game/README.md` - Canvas pagrindu veikiantis žaidimas +- `9-chat-project/README.md` - AI pokalbių asistento projektas ### Monorepo struktūra -Nors tai nėra tradicinis monorepo, ši saugykla apima kelis nepriklausomus projektus: -- Kiekviena pamoka yra savarankiška -- Projektai nesidalina priklausomybėmis -- Dirbkite su atskiromis projekto dalimis nesukeldami poveikio kitiems -- Klonuokite visą saugyklą pilnam kurso patyrimui +Nors nėra tradicinė monorepo saugykla, ši saugykla talpina kelis nepriklausomus projektus: +- Kiekviena pamoka savaime užbaigta +- Projektai nesidalina priklausomybėmis +- Galima dirbti su atskirais projektais nepaveikiant kitų +- Norint gauti pilną mokymo patirtį, rekomenduojama klonuoti visą saugyklą --- **Atsakomybės apribojimas**: -Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, atkreipkite dėmesį, kad automatizuotuose vertimuose gali pasitaikyti klaidų ar netikslumų. Originalus dokumentas gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Svarbiai informacijai rekomenduojama naudotis profesionalaus žmogaus vertimu. Mes neprisiimame atsakomybės už bet kokius nesusipratimus ar neteisingas interpretacijas, kylančias dėl šio vertimo naudojimo. +Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą [Co-op Translator](https://github.com/Azure/co-op-translator). Nors siekiame tikslumo, atkreipkite dėmesį, kad automatizuoti vertimai gali turėti klaidų arba netikslumų. Originalus dokumentas gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritiniais atvejais rekomenduojama naudotis profesionalių žmonių vertimais. Mes neatsakome už bet kokius nesusipratimus ar neteisingas interpretacijas, kylančias iš šio vertimo naudojimo. \ No newline at end of file diff --git a/translations/my/.co-op-translator.json b/translations/my/.co-op-translator.json index 6b394b508..3e07d0416 100644 --- a/translations/my/.co-op-translator.json +++ b/translations/my/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "bec5e35642176d9e483552bfc82996d8", - "translation_date": "2026-03-06T17:02:28+00:00", + "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d", + "translation_date": "2026-03-27T22:58:54+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "my" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-03-06T17:18:23+00:00", + "translation_date": "2026-03-27T23:08:22+00:00", "source_file": "AGENTS.md", "language_code": "my" }, diff --git a/translations/my/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/my/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 64e1a7b28..f7e704849 100644 --- a/translations/my/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/my/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,181 +1,181 @@ -# Programming Languages နှင့် မော်ဒန်း Developer ကိရိယာများအကြောင်းအကျဉ်း ပြန်လည်မိတ်ဆက်ခြင်း - -မင်္ဂလာပါ ရင်ခုန်နေရသော developer ရှင်! 👋 အချိန်တိုင်းငါ့ကိုအံ့သြစရာပေးတဲ့တစ်ခုခု ပြောပါရစေ။ programming က ကွန်ပျူတာတွေရဲ့အကြောင်းပဲမဟုတ်ပါဘူး – သင့်ရဲ့ရူးသွပ်စရာစိတ်ကူးတွေကို အသက်ဝင်စေဖို့ အမှန်တကယ်ေသာ အထူးကျွမ်းကျင်မှုတွေ ရရှိမယ်ဆိုတာကို သင်တွေ့မြင်တော့မှာပါ! +# Programming ဘာသာစကားများနှင့်ခေတ်သစ် developer ကိရိယာများအIntroduction -သင်သည့်အချိန်မှာ သင်အကြိုက်ဆုံး app ကို အသုံးပြုပြီး အရာအားလုံး ထိတွေ့လွယ်ကူစွာကိုက်ညီသွားတဲ့ခံစားချက်ရခဲ့ဖူးပါသလား? ခလုတ်တစ်ခုကို နှိပ်လိုက်တဲ့အခါ "wow, ဘယ်လိုလုပ်ခဲ့တာလဲ?" ဆိုတဲ့အံ့ဩဖွယ် ကိစ္စတွေ ဖြစ်ပေါ်ခဲ့ဖူးလား? ဟုတ်ကဲ့၊ သင်နှင့် တူတဲ့ လူတစ်ဦးက – အကြိုက်ဆုံးကော်ဖီဆိုင်မှာ မနက် ၂ နာရီမှာ Espresso တတိယလုံးကို နေထိုင်ပြီး အဲဒီဆန်းသစ်မှုကို ရေးသားခဲ့တာပါ။ ဒီသင်ခန်းစာကုန်ဆုတ်ချိန်မှာတော့ သင့်စိတ်ကို ဖြေလျော့ပေးမယ့် အရာက အဲဒီသူတွေ ဘယ်လိုလုပ်ခဲ့တယ်ဆိုတာ နားလည်လာမှာပဲမဟုတ်ဘဲ စိတ်လှုပ်ရှားစွာ ပြင်လုပ်ကြည့်ရမဲ့ စိတ်နှောင့်ယှက်ပြုမှု လည်းဖြစ်လာမှာပါ! +ဟေး၊ အနာဂတ် developer ကိုယ်တိုင်! 👋 တစ်နေ့တာတိုင်းငါ့ကိုအရမ်းတုန်လှုပ်စေတဲ့အရာကိုပြောလိုက်ရမလား? programming ဆိုတာကကွန်ပျူတာတွေအကြောင်းပဲမဟုတ်ဘူး – အကြောင်းအရာသင့်ရဲ့အကြံဥာဏ်တွေကိုပြန်လည်အသက်ဝင်စေတဲ့အတော်ကြီးအစွမ်းသတ္တိတွေပါပဲ! -ကြည့်ပါ၊ programming က အခုတလောမှာ စိတ်မချရင်နားလည်ပါတယ်။ ငါစတင်လေ့လာတဲ့အချိန်မှာ တကယ်ကို အထူးဂဏန်းရွှင်တို့လို ဖြစ်ရမယ်လို့ ထင်ခဲ့တယ်။ ဒါ့အပြင် ငါ့တွေးမြင်ခဲ့တာက programming က အသစ်တစ်ခုသောဘာသာစကားမှန်သလို စကားပြောနည်းကို သင်ယူနေသလိုပဲ။ "မင်္ဂလာပါ" နဲ့ "ကျေးဇူးတင်ပါတယ်" ဆိုတာကနေ စတင်ပြီး ကော်ဖီမှာမှာဖို့ အသုံးပြုမှုပုံစံကို မျှော်လင့်နိုင်ပါတယ်။ နောက်ပြီးတော့ သင်က ပြင်းထန်တဲ့ ရှုထောင့်ဆိုင်ရာ ဆွေးနွေးချက်တွေ ပြောဆိုနိုင်ပါပြီ။ ဒါပေမယ့် ဒီအချိန်မှာ သင်က ကွန်ပျူတာတွေနဲ့ ပြောဆိုနေတယ်၊ ငြင်းဆန်မှုမရှိတဲ့ ဆွေးနွေးသူတွေ အများဆုံး ဖြစ်လို့ သင့် အမှားတွေအပေါ် သုံးသပ်မှုမရှိဘဲ ထပ်မံကြိုးစားဖို့ အမြဲ စိတ်အားထက်သန်နေတဲ့သူတွေပဲ ဖြစ်ပါတယ်! +သင့်ကြိုက်နှစ်သက်တဲ့ app ကိုသုံးနေတုန်း မြစ်တွယ်ဆင်တူတဲ့အချိန် ချိန်ပေါက်လာတဲ့အဲဒီအခန်းကဏ္ဍကိုသိတယ်နော်? ခလုတ်ကိုနှိပ်တဲ့အခါ စိတ်ပျော်စရာအံ့အားသင့်စေတဲ့အရာတစ်ခုဖြစ်ပေါ်သွားပြီး "ဟိုသူတို့ ဘယ်လိုလုပ်သလဲ?" လို့ထင်တယ်? ဟုတ်တယ်၊ ကိုယ့်လိုသူတစ်ယောက်က – ၂ နာရီနောက်တုန်းက coffee shop သုံးခုမြိတ်ကြမ်းပြီးထိုင်သည့်သူ – အဲဒီအံ့အားသင့်စရာကိုရေးသားခဲ့တာပါ။ ဒီစာသင်ခန်းမပြီးခင်မှာ နားလည်သွားမယ့်အကြောင်းကတော့ သူတို့ ဘယ်လိုလုပ်သလဲဆိုတာကိုနားလည်ရုံမက၊ ကိုယ့်ကိုယ်ကိုယ်လည်း မျှော်လင့်နေပြီးစမ်းသပ်ဖို့ဖိစီးမှုရှိနေမှာပဲ! -ယနေ့မှာ မော်ဒန်းဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှုကို ဖြစ်ရပ်မှန် ဖြစ်စေတဲ့ ကိရိယာအသစ်တွေကို လေ့လာမယ်။ Netflix, Spotify နှင့် သင်စိတ်ကြိုက် indie app စတူဒီယိုတွေအပေါ်မှာ တည်ဆောက်တဲ့ editor, browser, workflow တွေကို သင်တွေ့မြင်ပါလိမ့်မယ်။ ဒီအရာတွေ ပိုများတဲ့ အနက်ဖြစ်တာကတော့ ကမ္ဘာကြီးခရီးသွားဖြတ်သန်းနေတဲ့သူတွေ အသုံးပြုတဲ့ professional-grade ကိရိယာတွေ အများစုဟာ အခမဲ့ပဲဆိုတာ ဖြစ်ပါတယ်! +Programming ကိုစတင်သင်ယူတဲ့အခါ ကြောက်ရွံ့တာနားလည်ပါတယ်။ ကၽြန္ေတာ္စတင္သင္ယူခဲ့တဲ့အခါ လူသိနည်းမူသူ တစ်ယောက်ဖြစ်ဖို့လိုတယ်ဆိုတာထင်မြင်ခဲ့တယ်။ ဒါပေမဲ့ ဒါက ဘာကြောင့် ပြောင်းလဲသွားသလဲဆိုတော့ programming ဆိုတာဘာသာစကားအသစ်တစ်ခုကို စကားပြောသင်ယူတဲ့အတိုင်းပါပဲ။ “ဟယ်လို”နဲ့ “ကျေးဇူးတင်ပါတယ်” ဆိုတာနဲ့စပြီး ကော်ဖီမှာမှာယူဖို့အထိ သင်တန်းဖြစ်နေတယ်၊ နောက်ဆုံးမှာတော့ နက်နဲသောဗဟုသုတဆွေးနွေးပွဲတွေပြောဆိုနေမယ်! ဒါပေမဲ့ဒီအတန်းမှာ ကွန်ပျူတာတွေနဲ့ အပြန်အလှန်စကားပြောနေတယ်၊ တကယ်တမ်းမှာသူတို့ဟာ နောက်ကျတဲ့သူမဟုတ်ဘဲ သင့်အမှားတွေကို ဘယ်တော့မှ ညှို့ဆွဲမယ်မဟုတ်ဘူး၊ ပြန်လုပ်ဖို့လည်း အမြဲရှိနေပါတယ်! + +ဒီနေ့တော့ ခေတ်သစ် web ဖွံ့ဖြိုးတိုးတက်မှုကိုဖြစ်နိုင်အောင် ပတ်ဝန်းကျင်ဆန်းသစ်ပြီးစိတ်လှုပ်ရှားစရာကိရိယာတွေကို အတူတကွရှာဖွေကြမယ်။ Netflix, Spotify နဲ့ သင့်အကြိုက်ဆုံး indie app စတူဒီယိုတွေမှာ developer တွေတိုင်း နေ့တိုင်းသုံးတဲ့ တိကျတဲ့ editor, browser နဲ့ workflow တွေကို ဆိုလိုတာပါ။ ဒါပေမဲ့ ဒီအကြောင်းက သင့်ကို အားလုံးအတွက်အခမဲ့ ပရော်ဖက်ရှင်နယ်အဆင့်တွဲကိရိယာတွေဖြစ်တယ်ဆိုပြီး တမန်တတယ့် ပြည့်စုံမှုဖန်တီးမယ်! ![Intro Programming](../../../../translated_images/my/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title သင်၏ပရိုဂရမ်းမင်းခရီးစဉ်ယနေ့ - section ရှာဖွေမယ် - ပရိုဂရမ်းမင်းဆိုတာဘာလဲ: 5: You - ပရိုဂရမ်းမင်းဘာသာစကားများ: 4: You - ကိရိယာများအနှစ်ချုပ်: 5: You - section စူးစမ်းမယ် - ကုဒ်တည်းဖြတ်သူများ: 4: You - ဘရောက်ဇာများနှင့် DevTools: 5: You - အမိန့်လိုင်း: 3: You - section လေ့ကျင့်မယ် - ဘာသာစကားရှာဖွေရေး: 4: You - ကိရိယာစူးစမ်းခြင်း: 5: You - အသိုင်းအဝိုင်းဆက်သွယ်မှု: 5: You + title သင့်၏ပရိုဂရမ်မင်းခရီးလမ်းသည်ယနေ့ + section ရှာဖွေတွေ့ရှိခြင်း + အဘယ်ကြောင့် ပရိုဂရမ်မင်းလဲ: 5: You + ပရိုဂရမ်မင်းဘာသာစကားများ: 4: You + ကိရိယာများအကျဉ်းချုပ်: 5: You + section စူးစမ်းလေ့လာခြင်း + ကုဒ်တည်းဖြတ်စက်များ: 4: You + ဘရาวဇာနှင့် ဖွံ့ဖြိုးတိုးတက်ရေးကိရိယာများ: 5: You + ကွန်မန်းလိုင်း: 3: You + section လေ့ကျင့်သင်ယူခြင်း + ဘာသာစကားစုံစမ်းသူ: 4: You + ကိရိယာလေ့လာခြင်း: 5: You + လူမှုအသိုင်းအဝိုင်းဆက်သွယ်မှု: 5: You ``` -## သင်မှာ ဘာတွေသိပြီးသားလဲ ချက်ချင်းကြည့်ကြမယ်! +## အကြောင်းအရာကို စတင်ဖို့ မည်မှာ သိပြီးသားတွေကြည့်ကြည့်ပါ! -စိတ်လှုပ်ရှားဖွယ်တွေ ဝင်ရောက်မလို့မတိုင်ခင် အကြိုသိထားမှုကို သိချင်တယ် – programming ကမ္ဘာက ဘာတွေလဲဆိုတာ မင်းက ဘယ်လောက်သိတယ်? နားဆင်ပါ၊ ဒီမေးခွန်းတွေကို ကြည့်ပြီး "ဒီအရာတွေကို ဘာမှမသိဘူး" ထင်လာမယ်ဆိုရင်တော့ အဲဒါကအဆင်ပြေပါတယ်၊ အရာရာခပ်သိမ်း ပိုပါတယ်! ဒါဆိုရင် သင့်ရဲ့နေရာက အတိအကျမှန်ကန်နေပြီ။ ဒီ quiz ကို workout ပြင်ဆင်ခြင်းလို စိတ်ထိန်းချုပ်ခြင်းအဖြစ် ထင်ပါ၊ ဦးနှောက်ကြံ့ခိုင်မှုများကို ချိန်ဆဖြစ်ပါတယ်! +ပျော်စရာအပေါက်ကို ကြည့်တင်ခင်မှာ programming ကမ္ဘာကြီးအကြောင်းသင့်တုံ့ပြန်ချက်ကဘာလဲ? မသိဘူးဆို တကယ်တော့ ကောင်းပါတယ်! အဲ့ဒါက သင့်နေရာမှန်တယ်ဆိုတာကိုသက်သေပြတာ။ စမ်းသပ်မှုအတိုင်း ဆီလျော်ဖို့ ဦးတည်ချက်နဲ့ အာရုံစိုက်ကြရအောင်။ [Take the pre-lesson quiz](https://ff-quizzes.netlify.app/web/) -## အတူတကွ သွားမယ့် စွန့်စားခန်း +## နောက်တစ်ခါအတူတကွမကြုံမယ့် စွန့်စားမှု -ရယ်ဖြန်ကြတယ်၊ ဒီနေ့ငါတို့ လေ့လာကြမယ့် အရာတွေကို ဟာသဖြင့် စိတ်ကူးယဉ်ရင်း ရူးသွပ်နေတယ်! တကယ်လို့၊ သင်အဲ့ဒီခံစားချက်တွေကို ခံစားရဦးမယ့်အခါ မျက်နှာကိုမြင်ချင်ပါတယ်။ ဒီအံ့ဖွယ်ခရီးလမ်းအမှန်ကတော့ - +ဟုတ်ကဲ့၊ ဒီနေ့မကြုံမယ့်အရာတွေကို စိတ်လှုပ်ရှားနေတယ်! တစ်ကယ်နဲ့ကျွန်တော် မင်းရဲ့မျက်နှာကိုမြင်မယ်ဆိုရင် အဲဒီအချိန်တွင် စိတ်လှုပ်ရှားစရာတွေကြားမှာပါပဲ။ အတူတကွသွားမယ့် ခရီးစဉ်မှာပါသည်- -- **Programming ဆိုတာ ဘာလဲ (ဘာကြောင့် အကောင်းဆုံး ဆန်းသစ်မှုတစ်ခုလည်းဆိုတာ!)** – အဲဒီ ကုဒ်က သင့်ဘယ်ဘက်မှာမဆို လက်ရှိရှိသော အရာအားလုံးကို ခေါ်ဆောင်သွားတဲ့ မမြင်ရသော မတ်တပ်ရပ်သော ဝိညာဉ်ဆန်သော စွမ်းအားဖြစ်နေကြောင်း သိရှိသွားမယ်၊ အဲဒါက တနင်္လာနေ့ မနက်ဖြန်ဒီဇင်ဘာလ ကျောင်းတက်ဖို့သိသော အချိန်၊ Netflix တင်ဆက်မှုများကို အကြံပြုတဲ့ အယ်လိုရစ်သမာတွေပါ။ -- **Programming ဘာသာစကားများနှင့် ၎င်းတို့၏ အံ့ဩဖွယ်ဂုဏ်သတ္တိများ** – လူတိုင်းက အထူးစွမ်းအားများနှင့် ပြဿနာဖြေရှင်းနည်းတစ်ခုချင်းစီကို ရှိပြီး အဲဒါကို သင်လုပ်ဖို့ ခွင့်ပြုတာလိုလားကြည့်ပါ။ အဲဒါက programming ဘာသာစကားကမ္ဘာက အခြေအနေတစ်ခုပါ၊ အဲဒီသူတွေနဲ့ တွေ့ဖို့ သင်ကြိုက်နို်င်ပါတယ်! -- **ဒစ်ဂျစ်တယ်အံ့ဖွယ်ဆန်းသစ်မှုဖြစ်စေတဲ့ အခြေခံအုတ်တောင်ကျောက်များ** – ဒါတွေကို အကောင်းဆုံးဖြစ်သွားပြီး LEGO အဖွဲ့အစည်းလို ထက်မြက်ပါစေ။ ဤအစိတ်အပိုင်းများကို နားလည်သွားရင် သင်၏ စိတ်ကူးတွင် ထည့်ထားသော တော်တော်အားလုံးကို တည်ဆောက်နိုင်ပါပြီ။ -- **စွမ်းအင်ဆန်းသစ်မှုတစ်ခုလို ခံစားမယ့် professional tools** – ငါပြောတာ မဟုတ်ဘူး၊ အဲဒီ tools တွေက သင့်တွင် အထူးစွမ်းအားရိပ်သာ စွမ်းရည်တွေကို ဖြစ်စေပါလိမ့်မယ်၊ နှင့် အကောင်းဆုံး အပိုင်းက သူတို့ဟာ အပရော်ဖက်ရှင်နယ်တွေသုံးတဲ့ ဆော့ဖ်ဝဲတွေနဲ့တူတဲ့အရာပဲ။ +- **Programming ဆိုတာဘာလဲ (အလှဆုံး အရာတစ်ခုဖြစ်တဲ့အကြောင်း!)** – ကုဒ်ဆိုတာ သင့်ပတ်ဝန်းကျင် စုစုပေါင်းကို invisible အနေနဲ့ လှုံ့ဆော်ပေးတဲ့ မိန့်ခွန်းပမာ ဖြစ်တာကို ရှာဖွေကြမယ်၊ အဲဒီ alarm မနက်ဖြန်ဆိုတာကို သင်ထင်မှတ်ထားသလိုသိထားတယ်၊ Netflix recommendation များကို အလွန်တိကျစွာ စီစဉ်ပေးတဲ့ အဲဒီ algorithm ကိုလည်း +- **Programming ဘာသာစကားများနဲ့ သူတို့ရဲ့ အံ့ဩဖွယ်တဲ့ ပုံစံတွေ** – တစ်ဖြည်းဖြည်း အခြားသူတွေနဲ့ မတူသည့် စွမ်းအင်တွေနဲ့ ပြဿနာဖြေရှင်းနည်းတွေနဲ့ တစ်ပါတီကို ဦးတည်ဆောင်ရွက်တယ်ဆိုတာကို စိတ်ကူးမြင်ကြည့်ပါ၊ programming ဘာသာစကားကမ္ဘာကြီးက အဲဒီလိုပဲဖြစ်ပြီး သင့်အတွက် အကြိုက်ကောင်းစေမှာပါ! +- **အခြေခံထည့်သွင်းမှု ဘာလဲဆိုတာ digital magic တွေဖန်တီးဖို့** – ဒါကို LEGO ကစားပစ္စည်းအဖြစ်တွေးပါ။ ဒီအစိတ်အပိုင်းတွေ ဘယ်လို တွဲစားတာနဲ့ နားလည်သွားရင် သင်အကြံဉာဏ်တွေနဲ့ ဘာမှမရှိတာကို တကယ်ဖြစ်အောင် တည်ဆောက်နိုင်ပြီဆိုတာကို နားလည်နိုင်မှာပါ +- **ပရော်ဖက်ရှင်နယ် အထောက်အကူပြု ကိရိယာတွေက မေးလ်ဇာဝတ်စုံတစ်ခုရဘဲ ခံစားမယ်မို့** – ပြတ်သားစွာပြောရရင် ဒီကိရိယာတွေက မင်းကို superpower ရရှိသလိုခံစားရအောင် ပြုလုပ်မှာပါ၊ အကောင်းဆုံးကတော့ ပရော်ဖက်ရှင်နယ်တွေသုံးတဲ့တူညီချက်တွေပါပဲ! -> 💡 **အခုလိုပဲ:** ဒီနေ့မှာ အရာအားလုံးကို မွတ်သိပ်ထားဖို့ မရိုက်ထည့်ပါနဲ့! အခုကျတော့ ငါသင်ကို အခုလိုမျိုး စိတ်ပေါ်လာအောင် ဆန်းစစ်ချင်တာပဲ။ အကြောင်းကြောင်း အသေးစိတ်တွေဟာ ပဲ့တင်ပို့ဆောင်မှုတွေနဲ့ သင်ယူရင်း သိမြင်လာမယ် – ဒါမျိုးမျိုး ပိုမိုနိုင်ပြီဖြစ်တယ်။ +> 💡 **ဒါက အချက်ဖြစ်ပါတယ်**: ဒီနေ့ အားလုံးကို မှတ်မိဖို့ကြိုးစားခွင့်မရပါဘူး! ယခုအချိန်မှာ သင်ကိုယ်တိုင် အကြောင်းအရာတွေအပေါ် စိတ်လှုပ်ရှားမှုတခုမျှ လှုံ့ဆော်ချင်တာ ဖြစ်ပါတယ်။ အကြောင်းအရာတွေကို သဘာဝကျကျ သင်ယူမှုအတိုင်း ပတ်ဝန်းကျင်မှာ လေ့ကျင့်မယ်ဆိုရင်မှာ သင်ယူမှုဟာ အမှန်တကယ်ဖြစ်ပေါ်လာပါလိမ့်မယ်! -> သင်ဒီသင်ခန်းစာကို [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) မှာလည်း လေ့လာနိုင်ပါတယ်။ +> သင်တန်းကို [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) မှာလည်းယူနိုင်ပါသည်! -## Programming ဆိုတာ *ဘာလဲ*? +## Programming ဆိုတာ သေချာပြီးဘာလဲ? -အိုကေ၊ ဒီသင်ခန်းစာထဲမှာ အဓိက မေးခွန်း တစ်ခုကို ဖြေကြားကြမယ် – programming ဆိုတာ ဘာလဲ? +အိုကေ၊ မီလီယံဒေါ်လာမေးခွန်းကို ဖြေကြပါစို့ - programming ဆိုတာ အမှန်တကယ်ဘာလဲ? -ငါ့အတွေးကို ချဲ့ထွင်အောင် ဘာသာပြန်ပေးမယ့် မိခင်ကို လမ်းညွှန်ဖို့ ကြိုးစားချိန်မှာ ဖြစ်တယ်။ ငါဘာသာပြန်ပြီး၊ "အနီလက်မကိုနဲ့ နှိပ်ပါ၊ ဒါပေမယ့် ကြီးမားတဲ့ အနီလက်မမဟုတ်ပါဘူး၊ ဘယ်ဘက်က အနီလက်မ သေးငယ်တဲ့လက်မပါ... အိုကေ၊ ယခု နှစ်စက္ကန့်အထိ ဖိထားပါ၊ တစ်စက္ကန့်မဟုတ်ပါ၊ သုံးစက္ကန့်မဟုတ်ပါ..." ဆိုတာတွေ ပြောဆိုတယ်။ နားလည်သလား? 😅 +ကျွန်တော် ငြင်းဆိုဒေသကို ပြောင်းလဲခဲ့တဲ့ စိတ်ကူးတစ်ခုကို ပြောပြပါမယ် – အပတ်က ကျွန်တော်မိခင်ကို ကျွန်တော်တို့ရဲ့ smart TV remote အသစ်ကို ဘယ်လိုသုံးရမလဲ တတ်နိုင်လောက်အောင်ရှင်းပြနေတယ်။ "နီလာ ခလုတ်ကိုနှိပ်ပါ၊ ဒါပေမဲ့ အကြီးနီခလုတ်နဲ့ မဟုတ်ဘူး၊ ဘေးဘက်က နီလာသေးတဲ့ ခလုတ်... အဲ့ဒါတခြားဘေးဘက်... ပဝါ့၊ ယင်းကို နှောင်ထားပါ နှစ်စက္ကန့်၊ တစ်စက္ကန့် မဟုတ်ပဲ၊ သုံးစက္ကန့်မဟုတ်ပဲ..." နဲ့တူညီလား? 😅 -ဒါပဲ programming။ အတိအကျ ပြောရရင် အင်အားကြီးတဲ့ တစ်ခုခုကို နောက်တစ်ဆင့်ချင်းစီအားလုံးကို စနစ်တကျဆက်သွယ်ရန် အနုပညာပဲဖြစ်တယ်။ သင့်မိခင်မှာ ("ဘယ်အနီလက်မလဲ?" မေးနိုင်တဲ့သူ) နဲ့မတူဘူး၊ ကွန်ပျူတာမှာတော့ ("သင်ပြောတာ အချိန်တိုင်း ပြောသိပ်မတတ်ရင်" အနက် မရှိဘဲ တိတိ ကျကျ ဆောင်ရွက်ပါတယ်) ဖြစ်ပါတယ်။ +ဒါပဲ programming ပါ! အလွန်အသေးစိတ်၊ အဆင့်ဆင့်ညွှန်ကြားချက်တွေ ပြန်လည်ပေးရတဲ့ အနုပညာပါ၊ အရမ်းအစွမ်းထက်တဲ့တစ်ခုကို မှတ်သားဖို့ လိုအပ်တယ်။ မိခင်နဲ့ဖေါ်ပြဖို့ (သူမက "ဘယ်နီခလုတ်လဲ?!" လို့မေးနိုင်တဲ့ကိုယ်တိုင်) မဟုတ်ဘဲ၊ ကွန်ပျူတာကို (သင်လိုချင်တာဟာ တကယ်နားလည်တဲ့အတိုင်းမဟုတ်ပေမဲ့ ပြောတာကို တိကျစွာလုပ်တယ်) ရှင်းပြနေတာပဲ။ -ပထမဆုံးသင်ယူသမိုင်းမှာငါ့ကို အံ့ဩစေခဲ့တာက ကွန်ပျူတာတွေဟာ အရင်ဆုံး အရိုးရှင်းပြီးဖြစ်တယ်။ ၁ နဲ့ ၀ အတွက်တွေ့နိုင်တာဖြစ်ပြီး "ဟုတ်" နဲ့ "မဟုတ်"၊ ဒါမှမဟုတ် "ဖွင့်" နဲ့ "ပိတ်" ဆိုတဲ့ အဓိပ္ပါယ်ပဲ။ ဒါပေမယ့် ဆိုရာမှာ အံ့ဖွယ်ကောင်းတဲ့အချက်က ၁ နဲ့ ၀ တွေကို Matrix ကဲ့သို့ပြောဖို့ မလိုတော့ပါဘူး။ အဲဒါကို ဖော်ပြတဲ့ စကားလုံးတွေက **programming languages** တွေပါ။ သူတို့က သင့်ရဲ့ လူသားတွေးခေါ်မှုပုံစံကို ကွန်ပျူတာများတွက် ဘာသာပြန်ပေးတဲ့ အကောင်းဆုံးဘာသာပြန်သူပဲဖြစ်ပါတယ်။ +စိတ်ဝင်စားစရာကတော့ ကွန်ပျူတာတွေ အဓိက ရိုးရှင်းတယ်ဆိုတာပါ။ သူတို့နားလည်နိုင်တာ သာမန်အားဖြင့် ၁ နဲ့ ၀ လုံးနဲ့ပဲဖြစ်တယ်၊ "ဟုတ်တယ်" နဲ့ "မဟုတ်ဘူး" သို့မဟုတ် "On" နဲ့ "Off" လို့ ဆိုလို့ရတယ်။ ဒါပေမဲ့ ဒီမှာက Magical ဖြစ်တယ် – ကျွန်တော်တို့က ၁ နဲ့ ၀ ဖြင့်တိုက်ရိုက်ပြောဆိုဖို့ မလိုတော့ပါဘူး။ ဒီမှာ **programming ဘာသာစကား** တွေက ကူညီပေးနေပါတယ်။ သူတို့ဟာ လူတွေရဲ့ အကြောင်းအရာအသုံးအနှုန်းတွေကို ကွန်ပျူတာဘာသာစကားစနစ်အဖြစ် ပြောင်းပေးနိုင်တဲ့ အကောင်းဆုံးဘာသာပြန်တစ်ယောက်လိုပါပဲ။ -နောက်ပြီး နံနက်တိုင်း သင့်စိတ်ကြောက်မက်စေတယ်ဆိုတာကတော့ ဒစ်ဂျစ်တယ်ရှိရာ အရာအားလုံးဟာ လူတစ်ယောက်လို တစ်ဖက်ကနေ mass နှုတ်ဆက်ပြီး laptop များစွာပေါ် typing လုပ်ပြီးဖန်တီးခဲ့တာပါ။ Instagram filter တစ်ခုက သင့်ရဲ့ မသိသေးတဲ့ အနုပညာလက်ရာ၊ ကိုယ်ပိုင်သီချင်းပြသမှု အယ်လိုရစ်သမာတွေ၊ ယနေ့ညဟာပိတ်ပွဲဝင်အချုပ်ကို ကိုင်တွယ်ဖို့ ကူညီတယ်တဲ့ app – ဆိုတော့ ဒီအရာတွေမှာ လူတစ်ယောက်ဦးတည်ထားတာ။ +နံနံအိမ်မက်မြင်တဲ့ အဖြစ်အပျက်ကနေ ကောင်းကင်ကိုရောက်လာတဲ့ အချိန်တိုင်း ငါ့ကိုစိတ်တုန်လှုပ်စေတယ် – ကိုယ့်ဘဝထဲက *အားလုံး* ဒစ်ဂျစ်တယ်ဖြစ်သော အရာတွေအားလုံးဟာ ကိုယ့်လိုသူတစ်ယောက်ကအစတည်ခဲ့တာပါ၊ အိပ်ချိန်ဝတ်ဆင်ပြီး လက်ဖက်ရည်ပါရာ ကွန်ပျူတာမှာ ကုဒ်ရေးနေစဉ်။ ကိုယ်မလှတဲ့ Instagram filter? တစ်ယောက်က သတ်မှတ်ထားတာပါ။ သင့်အသစ်စက်စက်နှစ်သက်တဲ့သီချင်းကို 推薦 ပေးတဲ့ algorithm? တစ်ဦးက တည်ဆောက်ခဲ့တာပါ။ မိတ်ဆွေတွေနဲ့ ညစာဘဲလ်တွေကို ဖြန့်ဖြူးရာ app? ဟုတ်ကဲ့၊ တစ်ယောက်က "ဒီဟာရိုင်းလှတယ်ဆိုပြီး ပြုပြင်သွားဖို့စဉ်းစားခဲ့" ဆက်ပြီးတော့ လုပ်ခဲ့တာပါ! -programming သင်ယူတဲ့အချိန်မှာ သင်က အသစ်တစ်ခုတင်မဟုတ်ဘဲ စိတ်လှုပ်ရှားစရာ၊ ပွန်းပွားစွာ စဉ်းစားတဲ့ လူမှုအသိုင်းအဝိုင်းတွဲဖက်နေတဲ့ အဖွဲ့ဝင် ဖြစ်လာတာပဲ။ သူတို့က တစ်နေ့တာအတွင်း စဉ်းစားနေတယ်၊ "မတူတဲ့လူတစ်ယောက်ရဲ့နေ့ကို နည်းနည်း ပိုကောင်းစေရန် ဘာတည်ဆောက်လို့ရမလဲ?" ဆိုတာ။ တကယ်တော့၊ ငါးညာမွန်တာဆိုတော့ ဒီထက် ပိုကောင်းသေးတာ ရှိတယ်လား? +Programming သင်ယူတာက သင့်တစ်စိတ်တစ်ပိုင်းအတူတူ ဖြစ်တဲ့ စရာအကြောင်းကို မဟုတ်ဘဲ၊ ပြဿနာဖြေရှင်းသူတွေက လူ့ဘ၀တစ်ခုလုံးထဲမှာ တစ်နေ့တာမှာ "တစ်စုံတစ်ယောက်ရဲ့နေ့ကို နည်းနည်းသာ ပိုကောင်းစေဖို့ တစ်ခုတည်ဆောက်နိုင်ရမလား" လို့ အမြဲစဉ်းစားကြတဲ့ ပေါင်းဖက်ဖက်မှုတစ်ခု ဖြစ်လာတာပါ။ -✅ **ကောင့်တွန့်မေးခွန်း**: အချိန်ပေး စူးစမ်းကြည့်ပါ – ကမ္ဘာ့ ပထမဆုံးကွန်ပျူတာ programmer ဖြစ်သူ ဘယ်သူလဲ? အကြံပေးတယ် – သူကို မမျှော်လင့်ထားသည့် ပုံစံတစ်ရပ်ဖြစ်နိုင်တယ်! သူ့နောက်ကွယ်ဇာတ်လမ်းဟာ လွန်စွာစိတ်ဝင်စားဖွယ်ကောင်းပြီး programming ဟာ ပြတ္တိဖြေရှင်းမှုနဲ့ ကန့်သတ်မှုအပြင်အဆင်များကို အမြဲတမ်းတွေးထားကြောင်း ပြောပြတယ်။ +✅ **ပေါ့ဖြစ်မှုပြုခြင်း**: အသားပေးအချိန် ဖွင့်ကြည့်ဖို့ အကြောင်းအရာရောက်ပါပြီ – မင်းထင်တဲ့ အကမ္ဘာလုံးဆိုင်ရာပထမဆုံး ကွန်ပျူတာ programmer က ဘယ်သူလဲ? ငါ hint တစ်ခုပေးမယ်- မင်းမျှော်မှန်းထားတာမဟုတ်ဘူး! ဒီလူအကြောင်းစိတ်၀င်စားဖွယ်ရာဖြစ်ပြီး programming ဟာ အမြဲတမ်း ဖန်တီးမှုအရင်းအမြစ်နဲ့ စူးစမ်းလေ့လာမှုနဲ့ ဖြစ်ခဲ့တာကို ပြသနေပါတယ်။ -### 🧠 **စစ်ဆေးကြည့်ခန်း: သင့်ခံစားချက်** +### 🧠 **စစ်ဆေးချိန်: စိတ်ခံစားချက် ဘယ်လိုလဲ?** -**အချိန်နားလည်ပါ:** -- "ကွန်ပျူတာတွေကို လမ်းညွှန်ချက်ပြောခြင်း" အကြောင်းနားလည်သလား? -- နေ့စဉ်လုပ်ဆောင်ချက်တွေကို programming ဖြင့် автоматတပ်ပြီး ပိုအဆင်ပြေစေချင်တာ ရှိမလား? -- programming ပတ်သက်ပြီး စိတ်ထဲမှာ မေးခွန်းများ ရှိသေးပါသလား? +**အနားယူပြီး မှတ်ယူပါ:** +- "ကွန်ပျူတာတွေကိုညွှန်ကြားခြင်း" ဆိုတာကို အခုနားလည်ပါသလား? +- သင်လက်ရှိမှာ လုပ်တဲ့မှတ်သားရတဲ့ ရိုးရှင်းတဲ့လုပ်ငန်းတစ်ခုဟာ programming နဲ့ automation လုပ်ချင်တာရှိပါသလား? +- Programming အကြောင်းမှာ စိတ်၀င်စားမှု သက်ဝင်ခန်းပေါ်လာတယ်လို့ထင်တာရှိပါသလား? -> **မှတ်သားပါ**: အချို့စာပေများကို သက်ဆိုင်ရာညို့မှုပြုစေခြင်း ganzလေ့လာတဲ့အခါ နားလည်တော့မှာ မဖြစ်နိုင်ပါ။ Programming သင်ယူရတာ သမားရိုးကျ ဘာသာစကားသင်ယူခြင်းလိုပါ – ဦးနှောက်မှာ စနစ်ကျ ဦးတည်ချက်များ ဖန်တီးဖို့ အချိန်လိုပါတယ်။ သင်ကောင်းနေပါတယ်။ +> **မှတ်ထားပါ**: အချို့အကြောင်းအရာတွေ လှပ်လပ်ငြိမ်ငြိမ်နဲ့ မသေချာသေးရင် ပုံမှန်ပါပဲ။ Programming သင်ယူခြင်းဟာ ဘာသာစကားအသစ်တစ်ခုကို ဆက်လက်သင်ယူတဲ့အတိုင်းဖြစ်ပြီး ဖြစ်ပေါ်လာဖို့ နှလုံးသားနဲ့ စိတ်ဓာတ်လိုအပ်တယ်။ မင်းကောင်းစွာလုပ်နေပြီနော်! -## Programming ဘာသာစကားတွေဟာ မတူညီတဲ့ ကြက်သွန်နီအဆီများလိုပဲ +## Programming ဘာသာစကားတွေက မကွဲမပြားတဲ့ Magic အရသာပုံစံများလိုပါပဲ -အိုကေ၊ ဒီဟာက ဗဟုသုတဖြစ်စေချင်ပါတယ်၊ programming ဘာသာစကားတွေဟာ ဂီတအမျိုးအစား မတူညီခြင်းနဲ့ တူတယ်။ သင်ကြားလိုက်ပါ – jazz က ကြမ်းတမ်းပြီး စတူးတစ်လို ရှုထောင့်ရှိတဲ့၊ rock က ပါဝါအပြည့်၊ classical က တိက်ပြီး စနစ်တကျ၊ hip-hop က ပြည့်စုံပြီး ရိုးရာစဉ်အဆက်အမြဲဖြစ်။ အသီးသီး ချစ်သူများ၊ သူတို့ရဲ့ထူးခြားသော သဘောတရားတစ်ခုစီရှိပြီး ကာလအမျိုးအစားအလိုက် သင့်တော်ပါတယ်။ +အိုကေ၊ ယခုနှစ်မြောက်တရား အဆင်မပြေသလောက် ရှင်းပြပါမယ် - programming ဘာသာစကားတွေက တူညီတဲ့တမျိုးတည်း ရှေးဟောင်းဂီတအတိုင်းပါပဲ။ ကြားဖြတ်ကြည့်ပါ- jazz ဆိုတာ တိက်ပြီး သီချင်းတွေးတည်တဲ့စတိုင်၊ rock က အင်အားကြီးပြီး တိုတောင်းတဲ့ စတိုင်၊ classical က တိကျပြီး ဂရုပြုထားတဲ့စတိုင်၊ hip-hop က ဖန်တီးမှုနှင့် အမြင်တက်တဲ့စတိုင်ဖြစ်ပါတယ်။ အသီးသီးမှာ သူ့ရဲ့ နှင့်အတူ လူမှုအသိုင်းအဝိုင်းလည်းရှိပြီး ခံစားမှုနှင့် အစဉ်အလာနဲ့ ကိုက်ညီမှုကြောင့် အသုံးပြုနေကြကြတာလည်းပဲ။ -Programming ဘာသာစကားတွေကလည်း တူတယ်! နာမ်ဘာနဲ့ သီချင်းတစ်ပုဒ်ထဲမှာ အသုံးပြုပြီး mobile game တစ်ခုက ဖန်တီးရင် သင့်အကြိုက်ဆုံး အသင်းအစစ်အမှန်တို့ ကို စုပေါင်းလိုက်ပါ။ +Programming ဘာသာစကားတွေလည်း အဲဒီလိုပါပဲ! သောကြောင့် mobile game သာမက ပြောင်းလဲမှု များသော အချက်အလက်စနစ်ကို ဖြေပေးဖို့တူညီဘာသာစကားတစ်ခုကို မသုံးရပါဘူး၊ yoga class မှာ death metal သီချင်းမသီတာလိုပါပဲ (ဒါဆို ပိုက်ဆံတွေပိုကြီးတယ်! 😄)။ -ဒါပေမယ့် ငါအမြဲဘယ်တော့မှ မပျက်နေတာက ဒီဘာသာစကားတွေက ကမ္ဘာမှာ အကောင်းဆုံး အာရုံစိုက်ဆွေးနွေးသူတစ်ယောက်ကို သင့်ဘက်ကစားစေတယ်။ သင့်ရဲ့ လူသားစိတ်ကူးတွေကို နားလည်သလို ပြောကြားနိုင်ပြီး အဲဒီလို ပြောဆိုမှုတွေကို ၁ နဲ့ ၀ ထဲမှာ ပြန်လည်လိုက်စားပေးတယ်။ သင့်နှင့် အတူရှိတဲ့ သူငယ်ချင်းက "လူ့ဖန်တီးမှု" နဲ့ "ကွန်ပျူတာ သံသရာ" ကွဲပြားမှုကို အပြည့်အဝ နားလည်မြင်မြင်နေပြီး ကောင်းမွန်စွာ အားထုတ်ပေးတယ်။ သူတို့က မပင်ပန်း သောက်ရေ မလိုအပ်ဘဲ ထပ်ညွှန်ကြားမှု မှန်မှန် မရလည်လျှင်စာမေးခွန်းတစ်ခုအား မေးတာလည်း စီမံကြပါဘူး။ +ဒါပေမဲ့ သိပ်ခက်ခဲနေတဲ့အချက်က နေ့တိုင်း စိတ်ကူးရိုက်နေချိန်မှာ ဒီဘာသာစကားတွေကို သင်ယူရတာက လောကရဲ့ အကောင်းဆုံး Interpreter နဲ့ တွဲဖက်တူညီပါတယ်ဆိုတာပဲ။ လူမှုဆက်ဆံမှုအနေနဲ့ မိမိစိတ်ကူးတွေကို လွယ်ကူစွာဖွင့်ဆိုနိုင်ပါတယ်၊ သူတို့ကတော့ ကွန်ပျူတာကိရိယာတွေ အတွက် ပြုလုပ်ဖို့ လိုအပ်တဲ့ 1 နဲ့ 0 တွေဘာသာစကားကို ဘာသာပြန်ကြရတယ်။ ဒီအတူတူ Human creativity နဲ့ computer logic နှစ်ခုလုံးကို လုံးဝပြောဆိုနိုင်တဲ့သူငယ်ချင်းတစ်ယောက်ရှိသလိုဖြစ်ပါတယ် – သူတို့တစ်ခါမှ မပင်ပန်းပါ၊ coffee break လိုအပ်တာမရှိပါ၊ တစ်ခါတည်းတောင်းဆိုတဲ့ မေးခွန်းကို မအနိမ့်ထားပါဘူး! -### လူကြိုက်များတဲ့ Programming ဘာသာစကားများနှင့် အသုံးများမှု +### လူကြိုက်များတဲ့ Programming ဘာသာစကားများနှင့် အသုံးပြုမှု ```mermaid mindmap root((Programming Languages)) Web Development JavaScript - Frontend Magic - အပြန်အလှန် ဝဘ်ဆိုက်များ + မျက်နှာပြင်၏ကျွမ်းကျင်မှု + အပြန်အလှန်ဝက်ဘ်ဆိုက်များ TypeScript - JavaScript + Types - စီးပွားရေး လျှပ်စစ် + JavaScript + အမျိုးအစားများ + စီးပွားရေးလျှောက်လွှာများ Data & AI Python - အချက်အလက် သိပ္ပံ - စက်ရုပ် သင်ယူမှု - အလိုအလျောက်လုပ်ဆောင်မှု + ဒေတာသိပ္ပံ + စက်မှုသင်ယူခြင်း + အလိုအလျောက်လုပ်ခြင်း R - စံနှုန်းများ + စာရင်းအင်း သုတေသန Mobile Apps Java - Android + အန်ဒရွိုက် စီးပွားရေး Swift iOS - Apple Ecosystem + Apple ပတ်ဝန်းကျင် Kotlin - ခေတ်မီ Android - ပလက်ဖောင်းအလွှာများ + ခေတ်မီအန်ဒရွိုက် + Cross-platform Systems & Performance C++ ဂိမ်းများ - အကျိုးသက်ရောက်မှု အရေးကြီး + စွမ်းဆောင်ရည်အရေးကြီး Rust - မှတ်ဥာဏ် လုံခြုံမှု - စနစ် ပရိုဂရမ်မင်း + မှတ်ဉာဏ်လုံခြုံရေး + စနစ်အစီအစဉ်ရေးဆွဲခြင်း Go - Cloud Services - လာမည့် ဘက်အင်ဒ် + တိမ်များဝန်ဆောင်မှုများ + ဖော်ပြန်နိုင်သော Backend ``` -| ဘာသာစကား | သင့်တော်သော နယ်ပယ် | ဘာကြောင့် လူကြိုက်များတာလဲ | +| ဘာသာစကား | အကောင်းဆုံးအသုံး | လူကြိုက်များရတဲ့အကြောင်းပြချက် | |----------|----------|------------------| -| **JavaScript** | ဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှု၊ အသုံးပြုသူအင်တာဖေ့ | Browser များတွင် စက်ခံအသွင့်ဖြစ်ပြီး အပြန်အလှန် ဆက်သွယ်မှုရှိသော ဝက်ဘ်ဆိုဒ်များ ဖန်တီးနိုင်သည် | -| **Python** | ဒေတာ သိပ္ပံ၊ အော်တိုမေရှင်၊ AI | လွယ်ကူပြတ်သားစွာ ဖတ်နိုင်ပြီး စွမ်းအားသာသနာတရားရှိသော စာကြည့်တိုက်များရှိသည် | -| **Java** | စက်မှုလုပ်ငန်းတို့၏ application များ၊ Android apps | အသုံးပြုနိုင်သည့် ပလက်ဖောင်းပေါ်မူတည်မှုမဟုတ်ပြီး ဂရုတစိုက်ကြီးမားသော စနစ်များအတွက် သင့်တော်သည် | -| **C#** | Windows application များ၊ ဂိမ်းဖွံ့ဖြိုးတိုးတက်မှု | Microsoft ပတ်ဝန်းကျင်အတွက် အားကောင်းသော ရရှိမှုရှိသည် | -| **Go** | Cloud ဝန်ဆောင်မှုများ၊ backend စနစ်များ | မြန်ဆန်ပြီး သောကများမရှိဘဲ မော်ဒန် ကွန်ပျူတာ အတွက် ဒီဇိုင်း ပြုလုပ်ထားသည် | +| **JavaScript** | web ဖွံ့ဖြိုးတိုးတက်မှု၊ user interface | Browser မှာ run ပြီး interactive website တွေမှာ အသုံးပြုနိုင်တယ် | +| **Python** | data science, automation, AI | ဖတ်ရလွယ်ပြီး သင်ယူရလွယ်၊ စွမ်းအားကြီးတဲ့ library တွေရှိတယ် | +| **Java** | စီးပွားရေး app များ၊ Android apps | platform မပျက်အောင်၊ စနစ်ကြီးတွေအတွက် တည်ငြိမ်စွာအသုံးပြုနိုင်တယ် | +| **C#** | Windows app များ၊ game ဖွံ့ဖြိုးတိုးတက်မှု | Microsoft ecosystem အားကောင်းစွာထောက်ပံ့တယ် | +| **Go** | cloud service, backend စနစ်များ | လျှင်မြန်ပြီး ရိုးရှင်းစွာ ရေးသားဖို့ ဒီဇိုင်းထားတယ် | -### အဆင့်မြင့် နှင့် နိမ့်အဆင့် ဘာသာစကားများ +### High-Level နှင့် Low-Level ဘာသာစကားများ -ဒါက အမှန်တကယ် ငါစတင်သင်ယူတဲ့အချိန်မှာ ဦးနှောက်ပျက်စီးမှု ရှိခဲ့တဲ့ အကြောင်းအရာဖြစ်လို့၊ ငါ မှီဝဲပေးမယ့် အချက်မှာ ဒီလိုဖြစ်တယ် – နားလည်ဖို့ အနားမလွတ်ပါနဲ့! +ဟုတ်ကဲ့၊ ဒီအကြောင်းအရာ ဟုတ်ကဲ့ ကျွန်တော်စတင်သင်ကြားပြီးသားက အတွေ့အကြုံ ဖြစ်ပါတယ်၊ ပြောပြတဲ့ analogy သက်ဆိုင်ရာပုံစံနဲ့ ပရိုက်ပေးချင်ပါတယ် – ဒါကကျွန်တော်အတွက် မျက်နှာပဲဖြစ်ခဲ့တယ်၊ အခု အစစ်အမှန်နားလည်စေဖို့ မျှော်လင့်ပါတယ်! -နိုင်ငံအသစ်တစ်ခုသို့ သင်သွားလာပြီးဘာသာစကား မတတ်တဲ့အချိန်မှာ အနီးဆုံး ရေချိုးခန်း ရှာဖွေဖို့လိုပါတယ် (ကျွန်တော်တို့အားလုံး ဒီအတွေ့အကြုံရှိဖူးကြတယ်မဟုတ်လား? 😅): +သင်ဘာသာစကားမပြောတဲ့နိုင်ငံတစ်ခုကို သွားတယ်လို့စဉ်းစားပါ - အနီးဆုံးအိပ်သာကို ရှာဖွေဖို့လိုတယ် (ကျွန်တော်တင်က ဒီအကြောင်းကို တူညီစွာခံစားခဲ့တယ် 😅): -- **နိမ့်အဆင့် programming** ဆိုတာ ဒေသခံစကားလုံးကို အလွန်အကျွံသိပြီး ကမ်းခြေဖျတ်ရာမှာ အရွယ်ရင့်ကြီးမားတဲ့အမျိုးသမီးနှင့် ဆက်ဆံနေသလို ဖြစ်ပါတယ်၊ ဒေသဆိုင်ရာ ရိုးရာစကားများ၊ ဝေါဟာရများနှင့် ယဥ်ကျေးမှု ရယ်သံများ အားလုံးကို သိကောင်းပြီး ထိရောက်စွာ ဆက်နွယ်နေနိုင်ပါတယ်... ကျွမ်းကျင်မှုရှိရင် တကယ်ပဲ နိုင်ပါတယ်! ဘာသာစကား မသိရင် အိမ်သာရှာဖို့ ပြဿနာတွေဖြစ်တတ်ပါတယ်။ +- **Low-level programming** ဆိုတာ သင်နေတဲ့ဒေသရဲ့ ဒိုင်ယယ်ကတ်ကို အစားအစာရောင်းတဲ့ အဘွားနှင့် တော်တော်နားလည်အောင် တက်ကြွစွာပြောဆိုနိုင်သလိုဖြစ်ပါတယ်၊ ဒေသရေးရာ reference လေးတွေနဲ့၊ ဒေသခံစကားတွေနဲ့၊ အထက်တန်းဂျိုးကတာတွေရှိပြီး သင့်မှာ fluency ရှိရင် အလွန်ထင်ရှားပြီး ထိရောက်မှုရှိပါတယ်! ဒါပေမဲ့ အိပ်သာရှာဖွေနေတုန်း ကိုယ့်အတွက်တော့ ခက်ခဲနိုင်တယ်။ -- **အဆင့်မြင့် programming** ဆိုတာ ဒေသခံ သူငယ်ချင်းက နားလည်သလိုရှိရင်သေချာပါစေ။ "ကျွန်တော် အိမ်သာလိုအပ်နေတယ်" ဆိုပြီး အင်္ဂလိပ်နဲ့ ပြောပြလိုက်ရင် တစ်ဖက်က ကောင်းမွန်စွာ ဘာသာပြန်ပေးပြီး၊ နားမလည်တဲ့ ဦးနှောက်ကို ကြည်ဖြူစေပြီး လမ်းညွှန်ပေးပါမယ်။ +- **High-level programming** ဆိုတာ အံ့ဖွယ်ကောင်းတဲ့ ဒေသခံသူငယ်ချင်းတစ်ယောက်လိုပါပဲ။ သင် "ကြိုတင်အိပ်သာသွားချင်တယ်" လို့ ကျွမ်းကျင်ပြောလိုက်ရင် သူက ဘာသာပြန်ပေးပြီး အသိပညာနဲ့ သင့်အတွက် လမ်းညွှန်ပေးတယ်။ -Programming စကားဖြင့်။ -- **နိမ့်အဆင့် ဘာသာစကားများ** (Assembly သို့မဟုတ် C ကဲ့သို့) က ကွန်ပျူတာရဲ့ Hardware နဲ့ အလွန်အသေးစိတ် စကားပြောခွင့် ပေးပေမယ့် စက်လို ကျွမ်းကျင် ရှိရမယ်ဆိုတဲ့ စိတ်ဖြေဦး အလိုရှိပါတယ်။ -- **အဆင့်မြင့် ဘာသာစကားများ** (JavaScript, Python, C#) က သင့်ကို လူတစ်ယောက်လို သဘောထားနိုင်စေလို့၊ နောက်ကွယ်မှာ စက်စကားပြောဆိုမှုကို ကိုင်တွယ်နေပါတယ်။ ဤဘာသာစကားတွေမှာ လူအသစ်တွေအတွက် နုံလမ်းကောင်း ကူညီပေးသူတွေ့ရှိနိုင်ပါတယ်။ +Programming ဘာသာစကားတွေအရ: +- **Low-level ဘာသာစကားတွေ** (Assembly, Cလို) ကွန်ပျူတာ hardware နဲ့ အသေးစိတ်စကားပြောခွင့်ပေးတယ်၊ ဒါပေမဲ့ စက်တုရားလို စဉ်းစားရပါမယ်၊ အဲဒါက ကိန်းဂဏန်းတစ်ခု ကြီးနားတဲ့စိတ်ပိုင်းဆိုင်ရာပြောင်းလဲမှုတစ်ခုပါ! +- **High-level ဘာသာစကားတွေ** (JavaScript, Python, C#) က မိမိဘဝပုံစံနဲ့ အလုပ်လုပ်ဖို့ခွင့်လွှတ်ပေးပြီး နောက်ခံမှာ စက်ပညာစကားတွေကို သူတို့ ထိန်းချုပ်တာပဲ။ ထို့အပြင် အသစ်စက်စက်တွေကို အကောင်းဆုံးကူညီပေးပြီး အသင်းချစ်စနစ်ပါတယ်။ -ငါ Suggest လုပ်မယ့် သင်စတင်သင်ယူဖို့ ဘာသာစကားက ဘယ်ဟာလဲ သိချင်လား? 😉 အဆင့်မြင့် ဘာသာစကားများက ကိုယ့်ကိုတတ်မြောက်မှုပိုအဆင်ပြေသလို ဟန်ချက်မှန်တဲ့ training wheels ဖြစ်ပါတယ်။ +ဘာသာစကား ဘယ်ကနေစတင်ဖို့အကြံပေးချင်တယ်ဆိုတာ သိချင်လား? 😉 High-level ဘာသာစကားတွေက training wheels ပုံစံဖြစ်ပြီး အတွေ့အကြုံကို ပိုမိုပျော်စရာကောင်းစေပါတယ်! ```mermaid flowchart TB - A["👤 လူ၏အတွေး:
'ကျွန်တော် Fibonacci ကိန်းဂဏန်းတွေတွက်ချင်တယ်'"] --> B{ဘာသာစကားအဆင့် ရွေးချယ်ပါ} + A["👤 လူ၏စိတ်ထဲတွင်:
'ကျွန်တော် Fibonacci ကိန်းဂဏန်းတွေတွက်ချင်တယ်'"] --> B{ဘာသာစကား အဆင့်ရွေးချယ်မည်} - B -->|အဆင့်မြင့်| C["🌟 JavaScript/Python
ဖတ်ရလွယ်ကူပြီး ရေးရလွယ်"] - B -->|အဆင့်နိမ့်| D["⚙️ Assembly/C
တိုက်ရိုက်ဟာ့ဒ်ဝဲထိန်းချုပ်ခြင်း"] + B -->|အဆင့်မြင့်| C["🌟 JavaScript/Python
ဖတ်ရလွယ်ကူပြီးရေးရန်လွယ်ကူသည်"] + B -->|အနိမ့်အဆင့်| D["⚙️ Assembly/C
hardware ကို တိုက်ရိုက်ထိန်းချုပ်သည်"] C --> E["📝 ရေးပါ: fibonacci(10)"] D --> F["📝 ရေးပါ: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 ကွန်ပျူတာနားလည်မှု:
ဘာသာပြန်သည်ရှုပ်ထွေးမှုကိုကိုင်တွယ်သည်"] + E --> G["🤖 ကွန်ပျူတာ နားလည်မှု:
ဘာသာပြန်သည် စိတ်ပိုင်းရှုပ်ထွေးမှု ကိုင်တွယ်သည်"] F --> G - G --> H["💻 ထိုက်တန်သော ရလဒ်:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["💻 ဒီလိုတူညီသောရလဒ်:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` -###အဆင့်မြင့် ဘာသာစကားများ ဘာကြောင့် လူကြိုက်များတယ်ဆိုတာ ငါပြမယ် +### High-level ဘာသာစကားတွေ ဘာကြောင့် ပိုမိုရင်းနှီးကြောင်း ပြမယ် -ကောင်းပြီ၊ ငါ သင့်ကို အဆင့်မြင့် ဘာသာစကားကြောင့် စိတ်ပျော်ရွှင်ခဲ့တာကို ပုံမှန်ဖော်ပြထားတဲ့ နမူနာတစ်ခု ပြမယ့်အခါ စိတ်ညစ်မိသွားစေမှာ မဟုတ်ပါနဲ့။ ငါ့ကို တစ်ချက် ကတိပေးပါ။ ပထမဆုံးအချို့ code ကို မြင်ရင် စိုးရိမ်မထားပါနဲ့! ဒီအရာက စိတ်ဖိစီးမှု ဖြစ်စေလိုလို့ပါ။ +ဟုတ်ကဲ့၊ ကျွန်တော် high-level ဘာသာစကားတွေကို ဘာကြောင့် ချစ်ခဲ့သလဲဆိုတာ ကိုယ်တိုင်ပြသပေးချင်ပါတယ်၊ ဒါပေမဲ့ နောက်ဆုံးအကြိမ် ဖြည်းဖြည်းလိုက်ပါဦး။ ပထမဆုံး code ကို မြင်တဲ့အခါ အာရုံမရေတော့ပါနဲ့! အဲဒါက ကြောက်ရွံ့စရာပါပဲ။ အဲဒါအချက်ပါပဲ! -ငါတို့ နှစ်မျိုး ကွဲပြားတာနဲ့ ရေးထားတဲ့ ပထမ Fibonacci စာရင်း ကို ကြည့်ပါမယ် – အကြိမ်ရေ သင်္ချာ ရုပ်သဖွယ်ပုံစံ ဖြစ်ပြီး နံပါတ်တစ်ခုက အရင်နံပါတ် နှစ်ခု ပေါင်းထုတ်ထားတာပါ – 0, 1, 1, 2, 3, 5, 8, 13... (ရှစ်ရှည်သတင်းတစ်ခု – ဒီပုံစံတွေဟာ သဘာဝမှာ အပြည့်အဝ တွေ့ရှိနိုင်တယ် – နေကြာစေ့များ၊ ရေပန်းပျိုး များ၊ ကြယ်စု သဘာဝဖွဲ့စည်းမှုများစသဖြစ်!) +တူညီတဲ့ task ကို နှစ်မျိုး style များဖြင့်ရေးသားထားတာကို ကြည့်မယ်။ ကိုယ့်ဧရိယာလေးမှာ Fibonacci sequence ဖန်တီးတာပါ – နံပါတ်တစ်ခုဟာ သူ့မတိုင်ခင် နှစ်ခုရဲ့ ပေါင်းစပ်ခြင်းဖြစ်ပါတယ် – 0, 1, 1, 2, 3, 5, 8, 13... (စိတ်ဝင်စားစရာ- ဒီ pattern က သဘာဝမှာကျယ်ပြန့်လွန်းပြီး - နွယ်ပင်စေ့ပုံစံ၊ ပိုင်းကုတ်ပုံစံမှ၊ နဂိုယ်ယားများ ဖွဲ့စည်းပုံနည်း!) -ကွဲပြားချက်ကို ကြည့်ဖို့ ပြင်ဆင်ပါ! +Ready လား? စတင်ကြဦးလိုက်! -**အဆင့်မြင့် ဘာသာစကား (JavaScript) – လူသားအတွက် ရိုးရှင်းချောမွေ့:** +**High-level ဘာသာစကား (JavaScript) – လူငယ်နှစ်သက်ရာ:** ```javascript -// အဆင့် ၁: အခြေခံ Fibonacci ပြင်ဆင်မှု +// အဆင့် ၁: အခြေခံ Fibonacci ဆက်တင် const fibonacciCount = 10; let current = 0; let next = 1; @@ -183,32 +183,32 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**ဒီကုဒ်က ဘာလုပ်တယ်ဆိုတာ:** -- **fixed constant** တစ်ခု သတ်မှတ်သည်။ ထို constant က ကျွန်တော်တို့ လိုအပ်သည့် Fibonacci နံပါတ်အရေအတွက်ဖြစ်သည်။ -- **variables နှစ်ခု စတင်ပြီး** လက်ရှိနံပါတ်နှင့် နောက်နံပါတ်ကို ချိန်ညှိထားသည်။ -- **စတင်တန်ဖိုးများ** (0 နှင့် 1) ကို Fibonacci ပုံစံအတိုင်း သတ်မှတ်ထားသည်။ -- **output အထွက်စာသားကို** Header အဖြစ် ပြသသည်။ +**ဒီ code ကဘာလုပ်တာလဲ:** +- **ပြောကြားတယ်** Fibonacci နံပါတ် များကို မည်မျှထုတ်မလဲဆိုတာကို သတ်မှတ်ထားတဲ့ constant တစ်ခု +- **စတင်ထားတယ်** လက်ရှိနဲ့ နောက်တစ်ခုနံပါတ်တိုင်းကို ထိန်းသိမ်းဖို့ variable နှစ်ခု +- **အစပြုထားတယ်** (0 နှင့် 1) Fibonacci နံပါတ်ပုံစံကို သတ်မှတ်ထားတဲ့ တန်ဖိုးများ +- **ပြသထားတယ်** output ကို အမည်ပေးတဲ့ အကြောင်းအရာ message ```javascript -// အဆင့် ၂: Loop ဖြင့် အလိုက်လိုက်စဉ်ကို ဖန်တီးပါ +// အဆင့် ၂: လုပ်ဆောင်ချက်တစ်ကြိမ်သုံးပြီး စဥ်လိုက်ကို ဖန်တီးပါ for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // စဉ်ထဲရှိ နောက်ထပ် နံပါတ်ကို တွက်ချက်ပါ + // စဥ်လိုက်အတွင်း နောက်အရေအတွက်ကိုတွက်ချက်ပါ const sum = current + next; current = next; next = sum; } ``` -**ဒီမှာ ဖြစ်ပျက်တာကို ခွဲခြမ်းတော့:** -- **for loop** ဖြင့် လုပ်ဆောင်ချက်ထိတိုင် စဥ်စားသည်။ -- **number နှင့် position** တို့ကို Template literal ဖြင့် ပြသသည်။ -- **နောက်ထပ် Fibonacci နံပါတ်ကို** လက်ရှိနံပါတ်နှင့် နောက်နံပါတ် ပေါင်းပြီးတွက်ချက်သည်။ -- **variables ကို update** ပြုလုပ်၍ အောက်တန်းဟန်ပြုနေသည်။ +**အောက်မှာဖြစ်ပေါ်တာ ခြွင်းချက်:** +- **အသုံးပြု** `for` loop နဲ့ sequence တစ်ခုပြီးတော့ iterate လုပ်နေတယ် +- **ပြသထားတယ်** နံပါတ်တိုင်းနဲ့ အနေအထားကို template literal ဖြင့် +- **တွက်ချက်ထားတယ်** ညနောက်တစ်ရက် Fibonacci နံပါတ်ကို လက်ရှိနဲ့နောက်တစ်နံပါတ် ပေါင်းစပ်ထားတယ် +- **update လုပ်ထားတယ်** တိုင်းကြိမ်ရဲ့ variable တွေကို ပိုပြီး iteration အဆင့်ဆင့်သို့ ```javascript -// အဆင့် ၃: ခေတ်မီသော လုပ်ဆောင်မှုနည်းလမ်း +// အဆင့် ၃: စတိုင်ကျပြီး လက်တွေ့ကျသော နည်းလမ်း const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -219,18 +219,18 @@ const generateFibonacci = (count) => { return sequence; }; -// အသုံးပြုမှုဥပမာ +// အသုံးပြုမှု ဥပမာ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**အထက်ပါနမူနာမှာ:** -- **Modern arrow function syntax** ကို အသုံးပြု၍ ပြန်လည်သုံးနိုင်သော function တစ်ခု ဖန်တီးထားသည်။ -- **Array တစ်ခုဆောက်ပြီး** နံပါတ်များစွာကို တစ်ခါတည်း တစ်ခုစီပြရန်တင်မထားဘဲ သိမ်းဆည်းထားသည်။ -- **Array index ကို အသုံးပြု၍** နောက်ဆုံးနံပါတ်များမှ အသစ်ထုတ်ယူသည်။ -- **ပြန်လည် Return** လုပ်၍ application တစ်ခုတွင် အလွယ်တကူအသုံးပြုနိုင်သည်။ +**အထက်တွင် ကျွန်တော်တို့:** +- **ဖန်တီးထားတယ်** modern arrow function syntax အသုံးပြုပြီး reusable function ကို +- **တည်ဆောက်ထားတယ်** တစ်ခုချင်းပြသခြင်းမရှိဘဲ လုံးဝ sequence ကို array ထဲမှာ သိမ်းဆည်းထားတယ် +- **အသုံးပြုထားတယ်** array index ကို စဉ်ဆက်မပြတ် နံပါတ်အသစ် တွက်ချက်ဖို့ +- **ပြန်ပေးလိုက်တယ်** အလုပ်အတွက်ပိုကုန်လွယ်အောင် လုံးဝ sequence -**နိမ့်အဆင့် ဘာသာစကား (ARM Assembly) – ကွန်ပျူတာအတွက် သင့်တော်:** +**Low-level ဘာသာစကား (ARM Assembly) – ကွန်ပျူတာနှစ်သက်ရာ:** ```assembly area ascen,code,readonly @@ -257,127 +257,128 @@ back add r0,r1 end ``` -JavaScript ဗားရှင်းဟာ အင်္ဂလိပ်လို ပုံမှန် နည်းလမ်းနဲ့ ဖတ်ရပြီး Assembly ဗားရှင်းကတော့ ကွန်ပျူတာ processor ကို တိုက်ရိုက် ထိန်းချုပ်ဖို့ မျိုးစုံ ကုတ်များမှာ စာလုံးပေါင်းတွေ အသုံးပြုထားတာ တွေ့ရတယ်။ နှစ်ခုလုံးက တစ်ခုတည်းတဲ့ အလုပ်လုပ်ပေးတာဖြစ်ပေမယ့် အဆင့်မြင့် ဘာသာစကားက လူသားတွေအတွက် ပိုလွယ်ကူ နားလည်ရေး၊ ရေးဖွဲ့ရေးနဲ့ ပြုပြင်ပြောင်းလဲရေး အဆင်ပြေပါတယ်။ +JavaScript Version က တိုကောင်လူ့စာသား ခက်ခဲခြင်းမရှိပဲ ဖတ်ရတယ်၊ Assembly Version ကတော့ ကွန်ပျူတာ processor ကို တိုက်ရိုက်ထိန်းချုပ်တဲ့ အမိန့်များသုံးထားတယ်။ နှစ်ခုလုံး လုပ်ဆောင်ချက်တူသော်လည်း high-level ဘာသာစကားက လူတွေဘက်မှ နားလည်ရေး၊ ရေးသားရေး၊ ပြုပြင်ထိန်းသိမ်းရာမှာ ပို၍လွယ်ကူတယ်။ -**အဓိက ကွာခြားချက်များကို သင်တွေ့ရှိမှာ**: -- **ဖတ်ရှုရလွယ်မှု**: JavaScript သည် `fibonacciCount` ကဲ့သို့ ဖော်ပြချက်ပြည့်ဝသော နာမည်များကို အသုံးပြုသောအခါ Assembly သည် `r0`, `r1` ကဲ့သို့ လျှို့ဝှက် အမှတ်အသားများကို အသုံးပြုသည် -- **မှတ်ချက်များ**: အဆင့်မြင့် ဘာသာစကားများတွင် ကိုးကားချက်ရှင်းလင်းမှုများအား စွမ်းအားပေးကာ ကုဒ်ကို ကိုယ်တိုင်စာရွက်စာတမ်းဖြစ်လာစေသည် -- **ဖွဲ့စည်းပုံ**: JavaScript ၏ ယောဂျနည်းလိုင်းသည် လူတစ်ယောက်သည် ပြဿနာများကို တစ်ဆင့်ချင်းစီ အတွေးအခေါ်ပုံစံနှင့် ကိုက်ညီသည် -- **စောင့်ရှောက်မှု**: မတူညီသော လိုအပ်ချက်များအတွက် JavaScript ဗားရှင်းကို အဆင်ပြေစွာ နှင့်ရှင်းလင်းစွာ ပြင်ဆင်နိုင်သည် +**အဓိကကွာခြားချက်များမှာ:** +- **ဖတ်ရလွယ်မှု**: JavaScript က `fibonacciCount` လို့ ဖေါ်ပြတဲ့ ရိုးရှင်းသေချာတဲ့ အမည်တွေနဲ့ အသုံးပြုတယ်၊ Assembly ကတော့ `r0`, `r1` စတဲ့ စပ်ဆံဖွယ်ရာဘရိတ်တွေကိုအသုံးပြုတယ်။ +- **မှတ်ချက်များ**: အဆင့်မြင့်ဘာသာစကားတွေက ပြောချင်တဲ့ အကြောင်းအရာတွေကို ရှင်းလင်းပြောပြဖို့ တိုက်တွန်းတယ်၊ ဒါက ကုဒ်ကို ကိုယ်တိုင်မှတ်တမ်းတင်နိုင်အောင် ကူညီတယ်။ +- **ဖွဲ့စည်းပုံ**: JavaScript ရဲ့ လူတွေ စဉ်းစားတတ်တဲ့ နည်းအတိုင်း ပြဋ္ဌာန်းထားတဲ့ ဒေတာစီးစဉ်မှာ ကိုက်ညီတယ်။ +- **ထိန်းသိမ်းမူ**: မတူညီတဲ့ လိုအပ်ချက်တွေအတွက် JavaScript ဗားရှင်းကို update လုပ်တာ ရိုးရှင်းပြီးရှင်းလင်းတယ်။ -✅ **Fibonacci အစဉ်အလာအကြောင်း**: ဒီအလွန်အမင်းလှပသော အရေအတွက်ပုံစံ (အရေအတွက်တစ်ခုချင်းစီသည် ၎င်းမတိုင်မှီနှစ်ခု၏ စုစုပေါင်းနှင့်တူသည်: 0, 1, 1, 2, 3, 5, 8...) သဘာဝတွင် တကယ်အချိန်တိုင်း မြင်တွေ့ရသည်! သင့်သည် နေကြာပန်းပန်းသီးများ၏ စနစ်, ရှေးဟောင်းပင်ပန်းပုံစံများ, nautilus သားလိပ်များ၏လွှမ်းမိုးပုံ, သစ်ပင်ခွံပေါ်နည်းလမ်းများတွင် လည်းတွေ့ရှိနိုင်သည်။ သင်္ချာနှင့် ကုဒ်က သဘာဝ၌ အလှတရားဖန်တီးရန်အသုံးပြုသည့် ပုံစံများကို နားလည်၍ ပြန်လည်ဖန်တီးနိုင်မှု မျှော်လင့်စရာအကြီးကောင်းပါတယ်! +✅ **Fibonacci စဉ်အကြောင်း**: ဒီအံ့ဩဖွယ်ဂဏန်းစဉ် pattern ( နှစ်ခုရှေ့က အရေအတွက်ကို ပေါင်းပြီးထွက်တယ်: 0, 1, 1, 2, 3, 5, 8...) ဟာ သဘာဝအရာတွေအကုန်မှာ ဖော်ထုတ်တွေ့ရပါတယ်! နေကုလားပွင့် လှီးများ, ပင်ရွက်ထင်ရှားမှုများ, nautilus ရေမွှားမျက်နှာကြမ်းမှု စတာတွေနဲ့ သေချာတယ်။ သင့်ကို သဘောကျလောက်အောင် သဘာဝမှာ သဘောဆောင်တဲ့ ပုံစံတွေကို သင့်စိတ်ကူးကိန်းနဲ့ ကုဒ်ဖြင့်နားလည်နိုင်ဖို့ မင်းကို ရှင်းပြတယ်။ -## သို့သော အခြေခံအစိတ်အပိုင်းများ +## ပုံမှန်ပစ္စည်းတွေဖြင့် စွမ်းအင်ကြားကြလေ -အိုကေ၊ လက်ရှိ programming ဘာသာစကားများက ဘယ်လို ရှိနေတယ်ဆိုတာတွေ့ပြီးပြီဆိုတော့၊ ကြည့်ပြီးသော အခြေခံအပိုင်းများကို သွားကြည့်ကြမယ်။ သင်နှစ်သက်သည့် ဟင်းချက်ချက်နည်းမှာ မည်သည့်ပစ္စည်းတစ်ခုချင်းစီသည် ဘယ်လိုလုပ်သလဲ တွေ့ရတာလိုမျိုး - အဲဒါကို နားလည်ပြီးပါက ဘာသာစကား မဆို ကိုးကားရေးသားနိုင်ပြီဖြစ်သည်။ +အိုကေ၊ အခု သင် programming ဘာသာစကားတွေကို လုပ်ဆောင်နေတဲ့ပုံကို မြင်လာပြီ မျှော်လင့်ပါတယ်၊ အခုတော့ သင့်လက်ထဲမှာ ရှိတဲ့ software အားလုံးကို ဖွဲ့စည်းတဲ့ အခြေခံအစိတ်အပိုင်းတွေကို ခွဲခြမ်းကြပါစို့။ ဤအရာတွေကို သင့်အကြိုက်ဆုံးချက်ပြုတ်ဟင်းရဲ့ ဆိုဒ်အဖြစ် စဉ်းစားပါ—တစ်ခုချင်းစီဘာလုပ်နေသလဲနဲ့ သိပြီးနောက်၊ ဘာသာစကားမဆို ကိုဖတ်နာရေးနှင့်ရေးသားနိုင်မှာဖြစ်ပါတယ်။ -ဒါဟာ programming ရဲ့ ဝေါဟာရကို သင်ယူနေသလိုပါ။ ကျောင်းတုန်းက နာမ်၊ ကြိယာနဲ့ စာကြောင်းဖွဲ့စည်းပုံကို သင်ဖတ်ခဲ့တဲ့အခါ ကြားဖူးပါလား။ programming ရဲ့ ကိုယ်ပိုင် grammar ရှိပြီး၊ တကယ်說ဘာသာ စကားgrammarထက် ပိုသေချာပြတ်သားပြီး ကောင်းတာပါ! 😄 +ဒါဟာ programming ရဲ့ သဒ္ဒါသင်ယူခြင်းလိုဖြစ်တယ်။ ကျောင်းမှာ နာမ်နဲ့ ကြိယာရေးအတန်းတွေ သင်တာကို မှတ်ရင်ပါ၊ programming မှာပါ ကိုယ်ပိုင် သဒ္ဒါလမ်းစဉ်များရှိပြီး အင်္ဂလိပ်သဒ္ဒါလမ်းစဉ်ထက် ပိုသဘာဝနဲ့ ပိုခွင့်ပြုပါတယ်! 😄 -### ကြေညာချက်များ: အဆင့်လိုက် အချက်ပြချက်များ +### ညွှန်ကြားချက်များ: ခြေလှမ်းခြေလှမ်းညွှန်ကြားချက်များ -**ကြေညာချက်များ** ဆိုတာက ကွန်ပျူတာနဲ့ စကားပြော တစ်ကြောင်းလိုပါပဲ။ ကြေညာချက်တိုင်းက ကွန်ပျူတာကို တစ်ချက်လောက် အလုပ်လုပ်စေဖို့ လိုက်နာစေသည်။ ဥပမာ- "ဒီမှာဘယ်ဘက်ကို သွားပါ", "နီရောင်မီးမှာ ရပ်ပါ", "ဒီနေရာမှာ ကားရပ်ပါ။" +**ညွှန်ကြားချက်များ** ကိုစတင်ပါစို့ – သူတို့ဟာ သင့်ကွန်ပျူတာနဲ့ပြောတယ်ဆိုတဲ့ အဆက်အသွယ်လို စကားစုတစ်ခုချင်းစီပါဝင်တယ်။ တစ်ခုချင်းဆီသည် တစ်ခုတည်း အခ်ိန်တုန်းမှာ လုပ်ဆောင်ရန် တိကျစွာ အသိပေးတယ်၊ ဥပမာ- "ဒီနေရာမှာ ဘယ်ဘက်အလျား…","အနီလက်မီးမောက်မှာ ရပ်ပါ","မှာအားမှာ ရပ်စိုက်ပါ" ဆိုတာလိုပါပဲ။ -ကြေညာချက်တွေရဲ့ ဖတ်ရှုရလွယ်မှုက ကောင်းတဲ့အရာပါ။ ဒီကို ကြည့်ပါ: +Statement တွေရဲ့ ဖတ်ရတာလွယ်ရွယ်တာကို ကောင်းမြတ်သဘောပေါက်တယ်။ +ကြည့်ပါ: ```javascript -// တစ်ခုတည်းသော လုပ်ဆောင်ချက်များ ပြုလုပ်သော အခြေခံ ပြောကြားချက်များ +// တစ်ခုတည်းသော လုပ်ဆောင်မှုများကို ဆောင်ရွက်သော အခြေခံ ပြောကြားချက်များ const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` - -**ဒီကုဒ်ရဲ့ လုပ်ဆောင်ချက်များ:** -- အသုံးပြုသူနာမည်ကို သိမ်းဆည်းရန် တည်ငြိမ်သော မရေပြားတစ်ခုကို ကြေညာသည် -- စာလုံးဖတ်ထွက်ထံ အကြောင်းကြားစာတစ်ခု ပြသသည် -- သင်္ချာဆိုင်ရာ လုပ်ဆောင်ချက်ရလဒ်ကိုတွက်ချက်ပြီး သိမ်းဆည်းသည် + +**ဒီကုဒ်ကဘာလုပ်သလဲ?** +- အသုံးပြုသူနာမည် သိမ်းဆည်းရန် constant variable တစ်ခု ပြဋ္ဌာန်းခြင်း +- console output မှာ မင်္ဂလာပါ စကားကို ပြသခြင်း +- ဂဏန်းဆိုင်ရာ လုပ်ဆောင်ချက် ရလဒ်တွက်ချက်ပြီး သိမ်းဆည်းခြင်း ```javascript -// ဝက်ဘ်စာမျက်နှာများနှင့် အပြန်အလှန်ဆက်ဆံသော ကြေညာချက်များ +// ဝက်ဘ်စာမျက်နှာများနှင့် အပြန်အလှန်သက်ရောက်မှုရှိသော ကြေညာချက်များ document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` - -**အဆင့်လိုက် အကြောင်းအရာများ:** -- ဝဘ်စာမျက်နှာ၏ ခေါင်းစဉ်ကို ပြင်ဆင်သည် (ဘရောက်ဇာတဘ်တွင် ပြသသော) -- စာမျက်နှာ၏ နောက်ခံအရောင်ကို ပြောင်းသည် -### အမျိုးအစားများ: သင့်ကိုယ်ပိုင် မှတ်ဉာဏ်စနစ် +**ခြေလှမ်းခြေလှမ်းဖြင့် မျှဝေခြင်း:** +- browser tab မှာ ပြသမည့် ဝက်ဘ်စာမျက်နှာခေါင်းစဉ် ပြင်ဆင်ခြင်း +- စာမျက်နှာပေါ်မှာ နောက်ခံအရောင်ပြောင်းခြင်း -အိုကေ၊ **အမျိုးအစားများ** ဟာ ကျွန်ုပ်အတွက် သင်ကြားရတာ အရမ်းနှစ်သက်တဲ့အကြောင်းအရာတစ်ခုပါ၊ ဒါဟာ သင့်နေ့စဉ်အသုံးပြုတာတွေနဲ့ သက်ဆိုင်တယ်ဆိုတော့! +### Variables: သင့်ပရိုဂရမ်ရဲ့ မှတ်ဉာဏ်စနစ် -လူမှုဆက်သွယ်ရေးနံပါတ်စာရင်းကို စဉ်းစားကြည့်ပါ။ မင်း `မိခင်`, `အကောင်းဆုံးသူငယ်ချင်း`, ဒါမှမဟုတ် `နောက်နေ့၂နာရီထိ ပို့ဆောင်တဲ့ ပီဇာဆိုင်` စတဲ့ နာမ်များသိမ်းဆည်းထားပြီး နံပါတ်တွေကို မမှတ်မိဘဲ ဖုန်းကို ယူထားတယ်။ အမျိုးအစားတွေကလည်း ဒီလိုပါပဲ။ ဒါတွေက သင့်အစီအစဉ်မှာ ဒေတာများကို သိမ်းဆည်းပြီး နောက်မှ အမှန်တကယ် နာမည်နဲ့ ခေါ်ယူနိုင်တဲ့ labeled container တွေပဲ။ +အိုကေ၊ **variables** တွေဟာ ကျွန်တော့်အကြိုက်ဆုံး ကောင်းစွာ သင်ကြားနိုင်တဲ့ အကြောင်းအရာလို့ ပြောနိုင်ပါတယ်၊ အဲဒါက မိမိနေ့တိုင်းအသုံးပြုတဲ့ အရာတွေနဲ့ အတူတူပါပဲ။ -အလွန် အထူးသဖြင့်- အမျိုးအစားတွေ ပြောင်းလဲနိုင်တာကြောင့် အလွယ်တကူ အသစ် ပြင်ဆင်ပေးလို့ရတယ် (အဲဒီမှ "variable" ဆိုတဲ့အမည်မျိုးပဲ)။ မင်းအသစ်ကောင်းတဲ့ ပီဇာဆိုင်ကို ရှာတွေ့ရင် အလွယ်တကူ အမျိုးအစားတူ ပြင်နိုင်တယ်။ +ဖုန်းထဲမှာ ဖုန်းစာရင်းကြည့်ပြီးစဉ်းစားကြည့်ပါ။ သင့်အတွက် လူကိုယ်တိုင်းဖုန်းနံပါတ်ကို မှတ်မိလိုက်တာ မဟုတ်ပါဘူး၊ "မေမေ", "အကောင်းဆုံးသူငယ်ချင်း" ဒါမှမဟုတ် "၂ နာရီအထိ ပီဇာပို့ဆောင်နေတဲ့ ဆိုင်" ဆိုပြီး သိမ်းဆည်းထားတာပါ။ variables တွေကလည်း အဲ့ဒီလိုပဲ ဖြစ်တယ်! သင့်စဉ်းစားမှုအတိုင်း အချက်အလက်ကို သိမ်းဆည်းပြီး နောက်မှတင် အသုံးချနိုင်ဖို့ တစ်ခုချင်းစီကို အမှတ်အသားတပ်ထားတဲ့ အိတ်ပါတဲ့ လို့ ထင်နိုင်ပါတယ်။ -ဒီအတိုင်း လွယ်ကူစွာရှင်းပြမယ်: +အရမ်းကောင်းတာက variables တွေဟာ သင့် application အသုံးပြုသလို ပြောင်းလဲနိုင်တယ် (ဒါကြောင့် "variable" လို့ခေါ်တာပါနော်။)။ ပီဇာဆိုင်သတင်းအချက်အလက် အသစ်တွေ ဖြစ်လာရင် variable ကို update လုပ်တဲ့အတိုင်းပဲ၊ သင့်ပြုလုပ်မှုတိုးတက်လာသလို variables တွေဟာ ပြောင်းလဲနိုင်ခြင်းရှိပါတယ်။ + +ဘယ်လို လွယ်ကူကြည့်ရမှာလဲဆိုတာ ကြည့်ပါ: ```javascript -// အဆင့် ၁: အခြေခံရင်းနှီးသတ်မှတ်ချက်များ ဖန်တီးခြင်း +// အဆင့် ၁: အခြေခံပြောင်းလဲနိုင်သော တန်ဖိုးများကို ဖန်တီးခြင်း const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` - -**သဘောထားများ သဘောပေါက်ခြင်း:** -- `const` ကို အသုံးပြုပြီး မပြောင်းလဲနိုင်သော တန်ဖိုးများ သိမ်းဆည်းခြင်း -- `let` ကို အသုံးပြုပြီး အလုပ်အပြောင်းအလဲရှိဉာဏ်ပညာတန်ဖိုးများကို သိမ်းဆည်းခြင်း -- အမျိုးအစား များ ချိန်ညှိခြင်း: စာသားများ, နံပါတ်များ, boolean (true/false) -- အကြောင်းဖော်ပြသော နာမည်များ ရွေးချယ်ခြင်း + +**အဓိပ္ပာယ်လုပ်နည်း:** +- `const` variable များတွင် မပြောင်းလဲမည့်တန်ဖိုးများ သိမ်းဆည်းရန် (ဥပမာဆိုက်နာမည်) +- `let` ကို အသုံးပြုပြီး ပြောင်းလဲနိုင်သော တန်ဖိုးများ သိမ်းဆည်းရန် +- String (စာသား), Number, Boolean (စစ်/မစစ်) တန်ဖိုးများ စုံလင်စွာသတ်မှတ်ရန် +- ပြောဆိုခြင်းမှာ ရိုးရိုးရှင်းရှင်းဖြင့် တန်ဖိုးမဟုတ်တဲ့ အနည်းငယ်မှတ်သားနိုင်သော အမည်များရွေးချယ်ရန် ```javascript -// အဆင့် ၂: သက်ဆိုင်ရာဒေတာများကို အုပ်စုဖွဲ့ရန် အရာဝတ္ထုများနှင့် အလုပ်လုပ်ခြင်း +// အဆင့် ၂: ဆက်စပ်သော အချက်အလက်များကို အုပ်စုဖွဲ့ရန် အရာဝတ္ထုများနှင့် အလုပ်လုပ်ခြင်း const weatherData = { location: "San Francisco", humidity: 65, windSpeed: 12 }; ``` - -**အထက်ပါ၌:** -- ဆက်စပ်သော ရာသီဥတုဆိုင်ရာ ဥပမာတစ်ခုကို အသုံးပြုအရာအား ဆောက်လုပ်သည် -- အချက်အလက်များစွာကို တစ်ခုတည်းသော အမျိုးအစား အောက်တွင် စုစည်းသည် -- key-value စနစ်ဖြင့် တစ်စိတ်တစ်ပိုင်း ငြင်းသာတပ်၍ ဖော်ပြသည် + +**အထက်ပါမှာ:** +- သက်ဆိုင်ရာရာထူးများစုစည်းထားသော object တစ်ခု ဖန်တီးခြင်း +- တစ်ခုတည်းသော variable အောက်မှာ များစွာသော အချက်အလက်များ စုစည်းခြင်း +- key-value ရွှေ့ပြောင်းထားခြင်းဖြင့် နောက်ခံဉီးဆောင်ရေးဖြစ်စေခြင်း ```javascript -// အဆင့် ၃: မျဉ်းပြောင်းများကို အသုံးပြုခြင်းနှင့် အပ်ဒိတ်လုပ်ခြင်း +// အဆင့် ၃: မVariables ပြောင်းလဲနိုင်သော မVariables များကို အသုံးပြုခြင်းနှင့် ပြင်ဆင်ခြင်း console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// ပြောင်းလဲနိုင်သော မျဉ်းပြောင်းများကို အပ်ဒိတ်တင်ခြင်း +// ပြောင်းလဲနိုင်သော မVariables များကို ပြင်ဆင်ခြင်း currentWeather = "cloudy"; temperature = 68; ``` - -**အပိုင်းတစ်ခုချင်းစီ နားလည်ခြင်း:** -- template literals `${}` နယ်နိမိတ်များဖြင့် သတင်းအချက်အလက် ပြသခြင်း -- dot notation (`weatherData.windSpeed`) ဖြင့် object property များ ထိန်းသိမ်းတွက်ချက်ရန် -- `let` ဖြင့် ကြေညာထားတဲ့ variable များကို ပြင်ဆင်ခြင်း -- မျိုးကြီးတူ variable များ ပေါင်းစပ်ပြီး ဆက်စပ်တန်ဖိုးများ ဖန်တီးခြင်း + +**အစိတ်အပိုင်းအသီးသီး ကို နားလည်ခြင်း** +- `${}` စတိုင်နဲ့ template literals အသုံးပြုပြီး သတင်းအချက်အလက် ပြသခြင်း +- dot notation (`weatherData.windSpeed`) အသုံးပြု၍ object properties ထိန်းချုပ်ခြင်း +- ကြေညာထားတဲ့ `let` variables များ update လုပ်ခြင်း +- များစွာသော variables များ ပေါင်းစပ်၍ အဓိပ္ပာယ်ရှိသော စာသားဖန်တီးခြင်း ```javascript -// ခြေလှမ်း ၄: ပိုသန့်ရှင်းသောကုဒ်အတွက်ခေတ်မီသောပျိုးပင်ခြင်း +// အဆင့် ၄: ပိုသန့်ရှင်းတဲ့ ကုဒ်အတွက် ခေတ်မီသော ဖျက်သိမ်းခြင်းနည်း const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` - -**သိထားရန်လိုအပ်ချက်များ:** -- destructuring assignment ဖြင့် object-properties ထွက်ယူခြင်း -- object keys နာမည်များနှင့် အလိုအလျောက် variable အသစ် ဖန်တီးခြင်း -- dot notation အလွန် မကြာခဏ သုံးခြင်း မလိုအပ်အောင် code ရိုးရှင်းစေခြင်း -### ထိန်းချုပ်မှု လည်ပတ်မှု: သင့်အစီအစဉ်ကို စဉ်းစားကောင်းစေခြင်း +**သင်ယူသင့်တာတွေ:** +- destructuring assignment ဖြင့် object က ချိတ်ဆက်ထားသည့် specific property များ ထုတ်ယူခြင်း +- object key များနဲ့ အတူ variable အသစ်များ အလိုအလျောက် ဖန်တီးခြင်း +- dot notation ထပ်တူထပ်မျှ ပြန်ကြားခြင်း မဖြစ်စေရန် ရိုးရှင်းအောင် ပြုလုပ်ခြင်း + +### Control Flow: သင့်ပရိုဂရမ်ကို စဉ်းစားတတ်အောင် သင်ကြားခြင်း -အိုကေ၊ ဒီမှာ programming က အံ့သြစရာအမြင့်ဆုံး ဖြစ်တာပါပဲ! **ထိန်းချုပ်မှု လည်ပတ်မှု** ဆိုတာ သင့်အစီအစဉ်ကို သင်လုန့်တဲ့အတိုင်း ဖြစ်ထွန်းအောင် စဉ်းစားသော နည်းလမ်းများ သင်ကြားပေးခြင်းပါ။ +အိုကေ၊ ဒီမှာ programming က အံ့ဩဖွယ်ကောင်းတယ်နော်! **Control flow** ဟာ basically သင့်ပရိုဂရမ်ကို စဉ်းစားတတ်အောင် သင်ကြားတယ်၊ သင့်ကိုယ်တိုင် လုပ်နေတဲ့ပုံစံနဲ့တူတယ်။ -မနက်ဖြန်မိုးရွာရင် ထီးယူမယ်။ အေးမြေလို့ ဇက်ကတ်ဝတ်မယ်။ နောက်ကျသွားရင် ထမင်းမစားဘဲ ကော်ဖီယူမယ်ဆိုတဲ့ logic ကို စဉ်းစားပါ။ မိမိဘက်ဝဲတွင် ထို if-then လိုက်နာမှု ပုံစံများကို နေ့စဉ် ဒါရိုက်စရာမရှိဘဲ အလုပ်လုပ်နေတယ်! +စဥ်စားပါစို့ - ဒီမနက်မှာ သင် "မိုးရွာလျှင် ထီးယူမယ်။ ရာသီအေးရင် ဂျက်ကက်ဝတ်မယ်။ နောက်ကျရင် မနက်စာ မစားဘဲ ကော်ဖီယူမယ်" စတဲ့ if-then လို logic တွေနဲ့ မြှောက်မြူနေပေမဲ့ သေချာ လုပ်ဆောင်ခဲ့ရပါမယ်။ သင့်အာရုံစူးစိုက်မှုဟာ ဒီ if-then logic ကို နေ့စဉ်တစ်ချိန်လုံးမျှမျှတတ လိုက်နာနေပါတယ်။ -ဒါကြောင့် ကုဒ်များက ရိုးစွဲသော စာရိုက်မှု မဟုတ်ဘဲ တကယ်သိပ္ပံရပ်မှန်ပြီး အသက်ရှင်လှုပ်ရှားသော ဇာတ်ကောင်တွေလို ဖြစ်စေတယ်။ အချက်အလက်များကို တွက်ချက်ပြီး ရလဒ်ထွက်အောင် လုပ်ဆောင်တယ်! သင့်အစီအစဉ်ကို စိတ်ဥာဏ်ရှိသော နက်နဲတဲ့ ဦးနှောက်တစ်ခု ပေးပြီး ပြောင်းလဲမှုများနှင့် ဆုံးဖြတ်ချက်များ လုပ်နိုင်စေပါတယ်။ +ဒီလို programming တွေဟာ စိတ်ကိုလှုပ်ရှားဖွယ်နဲ့ အသက်ဝင်နေတဲ့ application တွေလို ဖြစ်စေတယ်၊ ပုံမှန် script တစ်ခုလို ကြေးပင်ကန်ရုတ်မှတ်မဟုတ်ပါဘူး။ သူတို့က ထိတွေ့လာတဲ့အခြေအနေကို သုံးသပ်ပြီး သင့်တော်သော ပြန်ကြားမှုကို ပြန်ပေးနိုင်ပါတယ်။ သင့်ပရိုဂရမ်အတွက် ခေါင်းဆောင်အထူး ဉာဏ်ကောင်းတက်နိုင်အောင် ပြုလုပ်ပေးခြင်းလိုပါပဲ။ -အဲဒါက ဘယ်လိုကောင်းမြတ်နိုင်မလဲ၊ ကြည့်ပါ: +ဒီလိုလုပ်ပုံကို ကြည့်ချင်ပါသလား? ဒီလိုဖြစ်ပါတယ်: ```javascript -// အဆင့် ၁: မူလအခြေအနေဆိုင်ရာ ရွေးချယ်မှုရေးရာ ထောက်ခံချက် +// အဆင့် ၁: အခြေခံ အခြေအနေ သေချာရေး lógica const userAge = 17; if (userAge >= 18) { @@ -387,15 +388,15 @@ if (userAge >= 18) { console.log(`You'll be able to vote in ${yearsToWait} year(s).`); } ``` - -**ဒီကုဒ်လုပ်တာက:** -- အသုံးပြုသူအသက်ကို မဲပေးခွင့်လိုအပ်ချက်နှင့် စစ်ဆေးသည် -- နောက်ဆုံးရလဒ်အပေါ် အခြေခံကာ ကွဲပြားသည့် code block များ ကို လုပ်ဆောင်သည် -- အသက် ၁၈ နှုတ်မပြည့်လျှင် မဲပေးခွင့် ရရှိမည့် အချိန်ကို တွက်ပြီး ပြသသည် -- တခြားအခြေအနေများအတွက် ထိရောက်သော အကြံပြုချက်များ ထောက်ပံ့ပေးသည် + +**ဒီကုဒ်လုပ်ဆောင်တာ:** +- အသုံးပြုသူ အသက် မဲပေးခွင့် ရှိမရှိ စစ်ဆေးခြင်း +- က""အခြေအနေ အပေါ် မူတည်ပြီး ကုဒ်အပိုင်းမျိုးစုံ မျက်နှာချင်းဆိုင် ဆောင်ရွက်ခြင်း +- ၁၈ နှစ် မပြည့်လျှင် မဲပေးခွင့် ရောက်မြန်ချိန်တွက်ချက်ပြီး ပြသခြင်း +- အခြေအနေတစ်ခုချင်းအတွက် အသေးစိတ် ဝမ်းနည်းစရာ ညွှန်ကြားချက်ပေးခြင်း ```javascript -// အဆင့် ၂: ဆိုက်ငံ့လှည့်ခြင်းများနှင့်အတူ မျိုးစုံထားသော အခြေအနေများ +// အဆင့် ၂: တရားစီစစ်သူများနဲ့ အခြေအနေများစုံ const userAge = 17; const hasPermission = true; @@ -407,26 +408,26 @@ if (userAge >= 18 && hasPermission) { console.log("Sorry, you must be at least 16 years old."); } ``` - -**မှတ်ချက်များ:** -- `&&` (နှင့်) ရိုးရာ operator ဖြင့် အခြေအနေများ ပေါင်းစပ်ခြင်း -- မျိုးစုံအခြေအနေများအတွက် `else if` ဖြင့် အဆင့်တန်းဖွဲ့ခြင်း -- နောက်ဆုံးတွင် `else` ဖြင့် အခြေအနေ မမှတ်သားဘဲ ဖြစ်နိုင်ခြေ ချုပ်ဆိုခြင်း -- အခြေအနေတစ်ခုချင်းစီအတွက် အကြောင်းပြချက်အသေးစိတ်ပေးခြင်း + +**ဒီမှာ ဖြစ်သင့်တာ အပိုင်း - အပိုင်း မျှဝေခြင်း:** +- `&&` operator ဖြင့် အခြေအနေ များ စုပေါင်းခြင်း +- မျိုးစုံ အခြေအနေများအတွက် `else if` ဖြင့် အဆင့်တက်ပုံဖန်တီးခြင်း +- ရှိနိုင်တဲ့ case အားလုံး ကို `else` statement တစ်ခုနဲ့ ကိုင်တွယ်ခြင်း +- အခြေအနေ အမျိုးမျိုးအတွက် ရှင်းလင်း သာမန် အကြံပြုချက်ပေးခြင်း ```javascript -// အဆင့် ၃: သုံးလမ်းရွေးချယ်ခြင်းနဲ့ စည်းကမ်းပြည့်စုံတဲ့ အခြေအနေစစ်တမ်း +// အဆင့် ၃: တန်းနရီ operator ဖြင့် အတိုချုပ်အခြေအနေရှုခင်း const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` - -**သတိထားရန်:** -- အခြေအနေ ရိုးရှင်းသော နှစ်ရွေးစရာအတွက် ternary operator (`? :`) အသုံးပြုသည် -- ပထမဦးဆုံး အခက်အခဲရေးပြီး `?` ဖြင့်စ၍ true မျာ့နှင့် false ရလဒ်များကိုထည့်သည် -- အခြေအနေအပေါ်တွင် ထောက်ခံတန်ဖိုး ပေးသည့်အခါ အသုံးပြုရန် + +**သင်မှတ်မိထားသင့်တာ:** +- အသုံးပြုမှုရိုးရှင်းတဲ့ ၂ ရွေးချယ်မှုအတွက် ternary operator (`? :`) သုံးပါ +- စဉ်းစားခွင့်နောက်တွင် `?`, true ဖြစ်စေရန် မတိုင်ခင်, `:` ဖြင့် false ဖြစ်စေရန် အတိုင်းရေးပါ +- အခြေအနေများပေါ် မူတည်ကာ တန်ဖိုးသတ်မှတ်ခြင်းလိုအပ်သောအခါ သုံးပါ ```javascript -// အဆင့် ၄: အထူးအမှုအခြေအနေများစွာကို ကောင်းစွာကျင့်သုံးခြင်း +// အဆင့် ၄: အထူးကိစ္စများစွာကို ကိုင်တွယ်ခြင်း const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -445,56 +446,56 @@ switch (dayOfWeek) { console.log("Invalid day of the week"); } ``` - -**ဒီကုဒ်အလုပ်ဖြစ်စေသောအချက်များ:** -- variable တန်ဖိုးကို မတူညီသော ဥပမာများနှင့် ကိုက်ညီမှု ပြုစေသည် -- ဆက်စပ်သည့် ဥပမာများ (အလုပ်ရက်နေ့များ နှင့် အပတ်ကုန်များ) ကိုစုစည်းသည် -- ကိုက်ညီမှု မြင်သာသောအခါ သင့်လျော်သော code block ကို ဆောင်ရွက်သည် -- မမျှော်လင့်သော တန်ဖိုးများကို ထိန်းသိမ်းရန် `default` case ပါထည့်သည် -- နောက်မှဖြစ်လာရင် မလုပ်ဆောင်အောင် `break` ဖြင့် ရပ်ဆိုင်းသည် -> 💡 **နမူနာနက်နဲတယ်**: ထိန်းချုပ်မှု လည်ပတ်မှုကို သဘာဝနှင့် လူကြီးဆုံး GPS တစ်ခုလို ထင်နိုင်ပါသည်။ "Main သာလမ်းတွင် ယာဉ်တာရွေ့နေပါက အမြန်ဆုံးလမ်းကို သွားပါ၊ အမြန်လမ်းပိတ်နေပါက ကျေးလက်လမ်းကို စမ်းကြည့်ပါ" ဆိုသလိုဖြစ်သည်။ ကြားနာတတ်သော logic များဖြင့် အခြေအနေများကို အသိပညာနဲ့ တုံ့ပြန်ပေးသည်။ +**ဒီကုဒ်အလုပ်ဖြစ်တဲ့ အဆင့်တွေ:** +- variable တန်ဖိုးကို နောက်ထပ် case များနှင့် ကိုက်ညီသည့် အခြေအနေတွေနဲ့ သေချာစွာ ညှိနှိုင်းခြင်း +- ဆင်တူတဲ့ case များကို စုပေါင်းခြင်း (အလုပ်ရက်များ နှင့် အပတ်သတ်ရက်များ) +- ထိုအချိန် မေးခွန်းနှင့်ကိုက်ညီသော case ကို လုပ်ဆောင်ခြင်း +- မမျှော်လင့်ထားတဲ့ တန်ဖိုးများအတွက် `default` case ထည့်ခြင်း +- code ကို နောက် case သို့ ဆက်သွားမှုကင်းစင်စေရန် `break` statement များထည့်ခြင်း + +> 💡 **တကယ့်ကမ္ဘာ ပုံပြင်**: Control flow ကို စိတ်ရှည်လက်ရှည် GPS နဲ့ လမ်းညွှန်ဖို့ စဉ်းစားပါ။ သူက "Main Street မှာ ယာဉ်များ ပြတင်းပေါက်နေသော်လည်း လမ်းမကြီးမှတက်ပါ။ လမ်းမကြီးမှာ ဆောက်လုပ်ရေးစခန်း ရှိလျှင် မြင်ကွင်းကောင်းတဲ့လမ်းသို့ ရွေ့ပါ" လို့ ပြောမယ်။ Program များကလည်း အဲ့ဒီလို အခြေအနေ အမျိုးမျိုးကို ရိုးရွင်းပြီး ချင့်ချိန်တုန့်ပြန် မျှော်လင့်ချက်အ‌ရှိဆုံး ရရှိရန် ဆိုလိုက်ပါတယ်။ -### 🎯 **အကြောင်းအရာ စစ်ဆေးခြင်း: အခြေခံကိရိယာ ကျွမ်းကျင်မှု** +### 🎯 **ပညာသင်စစ်ဆေးစရာ: ပုံမှန်ပစ္စည်း ကျွမ်းကျင်မှု** -**အခြေခံများမှာ မင်း ဘယ်လိုလုပ်နေတာလဲ ကြည့်ရအောင်:** -- မင်းရဲ့စကားဖြင့် variable နဲ့ statement ကြားက ကြားခံချက်ကို ရှင်းပြနိုင်မလား? -- ကျွန်ုပ်တို့ voting ဥပမာကဲ့သို့ if-then ဆုံးဖြတ်ချက် များ အသုံးပြုမယ့် ရဲ့ နေ့စဉ်ဘဝ အခန်းကဏ္ဍတစ်ခု ဆိုလိုက်ပါ -- programming logic မှာ မင်း အံ့ဩသွားတဲ့ အချက်တစ်ချက် ပြောပါ +**အခြေခံတွေ ဘယ်လိုလုပ်နေလဲ ကြည့်ကြရအောင်:** +- variable နဲ့ statement ကြားက ကွာခြားချက်ကို ကိုယ်ပိုင်စကားနဲ႔ ရှင်းပြပါ။ +- voting example ကဲ့သို့ if-then ဆုံးဖြတ်ချက် အသုံးပြုမယ့် ပိုင်းကို ကောင်းကောင်းစဉ်းစားပါ။ +- programming logic မှာ တစ်ခုခု အံ့အားသင့်စရာ ရှိခဲ့ဖူးလား? -**မြန်စွာ ယုံကြည်မှု တိုးမြှင့်ကမ့်:** +**အမြန် အားပေးမှု:** ```mermaid flowchart LR - A["📝 မက်ဆေ့ချ်များ
(ညွှန်ကြားချက်များ)"] --> B["📦 အမျိုးအစားများ
(သိုလှောင်မှု)"] --> C["🔀 ထိန်းချုပ်မှုစီးဆင်းမှု
(ဆုံးဖြတ်ချက်များ)"] --> D["🎉 လုပ်ဆောင်နိုင်သောပရိုဂရမ်!"] + A["📝 ကြေညာချက်များ
(အညွှန်းများ)"] --> B["📦 မတည်ခင်းများ
(သိုလှောင်မှု)"] --> C["🔀 ထိန်းချုပ်ရေးစီးဆင်းမှု
(ဆုံးဖြတ်ချက်များ)"] --> D["🎉 လုပ်ဆောင်နိုင်သောအစီအစဉ်!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 -``` -✅ **နောက်တစ်ခုပြီးတော့ မျှော်လင့်သောအရာ**: ဒီအံ့သြဖွယ် concepts တွေကို နက်နဲစွာ အသိပညာရရှိအောင် ကူညီဖို့ ဒီခရီးကို ဆက်လုပ်မှာပါ! လက်ရှိမှာ တစ်ခုချင်းစီအတွက် စိတ်လှုပ်ရှားမှုကိုသာ ဖမ်းဆီးထားပါ။ အတော်များများသော ကျွမ်းကျင်မှုများနှင့် နည်းပညာများမှာ သင်ယူလေ့ကျင့်မှုတွေနဲ့ အလိုအလျောက် ရွေးချယ်ဖြစ်လာမှာ သေချာပါတယ်။ ဒီခရီး သင့်အတွက်အတော်ပင် စိတ်ဝင်စားစရာဖြစ်မယ်! +``` +✅ **အနောက်မှာ ဘာလာလဲ**: ဒီအကြောင်းအရာတွေနဲ့ ပိုမိုနက်ရှိုင်းစွာ လေ့လာရင်း ဆက်လက် ခရီးကို ပျော်ရွှင်စွာ ဆက်လက် ဆောင်ရွက်ကြမယ်! ဒီအချိန်မှာတော့ ရှေ့မှာ လှုပ်ရှားစိတ်တွေက မျှော်လင့်ချက်တွေနဲ့ ပြည့်ပြီး၊ လေ့ကျင့်ဖို့လိုအပ်တဲ့ ကျွမ်းကျင်မှုတွေနဲ့ နည်းလမ်းတွေ သဘာဝကျကျ ပေါက်ပေါက်ပြီ ဖြစ်လာမယ်ဆိုတာက သေချာလိုက်ပါ။ -## ကိရိယာများ +## အသုံးအဆောင်ကိရိယာများ -အိုကေ၊ ဒီနေရာမှာ ကျွန်တော် တကယ် စိတ်လှုပ်ရှားစရာ ဖြစ်သွားတာပါ! 🚀 ဒီကား ဝန်းရံပေးမယ့် အံ့ဖွယ်ကိရိယာတွေကို ပြောပြတော့မယ်။ +အိုကေ၊ ဒီနေရာမှာ ကိုယ်ကြွယ်ဝမှုမဟုတ်လို့ ကြွက်သားထိုင်ခုံပေါ်မှာ ပျံ့လွင့်နေတယ်! 🚀 ဒီကိရိယာများက သင့်ကို ဒစ်ဂျစ်တယ်အာကာသယာဉ်အညွှန်းချက်ကို ဖမ်းဆီးထားတဲ့ ကီးတွေ လက်ဆောင်ပေးမှာ ဖြစ်တယ်။ -ဟင်းချက်သမားတစ်ယောက်မှာ လက်မောင်းတစ်မောင်းလို မကျေမနပ် စိတ်ချရသောဓားတွေ ရှိသလို၊ သာမန်တေးသမားတစ်ယောက်မှာ ဂီတတီးတစ်လုံးကို လက်တည်သာချိန်မှာသာ သီဆိုနိုင်သလို၊ developer တွေမှာလည်း ဒီစွမ်းအားရှိတဲ့ ကိရိယာတွေရှိတယ်။ အဲဒါတွေက တကယ့်အဖိုးအတန်ကိရိယာတွေဖြစ်ပြီး ထူးခြားစိတျကြီးစွာမှာ ရေးသားရေးလုပ်အားကို ပေးနိုင်စေတယ်။ +စားဖိုမှူးတစ်ယောက်ဟာ လက်တွေ့ ချိန်ညှိထားတဲ့ ဓားတစ်ပုံရှိတယ်၊ မူးယစ်ဖူးသံဓာတ်တေးဆရာ တစ်ယောက်ဟာ ထိတွေ့ရင် ဆိုင်းငံ့ခဲ့သလို တေးဆိုတယ်ဆိုတာသိပါသလား။ Developer တွေကလည်း ဒီလို စွမ်းအားစုံကိရိယာတွေနဲ့ရှိပြီး၊ မင်းကို အံ့သြစရာ များစွာသည်၊ အများစုက ရှင်းလင်းပြီး အခမဲ့ပါပဲ။ -အဲ့ဒီထဲမှာ AI ကို အသုံးပြု၍ ကုဒ်ရေးရာမှ ကူညီပေးတဲ့ အကူအညီပေးသူတွေ၊ Wi-Fi ရရှိသည့်နေရာဘယ်နေရာကမှ ကုဒ်ပြုလုပ်နိုင်မယ့် cloud ဖိနပ်တွေ၊ X-ray vision လို debug လုပ်နိုင်တဲ့ ကိရိယာတွေ ပါဝင်တယ်။ +ဒီတွေ့မြင်ရာတွေမဖြစ်စေနိုင်တဲ့ ဆက်ဆံရေးနက္ခတ်များအပေါ် ကူညီပေးတဲ့ AI powered coding assistants များ၊ Wi-Fi ဖြင့် ကမ္ဘာတစ်ဝှမ်းကနေ ကျွမ်းကျင်စွာ application ဆောက်နိုင်တဲ့ cloud environment များ၊ X-ray vision လို debugging ကိရိယာတွေပါဝင်ပါတယ်။ -နှလုံးသားထဲက လှုပ်ရှားဖွယ်ကောင်းတာကတော့ အဲဒီကိရိယာတွေအများစုက ဝမ်းသာစရာအမျိုးအစား "အစပိုင်းသင်ယူသူကိရိယာ" မဟုတ်ပဲ၊ Google, Netflix, သင့်အကြိုက် အင်ဒီအက်ပ်စတူဒီယိုတွေရဲ့ ပြင်ပတွင်လည်း ပါဝင် အသုံးပြုနေကြတဲ့ နောက်ဆုံးပေါ် professional-grade ကိရိယာတွေ ဖြစ်တာပါ။ မင်းလုံးဝ အရမ်းကျွမ်းကျင်ပြီးသားလိုခံစားရလိမ့်မယ်! +နှလုံးခုန်အားတိုးတာက - ဒီ tools တွေဟာ "အစပြုသူများအတွက်" ကိရိယာမျိုးဟာ မဟုတ်ပါဘူး။ Google, Netflix နဲ့ မင်းနှစ်သက်တဲ့ indie app studio များမှာ ဒီအချိန်ကိုယ်တိုင် အသုံးပြုနေတဲ့ professional-grade ကိရိယာများပါ! မင်းလည်း သူတို့ကိုအသုံးပြုပြီး မင်းရဲ႕အတိုင်း အတုယူနိုင်မှာ အထူးသဖြင့် ခံစားမိမှာပါ! ```mermaid graph TD - A["💡 သင်၏အယူအဆ"] --> B["⌨️ ကုဒ်တည်းဖြတ်ဆော့ဖ်ဝဲ
(VS Code)"] - B --> C["🌐 ဘရောက်ဇာ DevTools
(စမ်းသပ်ခြင်းနှင့်အမွှန်းဖော်ခြင်း)"] - C --> D["⚡ Command Line
(အလိုအလျောက်လုပ်ဆောင်ခြင်းနှင့်ကိရိယာများ)"] - D --> E["📚 စာရွက်စာတမ်းများ
(သင်ယူခြင်းနှင့်ကိုးကားရန်)"] - E --> F["🚀 အံ့သြဖွယ် Web App!"] + A["💡 သင့်အတွေး"] --> B["⌨️ ကုဒ်ညှိနှိုင်းသူ
(VS Code)"] + B --> C["🌐 ဘရောက်ဇာ DevTools
(စမ်းသပ်မှု & အမှားရှာဖွေမှု)"] + C --> D["⚡ အမိန့်လိုင်း
(အလိုအလျောက်နှင့်ကိရိယာများ)"] + D --> E["📚 စာရွက်အထောက်အထား
(သင်ယူမှု & ကိုးကားမှု)"] + E --> F["🚀 အံ့သြဖွယ် ဝက်ဘ်အက်ပ်!"] B -.-> G["🤖 AI အကူအညီ
(GitHub Copilot)"] - C -.-> H["📱 စက်ပစ္စည်းစမ်းသပ်ခြင်း
(တုံ့ပြန်နိုင်မှုဒီဇိုင်း)"] - D -.-> I["📦 အထုပ်စီမံခန့်ခွဲသူများ
(npm, yarn)"] + C -.-> H["📱 စက်ပစ္စည်းစမ်းသပ်မှု
(တုံ့ပြန်နိုင်မှုဒီဇိုင်း)"] + D -.-> I["📦 အထုပ်မန်နေဂျာများ
(npm, yarn)"] E -.-> J["👥 အသိုင်းအဝိုင်း
(Stack Overflow)"] style A fill:#fff59d @@ -503,345 +504,350 @@ graph TD style H fill:#f3e5f5 style I fill:#ffccbc style J fill:#e8eaf6 -``` -### ကုဒ် ဆောင်းပါးရေးတည်းဖြတ်သူများ နဲ့ IDE များ: သင့်အသစ်ရ digitaal ကျွန်မိတ်ဆွေများ +``` +### Code Editors နဲ့ IDEs: သင့်ရဲ့ ဒစ်ဂျစ်တယ် အကောင်းဆုံးသူငယ်ချင်းများ -ကုဒ် ဆောင်းပါးရေးတည်းဖြတ်ရာတွင်ပေါ်ပေါက်လာပါစို့ – ဒီနေရာတွေက သင့်အကြိုက်ဆုံး အသင်းအဖွဲ့ ဝင်နေရာတွေ ဖြစ်တော့မှာပါ! ဒီနေရာမှာ သင် digital ဖန်တီးမှုများ ကိုက်ညီစွာ ဖန်တီးတော်မူမယ်။ +Code editor များအကြောင်း ပြောကြမယ် – သူတို့ဟာ သင့်ကိုယ်ပိုင် coding အရိပ် အမြွက်နေရာ ဖြစ်နေမှာပါ! ဒီမှာ သင်အချိန်အများစုကို ဖန်တီးမှုတွေ ဖန်တီးတတ်စွမ်းဖို့ ပြုလုပ်ပါမယ်။ -အခုခေတ် အဆင့်မြင့် Editors တွေက ဆောင်းပါးရေးတည်းဖြတ်သူ အဖြစ်သာမက 24/7 ဘေးနားမှာ ထိုင်နေတဲ့ brilliant, support ပေးမယ့် coding mentor တွေလည်း ဖြစ်တယ်။ သင်ရိုက်လို့ ယူမယ်ဆိုသောအတိုင်း typing error များကို စောင့်ကြည့်ပေး၊ coding ကို ပိုမိုထူးချွန်အောင် ကူညီ၊ ဘယ်လို code တစ်ခုစီ အလုပ်လုပ်သလဲကို ကြားနားပေးတယ်။ တချို့ကတော့ မင်းရိုက်ဖြစ်မှာကို ထင်ရှားစေရန် ပျမ်းမျှထက်ပြီး အသုံးပြုမယ့် အရာကို အပြီးလိုက် ပြောပြတတ်ကြတယ်! +ဒါပေမဲ့ ဒီခေတ်မီ editor တွေကတော့ ပုံမှန်စာသားညှိချက်က မဟုတ်ပါ။ သူတို့က ၂၄ နာရီ ၇ ရက် ဦးတည်ချက် ဒစ်ဂျစ်တယ် coding mentor လို လုပ်ဆောင်နိုင်တယ်။ မင်းရိုက်ချက် မမှန်မှုတွေ အလိုအလျောက် သိလိုက်တယ်၊ လုပ်ငန်းစဉ်များတိုးတက်အောင် အကြံဉာဏ်ပြုတယ်၊ ကုဒ်အစိတ်အပိုင်းဟာ ဘာလုပ်တာလဲဆိုတာ နားလည်စေတယ်၊ ဘယ်လိုရိုက်ရန် သင့်စိတ်ထဲကို ခန့်မှန်းပေးတယ်။ -ဥပမာ အလိုအလျောက် ဖြည့်စွက်မှု (auto-completion) ကို စတင်တွေ့မြင်တဲ့အခါ အနာဂတျနေ့သားမှာ နေထိုင်နေသလိုခံစားခဲ့ရတယ်။ မင်းဟာ function တစ်ခု ခန့်မှန်းပြီး ရိုက်ရင်း editor က "ဒီ function လုပ်ဆောင်မယ်ဆိုတာ မင်းစဉ်းစားထားသလား?" လို့ ပြောပေးတယ်။ mind-reader တစ်ဦးလို ပေါ့! +Auto-completion ကို တွေ့တဲ့အချိန်မှာ ကျွန်ေတာ္ အနာဂတ်ထဲမှာ နေရင်းလိုခံစားခဲ့တယ်။ တစ်ခုကို ရိုက်တဲ့အခါ “Hey, ဒီ function လေးကို ခန့်မှန်းလိုက်ပါတယ်” ဆိုတာနဲ့ ။ -**ဘာပဲလို့ editor တွေပြောင်းလဲနေသလဲ?** +**ဒါကြောင့်ဒီ editor တွေ ဘာကြောင့်အံ့မခန်းလဲ?** -ခေတ်သစ် code editor တွေမှာ productivity တိုးတက်စေဖို့ feature များစွာ ပါဝင်တယ်: +ခေတ်သစ် editor များမှာ လုပ်ငန်းစဉ်မြှင့်တင်ဖို့ အောက်ပါတို့ ပါဝင်ပါတယ်။ -| Function | အကြောင်း | အကျိုးသက်ရောက်မှု | +| လက္ခဏာ | ဘာလုပ်သလဲ | ဘာကြောင့် အထူး? | |---------|--------------|--------------| -| **Syntax Highlighting** | code ၏ အပိုင်းများကို အရောင်ပေးသည် | ကုဒ်ဖတ်ရှုရလွယ်ကူပြီး အမှားတွေရှာဖွေချင်ရလွယ်စေသည် | -| **Auto-completion** | မင်းရိုက်နေသူအတိုင်း ကုဒ်ကို အကြံပေးသည် | coding အမြန်မြှင့်ပြီး စာလုံးမှားမှု လျော့ချပေးသည် | -| **Debugging Tools** | error တွေရှာ ဖယ်ရှားရာကူညီသည် | ဆင့်ကဲခြင်းနာရီများ လျှော့ချပေးသည် | -| **Extensions** | အထူးပြု feature များ ထည့်သွင်းနိုင်သည် | သင်၏ editor ကို နည်းပညာ အမျိုးမျိုး အတွက် ကိုက်ညီစေသည် | -| **AI Assistants** | ကုဒ်နှင့် ရှင်းလင်းချက်များ အကြံပေးသည် | သင်ယူမှုနှင့် လုပ်ငန်းဆောင်တာ ပိုမိုမြန်ဆန်စေသည် | +| **Syntax Highlighting** | ကုဒ်အပိုင်းအခြားကို အရောင်စုံဖြင့် ဖော်ပြတယ် | ကုဒ်ဖတ်ရလွယ်ကူစေပြီး မှားယွင်းချက်တွေတွေ့ရง่ายစေတယ် | +| **Auto-completion** | ရိုက်နေစဉ် ကုဒ် ကို အကြံပြုတယ် | coding လျင်မြန်စေပြီး typo လျော့နည်းစေတယ် | +| **Debugging Tools** | မတော်တဆမှားယွင်းမှုတွေ ရှာဖွေပြီး ပြင်ဆင်နိုင်စေတယ် | ပြဿနာဖြေရှင်းရာမှာ အချိန်မြင်းစေတယ် | +| **Extensions** | နည်းပညာအမျိုးမျိုးအတွက် အထူး feature များ ထည့်နိုင်တယ် | မင်း editor ကို ကိုယ်ပိုင် customize လုပ်လို့ရတယ် | +| **AI Assistants** | ကုဒ် အကြံပြုချက်နဲ့ ရှင်းပြချက် ပေးတယ် | သင်ယူမှုနဲ့ ထုတ်လုပ်မှု တွွန်းအားဖြစ်စေတယ် | -> 🎥 **ဗွီဒီယို အရင်းအမြစ်**: ဒီကိရိယာတွေ အသုံးပြုပုံ ကြည့်ရှုချင်ရင် [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) ကို ကြည့်လိုက်ပါ။ +> 🎥 **ဗွီဒီယိုအရင်းအမြစ်**: ဒီ tool တွေကို လက်တွေ့ ကြည့်ချင်ရင် [Tools of the Trade ဗီဒီယို](https://youtube.com/watch?v=69WJeXGBdxg) ကို ကြည့်ပါ။ -#### ဝက်ဘ်ဖန်တီးမှုအတွက် အကြံပြု editor များ +#### Web Development အတွက် အကြံပြု Editor များ -**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (အခမဲ့) -- ဝက်ဘ်ဖန်တီးသူများအကြား အလွန်နာမည်ကြီးသော editor -- Extension ecosystem ကောင်းမှုပြည့်ဝသည် -- terminal နှင့် Git ပါဝင်သည် -- **လိုအပ်သော extension များ**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI ဖြင့် ကုဒ်ဆွဲပြချက် - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - အချိန်နှင့်တပြေးညီ ပူးပေါင်းရေးသားမှု - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - ကုဒ်ကို အလိုအလျောက် ပရောဖောမက်ခြင်း - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - ကုဒ်လုံးပေါက်မှားရေးစစ်ခြင်း +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (အခမဲ့) +- Web developer များအကြား လူကြိုက်အများဆုံး +- Extension ecosystem ပေါ်လွင်တယ် +- built-in terminal နဲ့ Git ပေါင်းစည်းမှု +- **စျေးကွက်တွေ့ extension များ**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI ကလည်း ကူညီပေးတာ + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - အချိန်နဲ့အမျှ Share လုပ်မည် + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - ကုဒ်ကို အလိုအလျောက် ကိုယ်စားပြုခြင်း + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - စာလုံးအမှားတွေ သိမ်းဆည်းဖို့ -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (စာရင်းပေးဆောင်ရပြီး၊ ကျောင်းသားများအခမဲ့) -- တိုးတက်သော ပြန်လည်စစ်ဆေးမှုနှင့် စမ်းသပ်စက်ကိရိယာများ -- အတှကျဆင့်-ကုဒ်ပြည့်စုံစနစ် -- ဖွဲ့စည်းထားသော ရုပ်ပိုင်းများနှင့် အပြောင်းအလဲစီမံခန့်ခွဲမှု +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (ပေးဆောင်ရပြီး၊ ကျောင်းသားများအတွက် အခမဲ့) +- debugging နဲ့ စမ်းသပ်မှု ကိရိယာတိုးတက် +- အလွန်တိကျတဲ့ code completion +- built-in version control -**Cloud-Based IDEs** (စျေးနှုန်းကွဲပြားမှုများ) -- [GitHub Codespaces](https://github.com/features/codespaces) - browser ထဲတွင် VS Code အပြည့်အစုံ -- [Replit](https://replit.com/) - သင်ယူရေးနှင့် မျှဝေရေးအတွက်ကောင်းမှု -- [StackBlitz](https://stackblitz.com/) - အမြန်ဆုံး၊ full-stack ဝက်ဘ်ဖန်တီးမှု +**Cloud-Based IDEs** (စျေးကွက် လွန်ကာ) +- [GitHub Codespaces](https://github.com/features/codespaces) - browser မှာ VS Code အပြည့်အစုံ +- [Replit](https://replit.com/) - သင်ယူမှုနဲ့ ကုဒ်မျှဝေပိုင်ရှင် +- [StackBlitz](https://stackblitz.com/) - အရမ်းမြန်ဆန်တဲ့ full-stack web development -> 💡 **စတင်သုံးစွဲခြင်း အကြံပြုချက်**: Visual Studio Code နဲ့ စတင်ပါ – အခမဲ့၊ များစွာ အသုံးပြုတယ်၊ များစွာသော အဖွဲ့အစည်းများ သင်ကြားမှုနဲ့ Extension များ ဖန်တီးနေပြီဖြစ်တာကြောင့် အရမ်းအထောက်အကူဖြစ်လိမ့်မယ်။ +> 💡 **စတင်ရန် အကြံပြုချက်**: Visual Studio Code နဲ့ စလုပ်ပါ - အခမဲ့၊ စက်မှုလုပ်ငန်းမှာ ကျယ်ပြန့်အသုံးပြုတယ်။ သင်ကြားမှု နှင့် extension များ အများကြီး ရှိတယ်။ -### ဝက်ဘ် ဘရောက်ဇာ: သင်၏လျှို့ဝှက် ဖန်တီးမှုလေ့လာခန်း +### Web Browsers: သင့်ပျောက်ကွယ်နေသည့် ဖွံ့ဖြိုးတိုးတက်မှု ဓာတ်ခွဲခန်း -အိုကေ၊ စိတ်အမြန်အမြင့်တက်ဖို့ ပြင်ဆင်ထားပါ! နဲ့ ကမ့်သည် နောက်ဖက်မှာ developer tools လျှို့ဝှက်ခန်းတစ်ခုကို ဖုံးကွယ်ထားခဲ့တဲ့ ဘရောက်ဇာကို သင်အသုံးပြုနေပါသလား? အခုထိ ဖော်ထုတ်ဖော်ပြဖို့ စောင့်ဆိုင်းနေခဲ့တာပါ! +အိုကေ၊ သင်၏ဦးနှောက်ကို ပြတ်သားအံ့သြစေဖို့အဆင်သင့်ဖြစ်ပါစေ! သင်က social media သုံးပြီး ဗွီဒီယိုတွေကြည့်နေတာကို သိပြီးသားပေမယ့် ဘရောက်ဇာတွေဟာ ကပ်လှမ်းထားတဲ့ သင့်အတွက် အံ့သြဖွယ် ဖွံ့ဖြိုးတိုးတက်မှုဆိုင်ရာ အဓိကဓာတ်ခွဲခန်းတစ်ခု ကို လျှို့ဝှက်ထားတယ်ဆိုတာကို မသိခဲ့ရသလား! -ဝက်ဘ်စာမျက်နှာဘက်ကို ဖက်နှိပ်၍ "Inspect Element" ရွေးချယ်တိုင်း၊ သင့်ရှေ့တွင် developer tools များ၏ ပြတင်းပေါက်ပိတ်မခံနိုင်စိတ်ကူးတစ်ခု ပေါ်ပေါက်လာပါသည်။ ဒီကိရိယာတွေက ကျွန်ုပ်တို့ဟာ တစ်ကြိမ်မှာ ရေတွက်ကြည့်ရင် ဒေါ်လာရာနဲ့ ပဲ စျေးထားတဲ့ software တွေထက် ပို စွမ်းဆောင်ရည်မြင့်တယ်။ စားသောက်ခန်းလက်ငင်းမျှော်မှန်းမရသော စီမံခန့်ခွဲမှု ခန်းမဖြစ်ပါတယ်! -ပထမဆုံးတစ်ယောက်ယောက်က browser DevTools ကိုပြသပေးတဲ့အခါမှာ၊ ကျွန်တော် သုံးနာရီလောက် တိုးတိုးမြှောက်မြှောက်နှိပ်ကာ "သတိရပါဦး၊ ဒါကိုပါ လုပ်လို့ရမယ်လား?!" လို့ထင်ခဲ့ပါတယ်။ သင်ဟာ တကယ်တမ်းအားဖြင့် မည်သည့်ဝက်ဘ်ဆိုဒ်မဆို တိုက်ရိုက်ပြင်ဆင်နိုင်တယ်၊ အရာရာဘယ်လောက်မြန်မြန် ကွန်တိန်းလုပ်ဆောင်နေသလဲ ချက်ချင်းကြည့်ရှုနိုင်တယ်၊ သင့်ဆိုဒ်ကို အမျိုးမျိုးသောစက်ပစ္စည်းများပေါ်မှာ ဘယ်လိုကြည့်ရမလဲ စမ်းသပ်နိုင်တယ်၊ နောက်ပြီး JavaScript ကိုလည်း လုံးဝကျွမ်းကျင်သူလို မှတ်ပုံတင်ပြင်ဆင်နိုင်တယ်။ ဒါက တကယ်အံ့ဩစရာပါပဲ! +Webpage တစ်ခုမှာ right-click လုပ်ပြီး "Inspect Element" ကိုရွေးချယ်တိုင်း သင်ဟာ developer tool ပြကွက်ကို ဖွင့်လိုက်တာဖြစ်ပြီး၊ စရိတ်ကြီးတဲ့ software အချို့ထက် ပိုစွမ်းဆောင်နိုင်တဲ့ ကိရိယာများ ပါဝင်ပါတယ်။ သင့်ရဲ့ အိမ်မက်ချက်မီးဖိုချောင်ထဲမှာ professional အစားအစာချက်လုပ်ရာ ဓာတ်ခွဲခန်း ပန်နယ်လ်တစ်ခုရှိနေခဲ့တာကို တွေ့လိုက်သလိုပါပဲ! +သူတစ်ယောက်က ထိပ်တန်းအကြိမ် browser DevTools ကို ပြသခဲ့တဲ့အချိန်မှာ ကျွန်တော် ကြာချိန် သုံးနာရီ လောက် ကိုချကျခဲ့ရတယ်၊ အလှည့်ကျနှိပ်နဲ့ "စောင့်ပါဦး၊ ဒါလည်း ပြုလုပ်နိုင်တယ်လား?!" ဆိုပြီး။ သင်ဟာ တကယ်ကို အချိန်နှင့်တပြေးညီ ဘာသာရပ် website ကိုတည်းဖြတ်နိုင်၊ အရာအားလုံး ဘယ်လောက် မြန်မြန် ကောင်းကောင်း loading ဖြစ်နေသလဲ ဆိုတာကို ကြည့်ရှုနိုင်၊ သင့်ဆိုက်ကို ကွဲပြားတဲ့ စက်ပစ္စည်းတွေအပေါ် ဘယ်လို ဖော်ပြလာမှာလဲ ဆိုတာကို စစ်ဆေးနိုင်၊ နောက်ပြီး JavaScript ကို အတော်လေး ကျွမ်းကျင်စွာ debug လုပ်နိုင်တယ်။ ဒီဟာက တကယ်အစိတ်အပိုင်းတစ်ခုလုံး အံ့အားသင့်စရာပါပဲ။ -**အဲ့ဒါကြောင့် browser တွေက သင့်ရဲ့လျှို့ဝှက်လက်နက်ဖြစ်တယ်ဆိုတာ ဖြစ်တာက ဒီတော့ပါ:** +**ဒါကြောင့် ဘရောက်ဇာတွေက သင့်ရဲ့ လျှို့ဝှက်အားသာချက်ဖြစ်ပါတယ်။** -ဝက်ဘ်ဆိုဒ် သို့မဟုတ် ဝက်ဘ်အက်ပ်လိကေးရှင်းတစ်ခု ဖန်တီးတဲ့အခါမှာ၊ ကမ္ဘာလောကမှာ ဘယ်လိုပုံပေါ်တယ်၊ ဘယ်လိုသဘောထားပြုလုပ်တယ်ဆိုတာ ကြည့်ရှုဖို့လိုပါတယ်။ Browser များက သင့်လုပ်ဆောင်မှုကို ပြသပေးတာကပဲ မဟုတ်ပဲ၊ စွမ်းဆောင်ရည်၊ အသုံးပြုနိုင်မှုနှင့် ဖြစ်နိုင်တဲ့ ပြဿနာများအကြောင်း အသေးစိတ်တုံ့ပြန်ချက်များကိုပါပံ့ပိုးပေးပါတယ်။ +သင် website သို့မဟုတ် web application တစ်ခု ဖန်တီးတဲ့အခါမှာ၊ အဲဒါဘယ်လိုပုံစံရှိပြီး ဘယ်လို အပြုအမူပြုလုပ်သလဲကို သတ်မှတ်ဖို့ လိုပါတယ်။ ဘရောက်ဇာတွေဟာ သင့်ရဲ့အလုပ်ကို ပြသပေးတာအပြင် စွမ်းဆောင်ရည်၊ ဝင်ရောက်လွယ်ကူမှုနဲ့ ဖြစ်နိုင်ချေရှိတဲ့ ပြဿနာတွေကို အသေးစိတ် ပြန်လည် ထောက်ပြပေးပါတယ်။ #### Browser Developer Tools (DevTools) -ခေတ်မှီ browser များဟာ ဖန်တီးသူဆော့ဖ်ဝဲများ အပြည့်အဝပါဝင်ပါတယ်- +ခေတ္တဘရောက်ဇာတွေမှာ ဖွံ့ဖြိုးတိုးတက်မှု အစုလိုက်များပါဝင်ပါတယ်။ -| ကိရိယာ အမျိုးအစား | အလုပ်လုပ်ပုံ | သုံးစွဲမှုဥပမာ | +| Tool Category | What It Does | Example Use Case | |---------------|--------------|------------------| -| **Element Inspector** | HTML/CSS ကို အချိန်နှင့်တပြေးညီ ကြည့်ရှု ပြင်ဆင်နိုင် | တိုက်ရိုက်မကြာခဏ ပုံစံပြင်ဆင်ခြင်း | -| **Console** | အမှားစာတန်းများအား ကြည့်ရှု သပ်မတ် JavaScript ကို စမ်းသပ် | ပြဿနာများ ဖြေရှင်းခြင်းနှင့် ကုဒ် စမ်းသပ်မှု | -| **Network Monitor** | အရင်းအမြစ်ဘယ်လိုပေါက်ကြောင်း စောင့်ကြည့်ခြင်း | စွမ်းဆောင်ရည်နှင့် ယခုပြန်ဘယ်လောက်လျှော့ချရန် စမ်းသပ်ခြင်း | -| **Accessibility Checker** | ကာမရှင်ဖက်ဆိုင် ဒီဇိုင်း စစ်ဆေးခြင်း | အသုံးပြုသူအားလုံးအတွက် သင့်ဆိုဒ် အလုပ်လုပ်စေလိုချက် | -| **Device Simulator** | မျိုးစုံသော စကင်းအရွယ်အစားပေါ်မှာ ကြည့်ရှုရန် | စကင်းလှုပ်ရှားမှုဒီဇိုင်း စမ်းသပ်ခြင်း | +| **Element Inspector** | HTML/CSS ကို တိုက်ရိုက် ကြည့်ရှု၊ ပြင်ဆင်နိုင်သည် | စတိုင်လ် များကို အချိန်နဲ့တပြေးညီ ပြင်ဆင်ရန် | +| **Console** | အမှားစာများကြည့်ရှု၊ JavaScript စမ်းသပ် | ပြဿနာရှာဖွေမှုနှင့် ကုဒ် စမ်းသပ်ခြင်း | +| **Network Monitor** | အရင်းအမြစ်များ ဘယ်လို ပြေးနေသလဲ စစ်ဆေး | စွမ်းဆောင်ရည်နှင့် loading အချိန်များကို အနိမ့်ကျစေခြင်း | +| **Accessibility Checker** | ဝင်ရောက်အသုံးပြုနိုင်မှု စစ်ဆေး | သင့်ဆိုက်ကို အသုံးပြုသူအားလုံးအတွက် အဆင်ပြေစေခြင်း | +| **Device Simulator** | ကွဲပြားသော အရွယ်အစားများအပေါ် ကြိုတင်ကြည့်ရှု | အမျိုးမျိုးစက်ပစ္စည်းတွေအပေါ် မျက်နှာပြင်လိုက် တုံ့ပြန်မှု စမ်းသပ်ခြင်း | -#### ဖန်တီးမှုအတွက် အကြံပြု browser များ +#### ဖွံ့ဖြိုးတိုးတက်ရေးအတွက် အကြံပြုဘရောက်ဇာများ -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - စံချိန်စံညွှန်း DevTools နှင့် အသေးစိတ်စာရွက်စာတမ်းများ -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - CSS Grid နှင့် အသုံးပြုနိုင်မှုကိရိယာ အထူးကောင်းမွန် -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Chromium အခြေခံပြီး Microsoft ၏ဖန်တီးသူရင်းမြစ်များပါရှိ +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - စက်မှုလုပ်ငန်းစံချိန် DevTools နှင့် ကျယ်ပြန့်သော မှတ်တမ်း +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - CSS Grid နှင့် ဝင်ရောက်လွယ်သောကိရိယာများ အထူးကောင်းမွန် +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Chromium အခြေခံ ထုတ်လုပ်ထားပြီး Microsoft ၏ ဖွံ့ဖြိုးရေးအရင်းအမြစ် -> ⚠️ **အသိပေး စမ်းသပ်မှု အကြံပြုချက်**: မိမိ ဝက်ဘ်ဆိုဒ်များကို browser အမျိုးမျိုးမှာ စမ်းသပ်ဖို့ အမြဲတမ်းလိုသည်! Chrome မှာ ပြီးပြည့်စုံတဲ့အရာတွေဟာ Safari ဒါမှမဟုတ် Firefox မှာ ကွာခြား ကြည့်ပါလိမ့်မယ်။ အတန်းစား ဖန်တီးသူများက major browser ကြီးများအားလုံးမှာ စမ်းသပ်ပြီး အသုံးပြုသူတွေ စိတ်ကျေနပ်မှုကို သေချာဆောင်ရွက်ကြပါတယ်။ +> ⚠️ **အရေးကြီး စမ်းသပ်ခြင်းအကြံပြုချက်**: တစ်ခါတရံ အမျိုးမျိုးသော ဘရောက်ဇာများတွင် သင့်ဆိုက်များအား စမ်းသပ်ပါ။ Chrome မှာ အကောင်းဆုံး လုပ်ဆောင်ရင် Safari သို့မဟုတ် Firefox မှာ မတူညီနိုင်ပါဘူး။ အတွေ့အကြုံတူညီမှုအတွက် ပရော်ဖက်ရှင်နယ် ဖွံ့ဖြိုးရေးသူများက အကြီးစား ဘရောက်ဇာအားလုံး သုံးစွဲကာ စမ်းသပ်ကြပါသည်။ -### Command Line Tools: Developer Superpowers များသို့ ရောက်ရှိဖို့ သင့်လမ်းဝင် +### Command Line Tools: ဖွံ့ဖြိုးရေးသူ အင်အားအတွက် ဗဟို၀င်ခွင့် -ကောင်းပြီ၊ Command line ကို ပိုမိုရင်းနှီးစွာ သတိထားလေ့လာဖို့၊ ရိုးသားစွာ ပြောရရင်၊ ပထမဆုံး Command line ကို တွေ့သမျှပြောရရင် - အဲဒါက မျက်စိထဲ တောက်ပသောစာသားလိပ်ရူပါသော အနက်ရောင် စာမျက်နှာတစ်မျက်နဲ့ တူတဲ့ကြောက်စရာတစ်ခုလို ပြရတယ်။ ကျွန်တော် "မဖြစ်ပါ၊ ကောင်းကောင်းလူမဟုတ်ပါဘူး! 1980s hacker ရုပ်ရှင်ကနေထွက်လာတဲ့ အရာတစ်ခုလိုတယ်!" ဆိုပြီး စိတ်ချန်နေတာပါ။ 😅 +အိုကေ၊ Command line အကြောင်း အပြစ်မဲ့ဖြစ်အောင် ရိုးသားစွာ ပြောပြချင်ပါတယ်။ လိပ်ပြာပြတ်တဲ့ အနက်ရောင် မျက်နှာပြင်တစ်ခုကို ကွယ်မျှောင်စွာ နေမြဲနေတဲ့ စာသားတွေကို ပထမဆုံးမြင်တော့ "မဖြစ်နိုင်ပါဘူး၊ ကျွန်တော် ထင်တာမဟုတ်ဘူး! ဒီဟာက ၁၉၈၀ အချိန်က hacker ဇာတ်ကားမှ ဆွဲကျတဲ့ ဂိမ်းတစ်ခုပဲ၊ ကျွန်တော် ဒီအတွက် အလွန်မကျွမ်းကျင်ပါဘူး!" ဆိုပြီး ယူဆခဲ့ပါတယ် 😅 -ဒါပေမယ့်၊ တချို့သူငယ်ချင်းတွေက ပြောခဲ့ရင် အခုမှာ သင့်ကို ပြောချင်တာကတော့ အဲ့ဒါက ကြောက်စရာမဟုတ်ဘူး – တကယ်တော့ကွန်ပျူတာနဲ့ ပြောဆိုတာလိုတယ်။ အစားအသောက်မှာ ဓာတ်ပုံနဲ့ မီနူးပါတဲ့ fancy app မှာ အော်ဒါပေးတာနဲ့ (နူးညံ့ပြေပြစ်) သင်ကြိုက်တဲ့အရာကောင်းတစ်ခုကို သိတဲ့ မီးဖိုချောင်မှာတစ်ကိုယ်တော်ဝင်ပြီး "အံ့ဩစရာ တစ်ခု လုပ်ပေးပါ" လို့ ပြောတဲ့ကွာခြားချက်အတိုင်းပါ။ +ဒါပေမယ့် အဲ့ဒီအချိန်မှာ တစ်ယောက်က ပြောပေးခဲ့ဖူးမယ့် အရာနဲ့ ယခုလက်ရှိ သင့်အား ပြောပြချင်တာကတော့ command line ဟာ မကြောက်စရာဘူး၊ ရိုးရိုး သင့်ကွန်ပျူတာနဲ့ ဒိုင်ရက်တာ ဆက်ဆံနေတာလိုပါပဲ။ fancy app တစ်ခုကနေ အစားအစာမှာမှာဖို့ (ပုံနှင့် မီနူးပါသည့်) နဲ့သုံးရာ အနေနဲ့ လက်တွေ့ လူကြိုက်စားတဲ့ စားသောက်ဆိုင်တစ်ခုမှာလူကြိုက်စားတဲ့ မဟာချက်ပေးသူက ထိပ်တန်း ထမင်းပြန်ကြားရုံနဲ့ စားစရာ ပြင်ပေးလို့ရတယ်ဆိုတာကြားကြည့်ပါ။ -Command line က အဲ့ဒီ့အရာကို Developer တွေကိုအံ့ဖွယ်ဆန်းသစ်ချက်တွေ လုံးဝမီးမောင်းကစားသလို ဖြစ်စေပါတယ်။ တချို့ စကားလုံးများကို ရိုက်ထည့်ပြီး (အိုကေ၊ အဲ့ဒါက command တွေပဲ ဖြစ်ပေမယ့် စိတ်ကူးယဉ်ဆန်စေပါတယ်) enter နှိပ်လိုက်တာနဲ့ BOOM – လုံးဝပရောဂျက်ဖွဲ့စည်းမှုတွေ ဖန်တီးသွားတယ်၊ ကမ္ဘာအနှံ့က စွမ်းအားကြီးတဲ့ကိရိယာတွေကို တပ်ဆင်လိုက်တယ်၊ သို့မဟုတ် သင့် app ကို အင်တာနက်ပေါ် မီလျံပေါင်းကြီးတွေ ကြည့်ရှုနိုင်ဖို့ ထုတ်ဝေသွားတယ်။ ဒီစွမ်းအားကို ပထမဆုံးခံစားလိုက်ရင်၊ အရမ်းလေးစားဖို့ဖြစ်ပါတယ်! +Command line ကတော့ ဖွံ့ဖြိုးရေးသူတွေ အားလုံးကို မဟာအင်ဂျင်နီယာဖြစ်သလိုခံစားစေတဲ့ နေရာဖြစ်ပါတယ်။ စကားလုံး၊ ရိုးရှင်းတဲ့ ပန်ကတ်တွေကို ရိုက်ထည့်ပြီး Enter ကို နှိပ်လိုက်လျှင် သင့်ရဲ့ project အလုပ်အပေါ်တွင် စုစည်းပြင်ဆင်ခြင်း၊ အပြည်ပြည်ဆိုင်ရာ စွမ်းအားရှိသော ကိရိယာတွေ သွင်းယူခြင်း သို့မဟုတ် သင့် app ကို အင်တာနက်ပေါ်သို့ တင်ပြနိုင်ပြီး သန်းပေါင်းများစွာ ဖြစ်နိုင်ပါသည်။ အခုတစ်ကြိမ် အဲ့ဒီ အင်အားကို ခံစားကြည့်လိုက်ရင် ပြီးတော့ လုံးဝ မလွဲပြောင်းနိုင်တော့ပါဘူး! -**Command line ကို ဘာကြောင့် သင်၏သဘောကျဆုံးသော ကိရိယာဖြစ်လာမည်နည်း** +**Command line ကို သင့်အကြိုက်ဆုံး ကိရိယာဖြစ်အောင် လုပ်ကြောင်းမှာ ဆွေးနွေးချက်များ** -ဂရပ်ဖစ်အင်တာဖေ့စ်များဟာ အများပြည်သူအတွက်ကောင်းခဲတယ်။ ဒါပေမယ့် command line က အလိုအလျောက်လုပ်သက်၊ တိကျမှု၊ နာရီအရှိန်မှာထူးခြားပါတယ်။ ဖန်တီးမှုကိရိယာအများစုက command line မှာ သည်းခံနေရပြီး၊ အဲဒီကို တည့်တည့်အသုံးပြုပြီး သင် ရလဒ်တွေကို ထူးခြားစွာ တိုးတက်မှုရှိစေပါတယ်။ +graphical interface တွေက ကောင်းတာ များပေမယ့် command line က automation, မှန်ကန်မှုပေးခြင်း၊ အရှိန်အဟုန်တို့မှာ ထူးခြားပါတယ်။ ဖွံ့ဖြိုးရေးကိရိယာ များအများစု command line interface ကနေ အဓိက ထိန်းချုပ်တဲ့အတွက် ထိရောက်စွာ သုံးနိုင်ဖို့ သင်ယူဖို့ လိုပါတယ်။ ```bash -# အဆင့် ၁: ပရောဂျက်ဖိုဒါကို ဖန်တီးပြီး သွားရောက်ရန် +# အဆင့် ၁: ပရောဂျက်ဖိုင်တွဲကိုဖန်တီးပြီး သွားရောက်ပါ။ mkdir my-awesome-website cd my-awesome-website ``` -**ဒီကုဒ်က ဘာလုပ်တယ်ဆိုတာ:** -- **"my-awesome-website"** ဆိုတဲ့ directory အသစ်တစ်ခု ဖန်တီးသည် -- အသစ်ဖန်တီးထားတဲ့ directory ထဲကို ဝင်ရောက်ကုဒ်ရေးစမည် +**ဒီကုဒ်က ဘာလုပ်နေလဲဆိုတာ** +- **my-awesome-website** ဆိုတဲ့ directory အသစ်ကို ဖန်တီးခြင်း +- အသစ်ဖန်တီးပြီး directory ထဲသို့ သွားခြင်း ```bash -# အဆင့် ၂: package.json ဖြင့် ပရောဂျက်စတင်ဖွင့်ပါ +# အဆင့် ၂: package.json ဖြင့် ပရောဂျက်စတင်တပ်ဆင်ပါ npm init -y -# ခေတ်သစ် တိုးတက်ဖွံ့ဖြိုးရေးကိရိယာများ ထည့်သွင်းတပ်ဆင်ပါ +# ခေတ်သစ် ဖွံ့ဖြိုးရေး ကိရိယာများကို 설치 ပြုလုပ်ပါ npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**တစ်ဆင့်ချင်း အဖြစ်ဖြစ်ပုံများ:** -- `npm init -y` နဲ့ Node.js ပရောဂျက်အသစ်ကို မူလဖွဲ့စည်းမှုဖြင့် စတင်သည် -- အဆင့်မြင့်အဆောက်အအုံ Vite ကို တပ်ဆင်သည်၊ ဖွံ့ဖြိုးမှုနှင့် ထုတ်လုပ်မှုအတွက် အကောင်းဆုံးကိရိယာ -- Prettier ကို ကုဒ်အလိုအလျော့ ဖော်မက်ဖို့၊ ESLint ကို ကုဒ်အရည်အသွေး စစ်ဆေးရန် ထည့်သွင်းသည် -- `--save-dev` flag နဲ့ ဤကိရိယာများကို ဖန်တီးသူအဆင့် မဟုတ်သော dependencies အဖြစ် မှတ်သားသည် +**အဆင့်ဆင့်မှာ ဒီလိုဖြစ်နေ** +- `npm init -y` ဖြင့် Node.js project အသစ်ကို default ဖြင့် စတင်တည်ဆောက်ခြင်း +- Vite ကို အမြန် ဖွံ့ဖြိုးမှုနှင့် တည်ဆောက်မှုအတွက် အဆင့်မြင့် build tool အဖြစ် ထည့်သွင်းခြင်း +- Prettier ကို automatic code formatting အတွက်၊ ESLint ကို code အရည်အသွေး စစ်ဆေးမှုအတွက် ထည့်သွင်းခြင်း +- `--save-dev` flag က development dependency လို့ သတ်မှတ်ခြင်း ```bash -# အဆင့် ၃: ပရောဂျက်ဖွဲ့စည်းမှုနှင့်ဖိုင်များ ဖန်တီးပါ +# အဆင့် ၃: ပရောဂျက် ဖွဲ့စည်းမှုနှင့် ဖိုင်များ ဖန်တီးပါ mkdir src assets echo 'My Site

Hello World

' > index.html -# ဖွံ့ဖြိုးတိုးတက်မှုဆာဗာကို စတင်ပါ +# ဖွံ့ဖြိုးရေး ဆာဗာကို စတင်ပါ npx vite ``` -**အထက်မှာ ကျွန်တော်တို့:** -- မူလကုဒ်နှင့် ပစ္စည်းများအတွက် အထူးဖိုင်ပေါက်များ ဖန်တီး၍ ပရောဂျက် စနစ်တကျ စီစဉ်သည်။ -- မှန်ကန်သော စာရွက်စနစ်အတိုင်း မူလ HTML ဖိုင် တစ်ခု ဖန်တီးသည် -- Vite ဖွံ့ဖြိုးရေးဆာဗာကို စတင်ပြီး Live Reloading နှင့် Hot Module Replacement ကိုအသုံးပြုသည် +**အထက်မှာ ကျွန်တော်တို့က** +- Source code နဲ့ assets အတွက် အဖိုင်အုပ်စု သီးခြားဖန်တီးပြီး စီမံခြင်း +- Document structure ထည့်သွင်းထားတဲ့ အခြေခံ HTML ဖိုင် ထုတ်လုပ်ခြင်း +- Vite development server ရဲ့ live reloading နှင့် hot module replacement စတင်တင်ဆက်ခြင်း -#### ဝက်ဘ်ဖန်တီးမှုအတွက် မဖြစ်မနေနဲ့ Command Line ကိရိယာများ +#### ဝက်ဘ်ဖွံ့ဖြိုးရေးအတွက် အမှုခံ command line ကိရိယာများ -| ကိရိယာ | ရည်ရွယ်ချက် | ဘာကြောင့်လိုသလဲ | +| Tool | Purpose | Why You Need It | |------|---------|-----------------| -| **[Git](https://git-scm.com/)** | ဗားရှင်းထိန်းချုပ်မှု | ပြောင်းလဲမှုများ စောကြည့်နည်း၊ အဖွဲ့လိုက်လုပ်ဆောင်ခြင်း၊ အလုပ်စာရွက်များ ကူးယူခြင်း | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime နှင့် package စီမံခန့်ခွဲမှု | Browser ပြင်ပတွင် JavaScript ဆားပင်ဘက် အသုံးပြုခြင်း၊ နောက်ဆုံးပေါ် ဖန်တီးမှုကိရိယာများ ထည့်သွင်းခြင်း | -| **[Vite](https://vitejs.dev/)** | Build ကိရိယာနှင့် dev ဆာဗာ | အလွန်မြန်ဆန်သော ဖွံ့ဖြိုးမှု၊ Hot Module Replacement ပါဝင်သည် | -| **[ESLint](https://eslint.org/)** | ကုဒ်အရည်အသွေးစစ်ဆေးခြင်း | JavaScript မှာ ပြဿနာများကိုကိုယ်တိုင် ရှာဖွေပြင်ဆင်ပါသည် | -| **[Prettier](https://prettier.io/)** | ကုဒ်ဖော်မတ်ရေး | ကုဒ်ကို အမြဲတမ်း တိကျချောမွေ့ စေပြီး ဖတ်ရှုရလွယ်ကူအောင်ထားသည် | +| **[Git](https://git-scm.com/)** | Version control | ပြောင်းလဲမှုများကို ထိန်းသိမ်း၊ ပူးပေါင်းလုပ်ကိုင်ခြင်း၊ မိတ္တူထုတ်ခြင်း | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime & package management | Browser အပြင် JavaScript တပြင် run ရန်၊ ဖွံ့ဖြိုးရေးကိရိယာ အသစ်ထည့်သွင်းရန် | +| **[Vite](https://vitejs.dev/)** | Build tool & dev server | အမြန်ဆုံးဖွံ့ဖြိုးရေးနှင့် hot module replacement | +| **[ESLint](https://eslint.org/)** | Code quality | JavaScript မှာ ချို့ယွင်းချက်များ မ automática ရှာဖြေချေခြင်း | +| **[Prettier](https://prettier.io/)** | Code formatting | ကုဒ်ကို အညီညွတ်ပြီး ဖတ်ရှုရ လွယ်ကူစေခြင်း | -#### စနစ်ပလက်ဖောင်းအလိုက် ရွေးချယ်မှုများ +#### Platform အလိုက် ရွေးချယ်စရာများ **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - ခေတ်မှီ၊ အင်္ဂါရပ်ပြည့်စုံဆုံး terminal -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - စွမ်းအားပြင်းသော scripting ပတ်ဝန်းကျင် -- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - ရိုးရိုး Windows command line +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - ခေတ်မီ၊ လုပ်ဆောင်နိုင်စွမ်းများစွာပါဝင်သည့် terminal +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - တိုက်ရိုက် စာသားရေးခြင်းနယ်ပယ် +- **[Command Prompt](https://learn.microsoft.com/windows-server/administration/windows-commands/windows-commands)** 💻 - ရိုးရာ Windows command line **macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - စနစ်တစ်ခုအတွင်း ပါရှိသော terminal app -- **[iTerm2](https://iterm2.com/)** - ထူးခြားစွာ တိုးတက်တင်မြှောက်ထားသော terminal +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - အတွင်းရေး သက်ဆိုင်ရာ terminal +- **[iTerm2](https://iterm2.com/)** - အဆင့်မြင့် features ပါဝင်သည့် terminal ကိုတိုးချဲ့ထားသည် **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - ရိုးရာ Linux shell +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Linux standard shell - **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - အဆင့်မြင့် terminal emulator -> 💻 = စနစ်တပ်ဆင်ပြီးသော +> 💻 = operating system မှ ရောနှောပြီး ပါရှိပြီးသား -> 🎯 **သင်ယူမှုလမ်းညွှန်**: အခြေခံ command များဖြစ်တဲ့ `cd` (directory ပြောင်းရန်), `ls` ဒါမှမဟုတ် `dir` (ဖိုင်စာရင်းဖော်ရန်), `mkdir` (ဖိုင်ပေါက်ဖန်တီးရန်) ကို စတင်လေ့ကျင့်ပါ။ `npm install`, `git status` နှင့် `code .` (အဲဒီနေရာ VS Code ဖြင့်ဖွင့်ရန်) စတဲ့ နောက်ဆုံးပေါ် workflow command များကိုလည်း အသုံးပြုရန် လေ့လာပါ။ နောက်ပိုင်းမှာ ပိုမိုကျွမ်းကျင်လာချိန်မှာ advanced command များနှင့် automation နည်းလမ်းများကို သဘာဝတရားလို တစ်ဆင့်တိုးလေ့လာပါလိမ့်မယ်။ +> 🎯 **သင်ယူရန် လမ်းညွှန်ချက်**: `cd` (directory ပြောင်းခြင်း), `ls` သို့မဟုတ် `dir` (ဖိုင်အမျိုးအစားများ ကြည့်ရှုခြင်း), `mkdir` (folder ဖန်တီးခြင်း) ကဲ့သို့သော အခြေခံ command များမှ စပါ။ နောက်ပိုင်းမှာ `npm install`, `git status` နှင့် `code .` (VS Code ဖြင့် လက်ရှိ directory ကိုဖွင့်ရန်) ကဲ့သို့မဟုတ် အသုံးများသော workflow command များကို လေ့ကျင့်ပါ။ သင်ပိုမိုအားပြင်းလာသည့်အခါ advanced command များနှင့် automation နည်းလမ်းများကို ကိုယ်တိုင် ရယူလေ့လာကြပါလိမ့်မည်။ -###စာရွက်စာတမ်းများ: သင်၏ အမြဲရရှိနိုင်သော သင်ယူမှုလမ်းညွှန် +### အတွင်းရေးစာတမ်းများ: သင်တန်းဆရာ ၂၄/၇ အမြဲရရှိနိုင်သော ဆရာ -အိုကေ၊ စိတ်တိုင်းကျ beginner ဖြစ်နေတဲ့ မိမိကိုယ်ကိုပိုမိုသက်သာစေဖို့ လျှို့ဝှက်ချက်တစ်ခုမျှဝေရမယ်။ အတွေ့အကြုံရှိတဲ့ Developer အများစုဟာ အချိန်အများစုကို Documentation ဖတ်ခြင်းဆီမှာဖြတ်သိမ်းကြတယ်။ ဒါဟာ သူတို့ဘာလုပ်နေလဲ မသိတာမဟုတ်ပါဘူး – အတက်ပညာကြီးမှု လက္ခဏာတစ်ခုပါပဲ! +အိုကေ၊ စတင်သည့်သူတစ်ယောက်အနေဖြင့် ဆုံးမကြည့်ချင်တဲ့ ကန့်ကွက်ချက်လေးတစ်ခုကို မျှဝေချင်ပါတယ် - အတွေ့အကြုံရှိ ဖွံ့ဖြိုးရေးသူများတောင် စာတမ်းတွေကို ဖတ်ရှုရန် အချိန် ပေးသည့် အပိုင်းကြီးရှိပါတယ်။ ဒါဟာ သင် မသိသလောက်ကြောင်းမဟုတ်ဘဲ၊ အလွန်ပညာရှင်လက္ခဏာပါပဲ! -Documentation ကို ကမ္ဘာ့အကြင်နာဆုံး၊ ပညာရှင်အကောင်းဆုံး ဆရာတွေကို 24/7 ရနိုင်သလို စဉ်ဆက်မပြတ်မှာနေရတဲ့အတိုင်း ယူဆကြပါ။ မနက် ၂ နာရီမှာ ပြဿနာတစ်ခုတွင်ကြုံရလျှင် Documentation က လှပတဲ့ virtual ဖမ်းခေါင်းနဲ့ သင့်အတွက်လိုအပ်တဲ့ ဖြေဆိုချက်ကိုပေးပါတယ်။ အသစ်ထွက်သန့်စင်သည့် လုပ်ဆောင်ချက်တစ်ခုလေ့လာချင်လျှင် Documentation ကို သင့်ပြီးခဲ့တဲ့အတိုင်း အဆင့်ဆင့် ဥပမာတွေနဲ့ ရှင်းပြပေးပါတယ်။ ဘာဖြစ်လို့ အဲ့ဒီအခြေအနေ လုပ်ဆောင်နေတာလဲဆိုတာ နားလည်ဖို့ ကြိုးစားရင် - ဖြေရှင်းပုံကတော့ documentation ဖြစ်ပါတယ်။ +စာတမ်းတွေက တကယ်တော့ ၂၄ နာရီ ၇ ရက် မပြတ် ရရှိနိုင်တဲ့ ပညာရှင်တွေ ချစ်မောလျက်ရှိတဲ့ အပြည့်အစုံ သိပ္ပံပညာရှင်တွေလို ဖြစ်ပါတယ်။ ညနေ ၂ နာရီမှာ ပြဿနာတက်ရင်၊ စာတမ်းတွေက ချစ်စရာ virtual ဖမ်းခနဲနဲ့ လိုအပ်တဲ့ ဖြေရှင်းချက်ကို တိတိကျကျပေးပါတယ်။ မကြာခဏ လူတွေ ပြောဆိုနေတဲ့ features အသစ်တစ်ခုကို သင် လေ့လာချင်တဲ့အခါမှာ၊ စာတမ်းက နည်းလမ်းတစ်ဆင့်ဆင့်၊ ဥပမာနဲ့ အတူ ပံ့ပိုးပေးပါတယ်။ ဘာဖြစ်လို့ အဲ့ဒီအတိုင်းအလုပ်လုပ်တာလဲဆိုတာ သိချင်ရင်လည်း၊ စာတမ်းက နားလည်စေဖို့ ပြင်ဆင်ထားတာပါ။ -ကျွန်ုပ် ကိုယ်တိုင်အတွေ့အကြုံလည်း ပြောင်းလဲမှုကြီးဖြစ်ခဲ့ပါတယ်။ ဝက်ဘ်ဖန်တီးမှုကမ္ဘာလောကက အလွန်မြန်မြန်တိုးတက်နေပြီး၊ တစိတ်တပိုင်းအားလုံးကို မှတ်မိထားတာ မရှိပါဘူး။ Senior developer ၁၅ နှစ်ကျော်အတွေ့အကြုံရှိသူတွေကိုလည်း အခြေခံ syntax ကို အချိန်ပေးရှာဖွေနေကြတာတွေ မြင်ခဲ့တယ်။ ဒါက အရမ်းနောက်ကျတာရော မဟုတ်ပါဘူး သေချာပါပြီ။ မှတ်ဉာဏ်ကောင်းတာကို မဟုတ်ပါဘူး၊ အဆင်ပြေတဲ့ ဖြေရှင်းချက်တွေကို ပြီးမြောက်မြန်ဆန်စွာ ရှာဖွေချင်တာပါ။ +ဒါက ကျွန်တော် အမြဲပြောင်းလဲနေတဲ့ web စီးပွားရေးကမ္ဘာကို ဖြတ်သန်းကြည့်ရင်း၊ senior developers ၁၅ နှစ်ကျော် အတွေ့အကြုံရှိသူတွေလည်း basic syntax ကို ရေးရာမှတ်တမ်း ဖတ်ရှုကြတာကို ကြည့်ပါတယ်။ မာနမဆုံးတာမဟုတ်ဘူး၊ တော်လှတဲ့ သတိပြုမှုပါ။ perfect memory မလိုဘဲ၊ အကြောင်းအရာကို လျင်မြန်စွာ ရှာဖွေရန် နေရာကို သိပြီး၊ သိရှိထားတာကို သုံးနိုင်ခြင်းပဲဖြစ်သည်။ -**အမှန်တကယ် စွမ်းအားတူးဖော်ရာမှာ:** +**အမှန်တကယ် စေ့စပ်မှုဖြစ်ပေါ်ရာ:** -Professional developer တွေ Documentation ကို အချိန်အတော်များစွာ ဖတ်ကြတယ် - ဘာလုပ်နေလည်း မသိသူတွေမဟုတ်ပေမယ့်၊ ဝက်ဘ်ဖန်တီးမှုလောက ပြောင်းလဲနေတဲ့အတွက် အဆက်မပြတ် သင်ယူလိုနေရတာပါ။ ကောင်းမွန်တဲ့ Documentation က သင်ကို ဘယ်လိုအသုံးပြုရမယ်ဆိုတာသာမက ဘာကြောင့်၊ ဘယ်အခါအသုံးပြုရမလဲ ဆိုတာကိုလည်း နားဆင်ရန် ကူညီပေးပါတယ်။ +ပရော်ဖက်ရှင်နယ် ဖွံ့ဖြိုးရေးသူတွေဟာ စာတမ်းဖတ်မှုမှာ အချိန်အများတစ်စိတ်တစ်ပိုင်း ပေးပါတယ်။ သူတို့ မသိတော့လို့ မဟုတ်ပါဘူး၊ ဒါပေမယ့် web ဖွံ့ဖြိုးရေးကမ္ဘာ ဘယ်လောက်မြန်မြန်ပြောင်းလဲနေတာဆိုတာ ကြည့်ပြီး နေရာတကျ သင်ယူဖို့လိုပါတယ်။ ကောင်းမွန်တဲ့ စာတမ်းက သင် ကိုယ်တိုင် ဘာကြောင့် သုံးရမလဲ၊ ဘယ်အချိန် သုံးရမလဲ သိရှိစေပါတယ်။ -#### အရေးကြီး Documentation ရင်းမြစ်များ +#### အရေးကြီး စာတမ်း အရင်းအမြစ်များ **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- ဝက်ဘ်နည်းပညာ Documentation ၏ ရွှေစံချိန်စံညွှန်း -- HTML၊ CSS၊ JavaScript အတွက် ကျယ်ပြန့်သော လမ်းညွှန်များ -- Browser compatibility အချက်အလက်များ ပါဝင်သည် -- လက်တွေ့ ဥပမာများနှင့် interactive demo များ ပါရှိသည် +- ဝက်ဘ် နည်းပညာ စာတမ်းမှာ ရွှေရောင်စံချိန် +- HTML, CSS, JavaScript အတွက် လမ်းညွှန်ရန် များ +- ဘရောက်ဇာ အညီမသေးမလှည့် အချက်အလက် အပါအဝင် +- လက်တွေ့ ဥပမာများနှင့် စမ်းသပ်နိုင်သော ဆော့ဖ်ဝဲလ်များပါပါသည် **[Web.dev](https://web.dev)** (Google မှ) -- ခေတ်မှီ ဝက်ဘ်ဖန်တီးမှု လုပ်ထုံးလုပ်နည်းများ -- စွမ်းဆောင်ရည် တိုးတက်အောင်လမ်းညွှန်ချက်များ -- စားေပွဲဖက်နှင့် ပါဝင်မှု ဖန်တီးမှုစည်းမျဉ်းများ -- အိမ်တတ်သော စမ်းသပ်မှုများ +- ခေတ်မှီ web ဖွံ့ဖြိုးရေး အကောင်းဆုံး လမ်းညွှန်မှုများ +- စွမ်းဆောင်ရည် တိုးတက်ရေး လမ်းညွှန်ချက်များ +- ဝင်ရောက်လွယ်ကူမှုနှင့် တဝိုက်ဒီဇိုင်း အခြေခံချက်များ +- အချက်ပေးလုပ်ငန်းများဖြင့် အခြေခံသင်ခန်းစာ **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Edge browser အတွက် ဖန်တီးမှုအရင်းအမြစ်များ +- Edge browser ဖွံ့ဖြိုးရေး အရင်းအမြစ်များ - Progressive Web App လမ်းညွှန်ချက်များ -- Cross-platform ဖန်တီးမှု သဘောတူညီချက်များ +- Cross-platform ဖွံ့ဖြိုးရေး တက်ကြွမှုများ **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- သီးသန့်သင်ယူမှု သင်တန်းများ -- စက်မှုလုပ်ငန်းပညာရှင်များမှ ဗီဒီယိုသင့်ဘွဲ့များ -- လက်တွေ့ကုဒ်ရေးမှု လေ့ကျင့်ခန်းများ +- အစဉ်လိုက် သင်ယူသင်ကြားမှု လမ်းညွှန်ချက်များ +- ထွန်းကားသော ဗွီဒီယို သင်ခန်းစာများ +- လက်တွေ့ ကုဒ်ရေးမှု လေ့ကျင့်ခန်းများ -> 📚 **လေ့လာမှုနည်းဗျူဟာ**: Documentation ကို မှတ်မိရန် မကြိုးစားပါနှင့် - သာမန်အားဖြင့် သင်နည်းတူလမ်းညွှန်များအား စနစ်တကျ သွားရေးနိုင်ရန် သင်ယူပါ။ အမြဲအသုံးများသော သတင်းအချက်အလက်များကို Bookmark လုပ်ပြီး ရှာဖွေမှုအင်္ဂါရပ်များကူညီမှုပြုရာ သာမာန်သုံးပါ။ +> 📚 **လေ့လာမှု နည်းဗျူဟာ**: စာတမ်းကို မှတ်မိဖို့ မကြိုးစားပါနဲ့၊ အစား တိကျစွာ ရှာဖွေ သုံးနိုင်ရန် လေ့လာပါ။ အသုံးပြုမှုပြည့်ဝသည့် လမ်းညွှန်ချက်များကို bookmark လုပ်ထားပြီး အချက်အလက်ကို လျင်မြန်စွာ ရှာဖွေရန် ကူညီပေးသည်။ -### 🔧 **Tool Mastery Check: သင်နှစ်သက်တဲ့ Tool ဘာလဲ?** +### 🔧 **Tool Mastery စစ်ဆေးခြင်း: ဘာတွေ သင့်ကို မဆိုးပါ?** -**အချိန်ယူပြီး အောက်ပါတို့ရေတွက်ကြည့်ပါ:** -- ဘယ် tool ကို မျှော်လင့်စရာအရ ပထမဆုံးစမ်းသပ်လိုပါသလဲ? (မှားတဲ့အဖြေ မရှိပါ) -- Command line ဟာ ကျွန်တော်/ကျွန်မကို ကြောက်ရွံ့စေတယ်? ဒါမှမဟုတ် စူးစမ်းလိုက်ချင်ပါသလား? -- Browser DevTools ကို သင်ကြိုက်တဲ့ ဝက်ဘ်ဆိုဒ်များနောက်ကွယ် ကြည့်ရှုဖို့ စိတ်ဝင်စားလား? +**အချိန်ယူပြီး စဉ်းစားကြည့်ပါ** +- အရင်ဆုံး စမ်းသပ်ချင်တဲ့ ကိရိယာ ဘယ်ဟာလဲ? (မှားယွင်းမှု မရှိပါ) +- Command line က မကြောက်နေရ ်သေးလား၊ သဘောက်လိုတယ်လား? +- သင့်ရဲ့ အကြိုက်ဆုံး website ထဲက မျက်နှာပြင်ရှေ့မှာ browser DevTools ကို သုံးသပ်ကြည့်နိုင်မလား? ```mermaid -pie title "တီထွင်သူအချိန်ကိရိယာများနှင့်ဖြုန်းပွားမှု" - "ကုဒ်အယ်ဒီတာ" : 40 - "ဘရောက်ဆာစမ်းသပ်ခြင်း" : 25 - "ကမမ်ဒ်လိုင်း" : 15 +pie title "Developer Time Spent With Tools" + "ကုဒ်တာနယ်" : 40 + "ဘရေါဇာစမ်းသပ်ခြင်း" : 25 + "ကမန့်လိုင်း" : 15 "စာရွက်စာတမ်းဖတ်ခြင်း" : 15 - "ဒက်ဘတ်" : 5 + "ဒစ်ဘักခြင်း" : 5 ``` -> **ပျော်စရာ ကပ်လီနက်**: အများဆုံး developer တွေဟာ သူတို့ကုဒ် editor မှာ အချိန် ၄၀% ခန့် ခဏစောင့်ကြည့်တယ်၊ ဒါပေမယ့် စမ်းသပ်ခြင်း၊ သင်ယူခြင်း၊ ပြဿနာဖြေရှင်းခြင်းများမှာ အချိန်အများကြီးသုံးတယ်။ Programming လုပ်တာ ကုဒ်ရေးခြင်းပဲ မဟုတ်ပါဘူး၊ အတွေ့အကြုံဖန်တီးခြင်း ဖြစ်ပါတယ်! +> **ပျော်စရာ အတွေးပေါ်တစ်ခု**: ဖွံ့ဖြိုးရေးသူအများစု ကုဒ် ရေးစဉ်အတွင်း ၄၀% ခန့်ကို အားပေးပြီး code editor ထဲမှာရှိကြတယ်၊ ဒါပေမယ့် စမ်းသပ်၊ လေ့လာ၊ ပြဿနာဖြေရှင်းမှုတွေမှာ အချိန်များအပ်ကြတယ်။ programming ဟာ ကုဒ်တစ်ကြောင်းရေးတာသာ မဟုတ်ပါဘူး၊ အတွေ့အကြုံဖန်တီးခြင်းပါပဲ။ -✅ **စိတ်ထဲတွင် စဉ်းစားရန်**: ဝက်ဘ်ဆိုဒ်ဖန်တီးရန် ကိရိယာများနဲ့ နေရာပြောင်းမှု ဒီဇိုင်းကိရိယာများ ဘာကွာခြားကြမလဲ ဆိုတာ စဉ်းစားကြည့်ပါ။ ဒါဟာ လှပတဲ့ အိမ်တစ်လုံး ဒီဇိုင်းရေးတဲ့ ဘဏ္ဍာရေးဆရာနဲ့ အဲဒီအိမ်ကို တည်ဆောက်နေတဲ့ လုပ်သားပန်းချီကြီးကြားက ကွာခြားချက်လိုပါပဲ။ နှစ်ခုလုံးလိုအပ်တယ်၊ ဒါပေမယ့် ကိရိယာကိုလည်း မတူပါဘူး! အဲဒီစဥ်းစားခြင်းက သင့်အား ဝက်ဘ်ဆိုဒ်တွေ ဘယ်လိုဖန်တီးကြတာကို ကျယ်ကျယ်ပြန့်ပြန့် မြင်ရဖို့ ကူညီလိမ့်မယ်။ +✅ **စဉ်းစားရန်**: နေ့တိုင်း website ဖန်တီးရာ development tools များက design tools တွေနဲ့ ဘယ် ကွာချက် ရှိမလဲ? အဲဒါကဗျာဆရာတစ်ယောက် မြို့တော်အဆောက်အအုံမှာပုံစံတည်ဆောက်ခြင်းနဲ့ တည်ဆောက်သူတစ်ယောက် လုပ်ငန်းတွင် သုံးတဲ့ကိရိယာတွေရဲ့ ကွာခြားမှုလိုပါပဲ။ နှစ်ခုစလုံး အရေးကြီးပေမယ့် အခြား ကိရိယာတွေလိုအပ်ပါတယ်။ ဒီစိတ်ကူးဟာ အရမ်းလိုက်ဖက်တဲ့ စိတ်မြင့်မြတ်မှုပုံစံကို သင်ကို့ကိုယ်ကိုရှင်းလင်းပေးပါလိမ့်မယ်။ ## GitHub Copilot Agent Challenge 🚀 -Agent mode ကို အသုံးပြု၍ အောက်ပါ စိန်ခေါ်မှုကို ပြီးမြောက်ပါ: +Agent mode ကို သုံးပြီး အောက်ပါ စိန်ခေါ်မှုကို ပြီးမြောက်စေပါ။ -**ဖော်ပြချက်:** ခေတ်မှီ code editor သို့မဟုတ် IDE ၏ လက္ခဏာများကို ရှာဖွေပြီး ဝက်ဘ်ဖန်တီးမှု အလုပ်လုပ်စဥ်အား တိုးတက်စေသည့် နည်းလမ်းများ ချပြပါ။ +**ဖော်ပြချက်**: ခေတ္တခေတ် code editor သို့ IDE တစ်ခုရွေးပြီး web developer အနေနဲ့ workflow ကို ဘယ်လိုပိုမိုသင့်တော်စေမလဲ ပြသပါ။ -**Prompt:** Code editor သို့ IDE (Visual Studio Code, WebStorm, ဒါမှမဟုတ် cloud-based IDE တို့မလိုအပ်သည်) တစ်ခု ရွေးပါ။ ကုဒ်ရေးခြင်း၊ debug လုပ်ခြင်း သို့မဟုတ် ကုဒ်ထိန်းသိမ်းမှုကို ပိုမိုမြန်ဆန်စေသော လက္ခဏာ သုံးခု သို့မဟုတ် extension သုံးခုကို ပြပါ။ တစ်ခုစီအတွက် သင့် workflow အတွက် ဘယ်လိုအကျိုးရှိသလဲ ဆိုတာ အကျဥ်းတင်ရှင်းပြပါ။ +**အကြောင်းအရာ**: Visual Studio Code, WebStorm သို့ cloud-based IDE တို့ထဲမှ တစ်ခုရွေးပါ။ ကုဒ်ရေးခြင်း၊ debug ကိရိယာ သို့ သက်ဆိုင်ရာ extension သုံးခုကို ဖော်ပြပါ။ တစ်ခုချင်းစီအတွက် workflow ပိုမိုကောင်းမွန်စေသည့် အကျိုးသက်ရောက်မှု ရှင်းပြပါ။ --- -## 🚀 Challenge +## 🚀 စိန်ခေါ်မှု + +**အိုကေ၊ စုံစမ်းသူရယ်၊ ပထမဆုံး လုပ်ငန်းစဥ်အတွက် ပြင်ဆင်ပြီးပြီလား?** + +အခု သင့်မှာ အခြေခံတွေဆီလာပြီ၊ ကျွန်တော်က တကယ်ခရီးသွားရန် စိတ်ဝင်စားစရာကောင်းတဲ့ programming ကမ္ဘာကို ကြည့်ရှုဖို့ အတွေ့အကြုံရှိစေဖို့ ကဏ္ဍတစ်ခုရှိတယ်။ နားထောင်ပါ – ဒီဟာကကော ဒါကိုရေးဖို့တော့ မဟုတ်ဘူး၊ ဘာမှ မစရာပါဘူး! သင့်ကို programming ဘာသာစကား စုံစမ်းသံသယဉ်းတစ်ယောက်လို မျက်နှာမတွေ့ပဲ ပထမဆုံး စိတ်လှုပ်ရှားဖွယ် စုံစမ်းမှုတစ်ခုလို့ ထင်ပါ။ + +**သင့်တာဝန် (သင်ရွေးချယ်ပါက):** +1. **ဘာသာစကား လေ့လာသူဖြစ်ပါ**: အပြည့်အဝ ကွဲပြားကြွယ်ဝတဲ့ programming ဘာသာစကား ၃ခုရွေးပါ – တစ်ခုက website ဖန်တီးခြင်း၊ တစ်ခုက မိုဘိုင်း app ဖန်တီးခြင်း၊ တစ်ခုက သိပ္ပံ ဒေတာစစ်ဆေးခြင်း။ အဲ့ဒီဘာသာစကားတစ်လုံးခြင်းစီမှာ လုပ်ဆောင်မှုသေးငယ်တစ်ခုတူညီတဲ့ script များကို ရှာပါ။ အဲဒီလို ဝေဖန်မှုကြားနေရတဲ့ တူညီမှုတွေကို သင် အံ့သြဖွယ် မြင်ရပါလိမ့်မယ်။ + +2. **တည်ထောင်ရေးဇာတ်လမ်းတွေရှာဖွေပါ**: ဘာသာစကားတိုင်းကို မူလတည်ထောင်ခဲ့တဲ့ အကြောင်းအရင်းကို ရှာပါ။ အားလုံးဟာ တစ်ခုတည်းသော ပြဿနာအတွက် ပိုကောင်းတဲ့ ဖြေရှင်းနည်းတစ်ခုလိုး ရှာဖွေရန် ဖြစ်ပါတယ်။ သင် ပြဿနာတွေကို ခန့်မှန်းနိုင်ပါသလား? အဲ့ဒီဇာတ်လမ်းတွေထဲမှာ စိတ်ဝင်စားစရာ များစွာ ရှိပါတယ်။ + +3. **အသိုင်းအဝိုင်းတွေကို တွေ့ဆုံပါ**: ဘာသာစကားတွေ ပတ်သတ်တဲ့ အသိုင်းအဝိုင်းက ဘယ်လောက် ကြိုဆိုမေတ္တာရှိပြီး စိတ်အားထက်သန်မှုရှိတာလဲ စစ်ဆေးပါ။ တချို့မှာ ဒေသအရင် စီစဉ်ထားပြီး အသင်းအသီးသီးက တစ်ဦးတည်း ဆန္ဒကောင်းရွှင်လန်းစေပါသည်။ တချို့မှာ လူဦးရေ များစွာဖြင့် ကျယ်ပြန့်ပီး ကိုယ်တိုင်ကူညီပေးကြပါမယ်။ အသိုင်းအဝိုင်းတွေ ရှိတဲ့ အမျိုးအစားတွေကို ကြည့်လိုက်တော့ မကြာခဏ ဦးစားပေးသော နှလုံးသားကို တွယ်လိုက်နိုင်ပါတယ်။ -**အခု detective ရေ၊ ပထမဆုံးကိစ္စကြီးအတွက် ပြင်ဆင်ပါပြီလား?** +4. **သင့်စိတ်ခံစားချက်သို့ နားထောင်ပါ**: ယခုအခါ ဘာသာစကား ဘယ်ဟာ သင့်အတွက် လာလည်ရလောက်တဲ့ သဘောခုနှစ်မှု ရှိသလဲ? “မှန်ကန်တဲ့” ရွေးချယ်မှုကို စိုးမပူပါနဲ့ – သင့် ဉာဏ်ဖြင့် သဘောတူပါ။ မှားယွင်းတဲ့ဖြေဆိုမှု မရှိပါဘူး၊ နောက်ထပ် လေ့လာမှုများကို အချိန်ရသလို စူးစမ်းနိုင်ပါတယ်။ -အခု သင်မှာ အဲဒီ အံ့သြစရာ အထောက်အကူပေး အခြေခံများ ရနေပြီ။ သူတို့ရဲ့ အံ့ဩစရာ programming ကမ္ဘာက တကယ်မျိုးစုံနှင့်စိတ်ဝင်စားဖွယ် ဖြစ်တယ်ဆိုတာ သင်သိနိုင်ဖို့ ကူညီဖို့ စွန့်စားမှုတစ်ခု ကြိုတင်ပြင်ဆင်ထားပါတယ်။ နားထောင်ပါ - အခု code မရေးသေးပါဘူး၊ ဖိအားတစ်ခုမှ မရှိပါဘူး! သင်ဟာ programming language စုံစမ်းသူ တစ်ယောက်တည်းဖြစ်ပြီး ပထမဆုံး စွန့်စားမှုကို တွန်းအားပေးမှာပါ! +**လျှို့ဝှက် စုံစမ်းမှု**: ဘာသာစကားတိုင်းနဲ့ တည်ဆောက်ထားတဲ့ ထင်ရှားတဲ့ website သို့ ကဏ္ဍ app များ ရှာဖွေကြည့်ပါ။ Instagram, Netflix သို့မဟုတ် သင်မရပ်နိုင်တဲ့ မိုဘိုင်းဂိမ်းကို ဘာ language နဲ့ ပြုလုပ်ထားတာလဲဆိုတာ သိရင် အံ့အားသင့်မှာ မလားပြောပြပါ။ -**သင့်တာဝန်၊ လက်ခံပါက:** -1. **ဘာသာစကားစူးစမ်းသူ ဖြစ်ပါ:** တကယ်ကို အလုပ်လုပ်နေရတဲ့ programming languages သုံးခုကို ရွေးချယ်ပါ – ဝက်ဘ်ဆိုဒ်တစ်ခုဖန်တီးတဲ့၊ မိုဘိုင်းအက်ပ်တစ်ခုဖန်တီးတဲ့၊ သိပ္ပံပညာရှင်တွေအတွက်ဒေတာကိုခွဲခြမ်းစိတ်ဖြာတဲ့ တစ်ခုစီ။ တူညီတဲ့ လုပ်ဆောင်ချက် လုပ်နည်း အတွက် မတူညီသော ဥပမာများကို ရှာဖွေပါ။ သုံးသပ်ကြည့်ပါ! ဘယ်လောက် ကွဲပြားနိုင်သလဲဆိုတာ မှတ်မိမယ်! -2. **မူလဇာတ်လမ်းများ ကို ရှာဖွေပါ:** ဘာသာစကား တစ်ခုချင်းစီ မူလမှာ အထူးပြုရာဘာလဲ? အဲဒါက အထူးပါးပျံ့ချနေတာ – programming language တစ်ခုစီကို ဘာဖြေရှင်းဖို့ ဖြစ်လာတာလဲဆိုတာဟာ သိထားဖို့စိတ်ဝင်စားစရာကောင်းပါတယ်။ -3. **အသိုင်းအဝိုင်းများနှင့် တွေ့ဆုံပါ:** ဘာသာစကားအသိုင်းအဝိုင်းတွေအကြောင်း ကြည့်ရှုပါ။ အချို့တွေအလွန်ကြီးမားပြီး developerပေါင်းများစွာ သိရှိဝေစုသလို၊ တချို့က အလွန်ငယ်ငယ်ပြီးလည်း သဲကြားမှုရှိသည်။ သင်နှစ်သက်တဲ့ အသိုင်းအဝိုင်းကို ကြည့်ရှုပါ။ -4. **အသိပေးခံစားချက်နဲ့ လိုက်ပါ:** လက်ရှိအချိန်မှာ သင့်အား အကောင်းဆုံး လက်ခံရရှိသော ဘာသာစကား ဘယ်ဟာလဲ? “ပေါက်ကွဲ” ရွေးချယ်မှုမရှိပါဘူး၊ သင့်ခံစားချက်ကိုသာ လိုက်ပါ! ဘာမှမှား မဟုတ်ပါဘူး၊ နောက်မှ နောက်ထပ် လေ့လာ ကြည့်လို့ရပါတယ်။ +> 💡 **သတိပေးချက်**: ဒီဘာသာစကားတွေ အဲဒီနေ့မှာ ကျွမ်းကျင်ဖို့ မပန်းတိုင်ထားပါနဲ့။ သင့်မှာ နေရာရွေးချယ်ဖို့ အင်အားအပြည့်ဖြင့် အထောက်အကူပြုဖို့ နေရာပတ်ဝန်းကျင် ကို မိတ်ဆက်တာပဲဖြစ်ပါတယ်။ အချိန်ယူပြီး ပျော်ရွှင်ပြီး စူးစမ်းပါ၊ ရည်းစားစိတ်ဓာတ်နဲ့ သင်ယူပါ! -**အပို detective စွန့်စားမှု**: ဘာသာစကားတစ်ခုချင်းစီက major websites သို့မဟုတ် apps ဘယ်လောက် ဖန်တီးရာ ရှိသလဲ ရှာဖွေပါ။ Instagram, Netflix, သင်မရပ်နိုင်တဲ့ မိုဘိုင်းဂိမ်း ဘယ်လို ဘာသာစကားနဲ့ ဖန်တီးထားတာလဲဆိုတာ သိပြီး အံ့အားသင့်မှာ သေချာပါပဲ! +## သင်တွေ့ရှိခဲ့သမျှကို ပျော်ရွှင်ကြိုဆိုကြစို့! -> 💡 **မေ့မလားနဲ့**: ဒီဘာသာစကားတွေမှာ တကယ် ကျွမ်းကျင်သူ ဖြစ်ဖို့ မဟုတ်ပါဘူး။ ဘာသာစကားတွေရှိရာ အသိုင်းအဝိုင်းကို မိမိအကျဆုံးနေရာရှာဖွေဖို့၊ အကောင်းဆုံးနေရာမှာ ဆုံးဖြတ်တိုင်ပတ်ဖို့ နေရာရှာဖွေတဲ့မှု ဖြစ်ပါတယ်။ အချိန်ယူပြီး ပျော်ပါစေ၊ စူးစမ်းဖို့စေ! +ဗုဒ္ဓဟူးတရားကဲ့သို့၊ ဒီနေ့ သင် လေ့လာသင့်ထင်ရာ အထူးကို သဘောကျစေဖို့ အလွန်ပျော်ရွှင်ပါတယ်! ဤ အံ့မခန်းခရီးစဉ်တစ်ခုက သင့်မှာ ဘယ်လောက် သိရှိမှုတွေ စိုက်ထုတ်လိုက်ပါသလဲဆိုတာ ကြည့်မယ်။ စိတ်မပူပါနဲ့ – ဒီကိစ္စက ရုံတင် သင်ယူမှုတွေရဲ့ ပျော်မှုချက်တစ်ခုပါပဲ။ -## သင့်ရှာဖွေတွေ့ရှိမှုကို ကျေနပ်အောင် အတူပျော်ကြရအောင်! +[သင်ခန်းစာပြီး ရလဒ်စစ်ဆေးခြင်း](https://ff-quizzes.netlify.app/web/) -မင်း ဒီနေ့ အံ့ဖွယ်အချက်အလက်တွေကို များစွာ သိရှိသွားပြီ! ကျွန်တော် အမှန်တကယ် ဝမ်းမြောက်မိပြီး ဒီ အံ့ဩဖွယ်ခရီးစဉ်ကို ကောင်းစွာ ကျင့်သုံးမိကြောင်း မျှော်လင့်ပါတယ်။ စမ်းသပ်ချက်လေးမျိုး မဟုတ်ပါဘူး၊ အမှားကင်းစင်ပြီး ရှင်းလင်းစွာ သင်ယူဖို့ အခမ်းအနားတစ်ခုလိုပါပဲ။ +## နောက်ဆုံးသုံးသပ်ချက် & ကိုယ်တိုင်လေ့လာခြင်း -[စာသင်ပြီးနောက် စမ်းသပ်မေးခွန်းများ](https://ff-quizzes.netlify.app/web/) +**အချိန်ယူပြီး လေ့လာနှစ်သက်ပျော်မွေ့ပါ!** +သင်ဒီနေ့ မဖြစ်မနေ ပြီးပြည့်စုံစွာ လေ့လာပြီးသားဖြစ်ပြီး၊ ဒါဟာ ဂုဏ်ယူစရာ တစ်ခုပါပဲ! ယခုကတော့ သင့်စိတ်ဝင်စားမှုကို အာရုံစိုက်စေတဲ့ အကြောင်းအရာတွေကို ရှာဖွေတွေ့ရှိဖို့ စတင်ချိန်ပါ။ သတိပြုပါ၊ ဒါဟာ အလုပ်စာမဟုတ်ပါဘူး – ဒါက စွန့်စားခရီးတစ်ခုဖြစ်ပါတယ်! -## ပြန်ကြားခြင်းနှင့် ကိုယ်တိုင်လေ့လာမှု +**သင့်ကို စိတ်လှုပ်ရှားစေတဲ့ အရာတွေကို နက်ရှိုင်းစွာ လေ့လာပါ။** -**အချိန်ယူ ကျွမ်းကျင်လာရန် နှင့် ပျော်ပါစေ!** -နေ့တစ်နေ့မှာ အများကြီး လေ့လာခဲ့ပြီ၊ အဲဒါက မျက်နှာမောင်း တစ်ခုပါပဲ! ယခုကော ဘယ်လို စိတ်ဝင်စားစရာရှိလဲ ဆိုတဲ့ ခေါင်းစဉ်တွေကို ရှာဖွေကြည့်ဖို့ ပိုစိတ်လှုပ်ရှားစရာပဲ။ မှတ်ထားပါ၊ ဒါက စာသင်ခန်းအလုပ်မဟုတ်ပါဘူး၊ စွန့်စားခန်းတစ်ခုပါပဲ! +**ပရိုဂရက်မင်းဘာသာစကားတွေနဲ့ လက်တွေ့ကျကျ လေ့လာပါ။** +- သင့်စိတ်ဝင်စားမှုကို ဖမ်းစားထားတဲ့ ဘာသာစကား ၂ မှ ၃ ခုရဲ့ တရားဝင် ဝဘ်ဆိုက်တွေကို လည်ပတ်ပါ။ အဲဒီ တစ်ခုချင်းစီဟာ သူ့ရဲ့ ကိုယ်ပိုင် လက္ခဏာနဲ့ ပုံပြင်ရှိပါတယ်။ +- [CodePen](https://codepen.io/)၊ [JSFiddle](https://jsfiddle.net/) သို့မဟုတ် [Replit](https://replit.com/) စတဲ့ အွန်လိုင်း ကုဒ်ကစားခန်းတွေကို ကြိုးစားပြီး လေ့လာပါ။ လုပ်ကြည့်ရင်း ဖျက်ဆီးရမှာ မဟုတ်ပါဘူး၊ စမ်းသပ်ဖို့ မစိုးရိမ်ပါနဲ့။ +- သင့်ကြိုက်နှစ်သက်တဲ့ ဘာသာစကား ဘယ်လိုဖွားမြင်လာခဲ့တယ်ဆိုတာကို ဖတ်ရှုပါ။ တကယ်တော့ အဲဒီ ဘာသာစကားမူလပုံပြင်တွေမှာ စိတ်ဝင်စားဖွယ်ရာတွေ များစွာရှိပြီး ဘာသာစကားတွေ ဘာကြောင့် ဒီလို အလုပ်လုပ်ကြတာလဲဆိုတာ နားမလည်မှုကို ကူညီပေးပါတယ်။ -**သင့်စိတ်အားထက်သန်မှုကို နက်ရှိုင်းစွာ ထည့်သွင်းကြည့်ပါ။** +**သင့်ရဲ့ အသစ်ရတဲ့ ကိရိယာတွေကို ချစ်ခင်တတ်လာပါ။** +- Visual Studio Code ကို မဒေါင်းလုပ်ဆွဲထားရသေးရင် ဆွဲယူလိုက်ပါ – အခမဲ့ဖြစ်ပြီး သင့်အား နှစ်သက်သွားမှာ ဖြစ်တယ်။ +- Extensions marketplace ကို မိနစ်အနည်းငယ်ကြာ မြင်ကွင်းချဲ့ပါ။ ဒါဟာ သင့်ကုဒ်အယ်ဒီတာအတွက် အက်ပ်စတိုးတစ်ခုလိုပဲ။ +- ဘရောက်ဇာ Developer Tools ကို ဖွင့်ပြီး သက်သက်သာသာ ခလုတ်တွေကို နှိပ်ပါ။ အားလုံးနားလည်ဖို့ စိုးရိမ်မထားပါနဲ့ – ရှိနေတဲ့အရာတွေကို မိတ်ဆက်ကြည့်ပါ။ -**ပရိုဂရမ်မင်းဘာသာစကားတွေနဲ့ လက်တွေ့ကျကျ လုပ်ဆောင်ပါ။** -- သင့်စိတ်ဝင်စားမှုကို ဖမ်းဆီးထားတဲ့ ဘာသာစကား ၂-၃ ခုရဲ့ တရားဝင် ဝက်ဘ်ဆိုဒ်တွေကို လည်ပတ်ကြည့်ပါ။ တစ်ခုချင်းစီမှာ ကိုယ့်ဘာသာ စတိုင်နဲ့ အကြောင်းအရာသီးသန့်တွေ ရှိပါတယ်! -- [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), ဒါမှမဟုတ် [Replit](https://replit.com/) ကဲ့သို့ အွန်လိုင်းကုဒ် ရေးနိုင်တဲ့နေရာတွေကို စမ်းကြည့်ပါ။ စမ်းသပ်ဖို့ မကြောက်ပါနဲ့ – ဘာမှ မဖျက်ရင် မိမိကောင်းမှုမျိုးမျိုးလည်း ရနိုင်ပါတယ်! -- သင်နှစ်သက်တဲ့ ဘာသာစကား ဘယ်လို တည်ရှိလာခဲ့တာလဲ ဆိုတာကို ဖတ်ရှုလိုက်ပါ။ တကယ်ပါပဲ၊ ဒီအစပြုမှုများက အလွန်စိတ်ဝင်စားဖွယ်ဖြစ်ပြီး ဘာသာစကားတွေ ဘာကြောင့် ဒီလို အသုံးပြုကြတာလဲ ကို နားလည်စေပါတယ်။ +**အသိုင်းအဝိုင်းနဲ့ ပူးပေါင်းပါ။** +- [Dev.to](https://dev.to/)၊ [Stack Overflow](https://stackoverflow.com/) သို့မဟုတ် [GitHub](https://github.com/) မှ developer အသိုင်းအဝိုင်းများကို လိုက်ပါ။ ပရိုဂရက်မင်းအသိုင်းအဝိုင်းမှာ နယူးဂျင်တွေကို အလွန်ကြိုဆိုမှုပြုတယ်။ +- YouTube မှာ သူငယ်ချင်းတွေ အတွက် အဆင်ပြေတဲ့ ကုဒ်ရေးဗီဒီယိုတွေ ကြည့်ပါ။ စတင်နေသူတွေဘယ်လို ဖြစ်ကြတာ ဆိုတာ မေ့မယ့် ကြိုတင်မွတ်တမပေါင်းများစွာ ရှိပါတယ်။ +- ဒေသခံ မိတ်ဆွေတွေ သို့မဟုတ် အွန်လိုင်း အသိုင်းအဝိုင်းတွေကို ပါဝင်ပါ။ ယုံကြည်ပါဦး၊ developer တွေက နယူးဂျင်တွေလုပ်ဖို့ အားပေးတတ်ကြတယ်! -**သင့် အသုံးပြုမည့်ကိရိယာ အသစ်များနဲ့ သဘာဝကျစွာ နေထိုင်ကြည့်ပါ။** -- Visual Studio Code ကို ဒေါင်းလုပ်မလုပ်ဖူးရင် ဒေါင်းလုပ်ဆွဲပါ – အခမဲ့ပါ၊ သင့်အတွက် အရမ်းကြိုက်မယ်။ -- Extensions Marketplace ကို မိနစ်ပိုင်းကြည့်ကြည့်ပါ။ ဒါဟာ ကိုယ်ရဲ့ ကုဒ်ရေးစက်အတွက် အက်ပ်ဆိုင်လို့တူပါတယ်! -- သင့် ဘရောက်ဇာ Developer Tools ကို ဖွင့်ပြီး တစ်ချို့နေရာတွေ ဆလတ်ဆလတ် နှိပ်ကြည့်ပါ။ အားလုံးကို နားလည်ဖို့ မလိုပါဘူး – ရှိတဲ့ အရာတွေကို သဘောကျဖို့ လေ့လာပါ။ +> 🎯 **နားထောင်ပါ၊ ဒီအချက်ကို မွတ်မတိုင်အောင် မေ့မထားနဲ့**: သင်ကိုယ်တိုင် ကုတ်ရေးလိမ့်မယ်ဆိုတာကို တစ်ညအတွင်း မသိးမျှတမ်း မျှော်လင့်ခြင်း မရှိပါ။ ယခုအချိန်မှာတော့ သင်ပါဝင်တော့မယ့် အံ့သြဖွယ် နေရာအသစ်ကို သင် သိရှိလာနေချိန်ပါ။ အချိန်ယူပြီး ခရီးကို ခံစားပါ၊ နှစ်ဆက်လိုက်ပါ၊ ပြီးတော့ – သင်နှင်းဆီ မျှော်လင့်တဲ့ developer တစ်ယောက်ချင်းစီဟာ ကခုနစ်မှစပြီး အခုတစ်ချိန်မှာ သင့်နေပုံတူမှာ ထိုင်ပြီး စိတ်လှုပ်ရှားနေကြသလို ပြီးတစ်ဖန် သိပ်မက်မက်ခဲ့ရပါတယ်။ ဒါဟာ ပြောင်းလဲဖို့လိုအပ်တဲ့ အခြေအနေ ဖြစ်ပြီး သင့်အတွက် သင့်လျော်စွာ လုပ်ဆောင်နေတယ်ဆိုတာကို ဆိုလိုပါတယ်။ -**အသိုင်းအဝိုင်းမှာ ပါဝင်ပါ။** -- [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), ဒါမှမဟုတ် [GitHub](https://github.com/) မှာ Developer အသိုင်းအဝိုင်းတွေကို ချီးမြှင့်လိုက်ပါ။ ပရိုဂရမ်မင်းအသိုင်းအဝိုင်းက အတွေ့အကြုံ မရှိသေးသူတွေကို ဂရုစိုက် တက်ကြွစွာ လက်ခံတတ်ပါတယ်! -- YouTube ပေါ်မှာ စကင်းစရိုက် ကုဒ်ရေး ဖွင့်ကြည့် videos တွေကို ကြည့်ပါ။ စတင်၍ ပြောင်းလဲနေသူများ ခံစားရသလို အဖြစ်မှတ်ထားသူ အသက်ဝင်သူများ အများကြီး ရှိတယ်။ -- ဒေသခံ Meetup များ သို့မဟုတ် အွန်လိုင်းအသိုင်းအဝိုင်းတွေကို ပါဝင်စဉ်းစားပါ။ Developer များက လူအသစ်တွေကို ကူညီပေးဖို့ ကြိုက်နှစ်သက်တယ်။ -> 🎯 **နားဆင်ထည့်သွင်းပါ၊ ကျွန်တော်/သူ မေတ္တာရပ်ခံချင်တာမှာ**: တစ်ညအတွင်း ကုဒ်ရေး ဘာမော့မဆိုသမား ဖြစ်ဖို့ မမျှော်လင့်ပါနဲ့! ယခုအချိန်မှာတော့ သင် ပါဝင်ဖို့ရှိတဲ့ ဒီ အံ့သြဖွယ် ကမ္ဘာအသစ်နဲ့ မိတ်ဆက်နေတယ်။ အချိန်ယူပြီး ခရီးစဉ်ကို ပျော်ရွှင်ပါ၊ နှလုံးထားပါ – သင်ကို မျှော်လင့်ကြည့်ရတဲ့ Developer တစ်ယောက်ချင်းစီဟာ ဒီနေရာမှာရောက်တုန်းက သင့်လိုပဲ စိတ်လှုပ်ရှားမှုတွေနဲ့ အနည်းငယ် စိတ်မသာမှုတွေနဲ့ ရှိခဲ့ကြတာပါ။ ဒါက လုံးဝ သာမာန်ဖြစ်ခြင်းဖြစ်ပြီး သင်ဟာ မှန်ကန်စွာ လုပ်ဆောင်နေပြီဆိုရတာပါ။ -## Assignment +## လေ့ကျင့်ခန်း [Reading the Docs](assignment.md) -> 💡 **သင့် အလုပ်အပ်တာအတွက် ငြိမ်သက်မှုချေးချက်**: မကျွန်တော်တို့ မဖော်ပြဖူးသေးတဲ့ ကိရိယာတွေကို ရှာဖွေကြည့်တာကို အရမ်းချစ်လိမ့်မယ်! ကျွန်တော်တို့ အကြောင်းပြောထားတဲ့ Editor, Browser, Command line tools များကို ရပ်ပါ – ထူးခြား အံ့သြဖွယ် Development tools တွေက ထပ်ပြီး ရှာဖွေရန် စောင့်ကြည့်နေပါတယ်။ ဖြစ်နိုင်ရင် တီထွင်ပြုပြင်မှု အမြဲတမ်းရှိပြီး လန်းဆန်းတဲ့ အသိုင်းအဝိုင်းပါဝင်သော ကိရိယာတွေကို ရွေးချယ်ပါ (ဒီလူတွေဟာ သင် ပံ့ပိုးမှုလိုအပ်တဲ့အခါမှာ ကူညီပေးဖို့ အကောင်းဆုံး Tutorial တွေနဲ့ လူတွေ ဖြစ်လေ့ရှိပါတယ်)။ +> 💡 **သင့်လေ့ကျင့်ခန်းအတွက် အသေးစိတ် အကြံပေးချက်**: ကျွန်ုပ်တို့ မဖော်ပြရသေးသည့် ကိရိယာအသစ်တွေကို လေ့လာကြည့်ဖို့ မျှော်လင့်ပါတယ်! ကျွန်တော်တို့ ရှိပြီးသား အယ်ဒီတာတွေ၊ ဘရောက်ဇာတွေ၊ command line ကိရိယာတွေကို ကျော်လွှားလိုက်ပါ – အဲဒါတွေကာလတစ်လျှောက် မျှော်စင့်သင့်တဲ့ အံ့သြဖွယ် အချို့သော ဖွံ့ဖြိုးမှု ကိရိယာတွေရှိပြီး တိကျတဲ့သင်ခန်းစာ ၊ ခက်ခဲတဲ့အခါ ကူညီတတ်တဲ့ လူတွေ များနေတဲ့ ကြီးမားတဲ့ အသိုင်းအဝိုင်းတွေနဲ့ တွေ့ရှိမှာ ဖြစ်တယ်။ --- -## 🚀 သင့် ပရိုဂရမ်းမင်း ခရီးစဉ် အချိန်ဇယား - -### ⚡ **နောက် ၅ မိနစ်အတွင်း လုပ်နိုင်တာ** -- [ ] စိတ်ဝင်စားဖွယ်ကောင်းတဲ့ ပရိုဂရမ်းမင်းဘာသာစကား ဝက်ဘ်ဆိုဒ် ၂-၃ ခု Bookmark လုပ်ပါ -- [ ] Visual Studio Code ကို ဒေါင်းလုပ်ဆွဲပါ (မလုပ်ဖူးရင်) -- [ ] ဘရောက်ဇာ DevTools (F12) ဖွင့်ပြီး မည်သည့် ဝက်ဘ်ဆိုဒ် မဆို လှည့်ယှဉ်ကြည့်ပါ -- [ ] တစ်ခုသော ပရိုဂရမ်းမင်း အသိုင်းအဝိုင်း (Dev.to, Reddit r/webdev, Stack Overflow) ကို ပါဝင်ဆက်သွယ်ပါ - -### ⏰ **ဒီနာရီအတွင်း ပြီးမြောက်နိုင်တာ** -- [ ] သင်ခန်းစာပြီးနောက် စစ်တမ်း ဖြေပြီး မဟာဗျူဟာတွေအပေါ် ပြန်လည်စဉ်းစားပါ -- [ ] VS Code ကို GitHub Copilot extension ဖြင့် ပြင်ဆင်ပါ -- [ ] အွန်လိုင်းမှာ ဘာသာစကား ၂ မျိုးနဲ့ "Hello World" နမူနာ လုပ်ကြည့်ပါ -- [ ] YouTube ပေါ်မှာ "Day in the Life of a Developer" ဗီဒီယို ကြည့်ပါ -- [ ] ဘာသာစကား စုံစမ်းဖော်ထုတ်မှုများ (ချန်လှပ်) စတင်ပါ - -### 📅 **သင့် အပတ်တစ်ပတ် ခရီးစဉ်** -- [ ] အလုပ်အပ်တာ ပြီးစီးပြီး နောက် ၃ မျိုး Development tools ရှာဖွေပါ -- [ ] Developer များ သို့မဟုတ် programming အကောင့် ၅ ခု follower လုပ်ပါ -- [ ] CodePen ဒါမှမဟုတ် Replit မှာ သေးငယ်တဲ့ တည်ဆောက်မှုတစ်ခုစမ်းဆောင်ပါ ("Hello, [Your Name]!" ပါ) -- [ ] Developer ဘလော့ဂ် တစ်ခုကို တစ်ခုဖတ်ပါ၊ တစ်ယောက်ရဲ့ ကုဒ်ရေး ခရီးစဉ်ကို ဖတ်ရှု့ -- [ ] Virtual meetup တစ်ခု သို့မဟုတ် programming စကားဝိုင်းတစ်ခု ဝင်ပါ -- [ ] သင် ရွေးချယ်ထားတဲ့ ဘာသာစကားကို အွန်လိုင်းသင်ခန်းစာဖြင့် သင်ယူပါ - -### 🗓️ **သင့် လ ပြည့် ခရီးစဉ် ပြောင်းလဲမှု** -- [ ] ပထမဆုံး သေးငယ်တဲ့ Project တစ်ခု တည်ဆောက်ပါ (လွယ်ကူတဲ့ ဝက်ဘ်စာမျက်နှာတစ်ခုပါ) -- [ ] Open-source project တစ်ခုတွင် လှည့်လည်ပါ (အများအားဖြင့် စာရွက်စာတမ်း အသေးစိတ် ပြင်ဆင်ခြင်း) -- [ ] ပရိုဂရမ်းမင်း ခရီးစဉ် စတင်သူ ခေါ်သူတစ်ယောက်ကို မန်တော် ဒ်ဖြစ်ပါ -- [ ] သင့် Developer Portfolio Website တည်ဆောက်ပါ -- [ ] ဒေသခံ Developer အဖွဲ့များ သို့ Study Group များနှင့် ဆက်သွယ်ပါ -- [ ] နောက်ထပ် သင်ယူမည့် အဆင့်စီမံကိန်းများ စီစဉ်ပါ - -### 🎯 **နောက်ဆုံး ပြန်လည် မေးမြန်းခြင်း** - -**ရှေ့ဆက်ရန်မပြီးခင်၊ ချီးမွမ်းချိန်တစ်ခု တွေ့ပါလား:** -- ဒီနေ့ သင့်ကို စိတ်လှုပ်ရှားစေတဲ့ Programming အချက်တစ်ခုက ဘာလဲ။ -- အရင်ဆုံး ရှာဖွေလိုတဲ့ ကိရိယာ သို့မဟုတ် သဘောတရား ဘာလဲ။ -- ဒီ ပရိုဂရမ်းမင်း ခရီးစဉ် စတင်ဖို့ ဘယ်လို ခံစားနေရပါသလဲ။ -- ယခုလက်ရှိ Developer တစ်ယောက်ကို မေးချင်တဲ့ မေးခွန်း တစ်ခု ရှိပါသလား။ +## 🚀 သင့်ပရိုဂရက်မင်းခရီးစဉ် အချိန်ဇယား + +### ⚡ **နောက် ၅ မိနစ်အတွင်း ပြုလုပ်နိုင်သည့် အရာများ** +- [ ] သင့်စိတ်ဝင်စားမှု ဖမ်းစားထားတဲ့ ပရိုဂရက်မင်းဘာသာစကား ဝဘ်ဆိုက် ၂ မှ ၃ ခု ကို Bookmark လုပ်ပါ +- [ ] Visual Studio Code ကို မဒေါင်းလုပ်ဆွဲရသေးရင် ဆွဲယူပါ +- [ ] ဘရောက်ဇာ Developer Tools (F12) ကို ဖွင့်ပြီး မည်သည့်ဝဘ်ဆိုက်မဆို ခလုတ်နှိပ်၍ မိတ်ဆက်ကြည့်ပါ +- [ ] ပရိုဂရက်မင်း အသိုင်းအဝိုင်း တစ်ခုကို ပါဝင်ပါ (Dev.to, Reddit r/webdev, သို့မဟုတ် Stack Overflow) + +### ⏰ **ယခု နာရီအတွင်း ပြီးမြောက်စေရန်** +- [ ] လက်ရှိ သင်ခန်းစာ ပြီးပြီး ငြမ်းချုပ်မေးခွန်းများ ဖြေဆိုပြီး ကိုယ်တိုင်အတွေးချင်းပေးဆောင်ပါ +- [ ] VS Code ကို GitHub Copilot extension နဲ့ စတင် တပ်ဆင်ပါ +- [ ] အွန်လိုင်းမှာ ဘာသာစကား ၂ မျိုးကို အသုံးပြုပြီး "Hello World" ဥပမာတစ်ခု ပြုလုပ်ကြည့်ပါ +- [ ] YouTube မှာ "Day in the Life of a Developer" ဗီဒီယို တစ်ခု ကြည့်ပါ +- [ ] ပရိုဂရက်မင်းဘာသာစကား စုံစမ်းစစ်ဆေးမှု (အတင်းအခိုက်) ကို စတင်ပါ + +### 📅 **တစ်ပတ်တာ စွန့်စားခရီး** +- [ ] လေ့ကျင့်ခန်းပြီးမြောက်ပြီး အသစ်သော ဖွံ့ဖြိုးရေး ကိရိယာ ၃ ခု ကို စူးစမ်းပါ +- [ ] ဆာရှယ်မီဒီယာမှာ ပရိုဂရက်မင်း ၅ ဦး သို့မဟုတ် အကောင့်များကို လိုက်ပါ +- [ ] CodePen သို့ Replit တွင် နည်းနည်းအသေးစား ဖန်တီးခြင်း (တောင် "Hello, [Your Name]!" ဆိုတာပါ) +- [ ] တစ်ယောက်ယောက်ရဲ့ ကုဒ်ရေးခရီးကို ဖတ်ရှုတဲ့ ပရိုဂရက်မင်း ဘလော့ခ်တစ်ခု ဖတ်ပါ +- [ ] ဗွီဒီယို သို့မဟုတ် အွန်လိုင်း မိတ်ဆွေ ထိတွေ့မှု တစ်ခု ပါဝင်ပါ +- [ ] သင့်ရွေးချယ်ထားတဲ့ ဘာသာစကားကို အွန်လိုင်း သင်ခန်းစာများ ဖြင့် စတင်လေ့လာပါ + +### 🗓️ **တစ်လတာ အပြောင်းအလဲ** +- [ ] သင့်ပထမဆုံး သေးငယ်တဲ့ ပရောဂျက်တစ်ခု ဖန်တီးပါ (စုံလင်တဲ့ ဝက်ဘ်စာမျက်နှာတစ်ခုပါမယ်) +- [ ] Open-source ပရောဂျက်တစ်ခုထံ မွန်ဆောင်ပါ (စာရွက်စာတမ်းတည်းဖြတ်ခြင်းမှ စတင်ပါ) +- [ ] ပရိုဂရက်မင်းခရီးစဉ် စတင်နေသူ တစ်ယောက်ကို ကိုးကားပညတ်ပါ +- [ ] သင့်ပရိုဂရက်မင်း ကိုယ်ပိုင် portfolio ဝဘ်ဆိုက်တစ်ခု ဖန်တီးပါ +- [ ] ဒေသခံ developer အသိုင်းအဝိုင်း သို့မဟုတ် သင်ယူအဖွဲ့များနှင့် ဆက်သွယ်ပါ +- [ ] နောက်တစ်ဆင့်သင်ယူမှု ရည်မှန်းချက် ရေးဆွဲပါ + +### 🎯 **နောက်ဆုံး စဉ်းစားမြင်ကွင်း စစ်ဆေးမှု** + +**ရှေ့မထွက်ခင်၊ ပျော်ရွှင်စရာ နှစ်ချက်ယူပါ။** +- ဒီနေ့ ပရိုဂရက်မင်းမှာ သင်အား စိတ်လှုပ်ရှားစေခဲ့တာ ဘာလဲ? +- ဘယ်ကိရိယာ သို့မဟုတ် အကြောင်းအရာ ကို အရင်ဆုံး စူးစမ်းလိုပါသလဲ? +- ဒီပရိုဂရက်မင်းခရီးစဉ် စတင်ရခြင်းအပေါ် မျှော်လင့်ချက်က ဘယ်လို ဖြစ်နေသလဲ? +- အခု သင့်အနေဖြင့် developer တစ်ဦးကို မေးချင်တာ ဘာတစ်ခုရှိပါသလဲ? ```mermaid journey - title သင့်ယုံကြည်မှုတည်ဆောက်ခြင်းခရီး + title သင့်ယုံကြည်မှုတည်ဆောက်ခြင်းခရီးစဉ် section ယနေ့ - Curious: 3: You - Overwhelmed: 4: You - Excited: 5: You + စူးစမ်းလေ့လာနေသည်: 3: You + အလွန်ရှုပ်ထွေးနေသည်: 4: You + စိတ်လှုပ်ရှားနေသည်: 5: You section ဒီအပတ် - Exploring: 4: You - Learning: 5: You - Connecting: 4: You + စူးစမ်းလေ့လာမှု: 4: You + သင်ယူနေသည်: 5: You + ချိတ်ဆက်နေသည်: 4: You section နောက်လ - Building: 5: You - Confident: 5: You - Helping Others: 5: You + တည်ဆောက်နေသည်: 5: You + ယုံကြည်မှုရှိနေသည်: 5: You + အခြားသူများကိုကူညီနေသည်: 5: You ``` -> 🌟 **မေ့မလားနဲ့**: တစ်ဦးချင်းစီ က ပညာရှင် ဖြစ်ရန် အစက စတင်သူတစ်ယောက်ပါပဲ။ ကြီးမားတဲ့ Developer များ ဘာကြောင့်လဲဆိုတော့ သင့်လိုပဲ စိတ်လှုပ်ရှားပြီး၊ အနည်းငယ် စိတ်ရှုပ်ထွေးမှုတွေကို ခံစားခဲ့ကြတယ်။ သင်ဟာ စပျစ်တဲ့ပေါင်းကောင်းတဲ့ လူပတ်ဝန်းကျင်ထဲမှာ ရှိပြီး ဒီခရီးစဉ်ဟာ အံ့သြဖွယ် ဖြစ်တော့မှာပါ။ ပရိုဂရမ်းမင်းကမ္ဘာလုံလောက်တဲ့ နေရာကြီးသို့ ကြိုဆိုပါတယ်! 🎉 +> 🌟 **မှတ်ထားပါ**။ သူပုန် ဖြစ်သူတိုင်းက စတင်သူ ဖြစ်ခဲ့ပါတယ်။ ဗဟုသုတရှိတဲ့ developer ကြီးတော့ အတိတ်က ဖော်ပြခဲ့သည့်အတိုင်း သင့်လို စိတ်လှုပ်ရှားနေပြီး၊ အနည်းငယ် စိုးရိမ်ပြီး၊ ဘာဖြစ်နိုင်မလဲဆိုတာကို စိတ်ဝင်စားနေသူတွေပဲ ဖြစ်ကြပါတယ်။ သင်ဟာ ပရိုဂရက်မင်းကမ္ဘာကြီးက စိတ်ဝင်စားဖွယ် လူတွေထဲမှာ ပါ၀င်ပြီး ဒီခရီးစဉ်ဟာ ထူးခြားဆုံးဖြစ်လာမှာ ဖြစ်ပါတယ်။ ပြည့်ဖို့ကြိုဆိုပါတယ်! 🎉 --- -**အလြန္စိုးရိမ္ခ်က္** -ဤစာတမ္း၌ [Co-op Translator](https://github.com/Azure/co-op-translator) ဟုေခၚေသာ AI ဘာသာျပန္ဝန္ေဆာင္မွုကို အသံုးျပဳျပီး ဘာသာျပန္ထားျခင္းျဖစ္သည္။ စိစစ္မွန္ကန္မႈအတြက္ႀကိဳးစားေနၾကေသာ္လည္း၊ စက္ယန္႔ဘာသာျပန္မ်ားတြင္ အမွားမ်ား သို႔မဟုတ္မွားယြင္းခ်က္မ်ား ပါဝင္ႏိုင္ေၾကာင္း သတိျပဳၾကပါေစ။ မူရင္းစာတမ္းသည္ မိခင္ဘာသာစကားျဖင့္ ရွိျခင္းေၾကာင့္ အတည္ၿပဳရမည့္ စာတမ္းျဖစ္သည္။ အေရးႀကီးေသာ အခ်က္အလက္မ်ားအတြက္ ပရဖက္ရွင္နယ္ လူသားဘာသာျပန္ေရာက္ခြင့္ယူသင့္ပါသည္။ ဤဘာသာျပန္ခ်က္ကို အသံုးျပဳလ်က္ျဖစ္ေသာ တြယ္တမ္း သို႔မဟုတ္ မမွန္ကန္မႈမ်ားအတြက္ ေတာင္းပန္ျခင္းမရွိပါ။ +**အကြောင်းကြားချက်**: +ဤစာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) အသုံးပြု၍ ဘာသာပြန်ထားသည်။ တိကျမှုအတွက် ကြိုးစားနေသော်လည်း အလိုအလျောက်ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မှားယွင်းချက်များ ပါဝင်နိုင်၍ ရှိကြောင်း သတိပြုပါရန်လိုအပ်သည်။ မူရင်းစာတမ်းကို မူရင်းဘာသာဖြင့်သာ တရားဝင်အရင်းအမြစ်ဟု ယူဆသင့်သည်။ အရေးကြီးသော သတင်းအချက်အလက်များအတွက် လူ့ပညာရှင်များ၏ ဘာသာပြန်မှုကို ဦးစားပေး အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာနိုင်သည့် မပြေပြစ်မှုများ သို့မဟုတ် မှားယွင်းဖတ်သိမှုများအတွက် ကျွန်ုပ်တို့ တာဝန်မရှိပါ။ \ No newline at end of file diff --git a/translations/my/AGENTS.md b/translations/my/AGENTS.md index 908aef3d4..06a1c352c 100644 --- a/translations/my/AGENTS.md +++ b/translations/my/AGENTS.md @@ -2,27 +2,27 @@ ## Project Overview -ဤအရာသည် ဝက်ဘ်ဖွံ့ဖြိုးတိုးတက်မှု အခြေခံများကို စတင္ရင်းနှီးသူများကို သင်ကြားပေးရန် ရည်ရွယ်ထားသော ပညာရေးသင်ရိုးအစီအစဉ်၏ ဂိုဒေါင်ဖြစ်သည်။ သင်ရိုးအစီအစဉ်သည် Microsoft Cloud Advocates များမှ ဖန်တီးထားသော ၁၂ အပတ် ကြာသည့် အဝန်းလည်းပြည့်သည့် သင်ခန်းစာများပါဝင်ပြီး JavaScript၊ CSS နှင့် HTML ကို လက်တွေ့ လေ့ကျင့်ခန်း ၂၄ ခုအပါအဝင်ဖြစ်သည်။ +ဤသည်မှာ အခြေခံအဆင့် ဝက်ဘ် ဖွံ့ဖြိုးတိုးတက်မှုကို သင်ကြားရန် အတွက် ပညာရေး သင်ရိုးညွှန်းတမ်း သိမ်းဆည်းရာ ရှိသော repository ဖြစ်သည်။ သင်ရိုးညွှန်းတမ်းတွင် Microsoft Cloud Advocates မှ တီထွင်ထားသော ၁၂ ပတ်ကြာ သင်တန်းလုံလောက်ပြီး JavaScript, CSS နှင့် HTML ကို အကျဉ်းချုပ် ပါဝင်တဲ့ လက်တွေ့သင်ခန်းစာ ၂၄ ခု ပါဝင်သည်။ ### Key Components -- **ပညာရေး အကြောင်းအရာ**: စီမံကိန်းအခြေခံ မော်ဂျူးများ အတွင်း ဖွဲ့စည်းထားသော ၂၄ ခု သင်ခန်းစာ -- **လက်တွေ့ စီမံကိန်းများ**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, နှင့် AI Chat Assistant -- **အပြန်အလှန် စစ်ဆေးမေးခွန်းများ**: မေးခွန်း ၃ ခုနှင့် ၄၈ ခု (သင်ခန်းစာမတိုင်မှီ/ပြီးနောက်သုံးသပ်မှုများ) -- **ဘာသာစကား များစွာ ပံ့ပိုးမှု**: GitHub Actions မှတစ်ဆင့် ၅၀ ကျော်ဘာသာစကား အလိုအလျောက် ဘာသာပြန်ခြင်း -- **နည်းပညာများ**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI စီမံကိန်းများအတွက်) +- **ပညာရေး အကြောင်းအရာ**: ၂၄ ခုသော ဖွဲ့စည်းထားသော သင်ခန်းစာများကို ပရောဂျက်အခြေပြု ပုံစံဖြင့် စီစဉ်ထားသည် +- **လက်တွေ့ ပရောဂျက်များ**: Terrarium၊ Typing Game၊ Browser Extension၊ Space Game၊ Banking App၊ Code Editor နှင့် AI Chat Assistant +- **အပြန်အလှန် စစ်တမ်းများ**: သင်ခန်းစာနှင့် မတိုင်မှီ/နောက်ပိုင်း စစ်တမ်း ၄၈ ခု၊ မေးခွန်းသုံးခုစီပါဝင်သည် +- **ဘာသာစကား များစွာ ထောက်ခံမှု**: GitHub Actions ဖြင့် ၅၀ ကျော်သော ဘာသာစကားများအတွက် အလိုအလျောက် ဘာသာပြန်မှုများ +- **နည်းပညာများ**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI ပရောဂျက်များအတွက်) ### Architecture -- သင်ခန်းစာအခြေခံ ပညာရေးဂိုဒေါင် -- သင်ခန်းစာတိုင်းတွင် README၊ ကုဒ်ဥပမာများနှင့် ဖြေရှင်းနည်းများပါဝင် -- ကွဲပြားသော ဒိုင်ရေးတရီများတွင် သီးခြား စီမံကိန်းများ (quiz-app, သင်ခန်းစာစီမံကိန်းစွန့်) -- GitHub Actions (co-op-translator) ကို အသုံးပြုသည့် ဘာသာပြန်စနစ် -- Docsify မှတဆင့် စာတမ်းများ ပေးပို့ပြီး PDF အဖြစ်ရနိုင်ခြင်း +- သင်ခန်းစာအခြေပြု ပညာရေး repository +- သင်ခန်းစာ folder တစ်ခုစီတွင် README, code ဥပမာများနှင့် ဖြေရှင်းချက်များ ပါဝင်သည် +- quiz-app နှင့် အခြား သီးခြားပရောဂျက်များအတွက် အလွတ် directory များ +- GitHub Actions အသုံးပြုပြီး ဘာသာပြန် မော်ဒယ်စနစ် (co-op-translator) +- Docsify အသုံးပြု၍ စာတမ်းရေးဆွဲမှု ပြုလုပ်ပြီး PDF အဖြစ် ရနိုင်သည် ## Setup Commands -ဤဂိုဒေါင်ကို အဓိကအားဖြင့် ပညာရေးအကြောင်းအရာ အသုံးပြုမှုနှင့် ရည်ရွယ်သည်။ သီးခြား စီမံကိန်းများတွင် အလုပ်လုပ်ရန်: +ဤ repository သည် ပညာရေး အကြောင်းအရာ စမ်းသုံးခြင်း အထူးပြုထားသည်။ အထူးပရောဂျက်များနှင့် ဆောင်ရွက်ရန်အတွက် - ### Main Repository Setup @@ -36,9 +36,9 @@ cd Web-Dev-For-Beginners ```bash cd quiz-app npm install -npm run dev # ဖွံ့ဖြိုးမှုဆာဗာကို စတင်ပါ -npm run build # ထုတ်လုပ်မှုအတွက် တည်ဆောက်ပါ -npm run lint # ESLint ကို chạyပါ +npm run dev # ဖွံ့ဖြိုးမှုဆာဗာစတင်ပါ +npm run build # ထုတ်လုပ်မှုအတွက် ဆောက်လုပ်ပါ +npm run lint # ESLint ကို chạy ပါ ``` ### Bank Project API (Node.js + Express) @@ -48,7 +48,7 @@ cd 7-bank-project/api npm install npm start # API ဆာဗာကို စတင်ပါ npm run lint # ESLint ကို လုပ်ဆောင်ပါ -npm run format # Prettier ဖြင့် ဖော်မတ်လုပ်ပါ +npm run format # Prettier ဖြင့် ဖော်မက် ပြုလုပ်ပါ ``` ### Browser Extension Projects @@ -56,7 +56,7 @@ npm run format # Prettier ဖြင့် ဖော်မတ်လုပ် ```bash cd 5-browser-extension/solution npm install -# ဘရောက်ဇာအထူးတိကျသော extension ပေါင်းထည့်နည်းလမ်းညွှန်များကိုလိုက်နာပါ +# ဘရောက်ဇာအလိုက် ထပ်ဆောင်းပုံတင်ခြင်း လမ်းညွှန်ချက်များကိုလိုက်နာပါ ``` ### Space Game Projects @@ -64,7 +64,7 @@ npm install ```bash cd 6-space-game/solution npm install -# index.html ကို browser တွင်ဖွင့်ပါ သို့မဟုတ် Live Server ကို အသုံးပြုပါ +# index.html ကို browser မှာ ဖွင့်ပါ သို့မဟုတ် Live Server ကို အသုံးပြုပါ ``` ### Chat Project (Python Backend) @@ -72,7 +72,7 @@ npm install ```bash cd 9-chat-project/solution/backend/python pip install openai -# GITHUB_TOKEN ပတ်ဝန်းကျင်အပြောင်းအလဲအစားထိုးပြုလုပ်ရန် +# GITHUB_TOKEN ပတ်ဝန်းကျင် သတ်မှတ်ချက်ကို သတ်မှတ်ပါ python api.py ``` @@ -80,29 +80,29 @@ python api.py ### For Content Contributors -1. သင့် GitHub အကောင့်သို့ လှည်းရိုက်ပါ -2. သင့်လှည်းကို ဒေသခံတွင် ကွန်ပျူတာသို့ကလုဏ်းလုပ်ပါ -3. မိမိပြင်ဆင်မည့်အတွက် ဘရင့်အသစ်တစ်ခု ဖန်တီးပါ -4. သင်ခန်းစာအကြောင်းအရာ သို့မဟုတ် ကုဒ်ဥပမာများ ပြုပြင်ပါ -5. သင့်အပြောင်းအလဲများကို သက်ဆိုင်ရာ စီမံကိန်း ဒိုင်ရေးတရီများတွင် စမ်းသပ်ပါ -6. ထောက်ပံ့မှုလမ်းညွှန်များကို လိုက်နာ၍ Pull Request တင်ပါ +1. သင်၏ GitHub မှာ repository ကို **fork** ပြုလုပ်ပါ +2. သင်၏ fork ကို လုပ်ဆောင်ရန် **clone** လုပ်ပါ +3. ပြင်ဆင်မှုများအတွက် **branch အသစ်** ဖန်တီးပါ +4. သင်ခန်းစာ အကြောင်းအရာ သို့မဟုတ် code ဥပမာများ ဆက်လက်ပြင်ဆင်ပါ +5. သက်ဆိုင်ရာ ပရောဂျက် directory များတွင် code ပြင်ဆင်မှုများ စမ်းသပ်ပါ +6. အညွှန်းလိုက်၍ pull request များတင်ပါ ### For Learners -1. ဂိုဒေါင်ကို လှည်းရိုက်သို့မဟုတ် ကလုဏ်းလုပ်ပါ -2. သင်ခန်းစာ ဒိုင်ရေးတရီများအား တစိတ်တပိုင်း နဲ့သွားပါ -3. သင်ခန်းစာတိုင်း၏ README ဖိုင်များ ဖတ်ပါ -4. https://ff-quizzes.netlify.app/web/ တွင် သင်ခန်းစာမတိုင်မှီ စစ်ဆေးမေးခွန်းများ ဖြေဆိုပါ -5. သင်ခန်းစာဒိုင်ရေးတရီများတွင် ကုဒ်ဥပမာများ အလုပ်လုပ်ပါ -6. အပ်စာများနှင့် စိန်ခေါ်မှုများ ပြီးစီးပါ -7. သင်ခန်းစာပြီးနောက် စစ်ဆေးမေးခွန်းများ ဖြေဆိုပါ +1. Repository ကို fork သို့မဟုတ် clone လုပ်ပါ +2. သင်ခန်းစာ directory များကို အဆင့်လိုက် သွားပါ +3. တစ်ခုစီသင်ခန်းစာ README ဖတ်ပါ +4. https://ff-quizzes.netlify.app/web/ တွင် သင်ခန်းစာ မတိုင်မှီ စစ်တမ်းများ ဖြေဆိုပါ +5. သင်ခန်းစာ folder တွင် code ဥပမာများ လေ့လာပါ +6. အလုပ်အပ်နှင့် စိန်ခေါ်မှုများ ပြီးမြောက်ပါ +7. သင်ခန်းစာ ပြီးနောက် စစ်တမ်းများ ဖြေဆိုပါ ### Live Development -- **စာတမ်းများ**: root မှ `docsify serve` အမိန့် ဖွင့်ပါ (port 3000) -- **Quiz App**: quiz-app ဒိုင်ရေးတရီတွင် `npm run dev` ဖြင့် သက်ဝင်အောင်လုပ်ပါ -- **စီမံကိန်းများ**: HTML စီမံကိန်းများအတွက် VS Code Live Server extension အသုံးပြုပါ -- **API စီမံကိန်းများ**: သက်ဆိုင်ရာ API ဒိုင်ရေးတရီတွင် `npm start` ပြုလုပ်ပါ +- **စာတမ်းရေးဆွဲခြင်း**: root တွင် `docsify serve` လုပ်ပါ (port 3000) +- **Quiz App**: quiz-app directory တွင် `npm run dev` ပြုလုပ်ပါ +- **ပရောဂျက်များ**: HTML ပရောဂျက်များအတွက် VS Code Live Server extension အသုံးပြုပါ +- **API ပရောဂျက်များ**: သက်ဆိုင်ရာ API directory တွင် `npm start` ပြုလုပ်ပါ ## Testing Instructions @@ -110,85 +110,85 @@ python api.py ```bash cd quiz-app -npm run lint # ကုဒ်ပုံစံပြဿနာများကိုစစ်ဆေးပါ -npm run build # ဆောက်လုပ်မှုအောင်မြင်မှုကိုအတည်ပြုပါ +npm run lint # သို့သော် အညွှန်းစတိုင်ပြဿနာများကို စစ်ဆေးပါ +npm run build # ဆောက်လုပ်မှုအောင်မြင်သည်ကို အတည်ပြုပါ ``` ### Bank API Testing ```bash cd 7-bank-project/api -npm run lint # ကုဒ်ပုံစံပြဿနာများကိုစစ်ဆေးပါ -node server.js # ပြတ်မှုများမရှိဘဲ ဆာဗာစတင်မှုကိုအတည်ပြုပါ +npm run lint # ကုဒ်ပုံစံပြဿနာများကို စစ်ဆေးပါ +node server.js # အမှား မရှိဘဲ ဆာဗာ ချိန်ဆက်စတင်မှုကို အတည်ပြုပါ ``` ### General Testing Approach -- ဤသည်မှာ စုံလုံသော အလိုအလျောက် စမ်းသပ်မှုများ မပါဝင်သည့် ပညာရေးဂိုဒေါင်ဖြစ်သည် -- လက်တွေ့စမ်းသပ်မှုတွင် အာရုံစိုက်ရန် - - ကုဒ်ဥပမာများ အမှားမရှိပြေးနိုင်ခြင်း - - စာတမ်း တွင် လင့်ခ်များ သင့်တော်စွာ လည်ပတ်ခြင်း - - စီမံကိန်း အောင်မြင်စွာ တည်ဆောက်ခြင်း - - ဥပမာများသည် အကောင်းဆုံး လေ့လာသင်ယူနည်းများကို လိုက်နာခြင်း +- ဤသည်မှာ တိကျသော အလိုအလျောက် စမ်းသပ်မှု မပါဝင်သော ပညာရေး repository ဖြစ်သည် +- လက်တို စမ်းသပ်မှုတွင် အောက်ပါအချက်များ အဓိကထားသည် - + - Code ဥပမာများ အမှား မရှိစွာ လည်ပတ်ခြင်း + - စာတမ်းရေးဆွဲမှု လင့်ခ်များ တိကျမှန်ကန်စွာ ဆက်သွယ်နိုင်ခြင်း + - ပရောဂျက် တည်ဆောက်မှု အောင်မြင်စွာ ပြီးစီးခြင်း + - ဥပမာများသည် အကောင်းဆုံးကွင်းဆက်နှင့် ကိုက်ညီမှု ### Pre-submission Checks -- package.json ပါဝင်သည့် ဒိုင်ရေးတရီများတွင် `npm run lint` အလုပ်လုပ်ပါ -- markdown link များ သေချာစွာ စစ်ဆေးပါ -- ကုဒ်ဥပမာများအား browser သို့မဟုတ် Node.js တွင် စမ်းသပ်ပါ -- ဘာသာပြန်မှုသိမ်းထားမှု တိကျမှန်ကန်ကြောင်း စစ်ဆေးပါ +- package.json ပါရှိသည့် directory များတွင် `npm run lint` လုပ်ပါ +- markdown လင့်ခ်များမှန်ကန်မှု စစ်ဆေးပါ +- Browser သို့မဟုတ် Node.js တွင် code ဥပမာများ စမ်းသပ်ပါ +- ဘာသာပြန်မှုများ၏ ဖွဲ့စည်းမှု တိကျမှန်ကန်မှုစစ်ဆေးပါ ## Code Style Guidelines ### JavaScript -- ယနေ့ခေတ် ES6+ စတိုင်များ အသုံးပြုပါ -- စီမံကိန်းများတွင် ပေးထားသော အခြေခံ ESLint ဖိုင်များကို လိုက်နာပါ -- ပညာရေးအတွက် မျက်မှောက်နားလည်မှုလွယ်ကူရန် သေချာသည့် အမျိုးအမည်များ အသုံးပြုပါ -- သင်ယူလိုသူများအတွက် အကြောင်းပြုချက်များ ထည့်သွင်းရေးသားပါ -- Prettier ဖြင့် ပုံစံချိန်ညှိထားသောနေရာများတွင် အသုံးပြုပါ +- လက်ရှိ ES6+ စတိုင်သုံးရန် +- များသော project များတွင် ESLint configuration ကိုလိုက်နာရန် +- ပညာရေးအတွက် သင်အား လွယ်ကူစေရန် အဓိပ္ပါယ်ရှိ variable နဲ့ function နာမည်များသုံးရန် +- သင်ကြားမှုအတွက် ကြားဖြတ်ချက်များ ထည့်ရန် +- Prettier ဖြင့် format ပြုလုပ်မှု (configuration ရှိသည့်နေရာတွင်) ### HTML/CSS -- Semantic HTML5 အကြောင်းအရာအသုံးပြုပါ -- ရွေ့လျားတုံ့ပြန်မှု ဒီဇိုင်း ကို ထည့်သွင်းပါ -- ကလပ်အမည် များ ဖေါ်ပြပုံကွက်ကျစွာရေးသားပါ -- CSS နည်းပညာများကို သင်ယူသူများအတွက် ရှင်းလင်းဖေါ်ပြမှု များ ထည့်ပါ +- Semantic HTML5 elements အသုံးပြုရန် +- Responsive ဒီဇိုင်း အခြေခံချက်များ +- သန့်ရှင်းပြီး ရှင်းလင်းသော class နာမည်များ +- သင်သားများ အတွက် CSS နည်းပညာ ရှင်းလင်းပြောကြားမှုများ ### Python -- PEP 8 စတိုင် လမ်းညွှန်များ လိုက်နာပါ -- ပညာရေးအတွက် သေချာရှင်းလင်းသော ကုဒ်ဥပမာများ -- သင်ယူမှုအတွက် အထောက်အကူဖြစ်စေရန် Type hints အသုံးပြုပါ +- PEP 8 စတိုင်လ်လမ်းညွှန်များ +- သင်ထောက်အကူဖြစ်သော ကျယ်ပြန့်သော code ဥပမာများ +- အသုံးပြုသူအတွက် အကူအညီဖြစ်မည့် Type hints ထည့်သုံးရန် ### Markdown Documentation -- ခေါင်းစဉ်များ ဖော်ပြမှု တိကျရှင်းလင်းမှု -- ဘာသာပြန်ဖြစ်သည့် ကုဒ်ဘလော့များနှင့် ဘာသာဖော်ပြမှု -- အပိုဆောင်း ရင်းမြစ်များအား လင့်ခ်များပါဝင်သည် -- `images/` ဒိုင်ရေးတရီပြည့်စုံအပါအဝင် ပုံများနှင့် ရုပ်ပုံများ -- အားလုံးလက်လှမ်းမီစေရန် ဗဟိုသတ်မှတ် Alt texts များ +- ရှင်းရှင်းလင်းလင်း ခေါင်းစဉ်အဆင့်ခွဲခြားမှု +- ဘာသာပြန်သည့် language နဲ့ code-block များ +- အပိုဆောင်းအရင်းအမြစ် သွားရောက်ရန် link များ +- `images/` folder များရှိ screenshot နှင့် ပုံများ +- ပုံများအတွက် accessibility အတွက် Alt text ထည့်ရန် ### File Organization -- သင်ခန်းစာများကို တန်းတူ နေရာချထားမှု (1-getting-started-lessons, 2-js-basics, စသည်) -- စီမံကိန်းတိုင်းတွင် `solution/` နှင့် မကြာခဏ `start/` သို့မဟုတ် `your-work/` ဒိုင်ရေးတရီများရှိသည် -- သင်ခန်းစာအလိုက် `images/` ဖိုလ်ဒါထဲတွင် ပုံများ သိုလှောင်ထားခြင်း -- ဘာသာပြန်များကို `translations/{language-code}/` ဖိုလ်ဒါတွင် သိမ်းဆည်းထားခြင်း +- သင်ခန်းစာများကို နံပါတ်စဉ်လိုက် ဖြစ်ရန် (1-getting-started-lessons, 2-js-basics စသဖြင့်) +- project အသီးသီးတွင် `solution/` နှင့် မကြာခဏ `start/` သို့မဟုတ် `your-work/` directory များရှိသည် +- ပုံများကို သင်ခန်းစာအလိုက်သိုလှောင်ထားသော `images/` folder တွင်ရှိသည် +- ဘာသာပြန်ဖိုင်များကို `translations/{language-code}/` structure ဖြင့်ထားသည် ## Build and Deployment ### Quiz App Deployment (Azure Static Web Apps) -quiz-app သည် Azure Static Web Apps များတွင် တည်ဆောက်ရန် စံချိန်တင်ထားသည်- +quiz-app ကို Azure Static Web Apps deployment အတွက် တပ်ဆင်ထားသည် - ```bash cd quiz-app -npm run build # dist/ ဖိုလဒါကို ဖန်တီးသည် -# main တွင် push လုပ်သည့်အခါ GitHub Actions workflow ဖြင့် Deploy လုပ်သည် +npm run build # dist/ ဖိုလ်ဒါကို ဖန်တီးသည် +# main သို့ push လုပ်သောအခါ GitHub Actions workflow မှတဆင့် တင်ပို့သည် ``` -Azure Static Web Apps စနစ်ဖောင့်ကွက်များ- +Azure Static Web Apps configuration: - **App location**: `/quiz-app` - **Output location**: `dist` - **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` @@ -196,86 +196,87 @@ Azure Static Web Apps စနစ်ဖောင့်ကွက်များ- ### Documentation PDF Generation ```bash -npm install # docsify-to-pdf ကို ထည့်သွင်းပါ -npm run convert # docs မှ PDF ကို ဖန်တီးပါ +npm install # docsify-to-pdf ကို 설치 하십시오 +npm run convert # docs မှ PDF ကို 생성하십시오 ``` ### Docsify Documentation ```bash -npm install -g docsify-cli # Docsify ကို စုစုပေါင်း ထည့်သွင်းပါ -docsify serve # localhost:3000 တွင် ဝန်ဆောင်မှုပေးပါ +npm install -g docsify-cli # Docsify ကို ကမ္ဘာလုံးဆိုင်ရာ ထည့်သွင်းပါ +docsify serve # localhost:3000 တွင် စနစ်ဆောင်ပါ ``` ### Project-specific Builds -စီမံကိန်းတိုင်းတွင် ကိုယ်ပိုင် တည်ဆောက်မှု လုပ်ငန်းစဉ်များ ရှိနိုင်သည်- -- Vue စီမံကိန်းများ: `npm run build` ဖြင့် ထုတ်လုပ်မှု bundle များ ပြုလုပ်ခြင်း -- Static စီမံကိန်းများ: တည်ဆောက်မှုပြုလုပ်မှု လိုအပ်မှု မရှိပါ၊ ဖိုင်များကို တိုက်ရိုက် ဝန်ဆောင်မှုပေးခြင်း +ပရောဂျက် directory တစ်ခုချင်းစီတွင် build လုပ်ငန်းစဉ် များလည်း ရှိနိုင်သည် - +- Vue ပရောဂျက်များ: `npm run build` မှာ production bundle များဖန်တီးသည် +- Static ပရောဂျက်များ: build လုပ်ရန် မလိုအပ်ပါ၊ ဖိုင်များကိုတန်းတူ serve ပြုလုပ်သည် ## Pull Request Guidelines ### Title Format -ပြောင်းလဲမှု နေရာအတိုင်း ဖြည့်သွင်းဖေါ်ပြရန်- -- `[Quiz-app] သင်ခန်းစာ X အတွက် Quiz အသစ် ထည့်ရန်` -- `[Lesson-3] Terrarium စီမံကိန်းတွင် အမှားစာလုံးပြင်ဆင်ခြင်း` -- `[Translation] သင်ခန်းစာ ၅ အတွက် စပိန်ဘာသာပြန်ထည့်ခြင်း` -- `[Docs] Setup လမ်းညွှန်ချက်များ ပြင်ဆင်ခြင်း` +ပြင်ဆင်မှု လုပ်ဆောင်သော နေရာကို ပြသသည့် ရှင်းလင်းအသိပေးခေါင်းစဉ်များ၌ များသုံးရန် - +- `[Quiz-app] သင်ခန်းစာ X အတွက် quiz အသစ်ထည့်ပါ` +- `[Lesson-3] terrarium ပရောဂျက်တွင် အမှားတစ်ခု ပြင်ဆင်ပါ` +- `[Translation] သင်ခန်းစာ ၅ အတွက် စပိန်ဘာသာ ပြန်တင်ဘှဲ့ပါ` +- `[Docs] Setup အဆင့်ညွှန်ကြားချက်များ အပ်ဒိတ်ပြုလုပ်ပါ` ### Required Checks -PR တင်ပြီးမတိုင်မီ- +PR တင်မည့်အချိန် မတိုင်မီ - -1. **ကုဒ်အရည်အသွေး**: - - သက်ဆိုင်ရာ စီမံကိန်း ဒိုင်ရေးတရီတွင် `npm run lint` ကို အသုံးပြု၍ အမှားများ ဖော်ထုတ်ရန် - - လုံးလုံးမကျန် အမှား နှင့် သတိပေးချက် များ ပြင်ဆင်ပါ +1. **Code ပြည့်စုံမှု** + - သက်ဆိုင်ရာ project directory များတွင် `npm run lint` ကို လုပ်ပါ + - အမှားများနှင့် အသိပေးချက်များကို ပြင်ဆင်ပါ -2. **တည်ဆောက်မှု စစ်ဆေးခြင်း**: - - `npm run build` (လိုအပ်ပါက) အလုပ်လုပ်၍ အမှားမရှိစေရန် +2. **Build စစ်ဆေးခြင်း** + - လိုအပ်ပါက `npm run build` ပြုလုပ်ပါ + - build အမှား မရှိပါစေ -3. **လင့်ခ် စစ်ဆေးမှု**: - - markdown link များအားလုံး ရှင်းလင်းမှန်ကန်စွာ လည်ပတ်ခြင်း - - ဓာတ်ပုံ နှင့် ရုပ်ပုံများ ရောက်ရှိမှု +3. **Link စစ်ဆေးခြင်း** + - Markdown လင့်ခ်များအားလုံးကို စမ်းသပ်ပါ + - ဓာတ်ပုံများ ရှိမရှိ စစ်ဆေးပါ -4. **အကြောင်းအရာ ပြန်လည် သုံးသပ်ခြင်း**: - - စကားလုံးမှား၊ သဒ္ဒါမှားများကို စစ်ချက်ပေးခြင်း - - ကုဒ်ဥပမာများ သင်ယူရန်တိကျမှန်ကန်စွာ ရှိခြင်း - - ဘာသာပြန်များသည် မူလ အဓိပ္ပါယ်ကို ထိန်းသိမ်းထားခြင်း +4. **အကြောင်းအရာ စစ်တမ်း** + - စာလုံးပျက်မှားနှင့် သဒ္ဒါ အမှား မရှိစေရန် စစ်ဆေးပါ + - Code ဥပမာများ မှန်ကန်ပြီး သင်ကြားမှုရှိစေရန် စစ်ဆေးပါ + - ဘာသာပြန်မှုများ အဓိပ္ပါယ်မပြောင်းဘဲ တိကျမှုရှိစေရန် စစ်ဆေးပါ ### Contribution Requirements -- Microsoft CLA ကို သဘောတူပါ (PR ပထမဆုံးပြုလုပ်ချိန် တွင် အလိုအလျောက် စစ်ဆေးမည်) -- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) လိုက်နာပါ -- အသေးစိတ် လမ်းညွှန်ချက်များအတွက် [CONTRIBUTING.md](./CONTRIBUTING.md) ကို ကြည့်ပါ -- PR ဖေါ်ပြချက်တွင် လိုအပ်ပါက ရှေ့ပြေး ဥပဒေအမှတ်များကို ထည့်သွင်းပါ +- Microsoft CLA ကို သဘောတူရပါမည် (ပထမ PR တွင် အလိုအလျောက် စစ်ဆေးသည်) +- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) ကို နောက်ဆုံးလိုက်နာရမည် +- အသေးစိတ်အတွက် [CONTRIBUTING.md](./CONTRIBUTING.md) ကို ကြည့်ပါ +- PR ဖေါ်ပြချက်တွင် issue နံပါတ်များကို ရည်ညွှန်းပါ ### Review Process -- PR များသည် ပြုပြင်သူများနှင့် မိသားစုအသိုင်းအဝိုင်း အကြား ကြည့်သုံးစစ်ဆေးခြင်း -- ပညာရေး ရည်ရွယ်ချက် ဦးစားပေး စစ်ဆေးခြင်း -- ကုဒ်ဥပမာများသည် လောလောဆယ် အကောင်းဆုံး လေ့လာသင်ယူနည်းများနှင့် ကိုက်ညီစေရန် -- ဘာသာပြန်အရည်အသွေးနှင့် ယဉ်ကျေးမှု သင်္ကေတတပ်ဖွဲ့မှု ရှိအောင် စစ်ဆေးခြင်း +- PR များသည် Maintainer များနှင့် အသိုင်းအဝိုင်းအားဖြင့် စစ်ဆေးသည် +- ပညာရေး ရှင်းလင်းမှုကို အလေးထားသည် +- Code ဥပမာများသည် လက်ရှိအကောင်းဆုံးနည်းလမ်းများနှင့် မညီမှု မရှိစေရန် ကြိုတင်စစ်ဆေးသည် +- ဘာသာပြန်မှုများအား တိကျမှုနှင့် ယဉ်ကျေးမှုအရ သက်ဆိုင်မှုရှိစေရန် ပြန်လည်သုံးသပ်သည် ## Translation System ### Automated Translation -- GitHub Actions တွင် နေရာယူထားသည့် co-op-translator workflow ကို အသုံးပြုသည် -- ၅၀ ကျော်ဘာသာစကားသို့ အလိုအလျောက် ဘာသာပြန်သည် -- မူရင်းဖိုင်များသည် မူလ ဒိုင်ရေးတရီများတွင် -- ဘာသာပြန်ထားသောဖိုင်များသည် `translations/{language-code}/` တွင် +- GitHub Actions သုံးပြီး co-op-translator workflow အသုံးပြုသည် +- ၅၀ ကျော်သော ဘာသာစကားများအတွက် အလိုအလျောက် ဘာသာပြန်ပေးသည် +- မူလဖိုင်များသည် main directory များတွင်ရှိသည် +- ဘာသာပြန်ထားသော ဖိုင်များကို `translations/{language-code}/` ထဲတွင် သိမ်းဆည်းထားသည် ### Adding Manual Translation Improvements -1. `translations/{language-code}/` တွင် ဖိုင် ရှာပါ -2. ဖွဲ့စည်းပုံကို ထိန်းသိမ်းပြီး တိုးတက်အောင် ပြုပြင်ပါ -3. ကုဒ်ဥပမာများ အသုံးပြုနိုင်မှု ရှိသည်ကို သေချာစေရန် -4. ဒေသဆိုင်ရာ Quiz အကြောင်းအရာ စမ်းသပ်ပါ +1. `translations/{language-code}/` တွင် ဖိုင်များကို ရှာတွေ့ပါ +2. ဖွဲ့စည်းမှုမပြောင်းလဲဘဲ တိုးတက်မှုများ ပြုလုပ်ပါ +3. Code ဥပမာများ မပျက်မကွက် ဆက်လက်လုပ်ဆောင်နိုင်စေရန် သတိပြုပါ +4. ညှိနှိုင်းထားသော Quiz အကြောင်းအရာ များကို စမ်းသပ်ပါ ### Translation Metadata -ဘာသာပြန် ဖိုင်များတွင် metadata ခေါင်းစဉ်ပါရှိသည်- +ဘာသာပြန် ဖိုင်များတွင် မီတာဒေတာ ခေါင်းစီးပါဝင်သည် - ```markdown -**သတိပြုချက်** -ဤစာရွက်ကို AI ဘာသာပြန်ခြင်းဆော့ဖ်ဝဲဖြစ်သော [Co-op Translator](https://github.com/Azure/co-op-translator) ဖြင့် ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည်တိကျမှန်ကန်မှုအတွက် ကြိုးပမ်းနေသော်လည်း အလိုအလျောက် ဘာသာပြန်ခြင်းတွင် အမှားများ သို့မဟုတ် မှားယွင်းချက်များ ရှိနိုင်သည်ကို သိရှိထားရန် မေတ္တာရပ်ခံအပ်ပါသည်။ မူရင်းစာရွက်ကို မူလဘာသာဖြင့်သာ မှန်ကန်သည့် မူရင်းအရင်းအမြစ်အဖြစ်ယူဆသင့်ပါသည်။ အရေးကြီးသည့် သတင်းအချက်အလက်များအတွက် ကျွမ်းကျင်သော လူသားဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်ချက်ကို အသုံးပြုမှုကြောင့် ဖြစ်ပေါ်လာသော မည်သည့် ပဋိပက္ခ သို့မဟုတ် မှားနေမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မကောက်ခံပါ။ +**ကြွင်းချက်**: +ဤစာရွက်ကို AI ဘာသာပြန်စနစ်ဖြစ်သော [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် မှန်ကန်မှုအတွက် ကြိုးစားနေသော်လည်း၊ အလိုအလျောက် ဘာသာပြန်ခြင်းကြောင့် အမှားများ သို့မဟုတ် မှန်ကန်မှုလျော့ပါးမှုများရှိနိုင်ကြောင်း သိရှိထားပေးပါ။ မူရင်းစာရွက်ကို မူလဘာသာဖြင့် တရားဝင်အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသည့် သတင်းအချက်အလက်များအတွက် မူရင်း စာသားအရ ပြည့်စုံသော လူမှု့ဘာသာပြန်သား အတတ်ပညာရှင်တွေ ရရှိရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုအသုံးပြုမှုကြောင့် ဖြစ်ပေါ်နိုင်သည့် နားလည်မှုအမှားများ သို့မဟုတ် ကန့်သတ်ချက်များအတွက် ကျွန်ုပ်တို့ တာဝန်မယူပါ။ \ No newline at end of file diff --git a/translations/uk/.co-op-translator.json b/translations/uk/.co-op-translator.json index 1c6393048..4e56773e9 100644 --- a/translations/uk/.co-op-translator.json +++ b/translations/uk/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "bec5e35642176d9e483552bfc82996d8", - "translation_date": "2026-03-06T17:09:40+00:00", + "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d", + "translation_date": "2026-03-27T23:02:16+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "uk" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-03-06T17:19:32+00:00", + "translation_date": "2026-03-27T23:09:23+00:00", "source_file": "AGENTS.md", "language_code": "uk" }, diff --git a/translations/uk/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/uk/1-getting-started-lessons/1-intro-to-programming-languages/README.md index eff0ead86..0b6d0a4a0 100644 --- a/translations/uk/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/uk/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,100 +1,100 @@ # Вступ до мов програмування та сучасних інструментів розробника -Привіт, майбутній розробнику! 👋 Чи можу я розповісти тобі дещо, що досі викликає у мене мурашки щодня? Ти ось-ось дізнаєшся, що програмування — це не просто про комп’ютери, а про справжні суперсили, які допомагають втілити найсміливіші твої ідеї у життя! +Привіт, майбутній розробнику! 👋 Можна розповісти тобі щось, що досі щодня викликає у мене мурашки по шкірі? Ти от-от відкриєш для себе, що програмування — це не просто про комп’ютери, а про справжні суперсили, які допомагають втілити в життя найсміливіші ідеї! -Знаєш той момент, коли ти користуєшся улюбленим додатком, і все просто працює ідеально? Коли ти натискаєш кнопку, і стається щось абсолютно чарівне, що змушує сказати: «Вау, як вони це ЗРОБИЛИ?» Ну, хтось саме такий, як ти — мабуть, сидить у власній улюбленій кав’ярні о 2-й ночі з третім еспресо — написав код, який створив цю магію. І ось що тебе здивує: наприкінці цього уроку ти не лише зрозумієш, як вони це зробили, а й сам захочеш спробувати! +Ти знаєш той момент, коли користуєшся улюбленим додатком і все працює ідеально? Коли натискаєш кнопку і трапляється щось абсолютно чарівне, що змушує тебе сказати: «вау, як вони це ЗРОБИЛИ?» Ну от, хтось, як ти — мабуть, сидячи у своєму улюбленому кафе о 2-й ночі з третім еспресо — написав код, який створив цю магію. І ось що тебе точно вразить: наприкінці цього уроку ти не лише зрозумієш, як вони це зробили, а й сам будеш прагнути спробувати! -Дивись, я цілком розумію, якщо програмування здається зараз страшним. Коли я починав, я чесно думав, що треба бути гением з математики або програмувати з п’яти років. Але ось що повністю змінило мій погляд: програмування — це саме як навчитися вести розмови новою мовою. Спочатку вивчаєш «привіт» і «дякую», потім замовляєш каву, а за мить ти вже ведеш глибокі філософські бесіди! Тільки у цьому випадку ти розмовляєш з комп’ютерами, і, чесно? Вони — найтерплячливіші співрозмовники: не засуджують помилки і завжди раді спробувати знову! +Дивись, я цілком розумію, якщо зараз програмування здається тобі страшним. Коли я починав, чесно думав, що треба бути якимось математичним генієм або кодувати з п'яти років. Але ось що остаточно змінило мій погляд: програмування — це точно як вивчення нової мови, щоб спілкуватися. Спершу ти вивчаєш "привіт" і "дякую", потім можеш замовити каву, а згодом ведеш глибокі філософські бесіди! Але в цьому випадку ти спілкуєшся з комп’ютерами, і, чесно? Вони — найбільш терплячі співрозмовники, які тільки можуть бути: ніколи не засуджують твої помилки і завжди раді спробувати знову! -Сьогодні ми дослідимо неймовірні інструменти, що роблять сучасну веб-розробку не просто можливою, а справді захопливою. Я говорю про ті самі редактори, браузери та робочі процеси, що використовують розробники Netflix, Spotify і твоєї улюбленої інді-студії. І ось що змусить тебе танцювати від радості: більшість цих професійних, індустріальних інструментів — абсолютно безкоштовні! +Сьогодні ми дослідимо неймовірні інструменти, які роблять сучасну веб-розробку не просто можливою, а дійсно захопливою. Я говорю про ті самі редактори, браузери та робочі процеси, які щодня використовують розробники в Netflix, Spotify та твоїй улюбленій інді-студії додатків. І от що змусить тебе потанцювати від радості: більшість цих професійних, промислових інструментів абсолютно безкоштовні! ![Intro Programming](../../../../translated_images/uk/webdev101-programming.d6e3f98e61ac4bff.webp) -> Sketchnote від [Tomomi Imura](https://twitter.com/girlie_mac) +> Скетчнот від [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Ваша подорож програмуванням сьогодні - section Discover + title Ваша подорож у програмуванні сьогодні + section Відкрийте для себе Що таке програмування: 5: You Мови програмування: 4: You Огляд інструментів: 5: You - section Explore + section Досліджуйте Редактори коду: 4: You Браузери та інструменти розробника: 5: You Командний рядок: 3: You - section Practice - Детектив мови: 4: You - Вивчення інструментів: 5: You + section Практика + Детектив мов: 4: You + Дослідження інструментів: 5: You Спілкування в спільноті: 5: You ``` -## Перевіримо, що ти вже знаєш! +## Давай подивимося, що ти вже знаєш! -Перш ніж поринути у веселощі, мені цікаво – що ти вже знаєш про цей світ програмування? І слухай, якщо ти дивишся на ці питання і думаєш: «Я зовсім нічого не знаю про це,» — це не просто нормально, це ідеально! Це означає, що ти якраз у потрібному місці. Подумай про цю вікторину як про розім’янку перед тренуванням – ми просто розігріваємо мозок! +Перед тим, як поринути у веселощі, мені цікаво — що ти вже знаєш про цей світ програмування? І слухай, якщо ти зараз дивишся на ці питання і думаєш: «Я взагалі не маю жодного уявлення про це», — це не просто нормально, це ідеально! Це означає, що ти саме там, де треба. Уяви цей тест як розминку перед тренуванням — ми просто готуємо м’язи мозку! -[Пройди вступний тест](https://ff-quizzes.netlify.app/web/) +[Пройти попередній тест](https://ff-quizzes.netlify.app/web/) -## Подорож, в яку ми вирушаємо разом +## Пригода, яку ми збираємося пройти разом -Окей, я справді шалено радію тому, що ми сьогодні вивчатимемо! Серйозно, хотів би побачити твоє обличчя, коли деякі з цих концепцій дійдуть до тебе. Ось неймовірна подорож, яку ми проходимо разом: +Окей, я реально стрибатиму від захвату через те, що ми сьогодні дослідимо! Щиро хочу побачити твоє обличчя, коли деякі концепції нарешті стануть зрозумілими. Ось неймовірна подорож, на яку ми вирушаємо разом: -- **Що таке програмування насправді (і чому це найкрутіша річ у світі!)** – Ми відкриємо, як код — це невидима магія, що живить все навколо: від сигналізації, яка якимось чином знає, що сьогодні понеділок, до алгоритму, що ідеально підбирає рекомендації Netflix -- **Мови програмування та їх дивовижні особистості** – Уяви, що ти потрапив на вечірку, де кожна людина має унікальні суперсили й способи розв’язувати проблеми. Саме так виглядає світ мов програмування, і тобі сподобається знайомство з ними! -- **Основні будівельні блоки, що творять цифрову магію** – Подумай про це як про найкращий творчий набір LEGO. Як тільки зрозумієш, як ці деталі поєднуються, ти усвідомиш, що можеш створити буквально все, що забажає твоя уява -- **Професійні інструменти, що дадуть тобі відчуття чарівної палички** – Я не перебільшую – ці інструменти справді змусить тебе відчути, що володієш суперсилами, а найкращє — це ті самі інструменти, що використовують професіонали! +- **Що таке програмування насправді (і чому це найкрутіша річ у світі!)** – Ми відкриємо, як код — це буквально невидима магія, яка живить усе навколо, від будильника, що якимось чином знає, що зараз ранок понеділка, до алгоритму, що ідеально підбирає рекомендації на Netflix +- **Мови програмування та їх дивовижні особистості** – Уяви вечірку, де кожна людина має зовсім різні суперсили й способи розв’язання проблем. Оце світ мов програмування, і ти будеш у захваті їх знайомлячи! +- **Основні будівельні блоки, які створюють цифрову магію** – Уяви їх як найкращий конструктор LEGO. Щойно розберешся, як ці частини складаються разом, ти зрозумієш, що можеш будувати буквально все, що тільки уявить твоя фантазія +- **Професійні інструменти, які змушують тебе відчути, що у тебе в руках чарівна паличка** – Не перебільшую — ці інструменти справді подарують тобі відчуття суперсил, і найкраща частина — це саме ті, що використовують профі! -> 💡 **Ось що потрібно знати**: Не намагайся запам’ятати все сьогодні! Просто відчуй іскру захоплення тим, що можливо. Деталі закріпляться природно, коли ми практикуватимемось разом – ось як відбувається справжнє навчання! +> 💡 **Пам’ятай:** навіть не думай сьогодні все запам’ятати! Зараз я хочу, щоб ти відчув іскру захоплення можливостями. Деталі запам’ятаються природно, коли ми практикуватимемось разом — ось як відбувається справжнє навчання! > Ти можеш пройти цей урок на [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -## Отже, що таке програмування? +## То що ж таке *програмування*? -Добре, розглянемо головне питання: що ж насправді таке програмування? +Добре, спробуємо розв’язати мільйонне питання: що насправді таке програмування? -Розкажу історію, яка повністю змінила моє уявлення про це. Минулого тижня я намагався пояснити мамі, як користуватися новим пультом від розумного ТВ. Я зловив себе на тому, що кажу: «Натисни червону кнопку, але не велику червону, а маленьку червону зліва… ні, твоя інша ліва… добре, тепер потримай дві секунди, не одну, не три…» Знайомо? 😅 +Розповім історію, яка зовсім змінила моє сприйняття. Минулого тижня я пояснював мамі, як користуватися нашим новим пультом від смарт-телевізора. Я раптом усвідомив, що кажу щось на кшталт: «Натисни червону кнопку, але не велику червону, а маленьку зліва… ні, з іншого лівого боку… добре, тепер тримай дві секунди, не одну, не три…» Знайомо? 😅 -Це програмування! Це мистецтво давати надзвичайно докладні, крок за кроком, інструкції чомусь дуже потужному, але що потребує пояснення до найменших деталей. Тільки замість пояснень мамі (яка може спитати «яку червону кнопку?») ти пояснюєш комп’ютеру, який просто виконує те, що ти сказав, навіть якщо ти переплутав. +Оце і є програмування! Це мистецтво давати надзвичайно детальні, покрокові інструкції чомусь неймовірно потужному, але що потребує чіткого викладу. Лише замість того, щоб пояснювати мамі (яка може запитати «яку саме червону кнопку?!»), ти пояснюєш комп’ютеру (який виконує саме те, що ти сказав, навіть якщо ти мав на увазі дещо інше). -Ось що мене вразило, коли я вперше це зрозумів: комп’ютери насправді дуже прості в основі. Вони розуміють буквально дві речі — 1 та 0, що по суті означає «так» і «ні» або «ввімкнено» і «вимкнено». Ось і все! Але тут починається магія — нам не потрібно говорити на 1 і 0, як у Матриці. Саме тут допомагають **мови програмування**. Вони — наче найкращий перекладач у світі, який бере твої нормальні людські думки і перетворює їх на мову комп’ютера. +Ось що мене шокувало, коли я це вперше дізнався: комп’ютери насправді дуже прості в основі. Вони буквально розуміють лише дві речі — 1 і 0, що по суті означає «так» і «ні» або «ввімкнено» і «вимкнено». Ось і все! Але ось де починається магія — нам не потрібно говорити на 1 і 0, ніби ми у фільмі «Матриця». Тут на допомогу приходять **мови програмування**. Вони — ніби найкращий у світі перекладач, який перетворює твої звичайні людські думки в мову комп’ютера. -І ось що досі викликає у мене мурашки щоранку: буквально *все* цифрове у твоєму житті почалося з когось такого, як ти, мабуть, у піжамі з горням кави, що друкує код на ноутбуці. Той фільтр в Instagram, що робить тебе бездоганним? Хтось його закодував. Рекомендація, що привела тебе до нової улюбленої пісні? Розробник створив цей алгоритм. Додаток, що допомагає розділити рахунок за вечерю з друзями? Так, хтось подумав «це дратує, я можу це полагодити» і зробив це! +І ось що й досі щодня мене вражає: буквально *усе* цифрове у твоєму житті почалося з когось, як ти, мабуть, у піжамі з чашкою кави, який друкує код на ноутбуці. Той інстаграм-фільтр, який робить тебе ідеальним? Хтось це закодив. Рекомендація, завдяки якій ти знайшов свою нову улюблену пісню? Розробник створив цей алгоритм. Додаток, що допомагає розділити рахунок за вечерю з друзями? Саме так, хтось подумав: «Це дратує, я, напевно, міг би це полагодити» — і зробив це! -Коли ти навчаєшся програмувати, ти не просто здобуваєш нову навичку — ти стаєш частиною неймовірної спільноти розв’язувачів проблем, які проводять дні, думаючи: «А що як я зроблю щось, що зробить чийсь день трошки кращим?» Чесно кажучи, чи є щось крутіше за це? +Навчаючись програмувати, ти не просто опановуєш нову навичку — ти стаєш частиною неймовірної спільноти розв’язувачів проблем, які щодня думають: «А що якщо я збудую щось, що зробить комусь день трішки кращим?» Справді, чи може бути крутіше за це? -✅ **Цікавинка**: Ось що круто дослідити, якщо матимеш вільну хвилинку — хто, на твою думку, був першим комп’ютерним програмістом у світі? Підказка: це може бути не той, кого ти очікуєш! Історія цієї людини надзвичайно захоплива і показує, що програмування завжди було про креативне розв’язання проблем і нестандартне мислення. +✅ **Весела фактологія**: Ось що дуже цікаво пошукати, коли матимеш вільну хвилинку — хто, на твою думку, був першим у світі програмістом? Дам тобі підказку: це, мабуть, не те, що ти очікуєш! Історія цієї людини абсолютно захоплива і показує, що програмування завжди було про творчий підхід і нестандартне мислення. -### 🧠 **Час перевірити себе: Як ти почуваєшся?** +### 🧠 **Час перевірки: Як ти почуваєшся?** -**Зроби паузу й подумай:** -- Чи стало зараз зрозуміло, що означає «давати інструкції комп’ютерам»? -- Чи можеш уявити якусь щоденну задачу, яку б хотів автоматизувати за допомогою програмування? -- Які питання виникають у тебе про весь цей світ програмування? +**Виділи хвилинку, щоб подумати:** +- Тепер тобі зрозуміла ідея «давати інструкції комп’ютерам»? +- Чи можеш уявити якусь щоденну справу, яку хочеш автоматизувати за допомогою програмування? +- Які запитання у тебе виникають щодо всього цього програмування? -> **Пам’ятай**: це нормально, якщо деякі концепції здаються розмитими зараз. Вивчення програмування — як навчання новій мові, потрібно час, щоб мозок налагодив потрібні зв’язки. Ти чудово справляєшся! +> **Пам’ятай:** абсолютно нормальна річ, якщо деякі поняття поки що трохи туманні. Вивчення програмування — це як вивчення нової мови, потрібно час, щоб мозок проклав ці нейронні шляхи. Ти робиш чудово! -## Мови програмування — це як різні смаки магії +## Мови програмування — це ніби різні смаки магії -Окей, зараз прозвучить дивно, але лишайся зі мною — мови програмування дуже схожі на різні музичні стилі. Подумай: є джаз, який плавний і імпровізаційний, рок — потужний і прямолінійний, класика — елегантна і структурована, а хіп-хоп — креативний і експресивний. У кожного стилю своя атмосфера, своє коло палких фанатів, і кожен ідеально підходить для різного настрою та випадків. +Окей, це може прозвучати дивно, але лишайся зі мною — мови програмування дуже схожі на різні типи музики. Подумай: є джаз, який плавний і імпровізаційний, рок — потужний і прямолінійний, класична — витончена і структурована, і хіп-хоп — креативний і яскравий. Кожен стиль має свій настрій, власну аудиторію пристрасних фанів, і кожен ідеально підходить для різних моментів і подій. -Мови програмування працюють так само! Ти ж не використовуватимеш одну і ту саму мову для створення веселої мобільної гри та для опрацювання величезних масивів кліматичних даних, як не будеш слухати дез-метал на занятті йогою (ну, більшість занять, принаймні! 😄). +Мови програмування працюють так само! Ти ж не використовував би ту ж мову, щоб створити веселу мобільну гру, що й для обробки величезної кількості кліматичних даних, так само як і не грав би дез-метал на заняттях йогою (ну, принаймні в більшості занять! 😄). -А ось що мене вражає кожного разу, коли я про це думаю: ці мови — наче найтерплячіший та найрозумніший перекладач у світі, який сидить поруч з тобою. Ти виражаєш ідеї так, як комфортно твоєму людському мозку, а вони роблять усю складну роботу, перекладаючи це на 1 і 0, якими розмовляють комп’ютери. Це як мати друга, який ідеально володіє і «людською творчістю», і «комп’ютерною логікою» — і він ніколи не втомлюється, не потребує кави і не засуджує, якщо ти задаєш одне і те саме питання двічі! +Але ось що мене кожного разу вражає: ці мови — ніби найбільш терплячий і розумний перекладач у світі, який сидить поруч з тобою. Ти можеш висловлювати свої ідеї так, як природно твому людиноподібному мозку, а вони беруть на себе всю складність перекладу в 1 і 0, якою справді розмовляють комп’ютери. Це як мати друга, який досконало володіє і «людською креативністю», і «комп’ютерною логікою» — і він ніколи не втомлюється, не бере перерву на каву і не засуджує, якщо ти повториш питання двічі! -### Популярні мови програмування та їх застосування +### Популярні мови програмування та їхнє призначення ```mermaid mindmap root((Мови програмування)) Web Development JavaScript - Магія фронтенда + Чарівність фронтенду Інтерактивні вебсайти TypeScript - JavaScript + типи + JavaScript + Типи Корпоративні додатки Data & AI Python - Дані науки + Наука про дані Машинне навчання Автоматизація R @@ -113,9 +113,9 @@ mindmap Systems & Performance C++ Ігри - Критична продуктивність + Критично для продуктивності Rust - Безпека пам’яті + Безпека пам'яті Системне програмування Go Хмарні сервіси @@ -123,59 +123,59 @@ mindmap ``` | Мова | Найкраще для | Чому популярна | |----------|----------|------------------| -| **JavaScript** | Веб-розробка, інтерфейси користувача | Працює в браузерах і забезпечує інтерактивні сайти | -| **Python** | Наука про дані, автоматизація, ШІ | Легка для читання та вивчення, потужні бібліотеки | -| **Java** | Корпоративні додатки, Android-додатки | Незалежна від платформи, надійна для великих систем | -| **C#** | Додатки для Windows, розробка ігор | Сильна підтримка екосистеми Microsoft | -| **Go** | Хмарні сервіси, бекенд-системи | Швидка, проста, створена для сучасних обчислень | +| **JavaScript** | Веб-розробка, користувацькі інтерфейси | Працює у браузерах і керує інтерактивними вебсайтами | +| **Python** | Наука про дані, автоматизація, штучний інтелект | Легко читається і вивчається, потужні бібліотеки | +| **Java** | Корпоративні програми, Android-додатки | Незалежна від платформи, надійна для великих систем | +| **C#** | Додатки для Windows, розробка ігор | Потужна підтримка екосистеми Microsoft | +| **Go** | Хмарні сервіси, бекенд системи | Швидка, проста, створена для сучасних обчислень | -### Мови високого рівня проти низького рівня +### Мови високого рівня проти мов низького рівня -Окей, це була та концепція, яка зламала мій мозок, коли я починав вчитися, тому поділюся аналогією, яка нарешті допомогла мені це зрозуміти — і сподіваюся, вона допоможе й тобі! +Окей, це чесно був той концепт, який зламав мій мозок, коли я починав вчитися, тому я поділюся аналогією, яка допомогла мені зрозуміти — сподіваюся, вона допоможе й тобі! -Уяви, що ти приїхав у країну, де не знаєш мову, і терміново шукаєш найближчий туалет (ми всі через це проходили, правда? 😅): +Уяви, що ти приїхав до країни, де не розмовляєш мовою, і дуже потребуєш знайти найближчий туалет (ми всі через це проходили, правда? 😅): -- **Програмування низького рівня** — це як знати місцевий діалект настільки добре, що можеш поговорити з бабусею, яка продає фрукти на розі, використовуючи культурні посилання, місцевий сленг та жарти, які зрозуміє лише той, хто там виріс. Це дуже вражає й надзвичайно ефективно... якщо ти, звісно, вільно розмовляєш! Але доволі складно, коли тобі лише потрібно знайти туалет. +- **Програмування низького рівня** — це як вивчити місцевий діалект настільки добре, що можеш розмовляти з бабусею, що продає фрукти на кутку, використовуючи культурні посилання, місцевий сленг і жартами, які зрозуміє тільки той, хто виріс там. Дуже вражає і неймовірно ефективно... якщо ти досконало володієш мовою! Але це досить складно, якщо просто потрібно знайти туалет. -- **Програмування високого рівня** — це як мати того чудового місцевого друга, який тебе чудово розуміє. Ти можеш сказати просто «мені потрібно знайти туалет» англійською, а він зробить весь культурний переклад і дасть тобі напрямок у зрозумілій для тебе формі. +- **Програмування високого рівня** — це ніби мати близького місцевого друга, який все розуміє. Ти можеш сказати "Мені дуже потрібно в туалет" просто англійською, а він перекладе культурно і дасть зрозумілі тобі вказівки. -У термінах програмування: -- **Мови низького рівня** (як Assembly чи C) дозволяють вести надзвичайно докладні розмови безпосередньо з апаратним забезпеченням комп’ютера, але потрібно мислити як машина, що... скажімо, великий ментальний зсув! -- **Мови високого рівня** (як JavaScript, Python чи C#) дозволяють думати як людина, у той час як вони вирішують усі машинні питання за сценою. Також у них є неймовірно дружні спільноти з людьми, які пам’ятають, як це — бути новачком, і щиро хочуть допомогти! +Як це у програмуванні: +- **Мови низького рівня** (наприклад, Assembly або C) дозволяють деталізовано спілкуватися безпосередньо з апаратним забезпеченням комп’ютера, але доводиться думати як машина, що... скажемо так, великий ментальний перехід! +- **Мови високого рівня** (як JavaScript, Python або C#) дозволяють думати як людина, а всю машинну роботу виконують за лаштунками. До того ж у них дуже дружні спільноти, сповнені людей, які пам’ятають, як це — бути новачком, і дійсно хочуть допомогти! -Вгадай, з чого я запропоную почати? 😉 Мови високого рівня — це наче тренувальні колеса, які ти ніколи справді не захочеш знімати, бо вони роблять увесь досвід набагато приємнішим! +Вгадай, які я пропоную починати? 😉 Мови високого рівня — це як навчальні коліщатка, які ти навряд чи захочеш знімати, бо вони роблять навчання значно приємнішим! ```mermaid flowchart TB - A["👤 Людська думка:
'Я хочу обчислити числа Фібоначчі'"] --> B{Вибрати рівень мови} + A["👤 Людська думка:
'Я хочу обчислити числа Фібоначчі'"] --> B{Виберіть рівень мови} - B -->|Високий рівень| C["🌟 JavaScript/Python
Легко читати і писати"] - B -->|Низький рівень| D["⚙️ Assembly/C
Пряме керування апаратурою"] + B -->|Високорівневий| C["🌟 JavaScript/Python
Легко читати та писати"] + B -->|Низькорівневий| D["⚙️ Assembly/C
Пряме управління апаратним забезпеченням"] C --> E["📝 Написати: fibonacci(10)"] D --> F["📝 Написати: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Розуміння комп'ютера:
Перекладач обробляє складнощі"] + E --> G["🤖 Розуміння комп’ютера:
Перекладач обробляє складність"] F --> G - G --> H["💻 Той самий результат:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["💻 Такий самий результат:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### Дай покажу, чому мови високого рівня такі дружні +### Дозволь показати, чому мови високого рівня такі дружні -Добре, я збираюся показати тобі приклад, який ідеально пояснює, чому я закохався в мови високого рівня, але спочатку — пообіцяй мені одне. Коли побачиш перший приклад коду, не панікуй! Він має виглядати загрозливо. Це саме той пункт, який я хочу підкреслити! +Добре, я збираюся показати тобі приклад, який ідеально ілюструє, чому я закохався у мови високого рівня, але спершу — обіцяй мені одне. Коли побачиш перший приклад коду, не панікуй! Він має виглядати трохи страшно — це моя основна ідея! -Ми подивимось на одну і ту ж задачу, написану у двох абсолютно різних стилях. Обидва створюють так звану послідовність Фібоначчі — це гарний математичний патерн, де кожне число є сумою двох попередніх: 0, 1, 1, 2, 3, 5, 8, 13... (Цікавинка: цей патерн буквально всюди у природі — спіралі насіння соняшника, візерунки на шишках, навіть у формуванні галактик!) +Ми поглянемо на одну й ту ж задачу, написану двома повністю різними стилями. Обидва створять послідовність Фібоначчі — це красива математична послідовність, у якій кожне число є сумою двох попередніх: 0, 1, 1, 2, 3, 5, 8, 13... (Цікавий факт: цей патерн зустрічається буквально всюди в природі — спіралі насіння соняшника, візерунки на шишках, навіть розташування галактик!) -Готовий побачити різницю? Поїхали! +Готовий бачити різницю? Поїхали! -**Мова високого рівня (JavaScript) – зрозуміло для людини:** +**Мова високого рівня (JavaScript) — зручно для людей:** ```javascript -// Крок 1: Основна настройка Фібоначчі +// Крок 1: Основна установка Фібоначчі const fibonacciCount = 10; let current = 0; let next = 1; @@ -183,14 +183,14 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**Що робить цей код:** -- **Оголошує** константу, що визначає, скільки чисел Фібоначчі ми хочемо згенерувати -- **Ініціалізує** дві змінні для відстеження поточного і наступного чисел у послідовності -- **Встановлює** початкові значення (0 і 1), що визначають патерн Фібоначчі -- **Виводить** заголовок для позначення нашого результату +**Ось що робить цей код:** +- **Оголошує** константу, яка вказує, скільки чисел Фібоначчі ми хочемо згенерувати +- **Ініціалізує** дві змінні для відстеження поточного та наступного числа у послідовності +- **Задає** початкові значення (0 та 1), що визначають патерн Фібоначчі +- **Відображає** заголовок, щоб ідентифікувати наш вивід ```javascript -// Крок 2: Згенеруйте послідовність за допомогою циклу +// Крок 2: Згенерувати послідовність за допомогою циклу for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); @@ -201,11 +201,11 @@ for (let i = 0; i < fibonacciCount; i++) { } ``` -**Роз’яснення того, що відбувається тут:** -- **Цикл** перебирає кожну позицію в нашій послідовності за допомогою `for` -- **Виводить** кожне число з позицією за допомогою шаблонного рядка -- **Обчислює** наступне число Фібоначчі, додаючи поточне і наступне значення -- **Оновлює** змінні для переходу до наступної ітерації +**Розбір того, що тут відбувається:** +- **Пройдемося** по кожній позиції послідовності за допомогою циклу `for` +- **Відобразимо** кожне число з його позицією, використовуючи інтерполяцію рядків +- **Обчислимо** наступне число Фібоначчі, додавши поточне і наступне значення +- **Оновимо** змінні для переходу до наступної ітерації ```javascript // Крок 3: Сучасний функціональний підхід @@ -224,13 +224,13 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**У наведеному вище коді ми:** -- **Створили** повторно використовувану функцію за допомогою сучасного синтаксису стрілкових функцій -- **Побудували** масив для зберігання всієї послідовності, а не виводили по одному -- **Використали** індексацію масиву для обчислення кожного нового числа з попередніх -- **Повернули** повну послідовність для гнучкого використання в інших частинах програми +**У цьому коді ми:** +- **Створили** багаторазову функцію, використовуючи сучасний синтаксис стрілкових функцій +- **Побудували** масив, щоб зберігати всю послідовність замість виводу по одному числу +- **Використали** індексацію масиву для розрахунку нового числа з попередніх +- **Повернули** повну послідовність для гнучкого використання в іншій частині програми -**Мова низького рівня (ARM Assembly) – зрозуміло для комп’ютера:** +**Мова низького рівня (ARM Assembly) — комфортно для комп’ютера:** ```assembly area ascen,code,readonly @@ -257,28 +257,28 @@ back add r0,r1 end ``` -Поміти, як версія JavaScript читається майже як інструкції англійською, а версія Assembly використовує закодовані команди, що безпосередньо керують процесором комп’ютера. Обидві виконують ту саму задачу, але мова високого рівня набагато легша для розуміння, написання і підтримки людьми. +Поміти, як версія на JavaScript читається майже як інструкції англійською, а Assembly використовує криптичні команди, що безпосередньо керують процесором комп’ютера. Обидва виконують ту ж саму задачу, але мова високого рівня набагато легша для розуміння, написання та підтримки людьми. -**Основні відмінності, які ти зауважиш:** -- **Читаємість**: JavaScript використовує описові назви, як `fibonacciCount`, тоді як Assembly використовує зашифровані ярлики на кшталт `r0`, `r1` -- **Коментарі**: Мови високого рівня заохочують пояснювальні коментарі, які роблять код само-документованим -- **Структура**: Логічний потік JavaScript відповідає тому, як люди розглядають проблеми крок за кроком -- **Підтримка**: Оновлення версії JavaScript під різні вимоги є простим і зрозумілим +**Головні відмінності, які ти помітиш:** +- **Зчитуваність**: JavaScript використовує описові імена на кшталт `fibonacciCount`, тоді як Assembly застосовує криптичні позначки, такі як `r0`, `r1` +- **Коментарі**: Мови високого рівня заохочують пояснювальні коментарі, які роблять код самодокументованим +- **Структура**: Логічний потік JavaScript відповідає тому, як люди думають про проблеми крок за кроком +- **Підтримка**: Оновлення версії на JavaScript для різних вимог є простим і зрозумілим -✅ **Про послідовність Фібоначчі**: Цей надзвичайно гарний числовий патерн (де кожне число дорівнює сумі двох попередніх: 0, 1, 1, 2, 3, 5, 8...) зустрічається буквально *усюди* в природі! Ви знайдете його у спіралях соняшника, у візерунках шишок, у тому, як вигинаються мушлі наутилуса, і навіть у тому, як ростуть гілки дерев. Це просто вражає, як математика і код допомагають нам зрозуміти і відтворити патерни, за допомогою яких природа створює красу! +✅ **Про послідовність Фібоначчі**: Цей абсолютно чудовий числовий патерн (де кожне число дорівнює сумі двох попередніх: 0, 1, 1, 2, 3, 5, 8...) буквально зустрічається *всюди* у природі! Ви знайдете його у спіралях соняшників, у візерунках шишок, у тому, як вигинаються мушлі наутилуса, а також у тому, як ростуть гілки дерев. Дійсно вражає, як математика та код можуть допомогти зрозуміти і відтворити патерни, які природа використовує для створення краси! -## Будівельні блоки, що створюють магію +## Будівельні Блоки, Що Створюють Магію -Добре, тепер, коли ви побачили, як виглядають мови програмування на практиці, давайте розберемося у фундаментальних складових, з яких складається буквально кожна написана програма. Уявіть їх як необхідні інгредієнти у вашому улюбленому рецепті — як тільки ви зрозумієте, що кожен з них робить, ви зможете читати і писати код майже на будь-якій мові! +Отже, тепер, коли ви побачили, як виглядають мови програмування на практиці, давайте розберемося з фундаментальними частинами, які складають буквально кожну програму, коли-небудь написану. Уявіть їх як основні інгредієнти у вашому улюбленому рецепті – як тільки ви зрозумієте, що робить кожен із них, ви зможете читати і писати код майже будь-якою мовою! -Це дещо схоже на вивчення граматики програмування. Пам’ятаєте в школі, як ви вчили іменники, дієслова і як складати речення? У програмування є своя версія граматики, і чесно кажучи, вона значно логічніша і поблажливіша, ніж граматика англійської мови! 😄 +Це трохи схоже на вивчення граматики програмування. Пам’ятаєте, в школі, коли ви вчили про іменники, дієслова та як складати речення? Програмування має свою власну граматику, і чесно кажучи, вона набагато логічніша і поблажливіша, ніж англійська граматика! 😄 -### Оператори: покрокові інструкції +### Оператори: Покрокові Інструкції -Почнемо з **операторів** – вони схожі на окремі речення у вашому діалозі з комп’ютером. Кожен оператор велить комп’ютеру зробити одну конкретну дію, ніби даючи вказівки: «Поверни ліворуч тут», «Зупинися на червоне світло», «Запаркуйся на тому місці». +Почнемо з **операторів** – це як окремі речення у розмові з вашим комп’ютером. Кожен оператор каже комп’ютеру зробити одну конкретну дію, подібно до вказівок: "Поверни ліворуч тут," "Зупинись на червоному світлі," "Паркуйся в тому місці." -Що мені подобається в операторах, так це те, наскільки вони зазвичай зручні для читання. Подивіться на це: +Що мені подобається в операторах, так це їх зазвичай висока читабельність. Подивіться сюди: ```javascript // Базові оператори, які виконують окремі дії @@ -287,30 +287,30 @@ console.log("Hello, world!"); const sum = 5 + 3; ``` -**Ось що робить цей код:** -- **Оголосити** константну змінну для збереження імені користувача -- **Відобразити** вітальне повідомлення у консолі -- **Обчислити** і зберегти результат математичної операції +**Ось що цей код робить:** +- **Оголошує** константну змінну для збереження імені користувача +- **Відображає** привітальне повідомлення на консолі +- **Обчислює** і зберігає результат математичної операції ```javascript -// Оператори, що взаємодіють з веб-сторінками +// Операції, що взаємодіють з веб-сторінками document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**Крок за кроком, що відбувається:** -- **Змінити** заголовок вебсторінки, що відображається на вкладці браузера -- **Змінити** колір фону всього тіла сторінки +**Крок за кроком відбувається таке:** +- **Змінює** заголовок вебсторінки, що з’являється на вкладці браузера +- **Змінює** колір фону всього тіла сторінки -### Змінні: система пам’яті вашої програми +### Змінні: Система Пам’яті Вашої Програми -Добре, **змінні** — це чесно одна з моїх улюблених концепцій для навчання, бо вони дуже схожі на те, що ви вже використовуєте щодня! +Добре, **змінні** чесно кажучи — це одна з моїх улюблених концепцій для навчання, бо вони дуже схожі на речі, які ви використовуєте щодня! -Подумайте про список контактів у вашому телефоні. Ви не запам’ятовуєте всі номери телефонів – замість цього ви зберігаєте «Мама», «Кращий друг» або «Піца до 2 ранку», і телефон запам’ятовує номери за вас. Змінні працюють так само! Вони як підписані контейнери, у яких ваша програма може зберігати інформацію і витягувати її пізніше за назвою, що має сенс. +Уявіть список контактів у вашому телефоні. Ви не запам’ятовуєте телефони всіх – замість цього ви зберігаєте "Мама", "Кращий друг" або "Піцерія, що доставляє до 2-ї ночі" і даєте телефону запам’ятати справжні номери. Змінні працюють точно так само! Вони як підписані контейнери, у яких ваша програма може зберігати інформацію і звертатися до неї пізніше за іменем, що має сенс. -Ось що насправді круто: змінні можуть змінюватися під час роботи програми (звідси і назва «змінна» — помітили гру слів?). Як ви можете оновлювати контакт піцерії, коли знаходите кращу, так і змінні можуть оновлюватися, коли ваша програма дізнається щось нове або коли змінюються обставини! +Ось що справді круто: змінні можуть змінюватися під час роботи програми (тому вони і називаються "змінними" – бачили, що вони зробили?). Як ви могли б оновити контакт піцерії, якщо знайшли краще місце, так і змінні можна оновлювати, коли програма отримує нову інформацію або у разі зміни обставин! -Дозвольте показати, наскільки це просто і красиво: +Дозвольте показати, як це красиво і просто: ```javascript // Крок 1: Створення базових змінних @@ -320,11 +320,11 @@ let temperature = 75; let isRaining = false; ``` -**Розуміння цих концепцій:** -- **Зберігати** незмінні значення у змінних `const` (наприклад, назву сайту) -- **Використовувати** `let` для значень, які можуть змінюватися протягом програми -- **Присвоювати** різні типи даних: рядки (текст), числа, логічні значення (true/false) -- **Вибирати** описові назви, які пояснюють, що містить кожна змінна +**Для розуміння цих концепцій:** +- **Зберігайте** незмінні значення у `const` змінних (наприклад, назву сайту) +- **Використовуйте** `let` для значень, що можуть змінюватися під час роботи програми +- **Присвоюйте** різні типи даних: рядки (текст), числа і логічні значення (true/false) +- **Обирайте** описові імена, що пояснюють, що містить кожна змінна ```javascript // Крок 2: Робота з об'єктами для групування пов’язаних даних @@ -335,26 +335,26 @@ const weatherData = { }; ``` -**У наведеному прикладі ми:** -- **Створили** об’єкт, щоб згрупувати пов’язані погодні дані -- **Організували** кілька даних під однією назвою змінної -- **Використали** пари ключ-значення, щоб чітко позначити кожен елемент інформації +**У прикладі вище ми:** +- **Створили** об’єкт для групування пов’язаної інформації про погоду +- **Організували** кілька частин даних під одним ім’ям змінної +- **Використали** пари ключ-значення, щоб чітко позначити кожен фрагмент інформації ```javascript // Крок 3: Використання та оновлення змінних console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Оновлення змінних, які можна змінювати +// Оновлення змінних, які можуть змінюватись currentWeather = "cloudy"; temperature = 68; ``` -**Розберемо кожну частину:** -- **Вивести** інформацію, використовуючи шаблонні літерали з `${}` синтаксисом -- **Отримати доступ** до властивостей об’єкта через крапкову нотацію (`weatherData.windSpeed`) -- **Оновлювати** змінні, оголошені через `let`, щоб відображати змінні умови -- **Комбінувати** кілька змінних для створення змістовних повідомлень +**Пояснення кожної частини:** +- **Відображення** інформації за допомогою шаблонних рядків із синтаксисом `${}` +- **Доступ** до властивостей об’єкта через точкову нотацію (`weatherData.windSpeed`) +- **Оновлення** змінних, оголошених за `let`, щоб відображати зміну умов +- **Комбінування** кількох змінних для створення змістовних повідомлень ```javascript // Крок 4: Сучасне деструктурування для чистішого коду @@ -363,22 +363,22 @@ console.log(`${location} humidity: ${humidity}%`); ``` **Що потрібно знати:** -- **Витягувати** конкретні властивості з об’єктів за допомогою деструктуризації -- **Створювати** нові змінні автоматично з тими ж іменами, що й ключі об’єкта -- **Спрощувати** код, уникаючи повторюваної крапкової нотації +- **Витягування** конкретних властивостей з об’єктів за допомогою деструктуризації +- **Автоматичне створення** нових змінних із тими ж іменами, що й ключі об’єкта +- **Спрощення** коду, уникаючи повторного використання точкової нотації -### Управління потоком: вчимо вашу програму думати +### Керування Потоком: Навчаємо Програму Думати -Добре, саме тут програмування стає справді вражаючим! **Управління потоком** – це фактично навчання вашої програми приймати розумні рішення, так само, як ви робите це щодня, навіть не задумуючись. +Добре, тут програмування стає зовсім вражаючим! **Керування потоком** — це, фактично, навчання вашої програми приймати розумні рішення, так само як ви робите щодня навіть не задумуючись. -Уявіть собі: сьогодні вранці ви йшли через щось на кшталт «Якщо йде дощ, візьму парасольку. Якщо холодно — вдягну куртку. Якщо запізнююсь — пропущу сніданок і візьму каву по дорозі.» Ваш мозок природно слідує цій логіці if-then десятки разів щодня! +Уявіть собі: сьогодні вранці ви, мабуть, робили щось на кшталт "Якщо йде дощ, візьму парасольку. Якщо холодно — одягну куртку. Якщо запізнююсь — пропущу сніданок і візьму каву по дорозі." Ваш мозок природно виконує цю логіку if-then десятки разів щодня! -Саме це робить програми розумними і живими, а не просто слідкують за нудним, передбачуваним скриптом. Вони можуть оцінювати ситуацію, аналізувати, що відбувається, і відповідати відповідно. Це як дати вашій програмі мозок, який може адаптуватися і приймати рішення! +Саме це робить програми розумними і живими, а не просто безглуздим сценарієм. Вони можуть оцінити ситуацію, проаналізувати, що відбувається, і відповідно реагувати. Це як дати вашій програмі мозок, який може адаптуватися та приймати рішення! -Хочете побачити, як це прекрасно працює? Ось: +Хочете побачити, як це чудово працює? Дозвольте показати: ```javascript -// Крок 1: Базова умовна логіка +// Крок 1: Основна умовна логіка const userAge = 17; if (userAge >= 18) { @@ -389,11 +389,11 @@ if (userAge >= 18) { } ``` -**Що робить цей код:** -- **Перевіряє**, чи відповідає вік користувача вимогам для голосування -- **Виконує** різні блоки коду залежно від результату умови -- **Обчислює** та виводить, скільки залишилось до права голосу, якщо менше 18 -- **Надає** конкретний, корисний зворотний зв’язок для кожного сценарію +**Ось що робить цей код:** +- **Перевіряє**, чи користувач досяг віку для голосування +- **Виконує** різні блоки коду в залежності від результату умови +- **Обчислює** та відображає, скільки часу залишилось до можливості голосувати, якщо користувачу менше 18 років +- **Надає** конкретний та корисний зворотній зв’язок для кожного випадку ```javascript // Крок 2: Кілька умов з логічними операторами @@ -409,22 +409,22 @@ if (userAge >= 18 && hasPermission) { } ``` -**Розбір того, що тут відбувається:** -- **Об’єднує** кілька умов за допомогою оператора `&&` (і) -- **Створює** ієрархію умов за допомогою `else if` для кількох випадків -- **Опрацьовує** всі можливі варіанти за допомогою заключного `else` -- **Надає** чіткий і дієвий фідбек для кожної ситуації +**Розбір того, що відбувається тут:** +- **Поєднує** кілька умов за допомогою оператора `&&` (логічне "і") +- **Створює** ієрархію умов із `else if` для кількох сценаріїв +- **Обробляє** всі можливі випадки за допомогою фінального оператора `else` +- **Надає** чіткий і доречний зворотній зв’язок для кожної ситуації ```javascript -// Крок 3: Лаконічна умова з тернарним оператором +// Крок 3: Стисле умовне вираження з тернарним оператором const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**Що потрібно пам’ятати:** -- **Використовувати** тернарний оператор (`? :`) для простих двовариантних умов -- **Писати** умову спочатку, потім `?`, після чого — результат для істинного випадку, потім `:`, і результат для хибного -- **Застосовувати** цей патерн, коли потрібно присвоювати значення за умовами +**Запам’ятайте:** +- **Використовуйте** тернарний оператор (`? :`) для простих умов із двома варіантами +- **Пишіть** умову спочатку, за нею `?`, потім результат для true, далі `:`, потім результат для false +- **Застосовуйте** цей патерн, коли потрібно присвоїти значення залежно від умови ```javascript // Крок 4: Обробка кількох конкретних випадків @@ -447,55 +447,55 @@ switch (dayOfWeek) { } ``` -**Цей код виконує наступне:** -- **Порівнює** значення змінної з кількома конкретними випадками -- **Групує** схожі випадки разом (будні проти вихідних) -- **Виконує** відповідний блок коду при знаходженні збігу -- **Включає** `default` для обробки несподіваних значень -- **Використовує** `break` для запобігання продовженню виконання у наступному випадку +**Цей код виконує таке:** +- **Зіставляє** значення змінної з кількома конкретними випадками +- **Групує** схожі випадки разом (робочі дні проти вихідних) +- **Виконує** відповідний блок коду, коли знайдено співпадіння +- **Включає** випадок `default` для обробки несподіваних значень +- **Використовує** оператори `break`, щоб запобігти переходу до наступного випадку -> 💡 **Приклад зі світу:** уявіть управління потоком як найтерплячішу навігаторську систему у світі, що дає вам вказівки. Вона скаже: «Якщо на Main Street затор, поїдь по автомагістралі. Якщо автомагістралю перекриває будівництво – вибери мальовничий маршрут.» Програми використовують точно таку ж умовну логіку, щоб розумно реагувати на різні ситуації і завжди надавати найкращий користувацький досвід. +> 💡 **Аналогія з реального життя**: уявіть собі керування потоком як найтерплячішу GPS-навігацію у світі, що дає вам вказівки. Вона скаже: "Якщо на Мейн-стріт трафік, візьми хайвей. Якщо хайвей заблокований ремонтом — обирай мальовничий маршрут." Програми використовують той самий тип умовної логіки, щоб розумно реагувати на різні ситуації і завжди забезпечувати користувачам найкращий досвід. -### 🎯 **Перевірка розуміння: майстерність будівельних блоків** +### 🎯 **Перевірка Концепції: Майстерність Будівельних Блоків** -**Давайте перевіримо, як у вас із фундаментальними поняттями:** -- Чи можете ви власними словами пояснити різницю між змінною і оператором? -- Згадайте реальний приклад, де ви використали б if-then рішення (як наш приклад із голосуванням) -- Що з логіки програмування вас найбільше здивувало? +**Перевірмо, як у вас з основами:** +- Чи можете ви власними словами пояснити різницю між змінною та оператором? +- Уявіть реальний приклад, де ви б використали if-then рішення (як у прикладі з голосуванням) +- Що в логіці програмування вас найбільше здивувало? -**Швидкий бустер впевненості:** +**Швидкий підйом впевненості:** ```mermaid flowchart LR - A["📝 Оператори
(Інструкції)"] --> B["📦 Змінні
(Зберігання)"] --> C["🔀 Управління потоком
(Рішення)"] --> D["🎉 Робоча програма!"] + A["📝 Вирази
(Інструкції)"] --> B["📦 Змінні
(Сховище)"] --> C["🔀 Потік керування
(Рішення)"] --> D["🎉 Робоча програма!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 ``` -✅ **Що буде далі**: Нас чекає неймовірно цікава подорож, де ми глибше зануримося у ці поняття! Зараз просто зосередьтеся на емоції захоплення від усіх неймовірних можливостей попереду. Конкретні навички й техніки прийдуть природно, коли ми будемо практикувати разом — обіцяю, це буде значно цікавіше, ніж ви очікуєте! +✅ **Що буде далі**: Нам належить неймовірно цікава подорож глибше вивчати ці концепції! Зараз просто сосредоточтесь на тому, щоб відчути захват від усіх дивовижних можливостей попереду. Конкретні навички і техніки прийдуть природньо, коли ми разом практикуватимемося – обіцяю, це буде цікавіше, ніж ви очікуєте! -## Інструменти професіонала +## Інструменти Торгівлі -Добре, цього моменту я майже не можу стримати захоплення! 🚀 Зараз ми поговоримо про неймовірні інструменти, які зроблять так, ніби вам щойно вручили ключі від цифрового космічного корабля. +Чесно кажучи, це місце, де я так збуджуюсь, що ледь стримуюсь! 🚀 Зараз поговоримо про неймовірні інструменти, які змусить вас відчути, що вам щойно передали ключі від цифрового космічного корабля. -Ви знаєте, як шеф-кухар має ідеально збалансовані ножі, які здаються продовженням його рук? А музикант має ту одну гітару, яка починає співати в той момент, коли він її торкається? Так ось, у розробників є власна версія таких магічних інструментів, і ось що з них вас точно здивує — більшість із них абсолютно безкоштовні! +Знаєте, як у шеф-кухаря є ідеально збалансовані ножі, які відчуваються як продовження рук? А у музиканта є гітара, яка наче співає, щойно він до неї торкається? Так ось, у розробників є свої магічні інструменти, і ось що вас цілком здивує – більшість із них абсолютно безкоштовні! -Я буквально стрибаю на стільці від радості, що можу це вам показати, бо ці інструменти повністю революціонізували те, як ми створюємо програмне забезпечення. Це AI-асистенти кодування, які можуть допомагати писати ваш код (і я не жартую!), хмарні середовища, де ви можете будувати повноцінні додатки буквально з будь-якого місця з Wi-Fi, та надскладні інструменти для налагодження, які немов дали вашій програмі рентгенівський зір. +Я практично стрибаю в кріслі, думаючи про те, щоб поділитися ними з вами, бо вони абсолютно революціонізували наш спосіб створення програмного забезпечення. Ми говоримо про помічників кодування з підтримкою ШІ, які можуть допомагати писати ваш код (і це не жарт!), хмарні середовища, де ви можете будувати цілі додатки буквально звідусіль, де є Wi-Fi, і інструменти налагодження, настільки досконалі, що це наче рентген для ваших програм. -І ось те, що до сих пір дає мурашки: це не «інструменти для початківців», які ви швидко зростете. Це ті самі професійні інструменти, що їх використовують розробники Google, Netflix і ті інді-студії додатків, які ви любите, саме зараз. Ви відчуєте себе справжнім профі, використовуючи їх! +І ось що досі викликає у мене мурашки: ці інструменти не "для початківців", які ви з часом переростете. Це точно ті ж професійні інструменти, які в цей самий момент використовують розробники в Google, Netflix і тій інді-студії, що вам подобається. Ви будете відчувати себе справжнім профі, працюючи з ними! ```mermaid graph TD - A["💡 Ваша Ідея"] --> B["⌨️ Редактор Коду
(VS Code)"] - B --> C["🌐 Інструменти Розробника Браузера
(Тестування та Налагодження)"] - C --> D["⚡ Командний Рядок
(Автоматизація та Інструменти)"] - D --> E["📚 Документація
(Навчання та Посилання)"] - E --> F["🚀 Чудовий Веб Додаток!"] + A["💡 Ваша ідея"] --> B["⌨️ Редактор коду
(VS Code)"] + B --> C["🌐 Інструменти розробника у браузері
(Тестування та налагодження)"] + C --> D["⚡ Командний рядок
(Автоматизація та інструменти)"] + D --> E["📚 Документація
(Навчання та довідка)"] + E --> F["🚀 Чудовий веб-додаток!"] B -.-> G["🤖 AI Асистент
(GitHub Copilot)"] - C -.-> H["📱 Тестування Пристроїв
(Адаптивний Дизайн)"] - D -.-> I["📦 Менеджери Пакетів
(npm, yarn)"] + C -.-> H["📱 Тестування на пристроях
(Адаптивний дизайн)"] + D -.-> I["📦 Менеджери пакетів
(npm, yarn)"] E -.-> J["👥 Спільнота
(Stack Overflow)"] style A fill:#fff59d @@ -505,109 +505,108 @@ graph TD style I fill:#ffccbc style J fill:#e8eaf6 ``` -### Редактори коду та IDE: ваші нові цифрові найкращі друзі +### Редактори Коду та IDE: Ваші Нові Цифрові Кращі Друзі -Поговоримо про редактори коду – вони серйозно скоро стануть вашим улюбленим місцем для творчості! Уявіть їх як особисте святилище програмування, де ви проведете більшу частину часу, пишучи і вдосконалюючи свої цифрові твори. +Поговоримо про редактори коду — вони скоро стануть вашими улюбленими робочими місцями! Уявіть їх як особисте кодинг-святилище, де ви проведете більшість часу, створюючи і відшліфовуючи свої цифрові твори. -А ось що справді магічно у сучасних редакторах: це не просто гарні текстові редактори. Це мовби найрозумніший, найпідтримуючий ментор з кодування, який сидить поруч з вами 24/7. Вони ловлять помилки ще до того, як ви їх помітите, пропонують покращення, що роблять вас генієм, допомагають зрозуміти, що робить кожен рядок коду, і деякі навіть передбачають, що ви збираєтесь написати, і пропонують закінчити вашу думку! +Але ось що справді чарівне у сучасних редакторах: це не просто розкішні текстові редактори. Це немов найрозумніший і найпідтримуючий наставник з кодування, який сидить біля вас 24/7. Вони ловлять ваші помилки до того, як ви їх помітите, пропонують покращення, що роблять вас генієм, допомагають зрозуміти, що робить кожен шматок коду, а деякі навіть можуть передбачати, що ви збираєтеся набрати, і пропонують закінчити ваші думки! -Я пригадую, як уперше відкрив автозаповнення – я буквально відчував, що живу в майбутньому. Ви починаєте вводити щось, і редактор каже: «Гей, чи ти думав про цю функцію, яка робить саме те, що тобі потрібно?» Це як мати в думках читача у якості напарника з кодування! +Я пам’ятаю, коли вперше відкрив авто-заповнення — відчував, що живу у майбутньому. Починаєте набирати щось, і редактор каже: «Гей, ти думав про цю функцію, що робить саме те, що тобі потрібно?» Це як мати телепата у ролі колеги! -**Що робить ці редактори такими неймовірними?** +**Що робить ці редактори неймовірними?** -Сучасні редактори коду пропонують вражаючий набір функцій для підвищення вашої продуктивності: +Сучасні редактори коду пропонують вражаючий набір функцій, що підвищують вашу продуктивність: | Функція | Що робить | Чому допомагає | |---------|-----------|----------------| -| **Підсвічування синтаксису** | Кольорове виділення різних частин коду | Полегшує читання коду і пошук помилок | -| **Автозаповнення** | Пропонує код під час набору | Прискорює написання коду і знижує помилки | -| **Інструменти налагодження** | Допомагають знаходити і виправляти помилки | Заощаджує години на пошук багів | -| **Розширення** | Додають спеціалізовані функції | Налаштовують редактор під будь-які технології | -| **AI-асистенти** | Пропонують код та пояснення | Прискорюють навчання і продуктивність | +| **Виділення Синтаксису** | Розфарбовує різні частини коду | Робить код легшим для читання і виявлення помилок | +| **Автозаповнення** | Пропонує код під час введення | Прискорює написання коду і знижує кількість помилок | +| **Інструменти налагодження** | Допомагають знаходити і виправляти помилки | Економлять години виправлення помилок | +| **Розширення** | Додають спеціалізовані функції | Налаштовують редактор під будь-яку технологію | +| **Помічники на основі ШІ** | Пропонують код та пояснення | Прискорюють навчання і продуктивність | -> 🎥 **Відеоресурс**: Хочете побачити ці інструменти в дії? Подивіться це [відео про інструменти професіонала](https://youtube.com/watch?v=69WJeXGBdxg) для повного огляду. +> 🎥 **Відеоресурс**: Хочете побачити ці інструменти в дії? Подивіться це [відео про Інструменти Торгівлі](https://youtube.com/watch?v=69WJeXGBdxg) для повного огляду. #### Рекомендовані редактори для веб-розробки -**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (безкоштовно) +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Безкоштовно) - Найпопулярніший серед веб-розробників - Відмінна екосистема розширень -- Вбудований термінал і інтеграція Git +- Вбудований термінал і інтеграція з Git - **Обов’язкові розширення**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) – AI-пропозиції коду - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) – спільна робота в реальному часі - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) – автоматичне форматування коду - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) – ловить помилки при наборі тексту + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - пропозиції коду на базі ШІ + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - спільна робота в реальному часі + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - автоматичне форматування коду + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - пошук помилок у коді -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (платно, безкоштовно для студентів) -- Просунуті інструменти налагодження і тестування +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Платно, безкоштовно для студентів) +- Розвинені інструменти налагодження і тестування - Інтелектуальне автозаповнення коду -- Вбудований контрол версій +- Вбудоване керування версіями -**IDE на базі хмари** (різні цінові плани) -- [GitHub Codespaces](https://github.com/features/codespaces) – повний VS Code у браузері -- [Replit](https://replit.com/) – чудово для навчання і спільного кодування -- [StackBlitz](https://stackblitz.com/) – миттєва повноцінна веб-розробка +**Хмарні IDE** (Різні ціни) +- [GitHub Codespaces](https://github.com/features/codespaces) - повний VS Code у браузері +- [Replit](https://replit.com/) - чудово для навчання та обміну кодом +- [StackBlitz](https://stackblitz.com/) - миттєва повноцінна веб-розробка -> 💡 **Порада для початку**: Починайте з Visual Studio Code — він безкоштовний, широко використовується й має величезну спільноту з численними навчальними матеріалами та розширеннями. +> 💡 **Порада для початку**: Починайте з Visual Studio Code — це безкоштовно, широко використовується у галузі і має величезну спільноту, що створює корисні навчальні матеріали та розширення. -### Веб-браузери: ваша секретна лабораторія розробника +### Веб-браузери: Ваша Таємна Лабораторія Розробника -Добре, готуйтеся бути враженими! Ви звикли використовувати браузери для перегляду соцмереж і відео? Так от, виявляється, вони весь цей час приховували неймовірну секретну лабораторію розробника, яка чекає, щоб ви її відкрили! +Добре, готуйтеся, це вас реально вразить! Ви ж використовуєте браузери, щоб гортати соцмережі і дивитися відео, правда? Виявляється, вони весь цей час ховали неймовірну секретну лабораторію розробника, чекаючи, поки ви її відкриєте! -Кожен раз, коли ви клікаєте правою кнопкою миші на вебсторінці і обираєте «Перевірити елемент», ви відкриваєте прихований світ інструментів розробника, які насправді потужніші, ніж деяке дороге програмне забезпечення, за яке я колись платив сотні доларів. Це як виявити, що ваша звичайна кухня приховує за стіною лабораторію професійного кухаря! -Вперше, коли хтось показав мені DevTools браузера, я провів близько трьох годин, просто клікаючи навколо і кажучи "СТІЙ, ВОНА ТАКОЖ МОЖЕ ЦЕ?!" Ви буквально можете редагувати будь-який вебсайт у реальному часі, бачити точно, наскільки швидко все завантажується, перевіряти, як ваш сайт виглядає на різних пристроях, і навіть налагоджувати JavaScript, як повний профі. Це абсолютно вражає! +Щоразу, коли ви клікаєте правою кнопкою на вебсторінці і обираєте "Перевірити елемент", ви відкриваєте прихований світ інструментів розробника, які чесно кажучи, потужніші за багато дорогого софту, за який я колись платив сотні доларів. Це ніби виявити, що у вашій звичайній кухні прихована лабораторія професійного шеф-кухаря за секретною панеллю! +Вперше, коли мені показали браузерні DevTools, я провів близько трьох годин, просто клікаючи навколо і кажучи: "ЧЕКАЙ, ВОНИ ЦЕ ТАКОЖ ВМІЮТЬ?!" Ви буквально можете редагувати будь-який веб-сайт у реальному часі, бачити, наскільки швидко все завантажується, тестувати, як ваш сайт виглядає на різних пристроях, а також відлагоджувати JavaScript як справжній професіонал. Це абсолютно вражає! **Ось чому браузери — ваш секретний козир:** -Коли ви створюєте вебсайт або вебдодаток, вам потрібно бачити, як він виглядає і поводиться в реальному світі. Браузери не лише відображають вашу роботу, а й надають докладний зворотний зв’язок про продуктивність, доступність та потенційні проблеми. +Коли ви створюєте веб-сайт або веб-додаток, вам потрібно бачити, як він виглядає і поводиться у реальному світі. Браузери не тільки відображають вашу роботу, але й надають детальний зворотній зв’язок про продуктивність, доступність та потенційні проблеми. #### Інструменти розробника браузера (DevTools) -Сучасні браузери містять комплексні набори інструментів для розробки: +Сучасні браузери включають всебічні комплекти інструментів для розробки: -| Категорія інструментів | Що він робить | Приклад використання | -|------------------------|---------------|---------------------| -| **Інспектор елементів** | Перегляд і редагування HTML/CSS у реальному часі | Налаштування стилів для миттєвого результату | -| **Консоль** | Перегляд помилок і тестування JavaScript | Налагодження проблем та експерименти з кодом | -| **Моніторинг мережі** | Відстеження завантаження ресурсів | Оптимізація продуктивності та часу завантаження | -| **Перевірка доступності** | Тестування на інклюзивний дизайн | Забезпечення роботи сайту для всіх користувачів | -| **Симулятор пристроїв** | Перегляд на різних розмірах екранів | Тестування адаптивного дизайну без кількох пристроїв | +| Категорія інструментів | Що робить | Приклад використання | +|------------------------|-----------|---------------------| +| **Інспектор елементів** | Перегляд і редагування HTML/CSS у режимі реального часу | Налаштування стилів з миттєвим результатом | +| **Консоль** | Перегляд повідомлень про помилки та тестування JavaScript | Відлагодження проблем і експерименти з кодом | +| **Мережевий монітор** | Відстеження завантаження ресурсів | Оптимізація продуктивності та часу завантаження | +| **Перевірка доступності** | Тестування інклюзивного дизайну | Забезпечення роботи сайту для всіх користувачів | +| **Симулятор пристроїв** | Попередній перегляд на різних розмірах екранів | Тестування адаптивного дизайну без різних пристроїв | #### Рекомендовані браузери для розробки -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Стандартні DevTools з великою кількістю документації -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Чудові інструменти для CSS Grid та доступності -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Побудований на Chromium із ресурсами від Microsoft +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** — галузевий стандарт DevTools з широкою документацією +- **[Firefox](https://developer.mozilla.org/docs/Tools)** — чудові інструменти для CSS Grid і доступності +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** — на базі Chromium з ресурсами розробника Microsoft -> ⚠️ **Важлива порада з тестування**: Завжди тестуйте свої сайти у кількох браузерах! Те, що ідеально працює у Chrome, може виглядати інакше в Safari чи Firefox. Професійні розробники тестують у всіх основних браузерах, щоб забезпечити послідовний користувацький досвід. +> ⚠️ **Важлива порада щодо тестування**: Завжди тестуйте свої сайти у кількох браузерах! Те, що ідеально працює в Chrome, може виглядати інакше в Safari або Firefox. Професійні розробники тестують у всіх основних браузерах, щоб забезпечити послідовний користувацький досвід. +### Інструменти командного рядка: ваш вхід у суперсили розробника -### Інструменти командного рядка: ваш шлях до суперсил розробника +Гаразд, давайте будемо цілком чесними про командний рядок, бо я хочу, щоб ви почули це від когось, хто справді розуміє. Коли я його вперше побачив – просто цей страшний чорний екран з миготливим текстом – я буквально подумав: «Ні, ні в жодному разі! Це виглядає як щось із хакерського фільму 80-х, і я точно недостатньо розумний для цього!» 😅 -Добре, давайте будемо чесними про командний рядок, бо я хочу, щоб ви почули це від когось, хто дійсно розуміє. Коли я вперше побачив його – цей страшний чорний екран із миготливим текстом – я буквально подумав: "Ні, ні в якому разі! Це виглядає, як щось із хакерського фільму 1980-х, і я точно не розумний для такого!" 😅 +Але ось що я хотів би, щоб мені тоді сказали, і що я кажу вам зараз: командний рядок не страшний – це насправді як прямий діалог з вашим комп’ютером. Уявіть це як різницю між замовленням їжі через гарний додаток із фото й меню (що гарно і просто) і входом у ваш улюблений місцевий ресторан, де кухар точно знає, що вам подобається, і може приготувати щось ідеальне просто за вашою фразою: «здивуй мене чимось неймовірним». -Але ось що я хотів, щоб мені тоді хтось сказав, і що я кажу вам зараз: командний рядок не страшний – це насправді як розмова безпосередньо з вашим комп’ютером. Уявіть це як різницю між замовленням їжі через крутий додаток із картинками та меню (що зручно і просто) і заходом у ваш улюблений локальний ресторан, де шеф знає точно, що вам подобається, і може приготувати щось ідеальне, просто почувши від вас "порадуй мене чимось неймовірним." +Командний рядок — це те місце, куди йдуть розробники, щоб почуватися справжніми чаклунами. Ви вводите кілька ніби магічних слів (гаразд, це просто команди, але вони відчуваються магічними!), натискаєте Enter, і БАЦ — створюєте цілі структури проєктів, встановлюєте потужні інструменти зі всього світу або розгортаєте свій додаток в інтернеті, щоб мільйони людей його побачили. Як тільки ви спробуєте цю силу, це дійсно затягує! -Командний рядок – це місце, куди приходять розробники, щоб відчути себе справжніми чарівниками. Ви вводите кілька ніби магічних слів (ну, це просто команди, але вони відчуваються магічними!), натискаєте enter, і БАЦ – ви створили цілі структури проекту, встановили потужні інструменти з усього світу або розгорнули свій додаток в інтернеті для мільйонів користувачів. Як тільки ви відчуєте цю силу, це реально затягує! +**Чому командний рядок стане вашим улюбленим інструментом:** -**Ось чому командний рядок стане вашим улюбленим інструментом:** - -Хоча графічні інтерфейси класні для багатьох завдань, командний рядок блискуче справляється з автоматизацією, точністю і швидкістю. Багато інструментів розробки працюють через командний рядок, і вміння користуватися ним ефективно значно підвищить вашу продуктивність. +Хоча графічні інтерфейси чудові для багатьох завдань, командний рядок виділяється в автоматизації, точності та швидкості. Багато інструментів розробки працюють головно через командний рядок, і вміння використовувати їх ефективно суттєво підвищує вашу продуктивність. ```bash -# Крок 1: Створіть та перейдіть у каталог проекту +# Крок 1: Створіть каталог проекту та перейдіть до нього mkdir my-awesome-website cd my-awesome-website ``` **Ось що робить цей код:** -- **Створює** новий каталог "my-awesome-website" для вашого проєкту -- **Переходить** у щойно створену директорію, щоб почати роботу +- **Створює** нову папку "my-awesome-website" для вашого проєкту +- **Переходить** у щойно створену папку, щоб почати роботу ```bash -# Крок 2: Ініціалізуйте проект з package.json +# Крок 2: Ініціалізація проекту з package.json npm init -y # Встановіть сучасні інструменти розробки @@ -616,170 +615,169 @@ npm install --save-dev @eslint/js ``` **Крок за кроком, що відбувається:** -- **Ініціалізує** новий проєкт Node.js з налаштуваннями за замовчуванням за допомогою `npm init -y` -- **Встановлює** Vite як сучасний інструмент збірки для швидкої розробки і продакшен-збірок -- **Додає** Prettier для автоматичного форматування коду і ESLint для перевірки якості коду -- **Використовує** прапорець `--save-dev`, щоб позначити ці залежності тільки для розробки +- **Ініціалізує** новий проєкт Node.js з типовими налаштуваннями за допомогою `npm init -y` +- **Встановлює** Vite як сучасний інструмент збірки для швидкої розробки і продакшн-збірки +- **Додає** Prettier для автоматичного форматування коду та ESLint для перевірки якості коду +- **Використовує** прапорець `--save-dev`, щоб відмітити залежності як лише для розробки ```bash -# Крок 3: Створення структури проекту і файлів +# Крок 3: Створіть структуру проекту та файли mkdir src assets echo 'My Site

Hello World

' > index.html -# Запустити сервер розробки +# Запустіть сервер розробки npx vite ``` **У наведеному вище ми:** -- **Організували** проєкт, створивши окремі папки для вихідного коду і ресурсів -- **Згенерували** базовий HTML-файл із правильною структурою документа -- **Запустили** сервер розробки Vite для live-reload і гарячої заміни модулів +- **Організували** проєкт, створивши окремі папки для вихідного коду та ресурсів +- **Згенерували** базовий HTML-файл з правильною структурою документа +- **Запустили** сервер розробки Vite для живого оновлення та гарячої заміни модулів -#### Основні інструменти командного рядка для веброзробки +#### Необхідні інструменти командного рядка для веб-розробки -| Інструмент | Призначення | Чому це вам потрібно | -|------------|-------------|----------------------| -| **[Git](https://git-scm.com/)** | Контроль версій | Відстежувати зміни, співпрацювати, робити резервні копії | -| **[Node.js & npm](https://nodejs.org/)** | Виконання JavaScript та менеджер пакетів | Запускати JS поза браузерами, встановлювати сучасні інструменти | -| **[Vite](https://vitejs.dev/)** | Інструмент збірки та dev сервер | Надзвичайно швидка розробка з гарячою заміною модулів | -| **[ESLint](https://eslint.org/)** | Якість коду | Автоматично знаходити і виправляти проблеми у JavaScript | -| **[Prettier](https://prettier.io/)** | Форматування коду | Підтримувати код у послідовно відформатованому і читабельному вигляді | +| Інструмент | Призначення | Чому потрібен | +|------------|-------------|---------------| +| **[Git](https://git-scm.com/)** | Контроль версій | Відслідковування змін, співпраця з іншими, резервне копіювання роботи | +| **[Node.js & npm](https://nodejs.org/)** | Виконання JavaScript і керування пакетами | Запуск JavaScript поза браузерами, встановлення сучасних інструментів розробки | +| **[Vite](https://vitejs.dev/)** | Інструмент збірки і сервер розробки | Надшвидка розробка з гарячою заміною модулів | +| **[ESLint](https://eslint.org/)** | Якість коду | Автоматичне виявлення та виправлення проблем у JavaScript | +| **[Prettier](https://prettier.io/)** | Форматування коду | Підтримка коду чистим та послідовно відформатованим | -#### Опції для конкретних платформ +#### Варіанти для конкретних платформ **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Сучасний, багатофункціональний термінал -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Потужне середовище скриптів -- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Традиційний командний рядок Windows +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** — сучасний, багатофункціональний термінал +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 — потужне скриптове середовище +- **[Command Prompt](https://learn.microsoft.com/windows-server/administration/windows-commands/windows-commands)** 💻 — традиційний командний рядок Windows **macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Вбудований термінал -- **[iTerm2](https://iterm2.com/)** - Покращений термінал з розширеними можливостями +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 — вбудований термінал +- **[iTerm2](https://iterm2.com/)** — розширений термінал з додатковими функціями **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Стандартна оболонка Linux -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Просунутий емулятор термінала - -> 💻 = Попередньо встановлено в ОС +- **[Bash](https://www.gnu.org/software/bash/)** 💻 — стандартна оболонка Linux +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** — розширений емулятор терміналу -> 🎯 **Навчальна стратегія**: Почніть з базових команд, як `cd` (зміна директорії), `ls` або `dir` (перелік файлів), і `mkdir` (створення папки). Тренуйтеся з командами сучасного workflow, як `npm install`, `git status` і `code .` (відкриває поточну директорію у VS Code). З часом ви природно опануєте більш складні команди та техніки автоматизації. +> 💻 = Попередньо встановлено в операційній системі +> 🎯 **Шлях навчання**: Почніть з базових команд, як-от `cd` (зміна каталогів), `ls` або `dir` (перелік файлів) і `mkdir` (створення папки). Практикуйтеся з сучасними командами робочого процесу, наприклад, `npm install`, `git status` та `code .` (відкриває поточну теку у VS Code). Згодом ви природньо опануєте більш складні команди й техніки автоматизації. -### Документація: ваш завжди доступний наставник у навчанні +### Документація: ваш завжди доступний вчитель -Добре, поділюсь маленьким секретом, який допоможе вам почуватися набагато впевненіше на початку: навіть найдосвідченіші розробники витрачають багато часу, читаючи документацію. І це не тому, що вони не знають, що роблять – це насправді знак мудрості! +Добре, поділюся маленьким секретом, який допоможе вам почуватись набагато впевненіше у статусі початківця: навіть найдосвідченіші розробники витрачають величезну частину свого часу на читання документації. І це не тому, що вони не знають, що роблять – це насправді ознака мудрості! -Уявіть документацію як найдоступніших, терплячих і знавців вчителів у світі, доступних 24/7. Застрягли у проблемі о 2 ночі? Документація тут, як теплий віртуальний обійм, з потрібною відповіддю. Хочете дізнатись про якусь класну нову функцію, про яку всі говорять? Документація підтримає вас покроковими прикладами. Прагнете зрозуміти, чому щось працює саме так? Вгадали – документація готова пояснити це так, щоб у вас нарешті все склалося! +Уявіть документацію як доступ до найтерплячіших і найобізнаніших вчителів у світі, які доступні 24/7. Застрягли з проблемою о 2-й ночі? Документація тут із теплим віртуальним обіймом і саме тією відповіддю, яка вам потрібна. Хочете дізнатися про якусь класну нову функцію, про яку всі говорять? Документація підтримає вас покроковими прикладами. Прагнете зрозуміти, чому щось працює саме так? Вгадайте що — документація готова пояснити це так, що нарешті все стане на свої місця! -Ось що повністю змінило мій погляд: світ веброзробки розвивається надзвичайно швидко, і ніхто (та й справді ніхто!) не тримає все в пам’яті. Я бачив досвідчених розробників із 15+ роками досвіду, які шукали базовий синтаксис, і знаєте що? Це не соромно – це розумно! Не справа в ідеальній пам’яті, а в тому, щоб знати, де швидко знайти надійні відповіді і як їх застосувати. +Ось що повністю змінило мою точку зору: світ веб-розробки рухається неймовірно швидко, і ніхто (я маю на увазі абсолютно ніхто!) не тримає все в пам’яті. Я бачив старших розробників із понад 15 роками досвіду, які шукали базовий синтаксис, і знаєте що? Це не соромно — це розумно! Справа не в ідеальній пам’яті, а в тому, щоб знати, де швидко знайти надійні відповіді і як їх застосувати. **Ось де відбувається справжня магія:** -Професійні розробники полюбляють багато часу читати документацію – не тому що не знають, що роблять, а тому що ландшафт веброзробки надто швидко змінюється, і триматися в курсі – це постійне навчання. Чудова документація допомагає вам зрозуміти не тільки *як* щось використовувати, а й *чому* і *коли*. +Професійні розробники значну частину часу витрачають на читання документації – не тому, що вони не знають, що роблять, а тому, що світ веб-розробки настільки динамічний, що триматися в курсі означає постійно вчитися. Чудова документація допомагає зрозуміти не лише *як* щось використовувати, а й *чому* і *коли* це робити. #### Важливі ресурси документації **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Золотий стандарт документації вебтехнологій -- Всеосяжні посібники з HTML, CSS і JavaScript -- Включає інформацію про сумісність із браузерами -- Містить практичні приклади і інтерактивні демо +- Золотий стандарт документації для веб-технологій +- Повні посібники для HTML, CSS та JavaScript +- Містить інформацію про сумісність із браузерами +- Ілюстровані практичні приклади та інтерактивні демо **[Web.dev](https://web.dev)** (від Google) -- Сучасні найкращі практики веброзробки -- Посібники з оптимізації продуктивності -- Принципи доступності та інклюзивного дизайну +- Сучасні кращі практики веб-розробки +- Посібники з оптимізації продуктивності +- Принципи доступності та інклюзивного дизайну - Кейси з реальних проєктів -**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Ресурси для розробки під браузер Edge -- Посібники з Progressive Web App -- Інсайти кросплатформної розробки +**[Документація Microsoft Developer](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** +- Ресурси для розробки браузера Edge +- Посібники з Progressive Web App +- Інформація про кросплатформну розробку **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Структуровані навчальні курси -- Відео від експертів галузі +- Структуровані навчальні курси +- Відеоуроки від експертів галузі - Практичні вправи з кодування -> 📚 **Стратегія навчання**: Не намагайтеся запам’ятати документацію – натомість навчіться ефективно нею користуватися. Закладки на часто потрібні довідники і вправи з пошуку точних відповідей значно допоможуть. +> 📚 **Стратегія навчання**: Не намагайтеся запам’ятати документацію – натомість навчіться ефективно нею користуватися. Зробіть закладки на часто потрібні посилання та практикуйтеся швидко шукати конкретну інформацію. -### 🔧 **Перевірка майстерності інструментів: що вам найбільше резонує?** +### 🔧 **Перевірка навичок інструментів: що вам до вподоби?** -**Зробіть паузу й подумайте:** -- Який інструмент ви найбільше хочете спробувати першим? (Неправильних відповідей немає!) -- Чи досі командний рядок здається лякаючим, чи ви зацікавлені в ньому? -- Чи уявляєте, як використовувати DevTools браузера, щоб заглянути за куліси улюблених сайтів? +**Почекайте хвилинку і подумайте:** +- Який інструмент вам найцікавіше спробувати першим? (Правильної чи неправильної відповіді немає!) +- Командний рядок досі лякає, чи ви вже зацікавлені дослідити його? +- Чи можете уявити, як будете користуватися DevTools в браузері, щоб заглянути за лаштунки улюблених сайтів? ```mermaid pie title "Час розробника, витрачений на інструменти" "Редактор коду" : 40 - "Тестування в браузері" : 25 + "Тестування у браузері" : 25 "Командний рядок" : 15 "Читання документації" : 15 - "Налагодження" : 5 + "Відлагодження" : 5 ``` -> **Цікава інсайт:** Більшість розробників проводить близько 40% часу в редакторі коду, але погляньте, скільки часу витрачається на тестування, навчання та вирішення проблем. Програмування – це не тільки про написання коду, а про створення досвіду! +> **Цікавий факт**: Більшість розробників проводить близько 40% часу у своєму редакторі коду, але зверніть увагу, скільки часу йде на тестування, навчання та розв’язання проблем. Програмування – це не тільки написання коду, а створення досвіду! -✅ **Їжа для роздумів:** Ось що цікаво поміркувати – чим, на вашу думку, інструменти для створення сайтів (розробка) відрізняються від інструментів для проєктування їх вигляду (дизайн)? Це приблизно як різниця між архітектором, який проектує красивий будинок, і підрядником, який його фактично зводить. Обидва важливі, але їм потрібні різні набори інструментів! Такий підхід допоможе вам побачити ширшу картину, як живуть вебсайти. +✅ **Для роздумів**: Ось цікаве питання для вас — як ви думаєте, чим можуть відрізнятися інструменти для створення веб-сайтів (розробка) від інструментів для проектування їхнього вигляду (дизайн)? Це як різниця між архітектором, який проектує красивий будинок, і підрядником, який його реально будує. Обидва важливі, але їм потрібні різні набори інструментів! Такий підхід допоможе вам краще зрозуміти загальну картину створення сайтів. -## Випробування GitHub Copilot Agent 🚀 +## Випробування агента GitHub Copilot 🚀 Використайте режим агента, щоб виконати наступне завдання: -**Опис:** Дослідіть можливості сучасного редактора коду або IDE і продемонструйте, як він може покращити ваш робочий процес як веброзробника. +**Опис:** Вивчіть функції сучасного редактора коду або IDE і покажіть, як він може покращити ваш робочий процес як веб-розробника. -**Підказка:** Оберіть редактор коду або IDE (наприклад Visual Studio Code, WebStorm або хмарне IDE). Наведіть три функції або розширення, що допомагають ефективніше писати, налагоджувати або підтримувати код. Для кожної дайте коротке пояснення, як це покращує ваш робочий процес. +**Завдання:** Оберіть редактор коду або IDE (наприклад Visual Studio Code, WebStorm або хмарний IDE). Назвіть три функції або розширення, які допомагають вам ефективніше писати, відлагоджувати чи підтримувати код. Для кожного коротко поясніть, як це покращує вашу роботу. --- ## 🚀 Виклик -**Отже, детективе, готові до першої справи?** +**Добре, детективе, готові до першої справи?** -Зараз, коли у вас є чудова база, у мене для вас пригода, яка допоможе побачити, наскільки надзвичайно різноманітний і захопливий світ програмування. І слухайте – це ще не про написання коду, тож не хвилюйтесь! Уявіть себе детективом мов програмування на вашій першій захоплюючій справі! +Тепер, коли у вас є ця чудова база, у мене для вас пригода, яка допоможе побачити, наскільки неймовірно різноманітний і захопливий світ програмування. І слухайте – це поки не про написання коду, тож не хвилюйтеся! Уявіть себе детективом мов програмування на вашій першій захопливій справі! -**Ваше завдання, якщо вирішите його прийняти:** -1. **Стати дослідником мов:** Виберіть три мови програмування із зовсім різних світів – можливо одна для вебсайтів, одна для мобільних додатків, і одна для обробки даних науковцями. Знайдіть приклади однієї простої задачі, написаної на кожній з них. Обіцяю, ви будете в захваті від того, як вони можуть виглядати зовсім інакше, виконуючи однакову роботу! +**Ваше завдання, якщо ви на нього погодитесь:** +1. **Стати дослідником мов:** Виберіть три мови програмування з абсолютно різних всесвітів — можливо, одну для створення сайтів, одну для мобільних додатків і одну для обробки даних для науковців. Знайдіть приклади виконання однієї простої задачі на кожній мові. Обіцяю, ви будете вражені, наскільки вони можуть виглядати по-різному, виконуючи ту саму справу! -2. **Розкрийте їх історії створення:** Що робить кожну мову особливою? Ось цікавий факт – кожна мова програмування створена тому, що хтось подумав: «Знаєте, мусить бути кращий спосіб розв’язати цю конкретну проблему». Спробуйте з’ясувати, якими були ці проблеми. Деякі з цих історій справді захопливі! +2. **Відкрийте їхні історії виникнення:** Що робить кожну мову унікальною? Ось цікавий факт — кожна мова програмування була створена, бо хтось подумав: «Знаєш, має бути кращий спосіб розв’язати цю конкретну проблему.» Чи зможете ви зрозуміти, які проблеми це були? Деякі з цих історій справді захопливі! -3. **Познайомтесь з їх спільнотами:** Подивіться, наскільки дружні і пристрасні спільноти кожної мови. Деякі налічують мільйони розробників, які діляться знаннями і допомагають один одному, інші – менші, але напрочуд згуртовані і підтримують. Вам сподобається бачити різні характери цих спільнот! +3. **Познайомтеся з спільнотами:** Подивіться, наскільки гостинна і захоплена кожна спільнота мови. Деякі налічують мільйони розробників, які діляться знаннями та допомагають одне одному, інші менші, але дуже згуртовані та підтримують. Вам сподобається побачити, які різні характери мають ці спільноти! -4. **Довіртесь серцю:** Яка мова зараз здається вам найпростіше? Не турбуйтесь над «ідеальним» вибором – слухайте свої інстинкти! Справді, неправильної відповіді тут немає, і завжди можна дослідити інші пізніше. +4. **Слухайте свою інтуїцію:** Яка мова зараз здається вам найбільш доступною? Не хвилюйтеся про «ідеальний» вибір — просто довіряйте своїм відчуттям! Тут немає неправильних відповідей, і пізніше ви завжди зможете дослідити інші. -**Бонусне детективне завдання:** Дізнайтеся, які великі сайти чи додатки побудовані на кожній з мов. Гарантую, ви здивуєтесь, дізнавшись, що стоїть за Instagram, Netflix чи тією мобільною грою, у яку ви не можете відірватися! +**Бонус для детектива:** Спробуйте дізнатися, які великі сайти чи додатки побудовані на кожній з мов. Гарантую, ви будете шоковані, дізнавшись, що живить Instagram, Netflix або ту мобільну гру, в яку не можете відірватися! -> 💡 **Пам’ятайте**: Мета не стати експертом у цих мовах зараз. Ви просто знайомитесь з «околицями», перш ніж вибрати, де хочете поселитися. Не поспішайте, отримуйте задоволення і дозвольте допитливості вести вас! +> 💡 **Пам’ятайте:** Сьогодні ви не намагаєтесь стати експертом у жодній з цих мов. Ви просто знайомитеся з навколишнім світом, перш ніж вирішити, де хочете оселитися. Не поспішайте, отримуйте задоволення і нехай ваша цікавість веде вас! -## Давайте відсвяткуємо ваші відкриття! +## Святкуємо ваші відкриття! -Ой лишенько, ви сьогодні засвоїли стільки неймовірної інформації! Я щиро тішуся, що щораз більше цього дивовижного шляху лишається з вами. І пам’ятайте – це не тест з ідеальними відповідями. Це, скоріше, святкування всього крутого, що ви дізналися про цей захопливий світ, у який ви ось-ось поринете! +Вау, ви засвоїли стільки неймовірної інформації сьогодні! Я щиро радий бачити, як багато з цього дивовижного шляху ви запам’ятали. І пам’ятайте — це не тест, де потрібно все зробити ідеально. Це радше святкування всього крутого, чого ви дізналися про цей захопливий світ, у який ви тільки-но занурюєтесь! -[Пройдіть післяурочний тест](https://ff-quizzes.netlify.app/web/) +[Пройдіть опитування після уроку](https://ff-quizzes.netlify.app/web/) -## Повторення і самостійне навчання +## Огляд та самостійне вивчення -**Не поспішайте, досліджуйте і насолоджуйтесь!** -Ви сьогодні пройшли великий шлях, і це варто того, щоб пишатися! Тепер настає найцікавіше – досліджувати теми, які викликали вашу цікавість. Пам’ятайте, це не домашнє завдання – це пригода! +**Не поспішайте, досліджуйте і насолоджуйтеся!** +Ви сьогодні охопили багато тем, і це справжній привід для гордості! Тепер настає найцікавіша частина – вивчення тем, які розпалили вашу цікавість. Пам’ятайте, це не домашнє завдання – це пригода! -**Пірнайте глибше у те, що вас надихає:** +**Занурюйтеся глибше в те, що вас захоплює:** -**Попрактикуйтеся з мовами програмування:** +**Практикуйтеся з мовами програмування:** - Відвідайте офіційні сайти 2-3 мов, які привернули вашу увагу. Кожна має свій характер і історію! -- Спробуйте онлайн-майданчики для кодування, як-от [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), або [Replit](https://replit.com/). Не бійтеся експериментувати – нічого не зламаєте! -- Прочитайте про те, як виникла ваша улюблена мова. Справді, деякі історії походження дуже цікаві і допоможуть вам краще зрозуміти, чому мови працюють так, як вони працюють. +- Спробуйте онлайн-платформи для кодування, такі як [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), або [Replit](https://replit.com/). Не бійтеся експериментувати – нічого зламати не можна! +- Прочитайте про те, як з’явилася ваша улюблена мова. Серйозно, деякі історії виникнення дуже захопливі й допоможуть зрозуміти, чому мови працюють так, як вони працюють. -**Привчіться до нових інструментів:** -- Завантажте Visual Studio Code, якщо ще не зробили цього – він безкоштовний, і він вам сподобається! -- Приділіть кілька хвилин огляду магазину розширень. Це як магазин додатків для вашого редактора коду! -- Відкрийте інструменти розробника у браузері та клацайте навколо. Не переймайтеся, якщо не все зрозуміло – просто ознайомтеся з тим, що там є. +**Привчайтеся до нових інструментів:** +- Завантажте Visual Studio Code, якщо ще не зробили цього – це безкоштовно, і вам сподобається! +- Проведіть кілька хвилин, переглядаючи магазин розширень. Це як магазин додатків для вашого редактора коду! +- Відкрийте інструменти розробника у вашому браузері і просто клікайте навколо. Не переймайтеся, якщо не все зрозуміло – просто ознайомтеся з тим, що там є. -**Приєднайтесь до спільноти:** -- Підписуйтеся на деякі спільноти розробників на [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), або [GitHub](https://github.com/). Спільнота програмістів дуже дружня до новачків! -- Дивіться відео для початківців на YouTube. Є багато чудових авторів, які пам’ятають, що таке починати з нуля. -- Розгляньте можливість приєднатися до локальних мітапів або онлайн-спільнот. Повірте, розробники люблять допомагати новачкам! +**Приєднуйтеся до спільноти:** +- Підписуйтеся на деякі спільноти розробників на [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) або [GitHub](https://github.com/). Спільноти програмістів надзвичайно гостинні до новачків! +- Переглядайте відео для початківців на YouTube. Там багато чудових авторів, які пам’ятають, як це – тільки починати. +- Розгляньте можливість приєднатися до локальних зустрічей або онлайн-спільнот. Повірте, розробники люблять допомагати новачкам! -> 🎯 **Послухайте, що я хочу, щоб ви пам’ятали**: від вас не чекають, що ви станете магом коду за одну ніч! Наразі ви просто знайомитеся з цим неймовірним новим світом, частиною якого станете. Не поспішайте, насолоджуйтеся подорожжю, і пам’ятайте – кожен розробник, ким ви захоплюєтеся, колись сидів саме там, де ви зараз, відчуваючи захоплення і, можливо, трохи розгубленості. Це абсолютно нормально і означає, що ви на правильному шляху! +> 🎯 **Слухайте, що я хочу, щоб ви запам’ятали**: Не очікується, що ви станете майстром кодування за одну ніч! Наразі ви лише знайомитеся з цим дивовижним новим світом, у якому вам належить опинитися. Не поспішайте, насолоджуйтеся подорожжю і пам’ятайте – кожен розробник, якого ви поважаєте, колись сидів саме там, де сидите ви зараз, відчуваючи захоплення і, можливо, трохи розгубленості. Це цілком нормально і означає, що ви все робите правильно! @@ -787,52 +785,52 @@ pie title "Час розробника, витрачений на інструм [Reading the Docs](assignment.md) -> 💡 **Невеликий підштовх для вашого завдання**: Мені дуже хотілося б побачити, як ви вивчаєте інструменти, які ми ще не розглянули! Пропускайте редактори, браузери та командні інструменти, про які ми вже говорили – існує цілий неймовірний всесвіт чудових інструментів для розробки, що чекають на відкриття. Шукайте ті, що активно підтримуються і мають жваві, дружні спільноти (вони зазвичай мають найкращі підручники і найбільш підтримуючих людей, коли ви неминуче застрягнете і вам знадобиться допомога). +> 💡 **Невеликий поштовх до вашого завдання**: Мені дуже хотілося б побачити, як ви досліджуєте інструменти, про які ми ще не говорили! Обминіть редактори, браузери та командні рядки, про які ми вже згадували – існує цілий неймовірний всесвіт дивовижних інструментів розробника, що чекають на відкриття. Обирайте ті, які активно підтримуються і мають живі, корисні спільноти (саме такі зазвичай пропонують найкращі навчальні матеріали і найбільше підтримки, коли ви, неминуче, застрягнете і потребуватимете дружньої допомоги). --- -## 🚀 Ваш Таймлайн Програмістської Подорожі +## 🚀 Ваш графік вивчення програмування ### ⚡ **Що ви можете зробити за наступні 5 хвилин** -- [ ] Закладинки 2-3 вебсайти мов програмування, які привернули вашу увагу +- [ ] Додати в закладки сайти 2-3 мов програмування, які вас зацікавили - [ ] Завантажити Visual Studio Code, якщо ще не зробили цього -- [ ] Відкрити DevTools браузера (F12) і клікнути по будь-якому сайту +- [ ] Відкрити DevTools у браузері (F12) і клацати на будь-якому сайті - [ ] Приєднатися до однієї спільноти програмістів (Dev.to, Reddit r/webdev або Stack Overflow) -### ⏰ **Що ви можете встигнути за цю годину** -- [ ] Завершити вікторину після уроку і проаналізувати свої відповіді -- [ ] Налаштувати VS Code з розширенням GitHub Copilot -- [ ] Спробувати приклад "Hello World" у 2 різних мовах програмування онлайн +### ⏰ **Що ви можете зробити за цю годину** +- [ ] Пройти тест після уроку і подумати над своїми відповідями +- [ ] Встановити у VS Code розширення GitHub Copilot +- [ ] Спробувати приклад "Hello World" у двох різних мовах програмування онлайн - [ ] Подивитися відео "День із життя розробника" на YouTube -- [ ] Почати «детективне» вивчення вибраної мови програмування (з виклику) - -### 📅 **Ваша тижнева пригода** -- [ ] Виконати завдання і дослідити 3 нових інструменти для розробки -- [ ] Підписатися на 5 розробників або облікових записів про програмування в соцмережах -- [ ] Спробувати створити щось маленьке в CodePen або Replit (навіть просто "Hello, [Ваше ім'я]!") -- [ ] Прочитати один блогпост розробника про чиюсь програмістську подорож -- [ ] Приєднатися до онлайн або віртуального мітапу чи переглянути програмістську доповідь -- [ ] Почати вивчати обрану мову за допомогою онлайн-уроків - -### 🗓️ **Ваша місячна трансформація** -- [ ] Створити свій перший невеликий проект (навіть проста вебсторінка — це вже рахуються!) -- [ ] Внести внесок у проєкт з відкритим кодом (почати з виправлення документації) -- [ ] Станьте наставником для когось, хто щойно починає свій шлях програміста -- [ ] Створити власний вебсайт портфоліо розробника -- [ ] Зв’язатися з локальними спільнотами розробників або навчальними групами -- [ ] Почати планувати свій наступний етап навчання - -### 🎯 **Фінальна рефлексія** - -**Перш ніж рухатися далі, знайдіть час, щоб відсвяткувати:** -- Що сьогодні найбільше надихнуло вас у програмуванні? -- Який інструмент або концепцію ви хочете дослідити першою? -- Як ви почуваєтеся щодо початку цієї програмістської подорожі? -- Яке одне питання ви хотіли б зараз поставити розробнику? +- [ ] Розпочати дослідницьку роботу з обраними мовами програмування (за викликом) + +### 📅 **Ваш тижневий план пригод** +- [ ] Виконати завдання і дослідити 3 нові інструменти розробника +- [ ] Підписатися на 5 розробників або профілів про програмування у соцмережах +- [ ] Спробувати створити щось маленьке в CodePen або Replit (навіть просто "Hello, [Ваше ім’я]!") +- [ ] Прочитати блог пост розробника про його шлях програміста +- [ ] Приєднатися до віртуальної зустрічі або подивитися доповідь про програмування +- [ ] Почати вивчення обраної мови за онлайн-уроками + +### 🗓️ **Ваш місячний план трансформації** +- [ ] Збудувати свій перший невеликий проєкт (навіть проста вебсторінка згодиться!) +- [ ] Внести вклад у проєкт з відкритим кодом (почати з виправлень документації) +- [ ] Наставляти когось, хто тільки починає свій шлях програміста +- [ ] Створити свій портфоліо розробника +- [ ] Налагодити зв’язки з місцевими спільнотами розробників або навчальними групами +- [ ] Почати планувати наступний етап свого навчання + +### 🎯 **Підсумкова рефлексія** + +**Перед тим, як рухатися далі, знайдіть момент, щоб відсвяткувати:** +- Що сьогодні у програмуванні вас найбільше захопило? +- Який інструмент чи концепцію ви хочете дослідити першою? +- Які у вас враження від початку цієї подорожі програмування? +- Яке питання ви зараз хотіли б задати розробнику? ```mermaid journey - title Ваша подорож розвитку впевненості + title Ваша подорож до зміцнення впевненості section Сьогодні Curious: 3: You Overwhelmed: 4: You @@ -846,11 +844,11 @@ journey Confident: 5: You Helping Others: 5: You ``` -> 🌟 **Пам’ятайте**: Кожен експерт колись був початківцем. Кожен старший розробник колись почувався так само, як ви зараз – захоплено, можливо трохи розгублено, і безперечно зацікавлено, що можливо. Ви у чудовій компанії, і ця подорож буде неймовірною. Ласкаво просимо у дивовижний світ програмування! 🎉 +> 🌟 **Пам’ятайте**: Кожен експерт колись був новачком. Кожен досвідчений розробник колись відчував саме те, що відчуваєте ви – захоплення, може трохи плутанину, і безсумнівну цікавість до того, що можливо. Ви в чудовій компанії, і ця подорож обіцяє бути неймовірною. Ласкаво просимо у дивовижний світ програмування! 🎉 --- -**Застереження**: -Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Незважаючи на наші зусилля забезпечити точність, просимо враховувати, що машинні переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується звертатись до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння чи неправильні тлумачення, що можуть виникнути через використання цього перекладу. +**Відмова від відповідальності**: +Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для важливої інформації рекомендується звертатися до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу. \ No newline at end of file diff --git a/translations/uk/AGENTS.md b/translations/uk/AGENTS.md index 4b8aff794..2a5f09a38 100644 --- a/translations/uk/AGENTS.md +++ b/translations/uk/AGENTS.md @@ -2,27 +2,27 @@ ## Огляд проекту -Це навчальний репозиторій з курикулумом для викладання основ веб-розробки початківцям. Курикулум — це всебічний 12-тижневий курс, розроблений Microsoft Cloud Advocates, що містить 24 практичні уроки з JavaScript, CSS та HTML. +Це навчальний репозиторій курсу для викладання основ веб-розробки початківцям. Курс є комплексним 12-тижневим навчальним планом, розробленим Microsoft Cloud Advocates, що включає 24 практичні уроки з JavaScript, CSS та HTML. ### Ключові компоненти -- **Навчальний контент**: 24 структуровані уроки, організовані в модулі на основі проектів -- **Практичні проекти**: Terrarium, Typing Game, Розширення браузера, Space Game, Банківський додаток, Редактор коду та AI чат-асистент -- **Інтерактивні вікторини**: 48 вікторин по 3 питання в кожній (до та після уроку) -- **Підтримка кількох мов**: Автоматичні переклади понад 50 мов за допомогою GitHub Actions -- **Технології**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (для AI-проектів) +- **Навчальний контент**: 24 структуровані уроки, організовані у модулі на основі проектів +- **Практичні проекти**: Терраріум, Мережна гра, Розширення для браузера, Космічна гра, Банківський додаток, Редактор коду та AI чат-асистент +- **Інтерактивні тести**: 48 тестів по 3 питання кожен (до/після уроку) +- **Підтримка багатьох мов**: Автоматичний переклад понад 50 мов за допомогою GitHub Actions +- **Технології**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (для AI-проектів) ### Архітектура -- Навчальний репозиторій зі структурою на основі уроків -- У кожній папці уроку є README, приклади коду та рішення -- Автономні проекти в окремих каталогах (quiz-app, різні проекти уроків) -- Система перекладів з використанням GitHub Actions (co-op-translator) -- Документація подається через Docsify та доступна у форматі PDF +- Навчальний репозиторій зі структурою на основі уроків +- Кожна папка з уроком містить README, приклади коду та розв’язки +- Окремі автономні проекти у власних директоріях (quiz-app, різні проекти уроків) +- Система перекладів з використанням GitHub Actions (co-op-translator) +- Документація подається через Docsify та доступна в PDF -## Команди налаштування +## Команди для налаштування -Цей репозиторій призначений переважно для споживання освітнього контенту. Для роботи з окремими проектами: +Цей репозиторій призначений передусім для споживання навчального контенту. Для роботи з конкретними проектами: ### Основне налаштування репозиторію @@ -30,18 +30,18 @@ git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` - -### Налаштування Quiz App (Vue 3 + Vite) + +### Налаштування додатку Quiz (Vue 3 + Vite) ```bash cd quiz-app npm install npm run dev # Запустити сервер розробки -npm run build # Зібрати для продакшена +npm run build # Зібрати для продакшн npm run lint # Запустити ESLint ``` - -### API банківського проекту (Node.js + Express) + +### API банківського проєкту (Node.js + Express) ```bash cd 7-bank-project/api @@ -50,23 +50,23 @@ npm start # Запустити API сервер npm run lint # Запустити ESLint npm run format # Відформатувати за допомогою Prettier ``` - -### Проекти розширень браузера + +### Проекти розширень для браузера ```bash cd 5-browser-extension/solution npm install -# Дотримуйтесь інструкцій з завантаження розширень, специфічних для браузера +# Дотримуйтесь інструкцій із завантаження розширень, специфічних для браузера ``` - -### Проекти гри у космосі + +### Проекти космічної гри ```bash cd 6-space-game/solution npm install -# Відкрийте index.html у браузері або використовуйте Live Server +# Відкрийте index.html у браузері або використайте Live Server ``` - + ### Чат-проект (бекенд на Python) ```bash @@ -75,34 +75,34 @@ pip install openai # Встановіть змінну середовища GITHUB_TOKEN python api.py ``` - + ## Робочий процес розробки -### Для контрибуторів контенту +### Для учасників контенту -1. **Форкніть репозиторій** у свій обліковий запис GitHub -2. **Клонуйте ваш форк** локально -3. **Створіть нову гілку** для ваших змін -4. Вносьте зміни в контент уроків або приклади коду -5. Тестуйте зміни коду у відповідних директоріях проектів -6. Надсилайте pull request відповідно до інструкцій з внесення +1. **Форкніть репозиторій** у ваш обліковий запис GitHub +2. **Клонуйте свій форк** локально +3. **Створіть нову гілку** для ваших змін +4. Вносіть зміни в контент уроків або приклади коду +5. Тестуйте зміни коду у відповідних директоріях проектів +6. Надсилайте pull request відповідно до правил внеску ### Для учнів -1. Форкніть або клонують репозиторій -2. Перейдіть у каталоги уроків послідовно -3. Читайте README файли кожного уроку -4. Пройдіть початкові вікторини на https://ff-quizzes.netlify.app/web/ -5. Опрацьовуйте приклади коду в папках уроків -6. Виконуйте завдання і виклики -7. Пройдіть фінальні вікторини +1. Форкніть або клонуюйте репозиторій +2. Перейдіть до директорій уроків послідовно +3. Читайте README файли кожного уроку +4. Виконуйте тести перед уроком на https://ff-quizzes.netlify.app/web/ +5. Працюйте з прикладами коду у папках уроку +6. Виконуйте завдання та виклики +7. Пройдіть тести після уроку ### Жива розробка -- **Документація**: Запустіть `docsify serve` у корені (порт 3000) -- **Quiz App**: Запустіть `npm run dev` у директорії quiz-app -- **Проекти**: Використовуйте розширення VS Code Live Server для HTML-проектів -- **API-проекти**: Запускайте `npm start` у відповідних API папках +- **Документація**: Запустіть `docsify serve` в корені репозиторію (порт 3000) +- **Quiz App**: Запуск `npm run dev` в директорії quiz-app +- **Проекти**: Використовуйте розширення VS Code Live Server для HTML-проектів +- **API проекти**: Запуск `npm start` у відповідних API-директоріях ## Інструкції з тестування @@ -113,170 +113,170 @@ cd quiz-app npm run lint # Перевірте на наявність проблем зі стилем коду npm run build # Переконайтеся, що збірка успішна ``` - + ### Тестування Bank API ```bash cd 7-bank-project/api -npm run lint # Перевірте наявність проблем зі стилем коду +npm run lint # Перевірте на наявність проблем зі стилем коду node server.js # Переконайтеся, що сервер запускається без помилок ``` - + ### Загальний підхід до тестування -- Це навчальний репозиторій без комплексних автоматизованих тестів -- Ручне тестування зосереджено на: - - Коректному виконанні прикладів коду без помилок - - Роботі посилань у документації - - Успішних збірках проектів - - Дотриманні найкращих практик у прикладах +- Це навчальний репозиторій без повного набору автоматизованих тестів +- Ручне тестування зосереджене на: + - Виконання коду без помилок + - Коректність посилань у документації + - Успішне завершення збірок проектів + - Використання кращих практик у прикладах -### Перевірки перед відправкою +### Перевірки перед поданням -- Запускайте `npm run lint` у директоріях з package.json -- Переконуйтесь, що посилання у markdown дійсні -- Тестуйте приклади коду у браузері або Node.js -- Перевіряйте, що переклади зберігають правильну структуру +- Запустіть `npm run lint` у директоріях з package.json +- Переконайтеся, що всі markdown-посилання валідні +- Перевірте приклади коду в браузері або Node.js +- Переконайтеся, що переклади збережено правильною структурою ## Керівництво зі стилю коду ### JavaScript -- Використовуйте сучасний синтаксис ES6+ -- Дотримуйтесь стандартних конфігурацій ESLint у проектах -- Використовуйте осмислені імена змінних і функцій для кращого навчання -- Додавайте коментарі, що пояснюють концепції для учнів -- Форматуйте код з Prettier там, де це настроєно +- Використовуйте сучасний синтаксис ES6+ +- Дотримуйтеся стандартних конфігурацій ESLint у проектах +- Використовуйте зрозумілі назви змінних і функцій для навчальної ясності +- Додавайте коментарі із поясненнями концепцій для учнів +- Форматуйте код за допомогою Prettier, якщо налаштовано ### HTML/CSS -- Семантичні елементи HTML5 -- Принципи адаптивного дизайну -- Чіткі конвенції іменування класів -- Коментарі, що пояснюють CSS-техніки для учнів +- Семантичні елементи HTML5 +- Принципи адаптивного дизайну +- Чіткі конвенції іменування класів +- Коментарі з поясненнями CSS для учнів ### Python -- Дотримуйтесь стилю PEP 8 -- Чіткі навчальні приклади коду -- Використовуйте типізацію, коли це корисно для навчання +- Дотримання стилю PEP 8 +- Зрозумілі, освітні приклади коду +- Типові підказки там, де це допомагає для вивчення -### Документація Markdown +### Документація у Markdown -- Чітка ієрархія заголовків -- Блоки коду з вказаною мовою -- Посилання на додаткові ресурси -- Знімки екрану та зображення у папках `images/` -- Опис для зображень для доступності +- Чітка ієрархія заголовків +- Блоки коду з вказанням мови +- Посилання на додаткові ресурси +- Скриншоти та зображення у папках `images/` +- Атрибути alt для зображень для доступності ### Організація файлів -- Уроки нумеруються послідовно (1-getting-started-lessons, 2-js-basics тощо) -- Кожен проект має папки `solution/` і часто `start/` або `your-work/` -- Зображення зберігаються в окремих папках `images/` для кожного уроку -- Переклади розташовані в структурах `translations/{language-code}/` +- Уроки нумеруются послідовно (1-getting-started-lessons, 2-js-basics тощо) +- Кожен проект має каталоги `solution/` та зазвичай `start/` або `your-work/` +- Зображення зберігаються у специфічних для уроків папках `images/` +- Переклади знаходяться у структурах `translations/{language-code}/` -## Збірка і розгортання +## Збірка та розгортання ### Розгортання Quiz App (Azure Static Web Apps) -quiz-app налаштований для розгортання в Azure Static Web Apps: +Quiz-app налаштовано для розгортання в Azure Static Web Apps: ```bash cd quiz-app npm run build # Створює папку dist/ -# Розгортає за допомогою робочого процесу GitHub Actions при пуші до main +# Розгортає через GitHub Actions workflow при пуші в main ``` - -Конфігурація Azure Static Web Apps: -- **Розташування додатку**: `/quiz-app` -- **Папка виводу**: `dist` -- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### Генерація PDF документації +Налаштування Azure Static Web Apps: +- **Місцезнаходження додатку**: `/quiz-app` +- **Вихідна папка**: `dist` +- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` + +### Генерація PDF-документації ```bash -npm install # Встановити docsify-to-pdf -npm run convert # Згенерувати PDF з документів +npm install # Встановіть docsify-to-pdf +npm run convert # Згенерувати PDF з docs ``` - + ### Документація Docsify ```bash -npm install -g docsify-cli # Встановити Docsify глобально -docsify serve # Запустити на localhost:3000 +npm install -g docsify-cli # Встановіть Docsify глобально +docsify serve # Запустіть на localhost:3000 ``` - -### Збірки для конкретних проектів -Кожна директорія проекту може мати свій процес збірки: -- Vue-проекти: `npm run build` створює production-бандли -- Статичні проекти: немає кроку збірки, файли подаються напряму +### Збірки проектів + +Кожна директорія проекту може мати власний процес збірки: +- Vue-проекти: `npm run build` для створення продакшн-бандлів +- Статичні проекти: немає кроку збірки, файли подаються напряму -## Керівництво для Pull Request +## Правила Pull Request -### Формат заголовку +### Формат заголовка -Використовуйте чіткі описові заголовки, що вказують сферу змін: -- `[Quiz-app] Додати нову вікторину для уроку X` -- `[Lesson-3] Виправити опечатку в проекті terrarium` -- `[Translation] Додати іспанський переклад для уроку 5` -- `[Docs] Оновити інструкції з налаштування` +Використовуйте чіткі, описові заголовки, що вказують на зону змін: +- `[Quiz-app] Додати новий тест для уроку X` +- `[Lesson-3] Виправити помилку в проекті терраріум` +- `[Translation] Додати іспанський переклад для уроку 5` +- `[Docs] Оновити інструкції з налаштування` -### Обов’язкові перевірки +### Вимоги до перевірок -Перед подачею PR: +Перед поданням PR: -1. **Якість коду**: - - Запустіть `npm run lint` у відповідних каталогах - - Виправте всі помилки та попередження lint +1. **Якість коду**: + - Запустіть `npm run lint` у відповідних директоріях проектів + - Виправте всі помилки та попередження lint -2. **Перевірка збірки**: - - Якщо застосовно, запустіть `npm run build` - - Переконайтесь, що немає помилок збірки +2. **Перевірка збірки**: + - Запустіть `npm run build` якщо застосовано + - Переконайтеся, що нема помилок збірки -3. **Перевірка посилань**: - - Перевірте всі markdown-посилання - - Переконайтесь, що зображення відображаються правильно +3. **Перевірка посилань**: + - Перевірте всі markdown-посилання + - Переконайтеся, що посилання на зображення працюють -4. **Перегляд контенту**: - - Перевірте орфографію та граматику - - Переконайтесь, що приклади коду коректні і зрозумілі - - Перевірте, що переклади зберігають оригінальний зміст +4. **Перевірка контенту**: + - Вичитайте на предмет орфографії та граматики + - Переконайтеся у правильності та освітності прикладів коду + - Перевірте переклади на збереження початкового значення ### Вимоги до внеску -- Погодитись з Microsoft CLA (автоматична перевірка при першому PR) -- Дотримуватись [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) -- Детальні інструкції в [CONTRIBUTING.md](./CONTRIBUTING.md) -- Якщо є, вказуйте номери issues у описі PR +- Погодьтеся з Microsoft CLA (автоматична перевірка при першому PR) +- Дотримуйтесь [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) +- Детальні інструкції у [CONTRIBUTING.md](./CONTRIBUTING.md) +- Вказуйте номери issue у описі PR при потребі -### Процес рев’ю +### Процес огляду -- PR переглядають мейнтейнер та спільнота -- Пріоритет — освітня зрозумілість -- Приклади коду повинні відповідати актуальним найкращим практикам -- Переклади перевіряють на точність та відповідність культурі +- PR переглядають мейнтейнер і спільнота +- Освітня ясність ставиться у пріоритет +- Приклади коду мають відповідати актуальним кращим практикам +- Переклади перевіряються на точність та культурну відповідність ## Система перекладів ### Автоматичний переклад -- Використовує GitHub Actions із workflow co-op-translator -- Автоматично перекладає більш ніж на 50 мов -- Джерельні файли у основних директоріях -- Перекладені файли у папках `translations/{language-code}/` +- Використовує GitHub Actions з workflow co-op-translator +- Автоматично перекладає на понад 50 мов +- Файли джерела у основних директоріях +- Перекладені файли у `translations/{language-code}/` -### Додавання ручних покращень перекладу +### Ручне покращення перекладів -1. Знайдіть файл у `translations/{language-code}/` -2. Вносьте покращення, зберігаючи структуру -3. Переконайтесь, що приклади коду залишаються працездатними -4. Перевірте будь-який локалізований контент вікторин +1. Знайдіть файл у `translations/{language-code}/` +2. Вносьте покращення, зберігаючи структуру +3. Переконайтеся, що приклади коду лишаються робочими +4. Тестуйте будь-який локалізований тестовий контент ### Метадані перекладу -Перекладені файли містять заголовок із метаданими: +Перекладені файли містять заголовок із метаданими: ```markdown ``` - + ## Налагодження та усунення неполадок ### Поширені проблеми -**Quiz app не запускається**: -- Перевірте версію Node.js (рекомендується v14+) -- Видаліть `node_modules` і `package-lock.json`, виконайте `npm install` знову -- Перевірте конфлікти портів (за замовчуванням Vite використовує порт 5173) +**Quiz app не запускається**: +- Перевірте версію Node.js (рекомендовано v14+) +- Видаліть `node_modules` і `package-lock.json`, запустіть `npm install` знову +- Перевірте конфлікти портів (стандартний порт Vite — 5173) -**API сервер не запускається**: -- Переконайтесь, що версія Node.js відповідає мінімальній (node >=10) -- Перевірте, чи порт вже не зайнятий -- Переконайтесь, що всі залежності встановлені через `npm install` +**API сервер не запускається**: +- Переконайтеся, що версія Node.js відповідає мінімуму (node >=10) +- Перевірте, чи порт не зайнятий +- Переконайтеся, що всі залежності встановлені через `npm install` -**Розширення браузера не завантажується**: -- Переконайтесь, що manifest.json правильно сформатований -- Перевірте консоль браузера на помилки -- Дотримуйтесь інструкцій зі встановлення, специфічних для браузера +**Розширення браузера не завантажується**: +- Перевірте правильність формату manifest.json +- Перевірте в консолі браузера на наявність помилок +- Дотримуйтеся інструкцій установки специфічних для браузера -**Проблеми з Python чат-проектом**: -- Переконайтесь, що пакет OpenAI встановлений: `pip install openai` -- Переконайтесь, що змінна середовища GITHUB_TOKEN встановлена -- Перевірте права доступу GitHub Models +**Проблеми з Python чат-проектом**: +- Перевірте, що пакет OpenAI встановлено: `pip install openai` +- Переконайтеся, що встановлено змінну середовища GITHUB_TOKEN +- Перевірте права доступу до GitHub Models -**Docsify не подає документацію**: -- Встановіть docsify-cli глобально: `npm install -g docsify-cli` -- Запускайте з кореневого каталогу репозиторію -- Переконайтесь, що файл `docs/_sidebar.md` існує +**Docsify не подає документацію**: +- Встановіть docsify-cli глобально: `npm install -g docsify-cli` +- Запускайте з кореневої директорії репозиторію +- Переконайтеся, що існує `docs/_sidebar.md` ### Поради для середовища розробки -- Використовуйте VS Code з розширенням Live Server для HTML проектів -- Встановіть розширення ESLint та Prettier для консистентного форматування -- Використовуйте DevTools браузера для налагодження JavaScript -- Для Vue проектів встановіть розширення Vue DevTools для браузера +- Використовуйте VS Code з розширенням Live Server для HTML проектів +- Встановіть ESLint та Prettier для узгодженого форматування +- Використовуйте DevTools браузера для налагодження JavaScript +- Для Vue проектів встановіть розширення Vue DevTools браузера -### Особливості продуктивності +### Міркування щодо продуктивності -- Велика кількість перекладених файлів (50+ мов) робить повні клони великими -- Використовуйте shallow clone, якщо працюєте лише з контентом: `git clone --depth 1` -- Виключайте переклади з пошуку при роботі з англійською версією -- Процеси збірки можуть бути повільними при першому запуску (npm install, збірка Vite) +- Велика кількість перекладених файлів (50+ мов) збільшує розмір клонування +- Використовуйте швидке клонування, якщо працюєте лише з контентом: `git clone --depth 1` +- Виключайте переклади з пошуку при роботі з англійською версією +- Процеси збірки можуть бути повільними під час першого запуску (npm install, збірка Vite) -## Питання безпеки +## Міркування безпеки ### Змінні середовища -- API-ключі ніколи не повинні комітитись у репозиторій -- Використовуйте `.env` файли (вже в `.gitignore`) -- Документуйте необхідні змінні середовища в README проектів +- Ключі API ніколи не повинні потрапляти у репозиторій +- Використовуйте `.env` файли (вже в `.gitignore`) +- Документуйте потрібні змінні середовища у README проектів -### Python-проекти +### Python проектів -- Використовуйте віртуальні середовища: `python -m venv venv` -- Оновлюйте залежності -- Токени GitHub повинні мати мінімально необхідні дозволи +- Використовуйте віртуальні середовища: `python -m venv venv` +- Оновлюйте залежності +- GitHub токени повинні мати мінімальні необхідні дозволи -### Доступ GitHub Models +### Доступ до GitHub Models -- Потрібні персональні токени доступу (PAT) для GitHub Models -- Токени зберігайте у змінних середовища -- Ніколи не комітьте токени або облікові дані +- Для GitHub Models потрібні Personal Access Tokens (PAT) +- Токени треба зберігати як змінні середовища +- Ніколи не комітьте токени або облікові дані ## Додаткові нотатки ### Цільова аудиторія -- Повні початківці у веб-розробці -- Студенти та самонавчальні -- Викладачі, що використовують курикулум у класах -- Контент розроблений з урахуванням доступності та поступового нарощування навичок +- Повні початківці у веб-розробці +- Студенти та самонавчальні +- Вчителі, які використовують курс у класах +- Контент створений з урахуванням доступності та поступового розвитку навичок ### Освітня філософія -- Підхід на основі проектів -- Часті перевірки знань (вікторини) -- Практичні вправи з кодування -- Приклади з реального життя -- Акцент на основах перед фреймворками +- Навчання через проекти +- Часті перевірки знань (тести) +- Практичні вправи з кодування +- Приклади із реального світу +- Фокус на основах до вивчення фреймворків ### Підтримка репозиторію -- Активна спільнота учнів і контрибуторів -- Регулярні оновлення залежностей і контенту -- Моніторинг issues і дискусій мейнтейнерами -- Оновлення перекладів автоматизовані через GitHub Actions +- Активна спільнота учнів і контрибуторів +- Регулярні оновлення залежностей і контенту +- Моніторинг проблем та обговорень мейнтейнерами +- Автоматизація оновлень перекладів через GitHub Actions ### Пов’язані ресурси -- [Модулі Microsoft Learn](https://docs.microsoft.com/learn/) -- [Ресурси Student Hub](https://docs.microsoft.com/learn/student-hub/) -- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) рекомендований для учнів -- Додаткові курси: Generative AI, Data Science, ML, IoT curricula доступні +- [Microsoft Learn modules](https://docs.microsoft.com/learn/) +- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/) +- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) рекомендовано для учнів +- Додаткові курси: налаштування для Generative AI, Data Science, ML, IoT -### Робота з окремими проектами +### Робота з конкретними проектами -Для детальних інструкцій звертайтеся до README файлів у: -- `quiz-app/README.md` - Vue 3 додаток вікторин -- `7-bank-project/README.md` - Банківський додаток з автентифікацією -- `5-browser-extension/README.md` - Розробка розширень браузера -- `6-space-game/README.md` - Розробка гри на Canvas -- `9-chat-project/README.md` - Проект AI чат-асистента +Для детальних інструкцій щодо окремих проектів дивіться README файли у: +- `quiz-app/README.md` - додаток для тестування на Vue 3 +- `7-bank-project/README.md` - банківський додаток з автентифікацією +- `5-browser-extension/README.md` - розробка розширень для браузера +- `6-space-game/README.md` - розробка гри з canvas +- `9-chat-project/README.md` - проект AI чат-асистента ### Структура монорепозиторію -Хоча це не традиційний монорепозиторій, він містить кілька незалежних проектів: -- Кожен урок автономний -- Проекти не розділяють залежності -- Працюйте з окремими проектами без впливу на інші -- Клонуйте весь репозиторій для повного досвіду курсу +Хоча це не традиційний монорепозиторій, він містить кілька незалежних проектів: +- Кожен урок є автономним +- Проекти не ділять залежності +- Працюйте над окремими проектами без впливу на інші +- Клонуйте увесь репозиторій для повного курсу --- -**Відмова від відповідальності**: -Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується звертатися до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння чи неправильні тлумачення, що виникли внаслідок використання цього перекладу. +**Застереження**: +Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоч ми і прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою повинен вважатися авторитетним джерелом. Для критичної інформації рекомендується звертатися до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають унаслідок використання цього перекладу. \ No newline at end of file